/* ════════════════════════════════════════════════════════════
   AREA 51 SOFTWARE — V4 design system (shared) — best-of-breed
   Asymmetric · deepened-jade accent · brass secondary · gold heritage
   Michroma (display / "51" logo) + Hanken Grotesk (body) · WCAG 2.1 AA
   Evolved from Fresh 3 → V4: toned-parchment bg, Michroma display type,
   gold heritage accent. See /BRANDING/v4/ for the canonical source.
   Single source of truth — change a token here, the whole site follows.
   ════════════════════════════════════════════════════════════ */

:root {
  --bg:        #D9D2BF;   /* toned parchment — darker empty space for card contrast (V4) */
  --surface:   #FBF9F3;
  --elevated:  #EFEADD;   /* V4 */
  --text:      #17180F;   /* ink — 15.9:1 */
  --text-soft: #45463A;   /* 7:1 */
  --muted:     #5E5F54;   /* 5.3:1 */
  --emerald:   #0E5C54;   /* deepened jade — primary, 6.95:1 */
  --emerald-lg:#14756B;
  --jade-bright:#0E5C54;  /* marks: dark jade on light bg */
  --brass:     #8A6E2E;   /* secondary, 4.8:1 */
  --brass-lg:  #A6863A;
  --gold-heritage:#C9A84C; /* heritage accent — the triangle "51" mark (V4) */
  --line:      rgba(23,24,15,0.16);
  --line-str:  rgba(23,24,15,0.42);
  --on-acc:    #FBF9F3;
  --focus:     #0E5C54;
  --tile:      #14160E;
  /* legacy-var aliases (resolve per-theme) so old inline styles map to the brand */
  --white: var(--text); --secondary: var(--text-soft); --gold: var(--brass);
  --gold-line: var(--line); --gold-dim: color-mix(in srgb, var(--brass) 12%, transparent);
  --teal: var(--emerald); --amber: var(--brass); --coral: var(--brass);
  --font-display: 'Michroma', sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;

  /* ───── Per-product accents (V4 sub-brand colors) — theme-aware ─────
     Mirrors /BRANDING/v4/area51-tokens.css. `-ink` = small-text-legible
     variant (deep on light per the V4 ≥3:1 / ≥4.5:1-small rule; bright on dark).
     NOTE: Overt-Ops = tangerine (working value, applied ahead of canonical per Neil
     2026-06-13). COLOR-REVISIT lists ~#F26419; sync back into area51-tokens.css when
     locked there. Dual like amber: vivid for lines/fills, deep -dark for small text. */
  --a51-md51:#2EC4A0;       --a51-md51-dark:#1A8C72;
  --a51-agentx:#759412;     --a51-agentx-dark:#4E660C;   --a51-agentx-bright:#B8F03A;
  --a51-botblock51:#E05A4E; --a51-botblock51-dark:#A83C32;
  --a51-recon51:#D11C84;    --a51-recon51-dark:#A8155F;
  --a51-opus51:#4A35C8;     --a51-opus51-dark:#3A2AA0;
  --a51-overtops:#F26419;   --a51-overtops-dark:#A8400C; --a51-overtops-bright:#F26419;
  /* small-text ink (deep on light) */
  --a51-md51-ink:var(--a51-md51-dark);
  --a51-agentx-ink:var(--a51-agentx-dark);
  --a51-botblock51-ink:var(--a51-botblock51-dark);
  --a51-recon51-ink:var(--a51-recon51-dark);
  --a51-opus51-ink:var(--a51-opus51-dark);
  --a51-overtops-ink:var(--a51-overtops-dark);
}
[data-theme="dark"] {
  /* product accents that brighten for dark-mode contrast (match V4 tokens) */
  --a51-recon51:#F25BB0;
  --a51-overtops:#FB7A2E;
  --a51-agentx:#B8F03A;
  --a51-opus51:#6E5BF0;
  /* on dark the bright accent reads fine as small text */
  --a51-md51-ink:var(--a51-md51);
  --a51-agentx-ink:var(--a51-agentx);
  --a51-botblock51-ink:var(--a51-botblock51);
  --a51-recon51-ink:var(--a51-recon51);
  --a51-opus51-ink:var(--a51-opus51);
  --a51-overtops-ink:var(--a51-overtops);
  --bg:        #14160E;
  --surface:   #1D2016;
  --elevated:  #272B1E;
  --text:      #EEEBDD;
  --text-soft: #C2BFAE;
  --muted:     #8A8C7C;
  --emerald:   #46CBAA;
  --emerald-lg:#62DCC2;
  --jade-bright:#62DCC2;  /* marks: bright jade on dark bg */
  --brass:     #C9A24C;
  --brass-lg:  #DCB661;
  --line:      rgba(238,235,221,0.16);
  --line-str:  rgba(238,235,221,0.40);
  --on-acc:    #14160E;
  --focus:     #62DCC2;
  --tile:      #0E1009;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text-soft);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; transition: background .4s, color .4s; overflow-x: hidden;
}
a { color: var(--emerald); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

/* a11y utilities */
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:1rem; top:-3.5rem; z-index:200; background:var(--emerald); color:var(--on-acc); padding:.7rem 1.1rem; border-radius:4px; font-family:var(--font-body); font-weight:700; text-decoration:none; transition:top .15s; }
.skip-link:focus { top:1rem; }

.wrap { max-width: 78rem; margin: 0 auto; padding: 0 clamp(1.4rem, 5vw, 4rem); }
.eyebrow { font-family: var(--font-body); font-weight:700; font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--emerald); display:inline-flex; align-items:center; gap:.7rem; }
.eyebrow::before { content:''; width:2rem; height:2px; background:var(--brass); }

/* ── NAV ── */
.nav { position:sticky; top:0; z-index:50; backdrop-filter:blur(12px); background:color-mix(in srgb, var(--bg) 86%, transparent); border-bottom:1px solid var(--line); }
.nav-in { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; }
.nav-brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.nav-brand .word { font-family:var(--font-display); font-weight:800; font-size:1.45rem; letter-spacing:.02em; color:var(--text); }
.nav-brand .word .n { color:var(--emerald); }
.nav-right { display:flex; align-items:center; gap:1.8rem; }
.nav-right a:not(.nav-cta) { font-family:var(--font-body); font-weight:600; font-size:.92rem; letter-spacing:.02em; color:var(--text-soft); text-decoration:none; }
.nav-right a:not(.nav-cta):hover { color:var(--emerald); }
.nav-cta { font-family:var(--font-body); font-weight:700; font-size:.85rem; letter-spacing:.04em; background:var(--emerald); color:var(--on-acc)!important; padding:.6rem 1.1rem; border-radius:3px; text-decoration:none; transition:background .18s, transform .18s; }
.nav-cta:hover { background:var(--emerald-lg); transform:translateY(-1px); }
.toggle { display:inline-flex; border:1px solid var(--line-str); border-radius:2px; }
.toggle button { background:none; border:none; cursor:pointer; min-width:44px; min-height:40px; font-family:var(--font-body); font-weight:600; font-size:.9rem; color:var(--text-soft); display:inline-flex; align-items:center; justify-content:center; }
.toggle button[aria-pressed="true"] { background:var(--text); color:var(--bg); }

/* ── BUTTONS ── */
.btn { font-family:var(--font-body); font-weight:700; font-size:.95rem; letter-spacing:.02em; padding:.9rem 1.7rem; border-radius:3px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; border:2px solid transparent; transition:all .18s; }
.btn-1 { background:var(--emerald); color:var(--on-acc); }
.btn-1:hover { background:var(--emerald-lg); transform:translateY(-2px); }
.btn-2 { border-color:var(--line-str); color:var(--text); }
.btn-2:hover { border-color:var(--emerald); color:var(--emerald); }

/* ── HERO ── */
.hero { position:relative; padding:clamp(2.5rem,7vh,5rem) 0 clamp(2rem,5vh,3.5rem); }
.hero-grid { display:grid; grid-template-columns:1fr; gap:2.4rem; align-items:center; }
@media (min-width:920px){ .hero-grid { grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(2rem,5vw,4rem); } }
.hero-in { max-width:44ch; }
.hero-in h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem,4.3vw,3.55rem); line-height:1.04; letter-spacing:0; color:var(--text); text-transform:uppercase; margin:1.2rem 0 0; }
.hero-in h1 .em { color:var(--emerald); }
.hero-in .lede { font-size:1.28rem; line-height:1.5; color:var(--text-soft); max-width:36ch; margin-top:1.4rem; }
.hero-in .cta { margin-top:2.1rem; display:flex; gap:1rem; flex-wrap:wrap; }
.hero-banner { position:relative; }
.hero-banner .ghost51 { position:absolute; left:64%; top:50%; transform:translate(-50%,-50%); font-family:var(--font-display); font-weight:800; font-size:clamp(6.19rem,15.75vw,14.63rem); line-height:.8; letter-spacing:-.03em; white-space:nowrap; color:color-mix(in srgb, var(--text) 6%, transparent); z-index:0; pointer-events:none; user-select:none; }
.hero-banner .ghost51 .g5 { position:relative; }
.hero-banner .ghost51 .wm-area { position:absolute; left:0; right:0; bottom:88%; text-align:center; white-space:nowrap; overflow:hidden; font-size:.20em; letter-spacing:.03em; line-height:1; text-transform:uppercase; color:color-mix(in srgb, var(--text) 20%, transparent); }
.hero-banner > svg { position:relative; z-index:1; display:block; width:100%; height:auto; }
@media (max-width:919.98px){ .hero-banner .ghost51 { left:50%; } } /* single-column: re-center watermark behind saucer */

/* ── SECTIONS ── */
.block { padding:clamp(3rem,7vh,5rem) 0; border-top:1px solid var(--line); }
.sec-no { font-family:var(--font-display); font-weight:700; font-size:.9rem; letter-spacing:.2em; color:var(--brass); }
h2.title { font-family:var(--font-display); font-weight:800; font-size:clamp(1.45rem,3vw,2.2rem); text-transform:uppercase; color:var(--text); letter-spacing:0; line-height:1.12; margin:.3rem 0 .5rem; }
.sec-lead { max-width:60ch; color:var(--text-soft); font-size:1.1rem; margin-bottom:2rem; }

/* ── ART-DECO SEPARATORS ── */
.sep { display:flex; align-items:center; gap:1.2rem; margin:clamp(2.5rem,6vh,4rem) 0; }
.sep .motif { flex:none; }
.sep .ln { flex:1; height:2px; max-width:60rem; background:linear-gradient(90deg, var(--brass), transparent); }
.sep.dbl .ln, .sep.dbl .pre { height:7px; border-top:1.5px solid var(--brass); border-bottom:1.5px solid var(--brass); }
.sep.dbl .pre { width:3rem; flex:none; }
.sep.dbl .ln { background:none; }

/* ── FEATURED ── */
.featured { position:relative; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--acc, var(--brass)); border-radius:8px; padding:clamp(1.8rem,4vw,3rem); display:grid; grid-template-columns:1.4fr 1fr; gap:2.4rem; align-items:center; }
@media (max-width:820px){ .featured { grid-template-columns:1fr; } .featured .featured-visual { order:-1; } }
.featured .status { position:absolute; top:-.8rem; left:1.6rem; background:var(--bg); border:1px solid var(--emerald); color:var(--emerald); font-family:var(--font-body); font-weight:700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; padding:.25rem .7rem; border-radius:3px; display:flex; align-items:center; gap:.4rem; }
.featured .status::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--emerald); }
.featured .op { font-family:var(--font-body); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--acc-ink, var(--brass)); }
.featured h3 { font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,3.2vw,2.1rem); text-transform:uppercase; color:var(--text); letter-spacing:0; line-height:1.08; margin:.4rem 0 .3rem; }
.featured .tag { font-family:var(--font-body); font-weight:600; font-size:.95rem; color:var(--emerald); letter-spacing:.02em; margin-bottom:1rem; }
.featured p { color:var(--text-soft); line-height:1.6; margin-bottom:1.2rem; }
.featured ul { list-style:none; margin-bottom:1.4rem; display:flex; flex-direction:column; gap:.45rem; }
.featured ul li { font-size:.95rem; color:var(--text-soft); padding-left:1.4em; position:relative; line-height:1.45; }
.featured ul li::before { content:''; position:absolute; left:0; top:.55em; width:12px; height:5px; border-radius:6px; background:var(--acc, var(--jade-bright)); }
.featured .featured-cta { display:flex; gap:.8rem; flex-wrap:wrap; }
.featured-visual img { width:100%; height:auto; border:1px solid var(--line); border-radius:6px; box-shadow:0 24px 50px -28px rgba(0,0,0,.45); }

/* ── PRODUCT CARDS ── */
.products-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1.2rem; }
.product-card { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:1.8rem 1.6rem; cursor:pointer; position:relative; overflow:hidden; transition:transform .2s, border-color .2s; }
.product-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--acc, var(--emerald)); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.product-card:hover, .product-card.active { transform:translateY(-4px); border-color:var(--acc, var(--emerald)); }
.product-card:hover::before, .product-card.active::before { transform:scaleX(1); }
.product-card .status { font-family:var(--font-body); font-weight:600; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-str); border-radius:3px; padding:.18rem .5rem; display:inline-block; margin-bottom:.9rem; }
.product-card .op { font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--acc-ink, var(--acc, var(--emerald))); }
.product-card h3 { font-family:var(--font-display); font-weight:700; font-size:1.02rem; text-transform:uppercase; color:var(--text); letter-spacing:0; line-height:1.15; margin:.4rem 0 .4rem; }
.product-card .tag { font-size:.95rem; color:var(--muted); line-height:1.4; }
.product-expand { display:none; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.product-card.active .product-expand { display:block; }
.product-expand p { font-size:.98rem; color:var(--text-soft); line-height:1.55; margin-bottom:1rem; }
.product-expand ul { list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.product-expand ul li { font-size:.9rem; color:var(--text-soft); padding-left:1.3em; position:relative; line-height:1.4; }
.product-expand ul li::before { content:''; position:absolute; left:0; top:.5em; width:11px; height:5px; border-radius:6px; background:var(--acc, var(--jade-bright)); }

/* ── MISSION ── */
.mission { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
@media (max-width:820px){ .mission { grid-template-columns:1fr; } .mission .mission-art { order:-1; } }
.mission-art svg { width:min(300px,100%); height:auto; display:block; margin:0 auto; }
.pillars { display:flex; flex-direction:column; gap:1.3rem; margin-top:1.6rem; }
.pillar { border-left:2px solid var(--line-str); padding-left:1.2rem; transition:border-color .2s; }
.pillar:hover { border-color:var(--emerald); }
.pillar .pt { font-family:var(--font-body); font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--emerald); margin-bottom:.3rem; }
.pillar .pd { font-size:1rem; color:var(--text-soft); line-height:1.5; }

/* ── DISPATCH ── */
.dispatch { display:grid; grid-template-columns:auto 1fr auto; gap:1.6rem; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:1.6rem 2rem; text-decoration:none; transition:border-color .25s, transform .2s; position:relative; overflow:hidden; }
.dispatch::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--brass); }
.dispatch:hover { border-color:var(--emerald); transform:translateY(-3px); }
.dispatch .new { font-family:var(--font-body); font-weight:700; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-acc); background:var(--brass); padding:.3rem .6rem; border-radius:3px; align-self:start; }
.dispatch .eyebrow2 { font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin-bottom:.3rem; }
.dispatch .dt { font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--text); letter-spacing:.01em; line-height:1.3; margin-bottom:.3rem; text-transform:uppercase; }
.dispatch .dx { font-size:.95rem; color:var(--text-soft); }
.dispatch .arrow { font-size:1.4rem; color:var(--muted); transition:color .2s, transform .2s; }
.dispatch:hover .arrow { color:var(--emerald); transform:translateX(4px); }
@media (max-width:720px){ .dispatch { grid-template-columns:1fr; } .dispatch .arrow { display:none; } }

/* ── FOOTER ── */
.footer { border-top:1px solid var(--line); padding:3rem 0 4rem; margin-top:2rem; }
.footer-inner { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem; margin-bottom:2rem; }
@media (max-width:720px){ .footer-inner { grid-template-columns:1fr; gap:2rem; } }
.footer .ftag { font-family:var(--font-body); font-weight:500; font-size:.9rem; color:var(--text-soft); line-height:1.6; max-width:34ch; margin-top:.8rem; }
.footer .col-title { font-family:var(--font-body); font-weight:700; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin-bottom:.9rem; }
.footer ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.footer ul a { font-size:.98rem; color:var(--text-soft); text-decoration:none; }
.footer ul a:hover { color:var(--emerald); }
.footer-bottom { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.4rem; border-top:1px solid var(--line); font-family:var(--font-body); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* reveal */
.reveal { opacity:1; transform:none; transition:opacity .7s, transform .7s; }
.reveal.is-hidden { opacity:0; transform:translateY(22px); }

/* ── BLOG LANDING ── */
.blog-head { padding: clamp(2.5rem,6vh,4rem) 0 1.5rem; }
.blog-head h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem,7vw,5rem); text-transform:uppercase; color:var(--text); letter-spacing:.01em; margin:.6rem 0 .4rem; }
.blog-head p { color:var(--text-soft); font-size:1.15rem; max-width:60ch; }
.article-list { display:flex; flex-direction:column; gap:1.1rem; padding-bottom:3rem; }
.article-card { display:grid; grid-template-columns:1fr auto; gap:1.6rem; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:1.6rem 1.9rem; text-decoration:none; position:relative; overflow:hidden; transition:border-color .25s, transform .2s; }
.article-card::before { content:''; position:absolute; top:0; left:0; bottom:0; width:3px; background:var(--card-accent,var(--emerald)); transform:scaleY(0); transform-origin:top; transition:transform .3s; }
.article-card:hover { border-color:var(--card-accent,var(--emerald)); transform:translateY(-3px); }
.article-card:hover::before { transform:scaleY(1); }
.article-card .meta { display:flex; gap:1.1rem; flex-wrap:wrap; align-items:center; margin-bottom:.5rem; }
.article-card .cat { font-family:var(--font-body); font-weight:700; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--card-accent,var(--brass)); }
.article-card .date, .article-card .rt { font-family:var(--font-body); font-weight:500; font-size:.78rem; letter-spacing:.06em; color:var(--muted); }
.article-card .at { font-family:var(--font-display); font-weight:700; font-size:1.25rem; text-transform:uppercase; color:var(--text); letter-spacing:.01em; line-height:1.25; margin-bottom:.4rem; }
.article-card .ax { color:var(--text-soft); font-size:.96rem; line-height:1.55; max-width:660px; }
.article-card .arrow { font-size:1.3rem; color:var(--muted); transition:color .2s, transform .2s; }
.article-card:hover .arrow { color:var(--emerald); transform:translateX(4px); }
@media (max-width:680px){ .article-card { grid-template-columns:1fr; } .article-card .arrow { display:none; } }

/* ── ARTICLE / PROSE ── */
.article-wrap { max-width: 46rem; margin:0 auto; }
.article-hero { padding: clamp(2rem,5vh,3.5rem) 0 1.4rem; border-bottom:1px solid var(--line); margin-bottom:2rem; }
.article-hero .cat { font-family:var(--font-body); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--emerald); }
.article-hero h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(2.1rem,5vw,3.4rem); text-transform:uppercase; color:var(--text); letter-spacing:.01em; line-height:1.05; margin:.6rem 0 .8rem; }
.article-hero .meta { font-family:var(--font-body); font-weight:500; font-size:.85rem; letter-spacing:.05em; color:var(--muted); display:flex; gap:1rem; flex-wrap:wrap; }
.prose { font-size:1.12rem; line-height:1.75; color:var(--text-soft); }
.prose > * + * { margin-top:1.1rem; }
.prose h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,3.2vw,2rem); text-transform:uppercase; color:var(--text); letter-spacing:.01em; margin-top:2.6rem; margin-bottom:.2rem; }
.prose h3 { font-family:var(--font-display); font-weight:700; font-size:1.3rem; text-transform:uppercase; color:var(--text); margin-top:1.8rem; }
.prose h4 { font-family:var(--font-body); font-weight:700; font-size:1.05rem; color:var(--text); margin-top:1.4rem; }
.prose a { color:var(--emerald); text-decoration:underline; text-underline-offset:2px; }
.prose strong { color:var(--text); }
.prose em { color:var(--text); }
.prose ul, .prose ol { padding-left:1.4rem; }
.prose li { margin-top:.4rem; }
.prose blockquote { border-left:3px solid var(--brass); padding:.4rem 0 .4rem 1.2rem; color:var(--text); font-style:italic; }
.prose code { font-family:'SF Mono',ui-monospace,monospace; font-size:.86em; background:color-mix(in srgb,var(--text) 9%,transparent); padding:.12em .4em; border-radius:4px; color:var(--text); }
.prose pre { background:#0f120c; color:#d8e0d4; border:1px solid var(--line); border-radius:8px; padding:1.2rem 1.3rem; overflow-x:auto; font-size:.85rem; line-height:1.6; }
[data-theme="dark"] .prose pre { background:#0a0c07; }
.prose pre code { background:none; padding:0; color:inherit; font-size:inherit; }
.prose img { max-width:100%; height:auto; border-radius:8px; border:1px solid var(--line); }
.prose hr { border:none; border-top:1px solid var(--line); margin:2rem 0; }
.prose table { width:100%; border-collapse:collapse; font-size:.95rem; display:block; overflow-x:auto; }
.prose th, .prose td { text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line); }
.prose th { color:var(--brass); font-family:var(--font-body); font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; }

/* ════ ARTICLE PAGES — content + legacy nav/footer compat ════ */
/* legacy nav (bare <nav> in articles) */
nav:not(.nav) { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; height:auto; padding:.9rem clamp(1.4rem,5vw,4rem); background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
nav:not(.nav) .nav-logo { display:none; }
nav:not(.nav) .nav-brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.nav-wordmark { display:flex; flex-direction:column; line-height:1; }
.nav-wordmark span:first-child { font-family:var(--font-display); font-weight:800; font-size:1.2rem; color:var(--text); letter-spacing:.04em; }
.nav-wordmark span:last-child { font-family:var(--font-body); font-weight:600; font-size:.66rem; color:var(--emerald); letter-spacing:.18em; }
.nav-links { display:flex; align-items:center; gap:1.6rem; list-style:none; }
.nav-links a { font-family:var(--font-body); font-weight:600; font-size:.92rem; color:var(--text-soft); text-decoration:none; letter-spacing:.02em; text-transform:none; }
.nav-links a:hover, .nav-links a.active { color:var(--emerald); }
@media (max-width:760px){ .nav-links li:not(:last-child){ display:none; } }

/* legacy footer (bare <footer> in articles) */
footer:not(.footer) { border-top:1px solid var(--line); background:transparent; padding:3rem clamp(1.4rem,5vw,4rem) 4rem; margin-top:2rem; }
.footer-brand-logo { display:none; }
.footer-tagline { font-family:var(--font-body); font-weight:500; font-size:.9rem; color:var(--text-soft); letter-spacing:0; line-height:1.6; }
.footer-col-title { font-family:var(--font-body); font-weight:700; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin-bottom:.9rem; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.footer-links a { font-size:.98rem; color:var(--text-soft); text-decoration:none; }
.footer-links a:hover { color:var(--emerald); }
.footer-copy { font-family:var(--font-body); font-size:.78rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }

/* article content */
.article-wrapper { max-width:46rem; margin:0 auto; padding:clamp(1.5rem,4vh,2.5rem) clamp(1.4rem,5vw,2rem) 4rem; }
.back-link { display:inline-block; font-family:var(--font-body); font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--emerald); text-decoration:none; margin-bottom:1.4rem; }
.back-link:hover { text-decoration:underline; }
.article-meta { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-bottom:.6rem; }
.article-category { font-family:var(--font-body); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--emerald); }
.article-date, .article-reading-time { font-family:var(--font-body); font-weight:500; font-size:.82rem; color:var(--muted); letter-spacing:.04em; }
.article-title { font-family:var(--font-display); font-weight:800; font-size:clamp(2.1rem,5vw,3.4rem); text-transform:uppercase; color:var(--text); letter-spacing:.01em; line-height:1.05; margin:.4rem 0 .8rem; }
.article-subtitle { font-size:1.2rem; line-height:1.55; color:var(--text-soft); margin-bottom:1rem; }
.article-divider { height:1px; background:var(--line); margin:1.2rem 0 2rem; }
.article-body { font-size:1.12rem; line-height:1.75; color:var(--text-soft); }
.article-body > * + * { margin-top:1.1rem; }
.article-body h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,3.2vw,2rem); text-transform:uppercase; color:var(--text); letter-spacing:.01em; margin-top:2.6rem; margin-bottom:.2rem; }
.article-body h3 { font-family:var(--font-display); font-weight:700; font-size:1.3rem; text-transform:uppercase; color:var(--text); margin-top:1.8rem; }
.article-body a { color:var(--emerald); text-decoration:underline; text-underline-offset:2px; }
.article-body strong, .article-body em { color:var(--text); }
.article-body ul, .article-body ol { padding-left:1.4rem; }
.article-body li { margin-top:.4rem; }
.article-body pre { background:#0f120c; color:#d8e0d4; border:1px solid var(--line); border-radius:8px; padding:1.2rem 1.3rem; overflow-x:auto; font-size:.84rem; line-height:1.6; }
[data-theme="dark"] .article-body pre { background:#0a0c07; }
.article-body pre code { background:none; padding:0; color:inherit; font-size:inherit; }
.tag-name { font-family:'SF Mono',ui-monospace,monospace; font-size:.85em; background:color-mix(in srgb,var(--text) 9%,transparent); padding:.1em .4em; border-radius:4px; color:var(--text); white-space:nowrap; }
.callout { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--brass); border-radius:6px; padding:1.2rem 1.3rem; margin:1.6rem 0; }
.callout-label { font-family:var(--font-body); font-weight:700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); display:block; margin-bottom:.4rem; }
.callout-classified { border-left-color:var(--emerald); }
.callout-classified .callout-label { color:var(--emerald); }
.answer-block { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--emerald); border-radius:6px; padding:1.2rem 1.3rem; margin:1.6rem 0; }
.answer-block-label { font-family:var(--font-body); font-weight:700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--emerald); display:block; margin-bottom:.4rem; }
.audit-table { width:100%; border-collapse:collapse; font-size:.95rem; margin:1.4rem 0; display:block; overflow-x:auto; }
.audit-table th, .audit-table td { text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line); }
.audit-table th { color:var(--brass); font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.article-cta { background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--emerald); border-radius:8px; padding:1.8rem; margin-top:2.6rem; text-align:center; }
.article-cta h3 { font-family:var(--font-display); font-weight:800; font-size:1.4rem; text-transform:uppercase; color:var(--text); margin-bottom:.6rem; }
.article-cta p { color:var(--text-soft); margin-bottom:1.2rem; }
.btn-primary, .article-body a.btn-primary { display:inline-block; font-family:var(--font-body); font-weight:700; font-size:.9rem; letter-spacing:.04em; background:var(--emerald); color:var(--on-acc); padding:.8rem 1.6rem; border-radius:3px; text-decoration:none; }
.btn-primary:hover, .article-body a.btn-primary:hover { background:var(--emerald-lg); color:var(--on-acc); }

/* ── CONTENT COMPONENTS (about / overt-ops) ── */
.prose-section p { color:var(--text-soft); font-size:1.08rem; line-height:1.75; margin-bottom:1.1rem; max-width:65ch; }
.prose-section p strong { color:var(--text); }
.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface); margin-top:2rem; }
.stat-row .stat { padding:1.4rem 1.1rem; text-align:center; border-right:1px solid var(--line); }
.stat-row .stat:last-child { border-right:none; }
.stat-row .n { font-family:var(--font-display); font-weight:800; font-size:1.9rem; color:var(--emerald); line-height:1; }
.stat-row .l { font-family:var(--font-body); font-weight:600; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:.5rem; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:1.1rem; margin-top:1.6rem; }
.card { background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--brass); border-radius:8px; padding:1.5rem; }
.card h3 { font-family:var(--font-display); font-weight:700; font-size:1.05rem; text-transform:uppercase; color:var(--text); letter-spacing:.03em; margin-bottom:.6rem; line-height:1.3; }
.card p { color:var(--text-soft); font-size:.96rem; line-height:1.6; }
.card p strong { color:var(--text); }
.card .v { font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--text); letter-spacing:.02em; line-height:1.5; }
.card .v a { color:var(--emerald); text-decoration:none; border-bottom:1px solid var(--line-str); }
.card .v a:hover { border-color:var(--emerald); }
.card .m { color:var(--muted); font-size:.84rem; margin-top:.6rem; }
.card.accent-jade { border-top-color:var(--emerald); }
.timeline { border-left:2px solid var(--line-str); padding-left:1.6rem; margin-top:1.6rem; }
.timeline-item { position:relative; padding-bottom:2rem; }
.timeline-item:last-child { padding-bottom:0; }
.timeline-item::before { content:''; position:absolute; left:calc(-1.6rem - 6px); top:.45em; width:10px; height:10px; border-radius:50%; background:var(--emerald); }
.timeline .yr { font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--emerald); letter-spacing:.04em; text-transform:uppercase; margin-bottom:.3rem; }
.timeline .ev { color:var(--text-soft); font-size:1rem; line-height:1.6; max-width:60ch; }
.pullquote { border-left:3px solid var(--brass); padding:.6rem 0 .6rem 1.4rem; margin:1.8rem 0; font-family:var(--font-display); font-weight:700; font-size:1.2rem; text-transform:uppercase; color:var(--text); letter-spacing:.01em; line-height:1.3; }
.bigblock { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:2.4rem; text-align:center; margin-top:1.6rem; }
.bigblock h3 { font-family:var(--font-display); font-weight:700; font-size:1.1rem; text-transform:uppercase; color:var(--text); letter-spacing:.04em; margin-bottom:1rem; }
.bigblock p { color:var(--text-soft); max-width:640px; margin:0 auto 1rem; line-height:1.7; }
.bigblock .stamp { font-family:var(--font-body); font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:1.4rem; }

/* ════ OVERT-OPS PRODUCT PAGE ════ */
section.hero { max-width:64rem; margin:0 auto; padding:clamp(3rem,7vh,5rem) clamp(1.4rem,5vw,3rem) 2.5rem; text-align:center; }
.hero-op { display:inline-block; font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--emerald); border:1px solid var(--line-str); border-radius:3px; padding:.35rem .9rem; margin-bottom:1.2rem; }
.hero-name { font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem,8vw,5.5rem); text-transform:uppercase; color:var(--text); letter-spacing:.02em; line-height:1; }
.hero-tagline { font-family:var(--font-display); font-weight:700; font-size:clamp(.95rem,2vw,1.3rem); letter-spacing:.04em; text-transform:uppercase; color:var(--brass); margin:.6rem 0 1rem; }
.hero-subtitle { font-size:1.15rem; line-height:1.6; color:var(--text-soft); max-width:62ch; margin:0 auto; }
.hero-subtitle strong { color:var(--text); }
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn-secondary { border:2px solid var(--line-str); color:var(--text); }
.btn-secondary:hover { border-color:var(--emerald); color:var(--emerald); }
/* section wrappers */
.dossier, .showcase, .aeo, .tiers, .pipeline, .capabilities, .spectrum, .competitive, .strip, .final-cta { max-width:72rem; margin:0 auto; padding:clamp(2.6rem,6vh,4.2rem) clamp(1.4rem,5vw,3rem); border-top:1px solid var(--line); }
.final-cta { text-align:center; }
.section-label { font-family:var(--font-body); font-weight:700; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin-bottom:.6rem; display:flex; align-items:center; gap:.6rem; }
.final-cta .section-label { justify-content:center; }
.section-title { font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,4.2vw,3rem); text-transform:uppercase; color:var(--text); letter-spacing:.01em; line-height:1.1; margin-bottom:1.2rem; }
.dossier > p, .aeo > p, .tiers > p, .pipeline > p, .final-cta > p, .spectrum > p { color:var(--text-soft); font-size:1.05rem; line-height:1.75; max-width:80ch; margin-bottom:1.1rem; }
.dossier > p strong, .tiers > p strong { color:var(--text); }
/* showcase 2-col */
.showcase-grid { display:flex; flex-direction:column; gap:2.5rem; margin-top:1.6rem; }
.showcase-item { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
.showcase-item.reverse .showcase-text { order:2; }
@media (max-width:780px){ .showcase-item { grid-template-columns:1fr; } .showcase-item.reverse .showcase-text { order:0; } }
.showcase-text h3 { font-family:var(--font-display); font-weight:700; font-size:1.4rem; text-transform:uppercase; color:var(--text); margin:.4rem 0 .6rem; }
.showcase-text p { color:var(--text-soft); line-height:1.65; }
.showcase-img img { width:100%; height:auto; border:1px solid var(--line); border-radius:6px; box-shadow:0 22px 50px -28px rgba(0,0,0,.45); }
.cap-num { font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--emerald); }
/* aeo */
.aeo-banner { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--brass); border-radius:6px; padding:1.2rem 1.4rem; margin:1.4rem 0; }
.aeo-banner-label { font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin-bottom:.4rem; }
.aeo-banner-text { color:var(--text); font-size:1rem; line-height:1.5; }
.aeo-grid, .cap-grid, .strip-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.1rem; }
.aeo-card, .cap-card, .strip-card { background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--emerald); border-radius:8px; padding:1.4rem; }
.aeo-card h4, .cap-card .cap-name { font-family:var(--font-display); font-weight:700; font-size:1rem; text-transform:uppercase; color:var(--text); letter-spacing:.03em; margin-bottom:.5rem; }
.aeo-card p, .cap-desc { color:var(--text-soft); font-size:.94rem; line-height:1.6; }
.strip-card h3 { font-family:var(--font-display); font-weight:700; font-size:1rem; text-transform:uppercase; color:var(--brass); letter-spacing:.04em; margin-bottom:.7rem; }
.strip-card ul, .cap-list { list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.strip-card li, .cap-list li { font-size:.92rem; color:var(--text-soft); padding-left:1.2em; position:relative; line-height:1.45; }
.strip-card li::before, .cap-list li::before { content:''; position:absolute; left:0; top:.55em; width:10px; height:4px; border-radius:5px; background:var(--jade-bright); }
.cap-card .cap-num { font-family:var(--font-display); font-weight:800; font-size:1.6rem; color:var(--emerald); }
/* tiers */
.tier-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.1rem; margin-top:1.6rem; }
.tier-card { background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--brass); border-radius:8px; padding:1.5rem; }
.tier-card.det, .tier-card.prof { border-top-color:var(--emerald); }
.tier-num { font-family:var(--font-display); font-weight:800; font-size:2.6rem; color:var(--emerald); line-height:1; }
.tier-method { font-family:var(--font-body); font-weight:600; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:.3rem 0; }
.tier-name { font-family:var(--font-display); font-weight:700; font-size:1.1rem; text-transform:uppercase; color:var(--text); letter-spacing:.02em; margin-bottom:.5rem; }
.tier-desc { color:var(--text-soft); font-size:.92rem; line-height:1.55; margin-bottom:.9rem; }
.tier-cost { font-family:var(--font-body); font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; }
.tier-cost.free { color:var(--emerald); } .tier-cost.paid { color:var(--brass); }
/* pipeline */
.pipeline-flow { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-top:1.6rem; }
.pipe-step { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:1.2rem; }
.pipe-num { font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--brass); }
.pipe-name { font-family:var(--font-display); font-weight:700; font-size:1rem; text-transform:uppercase; color:var(--text); letter-spacing:.03em; margin:.2rem 0 .4rem; }
.pipe-desc { color:var(--text-soft); font-size:.9rem; line-height:1.5; }
/* tables */
.spectrum-table, .comp-table { width:100%; border-collapse:collapse; font-size:.95rem; margin-top:1.4rem; display:block; overflow-x:auto; }
.spectrum-table th, .comp-table th { text-align:left; padding:.7rem .8rem; border-bottom:2px solid var(--line-str); color:var(--brass); font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.spectrum-table td, .comp-table td { padding:.7rem .8rem; border-bottom:1px solid var(--line); color:var(--text-soft); }
.spectrum-table td:first-child, .comp-table td:first-child { color:var(--text); font-weight:600; }
.comp-table .ours { color:var(--emerald); font-weight:700; }
.comp-table .no { color:var(--muted); }
.comp-table .partial { color:var(--brass); }

/* ════ SIGNUP PAGE (functional — state classes match the JS) ════ */
.signup-wrapper { min-height:calc(100vh - 5rem); display:flex; align-items:flex-start; justify-content:center; padding:clamp(2rem,5vh,4rem) 1.4rem 4rem; }
.signup-container { width:100%; max-width:32rem; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--emerald); border-radius:10px; padding:clamp(1.8rem,4vw,2.6rem); }
.signup-badge { display:inline-block; font-family:var(--font-body); font-weight:700; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-acc); background:var(--emerald); padding:.25rem .7rem; border-radius:3px; margin-bottom:1rem; }
.signup-product { font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,7vw,3.2rem); text-transform:uppercase; color:var(--text); letter-spacing:.02em; line-height:1; }
.signup-tagline { font-family:var(--font-display); font-weight:700; font-size:.95rem; letter-spacing:.04em; text-transform:uppercase; color:var(--brass); margin:.4rem 0 1rem; }
.signup-desc { color:var(--text-soft); font-size:1rem; line-height:1.6; margin-bottom:1.2rem; }
.signup-features { list-style:none; display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.4rem; }
.signup-features li { font-size:.94rem; color:var(--text-soft); padding-left:1.4em; position:relative; line-height:1.45; }
.signup-features li::before { content:''; position:absolute; left:0; top:.55em; width:12px; height:5px; border-radius:6px; background:var(--jade-bright); }
.signup-divider { height:1px; background:var(--line); margin:1.2rem 0 1.4rem; }
.signup-form .form-group { margin-bottom:1.2rem; }
.form-label { display:block; font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brass); margin-bottom:.5rem; }
.form-input { width:100%; background:var(--bg); border:1px solid var(--line-str); border-radius:5px; padding:.8rem .9rem; font-family:var(--font-body); font-size:1rem; color:var(--text); }
.form-input:focus-visible { outline:2px solid var(--emerald); outline-offset:1px; border-color:var(--emerald); }
.form-input.error { border-color:#c0392b; }
.product-interest { display:flex; flex-wrap:wrap; gap:.5rem; }
.product-check { display:inline-flex; align-items:center; gap:.4rem; background:var(--bg); border:1px solid var(--line-str); border-radius:20px; padding:.4rem .8rem; font-size:.88rem; color:var(--text-soft); cursor:pointer; }
.product-check input { accent-color:var(--emerald); }
.product-check:has(input:checked) { border-color:var(--emerald); color:var(--text); background:color-mix(in srgb,var(--emerald) 10%,transparent); }
.bb-chooser { display:flex; flex-wrap:wrap; gap:.5rem; }
.bb-chip { font-family:var(--font-body); font-weight:600; font-size:.84rem; background:var(--bg); border:1px solid var(--line-str); border-radius:20px; padding:.45rem .9rem; color:var(--text-soft); cursor:pointer; transition:all .18s; }
.bb-chip:hover { border-color:var(--emerald); color:var(--emerald); }
.bb-chip.active { background:var(--emerald); color:var(--on-acc); border-color:var(--emerald); }
#bb-captcha { margin-top:.8rem; display:flex; justify-content:center; }
#bb-captcha > * { margin-left:auto; margin-right:auto; }
.captcha-attrib { font-size:.78rem; color:var(--muted); margin-top:.7rem; }
.captcha-attrib a { color:var(--emerald); }
.btn-submit { width:100%; font-family:var(--font-body); font-weight:700; font-size:.95rem; letter-spacing:.06em; text-transform:uppercase; background:var(--emerald); color:var(--on-acc); border:none; border-radius:5px; padding:.95rem; cursor:pointer; transition:background .18s; margin-top:.4rem; }
.btn-submit:hover { background:var(--emerald-lg); }
.btn-submit:disabled { opacity:.5; cursor:not-allowed; }
.form-fine-print { text-align:center; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:.8rem; }
.form-error { display:none; color:#c0392b; font-size:.9rem; margin-top:.8rem; text-align:center; }
.form-error.visible { display:block; }
.signup-form.hidden { display:none; }
.signup-success { display:none; text-align:center; }
.signup-success.visible { display:block; }
.success-title { font-family:var(--font-display); font-weight:800; font-size:1.6rem; text-transform:uppercase; color:var(--emerald); margin-bottom:.6rem; }
.success-message { color:var(--text-soft); line-height:1.6; margin-bottom:1.2rem; }
.success-back { font-family:var(--font-body); font-weight:600; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--emerald); text-decoration:none; }
.success-back:hover { text-decoration:underline; }

/* keep the header usable on small screens: brand + CTA + theme toggle stay; text links collapse */
@media (max-width: 860px){ .nav-right { gap:1rem; } .nav-right > a:not(.nav-cta) { display:none; } }

/* ── vertical left-margin label (deco spine) — wide screens only ── */
.spine { position:fixed; left:0; top:0; bottom:0; width:2.6rem; z-index:40; display:none; align-items:center; justify-content:center; pointer-events:none; }
.spine .rule { position:absolute; left:50%; top:16%; bottom:16%; width:1px; background:var(--line-str); }
.spine .lbl { writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--font-body); font-weight:600; font-size:.7rem; letter-spacing:.4em; text-transform:uppercase; color:var(--muted); background:var(--bg); padding:1.2rem 0; }
@media (min-width:1100px){ .spine { display:flex; } }

@media (prefers-reduced-motion: reduce){ *, *::before, *::after { transition:none!important; scroll-behavior:auto; } .reveal.is-hidden { opacity:1; transform:none; } }