/* ══════════════════════════════════════════════════════════════════════
   DON J ORIGINALS · LA MARQUESINA — /don-j-originals · 2026-08-30

   Full-screen frontage. Five surfaces, each its own viewport:
     1 the marquee over the street      4 the lobby wall (cast)
     2 the wall of glass cases          5 the box office
     3 the case, opened full-screen

   The mechanic that carries the page: the frontage tells you everything
   about a film except what it teaches. The brass plate under each case
   is engraved "— — —" until you have watched it.

   The marquee also carries the language rail. Films run in Spanish today;
   the other four screens are dark and say so. Nothing on this page says
   "learn Spanish" — the catalogue is Spanish, the promise is a language.

   Brand system only: #140F0B ground, cream #F6EFE4, gold #C9A227, the
   120° brown→olive gradient, Outfit. No bright yellow — every bulb and
   every filament is gold held at low intensity.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#0B0908;
  --bg-2:#141010;
  --cream:#F6EFE4;
  --c1:rgba(246,239,228,.72);
  --c2:rgba(246,239,228,.5);
  --c3:rgba(246,239,228,.32);
  --brown:#A0694B;
  --olive:#8B9556;
  --brick:#B5654A;
  --gold:#C9A227;
  --line:rgba(246,239,228,.09);
  --grad:linear-gradient(120deg,#A0694B,#8B9556);
  --brass:linear-gradient(180deg,#6B5433 0%,#3E3020 38%,#2A2015 62%,#4E3D26 100%);
  --font:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --gut:clamp(20px,4vw,72px);

  --c-antes:url("https://ielcxcwrhpfvqllewyvi.supabase.co/storage/v1/object/public/app-images/films/antes-cover.jpg");
  --c-dos:url("https://ielcxcwrhpfvqllewyvi.supabase.co/storage/v1/object/public/app-images/films/dos-cover.jpg");
  --c-mila:url("https://ielcxcwrhpfvqllewyvi.supabase.co/storage/v1/object/public/app-images/films/mila-cover.jpg");
  --c-prep:url("https://ielcxcwrhpfvqllewyvi.supabase.co/storage/v1/object/public/app-images/films/prep-cover.jpg");
  --p-jezabel:url("https://ielcxcwrhpfvqllewyvi.supabase.co/storage/v1/object/public/character-images/spanish/jezabel-v2-square-full.jpg");
  --p-donj:url("https://ielcxcwrhpfvqllewyvi.supabase.co/storage/v1/object/public/character-images/spanish/don-joaquin-v2-square-full.jpg");
  --p-carmen:url("https://ielcxcwrhpfvqllewyvi.supabase.co/storage/v1/object/public/character-images/spanish/carmen-v2-square-full.jpg");
  --p-raul:url("https://ielcxcwrhpfvqllewyvi.supabase.co/storage/v1/object/public/character-images/spanish/raul-v2-square-full.jpg");
  --p-sofia:url("https://ielcxcwrhpfvqllewyvi.supabase.co/storage/v1/object/public/character-images/spanish/sofia-dominguez-v2-square-full.jpg");
  --p-santiago:url("https://ielcxcwrhpfvqllewyvi.supabase.co/storage/v1/object/public/character-images/spanish/santiago-v2-square-full.jpg");
  --p-luis:url("https://ielcxcwrhpfvqllewyvi.supabase.co/storage/v1/object/public/character-images/spanish/luis-v2-square-full.jpg");
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{background:var(--bg);color:var(--cream);font-family:var(--font);font-weight:300;
  font-size:19px;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* Poster art: purpose-shot one-sheets, clean — no watermark, no burned-in
   subtitles, so no crop window. They fill the case exactly. */
.poster{position:absolute;inset:0;background-size:cover;background-position:center;
  background-repeat:no-repeat}
.p-antes{background-image:var(--c-antes)}
.p-dos{background-image:var(--c-dos)}
.p-mila{background-image:var(--c-mila)}
.p-prep{background-image:var(--c-prep)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kick{font-size:11px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}

.rise{opacity:0;transform:translateY(20px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.32s}
.d4{transition-delay:.46s}.d5{transition-delay:.62s}.d6{transition-delay:.8s}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* ══ 1 · THE FRONTAGE ════════════════════════════════════════════════
   Full screen. A dark street, one lit sign, light on the pavement. */
.front{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:104px var(--gut) 0;overflow:hidden;
  background:
    radial-gradient(80% 55% at 50% 96%, rgba(201,162,39,.10), transparent 62%),
    linear-gradient(180deg,#080706 0%,#0C0A09 42%,#0A0807 100%)}
/* the building behind the sign — bands of dark masonry, barely there */
.front::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:1;
  background:
    repeating-linear-gradient(180deg, rgba(246,239,228,.030) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(90deg, rgba(246,239,228,.020) 0 1px, transparent 1px 118px)}
/* haze in the air around the sign */
.front::after{content:"";position:absolute;left:50%;top:46%;width:min(1500px,130%);height:74vh;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(48% 46% at 50% 50%, rgba(201,162,39,.16), rgba(160,105,75,.07) 46%, transparent 76%);
  filter:blur(6px)}

.sign-wrap{position:relative;z-index:2;width:100%;max-width:1180px}

/* The marquee: a metal casing with a lit panel inside it. */
.marquee{position:relative;border-radius:7px;padding:19px;
  background:
    linear-gradient(180deg,#7A6A52 0%,#3A3227 6%,#221C16 22%,#1D1813 78%,#3A3227 94%,#6B5C47 100%),
    linear-gradient(90deg,#241E18,#2E271F 18%,#241E18 50%,#2E271F 82%,#241E18);
  box-shadow:
    0 60px 120px rgba(0,0,0,.8),
    0 0 90px rgba(201,162,39,.14),
    inset 0 1px 0 rgba(246,239,228,.40),
    inset 0 -1px 0 rgba(0,0,0,.6),
    inset 1px 0 0 rgba(246,239,228,.10),
    inset -1px 0 0 rgba(246,239,228,.10)}
/* the sign hangs off the building on two brackets */
.marquee::before,.marquee::after{content:"";position:absolute;top:-64px;width:5px;height:64px;
  background:linear-gradient(180deg,rgba(246,239,228,0),rgba(246,239,228,.16) 40%,#3A3227);
  border-radius:2px 2px 0 0}
.marquee::before{left:16%}
.marquee::after{right:16%}
.panel{position:relative;border-radius:3px;overflow:hidden;text-align:center;
  padding:clamp(28px,3.6vw,48px) clamp(22px,4vw,60px) clamp(24px,3vw,38px);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201,162,39,.16), transparent 58%),
    linear-gradient(180deg,#1A130D,#0E0A07);
  box-shadow:inset 0 0 90px rgba(201,162,39,.10), inset 0 0 0 1px rgba(201,162,39,.16)}

/* Bulb rails. Individual filaments, each with its own drift. */
.rail{position:absolute;left:0;right:0;display:flex;justify-content:space-between;
  padding:0 10px;z-index:3;pointer-events:none}
.rail.t{top:5px}
.rail.b{bottom:5px}
.rail i{display:block;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 42% 38%, #F7E9BE 0 28%, var(--gold) 52%, #6B5416 100%);
  box-shadow:0 0 9px 2px rgba(201,162,39,.55), 0 0 22px 6px rgba(201,162,39,.20);
  animation:filament 6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes filament{0%,100%{opacity:1}38%{opacity:.62}52%{opacity:.95}74%{opacity:.72}}
@media (prefers-reduced-motion:reduce){.rail i{animation:none}}

.sign-kick{color:rgba(201,162,39,.9);letter-spacing:.36em}
.sign-title{margin-top:clamp(14px,2vw,22px);font-weight:200;
  font-size:clamp(40px,8.2vw,132px);letter-spacing:-.04em;line-height:.94;color:#FFFBF2;
  text-shadow:0 0 46px rgba(201,162,39,.34), 0 0 100px rgba(201,162,39,.16), 0 2px 0 rgba(0,0,0,.6)}
.sign-title em{font-style:normal;color:var(--gold);
  text-shadow:0 0 54px rgba(201,162,39,.6), 0 0 110px rgba(201,162,39,.28)}
.sign-strap{margin:clamp(16px,2.2vw,26px) auto 0;max-width:56ch;font-size:clamp(16px,1.5vw,20px);
  color:rgba(246,239,228,.76)}
.sign-strap b{font-weight:400;color:#FFFBF2}

/* The language rail — the marquee lists what is showing and what is dark. */
.langs{margin-top:clamp(22px,3vw,34px);padding-top:clamp(18px,2.4vw,28px);
  border-top:1px solid rgba(246,239,228,.14);
  display:flex;justify-content:center;gap:clamp(8px,1.4vw,18px);flex-wrap:wrap}
.lang{position:relative;border-radius:3px;padding:9px 16px 8px;min-width:104px;
  background:linear-gradient(180deg,#171009,#0D0907);
  border:1px solid rgba(246,239,228,.08);text-align:center}
.lang .n{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,239,228,.34)}
.lang .s{margin-top:4px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(246,239,228,.24)}
.lang.on{background:linear-gradient(180deg,#2A1F0D,#150F08);border-color:rgba(201,162,39,.5);
  box-shadow:0 0 26px rgba(201,162,39,.28), inset 0 1px 0 rgba(201,162,39,.28)}
.lang.on .n{color:#FFF6DE;text-shadow:0 0 18px rgba(201,162,39,.6)}
.lang.on .s{color:var(--gold)}

.pavement{position:absolute;left:50%;bottom:0;width:min(1400px,120%);height:34vh;z-index:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 100% at 50% 100%, rgba(201,162,39,.16), rgba(160,105,75,.06) 44%, transparent 72%)}
.front-foot{position:relative;z-index:2;margin-top:clamp(26px,4vh,52px);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px;padding-bottom:clamp(28px,5vh,64px)}
.cta{display:inline-flex;align-items:center;justify-content:center;padding:17px 38px;border-radius:10px;
  background:var(--grad);color:#fff;font-size:17px;box-shadow:0 18px 40px rgba(0,0,0,.55);
  transition:transform .25s,box-shadow .25s}
.cta:hover{transform:translateY(-2px);box-shadow:0 24px 52px rgba(0,0,0,.62)}
.fine{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--c3)}

/* ══ 2 · THE WALL OF CASES ═══════════════════════════════════════════ */
.wall{position:relative;min-height:100vh;min-height:100svh;padding:clamp(56px,9vh,110px) var(--gut);
  display:flex;flex-direction:column;justify-content:center;
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(201,162,39,.07), transparent 62%),
    linear-gradient(180deg,#0A0807,#0F0C0A 50%,#0A0807)}
.wall::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(180deg, rgba(246,239,228,.02) 0 1px, transparent 1px 92px)}
.wall-in{position:relative;z-index:2;max-width:1240px;margin:0 auto;width:100%}
.wall-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--line)}
.wall-head h2{font-weight:200;font-size:clamp(26px,3.4vw,48px);letter-spacing:-.03em;line-height:1.04}
.salas{display:flex;gap:clamp(14px,2vw,30px);flex-wrap:wrap}
.salas div{font-size:13px;color:var(--c2)}
.salas div b{display:block;font-weight:400;color:var(--cream);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;margin-bottom:4px}

.cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,32px);
  margin-top:clamp(28px,4vw,52px)}
/* Each case has its own lamp above it. */
.case{position:relative;padding-top:26px}
.case .lamp{position:absolute;left:50%;top:0;width:74%;height:64px;transform:translateX(-50%);
  pointer-events:none;opacity:.5;transition:opacity .45s;
  background:radial-gradient(60% 100% at 50% 0%, rgba(201,162,39,.34), transparent 72%)}
.case.lit .lamp,.case:hover .lamp{opacity:1}
.frame{position:relative;border-radius:3px;padding:8px 8px 0;background:var(--brass);
  box-shadow:0 30px 54px rgba(0,0,0,.66), inset 0 1px 0 rgba(246,239,228,.34),
             inset 0 -1px 0 rgba(0,0,0,.5);
  transition:transform .4s cubic-bezier(.2,.8,.25,1), box-shadow .4s}
.case[data-film]{cursor:pointer}
.case[data-film]:hover .frame,.case.lit .frame{transform:translateY(-8px);
  box-shadow:0 40px 68px rgba(0,0,0,.72), 0 0 54px rgba(201,162,39,.26),
             inset 0 1px 0 rgba(246,239,228,.5)}
.glass{position:relative;aspect-ratio:2/3;overflow:hidden;background:#080706}
.glass video{position:absolute;left:0;top:-8%;width:100%;height:143%;object-fit:cover;
  opacity:0;transition:opacity .6s}
.case.lit .glass video{opacity:1}
/* the pane: a raking sheen plus the dim of an unlit case */
.glass::after{content:"";position:absolute;inset:0;pointer-events:none;transition:background .5s;
  background:
    linear-gradient(108deg, rgba(246,239,228,.20) 0 9%, transparent 22% 58%, rgba(246,239,228,.09) 70%, transparent 84%),
    linear-gradient(180deg, rgba(8,7,6,.50), rgba(8,7,6,.70))}
.case.lit .glass::after,.case[data-film]:hover .glass::after{
  background:
    linear-gradient(108deg, rgba(246,239,228,.24) 0 9%, transparent 22% 58%, rgba(246,239,228,.11) 70%, transparent 84%),
    linear-gradient(180deg, rgba(8,7,6,.04), rgba(8,7,6,.20))}
.plate{padding:11px 9px 12px;text-align:center}
.plate .t{font-size:clamp(13px,1.35vw,18px);color:#F6EFE4;letter-spacing:.02em;line-height:1.2}
.plate .m{margin-top:5px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,239,228,.48);font-variant-numeric:tabular-nums}
/* the engraved brass plate holding the withheld column */
.brass{margin-top:8px;border-radius:2px;padding:8px 6px;text-align:center;background:var(--brass);
  box-shadow:inset 0 1px 0 rgba(201,162,39,.30), 0 6px 14px rgba(0,0,0,.45);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(246,239,228,.3);
  transition:color .5s,text-shadow .5s}
.brass.cut{color:var(--gold);letter-spacing:.14em;text-shadow:0 0 14px rgba(201,162,39,.4)}
.case.empty .frame{background:linear-gradient(180deg,#3A2F20,#1B1510);box-shadow:0 24px 44px rgba(0,0,0,.6)}
.case.empty .glass::after{background:
  linear-gradient(108deg, rgba(246,239,228,.10) 0 9%, transparent 22% 58%, rgba(246,239,228,.05) 70%, transparent 84%),
  linear-gradient(180deg, rgba(8,7,6,.70), rgba(8,7,6,.86))}
.case.empty .plate .t{color:rgba(246,239,228,.3);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.case.empty .lamp{opacity:.12}
.wall-foot{margin-top:clamp(24px,3vw,40px);display:flex;justify-content:space-between;gap:18px;
  flex-wrap:wrap;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--c3)}

/* ══ 3 · THE CASE, OPENED — full screen ══════════════════════════════ */
.house{position:fixed;inset:0;z-index:120;display:none;padding:0 0 clamp(40px,6vh,72px);
  background:rgba(6,5,4,.94);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  overflow-y:auto}
.house.on{display:block;animation:housein .5s cubic-bezier(.2,.85,.25,1) both}
@keyframes housein{from{opacity:0}to{opacity:1}}
.house-in{max-width:none;margin:0;display:flex;flex-direction:column;
  gap:clamp(20px,2.6vw,38px)}
/* As wide as the window allows while the whole frame still fits on screen —
   full bleed on a tall window, a hair inset on a short one, never cropped
   and never taller than the viewport. */
.house-in .screen{width:min(100vw, calc((100vh - 92px) * 16 / 9));
  margin:0 auto;border-radius:0;box-shadow:none}
.house-under{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(20px,3vw,52px);align-items:start;
  width:100%;max-width:1640px;margin:0 auto;padding:0 var(--gut)}
@media (max-width:900px){
  .house-under{grid-template-columns:minmax(0,1fr);gap:22px}
}
.house-close{position:fixed;top:clamp(14px,2vh,22px);right:clamp(14px,2vw,26px);z-index:130;
  background:rgba(8,7,6,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:8px;
  background:rgba(246,239,228,.06);border:1px solid rgba(246,239,228,.18);color:var(--cream);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;transition:.2s}
.house-close:hover{background:rgba(246,239,228,.12)}
.screen{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#000;
  box-shadow:0 0 0 1px rgba(246,239,228,.12), 0 50px 100px rgba(0,0,0,.8), 0 0 90px rgba(201,162,39,.10)}
.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
/* One play control over the poster. Once the film is running the native
   controls own the frame, so the overlay never comes back. */
.screen-play{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;border:0;background:rgba(8,7,6,.34);
  color:var(--cream);transition:background .3s,opacity .3s}
.screen-play:hover{background:rgba(8,7,6,.22)}
.screen.running .screen-play{opacity:0;pointer-events:none}
.screen-play .tri{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:rgba(246,239,228,.10);border:1px solid rgba(246,239,228,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 40px rgba(201,162,39,.28)}
.screen-play .tri::after{content:"";margin-left:5px;border-left:20px solid var(--cream);
  border-top:13px solid transparent;border-bottom:13px solid transparent}
.screen-play:hover .tri{background:rgba(246,239,228,.18)}
.screen-play .lbl{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(246,239,228,.82)}
.house-meta .n{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.house-meta h3{margin-top:10px;font-weight:200;font-size:clamp(28px,3.2vw,46px);letter-spacing:-.03em;line-height:1.02}
.house-meta .log{margin-top:16px;font-size:19px;color:var(--cream);max-width:44ch}
.house-meta .craft{margin-top:14px;font-size:16px;color:var(--c2);max-width:44ch}
.house-meta .fac{margin-top:20px;padding-top:15px;border-top:1px solid var(--line);font-size:14px;color:var(--c1)}
.house-meta .fac b{font-weight:400;color:var(--c3);margin-right:8px}
/* Before the film ends, the plate is visibly blank — the same withholding the
   cases do, carried into the player. */
.plateslot{position:relative}
.blank{border-radius:6px;padding:clamp(20px,2.4vw,32px);border:1px dashed rgba(246,239,228,.16);
  background:rgba(246,239,228,.02);transition:opacity .4s}
.plateslot.done .blank{display:none}
.blank .k{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--c3)}
.blank .dashes{margin-top:12px;font-size:clamp(19px,1.9vw,26px);font-weight:200;
  letter-spacing:.3em;color:rgba(246,239,228,.28)}
.blank .note{margin-top:14px;font-size:14px;color:var(--c3)}
/* the end card, printed on brass */
.card{margin-top:0;display:none;border-radius:6px;padding:clamp(20px,2.4vw,32px);
  background:linear-gradient(180deg,#171009,#0D0A07);
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.22), 0 24px 50px rgba(0,0,0,.55)}
.card.on{display:block;animation:cardin .55s cubic-bezier(.2,.85,.25,1) both}
@keyframes cardin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card .k{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--c3)}
.card .cn{margin-top:10px;font-size:clamp(19px,1.9vw,26px);font-weight:300;letter-spacing:-.015em;color:#FFF6DE}
.card .gr{width:56px;height:1px;background:var(--gold);opacity:.9;margin:16px 0}
.card .pay{font-weight:200;font-size:clamp(20px,2.1vw,32px);letter-spacing:-.02em;line-height:1.3}
.card .cols{display:grid;grid-template-columns:1fr 1px 1fr;gap:22px}
.card .cols .vr{background:rgba(246,239,228,.12)}
.card .cols h4{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--c3);margin-bottom:8px}
.card .cols p{font-size:17px;color:var(--c1);line-height:1.45}
.card .rat{display:flex;align-items:flex-end;gap:clamp(22px,3vw,40px)}
.card .rat .n{font-weight:200;font-size:clamp(42px,4.6vw,76px);line-height:.9;letter-spacing:-.03em}
.card .rat .l{margin-top:7px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--c3)}
.card .rat .v{font-size:14px;color:var(--c3);padding-bottom:10px}
.card .note{margin-top:16px;font-size:15px;color:var(--c2)}
.card .stk{display:flex;flex-direction:column;gap:5px}
.card .stk div{font-weight:200;font-size:clamp(16px,1.6vw,23px)}

/* ══ 4 · THE LOBBY (cast) ════════════════════════════════════════════ */
.lobby{position:relative;min-height:100vh;min-height:100svh;padding:clamp(56px,9vh,110px) var(--gut);
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(180deg,#0A0807,#100D0B 46%,#0A0807)}
.lobby-in{max-width:1360px;margin:0 auto;width:100%}
.lobby h2{margin-top:16px;font-weight:200;font-size:clamp(28px,4vw,60px);letter-spacing:-.03em;line-height:1.04}
.lobby p.l{margin-top:20px;max-width:58ch;color:var(--c1);font-size:18px}
.portraits{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);
  margin-top:clamp(30px,4vw,54px)}
.portrait{position:relative;padding-top:20px}
.portrait .lamp{position:absolute;left:50%;top:0;width:70%;height:48px;transform:translateX(-50%);
  pointer-events:none;opacity:.42;transition:opacity .4s;
  background:radial-gradient(60% 100% at 50% 0%, rgba(201,162,39,.3), transparent 72%)}
.portrait:hover .lamp{opacity:.95}
.portrait .fr{border-radius:2px;padding:6px 6px 0;background:var(--brass);
  box-shadow:0 20px 38px rgba(0,0,0,.6), inset 0 1px 0 rgba(246,239,228,.3);
  transition:transform .4s cubic-bezier(.2,.8,.25,1)}
.portrait:hover .fr{transform:translateY(-5px)}
.portrait .im{aspect-ratio:3/4;background-size:cover;background-position:center 18%}
.portrait .cap{padding:9px 4px 10px;text-align:center}
.portrait .cap .n{font-size:13px;color:var(--cream);line-height:1.2}
.portrait .cap .f{margin-top:3px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,239,228,.45)}
.lobby a.all{margin-top:clamp(26px,3vw,42px);display:inline-flex;align-items:center;gap:10px;
  font-size:15px;color:var(--cream);border-bottom:1px solid var(--line);padding-bottom:5px}
.lobby a.all:hover{border-color:var(--brown)}

/* ══ 5 · THE BOX OFFICE ══════════════════════════════════════════════ */
.box{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;
  padding:clamp(56px,9vh,110px) var(--gut);text-align:center;
  background:radial-gradient(70% 60% at 50% 50%, rgba(201,162,39,.09), transparent 66%), #080706}
.box-in{position:relative;z-index:2;max-width:820px}
.box h2{margin-top:18px;font-weight:200;font-size:clamp(32px,5.4vw,80px);letter-spacing:-.035em;line-height:1.02;
  color:#FFFBF2;text-shadow:0 0 40px rgba(201,162,39,.2)}
.box p{margin:22px auto 0;max-width:52ch;color:var(--c1);font-size:18px}
.box .cta{margin-top:34px}

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .cases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portraits{grid-template-columns:repeat(4,minmax(0,1fr))}
  .house-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:680px){
  body{font-size:18px}
  .nav ul a.hide-s{display:none}
  .nav ul{gap:18px}
  .cases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portraits{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wall,.lobby{min-height:auto}
  .card .cols{grid-template-columns:1fr;gap:16px}
  .card .cols .vr{display:none}
  .lang{min-width:88px;padding:8px 12px 7px}
  .lang .n{font-size:12px}
}