/* ============================================================
   PROJECT NON FICTION — siena-geometry homepage
    Measured from the reference build, rebuilt in our own code:
    85vh film panels with a 3rem/3.8rem image inset, 89.6px
    condensed uppercase titles, 9.6px serif eyebrows, hairline
    metadata rows, right-side expanding menu, SCROLL cursor badge.
    PNF content only: no awards, no press quotes, no invented
    credits. The strand block and trailer button are ours.

    Type   : Archivo condensed (titles) / Instrument Serif (eyebrows)
             / Space Mono (micro-labels). No new dependencies.
    Colour : black + warm off-white, one red accent, nothing else
    Motion : expo-out arrivals, .05/frame scroll lerp with panel
             snap. Everything collapses under prefers-reduced-motion.
    ============================================================ */

/* ── tokens ───────────────────────────────────────────────── */
:root {
  --ink:      #000000;
  --ink-deep: #000000;
  --ink-lift: #0c0b0a;
  --paper:    #faf7ef;
  --muted:    #8d887e;
  --dim:      #5b564d;
  --accent:   #c8443a;
  --line:     color-mix(in srgb, var(--paper) 14%, transparent);
  --line-soft:color-mix(in srgb, var(--paper) 8%, transparent);

  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --edge: clamp(1.25rem, 4vw, 3.5rem);
  /* Panel frame: image sits inside this inset, content inside again. */
  --gy: 3rem;
  --gx: 3rem;
  --roll-gx: 3.8rem;
  /* Height of the pinned nav (~96px) — content snapped to a panel's
     top edge must clear it. */
  --chrome-h: 7rem;

  /* Easings: expo-out arrivals, quint-out hovers. */
  --ease:   cubic-bezier(.19, 1, .22, 1);
  --easeOut: cubic-bezier(.23, 1, .32, 1);
  --slow:   1100ms;
  --mid:    800ms;
  --fast:   220ms;

  --z-cursor: 50;
  --z-chrome: 60;
  --z-menu:  80;
  --z-grain: 90;
  --z-loader: 100;
}

/* ── reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  font-optical-sizing: auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

img, video { display: block; max-width: 100%; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 1px solid var(--paper);
  outline-offset: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; top: 0; left: 0; z-index: 100;
  transform: translateY(-120%);
  padding: .8rem 1.2rem;
  background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.skip:focus { transform: translateY(0); }

/* ── virtual scroll mode (desktop) ──────────────────────────── */
/* JS adds .is-virtual to <html>. The document itself never scrolls;
   #scroll-wrap translates instead, so native scrollbars and overflow
   are switched off to avoid a double scroll. */
html.is-virtual,
html.is-virtual body {
  overflow: hidden;
  overscroll-behavior: none;
}
html.is-virtual #scroll-wrap {
  will-change: transform;
  cursor: grab;
}
html.is-virtual #scroll-wrap.is-dragging { cursor: grabbing; }
/* Fixed chrome (menu, grain) lives outside the wrapper so it still
   pins to the screen; everything else rides the wrapper. */

/* Film grain — sits above everything, ignores input. */
.grain {
  position: fixed; inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain { animation: grain 6s steps(5) infinite; }
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-3%, 2%); }
  40%      { transform: translate(2%, -3%); }
  60%      { transform: translate(-2%, -2%); }
  80%      { transform: translate(3%, 3%); }
}

/* ── shared type — every text size on the page, set once ───── */
/* The whole grammar: a 10px label above a 13px value. Repeat. */
.meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem clamp(1rem, 3vw, 2rem);
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.8;
}
.meta-line b, .meta-line .on { color: var(--paper); font-weight: 400; }

.eyebrow {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: baseline;
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.label {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}
.value {
  font-size: .84rem;
  letter-spacing: .02em;
  color: var(--paper);
}
.value .mute { color: var(--muted); }

/* Masked line reveal — one shared transition. */
.mask { display: block; overflow: clip; }
.mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--slow) var(--ease);
}
.in .mask > span { transform: translateY(0); }

[data-reveal] {
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; }

/* Panel text arrives the same way: rise + fade, once. Titles carry
   it per-letter (see splitTitles); the block itself only fades. */
.film__title { opacity: 0; transition: opacity var(--mid) var(--ease); }
.film__title.in { opacity: 1; }
.film__strand, .film__syn {
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.film__strand.in, .film__syn.in { opacity: 1; transform: none; }

/* Split-title roll — siena's move. Each glyph is an original + a clone
   stacked in a one-line mask; the clone sits a line below the original.
   JS rolls them in on arrival (random stagger + a short reel spin) and
   re-rolls them softly on a timer, so the title reads as alive rather
   than a straight wave. With no JS or reduced motion the glyphs simply
   rest in place (original shown, clone hidden by the mask). */
.split-rollover {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.split-space { display: inline-block; width: .28em; }
.split-word { display: inline-block; white-space: nowrap; }
.originalText2, .cloneText2 { display: block; }
.cloneText2 { position: absolute; top: 100%; left: 0; }

/* ── nav — logo image left, hamburger right ─────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: calc(var(--z-menu) + 1);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 8.4375rem;
  padding: 2rem 2.1rem 0;
  color: var(--paper);
  pointer-events: none;
  opacity: 0;
  animation: fade-up 1200ms var(--ease) 240ms forwards;
}
.nav a, .nav button { pointer-events: auto; }

.nav__logo {
  display: block;
  width: 3.7rem;
}
.nav__logo img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(.9rem); }
  to   { opacity: 1; transform: none; }
}

/* Icon: three lines that fold into an X. */
.menu-btn {
  width: 2.75rem; height: 2.75rem;
  display: grid;
  place-items: center;
}
.menu-btn__lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1.75rem;
}
.menu-btn__lines i {
  display: block;
  width: 100%; height: 1px;
  background: currentColor;
  transition: transform 1.1s var(--ease);
}
.menu-btn__lines i:nth-child(1) { transform: translateY(-5px); }
.menu-btn__lines i:nth-child(2) { transition-delay: .05s; }
.menu-btn__lines i:nth-child(3) { transform: translateY(5px); }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:nth-child(1) { transform: translateY(0) rotate(-45deg) scaleX(.8); transition-delay: .05s; }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:nth-child(2) { transform: scaleX(0); transition-delay: 0s; }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:nth-child(3) { transform: translateY(0) rotate(45deg) scaleX(.8); transition-delay: .05s; }

/* Nav right cluster: the current-film ticket sits beside the hamburger,
   like the reference — thumb + title above a perforated info row. */
.nav__right {
  display: flex;
  align-items: stretch;
  gap: 0;
  transform: scale(.78);
  transform-origin: 100% 0;
}
/* The current-film card is a ticket. The left corners are rounded;
   the top-right and bottom-right corners are cut concave, forming the
   perforation stub where the hamburger cell joins. Fixed size so the
   clip-path maps 1:1 (237×103, matching the reference). */
.nav__film {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  width: 237px;
  height: 103px;
  padding: .55rem .8rem .5rem;
  background: var(--paper);
  color: var(--ink);
  clip-path: path("M0 9 A9 9 0 0 1 9 0 H228 A9 9 0 0 0 237 9 V94 A9 9 0 0 0 228 103 H9 A9 9 0 0 1 0 94 Z");
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.35rem);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s;
}
.nav__film.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
html.menu-open .nav__film { opacity: 0; visibility: hidden; }
.nav__film-top {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: .55rem;
  min-width: 0;
}
.nav__film-thumb {
  flex: 0 0 auto;
  width: 2.35rem; height: 2.35rem;
  border-radius: .35rem;
  overflow: hidden;
  background: transparent;
}
.nav__film-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav__film-chev {
  flex: 0 0 auto;
  width: 1rem; height: 1rem;
  margin-left: auto;
  color: var(--ink);
}
.nav__film-title {
  font-weight: 600;
  font-stretch: 88%;
  font-size: .95rem;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav__film-info {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  border-top: 1px solid var(--ink);
  margin: 0 -.8rem -.5rem;
  height: 2.35rem;
}
.nav__film-info span {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .4rem;
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav__film-info span + span { border-left: 1px solid var(--ink); }
.nav__film-info span:empty { display: none; }
/* Dashed perforation where the card tears from the hamburger cell. */
.nav__film::after {
  content: "";
  position: absolute;
  top: 9px; bottom: 9px; right: 1px;
  border-right: 2px dashed var(--ink);
}
/* Hamburger cell mirrors the card: rounded on the right, concave
   notches on the left so the two halves form a semicircle at the tear. */
.nav__right .menu-btn {
  align-self: stretch;
  width: 103px;
  height: 103px;
  background: var(--paper);
  color: var(--ink);
  clip-path: path("M0 9 A9 9 0 0 0 9 0 H94 A9 9 0 0 1 103 9 V94 A9 9 0 0 1 94 103 H9 A9 9 0 0 0 0 94 Z");
}
@media (max-width: 720px) {
  .nav__film { display: none; }
  .nav__right { transform: none; }
  .nav__right .menu-btn {
    width: 2.75rem;
    height: 2.75rem;
    clip-path: none;
  }
}

/* ── menu — right-side panel, CSS state machine ───────────── */
/* The hidden checkbox carries open/closed; the grid-rows trick grows
   the panel and each link rises out of its own mask. */
.menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: var(--z-menu);
  width: min(21.3rem, 92vw);
  pointer-events: none;
}
.menu[hidden] { display: none; }
.menu__check { position: absolute; opacity: 0; pointer-events: none; }
.menu__panel {
  height: 100%;
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  background: var(--ink-deep);
  /* Ticket bite on both long edges: two halves, each punched once;
     their union is the full panel minus the two notches. */
  -webkit-mask: radial-gradient(11px at left center, transparent 11px, #000 11.5px) left / 51% 100% no-repeat,
                radial-gradient(11px at right center, transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(11px at left center, transparent 11px, #000 11.5px) left / 51% 100% no-repeat,
                radial-gradient(11px at right center, transparent 11px, #000 11.5px) right / 51% 100% no-repeat;
  transition: grid-template-rows .9s var(--ease);
  pointer-events: auto;
}
.menu__check:checked ~ .menu__panel { grid-template-rows: 1fr; }
.menu__scroll {
  overflow: hidden auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: calc(2rem + 3.25rem) 1.4rem 1.5rem;
}

.menu__links { display: flex; flex-direction: column; }
.menu__link { display: block; overflow: hidden; padding: .15rem 0; }
.menu__link-tx {
  display: block;
  transform: translateY(150%);
  transition: transform .8s var(--ease);
  font-weight: 400;
  font-stretch: 75%;
  font-size: 2rem;
  line-height: 1.06;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.menu__check:checked ~ .menu__panel .menu__link-tx { transform: translateY(0); }
.menu__check:checked ~ .menu__panel .menu__link:nth-child(1) .menu__link-tx { transition-delay: .1s; }
.menu__check:checked ~ .menu__panel .menu__link:nth-child(2) .menu__link-tx { transition-delay: .2s; }
.menu__check:checked ~ .menu__panel .menu__link:nth-child(3) .menu__link-tx { transition-delay: .3s; }
.menu__link:hover .menu__link-tx { color: var(--muted); }

/* Quick-navigate film rows: thumb + title + micro-meta. */
.menu__films {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-soft);
}
.menu__film {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  width: 100%;
}
.menu__film img {
  width: 2.375rem; height: 2.375rem;
  object-fit: cover;
  flex: none;
}
.menu__film-tx { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.menu__film-t {
  font-stretch: 78%;
  font-size: .95rem;
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu__film-m {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.menu__film:hover .menu__film-t { color: var(--muted); }

/* ── the film panel IS the ticket ────────────────────────────
   Geometry: the panel wears the ticket clip (notches punched top
   and bottom at the tear line, rounded corners). One side is the
   film itself in the standard frame; the other side is the stub —
   strand, information rows, synopsis, and the Explore ticket.
   The tear line runs between the notches. */
.film {
  position: relative;
  height: 85vh;
  min-height: 30rem;
  background: var(--ink-lift);
  border-radius: 1.6rem;
  cursor: grab;
  isolation: isolate;
}
.film:active { cursor: grabbing; }
/* Motion blur while the roll travels — the reference's feel. */
#scroll-wrap.is-moving .film { filter: blur(var(--roll-blur, 2px)); }

/* The film fills the frame; the stub sits over it — the reference's
   full-bleed still, not a half-width crop. */
.film__media {
  position: absolute;
  top: var(--gy); bottom: var(--gy);
  left: var(--roll-gx); right: var(--roll-gx);
  overflow: hidden;
  border-radius: 1.2rem;
  background: #000;
}
.film__media img,
.film__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform var(--slow) var(--ease), opacity var(--mid) var(--ease);
}
.film__media img { opacity: 0; }
/* The still belongs to the current panel: it fades in as it arrives. */
.film.is-current .film__media img { opacity: 1; }
.film:hover .film__media img { transform: scale(1.06); }
.film__media video { opacity: 0; }
.film.is-previewing .film__media video { opacity: 1; }

.film__scrim {
  position: absolute;
  top: var(--gy); bottom: var(--gy);
  left: var(--roll-gx); right: var(--roll-gx);
  pointer-events: none;
  border-radius: 1.2rem;
  background:
    linear-gradient(180deg, rgb(5 5 5 / .30) 0%, rgb(5 5 5 / .04) 28%,
                            rgb(5 5 5 / .12) 55%, rgb(5 5 5 / .9) 100%),
    linear-gradient(90deg, rgb(5 5 5 / 0) 42%, rgb(5 5 5 / .55) 100%);
}

/* The film's own name: bottom-left over the film, whisper eyebrow
   above it — the reference's placement and scale. */
.film__titlebar {
  position: absolute;
  left: calc(var(--roll-gx) + var(--gx));
  right: 44%;
  bottom: calc(var(--gy) + var(--gx));
}
.film__eyebrow {
  font-family: var(--serif);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-bottom: 1.3rem;
}
.film__title {
  font-weight: 400;
  font-stretch: 72%;
  font-size: 5.6rem;
  line-height: .77;
  letter-spacing: -.03em;
  text-transform: uppercase;
  max-width: 12ch;
  text-wrap: balance;
}
.film__title {
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.film__title.in { opacity: 1; transform: none; }

/* The facts, one line under the title: category · year · runtime. */
.film__meta {
  margin-top: 1.4rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

/* Explore: bottom-right, a ticket — as the reference. */
.film > .film__explore {
  position: absolute;
  right: calc(var(--roll-gx) + var(--gx));
  bottom: calc(var(--gy) + var(--gx));
}

/* ── film page — paper, same grammar in ink ─────────────── */
body[data-page="film"] {
  background: var(--paper);
  color: var(--ink);
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --line-soft: color-mix(in srgb, var(--ink) 9%, transparent);
}
body[data-page="film"] .nav { color: var(--ink); }
body[data-page="film"] .nav__rule { background: var(--ink); }
body[data-page="film"] .hero-slate { display: none; }
body[data-page="film"] .grain { opacity: .05; }
body[data-page="film"] :focus-visible { outline-color: var(--ink); }

.filmhero__img {
  position: relative;
  height: 77.3vh;
  min-height: 30rem;
  overflow: clip;
  background: var(--ink-lift);
}
.filmhero__img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.filmhero__img::after {
  content: "";
  position: absolute; inset: 0;
  /* A clear projection: only a whisper of scrim for the back-link. */
  background: linear-gradient(180deg, rgb(5 5 5/.38), transparent 24%, transparent 82%, rgb(5 5 5/.2));
}
.filmhero__back {
  position: absolute;
  z-index: 2;
  top: 6.5rem; left: var(--edge);
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper);
}
.filmhero__back:hover { text-decoration: underline; }
.filmhero__title {
  text-align: center;
  font-weight: 400;
  font-stretch: 72%;
  font-size: clamp(2.5rem, 13vw, 6.1rem);
  line-height: .7;
  letter-spacing: -.03em;
  text-transform: uppercase;
  width: 100%;
  max-width: min(14ch, 100%);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) var(--edge) clamp(1rem, 3vh, 2rem);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.filmhero__sub {
  text-align: center;
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  padding-bottom: clamp(3rem, 8vh, 5rem);
}
/* --dim is tuned for dark grounds; on paper it needs ink-soft. */
body[data-page="film"] .filmhero__sub { color: #6f6a60; }

.filmvideo {
  max-width: 96rem;
  margin: 0 auto;
  padding: 0 var(--edge) clamp(4rem, 10vh, 7rem);
}
.filmvideo__cap {
  font-family: var(--serif);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
/* Custom player: brand chrome instead of the browser's default. */
.player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border-radius: .4rem;
  color: #f4f1ea;
}
.player video {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}
/* Portrait media: frames are 16:9. Show the whole vertical still instead of
   cropping it, and give a portrait clip its own 9:16 frame. */
.player.is-portrait { aspect-ratio: 9 / 16; width: min(100%, 26rem); margin-inline: auto; }
.filmhero__img img.is-portrait { object-fit: contain; }
.film__media img.is-portrait,
.film__media video.is-portrait { object-fit: contain; }
.fcard__media img.is-portrait,
.fcard__media video.is-portrait { object-fit: contain; }
.player__overlay {
  position: absolute; inset: 0;
  z-index: 2;
  display: grid; place-items: center;
  border: 0; padding: 0;
  background: rgb(5 5 5 / .16);
  color: #0c0b0a;
  cursor: pointer;
  transition: opacity var(--fast) var(--ease);
}
.player__overlay svg {
  width: 4.6rem; height: 4.6rem;
  padding: 1.3rem 1.15rem 1.3rem 1.5rem;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgb(250 247 239 / .94);
}
.player.is-playing .player__overlay { opacity: 0; pointer-events: none; }
.player__ctrls {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem;
  background: linear-gradient(transparent, rgb(5 5 5 / .72));
  opacity: 0;
  transition: opacity var(--mid) var(--ease);
}
.player:hover .player__ctrls,
.player:not(.is-playing) .player__ctrls { opacity: 1; }
.player__btn {
  flex: 0 0 auto;
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  border: 0; padding: 0;
  background: transparent; color: inherit;
  cursor: pointer;
}
.player__btn svg { width: 1.15rem; height: 1.15rem; }
.player__time {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .06em;
  min-width: 2.4rem;
  color: rgb(244 241 234 / .82);
}
.player__seek {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none; -webkit-appearance: none;
  height: 1.4rem;
  background: transparent;
  cursor: pointer;
}
.player__seek::-webkit-slider-runnable-track {
  height: 3px; border-radius: 3px;
  background: linear-gradient(to right, #f4f1ea var(--p, 0%), rgb(244 241 234 / .28) var(--p, 0%));
}
.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px; height: 11px; margin-top: -4px;
  border-radius: 50%; background: #f4f1ea;
}
.player__seek::-moz-range-track { height: 3px; border-radius: 3px; background: rgb(244 241 234 / .28); }
.player__seek::-moz-range-progress { height: 3px; border-radius: 3px; background: #f4f1ea; }
.player__seek::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: #f4f1ea; }
.player .i-pause, .player .i-mute { display: none; }
.player.is-playing .i-play { display: none; }
.player.is-playing .i-pause { display: block; }
.player.is-muted .i-vol { display: none; }
.player.is-muted .i-mute { display: block; }
.player:fullscreen { border-radius: 0; }
.filmvideo__opts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.filmvideo__opt {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.filmvideo__opt:hover { border-color: currentColor; }
.filmvideo__opt.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
body[data-page="film"] .filmvideo__opt.is-on { background: #1a1a1a; border-color: #1a1a1a; color: #f4f1ea; }

.filmcred {
  max-width: 76.6rem;
  margin: 0 auto;
  padding: 0 var(--edge) clamp(4rem, 10vh, 7rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2.5rem 2rem;
  text-align: center;
}
.filmcred__k {
  font-family: var(--serif);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.filmcred__v {
  font-stretch: 75%;
  font-size: 3.2rem;
  line-height: .8;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
/* Story + impact. On wide screens both run in two columns so the page
   reads in the margins instead of one long scroll. */
.filmstory {
  max-width: 86rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vh, 4.5rem) var(--edge) clamp(2rem, 5vh, 3rem);
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.7;
  color: #35322b;
}
.filmstory__body { max-width: 78rem; margin: 0 auto; }
.filmstory__body--single { max-width: 54rem; }
.filmstory__body--single p:first-child {
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  line-height: 1.4;
}
.filmstory p { margin: 0; break-inside: avoid; }
.filmstory p + p { margin-top: 1em; }
.filmimpact {
  max-width: 86rem;
  margin: 0 auto clamp(3.5rem, 9vh, 6rem);
  padding: clamp(2.2rem, 5vh, 3.4rem) clamp(1.2rem, 4vw, 3.5rem);
  background: color-mix(in srgb, var(--ink) 4%, var(--paper));
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.filmimpact__h {
  font-weight: 400;
  font-stretch: 75%;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 clamp(1.6rem, 4vh, 2.4rem);
}
.filmimpact__body {
  max-width: 74rem;
  margin: 0 auto;
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  line-height: 1.7;
  color: #3d3931;
}
.filmimpact p { margin: 0; break-inside: avoid; }
.filmimpact p + p { margin-top: 1em; }
@media (min-width: 1000px) {
  .filmstory__body,
  .filmimpact__body {
    columns: 2;
    column-gap: clamp(2.5rem, 4.5vw, 5rem);
  }
  .filmstory__body--single { columns: auto; }
  .filmstory__body:not(.filmstory__body--single) p:first-child { font-size: 1.14em; }
}

/* Gallery as a filmstrip: a dark band of frames you move through one
   at a time, instead of dumping every still on screen at once. */
.filmgal { padding: 0 0 clamp(4rem, 10vh, 7rem); }
.filmgal__cap {
  font-family: var(--serif);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 2rem;
  padding: 0 var(--edge);
}
.filmstrip {
  position: relative;
  background: #0c0b0a;
  padding: 2.8rem clamp(2.1rem, 5vw, 4.5rem);
}
/* Sprocket perforations top and bottom — the film feel. */
.filmstrip::before,
.filmstrip::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 1rem;
  background-image: radial-gradient(circle, rgb(250 247 239 / .3) 2.5px, transparent 3px);
  background-size: 2.2rem 100%;
  background-repeat: repeat-x;
  pointer-events: none;
}
.filmstrip::before { top: .6rem; }
.filmstrip::after { bottom: .6rem; }
.filmstrip__rail {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filmstrip__rail::-webkit-scrollbar { display: none; }
.filmstrip__rail img {
  flex: 0 0 auto;
  height: clamp(8rem, 21vw, 15rem);
  width: auto;
  border-radius: .3rem;
  object-fit: cover;
  cursor: zoom-in;
}
.filmstrip__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(250 247 239 / .92);
  color: #0c0b0a;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.filmstrip__nav:hover { transform: translateY(-50%) scale(1.08); }
.filmstrip__nav:disabled { opacity: 0; pointer-events: none; }
.filmstrip__nav--prev { left: .9rem; }
.filmstrip__nav--next { right: .9rem; }

/* Lightbox — click a still to see it full. */
.lightbox {
  position: fixed; inset: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 4vh, 3rem) clamp(1rem, 5vw, 4rem);
  background: rgb(5 5 5 / .94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mid) var(--ease), visibility 0s var(--mid);
}
.lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lightbox__img {
  grid-column: 2;
  max-width: 100%;
  max-height: 88vh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: .4rem;
  box-shadow: 0 2rem 5rem rgb(0 0 0 / .5);
}
.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vh, 2rem); right: clamp(1rem, 4vw, 2.5rem);
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border: 1px solid rgb(250 247 239 / .35);
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
}
.lightbox__nav {
  width: 2.8rem; height: 2.8rem;
  display: grid; place-items: center;
  border: 1px solid rgb(250 247 239 / .35);
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  font-size: 1.6rem; line-height: 1;
  cursor: pointer;
}
.lightbox__nav--prev { grid-column: 1; }
.lightbox__nav--next { grid-column: 3; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgb(250 247 239 / .12); }
@media (max-width: 720px) {
  .lightbox { grid-template-columns: 1fr; }
  .lightbox__nav { display: none; }
  .lightbox__img { grid-column: 1; }
}


.filmnext {
  text-align: center;
  padding: clamp(4rem, 10vh, 7rem) var(--edge);
  border-top: 1px solid var(--line-soft);
}
.filmnext__k {
  font-family: var(--serif);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.filmnext__t {
  display: block;
  font-stretch: 72%;
  font-size: clamp(3rem, 8vw, 6.1rem);
  line-height: .8;
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.filmnext__t:hover { color: #6f6a60; }
.filmnext__all {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: .25rem;
}

/* Film footer keeps the dark room: paper page, ink footer. */
body[data-page="film"] .foot {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
}
body[data-page="film"] .foot .label { color: var(--paper); }
body[data-page="film"] .foot__meta { color: var(--muted); border-color: var(--line-soft); }
body[data-page="film"] .foot__grid { border-color: var(--line-soft); }

/* ── about page ──────────────────────────────────────────── */
.ab-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.5rem;
  padding: var(--chrome-h) var(--edge);
  background-color: var(--ink);
}
.ab-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(1.32);
  transition: opacity .9s var(--ease);
}
.ab-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 58% at 50% 50%,
      rgba(0,0,0,.58) 0%,
      rgba(0,0,0,.34) 55%,
      rgba(0,0,0,0) 78%),
    linear-gradient(180deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.30) 45%,
      rgba(0,0,0,.88) 100%);
}
.ab-hero > :not(.ab-hero__bg) { position: relative; z-index: 2; }
.ab-hero .ab-h {
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 10px 44px rgba(0,0,0,.55);
  animation: hero-line 1.5s cubic-bezier(.16,1,.3,1) .2s both;
}
.ab-hero .ab-lede {
  text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 6px 26px rgba(0,0,0,.6);
  animation: hero-line 1.5s cubic-bezier(.16,1,.3,1) .55s both;
}
.ab-hero .ab-eyebrow {
  text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 6px 24px rgba(0,0,0,.6);
  animation: hero-line 1.2s cubic-bezier(.16,1,.3,1) .1s both;
}
.ab-hero .ct-mail {
  text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 8px 34px rgba(0,0,0,.55);
  animation: hero-line 1.5s cubic-bezier(.16,1,.3,1) .35s both;
}
@keyframes hero-line {
  from {
    opacity: 0;
    transform: translateY(.22em);
    filter: blur(12px);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: inset(-30% -12% -30% -12%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ab-hero__bg { display: none; }
  .ab-hero .ab-h,
  .ab-hero .ab-lede,
  .ab-hero .ab-eyebrow,
  .ab-hero .ct-mail { animation: none; }
}
.ab-eyebrow {
  font-family: var(--serif);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.ab-h {
  font-weight: 400;
  font-stretch: 72%;
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: .82;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.ab-sec {
  padding: clamp(4rem, 12vh, 8rem) var(--edge);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
}
.tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: 6px;
  padding: .8rem 1.5rem .7rem;
  font-stretch: 75%;
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* Perforation: punched notches mid-edge. */
  -webkit-mask: radial-gradient(8px at left center, transparent 8px, #000 8.5px) left / 51% 100% no-repeat,
                radial-gradient(8px at right center, transparent 8px, #000 8.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(8px at left center, transparent 8px, #000 8.5px) left / 51% 100% no-repeat,
                radial-gradient(8px at right center, transparent 8px, #000 8.5px) right / 51% 100% no-repeat;
}
.tag:hover { background: #fff; }
.ab-lede {
  max-width: 40ch;
  font-size: 1.4rem;
  line-height: 1.35;
  text-wrap: pretty;
}
.ab-story {
  max-width: 62ch;
  text-align: left;
  font-size: clamp(1.02rem, 1.25vw, 1.16rem);
  line-height: 1.7;
  color: #d6d0c4;
  text-wrap: pretty;
}
.ab-story p { margin: 0; }
.ab-story p + p { margin-top: 1em; }
.ab-story__lead {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.25;
  color: var(--paper);
}
.ab-sec .cred { width: min(26rem, 100%); text-align: left; }
.ab-nums {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem clamp(3rem, 8vw, 7rem);
}
.ab-nums li { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.ab-num {
  font-stretch: 72%;
  font-size: clamp(2.6rem, 8vw, 3.8rem);
  line-height: .8;
  letter-spacing: -.03em;
}
.ab-numk {
  font-family: var(--serif);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}
.ab-h2 {
  font-weight: 400;
  font-stretch: 72%;
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  line-height: .8;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.ab-rules {
  display: grid;
  gap: 3rem;
  max-width: 46rem;
  text-align: left;
}
.ab-rules li { border-top: 1px solid var(--line-soft); padding-top: 1.5rem; }
.ab-rule-n {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .2em;
  color: var(--dim);
}
.ab-rules h3 {
  font-stretch: 75%;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: .6rem 0;
}
.ab-rules p { color: var(--muted); max-width: 38ch; }
.ab-caps { display: flex; flex-direction: column; gap: .2rem; }
.ab-caps li {
  font-stretch: 72%;
  font-size: clamp(1.75rem, 6.5vw, 3.2rem);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.ab-cta { padding-bottom: clamp(5rem, 14vh, 9rem); }

/* clients wall — logo tiles rendered from CLIENTS */
.ab-clients { width: 100%; max-width: 60rem; display: flex; flex-direction: column; gap: 3.5rem; }
.ab-clients__group { display: flex; flex-direction: column; gap: 1.6rem; }
.ab-clients__h {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.ab-clients__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .9rem; }
.ab-client { display: flex; flex-direction: column; align-items: center; gap: .65rem; margin: 0; }
.ab-client__tile {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #14130f;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .95rem;
  overflow: hidden;
}
.ab-client__tile img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: center;
}
.ab-client__tile img.is-dark-logo { filter: brightness(0) invert(1); }
.ab-client__tile.is-raster { padding: .5rem; }
.ab-client__tile.is-raster.is-dark img { filter: invert(1); }
.ab-client__tile span { color: var(--ink); font-size: .8rem; text-align: center; }
.ab-client__tile--more { background: transparent; border-style: dashed; }
.ab-client__tile--more span { color: var(--muted); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.ab-client__name { font-size: .68rem; letter-spacing: .05em; color: var(--muted); text-align: center; }
@media (max-width: 720px) {
  .ab-clients__grid { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .7rem; }
  .ab-client__tile { padding: .8rem; }
}

/* ── contact page ────────────────────────────────────────── */
.ct-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2rem;
  padding: var(--chrome-h) var(--edge) 3rem;
}
.ct-mail {
  font-stretch: 75%;
  font-size: clamp(1.2rem, 3.4vw, 2.4rem);
  line-height: 1;
  letter-spacing: -.01em;
  max-width: 100%;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--line);
  padding-bottom: .3rem;
  transition: border-color var(--fast) var(--ease);
}
.ct-mail:hover { border-color: var(--paper); }
.ct-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem clamp(2rem, 6vw, 6rem);
  padding: 0 var(--edge) clamp(5rem, 14vh, 9rem);
  max-width: 80rem;
  margin: 0 auto;
}
.ct-form { display: flex; flex-direction: column; gap: 1.25rem; }
.ct-field { display: flex; flex-direction: column; gap: .45rem; }
.ct-field label {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.ct-field input, .ct-field select, .ct-field textarea {
  font: inherit;
  color: var(--paper);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: .6rem 0;
}
.ct-field textarea { min-height: 7rem; resize: vertical; }
.ct-field select option { color: #000; }
.ct-send {
  align-self: flex-start;
  margin-top: .5rem;
  border: 1px solid var(--paper);
  border-radius: 100rem;
  padding: .9rem 2.2rem;
  font-stretch: 75%;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background-color .6s var(--easeOut), color .6s var(--easeOut);
}
.ct-send:hover { background: var(--paper); color: var(--ink); }
#form-done { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--paper); }
.ct-channels { display: flex; flex-direction: column; margin-top: 1rem; }
.ct-channels a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 0;
  border-top: 1px solid var(--line-soft);
  font-stretch: 75%;
  font-size: 1.1rem;
  text-transform: uppercase;
}
.ct-channels li:last-child a { border-bottom: 1px solid var(--line-soft); }
.ct-channels small { font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; color: var(--muted); text-transform: none; }
.ct-note { margin-top: 1.75rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--muted); line-height: 2; }
@media (max-width: 720px) { .ct-grid { grid-template-columns: 1fr; } }

/* ── policy pages ────────────────────────────────────────── */
.policy {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding: calc(var(--chrome-h) + 2rem) var(--edge) clamp(4rem, 10vh, 7rem);
}
.policy__h {
  font-weight: 400;
  font-stretch: 72%;
  font-size: clamp(3rem, 9vw, 6.1rem);
  line-height: .8;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.policy__body {
  display: grid;
  gap: 1.5rem;
  max-width: 44ch;
  color: var(--muted);
  text-wrap: pretty;
}

.foot {
  padding: clamp(1.5rem, 4vh, 2.25rem) var(--edge) 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.foot__big {
  text-align: center;
  font-weight: 400;
  font-stretch: 72%;
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: .8;
  letter-spacing: -.03em;
  text-transform: uppercase;
  padding: clamp(1rem, 3vh, 1.75rem) 0;
}
.foot__big span { display: block; }
.foot__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 70rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 3.5vh, 2rem) 0;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.foot__col { display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 0; }
.foot__col .label {
  font-family: var(--serif);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: .5rem;
}
.foot__col a {
  font-stretch: 75%;
  font-size: clamp(.95rem, 1.1vw, 1.2rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  text-transform: uppercase;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: color var(--fast) var(--ease);
}
.foot__col a:hover { color: var(--muted); }
.foot__meta {
  justify-content: center;
  gap: 1.2rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line-soft);
}
.foot__meta a { transition: color var(--fast) var(--ease); }
.foot__meta a:hover { color: var(--paper); }

/* Cursor removed per user request */

/* ── hint — first-run coaching, one line ───────────────────── */
.hint {
  position: fixed;
  left: 50%; bottom: 1.5rem;
  transform: translate(-50%, 1rem);
  z-index: var(--z-chrome);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 100rem;
  background: rgb(5 5 5 / .72);
  backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  white-space: nowrap;
}
.hint.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.hint button { color: var(--muted); font: inherit; letter-spacing: inherit; text-transform: inherit; }
.hint button:hover { color: var(--paper); }

/* ── preloader — black veil, logo, Enter ticket ─────────────── */
.preloader {
  position: fixed; inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-items: center;
  background: var(--ink);
  transition: opacity .8s var(--ease), visibility 0s .8s;
}
.preloader.is-hidden { display: none; }
.preloader__bg {
  position: absolute; inset: 0;
  background: var(--ink);
}
.preloader__cont {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  text-align: center;
}
.preloader__logo {
  width: clamp(9rem, 22vw, 15rem);
  height: auto;
  opacity: 0;
  animation: logo-in 1600ms var(--ease) .2s forwards;
}
/* Projector warm-up: the mark reels out of blur and scale. */
@keyframes logo-in {
  from { opacity: 0; transform: scale(.92); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.preloader__btn {
  opacity: 0;
  animation: fade-up 1s var(--ease) 1.4s forwards;
}
.preloader.done { opacity: 0; visibility: hidden; }

/* The ticket: the reference's exact shape, traced from its SVG —
   a 142x44 stub ticket with notches punched at the tear line and a
   marching dashed perforation. Fills on hover, text rolls, arrow
   advances. Same component for ENTER, CLOSE, EXPLORE. */
.ticket {
  position: relative;
  display: flex;
  align-items: center;
  width: 165px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--paper);
  font-stretch: 75%;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .8s var(--easeOut);
}
.ticket * {
  pointer-events: none;
}
.ticket {
  pointer-events: auto;
}
body[data-page="film"] .ticket { color: var(--ink); }
.ticket__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ticket__body {
  fill: transparent;
  stroke: currentColor;
  transition: fill .8s var(--easeOut);
}
.ticket:hover .ticket__body { fill: currentColor; }
.ticket__tear {
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 4;
  animation: tear-crawl 1.2s linear infinite;
}
@keyframes tear-crawl { to { stroke-dashoffset: -16; } }
.ticket__tx {
  flex: 1;
  overflow: hidden;
  height: 1.4em;
  padding-left: .9rem;
  text-align: left;
  line-height: 1.4;
}
.ticket__tx span { display: block; transition: transform .8s var(--easeOut); }
.ticket:hover .ticket__tx span { transform: translateY(-100%); }
/* No arrow in ticket — Siena's explore button has no arrow inside the ticket */


/* ── film load gate — hold the film page until its gallery is in ──
   The class is set on <html> at build time so nothing flashes before
   JS runs; editorial.js lifts it once every gallery still has loaded. */
.filmload {
  position: fixed; inset: 0;
  z-index: var(--z-loader);
  display: grid; place-items: center;
  background: var(--ink);
  color: rgb(250 247 239 / .55);
  opacity: 1;
  transition: opacity .45s var(--ease), visibility 0s .45s;
}
.filmload__tx {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
html:not(.film-loading) .filmload { opacity: 0; visibility: hidden; pointer-events: none; }
html.film-loading body { overflow: hidden; }

/* ── explode — the projection transition ──────────────────────
   The screen fades to black, then the page hands over to the
   film's own page. No zoom, so the still never crops. */
.explode {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  pointer-events: none;
  background: #050505;
  opacity: 0;
  transition: opacity .2s var(--ease);
}

/* Position indicator removed per user request */

/* ── tutorial ──────────────────────────────────────────────── */
.tutorial {
  position: fixed; inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(6px);
  transition: opacity .6s var(--ease), visibility 0s .6s;
}
.tutorial[hidden] { display: none; }
.tutorial__bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.95));
}
.tutorial__cont {
  position: relative; z-index: 1;
  max-width: 38rem;
  padding: 0 2rem;
  text-align: center;
}
.tutorial__texts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.tutorial__text {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
.tutorial__close { margin: 0 auto; }

/* ============================================================
   MOBILE — the roll keeps its sequence, columns collapse.
   ============================================================ */
@media (max-width: 720px) {
  .nav { padding: 1.1rem 1.25rem 0; height: 5.5rem; }
  .nav__logo { width: 2.6rem; }
  .hero-slate { display: none; }
  .nav__rule { display: none; }
  .hero-foot { grid-template-columns: 1fr; }
  .hero-foot__right { justify-content: flex-start; }
  .scroll-cue { grid-column: 1; }

  /* Wide film cards: landscape still, name and facts below it — the
     desktop panel's frame scaled to phone width, not a portrait crop. */
  .film {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: .6rem .6rem 3.9rem;
    border-radius: 1rem;
  }
  .film__media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: .8rem;
  }
  .film__scrim { display: none; }
  .film .film__media img { opacity: 1; }
  .film__titlebar { position: static; padding: .9rem .5rem 0; }
  .film .film__title { opacity: 1; transform: none; font-size: clamp(1.5rem, 6.6vw, 2.1rem); max-width: 18ch; }
  .film__meta { margin-top: .55rem; }
  .film > .film__explore { right: 1.1rem; bottom: 1rem; }

  .about__line { font-size: clamp(1.4rem, 7.2vw, 2.1rem); }
  .foot__big { font-size: 1.9rem; }
  .foot__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .foot__col a { font-size: 1rem; }
  .foot__meta { flex-direction: column; }

  .workfilter { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 0; }

  /* Phones: the nav card collapses to a plain hamburger, and the menu
     covers the full width so no page content shows beside it. */
  .nav__right .menu-btn { background: transparent; color: inherit; }
  .menu { width: 100vw; }
}

/* ============================================================
   REDUCED MOTION — fully readable with everything off.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .grain { animation: none; opacity: .03; }

  .mask > span,
  .nav,
  .preloader__logo,
  .menu__link-tx,
  .originalText2, .cloneText2,
  [data-reveal] { transform: none !important; opacity: 1 !important; }

  .preloader, .tutorial, .film__media img,
  .film__media video { transform: none !important; opacity: 1 !important; }
  .film__tear { animation: none !important; }
  .ticket__tear { animation: none !important; }
}

/* ── work page — editorial film index ─────────────────────── */
.workpage { display: block; }
.workfilter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--edge) clamp(2rem, 6vh, 3.5rem);
}
.wchip {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: .5rem 1.05rem;
  cursor: pointer;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.wchip:hover { color: var(--paper); border-color: var(--line); }
.wchip.is-on { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.work-sec {
  padding: clamp(4rem, 11vh, 7rem) var(--edge);
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.4rem;
}
.work-sec[hidden] { display: none; }
.workgrid {
  width: 100%;
  max-width: 72rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 2.6rem clamp(1.25rem, 3vw, 2rem);
}
.fcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .7rem;
  color: inherit;
}
.fcard__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: #14130f;
  border: 1px solid rgba(255, 255, 255, .06);
}
.fcard__media img,
.fcard__media video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--easeOut), opacity var(--mid) var(--ease);
}
.fcard:hover .fcard__media img { transform: scale(1.045); }
.fcard__media video { opacity: 0; }
.fcard.is-previewing .fcard__media video { opacity: 1; }
.fcard__meta {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.fcard__title {
  font-stretch: 74%;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.fcard--more {
  display: block;
  color: inherit;
}
.fcard__morebox {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: 1.5rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background:
    radial-gradient(130% 120% at 50% 0%, color-mix(in srgb, var(--paper) 7%, transparent), transparent 62%),
    var(--ink-lift);
  text-align: center;
  transition: border-color var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.fcard--more:hover .fcard__morebox {
  border-color: var(--line);
  transform: translateY(-2px);
}
.fcard__moreplus {
  font-stretch: 74%;
  font-size: 2.4rem;
  line-height: .8;
  color: var(--paper);
}
.fcard__moretx {
  font-family: var(--mono);
  font-size: .6rem;
  line-height: 1.9;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.fcard__morecta {
  font-stretch: 75%;
  font-size: 1rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: .12rem;
}

/* CTA link shared by About and Work footers */
.ab-cta .contact__mail {
  font-stretch: 75%;
  font-size: clamp(1.5rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: .25rem;
  transition: border-color var(--fast) var(--ease);
}
.ab-cta .contact__mail:hover { border-color: var(--paper); }