/* ============================================================================
   THE LANDING — a repertory cinema lobby.
   Standalone: loads none of style.css. The App is a cream paper dossier; this
   is the room you stand in before you open one, so it is deliberately the
   inverse — tungsten light on an oxblood wall.

   Two universes = two features now showing, each in its own illuminated poster
   case. Choosing a board IS choosing a universe; the ticket carries it to the
   App as ?universe=…
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;700;800&family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --wall:#2A1416;        /* oxblood lobby wall */
  --wall-deep:#1B0C0E;
  --case:#3A1D1F;        /* poster case interior */
  --case-lit:#4A2629;
  --tungsten:#F5D48A;    /* marquee bulb light — warm, never neon */
  --brass:#B08A46;
  --paper:#FFF6E2;       /* poster stock */
  --ink:#F3E7D4;
  --ink-dim:#C3A894;
  --ticket:#E8543F;      /* stub red — the only saturated colour on the page */

  --font-poster:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-plate:'Space Mono', ui-monospace, monospace;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
*:focus-visible{outline:2px solid var(--tungsten);outline-offset:3px;}
html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(ellipse 120% 60% at 50% -8%, rgba(245,212,138,.18), transparent 62%),
    linear-gradient(180deg, var(--wall) 0%, var(--wall-deep) 100%);
  background-color:var(--wall);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font-body);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
/* Faint vertical velvet ribbing on the lobby wall. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:repeating-linear-gradient(90deg,
    rgba(0,0,0,.16) 0 2px, rgba(255,255,255,.015) 2px 9px);
}

.lobby{
  position:relative;z-index:1;
  width:100%;max-width:1500px;margin:0 auto;
  padding:clamp(28px,5vw,64px) clamp(16px,4vw,56px) 72px;
}

/* ---------- language toggle ---------- */
.l-lang{
  position:fixed;top:16px;right:16px;z-index:20;
  font-family:var(--font-plate);font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--tungsten);background:rgba(27,12,14,.82);
  border:1px solid rgba(176,138,70,.5);border-radius:999px;
  padding:7px 13px;min-width:42px;cursor:pointer;backdrop-filter:blur(4px);
  transition:border-color .2s,color .2s;
}
.l-lang:hover{border-color:var(--tungsten);color:var(--paper);}

/* ---------- the signature: marquee bulbs ----------
   A real strip of tungsten bulbs, each with its own phase offset, so the light
   crawls rather than blinking as one. This is the page's single flourish; the
   rest holds still on purpose. */
.bulbs{
  display:flex;justify-content:space-between;align-items:center;
  padding:0 14px;height:14px;pointer-events:none;
}
.bulbs i{
  width:6px;height:6px;border-radius:50%;
  background:var(--tungsten);
  box-shadow:0 0 6px 2px rgba(245,212,138,.55), 0 0 16px 5px rgba(245,212,138,.2);
  animation:glow 2.6s ease-in-out infinite;
  animation-delay:var(--d, 0s);
}
@keyframes glow{
  0%,100%{opacity:.42;transform:scale(.86);}
  50%    {opacity:1;  transform:scale(1);}
}
@media (prefers-reduced-motion: reduce){
  .bulbs i{animation:none;opacity:.9;}
  html{scroll-behavior:auto;}
}

/* ---------- marquee ---------- */
.marquee{
  text-align:center;
  border:1px solid rgba(176,138,70,.34);
  border-radius:4px;
  background:linear-gradient(180deg, rgba(74,38,41,.72), rgba(42,20,22,.35));
  padding:12px 20px clamp(24px,3vw,34px);
  margin-bottom:clamp(26px,4vw,44px);
  box-shadow:0 30px 70px -50px #000, inset 0 1px 0 rgba(245,212,138,.14);
}
.marquee-plate{
  font-family:var(--font-plate);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--brass);margin:10px 0 12px;
}
.marquee-title{
  font-family:var(--font-poster);font-weight:800;
  font-size:clamp(38px,9vw,86px);line-height:.92;letter-spacing:.005em;
  text-transform:uppercase;color:var(--paper);
  text-shadow:0 0 26px rgba(245,212,138,.28);
}
.marquee-sub{
  max-width:52ch;margin:16px auto 0;
  color:var(--ink-dim);font-size:clamp(14px,1.6vw,16px);line-height:1.75;
}

/* ---------- the boards ----------
   One per universe. Stacked on a phone; side by side from 1000px, which is
   where the two-column brief pays off — the point is comparing them. */
.boards{
  display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,34px);
}
@media (min-width:1000px){
  .boards{grid-template-columns:1fr 1fr;}
}

.board{
  border:1px solid rgba(176,138,70,.36);
  border-radius:4px;
  background:linear-gradient(180deg, var(--case-lit), var(--case) 42%, #31191B);
  box-shadow:0 40px 90px -60px #000, inset 0 1px 0 rgba(245,212,138,.16);
  padding-top:10px;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
/* Glass sheen across the case, as on a real backlit poster box. */
.board::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(103deg, rgba(255,255,255,.07) 0 16%, transparent 30% 100%);
}
.board-inner{
  padding:clamp(20px,2.6vw,30px);
  display:flex;flex-direction:column;flex:1;
  position:relative;z-index:1;
}
.board-plate{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-plate);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  margin-bottom:14px;
}
.board-plate .reel{color:var(--brass);}
.board-plate .showing{
  color:var(--wall-deep);background:var(--tungsten);
  padding:3px 8px;border-radius:2px;font-weight:700;
}
.board-title{
  font-family:var(--font-poster);font-weight:800;
  font-size:clamp(30px,4.6vw,50px);line-height:.95;text-transform:uppercase;
  color:var(--paper);margin-bottom:6px;
}
.board-tag{
  font-family:var(--font-plate);font-size:12px;color:var(--ink-dim);
  margin-bottom:20px;letter-spacing:.02em;
}

/* ---------- poster strip ---------- */
.posters{
  display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:20px;
}
.poster{position:relative;border-radius:2px;overflow:hidden;background:#241012;}
.poster img{
  display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  /* Desaturated and dimmed so the case reads as lit from one side, and so four
     faces don't compete with the board title. */
  filter:grayscale(.28) contrast(1.04) brightness(.84);
  transition:filter .45s ease, transform .45s ease;
}
.poster::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, transparent 38%, rgba(20,8,10,.92) 100%);
}
.poster figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:8px 8px 9px;display:flex;flex-direction:column;gap:1px;
}
.poster figcaption b{
  font-family:var(--font-poster);font-weight:700;font-size:14px;line-height:1.05;
  text-transform:uppercase;color:var(--paper);
}
.poster figcaption span{
  font-family:var(--font-plate);font-size:9px;line-height:1.25;color:var(--tungsten);
}
.board:hover .poster img{filter:grayscale(0) contrast(1.02) brightness(.96);}
.poster:hover img{transform:scale(1.04);}

/* ---------- certificate plate ---------- */
.cert{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  border-top:1px solid rgba(176,138,70,.28);
  border-bottom:1px solid rgba(176,138,70,.28);
  padding:12px 0;margin-bottom:20px;
}
.cert dt{
  font-family:var(--font-plate);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass);margin-bottom:3px;
}
.cert dd{font-size:13px;color:var(--ink);line-height:1.35;}

/* ---------- ticket CTA ----------
   A torn stub: the perforation is a dashed border, and the stub half carries
   the only saturated colour on the page. */
.ticket{
  margin-top:auto;display:flex;align-items:stretch;text-decoration:none;
  border-radius:3px;overflow:hidden;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
  transition:transform .18s ease, box-shadow .18s ease;
}
.ticket:hover{transform:translateY(-2px);box-shadow:0 24px 48px -22px rgba(0,0,0,.95);}
.ticket:active{transform:translateY(0);}
.ticket-stub{
  flex:0 0 auto;display:flex;align-items:center;
  background:var(--ticket);color:#2A1416;
  font-family:var(--font-plate);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  padding:0 12px;
  border-right:2px dashed rgba(42,20,22,.42);
}
.ticket-main{
  flex:1;display:flex;align-items:center;justify-content:center;
  background:var(--paper);color:var(--wall-deep);
  font-family:var(--font-poster);font-weight:700;font-size:19px;
  text-transform:uppercase;letter-spacing:.015em;
  padding:15px 16px;text-align:center;line-height:1.1;
}

/* ---------- programme notes ---------- */
.programme{
  margin-top:clamp(38px,5vw,64px);
  border-top:1px solid rgba(176,138,70,.24);
  padding-top:clamp(26px,3vw,40px);
}
.prog-title{
  font-family:var(--font-plate);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass);margin-bottom:22px;
}
.prog-steps{list-style:none;display:grid;grid-template-columns:1fr;gap:22px;}
@media (min-width:820px){ .prog-steps{grid-template-columns:repeat(3,1fr);gap:34px;} }
.prog-steps li{border-top:1px solid rgba(176,138,70,.2);padding-top:14px;}
.prog-num{
  display:block;font-family:var(--font-poster);font-weight:800;font-size:30px;
  color:rgba(245,212,138,.32);line-height:1;margin-bottom:8px;
}
.prog-steps b{
  display:block;font-family:var(--font-poster);font-weight:700;font-size:22px;
  text-transform:uppercase;color:var(--paper);margin-bottom:7px;letter-spacing:.01em;
}
.prog-steps p{color:var(--ink-dim);font-size:14px;line-height:1.7;}
.prog-note{
  margin-top:26px;font-family:var(--font-plate);font-size:12px;
  color:var(--tungsten);opacity:.85;
}

.lobby-foot{
  margin-top:clamp(34px,4vw,56px);padding-top:20px;
  border-top:1px solid rgba(176,138,70,.18);
  font-size:12px;color:var(--ink-dim);opacity:.7;text-align:center;
}

/* ---------- narrow phones ---------- */
@media (max-width:460px){
  .posters{grid-template-columns:repeat(2,1fr);gap:8px;}
  .cert{grid-template-columns:1fr 1fr;}
  .cert div:last-child{grid-column:1 / -1;}
  .ticket-main{font-size:17px;padding:14px 12px;}
  .bulbs{padding:0 8px;}
}