/* ============================================================
   Shivdatt Patel — The Ace of Spades
   One token system. One grid. One motion language.
   ============================================================ */

@property --ry { syntax:'<length>'; inherits:false; initial-value:0px }
@property --reveal { syntax:'<number>'; inherits:true; initial-value:1 }
@property --rx  { syntax:'<angle>'; inherits:false; initial-value:0deg }
@property --rz  { syntax:'<angle>'; inherits:false; initial-value:0deg }
@property --glow-c { syntax:'<color>'; inherits:false; initial-value:rgba(198,182,152,.085) }

:root{
  --ink:#07080a;
  --ink-2:#0c0e11;
  --paper:#f4f1e9;
  --paper-2:#b6b4ab;
  --paper-3:#82817a;
  --line:rgba(244,241,233,.09);
  --line-2:rgba(244,241,233,.17);
  --suit:#d1392c;

  --gutter:clamp(22px,4.6vw,78px);
  --header-h:clamp(62px,8vh,86px);
  --measure:52ch;

  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Italiana',Georgia,serif;

  --t-micro:clamp(9.5px,.72vw,11px);
  --t-small:clamp(12px,.92vw,13.5px);
  --t-body:clamp(15px,1.1vw,16.5px);
  --t-lead:clamp(18px,1.4vw,21px);
  --t-h3:clamp(15px,1.1vw,17px);
  --t-h2:clamp(38px,4.25vw,65px);

  --ease:cubic-bezier(.16,1,.3,1);          /* expo out — the house curve */
  --ease-io:cubic-bezier(.62,.02,.28,1);
  --dur:.9s;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.62;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures;
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0}
ol,ul{list-style:none;padding:0}
svg{display:block}
canvas{display:block}
::selection{background:var(--suit);color:#fff}

:where(a,button):focus-visible{outline:2px solid var(--suit);outline-offset:6px;border-radius:3px}

.skip{
  position:fixed;top:0;left:var(--gutter);z-index:90;
  transform:translateY(-130%);
  background:var(--paper);color:var(--ink);
  padding:12px 18px;font-size:var(--t-small);font-weight:600;
  transition:transform .32s var(--ease);
}
.skip:focus{transform:translateY(14px)}

/* one label style, used everywhere a label is genuinely a label */
.eyebrow,.caption,.status,.chapter-tag,.cue,.intro-meta,footer,
.visual-foot,.tags,.track,.keywords,.metrics dd,.timeline span,
.node small,.check,.tools span,.coord,.signoff,.down{
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  line-height:1.5;
}

/* ============================================================
   1 · STAGE
   ============================================================ */
.world{
  position:fixed;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
  background:var(--ink);
  contain:strict;
}
.gridlines{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(244,241,233,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,241,233,.026) 1px,transparent 1px);
  background-size:min(9vw,120px) min(9vw,120px);
  background-position:50% 50%;
  mask-image:radial-gradient(ellipse 85% 78% at 50% 50%,#000 20%,transparent 98%);
  -webkit-mask-image:radial-gradient(ellipse 85% 78% at 50% 50%,#000 20%,transparent 98%);
}
.glow{
  position:absolute;left:50%;top:46%;
  width:150vmax;height:110vmax;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 40% 36% at 50% 50%,var(--glow-c),transparent 70%);
  transition:--glow-c 1.2s var(--ease);
  will-change:transform;
}
.wordmark{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-weight:800;font-size:26vw;letter-spacing:-.075em;
  color:transparent;
  -webkit-text-stroke:1px rgba(244,241,233,.042);
  white-space:nowrap;
  will-change:transform,opacity,filter;
  transition:opacity .45s var(--ease),filter .45s var(--ease);
}
.wordmark.swapping{opacity:.15;filter:blur(16px)}
.deck{position:absolute;inset:0;width:100%;height:100%}
.vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 68% at 50% 48%,transparent 42%,rgba(7,8,10,.56) 100%),
    linear-gradient(rgba(7,8,10,.74),transparent 18%,transparent 78%,rgba(7,8,10,.88));
}
.scrim{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(7,8,10,.94) 0%,rgba(7,8,10,.82) 26%,rgba(7,8,10,.3) 46%,transparent 62%);
  transition:opacity .8s var(--ease);
}
.contact-live .scrim{opacity:0}
.grain{
  position:absolute;inset:-50%;opacity:.019;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   2 · HEADER + HUD
   ============================================================ */
.progress{position:fixed;inset:0 0 auto;height:2px;z-index:70;pointer-events:none}
.progress i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,rgba(209,57,44,.35),var(--suit));
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
}

header{
  position:fixed;inset:0 0 auto;z-index:60;
  height:var(--header-h);
  padding:0 var(--gutter);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  border-bottom:1px solid transparent;
  transition:background .55s var(--ease),backdrop-filter .55s var(--ease),border-color .55s var(--ease);
}
header.stuck{
  background:rgba(7,8,10,.64);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border-bottom-color:var(--line);
}

.logo{display:flex;align-items:center;gap:11px;justify-self:start}
.logo-pip{font-family:var(--serif);font-size:34px;line-height:1;transition:transform .7s var(--ease)}
.logo:hover .logo-pip{transform:rotate(-14deg) scale(1.1)}
.logo-name{font-size:var(--t-micro);font-weight:800;letter-spacing:.11em;text-transform:uppercase;line-height:1.35}

nav{display:flex;gap:clamp(16px,2.2vw,38px);font-size:var(--t-small);font-weight:500}
nav a{position:relative;display:flex;align-items:baseline;gap:5px;padding:9px 0;color:var(--paper-2)}
nav a span{position:relative;display:block}
/* the label slides up and its twin slides in behind it */
nav a::after{
  content:'';position:absolute;left:0;bottom:3px;height:1px;width:100%;
  background:var(--suit);
  transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .5s var(--ease);
}
nav a:hover{color:var(--paper);transition:color .4s var(--ease)}
nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}
nav sup{font-size:.62em;color:var(--suit);letter-spacing:.06em;top:-.55em}

.controls{display:flex;gap:6px;justify-self:end}
.ctl{
  display:flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(244,241,233,.025);
  color:var(--paper-3);
  font-size:var(--t-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.ctl:hover{color:var(--paper);border-color:var(--line-2)}
.ctl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ctl[aria-pressed="true"]{color:var(--paper);background:rgba(244,241,233,.075);border-color:var(--line-2)}
.sound .snd-on{opacity:0;transition:opacity .35s var(--ease)}
.sound .snd-off{opacity:1;transition:opacity .35s var(--ease)}
.sound[aria-pressed="true"] .snd-on{opacity:1}
.sound[aria-pressed="true"] .snd-off{opacity:0}
.motion svg{transition:transform .8s var(--ease),opacity .4s var(--ease)}
.motion[aria-pressed="false"] svg{transform:rotate(-135deg);opacity:.5}

.frame{position:fixed;inset:clamp(12px,1.6vw,22px);z-index:44;pointer-events:none}
.frame i{position:absolute;width:15px;height:15px;border:0 solid rgba(244,241,233,.22)}
.frame i:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.frame i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.frame i:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.frame i:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}

.chapter-tag{
  position:fixed;left:var(--gutter);bottom:22px;z-index:50;
  display:flex;align-items:center;gap:12px;color:var(--paper-3);
  padding:9px 14px;border-radius:999px;
  background:rgba(7,8,10,.6);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);
  pointer-events:none;transition:opacity .55s var(--ease);
}
.chapter-tag.hide{opacity:0}
.chapter-tag b{color:var(--suit);font-weight:700;font-variant-numeric:tabular-nums}
.chapter-tag i{width:30px;height:1px;background:var(--line-2)}
.chapter-tag span{
  display:inline-block;min-width:96px;
  transition:opacity .26s var(--ease),transform .26s var(--ease);
}
.chapter-tag.swap span{opacity:0;transform:translateY(-6px)}

.cue{
  position:fixed;right:var(--gutter);bottom:22px;z-index:50;
  display:flex;align-items:center;gap:13px;color:var(--paper-3);
  padding:9px 14px;border-radius:999px;
  background:rgba(7,8,10,.6);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);
  pointer-events:none;
}
.cue i{width:36px;height:1px;background:var(--paper-3);transform-origin:0 50%;animation:cue 2.6s var(--ease-io) infinite}
@keyframes cue{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.26)}}

/* ============================================================
   3 · CHAPTER GRID
   ============================================================ */
main{position:relative;z-index:2;pointer-events:none}
main a,main button{pointer-events:auto}

.chapter{position:relative}
.chapter.intro{height:165vh}
.chapter.solo{height:140vh}
.chapter.split{height:150vh}
.chapter.contact{height:150vh}

.pin{
  position:sticky;top:0;
  height:100svh;min-height:640px;
  padding:calc(var(--header-h) + clamp(18px,3vh,36px)) var(--gutter) clamp(96px,12vh,130px);
  display:grid;align-items:center;
}
.split .pin{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(28px,4.4vw,80px)}
.split.flip .pin{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr)}
.split.flip .copy{order:2;justify-self:end}
.split.flip .visual{order:1}
.solo .pin{grid-template-columns:minmax(0,1fr)}

.copy{max-width:640px}
.work .copy{max-width:560px}
.work .copy p{max-width:46ch}
.eyebrow{display:block;color:var(--paper-3)}
.copy>.eyebrow{margin-bottom:clamp(20px,2.4vh,30px)}

.meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:clamp(20px,2.4vh,30px)}
.meta .eyebrow{margin:0}
.status{color:var(--paper-2);padding:4px 0 4px 10px;border-left:2px solid var(--paper-3)}
.status.is-live{border-left-color:var(--suit)}

h2{
  font-size:var(--t-h2);font-weight:800;
  line-height:1.02;letter-spacing:-.045em;
  margin-bottom:clamp(16px,2vh,26px);
  text-wrap:balance;
}
/* Italiana sits short against Manrope 800 — this is the optical correction */
h2 em{
  display:block;
  font-family:var(--serif);font-weight:400;font-style:normal;
  font-size:1.22em;line-height:.97;letter-spacing:-.028em;
  color:#e0dccf;
}

.copy h3{font-size:var(--t-h3);font-weight:600;letter-spacing:.015em;margin:clamp(16px,2vh,24px) 0 10px}
.copy p{color:var(--paper-2);max-width:var(--measure);margin-top:clamp(12px,1.4vh,18px)}
.copy p.lead{font-size:var(--t-lead);line-height:1.48;color:var(--paper);letter-spacing:-.012em;max-width:26ch}
.copy p.note{font-size:var(--t-small);line-height:1.62;color:var(--paper-3);max-width:46ch;margin-top:clamp(16px,2vh,24px)}

.link{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:clamp(18px,2.4vh,28px);padding-bottom:9px;
  font-size:var(--t-small);font-weight:600;
  border-bottom:1px solid var(--line-2);
  transition:border-color .45s var(--ease),gap .45s var(--ease);
}
.link:hover{border-bottom-color:var(--paper);gap:14px}
.cta{
  display:inline-flex;align-items:center;gap:11px;
  margin-top:clamp(18px,2.4vh,28px);
  padding:15px 28px;border-radius:999px;
  font-size:var(--t-small);font-weight:600;letter-spacing:.04em;
  border:1px solid var(--line-2);
  background:rgba(244,241,233,.04);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .5s var(--ease),background .5s var(--ease),gap .45s var(--ease),transform .5s var(--ease);
}
.cta:hover{border-color:var(--suit);background:rgba(209,57,44,.1);gap:15px;transform:translateY(-2px)}
.link i,.cta i{
  width:8px;height:8px;
  border-right:1.4px solid currentColor;border-top:1.4px solid currentColor;
  transform:rotate(45deg);
}

.metrics{display:flex;gap:clamp(28px,3.6vw,56px);margin-top:clamp(18px,2.4vh,28px)}
.metrics dt{font-family:var(--serif);font-size:clamp(32px,3.1vw,46px);line-height:1;color:#ebe7db}
.metrics dd{margin:9px 0 0;color:var(--paper-3)}

.keywords{display:flex;align-items:center;gap:14px;margin-top:clamp(20px,2.6vh,30px)!important}
.keywords i{width:16px;height:1px;background:var(--suit);position:relative}
.keywords i::after{
  content:'';position:absolute;right:0;top:-2px;width:5px;height:5px;
  border-right:1px solid var(--suit);border-top:1px solid var(--suit);transform:rotate(45deg);
}

/* ============================================================
   4 · INTRO
   ============================================================ */
.intro .pin{grid-template-rows:auto 1fr auto;align-items:stretch;padding-bottom:clamp(88px,12vh,120px)}
.intro-meta{display:flex;justify-content:space-between;gap:20px;color:var(--paper-3)}
.intro-head{align-self:start;margin-top:clamp(26px,8vh,96px);text-align:left;max-width:min(58%,720px)}

h1{display:grid;justify-items:start;font-weight:400;line-height:1;text-wrap:balance}
.mask{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.h1-sans{
  display:block;font-weight:800;
  font-size:clamp(46px,7.85vw,120px);
  letter-spacing:-.058em;line-height:.96;
}
.h1-serif{
  display:block;font-family:var(--serif);
  font-size:clamp(56px,9.6vw,148px);
  letter-spacing:-.034em;line-height:.94;
  color:#e9e5d9;
}
.thesis{margin-top:clamp(18px,2.6vh,30px);font-size:var(--t-small);line-height:1.85;letter-spacing:.05em;color:var(--paper-3)}
.thesis em{font-style:normal;color:var(--paper-2)}

.intro-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.signoff{line-height:1.9;font-weight:700}
.signoff span{font-weight:500;color:var(--paper-3)}
.down{
  display:flex;align-items:center;gap:14px;
  padding:13px 22px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(244,241,233,.03);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .5s var(--ease),background .5s var(--ease);
}
.down:hover{border-color:var(--line-2);background:rgba(244,241,233,.07)}
.down i{
  width:9px;height:9px;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg);animation:bob 2.8s var(--ease-io) infinite;
}
@keyframes bob{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(3px,3px)}}

/* ── load choreography: one orchestrated moment ──────────── */
.rise{display:block}
.js.booting .rise{transform:translateY(112%);opacity:0}
.js.booting .thesis.rise,
.js.booting .signoff.rise,
.js.booting .down.rise,
.js.booting .intro-meta .rise{transform:translateY(16px)}
.js .rise{
  transition:transform 1.15s var(--ease),opacity .9s var(--ease);
  transition-delay:calc(var(--d,0) * 85ms + 120ms);
}

/* ============================================================
   5 · PROJECT VISUALS
   ============================================================ */
.visual{
  position:relative;
  display:flex;flex-direction:column;
  height:clamp(400px,42vw,530px);
  padding:clamp(18px,1.7vw,26px);
  border:1px solid var(--line);border-radius:18px;
  background:var(--ink-2);
  box-shadow:0 44px 96px -34px rgba(0,0,0,.72);
  overflow:hidden;isolation:isolate;
}
.visual::before{
  content:attr(data-n);
  position:absolute;right:-14px;bottom:-52px;z-index:0;
  font-size:clamp(150px,15vw,220px);font-weight:800;letter-spacing:-.06em;line-height:1;
  color:rgba(244,241,233,.028);
  pointer-events:none;
}
.v-voice::before{color:rgba(20,40,38,.05)}
.visual::after{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:3;
  background:radial-gradient(460px circle at var(--gx,50%) var(--gy,18%),rgba(255,255,255,.09),transparent 62%);
  opacity:0;transition:opacity .55s var(--ease);
  pointer-events:none;
}
.visual:hover::after{opacity:1}
.visual-head,.visual-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex:0 0 auto;position:relative;z-index:1}
.visual-body{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:flex}
.brand{
  display:flex;align-items:center;gap:8px;
  font-size:clamp(17px,1.5vw,22px);font-weight:600;letter-spacing:-.02em;text-transform:none;
}
.brand svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.brand-serif{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.1vw,32px);letter-spacing:0}
.brand-mono{font-weight:700;letter-spacing:.02em;gap:2px}
.brand-mono i{font-style:normal;opacity:.4}
.brand-wide{font-size:clamp(13px,1vw,15px);letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.caption{color:var(--paper-3);text-align:right;max-width:20ch}
.visual-foot{color:var(--paper-3)}
.visual-foot i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55}

/* ── Sara ─────────────────────────────────────────────────── */
.v-sara{
  background:radial-gradient(ellipse 66% 60% at 50% 46%,#32302a,#131310 74%);
  border-color:rgba(184,167,134,.2);
}
.v-sara .caption,.v-sara .visual-foot{color:#9e9886}
.v-sara .brand{color:#e8dec9}
.threads{
  position:absolute;inset:0;width:100%;height:100%;
  fill:none;stroke:rgba(190,173,140,.3);stroke-width:1;
  vector-effect:non-scaling-stroke;
  transition:stroke-dashoffset 1.4s var(--ease) .15s;
}
.threads path{vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--reveal));transition:stroke-dashoffset 1.4s var(--ease) .15s}
.core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(126px,12.6vw,162px);aspect-ratio:1;display:grid;place-items:center;
}
.core span{font-family:var(--serif);font-size:clamp(74px,7.4vw,98px);line-height:1;color:#ece0c8}
.halo{
  position:absolute;border:1px solid rgba(184,167,134,.32);border-radius:50%;
  transform:scale(calc(.8 + var(--reveal) * .2));
  transition:transform 1.1s var(--ease);
}
.halo.h1{inset:0}
.halo.h2{inset:-22px;border-color:rgba(184,167,134,.16)}
.halo.h3{inset:-48px;border-color:rgba(184,167,134,.07)}
.visual.in .halo.h1{animation:breathe 7s var(--ease-io) infinite}
.visual.in .halo.h2{animation:breathe 7s var(--ease-io) .5s infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

.chip{
  position:absolute;display:inline-flex;align-items:center;gap:9px;
  padding:11px 14px;border-radius:12px;
  border:1px solid rgba(184,167,134,.19);
  background:rgba(28,27,22,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#d8d3c4;
  font-size:var(--t-small);font-weight:500;letter-spacing:0;white-space:nowrap;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.8);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.js .visual:not(.in) .chip{opacity:0;transform:translateY(14px) scale(.97)}
.chip svg{width:15px;height:15px;fill:none;stroke:#c4b392;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.visual.in .chip{opacity:1;transform:none}
.visual.in .c1{transition-delay:.26s}
.visual.in .c2{transition-delay:.42s}
.visual.in .c3{transition-delay:.58s}
.visual.in .chip{animation:chipfloat 5.5s var(--ease-io) 1.4s infinite alternate}
.visual.in .c2{animation-delay:1.9s}
.visual.in .c3{animation-delay:2.4s}
@keyframes chipfloat{from{translate:0 0}to{translate:0 -7px}}
.c1{left:0;top:8%}
.c2{right:0;top:48%}
.c3{left:4%;bottom:4%}

/* ── Project G ────────────────────────────────────────────── */
.v-g{
  background:radial-gradient(ellipse 70% 64% at 50% 48%,#15201d,#0d1312 76%);
  border-color:rgba(122,166,146,.18);
}
.v-g .brand{color:#d2e6da}
.v-g .caption,.v-g .visual-foot{color:#87a494}
.flow{
  width:100%;align-self:center;
  display:flex;flex-direction:column;gap:var(--fgap,16px);
  padding:0 clamp(0px,3vw,38px);
  --fgap:clamp(10px,1.5vh,18px);
}
.flow>*+*{position:relative}
.flow>*+*::before{
  content:'';position:absolute;left:50%;top:calc(-1 * var(--fgap));
  height:var(--fgap);width:1px;
  background:linear-gradient(rgba(137,172,153,.6),rgba(137,172,153,.2));
  transform:scaleY(var(--reveal));transform-origin:50% 0;
  transition:transform .8s var(--ease);
}
/* a signal travelling down the chain */
.flow>*+*::after{
  content:'';position:absolute;left:50%;top:calc(-1 * var(--fgap));
  width:3px;height:3px;margin-left:-1.5px;border-radius:50%;
  background:#a8d4bb;box-shadow:0 0 7px rgba(168,212,187,.8);
  opacity:0;
}
.visual.in .flow>*+*::after{animation:travel 3.4s var(--ease-io) infinite}
.visual.in .flow>*:nth-child(3)::after{animation-delay:.28s}
.visual.in .flow>*:nth-child(4)::after{animation-delay:.56s}
@keyframes travel{
  0%,72%{opacity:0;transform:translateY(0)}
  76%{opacity:1}
  94%{opacity:1;transform:translateY(var(--fgap))}
  100%{opacity:0;transform:translateY(var(--fgap))}
}
.node{
  display:flex;align-items:center;gap:14px;
  padding:clamp(12px,1.5vh,17px) clamp(14px,1.4vw,20px);
  border:1px solid rgba(130,158,137,.3);border-radius:13px;
  background:rgba(25,38,33,.8);
}
.node svg{width:19px;height:19px;fill:none;stroke:#aacdbb;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.node small{display:block;margin-bottom:4px;color:#87a693}
.node b{font-size:clamp(14px,1.2vw,17px);font-weight:600;letter-spacing:-.01em;text-transform:none;letter-spacing:-.008em}
.pulse{
  width:7px;height:7px;border-radius:50%;background:#9cc9ac;margin-left:auto;flex:0 0 auto;
}
.visual.in .pulse{animation:pulse 2.8s var(--ease-io) infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(156,201,172,.42)}
  70%{box-shadow:0 0 0 12px rgba(156,201,172,0)}
  100%{box-shadow:0 0 0 0 rgba(156,201,172,0)}
}
.check{
  align-self:center;display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:999px;
  background:rgba(13,19,18,.95);border:1px solid rgba(130,158,137,.2);
  color:#c9d8cc;white-space:nowrap;
}
.check svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tools{display:flex;justify-content:space-around;gap:10px;padding-top:4px}
.tools span{display:flex;flex-direction:column;align-items:center;gap:8px;color:#87a493;text-align:center}
.tools svg{width:18px;height:18px;fill:none;stroke:#bccfc2;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ── vLabs ────────────────────────────────────────────────── */
.v-voice{
  background:linear-gradient(152deg,#e0ddd3,#a9b2af);
  border-color:rgba(255,255,255,.38);
  color:#202e2c;
}
.v-voice .brand{color:#1b2927}
.v-voice .caption,.v-voice .visual-foot{color:#475955}
.v-voice .brand svg{stroke:#1b2927}
.v-voice .visual-body{flex-direction:column;justify-content:space-between;padding:clamp(14px,2vh,26px) 0 0}
.voice-line{font-size:clamp(28px,3.05vw,45px);font-weight:500;line-height:1.05;letter-spacing:-.035em}
.voice-line em{font-family:var(--serif);font-style:normal;font-weight:400;font-size:1.16em;letter-spacing:-.02em}
.waveform{flex:1 1 auto;width:100%;min-height:0;margin:clamp(8px,1.6vh,18px) 0}
.tags{display:flex;gap:9px;flex-wrap:wrap}
.tags span{border:1px solid rgba(45,72,70,.28);border-radius:999px;padding:6px 12px;color:#2b4644}

/* ── Adam ─────────────────────────────────────────────────── */
.v-adam{
  background-color:#0d1015;
  background-image:
    linear-gradient(rgba(150,175,193,.042) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,175,193,.042) 1px,transparent 1px);
  background-size:30px 30px;
  border-color:rgba(138,169,192,.18);
}
.v-adam .brand{color:#c8d6e1}
.v-adam .caption,.v-adam .visual-foot{color:#8598a6}
.v-adam .visual-body{flex-direction:column;align-items:center;justify-content:space-between;padding-top:clamp(8px,1.6vh,18px)}
.blueprint{position:relative;width:clamp(168px,18.5vw,232px);aspect-ratio:1;flex:0 1 auto}
.ring{
  position:absolute;border:1px solid rgba(144,167,190,.36);border-radius:50%;inset:0;
  transform:scale(calc(.6 + var(--reveal) * .4));
  transition:transform 1.2s var(--ease);
}
.ring.r2{
  inset:24px;border-style:dashed;border-color:rgba(144,167,190,.19);
  transform:rotate(calc(var(--reveal) * 140deg));
  transition:transform 1.6s var(--ease);
}
.ring.r3{
  inset:-20px;border-color:rgba(144,167,190,.1);
  transform:scale(calc(.85 + var(--reveal) * .15));
}
.visual.in .ring.r2{animation:spin 42s linear infinite}
.visual.in .ring.r3{animation:spinr 70s linear infinite}
@keyframes spinr{to{transform:scale(1) rotate(-360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.cross{
  position:absolute;inset:-12px;
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(144,167,190,.15) 50%,transparent calc(50% + .5px)),
    linear-gradient(transparent calc(50% - .5px),rgba(144,167,190,.15) 50%,transparent calc(50% + .5px));
}
.mono-a{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--serif);font-size:clamp(100px,10.6vw,146px);line-height:1;color:#ccd9e1;
  clip-path:inset(calc((1 - var(--reveal)) * 100%) 0 0);
  transition:clip-path 1.3s var(--ease);
}
.coord{position:absolute;font-style:normal;color:#93a5b4;background:#0d1015;padding:4px 6px}
.k1{left:-18px;top:12px}
.k2{right:-18px;bottom:12px}
.track{display:flex;justify-content:space-between;gap:10px;width:100%;margin-top:clamp(10px,2vh,20px);color:#7b8790}
.track li{flex:1;border-top:1px solid rgba(98,115,128,.34);padding-top:11px}
.track li+li{text-align:center}
.track li:last-child{text-align:right}
.track .done{color:#dde4e9;border-top-color:#a8bbc8}

/* ============================================================
   6 · CRAFT / PATH
   ============================================================ */
.accordion{margin-top:clamp(20px,3vh,34px);max-width:var(--measure)}
.acc{border-top:1px solid var(--line)}
.acc:last-child{border-bottom:1px solid var(--line)}
.acc button{
  width:100%;display:flex;align-items:center;gap:14px;
  padding:clamp(14px,1.9vh,20px) 0;
  font-size:clamp(15px,1.14vw,17px);font-weight:500;
  letter-spacing:-.012em;text-align:left;
  transition:color .4s var(--ease);
}
.acc button>span{flex:1}
.acc button:hover{color:#fff}
.pip{
  font-style:normal;font-family:var(--serif);font-size:1.15em;line-height:1;
  width:1.1em;color:var(--paper-3);
  transition:color .45s var(--ease),transform .5s var(--ease);
}
.pip.red{color:#8d4a44}
.acc button[aria-expanded="true"] .pip{color:var(--paper);transform:translateY(-1px) scale(1.12)}
.acc button[aria-expanded="true"] .pip.red{color:var(--suit)}
.acc button i{position:relative;width:11px;height:11px;flex:0 0 auto;transition:transform .55s var(--ease)}
.acc button i::before,.acc button i::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--paper-3);
  transform:translate(-50%,-50%);transition:background .4s var(--ease),opacity .4s var(--ease);
}
.acc button i::before{width:11px;height:1.4px}
.acc button i::after{width:1.4px;height:11px}
.acc button[aria-expanded="true"] i{transform:rotate(180deg)}
.acc button[aria-expanded="true"] i::before{background:var(--suit)}
.acc button[aria-expanded="true"] i::after{opacity:0}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease)}
.acc button[aria-expanded="true"] + .acc-body{grid-template-rows:1fr}
.acc-body>p{
  overflow:hidden;min-height:0;margin:0;
  padding-bottom:clamp(14px,2vh,20px);padding-left:calc(1.1em + 14px);
  font-size:var(--t-small);line-height:1.72;color:var(--paper-3);
  opacity:0;transition:opacity .5s var(--ease) .1s;
}
.acc button[aria-expanded="true"] + .acc-body>p{opacity:1}

.timeline{margin-top:clamp(20px,3vh,34px);max-width:var(--measure)}
.timeline li{padding:clamp(14px,2vh,20px) 0;border-top:1px solid var(--line)}
.timeline li:last-child{border-bottom:1px solid var(--line)}
.timeline span{color:var(--paper-3)}
.timeline h3{font-size:clamp(16px,1.35vw,20px);font-weight:600;letter-spacing:-.016em;margin:8px 0 4px}
.timeline p{font-size:var(--t-small);color:var(--paper-3);margin:0}

/* ============================================================
   7 · CONTACT
   ============================================================ */
.contact .pin{grid-template-rows:1fr auto;justify-items:center;text-align:center;align-items:start}
.closing{align-self:start;margin-top:clamp(6px,2.5vh,30px);display:flex;flex-direction:column;align-items:center}
.closing .eyebrow{color:var(--paper-3);max-width:34ch}
.contact h2{display:grid;margin:clamp(12px,1.8vh,22px) 0 clamp(14px,2vh,24px);letter-spacing:0}
.contact .h1-sans{font-size:clamp(46px,6.4vw,96px);letter-spacing:-.06em;line-height:.95}
.contact .h1-serif{font-size:clamp(54px,7.6vw,114px);letter-spacing:-.036em;line-height:.93}
.mail{
  display:block;margin-top:clamp(16px,2.2vh,24px);
  font-size:var(--t-small);color:var(--paper-3);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.mail:hover{color:var(--paper);border-bottom-color:var(--line-2)}

footer{
  align-self:end;width:100%;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  color:var(--paper-3);
}
footer a{transition:color .4s var(--ease)}
footer a:hover{color:var(--paper)}

/* ============================================================
   8 · REVEAL + PARALLAX
   --ry is the reveal offset, --py is the scroll parallax offset.
   They live on separate properties so neither clobbers the other.
   ============================================================ */
/* visuals: block reveal + live 3D tilt */
.js .visual[data-reveal]{
  --ry:26px;
  opacity:0;
  transform:translate3d(0,calc(var(--ry) + var(--py,0px)),0)
            perspective(1150px) rotateX(var(--rx,0deg)) rotateY(var(--rz,0deg));
  transition:opacity var(--dur) var(--ease),--ry var(--dur) var(--ease),
             --rx .6s var(--ease),--rz .6s var(--ease);
  transition-delay:calc(var(--reveal-delay,0) * .1s);
  will-change:transform,opacity;
}
.js .visual[data-reveal].in{--ry:0px;opacity:1;transition-delay:0s,0s,0s,0s}
.js .visual[data-reveal].fx{
  transition:--ry var(--dur) var(--ease),--rx .6s var(--ease),--rz .6s var(--ease);
}
.js .visual:not(.in){--reveal:0}

/* copy blocks: the container only carries parallax; children stagger up */
.js :is(.copy,.closing)[data-reveal]{transform:translate3d(0,var(--py,0px),0)}
.js :is(.copy,.closing)[data-reveal]>*{
  opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease),filter .95s var(--ease);
}
.js :is(.copy,.closing)[data-reveal]>h2,
.js :is(.copy,.closing)[data-reveal] .accordion,
.js :is(.copy,.closing)[data-reveal] .timeline{filter:blur(10px)}
.js :is(.copy,.closing)[data-reveal].in>*{opacity:1;transform:none;filter:blur(0)}
.js :is(.copy,.closing)[data-reveal].in>*:nth-child(1){transition-delay:.02s}
.js :is(.copy,.closing)[data-reveal].in>*:nth-child(2){transition-delay:.1s}
.js :is(.copy,.closing)[data-reveal].in>*:nth-child(3){transition-delay:.18s}
.js :is(.copy,.closing)[data-reveal].in>*:nth-child(4){transition-delay:.26s}
.js :is(.copy,.closing)[data-reveal].in>*:nth-child(5){transition-delay:.34s}
.js :is(.copy,.closing)[data-reveal].in>*:nth-child(6){transition-delay:.42s}
.js :is(.copy,.closing)[data-reveal].in>*:nth-child(7){transition-delay:.5s}
.js :is(.copy,.closing)[data-reveal].in>*:nth-child(8){transition-delay:.58s}

/* ── loader ─────────────────────────────────────────────────── */
.loader{
  position:fixed;inset:0;z-index:96;
  background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:clip-path 1s var(--ease),visibility 0s linear 1s;
  clip-path:inset(0 0 0 0);
}
.loader.done{clip-path:inset(0 0 100% 0);visibility:hidden}
.loader-pip{font-family:var(--serif);font-size:56px;line-height:1;color:var(--paper)}
.loader b{
  font-size:var(--t-small);font-weight:700;letter-spacing:.3em;
  color:var(--paper-3);font-variant-numeric:tabular-nums;
}
.loader-bar{width:min(220px,40vw);height:1px;background:var(--line);overflow:hidden}
.loader-bar em{
  display:block;height:100%;width:100%;background:var(--paper);
  transform:scaleX(0);transform-origin:0 50%;
}
@media (prefers-reduced-motion:reduce){.loader{display:none}}

/* ── cursor ─────────────────────────────────────────────────── */
@media (pointer:fine){
  body.cursor-on, body.cursor-on a, body.cursor-on button{cursor:none}
}
.cur-dot,.cur-ring{
  position:fixed;left:0;top:0;z-index:100;pointer-events:none;
  border-radius:50%;
  opacity:0;transition:opacity .4s var(--ease);
}
body.cursor-on .cur-dot,body.cursor-on .cur-ring{opacity:1}
.cur-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--paper)}
.cur-ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid rgba(244,241,233,.4);
  transition:opacity .4s var(--ease),width .35s var(--ease),height .35s var(--ease),
             margin .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.cur-ring.hot{
  width:52px;height:52px;margin:-26px 0 0 -26px;
  border-color:rgba(209,57,44,.75);
  background:rgba(209,57,44,.07);
}

/* ============================================================
   9 · RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .split .pin{gap:clamp(22px,3vw,40px)}
  .visual{height:clamp(370px,44vw,460px)}
  .chip{font-size:12px;padding:9px 11px}
  .c1{top:4%}
  .c3{bottom:0}
  .caption{max-width:15ch}
}

@media (max-width:820px){
  :root{--measure:40ch;--gutter:clamp(18px,5.4vw,30px)}

  nav{gap:14px;font-size:11.5px}
  nav sup{display:none}
  .ctl span{display:none}
  .ctl{padding:9px;border-radius:50%}
  .logo-name{display:none}
  .logo-pip{font-size:26px}
  .frame{inset:8px}
  .frame i{width:11px;height:11px}

  .chapter.intro{height:130vh}
  .chapter.solo,.chapter.split,.chapter.contact{height:auto}

  /* pinning fights the thumb — let sections flow over the scene */
  .solo .pin,.split .pin,.contact .pin{
    position:static;height:auto;min-height:0;
    padding:clamp(52px,8vh,78px) var(--gutter);
    grid-template-columns:minmax(0,1fr);
    gap:clamp(24px,5vh,40px);
  }
  .intro .pin{min-height:100svh;padding-bottom:clamp(74px,11vh,100px)}

  /* the scene is the backdrop; copy rides on frosted panels so it always reads */
  .scrim{background:linear-gradient(180deg,rgba(7,8,10,.62),rgba(7,8,10,.42) 40%,rgba(7,8,10,.66))}
  .js .copy,.js .closing{
    background:rgba(9,10,13,.72);
    backdrop-filter:blur(16px) saturate(1.2);
    -webkit-backdrop-filter:blur(16px) saturate(1.2);
    border:1px solid var(--line);
    border-radius:16px;
    padding:clamp(20px,5vw,30px);
  }
  .js .closing{text-align:center}

  .intro-head{margin-top:clamp(10px,4vh,36px);text-align:left;max-width:100%}
  h1{justify-items:start}
  .h1-sans{font-size:clamp(38px,11.4vw,62px)}
  .h1-serif{font-size:clamp(44px,13.6vw,74px)}
  h2{font-size:clamp(30px,8.4vw,44px)}
  .intro-meta{font-size:9px}
  .intro-meta>span:last-child{display:none}
  .intro-foot{flex-direction:row;align-items:flex-end;gap:14px}
  .down{padding:11px 16px}
  .thesis{font-size:12px}

  .cue{display:none}
  .chapter-tag{bottom:14px;left:var(--gutter);font-size:9px;padding:7px 11px}
  .chapter-tag i{width:16px}
  .chapter-tag span{min-width:0;max-width:84px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .metrics{gap:24px}
  .accordion,.timeline{max-width:100%}

  .contact .pin{min-height:auto;grid-template-rows:auto auto;padding-bottom:clamp(96px,16vh,130px)}
  .closing{margin-top:clamp(20px,6vh,50px)}
  .contact .h1-sans{font-size:clamp(40px,12vw,66px)}
  .contact .h1-serif{font-size:clamp(46px,14vw,78px)}
  .cta{padding:14px 22px}
  footer{flex-direction:column;text-align:center;gap:10px;margin-top:clamp(28px,8vh,56px)}
}

@media (max-width:420px){
  .metrics{gap:18px}
  .metrics dt{font-size:30px}
  nav{gap:11px;font-size:11px}
  .logo-pip{font-size:23px}
}

/* landscape phones: the scene needs the height back */
@media (max-width:920px) and (orientation:landscape) and (max-height:520px){
  .intro .pin{min-height:120svh}
  .h1-sans{font-size:clamp(30px,6vw,46px)}
  .h1-serif{font-size:clamp(34px,7vw,54px)}
  .intro-head{margin-top:10px}
  .chapter-tag,.frame{display:none}
}

@media (min-width:821px) and (max-height:720px){
  .pin{min-height:560px}
  .visual{height:clamp(340px,52vh,430px)}
  .intro-head{margin-top:clamp(8px,2vh,24px)}
}

/* ============================================================
   10 · MOTION OFF
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  [data-reveal]{opacity:1;--ry:0px}
  .rise{transform:none!important;opacity:1!important}
}

body.motion-off .cue i,
body.motion-off .down i,
body.motion-off .pulse,
body.motion-off .halo,
body.motion-off .ring.r2,
body.motion-off .flow>*+*::after{animation:none}
body.motion-off .rise{transform:none!important;opacity:1!important}
body.motion-off [data-reveal],
body.motion-off [data-reveal]>*{opacity:1!important;transform:none!important;filter:none!important;--ry:0px}
body.motion-off .wordmark{display:none}
body.motion-off .cur-dot,body.motion-off .cur-ring{display:none}
body.motion-off .chip,body.motion-off .ring.r3{animation:none!important}
body.motion-off .visual{--reveal:1}
body.motion-off .chapter{height:auto}
body.motion-off .pin{
  position:static;height:auto;min-height:0;
  padding-top:calc(var(--header-h) + clamp(50px,9vh,90px));
  padding-bottom:clamp(60px,9vh,100px);
}
body.motion-off .intro .pin{min-height:100svh}
body.motion-off .contact .pin{min-height:100svh;grid-template-rows:1fr auto}