/* GT Digital — design system.
   Tokens first, then base, layout, components, pages. No framework, no build step.
   Colour rule: the ground is near-black, the voice is off-white, and acid green is a signal —
   it marks what is live, current or next. It is never decoration. */

/* ---------- Fonts (self-hosted, SIL OFL, latin subset) ---------- */
@font-face{font-family:"Schibsted Grotesk";src:url("/assets/fonts/schibsted-grotesk.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/jetbrains-mono.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/assets/fonts/newsreader.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  color-scheme:dark;

  /* ground and voice */
  --c-ground:#0B0C0E;
  --c-raised:#121418;
  --c-sunken:#08090B;
  --c-rule:#262A31;
  --c-rule-strong:#3A3F47;
  --c-text:#EDEDE8;
  --c-soft:#C9CCD1;
  --c-muted:#9EA3AB;

  /* signal */
  --c-signal:#B7FF43;
  --c-signal-hover:#CBFF7A;
  --c-signal-ink:#0B0C0E;
  --c-signal-dim:#4A5C35;

  /* reading surface */
  --c-paper:#F2F1EC;
  --c-paper-raised:#E7E5DE;
  --c-paper-text:#121316;
  --c-paper-soft:#33363C;
  --c-paper-muted:#55585F;
  --c-paper-rule:#CFCCC3;

  /* type */
  --f-sans:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-xs:.75rem;
  --t-sm:.875rem;
  --t-base:1.0625rem;
  --t-md:1.1875rem;
  --t-lg:clamp(1.1875rem,1.05rem + .55vw,1.5rem);
  --t-xl:clamp(1.5rem,1.15rem + 1.5vw,2.25rem);
  --t-2xl:clamp(2rem,1.25rem + 3.1vw,3.75rem);
  --t-display:clamp(2.75rem,1.35rem + 5.6vw,6.5rem);

  /* space */
  --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;
  --gutter:clamp(20px,5vw,64px);
  --gap:clamp(16px,2vw,24px);
  --max:1320px;
  --measure:38rem;
  --header-h:72px;
  --section-y:clamp(72px,10vw,144px);

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --d-fast:150ms;
  --d-med:300ms;
  --d-slow:600ms;

  /* icons (masks, so they take currentColor) */
  --i-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h12.2M8.6 3.4 13.2 8l-4.6 4.6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  --i-out:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12 4M5.5 4H12v6.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  --i-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v12.2M3.4 8.6 8 13.2l4.6-4.6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--c-ground);color:var(--c-text);font:400 var(--t-base)/1.6 var(--f-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-synthesis:none}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{margin:0;font-weight:600;text-wrap:balance}
p{margin:0}
p+p{margin-top:1em}
ul,ol{margin:0;padding:0}
a{color:inherit}
strong,b{font-weight:600;color:var(--c-text)}
::selection{background:var(--c-signal);color:var(--c-signal-ink)}
:focus-visible{outline:2px solid var(--c-signal);outline-offset:3px;border-radius:1px}
[hidden]{display:none!important}

@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--d-med)}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s-4);top:-100px;z-index:100;background:var(--c-signal);color:var(--c-signal-ink);padding:var(--s-3) var(--s-4);font-weight:600;text-decoration:none}
.skip:focus{top:var(--s-4)}

/* ---------- Layout ---------- */
.container{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);border-top:1px solid var(--c-rule)}
.section--flush{border-top:0}
.section--tight{padding-block:clamp(56px,7vw,96px)}

/* margin-note layout: a narrow column for labels, a wide one for content */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--s-5)}
.split-aside{grid-column:1/4}
.split-main{grid-column:4/13}
.split-main--narrow{grid-column:4/11}
@media(max-width:899px){
  .split-aside,.split-main,.split-main--narrow{grid-column:1/-1}
}

.stack>*+*{margin-top:var(--s-5)}

/* ---------- Type roles ---------- */
.overline{font:500 var(--t-xs)/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
.overline b{font-weight:500;color:var(--c-text)}
.display{font-size:var(--t-display);line-height:.98;letter-spacing:-.035em;font-weight:600}
.h2{font-size:var(--t-2xl);line-height:1.03;letter-spacing:-.03em}
.h3{font-size:var(--t-xl);line-height:1.12;letter-spacing:-.02em}
.h4{font-size:var(--t-lg);line-height:1.25;letter-spacing:-.01em}
.intro{font-size:var(--t-lg);line-height:1.5;color:var(--c-soft);max-width:var(--measure)}
.body{color:var(--c-soft);max-width:var(--measure)}
.note{font:400 var(--t-xs)/1.55 var(--f-mono);color:var(--c-muted);letter-spacing:.01em}
.serif{font-family:var(--f-serif)}

/* the one signal word: dashed underline, echoing the "next" segment of the rail */
.next{text-decoration:underline dashed var(--c-signal);text-decoration-thickness:max(2px,.055em);text-underline-offset:.14em}
mark,.hl{background:none;color:var(--c-signal)}

.prose a,.link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--c-rule-strong);transition:text-decoration-color var(--d-fast),color var(--d-fast)}
.prose a:hover,.link:hover{text-decoration-color:var(--c-signal);text-decoration-thickness:2px}

/* ---------- Icons ---------- */
.i{display:inline-block;flex:none;width:1em;height:1em;background:currentColor;-webkit-mask:var(--i-arrow) center/contain no-repeat;mask:var(--i-arrow) center/contain no-repeat;transition:transform var(--d-fast) var(--ease)}
.i--out{-webkit-mask-image:var(--i-out);mask-image:var(--i-out)}
.i--down{-webkit-mask-image:var(--i-down);mask-image:var(--i-down)}

/* ---------- Buttons ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.65em;min-height:48px;padding:.75em 1.2em;border:1px solid transparent;border-radius:2px;font:600 .9375rem/1.1 var(--f-sans);letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:background-color var(--d-fast),border-color var(--d-fast),color var(--d-fast)}
.button:hover .i{transform:translateX(3px)}
.button:hover .i--down{transform:translateY(2px)}
.button:hover .i--out{transform:translate(2px,-2px)}
.button--primary{background:var(--c-signal);color:var(--c-signal-ink)}
.button--primary:hover{background:var(--c-signal-hover)}
.button--primary:active{background:#A4EB34}
.button--ghost{border-color:var(--c-rule-strong);color:var(--c-text)}
.button--ghost:hover{border-color:var(--c-text)}
.button--sm{min-height:40px;padding:.55em .9em;font-size:.875rem}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}

/* text link with arrow */
.go{display:inline-flex;align-items:center;gap:.5em;font-weight:600;text-decoration:none;border-bottom:1px solid var(--c-rule-strong);padding-bottom:.15em;transition:border-color var(--d-fast)}
.go:hover{border-color:var(--c-signal)}
.go:hover .i{transform:translateX(3px)}
.go:hover .i--out{transform:translate(2px,-2px)}

/* ---------- Header & navigation ---------- */
/* the blur lives on ::before: a backdrop-filter on the header itself would become the containing
   block for the fixed mobile menu and trap it inside the 72px bar */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:border-color var(--d-med)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,12,14,.9);-webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px)}
.site-header.is-scrolled{border-bottom-color:var(--c-rule)}
.site-header-in{display:flex;align-items:center;gap:var(--s-5);height:var(--header-h)}

.wordmark{display:inline-flex;align-items:baseline;gap:.6em;text-decoration:none;white-space:nowrap;line-height:1}
.wordmark-mark{font-size:1.25rem;font-weight:800;letter-spacing:-.03em}
.wordmark-mark span{font-weight:400}
.wordmark-who{font:400 .75rem/1 var(--f-mono);color:var(--c-muted);letter-spacing:.02em}

.site-nav{margin-left:auto;display:flex;align-items:center;gap:var(--s-6)}
.site-nav ul{list-style:none;display:flex;gap:var(--s-5)}
.site-nav-link{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;font-weight:500;color:var(--c-soft);text-decoration:none;transition:color var(--d-fast)}
.site-nav-link::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--c-signal);transform:scaleX(0);transform-origin:left;transition:transform var(--d-med) var(--ease)}
.site-nav-link:hover{color:var(--c-text)}
.site-nav-link[aria-current]{color:var(--c-text)}
.site-nav-link[aria-current]::after,.site-nav-link:hover::after{transform:scaleX(1)}
.site-nav-num{display:none}
.site-nav-foot{display:none}
.nav-toggle,.nav-close{display:none}

@media(max-width:899px){
  .wordmark-who{display:none}
  .nav-toggle{display:inline-flex;align-items:center;gap:.6em;margin-left:auto;min-height:44px;padding:0 .2em;font:500 .8125rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-text);text-decoration:none;background:none;border:0;cursor:pointer}
  .nav-toggle::before{content:"";width:18px;height:7px;border-block:1.5px solid currentColor}
  .site-nav{position:fixed;inset:0;z-index:60;margin:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:0 var(--gutter) var(--s-6);background:var(--c-ground);overflow-y:auto}
  .site-nav:target,.menu-open .site-nav{display:flex}
  .nav-close{display:flex;align-items:center;justify-content:flex-end;height:var(--header-h);font:500 .8125rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-text);text-decoration:none;flex:none}
  .site-nav ul{flex-direction:column;gap:0;border-top:1px solid var(--c-rule)}
  .site-nav li{border-bottom:1px solid var(--c-rule)}
  .site-nav-link{display:flex;align-items:baseline;gap:var(--s-4);min-height:0;padding:var(--s-5) 0;font-size:var(--t-2xl);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--c-text)}
  .site-nav-link::after{display:none}
  .site-nav-link[aria-current] .site-nav-label{text-decoration:underline;text-decoration-color:var(--c-signal);text-decoration-thickness:3px;text-underline-offset:.15em}
  .site-nav-num{display:inline;font:500 var(--t-xs)/1 var(--f-mono);color:var(--c-muted);letter-spacing:.06em;transform:translateY(-.9em)}
  .site-nav .button{margin-top:var(--s-6);align-self:flex-start}
  .site-nav-foot{display:block;margin-top:auto;padding-top:var(--s-7);color:var(--c-muted);font-size:var(--t-sm)}
  .site-nav-foot a{color:var(--c-text)}
  .menu-open,.menu-open body{overflow:hidden}
}

/* ---------- Masthead (page heroes) ---------- */
.masthead{padding-block:clamp(48px,8vw,112px) clamp(48px,6vw,88px)}
.masthead .overline{margin-bottom:var(--s-5)}
.masthead .intro{margin-top:var(--s-6)}
.masthead-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}
.masthead-text{grid-column:1/9}
.masthead-figure{grid-column:10/13;margin:0}
.masthead--page .display{font-size:clamp(2.5rem,1.4rem + 4.4vw,5.25rem);max-width:15ch}
.masthead--home .masthead-grid{align-items:start}
.masthead-head{grid-column:1/-1}
.masthead--home .display{font-size:clamp(2.75rem,.9rem + 5.25vw,5.75rem)}
.masthead--home .masthead-text{grid-column:1/8;margin-top:var(--s-7)}
.masthead--home .masthead-text .intro{margin-top:0}
.masthead--home .masthead-figure{grid-column:9/13;margin-top:var(--s-7);max-width:340px;justify-self:end;width:100%}
.masthead--page .masthead-text{grid-column:1/11}
.display .line{display:block}
@media(max-width:899px){
  .masthead-text,.masthead--page .masthead-text,.masthead--home .masthead-text{grid-column:1/-1}
  .masthead-figure,.masthead--home .masthead-figure{grid-column:1/-1;margin-top:var(--s-7);max-width:240px;justify-self:start}
}

/* type rises once on load; pure CSS, so it also completes without JavaScript */
@keyframes rise{from{opacity:0;transform:translateY(.28em)}to{opacity:1;transform:none}}
.masthead .line{animation:rise var(--d-slow) var(--ease) both;animation-delay:60ms}
.masthead .line+.line{animation-delay:160ms}

.portrait{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--c-raised)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.04)}
.portrait-cap{display:flex;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-3)}
.portrait-empty{display:flex;align-items:flex-end;padding:var(--s-4);border:1px dashed var(--c-rule-strong)}

/* ---------- Timeline rail ---------- */
.rail-wrap{margin-top:clamp(56px,8vw,112px)}
.rail-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);margin-bottom:var(--s-5)}
.rail{list-style:none;display:flex}
.rail-stop{--line:var(--c-rule-strong);position:relative;flex:var(--span,1) 1 0;min-width:7rem;padding:var(--s-6) var(--s-4) 0 0}
.rail-stop::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line);transform-origin:left center}
.rail-stop::after{content:"";position:absolute;left:0;top:4px;width:1px;height:11px;background:var(--c-muted)}
.rail-stop--now{--line:var(--c-signal)}
.rail-stop--now::before{height:2px;top:8.5px}
.rail-stop--now .rail-now{position:absolute;right:-5px;top:4px;width:11px;height:11px;border-radius:50%;background:var(--c-signal)}
.rail-stop--next::before{background:repeating-linear-gradient(90deg,var(--c-signal) 0 6px,transparent 6px 12px);height:2px;top:8.5px}
.rail-stop--next::after{left:auto;right:0;top:3px;width:13px;height:13px;border-radius:50%;background:var(--c-ground);border:1.5px solid var(--c-signal)}
.rail-year{display:block;font:500 var(--t-xs)/1 var(--f-mono);letter-spacing:.06em;color:var(--c-muted)}
.rail-stop--now .rail-year,.rail-stop--next .rail-year{color:var(--c-signal)}
.rail-title{display:block;margin-top:var(--s-3);font-size:1rem;font-weight:600;line-height:1.25;color:var(--c-text)}
.rail-houses{display:block;margin-top:var(--s-1);font-size:var(--t-sm);line-height:1.4;color:var(--c-muted)}
a.rail-title{text-decoration:none}
a.rail-title:hover{text-decoration:underline;text-decoration-color:var(--c-signal);text-underline-offset:.2em}
.rail-stop.is-current .rail-title{text-decoration:underline;text-decoration-color:var(--c-signal);text-decoration-thickness:2px;text-underline-offset:.2em}

/* drawn once when it enters the viewport (only when JS has prepared it) */
.reveal-ready .rail:not(.is-drawn) .rail-stop::before{transform:scaleX(0)}
.rail-stop::before{transition:transform 700ms var(--ease);transition-delay:calc(var(--i,0)*110ms)}

@media(max-width:899px){
  .rail{flex-direction:column}
  .rail-stop{padding:0 0 var(--s-5) var(--s-6)}
  .rail-stop::before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto;transform-origin:center top}
  .rail-stop::after{left:0;top:3px;width:11px;height:1px}
  .rail-stop--now::before,.rail-stop--next::before{width:2px;height:auto;top:0;left:4.5px}
  .rail-stop--now .rail-now{right:auto;left:0;top:auto;bottom:-5px}
  .rail-stop--next::before{background:repeating-linear-gradient(180deg,var(--c-signal) 0 6px,transparent 6px 12px);bottom:18px}
  .rail-stop--next::after{right:auto;left:-1px;top:auto;bottom:0}
  .rail-stop--next{padding-bottom:var(--s-6)}
  .rail-title{margin-top:var(--s-2)}
  .reveal-ready .rail:not(.is-drawn) .rail-stop::before{transform:scaleY(0)}
}

/* ---------- Proof figures ---------- */
.proofs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--s-7);list-style:none}
.proof{border-top:1px solid var(--c-rule-strong);padding-top:var(--s-5)}
.proof-value{display:block;font-size:var(--t-2xl);font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums;color:var(--c-text)}
.proof-label{display:block;margin-top:var(--s-4);color:var(--c-soft);max-width:22em}
.proof .note{display:block;margin-top:var(--s-3)}
@media(max-width:1099px){.proofs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599px){.proofs{grid-template-columns:1fr}}

/* ---------- Ledger (rows instead of cards) ---------- */
.ledger{list-style:none;border-top:1px solid var(--c-rule)}
.ledger>li{border-bottom:1px solid var(--c-rule)}
.ledger-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr) auto;column-gap:var(--gap);align-items:baseline;padding:var(--s-6) 0;text-decoration:none;transition:background-color var(--d-med)}
a.ledger-row:hover{background:var(--c-raised)}
a.ledger-row:hover .ledger-title{color:var(--c-signal)}
a.ledger-row:hover .i{transform:translateX(4px)}
.ledger-meta{display:flex;flex-direction:column;gap:var(--s-2)}
.ledger-title{display:block;font-size:var(--t-xl);font-weight:600;line-height:1.1;letter-spacing:-.02em;transition:color var(--d-fast)}
.ledger-text{display:block;margin-top:var(--s-3);color:var(--c-soft);max-width:var(--measure)}
.ledger-row .i{font-size:1.5rem;color:var(--c-muted);align-self:center}
@media(min-width:900px){a.ledger-row{padding-inline:var(--s-4);margin-inline:calc(-1*var(--s-4))}}
@media(max-width:899px){
  .ledger-row{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s-3)}
  .ledger-meta{grid-column:1/-1;flex-direction:row;gap:var(--s-4)}
}

/* ---------- Status tags ---------- */
.tag{display:inline-flex;align-items:center;gap:.55em;width:max-content;padding:.4em .65em;border:1px solid var(--c-rule-strong);border-radius:2px;font:500 .6875rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-soft);white-space:nowrap}
.tag::before{content:"";width:.6em;height:.6em;border-radius:50%;border:1px solid currentColor;flex:none}
.tag--plain::before{display:none}
.tag--live{color:var(--c-signal);border-color:var(--c-signal-dim)}
.tag--live::before{background:currentColor}
.tag--dev::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.tag--open::before{border-style:dashed}
.tag--firm::before{background:currentColor}

/* ---------- Brands ---------- */
.brands{list-style:none;display:flex;flex-wrap:wrap;column-gap:.55em;row-gap:.15em;font-size:var(--t-xl);font-weight:500;line-height:1.3;letter-spacing:-.02em;color:var(--c-text)}
.brands li:not(:last-child)::after{content:"/";margin-left:.55em;color:var(--c-rule-strong);font-weight:400}

/* ---------- Pipeline (workflow as a column of steps) ---------- */
.pipeline{list-style:none;counter-reset:step;border-left:1px solid var(--c-rule-strong)}
.pipeline li{counter-increment:step;position:relative;display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) 0 var(--s-3) var(--s-5);color:var(--c-soft)}
.pipeline li::before{content:counter(step,decimal-leading-zero);position:absolute;left:-4px;top:50%;transform:translate(-100%,-50%);padding-right:var(--s-3);font:500 var(--t-xs)/1 var(--f-mono);color:var(--c-muted)}
.pipeline li::after{content:"";position:absolute;left:-3.5px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--c-rule-strong)}
.pipeline .is-human{color:var(--c-text);font-weight:600}
.pipeline .is-human::after{background:var(--c-signal);width:10px;height:10px;left:-5.5px;margin-top:-5px}
.pipeline .note{align-self:center}
.pipeline-wrap{padding-left:3rem}

/* ---------- Quote ---------- */
.pull{font-family:var(--f-serif);font-size:var(--t-2xl);font-weight:400;line-height:1.12;letter-spacing:-.015em;max-width:20ch}
.pull-by{margin-top:var(--s-5)}

/* ---------- Paper (reading surface) ---------- */
.on-paper{background:var(--c-paper);color:var(--c-paper-text);border-top-color:var(--c-paper-rule)}
.on-paper ::selection{background:var(--c-paper-text);color:var(--c-paper)}
.on-paper :focus-visible{outline-color:var(--c-paper-text)}
.on-paper strong,.on-paper b{color:var(--c-paper-text)}
.on-paper .overline,.on-paper .note{color:var(--c-paper-muted)}
.on-paper .overline b{color:var(--c-paper-text)}
.on-paper .intro,.on-paper .body,.on-paper .ledger-text,.on-paper .proof-label{color:var(--c-paper-soft)}
.on-paper .next{text-decoration-color:var(--c-paper-text)}
.on-paper mark,.on-paper .hl{background:var(--c-signal);color:var(--c-paper-text);padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.on-paper .button--primary{background:var(--c-paper-text);color:var(--c-paper)}
.on-paper .button--primary:hover{background:#2A2D33}
.on-paper .button--ghost{border-color:var(--c-paper-rule);color:var(--c-paper-text)}
.on-paper .button--ghost:hover{border-color:var(--c-paper-text)}
.on-paper .go{border-color:var(--c-paper-rule)}
.on-paper .go:hover{border-color:var(--c-paper-text)}
.on-paper .prose a,.on-paper .link{text-decoration-color:var(--c-paper-rule)}
.on-paper .prose a:hover,.on-paper .link:hover{text-decoration-color:var(--c-paper-text)}
.on-paper .ledger,.on-paper .ledger>li,.on-paper .proof{border-color:var(--c-paper-rule)}
.on-paper .tag{border-color:var(--c-paper-rule);color:var(--c-paper-soft)}
.on-paper .tag--live{color:var(--c-paper-text);border-color:var(--c-paper-text)}
.on-paper .tag--live::before{background:var(--c-signal);border-color:var(--c-paper-text)}
.on-paper.section,.on-paper .section{border-top-color:var(--c-paper-rule)}
.on-paper .pager{border-top-color:var(--c-paper-rule)}
.on-paper .pager-title small{color:var(--c-paper-soft)}
.on-paper .pager .i{color:var(--c-paper-muted)}
.on-paper .pager:hover .pager-title,.on-paper .pager:hover .i{color:var(--c-paper-text)}
.on-paper .pager:hover .pager-title{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--c-signal);text-underline-offset:.12em}
.on-paper .masthead .overline b{color:var(--c-paper-text)}
.paper-wrap{background:var(--c-paper);color:var(--c-paper-text)}

/* ---------- Reveal (only when JS has prepared it; elements already on screen never hide) ---------- */
.reveal-ready [data-reveal]:not(.is-in){opacity:0;transform:translateY(18px)}
[data-reveal]{transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease)}

/* ---------- Talk ---------- */
.talk{border-top:1px solid var(--c-rule)}
.talk-title{font-size:var(--t-display);line-height:.95;letter-spacing:-.035em}
.talk-reasons{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);margin-top:var(--s-7);border-top:1px solid var(--c-rule)}
.talk-reasons li{padding:var(--s-5) var(--s-5) var(--s-5) 0;border-bottom:1px solid var(--c-rule)}
.talk-reasons b{display:block;font-size:var(--t-md);margin-bottom:var(--s-1)}
.talk-reasons span{color:var(--c-soft)}
.talk-contact{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6);margin-top:var(--s-7)}
.talk-mail{font-size:var(--t-xl);font-weight:600;letter-spacing:-.02em;text-decoration:none;border-bottom:2px solid var(--c-signal);padding-bottom:.05em;transition:color var(--d-fast)}
.talk-mail:hover{color:var(--c-signal)}
@media(max-width:699px){.talk-reasons{grid-template-columns:1fr}}

/* ---------- Pager (the story continues) ---------- */
.pager{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-block:var(--s-8);border-top:1px solid var(--c-rule);text-decoration:none}
.pager .overline{grid-column:1/4;align-self:center}
.pager-title{grid-column:4/12;font-size:var(--t-2xl);font-weight:600;letter-spacing:-.03em;line-height:1.05;transition:color var(--d-fast)}
.pager-title small{display:block;margin-top:var(--s-3);font-size:var(--t-md);font-weight:400;letter-spacing:0;color:var(--c-soft)}
.pager .i{grid-column:12/13;justify-self:end;align-self:center;font-size:2rem;color:var(--c-muted)}
.pager:hover .pager-title{color:var(--c-signal)}
.pager:hover .i{transform:translateX(6px);color:var(--c-signal)}
@media(max-width:899px){
  .pager{row-gap:var(--s-3)}
  .pager .overline,.pager-title{grid-column:1/12}
  .pager .i{grid-column:12/13;grid-row:2}
}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--c-rule);padding-block:var(--s-8) var(--s-6);font-size:var(--t-sm);color:var(--c-muted)}
.site-footer a{color:var(--c-soft);text-decoration:none}
.site-footer a:hover{color:var(--c-text);text-decoration:underline;text-underline-offset:.2em}
.footer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--s-6)}
.footer-brand{grid-column:1/5}
.footer-brand .wordmark-mark{font-size:1.5rem;color:var(--c-text)}
.footer-brand p{margin-top:var(--s-3)}
.footer-nav{grid-column:5/8}
.footer-nav ul,.footer-links ul{list-style:none;display:grid;gap:var(--s-2)}
.footer-links{grid-column:8/13}
.footer-side{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--c-rule);max-width:28rem}
.site-footer .footer-side a{text-decoration:underline;text-decoration-color:var(--c-rule-strong);text-underline-offset:.2em}
.site-footer .footer-side a:hover{text-decoration-color:var(--c-signal)}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--c-rule)}
.footer-base .note{color:var(--c-muted)}
@media(max-width:899px){
  .footer-brand,.footer-nav,.footer-links{grid-column:1/-1}
}

/* ---------- Imprint ---------- */
.imprint{border-top:1px solid var(--c-rule)}
.imprint summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);min-height:56px;padding-block:var(--s-4);cursor:pointer;list-style:none;font-weight:600}
.imprint summary::-webkit-details-marker{display:none}
.imprint summary::after{content:"+";font:400 1.5rem/1 var(--f-mono);color:var(--c-muted)}
.imprint[open] summary::after{content:"\2212"}
.imprint-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6);padding-bottom:var(--s-7);color:var(--c-soft);font-size:var(--t-sm)}
.imprint-body h3{font-size:var(--t-base);color:var(--c-text);margin-bottom:var(--s-3)}
.imprint-body address{font-style:normal}
@media(max-width:699px){.imprint-body{grid-template-columns:1fr}}

/* drafts: anything marked data-placeholder shows a dashed label until filled.
   Set data-drafts="hide" on <html> to hide unfilled placeholders. */
[data-placeholder]{outline:1px dashed #6E8BFF;outline-offset:4px}
[data-placeholder]::before{content:"Placeholder";display:inline-block;margin:0 .6em .3em 0;padding:.15em .45em;font:500 .625rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#0B0C0E;background:#6E8BFF;vertical-align:middle}
[data-drafts="hide"] [data-placeholder]{display:none!important}

/* =====================================================================
   Page modules
   ===================================================================== */

/* Home — the three tenses */
.tense{font:500 var(--t-xs)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
.tense--next{color:var(--c-signal)}

/* Home — Lab teaser */
.teaser{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--s-7);align-items:start}
.teaser-text{grid-column:1/7}
.teaser-side{grid-column:8/13}
.teaser .tag{margin-bottom:var(--s-5)}
.teaser-learning{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--c-rule)}
.teaser-learning p:last-child{font-size:var(--t-lg);line-height:1.4;color:var(--c-text);margin-top:var(--s-2)}
@media(max-width:899px){.teaser-text,.teaser-side{grid-column:1/-1}}

/* Expertise — territories */
.territory{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--s-6);padding-block:var(--s-8);border-top:1px solid var(--c-rule)}
.territory:first-of-type{border-top:0;padding-top:0}
.territory-head{grid-column:1/13;display:grid;grid-template-columns:subgrid}
.territory-num{grid-column:1/4;font:500 var(--t-sm)/1.2 var(--f-mono);color:var(--c-muted);padding-top:.6em}
.territory-title{grid-column:4/13}
.territory-title h2{font-size:var(--t-2xl);line-height:1.03;letter-spacing:-.03em}
.territory-title p{margin-top:var(--s-4);font-size:var(--t-lg);line-height:1.45;color:var(--c-soft);max-width:34rem}
.territory-cols{grid-column:4/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.territory-cols h3{font:500 var(--t-xs)/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);padding-bottom:var(--s-3);margin-bottom:var(--s-3);border-bottom:1px solid var(--c-rule)}
.territory-cols ul{list-style:none;display:grid;gap:var(--s-2);color:var(--c-soft)}
.territory-cols .q li{color:var(--c-text)}
.territory-cols .q li::before{content:"\201C";color:var(--c-muted);margin-right:.1em}
.territory-cols .q li::after{content:"\201D";color:var(--c-muted);margin-left:.05em}
.territory-cols p{color:var(--c-soft)}
@media(max-width:1099px){.territory-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.territory-cols>div:last-child{grid-column:1/-1}}
@media(max-width:899px){
  .territory-head{grid-template-columns:1fr;row-gap:var(--s-3)}
  .territory-num,.territory-title,.territory-cols{grid-column:1/-1}
  .territory-num{padding-top:0}
}
@media(max-width:599px){.territory-cols{grid-template-columns:1fr}}

.principles{list-style:none;counter-reset:p;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.principles li{counter-increment:p;border-top:1px solid var(--c-rule-strong);padding-top:var(--s-5)}
.principles li::before{content:counter(p,decimal-leading-zero);display:block;font:500 var(--t-xs)/1 var(--f-mono);color:var(--c-muted);margin-bottom:var(--s-5)}
.principles h3{font-size:var(--t-lg);line-height:1.2;letter-spacing:-.015em}
.principles p{margin-top:var(--s-3);color:var(--c-soft)}
@media(max-width:899px){.principles{grid-template-columns:1fr}}

.toolbox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gap)}
.toolbox dl{display:contents}
.toolbox div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--gap);padding-block:var(--s-4);border-bottom:1px solid var(--c-rule)}
.toolbox dt{font:500 var(--t-xs)/1.6 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
.toolbox dd{margin:0;color:var(--c-text)}
@media(max-width:899px){.toolbox{grid-template-columns:1fr}}

/* Experience — cases */
.case{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--s-5);padding-block:var(--s-8);border-top:1px solid var(--c-rule)}
.case-meta{grid-column:1/4;display:flex;flex-direction:column;gap:var(--s-2)}
.case-meta .note{color:var(--c-muted)}
.case-body{grid-column:4/13}
.case-body h3{font-size:var(--t-xl);line-height:1.1;letter-spacing:-.02em}
.case-role{margin-top:var(--s-3);color:var(--c-muted)}
.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:var(--s-6)}
.case-grid h4{font:500 var(--t-xs)/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);padding-bottom:var(--s-3);margin-bottom:var(--s-3);border-bottom:1px solid var(--c-rule)}
.case-grid p{color:var(--c-soft)}
.case-result p{color:var(--c-text);font-size:var(--t-md);line-height:1.45}
.case-result .figure{display:block;font-size:var(--t-2xl);font-weight:600;line-height:1;letter-spacing:-.03em;margin-bottom:var(--s-3);color:var(--c-text);font-variant-numeric:tabular-nums}
@media(max-width:1099px){.case-grid{grid-template-columns:1fr 1fr}.case-grid .case-result{grid-column:1/-1}}
@media(max-width:899px){
  .case-meta,.case-body{grid-column:1/-1}
  .case-meta{flex-direction:row;flex-wrap:wrap;gap:var(--s-2) var(--s-4)}
}
@media(max-width:599px){.case-grid{grid-template-columns:1fr}}

/* Experience — path */
.path{list-style:none;border-top:1px solid var(--c-rule)}
.path li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) minmax(0,4fr) minmax(0,3fr);column-gap:var(--gap);padding-block:var(--s-4);border-bottom:1px solid var(--c-rule);align-items:baseline}
.path-years{font:500 var(--t-sm)/1.4 var(--f-mono);color:var(--c-muted);font-variant-numeric:tabular-nums}
.path-house{font-weight:600}
.path-house small{display:block;font-weight:400;font-size:var(--t-sm);color:var(--c-muted)}
.path-role{color:var(--c-soft)}
.path-city{color:var(--c-muted);font-size:var(--t-sm)}
.path li.is-now .path-years{color:var(--c-signal)}
@media(max-width:899px){
  .path li{grid-template-columns:minmax(0,1fr) minmax(0,2fr);row-gap:var(--s-1)}
  .path-years{grid-row:span 3}
}

.brand-index{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap)}
.brand-index li{padding-block:var(--s-4);border-bottom:1px solid var(--c-rule)}
.brand-index b{display:block;font-size:var(--t-md)}
.brand-index span{display:block;margin-top:var(--s-1)}
@media(max-width:1099px){.brand-index{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:699px){.brand-index{grid-template-columns:repeat(2,minmax(0,1fr))}}

.facts{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}
.facts li{padding-block:var(--s-4);border-bottom:1px solid var(--c-rule);color:var(--c-soft)}
.facts li b{display:block;color:var(--c-text)}
@media(max-width:699px){.facts{grid-template-columns:1fr}}

/* Experience — sticky chapter rail on wide screens */
@media(min-width:1100px){
  .chapters{position:sticky;top:var(--header-h);z-index:5;background:rgba(11,12,14,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--c-rule);padding-block:var(--s-4) var(--s-3)}
  .chapters .rail-stop{padding-top:var(--s-5)}
  .chapters .rail-houses{display:none}
  .chapters .rail-title{font-size:var(--t-sm);margin-top:var(--s-2)}
}

/* Lab — rules and entries */
.rules{list-style:none;counter-reset:r;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.rules li{counter-increment:r;border-top:1px solid var(--c-rule-strong);padding-top:var(--s-5)}
.rules li::before{content:counter(r,decimal-leading-zero);display:block;font:500 var(--t-xs)/1 var(--f-mono);color:var(--c-muted);margin-bottom:var(--s-5)}
.rules h3{font-size:var(--t-md);line-height:1.25}
.rules p{margin-top:var(--s-2);color:var(--c-soft);font-size:var(--t-sm)}
@media(max-width:1099px){.rules{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-7)}}
@media(max-width:599px){.rules{grid-template-columns:1fr}}

.entry{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--s-5);padding-block:var(--s-8);border-top:1px solid var(--c-rule)}
.entry-meta{grid-column:1/4;display:flex;flex-direction:column;gap:var(--s-3);align-items:flex-start}
.entry-num{font:500 var(--t-sm)/1 var(--f-mono);color:var(--c-muted)}
.entry-body{grid-column:4/13}
.entry-body h3{font-size:var(--t-xl);line-height:1.1;letter-spacing:-.02em}
.entry-q{margin-top:var(--s-4);font-family:var(--f-serif);font-size:var(--t-lg);line-height:1.4;color:var(--c-text);max-width:34rem}
.entry-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:var(--s-6)}
.entry-grid h4{font:500 var(--t-xs)/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);padding-bottom:var(--s-3);margin-bottom:var(--s-3);border-bottom:1px solid var(--c-rule)}
.entry-grid p{color:var(--c-soft)}
.entry .actions{margin-top:var(--s-6)}
@media(max-width:1099px){.entry-grid{grid-template-columns:1fr 1fr}.entry-grid>div:last-child{grid-column:1/-1}}
@media(max-width:899px){
  .entry-meta,.entry-body{grid-column:1/-1}
  .entry-meta{flex-direction:row;flex-wrap:wrap;align-items:center}
}
@media(max-width:599px){.entry-grid{grid-template-columns:1fr}}

.questions{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);border-top:1px solid var(--c-rule)}
.questions li{padding:var(--s-6) var(--s-5) var(--s-6) 0;border-bottom:1px solid var(--c-rule)}
.questions .tag{margin-bottom:var(--s-4)}
.questions h3{font-size:var(--t-lg);line-height:1.2;letter-spacing:-.015em}
.questions p{margin-top:var(--s-3);color:var(--c-soft)}
@media(max-width:899px){.questions{grid-template-columns:1fr}}

/* Perspective — theses on paper */
.thesis{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--s-5);padding-block:clamp(56px,7vw,104px);border-top:1px solid var(--c-paper-rule)}
.thesis-meta{grid-column:1/4;display:flex;flex-direction:column;gap:var(--s-3);align-items:flex-start}
.thesis-num{font:500 var(--t-display)/.8 var(--f-sans);letter-spacing:-.04em;color:#85827A}
.thesis-body{grid-column:4/11}
.thesis-body h2{font-size:var(--t-2xl);line-height:1.04;letter-spacing:-.03em}
.thesis-text{margin-top:var(--s-6);font-family:var(--f-serif);font-size:clamp(1.125rem,1.05rem + .3vw,1.3125rem);line-height:1.62;color:var(--c-paper-soft);max-width:36rem}
.thesis-text p+p{margin-top:.9em}
.thesis-src{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--c-paper-rule);max-width:36rem}
@media(max-width:899px){
  .thesis-meta,.thesis-body{grid-column:1/-1}
  .thesis-meta{flex-direction:row;align-items:center;gap:var(--s-4)}
  .thesis-num{font-size:var(--t-2xl)}
}
.principle-line{font-family:var(--f-serif);font-size:var(--t-2xl);line-height:1.12;letter-spacing:-.015em;max-width:22ch}

/* 404 */
.lost{min-height:calc(100vh - var(--header-h) - 200px);display:flex;flex-direction:column;justify-content:center}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .reveal-ready [data-reveal]:not(.is-in){opacity:1;transform:none}
  .reveal-ready .rail:not(.is-drawn) .rail-stop::before{transform:none}
  @view-transition{navigation:none}
}

/* ---------- Print ---------- */
@media print{
  :root{color-scheme:light}
  body{background:#fff;color:#000}
  .site-header,.skip,.pager,.nav-toggle{display:none!important}
  .section,.talk,.site-footer{border-color:#ccc}
  a{text-decoration:underline}
  [data-reveal]{opacity:1!important;transform:none!important}
}