/* flyvandrer.com — design system (prelaunch directive §4).
   Dark-first: deep night surfaces with aurora light; a warm paper context for
   long reading. Semantic tokens only — no scattered hex values in components.
   One self-hosted sans (Inter) for interface and body, one editorial display
   face (Fraunces) for major statements. No external font requests. */

/* ---------- tokens ---------- */
/* ---------------------------------------------------------------------------
   Vandrer — expedition identity (founder directive, 4 September 2026).

   Nordic daylight, global colour, movement from Oslo out into the world.
   LIGHT IS THE DEFAULT CONTEXT: the great majority of browsing happens on warm
   snow and paper. Deep navy is reserved for deliberately cinematic moments —
   the homepage hero and the footer — via .ctx-night. That split is the whole
   point of the identity: the world is bright, the night sky is the exception.
   --------------------------------------------------------------------------- */
:root{
  /* raw palette */
  --snow:#FCFAF6;
  --paper:#F4F0E8;
  --frost:#FFFFFF;
  --mist:#E9E3D7;
  --glacier:#BEDCEA;
  --glacier-deep:#4E90AE;
  --cobalt:#1B4FD8;
  --cobalt-bright:#4A82F5;
  --ocean:#0B6E86;
  --granite:#55606B;
  --moss:#4C6B44;
  --sunrise:#EE8A2B;
  --sunrise-deep:#A8541A;   /* AA on paper (5.1:1); sunrise itself is 2.4:1 there */
  --brand-fly:var(--sunrise-deep);
  --coral:#EA5F4D;
  --volcanic:#713A2B;
  --navy:#0A1A2E;
  --navy-soft:#13273F;
  --ink:#101A24;
  --ink-strong:#060C13;

  /* semantic state colours — contrast-checked against --snow */
  --success:#2F6B4A;
  --warning:#8A5A00;
  --danger:#B23A2A;
  --information:#0B6E86;

  /* Legacy role aliases. The old dark identity's names are still referenced by
     a few components; mapping them here means nothing can silently lose its
     colour while the visual system is replaced piece by piece. */
  --night:var(--navy);
  --aurora:var(--ocean);
  --sky:var(--glacier-deep);
  --ember:var(--sunrise);
  --muted:var(--granite);

  /* resolved roles — light context, the default.
     ONE identity (review of 6 September 2026): the action colour is sunrise
     in BOTH contexts (--action, navy text on it: 6.9:1); the inline accent
     for links, current-state marks and numerals is ocean on light (5.6:1 on
     snow) and glacier on night. Cobalt is retired from the interface — it
     survives only as a raw palette token for the journey playground's
     connection marks. */
  --bg:var(--snow);
  --bg-raised:var(--frost);
  --bg-sunken:var(--paper);
  --fg:var(--ink);
  --fg-strong:var(--ink-strong);
  --fg-muted:var(--granite);
  --accent:var(--ocean);
  --accent-ink:#FFFFFF;
  --accent-soft:rgba(11,110,134,.09);
  --action:var(--sunrise);
  --action-ink:var(--navy);
  --action-hover:#F5A04A;
  --outline-fg:var(--navy);
  --outline-line:rgba(10,26,46,.72);
  --sky-fg:var(--ocean);
  --ember-fg:var(--volcanic);
  --success-fg:var(--success);
  --warning-fg:var(--warning);
  --danger-fg:var(--danger);
  --information-fg:var(--information);
  --line:rgba(16,26,36,.13);
  --line-strong:rgba(16,26,36,.26);
  --focus:var(--ocean);
  --selection:rgba(238,138,43,.30);
  --shadow:0 18px 50px rgba(16,26,36,.10);
  --shadow-lift:0 30px 80px rgba(16,26,36,.16);

  /* type */
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --fs-hero:clamp(44px,2.6vw + 30px,84px);
  --fs-h1:clamp(40px,2.2vw + 32px,72px);
  --fs-h2:clamp(30px,1.6vw + 22px,52px);
  --fs-h3:clamp(21px,.6vw + 18px,26px);
  --fs-body:17px;
  --fs-narrative:clamp(18px,.3vw + 17px,20px);
  --fs-label:14px;
  --measure:62ch;

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-nav:220ms;
  --t-narrative:380ms;

  --radius:14px;
  --radius-lg:22px;
  --radius-pill:999px;
  --header-h:72px;
  /* the persistent truth bar was removed from the shell (one statement in the
     hero, one in the footer); kept as a token because layout maths refer to it */
  --truth-h:0px;

  /* ---- v2 (brand & website completion directive, 15 September 2026) ---- */
  /* the warm-paper family, named for what they are */
  --bone:#F7F2E9;
  --sand:#E6D8C3;
  --fjord:#1F5F7A;
  --fjord-deep:#0F3D52;
  --glacier-light:#DCEBF3;
  --moss-soft:#DCE4D3;
  --coral-soft:rgba(234,95,77,.12);
  --ink-soft:#2B3A48;
  /* data voice: tabular figures with a little air, for coordinates and distances */
  --font-data:'Inter',system-ui,sans-serif;
  --ls-data:.08em;
  /* editorial display sizes beyond the h-scale — the statement type */
  --fs-statement:clamp(52px,6.2vw + 12px,128px);
  --fs-numeral:clamp(96px,14vw,240px);
  --fs-kicker:14px; /* was 13px: the smallest type on the site is a label a reader must be able to read, and §4.3 sets 14px as the floor */
  /* spacing scale (rem-free: px keeps the maths legible next to clamp()) */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:144px;
  --sect-y:clamp(72px,11vh,150px);
  /* content widths */
  --w-prose:760px;--w-read:900px;--w-site:1200px;--w-wide:1400px;
  /* image ratios */
  --ratio-hero:16/9;--ratio-card:4/5;--ratio-wide:21/9;--ratio-square:1/1;
  /* motion: travel, not bounce */
  --t-slow:900ms;--t-route:2600ms;
  --ease-travel:cubic-bezier(.16,.84,.44,1);
}

/* The cinematic dark context — hero, footer, and anywhere the world should read
   as night sky over open ocean. Deliberately the minority of the experience. */
.ctx-night,.tile{
  --bg:var(--navy);
  --bg-raised:var(--navy-soft);
  --bg-sunken:#06121F;
  --fg:#EAF1F7;
  --fg-strong:#FFFFFF;
  --fg-muted:#9DB0C2;
  --accent:var(--sunrise);
  --accent-ink:var(--navy);
  --brand-fly:var(--sunrise);
  --accent-soft:rgba(238,138,43,.16);
  --action:var(--sunrise);
  --action-ink:var(--navy);
  --action-hover:#F5A04A;
  --outline-fg:#F4F0E8;
  --outline-line:rgba(244,240,232,.72);
  --sky-fg:var(--glacier);
  --ember-fg:var(--sunrise);
  --success-fg:#7BC79B;
  --warning-fg:#F0C267;
  --danger-fg:#F49384;
  --information-fg:var(--glacier);
  --line:rgba(234,241,247,.16);
  --line-strong:rgba(234,241,247,.32);
  --focus:var(--glacier);
  --selection:rgba(238,138,43,.30);
  --shadow:0 24px 70px rgba(0,0,0,.45);
  background:var(--bg);color:var(--fg);
}

/* A warm paper band, for alternating editorial rhythm on long light pages. */
.ctx-paper{--bg:var(--paper);--bg-raised:var(--snow);background:var(--bg);color:var(--fg)}

/* `body.paper` was the old opt-in light context. Light is now the default, so
   this confirms the default rather than switching anything — kept so the many
   pages passing body_class => 'paper' keep rendering exactly as intended. */
.ctx-light,body.paper{background:var(--bg);color:var(--fg)}

@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/fraunces-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/fraunces-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/inter-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2')}

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--truth-h) + 12px);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font-sans);font-weight:400;font-size:var(--fs-body);line-height:1.65;
  min-height:100svh;display:flex;flex-direction:column;overflow-x:clip;font-variant-numeric:tabular-nums}
main{flex:1;outline:none}
::selection{background:var(--selection)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
p a,.prose a,.consent a,li a{text-decoration:underline;text-underline-offset:3px}
.mainnav a,.footlinks a,.langswitch a,.tile .vote,.errorlinks a{text-decoration:none}
.tile .vote{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
img,svg,video{max-width:100%;height:auto}
[hidden]{display:none!important}
/* `overflow-wrap:anywhere` lets the browser break a word wherever it improves
   line filling, so a display headline in a narrow column came out as
   "Econom / y should feel like travel again." — a mid-word break on the
   largest words on the site. `break-word` breaks only when a word cannot fit
   on a line by itself, which is the case this was ever meant to cover; German
   and Norwegian compounds still hyphenate properly through hyphens:auto. */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;color:var(--fg-strong);letter-spacing:-.02em;line-height:1.08;text-wrap:balance;hyphens:auto;overflow-wrap:break-word;scroll-margin-top:calc(var(--header-h) + var(--truth-h) + 16px)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.2}
p,li,dd,dt,label,legend,figcaption,small,td,th,summary,time,code,button,input,select,textarea{font-size:max(1em,var(--fs-label))}
p,li{max-width:var(--measure);overflow-wrap:anywhere}
code{font-family:var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:.02em;background:var(--accent-soft);padding:1px 6px;border-radius:6px;font-size:max(14px,.95em)}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.narrow{max-width:760px}
.eyebrow,.mono{font-family:var(--font-sans);font-weight:500;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:10px;z-index:200;background:var(--action);color:var(--action-ink);padding:12px 20px;border-radius:10px;font-weight:500;font-size:16px}
.skip:focus{left:10px}
.lead{font-size:var(--fs-narrative);line-height:1.6;color:var(--fg);font-weight:300;max-width:var(--measure)}
.fine{font-size:var(--fs-label);color:var(--fg-muted);line-height:1.55}
.wide{max-width:none}

/* ---------- state words with marks (§4.2: never colour alone) ---------- */
.state{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:var(--fs-label);letter-spacing:.04em}
.state-mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;font-size:14px;line-height:1;font-family:var(--font-sans)}
.state-confirmed,.state-success{color:var(--success-fg)}
.state-exploring,.state-information{color:var(--information-fg)}
.state-exploring .state-mark{border-style:dashed}
.state-not_offered{color:var(--ember-fg)}
.state-warning{color:var(--warning-fg)}
.state-danger{color:var(--danger-fg)}
h2 .state{font-size:inherit;font-family:inherit;font-weight:400;letter-spacing:inherit;gap:.35em}
h2 .state-mark{width:.72em;height:.72em;font-size:max(14px,.42em);font-family:var(--font-sans)}

/* ---------- header (§5; IA of the 15 Sep 2026 directive §8) ---------- */
.tophat{position:sticky;top:0;z-index:90;background:rgba(252,250,246,.88);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);color:var(--fg);border-bottom:1px solid var(--line);transition:background var(--t-nav) var(--ease),border-color var(--t-nav) var(--ease)}
.tophat.over-hero:not(.solid){background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:#EAF1F7;--fg:#EAF1F7;--fg-strong:#fff;--fg-muted:#9DB0C2;--accent:var(--sunrise);--brand-fly:var(--sunrise);--accent-ink:var(--navy);--line:rgba(234,241,247,.18);--line-strong:rgba(234,241,247,.34);--focus:var(--glacier)}
.tophat.over-hero:not(.solid)::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,26,46,.66),rgba(10,26,46,0));pointer-events:none}
/* Without JavaScript the header is in the flow on a light ground, not floating
   over the night hero, so the light-on-dark treatment would make the whole
   navigation nearly invisible. Placed after the over-hero rules so it wins. */
.no-js .tophat.over-hero:not(.solid){background:rgba(252,250,246,.96);color:var(--ink);--fg:var(--ink);--fg-strong:var(--ink-strong);--fg-muted:var(--granite);--accent:var(--ocean);--line:rgba(16,26,36,.13);--line-strong:rgba(16,26,36,.26);--focus:var(--ocean);border-bottom:1px solid var(--line)}
.no-js .tophat.over-hero:not(.solid)::before{display:none}
.no-js .tophat .mainnav a,.no-js .tophat .navgroup-btn{opacity:1}
.tophat.over-hero.light-hero:not(.solid){color:var(--fg);--fg:var(--ink);--fg-strong:var(--ink-strong);--fg-muted:var(--granite);--accent:var(--ocean);--line:rgba(16,26,36,.13);--line-strong:rgba(16,26,36,.26);--focus:var(--ocean)}
.tophat.over-hero.light-hero:not(.solid)::before{background:linear-gradient(180deg,rgba(252,250,246,.72),rgba(252,250,246,0))}
.topnav{position:relative;display:flex;align-items:center;gap:8px 18px;min-height:var(--header-h);flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;color:inherit;min-height:44px}
.brand:hover{text-decoration:none}
.brand .mark{color:var(--accent)}
.brand-name{font-weight:500;font-size:18px;letter-spacing:.32em;display:inline-flex;align-items:baseline}
.brand-fly{font-size:.78em;font-weight:400;letter-spacing:.18em;color:var(--brand-fly);margin-right:.12em;text-transform:lowercase}
.brand-v{letter-spacing:.32em;font-size:.86em}
.topnav-tools{display:flex;align-items:center;gap:10px;margin-left:auto}
.navsheet{display:contents}
.mainnav{list-style:none;display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;align-items:center}
.mainnav a,.navgroup-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:inherit;font-size:15px;font-weight:400;padding:0 12px;border-radius:var(--radius-pill);opacity:.86;background:none;border:0;font-family:inherit;cursor:pointer;line-height:1.2;white-space:nowrap}
.mainnav a:hover,.navgroup-btn:hover{opacity:1;text-decoration:none;background:var(--accent-soft)}
.mainnav a[aria-current="page"],.navgroup.is-current>.navgroup-btn{opacity:1;color:var(--accent);font-weight:500}
.navgroup-btn[aria-expanded="true"]{opacity:1;background:var(--accent-soft)}
.navgroup-btn .chev{transition:transform var(--t-nav) var(--ease)}
.navgroup-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.navgroup{position:relative}
.navpanel{position:absolute;left:0;top:calc(100% + 6px);min-width:240px;background:var(--bg-raised);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px;z-index:95}
.tophat.over-hero:not(.solid) .navpanel{--fg:var(--ink);--fg-strong:var(--ink-strong);--fg-muted:var(--granite);--accent:var(--ocean);--line:rgba(16,26,36,.13);color:var(--ink)}
.navpanel ul{list-style:none}
.navpanel a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;color:var(--ink);font-size:15.5px;opacity:1}
.navpanel a:hover{background:var(--accent-soft);color:var(--ink);text-decoration:none}
.navpanel a[aria-current="page"]{color:var(--ocean);font-weight:500}
.js .navgroup:not(.open) .navpanel{display:none}
.navsheet-actions{display:flex;align-items:center;gap:12px}
.navtoggle{display:none}
/* language: globe + own name + a disclosure of every published language */
.langswitch{display:inline-flex;align-items:center}
.langmenu{position:relative}
.langmenu>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);cursor:pointer;font-size:14px;font-weight:500;color:inherit;white-space:nowrap}
.langmenu>summary::-webkit-details-marker{display:none}
.langmenu>summary:hover{background:var(--accent-soft)}
.langmenu[open]>summary{background:var(--accent-soft)}
.langmenu .globe{flex:none}
.langmenu-list{list-style:none;margin:0;padding:6px}
.langmenu>.langmenu-list{position:absolute;right:0;top:calc(100% + 6px);min-width:180px;background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);z-index:96;color:var(--ink)}
.tophat.over-hero:not(.solid) .langmenu>.langmenu-list{--line:rgba(16,26,36,.13);--accent:var(--ocean)}
.langmenu-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 14px;border-radius:10px;color:inherit;font-size:15px;font-weight:400}
.langmenu-list a:hover{background:var(--accent-soft);text-decoration:none}
.langmenu-list a[aria-current="true"]{font-weight:500;color:var(--ocean)}
.langmenu-list a[aria-current="true"]::after{content:"✓";font-size:14px}
.langmenu-inline{display:flex;flex-wrap:wrap;gap:2px;padding:0}
.langmenu-inline a{min-height:44px;padding:0 12px;border-radius:var(--radius-pill);font-size:14px}
.langswitch-sheet{display:none}
.shape-cta{padding:12px 18px;font-size:15px;white-space:nowrap}
@media(max-width:1180px){
  .navtoggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;background:none;border:1px solid var(--line-strong);border-radius:var(--radius-pill);color:inherit;font:inherit;font-weight:500;font-size:15px;padding:0 16px;cursor:pointer}
  .navtoggle-lines{display:inline-flex;flex-direction:column;gap:5px}
  .navtoggle-lines i{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform var(--t-nav) var(--ease)}
  .navtoggle[aria-expanded="true"] .navtoggle-lines i:first-child{transform:translateY(3.5px) rotate(45deg)}
  .navtoggle[aria-expanded="true"] .navtoggle-lines i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .navsheet{display:none;width:100%;flex-direction:column;gap:18px;padding:12px 0 22px;border-top:1px solid var(--line);max-height:calc(100svh - var(--header-h));overflow:auto}
  .js .navsheet.open,.no-js .navsheet{display:flex}
  /* Without JavaScript the sheet cannot be collapsed, so the whole navigation —
     four groups, twenty links — is permanently open inside the header. A
     STICKY header that tall covers most of a phone screen and follows the
     reader down every page, and it intercepts clicks on whatever is beneath
     it. Without JavaScript the header scrolls away with the page instead: the
     navigation is still first, and then it is out of the way.
     (Found by the no-JavaScript Field Notes test, which could not reach the
     form's own submit button because the navigation was over it.) */
  .no-js .tophat{position:static}
  .no-js .navtoggle{display:none}
  /* And it is COMPACT. One link per row is right for a sheet a reader opened
     on purpose; it is wrong for a sheet that can never be closed, where it
     fills the first screen before any of the page. Without JavaScript the same
     links wrap into a row, the group names read as small labels beside them,
     and the whole navigation is four lines instead of twenty. */
  .no-js .navsheet{display:block;padding:10px 0 14px;max-height:none;overflow:visible}
  .no-js .mainnav{display:block}
  .no-js .navgroup{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0}
  .no-js .navgroup::before{padding:6px 0 0;flex:0 0 100%}
  .no-js .navpanel{display:contents}
  .no-js .navpanel ul{display:flex;flex-wrap:wrap;gap:2px 8px}
  .no-js .navpanel a,.no-js .navsolo a{padding:0 10px;font-size:15px}
  .no-js .navsheet-actions{margin-top:10px}
  .tophat.over-hero:not(.solid):has(.navsheet.open){background:var(--snow);color:var(--ink);--fg:var(--ink);--fg-strong:var(--ink-strong);--fg-muted:var(--granite);--accent:var(--ocean);--line:rgba(16,26,36,.13);--line-strong:rgba(16,26,36,.26)}
  .tophat.over-hero:not(.solid):has(.navsheet.open)::before{display:none}
  .mainnav{flex-direction:column;gap:0;margin-left:0;width:100%;align-items:stretch}
  .navgroup{border-bottom:1px solid var(--line)}
  .navgroup-btn{display:none}
  .navgroup::before{content:attr(data-label);display:block;padding:14px 14px 4px;font-size:var(--fs-kicker);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);font-weight:500}
  .navpanel,.js .navgroup:not(.open) .navpanel{display:block;position:static;min-width:0;background:none;border:0;box-shadow:none;padding:0 0 10px;color:inherit}
  .navpanel a,.navsolo a{display:flex;min-height:52px;font-size:19px;padding:0 14px;border-radius:12px;width:100%;color:inherit}
  .navsolo{padding:8px 0}
  .navsheet-actions{flex-wrap:wrap;gap:14px;padding:0 4px}
  .langswitch-compact{display:inline-flex}
  .langswitch-sheet{display:inline-flex}
  .shape-cta{min-height:52px;display:inline-flex;align-items:center;font-size:17px;padding:0 26px;width:100%;justify-content:center}
  .topnav{gap:12px}
}
@media(min-width:1181px){
  /* desktop: the globe control in the header row; the inline list belongs to the sheet */
  .langswitch-compact{display:inline-flex}
  .langswitch-sheet{display:none}
  .topnav-tools{order:3;margin-left:0}
  .navsheet-actions{order:4}
  .mainnav{margin-left:auto}
}
@media(max-width:479px){
  /* narrow phones: the globe alone in the header row (the name is one tap away and
     the sheet lists every language in full) so brand, language and Menu share a line */
  .langmenu>summary{padding:0 10px}
  .langmenu-current{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .navtoggle{padding:0 12px}
  .topnav{gap:8px}
}
/* the reader asked for a language that is not published yet (lib/locale.php) */
.locale-notice{background:var(--sand);color:var(--ink);font-size:15px;line-height:1.5;padding:10px clamp(20px,5vw,64px);text-align:center;border-bottom:1px solid var(--line)}
/* the compact prelaunch disclosure (directive §2) */
.prelaunch-mark{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-data);font-size:var(--fs-kicker);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);text-decoration:none;min-height:32px}
.prelaunch-mark:hover{color:var(--fg);text-decoration:underline;text-underline-offset:4px}
.prelaunch-dot{width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;flex:none}

/* ---------- persistent truth line (§5) ---------- */
.truthline-bar{position:relative;z-index:80;background:var(--bg-raised);border-bottom:1px solid var(--line);color:var(--fg)}
body.paper .truthline-bar{background:#FFFDF9}
.truthline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:var(--truth-h);padding-top:8px;padding-bottom:8px;font-size:var(--fs-label);line-height:1.4;color:var(--fg-muted);max-width:none}
.truthline a{color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:3px;min-height:28px;display:inline-flex;align-items:center}
.truthline .dot{color:var(--fg-muted)}
.has-hero .truthline-bar{background:rgba(7,13,22,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;background:var(--fg);color:var(--bg);font-weight:500;font-size:16px;padding:12px 28px;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;font-family:inherit;line-height:1.2;text-align:center;transition:transform var(--t-nav) var(--ease),background var(--t-nav) var(--ease)}
.btn:hover{transform:translateY(-1px);text-decoration:none}
/* ONE action identity: sunrise with navy text on light AND on night (6.9:1);
   the secondary is an outline in the context's ink (navy on light, paper on
   night). No cobalt anywhere in a button. */
.btn.primary{background:var(--action);color:var(--action-ink);border-color:transparent}
.btn.primary:hover,.btn.primary:focus-visible{background:var(--action-hover);color:var(--action-ink)}
.btn.ghost{background:transparent;color:var(--outline-fg);border:1.5px solid var(--outline-line)}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--action);background:rgba(238,138,43,.10)}
.tophat.over-hero:not(.solid) .btn.ghost{--outline-fg:#F4F0E8;--outline-line:rgba(244,240,232,.72)}
.btn.small{min-height:44px;font-size:15px;padding:10px 20px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.arrow::after{content:"→";margin-left:.35em}
p .btn,li .btn,.prose .btn{text-decoration:none}

/* ---------- sections & editorial grid (§4.1: asymmetric) ---------- */
section{position:relative}
.sect{padding:clamp(72px,11vh,150px) 0;border-top:1px solid var(--line)}
.sect.flush{border-top:0}
.sect-head{display:grid;gap:14px 40px;align-items:end;margin-bottom:clamp(30px,5vh,56px)}
@media(min-width:900px){.sect-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.sect-head .lead{padding-bottom:6px}}
.sect-head h2{max-width:20ch}
.offset{margin-left:auto}
.editorial{display:grid;gap:clamp(28px,5vw,72px)}
@media(min-width:900px){.editorial{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}.editorial.reverse{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}}
.editorial h2{max-width:16ch}

/* ---------- hero (§6.1 s1) ---------- */
#hero{position:relative;min-height:calc(100svh - var(--header-h) - var(--truth-h));display:flex;align-items:center;overflow:hidden;padding:clamp(56px,10vh,120px) 0 clamp(64px,9vh,110px);isolation:isolate;margin-top:calc(-1 * (var(--header-h) + var(--truth-h)));padding-top:calc(var(--header-h) + var(--truth-h) + clamp(56px,10vh,120px))}
.has-hero .tophat,.has-hero .truthline-bar{position:relative}
.has-hero .tophat{position:sticky}
/* see the .no-js rule above: on a hero page the header sits over the hero and
   the hero pulls up under it, so a permanently open sheet covers the opening
   screen. Without JavaScript it sits in the flow like any other block. */
.no-js.has-hero .tophat,.no-js .has-hero .tophat{position:static}
.no-js #hero{margin-top:0;padding-top:clamp(56px,10vh,120px);min-height:0}
.hero-scene{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.aurora{position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(44% 40% at 72% 26%,rgba(190,220,234,.34),transparent 70%),
    radial-gradient(38% 34% at 26% 60%,rgba(74,130,245,.30),transparent 70%),
    radial-gradient(30% 28% at 86% 76%,rgba(238,138,43,.24),transparent 70%);
  filter:blur(14px);animation:aurora-drift 46s ease-in-out infinite alternate}
@keyframes aurora-drift{0%{transform:translate3d(-2%,-1%,0) rotate(-1deg)}50%{transform:translate3d(2%,2%,0) rotate(1deg)}100%{transform:translate3d(-1%,3%,0) rotate(-.5deg)}}
#hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,26,46,.14) 0%,rgba(10,26,46,.10) 35%,rgba(10,26,46,.94) 100%);pointer-events:none}
.hero-grid{display:grid;gap:32px;align-items:end}
@media(min-width:1000px){.hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.hero-copy{position:relative;z-index:1}
.hero-copy .eyebrow{color:var(--glacier);margin-bottom:22px}
.hero-copy h1{font-size:var(--fs-hero);max-width:17ch;margin-bottom:26px;line-height:1.0;letter-spacing:-.03em}
/* A hero headline written as a STATEMENT keeps the statement scale. This rule
   exists because `.hero-copy h1` is more specific than `.statement` and was
   quietly winning: the homepage's opening line rendered at the old hero
   minimum of 44px instead of the 52px the type scale sets, so the largest
   words on the site were smaller than the scale they were written for. */
.hero-copy h1.statement{font-size:var(--fs-statement);max-width:14ch}
.hero-copy .lead{max-width:48ch;color:#EAF1F7}
.hero-copy .cta-row{margin-top:34px}
.hero-status{margin-top:28px;font-size:var(--fs-label);color:#9DB0C2;letter-spacing:.02em}
.hero-trace{position:relative;z-index:1;justify-self:end;width:min(100%,520px);aspect-ratio:13/10}
.hero-trace svg{width:100%;height:100%;overflow:visible}
.hero-trace .trace{fill:none;stroke:var(--sunrise);stroke-width:2;stroke-linecap:round;stroke-dasharray:6 9}
.hero-trace .trace-draw{stroke-dasharray:1200;stroke-dashoffset:0;animation:trace-draw 2.6s var(--ease) .4s both}
@keyframes trace-draw{from{stroke-dashoffset:1200}to{stroke-dashoffset:0}}
.hero-trace .origin{fill:var(--sunrise)}
.hero-trace .halo{fill:none;stroke:var(--sunrise);stroke-width:1.2;opacity:.5;transform-origin:center;transform-box:fill-box;animation:breathe 4.8s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.35);opacity:.15}}
.hero-trace .pt{fill:none;stroke:#EAF1F7;stroke-width:1.4;opacity:.75}
.hero-trace text{fill:#EAF1F7;font-family:var(--font-sans);font-size:14px;letter-spacing:.14em;font-weight:500}
.hero-trace .lbl-explore{fill:var(--glacier);font-size:14px}

/* ---------- destination mosaic (§6.1 s2 — no equal card rows) ---------- */
.searchrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:6px 0 28px;max-width:640px}
.searchrow>div{flex:1 1 260px}
.mosaic{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}.mosaic .tile:first-child{grid-column:span 2}}
@media(min-width:1000px){.mosaic{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(210px,auto)}
  .mosaic .tile:nth-child(1){grid-column:span 4;grid-row:span 2}
  .mosaic .tile:nth-child(2){grid-column:span 2}
  .mosaic .tile:nth-child(3){grid-column:span 2}
  .mosaic .tile:nth-child(4){grid-column:span 2}
  .mosaic .tile:nth-child(5){grid-column:span 2}
  .mosaic .tile:nth-child(6){grid-column:span 2}
  .mosaic .tile:nth-child(7){grid-column:span 3}
  .mosaic .tile:nth-child(8){grid-column:span 3}
  .mosaic .tile:nth-child(9){grid-column:span 2}
  .mosaic .tile:nth-child(10){grid-column:span 2}
  .mosaic .tile:nth-child(11){grid-column:span 2}
  .mosaic .tile:nth-child(12){grid-column:span 6;grid-row:span 1}
  .mosaic .tile:nth-child(12) .tile-facts{grid-auto-flow:column;justify-content:start;gap:26px}}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:240px;border-radius:var(--radius);overflow:hidden;background:var(--bg-raised);border:1px solid var(--line);color:#fff;isolation:isolate;box-shadow:var(--shadow)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%;z-index:-2;opacity:.9;filter:saturate(1.12) brightness(1.05);transition:transform var(--t-narrative) var(--ease)}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,26,46,0) 18%,rgba(10,26,46,.58) 52%,rgba(10,26,46,.90) 88%)}
.tile:hover img{transform:scale(1.03)}
.tile-body{padding:22px 22px 20px;display:grid;gap:8px}
.tile h3{font-size:var(--fs-h3);color:#fff}
.tile:first-child h3{font-size:clamp(28px,2.4vw,40px)}
.tile .place-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;color:rgba(255,255,255,.76);font-size:var(--fs-label)}
.tile .fact{color:rgba(255,255,255,.92);font-size:16px;max-width:44ch;background:none;border:0;padding:0;border-radius:0}
.tile .state{color:var(--glacier)}
.tile .vote{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-weight:500;font-size:15px;text-decoration:underline;text-underline-offset:4px;width:fit-content}
.tile .vote:hover{color:var(--sunrise)}

/* ---------- steps (§6.1 s3) ---------- */
.steps{counter-reset:step;list-style:none;display:grid;gap:18px;margin-top:8px}
@media(min-width:900px){.steps{grid-template-columns:1.2fr 1fr 1fr}.steps .step:nth-child(2){margin-top:44px}.steps .step:nth-child(3){margin-top:88px}}
.step{position:relative;padding:26px 24px 24px 24px;border-top:2px solid var(--line-strong)}
.step::before{counter-increment:step;content:"0" counter(step);display:block;font-family:var(--font-display);font-size:34px;color:var(--accent);margin-bottom:12px;line-height:1}
.step h3{margin-bottom:10px}
.step p{color:var(--fg);font-size:var(--fs-narrative);font-weight:300}
.closing{margin-top:40px;padding:22px 26px;border-left:3px solid var(--sunrise);color:var(--fg);font-size:var(--fs-narrative);max-width:60ch}

/* ---------- what is real today (§6.1 s5 — three visibly different columns) ---------- */
.reality{display:grid;gap:18px;margin-top:8px}
@media(min-width:900px){.reality{grid-template-columns:5fr 4fr 3fr;align-items:start}}
.reality-col{border-radius:var(--radius);padding:28px 26px 26px}
.reality-col h3{margin:14px 0 18px;font-size:clamp(24px,1.4vw + 16px,32px)}
.reality-col ul{list-style:none;display:grid;gap:12px}
.reality-col li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.reality-col li::before{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;font-size:14px;margin-top:2px}
.reality-confirmed{background:var(--frost);color:var(--ink);border:1px solid var(--line)}
.reality-confirmed h3,.reality-confirmed li{color:var(--ink)}
.reality-confirmed .state{color:var(--success)}
.reality-confirmed li::before{content:"✓";color:var(--success)}
.reality-exploring{background:var(--bg-raised);border:1px dashed var(--line-strong)}
.reality-exploring li::before{content:"◌";color:var(--glacier-deep);border-style:dashed}
.reality-not{border:1px solid var(--line);background:transparent}
.reality-not li::before{content:"—";color:var(--volcanic)}
.reality-not li{color:var(--fg-muted)}

/* ---------- forms ---------- */
form{display:grid;gap:18px;max-width:560px}
fieldset{border:0;display:grid;gap:10px;min-width:0}
legend,label{font-weight:500;font-size:var(--fs-label);letter-spacing:.02em;color:var(--fg);display:block;margin-bottom:6px}
.hint{font-size:var(--fs-label);color:var(--fg-muted);margin-top:6px}
/* min-width:0 as well as width:100%: a text input's INTRINSIC width is about
   twenty characters, and that minimum is what a grid or flex track measures.
   width:100% then has nothing to bite on, so a form in a single-column grid
   made the column 302px wide inside a 280px container — 2px of horizontal
   scroll on a 320px screen, on every page with a form, in every language. */
input,select,textarea{background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:10px;color:var(--fg);padding:13px 14px;font-size:16px;font-family:inherit;width:100%;min-width:0;min-height:48px}
form,fieldset,label{min-width:0}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
textarea{min-height:140px;resize:vertical}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger-fg);border-width:2px}
.consent{display:flex;gap:12px;align-items:flex-start}
.consent label{font-weight:400;font-size:15px;line-height:1.5;letter-spacing:0;text-transform:none;color:var(--fg);margin:0}
/* A 22px checkbox at the size the design wants, with a target big enough to
   hit: the LABEL is the target, because clicking a label toggles its box, and
   it is the full width of the row and at least 44px tall. An earlier attempt
   put an absolutely-positioned pseudo-element on the input to widen its hit
   area — but it resolved against .consent, not the input, so a 44px invisible
   box sat over whatever happened to be at that corner, including the Withdraw
   button in the row below. */
.consent input{width:22px;height:22px;min-height:0;margin-top:2px;accent-color:var(--accent);flex:none;outline-offset:3px;cursor:pointer}
.consent label{min-height:44px;display:flex;flex-wrap:wrap;align-items:center;min-width:0;cursor:pointer}
.consent{min-width:0}
.ctx-light .consent input,body.paper .consent input{accent-color:var(--accent)}
.field-error{display:flex;gap:8px;align-items:flex-start;color:var(--danger-fg);font-size:var(--fs-label);font-weight:500;line-height:1.45;margin-top:6px}
.field-error::before{content:"✕";flex:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;font-size:14px;margin-top:1px}
.form-status{border-radius:var(--radius);padding:18px 20px;border:1px solid var(--line-strong);background:var(--bg-raised);display:grid;gap:8px;font-size:15.5px;line-height:1.5}
.form-status .state{margin-bottom:2px}
.form-status.is-danger{border-color:var(--danger-fg)}
.form-status.is-warning{border-color:var(--warning-fg)}
.form-status.is-success{border-color:var(--success-fg)}
.form-status.is-information{border-color:var(--information-fg)}
.form-done{border:1px solid var(--success-fg);border-radius:var(--radius);padding:26px 28px;background:var(--accent-soft);display:grid;gap:10px}
.form-done h3{color:var(--fg-strong)}
.hp{position:absolute;left:-5000px;top:-5000px;height:1px;width:1px;overflow:hidden}
.req{color:var(--fg-muted);font-weight:400;letter-spacing:0;text-transform:none}
.state-ok{border:1px solid var(--success-fg);border-radius:var(--radius);padding:20px 22px;background:var(--accent-soft)}
.state-err{border:1px solid var(--danger-fg);border-radius:var(--radius);padding:16px 20px;color:var(--fg)}
.state-note{border:1px solid var(--line-strong);border-radius:var(--radius);padding:16px 20px;color:var(--fg-muted);font-size:15px}

/* chips (kept for Route Lab) */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--bg-raised);border:1px solid var(--line-strong);color:var(--fg);border-radius:var(--radius-pill);padding:10px 18px;min-height:44px;font-size:15px;font-family:inherit;cursor:pointer}
.chip[aria-pressed="true"],.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--fg-strong)}

/* ---------- purpose routes (contact) ---------- */
.purposes{display:grid;gap:0;border-top:1px solid var(--line)}
.purpose{display:grid;gap:8px 32px;padding:26px 0;border-bottom:1px solid var(--line);align-items:start}
@media(min-width:760px){.purpose{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.purpose .purpose-action{grid-column:2}}
.purpose h3{margin-bottom:2px}
.purpose p{color:var(--fg-muted)}
.purpose-action{display:inline-flex;align-items:center;min-height:44px;font-weight:500}

/* ---------- transparency register ---------- */
.legend{display:grid;gap:12px;margin:22px 0 10px}
.register{list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.register li{display:grid;gap:8px 28px;padding:24px 0;border-bottom:1px solid var(--line)}
@media(min-width:800px){.register li{grid-template-columns:150px minmax(0,1fr)}.register .reg-meta{grid-column:2}}
.register .reg-topic{font-weight:500;color:var(--fg-strong)}
.register .reg-text{max-width:var(--measure)}
.register .reg-meta{font-size:var(--fs-label);color:var(--fg-muted);display:flex;flex-wrap:wrap;gap:6px 18px}
.register .reg-meta span{display:inline-flex;gap:6px}
.corrections{list-style:none;display:grid;gap:14px}
.corrections li{display:grid;gap:4px;padding-left:18px;border-left:2px solid var(--line-strong)}
.corrections time{font-size:var(--fs-label);color:var(--fg-muted)}

/* ---------- legal pages ---------- */
.legalupdated{font-size:var(--fs-label);color:var(--fg-muted);margin:6px 0 30px;letter-spacing:.02em}
.legalupdated time{font-variant-numeric:tabular-nums}
.legal-note{padding:14px 18px;border-left:3px solid var(--warning-fg);color:var(--fg);font-size:16px;margin-bottom:26px}
.prose{max-width:var(--measure);color:var(--fg);font-size:var(--fs-narrative);line-height:1.65}
.prose p{margin:0 0 20px}
.prose h2{font-size:clamp(24px,1.2vw + 18px,34px);margin:44px 0 14px}
.prose h3{margin:28px 0 10px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:1.3em}
.prose li{margin-bottom:10px}
.prose .fine{font-size:var(--fs-label)}
.pagehead{padding:clamp(48px,8vh,96px) 0 clamp(28px,4vh,44px)}
.pagehead h1{margin:14px 0 18px;max-width:18ch}
.pagehead .lead{max-width:var(--measure)}

/* ---------- story ---------- */
.story-list{list-style:none;display:grid;gap:22px;margin-top:8px}
.story-list li{display:grid;gap:6px;padding:0 0 22px 0;border-bottom:1px solid var(--line)}
.story-list li:last-child{border-bottom:0}
.story-list h3{font-size:var(--fs-h3)}
.numbered{counter-reset:n;list-style:none;display:grid;gap:20px}
.numbered li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px 14px;align-items:baseline}
.numbered li::before{counter-increment:n;content:counter(n);font-family:var(--font-display);font-size:28px;color:var(--ember-fg);line-height:1}
.numbered h3{margin-bottom:4px}
.numbered p{grid-column:2}

/* ---------- 404 / 500 ---------- */
.errorpage{min-height:70svh;display:flex;align-items:center}
.errorpage h1{max-width:16ch}
.errorpage .eyebrow{color:var(--ember-fg);margin-bottom:14px}
.errorlinks{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px}
.errorlinks a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- content preview (internal) ---------- */
.preview-table{width:100%;border-collapse:collapse;font-size:15px}
.preview-table th,.preview-table td{text-align:left;vertical-align:top;padding:12px 10px;border-bottom:1px solid var(--line)}
.preview-table th{color:var(--fg-muted);font-weight:500;font-size:var(--fs-label)}
.preview-table td{max-width:36ch}
.preview-table code{font-size:14px}
.preview-meta{display:grid;gap:2px;font-size:14px;color:var(--fg-muted)}
.preview-missing{color:var(--warning-fg);font-weight:500}
.tablewrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.tablewrap:focus-visible{outline:3px solid var(--focus)}
.preview-filters{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin:22px 0 26px;max-width:none}
.preview-filters>div{min-width:200px}

/* ---------- Route Lab (§4.6 map, §6.2–§6.7) ---------- */
.labhero{padding-top:clamp(36px,7vh,80px);padding-bottom:clamp(28px,5vh,56px)}
.labhero h1{font-size:var(--fs-h1);margin:12px 0 18px}
.labhero .cta-row{margin-top:26px}
.labsearch{max-width:none;align-items:start}
.combobox-wrap{position:relative;min-width:0}
.suggest{position:absolute;left:0;right:0;top:calc(100% - 2px);z-index:30;list-style:none;margin:0;padding:6px;background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow);max-height:320px;overflow:auto}
.suggest-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;cursor:pointer;min-height:44px;max-width:none}
.suggest-item.active,.suggest-item:hover{background:var(--accent-soft)}
.suggest-name{font-family:var(--font-display);font-size:18px;color:var(--fg-strong)}
.suggest-meta{font-size:var(--fs-label);color:var(--fg-muted)}
.viewtoggle{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:26px 0 16px}
.mapframe{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:radial-gradient(140% 110% at 30% -10%,var(--accent-soft),transparent 55%),var(--bg-raised)}
.routemap{display:block;width:100%;height:auto;color:var(--fg)}
.routemap .ring{fill:none;stroke:var(--line);stroke-width:1}
.routemap .star{fill:var(--fg)}
.routemap .trace{fill:none;stroke:var(--accent);stroke-opacity:.45;stroke-width:1.4;stroke-dasharray:5 9}
.routemap .origin-dot{fill:var(--accent)}
.routemap .origin-halo{fill:none;stroke:var(--accent);stroke-opacity:.55;stroke-width:1.5}
.routemap .origin-name{fill:var(--fg-strong);font-family:var(--font-sans);font-size:14px;letter-spacing:.14em}
.routemap .pt{cursor:pointer;outline:none}
.routemap .pt .dot{fill:var(--bg-raised);stroke:var(--information-fg);stroke-width:2;stroke-dasharray:3 3}
.routemap .pt.reviewed .dot{stroke:var(--accent)}
.routemap .pt .halo{fill:none;stroke:transparent;stroke-width:2}
.routemap .pt .leader{stroke:var(--fg-muted);stroke-opacity:.5;stroke-width:1}
.routemap .pt .name{fill:var(--fg-strong);font-family:var(--font-display);font-size:15px}
.routemap .pt .sub{fill:var(--fg-muted);font-family:var(--font-sans);font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.routemap .pt:hover .name,.routemap .pt:focus .name{fill:var(--accent)}
.routemap .pt:focus-visible .halo,.routemap .pt:focus .halo{stroke:var(--focus);stroke-width:3}
.routemap .pt.dim{opacity:.18}
.map-caption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted)}
.map-caption span{max-width:none}
.map-help{padding:0 18px 14px;margin:0}
.map-panel noscript p{margin:14px 18px}
.band{display:inline-block;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:5px 12px;color:var(--fg-muted);white-space:nowrap;font-weight:500}
.band.NEW_SIGNAL{color:var(--fg)}
.band.GATHERING_INTEREST{color:var(--information-fg);border-color:var(--information-fg)}
.band.STRONG_INTEREST{color:var(--success-fg);border-color:var(--success-fg)}
.legend{list-style:none;margin-top:14px}
.dlist{list-style:none;margin-top:8px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dlist li{border-bottom:1px solid var(--line);max-width:none}
.dlist li:last-child{border-bottom:0}
.dlist a{display:flex;align-items:center;gap:14px;padding:15px 18px;min-height:52px;color:var(--fg);flex-wrap:wrap;text-decoration:none}
.dlist a:hover{background:var(--accent-soft)}
.dlist .dname{font-family:var(--font-display);font-size:19px;flex:1 1 160px;color:var(--fg-strong)}
.dlist .dcountry{color:var(--fg-muted);font-size:var(--fs-label);flex:1 1 180px}
.dlist .daction{color:var(--accent);font-size:15px;margin-left:auto}
.trio{display:grid;gap:18px}
@media(min-width:900px){.trio{grid-template-columns:5fr 4fr 3fr;align-items:start}.trio-b{margin-top:34px}.trio-c{margin-top:68px}}
.trio-item{border:1px solid var(--line);border-radius:16px;padding:clamp(20px,3vw,30px);background:var(--bg-raised);display:grid;gap:12px;align-content:start}
.trio-item h2{font-size:var(--fs-h3);margin:0}
.trio-item .eyebrow{margin:0}
.storygrid{list-style:none;display:grid;gap:16px;margin-top:28px}
@media(min-width:700px){.storygrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.storygrid{grid-template-columns:repeat(4,1fr)}.storygrid li:first-child{grid-column:span 2}}
.storygrid li{max-width:none}
.dcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg-raised);color:var(--fg);height:100%;text-decoration:none}
.dcard:hover{text-decoration:none;border-color:var(--accent)}
.dcard img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.dcard .dbody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.dcard .h3-like{font-family:var(--font-display);font-size:22px;color:var(--fg-strong)}
.dcard .dmeta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--fs-label);color:var(--fg-muted)}
.dcard .tagline{color:var(--fg-muted);font-size:15px;flex:1}
.dcard .go{margin-top:auto;color:var(--accent);font-size:var(--fs-label);min-height:32px;display:inline-flex;align-items:center}
.statebar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:18px 0}
.routehero{padding:44px 0 26px}
.routehero .crumbs{font-size:var(--fs-label)}
.routehero h1{font-size:var(--fs-h1);margin:14px 0 8px}
.routehero .cta-row{margin-top:8px}
.routeart{margin-top:26px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.routeart img{display:block;width:100%}
.fact{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--bg-raised)}
.fact .fv{font-family:var(--font-display);color:var(--fg-strong);font-size:19px;margin-top:6px}
.fact .fnote{font-size:var(--fs-label);color:var(--fg-muted)}
.pagemeta{margin-top:28px}
.consent-wording{font-size:15px;color:var(--fg-muted);border-left:2px solid var(--line-strong);padding-left:14px}
/* the vote wizard (§6.4): one decision per screen */
.wizard{max-width:720px;padding-top:clamp(36px,7vh,72px);padding-bottom:80px}
.wizard h1{font-size:clamp(32px,4vw,52px);margin:12px 0 22px}
.wizard form,.wizard section{display:grid;gap:22px;max-width:none}
.fromline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fixed-origin{font-family:var(--font-display);font-size:22px;color:var(--fg-strong)}
.origin-note{font-size:var(--fs-label);color:var(--fg-muted)}
.selected-destination{border:1px solid var(--accent);border-radius:16px;padding:18px 20px;background:var(--accent-soft);display:grid;gap:8px}
.selected-name{font-family:var(--font-display);font-size:24px;color:var(--fg-strong);display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;max-width:none}
.monthgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px}
@media(min-width:520px){.monthgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:760px){.monthgrid{grid-template-columns:repeat(4,1fr)}}
.consent.month{align-items:center;min-height:44px}
.chipbox{position:relative;align-items:center}
.chipbox input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chipbox label{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--bg-raised);cursor:pointer;font-size:15px}
.chipbox input:checked+label{background:var(--accent-soft);border-color:var(--accent);color:var(--fg-strong)}
.chipbox input:focus-visible+label{outline:3px solid var(--focus);outline-offset:3px}
.bandset .chips{gap:8px}
/* token pages and preferences */
.tokenpage{max-width:760px;padding-top:clamp(36px,8vh,80px);padding-bottom:80px;display:grid;gap:18px}
/* A grid item's automatic minimum size is its content's min-content width, and
   a table's min-content width is the sum of its columns'. The consent record —
   purpose, wording version, language, state, date — therefore pushed the whole
   preferences page 70px wider than a phone, in every language: the page scrolled
   sideways and the Withdraw buttons sat half off the screen. The .tablewrap that
   was already there to scroll the table could never do it while the item above it
   was free to grow. The item is held to the column; the table scrolls inside it. */
.tokenpage > *{min-width:0}
.tokenpage h1{font-size:clamp(30px,4vw,46px);margin:8px 0 6px}
.tokenpage form{max-width:none;margin-top:12px;border-top:1px solid var(--line);padding-top:26px}
.tokenpage h2{font-size:var(--fs-h3);margin:0}
.tokenbox{max-width:560px;margin:clamp(48px,12vh,120px) auto;border:1px solid var(--line);border-radius:18px;padding:clamp(24px,5vw,40px);background:var(--bg-raised)}
.tokenbox h1{font-size:clamp(28px,4vw,40px);margin-bottom:12px}
.tokenbox p{color:var(--fg-muted);margin-bottom:18px}
.managecard{display:grid;gap:12px;margin-bottom:14px}
.managecard .dmeta{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.purposes-list{list-style:none;display:grid;gap:12px}
/* Name, state, action — three items that must never sit on top of each other.
   The state word and the button are sized to their content and are allowed to
   drop to their own line together; without the explicit flex sizing the state
   word could overflow its box and cover the button beside it, which is how a
   "Withdraw" button became unclickable in Norwegian, where the words are
   longer. */
.purposes-list li{display:flex;gap:10px 12px;align-items:center;flex-wrap:wrap;max-width:none;border-top:1px solid var(--line);padding-top:12px}
.purposes-list .purpose-name{flex:1 1 180px;min-width:0;font-weight:500}
.purposes-list > li > .state{flex:0 0 auto;margin-left:auto}
.purposes-list > li > .btn{flex:0 0 auto}
.purposes-list .consent{flex:1 1 100%}
.consents-table{width:100%;border-collapse:collapse}
.btn.danger{border-color:var(--danger-fg);color:var(--danger-fg)}
/* how voting works: the illustrated sequence and FAQ */
.sequence{margin:0;display:grid;gap:24px}
.sequence-art{width:100%;height:auto;color:var(--fg-muted)}
.sequence-steps{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.faq div{border-top:1px solid var(--line);padding:18px 0}
.faq dt{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--fg-strong);margin-bottom:6px}
.faq dd{margin:0}
.issue-list h3 a{color:var(--fg-strong)}
.futurelabel{display:inline-block;font-weight:500;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--ember-fg);border:1px solid var(--ember-fg);border-radius:var(--radius-pill);padding:6px 14px}
.no-js .map-panel{display:none}
.sect .lead{max-width:var(--measure)}
.sect h2{margin:10px 0 18px}
.legalpage .fine{margin-bottom:18px}

/* ---------- footer (§5; directive §35: large, grouped, one closing statement) ---------- */
.sitefoot{position:relative;padding:clamp(64px,9vh,120px) 0 40px;border-top:1px solid var(--line);overflow:hidden;isolation:isolate}
.sitefoot .brand{color:var(--fg-strong)}
.foothead{display:grid;gap:22px;margin-bottom:clamp(40px,6vh,72px)}
.foot-tagline{font-family:var(--font-display);font-size:var(--fs-statement);line-height:.98;letter-spacing:-.03em;color:var(--fg-strong);max-width:none;text-wrap:balance}
.footgrid{display:grid;gap:36px 32px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.footcol-h{font-family:var(--font-sans);font-size:var(--fs-kicker);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);font-weight:500;margin-bottom:14px;line-height:1.3}
.footlinks{list-style:none;display:flex;flex-direction:column;gap:4px}
.footlinks a{display:inline-flex;align-items:center;min-height:44px;color:var(--fg);font-size:15.5px;opacity:.9}
.footlinks a:hover{opacity:1;color:var(--fg-strong)}
.footlink-btn{background:none;border:0;color:var(--fg);font:inherit;font-size:15.5px;min-height:36px;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;opacity:.9}
.footmeta{display:grid;gap:22px 40px;align-items:start;padding-top:32px;font-size:var(--fs-label);color:var(--fg-muted)}
@media(min-width:900px){.footmeta{grid-template-columns:auto minmax(0,1fr) auto}}
.footmeta-label{display:block;font-size:var(--fs-kicker);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.footmeta .langmenu-inline{border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:2px}
.footmeta .langmenu-inline a{color:var(--fg)}
.footmeta .langmenu-inline a[aria-current="true"]{color:var(--navy);background:#fff}
.footmeta-status{display:grid;gap:10px}
.foottruth{max-width:60ch;line-height:1.55;color:var(--fg-muted)}
.footmeta-contact{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.footmeta-contact a{color:var(--fg)}
@media(min-width:900px){.footmeta-contact{align-items:flex-end;text-align:right}}
.sitefoot .legal{color:var(--fg-muted)}

/* ---------- cookie preference banner (§7.2, §10.3) ---------- */
.cookiebar{position:relative;z-index:95;background:var(--bg);color:var(--fg);border-bottom:1px solid var(--line-strong)}
.cookiebar-in{padding:18px 0;display:grid;gap:14px}
.cookiebar-h{font-family:var(--font-display);font-size:21px;color:var(--fg-strong);margin-bottom:6px}
.cookiebar-body{font-size:15px;color:var(--fg-muted);max-width:70ch}
.cookiebar-purposes{display:grid;gap:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.cookie-purpose-head{display:flex;align-items:center;gap:10px}
.cookie-purpose-head label{font-weight:400;font-size:15px;letter-spacing:0;text-transform:none;color:var(--fg);margin:0}
.cookie-purpose-head input[type=checkbox]{width:22px;height:22px;min-height:0;accent-color:var(--accent);flex:none}
.cookie-purpose-always{font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:2px 10px;margin-left:auto}
.cookie-purpose .fine{margin-left:32px;margin-top:2px}
.cookiebar-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cookie-choice{background:transparent;color:var(--fg);border:1px solid var(--line-strong);font-size:15px;padding:12px 24px;min-height:48px}
.cookie-choice:hover{border-color:var(--fg-muted)}
.cookiebar-saved{color:var(--accent)}
#cookie-purposes-page .cookie-purpose{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px;background:var(--bg-raised)}

/* ---------- browser-language suggestion (§7: suggestion, never a redirect) ---------- */
.langsuggest{position:relative;z-index:85;display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:12px;padding:12px 18px;font-size:15px;color:var(--fg)}
.langsuggest a{font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.langsuggest button{background:none;border:1px solid var(--line-strong);color:var(--fg);border-radius:var(--radius-pill);padding:8px 16px;min-height:44px;font-family:inherit;font-size:15px;cursor:pointer;margin-left:auto}
.langsuggest button:hover{border-color:var(--fg-muted)}

/* ---------- motion (§4.5) ---------- */
.fade{opacity:0;transform:translateY(10px);transition:opacity var(--t-narrative) var(--ease),transform var(--t-narrative) var(--ease);transition-delay:calc(min(var(--i,0),4) * 45ms)}
.fade.in{opacity:1;transform:none}
.no-js .fade{opacity:1;transform:none}
.routemap .pulse{animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.9}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  /* transition-DELAY too, not only the duration: a staggered reveal with a
     zero duration still changes state a third of a second later and moves the
     layout under the reader's finger. Reduced motion means the final state,
     now. */
  *,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important}
  .fade{opacity:1;transform:none;transition:none}
  .aurora{animation:none;transform:none}
  .hero-trace .trace-draw{animation:none;stroke-dashoffset:0}
  .hero-trace .halo{animation:none;opacity:.4}
  .tile img,.tile:hover img{transform:none;transition:none}
  .routemap .pulse{animation:none}
}
@media print{.tophat,.truthline-bar,.cookiebar,.langsuggest,.skip{display:none}body{background:#fff;color:#000}}

/* ---------- homepage: computed figures + richer destination cards --------- */
.figures{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:8px}
.figures>div{display:grid;gap:4px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-raised)}
.figures dt{font-size:var(--fs-label);color:var(--fg-muted);letter-spacing:.02em;order:2;max-width:24ch}
.figures dd{font-family:var(--font-display);font-size:clamp(38px,3vw,54px);line-height:1;color:var(--fg-strong);font-variant-numeric:tabular-nums;order:1}
.tile-facts{display:grid;gap:3px;margin:2px 0 4px;max-width:40ch}
.tile-facts span{font-size:var(--fs-label);color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}
.tile-open{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-label);font-weight:500;letter-spacing:.02em;color:var(--glacier)}
.tile-open::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sunrise);flex:none}
.trio-2{grid-template-columns:1fr}
@media(min-width:900px){.trio-2{grid-template-columns:repeat(2,minmax(0,1fr))}.trio-2 .trio-b{margin-top:44px}}

/* ---------- ASTERISK: the system behind the journey (founder directive §8,
   4 September 2026). A light page with one cinematic night band: the flow
   diagram, the fourteen capability cards with their stage pills, and the
   worked example. Colour never carries a stage on its own — every pill and
   every card prints the stage word, and the pill's mark changes shape with
   it (filled / half / hollow) so the four stages stay separable in greyscale
   and for colour-blind readers. ------------------------------------------- */

/* the flow diagram — five stages over one shared record */
.ax-night .ax-flow{margin:clamp(34px,6vh,64px) 0 0}
.ax-flow-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:6px}
.ax-flow svg{display:block;width:100%;min-width:860px;height:auto}
.ax-arc{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.ax-pulse,.ax-rail-pulse{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.ax-pulse{stroke-dasharray:34 966;animation:ax-travel 7s linear infinite}
.ax-rail-pulse{stroke-width:2;stroke-dasharray:70 930;opacity:.7;animation:ax-travel 11s linear infinite 1.4s}
@keyframes ax-travel{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.ax-node{fill:var(--bg-raised);stroke:var(--sky-fg);stroke-width:1.5}
.ax-node-dot{fill:var(--sky-fg)}
.ax-drop{stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:2 7;stroke-linecap:round}
.ax-flow-label{fill:var(--fg-strong);font-family:var(--font-sans);font-size:21px;font-weight:500;text-anchor:middle}
.ax-rail{fill:var(--bg-raised);stroke:var(--line-strong);stroke-width:1.5}
.ax-rail-label{fill:var(--fg-muted);font-family:var(--font-sans);font-size:17px;font-weight:500;letter-spacing:.14em}

/* the one page-level caveat */
.ax-caveat{border:1px solid var(--line-strong);border-left:3px solid var(--ember-fg);border-radius:var(--radius);background:var(--bg-raised);padding:14px 20px;margin:0 0 clamp(24px,4vh,36px);max-width:70ch;font-size:16px;line-height:1.6;color:var(--fg)}

/* how to read the stages */
.ax-legend-h{font-size:var(--fs-h3);margin:0 0 14px}
.ax-legend{display:grid;gap:16px;grid-template-columns:1fr;margin:0;padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-sunken)}
.ax-legend-item{display:grid;gap:8px;align-content:start}
.ax-legend dt{margin:0}
.ax-legend dd{margin:0;font-size:15px;line-height:1.55;max-width:40ch}
@media(min-width:820px){.ax-legend{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}

/* stage pills — word + shape + colour, in that order of importance */
.ax-pill{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-label);font-weight:500;letter-spacing:.03em;border:1px solid currentColor;border-radius:var(--radius-pill);padding:4px 13px;white-space:nowrap;line-height:1.4}
.ax-pill::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;flex:none}
.ax-pill.is-built{color:var(--success-fg)}
.ax-pill.is-validating{color:var(--information-fg)}
.ax-pill.is-validating::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px currentColor}
.ax-pill.is-developing{color:var(--accent)}
.ax-pill.is-developing::before{background:linear-gradient(180deg,currentColor 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px currentColor}
.ax-pill.is-planned{color:var(--fg-muted)}
.ax-pill.is-planned::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}

/* the fourteen capability groups */
.ax-grid{display:grid;gap:16px;grid-template-columns:1fr;margin:clamp(26px,4vh,40px) 0 0;padding:0;list-style:none}
@media(min-width:660px){.ax-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.ax-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ax-card{position:relative;display:grid;gap:9px;align-content:start;padding:22px 24px 24px 27px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-raised);overflow:hidden}
.ax-card::before{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--line-strong)}
.ax-card.is-built::before{background:var(--success-fg)}
.ax-card.is-validating::before{background:var(--information-fg)}
.ax-card.is-developing::before{background:var(--accent)}
.ax-card h3{font-size:var(--fs-h3);margin:0;color:var(--fg-strong);max-width:22ch}
.ax-num{margin:0;font-family:var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--fg-muted)}
.ax-pill-row{margin:2px 0 0}
.ax-card-p{margin:0;font-size:15px;line-height:1.6;color:var(--fg-muted);max-width:48ch}

/* the worked example — four connected steps */
.ax-steps{display:grid;gap:18px;grid-template-columns:1fr;margin:clamp(26px,4vh,40px) 0 0;padding:0;list-style:none;counter-reset:ax-step}
@media(min-width:960px){.ax-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}}
.ax-step{position:relative;display:grid;gap:10px;align-content:start;padding:22px 24px 24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-raised)}
.ax-step::before{counter-increment:ax-step;content:counter(ax-step);font-family:var(--font-display);font-size:28px;line-height:1;color:var(--accent)}
.ax-step h3{font-size:var(--fs-h3);margin:0;color:var(--fg-strong)}
@media(min-width:960px){
  .ax-step:not(:last-child)::after{content:"";position:absolute;top:50%;right:-26px;width:26px;height:1px;background:var(--line-strong)}
  .ax-step:not(:last-child) .ax-chips::after{content:"";position:absolute;top:calc(50% - 3px);right:-16px;width:7px;height:7px;border-radius:50%;background:var(--accent);animation:ax-hop 3.6s var(--ease) infinite}
}
@keyframes ax-hop{0%,100%{transform:translateX(-4px);opacity:.35}50%{transform:translateX(4px);opacity:1}}
.ax-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0;padding:0;list-style:none}
.ax-chip{font-size:var(--fs-label);line-height:1.4;color:var(--fg-muted);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-pill);padding:4px 11px}

@media (prefers-reduced-motion: reduce){
  .ax-pulse,.ax-rail-pulse{animation:none;stroke-dashoffset:0;opacity:.55}
  .ax-step:not(:last-child) .ax-chips::after{animation:none;transform:none;opacity:.8}
}

/* ---------- FOUNDING CIRCLE: an invitation, not a questionnaire (founder
   directive §7, 4 September 2026). One cinematic night band at the top — the
   only dark moment on the page — then light for the reading and the form.
   The header runs transparent over the hero (v_head 'hero' => true), so the
   band reclaims the header height the way the homepage hero does.
   No animation is introduced here beyond the shared .fade, which
   prefers-reduced-motion already neutralises above. ---------------------- */
.fc-hero{
  isolation:isolate;overflow:hidden;
  margin-top:calc(-1 * (var(--header-h) + var(--truth-h)));
  padding:calc(var(--header-h) + var(--truth-h) + clamp(52px,9vh,108px)) 0 clamp(52px,8vh,96px);
}
/* aurora over open ocean — decorative only, never carries meaning */
.fc-hero::before{
  content:"";position:absolute;inset:-40% -12% -20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42% 48% at 20% 16%,rgba(74,130,245,.30),transparent 70%),
    radial-gradient(38% 42% at 84% 6%,rgba(238,138,43,.18),transparent 72%),
    radial-gradient(58% 55% at 62% 104%,rgba(190,220,234,.12),transparent 70%);
}
.fc-hero .eyebrow{color:var(--glacier);margin-bottom:20px}
.fc-hero h1{max-width:15ch}
.fc-support{font-family:var(--font-display);font-size:clamp(21px,1.1vw + 16px,32px);line-height:1.25;
  letter-spacing:-.01em;color:var(--accent);margin:6px 0 0;max-width:26ch}
.fc-hero .lead{margin-top:clamp(22px,3vh,30px)}
.fc-cta{margin-top:clamp(24px,3.5vh,34px)}
/* the one concise clarification the directive asks for, kept quiet but present */
.fc-clarify{margin-top:clamp(22px,3vh,30px);max-width:56ch;padding-left:16px;
  border-left:2px solid var(--line-strong);font-size:var(--fs-label);line-height:1.6;color:var(--fg-muted)}

/* today · the months after · if it happens */
.fc-steps{display:grid;gap:18px;grid-template-columns:1fr;margin:0;padding:0;list-style:none}
@media(min-width:900px){.fc-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}}
.fc-step{position:relative;display:grid;gap:10px;align-content:start;
  padding:26px 26px 28px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-raised)}
.fc-step .eyebrow{margin:0;color:var(--accent)}
.fc-step h3{margin:0;color:var(--fg-strong);max-width:20ch}
.fc-step p{margin:0;font-size:16px;line-height:1.6;color:var(--fg-muted);max-width:44ch}

/* ideas under discussion — promised to nobody */
.fc-ideas{display:grid;gap:16px;grid-template-columns:1fr;margin:0;padding:0;list-style:none}
@media(min-width:760px){.fc-ideas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fc-idea{display:grid;gap:8px;align-content:start;
  padding:24px 26px 26px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-raised)}
.fc-idea h3{margin:0;font-size:var(--fs-h3);color:var(--fg-strong);max-width:24ch}
.fc-idea p{margin:0;font-size:16px;line-height:1.6;color:var(--fg-muted);max-width:46ch}

/* what this is not — beside the form, where the decision is actually made */
.fc-plain{margin-top:clamp(24px,4vh,36px);padding:22px 24px 24px;
  border:1px solid var(--line-strong);border-left:3px solid var(--ember-fg);
  border-radius:var(--radius);background:var(--bg-raised)}
.fc-plain h3{margin:0 0 10px;font-size:var(--fs-h3);color:var(--fg-strong)}
.fc-plain p{margin:0;font-size:16px;line-height:1.6;color:var(--fg-muted);max-width:52ch}

/* the indicative-only hint sits between the legend and its chips */
.bandset .hint{margin:0 0 2px}

/* ---------- BUILD VANDRER (/build-vandrer/) and WORK WITH VANDRER
   (/work-with-vandrer/) — founder directive of 4 September 2026 §10–§11.
   Two audiences, two pages, one visual system. Build Vandrer reuses the
   Founding Circle night hero (.fc-hero) with a colder, higher aurora — it is
   an invitation to people. Work with Vandrer stays LIGHT: a warm paper band
   with a quiet sunrise wash — it is a door for organisations. Both reuse
   .fc-support / .fc-cta / .fc-clarify / .fc-plain so the three invitation
   pages read as siblings. No new animation; .fade is already neutralised
   under prefers-reduced-motion above. ------------------------------------ */

/* the cross-link between the two audiences: one line, near the top and at the foot */
.xlink{margin-top:clamp(18px,2.5vh,26px);font-size:var(--fs-label);line-height:1.6;color:var(--fg-muted);max-width:56ch}
.xlink span{margin-right:6px}
.xlink a{color:var(--fg-strong);font-weight:500;text-underline-offset:3px;white-space:nowrap}
.fc-hero .xlink a{color:#fff}

/* Build Vandrer hero: the same night band, aurora pulled higher and colder */
.bv-hero::before{
  background:
    radial-gradient(46% 50% at 78% 10%,rgba(74,130,245,.32),transparent 70%),
    radial-gradient(34% 40% at 14% 4%,rgba(190,220,234,.16),transparent 72%),
    radial-gradient(60% 52% at 40% 106%,rgba(238,138,43,.12),transparent 70%);
}

/* the twelve functions — a numbered ledger, three across on desktop */
.bv-areas{display:grid;gap:14px;grid-template-columns:1fr;margin:0;padding:0;list-style:none;counter-reset:bv}
@media(min-width:700px){.bv-areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.bv-areas{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.bv-area{position:relative;display:grid;gap:8px;align-content:start;
  padding:22px 22px 24px 22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-raised)}
.bv-num{font-family:var(--font-display);font-size:15px;letter-spacing:.08em;color:var(--accent);line-height:1}
.bv-area h3{margin:0;font-size:var(--fs-h3);color:var(--fg-strong);max-width:20ch}
.bv-area p{margin:0;font-size:16px;line-height:1.6;color:var(--fg-muted);max-width:40ch}

/* Work with Vandrer hero: light, warm, a sunrise wash low on the band */
.wv-hero{position:relative;isolation:isolate;overflow:hidden;padding-bottom:clamp(44px,7vh,80px)}
.wv-hero::before{
  content:"";position:absolute;inset:-30% -10% -10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(44% 46% at 84% 96%,rgba(238,138,43,.16),transparent 70%),
    radial-gradient(36% 40% at 6% 8%,rgba(27,79,216,.07),transparent 72%);
}
.wv-hero .eyebrow{color:var(--accent);margin-bottom:20px}
.wv-hero h1{max-width:15ch}
.wv-support{color:var(--ember-fg)}
.wv-hero .lead{margin-top:clamp(22px,3vh,30px)}

/* eleven paths in — each heading is an anchor to the form (and pre-selects its category with JS) */
.wv-paths{display:grid;gap:14px;grid-template-columns:1fr;margin:0;padding:0;list-style:none}
@media(min-width:700px){.wv-paths{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.wv-paths{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.wv-path{display:grid;gap:8px;align-content:start;
  padding:22px 22px 24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-raised)}
.wv-path h3{margin:0;font-size:var(--fs-h3);color:var(--fg-strong);max-width:22ch}
.wv-path h3 a{color:inherit;text-decoration:none}
.wv-path h3 a::after{content:" →";color:var(--accent)}
.wv-path h3 a:hover,.wv-path h3 a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.wv-path p{margin:0;font-size:16px;line-height:1.6;color:var(--fg-muted);max-width:40ch}

/* the supporting-documents instruction sits between the last fieldset and the acknowledgement */
.wv-docs{margin:4px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-raised);max-width:none}

/* ---------- progress page ---------- */
.pg-live{list-style:none;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pg-live li{max-width:none}
.pg-live a{display:grid;gap:6px;padding:22px 22px 20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-raised);color:var(--fg);text-decoration:none;min-height:100%;transition:transform var(--t-nav) var(--ease),box-shadow var(--t-nav) var(--ease)}
.pg-live a:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow)}
.pg-live strong{font-family:var(--font-display);font-size:21px;font-weight:400;color:var(--fg-strong)}
.pg-live span{font-size:15px;color:var(--fg-muted);line-height:1.5}
.pg-groups{list-style:none;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pg-groups li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-raised);max-width:none}
.pg-group-name{font-weight:500;font-size:15px}
.pg-next li h3{margin:0;font-size:clamp(20px,1.1vw+16px,26px)}

.founder-card{display:grid;gap:4px;margin-top:18px;padding:18px 20px;border-left:3px solid var(--sunrise)}
.founder-card strong{font-family:var(--font-display);font-size:26px;font-weight:400;color:var(--fg-strong)}
.founder-card span{font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted)}

.route-facts dd.small{font-size:clamp(22px,1.6vw,30px)}
.route-facts dd small{font-size:.5em;color:var(--fg-muted)}

.story-belong{list-style:none;display:grid;gap:8px;margin:0 0 22px;padding:0}
.story-belong li{font-family:var(--font-display);font-size:clamp(20px,1.2vw+14px,26px);color:var(--fg-strong);padding-left:18px;border-left:2px solid var(--sunrise);max-width:none}
.ctx-night .founder-card{border-left-color:var(--glacier)}

/* ---------- route lab: rails, collections, shortlist, map focus ---------- */
.rail{margin-top:34px}
.rail-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.rail-head h3{font-size:clamp(22px,1.2vw+16px,28px)}
.rail-head .fine{max-width:none}
.rail-track{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(236px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 14px;margin:0 -4px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.rail-track:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.rcard{position:relative;scroll-snap-align:start;max-width:none;border-radius:var(--radius-lg);overflow:hidden;background:var(--navy);color:#fff;box-shadow:var(--shadow);isolation:isolate;min-height:250px;display:flex;flex-direction:column;justify-content:flex-end}
.rcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:-2;opacity:.92;transition:transform var(--t-narrative) var(--ease)}
.rcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,26,46,0) 30%,rgba(10,26,46,.62) 62%,rgba(10,26,46,.92) 100%)}
.rcard:hover img{transform:scale(1.04)}
.rcard-link{display:grid;gap:4px;padding:64px 16px 16px;color:#fff;text-decoration:none;min-height:100%}
.rcard-link:hover{text-decoration:none}
.rcard-region{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.rcard-name{font-family:var(--font-display);font-size:24px;line-height:1.1;color:#fff}
.rcard-meta{font-size:14px;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.rcard .band{margin-top:6px;width:fit-content;color:var(--glacier);border-color:rgba(190,220,234,.6)}
.rcard-short{position:absolute;top:10px;right:10px;z-index:2;min-height:34px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.55);background:rgba(10,26,46,.55);color:#fff;font:inherit;font-size:14px;font-weight:500;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rcard-short .sl-on{display:none}
.rcard-short[aria-pressed="true"]{background:var(--sunrise);border-color:var(--sunrise);color:var(--navy)}
.rcard-short[aria-pressed="true"] .sl-off{display:none}.rcard-short[aria-pressed="true"] .sl-on{display:inline}
.rcard-short.shake{animation:sl-shake .4s ease}
@keyframes sl-shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.shortlist{position:sticky;bottom:0;z-index:60;background:rgba(252,250,246,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line-strong);box-shadow:0 -12px 40px rgba(16,26,36,.08)}
.shortlist-in{display:grid;gap:12px 28px;padding:14px 0 16px}
@media(min-width:900px){.shortlist-in{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:center}}
.shortlist-h{font-size:20px;margin:0}
.shortlist-h span{font-variant-numeric:tabular-nums;color:var(--fg-muted);font-size:16px}
.shortlist-items{list-style:none;display:flex;flex-wrap:wrap;gap:10px 14px;margin:0;padding:0}
.shortlist-items li{display:inline-flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--bg-raised);max-width:none}
.shortlist-items strong{font-family:var(--font-display);font-weight:400;font-size:18px}
.shortlist-items .btn.small{min-height:36px;padding:6px 14px;font-size:14px}
.shortlist-items .chip{min-height:44px;padding:9px 12px;font-size:14px}
.map-reset{margin:0;padding:10px 18px 0}
.routemap .pt.quiet .name,.routemap .pt.quiet .sub,.routemap .pt.quiet .leader{opacity:0;transition:opacity var(--t-nav) var(--ease)}
.routemap .pt.quiet:hover .name,.routemap .pt.quiet:focus .name,.routemap .pt.quiet:hover .sub,.routemap .pt.quiet:focus .sub,.routemap .pt.labelled .name,.routemap .pt.labelled .sub,.routemap .pt.labelled .leader{opacity:1}
.routemap .pt.quiet .dot{stroke-opacity:.6}
.routemap .clusters{transition:opacity var(--t-nav) var(--ease)}
.routemap.is-focused .clusters{opacity:0;pointer-events:none}
.routemap .cluster{cursor:pointer;outline:none}
.routemap .cluster-dot{fill:var(--sunrise);fill-opacity:.92;stroke:#fff;stroke-width:2}
.routemap .cluster:hover .cluster-dot,.routemap .cluster:focus .cluster-dot{fill:var(--coral)}
.routemap .cluster:focus-visible .cluster-dot{stroke:var(--focus);stroke-width:3}
.routemap .cluster-n{fill:var(--navy);font-family:var(--font-sans);font-weight:600;font-size:15px}
.routemap .cluster-name{fill:var(--fg-strong);font-family:var(--font-sans);font-size:14px;letter-spacing:.1em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.rcard img,.rcard-short.shake{transition:none;animation:none}}

/* home: axes strip, build-with-us links */
.home-axes{display:grid;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.home-axes li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;font-size:15px;line-height:1.5}
.home-axes .eyebrow{margin:0;min-width:96px}
.build-links{display:grid;gap:14px;margin:26px 0 0;padding:0;list-style:none}
.build-links li a{display:grid;gap:4px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-raised);text-decoration:none;color:inherit;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.build-links li a:hover,.build-links li a:focus-visible{border-color:var(--accent);transform:translateY(-2px)}
.build-links strong{color:var(--fg-strong);font-size:17px}
.build-links span{font-size:14.5px;line-height:1.5;color:var(--fg-muted)}
@media(min-width:760px){.build-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
.build-links li,.home-axes li,.promises li{max-width:none}
/* passenger promises (/asterisk/) */
.promises{list-style:none;margin:clamp(22px,4vh,34px) 0 0;padding:0;display:grid;gap:12px;counter-reset:promise}
.promises li{position:relative;padding:16px 18px 16px 62px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-raised);font-size:17px;line-height:1.5;color:var(--fg-strong)}
.promises li::before{counter-increment:promise;content:counter(promise,decimal-leading-zero);position:absolute;left:18px;top:14px;font-family:var(--font-display);font-size:22px;color:var(--accent);font-variant-numeric:tabular-nums}
@media(min-width:760px){.promises{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
/* the twenty moments thread + benefit lists (/asterisk/) */
.thread{list-style:none;margin:clamp(22px,4vh,34px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;counter-reset:thread}
.thread li{position:relative;max-width:none;padding:9px 14px 9px 36px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--bg-raised);font-size:15px;line-height:1.4;color:var(--fg-strong)}
.thread li::before{counter-increment:thread;content:counter(thread);position:absolute;left:13px;top:8px;font-family:var(--font-display);font-size:14px;color:var(--accent);font-variant-numeric:tabular-nums}
.thread li::after{content:"";position:absolute;right:-8px;top:50%;width:6px;height:1px;background:var(--line-strong)}
.thread li:last-child::after{display:none}
.benefits{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.benefits li{max-width:none;position:relative;padding-left:26px;font-size:16.5px;line-height:1.5;color:var(--fg)}
.benefits li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--accent)}
.cabin-figure{margin:0;align-self:start;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(10,26,46,.5)}
.cabin-figure img{display:block;width:100%;height:auto}

/* ---------- EXPEDITION IDENTITY PASS (founder review, 6 September 2026) ----
   Interior pages stop being pale and typographic: an invented topographic
   contour field sits behind every page head, night bands carry the same
   field in night tones, paper bands carry field-journal grain, and a hairline
   bearing scale runs along the foot of a page head. Navigation marks ornament
   section eyebrows. Headings vary: the oversized serif stays on the homepage
   hero and the two night landing heads; interior page heads step down to a
   medium serif under a coloured eyebrow; section heads are a medium serif;
   .h-journal is the field-journal heading (serif italic, hairline rule).
   All textures are generated in-repo (tools/generate-textures.py), served
   unhashed from /assets/art/texture/, decorative only (pseudo-elements, never
   markup), and never depict a real place, aircraft type or route. --------- */

/* page heads */
.pagehead{position:relative;isolation:isolate}
.pagehead::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    url('/assets/art/texture/nav-marks.svg') left bottom / 1600px 160px no-repeat,
    url('/assets/art/texture/contours-light.svg') right -160px top -120px / 1600px auto no-repeat;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35),#000 45%);mask-image:linear-gradient(90deg,rgba(0,0,0,.35),#000 45%)}
.pagehead.ctx-night::after{
  background:
    url('/assets/art/texture/silhouette.svg') right -120px center / clamp(360px,42vw,640px) auto no-repeat,
    url('/assets/art/texture/contours-night.svg') right -120px top -80px / 1600px auto no-repeat;
  opacity:.9;-webkit-mask-image:none;mask-image:none}
.pagehead.ctx-paper::after{
  background:
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgMzIwIiB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgYXJpYS1oaWRkZW49InRydWUiPjwhLS0gR2VuZXJhdGVkIGJ5IHRvb2xzL2dlbmVyYXRlLXRleHR1cmVzLnB5OiB0aWxlYWJsZSBmaWVsZC1qb3VybmFsIHBhcGVyIGdyYWluLiAtLT48ZmlsdGVyIGlkPSJnIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuOTIiIG51bU9jdGF2ZXM9IjIiIHNlZWQ9IjciIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgLjQ0ICAwIDAgMCAwIC4yMyAgMCAwIDAgMCAuMTcgIDAgMCAwIC41NSAtLjI0Ii8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIzMjAiIGZpbHRlcj0idXJsKCNnKSIvPjwvc3ZnPgo=') left top / 320px 320px repeat,
    url('/assets/art/texture/nav-marks.svg') left bottom / 1600px 160px no-repeat,
    url('/assets/art/texture/contours-light.svg') right -160px top -120px / 1600px auto no-repeat}
.pagehead .eyebrow{color:var(--ember-fg);letter-spacing:.18em}
/* The page headline keeps the type scale's own h1 (40–72px). The v2 layer had
   quietly narrowed it to 34–54px, so interior pages opened two steps below the
   scale they were designed against and below §4.3's 40px floor. */
.pagehead h1{font-size:var(--fs-h1);line-height:1.1;margin:14px 0 18px;max-width:22ch}
/* the two night landing heads (Founding Circle, Build Vandrer) keep the oversized serif */
.pagehead.ctx-night.fc-hero h1{font-size:var(--fs-h1);line-height:1.04}
.pagehead.ctx-night .eyebrow,.ctx-night .sect-head .eyebrow{color:var(--glacier)}

/* the route-lab and field-notes landing heads: contour field with a light wind */
.labhero{position:relative;isolation:isolate}
.labhero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    url('/assets/art/texture/wind-field.svg') center top / 1600px auto no-repeat,
    url('/assets/art/texture/contours-light.svg') right -200px top -140px / 1600px auto no-repeat;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.3),#000 50%);mask-image:linear-gradient(90deg,rgba(0,0,0,.3),#000 50%)}

/* night bands and paper bands on long pages */
.sect.ctx-night{isolation:isolate}
.sect.ctx-night::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('/assets/art/texture/contours-night.svg') right -100px top -60px / 1600px auto no-repeat;opacity:.85}
.sect.ctx-night.wm-aircraft::after{
  background:
    url('/assets/art/texture/silhouette.svg') right -60px center / auto min(560px,86%) no-repeat,
    url('/assets/art/texture/contours-night.svg') right -100px top -60px / 1600px auto no-repeat}
.sect.ctx-paper{isolation:isolate}
.sect.ctx-paper::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgMzIwIiB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgYXJpYS1oaWRkZW49InRydWUiPjwhLS0gR2VuZXJhdGVkIGJ5IHRvb2xzL2dlbmVyYXRlLXRleHR1cmVzLnB5OiB0aWxlYWJsZSBmaWVsZC1qb3VybmFsIHBhcGVyIGdyYWluLiAtLT48ZmlsdGVyIGlkPSJnIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuOTIiIG51bU9jdGF2ZXM9IjIiIHNlZWQ9IjciIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgLjQ0ICAwIDAgMCAwIC4yMyAgMCAwIDAgMCAuMTcgIDAgMCAwIC41NSAtLjI0Ii8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjMyMCIgaGVpZ2h0PSIzMjAiIGZpbHRlcj0idXJsKCNnKSIvPjwvc3ZnPgo=') left top / 320px 320px repeat;opacity:.6}
/* the aircraft watermark is a hairline in glacier — it needs the night ground */
.wm-aircraft:not(.ctx-night)::after{background-image:none}

/* section heads: a medium serif, a navigation mark before the eyebrow */
.sect-head h2{font-size:clamp(27px,1.1vw + 20px,42px);line-height:1.12}
.sect-head .eyebrow::before,.pagehead .eyebrow::before{content:"";display:inline-block;width:15px;height:13px;margin-right:10px;vertical-align:-1px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26'%3E%3Cpath d='M15 2L27 24H3Z' fill='none' stroke='%23EE8A2B' stroke-width='2.6' stroke-linejoin='round'/%3E%3Ccircle cx='15' cy='17' r='2.4' fill='%23EE8A2B'/%3E%3C/svg%3E") center / contain no-repeat}
.sect-head .eyebrow{display:inline-flex;align-items:center}

/* the field-journal heading — serif italic over a hairline rule with a sunrise tick */
.h-journal{font-family:var(--font-display);font-style:italic;font-weight:400;letter-spacing:-.01em;
  font-size:clamp(26px,1.2vw + 18px,38px);line-height:1.2;position:relative;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--line-strong)}
.h-journal::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:2px;background:var(--sunrise)}
.h-journal.editorial-h,.editorial .h-journal{max-width:16ch}

/* field-journal captions for existing figures */
.figure-caption,.cabin-figure figcaption,.routeart figcaption{display:flex;gap:12px;align-items:baseline;margin:0;padding:10px 0 0;
  border-top:1px solid var(--line-strong);font-family:var(--font-sans);font-size:var(--fs-label);line-height:1.5;color:var(--fg-muted);letter-spacing:.02em;max-width:none}
.figure-caption::before,.cabin-figure figcaption::before,.routeart figcaption::before{content:"";flex:none;width:22px;height:1px;background:var(--sunrise);align-self:center}
.cabin-figure figcaption,.routeart figcaption{padding:10px 16px 12px}

/* the footer: a compass rose and the night field behind the one truth line */
.sitefoot{position:relative;isolation:isolate}
.sitefoot::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMjQwIiB3aWR0aD0iMjQwIiBoZWlnaHQ9IjI0MCIgYXJpYS1oaWRkZW49InRydWUiPgo8IS0tIEdlbmVyYXRlZCBieSB0b29scy9nZW5lcmF0ZS10ZXh0dXJlcy5weTogYSBoYWlybGluZSBjb21wYXNzIHJvc2UuIC0tPgo8ZyBmaWxsPSJub25lIiBzdHJva2U9IiM0RTkwQUUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KPGNpcmNsZSBjeD0iMTIwIiBjeT0iMTIwIiByPSIxMDQiIHN0cm9rZS1vcGFjaXR5PSIuNSIvPgo8Y2lyY2xlIGN4PSIxMjAiIGN5PSIxMjAiIHI9Ijg0IiBzdHJva2Utb3BhY2l0eT0iLjM1Ii8+CjxjaXJjbGUgY3g9IjEyMCIgY3k9IjEyMCIgcj0iMTAiIHN0cm9rZS1vcGFjaXR5PSIuOCIvPgo8cGF0aCBzdHJva2Utb3BhY2l0eT0iLjciIGQ9Ik0xMjAgMjQgMTIwIDE2TTEyOC44IDE4LjkgMTI5LjEgMTYuNE0xMzcuMiAyMi41IDEzOC4xIDE3LjZNMTQ2LjMgMjIgMTQ2LjkgMTkuNU0xNTMuOSAyNyAxNTUuNiAyMi4zTTE2Mi45IDI4IDE2NCAyNS43TTE2OCAzNi45IDE3MiAyOS45TTE3OC4yIDM2LjkgMTc5LjcgMzQuOE0xODMuNiA0NC4yIDE4Ni44IDQwLjNNMTkxLjggNDguMiAxOTMuNSA0Ni41TTE5NS44IDU2LjQgMTk5LjcgNTMuMk0yMDMuMSA2MS44IDIwNS4yIDYwLjNNMjAzLjEgNzIgMjEwLjEgNjhNMjEyIDc3LjEgMjE0LjMgNzZNMjEzIDg2LjEgMjE3LjcgODQuNE0yMTggOTMuNyAyMjAuNSA5My4xTTIxNy41IDEwMi44IDIyMi40IDEwMS45TTIyMS4xIDExMS4yIDIyMy42IDExMC45TTIxNiAxMjAgMjI0IDEyME0yMjEuMSAxMjguOCAyMjMuNiAxMjkuMU0yMTcuNSAxMzcuMiAyMjIuNCAxMzguMU0yMTggMTQ2LjMgMjIwLjUgMTQ2LjlNMjEzIDE1My45IDIxNy43IDE1NS42TTIxMiAxNjIuOSAyMTQuMyAxNjRNMjAzLjEgMTY4IDIxMC4xIDE3Mk0yMDMuMSAxNzguMiAyMDUuMiAxNzkuN00xOTUuOCAxODMuNiAxOTkuNyAxODYuOE0xOTEuOCAxOTEuOCAxOTMuNSAxOTMuNU0xODMuNiAxOTUuOCAxODYuOCAxOTkuN00xNzguMiAyMDMuMSAxNzkuNyAyMDUuMk0xNjggMjAzLjEgMTcyIDIxMC4xTTE2Mi45IDIxMiAxNjQgMjE0LjNNMTUzLjkgMjEzIDE1NS42IDIxNy43TTE0Ni4zIDIxOCAxNDYuOSAyMjAuNU0xMzcuMiAyMTcuNSAxMzguMSAyMjIuNE0xMjguOCAyMjEuMSAxMjkuMSAyMjMuNk0xMjAgMjE2IDEyMCAyMjRNMTExLjIgMjIxLjEgMTEwLjkgMjIzLjZNMTAyLjggMjE3LjUgMTAxLjkgMjIyLjRNOTMuNyAyMTggOTMuMSAyMjAuNU04Ni4xIDIxMyA4NC40IDIxNy43TTc3LjEgMjEyIDc2IDIxNC4zTTcyIDIwMy4xIDY4IDIxMC4xTTYxLjggMjAzLjEgNjAuMyAyMDUuMk01Ni40IDE5NS44IDUzLjIgMTk5LjdNNDguMiAxOTEuOCA0Ni41IDE5My41TTQ0LjIgMTgzLjYgNDAuMyAxODYuOE0zNi45IDE3OC4yIDM0LjggMTc5LjdNMzYuOSAxNjggMjkuOSAxNzJNMjggMTYyLjkgMjUuNyAxNjRNMjcgMTUzLjkgMjIuMyAxNTUuNk0yMiAxNDYuMyAxOS41IDE0Ni45TTIyLjUgMTM3LjIgMTcuNiAxMzguMU0xOC45IDEyOC44IDE2LjQgMTI5LjFNMjQgMTIwIDE2IDEyME0xOC45IDExMS4yIDE2LjQgMTEwLjlNMjIuNSAxMDIuOCAxNy42IDEwMS45TTIyIDkzLjcgMTkuNSA5My4xTTI3IDg2LjEgMjIuMyA4NC40TTI4IDc3LjEgMjUuNyA3Nk0zNi45IDcyIDI5LjkgNjhNMzYuOSA2MS44IDM0LjggNjAuM000NC4yIDU2LjQgNDAuMyA1My4yTTQ4LjIgNDguMiA0Ni41IDQ2LjVNNTYuNCA0NC4yIDUzLjIgNDAuM002MS44IDM2LjkgNjAuMyAzNC44TTcyIDM2LjkgNjggMjkuOU03Ny4xIDI4IDc2IDI1LjdNODYuMSAyNyA4NC40IDIyLjNNOTMuNyAyMiA5My4xIDE5LjVNMTAyLjggMjIuNSAxMDEuOSAxNy42TTExMS4yIDE4LjkgMTEwLjkgMTYuNCIvPgo8cGF0aCBzdHJva2Utb3BhY2l0eT0iLjg1IiBkPSJNMTExIDEyMCAxMjAgMzYgMTI5IDEyMFpNMTE1LjggMTE1LjggMTUzLjkgODYuMSAxMjQuMiAxMjQuMlpNMTIwIDExMSAyMDQgMTIwIDEyMCAxMjlaTTEyNC4yIDExNS44IDE1My45IDE1My45IDExNS44IDEyNC4yWk0xMjkgMTIwIDEyMCAyMDQgMTExIDEyMFpNMTI0LjIgMTI0LjIgODYuMSAxNTMuOSAxMTUuOCAxMTUuOFpNMTIwIDEyOSAzNiAxMjAgMTIwIDExMVpNMTE1LjggMTI0LjIgODYuMSA4Ni4xIDEyNC4yIDExNS44WiIvPgo8cGF0aCBmaWxsPSIjRUU4QTJCIiBmaWxsLW9wYWNpdHk9Ii45IiBzdHJva2U9Im5vbmUiIGQ9Ik0xMTEgMTIwIDEyMCAzNiAxMjkgMTIwWiIvPgo8L2c+PC9zdmc+Cg==') right clamp(16px,4vw,64px) top 48px / clamp(160px,18vw,240px) auto no-repeat,
    url('/assets/art/texture/contours-night.svg') left -300px bottom -200px / 1600px auto no-repeat;opacity:.75}
@media(max-width:900px){.sitefoot::after{background-size:120px auto,1600px auto;background-position:right 20px top 28px,left -300px bottom -200px}}
.foottruth{margin-top:16px;max-width:42ch;font-size:16px;line-height:1.55;color:var(--fg)}

/* reduce texture weight on very small screens — the page head is short there */
@media(max-width:600px){
  .pagehead::after,.pagehead.ctx-paper::after{background-size:1200px 120px,1200px auto,1200px auto;background-position:left bottom,right -220px top -120px,right -220px top -120px}
  .pagehead.ctx-night::after{background-size:300px auto,1200px auto;background-position:right -110px center,right -180px top -80px}
}
@media print{.pagehead::after,.sect::after,.sitefoot::after,.labhero::after{display:none}}

/* The founder's note — one human voice on a page of systems. The signature is the
   display face set in italic at a hand-lettered slant; the <cite> carries the name for
   assistive technology and the sig is decoration. */
.founder-note{margin:28px 0 0;padding:22px 26px;border-left:3px solid var(--sunrise);background:rgba(255,255,255,.55);border-radius:0 var(--radius,10px) var(--radius,10px) 0;position:relative}
.founder-note p{margin:0;font-size:17px;line-height:1.6;max-width:60ch}
.founder-note footer{margin-top:16px;display:flex;flex-direction:column;gap:4px}
.founder-note .sig{font-family:var(--font-display,Fraunces,Georgia,serif);font-style:italic;font-weight:300;font-size:30px;line-height:1;letter-spacing:.01em;color:var(--fg-strong,var(--fg));transform:rotate(-2deg);transform-origin:left bottom;display:inline-block}
.founder-note cite{font-style:normal;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted,var(--fg))}
.ctx-night .founder-note{background:rgba(255,255,255,.06)}

/* =====================================================================================
   V2 COMPONENT LAYER — brand & website completion directive, 15 September 2026 (§6).
   Shared by every page. Page streams add page-scoped CSS under assets/css/<page>.css
   and must reach for these before writing bespoke rules.
   ===================================================================================== */

/* ---- statement type: the emotional headline and the data voice beside it ---- */
.statement{font-family:var(--font-display);font-size:var(--fs-statement);line-height:.98;letter-spacing:-.035em;color:var(--fg-strong);text-wrap:balance;max-width:none}
.statement em{font-style:italic;color:var(--accent)}
.data{font-family:var(--font-data);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-data);text-transform:uppercase;font-size:var(--fs-kicker);font-weight:500;color:var(--fg-muted)}
.data strong{color:var(--fg-strong);font-weight:600}
.numeral{font-family:var(--font-display);font-size:var(--fs-numeral);line-height:.85;letter-spacing:-.04em;color:var(--fg-strong);font-variant-numeric:lining-nums}
.coord{font-family:var(--font-data);font-variant-numeric:tabular-nums;letter-spacing:.12em;font-size:var(--fs-kicker);color:var(--fg-muted)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-sans);font-weight:500;font-size:var(--fs-kicker);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted)}
.kicker::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}

/* ---- route chip: OSLO → TOKYO · 8 405 KM ---- */
.routechip{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-data);font-variant-numeric:tabular-nums;letter-spacing:.1em;text-transform:uppercase;font-size:var(--fs-kicker);font-weight:500;color:var(--fg);border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:8px 14px;min-height:36px;white-space:nowrap}
.routechip .arrow-glyph{color:var(--accent)}
.routechip .km{color:var(--fg-muted);font-weight:400}
.routechip.solid{background:var(--fg-strong);color:var(--bg);border-color:transparent}

/* ---- status labels: four factual categories, word + shape (never colour alone) ---- */
.status{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:500;letter-spacing:.02em;padding:4px 12px 4px 8px;border-radius:var(--radius-pill);border:1px solid var(--line-strong);color:var(--fg)}
.status::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;flex:none}
.status-built{color:var(--success-fg)}
.status-built::before{background:currentColor}
.status-validating{color:var(--information-fg)}
.status-validating::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.status-developing{color:var(--warning-fg)}
.status-developing::before{border-style:dashed}
.status-next{color:var(--fg-muted)}
.status-next::before{border-style:dotted}
.badge{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:var(--radius-pill);font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;background:var(--accent-soft);color:var(--accent)}
.badge-concept{background:var(--sand);color:var(--ink-soft)}

/* ---- cards ---- */
.card{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,2.4vw,30px);color:var(--fg);transition:transform var(--t-nav) var(--ease),box-shadow var(--t-nav) var(--ease)}
a.card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow)}
.card h3{font-size:var(--fs-h3)}
.card .fine{margin-top:auto}
.card-flat{background:transparent;border:0;padding:0;border-radius:0}
.card-night{--bg-raised:var(--navy-soft);--fg:#EAF1F7;--fg-strong:#fff;--fg-muted:#9DB0C2;--line:rgba(234,241,247,.18);color:var(--fg)}

/* ---- image frames: art-directed ratios, an honest concept caption ---- */
.frame{position:relative;display:block;overflow:hidden;border-radius:var(--radius-lg);background:var(--bg-sunken);isolation:isolate}
.frame>img,.frame>svg,.frame>picture>img,.frame>canvas{display:block;width:100%;height:100%;object-fit:cover}
.frame.r-hero{aspect-ratio:var(--ratio-hero)}
.frame.r-card{aspect-ratio:var(--ratio-card)}
.frame.r-wide{aspect-ratio:var(--ratio-wide)}
.frame.r-square{aspect-ratio:var(--ratio-square)}
.frame.bleed{border-radius:0}
@media(min-width:900px){.frame.bleed-right{border-radius:var(--radius-lg) 0 0 var(--radius-lg);margin-right:calc(50% - 50vw)}.frame.bleed-left{border-radius:0 var(--radius-lg) var(--radius-lg) 0;margin-left:calc(50% - 50vw)}}
/* "Concept visualisation", "Illustrative demo data" — these captions are the
   disclosure that the picture beside them shows something that does not exist.
   A disclosure set smaller than the type floor is a disclosure designed not to
   be read; 14px, like every other label. */
.concept-caption{display:inline-flex;align-items:center;gap:8px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);margin-top:10px}
.concept-caption::before{content:"";width:10px;height:10px;border:1.5px dashed currentColor;border-radius:2px}
.frame .concept-caption{position:absolute;left:14px;bottom:12px;margin:0;background:rgba(252,250,246,.88);color:var(--ink);padding:6px 10px;border-radius:8px;backdrop-filter:blur(6px)}
.ctx-night .frame .concept-caption{background:rgba(10,26,46,.78);color:#EAF1F7}

/* ---- forms: states ---- */
.field{display:grid;gap:8px;margin-bottom:18px}
.field label{font-weight:500;font-size:15px;color:var(--fg-strong)}
.field .hint{font-size:var(--fs-label);color:var(--fg-muted);line-height:1.5}
.field input,.field select,.field textarea{width:100%;min-height:48px;font:inherit;font-size:16px;padding:10px 14px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--bg-raised);color:var(--fg)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--accent)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--danger-fg)}
.field .error{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-label);color:var(--danger-fg);line-height:1.5}
.field .error::before{content:"!";display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;font-weight:600;font-size:14px}
.field.is-valid .valid{font-size:var(--fs-label);color:var(--success-fg)}

/* ---- notices (inline), toasts (transient), dialogs ---- */
.notice{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:16px 18px;border-radius:var(--radius);border:1px solid var(--line);background:var(--bg-raised);font-size:16px;line-height:1.55}
.notice::before{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor;margin-top:6px}
.notice-success{color:var(--success-fg);border-color:rgba(47,107,74,.35);background:rgba(47,107,74,.06)}
.notice-success::before{background:currentColor}
.notice-warning{color:var(--warning-fg);border-color:rgba(138,90,0,.35);background:rgba(138,90,0,.06)}
.notice-danger{color:var(--danger-fg);border-color:rgba(178,58,42,.35);background:rgba(178,58,42,.06)}
.notice-info{color:var(--information-fg)}
/* §4.3: a line of prose stays inside 72ch wherever it is. A notice is still
   prose, and on a wide screen "max-width:none" was letting it run to 101
   characters — past the point where the eye reliably finds the next line. */
.notice p{color:var(--fg);max-width:72ch}
.toast-region{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;display:grid;gap:10px;width:min(92vw,520px);pointer-events:none}
.toast{pointer-events:auto;background:var(--ink-strong);color:#fff;padding:14px 18px;border-radius:14px;box-shadow:var(--shadow-lift);font-size:15px;line-height:1.5;animation:toast-in var(--t-narrative) var(--ease) both}
@keyframes toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
dialog.vdialog{border:0;border-radius:var(--radius-lg);padding:0;width:min(92vw,640px);background:var(--bg-raised);color:var(--fg);box-shadow:var(--shadow-lift)}
dialog.vdialog::backdrop{background:rgba(6,12,19,.55);backdrop-filter:blur(4px)}
.vdialog-body{padding:clamp(24px,4vw,40px)}
.vdialog-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;padding:0 clamp(24px,4vw,40px) clamp(24px,4vw,40px)}

/* ---- tabs (real <button role=tab>; panels toggled by JS, all shown without JS) ---- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs [role="tab"]{background:none;border:0;border-bottom:2px solid transparent;font:inherit;font-size:15px;font-weight:500;color:var(--fg-muted);padding:12px 14px;min-height:44px;cursor:pointer;white-space:nowrap;margin-bottom:-1px}
.tabs [role="tab"][aria-selected="true"]{color:var(--fg-strong);border-bottom-color:var(--accent)}
.js [role="tabpanel"][hidden]{display:none}

/* ---- empty · loading · success states ---- */
.state-empty{display:grid;gap:10px;justify-items:start;padding:clamp(28px,4vw,48px);border:1.5px dashed var(--line-strong);border-radius:var(--radius-lg);color:var(--fg-muted)}
.state-empty h3{color:var(--fg)}
.loading{position:relative;color:var(--fg-muted)}
.loading-bar{height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:200% 100%;animation:loading-slide 1.4s linear infinite;border-radius:2px}
@keyframes loading-slide{from{background-position:200% 0}to{background-position:-200% 0}}
.done{display:grid;gap:14px;text-align:center;justify-items:center;padding:clamp(32px,6vw,72px) 0}
.done .statement{font-size:clamp(34px,4vw + 12px,68px)}
.done-route{width:min(100%,420px);height:auto}
.done-route .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:trace-draw 1.8s var(--ease-travel) .2s forwards}
.done-route .dot{fill:var(--accent)}

/* ---- section ornaments: numerals and coordinates as layout elements ---- */
.sect-num{position:absolute;right:clamp(8px,3vw,40px);top:clamp(16px,4vh,40px);font-family:var(--font-display);font-size:clamp(64px,10vw,180px);line-height:1;color:var(--fg-strong);opacity:.05;pointer-events:none;user-select:none;letter-spacing:-.04em}
/* The oversized section numeral is decoration, not content: it is drawn from
   a data attribute in a pseudo-element so there is no text node in the DOM at
   all. aria-hidden alone was not enough — axe still measured it as text and,
   at 5 % opacity, it can never pass a contrast threshold it was never meant
   to be judged by. */
.sect-num::before{content:attr(data-num)}
.sect-coord{position:absolute;left:clamp(16px,4vw,48px);top:clamp(16px,4vh,40px);font-family:var(--font-data);font-size:var(--fs-kicker);letter-spacing:.14em;color:var(--fg-muted);opacity:.7;pointer-events:none}

/* ---- the hairline route separator between sections ---- */
.route-sep{height:80px;position:relative;overflow:visible}
.route-sep svg{position:absolute;left:50%;top:0;transform:translateX(-50%);height:80px;width:2px;overflow:visible}
.route-sep line{stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:3 6;stroke-linecap:round}
.route-sep circle{fill:var(--accent)}

/* ---- iconography: 1.5px line icons inherit currentColor ---- */
.icon{width:20px;height:20px;flex:none;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---- motion: travel, never bounce; everything respects the reader ---- */
/* §4.5: a row of tiles arrives one after another, not as a block. The index
   comes from the markup (style="--i:n"); elements without one simply have no
   delay, so the stagger costs nothing where it is not wanted. The cap keeps a
   long list from making the last item wait: 6 × 70ms, never more. */
.reveal{opacity:0;transform:translateY(14px);transition:opacity var(--t-slow) var(--ease-travel),transform var(--t-slow) var(--ease-travel);transition-delay:calc(min(var(--i,0),6) * 70ms)}
.reveal.in,.no-js .reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;transition-delay:0s}
  .done-route .line{stroke-dashoffset:0;animation:none}
  .toast{animation:none}
  .loading-bar{animation:none;background:var(--line-strong)}
}

/* A standalone arrow link is a call to action, not prose: it gets a real
   target height even though its text is one line. */
.linkarrow{display:inline-flex;align-items:center;min-height:44px}


/* ---------- FACT SHEET / REGISTER ----------
   A term and its answer, one per row, readable straight down on a phone and in
   two columns where there is room. Used by /press/ and by /status/. */
.factsheet{display:grid;gap:0;border-top:1px solid var(--line-strong)}
.factsheet>div{display:grid;gap:4px 28px;padding:16px 0;border-bottom:1px solid var(--line)}
@media(min-width:760px){.factsheet>div{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:baseline}}
.factsheet dt{font-family:var(--font-data);font-size:var(--fs-kicker);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);margin:0}
.factsheet dd{margin:0;max-width:70ch;color:var(--fg)}
.factsheet.register{margin-top:clamp(18px,3vh,28px)}


/* The correction log: a date and what changed, read straight down. */
.corrlog{list-style:none;display:grid;gap:0;margin-top:clamp(18px,3vh,28px);border-top:1px solid var(--line-strong)}
.corrlog li{display:grid;gap:4px 28px;padding:18px 0;border-bottom:1px solid var(--line)}
.corrlog time{font-family:var(--font-data);font-size:var(--fs-kicker);letter-spacing:.08em;color:var(--fg-muted)}
.corrlog p{margin:0;max-width:70ch}
@media(min-width:760px){.corrlog li{grid-template-columns:minmax(0,3fr) minmax(0,9fr);align-items:baseline}}


/* Nothing the browser scrolls to should land underneath the sticky header.
   The headings already carried scroll-margin-top; the CONTROLS did not, so a
   keyboard user tabbing down a long form, or a page jumping to an anchor, put
   the next button behind 73px of navigation — visible in the scrollbar's
   sense, unreachable by a finger. */
a[href],button,input:not([type=radio]):not([type=checkbox]),select,textarea,summary,[tabindex]{scroll-margin-top:calc(var(--header-h) + 16px)}
/* Radios and checkboxes are excluded on purpose: the box itself is small and
   often sits inside its label, so a scroll margin on it can leave the browser
   trying to scroll to a point above the top of the document. Their LABEL is
   the target a reader aims at, and it carries the margin. */
.consent label,fieldset label{scroll-margin-top:calc(var(--header-h) + 16px)}

/* ----------------------------------------------------------------------
   LONG WORDS MUST NOT PUSH THE PAGE SIDEWAYS (20 Sep 2026).

   German compounds are longer than a 320px column: "Unternehmensbeschreibung"
   is a single unbreakable word 349px wide, and on /de/press/ it pushed the
   whole document to 369px and gave a 320px reader a horizontal scrollbar —
   the one thing the release laws forbid outright. It had simply never been
   caught, because those laws check 320px in English and Norwegian only, and
   neither language has a word that long.

   overflow-wrap:break-word does nothing at all to a word that fits. It only
   acts on one that cannot, and then breaks it rather than the layout. The
   hero statement is left alone: it sets hyphens:none and overflow-wrap:normal
   on purpose, and its size is already clamped per language. ---------------- */
h2, h3, h4, .lead, .chero-lead, .chero-title, dt, dd, figcaption, li, p:not(.hero-statement){
  overflow-wrap:break-word;
}

/* A grid or flex item defaults to min-width:auto, which means "never shrink below your
   longest unbreakable word". overflow-wrap:break-word above changes how a word is DRAWN
   but not how wide the track is asked to be, so on its own it cannot stop a long word
   widening the column it sits in. min-width:0 lets the track shrink and the wrap happen.
   Without it, "Unternehmensbeschreibung" sized the footer's grid column to 349px inside
   a 320px page and took the whole document with it. */
.foothead > *{min-width:0}
/* .sect-head is the same shape — a grid holding a heading block — and carries the same
   hazard on every section of every page, so it gets the same treatment rather than being
   patched per page. */
.sect-head > *{min-width:0}
/* NOTE: only min-width, never grid-template-columns. .sect-head becomes two columns at
   900px via a media query earlier in this file; setting a template here has the same
   specificity, comes later, and therefore wins everywhere — which silently collapsed
   every two-column section head on the site to one column. min-width:0 on the children
   fixes the overflow and leaves the template alone. */

/* ======================================================================
   THE CONCEPTUAL PAIR (lib/contrast.php — differentiation directive §7).
   Two columns: a common pattern on the left, what Vandrer is exploring on
   the right. Lives in site.css because two pages use it and a third might;
   it is deliberately built from rules and type rather than from two cards,
   so it belongs to the same ruled-index language as the rest of the site.
   The right column is the one that carries the accent — the eye should land
   on the intention, not on the complaint. ============================== */
.vs{display:grid;gap:clamp(16px,2.4vh,26px)}
.vs-head{display:grid;gap:8px}
.vs-k{margin:0}
.vs-h{margin:0;font-family:var(--font-display);font-size:clamp(24px,1.4vw + 18px,38px);
  line-height:1.12;letter-spacing:-.015em;color:var(--fg-strong);max-width:22ch}
.vs-pair{display:grid;gap:clamp(18px,3vw,44px)}
@media(min-width:760px){.vs-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vs-col{min-width:0;display:grid;gap:10px;align-content:start;padding-top:14px;border-top:1px solid var(--line)}
.vs-col.is-vandrer{border-top-color:var(--ember-fg)}
.vs-label{margin:0;font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted)}
.vs-col.is-vandrer .vs-label{color:var(--ember-fg)}
.ctx-night .vs-col.is-vandrer .vs-label{color:var(--sunrise)}
.vs-p{margin:0;font-size:16.5px;line-height:1.6;color:var(--fg);max-width:46ch}
.vs-col.is-usual .vs-p{color:var(--fg-muted)}