/* ══ tokens ═══════════════════════════════════════════════
   Flat colour fields. No gradients, no glow, no shadow.
   ═══════════════════════════════════════════════════════════ */
:root{
  --jet:#0a0a0a;
  --paper:#faf9f5;
  --chartreuse:#d7ff3e;
  --ultramarine:#1b2cff;
  --tangerine:#ff6a13;

  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --pad:clamp(22px,5vw,92px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--chartreuse);
  color:var(--jet);
  font:400 clamp(15.5px,1.05vw,17.5px)/1.55 var(--sans);
  overflow-x:hidden;
}
h1,h2,h3,p,dl,dt,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--jet);color:var(--chartreuse)}

/* ══ the inverting lens ═══════════════════════════════════ */
.lens{
  position:fixed;
  top:0;left:0;z-index:90;
  width:clamp(90px,9vw,132px);
  aspect-ratio:1;
  background:#fff;
  mix-blend-mode:difference;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%) rotate(45deg);
  transition:opacity .35s ease;
}
.lens.is-live{opacity:1}
@media (hover:none),(prefers-reduced-motion:reduce){.lens{display:none}}

/* ══ the rail: vertical scroll, lateral travel ════════════ */
.rail{position:relative}
.viewport{
  position:sticky;top:0;
  height:100svh;
  overflow:hidden;
}
.track{
  display:flex;
  height:100%;
  will-change:transform;
}

/* ══ panels ═══════════════════════════════════════════════ */
.panel{
  flex:0 0 100vw;
  height:100%;
  padding:clamp(58px,9vh,104px) var(--pad);
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}
.panel--wide{flex-basis:158vw}
.panel--mid{flex-basis:132vw}

.panel--open{background:var(--chartreuse);color:var(--jet)}
.panel--blue{background:var(--ultramarine);color:var(--paper)}
.panel--paper{background:var(--paper);color:var(--jet)}
.panel--tangerine{background:var(--tangerine);color:var(--jet)}
.panel--jet{background:var(--jet);color:var(--paper)}

.meta{
  font:500 clamp(11px,1vw,13px)/1 var(--mono);
  letter-spacing:.02em;
  text-transform:lowercase;
  margin-bottom:clamp(22px,4vh,48px);
  opacity:.72;
}

/* ── 01: the wordmark, with a chromatic double ── */
.wordmark{
  position:relative;
  font-size:clamp(2.9rem,11vw,9.5rem);
  font-weight:800;
  line-height:.86;
  letter-spacing:-.05em;
  margin-bottom:clamp(26px,5vh,54px);
  /* a flat chromatic double, offset by the scroll position */
  text-shadow:var(--sx,8px) var(--sy,-7px) 0 var(--ultramarine);
}

.statement{
  max-width:44ch;
  font-size:clamp(1.05rem,1.7vw,1.5rem);
  line-height:1.4;
  border-top:3px solid currentColor;
  padding-top:clamp(16px,2.4vh,26px);
}
.tags{
  display:flex;flex-wrap:wrap;
  gap:clamp(10px,2vw,34px);
  margin-top:clamp(22px,4vh,42px);
  font:500 clamp(11px,1vw,13px)/1 var(--mono);
}
.tags li::before{content:"◆ ";}

/* ── 02: the statement panel ── */
.huge{
  font-size:clamp(3rem,12vw,10rem);
  font-weight:800;
  line-height:.84;
  letter-spacing:-.055em;
  margin-bottom:clamp(24px,4vh,48px);
}
.twin{
  display:grid;
  gap:clamp(18px,3vw,54px);
  max-width:min(1020px,100%);
  font-size:clamp(1rem,1.35vw,1.2rem);
}
@media (min-width:900px){.twin{grid-template-columns:1fr 1fr}}

/* ── 03: the ledger ── */
.ledger{
  display:grid;
  grid-template-columns:repeat(3,minmax(260px,1fr));
  grid-auto-rows:1fr;
  column-gap:clamp(22px,3vw,64px);
  row-gap:clamp(26px,7vh,74px);
  align-content:center;
}
.ledger li{
  padding-block:clamp(16px,2.4vh,28px);
  border-top:2px solid var(--jet);
  display:flex;flex-direction:column;justify-content:flex-start;
}
.ledger h3{
  font-size:clamp(1.1rem,1.7vw,1.5rem);
  font-weight:700;
  letter-spacing:-.024em;
  margin-bottom:8px;
}
.ledger p{max-width:34ch;font-size:.95rem;opacity:.74}

/* ── 04: the shelf ── */
.shelf{
  display:grid;
  grid-template-columns:repeat(4,minmax(230px,1fr));
  gap:clamp(20px,3vw,54px);
  align-items:start;
}
.shelf article{border-top:3px solid var(--jet);padding-top:clamp(14px,2vh,22px)}
.shelf h3{
  font-size:clamp(1.15rem,1.9vw,1.7rem);
  font-weight:800;letter-spacing:-.03em;
  line-height:1.02;
  margin-bottom:10px;
}
.shelf p{font-size:.95rem;max-width:32ch}

/* ── 05: contact ── */
.entity{
  font-size:clamp(1.5rem,4.4vw,3.4rem);
  font-weight:800;letter-spacing:-.04em;
  line-height:1;
  color:var(--chartreuse);
  margin-bottom:clamp(26px,5vh,52px);
}
.details{display:grid;gap:0;max-width:min(1180px,100%);border-top:2px solid var(--paper)}
.details > div{
  display:grid;
  gap:4px clamp(20px,4vw,60px);
  padding-block:clamp(13px,2vh,20px);
  border-bottom:2px solid rgba(250,249,245,.28);
}
@media (min-width:760px){.details > div{grid-template-columns:170px 1fr;align-items:baseline}}
.details dt{font:500 12px/1.4 var(--mono);opacity:.66}
.details dd{
  margin:0;
  font-size:clamp(1rem,1.35vw,1.2rem);
  font-weight:600;
  letter-spacing:-.015em;
  overflow-wrap:anywhere;
}
.rights{margin-top:clamp(26px,4vh,44px);font:500 12px/1 var(--mono);opacity:.55}

/* ── travel strip along the bottom edge ── */
.perf{
  position:absolute;
  left:0;right:0;bottom:0;
  height:12px;
  z-index:5;
  background:repeating-linear-gradient(90deg,
    rgba(10,10,10,.22) 0 12px,transparent 12px 26px);
  mix-blend-mode:multiply;
}
.perf i{
  display:block;height:100%;width:0;
  background:var(--jet);
}

/* ══ narrow screens: the track becomes an ordinary column ══ */
@media (max-width:900px){
  .rail{height:auto!important}
  .viewport{position:static;height:auto;overflow:visible}
  .track{flex-direction:column;height:auto;transform:none!important}
  .panel,
  .panel--wide,
  .panel--mid{flex-basis:auto;height:auto;min-height:auto;padding-block:clamp(56px,11vh,96px)}
  .ledger{grid-template-columns:1fr;grid-auto-rows:auto}
  .shelf{grid-template-columns:1fr}
  .perf{display:none}
}
@media (max-width:900px){
  .wordmark{text-shadow:4px -4px 0 var(--ultramarine)!important;line-height:.94}
}
@media (max-width:900px) and (min-width:620px){
  .ledger{grid-template-columns:1fr 1fr}
  .shelf{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  .wordmark{text-shadow:8px -7px 0 var(--ultramarine)}
}