/* ---------- tokens : light is the bare :root ---------- */
:root{
  --bg:#EDEEF2;
  --surface:#FFFFFF;
  --ink:#0B0B14;
  --muted:#57576B;
  --line:#D5D6E0;
  --hyper:#2A22FF;
  --on-hyper:#FFFFFF;
  --hyper-soft:rgba(42,34,255,.10);

  --font-display:"Anton","Arial Narrow",system-ui,sans-serif;
  --font:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono","Courier New",monospace;

  --pad-x:clamp(1.25rem,5vw,5.5rem);
  --pad-y:clamp(4rem,10vw,8.5rem);
  --maxw:1320px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#08080C;
    --surface:#101019;
    --ink:#F2F2F8;
    --muted:#8B8BA6;
    --line:#20202E;
    --hyper:#3B33FF;
    --on-hyper:#FFFFFF;
    --hyper-soft:rgba(59,51,255,.16);
  }
}
:root[data-theme="dark"]{
  --bg:#08080C;
  --surface:#101019;
  --ink:#F2F2F8;
  --muted:#8B8BA6;
  --line:#20202E;
  --hyper:#3B33FF;
  --on-hyper:#FFFFFF;
  --hyper-soft:rgba(59,51,255,.16);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}

.mono{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}

/* ---------- reveal (visible by default; only hidden when JS runs) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js-reveal .reveal{opacity:0;transform:translateY(20px)}
  .reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
}

/* ---------- top bar ---------- */
.bar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar__in{
  display:flex;align-items:center;gap:1.5rem;
  padding:.85rem var(--pad-x);
}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:1.15rem}
.brand .blk{width:.82rem;height:.82rem;background:var(--hyper);display:inline-block}
.bar__nav{display:flex;gap:1.4rem;margin-left:auto}
.bar__nav a{color:var(--muted);transition:color .2s}
.bar__nav a:hover{color:var(--ink)}
.bar__right{display:flex;align-items:center;gap:1.1rem;margin-left:auto}
.bar__nav + .bar__right{margin-left:1.4rem}
.status{display:flex;align-items:center;gap:.5rem;color:var(--muted)}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--hyper);position:relative}
@media (prefers-reduced-motion:no-preference){
  .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--hyper);animation:ping 2s ease-out infinite}
}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.1);opacity:0}}
.toggle{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);background:none;border:1px solid var(--line);
  padding:.4rem .6rem;cursor:pointer;transition:border-color .2s,color .2s;
}
.toggle:hover{color:var(--ink);border-color:var(--ink)}
@media (max-width:820px){ .bar__nav{display:none} .status .label{display:none} }

/* ---------- hero ---------- */
.hero{
  background:var(--hyper);color:var(--on-hyper);
  overflow:hidden;position:relative;
  padding:clamp(3rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem);
}
.hero__in{padding-inline:var(--pad-x)}
.hero__eyebrow{display:flex;justify-content:space-between;gap:1rem;color:rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:1rem;margin-bottom:clamp(1.5rem,4vw,3rem);flex-wrap:wrap}
.hero__word{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(5rem,27vw,25rem);
  line-height:.84;
  letter-spacing:-.005em;
  margin:0;
  white-space:nowrap;
  text-transform:uppercase;
}
.hero__thesis{
  font-weight:700;
  font-size:clamp(1.9rem,5.4vw,4.1rem);
  line-height:1;
  letter-spacing:-.03em;
  max-width:17ch;
  margin:clamp(1.8rem,4vw,3rem) 0 0;
  text-wrap:balance;
}
.hero__strap{color:rgba(255,255,255,.82);margin:clamp(1.1rem,2.5vw,1.6rem) 0 0;font-size:clamp(.72rem,1.1vw,.85rem)}
.hero__foot{
  display:flex;gap:1.2rem 2rem;flex-wrap:wrap;align-items:center;
  color:rgba(255,255,255,.8);
  margin-top:clamp(2rem,5vw,3.4rem);
  padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.25);
}
.hero__foot .dot{background:#fff}
@media (prefers-reduced-motion:no-preference){ .hero__foot .dot::after{border-color:#fff} }

/* ---------- marquee (signature) ---------- */
.marquee{
  background:var(--bg);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:clamp(1rem,2.4vw,1.9rem) 0;
  user-select:none;
}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__seg{
  display:flex;align-items:center;flex:0 0 auto;
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.2rem,6vw,4.8rem);letter-spacing:.01em;
  color:var(--hyper);
}
.marquee__seg span{padding:0 1.1rem}
.marquee__seg .sep{color:var(--muted);font-weight:400}

/* ---------- generic section ---------- */
.sec{padding:var(--pad-y) 0}
.sec--line{border-top:1px solid var(--line)}
.kick{color:var(--hyper);margin-bottom:1.4rem}

/* two-column spec grid */
.spec{display:grid;grid-template-columns:minmax(0,13ch) 1fr;gap:clamp(1.5rem,4vw,4rem)}
@media (max-width:720px){ .spec{grid-template-columns:1fr;gap:.9rem} }
.spec__label{color:var(--muted);padding-top:.5rem}

/* stance / manifest */
.stance{display:flex;flex-direction:column;gap:clamp(2.2rem,5vw,3.6rem)}
.stance__row{display:grid;grid-template-columns:minmax(0,13ch) 1fr;gap:clamp(1.2rem,4vw,4rem);align-items:start}
@media (max-width:720px){ .stance__row{grid-template-columns:1fr;gap:.7rem} }
.stance__k{color:var(--hyper);padding-top:.7rem}
.stance__t{
  font-weight:600;font-size:clamp(1.9rem,4.3vw,3.5rem);line-height:1.1;letter-spacing:-.028em;
  margin:0;text-wrap:balance;
}
.stance__t b{font-weight:900}

/* work index */
.index{border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:5ch 1fr auto;gap:1rem clamp(1rem,3vw,2.5rem);
  align-items:baseline;
  padding:clamp(1.1rem,2.4vw,1.7rem) 0;
  border-bottom:1px solid var(--line);
  transition:background .25s,padding-left .25s;
}
.row:hover{background:var(--hyper-soft);padding-left:1rem}
.row__code{font-family:var(--font-mono);font-size:.8rem;color:var(--muted);letter-spacing:.05em}
.row__name{display:flex;flex-direction:column;gap:.25rem}
.row__title{font-weight:800;font-size:clamp(1.7rem,3.7vw,2.9rem);letter-spacing:-.03em;line-height:1.02}
.row:hover .row__title{color:var(--hyper)}
.row__desc{color:var(--muted);font-size:1.06rem;max-width:46ch}
.row__meta{display:flex;gap:1.4rem;align-items:baseline;white-space:nowrap}
.row__year{font-family:var(--font-mono);font-size:.78rem;color:var(--muted)}
.tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.tag--live{color:var(--ink);font-weight:700}
.tag--live::before{content:"";display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:var(--hyper);margin-right:.5rem;vertical-align:middle}
.tag--building{color:var(--muted)}
.tag--archived{color:var(--muted);text-decoration:line-through;opacity:.7}
@media (max-width:720px){
  .row{grid-template-columns:1fr auto}
  .row__code{grid-row:1;grid-column:1}
  .row__name{grid-column:1 / -1;order:2}
  .row__meta{grid-column:2;grid-row:1;justify-self:end}
}

/* how we work : real sequence => numbers earn their place */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
@media (max-width:820px){ .steps{grid-template-columns:1fr;gap:2.4rem} }
.step__n{font-family:var(--font-mono);font-size:.9rem;color:var(--hyper);border-top:2px solid var(--hyper);padding-top:.8rem;display:block;margin-bottom:1rem}
.step__h{font-weight:800;font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.03em;margin:0 0 .7rem}
.step__p{color:var(--muted);margin:0;max-width:34ch;font-size:1.12rem}

/* ethos */
.ethos{padding:var(--pad-y) 0}
.ethos__t{
  font-weight:800;font-size:clamp(2.6rem,8vw,6.4rem);line-height:.98;letter-spacing:-.04em;
  margin:0;text-wrap:balance;max-width:18ch;
}
.ethos__t em{font-style:normal;color:var(--hyper)}

/* cta : blue bookend */
.cta{background:var(--hyper);color:var(--on-hyper);padding:var(--pad-y) 0}
.cta__eyebrow{color:rgba(255,255,255,.7);margin-bottom:clamp(1.4rem,3vw,2.4rem)}
.cta__h{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(3.2rem,9.5vw,7.6rem);line-height:.9;letter-spacing:-.005em;margin:0;text-wrap:balance}
.cta__mail{
  display:inline-flex;align-items:center;gap:.6rem;
  font-weight:600;font-size:clamp(2rem,5.5vw,3.7rem);letter-spacing:-.025em;
  margin-top:clamp(1.4rem,4vw,2.6rem);
  border-bottom:3px solid rgba(255,255,255,.45);padding-bottom:.15rem;
  transition:border-color .25s;
}
.cta__mail:hover{border-color:#fff}
.cta__mail .arw{transition:transform .25s}
.cta__mail:hover .arw{transform:translateX(.35rem)}
.cta__sub{color:rgba(255,255,255,.8);margin-top:clamp(1.6rem,4vw,2.4rem);max-width:42ch;font-size:1.2rem}

/* footer = full-bleed HYPERSPEED game */
.foot{border-top:1px solid var(--line)}

/* ---------- footer game : HYPERSPEED (full-bleed) ---------- */
.fstage{
  position:relative;width:100%;height:clamp(460px,80vh,820px);
  background:var(--surface);overflow:hidden;
  cursor:pointer;touch-action:none;isolation:isolate;
}
.fstage.playing{cursor:none}
.fcanvas{display:block;width:100%;height:100%;position:absolute;inset:0;z-index:0}

.fhud{position:absolute;z-index:2;left:0;right:0;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;padding:var(--pad-x);pointer-events:none}
.fhud--top{top:0;align-items:baseline;padding-right:clamp(7rem,26vw,15rem)}
.fhud .play__tag{color:var(--hyper)}
.fhud__hint{color:var(--muted)}

/* live speedometer */
.fspeed{position:absolute;z-index:2;right:var(--pad-x);top:clamp(3.4rem,8vw,5rem);text-align:right;pointer-events:none;line-height:.82}
.fspeed__num{font-family:var(--font-display);font-size:clamp(3.5rem,11vw,8.5rem);color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.fspeed__unit{color:var(--muted);margin-top:.35rem}

.fover{
  position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  background:color-mix(in srgb,var(--surface) 74%,transparent);text-align:center;padding:1rem;
}
.fover.hidden{display:none}
.fover__title{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.6rem,8vw,5.5rem);line-height:.88;color:var(--ink)}
.fover__cta{color:var(--hyper);border:1px solid var(--hyper);padding:.65rem 1rem;background:var(--hyper-soft)}
.fover__score{color:var(--muted);letter-spacing:.1em}
.fover__score b{color:var(--ink)}

.fmeta{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;align-items:center;
  padding:clamp(1rem,3vw,1.6rem) var(--pad-x);color:var(--muted);
  border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  pointer-events:none;
}
.fmeta .brand{color:var(--ink)}
.fmeta__spacer{margin-left:auto}
@media (max-width:620px){ .fhud__hint{display:none} }

:focus-visible{outline:2px solid var(--hyper);outline-offset:3px}
.hero :focus-visible,.cta :focus-visible{outline-color:#fff}