@layer reset, tokens, base, structure, components, motion, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, figure { margin: 0; }
  button, input, textarea { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  button { border: 0; }
  img { display: block; width: 100%; }
  a { color: inherit; text-decoration: none; }
}

/* PERSONAL PHOTOGRAPHER REFINEMENT / 2026-07 */
:root {
  --refined-display: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --refined-body: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --refined-utility: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --refined-ease-out: cubic-bezier(.16, 1, .3, 1);
}

.scene-index h2,
.manifesto h2,
.chapters__header h2,
.film-chapter h3,
.soundscape h2,
.field-notes h2,
.process-reel h2,
.author-note h2,
.contact-sheet h2 { font-family: var(--refined-display); text-transform: none; }

.scene-index h2 small,
.manifesto h2 small {
  display: block;
  margin-bottom: 18px;
  color: currentColor;
  font-family: var(--refined-utility);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .18em;
}

.scene-index {
  min-height: 0;
  padding-top: 62px;
  padding-bottom: 54px;
}

.scene-index h2 {
  width: 100%;
  max-width: 820px;
  margin-top: clamp(42px, 7svh, 66px);
  font-size: clamp(3rem, 12vw, 5.4rem);
  font-weight: 780;
  line-height: .98;
  letter-spacing: -.055em;
}

.scene-index h2 span,
.scene-index[data-scene-state] h2 span {
  width: auto;
  color: inherit;
  -webkit-text-stroke: 0;
  transform: none;
}

.scene-index__intro {
  width: min(100%, 520px);
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
}

.scene-index__rail { margin-top: clamp(44px, 7svh, 70px); }
.scene-ticket strong { bottom: 39px; font-size: 19px; line-height: 1.05; letter-spacing: -.02em; }
.scene-ticket strong small {
  display: block;
  margin-top: 5px;
  font-family: var(--refined-utility);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: .12em;
}
.scene-ticket em { right: 8px; font-size: 7px; line-height: 1.35; letter-spacing: .04em; }
.scene-index__footer { margin-top: 30px; }

.manifesto {
  min-height: 0;
  padding-top: 68px;
  padding-bottom: 78px;
}
.manifesto__type { margin-top: clamp(46px, 7svh, 72px); }
.manifesto h2 {
  width: 100%;
  max-width: 860px;
  font-size: clamp(2.9rem, 10.8vw, 5rem);
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -.055em;
}
.manifesto h2 span,
.manifesto[data-manifesto-state] h2 span {
  width: auto;
  margin-left: 0;
  color: var(--ink);
  -webkit-text-stroke: 0;
  transform: none;
}
.manifesto h2 span:last-child { color: var(--rust); }
.manifesto__note {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 620px;
  margin-top: clamp(38px, 6svh, 56px);
  gap: 12px;
}
.manifesto__note p:first-child { font-size: 14px; }
.manifesto__note p:last-child { max-width: 560px; font-size: 14px; line-height: 1.85; }
.manifesto[data-manifesto-state="idle"] h2 span { transform: translate3d(0, 18px, 0); }
.manifesto[data-manifesto-state="entering"] h2 span { animation: refined-title-in 460ms var(--refined-ease-out) both; }
.manifesto[data-manifesto-state="entering"] h2 span:nth-of-type(2) { animation-delay: 80ms; }
.manifesto:is([data-manifesto-state="settled"], [data-manifesto-state="offscreen"]) h2 span { animation: none; transform: none; }

.film-reel { height: 600svh; }
.chapters__header { min-height: 58svh; padding-top: 66px; padding-bottom: 58px; }
.chapters__header p { font-family: var(--refined-utility); font-size: 9px; letter-spacing: .14em; }
.chapters__header h2 {
  max-width: 760px;
  font-size: clamp(2.65rem, 10vw, 4.2rem);
  font-weight: 660;
  line-height: 1.06;
  letter-spacing: -.035em;
}
.chapters__header.is-focus-entering .chapters__title-line--one { animation-duration: 420ms; }
.chapters__header.is-focus-entering .chapters__title-line--two { animation-duration: 480ms; animation-delay: 60ms; }
.chapters__header.is-focus-entering::before { animation-duration: 420ms; animation-delay: 70ms; }
.chapters__header.is-focus-entering::after { animation-duration: 320ms; animation-delay: 180ms; }
.chapters__header.is-focus-settled .chapters__title-breathe { animation: none; }

.film-chapter h3 { font-size: clamp(3.2rem, 14vw, 5.6rem); }
.film-chapter__body > p { max-width: 480px; font-size: 13px; font-weight: 560; letter-spacing: .02em; }
.film-chapter__body > button {
  min-height: 46px;
  padding: 0 17px 0 6px;
  border-color: rgb(255 255 255 / .48);
  background: rgb(4 12 10 / .28);
  box-shadow: none;
  backdrop-filter: blur(10px);
}
.film-chapter__body > button i {
  width: 33px;
  height: 33px;
  border: 1px solid rgb(255 255 255 / .56);
  background: transparent;
  box-shadow: none;
  color: var(--white);
  font-family: var(--refined-utility);
  font-size: 16px;
  transition: transform 150ms ease;
}
.film-chapter__body > button:active i { transform: translateX(2px); }

.soundscape {
  min-height: 700px;
  height: 84svh;
}
.soundscape__copy { top: clamp(98px, 12svh, 126px); }
.soundscape__copy > p:first-child { margin-bottom: 12px; font-family: var(--refined-utility); letter-spacing: .16em; }
.soundscape h2 {
  width: 100%;
  max-width: 760px;
  font-size: clamp(2.85rem, 10.2vw, 4.8rem);
  font-weight: 560;
  line-height: 1.02;
  letter-spacing: -.045em;
}
.soundscape h2 span { width: auto; transform: none; }
.soundscape h2 span:nth-child(2) { color: var(--signal); }
.soundscape__copy > p:last-child {
  width: min(100%, 610px);
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.75;
  text-align: left;
}
.soundscape__wave { top: auto; bottom: 10%; height: 84px; gap: 8px; }
.soundscape__wave i { max-height: 78px; min-height: 4px; border-radius: 2px; }
.soundscape__frames { display: none; }

.marquee div { animation-duration: 22s; }
.marquee span {
  padding: 9px 0;
  font-family: var(--refined-utility);
  font-size: 18px;
  font-weight: 420;
  letter-spacing: .08em;
}
.field-notes__inner { padding-top: 62px; padding-bottom: 92px; }
.field-notes h2 {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  margin-top: 48px;
  font-size: clamp(3rem, 11.5vw, 5.2rem);
  font-weight: 730;
  line-height: 1.03;
  letter-spacing: -.055em;
}
.field-notes h2 em { color: var(--ink); -webkit-text-stroke: 0; }
.field-notes__grid { margin-top: 52px; }
.field-notes__grid article { grid-template-columns: 92px 1fr; padding: 24px 0 28px; column-gap: 20px; }
.field-notes__grid article > span,
.process-reel__cards article > div > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.field-notes__grid article > span b,
.process-reel__cards article > div > span b {
  font-family: var(--refined-utility);
  font-size: 36px;
  font-weight: 420;
  line-height: .85;
  letter-spacing: -.04em;
}
.field-notes__grid article > span small,
.process-reel__cards article > div > span small {
  font-family: var(--refined-utility);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .14em;
}
.field-notes__grid h3 { font-size: 25px; }
.field-notes__grid p { margin-top: 14px; }

.process-reel { padding-top: 66px; padding-bottom: 46px; }
.process-reel h2 {
  width: 100%;
  max-width: 820px;
  margin-top: 48px;
  font-size: clamp(3rem, 11.5vw, 5.3rem);
  line-height: 1.04;
  letter-spacing: -.05em;
}
.process-reel h2 span { width: auto; margin-left: 0; transform: none; }
.process-reel h2 span:nth-child(2) { color: var(--ink); -webkit-text-stroke: 0; }
.process-reel__cards { margin-top: 54px; }
.process-reel__cards article { min-height: 0; padding: 28px 0 46px; }
.process-reel__cards figure {
  width: min(82%, 520px);
  height: auto;
  aspect-ratio: 4 / 3;
  background: #17211d;
}
.process-reel__cards img,
.process-reel__cards article:nth-child(1) img,
.process-reel__cards article:nth-child(2) img,
.process-reel__cards article:nth-child(3) img {
  object-fit: cover;
  object-position: center;
}
.process-reel__cards article > div { grid-template-columns: 92px 1fr; margin-top: 26px; gap: 18px; }
.process-reel__cards h3 { font-size: clamp(1.6rem, 5vw, 2.1rem); letter-spacing: -.035em; }
.process-reel__cards p { margin-top: 14px; }
.process-reel__footer em { font-size: 12px; font-style: normal; }

.author-note {
  min-height: 820px;
  height: 108svh;
}
.author-note > img { object-position: center center; transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.025); }
.author-note__shade {
  background:
    linear-gradient(90deg, rgb(3 9 12 / .86) 0%, rgb(3 9 12 / .46) 54%, rgb(3 9 12 / .12) 100%),
    linear-gradient(180deg, rgb(3 9 12 / .5), transparent 38%, rgb(3 9 12 / .88));
}
.author-note__copy { top: clamp(104px, 13svh, 132px); }
.author-note h2 {
  width: min(78%, 720px);
  font-size: clamp(2.6rem, 8.8vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
}
.author-note h2 span { width: auto; transform: none; }
.author-note h2 span:nth-child(2) { color: var(--signal); }
.author-note h2 span:nth-child(3) {
  max-width: 15em;
  margin-top: 16px;
  color: var(--white);
  font-size: .48em;
  font-weight: 520;
  line-height: 1.28;
  letter-spacing: 0;
}
.author-note__copy p {
  width: min(58%, 420px);
  margin: 28px 0 0;
  font-size: 13px;
  line-height: 1.8;
}
.author-note__facts {
  display: grid;
  width: min(78%, 680px);
  margin: clamp(64px, 9svh, 94px) 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgb(255 255 255 / .34);
  list-style: none;
  gap: 22px;
}
.author-note__facts li { font-size: 11px; line-height: 1.5; color: rgb(248 248 242 / .8); }
.author-note__facts li span { display: inline-block; width: 66px; font-family: var(--refined-utility); font-size: 7px; letter-spacing: .14em; color: var(--signal); }

.contact-sheet { min-height: 100svh; padding-bottom: 52px; }
.contact-sheet__frames { height: 30svh; min-height: 220px; }
.contact-sheet h2 {
  max-width: 760px;
  font-size: clamp(2.75rem, 8.8vw, 4.4rem);
  font-weight: 720;
  line-height: 1.04;
  letter-spacing: -.05em;
}
.contact-sheet h2 span {
  display: block;
  width: 100%;
  white-space: nowrap;
  transform: none;
}
.contact-sheet__bottom { margin-top: clamp(34px, 5svh, 52px); }
.contact-sheet__bottom > p { max-width: 340px; font-size: 14px; line-height: 1.75; }

.footer { min-height: 132px; padding-top: 22px; padding-bottom: 22px; }
.footer > div { justify-content: flex-start; gap: 16px; }
.footer strong { max-width: 240px; font-family: var(--refined-utility); font-size: 18px; line-height: 1.05; letter-spacing: .04em; }
.footer span { max-width: 250px; font-size: 7px; }

[data-reveal] { transform: translateY(18px); transition: opacity 380ms ease, transform 460ms var(--refined-ease-out); }

@keyframes refined-title-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (min-width: 760px) {
  .manifesto__note { grid-template-columns: .7fr 1.3fr; gap: 32px; }
  .process-reel__cards figure { width: min(68%, 620px); }
  .author-note__facts { grid-template-columns: repeat(3, 1fr); width: min(86%, 780px); gap: 42px; }
  .author-note__facts li span { display: block; width: auto; margin-bottom: 5px; }
}

@media (max-width: 420px) {
  .scene-index h2 { font-size: clamp(2.75rem, 13vw, 3.5rem); }
  .scene-index__top span:last-child,
  .soundscape__top span:last-child,
  .author-note__top span:last-child { display: none; }
  .field-notes__grid article,
  .process-reel__cards article > div { grid-template-columns: 76px 1fr; }
  .author-note h2 { width: 94%; }
  .author-note__copy p { width: 72%; }
  .author-note__facts { width: 88%; gap: 14px; }
  .contact-sheet__bottom { grid-template-columns: 1fr 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .chapters__header.is-focus-entering .chapters__title-line,
  .manifesto[data-manifesto-state] h2 span { animation: none; transform: none; }
}

/* FILM REEL / TYPOGRAPHIC APERTURE */
@layer components {
  .film-reel {
    --film-progress: 0;
    --film-type-fill: 0;
    --film-source-exit: 0;
    --film-copy: 0;
    --film-aperture: 0;
    --film-aperture-radius: 0px;
    position: relative;
    height: 900svh;
    background: var(--p-ink-900, #030807);
  }

  .film-reel__stage {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 640px;
    overflow: hidden;
    isolation: isolate;
    background: var(--p-ink-900, #030807);
  }

  .film-reel [data-film-reel-layer] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
  }

  .film-reel [data-reel-role="hidden"] {
    visibility: hidden;
    pointer-events: none;
  }

  .film-reel [data-reel-role="source"] {
    z-index: 1;
    visibility: visible;
  }

  .film-reel [data-reel-role="target"] {
    z-index: 2;
    visibility: visible;
    background: transparent;
    pointer-events: none;
  }

  .film-reel [data-reel-role="target"] :is(.film-chapter__media, .film-chapter__shade, .grain) {
    clip-path: circle(var(--film-aperture-radius) at var(--film-aperture-x) var(--film-aperture-y));
  }

  .film-reel [data-reel-role="target"] :is(.film-chapter__top, .film-chapter__body) {
    opacity: var(--film-copy);
    transform: translate3d(0, var(--film-copy-y), 0);
  }

  .film-reel__aperture {
    position: absolute;
    z-index: 6;
    inset: 0;
    pointer-events: none;
  }

  .film-reel__type {
    position: absolute;
    opacity: var(--film-type-fill);
    transform: translate3d(0, var(--film-source-y), 0);
  }

  .film-reel__type > :is(h2, h3) {
    width: 100%;
    height: 100%;
    margin: 0;
    color: transparent;
    background-image: var(--film-next-image);
    background-size: 100vw 100svh;
    background-position: var(--film-next-focus, 58% 56%);
    background-clip: text;
    -webkit-background-clip: text;
  }

  .film-reel[data-mask-kind="header"] .film-reel__type h2 {
    font-family: var(--display);
    font-size: clamp(2.8rem, 12.4vw, 4.4rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: 0;
  }

  .film-reel[data-mask-kind="film"] .film-reel__type h3 {
    width: 116%;
    font-family: var(--display);
    font-size: clamp(3.9rem, 18.5vw, 6.5rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: 0;
    text-transform: uppercase;
    transform: scaleX(.89);
    transform-origin: left bottom;
  }

  .film-reel__track {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .film-reel__track [data-film-reel-stop] {
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px;
  }

  .film-reel__track [data-reel-index="0"] { top: 0; }
  .film-reel__track [data-reel-index="1"] { top: 20%; }
  .film-reel__track [data-reel-index="2"] { top: 40%; }
  .film-reel__track [data-reel-index="3"] { top: 60%; }
  .film-reel__track [data-reel-index="4"] { top: 80%; }
  .film-reel__track [data-reel-index="5"] { top: 100%; }

  .film-reel[data-reel-fallback="crossfade"] .film-reel__aperture {
    display: none;
  }

  .film-reel[data-reel-fallback="crossfade"] [data-reel-role="target"] :is(.film-chapter__media, .film-chapter__shade, .grain) {
    clip-path: none;
    opacity: var(--film-progress);
  }
}

@layer motion {
  .film-reel [data-reveal] {
    transition: none;
  }

  .film-reel [data-reel-role="source"] :is(#films-title, .film-chapter__body) {
    opacity: calc(1 - var(--film-source-exit));
    transform: translate3d(0, var(--film-source-y), 0);
  }

  .film-reel [data-reel-role="target"] .film-chapter__image {
    transform: translate3d(0, var(--film-image-y), 0) scale(var(--film-image-scale));
  }

  .film-reel[data-reel-state="transitioning"] :is(.film-reel__type, [data-reel-role="target"] .film-chapter__media) {
    will-change: transform, opacity, clip-path;
  }

  .film-reel:not([data-reel-state="transitioning"]) :is(.film-reel__type, .film-chapter__media) {
    will-change: auto;
  }
}

@layer responsive {
  @media (max-width: 700px) {
    .film-reel__stage { min-height: 560px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .film-reel { height: auto; }

    .film-reel__stage {
      position: relative;
      height: auto;
      min-height: 0;
      overflow: visible;
    }

    .film-reel [data-film-reel-layer] {
      position: relative;
      inset: auto;
      visibility: visible;
      pointer-events: auto;
    }

    .film-reel .chapters__header {
      min-height: 70svh;
      height: auto;
    }

    .film-reel .film-chapter {
      min-height: 760px;
      height: 98svh;
    }

    .film-reel__track,
    .film-reel__aperture,
    .film-reel [data-resident-video] {
      display: none;
    }

    .film-reel [data-film-reel-layer],
    .film-reel [data-film-reel-layer] * {
      animation: none;
      transition: none;
    }
  }
}

@layer tokens {
  :root {
    /* Primitive */
    --p-ink-1000: #040807;
    --p-ink-950: #071310;
    --p-ink-900: #0d1c18;
    --p-fog-100: #c8ccc5;
    --p-bone-50: #eee8dc;
    --p-white: #f5f0e8;
    --p-signal-500: #c99a2b;
    --p-moss-600: #50665c;
    --p-rust-600: #9b4632;
    --p-blue-700: #173a53;
    --p-sand-500: #b7a98f;
    --p-copper-500: #b76b36;
    --p-cobalt-800: #102d47;

    /* Semantic */
    --color-canvas: var(--p-ink-950);
    --color-canvas-deep: var(--p-ink-1000);
    --color-surface: var(--p-fog-100);
    --color-surface-soft: var(--p-bone-50);
    --color-text-on-dark: var(--p-white);
    --color-text-on-light: var(--p-ink-950);
    --color-progress: var(--p-signal-500);
    --color-location-moss: var(--p-moss-600);
    --color-location-rust: var(--p-rust-600);
    --color-location-blue: var(--p-blue-700);

    /* Compatibility aliases */
    --ink: var(--color-canvas);
    --ink-soft: var(--p-ink-900);
    --bone: var(--color-surface-soft);
    --paper: var(--color-surface);
    --white: var(--color-text-on-dark);
    --signal: var(--color-progress);
    --moss: var(--color-location-moss);
    --rust: var(--color-location-rust);
    --blue: var(--color-location-blue);
    --line-dark: rgb(7 19 16 / .26);
    --line-light: rgb(245 240 232 / .28);
    --glow-brass: rgb(214 166 58 / .38);
    --shadow-petrol: rgb(2 10 8 / .62);
    --shadow-cobalt: rgb(5 21 38 / .56);
    --display: "Bahnschrift Condensed", "Bahnschrift SemiCondensed", Impact, Haettenschweiler, sans-serif;
    --sans: "Aptos Narrow", "Bahnschrift SemiCondensed", "Microsoft YaHei UI", "PingFang SC", sans-serif;
    --body: "Microsoft YaHei UI", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    /* Component */
    --gutter: clamp(18px, 5.6vw, 30px);
    --shell: 560px;
    --header-h: 78px;
    --poster-radius: 14px;
    --control-size: 43px;
    --section-screen: 100svh;
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --fast: 180ms;
    --medium: 520ms;
    --slow: 920ms;
  }
}

@layer base {
  html { min-width: 280px; background: var(--p-ink-1000); }
  body {
    min-width: 280px;
    background: var(--p-ink-1000);
    color: var(--white);
    font-family: var(--body);
    font-size: 14px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  button { color: inherit; cursor: pointer; }
  ::selection { background: var(--signal); color: var(--ink); }
  :focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
  .skip-link {
    position: fixed;
    z-index: 1000;
    top: 10px;
    left: 10px;
    padding: 10px 14px;
    background: var(--signal);
    color: var(--ink);
    transform: translateY(-160%);
  }
  .skip-link:focus { transform: translateY(0); }
  .site-shell {
    position: relative;
    width: min(100%, var(--shell));
    margin-inline: auto;
    overflow: clip;
    background: var(--ink);
    box-shadow: 0 0 100px rgb(0 0 0 / .62);
  }
  .grain {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    opacity: .12;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");
  }
  .scroll-progress {
    position: fixed;
    z-index: 90;
    top: 0;
    right: max(0px, calc((100vw - var(--shell)) / 2));
    width: 3px;
    height: 100dvh;
    background: rgb(255 255 255 / .08);
    pointer-events: none;
  }
  .scroll-progress i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--signal);
    transform: scaleY(0);
    transform-origin: top;
  }
}

@layer structure {
  .site-header {
    position: absolute;
    z-index: 50;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 20px;
    width: 100%;
    height: calc(var(--header-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) var(--gutter) 0;
    color: var(--white);
    transition: background-color var(--medium) var(--ease), backdrop-filter var(--medium) var(--ease), color var(--medium) var(--ease);
  }
  .site-header.is-fixed {
    position: fixed;
    left: 50%;
    width: min(100%, var(--shell));
    transform: translateX(-50%);
    background: rgb(16 19 16 / .74);
    backdrop-filter: blur(18px) saturate(.8);
  }
  .brand { display: flex; align-items: center; width: max-content; min-height: 46px; gap: 10px; }
  .brand__mark {
    display: grid;
    place-items: center;
    width: 35px;
    aspect-ratio: 1;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-family: var(--display);
    font-size: 14px;
    letter-spacing: -.04em;
  }
  .brand__name {
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .12em;
  }
  .header__meta {
    font-family: var(--mono);
    font-size: 7px;
    line-height: 1.45;
    letter-spacing: .08em;
    opacity: .76;
    text-align: right;
  }
  .menu-button {
    display: grid;
    place-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / .5);
    border-radius: 50%;
    background: rgb(16 19 16 / .12);
    backdrop-filter: blur(8px);
    gap: 6px;
  }
  .menu-button span { display: block; width: 16px; height: 1px; background: currentColor; }

  .hero {
    position: relative;
    min-height: 680px;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: #627064;
  }
  .hero::after {
    content: "";
    position: absolute;
    z-index: 5;
    right: var(--gutter);
    bottom: 86px;
    left: calc(var(--gutter) + 104px);
    height: 2px;
    background: linear-gradient(90deg, var(--signal) 0 24%, rgb(255 255 255 / .24) 24% 100%);
  }
  .hero__scenes, .hero-scene, .hero__wash { position: absolute; inset: 0; }
  .hero__scenes { z-index: -4; }
  .hero-scene {
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 720ms var(--ease), transform 1200ms var(--ease-out);
  }
  .hero-scene img { width: 100%; height: 100%; object-fit: cover; }
  .hero-scene:nth-child(1) img { object-position: 58% center; }
  .hero-scene:nth-child(2) img { object-position: 56% center; }
  .hero-scene:nth-child(3) img { object-position: 61% center; }
  .hero-scene:nth-child(4) img { object-position: 58% center; }
  .hero-scene:nth-child(5) img { object-position: 53% center; }
  .hero-scene.is-active { opacity: 1; transform: scale(1); }
  .hero__wash {
    z-index: -3;
    background:
      linear-gradient(180deg, rgb(5 8 6 / .42) 0%, rgb(5 8 6 / .04) 21%, rgb(5 8 6 / .02) 42%, rgb(5 8 6 / .36) 70%, rgb(5 8 6 / .92) 100%),
      linear-gradient(90deg, rgb(4 7 5 / .42), transparent 72%);
    transition: background-color var(--slow) var(--ease);
  }
  .hero[data-theme="rust"] .hero__wash { background-color: rgb(102 35 22 / .12); }
  .hero[data-theme="sand"] .hero__wash { background-color: rgb(110 88 58 / .1); }
  .hero[data-theme="blue"] .hero__wash { background-color: rgb(16 39 65 / .18); }

  .hero__copy {
    position: absolute;
    z-index: 4;
    top: clamp(125px, 16.7svh, 160px);
    left: var(--gutter);
    width: calc(100% - var(--gutter) * 2);
    pointer-events: none;
  }
  .hero__overline {
    margin-bottom: 9px;
    font-family: var(--mono);
    font-size: 9px;
    line-height: 1;
    letter-spacing: .11em;
  }
  .hero h1 {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--white);
    font-family: var(--display);
    font-size: clamp(4rem, 18.8vw, 6.5rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -.045em;
    text-transform: uppercase;
    text-shadow: 0 4px 28px rgb(0 0 0 / .15);
  }
  .hero h1 span { display: block; width: 115%; white-space: nowrap; transform: scaleX(.88); transform-origin: left center; }
  .hero__summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: min(92%, 410px);
    margin-top: 17px;
    pointer-events: auto;
  }
  .hero__summary > p { font-size: 11px; line-height: 1.65; letter-spacing: .04em; }
  .text-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0 0 10px;
    border-bottom: 1px solid currentColor;
    background: transparent;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    gap: 16px;
  }
  .text-link i { font-size: 15px; font-style: normal; }

  .hero__rail-wrap {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: clamp(176px, 23svh, 218px);
    width: 100%;
  }
  .rail-head {
    display: flex;
    justify-content: space-between;
    padding: 0 var(--gutter) 8px;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .08em;
    opacity: .8;
  }
  .hero__rail {
    display: flex;
    align-items: flex-end;
    height: 168px;
    padding: 0 var(--gutter) 2px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 9px;
  }
  .hero__rail::-webkit-scrollbar { display: none; }
  .poster {
    position: relative;
    flex: 0 0 86px;
    height: 122px;
    padding: 0;
    overflow: hidden;
    scroll-snap-align: start;
    border: 1px solid rgb(255 255 255 / .42);
    border-radius: var(--poster-radius);
    background: #1e241f;
    transform-origin: bottom;
    transition: flex-basis 560ms var(--ease-out), height 560ms var(--ease-out), border-color var(--fast), transform var(--fast);
  }
  .poster img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.04); transition: transform 900ms var(--ease-out), filter var(--medium); }
  .poster__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .08), rgb(0 0 0 / .68)); }
  .poster b, .poster em { position: absolute; z-index: 2; left: 9px; color: #fff; }
  .poster b { top: 8px; font-family: var(--mono); font-size: 8px; font-weight: 400; }
  .poster em { bottom: 9px; font-family: var(--display); font-size: 14px; font-style: normal; line-height: .9; letter-spacing: -.01em; text-align: left; }
  .poster.is-active { flex-basis: 108px; height: 158px; border-color: var(--signal); }
  .poster.is-active img { transform: scale(1.04); filter: saturate(1) contrast(1.02); }
  .poster:active { transform: scale(.98); }

  .hero__footer {
    position: absolute;
    z-index: 6;
    right: var(--gutter);
    bottom: calc(21px + env(safe-area-inset-bottom));
    left: var(--gutter);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .hero__controls { display: flex; gap: 8px; }
  .hero__controls button {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / .6);
    border-radius: 50%;
    background: rgb(16 19 16 / .16);
    backdrop-filter: blur(8px);
    font-size: 17px;
    transition: background-color var(--fast), color var(--fast), transform var(--fast);
  }
  .hero__controls button:active { background: var(--signal); color: var(--ink); transform: scale(.94); }
  .hero__counter { grid-column: 2; display: flex; align-items: baseline; justify-self: end; min-width: 92px; gap: 5px; }
  .hero__counter strong { font-family: var(--display); font-size: 72px; font-weight: 900; line-height: .72; letter-spacing: -.055em; }
  .hero__counter span { font-family: var(--mono); font-size: 8px; }
  .hero__scroll { position: absolute; bottom: 0; left: 50%; display: flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--mono); font-size: 8px; letter-spacing: .09em; transform: translateX(-50%); }
  .hero__scroll i { position: relative; display: block; width: 1px; height: 38px; overflow: hidden; background: rgb(255 255 255 / .4); }
  .hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--signal); transform: translateY(-100%); animation: scroll-line 1.8s var(--ease) infinite; }

  .section-tag {
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid currentColor;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .08em;
  }

  .scene-index {
    position: relative;
    min-height: 100svh;
    padding: 68px var(--gutter) 70px;
    overflow: hidden;
    background: var(--signal);
    color: var(--ink);
  }
  .scene-index__top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ink);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .08em;
  }
  .scene-index h2 {
    display: flex;
    flex-direction: column;
    width: 118%;
    margin-top: clamp(46px, 7svh, 72px);
    font-family: var(--display);
    font-size: clamp(4.35rem, 20.6vw, 7.2rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -.055em;
  }
  .scene-index h2 span { display: block; width: 112%; transform: scaleX(.9); transform-origin: left center; }
  .scene-index h2 span:nth-child(3) { color: transparent; -webkit-text-stroke: 1px var(--ink); }
  .scene-index__intro { width: min(62%, 265px); margin: 34px 0 0 auto; font-size: 13px; line-height: 1.85; }
  .scene-index__rail {
    display: flex;
    align-items: flex-end;
    height: 242px;
    margin: clamp(62px, 9svh, 92px) calc(var(--gutter) * -1) 0;
    padding: 0 var(--gutter) 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 10px;
  }
  .scene-index__rail::-webkit-scrollbar { display: none; }
  .scene-ticket {
    position: relative;
    flex: 0 0 112px;
    height: 176px;
    overflow: hidden;
    scroll-snap-align: start;
    border: 1px solid rgb(16 19 16 / .44);
    border-radius: var(--poster-radius);
    background: var(--ink);
    color: var(--white);
    transition: flex-basis var(--medium) var(--ease), height var(--medium) var(--ease), transform var(--fast) var(--ease);
  }
  .scene-ticket--active { flex-basis: 142px; height: 226px; border: 2px solid var(--ink); }
  .scene-ticket img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.05); }
  .scene-ticket::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .04), rgb(0 0 0 / .74)); }
  .scene-ticket span, .scene-ticket strong, .scene-ticket em { position: absolute; z-index: 2; left: 10px; }
  .scene-ticket span { top: 9px; font-family: var(--mono); font-size: 8px; font-weight: 400; }
  .scene-ticket strong { bottom: 24px; font-family: var(--display); font-size: 18px; line-height: .85; letter-spacing: -.02em; }
  .scene-ticket em { bottom: 8px; font-family: var(--mono); font-size: 7px; font-style: normal; letter-spacing: .1em; }
  .scene-ticket:active { transform: scale(.98); }
  .scene-index__footer { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 42px; border-top: 2px solid var(--ink); padding-top: 13px; }
  .scene-index__footer span { font-family: var(--mono); font-size: 8px; letter-spacing: .09em; }
  .scene-index__footer strong { font-family: var(--display); font-size: 66px; line-height: .7; letter-spacing: -.05em; }

  .manifesto {
    position: relative;
    min-height: 118svh;
    padding: 74px var(--gutter) 60px;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
  }
  .manifesto__type { margin-top: clamp(58px, 9svh, 96px); }
  .manifesto h2 {
    display: flex;
    flex-direction: column;
    width: 112%;
    font-family: var(--display);
    font-size: clamp(4rem, 19.5vw, 6.8rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -.05em;
    text-transform: uppercase;
  }
  .manifesto h2 span { width: 112%; transform: scaleX(.9); transform-origin: left center; }
  .manifesto h2 span:nth-child(2) { margin-left: 25%; color: transparent; -webkit-text-stroke: 1px var(--ink); }
  .manifesto h2 span:nth-child(4) { color: var(--rust); }
  .manifesto__note {
    display: grid;
    grid-template-columns: .65fr 1.35fr;
    align-items: start;
    margin-top: clamp(62px, 11svh, 112px);
    gap: 24px;
  }
  .manifesto__note p:first-child { font-size: 12px; font-weight: 700; }
  .manifesto__note p:last-child { font-size: 14px; line-height: 1.9; }
  .manifesto__stamp {
    position: absolute;
    right: -34px;
    bottom: 48px;
    color: rgb(16 19 16 / .12);
    font-family: var(--display);
    font-size: 45px;
    letter-spacing: -.04em;
    transform: rotate(-90deg);
  }

  .chapters { background: var(--ink); }
  .chapters__header {
    min-height: 70svh;
    padding: 72px var(--gutter) 66px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--ink);
  }
  .chapters__header p { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
  .chapters__header h2 {
    font-size: clamp(2.8rem, 12.4vw, 4.4rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: 0;
  }
  .film-chapter {
    position: relative;
    min-height: 760px;
    height: 98svh;
    overflow: hidden;
    isolation: isolate;
    border-top: 1px solid rgb(255 255 255 / .12);
    background: #313832;
  }
  .film-chapter__image, .film-chapter__shade { position: absolute; inset: -5%; width: 110%; height: 110%; }
  .film-chapter__image {
    z-index: -3;
    object-fit: cover;
    transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.045);
    will-change: transform;
  }
  .film-chapter--wind .film-chapter__image { object-position: 58% center; }
  .film-chapter--tide .film-chapter__image { object-position: 56% center; }
  .film-chapter--rain .film-chapter__image { object-position: 60% center; }
  .film-chapter--plain .film-chapter__image { object-position: 57% center; }
  .film-chapter--blue .film-chapter__image { object-position: 56% center; }
  .film-chapter__shade {
    z-index: -2;
    background:
      linear-gradient(180deg, rgb(7 10 8 / .38) 0%, transparent 34%, rgb(7 10 8 / .12) 54%, rgb(7 10 8 / .88) 100%),
      linear-gradient(90deg, rgb(7 10 8 / .28), transparent 70%);
  }
  .film-chapter--rain .film-chapter__shade { background-color: rgb(103 31 23 / .13); }
  .film-chapter--blue .film-chapter__shade { background-color: rgb(16 39 70 / .18); }
  .film-chapter__top {
    position: absolute;
    z-index: 3;
    top: 0;
    right: var(--gutter);
    left: var(--gutter);
    display: flex;
    justify-content: space-between;
    padding-top: 24px;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .09em;
  }
  .film-chapter__body {
    position: absolute;
    z-index: 3;
    right: var(--gutter);
    bottom: clamp(48px, 7svh, 72px);
    left: var(--gutter);
  }
  .film-chapter__no {
    display: block;
    margin-bottom: 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
  }
  .film-chapter h3 {
    font-family: var(--display);
    font-size: clamp(3.9rem, 18.5vw, 6.5rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 4px 24px rgb(0 0 0 / .18);
  }
  .film-chapter h3 { width: 116%; transform: scaleX(.89); transform-origin: left bottom; }
  .film-chapter__body > p { margin-top: 15px; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
  .film-chapter__body > button {
    display: inline-flex;
    align-items: center;
    min-height: 50px;
    margin-top: 23px;
    padding: 0 18px 0 7px;
    border: 1px solid rgb(255 255 255 / .56);
    border-radius: 999px;
    background: rgb(16 19 16 / .16);
    backdrop-filter: blur(10px);
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .1em;
    gap: 11px;
  }
  .film-chapter__body > button i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--signal); color: var(--ink); font-size: 10px; font-style: normal; }

  .soundscape {
    position: relative;
    min-height: 880px;
    height: 118svh;
    overflow: hidden;
    isolation: isolate;
    background: var(--blue);
  }
  .soundscape__image, .soundscape__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
  .soundscape__image { z-index: -3; object-fit: cover; object-position: 55% center; transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.055); will-change: transform; }
  .soundscape__shade {
    z-index: -2;
    background:
      linear-gradient(180deg, rgb(7 10 8 / .58) 0%, rgb(7 10 8 / .16) 37%, rgb(7 10 8 / .58) 70%, rgb(7 10 8 / .96) 100%),
      linear-gradient(90deg, rgb(7 10 8 / .42), transparent 76%);
  }
  .soundscape__top, .author-note__top {
    position: absolute;
    z-index: 4;
    top: 0;
    right: var(--gutter);
    left: var(--gutter);
    display: flex;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 2px solid var(--signal);
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .09em;
  }
  .soundscape__copy { position: absolute; z-index: 4; top: clamp(110px, 14svh, 150px); right: var(--gutter); left: var(--gutter); }
  .soundscape__copy > p:first-child { margin-bottom: 14px; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
  .soundscape h2 {
    display: flex;
    flex-direction: column;
    width: 116%;
    font-family: var(--display);
    font-size: clamp(4.1rem, 19.2vw, 6.8rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -.055em;
  }
  .soundscape h2 span { width: 112%; transform: scaleX(.9); transform-origin: left center; }
  .soundscape h2 span:nth-child(2) { color: var(--signal); }
  .soundscape__copy > p:last-child { width: min(66%, 300px); margin: 28px 0 0 auto; font-size: 13px; line-height: 1.85; color: rgb(248 248 242 / .78); }
  .soundscape__wave { position: absolute; z-index: 4; top: 56%; right: var(--gutter); left: var(--gutter); display: flex; align-items: center; height: 70px; gap: 6px; }
  .soundscape__wave::before { content: "LIVE / ROOM TONE"; position: absolute; top: -18px; left: 0; font-family: var(--mono); font-size: 7px; letter-spacing: .1em; }
  .soundscape__wave i { flex: 1; height: var(--wave-h, 20%); background: var(--signal); transform-origin: center; }
  .soundscape__wave i:nth-child(2n) { --wave-h: 72%; --wave-duration: 3.6s; --wave-phase: -1.2s; }
  .soundscape__wave i:nth-child(3n) { --wave-h: 38%; --wave-duration: 4.1s; --wave-phase: -.5s; }
  .soundscape__wave i:nth-child(4n) { --wave-h: 92%; --wave-duration: 3.2s; --wave-phase: -2s; }
  .soundscape__wave i:nth-child(5n) { --wave-duration: 4.4s; --wave-phase: -2.7s; }
  .soundscape__frames { position: absolute; z-index: 4; right: var(--gutter); bottom: 52px; left: var(--gutter); display: flex; align-items: flex-end; height: 190px; gap: 10px; }
  .soundscape__frames figure { width: 29%; height: 142px; overflow: hidden; border: 1px solid rgb(255 255 255 / .42); border-radius: var(--poster-radius); }
  .soundscape__frames figure:nth-child(2) { width: 36%; height: 184px; border-color: var(--signal); }
  .soundscape__frames img { width: 100%; height: 100%; object-fit: cover; }
  .soundscape__no, .author-note__no {
    position: absolute;
    z-index: 4;
    right: var(--gutter);
    bottom: 47px;
    font-family: var(--display);
    font-size: 70px;
    line-height: .7;
    letter-spacing: -.055em;
  }
  .soundscape__no { display: none; }

  .field-notes {
    background: var(--signal);
    color: var(--ink);
  }
  .marquee {
    overflow: hidden;
    border-bottom: 1px solid var(--line-dark);
    border-top: 1px solid var(--line-dark);
  }
  .marquee div { display: flex; width: max-content; animation: marquee 14s linear infinite; }
  .marquee span {
    display: block;
    padding: 10px 0;
    font-family: var(--display);
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.025em;
    white-space: nowrap;
  }
  .field-notes__inner { padding: 68px var(--gutter) 120px; }
  .field-notes h2 {
    margin-top: 62px;
    font-size: clamp(3.15rem, 15.2vw, 5.2rem);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.07em;
  }
  .field-notes h2 em { font-style: normal; color: transparent; -webkit-text-stroke: 1px var(--ink); }
  .field-notes__grid { margin-top: 80px; border-top: 1px solid var(--ink); }
  .field-notes__grid article { display: grid; grid-template-columns: .72fr 1.28fr; padding: 28px 0 30px; border-bottom: 1px solid var(--ink); column-gap: 20px; }
  .field-notes__grid article > span { grid-column: 1; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
  .field-notes__grid h3 { grid-column: 2; font-size: 24px; font-weight: 800; line-height: 1; }
  .field-notes__grid p { grid-column: 2; margin-top: 18px; font-size: 13px; line-height: 1.85; }

  .process-reel {
    position: relative;
    padding: 72px var(--gutter) 54px;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
  }
  .process-reel h2 {
    display: flex;
    flex-direction: column;
    width: 116%;
    margin-top: 58px;
    font-family: var(--display);
    font-size: clamp(4.15rem, 19.7vw, 6.9rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -.055em;
  }
  .process-reel h2 span { width: 112%; transform: scaleX(.9); transform-origin: left center; }
  .process-reel h2 span:nth-child(2) { margin-left: 22%; color: transparent; -webkit-text-stroke: 1px var(--ink); }
  .process-reel h2 span:nth-child(3) { color: var(--rust); }
  .process-reel__cards { display: grid; margin-top: 82px; border-top: 1px solid var(--ink); }
  .process-reel__cards article { min-height: 720px; padding: 30px 0 52px; border-bottom: 1px solid var(--ink); }
  .process-reel__cards figure { width: 74%; height: 390px; overflow: hidden; border-radius: var(--poster-radius); background: var(--ink-soft); }
  .process-reel__cards article:nth-child(even) figure { margin-left: auto; }
  .process-reel__cards img { width: 100%; height: 100%; object-fit: cover; }
  .process-reel__cards article:nth-child(1) img { object-position: 60% center; }
  .process-reel__cards article:nth-child(2) img { object-position: 60% center; }
  .process-reel__cards article:nth-child(3) img { object-position: 55% center; }
  .process-reel__cards article > div { display: grid; grid-template-columns: .66fr 1.34fr; margin-top: 30px; gap: 18px; }
  .process-reel__cards span { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
  .process-reel__cards h3 { font-size: 26px; line-height: 1.22; letter-spacing: -.05em; }
  .process-reel__cards p { grid-column: 2; margin-top: 18px; font-size: 13px; line-height: 1.85; }
  .process-reel__footer { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 18px; }
  .process-reel__footer span { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
  .process-reel__footer strong { font-family: var(--display); font-size: 68px; line-height: .72; letter-spacing: -.05em; }

  .author-note {
    position: relative;
    min-height: 820px;
    height: 112svh;
    overflow: hidden;
    isolation: isolate;
    background: var(--blue);
  }
  .author-note > img, .author-note__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
  .author-note > img { z-index: -3; object-fit: cover; object-position: 57% center; transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.06); will-change: transform; }
  .author-note__shade { z-index: -2; background: linear-gradient(180deg, rgb(7 10 8 / .48), rgb(7 10 8 / .06) 34%, rgb(7 10 8 / .4) 70%, rgb(7 10 8 / .94)); }
  .author-note__copy { position: absolute; z-index: 4; top: clamp(126px, 17svh, 170px); right: var(--gutter); left: var(--gutter); }
  .author-note h2 {
    display: flex;
    flex-direction: column;
    width: 120%;
    font-family: var(--display);
    font-size: clamp(3.75rem, 17.8vw, 6.25rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -.055em;
  }
  .author-note h2 span { width: 112%; transform: scaleX(.9); transform-origin: left center; }
  .author-note h2 span:nth-child(2), .author-note h2 span:nth-child(4) { color: var(--signal); }
  .author-note__copy p { width: min(64%, 280px); margin: 36px 0 0 auto; font-size: 14px; line-height: 1.9; }

  .contact-sheet {
    position: relative;
    min-height: 118svh;
    padding: 54px var(--gutter) calc(60px + env(safe-area-inset-bottom));
    overflow: hidden;
    background: var(--ink);
    color: var(--white);
  }
  .contact-sheet__frames {
    position: relative;
    height: 36svh;
    min-height: 250px;
    margin: 0 calc(var(--gutter) * -1);
    perspective: 900px;
    transform: translate3d(var(--contact-pointer-x, 0), var(--contact-pointer-y, 0), 0);
  }
  .contact-sheet__frames figure {
    position: absolute;
    top: 3px;
    left: 4%;
    width: 42%;
    height: 78%;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / .22);
    transform-origin: center;
    transform-style: preserve-3d;
    will-change: transform, opacity;
  }
  .contact-sheet__frames figure:nth-child(1) { --contact-loop-delay: 0s; }
  .contact-sheet__frames figure:nth-child(2) { --contact-loop-delay: -8s; }
  .contact-sheet__frames figure:nth-child(3) { --contact-loop-delay: -4s; }
  .contact-sheet__frames img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.72) contrast(1.05);
    transform: translate3d(var(--contact-crop-x, 0%), var(--contact-crop-y, 0%), 0);
    transform-origin: center;
    will-change: transform, scale;
  }
  .contact-sheet__meta { margin-top: 22px; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
  .contact-sheet h2 {
    display: flex;
    flex-direction: column;
    margin-top: 25px;
    font-family: var(--display);
    font-size: clamp(4rem, 19.2vw, 6.7rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -.045em;
  }
  .contact-sheet h2 span { width: 113%; transform: scaleX(.9); transform-origin: left center; }
  .contact-sheet h2 span:nth-child(2) { color: var(--signal); }
  .contact-sheet__bottom { display: grid; grid-template-columns: 1fr 132px; align-items: end; margin-top: clamp(54px, 9svh, 88px); gap: 26px; }
  .contact-sheet__bottom > p { max-width: 240px; font-size: 13px; line-height: 1.8; color: rgb(248 248 242 / .72); }
  .contact-orbit {
    position: relative;
    display: grid;
    place-items: center;
    width: 132px;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--signal);
    border-radius: 50%;
    background: transparent;
    color: var(--signal);
    transition: background-color var(--medium) var(--ease), color var(--medium) var(--ease), transform var(--fast);
  }
  .contact-orbit span { font-size: 15px; font-weight: 800; line-height: 1.3; }
  .contact-orbit i { position: absolute; top: 24px; right: 27px; font-style: normal; }
  .contact-orbit:active { background: var(--signal); color: var(--ink); transform: scale(.96); }

  .footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 210px;
    padding: 44px var(--gutter) calc(38px + env(safe-area-inset-bottom));
    background: var(--bone);
    color: var(--ink);
  }
  .footer > div { display: flex; flex-direction: column; justify-content: space-between; }
  .footer > div:last-child { text-align: right; }
  .footer strong { font-size: 28px; letter-spacing: .08em; }
  .footer span { font-family: var(--mono); font-size: 8px; line-height: 1.6; letter-spacing: .08em; }
}

@layer components {
  dialog { margin: auto; padding: 0; border: 0; color: inherit; }
  dialog::backdrop { background: rgb(2 4 2 / .72); backdrop-filter: blur(6px); }
  .menu-panel {
    width: min(100%, var(--shell));
    max-width: none;
    height: 100dvh;
    max-height: none;
    padding: calc(24px + env(safe-area-inset-top)) var(--gutter) calc(28px + env(safe-area-inset-bottom));
    background: var(--signal);
    color: var(--ink);
  }
  .menu-panel[open] { animation: panel-in 520ms var(--ease-out) both; }
  .menu-panel__top { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 9px; letter-spacing: .09em; }
  .menu-panel__top button, .enquiry-form__top button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
  }
  .menu-panel nav { margin-top: 13svh; border-top: 1px solid var(--ink); }
  .menu-panel nav a { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; min-height: 82px; border-bottom: 1px solid var(--ink); }
  .menu-panel nav span, .menu-panel nav em { font-family: var(--mono); font-size: 8px; font-style: normal; letter-spacing: .08em; }
  .menu-panel nav strong { font-size: 31px; line-height: 1; letter-spacing: -.04em; }
  .menu-panel__foot { position: absolute; bottom: calc(32px + env(safe-area-inset-bottom)); font-family: var(--display); font-size: 42px; line-height: .8; letter-spacing: -.03em; }

  .film-modal {
    width: min(100%, var(--shell));
    max-width: none;
    height: 100dvh;
    max-height: none;
    overflow: hidden;
    background: #030403;
    color: var(--white);
  }
  .film-modal[open] { animation: modal-fade 420ms var(--ease) both; }
  .film-modal__screen { position: relative; width: 100%; height: 100%; overflow: hidden; background: #030403; }
  .film-modal__screen > video,
  .film-modal__transition-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .film-modal__screen > video { z-index: 1; opacity: 0; }
  .film-modal__transition-frame {
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transform-origin: top left;
    will-change: transform, opacity;
  }
  .film-modal__shade { position: absolute; z-index: 3; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .22), transparent 50%, rgb(0 0 0 / .86)); }
  .film-modal__close { position: absolute; z-index: 5; top: calc(22px + env(safe-area-inset-top)); right: var(--gutter); display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgb(255 255 255 / .6); border-radius: 50%; background: rgb(0 0 0 / .2); color: var(--white); backdrop-filter: blur(8px); font-size: 26px; }
  .film-modal__ui { position: absolute; z-index: 4; right: var(--gutter); bottom: calc(34px + env(safe-area-inset-bottom)); left: var(--gutter); }
  .film-modal__ui > p { font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
  .film-modal__ui h2 { max-width: 90%; margin-top: 12px; font-family: var(--display); font-size: clamp(3.6rem, 17vw, 6rem); line-height: .8; letter-spacing: -.04em; }
  .film-modal__status { min-height: 14px; margin-top: 10px; color: rgb(255 255 255 / .72); }
  .film-player__controls {
    display: grid;
    grid-template-columns: 44px auto minmax(0, 1fr) 44px;
    align-items: center;
    margin-top: 20px;
    gap: 10px;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .08em;
  }
  .film-player__controls button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / .52);
    border-radius: 50%;
    background: rgb(0 0 0 / .22);
    color: var(--white);
    font-family: inherit;
    font-size: 9px;
  }
  .film-player__controls input { width: 100%; accent-color: var(--signal); }

  .enquiry-panel {
    width: min(100%, var(--shell));
    max-width: none;
    height: 100dvh;
    max-height: none;
    overflow-y: auto;
    background: var(--bone);
    color: var(--ink);
  }
  .enquiry-panel[open] { animation: panel-in 520ms var(--ease-out) both; }
  .enquiry-form { min-height: 100%; padding: calc(28px + env(safe-area-inset-top)) var(--gutter) calc(36px + env(safe-area-inset-bottom)); }
  .enquiry-form__top { display: flex; align-items: flex-start; justify-content: space-between; }
  .enquiry-form__top p { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
  .enquiry-form__top h2 { margin-top: 7px; font-size: clamp(2.8rem, 13vw, 4.5rem); line-height: 1; letter-spacing: -.06em; }
  .enquiry-form__intro { max-width: 310px; margin: 7svh 0 5svh; font-size: 13px; line-height: 1.8; }
  .enquiry-form label { display: block; padding: 20px 0 10px; border-top: 1px solid var(--ink); }
  .enquiry-form label > span { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 700; }
  .enquiry-form input, .enquiry-form textarea { width: 100%; padding: 8px 0; border: 0; border-radius: 0; outline: 0; background: transparent; color: var(--ink); font-size: 17px; resize: vertical; }
  .enquiry-form input::placeholder, .enquiry-form textarea::placeholder { color: rgb(16 19 16 / .42); }
  .enquiry-form__submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 60px; margin-top: 22px; padding: 0 20px; background: var(--ink); color: var(--white); font-weight: 700; }
  .enquiry-form__submit i { font-size: 20px; font-style: normal; }
  .enquiry-form__status { min-height: 22px; margin-top: 12px; font-size: 11px; }
}

@layer motion {
  [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 720ms var(--ease), transform 820ms var(--ease-out); }
  [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
  .scene-ticket:nth-child(2) { transition-delay: 50ms; }
  .scene-ticket:nth-child(3) { transition-delay: 100ms; }
  .scene-ticket:nth-child(4) { transition-delay: 150ms; }
  .scene-ticket:nth-child(5) { transition-delay: 200ms; }
  .is-loading .brand,
  .is-loading .header__meta,
  .is-loading .menu-button,
  .is-loading .hero__overline,
  .is-loading .hero h1 span,
  .is-loading .hero__summary,
  .is-loading .rail-head,
  .is-loading .poster,
  .is-loading .hero__controls,
  .is-loading .hero__counter,
  .is-loading .hero__scroll,
  .is-loading .hero::after { opacity: 0; }

  .header__meta { --motion-opacity: .76; }
  .rail-head { --motion-opacity: .8; }
  .is-ready .brand,
  .is-ready .header__meta,
  .is-ready .menu-button { animation: veil-fade 700ms 60ms var(--ease-out) backwards; }
  .is-ready .hero__overline { animation: curtain-rise 620ms 150ms var(--ease-out) backwards; }
  .is-ready .hero h1 span:first-child { animation: curtain-rise 820ms 220ms var(--ease-out) backwards; }
  .is-ready .hero h1 span:last-child { animation: curtain-rise 820ms 290ms var(--ease-out) backwards; }
  .is-ready .hero__summary { animation: curtain-rise 680ms 410ms var(--ease-out) backwards; }
  .is-ready .rail-head { animation: veil-fade 620ms 510ms var(--ease-out) backwards; }
  .is-ready .poster { animation: poster-rise 860ms var(--poster-delay, 560ms) var(--ease-out) backwards; }
  .is-ready .poster:nth-child(1) { --poster-delay: 560ms; }
  .is-ready .poster:nth-child(2) { --poster-delay: 620ms; }
  .is-ready .poster:nth-child(3) { --poster-delay: 680ms; }
  .is-ready .poster:nth-child(4) { --poster-delay: 740ms; }
  .is-ready .poster:nth-child(5) { --poster-delay: 800ms; }
  .is-ready .hero__controls { animation: veil-fade 600ms 980ms var(--ease-out) backwards; }
  .is-ready .hero__counter { animation: counter-rise 720ms 1040ms var(--ease-out) backwards; }
  .is-ready .hero__scroll { animation: veil-fade 620ms 1100ms var(--ease-out) backwards; }
  .is-ready .hero::after {
    transform-origin: left center;
    animation: line-draw 900ms 900ms var(--ease-out) backwards;
  }

  .hero__copy.is-changing .hero__overline,
  .hero__copy.is-changing h1 span:first-child,
  .hero__copy.is-changing h1 span:last-child,
  .hero__copy.is-changing .hero__summary { animation: copy-curtain 680ms var(--ease-out) backwards; }
  .hero__copy.is-changing h1 span:first-child { animation-delay: 40ms; }
  .hero__copy.is-changing h1 span:last-child { animation-delay: 90ms; }
  .hero__copy.is-changing .hero__summary { animation-delay: 150ms; }
  .hero.is-switching .hero-scene.is-active img { animation: scene-settle 880ms var(--ease-out) backwards; }
  .hero.is-switching .hero__counter { animation: counter-switch 620ms var(--ease-out) backwards; }

  .film-modal.is-opening .film-modal__transition-frame {
    opacity: 1;
    animation: film-player-match-open 900ms cubic-bezier(.16, 1, .3, 1) both;
  }
  .film-modal.is-opening .film-modal__shade,
  .film-modal.is-opening .film-modal__close,
  .film-modal.is-opening .film-modal__ui { opacity: 0; }
  .film-modal.is-playing .film-modal__screen > video,
  .film-modal.is-open .film-modal__screen > video { opacity: 1; }
  .film-modal.is-playing .film-modal__transition-frame { opacity: 0; }
  .film-modal.is-playing .film-modal__screen > video,
  .film-modal.is-playing .film-modal__transition-frame,
  .film-modal.is-playing .film-modal__shade,
  .film-modal.is-playing .film-modal__close,
  .film-modal.is-playing .film-modal__ui { transition: opacity 280ms var(--ease-out); }
  .film-modal.is-closing .film-modal__transition-frame {
    opacity: 1;
    animation: film-player-match-close 620ms cubic-bezier(.65, 0, .35, 1) both;
  }
  .film-modal.is-closing .film-modal__shade,
  .film-modal.is-closing .film-modal__close,
  .film-modal.is-closing .film-modal__ui { opacity: 0; transition: opacity 180ms var(--ease); }

  @keyframes film-player-match-open {
    from {
      transform: translate3d(var(--source-offset-x), var(--source-offset-y), 0) scale(var(--source-scale-x), var(--source-scale-y));
    }
    to { transform: translate3d(0, 0, 0) scale(1); }
  }
  @keyframes film-player-match-close {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to {
      transform: translate3d(var(--source-offset-x), var(--source-offset-y), 0) scale(var(--source-scale-x), var(--source-scale-y));
    }
  }

  @keyframes curtain-rise {
    from { opacity: 0; translate: 0 42px; clip-path: inset(100% 0 0); }
    to { opacity: 1; translate: 0 0; clip-path: inset(0); }
  }
  @keyframes poster-rise {
    from { opacity: 0; transform: perspective(620px) translate3d(0, 64px, 0) rotateX(-12deg); }
    to { opacity: 1; transform: perspective(620px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift)); }
  }
  @keyframes veil-fade {
    from { opacity: 0; translate: 0 14px; }
    to { opacity: var(--motion-opacity, 1); translate: 0 0; }
  }
  @keyframes counter-rise {
    from { opacity: 0; translate: 0 30px; scale: .92; }
    to { opacity: 1; translate: 0 0; scale: 1; }
  }
  @keyframes line-draw {
    from { opacity: 0; transform: scaleX(0); }
    to { opacity: 1; transform: scaleX(1); }
  }
  @keyframes copy-curtain {
    from { opacity: 0; translate: 0 24px; clip-path: inset(100% 0 0); }
    to { opacity: 1; translate: 0 0; clip-path: inset(0); }
  }
  @keyframes scene-settle {
    from { scale: 1.035; }
    to { scale: 1; }
  }
  @keyframes counter-switch {
    from { opacity: .2; translate: 0 16px; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes scroll-line { 0% { transform: translateY(-100%); } 45%, 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }
  @keyframes marquee { to { transform: translateX(-50%); } }
  @keyframes room-tone { from { transform: scaleY(.48); opacity: .62; } to { transform: scaleY(1); opacity: 1; } }
  @keyframes panel-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @keyframes modal-fade { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: scale(1); } }
}

@layer responsive {
  @media (max-height: 735px) {
    .hero__copy { top: 112px; }
    .hero h1 { font-size: clamp(3.7rem, 18.3vw, 5.5rem); }
    .hero__summary { margin-top: 11px; }
    .hero__rail-wrap { bottom: 158px; }
    .hero__rail { height: 152px; }
    .poster { flex-basis: 80px; height: 112px; }
    .poster.is-active { flex-basis: 99px; height: 145px; }
    .hero__footer { bottom: calc(15px + env(safe-area-inset-bottom)); }
    .hero__counter strong { font-size: 58px; }
    .scene-index { min-height: 930px; }
    .soundscape { min-height: 900px; }
    .author-note { min-height: 840px; }
    .menu-panel nav { margin-top: 7svh; }
    .menu-panel nav a { min-height: 68px; }
    .menu-panel__foot { font-size: 34px; }
  }
  @media (max-width: 340px) {
    :root { --gutter: 17px; }
    .header__meta { display: none; }
    .site-header { grid-template-columns: 1fr auto; }
    .hero__overline { font-size: 8px; }
    .hero__summary > p { font-size: 10px; }
    .text-link { gap: 10px; }
    .poster { flex-basis: 78px; }
    .poster.is-active { flex-basis: 96px; }
    .hero__controls button { width: 40px; height: 40px; }
    .hero__scroll { display: none; }
    .scene-ticket { flex-basis: 100px; }
    .scene-ticket--active { flex-basis: 128px; }
    .manifesto__note { grid-template-columns: 1fr; }
    .manifesto__note p:last-child { margin-left: 22%; }
    .contact-sheet__bottom { grid-template-columns: 1fr 116px; }
    .contact-orbit { width: 116px; }
  }
  @media (hover: hover) {
    .menu-button:hover, .hero__controls button:hover { background: var(--signal); color: var(--ink); border-color: var(--signal); }
    .poster:hover img { transform: scale(1.06); }
    .scene-ticket:hover img { transform: scale(1.055); }
    .text-link:hover i { transform: translate(2px, -2px); }
    .contact-orbit:hover { background: var(--signal); color: var(--ink); transform: rotate(-5deg); }
    .menu-panel nav a:hover strong { transform: translateX(8px); }
    .menu-panel nav strong, .text-link i { transition: transform var(--medium) var(--ease-out); }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .film-modal__transition-frame { display: none; }
    .film-modal.is-open .film-modal__shade,
    .film-modal.is-open .film-modal__close,
    .film-modal.is-open .film-modal__ui { opacity: 1; }
    [data-reveal] { opacity: 1; transform: none; }
    .film-chapter__image { transform: scale(1.045); }
    .soundscape__wave i { animation: none; }
  }
}

/* FIELD NOTES / APERTURE ENTRANCE */
@layer components {
  .field-notes__inner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .field-notes__inner > :not(.field-notes__aperture) {
    position: relative;
    z-index: 1;
  }

  .field-notes__aperture {
    position: absolute;
    z-index: 4;
    top: 28%;
    left: 50%;
    width: clamp(96px, 18vw, 160px);
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 0 0 0 120vmax var(--ink);
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0) scale(1);
    transform-origin: center;
  }

  .field-notes h2 > span,
  .field-notes h2 > em {
    display: block;
  }

  .field-notes__grid,
  .field-notes__grid article {
    position: relative;
    border-color: transparent;
  }

  .field-notes__grid::before,
  .field-notes__grid article::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--ink);
    transform-origin: left center;
  }

  .field-notes__grid::before { top: 0; }
  .field-notes__grid article::after { bottom: 0; }
}

@layer motion {
  .field-notes[data-field-notes-state="idle"] [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: none;
  }

  .field-notes[data-field-notes-state="idle"] .field-notes__grid::before,
  .field-notes[data-field-notes-state="idle"] .field-notes__grid article::after {
    transform: scaleX(0);
  }

  .field-notes[data-field-notes-state="entering"] [data-reveal],
  .field-notes[data-field-notes-state="settled"] [data-reveal],
  .field-notes[data-field-notes-state="static"] [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .field-notes[data-field-notes-state="entering"] .field-notes__aperture {
    will-change: transform, opacity;
    animation: field-aperture-retreat 920ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .field-notes[data-field-notes-state="settled"] .field-notes__aperture,
  .field-notes[data-field-notes-state="static"] .field-notes__aperture {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(20);
  }

  .field-notes[data-field-notes-state="entering"] .section-tag {
    animation: field-meta-resolve 520ms 120ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .field-notes[data-field-notes-state="entering"] h2 > span,
  .field-notes[data-field-notes-state="entering"] h2 > em {
    will-change: transform, opacity, clip-path;
    animation: field-title-resolve 720ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .field-notes[data-field-notes-state="entering"] h2 > span:nth-child(1) { animation-delay: 180ms; }
  .field-notes[data-field-notes-state="entering"] h2 > span:nth-child(2) { animation-delay: 280ms; }
  .field-notes[data-field-notes-state="entering"] h2 > em { animation-delay: 380ms; }

  .field-notes[data-field-notes-state="entering"] .field-notes__grid::before,
  .field-notes[data-field-notes-state="entering"] .field-notes__grid article::after {
    animation: field-rule-draw 680ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .field-notes[data-field-notes-state="entering"] .field-notes__grid::before { animation-delay: 620ms; }
  .field-notes[data-field-notes-state="entering"] .field-notes__grid article:nth-child(1)::after { animation-delay: 780ms; }
  .field-notes[data-field-notes-state="entering"] .field-notes__grid article:nth-child(2)::after { animation-delay: 940ms; }
  .field-notes[data-field-notes-state="entering"] .field-notes__grid article:nth-child(3)::after { animation-delay: 1100ms; }

  .field-notes__grid article:nth-child(1) { --field-row-delay: 820ms; }
  .field-notes__grid article:nth-child(2) { --field-row-delay: 980ms; }
  .field-notes__grid article:nth-child(3) { --field-row-delay: 1140ms; }

  .field-notes[data-field-notes-state="entering"] .field-notes__grid article > span,
  .field-notes[data-field-notes-state="entering"] .field-notes__grid article h3,
  .field-notes[data-field-notes-state="entering"] .field-notes__grid article p {
    will-change: transform, opacity;
    animation: field-method-resolve 520ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .field-notes[data-field-notes-state="entering"] .field-notes__grid article > span {
    animation-delay: var(--field-row-delay);
  }

  .field-notes[data-field-notes-state="entering"] .field-notes__grid article h3 {
    animation-delay: calc(var(--field-row-delay) + 60ms);
  }

  .field-notes[data-field-notes-state="entering"] .field-notes__grid article p {
    animation-delay: calc(var(--field-row-delay) + 130ms);
  }

  @keyframes field-aperture-retreat {
    0%, 24% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
    52% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(3); }
    82% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(9); }
    100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(20); }
  }

  @keyframes field-meta-resolve {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes field-title-resolve {
    from { opacity: 0; transform: translateY(34px); clip-path: inset(100% 0 0); }
    to { opacity: 1; transform: translateY(0); clip-path: inset(0); }
  }

  @keyframes field-rule-draw {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  @keyframes field-method-resolve {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@layer responsive {
  @media (prefers-reduced-motion: reduce) {
    .field-notes[data-field-notes-state] .field-notes__aperture { display: none; }

    .field-notes[data-field-notes-state] [data-reveal],
    .field-notes[data-field-notes-state] h2 > span,
    .field-notes[data-field-notes-state] h2 > em,
    .field-notes[data-field-notes-state] .field-notes__grid::before,
    .field-notes[data-field-notes-state] .field-notes__grid article::after,
    .field-notes[data-field-notes-state] .field-notes__grid article > span,
    .field-notes[data-field-notes-state] .field-notes__grid h3,
    .field-notes[data-field-notes-state] .field-notes__grid p {
      opacity: 1;
      transform: none;
      clip-path: none;
      animation: none;
      transition: none;
    }
  }
}

/* Final browser-note tuning: these stay last so earlier art-direction blocks cannot override them. */
.film-reel { height: 600svh; }

.soundscape__wave {
  top: auto;
  bottom: 10%;
  height: 84px;
  gap: 8px;
}

.soundscape__wave i {
  max-height: 78px;
  min-height: 4px;
  border-radius: 2px;
}

.process-reel__cards figure {
  width: min(82%, 520px);
  aspect-ratio: 4 / 3;
  height: auto;
}

.author-note__facts {
  width: min(78%, 680px);
  margin-top: clamp(64px, 9svh, 94px);
  padding-top: 24px;
  gap: 22px;
}

.contact-sheet h2 {
  max-width: 760px;
  font-size: clamp(2.75rem, 8.8vw, 4.4rem);
}

.contact-sheet h2 span {
  display: block;
  width: 100%;
  white-space: nowrap;
}

.footer {
  min-height: 132px;
  padding-top: 22px;
  padding-bottom: 22px;
}

.footer > div {
  justify-content: flex-start;
  gap: 16px;
}

@media (min-width: 720px) {
  .process-reel__cards figure { width: min(68%, 620px); }
  .author-note__facts { width: min(86%, 780px); gap: 42px; }
}

@media (max-width: 560px) {
  .author-note__facts { width: 88%; gap: 14px; }
}

@layer motion {
  .has-js .soundscape[data-sound-state="idle"] .soundscape__top,
  .has-js .soundscape[data-sound-state="idle"] .soundscape__copy,
  .has-js .soundscape[data-sound-state="idle"] .soundscape__wave,
  .has-js .soundscape[data-sound-state="idle"] .soundscape__frames {
    opacity: 0;
  }

  .soundscape[data-sound-state="entering"] .soundscape__top {
    animation: sound-meta-in 520ms var(--ease-out) both;
  }

  .soundscape[data-sound-state="entering"] .soundscape__copy > p:first-child {
    animation: sound-copy-in 620ms 180ms var(--ease-out) both;
  }

  .soundscape[data-sound-state="entering"] h2 span {
    will-change: transform, opacity;
    animation: sound-title-in 860ms var(--ease-out) both;
  }

  .soundscape[data-sound-state="entering"] h2 span:nth-child(1) { animation-delay: 120ms; }
  .soundscape[data-sound-state="entering"] h2 span:nth-child(2) { animation-delay: 220ms; }
  .soundscape[data-sound-state="entering"] h2 span:nth-child(3) { animation-delay: 320ms; }

  .soundscape[data-sound-state="entering"] .soundscape__copy > p:last-child {
    animation: sound-copy-in 700ms 420ms var(--ease-out) both;
  }

  .soundscape[data-sound-state="entering"] .soundscape__wave {
    animation: sound-wave-in 700ms 560ms var(--ease-out) both;
  }

  .soundscape[data-sound-state="entering"] .soundscape__wave i {
    will-change: transform, opacity;
    animation: sound-wave-wake 700ms var(--ease-out) both;
    animation-delay: calc(600ms + var(--sound-bar-delay, 0ms));
  }

  .soundscape[data-sound-state="entering"] .soundscape__frames figure {
    will-change: transform, opacity;
    animation: sound-frame-in 730ms var(--ease-out) both;
  }

  .soundscape[data-sound-state="entering"] .soundscape__frames figure:nth-child(1) { animation-delay: 820ms; }
  .soundscape[data-sound-state="entering"] .soundscape__frames figure:nth-child(2) { animation-delay: 720ms; }
  .soundscape[data-sound-state="entering"] .soundscape__frames figure:nth-child(3) { animation-delay: 900ms; }

  .soundscape:is([data-sound-state="settled"], [data-sound-state="offscreen"]) .soundscape__image {
    animation: sound-image-breathe 12s ease-in-out infinite alternate;
  }

  .soundscape:is([data-sound-state="settled"], [data-sound-state="offscreen"]) .soundscape__wave i {
    will-change: transform, opacity;
    animation: sound-wave-breathe var(--wave-duration, 3.8s) ease-in-out var(--wave-phase, 0s) infinite alternate;
  }

  .soundscape:is([data-sound-state="settled"], [data-sound-state="offscreen"]) .soundscape__frames figure {
    will-change: transform;
    animation: sound-frame-drift 11s ease-in-out infinite alternate;
  }

  .soundscape:is([data-sound-state="settled"], [data-sound-state="offscreen"]) .soundscape__frames figure:nth-child(2) {
    animation-duration: 13s;
    animation-delay: -4s;
  }

  .soundscape:is([data-sound-state="settled"], [data-sound-state="offscreen"]) .soundscape__frames figure:nth-child(3) {
    animation-duration: 9s;
    animation-delay: -6s;
    animation-direction: alternate-reverse;
  }

  .soundscape[data-sound-state="offscreen"] .soundscape__image,
  .soundscape[data-sound-state="offscreen"] .soundscape__wave i,
  .soundscape[data-sound-state="offscreen"] .soundscape__frames figure {
    animation-play-state: paused;
  }

  .soundscape.is-sound-paused,
  .soundscape.is-sound-paused * {
    animation-play-state: paused !important;
  }

  @keyframes sound-meta-in {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes sound-title-in {
    from { opacity: 0; transform: translateY(42px) scaleX(.9) scaleY(.88); }
    to { opacity: 1; transform: translateY(0) scaleX(.9) scaleY(1); }
  }

  @keyframes sound-copy-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes sound-wave-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes sound-wave-wake {
    from { opacity: .24; transform: scaleY(.08); }
    to { opacity: 1; transform: scaleY(.82); }
  }

  @keyframes sound-frame-in {
    from { opacity: 0; transform: translateY(46px) scale(.97); }
    to { opacity: 1; transform: none; }
  }

  @keyframes sound-wave-breathe {
    from { opacity: .58; transform: scaleY(.18); }
    to { opacity: 1; transform: scaleY(1.16); }
  }

  @keyframes sound-frame-drift {
    from { transform: translate3d(-4px, 0, 0); }
    to { transform: translate3d(4px, -2px, 0); }
  }

  @keyframes sound-image-breathe {
    from { transform: translate3d(-4px, var(--parallax-y, 0px), 0) scale(1.065); }
    to { transform: translate3d(4px, calc(var(--parallax-y, 0px) - 3px), 0) scale(1.045); }
  }
}

@layer responsive {
  @media (prefers-reduced-motion: reduce) {
    .soundscape[data-sound-state="static"],
    .soundscape[data-sound-state="static"] * {
      animation: none !important;
      transition: none !important;
    }

    .soundscape[data-sound-state="static"] .soundscape__top,
    .soundscape[data-sound-state="static"] .soundscape__copy,
    .soundscape[data-sound-state="static"] .soundscape__wave,
    .soundscape[data-sound-state="static"] .soundscape__frames {
      opacity: 1;
      transform: none;
    }
  }
}

/* CONTACT / ARCHIVE RESTACK */
@layer motion {
  .contact-orbit::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    opacity: 0;
    background: conic-gradient(from 0deg, transparent 0 34%, #dcb149 49%, transparent 64% 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    will-change: transform, opacity;
  }

  .contact-sheet[data-contact-state="idle"] .contact-sheet__frames figure,
  .contact-sheet[data-contact-state="idle"] .contact-sheet__meta,
  .contact-sheet[data-contact-state="idle"] h2 span,
  .contact-sheet[data-contact-state="idle"] .contact-sheet__bottom { opacity: 0; }

  .contact-sheet[data-contact-state="idle"] .contact-sheet__frames figure:nth-child(1) {
    z-index: 3;
    transform: translate3d(-10%, -24%, 0) rotate(-8deg) scale(.88);
  }
  .contact-sheet[data-contact-state="idle"] .contact-sheet__frames figure:nth-child(2) {
    z-index: 2;
    transform: translate3d(63%, -18%, 0) rotate(5deg) scale(.76);
  }
  .contact-sheet[data-contact-state="idle"] .contact-sheet__frames figure:nth-child(3) {
    z-index: 1;
    transform: translate3d(136%, -26%, 0) rotate(9deg) scale(.82);
  }

  .contact-sheet[data-contact-phase="entering"] .contact-sheet__frames figure:nth-child(1) {
    animation: contact-print-enter-primary 920ms 0ms var(--ease-out) both;
  }
  .contact-sheet[data-contact-phase="entering"] .contact-sheet__frames figure:nth-child(2) {
    animation: contact-print-enter-secondary 920ms 100ms var(--ease-out) both;
  }
  .contact-sheet[data-contact-phase="entering"] .contact-sheet__frames figure:nth-child(3) {
    animation: contact-print-enter-tertiary 920ms 190ms var(--ease-out) both;
  }
  .contact-sheet[data-contact-phase="entering"] .contact-sheet__frames figure:nth-child(1) img {
    animation: contact-image-enter-primary 920ms 0ms var(--ease-out) both;
  }
  .contact-sheet[data-contact-phase="entering"] .contact-sheet__frames figure:nth-child(2) img {
    animation: contact-image-enter-secondary 920ms 100ms var(--ease-out) both;
  }
  .contact-sheet[data-contact-phase="entering"] .contact-sheet__frames figure:nth-child(3) img {
    animation: contact-image-enter-tertiary 920ms 190ms var(--ease-out) both;
  }
  .contact-sheet[data-contact-phase="entering"] .contact-sheet__meta {
    animation: contact-copy-enter 620ms 410ms var(--ease-out) both;
  }
  .contact-sheet[data-contact-phase="entering"] h2 span {
    animation: contact-title-line-enter 760ms var(--contact-title-delay) var(--ease-out) both;
  }
  .contact-sheet[data-contact-phase="entering"] h2 span:nth-child(1) { --contact-title-delay: 540ms; }
  .contact-sheet[data-contact-phase="entering"] h2 span:nth-child(2) { --contact-title-delay: 600ms; }
  .contact-sheet[data-contact-phase="entering"] h2 span:nth-child(3) { --contact-title-delay: 660ms; }
  .contact-sheet[data-contact-phase="entering"] .contact-sheet__bottom {
    animation: contact-copy-enter 680ms 740ms var(--ease-out) both;
  }
  .contact-sheet[data-contact-phase="entering"] .contact-orbit::before {
    animation: contact-orbit-sweep 720ms 880ms var(--ease-out) both;
  }

  .contact-sheet[data-contact-phase="resident"] .contact-sheet__frames figure {
    animation: contact-archive-restack 12s cubic-bezier(.65, 0, .35, 1) var(--contact-loop-delay) infinite both;
  }
  .contact-sheet[data-contact-phase="resident"] .contact-sheet__frames img {
    animation: contact-archive-crop 12s ease-in-out var(--contact-loop-delay) infinite both;
  }

  .contact-sheet[data-contact-state="paused"] .contact-sheet__frames figure,
  .contact-sheet[data-contact-state="paused"] .contact-sheet__frames img,
  .contact-sheet[data-contact-state="paused"] .contact-sheet__meta,
  .contact-sheet[data-contact-state="paused"] h2 span,
  .contact-sheet[data-contact-state="paused"] .contact-sheet__bottom,
  .contact-sheet[data-contact-state="paused"] .contact-orbit,
  .contact-sheet[data-contact-state="paused"] .contact-orbit::before {
    animation-play-state: paused;
  }

  .contact-sheet[data-contact-state="static"],
  .contact-sheet[data-contact-state="static"] .contact-sheet__frames,
  .contact-sheet[data-contact-state="static"] .contact-sheet__frames figure,
  .contact-sheet[data-contact-state="static"] .contact-sheet__frames img,
  .contact-sheet[data-contact-state="static"] .contact-sheet__meta,
  .contact-sheet[data-contact-state="static"] h2,
  .contact-sheet[data-contact-state="static"] h2 span,
  .contact-sheet[data-contact-state="static"] .contact-sheet__bottom,
  .contact-sheet[data-contact-state="static"] .contact-orbit,
  .contact-sheet[data-contact-state="static"] .contact-orbit::before {
    animation: none;
    transition: none;
  }
  .contact-sheet[data-contact-state="static"] .contact-sheet__meta,
  .contact-sheet[data-contact-state="static"] h2,
  .contact-sheet[data-contact-state="static"] .contact-sheet__bottom { opacity: 1; transform: none; }
  .contact-sheet[data-contact-state="static"] h2 span { opacity: 1; translate: none; }
  .contact-sheet[data-contact-state="static"] .contact-sheet__frames figure:nth-child(1) {
    z-index: 3;
    opacity: 1;
    transform: translate3d(0, 0, 70px) rotate(-4deg) scale(1.04);
  }
  .contact-sheet[data-contact-state="static"] .contact-sheet__frames figure:nth-child(2) {
    z-index: 2;
    opacity: .76;
    transform: translate3d(68%, 13%, 20px) rotate(2deg) scale(.9);
  }
  .contact-sheet[data-contact-state="static"] .contact-sheet__frames figure:nth-child(3) {
    z-index: 1;
    opacity: .6;
    transform: translate3d(135%, 4%, 0) rotate(7deg) scale(.88);
  }

  @keyframes contact-print-enter-primary {
    from {
      z-index: 3;
      opacity: 0;
      transform: translate3d(-10%, -24%, 0) rotate(-8deg) scale(.88);
    }
    to {
      z-index: 3;
      opacity: 1;
      transform: translate3d(0, 0, 70px) rotate(-4deg) scale(1.04);
    }
  }

  @keyframes contact-print-enter-secondary {
    from {
      z-index: 2;
      opacity: 0;
      transform: translate3d(63%, -18%, 0) rotate(5deg) scale(.76);
    }
    to {
      z-index: 2;
      opacity: .76;
      transform: translate3d(68%, 13%, 20px) rotate(2deg) scale(.9);
    }
  }

  @keyframes contact-print-enter-tertiary {
    from {
      z-index: 1;
      opacity: 0;
      transform: translate3d(136%, -26%, 0) rotate(9deg) scale(.82);
    }
    to {
      z-index: 1;
      opacity: .6;
      transform: translate3d(135%, 4%, 0) rotate(7deg) scale(.88);
    }
  }

  @keyframes contact-copy-enter {
    from { opacity: 0; transform: translate3d(0, 28px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  @keyframes contact-title-line-enter {
    from { opacity: 0; translate: 0 28px; }
    to { opacity: 1; translate: 0 0; }
  }

  @keyframes contact-image-enter-primary {
    from { scale: 1.02; }
    to { scale: 1.08; }
  }

  @keyframes contact-image-enter-secondary {
    from { scale: 1; }
    to { scale: 1.035; }
  }

  @keyframes contact-image-enter-tertiary {
    from { scale: 1; }
    to { scale: 1.015; }
  }

  @keyframes contact-orbit-sweep {
    from { opacity: 0; transform: rotate(-110deg) scale(.96); }
    48% { opacity: 1; }
    to { opacity: 0; transform: rotate(210deg) scale(1); }
  }

  @keyframes contact-archive-restack {
    0%, 25% {
      z-index: 3;
      opacity: 1;
      transform: translate3d(0, 0, 70px) rotate(-4deg) scale(1.04);
    }
    33.333%, 58.333% {
      z-index: 1;
      opacity: .6;
      transform: translate3d(135%, 4%, 0) rotate(7deg) scale(.88);
    }
    66.666%, 91.666% {
      z-index: 2;
      opacity: .76;
      transform: translate3d(68%, 13%, 20px) rotate(2deg) scale(.9);
    }
    100% {
      z-index: 3;
      opacity: 1;
      transform: translate3d(0, 0, 70px) rotate(-4deg) scale(1.04);
    }
  }

  @keyframes contact-archive-crop {
    0%, 25% { scale: 1.08; }
    33.333%, 58.333% { scale: 1.015; }
    66.666%, 91.666% { scale: 1.035; }
    100% { scale: 1.08; }
  }
}

@layer responsive {
  @media (prefers-reduced-motion: reduce) {
    .contact-sheet,
    .contact-sheet__frames,
    .contact-sheet__frames figure,
    .contact-sheet__frames img,
    .contact-sheet__meta,
    .contact-sheet h2,
    .contact-sheet h2 span,
    .contact-sheet__bottom,
    .contact-orbit,
    .contact-orbit::before {
      animation: none !important;
      transition: none !important;
    }
  }
}

/* Film chapters / director's window */
@layer components {
  .film-chapter__media {
    position: absolute;
    z-index: -3;
    inset: 0;
    overflow: hidden;
    background: var(--p-ink-900);
  }

  .film-chapter__media .film-chapter__image,
  .film-chapter__media [data-resident-video] {
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    object-fit: cover;
    transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.045);
  }

  .film-chapter__media .film-chapter__image { z-index: 0; }

  .film-chapter__media [data-resident-video] {
    z-index: 1;
    opacity: 0;
    transition: opacity 180ms var(--ease), transform 9s ease-in-out;
  }

  .film-chapter--wind [data-resident-video] { object-position: 58% center; }
  .film-chapter--tide [data-resident-video] { object-position: 56% center; }
  .film-chapter--rain [data-resident-video] { object-position: 60% center; }
  .film-chapter--plain [data-resident-video] { object-position: 57% center; }
  .film-chapter--blue [data-resident-video] { object-position: 56% center; }

}

@layer motion {
  .film-chapter[data-film-state="resident"] [data-resident-video] {
    opacity: 1;
    transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.065);
  }
}

@layer responsive {
  @media (prefers-reduced-motion: reduce) {
    .film-chapter [data-resident-video] { display: none; }
    .film-chapter[data-film-state] .film-chapter__top,
    .film-chapter[data-film-state] .film-chapter__body,
    .film-chapter[data-film-state] .film-chapter__body > * {
      opacity: 1;
      transform: none;
      clip-path: none;
      animation: none;
      transition: none;
    }
    .film-chapter[data-film-state] h3 { transform: scaleX(.89); }
  }
}

@layer components {
  .chapters__header {
    isolation: isolate;
    overflow: hidden;
  }

  .chapters__header > * {
    position: relative;
    z-index: 2;
  }

  .chapters__header::before,
  .chapters__header::after {
    content: "";
    position: absolute;
    z-index: 3;
    pointer-events: none;
  }

  .chapters__header::before {
    inset: 0;
    opacity: 0;
    background: linear-gradient(104deg, transparent 31%, rgb(205 228 218 / .08) 42%, rgb(238 232 220 / .42) 50%, rgb(150 189 173 / .1) 58%, transparent 69%);
    mix-blend-mode: screen;
  }

  .chapters__header::after {
    right: var(--gutter);
    bottom: 48px;
    left: var(--gutter);
    height: 1px;
    background: linear-gradient(90deg, #b58a4e, rgb(181 138 78 / .34) 58%, transparent);
    transform-origin: left center;
  }

  .chapters__title-line {
    display: block;
    white-space: nowrap;
    opacity: 1;
    transform: none;
    transform-origin: left bottom;
    clip-path: inset(0);
    filter: none;
  }

  .chapters__title-line--two { margin-top: .08em; }

  .chapters__title-breathe {
    display: block;
    transform-origin: left center;
  }
}

@layer motion {
  .chapters__header.is-focus-idle .chapters__title-line {
    opacity: 0;
    transform: translate3d(0, 56px, 0) scale(.84, 1.12);
    clip-path: inset(100% 0 0);
    filter: blur(12px);
  }

  .chapters__header.is-focus-idle .chapters__title-line--two {
    transform: translate3d(0, 72px, 0) scale(.78, 1.14);
    filter: blur(16px);
  }

  .chapters__header.is-focus-idle::before { opacity: 0; }
  .chapters__header.is-focus-idle::after { transform: scaleX(0); }

  .chapters__header.is-focus-entering .chapters__title-line--one {
    animation: films-title-enter-one 850ms var(--ease-out) both;
  }

  .chapters__header.is-focus-entering .chapters__title-line--two {
    animation: films-title-enter-two 950ms 100ms var(--ease-out) both;
  }

  .chapters__header.is-focus-entering::before {
    animation: films-title-light-pass 780ms 160ms var(--ease-out) both;
  }

  .chapters__header.is-focus-entering::after {
    animation: films-title-signal-draw 520ms 480ms var(--ease-out) both;
  }

  .chapters__header.is-focus-entering .chapters__title-line,
  .chapters__header.is-focus-entering::before,
  .chapters__header.is-focus-entering::after {
    will-change: transform, opacity, filter, clip-path;
  }

  .chapters__header:is(.is-focus-settled, .is-focus-passed) .chapters__title-line {
    opacity: 1;
    transform: none;
    clip-path: inset(0);
    filter: none;
    animation: none;
  }

  .chapters__header:is(.is-focus-settled, .is-focus-passed)::before { opacity: 0; }
  .chapters__header:is(.is-focus-settled, .is-focus-passed)::after { transform: scaleX(1); }

  .chapters__header.is-focus-settled .chapters__title-line--one .chapters__title-breathe {
    animation: focus-breathe-one 7.2s 180ms ease-in-out infinite;
  }

  .chapters__header.is-focus-settled .chapters__title-line--two .chapters__title-breathe {
    animation: focus-breathe-two 7.2s 260ms ease-in-out infinite;
  }

  @keyframes films-title-enter-one {
    0% {
      opacity: 0;
      transform: translate3d(0, 56px, 0) scale(.84, 1.12);
      clip-path: inset(100% 0 0);
      filter: blur(12px);
    }
    58% { opacity: 1; filter: blur(0); }
    78% {
      opacity: 1;
      transform: translate3d(0, -3px, 0) scale(1.012, .99);
      clip-path: inset(0);
      filter: blur(0);
    }
    100% { opacity: 1; transform: none; clip-path: inset(0); filter: none; }
  }

  @keyframes films-title-enter-two {
    0% {
      opacity: 0;
      transform: translate3d(0, 72px, 0) scale(.78, 1.14);
      clip-path: inset(100% 0 0);
      filter: blur(16px);
    }
    56% { opacity: 1; filter: blur(0); }
    76% {
      opacity: 1;
      transform: translate3d(0, -4px, 0) scale(1.016, .988);
      clip-path: inset(0);
      filter: blur(0);
    }
    100% { opacity: 1; transform: none; clip-path: inset(0); filter: none; }
  }

  @keyframes films-title-light-pass {
    0% { opacity: 0; transform: translate3d(-78%, 0, 0); }
    34% { opacity: .72; }
    100% { opacity: 0; transform: translate3d(78%, 0, 0); }
  }

  @keyframes films-title-signal-draw {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  @keyframes focus-breathe-one {
    0%, 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    50% { opacity: .965; transform: translate3d(0, -1px, 0) scale(1.006, 1.002); }
  }

  @keyframes focus-breathe-two {
    0%, 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    50% { opacity: .975; transform: translate3d(0, -1.5px, 0) scale(1.009, 1.003); }
  }
}

@layer responsive {
  @media (prefers-reduced-motion: reduce) {
    .chapters__header::before,
    .chapters__header::after,
    .chapters__title-line,
    .chapters__title-breathe {
      animation: none !important;
      transition: none !important;
    }

    .chapters__header.is-focus-idle .chapters__title-line,
    .chapters__header.is-focus-entering .chapters__title-line {
      opacity: 1;
      transform: none;
      clip-path: none;
      filter: none;
    }
  }
}

@layer components {
  .scene-index__backdrops,
  .scene-index__yellow {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .scene-index__backdrops {
    z-index: 0;
    overflow: hidden;
    background: var(--ink);
  }

  .scene-index__yellow {
    z-index: 1;
    background:
      radial-gradient(circle at 84% 16%, rgb(246 212 123 / .5), transparent 30%),
      radial-gradient(circle at -8% 84%, rgb(115 49 33 / .28), transparent 36%),
      linear-gradient(148deg, #d3ae47 0%, #c6922f 48%, #aa6234 100%);
    transform-origin: left center;
    transition: opacity 820ms var(--ease), transform 880ms var(--ease-out);
  }

  .scene-index__backdrop {
    position: absolute;
    inset: -3%;
    width: 106%;
    height: 106%;
    object-fit: cover;
    opacity: 0;
    filter: saturate(.88) contrast(1.05);
    transform: scale(1.045);
    transition: opacity 900ms cubic-bezier(.4, 0, .2, 1), transform 1200ms cubic-bezier(.4, 0, .2, 1);
  }

  .scene-index__backdrop.is-visible { opacity: 1; transform: scale(1.01); }

  .scene-index__backdrops::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
      linear-gradient(90deg, rgb(3 9 7 / .78), rgb(3 9 7 / .48) 48%, rgb(3 9 7 / .2)),
      linear-gradient(180deg, rgb(3 9 7 / .12), transparent 52%, rgb(3 9 7 / .54));
  }

  .scene-index > :not(.scene-index__backdrops, .scene-index__yellow) {
    position: relative;
    z-index: 2;
  }
}

@layer motion {
  .scene-index[data-scene-state="idle"] [data-reveal],
  .scene-index[data-scene-state="static"] [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .scene-index.is-entering .scene-index__top { animation: scene-meta-in 620ms var(--ease-out) both; }
  .scene-index.is-entering h2 { opacity: 1; transform: none; }
  .scene-index.is-entering h2 span { animation: scene-title-in 880ms var(--ease-out) both; }
  .scene-index.is-entering h2 span:nth-child(1) { animation-delay: 120ms; }
  .scene-index.is-entering h2 span:nth-child(2) { animation-delay: 200ms; }
  .scene-index.is-entering h2 span:nth-child(3) { animation-delay: 280ms; }
  .scene-index.is-entering h2 span:nth-child(4) { animation-delay: 360ms; }
  .scene-index.is-entering .scene-index__intro { animation: scene-copy-in 700ms 420ms var(--ease-out) both; }
  .scene-index.is-entering .scene-ticket { animation: scene-card-in 780ms var(--ease-out) both; }
  .scene-index.is-entering .scene-ticket:nth-child(1) { animation-delay: 580ms; }
  .scene-index.is-entering .scene-ticket:nth-child(2) { animation-delay: 635ms; }
  .scene-index.is-entering .scene-ticket:nth-child(3) { animation-delay: 690ms; }
  .scene-index.is-entering .scene-ticket:nth-child(4) { animation-delay: 745ms; }
  .scene-index.is-entering .scene-ticket:nth-child(5) { animation-delay: 800ms; }
  .scene-index.is-entering .scene-index__footer { animation: scene-footer-in 620ms 950ms var(--ease-out) both; }

  .scene-index.is-looping .scene-index__yellow {
    opacity: 0;
    transform: scaleX(.18);
  }

  .scene-index {
    --scene-loop-card-width: clamp(84px, 23vw, 112px);
    --scene-loop-gap: 10px;
  }

  .scene-index h2,
  .scene-index__intro {
    transition: color 720ms var(--ease), transform 880ms var(--ease-out), text-shadow 720ms var(--ease);
  }

  .scene-index.is-looping { color: var(--white); }
  .scene-index.is-looping .scene-index__top,
  .scene-index.is-looping .scene-index__footer { border-color: currentColor; }
  .scene-index.is-looping .scene-index__top {
    opacity: 1;
    transform: none;
  }

  .scene-index.is-looping h2 {
    opacity: 1;
    color: var(--white);
    transform: translateY(-12px) scale(.84);
    transform-origin: left top;
    text-shadow: 0 8px 34px rgb(0 0 0 / .34);
  }

  .scene-index.is-looping h2 span:nth-child(3) {
    color: rgb(201 154 43 / .08);
    -webkit-text-stroke: 1.2px var(--signal);
    text-shadow: 0 5px 22px rgb(0 0 0 / .46);
  }

  .scene-index.is-looping .scene-index__intro {
    opacity: 1;
    color: rgb(245 240 232 / .86);
    transform: translateY(-20px);
    text-shadow: 0 3px 20px rgb(0 0 0 / .42);
  }

  .scene-index.is-looping .scene-index__rail {
    width: calc((var(--scene-loop-card-width) * 3) + (var(--scene-loop-gap) * 2));
    height: 206px;
    margin-top: 38px;
    margin-right: 0;
    margin-left: auto;
    padding: 12px 0 18px;
    overflow: hidden;
    scroll-snap-type: none;
    gap: var(--scene-loop-gap);
    transform: none;
  }

  .scene-index.is-looping .scene-ticket {
    flex: 0 0 var(--scene-loop-card-width);
    height: 176px;
    opacity: .76;
    border-width: 1px;
    transform-origin: left bottom;
    transform: none;
    transition:
      opacity 420ms var(--ease),
      transform 720ms cubic-bezier(.4, 0, .2, 1),
      filter 420ms var(--ease),
      border-color 220ms var(--ease),
      box-shadow 220ms var(--ease);
  }

  .scene-index.is-looping .scene-ticket[data-scene-position="0"] {
    z-index: 2;
    opacity: 1;
    filter: saturate(1.05) contrast(1.04);
    transform: scale(1.035);
  }

  .scene-index.is-looping .scene-ticket[data-scene-position="3"],
  .scene-index.is-looping .scene-ticket[data-scene-position="4"] { visibility: hidden; }

  .scene-index.is-anticipating .scene-ticket[data-scene-position="1"] {
    opacity: 1;
    border-color: var(--signal);
    box-shadow: 0 0 0 1px rgb(201 154 43 / .24), 0 20px 42px rgb(0 0 0 / .34);
    transform: scale(1.035);
  }

  .scene-index.is-looping.is-shifting .scene-ticket[data-scene-position="0"] {
    opacity: 0;
    transform: translateX(calc((var(--scene-loop-card-width) + var(--scene-loop-gap)) * -.72)) scale(.96);
    transition-delay: 0ms;
  }

  .scene-index.is-looping.is-shifting .scene-ticket[data-scene-position="1"] {
    opacity: 1;
    border-color: var(--signal);
    filter: none;
    transform: translateX(calc((var(--scene-loop-card-width) + var(--scene-loop-gap)) * -1)) scale(1.035);
    transition-delay: 0ms;
  }

  .scene-index.is-looping.is-shifting .scene-ticket[data-scene-position="2"] {
    transform: translateX(calc((var(--scene-loop-card-width) + var(--scene-loop-gap)) * -1));
    transition-delay: 0ms;
  }

  .scene-index.is-looping.is-shifting .scene-ticket[data-scene-position="3"] {
    visibility: visible;
    transform: translateX(calc((var(--scene-loop-card-width) + var(--scene-loop-gap)) * -1));
    transition-delay: 0ms;
  }

  .scene-index.is-resetting .scene-ticket { transition: none; }

  @keyframes scene-meta-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes scene-title-in {
    from { opacity: 0; transform: translateY(104%) skewY(3deg) scaleX(.9); clip-path: inset(100% 0 0); }
    to { opacity: 1; transform: translateY(0) skewY(0) scaleX(.9); clip-path: inset(0); }
  }

  @keyframes scene-copy-in {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes scene-card-in {
    from { opacity: 0; transform: translateY(76px) scale(.94); clip-path: inset(100% 0 0); }
    to { opacity: 1; transform: none; clip-path: inset(0); }
  }

  @keyframes scene-footer-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
}

@layer responsive {
  @media (prefers-reduced-motion: reduce) {
    .scene-index__backdrops,
    .scene-index__yellow { display: none; }
    .scene-index [data-reveal] {
      opacity: 1;
      transform: none;
      clip-path: none;
      animation: none;
    }
  }
}

/* V4 / CINEMATIC ATMOSPHERE
   Scene colour, surface light and depth are kept separate so the future
   motion build can animate them without changing the content structure. */
@layer structure {
  .site-shell {
    background: var(--p-ink-950);
    box-shadow:
      0 0 0 1px rgb(255 255 255 / .035),
      0 38px 130px rgb(0 0 0 / .74);
  }

  .grain {
    opacity: .17;
    background-size: 128px 128px;
  }

  .scroll-progress {
    width: 2px;
    background: rgb(255 255 255 / .055);
    box-shadow: 0 0 18px rgb(201 154 43 / .2);
  }

  .scroll-progress i {
    background: linear-gradient(180deg, #e2b94c, var(--signal) 58%, #8e542f);
    box-shadow: 0 0 15px var(--glow-brass);
  }

  .site-header.is-fixed {
    background: linear-gradient(180deg, rgb(5 15 13 / .9), rgb(7 19 16 / .72));
    border-bottom: 1px solid rgb(229 203 150 / .12);
    box-shadow: 0 16px 42px rgb(0 0 0 / .18);
    backdrop-filter: blur(22px) saturate(1.16);
  }

  .brand__mark,
  .menu-button {
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .04), 0 8px 24px rgb(0 0 0 / .12);
  }

  .menu-button {
    background: linear-gradient(145deg, rgb(255 255 255 / .12), rgb(3 12 10 / .22));
    backdrop-filter: blur(14px) saturate(1.25);
  }

  .hero {
    --scene-wash: rgb(28 69 55 / .32);
    --scene-bloom: rgb(208 178 116 / .28);
    --scene-prism: rgb(90 148 122 / .18);
    --hero-shift-x: 0px;
    --hero-shift-y: 0px;
    background: var(--p-ink-950);
  }

  .hero[data-theme="blue"] {
    --scene-wash: rgb(18 62 91 / .42);
    --scene-bloom: rgb(220 158 86 / .3);
    --scene-prism: rgb(49 112 151 / .2);
  }

  .hero[data-theme="rust"] {
    --scene-wash: rgb(119 44 27 / .42);
    --scene-bloom: rgb(229 155 72 / .3);
    --scene-prism: rgb(177 62 41 / .17);
  }

  .hero[data-theme="sand"] {
    --scene-wash: rgb(100 88 67 / .25);
    --scene-bloom: rgb(241 220 178 / .34);
    --scene-prism: rgb(126 148 157 / .16);
  }

  .hero-scene img {
    transform: translate3d(var(--hero-shift-x), var(--hero-shift-y), 0) scale(1.045);
    filter: saturate(1.04) contrast(1.035);
    transition: transform 1300ms var(--ease-out), filter var(--slow) var(--ease);
  }

  .hero__wash {
    overflow: hidden;
    background:
      radial-gradient(circle at 82% 15%, var(--scene-bloom), transparent 36%),
      linear-gradient(160deg, var(--scene-wash), transparent 46%),
      linear-gradient(180deg, rgb(3 9 7 / .54) 0%, rgb(4 11 9 / .03) 26%, rgb(4 10 8 / .08) 53%, rgb(4 10 8 / .52) 75%, rgb(3 8 7 / .96) 100%),
      linear-gradient(90deg, rgb(3 10 8 / .5), transparent 72%);
    background-color: transparent !important;
    transition: background var(--slow) var(--ease);
  }

  .hero__wash::before,
  .hero__wash::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  .hero__wash::before {
    top: -20%;
    right: -24%;
    width: 76%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--scene-bloom);
    filter: blur(54px);
    mix-blend-mode: screen;
    opacity: .58;
    animation: atmosphere-drift 14s var(--ease) infinite alternate;
  }

  .hero__wash::after {
    top: -32%;
    left: 44%;
    width: 16%;
    height: 112%;
    background: linear-gradient(90deg, transparent, var(--scene-prism), rgb(244 211 143 / .12), transparent);
    filter: blur(13px);
    mix-blend-mode: screen;
    opacity: .46;
    transform: rotate(17deg);
    animation: prism-pass 16s var(--ease) infinite;
  }

  .hero h1 {
    color: #f7f2e9;
    text-shadow: 0 3px 20px rgb(1 6 4 / .32), 0 18px 52px rgb(1 6 4 / .28);
  }

  .hero__summary > p,
  .rail-head {
    text-shadow: 0 2px 15px rgb(0 0 0 / .56);
  }

  .hero::after {
    background: linear-gradient(90deg, #d7aa36 0 24%, rgb(245 240 232 / .24) 24% 100%);
    box-shadow: 0 0 14px rgb(211 165 54 / .2);
  }

  .poster {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --lift: 0px;
    border-color: rgb(245 240 232 / .34);
    background: var(--p-ink-900);
    box-shadow: 0 13px 30px rgb(0 0 0 / .28), inset 0 0 0 1px rgb(255 255 255 / .03);
    transform: perspective(620px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift));
    transition:
      flex-basis 620ms var(--ease-out),
      height 620ms var(--ease-out),
      border-color var(--medium) var(--ease),
      box-shadow var(--medium) var(--ease),
      transform var(--medium) var(--ease-out);
  }

  .poster::before,
  .scene-ticket::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: -35% auto -35% -85%;
    width: 44%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgb(255 246 224 / .2), transparent);
    filter: blur(3px);
    transform: rotate(12deg);
    transition: left 900ms var(--ease-out);
  }

  .poster__shade {
    background:
      linear-gradient(180deg, rgb(3 7 6 / .02) 18%, rgb(3 7 6 / .18) 58%, rgb(3 7 6 / .82)),
      linear-gradient(110deg, rgb(255 227 170 / .09), transparent 42%);
  }

  .poster.is-active {
    --lift: -3px;
    border-color: #d8aa39;
    box-shadow:
      0 18px 44px rgb(0 0 0 / .44),
      0 0 0 1px rgb(232 190 91 / .18),
      0 0 24px rgb(204 151 43 / .2);
  }

  .poster.is-active img { filter: saturate(1.06) contrast(1.04); }
  .poster:active { transform: perspective(620px) scale(.975); }

  .hero__controls button {
    border-color: rgb(245 240 232 / .48);
    background: linear-gradient(145deg, rgb(255 255 255 / .1), rgb(4 12 10 / .24));
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .03), 0 12px 28px rgb(0 0 0 / .2);
    backdrop-filter: blur(14px) saturate(1.25);
  }

  .scene-index {
    isolation: isolate;
    background:
      radial-gradient(circle at 84% 16%, rgb(246 212 123 / .5), transparent 30%),
      radial-gradient(circle at -8% 84%, rgb(115 49 33 / .28), transparent 36%),
      linear-gradient(148deg, #d3ae47 0%, #c6922f 48%, #aa6234 100%);
  }

  .scene-index::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 24%;
    right: -30%;
    width: 88%;
    aspect-ratio: 1;
    border: 1px solid rgb(7 19 16 / .13);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgb(7 19 16 / .025), 0 0 0 76px rgb(7 19 16 / .018);
  }

  .scene-ticket {
    border-color: rgb(245 230 197 / .28);
    box-shadow: 0 18px 38px rgb(64 30 18 / .26), inset 0 0 0 1px rgb(255 255 255 / .04);
  }

  .scene-ticket--active {
    border-color: var(--ink);
    box-shadow: 0 24px 50px rgb(62 29 17 / .36), 0 0 0 1px rgb(7 19 16 / .24);
  }

  .scene-ticket img { filter: saturate(1.05) contrast(1.04); transition: transform 900ms var(--ease-out); }
  .scene-ticket::after { background: linear-gradient(180deg, rgb(2 7 5 / .01) 24%, rgb(2 7 5 / .84)); }

  .manifesto,
  .process-reel {
    background:
      radial-gradient(circle at 92% 8%, rgb(255 244 215 / .88), transparent 28%),
      radial-gradient(circle at 12% 72%, rgb(87 111 101 / .12), transparent 38%),
      linear-gradient(165deg, #d6d6ce 0%, #c4c9c2 56%, #b7bbb3 100%);
  }

  .manifesto::before,
  .process-reel::before {
    content: "";
    position: absolute;
    pointer-events: none;
    inset: 0;
    background:
      linear-gradient(105deg, transparent 0 42%, rgb(255 255 255 / .2) 50%, transparent 58%),
      linear-gradient(180deg, transparent 78%, rgb(31 49 42 / .08));
    mix-blend-mode: soft-light;
  }

  .manifesto h2 span:nth-child(4),
  .process-reel h2 span:nth-child(3) {
    color: #93442f;
    text-shadow: 0 10px 30px rgb(105 50 34 / .1);
  }

  .chapters,
  .chapters__header {
    background:
      radial-gradient(circle at 86% 22%, rgb(56 89 75 / .27), transparent 33%),
      linear-gradient(165deg, #0b1c18 0%, #06100e 58%, #030807 100%);
  }

  .chapters__header h2 { color: #eee8dc; text-shadow: 0 18px 52px rgb(0 0 0 / .3); }

  .film-chapter {
    --chapter-wash: rgb(42 79 63 / .32);
    --chapter-bloom: rgb(215 178 105 / .2);
    border-top-color: rgb(232 218 189 / .14);
    background: var(--p-ink-900);
  }

  .film-chapter--tide { --chapter-wash: rgb(19 57 82 / .44); --chapter-bloom: rgb(170 197 211 / .18); }
  .film-chapter--rain { --chapter-wash: rgb(130 47 29 / .44); --chapter-bloom: rgb(233 143 65 / .2); }
  .film-chapter--plain { --chapter-wash: rgb(98 91 76 / .22); --chapter-bloom: rgb(244 223 178 / .25); }
  .film-chapter--blue { --chapter-wash: rgb(14 51 91 / .5); --chapter-bloom: rgb(226 146 69 / .22); }

  .film-chapter__shade {
    overflow: hidden;
    background:
      radial-gradient(circle at 82% 18%, var(--chapter-bloom), transparent 34%),
      linear-gradient(150deg, var(--chapter-wash), transparent 50%),
      linear-gradient(180deg, rgb(3 9 7 / .46) 0%, transparent 32%, rgb(3 9 7 / .12) 54%, rgb(3 9 7 / .92) 100%),
      linear-gradient(90deg, rgb(3 9 7 / .38), transparent 72%);
    background-color: transparent !important;
  }

  .film-chapter__shade::after,
  .soundscape__shade::after,
  .author-note__shade::after {
    content: "";
    position: absolute;
    top: -18%;
    right: -34%;
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--chapter-bloom, rgb(222 157 79 / .2));
    filter: blur(58px);
    mix-blend-mode: screen;
    opacity: .42;
    transform: translate3d(0, var(--chapter-light-y, 0px), 0);
    transition: opacity var(--slow) var(--ease);
  }

  .film-chapter h3 {
    color: #f6f0e7;
    text-shadow: 0 4px 22px rgb(0 0 0 / .34), 0 24px 62px rgb(0 0 0 / .28);
  }

  .film-chapter__body > button {
    border-color: rgb(245 240 232 / .46);
    background: linear-gradient(145deg, rgb(255 255 255 / .12), rgb(4 12 10 / .22));
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .03), 0 14px 32px rgb(0 0 0 / .22);
    backdrop-filter: blur(16px) saturate(1.3);
  }

  .film-chapter__body > button i {
    background: linear-gradient(145deg, #e0b64b, #b77e21);
    box-shadow: 0 0 20px rgb(211 164 54 / .32);
  }

  .soundscape {
    --chapter-bloom: rgb(210 151 66 / .2);
    background: #0b2522;
  }

  .soundscape__image {
    object-position: 64% center;
    filter: saturate(.74) contrast(1.06) brightness(.82);
  }

  .soundscape__shade {
    overflow: hidden;
    background:
      radial-gradient(circle at 70% 58%, rgb(220 158 68 / .16), transparent 34%),
      linear-gradient(145deg, rgb(4 34 31 / .66) 0%, rgb(9 31 46 / .22) 52%, rgb(38 18 8 / .28) 100%),
      linear-gradient(180deg, rgb(2 17 17 / .58) 0%, rgb(3 17 22 / .08) 35%, rgb(3 20 23 / .55) 72%, rgb(2 11 13 / .97) 100%);
  }

  .soundscape__wave i {
    background: linear-gradient(180deg, #e3b74b, #a66b27);
    box-shadow: 0 0 14px rgb(208 155 44 / .18);
  }

  .soundscape__frames figure {
    box-shadow: 0 16px 36px rgb(0 0 0 / .38), inset 0 0 0 1px rgb(255 255 255 / .04);
  }

  .field-notes {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(circle at 88% 10%, rgb(251 220 135 / .48), transparent 30%),
      radial-gradient(circle at 3% 74%, rgb(127 45 31 / .23), transparent 35%),
      linear-gradient(152deg, #d1aa42 0%, #c28e2f 52%, #aa6036 100%);
  }

  .field-notes::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 22%;
    left: -38%;
    width: 110%;
    aspect-ratio: 1;
    border: 1px solid rgb(7 19 16 / .1);
    border-radius: 50%;
    box-shadow: 0 0 0 42px rgb(7 19 16 / .018), 0 0 0 96px rgb(7 19 16 / .012);
  }

  .process-reel__cards figure {
    position: relative;
    border: 1px solid rgb(7 19 16 / .12);
    box-shadow: 0 24px 56px rgb(24 42 35 / .2), 0 3px 12px rgb(24 42 35 / .12);
  }

  .author-note {
    --chapter-bloom: rgb(186 211 221 / .18);
    background: #102d47;
  }

  .author-note__shade {
    overflow: hidden;
    background:
      radial-gradient(circle at 82% 13%, rgb(181 209 221 / .2), transparent 30%),
      linear-gradient(145deg, rgb(17 56 84 / .44), transparent 52%),
      linear-gradient(180deg, rgb(3 10 16 / .56), rgb(3 10 16 / .05) 34%, rgb(3 10 16 / .48) 70%, rgb(3 8 13 / .96));
  }

  .contact-sheet {
    isolation: isolate;
    background:
      radial-gradient(circle at 91% 18%, rgb(31 75 103 / .48), transparent 34%),
      radial-gradient(circle at 9% 82%, rgb(134 64 38 / .2), transparent 35%),
      linear-gradient(155deg, #0b211e 0%, #071310 46%, #06101a 100%);
  }

  .contact-sheet::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -34%;
    bottom: 6%;
    width: 94%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgb(197 136 54 / .13);
    filter: blur(70px);
  }

  .contact-sheet__frames figure {
    border-color: rgb(236 219 184 / .24);
    box-shadow: 0 22px 54px rgb(0 0 0 / .44), inset 0 0 0 1px rgb(255 255 255 / .04);
  }

  .contact-sheet__frames img { filter: saturate(1.04) contrast(1.035); }

  .contact-orbit {
    border-color: #d2a536;
    color: #dcb149;
    background: radial-gradient(circle at 34% 24%, rgb(255 227 164 / .1), transparent 42%);
    box-shadow: inset 0 0 0 1px rgb(255 225 161 / .04), 0 0 42px rgb(199 149 43 / .12);
  }

  .footer {
    background:
      radial-gradient(circle at 15% 12%, rgb(255 250 232 / .78), transparent 34%),
      linear-gradient(145deg, #eee7da, #cfc9ba);
  }
}

@layer components {
  .menu-panel {
    background:
      radial-gradient(circle at 88% 12%, rgb(248 219 132 / .58), transparent 28%),
      linear-gradient(150deg, #d2aa42 0%, #c58d2e 58%, #aa6036 100%);
  }

  .film-modal__shade {
    background:
      radial-gradient(circle at 78% 18%, rgb(219 156 79 / .18), transparent 32%),
      linear-gradient(180deg, rgb(0 0 0 / .28), transparent 48%, rgb(1 5 4 / .9));
  }

  .enquiry-panel {
    background:
      radial-gradient(circle at 90% 8%, rgb(255 244 214 / .9), transparent 30%),
      linear-gradient(160deg, #eee7da, #c6cbc3);
  }
}

@layer motion {
  .poster.is-active .poster__shade::after {
    content: "";
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 38%, rgb(255 235 190 / .12) 50%, transparent 62%);
    mix-blend-mode: screen;
    animation: active-light-breathe 6s ease-in-out infinite alternate;
  }

  @keyframes atmosphere-drift {
    from { transform: translate3d(-3%, -2%, 0) scale(.94); opacity: .38; }
    to { transform: translate3d(7%, 6%, 0) scale(1.08); opacity: .68; }
  }

  @keyframes prism-pass {
    0%, 18% { transform: translate3d(-150%, 0, 0) rotate(17deg); opacity: 0; }
    35%, 62% { opacity: .46; }
    82%, 100% { transform: translate3d(410%, 0, 0) rotate(17deg); opacity: 0; }
  }

  @keyframes active-light-breathe {
    from { opacity: .28; transform: translate3d(-8%, 2%, 0); }
    to { opacity: .72; transform: translate3d(8%, -2%, 0); }
  }
}

@layer responsive {
  @media (hover: hover) {
    .poster:hover { --lift: -5px; }
    .poster:hover::before,
    .scene-ticket:hover::before { left: 145%; }
    .scene-ticket:hover { transform: translateY(-4px); box-shadow: 0 24px 52px rgb(54 27 17 / .36); }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-scene img { transform: scale(1.045); }
    .hero__wash::before,
    .hero__wash::after { animation: none; }
    .is-loading .brand,
    .is-loading .header__meta,
    .is-loading .menu-button,
    .is-loading .hero__overline,
    .is-loading .hero h1 span,
    .is-loading .hero__summary,
    .is-loading .rail-head,
    .is-loading .poster,
    .is-loading .hero__controls,
    .is-loading .hero__counter,
    .is-loading .hero__scroll,
    .is-loading .hero::after,
    .is-ready .brand,
    .is-ready .header__meta,
    .is-ready .menu-button,
    .is-ready .hero__overline,
    .is-ready .hero h1 span,
    .is-ready .hero__summary,
    .is-ready .rail-head,
    .is-ready .poster,
    .is-ready .hero__controls,
    .is-ready .hero__counter,
    .is-ready .hero__scroll,
    .is-ready .hero::after,
    .hero.is-switching .hero-scene.is-active img,
    .hero.is-switching .hero__counter,
    .hero.is-switching .poster.is-active,
    .hero__copy.is-changing .hero__overline,
    .hero__copy.is-changing h1 span:first-child,
    .hero__copy.is-changing h1 span:last-child,
    .hero__copy.is-changing .hero__summary {
      animation: none;
      opacity: 1;
      translate: none;
      scale: none;
      clip-path: none;
    }
    .poster.is-active .poster__shade::after { animation: none; opacity: 0; }
  }
}

@layer motion {
  .process-reel[data-process-motion-ready="true"] > [data-reveal],
  .process-reel[data-process-motion-ready="true"] .process-reel__cards > [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .process-reel[data-process-motion-ready="true"][data-process-state="idle"] .process-reel__top,
  .process-reel[data-process-motion-ready="true"][data-process-state="idle"] h2 span {
    opacity: 0;
    filter: blur(8px);
  }

  .process-reel[data-process-state="entering"] .process-reel__top {
    animation: process-meta-resolve 720ms var(--ease-out) both;
  }

  .process-reel[data-process-state="entering"] h2 span {
    animation: process-title-resolve 900ms var(--ease-out) both;
  }

  .process-reel[data-process-state="entering"] h2 span:nth-child(2) { animation-delay: 90ms; }
  .process-reel[data-process-state="entering"] h2 span:nth-child(3) { animation-delay: 180ms; }

  .process-reel[data-process-motion-ready="true"] article[data-process-card-state="pending"] figure,
  .process-reel[data-process-motion-ready="true"] article[data-process-card-state="pending"] > div {
    opacity: 0;
  }

  .process-reel__cards figure::before,
  .process-reel__cards figure::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  .process-reel__cards figure::before {
    z-index: 2;
    inset: 0;
    background: radial-gradient(circle at 50% 48%, transparent 0 4%, rgb(4 13 10 / .94) 12% 100%);
    opacity: 0;
    transform-origin: 50% 48%;
  }

  .process-reel__cards figure::after {
    z-index: 3;
    inset: -35%;
    width: auto;
    background: conic-gradient(from 38deg, transparent 0 28%, rgb(255 244 215 / .5) 33%, transparent 39% 100%);
    mix-blend-mode: screen;
    filter: blur(4px);
    opacity: 0;
  }

  .process-reel__cards article[data-process-card-state="entering"] figure {
    will-change: clip-path, opacity;
    animation: process-frame-resolve 1350ms var(--ease-out) both;
  }

  .process-reel__cards article[data-process-card-state="entering"] img {
    will-change: transform, filter, opacity;
    animation: process-image-focus 1350ms var(--ease-out) both;
  }

  .process-reel__cards article[data-process-card-state="entering"] figure::before {
    animation: process-aperture-open 1350ms var(--ease-out) both;
  }

  .process-reel__cards article[data-process-card-state="entering"] figure::after {
    animation: process-lens-pass 1350ms var(--ease-out) both;
  }

  .process-reel__cards article[data-process-card-state="entering"] > div {
    will-change: opacity, filter, clip-path;
    animation: process-copy-resolve 730ms 540ms var(--ease-out) both;
  }

  .process-reel__cards article[data-process-card-state="resident"] img {
    will-change: transform;
    animation: process-resident-push 12s ease-in-out infinite alternate;
  }

  .process-reel__cards article[data-process-card-state="resident"] figure::after {
    animation: process-resident-light 18s ease-in-out infinite alternate;
  }

  @keyframes process-meta-resolve {
    from { opacity: 0; filter: blur(7px); clip-path: inset(0 100% 0 0); }
    to { opacity: 1; filter: blur(0); clip-path: inset(0); }
  }

  @keyframes process-title-resolve {
    from { opacity: 0; filter: blur(10px); clip-path: inset(100% 0 0); transform: scaleX(.9); }
    58% { opacity: 1; filter: blur(2px); }
    to { opacity: 1; filter: blur(0); clip-path: inset(0); transform: scaleX(.9); }
  }

  @keyframes process-frame-resolve {
    from { opacity: .2; clip-path: inset(46% 46% 46% 46% round 50%); }
    42% { opacity: 1; clip-path: inset(3% 2% 4% 1% round 12%); }
    to { opacity: 1; clip-path: inset(0% 0% 0% 0% round 1.5%); }
  }

  @keyframes process-image-focus {
    from { opacity: 0; transform: scale(1.18); filter: blur(16px) brightness(.48) saturate(.55); }
    36% { opacity: 1; filter: blur(5px) brightness(1.22) saturate(.82); }
    to { opacity: 1; transform: scale(1.02); filter: blur(0) brightness(1) saturate(1); }
  }

  @keyframes process-aperture-open {
    0%, 14% { opacity: 1; transform: scale(1); }
    58% { opacity: .16; transform: scale(2.8); }
    to { opacity: 0; transform: scale(3.4); }
  }

  @keyframes process-lens-pass {
    0%, 24% { opacity: 0; transform: translate3d(-24%, 18%, 0) rotate(-10deg); }
    42% { opacity: .76; }
    68%, 100% { opacity: 0; transform: translate3d(30%, -16%, 0) rotate(8deg); }
  }

  @keyframes process-copy-resolve {
    from { opacity: 0; filter: blur(7px); clip-path: inset(100% 0 0); }
    to { opacity: 1; filter: blur(0); clip-path: inset(0); }
  }

  @keyframes process-resident-push {
    from { transform: scale(1.02); }
    to { transform: scale(1.045); }
  }

  @keyframes process-resident-light {
    from { opacity: .04; transform: translate3d(-34%, 16%, 0) rotate(-8deg); }
    to { opacity: .2; transform: translate3d(34%, -14%, 0) rotate(8deg); }
  }
}

@layer responsive {
  @media (prefers-reduced-motion: reduce) {
    .process-reel[data-process-state="static"],
    .process-reel[data-process-state="static"] *,
    .process-reel[data-process-state="static"] *::before,
    .process-reel[data-process-state="static"] *::after {
      animation: none !important;
      transition: none !important;
    }

    .process-reel[data-process-state="static"] [data-reveal],
    .process-reel[data-process-state="static"] h2 span,
    .process-reel[data-process-state="static"] figure,
    .process-reel[data-process-state="static"] img,
    .process-reel[data-process-state="static"] article > div {
      opacity: 1;
      filter: none;
      clip-path: none;
    }

    .process-reel[data-process-state="static"] h2 span { transform: scaleX(.9); }
    .process-reel[data-process-state="static"] img { transform: none; }
    .process-reel[data-process-state="static"] figure::before,
    .process-reel[data-process-state="static"] figure::after { display: none; }
  }
}

/* MANIFESTO / BREATHING MOTION
   The dedicated state director keeps the reading copy stable after entry while
   type, light, rule and stamp continue at deliberately mismatched tempos. */
@layer motion {
  .manifesto[data-manifesto-state] {
    --manifesto-ease: cubic-bezier(.16, 1, .3, 1);
  }

  .manifesto[data-manifesto-state] > :not(.manifesto__stamp) {
    position: relative;
    z-index: 1;
  }

  .manifesto[data-manifesto-state]::before,
  .manifesto[data-manifesto-state]::after {
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
  }

  .manifesto[data-manifesto-state]::before {
    inset: -14%;
    background:
      linear-gradient(106deg, transparent 26%, rgb(255 255 255 / .04) 39%, rgb(255 252 230 / .38) 50%, rgb(110 137 124 / .08) 61%, transparent 74%),
      linear-gradient(180deg, transparent 76%, rgb(31 49 42 / .08));
    mix-blend-mode: soft-light;
    transform: translate3d(-10%, -3%, 0) rotate(2deg);
  }

  .manifesto[data-manifesto-state]::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
      repeating-linear-gradient(90deg, transparent 0 47px, rgb(7 19 16 / .017) 48px),
      linear-gradient(180deg, rgb(255 255 255 / .05), transparent 34%, rgb(47 71 62 / .07));
  }

  .manifesto[data-manifesto-state] .section-tag,
  .manifesto[data-manifesto-state] .manifesto__type,
  .manifesto[data-manifesto-state] .manifesto__note {
    transition: none;
  }

  .manifesto[data-manifesto-state] .manifesto__type,
  .manifesto[data-manifesto-state] .manifesto__note {
    opacity: 1;
    transform: none;
  }

  .manifesto[data-manifesto-state] .section-tag {
    overflow: hidden;
  }

  .manifesto[data-manifesto-state] .section-tag::after {
    content: "";
    position: absolute;
    right: auto;
    bottom: -1px;
    left: 0;
    width: 18%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgb(161 112 60 / .74), transparent);
    opacity: 0;
    transform: translate3d(-140%, 0, 0);
  }

  .manifesto[data-manifesto-state] h2 span,
  .manifesto[data-manifesto-state] .manifesto__stamp {
    will-change: auto;
  }

  .manifesto[data-manifesto-state="idle"] .section-tag {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translate3d(0, 10px, 0);
  }

  .manifesto[data-manifesto-state="idle"] h2 span {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 42px, 0) scaleX(.9);
  }

  .manifesto[data-manifesto-state="idle"] .manifesto__note p {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }

  .manifesto[data-manifesto-state="idle"] .manifesto__stamp {
    z-index: 1;
    opacity: 0;
    transform: rotate(-90deg) translate3d(0, 14px, 0);
  }

  .manifesto[data-manifesto-state="entering"]::before {
    animation: manifesto-light-enter 1150ms 40ms var(--manifesto-ease) both;
  }

  .manifesto[data-manifesto-state="entering"]::after {
    animation: manifesto-surface-enter 1250ms 80ms var(--manifesto-ease) both;
  }

  .manifesto[data-manifesto-state="entering"] .section-tag {
    animation: manifesto-tag-enter 880ms 120ms var(--manifesto-ease) both;
  }

  .manifesto[data-manifesto-state="entering"] h2 span {
    will-change: transform, opacity, clip-path;
  }

  .manifesto[data-manifesto-state="entering"] h2 span:nth-child(1) {
    animation: manifesto-title-enter 980ms 340ms var(--manifesto-ease) both;
  }

  .manifesto[data-manifesto-state="entering"] h2 span:nth-child(2) {
    animation: manifesto-title-enter 1000ms 440ms var(--manifesto-ease) both;
  }

  .manifesto[data-manifesto-state="entering"] h2 span:nth-child(3) {
    animation: manifesto-title-enter 1020ms 540ms var(--manifesto-ease) both;
  }

  .manifesto[data-manifesto-state="entering"] h2 span:nth-child(4) {
    animation: manifesto-title-enter 1040ms 640ms var(--manifesto-ease) both;
  }

  .manifesto[data-manifesto-state="entering"] .manifesto__note p {
    will-change: transform, opacity;
  }

  .manifesto[data-manifesto-state="entering"] .manifesto__note p:first-child {
    animation: manifesto-note-enter 820ms 900ms var(--manifesto-ease) both;
  }

  .manifesto[data-manifesto-state="entering"] .manifesto__note p:last-child {
    animation: manifesto-note-enter 860ms 1020ms var(--manifesto-ease) both;
  }

  .manifesto[data-manifesto-state="entering"] .manifesto__stamp {
    z-index: 1;
    will-change: transform, opacity;
    animation: manifesto-stamp-enter 780ms 1120ms var(--manifesto-ease) both;
  }

  .manifesto:is([data-manifesto-state="settled"], [data-manifesto-state="offscreen"])::before {
    animation: manifesto-light-breathe 14s ease-in-out infinite alternate;
  }

  .manifesto:is([data-manifesto-state="settled"], [data-manifesto-state="offscreen"])::after {
    animation: manifesto-surface-breathe 11s ease-in-out infinite alternate;
  }

  .manifesto:is([data-manifesto-state="settled"], [data-manifesto-state="offscreen"]) .section-tag {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }

  .manifesto:is([data-manifesto-state="settled"], [data-manifesto-state="offscreen"]) .section-tag::after {
    animation: manifesto-rule-glint 9s 1.2s ease-in-out infinite;
  }

  .manifesto:is([data-manifesto-state="settled"], [data-manifesto-state="offscreen"]) h2 span {
    opacity: 1;
    clip-path: inset(0);
    will-change: transform, opacity;
  }

  .manifesto:is([data-manifesto-state="settled"], [data-manifesto-state="offscreen"]) h2 span:nth-child(1) {
    animation: manifesto-title-breathe-a 8s ease-in-out infinite alternate;
  }

  .manifesto:is([data-manifesto-state="settled"], [data-manifesto-state="offscreen"]) h2 span:nth-child(2) {
    animation: manifesto-title-breathe-b 10s .4s ease-in-out infinite alternate;
  }

  .manifesto:is([data-manifesto-state="settled"], [data-manifesto-state="offscreen"]) h2 span:nth-child(3) {
    animation: manifesto-title-breathe-c 12s .8s ease-in-out infinite alternate;
  }

  .manifesto:is([data-manifesto-state="settled"], [data-manifesto-state="offscreen"]) h2 span:nth-child(4) {
    animation: manifesto-title-breathe-rust 9s .2s ease-in-out infinite alternate;
  }

  .manifesto:is([data-manifesto-state="settled"], [data-manifesto-state="offscreen"]) .manifesto__note p {
    opacity: 1;
    transform: none;
  }

  .manifesto:is([data-manifesto-state="settled"], [data-manifesto-state="offscreen"]) .manifesto__stamp {
    z-index: 1;
    opacity: 1;
    will-change: transform, opacity;
    animation: manifesto-stamp-breathe 13s .6s ease-in-out infinite alternate;
  }

  .manifesto[data-manifesto-state="offscreen"],
  .manifesto[data-manifesto-state="offscreen"] *,
  .manifesto[data-manifesto-state="offscreen"]::before,
  .manifesto[data-manifesto-state="offscreen"]::after,
  .manifesto.is-page-hidden,
  .manifesto.is-page-hidden *,
  .manifesto.is-page-hidden::before,
  .manifesto.is-page-hidden::after {
    animation-play-state: paused !important;
  }

  @keyframes manifesto-light-enter {
    from { opacity: 0; transform: translate3d(-14%, -5%, 0) rotate(2deg); }
    to { opacity: .62; transform: translate3d(-4%, 0, 0) rotate(2deg); }
  }

  @keyframes manifesto-surface-enter {
    from { opacity: 0; }
    to { opacity: .44; }
  }

  @keyframes manifesto-tag-enter {
    from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate3d(0, 10px, 0); }
    to { opacity: 1; clip-path: inset(0); transform: translate3d(0, 0, 0); }
  }

  @keyframes manifesto-title-enter {
    0% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate3d(0, 42px, 0) scaleX(.9); }
    58% { opacity: 1; }
    100% { opacity: 1; clip-path: inset(0); transform: translate3d(0, 0, 0) scaleX(.9); }
  }

  @keyframes manifesto-note-enter {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  @keyframes manifesto-stamp-enter {
    from { opacity: 0; transform: rotate(-90deg) translate3d(0, 14px, 0); }
    to { opacity: 1; transform: rotate(-90deg) translate3d(0, 0, 0); }
  }

  @keyframes manifesto-light-breathe {
    from { opacity: .38; transform: translate3d(-8%, calc(-3% + var(--manifesto-scroll-y, 0px)), 0) rotate(2deg) scale(.98); }
    to { opacity: .72; transform: translate3d(9%, calc(5% + var(--manifesto-scroll-y, 0px)), 0) rotate(2deg) scale(1.04); }
  }

  @keyframes manifesto-surface-breathe {
    from { opacity: .24; transform: translate3d(0, calc(-1.5% + var(--manifesto-scroll-y, 0px)), 0); }
    to { opacity: .48; transform: translate3d(0, calc(1.5% + var(--manifesto-scroll-y, 0px)), 0); }
  }

  @keyframes manifesto-rule-glint {
    0%, 58% { opacity: 0; transform: translate3d(-140%, 0, 0); }
    69% { opacity: .78; }
    84%, 100% { opacity: 0; transform: translate3d(660%, 0, 0); }
  }

  @keyframes manifesto-title-breathe-a {
    from { transform: translate3d(0, 0, 0) scaleX(.9); }
    to { transform: translate3d(1.6px, -1px, 0) scaleX(.901); }
  }

  @keyframes manifesto-title-breathe-b {
    from { opacity: .84; transform: translate3d(0, 0, 0) scaleX(.9); }
    to { opacity: 1; transform: translate3d(-1.5px, 1.2px, 0) scaleX(.902); }
  }

  @keyframes manifesto-title-breathe-c {
    from { transform: translate3d(0, 0, 0) scaleX(.9); }
    to { transform: translate3d(1px, 1.5px, 0) scaleX(.901); }
  }

  @keyframes manifesto-title-breathe-rust {
    from { opacity: .9; transform: translate3d(0, 0, 0) scaleX(.9); }
    to { opacity: 1; transform: translate3d(-1.8px, -1.2px, 0) scaleX(.902); }
  }

  @keyframes manifesto-stamp-breathe {
    from { opacity: .56; transform: rotate(-90deg) translate3d(0, 0, 0); }
    to { opacity: .9; transform: rotate(-90deg) translate3d(0, 5px, 0); }
  }
}

@layer responsive {
  @media (prefers-reduced-motion: reduce) {
    .manifesto[data-manifesto-state="static"],
    .manifesto[data-manifesto-state="static"] *,
    .manifesto[data-manifesto-state="static"]::before,
    .manifesto[data-manifesto-state="static"]::after {
      animation: none !important;
      transition: none !important;
    }

    .manifesto[data-manifesto-state="static"]::before { opacity: .56; transform: none; }
    .manifesto[data-manifesto-state="static"]::after { opacity: .34; transform: none; }

    .manifesto[data-manifesto-state="static"] .section-tag,
    .manifesto[data-manifesto-state="static"] .manifesto__type,
    .manifesto[data-manifesto-state="static"] .manifesto__note,
    .manifesto[data-manifesto-state="static"] .manifesto__note p {
      opacity: 1;
      clip-path: none;
      transform: none;
    }

    .manifesto[data-manifesto-state="static"] h2 span {
      opacity: 1;
      clip-path: none;
      transform: scaleX(.9);
    }

    .manifesto[data-manifesto-state="static"] .manifesto__stamp {
      z-index: 1;
      opacity: 1;
      transform: rotate(-90deg);
    }
  }
}