/* CLAYBROOK — COMING TO AMERICA
   Same values as the poster: black field, white ink, hairline rules,
   Courier for everything small. */

:root {
  --tempo: 80ms;
  --drift: 72s;
  --bg: #0a0a0a;
  --ink: #f6f5f2;
  --dim: #a6a39e;
  --dimmer: #7c7a76;
  --hair: #2e2d2b;
  --mono: "Courier New", Courier, ui-monospace, SFMono-Regular, monospace;
  --pad: clamp(22px, 6vw, 84px);   /* the frame of air around everything */
  --col: 720px;                    /* the centred measure, as in the comps */
}

* { box-sizing: border-box; }

/* The page only ever moves up and down. Without this the trackpad
   rubber-bands sideways and a two-finger swipe triggers back/forward,
   which makes the whole thing feel loose. */
html {
  scroll-behavior: smooth;
  background: var(--bg);
  overflow-x: clip;
  overscroll-behavior-x: none;
  width: 100%;
}

body {
  margin: 0;
  padding: 0 var(--pad);
  background: var(--bg);
  color: var(--ink);
  font: italic 13px/1.7 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  padding-bottom: 96px;
  overflow-x: clip;
  overscroll-behavior-x: none;
  width: 100%;
  max-width: 100%;
  touch-action: pan-y pinch-zoom;   /* vertical drag only, zoom still allowed */
}

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

/* ----------------------------------------------------------------- chrome */
.bar {
  position: sticky; top: 0; z-index: 8;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: clamp(22px, 4vw, 40px) 0 18px;
  background: var(--bg);
}
.nav { display: flex; gap: clamp(20px, 5vw, 64px); }
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px;
  border-bottom: 1px solid var(--ink); transition: right .18s;
}
.nav a:hover::after, .nav a:focus-visible::after { right: 0; }

.bar-right { display: flex; gap: 18px; align-items: baseline; }
.tick { color: var(--dim); font-style: normal; letter-spacing: .02em; }
.sys { color: var(--dim); font-style: normal; }
@media (max-width: 760px) { .tick { display: none; } }

.boot {
  position: fixed; inset: 0; z-index: 40;
  background: var(--bg); color: var(--ink);
  padding: var(--pad); white-space: pre-wrap;
  font-style: normal; letter-spacing: .04em;
}
.boot.done { display: none; }

/* ------------------------------------------------------------------- hero */
.hero { padding: clamp(34px, 7vw, 76px) 0 0; text-align: center; }

/* the headline runs the full frame, the way it does on the poster */
.wordmark { display: block; width: 100%; height: auto; }

.cap { margin: clamp(18px, 3vw, 30px) 0 clamp(40px, 8vw, 86px); line-height: 2.2; }

.stack {
  position: relative;
  width: min(var(--col), 100%);
  margin: 0 auto;
  aspect-ratio: 1.9 / 1;
}
/* one <img> per plate, stacked — a flip is a class toggle, not a decode */
.layers { position: absolute; inset: 0; }
.layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  will-change: opacity;
}
.layer.on { opacity: 1; }
.ascii {
  position: absolute; inset: 0; display: none; margin: 0;
  font-family: var(--mono); font-style: normal; font-weight: 400;
  letter-spacing: 0; white-space: pre; overflow: hidden;
  align-items: center; justify-content: center; text-align: center;
}
/* .neg = the panel goes white and the flag prints black on it */
.stack.neg { background: var(--ink); }
.stack.neg .ascii { color: var(--bg); }

.stack.is-ascii .layers { display: none; }
.stack.is-ascii .ascii { display: flex; }

.cap-sub { letter-spacing: .34em; }
.cap-kick { color: var(--dim); letter-spacing: .24em; font-style: normal; }

.ctl {
  display: flex; gap: 10px; justify-content: center; align-items: center;
  margin: clamp(34px, 7vw, 66px) auto 0; flex-wrap: wrap;
  max-width: 620px;
}
.ctl button {
  font: normal 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); background: transparent; border: 1px solid var(--hair);
  padding: 7px 11px; cursor: pointer;
}
.ctl button:hover, .ctl button:focus-visible { color: var(--ink); border-color: var(--ink); }


/* ------------------------------------------------------------------ dates */
section { padding: clamp(78px, 16vw, 190px) 0 0; }

.sec {
  margin: 0 auto 34px; max-width: var(--col); text-align: center;
  font: normal 11px/1 var(--mono); letter-spacing: .3em; color: var(--dim);
}

.list { list-style: none; margin: 0 auto; padding: 0; max-width: 560px; }

.row {
  display: grid; grid-template-columns: 5em minmax(0, 1fr) 6.4em;
  gap: 0 clamp(16px, 4vw, 40px); align-items: center;
  padding: 15px 12px; color: inherit;
  border-bottom: 1px solid var(--hair);
}
.list li:first-child .row { border-top: 1px solid var(--hair); }

.row .d {
  font-style: normal; font-size: 14px; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: .06em;
}
.row .city { letter-spacing: .1em; text-align: left; font-size: 15px; }
.row .city-t { color: var(--ink); }
.row .bill { color: var(--dim); font-size: 12px; }
.row .buy { font-style: normal; text-align: right; }

/* BUY has to look like something you press */
a.row .buy {
  display: inline-block; padding: 6px 10px;
  border: 1px solid var(--ink); color: var(--ink);
  font-size: 11px; letter-spacing: .14em; line-height: 1;
}
a.row:hover .buy, a.row:focus-visible .buy {
  background: var(--ink); color: var(--bg);
}
.row.pending .buy, .row.enc .buy { color: var(--dimmer); font-size: 11px; }

a.row { transition: background .14s, border-color .14s; }
a.row:hover, a.row:focus-visible { background: #171716; border-bottom-color: var(--ink); }
a.row:hover .bill, a.row:focus-visible .bill { color: var(--ink); }

.row.pending { cursor: not-allowed; }

/* sold out */
.row.out .buy { color: var(--ink); font-size: 11px; letter-spacing: .12em; }

/* a show that is not announced yet */
.row.enc .city-t, .row.enc .bill { color: var(--dim); letter-spacing: .06em; }
.row.enc .buy { color: var(--dim); font-size: 10px; }

.note { max-width: 560px; margin: 34px auto 0; text-align: center; color: var(--dim); font-style: normal; font-size: 11px; }

/* ------------------------------------------------------------- wall strip */
/* The banner is ASCII in both modes, running left to right for ever. */
.strip {
  margin: clamp(78px, 16vw, 190px) calc(var(--pad) * -1) 0;
  overflow: hidden; border-block: 1px solid var(--hair);
  height: clamp(120px, 20vw, 220px);
  display: flex; align-items: center;
}
.strip-ascii {
  display: block; margin: 0; width: max-content;
  white-space: pre; letter-spacing: 0;
  font-family: var(--mono); font-style: normal;
  font-size: clamp(4px, 0.66vw, 9px); line-height: 1.02;
  color: var(--ink);
  animation: marquee var(--drift) linear infinite;
  will-change: transform;
}
@keyframes marquee { from { transform: translateX(-50%); } to { transform: none; } }

/* ------------------------------------------------------------------ links */
.linkgrid {
  list-style: none; margin: 0 auto; padding: 0; max-width: var(--col);
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* outline rather than a gap-fill background, so a short last row
   does not leave a phantom cell hanging */
.linkgrid a {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 17px 15px; background: var(--bg);
  outline: 1px solid var(--hair); outline-offset: -1px;
}
.linkgrid a:hover, .linkgrid a:focus-visible { background: var(--ink); color: var(--bg); }
.linkgrid .arw { font-style: normal; color: var(--dim); }
.linkgrid a:hover .arw { color: var(--bg); }

.bigascii {
  margin: 0 auto; max-width: var(--col); overflow-x: auto; color: var(--dim);
  font: normal 10px/1.05 var(--mono); letter-spacing: 0; white-space: pre;
}

/* ----------------------------------------------------------------- footer */
.foot { padding: clamp(90px, 17vw, 200px) 0 clamp(40px, 8vw, 80px); }
.contacts { list-style: none; margin: 0 auto 30px; padding: 0; max-width: var(--col); }
.contacts li {
  display: flex; gap: 14px; justify-content: space-between;
  padding: 12px 0; border-top: 1px solid var(--hair);
}
.contacts a { border-bottom: 1px solid var(--hair); }
.contacts a:hover { border-color: var(--ink); }
#sig { max-width: var(--col); margin: 0 auto; font-size: 10px; line-height: 1.9; white-space: pre-line; }

/* ----------------------------------------------------------------- player */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
  display: flex; align-items: center; gap: 14px;
  padding: 12px var(--pad);
  backdrop-filter: blur(2px);
  background: var(--bg); border-top: 1px solid var(--ink);
}
.pbtn {
  font: normal 15px/1 var(--mono); color: var(--ink);
  background: transparent; border: 1px solid var(--ink);
  width: 34px; height: 30px; cursor: pointer; flex: none;
}
.pbtn.small { font-size: 10px; }
.pbtn:hover { background: var(--ink); color: var(--bg); }
.ptitle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vu { font-style: normal; letter-spacing: 0; flex: none; }
.ptime { font-style: normal; color: var(--dim); flex: none; }
@media (max-width: 640px) { .vu { display: none; } }

#sc { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; }

.blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .blink, .strip-ascii { animation: none; }
  html { scroll-behavior: auto; }
}


/* =========================================================================
   MODE:ASCII — the buttons drive the whole page, not just the flag
   ========================================================================= */
.wordmark-ascii {
  display: none; margin: 0; white-space: pre; letter-spacing: 0;
  font-family: var(--mono); font-style: normal; color: var(--ink);
}

[data-mode="ascii"] .wordmark { display: none; }
[data-mode="ascii"] .wordmark-ascii { display: block; }

/* rows become terminal records */
[data-mode="ascii"] .row { grid-template-columns: 5.6em minmax(0, 1fr) 5.4em; }
[data-mode="ascii"] .row .d::before { content: "["; }
[data-mode="ascii"] .row .d::after { content: "]"; }
[data-mode="ascii"] .row, [data-mode="ascii"] .linkgrid a,
[data-mode="ascii"] .contacts li, [data-mode="ascii"] .cap,
[data-mode="ascii"] .sec, [data-mode="ascii"] .nav a { font-style: normal; }
[data-mode="ascii"] .sec::before { content: "> "; }
[data-mode="ascii"] .linkgrid a::before { content: "[*] "; color: var(--dim); }
[data-mode="ascii"] .linkgrid a { outline-style: dashed; }
[data-mode="ascii"] .row { border-bottom: 1px dashed var(--hair); }

/* rows arrive as they decode */
.row { opacity: .18; transition: opacity calc(var(--tempo) * 3) linear; }
.row.in { opacity: 1; }

/* =========================================================================
   STATE:HOLD — nothing on the page moves
   ========================================================================= */
[data-hold="1"] .strip-ascii,
[data-hold="1"] .blink { animation-play-state: paused; }
[data-hold="1"] .row { transition: none; }




/* ==========================================================================
   SRC — the display carries the flag, the Rampage footage, or both at once
   ========================================================================== */
.film-v {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: contrast(1.08);
}

/* FLAG: plates only */
.stack[data-src="flag"] .film-v { display: none; }

/* FILM: footage only */
.stack[data-src="film"] .layers { display: none; }

/* BOTH: the flag sits over the footage as a difference blend, so everything
   inside the flag runs negative and everything outside plays straight.
   Same <video>, so the two halves can never drift out of sync. */
.stack[data-src="both"] .layers { mix-blend-mode: difference; }

/* ASCII takes over whichever source is showing */
[data-mode="ascii"] .film-v { visibility: hidden; }

.srccap {
  margin: 14px 0 0; color: var(--dim); min-height: 1.2em;
  font-style: normal; letter-spacing: .26em; font-size: 11px;
}


/* ==========================================================================
   FADERS — a thin native range is unusable on a phone. Big drag target,
   tap anywhere to jump, and steppers at the ends for precision.
   ========================================================================== */
.fader {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--hair);
  width: min(100%, 300px);
  height: 46px;
}
.fader:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.fader:hover { border-color: var(--ink); }

.fader .step {
  flex: 0 0 44px;                 /* a real thumb-sized target */
  border: 0; border-right: 1px solid var(--hair);
  background: transparent; color: var(--dim);
  font: normal 17px/1 var(--mono); cursor: pointer;
  touch-action: manipulation;
}
.fader .step:last-child { border-right: 0; border-left: 1px solid var(--hair); }
.fader .step:hover, .fader .step:active { background: var(--ink); color: var(--bg); }

.fader-track {
  position: relative; flex: 1 1 auto;
  cursor: ew-resize; overflow: hidden;
  touch-action: none;             /* dragging here must not scroll the page */
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
}
.fader-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%; background: #232322;
  pointer-events: none;
}
.fader-lab, .fader-val {
  position: relative; z-index: 1; pointer-events: none;
  font: normal 11px/1 var(--mono); letter-spacing: .12em; color: var(--dim);
}
.fader-val { color: var(--ink); font-variant-numeric: tabular-nums; }
.fader.dragging .fader-fill { background: #2f2f2d; }

@media (max-width: 560px) {
  .fader { width: 100%; }
  .ctl button[data-act] { flex: 1 1 auto; min-height: 42px; }
}