/* ==========================================================================
   Datadom · Instrument
   The lab's instrument panel: hairline chassis, mono readouts, Bodoni for the big statements.
   ========================================================================== */

/* Bodoni Moda (SIL Open Font License), self-hosted, latin subset, variable weight + optical size */
@font-face{font-family:"Bodoni Moda";src:url(../fonts/BodoniModa.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0000-002C,U+002E-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-200F,U+2016-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bodoni Moda";src:url(../fonts/BodoniModa-Italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap;unicode-range:U+0000-002C,U+002E-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-200F,U+2016-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* This Bodoni Moda build draws the hyphen, en dash and em dash as empty glyphs, so "forward-deployed" set in the serif
   would read "forward deployed". The two main faces above leave U+002D and U+2010-2015 out of their unicode-range, and
   these two faces join the same family for exactly those code points, so the dash comes from a local serif of a
   similar regular weight. Noto Serif is last for Android. If none of these fonts exists, the dash falls through to the
   next family in --serif and in the end to the generic serif, which always has one: it can never be invisible. */
@font-face{font-family:"Bodoni Moda";src:local("Didot"),local("Bodoni 72"),local("Georgia"),local("Times New Roman"),local("Liberation Serif"),local("DejaVu Serif"),local("Noto Serif");font-weight:400 900;font-style:normal;unicode-range:U+002D,U+2010-2015}
@font-face{font-family:"Bodoni Moda";src:local("Didot Italic"),local("Bodoni 72 Book Italic"),local("Georgia Italic"),local("Times New Roman Italic"),local("Liberation Serif Italic"),local("DejaVu Serif Italic"),local("Didot"),local("Bodoni 72"),local("Georgia"),local("Times New Roman"),local("Liberation Serif"),local("DejaVu Serif"),local("Noto Serif Italic"),local("Noto Serif");font-weight:400 900;font-style:italic;unicode-range:U+002D,U+2010-2015}
/* metric-matched fallback so text does not jump while the font loads */
@font-face{font-family:"Bodoni Fallback";src:local("Didot"),local("Georgia");size-adjust:96%;ascent-override:92%;descent-override:26%}

/* registered properties: lets crop marks and the spotlight transition smoothly */
@property --cl{syntax:"<length>";inherits:true;initial-value:7px}
@property --cc{syntax:"<color>";inherits:true;initial-value:transparent}
@property --co{syntax:"<length>";inherits:true;initial-value:-1px}

/* ---------- tokens: instrument black (default) ---------- */
:root{
  color-scheme:dark;
  --bg:#0a0c0b;--bg-2:#0b0e0c;--panel:#0d100e;--panel-2:#111512;--panel-3:#161b17;--screen:#090b0a;
  --ink:#e8e6e1;--ink-2:#cfd3cc;--dim:#a3a8a0;--faint:#7e857b;--ghost:#3f473f;
  --accent:#8fae8b;--accent-2:#c9d8c4;--no:#b0705e;--strike:#8e928a;
  --line:#252b26;--line-2:#343c35;--hair:#1a1f1b;
  --cm:#56645a;                                   /* crop marks at rest */
  --led:#8fae8b;--led-glow:rgba(143,174,139,.55);
  --spot:rgba(201,216,196,.55);--spot-in:rgba(143,174,139,.07);
  --add:rgba(143,174,139,.07);--add-2:rgba(143,174,139,.22);--del:rgba(176,112,94,.06);
  --nav-bg:rgba(10,12,11,.8);--overlay:rgba(10,12,11,.82);
  --btn-bg:#e8e6e1;--btn-fg:#0a0c0b;--btn-hover:#c9d8c4;
  --sel:rgba(143,174,139,.32);
  --sw-1:460;--sw-2:480;--card-b:#c9d8c4;       /* serif weights (display / titles), card values */
  --img-filter:saturate(.78) contrast(1.02);
  --shadow:0 30px 80px rgba(0,0,0,.5);
  --lift:0 18px 42px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.35);--lift-2:0 26px 56px rgba(0,0,0,.58),0 4px 10px rgba(0,0,0,.38);
  --clip:#a3a8a0;--clip-hi:rgba(232,230,225,.8);--clip-sh:rgba(0,0,0,.6);   /* the paper clip: steel in the palette's greys */
  /* canvas palette: the two loss landscapes (the hero's fabric, the descent console) */
  --fx-1:#2f3a30;--fx-2:#4f6150;--fx-3:#8fae8b;--fx-4:#c9d8c4;--fx-grat:rgba(143,174,139,.075);--fx-axis:rgba(143,174,139,.2);--fx-line:#38463d;

  --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,"Cascadia Mono","Roboto Mono",Consolas,"Liberation Mono",monospace;
  --serif:"Bodoni Moda","Bodoni Fallback","Didot","Bodoni 72",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* motion tokens */
  --e-snap:cubic-bezier(.2,.8,.2,1);
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --d-1:120ms;--d-2:180ms;--d-3:220ms;--d-4:420ms;--d-5:700ms;--d-6:1100ms;

  /* chassis */
  --frame:1360px;--gut:40px;--pad:clamp(20px,3.2vw,48px);--nav-h:60px;
  interpolate-size:allow-keywords;
}
/* lab white */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#F5F5F2;--bg-2:#F1F2EE;--panel:#FBFBF9;--panel-2:#EEF1EC;--panel-3:#E6EAE3;--screen:#FDFDFB;
  --ink:#0A0C0B;--ink-2:#2F3530;--dim:#585E57;--faint:#646A62;--ghost:#C3C9BF;
  --accent:#4F6E4B;--accent-2:#3E5A3B;--no:#9A5A48;--strike:#5f645d;
  --line:#D3D7D0;--line-2:#BCC3B8;--hair:#E5E8E2;
  --cm:#9aa597;
  --led:#4F6E4B;--led-glow:rgba(79,110,75,.35);
  --spot:rgba(62,90,59,.55);--spot-in:rgba(79,110,75,.06);
  --add:rgba(79,110,75,.07);--add-2:rgba(79,110,75,.2);--del:rgba(154,90,72,.05);
  --nav-bg:rgba(245,245,242,.84);--overlay:rgba(251,251,249,.9);
  --btn-bg:#0A0C0B;--btn-fg:#F5F5F2;--btn-hover:#3E5A3B;
  --sel:rgba(79,110,75,.22);
  --sw-1:480;--sw-2:500;--card-b:#4F6E4B;
  --img-filter:saturate(.86);
  --shadow:0 24px 60px rgba(10,12,11,.1);
  --lift:0 16px 36px rgba(10,12,11,.13),0 2px 5px rgba(10,12,11,.08);--lift-2:0 24px 50px rgba(10,12,11,.17),0 4px 10px rgba(10,12,11,.1);
  --clip:#646A62;--clip-hi:rgba(251,251,249,.9);--clip-sh:rgba(10,12,11,.28);
  --fx-1:#c6d1c2;--fx-2:#94ac90;--fx-3:#4f6e4b;--fx-4:#2f472d;--fx-grat:rgba(79,110,75,.09);--fx-axis:rgba(79,110,75,.26);--fx-line:#cdd6c9;
}
/* no JavaScript: follow the system (the inline head script sets data-theme otherwise) */
@media (prefers-color-scheme:light){html:not([data-theme]){
  color-scheme:light;
  --bg:#F5F5F2;--bg-2:#F1F2EE;--panel:#FBFBF9;--panel-2:#EEF1EC;--panel-3:#E6EAE3;--screen:#FDFDFB;
  --ink:#0A0C0B;--ink-2:#2F3530;--dim:#585E57;--faint:#646A62;--ghost:#C3C9BF;
  --accent:#4F6E4B;--accent-2:#3E5A3B;--no:#9A5A48;--strike:#5f645d;
  --line:#D3D7D0;--line-2:#BCC3B8;--hair:#E5E8E2;
  --cm:#9aa597;
  --led:#4F6E4B;--led-glow:rgba(79,110,75,.35);
  --spot:rgba(62,90,59,.55);--spot-in:rgba(79,110,75,.06);
  --add:rgba(79,110,75,.07);--add-2:rgba(79,110,75,.2);--del:rgba(154,90,72,.05);
  --nav-bg:rgba(245,245,242,.84);--overlay:rgba(251,251,249,.9);
  --btn-bg:#0A0C0B;--btn-fg:#F5F5F2;--btn-hover:#3E5A3B;
  --sel:rgba(79,110,75,.22);
  --sw-1:480;--sw-2:500;--card-b:#4F6E4B;
  --img-filter:saturate(.86);
  --shadow:0 24px 60px rgba(10,12,11,.1);
  --lift:0 16px 36px rgba(10,12,11,.13),0 2px 5px rgba(10,12,11,.08);--lift-2:0 24px 50px rgba(10,12,11,.17),0 4px 10px rgba(10,12,11,.1);
  --clip:#646A62;--clip-hi:rgba(251,251,249,.9);--clip-sh:rgba(10,12,11,.28);
  --fx-1:#c6d1c2;--fx-2:#94ac90;--fx-3:#4f6e4b;--fx-4:#2f472d;--fx-grat:rgba(79,110,75,.09);--fx-axis:rgba(79,110,75,.26);--fx-line:#cdd6c9;
}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* scroll padding keeps anchors and the keyboard focus clear of the sticky nav (WCAG 2.4.11), tabbing backwards too */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--sel);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-weight:400}
h1 em,h2 em,h3 em{font-style:italic;color:var(--accent-2)}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--btn-bg);color:var(--btn-fg);font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:16px 18px;text-decoration:none;transition:top var(--d-3) var(--e-snap)}
.skip:focus{top:12px}

/* the serif: hairline Bodoni at display sizes, a little sturdier on the pale ground */
/* Optical size is capped at 22: above it this build's hairlines fall under a device pixel even at 2x (the A loses its
   crossbar, the e its bar, H its bar). Contrast comes from size and the mono around it; weights are theme tokens. */
.serif,h1,.sh h2,.lead,.tenet h3,.onsite h3,.subhead h3,.br h3,.report h3,.spec-body h3,.final h2,.article h1,.prose h2,.outcome h2,.uc h3{font-family:var(--serif);font-weight:var(--sw-2);font-optical-sizing:none;font-variation-settings:"opsz" 18}
:is(h1,.sh h2,.lead,.final h2,.article h1,.outcome h2){font-weight:var(--sw-1);font-variation-settings:"opsz" 22}
:is(.tenet h3,.br h3,.uc h3){font-variation-settings:"opsz" 14}
:is(h1,h2,h3) em{font-weight:inherit}

/* mono labels */
.lbl,.k,.note,.eyebrow,.wk,.vk,.loc,.role{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.lbl{color:var(--faint)}
.led{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--led);box-shadow:0 0 0 3px color-mix(in srgb,var(--led) 16%,transparent),0 0 10px var(--led-glow);flex:0 0 auto}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--led) 16%,transparent),0 0 10px var(--led-glow)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--led) 6%,transparent),0 0 4px var(--led-glow)}}

/* buttons */
.btn{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 22px;position:relative;transition:background-color var(--d-2) var(--e-snap),color var(--d-2) var(--e-snap),border-color var(--d-2) var(--e-snap)}
.btn .arr{display:inline-block;transition:transform var(--d-3) var(--e-snap)}
.btn:hover .arr{transform:translate(2px,-2px)}
.btn.pri{background:var(--btn-bg);color:var(--btn-fg)}
.btn.pri:hover{background:var(--btn-hover)}
.btn.sec{border:1px solid var(--line-2);color:var(--ink-2)}
.btn.sec:hover{border-color:var(--accent);color:var(--ink)}
.btn.sec::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--d-3) var(--e-snap)}
.btn.sec:hover::after{transform:scaleX(1)}

/* ---------- chassis: frame, rails, registration marks ---------- */
.frame{width:min(100% - 2 * var(--gut),var(--frame));margin-inline:auto;position:relative}
body::before{content:"";position:fixed;top:0;bottom:0;left:0;right:0;margin-inline:auto;width:min(100% - 2 * var(--gut),var(--frame));border-inline:1px solid var(--line);pointer-events:none;z-index:60}
main>section,.foot{border-top:1px solid var(--line);position:relative}
main>section>.frame::before,main>section>.frame::after,.foot>.frame::before,.foot>.frame::after{content:"";position:absolute;top:-1px;width:11px;height:11px;pointer-events:none;z-index:61;
  background:linear-gradient(var(--ink-2),var(--ink-2)) 50% 50%/11px 1px no-repeat,linear-gradient(var(--ink-2),var(--ink-2)) 50% 50%/1px 11px no-repeat;opacity:.55}
main>section>.frame::before,.foot>.frame::before{left:-1px;transform:translate(-50%,-50%)}
main>section>.frame::after,.foot>.frame::after{right:-1px;transform:translate(50%,-50%)}
section[id]{scroll-margin-top:0}
@media (max-width:1100px){:root{--gut:24px}}
@media (max-width:759px){:root{--gut:0px}body::before,main>section>.frame::before,main>section>.frame::after,.foot>.frame::before,.foot>.frame::after{display:none}}

/* crop marks: shared by modules, figures and the console */
.cm-host,.mod,.report,.shot,.spec-pic,.pip,.card{--co:-1px;--cl:7px;--cc:var(--cm)}
.cm-host::after,.mod::after,.report::after,.shot::after,.spec-pic::after,.pip::after,.card::after{content:"";position:absolute;inset:var(--co);pointer-events:none;z-index:3;
  background:
    linear-gradient(var(--cc),var(--cc)) 0 0/var(--cl) 1px no-repeat,linear-gradient(var(--cc),var(--cc)) 0 0/1px var(--cl) no-repeat,
    linear-gradient(var(--cc),var(--cc)) 100% 0/var(--cl) 1px no-repeat,linear-gradient(var(--cc),var(--cc)) 100% 0/1px var(--cl) no-repeat,
    linear-gradient(var(--cc),var(--cc)) 0 100%/var(--cl) 1px no-repeat,linear-gradient(var(--cc),var(--cc)) 0 100%/1px var(--cl) no-repeat,
    linear-gradient(var(--cc),var(--cc)) 100% 100%/var(--cl) 1px no-repeat,linear-gradient(var(--cc),var(--cc)) 100% 100%/1px var(--cl) no-repeat;
  transition:--co var(--d-3) var(--e-snap),--cl var(--d-3) var(--e-snap),--cc var(--d-3) var(--e-snap)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
.nav-in{height:var(--nav-h);display:flex;align-items:center;gap:clamp(12px,1.8vw,26px);padding-inline:var(--pad)}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font:700 13px/1 var(--mono);letter-spacing:.1em;min-height:44px;min-width:44px;flex:0 0 auto}
.logo .mark{height:20px;width:auto;fill:currentColor;transition:transform var(--d-3) var(--e-snap)}
.logo:hover .mark{transform:scale(1.06)}
.links{display:flex;align-items:stretch;height:100%}
.links a{display:flex;align-items:center;gap:10px;padding:0 13px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-decoration:none;position:relative;transition:color var(--d-2) var(--e-snap)}
.links a i{font-style:normal;color:var(--faint);transition:color var(--d-2)}
.links a::before{content:"";width:4px;height:4px;background:var(--line-2);flex:0 0 auto;transition:background-color var(--d-2),box-shadow var(--d-2)}
.links a:hover{color:var(--ink)}
.links a:focus-visible{outline-offset:-6px}
.links a:hover i{color:var(--dim)}
.links a:is([aria-current],.parent){color:var(--ink)}
.links a:is([aria-current],.parent) i{color:var(--accent)}
.links a:is([aria-current],.parent)::before{background:var(--led);box-shadow:0 0 8px var(--led-glow)}
.hud{margin-left:auto;display:flex;align-items:center;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap;padding:8px 12px;border:1px solid var(--line);flex:0 0 auto}
.hud .led{width:5px;height:5px}
.hud-id{color:var(--accent)}
.hud-name{color:var(--ink-2)}
.book{flex:0 0 auto;display:inline-flex;align-items:center;min-height:36px;padding:0 16px;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;background:var(--btn-bg);color:var(--btn-fg);transition:background-color var(--d-2) var(--e-snap)}
.book:hover{background:var(--btn-hover)}
.theme{flex:0 0 auto;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);color:var(--dim);transition:color var(--d-2),border-color var(--d-2)}
.theme:hover{color:var(--ink);border-color:var(--accent)}
.theme svg{width:16px;height:16px;transition:transform var(--d-4) var(--e-out)}
.theme:hover svg{transform:rotate(30deg)}
.theme .moon{display:none}
html[data-theme="light"] .theme .sun{display:none}
html[data-theme="light"] .theme .moon{display:block}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 12px;border:1px solid var(--line-2);font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.menu-btn i{width:14px;height:9px;position:relative;display:block}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform var(--d-3) var(--e-snap),top var(--d-3) var(--e-snap)}
.menu-btn i::before{top:0}.menu-btn i::after{top:8px}
.menu-btn[aria-expanded="true"] i::before{top:4px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{top:4px;transform:rotate(-45deg)}
/* the nav's bottom edge is the page timebase */
.ruler{position:absolute;left:0;right:0;bottom:0;height:6px;pointer-events:none;border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 12px) 0 100%/100% 3px no-repeat}
.ruler-fill{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.ruler-ticks i{position:absolute;bottom:0;width:1px;height:6px;background:var(--faint)}
.ruler-ticks i.on{background:var(--accent)}
/* menu overlay (small screens) */
.menu{position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;background:var(--bg);z-index:62;overflow-y:auto;border-top:1px solid var(--line)}
.menu[hidden]{display:none}
.menu-in{display:flex;flex-direction:column;padding:8px var(--pad) 32px}
.menu-in a{display:flex;align-items:center;gap:18px;min-height:60px;border-bottom:1px solid var(--line);text-decoration:none;font:500 14px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.menu-in a i{font-style:normal;color:var(--accent);font-size:11px}
.menu-in .menu-book{justify-content:center;margin-top:28px;border:0;background:var(--btn-bg);color:var(--btn-fg);font-weight:600;font-size:12px}
html.menu-open{overflow:hidden}
html.js .menu:not([hidden]) .menu-in a{animation:menuIn var(--d-4) var(--e-out) both}
html.js .menu:not([hidden]) .menu-in a:nth-child(2){animation-delay:40ms}
html.js .menu:not([hidden]) .menu-in a:nth-child(3){animation-delay:80ms}
html.js .menu:not([hidden]) .menu-in a:nth-child(4){animation-delay:120ms}
html.js .menu:not([hidden]) .menu-in a:nth-child(5){animation-delay:160ms}
html.js .menu:not([hidden]) .menu-in a:nth-child(6){animation-delay:200ms}
@keyframes menuIn{from{opacity:0;transform:translateY(8px)}}
@media (max-width:1240px){.links a{padding:0 10px}}
/* just above the menu layout, the five links leave no room for the HUD's name */
@media (max-width:1089px) and (min-width:1061px){.hud-name{display:none}}
@media (max-width:1180px) and (min-width:1061px){.links a{padding:0 8px;gap:8px}}
@media (max-width:1060px){.links{display:none}.menu-btn{display:inline-flex}.hud-name{display:inline}}
@media (max-width:560px){
  :root{--nav-h:56px}
  .nav-in{gap:8px}
  .logo .wm{display:none}
  .logo .mark{height:22px}
  .hud{padding:6px 8px;gap:7px;font-size:10.5px;letter-spacing:.06em}
  .hud-name{display:none}
  .book{min-height:44px;padding:0 10px;letter-spacing:.08em}
  .theme{width:44px;height:44px}
  .menu-btn .menu-lbl{display:none}
}
/* phones: the HUD is its LED and the section id (just the id below 381px, where "§404" and the LED would crowd the menu
   button); from 460px there is room for the longest name ("La Boussole") too */
@media (max-width:380px){.hud .led{display:none}}
@media (min-width:460px) and (max-width:560px){.hud-name{display:inline}}

/* ---------- hero ---------- */
.hero{overflow-x:clip}
.hero .frame{display:flex;flex-direction:column}
.strip{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:42px;padding:0 var(--pad);border-bottom:1px solid var(--line)}
.strip-r{display:flex;gap:18px;align-items:center}
.strip .clock{color:var(--ink-2);font-variant-numeric:tabular-nums}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);min-height:calc(100svh - var(--nav-h) - 44px - 78px)}
.hero-copy{padding:clamp(32px,5vh,72px) var(--pad);display:flex;flex-direction:column;justify-content:center}
.hero h1{font-size:clamp(3.1rem,1.2rem + 4.9vw,6.8rem);line-height:.96;letter-spacing:-.018em;width:fit-content;max-width:100%}
.hero h1 .ln{display:block}
.hero h1 em{letter-spacing:-.01em}
.sub{margin-top:clamp(22px,3.4vh,36px);color:var(--dim);font-size:clamp(1rem,.94rem + .25vw,1.12rem)}
.spec{margin-top:14px;display:grid;border-top:1px solid var(--line);max-width:560px;counter-reset:s}
.spec li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--hair);color:var(--ink-2);font-size:clamp(.98rem,.94rem + .2vw,1.08rem);line-height:1.5}
.spec li::before{content:counter(s,decimal-leading-zero);font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--accent)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3.4vh,34px)}
.deployed{margin-top:18px;font:500 11px/1.9 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.deployed .k{color:var(--faint)}
.deployed .sep{color:var(--ghost)}
/* the loss landscape as a fabric under the whole header (field.js draws it, once the first viewport is in: it fades
   in); the chassis, the copy and the photo sit on it */
.hero>.fabric{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity 1.8s var(--e-out) .3s}
.hero>.fabric.on{opacity:1}
/* the on-site photo: a large portrait figure straight on the fabric, all three faces in frame at its own 775:853.
   Its width is the column's, or what the column's height leaves for it (--pv: its caption and a margin above and
   below), whichever is smaller; its right edge sits on the content edge the nav and the strip end on */
.hero-fig{--pv:calc(40px + 2 * clamp(24px,15vh - 80px,64px));display:grid;place-items:center end;min-width:0;container-type:size;padding-inline:var(--pad)}
.pip{position:relative;margin:0;width:min(100cqw,(100cqh - var(--pv)) * 775 / 853);background:var(--panel);border:1px solid var(--line-2);box-shadow:var(--lift)}
.pip img{width:100%;height:auto;filter:var(--img-filter)}
.pip figcaption{padding:10px 11px;font:500 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);border-top:1px solid var(--line)}
/* short laptop screens (the homepage; the 404 keeps its own): the copy tightens (the list and the gaps, not the air
   under the strip) and the heading is held to the screen's height, so the hero and the "Deployed with" band fit the
   first viewport; at 790px tall or less (1366x768) the heading steps down a size */
@media (max-height:880px) and (min-width:1061px){
  .hero:not(.nf) .hero-copy{padding-block:34px}
  .hero:not(.nf) h1{font-size:min(clamp(3.1rem,1.2rem + 4.9vw,6.8rem),10.75vh)}
  .spec li{padding:7px 0}
  .hero:not(.nf) .sub,.hero:not(.nf) .cta{margin-top:max(16px,3.4vh - 6px)}
}
@media (max-height:790px) and (min-width:1061px){.hero:not(.nf) .hero-copy{padding-block:32px}.hero:not(.nf) h1{font-size:clamp(2.8rem,1rem + 4.4vw,5.6rem)}.spec li{padding:6px 0}}
/* small laptops and landscape tablets keep the photo beside the copy; portrait tablets (taller than 6:5) stack like
   phones (below), so the photo is large there too */
@media (max-width:1060px) and (min-width:821px) and (min-aspect-ratio:5/6){
  .hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
  .hero h1{font-size:clamp(3rem,.9rem + 4.4vw,3.9rem)}
  .spec li{font-size:.98rem;padding:8px 0}
  .pip figcaption{font-size:10px;letter-spacing:.1em}
}
/* stacked: the photo under the copy at the column's full width, with a band of fabric under it */
@media (max-width:820px),(max-width:1100px) and (max-aspect-ratio:5/6){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .spec{max-width:none}
  .hero-fig{container-type:normal;display:block;place-items:normal;padding:0 var(--pad) clamp(48px,11vw,88px)}
  .pip{width:100%}
}
/* portrait tablets: the 775px photo stops at 720px, on the copy's left edge, so it is never blown up far past its size */
@media (min-width:821px) and (max-width:1100px) and (max-aspect-ratio:5/6){.pip{max-width:720px}}
@media (max-width:640px){
  .strip-r{display:none}
  .pip figcaption{font-size:10px;letter-spacing:.1em}
}
@media (max-width:560px){
  .hero h1{font-size:clamp(3.35rem,1rem + 10.2vw,4.2rem);letter-spacing:-.022em}
  .sub{margin-top:18px}
}

/* ---------- clients: a readout strip ---------- */
.clients-in{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));align-items:stretch}
.clients .k{display:flex;align-items:center;padding:0 var(--pad);color:var(--faint);white-space:nowrap}
.clients ul{display:contents}
.clients li{display:flex;border-left:1px solid var(--line)}
.clients a{flex:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:16px;padding:16px 20px;min-height:74px;text-decoration:none;color:var(--faint);position:relative;transition:background-color var(--d-2) var(--e-snap)}
.clients .lg{grid-row:1;grid-column:2;justify-self:center;display:block;height:22px;width:min(calc(var(--w) * .88),100%);background:var(--dim);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;transition:background-color var(--d-2) var(--e-snap)}
.clients .loc{grid-row:1;grid-column:1;font-size:10px;letter-spacing:.12em;color:var(--faint);transition:color var(--d-2)}
.clients .go{grid-row:1;grid-column:3;font:13px/1 var(--mono);color:var(--ghost);transition:transform var(--d-3) var(--e-snap),color var(--d-2)}
.clients a:hover{background:var(--panel-2)}
.clients a:hover .lg{background:var(--ink)}
.clients a:hover .loc,.clients a:hover .go{color:var(--accent)}
.clients a:hover .go{transform:translateX(4px)}
.clients a::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--d-4) var(--e-snap)}
.clients a:hover::after{transform:scaleX(1)}
.lg-horizoonx{--m:url(../img/logos/horizoonx.svg)}
.lg-coeurentete{--m:url(../img/logos/coeurentete.png)}
.lg-instameals{--m:url(../img/logos/instameals.svg)}
.lg-mcgill{--m:url(../img/logos/mcgill.png)}
.lg-saarland{--m:url(../img/logos/saarland.png)}
.spec-head .lg.lg-saarland{height:52px}
@media (max-width:900px){
  .clients-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .clients .k{grid-column:1/-1;padding:14px var(--pad);border-bottom:1px solid var(--line)}
  .clients li:first-child{border-left:0}
  .clients a{grid-template-columns:1fr auto;row-gap:6px;padding:14px 16px}
  .clients .lg{grid-row:1;grid-column:1;justify-self:start;margin:4px 0}
  .clients .loc{grid-row:2;grid-column:1}
  .clients .go{grid-row:1/3;grid-column:2}
}
@media (max-width:560px){
  .clients-in{grid-template-columns:1fr}
  .clients li{border-left:0;border-top:1px solid var(--line)}
  .clients li:first-of-type{border-top:0}
  .clients a{grid-template-columns:1fr auto auto;min-height:60px}
  .clients .lg{grid-column:1;grid-row:1;justify-self:start;margin:0}
  .clients .loc{grid-column:2;grid-row:1}
  .clients .go{grid-column:3;grid-row:1}
}

/* ---------- versus: a split diff ---------- */
.vs>.frame{padding:clamp(64px,10vh,120px) var(--pad)}
.vs-head{display:grid;gap:18px;margin-bottom:clamp(30px,5vh,52px)}
.vs .lead{font-size:clamp(2.05rem,1.2rem + 2.7vw,3.8rem);line-height:1.03;letter-spacing:-.014em;max-width:21ch;text-wrap:balance;width:fit-content}
.diff{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);background:var(--panel)}
.dcol{min-width:0;display:flex;flex-direction:column}
.dcol+.dcol{border-left:1px solid var(--line)}
.dcol .k{display:flex;gap:14px;align-items:center;min-height:44px;padding:0 18px;border-bottom:1px solid var(--line);color:var(--ink-2);background:var(--bg-2)}
.dcol .k b{font-weight:600;letter-spacing:.02em}
.them .k b{color:var(--no)}
.us .k b{color:var(--accent)}
.dcol ul{display:grid;gap:2px;padding:12px 0;flex:1}
.dcol li{display:grid;grid-template-columns:48px 30px minmax(0,1fr);align-items:baseline;padding:11px 22px 11px 0;font:400 15px/1.6 var(--mono);letter-spacing:-.005em}
.them li{background:var(--del)}
.us li{background:var(--add)}
.dcol .no{align-self:stretch;text-align:right;padding-right:12px;font-size:11px;line-height:24px;color:var(--ghost);border-right:1px solid var(--line);font-variant-numeric:tabular-nums}
.dcol .sg{text-align:center;font-size:11px;font-weight:600}
.them .sg{color:var(--no)}
.us .sg{color:var(--accent)}
.dcol .tx{text-wrap:pretty}
.them .tx{color:var(--strike)}
.us .tx{color:var(--ink);font-weight:500}
.them .st{background:linear-gradient(var(--no),var(--no)) 0 60%/100% 1px no-repeat;transition:background-size .5s var(--e-io),color .4s;transition-delay:calc(560ms + var(--i) * 110ms)}
@media (max-width:820px){.diff{grid-template-columns:1fr}.dcol+.dcol{border-left:0;border-top:1px solid var(--line)}}
@media (max-width:480px){.dcol li{grid-template-columns:32px 22px minmax(0,1fr);padding-right:14px;font-size:14px;letter-spacing:-.01em}.dcol .no{padding-right:8px;line-height:22px}}

/* ---------- section scaffolding ---------- */
.block>.frame{padding:clamp(72px,11vh,136px) var(--pad)}
.sh{display:grid;grid-template-columns:1fr auto;align-items:end;gap:14px 24px;margin-bottom:clamp(32px,5.5vh,60px)}
.sh .n{grid-row:1;grid-column:1;font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--accent)}
.sh h2{grid-row:2;grid-column:1/-1;font-size:clamp(2.6rem,1.3rem + 4vw,5.2rem);line-height:.98;letter-spacing:-.015em;width:fit-content;max-width:100%;padding-bottom:.06em}
.intro{max-width:64ch;color:var(--dim);font-size:clamp(1.06rem,.98rem + .35vw,1.28rem);line-height:1.65;text-wrap:pretty;margin-bottom:clamp(32px,5vh,52px)}
.subhead{display:grid;gap:12px;margin:clamp(56px,9vh,104px) 0 clamp(22px,3.5vh,34px)}
.subhead h3{font-size:clamp(1.7rem,1.2rem + 1.5vw,2.6rem);line-height:1.1;letter-spacing:-.01em;width:fit-content;max-width:100%;text-wrap:balance}
.subhead.split{grid-template-columns:1fr auto;align-items:end}
@media (max-width:640px){.subhead.split{grid-template-columns:1fr}}
.subhead.split .note a{color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.subhead.split .note a:hover{color:var(--ink)}
.subhead.split+.intro{margin-bottom:clamp(28px,4vh,40px)}
.sh+.subhead{margin-top:0}

/* ---------- modules: cursor-lit, crop-marked ---------- */
.mods{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.mod{position:relative;background:var(--panel);isolation:isolate}
.mod::before{content:"";position:absolute;inset:-1px;padding:1px;pointer-events:none;z-index:2;opacity:0;transition:opacity var(--d-4) var(--e-snap);
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),var(--spot),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.mods.lit .mod::before{opacity:1}
.mods.lit .mod{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--spot-in),transparent 65%),var(--panel)}
.mod:hover{z-index:2;--co:-6px;--cl:12px;--cc:var(--accent)}

/* tenets */
.tenets{grid-template-columns:repeat(4,minmax(0,1fr))}
.tenet{display:flex;flex-direction:column;padding:22px 24px 30px;min-height:400px}
.mod-top{display:flex;justify-content:flex-end;align-items:center}
.leds{display:flex;gap:4px}
.leds i{width:6px;height:6px;border:1px solid var(--line-2);transition:background-color var(--d-3),border-color var(--d-3),box-shadow var(--d-3)}
.leds i.on{background:var(--led);border-color:var(--led);box-shadow:0 0 8px var(--led-glow)}
.trace{width:100%;max-width:240px;height:auto;aspect-ratio:3/1;margin:30px 0 0;fill:none;stroke:var(--accent);stroke-width:1.1;overflow:visible}
/* dashes are 2 path-lengths, not 1: with pathLength=1 and a non-scaling stroke, Chromium measures the pattern in
   screen units, so a 1/1 pattern cut long strokes short once the icon is drawn at 2x (240px) */
.trace path{vector-effect:non-scaling-stroke;stroke-dasharray:2 2;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--e-io) calc(var(--i,0) * 90ms + 200ms)}
.trace .tk{stroke:var(--faint)}
.trace .dash{stroke-dasharray:3 4;transition:none;stroke:var(--faint)}
.tenet:hover .trace{stroke:var(--accent-2)}
.tenet h3{margin-top:34px;font-size:clamp(1.5rem,1.05rem + .95vw,2rem);line-height:1.08;letter-spacing:-.005em;text-wrap:balance}
.tenet p{margin-top:14px;color:var(--dim);font-size:.96rem;line-height:1.65;text-wrap:pretty}
/* the tenets' scenes (js/tenets.js): with the script in, each card shows its scene in place of the flat drawing, which
   stays as the fallback without it. The figure runs to the card's edges and fades out toward them */
.tenet .fig{display:none}
.tenet.fx .fig{display:block;position:relative;margin:14px -24px 0;aspect-ratio:16/9}
.tenet.fx .trace{display:none}
.tenet.fx h3{margin-top:22px}
.tenet .fig canvas{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
@media (max-width:1180px){.tenets{grid-template-columns:repeat(2,minmax(0,1fr))}.tenet{min-height:340px}}
@media (max-width:640px){.tenets{grid-template-columns:1fr}.tenet{min-height:0}.tenet h3{margin-top:28px}}

/* on-site log */
.onsite{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin-top:clamp(56px,9vh,110px);border:1px solid var(--line);background:var(--panel)}
.onsite-copy{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;border-right:1px solid var(--line)}
.onsite h3{font-size:clamp(1.7rem,1.2rem + 1.5vw,2.6rem);line-height:1.1;letter-spacing:-.01em;text-wrap:balance;width:fit-content;max-width:100%}
.onsite .note{color:var(--accent)}
.onsite-copy p{color:var(--dim);font-size:clamp(1.02rem,.96rem + .3vw,1.2rem);line-height:1.65;max-width:40ch}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.shot{position:relative;margin:0;background:var(--panel);display:flex;flex-direction:column}
.shot-bar{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;font:500 10px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.shot-img{display:block;overflow:hidden}
.shot img{width:100%;aspect-ratio:3/3.4;height:auto;object-fit:cover;object-position:50% 30%;filter:var(--img-filter);transition:transform var(--d-5) var(--e-out),filter var(--d-4)}
.shot:hover img{transform:scale(1.025);filter:none}
.shot figcaption{padding:12px 14px;font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);border-top:1px solid var(--line)}
.shot:hover{--co:-6px;--cl:12px;--cc:var(--accent)}
@media (max-width:900px){.onsite{grid-template-columns:1fr}.onsite-copy{border-right:0;border-bottom:1px solid var(--line)}}
@media (max-width:480px){.shot-bar span:last-child{display:none}.duo .shot-bar{display:none}}

/* ---------- 02 pipeline ---------- */
.pipe{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4.5vw,72px);align-items:start}
.pipe-side{position:sticky;top:calc(var(--nav-h) + 40px)}
.pipe-side .sh{margin-bottom:32px}
.pipe-side .sh h2{font-size:clamp(2.6rem,1.3rem + 3.2vw,4.6rem)}
.pipe-read{border:1px solid var(--line);background:var(--panel);display:grid;grid-template-columns:1fr auto;gap:12px 16px;padding:18px 20px 20px;position:relative}
.pr-k{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.pr-leds{grid-column:2;grid-row:1;display:flex;gap:5px;align-self:center}
.pr-leds i{width:7px;height:7px;border:1px solid var(--line-2);transition:background-color var(--d-2) steps(2),box-shadow var(--d-2),border-color var(--d-2)}
.pr-leds i.on{background:var(--led);border-color:var(--led);box-shadow:0 0 8px var(--led-glow)}
.pr-count{grid-column:1/-1;font:300 clamp(3.6rem,2rem + 3.6vw,5.6rem)/.9 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--faint)}
.pr-count b{font-weight:300;color:var(--ink)}
.pr-cur{grid-column:1/-1;font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding-top:12px;border-top:1px solid var(--line);min-height:2.8em}
.pipe-main{position:relative;min-width:0}
.bh{display:grid;grid-template-columns:40px 120px minmax(0,1fr) minmax(0,1.45fr);gap:0 20px;padding-bottom:12px;border-bottom:1px solid var(--line);font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.bh span:first-child{grid-column:2}
.rows{counter-reset:r}
.br{--ny:41px;position:relative;display:grid;grid-template-columns:40px 120px minmax(0,1fr) minmax(0,1.45fr);gap:8px 20px;padding:28px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.br .wk{grid-column:2;color:var(--faint);transition:color var(--d-3) var(--e-snap)}
.br h3{grid-column:3;font-size:clamp(1.35rem,1.1rem + .6vw,1.7rem);line-height:1.15;color:var(--ink-2);transition:color var(--d-3) var(--e-snap)}
.br p{grid-column:4;color:var(--dim);font-size:.96rem;line-height:1.65;text-wrap:pretty}
/* node + rail segment to the next node */
.br .wk::before{content:"";position:absolute;left:14px;top:calc(var(--ny) - 5.5px);width:11px;height:11px;border:1px solid var(--line-2);background:var(--bg);transition:background-color var(--d-2) var(--e-snap),border-color var(--d-2),box-shadow var(--d-3);z-index:1}
.br.alt .wk::before{border-radius:50%}
.br::before,.br::after{content:"";position:absolute;left:19px;top:var(--ny);height:100%;width:1px;background:var(--line-2)}
.br::after{background:var(--accent);transform-origin:0 0;transform:scaleY(var(--f,0))}
.br:last-child::before,.br:last-child::after{display:none}
.br:nth-child(3)::before,.br.alt::before{background:repeating-linear-gradient(var(--line-2) 0 3px,transparent 3px 7px)}
.br:nth-child(3)::after,.br.alt::after{background:repeating-linear-gradient(var(--accent) 0 3px,transparent 3px 7px)}
.br.on .wk{color:var(--accent)}
.br.on h3{color:var(--ink)}
.br.on .wk::before{background:var(--led);border-color:var(--led);box-shadow:0 0 0 4px color-mix(in srgb,var(--led) 14%,transparent),0 0 14px var(--led-glow)}
.bn{display:grid;grid-template-columns:40px 120px minmax(0,1fr);gap:8px 20px;margin-top:28px;padding:22px 0;border:1px solid var(--line);background:var(--panel)}
.bn .wk{grid-column:2;color:var(--accent)}
.bn p{grid-column:3;color:var(--ink-2);font-size:1.02rem;line-height:1.7;max-width:70ch;padding-right:20px}
.bn::before{content:"";grid-column:1;grid-row:1;justify-self:center;align-self:center;width:11px;height:1px;background:var(--accent)}
@media (max-width:1180px){.br,.bh{grid-template-columns:40px 110px minmax(0,1fr)}.br p{grid-column:3}.bh span:last-child{display:none}.bn{grid-template-columns:40px 110px minmax(0,1fr)}}
/* tablets and phones: the stage readout becomes a compact bar riding under the nav through the whole pipeline */
@media (max-width:900px){
  .pipe{grid-template-columns:minmax(0,1fr);gap:0}
  .pipe-side{display:contents}
  .pipe-side .sh{margin-bottom:clamp(26px,4vh,40px)}
  .pipe-read{position:sticky;top:calc(var(--nav-h) + 6px);z-index:5;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 14px;min-height:56px;padding:8px 14px 10px;margin-bottom:10px;border-color:var(--line-2);background:color-mix(in srgb,var(--panel) 92%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .pr-k{display:none}
  .pr-count{grid-column:1;grid-row:1;font-size:2rem;letter-spacing:-.03em;padding-right:14px;border-right:1px solid var(--line)}
  .pr-cur{grid-column:2;grid-row:1;border-top:0;padding-top:0;min-height:0;font-size:10.5px;letter-spacing:.1em;line-height:1.35}
  .pr-leds{position:absolute;left:-1px;right:-1px;bottom:-1px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px}
  .pr-leds i{width:auto;height:2px;border:0;background:var(--line-2)}
  .pr-leds i.on{background:var(--led);box-shadow:none}
}
@media (max-width:640px){
  .bh{display:none}
  .br{grid-template-columns:32px minmax(0,1fr);padding:22px 0}
  .br .wk,.br h3,.br p{grid-column:2}
  .br{--ny:34px}
  .br .wk::before{left:10px}
  .br::before,.br::after{left:15px}
  .bn{grid-template-columns:32px minmax(0,1fr)}
  .bn .wk,.bn p{grid-column:2}.bn p{padding-right:0}
}

/* ---------- pipeline: the Bonus card (Papers & grants) ----------
   A framed card joined to the rail by a connector, a diamond node, a star chip, the title in the sage italic
   and a small paper with a grant seal. It unlocks once, when the reading line first reaches it (.unlocked, set by
   motion.js): node blooms, connector grows, the frame wipes open behind a scan line, a sheen crosses, the paper's
   lines write and the seal stamps. Afterwards: a slow node pulse and a glint along the top edge. */
.br.bonus{--ny:49px;--bx-l:40px;padding:36px 26px 36px 0;border-bottom:0;margin-top:14px;isolation:isolate}
.br:has(+ .bonus)::before,.br:has(+ .bonus)::after{height:calc(100% + 22px)}
.bx{position:absolute;inset:12px 0 12px var(--bx-l);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);pointer-events:none;
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 58%),var(--panel);z-index:-1}
.bx::after{z-index:3}
.bx.cm-host{--co:-5px;--cl:10px;--cc:color-mix(in srgb,var(--accent-2) 75%,transparent)}
.bx-link{position:absolute;left:calc(-1 * var(--bx-l) + 25px);top:calc(var(--ny) - 12.5px);width:calc(var(--bx-l) - 25px);height:1px;background:var(--accent);transform-origin:0 50%}
.bx-sheen,.bx-glint,.bx-scan{position:absolute;pointer-events:none}
.bx-sheen{inset:0;overflow:hidden;opacity:0;background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--accent-2) 16%,transparent) 48%,transparent 66%) no-repeat;background-size:220% 100%;background-position:160% 0}
.bx-glint{left:0;right:0;top:-1px;height:1px;opacity:0;background:linear-gradient(90deg,transparent,var(--accent-2),transparent) no-repeat;background-size:90px 1px;background-position:-90px 0}
.bx-scan{top:-1px;bottom:-1px;left:0;width:1px;background:var(--accent-2);box-shadow:0 0 12px var(--led-glow),-14px 0 18px -8px var(--led-glow);opacity:0}
/* node: a diamond, not a square or a circle */
.br.bonus .wk::before{border-radius:1px;transform:rotate(45deg) scale(.92)}
/* the chip */
.br.bonus .wk{display:inline-flex;align-items:center;gap:7px;justify-self:start;align-self:baseline;padding:5px 9px 5px 7px;margin-top:-5px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent-2)}
.bx-star{width:11px;height:11px;fill:currentColor;flex:0 0 auto}
.br.bonus .wk::before{left:14px}
.br.bonus.on .wk{color:var(--accent-2)}
/* the title takes the sage italic, like the emphasis in every headline */
.br.bonus h3,.br.bonus.on h3{font-style:italic;color:var(--accent-2)}
.br.bonus p{color:var(--ink-2)}
/* the paper */
.bx-paper{position:absolute;left:calc(var(--bx-l) + 20px);top:calc(var(--ny) + 26px);width:34px;height:auto;fill:none;stroke:var(--accent);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.bx-paper .pg{fill:color-mix(in srgb,var(--accent) 6%,var(--panel))}
.bx-paper .pl{stroke:var(--accent-2);stroke-dasharray:1 1;stroke-dashoffset:0}
.bx-paper .seal{transform-box:fill-box;transform-origin:50% 50%}
.bx-paper .seal circle{fill:var(--panel);stroke:var(--accent-2)}
.bx-paper .seal path{fill:var(--accent-2);stroke:none}
@media (max-width:1180px){.br.bonus{--bx-l:40px}}
@media (max-width:640px){
  .br.bonus{--ny:46px;--bx-l:32px;padding:34px 18px 30px 0}
  .bx-link{left:calc(-1 * var(--bx-l) + 21px);width:calc(var(--bx-l) - 21px)}
  .br.bonus .wk::before{left:10px}
  .br:has(+ .bonus)::before,.br:has(+ .bonus)::after{height:calc(100% + 26px)}
  .bx-paper{left:auto;right:16px;top:24px;width:28px}
}
/* the stage readout: the sixth light is a diamond */
@media (min-width:901px){.pr-leds i:last-child{transform:rotate(45deg) scale(.86)}}
.pipe.at-bonus .pr-cur{color:var(--accent-2)}

/* the unlock: only while motion.js runs the pipeline (.mo); without it the card is simply there */
html.mo .bonus:not(.unlocked) .bx{clip-path:inset(-8px 100% -8px -60px)}
html.mo .bonus:not(.unlocked) .bx-link{transform:scaleX(0)}
html.mo .bonus:not(.unlocked) .bx-paper .pl{stroke-dashoffset:1}
html.mo .bonus:not(.unlocked) .bx-paper .seal{opacity:0;transform:scale(1.8) rotate(-24deg)}
html.mo .bonus:not(.unlocked) .bx-paper .pg,html.mo .bonus:not(.unlocked) .bx-paper .pf{opacity:0}
html.mo .bonus:not(.unlocked) .wk{border-color:transparent;background:transparent}
.bonus.unlocked .wk::before{animation:bloom .9s var(--e-out) both,pulse 2.8s ease-in-out 1.6s infinite}
.bonus.unlocked .bx-link{animation:grow .22s var(--e-io) both}
.bonus.unlocked .bx{animation:bxwipe .9s var(--e-out) .18s both}
.bonus.unlocked .bx-scan{animation:bxscan .9s var(--e-out) .18s both}
.bonus.unlocked .bx-sheen{animation:sheen 1.1s var(--e-io) 1s both}
.bonus.unlocked .bx-glint{animation:glint 7s var(--e-io) 2.6s infinite}
.bonus.unlocked .wk{transition:opacity .5s var(--e-out),transform .5s var(--e-out),border-color .4s var(--e-out) .5s,background-color .4s var(--e-out) .5s,color var(--d-3) var(--e-snap)}
.bonus.unlocked .bx-star{animation:star .9s var(--e-out) .55s both}
.bonus.unlocked .bx-paper .pg,.bonus.unlocked .bx-paper .pf{animation:fadein .4s var(--e-out) .7s both}
.bonus.unlocked .bx-paper .pl{animation:write .42s var(--e-io) calc(.95s + var(--i) * .12s) both}
.bonus.unlocked .bx-paper .seal{animation:stamp .5s cubic-bezier(.3,1.5,.5,1) 1.55s both}
.pipe.at-bonus .pr-leds i:last-child.on{animation:bloom6 .9s var(--e-out) both}
@keyframes bloom{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--led) 60%,transparent),0 0 0 var(--led-glow);transform:rotate(45deg) scale(.5)}
  45%{box-shadow:0 0 0 14px color-mix(in srgb,var(--led) 0%,transparent),0 0 22px var(--led-glow);transform:rotate(45deg) scale(1.25)}
  100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--led) 14%,transparent),0 0 14px var(--led-glow);transform:rotate(45deg) scale(.92)}}
@keyframes bloom6{0%{box-shadow:0 0 0 0 var(--led-glow)}50%{box-shadow:0 0 0 6px transparent,0 0 16px var(--led-glow)}100%{box-shadow:0 0 8px var(--led-glow)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bxwipe{from{clip-path:inset(-8px 100% -8px -60px)}to{clip-path:inset(-8px -8px -8px -60px)}}
@keyframes bxscan{0%{opacity:1;left:0}88%{opacity:1}100%{opacity:0;left:100%}}
@keyframes sheen{0%{opacity:1;background-position:160% 0}100%{opacity:1;background-position:-60% 0}}
@keyframes glint{0%{opacity:1;background-position:-90px 0}35%,100%{opacity:1;background-position:calc(100% + 90px) 0}}
@keyframes star{0%{transform:rotate(-90deg) scale(.3);opacity:0}60%{transform:rotate(12deg) scale(1.25);opacity:1}100%{transform:none;opacity:1}}
@keyframes fadein{from{opacity:0}}
@keyframes write{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes stamp{0%{opacity:0;transform:scale(1.8) rotate(-24deg)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bonus .bx-glint,.bonus .bx-sheen,.bonus .bx-scan{display:none}.br.bonus .wk::before{animation:none!important}}


/* ---------- 03 field reports: static sheets, the cover clipped on, the text laid out below ---------- */
/* 12 columns inside each sheet: cover (7) + data plate (5), then a rule, then headline (5) + text (7) */
.reports{display:grid;gap:clamp(24px,3.4vw,40px)}
.report{--gap:clamp(20px,2.4vw,32px);--row:clamp(28px,2.8vw,40px);position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;padding:clamp(40px,3.6vw,52px) clamp(24px,3.4vw,48px) clamp(34px,3.8vw,52px);border:1px solid var(--line);background:var(--panel);text-decoration:none;color:inherit;transition:border-color var(--d-3) var(--e-snap)}
.report:is(:hover,:focus-visible){border-color:var(--line-2);--co:-7px;--cl:14px;--cc:var(--accent)}
.report .pic{grid-column:1/span 7;grid-row:1;position:relative;margin:0;transform:rotate(var(--tilt,0deg))}
.rplate{grid-column:8/span 5;grid-row:1;align-self:stretch;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line-2);background:var(--bg-2)}
.report::before{content:"";grid-column:1/-1;grid-row:2;height:1px;margin-top:var(--row);background:var(--line);transform-origin:0 50%}
.rhd{grid-column:1/span 5;grid-row:2;padding-top:calc(var(--row) * 2)}
.rtx{grid-column:6/span 7;grid-row:2;padding-top:calc(var(--row) * 2 + 6px)}
.report .eyebrow{color:var(--accent)}
.report h3{margin-top:0;font-size:clamp(1.65rem,1.1rem + 1.5vw,2.6rem);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.rtx p{color:var(--dim);font-size:clamp(1rem,.97rem + .15vw,1.07rem);line-height:1.72;text-wrap:pretty}
.rtx .link{margin-top:28px}
.link{display:inline-flex;align-items:center;gap:10px;font:600 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);padding-bottom:8px;border-bottom:1px solid var(--line-2);transition:color var(--d-2),border-color var(--d-2)}
.link .arr{display:inline-block;transition:transform var(--d-3) var(--e-snap)}
.report:hover .link{color:var(--ink);border-color:var(--accent)}
.report:is(:hover,:focus-visible) .link .arr{transform:translateX(5px)}
/* the data plate: the report's facts, verbatim from the case pages */
.rplate .meta{flex:1;display:flex;flex-direction:column}
/* each fact is a form field: the label over its value, centred in the cell */
.meta>div{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:16px 18px 17px;
  background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat;transition:background-size .45s var(--e-io)}
.meta dt{font:500 10px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.meta dd{font:500 14px/1.55 var(--mono);letter-spacing:.01em;color:var(--ink-2);text-wrap:pretty}
/* the plate's top row names the engagement (client × Datadom) */
.meta-pair{flex:0 0 auto;padding:14px 18px;color:var(--accent)}
/* the cover: a print clipped onto the sheet, a slight physical tilt; the clip's back loop sits under the print */
.r-b{--tilt:-.5deg;--cx:56%}.r-i{--tilt:.4deg;--cx:87%;--cr:2deg}.r-h{--tilt:-.3deg;--cx:92%;--cr:-1.5deg}
.ph{display:block;position:relative;z-index:1;border:1px solid var(--line-2);background:var(--panel-2);box-shadow:var(--lift);transition:transform .46s var(--e-out),box-shadow .46s var(--e-out),opacity .46s var(--e-out)}
.ph img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;filter:var(--img-filter);transition:filter var(--d-4)}
.r-b .ph img{object-position:50% 50%}
.r-h .ph img{object-position:50% 0}
.clip{position:absolute;z-index:2;left:var(--cx);top:-24px;width:26px;height:78px;overflow:visible;fill:none;stroke:var(--clip);stroke-width:1.7;stroke-linecap:round;pointer-events:none;filter:drop-shadow(0 1.5px 1px var(--clip-sh));transform-origin:50% 24px;rotate:var(--cr,-2deg);scale:1.12}
.clip.back{z-index:0}
.clip .hl{stroke:var(--clip-hi);stroke-width:.55;transform:translate(-.45px,-.35px)}
@media (min-width:1001px){.clip{scale:1.18;stroke-width:1.8;top:-26px}}
@media (min-width:1301px){.clip{scale:1.3;stroke-width:1.9;top:-28px}}
/* small laptops: a compact data plate, so it never outgrows the print beside it */
@media (min-width:1001px) and (max-width:1300px){.meta>div{padding:12px 16px 13px;gap:8px}.meta dd{font-size:13px;line-height:1.45}.meta-pair{padding:11px 16px}}
@media (min-width:1001px) and (max-width:1100px){.meta>div{padding:10px 14px 11px;gap:6px}.meta-pair{padding:9px 14px}}
.report:is(:hover,:focus-visible) .ph{transform:translateY(-4px);box-shadow:var(--lift-2)}
.report:is(:hover,:focus-visible) .ph img{filter:none}
/* tablets and phones: cover → data plate → headline → text, one column */
@media (max-width:1000px){
  .report{grid-template-columns:minmax(0,1fr);padding:clamp(40px,6vw,56px) clamp(20px,4vw,36px) clamp(28px,5vw,40px)}
  .report .pic,.rplate{grid-column:1;max-width:720px}
  .rplate{grid-row:2;margin-top:clamp(26px,4vw,36px)}
  .report::before{display:none}
  .rhd{grid-column:1;grid-row:3;padding-top:clamp(30px,5vw,44px)}
  .rtx{grid-column:1;grid-row:4;padding-top:18px}
  .rhd,.rtx{max-width:720px}
  .meta>div{flex:none;display:grid;grid-template-columns:minmax(96px,.3fr) minmax(0,1fr);gap:6px 16px;align-content:start}
  .meta dd{font-size:13px}
}
@media (max-width:480px){.meta>div{grid-template-columns:1fr;gap:4px;padding:14px 16px}.meta-pair{padding:12px 16px}.clip{scale:1}}

/* ---------- 04 team ---------- */
.spec-sheet{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);border:1px solid var(--line);background:var(--panel)}
.sheets{display:grid;grid-auto-rows:1fr;gap:16px}
.spec-pic{position:relative;border-right:1px solid var(--line);margin:0}
.spec-pic img{width:100%;height:100%;min-height:100%;aspect-ratio:1;object-fit:cover;filter:var(--img-filter)}
.spec-body{padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;min-width:0}
.spec-bar{display:flex;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:clamp(20px,3vh,32px);border-bottom:1px solid var(--line);font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.spec-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px 28px;flex-wrap:wrap}
.spec-head .lg{flex:0 0 auto;margin-top:6px}
.spec-body h3{font-size:clamp(2rem,1.4rem + 1.8vw,3.1rem);line-height:1.02;letter-spacing:-.01em}
.role{margin-top:12px;color:var(--accent)}
.bio{margin-top:18px;color:var(--dim);line-height:1.7;text-wrap:pretty}
.kv{margin-top:auto;padding-top:26px;display:grid;gap:0}
.kv>div{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center;min-height:48px;border-top:1px solid var(--hair)}
.kv>div:last-child{border-bottom:1px solid var(--hair)}
.kv dt{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.kv dd{font:500 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--ink-2)}
.kv .fl{display:flex;flex-wrap:wrap;gap:4px 22px}
.kv .fl a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--accent);text-decoration:none;text-transform:uppercase;letter-spacing:.14em;font-size:11px;transition:color var(--d-2)}
.kv .fl a:hover{color:var(--ink)}
.spec-head .lg{display:block;height:38px;width:var(--w);background:var(--ink-2);-webkit-mask:var(--m) left center/contain no-repeat;mask:var(--m) left center/contain no-repeat}
.subhead+.staff{margin-top:0}
.staff{grid-template-columns:repeat(4,minmax(0,1fr))}
.staff .cell{padding:22px 22px 30px;min-height:190px;display:flex;flex-direction:column;gap:30px}
.staff .k{color:var(--accent);font-size:12px}
.staff p{color:var(--ink-2);font-size:1rem;line-height:1.6;text-wrap:pretty}
.join{margin-top:26px;font:400 1rem/1.6 var(--sans);color:var(--dim)}
.join a{font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin-left:10px}
.join a:hover{color:var(--ink)}
@media (max-width:1000px){.staff{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.spec-sheet{grid-template-columns:1fr}.spec-pic{border-right:0;border-bottom:1px solid var(--line)}.spec-pic img{aspect-ratio:4/3;object-position:50% 25%}}
@media (max-width:520px){.staff{grid-template-columns:1fr}.staff .cell{min-height:0;gap:16px}.kv>div{grid-template-columns:90px 1fr}}

/* ---------- 05 query log ---------- */
.qlog{border:1px solid var(--line);background:var(--panel)}
.qlog-bar{display:flex;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--line);font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);background:var(--bg-2)}
.qlog details{border-bottom:1px solid var(--hair);position:relative}
.qlog details:last-child{border-bottom:0}
.qlog summary{display:grid;grid-template-columns:52px 22px minmax(0,1fr) 28px;align-items:baseline;gap:0 4px;padding:20px 20px;cursor:pointer;list-style:none;transition:background-color var(--d-2) var(--e-snap)}
.qlog summary::-webkit-details-marker{display:none}
.qlog summary:hover{background:var(--panel-2)}
.qn{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--faint);font-variant-numeric:tabular-nums}
.pr{font:500 14px/1 var(--mono);color:var(--accent);transition:transform var(--d-3) var(--e-snap);justify-self:start;transform-origin:50% 50%}
.q{font-size:clamp(1.04rem,.98rem + .3vw,1.2rem);line-height:1.45;font-weight:500;color:var(--ink);letter-spacing:-.003em}
.m{justify-self:end;align-self:center;width:12px;height:12px;position:relative}
.m::before,.m::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--accent);transition:transform var(--d-3) var(--e-snap)}
.m::after{transform:rotate(90deg)}
details[open] .m::before{transform:rotate(45deg)}
details[open] .m::after{transform:rotate(135deg)}
details[open] .pr{transform:translateY(1px) rotate(90deg)}
details[open] .qn{color:var(--accent)}
details[open]>summary{background:var(--panel-2)}
.qlog .a{padding:4px 20px 26px 98px;position:relative}
.qlog .a::before{content:"";position:absolute;left:80px;top:8px;bottom:30px;width:1px;background:var(--accent);opacity:.6}
.qlog .a p{color:var(--dim);line-height:1.72;max-width:78ch;text-wrap:pretty}
.qlog .a a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line-2)}
.qlog .a a:hover{color:var(--ink);border-color:var(--accent)}
details[open] .a p{animation:answer var(--d-4) var(--e-out) both}
@keyframes answer{from{opacity:0;transform:translateY(-4px)}}
@supports selector(::details-content){
  .qlog details::details-content{block-size:0;overflow:hidden;transition:block-size var(--d-4) var(--e-out),content-visibility var(--d-4) allow-discrete}
  .qlog details[open]::details-content{block-size:auto}
}
@media (max-width:640px){
  .qlog summary{grid-template-columns:40px minmax(0,1fr) 22px;padding:18px 16px}
  .qlog .pr{display:none}
  .qlog .a{padding:0 16px 22px 56px}
  .qlog .a::before{left:40px}
}

/* ---------- final: the descent console ---------- */
.final>.frame{padding:clamp(40px,7vh,88px) var(--pad)}
/* as tall as its content, like the hero: the terrain runs behind the copy and the card, and the marker plays in the open */
.console{position:relative;border:1px solid var(--line-2);background:var(--screen);overflow:hidden;display:flex;flex-direction:column}
.console>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.console-bar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--screen) 70%,transparent)}
.fin{position:relative;z-index:2;flex:1;display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(28px,5vw,80px);padding:clamp(36px,6vh,72px) clamp(28px,5vw,72px) clamp(44px,8vh,88px);flex-wrap:wrap}
.fin .copy{flex:1 1 420px;max-width:560px}
.final h2{font-size:clamp(2.9rem,1.4rem + 4.6vw,6rem);line-height:.96;letter-spacing:-.018em;width:fit-content;max-width:100%}
.final h2 .ln{display:block} /* explicit break: the same two lines in both themes, on both pages */
.fin .copy p{margin:26px 0 34px;color:var(--ink-2);line-height:1.7;max-width:44ch;font-size:clamp(1rem,.96rem + .2vw,1.1rem);text-wrap:pretty}
.card{position:relative;flex:0 1 360px;background:color-mix(in srgb,var(--panel) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line-2);font-family:var(--mono);box-shadow:var(--shadow)}
.card .hd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--led);box-shadow:0 0 10px var(--led-glow);animation:blink 1.4s steps(2,jump-none) infinite;flex:0 0 auto}
.card .row{display:grid;grid-template-columns:78px 1fr;gap:14px;padding:12px 16px;border-bottom:1px solid var(--hair);font-size:11.5px;line-height:1.45;color:var(--faint);position:relative}
.card .row>span{white-space:nowrap}
.card .row b{font-weight:500;color:var(--card-b)}
.card .ft{padding:13px 16px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.card .ft::after{content:"";display:inline-block;width:7px;height:12px;margin-left:6px;vertical-align:-2px;background:var(--accent);animation:blink 1.1s steps(2,jump-none) infinite}
.card:hover{--co:-6px;--cl:12px;--cc:var(--accent)}
@media (max-width:940px){.card{flex:1 1 100%;max-width:520px}}
/* tablets and phones: copy and card stacked leave little open room beside them, so a short band under the card holds
   the descent (only once field.js has laid the canvas in, .fx: without it the console hugs its content) */
@media screen and (max-width:940px){.console.fx .fin{padding-bottom:clamp(140px,120px + 7vw,190px)}}
@media (max-width:640px){.fin{padding-top:28px;padding-inline:20px}}
@media (max-width:420px){.fin{padding-inline:16px}.card .ft{white-space:nowrap;font-size:10px;letter-spacing:.06em;padding-inline:14px}}

/* ---------- 06 learn ---------- */
.vids{grid-template-columns:repeat(3,minmax(0,1fr))}
.vid{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter);transition:transform var(--d-5) var(--e-out),filter var(--d-4)}
.vid:hover .thumb img{transform:scale(1.03);filter:none}
.thumb::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);opacity:0;transition:opacity var(--d-3)}
.vid:hover .thumb::after{opacity:1}
.play{position:absolute;left:14px;bottom:14px;width:40px;height:40px;background:var(--overlay);border:1px solid var(--line-2);z-index:1;transition:background-color var(--d-2),border-color var(--d-2)}
.play::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--card-b)}
.vid:hover .play{background:var(--btn-bg);border-color:var(--btn-bg)}
.vid:hover .play::after{border-left-color:var(--btn-fg)}
.vk{padding:18px 20px 8px;color:var(--accent)}
.vt{padding:0 20px 24px;font-size:1.08rem;line-height:1.4;font-weight:500;color:var(--ink);text-wrap:balance}
@media (max-width:900px){.vids{grid-template-columns:minmax(0,1fr)}.vid{display:grid;grid-template-columns:minmax(0,200px) 1fr;grid-template-rows:auto 1fr}.thumb{grid-row:1/3;border-bottom:0;border-right:1px solid var(--line);height:100%}.vk{padding-top:16px}}
@media (max-width:520px){.vid{display:flex}.thumb{border-right:0;border-bottom:1px solid var(--line);height:auto}}

/* ---------- footer ---------- */
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,4vw,56px);padding:clamp(44px,7vh,72px) var(--pad)}
.foot .fl{display:flex;align-items:center;gap:10px;font:700 13px/1 var(--mono);letter-spacing:.1em;margin-bottom:16px}
.foot .fl .mark{height:18px;width:auto;fill:currentColor}
.tag{color:var(--dim);font-size:.95rem;line-height:1.65;max-width:34ch}
.foot-col h3{font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.foot-col a{display:flex;align-items:center;min-height:36px;font:500 11.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color var(--d-2)}
.foot-col a:hover{color:var(--ink)}
.foot-col a::before{content:"";width:0;height:1px;background:var(--accent);margin-right:0;transition:width var(--d-3) var(--e-snap),margin var(--d-3) var(--e-snap)}
.foot-col a:hover::before{width:12px;margin-right:8px}
.foot-mark{display:flex;align-items:baseline;gap:clamp(12px,2.2vw,32px);padding:clamp(24px,4vh,40px) var(--pad) 0;border-top:1px solid var(--line);overflow:hidden;color:var(--line-2)}
.foot-mark .mark{height:calc(var(--wm,15.6vw) * .7);width:auto;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;overflow:visible}
.foot-wm{font:700 var(--wm,clamp(56px,15.6vw,232px))/.78 var(--mono);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px var(--line-2);white-space:nowrap;user-select:none}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px;padding:16px var(--pad);border-top:1px solid var(--line);font:500 10.5px/1.8 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.foot-clock{font-variant-numeric:tabular-nums;color:var(--dim)}
.totop,.foot-mail{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--dim);text-decoration:none}
.totop:hover,.foot-mail:hover{color:var(--ink)}
@media (max-width:860px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:760px){.foot-col a{min-height:44px}}
@media (max-width:420px){.foot-top{grid-template-columns:1fr}}

/* no JavaScript: live readouts hide, the section links stay reachable on small screens */
html:not(.js) :is(.hud,.clock,.foot-clock,.menu-btn,.theme){display:none}
@media (max-width:1060px){html:not(.js) .links{display:flex;overflow-x:auto;min-width:0;flex:1 1 auto;scrollbar-width:none}html:not(.js) .links a{white-space:nowrap}}

/* ==========================================================================
   Motion: hidden-before-reveal states.
   Only under html.js (set pre-paint). A CSS failsafe reveals everything after 2.6s if
   motion.js never runs; motion.js adds .mo (takes over) or .mo-late (loaded too late: no hiding).
   The first viewport (.load-wipe, .hin) is pure CSS from first paint: it never waits for a script.
   ========================================================================== */
@keyframes scanl{0%{transform:translateX(-100%);opacity:1}85%{opacity:1}100%{transform:translateX(0);opacity:0}}
@keyframes lwipe{from{clip-path:inset(-.3em 100% -.3em -.3em)}to{clip-path:inset(-.3em -.3em -.3em -.3em)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@keyframes develop{from{filter:saturate(0) contrast(1.02) brightness(.55)}}
/* serif headings: a clip wipe led by a 1px scan line; both stop at the measured end of the text (--sx) */
.wipe,.load-wipe{position:relative}
.wipe .scanl,html.js .load-wipe::after{position:absolute;top:-.1em;bottom:-.1em;left:0;width:var(--sx,100%);pointer-events:none;opacity:0;transform:translateX(-100%);will-change:transform;
  background:linear-gradient(90deg,transparent calc(100% - 28px),color-mix(in srgb,var(--accent) 30%,transparent) calc(100% - 1px),var(--accent) calc(100% - 1px))}
html.js:not(.mo-late) .wipe:not(.in){clip-path:inset(-.3em 100% -.3em -.3em)}
.wipe.in{clip-path:inset(-.3em calc(100% - var(--sx,100%) - .3em) -.3em -.3em);transition:clip-path .9s var(--e-out) var(--wd,0ms)}
.wipe.done{clip-path:none}
.wipe.in .scanl{animation:scanl .9s var(--e-out) var(--wd,0ms) both}
html.js .load-wipe{animation:lwipe .62s var(--e-out) 40ms backwards}
html.js .load-wipe::after{content:"";animation:scanl .62s var(--e-out) 40ms both}
html.js .hin{animation:rise .42s var(--e-out) both;animation-delay:calc(90ms + var(--i,0) * 40ms)}
html.js .pip img{animation:develop .9s var(--e-out) 60ms both}

html.js:not(.mo-late) .rv:not(.in):not(.mod){opacity:0;transform:translateY(14px)}
html.js:not(.mo-late) .mod.rv:not(.in)>*{opacity:0;transform:translateY(12px)}
.mod.rv>*{transition:opacity .6s var(--e-out),transform .6s var(--e-out);transition-delay:calc(var(--i,0) * 80ms + 60ms)}
.mod.rv{transition:none}
.rv{transition:opacity .6s var(--e-out),transform .6s var(--e-out);transition-delay:calc(var(--i,0) * 70ms + var(--rd,0ms))}
.btn.rv{transition:opacity .6s var(--e-out),transform .6s var(--e-out),background-color var(--d-2) var(--e-snap)}

html.js:not(.mo-late) [data-decode]:not(.dc-run):not(.dc-done){opacity:0}
[data-decode].dc-run{opacity:1}

/* images: a top-down scan reveal */
html.js:not(.mo-late) .shot:not(.in) .shot-img img{clip-path:inset(0 0 100% 0)}
.shot-img img{transition:clip-path .9s var(--e-io),filter var(--d-4),transform var(--d-5) var(--e-out)}
.shot.in .shot-img img{clip-path:inset(0 0 0 0)}
/* field reports, once, when a sheet enters (never scroll-linked): its rules draw, the print drops onto the sheet,
   the clip snaps on */
html.js:not(.mo-late) .report:not(.in)::before{transform:scaleX(0)}
html.js:not(.mo-late) .report:not(.in) .meta>div{background-size:0 1px}
html.js:not(.mo-late) .report:not(.in) .ph{opacity:0;transform:translateY(-14px) scale(1.012)}
.report::before{transition:transform .45s var(--e-io)}
.report.in .meta>div:nth-child(2){transition-delay:70ms}
.report.in .meta>div:nth-child(3){transition-delay:140ms}
.shot:nth-child(2){--sd:120ms}
.shot.in .shot-img img{transition-delay:var(--sd,0ms),0s,0s}

/* diff: consultant lines appear, then get struck; lab lines apply with a + gutter */
.diff li{transition:opacity .28s var(--e-snap),transform .28s var(--e-snap);transition-delay:calc(var(--i) * 80ms)}
.us li{transition-delay:calc(1150ms + var(--i) * 90ms)}
html.js:not(.mo-late) .diff:not(.in) li{opacity:0;transform:translateX(-8px)}
html.js:not(.mo-late) .diff:not(.in) .them .st{background-size:0% 1px;color:var(--ink-2)}
.diff.in .us li{animation:applied 1.4s var(--e-out) both;animation-delay:calc(1150ms + var(--i) * 90ms)}
@keyframes applied{from{background-color:var(--add-2)}to{background-color:var(--add)}}

/* modules and traces */
html.js:not(.mo-late) .tenet:not(.in) .trace path:not(.dash){stroke-dashoffset:2}
html.js:not(.mo-late) .mod.rv:not(.in){--cl:0px}

/* pipeline rows slide in */
html.js:not(.mo-late) .br:not(.in)>*{opacity:0;transform:translateX(-12px)}
.br>*{transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.br>h3{transition-delay:60ms}.br>p{transition-delay:120ms}

/* console card: rows print like a log */
html.js:not(.mo-late) .card[data-log]:not(.in) :is(.row,.ft){opacity:0}
.card[data-log] :is(.row,.ft){transition:opacity .01s steps(1)}
.card[data-log].in .row:nth-of-type(2){transition-delay:260ms}
.card[data-log].in .row:nth-of-type(3){transition-delay:520ms}
.card[data-log].in .row:nth-of-type(4){transition-delay:780ms}
.card[data-log].in .row:nth-of-type(5){transition-delay:1040ms}
.card[data-log].in .ft{transition-delay:1360ms}
.card[data-log].in .row::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);opacity:0;animation:rowmark .5s steps(2,jump-none) both;animation-delay:inherit}
.card[data-log].in .row:nth-of-type(2)::after{animation-delay:260ms}
.card[data-log].in .row:nth-of-type(3)::after{animation-delay:520ms}
.card[data-log].in .row:nth-of-type(4)::after{animation-delay:780ms}
.card[data-log].in .row:nth-of-type(5)::after{animation-delay:1040ms}
@keyframes rowmark{0%,99%{opacity:1}100%{opacity:0}}

/* failsafe: if motion.js never takes over, show everything after 2.6s */
@keyframes fs-o{to{opacity:1;transform:none}}
@keyframes fs-c{to{clip-path:none}}
@keyframes fs-bg{to{background-size:100% 1px}}
@keyframes fs-d{to{stroke-dashoffset:0}}
html.js:not(.mo):not(.mo-late) :is(.rv:not(.mod),.mod.rv>*,[data-decode],.diff li,.br>*,.card[data-log] .row,.card[data-log] .ft){animation:fs-o .01s 2.6s forwards}
html.js:not(.mo):not(.mo-late) :is(.wipe,.shot-img img){animation:fs-c .01s 2.6s forwards}
html.js:not(.mo):not(.mo-late) .report::before,html.js:not(.mo):not(.mo-late) .report .ph{animation:fs-o .01s 2.6s forwards}
html.js:not(.mo):not(.mo-late) .report .meta>div{animation:fs-bg .01s 2.6s forwards}
html.js:not(.mo):not(.mo-late) .them .st{animation:fs-bg .01s 2.6s forwards}
html.js:not(.mo):not(.mo-late) .trace path{animation:fs-d .01s 2.6s forwards}

/* view-transition theme switch: a circle grows from the toggle (motion.js drives it) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}
/* fallback crossfade (no View Transitions): colours only, and never on elements that may be mid-reveal */
html.theming,html.theming :not(.rv,.mod.rv>*,.hin,.wipe,.load-wipe,.diff li,.br>*,.card[data-log] .row,.card[data-log] .ft,.ph,.clip,.shot-img img,.rfig img,.pip img){transition:background-color .3s ease,color .3s ease,border-color .3s ease,fill .3s ease!important}

/* ---------- reduced motion (and print): everything visible, nothing moves on its own ---------- */
@media (prefers-reduced-motion:reduce),print{
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  html.js .rv,html.js .mod.rv>*,html.js .hin,html.js [data-decode],html.js .diff li,html.js .br>*,html.js .card[data-log] .row,html.js .card[data-log] .ft{opacity:1!important;transform:none!important}
  html.js .wipe,html.js .load-wipe,html.js .shot-img img,html.js .rfig img{clip-path:none!important}
  html.js .report .ph,html.js .report .clip,html.js .report::before{opacity:1!important;transform:none!important}
  html.js .report .meta>div{background-size:100% 1px!important}
  html.js .them .st{background-size:100% 1px!important}
  html.js .trace path{stroke-dashoffset:0!important}
  .wipe .scanl,html.js .load-wipe::after{display:none}
  .led,.dot,.card .ft::after{animation:none!important}
  .shot:hover img,.vid:hover .thumb img{transform:none}
}

/* ==========================================================================
   Case study page (work/horizoonx.html)
   ========================================================================== */
.article .rhead>.frame{padding:clamp(48px,8vh,96px) var(--pad) clamp(40px,6vh,72px)}
.crumb{color:var(--faint)}
/* "Work" starts on the heading's left edge and keeps the crumb's even spacing; its 44px-wide target is an overhang */
.crumb a{color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;position:relative}
.crumb a::after{content:"";position:absolute;top:0;bottom:0;left:-8px;right:-8px}
.crumb a:hover{color:var(--ink)}
.rhead-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:clamp(28px,5vw,80px);align-items:end;margin-top:clamp(12px,2vh,20px)}
.article h1{font-size:clamp(2.7rem,1.3rem + 4.2vw,5.8rem);line-height:.98;letter-spacing:-.018em;width:fit-content;max-width:100%;text-wrap:balance}
.plate{border:1px solid var(--line-2);background:var(--panel);position:relative}
.facts>div{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:13px 16px;border-bottom:1px solid var(--hair)}
.facts>div:last-child{border-bottom:0}
.facts dt{font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.facts dd{font:500 12px/1.5 var(--mono);letter-spacing:.03em;color:var(--ink-2)}
.rbody>.frame{padding:clamp(56px,9vh,112px) var(--pad)}
.rgrid{display:grid;grid-template-columns:minmax(180px,250px) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:start}
.toc{position:sticky;top:calc(var(--nav-h) + 36px);border:1px solid var(--line);background:var(--panel)}
.toc-bar{display:flex;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-variant-numeric:tabular-nums}
.toc-bar b{font-weight:500;color:var(--ink)}
.toc ol{padding:6px 0}
.toc a{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:baseline;padding:9px 14px;font:500 11px/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color var(--d-2)}
.toc a::before{content:"";width:6px;height:6px;border:1px solid var(--line-2);transform:translateY(-1px);transition:background-color var(--d-2),border-color var(--d-2),box-shadow var(--d-2)}
.toc a:hover{color:var(--ink)}
.toc a[aria-current="true"]{color:var(--ink)}
.toc a[aria-current="true"]::before{background:var(--led);border-color:var(--led);box-shadow:0 0 8px var(--led-glow)}
.toc-prog{height:2px;background:var(--line);position:relative}
.toc-prog i{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.rmain{min-width:0}
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.8rem,1.3rem + 1.4vw,2.6rem);line-height:1.08;letter-spacing:-.01em;margin:clamp(48px,7vh,80px) 0 18px;width:fit-content;max-width:100%;scroll-margin-top:16px}
.prose h2:first-child{margin-top:0}
.rmain>.prose:not(:first-child)>h2:first-child{margin-top:clamp(48px,7vh,80px)}
.prose .h2n{display:block;font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--accent);margin-bottom:14px}
.prose p{color:var(--dim);font-size:clamp(1.04rem,1rem + .2vw,1.14rem);line-height:1.75;margin-bottom:18px;text-wrap:pretty}
.prose p:first-of-type{color:var(--ink-2)}
.ucboard{margin-top:clamp(40px,6vh,64px);border:1px solid var(--line);background:var(--panel)}
.ucboard .bh{grid-template-columns:92px minmax(0,1fr) minmax(0,1.5fr);padding:13px 20px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.ucboard .bh span:first-child{grid-column:1}
.ucboard .bh span:last-child{display:block}
.uc{display:grid;grid-template-columns:92px minmax(0,1fr) minmax(0,1.5fr);gap:8px 20px;padding:22px 20px;border-bottom:1px solid var(--hair);align-items:baseline;position:relative;transition:background-color var(--d-2)}
.uc:last-child{border-bottom:0}
.uc:hover{background:var(--panel-2)}
.uc .wk{color:var(--accent);display:flex;align-items:center;gap:10px}
.uc .wk::before{content:"";width:6px;height:6px;border:1px solid var(--line-2);transition:background-color var(--d-2),box-shadow var(--d-2),border-color var(--d-2)}
.uc:hover .wk::before,.uc.in .wk::before{background:var(--led);border-color:var(--led);box-shadow:0 0 8px var(--led-glow)}
.uc h3{font-size:clamp(1.3rem,1.1rem + .5vw,1.6rem);line-height:1.15}
.uc p{color:var(--dim);font-size:.97rem;line-height:1.65}
.stays{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px 20px;border:1px solid var(--line);border-top:0;background:var(--bg-2);font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.stays .k{margin-right:6px}
.stays>span:not(.k){display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line-2);color:var(--accent)}
.stays>span:not(.k)::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--led);box-shadow:0 0 6px var(--led-glow)}
.rfigs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:clamp(36px,6vh,60px) 0}
.rfig{margin:0;background:var(--panel);display:flex;flex-direction:column;position:relative}
.rfig .shot-bar{border-bottom:1px solid var(--line)}
.rfig .fimg{display:block;overflow:hidden}
/* images take their ratio from their width/height attributes, so a lazy image holds its height before it loads and
   the page never grows under a contents jump; only the plain two-up row crops to 16:10 */
.rfig img{width:100%;height:auto;object-fit:cover;object-position:50% 0;filter:var(--img-filter)}
.rfig figcaption{padding:13px 14px 16px;font:500 11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);border-top:1px solid var(--line)}
.rfig.wide{border:1px solid var(--line);margin:clamp(36px,6vh,60px) 0;max-width:820px}
.rfigs:not(.natural) .rfig img{aspect-ratio:16/10}
/* a wide figure stacked straight on a figure row spans the column, so the three modules share one right edge */
.rfig.wide:has(+ .rfigs){max-width:none}
html.js:not(.mo-late) .rfig:not(.in) img{clip-path:inset(0 0 100% 0)}
.rfig img{transition:clip-path .9s var(--e-io),filter var(--d-4)}
.rfig.in img{clip-path:inset(0 0 0 0)}
.rfig:hover img{filter:none}
html.js:not(.mo):not(.mo-late) .rfig img{animation:fs-c .01s 2.6s forwards}
.outcome .card{order:2}
.outcome .copy .rv{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.outcome h2{font-size:clamp(2.4rem,1.3rem + 3.4vw,4.6rem);line-height:.98;letter-spacing:-.015em;width:fit-content;max-width:100%}
.outcome .back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:18px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.outcome .back:hover{color:var(--ink)}
@media (max-width:1000px){.rhead-grid{grid-template-columns:1fr}.plate{max-width:560px}.rgrid{grid-template-columns:1fr}.toc{position:static;max-width:560px}.toc a{min-height:44px;align-content:center}}
@media (max-width:760px){.ucboard .bh{display:none}.uc{grid-template-columns:1fr}.rfigs{grid-template-columns:1fr}}
@media (max-width:520px){.facts>div{grid-template-columns:1fr;gap:4px}.outcome .back{margin-left:0}}
/* ==========================================================================
   404 page (404.html): the hero's chassis and a still contour frame of the surface, the marker off the map.
   No field.js here: the figure is an inline SVG, so it is the same with or without JS and with reduced motion.
   ========================================================================== */
.nf .hero-grid{min-height:calc(100svh - var(--nav-h) - 43px - 77px)}
/* two lines, like the homepage hero: "This page didn't" / "make the cut.", sized so the first line never wraps */
.nf h1{font-size:clamp(2.5rem,6vw - 8px,5rem)}
.nf h1 em{display:block}
@media (max-width:820px),(max-width:1100px) and (max-aspect-ratio:5/6){.nf h1{font-size:min(11.4vw,4.4rem)}}
.nf .eyebrow{color:var(--accent);margin-bottom:clamp(16px,2.6vh,26px)}
.nf .sub{max-width:46ch}
.nf-err{color:var(--ink-2)}
/* the figure: a framed screen with a bar, beside the copy (a hairline between them) or under it */
.nf .hero-copy{border-right:1px solid var(--line)}
.nf-fig{position:relative;display:grid;grid-template-rows:auto 1fr;min-width:0}
.nf .field-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.nf .screen{position:relative;overflow:hidden;min-height:320px;background:
  linear-gradient(var(--fx-axis),var(--fx-axis)) 50% 0/1px 100% no-repeat,
  linear-gradient(var(--fx-axis),var(--fx-axis)) 0 50%/100% 1px no-repeat,
  linear-gradient(90deg,var(--fx-grat) 1px,transparent 1px) 50% 50%/64px 64px,
  linear-gradient(var(--fx-grat) 1px,transparent 1px) 50% 50%/64px 64px,var(--screen)}
.nf-state{display:flex;align-items:center;gap:9px;color:var(--ink-2)}
.nf-state .led{animation:pulse 2.4s ease-in-out infinite}
.nf-map{position:absolute;inset:0;width:100%;height:100%;fill:none}
.nf-map :is(ellipse,path,circle){vector-effect:non-scaling-stroke}
.nf-rings{stroke:var(--fx-2);opacity:.8}
.nf-rings .tr{stroke:var(--fx-3);stroke-dasharray:2 5}
.nf-min,.nf-base{stroke:var(--fx-3)}
.nf-trail{stroke:var(--fx-3);stroke-dasharray:3 4;opacity:.85}
.nf-stem{stroke:var(--fx-3);stroke-dasharray:2 3;opacity:.7}
.nf-halo{stroke:var(--accent);opacity:.6}
.nf-ball{fill:var(--accent-2)}
.nf-tag{fill:var(--dim);font:500 10px/1 var(--mono);letter-spacing:.14em}
.nf-foot .foot-bottom{border-top:0}
@media (max-width:820px),(max-width:1100px) and (max-aspect-ratio:5/6){.nf .hero-copy{border-right:0;border-bottom:1px solid var(--line)}.nf .screen{aspect-ratio:4/3;min-height:0}}
@media print{.nav,.ruler,.menu,.skip,canvas{display:none!important}body::before{display:none}.console,.pipe-side,.toc{position:static!important;min-height:0!important}.console{border:0}}
/* ==========================================================================
   case pages: La Boussole, Instameals (work/la-boussole.html, work/instameals.html)
   Selectors those two pages use (HorizoonX shares .crumb .pair); the homepage and the 404 have none of them.
   ========================================================================== */
/* a figure row that keeps each image's own ratio: columns are sized by the ratios (--fa, --fb as fr), so both
   images share one height and nothing is cropped (the courses strip keeps all four courses) */
.rfigs.natural{grid-template-columns:minmax(0,var(--fa,1fr)) minmax(0,var(--fb,1fr))}
@media (max-width:900px){.rfigs.natural{grid-template-columns:1fr}}
/* a prose paragraph straight after a use-case board */
.ucboard+.prose{margin-top:clamp(36px,5.5vh,56px)}
/* an ordered list in the prose: mono index and an LED per item, on hairline rules; lights when it enters */
.prose ol.moments{counter-reset:m;margin:6px 0 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.moments>li{counter-increment:m;display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:baseline;padding:13px 4px;border-bottom:1px solid var(--hair);color:var(--ink-2);font-size:clamp(1.04rem,1rem + .2vw,1.14rem);line-height:1.6}
.moments>li:last-child{border-bottom:0}
.moments>li::before{content:counter(m,decimal-leading-zero);padding-left:16px;font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--accent);
  background:linear-gradient(var(--line-2),var(--line-2)) 0 50%/6px 6px no-repeat;transition:background-image var(--d-2)}
.moments.in>li::before{background-image:linear-gradient(var(--led),var(--led))}
/* breadcrumb: the client pair never breaks, so a phone never ends the line on a lone "Datadom" */
.crumb .pair{white-space:nowrap}
/* phones: tighter tracking keeps all three crumbs on one line down to 360px */
@media (max-width:420px){.crumb{letter-spacing:.06em}}