/* Direction 2: Switch On. The whole viewport is an LED wall. */
:root {
  --off: #000000;
  --diode: #fffaf0;
  --dim: #9a968e;
  --seam: #111111;
  --ease-power: cubic-bezier(.2, .8, .2, 1);
  --ease-bend: cubic-bezier(.65, 0, .35, 1);
  --dpx: calc(100vw / 390);
  --pitch: 4.33px;      /* set from JS to match the wall */
  --gut: calc(16 * var(--dpx));
  --f-display: 'Doto', 'Courier New', monospace;
  --f-text: 'Instrument Sans', system-ui, sans-serif;
  color-scheme: dark;
}
@media (min-width: 768px) {
  :root { --dpx: calc(100vw / 1440); --pitch: 6px; --gut: calc(24 * var(--dpx)); }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--off); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--off); color: var(--diode);
  font: 400 15px/1.5 var(--f-text);
  overflow-x: clip;
}
@media (min-width: 768px) { body { font-size: max(15px, calc(17 * var(--dpx))); } }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--diode); outline-offset: 4px; }

.skip { position: fixed; z-index: 100; inset-inline-start: var(--gut); top: -60px; padding: 10px 14px; background: var(--diode); color: var(--off); }
.skip:focus { top: var(--gut); }

/* type */
.label {
  font: 500 12px/1.3 var(--f-text);
  letter-spacing: .12em; text-transform: uppercase;
}
.dim { color: var(--dim); }
.display {
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: .04em; line-height: .9;
  font-size: calc(84 * var(--dpx));
}
.display .dl { display: block; white-space: nowrap; }
.h2 {
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: .04em; line-height: 1;
  font-size: calc(40 * var(--dpx));
  text-wrap: balance;
}
.fact {
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: .04em; line-height: 1; font-size: 32px;
}
@media (min-width: 768px) {
  .display { font-size: calc(200 * var(--dpx)); }
  .h2 { font-size: calc(72 * var(--dpx)); }
  .fact { font-size: calc(48 * var(--dpx)); }
}

/* LED type: a dot mask on the wall's own grid (mask offsets set from JS) */
.led {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 34%, rgba(0, 0, 0, .6) 42%, transparent 52%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0 34%, rgba(0, 0, 0, .6) 42%, transparent 52%);
  -webkit-mask-size: var(--pitch) var(--pitch); mask-size: var(--pitch) var(--pitch);
  -webkit-mask-position: var(--mx, 0) var(--my, 0); mask-position: var(--mx, 0) var(--my, 0);
}

/* the wall */
#wall {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
  will-change: transform;
}
.nogl #wall { display: none; }

/* header */
.top {
  position: fixed; z-index: 20; inset-inline: 0; top: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(var(--gut) - 12px) calc(var(--gut) - 12px) 0;
  pointer-events: none;
}
.top a, .top button { pointer-events: auto; }
.wordmark, .wa, .pause { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; }
.top-end { display: flex; align-items: center; gap: 4px; }
.wa .wa-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.wa-icon { display: none; }
.pause { background: none; border: 0; color: var(--diode); cursor: pointer; opacity: .78; }
.pause:hover { opacity: 1; }
@media (max-width: 767px) {
  .wa { min-width: 44px; justify-content: center; padding: 0 11px; }
  .wa .wa-text { display: none; }
  .wa-icon { display: block; }
  .pause { padding: 0 8px; }
}
.loading .top { opacity: 0; }
.top { transition: opacity .5s var(--ease-power); }

/* preloader */
#loader { display: none; }
.js #loader {
  position: fixed; inset: 0; z-index: 30; display: flex; justify-content: space-between; align-items: flex-end;
  padding: var(--gut); pointer-events: none;
  transition: opacity .4s var(--ease-power);
}
#loader.gone { opacity: 0; }
.nogl #loader { display: none; }
#loader .label { font-variant-numeric: tabular-nums; }

/* the pinned wall track: 100vh first screen + 300vh of bend and turn */
.track { position: relative; height: 400vh; }
.anchor { position: absolute; inset-inline-start: 0; top: 155vh; width: 1px; height: 1px; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; touch-action: pan-y; }
.fallback, .static-ring { display: none; }

.hero, .ring-intro, .ring-info { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero a, .ring-info a { pointer-events: auto; }

.display-wrap { position: absolute; inset-inline-start: var(--gut); bottom: calc(110 * var(--dpx)); filter: drop-shadow(0 0 calc(var(--pitch) * 1.2) rgba(255, 250, 240, .45)); }
.hero-copy {
  position: absolute; inset-inline-start: var(--gut); inset-inline-end: var(--gut);
  bottom: calc(290 * var(--dpx)); max-width: 30em;
  text-shadow: 0 0 12px rgba(0, 0, 0, .9);
}
.scroll-cue { display: none; }
@media (min-width: 768px) {
  .display-wrap { bottom: calc(62 * var(--dpx)); }
  .hero-copy {
    inset-inline-start: auto; inset-inline-end: var(--gut);
    width: calc(316 * var(--dpx)); bottom: calc(80 * var(--dpx));
  }
  .scroll-cue {
    display: block; position: absolute; left: 50%; transform: translateX(-50%);
    bottom: calc(40 * var(--dpx)); white-space: nowrap; color: var(--diode);
  }
  .cue-line {
    position: absolute; left: 50%; top: calc(100% + 8px);
    width: var(--pitch); height: calc(var(--pitch) * 5); margin-left: calc(var(--pitch) / -2);
    background: radial-gradient(circle, var(--diode) 0 30%, transparent 36%) 0 0 / var(--pitch) var(--pitch);
    transform-origin: top; animation: cue 1.6s var(--ease-power) infinite;
  }
}
@keyframes cue { 0% { clip-path: inset(0 0 100% 0); } 55% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(100% 0 0 0); } }

/* first reveal of the DOM type: scanned on row by row, like the wall */
.js .hero .display-wrap, .js .hero .hero-copy, .js .hero .scroll-cue { visibility: hidden; }
.revealed .hero .display-wrap, .revealed .hero .hero-copy, .revealed .hero .scroll-cue { visibility: visible; }
.revealed .hero .display-wrap { animation: scan .56s steps(10, end) both; }
.revealed .hero .hero-copy { animation: scan .4s steps(6, end) .28s both; }
.revealed .hero .scroll-cue { animation: fade .5s var(--ease-power) .6s both; }
@keyframes scan { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.ring-intro { padding: calc(96 * var(--dpx)) var(--gut) 0; opacity: 0; }
.ring-intro .label { margin-bottom: 14px; }
.ring-intro .h2 { max-width: 9em; }
.ring-info {
  opacity: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 22px;
  padding: var(--gut); padding-bottom: calc(var(--gut) + env(safe-area-inset-bottom));
}
.facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 22px; margin: 0; }
.facts dd { margin: 0; }
.facts .label { margin-top: 6px; }
.facts .fact { font-size: 17px; white-space: nowrap; }
.facts { gap: 8px 14px; }
@media (min-width: 768px) {
  .ring-intro { padding-top: calc(110 * var(--dpx)); }
  .ring-info { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .facts { gap: 0 calc(48 * var(--dpx)); }
  .facts .fact { font-size: calc(48 * var(--dpx)); }
}

/* after the ring: normal flow on black */
.work, .services, .process { position: relative; z-index: 2; background: var(--off); padding: 96px var(--gut); }
@media (min-width: 768px) { .work, .services, .process { padding: calc(160 * var(--dpx)) var(--gut); } }
.work .h2, .services .h2, .process .h2 { margin-bottom: 40px; }

.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid #2a2a2a; }
.row { border-bottom: 1px solid #2a2a2a; }
.row-link, .row.slot { display: grid; grid-template-columns: 56px 1fr; gap: 6px 16px; padding: 22px 0; text-decoration: none; }
.row-name { display: block; font: 900 22px/1.05 var(--f-display); letter-spacing: .04em; }
.row-meta { display: block; margin-top: 8px; color: var(--dim); max-width: 42em; }
.row-no { font-size: 22px; }
.thumb { grid-column: 1 / -1; aspect-ratio: 4 / 1; overflow: hidden; background: #050505; margin-top: 8px; }
.thumb video { width: 100%; height: 100%; object-fit: cover; }
.row.live .row-link { color: var(--dim); transition: color .2s var(--ease-power); }
.row.live .row-link:hover, .row.live .row-link:focus-visible { color: var(--diode); }
.row.slot { color: #6f6c66; }
.row.slot .row-meta { color: #8c8880; }
@media (min-width: 768px) {
  .row-link, .row.slot { grid-template-columns: calc(150 * var(--dpx)) 1fr calc(440 * var(--dpx)); align-items: center; padding: calc(28 * var(--dpx)) 0; }
  .row-name, .row-no { font-size: calc(48 * var(--dpx)); }
  .thumb { grid-column: auto; margin: 0; }
  .row.slot { min-height: calc(166 * var(--dpx)); }
}

.lede { font-size: 1.15em; max-width: 26em; margin: -16px 0 48px; color: var(--dim); }
.svc-grid { display: grid; gap: 40px; border-top: 1px solid #2a2a2a; padding-top: 32px; }
.svc h3 { margin-bottom: 10px; }
.svc .label { margin-bottom: 14px; }
.svc p:last-child { max-width: 30em; }
@media (min-width: 768px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); gap: calc(48 * var(--dpx)); }
  .svc { border-inline-start: 1px solid #2a2a2a; padding-inline-start: calc(24 * var(--dpx)); }
  .svc:first-child { border-inline-start: 0; padding-inline-start: 0; }
}

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; border-top: 1px solid #2a2a2a; padding-top: 32px; }
.steps .fact { display: block; color: var(--dim); margin-bottom: 12px; font-size: 26px; }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--dim); max-width: 24em; }
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: calc(32 * var(--dpx)); }
  .steps .fact { font-size: calc(48 * var(--dpx)); }
}

/* contact: the wall comes back for the visitor's own night */
.contact {
  position: relative; z-index: 2; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gut) calc(var(--gut) + env(safe-area-inset-bottom));
}
.wall-preview { display: none; }
.contact-inner { width: 100%; max-width: 1100px; margin: 0 auto; padding-bottom: 32px; }
.contact-hint { color: var(--dim); margin-bottom: 22px; text-align: center; }
.form { display: grid; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field input {
  font: 400 17px/1.3 var(--f-text); color: var(--diode);
  background: rgba(0, 0, 0, .55); border: 0; border-bottom: 1px solid var(--dim); border-radius: 0;
  padding: 10px 2px; min-height: 44px; width: 100%;
}
.field input:focus { outline: none; border-bottom-color: var(--diode); box-shadow: 0 1px 0 var(--diode); }
.field input:focus-visible { outline: 2px solid var(--diode); outline-offset: 3px; }
.send {
  display: flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 8px;
  background: var(--diode); color: var(--off); text-decoration: none;
  font: 500 13px/1 var(--f-text); letter-spacing: .12em;
  transition: background-color .2s var(--ease-power);
}
.send:hover { background: #ffffff; }
.closing { text-align: center; margin-top: 22px; }
.foot { text-align: center; color: var(--dim); }
@media (min-width: 768px) {
  .contact-inner { padding-bottom: calc(56 * var(--dpx)); }
  .form { grid-template-columns: 1.4fr 1fr 1fr auto; align-items: end; gap: calc(24 * var(--dpx)); }
  .send { margin: 0; padding: 0 28px; }
}

/* ---------- no WebGL: the poster full-bleed through a CSS dot mask, no ring */
.nogl .track { height: auto; }
.nogl .stage { position: relative; height: auto; overflow: visible; }
.nogl .hero { position: relative; height: 100vh; height: 100svh; }
.nogl .fallback {
  display: block; position: absolute; inset: 0; width: 100%; height: 100vh; height: 100svh; object-fit: cover;
  opacity: .55; filter: grayscale(1);
  -webkit-mask-image: radial-gradient(circle, #000 0 30%, transparent 40%); mask-image: radial-gradient(circle, #000 0 30%, transparent 40%);
  -webkit-mask-size: var(--pitch) var(--pitch); mask-size: var(--pitch) var(--pitch);
}
.nogl .ring-intro, .nogl .ring-info { position: relative; opacity: 1; padding-top: 96px; }
.nogl .ring-info .source { display: none; }
.sources .dim { margin-bottom: 6px; }
.nogl .static-ring { display: grid; gap: 24px; list-style: none; margin: 0; padding: 24px var(--gut); }
.nogl .static-ring img {
  width: 100%; aspect-ratio: 4 / 1; object-fit: cover;
  -webkit-mask-image: radial-gradient(circle, #000 0 34%, transparent 44%); mask-image: radial-gradient(circle, #000 0 34%, transparent 44%);
  -webkit-mask-size: 4px 4px; mask-size: 4px 4px;
}
.nogl .static-ring .label { display: block; margin-top: 10px; }
.nogl .wall-preview {
  display: flex; align-items: center; justify-content: center; flex: 1; min-height: 36vh; padding-top: 80px;
  font: 900 calc(64 * var(--dpx)) / 1 var(--f-display); text-transform: uppercase; text-align: center; color: #3a3833;
}
.nogl .wall-preview.typed { color: var(--diode); }
.nogl .js .hero .display-wrap, .nogl .hero .display, .nogl .hero .hero-copy { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .revealed .hero .display-wrap, .revealed .hero .hero-copy { animation: fade .3s linear both; }
  .cue-line { animation: none; clip-path: none; }
  .top, #loader, .send, .row.live .row-link { transition-duration: .01ms; }
}