/* The Lead Engine page, round 7 (11 Nov 2026): playful, after yeahright.co. An espresso page inside a butter frame; Hubot Sans
   at its narrowest and heaviest for the shouting, Martian Mono for the [asides]; vermilion is the outline and the one fill.
   The Studio keeps its own light casing (studio.css) and is not restyled inside. */
/* the shouting face: Archivo at its narrowest and heaviest, cut to one static instance with the overlaps removed, so the
   outlined lines draw clean (the variable files show their inner contours under a stroke). OFL, fonts/licenses/OFL-archivo.txt */
@font-face { font-family: "MB Shout"; src: url("fonts/ArchivoCompressedBlack.woff2") format("woff2"); font-weight: 900; font-display: block; }
:root { --shout: "MB Shout", Impact, "Arial Narrow", sans-serif; --esp: #1E1814; --esp-2: #2A231E; --cream: #F5EEDC; --cream-2: rgba(245, 238, 220, .62); --cream-3: rgba(245, 238, 220, .16); --ver: #E0553C; --fr: 10px; }
@media (max-width: 760px) { :root { --fr: 6px; } }
html, body { background: var(--esp); }
body { color: var(--cream); }
::selection { background: var(--ver); color: var(--esp); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the butter frame round the page, with soft inner corners (fixed, never in the way of a click) */
.frame { position: fixed; inset: var(--fr); z-index: 60; pointer-events: none; border-radius: 14px; box-shadow: 0 0 0 calc(var(--fr) + 4px) var(--cream); }
main { padding: 0 calc(var(--pad) + var(--fr)); }

/* the shouting */
.yell { font: 900 clamp(48px, 9.4vw, 220px)/.84 var(--shout); text-transform: uppercase; letter-spacing: -.004em; color: var(--cream); }
.yell .ln { display: block; white-space: nowrap; }
.yell__o, .yell .ch.x { color: transparent; -webkit-text-stroke: max(1px, .011em) var(--ver); }
.yell__o .ch.x { color: var(--cream); -webkit-text-stroke: 0; }
.yell .ch { display: inline-block; transition: color .12s, -webkit-text-stroke-color .12s; }
.yell--red { color: var(--ver); }
.aside { font-size: clamp(13px, 1.35vw, 22px); text-transform: uppercase; letter-spacing: .02em; color: var(--cream); margin-top: .9em; }
.tag { color: var(--ver); text-transform: uppercase; margin-bottom: 18px; }
.mono { letter-spacing: .02em; }
.blink { font-style: normal; font-family: var(--mono); font-size: 13px; margin-left: 4px; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* the bar: same height as before (the Studio's panels stick under it at 64px) */
.bar { background: var(--esp); border-bottom: 0; padding: 14px calc(var(--pad) + var(--fr)); margin-top: var(--fr); top: var(--fr); color: var(--cream); }
.bar__mark { display: inline-flex; align-items: baseline; text-decoration: none; }
.bar__mark img { height: 19px; }
.bar__unit { gap: 10px; font-size: 11px; font-weight: 450; text-transform: uppercase; color: var(--cream-2); }
.bar__unit .mono, .bar__unit span { color: inherit; min-width: 0; }
.bar__sl { opacity: .5; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ver); animation: blink 2s steps(1) infinite; }
.bar__acts { justify-self: end; display: flex; align-items: center; gap: 8px; }
/* the sound switch (round 13, Qasim's phone: "SOUND OFF" wrapped and the button changed size): a speaker that shows its
   waves when on and a cross when off; the words beside it from tablets up, at a fixed width, so a toggle never moves anything */
.snd { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.snd__s { fill: currentColor; stroke: none; }
.snd__x { display: none; }
[aria-pressed="false"] > .snd { opacity: .7; }
[aria-pressed="false"] > .snd .snd__w { display: none; }
[aria-pressed="false"] > .snd .snd__x { display: inline; }
.snd__t { display: inline-block; min-width: 9ch; text-align: left; white-space: nowrap; }
.bar__snd { -webkit-appearance: none; appearance: none; background: none; font-family: var(--mono); cursor: pointer; font-size: 11.5px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--cream-3); color: var(--cream); white-space: nowrap; transition: border-color .15s; }
.bar__snd b { font-weight: inherit; color: var(--ver); }
.bar__snd[aria-pressed="false"] b { color: var(--cream-2); }
@media (hover: hover) and (pointer: fine) { .bar__snd:hover { border-color: var(--cream-2); } }
.bar__go { justify-self: end; display: inline-flex; align-items: center; gap: .6em; height: 34px; white-space: nowrap; font-size: 11.5px; text-transform: uppercase; text-decoration: none; padding: 0 12px; border: 1px solid var(--ver); color: var(--cream); transition: background-color .15s, color .15s; }
.bar__go:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .bar__go:hover { background: var(--ver); color: var(--esp); } }

/* ---------- the loader ---------- */
.no-intro .intro { display: none; }
.intro { position: fixed; inset: 0; z-index: 80; background: var(--esp); color: var(--cream); display: grid; place-items: center; cursor: pointer;
  animation: intro-safety 0s 5s forwards; }   /* shown from the first paint; play.js removes it at once when it is not wanted */
@keyframes intro-safety { to { visibility: hidden; } }
.intro { background: none; }
.intro__door { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; background: var(--esp); will-change: transform; }
.intro__door--l { left: 0; box-shadow: inset -1px 0 0 rgba(245, 238, 220, .08); }
.intro__door--r { right: 0; box-shadow: inset 1px 0 0 rgba(245, 238, 220, .08); }
/* the face spans the screen inside each door; each door shows its own half */
.intro__face { position: absolute; top: 0; bottom: 0; width: 100vw; display: grid; place-items: center; }
.intro__door--r .intro__face { right: 0; }
.intro__in { display: grid; justify-items: center; gap: clamp(10px, 2vh, 18px); width: min(640px, 84vw); }
.intro__lamp { font-size: clamp(16px, 2vw, 22px); line-height: 1; }
.intro__lamp i { font-style: normal; color: var(--cream-3); transition: color .2s, text-shadow .2s; }
.intro__lamp i.on { color: var(--ver); }
.intro__dial { width: 100%; height: auto; overflow: visible; }
.intro__arc { fill: none; stroke: var(--cream-3); stroke-width: 1.5; }
.intro__dial line { stroke: var(--cream-2); stroke-width: 2; stroke-linecap: round; }
.intro__dial .intro__tick { stroke: var(--cream-3); stroke-width: 1.5; }
.intro__dial text { font: 900 34px var(--shout); fill: transparent; stroke: var(--cream-2); stroke-width: .8; transition: fill .15s, stroke .15s; }
.intro__dial [data-floor-at].on text { fill: var(--cream); stroke: transparent; }
.intro__dial [data-floor-at].on line { stroke: var(--ver); }
.intro__dial [data-floor-at="0"].on text { fill: var(--ver); }
.intro__needle { stroke: var(--ver) !important; stroke-width: 3 !important; }
.intro__hub { fill: var(--ver); }
.intro__l { text-transform: uppercase; white-space: nowrap; color: var(--cream-2); }
.intro__l i { font-style: normal; color: var(--ver); margin-right: 6px; }
.intro__ft { position: absolute; z-index: 1; left: calc(var(--pad) + var(--fr)); right: calc(var(--pad) + var(--fr)); bottom: calc(18px + var(--fr)); display: flex; justify-content: space-between; align-items: center; gap: 16px; text-transform: uppercase; color: var(--cream-2); transition: opacity .2s; }
.is-intro { overflow: hidden; }

/* ---------- 1. the hello ---------- */
.hero { padding-top: clamp(24px, 6vh, 72px); }
.yell--hero { font-size: 7vw; line-height: .86; }   /* play.js fits each line to the width */
.yell--hero .ln { width: max-content; }
.hero__aside { text-align: right; padding-right: 4%; }
.spec { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; margin-top: clamp(48px, 10vh, 120px); }
.spec__dl { display: grid; grid-template-columns: 9ch minmax(0, 1fr); gap: 10px 20px; font-size: 12.5px; text-transform: uppercase; }
.spec__dl dt { color: var(--cream-2); }
.spec__dl .spec__hd { grid-column: 1 / -1; color: var(--ver); margin-bottom: 8px; }
.spec__dl dd:empty { display: none; }
.badge { position: relative; overflow: clip; border-radius: 50%; width: clamp(150px, 17vw, 240px); aspect-ratio: 1; margin-right: 4%; }
.badge svg { width: 100%; height: 100%; animation: spin 18s linear infinite; }
.badge text { fill: var(--cream); font: 500 13.4px var(--mono); letter-spacing: .06em; }
/* the B in 3D (round 9; round 10, Qasim: "rotates itself … nice silver 3D"): sixteen copies of our own B, stacked 14 px deep,
   turning on its own; brushed silver faces with a light that crosses as it turns, steel edges */
.b3d { position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%); perspective: 420px; }
.b3d__in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateZ(-8deg); }
.b3d__in i { position: absolute; inset: 0; -webkit-mask: url(/assets/brand/B-butter-transparent.svg) center / contain no-repeat; mask: url(/assets/brand/B-butter-transparent.svg) center / contain no-repeat; }
.b3d__f, .b3d__b { backface-visibility: hidden; -webkit-backface-visibility: hidden; background: linear-gradient(115deg, #8E959F 0%, #C9CED6 24%, #F4F6F8 42%, #FFFFFF 50%, #DADEE4 60%, #A3A9B2 78%, #7C838D 100%) 50% 50% / 280% 100%; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 2. the point ---------- */
.say { position: relative; margin-top: clamp(110px, 18vh, 220px); }
.say .yell { font-size: clamp(64px, 13.2vw, 270px); }
.say__aside { padding-left: 2px; }
.note { position: absolute; right: 3%; bottom: -150px; width: min(320px, 42vw); margin: 0; padding: 16px 18px 18px; background: var(--cream); color: var(--esp); border: 1.5px solid var(--ver); border-radius: 10px; transform: rotate(4deg); }
.note__hd { display: flex; justify-content: space-between; color: #7A6F63; text-transform: uppercase; margin-bottom: 12px; }
.note__t { font-weight: 720; font-size: 18px; letter-spacing: -.01em; line-height: 1.15; }
.note__s { color: #6A5F55; font-size: 14px; margin-top: 3px; }
.note__st { display: grid; gap: 6px; margin: 14px 0; text-transform: uppercase; color: #9A8F82; }
.note__st li { display: flex; align-items: center; gap: 8px; }
.note__st li::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; }
.note__st li.on { color: var(--esp); }
.note__st li.on::before { background: var(--ver); border-color: var(--ver); }
.note__b { display: inline-block; padding: 9px 12px; background: var(--esp); color: var(--cream); text-transform: uppercase; }

/* ---------- 3. the four floors ---------- */
.floors { margin-top: clamp(100px, 16vh, 200px); }
.floors__in { position: relative; min-height: calc(100svh - 52px - var(--fr) * 2); display: grid; grid-template-rows: auto 1fr auto; padding: 28px 0 22px; }
.floors__t, .floors__ft { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-transform: uppercase; color: var(--cream-2); }
.floors__t i { font-style: normal; color: var(--ver); margin-right: 6px; }
.floors__t b { font-weight: 450; color: var(--cream); }
.floors__stage { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 64px); }
.floors__num { position: relative; font: 900 clamp(150px, 30vw, 520px)/.8 var(--shout); }
.floors__o { color: transparent; -webkit-text-stroke: 1px var(--ver); }
.floors__f { position: absolute; inset: 0; color: var(--ver); clip-path: inset(100% 0 0 0); }
.floors__w { position: relative; display: grid; }
.floors__w li { grid-area: 1 / 1; overflow: clip; }
.floors__w b { display: block; font: 900 clamp(72px, 14vw, 280px)/.84 var(--shout); text-transform: uppercase; }
.floors__w span { display: block; margin-top: .9em; font-size: clamp(12px, 1.2vw, 19px); text-transform: uppercase; color: var(--cream); }
.floors__bar { flex: 0 1 140px; height: 2px; background: var(--cream-3); }
.floors__bar i { display: block; height: 100%; background: var(--ver); transform-origin: 0 50%; transform: scaleX(0); }
/* without the pin (phones, still motion): the four floors simply stack, each with its number */
.floors--stack .floors__in { min-height: 0; display: block; }
.floors--stack .floors__t, .floors--stack .floors__ft, .floors--stack .floors__num { display: none; }
.floors--stack .floors__stage { display: block; }
.floors--stack .floors__w { gap: 34px; counter-reset: fl; }
.floors--stack .floors__w li { grid-area: auto; counter-increment: fl; }
.floors--stack .floors__w li::before { content: "0" counter(fl) " /"; display: block; margin-bottom: 8px; font: 450 11px var(--mono); color: var(--ver); }
.floors--stack .floors__w b { font-size: clamp(56px, 17vw, 140px); }

/* ---------- 4. the channels ---------- */
.tv { margin-top: clamp(110px, 18vh, 220px); }
.tv__hd .yell { font-size: clamp(56px, 11vw, 220px); }
.tv__set { position: relative; width: min(960px, 100%); margin: clamp(48px, 9vh, 96px) auto 0; }
.tv__name { position: absolute; z-index: 3; left: 0; top: -.42em; font: 900 clamp(48px, 8vw, 120px)/.84 var(--shout); text-transform: uppercase; color: var(--cream); pointer-events: none; }
.tv__box { padding: 8px; border: 1.5px solid var(--ver); border-radius: 14px; }
.tv__scr { --tvr: 26px / 34px; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--tvr); background: #000; isolation: isolate;
  clip-path: inset(0 round var(--tvr)); }   /* Safari lets a moving picture escape rounded corners; the clip holds it (round 13, Qasim's phone) */
.tv__scr img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.05); animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { to { transform: scale(1.06) translateY(-1.5%); } }
/* the tube: scanlines, a darker rim, and the slight colour split of an old set */
.tv__scr::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.tv__scr::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 70px 10px rgba(0, 0, 0, .55); }
.tv__ch { position: absolute; z-index: 3; right: 22px; top: 18px; font-size: clamp(14px, 1.8vw, 24px); color: var(--ver); text-shadow: 1.5px 0 rgba(80, 160, 255, .55), -1.5px 0 rgba(255, 60, 60, .5); }
.tv__snow { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; pointer-events: none; }
.tv.is-zap .tv__snow { opacity: 1; }
.tv.is-zap .tv__scr img { opacity: 0; }
.tv__ctl { display: flex; justify-content: space-between; align-items: start; gap: 18px 32px; flex-wrap: wrap; margin-top: 16px; }
.tv__keys { display: flex; gap: 6px; }
.tv__k { min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--cream-3); background: transparent; color: var(--cream); font: 450 12px var(--mono); transition: background-color .12s, border-color .12s; }
.tv__k[aria-pressed="true"] { background: var(--ver); border-color: var(--ver); color: var(--esp); }
.tv__k:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .tv__k:hover { border-color: var(--ver); } }
.tv__cap { flex: 1 1 300px; text-align: right; }
.tv__cap > p:first-child { font: 450 13px/1.5 var(--mono); }
.tv__cap b { color: var(--ver); font-weight: 450; text-transform: uppercase; margin-right: 6px; }
.tv__acts { display: flex; justify-content: flex-end; gap: 20px; margin-top: 10px; font-size: 12px; text-transform: uppercase; }
.tv__acts a, .tv__acts button { color: var(--ver); text-decoration: none; background: none; border: 0; padding: 4px 0; font: inherit; letter-spacing: inherit; text-transform: inherit; }
@media (hover: hover) and (pointer: fine) { .tv__acts a:hover, .tv__acts button:hover { color: var(--cream); } }

/* ---------- 5. the Studio, in its light casing ---------- */
.studio { margin-top: clamp(110px, 18vh, 220px); padding: clamp(24px, 3.4vw, 48px) var(--pad) clamp(28px, 4vw, 56px); background: var(--alu); color: var(--ink); border-radius: 18px; }
.studio .tag { color: #B53A24; grid-column: 1 / -1; margin-bottom: 0; }
.studio__hd { align-items: end; }
.yell--dark { color: var(--ink); font-size: clamp(56px, 9.6vw, 180px); }
.yell--dark .yell__o { -webkit-text-stroke-color: #C9432D; }

/* ---------- 6. the one line ---------- */
.ship { margin-top: clamp(110px, 18vh, 220px); align-items: end; }
.ship .yell { font-size: clamp(52px, 8.4vw, 160px); }
.ship__p { color: var(--cream-2); }
.plate { border: 1.5px solid var(--ver); box-shadow: none; border-radius: 12px; }

/* ---------- the close ---------- */
.end { margin-top: clamp(120px, 20vh, 240px); }
.end__top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.end .yell { font-size: clamp(60px, 10.4vw, 200px); }
.end__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 8px; font-size: 12px; text-transform: uppercase; }
.end__cols a { display: block; color: var(--cream); text-decoration: none; padding: 5px 0; }
.end__h { color: var(--ver); margin-bottom: 10px; }
.end__box { display: inline-block !important; padding: 14px 16px !important; border: 1px solid var(--ver); }
@media (hover: hover) and (pointer: fine) { .end__cols a:hover { color: var(--ver); } .end__box:hover { background: var(--ver); color: var(--esp) !important; } }
.cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: clamp(48px, 9vh, 110px); }
.cta a { position: relative; display: flex; align-items: center; min-height: 66px; padding: 0 22px; border: 1.5px solid var(--ver); color: var(--cream); text-decoration: none; text-transform: uppercase; font-size: 12.5px; isolation: isolate; }
.cta__go { justify-content: space-between; gap: 16px; }
.cta__go span:first-child { color: var(--ver); transition: color .3s; }
.cta a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ver); transform-origin: 0 50%; transform: scaleX(0); transition: transform .45s var(--io); }
.cta__side { justify-content: center; min-width: 96px; }
@media (hover: hover) and (pointer: fine) {
  .cta a:hover::before { transform: none; }
  .cta a:hover, .cta a:hover span:first-child { color: var(--esp); }
}
.cta a:active { transform: scale(.99); }

/* ---------- the foot ---------- */
.ft { display: block; padding: 0 calc(var(--pad) + var(--fr)); margin-top: clamp(28px, 5vh, 56px); border: 0; color: var(--cream-2); }
.ft__row { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid var(--cream-3); text-transform: uppercase; font-size: 10.5px; }
.ft__row a { color: var(--cream); text-decoration: none; }
.word { display: flex; width: max-content; align-items: baseline; overflow: clip; margin-top: 8px; padding: .04em 0 calc(var(--fr) + 1.6vw); font: 900 15vw/.8 var(--shout); color: var(--cream); white-space: nowrap; }
.word span { display: inline-block; }
.word .ch { transition: color .12s; }
.word .ch.x { color: transparent; -webkit-text-stroke: max(1.5px, .006em) var(--ver); }
.word__dot { margin-right: .06em; }
/* the cursor block: exactly the capitals' height (Archivo's cap height is .686em), sitting on the same baseline */
.word__blk { display: inline-block; width: .4em; height: .686em; margin-left: .07em; background: var(--ver); animation: blink 1.05s steps(1) infinite; }

/* ---------- the cursor (fine pointers only): a grey disc with a dark centre that trails the pointer; a vermilion ring
   over anything to press; the system's own cursor in text fields and over the framed form (a frame from another host
   cannot be drawn over) ---------- */
html.has-cur, html.has-cur * { cursor: none; }
html.has-cur input[type="text"], html.has-cur input[type="email"], html.has-cur textarea, html.has-cur iframe, html.has-cur [contenteditable] { cursor: auto; }
.cur { position: fixed; left: 0; top: 0; z-index: 90; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none;
  display: grid; place-items: center; background: rgba(168, 158, 148, .78); opacity: 0;
  transition: width .22s var(--out), height .22s var(--out), margin .22s var(--out), background-color .2s, box-shadow .2s, opacity .15s, scale .12s; }
.cur::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--esp); transition: background-color .2s; }
.cur.is-on { opacity: 1; }
.cur.is-link { width: 48px; height: 48px; margin: -24px 0 0 -24px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ver); }
.cur.is-link::after { background: var(--ver); }
.cur.is-big { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(224, 85, 60, .16); box-shadow: inset 0 0 0 1.5px var(--ver); }
.cur.is-big::after { background: var(--ver); }
.cur.is-down { scale: .78; }

/* ---------- narrower ---------- */
@media (min-width: 1180px) { .tv__name { left: -4%; } }
@media (max-width: 1100px) {
  .note { position: relative; right: auto; top: auto; margin: 36px 0 0 auto; width: min(320px, 86%); }
}
@media (max-width: 900px) {
  .end__top { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .bar { grid-template-columns: auto 1fr; }
  .bar__unit { display: none; }
  .hero__aside { text-align: left; padding: 0; }
  .spec { grid-template-columns: 1fr; }
  .badge { margin: 0 auto; }
  .spec__dl { grid-template-columns: 7ch minmax(0, 1fr); font-size: 11.5px; gap: 8px 14px; }
  .yell--hero { font-size: clamp(56px, 19vw, 120px) !important; }
  .yell--hero .ln { width: auto; }
  .say, .floors, .tv, .studio, .ship, .end { margin-top: 56px; }
  .badge { width: 132px; margin-top: 8px; }
  .studio__hd { gap: 14px; }
  .studio .modes { margin-top: 22px; }
  .spec { margin-top: 40px; }
  .say .yell, .tv__hd .yell, .ship .yell, .end .yell, .yell--dark { font-size: clamp(40px, 13vw, 96px); }
  .yell .ln { white-space: normal; }
  .tv__box { padding: 5px; border-radius: 10px; }
  .tv__scr { --tvr: 16px / 22px; }
  .bar__snd { width: 34px; padding: 0; justify-content: center; }
  .bar__snd .snd__t { display: none; }
  .tv__ctl { flex-direction: column; align-items: stretch; }
  .tv__keys { justify-content: space-between; }
  .tv__k { flex: 1; min-width: 0; height: 44px; }
  .tv__cap { text-align: left; flex: none; }
  .tv__acts { justify-content: flex-start; }
  .studio { margin-left: calc(var(--pad) * -1 + 4px); margin-right: calc(var(--pad) * -1 + 4px); border-radius: 12px; }
  .cta { grid-template-columns: 1fr; }
  .cta__go { flex-direction: column; align-items: flex-start !important; justify-content: center !important; gap: 6px !important; padding: 16px 18px !important; }
  .ft__row { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .badge svg, .tv__scr img, .blink, .dot, .word__blk { animation: none; }
}

/* the lobby (12 Nov 2026; round 11, Qasim: "a real elevator"): a lift in the hall, its doors shut, the floor lamp above, the call
   panel beside it. Press a business: the button lights, the lamp lights, it pings, the doors open, and the page moves in through
   the doorway (play.js) into the light of the car, which is where the lift page begins */
.lobby { margin-top: clamp(110px, 18vh, 220px); }
.lobby__hd .yell { font-size: clamp(56px, 11vw, 220px); }
.hall { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: clamp(28px, 5vw, 80px);
  margin-top: clamp(28px, 5vh, 56px); padding: clamp(28px, 5vh, 56px) clamp(20px, 4vw, 56px); border-radius: 14px; background: var(--esp-2); }
.hall__portal { display: grid; justify-items: center; gap: 14px; }
.hall__ind { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 6px; background: #15110E; box-shadow: inset 0 0 0 1px var(--cream-3); }
.hall__dir { font-size: 13px; color: var(--cream-3); transition: color .2s; }
.hall__ind b { min-width: 2ch; text-align: center; font: 900 30px/1 var(--shout); color: var(--cream-2); transition: color .2s; }
.hall.is-called .hall__dir, .hall.is-called .hall__ind b { color: var(--ver); }
.hall__frame { position: relative; width: min(100%, 340px, 40vh); aspect-ratio: 3 / 4.3; overflow: hidden; border-radius: 3px;
  box-shadow: 0 0 0 10px #15110E, 0 0 0 11px var(--cream-3); }
/* inside the car: its own light from the ceiling; the lift page begins in this light */
.hall__in, .lobby__glow { background: radial-gradient(130% 75% at 50% 0%, rgba(245, 238, 220, .2), rgba(245, 238, 220, 0) 62%), var(--esp); }
.hall__in { position: absolute; inset: 0; }
.hall__door { position: absolute; top: 0; bottom: 0; width: 50%; transition: transform .8s cubic-bezier(.65, 0, .35, 1);
  background: repeating-linear-gradient(90deg, rgba(245, 238, 220, .025) 0 1px, transparent 1px 4px), linear-gradient(90deg, #2E2621, #3B322C 50%, #2E2621); }
.hall__door--l { left: 0; box-shadow: inset -1px 0 0 #120E0B; }
.hall__door--r { right: 0; box-shadow: inset 1px 0 0 #120E0B; }
.hall.no-tr .hall__door { transition: none; }
.hall.is-open .hall__door--l { transform: translateX(-100%); }
.hall.is-open .hall__door--r { transform: translateX(100%); }
.hall__panel { display: grid; gap: clamp(10px, 2vh, 18px); }
.hall__ph { text-transform: uppercase; color: var(--cream-2); margin-bottom: 4px; }
.hall__b { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(14px, 1.6vw, 22px); text-decoration: none; color: var(--cream); }
.hall__btn { position: relative; width: clamp(40px, 3.6vw, 54px); aspect-ratio: 1; border-radius: 50%; background: #15110E; box-shadow: inset 0 0 0 1px var(--cream-3), 0 0 0 4px #1B1612;
  transition: box-shadow .15s, background-color .15s; }
.hall__btn::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--cream-2); transition: background-color .15s, box-shadow .15s; }
.hall__b b { display: block; font: 900 clamp(30px, min(3.8vw, 7vh), 70px)/.9 var(--shout); text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: max(1px, .012em) var(--ver);
  transition: color .15s, -webkit-text-stroke-color .15s; }
.hall__b small { display: block; margin-top: 6px; color: var(--cream-2); text-transform: uppercase; }
.hall__b:focus-visible { outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  .hall:not(.is-called) .hall__b:hover .hall__btn { box-shadow: inset 0 0 0 1px var(--ver), 0 0 0 4px #1B1612; }
  .hall:not(.is-called) .hall__b:hover b { color: var(--cream); -webkit-text-stroke-color: transparent; }
}
.hall__b:active .hall__btn { transform: scale(.94); }
/* the pressed button lights; the others step back */
.hall__b.is-lit .hall__btn { background: var(--ver); box-shadow: inset 0 0 0 1px var(--ver), 0 0 0 4px #1B1612; }
.hall__b.is-lit .hall__btn::after { box-shadow: inset 0 0 0 1.5px var(--esp); }
.hall__b.is-lit b { color: var(--cream); -webkit-text-stroke-color: transparent; }
.hall.is-called .hall__b:not(.is-lit) { opacity: .35; transition: opacity .3s; }
/* the move in: main is scaled toward the doorway (play.js); the bar steps away; the light covers the last frame */
main.is-zooming { transition: transform 1.05s cubic-bezier(.6, 0, .3, 1); will-change: transform; }
html:not(.is-zoomed) main.is-zooming { transition-timing-function: cubic-bezier(.2, .7, .2, 1); }
.bar { transition: opacity .4s; }
.is-zoomed .bar { opacity: 0; transition-duration: .25s; }
.lobby__glow { position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: 0; transition: opacity .3s; }
.lobby__glow.is-on { opacity: 1; }
/* the lift car (round 13, Qasim: "the way it pops in doesn't make sense … something nice should happen"): the car's doors
   close in front of you, the lamp counts the floors, it pings, and they open on the studio; Step off rides down the same way */
.car { position: fixed; inset: 0; z-index: 56; pointer-events: none; visibility: hidden; }
.car.is-on { visibility: visible; }
.car__d { position: absolute; top: 0; bottom: 0; width: 50.5%; transition: transform .75s cubic-bezier(.65, 0, .35, 1);
  background: repeating-linear-gradient(90deg, rgba(245, 238, 220, .025) 0 1px, transparent 1px 4px), linear-gradient(90deg, #2E2621, #3B322C 50%, #2E2621); }
.car__d--l { left: 0; transform: translateX(-101%); box-shadow: inset -1px 0 0 #120E0B; }
.car__d--r { right: 0; transform: translateX(101%); box-shadow: inset 1px 0 0 #120E0B; }
.car.is-shut .car__d { transform: none; }
.car__ind { position: absolute; z-index: 1; top: 16vh; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 16px; padding: 12px 22px;
  border-radius: 8px; background: #15110E; box-shadow: inset 0 0 0 1px rgba(245, 238, 220, .16); opacity: 0; transition: opacity .3s; }
.car.is-shut .car__ind { opacity: 1; transition-delay: .35s; }
.car__dir { font-size: 15px; color: #E0553C; }
.car__ind b { min-width: 2ch; text-align: center; font: 900 clamp(44px, 7vw, 72px)/1 "MB Shout", Impact, sans-serif; color: #E0553C; font-variant-numeric: tabular-nums; }
.is-back .car { visibility: visible; }
.is-back .car__d { transform: none; transition: none; }
.is-back .car__ind { opacity: 1; transition: none; }
@media (max-width: 760px) {
  .hall { grid-template-columns: 1fr; gap: 28px; padding: 26px 18px 28px; }
  .hall__frame { width: min(62vw, 240px); }
  .hall__b b { font-size: clamp(22px, 7.6vw, 44px); }
  .hall__btn { width: 38px; }
}
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: .28s; }
@media (prefers-reduced-motion: reduce) { .hall__door, .hall__b b, main.is-zooming { transition: none; } }