@charset "utf-8";
/* ==========================================================================
   CGF FILMS - 2026
   Single stylesheet. No frameworks, no resets from vendors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand - sampled from the logo mark */
  --red:          #b90b0b;
  --red-bright:   #e11414;
  --red-deep:     #6d0808;
  --red-text:     #ef3b3b;  /* red used AS TEXT on --ink: 5.1:1 */

  /* Neutral ramp - near-black canvas, cool-shifted so film stills sit warm */
  --ink:          #08080a;
  --ink-2:        #0e0e11;
  --ink-3:        #16161a;
  --line:         #26262c;
  --line-soft:    #1b1b20;

  --text:         #f2f2f4;
  /* Raised after review: the old #a8a8b2 / #7a7a88 pair passed on paper but
     read faint in small capitals on black. Now 11:1 and 7:1 on --ink. */
  --text-2:       #c2c2ca;
  --text-3:       #9e9eaa;

  /* Paper - the one light tone. Used rarely and on purpose (printed matter:
     press clippings, credits), never as a second theme. Warm so it reads as
     stock rather than as a white UI panel. */
  --paper:        #ebe6dc;
  --paper-2:      #d8d1c3;
  --paper-ink:    #17150f;
  --paper-text-2: #57524a;

  /* Type - two voices.
     The films speak in Archivo, pulled narrow: billing-block capitals, the
     way a title card or a one-sheet sets a title and its credits. The
     company speaks in Newsreader, a text serif with optical sizes, so the
     long first-person pages read like a film journal rather than a product
     page. Archivo's width axis does the work a third family would otherwise
     do: --w-credit for titles, --w-label for small capitals.
     Red is not part of the type system at all. It belongs to the logo, the
     play disc and the Retina cloth. */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui:      var(--font-display);
  --font-nav:     var(--font-display);
  --font-body:    "Newsreader", Georgia, "Times New Roman", serif;
  --w-credit:     68%;
  --w-head:       80%;
  --w-label:      86%;

  /* Fluid type scale - clamp(min, preferred, max) */
  --t-xs:    0.8125rem;
  --t-sm:    0.875rem;
  /* The serif sets smaller than Inter did at the same size, so the reading
     size moves up a step: 17px on a phone, 19px on a desktop. */
  --t-base:  clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-lg:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --t-xl:    clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --t-2xl:   clamp(1.625rem, 1.35rem + 1.3vw, 2.5rem);
  --t-3xl:   clamp(2.125rem, 1.6rem + 2.4vw, 4rem);
  --t-hero:  clamp(2.5rem, 1.2rem + 5.2vw, 6.25rem);

  /* Space */
  --gap:      clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --section:  clamp(3.5rem, 2.6rem + 4.4vw, 7rem);
  --shell:    1320px;
  --shell-pad: clamp(1.25rem, 0.6rem + 3vw, 4rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --nav-h: 92px;
  /* iPhone status-bar strip. With viewport-fit=cover the page runs under it,
     and anything pinned to top:0 must add this or the strip shows the page
     scrolling past above the bar. Zero everywhere else. */
  --safe-top: env(safe-area-inset-top, 0px);
  /* Black margin around the framed hero. The header band above it is part of
     the same margin, which is why the top value is the smaller one. */
  --frame-gap: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--safe-top) + 1rem);
}

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Belt-and-braces against anything poking out sideways. `clip` rather than
     `hidden`: hidden turns body into a scroll container, and in WebKit that
     is enough to make the sticky header lose its footing on a phone. clip
     clips without becoming a scroller. The hidden line is only the fallback
     for browsers that predate clip. */
  overflow-x: hidden;
  overflow-x: clip;
}

img, picture, video, iframe, svg { display: block; max-width: 100%; }
/* Photographs are shown as they were graded: no desaturating, dimming or
   grey-until-hover filters anywhere on the site. */
img, video { height: auto; }

/* <picture> is only ever a format-negotiation wrapper here, never a layout box.
   display:contents removes it from the box tree so the <img> inside keeps
   participating in its parent's grid/flex/absolute context exactly as it did
   before the AVIF sources were added, and every `.thing img` rule below still
   matches without being rewritten as `.thing picture img`. */
picture { display: contents; }

input, button, textarea, select { font: inherit; color: inherit; }

/* Headings are Archivo too, in upper and lower case at a slightly wider cut
   than the film titles: one family for every title on the site, with the
   films still told apart by their capitals. The serif is kept for running
   text, where it reads best. */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-stretch: var(--w-head);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

::selection { background: var(--red); color: #fff; }

/* Off-white rather than red: a red ring disappears against the poster art
   and the play disc, and focus has to be visible on everything. */
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

/* Inline links in running text. The base rule above strips underlines, which
   left prose links distinguishable only by colour - and the colour was red,
   which is no longer a text colour. A thin underline, offset clear of the
   descenders, is what a printed page would do. */
.statement-text a, .lede a, .manifesto a, .rail-block a, .tl-item p a,
.member p a, .film-note a, .index-title em a, .notice a, .answer a,
.featured-synopsis a, .synopsis a, .prose a, .svc p a, .fine a, .laurel-film a,
.article-related a:not(.link) {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--text-3);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.25s var(--ease);
}
.statement-text a:hover, .lede a:hover, .manifesto a:hover, .rail-block a:hover,
.tl-item p a:hover, .member p a:hover, .film-note a:hover, .index-title em a:hover,
.notice a:hover, .answer a:hover, .featured-synopsis a:hover, .synopsis a:hover,
.prose a:hover, .svc p a:hover, .fine a:hover, .laurel-film a:hover,
.article-related a:not(.link):hover { text-decoration-color: var(--text); }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -150%;
  z-index: 200;
  background: var(--text);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  font-size: var(--t-sm);
  font-weight: 600;
  transition: translate 0.2s var(--ease);
}
.skip-link:focus { translate: -50% 0; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: max(var(--shell-pad), env(safe-area-inset-left, 0px))
                  max(var(--shell-pad), env(safe-area-inset-right, 0px));
}

.shell--narrow { max-width: 860px; }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }

/* Featured video head - title, then what the piece is, then the synopsis.
   Capped so the synopsis wraps as a column and does not run the full shell
   width beside the "About the film" link. */
.featured-head { max-width: 62ch; }
.featured-head .section-title { margin-bottom: 0.5rem; }
.featured-meta {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.9rem;
}
.featured-synopsis {
  font-size: var(--t-lg);
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 1.2rem + 2.5vw, 3.75rem);
}

/* Small capitals in the narrow cut, set like the role line above a name in a
   credit block. There used to be a red rule in front of every one of these -
   forty-odd red dashes across the site, which is how a template signs its
   work. The label now does its job by size and spacing alone. */
.eyebrow {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.section-title {
  font-size: var(--t-3xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 0.6rem;
}

.lede {
  font-size: var(--t-lg);
  color: var(--text-2);
  line-height: 1.6;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
/* Buttons are off-white on black, not red blocks. A filled red button was the
   loudest thing on every screen, and it was always the same instruction
   ("get in touch"), so it outshouted the films. Primary is a solid paper
   slab; it inverts to an outline on hover rather than lifting or glowing. */
.btn {
  --btn-bg: var(--text);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.6em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--btn-bg);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.btn:hover { background: transparent; color: var(--text); border-color: var(--text); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--text); }

.btn svg { width: 1em; height: 1em; flex: none; }

/* Text link with animated underline */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s var(--ease-out), color 0.25s var(--ease);
}
.link:hover { background-size: 100% 1px; color: #fff; }
.link svg { width: 0.9em; height: 0.9em; transition: translate 0.25s var(--ease); }
.link:hover svg { translate: 3px 0; }

/* --------------------------------------------------------------------------
   5. Site header - top navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: calc(var(--nav-h) + var(--safe-top));
  padding-top: var(--safe-top);
  display: flex;
  align-items: center;
  /* Opaque, always, and in normal flow rather than fixed over the page.
     This bar used to float above the hero still with a gradient scrim doing
     the legibility work, but the logo's thin near-white "films" wordmark
     never survived a bright frame and the red disc fought the image's mid
     greys. The mark now sits on flat --ink, which is the ground it was drawn
     for, and the hero is a framed panel below the bar instead of a backdrop
     behind it. Nothing overlaps the logo, so nothing has to be compensated
     for. */
  background: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease);
}
/* Once the page moves, a hairline separates the bar from whatever scrolls
   beneath it. Nothing else changes -- the bar is already solid. */
.site-header.is-stuck { border-bottom-color: var(--line-soft); }

/* Phones scroll the document, like every other page on the phone.
   This used to lock <html> and <body> to the screen and scroll a wrapper
   (.page-scroll) instead, to stop content showing in the strip under the
   iPhone status bar. The cost was paid on every visit: Safari's toolbar
   never collapsed, tapping the status bar no longer went to the top, and
   momentum scrolling felt slightly off. The sticky bar already pads itself
   by the safe-area inset and paints --ink behind the status bar, and the
   theme-color meta tints Safari's chrome to match, so the strip stays
   black without taking scrolling away from the browser. .page-scroll stays
   in the markup as a plain wrapper. */
.page-scroll { position: relative; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: max(var(--shell-pad), env(safe-area-inset-left, 0px))
                  max(var(--shell-pad), env(safe-area-inset-right, 0px));
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
  margin-right: auto;
}

/* Header lockup only: the mark with "Motion Picture Co." set under it, so the
   company reads as a film company at a glance. Scoped to .site-header because
   .brand is reused in the footer, where a descriptive paragraph already sits
   under the logo and a second descriptor would just repeat it. */
.site-header .brand {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
/* Header mark only - .brand img is shared with the footer lockup, which stays
   at 40px. 45px here also puts the mark (135px) a little wider than the
   descriptor (123px), so the text tucks under it rather than matching edges. */
.site-header .brand img { height: 45px; }
.brand-tag {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  /* Sized to the mark. "Motion Picture Company" is 22 characters; at 7px it
     needs 0.16em of tracking to land at 123px against the 120px logo. More
     tracking pushes it past the mark, a smaller size loses legibility. */
  font-size: 0.4375rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text-3);
  white-space: nowrap;
  /* The tracking adds a trailing space after the final letter; pull it back so
     the word optically centres under the mark rather than sitting a hair left. */
  text-indent: 0.16em;
}
.brand img {
  /* images/logo-nav.png is the horizontal lockup: red disc + wordmark in one
     asset, so no separate text element. Sized by height; width follows the
     3:1 ratio. */
  height: 40px;
  width: auto;
  /* No filter. Earlier versions lifted the mark's brightness because the disc
     read at only 2.95:1 against a lit film still showing through the bar.
     On flat --ink there is nothing to compensate for, so the logo renders at
     the values it was drawn with. */
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 0.5rem + 1.6vw, 2.5rem);
}
.nav-links a {
  font-family: var(--font-nav);
  font-stretch: var(--w-label);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  padding-block: 0.5rem;
  transition: color 0.2s var(--ease);
}
.nav-links a:hover { color: var(--text); }

/* Current page. Colour alone is not decisive at 13px: --text-2 has to stay
   the muted value because --text-3 drops to 3.0:1 over a bright hero frame,
   so the muted-to-active step is only #a8a8b2 -> #fff. The weight carries the
   rest. It is typographic rather than decorative, and because the current
   page never changes under the cursor it cannot cause a reflow. */
.nav-links a[aria-current="page"] {
  color: #fff;
  font-weight: 500;
}

.nav-cta { flex: none; }
/* Outline in the bar: present on every page, so it should never be the
   brightest object on any of them. */
.nav-cta .btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line);
  padding: 0.7em 1.35em;
  font-size: var(--t-xs);
}
.nav-cta .btn:hover { border-color: var(--text); }
/* No movement anywhere in the bar. The global .btn lift is right on a page
   button and wrong on a fixed header. Scoped so .btn elsewhere is untouched. */
.nav-cta .btn:hover { translate: none; }

/* Mobile toggle - the word, not a hamburger icon: MENU in the film-title
   capitals, CLOSE while the menu is open. */
.nav-toggle {
  display: none;
  flex: none;
  min-width: 44px;
  height: 44px;
  padding: 0 0.15rem;
  background: none;
  border: 0;
  cursor: pointer;
  align-items: center;
  font-family: var(--font-display);
  font-stretch: var(--w-credit);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
}
.nav-toggle-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: inline; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }

  /* Contact is no longer a text link in the nav, so on small screens this
     button is the only route to it. Reveal it inside the open menu. It stays
     a sibling of the panel rather than moving inside the <ul>, so .btn is not
     fighting the .nav-links a rules for font, colour and the underline. */
  .nav-links.is-open ~ .nav-cta {
    display: block;
    position: fixed;
    left: var(--shell-pad);
    right: var(--shell-pad);
    bottom: calc(2.25rem + env(safe-area-inset-bottom, 0px));
    text-align: center;
    z-index: 1;
  }
  /* Inside the open menu it is the one action left on screen, so it goes
     back to the solid primary. */
  .nav-links.is-open ~ .nav-cta .btn {
    --btn-bg: var(--text);
    --btn-fg: var(--ink);
    border-color: var(--text);
    font-size: var(--t-sm);
    padding: 1.05em 2.6em;
  }
  /* Full-screen overlay: fills from under the bar to the bottom edge, items
     centred and large enough to hit without aiming. The logo and the close
     control stay visible in the bar above it. */
  .nav-links {
    position: fixed;
    inset: calc(var(--nav-h) + var(--safe-top)) 0 0 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: var(--ink);
    padding: 2rem var(--shell-pad) calc(2rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease-out), visibility 0.3s;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; }
  .nav-links a {
    /* Big menu on a phone: the credit face, narrow and tall, so six items
       stack like a billing block instead of a list of buttons. */
    font-stretch: var(--w-credit);
    font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.5rem);
    letter-spacing: 0.06em;
    padding-block: clamp(0.4rem, 0.2rem + 1vw, 0.75rem);
    border-bottom: 0;
    text-align: center;
  }
  .nav-links a[aria-current="page"] { color: #fff; font-weight: 500; }
}

/* --------------------------------------------------------------------------
   NAV SOCIAL - the same five destinations as the footer, put up top where
   people look for them. It lives inside the nav <ul> so it drops into the
   mobile panel for free. Rules sit after the mobile block above so they win
   on equal specificity; the .nav-links prefix covers the ones that clash.
   -------------------------------------------------------------------------- */
.nav-social {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.nav-links .nav-social a {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding-block: 0;
  border-bottom: 0;
  color: var(--text-2);
  transition: color 0.2s var(--ease);
}
.nav-social svg { width: 16px; height: 16px; fill: currentColor; }
.nav-links .nav-social a:hover { color: var(--text); }

/* Between the mobile breakpoint and here, six text links plus five icons plus
   the CTA crowd the bar. Drop the icons; the footer still carries them. */
@media (max-width: 1180px) and (min-width: 901px) {
  .nav-social { display: none; }
}

@media (max-width: 900px) {
  .nav-social {
    justify-content: center;
    gap: 0.85rem;
    padding-block: 2rem 0;
  }
  .nav-links .nav-social a {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-soft);
  }
  .nav-social svg { width: 19px; height: 19px; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
/* The opening frame. Edge to edge under the bar and most of the first
   screen, the picture first and the type set low on it like a title card.
   It used to be an inset panel with a rounded corner and a drop shadow - a
   picture in a box. The bar above stays solid --ink, so the logo still
   never sits on a lit frame (see .site-header). */
.hero {
  position: relative;
  width: 100%;
  height: clamp(560px, calc(100svh - var(--nav-h) - var(--safe-top)), 980px);
  display: grid;
  align-items: end;
  overflow: clip;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
/* The cycle is driven by JS from however many <img> tags are in .hero-media,
   so adding, removing or reordering images in index.html Just Works. The old
   version hardcoded three nth-child slots and silently dropped a fourth. */
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 40%);
  opacity: 0;
  scale: 1.12;
  transition: opacity 1.6s var(--ease);
}
.hero-media img.is-on {
  opacity: 1;
  animation: heroDrift 11s var(--ease) forwards;
}
/* The cycle needs JS to add .is-on. Without it the hero would be a black box,
   so hold the first frame up unconditionally when the script hasn't run. */
html:not(.js) .hero-media > :first-child img,
html:not(.js) .hero-media > img:first-child { opacity: 1; }

/* Hero video. Drop a <video> into .hero-media and it takes over from the
   still cycle - same crop, same grade, same drift. The stills stay in the
   markup as the poster/fallback and are hidden by JS once the video is
   playing, so a browser that refuses to autoplay still shows a frame. */
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 40%);
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hero-media video.is-on { opacity: 1; }
/* Stills are dead weight once the video is up, but only hide them after it
   actually starts - .has-video is set from the playing event, not on sight. */
.hero-media.has-video img { opacity: 0 !important; }
@keyframes heroDrift {
  from { scale: 1.12; }
  to   { scale: 1.02; }
}

/* Scrims: vertical falloff + a left-side gradient so type always has contrast */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Falloff only where the type sits: the foot of the frame and the left
     third. The top of the shot is left alone. */
  background:
    linear-gradient(to top, rgba(8, 8, 10, 0.92) 0%, rgba(8, 8, 10, 0.55) 28%, rgba(8, 8, 10, 0) 58%),
    linear-gradient(to right, rgba(8, 8, 10, 0.6) 0%, rgba(8, 8, 10, 0.15) 40%, transparent 65%);
}

.hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: max(var(--shell-pad), env(safe-area-inset-left, 0px))
                  max(var(--shell-pad), env(safe-area-inset-right, 0px));
  padding-block: 3rem clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
}

/* Who made it, above the title, as the first line of a title sequence:
   small spaced capitals in Archivo, the way an opening credit is set. The
   film's tagline below the title keeps the serif italic. */
.hero-credit {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 1rem;
}

.hero-meta {
  display: flex;
  align-items: baseline;
  gap: 0 1.1rem;
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 1.75rem;
}
/* Separated by space alone, the way a credit line runs its items. The red
   dots that sat between them are gone with the rest of the decorative red. */
.hero-meta .meta-item { display: inline-flex; align-items: baseline; }
.hero-meta .dot { display: none; }
.hero-meta .tag { color: var(--text); }

/* The film title is set as a title card: Archivo pulled to its narrow cut,
   tall and close, rather than a light extended word floating in the frame. */
.hero-title {
  font-family: var(--font-display);
  font-stretch: var(--w-credit);
  font-size: clamp(3.5rem, 1.6rem + 8vw, 9.5rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 0.86;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.hero-tagline {
  font-family: var(--font-body);
  font-size: var(--t-xl);
  font-weight: 300;
  font-style: italic;
  color: var(--text-2);
  max-width: 34ch;
  margin-bottom: 1.25rem;
}

.hero-actions {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
}

/* The vertical "Scroll" cue is retired. A full-height opening frame already
   says there is more below; a label saying so is furniture. */
.hero-cue { display: none; }

/* Phones: the frame turns upright. A 2.4:1 still cropped to a phone is the
   figure in the doorway and the red cloth at his feet, which is the shot -
   the type stays on the picture, at the foot, over the falloff. */
@media (max-width: 820px) {
  .hero { height: clamp(520px, 78svh, 760px); }
  .hero-media img, .hero-media video { object-position: 47% 50%; }
  .hero-meta .meta-item:nth-child(n+3) { display: none; }
}

/* Compact page hero for interior pages */
.page-hero {
  position: relative;
  /* No nav-h reservation: the header is a real element above this band now
     rather than a fixed bar floating over it. */
  padding-block: clamp(2.5rem, 1.6rem + 3vw, 4.5rem) clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
  overflow: clip;
  isolation: isolate;
}
/* The red wash that used to sit behind every interior heading is gone: on
   every page it was the same glow in the same corner, which is decoration
   doing the job a composition should. */
.page-hero h1 {
  font-size: var(--t-3xl);
  font-weight: 500;
  margin-block: 0.85rem 1.25rem;
}

/* --------------------------------------------------------------------------
   7. Statement band
   -------------------------------------------------------------------------- */
/* The homepage keeps this as a standalone band; every other page gets its
   background from the alternation below, and its rules between sections from
   the section + section border, so no border is declared here. */
.home .statement {
  border-block: 1px solid var(--line-soft);
  background: var(--ink-2);
}
.statement-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
@media (max-width: 820px) { .statement-grid { grid-template-columns: 1fr; } }

.statement-text p + p { margin-top: 1.25rem; }
.statement-text p {
  font-size: var(--t-lg);
  color: var(--text-2);
}
.statement-text strong { color: var(--text); font-weight: 500; }

/* Rail block - secondary content in the narrow left column of .statement-grid.
   Set smaller than the .lede above it so the column reads as lede first,
   reference material second. */
.rail-block { border-top: 1px solid var(--line-soft); padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.rail-block .eyebrow { margin-bottom: 1rem; }
.rail-block p + p { margin-top: 1rem; }
.rail-block > p { font-size: var(--t-sm); color: var(--text-2); line-height: 1.65; }
.rail-block strong { color: var(--text); font-weight: 500; }

/* Stat row */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.stat {
  background: var(--ink-2);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  /* Values sit on the tile floor rather than directly under their own label,
     so a label that wraps to two lines ("Festival screenings & wins") does not
     drop its value below the rest of the row. */
  display: flex;
  flex-direction: column;
}
.stat dt {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.6rem;
}
.stat dd {
  font-family: var(--font-display);
  font-stretch: var(--w-credit);
  font-size: var(--t-2xl);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: auto 0 0;
}
/* Base `a` strips underlines site-wide, so a stat value that links needs its
   own affordance or it reads as plain text. Underline sits well clear of the
   descenders at this size. */
.stat dd a {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}
.stat dd a:hover {
  color: var(--text-2);
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   8. Film cards (poster-led grid)
   -------------------------------------------------------------------------- */
.film-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
}

.film-card {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.film-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--ink-3);
  border: 1px solid var(--line-soft);
}
.film-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.7s var(--ease-out);
}
.film-card:hover .film-poster img,
.film-card:focus-within .film-poster img {
  scale: 1.05;
}

/* Red wash that lifts on hover */
.film-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 10, 0.85), transparent 55%);
  opacity: 1;
  transition: opacity 0.4s var(--ease);
}
.film-card:hover .film-poster::after { opacity: 0.6; }

.film-badge {
  position: absolute;
  bottom: 0.875rem;
  left: 0.875rem;
  z-index: 2;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4em 0.7em;
  background: rgba(8, 8, 10, 0.8);
  border: 1px solid var(--line);
  color: var(--text-2);
}
/* Paper on the poster rather than a red block: still the one label that
   reads first, without competing with the poster art for colour. */
.film-badge--live { border-color: var(--paper); color: var(--paper-ink); background: var(--paper); }

.film-info { padding-top: 1.125rem; }

/* Film titles everywhere are set in the credit face: narrow, upright
   capitals, close tracked - the films' own voice, as on a one-sheet. */
.film-title,
.feature-body h2,
.film-poster--title b,
.title-card b,
.type-card b,
.film-nav strong,
.index-title,
.hero-facts dd {
  font-family: var(--font-display);
  font-stretch: var(--w-credit);
}
.film-title {
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}
.film-card a.film-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}
.film-card:hover .film-title { color: #fff; }

.film-sub {
  margin-top: 0.5rem;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  letter-spacing: 0.06em;
  font-size: var(--t-sm);
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.film-sub .sep { color: var(--text-3); }

/* The distribution or award line under a film card: a credit line, in
   small capitals. Was unstyled outside the horizontal card variant and fell
   back to the body serif at reading size, louder than the note above it. */
.film-meta {
  margin-top: 0.75rem;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.6;
}

.film-note {
  margin-top: 0.65rem;
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   9. Featured film block (wide, editorial)
   -------------------------------------------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (max-width: 880px) { .feature { grid-template-columns: 1fr; } }

.feature-poster {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  max-width: 420px;
}
.feature-poster img { width: 100%; }

.feature-body h2 {
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.75rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 0.92;
  text-transform: uppercase;
  margin-block: 0.85rem 1.25rem;
}
.feature-body .lede { margin-bottom: 1.75rem; }

.spec-list {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin-bottom: 2rem;
}
.spec-list div {
  display: grid;
  grid-template-columns: minmax(120px, 0.35fr) minmax(0, 1fr);
  gap: 1rem;
  background: var(--ink-2);
  padding: 0.9rem clamp(1rem, 0.7rem + 1vw, 1.5rem);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
}
@media (max-width: 520px) {
  .spec-list div { grid-template-columns: 1fr; gap: 0.25rem; }
}
.spec-list dt {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--t-xs);
  color: var(--text-3);
  align-self: center;
}
.spec-list dd { margin: 0; color: var(--text); }
.spec-list dd a { color: var(--text); border-bottom: 1px solid var(--line); transition: border-color 0.25s, color 0.25s; }
.spec-list dd a:hover { color: #fff; border-color: var(--text-2); }

/* Rail variant: in .statement-grid's narrow left column the label/value split
   is too tight, so stack them. Must stay AFTER .spec-list div - same
   specificity, so source order is what decides it. */
.spec-list--rail div { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
.spec-list--rail dt { align-self: start; }

/* --------------------------------------------------------------------------
   10. Video
   -------------------------------------------------------------------------- */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  /* No border. #1b1b20 is LIGHTER than both the page (#08080a) and a
     letterboxed film (#000), so a border here paints as a bright outline
     down each edge of the video. */
  border: 0;
  overflow: hidden;
}
/* Overscan the player by 1px on every side. The edge of a cross-origin
   iframe can land on a subpixel and leave an unpainted (white) sliver;
   pushing the edges outside the parent's overflow clip removes it.
   Costs 1px of picture, which is imperceptible. */
.video-frame iframe {
  position: absolute;
  /* 2px, not 1. The frame routinely lands on a fractional y (2067.42px at
     1440), and a 1px overscan cannot cover a subpixel seam - the player's own
     white document background showed as a hairline along the top edge. */
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  max-width: none;   /* the global `iframe { max-width:100% }` reset would
                        clamp the overscan away and re-expose the right edge */
  border: 0;
  background: #000;
}

/* Click-to-load facade - keeps Vimeo's scripts off the page until asked */
.video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* <picture> is a normal grid item even though the <img> inside it is absolute,
   so it took a row of its own and pushed the play button below centre. Pull it
   out of flow: .play-btn is then the only in-flow child and truly centres. */
.video-facade picture {
  position: absolute;
  inset: 0;
  display: block;
}
.video-facade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The frame at its natural brightness - no dimming before play. The label
     carries its own shadow (see .play-label) so it reads on a bright shot. */
  transition: scale 0.8s var(--ease-out);
}
.video-facade:hover img { scale: 1.03; }

.play-btn {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(64px, 8vw, 88px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red);
  transition: background 0.3s var(--ease), scale 0.3s var(--ease);
}
.video-facade:hover .play-btn { background: var(--red-bright); scale: 1.08; }
.play-btn svg { width: 32%; height: 32%; fill: #fff; translate: 8% 0; }

.play-label {
  position: absolute;
  z-index: 2;
  /* Directly under the play button: half the button's height plus a gap,
     measured from the middle. Keeps the button itself dead centre. */
  top: 50%;
  margin-top: calc(clamp(64px, 8vw, 88px) / 2 + 1.1rem);
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 18px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   11. Stills strip / gallery
   -------------------------------------------------------------------------- */
.stills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(0.5rem, 0.3rem + 0.8vw, 1rem);
}
.stills figure {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-3);
}
.stills img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.7s var(--ease-out);
}
.stills figure:hover img { scale: 1.05; }

/* --------------------------------------------------------------------------
   12. Cast row
   -------------------------------------------------------------------------- */
.cast {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr));
  gap: clamp(1rem, 0.7rem + 1vw, 1.75rem);
}
.cast-member { text-align: left; }
.cast-member img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Upright crops, like a cast sheet, not circular avatars. */
  transition: scale 0.7s var(--ease-out);
}
.cast-name {
  margin-top: 0.85rem;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.cast-role {
  font-size: var(--t-xs);
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.2rem;
}

/* --------------------------------------------------------------------------
   13. Services / capabilities
   -------------------------------------------------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.svc {
  background: var(--ink);
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  transition: background 0.4s var(--ease);
}
.svc:hover { background: var(--ink-2); }
.svc-num {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-2);
  margin-bottom: 1.25rem;
  display: block;
}
.svc h3 {
  font-size: var(--t-xl);
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.svc p { color: var(--text-2); font-size: var(--t-sm); line-height: 1.7; }
/* What each service covers, run together as one line of small capitals
   separated by slashes - a credit line, not a row of tag chips. */
.svc ul { margin-top: 1rem; }
.svc li {
  display: inline;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.svc li + li::before { content: " / "; color: var(--line); }

/* --------------------------------------------------------------------------
   14. Press
   -------------------------------------------------------------------------- */
.press-list { display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }

.press-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.28fr) minmax(0, 1fr) auto;
  gap: clamp(1rem, 0.6rem + 2vw, 3rem);
  align-items: center;
  background: var(--ink);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem) clamp(0.25rem, 1vw, 1rem);
  transition: background 0.35s var(--ease), padding-inline 0.35s var(--ease);
}
.press-item:hover { background: var(--ink-2); }
@media (max-width: 760px) {
  .press-item { grid-template-columns: 1fr; gap: 0.6rem; }
  .press-item .press-go { display: none; }
}

.press-outlet {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.press-outlet small {
  display: block;
  font-size: 1em;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin-top: 0.35rem;
}
.press-headline {
  font-family: var(--font-display);
  font-stretch: var(--w-head);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}
.press-item:hover .press-headline { color: #fff; }
/* A bare arrow, no ring around it. It moves a few pixels toward where it
   points on hover; it does not spin or fill red. */
.press-go,
.index-go {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--text-3);
  transition: color 0.3s var(--ease), translate 0.3s var(--ease);
}
.press-item:hover .press-go,
.index-row:hover .index-go { color: var(--text); translate: 2px -2px; }
.press-go svg { width: 15px; height: 15px; }
.press-item a::after { content: ""; position: absolute; inset: 0; }

/* Pull-quote */
/* A pull-quote is set large in the serif's italic and stands on its own;
   the red bar down its left edge was a blog convention, not ours. */
.quote { max-width: 44ch; }
.quote blockquote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--t-2xl);
  font-weight: 300;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--text);
}
.quote figcaption + .link { margin-top: 1.15rem; }
.quote figcaption {
  margin-top: 1.25rem;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   15. Team
   -------------------------------------------------------------------------- */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.member { background: var(--ink-2); padding: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
.member h3 { font-size: var(--t-2xl); font-weight: 500; }
.member .role {
  margin-top: 0.5rem;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.member p { margin-top: 1rem; color: var(--text-2); font-size: var(--t-sm); line-height: 1.7; }

/* Team portraits. Fixed 4:5 so a card with a photo and a card without stay
   the same shape. --none is the placeholder monogram used until there is a
   real photograph for that person. */
.member-photo {
  aspect-ratio: 4 / 5;
  margin-bottom: 1.5rem;
  overflow: hidden;
  background: var(--ink-3);
}
.member-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member-photo--none {
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
}
.member-photo--none span {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   16. Contact
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 0.7rem + 1vw, 1.5rem);
}

/* Four across on desktop, then two, then one - never a single orphan card. */
.contact-grid--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .contact-grid--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .contact-grid--four { grid-template-columns: 1fr; } }

.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), translate 0.35s var(--ease);
}
.contact-card:hover {
  border-color: var(--text-3);
  background: var(--ink-3);
}
.contact-card h3 { font-size: var(--t-xl); font-weight: 500; }
.contact-card p { margin-top: 0.65rem; color: var(--text-2); font-size: var(--t-sm); line-height: 1.65; flex: 1; }
.contact-card .addr {
  margin-top: 1.5rem;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  word-break: break-word;
}
.contact-card .addr svg { width: 0.9em; height: 0.9em; transition: translate 0.25s var(--ease); flex: none; }
.contact-card:hover .addr svg { translate: 3px 0; }
.contact-card > a::after { content: ""; position: absolute; inset: 0; }

.notice {
  border: 1px solid var(--line-soft);
  border-left: 1px solid var(--text-3);
  background: var(--ink-2);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-size: var(--t-sm);
  color: var(--text-2);
  line-height: 1.7;
}
.notice strong { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------------
   17. FAQ accordion - native <details>
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line-soft); }

.faq details {
  border-bottom: 1px solid var(--line-soft);
}
.faq summary {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-stretch: var(--w-head);
  font-size: var(--t-xl);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-2);
  transition: color 0.3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--text); }
.faq details[open] summary { color: #fff; }

.faq summary .q-num {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-2);
  flex: none;
  width: 2ch;
}
.faq summary .q-text { flex: 1; }
.faq summary .q-icon {
  flex: none;
  width: 22px;
  height: 22px;
  position: relative;
}
.faq summary .q-icon::before,
.faq summary .q-icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transition: rotate 0.35s var(--ease), opacity 0.25s;
}
.faq summary .q-icon::after { rotate: 90deg; }
.faq details[open] .q-icon::after { rotate: 0deg; opacity: 0; }

.faq .answer {
  padding: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.25rem) calc(2ch + 1.25rem);
  color: var(--text-2);
  max-width: 72ch;
  line-height: 1.75;
}
@media (max-width: 560px) { .faq .answer { padding-left: 0; } }

/* --------------------------------------------------------------------------
   18. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  border-top: 1px solid var(--line-soft);
  overflow: clip;
  isolation: isolate;
}
/* The homepage sits outside the alternation, so it keeps the fixed band. */
.home .cta-band { background: var(--ink-2); }
/* Set flush left, like the end of a letter, rather than centred under a red
   glow. A centred uppercase question with one button under it is the most
   common closing block on the web; this is meant to read as a sign-off. */
.cta-inner { display: grid; justify-items: start; gap: 1.5rem; }
.cta-inner h2 {
  font-size: var(--t-3xl);
  font-weight: 500;
  max-width: 16ch;
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line-soft);
  background: var(--ink);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) calc(2rem + env(safe-area-inset-bottom, 0px));
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }

.footer-about .brand { margin-bottom: 1.25rem; }
.footer-about p { color: var(--text-2); font-size: var(--t-sm); max-width: 40ch; line-height: 1.7; }

/* The markup uses <h3>; this rule used to target h4 and never matched, so
   the column heads rendered as large bold headings. */
.footer-col h3 {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.125rem;
}
.footer-col ul { display: grid; gap: 0.7rem; }
.footer-col a,
.footer-base {
  font-family: var(--font-ui);
}
.footer-col a {
  font-size: var(--t-sm);
  color: var(--text-2);
  transition: color 0.25s var(--ease);
}
.footer-col a:hover { color: var(--text); }

.social {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
  color: var(--text-3);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              background 0.25s var(--ease), translate 0.25s var(--ease);
}
.social a:hover { color: var(--text); border-color: var(--text-3); }
.social svg { width: 17px; height: 17px; fill: currentColor; }

.footer-base {
  border-top: 1px solid var(--line-soft);
  padding-top: 1.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.footer-base a:hover { color: var(--text-2); }
.site-credit a { color: var(--text-3); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--line-soft); }
.site-credit a:hover { color: var(--text-2); text-decoration-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-media img { animation: none; scale: 1.04; transition: none; }
  /* First frame stays up when motion is reduced. Both forms are needed: the
     hero images are wrapped in <picture>, so the <img> is no longer the
     first child of .hero-media - the <picture> is. */
  .hero-media img:first-child,
  .hero-media > :first-child img { opacity: 1; }
}

/* --------------------------------------------------------------------------
   21. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.mt-lg { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.mt-md { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
/* --------------------------------------------------------------------------
   22. Disciplines - the multi-hyphenate craft list
   -------------------------------------------------------------------------- */
.craft {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.craft div {
  background: var(--ink);
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  display: flex;
  align-items: center;
  transition: background 0.35s var(--ease);
}
.craft div:hover { background: var(--ink-2); }
.craft span {
  font-family: var(--font-display);
  font-stretch: var(--w-credit);
  font-size: var(--t-lg);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--text);
}

/* A statement block that needs to carry weight on its own */
.manifesto {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.manifesto p { font-size: var(--t-lg); color: var(--text-2); }
.manifesto p + p { margin-top: 1.25rem; }
.manifesto p strong { color: var(--text); font-weight: 500; }
.manifesto .kicker {
  font-family: var(--font-body);
  font-size: var(--t-2xl);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 1.75rem;
}

/* Titles inside .feature-body default to uppercase (film titles).
   This opts a sentence-case headline out. */
/* A whole sentence used as a headline - "Greed, sex and selfishness, in a
   town that keeps its secrets." - is writing, not a title, so it keeps the
   serif: the editorial voice. Titles and section names are Archivo. */
.feature-body h2.sentence {
  font-family: var(--font-body);
  font-stretch: normal;
  font-size: var(--t-3xl);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.015em;
  line-height: 1.12;
}

/* --------------------------------------------------------------------------
   23. Filmography index - for titles without poster art
   -------------------------------------------------------------------------- */
.index-list {
  border-top: 1px solid var(--line-soft);
}
.index-row {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 0.9fr) auto;
  gap: clamp(0.75rem, 0.4rem + 1.4vw, 2rem);
  align-items: center;
  padding-block: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.35s var(--ease);
}
.index-row:hover { background: var(--ink-2); }

.index-year {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-2);
}
.index-title {
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.25s var(--ease);
}
.index-row:hover .index-title { color: #fff; }
.index-title em {
  display: block;
  font-style: normal;
  font-stretch: normal;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-2);
  margin-top: 0.35rem;
  line-height: 1.55;
}
.index-meta,
.index-role {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  color: var(--text-2);
}
.index-role { color: var(--text-3); }
.index-award {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.index-go svg { width: 13px; height: 13px; }
.index-row a::after { content: ""; position: absolute; inset: 0; }

@media (max-width: 860px) {
  .index-row { grid-template-columns: 4rem minmax(0, 1fr); row-gap: 0.35rem; }
  .index-meta { grid-column: 2; }
  .index-role { grid-column: 2; }
  .index-go   { display: none; }
}

/* In-development card: title carries the artwork's job */
.film-poster--title {
  display: grid;
  place-items: center;
  padding: 1.5rem;
  text-align: center;
  background:
    linear-gradient(160deg, var(--ink-3), var(--ink));
}
.film-poster--title::after { display: none; }
.film-poster--title b {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--text);
}
.film-poster--title i {
  display: block;
  font-style: normal;
  margin-top: 1rem;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   24. Split band - image beside text
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* Director page: on a phone the name goes above the portrait, the paragraphs
   below it. The text column's wrapper dissolves (display: contents) so its
   two halves become grid items of their own and can be ordered around the
   figure. On desktop the wrapper is an ordinary block and nothing moves. */
@media (max-width: 860px) {
  .split--head-first > div:not(.split-media) { display: contents; }
  .split--head-first .split-head { order: -1; }
  .split--head-first .split-body > .lede:first-child { margin-top: 0; }
}

/* Give the media the larger share where the picture is doing the work and the
   text column can afford to narrow - .lede is capped at 62ch anyway, so the
   paragraphs are unaffected. Collapses with .split at the mobile breakpoint. */
.split--media-lg { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }
@media (max-width: 860px) { .split--media-lg { grid-template-columns: 1fr; } }

.split-media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--ink-3);
}
.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.7s var(--ease-out);
}
.split-media:hover img { scale: 1.03; }
.split-media figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.25rem 1rem;
  background: linear-gradient(to top, rgba(8,8,10,0.92), transparent);
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
@media (min-width: 861px) { .split--reverse .split-media { order: 2; } }

/* --------------------------------------------------------------------------
   25. Behind-the-scenes gallery
   -------------------------------------------------------------------------- */
.bts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(0.5rem, 0.35rem + 0.7vw, 0.875rem);
  align-items: start;
}
.bts figure {
  position: relative;
  overflow: hidden;
  background: var(--ink-3);
  aspect-ratio: 4 / 5;
}
.bts figure.wide { aspect-ratio: 3 / 2; }
@media (min-width: 700px) { .bts figure.wide { grid-column: span 2; } }

/* Three columns so a wide + a portrait fill each row exactly, with every
   tile the same height - no ragged gap at the end of the grid. */
@media (min-width: 900px) {
  .bts { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .bts figure,
  .bts figure.wide { aspect-ratio: auto; height: clamp(300px, 25vw, 420px); }
}
.bts img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: scale 0.7s var(--ease-out);
}
.bts figure:hover img { scale: 1.04; }
.bts figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1rem 0.9rem;
  background: linear-gradient(to top, rgba(8,8,10,0.9), transparent);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--text-2);
  opacity: 0;
  translate: 0 6px;
  transition: opacity 0.4s var(--ease), translate 0.4s var(--ease);
}
.bts figure:hover figcaption { opacity: 1; translate: 0 0; }

/* --------------------------------------------------------------------------
   26. Timeline
   -------------------------------------------------------------------------- */
.timeline { position: relative; padding-left: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.timeline::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5rem; bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(var(--line), var(--line-soft) 85%, transparent);
}
.tl-item { position: relative; padding-bottom: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: calc(clamp(1.5rem, 1rem + 2vw, 2.75rem) * -1 - 4px);
  top: 0.5rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--red-text);
  transition: background 0.3s var(--ease), scale 0.3s var(--ease);
}
.tl-item.is-now::before { background: var(--red); border-color: var(--red); }

.tl-year {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-2);
  margin-bottom: 0.4rem;
}
.tl-item h3 {
  font-size: var(--t-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0.45rem;
}
.tl-item p { font-size: var(--t-sm); color: var(--text-2); line-height: 1.7; max-width: 60ch; }

@media (min-width: 900px) {
  .timeline--two { columns: 2; column-gap: clamp(2rem, 1rem + 3vw, 4rem); }
  .timeline--two .tl-item { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   27. Numbered process steps
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: clamp(1rem, 0.6rem + 1.5vw, 2.5rem);
  background: var(--ink);
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem) clamp(1rem, 0.7rem + 1vw, 1.75rem);
  align-items: start;
  transition: background 0.35s var(--ease);
}
.step:hover { background: var(--ink-2); }
@media (max-width: 780px) {
  .step { grid-template-columns: 3rem minmax(0, 1fr); row-gap: 0.5rem; }
  .step p { grid-column: 2; }
}
.step b {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-2);
}
.step h3 { font-size: var(--t-xl); font-weight: 500; letter-spacing: -0.01em; }
.step p { font-size: var(--t-sm); color: var(--text-2); line-height: 1.7; }

/* --------------------------------------------------------------------------
   30. Page hero with a facts column
   Stops the interior hero bands from being half-empty.
   -------------------------------------------------------------------------- */
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: end;
}
@media (max-width: 900px) { .page-hero-grid { grid-template-columns: 1fr; } }

.hero-facts dl {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.hero-facts div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  background: var(--ink);
  padding: 0.8rem clamp(0.9rem, 0.7rem + 0.5vw, 1.2rem);
  transition: background 0.3s var(--ease);
}
.hero-facts div:hover { background: var(--ink-2); }
.hero-facts dt {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hero-facts dd {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  text-align: right;
}
.hero-facts dd em { font-style: normal; color: var(--text-2); }

/* --------------------------------------------------------------------------
   31. Horizontal film cards
   A 3-column poster grid holding two films leaves a visible hole. These fill
   the row and carry more detail per title.
   -------------------------------------------------------------------------- */
.film-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(1rem, 0.7rem + 1vw, 1.5rem);
}
.film-row .film-card {
  flex-direction: row;
  gap: clamp(1rem, 0.7rem + 1vw, 1.5rem);
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  padding: clamp(0.9rem, 0.7rem + 0.6vw, 1.25rem);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease),
              translate 0.35s var(--ease);
}
.film-row .film-card:hover {
  border-color: var(--line);
  background: var(--ink-3);
}
.film-row .film-poster {
  width: clamp(112px, 13vw, 168px);
  flex: none;
  align-self: flex-start;
}
.film-row .film-info {
  padding-top: 0.15rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.film-row .film-note { margin-top: 0.6rem; }
.film-row .film-meta {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.film-row .film-badge { font-size: var(--t-xs); bottom: 0.6rem; left: 0.6rem; }
@media (max-width: 480px) {
  .film-row .film-card { flex-direction: column; }
  .film-row .film-poster { width: 100%; max-width: 220px; }
}

/* --------------------------------------------------------------------------
   32. Title card - stands in for poster art on titles that have none
   -------------------------------------------------------------------------- */
.title-card {
  display: grid;
  place-items: center;
  text-align: center;
  aspect-ratio: 2 / 3;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--line-soft);
  background:
    linear-gradient(160deg, var(--ink-3), var(--ink));
}
.title-card b {
  display: block;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.12;
  color: var(--text);
}
.title-card i {
  display: block;
  font-style: normal;
  margin-top: 1.1rem;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Typographic video facade, for films with no still to show */
.video-facade--type {
  background:
    linear-gradient(160deg, var(--ink-3), var(--ink));
  gap: 1.25rem;
  align-content: center;
}
.video-facade--type .play-label { position: static; }

/* Only the title stretches across the row - so a second link in the row
   (IMDb, say) stays independently clickable. */
.index-row a::after { content: none; }
.index-row .index-title > a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Prev / next between film pages */
.film-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.film-nav a {
  background: var(--ink-2);
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  transition: background 0.3s var(--ease);
}
.film-nav a:hover { background: var(--ink-3); }
.film-nav span {
  display: block;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.5rem;
}
.film-nav strong {
  font-size: var(--t-xl);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}
.film-nav a:hover strong { color: #fff; }

/* --------------------------------------------------------------------------
   33. Film lead - player beside the facts
   A full-width 16:9 player pushes every detail below the fold. Pairing it
   with a rail means the visitor sees what the film IS without scrolling.
   -------------------------------------------------------------------------- */
.lead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  align-items: start;
}
@media (max-width: 940px) { .lead-grid { grid-template-columns: 1fr; } }

.lead-rail { display: flex; flex-direction: column; }
.lead-rail .eyebrow { margin-bottom: 0.85rem; }
.lead-rail h2 {
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0.85rem;
}
.lead-rail p.synopsis {
  font-size: var(--t-base);
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

/* Condensed spec table for the rail */
.spec-list--compact div {
  grid-template-columns: minmax(100px, 0.42fr) minmax(0, 1fr);
  padding: 0.6rem clamp(0.8rem, 0.6rem + 0.5vw, 1.1rem);
  font-size: var(--t-xs);
}
.spec-list--compact dt { letter-spacing: 0.1em; }
.spec-list--compact dd { font-size: var(--t-sm); }
@media (max-width: 620px) {
  .spec-list--compact div { grid-template-columns: 1fr; gap: 0.3rem; }
}

.lead-actions {
  /* also used inside .feature-body since the trailer moved out of the lead */
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.lead-actions .btn { padding: 0.8em 1.35em; font-size: var(--t-xs); }


/* Two stills side by side, filling the row exactly */
.bts--pair { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) {
  .bts--pair { grid-template-columns: repeat(2, 1fr); }
  .bts--pair figure { height: clamp(320px, 30vw, 480px); aspect-ratio: auto; }
}
/* Phones: two pair tiles side by side land at about 163px wide, which crops a
   landscape frame down to a sliver and throws the composition away. One column
   instead, so each picture gets the full measure. .is-landscape opts a wide
   source out of the default upright tile -- deliberately not the existing
   .wide class, whose `grid-column: span 2` above 700px would break the
   two-column pair on desktop. */
@media (max-width: 640px) {
  .bts--pair { grid-template-columns: 1fr; }
  .bts--pair .is-landscape { aspect-ratio: 3 / 2; }
}

/* A pull-quote sitting alone in a wide section reads as empty space */
.quote--centred { margin-inline: auto; }

/* --------------------------------------------------------------------------
   30. Credibility strip
   The third-party names (LA Times, SIGGRAPH, Screen Media) were previously
   buried three screens down as body text. Set as type rather than logos:
   no trademark artwork to license, no ragged bitmap logos to source, and it
   reads as a quiet masthead rather than a badge wall.
   -------------------------------------------------------------------------- */
.creds {
  border-block: 1px solid var(--line-soft);
  background: var(--ink-2);
  padding-block: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
}
.creds-inner {
  display: grid;
  justify-items: center;
  gap: clamp(0.9rem, 0.6rem + 1vw, 1.5rem);
}
.creds-label {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}
.creds-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  /* Gap is deliberately modest: five names have to hold one row down to
     roughly 1100px before wrapping, and a wrapped strip reads as clutter
     rather than as a masthead. */
  gap: 0.6rem clamp(1rem, 0.45rem + 1.5vw, 2rem);
}
.creds-item {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: clamp(0.75rem, 0.7rem + 0.22vw, 0.875rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s var(--ease-out);
}
a.creds-item:hover,
a.creds-item:focus-visible { color: var(--text); }
/* Qualifier rides alongside the name rather than under it, so every item in
   the row keeps the same height and the baseline stays flat. */
.creds-item span {
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-left: 0.4rem;
}

/* --------------------------------------------------------------------------
   31. Forms
   Every route into this company used to be a mailto:, which silently does
   nothing on a machine with no mail client configured - a common setup on
   locked-down work machines, which is exactly what an agency producer is
   sitting at. These forms are the primary route; the mailto links stay on
   the page as the secondary one.
   -------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
}
.form-row {
  display: grid;
  gap: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
}
@media (min-width: 700px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}
.field { display: grid; gap: 0.5rem; }
.field label {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.field label .req { color: var(--text-2); margin-left: 0.25em; }
/* Fields are paper with ink in them - the same stock as the press
   clippings. Near-black boxes on the near-black page were hard to find, and
   a form is the one place on the site where nobody should have to look for
   where to click. */
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--paper);
  color: var(--paper-ink);
  border: 1px solid var(--paper);
  padding: 0.85em 1em;
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: 1.5;
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* Keep their natural height. Without this, a control sitting beside a field
   that carries a .hint gets stretched by the grid to match it. */
.field input,
.field select { align-self: start; }
.field textarea { resize: vertical; min-height: 8.5rem; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--paper-text-2) 50%),
                    linear-gradient(135deg, var(--paper-text-2) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field input:hover,
.field select:hover,
.field textarea:hover { background-color: #f4f0e8; }
/* Focus: an off-white ring outside the field, so the field itself never
   changes colour while someone is typing in it. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  background-color: #f4f0e8;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--text);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--paper-text-2); opacity: 1; }
/* Chrome paints autofilled fields its own blue; the inset shadow covers it
   with paper, and the long transition stops it flashing back in. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--paper) inset;
  -webkit-text-fill-color: var(--paper-ink);
  caret-color: var(--paper-ink);
  transition: background-color 9999s ease-out 0s;
}
.field .hint { font-size: var(--t-sm); color: var(--text-3); }

/* Honeypot: a real person never sees this, a naive bot fills it in. */
.field--trap {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 0.25rem;
}
.form-actions .fine { font-size: var(--t-sm); color: var(--text-3); }
.form button[type="submit"][disabled] { opacity: 0.55; cursor: progress; }

.form-status {
  font-size: var(--t-sm);
  line-height: 1.7;
  padding: clamp(0.9rem, 0.75rem + 0.6vw, 1.15rem) clamp(1rem, 0.85rem + 0.7vw, 1.35rem);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--line);
  background: var(--ink-2);
  color: var(--text-2);
}
.form-status[hidden] { display: none; }
.form-status strong { color: var(--text); font-weight: 600; }
.form-status--ok { border-left-color: var(--text-2); }
.form-status--err { border-left-color: #b45309; }

/* --------------------------------------------------------------------------
   32. Testimonials
   Two or three short quotes from people who have actually worked with him -
   a producer, an actor, someone at a distributor. Nothing on this site
   currently has anyone else vouching for the work, and in this industry that
   is the single cheapest thing that makes a small operation read as a real
   one. Markup is commented out on work.html until there are real quotes:
   an empty testimonial rail is worse than none.
   -------------------------------------------------------------------------- */
.voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 22vw, 320px), 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.voice {
  background: var(--ink-2);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.voice blockquote {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--text);
  /* Quote marks are drawn, not typed, so the copy stays clean in the source */
  position: relative;
}
.voice blockquote::before {
  content: "\201C";
  font-family: var(--font-body);
  font-size: 3.5rem;
  line-height: 0;
  color: var(--text-3);
  position: absolute;
  top: 0.55em;
  left: -0.55em;
}
.voice figcaption {
  margin-top: auto;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.voice figcaption small {
  display: block;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin-top: 0.35rem;
}

/* Set by the nav script while the full-screen mobile menu is open, so the
   page behind the overlay does not scroll under the user's finger. */
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   FEATURED VIDEO CAROUSEL
   Slides stack in one .video-frame; only the current one is shown (the rest
   carry [hidden]). Arrows sit over the frame edges and are removed entirely
   by the script when there is a single slide.
   -------------------------------------------------------------------------- */
.video-carousel { position: relative; }

/* The author-level `display: grid` on .video-facade outranks the UA stylesheet's
   [hidden] { display: none }, so hidden slides kept painting on top of the
   visible one - two play buttons, two labels. Re-assert it explicitly. */
.video-facade[hidden],
.video-frame iframe[hidden],
.video-slide[hidden] { display: none; }

.video-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-soft);
  background: rgba(8, 8, 10, 0.62);
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.video-nav svg { width: 20px; height: 20px; }
.video-nav:hover { border-color: var(--text); color: var(--text); }
.video-nav--prev { left: clamp(0.5rem, 1.5vw, 1rem); }
.video-nav--next { right: clamp(0.5rem, 1.5vw, 1rem); }
.video-carousel[data-single] .video-nav,
.video-carousel[data-single] .video-count { display: none; }

.video-count {
  margin-top: 0.85rem;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-align: right;
}

/* Typographic slide card - same treatment as the standalone film pages. */
.type-card {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  color: var(--text);
}
.type-card b {
  display: block;
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
}
.type-card i {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}
/* The type slide lays its card, button and label out in a column. */
.video-facade--type { grid-auto-flow: row; }
.video-facade--type .play-label { position: static; margin-top: 0; }

/* --------------------------------------------------------------------------
   FESTIVAL LAUREL BADGES
   The real thing: two mirrored branches with the award, festival and year set
   between them, the way a laurel appears on a poster or a festival card.
   -------------------------------------------------------------------------- */
.laurel-grid {
  display: grid;
  /* Two across, so four badges make a clean 2x2 and each has room for the
     festival name without the branches squeezing the text. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
}
.laurel-badge {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem;
  padding: clamp(1rem, 0.7rem + 1vw, 1.75rem) 0;
  color: var(--text-2);
  transition: color 0.35s var(--ease);
}
.laurel-badge:hover { color: var(--text); }
.laurel-badge svg {
  /* sized by height, width follows the tightened viewBox, so the branch box
     hugs the artwork and the wreath closes around the text */
  height: clamp(78px, 7.5vw, 112px);
  width: auto;
  fill: currentColor;
  flex: none;
}
.laurel-badge .laurel-r { transform: scaleX(-1); }

.laurel-text {
  display: grid;
  gap: 0.3rem;
  text-align: center;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  line-height: 1.15;
}
.laurel-text .laurel-award {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-2);
}
.laurel-text .laurel-fest {
  font-size: clamp(0.8rem, 0.72rem + 0.3vw, 0.95rem);
  font-weight: 500;
  color: var(--text);
  text-wrap: balance;
}
.laurel-text .laurel-film {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.laurel-text .laurel-year {
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   PAGE BANDS
   Every page except the homepage opens on the lighter tone and alternates down
   the page: lighter, black, lighter, black. Driven from here rather than from
   inline styles on each <section>, so adding or reordering a section on any
   page re-stripes it automatically instead of needing the bands hand-fixed.

   nth-of-type, not nth-child: it counts only <section> siblings, so a stray
   non-section element in <main> cannot shift the whole rhythm.
   -------------------------------------------------------------------------- */
body:not(.home) main > section:nth-of-type(odd) {
  background: var(--ink-2);
}
/* One hairline where two bands meet, rather than a border on each band. */
body:not(.home) main > section + section {
  border-top: 1px solid var(--line-soft);
}

/* --------------------------------------------------------------------------
   FILM SLIDER
   Three cards across, the rest a swipe or an arrow away. Built on scroll-snap
   rather than transforms: with JS off it is still a scrollable strip, and on
   touch it swipes with no code at all. The arrows only appear once the script
   confirms the track actually overflows.
   -------------------------------------------------------------------------- */
.film-slider { --film-gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem); position: relative; }

.film-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--film-gap) * 2) / 3);
  gap: var(--film-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* room for the card hover lift, which would otherwise be clipped */
  padding-block: 2px 6px;
}
.film-track::-webkit-scrollbar { display: none; }
.film-track > * { scroll-snap-align: start; }

@media (max-width: 900px) {
  .film-track { grid-auto-columns: calc((100% - var(--film-gap)) / 2); }
}
/* Phones: no sideways scroll at all. A sliver of the next poster at the
   edge was the only hint there was more, and the arrows sit at the top of
   the section, scrolled away by the time anyone reaches the posters - so
   three of the five films went unseen. Two posters to a row instead: every
   film is on the page, found by scrolling down like everything else. */
@media (max-width: 620px) {
  .film-track {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    column-gap: 0.9rem;
    row-gap: 2rem;
    overflow: visible;
    scroll-snap-type: none;
  }
  .film-track .film-title { font-size: 1.375rem; }
  .film-track .film-note { font-size: 0.9375rem; }
  .film-track .film-badge { bottom: 0.5rem; left: 0.5rem; font-size: 0.75rem; letter-spacing: 0.08em; padding: 0.35em 0.55em; }
  .film-track .film-poster--title b { font-size: 1.75rem; }
  /* Nothing to page through on a phone, so no arrows. */
  [data-slider-nav] { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .film-track { scroll-behavior: auto; }
}

.slider-nav { display: flex; gap: 0.5rem; align-items: center; }
.slider-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.slider-btn svg { width: 20px; height: 20px; }
.slider-btn:hover:not(:disabled) { border-color: var(--text); color: var(--text); }
.slider-btn:disabled { opacity: 0.3; cursor: default; }

/* --------------------------------------------------------------------------
   ARTICLES - news posts and commissioned projects
   Running text from Markdown. Set as a journal column: the serif at reading
   size, a measure of about 66 characters, quiet subheads.
   -------------------------------------------------------------------------- */
.article-head .eyebrow a { color: inherit; }
.article-head .eyebrow a:hover { color: var(--text); }
.article-figure img { width: 100%; height: auto; }
.article-figure figcaption {
  margin-top: 0.75rem;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.prose { max-width: 66ch; font-size: var(--t-lg); color: var(--text-2); line-height: 1.65; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3 { color: var(--text); font-size: var(--t-xl); margin-top: 2em; }
.prose strong { color: var(--text); font-weight: 500; }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose blockquote {
  font-style: italic;
  font-size: var(--t-xl);
  color: var(--text);
  border-left: 1px solid var(--line);
  padding-left: 1.25em;
}
.article-related {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* News index: date in the margin, headline in the serif. A dated list, the
   way a journal runs its notices - not a grid of cards. */
.news-list { border-top: 1px solid var(--line-soft); }
.news-item {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: clamp(1rem, 0.5rem + 2vw, 3rem);
  padding-block: clamp(1.4rem, 1rem + 1.2vw, 2.25rem);
  border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 640px) { .news-item { grid-template-columns: 1fr; gap: 0.5rem; } }
.news-date {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-top: 0.45em;
}
.news-title { font-size: var(--t-2xl); }
.news-title a { transition: color 0.25s var(--ease); }
.news-title a:hover { color: #fff; }
.news-summary { margin-top: 0.6rem; color: var(--text-2); max-width: 60ch; }

/* 404 and thank-you: the one line set as a title card. */
.title-card-text {
  font-family: var(--font-display);
  font-stretch: var(--w-credit);
  font-size: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 0.92;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   HOMEPAGE
   Seven sections, each with its own rhythm: a full frame, a column of type,
   moving image, a credit roll, printed matter, a ledger, a sign-off. No two
   are the same grid.
   -------------------------------------------------------------------------- */

/* Statement - a narrow margin note on the left, the text set wide and
   pushed right. The first paragraph reads as a lead, the second as text. */
.statement-grid--offset { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); }
@media (max-width: 820px) { .statement-grid--offset { grid-template-columns: 1fr; } }
.statement-mark {
  font-family: var(--font-display);
  font-stretch: var(--w-credit);
  font-size: var(--t-xl);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text-3);
  padding-top: 0.5rem;
}
.statement-text .statement-lead {
  font-size: var(--t-2xl);
  line-height: 1.35;
  color: var(--text);
  max-width: 30ch;
}
.statement-text .statement-lead strong { font-weight: 400; }
.statement-text .statement-lead + p { max-width: 54ch; }

/* Trailer - title and synopsis in a narrow column beside the frame on a wide
   screen, so the picture gets the width and the words do not run under it. */
.trailer .shell {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1.58fr);
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  align-items: end;
}
@media (max-width: 960px) { .trailer .shell { grid-template-columns: 1fr; } }
.trailer-title {
  font-family: var(--font-display);
  font-stretch: var(--w-credit);
  font-size: clamp(2.75rem, 1.8rem + 3.6vw, 5rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 0.9;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.trailer-head .featured-meta {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  letter-spacing: 0.14em;
}
.trailer-head .featured-synopsis { font-size: var(--t-base); margin-bottom: 1.25rem; }

/* Credit roll - the whole filmography, one line per film. The title is the
   loud column; everything else is set small and grey around it. */
.roll {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 24vw, 340px);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.roll-list { border-top: 1px solid var(--line-soft); }
.roll-row {
  position: relative;
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr) minmax(0, 0.8fr);
  grid-template-areas: "year title kind" "year title note";
  column-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  align-items: baseline;
  padding-block: 1rem 1.05rem;
  border-bottom: 1px solid var(--line-soft);
}
.roll-year {
  grid-area: year;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  color: var(--text-3);
}
.roll-title {
  grid-area: title;
  font-family: var(--font-display);
  font-stretch: var(--w-credit);
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem);
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color 0.3s var(--ease);
}
.roll-title::after { content: ""; position: absolute; inset: 0; }
.roll-kind, .roll-note {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.roll-kind { grid-area: kind; }
.roll-note { grid-area: note; color: var(--text-3); }
.roll-row:hover .roll-title,
.roll-row:focus-within .roll-title,
.roll-row.is-on .roll-title { color: #fff; }

/* The frame beside the roll: stays in view while the list scrolls past and
   shows the row under the pointer. Every shot is stacked in the same cell
   and cross-fades; without the script the first one simply stays up. */
.roll-frame {
  position: sticky;
  top: calc(var(--nav-h) + var(--safe-top) + 2rem);
  display: grid;
  aspect-ratio: 750 / 1111;
  background: var(--ink-2);
}
.roll-shot {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.roll-shot.is-on { opacity: 1; }
.roll-shot img { width: 100%; height: 100%; object-fit: cover; }
.roll-card {
  display: grid;
  place-content: center;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
  border: 1px solid var(--line-soft);
}
.roll-card b {
  font-family: var(--font-display);
  font-stretch: var(--w-credit);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-transform: uppercase;
}
.roll-card i {
  margin-top: 0.85rem;
  font-style: normal;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
@media (max-width: 900px) {
  .roll { grid-template-columns: 1fr; }
  .roll-frame { display: none; }
  .roll-row {
    grid-template-columns: 3rem minmax(0, 1fr);
    grid-template-areas: "year title" "year kind" "year note";
    row-gap: 0.35rem;
  }
}

/* Press - printed matter, so it is printed: the one section on paper. Three
   cuttings side by side, outlet and date above the headline, byline below. */
.clippings {
  background: var(--paper);
  color: var(--paper-ink);
}
.clippings .section-title { color: var(--paper-ink); }
.clippings .link { color: var(--paper-ink); }
.clip-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--paper-ink);
}
.clip {
  padding: 1.5rem clamp(1rem, 0.5rem + 1.5vw, 2rem) 0.5rem 0;
}
.clip + .clip {
  border-left: 1px solid var(--paper-2);
  padding-left: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}
@media (max-width: 860px) {
  .clip-list { grid-template-columns: 1fr; }
  .clip + .clip { border-left: 0; padding-left: 0; border-top: 1px solid var(--paper-2); }
  .clip { padding-bottom: 1.5rem; }
}
.clip-outlet {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.clip-outlet span { font-weight: 400; color: var(--paper-text-2); }
.clip-headline {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-stretch: var(--w-head);
  font-weight: 500;
  font-size: var(--t-2xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.clip-headline a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 92%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease-out);
}
.clip-headline a:hover { background-size: 100% 1px; }
.clip-byline {
  margin-top: 0.9rem;
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--paper-text-2);
}
.clippings :focus-visible { outline-color: var(--paper-ink); }

/* Commissioned - a ledger: the service in the credit face, one line of what
   it covers beside it. */
.ledger { border-top: 1px solid var(--line-soft); }
.ledger div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 560px) { .ledger div { grid-template-columns: 1fr; gap: 0.4rem; } }
.ledger dt {
  font-family: var(--font-display);
  font-stretch: var(--w-credit);
  font-size: var(--t-xl);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: uppercase;
}
.ledger dd { margin: 0; color: var(--text-2); font-size: var(--t-base); }
.home .commissioned { border-top: 1px solid var(--line-soft); }

/* --------------------------------------------------------------------------
   TITLE CARDS FOR FILMS WITHOUT ART
   A film with no poster yet is printed on paper: its title in ink, like a
   title card or the cover sheet of a script. A dark card on the dark page
   read as an empty hole; paper reads as a decision. Applies to the poster
   slot (Films, homepage), the standalone title card and the frame beside
   the homepage credit roll.
   -------------------------------------------------------------------------- */
.film-poster--title,
.title-card,
.roll-card {
  background: var(--paper);
  border: 0;
  color: var(--paper-ink);
}
.film-poster--title b,
.title-card b,
.roll-card b { color: var(--paper-ink); }
.film-poster--title i,
.title-card i,
.roll-card i { color: var(--paper-text-2); }
/* The status sticker inverts on paper: ink with paper lettering. */
.film-poster--title .film-badge {
  background: var(--paper-ink);
  border-color: var(--paper-ink);
  color: var(--paper);
}

/* A film's own page opens on its title, set as the films are set
   everywhere else: narrow capitals. (body.film-page comes from the layout
   whenever the page carries film data.) */
.film-page .page-hero h1 {
  font-stretch: var(--w-credit);
  font-size: clamp(3rem, 1.8rem + 5vw, 6.5rem);
  letter-spacing: 0.01em;
  line-height: 0.9;
  text-transform: uppercase;
}

/* A film's name used as a section heading elsewhere (About's "Retina")
   is still a film title, so it takes the capitals. */
.section-title.film-name {
  font-stretch: var(--w-credit);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* A pull-quote set into running text stands apart from the paragraphs
   either side of it, the way a magazine gives one a few lines of air. */
* + .quote { margin-top: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); }
.quote + * { margin-top: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); }

/* --------------------------------------------------------------------------
   SOCIAL ICONS
   In the logo's red (#c40000, sampled from the mark), wherever they appear:
   header, mobile menu, footer, contact page. They go white on hover.
   -------------------------------------------------------------------------- */
.nav-links .nav-social a,
.social a {
  color: #c40000;
  transition: color 0.2s var(--ease), border-color 0.25s var(--ease);
}
.nav-links .nav-social a:hover,
.social a:hover { color: var(--text); }

/* Cast as a credit list: each name in the film-title capitals, its IMDb
   link set small beside it. Used on Retina until there are cast portraits
   good enough to show large. */
.cast-credits { border-top: 1px solid var(--line-soft); }
.cast-credits li { border-bottom: 1px solid var(--line-soft); }
.cast-credits a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
}
.cast-credit-name {
  font-family: var(--font-display);
  font-stretch: var(--w-credit);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color 0.25s var(--ease);
}
.cast-credit-link {
  font-family: var(--font-ui);
  font-stretch: var(--w-label);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cast-credits a:hover .cast-credit-name { color: #fff; }
.cast-credits a:hover .cast-credit-link { color: var(--text); }