/* ChemFox site: the layout and type of trevfox.dev, in ChemFox orange. Shared by every page. */
:root {
  --bg: #fff8f3; --text: #424242; --muted: #6b6b6b; --code-bg: #fde8d9;
  --accent: #f06e1e;        /* bars, borders, the logo */
  --accent-text: #c2410c;   /* orange text: deeper on light backgrounds so it stays readable */
  --rule: color-mix(in srgb, var(--text) 18%, transparent);
  --sans: "Rubik", ui-sans-serif, system-ui, sans-serif;
  --nav: "JetBrains Mono", ui-monospace, monospace;
  --mono: "PT Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dark { --bg: #1a1a1a; --text: #ffffff; --muted: #b8b8b8; --code-bg: #333333; --accent-text: #f06e1e; }
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0 auto; max-width: 77ch; padding: 0 16px; background: var(--bg); color: var(--text);
       font: 400 16px/1.6 var(--sans); transition: background-color .4s, color .4s; }
a { color: inherit; }
::selection { background: var(--accent); color: #fff; }

/* Header: wordmark left, mono nav right */
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 0 8px; flex-wrap: wrap; }
.logo { font-size: 30px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.logo img { width: 34px; height: 34px; border-radius: 8px; }
.logo .a { color: var(--accent-text); }
nav { display: flex; align-items: center; gap: 22px; font-family: var(--nav); font-weight: 600; }
nav a { text-decoration: none; }
nav a:hover, nav a[aria-current], .theme:hover { color: var(--accent-text); }
.theme { background: none; border: 0; color: inherit; cursor: pointer; padding: 4px; display: inline-flex; }
.theme svg { width: 20px; height: 20px; }
.dark .sun-only, :root:not(.dark) .moon-only { display: none; }

main { padding: 28px 0 40px; }
.lede { font-size: 1.15rem; margin: 0 0 6px; }
.lede strong { color: var(--accent-text); font-weight: 500; }
.sub { color: var(--muted); margin: 0 0 28px; }
.badge { display: inline-block; font: 600 12px var(--nav); letter-spacing: .5px; text-transform: uppercase;
         color: #fff; background: var(--accent); border-radius: 4px; padding: 1px 7px; vertical-align: 3px; margin-left: 6px; }

/* Section dividers: label + 2px rule */
.divider { display: flex; align-items: center; gap: 8px; margin: 36px 0 16px; }
.divider span { white-space: nowrap; }
.divider i { height: 2px; flex: 1; background: var(--text); }

/* Entries: accent bar on the left, accent title, meta line */
.entry { display: flex; gap: 12px; margin-bottom: 20px; }
.entry::before { content: ""; width: 4px; border-radius: 4px; background: var(--accent); flex: none; }
.entry h3 { margin: 0; font-size: 20px; font-weight: 500; }
.entry h3 a, .entry h3 { color: var(--accent-text); text-decoration: none; }
.entry h3 a:hover { text-decoration: underline; }
.meta { font-size: 14px; letter-spacing: .35px; margin-top: 2px; }
.tags a { margin-right: 8px; text-decoration: underline; }
.entry p { margin: 4px 0 0; }

figure { margin: 0; }
figure img { width: 100%; height: auto; display: block; border: 2px solid var(--accent); border-radius: 8px; background: #fff; }
figcaption { font-size: 14px; color: var(--muted); margin-top: 6px; }

kbd { font: 14px var(--mono); background: var(--code-bg); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
code { font: 14px var(--mono); background: var(--code-bg); border-radius: 4px; padding: 1px 5px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
td, th { padding: 7px 8px 7px 0; vertical-align: top; border-bottom: 1px solid var(--rule); text-align: left; }
th { font: 600 13px var(--nav); color: var(--muted); }
td:first-child { white-space: nowrap; padding-right: 16px; }

/* Guide pages */
.guide h2 { font-size: 24px; font-weight: 500; margin: 44px 0 8px; scroll-margin-top: 16px; }
.guide h2 a { text-decoration: none; }
.guide h3 { font-size: 18px; font-weight: 500; color: var(--accent-text); margin: 24px 0 4px; }
.guide p, .guide li { max-width: 70ch; }
.guide ul, .guide ol { padding-left: 22px; }
.guide li { margin: 3px 0; }
.toc { border-left: 4px solid var(--accent); border-radius: 2px; padding: 4px 0 4px 14px; margin: 8px 0 8px; }
.toc a { text-decoration: none; }
.toc a:hover { color: var(--accent-text); text-decoration: underline; }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 24px; }
.guide table { table-layout: fixed; }
.guide td:first-child { width: 15em; white-space: normal; }
.tip { background: var(--code-bg); border-radius: 8px; padding: 10px 14px; margin: 14px 0; }
.tip b:first-child { color: var(--accent-text); }

footer { font: 300 12px var(--mono); text-align: center; padding: 24px 0 32px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--accent-text); }
@media (max-width: 560px) { nav { gap: 14px; font-size: 14px; } .logo { font-size: 26px; } .toc ol { columns: 1; } }