/* ZKFM — "Tune In" scroll-journey. Aztec brand kit. */

/* Departure Mono — pixel/LCD: labels, station IDs, UI chrome (free OFL, stand-in for MD Thermochrome) */
@font-face { font-family: "DepartureMono"; src: url("/assets/fonts/zkfm/departure-mono.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
/* ABC Arizona Serif — display titles & editorial */
@font-face { font-family: "Arizona"; src: url("/assets/fonts/zkfm/arizona-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Arizona"; src: url("/assets/fonts/zkfm/arizona-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
/* Epilogue — body (variable) */
@font-face { font-family: "Epilogue"; src: url("/assets/fonts/zkfm/epilogue-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* Francesco — decorative serif accent (italic only — the one cut actually used) */
@font-face { font-family: "Francesco"; src: url("/assets/fonts/zkfm/francesco-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #07080b;
  --bg-2: #0d0f14;
  --ink: #f2ead8;          /* Aztec cream */
  --muted: #9a9488;
  --green: #cdee4a;        /* Aztec acid lime (constant accent) */
  --lime: #cdee4a;
  --magenta: #ff3d7f;
  --cobalt: #3b36d9;
  --orange: #e8722e;
  --oxblood: #3a0e0e;
  --plum: #6b2c4e;
  --cyan: #4ad9e0;
  --cream: #f2ead8;
  --line: rgba(205, 238, 74, 0.18);
  --mono: "DepartureMono", ui-monospace, "SF Mono", Menlo, monospace;  /* labels/UI/station IDs */
  --font-display: "Arizona", Georgia, "Times New Roman", serif;         /* titles & editorial */
  --font-body: "Epilogue", system-ui, -apple-system, sans-serif;        /* body copy */
  --font-accent: "Francesco", "Arizona", Georgia, serif;               /* decorative punchlines */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.22) 3px);
  mix-blend-mode: multiply; opacity: 0.5;
}
a { color: inherit; }
picture { display: contents; }

/* ---- Header ---- */
.zk-header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px 24px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
  background: rgba(7,8,11,0.95);
}
.zk-header > .zk-avatar { justify-self: start; }
.zk-header > .zk-x-icon { justify-self: center; }
.zk-header > .mm-logo { justify-self: end; }
/* Marketing Madness cross-link rendered as the MM wordmark logo (matches the MM page) */
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-latin-var.woff2") format("woff2"); }
.mm-logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; text-decoration: none; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: opacity 0.2s ease; }
.mm-logo:hover { opacity: 0.82; }
.mm-logo:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.mm-logo__marketing { text-transform: uppercase; font-weight: 600; font-size: 7px; letter-spacing: 0.45em; margin-left: 0.45em; margin-bottom: 0.35em; color: rgba(255, 255, 255, 0.45); }
.mm-logo__madness { font-weight: 900; letter-spacing: -0.02em; font-size: 1.3rem; background: linear-gradient(100deg, #ff2d8a, #ff5d3a, #f5a623, #d4e000, #8fe000, #00c8a0, #00a8ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* Headshot home button + sibling-project cross-link */
.zk-avatar { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
.zk-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; border: 1.5px solid var(--green); box-shadow: 1px 0 var(--magenta), -1px 0 var(--cyan); transition: box-shadow 0.2s ease; }
.zk-avatar:hover img { box-shadow: 0 0 10px rgba(205,238,74,0.45), 2px 0 var(--magenta), -2px 0 var(--cyan); }
.zk-avatar:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 50%; }
@media (max-width: 560px) { .mm-logo__madness { font-size: 1.05rem; } .mm-logo__marketing { font-size: 6px; } }
.zk-x-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--ink); transition: color 0.2s ease; }
.zk-x-icon svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.zk-x-icon:hover { color: var(--green); }
.zk-x-icon:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }

/* Sticky frequency tuner (in-page nav for the 21-day journey) */
.zk-tuner {
  position: sticky; top: 80px; z-index: 90;
  display: flex; gap: 18px; justify-content: center; align-items: center;
  padding: 10px 16px; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  background: rgba(7,8,11,0.93);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
.zk-tuner::-webkit-scrollbar { display: none; }
.zk-tuner a { color: var(--muted); text-decoration: none; padding: 6px 4px; flex: none; }
.zk-tuner a:hover { color: var(--ink); }
.zk-tuner a.is-active { color: var(--lime); }

.act, #top { scroll-margin-top: 132px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---- Hero + 3D collage ---- */
.zk-hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center;
  overflow: hidden; padding: 100px 24px;
  background: radial-gradient(60% 80% at 50% 0%, rgba(205,238,74,0.08), transparent 70%),
              radial-gradient(50% 60% at 80% 30%, rgba(59,54,217,0.10), transparent 70%),
              var(--bg);
}
.zk-hero__inner { position: relative; z-index: 2; text-align: center; }

.zk-hero__collage { position: absolute; inset: 0; z-index: 0; perspective: 1000px; perspective-origin: 50% 46%; }
.collage__field { position: absolute; inset: 0; transform-style: preserve-3d; }
.zk-hero__collage::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(46% 42% at 50% 44%, rgba(7,8,11,0.86), rgba(7,8,11,0.38) 62%, rgba(7,8,11,0.10) 100%),
    linear-gradient(180deg, rgba(7,8,11,0.45), transparent 26%, transparent 72%, var(--bg));
}
.ctile {
  position: absolute; left: 50%; top: 50%; border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(205,238,74,0.10); box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  will-change: transform, opacity; backface-visibility: hidden;
}
.ctile img { width: 100%; height: auto; display: block; }

/* ---- Page-wide blurred backdrop: the same collage, fixed behind all content ---- */
.zk-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; perspective: 1000px; perspective-origin: 50% 50%; }
.zk-bg .collage__field { position: absolute; inset: 0; transform-style: preserve-3d; }
/* Per-tile blur is baked into each tile's GPU layer once → movement stays cheap. */
.zk-bg .ctile { filter: blur(7px); box-shadow: none; border-color: rgba(205,238,74,0.05); }
.zk-bg::after { content: ""; position: absolute; inset: 0; background: rgba(7,8,11,0.4); }
/* Keep all real content above the backdrop. */
main { position: relative; z-index: 1; }
.zk-footer { position: relative; z-index: 1; }
@media (max-width: 760px) { .zk-bg .ctile { filter: blur(5px); } }
.zk-hero__mark { font-family: var(--mono); font-weight: 800; font-size: clamp(64px,16vw,180px); letter-spacing: 0.04em; line-height: 0.9; color: var(--green); text-shadow: 4px 0 var(--magenta), -4px 0 var(--cyan); }
.zk-hero__tagline { max-width: 640px; margin: 24px auto 0; font-family: var(--font-accent); font-style: italic; font-size: clamp(19px,2.8vw,26px); color: var(--cream); }
.zk-hero__stats { margin-top: 30px; font-family: var(--mono); font-size: clamp(12px,2vw,15px); letter-spacing: 0.12em; color: var(--green); text-transform: uppercase; }
.zk-hero__stats b { color: var(--magenta); }
.zk-hero__tuned { margin-top: 18px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.zk-hero__tuned s { text-decoration-color: var(--magenta); }
.zk-hero__context { max-width: 640px; margin: 34px auto 0; font-size: 15px; color: var(--muted); }
.zk-hero__context a { color: var(--green); }

/* ---- Featured launch broadcast (between hero and the frequencies) ---- */
/* Full-width plain band so the moving backdrop never shows behind the start-here video */
.zk-feature { position: relative; background: var(--bg); padding: clamp(48px,9vw,104px) 24px; text-align: center; }
.zk-feature__eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); margin-bottom: 18px; }
.zk-feature__btn {
  position: relative; display: block; width: 100%; max-width: 1100px; margin: 0 auto;
  aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); background: #000; text-decoration: none;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.zk-feature__btn:hover { border-color: var(--green); transform: translateY(-4px); box-shadow: 0 40px 110px rgba(0,0,0,0.7), 0 0 50px rgba(205,238,74,0.18); }
.zk-feature__btn img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.92; transition: opacity 0.25s ease; }
.zk-feature__btn:hover img { opacity: 1; }
.zk-feature__play {
  position: absolute; inset: 0; margin: auto; width: 92px; height: 92px; border-radius: 50%;
  background: rgba(7,8,11,0.55); border: 2px solid var(--green);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: transform 0.25s ease, background 0.25s ease; animation: zk-pulse 2.6s ease-out infinite;
}
.zk-feature__play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%);
  border-style: solid; border-width: 15px 0 15px 25px; border-color: transparent transparent transparent var(--green);
}
.zk-feature__btn:hover .zk-feature__play { transform: scale(1.1); background: rgba(143,224,0,0.18); }
@keyframes zk-pulse {
  0% { box-shadow: 0 0 0 0 rgba(205,238,74,0.45); }
  70% { box-shadow: 0 0 0 22px rgba(205,238,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(205,238,74,0); }
}
.zk-feature__badge { position: absolute; top: 14px; left: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--magenta); background: rgba(7,8,11,0.82); padding: 5px 10px; border-radius: 5px; }
.zk-feature__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px,4.5vw,44px); letter-spacing: -0.01em; margin-top: 26px; }
.zk-feature__sub { max-width: 560px; margin: 12px auto 0; color: var(--muted); font-size: clamp(15px,1.9vw,17px); }

/* ---- Frequency act ---- */
/* Per-frequency vibes — one machine, three stations */
.act[data-vibe="ground"]  { --v1: #4a2c5a; --v2: #3a0e0e; --vacc: #f0a83c; }  /* the leak: plum/oxblood/amber */
.act[data-vibe="nullify"] { --v1: #0b0f2a; --v2: #131a40; --vacc: #4ad9e0; }  /* the proof: navy/cyan */
.act[data-vibe="witness"] { --v1: #2a0a1e; --v2: #1a0a2a; --vacc: #ff3d7f; }  /* the rally: stained-glass/hot-pink */

.act {
  position: relative;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--v1) 40%, rgba(7,8,11,0.62)) 0%, rgba(7,8,11,0.74) 72%);
}
.act > * { position: relative; z-index: 1; }

/* Per-frequency textures — one machine, three signal qualities */
.act::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Ground Zero — heavy grain + scanlines (murky pirate signal) */
.act[data-vibe="ground"]::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.30) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: auto, 150px 150px;
  opacity: 0.5; mix-blend-mode: overlay;
}
/* Nullify — clean cosmic glow + faint starfield (resolved signal) */
.act[data-vibe="nullify"]::before {
  background-image:
    radial-gradient(48% 36% at 50% 26%, rgba(74,217,224,0.12), transparent 70%),
    radial-gradient(1.5px 1.5px at 18% 32%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 72% 20%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 62%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 78%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 48%, rgba(255,255,255,0.32), transparent 60%);
}
/* Witness This — halftone pop (busiest, highest energy) */
.act[data-vibe="witness"]::before {
  background-image: radial-gradient(rgba(255,61,127,0.16) 1px, transparent 1.7px);
  background-size: 7px 7px;
  opacity: 0.5; mix-blend-mode: screen;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Compact frequency header (replaces the full-screen portrait poster intro) */
.act__head { max-width: 760px; margin: 0 auto; text-align: center; padding: clamp(52px,9vw,88px) 24px 6px; }
.act__station { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vacc, var(--green)); }
.act__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px,7vw,64px); letter-spacing: -0.01em; line-height: 1.02; margin-top: 8px; }
.act__blurb { max-width: 560px; margin: 14px auto 0; color: var(--ink); opacity: 0.82; font-size: clamp(15px,1.8vw,17px); }

/* The frequency's portrait intro poster, highlighted among Day 1's posters */
.poster--intro figcaption { color: var(--vacc, var(--green)); }
.poster--intro img {
  border-color: color-mix(in srgb, var(--vacc, var(--green)) 60%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vacc, var(--green)) 40%, transparent), 0 14px 40px rgba(0,0,0,0.5);
}
.poster--intro .poster__zoom:hover img { border-color: var(--vacc, var(--green)); }
.scene__posters--intro .poster { width: 260px; max-width: 31%; }
/* Small screens: Day 1's three posters become a compact tappable shelf */
@media (max-width: 760px) {
  .scene__posters--intro .poster { width: auto; max-width: none; flex: 1 1 0; min-width: 0; }
  .scene__posters--intro figcaption { font-size: 10px; letter-spacing: 0.1em; margin-bottom: 7px; }
}

/* ---- Day carousel (horizontal: one day per panel) ---- */
.act__week { position: relative; padding-bottom: 8px; }

/* Persistent current-day readout + prev/next, pinned just below the tuner */
.act__weekbar {
  position: sticky; top: 116px; z-index: 40;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: fit-content; max-width: min(900px, calc(100% - 32px));
  margin: 0 auto; padding: 9px 12px;
  background: rgba(7,8,11,0.92); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.week__arrow {
  flex: none; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: rgba(7,8,11,0.9); border: 1px solid var(--line); color: var(--ink);
  font-size: 22px; line-height: 1; display: grid; place-items: center;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.week__arrow:hover { border-color: var(--green); color: var(--green); }
.week__arrow:disabled { opacity: 0.28; cursor: default; }
.week__now { text-align: center; min-width: 0; }
.week__num { display: block; font-family: var(--mono); font-weight: 700; font-size: 16px; letter-spacing: 0.24em; color: var(--vacc, var(--green)); }

/* Horizontal scroll-snap track. Vertical wheel still scrolls the page on to the
   next frequency; days are reached by swipe / arrows / day strip / trackpad. */
.act__scenes {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.act__scenes::-webkit-scrollbar { display: none; }
.act__scenes:focus-visible { outline: 2px solid var(--lime); outline-offset: -4px; }

.scene {
  flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
  display: grid; place-items: start center; padding: 10px 24px 24px;
  opacity: 0.32; transition: opacity 0.45s ease;
}
.scene.is-active { opacity: 1; }
.scene__inner { width: 100%; max-width: 1100px; }
.scene__x { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.scene__x:hover { color: var(--green); }

/* Day selector strip — lights up the current day, pinned to the bottom in view */
.act__days {
  position: sticky; bottom: 0; z-index: 40;
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, var(--bg) 38%, transparent);
}
.day-dot {
  flex: none; min-width: 40px; min-height: 36px; padding: 6px 8px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--muted); background: rgba(7,8,11,0.6);
  border: 1px solid var(--line); border-radius: 7px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.day-dot:hover { color: var(--ink); border-color: color-mix(in srgb, var(--vacc, var(--green)) 50%, var(--line)); }
.day-dot.is-active {
  color: var(--bg); background: var(--vacc, var(--green));
  border-color: var(--vacc, var(--green)); font-weight: 700;
  box-shadow: 0 0 18px color-mix(in srgb, var(--vacc, var(--green)) 45%, transparent);
}

/* Day posters (the storytelling lead-in: lineup + briefing) */
.scene__posters {
  display: flex; gap: 36px; margin-bottom: 34px; flex-wrap: wrap;
  justify-content: center; perspective: 1100px;
}
.poster {
  width: 240px; max-width: 44%;
  display: flex; flex-direction: column; align-items: center;
  transform-style: preserve-3d;
}
.poster figcaption {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--green); margin-bottom: 12px; text-align: center;
}
.poster--take figcaption { color: var(--magenta); }
.poster__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.poster img {
  width: 100%; height: auto; display: block; background: #000;
  aspect-ratio: 732 / 1024; object-fit: cover;
  border: 1px solid var(--line); border-radius: 8px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.poster__zoom:hover img { border-color: var(--green); transform: translateY(-3px); }

.scene__videos { display: grid; gap: 18px; perspective: 1100px; grid-template-columns: repeat(3, 1fr); }
.scene__videos[data-count="2"] { grid-template-columns: repeat(2, 1fr); max-width: 800px; }
.scene__videos[data-count="4"] { grid-template-columns: repeat(4, 1fr); }

/* ---- Video card (click to play) ---- */
.vid {
  display: flex; flex-direction: column; padding: 0; border: 0; background: none;
  cursor: pointer; text-align: left; transition: transform 0.2s ease;
}
.vid:hover { transform: translateY(-4px); }
.vid__media {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; background: #000;
  transition: border-color 0.2s ease;
}
.vid:hover .vid__media { border-color: var(--green); }
.vid__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid__name {
  margin: 0 0 10px; font-family: var(--font-accent); font-style: italic;
  font-size: clamp(15px, 1.5vw, 19px); line-height: 1.2; color: var(--cream); text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vid__play {
  position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%;
  background: rgba(7,8,11,0.6); border: 2px solid var(--green); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: transform 0.2s ease, background 0.2s ease;
}
.vid__play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%);
  border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--green);
}
.vid:hover .vid__play { transform: scale(1.12); background: rgba(143,224,0,0.15); }
.vid__tag {
  position: absolute; bottom: 8px; left: 8px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; color: var(--green); background: rgba(7,8,11,0.8); padding: 3px 7px; border-radius: 4px;
}

/* reveal states (no-JS / reduced-motion fallback) */
.vid.is-in { opacity: 1; }

/* ---- Day 15 — Claire special feature (standalone, between Freq 02 and 03) ---- */
.zk-claire { position: relative; z-index: 1; background: var(--bg); text-align: center; padding: clamp(56px,10vw,120px) 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.zk-claire__eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--magenta); }
.zk-claire__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(44px,9vw,96px); letter-spacing: 0.02em; line-height: 1; margin-top: 14px; color: var(--cream); }
.zk-claire__text { max-width: 600px; margin: 20px auto 0; color: var(--ink); opacity: 0.85; font-size: clamp(16px,1.9vw,18px); line-height: 1.5; }
.zk-claire__x { display: inline-flex; align-items: center; min-height: 44px; margin-top: 22px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--green); }
.zk-claire__x:hover { color: var(--cream); }

/* ---- Poster lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 10000; display: none; place-items: center;
  padding: 4vh 4vw; background: rgba(3,4,6,0.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); cursor: zoom-out;
}
.lightbox.is-open { display: grid; }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 8px; border: 1px solid var(--line); box-shadow: 0 0 60px rgba(143,224,0,0.15); }
.lightbox__close { position: fixed; top: 18px; right: 22px; width: 40px; height: 40px; border-radius: 50%; background: none; border: 1px solid var(--line); color: var(--ink); font-size: 18px; cursor: pointer; }
.lightbox__close:hover { border-color: var(--green); color: var(--green); }

/* ---- Fullscreen player ---- */
.player {
  position: fixed; inset: 0; z-index: 10000; display: none; place-items: center;
  padding: 4vh 4vw; background: rgba(3,4,6,0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.player.is-open { display: grid; }
.player__frame { width: min(100%, 1100px); aspect-ratio: 16/9; }
.player__frame iframe { width: 100%; height: 100%; border-radius: 10px; border: 1px solid var(--line); }
.player__close { position: fixed; top: 18px; right: 22px; width: 42px; height: 42px; border-radius: 50%; background: none; border: 1px solid var(--line); color: var(--ink); font-size: 18px; cursor: pointer; }
.player__close:hover { border-color: var(--green); color: var(--green); }

/* ---- End-of-page navigation: collage click-through to the other project + back to top ---- */
.zk-pagenav { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 60px 24px 6px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.zk-pagenav__label { font-family: var(--mono); font-weight: 700; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--green); }
.zk-pagenav__next { position: relative; overflow: hidden; display: block; width: 100%; max-width: 460px; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 14px; background: #07080b; text-decoration: none; color: #fff; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.zk-pagenav__next:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); border-color: var(--green); }
.zk-pagenav__art { position: absolute; inset: 0; display: block; }
.zk-pagenav__art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.zk-pagenav__next:hover .zk-pagenav__art img { transform: scale(1.04); }
.zk-pagenav__overlay { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px 18px; text-align: left; background: linear-gradient(to top, rgba(7, 8, 11, 0.92) 0%, rgba(7, 8, 11, 0.5) 48%, rgba(7, 8, 11, 0.1) 100%); }
.zk-pagenav__name { display: inline-flex; flex-direction: column; line-height: 1; }
.zk-pagenav__name .m1 { font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4em; margin-left: 0.4em; margin-bottom: 5px; color: rgba(255, 255, 255, 0.85); }
.zk-pagenav__name .m2 { font-family: "Inter", system-ui, sans-serif; font-weight: 900; font-size: 34px; letter-spacing: -0.01em; background: linear-gradient(100deg, #ff2d8a, #ff5d3a, #f5a623, #d4e000, #8fe000, #00c8a0, #00a8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zk-pagenav__sub { display: block; margin-top: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.82); }
.zk-pagenav__go { flex: none; font-family: var(--font-display); font-size: 26px; line-height: 1; color: #fff; transition: transform 0.2s ease; }
.zk-pagenav__next:hover .zk-pagenav__go { transform: translateX(4px); }
.zk-pagenav__top { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.2s ease; }
.zk-pagenav__top:hover { color: var(--green); }

/* ---- Footer ---- */
.zk-footer { text-align: center; padding: 50px 24px; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; border-top: 1px solid var(--line); }
.zk-footer a { color: var(--green); text-decoration: none; }
.zk-footer__socials { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.zk-footer .zk-social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--muted); transition: color 0.2s ease; }
.zk-footer .zk-social svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.zk-footer .zk-social:hover { color: var(--green); }
.zk-footer .zk-social:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }
.foot-legal { margin-top: 14px; text-align: center; }
.foot-legal > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.foot-legal > summary::-webkit-details-marker { display: none; }
.foot-legal > summary::after { content: "▾"; transition: transform 0.2s ease; }
.foot-legal[open] > summary::after { transform: rotate(180deg); }
.foot-legal__body { margin: 10px auto 0; max-width: 720px; font-size: 10px; line-height: 1.65; color: var(--muted); }
.foot-legal__body a { color: var(--green); }

@media (max-width: 760px) {
  .scene__videos, .scene__videos[data-count="2"], .scene__videos[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .scene__videos, .scene__videos[data-count="2"], .scene__videos[data-count="4"] { grid-template-columns: 1fr; }
  /* Every day's posters stay in one row (like Day 1) so all panels are the same
     height — otherwise Days 2+ stacked full-width and left huge dead space. */
  .scene__posters { gap: 12px; }
  .scene__posters .poster { width: auto; max-width: none; flex: 1 1 0; min-width: 0; }
  .scene__posters figcaption { font-size: 10px; letter-spacing: 0.1em; margin-bottom: 7px; }
}

/* No-JS fallback */
.zk-noscript { max-width: 720px; margin: 0 auto; padding: 60px 24px; color: var(--ink); }
.zk-noscript h2 { font-family: var(--font-display); font-size: 28px; margin-bottom: 14px; }
.zk-noscript ul { margin: 16px 0; padding-left: 20px; line-height: 1.9; }
.zk-noscript a { color: var(--green); }

/* Visible keyboard focus */
a:focus-visible, button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }

/* Honour reduced-motion for CSS hover transforms (GSAP motion is gated in JS) */
/* Entrance reveals (JS adds .reveal; IO adds .is-in). No-JS = visible. */
.zk-feature.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.zk-feature.reveal.is-in { opacity: 1; transform: none; }
.act__head.reveal > * { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.act__head.reveal.is-in > * { opacity: 1; transform: none; }
.act__head.reveal.is-in > *:nth-child(2) { transition-delay: 0.07s; }
.act__head.reveal.is-in > *:nth-child(3) { transition-delay: 0.14s; }
.act__head.reveal.is-in > *:nth-child(4) { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  .vid, .poster img, .vid__play { transition: none; }
  .vid:hover, .poster__zoom:hover img { transform: none; }
  .scene { transition: none; }
  .act__scenes { scroll-behavior: auto; }
  .zk-feature__play { animation: none; }
  .zk-feature__btn:hover { transform: none; }
}