/* THE THEATRE, pass three (theatre branch, 2026-09-21 later; pass two below it). OLED black, chrome, the artwork does the colour: the landing's blurred
   still of each world washes the room behind everything (the reel and the scroll choose it). Sits on styles.css: fonts, the bar, .wrap,
   .eyebrow, .uib, .g3, the footer, the viewer, the loader host, Humo's launcher and stage. Motion is transform and opacity; the only
   filters sit on static layers (the room wash, the floor reflection, the book glows, the reel falloff on cels that are not moving). */

.theatre-page{--mono:ui-monospace,SFMono-Regular,Menlo,monospace;--title:"Aime MX",var(--font);--wash:1;background:#000}
.theatre-page main{position:relative;z-index:1;overflow:clip;background:transparent}
.theatre-page .eyebrow{font-family:var(--mono);font-weight:400;letter-spacing:.26em;font-size:10.5px;color:rgba(255,255,255,.46)}
.chrome,.mast-title,.world .lt,.end-title .lt{background-image:var(--chrome);background-size:100% 1lh;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.anchor{display:block;position:relative;top:-90px;height:0}
.hero-seat[hidden]{display:none}

/* ---------- the room: the wash behind everything ---------- */
.room{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:var(--wash);background:#000}
.room img{position:absolute;left:-10%;top:-10%;width:120%;max-width:none;height:120%;object-fit:cover;opacity:0;filter:blur(38px) saturate(1.25);transition:opacity 1.1s var(--ease)}
.room img.on{opacity:.5}
.room .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.4) 30%,rgba(0,0,0,.4) 62%,rgba(0,0,0,.92) 100%),radial-gradient(90% 70% at 50% 46%,transparent 40%,rgba(0,0,0,.55) 100%)}

/* ---------- ACT I: now showing. PASS THREE: pinned (his note 1). The act is a sticky viewport-high panel over a spacer of one slot per
   world; the wheel walks the reel, the reel walks the scroll. Everything shares the fold (his note 2): the screen takes what the masthead,
   the marquee and the reel leave (--chromeH is their height plus the bar and the gaps). ---------- */
.act{padding:0;position:relative;--chromeH:498px}   /* the revolving stage needs the room the flat screen did not: the panels flank it and the disc sits under it */
.act-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding-top:calc(80px + env(safe-area-inset-top));overflow:hidden}
.act-pin>*{flex:none}
.act-pin>.wrap{width:100%}   /* .wrap's auto margins would shrink-wrap each row in the flex column */
.act-space{height:calc(var(--n,5) * 62vh)}
.mast{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.mast-l{display:grid;gap:8px}
.mast-title{font-family:var(--title);font-weight:300;font-size:clamp(22px,2vw,30px);line-height:1;letter-spacing:.34em;margin:0;padding-block:.14em;margin-block:-.14em}
.mast-r{display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-align:right}
.now{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.42);white-space:nowrap}
.now b{font-weight:400;color:#fff;margin-left:10px}
.now b span{display:inline-block;min-width:2ch}
.craftsline{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.3);white-space:nowrap}   /* not .crafts: that is styles.css's services list */

/* the marquee: the world's name in chrome, a ghost of it a touch out of register, a pass of light on every change */
/* the marquee row is .marq, not .marquee: styles.css's .marquee is the landing's scrolling strip (overflow hidden, a fade mask, no right padding) */
.marq{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:10px;position:relative;z-index:1}
.marq-l{min-width:0}
.world{position:relative;font-family:var(--title);font-weight:300;font-size:clamp(36px,4.8vw,74px);line-height:.94;letter-spacing:-.012em;margin:0;color:#fff;white-space:nowrap;padding-block:.12em;margin-block:-.12em}
.world .wname{display:inline-block;position:relative;z-index:1}
.world .lt{display:inline-block;will-change:transform,opacity}
.world .lt.sp{width:.28em}
.wghost{position:absolute;left:0;top:.12em;z-index:0;color:transparent;-webkit-text-stroke:1px rgba(214,208,255,.5);transform:translate(6px,-6px);opacity:0;pointer-events:none;user-select:none;-webkit-user-select:none}
.wsweep{position:absolute;left:0;top:.12em;z-index:2;color:transparent;pointer-events:none;user-select:none;-webkit-user-select:none;
  background:linear-gradient(104deg,transparent 30%,rgba(255,255,255,.95) 46%,#fff 50%,rgba(255,255,255,.95) 54%,transparent 70%);background-size:220% 100%;background-position:130% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:0}
.kind{margin:0 0 .3em;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.48);text-align:right;white-space:nowrap}
.uib.end-cta{height:52px;padding:0 10px 0 22px;gap:14px;border-radius:999px;font-size:14.5px;letter-spacing:.02em;white-space:nowrap;flex:none}
.uib.end-cta::before{border-radius:999px}
.uib.end-cta i,.enter i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);font-style:normal;font-size:15px;transition:transform .3s var(--ease),background .3s}
.uib.end-cta:hover i,.enter:hover i{transform:translateX(3px);background:rgba(255,255,255,.22)}

/* TRUE LIQUID GLASS (his note 3 on pass three: the old pill read as a dark glossy button, not glass).
   Three things changed. (1) The fill is near-clear (white at ~7%), so the film and the concept read THROUGH the pill
   even where Safari declines to blur; the old rgba(8,8,12,.34) was the darkness he saw. (2) No isolation:isolate on the
   glass itself: in WebKit an element that is its own backdrop root has nothing behind it to sample, so the blur died.
   (3) No mix-blend-mode on the specular pseudo, for the same reason. The refraction is box-shadow: a bright lip top-left,
   a dark one bottom-right, an inner ring of light at the edge. --g-tint / --g-blur / --g-sat are the strength he picks
   from the board (clear / frosted / lilac). */
.theatre-page .glass{
  --g-tint:rgba(185,168,255,.15); --g-blur:26px; --g-sat:1.9; --g-con:.66; --g-bri:.8;   /* HIS PICK 2026-09-21: strength 3, the lilac-tinted glass */
  position:relative;color:#fff;border:0;text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 12px rgba(0,0,0,.45);
  background:linear-gradient(150deg,rgba(255,255,255,.18),rgba(255,255,255,.015) 34%,rgba(255,255,255,.035) 70%,rgba(255,255,255,.13)),var(--g-tint);
  /* contrast under 1 pulls the backdrop toward mid grey, so the white label reads over a light concept page as well as over
     the dark film, and the world still shows through: the glass adapts instead of being painted dark (his note 3) */
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat)) contrast(var(--g-con)) brightness(var(--g-bri));
  backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat)) contrast(var(--g-con)) brightness(var(--g-bri));
  --g-cast:0 14px 34px -14px rgba(0,0,0,.72),0 0 26px -8px rgba(197,211,245,.32);   /* what it throws on the room: the only part the Enter pill overrides */
  box-shadow:inset 1.5px 1.5px 1px -1px rgba(255,255,255,.85),inset -1.5px -1.5px 1px -1px rgba(255,255,255,.24),
    inset 0 0 0 1px rgba(255,255,255,.13),inset 7px 9px 15px -12px rgba(255,255,255,.9),inset -8px -11px 17px -14px rgba(0,0,0,.72),
    var(--g-cast);
  transition:box-shadow .3s var(--ease),background-color .3s}
/* the rim: our conic gradient masked to a 1 px ring */
.theatre-page .glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--rim-wide,var(--rim));opacity:.92;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
/* the specular: a blob of light top-left, and a pass of light across on hover */
.theatre-page .glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(56% 104% at 14% -22%,rgba(255,255,255,.5),rgba(255,255,255,.1) 46%,rgba(255,255,255,0) 66%),
    linear-gradient(115deg,transparent 34%,rgba(255,255,255,.14) 46%,rgba(255,255,255,.46) 50%,rgba(255,255,255,.14) 54%,transparent 66%);
  background-size:100% 100%,260% 100%;background-position:0 0,130% 0;transition:background-position 1.2s var(--ease)}
.theatre-page .glass:hover::after{background-position:0 0,-60% 0}
.theatre-page .glass:hover{--g-tint:rgba(185,168,255,.21);
  --g-cast:0 16px 38px -14px rgba(0,0,0,.78),0 0 32px -6px rgba(197,211,245,.44),0 10px 30px -10px rgba(185,168,255,.4);
  box-shadow:inset 1.5px 1.5px 1px -1px rgba(255,255,255,.95),inset -1.5px -1.5px 1px -1px rgba(255,255,255,.3),
    inset 0 0 0 1px rgba(255,255,255,.18),inset 7px 9px 15px -12px #fff,inset -8px -11px 17px -14px rgba(0,0,0,.72),
    var(--g-cast)}
.theatre-page .rd-close.glass i{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
/* THE HALO, over a concept only. Measured 2026-09-21: WebKit will not let a backdrop-filter sample a concept page (its content scrolls
   inside a composited .app container, and the iframe boundary blocks it either way), so over a world the pill had nothing to blur and a
   white label sat on white. The blur stays on for the engines that can do it; under it, a soft shade sits behind the pill and fades out
   within ~170 px. Over a dark world it is invisible; over a light one it gives the glass something to sit on. The pill itself stays
   near-clear either way, which is what he asked for. */
.theatre-page .viewer .rd-top{padding:22px 28px;width:min(400px,58vw);height:190px;box-sizing:border-box;align-items:flex-start;pointer-events:none;
  background:radial-gradient(168px 92px at calc(100% - 76px) 44px,rgba(4,4,8,.86),rgba(4,4,8,.52) 44%,transparent 78%)}
.theatre-page .viewer .rd-top .rd-close{pointer-events:auto}
/* HIS NOTE 2026-09-22: "the button just looks like its floating there. the button just looks like it has been placed on the
   top." Both halves of that are in this rule.
   WHERE IT SAT. Bottom RIGHT of a box that cannot move while the stage does. The flat layer it stands on is measured off the
   screen's LAYOUT box (it has to be flat, see the note above and rvLit in theatre.js), but the screen itself rides the arc:
   the scroll slides it up to 125 px either side of the room's centre and stands it back as it goes. So at every resting place
   but dead square the pill hung over the panel's right EDGE with the room behind it, which is a button placed on top of a
   picture. Centred, it is over the hero's body wherever the drive rests, because the panel is 640 px wide and never more
   than 125 px off centre. It is his own shot: the pill hanging off the corner is the whole of what he is pointing at.
   WHY IT FLOATED. The glass threw an outer GLOW, and a glow around a thing is the light it gives off when it hovers ABOVE a
   surface. The cast here is a contact shadow instead, tight and deep and under it, so it reads as resting ON the film. The
   glass itself is untouched: it is his pick from the board. */
.theatre-page .enter.glass,.enter{position:absolute;left:50%;bottom:16px;translate:-50% 0;z-index:4;display:inline-flex;align-items:center;gap:14px;height:48px;padding:0 9px 0 22px;border-radius:999px;font-size:14.5px;letter-spacing:.02em;white-space:nowrap;text-decoration:none;cursor:pointer}
.theatre-page .enter.glass{--g-cast:0 12px 22px -12px rgba(0,0,0,.92),0 3px 8px -4px rgba(0,0,0,.7)}
.theatre-page .enter.glass:hover{--g-cast:0 14px 26px -12px rgba(0,0,0,.95),0 4px 10px -4px rgba(0,0,0,.72)}
.enter:hover{translate:-50% -1px}

/* ---------- THE REVOLVING STAGE (his Act I pick, board frame D, built out).
   The worlds stand on a turntable. The scroll revolves it and brings the next one round to face you; the ones behind keep
   their posters, dimmed, turned away. The room has a back, wings, a rig and a floor.

   THE GEOMETRY THAT KEEPS THE ENTRANCE INTACT: the ring is pushed BACK by its own radius (translateZ(-R)) and each card is
   pushed OUT by the same radius. The card at the front therefore lands on z = 0, which is exactly the plane #screen already
   sits on, at exactly the size it already has. So the screen never moves, and theatre-loader.js still measures its live rect
   for E's pen path, the Enter pill and the floor. R = (W/2)/tan(PI/N) seats N cards edge to edge, so the ring scales to any
   number of worlds for free: --R, --cardW and --rot are written by theatre.js from the DOM. ---------- */
.rv{position:relative;padding-bottom:28px;cursor:grab}
.rv:active{cursor:grabbing}
.rv-space{position:relative;transform-style:preserve-3d;perspective:calc(var(--cardW,900px) * 1.62);perspective-origin:50% 42%}
.rv-ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform;
  transform:translateZ(calc(var(--R,600px) * -1))}
/* --o is the glass (his note B: the panels that are not facing the room are see-through, so the ones behind read through
   them); theatre.js writes it in rvDim(). The hero keeps --o:1 and everything it always had. */
.rv-card{position:absolute;left:0;top:0;width:var(--cardW,900px);aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#050508;
  opacity:var(--o,1);transition:opacity .55s var(--ease);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform:translate(-50%,-50%) rotateY(var(--a,0deg)) translateZ(var(--R,600px));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 60px 120px -34px rgba(0,0,0,.95),0 0 44px -12px rgba(167,151,230,.34)}
.rv-card img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;pointer-events:none}
/* the panel's own film, over its still. It carries the still as its poster as well, so the panel looks the same before the film
   arrives and the fade-in has nothing to give away; .live goes on the first time it really plays and stays on, so a panel that
   has turned out of the window holds its last frame instead of snapping back to a photograph. */
.rv-card .rv-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.rv-card.live .rv-film{opacity:1}
/* the panel turned away from the light: a dim that lifts as it comes round to face you */
/* the panel turned away from the light. The dim is an OPACITY, not a background colour: transitioning the colour repainted all
   ten panels for 550 ms on top of every turn, which is paint the compositor cannot skip. Opacity it can. */
/* THE SMOKED HALF OF THE GLASS (rvDim, and his note that a white world read as a pale grey slab). It was a ::after taking a
   custom property; rvDim writes it every frame now, so it is a real element and theatre.js writes its opacity directly. */
.rv-card .rv-wash{position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;background:#020206;opacity:0;
  transition:opacity .55s var(--ease)}
/* under the pin the drive owns both of these values and writes them every frame: a transition could only ever be half a
   second behind the wheel. Off the pin (a phone, reduced motion) rvDim is called on a selection and they still fade. */
.rv.driven .rv-card,.rv.driven .rv-card .rv-wash{transition:none}
.rv-card::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(214,208,255,.30),inset 0 1px 0 rgba(255,255,255,.34)}
.rv-card.at{visibility:hidden}            /* the front card is the lit screen at rest (phone / reduced motion only); opacity is --o's now */
.rv-card.pick{cursor:pointer}

/* the turntable itself: a disc under the panels, spinning with them so the revolve is something you can see, not just infer */
.rv-disc{position:absolute;left:50%;top:50%;width:calc(var(--R,600px) * 2 + var(--cardW,900px) * .72);aspect-ratio:1;pointer-events:none;
  transform:translate(-50%,-50%) translateZ(calc(var(--R,600px) * -1)) translateY(calc(var(--cardW,900px) * .283)) rotateX(90deg);
  transform-style:preserve-3d;will-change:transform;opacity:.9}
.rv-disc-face{position:absolute;inset:0;border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,rgba(214,208,255,.20) 0deg 1.3deg,transparent 1.3deg 22.5deg),
    radial-gradient(closest-side,rgba(167,151,230,.26),rgba(120,132,190,.11) 58%,transparent 78%);
  box-shadow:inset 0 0 0 1px rgba(214,208,255,.28);
  -webkit-mask:radial-gradient(closest-side,#000 62%,transparent 96%);mask:radial-gradient(closest-side,#000 62%,transparent 96%)}

/* the room: a back wall behind the turntable, a key light from the rig above the front, flats at either side */
/* The back of the room. It used to paint a dark radial with a hard top edge, which drew a horizontal strip straight across
   the fold and buried the room wash under it. It is now a vignette only: transparent in the middle so the blurred still of
   the world you are on reads through as the room's colour, dark only at the corners, and masked top and bottom so it has
   no edge of its own anywhere. */
.rv-back{position:absolute;left:calc(50% - 50vw);width:100vw;top:-40%;bottom:-54%;z-index:-1;pointer-events:none;
  background:radial-gradient(72% 84% at 50% 42%,transparent 38%,rgba(4,4,9,.62) 74%,rgba(0,0,0,.92) 100%);
  -webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 74%,transparent);mask:linear-gradient(180deg,transparent,#000 22%,#000 74%,transparent)}
.rv-wing{position:absolute;top:-18%;bottom:-24%;width:min(11vw,150px);z-index:3;pointer-events:none}
.rv-wing.l{left:calc(50% - 50vw);background:linear-gradient(90deg,#000 6%,rgba(0,0,0,.72) 46%,transparent)}
.rv-wing.r{right:calc(50% - 50vw);background:linear-gradient(270deg,#000 6%,rgba(0,0,0,.72) 46%,transparent)}

/* stage left and stage right: the glass arms that turn it by hand */
.rv-arm{position:absolute;top:50%;translate:0 -50%;z-index:6;width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:17px;color:#fff;background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat)) contrast(var(--g-con)) brightness(var(--g-bri));
          backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat)) contrast(var(--g-con)) brightness(var(--g-bri));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.34),inset -1px -1px 0 rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.1);
  opacity:0;transition:opacity .4s var(--ease),translate .3s var(--ease)}
.rv-arm i{font-style:normal;line-height:1}
.rv:hover .rv-arm,.rv-arm:focus-visible{opacity:1}
.rv-arm.l{left:calc(50% - 50vw + 26px)}   /* the viewport edge, on the black of the wing, not 12px inside the stage */
.rv-arm.r{right:calc(50% - 50vw + 26px)}
.rv-arm:hover{background:rgba(255,255,255,.12)}
.rv-hint{position:absolute;left:50%;translate:-50% 0;bottom:4px;z-index:6;margin:0;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.3);pointer-events:none;transition:opacity .6s var(--ease)}
.rv.turned .rv-hint{opacity:0}
@media (prefers-reduced-motion:reduce){.rv-ring,.rv-disc{transition:none}}

/* the screen: fits the room (the fold), the film lights the floor under it */
.stagebox{position:relative;margin-top:12px;isolation:isolate}
.theatre-page .screen{position:relative;z-index:1;width:min(100%,calc((100svh - var(--chromeH)) * 16 / 9));min-width:min(100%,640px);aspect-ratio:16/9;margin-inline:auto;border-radius:22px;overflow:hidden;background:#050508;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.22),0 54px 104px -44px rgba(0,0,0,.92);isolation:isolate}
.theatre-page .screen::after{background:linear-gradient(180deg,transparent 78%,rgba(0,0,0,.3))}
.theatre-page .shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.screen-light{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 9%)}
.screen-hit{position:absolute;inset:0;z-index:3;cursor:pointer}
/* HIS BUG 2, pass eight. The screen's controls stand on their own FLAT layer, a child of .rv and so outside .rv-space's
   preserve-3d altogether. Inside #screen they were a backdrop-filter pill in an overflow:hidden box under a rotateY rewritten
   every frame, and Safari hit tests that subtree by a different path from Chromium: the pill drew where you see it and took the
   click somewhere else. The box is the screen's own, by the same expression .theatre-page .screen and .floor .fl already use,
   It does NOT take the screen's light: see rvLit() in theatre.js for why the pill has to stay up wherever the scroll rests.
   HIS SHOT 2026-09-22: the pill hung off the right edge of the screen. The box below was a COPY of the screen's own width
   expression, and the screen's width is redefined further down for a big viewport, so on his Mac the copy was the wider of
   the two and the pill sat outside the panel. theatre.js now MEASURES the screen's layout box in rvMeasure() and writes this
   layer's left/top/width/height from it, so there is one source of truth and no expression to keep in step. What is left
   here is only the box it holds before that first measurement. */
.screen-ui{position:absolute;left:50%;top:0;z-index:5;width:min(100%,calc((100svh - var(--chromeH)) * 16 / 9));min-width:min(100%,640px);aspect-ratio:16/9;translate:-50% 0;pointer-events:none}
.screen-ui.set{min-width:0;aspect-ratio:auto}     /* theatre.js writes width/height/top; left:50% and the -50% shift stay, so it centres exactly as the screen does */
.screen-ui > *{pointer-events:auto}
.floor{position:absolute;left:0;right:0;top:100%;z-index:0;height:clamp(56px,9vw,132px);overflow:hidden;pointer-events:none;
  -webkit-mask:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.18) 50%,transparent 94%);mask:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.18) 50%,transparent 94%)}
.floor .fl{position:absolute;left:50%;top:0;width:min(100%,calc((100svh - var(--chromeH)) * 16 / 9));min-width:min(100%,640px);aspect-ratio:16/9;translate:-50% 0;transform:scaleY(-1);transform-origin:50% 0;object-fit:cover;object-position:bottom;
  opacity:0;filter:blur(14px) saturate(1.15);transition:opacity .9s var(--ease)}
.floor .fl.on{opacity:.5}

/* the film reel: centre-locked, the ends fall into darkness, the perforations run with it */
/* HIS BUG 5, the second half: "they should be maybe dimmed out abit, we want all the focus on the big hero ones like the main
   focus beautiful." The strip stands back as a whole so the stage is the only lit thing in the room, and comes up to full
   when he actually reaches for it. The selected cel keeps its ring and its white label, so where you are is still legible
   inside the dimmed strip. */
/* HIS NOTE 2026-09-22, the second time of asking: "i also said the smaller boxes underneath need to be a lot more dim as its
   taking away from the pop from the big." .52 was not a lot more dim. It is a quarter now, and full the moment he reaches for
   it, so the stage is the only lit thing in the room until he wants the strip. */
.reelbox{position:relative;z-index:1;margin-top:14px;padding:16px 0 12px;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;
  opacity:.26;transition:opacity .5s var(--ease);
  -webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.reelbox:hover,.reelbox:focus-within,.reelbox.dragging{opacity:1}
.reelbox.dragging{cursor:grabbing}
.perf{position:absolute;left:0;right:0;height:10px;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.22) 1.8px,transparent 2.5px) var(--px,0px) 0/24px 10px repeat-x}
.perf.top{top:5px}.perf.bot{bottom:3px}
.filmreel{position:relative;width:100%}
.cels{display:flex;gap:16px;width:max-content;padding:8px 0;will-change:transform;touch-action:pan-y;perspective:900px;perspective-origin:var(--po,50%) 50%;transform-style:preserve-3d}
.cel{appearance:none;background:none;border:0;padding:0;cursor:pointer;width:160px;flex:none;display:grid;gap:6px;text-align:left;color:inherit;will-change:transform,opacity}
.cel .cf{display:block;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#0a0a0b;position:relative;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 18px 40px -16px rgba(0,0,0,.9)}
.cel .cf::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 30%)}
.cel .cf::after{content:"";position:absolute;inset:0;border-radius:9px;box-shadow:inset 0 0 0 1.5px rgba(232,228,255,.9),0 0 34px rgba(196,190,240,.32);opacity:0;transition:opacity .4s}
.cel.on .cf::after{opacity:1}
.cel .cf img{width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none;display:block}
.cel .ct{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42);transition:color .35s;white-space:nowrap}
.cel .ct b{font-weight:400;color:rgba(255,255,255,.26);margin-right:10px}
.cel.on .ct{color:#fff}.cel.on .ct b{color:var(--pur)}

/* ---------- INTERMISSION (his pass-three note 1: B's layout plus C's drawn word) ----------
   The section is a tall scroll space with a pinned screen over it, the way Act I is pinned. The act numeral sits left and the
   two lines right; the word is written across the middle by the loader's own pen, scrubbed by the scroll, and the pen then draws
   a rule UNDER the letters rather than through them. Nothing here is on a timer. Under 860 px the pin is off and the word is
   simply written (theatre.js). */
.intermission{position:relative;padding:0;min-height:0}
.im-pin{position:sticky;top:0;height:100svh;display:grid;align-content:center;overflow:hidden}
.im-pin>.wrap{width:100%;position:relative;z-index:1}
.im-space{height:185vh;pointer-events:none}

/* The intermission's own sky (his note: it sat on flat black, because the room wash has faded to nothing by the time you
   arrive, so it read as a dead field). Built from the theatre's own colours: the rim's lilac #A797E6 behind the numeral on
   the left, the rim's blue #B1BEDD low on the right, a violet floor bloom under the word. Masked to black at the top and the
   bottom so it hands over from the room wash rather than cutting against it, and so it never crowds the written word.
   --im-g is the entry and exit fade, driven by the same scrubbed trigger that writes the word (theatre.js). */
.im-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--im-g,0);
  background:
    radial-gradient(66% 50% at 16% 32%,rgba(167,151,230,.30),rgba(167,151,230,0) 72%),
    radial-gradient(58% 46% at 86% 72%,rgba(177,190,221,.20),rgba(177,190,221,0) 70%),
    radial-gradient(120% 74% at 50% 116%,rgba(96,82,164,.26),rgba(96,82,164,0) 66%),
    linear-gradient(180deg,#000 0%,#07060d 20%,#0d0b19 50%,#08070f 80%,#000 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%)}
/* the depth: two soft blooms drifting behind the field, blurred so they read as light in a room, never as shapes */
.im-bg::before{content:"";position:absolute;inset:-18%;
  background:
    radial-gradient(28% 26% at 26% 38%,rgba(192,177,255,.26),rgba(192,177,255,0) 70%),
    radial-gradient(24% 22% at 74% 66%,rgba(140,166,224,.20),rgba(140,166,224,0) 70%);
  filter:blur(46px);animation:imDrift 34s ease-in-out infinite alternate}
/* the grain: a big soft gradient on near-black bands badly without it */
.im-bg::after{content:"";position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;
  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='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes imDrift{from{transform:translate3d(-2.5%,1.5%,0) scale(1)}to{transform:translate3d(3%,-2%,0) scale(1.09)}}
@media (prefers-reduced-motion:reduce){.im-bg::before{animation:none}}
.im{display:grid;justify-items:stretch;gap:clamp(26px,5vh,64px);width:100%}
.im-top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px}
.im-num{position:relative;margin:0;font-family:var(--title);font-weight:300;font-size:clamp(82px,14.5vw,236px);line-height:.78;letter-spacing:.04em;
  padding-block:.1em;margin-block:-.1em;opacity:0}
.im-numword{background-image:var(--chrome);background-size:100% 1lh;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.im-numsweep{position:absolute;left:0;top:.1em;color:transparent;pointer-events:none;user-select:none;-webkit-user-select:none;
  background:linear-gradient(104deg,transparent 30%,rgba(255,255,255,.95) 46%,#fff 50%,rgba(255,255,255,.95) 54%,transparent 70%);
  background-size:220% 100%;background-position:130% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:0}
.im-title{font-family:var(--title);font-weight:300;font-size:clamp(26px,3.6vw,54px);line-height:1.04;letter-spacing:-.01em;color:#fff;margin:0;display:grid;text-align:right;padding-top:.2em}
.im-title .im-line{display:block;white-space:nowrap}
.im-title .im-line.faint{color:rgba(255,255,255,.42)}
.im-title .lt{display:inline-block;will-change:transform,opacity}
.im-title .lt.sp{width:.28em}
/* the pen's word: theatre.js replaces the text with the Aime MX outlines and strokes them */
.im-word{margin:0;font-family:var(--title);font-weight:300;font-size:clamp(34px,7.6vw,118px);line-height:1;letter-spacing:.12em;
  text-transform:uppercase;text-align:center;
  background-image:var(--chrome);background-size:100% 1lh;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.im-word.pen{display:block;line-height:0;background:none}
.im-word svg{display:block;width:100%;height:auto;overflow:visible}
.im-copy{font-size:16px;color:rgba(255,255,255,.5);max-width:42ch;line-height:1.6;margin:0 auto;text-align:center;opacity:0}

/* ---------- ACT III: the archive, a table of books, each lit by its own colour ---------- */
.archive{padding:20px 0 40px;position:relative}
/* His note: the intermission cut dead against this section. The sky above now reaches zero exactly as the pin releases, and
   the archive carries the same lilac and blue on out of its own top, so the colour hands over instead of stopping. */
.archive::before{content:"";position:absolute;left:calc(50% - 50vw);width:100vw;top:-42vh;height:96vh;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 52% at 30% 8%,rgba(167,151,230,.20),rgba(167,151,230,0) 72%),
    radial-gradient(54% 48% at 78% 26%,rgba(140,166,224,.13),rgba(140,166,224,0) 70%),
    linear-gradient(180deg,rgba(13,11,25,.92),rgba(8,7,15,.5) 46%,transparent 86%);
  -webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 62%,transparent);mask:linear-gradient(180deg,transparent,#000 18%,#000 62%,transparent)}
.archive .th-head{display:grid;gap:18px}
.archive h2{font-size:clamp(36px,3.75vw,54px);line-height:1.04;font-weight:400;color:var(--text)}
.archive h2 em{font-style:italic;color:rgba(242,243,245,.7)}
.th-lede{font-size:17px;color:rgba(242,243,245,.52);max-width:62ch}
/* TEN books now, not six (pass nine). The table is not four more coordinates bolted on: every book is placed again,
   in five staggered pairs down a taller table, and the height grows with the count. The layout is verified rather
   than eyeballed, see qa/theatre-pass9.mjs: no two books may overlap at any width the table is a table at. */
.table{position:relative;height:clamp(1700px,176vw,2250px);margin-top:70px}
.tome{position:absolute;left:var(--x);top:var(--y);width:var(--w);margin:0;rotate:var(--r)}   /* pass three, his bug: no preserve-3d on the figure. With it, the tilted cover depth-sorted against the figure's own plane: the half that dipped a hair behind it lost the click to the figure (the books would not open) and took the glow painted over it (his slanted light band). GSAP's transformPerspective on .cv carries the depth. */
.tome::before{content:"";position:absolute;inset:-12% -9% -20%;z-index:-1;border-radius:50%;background:var(--bg) center/cover no-repeat;filter:blur(26px) saturate(1.35);opacity:.5;pointer-events:none;transition:opacity .6s ease}
.tome:hover::before{opacity:.8}
.tome .cv{appearance:none;border:0;padding:0;display:block;width:100%;cursor:pointer;background:none;position:relative;transform-style:preserve-3d;will-change:transform;border-radius:6px}
.tome .cv::before,.tome .cv::after{content:"";position:absolute;border-radius:5px;pointer-events:none}
.tome .cv::before{inset:2px -3px -3px 3px;background:linear-gradient(90deg,#c9c9cc,#f1f1f3 40%,#e4e4e8);transform:translateZ(-2px)}
.tome .cv::after{inset:5px -6px -6px 5px;background:linear-gradient(90deg,#9a9a9e,#d7d7db 40%,#c4c4c8);transform:translateZ(-4px)}
.bk{position:relative;display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#0a0a0b;z-index:1;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.06),0 34px 70px -18px rgba(0,0,0,.95)}
.bk img{width:100%;height:100%;object-fit:cover;object-position:top;filter:brightness(.86);transition:filter .5s ease}
.tome:hover .bk img,.tome .cv:focus-visible .bk img{filter:brightness(1)}
.bk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(255,255,255,.08) 30%,rgba(0,0,0,.12) 55%,transparent)}
.sheen{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .45s ease;mix-blend-mode:screen;
  background:radial-gradient(48% 62% at var(--mx,50%) var(--my,40%),rgba(255,255,255,.28),rgba(199,188,244,.12) 45%,transparent 70%)}
.tome:hover .sheen{opacity:1}
.tome figcaption{position:absolute;left:2px;top:calc(100% + 16px);display:grid;gap:3px;font-size:13.5px;color:rgba(242,243,245,.5);
  opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s var(--ease);pointer-events:none;white-space:nowrap}
.tome figcaption b{font-weight:400;color:#fff;font-size:15px}
.tome:hover figcaption,.tome .cv:focus-visible+figcaption{opacity:1;transform:none}

/* ---------- end of show, on the lounge film (his note 4): the landing's final scene behind End of Show and the footer ---------- */
/* HIS NOTE 2026-09-22: "the footer, Humanate Creative writing cropped out. We should add the same as the main page design
   with the blacked out screen edges type vibe." The landing's final scene is 86svh tall, so the 16:9 film covers a box that is
   WIDER than it is, and cover can only ever take a slice off the ceiling and the floor: the studio's neon sign on the right
   wall stays whole. The theatre's lounge was as tall as its own writing, roughly 1100 px on his Mac, which is NARROWER than
   16:9, so cover scaled the film up and took 200 px off each side, and the sign lost its last letters. The scene is now capped
   at the film's own ratio, calc(100vw * 9/16), which is the widest box that can never crop sideways, and the black above it is
   the page it sits on: the film reads as a lit screen with its edges blacked out, which is the landing's look. */
.lounge{position:relative;isolation:isolate;overflow:hidden;background:#000;display:grid;grid-template-rows:1fr auto;
  min-height:min(86svh,calc(100vw * 9 / 16))}
.lounge-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.lounge-veil{position:absolute;inset:0;z-index:-1;background:radial-gradient(118% 92% at 50% 42%,transparent 26%,rgba(0,0,0,.44) 68%,rgba(0,0,0,.9) 100%),linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.26) 42%,rgba(0,0,0,.55) 100%),rgba(5,5,8,.18)}
.lounge .footer,.workpage .lounge .footer{background:#000;position:relative;z-index:1}   /* the landing's band: the film stops at the footer, which is the bottom black edge of the screen */
.endshow{padding:clamp(40px,7vh,96px) 0 clamp(26px,4vh,54px);text-align:center;align-self:center;width:100%}
.endshow .wrap{display:grid;justify-items:center;gap:clamp(16px,2.4vh,30px)}
.end-title{position:relative;font-family:var(--title);font-weight:300;font-size:clamp(44px,7.6vw,118px);line-height:.94;letter-spacing:-.012em;text-transform:uppercase;margin:0;color:#fff;white-space:nowrap;padding-block:.14em;margin-block:-.14em}
.end-title .wname{display:inline-block;position:relative;z-index:1}
.end-title .wghost{top:.14em}
.end-title .lt{display:inline-block;will-change:transform,opacity}
.end-title .lt.sp{width:.28em}

/* ---------- HIS NOTE F, pass eight: "the font and way it looks maybe not font is TOOOO bold and out there, looks out of
   place." Three quieter treatments to look at IN PLACE, chosen with ?end= on the theatre's URL. What he saw is ?end=0 and it
   is still there to compare against; 1 is the one the page serves now, because he has already said the old one is wrong.
   What makes the old one shout is three things at once and not the face: it is 118 px of CAPS, filled with the chrome
   gradient that the masthead and the marquee also use, with a second stroked copy of the word sitting out of register behind
   it. Each treatment gives up a different pair of the three. ---------- */

/* 1. QUIET CAPS. The same word, the same caps, the same chrome: half the size, tracked out instead of tightened, and the
      ghost gone. The theatre's voice at speaking volume. */
#end[data-end="1"] .end-title{font-size:clamp(30px,3.9vw,60px);letter-spacing:.055em;font-weight:200}
#end[data-end="1"] .end-title .wghost{display:none}

/* 2. SENTENCE. No caps and no chrome at all, just the title face in the page's own off-white. The quietest of the three,
      and the one that reads as a line of writing rather than a sign. */
#end[data-end="2"] .end-title{font-size:clamp(34px,4.6vw,72px);text-transform:none;letter-spacing:-.005em;font-weight:300}
#end[data-end="2"] .end-title .wghost{display:none}
#end[data-end="2"] .end-title .lt{background-image:none;-webkit-text-fill-color:rgba(237,235,242,.93);color:rgba(237,235,242,.93)}

/* 3. THE RULE. Caps kept but small and tracked wide, the chrome dropped out of the letters and put into a hairline under
      them instead: the same rule the pen draws under INTERMISSION, so the end of the show answers the middle of it. */
#end[data-end="3"] .end-title{font-size:clamp(26px,3.1vw,46px);letter-spacing:.2em;font-weight:200;padding-bottom:.42em}
#end[data-end="3"] .end-title .wghost{display:none}
#end[data-end="3"] .end-title .lt{background-image:none;-webkit-text-fill-color:rgba(237,235,242,.88);color:rgba(237,235,242,.88)}
#end[data-end="3"] .end-title::after{content:"";position:absolute;left:0;bottom:.14em;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,#C0B1FF 18%,#EDEDF2 50%,#C0B1FF 82%,transparent);opacity:.75}
.end-crafts{display:flex;gap:clamp(18px,4vw,56px);font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7);text-shadow:0 1px 12px rgba(0,0,0,.8)}
.end-line{font-size:clamp(26px,3.2vw,44px);color:rgba(255,255,255,.9);margin-top:6px;text-shadow:0 1px 14px rgba(0,0,0,.85)}
.end-line em{font-style:italic}
/* the landing's own chat bar, under the writing (his note: "add this actual bar here too"). The recipe is styles.css's
   .conversation-entry.gbar; only what the lounge needs on top of it lives here. */
.theatre-page .endshow .conversation-entry{width:100%;justify-self:stretch;margin-top:clamp(4px,1.4vh,16px)}
.theatre-page .endshow .conversation-note{width:100%;color:#cfc9d8;text-shadow:0 1px 12px rgba(0,0,0,.8);text-align:left}
.theatre-page .endshow .conversation-note>span:last-child{text-align:right}
.end-cta{margin-top:10px;border:0;cursor:pointer;font-family:inherit}

html.chat-open .cur{opacity:0;pointer-events:none;transition:opacity .25s}

/* ---------- the book reader ---------- */
.bookr{position:fixed;inset:0;z-index:200;display:grid;grid-template-rows:auto 1fr auto;background:rgba(0,0,0,.9);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);color:#fff;opacity:0;transition:opacity .4s ease}
.bookr[hidden]{display:none}
.bookr.on{opacity:1}
.bk-stage{position:relative;display:grid;place-items:center;padding:0 96px;min-height:0;perspective:2400px}
/* THE FRAME IS THE DESIGN (his note: the black bars on the left and right of every spread). The frame was pinned to 16/9 but
   its height was then clamped by max-height, so on a short window the box stayed 1320 px wide and only 590 tall, a good
   deal wider than the spread inside it: object-fit:contain then pillarboxed the artwork and the rounded corners, the
   shadow and the light wipe all belonged to the black, not to the book. The height now drives the WIDTH through the
   book's own ratio, so the frame is exactly the spread at every window size and the radius lands on the artwork.
   --bk-ar is the book's own ratio, set from data-ar and corrected from the spread's natural size once it loads. */
.bk-book{position:relative;--bk-ar:1.7778;width:min(1500px,100%,calc((100vh - 200px) * var(--bk-ar)));aspect-ratio:var(--bk-ar);transform-style:preserve-3d}
.bk-pages{position:absolute;inset:0;border-radius:10px;overflow:hidden;background:#0b0b0d;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 140px rgba(0,0,0,.85)}
/* HIS PICK 2026-09-22 off board two: THE FOLD. The leaf that is leaving hinges about the spine, so it needs its own
   backface hidden (past ninety degrees it is gone and the arriving spread is simply there) and the frame must stop
   clipping for the length of the turn, because a page that lifts really does leave the book. */
.pg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0b0b0d;opacity:0;will-change:transform,opacity;
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
.bk-pages.folding{overflow:visible}
.bk-shade{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(0,0,0,.42),transparent 46%)}
.bk-shade.bwd{background:linear-gradient(270deg,rgba(0,0,0,.42),transparent 46%)}
.bk-pages{perspective:2600px;transform-style:preserve-3d}
/* THE LIGHT WIPE (his pick, G on the pass-four board). The next spread is uncovered by a soft edge crossing the page with the
   marquee's chrome light riding on it. Forward runs right to left, the way the page you lift sweeps across; back runs the other
   way. Nothing is drawn down the middle, which is what the leaf turn did wrong to spreads that are single images. */
.wipe-edge{position:absolute;top:-2%;bottom:-2%;width:120px;z-index:4;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06) 30%,rgba(214,222,255,.34) 56%,rgba(255,255,255,.92) 70%,rgba(233,228,255,.98) 75%,rgba(255,255,255,.3) 84%,transparent);
  filter:blur(.4px)}
.wipe-edge.bwd{transform:scaleX(-1)}
.bk-cover{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:10px;overflow:hidden;transform-origin:0% 50%;transform-style:preserve-3d;
  background:#0b0b0d;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 120px rgba(0,0,0,.8)}
.bk-cover img{width:100%;height:100%;object-fit:cover;object-position:top}
.bk-inside{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.05) 30%,transparent);opacity:0}
.bk-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline}
.bk-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.34);text-align:center}
.bk-foot .rd-count{text-align:right}
html.bk-open,html.bk-open body{overflow:hidden}

.stage-film-b{opacity:0}

/* entering a world: a ghost of the screen grows to the viewport before the viewer takes over */
.ghost{position:fixed;left:0;top:0;z-index:190;pointer-events:none;border-radius:22px;overflow:hidden;background:#000 center/cover no-repeat;display:none;will-change:transform}
.ghost.on{display:block}
.theatre-page .viewer{background:#000}

/* the cursor label */
.cur{position:fixed;left:0;top:0;z-index:400;pointer-events:none;transform:translate(14px,18px) scale(.8);opacity:0;transition:opacity .22s ease,transform .22s var(--ease);
  padding:7px 11px;border-radius:999px;background:rgba(0,0,0,.66);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#fff;white-space:nowrap}
.cur.on{opacity:1;transform:translate(14px,18px) scale(1)}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  .table{height:clamp(1100px,150vw,1700px)}
  .bk-stage{padding:0 72px}
}
@media (max-width:860px){
  .act-pin{position:static;height:auto;overflow:visible;padding-top:118px}
  .act-space{display:none}
  .mast{flex-direction:column;align-items:flex-start;gap:18px}
  .mast-r{justify-items:start;text-align:left}
  .marq{flex-direction:column;align-items:flex-start;gap:14px}
  .kind{text-align:left}
  .floor{position:relative;top:auto}
  .cel{width:170px}
}
@media (max-width:640px){
  .act-pin{padding-top:110px}
  .theatre-page .screen{border-radius:12px;width:100%;min-width:0}
  .enter{bottom:12px;height:42px;padding:0 7px 0 16px;font-size:13.5px}   /* right: is gone with the corner it used to sit in */
  .floor .fl{width:100%;min-width:0}
  .world{font-size:clamp(36px,11vw,52px);white-space:normal}
  .reelbox{margin-top:24px;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .cel{width:150px}
  .im-space{height:150vh}
  .im-top{flex-direction:column;align-items:center;gap:18px}
  .im-title{text-align:center}
  .im-title .im-line{white-space:normal}
  .table{height:auto;display:grid;gap:44px;margin-top:44px}
  .tome{position:static;width:100%;rotate:none;perspective:none}
  .tome::before{display:none}
  .tome .cv{transform:none}
  .tome figcaption{position:static;opacity:1;transform:none;margin-top:12px;white-space:normal}
  .lounge{min-height:0}
  .endshow{padding:110px 0 76px}
  .end-title{white-space:normal}
  .bk-stage{padding:0 12px}
  .bk-book{width:min(1500px,100%,calc((100vh - 220px) * var(--bk-ar)))}
  .rd-nav{width:44px;height:44px;top:auto;bottom:-56px;translate:none}
  .rd-nav.prev{left:12px}.rd-nav.next{right:12px}
  .bk-foot{grid-template-columns:1fr;justify-items:center;text-align:center;gap:4px;padding:14px 64px 20px}
  .bk-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cel .cf::after,.cel .ct,.bk img,.sheen,.tome figcaption,.bookr,.cur,.floor .fl{transition:none}
  .tome .cv{transform:none}
  .wghost,.wsweep{display:none}
  .wipe-edge{display:none}
}