/* ============================================================
   The Ringlio Brief — marketing edition.
   The site IS a Brief: paper, ink, hairline rules, Playfair
   display, mono kickers. Loud only in print's own vocabulary.
   ============================================================ */

:root {
  --ink: #14171A;
  --ink-2: #2F343A;
  --ink-3: #5F6770;
  --ink-4: #595F66;   /* darkened from #6E747B → ≥4.5:1 on the #F1EBDC paper (a11y) */
  --ink-5: #B5BAC0;
  --folio-h: 74px;   /* clears the floating pill nav (top 14 + ~50 tall + gap) */

  --paper: #F1EBDC;
  --paper-bright: #F8F3E5;
  --paper-cool: #E8E2D2;
  --paper-edge: #DDD4BD;

  --rule: #2C2A26;
  --rule-soft: rgba(20, 23, 26, 0.18);
  --rule-soft-2: rgba(20, 23, 26, 0.08);

  --blue: #3D5AFE;
  /* per-section figure accents (used by Specimen editions + clipped state) */
  --gold: #755E1A;
  --green: #0E6E4E;

  --serif: 'Playfair Display', 'Times New Roman', Times, serif;
  --serif-text: 'Source Serif 4', Georgia, serif;
  --sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --gutter: clamp(20px, 4vw, 44px);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; background: transparent; border: 0; color: inherit; }

/* Native smooth-scroll only when Lenis is NOT driving (no-JS / reduced motion).
   Lenis forces scroll-behavior:auto via .lenis-smooth below — the two must
   never both be live or wheel scrolling stutters and fights itself. */
html { scroll-behavior: smooth; }
body { overflow-x: clip; }
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* ─── Lenis required recipe (no stylesheet shipped, so inline it) ───
   Anchor the scroll-behavior override on `html.lenis` (always present once
   Lenis instantiates) rather than `.lenis-smooth`, which this build doesn't
   reliably apply — otherwise native smooth-scroll keeps fighting Lenis. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body.late { --paper: #EFE7D4; --paper-bright: #F6EFDC; }

::selection { background: var(--blue); color: var(--paper-bright); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.paper-texture {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: 0.5; mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.012) 0, rgba(0,0,0,0.012) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.012) 0, rgba(0,0,0,0.012) 1px, transparent 1px, transparent 3px);
}

/* ─── The C: mark ─── */
.cmark { width: 18px; height: 11px; fill: var(--blue); flex-shrink: 0; }
.cmark--prompt { width: 22px; height: 13px; }
.cmark--lg { width: 34px; height: 20px; }
.endmark {
  display: inline-block; width: 12px; height: 7px; margin-left: 4px;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 134 80'%3E%3Cpath d='M66 0H40C17.9 0 0 17.9 0 40s17.9 40 40 40h26V56H42c-8.8 0-16-7.2-16-16s7.2-16 16-16h24z'/%3E%3Crect x='80' y='2' width='28' height='32' rx='6'/%3E%3Crect x='80' y='46' width='28' height='32' rx='6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 134 80'%3E%3Cpath d='M66 0H40C17.9 0 0 17.9 0 40s17.9 40 40 40h26V56H42c-8.8 0-16-7.2-16-16s7.2-16 16-16h24z'/%3E%3Crect x='80' y='2' width='28' height='32' rx='6'/%3E%3Crect x='80' y='46' width='28' height='32' rx='6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ─── The landing hero — clean, modern, paper ─── */
.hero0 {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: calc(88px + env(safe-area-inset-top, 0px)) 0 20px; position: relative;   /* top clears the fixed pill nav + its shadow + iOS notch */
}
.hero0__main {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; text-align: center;
  padding: clamp(56px, 13vh, 150px) 0 10px;   /* sit the H1 in the upper third, not floating dead-centre */
}
.hero0__eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--blue); font-weight: 600; margin-bottom: 26px;
}
.hero0__title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(44px, 7.4vw, 100px); line-height: .98; letter-spacing: -.03em;   /* capped 120→100 to soften the cliff to section headlines */
  color: var(--ink); margin-bottom: 26px;
}
.hero0__title em { font-style: italic; font-weight: 500; color: var(--blue); }
.hero0__sub {
  font-family: var(--serif-text); font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.55; color: var(--ink-2); max-width: 56ch;
}
.hero0__cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 12px;
  align-self: center; text-decoration: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-3);
}
.hero0__cue:hover { color: var(--blue); }
.hero0__cue-line { width: 1px; height: 46px; background: var(--rule); transform-origin: top; animation: cueline 2s ease-in-out infinite; }
@keyframes cueline { 0%,100% { transform: scaleY(.35); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }

/* Entrance — clean staggered fade-up. */
.hero0__eyebrow, .hero0__title, .hero0__sub, .hero0__cue {
  opacity: 0; transform: translateY(16px);
  animation: heroup .9s cubic-bezier(.2, .7, .2, 1) forwards;
}
.hero0__eyebrow { animation-delay: .10s; }
.hero0__title   { animation-delay: .22s; }
.hero0__sub     { animation-delay: .40s; }
.hero0__cue     { animation-delay: .62s; }
@keyframes heroup { to { opacity: 1; transform: none; } }


/* ─── Page shell ─── */
.paper-shell {
  max-width: 1180px;
  margin: 0 auto;
  /* horizontal: add landscape-notch insets to the gutter so content clears
     a side notch; bottom: add the home-indicator inset */
  padding: 30px calc(var(--gutter) + env(safe-area-inset-right, 0px)) calc(80px + env(safe-area-inset-bottom, 0px)) calc(var(--gutter) + env(safe-area-inset-left, 0px));
  position: relative;
  z-index: 2;
}
.page { padding: clamp(56px, 9vh, 110px) 0 0; }
.page-rule { border-top: 1px solid var(--rule); margin-bottom: 34px; position: relative; }
.page-rule::after {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 64px; border-top: 1px solid var(--rule);
}


/* ─── Articles (lead + filed) ─── */
.lead { padding-top: 26px; min-height: 160px; }   /* a moderate reserve (was 320px) so an empty/short lead doesn't leave a dead screen */
.article { padding-top: 26px; border-top: 1px solid var(--rule-soft); margin-top: 30px; }
.kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--blue); font-weight: 600;
}
.headline {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.02; letter-spacing: -.015em;
  margin: 12px 0 14px;
}
/* an intermediate tier for the pivotal beats (film, pricing, get-a-brief) so the scale
   isn't bimodal — hero ~100 → feature ~68 → section ~54 */
.headline--feature { font-size: clamp(34px, 5.6vw, 68px); }
.headline:has(br) { line-height: 1.07; }   /* two-line headlines breathe; single-line stays tight at 1.02 */
.headline .w { opacity: 0; display: inline-block; transform: translateY(12px); }
.headline .w.on { opacity: 1; transform: none; transition: opacity .14s, transform .2s cubic-bezier(.2, .8, .3, 1); }
.deck {
  font-style: italic; font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.5; color: var(--ink-2); max-width: 56ch;
  margin-bottom: 18px;
}
.bodycols {
  column-count: 2; column-gap: 36px;
  column-rule: 1px solid var(--rule-soft-2);
  font-size: 15px; color: var(--ink-2); max-width: 920px;
}
/* Body prose streams in CHARACTER-by-character, mirroring the product's
   StreamingProse: each char is a .tw-char that fades in 120ms linear as it is
   revealed at REVEAL_CPS (see streamBody in script.js). */
.bodycols .tw-char { opacity: 0; }
.bodycols .tw-char.shown { animation: tw-char-in 120ms linear forwards; }
@keyframes tw-char-in { from { opacity: 0; } to { opacity: 1; } }
.dropcap {
  font-family: var(--serif); float: left; font-weight: 700;
  font-size: 52px; line-height: .82; padding: 5px 8px 0 0; color: var(--ink);
}
.byline {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4);
  border-top: 1px solid var(--rule-soft); margin-top: 18px; padding-top: 9px;
}
.statbox {
  float: right; width: 132px; margin: 6px 0 12px 26px;
  border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule-soft);
  padding: 10px 0 12px; text-align: center;
}
.statbox__num { font-family: var(--serif); font-weight: 700; font-size: 38px; color: var(--blue); line-height: 1; }
.statbox__lbl {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 6px; line-height: 1.6;
}
.caret {
  display: inline-block; width: 9px; height: 17px; background: var(--blue);
  vertical-align: -2px; animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero-ctas { display: flex; gap: 22px; margin-top: 40px; opacity: 0; transition: opacity .8s; }
.hero-ctas.on { opacity: 1; }
.cta {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; text-decoration: none;
  color: var(--paper-bright); background: var(--ink);
  padding: 12px 20px;
  transition: background .2s;
}
.cta:hover { background: var(--blue); }
.cta--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.cta--ghost:hover { background: var(--ink); color: var(--paper-bright); }

/* ─── Scroll reveals ─── */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .7s ease var(--d, 0s), transform .7s ease var(--d, 0s);
}
.chatdemo.evaporate { opacity: .12; transform: translateY(-10px) scale(.985); filter: grayscale(1); }
.afterword {
  max-width: 60ch; margin-top: 30px; font-size: 16.5px; color: var(--ink-2);
}
.afterword em { color: var(--ink); }

/* ─── № 007 founders ─── */
.dateline { font-family: var(--mono); font-style: normal; font-size: .78em; letter-spacing: .1em; font-weight: 600; color: var(--ink); }
.founder__frame.noimg img { display: none; }
.founder__frame.noimg .founder__mono { display: flex; }

/* ─── № 008 classifieds ───
   3 even columns with the "Wanted" notice as a full-width banner on top —
   fills cleanly with no empty grid cells (the old row-span left 3 holes). */
.classifieds {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; margin-top: 34px;
}
.ad { border: 1px solid var(--rule); padding: 18px 20px 20px; background: var(--paper-bright); }
.ad--wanted {
  border-width: 2px; grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.ad--wanted p { max-width: 60ch; }
.ad__head {
  font-family: var(--mono); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; font-weight: 600; text-align: center;
  border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 12px;
}
.ad p { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.ad--wanted p { font-size: 15px; }
.ad--wanted .cta { margin-top: auto; text-align: center; }

.colophon {
  display: flex; align-items: center; gap: 18px;
  border-top: 6px solid var(--rule); margin-top: 64px; padding-top: 20px;
}
.colophon__line { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); line-height: 2; }
.colophon a { color: var(--blue); text-decoration: none; }
.colophon a:hover { text-decoration: underline; }
body.has-cinema .cine { display: block; } /* shown on desktop; hidden on mobile below */
body.has-cinema .pressline--fallback { display: none; }
body.has-cinema #p3b { padding-top: 0; }

/* ─── Micro-interaction polish ─── */
.minibrief, .stack__item, .ad { transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s; }
.minibrief:hover, .stack__item:hover, .ad:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 0 -2px var(--rule-soft), 0 14px 28px -18px rgba(20,23,26,.45);
}
.kicker { position: relative; }
.reveal.in .kicker::after, .kicker.reveal.in::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px;
  background: var(--blue); width: 64px;
  animation: ruledraw .7s cubic-bezier(.7,0,.3,1) both;
}
@keyframes ruledraw { from { width: 0; } to { width: 64px; } }
body.show-folio .folio-indicator { opacity: 1; }

/* ─── Responsive ─── */
@media (max-width: 880px) {
  .pp__body { grid-template-columns: 1fr; }
  .pp__art--side { border-left: 0; padding-left: 0; border-top: 1px solid rgba(0,0,0,.12); padding-top: 16px; }
  .bodycols { column-count: 1; }
  .statbox { float: none; margin: 14px 0; width: 100%; max-width: 220px; }
}
@media (max-width: 600px) {
  .masthead { grid-template-columns: 1fr; gap: 4px; text-align: center; }
  .masthead__meta, .masthead__edition { text-align: center; white-space: normal; }
  .classifieds { grid-template-columns: 1fr; }
  .hero-ctas { flex-direction: column; }
}

/* Short / landscape viewports: shrink the landing hero so the "See it work" cue
   never drops below the fold. */
@media (max-height: 700px) {
  /* Top padding must still clear the fixed pill nav (~14px top + ~60px tall) even on
     short viewports — a phone with the URL bar showing trips this rule, and the old
     16px let the pill cover the hero eyebrow/headline. */
  .hero0 { padding: calc(84px + env(safe-area-inset-top, 0px)) 0 18px; }
  .hero0__main { padding: 18px 0; }
  .hero0__eyebrow { margin-bottom: 12px; }
  .hero0__title { font-size: clamp(34px, 6.2vw, 60px); margin-bottom: 16px; }
  .hero0__sub { font-size: 15px; }
  .hero0__cue-line { height: 30px; }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .compose, .reveal, .rule-top { opacity: 1 !important; transform: none !important; transition: none !important; }
  .headline .w, .bodycols .tw-char { opacity: 1 !important; transform: none !important; }
  .hero0__eyebrow, .hero0__title, .hero0__sub, .hero0__cue { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero0__cue-line { animation: none !important; }
  .filmreel__play-disc { animation: none !important; transform: none !important; }
}

/* ─── Print: the site prints like the broadsheet it is ───
   Collapse every full-viewport / sticky section so they don't print as blank
   pages, and un-hide the furniture the overture had faded out. */
@media print {
  .paper-texture, .overture, .folio-indicator, .composer, .hero-ctas,
  .wire, .dial, .tear__hint, .chatdemo, .cine, .hero0__cue, .hero0__bar { display: none !important; }
  .hero0 { min-height: 0 !important; padding: 0 !important; }
  .hero0__main { padding: 0 0 24px !important; min-height: 0 !important; }
  html, body { background: #fff; }
  :root { --paper: #fff; --paper-bright: #fff; --blue: #3D5AFE; }
  .compose, .reveal, .headline .w, .bodycols .tw-char { opacity: 1 !important; transform: none !important; }
  .page, .interstitial { padding-top: 28px; min-height: 0; }
  a { color: inherit; text-decoration: none; }
}

/* ════════════════════════════════════════════════════════════
   LIVING BROADSHEET — foundation (nav, raking light, primitives)
   ════════════════════════════════════════════════════════════ */

/* anchor offset under the fixed folio bar */
section[id] { scroll-margin-top: var(--folio-h); }

/* ─── Raking light: a warm press-room glow from the top-left ─── */
.rake {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(110% 70% at 16% -12%, rgba(255,250,234,0.55), transparent 56%),
    radial-gradient(90% 60% at 92% 108%, rgba(0,0,0,0.03), transparent 60%);
  mix-blend-mode: soft-light;
}

/* ─── The Folio Bar — floating liquid-glass pill nav (always visible) ─── */
.folionav {
  position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 100;
  width: max-content; max-width: calc(100vw - 24px);
  border-radius: 999px;
  background: rgba(252, 250, 246, 0.58);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
  backdrop-filter: blur(22px) saturate(185%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 10px 30px -10px rgba(20, 23, 26, 0.28),
    0 2px 8px -3px rgba(20, 23, 26, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(20, 23, 26, 0.05);
  opacity: 1; transform: translateX(-50%); pointer-events: auto;
  transition: opacity .4s ease, transform .4s ease;
  animation: folionav-in .7s cubic-bezier(.5,0,.2,1);
}
@keyframes folionav-in { from { opacity: 0; transform: translateX(-50%) translateY(-14px); } }
/* fade away during the overture's dim "press File it" beat, then return */
body.overture-dim .folionav { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-8px); }
/* Mobile: slide the pill up out of the way while scrolling down (revealed on scroll up
   and near the top) so it never covers the content being read. JS toggles .is-hidden on touch. */
.folionav.is-hidden { transform: translateX(-50%) translateY(-160%); opacity: 0; pointer-events: none; }
.folionav__inner {
  position: relative; display: flex; align-items: center; gap: 6px;
  padding: 7px 7px 7px 18px;
}
.folionav__brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); margin-right: 16px; }
.folionav__brand .cmark { width: 18px; height: 11px; }
.folionav__name { font-family: var(--serif); font-weight: 700; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; }
.folionav__name em { font-style: italic; font-weight: 500; color: var(--blue); }
.folionav__depts { display: flex; align-items: center; gap: 2px; }
.folionav__depts a {
  position: relative; display: inline-flex; align-items: center;
  padding: 7px 13px; border-radius: 999px;
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: -.005em;
  color: var(--ink-3); text-decoration: none; white-space: nowrap;
  transition: color .2s, background .2s;
}
.folionav__depts a:hover { color: var(--ink); background: rgba(20, 23, 26, 0.05); }
.folionav__depts a.active { color: var(--ink); background: rgba(61, 90, 254, 0.10); }
.folionav__cta {
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -.005em;
  color: var(--paper-bright); background: var(--ink); border-radius: 999px;
  padding: 9px 18px; text-decoration: none; white-space: nowrap;
  transition: background .25s, transform .15s;
}
.folionav__cta:hover { background: var(--blue); }
.folionav__cta:active { transform: scale(.97); }
.folionav__toggle { display: none; width: 38px; height: 38px; border-radius: 999px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.folionav__toggle span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s; }

/* ─── Shared motion primitives ─── */
.draw { transform: scaleX(0); transform-origin: left center; }
.draw.in { transform: scaleX(1); transition: transform .9s cubic-bezier(.7,0,.3,1) var(--d,0s); }

/* ─── Folio pill — mobile contents dropdown (glass) ─── */
@media (max-width: 860px) {
  .folionav__depts { display: none; }
  .folionav__cta { padding: 9px 14px; }
  .folionav__toggle { display: flex; }
  .folionav.open .folionav__depts {
    display: flex; flex-direction: column; gap: 2px; align-items: stretch;
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; padding: 6px;
    background: rgba(252, 250, 246, 0.72);
    -webkit-backdrop-filter: blur(22px) saturate(185%);
    backdrop-filter: blur(22px) saturate(185%);
    border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 18px;
    box-shadow: 0 18px 44px -16px rgba(20,23,26,.34), inset 0 1px 0 rgba(255,255,255,.6);
  }
  .folionav.open .folionav__depts a { padding: 11px 14px; border-radius: 12px; font-size: 14px; color: var(--ink); }
  .folionav.open .folionav__depts a:hover, .folionav.open .folionav__depts a.active { background: rgba(20,23,26,0.05); }
  .folionav.open .folionav__toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .folionav.open .folionav__toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
}
@media (max-width: 440px) {
  .folionav__name { display: none; }   /* keep just the C: mark to fit brand + CTA + burger */
}

@media (prefers-reduced-motion: reduce) {
  .rake { opacity: .6; }
  .draw { transform: none !important; }
  .folionav { animation: none; }
}
@media print { .folionav, .rake { display: none !important; } }




/* ═══════════ № 005 · THE FILM — framed launch-film plate ═══════════
   The launch film (assets/launch-film.html) is itself paper-editorial (same
   palette, type and mastheads as this page), so to keep it READING as a film —
   not page content — it's presented as a framed plate: a bordered 16:9 screen
   with a title-card poster, a centred play disc, a runtime badge, and an
   editorial cutline. Click to play (the iframe's ~3.7 MB loads only then; see
   components.js). No dark chrome, no theatre dressing — the press, with a film. */
.page--film .page-rule { margin-bottom: 26px; }

.filmreel {
  width: 100%;                 /* fill the content column (bigger than the old 1080px cap) — never wider, so it stays aligned with the kicker/headline/page-rule */
  margin: 22px auto 0;
}
.filmreel__plate {
  position: relative;
  border: 6px solid var(--ink);                    /* a real black frame — unmistakably a film */
  background: var(--paper);
  box-shadow: 8px 10px 0 rgba(20, 23, 26, 0.08);   /* letterpress offset — ink, no glow */
}
.filmreel__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--paper);
  overflow: hidden;
}
.filmreel__frame,
.filmreel__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.filmreel__poster { object-fit: cover; object-position: center; transition: opacity .5s ease; }
.filmreel__frame[hidden] { display: none; }

/* runtime badge — the classic 'this is a video' duration pill; stays as a quiet
   watermark even while the film plays. */
.filmreel__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--ink);
  background: var(--paper-bright);
  border: 1px solid var(--ink);
}
.filmreel__badge svg { width: 9px; height: 9px; fill: var(--blue); }

/* centred play affordance — a paper disc + ink ▶, the universal video cue. */
.filmreel__play {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  /* a soft paper wash so the disc + label pop off the title card */
  background: radial-gradient(closest-side, rgba(241, 235, 220, 0.60), rgba(241, 235, 220, 0) 80%);
  border: 0;
  cursor: pointer;
  transition: opacity .4s ease;
}
.filmreel__play-disc {
  display: grid;
  place-items: center;
  width: clamp(80px, 8vw, 104px);
  height: clamp(80px, 8vw, 104px);
  padding-left: 5px;                 /* optically centre the triangle */
  color: var(--paper-bright);        /* the ▶ — paper, on the blue disc */
  background: var(--blue);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 5px 0 rgba(20, 23, 26, 0.16);
  transition: transform .15s ease, box-shadow .15s ease;
  animation: filmpulse 2.6s ease-in-out infinite;   /* a quiet "press me" breath (reduced-motion off) */
}
@keyframes filmpulse {
  0%, 100% { transform: translateY(0);    box-shadow: 4px 5px 0 rgba(20, 23, 26, 0.16); }
  50%      { transform: translateY(-3px); box-shadow: 4px 9px 0 rgba(20, 23, 26, 0.20); }
}
.filmreel__play-disc svg { width: 30px; height: 30px; }
.filmreel__play:hover .filmreel__play-disc { animation-play-state: paused; transform: translateY(-2px); box-shadow: 4px 8px 0 rgba(20, 23, 26, 0.20); }
.filmreel__play:focus-visible { outline: none; }
.filmreel__play:focus-visible .filmreel__play-disc { outline: 2px solid var(--blue); outline-offset: 4px; }
.filmreel__play-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
  color: var(--ink);
}
.filmreel__play-label small {
  display: block;
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--ink-3);
}

/* once playing, the poster + play disc step aside; the runtime badge stays. */
.filmreel.is-playing .filmreel__poster,
.filmreel.is-playing .filmreel__play { opacity: 0; pointer-events: none; }

/* editorial cutline — names it a film, like a photo credit under a plate. */
.filmreel__cutline {
  margin-top: 13px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .03em;
  line-height: 1.5;
  color: var(--ink-3);
}
.filmreel__cutline-mark { color: var(--blue); margin-right: 5px; }
.filmreel__cutline-credit { color: var(--ink-4); }

@media (max-width: 700px) {
  .filmreel__plate { border-width: 3px; box-shadow: 4px 5px 0 rgba(20, 23, 26, 0.07); }
  .filmreel__play-label { font-size: 10px; }
  .filmreel__cutline { font-size: 10px; }
}

/* The two founders sit side by side. The mount had lost its grid, so the
   figures were stacking full-width — each 4:5 portrait blew up to the entire
   content width (~1092px). Restore the two-up grid and cap each portrait to a
   tasteful feature size. */
#founders-mount {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
  margin-top: 32px;
}
.fdr {
  margin: 0;
  min-width: 0;            /* let grid tracks shrink — no horizontal overflow */
  max-width: 340px;        /* keep the portrait a portrait, not a hero image */
  justify-self: center;
}
@media (max-width: 720px) {
  #founders-mount { grid-template-columns: 1fr; gap: 40px; }
}

/* ── The print frame ── */
.fdr__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--rule-soft);
  background: var(--paper-cool);
  box-shadow: inset 0 0 0 1px var(--rule-soft-2);   /* faint plate impression */
}

/* The founder photograph — a plain, full photo. (The halftone / duotone-ink
   "newspaper" treatment, its canvas dot-plate, print texture, registration
   ticks and PROOF·HALFTONE label were all removed.) */
.fdr__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  display: block;
  filter: saturate(0.7);   /* dull the colours a little — the source photos run a touch vibrant */
}
/* Ethan's source is a 16:9 stage shot, so cover leaves extra headroom/stage and
   he sits smaller in frame than Tane. A slight scale-up removes that headroom so
   he fills the 4:5 frame head-to-feet, matching Tane's framing. transform-origin
   is biased down so his feet stay in frame. */
.fdr__img--wide {
  object-position: 38% 22%;
  transform: scale(1.2);
  transform-origin: 50% 60%;
}

/* ── onerror fallback: monogram on paper ── */
.fdr__mono {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(48px, 18vw, 64px);
  color: var(--ink-3);
}
.fdr__frame.is-noimg .fdr__img { display: none; }
.fdr__frame.is-noimg .fdr__mono { display: flex; }

/* ── The newspaper byline caption ── */
.fdr figcaption {
  padding-top: 14px;
  border-top: 3px solid var(--ink);
  margin-top: 14px;
}
.fdr__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.06;
  color: var(--ink);
}
.fdr__role {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
  margin: 5px 0 10px;
}
.fdr__bio {
  font-family: var(--serif-text);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
@media (max-width: 400px) {
  .fdr__name { font-size: 21px; }
}

/* the production-line stage must stick within the full 360vh section, not this wrapper */
#pline-track { display: contents; }


/* ── Review fixes: focus rings, sticky clearance under the folio bar ── */
.folionav a:focus-visible, .folionav button:focus-visible,
.hero0__brand:focus-visible, .hero0__cue:focus-visible,
.cta:focus-visible, #file-btn:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 1px;
}
.spec__tab:focus-visible, .brief-clip:focus-visible, .brief-retract:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 1px;
}

/* ═══════════════════════════════════════════════════════════════════
   PRODUCT-GRADE BRIEFS — headline figures, editorial photos, the
   composing/"press is running" animation, and the Specimen editions.
   Mirrors the live product (brief.css): one figure + hero + depth-meter
   vocabulary, shared by the live composer columns and the demos.
   Each brief may set --fig-accent to re-colour its figure + underline.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Headline accent: *word* inside a headline inks the accent colour ── */
.headline em, .article__title em, .dbrief__head em { font-style: italic; color: var(--fig-accent, var(--blue)); }

/* ── Inked headline underline (draws itself on a fresh column) ── */
.headline-underline { display: block; width: 54%; max-width: 320px; height: 8px; margin: 2px 0 12px; color: var(--fig-accent, var(--blue)); opacity: .7; overflow: visible; }
.headline-underline path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: none; stroke-dashoffset: 0; }
.article.is-fresh .headline-underline path, .dbrief.is-fresh .headline-underline path {
  stroke-dasharray: 300; stroke-dashoffset: 300; animation: ink-draw 1100ms cubic-bezier(.22,1,.36,1) 320ms forwards;
}
@keyframes ink-draw { to { stroke-dashoffset: 0; } }

/* ── Headline figure (the big gold/cobalt stat that breaks the body) ── */
.brief-fig {
  clear: both; margin: 18px 0; padding: 14px 0;
  border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s;
}
.brief-fig.on { opacity: 1; transform: none; }
.brief-fig__val {
  font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 4vw, 56px);
  line-height: .88; letter-spacing: -.025em; color: var(--fig-accent, var(--blue));
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}
.brief-fig__lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); line-height: 1.4; max-width: 22em;
}
.brief-fig__trend {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 3px 7px; border: 1px solid currentColor; color: var(--fig-accent, var(--blue));
  border-radius: 999px; align-self: center; white-space: nowrap;
}

/* ── Editorial photo on the page (the hero figure) ── */
.brief-hero {
  position: relative; clear: both; margin: 4px 0 18px; aspect-ratio: 16 / 9;
  border: 1px solid var(--paper-edge); overflow: hidden; background: var(--paper-cool);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.brief-hero img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.94) contrast(1.02) sepia(.06); }
.brief-hero figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px;
  background: linear-gradient(to top, rgba(20,23,26,.80), rgba(20,23,26,0));
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: #F6F1E3; display: flex; justify-content: space-between; gap: 16px; align-items: flex-end;
}
.brief-hero figcaption .right { color: rgba(248,243,229,.7); flex: none; }
/* fresh reveal: a paper curtain wipes down, the photo settles in */
.brief-hero { --curtain: 0; }
.brief-hero::after {
  content: ''; position: absolute; inset: 0; background: var(--paper-bright);
  transform: translateY(calc(var(--curtain) * 100%)); transition: transform .9s cubic-bezier(.7,0,.2,1);
}
.brief-hero.is-open::after { transform: translateY(100%); }
.brief-hero img { transition: transform 1.1s cubic-bezier(.2,.8,.3,1), filter 1.1s; }
.brief-hero:not(.is-open):not(.static) img { transform: scale(1.06); filter: saturate(.94) contrast(1.02) sepia(.06) blur(6px); }

/* ── Composing ("thinking") state — mirrors the product. A draft-title "reel"
   scrolls the product's draft pool under a light motion blur and decelerates
   (ease-out-quint) onto the column, while a single highlight sweeps a thin
   composing bar. Replaces the old depth-meter + draft-flicker.
   (Reel logic: compose() in script.js, after the product's AnimatedTitle,
   Brief.tsx:1540-1686. Bar: press-run, brief.css:1197-1205.) ── */
.brief-compose {
  position: relative; height: 3px; max-width: 230px; margin: 13px 0 15px;
  background: var(--paper-edge); overflow: hidden; border-radius: 2px;
}
.brief-compose__bar {
  position: absolute; top: 0; bottom: 0; left: 0; width: 32%;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  animation: press-run 1.4s ease-in-out infinite;
}
@keyframes press-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }
.headline.is-composing { color: var(--ink-5); }
/* The reel is a full-column-width viewport whose height is RESERVED to the real
   (wrapped) title (--reel-h, set per-compose in JS). Every cell is that tall, so
   the drafts scroll and the title — the FINAL cell — lands filling the viewport,
   wrapped to the column. Nothing is ever an unwrapped line, so nothing overflows. */
.headline.is-composing .reel { display: block; width: 100%; overflow: hidden; height: var(--reel-h, 1.1em); }
.headline.is-composing .reel__row { display: block; will-change: transform, filter; }
/* each cell is reserved to the title's (possibly 2-line) height; drafts sit
   centred in the slot so the slow landing never shows a line floating with a
   gap below it. */
.headline.is-composing .reel__item { display: flex; flex-direction: column; justify-content: center; height: var(--reel-h, 1.1em); white-space: normal; overflow: hidden; }
/* the final reel item is the REAL title — full ink (vs the dim drafts) and
   top-aligned so it fills the slot exactly where the plain <h2> will sit. */
.headline.is-composing .reel__item--title { color: var(--ink); justify-content: flex-start; }

/* Title develop — once the reel decelerates, the real (wrapped) headline
   develops in place: a clean fade + slight rise. NEVER scales past its final
   size (so it can't overshoot the plate edge) and carries NO glow. */
.headline.is-settling {
  animation: title-develop 620ms cubic-bezier(.2, .7, .2, 1) both;
  transform-origin: left top;
}
@keyframes title-develop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .headline.is-settling { animation: none; } }

/* ── Brief actions row (sources pill + clip / retract) ── */
.brief-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; opacity: 0; transition: opacity .5s; }
.brief-actions.on { opacity: 1; }
.brief-srcs, .brief-clip, .brief-retract {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px;
}
.brief-srcs { color: var(--ink-3); border: 1px solid var(--rule-soft); border-radius: 999px; padding: 5px 11px; background: var(--paper-bright); }
.brief-srcs b { color: var(--ink-2); font-weight: 600; }
.brief-clip, .brief-retract { color: var(--ink-4); background: none; border: 0; cursor: pointer; transition: color .2s; }
.brief-clip:hover { color: var(--blue); }
.brief-clip.is-clipped { color: var(--gold); }
.brief-retract { margin-left: auto; }
.brief-retract:hover { color: #B5482B; }

/* ═══ SPECIMEN EDITIONS — pre-made demos of a real customer Brief ═══ */
.spec { padding: 0 var(--gutter) 30px; }
.spec__intro { max-width: 760px; }
.spec__lead { font-family: var(--serif-text); font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; color: var(--ink-2); margin: 6px 0 22px; }
.spec__tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 0; }
.spec__tab {
  position: relative; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); background: none; border: 0; padding: 12px 16px 13px; cursor: pointer; transition: color .2s;
}
/* Brand-tint: the number carries each edition's accent in every state (a little colour
   row — green 01, gold 02, maroon 03, orange 04, pink 05), distinct without failing the
   small-text contrast that tinting the label would. The active tab takes the brand on its
   label + underline. --tab-accent is set per tab in script.js (single source: EDITIONS[].accent). */
.spec__tab .num { color: var(--tab-accent, var(--ink-3)); margin-right: 7px; font-weight: 600; }
.spec__tab:hover { color: var(--ink-2); }
.spec__tab.is-on { color: var(--tab-accent, var(--ink)); }
.spec__tab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--tab-accent, var(--blue)); }
/* Swipe affordance — only injected on touch devices (JS), so this needs no media query. */
.spec__swipe-hint { text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin: 2px 0 14px; }
/* The paper is THEMED per edition via --spec-* vars (set by [data-vibe] below),
   each falling back to the site's paper-editorial defaults. So every specimen
   reads as a different brand's paper — its own stock, ink, type and masthead. */
.spec__paper {
  border: 1px solid var(--spec-rule, var(--rule)); border-top: 0;
  background: var(--spec-paper, var(--paper-bright));
  color: var(--spec-ink-2, var(--ink-2));
  box-shadow: 0 1px 0 var(--rule-soft), 0 22px 44px -30px rgba(20,23,26,.5);
  padding: clamp(20px, 3vw, 40px);
  transition: background .45s ease, color .45s ease, border-color .45s ease;
}
.spec__masthead { text-align: center; border-bottom: 3px double var(--spec-rule, var(--rule)); padding-bottom: 14px; margin-bottom: 22px; }
.spec__mast-eyebrow { font-family: var(--mono); font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--spec-ink-4, var(--ink-4)); }
.spec__mast-title { font-family: var(--spec-mast-font, var(--serif)); font-weight: 800; font-size: clamp(28px, 4vw, 46px); line-height: 1; letter-spacing: -.01em; color: var(--spec-ink, var(--ink)); margin: 6px 0 8px; }
.spec__mast-rule { display: flex; justify-content: center; gap: 18px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--spec-ink-3, var(--ink-3)); }
.spec__mast-rule .dot { color: var(--fig-accent, var(--blue)); }
.spec__body { display: grid; grid-template-columns: 1.5fr 1fr 0.9fr; gap: 30px; align-items: start; }
.spec__col { min-width: 0; }
.spec__col--rail { border-left: 1px solid var(--spec-rule-soft, var(--rule-soft)); padding-left: 24px; }
.spec__sep { border: 0; border-top: 1px solid var(--spec-rule-soft, var(--rule-soft)); margin: 24px 0; }

/* the demo brief — same furniture as a live column, but static */
.dbrief { min-width: 0; }
.dbrief__kicker { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fig-accent, var(--blue)); font-weight: 600; }
.dbrief__kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fig-accent, var(--blue)); display: inline-block; margin-right: 8px; }
.dbrief__kicker .time { color: var(--spec-ink-4, var(--ink-4)); font-weight: 400; }
.dbrief__head { font-family: var(--spec-head-font, var(--serif)); font-weight: 700; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.04; letter-spacing: -.012em; color: var(--spec-ink, var(--ink)); margin: 9px 0 0; }
.dbrief--side .dbrief__head { font-size: clamp(19px, 1.9vw, 25px); }
.dbrief__body { font-family: var(--spec-body-font, var(--serif-text)); font-size: 15px; line-height: 1.62; color: var(--spec-ink-2, var(--ink-2)); margin-top: 12px; }
.dbrief__body .dropcap { font-family: var(--spec-head-font, var(--serif)); float: left; font-weight: 700; font-size: 50px; line-height: .8; padding: 6px 9px 0 0; color: var(--spec-ink, var(--ink)); }
.dbrief__byline { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--spec-ink-4, var(--ink-4)); border-top: 1px solid var(--spec-rule-soft, var(--rule-soft)); margin-top: 16px; padding-top: 9px; }
.dbrief__byline strong { color: var(--spec-ink-2, var(--ink-2)); font-weight: 600; }
.spec-rail__cap { font-family: var(--serif-text); font-style: italic; font-size: 13px; color: var(--spec-ink-3, var(--ink-3)); margin-bottom: 16px; }

/* rail: brief depth + your brief + also on file (mirrors the live product) */
.spec-rail__eyebrow { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--spec-ink-4, var(--ink-4)); display: flex; justify-content: space-between; margin-bottom: 9px; }
.spec-rail__eyebrow b { color: var(--fig-accent, var(--blue)); font-weight: 600; }
.spec-rail__depth { position: relative; height: 8px; background: var(--spec-edge, var(--paper-edge)); border-top: 1px solid var(--spec-rule-soft, var(--rule-soft)); border-bottom: 1px solid var(--spec-rule-soft, var(--rule-soft)); margin-bottom: 6px; }
.spec-rail__depth-fill { position: absolute; inset: 0 0 0 0; width: var(--depth, 100%); background: var(--fig-accent, var(--blue)); }
.spec-rail__depth-fill::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.1) 0 2px, transparent 2px 5px); }
.spec-rail__ready { font-family: var(--mono); font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--fig-accent, var(--blue)); text-align: center; }
.spec-rail__block { margin-top: 22px; }
.spec-rail__label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--spec-ink-4, var(--ink-4)); margin-bottom: 10px; }
.spec-rail__field { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--spec-ink-3, var(--ink-3)); margin-bottom: 9px; }
.spec-rail__chip { border: 1px solid var(--spec-rule-soft, var(--rule-soft)); border-radius: 4px; padding: 3px 8px; color: var(--spec-ink-2, var(--ink-2)); background: var(--spec-paper, var(--paper)); }
.spec-rail__file { font-family: var(--serif-text); font-size: 13px; line-height: 1.4; color: var(--spec-ink-2, var(--ink-2)); display: flex; gap: 8px; margin-bottom: 8px; }
.spec-rail__file::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--fig-accent, var(--blue)); margin-top: 7px; }

/* ═══════ Per-edition VIBES — each specimen is a different brand's paper ═══════
   bg / ink / rule / typefaces / masthead treatment per edition. The accent
   (--fig-accent) is set inline from the edition data. */

/* ── CLINIC (Pearl Coast Physio): calm, modern, allied-health — soft sage
      paper, a clean humanist sans, a quiet left-aligned masthead. ── */
.spec__paper[data-vibe="clinic"] {
  --spec-paper: #ECF0EC; --spec-edge: #DCE3DB;
  --spec-ink: #1E2A24; --spec-ink-2: #3B473F; --spec-ink-3: #5E6A61; --spec-ink-4: #7C887E;
  --spec-rule: #2B342D; --spec-rule-soft: rgba(30,42,36,.16);
  --spec-mast-font: var(--sans); --spec-head-font: var(--sans); --spec-body-font: var(--serif-text);
}
.spec__paper[data-vibe="clinic"] .spec__masthead { text-align: left; border-bottom: 1px solid var(--spec-rule-soft); }
.spec__paper[data-vibe="clinic"] .spec__mast-title { font-weight: 600; letter-spacing: -.025em; font-size: clamp(26px, 3.6vw, 40px); }
.spec__paper[data-vibe="clinic"] .spec__mast-rule { justify-content: flex-start; }
.spec__paper[data-vibe="clinic"] .dbrief__head { font-weight: 600; letter-spacing: -.022em; }
.spec__paper[data-vibe="clinic"] .brief-hero img { filter: saturate(.95) contrast(1.02); }

/* ── LUXE (Vantage Property): premium, architectural — cool stone paper, an
      elegant high-contrast Cormorant masthead in wide-tracked caps, gold. ── */
.spec__paper[data-vibe="luxe"] {
  --spec-paper: #EAE7E0; --spec-edge: #DAD6CC;
  --spec-ink: #1A1A1C; --spec-ink-2: #35363B; --spec-ink-3: #62636A; --spec-ink-4: #8A8B91;
  --spec-rule: #20201E; --spec-rule-soft: rgba(26,26,28,.16);
  --spec-mast-font: 'Cormorant', var(--serif); --spec-head-font: 'Cormorant', var(--serif); --spec-body-font: var(--serif-text);
}
.spec__paper[data-vibe="luxe"] .spec__masthead { border-bottom: 1px solid var(--spec-rule); padding-bottom: 16px; }
.spec__paper[data-vibe="luxe"] .spec__mast-title { font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(26px, 3.6vw, 42px); }
.spec__paper[data-vibe="luxe"] .spec__mast-eyebrow { letter-spacing: .4em; }
.spec__paper[data-vibe="luxe"] .dbrief__head { font-weight: 600; letter-spacing: 0; font-size: clamp(24px, 2.7vw, 38px); }
.spec__paper[data-vibe="luxe"] .dbrief--side .dbrief__head { font-size: clamp(21px, 2.1vw, 28px); }
.spec__paper[data-vibe="luxe"] .brief-hero img { filter: saturate(.82) contrast(1.05); }

/* ── HERITAGE (Harcourt & Vane, est. 1901): old-world broadsheet — warm ivory,
      EB Garamond in small caps, a classic double rule, oxblood accent. ── */
.spec__paper[data-vibe="heritage"] {
  --spec-paper: #F4EEDB; --spec-edge: #E4DCC2;
  --spec-ink: #241C10; --spec-ink-2: #423829; --spec-ink-3: #6C6150; --spec-ink-4: #8C8270;
  --spec-rule: #3A2E1B; --spec-rule-soft: rgba(36,28,16,.18);
  --spec-mast-font: 'EB Garamond', var(--serif); --spec-head-font: 'EB Garamond', var(--serif); --spec-body-font: 'EB Garamond', var(--serif-text);
}
.spec__paper[data-vibe="heritage"] .spec__masthead { border-top: 3px double var(--spec-rule); padding-top: 12px; }
.spec__paper[data-vibe="heritage"] .spec__mast-title { font-weight: 600; font-variant: small-caps; letter-spacing: .06em; font-size: clamp(28px, 4vw, 46px); }
.spec__paper[data-vibe="heritage"] .dbrief__head { font-weight: 600; font-variant: small-caps; letter-spacing: .015em; font-size: clamp(23px, 2.5vw, 33px); }
.spec__paper[data-vibe="heritage"] .dbrief__body { font-size: 16px; line-height: 1.66; }
.spec__paper[data-vibe="heritage"] .brief-hero img { filter: saturate(.9) sepia(.14) contrast(1.02); }

/* ── CAFÉ (Maison Hartle bakery): warm, artisanal — terracotta-cream paper,
      Fraunces' soft serif, a friendly centred masthead. ── */
.spec__paper[data-vibe="cafe"] {
  --spec-paper: #F4E7D5; --spec-edge: #E7D4BA;
  --spec-ink: #2A1C12; --spec-ink-2: #483728; --spec-ink-3: #7A6A58; --spec-ink-4: #998873;
  --spec-rule: #4A2F1B; --spec-rule-soft: rgba(42,28,18,.18);
  --spec-mast-font: 'Fraunces', var(--serif); --spec-head-font: 'Fraunces', var(--serif); --spec-body-font: var(--serif-text);
}
.spec__paper[data-vibe="cafe"] .spec__masthead { border-bottom: 2px solid var(--fig-accent, var(--rule)); }
.spec__paper[data-vibe="cafe"] .spec__mast-title { font-weight: 600; font-style: italic; letter-spacing: -.01em; font-size: clamp(28px, 4vw, 46px); }
.spec__paper[data-vibe="cafe"] .dbrief__head { font-weight: 600; letter-spacing: -.01em; }
.spec__paper[data-vibe="cafe"] .brief-hero img { filter: saturate(1.02) sepia(.06) contrast(1.01); }

/* ── STUDIO (Studio Meridian, movement/Pilates): bold, modern, minimal —
      cool off-white, Space Grotesk in tight caps, a punchy accent. ── */
.spec__paper[data-vibe="studio"] {
  --spec-paper: #EFEEEA; --spec-edge: #DEDDD7;
  --spec-ink: #15161A; --spec-ink-2: #34363D; --spec-ink-3: #62646C; --spec-ink-4: #84868E;
  --spec-rule: #18191D; --spec-rule-soft: rgba(21,22,26,.15);
  --spec-mast-font: 'Space Grotesk', var(--sans); --spec-head-font: 'Space Grotesk', var(--sans); --spec-body-font: var(--sans);
}
.spec__paper[data-vibe="studio"] .spec__masthead { text-align: left; border-bottom: 3px solid var(--fig-accent, var(--ink)); padding-bottom: 12px; }
.spec__paper[data-vibe="studio"] .spec__mast-title { font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(26px, 3.8vw, 44px); }
.spec__paper[data-vibe="studio"] .spec__mast-rule { justify-content: flex-start; }
.spec__paper[data-vibe="studio"] .dbrief__head { font-weight: 700; letter-spacing: -.02em; }
.spec__paper[data-vibe="studio"] .dbrief__body { font-size: 14.5px; line-height: 1.6; }
.spec__paper[data-vibe="studio"] .brief-hero img { filter: saturate(.98) contrast(1.04) brightness(1.02); }

@media (max-width: 920px) {
  .spec__body { grid-template-columns: 1fr; gap: 26px; }
  .spec__col--rail { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-soft); padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .brief-fig, .brief-actions { opacity: 1 !important; transform: none !important; }
  .brief-hero::after { display: none; }
  .brief-hero img { transform: none !important; filter: saturate(.94) contrast(1.02) sepia(.06) !important; }
  .article.is-fresh .headline-underline path, .dbrief.is-fresh .headline-underline path { animation: none; stroke-dashoffset: 0; }
  .brief-compose__bar { animation: none; }
}


/* ═══════════════════════════════════════════════════════════
   REBUILD 2026-06-15 — plain hero/price, how-it-works, trust band,
   ROI, testimonials, CTA+pricing (metaphor relaxed; product-first)
   ═══════════════════════════════════════════════════════════ */
/* nudge the cue so it still lands last */
.hero0__cue { animation-delay: .70s; }

/* ===== cta-pricing ===== */
/* ════════ № 008 · GET A BRIEF — closing CTA + pricing ════════
   All classes prefixed .getb to avoid collisions. Shared chrome
   (.page, .kicker, .headline, .deck, .cta, .brief-fig, .afterword,
   .reveal, .colophon) is reused as-is and not restyled here. */

.getb {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 3vw, 40px);
  margin-top: 8px;
  align-items: start;
}

/* ── (1) Free-sample offer — the primary, full-width move ── */
.getb__offer {
  grid-column: 1 / -1;
  border: 1px solid var(--rule);
  background: var(--paper-bright);
  padding: clamp(22px, 3vw, 38px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.getb__offer-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.getb__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper-bright);
  background: var(--blue);
  padding: 4px 9px;
}
.getb__offer-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--ink);
}
.getb__offer-copy {
  font-family: var(--serif-text);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 12px 0 22px;
}

/* form */
.getb__field-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.getb__field-row {
  display: flex;
  align-items: stretch;
  gap: 14px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
  flex-wrap: wrap;
}
.getb__field-input {
  flex: 1 1 240px;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
  caret-color: var(--blue);
  padding: 6px 2px;
}
.getb__field-input::placeholder { color: var(--ink-4); }
.getb__field-btn {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper-bright);
  background: var(--ink);
  border: 0;
  padding: 11px 18px;
  cursor: pointer;
  transition: background .2s;
}
.getb__field-btn:hover { background: var(--blue); }
.getb__field-input:focus-visible,
.getb__field-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.getb__field-note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--ink-4);
  margin-top: 12px;
}
.getb__field-note.is-confirmed { color: var(--green); }
.getb__field-note.is-error { color: var(--gold); }

/* ── (2) Price band ── */
.getb__price {
  grid-column: 1 / -1;
  border-top: 2px solid var(--rule);
  padding-top: clamp(20px, 2.6vw, 30px);
}
.getb__price-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--ink);
}
.getb__price-title em {
  font-style: italic;
  color: var(--blue);
}
.getb__price-note {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--ink-3);
  margin-top: 8px;
  max-width: 50ch;
}
.getb__tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(20px, 2.6vw, 28px);
}
.getb__tier {
  border: 1px solid var(--rule-soft);
  border-top: 3px solid var(--ink);
  background: var(--paper);
  padding: clamp(18px, 2.2vw, 26px);
  display: flex;
  flex-direction: column;
}
.getb__tier--alt {
  background: var(--paper-cool);
}
.getb__tier-name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--blue);
}
.getb__tier-desc {
  font-family: var(--serif-text);
  font-size: clamp(14.5px, 1.5vw, 16.5px);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 12px 0 0;
  flex: 1 1 auto;
}
.getb__tier-fig {
  margin: 18px 0 0;
  padding: 14px 0 2px;
  border-bottom: 0;       /* single rule under the figure, on-token */
}
.getb__tier-fig .brief-fig__val { font-size: clamp(28px, 3.2vw, 40px); }
.getb__tier-meta {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}
.getb__tier-metaitem {
  position: relative;
  font-family: var(--serif-text);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  border: 0;
  padding: 0 0 0 22px;
  white-space: normal;
}
.getb__tier-metaitem::before {
  content: "\2713";          /* a quiet checked feature ledger, not a wall of bordered pills */
  position: absolute; left: 0; top: 0;
  color: var(--blue); font-weight: 700;
}


/* ── (4) Secondary action ── */
.getb__close {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule-soft);
  padding-top: clamp(20px, 2.4vw, 28px);
  margin-top: 4px;
}
.getb__afterword {
  margin-top: 0;
  font-family: var(--serif-text);
}
.getb__call { flex: 0 0 auto; }

/* ── Responsive ── */
@media (max-width: 760px) {
  .getb { grid-template-columns: 1fr; }
  .getb__tiers { grid-template-columns: 1fr; }
  .getb__field-btn { flex: 1 1 100%; }
  .getb__close { flex-direction: column; align-items: flex-start; }
}


/* ═══════ AUDIT-V2 sections: Payback Ledger, founder guarantee, energised trust band, animated how-it-works, free-sample form ═══════ */
/* ---- payback-ledger ---- */
/* ════════ FOUNDER GUARANTEE card (.guar) — relocated into #p7 founders ════════
   A single signed "notice from the desk". REPLACES the old .tm* testimonials
   block. A self-contained framed-notice card (double rule, corner register
   crosses) plus the serif monogram idea from .fdr__mono, taking a
   distinctive signed-letter silhouette rather than a 3-card grid.
   Reuses shared chrome: .page / .kicker / .headline / .deck / .reveal. */

.guar {
  --guar-ink: var(--blue);
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 34px auto 8px;
  border: 2px solid var(--ink);
  background: var(--paper-bright);
  box-shadow: 6px 7px 0 rgba(20, 23, 26, 0.06);
  padding: clamp(26px, 4.4vw, 46px) clamp(22px, 4.4vw, 52px) clamp(24px, 3.6vw, 40px);
  overflow: hidden;
}
/* engraved double-rule frame — the inner hairline of a formal notice */
.guar::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--rule-soft);
  pointer-events: none;
}

/* corner register crosses (print alignment marks) */
.guar__reg {
  position: absolute;
  width: 13px; height: 13px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.5;
}
.guar__reg::before,
.guar__reg::after { content: ""; position: absolute; background: var(--ink); }
.guar__reg::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.guar__reg::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }
.guar__reg--tl { top: 12px; left: 12px; }
.guar__reg--tr { top: 12px; right: 12px; }
.guar__reg--bl { bottom: 12px; left: 12px; }
.guar__reg--br { bottom: 12px; right: 12px; }

/* ── masthead of the notice ── */
.guar__head {
  position: relative;
  text-align: center;
  margin-bottom: clamp(22px, 3vw, 32px);
}
.guar__kicker {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.guar__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 3.6vw, 32px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* the small cobalt rule under the masthead */
.guar__rule {
  display: block;
  width: 46px;
  height: 3px;
  margin: 16px auto 0;
  background: var(--guar-ink);
}

/* ── the three promises ── */
.guar__promises {
  list-style: none;
  margin: 0;
  padding: 0;
}
.guar__promise {
  position: relative;
  display: grid;
  grid-template-columns: clamp(34px, 7vw, 46px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 26px);
  align-items: start;
  padding: clamp(18px, 2.6vw, 24px) 0;
  border-top: 1px solid var(--rule-soft-2);
}
.guar__promise:first-child { border-top: 0; padding-top: 4px; }
.guar__promise:last-child  { padding-bottom: 4px; }
/* solo promise (no number column): flow the copy full-width instead of in the 46px num column */
.guar__promise--solo { display: block; border-top: 0; padding: 4px 0; text-align: center; }
.guar__promise--solo .guar__copy { max-width: 52ch; margin: 0 auto; }

.guar__num {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1;
  color: var(--guar-ink);
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  padding-top: 2px;
}
.guar__copy { min-width: 0; }
.guar__lede {
  margin: 0;
  font-family: var(--serif-text);
  font-weight: 600;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.34;
  letter-spacing: -0.006em;
  color: var(--ink);
}
.guar__note {
  margin: 7px 0 0;
  font-family: var(--serif-text);
  font-size: clamp(14.5px, 1.5vw, 16px);
  line-height: 1.52;
  color: var(--ink-2);
}

/* ── the signature block ── */
.guar__sign {
  margin-top: clamp(24px, 3.4vw, 34px);
  padding-top: clamp(20px, 2.8vw, 26px);
  border-top: 1px solid var(--rule);
}
.guar__signoff {
  margin: 0 0 18px;
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-2);
}
.guar__signers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 30px);
}
.guar__signer {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
/* tiny serif monogram — echoes the founders' .fdr__mono initials */
.guar__mark {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--paper);
}
.guar__signer-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.guar__signer-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
}
.guar__signer-role {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--guar-ink);
  font-weight: 600;
  line-height: 1.4;
}

/* ── narrow screens ── */
@media (max-width: 560px) {
  .guar__signers { grid-template-columns: 1fr; gap: 16px; }
  .guar__promise { grid-template-columns: 28px minmax(0, 1fr); gap: 14px; }
}
/* ---- howitworks-motion ---- */
/* ════════ № 003 · HOW IT WORKS — assembling reveal (.hiw2) ════════
   Layers a lightly-kinetic 3-beat over the existing static .hiw strip:
   · step 1  — document chips slide + stack in (the inputs arriving)
   · all     — a thin cobalt rule draws down the step rail, connecting them
   · step 3  — the example-answer card settles in (the finished output)
   Pure ink-and-paper motion. No SVG, no glass, no glow. One-shot via JS
   (adds .go to the .hiw2 wrapper); reduced-motion = everything just appears.
   Reuses all .hiw__* visual styling — this file only adds the motion + chips. */

/* establish the positioning context for the drawn rule */
.hiw2 { position: relative; }

/* ---- freesample-form ---- */
/* ════════════════════════════════════════════════════════════════════
   "BUILD ME ONE FREE" — free-sample form (.fs-*)
   Quiet, typeset, ruled-line inputs in the paper-editorial idiom:
   no glass, no glow, no boxy fields. Both instances share this;
   variants only nudge scale/colour.
════════════════════════════════════════════════════════════════════ */

.fs-form {
  width: 100%;
  max-width: 60ch;
  text-align: left;
}

/* Small mono label above the line (lead + getb variants) */
.fs-form__label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 9px;
}

/* The compositor's line: input + button share one ruled baseline */
.fs-row {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 14px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
  flex-wrap: wrap;
  transition: border-color .25s ease;
}
.fs-form.is-setting .fs-row { border-color: var(--blue); }

/* URL input — mono, transparent, no chrome */
.fs-url, .fs-email {
  flex: 1 1 240px;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .01em;
  color: var(--ink);
  caret-color: var(--blue);
  padding: 6px 2px;
}
.fs-url::placeholder, .fs-email::placeholder { color: var(--ink-4); opacity: 1; }

/* Button — ink slug, cobalt on hover, matching the existing getb button */
.fs-btn {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper-bright);
  background: var(--ink);
  border: 0;
  padding: 11px 18px;
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}
.fs-btn:hover { background: var(--blue); }
.fs-form.is-setting .fs-btn,
.fs-form.is-done .fs-btn { opacity: .55; pointer-events: none; }

.fs-url:focus-visible,
.fs-email:focus-visible,
.fs-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Note line — mono small-caps, states tint to green/gold */
.fs-note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  line-height: 1.55;
  color: var(--ink-4);
  margin-top: 12px;
  max-width: 52ch;
}
.fs-note.is-confirmed { color: var(--green); }
.fs-note.is-error { color: var(--gold); }
.fs-note.is-setting { color: var(--ink-3); }

/* ── The composing beat (.fs-setting) ──
   Three thin slugs that "set" with a brief depth/settle while we
   prepare the sample. Sits at the right end of the ruled line.
   Hidden until JS adds .is-setting to the wrapper. */
.fs-setting {
  position: absolute;
  right: 0;
  bottom: 10px;
  display: none;
  align-items: flex-end;
  gap: 4px;
  height: 16px;
  pointer-events: none;
}
.fs-form.is-setting .fs-setting { display: inline-flex; }
.fs-setting i {
  display: block;
  width: 4px;
  height: 5px;
  background: var(--blue);
  transform-origin: bottom center;
  opacity: .25;
  animation: fs-set 1.15s cubic-bezier(.2, .7, .2, 1) infinite;
}
.fs-setting i:nth-child(2) { animation-delay: .14s; }
.fs-setting i:nth-child(3) { animation-delay: .28s; }
@keyframes fs-set {
  0%   { transform: scaleY(.5);  opacity: .22; }
  35%  { transform: scaleY(2.6); opacity: 1; }
  70%  { transform: scaleY(1.1); opacity: .5; }
  100% { transform: scaleY(.5);  opacity: .22; }
}

/* ── Compact (hero) variant ──
   Lives under the price strip; quieter scale, centred to match the hero. */
.fs-form--compact {
  margin: 26px auto 0;
  max-width: 30rem;
  text-align: left;
}
.fs-form--compact .fs-row { flex-wrap: nowrap; }
.fs-form--compact .fs-url {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  text-align: left;
}
.fs-form--compact .fs-btn { padding: 11px 15px; font-size: 11px; white-space: nowrap; }   /* keep full tap height (was 10px) */
.fs-form--compact .fs-note { text-align: center; margin-inline: auto; }
.fs-form--compact .fs-setting { right: 0; transform: none; }

/* ── Getb variant ── inherits the offer card; no extra frame needed */
.fs-form--getb { max-width: 100%; }

/* Reduced motion — the slugs hold a single set position, no pulse */
@media (prefers-reduced-motion: reduce) {
  .fs-setting i { animation: none; transform: scaleY(1.4); opacity: .6; }
}

/* ════════════════════════════════════════════════════════════════════
   HOOK CAPTION (.fs-hook) — one quiet line under Specimens + studio preview
════════════════════════════════════════════════════════════════════ */
.fs-hook {
  margin-top: 22px;
  text-align: center;
}
.fs-hook a {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.fs-hook a span { font-style: normal; color: var(--blue); margin-left: 2px; }
.fs-hook a:hover { color: var(--ink); border-color: var(--blue); }
.fs-hook a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ── Narrow screens ── stack the button below the input on all variants */
@media (max-width: 560px) {
  .fs-btn { flex: 1 1 100%; }
  .fs-form--compact .fs-row { flex-wrap: wrap; }   /* let the button drop full-width below on phones */
  .fs-form--compact .fs-setting,
  .fs-setting { right: 0; transform: none; bottom: auto; top: 6px; }
}

/* specimen rail caption (relabel pass) */
.spec-rail__cap { font-family: var(--serif-text); font-style: italic; font-size: 12.5px; line-height: 1.4; color: var(--spec-ink-3, var(--ink-3)); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-soft-2); }

/* ═══════ № 002 · DISPOSABLE vs KEPT — calm side-by-side comparison ═══════
   Replaces the old scroll-scrubbed compare slider (.vs2). Both panels are
   visible at once; on scroll-into-view (.go, one-shot) the chatbot reply
   evaporates into ink while the Brief inks in. No slider, no scroll-scrub. */
.cmp {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px, 3.4vw, 48px);
  align-items: start;        /* each card sizes to its own content — the Brief's photo grows
                                ONLY its own column, so the 2-bubble chat can't inflate into
                                an empty grey box. Trade: the two verdict lines no longer
                                bottom-align, which reads as deliberate editorial weight. */
  margin: 36px 0 6px;
}
.cmp__side { display: flex; flex-direction: column; min-width: 0; }
.cmp__label {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px;
}
.cmp__label--ours { color: var(--ink-2); }
.cmp__chip {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  padding: 3px 9px; border-radius: 999px;
}
.cmp__chip--gone { color: var(--ink-4); border: 1px solid var(--rule-soft); }
.cmp__chip--kept { color: var(--paper-bright); background: var(--blue); }

/* ── LEFT · the disposable chat (a flat, generic messenger — deliberately
      cooler & lifeless against the warm paper of the Brief) ── */
.cmp__chat {
  position: relative; flex: 0 0 auto;   /* natural height — no longer stretched to match the Brief */
  background: #E6E4DD;
  border: 1px solid var(--rule-soft-2);
  border-radius: 14px;
  padding: 20px 18px;
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden;
}
.cmp__bubble {
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
  font-size: 14.5px; line-height: 1.48;
  padding: 11px 15px; border-radius: 16px; max-width: 90%; margin: 0;
}
.cmp__bubble--user {
  align-self: flex-end; background: #C9D2DC; color: #2B333D;
  border-bottom-right-radius: 5px;
}
.cmp__bubble--bot {
  position: relative; align-self: flex-start;
  background: #F4F3EE; color: var(--ink-3);
  border: 1px solid rgba(20,23,26,.06);
  border-bottom-left-radius: 5px;
}
/* the bot reply dissolves into a scatter of ink dust */
.cmp__bubble--bot::after {
  content: ''; position: absolute; inset: -1px;
  background-image: radial-gradient(circle, rgba(20,23,26,.45) 1px, transparent 1.5px);
  background-size: 8px 8px;
  opacity: 0; pointer-events: none; border-radius: inherit;
}
.cmp.go .cmp__bubble--bot { animation: cmp-evap 1.4s cubic-bezier(.4,0,.5,1) 1s forwards; }
.cmp.go .cmp__bubble--bot::after { animation: cmp-dust 1.5s ease 1s forwards; }
@keyframes cmp-evap {
  0%, 16% { opacity: 1; transform: translateY(0); filter: none; }
  100%    { opacity: .12; transform: translateY(-12px); filter: grayscale(1); }
}
@keyframes cmp-dust {
  0%   { opacity: 0; transform: translateY(0); }
  28%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(-32px); }
}

/* ── centre divider ── */
.cmp__divide {
  position: relative; width: 1px; background: var(--rule-soft);
  display: flex; align-items: center; justify-content: center;
  align-self: stretch;   /* the divide is a grid cell, not inside a side — under align-items:start
                            it would collapse to the 'vs' height, so re-stretch it to span the row */
}
.cmp__vs {
  font-family: var(--serif); font-style: italic; font-size: 16px;
  color: var(--ink-4); background: var(--paper); padding: 8px 0; line-height: 1;
}

/* ── RIGHT · the kept Brief (warm paper, lifted off the page) ── */
.cmp__side--brief .cmp__brief {
  flex: 0 0 auto;   /* natural height — legitimately taller than the chat; carries more */
  background: var(--paper-bright);
  border: 1px solid var(--paper-edge);
  border-radius: 3px;
  padding: 22px 22px 18px;
  box-shadow: 0 12px 38px -24px rgba(20,23,26,.45);
}
.cmp__brief-kicker {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue); font-weight: 600;
}
.cmp__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); display: inline-block; margin-right: 8px; vertical-align: 1px; }
.cmp__brief-kicker .cmp__time { color: var(--ink-4); font-weight: 400; letter-spacing: .1em; }
.cmp__brief-head {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(20px, 2.1vw, 27px); line-height: 1.08; letter-spacing: -.01em;
  margin: 12px 0 0;
}
.cmp__brief-head em { font-style: italic; color: var(--blue); }

/* ── editorial photo inside the Brief: proof a Brief can carry an image.
      A self-framed letterbox plate in the card's own border language; fixed
      height so it never balloons the card. Ink-grade copied verbatim from
      .brief-hero img so it matches the house grade. ── */
.cmp__brief-fig {
  margin: 14px 0 0;
  border: 1px solid var(--paper-edge);
  border-radius: 3px;
  overflow: hidden;
  background: var(--paper-cool);   /* warm fallback while the image lazy-loads */
}
.cmp__brief-fig img {
  display: block; width: 100%; height: 158px;   /* letterbox crop — grows the card only ~+190px */
  object-fit: cover; object-position: 50% 42%;   /* hold the table + shell chair, ease off the ceiling */
  filter: saturate(.94) contrast(1.02) sepia(.06);
}
.cmp__brief-fig figcaption {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); margin: 0; padding: 7px 11px 8px;
  border-top: 1px solid var(--rule-soft-2); background: var(--paper-bright);
}
.cmp__brief-prose {
  font-family: var(--serif-text); font-size: 15px; line-height: 1.6;
  color: var(--ink-2); margin: 12px 0 0;
}
.cmp__drop { font-family: var(--serif); float: left; font-weight: 700; font-size: 46px; line-height: .76; padding: 5px 8px 0 0; color: var(--ink); }
.cmp__brief-src {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 16px; padding-top: 11px; border-top: 1px solid var(--rule-soft-2);
}
.cmp__brief-src b { color: var(--ink-2); }
.cmp__brief-by {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-4); margin-top: 9px;
}
.cmp__brief-by strong { color: var(--ink-2); font-weight: 600; }
.cmp__brief-actions { display: flex; gap: 18px; margin-top: 15px; }
.cmp__brief-actions button {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); background: none; border: 0; cursor: pointer; padding: 0; transition: color .2s;
}
.cmp__brief-actions button:hover { color: var(--blue); }
.cmp__brief-actions button:first-child:hover { color: var(--gold); }

/* ── verdict lines beneath each side ── */
.cmp__verdict {
  font-family: var(--serif-text); font-size: 14px; line-height: 1.5;
  color: var(--ink-3); margin: 16px 2px 0;
}
.cmp__verdict b { color: var(--ink-2); font-weight: 600; }
.cmp__side--brief .cmp__verdict b { color: var(--blue); }

/* ── the Brief inks in on reveal, line by line ── */
.cmp-ink { opacity: 0; transform: translateY(9px); }
.cmp.go .cmp-ink {
  opacity: 1; transform: none;
  transition: opacity .6s ease calc(var(--i) * .13s + .25s), transform .6s ease calc(var(--i) * .13s + .25s);
}

@media (max-width: 820px) {
  .cmp { grid-template-columns: 1fr; gap: 6px; }
  .cmp__divide { width: auto; height: 1px; margin: 20px 0; }
  .cmp__vs { padding: 0 12px; }
  .cmp__brief-fig img { height: 132px; }   /* a touch shorter on phones */
}
@media (prefers-reduced-motion: reduce) {
  .cmp.go .cmp__bubble--bot, .cmp.go .cmp__bubble--bot::after { animation: none; }
  .cmp__bubble--bot { opacity: .4; filter: grayscale(1); }
  .cmp-ink { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE OVERHAUL — phone responsiveness, touch ergonomics, a11y, perf.
   Everything here is gated behind media queries / @supports / coarse-
   pointer so DESKTOP rendering is byte-for-byte unchanged. The shared
   token edits (--ink-4, --ink-5 text uses) and env() safe-area insets
   live in place above (they no-op on devices without notches).
   ════════════════════════════════════════════════════════════════════ */

/* ─── A11y · skip link (visually-hidden until focus) ─── */
.skip-link {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper-bright);
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  padding: 10px 16px; border-radius: 999px;
  transition: top .2s ease;
}
.skip-link:focus { top: calc(14px + env(safe-area-inset-top, 0px)); outline: 2px solid var(--blue); outline-offset: 3px; }

/* ─── Perf · cheaper nav blur on mobile (≤860px) ─── */
@media (max-width: 860px) {
  .folionav,
  .folionav.open .folionav__depts {
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
  }
  /* On a phone the wide pill sits right over scrolling content — keep it readable
     with a near-opaque paper fill (the blur stays for a hint of glass). */
  .folionav { background: rgba(252, 250, 246, .95); }
  .folionav.open .folionav__depts { background: rgba(252, 250, 246, .98); }
}

/* ─── Perf · opaque fallback where backdrop-filter is unsupported ─── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .folionav { background: rgba(252, 250, 246, .94); }
}

/* ─── Touch · press-feedback :active states (additive; :hover untouched) ─── */
.cta:active,
.fs-btn:active,
.getb__field-btn:active,
.folionav__cta:active { background: var(--blue); color: var(--paper-bright); transform: translateY(1px); }
.cta--ghost:active { background: var(--ink); color: var(--paper-bright); transform: translateY(1px); }
.folionav__depts a:active,
.spec__tab:active { background: rgba(61, 90, 254, .10); }
.brief-clip:active,
.brief-retract:active { color: var(--blue); }
.cmp__brief-actions button:active,
.vs2__brief-actions button:active { color: var(--blue); transform: translateY(1px); }

/* ═══ ≤600px — the main mobile breakpoint ═══ */
@media (max-width: 600px) {
  /* iOS input-zoom guard: any <16px text input zooms on focus — raise to 16px */
  .composer input,
  .fs-url,
  .fs-form--compact .fs-url,
  .getb__field-input { font-size: 16px; }

  /* Length & layout: tighter top rhythm on the standard .page sections */
  .page { padding-top: clamp(36px, 6vh, 56px); }
  .page-rule { margin-bottom: 22px; }


  /* Comparison trim: keep the first 2 exchanges (4 bubbles); drop the rest so
     the visible chat ends on a bot non-answer */
  .cmp__chat .cmp__bubble:nth-child(n+5) { display: none; }

  /* Specimen on mobile: show one full branded brief (the lead, with its photo)
     + the lead-capture rail, and hide the secondary "side" article so each
     specimen reads in ~1.5 screens instead of 3. The per-brand masthead, vibe,
     palette and voice are all preserved — this is a responsive trim, not a
     normalisation of the specimens. */
  #spec-paper .spec__body > .spec__col:nth-child(2) { display: none; }

  /* Specimen tabs → horizontal scroller (no wrap) */
  .spec__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;            /* lock the strip to the X axis */
    overscroll-behavior-x: contain;
    touch-action: pan-x;           /* horizontal swipes scroll tabs; vertical goes to the page */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .spec__tabs::-webkit-scrollbar { display: none; }
  .spec__tab { white-space: nowrap; flex: 0 0 auto; }

  /* Tighten oversized full-bleed card inner padding so text isn't double-squeezed */
  .spec__paper { padding: 16px; }
  .cmp__chat { padding: 14px; }
  .cmp__side--brief .cmp__brief { padding: 16px; }
  .getb__offer { padding: 16px; }
  .getb__tier { padding: 16px; }

  /* Touch · 44px min tap targets + immediate press affordance.
     Negative margins keep the visual baseline where the editorial layout
     expects it while the hit area grows. */
  .composer button {
    min-height: 44px; padding: 6px 10px;
    display: inline-flex; align-items: center;
    margin: -6px -8px -6px 0;
  }
  .brief-clip, .brief-retract {
    min-height: 44px; padding: 0 4px;
    display: inline-flex; align-items: center;
    margin-block: -10px;
  }
  .cmp__brief-actions {
    gap: 8px; flex-wrap: wrap;
  }
  .cmp__brief-actions button,
  .vs2__brief-actions button {
    min-height: 44px; padding: 0 2px;
    display: inline-flex; align-items: center;
    margin-block: -12px;
  }
  .folionav__cta { min-height: 44px; display: inline-flex; align-items: center; }
  .fs-btn,
  .getb__field-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .cta {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .hero0__cue { min-height: 44px; }

  /* Founders: tighten the guarantee notice's internal padding + promise spacing */
  .guar { padding: clamp(20px, 5vw, 26px) clamp(16px, 5vw, 22px) clamp(18px, 4vw, 22px); }
  .guar__promise { padding-block: 16px; }

  /* ── Typography · mono-label legibility floor ──
     The heavily-tracked uppercase JetBrains-Mono labels render 8.5–11px;
     bump to ≥11.5px and soften tracking to ≤.12em so they stay readable. */
  .hero0__cue,
  .hero0__eyebrow,
  .masthead__edition,
  .masthead__meta,
  .ownership,
  .wire__tape,
  .kicker,
  .byline,
  .statbox__lbl,
  .colophon__line,
  .fdr__role,
  .guar__kicker,
  .guar__signer-role,
  .getb__tag,
  .getb__field-label,
  .getb__tier-metaitem,
  .fs-note,
  .fs-form__label,
  .hv-chip,
  .hv-price__from,
  .spec__mast-eyebrow,
  .spec-rail__eyebrow,
  .dbrief__byline,
  .spec-rail__label,
  .dbrief__kicker,
  .cmp__chip,
  .cmp__brief-by,
  .cmp__brief-src {
    font-size: 11.5px;
    letter-spacing: .12em;
  }

  /* Tighten line-height on tiny mono blocks (per finding) */
  .colophon__line { line-height: 1.5; }
  .statbox__lbl { line-height: 1.45; }
}

/* ─── Touch · folio dropdown links get a 44px row + a little breathing gap ─── */
@media (max-width: 860px) {
  .folionav.open .folionav__depts { gap: 4px; }
  .folionav.open .folionav__depts a { min-height: 44px; display: inline-flex; align-items: center; }
  /* burger: keep the 18px bars visually, grow the hit area 38→44px */
  .folionav__toggle { width: 44px; height: 44px; }
}

/* ─── Touch · specimen tab min height on the narrow band the tabs live in ─── */
@media (max-width: 560px) {
  .spec__tab { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ─── Hide the now-false "3 columns set" dateline token on narrow screens ───
   (parent JS wraps it in .spec__mast-colset; the 3-col grid collapses ≤920px) */
@media (max-width: 920px) {
  .spec__mast-colset { display: none; }
}

/* ─── Founders + guarantee compression on phones ─── */
@media (max-width: 600px) {
  .guar__promise { padding-block: 12px; }
  .guar__head { margin-bottom: 14px; }
}
@media (max-width: 480px) {
  .fdr { max-width: 230px; }
}

/* ─── Typography · display-headline floors on small phones ───
   Reconciled with the existing @media(max-height:700px) hero rule: that rule
   only fires on SHORT viewports and sets a clamp; this one fires on NARROW
   viewports and pins a fixed floor. They target different axes, so the later
   max-width rule wins on a narrow phone (intended) without contradicting the
   short-landscape sizing. */
@media (max-width: 400px) {
  .hero0__title { font-size: 38px; }
  .masthead__title { font-size: 30px; }
}

/* ─── A11y · reduced-motion safety net (must be last) ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ═══════════ № 007 · QUESTIONS FROM THE DESK — FAQ ═══════════
   Editorial Q&A — the believe-stage trust beat (accuracy / no-developer /
   data-safety / time-to-live). Reuses the page/kicker/headline/deck chrome. */
.faq { margin: 8px 0 0; max-width: 880px; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(30px, 4.5vw, 60px); }
.faq__item {
  padding: 22px 0;
  border-top: 1px solid var(--rule-soft-2);
}
.faq__item:nth-child(-n+2) { border-top: 0; padding-top: 6px; }   /* top row of the 2x2 has no divider */
@media (max-width: 640px) {
  .faq { grid-template-columns: 1fr; }
  .faq__item:nth-child(2) { border-top: 1px solid var(--rule-soft-2); padding-top: 22px; }   /* divider returns when stacked */
}
.faq__q {
  position: relative;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 7px;
  padding-left: 46px;
}
.faq__n {
  position: absolute;
  left: 0; top: 3px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--blue);
  font-weight: 600;
}
.faq__a {
  margin: 0 0 0 46px;
  font-family: var(--serif-text);
  font-size: clamp(15px, 1.6vw, 16.5px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 64ch;
}
@media (max-width: 560px) {
  .faq__q { padding-left: 34px; }
  .faq__a { margin-left: 34px; }
}

/* reading-progress: a 2px cobalt bar across the very top edge — wayfinding on a
   long single-scroll page (width driven by spine() in script.js via #folionav-bar). */
.reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--blue);
  z-index: 1200;
  transition: width .12s linear;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .reading-progress { transition: none; } }

/* free-sample two-field row keeps each input on a comfortable basis */

/* guarantee: a signature ink-rule strokes under each signer's name as the card
   scrolls in — a tactile beat in the founders close (echoes the rule-draw motif). */
.guar__signer-name { position: relative; }
.guar__signer-name::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 2px;
  background: var(--guar-ink, var(--blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s cubic-bezier(.6,0,.2,1);
}
.guar.in .guar__signer:nth-child(1) .guar__signer-name::after { transition-delay: .35s; transform: scaleX(1); }
.guar.in .guar__signer:nth-child(2) .guar__signer-name::after { transition-delay: .6s; transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .guar__signer-name::after { transition: none; transform: scaleX(1); }
}


/* stacked two-field free-sample form — each field labelled on its own ruled line
   (replaces the cramped side-by-side row that truncated both placeholders). */
.fs-form--stack .fs-field {
  display: block;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 7px;
  margin-bottom: 16px;
  transition: border-color .25s ease;
  cursor: text;
}
.fs-form--stack.is-setting .fs-field { border-color: var(--blue); }
.fs-field__lbl {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 6px;
}
.fs-form--stack .fs-url,
.fs-form--stack .fs-email {
  display: block;
  width: 100%;
  flex: none;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .01em;
  color: var(--ink);
  caret-color: var(--blue);
  padding: 2px 0;
}
.fs-form--stack .fs-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}
.fs-form--stack .fs-btn { flex: 0 0 auto; }
.fs-form--stack .fs-setting { position: static; right: auto; bottom: auto; }
@media (max-width: 600px) {
  .fs-form--stack .fs-url, .fs-form--stack .fs-email { font-size: 16px; }  /* no iOS tap-zoom */
  .fs-form--stack .fs-actions { flex-wrap: wrap; }
  .fs-form--stack .fs-btn { flex: 1 1 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   REDESIGN ADDITIONS (2026-06-23) — setup role tags + voice morph,
   the salvaged record line, the post-film bridge, and the pricing band.
════════════════════════════════════════════════════════════════════ */

/* ─── № 004 · SETUP — clean vertical timeline (redesign) ───
   Each step is one grid row: [number marker] [copy] [inline visual]. No row-spanning
   item, so grid auto-placement can't misfire (the old .hiw__num spanned 2 rows, which
   is what scattered the title/body). The cobalt rail threads the numbers, drawn down on
   .go. Container keeps .hiw2 so the existing #p3 .hiw2 -> .go observer drives reveals. */
.setup { position: relative; margin-top: 6px; isolation: isolate; }   /* own stacking context so the steps always sit above the rail */
.setup__steps { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }   /* whole step layer above the drawing rail — the rail can't composite over the circles mid-animation */

.setup__rail {
  position: absolute;
  left: 27px;                 /* centre of the 56px marker column */
  top: 34px; bottom: 54px;
  width: 2px;
  background: var(--blue);
  transform: scaleY(0); transform-origin: top center;
  z-index: 0;
}
.hiw2.go .setup__rail { transform: scaleY(1); transition: transform 1.1s cubic-bezier(.4, .1, .2, 1) .1s; }

.setup__step {
  display: grid;
  grid-template-columns: 56px minmax(0, 0.95fr) minmax(0, 1.05fr);
  column-gap: clamp(18px, 2.6vw, 36px);
  align-items: start;
  padding: clamp(24px, 3.4vw, 40px) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.setup__step:first-child { padding-top: 4px; }
.setup__step:last-child { border-bottom: 0; }

.setup__marker { position: relative; z-index: 1; }
.setup__num {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  font-family: var(--serif); font-weight: 700; font-size: 30px;
  color: var(--blue); background: var(--paper);
  border: 2px solid var(--blue); border-radius: 999px;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}

.setup__copy { padding-top: 6px; }
.setup__role {
  display: inline-block;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-4); margin: 0 0 9px;
}
.setup__role--you { color: var(--blue); }
.setup__title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px); line-height: 1.1;
  letter-spacing: -.01em; color: var(--ink); margin: 0 0 9px;
}
.setup__body {
  font-family: var(--serif-text);
  font-size: clamp(14.5px, 1.4vw, 16px); line-height: 1.55;
  color: var(--ink-2); margin: 0; max-width: 44ch;
}
.setup__body em { font-style: italic; color: var(--ink); }

.setup__visual { min-width: 0; align-self: center; }   /* sit the visual level with the centre of the copy/body, not pinned to the top */

/* step 1 — the document chips assemble in */
.setup__rack { display: flex; flex-wrap: wrap; gap: 8px; transform: translateY(clamp(22px, 2.8vw, 40px)); }   /* drop the chips to sit level with the centre of the body (clears the role + title header above) */
.setup__chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: .03em;
  color: var(--ink-3); background: var(--paper-bright);
  border: 1px solid var(--rule-soft); border-left: 2px solid var(--blue);
  padding: 6px 11px; white-space: nowrap;
  box-shadow: 1px 2px 0 -1px var(--paper-cool);
  opacity: 0; transform: translateY(10px) rotate(-1.2deg);
}
.setup__chip--pdf { border-left-color: var(--gold); color: var(--gold); text-transform: none; }
.setup__chip:nth-child(even) { transform: translateY(10px) rotate(1.2deg); }
.hiw2.go .setup__chip {
  opacity: 1; transform: none;
  transition: opacity .5s ease var(--c, 0s), transform .55s cubic-bezier(.34, 1.3, .5, 1) var(--c, 0s);
}

/* step 2 — generic line transforms into the brand voice (SEPARATE rows; never overlap) */
.setup__voice { display: flex; flex-direction: column; }
.setup__voice-row { padding: 12px 14px; border: 1px solid var(--rule-soft); background: var(--paper-bright); }
.setup__voice-row p { margin: 0; }
.setup__voice-tag {
  display: block; font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px;
}
.setup__voice-row--before { border-left: 2px solid var(--rule); }
.setup__voice-row--before .setup__voice-tag { color: var(--ink-4); }
.setup__voice-row--before p { font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--ink-4); }
.setup__voice-row--after { border-left: 2px solid var(--blue); }
.setup__voice-row--after .setup__voice-tag { color: var(--blue); }
.setup__voice-row--after p { font-family: var(--serif-text); font-style: italic; font-size: 15px; line-height: 1.45; color: var(--ink); }
.setup__voice-arrow {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue); padding: 8px 0 8px 14px;
}
.setup__voice-arrow::before { content: "↓"; font-size: 14px; line-height: 1; }
/* reveal: the generic recedes; the brand line rises in (the climax) */
.setup__voice-row--after { opacity: 0; transform: translateY(8px); }
.setup__voice-arrow { opacity: 0; }
.hiw2.go .setup__voice-row--before { opacity: .5; transition: opacity .6s ease .45s; }
.hiw2.go .setup__voice-arrow { opacity: 1; transition: opacity .5s ease .55s; }
.hiw2.go .setup__voice-row--after {
  opacity: 1; transform: none;
  transition: opacity .6s ease .68s, transform .6s cubic-bezier(.2, .7, .25, 1) .68s;
}

/* step 3 — the finished Brief settles in */
.setup__brief {
  background: var(--paper-bright); border: 1px solid var(--rule); border-top-width: 4px;
  padding: 18px 20px 16px;
  box-shadow: 0 1px 0 0 var(--paper-edge), 4px 7px 0 -1px var(--paper-cool);
  opacity: 0; transform: translateY(16px);
}
.hiw2.go .setup__brief { opacity: 1; transform: none; transition: opacity .6s ease .3s, transform .7s cubic-bezier(.2, .7, .25, 1) .3s; }
.setup__brief-tab { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); margin: 0 0 12px; }
.setup__brief-q { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin: 0 0 10px; }
.setup__brief-a { font-family: var(--serif-text); font-size: 14.5px; line-height: 1.5; color: var(--ink); margin: 0 0 12px; }
.setup__brief-drop { font-family: var(--serif); font-weight: 700; float: left; font-size: 34px; line-height: .8; padding: 3px 6px 0 0; color: var(--ink); }
.setup__brief-src { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--ink-4); margin: 0; }
.setup__brief-src span { color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .setup__rail { transform: scaleY(1) !important; transition: none !important; }
  .setup__chip, .setup__brief { opacity: 1 !important; transform: none !important; transition: none !important; }
  .setup__voice-arrow { opacity: 1 !important; }
  .setup__voice-row--before { opacity: .5 !important; }
  .setup__voice-row--after { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* mobile: number + copy on top, the visual full-width beneath the copy */
@media (max-width: 760px) {
  .setup__step { grid-template-columns: 44px minmax(0, 1fr); row-gap: 18px; column-gap: 16px; }
  .setup__num { width: 44px; height: 44px; font-size: 24px; }
  .setup__rail { left: 21px; top: 28px; bottom: 48px; }
  .setup__visual { grid-column: 2 / -1; align-self: start; }
  .setup__rack { transform: none; }   /* on mobile the chips already stack below the body — no nudge */
}

/* ── № 003 · The salvaged thesis line, re-homed under the difference comparison ── */
.record-line {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.4;
  color: var(--ink-3);
  text-align: center;
  max-width: 32ch;
  margin: 22px auto 0;
}
.record-line em { font-style: italic; color: var(--ink); }

/* ── № 008 · the interactive section's lone intro deck (no competing headline above the masthead) ── */
.deck--lead { font-size: clamp(16px, 1.8vw, 20px); max-width: 60ch; color: var(--ink-2); }

/* ── № 001 · Post-film bridge → the bottom interactive ── */
.film-bridge {
  text-align: center;
  margin-top: 26px;
}
.film-bridge a {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: clamp(16px, 1.8vw, 20px);
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.film-bridge a:hover { color: var(--blue); border-color: var(--blue); }
.film-bridge em { font-style: italic; color: var(--ink); }

/* ── № 007 · Pricing band — Lite / The Brief (popular) / Commercial ──
   Reuses the .getb__tier / .brief-fig scaffolding; only the 3-col grid, the
   popular modifier, the badge, and the terms/Perth lines are new. */
.pricing { margin-top: 8px; }
.pricing__tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 26px);
  align-items: stretch;
  margin-top: clamp(20px, 2.6vw, 28px);
}
.pricing__tiers .getb__tier { position: relative; }
.getb__tier--pop {
  border-top-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue), 8px 9px 0 rgba(61, 90, 254, 0.08);
}
.getb__tier-badge {
  position: absolute;
  top: -12px;
  left: 16px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper-bright);
  background: var(--blue);
  padding: 4px 10px;
}
.pricing__cta { margin-top: 20px; align-self: flex-start; }
.pricing__terms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 0;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
}
.pricing__terms span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pricing__terms span:not(:last-child)::after { content: "·"; margin: 0 16px; color: var(--rule); }
.pricing__perth {
  text-align: center;
  margin-top: 12px;
  font-family: var(--serif-text);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .pricing__tiers { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .pricing__tiers { grid-template-columns: 1fr; }
}

/* ── No-JS / script-failure fallback ──
   Almost everything below the hero starts at opacity:0 and is only revealed when the scripts
   add .in/.go on scroll. An inline head script sets <html class="js"> the instant JS runs; if it
   never does (CDN blocked, parse error, scripting off), force the hidden states visible so the page
   degrades to a static, fully-readable document instead of stranding on blank paper. */
html:not(.js) .reveal,
html:not(.js) .cmp-ink,
html:not(.js) .setup__chip,
html:not(.js) .setup__brief,
html:not(.js) .setup__voice-arrow,
html:not(.js) .setup__voice-row--after {
  opacity: 1 !important;
  transform: none !important;
}
html:not(.js) .setup__rail { transform: scaleY(1) !important; }

/* ── Windows High Contrast / forced-colors: restore borders on bounded surfaces and rails
   that otherwise rely on background fills the system flattens away. ── */
@media (forced-colors: active) {
  .getb__tier,
  .cmp__side,
  .cmp__brief,
  .setup__brief,
  .guar,
  .faq__item,
  .filmreel__plate {
    border: 1px solid CanvasText;
  }
  .page-rule,
  .setup__rail,
  .guar__rule {
    background: CanvasText;
    border-color: CanvasText;
  }
  .filmreel__play-disc {
    border: 2px solid CanvasText;
    forced-color-adjust: none;
  }
  .getb__tier--pop { outline: 2px solid Highlight; }
}


/* ════════════════════════════════════════════════════════════════════
   2026-07 OVERHAUL · "THE PRESS, RUNNING"
   1 · The composing desk — the hero demonstrates the product live.
   2 · The wire — a thin ticker of incoming questions under the hero.
   3 · The difference, scrubbed — bubbles pop, evaporate; the Brief prints.
   4 · Specimen page-turns — switching editions leafs the paper.
   5 · Paper chrome — nav pill off glass onto paper; letterpress CTAs;
       film-plate tilt; the pricing stamp; page-rules that draw.
   All of it in print's own vocabulary — no glow, no glass.
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1 · THE COMPOSING DESK ─── */
.hero0--desk { padding-bottom: 22px; }
.hero0--desk .hero0__grid {
  flex: 1; width: 100%; max-width: 1360px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(30px, 4.5vw, 70px); align-items: center;
  padding: clamp(14px, 3.5vh, 44px) var(--gutter) 10px;
}
.hero0--desk .hero0__main {
  flex: none; display: block; text-align: left; padding: 0;
}
.hero0--desk .hero0__title { font-size: clamp(38px, 4.7vw, 72px); margin-bottom: 22px; }
.hero0--desk .hero0__sub { max-width: 46ch; font-size: clamp(15px, 1.45vw, 17.5px); }

/* the "try it" chips — file a question at the desk */
.hero0__try {
  margin-top: 30px;
  opacity: 0; transform: translateY(16px);
  animation: heroup .9s cubic-bezier(.2, .7, .2, 1) .56s forwards;
}
.hero0__try-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-3); margin-bottom: 12px;
}
.hero0__chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; }
.hero0__chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-align: left; padding: 9px 13px 10px;
  background: var(--paper-bright); border: 1px solid var(--rule-soft);
  font-family: var(--serif-text); font-style: italic; font-size: 13.5px; line-height: 1.3;
  color: var(--ink-2);
  transition: border-color .25s, transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background .25s;
}
.hero0__chip-biz {
  font-family: var(--mono); font-style: normal; font-size: 8.5px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 600; color: var(--chip-accent, var(--ink-4));
}
.hero0__chip:hover {
  border-color: var(--ink-2); transform: translateY(-2px);
  box-shadow: 0 4px 0 -2px var(--rule-soft), 0 12px 22px -16px rgba(20,23,26,.4);
}
.hero0__chip:active { transform: translateY(0); box-shadow: none; }
.hero0__chip.is-on {
  border-color: var(--ink); background: var(--paper);
  box-shadow: inset 3px 0 0 var(--chip-accent, var(--blue));
  color: var(--ink);
}
.hero0__chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* the desk plate — a bright sheet pulled slightly off the stack */
.hero0__desk {
  min-width: 0; position: relative;
  opacity: 0; transform: translateY(22px);
  animation: heroup 1s cubic-bezier(.2, .7, .2, 1) .48s forwards;
}
.desk {
  position: relative;
  background: var(--paper-bright);
  border: 1px solid var(--rule);
  box-shadow:
    0 1px 0 var(--rule-soft),
    10px 12px 0 -3px var(--paper-cool),
    10px 12px 0 -2px var(--rule-soft),
    0 30px 60px -38px rgba(20,23,26,.55);
  padding: 14px clamp(16px, 2vw, 26px) 18px;
  min-height: 430px;
}
.desk__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-4); border-bottom: 1px solid var(--rule); padding-bottom: 10px;
}
.desk__live { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.desk__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
  animation: desk-pulse 2.2s ease-in-out infinite;
}
@keyframes desk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.desk__meta { white-space: nowrap; }
.desk__composer {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 0 12px; border-bottom: 1px solid var(--rule-soft);
  min-height: 47px;
}
.desk__q {
  font-family: var(--serif-text); font-style: italic; font-size: 15.5px;
  color: var(--ink); line-height: 1.3; min-width: 0;
}
.desk__caret { flex: none; }
.desk__col { padding-top: 4px; }
.desk__col .article { border-top: 0; margin-top: 0; padding-top: 12px; }
.desk__col .article.is-clearing { opacity: 0; transform: translateY(-8px); transition: opacity .28s ease, transform .28s ease; }
.desk__col .kicker { font-size: 10px; }
.desk__col .headline { font-size: clamp(23px, 2.3vw, 33px); margin: 9px 0 8px; }
.desk__col .headline-underline { margin: 0 0 10px; }
.desk__col .bodycols { font-size: 13.5px; column-gap: 28px; max-width: none; }
.desk__col .dropcap { font-size: 42px; }
.desk__col .brief-fig { margin: 14px 0 2px; padding: 11px 0; gap: 14px; }
.desk__col .brief-fig__val { font-size: clamp(27px, 2.6vw, 40px); }
.desk__col .brief-actions { margin-top: 12px; }
.desk__col .byline { margin-top: 14px; }
.desk__foot {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-4); margin: 12px 2px 0; text-align: right;
}

/* ─── 2 · THE WIRE ─── */
.wire {
  position: relative; z-index: 2; overflow: hidden;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule-soft);
  background: var(--paper-cool);
  padding: 8px 0;
}
.wire__tape {
  display: inline-block; white-space: nowrap; will-change: transform;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  animation: wire-scroll 64s linear infinite;
}
.wire__tape .lbl { color: var(--blue); font-weight: 600; }
@keyframes wire-scroll { to { transform: translateX(-50%); } }

/* ─── 3 · THE DIFFERENCE, SCRUBBED (GSAP drives inline styles; these
       classes only park the CSS one-shot so the two never double-fire) ─── */
.cmp.cmp-scrub .cmp__bubble--bot,
.cmp.cmp-scrub .cmp__bubble--bot::after { animation: none; }
.cmp.cmp-scrub .cmp-ink { transition: none; }
.cmp.cmp--dusted .cmp__bubble--bot::after { animation: cmp-dust 1.5s ease forwards; }
.cmp__roller {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue) 30%, var(--blue) 70%, transparent);
  opacity: 0; pointer-events: none;
}
.cmp__side--brief .cmp__brief { position: relative; }

/* ─── 4 · SPECIMEN PAGE-TURN — the outgoing edition leafs over ─── */
#spec-paper { position: relative; }
.spec__leaf {
  position: absolute; inset: 0; z-index: 5; overflow: hidden;
  pointer-events: none; backface-visibility: hidden;
  box-shadow: 0 1px 0 var(--rule-soft), 0 22px 44px -30px rgba(20,23,26,.5);
}
.spec__leaf::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(20,23,26,0), rgba(20,23,26,.16) 70%, rgba(20,23,26,.3));
  opacity: 0;
}
.spec__leaf.is-turn-fwd { transform-origin: left center; animation: leaf-fwd .62s cubic-bezier(.55, 0, .35, 1) forwards; }
.spec__leaf.is-turn-fwd::after { animation: leaf-shade .62s cubic-bezier(.55, 0, .35, 1) forwards; }
.spec__leaf.is-turn-back { transform-origin: right center; animation: leaf-back .62s cubic-bezier(.55, 0, .35, 1) forwards; }
.spec__leaf.is-turn-back::after { animation: leaf-shade .62s cubic-bezier(.55, 0, .35, 1) forwards; }
@keyframes leaf-fwd {
  0%   { transform: perspective(1600px) rotateY(0deg); opacity: 1; }
  99%  { transform: perspective(1600px) rotateY(-72deg); opacity: 1; }
  100% { transform: perspective(1600px) rotateY(-72deg); opacity: 0; }
}
@keyframes leaf-back {
  0%   { transform: perspective(1600px) rotateY(0deg); opacity: 1; }
  99%  { transform: perspective(1600px) rotateY(72deg); opacity: 1; }
  100% { transform: perspective(1600px) rotateY(72deg); opacity: 0; }
}
@keyframes leaf-shade { to { opacity: 1; } }
/* the incoming paper settles up into place beneath the leaf */
.spec__paper.is-arriving > :not(.spec__leaf) { animation: spec-arrive .5s cubic-bezier(.2,.8,.3,1) both; }
@keyframes spec-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ─── 5 · PAPER CHROME ─── */
/* Nav pill: off the iOS glass, onto paper — near-solid stock, hairline, flat offset shadow. */
.folionav {
  background: rgba(248, 243, 229, .965);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--rule-soft);
  box-shadow:
    0 1px 0 var(--rule-soft),
    0 6px 0 -3px rgba(20, 23, 26, .07),
    0 16px 32px -22px rgba(20, 23, 26, .4);
}
@media (max-width: 860px) {
  .folionav.open .folionav__depts {
    background: rgba(248, 243, 229, .98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--rule-soft);
    box-shadow: 0 1px 0 var(--rule-soft), 0 18px 44px -16px rgba(20,23,26,.34);
  }
}

/* Letterpress CTAs: cobalt ink sweeps in from the left; press-down on strike. */
.cta {
  background-image: linear-gradient(var(--blue), var(--blue));
  background-repeat: no-repeat; background-size: 0% 100%; background-position: left center;
  transition: background-size .38s cubic-bezier(.2, .8, .3, 1), color .25s, transform .12s;
}
.cta:hover { background-color: var(--ink); background-size: 100% 100%; }
.cta:active { transform: translateY(1px); }
.cta--ghost {
  background-image: linear-gradient(var(--ink), var(--ink));
  background-size: 0% 100%;
}
.cta--ghost:hover { background-color: transparent; background-size: 100% 100%; color: var(--paper-bright); }
.fs-btn:active { transform: translateY(1px); }

/* Film plate: a physical tilt toward the cursor (JS sets --tiltX/--tiltY; fine pointers only). */
@media (hover: hover) and (pointer: fine) {
  .filmreel__plate {
    transform: perspective(1300px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
    transition: transform .55s cubic-bezier(.2, .8, .3, 1);
    will-change: transform;
  }
  .filmreel__plate.is-tilting { transition: transform .12s linear; }
}

/* The pricing badge stamps itself on arrival. */
.reveal.in .getb__tier-badge {
  animation: stamp-in .5s cubic-bezier(.2, 1.6, .3, 1) .55s backwards;
}
@keyframes stamp-in {
  from { opacity: 0; transform: rotate(-6deg) scale(1.6); }
  62%  { opacity: 1; transform: rotate(1deg) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* Page-rules draw themselves as each section arrives (JS adds .in). */
html.js .page-rule { border-top: 0; height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: left center; }
html.js .page-rule.in { transform: scaleX(1); transition: transform 1s cubic-bezier(.7, 0, .3, 1); }
html.js .page-rule::after { border-top: 0; height: 1px; background: var(--rule); opacity: 0; }
html.js .page-rule.in::after { opacity: 1; transition: opacity .4s ease .8s; }

/* ─── Responsive: the desk stacks under the headline on narrow screens ─── */
@media (max-width: 560px) {
  .desk__meta { display: none; }   /* the live label owns the bar on a phone */
}
@media (max-width: 980px) {
  .hero0--desk .hero0__grid { grid-template-columns: 1fr; gap: 26px; padding-top: 8px; align-items: start; }
  .hero0--desk .hero0__title { font-size: clamp(36px, 8.6vw, 56px); }
  .desk { min-height: 0; }
  .desk__col .bodycols { column-count: 1; }
  .hero0--desk { padding-bottom: 30px; }
  .hero0--desk .hero0__cue { margin-top: 18px; }
}
@media (max-height: 760px) and (min-width: 981px) {
  .hero0--desk .hero0__title { font-size: clamp(34px, 4vw, 56px); margin-bottom: 16px; }
  .hero0--desk .hero0__sub { font-size: 15px; }
  .hero0__try { margin-top: 20px; }
  .desk { min-height: 380px; }
}

/* ─── Guards: reduced motion, no-JS, print ─── */
@media (prefers-reduced-motion: reduce) {
  .hero0__try, .hero0__desk { opacity: 1 !important; transform: none !important; animation: none !important; }
  .desk__dot { animation: none; }
  .wire__tape { animation: none; }
  .spec__leaf { display: none !important; }
  .spec__paper.is-arriving > * { animation: none; }
  .reveal.in .getb__tier-badge { animation: none; }
  html.js .page-rule { transform: none; transition: none; }
  html.js .page-rule::after { opacity: 1; transition: none; }
  .filmreel__plate { transform: none !important; }
  .cta, .cta--ghost { transition: none; }
}
html:not(.js) .hero0__try, html:not(.js) .hero0__desk, html:not(.js) .wire { display: none; }
html:not(.js) .hero0--desk .hero0__grid { grid-template-columns: 1fr; max-width: 900px; }
html:not(.js) .page-rule { border-top: 1px solid var(--rule); transform: none; }
@media print {
  .hero0__desk, .hero0__try, .wire, .spec__leaf { display: none !important; }
  .hero0--desk .hero0__grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════════
   2026-07 OVERHAUL · ACT II — "FRONT PAGE AT FULL SCALE"
   The press-start intro · viewport-scale kinetic headline + dateline
   masthead · desk sheet-stack, tilt + drift · the ink cursor · ghost
   folio numerals · the record interstitial · the screening room ·
   the velocity wire · living grain. Still print, only louder.
   ════════════════════════════════════════════════════════════════════ */

/* ─── THE PRESS STARTS — once-per-session opening sheet ─── */
.intro {
  position: fixed; inset: 0; z-index: 800;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: transform .6s cubic-bezier(.76, 0, .24, 1);
}
.intro.is-away { transform: translateY(-101%); }
.intro__box { width: min(720px, 84vw); text-align: center; }
.intro__rule {
  height: 2px; background: var(--rule);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .5s cubic-bezier(.7, 0, .3, 1);
}
.intro__rule--b { height: 1px; transition-delay: .1s; }
.intro.s1 .intro__rule { transform: scaleX(1); }
.intro__name {
  font-family: var(--serif); font-weight: 800;
  font-size: clamp(42px, 7.4vw, 88px); line-height: 1.1; letter-spacing: -.02em;
  color: var(--ink); padding: 14px 4px 18px;
  opacity: 0; transform: translateY(10px); filter: blur(7px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1), filter .55s ease;
}
.intro__name em { font-style: italic; font-weight: 500; color: var(--blue); }
.intro.s2 .intro__name { opacity: 1; transform: none; filter: none; }
.intro__meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 16px; opacity: 0; transition: opacity .4s ease;
}
.intro.s3 .intro__meta { opacity: 1; }
html:not(.intro-pending) .intro { display: none; }
/* hold the hero's own entrances until the sheet lifts */
html.intro-pending .hero0__sub, html.intro-pending .hero0__cue,
html.intro-pending .hero0__try, html.intro-pending .hero0__desk,
html.intro-pending .hero0__mast, html.intro-pending .folionav { animation-play-state: paused; }

/* ─── HERO, FULL SCALE — dateline masthead + viewport headline ─── */
.hero0--desk .hero0__sheet {
  flex: 1; width: 100%; max-width: 1360px; margin: 0 auto;
  display: flex; flex-direction: column;
  padding: clamp(8px, 2.2vh, 26px) var(--gutter) 6px;
}
.hero0__mast {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-3);
  border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule-soft);
  padding: 9px 2px 10px;
  opacity: 0; transform: translateY(16px);
  animation: heroup .8s cubic-bezier(.2, .7, .2, 1) .05s forwards;
}
.hero0__mast-mid { color: var(--blue); }
.hero0--desk .hero0__title--page {
  font-size: clamp(46px, 9.2vw, 126px);
  line-height: .92; letter-spacing: -.038em;
  margin: clamp(12px, 2.4vh, 26px) 0 clamp(12px, 2.2vh, 24px);
}
.hero0--desk .hero0__grid { flex: 1; max-width: none; padding: 0; align-items: center; }
/* on press-run visits the words do the entrance, not the fade */
body.pressrun .hero0__title { animation: none; opacity: 1; transform: none; }
.hw-m {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding: .08em .08em .16em 0; margin: -.08em -.08em -.16em 0;
}
.hw {
  display: inline-block; transform: translateY(118%);
  transition: transform .85s cubic-bezier(.19, .85, .22, 1) calc(var(--wi) * 72ms + 90ms);
  will-change: transform;
}
.hw--em { color: var(--blue); font-style: italic; font-weight: 500; }
body.intro-done .hw { transform: none; }

/* the desk rides a stack of earlier editions; JS drives tilt + scroll drift.
   The sheets live on the WRAPPER (negative-z children paint above their own
   element's background — on .desk they would cover the plate's interior). */
.hero0__desk { perspective: 1400px; position: relative; z-index: 0; }
.desk {
  will-change: transform;
  box-shadow: 0 1px 0 var(--rule-soft), 0 32px 60px -38px rgba(20, 23, 26, .55);
}
.hero0__desk::before {
  content: ''; position: absolute; left: 10px; right: -6px; top: 12px; bottom: 16px; z-index: -1;
  background: var(--paper-bright); border: 1px solid var(--rule-soft);
  transform: rotate(1.2deg);
}
.hero0__desk::after {
  content: ''; position: absolute; left: -8px; right: 14px; top: 18px; bottom: 10px; z-index: -1;
  background: var(--paper-cool); border: 1px solid var(--rule-soft-2);
  transform: rotate(-1.8deg);
}

/* ─── THE INK CURSOR — a trailing ring that names what it hovers ─── */
.cur {
  position: fixed; left: 0; top: 0; z-index: 900; pointer-events: none;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border: 1.5px solid var(--blue); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: width .28s cubic-bezier(.2,.8,.3,1), height .28s cubic-bezier(.2,.8,.3,1),
              margin .28s cubic-bezier(.2,.8,.3,1), background-color .28s, opacity .3s;
}
.cur.is-live { opacity: 1; }
.cur__label {
  font-family: var(--mono); font-size: 8px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600; color: var(--blue); opacity: 0; transition: opacity .2s;
}
.cur.is-on { width: 62px; height: 62px; margin: -31px 0 0 -31px; background: rgba(61, 90, 254, .07); }
.cur.is-on .cur__label { opacity: 1; }
.cur.is-link { width: 44px; height: 44px; margin: -22px 0 0 -22px; }

/* ─── GHOST FOLIOS — the section number as a printed watermark ─── */
.page { position: relative; z-index: 0; }
.page-ghost {
  position: absolute; top: -14px; right: -1vw; z-index: -1; pointer-events: none;
  font-family: var(--serif); font-weight: 900; line-height: 1; letter-spacing: -.05em;
  font-size: clamp(150px, 21vw, 330px);
  color: transparent; -webkit-text-stroke: 1.5px rgba(20, 23, 26, .09);
  user-select: none; will-change: transform;
}
@supports not (-webkit-text-stroke: 1px black) { .page-ghost { color: rgba(20, 23, 26, .045); } }

/* ─── THE RECORD — scroll-scrubbed typographic interstitial.
       A tall scroll TRACK with a sticky, viewport-height STAGE: as you scroll
       the track, the stage holds centre-screen and JS scrubs the beats to the
       scroll position (see `#interlude` in script.js, driven off the rAF spine —
       my own scrollProgress, NOT a GSAP pin, so it can't render out of place or
       double-fire). The chat line fades in, holds, evaporates; the Brief line
       stamps in; the rule inks — all tied to how far you've scrolled. ─── */
.interlude { position: relative; height: 220vh; }
.interlude__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px var(--gutter);
}
.interlude__dies {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(24px, 3.4vw, 48px); line-height: 1.2; color: var(--ink-3);
  margin-bottom: clamp(20px, 4vh, 44px); max-width: 1100px;
  opacity: 0; transform: translateY(20px); will-change: opacity, transform, filter;
}
.interlude__record {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(46px, 7.6vw, 116px); line-height: .98; letter-spacing: -.03em;
  color: var(--ink); max-width: 1100px;
  opacity: 0; transform: translateY(38px) scale(1.05); will-change: opacity, transform;
}
.interlude__record em { font-style: italic; font-weight: 500; color: var(--blue); }
.interlude__ul {
  display: block; width: min(46%, 420px); height: 12px; margin: 18px auto 0;
  color: var(--blue); opacity: .75; overflow: visible;
}
.interlude__ul path {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  stroke-dasharray: 320; stroke-dashoffset: 320;
}
/* no-JS / reduced motion: no scroll-scrub — the track collapses and both lines
   simply read, statically and legibly. */
html:not(.js) .interlude,
.interlude--static { height: auto; }
html:not(.js) .interlude__stage,
.interlude--static .interlude__stage { position: static; height: auto; min-height: 78vh; }
html:not(.js) .interlude__dies, html:not(.js) .interlude__record, html:not(.js) .interlude__ul path,
.interlude--static .interlude__dies, .interlude--static .interlude__record, .interlude--static .interlude__ul path {
  opacity: 1; transform: none; filter: none; stroke-dashoffset: 0;
}

/* ─── THE SCREENING ROOM — the paper dims to warm ink around the film.
       (V3: the dark now rides the sheet system's --stock layer — the old
       box-shadow/clip-path full-bleed trick is gone.) ─── */
#pfilm.is-dark { --stock: #1C1712; }
#pfilm .kicker, #pfilm .headline, #pfilm .deck,
#pfilm .filmreel__cutline, #pfilm .page-rule { transition: color .7s ease, background-color .7s ease, border-color .7s ease; }
#pfilm.is-dark .kicker { color: #A9B6FF; }
#pfilm.is-dark .headline { color: #F3EDDD; }
#pfilm.is-dark .headline em { color: #8FA2FF; }
#pfilm.is-dark .deck { color: #C9C1AD; }
#pfilm.is-dark .page-rule { background: #F3EDDD; }
#pfilm.is-dark .page-rule::after { background: #F3EDDD; }
#pfilm.is-dark .filmreel__cutline { color: #B8B09C; }
#pfilm.is-dark .filmreel__plate { border-color: #E8E2D2; }
#pfilm.is-dark .page-ghost { -webkit-text-stroke-color: rgba(243, 237, 221, .10); }

/* ─── THE VELOCITY WIRE — JS drives it; skews with scroll ─── */
html.js .wire__tape.is-js { animation: none; will-change: transform; }

/* ─── LIVING GRAIN — a faint moving newsprint grain over the whole sheet ─── */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .paper-texture::after {
    content: ''; position: absolute; inset: -140px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    opacity: .045; animation: grain 6s steps(8) infinite;
  }
  @keyframes grain {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-60px, 40px); }
    50%  { transform: translate(40px, -50px); }
    75%  { transform: translate(-30px, -30px); }
    100% { transform: translate(50px, 60px); }
  }
}

/* ─── Responsive ─── */
@media (max-width: 980px) {
  .hero0--desk .hero0__title--page { font-size: clamp(42px, 12vw, 72px); }
  .hero0__mast-mid { display: none; }
  .page-ghost { font-size: clamp(120px, 26vw, 200px); top: -8px; }
  /* a little less scroll-track on phones (the scrub still holds full-screen) */
  .interlude { height: 190vh; }
}
@media (max-height: 760px) and (min-width: 981px) {
  .hero0--desk .hero0__title--page { font-size: clamp(40px, 6.6vw, 92px); margin: 12px 0 14px; }
}

/* ─── Guards ─── */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  .hero0__mast { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hw, .hw-m { transform: none !important; transition: none !important; }
  .cur { display: none !important; }
  .page-ghost { transform: none !important; }
  .desk { transform: none !important; }
  #pfilm, #pfilm.is-dark { transition: none; }
  /* the record simply reads, statically — the scroll track collapses */
  .interlude { height: auto !important; }
  .interlude__stage { position: static !important; height: auto !important; min-height: 78vh; }
  .interlude__dies, .interlude__record { opacity: 1 !important; transform: none !important; animation: none !important; filter: none !important; }
  .interlude__ul path { stroke-dashoffset: 0 !important; animation: none !important; }
}
html:not(.js) .hero0__mast { opacity: 1; animation: none; }
@media print {
  .intro, .cur, .page-ghost, .interlude { display: none !important; }
  #pfilm, #pfilm.is-dark { background: #fff; box-shadow: none; clip-path: none; }
}


/* ════════════════════════════════════════════════════════════════════
   2026-07 OVERHAUL · ACT III — "THE EDITION"
   The page becomes a press run: every section is a SHEET with its own
   stock, laid over the one before it; the specimens become a pinned
   horizontal press line whose paper colour bleeds into the site; giant
   running heads travel with your scroll; headlines set themselves from
   loose sorts; photos develop through a halftone screen; the last sheet
   tears open. Direction doc: RINGLIO-SITE-V3-EDITION-DIRECTION.md
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1 · THE SHEET SYSTEM ─── */
.page {
  --stock: var(--paper);
  --sheet-lift: 30px;          /* how far this sheet overlaps the one above */
  padding-bottom: 44px;
}
/* the sheet itself: a full-bleed stock layer behind the section's content —
   a ::before (no descendants) so pinned children keep position:fixed */
.page::before {
  content: ''; position: absolute; z-index: -2;
  top: calc(-1 * var(--sheet-lift)); bottom: 0;
  left: 50%; width: 100vw; transform: translateX(-50%);
  background: var(--stock);
  border-top: 1px solid rgba(20, 23, 26, .16);
  box-shadow: 0 -26px 44px -32px rgba(20, 23, 26, .5);
  transition: background .8s ease;
}
/* running head — real newspaper furniture on every sheet's top margin */
.page::after {
  content: "The Ringlio Brief · " attr(data-folio);
  position: absolute; left: 0; right: 0; top: calc(-1 * var(--sheet-lift) + 9px);
  text-align: center; pointer-events: none;
  font-family: var(--mono); font-size: 8px; letter-spacing: .3em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-4);
  opacity: .8;
}
#pfilm.is-dark::after { color: rgba(243, 237, 221, .45); }

/* the stock rhythm — each sheet its own paper */
#pfilm   { --stock: var(--paper); --sheet-lift: 0px; }   /* no lift: the wire sits directly above */
#p4c     { --stock: #F8F3E5; }    /* re-inked live to the active specimen's paper */
#p2      { --stock: #E9E7DF; }    /* cooler stock for the chat-world argument */
#p3      { --stock: #F8F3E5; }
#p9      { --stock: #EFE9D9; }
#p7      { --stock: #F5EEDC; }
#pricing { --stock: #E9E3D3; }
#p8      { --stock: #F8F3E5; }

/* the last sheet tears open (clip the stock layer itself — pseudos are safe) */
#p8::before {
  border-top: 0; box-shadow: none;
  clip-path: polygon(0.0% 16px, 2.5% 0, 5.0% 16px, 7.5% 0, 10.0% 16px, 12.5% 0, 15.0% 16px, 17.5% 0, 20.0% 16px, 22.5% 0, 25.0% 16px, 27.5% 0, 30.0% 16px, 32.5% 0, 35.0% 16px, 37.5% 0, 40.0% 16px, 42.5% 0, 45.0% 16px, 47.5% 0, 50.0% 16px, 52.5% 0, 55.0% 16px, 57.5% 0, 60.0% 16px, 62.5% 0, 65.0% 16px, 67.5% 0, 70.0% 16px, 72.5% 0, 75.0% 16px, 77.5% 0, 80.0% 16px, 82.5% 0, 85.0% 16px, 87.5% 0, 90.0% 16px, 92.5% 0, 95.0% 16px, 97.5% 0, 100.0% 16px, 100% 100%, 0% 100%);
}
#p8::after { content: none; }   /* the tear replaces the running head */

/* ─── 2 · RUNNING HEADS AT SCALE — giant kinetic type bands ─── */
.runhead {
  position: relative; z-index: 1; overflow: hidden; pointer-events: none;
  width: 100vw; margin-left: calc(50% - 50vw);
  padding: clamp(30px, 7vh, 72px) 0;
}
.runhead__track {
  display: inline-block; white-space: nowrap; will-change: transform;
  font-family: var(--serif); font-weight: 800;
  font-size: clamp(54px, 9.5vw, 148px); line-height: 1; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(20, 23, 26, .32);
}
.runhead__track em { font-style: italic; font-weight: 500; -webkit-text-stroke: 0; color: var(--blue); }
@supports not (-webkit-text-stroke: 1px black) { .runhead__track { color: rgba(20, 23, 26, .14); } }

/* ─── 3 · THE PRESS LINE — horizontal specimen gallery (desktop) ─── */
.spec__stage { position: relative; }
.spec__stage .spec__tabs { border-bottom: 1px solid var(--rule); margin-bottom: clamp(18px, 3vh, 34px); }
.spec__track {
  display: flex; align-items: stretch; gap: clamp(24px, 3vw, 48px);
  width: max-content; will-change: transform;
}
/* every paper the SAME height (the tallest edition sets it) — the track
   stretches the panels, the panel stretches its paper to fill */
.spec__panel { flex: 0 0 min(78vw, 960px); display: flex; }
.spec__panel .spec__paper { border-top: 1px solid var(--spec-rule, var(--rule)); flex: 1; }

/* ─── 4 · HERO LOCKUP — the masthead headline sits FULLY above the desk row
       (no overlap: the giant italic can never collide with the plate). The
       front-page read comes from scale + the dateline rule, not z-layering. ─── */
@media (min-width: 981px) {
  .hero0--desk { position: relative; }
  .hero0--desk .hero0__title--page { margin-bottom: clamp(20px, 3.4vh, 40px); }
  .hero0--desk .hero0__grid { margin-top: 0; align-items: start; }
  .hero0--desk .hero0__main { padding-top: clamp(6px, 1.5vh, 16px); }
  .hero0--desk .hero0__desk { z-index: 1; }
  /* the cue is absolutely pinned to the hero's bottom edge, so a tall desk
     can never push it below the fold (left/right + margin auto centring) */
  .hero0--desk .hero0__cue {
    position: absolute; left: 0; right: 0; bottom: 14px;
    margin: 0 auto; width: max-content;
  }
}

/* ─── 5 · HALFTONE DEVELOPS — specimen photos arrive through a dot screen.
       JS registers --ht and adds html.ht-ok; everyone else keeps the curtain. ─── */
html.ht-ok .spec__paper .brief-hero::after { display: none; }
html.ht-ok .spec__paper .brief-hero img {
  --ht: 101%;
  -webkit-mask-image: radial-gradient(circle, #000 var(--ht), transparent calc(var(--ht) + 8%));
          mask-image: radial-gradient(circle, #000 var(--ht), transparent calc(var(--ht) + 8%));
  -webkit-mask-size: 13px 13px; mask-size: 13px 13px;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
}
html.ht-ok .spec__paper .brief-hero:not(.is-open) img { --ht: 0%; }
html.ht-ok .spec__paper .brief-hero.is-open img { animation: ht-in .95s cubic-bezier(.3, .6, .3, 1) both; }
@keyframes ht-in { from { --ht: 0%; } to { --ht: 101%; } }

/* ─── Guards ─── */
@media (max-width: 980px) {
  .page { --sheet-lift: 22px; }
  .runhead__track { font-size: clamp(44px, 13vw, 80px); -webkit-text-stroke-width: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .runhead__track { transform: none !important; }
  .page::before { transition: none; }
  html.ht-ok .spec__paper .brief-hero.is-open img { animation: none; }
}
@media print {
  .page::before, .page::after, .runhead { display: none !important; }
  .page { --stock: #fff; }
}


/* ════════════════════════════════════════════════════════════════════
   2026-07 · ACT III BUG-FIX PASS
   1 · Hero fits laptop heights (≤900px tall) — everything above the fold.
   2 · Press-line papers read "above the fold": condensed front pages that
       fit the pinned viewport (side body + second rail block fold away,
       lead body clamps, letterboxed photo).
   3 · Page-turn leaves don't re-develop their photos (halftone flash).
   4 · The interlude only needs its pin-clearance margin where pins exist.
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1 · HERO ON LAPTOP HEIGHTS ─── */
/* the shell's legacy 30px top padding pushed the 100svh hero 30px past the
   fold on every screen — the hero carries its own nav clearance */
.paper-shell { padding-top: 0; }

@media (min-width: 981px) and (max-height: 900px) {
  .hero0--desk { padding-top: calc(70px + env(safe-area-inset-top, 0px)); padding-bottom: 14px; }
  .hero0--desk .hero0__sheet { padding-top: 2px; }
  .hero0__mast { padding: 6px 2px 7px; }
  .hero0--desk .hero0__title--page { font-size: clamp(40px, 7.2vw, 94px); margin-top: 6px; margin-bottom: 16px; }
  .hero0--desk .hero0__grid { margin-top: 0; }
  .hero0--desk .hero0__main { padding-top: 2px; }
  .hero0--desk .hero0__sub { font-size: 15px; }
  .hero0__try { margin-top: 18px; }
  .hero0__chip { padding: 7px 11px 8px; font-size: 12.5px; }
  .desk { min-height: 360px; padding-top: 11px; }
  .desk__composer { padding: 10px 0 9px; min-height: 42px; }
  .desk__col .headline { font-size: clamp(21px, 2vw, 28px); }
  .desk__col .bodycols { font-size: 12.5px; line-height: 1.52; }
  .desk__col .brief-fig { margin: 10px 0 2px; padding: 9px 0; }
  .desk__col .brief-fig__val { font-size: clamp(24px, 2.2vw, 34px); }
  .desk__foot { margin-top: 9px; }
  .hero0--desk .hero0__cue { bottom: 8px; }
  .hero0__cue-line { height: 22px; }
}

/* ─── 2 · PRESS-LINE PAPERS FIT THE PIN — "above the fold" condensation ─── */
.spec__panel .spec__paper { padding: clamp(16px, 1.8vw, 26px); }
.spec__panel .spec__masthead { padding-bottom: 10px; margin-bottom: 16px; }
.spec__panel .spec__mast-title { font-size: clamp(24px, 2.9vw, 38px); }
.spec__panel .brief-hero { aspect-ratio: 21 / 9; }   /* letterboxed — the fold crop */
.spec__panel .dbrief--lead .dbrief__body {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.spec__panel .dbrief--side .dbrief__body { display: none; }        /* head + figure carry it */
.spec__panel .spec-rail__block + .spec-rail__block { display: none; }  /* keep "what they told us" */
.spec__panel .brief-fig { margin: 12px 0; padding: 9px 0; gap: 12px; }
.spec__panel .brief-fig__val { font-size: clamp(26px, 2.4vw, 38px); }
.spec__panel .dbrief__byline { margin-top: 12px; }

/* ─── 3 · PAGE-TURN LEAVES HOLD THEIR INK (no halftone re-develop) ─── */
html.ht-ok .spec__leaf .brief-hero.is-open img { animation: none; --ht: 101%; }

/* ─── 4 · INTERLUDE MARGIN ONLY WHERE THE PINS ARE ─── */
@media (max-width: 980px) {
  .interlude { margin-top: 0; }
}