/* MUDDERFUCKERZ — the series home (2026-11-03). ktrlkhaos.com/mudderfuckerz now, mudderfuckerz.ktrlkhaos.com later.
   The wall grows: a wall of old TVs in the dark, seen through the camcorder; the newest episode plays on the big walnut set front
   and centre, every older episode on its own set, the missing one is snow with the tape on it, the rest of the wall plays the night
   until an episode takes the set. The episode rows live in index.html (EPISODES); this file knows nothing per-episode.
   Fonts: Geist Mono (the site), Big Shoulders Display 900 (the show's cards), Permanent Marker (the red marker), Caveat (fallback). */

/* arriving from the hall: the house's pages crossfade (same-origin view transition) */
@view-transition { navigation: auto; }


:root {
  --ink:    #0b0b0d;
  --bone:   #e7e4dc;
  --dim:    #6f6e68;
  --faint:  #3a3a3e;
  --yellow: #ffe600;
  --mf-red:    #cf1e26;
  --mf-bone:   #efe6d2;
  --mf-orange: #ff8a1f;
  --mf-marker: 'Permanent Marker', 'Caveat', cursive;
  --mf-tv:     'Big Shoulders Display', 'Impact', sans-serif;
  --mf-mono:   'Geist Mono', ui-monospace, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: clip; overscroll-behavior-y: none; }
html { background: #000; color-scheme: dark; }
body {
  background: #000;
  color: var(--bone);
  font-family: var(--mf-mono);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
::selection { background: var(--yellow); color: var(--ink); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

/* the grain over everything */
.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.9 0 0 0 0 0.89 0 0 0 0 0.86 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* the way back, top right, like every door's page */
.hall-link {
  position: fixed; top: 16px; right: 16px; z-index: 45;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(231, 228, 220, 0.18); border-radius: 999px;
  background: rgba(8, 8, 10, 0.6);
  color: var(--bone);
  font: 600 11px/1 var(--mf-mono); letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  backdrop-filter: blur(8px);
}
.hall-link:hover { color: var(--yellow); border-color: rgba(255, 230, 0, 0.4); }

/* ── the page ───────────────────────────────────────────────────────────── */
.home {
  position: relative;
  width: 100%;
  padding: 96px 0 120px;           /* the ticker sits under the bottom */
  overflow-x: clip;
}
.home > * { position: relative; z-index: 1; }
.mf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the arrivals: .fly → .in */
.fly { opacity: 0; transform: var(--fly, translateY(18px)); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.fly.in { opacity: 1; transform: none; }

/* the back wall: the screens' cold spill, the ticker's red under it all. nothing else is lit. */
.mf-glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 42% at 50% 40%, rgba(120, 150, 210, 0.13) 0%, rgba(120, 150, 210, 0) 70%),
    radial-gradient(70% 18% at 50% 100%, rgba(207, 30, 38, 0.22) 0%, rgba(207, 30, 38, 0) 100%);
  animation: mf-spill 9s ease-in-out infinite alternate;
}
@keyframes mf-spill { from { opacity: 0.75; } to { opacity: 1.1; } }

/* ── the head: THE TILES ────────────────────────────────────────────────── */
.mf-head { width: min(980px, 100%); margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; align-items: center; }
.mf-title {
  position: relative; z-index: 4;
  width: min(520px, 82%);
  aspect-ratio: 900 / 356;                            /* the tiles without the kit's byline (koma: "ts on footer"); the strip is cut the same */
  --fly: translateY(-26px);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.7));
}
.mf-title-drop { position: absolute; inset: 0; background: url('img/mf-tiles-strip.webp?v=4') no-repeat 0 0 / 100% 1200%; opacity: 0; }
.mf-title-hero { width: 100%; opacity: 0; }
.mf-title.in .mf-title-drop { opacity: 1; animation: mf-drop 0.95s steps(11, end) 0.1s both, mf-off 0.01s linear 1.25s forwards; }
.mf-title.in .mf-title-hero { animation: mf-appear 0.01s linear 1.25s forwards, mf-hang 7s ease-in-out 1.3s infinite; }
@keyframes mf-drop { from { background-position: 0 0; } to { background-position: 0 100%; } }
@keyframes mf-off { to { opacity: 0; } }
@keyframes mf-appear { to { opacity: 1; } }
@keyframes mf-hang { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-0.35deg); } }
.mf-tag {
  margin-top: 6px;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(231, 228, 220, 0.62);
  transition-delay: 1.3s;
}

/* ── THE WALL ───────────────────────────────────────────────────────────── */
.mf-wall {
  position: relative; z-index: 2;
  width: min(1060px, 100%);
  margin: 34px auto 0;
  padding: 0 2%;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  container-type: inline-size;                       /* the sets are sized in cqw of the wall: every row a shelf that fills it exactly */
  --fly: translateY(0);
}
.mf-wall::after {                                      /* the floor they stand on */
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -4%; height: 14%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(140, 160, 200, 0.16), rgba(140, 160, 200, 0) 72%);
  pointer-events: none;
}
.mf-tv {
  position: relative;
  width: calc(var(--h, 22) * var(--ar, 1.12) * 1cqw);  /* --h (cqw) is written by layout() in the page script: equal per row, so bottoms AND tops are flush */
  height: calc(var(--h, 22) * 1cqw);
  margin: 0 -0.4cqw -1cqw;                           /* bezels overlap a hair sideways; each row's feet sit a hair over the tops of the row below: no seam */
  transform: rotate(var(--r, 0deg));
  transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.75));
  container-type: inline-size;
  text-decoration: none; color: var(--bone);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.mf-tv--night { cursor: pointer; }
.mf-tv--ep { cursor: pointer; z-index: 2; }
.mf-tv--hero { z-index: 3; }
.mf-tv img { width: 100%; height: 100%; position: relative; z-index: 3; pointer-events: none; }
/* the hole in each set, as % of its cut (rooms/mudderfuckerz/build.py measured them), grown 1.6% so the picture sits under the bezel */
.mf-tv--beige { --hx: 4.3%; --hy: 8.1%;  --hw: 75.2%; --hh: 80%; }
.mf-tv--wood  { --hx: 7.5%; --hy: 8.9%;  --hw: 84.8%; --hh: 68.4%; }
.mf-tv--grey  { --hx: 7.9%; --hy: 11.1%; --hw: 84.2%; --hh: 73.6%; }
.mf-screen, .mf-glass, .mf-static, .mf-stamp, .mf-now, .mf-tag3 { position: absolute; }
.mf-screen, .mf-glass, .mf-static { left: var(--hx); top: var(--hy); width: var(--hw); height: var(--hh); border-radius: 6% / 8%; }

/* the picture: the night's 16 channels on the sprite; an episode set plays its own four frames */
.mf-screen {
  z-index: 1;
  background: #06070a url('img/mf-night.webp') no-repeat;
  background-size: 400% 400%;
  background-position: calc(var(--cx, 0) * 33.3333%) calc(var(--cy, 0) * 33.3333%);
  filter: saturate(1.15) contrast(1.08) brightness(0.92);
  opacity: 0;
}
.mf-screen--ep {
  background-image: var(--frames);
  background-size: 200% 200%;
  background-position: calc(var(--cx, 0) * 100%) calc(var(--cy, 0) * 100%);
}
/* the glass: scanlines, the bar that rolls, the vignette of a curved tube */
.mf-glass {
  z-index: 2; overflow: hidden;
  background:
    radial-gradient(90% 90% at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.55) 100%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.26) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
  opacity: 0;
}
.mf-glass::after {
  content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 22%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0) 100%);
  animation: mf-roll calc(var(--b, 12s) * 0.6) linear infinite;
}
@keyframes mf-roll { to { top: 110%; } }
/* the snow: a tiny noise tile jumping around */
.mf-static {
  z-index: 2;
  background: url('img/mf-noise.png') repeat 0 0 / 34px 26px;
  opacity: 0;
  animation: mf-snow 0.28s steps(4, end) infinite, mf-burst var(--b, 12s) steps(1, end) infinite;
  transition: opacity 0.12s linear;
}
@keyframes mf-snow { to { background-position: 34px 26px; } }
@keyframes mf-burst { 0%, 96.2% { opacity: 0; } 96.3%, 97.4% { opacity: 0.85; } 97.5%, 100% { opacity: 0; } }
@keyframes mf-flicker { 0%, 100% { opacity: 1; } 38% { opacity: 0.84; } 38.6% { opacity: 1; } 71% { opacity: 0.9; } 71.4% { opacity: 1.06; } 71.9% { opacity: 1; } }
/* the sets turn on one by one as the wall comes into view: a line, then the picture opens up */
.mf-wall.in .mf-screen { animation: mf-tvon 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s) both, mf-flicker var(--b, 12s) steps(1, end) calc(var(--d, 0s) + 0.6s) infinite; }
.mf-wall.in .mf-glass { animation: mf-appear 0.01s linear calc(var(--d, 0s) + 0.3s) forwards; }
@keyframes mf-tvon {
  0%   { opacity: 0; clip-path: inset(49.5% 0 49.5% 0); filter: saturate(1.15) brightness(4); }
  35%  { opacity: 1; clip-path: inset(49% 0 49% 0);     filter: saturate(1.15) brightness(3); }
  100% { opacity: 1; clip-path: inset(0 0 0 0);         filter: saturate(1.15) contrast(1.08) brightness(0.92); }
}
/* a tap, or a tune: snow */
.mf-wall.burst .mf-static, .mf-tv.zap .mf-static { opacity: 0.95; animation: mf-snow 0.2s steps(4, end) infinite; }
.mf-wall.burst .mf-screen { filter: brightness(1.4) contrast(1.3); }
.mf-tv:hover .mf-screen, .mf-tv.lit .mf-screen { filter: saturate(1.3) contrast(1.1) brightness(1.1); }
/* the missing episode: pure snow, and a piece of tape asking where it is. a dead channel of the night: the same snow, no tape */
.mf-tv--lost .mf-static, .mf-tv--snow .mf-static { opacity: 0.92; animation: mf-snow 0.24s steps(4, end) infinite; }
.mf-tv--lost .mf-screen, .mf-tv--snow .mf-screen { background-image: none; background-color: #2a2d33; }
.mf-tape {
  position: absolute; z-index: 4;
  left: 50%; top: 58%; transform: translateX(-50%) rotate(-5deg);
  padding: 0.6% 7%;
  background: rgba(239, 230, 210, 0.92);
  color: var(--mf-red);
  font-family: var(--mf-marker);
  font-size: clamp(11px, 8cqw, 22px); line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.mf-tap {
  position: absolute; right: 3%; top: -24px;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(231, 228, 220, 0.55);
  pointer-events: none; opacity: 0;
  transition: opacity 0.4s ease;
}
.mf-wall:hover .mf-tap { opacity: 1; }

/* ── an episode on its set ──────────────────────────────────────────────── */
/* the camcorder date stamp, top right of the glass */
.mf-stamp {
  z-index: 4;
  right: calc(100% - var(--hx) - var(--hw) + 4cqw); top: calc(var(--hy) + 3cqw);
  font-size: clamp(7px, 3.2cqw, 13px); font-weight: 500; letter-spacing: 0.1em;
  color: var(--mf-orange); text-shadow: 0 0 6px rgba(255, 138, 31, 0.55);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
/* NOW SHOWING, top left of the hero's glass */
.mf-now {
  z-index: 4;
  left: calc(var(--hx) + 4cqw); top: calc(var(--hy) + 3cqw);
  font-size: clamp(7px, 2.6cqw, 11px); font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  color: #fff;
  padding: 0.6cqw 1.6cqw 0.4cqw; background: var(--mf-red);
  animation: mf-now 2.4s steps(1, end) infinite;
  pointer-events: none;
}
@keyframes mf-now { 0%, 100% { opacity: 1; } 52% { opacity: 0.35; } 60% { opacity: 1; } }
/* the name tag: the show's lower third, on the glass */
.mf-tag3 {
  z-index: 4;
  left: calc(var(--hx) + 4cqw); bottom: calc(100% - var(--hy) - var(--hh) + 4cqw);
  max-width: calc(var(--hw) - 8cqw);
  display: flex; flex-direction: column; align-items: flex-start;
  pointer-events: none;
}
.mf-tag3 b {
  font-family: var(--mf-tv); font-weight: 900;
  font-size: clamp(11px, 7cqw, 30px); line-height: 0.95; letter-spacing: 0.02em;
  color: var(--mf-bone); background: #000;
  padding: 0.4cqw 1.6cqw 0.6cqw;
}
.mf-tag3 small {
  font-size: clamp(6px, 2.4cqw, 10px); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: #000; background: var(--mf-red);
  padding: 0.5cqw 1.6cqw 0.3cqw;
}
/* the slab, stuck crooked on the bottom of the set: EPISODE, the wrong number X'd, the right one in marker */
.mf-slab {
  position: absolute; z-index: 5;
  left: 50%; bottom: -2cqw;
  transform: translateX(-50%) rotate(-2.5deg);
  display: inline-flex; align-items: baseline; gap: 1.2cqw;
  padding: 0.5cqw 3cqw 0.8cqw;
  background: var(--mf-bone);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  pointer-events: none;
}
.mf-slab b { font-family: var(--mf-tv); font-weight: 900; font-size: clamp(10px, 6.4cqw, 28px); line-height: 1; letter-spacing: 0.02em; color: #0a0a0a; text-transform: uppercase; }
.mf-slab s {
  position: relative; text-decoration: none;
  font-family: var(--mf-tv); font-weight: 900; font-size: clamp(10px, 6.4cqw, 28px); line-height: 1; color: #0a0a0a;
}
.mf-slab s::before, .mf-slab s::after {              /* the red X */
  content: ""; position: absolute; left: -22%; right: -22%; top: 50%; height: 0.11em;
  background: var(--mf-red); transform: rotate(28deg);
}
.mf-slab s::after { transform: rotate(-28deg); }
.mf-slab em { font-family: var(--mf-marker); font-style: normal; font-size: clamp(12px, 8cqw, 36px); line-height: 0.8; color: var(--mf-red); transform: rotate(-6deg) translateY(0.04em); display: inline-block; }
/* the hero's slab is the big one; a smaller set wears a smaller slab */
.mf-tv--hero .mf-slab { bottom: -1.4cqw; }
/* watch it: on hover, over the glass */
.mf-watch {
  position: absolute; z-index: 6;
  left: calc(var(--hx) + var(--hw) / 2); top: calc(var(--hy) + var(--hh) / 2);
  transform: translate(-50%, -50%) scale(0.9);
  font-size: clamp(8px, 3cqw, 12px); font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--bone);
  padding: 1.6cqw 3cqw; border: 1px solid rgba(231, 228, 220, 0.6); background: rgba(0, 0, 0, 0.55);
  opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.mf-tv--ep:hover .mf-watch, .mf-tv--ep:focus-visible .mf-watch, .mf-tv--ep.lit .mf-watch { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mf-tv--ep:hover .mf-tag3, .mf-tv--ep.lit .mf-tag3 { opacity: 0.35; }

/* ── THE GUIDE: the run ─────────────────────────────────────────────────── */
.mf-guide {
  width: min(980px, 100%);
  margin: 72px auto 0;
  padding: 0 24px;
  --fly: translateY(18px);
}
.mf-guide-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(231, 228, 220, 0.14);
}
.mf-guide-label { font-size: 11px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(231, 228, 220, 0.62); margin-right: auto; }
.mf-count { color: var(--mf-red); }
/* the threat bar: five segments, filled with a beep each on a tap. maxed. */
.mf-threat { display: flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(231, 228, 220, 0.5); }
.mf-threat-bar { display: flex; gap: 3px; }
.mf-threat-bar i {
  width: 14px; height: 10px; display: block;
  background: rgba(231, 228, 220, 0.1); border: 1px solid rgba(231, 228, 220, 0.18);
  transform: skewX(-12deg);
  transition: background 0.08s linear, box-shadow 0.08s linear;
}
.mf-threat-bar i.on { background: var(--mf-red); border-color: var(--mf-red); box-shadow: 0 0 8px rgba(207, 30, 38, 0.7); }
.mf-threat-r { color: var(--mf-red); min-width: 4.5em; opacity: 0; }
.mf-guide.in .mf-threat-r { animation: mf-appear 0.01s linear 1.5s forwards; }
.mf-threat.maxed .mf-threat-r { opacity: 1; animation: mf-maxed 0.5s steps(1, end) 3; }
@keyframes mf-maxed { 50% { opacity: 0; } }
.mf-guide.in .mf-threat-bar i { animation: mf-fill 0.01s linear both; }
.mf-guide.in .mf-threat-bar i:nth-child(1) { animation-delay: 0.6s; }
.mf-guide.in .mf-threat-bar i:nth-child(2) { animation-delay: 0.8s; }
.mf-guide.in .mf-threat-bar i:nth-child(3) { animation-delay: 1.0s; }
.mf-guide.in .mf-threat-bar i:nth-child(4) { animation-delay: 1.2s; }
.mf-guide.in .mf-threat-bar i:nth-child(5) { animation-delay: 1.4s; }
@keyframes mf-fill { to { background: var(--mf-red); border-color: var(--mf-red); box-shadow: 0 0 8px rgba(207, 30, 38, 0.7); } }
.mf-threat-bar i.on { animation: none; }
/* the links: two channel buttons */
.mf-links { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 10px;
  border: 1px solid rgba(231, 228, 220, 0.22); border-radius: 3px;
  background: rgba(231, 228, 220, 0.04);
  color: var(--mf-bone); text-decoration: none;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.mf-link:nth-child(1) { transform: rotate(-1.2deg); }
.mf-link:nth-child(2) { transform: rotate(0.9deg) translateY(1px); }
.mf-link small { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: lowercase; color: rgba(231, 228, 220, 0.62); }
.mf-link svg { color: var(--mf-red); flex: none; }
.mf-link:hover { border-color: rgba(207, 30, 38, 0.7); background: rgba(207, 30, 38, 0.12); transform: rotate(0) translateY(-1px); }
.mf-link:hover small { color: rgba(231, 228, 220, 0.7); }
/* the rows: the TV guide. ep · name · runtime · the night · watch */
.mf-list { list-style: none; }
.mf-row {
  display: grid; grid-template-columns: 5em 1fr 4.5em 8em auto;
  align-items: baseline; gap: 0 22px;
  padding: 16px 0 14px;
  border-bottom: 1px solid rgba(231, 228, 220, 0.1);
  transition: background 0.2s ease;
}
.mf-row.lit, .mf-row:hover { background: linear-gradient(90deg, rgba(207, 30, 38, 0.08), rgba(207, 30, 38, 0)); }
.mf-row-n { font-size: 11px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--mf-red); }
.mf-row-t { font-family: var(--mf-tv); font-weight: 900; font-size: clamp(22px, 3vw, 30px); line-height: 1; letter-spacing: 0.02em; color: var(--mf-bone); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 14px; }
.mf-row-t i {
  font-family: var(--mf-mono); font-style: normal; font-weight: 500;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: #ff3b44; padding: 4px 7px 3px; border: 1px solid rgba(207, 30, 38, 0.55); border-radius: 2px;
  transform: rotate(-2deg) translateY(-4px);
  animation: mf-now 2.4s steps(1, end) infinite;
}
.mf-row-rt, .mf-row-d { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: rgba(231, 228, 220, 0.55); font-variant-numeric: tabular-nums; }
.mf-row-d { color: var(--mf-orange); opacity: 0.8; }
.mf-row-w { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone); text-decoration: none; justify-self: end; }
a.mf-row-w:hover { color: var(--yellow); }
/* the missing one */
.mf-row--lost .mf-row-t s { color: rgba(231, 228, 220, 0.1); text-decoration: none; letter-spacing: -0.08em; user-select: none; }
.mf-row--lost .mf-row-t em { font-family: var(--mf-marker); font-style: normal; font-size: 0.8em; color: var(--mf-red); transform: rotate(-3deg); display: inline-block; }
.mf-row--lost .mf-row-w { color: rgba(231, 228, 220, 0.55); text-transform: lowercase; letter-spacing: 0.1em; }

/* ── the credits ────────────────────────────────────────────────────────── */
.mf-credits {
  width: min(980px, 100%);
  margin: 86px auto 0;
  padding: 0 24px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  --fly: translateY(12px);
}
.mf-by {
  font-family: var(--mf-marker);
  font-size: clamp(30px, 5vw, 46px); line-height: 1;
  color: var(--mf-red);
  transform: rotate(-3deg);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}
.mf-mark { width: 48px; opacity: 0.8; }
.mf-back { margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(231, 228, 220, 0.5); text-decoration: none; }
.mf-back:hover { color: var(--yellow); }
.mf-privacy { margin-top: 4px; font-size: 11px; letter-spacing: .2em; color: rgba(231, 228, 220, .55); padding: 6px 0; }   /* quiet (Meta's terms want it linked) */

/* ── the viewfinder: the page is seen through the camcorder ─────────────── */
.mf-vf { position: fixed; inset: 22px 22px 56px; z-index: 40; pointer-events: none; }
.mf-vf-c { position: absolute; width: 26px; height: 26px; border: 2px solid rgba(231, 228, 220, 0.55); }
.mf-vf-c--tl { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.mf-vf-c--tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.mf-vf-c--bl { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.mf-vf-c--br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.mf-vf-rec {
  position: absolute; left: 14px; top: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  color: rgba(231, 228, 220, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.mf-vf-rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff2a2a; box-shadow: 0 0 8px #ff2a2a; animation: mf-rec 1.2s steps(1, end) infinite; }
@keyframes mf-rec { 50% { opacity: 0.15; } }
.mf-vf-tc { font-weight: 500; letter-spacing: 0.06em; color: rgba(231, 228, 220, 0.75); font-variant-numeric: tabular-nums; }
.mf-vf-date {
  position: absolute; right: 12px; bottom: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
  color: var(--mf-orange); text-shadow: 0 0 6px rgba(255, 138, 31, 0.55);
  font-variant-numeric: tabular-nums;
}

/* ── the red ticker along the bottom, never off ─────────────────────────── */
.mf-ticker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 42;
  height: 36px; display: flex; align-items: stretch;
  background: var(--mf-red); color: #fff;
  font-family: var(--mf-tv); font-weight: 900; font-size: 19px; letter-spacing: 0.05em; line-height: 36px;
  overflow: hidden;
  box-shadow: 0 -10px 30px rgba(207, 30, 38, 0.25);
}
.mf-ticker-tag {
  flex: none; padding: 0 14px 0 16px;
  background: #fff; color: var(--mf-red);
  font-family: var(--mf-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  display: flex; align-items: center;
  position: relative; z-index: 1;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.mf-ticker-run { flex: 1; display: flex; white-space: nowrap; overflow: hidden; }
.mf-ticker-run p { flex: none; padding-left: 20px; animation: mf-ticker 40s linear infinite; }
@keyframes mf-ticker { to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
  .mf-static, .mf-glass::after, .mf-ticker-run p, .mf-title-hero, .mf-glow, .mf-screen { animation-play-state: paused; }
  .mf-tv--lost .mf-static, .mf-tv--snow .mf-static { opacity: 0.5; }
  .fly { transition: none; }
}

/* ── phone: the hero and a flank on the first row, three across under it ── */
@media (max-width: 700px) {
  .home { padding: 84px 0 110px; }
  .hall-link { top: 12px; right: 12px; padding: 8px 12px; font-size: 10px; }
  .mf-title { width: 94%; }
  .mf-wall { margin-top: 26px; padding: 0 1%; }
  .mf-tap { top: auto; right: auto; left: 3%; bottom: -20px; }
  .mf-guide { margin-top: 56px; padding: 0 16px; }
  .mf-row { grid-template-columns: 4em 1fr auto; grid-template-rows: auto auto; gap: 4px 14px; padding: 14px 0 12px; }
  .mf-row-n { grid-row: 1; }
  .mf-row-t { grid-column: 2 / 4; font-size: 22px; }
  .mf-row-rt { grid-column: 2; grid-row: 2; }
  .mf-row-d { grid-column: 2; grid-row: 2; margin-left: 5em; }
  .mf-row-w { grid-column: 3; grid-row: 2; }
  .mf-credits { margin-top: 64px; }
  .mf-vf { inset: 16px 14px 50px; }
  .mf-vf-c { width: 20px; height: 20px; }
  .mf-vf-rec { left: 10px; top: 10px; font-size: 10px; }
  .mf-vf-date { display: none; }                      /* the hero set carries the night on a phone */
  .mf-tag { font-size: 10px; letter-spacing: 0.22em; text-align: center; }
  .mf-ticker { height: 32px; line-height: 32px; font-size: 17px; }
  .mf-ticker-run p { animation-duration: 30s; }
}

/* ── the intro: the set powers on (black, a line of light across the middle, the picture opens out of it). Every visit plays it; door 01
   in the hall hands off on black, so through the door it is one cut. ── */
.poweron { position: fixed; inset: 0; z-index: 9000; background: #000; pointer-events: none; animation: po-open .55s cubic-bezier(.6, 0, .2, 1) .45s forwards; }
.poweron i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #f3f0e8;
  box-shadow: 0 0 22px 5px rgba(190, 215, 255, .7); transform: scaleX(0); animation: po-line .45s cubic-bezier(.2, .8, .2, 1) .05s forwards, po-fade .5s ease-out .6s forwards; }
@keyframes po-line { to { transform: scaleX(1); } }
@keyframes po-fade { to { opacity: 0; } }
@keyframes po-open { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(50% 0 50% 0); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .poweron { display: none; } }