/* ═══════════════════════════════════════════════════════════════════════════
   daticortina.it: shared site styles
   ═══════════════════════════════════════════════════════════════════════════

   WHAT LIVES HERE vs INLINE
   - Here: tokens, base type, links/buttons/focus, header, footer, section grounds,
     the pine hero, the message page, reusable components (intro, split, steps, plate,
     ledger, sheet, photo, moment, cta, form fields, FAQ), reveal and reduced motion.
     Every page links this file.
   - css/legal.css: the long-form document layout (.legal-hero, .toc, .prose, .draft,
     .legal-docs, the stacking tables). Linked after site.css by the four legal pages only.
   - Inline <style> in a page: only what that page alone uses, plus its overrides of a
     shared component (e.g. pricing widens .hero h1). Page-only examples: the homepage
     crest chart and moment bars, pricing's plan cards and tables, features' stats and
     comparison table, the Speciale's cover and contents. When a second page needs an
     inline block, move it here as a component and delete the copies.
   - Shared behaviour is js/site.js; page-only scripts stay inline.

   RULES FOR EVERY PAGE
   - Copy is Italian, plain, exact (brand guide §06 "voce del posto"); "voi".
   - Titles never end with a period (h1, h2, h3, display statements like .quote).
     Body text, ledes and captions keep theirs; question marks stay.
   - Seasons are written 2025–26 (en dash) and wrapped in <span class="nowrap">.
   - Numbers Italian-formatted: 21.403 · 45,3% · € 186. Sources cited in mono with
     ● Dato ufficiale / ◐ Stima / ○ Dato struttura.
   - Colours only via the tokens below. Larch is a ≤5% signal (ticks), never a fill.
   - No external requests except Plausible (CSP in deploy/nginx-site-headers.conf).
   - Keep every plausible-event-* class, OWNER-INPUT / PLACEHOLDER comment and
     [DA INSERIRE: …] marker a page already has.

   PAGE SKELETON (relative URLs: staging serves the site under /sito/.
   404.html is the exception: it is served at any depth, so it uses root-absolute
   /fonts/…, /css/site.css, /js/site.js.)

   <head>
     …meta, canonical, OG…
     <link rel="preload" href="fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="fonts/source-serif-4-roman.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="fonts/ibm-plex-mono-400.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="stylesheet" href="fonts/fonts.css">
     <link rel="stylesheet" href="css/site.css">
     [<link rel="stylesheet" href="css/legal.css">   legal pages only]
     <script>if(!/[?&]static\b/.test(location.search)){document.documentElement.classList.add('js');
       setTimeout(function(){if(!window.__dcReady)document.documentElement.classList.remove('js')},3500)}</script>
     <script defer src="js/site.js"></script>
     [<style> page-only CSS </style>]
     [JSON-LD]
     …Plausible snippet (unchanged)…
   </head>
   <body>
     <a class="skip" href="#top">Salta al contenuto</a>
     <header class="site-header"> … </header>     (markup below)
     <main id="top">
       <section class="[tint|pine]" aria-labelledby="x-title">
         <div class="wrap"> … </div>
       </section>
     </main>
     <footer class="site-footer"> … </footer>     (markup below)
   </body>

   HEADER: two variants, same markup.
   - .site-header                     paper bar, for pages that start on paper.
   - .site-header.site-header--pine   pine bar over a .pine hero; turns paper when it
       sticks. Add data-stick-after="<selector>" to stick (and reveal the header CTA)
       only once that element (e.g. the hero's own CTA) has scrolled under the bar.
   Both tighten from 72 to 58px when stuck. Thank-you and 404 pages omit the header CTA;
   404 uses root-absolute links (/index.html, /features.html…). ≤720px: the nav shows at the top and the
   CTA replaces it once the bar sticks. Mark the current page: aria-current="page".

     <header class="site-header">
       <div class="wrap">
         <a class="wordmark" href="index.html">
           <svg viewBox="0 0 150 76" fill="none" aria-hidden="true" focusable="false"><polyline class="mk-ridge" points="4,52 34,22 52,38 78,8 104,34 122,24 146,44" stroke-width="7" stroke-linejoin="round" stroke-linecap="round"/><line class="mk-datum" x1="0" y1="66" x2="150" y2="66" stroke-width="5"/><line x1="78" y1="56" x2="78" y2="76" stroke="var(--larch)" stroke-width="7"/></svg>
           <span><span class="d">dati</span><b class="c">cortina</b></span>
         </a>
         <nav class="site-nav" aria-label="Navigazione principale">
           <a href="features.html">Funzionalità</a>
           <a href="pricing.html">Prezzi</a>
         </nav>
         <a class="btn btn-sm plausible-event-name=CTA+Demo plausible-event-position=header" href="index.html#contatti">Richiedete una demo</a>
       </div>
     </header>

   FOOTER: copy as is (on index.html the wordmark is a <span>, elsewhere a link home).

     <footer class="site-footer">
       <div class="wrap cols">
         <div class="company">
           <a class="wordmark" href="index.html">…same svg + spans as the header…</a>
           <p class="tag">Fatto a Cortina, per Cortina.</p>
           <p class="legal-id"><!-- OWNER-INPUT: ragione_sociale --><span class="todo">[DA INSERIRE: ragione_sociale]</span> · P.IVA <!-- OWNER-INPUT: partita_iva --><span class="todo">[DA INSERIRE: partita_iva]</span> · Cortina d'Ampezzo</p>
         </div>
         <nav aria-label="Pagine del sito">
           <a href="features.html">Dati e funzionalità</a>
           <a href="pricing.html">Piani e prezzi</a>
           <a class="plausible-event-name=Report+Sample plausible-event-position=footer" href="rapporto-campione-2025-26.pdf">Rapporto di esempio (PDF)</a>
         </nav>
         <nav aria-label="Area clienti">
           <a href="https://app.daticortina.it/">Accesso clienti</a>
           <!-- OWNER-INPUT: link_portale_clienti (link di accesso al portale clienti Stripe, Impostazioni → Billing → Customer portal) -->
           <a href="https://billing.stripe.com/p/login/DA_INSERIRE_link_portale_clienti">Gestisci abbonamento e fatture</a>
         </nav>
         <nav aria-label="Note legali">
           <a href="privacy.html">Privacy</a>
           <a href="cookie.html">Cookie</a>
           <a href="termini.html">Condizioni di vendita</a>
           <a href="note-legali.html">Note legali</a>
         </nav>
       </div>
       <div class="wrap"><p class="mono copy">© 2026 daticortina.it</p></div>
     </footer>

   CLASS INVENTORY
   Layout     .wrap · section (padding = --section) · .anchor (scroll-offset alias target)
              .intro > .intro-h + .intro-p   heading left, short paragraph right
              .split > (figure) + .text      12-col two-up; place children with grid-column
   Grounds    .tint (paper-2 + grain) · .pine (Verde Ampezzo + contours; h2, .kicker, .btn,
                .link, .todo, .plate and focus rings switch to light-on-pine by themselves)
              .pine--fade (contours fade out downwards) · .pine--flip (contours rotated)
   Hero       section.hero.pine > .wrap.hero-grid > .hero-top (mono line, <b> for emphasis)
                + h1 + .hero-aside > .lede + .hero-actions;  .hero-foot for a closing row
   Message    section.page > .wrap.page-grid > .page-head (h1, .lede, .actions) + .page-side
                (e.g. ol.steps) + p.note   short pages, footer pinned to the bottom
              ol.steps > li > .n + div > h2 + p   numbered next steps
   Type       h1 h2 h3 · .lede · .mono (caps caption) · .kicker (datum rule + <b>NN</b> label)
              .quote (display statement on .moment) · .legend · .nowrap · .sr-only
   Actions    .btn · .btn-sm · .btn-ghost (outline) · .btn-block (full width) · button.btn
              .link (+ <span class="arr" aria-hidden="true">→</span>) · .skip
   Components .plate > .plate-in > img + figcaption.mono (.fig = "Fig. N", .u = url)
                .plate-phone for a phone capture
              .ledger-h + ul.ledger > li > .n .g .row > (name) .what(.sep)   numbered source ledger
              .sheet-wrap > a.sheet > picture   paper page on a stack, lifts on hover
              .photo > picture > img (cover crop; set object-position per image)
              section.moment.pine > .wrap.moment-grid > .moment-text > .kicker + .quote > .ln
              section.cta.tint > .wrap.cta-grid > .cta-rule + h2 + .cta-side > p + .cta-actions
              .field > label (+ .opt) + input|select · .field-row (two fields) · .check > input + label text
              .form-error (hidden until :target, link to it from the server redirect)
              .faq > details > summary + .ans   accordion with +/– marker
              .todo   visible placeholder marker for [DA INSERIRE: …]
   Campaign   --glacier, --glacier-text, --fw-rule: Speciale Fashion Weekend pages only
   Motion     .rv          fades in when scrolled into view (opacity only)
              .kicker.rv / .cta-rule.rv   the datum line draws instead
              [data-inview] gets .in when visible, without hiding (page CSS animates it)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Tokens: the Quota 1224 palette (docs/daticortina-brand-guide.html §04), in OKLCH ── */
:root{
  --paper:oklch(96.8% 0.009 84.6);      /* #F7F4EE Carta: the ground */
  --paper-2:oklch(93.8% 0.014 84.6);    /* #EFEAE0 Carta scura: panels, .tint */
  --ink:oklch(24.3% 0.009 97.7);        /* #21201B Inchiostro: text, axes, datum */
  --pine:oklch(33.1% 0.049 156.2);      /* #1F3D2B Verde Ampezzo: primary, "you" */
  --pine-ui:oklch(39.3% 0.058 155.3);   /* #2A4F38 Verde Ampezzo, interactive */
  --larch:oklch(65.9% 0.126 72.9);      /* #C08428 Larice: graphic signal only (ticks) */
  --larch-text:oklch(50.8% 0.103 71.2); /* #8A5A10 Larice scuro: larch as text */
  --rock:oklch(52.6% 0.012 81.8);       /* #6E6A63 Roccia: market lines */
  --rock-2:oklch(70% 0.017 86.4);       /* #A39E93 Roccia chiara: disabled */
  --hairline:oklch(86.8% 0.019 86.2);   /* #D9D3C6 rules, borders */
  --rose:oklch(53.9% 0.121 32.3);       /* #A9503F Enrosadira: negative / attention only */

  /* Derived roles. Rock alone is 4.49:1 on paper-2, so secondary text uses rock-ink. */
  --rock-ink:color-mix(in oklch, var(--rock) 72%, var(--ink));      /* ≥6:1 on paper and paper-2 */
  --on-pine-2:color-mix(in oklch, var(--paper) 76%, var(--pine));   /* secondary text on pine, ≈6:1 */
  --on-pine-line:color-mix(in oklch, var(--paper) 22%, transparent);

  /* Campaign accent: Speciale Fashion Weekend only (fashion-weekend*.html, its PDF and email;
     docs/launch/fashion-weekend-data.md §7). Glacier for marks and rules, --glacier-text is
     the AA-safe text variant on paper, --fw-rule the sky → coral line. Never data, never text on pine. */
  --glacier:oklch(67.4% 0.086 235);        /* #5E9FC4 */
  --glacier-text:oklch(44.8% 0.087 240.5); /* #1D5A80 */
  --fw-rule:linear-gradient(90deg in srgb, oklch(74.9% 0.103 232.4), oklch(69.1% 0.131 29.5)); /* #64B9E4 → #E17A6B */

  --serif:"Source Serif 4",Georgia,serif;
  --sans:"Inter",-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono","SF Mono",monospace;

  /* 8px base unit (brand guide, Layout) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --pad:clamp(20px,4vw,56px);
  --maxw:1320px;
  --section:clamp(80px,9vw,128px);
  --hdr:72px;

  /* Motion: the "polish" lens. Measured, nothing bouncy. */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-draw:cubic-bezier(.6,.04,.3,1);
  --ease-io:cubic-bezier(.45,0,.15,1);

  /* Paper grain: one static tile, no blend modes */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .12 0 0 0 0 .1 .11 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Base ── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper) var(--grain);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
section{padding:var(--section) 0;scroll-margin-top:var(--hdr)}
/* Zero-height target for anchor aliases (#offerta, #numeri) under the sticky header */
.anchor{display:block;position:relative;top:calc(-1 * var(--hdr));height:0}

/* ── Type ── */
h1,h2,h3{font-family:var(--serif);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(40px,4.9vw,72px);font-weight:400}
h2{font-size:clamp(34px,4.2vw,58px);font-weight:500;color:var(--pine)}
h3{font-size:clamp(21px,1.8vw,26px);font-weight:500;line-height:1.2;letter-spacing:-.01em}
.lede{font-family:var(--serif);font-size:clamp(19px,1.5vw,22px);line-height:1.5}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--rock-ink)}
.legend{margin-top:var(--s3);font-size:11px;color:var(--ink)}
.nowrap{white-space:nowrap}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.todo{font-family:var(--mono);font-size:11px;color:var(--larch-text);background:color-mix(in oklch, var(--larch) 14%, transparent);padding:1px 6px;border-radius:3px}

/* Kicker: the surveyor's datum rule, section number, section name */
.kicker{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.kicker::before{content:"";width:var(--s5);height:1.5px;background:currentColor;flex:none;transform-origin:left}
.kicker b{color:var(--pine);font-weight:500}

/* ── Links, focus, buttons ── */
a{color:var(--pine-ui)}
a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--pine-ui);outline-offset:4px;border-radius:2px}
button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--pine-ui);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--pine);color:var(--paper);padding:12px 20px;z-index:50;font-weight:600;text-decoration:none}
.skip:focus{left:var(--s2);top:var(--s2)}

/* Text link: underline lifts away on hover; padding keeps a 44px target */
.link{display:inline-block;padding:11px 0;line-height:1.4;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:currentColor;transition:text-decoration-color .45s var(--ease-out),text-underline-offset .45s var(--ease-out)}
.link:hover{text-decoration-color:transparent;text-underline-offset:9px}
.link .arr{display:inline-block;margin-left:.35em;transition:transform .45s var(--ease-out)}
.link:hover .arr{transform:translateX(4px)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;font-weight:600;font-size:16px;text-decoration:none;color:var(--paper);background:var(--pine);padding:0 28px;border-radius:4px;transition:background-color .3s var(--ease-out),color .3s var(--ease-out)}
.btn:hover{background:var(--pine-ui)}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px;white-space:nowrap}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn-ghost:hover{background:var(--paper-2)}
.btn-block{display:flex;width:100%;text-align:center}
/* A <button class="btn"> (form submits) looks like the link version */
button.btn{border:0;font-family:inherit;cursor:pointer}

/* ── Section grounds ── */
.tint{background:var(--paper-2) var(--grain)}
.pine{position:relative;background:var(--pine);color:var(--paper);isolation:isolate;overflow:hidden}
.pine::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("../img/topo.svg") center/cover no-repeat}
.pine--fade::before{-webkit-mask-image:linear-gradient(#000 30%,transparent 75%);mask-image:linear-gradient(#000 30%,transparent 75%)}
.pine--flip::before{transform:rotate(180deg)}
.pine .mono{color:var(--on-pine-2)}
.pine .btn{background:var(--paper);color:var(--pine)}
.pine .btn:hover{background:var(--paper-2)}
.pine .link{color:var(--paper)}
.pine h2{color:var(--paper)}
.pine .kicker{color:var(--on-pine-2)}
.pine .kicker b{color:var(--paper)}
.pine .todo{color:var(--paper);background:color-mix(in oklch, var(--larch) 45%, transparent)}
.pine a:focus-visible,.pine [tabindex]:focus-visible,.pine button:focus-visible,.pine summary:focus-visible{outline-color:var(--paper)}

/* ── Header ── */
.site-header{position:sticky;top:0;z-index:30;background:color-mix(in oklch, var(--paper) 94%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);border-bottom:1px solid var(--hairline);transition:background-color .45s var(--ease-io),border-color .45s var(--ease-io),color .45s var(--ease-io)}
.site-header .wrap{display:flex;align-items:center;gap:var(--s3);height:var(--hdr);max-width:none;transition:height .45s var(--ease-io)}
.js .site-header.is-stuck .wrap{height:58px}
.site-nav{display:flex;gap:var(--s1);margin-left:auto}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:15px;font-weight:500;color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 50% calc(100% - 10px)/0% 1px no-repeat;transition:background-size .4s var(--ease-out)}
.site-nav a:hover,.site-nav a[aria-current="page"]{background-size:calc(100% - 24px) 1px}

/* Wordmark: "dati" light in rock, the place semibold in pine (brand guide §03) */
.wordmark{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:-.01em;color:inherit;text-decoration:none;white-space:nowrap}
.wordmark svg{width:34px;height:18px;flex:none}
.wordmark .d{font-weight:300;color:var(--rock-ink)}
.wordmark .c{font-weight:600;color:var(--pine)}
.mk-ridge{stroke:var(--pine)}
.mk-datum{stroke:currentColor}

/* Pine variant: matches the hero until it sticks. Without JS it never sticks. */
.site-header--pine:not(.is-stuck){background:var(--pine);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--paper);border-bottom-color:transparent}
.site-header--pine:not(.is-stuck) .wordmark .d{color:inherit;opacity:.78}
.site-header--pine:not(.is-stuck) .wordmark .c{color:inherit}
.site-header--pine:not(.is-stuck) .mk-ridge{stroke:currentColor}
.site-header--pine:not(.is-stuck) .btn{background:var(--paper);color:var(--pine)}
.site-header--pine:not(.is-stuck) .btn:hover{background:var(--paper-2)}
.site-header--pine:not(.is-stuck) a:focus-visible{outline-color:var(--paper)}
/* The pine hero carries its own CTA: the header one appears once the bar sticks */
.js .site-header--pine:not(.is-stuck) .btn{display:none}
.js .site-header--pine.is-stuck .btn{animation:fade-in .5s var(--ease-io)}
@keyframes fade-in{from{opacity:0}}

/* ── Hero: the pine opening (index, features, pricing, fashion-weekend). Pages tune padding
   and widths inline; the structure is hero-top (mono line), h1 left, hero-aside right. ── */
.hero{padding:clamp(28px,3vw,48px) 0 0}
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3);align-items:end}
.hero-top{grid-column:1/-1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s1) var(--s4);padding-bottom:var(--s2);margin-bottom:clamp(24px,2.8vw,40px);border-bottom:1px solid var(--on-pine-line)}
.hero-top b{color:var(--paper);font-weight:500}
.hero h1{grid-column:1/9;max-width:18ch}
.hero-aside{grid-column:9/13;padding-bottom:.4em}
.hero .lede{color:var(--on-pine-2);max-width:34ch}
.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);margin-top:var(--s3)}
.hero .link{font-size:15.5px}
.hero-foot{padding-top:var(--s4);padding-bottom:clamp(36px,4vw,56px)}

/* ── Message page: thank-you and 404 (a short page, the footer pinned to the bottom) ── */
body:has(> main .page){min-height:100vh;display:flex;flex-direction:column}
body:has(> main .page) > main{flex:1}
.page{padding:clamp(64px,8vw,112px) 0 var(--section)}
.page-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3);align-items:start}
.page-head{grid-column:1/7}
.page-head h1{color:var(--pine);max-width:16ch}
.page-head h1 em{font-style:italic;color:var(--ink)}
.page-head .lede{margin-top:var(--s3);max-width:36ch}
.page-side{grid-column:8/13;padding-top:var(--s1)}
.page .note{grid-column:1/-1;margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--hairline);font-size:14px;color:var(--rock-ink);max-width:80ch}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s4);margin-top:var(--s5)}

/* Numbered steps: the ledger rhythm, ink rule on top, hairlines between */
.steps{list-style:none;border-top:1.5px solid var(--ink)}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:var(--s2);padding:var(--s3) 0;border-bottom:1px solid var(--hairline)}
.steps .n{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--rock-ink);padding-top:.45em}
.steps h2{font-size:clamp(21px,1.8vw,26px);line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin-bottom:var(--s1)}
.steps p{font-size:16px;color:var(--rock-ink);max-width:52ch}

/* ── Intro and split layouts ── */
.intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3);align-items:end;margin-bottom:clamp(36px,4.5vw,64px)}
.intro-h{grid-column:1/8}
.intro-p{grid-column:9/13;color:var(--rock-ink);font-size:18px;max-width:36ch;padding-bottom:.4em}
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3);align-items:center}
.split > *{min-width:0}
.text p:not(.mono){margin-top:var(--s3);color:var(--rock-ink);font-size:18px;max-width:40ch}
.text .link{margin-top:var(--s2)}

/* ── Plate: a screenshot mounted like a print, caption underneath ── */
.plate{margin:0;min-width:0}
.plate-in{background:var(--paper);border:1px solid var(--hairline);padding:clamp(6px,.7vw,10px);box-shadow:0 1px 3px color-mix(in oklch, var(--ink) 8%, transparent)}
.plate-in img{border:1px solid var(--hairline);width:100%}
.plate figcaption{margin-top:12px;font-size:11px;color:var(--ink);letter-spacing:.1em}
.plate figcaption .fig{color:var(--pine);font-weight:500}
.plate figcaption .u{color:var(--rock-ink)}
.plate-phone .plate-in{border-radius:22px;padding:8px}
/* On pine the mount disappears and the print floats */
.pine .plate-in{border-color:transparent;box-shadow:0 30px 60px -36px color-mix(in oklch, var(--ink) 70%, transparent)}
.pine .plate figcaption,.pine .plate figcaption .fig{color:var(--paper)}
.pine .plate figcaption .u{color:var(--on-pine-2)}
.plate-phone .plate-in img{border-radius:15px}

/* ── Ledger: numbered list of sources with confidence glyphs ── */
.ledger-h{display:grid;grid-template-columns:40px 28px 1fr auto;gap:0 var(--s2);margin-top:var(--s4);padding-bottom:10px;border-bottom:1.5px solid var(--ink);font-size:11px;color:var(--ink)}
.ledger{list-style:none}
.ledger li{display:grid;grid-template-columns:40px 28px 1fr;gap:0 var(--s2);align-items:baseline;padding:14px 0;border-bottom:1px solid var(--hairline);font-size:16.5px}
.ledger .n{font-family:var(--mono);font-size:11px;color:var(--rock-ink);letter-spacing:.06em}
.ledger .g{font-family:var(--mono);font-size:14px;color:var(--pine)}
.ledger .row{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.ledger .what{color:var(--rock-ink);font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-align:right}
/* The "· " separator only reads in plain text or the stacked mobile layout */
.ledger .sep{display:none}

/* ── Sheet: a report page as a physical object on its stack ── */
.sheet-wrap{position:relative;padding:var(--s2) var(--s4) var(--s3) var(--s2);isolation:isolate}
.sheet{position:relative;display:block;width:min(100%,420px);transform:rotate(-2.2deg);transition:transform .8s var(--ease-out)}
.sheet::before,.sheet::after{content:"";position:absolute;inset:0;background:var(--paper);border:1px solid var(--hairline);z-index:-1;transition:transform .8s var(--ease-out)}
.sheet::before{transform:rotate(3deg) translate(10px,6px)}
.sheet::after{transform:rotate(5.5deg) translate(20px,12px);background:color-mix(in oklch, var(--paper) 60%, var(--paper-2))}
.sheet img{position:relative;border:1px solid var(--hairline);box-shadow:0 1px 3px color-mix(in oklch, var(--ink) 8%, transparent);transition:box-shadow .8s var(--ease-out)}
.sheet:hover,.sheet:focus-visible{transform:rotate(-.4deg) translateY(-10px)}
.sheet:hover::before,.sheet:focus-visible::before{transform:rotate(1.4deg) translate(8px,8px)}
.sheet:hover::after,.sheet:focus-visible::after{transform:rotate(2.6deg) translate(16px,16px)}
.sheet:hover img,.sheet:focus-visible img{box-shadow:0 1px 3px color-mix(in oklch, var(--ink) 8%, transparent),0 18px 30px -22px color-mix(in oklch, var(--ink) 35%, transparent)}

/* ── Photo: cover crop; pick object-position per image so the subject stays in frame ── */
.photo{margin:0}
.photo picture{display:block;overflow:hidden}
.photo img{aspect-ratio:4/3;object-fit:cover;width:100%}

/* ── Moment: one statement on pine, a figure beside it ── */
.moment{padding:clamp(96px,10vw,144px) 0}
.moment-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3);align-items:end}
.moment-text{grid-column:1/7}
.quote{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.8vw,72px);line-height:1.06;letter-spacing:-.025em;margin:var(--s3) 0;text-wrap:balance;color:var(--paper)}
.quote .ln{display:block}
.quote .fig{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}

/* ── CTA: datum rule, big title, actions on the side ── */
.cta-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3);align-items:end}
.cta h2{grid-column:1/9;font-size:clamp(40px,5.6vw,84px);max-width:13ch}
.cta-side{grid-column:9/13;padding-bottom:.4em}
.cta-side p{color:var(--rock-ink);font-size:18px;max-width:34ch;margin-bottom:var(--s3)}
.cta-actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1)}
.cta-rule{grid-column:1/-1;display:flex;align-items:center;gap:var(--s2);margin-bottom:clamp(32px,4vw,56px)}
.cta-rule::before{content:"";height:1.5px;background:var(--ink);flex:1;transform-origin:left}
.cta-rule::after{content:"";order:-1;width:3px;height:16px;background:var(--larch);margin-right:-12px}

/* ── Form controls: label above, 48px fields, errors as :target blocks ── */
.field{margin-bottom:var(--s3)}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field .opt{font-weight:400;color:var(--rock-ink)}
.field input,.field select{width:100%;min-height:48px;padding:11px 12px;font:16px var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--rock);border-radius:4px;transition:border-color .3s var(--ease-out)}
.field input:hover,.field select:hover{border-color:var(--ink)}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--pine-ui);outline-offset:1px;border-color:var(--pine-ui)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.check{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;margin-bottom:var(--s2);font-size:14.5px;line-height:1.55}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--pine)}
.check input:focus-visible{outline:2px solid var(--pine-ui);outline-offset:2px}
.form-error{display:none;margin-bottom:var(--s3);padding:12px 16px;border-left:3px solid var(--rose);background:color-mix(in oklch, var(--rose) 8%, transparent);font-size:15px;scroll-margin-top:calc(var(--hdr) + var(--s3))}
.form-error:target{display:block}

/* ── FAQ: <div class="faq"><details><summary>…</summary><div class="ans">…</div></details></div> ── */
.faq{border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:44px;padding:18px 0;font-family:var(--serif);font-size:clamp(19px,1.5vw,22px);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:22px;line-height:1;color:var(--pine-ui);flex:none}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 0 var(--s3);max-width:64ch;color:var(--rock-ink);font-size:16px}
.faq .ans b{color:var(--ink)}

/* ── Footer ── */
.site-footer{border-top:1.5px solid var(--ink);padding:var(--s6) 0 var(--s5);color:var(--rock-ink);font-size:14px}
.site-footer .cols{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:var(--s5)}
.site-footer nav{display:flex;flex-direction:column}
.site-footer nav a{display:flex;align-items:center;min-height:44px;color:var(--rock-ink);text-decoration:none;line-height:1.35}
.site-footer nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.site-footer .wordmark{color:var(--ink)}
.site-footer .tag{margin-top:var(--s1);font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink)}
.site-footer .legal-id{margin-top:var(--s2);font-size:13px;max-width:34ch}
.site-footer .copy{margin-top:var(--s5);padding-top:var(--s2);border-top:1px solid var(--hairline);font-size:11px;color:var(--ink)}

/* ── Reveal (JS only: html.js; js/site.js adds .in when in view) ── */
.js .rv{opacity:0}
.js .rv.in{opacity:1;transition:opacity .9s var(--ease-out) var(--d,0s)}
/* Datum lines draw rather than fade */
.js .kicker.rv,.js .cta-rule.rv{opacity:1}
.js .kicker.rv::before,.js .cta-rule.rv::before{transform:scaleX(0)}
.js .kicker.rv.in::before{transform:none;transition:transform .9s var(--ease-draw) var(--d,0s)}
.js .cta-rule.rv.in::before{transform:none;transition:transform 1.4s var(--ease-draw) .1s}

/* ── Responsive ── */
@media(max-width:960px){
  .hero h1{grid-column:1/-1;max-width:16ch}
  .hero-aside{grid-column:1/-1;margin-top:var(--s3);display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:start}
  .hero-actions{margin-top:0}
  .page-head,.page-side{grid-column:1/-1}
  .page-side{margin-top:var(--s6)}
  .intro-h,.intro-p{grid-column:1/-1}
  .intro-p{margin-top:var(--s2)}
  .moment-text{grid-column:1/-1}
  .photo img{aspect-ratio:16/10}
  .cta h2,.cta-side{grid-column:1/-1}
  .cta-side{margin-top:var(--s3)}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .site-footer .company{grid-column:1/-1}
}
@media(max-width:720px){
  :root{--hdr:64px}
  body{font-size:16.5px}
  /* Mobile header: the nav at the top, the CTA once the bar sticks */
  .site-header .wrap{gap:var(--s1)}
  .site-nav a{padding:0 8px;font-size:14px}
  .site-header .btn{display:none}
  .js .site-header.is-stuck .btn{display:inline-flex;margin-left:auto}
  .js .site-header.is-stuck .site-nav{display:none}
  .js .site-header.is-stuck .wrap{height:56px}
  .hero-aside{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr;gap:0}
  .ledger-h{grid-template-columns:28px 22px 1fr;gap:0 var(--s1)}
  .ledger-h span:last-child{display:none}
  .ledger li{grid-template-columns:28px 22px 1fr;gap:0 var(--s1)}
  .ledger .row{display:block}
  .ledger .what{display:block;text-align:left;margin-top:2px}
  .site-footer .cols{grid-template-columns:1fr;gap:var(--s3)}
}
@media(max-width:420px){
  .wordmark svg{display:none}
  .wordmark{font-size:19px}
  .js .site-header.is-stuck .btn{padding:0 13px;font-size:13px}
}

/* ── Reduced motion: final states, no transitions ── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}
  .js .rv{opacity:1}
  .js .kicker.rv::before,.js .cta-rule.rv::before{transform:none}
}