/* ============================================================
   LEANTA — shared page shell + components (P8).
   Extracted from landing.html's inline <style> so the per-page
   routes (about/hospitality/manufacturing/contact) reuse one
   sheet instead of duplicating ~220 lines each.
   All colour/type/space comes from tokens.css. Mobile-first.
   landing.html keeps its own inline style (locked, LCP-tuned).
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:inherit; }
.wrap { max-width:var(--content-max); margin:0 auto; padding-inline:var(--pad-mobile); }
@media (min-width:1024px){ .wrap { padding-inline:var(--pad-desktop); } }

/* — skip link — */
.skip { position:absolute; left:-9999px; top:0; z-index:100;
        background:var(--color-cta); color:var(--color-cta-on); padding:10px 16px;
        border-radius:var(--radius-md); font-family:var(--font-body); font-weight:600; text-decoration:none; }
.skip:focus { left:8px; top:8px; }

/* — type primitives — */
.eyebrow { font-family:var(--font-mono); font-size:var(--text-sm);
           letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-muted);
           margin:0 0 var(--space-4); }
.eyebrow.sig { color:var(--color-accent); }
.eyebrow.terra { color:var(--color-terra-600); }
.eyebrow.linen { color:var(--color-linen-300); }
h1,h2,h3 { margin:0; }
.display { font-family:var(--font-display); font-weight:600;
           line-height:var(--lh-display); letter-spacing:var(--tracking-display); }
.h1 { font-size:var(--text-hero); }
.h2 { font-family:var(--font-body); font-weight:700; font-size:var(--text-2xl);
      line-height:var(--lh-heading); letter-spacing:var(--tracking-heading); }
.h3 { font-family:var(--font-body); font-weight:700; font-size:var(--text-xl);
      line-height:var(--lh-heading); letter-spacing:var(--tracking-heading); }
.intro { font-size:var(--text-md); line-height:1.5; color:var(--color-text-secondary);
         max-width:48ch; margin:var(--space-4) 0; }
.body { font-size:var(--text-base); color:var(--color-text-secondary); max-width:62ch; }
.muted { color:var(--color-text-muted); }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.center { text-align:center; }
.maxw { max-width:62ch; margin-inline:auto; }

/* — continuous-line motif — */
.line { height:0; border:0; border-top:var(--line-stroke) solid var(--color-line);
        width:40%; opacity:.7; }
.line.draw { width:0; animation:draw var(--dur-line) var(--ease-out) forwards; }
@keyframes draw { to { width:40%; } }
.line.left { margin-inline:0; }
.line.terra { border-color:var(--color-terra-600); width:80px; }
.line.sig { border-color:var(--color-accent); width:80px; }
.line.center { margin-inline:auto; }

/* — buttons (full state spec lives in design-system.md) — */
.btn { display:inline-flex; align-items:center; gap:.5em;
       font-family:var(--font-body); font-weight:600; font-size:var(--text-base);
       padding:14px 24px; border-radius:var(--radius-md); border:0; cursor:pointer;
       text-decoration:none; line-height:1;
       transition:transform var(--dur-fast) var(--ease-out),
                  filter var(--dur-base) var(--ease-out),
                  box-shadow var(--dur-base) var(--ease-out); }
.btn .arr { transition:transform var(--dur-base) var(--ease-out); }
.btn:hover .arr { transform:translateX(3px); }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--color-bg),0 0 0 5px var(--color-focus); }
.btn:active { transform:translateY(1px); }
.btn-gold { background:var(--color-cta); color:var(--color-cta-on); }
.btn-gold:hover { filter:brightness(1.04); box-shadow:var(--glass-shadow); }
.btn-sig-out { background:transparent; color:var(--color-accent);
               box-shadow:inset 0 0 0 1.5px var(--color-accent); }
.btn-sig-out:hover { background:color-mix(in srgb,var(--color-accent) 8%,transparent); }
.btn-sig-txt { background:none; padding-inline:0; color:var(--color-accent); font-weight:600;
               border-radius:0; box-shadow:inset 0 -1.5px 0 currentColor; }
.cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-5);
           margin-top:var(--space-6); }

/* — NAV — */
.nav { position:sticky; top:0; z-index:50; background:var(--color-bg);
       transition:background var(--dur-base) var(--ease-out),
                  box-shadow var(--dur-base) var(--ease-out); }
.nav.scrolled { background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur));
                -webkit-backdrop-filter:blur(var(--glass-blur));
                box-shadow:0 1px 0 rgba(107,99,87,.15); }
.nav-inner { display:flex; align-items:center; justify-content:space-between;
             height:72px; gap:var(--space-5); }
.nav-links { display:none; gap:var(--space-6); list-style:none; margin:0; padding:0; }
@media (min-width:900px){ .nav-links { display:flex; } }
.nav-links a { color:var(--color-text); text-decoration:none; font-size:14px; font-weight:500;
               position:relative; padding-block:4px; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
                      background:var(--color-accent); transition:width var(--dur-fast) var(--ease-out); }
.nav-links a:hover::after,.nav-links a[aria-current]::after { width:100%; }
.nav-links a[aria-current] { color:var(--color-accent); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--color-text); }
.brand .word { font-family:var(--font-display); font-weight:600; font-size:24px;
               letter-spacing:var(--tracking-logo); }
.brand svg { width:34px; height:34px; }
.brand-word { font-family:var(--font-display); font-weight:600; font-size:24px;
              letter-spacing:var(--tracking-logo); color:var(--color-text); }

/* — mobile nav: hamburger + full-screen sheet (<900px) — */
.nav-right { display:flex; align-items:center; gap:var(--space-4); }
.nav-cta { display:none; }
@media (min-width:900px){ .nav-cta { display:inline-flex; } }
.nav-toggle { display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
              width:44px; height:44px; padding:11px; background:none; border:0; cursor:pointer;
              border-radius:var(--radius-md); }
.nav-toggle:focus-visible { outline:none; box-shadow:0 0 0 3px var(--color-bg),0 0 0 5px var(--color-focus); }
.nav-toggle .bar { display:block; height:2px; width:22px; background:var(--color-text); border-radius:2px;
                   transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast) var(--ease-out); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (min-width:900px){ .nav-toggle { display:none; } }

.nav-sheet { position:fixed; inset:0; z-index:60; background:var(--color-bg);
             padding:var(--space-5) var(--pad-mobile) var(--space-8); overflow-y:auto;
             transform:translateY(-8px); opacity:0; visibility:hidden;
             transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),
                        visibility 0s linear var(--dur-base); }
.nav-sheet[data-open="true"]{ transform:none; opacity:1; visibility:visible;
             transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out); }
.nav-sheet-top { display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav-sheet-close { width:44px; height:44px; background:none; border:0; cursor:pointer; font-size:30px;
                   line-height:1; color:var(--color-text); border-radius:var(--radius-md); }
.nav-sheet-close:focus-visible { outline:none; box-shadow:0 0 0 3px var(--color-bg),0 0 0 5px var(--color-focus); }
.nav-sheet ul { list-style:none; margin:var(--space-5) 0 0; padding:0; }
.nav-sheet a.sheet-link { display:block; color:var(--color-text); text-decoration:none;
               font-family:var(--font-display); font-size:var(--text-xl); padding-block:var(--space-3);
               border-bottom:1px solid color-mix(in srgb,var(--color-line) 30%,transparent); }
.nav-sheet a.btn.sheet-link { display:inline-flex; border-bottom:0; margin-top:var(--space-6);
               justify-content:center; font-family:var(--font-body); font-size:var(--text-base); }
body.nav-open { overflow:hidden; }
@media (min-width:900px){ .nav-sheet { display:none; } }

/* — SECTIONS — */
section { padding-block:var(--space-9); }
.sec-tight { padding-block:var(--space-8); }
.dark { background:var(--color-espresso-900); color:var(--color-linen-50); }
.darker { background:var(--color-espresso-900); color:var(--color-linen-50); }
.surface { background:var(--color-surface); }
.dark .body,.darker .body { color:var(--color-linen-300); }
.dark .h2,.dark .h3,.darker .h2,.darker .h3 { color:var(--color-linen-50); }

/* — HERO — */
.hero { padding-block:var(--space-8) var(--space-9); }
.hero-grid { display:grid; gap:var(--space-7); align-items:center; }
@media (min-width:1024px){ .hero-grid { grid-template-columns:7fr 5fr; gap:var(--space-8); } }
.hero .h1 { margin-block:var(--space-2) var(--space-4); }
.hero-sig { font-family:var(--font-display); font-style:italic; font-weight:500;
            font-size:var(--text-md); color:var(--color-text-muted); margin-bottom:var(--space-2); }
.hero-narrow { max-width:60ch; }
.hero-visual { border-radius:var(--radius-lg); box-shadow:var(--glass-shadow); overflow:hidden; margin-bottom:var(--space-5); }
.hero-visual img { width:100%; height:auto; display:block; }

/* — glass card — */
.glass { background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur));
         -webkit-backdrop-filter:blur(var(--glass-blur)); border:var(--glass-border);
         border-radius:var(--radius-lg); box-shadow:var(--glass-shadow); }
.glass.dark-glass { background:rgba(43,37,29,.55); border:1px solid rgba(201,192,174,.18); }
.kpi { padding:var(--space-6); }
.kpi .kpi-head { font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.08em;
                 text-transform:uppercase; color:var(--color-text-muted); margin-bottom:var(--space-4); }
.kpi-row { display:flex; justify-content:space-between; align-items:baseline;
           padding-block:var(--space-3); border-top:1px solid color-mix(in srgb,var(--color-line) 30%,transparent); }
.kpi-row:first-of-type { border-top:0; }
.kpi-row .lbl { font-family:var(--font-mono); font-size:var(--text-sm); color:var(--color-text-secondary); }
.kpi-row .val { font-family:var(--font-mono); font-weight:600; font-size:var(--text-md);
                color:var(--color-accent); }

/* — proof strip (dark, 4-col) — */
.proof { display:grid; gap:var(--space-5); text-align:center; }
@media (min-width:760px){ .proof { grid-template-columns:repeat(4,1fr); } }
.proof .stat .n { font-family:var(--font-mono); font-weight:600; font-size:var(--text-xl);
                  color:var(--color-signal-400); display:block; }
.proof .stat .c { font-size:14px; color:var(--color-linen-300); margin-top:6px; }
.proof .stat { border-left:1px solid rgba(201,192,174,.22); padding-left:var(--space-5); text-align:left; }
@media (max-width:759px){ .proof .stat:nth-child(odd){ border-left:0; padding-left:0; } }

/* — 3-up cards (how-it-works, what-we-build, problem strip) — */
.steps { display:grid; gap:var(--space-5); margin-top:var(--space-7); }
@media (min-width:860px){ .steps { grid-template-columns:repeat(3,1fr); align-items:stretch; } }
.card { background:var(--color-surface); border-radius:var(--radius-lg);
        border-top:1px solid var(--color-line); padding:var(--space-6);
        transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out); }
.card:hover { transform:translateY(-4px); box-shadow:var(--glass-shadow); }
.card .num { font-family:var(--font-mono); font-weight:600; font-size:var(--text-md);
             color:var(--color-accent); }
.card .h3 { margin-block:var(--space-3) var(--space-2); }

/* — 2-up cards (verticals, fit-check, contact split) — */
.verts { display:grid; gap:var(--space-5); margin-top:var(--space-7); }
@media (min-width:860px){ .verts { grid-template-columns:1fr 1fr; } }
.vert { background:var(--color-surface); border-radius:var(--radius-lg);
        border-top:1px solid var(--color-line); padding:var(--space-7); }

/* — checklist (pack contents, fit-check, what-happens-next) — */
.ck { list-style:none; margin:var(--space-4) 0 0; padding:0; display:grid; gap:var(--space-3); }
.ck li { display:flex; gap:.6em; align-items:baseline; font-size:var(--text-base);
         color:var(--color-text-secondary); }
.ck .mk { font-family:var(--font-mono); font-weight:600; flex:0 0 auto; }
.ck.good .mk { color:var(--color-accent); }
.ck.bad .mk { color:var(--color-text-muted); }
.ck.num .mk { color:var(--color-accent); }
@media (min-width:680px){ .ck.two { grid-template-columns:1fr 1fr; column-gap:var(--space-6); } }

/* — value rows (about) — */
.value-row { padding-block:var(--space-5); border-top:1px solid color-mix(in srgb,var(--color-line) 45%,transparent); }
.value-row:first-of-type { border-top:0; }
.value-row .vnum { font-family:var(--font-mono); font-weight:600; color:var(--color-accent);
                   font-size:var(--text-md); }
.value-row .h3 { margin-block:var(--space-2); }

/* — capability case article — */
.case { background:var(--color-surface); border-radius:var(--radius-lg);
        border-top:1px solid var(--color-line); padding:var(--space-7); max-width:64rem;
        margin-inline:auto; }
.case .ours { margin-top:var(--space-4); color:var(--color-text-muted); font-size:13px; }

/* — long-form article (Field Notes) — */
.article { max-width:68ch; margin-inline:auto; }
.article .lede { font-family:var(--font-display); font-size:var(--text-md); line-height:1.45;
                 color:var(--color-text); margin:0 0 var(--space-6); }
.article h2 { font-family:var(--font-body); font-weight:700; font-size:var(--text-xl);
              line-height:var(--lh-heading); letter-spacing:var(--tracking-heading);
              margin:var(--space-8) 0 var(--space-3); }
.article h3 { font-family:var(--font-body); font-weight:700; font-size:var(--text-md);
              margin:var(--space-6) 0 var(--space-2); }
.article p { font-size:var(--text-base); line-height:1.7; color:var(--color-text-secondary);
             margin:0 0 var(--space-4); }
.article ul,.article ol { margin:0 0 var(--space-4); padding-left:1.25em;
             color:var(--color-text-secondary); line-height:1.7; }
.article li { margin-bottom:var(--space-2); }
.article strong { color:var(--color-text); }
.article a { color:var(--color-accent); text-underline-offset:3px; }
.article blockquote { margin:var(--space-6) 0; padding-left:var(--space-5);
             border-left:3px solid var(--color-accent); font-family:var(--font-display);
             font-style:italic; font-size:var(--text-md); color:var(--color-text); }

/* article byline · date · read-time */
.note-meta { font-family:var(--font-mono); font-size:var(--text-sm); color:var(--color-text-muted);
             letter-spacing:.04em; margin-top:var(--space-4); }

/* sources / citations block (load-bearing cites only) */
.sources { max-width:68ch; margin:var(--space-8) auto 0; padding-top:var(--space-5);
           border-top:1px solid color-mix(in srgb,var(--color-line) 35%,transparent); }
.sources .src-h { font-family:var(--font-mono); font-size:var(--text-sm); text-transform:uppercase;
              letter-spacing:.1em; color:var(--color-text-muted); margin:0 0 var(--space-4); }
.sources ol { margin:0; padding-left:1.3em; display:grid; gap:var(--space-3); }
.sources li { font-size:14px; line-height:1.5; color:var(--color-text-secondary); }
.sources a { color:var(--color-accent); word-break:break-word; }

/* article-card grid for the Field Notes index */
a.note-card { text-decoration:none; }
.note-card .tag { font-family:var(--font-mono); font-size:var(--text-sm); letter-spacing:.06em;
              text-transform:uppercase; color:var(--color-accent); }
.note-card .h3 { margin-block:var(--space-3) var(--space-2); text-decoration:none; }
.note-card .rd { font-family:var(--font-mono); font-size:var(--text-sm); color:var(--color-text-muted);
              margin-top:var(--space-4); }

/* ===== magazine editorial layer (Field Notes long-form) ===== */
/* drop cap — opening paragraph */
.article p.dropcap::first-letter {
  float:left; font-family:var(--font-display); font-weight:600;
  font-size:4.4rem; line-height:.78; padding:.04em .1em 0 0;
  color:var(--color-accent); }
@media (prefers-reduced-motion:no-preference){ .article p.dropcap{ } }

/* pull quote — full-measure editorial break */
.article .pullquote {
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:var(--text-xl); line-height:1.28; letter-spacing:var(--tracking-heading);
  color:var(--color-text); max-width:30ch; margin:var(--space-8) 0;
  padding-left:var(--space-5); border-left:3px solid var(--color-accent); }

/* figure — hand-authored SVG diagrams (.fn2 parity: same figs live in the magazine template) */
.article figure.fig, .fn2 figure.fig { margin:var(--space-8) 0; }
.article figure.fig svg, .fn2 figure.fig svg { width:100%; height:auto; display:block;
  background:var(--color-surface); border-radius:var(--radius-lg);
  border:1px solid color-mix(in srgb,var(--color-line) 30%,transparent); }
.article figure.fig figcaption, .fn2 figure.fig figcaption { font-family:var(--font-mono); font-size:var(--text-sm);
  color:var(--color-text-muted); margin-top:var(--space-3); text-align:center;
  line-height:1.5; max-width:62ch; margin-inline:auto; }

/* references + further reading */
.sources.further ol { columns:2; column-gap:var(--space-7); }
@media (max-width:680px){ .sources.further ol { columns:1; } }
.sources .ref-note { font-size:13px; color:var(--color-text-muted); margin:0 0 var(--space-4); }

/* closing FOMO / momentum CTA band */
.note-end { background:var(--color-espresso-900); color:var(--color-linen-50); }
.note-end .wrap { max-width:48rem; text-align:center; }
.note-end .h2,.note-end .body { color:var(--color-linen-50); }
.note-end .body { color:var(--color-linen-300); }
.note-end .kicker { font-family:var(--font-mono); font-size:var(--text-sm); letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-signal-400); margin-bottom:var(--space-3); }

/* social row (Substack / LinkedIn / X) */
.social-row { display:flex; gap:var(--space-3); align-items:center; justify-content:center;
  margin-top:var(--space-6); }
.social-row a { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-md); color:var(--color-linen-50);
  border:1px solid rgba(201,192,174,.3); transition:background var(--dur-base) var(--ease-out); }
.social-row a:hover { background:rgba(201,192,174,.12); }
.social-row a:focus-visible { outline:none; box-shadow:0 0 0 3px var(--color-espresso-900),0 0 0 5px var(--color-signal-400); }
.social-row svg { width:20px; height:20px; fill:currentColor; }
/* footer social variant (smaller, inline) */
.foot-social { display:flex; gap:var(--space-4); margin-top:var(--space-2); }
.foot-social a { color:var(--color-linen-300); display:inline-flex; }
.foot-social a:hover { color:var(--color-linen-50); }
.foot-social svg { width:18px; height:18px; fill:currentColor; }

/* ===== photo essay layer (Field Notes imagery) ===== */
.hero-photo { margin:var(--space-7) 0 var(--space-8); }
.hero-photo img { width:100%; height:auto; display:block; border-radius:var(--radius-lg);
  box-shadow:var(--glass-shadow); }
.hero-photo figcaption { font-family:var(--font-mono); font-size:var(--text-sm); color:var(--color-text-muted);
  margin-top:var(--space-3); }

.img-pair { display:grid; gap:var(--space-5); margin:var(--space-8) 0; }
@media (min-width:860px){ .img-pair { grid-template-columns:1fr 1fr; } }
.img-pair img { width:100%; height:240px; object-fit:cover; display:block; border-radius:var(--radius-md);
  box-shadow:var(--glass-shadow); }
.img-pair figcaption { font-family:var(--font-mono); font-size:var(--text-sm); color:var(--color-text-muted);
  margin-top:var(--space-2); }

/* insight card — proprietary infographic, hand-authored SVG */
.insight-card { background:var(--color-surface); border-radius:var(--radius-lg);
  border:1px solid color-mix(in srgb,var(--color-line) 30%,transparent); padding:var(--space-5);
  margin:var(--space-8) 0; box-shadow:var(--glass-shadow); }
.insight-card .eyebrow { margin-bottom:var(--space-5); }
.insight-card svg { width:100%; height:auto; display:block; }

/* quote card — designed, standalone, shareable pull-quote */
.quote-card { background:var(--color-espresso-900); color:var(--color-linen-50); border-radius:var(--radius-lg);
  padding:var(--space-7); margin:var(--space-8) 0; box-shadow:var(--glass-shadow); position:relative; }
.quote-card .qc-rule { width:48px; height:2px; background:var(--color-cta); border:0; margin:0 0 var(--space-5); }
.quote-card blockquote { margin:0; font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:var(--text-lg); line-height:1.35; color:var(--color-linen-50); }
.quote-card .qc-mark { position:absolute; top:var(--space-6); right:var(--space-6); width:28px; height:28px;
  opacity:.5; }
.quote-card .qc-tag { font-family:var(--font-mono); font-size:var(--text-sm); color:var(--color-linen-300);
  margin-top:var(--space-5); letter-spacing:.04em; }

/* side-wrap — insight/quote card + a ruled pull-aside note.
   NB: stacked, not a literal side-by-side column — .article's 68ch (~609px) prose measure never has
   room for a fixed-width rail without crushing the card. A true side-by-side column only makes sense
   for elements that break out to the full .wrap width (see .hero-photo), not inside narrow body copy. */
.side-wrap { margin:var(--space-8) 0; }
.side-wrap .side-col { margin-top:var(--space-5); padding-top:var(--space-4);
  border-top:1px solid color-mix(in srgb,var(--color-line) 35%,transparent); }
.side-wrap .side-col p { font-family:var(--font-mono); font-size:var(--text-sm); color:var(--color-text-muted);
  line-height:1.6; margin:0; }

/* — email capture (dark) — */
.capture-form { display:flex; flex-wrap:wrap; gap:var(--space-3); max-width:30rem;
                margin:var(--space-6) auto 0; }
.capture-form input { flex:1 1 12rem; padding:14px 16px; border-radius:var(--radius-md);
                      border:1px solid var(--color-linen-300); background:transparent;
                      color:var(--color-linen-50); font-family:var(--font-mono); font-size:14px; }
.capture-form input::placeholder { color:var(--color-stone-400); }
.capture-form input:focus-visible { outline:none; box-shadow:0 0 0 2px var(--color-signal-400); border-color:transparent; }

/* — wedge generator form (hospitality atom test, Day 1 fake-door) — */
.wedge-form { max-width:40rem; margin:0 auto; display:grid; gap:var(--space-5); }
.wedge-form .field-label { font-family:var(--font-mono); font-size:var(--text-sm);
  text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted);
  display:block; margin-bottom:var(--space-2); }
.wedge-form select, .wedge-form textarea, .wedge-form input[type="email"] {
  width:100%; padding:14px 16px; border-radius:var(--radius-md);
  border:1px solid var(--color-line); background:var(--color-bg);
  color:var(--color-text); font-family:var(--font-body); font-size:var(--text-base); }
.wedge-form textarea { resize:vertical; min-height:5.5em; }
.wedge-form select:focus-visible, .wedge-form textarea:focus-visible, .wedge-form input:focus-visible {
  outline:none; box-shadow:0 0 0 2px var(--color-signal-400); border-color:transparent; }
.wedge-output { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.wedge-output input { position:absolute; opacity:0; width:1px; height:1px; }
.wedge-output label { cursor:pointer; padding:10px 18px; border-radius:var(--radius-full);
  border:1px solid var(--color-line); font-family:var(--font-mono); font-size:14px;
  color:var(--color-text-secondary); transition:background var(--dur-base) var(--ease-out); }
.wedge-output label:has(input:checked) { background:color-mix(in srgb,var(--color-accent) 14%,transparent);
  color:var(--color-accent); border-color:var(--color-accent); font-weight:600; }
.wedge-output label:has(input:focus-visible) { box-shadow:0 0 0 2px var(--color-signal-400); }
.wedge-result { max-width:40rem; margin:var(--space-6) auto 0; display:none; }
.wedge-result[data-open="true"] { display:block; }

/* — footer — */
footer { border-top:1px solid rgba(201,192,174,.25); }
.foot-inner { display:grid; gap:var(--space-5); padding-block:var(--space-7); }
.foot-links { display:flex; flex-wrap:wrap; gap:var(--space-5); list-style:none; padding:0; margin:0; }
.foot-links a { color:var(--color-linen-50); text-decoration:none; font-size:14px; }
.foot-sig { font-family:var(--font-display); font-style:italic; color:var(--color-linen-300);
            font-size:var(--text-md); }

/* — entrance animation — */
.rise { opacity:0; transform:translateY(24px); animation:rise var(--dur-base) var(--ease-out) forwards; }
.rise.d1 { animation-delay:.10s; } .rise.d2 { animation-delay:.20s; } .rise.d3 { animation-delay:.30s; }
@keyframes rise { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .rise,.line.draw { animation:none; opacity:1; transform:none; width:40%; }
  .nav-sheet,.nav-sheet[data-open="true"],.nav-toggle .bar,.card,.btn { transition:none; }
  html { scroll-behavior:auto; }
}


/* ============================================================
   MAGAZINE v2 — Field Notes editorial layer (.fn2 namespace)
   Marginalia (honest mobile adjacency) · numbered subsections ·
   scale contrast · collage/macro galleries · restrained depth.
   Mobile-first single column; rail engages >=1180px.
   Clarity > glass — ONE deliberate frosted exception: the hero caption (Samuel's call, 01/07).
   ============================================================ */
.fn2 {
  max-width:64ch; margin-inline:auto;
  /* v2 dominant accent = EMERALD (Samuel's call, 01/07): the DNA's actual "cold core" contrast hue
     ("data/precision"), not gold — gold is warm-on-warm and was never a real contrast colour on linen.
     signal-600 passes contrast as BOTH text-on-linen (4.6:1) and a solid fill with light text (5.4:1),
     so one token covers both jobs — no fill/text split needed the way gold required. */
  --fn2-pop:var(--color-signal-600);
  --fn2-gold:var(--color-signal-600);
}
[data-theme="dark"] .fn2 { --fn2-pop:var(--color-signal-400); --fn2-gold:var(--color-signal-400); }
.fn2 > p, .fn2 > ul { font-size:var(--text-base); line-height:1.75; color:var(--color-text-secondary); margin:0 0 var(--space-4); }
.fn2 > ul { padding-left:1.2em; } .fn2 li { margin-bottom:var(--space-2); }
.fn2 strong { color:var(--color-text); }
.fn2 .fn2-lede { font-family:var(--font-display); font-size:var(--text-lg); line-height:1.35; color:var(--color-text); margin:0 0 var(--space-6); max-width:none; }
.fn2 .dropcap::first-letter { float:left; font-family:var(--font-display); font-weight:600; font-size:4.4rem; line-height:.78; padding:.04em .1em 0 0; color:var(--fn2-pop); }

/* numbered section openers — big mono numeral + display serif h2 (scale contrast) */
.fn2-sec { position:relative; margin:var(--space-9) 0 var(--space-3); display:flex; align-items:center; gap:var(--space-4); }
/* bold emerald section marker — solid fill + linen numeral: the dominant repeating accent */
.fn2-sec .fn2-num { font-family:var(--font-mono); font-weight:600; font-size:var(--text-lg); line-height:1; flex:none;
  color:var(--color-linen-50); background:var(--fn2-gold); padding:.3em .5em; border-radius:6px;
  box-shadow:0 3px 10px -4px color-mix(in srgb,var(--fn2-gold) 70%,transparent); }
.fn2-sec h2 { font-family:var(--font-display); font-weight:600; font-size:var(--text-2xl); line-height:1.1; letter-spacing:var(--tracking-display); color:var(--color-text); margin:0; }
.fn2 h3 { font-family:var(--font-body); font-weight:700; font-size:var(--text-md); color:var(--color-text); margin:var(--space-6) 0 var(--space-2); }

/* subtle warm section shading — low-regret backdrop wash behind each numbered opener,
   ties the accent thread through the page without a flat background swap */
.fn2-sec::before {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:-5vw; right:-5vw; top:-1.5rem; bottom:-1.5rem;
  background:radial-gradient(ellipse 60% 100% at 0% 30%, color-mix(in srgb,var(--fn2-gold) 9%,transparent), transparent 72%);
}

/* restrained depth — hero + macro ONLY */
.fn2-depth { box-shadow:0 1px 0 color-mix(in srgb,var(--color-line) 20%,transparent), 0 20px 44px -26px rgba(43,37,29,.5); }
[data-theme="dark"] .fn2-depth { box-shadow:0 1px 0 rgba(242,236,223,.06), 0 20px 44px -24px rgba(0,0,0,.6); }
.fn2-frame { border:1px solid color-mix(in srgb,var(--color-line) 28%,transparent); }

/* rich depth without glass — layered shadow + soft inner highlight on raised cards.
   Scoped under .fn2 so the global .insight-card/.quote-card (used by v1 articles) are untouched. */
.fn2 .insight-card, .fn2 .quote-card {
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 1px 2px rgba(43,37,29,.06), 0 24px 48px -28px rgba(43,37,29,.4);
}
[data-theme="dark"] .fn2 .insight-card, [data-theme="dark"] .fn2 .quote-card {
  box-shadow:0 1px 0 rgba(242,236,223,.06) inset, 0 1px 2px rgba(0,0,0,.3), 0 24px 48px -26px rgba(0,0,0,.6);
}
/* the pull-quote rule + loss-map eyebrow pick up the v2 accent instead of CTA-gold/signal-emerald */
.fn2 .quote-card .qc-rule { background:var(--fn2-gold); }
.fn2 .insight-card .eyebrow.sig { color:var(--fn2-pop); }

/* full-bleed hero */
.fn2-figfull { margin:0 0 var(--space-5); }
.fn2-figfull img { width:100%; height:auto; display:block; border-radius:var(--radius-lg); }
.fn2-figcap { font-family:var(--font-mono); font-size:var(--text-sm); color:var(--color-text-muted); margin:0 0 var(--space-7); }

/* single, deliberate glass exception — frosted caption on the HERO image only; graceful dark
   fallback where backdrop-filter is unsupported. Everywhere else 'clarity > glass' still holds. */
.fn2-hero { position:relative; }
.fn2-hero > figcaption.fn2-hero-glass {
  position:absolute; left:var(--space-4); bottom:var(--space-4); max-width:min(30rem,74%);
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-md);
  background:rgba(33,28,22,.34);
  -webkit-backdrop-filter:blur(14px) saturate(1.12); backdrop-filter:blur(14px) saturate(1.12);
  border:1px solid rgba(242,236,223,.22);
  box-shadow:0 10px 34px -14px rgba(0,0,0,.55);
  font-family:var(--font-mono); font-size:var(--text-sm); line-height:1.45; color:var(--color-linen-50); }
.fn2-hero-glass .fn2-hero-k { display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fn2-gold); margin-bottom:3px; }
.fn2-hero-glass .fn2-ai { color:var(--color-linen-50); border-color:rgba(242,236,223,.35); margin-left:6px; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .fn2-hero-glass { background:rgba(33,28,22,.82); }
}

/* AI disclosure chip — >=12px (legibility + EU AI Act) */
.fn2-ai { display:inline-block; font-family:var(--font-mono); font-size:var(--text-sm); letter-spacing:.03em; color:var(--color-text-muted); border:1px solid color-mix(in srgb,var(--color-line) 35%,transparent); border-radius:var(--radius-full); padding:1px 9px; margin-left:6px; }

/* collage — asymmetric magazine plate, aspect-ratio driven (no min-height crop fights) */
.fn2-collage { margin:var(--space-8) 0; display:grid; gap:var(--space-3); }
.fn2-collage figure { margin:0; position:relative; overflow:hidden; border-radius:var(--radius-md); }
.fn2-collage img { width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/10; }
@media (min-width:740px){
  .fn2-collage { grid-template-columns:1.5fr 1fr; grid-template-areas:"big top" "big bot"; }
  .fn2-collage .c-big{grid-area:big} .fn2-collage .c-top{grid-area:top} .fn2-collage .c-bot{grid-area:bot}
  .fn2-collage .c-big img{aspect-ratio:4/5; height:100%} .fn2-collage .c-top img,.fn2-collage .c-bot img{aspect-ratio:auto; height:100%}
}
.fn2-collage figcaption { position:absolute; left:0; right:0; bottom:0; padding:var(--space-6) var(--space-3) var(--space-2); font-family:var(--font-mono); font-size:var(--text-sm); line-height:1.4; color:var(--color-linen-50); background:linear-gradient(to top,rgba(33,28,22,.82),rgba(33,28,22,0)); }
.fn2-collage .fn2-ai { color:var(--color-linen-50); border-color:rgba(242,236,223,.35); }

/* cinematic macro strip */
.fn2-macro { margin:var(--space-8) 0 var(--space-3); }
.fn2-macro img { width:100%; aspect-ratio:21/9; object-fit:cover; display:block; border-radius:var(--radius-lg); }

/* marginalia — inline inset note on mobile; side rail >=1180px.
   Source order = mobile adjacency (asides sit beside the section they follow). */
.fn2-aside { margin:var(--space-6) 0; background:var(--color-surface); border-left:2px solid var(--fn2-gold); padding:var(--space-4) var(--space-5); border-radius:0 var(--radius-md) var(--radius-md) 0; }
.fn2-aside .fn2-k { display:block; font-family:var(--font-mono); font-size:var(--text-sm); letter-spacing:.12em; text-transform:uppercase; color:var(--fn2-pop); margin-bottom:var(--space-2); }
.fn2-aside p { font-size:14px; line-height:1.55; color:var(--color-text-muted); margin:0; }
.fn2-aside .fn2-stoic { font-family:var(--font-display); font-style:italic; font-size:var(--text-md); line-height:1.32; color:var(--color-text); }

@media (min-width:1180px){
  .fn2 { display:grid; grid-template-columns:minmax(0,62ch) 16rem; column-gap:var(--space-7); justify-content:center; align-items:start; max-width:none; }
  .fn2 > * { grid-column:1; }
  .fn2 > .fn2-figfull, .fn2 > .fn2-macro { grid-column:1 / -1; }
  .fn2 > .fn2-aside { grid-column:2; align-self:start; background:none; border-left:0; border-top:2px solid var(--fn2-gold); padding:var(--space-3) 0 0; border-radius:0; margin:0 0 var(--space-6); }
  .fn2 > .fn2-aside p { font-size:14px; line-height:1.55; }
}
@media (prefers-reduced-motion:reduce){ .fn2 > .fn2-aside { position:static; } }

/* ---- v2 scroll animation hooks (vanilla CSS/JS — IntersectionObserver in site.js) ----
   Progressive enhancement: classes below only ever apply once site.js adds .fn2-reveal /
   .fn2-svg-in at runtime, so a no-JS visitor sees the page fully rendered, not hidden. */
.fn2-reveal { opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.fn2-reveal.is-visible { opacity:1; transform:none; }
.fn2-svg-in { opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.94); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.fn2-svg-in.is-visible { opacity:1; transform:scale(1); }
.fn2-line-draw { transition:stroke-dashoffset .9s var(--ease-out); }
.fn2-pop-pulse.is-visible { animation:fn2PopPulse 1.3s var(--ease-out) .4s 1 both; }
@keyframes fn2PopPulse {
  0%   { filter:drop-shadow(0 0 0 color-mix(in srgb,var(--fn2-gold) 0%,transparent)); }
  35%  { filter:drop-shadow(0 0 16px color-mix(in srgb,var(--fn2-gold) 72%,transparent)); }
  100% { filter:drop-shadow(0 0 0 color-mix(in srgb,var(--fn2-gold) 0%,transparent)); }
}
@media (prefers-reduced-motion:reduce){
  .fn2-reveal, .fn2-svg-in { opacity:1; transform:none; transition:none; }
  .fn2-line-draw { transition:none; }
  .fn2-pop-pulse.is-visible { animation:none; }
}

/* ================= DICTIONARY VERTICAL (02/07) =================
   Two-layer term pages: free definition (indexable) + gated
   "operator's layer" (.dict-pro). Gate is progressive enhancement —
   site.js adds .dict-locked at runtime; no-JS visitors (and crawlers)
   see everything, matching the paywalled-content JSON-LD pattern. */
.dict-def { background:var(--color-surface); border:1px solid var(--color-line);
  border-radius:var(--radius-sm); padding:var(--space-6); margin-top:var(--space-6); }
.dict-def .lede { margin-top:0; }
.dict-formula { font-family:var(--font-mono); font-size:var(--text-lg); color:var(--color-text);
  background:var(--color-linen-100); border-left:3px solid var(--color-signal-600);
  padding:var(--space-4) var(--space-5); border-radius:var(--radius-sm); margin-block:var(--space-5);
  overflow-x:auto; white-space:nowrap; }
.dict-src { font-family:var(--font-mono); font-size:var(--text-sm); color:var(--color-text-muted);
  margin-top:var(--space-4); }
.dict-chips { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-block:var(--space-6); }
.dict-chips a { font-family:var(--font-mono); font-size:var(--text-sm); text-decoration:none;
  color:var(--color-signal-600); border:1px solid var(--color-signal-600); border-radius:999px;
  padding:6px 14px; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.dict-chips a:hover { background:var(--color-signal-600); color:var(--color-linen-50); }
.dict-pro { position:relative; margin-top:var(--space-7); }
.dict-pro-head { display:flex; align-items:baseline; gap:var(--space-3); }
.dict-pro-head .tag { font-family:var(--font-mono); font-size:var(--text-sm); letter-spacing:.06em;
  color:var(--color-gold-600); }
.dict-locked .dict-pro-body { filter:blur(7px); user-select:none; pointer-events:none; }
.dict-gate { display:none; }
.dict-locked .dict-gate { display:block; position:absolute; inset:auto 0 0 0; top:3.2rem;
  background:linear-gradient(180deg, color-mix(in srgb,var(--color-bg) 12%,transparent),
             color-mix(in srgb,var(--color-bg) 88%,transparent) 55%, var(--color-bg));
  text-align:center; padding-top:var(--space-7); }
.dict-gate-card { max-width:34rem; margin-inline:auto; background:var(--color-surface);
  border:1px solid var(--color-line); border-radius:var(--radius-sm);
  padding:var(--space-6); box-shadow:0 12px 32px rgba(43,37,29,.12); }
.dict-gate-card .h3 { margin-top:0; }
.dict-gate-fine { font-size:var(--text-sm); color:var(--color-text-muted); margin-top:var(--space-3); }
/* hub */
.dict-index .note-card .h3 { font-family:var(--font-mono); font-weight:600; font-size:var(--text-lg); }
@media (prefers-reduced-motion:reduce){ .dict-chips a { transition:none; } }