/* ==========================================================================
   DIVINER STUDIOS - redesign mock, round 3 (2026-09-26)

   Round 3 direction (Mohamed): seamless and dynamic, "like Apple's site",
   not rigid and ruled. The black letterbox bars are gone: the header is
   transparent over the film and turns to glass once you scroll, the hero is
   full-bleed and fades into the page, and the page itself breathes with a
   dim brand cyan.

   Rules this file still keeps:
   - Every frame takes the exact ratio of its file. No frame adds a bar.
   - The logo is the only mark in the site; the D-mark is the tab icon and
     the player's play button, nothing else.
   - Cyan marks the studio's own work, orange marks work for clients.
   - Type sits on a dark gradient zone, never on raw footage.
   - Motion is transform and opacity, ease-out only, and every piece of it
     collapses under prefers-reduced-motion.

   Z-index scale (the only values allowed):
      0  atmosphere          1  page content
     50  header             90  screening
    100  ident             110  skip link
   ========================================================================== */

:root {
  --obsidian: #0B0B0D;
  --matte:    #000000;
  --graphite: #1C1B19;                    /* brandbook v3: Warm Graphite */
  --cyan:     #06D9D2;
  --orange:   #F2600F;                    /* v3: Signal Orange (6.04:1 - one value for every size) */
  --orange-lt:#F2600F;
  --paper:    #EDEBE6;                    /* v3: Bone */
  --ink-2:    #9A968E;                    /* v3: Ash */
  --ink-3:    #6E6E6A;

  /* brandbook v3 p.20: Jost names things, Hanken Grotesk says them, DM Mono labels them */
  --display: "Jost", "Futura", "Century Gothic", sans-serif;
  --face:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono:    "DM Mono", ui-monospace, "Cascadia Mono", monospace;

  --head: 72px;                           /* header height */
  --pad: clamp(16px, 3.4vw, 48px);        /* page gutter */
  --ease: cubic-bezier(.16, 1, .3, 1);
}
@media (max-width: 767px) { :root { --head: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* guard only - every known overflow is fixed at its source. clip (not hidden)
   so it creates no scroll container and position:sticky keeps working. */
html, body { overflow-x: clip; }
html.locked { overflow: hidden; }
body {
  margin: 0; background: var(--obsidian); color: var(--paper);
  font-family: var(--face); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }
::selection { background: var(--cyan); color: var(--obsidian); }

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 110; padding: 10px 14px;
  background: var(--cyan); color: var(--obsidian); font-weight: 600; text-decoration: none;
  transform: translateY(-160%); transition: transform .3s var(--ease);
}
.skip:focus { transform: none; }

/* ---- type roles ---------------------------------------------------------- */

.ol {
  margin: 0; font-weight: 500; font-size: 11px; line-height: 1.4;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2);
}
.name {
  margin: 0; font-family: var(--display); font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
}
.h2 {
  margin: 0; font-weight: 600; font-size: clamp(28px, 3.6vw, 54px);
  line-height: 1.08; letter-spacing: -.005em; text-wrap: balance;
}
.h2.two span { display: block; }
.h2.two .c { color: var(--cyan); }
.status { color: var(--orange-lt); }

/* ---- the atmosphere: dim brand cyan that comes and goes ----------------- */
/* Three soft fields breathing out of phase, on the compositor only
   (opacity + transform of a static gradient, no filters). */
.atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.atmos i {
  position: absolute; width: 78vmax; height: 78vmax;
  background: radial-gradient(closest-side, rgba(6, 217, 210, .085), rgba(6, 217, 210, 0) 72%);
  opacity: 0; will-change: opacity, transform;
  animation: breathe var(--dur) ease-in-out var(--del) infinite;
}
.atmos i:nth-child(1) { --dur: 17s; --del: -4s;  top: -22vmax; left: -24vmax; }
.atmos i:nth-child(2) { --dur: 23s; --del: -11s; top: 18vh;    right: -30vmax; }
.atmos i:nth-child(3) { --dur: 29s; --del: -19s; bottom: -34vmax; left: 20vw; }
@keyframes breathe {
  0%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(.9); }
  50%      { opacity: 1; transform: translate3d(2.5vmax, -2vmax, 0) scale(1.06); }
}
main { position: relative; z-index: 1; }

/* ---- header: transparent over the film, glass once you scroll ----------- */

.head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--head);
  display: flex; align-items: center; gap: 20px;
  padding-inline: var(--pad);
}
/* Progressive blur. One blurred layer faded by a mask still shows where the
   blur stops: you see a sharp picture begin under a blurred one. Instead six
   layers stack, each blurring half as much as the one above and each masked
   to an overlapping band, so the blur itself TAPERS - 16px at the top edge
   down to nothing - and there is no line anywhere. The tint is a separate
   plain gradient, which never shows a seam. */
.glass {
  position: absolute; left: 0; right: 0; top: 0; z-index: -1;
  height: calc(var(--head) + 64px);
  pointer-events: none;
  opacity: 0; transition: opacity .6s var(--ease);
}
.glass::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(11, 11, 13, .66) 0%, rgba(11, 11, 13, .4) 45%, rgba(11, 11, 13, .12) 78%, rgba(11, 11, 13, 0) 100%);
}
.glass i { position: absolute; inset: 0; }
.glass i:nth-child(1) { -webkit-backdrop-filter: blur(.5px); backdrop-filter: blur(.5px);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 16%, #000 33%, transparent 50%);
          mask-image: linear-gradient(to top, transparent 0%, #000 16%, #000 33%, transparent 50%); }
.glass i:nth-child(2) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  -webkit-mask-image: linear-gradient(to top, transparent 16%, #000 33%, #000 50%, transparent 66%);
          mask-image: linear-gradient(to top, transparent 16%, #000 33%, #000 50%, transparent 66%); }
.glass i:nth-child(3) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to top, transparent 33%, #000 50%, #000 66%, transparent 83%);
          mask-image: linear-gradient(to top, transparent 33%, #000 50%, #000 66%, transparent 83%); }
.glass i:nth-child(4) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to top, transparent 50%, #000 66%, #000 83%, transparent 100%);
          mask-image: linear-gradient(to top, transparent 50%, #000 66%, #000 83%, transparent 100%); }
.glass i:nth-child(5) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to top, transparent 66%, #000 83%, #000 100%);
          mask-image: linear-gradient(to top, transparent 66%, #000 83%, #000 100%); }
.glass i:nth-child(6) { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to top, transparent 83%, #000 100%);
          mask-image: linear-gradient(to top, transparent 83%, #000 100%); }
body[data-act="scrolled"] .glass { opacity: 1; }
@media (prefers-reduced-transparency: reduce) {
  .glass i { display: none; }
  .glass::before { background: linear-gradient(to bottom, var(--obsidian) 55%, rgba(11, 11, 13, 0)); }
}

.brand {
  display: block; flex: none; line-height: 0;
  /* brandbook v3 p.10: the vertical mark is never under 93px tall - below that its
     letters fall under 8px (at the old 56px they were 5px). The bar keeps its
     height; the mark hangs from it, inside the glass fade, on phones and desktop. */
  height: 93px; align-self: flex-start; margin-top: 12px;
  aspect-ratio: 702 / 1735;
}
/* The wordmark is a narrow vertical lockup (22px wide on desktop, 16px on a
   phone) - under the 24px WCAG 2.2 minimum target. The visible mark stays
   exact; only the invisible hit area grows. */
/* it lives at the top of the page, not in the fixed bar: scrolls away with it */
body > .brand { position: absolute; top: 0; left: var(--pad); z-index: 51; }
.brand::after { content: ""; position: absolute; inset: -6px -14px; }
.brand-mark {
  display: block; width: 100%; height: 100%; background: var(--cyan);
  -webkit-mask: url("../assets/logo/wordmark-vertical.svg") center / contain no-repeat;
          mask: url("../assets/logo/wordmark-vertical.svg") center / contain no-repeat;
}

.nav { margin-left: auto; position: relative; display: flex; gap: clamp(18px, 2.4vw, 34px); }
.nav a {
  font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; color: rgba(237, 235, 230, .78); padding-block: 12px;
  transition: color .35s var(--ease);
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--paper); }
.nav-rule {
  position: absolute; left: 0; bottom: 4px; width: 100px; height: 1px;
  background: var(--cyan); transform-origin: 0 0; transform: scaleX(0);
  transition: transform .55s var(--ease);
}

/* ---- hero: full-bleed, fading into the page ----------------------------- */

.hero { position: relative; height: 100vh; height: 100dvh; overflow: hidden; background: var(--matte); }
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media video { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-media video.on { opacity: 1; }
/* one shade: a veil at the top for the header, then the film fading into the
   page so there is no edge between the hero and what follows */
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55) 0, rgba(0,0,0,0) 20%),
    linear-gradient(to top, var(--obsidian) 0, rgba(11,11,13,.82) 16%, rgba(11,11,13,0) 46%);
}
.hero-dim { position: absolute; inset: 0; background: var(--obsidian); opacity: 0; pointer-events: none; }

/* the title card sits inside the shade, both halves on one baseline */
.hero-card {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 var(--pad) max(72px, 6vh);   /* clears the fixed Pause button (it sat on the hero's button) */
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.hc-l, .hc-r { display: flex; flex-direction: column; gap: 12px; }
.hc-r { align-items: flex-end; }
.hc-title {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 5.4vw, 88px); letter-spacing: .1em; line-height: 1;
  text-transform: uppercase;
}
.btn {
  border: 0; border-radius: 0; cursor: pointer; padding: 14px 24px;
  background: var(--cyan); color: var(--obsidian);
  font-weight: 600; font-size: 14px; letter-spacing: .02em; white-space: nowrap;
  transition: background-color .3s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--paper); }
.hc-acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
/* a production with its own wordmark (Skylands) shows it instead of set type:
   one SVG per letter, cap height from --cap, sized to fit by fitTitle() */
.hc-word { display: block; width: var(--ww, 690px); max-width: 100%; color: #EEEAE0; }   /* Skylands Beacon */
.hc-word svg { display: block; width: 100%; height: auto; fill: currentColor; }
/* the second door: an outline, so "Watch" stays the one primary action */
.btn-quiet { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px rgba(237, 235, 230, .55); }
.btn-quiet:hover { background: rgba(237, 235, 230, .1); color: var(--paper); }
.btn:active { transform: translateY(1px); }

/* Scrolling out of the hero: the film eases back and dims, the title lifts
   away. Scroll-driven, so it tracks the finger exactly and costs nothing
   while idle. Browsers without scroll timelines simply keep a still hero. */
@supports (animation-timeline: view()) {
  .hero { view-timeline: --hero block; }
  .hero-media { animation: hero-back linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
  .hero-dim   { animation: hero-dim  linear both; animation-timeline: --hero; animation-range: exit 0% exit 85%; }
  .hero-card  { animation: card-lift linear both; animation-timeline: --hero; animation-range: exit 0% exit 40%; }
}
@keyframes hero-back { to { transform: scale(1.08); } }
@keyframes hero-dim  { to { opacity: .72; } }
@keyframes card-lift { to { opacity: 0; transform: translateY(-40px); } }

/* ---- reveal on entry ----------------------------------------------------- */

.rv { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; }

/* ---- sections ------------------------------------------------------------ */

.sec { padding-top: calc(var(--head) + clamp(64px, 12vh, 140px)); padding-bottom: clamp(64px, 12vh, 140px); }
.wrap { max-width: 1400px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 56px); }
.plate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); }

.frame {
  position: relative; display: block; width: 100%;
  aspect-ratio: var(--r, 1.7778);
  border: 0; padding: 0; margin: 0; overflow: hidden;
  background: var(--graphite); cursor: pointer;
}
.frame img, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame img { transition: transform 1.2s var(--ease); }
.frame video { opacity: 0; transition: opacity .5s var(--ease); }
.frame.on video { opacity: 1; }
.frame:hover img { transform: scale(1.025); }
.frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid transparent; transition: border-color .4s var(--ease); }
.frame[data-role="original"]:hover::after, .frame[data-role="original"]:focus-visible::after { border-color: var(--cyan); }
.frame[data-role="client"]:hover::after, .frame[data-role="client"]:focus-visible::after, .frame[data-role="client"].lit::after { border-color: var(--orange); }
.frame:focus-visible { outline: none; }

.jrow { display: flex; gap: clamp(14px, 2vw, 30px); align-items: flex-start; }
.jtile { flex: var(--r) 1 0%; min-width: 0; margin: 0; }
.jtile figcaption { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.jtile .name { font-size: 14px; }

/* ABSOLUTE CINEMA as a title card. One line at every width: the size is held
   to what fits (15 characters at ~1.15em each with the tracking), so it never
   wraps into an unapproved setting. The trailing tracking is cancelled so the
   line centres on its letters, not on its last space. */
.slogan-card {
  margin: 0 auto clamp(56px, 11vh, 120px); text-align: center;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  /* sized from the column it sits in (cqw), never the window: 100vw includes
     the scrollbar and ignores .wrap's max-width, which is how it overflowed.
     Michroma measured 17.1em; Jost (brandbook v3) measures 11.67em - divisor 11.9. */
  font-size: min(92px, calc(100cqw / 11.9));   /* Jost (v3): the line measures 11.67em incl. tracking */
  letter-spacing: .2em; line-height: 1; white-space: nowrap;
  padding-left: .2em;
}
.films .wrap { container-type: inline-size; }
/* with the films row gone, the slogan stands alone: the section ends at it, and
   the slate starts close under it (Mohamed: "awkward space") */
.films { padding-bottom: 0; }
.films .slogan-card { margin-bottom: 0; }
.slate { padding-top: clamp(96px, 16vh, 170px); }
.slogan-card .s-a { color: var(--cyan); }
.slogan-card .s-c { color: var(--orange-lt); }

.extras { display: grid; gap: clamp(14px, 2vw, 30px); margin-bottom: clamp(72px, 13vh, 140px); }
.extras:empty { display: none; }
.from { margin: 0 0 4px; color: var(--ink-2); font-size: 15px; }
.others { display: grid; gap: clamp(28px, 5vh, 56px); }
.others:empty { display: none; }
.h3 { margin: 0; font-weight: 600; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.15; }
.dev { margin: clamp(40px, 7vh, 72px) 0 0; color: var(--ink-2); font-size: 15px; }

/* work */
.work .h2 { margin-bottom: clamp(36px, 6vh, 64px); }
.work-plate { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.prog { list-style: none; margin: 0; padding: 0; }
.prog-group { margin: 30px 0 8px; }
.prog-group:first-child { margin-top: 0; }
.prog-item {
  display: grid; grid-template-columns: 18px minmax(0, 1fr);
  width: 100%; text-align: left; background: none; border: 0; padding: 9px 0; cursor: pointer;
  color: var(--ink-3); transition: color .35s var(--ease);
}
.prog-mark { width: 7px; height: 7px; margin-top: .72em; background: var(--orange); opacity: 0; transform: scale(.3); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.prog-t { font-weight: 600; font-size: clamp(20px, 2vw, 30px); line-height: 1.15; }
.prog-m { grid-column: 2; margin-top: 5px; }
.prog-item:hover { color: var(--ink-2); }
.prog-item[aria-current="true"] { color: var(--paper); }
.prog-item[aria-current="true"] .prog-mark { opacity: 1; transform: none; }
.prog-thumb { display: none; }
.work-stage { position: sticky; top: calc(var(--head) + 28px); }
.work-frame { width: 100%; height: 400px; aspect-ratio: auto; margin-inline: auto; transition: width .65s var(--ease), height .65s var(--ease); }
.work-frame img { opacity: 0; transition: opacity .55s var(--ease), transform 1.2s var(--ease); }
.work-frame img.show { opacity: 1; }
.work-cap { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.work-cap .name { font-size: 14px; }

/* studio: one statement, lit word by word as you read down the page */
.studio .wrap { max-width: 1180px; }
.studio .eyebrow { margin-bottom: clamp(22px, 3.5vh, 36px); }
.statement {
  margin: 0; max-width: 30ch;
  font-weight: 500; font-size: clamp(26px, 3.3vw, 50px); line-height: 1.24; letter-spacing: -.005em;
}
.statement .nm { text-transform: uppercase; letter-spacing: .04em; }
.statement .c { color: var(--cyan); }
/* the software phrase is a control: same words, a quiet dotted underline says it opens */
.sw-toggle { cursor: pointer;
  text-decoration: underline dotted rgba(6, 217, 210, .55); text-decoration-thickness: 2px; text-underline-offset: .18em; transition: text-decoration-color .3s var(--ease); }
.sw-toggle:hover, .sw-toggle[aria-expanded="true"] { text-decoration-color: var(--cyan); }
.sw-toggle:focus-visible { outline: 1px solid var(--cyan); outline-offset: 4px; }
.sw { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .7s var(--ease), opacity .5s var(--ease); }
.sw.open { grid-template-rows: 1fr; opacity: 1; }
.sw-in { min-height: 0; overflow: hidden; margin: 0; padding-top: 0; max-width: 46ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-2);
  transform: translateY(-8px); transition: transform .7s var(--ease), padding .7s var(--ease); }
.sw.open .sw-in { padding-top: clamp(18px, 3vh, 30px); transform: none; }
.sw-go { color: var(--cyan); text-decoration: none; white-space: nowrap; font-weight: 500; }
.sw-go span { display: inline-block; transition: transform .4s var(--ease); }
.sw-go:hover span, .sw-go:focus-visible span { transform: translateX(5px); }
.statement .o { color: var(--paper); font-weight: 600; }   /* v3: orange is information only - emphasis by weight */
@supports (animation-timeline: view()) {
  .statement { view-timeline: --stmt block; }
  .statement .w {
    animation: word-lit linear both; animation-timeline: --stmt;
    animation-range: cover var(--a, 20%) cover var(--b, 26%);
  }
}
@keyframes word-lit { from { opacity: .16; } to { opacity: 1; } }

/* end card */
/* the close fits one screen: scrolled to the very end, the mark is still in frame (sized by the
   small viewport height, so a phone's address bar can't push it out) */
.end { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; align-content: center; gap: clamp(18px, 3.6svh, 56px);
  padding-top: calc(var(--head) + 2svh); padding-bottom: 3svh; }
.lockup { display: grid; justify-items: center; }
.wordmark {
  height: clamp(110px, 24svh, 280px); aspect-ratio: 702 / 1735; background: var(--cyan);
  -webkit-mask: url("../assets/logo/wordmark-vertical.svg") center / contain no-repeat;
          mask: url("../assets/logo/wordmark-vertical.svg") center / contain no-repeat;
}
.slogan { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; white-space: nowrap; line-height: 1; }
.slogan .s-a { color: var(--cyan); }
.slogan .s-c { color: var(--orange-lt); }
/* every item gets the link's tap padding, so all three share one box height
   and one baseline - padding on the link alone dropped its text 8px lower */
.end-line { display: flex; justify-content: center; align-items: center; gap: clamp(18px, 4vw, 52px); flex-wrap: wrap; }
.end-line a, .end-line span { display: inline-block; padding-block: 8px; line-height: 1.4; font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.end-line a { transition: color .3s var(--ease); }
/* the tracking trails the last letter; cancel it so each line centres on its letters */
.end-line a, .end-line span { margin-right: -.22em; }
.end-line a:hover { color: var(--cyan); }

/* ident */
.ident { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--obsidian); }
.ident-lockup { display: grid; justify-items: center; }
.ident-word { position: relative; height: min(38vh, 340px); aspect-ratio: 702 / 1735; }
.ident-word i {
  position: absolute; inset: 0; background: var(--cyan); opacity: 0;
  -webkit-mask: url("../assets/logo/wordmark-vertical.svg") center / contain no-repeat;
          mask: url("../assets/logo/wordmark-vertical.svg") center / contain no-repeat;
}
.ident-word .l { clip-path: inset(0 50% 0 0); transform: translateX(25%);  animation: open 1.2s var(--ease) .2s forwards; }
.ident-word .r { clip-path: inset(0 0 0 50%); transform: translateX(-25%); animation: open 1.2s var(--ease) .2s forwards; }
.ident-slogan { opacity: 0; animation: fade-in 1s var(--ease) 1.4s forwards; }
.ident.leaving { pointer-events: none; }
.pad-text { cursor: text; } .pad-go { cursor: pointer; }
@keyframes open    { to { opacity: 1; transform: none; } }
@keyframes fade-in { to { opacity: 1; } }

/* ---- the screening ------------------------------------------------------- */

.screening {
  position: fixed; inset: 0; z-index: 90; background: var(--matte);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
}
.sc-top, .sc-bot { display: flex; align-items: center; gap: 20px; padding: 16px var(--pad); }
.sc-top { justify-content: space-between; }
.sc-close {
  display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; cursor: pointer; padding: 10px 0;
  font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); transition: color .3s var(--ease);
}
.sc-close i { position: relative; width: 14px; height: 14px; transition: transform .45s var(--ease); }
.sc-close i::before, .sc-close i::after { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1px; background: currentColor; }
.sc-close i::before { transform: rotate(45deg); }
.sc-close i::after  { transform: rotate(-45deg); }
.sc-close:hover { color: var(--paper); }
.sc-close:hover i { transform: rotate(90deg); }

.sc-stage { min-height: 0; min-width: 0; display: grid; place-items: center; padding-inline: clamp(12px, 3vw, 40px); }
.sc-frame { width: var(--fw, 60vw); max-width: 100%; }
.sc-pic { position: relative; width: 100%; height: var(--fh, 34vw); background: var(--matte); cursor: pointer; }
.sc-pic video, .sc-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sc-pic img { opacity: 0; transition: opacity .4s var(--ease); }
.sc-pic img.show { opacity: 1; }
/* paused: the picture dims so the bare play mark reads on any frame */
.sc-pic::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(0, 0, 0, .46); opacity: 1; transition: opacity .45s var(--ease);
}
.screening[data-playing="true"] .sc-pic::after,
.screening[data-kind="still"] .sc-pic::after { opacity: 0; }
.sc-big {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 84px; height: 84px; margin: -42px 0 0 -42px;
  display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; background: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.sc-big svg { width: 46px; height: auto; fill: var(--cyan); margin-left: 6px; }
.sc-big:hover { transform: scale(1.06); }
.screening[data-playing="true"] .sc-big { opacity: 0; transform: scale(.9); pointer-events: none; }

.sc-transport { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.sc-toggle { flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--graphite); background: none; cursor: pointer; transition: border-color .3s var(--ease); }
.sc-toggle:hover { border-color: var(--cyan); }
.sc-toggle .i-play { width: 13px; height: auto; fill: var(--cyan); margin-left: 2px; }
.sc-toggle .i-pause { display: none; gap: 4px; }
.sc-toggle .i-pause i { display: block; width: 3px; height: 13px; background: var(--cyan); }
.screening[data-playing="true"] .sc-toggle .i-play  { display: none; }
.screening[data-playing="true"] .sc-toggle .i-pause { display: flex; }
.sc-time { flex: none; min-width: 42px; font-weight: 500; font-size: 12px; letter-spacing: .08em; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: center; }
.sc-track { position: relative; flex: 1 1 auto; height: 24px; cursor: pointer; touch-action: none; }
.sc-track:focus-visible { outline: none; }
.sc-rail { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--graphite); transition: height .2s var(--ease), margin .2s var(--ease); }
.sc-buf, .sc-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; transform: scaleX(0); }
.sc-buf  { background: var(--ink-3); }
.sc-fill { background: var(--cyan); }
.sc-track:hover .sc-rail, .sc-track.drag .sc-rail, .sc-track:focus-visible .sc-rail { height: 3px; margin-top: -1px; }
.sc-knob { position: absolute; top: 50%; left: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: var(--cyan); transition: transform .2s var(--ease); }
.sc-track .sc-knob { transform: translateX(var(--kx, 0px)) scale(0); }
.sc-track:hover .sc-knob, .sc-track.drag .sc-knob, .sc-track:focus-visible .sc-knob { transform: translateX(var(--kx, 0px)) scale(1); }
.sc-tip { position: absolute; bottom: 22px; left: 0; padding: 4px 7px; background: var(--graphite); font-weight: 500; font-size: 11px; letter-spacing: .08em; color: var(--paper); font-variant-numeric: tabular-nums; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); white-space: nowrap; }
.sc-track:hover .sc-tip, .sc-track.drag .sc-tip { opacity: 1; }
.sc-word { flex: none; background: none; border: 1px solid var(--graphite); cursor: pointer; padding: 9px 12px; font-weight: 500; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); transition: color .3s var(--ease), border-color .3s var(--ease); }
.sc-word:hover { color: var(--paper); border-color: var(--ink-3); }
.sc-bot { justify-content: space-between; flex-wrap: wrap; }
.sc-cap { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.sc-cap .name { font-size: 16px; }
.sc-cuts { position: relative; display: flex; gap: 8px; align-items: flex-end; padding-bottom: 8px; }
.sc-cut { display: block; height: 52px; padding: 0; border: 0; background: var(--graphite); cursor: pointer; opacity: .5; transition: opacity .3s var(--ease); }
.sc-cut img { height: 100%; width: auto; }
.sc-cut:hover, .sc-cut[aria-current="true"] { opacity: 1; }
.sc-cut-rule { position: absolute; left: 0; bottom: 0; width: 100px; height: 1px; background: var(--cyan); transform-origin: 0 0; transform: scaleX(0); transition: transform .45s var(--ease); }
.screening[data-role="client"] .sc-cut-rule { background: var(--orange); }
.sc-frame:fullscreen { width: 100vw; height: 100vh; background: var(--matte); display: flex; flex-direction: column; justify-content: center; padding: 24px 32px; }
.sc-frame:fullscreen .sc-pic { height: calc(100vh - 110px); }

a.btn { display: inline-block; text-decoration: none; }

/* ---- contact page -------------------------------------------------------- */

.contact { min-height: 100vh; min-height: 100dvh; padding-top: calc(var(--head) + clamp(56px, 11vh, 130px)); padding-bottom: clamp(64px, 12vh, 140px); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.contact-intro .ol { margin-bottom: 22px; }
.contact-intro .h2 { font-size: clamp(30px, 3.8vw, 58px); }
.contact-lede { margin: 26px 0 0; max-width: 38ch; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.channels { margin: clamp(36px, 6vh, 64px) 0 0; display: grid; gap: 20px; }
.channels div { display: grid; gap: 6px; }
.channels dd { margin: 0; font-size: 18px; }
.channels a { text-decoration: none; background: linear-gradient(var(--cyan), var(--cyan)) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .5s var(--ease), color .3s var(--ease); }
.channels a:hover { color: var(--cyan); background-size: 100% 1px; }

/* fields: a hairline, the label above it, the error below it (skill 4.6) */
.cform { display: grid; gap: 26px; }
.field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field label, .field legend {
  padding: 0; font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2);
}
.field .opt { text-transform: none; letter-spacing: .02em; color: var(--ink-2); margin-left: 6px; }
.field input, .field textarea {
  width: 100%; margin: 0; padding: 10px 0 12px;
  /* ink-3 underline: 3.8:1 on obsidian, above the 3:1 WCAG floor for a
     field's boundary (graphite measured 1.5:1 and failed) */
  background: transparent; border: 0; border-bottom: 1px solid var(--ink-3); border-radius: 0;
  color: var(--paper); font: inherit; font-size: 18px; line-height: 1.5;
  transition: border-color .35s var(--ease);
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:hover, .field textarea:hover { border-bottom-color: var(--ink-2); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--cyan); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom-color: var(--orange-lt); }
.err { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--orange-lt); }
.err:empty { min-height: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-block; padding: 10px 16px; border: 1px solid var(--ink-3);
  font-size: 14px; color: var(--ink-2);
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.chip:hover span { color: var(--paper); border-color: var(--ink-2); }
.chip input:checked + span { color: var(--obsidian); background: var(--cyan); border-color: var(--cyan); }
.chip input:focus-visible + span { outline: 1px solid var(--cyan); outline-offset: 3px; }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.btn[disabled] { opacity: .6; cursor: progress; }
.form-note { margin: 0; font-size: 14px; color: var(--ink-2); max-width: 44ch; }
.form-note.bad { color: var(--orange-lt); }
.form-note a { color: var(--paper); }

.sent { display: grid; gap: 18px; padding-top: 8px; }
.sent:focus { outline: none; }
.sent-line { margin: 0; font-weight: 500; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.25; }
.sent-line span { color: var(--cyan); }
.sent-back { justify-self: start; font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; padding-block: 8px; transition: color .3s var(--ease); }
.sent-back:hover { color: var(--paper); }

/* ---- tablet and phone ---------------------------------------------------- */

@media (max-width: 1023px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  /* One pattern for every size. On a laptop you HOVER a title and the window
     beside the list plays it. Here the window sticks to the top, the list
     scrolls beneath it, and the title passing just under the window plays
     in it - the same idea, driven by scrolling instead of pointing. A tap
     opens the piece. The window fades the list out as it slides under. */
  .work-plate { grid-template-columns: minmax(0, 1fr); }
  .work-stage {
    order: -1; position: sticky; top: var(--head); z-index: 2;
    padding: 12px 0 30px;
    background: linear-gradient(to bottom, var(--obsidian) 80%, rgba(11, 11, 13, 0));
  }
  /* the stage keeps the height of the TALLEST frame, so the list below never
     jumps as the window reshapes; the frame morphs inside it */
  .work-frame { max-width: 100%; }
  .work-stage { min-height: calc(min(34vh, 380px) + 12px + 64px); }
  .prog-item { padding: 11px 0; }
  .prog { padding-bottom: 40vh; }          /* room for the last title to reach the window */
}

@media (max-width: 767px) {
  .plate { grid-template-columns: minmax(0, 1fr); }
  .jrow { flex-direction: column; }
  .jtile { flex: none; width: min(100%, calc(70vh * var(--r))); }
  .nav { gap: 16px; }
  /* 11px floor: 10px caps measured as the smallest text on the phone */
  .nav a { font-size: 11px; letter-spacing: .13em; }

  /* Phone: the feature IS the first screen. It fills the phone top to bottom
     (svh, so the address bar showing/hiding never makes it jump), the title
     card sits in the dark zone at the bottom, and the page starts below.
     This is the one place a frame is filled rather than shown whole - the
     trailer; "Watch" opens the film at its true ratio, nothing cropped there.
     Clipped: the scroll-driven exit scales the film to 1.08. */
  .hero { height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: var(--matte); }
  .hero-media img, .hero-media video { object-position: 50% 50%; }
  .hero-shade {
    background:
      linear-gradient(to bottom, rgba(0,0,0,.5) 0, rgba(0,0,0,0) 18%),
      linear-gradient(to top, var(--obsidian) 0, rgba(11,11,13,.88) 22%, rgba(11,11,13,0) 58%);
  }
  .hero-card {
    flex-direction: column; align-items: flex-start; gap: 22px;
    padding: 0 var(--pad) max(72px, calc(env(safe-area-inset-bottom) + 64px));   /* clears the fixed Pause button */
  }
  /* status on its own line, the two doors side by side at equal width - a
     right-stacked pair beside a wrapped status read as unbalanced */
  .hc-r { flex-direction: column; align-items: stretch; width: 100%; gap: 14px; }
  .hc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hc-acts .btn { text-align: center; padding-inline: 10px; }
  .hc-acts .btn[hidden] + .btn, .hc-acts .btn:only-child { grid-column: 1 / -1; }
  .hc-title { font-size: clamp(30px, 9.5vw, 52px); white-space: nowrap; }

  /* spacing sized for a phone: desktop's 12vh gaps read as dead air here */
  .sec { padding-top: calc(var(--head) + 36px); padding-bottom: 48px; }
  .slogan-card { margin-bottom: 36px; }
  .extras { margin-bottom: 56px; }
  .h2 { margin-bottom: 28px; }
  .end { min-height: 100svh; padding-block: calc(var(--head) + 12px) 20px; gap: 3.2svh; }
  /* three items wrapped 2 + 1 and read as broken; on a phone they stack */
  .end-line { flex-direction: column; gap: 2px; }

  .statement { font-size: clamp(24px, 7vw, 32px); }
  .sc-transport { gap: 10px; flex-wrap: wrap; }
  .sc-track { order: -1; flex-basis: 100%; }
  .sc-bot { flex-direction: column; align-items: flex-start; }
}

/* ---- reduced motion: everything still, everything visible --------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
  }
  .rv { opacity: 1; transform: none; }
  .atmos i { animation: none; opacity: .55; }
  .statement .w { animation: none; opacity: 1; }
  .hero-media, .hero-dim, .hero-card { animation: none; }
}

/* ---- past work: the mosaic (2026-10-04) -------------------------------------- */
/* Client work as the GROUND of a full-screen section, not a strip of thumbnails
   (Mohamed: "bigger, filling the screen ... muted, almost part of the
   background"). Lanes fill the section's height, every tile at its true ratio
   (aspect-ratio + cover on an exact box = no crop), drifting at constant px/s
   (--dur from screen.js). Faded, half-desaturated and vignetted on all four
   sides so it reads as texture; the line sits on it. */
.reel { position: relative; padding: 0; min-height: 100vh; min-height: 100svh;
  display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.reel-lanes { position: absolute; inset: 0; z-index: -1; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 8px;
  opacity: .48; filter: saturate(.7);
  /* soft on every side: no hard edge where the tilted lanes meet the section */
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 40%, transparent 100%), linear-gradient(to bottom, transparent 8%, #000 26%, #000 80%, transparent 94%);
  -webkit-mask-composite: source-in;
          mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 40%, transparent 100%), linear-gradient(to bottom, transparent 8%, #000 26%, #000 80%, transparent 94%);
          mask-composite: intersect; }
.reel-lane { display: flex; gap: 8px; height: 100%; width: max-content; animation: reel var(--dur, 120s) linear infinite; }
.reel-lane.rev { animation-direction: reverse; }
.reel-lanes.paused .reel-lane { animation-play-state: paused; }
@keyframes reel { to { transform: translate3d(-50%, 0, 0); } }
.reel-tile { position: relative; margin: 0; height: 100%; aspect-ratio: var(--r); overflow: hidden; background: #000; }
.reel-tile img, .reel-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-tile video { opacity: 0; transition: opacity .8s var(--ease); }
.reel-tile video.on { opacity: 1; }
/* the line reads on the texture: a quiet shade under it, nothing more */
.reel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(11, 11, 13, 0) 0, rgba(11, 11, 13, 0) 18%, rgba(11, 11, 13, 0) 55%, rgba(11, 11, 13, .85) 88%, var(--obsidian) 100%); }
.reel-foot { position: relative; width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 12px 24px; padding-bottom: clamp(48px, 9vh, 96px); }
.reel-line { margin: 0; max-width: 34ch; color: var(--paper); font-weight: 400; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.3; }
.reel-pause { background: none; border: 0; padding: 8px 0; cursor: pointer; font: inherit;
  font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.reel-pause:hover { color: var(--paper); }
.reel-pause:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
@media (max-width: 767px) { .reel { min-height: 82svh; } .reel-lanes, .reel-lane { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .reel-lane { animation: none; } }

/* ---- what's cooking: the life of a film, on the page itself ------------------- */
/* No panels anywhere. Artifacts sit on the obsidian and feather into it (masks,
   not borders). Each stage: a big Jost name, the fact in DM Mono, one human line,
   then its artifact. Motion is transform/opacity/stroke only, once per arrival. */
.slate .wrap { display: grid; gap: clamp(40px, 7vh, 72px); }
.slate-head { display: grid; gap: 14px; }
.slate-sub { margin: 0; max-width: 46ch; color: var(--ink-2); font-size: 17px; line-height: 1.5; }
.slate-track { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(96px, 16vh, 180px); }
.station { display: grid; gap: clamp(26px, 4vh, 44px); }
/* one big title per section ("What's cooking"); a stage is a smaller heading under its label */
.st-head { display: grid; gap: 8px; max-width: 60ch; }
.st-name { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.05; color: var(--paper); }
.bleed { width: var(--cw, 100%); margin-left: calc(50% - var(--cw, 100%) / 2); }

/* -- just an idea: sticky notes in Diviner orange, plus one blank pad -- */
/* Square, cleanly cut, the adhesive band a shade darker at the top, the bottom
   corner lifting off the page (curl shading + a deeper shadow under it). Text on
   orange is obsidian, always (brandbook). The pad is the same note, blank, with
   the next sheets peeking out underneath. */
.notes { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(26px, 3.4vw, 54px) clamp(18px, 2.4vw, 36px); padding: 26px 0 10px; }
.note { position: relative; width: clamp(200px, 17.5%, 250px); transform: translateY(calc(var(--y) + 30px)) rotate(var(--r)); opacity: 0;
  filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .5)) drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
  transition: transform .9s var(--ease), opacity .9s var(--ease), filter .5s var(--ease); transition-delay: calc(var(--i) * 110ms); }
.go .note { transform: translate(var(--dx, 0px), calc(var(--dy, 0px) + var(--y))) rotate(var(--r)); opacity: 1; }
.go .note { cursor: grab; touch-action: pan-x pan-y; user-select: none; }   /* both: on phones the notes are a row you swipe sideways (pan-y alone froze it on Android); dragging is mouse-only */
/* held: it comes off the board, straightens a little, follows the hand with no lag */
.go .note.held { cursor: grabbing; transition: filter .3s var(--ease); transform: translate(var(--dx, 0px), calc(var(--dy, 0px) + var(--y) - 10px)) rotate(calc(var(--r) * .3)) scale(1.05);
  filter: drop-shadow(0 34px 30px rgba(0, 0, 0, .6)) drop-shadow(0 4px 4px rgba(0, 0, 0, .35)); }
.go .note:hover, .go .note:focus-within { transform: translate(var(--dx, 0px), calc(var(--dy, 0px) + var(--y) - 8px)) rotate(0deg) scale(1.02); filter: drop-shadow(0 28px 24px rgba(0, 0, 0, .55)) drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); transition-delay: 0s; }
.paper { position: relative; display: grid; align-content: start; gap: 9px; aspect-ratio: 1; padding: 26px 20px 22px; color: #0B0B0D;   /* square at least, taller if the line needs it */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .09), rgba(0, 0, 0, 0) 16%),                              /* the adhesive band */
    radial-gradient(90% 70% at 100% 100%, rgba(0, 0, 0, .2), transparent 60%),                       /* the corner lifting */
    linear-gradient(160deg, #F56E22, #F2600F 45%, #E5580C);
  border-bottom-right-radius: 4px 22px; }
.paper::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .15 0 0 0 0 .05 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }
.nt-meta { margin: 0; position: relative; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #0B0B0D; opacity: .8; }
.nt-t { margin: 0; position: relative; font-family: var(--display); font-weight: 400; font-size: clamp(20px, 1.7vw, 25px); line-height: 1.04;
  text-transform: uppercase; letter-spacing: .05em; color: #0B0B0D; overflow-wrap: anywhere; }
.scribble { position: relative; display: block; height: 12px; width: auto; max-width: 70%; margin-top: -4px; overflow: visible; }
.scribble path { fill: none; stroke: rgba(11, 11, 13, .72); stroke-width: 1.7; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.5, 0, .2, 1); transition-delay: calc(var(--i) * 110ms + 700ms); }
.go .scribble path { stroke-dashoffset: 0; }
.nt-line { margin: 2px 0 0; position: relative; font-size: 14px; line-height: 1.45; color: #0B0B0D; }
/* the pad: sheets underneath, a textarea that is the note itself */
.pad { margin: 0; }
.pad::before, .pad::after { content: ""; position: absolute; inset: 0; background: #C94F0B; border-bottom-right-radius: 4px 22px; z-index: -1; }
.pad::before { transform: translate(5px, 5px) rotate(1.5deg); } .pad::after { transform: translate(9px, 10px) rotate(-1deg); background: #A9430A; }
.pad .paper { gap: 6px; }
.pad-text { position: relative; width: 100%; flex: 1; min-height: 0; resize: none; padding: 4px 0; border: 0; background:
  repeating-linear-gradient(transparent 0 25px, rgba(11, 11, 13, .16) 25px 26px); font-family: var(--face); font-size: 16px; line-height: 26px; color: #0B0B0D; caret-color: #0B0B0D; }
.pad-text::placeholder { color: rgba(11, 11, 13, .55); }
.pad-text:focus { outline: none; }
.pad .paper { grid-template-rows: auto 1fr auto; }
.pad-go { position: relative; justify-self: start; padding: 6px 0; background: none; border: 0; cursor: pointer; font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: #0B0B0D; }
.pad-go span { display: inline-block; transition: transform .4s var(--ease); }
.pad-go:hover span, .pad-go:focus-visible span { transform: translateX(5px); }
.pad-go:focus-visible { outline: 1px solid #0B0B0D; outline-offset: 3px; }

/* -- in development: a screenplay page, being written -- */
/* Real proportions: an 8.5in page, Courier-style 10 characters per inch (DM
   Mono stands in), margins 1.5in left (the brads) and 1in right; dialogue at
   2.5in, parentheticals 3.1in, character cues 3.7in, transitions flush right.
   Sizes are in container units of the page, so it scales as one sheet. */
.drafts { display: grid; gap: clamp(56px, 9vh, 96px); }
.draft { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.dr-info { display: grid; gap: 10px; align-content: center; }
.dr-t { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3.4vw, 52px); line-height: 1; text-transform: uppercase; letter-spacing: .06em; color: var(--paper); }
.dr-sub { margin: 0; color: var(--paper); font-size: 18px; line-height: 1.45; max-width: 30ch; }
.dr-meta { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.sp-page { position: relative; container-type: inline-size; aspect-ratio: 8.5 / 8.2; max-width: 640px; width: 100%; justify-self: end; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .45), transparent 60%),
    linear-gradient(#F3F1EC, #E7E4DC);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), 0 2px 4px rgba(0, 0, 0, .35);
  transform: rotate(-.6deg); }
.sp-page::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .38 0 0 0 0 .34 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }
/* three holes at the binding edge, brass brads in the top and bottom ones */
.sp-hole, .sp-brad { position: absolute; left: 4.7cqw; width: 2.6cqw; aspect-ratio: 1; border-radius: 50%; }
.sp-hole { top: 50%; margin-top: -1.3cqw; background: #0B0B0D; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .08); }
.sp-brad { background: radial-gradient(circle at 35% 30%, #F5D58A, #B48A32 55%, #6E5016); box-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.sp-brad.b1 { top: 15%; } .sp-brad.b2 { bottom: 15%; }
.sp-num { position: absolute; top: 5.9cqw; right: 11.8cqw; font-family: var(--mono); font-size: 2.2cqw; color: #1A1916; }
/* the writing: newest at the bottom, the page scrolling up as it fills */
.sp-body { position: absolute; left: 17.6cqw; right: 2cqw; padding-right: 9.8cqw; top: 11cqw; bottom: 9cqw; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  font-family: var(--mono); font-size: 2.2cqw; line-height: 1.32; color: #1A1916;
  -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); }
.sp-body p { position: relative; margin: 0; }
.sp-scene { margin-top: 1.32em !important; font-weight: 400; text-transform: uppercase; }
.sp-action { margin-top: 1.32em !important; }
.sp-char { margin: 1.32em 0 0 30.1cqw !important; text-transform: uppercase; }        /* 3.7in */
.sp-paren { margin-left: 17.4cqw !important; }                                          /* 3.1in */
.sp-dlg { margin-left: 10.3cqw !important; max-width: 41.2cqw; }
/* a struck line spans to the margin so its pencil note can sit out there; the text keeps its 3.5in */
.sp-dlg.struck { max-width: none; padding-right: calc(100% - 51.5cqw); }                        /* 2.5in, 3.5in wide */
.sp-trans { margin-top: 1.32em !important; text-align: right; text-transform: uppercase; }
.sp-body .struck .sp-txt { background: linear-gradient(#1A1916, #1A1916) 0 55% / 100% 1.5px no-repeat; color: rgba(26, 25, 22, .5); }
/* the pencil note in the right margin */
/* in the right margin, inside the sheet */
.sp-note { position: absolute; right: -9.4cqw; top: -.1em; width: 15cqw; white-space: normal; line-height: 1.15; font-family: var(--face); font-size: 2.3cqw; color: #5F5B55;
  opacity: 0; transform: translateY(4px) rotate(var(--t, -2deg)); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.sp-note.in { opacity: 1; transform: rotate(var(--t, -2deg)); }
.sp-note::before { content: "\2190 "; }
.caret { display: inline-block; width: 2px; height: .95em; margin-left: 1px; vertical-align: -0.12em; background: #1A1916; animation: caret 1.05s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.station:not(.live) .caret { animation-play-state: paused; }
.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; }
@media (max-width: 899px) {
  .draft { grid-template-columns: minmax(0, 1fr); }
  .sp-page { justify-self: stretch; max-width: none; aspect-ratio: 8.5 / 9.5; }
}
/* a phone-sized sheet: bigger type, the same layout in proportion, so the jokes stay readable */
@media (max-width: 560px) {
  .sp-page { aspect-ratio: 8.5 / 11; }
  .sp-body { left: 11cqw; padding-right: 7cqw; font-size: 3.3cqw; }
  .sp-char { margin-left: 22cqw !important; } .sp-paren { margin-left: 13cqw !important; }
  .sp-dlg { margin-left: 7cqw !important; max-width: 56cqw; } .sp-dlg.struck { padding-right: calc(100% - 63cqw); }
  .sp-note { right: -6.6cqw; width: 18cqw; font-size: 2.9cqw; }
  .sp-hole, .sp-brad { left: 3cqw; width: 3.4cqw; } .sp-num { font-size: 3.3cqw; right: 7cqw; }
}

/* -- rolling: the take, exactly inside its viewfinder -- */
/* The picture IS the frame: the corner marks sit just outside its edges, so
   nothing of the video spills past the lines. A soft glow of the take bleeds
   into the page around it instead of a hard edge. */
.takes { display: grid; gap: clamp(48px, 8vh, 90px); }
.take { position: relative; display: grid; gap: 22px; color: inherit; text-decoration: none; }
.tk-rig { position: relative; margin: 0 clamp(14px, 2vw, 30px); }
.tk-pic { position: relative; aspect-ratio: 2.39; width: 100%; overflow: hidden; background: #000;
  box-shadow: 0 30px 90px -30px rgba(6, 217, 210, .18), 0 0 120px -20px rgba(0, 0, 0, .8); }
.tk-pic img, .tk-pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 2.4s var(--ease); }
.tk-pic video { opacity: 0; transition: opacity 1s var(--ease), transform 2.4s var(--ease); }
.tk-pic video.on { opacity: 1; }
a.take:hover .tk-pic img, a.take:hover .tk-pic video { transform: scale(1.025); }
.tk-pic::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .45)); }
.tk-ui { position: absolute; inset: -12px; pointer-events: none; }
.tk-ui .c { position: absolute; width: clamp(18px, 2vw, 30px); height: clamp(18px, 2vw, 30px); border: 0 solid rgba(237, 235, 230, .85); }
.tk-ui .tl { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; } .tk-ui .tr { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; }
.tk-ui .bl { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; } .tk-ui .br { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; }
.tk-ui .rec, .tk-ui .tc, .tk-ui .tk-take { position: absolute; top: 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--paper); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.tk-ui .rec { left: 34px; display: flex; align-items: center; gap: 8px; }
.tk-ui .rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: rec 1.6s steps(1) infinite; }
.tk-ui .tk-take { left: 50%; transform: translateX(-50%); text-transform: uppercase; letter-spacing: .12em; }
.tk-ui .tk-take b { font-weight: 400; color: var(--cyan); }
.station:not(.live) .tk-ui .rec::before { animation-play-state: paused; }
@keyframes rec { 50% { opacity: .15; } }
.tk-ui .tc { right: 34px; font-variant-numeric: tabular-nums; }
.tk-cap { position: relative; display: grid; gap: 8px; padding-inline: clamp(14px, 2vw, 30px); }
.tk-t { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(36px, 5vw, 80px); line-height: .95; text-transform: uppercase; letter-spacing: .06em; color: var(--paper); }
@media (min-width: 960px) { .tk-t { font-weight: 300; } }
.tk-meta { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.tk-line { margin: 0; max-width: 52ch; color: var(--ink-2); font-size: 17px; line-height: 1.5; }
.tk-go { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
a.take:focus-visible { outline: none; } a.take:focus-visible .tk-t { text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 8px; }

/* -- in post-production: the edit, as the software shows it -- */
.edit { display: grid; gap: 0; }
.ed-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(237, 235, 230, .12); }
.ed-tabs { display: flex; flex-wrap: wrap; gap: 2px; }
.ed-tab { display: grid; gap: 3px; padding: 12px 18px 11px; background: rgba(237, 235, 230, .04); border-top: 2px solid transparent;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.ed-tab b { font-weight: 400; color: inherit; font-size: 13px; letter-spacing: .12em; }
.ed-tab span { font-size: 10px; opacity: .8; }
.ed-tab.on { background: rgba(237, 235, 230, .09); border-top-color: var(--cyan); color: var(--paper); }
.ed-tc { padding-bottom: 12px; font-family: var(--mono); font-size: 14px; letter-spacing: .06em; color: var(--cyan); font-variant-numeric: tabular-nums; }
.ed-tl { cursor: ew-resize; touch-action: pan-y; user-select: none; padding-top: 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ed-in { --p: 0; position: relative; max-width: 1640px; margin: 0 auto; padding: 0 clamp(36px, 7vw, 120px); }
.ed-ruler { position: relative; height: 28px; margin-left: 40px; border-bottom: 1px solid rgba(237, 235, 230, .14); }
.ed-ruler span { position: absolute; bottom: 0; width: 1px; height: 10px; background: rgba(154, 150, 142, .6);
  font-family: var(--mono); font-size: 10px; color: var(--ink-2); text-indent: 6px; line-height: 0; white-space: nowrap; }
.ed-ruler span.minor { height: 5px; }
.ed-row { position: relative; display: flex; align-items: center; height: 40px; border-bottom: 1px solid rgba(237, 235, 230, .06); }
.ed-row.aud { height: 30px; }
.ed-lab { width: 40px; flex: none; font-family: var(--mono); font-size: 10px; color: var(--ink-2); }
.ed-lane { position: relative; flex: 1; height: 100%; }
.cl { position: absolute; top: 7px; bottom: 7px; background: rgba(237, 235, 230, .1); transition: background .35s var(--ease); }
.ed-row:not(.aud) .cl { background: rgba(6, 217, 210, .14); }
.ed-name { position: absolute; top: 50%; transform: translateY(-50%); padding-left: 8px; font-family: var(--mono); font-weight: 400; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--paper); white-space: nowrap; pointer-events: none; }
.cl.wave { display: flex; align-items: center; gap: 1.5px; top: 4px; bottom: 4px; background: none; }
.cl.wave i { flex: 1; height: var(--h); background: rgba(154, 150, 142, .38); transition: background .35s var(--ease); }
.cl.lit { background: rgba(237, 235, 230, .22); }
.ed-row:not(.aud) .cl.lit { background: rgba(6, 217, 210, .42); }
.cl.wave.lit { background: none; } .cl.wave.lit i { background: rgba(6, 217, 210, .8); }
.ed-head { position: absolute; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; background: var(--cyan); pointer-events: none;
  left: calc(clamp(36px, 7vw, 120px) + 40px + (100% - 2 * clamp(36px, 7vw, 120px) - 40px) * var(--p)); box-shadow: 0 0 12px rgba(6, 217, 210, .5); }
.ed-export { margin-top: 18px; }
/* the export that is always at 99% */
.ed-export { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-2); }
.ex-k { text-transform: uppercase; letter-spacing: .12em; }
.ex-bar { position: relative; width: min(220px, 40vw); height: 2px; background: rgba(237, 235, 230, .12); overflow: hidden; }
.ex-bar i { position: absolute; inset: 0; background: var(--cyan); transform-origin: left; transform: scaleX(0); transition: transform .25s linear; }
.ex-n { color: var(--paper); font-variant-numeric: tabular-nums; min-width: 3ch; }
.ex-joke { opacity: 0; transition: opacity .8s var(--ease); font-style: normal; }
.ed-export.stuck .ex-joke { opacity: 1; }
.ed-head::before { content: ""; position: absolute; top: 0; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; background: var(--cyan);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }

@media (max-width: 640px) {
  /* notes become a row you swipe, one note at a time - not a 1,100px stack */
  .notes { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * clamp(16px, 4vw, 56px)); padding: 30px clamp(16px, 4vw, 56px) 34px; gap: 22px; }
  .notes::-webkit-scrollbar { display: none; }
  .note { flex: 0 0 72%; width: auto; scroll-snap-align: center; }
  .tk-ui { inset: -8px; }
  .tk-ui .rec, .tk-ui .tc, .tk-ui .tk-take { top: 16px; font-size: 10px; }
  .tk-ui .rec { left: 20px; } .tk-ui .tc { right: 20px; }
  .ed-ruler span:not(.minor):nth-of-type(n+2):not(:last-child) { color: transparent; }
  .ed-in { padding: 0 22px; }
  .ed-head { left: calc(22px + 40px + (100% - 44px - 40px) * var(--p)); }
}
@media (prefers-reduced-motion: reduce) {
  .note, .scribble path, .dr-line .w { transition: none; }
  .note { transform: translateY(var(--y)) rotate(var(--r)); opacity: 1; }
  .scribble path { stroke-dashoffset: 0; }
  .dr-line .w { opacity: 1; filter: none; }
  .caret, .tk-ui .rec::before { animation: none; }
}

/* brandbook v3 p.23: emails and URLs are always lowercase, even in a capitals line */
.end-line a[href^="mailto:"], .end-line .url { text-transform: none; letter-spacing: .08em; margin-right: -.08em; }

/* ---- brandbook v3 type roles (p.20-23) -------------------------------------- */
/* DM Mono: navigation, overlines, tags, metadata, timecodes, data. Caps tracked
   +12% (the book allows +8 to +14%); the old .22em was Chakra Petch's setting. */
.ol, .nav a, .status, .end-line a, .end-line span, .sc-close, .sc-word, .sc-time, .sc-tip,
.field label, .field legend, .sent-back, .reel-pause, .stage-name, .stage-n,
.proj-wt, .proj-meta, .proj-go, .sk-kicker, .sk-pause {
  font-family: var(--mono); font-weight: 400; letter-spacing: .12em;
}
.ol { font-size: 12px; }
.end-line a, .end-line span { margin-right: -.12em; }
.end-line a[href^="mailto:"], .end-line .url { letter-spacing: .04em; margin-right: -.04em; }
.sc-time, .sc-tip { letter-spacing: .04em; }
/* Jost: titles, headlines, the slogan, names. Light 300 only at 48px and up. */
.h2 { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
@media (min-width: 1334px) { .h2 { font-weight: 300; } }          /* clamp reaches 48px at 1333px */
@media (min-width: 889px)  { .hc-title { font-weight: 300; } }    /* 5.4vw = 48px at 889px */
@media (min-width: 900px)  { .slogan-card { font-weight: 300; } }
/* the one remaining grey that failed small-text contrast (3.84:1): its text uses moved to Ash */

/* ---- the end card: the credits leave a line for you ------------------------------ */
.credits { display: grid; justify-items: center; gap: 12px; width: min(560px, 92%); margin-top: 8px; text-align: center; }
.cr-k { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.cr-k + .cr-k { margin-top: 18px; }
.cr-name { width: 100%; padding: 6px 0 10px; border: 0; border-radius: 0; background:
  linear-gradient(var(--cyan), var(--cyan)) 50% 100% / 0 1px no-repeat,
  linear-gradient(rgba(237, 235, 230, .18), rgba(237, 235, 230, .18)) 50% 100% / 60% 1px no-repeat;
  font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.1; text-align: center; text-transform: uppercase;
  letter-spacing: .06em; color: var(--paper); caret-color: var(--cyan); transition: background-size .6s var(--ease); }
@media (min-width: 1044px) { .cr-name { font-weight: 300; } }
.cr-name::placeholder { color: rgba(237, 235, 230, .22); }
.cr-name:focus { outline: none; background-size: 100% 1px, 60% 1px; }
.cr-go { margin-top: 14px; padding: 10px 2px; background: none; border: 0; cursor: pointer; font-family: var(--mono); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.cr-go span { display: inline-block; transition: transform .4s var(--ease); }
.cr-go:hover span, .cr-go:focus-visible span { transform: translateX(6px); }
.cr-go:focus-visible { outline: 1px solid var(--cyan); outline-offset: 4px; }

/* ---- contact: the form as a CALL SHEET -------------------------------------------- */
/* A production call sheet: a header strip of cells (date, call time, location),
   then numbered ruled rows - number, label, entry - in DM Mono like the real
   thing. Inputs sit on the rule. No panel and no outline (Mohamed: nothing cut out and laid on top):
   the sheet is drawn straight onto the page, its rules fading out at both ends, with only a soft
   unedged shade behind it for legibility. */
.callsheet { --rule: rgba(237, 235, 230, .13); position: relative; isolation: isolate; gap: 0; counter-reset: row; }
.callsheet::before { content: ""; position: absolute; z-index: -1; inset: -14% -18%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(20, 19, 18, .72), rgba(20, 19, 18, .35) 60%, transparent); }
.callsheet .cs-head, .callsheet .cs-title, .callsheet > .field {   /* a horizontal rule that fades in and out */
  border-bottom: 0; background: linear-gradient(90deg, transparent, var(--rule) 14%, var(--rule) 86%, transparent) left bottom / 100% 1px no-repeat; }
.cs-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-title { padding: 16px 18px; font-family: var(--display); font-weight: 400; font-size: 22px; text-transform: uppercase; letter-spacing: .06em; color: var(--paper);
  grid-column: 1 / -1; }
.cs-cell { display: grid; gap: 4px; align-content: center; padding: 12px 14px;
  background: linear-gradient(transparent, var(--rule, rgba(237, 235, 230, .1)) 30%, var(--rule, rgba(237, 235, 230, .1)) 70%, transparent) right center / 1px 100% no-repeat;
  font-family: var(--mono); font-size: 12px; color: var(--paper); }
.cs-cell:last-child { background: none; }
.cs-cell b { font-weight: 400; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.callsheet > .field { counter-increment: row; position: relative; grid-template-columns: 44px minmax(120px, 170px) minmax(0, 1fr);
  align-items: center; gap: 0; min-height: 58px; border-bottom: 1px solid rgba(237, 235, 230, .1); }
.callsheet > .field::before { content: counter(row, decimal-leading-zero); align-self: stretch; display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--cyan);
  background: linear-gradient(transparent, var(--rule) 25%, var(--rule) 75%, transparent) right center / 1px 100% no-repeat; }
.callsheet > .field > label, .callsheet > .field > legend { float: left; padding: 0 14px; }
.callsheet > .field input, .callsheet > .field textarea { border-bottom-color: transparent; padding: 16px 16px; }
.callsheet > .field input:focus, .callsheet > .field textarea:focus { border-bottom-color: var(--cyan); background: rgba(6, 217, 210, .04); }
.callsheet > .field .err { grid-column: 3; padding: 0 16px 10px; min-height: 0; }
.callsheet > .field .err:empty { display: none; }
.callsheet > .topics { display: grid; }
.callsheet > .topics > legend { grid-column: 2; }
.callsheet > .topics .chips { grid-column: 3; padding: 12px 16px; margin: 0; }
.callsheet > .field:has(textarea) { align-items: start; }
.callsheet > .field:has(textarea) > label { padding-top: 18px; }
.callsheet > .field:has(textarea)::before { place-items: start center; padding-top: 18px; }
.callsheet .form-foot { padding: 18px; margin: 0; }
@media (max-width: 640px) {
  .cs-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .cs-cell:last-child { grid-column: 1 / -1; background: linear-gradient(90deg, transparent, var(--rule) 14%, var(--rule) 86%, transparent) left top / 100% 1px no-repeat; }
  .callsheet > .field { grid-template-columns: 36px minmax(0, 1fr); }
  .callsheet > .field > label, .callsheet > .field > legend { grid-column: 2; padding: 12px 14px 0; }
  .callsheet > .field::before { grid-row: 1 / span 3; }
  .callsheet > .field input, .callsheet > .field textarea, .callsheet > .field .err, .callsheet > .topics .chips { grid-column: 2; }
  .callsheet > .field input, .callsheet > .field textarea { padding: 8px 14px 14px; }
}

/* ---- round 12: realer notes, the stage rail, the script on the page, the edit's
   software details, the tilted mosaic, one pause --------------------------------- */

/* sticky notes: the sheet leans back from its glued top (the bottom edge lifts),
   two soft shadows sit under the lifted corners, the glue band is darker */
.note:not(.pad) { filter: none; }
.note:not(.pad)::before, .note:not(.pad)::after { content: ""; position: absolute; z-index: -1; bottom: 2%; width: 46%; height: 30%;
  background: rgba(0, 0, 0, .62); filter: blur(13px); pointer-events: none; transition: transform .5s var(--ease), opacity .5s var(--ease); }
.note:not(.pad)::before { left: 2%; transform: translateY(12px) rotate(-5deg); }
.note:not(.pad)::after { right: 2%; transform: translateY(12px) rotate(5deg); }
.note:not(.pad) .paper { transform-origin: 50% 0; transform: perspective(900px) rotateX(7deg); transition: transform .6s var(--ease);
  background:
    linear-gradient(180deg, rgba(70, 20, 0, .16), rgba(70, 20, 0, 0) 17%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(255, 232, 205, .14) 84%, rgba(60, 16, 0, .16) 100%),
    linear-gradient(100deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .06)),
    #F2600F; }
.go .note:not(.pad):hover .paper, .note.held .paper { transform: perspective(900px) rotateX(13deg); }
.go .note:not(.pad):hover::before, .go .note:not(.pad):hover::after, .note.held::before, .note.held::after { opacity: .85; }

/* the stage rail */
.slate-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(36px, 4.5vw, 88px); align-items: start; }
.st-rail { position: sticky; top: 30vh; display: flex; gap: 20px; padding: 4px 0; }
.rl-line { position: relative; width: 1px; background: rgba(237, 235, 230, .14); }
.rl-line i { position: absolute; inset: 0; background: var(--cyan); transform-origin: 50% 0; transform: scaleY(0); }
.st-rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.st-rail a { display: block; padding: 2px 0; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink-2); text-decoration: none; transition: color .5s var(--ease); }
.st-rail a:hover, .st-rail a[aria-current] { color: var(--paper); }
.st-rail a[aria-current]::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 1px -16px; background: var(--cyan); }
.station { scroll-margin-top: 120px; }
@media (min-width: 1100px) {
  .slate-body .st-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1099px) { .slate-body { display: block; } .st-rail { display: none; } }

/* the script, written straight onto the page */
.draft { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
.sc { position: relative; min-width: 0; height: clamp(360px, 52vh, 520px); overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 92%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 92%, transparent); }
.sc-body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 6ch 26px 5ch;
  font-family: var(--mono); font-size: clamp(13px, 1.05vw, 15px); line-height: 1.5; color: rgba(237, 235, 230, .88); }
.sl { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--ease), opacity .6s var(--ease); }
.sl.in { grid-template-rows: 1fr; opacity: 1; }
.sl.gone { grid-template-rows: 0fr; opacity: 0; }
.sl > p { position: relative; margin: 0; min-height: 0; overflow: visible; }
.sl-scene > p, .sl-action > p, .sl-trans > p { padding-top: 1.5em; }
.sl-char > p { padding: 1.5em 0 0 22ch; text-transform: uppercase; }
.sl-paren > p { padding-left: 16ch; color: var(--ink-2); }
.sl-dlg > p { padding-left: 10ch; max-width: 45ch; }
.sl-scene > p { text-transform: uppercase; color: var(--paper); }
.sl-trans > p { text-align: right; text-transform: uppercase; color: var(--ink-2); padding-right: 0; }
.sl-action > p { max-width: 58ch; }
/* scene numbers in both margins, like a shooting script */
.sl-scene > p::before, .sl-scene > p::after { content: attr(data-n); position: absolute; top: 1.5em; color: var(--ink-2); }
.sl-scene > p::before { left: -4.5ch; } .sl-scene > p::after { right: auto; left: 62ch; }
.sc .struck .sc-txt { background: linear-gradient(var(--ink-2), var(--ink-2)) 0 55% / 100% 1px no-repeat; color: rgba(154, 150, 142, .62); transition: color .5s var(--ease); }
.sc-note { display: inline-block; margin-left: 2.2ch; font-family: var(--face); font-size: 13px; color: var(--cyan); white-space: nowrap;
  opacity: 0; transform: translateY(4px) rotate(var(--t, -2deg)); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.sc-note::before { content: "\2190 "; }
.sc-note.in { opacity: 1; transform: rotate(var(--t, -2deg)); }
.sc-note.out { opacity: 0; transform: translateY(-6px) rotate(var(--t, -2deg)); transition-duration: 1.4s; }
.sc .caret { background: var(--cyan); }
@media (max-width: 899px) {
  .draft { grid-template-columns: minmax(0, 1fr); }
  .sc-body { padding: 0 0 20px 3.5ch; font-size: 12.5px; }
  .sl-char > p { padding-left: 14ch; } .sl-paren > p { padding-left: 10ch; } .sl-dlg > p { padding-left: 5ch; }
  .sl-scene > p::after { display: none; } .sl-scene > p::before { left: -3.5ch; }
  .sc-note { display: block; margin: 2px 0 0; }
}

/* the edit: the software's own details */
.ed-tab { display: flex; align-items: center; gap: 10px; }
.ed-tab-t { display: grid; gap: 3px; }
.ed-chip { width: 8px; height: 8px; background: var(--ink-2); }
.ed-tab.on .ed-chip { background: var(--cyan); }
.ed-x { margin-left: 6px; color: #6E6A63; font-size: 13px; }
.ed-ruler { margin-left: 70px; }
.ed-ruler span { text-indent: 5px; }
.ed-lab { width: 70px; display: flex; align-items: center; gap: 6px; }
.ed-lab b { font-weight: 400; padding: 2px 6px; background: #2A2926; color: var(--paper); }
.ed-eye { font-style: normal; color: #57554F; font-size: 11px; }
.ed-ms { font-style: normal; padding: 0 4px; border: 1px solid #3A3935; color: #77736A; font-size: 9px; line-height: 14px; }
.cl em { position: absolute; left: 6px; right: 4px; top: 50%; transform: translateY(-50%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: rgba(207, 237, 235, .8); }
.ed-row:not(.aud) .cl { border-top: 2px solid rgba(6, 217, 210, .32); }
.ed-tl .ed-in { padding: 0 clamp(16px, 2vw, 32px); }
.ed-head { left: calc(clamp(16px, 2vw, 32px) + 70px + (100% - 2 * clamp(16px, 2vw, 32px) - 70px) * var(--p)); }
@media (max-width: 760px) {
  .ed-tl .ed-in { padding: 0 4px; }
  .ed-ruler { margin-left: 44px; } .ed-lab { width: 44px; } .ed-eye, .ed-ms, .ed-x { display: none; }
  .cl em { display: none; }
  .ed-head { left: calc(4px + 44px + (100% - 8px - 44px) * var(--p)); }
}

/* the past-work mosaic runs at a slight angle */
.reel-lanes { inset: -10% -14%; transform: rotate(-3.5deg); }

/* one pause for everything */
.motion-pause { position: fixed; right: clamp(14px, 3vw, 30px); bottom: clamp(12px, 3vw, 24px); z-index: 60; display: flex; align-items: center; gap: 9px;
  padding: 10px 4px; border: 0; background: none; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper); text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.mp-i { display: flex; gap: 3px; } .mp-i i { width: 3px; height: 10px; background: var(--cyan); }
.motion-pause[aria-pressed="true"] .mp-i i:first-child { width: 0; height: 0; border-left: 9px solid var(--cyan); border-top: 5px solid transparent; border-bottom: 5px solid transparent; background: none; }
.motion-pause[aria-pressed="true"] .mp-i i:last-child { display: none; }
.motion-pause:focus-visible { outline: 1px solid var(--cyan); outline-offset: 4px; }
body.paused .reel-lane, body.paused .caret, body.paused .tk-ui .rec::before, body.paused .atmos i { animation-play-state: paused !important; }

/* ---- round 13: the light under the page, the clip in the edit ------------- */

/* footage under the page: one showreel, very dim, everywhere */
.amb { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; transition: opacity .5s var(--ease); }
.amb video { width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .12; filter: saturate(.75);
  transition: opacity 1.6s var(--ease); }
.amb:not(.on) video { opacity: .08; }

/* the clip on its track, and the marker that plays it */
.cl-pick { position: absolute; top: -3px; bottom: -3px; z-index: 2; pointer-events: none;
  border: 1px solid var(--orange); background: repeating-linear-gradient(135deg, rgba(242, 96, 15, .26) 0 4px, rgba(242, 96, 15, .1) 4px 8px); }
.cl-pick.on { background: rgba(242, 96, 15, .4); }
.ed-in.has-mark { padding-top: 40px; }
.ed-in.has-mark .ed-head { top: 40px; }
.ed-mark { position: absolute; top: 0; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none; cursor: pointer;
  left: calc(clamp(16px, 2vw, 32px) + 70px + (100% - 2 * clamp(16px, 2vw, 32px) - 70px) * var(--x));
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); white-space: nowrap; }
.ed-mark i { position: relative; width: 10px; height: 14px; background: var(--orange); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.ed-mark i::after { content: ""; position: absolute; left: 50%; top: 14px; width: 1px; height: 26px; background: rgba(242, 96, 15, .6); }
.ed-mark span { border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), color .3s var(--ease); }
.ed-mark:hover span, .ed-mark:focus-visible span { border-color: currentColor; color: var(--paper); }
/* right of centre the label sits on the marker's left so it never runs off */
.ed-mark { transform: translateX(-5px); }
@media (max-width: 760px) {
  .ed-mark { left: calc(4px + 44px + (100% - 8px - 44px) * var(--x)); font-size: 10px; }
}

/* the program monitor: opens above the timeline, no frame around it */
.ed-mon { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .7s var(--ease), opacity .5s var(--ease); }
.ed-mon.open { grid-template-rows: 1fr; opacity: 1; }
.ed-mon-in { min-height: 0; overflow: hidden; display: grid; justify-items: center; gap: 14px; }
.ed-mon.open .ed-mon-in { padding: 26px 0 22px; }
.ed-mon video { width: auto; max-width: 100%; height: min(62vh, 600px); aspect-ratio: 4 / 3; background: #000; cursor: pointer; }
.ed-mon-ctl { display: flex; align-items: center; gap: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.ed-vol { display: flex; align-items: center; gap: 10px; }
.ed-vol input { width: 140px; accent-color: var(--cyan); }
.ed-mon-tc { color: var(--cyan); }
.ed-mon-x { padding: 8px 0; border: 0; background: none; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--paper); }
.ed-mon-x:hover { color: var(--cyan); }
@media (max-width: 560px) { .ed-mon video { height: auto; width: 100%; } .ed-vol input { width: 96px; } }

/* ---- privacy: one readable column ----------------------------------------------------------- */
.legal { padding: calc(var(--head) + clamp(56px, 11vh, 130px)) 0 clamp(72px, 12vh, 140px); }
.legal-wrap { max-width: 760px; }
.legal .h2 { margin: 14px 0 22px; }
.legal-lede { margin: 0 0 clamp(36px, 6vh, 56px); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--paper); max-width: 52ch; }
.legal h2 { margin: clamp(34px, 5vh, 48px) 0 10px; font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper); }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 64ch; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 1.1em; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--paper); font-weight: 500; }
.legal a { color: var(--paper); text-underline-offset: 3px; }
.legal a:hover { color: var(--cyan); }
.legal-fill { color: var(--orange-lt) !important; }            /* a blank to fill before launch: impossible to miss */
.legal-date { margin-top: clamp(40px, 6vh, 64px) !important; font-size: 12px !important; letter-spacing: .16em; text-transform: uppercase; }

/* ---- 404: "What happened?" and a button you can never catch ----------------------------------- */
.lost { min-height: 100vh; min-height: 100dvh; display: grid; align-content: center; justify-items: center; text-align: center; gap: 18px; padding: var(--head) var(--pad); }
.lost-q { margin: 0; font-weight: 600; font-size: clamp(48px, 8vw, 120px); line-height: 1; letter-spacing: -.02em; color: var(--paper); text-wrap: balance;
  animation: lost-in .9s var(--ease) both; }
@keyframes lost-in { 0% { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(8px); } 100% { opacity: 1; transform: none; filter: none; } }
.lost-line { margin: 0; max-width: 34ch; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-2); }
.lost-slot { display: inline-block; margin-top: 18px; }
.lost-run { margin-top: 0; white-space: nowrap; touch-action: none; }
.lost-run.loose { position: fixed; z-index: 50; margin: 0; transition: left .38s var(--ease), top .38s var(--ease); }
.lost-run.glitch { animation: lost-glitch .26s steps(1, end); }
@keyframes lost-glitch { 0% { opacity: .2; transform: translate3d(-6px, 0, 0); box-shadow: -4px 0 0 rgba(6, 217, 210, .7), 4px 0 0 rgba(242, 96, 15, .7); }
  30% { opacity: 1; transform: translate3d(5px, 0, 0); } 55% { opacity: .4; transform: none; box-shadow: none; } 100% { opacity: 1; } }
.lost-quip { margin: 0; min-height: 1.5em; font-size: 15px; color: var(--ink-2); }
.lost-go { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: 8px; }
.lost-link { font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; transition: color .3s var(--ease); }
.lost-link:hover, .lost-link:focus-visible { color: var(--cyan); }
.lost-home.lit { color: var(--cyan); animation: lost-lit 1.6s var(--ease) 2; }
@keyframes lost-lit { 50% { text-shadow: 0 0 18px rgba(6, 217, 210, .8); } }
@media (prefers-reduced-motion: reduce) { .lost-q, .lost-home.lit, .lost-run.glitch { animation: none; } .lost-run.loose { transition: none; } }

/* the privacy line under the contact form */
.form-legal { flex-basis: 100%; margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.form-legal a { color: var(--paper); text-underline-offset: 3px; }

/* the one-time hint on "apps and tools for creatives like us": a cursor (or a tap ring on touch) presses it */
.statement { position: relative; }
.sw-cursor { position: absolute; z-index: 5; width: 26px; height: 26px; margin: -2px 0 0 -4px; pointer-events: none; transform-origin: 4px 2px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.sw-cursor svg { display: block; }
.sw-tap { position: absolute; z-index: 5; width: 44px; height: 44px; border: 2px solid var(--cyan); border-radius: 50%; pointer-events: none; }
.sw-toggle.sw-poke { text-decoration-color: var(--cyan); text-shadow: 0 0 18px rgba(6, 217, 210, .75); transition: text-shadow .25s var(--ease); }

/* the screening's sound: a mute word and a volume slider drawn like the seek rail */
.sc-vol { flex: none; display: flex; align-items: center; gap: 10px; --sc-accent: var(--cyan); }
.sc-volr { -webkit-appearance: none; appearance: none; width: 88px; height: 20px; margin: 0; background: transparent; cursor: pointer; }
.sc-volr::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--sc-accent) var(--v, 100%), rgba(237, 235, 230, .22) var(--v, 100%)); }
.sc-volr::-moz-range-track { height: 2px; background: linear-gradient(90deg, var(--sc-accent) var(--v, 100%), rgba(237, 235, 230, .22) var(--v, 100%)); }
.sc-volr::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -4.5px; border-radius: 50%; background: var(--paper); border: 0; }
.sc-volr::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 0; }
.sc-volr:focus-visible { outline: 1px solid var(--sc-accent); outline-offset: 4px; }
.sc-volr[hidden] { display: none; }
@media (max-width: 560px) { .sc-volr { width: 64px; } }

/* ---- the studio's closing line, and the vision on its own screen ---------------------------- */
.studio .founded { margin: clamp(26px, 4.5vh, 48px) 0 0; }
/* the vision: the first thing on the last page - set like the slogan (display face, caps, wide), cyan then
   orange, and drawn in from the left like light passing across it as the page arrives */
.vision { margin: 0 0 clamp(6px, 2svh, 26px); padding: 0 16px; font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(13px, 1.25vw, 19px); letter-spacing: .32em; line-height: 1.7; text-align: center; white-space: nowrap; }
.vision .v-a { color: var(--cyan); }
.vision .v-b { color: var(--orange-lt); }
.vision.rv { opacity: 1; transform: none; }
/* the wipe is on the inner span: clipping the observed element itself made it count as off screen */
.vision .v-in { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 1.9s cubic-bezier(.65, 0, .35, 1) .2s; }
.vision.in .v-in { clip-path: inset(0 0 0 0); }
@media (max-width: 767px) {
  .vision { white-space: normal; letter-spacing: .2em; font-size: 12px; }
  .vision .v-a, .vision .v-b { display: block; }
}
@media (prefers-reduced-motion: reduce) { .vision .v-in { clip-path: none; transition: none; } }

/* full screen: the icon alone, everywhere (corners out = enter, corners in = leave) */
.sc-full { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; }
.sc-full svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.sc-full .i-exit, .sc-full.is-full .i-full { display: none; }
.sc-full.is-full .i-exit { display: block; }