/* =====================================================================
   CinemaLux · home v3 "Twee deuren"                    /assets/v3/home.css
   One idea: you stand in the hallway in front of two closed doors. Behind door 2 the small room,
   behind door 6 the big room. A door opens when you ask for it (a tap, never the scroll), and you
   walk into the real room. The hallway is imagined (ChatGPT, from the real door photo) and labelled;
   every room picture is the real room.
   Motion rules: transforms and opacity only, no scroll scrubbing, no frame sequences, no zoom loops.
   Flags on <html> (inline script in the page head): js · motion (animations allowed) · stil (reduced
   motion or the Studio preview: everything static and visible).
   The door positions are pure CSS: .gang__vlak is a size container and --px is one image pixel of the
   cover-fitted hallway, so every door, light and numeral sits on the picture at any screen size.
   ===================================================================== */
:root{--koper:#E58A4A;--rose:#E2687A;--gang-donker:#0C0907;--ease-deur:cubic-bezier(.45,.05,.2,1)}
body.home3{background:var(--diep);color:var(--pleister)}
.home3 main{position:relative;z-index:1}

/* =====================================================================
   01 · DE GANG
   ===================================================================== */
.gang{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--gang-donker);isolation:isolate}
.gang__vlak{position:absolute;inset:0;container-type:size;--iw:941;--ih:1672;--vy:.33;--gang:url(/img/v3/gang-9x16-c.webp);
  --px:max(calc(100cqw / var(--iw)),calc(100cqh / var(--ih)))}
@media (min-aspect-ratio:5/4){ .gang__vlak{--iw:1672;--ih:941;--vy:.38;--gang:url(/img/v3/gang-16x9-c.webp)} }
.gang__beeld{position:absolute;inset:0;margin:0}
.gang__beeld img{width:100%;height:100%;object-fit:cover}

/* a door, a light under it and a numeral, all placed in picture pixels */
.deur,.licht{position:absolute;
  left:calc(50cqw + (var(--l) - .5) * var(--iw) * var(--px));
  top:calc(50cqh + (var(--t) - .5) * var(--ih) * var(--px));
  width:calc((var(--r) - var(--l)) * var(--iw) * var(--px));
  height:calc((var(--b) - var(--t)) * var(--ih) * var(--px))}
.d2{--l:.1881;--t:.1854;--r:.4336;--b:.5837}
.d6{--l:.5654;--t:.1854;--r:.8103;--b:.5837}
@media (min-aspect-ratio:5/4){
  .d2{--l:.3176;--t:.2062;--r:.4492;--b:.7152}
  .d6{--l:.5467;--t:.2072;--r:.677;--b:.7184}
}
.deur{z-index:2;display:block;color:var(--goud);text-decoration:none;-webkit-tap-highlight-color:transparent;
  perspective:calc(var(--ih) * var(--px) * 1.15);
  perspective-origin:calc((.5 - var(--l)) / (var(--r) - var(--l)) * 100%) calc((var(--vy) - var(--t)) / (var(--b) - var(--t)) * 100%)}
.deur__blad{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .75s var(--ease-deur);
  background:var(--gang) no-repeat;
  background-size:calc(var(--iw) * var(--px)) calc(var(--ih) * var(--px));
  background-position:calc(var(--l) * var(--iw) * var(--px) * -1) calc(var(--t) * var(--ih) * var(--px) * -1)}
/* hinges on the outer edges, handles on the inner edges (the Flow films open the doors this way) */
.d2 .deur__blad{transform-origin:0 50%}
.d6 .deur__blad{transform-origin:100% 50%}
/* the leaf turns away from the hallway lights: its face darkens */
.deur__schaduw{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .75s var(--ease-deur)}
/* 4 cm of door edge on the free side */
.deur__kant{position:absolute;top:0;bottom:0;width:4.2%;background:linear-gradient(#2a2420,#14100d)}
.d2 .deur__kant{right:0;transform-origin:100% 50%;transform:rotateY(-90deg)}
.d6 .deur__kant{left:0;transform-origin:0 50%;transform:rotateY(90deg)}
.deur__nr{position:absolute;left:0;right:0;top:19%;display:flex;flex-direction:column;align-items:center;gap:.5em;
  font-size:calc((var(--r) - var(--l)) * var(--iw) * var(--px) * .1);line-height:1;text-align:center}
.deur__nr b{font-family:var(--serif);font-weight:600;font-size:4.6em;line-height:.8;letter-spacing:0;
  background:linear-gradient(176deg,#F7DDB0 0%,#DCB67B 46%,#A07E4E 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .06em .08em rgba(0,0,0,.55))}
/* phone hallway: 2 and 6 are carved in the wall above the doors (in the picture) */
.deur__nr{display:none}
.deur__nr small{font:500 1.15em/1 var(--sans);letter-spacing:.02em;color:#E9CF9F;font-variant-numeric:tabular-nums}
/* hover: the door comes ajar, the light under it grows */
@media (hover:hover) and (pointer:fine){
  html.motion .d2:hover .deur__blad,html.motion .d2:focus-visible .deur__blad{transform:rotateY(11deg)}
  html.motion .d6:hover .deur__blad,html.motion .d6:focus-visible .deur__blad{transform:rotateY(-11deg)}
  html.motion .deur:hover .deur__schaduw{opacity:.18}
}
.deur:focus-visible{outline:2px solid var(--goud-licht);outline-offset:6px;border-radius:1px}

/* the light under each door (above the dark of the intro, so it shines first) */
.licht{z-index:4;pointer-events:none}
.licht i{position:absolute;left:-55%;right:-55%;top:calc(100% - 2px);height:58%;
  background:radial-gradient(ellipse 50% 100% at 50% 0%,var(--c) 0%,rgba(0,0,0,0) 70%);mix-blend-mode:screen;opacity:.55;transform-origin:50% 0}
.licht b{position:absolute;left:1%;right:1%;top:calc(100% - 3px);height:3px;border-radius:2px;background:var(--c2);filter:blur(1.5px);opacity:.9}
.licht.d2{--c:rgba(229,138,74,.62);--c2:#FFB774}
.licht.d6{--c:rgba(226,104,122,.6);--c2:#FF9AA6}
@keyframes adem{0%,100%{opacity:.5}50%{opacity:.72}}
html.motion .gang.is-aan .licht i{animation:adem 7s ease-in-out 1.83s infinite}
.licht.is-open i{opacity:1!important;transform:scaleY(1.7);transition:opacity .58s,transform .75s var(--ease-deur);animation:none!important}

/* the dark before the lights come up */
.gang__donker{position:absolute;inset:0;z-index:3;background:#060403;opacity:0;pointer-events:none}
html.motion .gang__donker{opacity:.9}
html.motion .gang.is-aan .gang__donker{opacity:0;transition:opacity 1.58s cubic-bezier(.3,.1,.2,1) .21s}

/* words: phone at the bottom over the carpet, desktop split under the doors */
.gang__scrim{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:3;pointer-events:none;
  background:linear-gradient(rgba(12,9,7,0),rgba(12,9,7,.72) 42%,rgba(12,9,7,.94))}
.gang__tekst{position:absolute;left:var(--g);right:var(--g);bottom:calc(16px + env(safe-area-inset-bottom));z-index:5;display:flex;flex-direction:column;gap:12px}
.gang h1{font-family:var(--serif);font-weight:500;text-transform:uppercase;font-size:clamp(40px,12.4vw,60px);line-height:.9;letter-spacing:.01em;color:var(--pleister);margin-left:-.04em}
.gang__lead{font-size:16px;line-height:1.5;color:#E3D9CE;max-width:34ch}
.gang__acts{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.gang__acts .btn{min-height:52px;padding:0 24px}
.gang__hint{font-size:14.5px;color:#CDBFB1}
.gang__live{min-height:22px;margin:0;font-size:14.5px;color:#CDBFB1;opacity:0;transition:opacity .6s}
.gang__live.is-aan{opacity:1}
.gang__live a{color:var(--goud-licht);text-underline-offset:3px;text-decoration-color:rgba(244,206,148,.45)}
html.motion .gang__tekst{opacity:0;transform:translateY(14px)}
html.motion .gang.is-aan .gang__tekst{opacity:1;transform:none;transition:opacity .83s var(--ease) 1.04s,transform 1s var(--ease) 1.04s}
.ai-label{margin:0;font-size:12.5px;line-height:1.4;color:rgba(238,231,222,.6)}
@media (min-aspect-ratio:5/4){
  .gang{min-height:600px}
  .gang__scrim{height:34%}
  .gang__tekst{left:var(--g);right:var(--g);bottom:clamp(26px,5vh,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:end;gap:20px 48px}
  .gang h1{font-size:clamp(52px,6.2vw,104px);grid-row:1 / span 3;align-self:end;line-height:.86}
  .gang__lead{font-size:17px;max-width:38ch}
  .gang__rechts{display:flex;flex-direction:column;gap:14px;max-width:420px}
}
@media (max-aspect-ratio:5/4){ .gang__rechts{display:contents} }

/* =====================================================================
   02 · ACHTER DE DEUREN: the rooms
   ===================================================================== */
.zaal{position:relative;background:var(--gang-donker)}
.zaal__beeld{position:relative;margin:0;overflow:hidden;background:#0a0807}
.zaal__beeld img{width:100%;height:100%;object-fit:cover}
.zaal h2{font-family:var(--serif);font-weight:500;text-transform:uppercase;line-height:.88;letter-spacing:.01em;color:var(--pleister)}
.zaal__tekst{display:flex;flex-direction:column;gap:14px}
.zaal__tekst>p{max-width:40ch}
.zaal__body{font-size:16.5px;line-height:1.55;color:#E3D9CE}
.zaal__prijs{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;font-size:15.5px;color:#CDBFB1}
.zaal__prijs b{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1;color:var(--goud-licht);font-variant-numeric:tabular-nums}
.zaal__promo{font-size:15px;font-weight:500;color:var(--goud-licht)}
.zaal__fijn{font-size:14px;line-height:1.5;color:#B9AC9F}
.zaal .btn{align-self:flex-start}
.zaal__terug{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;color:#CDBFB1;text-decoration:none}
.zaal__terug:hover{color:var(--pleister)}

/* both rooms on a phone: the picture fills the screen (the walk-in film ends on it) and stays while the
   words come over it */
.zaal__beeld picture{display:contents}
.zaal .zaal__beeld{position:sticky;top:0;height:100vh;height:100svh}
/* the shade under the words is its own layer: the film ends on the bare picture, the shade comes after */
.zaal__schaduw{position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(rgba(12,9,7,0),rgba(12,9,7,.55) 45%,rgba(12,9,7,.9));pointer-events:none}
.zaal .zaal__kop{position:relative;z-index:2;height:30vh;height:30svh;margin-top:-30vh;margin-top:-30svh;display:flex;align-items:flex-end;padding:0 var(--g) calc(96px + env(safe-area-inset-bottom))}
.zaal h2{font-size:clamp(52px,16vw,84px)}
.zaal--6 h2{letter-spacing:.06em}
.zaal .zaal__tekst{position:relative;z-index:2;padding:6px var(--g) 64px;background:linear-gradient(rgba(12,9,7,.9),var(--gang-donker) 60px)}
@media (min-width:900px) and (min-aspect-ratio:5/4){
  /* desktop: the room fills the screen (16:9, where the film ends), the words sit on its dark left side */
  .zaal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}
  .zaal .zaal__beeld{grid-column:1 / -1;grid-row:1;position:relative;height:100vh}
  .zaal__schaduw{inset:0;height:auto;background:linear-gradient(90deg,rgba(7,6,5,.84),rgba(7,6,5,.4) 44%,rgba(7,6,5,0) 68%)}
  .zaal .zaal__kop,.zaal .zaal__tekst{grid-column:1;grid-row:1;z-index:2;height:auto;margin:0;background:none;padding-left:var(--g);padding-right:3vw}
  .zaal .zaal__kop{align-self:start;padding-top:calc(var(--nav) + 9vh)}
  .zaal .zaal__tekst{align-self:end;padding-bottom:8vh}
  .zaal h2{font-size:clamp(64px,7.4vw,128px)}
}

/* =====================================================================
   04 · HET DOEK: the real screen; it switches on once when it comes into view
   ===================================================================== */
.doek3{position:relative;background:#09080A;padding:calc(var(--nav) + 10px) 0 64px}
.doek3__beeld{position:relative;margin:0;aspect-ratio:1672 / 941;overflow:hidden}
.doek3__beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.doek3--bar .doek3__beeld img{object-position:58% 62%}
.doek3__aan{opacity:0}
html.motion .doek3.is-aan .doek3__aan{opacity:1;transition:opacity 1.6s cubic-bezier(.3,.1,.2,1) .3s}
html.stil .doek3__aan,html:not(.js) .doek3__aan{opacity:1}
.doek3__tekst{display:flex;flex-direction:column;gap:14px;padding:30px var(--g) 0}
.doek3 h2{font-family:var(--serif);font-weight:500;text-transform:uppercase;line-height:.92;font-size:clamp(40px,11.5vw,84px);color:var(--pleister)}
.doek3 p{max-width:42ch;color:#E3D9CE;font-size:16.5px;line-height:1.55}
.doek3__feiten{display:flex;flex-wrap:wrap;gap:8px 26px;font-family:var(--serif);font-weight:500;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--goud-licht)}
.doek3 .doek3__klein{font-size:15px;color:#B9AC9F}
@media (min-width:900px) and (min-aspect-ratio:5/4){
  .doek3{padding:0;display:grid}
  .doek3__beeld{grid-area:1 / 1;aspect-ratio:auto;height:100vh}
  .doek3__beeld::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(rgba(9,8,10,0),rgba(9,8,10,.82))}
  .doek3__tekst{grid-area:1 / 1;align-self:end;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:10px 56px;padding:0 var(--g) 6vh}
  .doek3 h2{grid-row:1 / span 3;font-size:clamp(54px,5.4vw,96px)}
}

/* =====================================================================
   04b · DEZE WEEK IN DE ZAAL: a programme on the dark wall under the screen; each film hangs from a
   thin copper light line, like the LED around their screen. Text only.
   ===================================================================== */
.programma{background:#09080A;color:var(--pleister);padding:clamp(56px,10vh,110px) var(--g) clamp(64px,11vh,120px)}
.programma__kop{display:flex;flex-direction:column;gap:12px;max-width:640px;margin-bottom:clamp(30px,6vh,56px)}
.programma h2{font-family:var(--serif);font-weight:500;text-transform:uppercase;font-size:clamp(34px,8.6vw,76px);line-height:.95;color:var(--pleister)}
.programma__kop p{color:#CDBFB1;font-size:16.5px;line-height:1.55;max-width:44ch}
.programma .programma__voorbeeld{display:inline-flex;align-self:flex-start;font-size:13.5px;color:var(--goud-licht)}
.programma__lijst{display:grid;gap:clamp(28px,5vh,44px);grid-template-columns:1fr}
.film3{position:relative;padding-top:22px}
.film3::before{content:"";position:absolute;left:0;top:0;width:min(220px,60%);height:2px;border-radius:2px;background:linear-gradient(90deg,#FFB774,rgba(229,138,74,.25) 80%,rgba(229,138,74,0));box-shadow:0 0 14px rgba(229,138,74,.55)}
.film3__meta{display:flex;gap:14px;font-size:14px;color:#B9AC9F}
.film3__meta span+span{color:var(--goud-licht);font-variant-numeric:tabular-nums}
.film3 h3{margin-top:8px;font-family:var(--serif);font-weight:500;text-transform:uppercase;font-size:clamp(26px,7vw,40px);line-height:1;color:var(--pleister);overflow-wrap:anywhere}
.film3__regel{margin-top:10px;color:#E3D9CE;font-size:16px;line-height:1.5;max-width:36ch}
@media (min-width:900px){
  .programma__lijst{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 4vw}
}

/* =====================================================================
   05 · DE KAART: set like end credits, item to the left of the centre line, price to the right
   ===================================================================== */
.kaart3{background:var(--zaal);color:var(--pleister);padding:clamp(72px,12vh,140px) var(--g) clamp(64px,10vh,120px)}
.kaart3__kop{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:clamp(40px,7vh,72px)}
.kaart3 h2{font-family:var(--serif);font-weight:500;text-transform:uppercase;font-size:clamp(44px,8vw,96px);line-height:.9;color:var(--goud)}
.kaart3__kop p{color:#AEB5C1;font-size:15.5px;max-width:40ch}
.kaart3__rol{max-width:760px;margin:0 auto}
/* Kevin's lounge and a drink (25 Oct): two real photos above the menu, lounge wide, the tray narrow */
.kaart3__beelden{display:grid;grid-template-columns:1.62fr 1fr;gap:12px;max-width:1100px;margin:0 auto clamp(44px,7vh,72px)}
.kaart3__beelden figure{margin:0;display:flex;flex-direction:column;gap:8px}
.kaart3__beelden img{width:100%;height:clamp(240px,44vw,460px);object-fit:cover;border-radius:2px}
.kaart3__lounge img{object-position:60% 55%}
.kaart3__drink img{object-position:50% 62%}
.kaart3__beelden figcaption{font-size:13px;color:#8E97A6}
@media (max-width:520px){ .kaart3__beelden{gap:8px} .kaart3__beelden img{height:62vw} .kaart3__lounge img{object-position:66% 55%} }
.kaart3 h3{text-align:center;font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--goud);margin:44px 0 16px}
.kaart3 h3:first-child{margin-top:0}
.kaart3 li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 28px;padding:6px 0;font-size:16.5px;line-height:1.35}
.kaart3 li i{display:none}
.kaart3 li span:first-child{text-align:right}
.kaart3 li span:last-child{color:var(--goud-licht);font-variant-numeric:tabular-nums}
.kaart3__voet{text-align:center;margin-top:48px;font-size:13.5px;color:#8E97A6}
@media (max-width:520px){ .kaart3 li{gap:0 16px;font-size:15px} }

/* =====================================================================
   06 · CADEAU (in the light)
   ===================================================================== */
.cadeau3{background:var(--pleister);color:var(--zaal);padding:clamp(72px,12vh,130px) var(--g);display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.cadeau3 img{width:64px}
.cadeau3 h2{font-family:var(--serif);font-weight:500;text-transform:uppercase;font-size:clamp(36px,7vw,76px);line-height:.95}
.cadeau3 p{max-width:40ch;color:var(--inkt2);font-size:17px}

/* =====================================================================
   07 · THUIS, SINDS 2003
   ===================================================================== */
.thuis3{background:var(--kalk);color:var(--zaal);padding:clamp(64px,10vh,120px) 0 clamp(64px,10vh,120px)}
.thuis3__groot{font-family:var(--serif);font-weight:500;text-transform:uppercase;font-size:clamp(56px,15.5vw,230px);line-height:.85;letter-spacing:.01em;padding:0 var(--g);margin-bottom:clamp(24px,4vh,48px)}
.thuis3__beeld{margin:0}
.thuis3__beeld img{width:100%;aspect-ratio:3 / 2;object-fit:cover}
.thuis3__beeld figcaption{padding:10px var(--g) 0;font-size:13.5px;color:var(--inkt2)}
.thuis3__tekst{display:flex;flex-direction:column;gap:16px;padding:34px var(--g) 0;max-width:640px}
.thuis3__tekst>p{color:var(--inkt2);font-size:16.5px;line-height:1.6}
.thuis3 .thuis3__kick{color:var(--brons);font-weight:500;font-size:15px}
.thuis3 .thuis3__lead{font-family:var(--serif);font-weight:500;text-transform:uppercase;font-size:clamp(26px,6vw,40px);line-height:1.05;color:var(--zaal)}
.thuis3__cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:10px 0 4px}
.thuis3__cijfers b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(34px,9vw,64px);line-height:.9}
.thuis3__cijfers div>span{display:block;margin-top:6px;font-size:13.5px;line-height:1.35;color:var(--inkt2)}
.thuis3 .btn--line{align-self:flex-start;padding-left:0}
@media (min-width:900px){
  .thuis3{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);align-items:start}
  .thuis3__groot{grid-column:1 / -1}
  .thuis3__beeld{padding-left:var(--g)}
  .thuis3__beeld figcaption{padding-left:0}
  .thuis3__tekst{padding:0 var(--g) 0 4vw}
}

/* =====================================================================
   08 · TOT IN DE DRABSTRAAT
   ===================================================================== */
.slot3{background:var(--diep);color:var(--pleister)}
.slot3__beeld{margin:0;height:72svh;overflow:hidden}
.slot3__beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.slot3__tekst{display:flex;flex-direction:column;gap:18px;padding:34px var(--g) 64px}
.slot3 h2{font-family:var(--serif);font-weight:500;text-transform:uppercase;font-size:clamp(40px,11vw,84px);line-height:.92;color:var(--goud)}
.slot3 .slot__rows{display:flex;flex-direction:column;font-size:17px}
.slot3 .slot__rows a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;align-self:flex-start;border-bottom:1px solid transparent}
.slot3 .slot__rows a:hover{border-color:currentColor}
.slot3 .slot__live{min-height:1.5em;margin:0;color:#C9CED7;font-size:15.5px}
.slot3 .slot__live a{color:var(--goud-licht);text-underline-offset:3px}
.slot3__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.slot3 .btn--line{color:var(--pleister)}
.slot3 .reviews ul{display:grid;gap:16px}
@media (min-width:900px) and (min-aspect-ratio:5/4){
  .slot3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}
  .slot3__beeld{height:100vh}
  .slot3__tekst{align-self:center;padding:0 var(--g) 0 5vw}
}

/* phone bar */
.gsmbar{display:none}
@media (max-width:899px){
  .gsmbar{display:flex;position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:50;transform:translateY(170%);transition:transform .55s var(--ease)}
  .gsmbar.is-on{transform:none}
  .gsmbar .btn{width:100%;box-shadow:0 18px 40px -14px rgba(0,0,0,.6)}
}

/* the whole big room, below its words (Kevin's own photo, screen off) */
.zaal__overzicht{position:relative;z-index:2;margin:0;padding:0 var(--g) 64px;background:var(--gang-donker)}
.zaal__overzicht img{width:100%;aspect-ratio:4 / 3;object-fit:cover}
.zaal__overzicht figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:#B9AC9F}
@media (min-width:900px) and (min-aspect-ratio:5/4){
  .zaal__overzicht{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:0 4vw;align-items:end;padding:clamp(56px,9vh,96px) var(--g)}
  .zaal__overzicht figcaption{grid-column:1;grid-row:1;font-size:16px;max-width:30ch}
  .zaal__overzicht img{grid-column:2;grid-row:1}
}

/* =====================================================================
   THE PORTAL: one fixed layer that carries the opened door into the room (assets/v3/home.js)
   ===================================================================== */
.portaal{position:fixed;inset:0;z-index:55;pointer-events:none;overflow:hidden;contain:strict}
.portaal__kamer{position:absolute;max-width:none;will-change:transform}
.portaal__blad{position:absolute;transform-style:preserve-3d;will-change:transform,opacity}

/* the walk-in film: invisible until its first frame plays (that frame is the hallway already on screen) */
.film{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:0;background:transparent}
.film.is-aan{opacity:1;transition:opacity .29s ease-out}
.film__beeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html.film-bezig,html.film-bezig body{overflow:hidden;overscroll-behavior:none;touch-action:none}

/* calm path (reduced motion, Studio): everything visible, no intro */
html.stil .gang__donker{display:none}
html.stil .gang__tekst{opacity:1;transform:none}
/* 25 Oct: under "voor zes" the seats as a small brass group with one line, instead of a second photo */
.zaal__overzicht--zetels{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding:clamp(40px,7vh,72px) var(--g) clamp(48px,8vh,80px);border-top:1px solid rgba(217,182,123,.18)}
.zaal__overzicht--zetels img{width:min(220px,56vw);height:auto;aspect-ratio:auto;object-fit:contain}
.zaal__overzicht--zetels figcaption{margin:0;max-width:34ch;font-family:var(--serif);font-weight:500;font-size:clamp(18px,4.6vw,22px);line-height:1.35;letter-spacing:.02em;color:var(--pleister)}
@media (min-width:900px){
  .zaal__overzicht--zetels{display:flex;grid-template-columns:none}
  .zaal__overzicht--zetels img{width:300px;grid-column:auto;grid-row:auto}
  .zaal__overzicht--zetels figcaption{grid-column:auto;grid-row:auto;max-width:40ch;font-size:24px}
}