/* ==========================================================================
   EDD ARROWS · Dark Ink Cinema
   Tokens first, then chrome, then the film, then the flow acts.
   ========================================================================== */

:root {
  --sc-canvas:      #080808;   /* ink black   */
  --sc-surface:     #121212;   /* carbon      */
  --sc-ink:         #ECE8E0;   /* bone        */
  --sc-ink-soft:    #9E9A93;   /* ash         */
  --sc-accent:      #A51D22;   /* arrows crimson */
  --sc-accent-ink:  #ECE8E0;
  --crimson-dark:   #7E1216;
  --smoke:          #242424;
  --skin-ink:       #1B130C;   /* dark type for the skin + white worlds */
  --skin-soft:      #57493C;

  --sc-font-display: "Big Shoulders Display", "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Archivo", system-ui, sans-serif;
  --sc-font-mono:    "Archivo", system-ui, sans-serif;

  --sc-r-sm: 2px; --sc-r-md: 2px; --sc-r-lg: 2px;   /* sharp world */
  --sc-shadow-color: 0 0% 1%;
}

.sc-display { font-weight: 700; text-transform: uppercase; }

/* ------------------------------------------------------------- chrome -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem var(--sc-gutter);
  pointer-events: none;
  mix-blend-mode: difference;   /* stays legible through the white world */
}
.bar a, .bar button { pointer-events: auto; text-decoration: none; color: var(--sc-ink); }
.bar__mark {
  font-family: var(--sc-font-display);
  font-weight: 700; font-size: 1.15rem; letter-spacing: 0.14em;
}
.bar__book {
  font-size: var(--sc-t-xs); letter-spacing: 0.22em; font-weight: 600;
  border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 40%, transparent);
  padding-bottom: 2px;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out);
}
.bar__book:hover { border-color: var(--sc-ink); }
.bar__actions { display: flex; align-items: center; gap: 1.1rem; }
.bar__language { position: relative; }
.bar__language-toggle {
  display: inline-flex; align-items: center; gap: 0.35rem; border: 0; padding: 0 0 2px;
  border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 28%, transparent);
  background: transparent; cursor: pointer; font: inherit; font-size: var(--sc-t-xs); font-weight: 600;
  letter-spacing: 0.18em;
}
.bar__language-toggle:hover { border-color: var(--sc-ink); }
.bar__language-menu {
  position: absolute; right: 0; top: calc(100% + 0.75rem); display: grid; min-width: 6.9rem;
  padding: 0.4rem; border: 1px solid rgb(236 232 224 / 0.28); background: rgb(8 8 8 / 0.94);
  box-shadow: 0 0.7rem 2rem rgb(0 0 0 / 0.24);
}
.bar__language-menu[hidden] { display: none; }
.bar__language-menu button {
  border: 0; padding: 0.58rem 0.65rem; background: transparent; text-align: left; cursor: pointer;
  font: inherit; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.18em; color: var(--sc-ink-soft);
}
.bar__language-menu button:hover, .bar__language-menu button[aria-pressed="true"] { color: var(--sc-ink); background: rgb(236 232 224 / 0.08); }

[data-sc-progress] { height: 2px; background: var(--sc-accent); }

.rail {
  position: fixed; right: calc(var(--sc-gutter) * 0.5); top: 50%;
  translate: 0 -50%;
  z-index: var(--sc-z-chrome);
  display: flex; flex-direction: column; gap: 1.15rem;
  mix-blend-mode: difference;
}
.rail a {
  position: relative; display: block; text-decoration: none;
  color: var(--sc-ink); opacity: 0.42;
  transition: opacity var(--sc-d-base) var(--sc-ease-out);
}
.rail__dot {
  display: block; width: 4px; height: 4px; border: 1px solid currentColor;
  border-radius: 50%; transition: transform var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out);
}
.rail__t {
  position: absolute; right: calc(100% + 0.7rem); top: 50%; translate: 0 -50%;
  font-size: 0.6rem; letter-spacing: 0.24em; white-space: nowrap; font-weight: 600;
  opacity: 0; transition: opacity var(--sc-d-fast) var(--sc-ease-out);
}
.rail a:hover, .rail a.is-active { opacity: 1; }
.rail a:hover .rail__t, .rail a:focus-visible .rail__t { opacity: 0.85; }
.rail a.is-active .rail__dot { background: currentColor; transform: scale(1.55); }

/* ==========================================================================
   THE FILM
   One pinned stage. Every scene is a layer inside it, mounted for the whole
   run and stacked in the same box, so a scene change is a change of what the
   stage is showing rather than a new screen arriving from below. The engine
   owns the pin; js/site.js owns everything inside.
   ========================================================================== */

.cin-stage { background: #000; }

/* A layer holds one scene: its media, its grade, its scrim, its caption.
   Opacity and visibility here belong to the scene as a whole. */
.cin-l {
  position: absolute; inset: 0;
  opacity: 0;
  will-change: opacity;
}

/* The media is what the camera moves and the lens blurs. It is a separate box
   from the layer on purpose: scale, blur and exposure must never touch the
   typography or the scrims sitting over the same frame. */
.cin-media {
  position: absolute; inset: 0;
  overflow: clip;
  will-change: transform, filter;
  transform-origin: 50% 50%;
}
.cin-media > .cin-video,
.cin-media > .cin-hold {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The poster is a live frame-holder: it is the same frame the clip opens on,
   so it holds the picture until a decoded frame exists to replace it and the
   stage is never empty. */
.cin-hold { z-index: 0; transition: opacity 420ms var(--sc-ease-out); }
.cin-video { z-index: 1; opacity: 0; transition: opacity 420ms var(--sc-ease-out); }
.is-clip > .cin-media > .cin-video { opacity: 1; }
.is-clip > .cin-media > .cin-hold  { opacity: 0; }
/* the hero clip is ambient, not scrubbed: it paints immediately */
.cin-l--hero .cin-video { opacity: 1; }

/* Scene grade. Dark footage joins the brand; skin and white stay true. */
.cin-l--hero .cin-video, .cin-l--hero .cin-hold {
  filter: saturate(0.8) contrast(1.07) brightness(0.88);
}
.cin-l--a1 .cin-video, .cin-l--a1 .cin-hold {
  filter: saturate(0.68) contrast(1.12) brightness(0.84);
}

.treat { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.treat--studio {
  background:
    radial-gradient(140% 105% at 50% 42%, transparent 46%, rgb(8 8 8 / 0.62) 100%),
    linear-gradient(180deg, rgb(8 8 8 / 0.34) 0%, transparent 26%);
}
.treat--process {
  background:
    radial-gradient(130% 100% at 55% 45%, transparent 40%, rgb(8 8 8 / 0.74) 100%),
    linear-gradient(180deg, rgb(8 8 8 / 0.4) 0%, transparent 30%, transparent 62%, rgb(8 8 8 / 0.55) 100%);
}

.cin-l--hero { z-index: 1; }
.cin-l--a1   { z-index: 2; }
.cin-l--w1   { z-index: 3; }
.cin-l--w2   { z-index: 4; }
.cin-l--w3   { z-index: 5; }
/* .cin-l--line { z-index: 6; } Act 03 temporarily disabled. */
.cin-l--ink  { z-index: 7; }
.cin-white   { z-index: 8; }
.cin-black   { z-index: 9; }
.cin-l--artist { z-index: 10; }
.cin-stage .sc-copy,
/* .cin-stage .line-copy, Act 03 temporarily disabled. */
.cin-stage .ink-label,
.cin-stage .hero-enter { z-index: var(--sc-z-copy); }

/* The exposure blowing out, and the black the ink leaves behind. Both are
   optical events inside the picture, not curtains over a section change. */
.cin-white {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 47%,
    #ffffff 0%,
    #ffffff calc(var(--cin-r, 8) * 0.55%),
    rgb(255 255 255 / 0) calc(var(--cin-r, 8) * 1.2%));
  will-change: opacity, background;
}
.cin-black {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: #000;
  will-change: opacity;
}

/* Deep links into the film: a zero-size target parked at each active act's
   scroll offset, so the rail works with scripting off. */
.cin-anchor {
  position: absolute; left: 0; width: 1px; height: 1px;
  top: calc(var(--u, 0) * var(--cin-k, 1) * 100vh);
  pointer-events: none; opacity: 0;
}

/* ---- copy inside the film ------------------------------------------------
   Same cue grammar as the engine's, keyed to film time instead of act time:
   "in0 in1 out0 out1" in viewport-heights of the film. */
[data-cue] { opacity: 0; will-change: opacity, transform; }
.ln { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.ln__i { display: block; will-change: transform; }

/* ---------------------------------------------------------------- hero -- */
.hero-copy { max-width: min(72rem, 90vw); bottom: clamp(4.8rem, 11vh, 7rem); }
.hero-name {
  width: min(90vw, 44rem); margin: 0 0 1.55rem;
  line-height: 0; overflow: visible;
}
.hero-name .intro { display: block; width: 100%; line-height: 0; }
.hero-name__art {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0.3rem 0.42rem 0 rgb(0 0 0 / 0.44));
}
.hero-role {
  font-size: 0.66rem; letter-spacing: 0.47em; font-weight: 600;
  color: var(--sc-ink); margin: 0; overflow: hidden; line-height: 1.3;
}
.hero-copy > .hero-role { display: none; }
.hero-identity {
  display: grid; gap: 0.95rem;
  margin-left: clamp(1rem, 5.6vw, 2.5rem);
}
.hero-location { display: grid; gap: 0.8rem; }
.hero-location__rule { width: 3.55rem; height: 2px; background: var(--sc-accent); }
.hero-location p {
  margin: 0; overflow: hidden; color: var(--sc-ink-soft);
  font-size: 0.61rem; letter-spacing: 0.4em; font-weight: 600;
}
.hero-sub {
  color: color-mix(in oklab, var(--sc-ink-soft) 82%, transparent); max-width: 16rem;
  margin: 2.6rem 0 0 clamp(1rem, 5.6vw, 2.5rem); font-size: 0.61rem; letter-spacing: 0.37em;
  line-height: 1.75; font-weight: 500;
  overflow: hidden;
}
.intro { display: inline-block; transform: translateY(118%); }
.sc-ready .intro { animation: introUp 0.95s var(--sc-ease-out) forwards; }
.sc-ready .intro--1 { animation-delay: 0.15s; }
.sc-ready .intro--2 { animation-delay: 0.42s; }
.sc-ready .intro--3 { animation-delay: 0.58s; }
@keyframes introUp { to { transform: translateY(0); } }

.hero-enter {
  position: absolute; pointer-events: none; left: 50%; bottom: 1.6rem; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  color: var(--sc-ink-soft);
}
.hero-enter__line {
  width: 1px; height: 42px;
  background: linear-gradient(180deg, transparent, var(--sc-ink));
  transform-origin: 50% 0;
  animation: enterPulse 2.6s var(--sc-ease-in-out) infinite;
}
.hero-enter__t { font-size: 0.58rem; letter-spacing: 0.34em; font-weight: 600; }
@keyframes enterPulse { 0%, 100% { transform: scaleY(0.35); } 55% { transform: scaleY(1); } }

/* --------------------------------------------------------------- act 01 -- */
.act1-copy .sc-label { color: var(--sc-ink-soft); margin-bottom: 0.6rem; letter-spacing: 0.28em; }
.act1-copy .sc-lede { font-size: var(--sc-t-lg); max-width: 30ch; margin-left: auto; }

/* ------------------------------------------------------ act 02 · works -- */
.cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: clip; }
.cam__img {
  height: 100svh; width: auto; max-width: none;
  will-change: transform;
}

.work-meta { position: absolute; z-index: 4; max-width: 26rem; }
.work-meta--right { right: var(--sc-gutter); bottom: clamp(2.5rem, 10vh, 6rem); text-align: right; }
.work-meta--left  { left: var(--sc-gutter);  bottom: clamp(2.5rem, 10vh, 6rem); }
.work-meta__n {
  font-size: var(--sc-t-xs); letter-spacing: 0.26em; color: var(--sc-ink-soft);
  margin: 0 0 0.4rem;
}
.work-meta__t { font-size: var(--sc-t-xl); line-height: 1; margin: 0 0 0.5rem; }
.work-meta__d { font-size: 0.66rem; letter-spacing: 0.24em; color: var(--sc-ink-soft); margin: 0; }

.work-scrim {
  background: linear-gradient(to top left,
    rgb(8 8 8 / 0.96) 0%,
    rgb(8 8 8 / 0.82) 24%,
    rgb(8 8 8 / 0.4) 46%,
    transparent 64%);
}
.work-scrim--left {
  background: linear-gradient(to top right,
    rgb(8 8 8 / 0.96) 0%,
    rgb(8 8 8 / 0.82) 24%,
    rgb(8 8 8 / 0.4) 46%,
    transparent 64%);
}

/* work 2: asymmetric split, vertical travel inside a masked frame */
.cin-l--w2 { display: grid; grid-template-columns: minmax(19rem, 34%) 1fr; }
.w2-side {
  position: relative;
  display: flex; align-items: flex-end;
  padding: 0 var(--sc-gutter) clamp(2.5rem, 10vh, 6rem);
}
.w2-side .work-meta { position: static; }
.w2-frame {
  position: relative; margin: 0; overflow: clip;
  will-change: transform, filter; transform-origin: 50% 50%;
}
.w2-frame .cam { position: absolute; inset: 0; }
.w2-scrim { display: none; z-index: 2; }
.w2-frame .cam__img { height: 100%; width: 100%; object-fit: cover; }

/* work 3 → the line: the match cut. This frame is the first frame of the Line
   clip, dissolved in at the bottom of the dive at the scale the clip opens on,
   so the photograph becomes footage without a still in between. */
.cin-cut {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; pointer-events: none;
  will-change: opacity, transform; transform-origin: 50% 50%;
}
.cin-l--w3 .work-meta__t { color: var(--sc-ink); }

/* --------------------------------------------------------- act 03 · line --
   Temporarily disabled with the matching HTML and JavaScript track.
.cin-l--line { background: #C9A98D; }
.line-copy {
  position: absolute; pointer-events: none;
  right: var(--sc-gutter); top: 50%; translate: 0 -50%;
  text-align: right;
  color: var(--skin-ink);
  max-width: min(38rem, 46vw);
}
.line-copy__big {
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  color: var(--skin-ink);
  margin: 0 0 1.3rem auto;
  max-width: 12ch;
}
.line-copy__s {
  color: #332920;
  font-size: var(--sc-t-lg);
  letter-spacing: 0.02em;
  margin: 0.35rem 0 0;
}
.line-copy__s--last { color: var(--skin-ink); font-weight: 600; }
*/

/* ---------------------------------------------------------- act 04 · ink -- */
.cin-l--ink { background: #060606; }
.ink-label {
  position: absolute;
  left: var(--sc-gutter); bottom: clamp(2.5rem, 10vh, 6rem);
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 600; font-size: var(--sc-t-base);
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--skin-ink);   /* lives inside the white world */
}

/* -------------------------------------------------------- act 05 · artist --
   Edd at work is the portrait: the scene arrives from the ink as a dim studio
   memory, while the text stays legible in a deliberately quiet foreground. */
.cin-l--artist { background: #000; overflow: clip; }
.artist__portal { position: absolute; inset: 0; perspective: 1400px; }
.artist__bg { position: absolute; inset: 0; z-index: 0; }
.artist__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; filter: brightness(0.28) saturate(0.42) contrast(1.08); }
.artist__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #000 0%, transparent 28%, transparent 68%, #080808 100%),
    linear-gradient(90deg, rgb(8 8 8 / 0.86) 0%, rgb(8 8 8 / 0.44) 49%, rgb(8 8 8 / 0.14) 100%);
}
.artist__inner {
  position: absolute; inset: 0; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 1fr);
  column-gap: clamp(2rem, 7vw, 8rem); row-gap: clamp(2rem, 5vh, 4rem);
  align-content: center; padding-block: clamp(3rem, 8vh, 6rem);
  transform-origin: 50% 32%; will-change: opacity, transform;
}
.artist__head { align-self: center; }
.artist__head .sc-label { letter-spacing: 0.32em; }
.artist__head h2 { margin: clamp(0.9rem, 2vh, 1.6rem) 0 0; }
.artist__body { align-self: center; max-width: 35rem; padding-top: clamp(1rem, 4vw, 4rem); }
.artist__body .sc-body { color: color-mix(in oklab, var(--sc-ink) 84%, var(--sc-ink-soft)); }
.artist__body .sc-body + .sc-body { margin-top: var(--sc-4); }
.artist__aside { margin: 0.9rem 0 0; color: var(--sc-ink-soft); font-size: 0.66rem; letter-spacing: 0.07em; font-style: italic; }
.artist__link {
  display: inline-block; margin-top: 1.5rem; border: 0;
  background: transparent; color: var(--sc-ink); cursor: pointer;
  font-size: var(--sc-t-sm); letter-spacing: 0.18em; font-weight: 600;
  border-bottom: 1px solid var(--sc-accent);
  padding-bottom: 4px;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.artist__link:hover { color: var(--sc-accent); }
.artist__facts {
  grid-column: 1 / -1; margin: clamp(1.4rem, 5vh, 4rem) 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 3rem); padding-top: clamp(1.4rem, 3vh, 2.4rem);
  border-top: 1px solid var(--sc-hairline);
}
.artist__facts dt {
  font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--sc-ink-soft); margin-bottom: 0.5rem;
}
.artist__facts dd {
  margin: 0; font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-xl); text-transform: uppercase; letter-spacing: 0.02em;
}

/* ==========================================================================
   ACT 06 · MORE WORK
   Six composed scenes, each its own 12-column grid. Placement is authored per
   scene, so the rhythm reads as art direction rather than as whatever the
   masonry algorithm decided this week.
   ========================================================================== */
.more__head { display: grid; grid-template-columns: 1fr auto; gap: 1rem 3rem; align-items: end; margin-bottom: clamp(2.25rem, 4vw, 4rem); }
.more__kicker { margin: 0 0 0.55rem; font-size: 0.58rem; letter-spacing: 0.27em; color: var(--sc-ink-soft); }
.more__head h2 { margin: 0; }
.more__filters { display: flex; gap: 1.5rem; justify-content: end; }
.more__filters button {
  background: none; border: 0; padding: 0 0 4px; cursor: pointer;
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-xs); letter-spacing: 0.24em; font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.more__filters button:hover { color: var(--sc-ink); }
.more__filters button[aria-pressed="true"] {
  color: var(--sc-ink); border-bottom-color: var(--sc-accent);
}
.more__book { grid-column: 1 / -1; justify-self: start; border: 0; border-bottom: 1px solid var(--sc-accent); background: transparent; color: var(--sc-ink); padding: 0 0 0.4rem; cursor: pointer; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.22em; }
.more__instagram { display: grid; justify-items: center; gap: 1.1rem; padding: clamp(4rem, 10vw, 8rem) 0 clamp(5rem, 12vw, 10rem); text-align: center; }
.more__instagram p { margin: 0; color: var(--sc-ink-soft); font-size: 0.58rem; letter-spacing: 0.27em; }
.more__instagram a { border: 1px solid rgb(236 232 224 / 0.32); color: var(--sc-ink); padding: 1rem 1.35rem; text-decoration: none; font-family: var(--sc-font-display); font-size: var(--sc-t-base); font-weight: 600; letter-spacing: 0.11em; transition: color var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out); }
.more__instagram a:hover { background: var(--sc-ink); border-color: var(--sc-ink); color: var(--sc-canvas); }

.folio { display: grid; gap: 0; border-top: 1px solid var(--sc-hairline); counter-reset: folio; }
.folio__scene {
  counter-increment: folio;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: start;
  min-height: 0;
  padding: clamp(3.5rem, 6vw, 6rem) 0 clamp(4.5rem, 8vw, 8rem);
  border-bottom: 1px solid var(--sc-hairline);
}
.folio__scene::before { content: "0" counter(folio); position: absolute; top: 1.25rem; left: 0; color: var(--sc-ink-soft); font-size: 0.58rem; letter-spacing: 0.24em; }
.folio__scene[hidden] { display: none; }

.folio__item { margin: 0; position: relative; }
.folio__frame {
  position: relative; overflow: clip;
  aspect-ratio: 4 / 5;
  background: #0e0e0e;
}
/* The pan box is taller than the frame so the parallax has somewhere to travel
   without ever exposing an edge. */
.folio__pan {
  position: absolute; inset: -7% 0;
  will-change: translate;
  translate: 0 var(--py, 0px);
}
.folio__pan img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--sc-ease-out), filter 700ms var(--sc-ease-out);
}
.folio__pan--macro img { object-position: 44% 26%; transform: scale(1.12); }

.folio__cap {
  display: flex; flex-direction: column; gap: 0.15rem;
  margin-top: 0.9rem; padding-left: 0;
  font-size: 0.6rem; letter-spacing: 0.22em; color: var(--sc-ink-soft);
  transition: color var(--sc-d-base) var(--sc-ease-out);
}
.folio__cap span:first-child { color: color-mix(in oklab, var(--sc-ink) 72%, transparent); }
.folio__cap--over {
  position: absolute; left: 1.4rem; bottom: 1.2rem; margin: 0;
  color: var(--sc-ink); text-shadow: 0 1px 10px rgb(8 8 8 / 0.75);
}
.folio__cap--over span:first-child { color: var(--sc-ink); }

/* scene 1 · one anchor alone, weighted right, the rest is negative space */
.folio--geisha { grid-column: 6 / 13; }
/* scene 2 · an unequal pair, the smaller one dropped down the page */
.folio--valkyrie { grid-column: 1 / 7; }
.folio--medusa   { grid-column: 8 / 12; margin-top: 26%; }
/* scene 3 · one monumental band, full width, cropped to a detail */
.folio--wonderland { grid-column: 1 / 13; }
/* scene 4 · a small offset detail against a medium piece */
.folio--hawk    { grid-column: 2 / 5; margin-top: 34%; }
.folio--biomech { grid-column: 6 / 13; }
/* scene 5 · a pair on a shifted baseline */
.folio--ram     { grid-column: 1 / 6; margin-top: 16%; }
.folio--phoenix { grid-column: 7 / 13; }
/* scene 6 · the closing anchor, centred */
.folio--swan { grid-column: 4 / 10; }

/* The chapter positions override the older freeform offsets above. */
.folio--geisha { grid-column: 7 / 13; }
.folio--valkyrie { grid-column: 2 / 7; }
.folio--medusa { grid-column: 8 / 12; margin-top: 0; }
.folio--wonderland { grid-column: 1 / 13; }
.folio--hawk { grid-column: 3 / 6; margin-top: 0; }
.folio--biomech { grid-column: 7 / 12; }
.folio--ram { grid-column: 2 / 7; margin-top: 0; }
.folio--phoenix { grid-column: 8 / 12; margin-top: 0; }

/* Every work is printed at the same scale. The gallery stays a sequence of
   spreads, but no image is visually promoted just because its source crop is
   wider or taller. */
.folio--geisha, .folio--wonderland, .folio--swan { grid-column: 5 / 9; }
.folio--valkyrie, .folio--hawk, .folio--ram { grid-column: 2 / 6; }
.folio--medusa, .folio--biomech, .folio--phoenix { grid-column: 8 / 12; }

/* ---- reveals. Three related patterns, alternated, never all at once ------ */
.folio__item { opacity: 0; transition: opacity 900ms var(--sc-ease-out); }
.folio__item.is-in { opacity: 1; }

[data-rev="a"] .folio__frame {              /* A · clip up from the bottom */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1150ms var(--sc-ease-out);
}
[data-rev="a"].is-in .folio__frame { clip-path: inset(0 0 0 0); }

[data-rev="b"] .folio__pan {                /* B · settle out of a slight push */
  scale: 1.045;
  transition: scale 1250ms var(--sc-ease-out);
}
[data-rev="b"].is-in .folio__pan { scale: 1; }

[data-rev="c"] .folio__frame {              /* C · horizontal mask */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1250ms var(--sc-ease-out);
}
[data-rev="c"].is-in .folio__frame { clip-path: inset(0 0 0 0); }

.folio__cap {
  opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity 700ms var(--sc-ease-out) 260ms,
              transform 700ms var(--sc-ease-out) 260ms,
              color var(--sc-d-base) var(--sc-ease-out);
}
.is-in .folio__cap { opacity: 1; transform: none; }

/* filtered out */
.folio__item.is-out { opacity: 0; transform: scale(0.985); }
.folio__item[hidden] { display: none; }

@media (hover: hover) and (pointer: fine) {
  .folio__item:hover .folio__pan img { transform: scale(1.04); filter: contrast(1.06) saturate(1.04); }
  .folio__item:hover .folio__pan--macro img { transform: scale(1.17); }
  .folio__item:hover .folio__cap { color: var(--sc-ink); }
  .folio__item:hover .folio__cap span:first-child { color: var(--sc-ink); }
}

/* ---------------------------------------------------------- act 07 · book -- */
/* ----------------------------------------------------------- booking brief -- */
.booking { width: min(100% - 2rem, 58rem); max-width: 58rem; padding: 0; border: 1px solid rgb(236 232 224 / 0.22); background: #0a0a0a; color: var(--sc-ink); box-shadow: 0 2rem 8rem rgb(0 0 0 / 0.75); }
.booking::backdrop { background: rgb(0 0 0 / 0.84); backdrop-filter: blur(10px); }
.booking__sheet { position: relative; min-height: min(42rem, 88svh); padding: clamp(2rem, 5vw, 4.5rem); overflow: auto; }
.booking__close { position: absolute; top: 1.2rem; right: 1.3rem; border: 0; background: none; color: var(--sc-ink); cursor: pointer; font-size: 2rem; font-weight: 300; line-height: 1; }
.booking__meta { display: flex; justify-content: space-between; padding-right: 2.3rem; margin-bottom: clamp(3rem, 8vh, 6rem); color: var(--sc-ink-soft); font-size: 0.58rem; letter-spacing: 0.26em; }
.booking__step { max-width: 42rem; }
.booking__step > .sc-label { margin-bottom: 1rem; }
.booking__step h2 { font-size: clamp(2.8rem, 7vw, 5.8rem); line-height: 0.9; margin-bottom: clamp(2.2rem, 5vh, 4rem); }
.booking label { display: grid; gap: 0.65rem; margin-top: 1.4rem; color: var(--sc-ink-soft); font-size: 0.63rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.booking label span { color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
.booking__direction { margin: 0; padding: 0; border: 0; }
.booking__direction legend { margin-bottom: 0.9rem; color: var(--sc-ink-soft); font-size: 0.63rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.booking__choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.booking__choice { position: relative; min-height: 6.5rem; align-content: end; margin: 0 !important; padding: 0.9rem; border: 1px solid rgb(236 232 224 / 0.22); color: var(--sc-ink-soft) !important; cursor: pointer; transition: border-color var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); }
.booking__choice input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.booking__choice span { color: inherit !important; font-family: var(--sc-font-display); font-size: var(--sc-t-base); line-height: 0.95; letter-spacing: 0.06em; }
.booking__choice:hover, .booking__choice:focus-within { border-color: var(--sc-ink-soft); color: var(--sc-ink) !important; }
.booking__choice:has(input:checked) { border-color: var(--sc-accent); background: rgb(197 45 45 / 0.12); color: var(--sc-ink) !important; }
.booking input, .booking textarea, .booking select { width: 100%; border: 0; border-bottom: 1px solid rgb(236 232 224 / 0.28); border-radius: 0; background: transparent; color: var(--sc-ink); padding: 0.75rem 0; outline: none; font: inherit; font-size: var(--sc-t-base); letter-spacing: normal; text-transform: none; }
.booking textarea { min-height: 7.2rem; resize: vertical; line-height: 1.45; }
.booking select { appearance: none; cursor: pointer; }
.booking input:focus, .booking textarea:focus, .booking select:focus { border-color: var(--sc-accent); }
.booking__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 2rem; }
.booking__actions { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-top: clamp(2.2rem, 6vh, 4rem); }
.booking__next, .booking__send { margin-top: clamp(2.2rem, 6vh, 4rem); border: 0; background: var(--sc-accent); color: var(--sc-accent-ink); cursor: pointer; padding: 1rem 1.4rem; font-family: var(--sc-font-display); font-size: var(--sc-t-base); font-weight: 700; letter-spacing: 0.1em; }
.booking__actions .booking__send, .booking__actions .booking__next { margin-top: 0; }
.booking__back { border: 0; background: transparent; color: var(--sc-ink-soft); cursor: pointer; font-size: 0.65rem; letter-spacing: 0.2em; }
.booking__next:hover, .booking__send:hover { background: var(--crimson-dark); }

.close { background: var(--sc-canvas); }
.close__inner {
  position: absolute; inset: 0; z-index: var(--sc-z-copy);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--sc-gutter);
  max-width: var(--sc-maxw); margin-inline: auto; width: 100%;
}
.close__callout { display: flex; flex-direction: column; align-items: flex-start; }
.close__h {
  font-size: clamp(3rem, 9.5vw, 8.6rem);
  line-height: 0.94; margin: 0 0 clamp(2rem, 5vh, 3.5rem);
}
.close__cta {
  align-self: flex-start;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  text-decoration: none;
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--sc-t-lg); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1.05rem 2.2rem; border: 0; cursor: pointer;
  transition: background var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
.close__cta:hover { background: var(--crimson-dark); }
.close__cta:active { transform: scale(0.97); }
.close__location { position: relative; z-index: 3; width: min(100%, 34rem); margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.close__map { height: clamp(11rem, 24vh, 15rem); overflow: hidden; border: 1px solid rgb(236 232 224 / 0.34); background: #111; pointer-events: auto; }
.close__map iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: auto; }
.close__location > a { display: inline-block; margin-top: 0.55rem; color: var(--sc-ink-soft); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.2em; text-decoration: none; transition: color var(--sc-d-fast) var(--sc-ease-out); }
.close__location > a:hover { color: var(--sc-ink); }
.close__meta {
  display: flex; flex-wrap: wrap; gap: 0.8rem 3rem;
  margin-top: clamp(1.25rem, 3vh, 2rem);
  font-size: 0.66rem; letter-spacing: 0.22em; color: var(--sc-ink-soft);
}
.close__meta a { color: var(--sc-ink-soft); text-decoration: none; transition: color var(--sc-d-fast) var(--sc-ease-out); }
.close__meta a:hover { color: var(--sc-ink); }
.foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--sc-z-copy);
  display: flex; justify-content: space-between;
  padding: 1.2rem var(--sc-gutter);
  font-size: 0.6rem; letter-spacing: 0.24em; color: var(--sc-ink-soft);
}

/* ------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .rail { display: none; }

  .hero-name { width: min(90vw, 31rem); }
  .hero-copy { bottom: clamp(4.4rem, 11vh, 6.5rem); }

  .cin-l--hero .cin-video, .cin-l--hero .cin-hold,
  .cin-l--a1 .cin-video, .cin-l--a1 .cin-hold { object-position: 38% 50%; }

  .cin-l--w2 { grid-template-columns: 1fr; }
  .w2-side {
    position: absolute; inset: auto 0 0 0; z-index: 3;
    padding: 0 var(--sc-gutter) 2.2rem;
  }
  .w2-frame { position: absolute; inset: 0; }
  .w2-scrim {
    display: block;
    background: linear-gradient(to top,
      rgb(8 8 8 / 0.96) 0%,
      rgb(8 8 8 / 0.78) 24%,
      rgb(8 8 8 / 0.35) 44%,
      transparent 60%);
  }
  .work-meta--right, .work-meta--left { right: var(--sc-gutter); left: var(--sc-gutter); text-align: left; max-width: none; }
  .work-scrim, .work-scrim--left {
    background: linear-gradient(to top,
      rgb(8 8 8 / 0.96) 0%,
      rgb(8 8 8 / 0.8) 22%,
      rgb(8 8 8 / 0.38) 42%,
      transparent 58%);
  }
  .work-meta { text-shadow: 0 1px 12px rgb(8 8 8 / 0.65); }

  .act1-copy .sc-lede { margin-left: 0; }

  .line-copy {
    right: var(--sc-gutter); left: var(--sc-gutter);
    top: auto; bottom: clamp(3rem, 12vh, 6rem); translate: 0 0;
    max-width: none; text-align: left;
  }
  .line-copy__big { font-size: clamp(2rem, 9.5vw, 3rem); margin-left: 0; }

  .artist__inner { grid-template-columns: 1fr; }
  .artist__portrait { display: none; }
  .artist__head .sc-label { visibility: hidden; }
  .artist__facts { grid-column: 1; grid-template-columns: 1fr; gap: var(--sc-4); }

  .more__head { grid-template-columns: 1fr; }
  .more__filters { justify-content: start; flex-wrap: wrap; }
  .folio { gap: 0; }
  .folio__scene { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; min-height: auto; padding: 4rem 0; }
  .folio--geisha, .folio--wonderland, .folio--swan { grid-column: 2 / 6; }
  .folio--valkyrie, .folio--hawk, .folio--ram { grid-column: 1 / 4; }
  .folio--medusa, .folio--biomech, .folio--phoenix { grid-column: 4 / 7; }
  .folio__cap--over { left: 1rem; bottom: 0.9rem; }

  .booking { width: 100%; max-width: none; min-height: 100svh; border-inline: 0; }
  .booking__sheet { min-height: 100svh; padding: 2rem 1.4rem; }
  .booking__meta { margin-bottom: 3rem; }
  .booking__fields { grid-template-columns: 1fr; gap: 0; }
  .booking__choices { grid-template-columns: 1fr; }
  .booking__choice { min-height: auto; padding: 0.9rem 1rem; }
  .booking__step h2 { font-size: clamp(2.5rem, 13vw, 4.2rem); }

  .close__h { font-size: clamp(2.6rem, 12.5vw, 4.6rem); }
  .close__cta { font-size: var(--sc-t-base); padding: 0.95rem 1.6rem; }
  .close__map { height: auto; aspect-ratio: 1.25 / 1; }
  .foot { flex-direction: column; gap: 0.3rem; }
}

@media (min-width: 861px) {
  .hero-copy { bottom: clamp(3.5rem, 9vh, 7rem); }
  .hero-name { width: min(48vw, 44rem); }
  .hero-sub { margin-top: 3.2rem; }
  .close__callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(2rem, 5vw, 5.5rem); align-self: center; width: min(100%, 70rem); }
  .close__h { margin: 0; font-size: clamp(3.8rem, 6.6vw, 7rem); }
  .close__cta { align-self: center; white-space: nowrap; }
  .close__location { align-self: center; width: min(100%, 70rem); margin-top: clamp(3.25rem, 7vh, 5rem); }
  .close__map { height: clamp(14rem, 31vh, 20rem); }
}

/* mobile scenes 2/4/5 stack rather than squeeze into unreadable columns */
@media (max-width: 560px) {
  .folio__scene { grid-template-columns: 1fr; }
  .folio__item { grid-column: auto !important; margin-top: 0 !important; }
}

/* ------------------------------------------------------ reduced motion -- */
/* Fewer and gentler, not zero. The film keeps its order and its copy; it just
   stops being scrubbed. Posters carry every frame and nothing scales or blurs. */
@media (prefers-reduced-motion: reduce) {
  .intro { transform: none; }
  .sc-ready .intro { animation: none; }
  .hero-enter__line { animation: none; transform: scaleY(1); }
  .cin-video { display: none; }
  .cin-hold { opacity: 1 !important; }
  /* The hero's blur is a treatment, not an animation: the artist should read as
     present without being identifiable here too. Nothing else is filtered,
     because nothing else writes one when the clock stops scrubbing. */
  .cin-l--hero .cin-media { filter: blur(4.5px); transform: scale(1.06); }
  .cam__img { transform: none !important; }
  .cin-cut { transition: opacity 200ms linear; }
  [data-emerge].is-emerged { animation: none; opacity: 1; }
  .artist__head.is-emerged::before { animation: none; opacity: 0.4; transform: scale(1); }
  .folio__item, .folio__frame, .folio__pan, .folio__cap { transition-duration: 260ms; }
  [data-rev] .folio__frame { clip-path: none !important; }
  [data-rev="b"] .folio__pan { scale: 1 !important; }
  .folio__pan { translate: none !important; }
}