/* ════════════════════════════════════════════════════════════
   Kabirr Kohli — portfolio
   Hand-written. No framework, no build step, no dependencies.
   ════════════════════════════════════════════════════════════ */

/* ─────────── tokens ─────────── */
:root{
  --ink:      #08090A;
  --ink-2:    #0C0E10;
  --surface:  #121417;
  --surface-2:#171A1E;
  --line:     rgba(239,237,231,.10);
  --line-2:   rgba(239,237,231,.06);
  --ivory:    #EFEDE7;
  --muted:    #9C9A93;
  --muted-2:  #6E6C66;
  --gold:     #CBA96B;
  --gold-hi:  #F2E0BB;
  --gold-dim: rgba(203,169,107,.18);

  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,ui-serif,serif;
  --sans:  ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Inter,Roboto,system-ui,sans-serif;
  --mono:  ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --gutter: clamp(20px, 5vw, 80px);
  --maxw: 1280px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--ink);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
html.is-booting{ overflow:hidden; }

body{
  margin:0;
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--sans);
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.62;
  letter-spacing:.002em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{ overflow:hidden; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; line-height:1.08; }
p{ margin:0 0 1.1em; }
ol,ul{ margin:0; padding:0; list-style:none; }
code,pre{ font-family:var(--mono); }
::selection{ background:var(--gold); color:#0A0B0C; }

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Grid and flex children default to min-width:auto, which lets one unwrappable
   child (a <pre>, a long mono string) push its whole track wider than the
   viewport. Every layout container here opts out. */
.lab, .split, .about__grid, .stack__grid, .grid-proof, .statline, .how__grid,
.phones, .phones__col, .pair, .contact__links, .specs, .lab__strats,
.about__facts, .rules ol, .tl__items, .hero__foot, .foot__in{
  min-width:0;
}
.lab > *, .split > *, .about__grid > *, .stack__grid > *, .grid-proof > *,
.statline > *, .how__grid > *, .phones > *, .phones__col > *, .pair > *,
.contact__links > *, .specs > *, .lab__strats > *, .about__facts > *,
.rules ol > *, .tl__items > *, .hero__foot > *, .foot__in > *{
  min-width:0;
}
.tl__items li > *{ min-width:0; }
.about__facts li > *{ min-width:0; }

/* ─────────── ambient layers ─────────── */
.field{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0; pointer-events:none;
  opacity:.85;
}
.grain{
  position:fixed; inset:-200%;
  z-index:2; pointer-events:none;
  opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 16%{transform:translate(-4%,-3%)}
  33%{transform:translate(3%,-5%)} 50%{transform:translate(-2%,4%)}
  66%{transform:translate(4%,2%)} 83%{transform:translate(-5%,-2%)}
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(203,169,107,.055), transparent 60%),
    radial-gradient(140% 120% at 50% 110%, rgba(0,0,0,.75), transparent 55%);
}

/* content sits above ambient */
main, .nav, .sheet, .watermark{ position:relative; z-index:3; }

/* ─────────── preloader ─────────── */
.boot{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:var(--ink);
  transition:opacity .5s ease .55s, visibility 0s linear 1.05s;
}
.boot.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.boot__curtain{
  position:absolute; left:0; right:0; height:50.5%;
  background:var(--ink);
  transition:transform .95s var(--ease-out) .1s;
  z-index:1;
}
.boot__curtain--t{ top:0; }
.boot__curtain--b{ bottom:0; }
.boot.is-done .boot__curtain--t{ transform:translateY(-100%); }
.boot.is-done .boot__curtain--b{ transform:translateY(100%); }
.boot__inner{
  position:relative; z-index:2;
  width:min(560px,82vw); text-align:center;
  transition:opacity .35s ease, transform .5s var(--ease);
}
.boot.is-done .boot__inner{ opacity:0; transform:translateY(-14px); }
.boot__name{
  font-family:var(--serif);
  font-size:clamp(30px,7vw,58px);
  line-height:1.05; letter-spacing:-.015em;
  display:flex; justify-content:center; flex-wrap:wrap;
}
.boot__name i{
  display:inline-block; font-style:normal;
  transform:translateY(105%);
  animation:bootLetter .8s var(--ease-out) forwards;
}
.boot__name .sp{ width:.32em; }
@keyframes bootLetter{ to{ transform:translateY(0); } }
.boot__meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:26px 0 10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted-2);
}
.boot__count{ color:var(--gold); }
.boot__track{ height:1px; background:var(--line); overflow:hidden; }
.boot__track i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-hi));
}

/* ─────────── cursor ─────────── */
.cursor{
  position:fixed; top:0; left:0; z-index:150;
  width:30px; height:30px; margin:-15px 0 0 -15px;
  border:1px solid rgba(203,169,107,.5); border-radius:50%;
  pointer-events:none; opacity:0;
  transition:opacity .3s ease, width .28s var(--ease), height .28s var(--ease),
             margin .28s var(--ease), background-color .28s ease, border-color .28s ease;
  display:grid; place-items:center;
}
.cursor i{
  width:3px; height:3px; border-radius:50%; background:var(--gold);
  transition:opacity .2s ease;
}
.cursor.on{ opacity:1; }
.cursor.hot{
  width:58px; height:58px; margin:-29px 0 0 -29px;
  background:rgba(203,169,107,.10); border-color:rgba(203,169,107,.75);
}
.cursor.hot i{ opacity:0; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none !important; } }

/* ─────────── edge watermark ─────────── */
.watermark{
  position:fixed; right:0; top:50%;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  padding:0 12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.42em;
  text-transform:uppercase; color:rgba(239,237,231,.20);
  z-index:4; pointer-events:none; user-select:none;
  mix-blend-mode:screen;
}
@media (max-width:1180px){ .watermark{ display:none; } }

/* ─────────── nav ─────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:20px;
  padding:14px var(--gutter);
  padding-top:calc(14px + env(safe-area-inset-top));
  transition:background-color .4s ease, backdrop-filter .4s ease, border-color .4s ease, padding .4s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,9,10,.72);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--line-2);
  padding-top:calc(10px + env(safe-area-inset-top));
  padding-bottom:10px;
}
.nav__mark{ display:flex; align-items:baseline; gap:10px; margin-right:auto; }
.nav__k{
  font-family:var(--serif); font-size:19px; letter-spacing:.02em;
  color:var(--gold);
}
.nav__full{
  font-family:var(--mono); font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--muted-2);
}
.nav__links{ display:flex; gap:26px; }
.nav__links a{
  position:relative;
  font-size:13px; color:var(--muted);
  transition:color .3s ease;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.nav__links a:hover{ color:var(--ivory); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{
  padding:8px 16px; border:1px solid var(--line);
  border-radius:100px; font-size:12.5px; color:var(--ivory);
  transition:background-color .35s ease, border-color .35s ease, color .35s ease;
}
.nav__cta:hover{ background:var(--gold); border-color:var(--gold); color:#0A0B0C; }
.nav__burger{
  display:none; width:40px; height:40px; padding:0;
  background:none; border:1px solid var(--line); border-radius:50%;
  cursor:pointer; place-items:center; align-content:center; justify-items:center; gap:5px;
}
.nav__burger i{ display:block; width:15px; height:1px; background:var(--ivory); transition:transform .35s var(--ease), opacity .25s ease; }
.nav__burger[aria-expanded="true"] i:first-child{ transform:translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child{ transform:translateY(-3px) rotate(-45deg); }
.nav__progress{ position:absolute; left:0; right:0; bottom:0; height:1px; background:transparent; }
.nav__progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,rgba(203,169,107,.3),var(--gold));
}

.sheet{
  position:fixed; inset:0; z-index:99;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 var(--gutter);
  background:rgba(8,9,10,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s ease, visibility 0s linear .4s;
}
.sheet.is-open{ opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
.sheet a{
  font-family:var(--serif); font-size:clamp(28px,8vw,42px); line-height:1.5;
  color:var(--ivory);
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.sheet.is-open a{ opacity:1; transform:none; }
.sheet.is-open a:nth-child(1){transition-delay:.06s}
.sheet.is-open a:nth-child(2){transition-delay:.10s}
.sheet.is-open a:nth-child(3){transition-delay:.14s}
.sheet.is-open a:nth-child(4){transition-delay:.18s}
.sheet.is-open a:nth-child(5){transition-delay:.22s}
.sheet.is-open a:nth-child(6){transition-delay:.26s}
.sheet.is-open a:nth-child(7){transition-delay:.30s}
.sheet.is-open a:nth-child(8){transition-delay:.34s}
.sheet__sig{
  margin-top:34px;
  font-family:var(--mono); font-size:10px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--muted-2);
}

@media (max-width:1000px){
  .nav__links,.nav__cta{ display:none; }
  .nav__burger{ display:grid; }
}
@media (max-width:520px){ .nav__full{ display:none; } }

/* ─────────── reveal primitives ─────────── */
[data-rise]{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease-out), transform 1s var(--ease-out);
}
[data-rise].in{ opacity:1; transform:none; }
[data-rise][data-d="1"]{ transition-delay:.06s }
[data-rise][data-d="2"]{ transition-delay:.14s }
[data-rise][data-d="3"]{ transition-delay:.26s }
[data-rise][data-d="4"]{ transition-delay:.36s }

[data-grow]{ transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease-out) .3s; }
[data-grow].in{ transform:scaleX(1); }

/* ─────────── hero ─────────── */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(96px,14vh,130px) var(--gutter) 0;
  max-width:var(--maxw); margin-inline:auto;
}
.hero__inner{ width:100%; will-change:transform,opacity; }
.hero__eyebrow{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 clamp(18px,3vw,34px);
  font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted);
}
.hero__eyebrow em{ color:var(--gold); font-style:normal; }
.hero__title{
  font-family:var(--serif);
  font-size:clamp(52px,13.5vw,190px);
  line-height:.9; letter-spacing:-.035em;
  margin:0 0 clamp(22px,3.5vw,44px);
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.04em; }
.hero__title .line__i{
  display:block;
  opacity:0; transform:translateY(100%) rotateX(35deg);
  transform-origin:top center;
  transition:opacity 1s var(--ease-out), transform 1.15s var(--ease-out);
}
.hero__title .line__i.in{ opacity:1; transform:none; }
.hero__title .line:last-child .line__i{ color:var(--gold); }
.hero__rule{ height:1px; background:linear-gradient(90deg,var(--gold),transparent); margin-bottom:clamp(22px,3vw,36px); }
.hero__lede{
  max-width:56ch;
  font-size:clamp(16px,1.15vw + 12px,21px);
  line-height:1.62; color:var(--muted);
}
.hero__lede strong{ color:var(--ivory); font-weight:400; }
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:clamp(14px,2vw,22px); }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 26px; border:1px solid var(--line); border-radius:100px;
  font-size:14px; color:var(--ivory);
  transition:background-color .4s var(--ease), border-color .4s var(--ease),
             color .4s var(--ease), transform .3s var(--ease);
}
.btn:hover{ border-color:rgba(203,169,107,.6); background:rgba(203,169,107,.08); }
.btn--gold{ background:var(--gold); border-color:var(--gold); color:#0A0B0C; }
.btn--gold:hover{ background:var(--gold-hi); border-color:var(--gold-hi); color:#0A0B0C; }

.hero__foot{
  display:flex; align-items:flex-end; gap:clamp(20px,4vw,58px); flex-wrap:wrap;
  margin-top:auto;
  padding:clamp(28px,5vh,54px) 0 clamp(24px,4vh,40px);
  border-top:1px solid var(--line-2);
}
.hero__stat{ display:flex; flex-direction:column; gap:2px; }
.hero__stat b{ font-family:var(--serif); font-size:clamp(24px,2.4vw,34px); line-height:1; color:var(--gold); font-weight:400; }
.hero__stat span{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); }
.hero__scroll{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.hero__scroll span{ font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-2); }
.hero__scroll i{ display:block; width:54px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.hero__scroll i::after{
  content:""; position:absolute; inset:0 auto 0 0; width:18px; background:var(--gold);
  animation:scrollHint 2.2s var(--ease) infinite;
}
@keyframes scrollHint{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(300%)} }
@media (max-width:640px){ .hero__scroll{ display:none; } }

/* ─────────── manifesto stage ─────────── */
.stage{ height:260vh; height:260svh; position:relative; }
.stage__pin{
  position:sticky; top:0; height:100vh; height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--gutter);
  max-width:var(--maxw); margin-inline:auto;
}
.stage__kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); margin-bottom:clamp(18px,3vw,30px);
}
.stage__words{
  font-family:var(--serif);
  /* height-aware: on a short laptop screen this must still fit inside the pin */
  font-size:clamp(23px, min(4.5vw, 5.6vh), 56px);
  line-height:1.2; letter-spacing:-.018em;
  max-width:26ch; margin:0;
}
.stage__words w{
  display:inline-block;
  color:rgba(239,237,231,.13);
  transition:color .35s ease, transform .35s var(--ease), filter .35s ease;
}
.stage__words w.on{ color:var(--ivory); }
.stage__words w.hot{ color:var(--gold-hi); }
.stage__words w.b{ font-style:italic; }
.stage__words w.b.on{ color:var(--gold); }

/* ─────────── section heads ─────────── */
.shead{ max-width:70ch; margin-bottom:clamp(40px,6vw,80px); }
.shead__n{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.3em;
  color:var(--gold); margin-bottom:16px;
}
.shead__t{
  font-family:var(--serif);
  font-size:clamp(34px,5.6vw,78px); line-height:1.02; letter-spacing:-.028em;
  margin-bottom:.4em;
}
.shead__d{ color:var(--muted); font-size:clamp(15px,.6vw + 13px,18px); max-width:62ch; }
.shead__d code{ font-size:.9em; color:var(--gold); background:rgba(203,169,107,.08); padding:2px 6px; border-radius:4px; }

/* ─────────── proof cards ─────────── */
.proof{ padding:clamp(80px,13vh,150px) 0; }
.grid-proof{
  display:grid; gap:1px;
  grid-template-columns:repeat(3,1fr);
  background:var(--line-2);
  border:1px solid var(--line-2);
}
.pcard{
  background:var(--ink);
  padding:clamp(24px,3vw,40px);
  transition:background-color .5s ease;
  --c:0;
}
@supports (background:color-mix(in srgb,#000 50%,#fff)){
  .pcard{ background:color-mix(in srgb, var(--surface) calc(var(--c) * 62%), var(--ink)); }
}
.pcard__n{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(42px,5vw,68px); line-height:1;
  letter-spacing:-.03em;
  color:var(--gold);
  margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
@supports (color:color-mix(in srgb,#000 50%,#fff)){
  .pcard__n{ color:color-mix(in srgb, var(--gold) calc(35% + var(--c) * 65%), var(--muted-2)); }
}
.pcard h3{ font-size:15px; letter-spacing:.01em; margin-bottom:8px; }
.pcard p{ font-size:14px; color:var(--muted); margin-bottom:14px; }
.pcard code{
  display:block; font-size:11.5px; color:var(--muted-2);
  padding-top:12px; border-top:1px solid var(--line-2);
  overflow-x:auto; white-space:nowrap;
}
@media (max-width:900px){ .grid-proof{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-proof{ grid-template-columns:1fr; } }

/* ─────────── project heads ─────────── */
.proj{ padding:clamp(70px,11vh,130px) 0; position:relative; }
.proj::before{
  content:""; position:absolute; top:0; left:var(--gutter); right:var(--gutter);
  height:1px; background:var(--line-2);
}
.phead{ display:grid; gap:clamp(16px,2vw,28px); margin-bottom:clamp(40px,6vw,72px); }
.phead__l{ display:flex; align-items:center; gap:18px; }
.phead__mark{
  width:56px; height:56px; border-radius:14px; object-fit:cover;
  border:1px solid var(--line); flex:none;
}
.phead__no{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold); margin-bottom:6px;
}
.phead__t{
  font-family:var(--serif); font-size:clamp(42px,8vw,110px);
  line-height:.94; letter-spacing:-.035em;
}
.phead__d{ max-width:62ch; color:var(--muted); font-size:clamp(15px,.6vw + 13px,18px); margin:0; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tags li{
  padding:6px 13px; border:1px solid var(--line-2); border-radius:100px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted);
}

/* ─────────── wide shots ─────────── */
.shot{
  margin:clamp(48px,7vw,96px) 0;
  padding-inline:var(--gutter);
  --c:0;
  perspective:1600px;
}
.shot__frame{
  max-width:calc(var(--maxw) - var(--gutter));
  margin-inline:auto;
  border:1px solid var(--line);
  border-radius:clamp(10px,1vw,18px);
  overflow:hidden;
  background:var(--surface);
  transform:rotateX(calc((1 - var(--c)) * 7deg)) scale(calc(.94 + var(--c) * .06));
  transform-origin:50% 100%;
  box-shadow:0 40px 100px -50px rgba(0,0,0,.9),
             0 0 0 1px rgba(203,169,107,calc(var(--c) * .18));
  transition:transform .1s linear, box-shadow .5s ease;
}
.shot__frame img{ width:100%; display:block; }
.shot figcaption{
  max-width:64ch; margin:20px auto 0;
  font-size:14px; color:var(--muted); text-align:center;
}
.shot figcaption b{ color:var(--ivory); font-weight:400; }
.shot figcaption em{ color:var(--gold); font-style:normal; }

/* ─────────── pipeline ─────────── */
.pipe{ margin:clamp(50px,8vw,110px) 0; }
.pipe__t{ font-family:var(--serif); font-size:clamp(24px,3vw,40px); letter-spacing:-.02em; margin-bottom:clamp(24px,3vw,40px); }
.pipe__scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
.pipe__scroll::-webkit-scrollbar{ height:3px; }
.pipe__scroll::-webkit-scrollbar-thumb{ background:var(--line); }
.pipe__svg{ display:block; width:100%; min-width:820px; height:auto; }
.pipe__wire path{
  fill:none; stroke:var(--gold); stroke-width:1;
  stroke-dasharray:var(--len,600); stroke-dashoffset:var(--off,600);
}
.pn circle{ fill:var(--ink-2); stroke:var(--line); stroke-width:1; transition:stroke .4s ease, fill .4s ease; }
.pn text{ fill:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-anchor:middle; transition:fill .4s ease; }
.pn .pn__s{ font-size:9px; fill:var(--muted-2); letter-spacing:.08em; }
.pn.lit circle{ stroke:var(--gold); fill:rgba(203,169,107,.09); }
.pn.lit text{ fill:var(--ivory); }
.pn.lit .pn__s{ fill:var(--gold); }
.pipe__note{ max-width:60ch; color:var(--muted); font-size:15px; margin-top:28px; }

/* the stacked version, for widths where the diagram would need swiping */
.pipe__list{ display:none; }
@media (max-width:780px){
  .pipe__scroll{ display:none; }
  .pipe__list{
    display:grid; gap:0;
    border:1px solid var(--line-2); border-radius:12px; overflow:hidden;
  }
  .pipe__list li{
    display:flex; align-items:center; gap:14px;
    padding:13px 16px;
    background:var(--ink);
    border-bottom:1px solid var(--line-2);
    position:relative;
  }
  .pipe__list li:last-child{ border-bottom:0; }
  .pipe__list b{
    font-family:var(--mono); font-weight:400; font-size:11px;
    letter-spacing:.18em; color:var(--gold);
    min-width:58px;
  }
  .pipe__list span{ font-size:14px; color:var(--muted); }
  /* the connector between rows */
  .pipe__list li::after{
    content:""; position:absolute; left:32px; bottom:-1px;
    width:1px; height:0;
  }
}

/* ─────────── horizontal rail ─────────── */
.rail{ height:420vh; height:420svh; position:relative; }
.rail__pin{
  position:sticky; top:0; height:100vh; height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.rail__head{
  padding:0 var(--gutter); margin-bottom:clamp(20px,3vw,38px);
  max-width:var(--maxw); margin-inline:auto; width:100%;
}
.rail__head h3{ font-family:var(--serif); font-size:clamp(26px,3.4vw,46px); letter-spacing:-.024em; }
.rail__hint{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.rail__track{
  display:flex; gap:clamp(16px,2vw,28px);
  padding-inline:var(--gutter);
  will-change:transform;
}
.rcard{
  flex:0 0 min(420px,78vw);
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:16px;
  padding:clamp(22px,2.4vw,34px);
  transition:border-color .5s ease, background-color .5s ease, transform .5s var(--ease);
}
.rcard:hover{ border-color:rgba(203,169,107,.35); }
.rcard__n{ font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--gold); }
.rcard h4{ font-family:var(--serif); font-size:clamp(21px,1.8vw,28px); letter-spacing:-.015em; margin:10px 0 14px; }
.rcard p{ font-size:14.5px; color:var(--muted); margin-bottom:.9em; }
.rcard p:last-child{ margin-bottom:0; }
.rcard code{ color:var(--gold); font-size:.9em; }
.rail__bar{
  height:1px; background:var(--line-2);
  margin:clamp(24px,3vw,42px) auto 0;
  max-width:calc(var(--maxw) - var(--gutter) * 2);
  width:calc(100% - var(--gutter) * 2);
}
.rail__bar i{ display:block; height:100%; width:0; background:var(--gold); }

/* The rail moves itself on every size — the same pinned behaviour as desktop.
   Stacking it vertically on a phone made the page enormous and looked empty;
   asking for a sideways swipe was worse. It travels as you scroll instead. */
@media (max-width:900px){
  .rail{ height:340vh; height:340svh; }
  .rcard{ flex:0 0 84vw; padding:22px 20px; }
  .rail__head{ margin-bottom:18px; }
  .rail__track{ gap:14px; }
}

/* ─────────── stat line ─────────── */
.statline{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2);
  margin-top:clamp(40px,6vw,72px);
}
.statline div{ background:var(--ink); padding:clamp(20px,2.4vw,32px); }
.statline b{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,3vw,42px); line-height:1; color:var(--gold);
  letter-spacing:-.02em; margin-bottom:8px; font-variant-numeric:tabular-nums;
}
.statline span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); }
@media (max-width:820px){ .statline{ grid-template-columns:repeat(2,1fr); } }

/* ─────────── phone wall ─────────── */
.phones{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.6vw,26px);
  padding:clamp(30px,5vw,60px) var(--gutter);
  max-width:calc(var(--maxw) + 120px); margin-inline:auto;
  align-items:start;
}
.phones__col{ display:grid; gap:clamp(12px,1.6vw,26px); will-change:transform; }
.phone{
  margin:0; position:relative;
  border:1px solid var(--line);
  border-radius:clamp(14px,1.6vw,26px);
  overflow:hidden; background:#000;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95);
  transition:border-color .5s ease, transform .6s var(--ease);
}
.phone:hover{ border-color:rgba(203,169,107,.4); }
.phone img{ width:100%; display:block; }
.phone figcaption{
  position:absolute; left:10px; bottom:10px;
  padding:5px 11px; border-radius:100px;
  background:rgba(8,9,10,.74);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-2);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ivory);
}
/* Below the parallax breakpoint the columns stop being containers and let all
   twelve screens flow into one grid — every screen still ships to every device. */
@media (max-width:1000px){
  .phones{ grid-template-columns:repeat(3,1fr); }
  .phones__col{ display:contents; transform:none !important; }
}
@media (max-width:620px){
  .phones{ grid-template-columns:repeat(2,1fr); }
}

/* ─────────── split ─────────── */
.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,80px);
  margin:clamp(50px,7vw,100px) 0;
  align-items:start;
}
.split__l h3{
  font-family:var(--serif); font-size:clamp(26px,3.4vw,46px);
  line-height:1.1; letter-spacing:-.024em; margin-bottom:.6em;
}
.split__l p{ color:var(--muted); }
.split__l b{ color:var(--ivory); font-weight:400; }
.split__l em{ color:var(--gold); font-style:normal; }
.specs{ display:grid; gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
.specs li{
  --c:0;
  background:var(--ink);
  padding:clamp(16px,1.8vw,24px);
  display:grid; gap:5px;
}
.specs b{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold);
  font-weight:400;
}
@supports (background:color-mix(in srgb,#000 50%,#fff)){
  .specs li{ background:color-mix(in srgb, var(--surface) calc(var(--c) * 55%), var(--ink)); }
  .specs b{ color:color-mix(in srgb, var(--gold) calc(40% + var(--c) * 60%), var(--muted-2)); }
}
.specs span{ font-size:14px; color:var(--muted); }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }

/* ─────────── light/dark pair ─────────── */
.pair{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.6vw,24px);
  margin-top:clamp(40px,6vw,70px);
}
.pair figure{ --c:0; margin:0; position:relative; }
.pair img{
  border-radius:clamp(12px,1.4vw,20px);
  border:1px solid var(--line);
  transform:translateY(calc((1 - var(--c)) * 26px));
  opacity:calc(.42 + var(--c) * .58);
  transition:transform .1s linear, opacity .1s linear;
}
.pair figcaption{
  margin-top:10px; font-family:var(--mono); font-size:10px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2);
}
.pair__cap{ max-width:60ch; color:var(--muted); font-size:15px; margin-top:26px; }
@media (max-width:760px){ .pair{ grid-template-columns:repeat(2,1fr); } }

/* ─────────── lab ─────────── */
.lab{ display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(28px,4vw,64px); align-items:start; }
.lab__strats{ display:grid; gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
.strat{
  --c:0;
  background:var(--ink);
  padding:clamp(18px,2vw,26px);
  display:grid; gap:6px;
  border-left:2px solid transparent;
}
.strat b{
  font-family:var(--mono); font-size:14px; letter-spacing:.06em;
  color:var(--gold);
  font-weight:400;
}
@supports (background:color-mix(in srgb,#000 50%,#fff)){
  .strat{
    background:color-mix(in srgb, var(--surface) calc(var(--c) * 60%), var(--ink));
    border-left-color:color-mix(in srgb, var(--gold) calc(var(--c) * 100%), transparent);
  }
  .strat b{ color:color-mix(in srgb, var(--gold) calc(45% + var(--c) * 55%), var(--muted-2)); }
}
.strat span{ font-size:14px; color:var(--muted); }
.code{
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--ink-2);
  box-shadow:0 30px 70px -50px rgba(0,0,0,.9);
  min-width:0; max-width:100%;
}
.code__bar{
  display:flex; align-items:center; gap:7px;
  padding:12px 16px; border-bottom:1px solid var(--line-2);
  background:var(--surface);
}
.code__bar span{ width:9px; height:9px; border-radius:50%; background:var(--line); }
.code__bar em{
  margin-left:auto; font-family:var(--mono); font-style:normal;
  font-size:11px; letter-spacing:.12em; color:var(--muted-2);
}
.code pre{ margin:0; padding:clamp(16px,2vw,24px); overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
.code pre::-webkit-scrollbar{ height:3px; }
.code pre::-webkit-scrollbar-thumb{ background:var(--line); }
.code code{ font-size:clamp(11.5px,.35vw + 10.5px,13.5px); line-height:1.75; color:#C6C4BE; white-space:pre; }
.code i{ color:#C98FD0; font-style:normal; }
.code s{ color:var(--muted-2); text-decoration:none; }
.code u{ color:var(--gold); text-decoration:none; }
.lab__note{ margin-top:20px; font-size:14.5px; color:var(--muted); max-width:56ch; }
@media (max-width:900px){ .lab{ grid-template-columns:1fr; } }

.rules{ margin-top:clamp(50px,7vw,100px); }
.rules h3{ font-family:var(--serif); font-size:clamp(24px,3.2vw,42px); letter-spacing:-.022em; margin-bottom:clamp(24px,3vw,40px); max-width:24ch; }
.rules ol{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); counter-reset:r; }
.rules li{
  --c:0; counter-increment:r;
  background:var(--ink);
  padding:clamp(18px,2vw,28px); display:grid; gap:8px; align-content:start;
}
.rules li::before{
  content:"0" counter(r);
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  color:var(--gold);
}
@supports (background:color-mix(in srgb,#000 50%,#fff)){
  .rules li{ background:color-mix(in srgb, var(--surface) calc(var(--c) * 55%), var(--ink)); }
  .rules li::before{ color:color-mix(in srgb, var(--gold) calc(30% + var(--c) * 70%), var(--muted-2)); }
}
.rules b{ font-size:15px; font-weight:400; }
.rules span{ font-size:13.5px; color:var(--muted); }
.rules__foot{ margin-top:28px; max-width:58ch; color:var(--muted); font-size:15px; }
@media (max-width:1000px){ .rules ol{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .rules ol{ grid-template-columns:1fr; } }

/* ─────────── timeline ─────────── */
.log{ padding:clamp(80px,13vh,150px) 0; }
.tl{ position:relative; padding-left:clamp(22px,4vw,60px); }
.tl__line{
  position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background:var(--line-2);
}
.tl__line i{ display:block; width:100%; height:0; background:linear-gradient(180deg,var(--gold),rgba(203,169,107,.25)); }
.tl__items{ display:grid; gap:clamp(18px,2.4vw,32px); }
.tl__items li{
  --c:0;
  position:relative;
  display:grid; grid-template-columns:130px 78px 1fr; gap:clamp(12px,2vw,26px);
  align-items:baseline;
  opacity:calc(.3 + var(--c) * .7);
  transform:translateX(calc((1 - var(--c)) * 14px));
  transition:opacity .1s linear, transform .1s linear;
}
.tl__items li::before{
  content:""; position:absolute;
  left:calc(clamp(22px,4vw,60px) * -1); top:.62em;
  width:7px; height:7px; margin-left:-3px; border-radius:50%;
  background:var(--ink);
  border:1px solid var(--line);
  transform:scale(calc(.7 + var(--c) * .6));
  transition:transform .1s linear, border-color .1s linear;
}
@supports (border-color:color-mix(in srgb,#000 50%,#fff)){
  .tl__items li::before{ border-color:color-mix(in srgb, var(--gold) calc(var(--c) * 100%), var(--line)); }
}
.tl__items time{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--muted-2); }
.tl__repo{
  justify-self:start;
  padding:3px 9px; border:1px solid var(--line-2); border-radius:100px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);
}
.tl__items p{ margin:0; font-size:clamp(14.5px,.4vw + 13.5px,17px); color:var(--ivory); }
@media (max-width:760px){
  .tl__items li{ grid-template-columns:1fr; gap:6px; }
  .tl__items p{ font-size:15px; }
}

/* ─────────── how I work ─────────── */
.how{ padding:clamp(70px,11vh,130px) 0; }
.how__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
.how__grid article{
  --c:0;
  background:var(--ink);
  padding:clamp(24px,3vw,40px);
}
.how__grid b{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(20px,1.9vw,27px); letter-spacing:-.015em; margin-bottom:12px;
  color:var(--ivory);
}
@supports (background:color-mix(in srgb,#000 50%,#fff)){
  .how__grid article{ background:color-mix(in srgb, var(--surface) calc(var(--c) * 60%), var(--ink)); }
  .how__grid b{ color:color-mix(in srgb, var(--gold-hi) calc(var(--c) * 100%), var(--ivory)); }
}
.how__grid p{ margin:0; font-size:14.5px; color:var(--muted); }
@media (max-width:960px){ .how__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .how__grid{ grid-template-columns:1fr; } }

/* ─────────── marquee ─────────── */
.stack{ padding:clamp(70px,11vh,130px) 0; overflow:hidden; }
.marq{ display:grid; gap:clamp(8px,1vw,14px); margin:clamp(30px,5vw,60px) 0; user-select:none; }
.marq__row{ display:flex; width:max-content; will-change:transform; }
.marq__set{ display:flex; gap:clamp(8px,1vw,14px); padding-right:clamp(8px,1vw,14px); }
.marq__set span{
  display:block; white-space:nowrap;
  padding:10px 22px; border:1px solid var(--line-2); border-radius:100px;
  font-family:var(--mono); font-size:clamp(11px,.9vw,13px); letter-spacing:.08em;
  color:var(--muted);
}
.stack__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,3vw,44px); margin-top:clamp(30px,5vw,60px); }
.stack__grid h4{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); margin-bottom:12px;
  padding-bottom:12px; border-bottom:1px solid var(--line-2);
}
.stack__grid p{ margin:0; font-size:14px; color:var(--muted); line-height:1.75; }
@media (max-width:1000px){ .stack__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .stack__grid{ grid-template-columns:1fr; } }

/* ─────────── about ─────────── */
.about{ padding:clamp(70px,11vh,130px) 0; }
.about__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(30px,5vw,72px); align-items:start; }
.about__img{ --c:0; position:sticky; top:110px; }
.about__frame{
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:var(--surface);
  clip-path:inset(calc((1 - var(--c)) * 22%) 0 0 0 round 16px);
  transition:clip-path .1s linear;
}
.about__frame img{
  width:100%;
  transform:scale(calc(1.06 - var(--c) * .06));
  /* a light grade so a warm old photo sits inside this palette instead of fighting it */
  filter:saturate(.72) contrast(1.06) brightness(.94);
  transition:transform .1s linear;
}
.about__cap{
  margin-top:14px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2);
}
.about__txt p{ color:var(--muted); max-width:58ch; }
.about__txt p:first-of-type{ color:var(--ivory); }
.about__facts{ display:grid; gap:1px; background:var(--line-2); border:1px solid var(--line-2); margin-top:clamp(24px,3vw,40px); }
.about__facts li{ background:var(--ink); padding:clamp(16px,1.8vw,22px); display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:baseline; }
.about__facts b{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:400; }
.about__facts span{ font-size:14.5px; color:var(--muted); }
@media (max-width:900px){
  .about__grid{ grid-template-columns:1fr; }
  .about__img{ position:static; max-width:420px; }
  .about__facts li{ grid-template-columns:1fr; gap:4px; }
}

/* ─────────── signature moment ─────────── */
.sig{ height:230vh; height:230svh; position:relative; }
.sig__pin{
  position:sticky; top:0; height:100vh; height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(18px,3vw,34px);
  padding:0 var(--gutter); text-align:center; overflow:hidden;
}
.sig__pre{
  --c:0;
  font-family:var(--mono); font-size:clamp(10px,1.2vw,12px);
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted-2); margin:0;
  opacity:var(--c);
}
.sig__big{
  font-family:var(--serif);
  font-size:clamp(34px,9.5vw,150px);
  line-height:1; letter-spacing:-.035em;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:0 .28em;
  margin:0;
}
.sig__big span{
  display:inline-block;
  opacity:0; transform:translateY(46px) scale(.94); filter:blur(8px);
  transition:opacity .8s var(--ease-out), transform .9s var(--ease-out), filter .8s var(--ease-out);
}
.sig__big span.in{ opacity:1; transform:none; filter:none; }
.sig__big span:nth-child(3),
.sig__big span:nth-child(4){ color:var(--gold); }
.sig__rule{
  width:min(720px,80vw); height:1px; background:var(--line);
  position:relative; overflow:hidden;
}
.sig__rule i{ position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,transparent,var(--gold),transparent); }

/* ─────────── contact ─────────── */
.contact{ padding:clamp(80px,14vh,170px) 0 clamp(60px,9vh,110px); }
.contact__t{
  font-family:var(--serif); font-size:clamp(38px,7vw,100px);
  line-height:1.02; letter-spacing:-.032em; margin-bottom:.35em;
}
.contact__t em{ color:var(--gold); font-style:italic; }
.contact__d{ max-width:56ch; color:var(--muted); font-size:clamp(15px,.6vw + 13px,18px); margin-bottom:clamp(34px,5vw,56px); }
.contact__links{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
.cbtn{
  background:var(--ink); padding:clamp(22px,3vw,36px);
  display:grid; gap:8px;
  transition:background-color .45s var(--ease);
}
.cbtn:hover{ background:var(--surface-2); }
.cbtn__l{ font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.cbtn__v{ font-family:var(--serif); font-size:clamp(17px,1.5vw,23px); letter-spacing:-.01em; word-break:break-word; }
@media (max-width:800px){ .contact__links{ grid-template-columns:1fr; } }

/* ─────────── footer ─────────── */
.foot{ border-top:1px solid var(--line-2); padding:30px 0 calc(30px + env(safe-area-inset-bottom)); }
.foot__in{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2);
}
.foot__in a{ transition:color .3s ease; }
.foot__in a:hover{ color:var(--gold); }
.foot__mid{ text-align:center; }
@media (max-width:700px){ .foot__in{ justify-content:center; text-align:center; } .foot__mid{ order:3; width:100%; } }

/* ─────────── reduced motion ─────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-rise]{ opacity:1 !important; transform:none !important; }
  [data-grow]{ transform:scaleX(1) !important; }
  .grain{ display:none; }
  .field{ display:none; }
  .stage,.rail,.sig{ height:auto !important; }
  .stage__pin,.rail__pin,.sig__pin{ position:static !important; height:auto !important; padding-block:clamp(60px,10vh,110px); }
  .rail__track{ overflow-x:auto; transform:none !important; }
  .stage__words w{ color:var(--ivory) !important; }
  .sig__big span{ opacity:1 !important; transform:none !important; filter:none !important; }
  .hero__title .line__i{ opacity:1 !important; transform:none !important; }
  .boot{ display:none !important; }
  .phones__col{ transform:none !important; }
  .marq__row{ transform:none !important; }
}