/* ---------- Fonts ---------- */
@font-face {
  font-family: "Akira Expanded";
  src: url("fonts/AkiraExpanded-Demo.otf") format("opentype");
  font-weight: 800 900;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --magenta: #EB14FF;
  --green: #34C759;
  --neon: #39FF14;        /* glitch split colour only */
  --black: #0E0E0E;
  --white: #F3F2EE;        /* soft off-white page (easier to read than pure white) */
  --grey: #A8A8A3;        /* muted text on black only (fails contrast on white) */
  --grey-dark: #6B6B66;   /* muted small text on white: 5.3:1 */
  --line: #E4E4E0;        /* decorative frame lines */
  --frame: rgb(235 20 255 / .55);   /* page frame lines + header dividers: magenta */

  --font-display: "Akira Expanded", "Arial Black", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;

  /* Spacing scale (8px base): use these instead of one-off numbers */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;
  --s-9: 160px;

  --max: 1440px;
  --margin: 80px;
  --gutter: 24px;
  --cols: 12;
  --radius: 14px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);     /* smooth, fast start / soft landing */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --header-h: 168px;      /* space reserved under the pinned header */
}

@media (max-width: 1100px) {
  :root { --margin: 40px; --header-h: 140px; }
}
@media (max-width: 700px) {
  :root { --margin: 20px; --gutter: 16px; --cols: 4; --header-h: 120px; --radius: 10px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--s-8); }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, p, pre { margin: 0; }
:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--margin);
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* ---------- 1. Header (pinned, like the reference site) ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  padding-block: var(--s-4) var(--s-2);
  pointer-events: none;      /* the empty header area never blocks clicks on the page */
  transition: padding .4s var(--ease-out);
}
.site-header.is-scrolled { padding-block: var(--s-2); }
.wordmark, .site-nav { pointer-events: auto; }
.header-inner { align-items: last baseline; }   /* logo and nav share a baseline */

.wordmark {
  grid-column: 1 / 9;
  justify-self: start;
  display: inline-flex;
  align-items: baseline;
  gap: .14em;
  color: var(--magenta);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 7.4vw, 6.75rem);
  line-height: .9;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: font-size .45s var(--ease-out), padding .45s var(--ease-out),
              background-color .3s ease, border-color .3s ease;
}
/* Scrolled: only a small NEZKAI MP4 stays, in a plain white pill (no blur) */
.is-scrolled .wordmark {
  font-size: 1.5rem;
  padding: .5em .85em;
  background: var(--white);
  border-color: var(--line);
}
.is-scrolled .wm-sub { font-size: .36em; }  /* keep MP4 readable at the small size */
.wm-sub { transition: font-size .45s var(--ease-out); }

/* Rough, slowly "boiling" edges: SVG filter #roughen in index.html */
.wm-main { display: inline-flex; gap: .06em; filter: url(#roughen); }  /* gap restores the font's own letter spacing */
/* Each letter is its own piece so the glitch can move them separately */
.wm-l { display: inline-block; text-align: center; }
.wm-l:nth-child(5) { margin-left: -.07em; }   /* K→A: the font tucks these closer */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wm-sub {
  font-size: .24em;
  line-height: 1;
}

.site-nav {
  grid-column: 9 / -1;
  justify-self: end;
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  transition: opacity .3s ease, transform .45s var(--ease-out), visibility .3s;
}
/* nav tucks away once you scroll; the floating contact button keeps Contact reachable */
.is-scrolled .site-nav { opacity: 0; visibility: hidden; transform: translateY(-12px); }
.site-nav a {
  color: var(--magenta);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.5rem;         /* large text: magenta passes 3:1 */
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
  filter: url(#roughen-sm);  /* same rough edges as NEZKAI, gentler */
}
.site-nav a[aria-current="page"] { color: var(--black); }
/* letters split by script.js so the glitch can move them */
.gl-l { display: inline-block; white-space: pre; text-align: center; }

/* ---------- Decorative ASCII ---------- */
.ascii {
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.35;
  color: var(--magenta);
  white-space: pre;
  pointer-events: none;
  user-select: none;
}
.ascii .rec { color: var(--green); }

/* ---------- 2. Hero ---------- */
.hero {
  padding-top: calc(var(--header-h) + var(--s-8));
  row-gap: var(--s-3);
}
.headline {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .4em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.3vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.hl-from, .hl-arrow { color: var(--magenta); }
.hl-to { color: var(--green); }
.ascii-tc { grid-column: 2 / -1; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Home hero: 4-step loop. Fills most of the screen but lets the work peek in at the bottom */
.hero-cycle {
  min-height: calc(100svh - 280px);
  padding-top: var(--header-h);
  align-content: center;
  row-gap: var(--s-4);
}
.cycle {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cycle-step {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  color: var(--c);
}
/* magenta → violet → teal → green */
.cycle-step:nth-child(1) { --c: #EB14FF; }
.cycle-step:nth-child(2) { --c: #9E6DFF; }
.cycle-step:nth-child(3) { --c: #00CCAF; }
.cycle-step:nth-child(4) { --c: #34C759; }

/* the loop line on the left: runs from step 1 down to step 4 */
.cycle-link {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  align-self: stretch;
}
.cycle-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: currentColor;
}
.cycle-step:first-child .cycle-link::before { top: 50%; }
.cycle-step:last-child  .cycle-link::before { bottom: 50%; }
.cycle-link::after {
  content: "───";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1;
}
.cycle-step.is-active .cycle-link::after { content: "──▶"; }
.cycle-num {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  font-family: var(--font-mono);
  font-size: .875rem;
  font-weight: 700;
}
.cycle-text {
  grid-column: 2 / -1;
  grid-row: 1;
  padding-block: var(--s-2);   /* spacing lives here so the loop line stays unbroken */
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.375rem, 3.4vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
/* the step that is "playing" lights up, the rest wait dimmed */
.cycle-num, .cycle-text {
  opacity: .25;
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out);
}
.cycle-step.is-active .cycle-num,
.cycle-step.is-active .cycle-text { opacity: 1; }
.cycle-step.is-active .cycle-text { transform: translateX(.3em); }
.cycle-status { color: var(--grey-dark); }

/* 8-bit gnome scenes (drawn by gnomes.js) that pop up beside the hovered step */
.gnome-stage {
  position: absolute;
  z-index: 2;
  width: 168px;               /* 56 x 30 pixels; gnomes.js scales it 3x or 4x */
  height: 90px;
  image-rendering: pixelated;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px) scale(.9);
  transform-origin: bottom center;
  transition: opacity .25s var(--ease-out), transform .45s var(--ease-out);
}
.gnome-stage.is-on { opacity: 1; transform: none; }
.ascii-tracks { grid-column: 1; grid-row: 1 / 3; align-self: center; line-height: 1.6; }

/* ---------- 3 + 4. Filter and work ---------- */
.work { padding-bottom: var(--s-8); }

/* Filter sits in the left columns, beside the first video (as in the Figma).
   Everything on the left starts at column 2, lined up with the headline. */
.filter {
  grid-column: 2 / 5;
  grid-row: 1;
  align-self: start;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}
.filter-btn {
  color: var(--magenta);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
  padding: .15em .25em;
  margin-left: -.25em;       /* keeps the bracket on the column line */
  transition: background-color .2s, color .2s;
}
/* staggered like the design, in whole steps of the spacing scale */
.filter-btn[data-filter="irl"] { margin-left: calc(var(--s-8) - .25em); }
.filter-btn[data-filter="educational"] { margin-left: calc(var(--s-6) - .25em); }
.filter-btn:hover { color: var(--black); }
.filter-btn[aria-pressed="true"] { background: var(--magenta); color: var(--white); }

.pieces {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--s-8);
}
.piece {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
.piece[hidden] { display: none; }

.piece-media {
  grid-column: 5 / -1;
  grid-row: 1;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--black);
  border-radius: var(--radius);
  overflow: hidden;
}
.piece-media video { width: 100%; height: 100%; object-fit: cover; }
.play-hint {
  position: absolute;
  right: var(--s-2);
  bottom: var(--s-2);
  padding: var(--s-1) var(--s-2);
  background: var(--white);
  color: var(--black);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s;
}
.piece-media:hover .play-hint,
.piece-media:focus-visible .play-hint { opacity: 1; transform: none; }

.piece.is-first .ascii-piece { display: none; }
.ascii-piece {
  grid-column: 2 / 5;
  grid-row: 1;
  align-self: start;
}

.piece-info {
  grid-column: 2 / 5;
  grid-row: 1;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.piece-cat {
  color: var(--grey-dark);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.piece-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-1);
}
.piece-credit, .piece-desc { font-size: 1rem; }
.piece-credit a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.piece-credit a:hover { color: var(--magenta); }
.piece-meta { color: var(--grey-dark); font-size: .875rem; }

/* ---------- Frame: side lines, section rules, timeline ruler ---------- */
/* x position of the side lines: halfway into the page margin */
.frame-lines, .rule, .site-header { --edge: calc(max(0px, (100% - var(--max)) / 2) + var(--margin) / 2); }
.frame-lines {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--frame), var(--frame)) var(--edge) 0 / 1px 100% no-repeat,
    linear-gradient(var(--frame), var(--frame)) calc(100% - var(--edge)) 0 / 1px 100% no-repeat;
}
.rule {
  position: relative;
  height: 1px;
  margin-block: var(--s-7);
}
/* the line itself, full width (it passes behind the ruler numbers, which sit on top) */
.rule::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--frame);
  transform-origin: left center;
}
/* "+" where a divider crosses the right side line: a small mono plus on a patch of
   page colour, so the lines stop just short of it (the little gap around the cross) */
.rule span {
  position: absolute;
  top: 0;
  right: var(--edge);
  transform: translate(50%, -52%);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1;
  color: var(--magenta);
  background: var(--white);
  padding: 2px;
}


/* Magenta strip behind the ruler, feathering a little into the page */
.side-strip {
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(max(0px, (100% - var(--max)) / 2) + var(--margin) / 2 - 44px);
  width: 116px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to right,
    var(--magenta) 0 54px,          /* solid to 10px past the side line, under the left crosses */
    rgb(235 20 255 / .35) 70px,
    rgb(235 20 255 / .1) 92px,
    rgb(235 20 255 / 0) 116px);
}

/* Ticks + frame numbers that scroll past like a timeline (left side, desktop) */
.side-ruler {
  position: fixed;
  top: 0;
  /* sits just outside the left line, numbers pointing in towards it */
  left: calc(max(0px, (100% - var(--max)) / 2) + var(--margin) / 2 - 38px);
  width: 34px;
  text-align: right;
  z-index: 41;        /* above the frame lines (and the header's line) */
  margin: 0;
  font-family: var(--font-mono);
  font-size: .625rem;
  line-height: 16px;
  color: var(--white);  /* inverted: sits on the magenta strip */
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
/* each number/tick has a patch of the strip colour behind it, so a frame line
   passing through the ruler is hidden right where a number sits (no strike-through) */
.side-ruler span { background: var(--magenta); }
[data-theme="dark"] .side-ruler span { background: #000; }

/* ---------- FAQ ---------- */
.faq { padding-bottom: var(--s-8); }
.faq-head {
  grid-column: 2 / 5;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.faq-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 3.3vw, 3rem);
  line-height: 1;
  color: var(--magenta);
}
.faq-list { grid-column: 5 / -1; border-bottom: 1px solid var(--line); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: var(--s-3);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "[+]";
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--magenta);
}
.faq-item[open] summary::after { content: "[-]"; }
.faq-item summary:hover { color: var(--magenta); }
.faq-item p { padding-bottom: var(--s-3); max-width: 60ch; }

/* ---------- Floating contact button (ASCII style) ---------- */
.float-cta {
  position: fixed;
  left: 50%;
  bottom: var(--s-3);
  z-index: 45;
  display: inline-block;
  padding: 6px 10px;
  background: var(--magenta);
  color: var(--white);
  border: 2px solid var(--black);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .06em;
  white-space: pre;
  text-decoration: none;
  transform: translateX(-50%);
  transition: transform .15s ease, box-shadow .15s ease, opacity .25s ease, visibility .25s;
}
.float-cta:hover { transform: translate(-50%, -3px); }
.float-cta:active { transform: translate(-50%, 1px); }
/* the label is folded away until hover / keyboard focus */
.cta-label {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  vertical-align: bottom;
  transition: max-width .3s ease;
}
.float-cta:hover .cta-label,
.float-cta:focus-visible .cta-label { max-width: 12ch; }
.float-cta.is-hidden { opacity: 0; visibility: hidden; transform: translate(-50%, 12px); }
.cta-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.cta-cursor { animation: blink 1s steps(1, end) infinite; }

/* ---------- Corner switches: light/dark mode + sound effects ---------- */
.corner-toggles {
  position: fixed;
  right: var(--s-3);
  bottom: var(--s-3);
  z-index: 45;
  display: flex;
  gap: var(--s-1);
}
.theme-toggle, .sfx-toggle {
  padding: 4px 6px;
  background: rgb(255 255 255 / .85);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 700;
  color: var(--magenta);
}
.sfx-toggle[aria-pressed="false"] { color: var(--grey-dark); }
.theme-toggle:hover, .sfx-toggle:hover { color: var(--black); }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- About page ---------- */
.about { padding-bottom: var(--s-8); row-gap: var(--s-6); }
.about-photo {
  grid-column: 2 / 6;
  align-self: start;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  overflow: hidden;
  background: #F2F2EF;
  color: var(--grey-dark);
  font-family: var(--font-mono);
  font-size: .875rem;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-content {
  grid-column: 7 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
}
.about-lead { font-size: 1.5rem; line-height: 1.35; letter-spacing: -0.01em; max-width: 34ch; }
.about-block p { max-width: 60ch; }
.label {
  color: var(--grey-dark);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--s-1);
}
.about-list { margin: 0; padding: 0; list-style: none; }
.about-list li { padding-block: var(--s-1); border-top: 1px solid var(--line); }
.about-list li::before { content: "> "; font-family: var(--font-mono); color: var(--magenta); }

/* ---------- 5. Footer: contact ---------- */
.site-footer {
  background: var(--black);
  color: var(--white);
  padding-block: var(--s-8) var(--s-5);
}
.footer-grid { row-gap: var(--s-6); align-items: start; }
.contact { grid-column: 2 / 10; }
.footer-label {
  color: var(--grey);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.contact-lead {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.btn {
  display: inline-block;
  padding: var(--s-2) var(--s-4);
  background: var(--magenta);
  color: var(--black);       /* black on magenta: 6.1:1 */
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s;
}
.btn:hover { background: var(--green); }
.socials { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; gap: var(--s-3); }
.socials a { font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.socials a:hover { color: var(--green); }

.footer-bottom {
  margin-top: var(--s-8);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  color: var(--grey);
  font-size: .875rem;
}
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--white); }
.ascii-end { color: var(--magenta); }

/* ---------- Modal player ---------- */
.modal {
  width: min(1200px, 92vw);
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.modal::backdrop { background: rgb(14 14 14 / .92); }
.modal-frame { aspect-ratio: 16 / 9; background: var(--black); border-radius: var(--radius); overflow: hidden; }
.modal-frame iframe, .modal-frame video { width: 100%; height: 100%; border: 0; }
.modal-note { margin-top: var(--s-2); color: var(--grey); font-size: .875rem; }
.modal-close {
  position: absolute;
  top: calc(-1 * var(--s-5));
  right: 0;
  width: 40px;
  height: 40px;
  color: var(--white);
  font-size: 1.5rem;
}
.modal-close:hover { color: var(--magenta); }

/* ---------- Tablet: text drops under videos ---------- */
@media (max-width: 1100px) {
  .site-nav a { font-size: 1.25rem; }
  .site-nav { gap: var(--s-3); }
  .headline, .ascii-tc { grid-column: 1 / -1; }
  .filter {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-3);
    margin-bottom: var(--s-5);
  }
  .filter-btn[data-filter] { margin-left: -.25em; }
  .pieces { grid-row: 2; row-gap: var(--s-7); }
  .piece { row-gap: var(--s-3); }
  .piece-media, .piece-info { grid-column: 1 / -1; }
  .piece-info { grid-row: 2; }
  .ascii-piece, .ascii-tracks, .side-ruler, .side-strip { display: none; }
  .faq-head, .faq-list { grid-column: 1 / -1; }
  .faq-head { margin-bottom: var(--s-4); }
  .contact { grid-column: 1 / -1; }
  .about-photo { grid-column: 1 / 5; max-width: 360px; width: 100%; }
  .about-content { grid-column: 1 / -1; }
}

/* ---------- Phone (390 reference) ---------- */
@media (max-width: 700px) {
  .site-header { padding-block: var(--s-3) var(--s-2); }
  .site-header.is-scrolled { padding-block: var(--s-1); }
  .header-inner { row-gap: var(--s-2); }
  .wordmark { grid-column: 1 / -1; font-size: 12vw; }
  .is-scrolled .wordmark { font-size: 1.25rem; }
  .site-nav { grid-column: 1 / -1; justify-self: start; gap: var(--s-3); }
  .site-nav a, .filter-btn { font-size: 1.2rem; }  /* bold 19px+ = large text */

  .hero { padding-top: calc(var(--header-h) + var(--s-6)); row-gap: var(--s-2); }
  .headline { font-size: min(1.75rem, 7.2vw); }
  .hero-cycle { min-height: calc(100svh - 220px); row-gap: var(--s-3); padding-bottom: 120px; } /* room for the gnomes */
  .cycle-text { padding-block: var(--s-1); }
  .cycle-text { font-size: min(1.625rem, 6.2vw); }
  .cycle-link::after { font-size: .75rem; }
  .cycle-num { font-size: .75rem; }
  .work, .faq { padding-bottom: var(--s-6); }
  .rule { margin-block: var(--s-6); }
  .faq-item summary { font-size: 1.0625rem; }
  .float-cta { bottom: var(--s-2); }
  .corner-toggles { display: none; }   /* phones: no room; they follow the phone's own light/dark setting */
  .pieces { row-gap: var(--s-6); }
  .piece { row-gap: var(--s-2); }
  .piece-title { font-size: 1.375rem; }
  .play-hint { opacity: 1; transform: none; font-size: .75rem; right: var(--s-1); bottom: var(--s-1); }

  .site-footer { padding-block: var(--s-7) var(--s-4); }
  .contact { grid-column: 1 / -1; }
  .footer-bottom { margin-top: var(--s-6); flex-wrap: wrap; }
  .ascii-end { order: 3; width: 100%; }
}

/* ---------- Intro animations (play once when the page loads) ---------- */
/* "backwards" = only hold the start state before playing, so the glitch can move letters afterwards */
@keyframes rise   { from { opacity: 0; transform: translateY(var(--from-y, 40%)); } }
@keyframes fade   { from { opacity: 0; } }
@keyframes drop   { from { opacity: 0; transform: translateY(-16px); } }
@keyframes slide  { from { transform: translateX(-100%); } }
@keyframes draw   { from { transform: scaleX(0); } }
@keyframes cta-in { from { opacity: 0; transform: translate(-50%, 48px); } }

.side-strip  { animation: slide 1.1s var(--ease-out) backwards; }
.frame-lines,
.side-ruler  { animation: fade 1.2s var(--ease-out) .2s backwards; }

.wm-l { --from-y: 70%; animation: rise .9s var(--ease-out) backwards; animation-delay: calc(.15s + var(--i, 0) * 60ms); }
.wm-l:nth-child(2) { --i: 1; }
.wm-l:nth-child(3) { --i: 2; }
.wm-l:nth-child(4) { --i: 3; }
.wm-l:nth-child(5) { --i: 4; }
.wm-l:nth-child(6) { --i: 5; }
.wm-sub { animation: fade .8s var(--ease-out) .6s backwards; }

.site-nav a { animation: drop .8s var(--ease-out) backwards; }
.site-nav a:nth-child(1) { animation-delay: .35s; }
.site-nav a:nth-child(2) { animation-delay: .43s; }
.site-nav a:nth-child(3) { animation-delay: .51s; }

.headline > span { display: inline-block; --from-y: .6em; animation: rise 1s var(--ease-out) backwards; }
.hl-from  { animation-delay: .45s !important; }
.hl-arrow { animation-delay: .55s !important; }
.hl-to    { animation-delay: .65s !important; }
.ascii-tc, .ascii-tracks { animation: fade 1s var(--ease-out) .85s backwards; }
.cycle-step { --from-y: 40px; animation: rise 1s var(--ease-out) backwards; }
.cycle-step:nth-child(1) { animation-delay: .45s; }
.cycle-step:nth-child(2) { animation-delay: .55s; }
.cycle-step:nth-child(3) { animation-delay: .65s; }
.cycle-step:nth-child(4) { animation-delay: .75s; }

.rule::before { animation: draw 1.4s var(--ease-in-out) .5s backwards; }
.rule span { animation: fade .6s var(--ease-out) 1.4s backwards; }

.filter-btn { --from-y: 20px; animation: rise .8s var(--ease-out) backwards; }
.filter-btn:nth-child(1) { animation-delay: .75s; }
.filter-btn:nth-child(2) { animation-delay: .83s; }
.filter-btn:nth-child(3) { animation-delay: .91s; }
.piece:first-child .piece-media { --from-y: 48px; animation: rise 1.2s var(--ease-out) .8s backwards; }
.piece:first-child .piece-info  { animation: fade 1s var(--ease-out) 1.05s backwards; }

.float-cta  { animation: cta-in .9s var(--ease-out) 1.4s backwards; }
.corner-toggles { animation: fade .8s var(--ease-out) 1.6s backwards; }

/* Fade-up as things scroll into view (classes added by script.js) */
.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Header dividers: a line between NEZKAI MP4 and the nav, and one under the header ---------- */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--frame);
  transition: opacity .3s ease;
}
.header-divider { display: none; }
@media (min-width: 701px) {
  .header-inner { display: flex; }
  .wordmark { margin-right: auto; }
  .header-divider {
    display: block;
    position: relative;
    align-self: stretch;
    width: 1px;
    margin: calc(-1 * var(--s-4)) var(--s-5) calc(-1 * var(--s-2));   /* full header height */
    background: var(--frame);
    transition: opacity .3s ease;
  }
}
/* all header lines and crosses fade once it collapses to the pill */
.is-scrolled.site-header::after,
.is-scrolled .header-divider { opacity: 0; }

/* ---------- Spacing: one rhythm. 96px between pieces, 96px either side of each divider ---------- */
@media (min-width: 701px) {
  .pieces { row-gap: var(--s-7); }
  .work, .faq { padding-bottom: 0; }
  main + .site-footer { margin-top: var(--s-7); }
  .site-footer { padding-block: var(--s-7) var(--s-5); }
  .footer-bottom { margin-top: var(--s-7); }
  /* More room in the first section, under the header line */
  .hero-cycle { padding-top: calc(var(--header-h) + var(--s-7)); }
  .cycle-text { padding-block: var(--s-3); }
  /* About page title sits closer under the header */
  .hero:not(.hero-cycle) { padding-top: calc(var(--header-h) + var(--s-6)); }
  .about { padding-bottom: 0; }
}

/* ==========================================================================
   Dark mode: on when <html data-theme="dark"> (set in the page <head>, switched
   by the [ MODE ] button). The --black / --white tokens swap, so everything
   that was black-on-white becomes white-on-black; the rest are touch-ups.
   ========================================================================== */
body { transition: background-color .4s ease, color .4s ease; }

[data-theme="dark"] {
  color-scheme: dark;
  --black: #FFFFFF;        /* text and outlines */
  --white: #000000;        /* page and panel backgrounds: full black */
  --grey-dark: #A8A8A3;    /* muted small text: 8.6:1 on black */
  --line: #2A2A2A;         /* quiet dividers (FAQ, lists, pill outline) */
  --frame: rgb(235 20 255 / .55);  /* page frame lines: magenta */
  --green: #3CF06E;        /* brighter green so it pops on black */
}

/* Footer: same black as the page, set apart by a magenta line */
[data-theme="dark"] .site-footer { position: relative; background: #000; color: #FFFFFF; }
/* footer's top line (full width, passes behind the ruler numbers) */
[data-theme="dark"] .site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--frame);
}
[data-theme="dark"] .footer-bottom a:hover { color: #FFFFFF; }

/* Hero cycle: a touch brighter so each step glows on black */
[data-theme="dark"] .cycle-step:nth-child(2) { --c: #A87BFF; }
[data-theme="dark"] .cycle-step:nth-child(3) { --c: #19E3C3; }
[data-theme="dark"] .cycle-step:nth-child(4) { --c: var(--green); }
[data-theme="dark"] .cycle-num,
[data-theme="dark"] .cycle-text { opacity: .3; }
[data-theme="dark"] .cycle-step.is-active .cycle-num,
[data-theme="dark"] .cycle-step.is-active .cycle-text { opacity: 1; }

/* Video frames and player stay true black */
[data-theme="dark"] .piece-media,
[data-theme="dark"] .modal-frame { background: #000; }
[data-theme="dark"] .play-hint { background: var(--magenta); color: #0E0E0E; }
[data-theme="dark"] .modal-close { color: #FFFFFF; }

/* Buttons: black text on magenta keeps 6:1 contrast */
[data-theme="dark"] .btn { color: #0E0E0E; }

/* Small fixed bits */
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .sfx-toggle { background: rgb(0 0 0 / .85); }
[data-theme="dark"] .about-photo { background: #1A1A1A; color: var(--grey-dark); }

/* Frame: no magenta strip; lines and ruler numbers in magenta */
[data-theme="dark"] .side-strip { display: none; }
[data-theme="dark"] .side-ruler { color: var(--magenta); }