/* ============================================================
   Kim's International — hero film page
   One screen: the film, the name, one action.
   Letterhead DNA kept: Source Serif 4 read / Inter apparatus,
   nothing round, accent never a button fill. The page commits
   to the film's world (blue hour), so it is deliberately
   single-theme and every colour is painted explicitly.
   ============================================================ */

:root{
  --film-navy:#0D131C;      /* page ground = the film's darkest value */
  --film-ink:#EDEAE4;       /* text on the film */
  --film-mute:#98A0AB;      /* apparatus on the film */
  --film-amber:#C98A3C;     /* focus rings + underline hover only */
  --hairline:rgba(237,234,228,.28);

  --serif:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --fs-runner:0.6875rem;                                  /* 11px fixed apparatus */
  --fs-line:clamp(1.25rem,1.02rem + 1.15vw,1.75rem);      /* the timed lines */
  --fs-name:clamp(1.5rem,1.19rem + 1.55vw,2.375rem);      /* end card */
  --pad:clamp(20px,4vw,56px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{background:var(--film-navy)}
body{
  margin:0;
  font-family:var(--serif);
  color:var(--film-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
p{margin:0}
a{color:var(--film-ink);text-decoration:none}
:focus-visible{outline:2px solid var(--film-amber);outline-offset:3px}

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--film-ink);color:var(--film-navy);padding:10px 16px;font-family:var(--sans);font-size:var(--fs-runner);letter-spacing:0.08em;text-transform:uppercase;z-index:9}
.skip:focus{left:0}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* legibility floor under the copy — bottom third only, never a full wash */
.hero-shade{
  position:absolute;inset:auto 0 0 0;height:46%;
  background:linear-gradient(to top,rgba(13,19,28,.78) 0%,rgba(13,19,28,.32) 55%,rgba(13,19,28,0) 100%);
  pointer-events:none;
}

.hero-mast{position:absolute;top:0;left:0;right:0;padding:calc(var(--pad) * .6) var(--pad)}
.wordmark{
  font-family:var(--sans);font-size:var(--fs-runner);font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--film-ink);
}

/* copy block — the treatment's reserved lower-left negative space */
.hero-copy{
  position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--pad) * 1.1);
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  max-width:34ch;
}
.line{
  position:absolute;bottom:calc(100% + 6px);left:0;right:0;
  font-size:var(--fs-line);line-height:1.3;letter-spacing:-0.004em;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s ease-out,transform .4s ease-out;
  text-wrap:balance;
}
.line-name{font-size:var(--fs-name)}
.line.on{opacity:1;transform:none}

/* the one action. Ghost hairline, never a fill, never round. */
.cta{
  font-family:var(--sans);font-size:0.8125rem;font-weight:500;
  letter-spacing:0.12em;text-transform:uppercase;
  border:1px solid var(--hairline);padding:14px 26px;
  transition:border-color .16s ease,background-color .16s ease;
}
.cta:hover,.cta:focus-visible{border-color:var(--film-ink);background:rgba(237,234,228,.07)}

/* ---------- colophon ---------- */
.colophon{
  padding:26px var(--pad) 34px;
  display:flex;flex-direction:column;gap:10px;
  border-top:1px solid rgba(237,234,228,.14);
}
.colophon-contact{font-family:var(--sans);font-size:0.8125rem;color:var(--film-ink);display:flex;flex-wrap:wrap;gap:0 10px}
.colophon-note{font-family:var(--sans);font-size:var(--fs-runner);color:var(--film-mute);line-height:1.7;max-width:72ch}
.u{
  background-image:linear-gradient(var(--hairline),var(--hairline));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;
  padding-bottom:1px;transition:background-image .16s ease;
}
.u:hover,.u:focus-visible{background-image:linear-gradient(var(--film-amber),var(--film-amber))}

/* ---------- the still page ----------
   Entered whenever the film cannot run: reduced-motion preference
   or refused autoplay. Copy stands statically, name first. */
html.reduced .line{position:static;opacity:1;transform:none}
html.reduced .line-name{order:-1}
@media (prefers-reduced-motion:reduce){
  .line{transition:none;transform:none}
}