/* Fitness Log — shared article-page template (masthead, nav, variables, base typography).
   Used by about.html, guide.html, roadmap.html, setup.html.
   index.html is a separate app template with its own inline styles — not included here. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#f1ebdc;
--bg-soft:#ebe4d2;
--surface:#f7f2e4;
--ink:#1c2018;
--ink-soft:#3a3d33;
--ink-faint:#6f6b58;
--ink-mute:#9c977f;
--rule:#d9d2bf;
--rule-soft:#e3ddca;
--accent:#2f5872;
--gold:#a04a15;
/* The dashboard's zone orange, mirrored from index.html's :root (split for
   contrast 2026-08-19). --orange is the graphic value the recovery bars and
   charts actually draw with; --orange-text is the small-text value at 5.15:1
   on --bg. about.html's colour legend must show these, not --gold, which is
   this template's editorial accent and nothing to do with the zone signal.
   Keep both in step with index.html. */
--orange:#a2753e;
--orange-text:#7e5b30;
--green:#4a6b3b;
--red:#b53026;
--sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
--serif:'Lora','Iowan Old Style',Georgia,serif;
--mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover{color:var(--accent);border-bottom-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.masthead{display:flex;align-items:center;justify-content:space-between;padding:16px 40px;border-bottom:1px solid var(--rule);gap:16px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:baseline;gap:12px;color:var(--ink);border-bottom:none}
.brand:hover{color:var(--ink)}
.brand__mark{font-size:22px;color:var(--accent);line-height:1;position:relative;top:-2px}
.brand h1{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,3.4vw,32px);letter-spacing:-0.018em;line-height:1;margin:0;color:var(--ink)}
.masthead__nav{display:flex;gap:22px;flex-wrap:wrap}
.masthead__nav a{font-family:var(--mono);font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink-soft);padding:6px 0;border-bottom:none}
.masthead__nav a:hover{color:var(--accent)}
.article{max-width:760px;margin:0 auto;padding:56px 40px 96px}
.article__kicker{font-family:var(--mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 18px}

/* ---- Canonical article-page components (Phase 2, 2026-08-06 portfolio
   reconciliation) — promoted out of about.html's/guide.html's own
   page-scoped <style> blocks, where they'd lived until now. guide.html's
   copies already matched Vinyl Scout's canonical naming/colors exactly
   (mode-grid, model-grid, stepper, field-note, prompt-box, next-grid), so
   this is a pure move, no renames. about.html's .glossary/.wont components
   have no canonical-library equivalent and stay page-scoped, unique to
   that page. Base rules only — each page's own @media blocks (including
   the responsive overrides for the classes moved here) are left in place,
   since about.html's and guide.html's mobile breakpoints for the shared
   masthead/article padding differ (640px vs 720px) and reconciling that
   wasn't part of this pass. Note: .field-note p and .next-card p are
   prefixed with .article (below) though nothing else here is -- guide.html
   also defines a generic .article p at the same base specificity as a
   bare ".field-note p"/".next-card p", and relied on being defined later
   in the same <style> block to win the tie. Moving them here without the
   extra .article prefix would let .article p's font-size win instead,
   since this file loads before guide.html's own <style> block. */
.article h1{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(32px,5vw,48px);line-height:1.05;letter-spacing:-0.02em;margin:0 0 16px;color:var(--ink)}
.article__lede{font-family:var(--serif);font-size:19px;font-style:italic;line-height:1.45;color:var(--ink-soft);margin:0 0 32px;padding-bottom:24px;border-bottom:1px solid var(--rule)}
.article h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:23px;line-height:1.2;letter-spacing:-0.01em;margin:40px 0 12px;color:var(--ink)}
.article h2 .num{font-family:var(--mono);font-style:normal;font-weight:500;font-size:11px;letter-spacing:0.2em;color:var(--accent);text-transform:uppercase;margin-right:10px;vertical-align:3px}
.foot{margin-top:48px;font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-faint);line-height:1.8}

.stepper{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;padding:0;list-style:none}
.stepper a{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--rule);border-radius:999px;padding:7px 12px;transition:border-color 100ms,color 100ms}
.stepper a:hover{border-color:var(--accent);color:var(--accent)}
.stepper__n{color:var(--accent);font-weight:600}

.field-note{margin:0 0 32px;padding:18px 22px;background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--gold);border-radius:2px}
.field-note__kicker{font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.article .field-note p{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.55;color:var(--ink-soft);margin:0}

.model-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0 16px}
.model-card{border-radius:6px;padding:16px 15px 18px;border:1px solid var(--rule)}
.model-card__name{font-family:var(--serif);font-style:italic;font-weight:400;font-size:19px;margin:0 0 4px;color:var(--ink)}
.model-card__tag{font-family:var(--mono);font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 10px;line-height:1.4}
.model-card__desc{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink-soft);margin:0}
.model-card--haiku{background:#e6edf4;border-color:#93aec7}
.model-card--sonnet{background:#f4ede2;border-color:#c9b891}
.model-card--opus{background:#eeeae3;border-color:#b3a98f}
.model-card--fable{background:#e9f0e6;border-color:#a4bd9a}
.model-rule{margin:0 0 8px;padding:14px 18px;background:var(--bg-soft);border-radius:2px;font-size:14px;line-height:1.65;color:var(--ink)}
.model-rule strong{font-weight:600}

.mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0 10px}
.mode-card{border-radius:6px;padding:18px 16px 20px;border:1px solid var(--rule)}
.mode-card__name{font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px;margin:0 0 4px;color:var(--ink)}
.mode-card__role{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;margin:0 0 12px}
.mode-card ul{margin:0;padding:0;list-style:none}
.mode-card li{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--ink-soft);margin:0 0 7px}
.mode-card li:last-child{margin-bottom:0}
.mode-card--chat{background:#f4ede2;border-color:#c9b891}
.mode-card--terminal{background:#eeeae3;border-color:#b3a98f}
.mode-card--cowork{background:#e9f0e6;border-color:#a4bd9a}
.mode-card--scheduled{background:#e6edf4;border-color:#93aec7}
.mode-card--chat .mode-card__role{color:#6b5f49}
.mode-card--terminal .mode-card__role{color:#6b5f49}
.mode-card--cowork .mode-card__role{color:#5a6e50}
.mode-card--scheduled .mode-card__role{color:#4d6377}
.mode-caption{font-family:var(--mono);font-size:13px;font-style:italic;color:var(--ink-faint);text-align:center;margin:6px 0 20px}

.article__closing-kicker{font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 8px}
.article__divider{margin:52px 0 34px;border-top:1px solid var(--rule)}

.prompt-box{position:relative;margin:16px 0 24px;padding:20px 22px;background:#22201b;border:1px solid #4a4438;border-radius:6px}
.prompt-box pre{margin:0;padding-right:68px;white-space:pre-wrap;word-wrap:break-word;font-family:var(--mono);font-size:12.5px;line-height:1.65;color:#efe9dc}
.prompt-copy{position:absolute;top:12px;right:12px;background:var(--bg);color:var(--ink);border:none;border-radius:4px;font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;padding:7px 12px;cursor:pointer}
.prompt-copy:hover{background:#fff}
.next-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 32px}
.next-card{border:1px solid var(--rule);border-left:3px solid var(--gold);border-radius:2px;padding:14px 16px;background:var(--surface)}
.next-card__n{font-family:var(--mono);font-size:10px;letter-spacing:0.15em;color:var(--gold);margin-bottom:4px}
.next-card h4{font-family:var(--serif);font-style:italic;font-weight:400;font-size:16px;margin:0 0 4px;color:var(--ink)}
.article .next-card p{font-size:12.5px;line-height:1.5;color:var(--ink-soft);margin:0}