/* ==========================================================================
   FILMS: page-local styles for /films/ only.
   Colours, fonts, buttons, form fields and the footer come from /css/werk.css;
   this file uses its tokens (--ink, --bone, --brass, --line, --accent-ink ...)
   and defines no palette of its own. Sections are named exactly like the
   data-sid values in index.html: hero, films, difference, request.
   ========================================================================== */


/* ======== HERO: one film, a frame that changes shape ======== */

/* The header is position:fixed and 4.75rem tall (werk.css), so the first section
   has to start below it by its own padding. */
.hero {
  padding-top: 6rem;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);

  /* The film's own background, sampled from the delivered frames (14,14,16).
     It is the frame's colour so that the corners the clip opens during a
     change of shape are the film's ground and not a hole. Not a page colour. */
  --film-ground: #0E0E10;

  /* How long the frame takes to change shape. films.js reads this value, so the
     label and the picture can never disagree: change it HERE only. */
  --hero-morph: 1.6s;

  /* Where the two formats sit inside a 10:9 stage, as insets of the stage.
     16:9 across the full width leaves (1 - 9/16 x 10/9) / 2 above and below;
     9:16 at the full height leaves (1 - 9/16 x 9/10) / 2 left and right. */
  --wide-y: 18.75%;
  --tall-x: 24.6875%;
}

/* Desktop: headline and copy on the left, the stage on the right across both
   rows. The two rows share the stage's height, so the headline ends and the
   copy starts at the stage's middle line. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: 1fr 1fr;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 1.6rem;
}
.hero-title  { grid-column: 1; grid-row: 1; align-self: end; }
.hero-copy   { grid-column: 1; grid-row: 2; align-self: start; }
.hero-figure { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; width: 100%; }

.hero-eyebrow { margin-bottom: 1rem; }
/* Smaller than the site's .display: this headline shares its screen with a film
   and must stay on three lines in a five-column text block. */
.hero h1 {
  font-family: var(--font-disp);
  font-variation-settings: var(--wide);
  font-weight: 760;
  font-size: clamp(2.05rem, 4.3vw, 3.9rem);
}
.hero-lead { margin-bottom: 1.8rem; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }

/* THE STAGE. Its size is fixed by CSS before any image or video arrives, and
   nothing inside it is ever laid out again: that is what keeps CLS at 0 and
   the text beside it still. The second max-width term keeps the whole stage
   plus its label inside a short laptop screen. */
.hero-stage {
  position: relative;
  width: 100%;
  max-width: min(680px, calc((100vh - 13.5rem) * 10 / 9));
  aspect-ratio: 10 / 9;
  margin-left: auto;
}
/* Two drawn outlines: the 16:9 and the 9:16 sheet. They show where the frame
   is coming from and going to, the way crop marks do on a cutting table. */
.hero-stage::before,
.hero-stage::after {
  content: "";
  position: absolute;
  border: 1px solid var(--line);
  pointer-events: none;
}
.hero-stage::before { inset: var(--wide-y) 0; }
.hero-stage::after  { inset: 0 var(--tall-x); }

/* The frame is as large as the stage and CUT to the current format. clip-path
   is the one property animated here: it runs on the compositor, moves no box,
   and never scales the film (width/height would do all three). */
.hero-film {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--film-ground);
  clip-path: inset(var(--wide-y) 0);
  transition: clip-path var(--hero-morph) cubic-bezier(.65, 0, .35, 1);
}
.hero-film[data-shape="tall"] { clip-path: inset(0 var(--tall-x)); }

/* Each picture sits still in its own format's rectangle, for good. */
.hero-poster,
.hero-wide {
  position: absolute;
  top: var(--wide-y);
  left: 0;
  width: 100%;
  height: calc(100% - 2 * var(--wide-y));
  object-fit: cover;
}
.hero-tall {
  position: absolute;
  top: 0;
  left: var(--tall-x);
  width: calc(100% - 2 * var(--tall-x));
  height: 100%;
  object-fit: cover;
  /* The vertical cut lies on top of the wide one and fades in over it, so the
     wide picture never has to fade out and the frame is never half empty. */
  opacity: 0;
  transition: opacity var(--hero-morph) cubic-bezier(.65, 0, .35, 1);
}
.hero-film[data-shape="tall"] .hero-tall { opacity: 1; }

/* One .hero-pair per language (films.js builds them). Only the current one is
   visible; a language takes over with a short fade at the start of the loop. */
.hero-pair {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
}
.hero-pair.is-on { opacity: 1; }

/* The label under the stage. min-height reserves its line, so it can change
   its text without moving anything below it. */
.hero-figure figcaption {
  max-width: min(680px, calc((100vh - 13.5rem) * 10 / 9));
  margin-left: auto;
}
.hero-slate {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 1.5rem;
  min-height: 1.5em;
  margin-top: .8rem;
}
.hero-now { font-weight: 600; font-variant-numeric: tabular-nums; }

/* The text alternative. Off screen but read aloud by default ... */
.hero-alt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hero-alt ul { list-style: none; }
.hero-alt p { font-size: .92rem; color: var(--bone-dim); margin-bottom: .5rem; }

/* ... and shown in place of the label when the visitor asked for less motion:
   then nothing plays, and the three captions are simply printed. */
@media (prefers-reduced-motion: reduce) {
  .hero-slate { display: none; }
  .hero-alt {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    margin-top: .8rem;
  }
  .hero-film, .hero-tall, .hero-pair { transition: none; }
}

/* Phone and tablet: one column, and the FILM comes before the paragraph. The
   stage is square here (insets below) and never wider than 44% of the screen
   height, so headline, film and button share the first screen. */
@media (max-width: 900px) {
  .hero {
    padding-top: 5.6rem;
    --wide-y: 21.875%;   /* (1 - 9/16) / 2: both formats in a square */
    --tall-x: 21.875%;
  }
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 1.1rem; }
  .hero-title, .hero-copy, .hero-figure { grid-column: 1; grid-row: auto; align-self: auto; }
  .hero-eyebrow { margin-bottom: .5rem; }
  .hero-stage,
  .hero-figure figcaption { max-width: min(100%, 44vh, 30rem); margin-inline: auto; }
  .hero-stage { aspect-ratio: 1 / 1; }
  /* Two label lines reserved: on a narrow phone the note wraps under the format. */
  .hero-slate { min-height: 3em; margin-top: .55rem; }
  /* Button first, paragraph second: the request has to be reachable without a
     scroll, the paragraph can wait one thumb's length. */
  .hero-copy { display: flex; flex-direction: column; }
  .hero-actions { order: -1; margin-bottom: 1.5rem; }
  .hero-lead { margin-bottom: 0; }
}


/* ======== FILMS: four films, one column ======== */

.film { padding-block: clamp(2.2rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.film:last-child { padding-bottom: 0; }

/* Title left, the one factual line right, both on the frame's edges. */
.film-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 2.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.film-head h3 {
  font-family: var(--font-disp);
  font-variation-settings: var(--wide);
  font-weight: 730;
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
}
/* The running number is a mark beside the title, in the site's label voice. */
.film-no {
  display: inline-block;
  margin-right: .7em;
  font-variation-settings: normal;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent-ink);
  vertical-align: .35em;
}
.film-line { max-width: 44ch; color: var(--bone-dim); }

/* The frame. aspect-ratio reserves 16:9 before the poster or the preview
   exists; --ink-2 is what shows for the instant before the poster paints. */
.film-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink-2);
  overflow: hidden;
}
/* Poster below, video above. The video has no poster of its own and stays
   transparent until it has a frame, so the lazy <img> is what is seen first. */
.film-media img,
.film-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Facts left, the film's one action right. */
.film-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}
.film-facts { display: flex; flex-wrap: wrap; gap: .8rem 2.6rem; }
.film-facts dt {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.film-facts dd { max-width: 34ch; }
/* Once the full film runs in the frame, its link has done its job. Hidden with
   visibility, not display, so the row keeps its height and nothing moves. */
.film.is-full .film-full { visibility: hidden; }


/* ======== DIFFERENCE: type only ======== */

.difference .sec-head { margin-bottom: 1.6rem; }
.difference-lead { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* A ruled list, read like a spec sheet: number, term, sentence. The number is
   a CSS counter, so reordering the items never leaves a wrong figure behind. */
.difference-list { list-style: none; counter-reset: diff; border-bottom: 1px solid var(--paper-line); }
.difference-list li {
  counter-increment: diff;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.25fr);
  gap: .4rem 2rem;
  align-items: baseline;
  padding-block: 1.5rem;
  border-top: 1px solid var(--paper-line);
}
.difference-list li::before {
  content: counter(diff, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent-ink);
}
.difference-list h3 {
  font-family: var(--font-disp);
  font-variation-settings: var(--wide);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.15;
}
.difference-list p { max-width: 52ch; color: var(--paper-dim); }
/* Phone: the sentence drops under its term, the number keeps its own column. */
@media (max-width: 760px) {
  .difference-list li { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .difference-list p { grid-column: 2; }
}


/* ======== REQUEST: three questions and a send button ======== */

.request-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 2.5rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}
/* The heading stacks over its eyebrow here: beside a form there is no room
   for the site's side-by-side section head. */
.request .sec-head { flex-direction: column-reverse; align-items: flex-start; gap: 1rem; margin-bottom: 1.4rem; }
.request .sec-note { text-align: left; white-space: normal; padding-bottom: 0; }

/* werk.css gives a label display:block; the question number sits inline in it. */
.q-no {
  display: inline-block;
  min-width: 1.6em;
  font-weight: 600;
  color: var(--accent-ink);
}
.request-form label { font-size: .8rem; }
.request-form .check-row label { font-size: .9rem; }
/* The select has no rule of its own colour on paper in werk.css; the arrow is
   the browser's, which is the one every visitor already knows. */
.request-form select { background-color: var(--ink); }
.request-who { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }

/* The next four rules are contact.html's own (it keeps them inline), copied so
   the two forms look and answer the same. */
.form-submit-row { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; margin-top: 1.6rem; }
.status-msg { margin-top: 1rem; font-family: var(--font-mono); font-size: .85rem; }
.status-msg.success { color: var(--brass); }
.status-msg.error { color: var(--error); }
.status-msg a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .request-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .request-who { grid-template-columns: minmax(0, 1fr); }
}

/* A jump to #request must not land under the fixed header. */
#request { scroll-margin-top: 4.75rem; }