/* unicornfactory.dev · the picture tent (design B, Josh 27 Oct). The pictures pages as a
   picture booth on the Midway, Thanksgiving night 1963: a marquee over it, the booth with its
   drapes, the bills on the boards, the ticket window for the list.
   Scoped under .g-tent; lifted tokens and the engine's literals only; every class is g- prefixed.
   Each object is a stack of picture layers (drawn SVG now, ChatGPT plates later, same geometry),
   and every word on an object is lettered here in HTML, never in the picture.
   Nothing moves on arrival. The only motion is the drapes (720 ms), the bulbs lighting left to
   right once, and the stamp; reduced motion keeps every end state and drops the movement. */

.g-tent{--g-ink:#241548;--g-ink2:#5f5079;--g-ink3:#786a90;--g-lever-ink:#160516}

/* objects break out of the 1000px column, a film is not column-shaped (the rail rule) */
.g-tent .g-wide{position:relative;width:min(1240px,calc(100vw - 32px));left:50%;transform:translateX(-50%)}
@media(min-width:1100px){.g-tent .g-sec>.g-wide,.g-tent .g-sec>.g-boards,.g-tent .g-sec>.g-window{grid-column:1/-1}}

/* ── the room's head ── */
.g-tent .g-tent-head{text-align:center;padding-top:44px}
.g-tent .g-tent-head h1{font-family:var(--f-d);font-weight:400;letter-spacing:-.036em;line-height:.98;
  font-size:clamp(44px,8vw,80px);margin:12px 0 0;color:#FFF3D6}
.g-tent .g-tent-head .line{color:var(--dusk);font-size:clamp(16.5px,2.2vw,19px);margin:14px auto 0;max-width:34em}

/* the marquee lives in pictures.css, which the gate loads too */

/* ── the booth ── */
.g-booth{position:relative;margin:34px auto 0;container-type:inline-size;
  --sx:13.75%;--sy:30%;--sw:72.5%;--sh:58.214%;--dl:11.625%;--dt:23.393%;--dh:65.536%;--din:20.125%;--dback:10.5%;
  --px:39.5%;--py:91.3%;--pw:20.8%;--ph:3.75%;--pfs:.92cqw;
  aspect-ratio:1600/1120;width:100%}
.g-booth[data-shape="tall"]{aspect-ratio:780/1440;width:min(100%,460px);
  --sx:13.077%;--sy:20.139%;--sw:73.846%;--sh:71.111%;--dl:10.513%;--dt:20.2%;--dh:70.911%;--din:21.795%;--dback:9.5%;
  --px:37.5%;--py:92.6%;--pw:25%;--ph:3%;--pfs:1.6cqw}
.g-booth>img,.g-booth .g-lay{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.g-booth .g-lay img{position:absolute;inset:0;width:100%;height:100%}
.g-booth [data-for="tall"]{display:none}
.g-booth[data-shape="tall"] [data-for="wide"]{display:none}
.g-booth[data-shape="tall"] [data-for="tall"]{display:block}

/* the screen, and the film in it */
.g-booth .g-screen{position:absolute;left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);overflow:hidden;background:#05020C}
.g-booth .g-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#05020C;
  transition:filter .72s ease}
.g-booth[data-state="before"] .g-screen video{filter:brightness(.5) saturate(.8)}

/* the bulbs: the lit layer is revealed left to right, once, when the film starts */
.g-booth .g-lit{clip-path:inset(0 100% 0 0)}
.g-booth[data-state="playing"] .g-lit,.g-booth[data-state="paused"] .g-lit,.g-booth[data-state="after"] .g-lit{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:no-preference){.g-booth .g-lit{transition:clip-path .6s steps(25,end)}}

/* the drapes and the curtain hang inside the booth's own outline (Josh, 30 Oct: they ran past the top
   corners), so wherever the booth picture is see-through outside its frame, nothing shows */
.g-booth .g-hang{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url("/assets/pictures/tent/hang-wide-ma.webp") 0 0/100% 100% no-repeat;mask:url("/assets/pictures/tent/hang-wide-ma.webp") 0 0/100% 100% no-repeat}
.g-booth[data-shape="tall"] .g-hang{-webkit-mask-image:url("/assets/pictures/tent/hang-tall-ma.webp");mask-image:url("/assets/pictures/tent/hang-tall-ma.webp")}
/* the drapes: in before and after, drawn back while the film plays */
.g-booth .g-drape{position:absolute;top:var(--dt);height:var(--dh);width:var(--din);pointer-events:none}
.g-booth .g-drape img{position:absolute;inset:0;width:100%;height:100%;display:block}
.g-booth .g-drape.l{left:var(--dl)}
.g-booth .g-drape.r{right:var(--dl)}
.g-booth .g-drape.r img{transform:scaleX(-1)}
.g-booth[data-state="playing"] .g-drape,.g-booth[data-state="paused"] .g-drape{width:var(--dback)}
@media(prefers-reduced-motion:no-preference){.g-booth .g-drape{transition:width .6s cubic-bezier(.6,0,.25,1)}}

/* the plaque, lettered */
.g-booth .g-plaque{position:absolute;left:var(--px);top:var(--py);width:var(--pw);height:var(--ph);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-m);font-weight:700;font-size:var(--pfs);letter-spacing:.2em;text-transform:uppercase;color:var(--night);opacity:.82;white-space:nowrap;pointer-events:none}

/* before: the lever over the film; after: the end card and two ways on */
.g-booth .g-over{position:absolute;left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:0 12%}
.g-booth[data-state="before"] .g-over.pre,.g-booth[data-state="after"] .g-over.post{display:flex}
.g-booth[data-shape="tall"] .g-over.pre{padding:0 9%}
.g-booth[data-state="after"] .g-screen video{filter:brightness(.3) saturate(.7)}
.g-booth .g-over.post .t,.g-booth .g-over.post .k{text-shadow:0 2px 14px rgba(11,6,20,.9)}
.g-booth .g-over .k{font-family:var(--f-m);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass)}
.g-booth .g-over .t{font-family:var(--f-d);font-size:clamp(20px,3.4cqw,38px);line-height:1.04;letter-spacing:-.02em;color:#FFF3D6}
.g-booth[data-shape="tall"] .g-over .t{font-size:7cqw}
.g-booth .g-over .hint{font-family:var(--f-m);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dusk)}
.g-booth .g-over .row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* the lever, lifted, unchanged; and the quiet buttons */
.g-tent .g-lever{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border:0;border-radius:5px;cursor:pointer;
  background:linear-gradient(180deg,#ff5ca5,#ff3d9a 52%,#d91e70);color:var(--g-lever-ink);text-decoration:none;
  font-family:var(--f-m);font-weight:700;font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;
  box-shadow:0 5px 0 0 #8e1249,0 12px 26px rgba(255,61,154,.3)}
.g-tent .g-lever:active{transform:translateY(3px);box-shadow:0 2px 0 0 #8e1249}
.g-tent .g-quiet{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:5px;cursor:pointer;text-decoration:none;
  border:1px solid var(--brass-d);background:rgba(11,6,20,.4);color:var(--brass-l);
  font-family:var(--f-m);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.g-tent .g-quiet:hover{background:rgba(255,201,77,.1)}
.g-tent button:focus-visible,.g-tent a:focus-visible,.g-tent input:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
@media(max-width:719px){.g-booth[data-shape="tall"] .g-over.pre .g-lever{width:100%}.g-tent .g-lever{font-size:11.5px;letter-spacing:.2em;white-space:nowrap;padding:0 18px}}

/* ── the rail of controls under the booth (made by player.js; without it the film keeps its own controls) ── */
.g-rail{display:none;align-items:center;gap:10px;width:min(1000px,100%);margin:14px auto 0;padding:0 4px}
.g-rail.on{display:flex}
.g-rail .pp{flex:none;width:44px;height:44px;border:0;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(165deg,#c42c77,#8b45d6);color:#fff6e6}
.g-rail .pp svg{width:16px;height:16px;fill:currentColor}
.g-rail .time{flex:none;font-family:var(--f-m);font-size:11px;letter-spacing:.06em;color:var(--brass-l);font-variant-numeric:tabular-nums;min-width:7.4em}
.g-rail input[type=range]{flex:1 1 auto;min-width:60px;accent-color:#ffc94d;height:28px;cursor:pointer}
.g-rail .tg{flex:none;min-height:44px;min-width:44px;padding:0 10px;border-radius:6px;cursor:pointer;background:transparent;
  border:1px solid var(--line);color:var(--dusk);font-family:var(--f-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.g-rail .tg[aria-pressed="true"]{border-color:var(--brass);color:var(--brass-l)}
.g-rail .tg[hidden]{display:none}
@media(max-width:719px){.g-rail{flex-wrap:wrap;width:min(460px,100%)}.g-rail input[type=range]{order:5;flex-basis:100%}}

/* under the booth: the hint, the shape switch, the caption */
.g-under{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;width:min(1000px,100%);margin:16px auto 0}
.g-under .hint{font-family:var(--f-m);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dusk)}
.g-shape{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.g-shape button{min-height:44px;padding:0 16px;border:0;background:transparent;color:var(--dusk);cursor:pointer;
  font-family:var(--f-m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.g-shape button[aria-pressed="true"]{background:var(--case);color:var(--brass-l)}
.g-tent .g-pic-cap{width:min(1000px,100%);margin:26px auto 0}
.g-tent .g-pic .line,.g-tent .g-pic-also,.g-tent .g-pic-more{width:min(1000px,100%);margin-left:auto;margin-right:auto}

/* ── the boards: pictures to come; made ones are pasted bills, the rest bare boards ── */
.g-boards{margin-top:22px;border-radius:6px;padding:clamp(16px,3vw,30px);display:grid;gap:clamp(14px,2vw,22px);
  grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;
  background:repeating-linear-gradient(90deg,rgba(23,13,46,.5) 0 2px,transparent 2px 96px),
    repeating-linear-gradient(90deg,rgba(255,201,77,.03) 0 1px,transparent 1px 8px),
    linear-gradient(180deg,rgba(107,74,14,.5),rgba(107,74,14,.28)),#1e1240;
  box-shadow:inset 0 0 0 1px rgba(255,201,77,.06)}
@media(min-width:720px){.g-boards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.g-boards{grid-template-columns:repeat(5,minmax(0,1fr))}}
.g-boards li{margin:0}
.g-boards a,.g-boards .bare{display:block;text-decoration:none;padding:12px 12px 16px;border-radius:2px;height:100%;box-sizing:border-box}
.g-boards a{background:#fff6e6;color:var(--g-ink);box-shadow:0 14px 26px rgba(0,0,0,.5);transform:rotate(-1deg)}
.g-boards li:nth-child(even) a{transform:rotate(.8deg)}
.g-boards a img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.g-boards .bare{background:rgba(23,13,46,.35);color:var(--bone)}
.g-boards .bare .blank{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;border:1px dashed rgba(255,246,230,.16);border-radius:2px;
  font-family:var(--f-m);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--dusk);text-align:center;padding:0 8px}
.g-boards .t{display:block;margin-top:12px;font-family:var(--f-d);font-size:19px;line-height:1.1;letter-spacing:-.02em}
.g-boards .m{display:block;margin-top:5px;font-family:var(--f-m);font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.g-boards a .m{color:#bc1a6c}
.g-boards .bare .m{color:var(--dusk)}
.g-boards .bare.film .m{color:var(--brass)}

/* ── the ticket window: the blank gate ticket with its words printed on, then the list (the grille is off: Josh, 28 Oct; a small ticket booth front comes later) ── */
.g-window{margin:22px auto 0;width:min(640px,100%);padding:22px clamp(16px,3vw,28px) 26px;border-radius:14px;background:#1e1240;
  box-shadow:0 0 0 1px rgba(255,201,77,.10),0 30px 70px rgba(0,0,0,.45)}
/* the ticket booth front (Josh, picks page 30 Oct: take A); its sign is lettered here, never in the picture */
.g-window .g-tbooth{position:relative;margin:-6px 0 0;aspect-ratio:1200/800;container-type:inline-size}
.g-window .g-tbooth img{position:absolute;inset:0;width:100%;height:100%;display:block}
.g-window .g-tbooth .sign{position:absolute;left:36%;top:17.8%;width:28%;height:6.4%;margin:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-m);font-weight:700;font-size:1.55cqw;letter-spacing:.16em;text-transform:uppercase;color:#2a1a05;mix-blend-mode:multiply;white-space:nowrap;overflow:hidden}
.g-window .g-tbooth+.ticket{margin-top:-13%}
.g-window .ticket{position:relative;margin:0;aspect-ratio:1400/407;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));container-type:inline-size}
.g-window .ticket img{position:absolute;inset:0;width:100%;height:100%}
.g-window .ticket .main{position:absolute;left:18%;top:14%;width:76%;height:70%;display:flex;flex-direction:column;justify-content:center}
.g-window .ticket .adm{margin:0;font-family:var(--f-m);font-size:max(8px,1.6cqw);letter-spacing:.26em;text-transform:uppercase;color:var(--g-ink3);mix-blend-mode:multiply}
.g-window .ticket h2{margin:.25em 0 0;font-family:var(--f-d);font-weight:400;font-size:max(19px,5.2cqw);letter-spacing:-.025em;line-height:1.05;color:var(--g-ink);mix-blend-mode:multiply}
.g-window .g-list{margin-top:18px}
.g-tent .g-window .g-card{max-width:none;margin:0}
.g-tent .g-window .wl{max-width:none;margin:18px 0 0;padding:0;border:0;background:none;box-shadow:none}
.g-tent .g-window .wl .g-lever,.g-tent .g-window .wl button.lever{min-height:50px}

/* forced colours: the drawn objects are pictures, the words stay readable */
@media(forced-colors:active){.g-tent .g-lever{border:2px solid ButtonText}.g-booth .g-screen{border:1px solid CanvasText}}

/* ── the billing under a piece ── */
.g-bill{width:min(1000px,100%);margin:18px auto 0;border-top:1px solid var(--line)}
.g-bill div{display:grid;grid-template-columns:minmax(7rem,10rem) minmax(0,1fr);gap:16px;padding:11px 0;border-bottom:1px solid #3e2a6b}
.g-bill dt{padding-top:3px;font-family:var(--f-m);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dusk)}
.g-bill dd{margin:0;font-size:16.5px;color:var(--bone)}

/* nothing out yet: an empty booth in each shape, the tall one on a phone held upright */
.g-booth[data-empty="tall"]{display:none}
@media(max-width:719px){.g-booth[data-empty="wide"]{display:none}.g-booth[data-empty="tall"]{display:block}}

/* ── the theatre: raise the curtain and the film fills the screen, everything else gone dark.
   Timing (Josh, 29 Oct): the 0.62 s ident covers the curtain parting; the lights go down around
   the film where it stands (0.9 s); the title starts; then the film zooms to fill (0.8 s). ── */
.g-theatre{position:fixed;inset:0;z-index:1000}
/* the dark is its own layer, so the film never fades with it */
.g-theatre::before{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity .9s ease-in-out}
.g-theatre.on::before{opacity:1}
.g-theatre.instant::before{transition:none}
.g-theatre[hidden]{display:none}
.g-theatre video.filling{position:absolute;object-fit:contain;background:#000;transform-origin:0 0;filter:none;
  transition:transform .8s cubic-bezier(.5,0,.15,1)}
.g-theatre .g-rail{position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  width:min(1000px,calc(100% - 24px));margin:0;padding:6px 10px;border-radius:12px;
  background:rgba(11,6,20,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(255,201,77,.16),0 12px 30px rgba(0,0,0,.5);transition:opacity .3s}
.g-theatre.idle{cursor:none}
.g-theatre.idle .g-rail,.g-theatre.entering .g-rail{opacity:0;pointer-events:none}
.g-rail .home{display:none}
.g-theatre .g-rail .home{display:inline-block}
@media(prefers-reduced-motion:reduce){.g-theatre::before,.g-theatre video.filling,.g-theatre .g-rail{transition:none}}

/* ── the curtain: a closed pair of panels across the opening, behind the tied drapes and the booth
   front. They part to the sides, gathering as they go, under the ident (Josh, 29 Oct), and close
   again on the end card. ── */
.g-booth .g-close{position:absolute;top:calc(var(--sy) - 1.5%);height:calc(var(--sh) + 2.5%);width:calc(var(--sw) / 2 + 1.2%);
  background:url("/assets/pictures/tent/curtain-tile.webp") repeat-x;background-size:auto 100%;pointer-events:none;
  transition:transform .62s cubic-bezier(.6,0,.3,1),filter .62s ease}
.g-booth .g-close.l{left:calc(var(--sx) - 1%);transform-origin:0 50%;box-shadow:inset -8px 0 14px rgba(0,0,0,.5),1px 0 0 var(--brass-d)}
.g-booth .g-close.r{right:calc(var(--sx) - 1%);transform-origin:100% 50%;background-position:right top;box-shadow:inset 8px 0 14px rgba(0,0,0,.5),-1px 0 0 var(--brass-d)}
.g-booth[data-state="playing"] .g-close,.g-booth[data-state="paused"] .g-close{transform:scaleX(.1);filter:brightness(.7)}
.g-booth[data-state="open"] .g-close{display:none}
@media(prefers-reduced-motion:reduce){.g-booth .g-close{transition:opacity .3s}.g-booth[data-state="playing"] .g-close,.g-booth[data-state="paused"] .g-close{transform:none;opacity:0}}

/* ── the house lights: the dark over the page around the booth (the booth's own rect is the hole),
   and inside the booth the front, drapes, curtain and plaque fade to black, so nothing covers
   the frame once the lights are down ── */
.g-house{position:fixed;z-index:999;pointer-events:none;box-shadow:0 0 0 200vmax rgba(0,0,0,0);transition:box-shadow .9s ease-in-out}
.g-house.down{box-shadow:0 0 0 200vmax #000}
.g-house[hidden]{display:none}
.g-booth::before{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity .9s ease-in-out;pointer-events:none}
.g-booth.g-dark::before{opacity:1}
.g-booth.g-dark .g-lay,.g-booth.g-dark .g-hang,.g-booth.g-dark .g-drape,.g-booth.g-dark .g-close,.g-booth.g-dark .g-plaque,.g-booth.g-dark .g-over{opacity:0;transition:opacity .9s ease-in-out}
.g-booth.g-lightup .g-lay,.g-booth.g-lightup .g-hang,.g-booth.g-lightup .g-drape,.g-booth.g-lightup .g-close,.g-booth.g-lightup .g-plaque,.g-booth.g-lightup .g-over{transition:opacity .9s ease-in-out}
@media(prefers-reduced-motion:reduce){.g-house,.g-booth::before,.g-booth.g-dark .g-lay,.g-booth.g-dark .g-drape{transition:none}}

/* ── the booth's words and buttons, two looks (Josh, 29 Oct) ── */
.g-booth .g-over .g-plate{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%}
/* C: brass on the velvet, the words lettered to read over it */
.g-look-c .g-booth .g-over .k{font-size:13px;font-weight:700;letter-spacing:.26em;color:#FFD873;
  text-shadow:0 0 2px rgba(11,6,20,.95),0 2px 4px rgba(11,6,20,.95),0 0 18px rgba(11,6,20,.9)}
.g-look-c .g-booth .g-over .t{text-shadow:0 0 3px rgba(11,6,20,.9),0 3px 8px rgba(11,6,20,.9),0 0 26px rgba(11,6,20,.85)}
.g-look-c .g-booth .g-over .hint{color:#E6DAF2;font-weight:700;text-shadow:0 0 2px rgba(11,6,20,.95),0 2px 6px rgba(11,6,20,.95)}
/* crisp brass (Josh, 29 Oct 14:43): a bright face, a lit top edge and a dark lip, then a dark
   rim and a tight shadow so it lifts clean off the velvet */
.g-look-c .g-booth .g-over .g-lever{min-height:50px;padding:0 26px;font-size:13px;font-weight:700;letter-spacing:.16em;color:#160B2E;text-shadow:none;
  background:linear-gradient(180deg,#FFE39A 0%,#FFD060 38%,#FFC94D 62%,#F2B63E 100%);
  box-shadow:inset 0 1px 0 rgba(255,250,232,.9),inset 0 -2px 0 rgba(138,97,11,.55),
    0 0 0 1px #6B4A0E,0 0 0 3px rgba(11,6,20,.92),0 3px 0 3px rgba(11,6,20,.92),0 6px 10px 2px rgba(0,0,0,.55),0 16px 32px rgba(0,0,0,.5)}
.g-look-c .g-booth .g-over .g-lever:hover{background:linear-gradient(180deg,#FFEAB0 0%,#FFD670 38%,#FFCF5C 62%,#F5BC48 100%)}
.g-look-c .g-booth .g-over .g-lever:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,250,232,.7),inset 0 -1px 0 rgba(138,97,11,.55),
    0 0 0 1px #6B4A0E,0 0 0 3px rgba(11,6,20,.92),0 1px 0 3px rgba(11,6,20,.92),0 4px 8px 2px rgba(0,0,0,.5)}
.g-look-c .g-booth .g-over .g-quiet{min-height:50px;padding:0 22px;font-size:13px;font-weight:700;letter-spacing:.16em;color:#FFEDBE;
  background:rgba(14,8,26,.9);border:1px solid #D69A22;
  box-shadow:inset 0 1px 0 rgba(255,237,190,.12),0 0 0 2px rgba(11,6,20,.92),0 6px 10px 2px rgba(0,0,0,.5),0 16px 32px rgba(0,0,0,.45)}
.g-look-c .g-booth .g-over .g-quiet:hover{background:rgba(40,24,66,.9)}
/* A: a dark card with a brass hairline, the magenta lever on it */
.g-look-a .g-booth .g-over .g-plate{padding:clamp(16px,2.6cqw,28px) clamp(20px,3.6cqw,40px);border-radius:12px;background:rgba(14,8,26,.86);
  box-shadow:0 0 0 1px rgba(255,201,77,.34),0 20px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,240,205,.14)}
.g-look-a .g-booth .g-over .k{font-size:12px;font-weight:600}
@media(max-width:719px){
  .g-booth[data-shape="tall"] .g-over.pre .g-lever{width:auto}
  .g-look-c .g-booth .g-over .g-lever,.g-look-c .g-booth .g-over .g-quiet{font-size:12px;letter-spacing:.12em;padding:0 16px}
  .g-look-c .g-booth .g-over .k{font-size:12px}
  .g-booth[data-shape="tall"] .g-over{padding:0 4%}
  .g-look-a .g-booth[data-shape="tall"] .g-over .g-plate{padding:16px 10px;width:100%}
  .g-booth[data-shape="tall"] .g-over .g-lever{font-size:11px;letter-spacing:.12em;padding:0 14px;max-width:100%}
}

/* ── the captions (Josh, 29 Oct): drawn by player.js, typed like the freight record in the film
   (look B: an 1890s typewriter face in pale cream), set low, each word coming in as it is spoken.
   When the controls are up they lift clear of them (--lift, set by the player). ── */
.g-cc{position:fixed;z-index:1001;pointer-events:none;font-family:"Special Elite","Courier New",ui-monospace,monospace;font-weight:400;
  line-height:1.3;color:#FFEDBE;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 12px rgba(0,0,0,.5)}
.g-cc .blk{position:absolute;left:5%;right:5%;bottom:4.5%;transform:translateY(calc(-1 * var(--lift,0px)));transition:transform .3s ease}
.g-cc.tall .blk{bottom:auto;top:79%;transform:translateY(calc(-50% - var(--lift,0px)))}
.g-cc[hidden]{display:none}
.g-cc .ln{display:block}
.g-cc .w{opacity:0;transition:opacity .22s ease-out}
.g-cc .w.in{opacity:1}
@media(prefers-reduced-motion:reduce){.g-cc .w,.g-cc .blk{transition:none}}