/* ==========================================================================
   Can Karayalçın — Cinematographer portfolio
   Bold grotesk titles, tiny tracked labels, one image at a time.
   ========================================================================== */

:root {
  --bg: #050505;
  --surface: #101010;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.32);
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, 0.78);
  --muted: rgba(255, 255, 255, 0.56);   /* 9.6:1 on --bg */
  --dot: #ff4a3d;
  --error: #ff8a80;

  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --fs-label: 0.6875rem;   /* 11px tracked caps */
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lead: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --fs-title: clamp(2.75rem, 1.4rem + 5.6vw, 7.5rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);

  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem;
  --s-6: 3rem; --s-8: 4rem; --s-12: 6rem; --s-16: 8rem;
  --gutter: clamp(1rem, 2.6vw, 2.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms;
  --t-med: 380ms;
  --t-slow: 900ms;

  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 1000;
  --z-curtain: 1100;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--fs-base); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, iframe, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--text); color: var(--bg); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.skip-link {
  position: fixed; left: var(--s-2); top: var(--s-2); z-index: calc(var(--z-curtain) + 1);
  padding: var(--s-1) var(--s-2); background: var(--text); color: var(--bg);
  transform: translateY(-200%); transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- type primitives ---------- */
.label { font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; }
.label--strong { font-weight: 500; }
.num { font-family: var(--font-num); font-size: var(--fs-label); letter-spacing: 0.16em; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.title { font-weight: 500; font-size: var(--fs-title); line-height: 0.95; letter-spacing: -0.035em; }
.h2 { font-weight: 500; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.025em; }
.lead { font-size: var(--fs-lead); line-height: 1.45; letter-spacing: -0.01em; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); margin-right: 0.75em; vertical-align: 0.15em; }
.sep { color: var(--muted); margin-inline: 0.9em; }
.wrap { padding-inline: var(--gutter); max-width: 1760px; margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  min-height: 44px; padding: 0 1.25rem;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn svg { width: 10px; height: 10px; fill: currentColor; flex: none; }
.btn--solid { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn--solid:hover { background: transparent; color: var(--text); }

/* ---------- curtain (page fade) ---------- */
.curtain { position: fixed; inset: 0; z-index: var(--z-curtain); background: var(--bg); pointer-events: none; transition: opacity 500ms var(--ease); }
.curtain.is-hidden { opacity: 0; }
.curtain.is-leaving { opacity: 1; transition-duration: 260ms; }

/* ---------- header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--gutter);
  transition: background-color var(--t-med) var(--ease), border-color var(--t-med);
  border-bottom: 1px solid transparent;
}
.header.is-solid { background: rgba(5, 5, 5, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--line); }
.brand { display: inline-flex; flex-direction: column; gap: 0.3rem; line-height: 1; white-space: nowrap; }
.brand b { font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.01em; }
.brand span { font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2); }
.nav { display: flex; gap: var(--s-4); }
.nav a { position: relative; padding-block: 0.6rem; color: var(--text-2); transition: color var(--t-fast); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0.2em; bottom: 0.25rem; height: 1px; background: currentColor; }
.menu-btn { display: none; min-height: 44px; padding: 0 0.25rem; }
@media (max-width: 767px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
}

/* full-screen overlay used for the mobile menu and the mobile index */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--bg);
  display: flex; flex-direction: column;
  padding: calc(var(--s-12) + var(--s-2)) var(--gutter) var(--s-4);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.overlay__close { position: fixed; top: var(--s-2); right: var(--gutter); }
.menu-links a { display: block; font-weight: 500; font-size: clamp(2.25rem, 10vw, 3.5rem); line-height: 1.15; letter-spacing: -0.03em; }

/* ======================================================================
   HOME — full-screen stage + index
   ====================================================================== */
.stage { position: relative; height: 100vh; height: 100dvh; min-height: 560px; overflow: hidden; isolation: isolate; }
.stage__bg { position: absolute; inset: 0; z-index: -2; background: #000; }
.stage__bg figure { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 700ms var(--ease), visibility 0s linear 700ms; }
.stage__bg figure.is-active { opacity: 1; visibility: visible; transition: opacity 700ms var(--ease); }
.stage__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transform: scale(1.04); transition: transform 7s linear; }
.stage__bg figure.is-active img { transform: scale(1); }
.stage__bg iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-width: 177.78vh; min-height: 100%; transform: translate(-50%, -50%); border: 0; pointer-events: none; }
.stage__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0) 22%, rgba(5,5,5,0) 48%, rgba(5,5,5,0.88) 100%),
    linear-gradient(90deg, rgba(5,5,5,0.35) 0%, rgba(5,5,5,0) 45%),
    linear-gradient(270deg, rgba(5,5,5,0.6) 0%, rgba(5,5,5,0.3) 28%, rgba(5,5,5,0) 48%);
}
.stage__info {
  position: absolute; left: var(--gutter); bottom: calc(var(--s-8) + var(--s-2));
  max-width: min(60vw, 900px);
  display: grid; gap: var(--s-3); justify-items: start;
}
/* slide change: the old text drifts up and fades, the new text settles in from below (no hard cut) */
.stage__kicker, .stage__title, .stage__meta, .stage__pill { transition: opacity 320ms ease, transform 420ms var(--ease); }
.stage__info.is-swapping .stage__kicker,
.stage__info.is-swapping .stage__title,
.stage__info.is-swapping .stage__meta,
.stage__info.is-swapping .stage__pill { opacity: 0; transform: translateY(-8px); transition-duration: 280ms; }
.stage__info.is-entering .stage__kicker,
.stage__info.is-entering .stage__title,
.stage__info.is-entering .stage__meta,
.stage__info.is-entering .stage__pill { opacity: 0; transform: translateY(10px); transition: none; }
.stage__title { transition-delay: 30ms; white-space: nowrap; }
.stage__meta { transition-delay: 60ms; }
.stage__meta { color: var(--text-2); }
.stage__foot {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--s-3);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-2);
  color: var(--muted);
}

/* index panel (desktop) */
.index {
  position: absolute; z-index: 2;
  top: calc(var(--s-12) - var(--s-1)); right: var(--gutter); bottom: calc(var(--s-6) + var(--s-1));
  width: min(34vw, 520px);
  display: flex; flex-direction: column;
}
.index__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); padding-bottom: var(--s-1); border-bottom: 1px solid var(--line-strong); color: var(--text-2); }
.index__filters { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.index__filters button { min-height: 32px; color: var(--muted); transition: color var(--t-fast); }
.index__filters button:hover, .index__filters button[aria-pressed="true"] { color: var(--text); }
.index__filters button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 5px; }
.index__list { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.index__row {
  display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0.55rem 0.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  transition: color var(--t-fast), background-color var(--t-fast), padding var(--t-med) var(--ease);
}
.index__row .num, .index__row .label { color: var(--muted); }
.index__name { font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; }
.index__row:hover, .index__row.is-active { color: var(--text); }
.index__row.is-active { background: rgba(255,255,255,0.05); padding-left: 0.75rem; }
.index__row.is-active .num { color: var(--text); }
.index__row.is-hidden { display: none; }

/* desktop index: big right-aligned titles — the current film is white, the rest recede */
.index { align-items: flex-end; text-align: right; width: min(42vw, 640px); }
.index .index__head { justify-content: flex-end; gap: var(--s-4); border-bottom: 0; padding-bottom: 0; }
.index .index__list {
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  overflow-x: hidden; padding-block: var(--s-2);
}
.index .index__row {
  display: inline-flex; align-items: flex-start; gap: 0.45em;
  min-height: 0; padding: 0.06em 0; border: 0; background: none;
  font-size: clamp(1.375rem, 0.7rem + 1.45vw, 2.125rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.42);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
  transition: color var(--t-med) var(--ease);
}
.index .index__name { font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.index .index__row sup { font-size: 0.5625rem; letter-spacing: 0.1em; margin-top: 0.55em; color: inherit; }
.index .index__row:hover, .index .index__row.is-active { color: var(--text); background: none; padding-left: 0; }

/* side arrows (phones/tablets): bare chevrons, no box */
.stage__controls { display: none; }
.stage__arrow {
  position: absolute; top: 34%; z-index: 2; transform: translateY(-50%);
  width: 48px; height: 64px; display: grid; place-items: center;
  color: var(--text-2);
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.6));
  transition: color var(--t-fast), transform var(--t-fast) var(--ease);
}
.stage__arrow:hover { color: var(--text); }
.stage__arrow svg { width: 20px; height: 20px; }
.stage__arrow--prev { left: 0; }
.stage__arrow--next { right: 0; }
.stage__arrow--prev:active { transform: translate(-3px, -50%); }
.stage__arrow--next:active { transform: translate(3px, -50%); }

/* dots: hover (or focus) a dot to land on that film; the active one stretches into a strip */
.stage__dots { position: absolute; z-index: 2; left: calc(var(--gutter) - 8px); bottom: calc(var(--s-8) + var(--s-1)); }
.dots { display: flex; flex-wrap: wrap; }
.dots button { width: 22px; height: 28px; display: grid; place-items: center; }
.dots button::before {
  content: ""; width: 6px; height: 6px; border-radius: 3px; background: var(--muted);
  transition: width var(--t-med) var(--ease), background-color var(--t-fast), transform var(--t-fast) var(--ease);
}
.dots button:hover::before { background: var(--text); transform: scale(1.35); }
.dots button[aria-current="true"] { width: 40px; }
.dots button[aria-current="true"]::before { width: 28px; background: var(--text); transform: none; }

@media (min-width: 1024px) {
  .stage__info { bottom: calc(var(--s-12) + var(--s-2)); }
}
@media (max-width: 1023px) {
  .index { display: none; }
  .stage__shade { background: linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0) 22%, rgba(5,5,5,0) 48%, rgba(5,5,5,0.88) 100%); }
  .stage__info { max-width: none; right: var(--gutter); bottom: calc(var(--s-16) + var(--s-2)); }
  .stage__controls { display: block; }
  .stage__foot .credit { display: none; }
}
@media (min-width: 1024px) { .index-btn { display: none; } }

/* mobile index overlay rows */
.m-index .index__row { min-height: 56px; }
.m-index .index__name { font-size: 1.25rem; }

/* ======================================================================
   PROJECT
   ====================================================================== */
.p-player { position: relative; margin-top: calc(var(--s-12) - var(--s-2)); aspect-ratio: 16 / 9; max-height: calc(100dvh - var(--s-12)); width: 100%; background: #000; overflow: hidden; }
.p-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.p-player__poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-player__poster img { width: 100%; height: 100%; object-fit: cover; }
.p-player__poster::after { content: ""; position: absolute; inset: 0; background: rgba(5,5,5,0.35); transition: background-color var(--t-med); }
.p-player__poster:hover::after { background: rgba(5,5,5,0.2); }
.p-player__cta { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; }
.p-player__cta .btn { background: rgba(5,5,5,0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.p-player__poster:hover .btn { background: var(--text); color: var(--bg); }

/* title on top, details underneath at full width so each value fits on one line */
.p-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-4) var(--s-6); align-items: start; }
.p-back { display: inline-flex; gap: 0.6em; color: var(--muted); margin-bottom: var(--s-2); padding-block: 0.5rem; transition: color var(--t-fast); }
.p-back:hover { color: var(--text); }
/* film details: small gray label over a readable value, three compact columns, a hairline above each */
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); }
.specs div { border-top: 1px solid var(--line); padding-top: 0.6rem; }
.specs dt { color: var(--muted); margin-bottom: 0.3rem; }
.specs dd { font-size: 0.9375rem; font-weight: 400; line-height: 1.4; letter-spacing: -0.005em; color: var(--text); }
.p-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--s-4); padding-block: var(--s-6); border-top: 1px solid var(--line); }
.p-about__body { display: grid; gap: var(--s-2); }
.p-about__body > p { max-width: 62ch; }
.p-about__body p + p { color: var(--text-2); font-size: var(--fs-base); line-height: 1.65; }

.stills-head { display: flex; justify-content: space-between; gap: var(--s-2); padding-block: var(--s-2); color: var(--muted); }
.stills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1); }
.stills button { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); cursor: zoom-in; }
.stills img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease), opacity var(--t-med); }
.stills button:hover img { transform: scale(1.04); }
.stills .num { position: absolute; left: 0.6rem; bottom: 0.5rem; color: var(--text); text-shadow: 0 1px 6px rgba(0,0,0,0.6); }

.credits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--s-4); padding-block: var(--s-6) var(--s-8); border-top: 1px solid var(--line); }
.credits dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3) var(--s-4); }
.credits dt { color: var(--muted); margin-bottom: 0.35rem; }
.credits dd { font-weight: 500; }

.next { position: relative; display: block; height: 62vh; min-height: 380px; overflow: hidden; isolation: isolate; }
.next img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: brightness(0.5); transform: scale(1.04); transition: transform 1400ms var(--ease), filter var(--t-slow) var(--ease); }
.next::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,5,5,0) 40%, rgba(5,5,5,0.8)); }
.next:hover img { transform: scale(1); filter: brightness(0.7); }
.next__content { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--s-6); display: grid; gap: var(--s-2); }

@media (max-width: 1023px) {
  .p-head { grid-template-columns: 1fr; gap: var(--s-4); align-items: start; }
  .p-about, .credits { grid-template-columns: 1fr; gap: var(--s-2); }
}
@media (max-width: 559px) {
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-3); }
  .specs dd { font-size: 0.9375rem; }
  .stills { grid-template-columns: 1fr 1fr; }
  .stills button:first-child { grid-column: 1 / -1; }
  .stills-head > span { display: none; }
}

/* ======================================================================
   ABOUT
   ====================================================================== */
.a-top { padding-top: calc(var(--s-16) + var(--s-2)); padding-bottom: var(--s-6); }
.a-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; padding-bottom: var(--s-8); }
.portrait { position: sticky; top: var(--s-12); aspect-ratio: 2 / 3; overflow: hidden; background: var(--surface); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.a-bio { display: grid; gap: var(--s-3); max-width: 62ch; }
.a-bio p + p { color: var(--text-2); line-height: 1.7; }
.block { margin-top: var(--s-8); }
.block > h2 { padding-bottom: var(--s-1); margin-bottom: 0; border-bottom: 1px solid var(--line-strong); color: var(--text-2); }
.rows li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s-2); align-items: baseline; padding-block: 0.85rem; border-bottom: 1px solid var(--line); }
.rows li > span:nth-child(2) { font-weight: 500; }
.rows .muted { text-align: left; }
/* credits & education: year · name with course/role underneath · location on the right */
.rows li.cv { grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: baseline; padding-block: 1rem; }
.cv__main { display: grid; gap: 0.3rem; font-weight: 400; }
.cv__title { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.cv__detail { font-size: 0.9375rem; color: var(--text-2); line-height: 1.45; }
.cv__place { color: var(--muted); text-align: right; white-space: nowrap; }
@media (max-width: 559px) {
  .rows li.cv { grid-template-columns: 1fr auto; row-gap: 0.4rem; }
  .rows li.cv .num { grid-column: 1; }
  .rows li.cv .cv__place { grid-column: 2; grid-row: 1; }
  .rows li.cv .cv__main { grid-column: 1 / -1; }
}
.inline-list { display: flex; flex-wrap: wrap; gap: 0.6rem var(--s-3); padding-top: var(--s-2); color: var(--text-2); }
@media (max-width: 1023px) { .a-grid { grid-template-columns: 1fr; gap: var(--s-4); } .portrait { position: relative; top: 0; aspect-ratio: 4 / 5; max-width: 560px; } }
@media (max-width: 559px) { .rows li { grid-template-columns: 1fr; gap: 0.3rem; } .rows .muted { text-align: left; } }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); padding-block: var(--s-8) var(--s-12); border-top: 1px solid var(--line); }
@media (max-width: 1023px) { .contact { grid-template-columns: 1fr; gap: var(--s-4); } }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-3); }
.field { display: grid; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label { color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0;
  background: transparent; color: var(--text);
  border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  font: inherit; font-size: var(--fs-base);
  transition: border-color var(--t-fast);
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 1.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23999' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.25rem center; }
.field select option { background: var(--surface); }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--text); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { box-shadow: 0 1px 0 0 var(--text); }
.field [aria-invalid="true"] { border-bottom-color: var(--error); }
.field__error { color: var(--error); font-size: var(--fs-sm); min-height: 1.3em; }
.form__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.form__status { font-size: var(--fs-sm); color: var(--muted); }
.form__status.is-ok { color: var(--text); }
@media (max-width: 559px) { .form { grid-template-columns: 1fr; } }

/* ---------- site footer ---------- */
.site-foot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); padding-block: var(--s-6) var(--s-3); border-top: 1px solid var(--line); }
.site-foot h2 { color: var(--muted); margin-bottom: 0.5rem; }
.site-foot p, .site-foot a { font-size: var(--fs-sm); }
.site-foot a { display: inline-block; padding-block: 0.15rem; transition: color var(--t-fast); }
.site-foot a:hover { color: var(--text-2); }
.site-foot__base { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--s-2); padding-top: var(--s-4); color: var(--muted); }
.site-foot__base button { min-height: 44px; color: inherit; }
.site-foot__base button:hover { color: var(--text); }
@media (max-width: 767px) { .site-foot { grid-template-columns: 1fr 1fr; } }

/* ---------- modal (player / stills) ---------- */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--s-6) var(--gutter);
  background: rgba(3, 3, 3, 0.97);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.modal__inner { width: min(100%, calc((100dvh - 9rem) * 16 / 9), 1600px); }
.modal__player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.modal__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-top: var(--s-2); color: var(--muted); }
.modal__close { position: absolute; top: var(--s-2); right: var(--gutter); }
.lightbox__img { max-height: calc(100dvh - 9rem); width: auto; margin-inline: auto; object-fit: contain; }
.lightbox__nav { display: flex; gap: var(--s-1); }
.lightbox__nav button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-strong); transition: background-color var(--t-fast), color var(--t-fast); }
.lightbox__nav button:hover { background: var(--text); color: var(--bg); }
.lightbox__nav svg, .modal__close svg { width: 12px; height: 12px; }
.screening { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--s-4); }
.screening img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.screening > div { position: relative; display: grid; gap: var(--s-2); justify-items: center; max-width: 40ch; }

/* ---------- reveal + image fade ---------- */
[data-reveal] { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
img.lazy-fade:not(.is-ready) { opacity: 0; }
img.lazy-fade.is-ready { animation: img-in 700ms var(--ease); }
@keyframes img-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .stage__bg img { transform: none !important; }
}

/* ---------- festival laurels (project pages + About) ---------- */
.laurels { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-8); margin-top: var(--s-4); }
.laurel {
  display: inline-grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 236px; color: var(--text);
}
.laurel__branch svg { display: block; width: 26px; height: 74px; }
.laurel__branch--r svg { transform: scaleX(-1); }
.laurel__text { display: grid; gap: 5px; justify-items: center; text-align: center; }
.laurel__award { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.16em; line-height: 1.35; text-transform: uppercase; }
.laurel__festival { font-size: 0.75rem; line-height: 1.3; color: var(--text-2); }
.laurel__extra { font-family: var(--font-num); font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* about: a full-width wall of laurels */
.festivals { padding-block: var(--s-8); border-top: 1px solid var(--line); }
.laurel-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-12) var(--s-8); margin-top: var(--s-8); justify-items: center; }
.laurel-wall .laurel { width: 272px; }
.laurel-wall .laurel__branch svg { width: 30px; height: 88px; }
.laurel-wall .laurel__festival { font-size: 0.8125rem; }

/* laurels on About link to their film */
.laurel-link { display: inline-block; border-radius: 4px; transition: opacity var(--t-fast), transform var(--t-med) var(--ease); }
.laurel-link .laurel { pointer-events: none; }
.laurel-wall:hover .laurel-link { opacity: 0.55; }
.laurel-wall .laurel-link:hover, .laurel-wall .laurel-link:focus-visible { opacity: 1; transform: translateY(-2px); }
.p-awards .laurels { margin-top: 0; }

/* ---------- home: bigger name & role ---------- */
[data-page="home"] .brand { gap: 0.45rem; }
[data-page="home"] .brand b { font-size: clamp(1.375rem, 1rem + 0.9vw, 1.875rem); letter-spacing: -0.02em; }
[data-page="home"] .brand span { font-size: 0.8125rem; letter-spacing: 0.22em; }

/* ---------- press: outlet · headline · date ↗ ---------- */
.press { border-top: 1px solid var(--line-strong); }
.press__row {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto 1.25rem; gap: var(--s-3); align-items: baseline;
  padding-block: 1.1rem; border-bottom: 1px solid var(--line);
  transition: background-color var(--t-fast);
}
.press__main { display: grid; gap: 0.3rem; }
.press__title { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; }
.press__sub { font-size: 0.875rem; color: var(--text-2); }
.press__arrow { color: var(--muted); transition: transform var(--t-med) var(--ease), color var(--t-fast); }
.press__row:hover .press__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.press__row:hover .press__arrow { color: var(--text); transform: translate(2px, -2px); }
.a-press { padding-top: var(--s-8); }
@media (max-width: 559px) {
  .press__row { grid-template-columns: 1fr auto; gap: 0.4rem var(--s-2); }
  .press__row .label { grid-column: 1; }
  .press__date { grid-column: 1; grid-row: 3; }
  .press__main { grid-column: 1 / -1; grid-row: 2; }
  .press__arrow { grid-column: 2; grid-row: 1; }
}

/* press: extra articles collapse behind "More press" (only once JS is running) */
.press.is-collapsed .is-extra { display: none; }
.press .is-extra.is-revealed { animation: press-in 420ms var(--ease) both; }
@keyframes press-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.press__more {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 44px; margin-top: var(--s-2); padding: 0;
  color: var(--text-2); transition: color var(--t-fast);
}
.press__more:hover { color: var(--text); }
.press__more svg { width: 12px; height: 12px; transition: transform var(--t-med) var(--ease); }
.press__more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- index: films grouped under small category headings ---------- */
.index__group { display: flex; flex-direction: column; }
.index__group + .index__group { margin-top: var(--s-3); }
.index__heading { color: var(--muted); padding-bottom: 0.35rem; }
.index .index__group { align-items: flex-end; }
.index .index__group > ol { display: flex; flex-direction: column; align-items: flex-end; }
.index .index__heading { padding-bottom: 0.2rem; }
.m-index .index__heading { padding-top: var(--s-2); border-bottom: 1px solid var(--line); }
/* home page list stays as one tight stack (same order, no headings or gaps);
   the headings only appear in the full-screen Index overlay */
.index .index__heading { display: none; }
.index .index__group + .index__group { margin-top: 0; }

/* badge under the film details, e.g. "Shot on Kodak 16mm film" */
.p-badge { display: block; width: auto; height: 56px; opacity: 0.92; }
@media (max-width: 559px) { .p-badge { height: 44px; } }

/* ---------- no-video projects: title first; stills after About, one at a time with vertical dots ---------- */
.wrap--top { padding-top: calc(var(--s-12) - var(--s-2)); }
.sgal { padding-bottom: var(--s-6); }
.sgal__frame { position: relative; aspect-ratio: var(--ar, 16 / 9); width: min(100%, calc((100vh - var(--s-12)) * var(--ar-n, 1.7778))); margin-inline: auto; overflow: hidden; }
@supports (height: 100dvh) { .sgal__frame { width: min(100%, calc((100dvh - var(--s-12)) * var(--ar-n, 1.7778))); } }
.sgal__bar { width: min(100%, calc((100vh - var(--s-12)) * var(--ar-n, 1.7778))); margin-inline: auto; }
.sgal__still { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 600ms var(--ease); }
.sgal__still.is-active { opacity: 1; }
.sgal__still img { width: 100%; height: 100%; object-fit: contain; }
.sgal__dots { position: absolute; z-index: 2; right: calc(var(--s-2) - 8px); top: 50%; transform: translateY(-50%); flex-direction: column; flex-wrap: nowrap; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6)); }
.sgal__dots button { width: 28px; height: 22px; }
.sgal__dots button::before { background: var(--text-2); transition: height var(--t-med) var(--ease), background-color var(--t-fast), transform var(--t-fast) var(--ease); }
.sgal__dots button[aria-current="true"] { width: 28px; height: 40px; }
.sgal__dots button[aria-current="true"]::before { width: 6px; height: 28px; }
.sgal__bar { display: flex; justify-content: space-between; padding-top: var(--s-1); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .sgal__still { transition: none; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.sgal--fill .sgal__still img { object-fit: cover; }
.p-links { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--s-1); list-style: none; margin: calc(var(--s-2) - var(--s-4)) 0 0; padding: 0; }
.p-links .btn { min-height: 36px; padding: 0 0.9rem; }
.p-links .btn span[aria-hidden] { margin-left: 0.4em; }
/* credits: section title reads as a heading, not another job label; names line up across each row
   by their top line (a stacked job list grows upward instead of pushing its name down) */
.credits > h2 { font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.24em; color: var(--text); }
.credits dl { row-gap: 0; }
.credits dl > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.credits dt { align-self: end; }
.credits dd { align-self: start; padding-bottom: var(--s-3); }
.p-links { justify-content: flex-end; }

/* ---------- 404 ---------- */
.nf { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-end; overflow: hidden; }
.nf__bg { position: absolute; inset: 0; }
.nf__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.nf__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,0.2) 0%, rgba(5,5,5,0.85) 75%, var(--bg) 100%); }
.nf__content { position: relative; width: 100%; padding-block: var(--s-16) var(--s-6); display: grid; gap: var(--s-3); justify-items: start; }
.nf__content .title { font-size: clamp(2.25rem, 1.2rem + 4.4vw, 5.5rem); max-width: 14ch; }
.nf__text { max-width: 42ch; color: var(--text-2); }
.nf__films { list-style: none; margin: var(--s-4) 0 0; padding: var(--s-2) 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); width: 100%; }
.nf__films a { display: inline-flex; gap: 0.6em; align-items: baseline; padding-block: 0.4rem; color: var(--text-2); transition: color var(--t-fast); }
.nf__films a:hover { color: var(--text); }
/* phones: laurels stack one per row, so close up the gaps between them */
@media (max-width: 699px) {
  .laurel-wall { gap: var(--s-4); margin-top: var(--s-4); }
  .laurels { gap: var(--s-3); }
}

/* ---------- screenings ---------- */
.scr { padding-top: calc(var(--s-12) + var(--s-4)); padding-bottom: var(--s-12); }
.scr .title { margin-top: var(--s-1); }
.scr__block { margin-top: var(--s-8); }
.scr__block > h2, .scr__past > summary { padding-bottom: var(--s-2); color: var(--muted); }
.scr__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.scr__row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: var(--s-3); align-items: baseline; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.scr__row time { color: var(--text); }
.scr__main { display: grid; gap: 0.3rem; }
.scr__film { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; }
a.scr__film:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.scr__sub { font-size: 0.875rem; color: var(--text-2); }
.scr__sub em { font-style: normal; color: var(--text); }
.scr__link { display: inline-flex; gap: 0.5em; align-items: center; min-height: 36px; padding: 0 0.9rem; border: 1px solid var(--line-strong); white-space: nowrap; transition: background-color var(--t-fast), color var(--t-fast); }
.scr__link:hover { background: var(--text); color: var(--bg); }
.scr__empty { padding-block: var(--s-3); color: var(--text-2); border-top: 1px solid var(--line-strong); }
.scr__empty a { text-decoration: underline; text-underline-offset: 3px; }
.scr__past > summary { cursor: pointer; list-style: none; display: flex; gap: 0.6em; align-items: center; }
.scr__past > summary::-webkit-details-marker { display: none; }
.scr__past > summary::after { content: "+"; font-size: 0.9rem; margin-left: auto; color: var(--text); }
.scr__past[open] > summary::after { content: "–"; }
.scr__past .scr__row { opacity: 0.6; }
@media (max-width: 559px) {
  .scr__row { grid-template-columns: 1fr auto; gap: 0.4rem var(--s-2); }
  .scr__main { grid-column: 1 / -1; grid-row: 2; }
}

/* home: the next screening as a full-width bottom line under the landing screen
   (the stage gives up exactly that height, so the two together still fill the window) */
:root { --strip-h: 3rem; }
.has-next-screening .stage { height: calc(100vh - var(--strip-h)); height: calc(100dvh - var(--strip-h)); }
.next-screening {
  display: flex; align-items: center; gap: var(--s-2); height: var(--strip-h); padding-inline: var(--gutter);
  border-top: 1px solid var(--line); background: var(--bg); color: var(--text-2); white-space: nowrap; overflow: hidden;
  transition: color var(--t-fast);
}
.next-screening__tag { display: inline-flex; align-items: center; color: var(--text); flex: none; }
/* the screenings stack in one spot; the active one fades and rises in, the previous one fades up and out */
.next-screening__track { position: relative; flex: 1; min-width: 0; height: 100%; }
.next-screening__item {
  position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(-8px);
  transition: opacity 500ms ease, transform 600ms var(--ease);
}
.next-screening__item.is-on { opacity: 1; transform: none; }
.next-screening__item.is-below { transform: translateY(8px); transition: none; }
.next-screening__count { flex: none; color: var(--muted); }
.next-screening:hover { color: var(--text); }
@media (max-width: 699px) {
  .next-screening__city { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .next-screening__item { transition: none; }
}

/* home slide: a film with an upcoming screening shows a red-outlined pill under its details.
   Every slide keeps the pill's row (empty and invisible when there's no screening), so the film
   titles sit at exactly the same height on every slide. Pulled left so its dot lines up with the
   dot of the label above. */
/* screening line: a thin red rule on the left, "Next screening →" over the date, festival and city */
.stage__pill {
  display: grid; gap: 0.45rem; max-width: 100%; padding: 0.15rem 0 0.15rem 1rem;
  border-left: 2px solid var(--dot); color: var(--text);
  transition: opacity 320ms ease 90ms, transform 420ms var(--ease) 90ms;
}
.stage__pill-head { display: inline-flex; align-items: center; gap: 0.6em; color: var(--text); }
.stage__pill-head .ico { transition: transform var(--t-med) var(--ease); }
.stage__pill-text {
  font-size: 0.9375rem; letter-spacing: 0; text-transform: none; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.stage__pill:hover .stage__pill-head .ico { transform: translateX(3px); }
.stage__pill:hover .stage__pill-text { color: var(--text); }
.stage__pill[hidden] { display: none; }
.stage__pill.is-empty { visibility: hidden; }
.scr__when { display: grid; gap: 0.3rem; color: var(--text); }
.scr__link { min-width: 9.5rem; justify-content: center; }
.scr__city { color: var(--text-2); }
.scr__row { grid-template-columns: 11rem minmax(0, 1fr) auto; }
@media (max-width: 559px) { .scr__row { grid-template-columns: 1fr auto; } }
.p-screenings .scr__row { grid-template-columns: 9.5rem minmax(0, 1fr) auto; }
@media (max-width: 559px) { .p-screenings .scr__row { grid-template-columns: 1fr auto; } }
.p-screenings__all { display: inline-flex; gap: 0.5em; margin-top: var(--s-3); color: var(--text-2); transition: color var(--t-fast); }
.p-screenings__all:hover { color: var(--text); }

/* touch screens: no slow zoom on the home covers; it costs phones a full-screen repaint every frame */
@media (hover: none) {
  .stage__bg img { transform: none; transition: none; }
}
/* phones: the year / director / place line always takes two lines' height, so the title above it
   stays put between slides whether the line wraps or not (nothing gets cut off) */
@media (max-width: 699px) {
  .stage__meta { min-height: 3.2em; line-height: 1.6; display: flex; flex-wrap: wrap; align-content: flex-start; }
}
/* phones: festival laurels stack centred on film pages */
@media (max-width: 699px) {
  .p-awards .laurels { justify-content: center; }
  .p-awards .laurel { margin-inline: auto; }
}

/* inline arrow icons (SVG, so no device turns them into emoji) */
.ico { display: inline-block; width: 0.8em; height: 0.8em; vertical-align: -0.04em; flex: none; }
.press__arrow .ico { width: 0.9em; height: 0.9em; }

/* laurels: on phones only the first three show; "More awards (n)" reveals the rest. Desktop always shows all */
.laurels__more { display: none; }
@media (max-width: 699px) {
  .laurels__more { display: flex; justify-content: center; width: 100%; margin-top: var(--s-3); }
  .laurels.is-collapsed > .is-extra, .laurel-wall.is-collapsed > .is-extra { display: none; }
}

/* home: the whole slide opens its film */
.stage { cursor: pointer; }
.stage .index, .stage .stage__dots, .stage .stage__foot { cursor: auto; }
/* phones: the pill keeps to the page margin (no pull-left) and to the screen width */
@media (max-width: 699px) {
}

/* About › Other credits: "Streaming on [platform logo]" under a credit's role */
.cv__stream { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.55rem; color: var(--muted); }
.cv__stream img { height: 16px; width: auto; }

/* header: nav, language slider and the phone menu button sit together on the right */
.header__end { display: flex; align-items: center; gap: var(--s-4); }
@media (max-width: 1023px) { .header__end { gap: var(--s-2); } }

/* EN | TR slider: a pill with a sliding knob behind the current language */
.lang {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center;
  height: 30px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.16em; line-height: 1;
}
.lang__opt { position: relative; z-index: 1; display: grid; place-items: center; min-width: 2.6rem; height: 100%; padding-left: 0.16em; color: var(--text-2); transition: color 300ms var(--ease); }
.lang__knob { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 999px; background: var(--text); transition: transform 320ms var(--ease); }
.lang--en .lang__opt:nth-child(2), .lang--tr .lang__opt:nth-child(3) { color: var(--bg); }
.lang--tr .lang__knob { transform: translateX(100%); }
/* on click the knob slides across before the other language loads */
.lang.is-switching.lang--en .lang__knob { transform: translateX(100%); }
.lang.is-switching.lang--tr .lang__knob { transform: none; }
.lang.is-switching.lang--en .lang__opt:nth-child(2), .lang.is-switching.lang--tr .lang__opt:nth-child(3) { color: var(--text-2); }
.lang.is-switching.lang--en .lang__opt:nth-child(3), .lang.is-switching.lang--tr .lang__opt:nth-child(2) { color: var(--bg); }
.lang:hover { border-color: var(--text-2); }
/* the slider lives in the header on desktop; on phones (no room next to Menu) it sits on the "About" line */
.a-top__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.a-top__row .lang { display: none; }
@media (max-width: 1023px) {
  .header .lang { display: none; }
  .a-top__row .lang { display: inline-grid; }
}
/* phones: the bottom line keeps the red dot and gives the whole width to the date and festival */
@media (max-width: 699px) {
  .next-screening__label, .next-screening__count { display: none; }
  .next-screening .dot { margin-right: 0.6em; }
}

/* home slide, tighter: title, details and screening line 16px apart, 24px before View project,
   and (with the dot row gone) the block sits closer to the counter at the bottom */
.stage__info { gap: var(--s-2); }
.stage__info [data-open] { margin-top: var(--s-1); }
@media (min-width: 1024px) { .stage__info { bottom: calc(var(--s-8) + var(--s-3)); } }
@media (max-width: 1023px) { .stage__info { bottom: calc(var(--s-12) + var(--s-1)); } }
/* the screening line sits above the film title (its row is kept, invisible, on every slide so titles line up) */

/* name sits right above View project: details line on one line (no reserved second line), tight gaps */
.stage__info [data-open] { margin-top: 0; }
/* name, details line and View project: the same 16px between each */
.stage__title { line-height: 1; }
@media (max-width: 699px) {
  .stage__meta { min-height: 0; flex-wrap: nowrap; white-space: nowrap; letter-spacing: 0.1em; }
  .stage__meta .sep { margin-inline: 0.55em; }
}
/* measure the gaps from the letters themselves (cap height to baseline), not the line boxes,
   so names with or without descenders (Speedy, Huldufolk) get the same visible space */
.stage__title, .stage__meta { text-box: trim-both cap alphabetic; }

/* next screening: top left under the name on every slide, a little larger than the labels */
.stage > .stage__pill {
  position: absolute; z-index: 3; left: var(--gutter); top: calc(var(--s-12) + var(--s-3));
  gap: 0.55rem; padding: 0.2rem 0 0.2rem 1.15rem; max-width: calc(100% - 2 * var(--gutter));
}
.stage > .stage__pill .stage__pill-head { font-size: 0.8125rem; }
.stage > .stage__pill .stage__pill-text { font-size: 1.125rem; }
@media (max-width: 1023px) {
  .stage > .stage__pill { top: calc(var(--s-12) + var(--s-2)); }
  .stage > .stage__pill .stage__pill-head { font-size: 0.75rem; }
  .stage > .stage__pill .stage__pill-text { font-size: 1rem; }
}
@media (max-width: 699px) {
  .stage > .stage__pill .stage__pill-text { white-space: normal; line-height: 1.35; }
}

/* phones and tablets: no View project (tap the name or the image) and no side arrows (the Index
   is there); the next screening becomes a small label, a big date and the festival, over a soft
   dark fade at the top; the bottom line's dot turns mustard so only the top dot is red */
.stage__pill-m { display: none; }
@media (max-width: 1023px) {
  .stage__info [data-open], .stage__controls { display: none; }
  .stage__info { bottom: calc(var(--s-12) + var(--s-1) - 4px); }
  .stage__bg img { object-position: var(--focus-m, var(--focus, 50% 50%)); }
  .stage__shade { background:
    linear-gradient(180deg, rgba(5,5,5,0.72) 0%, rgba(5,5,5,0.45) 19%, rgba(5,5,5,0) 42%),
    linear-gradient(180deg, rgba(5,5,5,0) 48%, rgba(5,5,5,0.88) 100%); }
  .stage > .stage__pill { top: calc(var(--s-12) + var(--s-3)); right: var(--gutter); padding: 0; border-left: 0; }
  .stage > .stage__pill .stage__pill-head, .stage > .stage__pill .stage__pill-text { display: none; }
  .stage__pill-m { display: grid; gap: 8px; justify-items: start; }
  .stage__pill-mhead, .stage__pill-event { display: inline-flex; align-items: center; color: var(--muted); }
  .stage__pill-mhead .dot { margin-right: 0.7em; vertical-align: 0; }
  .stage__pill-event { gap: 0.7em; }
  .stage__pill-event .ico { width: 10px; height: 10px; transition: transform var(--t-med) var(--ease); }
  .stage__pill-date { font-size: 2.125rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1; text-transform: none; color: var(--text); }
  .stage__pill:hover .stage__pill-event .ico { transform: translateX(3px); }
  .next-screening .dot { background: #C29A3A; }
}

/* phones and tablets: the side arrows come back small and faint, only for a moment after a touch */
@media (max-width: 1023px) {
  .stage__controls { display: block; }
  .stage__arrow { top: 50%; width: 40px; height: 56px; opacity: 0; pointer-events: none; color: var(--text); transition: opacity 600ms ease; }
  .stage__arrow svg { width: 14px; height: 14px; }
  .stage.is-touched .stage__arrow { opacity: 0.45; pointer-events: auto; transition-duration: 200ms; }
}

/* phone menu: a small "← Main page" above Work, since Work now opens the film list */
.menu-links a.menu-home { display: inline-flex; align-items: center; gap: 0.6em; margin-bottom: var(--s-3); font-size: 0.75rem; font-weight: 400; line-height: 1; letter-spacing: 0.2em; color: var(--muted); }
.menu-links a.menu-home:hover { color: var(--text); }