/* ==========================================================================
   SRL DESIGN SYSTEM — permanent standard for all article + field-sheet pages
   Dark premium UI · warm parchment field sheets · burnt orange accents
   Headings: bold condensed sans, uppercase. Body copy: serif. Labels: mono.
   ========================================================================== */
:root{
  --bg:#0c0a08;
  --surface-1:#161210;
  --surface-2:#1e1815;
  --parchment:#f2e9db;
  --parchment-dim:#e6d7bd;
  --ink:#15100b;
  --ember:#e2611c;
  --ember-dim:#a8480f;
  --text:#f2ece2;
  --text-dim:#a89a85;
  --text-faint:#8f8067;
  --line:#2a2320;
  --line-soft:#211b17;
  --green:#4a9a5a;
  --decision-accent:#7fc9a8;
  --decision-border:#2f5245;
  --mistake-accent:#ff8b56;
  --mistake-border:#5a2f1c;
  --contour-fill:#1e1815;
  --contour-line:#5c4936;
  --water-accent:#5b7fa6;
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', ui-serif, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
  --mono: 'SF Mono', 'Söhne Mono', Menlo, Consolas, monospace;

  /* --- tokens introduced in the product-polish pass: reused everywhere below, nothing new visually --- */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.28);
  --shadow-md:0 10px 28px rgba(0,0,0,.38);
  --shadow-lg:0 30px 80px rgba(0,0,0,.5);
  --ease:cubic-bezier(.4,0,.2,1);
  --dur:160ms;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
a{color:inherit; -webkit-tap-highlight-color:transparent;}
button{font-family:inherit; -webkit-tap-highlight-color:transparent;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:1160px; margin:0 auto; padding:0 32px;}
/* Measure control only — no independent centering/padding. `.narrow` must always be nested
   inside a `.wrap` (which provides the real left margin + 1160px centering); a `.narrow` that
   centers itself at its own 760px width sits ~200px to the right of everything else on the
   page on desktop, since its left edge no longer matches `.wrap`'s. */
.narrow{max-width:760px;}
.mono{font-family:var(--mono); letter-spacing:.02em;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}
.empty-note{color:var(--text-faint); font-size:13px;}

/* Accessibility: a visible, on-brand focus ring for every interactive element. Browsers already
   suppress this for mouse users via :focus-visible, so it costs nothing visually for most people
   and fixes a real gap for keyboard/screen-reader users. */
:focus-visible{outline:2px solid var(--ember); outline-offset:2px; border-radius:2px;}

#progress{position:fixed; top:0; left:0; height:2px; background:var(--ember); width:0%; z-index:100;}

/* ---------- typography system: bold uppercase sans for headings, serif for body copy ---------- */
h1,h2,h3,h4{font-family:var(--sans); margin:0; color:var(--text);}
h1,h2{font-weight:800; text-transform:uppercase; letter-spacing:-.01em;}
h1{font-size:46px; line-height:1.04; margin:0 0 14px; max-width:17ch; color:#fff;}
h2.big{font-size:30px; line-height:1.12; margin:0 0 12px;}
h2.big.h2-sm{font-size:23px;}
h3{font-weight:800; text-transform:none; letter-spacing:0;}
.lede, .sub, p, .dek, li{font-family:var(--serif);}
/* UI chrome — nav, buttons, form controls, eyebrows/labels, meta — stays sans/mono regardless
   of the serif rule above, since only reading prose should carry serif. */
nav.main, .btn-primary, .btn-ghost, .sheet-cta, .next-btn, .search-chip, .nav-toggle,
.eyebrow, .section-eyebrow, .tag, .meta-line, .hero-meta, .crumbs, .foot-grid,
.k, .idx, input, button, .logo, .stat-num, .stat-label, .badge-verified{font-family:var(--sans);}
/* .mono keeps its own dedicated monospace rule above — deliberately not swept into the sans
   bucket, since a handful of markup spots (e.g. the path-progress "published" note) opt into
   true monospace explicitly via class="mono" rather than through one of the named components. */

/* ---------- header / nav ---------- */
header.site{position:sticky; top:0; z-index:50; background:rgba(12,10,8,.97); border-bottom:1px solid var(--line-soft);}
header.site .site-row{position:relative;}
.site-row{display:flex; align-items:center; justify-content:space-between; padding:14px 32px; gap:20px;}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);}
.logo-mark{width:30px; height:30px; border-radius:6px; border:1.5px solid var(--ember); color:var(--ember); background:transparent; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; letter-spacing:.02em;}
.logo-word{font-weight:800; font-size:12.5px; letter-spacing:.03em; line-height:1.25; text-transform:uppercase;}
nav.main{display:flex; align-items:center; gap:24px; flex:1; justify-content:center;}
nav.main a{font-size:13px; color:var(--text-dim); text-decoration:none; transition:color var(--dur) var(--ease); position:relative; padding:4px 0; font-weight:600;}
nav.main a:hover{color:var(--text);}
nav.main a[aria-current="page"]{color:var(--ember);}
.icon{width:14px; height:14px; flex-shrink:0; display:inline-block; vertical-align:middle;}
.search-chip{font-size:12px; color:var(--text-faint); border:1px solid var(--line); padding:6px 12px; border-radius:var(--radius-sm); display:flex; align-items:center; gap:8px; text-decoration:none; transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);}
.search-chip:hover{border-color:var(--ember-dim); color:var(--text-dim);}
.header-actions{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.btn-signin{font-size:13px; font-weight:700; color:var(--text-dim); text-decoration:none; border:1px solid var(--line); padding:9px 16px; border-radius:var(--radius-sm); transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);}
.btn-signin:hover{border-color:var(--ember-dim); color:var(--text);}
.btn-begin{background:var(--ember); color:#170f08; font-weight:700; font-size:13px; padding:10px 18px; border-radius:var(--radius-sm); text-decoration:none; white-space:nowrap; transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);}
.btn-begin:hover{background:#f3702c; transform:translateY(-1px);}
.nav-toggle{display:none; align-items:center; justify-content:center; background:none; border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--text); width:40px; height:40px; cursor:pointer; transition:border-color var(--dur) var(--ease);}
.nav-toggle:hover{border-color:var(--ember-dim);}

.crumbs{font-size:12px; color:var(--text-faint); padding:14px 32px 0; font-family:var(--sans);}
.crumbs a{text-decoration:none; color:var(--text-faint); transition:color var(--dur) var(--ease);}
.crumbs a:hover{color:var(--ember);}

/* ---------- hero (cinematic photo band, art-directed placeholder) ---------- */
.hero-photo{
  position:relative; height:56vh; min-height:380px; margin:20px 32px 0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
}
.hero-photo .grad{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,8,6,0) 0%, rgba(8,6,5,.6) 65%, rgba(6,5,4,.94) 100%);}
.brief-chip{position:absolute; top:16px; right:16px; background:rgba(10,8,6,.62); border:1px solid rgba(255,255,255,.16); color:#e8dfd0; font-size:10.5px; padding:6px 10px; border-radius:var(--radius-sm); max-width:280px; text-align:right; line-height:1.5; z-index:2; font-family:var(--sans);}
.brief-chip b{display:block; color:var(--ember); font-size:9.5px; letter-spacing:.08em; margin-bottom:3px;}
.hero-content{position:absolute; left:0; right:0; bottom:0; padding:36px; z-index:2;}
.hero-photo-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.eyebrow{display:inline-block; font-size:11px; letter-spacing:.1em; font-weight:700; color:var(--ember); background:rgba(226,97,28,.14); border:1px solid rgba(226,97,28,.4); padding:5px 11px; border-radius:var(--radius-sm); margin-bottom:16px; text-transform:uppercase;}

/* No real photograph on file yet — an honest text-only hero instead of a placeholder image.
   Same eyebrow/h1/byline markup, just not laid over a photo band. Disappears automatically
   the moment a topic sets heroImage.status = "ready". */
.hero-noimage{max-width:1160px; margin:0 auto; padding:52px 32px 8px;}
.hero-noimage h1{color:var(--text);}

/* One quiet fact line under the title — skill level, read time, freshness. No badges: these are
   plain facts, not trust claims, so they don't need a border to justify their presence. */
.hero-meta{font-size:12px; letter-spacing:.02em; color:#d8cdba; margin-top:14px;}
.hero-noimage .hero-meta{color:var(--text-faint);}
.badge-verified{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--decision-accent); border:1px solid var(--decision-border); background:rgba(127,201,168,.08); padding:6px 12px; border-radius:var(--radius-sm); white-space:nowrap;}

.lede{font-size:17px; color:var(--text-dim); max-width:64ch; margin:22px 0 0;}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;}
.tag{font-size:11.5px; color:var(--text-dim); border:1px solid var(--line); padding:6px 12px; border-radius:999px; font-weight:600;}
a.tag{text-decoration:none; transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);}
a.tag:hover{border-color:var(--ember-dim); color:var(--text);}
.tag.active{background:var(--ember); border-color:var(--ember); color:#170f08;}
.meta-line{font-size:11px; color:var(--text-faint); letter-spacing:.02em; margin-top:18px;}
.meta-line a{color:var(--text-dim); text-decoration:underline; text-underline-offset:2px;}

.hero-ctas{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:26px;}

section.block{padding:64px 0;}
section.block.tight{padding:40px 0;}
.section-eyebrow{font-size:11px; letter-spacing:.1em; font-weight:700; color:var(--ember); margin-bottom:12px; text-transform:uppercase;}
.section-eyebrow.inline{margin-bottom:0;}
.sub{color:var(--text-dim); font-size:15.5px; max-width:62ch; margin:0 0 30px;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap;}
.section-head h2.big{margin-bottom:6px;}
.section-link{font-size:12.5px; font-weight:700; color:var(--text-dim); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; white-space:nowrap; transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.section-link:hover{color:var(--ember); border-color:var(--ember-dim);}

/* ---------- field sheet preview (product-first) ---------- */
.sheet-stage{background:radial-gradient(ellipse at 50% 0%, rgba(226,97,28,.08), transparent 60%); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
.product-label{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:30px;}
.product-label .line{height:1px; width:40px; background:var(--line);}
.sheet-card{max-width:460px; margin:0 auto; background:var(--parchment); color:var(--ink); border-radius:var(--radius-lg); padding:26px; border:1px solid #d9c9a8; box-shadow:var(--shadow-lg), 0 2px 0 rgba(255,255,255,.4) inset; transition:transform var(--dur) var(--ease);}
.sheet-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px;}
.sheet-label{font-family:var(--sans); font-size:10.5px; letter-spacing:.1em; font-weight:700; color:var(--ember-dim); text-transform:uppercase;}
.sheet-title{font-family:var(--sans); font-size:20px; font-weight:800; margin:5px 0 0;}
.sheet-badge{font-family:var(--sans); font-size:9.5px; background:#dfcda3; padding:3px 8px; border-radius:4px; font-weight:700; white-space:nowrap;}
.check-row{display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px dashed #d9c9a8; font-size:13px; font-family:var(--serif);}
.check-row:last-of-type{border-bottom:none;}
.checkbox{width:15px; height:15px; border:1.5px solid var(--ember-dim); border-radius:4px; flex-shrink:0; margin-top:2px;}
.sheet-cta{display:block; text-align:center; background:var(--ink); color:var(--parchment); font-weight:700; font-size:13px; padding:13px; border-radius:var(--radius-sm); margin-top:16px; text-decoration:none; transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);}
.sheet-cta:hover{background:#2a2015; transform:translateY(-1px);}
.sheet-foot{display:flex; justify-content:center; gap:14px; margin-top:14px; font-family:var(--sans); font-size:10px; color:var(--text-faint); flex-wrap:wrap;}

.cta-center{text-align:center; padding-top:38px;}
.btn-primary{background:var(--ember); color:#170f08; font-weight:700; font-size:14.5px; padding:14px 26px; border-radius:var(--radius-sm); text-decoration:none; border:1px solid var(--ember); display:inline-block; transition:background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.btn-primary:hover{background:#f3702c; transform:translateY(-1px); box-shadow:var(--shadow-sm);}
.btn-primary:active{transform:translateY(0);}
.btn-primary[aria-disabled="true"]{opacity:.4; pointer-events:none; transform:none; box-shadow:none;}
.btn-ghost{color:var(--text-dim); font-weight:600; font-size:13.5px; text-decoration:none; border-bottom:1px solid var(--line); transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease); padding-bottom:1px;}
.btn-ghost:hover{color:var(--text); border-color:var(--ember-dim);}
.honest-note{margin-top:14px; font-size:12px; color:var(--text-faint); font-family:var(--sans);}

/* ---------- learning path stepper ---------- */
.path-strip{display:flex; align-items:center; gap:6px; overflow-x:auto; padding:6px 2px;}
.path-step{display:flex; align-items:center; gap:9px; padding:10px 15px; border:1px solid var(--line); border-radius:999px; font-size:12.5px; white-space:nowrap; flex-shrink:0; text-decoration:none; color:var(--text-dim); transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); font-family:var(--sans);}
.path-step:not(.disabled):hover{border-color:var(--ember-dim); color:var(--text);}
.path-step .num{width:19px; height:19px; border-radius:50%; background:var(--surface-2); color:var(--text-dim); font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.path-step.active{border-color:var(--ember); background:rgba(226,97,28,.08); color:var(--text);}
.path-step.active .num{background:var(--ember); color:#170f08;}
.path-step.disabled{opacity:.4; pointer-events:none;}
.path-arrow{color:var(--line); flex-shrink:0;}

/* ---------- what you'll learn ---------- */
.learn-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px;}
.learn-item{border:1px solid var(--line); border-radius:var(--radius-sm); padding:15px; font-size:13px; text-decoration:none; color:var(--text-dim); display:flex; gap:10px; align-items:flex-start; transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); font-family:var(--serif);}
.learn-item:hover{border-color:var(--ember-dim); color:var(--text); transform:translateY(-1px);}
.learn-item .idx{color:var(--ember); font-size:11.5px; flex-shrink:0;}

/* ---------- diagrams ---------- */
.diag-tabs{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;}
.diag-tab{font-family:var(--sans); font-size:11.5px; padding:9px 15px; border-radius:var(--radius-sm); border:1px solid var(--line); color:var(--text-dim); cursor:pointer; background:transparent; transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); font-weight:600;}
.diag-tab:hover{border-color:var(--ember-dim); color:var(--text);}
.diag-tab.active{border-color:var(--ember); color:var(--ember); background:rgba(226,97,28,.08);}
.diag-panel{display:none; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px;}
.diag-panel.active{display:block;}
.diagram-caption{font-size:12.5px; color:var(--text-faint); margin-top:12px; text-align:center; font-family:var(--sans);}
.diagram-goal{margin-bottom:14px; padding-bottom:14px; border-bottom:1px dashed var(--line); font-size:13px; color:var(--text-dim); font-family:var(--serif);}
.diagram-goal .k{font-size:10px; letter-spacing:.08em; color:var(--text-faint); margin-bottom:6px; display:block; font-family:var(--sans);}

/* ---------- lessons ---------- */
article .a-section{border-top:1px solid var(--line-soft);}
article .a-section:first-of-type{border-top:none;}
.lesson-head{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:26px 0; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.lesson-head .section-num{font-size:11px; color:var(--ember); margin-bottom:8px; display:block; font-family:var(--sans); font-weight:700; letter-spacing:.06em;}
.lesson-head h2{font-size:25px; margin:0;}
.lesson-toggle{font-family:var(--sans); font-size:12px; color:var(--text-faint); border:1px solid var(--line); border-radius:var(--radius-sm); width:28px; height:28px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease); background:none;}
.lesson-head:hover .lesson-toggle{border-color:var(--ember-dim); color:var(--text);}
.lesson-body{padding-bottom:36px;}
.lesson-body.collapsed{display:none;}
.a-section .dek{color:var(--text-dim); font-size:15.5px; margin:0 0 26px; max-width:60ch;}

.micro-blocks{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-bottom:22px;}
.micro{border:1px solid var(--line); border-radius:var(--radius-sm); padding:15px; background:var(--surface-1); transition:border-color var(--dur) var(--ease);}
.micro:hover{border-color:var(--line-soft); border-color:#3a2f28;}
.micro .k{font-family:var(--sans); font-size:10px; letter-spacing:.08em; color:var(--text-faint); margin-bottom:7px; display:block; font-weight:700; text-transform:uppercase;}
.micro p{margin:0; font-size:13.5px; line-height:1.55; color:var(--text-dim);}

.decision-card{background:linear-gradient(160deg,#1c2b26,#141d1a); border:1px solid var(--decision-border); border-radius:var(--radius-md); padding:20px 22px; margin:22px 0;}
.decision-card .k{font-family:var(--sans); font-size:10.5px; letter-spacing:.1em; color:var(--decision-accent); margin-bottom:8px; display:block; font-weight:700; text-transform:uppercase;}
.decision-card p{margin:0; font-size:14.5px; font-weight:600; color:#eaf5ef; font-family:var(--serif);}

.mistake-card{background:linear-gradient(160deg,#2a1a14,#1c110c); border:1px solid var(--mistake-border); border-radius:var(--radius-md); padding:20px 22px; margin:18px 0;}
.mistake-card .k{font-family:var(--sans); font-size:10.5px; letter-spacing:.1em; color:var(--mistake-accent); margin-bottom:8px; display:block; font-weight:700; text-transform:uppercase;}
.mistake-card p{margin:0; font-size:13.5px; color:#e9d9cc; font-family:var(--serif);}

.rule-box{background:var(--surface-2); border:1px solid var(--ember-dim); border-radius:var(--radius-sm); padding:16px 20px; margin:30px 0;}
.rule-box .k{font-family:var(--sans); font-size:10.5px; letter-spacing:.1em; color:var(--ember); margin-bottom:6px; display:block; font-weight:700; text-transform:uppercase;}
.rule-box p{margin:0; font-size:15px; font-weight:600; font-family:var(--serif);}

/* ---------- field rules (numbered callout list, used on article hero) ---------- */
.field-rules{border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-1); padding:24px 26px; margin:28px 0;}
.field-rules-title{font-size:12px; font-weight:700; color:var(--ember); letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; font-family:var(--sans);}
.field-rules ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.field-rules li{display:flex; gap:14px; align-items:baseline; font-size:14px; color:var(--text-dim); font-family:var(--serif);}
.field-rules li .n{font-family:var(--sans); font-weight:800; color:var(--ember); font-size:12px; flex-shrink:0; width:18px;}
.field-rules li b{color:var(--text); font-weight:700; font-family:var(--sans); font-size:13.5px;}

/* ---------- stat strip (article facts row) ---------- */
.stat-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; margin:26px 0;}
.stat-cell{padding:16px 18px; text-align:center; border-left:1px solid var(--line);}
.stat-cell:first-child{border-left:none;}
.stat-num{display:block; font-size:16px; font-weight:800; color:var(--text); margin-bottom:4px;}
.stat-label{display:block; font-size:9.5px; letter-spacing:.08em; color:var(--text-faint); text-transform:uppercase;}

.limits-box{border:1px dashed var(--line); border-radius:var(--radius-sm); padding:14px 18px; margin:18px 0; font-size:12.5px; color:var(--text-faint); line-height:1.55; font-family:var(--serif);}
.limits-box .k{font-family:var(--sans); font-size:10px; letter-spacing:.08em; color:var(--text-dim); margin-bottom:6px; display:block; font-weight:700; text-transform:uppercase;}

/* ---------- related / next ---------- */
.related-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px;}
.related-card{border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); display:block; text-decoration:none; color:var(--text); background:var(--surface-1);}
.related-card:hover{border-color:var(--ember-dim); transform:translateY(-2px); box-shadow:var(--shadow-sm);}
.related-card .card-body{padding:18px 20px;}
.related-card .k{font-size:10.5px; color:var(--text-faint); letter-spacing:.08em; margin-bottom:10px; display:block; font-family:var(--sans); font-weight:700; text-transform:uppercase;}
.related-card h3{margin:0 0 8px; font-size:16px;}
.related-card p{color:var(--text-faint); font-size:13px; margin:0 0 12px;}
.related-card a{font-size:13px; color:var(--ember); text-decoration:none; font-weight:600; font-family:var(--sans);}

.next-step{display:flex; align-items:center; justify-content:space-between; gap:18px; background:linear-gradient(135deg,#241812,#171009); border:1px solid var(--ember-dim); border-radius:var(--radius-lg); padding:26px 30px; flex-wrap:wrap;}
.next-step .k{font-size:11px; color:var(--ember); letter-spacing:.08em; margin-bottom:8px; display:block; font-family:var(--sans); font-weight:700; text-transform:uppercase;}
.next-step h3{font-size:21px; margin:0 0 6px;}
.next-step p{margin:0; color:var(--text-dim); font-size:13.5px;}
.next-btn{background:var(--ember); color:#170f08; font-weight:700; font-size:13.5px; padding:12px 20px; border-radius:var(--radius-sm); text-decoration:none; white-space:nowrap; transition:background var(--dur) var(--ease), transform var(--dur) var(--ease); font-family:var(--sans);}
.next-btn:hover{background:#f3702c; transform:translateY(-1px);}
.next-step.disabled{opacity:.55;}

/* ---------- category → placeholder thumbnail gradients ----------
   No real hero photography exists yet for cards; rather than ship a broken <img> or an empty
   gray box, every card gets an honest solid-color gradient swatch keyed to its category. This
   is intentionally simple (no imagery, no icons baked into the gradient) so it's trivial to
   replace with a real photograph later — see BRAND_GUIDE.md when hero photography is ready. */
.thumb{aspect-ratio:16/10; border-radius:var(--radius-md) var(--radius-md) 0 0; position:relative; overflow:hidden;}
.thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.35) 100%);}
.thumb-water{background:linear-gradient(150deg,#2c4a42,#0f1c18);}
.thumb-shelter{background:linear-gradient(150deg,#3a3324,#171309);}
.thumb-fire{background:linear-gradient(150deg,#5a2c14,#20100a);}
.thumb-tracking{background:linear-gradient(150deg,#3f3a24,#181509);}
.thumb-navigation{background:linear-gradient(150deg,#2a3a44,#10171c);}
.thumb-weather{background:linear-gradient(150deg,#443528,#181209);}
.thumb-ember{background:linear-gradient(150deg,#5c2c14,#22120a);}

/* ---------- generic content cards (library/category/home) ---------- */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px;}
.topic-card{border:1px solid var(--line); border-radius:var(--radius-md); text-decoration:none; color:var(--text); display:block; background:var(--surface-1); transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); overflow:hidden;}
.topic-card:hover{border-color:var(--ember-dim); transform:translateY(-2px); box-shadow:var(--shadow-sm);}
.topic-card .card-body{padding:20px 22px;}
.topic-card .cat{font-size:10.5px; color:var(--ember); letter-spacing:.08em; margin-bottom:10px; font-family:var(--sans); font-weight:700; text-transform:uppercase;}
.topic-card h3{font-size:18px; margin:0 0 8px; line-height:1.25;}
.topic-card p{font-size:13px; color:var(--text-faint); margin:0 0 12px;}
.topic-card .foot{font-size:10.5px; color:var(--text-faint); display:flex; justify-content:space-between; font-family:var(--sans);}

.path-card{border:1px solid var(--line); border-radius:var(--radius-md); text-decoration:none; color:var(--text); display:flex; flex-direction:column; transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); overflow:hidden;}
.path-card:hover{border-color:var(--ember-dim); transform:translateY(-2px); box-shadow:var(--shadow-sm);}
.path-card .card-body{padding:20px 22px; display:flex; flex-direction:column; flex:1;}
.path-card .plate-icon{width:32px; height:32px; margin-bottom:14px; color:var(--ember); flex-shrink:0;}
.path-card h3{font-size:16px; margin:0 0 8px; text-transform:uppercase; letter-spacing:.01em;}
.path-card p{font-size:13px; color:var(--text-faint); margin:0 0 16px; flex:1;}
.path-card .plate-foot{font-size:10.5px; color:var(--text-faint); display:flex; justify-content:space-between; margin-top:auto; font-family:var(--sans); text-transform:uppercase; letter-spacing:.04em;}
.path-progress{height:5px; border-radius:99px; background:var(--line); overflow:hidden; margin-bottom:10px;}
.path-progress > div{height:100%; background:var(--ember); transition:width 400ms var(--ease);}

/* All-paths / archive CTA tile — reuses .path-card structure, just recolored solid ember. */
.path-card.cta-tile{background:var(--ember); border-color:var(--ember); color:#170f08;}
.path-card.cta-tile:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.path-card.cta-tile h3, .path-card.cta-tile p{color:#170f08;}
.path-card.cta-tile p{opacity:.82;}
.path-card.cta-tile .plate-icon{color:#170f08;}
.path-card.cta-tile .section-link{color:#170f08; border-color:rgba(23,15,8,.4);}

.disabled-block{border:1px dashed var(--line); border-radius:var(--radius-md); padding:24px; text-align:center; color:var(--text-faint); font-size:13px; font-family:var(--sans);}

/* ---------- homepage: plate grid ---------- */
.plate-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.plate-grid .path-card{min-height:200px;}

/* ---------- homepage: hero plate visual (SVG line-art placeholder, no photography yet) ---------- */
.hero-plate{position:relative; margin-top:44px; border:1px solid var(--line); border-radius:var(--radius-lg); background:radial-gradient(ellipse at 50% 30%, rgba(226,97,28,.10), transparent 65%), var(--surface-1); overflow:hidden;}
.hero-plate svg{width:100%; height:auto; display:block;}
.hero-plate-cap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 22px; border-top:1px solid var(--line-soft); font-size:11px; color:var(--text-faint); flex-wrap:wrap; font-family:var(--sans); letter-spacing:.02em;}
.hero-plate-cap b{color:var(--text-dim); font-weight:700;}
.hero-plate-cap .tag-ember{color:var(--ember); letter-spacing:.08em; text-transform:uppercase; font-weight:700;}

/* ---------- feature / editor's collection band ---------- */
.feature-band{border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface-1); overflow:hidden; display:grid; grid-template-columns:1fr 1fr;}
.feature-visual{position:relative; background:radial-gradient(ellipse at 50% 55%, rgba(226,97,28,.16), transparent 68%), var(--surface-2); min-height:280px; display:flex; align-items:center; justify-content:center;}
.feature-visual svg{width:60%; max-width:220px;}
.feature-copy{padding:40px 42px;}
.feature-stats{display:flex; gap:28px; margin:22px 0 24px;}
.feature-stat b{display:block; font-size:22px; font-weight:800; color:var(--text); font-family:var(--sans);}
.feature-stat span{display:block; font-size:10.5px; color:var(--text-faint); letter-spacing:.06em; text-transform:uppercase; margin-top:4px; font-family:var(--sans);}

/* ---------- newsletter / journal band ---------- */
.journal-band{background:var(--surface-1); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:64px 0; text-align:center;}
.journal-band .wrap{max-width:600px;}
.subscribe-row{display:flex; gap:10px; margin-top:26px; justify-content:center; flex-wrap:wrap;}
.subscribe-row input{flex:1; min-width:220px; max-width:320px; padding:13px 16px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:14px; font-family:var(--sans);}
.subscribe-row input::placeholder{color:var(--text-faint);}
.subscribe-row .btn-primary{border:1px solid var(--ember); cursor:pointer;}

/* ---------- generic search bar ---------- */
.search-bar{width:100%; max-width:480px; margin-top:16px; padding:13px 14px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface-1); color:var(--text); font-size:14px; font-family:var(--sans);}
.search-bar::placeholder{color:var(--text-faint);}

/* ---------- closing CTA band (archive / offline) ---------- */
.cta-band{display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 34px; flex-wrap:wrap; background:var(--surface-1);}
.cta-band h3{font-size:18px; margin:0 0 6px; text-transform:none;}
.cta-band p{margin:0; color:var(--text-dim); font-size:13.5px; max-width:56ch;}

/* ---------- editorial page ---------- */
.editorial-list{display:flex; flex-direction:column; gap:22px;}
.editorial-item h3{font-size:18px; margin:0 0 8px; text-transform:none;}
.editorial-item p{color:var(--text-dim); font-size:14.5px; margin:0;}

footer{border-top:1px solid var(--line-soft); padding:48px 0 28px; margin-top:20px;}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:32px; margin-bottom:32px;}
.foot-grid h4{font-family:var(--sans); font-size:11px; letter-spacing:.08em; color:var(--text-faint); margin:0 0 14px; text-transform:uppercase;}
.foot-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px;}
.foot-grid a{font-size:13.5px; color:var(--text-dim); text-decoration:none; transition:color var(--dur) var(--ease); font-family:var(--sans);}
.foot-grid a:hover{color:var(--text);}
.foot-grid p{font-family:var(--sans);}
.foot-note{font-size:12px; color:var(--text-faint); border-top:1px solid var(--line-soft); padding-top:20px; text-align:center; font-family:var(--sans);}
.foot-note a{transition:color var(--dur) var(--ease);}
.foot-note a:hover{color:var(--text-dim);}

/* ---------- generic page header (non-article pages) ---------- */
.page-hero{padding:56px 0 20px;}
.page-hero h1{color:var(--text); font-size:40px; max-width:none;}
.stats-row{display:flex; gap:36px; margin-top:24px; flex-wrap:wrap;}
.stats-row .stat b{display:block; font-size:28px; font-weight:800; color:var(--ember); font-family:var(--sans);}
.stats-row .stat span{display:block; font-size:11px; color:var(--text-faint); letter-spacing:.06em; text-transform:uppercase; margin-top:4px; font-family:var(--sans);}

/* ---------- 404 ---------- */
.error-page{min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 24px;}
.error-page .code{font-family:var(--sans); font-size:13px; color:var(--ember); margin-bottom:16px; font-weight:700; letter-spacing:.06em;}
.error-page h1{color:var(--text); font-size:34px; max-width:none;}
.error-page p{color:var(--text-dim); max-width:44ch;}

/* ---------- mobile ---------- */
@media (max-width:860px){
  .wrap{padding:0 18px;}
  h1{font-size:32px;}
  .page-hero h1{font-size:30px;}
  .hero-photo{margin:12px 16px 0; height:48vh; min-height:320px;}
  .hero-content{padding:22px;}
  .hero-noimage{padding:32px 18px 4px;}
  nav.main{
    display:none; position:absolute; top:calc(100% + 1px); left:0; right:0; z-index:60;
    background:var(--surface-1); border:1px solid var(--line-soft); border-top:none;
    flex-direction:column; align-items:stretch; gap:0; padding:6px 0; box-shadow:var(--shadow-md);
    border-radius:0 0 var(--radius-md) var(--radius-md);
  }
  nav.main.open{display:flex;}
  nav.main a, nav.main .search-chip{padding:14px 24px; border:none; border-radius:0; border-bottom:1px solid var(--line-soft);}
  nav.main a[aria-current="page"]{color:var(--ember);}
  .nav-toggle{display:flex;}
  .header-actions .btn-begin{display:none;}
  .foot-grid{grid-template-columns:1fr; gap:28px;}
  .lesson-head h2{font-size:20px;}
  .card-grid, .related-grid{gap:14px;}
  section.block{padding:48px 0;}
  section.block.tight{padding:32px 0;}
  .plate-grid{grid-template-columns:repeat(2,1fr);}
  .feature-band{grid-template-columns:1fr;}
  .feature-visual{min-height:180px;}
  .feature-copy{padding:28px 24px;}
  .cta-band{flex-direction:column; align-items:flex-start;}
  .fs-hero-grid{grid-template-columns:1fr !important; gap:32px !important;}
  .editor-picks-grid{grid-template-columns:1fr !important;}
}

@media (max-width:420px){
  h1{font-size:27px;}
  .sheet-card{padding:20px;}
  .hero-ctas{flex-direction:column; align-items:stretch;}
  .hero-ctas .btn-primary{text-align:center;}
  .plate-grid{grid-template-columns:1fr;}
  .stat-strip{grid-template-columns:repeat(2,1fr);}
  .stat-cell:nth-child(2n+1){border-left:none;}
}

/* Respect reduced-motion preferences — premium should never mean motion-sick. */
@media (prefers-reduced-motion: reduce){
  *{transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}