/* ==========================================================================
   ALIEN LIFE STUDIO -- the whole design system, one file, every page.

   PALETTE. Token VALUES are Alien Life Creations' own, copied verbatim from
   its live `_shared/styles.css`, because this is a sister site and a sister
   site is a token-value remap, never a fork (U6). What differs is USE, not
   value: ALC is a field guide and leads with colour; a film site leads with a
   dark screen and spends colour only on the frame around it. The brightest
   thing on any page here should be the picture.

   THE RIM. `.screen` is the centrepiece. It is a real bezel with thickness,
   an inner bevel and viewfinder framing marks at its corners, and the controls
   live IN it rather than floating over the picture, so nothing the studio made
   is ever covered by an interface. In fullscreen there is no bezel, so the
   controls become an overlay; that is the one place the rule relaxes, and it
   relaxes because the rim is gone.
   ========================================================================== */

:root{
  /* --- ALC tokens, verbatim ------------------------------------------- */
  --green:#48FF2B; --green-deep:#2ECF1A;
  --cyan:#3FFAF5; --cyan-deep:#1F9AA5;
  --violet:#A35AAF; --violet-deep:#6E3C79;
  --lime:#93FB06; --lime-deep:#5FA400;
  --gold:#DBFF07; --gold-deep:#A6C000;
  --space:#0A0A12; --space-2:#0E1420;
  --card:#0F1620; --card-line:#1E3A2A; --card-line-hover:#2ECF1A;
  --ink:#EAF2E8; --ink-soft:#9DB2A6; --ink-label:#7FBF6A;
  --maxw:1160px;

  /* --- the rim's own metal, derived from the palette, not new colour --- */
  --rim-1:#151B22; --rim-2:#0C1118; --rim-line:#28323C;
  --rim-bevel:#3A4652; --picture:#05070A;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--space); color:var(--ink);
  font-family:var(--font); line-height:1.65;
  overflow-x:clip;                        /* U3.3: clip, never hidden */
  min-height:100vh; min-height:100dvh;    /* U3.4 */
  display:flex; flex-direction:column;
}
#constellation{position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto;
  padding:0 clamp(16px,4vw,28px); position:relative; z-index:1}
main{flex:1 0 auto}
a{color:var(--cyan); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--green)}
:focus-visible{outline:2px solid var(--green); outline-offset:3px; border-radius:6px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap}
img,video{max-width:100%; display:block}

/* ===================== header ===================== */
.top{position:relative; z-index:2; border-bottom:1px solid var(--card-line);
  background:linear-gradient(180deg,rgba(11,15,11,.92),rgba(10,10,18,.72));
  backdrop-filter:blur(8px)}
.top .wrap{display:flex; align-items:center; gap:14px; min-height:68px;
  flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none;
  margin-right:auto; min-width:0}
.brand img{width:38px; height:38px; border-radius:50%;
  border:1px solid var(--card-line); flex:none}
.brand b{font-size:14px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--ink); font-weight:700; white-space:nowrap}
.brand span{display:block; font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-label); font-weight:700}
.top nav{display:flex; gap:6px; flex-wrap:wrap}
.top nav a{padding:7px 13px; border-radius:999px; font-size:13.5px;
  color:var(--ink-soft); text-decoration:none; border:1px solid transparent;
  white-space:nowrap}
.top nav a:hover{color:var(--ink); border-color:var(--card-line);
  background:var(--card)}
.top nav a[aria-current]{color:var(--green); border-color:var(--card-line-hover)}

/* ===================== type ===================== */
.eyebrow{font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--green); font-weight:700; margin:0 0 12px}
h1{font-size:clamp(30px,5.4vw,54px); line-height:1.06; margin:0 0 14px;
  letter-spacing:.01em; font-weight:800}
h2.sec-head{text-align:center; font-size:clamp(20px,3.2vw,27px);
  margin:0 0 8px; letter-spacing:.01em}
.lead{max-width:62ch; margin:0 auto 26px; text-align:center;
  color:var(--ink-soft); font-size:15.5px}
.logline{font-size:clamp(16px,2.1vw,19px); color:var(--ink-soft);
  max-width:56ch; margin:0 0 20px}

/* ===================== THE SCREEN RIM ===================== */
.screen{
  position:relative; border-radius:20px;
  padding:clamp(10px,1.4vw,16px);
  background:
    linear-gradient(180deg,var(--rim-1) 0%, var(--rim-2) 62%, #090D13 100%);
  border:1px solid var(--rim-line);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 26px 60px -22px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(255,255,255,.045);
}
/* the accent hairline along the top of the bezel: the one lit edge */
.screen::before{content:""; position:absolute; left:14%; right:14%; top:-1px;
  height:1px; background:linear-gradient(90deg,
    transparent, var(--green-deep) 22%, var(--cyan) 50%, var(--green-deep) 78%,
    transparent); opacity:.55}

/* viewfinder framing marks, on the BEZEL so they never cover the picture */
.screen .mk{position:absolute; width:13px; height:13px; pointer-events:none;
  border:2px solid var(--green-deep); opacity:.5; border-radius:2px}
.screen .mk.tl{top:5px; left:5px; border-right:0; border-bottom:0}
.screen .mk.tr{top:5px; right:5px; border-left:0; border-bottom:0}
.screen .mk.bl{bottom:5px; left:5px; border-right:0; border-top:0}
.screen .mk.br{bottom:5px; right:5px; border-left:0; border-top:0}

.picture{position:relative; aspect-ratio:16/9; border-radius:10px;
  overflow:hidden; background:var(--picture);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.9),
             inset 0 0 34px -8px rgba(0,0,0,.9),
             0 0 0 1px var(--rim-bevel)}
.picture video{width:100%; height:100%; object-fit:contain; background:#000}
.picture video::-webkit-media-controls{display:none!important}

/* the poster/idle state and its play button */
.pict-idle{position:absolute; inset:0; display:grid; place-items:center;
  background:var(--picture); cursor:pointer; border:0; width:100%; padding:0}
.pict-idle img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.55}
.pict-idle .big{position:relative; width:74px; height:74px; border-radius:50%;
  display:grid; place-items:center; background:rgba(10,10,18,.66);
  border:1.5px solid var(--green); box-shadow:0 0 26px -6px var(--green-deep);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease)}
.pict-idle:hover .big{transform:scale(1.07);
  box-shadow:0 0 34px -4px var(--green)}
@media (prefers-reduced-motion:reduce){.pict-idle:hover .big{transform:none}}
.pict-idle .big svg{width:26px; height:26px; margin-left:4px; fill:var(--green)}

/* ------- the control bar, IN the rim ------- */
.ctl{display:flex; align-items:center; gap:8px; padding:10px 4px 2px;
  flex-wrap:nowrap; min-width:0}
.ctl button{appearance:none; background:transparent; border:1px solid transparent;
  color:var(--ink-soft); border-radius:8px; cursor:pointer; padding:6px;
  display:grid; place-items:center; flex:none; line-height:0}
.ctl button:hover{color:var(--ink); background:rgba(255,255,255,.055)}
.ctl button svg{width:19px; height:19px; fill:currentColor}
.ctl button[aria-pressed="true"]{color:var(--green)}
.ctl .time{font-family:var(--mono); font-size:12px; color:var(--ink-soft);
  flex:none; letter-spacing:.02em; font-variant-numeric:tabular-nums}
.ctl .spacer{flex:1 1 auto; min-width:0}

/* scrubber: its own row so it is full width and easy to hit */
.bar{position:relative; height:22px; display:flex; align-items:center;
  cursor:pointer; touch-action:none; margin:2px 4px 0}
.bar .track{position:relative; height:4px; width:100%; border-radius:99px;
  background:rgba(255,255,255,.13); overflow:hidden}
.bar .buf{position:absolute; inset:0 auto 0 0; width:0;
  background:rgba(255,255,255,.18)}
.bar .played{position:absolute; inset:0 auto 0 0; width:0;
  background:linear-gradient(90deg,var(--green-deep),var(--green))}
.bar .knob{position:absolute; top:50%; left:0; width:13px; height:13px;
  margin:-6.5px 0 0 -6.5px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 3px rgba(72,255,43,.2); opacity:0;
  transition:opacity .16s var(--ease)}
.bar:hover .knob, .bar:focus-visible .knob, .bar.dragging .knob{opacity:1}
.bar:hover .track{height:6px}
.bar .tip{position:absolute; bottom:24px; transform:translateX(-50%);
  background:#05070A; border:1px solid var(--rim-line); color:var(--ink);
  font-family:var(--mono); font-size:11.5px; padding:3px 7px; border-radius:6px;
  pointer-events:none; opacity:0; white-space:nowrap}
.bar:hover .tip{opacity:1}

/* volume */
.vol{display:flex; align-items:center; gap:6px; flex:none}
.vol input{appearance:none; width:0; height:4px; border-radius:99px;
  background:rgba(255,255,255,.16); cursor:pointer; padding:0;
  /* opacity as well as width: a zero-width range input still PAINTS its
     thumb, which read as a stray green dot floating in the control bar. */
  opacity:0; transition:width .2s var(--ease), opacity .2s var(--ease)}
.vol:hover input, .vol input:focus-visible{width:72px; opacity:1}
.vol input::-webkit-slider-thumb{appearance:none; width:12px; height:12px;
  border-radius:50%; background:var(--green); cursor:pointer}
.vol input::-moz-range-thumb{width:12px; height:12px; border:0;
  border-radius:50%; background:var(--green); cursor:pointer}
@media (max-width:620px){.vol input, .vol:hover input{width:0; display:none}}

/* THE CONTROL BAR HAS A FLOOR, and it was 454px wide.
   `.ctl` is flex-nowrap with ten fixed-size children, so below ~455px it could
   not shrink and pushed the whole document sideways: measured 134px of overflow
   at 320px, 79px at 375px, 40px at 414px, identically on every page. A rim that
   breaks the page it frames is not a rim.
   The fix is not to let it wrap (a control bar on two lines reads as broken);
   it is to DROP the controls that have keyboard and gesture equivalents and
   keep the ones that have none. Skip back/forward stay reachable with J and L
   and by scrubbing; picture-in-picture is a desktop affordance. Play, seek,
   time, mute, captions, settings and fullscreen survive at every width. */
@media (max-width:560px){
  .ctl{gap:4px; padding-inline:0}
  .ctl [data-back], .ctl [data-fwd], .ctl [data-pip]{display:none}
  .ctl .time{font-size:11px}
  .ctl button{padding:5px}
  .ctl button svg{width:18px; height:18px}
}
@media (max-width:380px){
  .ctl .time{font-size:10.5px; letter-spacing:0}
  .ctl button{padding:4px}
}

/* settings menu */
.menu-wrap{position:relative; flex:none}
.menu{position:absolute; right:0; bottom:calc(100% + 8px); min-width:212px;
  background:#0B1017; border:1px solid var(--rim-line); border-radius:12px;
  padding:6px; box-shadow:0 18px 40px -14px rgba(0,0,0,.95); z-index:6}
.menu[hidden]{display:none}
.menu h4{margin:8px 10px 4px; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-label); font-weight:700}
.menu button{display:flex; width:100%; justify-content:space-between;
  align-items:center; gap:10px; padding:7px 10px; border-radius:8px;
  font-size:13.5px; color:var(--ink-soft); text-align:left}
.menu button:hover{background:rgba(255,255,255,.06); color:var(--ink)}
.menu button[aria-checked="true"]{color:var(--green)}
.menu button[aria-checked="true"]::after{content:"\\2713"; font-size:12px}
.menu button[disabled]{opacity:.42; cursor:default}
.menu button[disabled]:hover{background:transparent; color:var(--ink-soft)}
.menu .note{margin:2px 10px 8px; font-size:11.5px; color:#6E8478;
  line-height:1.45}

/* the caption line, drawn by us so it sits above the rim's own controls */
.cue{position:absolute; left:4%; right:4%; bottom:5%; text-align:center;
  font-size:clamp(14px,1.7vw,19px); line-height:1.4; color:#fff;
  text-shadow:0 2px 5px #000,0 0 2px #000; pointer-events:none;
  background:rgba(0,0,0,.42); padding:5px 12px; border-radius:8px;
  width:fit-content; margin:0 auto; max-width:86%}
.cue[hidden]{display:none}

/* fullscreen: the bezel is gone, so the controls become an overlay */
.screen:fullscreen{padding:0; border-radius:0; border:0; background:#000}
.screen:fullscreen .mk{display:none}
.screen:fullscreen .picture{aspect-ratio:auto; height:100vh;
  border-radius:0; box-shadow:none}
.screen:fullscreen .ctl,.screen:fullscreen .bar{position:absolute;
  left:0; right:0; z-index:5; background:linear-gradient(180deg,
  transparent,rgba(0,0,0,.82)); padding-inline:16px}
.screen:fullscreen .bar{bottom:44px; margin:0}
.screen:fullscreen .ctl{bottom:0; padding-bottom:10px}
.screen:fullscreen.idle .ctl,.screen:fullscreen.idle .bar{opacity:0;
  transition:opacity .3s var(--ease)}
.screen:fullscreen.idle{cursor:none}

/* ===================== hero ===================== */
.hero{padding:clamp(26px,5vw,52px) 0 clamp(18px,3vw,30px)}
.hero-grid{display:grid; gap:clamp(20px,3.4vw,38px); align-items:center;
  grid-template-columns:minmax(0,1.32fr) minmax(0,1fr)}   /* U3.1 */
@media (max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)}}

/* ===================== chips + meta ===================== */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; padding:0;
  list-style:none}
.chip{display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
  border-radius:999px; border:1px solid var(--card-line); background:var(--card);
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:700; white-space:nowrap}
.chip .dot{width:6px; height:6px; border-radius:50%; background:var(--ink-label)}
.chip.planned{border-color:var(--violet-deep); color:#C9A6D2}
.chip.planned .dot{background:var(--violet)}
.chip.filming{border-color:var(--cyan-deep); color:#9EE9EC}
.chip.filming .dot{background:var(--cyan)}
.chip.released{border-color:var(--green-deep); color:#A9F59B}
.chip.released .dot{background:var(--green);
  box-shadow:0 0 8px var(--green-deep)}

.btn{display:inline-flex; align-items:center; gap:9px; padding:11px 19px;
  border-radius:999px; text-decoration:none; font-size:14px; font-weight:700;
  border:1px solid var(--card-line-hover); color:var(--space);
  background:var(--green); transition:transform .18s var(--ease)}
.btn:hover{transform:translateY(-1px); color:var(--space)}
.btn.ghost{background:transparent; color:var(--ink);
  border-color:var(--card-line)}
.btn.ghost:hover{border-color:var(--card-line-hover); color:var(--green)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}
.btn svg{width:15px; height:15px; fill:currentColor}

/* ===================== the slate grid ===================== */
section{padding:clamp(28px,5vw,58px) 0}
.slate{display:grid; gap:clamp(14px,2vw,20px); padding:0; margin:26px 0 0;
  list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}  /* U3.1 */
.card{min-width:0; border:1px solid var(--card-line); border-radius:16px;
  background:var(--card); overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .2s var(--ease), transform .2s var(--ease)}
.card:hover{border-color:var(--card-line-hover); transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none}}
.card > a{text-decoration:none; color:inherit; display:flex;
  flex-direction:column; height:100%}

/* the card's poster: drawn, not photographed. There is no still to show, so
   showing one would be a lie. This is the film's accent over the studio's
   aperture glyph, which reads as "a frame that has not been shot yet". */
.card .poster{position:relative; aspect-ratio:16/9; display:grid;
  place-items:center; border-bottom:1px solid var(--card-line);
  background:radial-gradient(120% 130% at 50% 8%,
    color-mix(in srgb,var(--accent) 20%, transparent), transparent 64%),
    linear-gradient(168deg,#0C1219,#070A0F)}
.card .poster svg{width:50px; height:50px; opacity:.5; stroke:var(--accent);
  fill:none; stroke-width:1.5}
.card .poster .runtime{position:absolute; right:9px; bottom:9px;
  font-family:var(--mono); font-size:11px; color:var(--ink-soft);
  background:rgba(5,7,10,.8); border:1px solid var(--card-line);
  padding:2px 7px; border-radius:6px}
.card .body{padding:16px 17px 18px; display:flex; flex-direction:column;
  gap:9px; flex:1}
.card h3{margin:0; font-size:18px; color:var(--ink)}
.card p{margin:0; font-size:14px; color:var(--ink-soft)}
.card .foot{margin-top:auto; padding-top:4px; display:flex; gap:8px;
  flex-wrap:wrap; align-items:center}

/* ===================== detail page ===================== */
.detail{padding:clamp(22px,4vw,40px) 0 0}
.detail-grid{display:grid; gap:clamp(22px,3.4vw,40px); margin-top:clamp(22px,4vw,38px);
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media (max-width:900px){.detail-grid{grid-template-columns:minmax(0,1fr)}}
.prose p{margin:0 0 15px; font-size:16px; color:var(--ink-soft); max-width:66ch}
.prose p:first-of-type{color:var(--ink); font-size:17px}
.facts{border:1px solid var(--card-line); border-radius:14px;
  background:var(--card); padding:6px 18px 14px; align-self:start}
.facts dl{margin:0}
.facts dt{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-label); font-weight:700; margin:14px 0 3px}
.facts dd{margin:0; font-size:14.5px; color:var(--ink)}
.pager{display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap;
  margin:clamp(30px,5vw,52px) 0 0; padding-top:22px;
  border-top:1px solid var(--card-line)}
.pager a{display:flex; flex-direction:column; gap:2px; text-decoration:none;
  font-size:14px; color:var(--ink); min-width:0}
.pager a small{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-label); font-weight:700}
.pager a:last-child{text-align:right; margin-left:auto}

/* ===================== notes + footer ===================== */
.note{border:1px solid var(--violet-deep); border-radius:14px;
  background:linear-gradient(180deg,rgba(163,90,175,.09),transparent);
  padding:16px 20px; color:var(--ink-soft); font-size:14.5px;
  max-width:74ch; margin:0 auto; text-align:center}
.note strong{color:var(--ink)}

footer{position:relative; z-index:1; flex-shrink:0;
  margin-top:clamp(34px,6vw,70px); padding:26px 0 34px;
  border-top:1px solid var(--card-line); color:var(--ink-soft); font-size:13.5px}
footer .wrap{display:flex; gap:16px; flex-wrap:wrap; align-items:center;
  justify-content:space-between}
footer nav{display:flex; gap:16px; flex-wrap:wrap}
footer p{margin:0; max-width:60ch}