/* ============================================================
   RecoveryStack — Premium Field Journal (DARK)
   The committed direction, dark-mode version.
   Documentary photo essay × Outside × premium docuseries.
   Near-black ground · warm parchment text · burnt-amber accent.
   Tokens are intentionally aliased so the cream → dark swap is
   surgical (every existing class still resolves). Inter Tight
   display, Spectral body, JetBrains Mono details.
   ============================================================ */

:root {
  /* Backgrounds (new, used for "page surface") */
  --bg:       #0d0a08;
  --bg-2:     #15110d;
  --bg-3:     #1d1812;

  /* "Paper" semantics: in dark mode, --paper means "the warm light
     color used for text on dark grounds." Existing `color: var(--paper)`
     usages remain correct under this binding. */
  --paper:    #f4ece0;
  --paper-2:  #e8dfd0;
  --paper-3:  #d8cdb7;
  --rule:     #2a2017;
  --rule-2:   #3a2d20;

  /* "Ink" semantics: in dark mode, --ink means "primary text"
     (i.e. it is now the LIGHT color). This inverts the cream version's
     ink → near-black mapping, but keeps every `color: var(--ink)`
     usage producing the intended high-contrast text. */
  --ink:      #f6efe1;
  --ink-2:    #d8cdb7;
  --stone:    #998873;
  --stone-2:  #7c6e5b;
  --stone-3:  #5c5040;

  /* Accents — amber/burnt orange family, aliased on the cream
     "oxblood" / "brass" tokens so existing references continue
     to resolve correctly. */
  --amber:          #d97732;
  --amber-hi:       #eb8a44;
  --amber-deep:     #a85a25;
  --oxblood:        #d97732;
  --oxblood-hi:     #eb8a44;
  --oxblood-deep:   #a85a25;
  --brass:          #c98549;
  --brass-hi:       #d97732;
  --brass-deep:     #8a5320;
  --gold:           #d9a13a;
  --moss:           #6b7a4a;

  /* Type — Inter Tight display, Spectral serif body, JetBrains Mono.
     Spectral is the warmer-feeling Tiempos analogue Trevor specified. */
  --display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif:   "Spectral", "Iowan Old Style", "Source Serif Pro", Charter, Georgia, "Times New Roman", serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:    "JetBrains Mono", "IBM Plex Mono", "SF Mono", Menlo, monospace;

  /* Geometry — unchanged */
  --container-wide: 1240px;
  --container:      1080px;
  --prose:          680px;
  --prose-rail:     1080px;
  --sidenote-w:     280px;

  /* Shadow — softer, larger on dark, no warm tint */
  --shadow-paper: 0 1px 2px rgba(0,0,0,0.5), 0 14px 36px -12px rgba(0,0,0,0.55);
  --shadow-hi:    0 1px 2px rgba(0,0,0,0.65), 0 30px 70px -20px rgba(0,0,0,0.75), 0 0 0 1px rgba(217,119,50,0.18);

  /* Film-grain texture — applied selectively */
  --paper-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.78  0 0 0 0 0.68  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
}

/* ============================================================
   Responsive theme swap — DARK for mobile (≤767px), LIGHT for ≥768px.
   Mobile keeps the premium "app-like" night-reading vibe; desktop and
   tablet get the editorial cream / NYT Magazine / Wirecutter reading
   experience.

   Strategy: keep every CSS variable NAME the same; flip the VALUES
   inside the breakpoint. Every `var(--bg)` still means "page surface",
   `var(--ink)` still means "primary text" — they just resolve to
   different colors depending on viewport.
   ============================================================ */
@media (min-width: 768px) {
  :root {
    /* Page surfaces — warm cream, getting slightly deeper for inset cards */
    --bg:       #f7f1e4;  /* cream paper, slightly desaturated */
    --bg-2:     #ede4d0;  /* card / inset ground */
    --bg-3:     #e2d6bb;  /* deepest inset */

    /* Type colors flip — what was "warm light text on dark" is now
       "dark brown text on cream". Names stay the same so existing
       `color: var(--ink)` / `color: var(--paper)` calls keep working. */
    --paper:    #2a1f15;  /* primary text on cream (was warm light) */
    --paper-2:  #3b2c20;  /* secondary text */
    --paper-3:  #5c4633;  /* muted text */
    --rule:     #d9c9ad;  /* hairline divider on cream */
    --rule-2:   #c4b290;  /* slightly more visible divider */

    --ink:      #1a120a;  /* highest-contrast text — near-black coffee */
    --ink-2:    #2a1f15;
    --stone:    #8a7558;  /* muted brown, lower contrast */
    --stone-2:  #7c6845;
    --stone-3:  #5c4a33;

    /* Accents — slightly deeper saturation for legibility on cream */
    --amber:        #c9621d;
    --amber-hi:     #d97732;
    --amber-deep:   #8a4218;
    --oxblood:      #9a3a17;  /* deeper true oxblood for cream ground */
    --oxblood-hi:   #b8472a;
    --oxblood-deep: #6a2710;
    --brass:        #a06430;
    --brass-hi:     #b8743c;
    --brass-deep:   #6a4120;

    /* Shadows — lighter for cream, less drop, more lift */
    --shadow-paper: 0 1px 2px rgba(58,42,28,0.08), 0 14px 36px -16px rgba(58,42,28,0.22);
    --shadow-hi:    0 1px 2px rgba(58,42,28,0.10), 0 24px 56px -24px rgba(58,42,28,0.30), 0 0 0 1px rgba(154,58,23,0.12);
  }

  /* Kill the warm radial + grain that paints the dark theme; on cream
     it reads as a muddy overlay. */
  body::after { display: none; }

  /* Page chrome lives on cream now */
  html, body {
    background: var(--bg);
    color: var(--ink-2);
  }

  /* Masthead flips too — cream ground, brass + oxblood accents, dark text */
  .masthead {
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
  }
  .masthead .brand { color: var(--ink); }
  .masthead .brand .slash { color: var(--oxblood); }
  .masthead .nav a { color: var(--paper-2); }
  .masthead .nav a:hover,
  .masthead .nav a.is-on { color: var(--oxblood); }
  .masthead .nav a.is-on { border-bottom-color: var(--oxblood); }
  .masthead .btn-mono { color: var(--paper-3); }
  .masthead .btn-mono:hover { color: var(--oxblood); }
  /* Subscribe button keeps oxblood ground with light text in both themes
     — it's the call-to-action, identity stays constant. */
  .masthead .btn {
    background: var(--oxblood);
    color: #fff7e8;
    border-color: var(--oxblood-deep);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 10px 24px -14px rgba(154,58,23,0.45);
  }
  .masthead .btn:hover { background: var(--oxblood-hi); }
  .masthead .vol {
    color: var(--brass);
    border-left-color: rgba(160,100,48,0.35);
  }

  /* Article hero overlay — darken the photo so the LIGHT title text stays
     readable on top, then lift at the very bottom toward cream so the hero
     ties into the cream body that follows. */
  .art-hero::after {
    background:
      linear-gradient(180deg,
        rgba(13,10,8,0.55) 0%,
        rgba(13,10,8,0.45) 35%,
        rgba(13,10,8,0.70) 75%,
        rgba(247,241,228,0.95) 100%),
      linear-gradient(95deg, rgba(13,10,8,0.55) 0%, rgba(13,10,8,0.0) 60%);
  }
  /* Hero text must stay LIGHT in both themes — the photo behind is always
     darkened by the scrim, so paper-toned text reads regardless of which
     theme the body uses. Easiest path: redefine the text tokens inside the
     hero scope to their dark-theme values so existing selectors that use
     var(--paper) / var(--ink) / var(--brass-hi) / etc. keep working. */
  .art-hero, .cat-mast, .hero {
    --bg:       #0d0a08;
    --bg-2:     #15110d;
    --paper:    #f4ece0;
    --paper-2:  #e8dfd0;
    --paper-3:  #d8cdb7;
    --ink:      #f6efe1;
    --ink-2:    #d8cdb7;
    --stone:    #998873;
    --rule:     #3a2d20;
    --rule-2:   #2a2017;
    --amber:        #d97732;
    --amber-hi:     #eb8a44;
    --amber-deep:   #a85a25;
    --oxblood:      #d97732;
    --oxblood-hi:   #eb8a44;
    --brass:        #c98549;
    --brass-hi:     #d97732;
  }

  /* At-a-Glance, Methodology, Bottom Line, Callouts — cards on cream */
  .ataglance {
    background: var(--bg-2);
    border-color: var(--rule);
  }
  .methodology, .methodology-v3 {
    background: var(--bg-2);
  }
  .prose .ed-bottomline {
    background: var(--bg-2);
    border-left-color: var(--rule);
    border-right-color: var(--rule);
    border-bottom-color: var(--rule);
  }
  .prose .ed-callout { background: rgba(60,40,20,0.04); }

  /* Sparkline gets cream tint */
  .spark { background: rgba(60,40,20,0.06); }

  /* Product cards (v3) — cream ground with brass hairlines */
  .art-body--v3 .pcard-v3 {
    border-top-color: var(--rule-2);
    border-bottom-color: var(--rule-2);
  }
  .art-body--v3 .pcard-v3__img { background: var(--bg-2); }

  /* Author signature on light ground */
  .art-sig { border-top-color: var(--rule); }

  /* End-of-article strip on light ground */
  .art-strip { border-top-color: var(--rule); }
  .feedback__btn,
  .share-row__btn {
    border-color: rgba(60,40,20,0.18);
    color: var(--paper-3);
  }
  .news-form {
    background: var(--bg-2);
    border-color: var(--rule);
  }
  .news-form input[type="email"] { color: var(--ink); }
  .news-form input::placeholder { color: rgba(60,40,20,0.4); }

  /* Footer / colophon — leave it dark for visual punctuation at the
     bottom of every page (NYT Magazine does this). */
  /* (colophon already styled with its own dark vars; no override needed) */

  /* Category masthead overlay */
  .cat-mast::after {
    background:
      linear-gradient(180deg,
        rgba(13,10,8,0.45) 0%,
        rgba(13,10,8,0.25) 50%,
        rgba(13,10,8,0.55) 80%,
        rgba(247,241,228,0.92) 100%);
  }
  /* Cat-stats on cream */
  .cat-stat { background: var(--bg-2); }

  /* Homepage hero overlay — same handling */
  .hero::after {
    background:
      linear-gradient(180deg,
        rgba(13,10,8,0.45) 0%,
        rgba(13,10,8,0.20) 40%,
        rgba(13,10,8,0.45) 70%,
        rgba(247,241,228,0.92) 100%);
  }

  /* Related-reports cards on cream */
  .related-reports .rel-card {
    background: var(--bg-2);
    border-color: var(--rule);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; min-height: 100%; }
html, body {
  margin: 0; padding: 0; min-width: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 17.5px;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body { min-height: 100dvh; position: relative; }
/* Subtle warm amber radial + film grain — gives the dark page warmth. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(800px 600px at 12% -8%, rgba(217,119,50,0.07), transparent 65%),
    radial-gradient(700px 500px at 90% 6%, rgba(217,119,50,0.05), transparent 60%),
    var(--paper-noise);
  mix-blend-mode: screen;
  opacity: 0.85;
}
img, picture, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--amber); color: var(--bg); }

/* Deep vignette to anchor the dark page */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(0,0,0,0.45) 100%);
}

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--display); margin: 0; color: var(--ink);
  letter-spacing: -0.022em; line-height: 1.06; font-weight: 600;
  overflow-wrap: break-word; hyphens: manual;
  font-feature-settings: "kern" 1, "liga" 1;
}
.hero h1, .cat-mast h1, .art-hero h1 {
  hyphens: none; -webkit-hyphens: none;
  word-break: keep-all;
}
h1 {
  font-size: clamp(40px, 8vw, 84px);
  font-weight: 500; letter-spacing: -0.032em; line-height: 1.0;
}
h2 {
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 600; letter-spacing: -0.018em; line-height: 1.1;
}
h3 {
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 600; letter-spacing: -0.012em; line-height: 1.22;
}
h4 { font-size: clamp(15px, 1.4vw, 18px); font-weight: 600; }
p { margin: 0 0 1em; }

em, i { font-style: italic; font-feature-settings: "onum" 1, "kern" 1, "liga" 1; }
strong, b { font-weight: 600; color: var(--ink); }

.eyebrow {
  font-family: var(--mono); font-weight: 500;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow .bar { width: 24px; height: 1px; background: currentColor; display: inline-block; }
.eyebrow.oxblood { color: var(--oxblood); }

.kicker {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brass); font-weight: 500;
}
.lede {
  font-family: var(--display); font-style: italic;
  font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5;
  color: var(--ink-2); font-weight: 400; letter-spacing: -0.005em;
  font-feature-settings: "onum" 1;
}

/* Layout */
.wrap       { max-width: var(--container-wide); margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); position: relative; z-index: 1; }
.wrap-mid   { max-width: var(--container); margin: 0 auto; padding-inline: clamp(18px, 4vw, 40px); position: relative; z-index: 1; }
.wrap-prose { max-width: var(--prose); margin: 0 auto; padding-inline: clamp(18px, 4vw, 32px); position: relative; z-index: 1; }

.section       { padding-block: clamp(56px, 7.5vw, 120px); position: relative; }
.section-tight { padding-block: clamp(36px, 5vw, 72px); position: relative; }

/* Amber hairline rule */
.hairline {
  border: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber) 18%, var(--amber) 82%, transparent);
  opacity: 0.55;
  margin: 0;
}
.hairline-faint {
  border: 0; height: 1px; background: var(--rule-2); margin: 0;
}

/* ============================================================
   Masthead — sticky on dark with semi-transparent backdrop
   ============================================================ */
.masthead {
  border-top: 3px solid var(--amber);
  border-bottom: 1px solid var(--rule);
  /* Use var(--bg) so the responsive theme swap (dark <768px, cream ≥768px)
     flows through automatically. Locked to a solid background so a warm
     hero photo never bleeds cream tones through the chrome. */
  background: var(--bg);
  position: sticky; top: 0; z-index: 30;
}
.masthead-row {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 20px);
  padding-block: 14px;
  font-family: var(--body);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.022em; color: var(--ink); white-space: nowrap;
  font-feature-settings: "kern" 1;
}
/* Glyph: amber rounded square with a small inset notch. Drawn via
   CSS, no asset dependency. */
.brand::before {
  content: ""; display: inline-block;
  width: 22px; height: 22px;
  background: var(--amber);
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 2px rgba(13,10,8,0.95),
    inset 7px 7px 0 -3px rgba(13,10,8,0.95);
  flex-shrink: 0;
}
/* Hide the legacy "/" separator if it's still in the markup, but
   continue to lay out the text cleanly. */
.brand .slash {
  color: var(--oxblood);
  font-weight: 400;
  margin: 0 -2px;
  font-feature-settings: "kern" 1;
}
.brand .vol {
  display: none;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--rule-2, rgba(201,133,73,0.28));
  font-family: var(--mono); font-weight: 600; font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brass);
  align-self: center;
}
@media (min-width: 760px) { .brand .vol { display: inline-block; } }

.nav {
  display: flex; gap: clamp(14px, 2vw, 22px);
  margin-left: 18px;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.015em;
  flex: 1;
}
.nav a { color: var(--ink-2); padding-block: 6px; transition: color .15s ease; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--oxblood); }
.nav a.is-on { color: var(--oxblood); border-bottom-color: var(--oxblood); }

.masthead-end { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-mono {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--stone); font-weight: 500;
}
.btn-mono:hover { color: var(--oxblood); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--amber); color: #1a0e05;
  padding: 11px 20px; border-radius: 4px;
  font-family: var(--body); font-weight: 600; font-size: 13.5px;
  letter-spacing: 0.01em;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  border: 1px solid var(--amber-deep);
  box-shadow: 0 1px 0 rgba(0,0,0,0.45), 0 10px 24px -10px rgba(217,119,50,0.55);
}
.btn:hover { background: var(--amber-hi); transform: translateY(-1px); }
.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid rgba(244,236,224,0.55);
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(244,236,224,0.08); color: var(--ink); border-color: var(--ink); transform: translateY(-1px); }
.btn--big { padding: 14px 24px; font-size: 14.5px; }

.menu-btn {
  display: none;
  background: var(--amber); border: 1px solid var(--amber-deep);
  color: #1a0e05;
  padding: 9px 14px; border-radius: 4px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600; cursor: pointer;
  margin-left: auto;
  box-shadow: 0 1px 0 rgba(0,0,0,0.45), 0 8px 20px -8px rgba(217,119,50,0.5);
}
.menu-btn:hover { background: var(--amber-hi); }
/* At 1080 the brand+nav+CTA combo gets tight; trim mono link first. */
@media (max-width: 1080px) {
  .masthead-end .btn-mono { display: none; }
}
/* At 1024 collapse the full nav into the menu button. */
@media (max-width: 1024px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 480px) {
  .masthead-end .btn { display: none; }
  .brand { font-size: 20px; }
}

/* ============================================================
   Hero — homepage
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  color: var(--paper);
  isolation: isolate;
}
.hero .bg { position: absolute; inset: 0; z-index: 0; }
.hero .bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.04) contrast(1.04) brightness(0.92);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(26,22,18,0.25) 0%, transparent 35%, rgba(26,22,18,0.55) 80%, rgba(26,22,18,0.85) 100%),
    linear-gradient(95deg, rgba(26,22,18,0.62) 0%, rgba(26,22,18,0.0) 60%);
  pointer-events: none;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: var(--paper-noise);
  opacity: 0.10; mix-blend-mode: multiply; pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 2;
  min-height: clamp(540px, 78vh, 820px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(48px, 6vw, 96px);
}
.hero-mast {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(250, 246, 239, 0.85);
  margin-bottom: 18px; flex-wrap: wrap;
}
.hero-mast .vol-no { color: var(--brass-hi); }
.hero-mast .sep { color: rgba(250,246,239,0.4); }
.hero h1 {
  color: var(--paper);
  font-size: clamp(34px, 7.2vw, 96px);
  letter-spacing: -0.028em; line-height: 0.98;
  margin-bottom: 22px; max-width: 18ch;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
  font-weight: 600;
}
.hero h1 em {
  font-style: italic; font-weight: 400; color: var(--brass-hi);
  font-feature-settings: "onum" 1;
}
.hero .dek {
  font-family: var(--display); font-style: italic;
  color: rgba(250, 246, 239, 0.94);
  max-width: 580px;
  font-size: clamp(17px, 1.7vw, 22px); line-height: 1.5;
  margin-bottom: 30px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .btn--ghost { color: var(--paper); border-color: var(--paper); }
.hero .btn--ghost:hover { background: var(--bg); color: var(--ink); }
.hero-credit {
  position: absolute; right: clamp(16px, 4vw, 40px); bottom: clamp(16px, 3vw, 24px);
  z-index: 3;
  font-family: var(--mono); font-size: 10.5px; color: rgba(250,246,239,0.65);
  letter-spacing: 0.18em; text-transform: uppercase;
}
@media (max-width: 600px) { .hero-credit { display: none; } }

/* Trust strip */
.trust {
  background: var(--bg-2);
  color: var(--paper-2);
  font-family: var(--display); font-style: italic;
  text-align: center;
  padding-block: 22px;
  border-top: 4px solid var(--brass);
}
.trust p { margin: 0; max-width: 760px; margin-inline: auto; padding-inline: 20px;
  font-size: clamp(16.5px, 1.55vw, 19px); line-height: 1.55; color: var(--paper-2); }
.trust em { color: var(--brass-hi); font-style: normal; font-weight: 600; }

/* ============================================================
   Section heading (with numbered marker)
   ============================================================ */
.sec-head {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: clamp(14px, 2.5vw, 28px);
  align-items: baseline;
  margin-bottom: clamp(28px, 4vw, 48px);
}
@media (max-width: 720px) {
  .sec-head { grid-template-columns: 56px minmax(0, 1fr); }
  .sec-head .right { display: none; }
}
.sec-head .marker {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em;
  color: var(--brass); font-weight: 500;
  border-top: 1px solid var(--brass);
  padding-top: 8px;
}
.sec-head .marker .n { color: var(--ink); font-weight: 600; display: block; font-size: 14px; letter-spacing: 0.1em; }
.sec-head h2 { margin: 0 0 10px; max-width: 18ch; }
.sec-head p { color: var(--stone); font-size: 16.5px; margin: 0; max-width: 56ch; line-height: 1.55; }
.sec-head .right {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brass);
  align-self: end;
}

/* ============================================================
   Featured Reports grid (homepage)
   ============================================================ */
.reports-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(20px, 2.4vw, 32px);
}
@media (max-width: 900px) {
  .reports-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .report--hero { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .reports-grid { grid-template-columns: 1fr; }
}

.report {
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}
.report .img {
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2);
  border: 1px solid var(--rule);
}
.report--hero .img { aspect-ratio: 16 / 10; }
.report .img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.0) contrast(1.02); transition: transform .8s ease; }
.report:hover .img img { transform: scale(1.03); }
.report .img-wrap { position: relative; }
.report .ribbon {
  position: absolute; top: 12px; left: 12px;
  background: var(--amber); color: #1a0e05;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid var(--amber-deep);
  box-shadow: 0 6px 16px -6px rgba(217,119,50,0.55);
}
.report .stamp {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brass);
}
.report .stamp .num { color: var(--ink); font-weight: 600; letter-spacing: 0.08em; }
.report h3 {
  font-size: clamp(20px, 2vw, 25px); line-height: 1.18; margin: 0;
  font-weight: 600; letter-spacing: -0.012em;
}
.report--hero h3 { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.06; max-width: 22ch; }
.report h3 a:hover { color: var(--oxblood); }
.report .dek {
  color: var(--stone); font-size: 15.5px; line-height: 1.55; margin: 0;
  max-width: 56ch;
}
.report--hero .dek { font-family: var(--display); font-style: italic; font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-2); }
.report .byline {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--stone-2); text-transform: uppercase;
}
.report .read-cta {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--oxblood); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.report .read-cta .arr { transition: transform .2s ease; }
.report:hover .read-cta .arr { transform: translateX(4px); }

/* ============================================================
   How we test card
   ============================================================ */
.htw {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--oxblood);
  padding: clamp(28px, 3vw, 44px);
  border-radius: 2px;
}
@media (max-width: 820px) { .htw { grid-template-columns: 1fr; } }
.htw .img {
  aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--bg-3);
}
.htw .img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.0) contrast(1.02); }
.htw h2 { margin-bottom: 14px; max-width: 16ch; }
.htw .principles {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.htw .principles li {
  display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: baseline;
  font-family: var(--body); font-size: 15.5px; color: var(--ink-2);
  line-height: 1.55;
}
.htw .principles .n {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  color: var(--brass); font-weight: 600; padding-top: 1px;
}
.htw .principles strong { font-weight: 600; color: var(--ink); }
.htw .read-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--oxblood); font-weight: 600;
  margin-top: 22px;
  border-bottom: 1px solid var(--oxblood);
  padding-bottom: 2px;
}

/* ============================================================
   Departments — category pillars 3-col
   ============================================================ */
.depts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 760px) { .depts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .depts { grid-template-columns: 1fr; } }
.dept {
  padding: clamp(20px, 2.4vw, 32px);
  border-right: 1px solid var(--rule);
  transition: background .2s ease;
}
.dept:nth-child(3n) { border-right: 0; }
@media (max-width: 760px) {
  .dept:nth-child(3n) { border-right: 1px solid var(--rule); }
  .dept:nth-child(2n) { border-right: 0; }
  .dept:nth-child(odd):last-child { border-right: 0; }
}
@media (max-width: 480px) {
  .dept { border-right: 0; border-bottom: 1px solid var(--rule); }
  .dept:last-child { border-bottom: 0; }
}
.dept:hover { background: var(--bg-2); }
.dept .marker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  color: var(--brass); font-weight: 500; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.dept .marker .n { color: var(--ink); font-weight: 700; }
.dept h3 { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 10px; line-height: 1.1; }
.dept p { color: var(--stone); font-size: 15px; margin: 0 0 16px; line-height: 1.55; }
.dept .arr {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--oxblood); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.dept .arr .a { transition: transform .2s ease; }
.dept:hover .arr .a { transform: translateX(4px); }

/* ============================================================
   Footer — large editorial colophon
   ============================================================ */
.foot-wide {
  position: relative; overflow: hidden;
  color: var(--paper);
  border-top: 4px solid var(--brass);
  isolation: isolate;
}
.foot-wide .bg { position: absolute; inset: 0; z-index: 0; }
.foot-wide .bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.04) contrast(1.04) brightness(0.78); }
.foot-wide::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(26,22,18,0.55) 0%, rgba(26,22,18,0.85) 100%);
}
.foot-wide::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: var(--paper-noise); opacity: 0.08; mix-blend-mode: multiply;
}
.foot-wide-inner {
  position: relative; z-index: 2;
  padding-block: clamp(80px, 10vw, 160px);
}
.foot-wide h2 {
  color: var(--paper); max-width: 24ch;
  font-size: clamp(28px, 4.4vw, 56px); margin-bottom: 16px;
  font-weight: 600;
}
.foot-wide h2 em { font-style: italic; color: var(--brass-hi); font-weight: 400; }
.foot-wide p { color: rgba(250,246,239,0.88); font-family: var(--display); font-style: italic; font-size: clamp(17px, 1.6vw, 21px); max-width: 52ch; line-height: 1.5; margin-bottom: 26px; }
.foot-wide .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.foot-wide .btn--ghost { color: var(--paper); border-color: var(--paper); }
.foot-wide .btn--ghost:hover { background: var(--bg); color: var(--ink); }

/* Colophon (small footer below big shot) */
.colophon {
  background: var(--bg-2); color: var(--paper-2);
  padding-block: clamp(40px, 5vw, 64px) 28px;
}
.colophon-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
}
@media (max-width: 800px) { .colophon-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .colophon-grid { grid-template-columns: 1fr; } }
.colophon .brand { color: var(--paper); }
.colophon .brand .slash { color: var(--brass-hi); }
.colophon-brand p { font-family: var(--display); font-style: italic; color: rgba(250,246,239,0.65); margin: 14px 0 0; max-width: 36ch; font-size: 15px; }
.colophon h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brass-hi); font-weight: 600; margin-bottom: 14px;
}
.colophon ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.colophon a { font-size: 14.5px; color: rgba(250,246,239,0.85); }
.colophon a:hover { color: var(--brass-hi); }
.colophon .legal {
  margin-top: clamp(32px, 4vw, 48px); padding-top: 24px;
  border-top: 1px solid rgba(250,246,239,0.18);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: rgba(250,246,239,0.55);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}

/* ============================================================
   ARTICLE PAGE — Tufte-style sidenotes
   ============================================================ */
.art-hero {
  position: relative; overflow: hidden;
  color: var(--paper);
  isolation: isolate;
}
.art-hero .bg { position: absolute; inset: 0; z-index: 0; }
.art-hero .bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.04) contrast(1.04) brightness(0.86); }
.art-hero::after {
  /* Strong bottom-anchored scrim guarantees byline legibility regardless of
     the hero photo's tonal balance — last band hits 0.85 alpha by 65% height,
     so the lower 35% sits on near-solid ground. */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(13,10,8,0.45) 0%,
      rgba(13,10,8,0.20) 25%,
      rgba(13,10,8,0.35) 50%,
      rgba(13,10,8,0.85) 70%,
      rgba(13,10,8,0.94) 100%),
    linear-gradient(95deg, rgba(13,10,8,0.55) 0%, rgba(13,10,8,0.0) 60%);
}
.art-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: var(--paper-noise); opacity: 0.08; mix-blend-mode: multiply;
}
.art-hero-inner {
  position: relative; z-index: 2;
  min-height: clamp(520px, 76vh, 760px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(44px, 6vw, 88px);
}
.art-hero .crumbs {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(250,246,239,0.75);
  margin-bottom: 18px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.art-hero .crumbs a { color: var(--brass-hi); }
.art-hero .crumbs .sep { color: rgba(250,246,239,0.35); }
.art-hero .tag {
  display: inline-block;
  border: 1px solid var(--amber-deep); color: #1a0e05;
  background: var(--amber);
  font-family: var(--mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 5px 12px; margin-bottom: 18px;
  border-radius: 3px;
  box-shadow: 0 6px 16px -8px rgba(217,119,50,0.55);
}
.art-hero h1 {
  color: var(--paper);
  font-size: clamp(34px, 6.6vw, 84px);
  letter-spacing: -0.026em; line-height: 1.0;
  margin-bottom: 22px; max-width: 22ch;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.art-hero h1 em { font-style: italic; color: var(--brass-hi); font-weight: 400; }
.art-hero .dek {
  font-family: var(--display); font-style: italic;
  font-size: clamp(18px, 1.7vw, 23px); max-width: 58ch; line-height: 1.48;
  color: rgba(250,246,239,0.94);
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.art-hero-byline {
  margin-top: 28px;
  display: flex; align-items: center; gap: 16px;
  padding-top: 22px;
  border-top: 1px solid rgba(250,246,239,0.22);
  flex-wrap: wrap;
}
.art-hero-byline .photo {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  background: var(--bg-2); flex-shrink: 0;
  border: 1px solid rgba(250,246,239,0.2);
}
.art-hero-byline .photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95) contrast(1.04); }
.art-hero-byline .by { display: flex; flex-direction: column; color: var(--paper); }
.art-hero-byline .by strong { font-family: var(--body); font-weight: 600; font-size: 14.5px; }
.art-hero-byline .by .r { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250,246,239,0.65); }
.art-hero-byline .stamps {
  margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(250,246,239,0.65);
}
.art-hero-byline .stamps strong { display: block; color: var(--paper); font-size: 10.5px; font-weight: 600; }
.art-hero-byline .stamps .verif { color: #c8d77a; }

/* Article body with sidenote rail */
.art-body { padding-block: clamp(48px, 5vw, 80px); }
.art-grid {
  max-width: var(--prose-rail);
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, var(--prose)) var(--sidenote-w);
  gap: clamp(28px, 4vw, 56px);
  position: relative;
}
@media (max-width: 900px) {
  .art-grid { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 720px; }
}
.art-col { min-width: 0; }
.art-side {
  position: relative;
  display: flex; flex-direction: column; gap: 24px;
  align-self: start;
}
@media (min-width: 901px) {
  .art-side { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; padding-right: 4px; }
  .art-side::-webkit-scrollbar { width: 4px; }
  .art-side::-webkit-scrollbar-thumb { background: var(--rule-2, rgba(255,255,255,0.08)); border-radius: 2px; }
}
@media (max-width: 900px) {
  .art-side { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--rule-2, rgba(255,255,255,0.08)); }
}

/* Sidebar cards */
.side-card {
  background: var(--bg-2, #1c1814);
  border: 1px solid var(--rule-2, rgba(255,255,255,0.06));
  border-top: 2px solid var(--brass);
  padding: 18px 18px 16px;
  border-radius: 0 0 2px 2px;
}
.side-card__h {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--brass); font-weight: 700;
  margin: 0 0 14px 0;
}
.side-card__eyebrow {
  display: block;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--amber); font-weight: 700;
  margin-bottom: 10px;
}

/* Products in this report — vertical mini stack */
.side-product {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--rule-2, rgba(255,255,255,0.06));
  text-decoration: none;
  color: inherit;
  transition: opacity 160ms ease;
}
.side-product:first-of-type { border-top: none; padding-top: 4px; }
.side-product:hover { opacity: 0.85; }
.side-product__img {
  width: 60px; height: 60px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg, #100c08);
  display: block;
}
.side-product__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-product__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.side-product__brand {
  display: block;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--stone); font-weight: 600;
}
.side-product__name {
  display: block;
  font-family: var(--display); font-size: 14.5px; line-height: 1.25;
  color: var(--ink); font-weight: 600;
}
.side-product__price {
  display: block;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--amber); font-weight: 700; margin-top: 4px;
}
.side-product__price .arr { margin-left: 4px; }

/* Related from the Field Journal — compact horizontal */
.side-related {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--rule-2, rgba(255,255,255,0.06));
  text-decoration: none;
  color: inherit;
  transition: opacity 160ms ease;
}
.side-related:first-of-type { border-top: none; padding-top: 4px; }
.side-related:hover { opacity: 0.85; }
.side-related__thumb {
  width: 80px; height: 45px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg);
  display: block;
}
.side-related__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-related__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.side-related__kicker {
  display: block;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brass); font-weight: 600;
}
.side-related__title {
  display: block;
  font-family: var(--display); font-size: 14px; line-height: 1.3;
  color: var(--ink); font-weight: 600;
  margin-top: 2px;
}
.side-related__meta {
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--stone); margin-top: 4px;
}

/* Subscribe nudge */
.side-card--subscribe { border-top-color: var(--amber); }
.side-card--subscribe p {
  font-family: var(--serif); font-size: 14.5px; line-height: 1.5;
  color: var(--ink-2); margin: 0 0 14px 0;
}
.btn--side {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--amber); color: var(--bg); text-decoration: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 700;
  border-radius: 2px;
  transition: background 160ms ease;
}
.btn--side:hover { background: var(--amber-hi); }

.prose {
  /* (Batch 7) Vertical rhythm tuned to an 8px baseline. Body is 18px/30 (1.667)
     so 1 line = 30px; section margins step in 8px units. Heading line-heights
     drop progressively from 1.4 down to 1.1. */
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.667; /* 30px */
  color: var(--ink-2);
  letter-spacing: 0.002em;
}
.prose h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.2;
  margin-block: 56px 16px;  /* 7×8 above, 2×8 below */
  letter-spacing: -0.02em;
  scroll-margin-top: 96px;
  color: var(--ink);
  display: flex; align-items: baseline; gap: 14px;
}
.prose h2:first-child { margin-top: 0; }
.prose h2 .n {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
  padding-top: 6px;
}
.prose h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.3;
  margin-block: 32px 8px;  /* 4×8 above, 1×8 below */
  color: var(--ink);
}
.prose h4 {
  font-family: var(--display); font-weight: 600;
  font-size: 18px; line-height: 1.4;
  margin-block: 24px 8px;
  color: var(--ink);
}
.prose p { margin-bottom: 24px; }  /* 3×8 */
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; }
.prose a {
  color: var(--amber); text-decoration: underline;
  text-decoration-color: rgba(217,119,50,0.45);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.prose a:hover { color: var(--amber-hi); text-decoration-color: var(--amber); }
.prose ul, .prose ol { padding-inline-start: 22px; margin-bottom: 24px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--brass); }

/* Drop cap on first paragraph of pillar article */
.prose .lede-graf { margin-bottom: 1.4em; }
.prose .lede-graf::first-letter {
  font-family: var(--display); font-weight: 600;
  font-size: 5em; line-height: 0.86;
  float: left; padding: 0.04em 0.16em 0 0;
  color: var(--oxblood);
  font-feature-settings: "onum" 1;
}

/* Pull quote in the margin (desktop) — falls back to inline on mobile */
.prose .pull {
  margin: 2em 0;
  font-family: var(--display); font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.22;
  color: var(--ink); letter-spacing: -0.012em;
  border-top: 1px solid var(--brass);
  padding-top: 18px;
}
.prose .pull cite {
  display: block; margin-top: 16px;
  font-family: var(--mono); font-style: normal; font-size: 10.5px;
  letter-spacing: 0.2em; color: var(--brass); text-transform: uppercase; font-weight: 600;
}

/* Sidenote: shows in the right rail on desktop, becomes parenthetical on mobile */
.sn {
  display: inline; cursor: help;
}
.sn-mark {
  font-family: var(--mono); font-size: 0.62em; line-height: 0;
  color: var(--oxblood); font-weight: 700;
  vertical-align: super; padding: 0 2px;
  letter-spacing: 0.04em;
}
.sn-content {
  display: none;
}
@media (min-width: 901px) {
  /* Desktop: render sidenotes in the right rail */
  .prose .sn-block {
    display: block; clear: right;
    float: right;
    width: var(--sidenote-w);
    margin-right: calc(-1 * var(--sidenote-w) - clamp(28px, 4vw, 56px));
    margin-top: 0.3em;
    margin-bottom: 0.6em;
    margin-left: 0;
    padding-left: 14px;
    border-left: 2px solid var(--brass);
    font-family: var(--body); font-size: 12.5px;
    line-height: 1.5; letter-spacing: 0.005em;
    color: var(--stone);
  }
  .prose .sn-block strong { color: var(--ink); font-weight: 600; }
  .prose .sn-block .sn-n {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
    color: var(--oxblood); font-weight: 700; text-transform: uppercase;
    display: block; margin-bottom: 4px;
  }
}
@media (max-width: 900px) {
  /* Mobile: sidenotes collapse to inline italic parentheticals */
  .prose .sn-block {
    display: inline;
    font-family: var(--display); font-style: italic;
    color: var(--stone); font-size: 0.94em;
  }
  .prose .sn-block::before { content: " ("; color: var(--brass); font-weight: 600; }
  .prose .sn-block::after { content: ")"; color: var(--brass); font-weight: 600; }
  .prose .sn-block .sn-n { display: none; }
  .prose .sn-block strong { color: var(--ink); font-weight: 600; }
}

/* Inline figure */
.prose .fig {
  margin: 2.4em -8px;
}
.prose .fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--rule); }
.prose .fig figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--stone); margin-top: 8px; padding-inline: 6px;
}

/* Takeaways callout */
.prose .takeaways {
  background: var(--bg-2);
  border-top: 3px solid var(--amber);
  border-left: 1px solid var(--rule-2);
  border-right: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  padding: 22px 26px; margin: 2.4em 0; border-radius: 0 0 2px 2px;
  box-shadow: var(--shadow-paper);
}
.prose .takeaways h4,
.prose .takeaways .takeaways-h {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--amber); font-weight: 700;
  margin-bottom: 14px;
}
.prose .takeaways .takeaways-h::before { display: none; }
.prose .takeaways .takeaways-h { margin-top: 0; }
.prose .takeaways ul { padding-inline-start: 20px; margin: 0; }
.prose .takeaways li { margin-bottom: 0.5em; font-size: 16.5px; line-height: 1.55; }

/* ============================================================
   Editorial primitives (Phase 2)
   ============================================================ */

/* Hairline brass divider above each numbered h2 */
.prose h2 + * { margin-top: 0.4em; }
.prose h2:not(:first-of-type)::before {
  content: ""; display: block; height: 1px; width: 88px;
  background: linear-gradient(90deg, var(--brass) 0%, transparent 100%);
  margin: 0 0 18px 0;
}

/* Pull quote — narrow inset, oxblood left rule */
.prose .ed-pullquote {
  margin: 40px 0; padding: 8px 0 8px 24px;  /* 5×8 vertical, 3×8 indent */
  border-left: 3px solid var(--oxblood);
  font-family: var(--display); font-style: italic;
  font-size: clamp(20px, 2.1vw, 26px); line-height: 1.3;
  color: var(--ink); letter-spacing: -0.012em;
}
.prose .ed-pullquote p { margin: 0 0 0.45em 0; }
.prose .ed-pullquote p:last-child { margin-bottom: 0; }
.prose .ed-pullquote cite {
  display: block; margin-top: 12px;
  font-family: var(--mono); font-style: normal; font-size: 10.5px;
  letter-spacing: 0.2em; color: var(--brass);
  text-transform: uppercase; font-weight: 600;
}

/* Bottom line card — charcoal ground, brass corner mark */
.prose .ed-bottomline {
  position: relative;
  background: var(--bg-3, #1a1612);
  border-top: 2px solid var(--oxblood);
  border-left: 1px solid var(--rule-2);
  border-right: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  padding: 24px 28px 16px;  /* 3×8 / 3.5×8 */
  margin: 48px 0;            /* 6×8 */
  border-radius: 0 0 2px 2px;
  box-shadow: var(--shadow-paper);
}
.prose .ed-bottomline__label {
  display: block;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--brass); font-weight: 700;
  margin-bottom: 10px;
}
.prose .ed-bottomline p { font-family: var(--display); font-size: 17.5px; line-height: 1.6; margin-bottom: 0.7em; }
.prose .ed-bottomline p:last-child { margin-bottom: 0; }

/* Callouts: warn (amber), info (brass), cite (paper italic) */
.prose .ed-callout {
  padding: 16px 24px; margin: 32px 0;  /* 4×8 */
  border-left: 3px solid; border-radius: 0 2px 2px 0;
  background: rgba(0,0,0,0.18);
}
.prose .ed-callout__label {
  display: block;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 700;
  margin-bottom: 8px;
}
.prose .ed-callout p { margin-bottom: 0.5em; font-size: 15.5px; line-height: 1.55; }
.prose .ed-callout p:last-child { margin-bottom: 0; }
.prose .ed-callout--warn { border-left-color: var(--amber); }
.prose .ed-callout--warn .ed-callout__label { color: var(--amber); }
.prose .ed-callout--info { border-left-color: var(--brass); }
.prose .ed-callout--info .ed-callout__label { color: var(--brass); }
.prose .ed-callout--cite { border-left-color: var(--paper-3); font-style: italic; }
.prose .ed-callout--cite .ed-callout__label { color: var(--paper-3); font-style: normal; }

/* Footnotes — bottom of article */
.prose .ed-footnotes {
  margin-top: 3.2em; padding-top: 22px;
  border-top: 1px solid var(--rule-2);
  font-family: var(--ui, "Inter Tight", system-ui, sans-serif);
}
.prose .ed-footnotes__h {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--brass); font-weight: 700;
  margin: 0 0 12px 0;
}
.prose .ed-footnotes ol { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.prose .ed-footnotes li {
  font-size: 14px; line-height: 1.6; color: var(--paper-3);
  margin-bottom: 0.5em; padding-left: 0;
}
.prose .ed-footnotes .fn-num {
  font-family: var(--mono); font-size: 11px; color: var(--brass);
  margin-right: 8px; font-weight: 700;
}
.prose .ed-footnotes .fn-backref {
  color: var(--brass); text-decoration: none; margin-left: 4px;
}
.prose .ed-footnotes .fn-backref:hover { color: var(--amber); }

.prose sup.fn-ref { font-size: 0.62em; vertical-align: super; line-height: 0; }
.prose sup.fn-ref a {
  font-family: var(--mono); color: var(--oxblood); font-weight: 700;
  text-decoration: none; padding: 0 2px;
}
.prose sup.fn-ref a:hover { color: var(--amber); }

/* Mobile tightening */
@media (max-width: 720px) {
  .prose .ed-pullquote { padding-left: 16px; font-size: 19px; }
  .prose .ed-bottomline { padding: 18px 18px 14px; }
  .prose .ed-callout { padding: 14px 16px; }
  .prose h2:not(:first-of-type)::before { width: 64px; margin-bottom: 14px; }
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .prose .ed-pullquote, .prose .ed-bottomline, .prose .ed-callout {
    transition: none !important;
  }
}

/* Product cards inside article */
.prose .pcard {
  background: var(--bg);
  border: 1px solid var(--rule); border-top: 3px solid var(--oxblood);
  padding: clamp(18px, 2.4vw, 28px);
  margin: 2em 0;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
  border-radius: 2px;
}
@media (max-width: 540px) { .prose .pcard { grid-template-columns: 1fr; } }
.prose .pcard .p-img {
  aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-3);
  border: 1px solid var(--rule);
}
.prose .pcard .p-img img { width: 100%; height: 100%; object-fit: cover; }
.prose .pcard .p-lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--oxblood); font-weight: 700;
  margin-bottom: 6px; display: block;
}
.prose .pcard h4 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(18px, 1.6vw, 21px);
  margin: 0 0 8px;
  color: var(--ink);
}
.prose .pcard .p-snip {
  font-family: var(--body); font-size: 14.5px; line-height: 1.5;
  color: var(--stone); margin: 0 0 14px;
}
.prose .pcard .p-foot {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
}
.prose .pcard .p-price {
  font-family: var(--display); font-weight: 600; font-size: 19px;
  color: var(--ink); letter-spacing: -0.01em;
  font-feature-settings: "onum" 1;
}
.prose .pcard .p-link {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--oxblood); font-weight: 600;
  border-bottom: 1px solid var(--oxblood); padding-bottom: 2px;
}

/* Verdict panel */
.verdict-panel {
  margin: clamp(36px, 4vw, 56px) 0 0;
  border: 1px solid var(--ink);
  background: var(--bg-2);
  position: relative;
}
.verdict-panel::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--paper-noise); opacity: 0.10; mix-blend-mode: multiply; pointer-events: none;
}
.verdict-panel-inner {
  position: relative; z-index: 1;
  padding: clamp(28px, 4vw, 48px);
}
.verdict-panel .label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--oxblood); font-weight: 700;
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.verdict-panel .label::before, .verdict-panel .label::after {
  content: ""; width: 28px; height: 1px; background: var(--oxblood); display: inline-block;
}
.verdict-panel h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(24px, 3vw, 36px); margin-bottom: 14px;
  max-width: 22ch; letter-spacing: -0.018em;
}
.verdict-panel h3 em { font-style: italic; color: var(--oxblood); font-weight: 500; }
.verdict-panel .stars {
  font-family: var(--display); font-size: 22px; letter-spacing: 4px; color: var(--brass-hi);
  margin-bottom: 14px;
}
.verdict-panel .rating-detail {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--stone); margin-bottom: 18px;
}
.verdict-panel .rating-detail .score {
  color: var(--ink); font-weight: 700; font-size: 13px; letter-spacing: 0.08em;
}
.verdict-panel p {
  font-family: var(--display); font-style: italic;
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5;
  max-width: 56ch; color: var(--ink-2); margin: 0 0 22px;
}
.verdict-panel .cta-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   CATEGORY PAGE
   ============================================================ */
.cat-mast {
  position: relative; overflow: hidden;
  color: var(--paper);
  isolation: isolate;
}
.cat-mast .bg { position: absolute; inset: 0; z-index: 0; }
.cat-mast .bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.04) contrast(1.04) brightness(0.78); }
.cat-mast::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(26,22,18,0.35) 0%, transparent 30%, rgba(26,22,18,0.85) 100%);
}
.cat-mast::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: var(--paper-noise); opacity: 0.08; mix-blend-mode: multiply;
}
.cat-mast-inner {
  position: relative; z-index: 2;
  min-height: clamp(420px, 56vh, 580px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(40px, 5vw, 72px);
}
.cat-mast .crumbs {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(250,246,239,0.78); margin-bottom: 16px;
}
.cat-mast .crumbs a { color: var(--brass-hi); }
.cat-mast .crumbs .sep { color: rgba(250,246,239,0.35); }
.cat-mast .vol {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--brass-hi); font-weight: 600;
  margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 12px;
}
.cat-mast .vol::after { content: ""; width: 28px; height: 1px; background: var(--brass-hi); display: inline-block; }
.cat-mast h1 {
  color: var(--paper);
  font-size: clamp(52px, 10vw, 144px);
  letter-spacing: -0.034em; line-height: 0.9;
  margin-bottom: 18px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
  font-weight: 600;
}
.cat-mast h1 em { font-style: italic; color: var(--brass-hi); font-weight: 400; }
.cat-mast .dek {
  font-family: var(--display); font-style: italic;
  font-size: clamp(17px, 1.7vw, 22px); line-height: 1.5;
  max-width: 64ch; color: rgba(250,246,239,0.94);
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Quick stats strip */
.cat-stats {
  background: var(--bg);
  border-bottom: 1px solid var(--rule-2);
}
.cat-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule-2);
}
.cat-stats-row--1 { grid-template-columns: 1fr; }
.cat-stats-row--2 { grid-template-columns: repeat(2, 1fr); }
.cat-stats-row--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
  .cat-stats-row, .cat-stats-row--3, .cat-stats-row--4 { grid-template-columns: 1fr 1fr; }
  .cat-stats-row--1 { grid-template-columns: 1fr; }
}
.cat-stat {
  background: var(--bg);
  padding: 20px clamp(16px, 2.5vw, 28px);
  display: flex; flex-direction: column; gap: 4px;
}
.cat-stat .n {
  font-family: var(--display); font-weight: 600; font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1; color: var(--ink); letter-spacing: -0.022em;
  font-feature-settings: "onum" 1;
}
.cat-stat .l {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--brass); font-weight: 500;
}

/* Numbered Reports list */
.reports-list {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-top: 1px solid var(--rule);
}
.report-row {
  display: grid;
  grid-template-columns: 64px 280px minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 40px);
  padding-block: clamp(28px, 3.5vw, 44px);
  border-bottom: 1px solid var(--rule);
  align-items: center;
  transition: background .2s ease;
}
.report-row:hover { background: var(--bg-2); }
.report-row .num {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em;
  color: var(--brass); font-weight: 500;
  border-top: 1px solid var(--brass);
  padding-top: 8px;
}
.report-row .num strong { display: block; color: var(--ink); font-size: 16px; font-weight: 600; letter-spacing: 0.06em; }
.report-row .img {
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-3); border: 1px solid var(--rule);
}
.report-row .img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.0); transition: transform .6s ease; }
.report-row:hover .img img { transform: scale(1.04); }
.report-row .body .meta {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 8px;
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.report-row h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(20px, 2.1vw, 26px); line-height: 1.18;
  margin: 0 0 8px; max-width: 28ch;
}
.report-row h3 a:hover { color: var(--oxblood); }
.report-row p {
  color: var(--stone); font-size: 15.5px; line-height: 1.55; margin: 0 0 10px; max-width: 56ch;
  font-family: var(--display); font-style: italic;
}
.report-row .byline {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--stone-2);
}
.report-row .cta {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--oxblood); font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.report-row .cta .arr { transition: transform .2s ease; }
.report-row:hover .cta .arr { transform: translateX(4px); }

@media (max-width: 900px) {
  .report-row { grid-template-columns: 56px 1fr; }
  .report-row .img { grid-column: 1 / -1; order: -1; aspect-ratio: 16 / 10; }
  .report-row .cta { display: none; }
}
@media (max-width: 540px) {
  .report-row { grid-template-columns: 1fr; }
  .report-row .num { padding-top: 0; border-top: 0; }
  .report-row .num::before {
    content: ""; display: inline-block; width: 28px; height: 1px;
    background: var(--brass); vertical-align: middle; margin-right: 10px;
  }
}

/* CTA band */
.cta-band {
  background: var(--bg-3); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding-block: clamp(48px, 6vw, 80px);
}
.cta-band-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center;
}
@media (max-width: 720px) { .cta-band-inner { grid-template-columns: 1fr; } }
.cta-band h2 { max-width: 16ch; }
.cta-band p { font-family: var(--display); font-style: italic; color: var(--ink-2); max-width: 52ch; font-size: 17px; }
.cta-band form { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.cta-band input {
  flex: 1 1 220px; min-width: 0;
  background: var(--bg); border: 1.5px solid var(--ink); color: var(--ink);
  padding: 13px 16px; border-radius: 2px;
  font-family: var(--body); font-size: 15px;
}
.cta-band input:focus { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.cta-band .fineprint { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--stone); margin-top: 14px; }

/* ============================================================
   Calculators — Vol. 10 (Tools)
   Form on warm paper · brass mono labels · Source Serif result.
   Inputs are 16.5px+ to prevent iOS focus-zoom.
   ============================================================ */

.calc-form {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brass);
  padding: clamp(24px, 4vw, 36px);
  margin: 28px 0 32px;
  position: relative;
}
.calc-form::before {
  content: "Inputs";
  position: absolute; top: -10px; left: 18px;
  background: var(--bg);
  padding: 0 10px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-deep); font-weight: 600;
}
.calc-form > h3 {
  font-family: var(--display); font-size: 22px;
  margin: 0 0 6px; color: var(--ink); font-weight: 600;
}
.calc-form > p {
  font-family: var(--display); font-style: italic;
  font-size: 15px; color: var(--ink-2);
  margin: 0 0 18px;
}
.calc-form label {
  display: block;
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass-deep); font-weight: 500;
  margin: 20px 0 8px;
}
.calc-form > label:first-of-type { margin-top: 0; }
.calc-form input[type="number"],
.calc-form select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--bg);
  font-family: var(--body); font-size: 16.5px;
  color: var(--ink);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 0;
}
.calc-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%237a5b2e' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.calc-form input[type="number"]:focus,
.calc-form select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(124,43,31,0.14);
}
.calc-form .btn,
.calc-form button {
  display: inline-block;
  background: var(--bg-2);
  color: var(--paper);
  border: none;
  padding: 15px 22px;
  margin-top: 26px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  border-radius: 0;
  transition: background 0.15s;
}
.calc-form .btn:hover,
.calc-form button:hover { background: var(--oxblood); }

/* Sleep-debt 7-night grid */
.calc-night-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 10px;
}
.calc-form .calc-section-label {
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass-deep); font-weight: 500;
  margin: 22px 0 10px;
}

/* Checkboxes (supplement stack) */
.checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.checkbox-item {
  display: flex; align-items: center;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.checkbox-item:hover { border-color: var(--brass); background: var(--bg-3); }
.checkbox-item input[type="checkbox"] {
  margin-right: 12px; width: 16px; height: 16px; cursor: pointer;
  accent-color: var(--oxblood); flex-shrink: 0;
}
.checkbox-item label {
  flex: 1; margin: 0;
  font-family: var(--body); font-size: 14px;
  font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--ink-2); cursor: pointer;
}
.checkbox-item label strong { color: var(--ink); font-weight: 500; }
.checkbox-item .price {
  font-family: var(--mono); font-size: 12px;
  color: var(--brass-deep); font-weight: 500;
  flex-shrink: 0; margin-left: 10px;
}

/* Result block — masthead-style with brass top-rule */
.calc-result {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--brass);
  padding: clamp(28px, 5vw, 42px);
  margin: 32px 0;
  position: relative;
  box-shadow: var(--shadow-paper);
}
.calc-result::before {
  content: "Result";
  position: absolute; top: -11px; left: 18px;
  background: var(--bg);
  padding: 0 10px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-deep); font-weight: 600;
}
.calc-result h3 {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--stone); font-weight: 500;
  margin: 0 0 14px;
}
.calc-result .big-number {
  font-family: var(--display);
  font-size: clamp(38px, 7vw, 64px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.0;
  color: var(--ink);
  margin: 0 0 18px;
}
.calc-result-detail {
  font-family: var(--mono); font-size: 13px;
  line-height: 1.65; letter-spacing: 0.01em;
  color: var(--ink-2);
  margin: 0;
}
.calc-result-detail strong { color: var(--ink); font-weight: 600; }
.calc-result-detail a {
  color: var(--oxblood); border-bottom: 1px solid rgba(125,43,31,0.4);
}
.calc-result-detail a:hover { border-bottom-color: var(--oxblood); }

/* Comparison grid (cold plunge, sauna, sleep debt, protein) */
.calc-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.calc-comparison-item {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  padding: 16px 18px;
}
.calc-comparison-item .label {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-deep); font-weight: 500;
  margin-bottom: 6px;
}
.calc-comparison-item .value {
  font-family: var(--display); font-size: 24px;
  font-weight: 600; letter-spacing: -0.014em;
  color: var(--ink); line-height: 1.1;
}
.calc-comparison-item .delta {
  font-family: var(--mono); font-size: 11px;
  color: var(--stone); margin-top: 6px;
  letter-spacing: 0.01em;
}

/* Zones (HRV interpreter) */
#hrv-zones h3 {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-deep); font-weight: 600;
  margin: 0 0 12px;
}
.calc-zone {
  padding: 14px 18px;
  margin-top: 10px;
  border-left: 4px solid var(--stone);
  background: var(--bg-2);
  font-family: var(--body);
  font-size: 14.5px; line-height: 1.55;
  color: var(--ink-2);
}
.calc-zone-red    { border-left-color: var(--oxblood); }
.calc-zone-amber  { border-left-color: var(--brass); }
.calc-zone-green  { border-left-color: var(--moss); }

/* Notes block at end */
.calc-notes {
  margin-top: 32px;
  padding: 24px 26px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brass);
}
.calc-notes h3 {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-deep); margin: 0 0 12px; font-weight: 600;
}
.calc-notes p {
  font-family: var(--body); font-size: 14.5px;
  line-height: 1.62; margin: 0 0 10px;
  color: var(--ink-2);
}
.calc-notes p:last-child { margin-bottom: 0; }
.calc-notes a {
  color: var(--oxblood); border-bottom: 1px solid rgba(125,43,31,0.4);
}
.calc-notes a:hover { border-bottom-color: var(--oxblood); }
.calc-notes strong { color: var(--ink); }

/* Tools index — rows have no thumbnail, so collapse the image column. */
body.tools-index .report-row {
  grid-template-columns: 64px minmax(0, 1fr) auto;
}
@media (max-width: 860px) {
  body.tools-index .report-row { grid-template-columns: 56px 1fr; }
}
@media (max-width: 560px) {
  body.tools-index .report-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .calc-comparison { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .calc-comparison-item { padding: 13px 14px; }
  .calc-comparison-item .value { font-size: 20px; }
  .calc-form { padding: 22px 18px; }
  .calc-form input[type="number"],
  .calc-form select { font-size: 16px; padding: 11px 12px; }
  .calc-result { padding: 26px 20px; }
  .checkbox-group { grid-template-columns: 1fr; }
  .calc-notes { padding: 20px 18px; }
}

/* ============================================================
   Related Reports footer block — auto-injected after every article
   ============================================================ */
.related-reports {
  max-width: 1280px;
  margin: 60px auto 24px;
  padding: 0 32px;
}
.related-reports .rel-head {
  border-top: 2px solid var(--ink);
  padding-top: 28px;
  margin-bottom: 28px;
  display: flex;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}
.related-reports .rel-eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oxblood);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.related-reports .rel-eyebrow .bar {
  display: inline-block;
  width: 28px;
  height: 1.5px;
  background: var(--oxblood);
}
.related-reports h2 {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}
.related-reports .rel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.related-reports .rel-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 28px;
  border: 1px solid var(--rule-2);
  background: var(--bg-2);
  text-decoration: none;
  color: inherit;
  transition: border-color 180ms ease, transform 180ms ease;
}
.related-reports .rel-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.related-reports .rel-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
}
.related-reports .rel-kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}
.related-reports .rel-card h3 {
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 6px 0 2px;
  color: var(--ink);
}
.related-reports .rel-card p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
}
.related-reports .rel-cta {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.related-reports .rel-cta .arr { margin-left: 4px; }

@media (max-width: 960px) {
  .related-reports .rel-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .related-reports .rel-card:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .related-reports { padding: 0 18px; margin: 40px auto 16px; }
  .related-reports .rel-grid { grid-template-columns: 1fr; gap: 16px; }
  .related-reports .rel-card:nth-child(3) { grid-column: auto; }
  .related-reports .rel-card { padding: 20px 18px 22px; }
  .related-reports .rel-card h3 { font-size: 19px; }
  .related-reports h2 { font-size: 26px; }
}

/* ============================================================
   Topics index — auto-generated on /topics.html
   ============================================================ */
.topics-index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 56px;
  margin: 24px 0 36px;
}
.topics-index .topic-silo h3 {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.topics-index .topic-silo h3 a { color: var(--ink); text-decoration: none; }
.topics-index .topic-silo h3 a:hover { color: var(--oxblood); }
.topics-index .topic-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: normal;
}
.topics-index .topic-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.topics-index .topic-list li {
  padding: 6px 0;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.45;
  border-bottom: 1px dotted var(--rule);
}
.topics-index .topic-list li:last-child { border-bottom: none; }
.topics-index .topic-list a {
  color: var(--ink);
  text-decoration: none;
}
.topics-index .topic-list a:hover { color: var(--oxblood); }
.topics-index .topic-pillar {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-left: 8px;
}
@media (max-width: 760px) {
  .topics-index { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   Affiliate product cards (single + row grid)
   ============================================================ */
.product-card {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 20px;
  align-items: center;
  margin: 24px 0;
  padding: 18px;
  border: 1px solid var(--rule-2);
  background: var(--bg-2);
}
.product-card-image-link {
  display: block;
  overflow: hidden;
  background: #f0eadc;
}
.product-card-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.product-card-body { min-width: 0; }
.product-card-brand {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  display: block;
  margin-bottom: 4px;
}
.product-card-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.product-card-price {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.product-card-asof {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--stone);
  text-transform: uppercase;
}
.product-card-cta {
  align-self: center;
}
.product-card-cta .btn {
  padding: 11px 18px;
  font-size: 12.5px;
  white-space: nowrap;
}

/* Product row — three side-by-side cards for comparison contexts */
.product-row {
  margin: 32px 0;
}
.product-row-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.product-row-grid .product-card {
  grid-template-columns: 1fr;
  margin: 0;
  align-content: start;
}
.product-row-grid .product-card-image-link img { aspect-ratio: 3 / 2; }
.product-row-grid .product-card-cta { margin-top: 8px; }

@media (max-width: 860px) {
  .product-card {
    grid-template-columns: 140px 1fr;
    gap: 16px;
  }
  .product-card-cta { grid-column: 1 / -1; margin-top: 4px; }
  .product-row-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 560px) {
  .product-card {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .product-card-image-link img { aspect-ratio: 16 / 9; }
  .product-row-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   Article prose tables — mobile-safe (horizontal scroll under prose width)
   ============================================================ */
.article-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: 22px 0;
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.5;
}
.article-content table thead,
.article-content table tbody,
.article-content table tr {
  display: table;
  width: 100%;
  table-layout: auto;
}
.article-content table th,
.article-content table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule-2);
  min-width: 90px;
}
.article-content table th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg-2);
  border-bottom: 2px solid var(--ink);
}
.article-content table tbody tr:last-child td { border-bottom: none; }

/* On narrow screens, allow horizontal scroll within the prose column
   instead of pushing the whole page over. */
@media (max-width: 640px) {
  .article-content table {
    font-size: 13.5px;
  }
  .article-content table th,
  .article-content table td {
    padding: 8px 10px;
    min-width: 80px;
  }
}

/* ============================================================
   MOTION — cinematic editorial polish
   All animations honor `prefers-reduced-motion: reduce`. Anything
   below this line should be skippable without breaking layout.
   ============================================================ */

/* (A) Ken Burns — slow zoom/pan on hero background images.
   Applies to all .bg img inside .hero / .cat-mast / .art-hero.
   The image stays at fixed dimensions; transform handles the motion,
   so there's no CLS. 18s loop, alternates direction. */
.hero .bg img,
.cat-mast .bg img,
.art-hero .bg img {
  transform-origin: center 38%;
  will-change: transform;
  animation: kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns {
  0%   { transform: scale(1.0) translate3d(0, 0, 0); }
  50%  { transform: scale(1.04) translate3d(-1.2%, -0.6%, 0); }
  100% { transform: scale(1.06) translate3d(0.8%, 0.4%, 0); }
}

/* (C) Hero text reveal stagger — eyebrow → headline → lede → CTAs.
   Only fires on initial page load (not on history nav, by default
   it's just CSS so it always plays once). */
.hero .hero-mast,
.hero h1,
.hero .dek,
.hero .cta-row,
.cat-mast .crumbs,
.cat-mast .vol,
.cat-mast h1,
.cat-mast .dek,
.art-hero .crumbs,
.art-hero .tag,
.art-hero h1,
.art-hero .dek,
.art-hero-byline {
  animation: heroFadeUp 720ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero .hero-mast,         .cat-mast .crumbs, .art-hero .crumbs { animation-delay: 60ms; }
.hero h1,                 .cat-mast .vol,    .art-hero .tag    { animation-delay: 180ms; }
.cat-mast h1,             .art-hero h1                          { animation-delay: 280ms; }
.hero .dek,               .cat-mast .dek,    .art-hero .dek    { animation-delay: 380ms; }
.hero .cta-row,           .art-hero-byline                       { animation-delay: 500ms; }
@keyframes heroFadeUp {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* (B) Scroll-triggered reveal — IntersectionObserver toggles `.in-view`
   on .report, .dept, .principles li, .section h2. Starts transparent
   and offset; transitions on class change. */
.report, .dept, .htw .principles li, .section .sec-head h2, .section .sec-head p,
.report-row, .topic-silo {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.report.in-view, .dept.in-view, .htw .principles li.in-view,
.section .sec-head h2.in-view, .section .sec-head p.in-view,
.report-row.in-view, .topic-silo.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* (D) Reading progress indicator — only on .article-page. */
body.article-page::before {
  content: "";
  position: fixed; top: 0; left: 0; height: 2px; z-index: 9999;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--brass-deep), var(--amber), var(--amber-hi));
  box-shadow: 0 0 12px -2px rgba(217,119,50,0.6);
  transition: width 100ms linear;
  pointer-events: none;
}

/* (F) Department card hover lift. */
.dept {
  transition: background .2s ease, transform .24s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow .24s ease;
}
.dept:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 12px 32px -16px rgba(217,119,50,0.35),
              0 2px 8px -4px rgba(13,10,8,0.7);
}

/* (G) Subtle amber-pulse on primary CTAs (.btn — solid amber buttons only). */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,50,0.0), 0 6px 16px -8px rgba(217,119,50,0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(217,119,50,0.18), 0 10px 28px -10px rgba(217,119,50,0.65); }
}
.hero .btn:not(.btn--ghost),
.cta-band .btn:not(.btn--ghost),
.cta-row .btn:not(.btn--ghost) {
  animation: ctaPulse 3.2s ease-in-out infinite;
}
.hero .btn:not(.btn--ghost):hover,
.cta-band .btn:not(.btn--ghost):hover,
.cta-row .btn:not(.btn--ghost):hover {
  animation-play-state: paused;
}

/* (E) Stat number count-up — handled in JS. CSS just sets up the
   font-feature so animated numbers stay in tabular alignment. */
.cat-stat .n { font-variant-numeric: tabular-nums; }

/* Master reduced-motion opt-out — everything above must collapse to
   the static state when the user has expressed a preference. */
@media (prefers-reduced-motion: reduce) {
  .hero .bg img,
  .cat-mast .bg img,
  .art-hero .bg img { animation: none !important; transform: none !important; }

  .hero .hero-mast, .hero h1, .hero .dek, .hero .cta-row,
  .cat-mast .crumbs, .cat-mast .vol, .cat-mast h1, .cat-mast .dek,
  .art-hero .crumbs, .art-hero .tag, .art-hero h1, .art-hero .dek,
  .art-hero-byline {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }

  .report, .dept, .htw .principles li, .section .sec-head h2, .section .sec-head p,
  .report-row, .topic-silo {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }

  .dept { transition: background .2s ease !important; }
  .dept:hover { transform: none !important; box-shadow: none !important; }

  .hero .btn, .cta-band .btn, .cta-row .btn { animation: none !important; }

  body.article-page::before { display: none; }
}

/* Mobile-stacked comparison tables: at <720px the table renders as one card
   per row, each cell becomes a labeled row keyed off `data-label`. */
@media (max-width: 720px) {
  .article-content table.cmp-table {
    display: block;
    width: 100%;
    overflow-x: visible;
    background: transparent;
    font-size: 14.5px;
  }
  .article-content table.cmp-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .article-content table.cmp-table tbody { display: block; width: 100%; }
  .article-content table.cmp-table tr {
    display: block;
    margin-bottom: 14px;
    padding: 14px 16px 12px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-left: 2px solid var(--brass);
  }
  .article-content table.cmp-table td {
    display: grid;
    grid-template-columns: minmax(90px, 38%) 1fr;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--rule-2);
    min-width: 0;
    text-align: left;
  }
  .article-content table.cmp-table tr td:last-child { border-bottom: none; padding-bottom: 0; }
  .article-content table.cmp-table tr td:first-child { padding-top: 0; }
  .article-content table.cmp-table td::before {
    content: attr(data-label);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass);
    font-weight: 600;
    padding-top: 3px;
  }
  .article-content table.cmp-table td:first-child {
    font-family: var(--display);
    font-weight: 600;
    color: var(--ink);
    font-size: 17px;
  }
}

/* ============================================================
   Pass 7 — Wirecutter-grade polish
   ============================================================ */

/* (Batch 1) Technical-term <abbr> — brass small-caps */
.prose abbr,
.prose abbr[title] {
  font-family: var(--mono);
  font-feature-settings: "smcp" 1, "c2sc" 1, "tnum" 1;
  font-variant: small-caps;
  font-size: 0.92em;
  letter-spacing: 0.06em;
  color: var(--brass);
  text-decoration: none;
  border-bottom: 1px dotted var(--brass-deep);
  cursor: help;
}
.prose abbr.unit {
  border-bottom: none;
  cursor: text;
}

/* (Batch 1) Pullquote hanging open quote — optical alignment */
.prose .ed-pullquote {
  position: relative;
}
.prose .ed-pullquote::before {
  content: "“";
  position: absolute;
  left: -8px; top: -14px;
  font-family: var(--display); font-style: italic;
  font-size: 3.2em; line-height: 1;
  color: var(--oxblood);
  opacity: 0.85;
  pointer-events: none;
}
@media (max-width: 720px) {
  .prose .ed-pullquote::before { font-size: 2.6em; left: -4px; top: -10px; }
}

/* (Batch 1) Bookmark + share button row in hero header */
.art-hero-actions {
  position: absolute;
  top: clamp(20px, 3.5vw, 36px);
  right: clamp(20px, 4vw, 40px);
  z-index: 3;
  display: flex; gap: 10px;
}
.art-hero-actions button {
  appearance: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(13,10,8,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(201,133,73,0.35);
  color: var(--brass-hi);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 200ms ease;
}
.art-hero-actions button:hover {
  background: rgba(13,10,8,0.85);
  border-color: var(--brass);
  color: var(--amber);
}
.art-hero-actions button:active { transform: translateY(1px); }
.art-hero-actions button.is-saved {
  color: var(--amber);
  border-color: var(--amber);
}
.art-hero-actions button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
  .art-hero-actions button { transition: none; }
}

/* (Batch 2) At-a-Glance card — Wirecutter-style summary between hero + body */
.ataglance {
  position: relative;
  background: var(--bg-2, #1c1814);
  border: 1px solid var(--rule-2, rgba(255,255,255,0.08));
  border-top: 3px solid var(--amber);
  padding: 22px 24px 20px;
  margin: 0 0 40px 0;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 8px 28px -16px rgba(0,0,0,0.55);
}
.ataglance-eyebrow {
  display: inline-block;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--amber); font-weight: 700;
  margin-bottom: 16px;
}
.ataglance-badge {
  position: absolute; top: 18px; right: 22px;
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--mono); text-transform: uppercase;
}
.ataglance-badge__lbl {
  font-size: 9.5px; letter-spacing: 0.22em; color: var(--brass); font-weight: 700;
}
.ataglance-badge__val {
  font-size: 11px; letter-spacing: 0.06em; color: var(--ink); font-weight: 700;
}
.ataglance-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--rule-2, rgba(255,255,255,0.06));
  align-items: baseline;
}
.ataglance-row:first-of-type { border-top: none; padding-top: 4px; }
.ataglance-row__lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--brass); font-weight: 700;
  padding-top: 3px;
}
.ataglance-row__val {
  font-family: var(--display); font-size: 16.5px; line-height: 1.5;
  color: var(--ink-2);
}
.ataglance-row__val strong { color: var(--ink); font-weight: 600; }
.ataglance-buy {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: var(--amber);
  color: #1a0e05;
  text-decoration: none;
  border-radius: 3px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 160ms ease, transform 200ms ease;
  box-shadow: 0 6px 18px -10px rgba(217,119,50,0.65);
}
.ataglance-buy:hover { background: var(--amber-hi); }
.ataglance-buy:active { transform: translateY(1px); }
.ataglance-buy__lbl {
  padding-right: 10px; border-right: 1px solid rgba(26,14,5,0.25);
  color: #1a0e05;
}
.ataglance-buy__txt { color: #1a0e05; letter-spacing: 0.06em; }
.ataglance-buy .arr { margin-left: auto; font-size: 14px; }

@media (max-width: 720px) {
  .ataglance { padding: 20px 18px 18px; margin-bottom: 32px; }
  .ataglance-badge { position: static; margin-bottom: 12px; }
  .ataglance-row { grid-template-columns: 1fr; gap: 8px; padding: 14px 0 16px; }
  .ataglance-row__lbl { padding-top: 0; margin-bottom: 4px; display: block; }
  .ataglance-buy { width: 100%; }
  .ataglance-buy .arr { margin-left: 0; }
}

/* (Batch 3) Sticky TOC — vertical h2 nav in sidebar */
.side-card--toc { display: none; }
@media (min-width: 901px) {
  .side-card--toc { display: block; }
}
.side-card--toc { border-top-color: var(--brass); }
.side-toc__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 8px 0 8px 10px;
  margin-left: -12px;
  text-decoration: none;
  color: var(--paper-3);
  border-left: 2px solid transparent;
  transition: color 160ms ease, border-left-color 200ms ease, background 200ms ease;
}
.side-toc__item:hover { color: var(--ink); }
.side-toc__item.is-active {
  color: var(--paper);
  border-left-color: var(--brass);
  background: rgba(201,133,73,0.06);
}
.side-toc__n {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--brass); font-weight: 700; padding-top: 3px;
}
.side-toc__t {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.45;
  letter-spacing: 0.02em;
}
@media (prefers-reduced-motion: reduce) {
  .side-toc__item { transition: none; }
  html { scroll-behavior: auto !important; }
}
@media (min-width: 901px) {
  html { scroll-behavior: smooth; }
}

/* (Batch 2) Methodology disclosure — sits below At-a-Glance on reviews */
.methodology {
  background: var(--bg-2, #1c1814);
  border-left: 3px solid var(--oxblood);
  padding: 16px 20px 14px;
  margin: 0 0 40px 0;
  border-radius: 0 2px 2px 0;
}
.methodology__eyebrow {
  display: block;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--brass); font-weight: 700;
  margin-bottom: 8px;
}
.methodology p {
  font-family: var(--serif);
  font-size: 14.5px; line-height: 1.6;
  color: var(--paper-2);
  margin: 0;
}
@media (max-width: 720px) {
  .methodology { padding: 14px 16px 12px; margin-bottom: 32px; }
  .methodology p { font-size: 14px; }
}

/* (Batch 4) End-of-article feedback + newsletter + share strip */
.art-strip {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--rule-2, rgba(255,255,255,0.08));
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 720px) {
  .art-strip { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; margin-top: 40px; }
}
.art-strip__col { display: flex; flex-direction: column; gap: 12px; }
.art-strip__h {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--brass); font-weight: 700;
}

.feedback { display: flex; align-items: center; gap: 10px; }
.feedback__btn {
  appearance: none;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--rule-2, rgba(255,255,255,0.18));
  color: var(--paper-3); cursor: pointer;
  border-radius: 50%;
  transition: color 160ms ease, border-color 160ms ease, background 200ms ease, transform 200ms ease;
}
.feedback__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feedback__btn:hover { color: var(--amber); border-color: var(--amber); background: rgba(217,119,50,0.08); }
.feedback__btn.is-selected { color: var(--amber); border-color: var(--amber); background: rgba(217,119,50,0.12); }
.feedback__btn:active { transform: translateY(1px); }
.feedback__thx {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brass); margin-left: 6px;
}

.news-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  background: var(--bg-2, #1c1814);
  border: 1px solid var(--rule-2, rgba(255,255,255,0.12));
  border-radius: 3px;
  padding: 6px 6px 6px 14px;
  align-items: center;
  position: relative;
}
.news-form input[type="email"] {
  background: transparent; border: none; outline: none;
  font-family: var(--serif); font-size: 15px; color: var(--ink);
  padding: 10px 0; min-width: 0;
}
.news-form input::placeholder { color: rgba(216,205,183,0.5); }
.news-form button {
  appearance: none;
  background: var(--amber); color: #1a0e05;
  border: none; cursor: pointer;
  padding: 10px 16px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  border-radius: 2px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 160ms ease, transform 200ms ease;
}
.news-form button:hover { background: var(--amber-hi); }
.news-form button:active { transform: translateY(1px); }
.news-form__thx {
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  background: var(--bg-2);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--amber); font-weight: 700;
  border-radius: 3px;
}
.news-form__thx[hidden] { display: none; }
.news-form__thx:not([hidden]) { display: flex; }
.feedback__thx[hidden] { display: none; }

/* Sidebar-narrow variant: stack input + button vertically */
.news-form--side {
  grid-template-columns: 1fr;
  padding: 6px;
  gap: 4px;
}
.news-form--side input[type="email"] { padding: 8px 10px; font-size: 14px; }
.news-form--side button { width: 100%; padding: 9px 12px; justify-content: center; }

.share-row { display: flex; gap: 8px; }
.share-row__btn {
  appearance: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--rule-2, rgba(255,255,255,0.18));
  color: var(--paper-3);
  text-decoration: none; cursor: pointer;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 160ms ease, border-color 160ms ease, background 200ms ease, transform 200ms ease;
}
.share-row__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.share-row__btn:hover { color: var(--brass); border-color: var(--brass); background: rgba(201,133,73,0.08); }
.share-row__btn:active { transform: translateY(1px); }
.share-row__btn.is-copied { color: var(--amber); border-color: var(--amber); }

/* (Batch 4) Author signature block */
.art-sig {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--rule-2, rgba(255,255,255,0.08));
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 540px) {
  .art-sig { grid-template-columns: 70px 1fr; gap: 18px; }
}
.art-sig__portrait { width: 90px; height: 90px; border-radius: 50%; overflow: hidden; flex: none; }
@media (max-width: 540px) { .art-sig__portrait { width: 70px; height: 70px; } }
.art-sig__portrait svg { width: 100%; height: 100%; display: block; }
.art-sig__body { min-width: 0; }
.art-sig__name {
  font-family: var(--display); font-weight: 600;
  font-size: 19px; color: var(--ink);
  margin: 0 0 4px 0;
}
.art-sig__role {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brass); font-weight: 600;
  margin: 0 0 12px 0;
}
.art-sig__bio {
  font-family: var(--serif); font-size: 15px; line-height: 1.6;
  color: var(--paper-2); margin: 0 0 10px 0;
}
.art-sig__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700;
  color: var(--amber); text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}
.art-sig__link:hover { color: var(--amber-hi); border-color: var(--amber-hi); }

@media (prefers-reduced-motion: reduce) {
  .feedback__btn, .news-form button, .share-row__btn,
  .art-sig__link { transition: none; }
}

/* (Batch 5) Inline sparkline */
.spark {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  vertical-align: middle;
  padding: 6px 10px;
  margin: 0 4px;
  background: rgba(28,24,20,0.65);
  border-left: 1px solid var(--brass);
  border-radius: 0 2px 2px 0;
}
.spark__svg {
  grid-row: 1 / 3;
  width: 80px; height: 16px;
  color: var(--brass);
  display: block;
}
.spark__lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brass); font-weight: 700;
}
.spark__delta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink); font-weight: 600;
}

/* (Batch 6) Footnote hover-cards */
.fn-tip {
  position: absolute;
  z-index: 50;
  max-width: 320px;
  background: var(--bg-2, #1c1814);
  border: 1px solid var(--brass);
  border-radius: 3px;
  padding: 12px 14px;
  box-shadow: 0 14px 32px -16px rgba(0,0,0,0.7);
  font-family: var(--serif);
  font-size: 14px; line-height: 1.5;
  color: var(--paper-2);
  opacity: 0; transform: translateY(4px);
  transition: opacity 160ms ease, transform 200ms ease;
  pointer-events: none;
}
.fn-tip.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.fn-tip::before {
  content: attr(data-num);
  display: inline-block;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brass); font-weight: 700;
  margin-right: 8px;
  border: 1px solid var(--brass-deep);
  padding: 2px 6px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .fn-tip { transition: none; }
}

/* ============================================================
   v3-RESET — calm, photo-led, single-column.
   Strips sidebar/sparkline/abbr/eyebrow-numerals/dividers/At-a-Glance
   overhead and bumps body type. Loads last so it wins the cascade.
   ============================================================ */

/* Strip — no sidebar, no sticky TOC, no sparklines, no fn-tip, no glassy
   hero action buttons (bookmark stays inline in the byline). */
.art-side,
.side-card,
.side-card--toc,
.side-card--products,
.side-card--related,
.side-card--subscribe,
.spark,
.fn-tip,
.art-hero-actions { display: none !important; }

/* Single-column layout for the article body. Centered, generous gutters.
   Mobile = full width minus 24px gutters. Desktop = 680px column. */
.art-body--v3 {
  padding-block: clamp(40px, 5vw, 72px);
}
.art-body--v3 .art-col {
  max-width: 680px;
  margin: 0 auto;
  padding-inline: 24px;
}
@media (min-width: 901px) {
  .art-body--v3 .art-col { padding-inline: 0; }
}

/* Bigger, calmer body type. Body 19/1.7 desktop, 18/1.65 mobile.
   Paragraphs 1.4em bottom margin. Source Serif throughout. */
.art-body--v3 .prose {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink-2);
}
@media (max-width: 720px) {
  .art-body--v3 .prose { font-size: 18px; line-height: 1.65; }
}
.art-body--v3 .prose p { margin-bottom: 1.4em; }

/* Heading sizes — bigger, no numbered eyebrows, no brass divider. */
.art-body--v3 .prose h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-block: 72px 16px;
  /* override prior flex-with-numeral layout */
  display: block;
  gap: 0;
}
.art-body--v3 .prose h2 .n { display: none; }
.art-body--v3 .prose h2:not(:first-of-type)::before { display: none; }
.art-body--v3 .prose h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(20px, 1.6vw, 22px);
  line-height: 1.32; color: var(--ink);
  margin-block: 40px 8px;
}

/* abbr small-caps unit chips — kill */
.art-body--v3 .prose abbr,
.art-body--v3 .prose abbr.unit,
.art-body--v3 .prose abbr[title] {
  font-family: inherit;
  font-variant: normal;
  font-feature-settings: normal;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-bottom: none;
  cursor: text;
}

/* Drop cap — keep but a touch smaller and aligned to baseline. */
.art-body--v3 .prose .lede-graf::first-letter {
  font-size: 4.6em; line-height: 0.88;
  padding: 0.04em 0.14em 0 0;
}

/* Pull quotes — page-break interrupts, big centered serif, body width. */
.art-body--v3 .prose .ed-pullquote {
  margin: 56px 0;
  padding: 32px 0;
  border-left: none;
  border-top: 1px solid var(--brass);
  border-bottom: 1px solid var(--brass);
  background: transparent;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--oxblood);
  text-align: center;
}
.art-body--v3 .prose .ed-pullquote::before { display: none; } /* drop the hanging quote */
.art-body--v3 .prose .ed-pullquote p { margin: 0; }
.art-body--v3 .prose .ed-pullquote cite {
  display: block; margin-top: 14px;
  font-family: var(--mono); font-style: normal; font-size: 10.5px;
  letter-spacing: 0.22em; color: var(--brass);
  text-transform: uppercase; font-weight: 600;
}

/* At-a-Glance — slightly calmer when present */
.art-body--v3 .ataglance {
  margin: 0 0 40px 0;
  padding: 22px 24px 20px;
}

/* Methodology — bottom-of-article expandable disclosure */
.methodology-v3 {
  margin: 56px 0 32px 0;
  padding: 14px 18px;
  background: var(--bg-2, #1c1814);
  border-left: 2px solid var(--brass);
  border-radius: 0 2px 2px 0;
}
.methodology-v3 summary {
  cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--brass); font-weight: 700;
  list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.methodology-v3 summary::-webkit-details-marker { display: none; }
.methodology-v3 summary::after {
  content: "+"; margin-left: auto;
  font-family: var(--mono); color: var(--brass); font-weight: 400;
  font-size: 16px; transition: transform 200ms ease;
}
.methodology-v3[open] summary::after { content: "–"; }
.methodology-v3 p {
  font-family: var(--serif); font-size: 15px; line-height: 1.65;
  color: var(--paper-2); margin: 12px 0 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .methodology-v3 summary::after { transition: none; }
}

/* Real headshot in the author signature — circular, no outer stroke needed */
.art-sig__portrait img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Byline bookmark button (replaces the old glassy hero actions) */
.stamps__bookmark {
  appearance: none; background: transparent; border: none;
  color: var(--brass-hi); cursor: pointer; padding: 4px 6px;
  border-radius: 2px; line-height: 0;
  transition: color 160ms ease;
}
.stamps__bookmark:hover { color: var(--amber); }
.stamps__bookmark.is-saved { color: var(--amber); }
.stamps__bookmark svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .stamps__bookmark { transition: none; } }

/* Fineprint — keep but use a class, drop the inline style */
.art-fineprint {
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.12em; color: var(--stone);
  text-transform: uppercase;
  margin-top: 40px;
}
.art-fineprint strong { color: var(--ink); letter-spacing: 0.08em; }
.art-fineprint a { color: var(--oxblood); }

/* Fix the byline bookmark NOT to override .verif hidden state */
.stamps__bookmark[hidden] { display: none; }

/* v3 product card — full-width inline editorial module. 240px square image
   on the left at desktop, stacked on mobile. Brass top + bottom hairline,
   charcoal ground, generous padding. */
.art-body--v3 .pcard-v3 {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: stretch;
  margin: 56px 0;
  padding: 28px 0;
  border-top: 1px solid var(--brass);
  border-bottom: 1px solid var(--brass);
  background: transparent;
}
@media (max-width: 720px) {
  .art-body--v3 .pcard-v3 {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 40px 0;
    padding: 24px 0;
  }
}
.art-body--v3 .pcard-v3__img {
  display: block;
  background: var(--bg-2, #1c1814);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 2px;
}
.art-body--v3 .pcard-v3__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.art-body--v3 .pcard-v3__img:hover img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .art-body--v3 .pcard-v3__img img { transition: none; }
  .art-body--v3 .pcard-v3__img:hover img { transform: none; }
}
.art-body--v3 .pcard-v3__body {
  display: flex; flex-direction: column;
  margin: 0; min-width: 0;
}
.art-body--v3 .pcard-v3__brand {
  display: block;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass); font-weight: 700;
  margin-bottom: 6px;
}
.art-body--v3 .pcard-v3__name {
  font-family: var(--display); font-weight: 600;
  font-size: 22px; line-height: 1.2;
  color: var(--ink);
  margin: 0 0 12px 0;
}
.art-body--v3 .pcard-v3__name a {
  color: inherit; text-decoration: none;
}
.art-body--v3 .pcard-v3__name a:hover { color: var(--brass-hi); }
.art-body--v3 .pcard-v3__notes {
  font-family: var(--serif); font-size: 15.5px; line-height: 1.55;
  color: var(--paper-2);
  margin: 0 0 18px 0;
  max-width: 52ch;
}
.art-body--v3 .pcard-v3__cta {
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline; gap: 14px;
  padding: 12px 18px;
  background: var(--amber);
  color: #1a0e05;
  text-decoration: none;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  align-self: start;
  margin-top: auto;
  transition: background 160ms ease, transform 200ms ease;
}
.art-body--v3 .pcard-v3__cta:hover { background: var(--amber-hi); }
.art-body--v3 .pcard-v3__cta:active { transform: translateY(1px); }
.art-body--v3 .pcard-v3__price {
  font-size: 14px; letter-spacing: 0.04em; font-weight: 700;
  padding-right: 12px; border-right: 1px solid rgba(26,14,5,0.25);
}
.art-body--v3 .pcard-v3__cta-text {
  font-size: 11px;
}
.art-body--v3 .pcard-v3__arr { font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .art-body--v3 .pcard-v3__cta { transition: none; }
}

/* Belt-and-braces: also hide the OLD .product-card stack since v3 only
   emits .pcard-v3, but cached pages from older builds may still ship the
   legacy markup until the deploy lands. */
.art-body--v3 .product-card { display: none; }

/* ============================================================
   Author page — /author/trevor-kaak/
   ============================================================ */
.auth-hero {
  background: linear-gradient(180deg, var(--bg, #0d0a08) 0%, var(--bg-2, #1c1814) 100%);
  border-bottom: 1px solid var(--rule-2, rgba(255,255,255,0.08));
}
.auth-hero-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: center;
  padding-block: clamp(56px, 7vw, 96px);
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 40px);
}
@media (max-width: 720px) {
  .auth-hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: left;
  }
}
.auth-portrait {
  width: 280px; height: 280px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--brass);
  box-shadow: 0 24px 48px -24px rgba(0,0,0,0.7);
  justify-self: end;
}
@media (max-width: 720px) {
  .auth-portrait { width: 240px; height: 240px; justify-self: start; }
}
.auth-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auth-eyebrow {
  display: block;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--brass); font-weight: 600;
  margin-bottom: 14px;
}
.auth-name {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05; letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px 0;
}
.auth-role {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--paper-3);
  font-weight: 500; margin: 0;
}

.auth-body { padding-block: clamp(48px, 6vw, 80px); }
.auth-col {
  max-width: 720px;
  margin: 0 auto;
  padding-inline: 24px;
  font-family: var(--serif);
  font-size: 19px; line-height: 1.7;
  color: var(--ink-2);
}
@media (max-width: 720px) {
  .auth-col { font-size: 18px; line-height: 1.65; }
}
.auth-col h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(26px, 2.4vw, 32px);
  line-height: 1.22; letter-spacing: -0.012em;
  color: var(--ink);
  margin-block: 64px 16px;
}
.auth-col p { margin-bottom: 24px; }
.auth-col p:last-child { margin-bottom: 0; }
.auth-col p a { color: var(--amber); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.auth-col p a:hover { color: var(--amber-hi); }
.auth-col code {
  font-family: var(--mono); font-size: 0.92em;
  background: rgba(201,133,73,0.1);
  color: var(--brass); padding: 1px 6px; border-radius: 2px;
}
.auth-col .lede-graf {
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 26px);
  line-height: 1.36; color: var(--ink);
  font-style: italic;
  margin-bottom: 32px;
}
.auth-col .lede-graf::first-letter { font-size: 1em; padding: 0; float: none; color: inherit; }

.auth-creds {
  list-style: none; padding: 0; margin: 32px 0 0 0;
  display: grid; gap: 16px;
}
.auth-creds li {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  padding: 16px 18px;
  background: var(--bg-2, #1c1814);
  border-left: 2px solid var(--brass);
  border-radius: 0 2px 2px 0;
  align-items: baseline;
}
@media (max-width: 600px) {
  .auth-creds li { grid-template-columns: 1fr; gap: 4px; }
}
.auth-creds li span {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass); font-weight: 700;
}
.auth-creds li {
  font-family: var(--serif); font-size: 15.5px; line-height: 1.55;
  color: var(--paper-2);
}

.auth-stack {
  display: grid; gap: 12px; margin: 24px 0 16px 0;
}
.auth-stack__row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 18px 22px;
  background: var(--bg-2, #1c1814);
  border-left: 2px solid var(--oxblood);
  border-radius: 0 2px 2px 0;
  text-decoration: none !important;
  color: inherit;
  transition: background 160ms ease, border-left-color 200ms ease;
}
.auth-stack__row * { text-decoration: none !important; }
.auth-stack__row:hover {
  background: rgba(201,133,73,0.08);
  border-left-color: var(--amber);
}
@media (max-width: 720px) {
  .auth-stack__row { grid-template-columns: 1fr auto; row-gap: 6px; padding: 16px 18px; }
  .auth-stack__kicker { grid-column: 1 / 2; }
  .auth-stack__arr { grid-row: 1; grid-column: 2; align-self: center; }
  .auth-stack__name, .auth-stack__note { grid-column: 1 / 3; }
}
.auth-stack__kicker {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brass); font-weight: 700;
}
.auth-stack__name {
  font-family: var(--display); font-size: 17px; font-weight: 600;
  color: var(--ink); line-height: 1.25;
}
.auth-stack__note {
  font-family: var(--serif); font-size: 14.5px; line-height: 1.5;
  color: var(--paper-2);
  grid-column: 1 / 3;
  margin-top: 4px;
}
@media (max-width: 720px) {
  .auth-stack__note { grid-column: 1 / 3; }
}
.auth-stack__arr {
  font-family: var(--mono); color: var(--amber);
  font-size: 16px; font-weight: 700;
  grid-row: 1 / 3;
  align-self: center;
}

.auth-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin: 24px 0 0 0;
}
@media (max-width: 600px) {
  .auth-grid { grid-template-columns: 1fr; }
}
.auth-grid__card {
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  background: var(--bg-2, #1c1814);
  border-radius: 2px; overflow: hidden;
  transition: transform 240ms ease;
}
.auth-grid__card:hover { transform: translateY(-2px); }
.auth-grid__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.auth-grid__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auth-grid__kicker {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--brass); font-weight: 700;
  margin: 14px 16px 6px 16px;
}
.auth-grid__title {
  font-family: var(--display); font-weight: 600;
  font-size: 17px; line-height: 1.28; color: var(--ink);
  margin: 0 16px 18px 16px;
}

@media (prefers-reduced-motion: reduce) {
  .auth-stack__row, .auth-grid__card { transition: none; }
  .auth-grid__card:hover { transform: none; }
}

/* ============================================================
   v3 SIDEBAR — sticky 100vh on desktop ≥1024px.
   Mobile and tablet keep single-column (sidebar hidden).
   ============================================================ */
.art-grid-v3 { display: block; }
.art-side-v3 { display: none; }

@media (min-width: 1024px) {
  /* Override the single-column constraints from the v3 reset block. */
  .art-body--v3 { padding-inline: 0; }
  .art-body--v3 .art-col {
    max-width: none;        /* let the grid set the width */
    margin: 0;
    padding-inline: 0;
  }
  .art-body--v3 .prose { font-size: 19px; line-height: 1.7; }

  .art-grid-v3 {
    display: grid;
    grid-template-columns: minmax(0, 780px) 300px;
    gap: 64px;
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: 32px;
    align-items: start;
  }
  .art-side-v3 {
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 4px 24px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-2) transparent;
  }
  .art-side-v3::-webkit-scrollbar { width: 4px; }
  .art-side-v3::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 2px; }
}

/* Generous-column container at ≥1280px so the article doesn't lock to 780 */
@media (min-width: 1280px) {
  .art-grid-v3 {
    grid-template-columns: minmax(0, 800px) 300px;
    gap: 72px;
    max-width: 1240px;
  }
}

/* ---- Sidebar modules (v3) ---- */

.side-v3-card {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.side-v3-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.side-v3-card__h {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--brass); font-weight: 700;
  margin: 0 0 14px 0;
}
.side-v3-card__eyebrow {
  display: block;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--amber); font-weight: 700;
  margin-bottom: 10px;
}

/* TOC — reuse existing .side-toc__item but ensure block layout */
.art-side-v3 .side-card--toc { padding-bottom: 0; border: none; }
.art-side-v3 .side-card__h { margin: 0 0 14px 0; }

/* Products */
.side-v3-product {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.side-v3-product:first-of-type { border-top: none; padding-top: 4px; }
.side-v3-product:hover { background: rgba(154,58,23,0.04); }
.side-v3-product__img {
  width: 60px; height: 60px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg-2);
  display: block;
}
.side-v3-product__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-v3-product__body {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.side-v3-product__brand,
.side-v3-product__name,
.side-v3-product__price {
  display: block;
}
.side-v3-product__brand {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--stone); font-weight: 600;
}
.side-v3-product__name {
  font-family: var(--display); font-size: 14.5px; line-height: 1.25;
  color: var(--ink); font-weight: 600;
}
.side-v3-product__price {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--amber); font-weight: 700; margin-top: 4px;
}
.side-v3-product__price .arr { margin-left: 4px; }

/* Related */
.side-v3-related {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.side-v3-related:first-of-type { border-top: none; padding-top: 4px; }
.side-v3-related:hover { background: rgba(154,58,23,0.04); }
.side-v3-related__thumb {
  width: 80px; height: 45px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg-2);
  display: block;
}
.side-v3-related__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-v3-related__body {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.side-v3-related__kicker,
.side-v3-related__title,
.side-v3-related__meta { display: block; }
.side-v3-related__kicker {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brass); font-weight: 600;
}
.side-v3-related__title {
  font-family: var(--display); font-size: 14px; line-height: 1.3;
  color: var(--ink); font-weight: 600; margin-top: 2px;
}
.side-v3-related__meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--stone); margin-top: 4px;
}

/* Subscribe in sidebar */
.side-v3-card--subscribe p {
  font-family: var(--serif); font-size: 14px; line-height: 1.5;
  color: var(--paper-2);
  margin: 0 0 12px 0;
}