/* Odaar Studio
   Dark is the screening room; light is the same work printed on paper.
   Colour comes from the films. The pink is the logo's asterisk and is kept for
   focus, selection and the email underline. Gold belongs to Ujjwal Saagar's section. */

@property --ar {
  syntax: "<number>";
  inherits: true;
  initial-value: 2.738;
}

:root {
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 2.6vw, 40px);
  --nav-h: 76px;
  --section-space: clamp(96px, 13vw, 200px);

  --text-s: 0.875rem;
  --text-m: 1.0625rem;
  --text-l: clamp(1.1875rem, 1.5vw, 1.375rem);
  --display-s: clamp(1.75rem, 3.4vw, 3.25rem);
  --display-m: clamp(2.5rem, 6.4vw, 7rem);
  --display-l: clamp(3.75rem, 14vw, 14rem);
  --display-xl: clamp(6rem, 30vw, 30rem);

  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --asterisk: #f5226f;
}

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000;
  --fg: #ecebe7;
  --fg-soft: rgb(236 235 231 / 0.76);
  --dim: #8f8c86;
  --rule: #2b2a28;
  --placeholder: #0d0d0d;
  --glass: rgb(0 0 0 / 0.42);
  --glass-line: rgb(236 235 231 / 0.16);
  --invert-bg: #ecebe7;
  --invert-fg: #000;
  --invert-dim: #4a4844;
  --saagar-text: #f1d44c;
  --grain-opacity: 0.16;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #edece8;
  --fg: #000;
  --fg-soft: rgb(0 0 0 / 0.72);
  --dim: #67645e;
  --rule: #cfccc5;
  --placeholder: #dcdad5;
  --glass: rgb(237 236 232 / 0.6);
  --glass-line: rgb(0 0 0 / 0.12);
  --invert-bg: #000;
  --invert-fg: #ecebe7;
  --invert-dim: #a3a09a;
  --saagar-text: #7a5d00;
  --grain-opacity: 0.12;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}
html.menu-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--text-m);
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

::selection { background: var(--asterisk); color: #000; }

:focus-visible {
  outline: 2px solid var(--asterisk);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Marks that exist in a light and a dark version */
.on-light { display: none !important; }
:root[data-theme="light"] .on-light { display: block !important; }
:root[data-theme="light"] .on-dark { display: none !important; }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--fg);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Film grain over everything; it never takes clicks */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  background: url("../brand/grain.png");
  opacity: var(--grain-opacity);
  animation: grain 0.9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

.display {
  font-stretch: 62%;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.84;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.text-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color 0.2s;
}
.text-link:hover { text-decoration-color: currentColor; }

.link-row { display: flex; flex-wrap: wrap; gap: 8px 28px; }

/* A word that rolls over a 3D edge on hover: two copies, one face each */
.roll {
  display: inline-grid;
  perspective: 300px;
}
.roll > span {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  transform-origin: 50% 50% -0.55em;
  transition: transform 0.55s var(--ease-out);
}
.roll > span + span { transform: rotateX(-90deg); }
a:hover .roll > span:first-child,
a:focus-visible .roll > span:first-child,
button:hover .roll > span:first-child,
button:focus-visible .roll > span:first-child { transform: rotateX(90deg); }
a:hover .roll > span + span,
a:focus-visible .roll > span + span,
button:hover .roll > span + span,
button:focus-visible .roll > span + span { transform: rotateX(0deg); }


/* ───────── Menu bar ───────── */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  transition: transform 0.5s var(--ease-out), background-color 0.35s, border-color 0.35s;
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--glass-line);
}
.nav.is-hidden { transform: translateY(-105%); }

.nav__logo { justify-self: start; }
.nav__logo img { width: 112px; }

.nav__bar {
  position: relative;
  padding: 5px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
.nav.is-solid .nav__bar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

.nav__links { position: relative; z-index: 1; display: flex; }
.nav__links a {
  display: block;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: color 0.35s;
}
.nav__links a[aria-current] { color: var(--bg); }

/* Slides under whichever section you're in */
.nav__pill {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--fg);
  opacity: 0;
  transition: transform 0.6s var(--ease-out), width 0.6s var(--ease-out), opacity 0.3s;
}
.nav__pill.is-visible { opacity: 1; }

.nav__tools {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle,
.round-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform 0.5s var(--ease-out), border-color 0.3s;
}
.theme-toggle svg { transition: transform 0.7s var(--ease-out); }
.theme-toggle:hover { border-color: currentColor; }
.theme-toggle:hover svg { transform: rotate(180deg); }
:root[data-theme="light"] .theme-toggle svg { transform: rotate(180deg); }
:root[data-theme="light"] .theme-toggle:hover svg { transform: rotate(360deg); }

.nav__cta {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.nav__menu {
  display: none;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 18px 0 16px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: 0.9375rem;
  font-weight: 600;
}
.nav__menu-lines {
  position: relative;
  width: 16px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}


/* ───────── Full-screen menu (phones and tablets) ───────── */

.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--fg);
  /* scrolls on short screens so the bottom row (theme, Instagram, phone) is always reachable */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease);
}
.menu::backdrop { background: transparent; }
.menu.is-open { clip-path: inset(0 0 0 0); }

/* The still currently in the hero, dim and slowly settling */
.menu__backdrop {
  position: absolute;
  inset: 0;
  background-image: var(--menu-still);
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  transform: scale(1.18);
  transition: transform 1.6s var(--ease-out);
}
.menu__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--bg) 0%, transparent 35%, transparent 55%, var(--bg) 100%);
}
:root[data-theme="light"] .menu__backdrop { opacity: 0.16; filter: grayscale(1); }
.menu.is-open .menu__backdrop { transform: scale(1); }

.menu__inner {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
  padding: 0 var(--gutter) max(24px, env(safe-area-inset-bottom));
}

.menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.menu__logo { width: 88px; }
.menu__close {
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.menu__inner > nav { align-self: center; padding: 24px 0; }
.menu__links {
  display: grid;
  gap: clamp(6px, 2vh, 18px);
}
.menu__links li { perspective: 700px; }
.menu__links a {
  display: grid;
  gap: 4px;
  text-decoration: none;
  transform-origin: 50% 100%;
  transform: rotateX(-80deg) translateY(30%);
  opacity: 0;
  transition: transform 0.9s var(--ease-out), opacity 0.6s;
}
.menu.is-open .menu__links a {
  transform: none;
  opacity: 1;
  transition-delay: calc(var(--i) * 70ms + 180ms);
}
.menu__word {
  font-stretch: 62%;
  font-weight: 800;
  /* sized by width and height, so four words plus the bottom row fit on a laptop window */
  font-size: clamp(2.5rem, min(17vw, 11.5vh), 8rem);
  line-height: 0.86;
  text-transform: uppercase;
}
.menu__links a[aria-current] .menu__word::after {
  content: "";
  display: inline-block;
  width: 0.22em;
  height: 0.22em;
  margin-left: 0.08em;
  vertical-align: top;
  background: var(--asterisk);
  -webkit-mask: url("../brand/asterisk.svg") center / contain no-repeat;
  mask: url("../brand/asterisk.svg") center / contain no-repeat;
}
.menu__note { color: var(--dim); font-size: var(--text-s); }
@media (max-height: 520px) {
  .menu__note { display: none; }
  .menu__inner > nav { padding: 8px 0; }
}

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  opacity: 0;
  transition: opacity 0.6s 0.45s;
}
.menu.is-open .menu__foot { opacity: 1; }
.menu__foot a { text-decoration: none; }
.menu__theme { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; font-weight: 500; }

.switch {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: currentColor;
  transition: transform 0.4s var(--ease-out);
}
[aria-pressed="true"] > .switch::after { transform: translateX(18px); }


/* ───────── Hero: a screen in a dark room ───────── */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--bg);
  transition: --ar 0.7s var(--ease);

  /* set by script: pointer tilt and how far the hero has scrolled away */
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --p: 0;
}

.hero__stage {
  position: absolute;
  inset: 0;
  container-type: size;
  perspective: 1600px;
  perspective-origin: 50% 35%;
}

.hero__screen {
  --cx: 0px;
  --cy: -50%;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: min(100cqh, 100cqw / var(--ar));
  overflow: hidden;
  transform:
    translate(var(--cx), var(--cy))
    rotateX(calc(var(--tilt-x) + var(--p) * 18deg))
    rotateY(var(--tilt-y))
    scale(calc(1 - var(--p) * 0.16));
  transform-origin: 50% 100%;
  will-change: transform;
}

/* Scrims so the nav and headline stay readable over bright skies */
.hero__screen::before,
.hero__screen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.hero__screen::before { top: 0; height: 30%; background: linear-gradient(rgb(0 0 0 / 0.5), transparent); }
.hero__screen::after { bottom: 0; height: 45%; background: linear-gradient(transparent, rgb(0 0 0 / 0.35)); }

/* Fades the screen into the page as it recedes */
.hero__dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bg);
  opacity: calc(var(--p) * 0.75);
  pointer-events: none;
}

.hero__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.hero__frame.is-active { opacity: 1; }
.hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  --fg: #ecebe7;
  --fg-soft: rgb(236 235 231 / 0.8);
  color: var(--fg);
  mix-blend-mode: difference;
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 48px;
  padding: 0 var(--gutter) clamp(20px, 3vw, 40px);
  transform: translate3d(0, calc(var(--p) * -90px), 0);
  opacity: calc(1 - var(--p) * 1.6);
}

.hero { --hero-type: clamp(2.875rem, 6.6vw, 8rem); }
.hero__title { font-size: var(--hero-type); }
.hero__line { display: block; }

.hero__caption {
  display: grid;
  gap: 14px;
  justify-items: end;
  text-align: right;
  min-width: 220px;
}

.hero__now { display: grid; gap: 2px; }
.hero__film {
  font-stretch: 62%;
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}
.hero__film:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.hero__kind { color: var(--fg-soft); font-size: var(--text-s); }

.hero__controls { display: flex; align-items: center; gap: 18px; }
.hero__segs { display: flex; gap: 6px; }

.hero__seg { position: relative; width: 28px; height: 24px; }
.hero__seg::before,
.hero__fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 2px;
}
.hero__seg::before { content: ""; background: color-mix(in srgb, var(--fg) 30%, transparent); }
.hero__fill {
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
}
.hero__seg.is-active .hero__fill { animation: fill 2s linear forwards; }
.hero.is-paused .hero__fill { animation-play-state: paused; }
.hero__seg.is-done .hero__fill { transform: scaleX(1); }
@keyframes fill { to { transform: scaleX(1); } }

.hero__pause {
  font-size: var(--text-s);
  font-weight: 500;
  min-width: 3.5em;
  padding: 4px 0;
  text-align: right;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: color-mix(in srgb, var(--fg) 45%, transparent);
}

/* Dark theme on wider screens: the headline rides the frame's bottom edge, moving
   with the letterbox, so the lower line sits on black and the upper line inverts the film */
@media (min-width: 640px) {
  :root:not([data-theme="light"]) .hero__title {
    position: absolute;
    left: var(--gutter);
    bottom: max(
      clamp(20px, 3vw, 40px),
      calc((max(100svh, 560px) - min(max(100svh, 560px), 100vw / var(--ar))) / 2 - var(--hero-type) * 0.95)
    );
  }
  :root:not([data-theme="light"]) .hero__overlay { grid-template-columns: 1fr; justify-items: end; }
  :root:not([data-theme="light"]) .hero__screen::after { display: none; }
}

/* Light theme: the frame is a print floating on paper, contained not cropped,
   so the shape change reads as pillarbox vs letterbox. Headline sits below it. */
:root[data-theme="light"] .hero {
  display: grid;
  grid-template-rows: var(--nav-h) minmax(0, 1fr) auto;
}
:root[data-theme="light"] .hero__stage {
  position: relative;
  grid-row: 2;
  margin: 12px var(--gutter) 0;
}
:root[data-theme="light"] .hero__screen {
  --cx: -50%;
  --cy: 0px;
  top: auto;
  bottom: 0;
  left: 50%;
  right: auto;
  width: min(100cqw, 100cqh * var(--ar));
  box-shadow: 0 60px 90px -50px rgb(0 0 0 / 0.55), 0 2px 8px rgb(0 0 0 / 0.12);
}
:root[data-theme="light"] .hero__screen::before,
:root[data-theme="light"] .hero__screen::after { display: none; }
:root[data-theme="light"] .hero__overlay {
  position: relative;
  grid-row: 3;
  margin-top: calc(var(--hero-type) * -0.62);
}


/* ───────── Scroll depth: things rise into place like a screen being raised ───────── */

.fx {
  --q: 1;
  --fx-angle: 12deg;
  --fx-rise: 60px;
  --fx-s0: 0.94;
  --tx: 0deg;
  --ty: 0deg;
  transform:
    perspective(1400px)
    translate3d(0, calc((1 - var(--q)) * var(--fx-rise)), 0)
    rotateX(calc((1 - var(--q)) * var(--fx-angle) + var(--tx)))
    rotateY(var(--ty))
    scale(calc(var(--fx-s0) + var(--q) * (1 - var(--fx-s0))));
  transform-origin: 50% 100%;
}
.fx--title { --fx-angle: 62deg; --fx-rise: 30px; --fx-s0: 1; }
.fx--wide { --fx-angle: 9deg; --fx-s0: 0.9; }

/* Pointer tilt with a soft glare, for stills and players */
[data-tilt]:not(.fx) {
  --tx: 0deg;
  --ty: 0deg;
  transform: perspective(900px) rotateX(var(--tx)) rotateY(var(--ty));
}
[data-tilt] { position: relative; }
[data-tilt]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / 0.22), transparent 55%);
  opacity: var(--glare, 0);
  transition: opacity 0.4s;
}
.player.is-playing::after { display: none; }


/* ───────── Two-tone type ─────────
   Light ink in difference mode: it reads light over dark, dark over light, and
   inverts the film where it crosses a frame. Used only on headings that cross an edge. */
.blend {
  position: relative;
  z-index: 2;
  color: #ecebe7;
  mix-blend-mode: difference;
  pointer-events: none;
}
.blend a, a.blend { pointer-events: auto; }


/* ───────── Sections ───────── */

.section { padding: var(--section-space) var(--gutter) 0; }

.section-title {
  font-size: var(--display-l);
  line-height: 0.8;
  margin-left: -0.04em;
  margin-bottom: clamp(40px, 6vw, 96px);
}
.work__title { margin-bottom: -0.36em; }


/* Intro */

.intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px var(--gutter);
}
.intro__lead {
  grid-column: 1 / span 9;
  font-size: var(--display-s);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.intro__body,
.intro__clients {
  grid-column: 7 / span 5;
  max-width: 48ch;
  font-size: var(--text-l);
  line-height: 1.5;
  color: var(--fg-soft);
}
.intro__clients { margin-top: -12px; color: var(--dim); font-size: var(--text-m); }


/* Shared film parts */

.film + .film { margin-top: var(--section-space); }

.film__title { font-size: var(--display-l); }
.film__subtitle { font-size: var(--text-l); font-weight: 500; }

.film__text {
  display: grid;
  align-content: start;
  gap: 1.1em;
  max-width: 54ch;
  font-size: var(--text-l);
  line-height: 1.5;
}

.facts { display: grid; gap: 14px; margin-top: 28px; }
.facts dt, .credits-list dt { color: var(--dim); font-size: var(--text-s); }
.facts dd { font-weight: 500; }

.still {
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--placeholder);
  cursor: zoom-in;
}
.still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.still:hover img { transform: scale(1.04); }


/* KRIMI: full-bleed lead, giant title crossing the bottom edge, curved panorama strip */

.film--krimi { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }

.krimi__lead { position: relative; }
.krimi__lead .still { aspect-ratio: 2.55; }
.krimi__lead .still:hover img { transform: none; }

.krimi__title {
  position: absolute;
  left: var(--gutter);
  bottom: 0;
  transform: translateY(64%);
  font-size: var(--display-xl);
  line-height: 0.78;
  pointer-events: none;
}

.krimi__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px var(--gutter);
  padding: calc(var(--display-xl) * 0.56 + 48px) var(--gutter) 0;
}
.krimi__body .film__heading { grid-column: 1 / span 4; }
.krimi__body .film__text { grid-column: 7 / span 6; }

.strip__controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: clamp(40px, 5vw, 72px);
  padding: 0 var(--gutter);
}
.round-button:disabled { opacity: 0.3; cursor: default; }
.round-button:not(:disabled):hover { border-color: currentColor; }

.strip {
  margin-top: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.strip__track {
  display: flex;
  gap: 14px;
  width: max-content;
  padding: 24px var(--gutter) 28px;
}
.strip__track li {
  scroll-snap-align: start;
  transform-style: preserve-3d;
  will-change: transform;
}
.strip .still {
  height: clamp(150px, 21vw, 320px);
  width: auto;
  aspect-ratio: 2.74;
}


/* Madhur Jhankaar */

.mj__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px var(--gutter);
  align-items: start;
}
.mj__intro { grid-column: 1 / span 5; grid-row: 1; }
.mj__player { grid-column: 6 / span 7; grid-row: 1; }
.mj__text { grid-column: 1 / span 5; grid-row: 2; }
.mj__credits { grid-column: 6 / span 7; grid-row: 2; display: grid; gap: 24px; align-content: start; }

/* One word per line; JHANKAAR is wider than its column and runs into the video */
.mj__title { font-size: var(--display-l); width: min-content; }

.mj__devanagari {
  margin-top: 12px;
  font-family: "Tiro Devanagari Hindi", serif;
  font-size: var(--display-s);
  line-height: 1.3;
  color: var(--dim);
}
.mj__intro .film__subtitle { margin-top: 18px; }

.lyric {
  margin-top: 1em;
  padding-left: 20px;
  border-left: 2px solid var(--rule);
}
.lyric blockquote {
  margin: 0;
  font-family: "Tiro Devanagari Hindi", serif;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.4;
}
.lyric figcaption { margin-top: 6px; color: var(--dim); font-size: 0.9375rem; }

.credits-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 24px;
  font-size: 0.9375rem;
}
.credits-list div { display: contents; }
.credits-list dt { padding-top: 0.12em; }

.mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(40px, 5vw, 72px);
}
.mosaic li .still { aspect-ratio: 16 / 9; }
.mosaic__a { grid-column: 1 / span 7; }
.mosaic__b { grid-column: 8 / span 5; }
.mosaic__b .still { height: 100%; aspect-ratio: auto; }
.mosaic__c, .mosaic__d, .mosaic__e { grid-column: span 4; }


/* Video players load YouTube only when someone presses play */

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--placeholder);
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.player__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
}
.player__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.player__poster:hover img { transform: scale(1.03); }

.player__label {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 16px;
  border-radius: 999px;
  background: #ecebe7;
  color: #000;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  transition: transform 0.5s var(--ease-out);
}
.player__label::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 11px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.player__time { font-weight: 400; color: #55534f; font-variant-numeric: tabular-nums; }
.player__poster:hover .player__label { background: #fff; transform: translateZ(0) scale(1.05); }


/* Samaya ko Cycle */

.samaya__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px var(--gutter);
  align-items: end;
}
.samaya__player { grid-column: 1 / span 8; }
.samaya__text { grid-column: 9 / span 4; display: grid; gap: 18px; }
.samaya__title { font-size: var(--display-m); }
.samaya__text .film__text { font-size: var(--text-m); margin-top: 6px; }

.row-of-four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.row-of-four .still { aspect-ratio: 16 / 9; }


/* Index of all work */

.index { margin-top: var(--section-space); position: relative; }
.index__float {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  width: clamp(240px, 22vw, 340px);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 40px 70px -30px rgb(0 0 0 / 0.6);
  transition: opacity 0.3s;
  will-change: transform;
}
.index__float.is-on { opacity: 1; }
.index__table tbody tr[data-preview] { cursor: default; }
.index__title { font-size: var(--text-l); font-weight: 600; margin-bottom: 20px; }
.index__table { width: 100%; border-collapse: collapse; font-size: var(--text-m); }
.index__table thead th {
  text-align: left;
  font-weight: 400;
  font-size: var(--text-s);
  color: var(--dim);
  padding: 0 16px 10px 0;
}
.index__table tbody th,
.index__table td {
  text-align: left;
  padding: 18px 16px 18px 0;
  border-top: 1px solid var(--rule);
  vertical-align: baseline;
}
.index__table tbody tr:last-child > * { border-bottom: 1px solid var(--rule); }
.index__table tbody th {
  font-stretch: 62%;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1;
  text-transform: uppercase;
  width: 40%;
}
.index__table tbody th a { text-decoration: none; }
.index__table tbody th a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.index__table td:last-child { text-align: right; padding-right: 0; white-space: nowrap; }


/* Services: the one inverted section in either theme */

.services {
  margin-top: var(--section-space);
  padding-bottom: var(--section-space);
  background: var(--invert-bg);
  color: var(--invert-fg);
}
.services ::selection { background: var(--invert-fg); color: var(--invert-bg); }
.services :focus-visible { outline-color: currentColor; }

/* flow-root stops the title's negative margin collapsing into the section's, so it pokes out of the panel */
.services { padding-top: 0; display: flow-root; }
.services__title {
  font-size: var(--display-l);
  margin-left: -0.03em;
  margin-top: -0.44em;
  margin-bottom: clamp(48px, 7vw, 112px);
}

.services__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px var(--gutter);
}

.service {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 16px;
  padding-top: 20px;
  border-top: 2px solid currentColor;
}
.service__name {
  font-size: var(--display-s);
  font-stretch: 62%;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
}
.service__what { max-width: 36ch; font-size: var(--text-l); line-height: 1.45; }
.service__items { color: var(--invert-dim); font-size: 0.9375rem; line-height: 1.75; }


/* Artists */

.artist {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px var(--gutter);
  align-items: end;
}
.artist__poster { grid-column: 1 / span 5; overflow: hidden; }
.artist__text {
  grid-column: 7 / span 5;
  display: grid;
  gap: 1em;
  max-width: 50ch;
  font-size: var(--text-l);
  line-height: 1.5;
}
.artist__name img { width: min(100%, 360px); margin-bottom: 8px; }
.artist__role { color: var(--saagar-text); font-weight: 500; }
.artist .text-link { text-decoration-color: color-mix(in srgb, var(--saagar-text) 60%, transparent); }
.artist .text-link:hover { text-decoration-color: var(--saagar-text); }

.artists__call {
  margin-top: clamp(56px, 7vw, 104px);
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: var(--text-l);
}


/* Studio: laid out like end credits, role left of the axis, name right of it */

.studio__title {
  text-align: center;
  font-size: var(--text-m);
  font-weight: 500;
  color: var(--dim);
  margin-bottom: clamp(40px, 5vw, 72px);
}

.credits { display: grid; gap: clamp(40px, 5vw, 64px); }

.credit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(20px, 3vw, 48px);
  row-gap: 8px;
  align-items: baseline;
  --fx-angle: 35deg;
  --fx-s0: 1;
}
.credit__role {
  grid-row: 1;
  text-align: right;
  color: var(--dim);
  font-size: var(--text-l);
}
.credit__name {
  grid-column: 2;
  grid-row: 1;
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(2.25rem, 4.8vw, 5.25rem);
  line-height: 0.9;
  text-transform: uppercase;
}
.credit__note { grid-column: 2; max-width: 40ch; color: var(--fg-soft); }


/* ───────── Closing scene: contact and footer over a 3D wall of stills ─────────
   Always the dark room, in either theme, like end credits. */

.finale {
  --bg: #000;
  --fg: #ecebe7;
  --fg-soft: rgb(236 235 231 / 0.76);
  --dim: #9a978f;
  --rule: rgb(236 235 231 / 0.16);
  --glass: rgb(0 0 0 / 0.42);
  --glass-line: rgb(236 235 231 / 0.18);
  --wall-rx: 58deg;
  --wall-z: 0px;
  position: relative;
  margin-top: var(--section-space);
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  color-scheme: dark;
}

.finale__wall {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(130vh, 1300px);
  overflow: hidden;
  /* the wall fades in under the heading and out before the small print */
  -webkit-mask-image: linear-gradient(transparent 0%, #000 14%, #000 58%, transparent 92%);
  mask-image: linear-gradient(transparent 0%, #000 14%, #000 58%, transparent 92%);
  perspective: 900px;
  perspective-origin: 70% 20%;
  pointer-events: none;
}
.finale__plane {
  position: absolute;
  left: 50%;
  top: 34%;
  display: grid;
  gap: 14px;
  transform: translate(-50%, -50%) rotateX(var(--wall-rx)) rotateZ(-12deg) translateZ(var(--wall-z));
  transform-style: preserve-3d;
}
.finale__row {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: wall-drift 90s linear infinite;
}
.finale__row--reverse { animation-direction: reverse; animation-duration: 110s; }
.finale__row img { width: clamp(180px, 22vw, 340px); height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@keyframes wall-drift { to { transform: translateX(-50%); } }

/* Darkens the wall where small text sits, leaves it bright behind the big type */
.finale::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.15) 55%, rgb(0 0 0 / 0.3));
}

.finale__contact,
.finale .footer { position: relative; z-index: 2; }

.finale__contact { padding: clamp(120px, 16vw, 240px) var(--gutter) clamp(72px, 9vw, 128px); }

.finale__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.finale__title { font-size: var(--display-l); max-width: 12ch; }
.finale__stamp {
  width: clamp(88px, 12vw, 180px);
  flex-shrink: 0;
  transform: rotate(calc(-9deg + var(--spin, 0deg)));
  opacity: 0.92;
}

.finale__lead {
  text-shadow: 0 1px 14px #000, 0 0 2px #000;
  max-width: 44ch;
  margin-top: clamp(28px, 4vw, 48px);
  font-size: var(--text-l);
  color: var(--fg-soft);
}

.finale__email {
  display: inline-block;
  margin-top: clamp(36px, 5vw, 64px);
  font-stretch: 62%;
  font-weight: 700;
  font-size: clamp(2.5rem, 10.5vw, 11rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.finale__email .flip { box-shadow: inset 0 -0.05em 0 var(--asterisk); }

/* Letters flip over one after another on hover */
.flip { display: inline-block; perspective: 700px; }
.flip > span {
  display: inline-block;
  transform-origin: 50% 50% -0.25em;
  transition: transform 0.8s var(--ease-out);
  transition-delay: calc(var(--i) * 22ms);
}
a:hover .flip > span,
a:focus-visible .flip > span { transform: rotateX(360deg); }


.button {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 24px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.25s, transform 0.4s var(--ease-out);
}
.button:hover { border-color: currentColor; transform: translateY(-2px); }
.button--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.finale__details {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.15fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 32px var(--gutter);
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: var(--text-l);
}
.finale__details dt { color: var(--dim); font-size: var(--text-s); margin-bottom: 6px; }
.finale__details a { text-decoration: none; }
.finale__details a:hover { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.finale__time { color: var(--dim); font-size: var(--text-m); margin-top: 4px; }

/* Contact buttons: one pill style everywhere, label rolls over on hover */
.contact-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px 0 14px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  color: var(--fg);
  font-size: var(--text-s);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: border-color 0.25s, background-color 0.25s;
}
.finale__details a.pill { text-decoration: none; }
.pill:hover { border-color: currentColor; background: rgb(236 235 231 / 0.06); }
.pill--wa:hover { border-color: #25d366; }
.wa-icon { width: 16px; height: 16px; flex-shrink: 0; color: #25d366; }
.mail-icon { width: 17px; height: 17px; flex-shrink: 0; }


/* Footer */

.footer {
  padding: 0 var(--gutter) max(28px, env(safe-area-inset-bottom));
  font-size: 0.9375rem;
}
.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px var(--gutter);
  padding: 40px 0 48px;
  border-top: 1px solid var(--rule);
}
.footer__logo { width: 112px; margin-bottom: 16px; }
.footer__brand p { max-width: 32ch; color: var(--dim); }
.footer__label { color: var(--dim); font-size: var(--text-s); margin-bottom: 12px; }
.footer__col ul { display: grid; gap: 6px; }
.footer__col a { text-decoration: none; }
.footer__col a:hover { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--dim);
  font-size: var(--text-s);
}
.footer__bottom p { margin-right: auto; }
/* Developer credit */
.footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--dim);
  text-decoration: none;
  transition: color 0.25s;
}
.footer__credit-logo { width: 66px; height: auto; aspect-ratio: 89.81 / 38.81; color: var(--fg); transition: transform 0.5s var(--ease-out); }
.footer__credit:hover { color: var(--fg); }
.footer__credit:hover .footer__credit-logo { transform: translateY(-2px); }

.footer__theme { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); font-weight: 500; }

.footer__up { display: inline-flex; align-items: center; gap: 12px; color: var(--fg); font-weight: 500; text-decoration: none; }
.footer__up-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  transition: transform 0.6s var(--ease-out), border-color 0.25s;
}
.footer__up:hover .footer__up-icon { transform: perspective(300px) rotateX(180deg); border-color: currentColor; }
.footer__up:hover .footer__up-icon svg { transform: rotate(180deg); }


/* Email chooser: shown when a desktop visitor clicks an email link,
   because many people write email in the browser and have no mail app set up */

.mailer {
  width: min(460px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--glass-line);
  border-radius: 20px;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 50px 90px -40px rgb(0 0 0 / 0.7);
}
.mailer::backdrop {
  background: rgb(0 0 0 / 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.mailer[open] { animation: mailer-in 0.5s var(--ease-out); }
@keyframes mailer-in {
  from { opacity: 0; transform: perspective(900px) rotateX(-14deg) translateY(18px) scale(0.97); }
}

.mailer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mailer__title {
  font-stretch: 62%;
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  text-transform: uppercase;
}
.mailer__close {
  padding: 6px 0;
  font-size: var(--text-s);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.mailer__hint { margin: 10px 0 20px; color: var(--dim); font-size: 0.9375rem; }

.mailer__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.mailer__label { margin: 18px 0 8px; color: var(--dim); font-size: var(--text-s); }
.mailer__wa .mailer__hint { margin-bottom: 0; }
.mailer.is-hello [data-mailer-email-hint] { display: none; }
.mailer__wa-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mailer__option.mailer__option--wa { display: flex; align-items: center; justify-content: center; gap: 9px; font-variant-numeric: tabular-nums; }
.mailer__option--wa .wa-icon { width: 18px; height: 18px; }
.mailer__option--wa:hover { border-color: #25d366; }

/* On phones the mail app is the natural first choice */
.mailer.is-touch [data-mailer-app] { order: -1; background: var(--fg); color: var(--bg); border-color: var(--fg); }
.mailer.is-touch .mailer__option--main { background: none; color: inherit; border-color: var(--glass-line); }
.mailer__option {
  display: grid;
  place-items: center;
  height: 52px;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.4s var(--ease-out);
}
.mailer__option:hover { border-color: currentColor; transform: translateY(-2px); }
.mailer__option--main { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.mailer__address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 10px 10px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.mailer__copy {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  font-size: var(--text-s);
  font-weight: 600;
}
.mailer__copy:hover { border-color: currentColor; }


/* Lightbox: always a dark room, whatever the theme */

.lightbox {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(16px, 3vw, 40px);
  border: 0;
  background: #000;
  color: #ecebe7;
  color-scheme: dark;
}
.lightbox[open] { display: grid; grid-template-rows: 1fr auto; gap: 16px; }
.lightbox::backdrop { background: #000; }

.lightbox__figure { display: grid; grid-template-rows: 1fr auto; gap: 12px; min-height: 0; }
.lightbox__img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.lightbox__caption { color: #8f8c86; font-size: var(--text-s); }

.lightbox__controls { display: flex; gap: 28px; justify-content: flex-end; font-size: var(--text-m); font-weight: 500; }
.lightbox__controls button { padding: 6px 0; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; text-decoration-color: rgb(236 235 231 / 0.45); }
.lightbox__controls button:hover { text-decoration-color: currentColor; }


/* Theme switch: the new theme opens in a circle from the button (see script) */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }


/* ───────── Tablet ───────── */

@media (max-width: 959px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__bar { display: none; }
  .nav__menu { display: inline-flex; }

  .intro__lead { grid-column: 1 / -1; }
  .intro__body, .intro__clients { grid-column: 3 / -1; }

  .krimi__body .film__heading { grid-column: 1 / span 5; }
  .krimi__body .film__text { grid-column: 6 / -1; }

  .mj__intro, .mj__player, .mj__text, .mj__credits { grid-column: 1 / -1; grid-row: auto; }

  .finale__details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .samaya__player { grid-column: 1 / -1; }
  .samaya__text { grid-column: 1 / -1; order: -1; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .row-of-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .services__list { grid-template-columns: 1fr; }
  .service { grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; column-gap: var(--gutter); }
  .service__name { grid-column: 1 / -1; }

  .artist__poster { grid-column: 1 / span 6; }
  .artist__text { grid-column: 7 / -1; }
}


/* ───────── Phone ───────── */

@media (max-width: 639px) {
  :root { --nav-h: 64px; }
  .nav__logo img { width: 88px; }
  .nav__tools { gap: 8px; }
  .nav__cta { height: 42px; padding: 0 16px; display: inline-flex; align-items: center; }

  /* Both themes: the frame sits between the menu bar and the headline.
     A true letterbox is a thin strip on a phone, so it's scaled up and cropped at the sides. */
  .hero,
  :root[data-theme="light"] .hero {
    display: grid;
    grid-template-rows: var(--nav-h) minmax(0, 1fr) auto;
  }
  .hero__stage,
  :root[data-theme="light"] .hero__stage {
    position: relative;
    grid-row: 2;
    margin: 0;
  }
  .hero__screen,
  :root[data-theme="light"] .hero__screen {
    --cx: 0px;
    --cy: 0px;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: min(100cqh, 100cqw / var(--ar) * 2.2);
  }
  .hero__screen::before, .hero__screen::after { display: none; }
  .hero__overlay,
  :root[data-theme="light"] .hero__overlay {
    position: relative;
    grid-row: 3;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: calc(var(--hero-type) * -0.62);
  }
  .hero__caption { justify-items: start; text-align: left; }
  .hero__controls { width: 100%; justify-content: space-between; }

  .intro__body, .intro__clients { grid-column: 1 / -1; }

  .krimi__body .film__heading,
  .krimi__body .film__text { grid-column: 1 / -1; }
  .strip__controls { display: none; }

  .mosaic__a, .mosaic__b { grid-column: 1 / -1; }
  .mosaic__b .still { height: auto; aspect-ratio: 16 / 9; }
  .mosaic__c, .mosaic__d { grid-column: span 6; }
  .mosaic__e { grid-column: 1 / -1; }

  .credits-list { grid-template-columns: 1fr; gap: 0; }
  .credits-list dd { margin-bottom: 10px; }

  .index__table thead { display: none; }
  .index__table, .index__table tbody { display: block; }
  .index__table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    padding: 16px 0;
    border-top: 1px solid var(--rule);
  }
  .index__table tbody tr:last-child { border-bottom: 1px solid var(--rule); }
  .index__table tbody th,
  .index__table td { padding: 0; border: 0 !important; width: auto; }
  .index__table tbody th { grid-column: 1 / -1; }
  .index__table td { font-size: var(--text-s); color: var(--dim); }
  .index__table td:nth-child(3) { grid-column: 1; }
  .index__table td:last-child { grid-column: 2; grid-row: 2 / span 2; align-self: end; color: var(--fg); }

  .service { grid-template-columns: 1fr; }

  .artist__poster, .artist__text { grid-column: 1 / -1; }

  .studio__title { text-align: left; }
  .credit { grid-template-columns: 1fr; }
  .credit__role, .credit__name, .credit__note { grid-column: 1; grid-row: auto; text-align: left; }
  .credit__role { font-size: var(--text-s); }

  .finale__details { grid-template-columns: 1fr; }
  .finale__title { font-size: clamp(3rem, 15vw, 5rem); }
  .finale__row img { width: 160px; }
  .finale__wall { height: 92vh; }
  .footer__bottom p { width: 100%; }
  .footer__credit { width: 100%; }
  .mj__title { font-size: clamp(3.5rem, 18vw, 6rem); }
  .lightbox__controls { justify-content: space-between; }
  .mailer__options, .mailer__wa-options { grid-template-columns: 1fr; }
}


/* Hover-only flourishes stay off touch screens */
@media (hover: none) {
  .roll > span + span { display: none; }
  a:hover .roll > span:first-child { transform: none; }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::after { animation: none; }
  .hero, .hero__frame, .still img, .player__poster img, .menu, .menu__backdrop, .menu__links a, .menu__foot, .nav, .nav__pill, .roll > span { transition: none !important; }
  .mailer[open] { animation: none; }
  .finale__row { animation: none; }
  .flip > span { transition: none; }
  a:hover .flip > span { transform: none; }
  .roll > span + span { display: none; }
  a:hover .roll > span:first-child { transform: none; }
  .menu__links a { transform: none; opacity: 1; }
  .menu__foot { opacity: 1; }
}