/* ReCollection — companion site.
   Design system inherited from minus-ai.com; mood inherited from the work. */

:root {
  --ink:      #0B0B0C;
  --prose:    #2B2B30;
  --muted:    #8A8A8F;
  --hair:     #E6E6E6;
  --paper:    #FFFFFF;
  --canvas:   #F4F4F2;
  --accent:   #278FCE;   /* graphic accent — shapes, fills */
  --accent-t: #1E76A9;   /* text accent — eyebrows, links, labels */

  --serif: "Source Serif 4", Georgia, serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1320px;
  --pad:  clamp(20px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-t); text-decoration-color: color-mix(in srgb, var(--accent-t) 55%, transparent); text-underline-offset: 3px; }
code { font-family: var(--mono); font-size: 0.85em; background: var(--paper); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--hair); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.muted { color: var(--muted); }
.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; }

/* ── type ─────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-t);
  margin: 0 0 14px;
}
.h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 18px;
}
.lede { color: var(--prose); font-size: clamp(17px, 1.6vw, 20px); max-width: 58ch; margin: 0 0 40px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; border-radius: 999px; padding: 14px 24px; cursor: pointer;
  border: 1px solid transparent; transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #222; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--paper); }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ── header ───────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 18px var(--pad);
  background: color-mix(in srgb, var(--canvas) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.site-nav { display: flex; gap: 26px; }
.site-nav a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--prose); text-decoration: none; }
.site-nav a:hover { color: var(--accent-t); }

/* ── 1 · film ─────────────────────────────────────────────── */
.film { padding: 0; }
.film-frame {
  position: relative; width: 100%;
  height: min(88vh, 900px); min-height: 520px;
  background: #0E0F12 center / cover no-repeat;   /* Vimeo poster shows until the player paints */
  overflow: hidden;
}
/* Stacking: poster (frame bg) → media → caption → play button. While playing,
   the media layer rises above the caption so Vimeo's controls are reachable. */
.film-media { position: absolute; inset: 0; z-index: 0; cursor: pointer; }
.film-frame.playing .film-media { z-index: 3; cursor: default; }
/* Full player: letterboxed inside the frame with Vimeo's own controls. */
.film-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.film-frame.playing .film-caption { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.film-noscript { position: absolute; left: 50%; top: 56%; transform: translateX(-50%); margin: 0; z-index: 2; font-family: var(--mono); font-size: 13px; }
.film-noscript a { color: #fff; }

.film-play {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.08); color: #fff; backdrop-filter: blur(6px); cursor: pointer;
  display: grid; place-items: center; transition: background .2s ease, transform .2s ease;
}
.film-play:hover { background: rgba(255,255,255,.18); transform: translate(-50%, -50%) scale(1.04); }
.film-play svg { margin-left: 3px; }
.film-frame.playing .film-play { opacity: 0; pointer-events: none; }

.film-caption {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
  padding: clamp(56px, 9vw, 120px) var(--pad) clamp(28px, 5vw, 64px);
  /* The footage is often near-white, so the scrim has to earn the caption's legibility. */
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.78) 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.film-caption .eyebrow { color: rgba(255,255,255,.88); }
.film-title { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 12px; max-width: 16ch; }
.film-sub { margin: 0; color: rgba(255,255,255,.82); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55; max-width: 84ch; }

/* ── 1a · enter: the two doors ────────────────────────────── */
/* Two equal cards right under the film: the online session (dark, over the
   installation footage poster) and the code entry (light). Everything a
   visitor came here to do is above the fold. */
.enter { padding: clamp(28px, 4vw, 48px) 0 0; }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); }
.door { position: relative; border-radius: 18px; overflow: hidden; min-height: 340px; display: flex; text-decoration: none; }
.door-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 36px); width: 100%; min-width: 0; }
.door .eyebrow { display: block; }
.door-title { display: block; margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -0.012em; }
.door-text { display: block; margin: 0; font-size: 16px; line-height: 1.55; max-width: 40ch; }
.door-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; }
.door-cta { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.door-dark { background: #0B0C10; color: #fff; }
.door-dark .door-bg { position: absolute; inset: 0; background: #0B0C10 url("media/try-bg-poster.jpg") center / cover no-repeat; transition: transform .6s ease; }
.door-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,12,16,.86) 0%, rgba(11,12,16,.58) 55%, rgba(11,12,16,.28) 100%);
}
.door-dark:hover .door-bg { transform: scale(1.03); }
.door-dark .eyebrow { color: #8FC6EA; }
.door-dark .door-muted { color: rgba(255,255,255,.55); }
.door-dark .door-text { color: rgba(255,255,255,.82); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.door-dark .door-cta { color: #fff; }
.door-light { background: var(--paper); border: 1px solid var(--hair); color: var(--ink); }
.door-light .door-muted { color: var(--muted); }
.door-light .code { margin: 10px 0 0; }
/* anchors land clear of the sticky header */
section[id], .door[id] { scroll-margin-top: 64px; }

/* ── 1b · the work ────────────────────────────────────────── */
.about { padding: clamp(40px, 4.5vw, 60px) 0 clamp(28px, 3vw, 40px); }
.about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: 12px; }
.about-statement { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -0.012em; max-width: 18ch; }
.about-body p { margin: 0 0 16px; color: var(--prose); font-size: 17px; line-height: 1.6; }
.facts { margin: 26px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.fact { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.fact dt { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fact dd { margin: 0; font-family: var(--serif); font-size: 16px; color: var(--ink); }
.fact.is-placeholder dd { color: var(--muted); font-style: italic; }

/* ── 1c · how it works ────────────────────────────────────── */
.process { padding: clamp(28px, 3vw, 40px) 0 clamp(32px, 3.5vw, 48px); }
.steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vw, 32px); }
.step { position: relative; padding-top: 18px; border-top: 1px solid var(--ink); }
/* a dot on the rule marks each step; the rule reads as one continuous line */
.step::before { content: ""; position: absolute; top: -4.5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.step-n { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--accent-t); }
.step-glyph { display: block; width: 64px; height: 40px; margin: 14px 0 12px; color: var(--ink); }
.step-title { margin: 0 0 6px; font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -0.005em; }
.step-text { margin: 0; color: var(--prose); font-size: 15px; line-height: 1.55; max-width: 28ch; }

/* ── 1d · stills ──────────────────────────────────────────── */
.stills { padding: clamp(28px, 3vw, 40px) 0 clamp(32px, 3.5vw, 48px); border-top: 1px solid var(--hair); }
.stills-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.stills-note { margin: 0 0 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted); }
.still-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 10px; }
.still { margin: 0; grid-column: span 2; }
.still-wide { grid-column: span 4; }
.still-frame { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--paper); border: 1px solid var(--hair); }
.still-wide .still-frame { aspect-ratio: 2 / 1; }
.still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.still figcaption { margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--muted); }
/* placeholder frames: dashed, dot-grid, labelled */
.still.is-placeholder .still-frame {
  border-style: dashed; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--canvas) radial-gradient(circle, color-mix(in srgb, var(--ink) 12%, transparent) 1px, transparent 1.2px) 0 0 / 18px 18px;
}
.still-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-t); }
.still-hint { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); }

/* ── 1c2 · research ───────────────────────────────────────── */
.research { padding: clamp(28px, 3vw, 40px) 0 clamp(32px, 3.5vw, 44px); border-top: 1px solid var(--hair); }
.research-lead { margin: 4px 0 26px; font-family: var(--serif); font-size: clamp(19px, 1.9vw, 24px); line-height: 1.4; max-width: 58ch; color: var(--ink); }
.research-lead strong { font-weight: 600; }
.research-src { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-t); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent-t) 45%, transparent); }
.questions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 56px); border-top: 1px solid var(--ink); }
.question { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; padding: 16px 0 18px; border-bottom: 1px solid var(--hair); }
.q-n { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--accent-t); padding-top: 6px; }
.q-text { grid-column: 2; margin: 0 0 6px; font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1.3; letter-spacing: -0.005em; }
.q-note { grid-column: 2; margin: 0; color: var(--prose); font-size: 15px; line-height: 1.55; max-width: 44ch; }

/* ── 2c · publications & talks ────────────────────────────── */
.pubs { padding: clamp(24px, 2.8vw, 36px) 0 clamp(24px, 2.8vw, 36px); border-top: 1px solid var(--hair); }
.pub-list { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.pub { display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--hair); }
.pub-type { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-t); }
.pub-title { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.35; color: var(--ink); }
.pub-meta { margin: 3px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.pub-link { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; }
.pub-link:hover { color: var(--accent-t); }
.pub.is-placeholder .pub-title { color: var(--muted); font-style: italic; }
.pub.is-placeholder .pub-link { opacity: .4; }

/* ── 2d · partners ────────────────────────────────────────── */
.partners { padding: clamp(24px, 2.8vw, 36px) 0 clamp(32px, 3.5vw, 44px); }
.partners-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.partners-note { margin: 0 0 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted); }
.partner-grid { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.partner { background: var(--paper); border: 1px solid var(--hair); border-radius: 12px; padding: 18px 20px; min-height: 92px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.partner-name { font-family: var(--serif); font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--ink); }
.partner-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); }
/* a tile can carry a logo instead of its name; the mark is shown as supplied, never restyled */
.partner-logo { display: block; align-self: flex-start; height: 40px; width: auto; max-width: 100%; margin: 0; }
.partner-logo-wide { height: 52px; margin: 0; }
.partner.is-placeholder { border-style: dashed; background: color-mix(in srgb, var(--paper) 60%, var(--canvas)); }
.partner.is-placeholder .partner-name { color: var(--muted); font-style: italic; font-weight: 400; }

/* ── 5 · get involved ─────────────────────────────────────── */
.involve { padding: clamp(36px, 4vw, 52px) 0 clamp(40px, 4.5vw, 60px); border-top: 1px solid var(--hair); background: var(--paper); }
.involve-statement { margin: 0 0 28px; font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.15; letter-spacing: -0.012em; max-width: 26ch; }
.involve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 32px); }
.involve-card { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--ink); }
.involve-h { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 18px; }
.involve-text { margin: 0 0 6px; color: var(--prose); font-size: 15px; line-height: 1.55; }
.involve-text .ph { color: var(--muted); font-style: italic; }
.involve-card .btn { align-self: flex-start; margin-top: auto; }
.involve-cta { margin-top: clamp(24px, 3vw, 36px); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── 2 · awards ───────────────────────────────────────────── */
.awards { padding: clamp(28px, 3vw, 40px) 0 clamp(24px, 2.8vw, 32px); }
/* Festival laurels: poster-style emblems, four across. Branches AND type live
   in one SVG per emblem, so the text can never drift out of register and the
   whole lockup scales as a unit. */
/* Two columns: laurels as a 2×2 matrix on the left, exhibition timeline on the right. */
.awards-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px); align-items: stretch; margin-top: 20px;
}
/* The right cell takes its height from the laurels (the only in-flow content
   of the row); the timeline is absolutely placed inside it and scrolls. */
.venues-col { position: relative; min-height: 0; }
.laurel-grid {
  list-style: none; margin: 0; padding: 0; max-width: 440px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.5vw, 18px);
}
.laurel { width: 100%; max-width: 300px; margin: 0 auto; }
.fest { display: block; width: 100%; height: auto; color: var(--ink); fill: currentColor; }
.fq { font-family: var(--serif); font-weight: 600; font-size: 15px; letter-spacing: .07em; }
.fn { font-family: var(--serif); font-weight: 400; font-size: 15.5px; letter-spacing: .01em; }
.fm { font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .14em; fill: var(--muted); }
.frule { stroke: currentColor; stroke-width: 0.8; opacity: .65; }
/* Exhibition timeline: a rail down the left, one dot per year, venues as a ledger. */
.venues { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 6px; }
/* bottom fade says "there's more" — removed by app.js once scrolled to the end */
.venues::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; pointer-events: none;
  background: linear-gradient(180deg, rgba(244,244,242,0), var(--canvas) 85%);
  transition: opacity .25s ease;
}
.venues.at-end::after { opacity: 0; }
.venues-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.venues-label { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.venues-count { margin: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--muted); }
.timeline {
  list-style: none; margin: 0; padding: 0 12px 40px 0;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent;
}
.tl-row {
  position: relative;
  display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; column-gap: 14px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--hair);
}
/* the rail */
.tl-row::before { content: ""; position: absolute; left: 54px; top: 0; bottom: 0; width: 1px; background: var(--hair); }
.tl-first::before { top: 50%; }
.tl-row:last-child::before { bottom: 50%; }
/* year dots */
.tl-year { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .06em; color: var(--accent-t); position: relative; }
.tl-first .tl-year::after {
  content: ""; position: absolute; left: 50px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--canvas);
}
.tl-venue { font-family: var(--serif); font-size: 16.5px; line-height: 1.35; color: var(--ink); }
.tl-city { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* ── 2b · press & testimonials ────────────────────────────── */
.press { padding: clamp(24px, 2.8vw, 36px) 0 clamp(28px, 3vw, 40px); border-top: 1px solid var(--hair); }
.quotes { margin-top: 16px; position: relative; }
/* Native swipe: a scroll-snap track. Buttons and arrow keys drive the same scroll. */
.quote-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  outline: none; border-radius: 18px;
}
.quote-track::-webkit-scrollbar { display: none; }
.quote-track:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.quote {
  scroll-snap-align: center; scroll-snap-stop: always;
  margin: 0; padding: clamp(22px, 2.8vw, 30px) clamp(22px, 4.5vw, 60px) clamp(20px, 2.6vw, 26px);
  background: var(--paper); border: 1px solid var(--hair); border-radius: 18px;
  position: relative; min-width: 0;
}
/* opening mark in the margin */
.quote::before {
  content: "“"; position: absolute; left: clamp(18px, 2.4vw, 30px); top: clamp(6px, 1vw, 14px);
  font-family: var(--serif); font-weight: 600; font-size: clamp(48px, 5vw, 64px); line-height: 1;
  color: var(--accent); opacity: .55;
}
.quote-text {
  margin: 0; font-family: var(--serif); font-size: clamp(16px, 1.3vw, 17.5px); line-height: 1.5;
  color: var(--prose); max-width: 100ch; text-wrap: pretty;
}
.quote-source { margin: 14px 170px 0 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.quote-source::before { content: "—"; color: var(--muted); }
.quote-who { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--ink); }
.quote-meta { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* placeholders are visibly provisional, without looking broken */
.quote.is-placeholder { border-style: dashed; background: color-mix(in srgb, var(--paper) 60%, var(--canvas)); }
.quote.is-placeholder .quote-text { color: var(--muted); }
.quote.is-placeholder::before { opacity: .25; }

/* arrows + dots live in the card's bottom-right, on the attribution's row */
.quote-nav { position: absolute; right: clamp(20px, 3.2vw, 44px); bottom: clamp(16px, 2.2vw, 24px); margin: 0; display: flex; align-items: center; gap: 10px; }
.quote-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ink); background: transparent;
  color: var(--ink); cursor: pointer; display: grid; place-items: center;
  transition: background .15s ease, transform .15s ease;
}
.quote-btn:hover { background: var(--paper); transform: translateY(-1px); }
.quote-btn[disabled] { opacity: .3; cursor: default; transform: none; }
.quote-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.quote-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: color-mix(in srgb, var(--muted) 45%, transparent); transition: transform .15s ease, background .15s ease;
}
.quote-dot[aria-selected="true"] { background: var(--accent); transform: scale(1.3); }

/* ── 3 · try it ───────────────────────────────────────────── */
/* A dark band: the installation footage runs behind a left-weighted scrim so
   the copy (left) stays legible while the imagery breathes on the right. */
.try { position: relative; padding: clamp(88px, 12vw, 160px) 0; overflow: hidden; background: #0B0C10; color: #fff; }
.try-bg { position: absolute; inset: 0; z-index: 0; background: #0B0C10; }
.try-video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.try-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,12,16,.82) 0%, rgba(11,12,16,.58) 42%, rgba(11,12,16,.22) 100%),
    linear-gradient(180deg, rgba(11,12,16,.30), rgba(11,12,16,.30));
}
.try-inner { position: relative; z-index: 1; }
.try .eyebrow { color: #8FC6EA; }
.try .h2 { color: #fff; }
.try .h2 .muted { color: rgba(255,255,255,.55); }
.try .lede { color: rgba(255,255,255,.82); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.queue {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px; padding: 26px 28px 24px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.queue-eta { margin: 0; color: rgba(255,255,255,.82); max-width: 44ch; }
.soon-pill {
  display: inline-block; font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: #8FC6EA;
  border: 1px solid rgba(143,198,234,.45); background: rgba(143,198,234,.10);
  border-radius: 999px; padding: 7px 14px;
}
.soon-pill-light { color: var(--accent-t); border-color: color-mix(in srgb, var(--accent-t) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .try-video { display: none; }
  .try-bg { background: #0B0C10 url("media/try-bg-poster.jpg") center / cover no-repeat; }
}

/* ── 4 · clip ─────────────────────────────────────────────── */
.clip { padding: clamp(72px, 10vw, 140px) 0; }
.code { margin: 34px 0 0; }
.code-cells { display: flex; gap: 12px; }
.code-cell {
  width: 62px; height: 74px; text-align: center;
  font-family: var(--mono); font-size: 30px; font-weight: 500; letter-spacing: 0;
  color: var(--ink); background: var(--paper); border: 1px solid var(--hair); border-radius: 12px;
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
  text-transform: uppercase;
}
.code-cell:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.code[data-state="invalid"] .code-cell { border-color: #C0574A; animation: shake .32s ease; }
.code[data-state="valid"] .code-cell { border-color: var(--accent); }
@keyframes shake { 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
.code-hint { margin: 14px 0 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; color: var(--muted); }
.code[data-state="invalid"] .code-hint { color: #A5473B; }

.reveal { margin-top: 44px; padding-top: 32px; border-top: 1px dashed var(--hair); }
.reveal[hidden] { display: none; }
.reveal-label { margin: 0 0 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-t); }
.editions { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.edition { background: var(--paper); border: 1px solid var(--hair); border-radius: 16px; padding: 28px 28px 26px; display: flex; flex-direction: column; gap: 10px; }
.edition-featured { border-color: color-mix(in srgb, var(--accent) 45%, var(--hair)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent) inset; }
.edition-title { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: -0.005em; }
.edition-desc { margin: 0; color: var(--prose); font-size: 16.5px; }
.edition-meta { margin: 0 0 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.edition .btn { align-self: flex-start; margin-top: auto; }

/* ── footer ───────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--hair); padding: clamp(32px, 4vw, 48px) 0 24px; background: var(--canvas); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px clamp(24px, 4vw, 56px); }
.footer-title { margin: 0 0 10px; font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; }
.footer-tag { margin: 0 0 12px; color: var(--prose); font-size: 15.5px; line-height: 1.55; max-width: 34ch; }
.footer-by { margin: 0; font-size: 14.5px; color: var(--muted); }
.footer-by a { color: var(--ink); }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-h { margin: 0 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.footer-col a { font-family: var(--serif); font-size: 15.5px; color: var(--ink); text-decoration: none; width: fit-content; border-bottom: 1px solid transparent; transition: border-color .15s ease, color .15s ease; }
.footer-col a:hover { color: var(--accent-t); border-bottom-color: color-mix(in srgb, var(--accent-t) 55%, transparent); }
.footer-bottom {
  margin-top: clamp(32px, 4.5vw, 52px); padding-top: 18px; border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.footer-copy, .footer-legal { margin: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--muted); }
.footer-legal a { color: var(--prose); text-decoration: none; }
.footer-legal a:hover { color: var(--accent-t); }

/* ── subpages: try.html and clip.html ─────────────────────── */
.site-header-sub { justify-content: space-between; }
.site-home { font-family: var(--serif); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.site-home:hover { color: var(--accent-t); }
/* the online session takes the whole screen, dark */
.page-try { background: #0B0C10; }
.page-try .site-header { background: color-mix(in srgb, #0B0C10 80%, transparent); border-bottom-color: rgba(255,255,255,.12); }
.page-try .site-home, .page-try .site-nav a { color: rgba(255,255,255,.85); }
.page-try .site-home:hover, .page-try .site-nav a:hover { color: #8FC6EA; }
.try-page { min-height: calc(100vh - 61px); display: flex; align-items: center; }
.try-back { display: block; width: fit-content; margin-top: 32px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); text-decoration: none; }
.try-back:hover { color: #fff; }
/* the clip page */
.clip-page { padding: clamp(56px, 8vw, 110px) 0 clamp(72px, 10vw, 140px); min-height: calc(100vh - 61px - 80px); }
.footer-min { padding: 18px 0 28px; }
.footer-min .footer-bottom { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .questions { grid-template-columns: 1fr; }
  .partner-grid { grid-template-columns: 1fr 1fr; }
  .involve-grid { grid-template-columns: 1fr; gap: 22px; }
  .about-grid { grid-template-columns: 1fr; gap: 22px; }
  .doors { grid-template-columns: 1fr; }
  .door { min-height: 280px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .still-grid { grid-template-columns: 1fr 1fr; }
  .still, .still-wide { grid-column: span 1; }
  .still-wide { grid-column: span 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .awards-grid { grid-template-columns: 1fr; gap: 40px; }
  .laurel-grid { max-width: 620px; }
  /* stacked: show the whole list, no inner scroll */
  .venues { position: static; }
  .venues::after { display: none; }
  .timeline { overflow: visible; padding-bottom: 0; }
  .editions { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .partner-grid { grid-template-columns: 1fr; }
  .pub { grid-template-columns: 1fr; gap: 4px; }
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .quote-source { margin-right: 0; }
  .quote-nav { position: static; justify-content: center; margin-top: 14px; }
  .film-sub { font-size: 15px; line-height: 1.5; }
  .film-sub-more { display: none; }   /* keep the hero caption to its core on phones */
  .site-nav { display: none; }
  .film-frame { height: 78vh; min-height: 460px; }
  .code-cell { width: 56px; height: 66px; font-size: 26px; }
  .queue { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .film-play { transition: none; }
}