/* ============================================================
   LYING — video wall.
   Six clips, all playing at once, filling the viewport exactly.
   ============================================================ */

:root{
  --bg:    #000;
  --line:  #16161a;
  --ink:   #eceae5;
  --ink-3: #6e6b65;
  --red:   #ff3b2f;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 3px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ color-scheme:dark; -webkit-text-size-adjust:100%; }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;                       /* the wall is the whole viewport */
}

:focus-visible{ outline:2px solid var(--red); outline-offset:-3px; }

/* ---- the wall ---- */

.wall{
  display:grid; gap:2px; background:var(--line);
  width:100vw; height:100vh; height:100dvh;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(2, 1fr);
}

.tile{
  position:relative; overflow:hidden; min-width:0; min-height:0;
  padding:0; border:0; margin:0; background:#000; cursor:pointer;
  display:block; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.tile video{
  width:100%; height:100%; object-fit:cover; display:block;
  /* a hair of scale hides the sub-pixel edge seam when cover-cropping */
  transform:scale(1.005);
}

/* Nothing is audible until you ask for it, so say which one is live. */
.tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 0 var(--red);
  transition:box-shadow .18s var(--ease);
}
.tile[data-live="1"]::after{ box-shadow:inset 0 0 0 3px var(--red); }

.tile__badge{
  position:absolute; left:10px; bottom:10px; z-index:2;
  display:flex; align-items:center; gap:6px;
  padding:5px 9px; border-radius:99px;
  background:rgba(0,0,0,.62); backdrop-filter:blur(6px);
  font:600 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); opacity:0; transition:opacity .18s var(--ease);
  pointer-events:none;
}
.tile:hover .tile__badge,
.tile:focus-visible .tile__badge,
.tile[data-live="1"] .tile__badge{ opacity:1; }
.tile[data-live="1"] .tile__badge{ background:var(--red); color:#fff; }

/* ---- intro ---- */

.intro{
  position:fixed; inset:0; z-index:100; background:#000;
  overflow:hidden; contain:strict;
}
.intro.is-done{ opacity:0; pointer-events:none; transition:opacity .55s var(--ease); }

.intro__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background:#000; opacity:0;
  transition:opacity .5s var(--ease);
}
.intro__video.is-on{ opacity:1; }

/* The mark lands on a scrim rather than on the footage. The asset's
   background is solid black, so over a dark ground it reads as a clean
   cut-out — but this clip ends on bright newsprint, and blending it
   against white would wash the mark away entirely. */
.intro__scrim{
  position:absolute; inset:0; z-index:2; background:#000;
  opacity:0; transition:opacity .7s var(--ease); pointer-events:none;
}
.intro__scrim.is-on{ opacity:.88; }

/* the mark lands as the closing beat */
.intro__logo{
  position:absolute; left:50%; top:50%; z-index:3;
  width:min(38vmin, 300px); height:auto;
  opacity:0; transform:translate(-50%,-50%) scale(.94);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events:none;
}
.intro__logo.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.intro__progress{
  position:absolute; left:0; right:0; bottom:0; height:2px; z-index:4;
  background:rgba(255,255,255,.10); opacity:0;
  transition:opacity .4s var(--ease);
}
.intro__progress.is-on{ opacity:1; }
.intro__progress i{ display:block; height:100%; width:0; background:var(--red); }

.intro__skip{
  position:absolute; z-index:5;
  right:max(16px, env(safe-area-inset-right));
  bottom:max(18px, env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 16px; cursor:pointer;
  background:rgba(0,0,0,.5); color:var(--ink-3);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--r);
  font:600 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  backdrop-filter:blur(6px); touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:color .15s var(--ease), border-color .15s var(--ease);
}
.intro__skip:hover{ color:var(--ink); border-color:rgba(255,255,255,.4); }
.intro__skip kbd{ font:inherit; border:1px solid currentColor; border-radius:2px; padding:2px 5px; opacity:.7; }

/* ---- the mark ---- */

.mark{
  position:fixed; z-index:10;
  top:max(10px, env(safe-area-inset-top));
  left:max(10px, env(safe-area-inset-left));
  display:block; width:104px; height:104px;
  /* The mark is cut out now, so it floats instead of sitting in a chip —
     at this size a black tile would read as a hole punched in the wall.
     The shadow is what keeps it legible over a bright clip. */
  filter:drop-shadow(0 5px 16px rgba(0,0,0,.92));
  transition:transform .15s var(--ease);
}
.mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.mark:hover{ transform:scale(1.05); }
.mark:active{ transform:scale(1); }

/* ---- floating chrome ---- */

.chrome{
  position:fixed; z-index:10;
  top:max(14px, env(safe-area-inset-top));
  right:max(14px, env(safe-area-inset-right));
  display:flex; align-items:center; gap:8px;
}

.xbtn{
  display:inline-flex; align-items:center; gap:10px; flex:none;
  height:46px; padding:0 20px;
  background:var(--red); color:#fff; border-radius:var(--r);
  border:1px solid var(--red);
  font:600 15px/1 var(--mono); letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 10px 26px -10px rgba(0,0,0,.9);
  transition:background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
}
.xbtn:hover{ background:#ff5348; border-color:#ff5348; }
.xbtn:active{ transform:translateY(1px); }
.xbtn__icon{ width:17px; height:17px; flex:none; }

.sound{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:46px; height:46px; padding:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r);
  background:rgba(0,0,0,.55); backdrop-filter:blur(8px);
  color:var(--ink-3); touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:color .15s var(--ease), border-color .15s var(--ease);
}
.sound:hover{ color:var(--ink); border-color:rgba(255,255,255,.3); }
.sound[aria-pressed="true"]{ color:var(--ink); }
.sound[data-armed="1"]{ color:#ffb020; }

.sound__eq{ display:flex; align-items:flex-end; gap:2px; height:14px; width:16px; }
.sound__eq i{ flex:1; background:currentColor; height:3px; border-radius:1px; }
.sound[aria-pressed="true"] .sound__eq i{ animation:eq .9s ease-in-out infinite alternate; }
.sound[aria-pressed="true"] .sound__eq i:nth-child(1){ animation-duration:.72s; }
.sound[aria-pressed="true"] .sound__eq i:nth-child(2){ animation-duration:1.05s; }
.sound[aria-pressed="true"] .sound__eq i:nth-child(3){ animation-duration:.6s;  }
.sound[aria-pressed="true"] .sound__eq i:nth-child(4){ animation-duration:.88s; }
@keyframes eq{ from{ height:3px } to{ height:14px } }

@media (prefers-reduced-motion: reduce){
  .sound[aria-pressed="true"] .sound__eq i{ animation:none; height:9px; }
}

/* ---- sound cue: only up while the music is off ---- */

.cue{
  position:fixed; z-index:11; margin:0;
  top:calc(max(10px, env(safe-area-inset-top)) + 54px);
  right:max(14px, env(safe-area-inset-right));
  display:flex; align-items:center; gap:7px;
  padding:8px 12px; border-radius:99px;
  background:rgba(0,0,0,.66); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);
  font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); white-space:nowrap; pointer-events:none;
  animation:cueIn .5s var(--ease) both;
}
.cue[hidden]{ display:none; }
.cue__arrow{ color:var(--red); font-size:13px; }
@keyframes cueIn{ from{opacity:0; transform:translate3d(0,-6px,0)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion: reduce){ .cue{ animation:none; } }

/* ---- a way back to the popup after it is dismissed ---- */

.promo-reopen{
  position:fixed; z-index:11;
  left:max(14px, env(safe-area-inset-left));
  bottom:max(14px, env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:9px;
  min-height:44px; padding:0 18px; cursor:pointer;
  background:var(--red); color:#fff; border:1px solid var(--red);
  border-radius:99px;
  font:600 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.95);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:background .15s var(--ease), transform .12s var(--ease);
}
.promo-reopen:hover{ background:#ff5348; transform:translateY(-1px); }
.promo-reopen:active{ transform:translateY(0); }
.promo-reopen__play{ font-size:9px; }

@media (max-width:560px){
  .promo-reopen{ padding:0 15px; font-size:11px; }
  .cue{ top:calc(max(10px, env(safe-area-inset-top)) + 48px); font-size:10px; }
}

/* ---- promo ---- */

.promo{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  padding:max(16px, env(safe-area-inset-top)) 16px;
}
/* `.promo` and the UA's `[hidden]{display:none}` have equal specificity, so
   the class would win on source order and the popup could never close. */
.promo[hidden]{ display:none; }

.promo__scrim{
  position:absolute; inset:0; background:rgba(0,0,0,.74);
  backdrop-filter:blur(2px); animation:promoIn .22s var(--ease);
}
.promo__box{
  position:relative; width:min(100%, 440px);
  max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain;
  background:#0c0c0e; border:1px solid rgba(255,255,255,.14);
  border-radius:8px; box-shadow:0 40px 90px -30px #000;
  animation:promoUp .3s var(--ease);
}
@keyframes promoIn{ from{opacity:0} to{opacity:1} }
@keyframes promoUp{ from{opacity:0; transform:translate3d(0,14px,0) scale(.98)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion: reduce){
  .promo__scrim, .promo__box{ animation:none; }
}
.promo__box:focus, .promo__box:focus-visible{ outline:none; }

.promo__close{
  position:absolute; top:10px; right:10px; z-index:2;
  width:36px; height:36px; border-radius:4px; cursor:pointer;
  background:rgba(0,0,0,.6); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18); color:var(--ink);
  font-size:13px; line-height:1; touch-action:manipulation;
  transition:background .15s var(--ease), border-color .15s var(--ease);
}
.promo__close:hover{ background:var(--red); border-color:var(--red); }

/* The banner says "click here", so the banner and the still are one link —
   the obvious thing to click has to be the thing that works. */
.promo__hero{ display:block; text-decoration:none; color:inherit; }
.promo__hero:hover .promo__hed{ background:#ff5348; }
.promo__hero:hover .promo__media img{ transform:scale(1.03); }

.promo__hed{
  margin:0; padding:15px 50px 15px 18px;
  background:var(--red); color:#fff;
  font-family:"Archivo Black","Archivo",Impact,sans-serif;
  font-size:15px; line-height:1.2; letter-spacing:-.01em;
  text-transform:uppercase; text-align:center; text-wrap:balance;
  border-radius:7px 7px 0 0;
  transition:background .15s var(--ease);
}

.promo__media{ background:#000; overflow:hidden; }
.promo__media img{ transition:transform .4s var(--ease); }
@media (prefers-reduced-motion: reduce){
  .promo__media img{ transition:none; }
  .promo__hero:hover .promo__media img{ transform:none; }
}
.promo__media img{ width:100%; height:auto; display:block; }
.promo__media iframe{ width:100%; height:min(58vh, 460px); border:0; display:block; }

.promo__body{ padding:20px 22px 22px; }
.promo__eyebrow{
  margin:0 0 8px; font:600 10px/1.4 var(--mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
}
.promo__title{
  margin:0 0 18px; font:800 21px/1.15 var(--sans, inherit);
  font-family:"Archivo Black","Archivo",Impact,sans-serif;
  letter-spacing:-.02em; text-transform:uppercase; color:var(--ink);
  text-wrap:balance;
}
.promo__cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 20px; border-radius:var(--r);
  background:var(--red); border:1px solid var(--red); color:#fff;
  font:600 13px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s var(--ease), transform .1s var(--ease);
}
.promo__cta:hover{ background:#ff5348; }
.promo__cta:active{ transform:translateY(1px); }

/* ---- responsive: stays a wall, never a scrolling list ---- */

@media (max-width:1000px){
  .mark{ width:88px; height:88px; }
  .wall{ grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(3, 1fr); }
}
@media (max-width:560px){
  .mark{ width:76px; height:76px; }
  .xbtn{ height:40px; padding:0 13px; font-size:13px; gap:7px; }
  .xbtn__icon{ width:15px; height:15px; }
  .sound{ width:40px; height:40px; }
  .chrome{ gap:6px; }
}