/* POCHÉ — home page. The film is the background; type visits.
   Layout here means the placement of copy over a fixed stage, plus the rail. */

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

body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 2px;
  border-radius: var(--sc-r-sm);
}

.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; top: 0; left: 0; z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-display); font-size: var(--t-label);
  text-decoration: none; border-radius: var(--sc-r-sm);
  translate: 0 -120%;
}
.skip:focus-visible { translate: 0 0; }

/* --------------------------------------------------------------- chrome -- */
.chrome {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1rem, 2.2vh, 1.6rem) var(--sc-gutter);
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }

/* The chrome is the one layer the harness cannot grade: shoot.mjs hides fixed
   elements before photographing the frame beneath, because a fixed bar paints in
   front of whatever scrolls under it. Measured by hand over the hall, the
   wordmark fell to 1.64:1 and the nav to 1.17:1. These are corner scrims sized
   to the two chrome clusters, the same shape the copy blocks use, so the density
   sits where the text is and the rest of the frame is untouched. */
.chrome::before, .chrome::after {
  content: ""; position: absolute; top: 0; z-index: -1;
  height: 260px; width: min(36rem, 52vw);
  pointer-events: none;
}
/* Radial, anchored in the corner. A linear gradient across a fixed box has to
   reach transparent before the box ends or it terminates in a visible horizontal
   edge, and a hard edge across the top of the frame reads as a UI bar, which is
   the full-frame overlay this design bans. A corner radial falls off in every
   direction and lands inside its own box. */
.chrome::before {
  left: 0;
  background: radial-gradient(125% 155% at 0% 0%,
    color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 66%, transparent) 26%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 48%,
    color-mix(in oklab, var(--sc-canvas) 10%, transparent) 64%,
    transparent 80%);
}
/* The nav sits top-right, which is the brightest corner of the hall and the
   gallery, so its scrim carries more density than the wordmark's. */
.chrome::after {
  right: 0;
  background: radial-gradient(125% 155% at 100% 0%,
    color-mix(in oklab, var(--sc-canvas) 97%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 88%, transparent) 28%,
    color-mix(in oklab, var(--sc-canvas) 58%, transparent) 48%,
    color-mix(in oklab, var(--sc-canvas) 20%, transparent) 66%,
    transparent 84%);
}
/* The still pages have a canvas ground of their own; no film, no scrim. */
.page-body .chrome::before, .page-body .chrome::after { content: none; }

.wordmark {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: 0.9375rem; letter-spacing: var(--tr-mark);
  text-decoration: none; color: var(--sc-ink);
}
.mark { width: 20px; height: 20px; display: block; fill: var(--sc-ink); flex: none; }

.chrome-nav { display: flex; gap: clamp(1rem, 2.4vw, 2rem); }
.chrome-nav a {
  font-family: var(--sc-font-mono);
  font-size: var(--t-anno); letter-spacing: var(--tr-anno);
  color: var(--sc-ink-soft); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: color var(--d-hover) var(--sc-ease-out),
              border-color var(--d-hover) var(--sc-ease-out);
}
.chrome-nav a[aria-current="page"] { color: var(--sc-ink); border-bottom-color: var(--sc-ink); }
/* On the home page the nav sits over film, where ink-soft measured 1.17:1 over
   the hall. The still pages keep the quiet ink-soft the DNA asks for, because
   there the ground is the canvas and it reads correctly. */
body:not(.page-body) .chrome-nav a { color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) {
  .chrome-nav a:hover { color: var(--sc-ink); border-bottom-color: var(--sc-ink); }
}

/* Grain sits above every leg. The engine gives legs z-index 100 to 120 inside
   the stage, so the stock z-index 3 would bury it. */
.sc-grain { z-index: 200; opacity: 0.04; }

/* The portrait poster needs <picture>, which pushes the <img> out of reach of
   the engine's `.sc-world__seg > :is(video, img, canvas)` direct-child rule and
   leaves it in document flow. Re-apply the same geometry through the wrapper. */
.sc-world__seg > picture { position: absolute; inset: 0; display: block; }
.sc-world__seg picture > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ----------------------------------------------------------------- type -- */
.t-display {
  margin: 0; font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--t-display); line-height: var(--lh-display);
  letter-spacing: var(--tr-display); text-wrap: balance;
}
.t-hero {
  margin: 0; font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--t-hero); line-height: var(--lh-hero);
  letter-spacing: var(--tr-hero); text-wrap: balance;
}
.t-head {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--t-head); line-height: var(--lh-head);
  letter-spacing: var(--tr-head); text-wrap: balance;
}
.t-body {
  margin: 0; font-size: var(--t-body); line-height: var(--lh-body);
  max-width: var(--measure); text-wrap: pretty; color: var(--sc-ink);
}
.t-small {
  margin: 0; font-size: 0.875rem; line-height: 1.55;
  max-width: var(--measure); color: var(--sc-ink-soft); text-wrap: pretty;
}
.t-label {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--t-label); letter-spacing: var(--tr-label); line-height: 1.4;
}
.t-anno {
  margin: 0; font-family: var(--sc-font-mono); font-weight: 400;
  font-size: var(--t-anno); letter-spacing: var(--tr-anno); line-height: 1.5;
  color: var(--sc-ink-soft); font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- line reveal --
   The mask is the .ln box; the inner element carries the travel. Latched by
   reveals.js off the engine's own window opacity, so scrubbing inside a window
   never replays it. Annotations are deliberately excluded: museum labels do not
   animate. */
[data-lines] .ln {
  display: block; overflow: hidden;
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}
[data-lines] .ln > i {
  display: block; font-style: inherit;
  transform: translateY(0.62em); opacity: 0;
  transition: transform var(--d-line) var(--sc-ease-out),
              opacity var(--d-line) var(--sc-ease-out);
}
.is-revealed [data-lines] .ln > i { transform: none; opacity: 1; }
[data-lines] .ln:nth-child(2) > i { transition-delay: 60ms; }
[data-lines] .ln:nth-child(3) > i { transition-delay: 120ms; }

[data-body] {
  opacity: 0; transform: translateY(0.4em);
  transition: opacity 500ms var(--sc-ease-out) 120ms,
              transform 500ms var(--sc-ease-out) 120ms;
}
.is-revealed [data-body] { opacity: 1; transform: none; }

/* The one display moment on the site gets the one scale settle. */
.t-display { transform-origin: 50% 60%; }
.is-revealed .t-display { animation: settle 900ms var(--sc-ease-out) both; }
@keyframes settle { from { scale: 1.015; } to { scale: 1; } }

/* ------------------------------------------------------------ copy anchors --
   Rotated so no two consecutive blocks share one, and placed in the negative
   space each anchor still was generated to leave. */
.copy {
  position: absolute; z-index: 2;
  max-width: min(var(--copy-w), 76vw);
  display: flex; flex-direction: column; gap: 1rem;
}
.copy--lead      { left: var(--sc-gutter); top: calc(4.5rem + clamp(1.5rem, 7vh, 4.5rem)); }
.copy--trail     { right: var(--sc-gutter); top: 42%; text-align: right; align-items: flex-end; }
.copy--center    { left: 50%; top: 50%; translate: -50% -50%; text-align: center;
                   align-items: center; max-width: min(46rem, 86vw); }
.copy--lead-low  { left: var(--sc-gutter); bottom: calc(var(--rail-h) + clamp(2rem, 9vh, 5.5rem)); }
.copy--trail-low { right: var(--sc-gutter); bottom: calc(var(--rail-h) + clamp(2rem, 9vh, 5.5rem));
                   text-align: right; align-items: flex-end; }
.copy--center-low{ left: 50%; translate: -50% 0; bottom: calc(var(--rail-h) + clamp(1.5rem, 5vh, 3rem));
                   text-align: center; align-items: center; max-width: min(40rem, 88vw); }

.copy .t-body, .copy .t-small { max-width: var(--measure); }
.copy--center-low .t-body { margin-inline: auto; }

.eyebrow { color: var(--sc-ink-soft); }

/* ---------------------------------------------------------------- scrims --
   Siblings of the copy they protect, windowed to the same ramps so they fade
   with it. Shaped to where the text actually sits: never a full-frame wash. */
.scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none !important; }
.scrim--lead {
  background: linear-gradient(to bottom right,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 68%, transparent) 26%,
    color-mix(in oklab, var(--sc-canvas) 26%, transparent) 48%,
    transparent 66%);
}
.scrim--lead-low {
  background: linear-gradient(to top right,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 68%, transparent) 26%,
    color-mix(in oklab, var(--sc-canvas) 26%, transparent) 48%,
    transparent 66%);
}
.scrim--trail-low {
  background: linear-gradient(to top left,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 68%, transparent) 26%,
    color-mix(in oklab, var(--sc-canvas) 26%, transparent) 48%,
    transparent 66%);
}
.scrim--trail {
  background: linear-gradient(to left,
    color-mix(in oklab, var(--sc-canvas) 88%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 62%, transparent) 22%,
    color-mix(in oklab, var(--sc-canvas) 24%, transparent) 42%,
    transparent 60%);
}
.scrim--center {
  background: radial-gradient(78% 58% at 50% 50%,
    color-mix(in oklab, var(--sc-canvas) 82%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 52%, transparent) 44%,
    color-mix(in oklab, var(--sc-canvas) 16%, transparent) 68%,
    transparent 86%);
}
/* The finale is the one block that must stay legible over every frame of the
   ascent AND the terrace, so its band is the densest scrim on the page. This is
   the one place the canvas is allowed to read through the film. */
.scrim--band {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 97%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 93%, transparent) 34%,
    color-mix(in oklab, var(--sc-canvas) 74%, transparent) 56%,
    color-mix(in oklab, var(--sc-canvas) 32%, transparent) 76%,
    transparent 92%);
}

/* ------------------------------------------------------------------ CTA -- */
.cta-row { margin: 0.5rem 0 0; }
.cta {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-decoration: none; border-radius: var(--sc-r-sm); white-space: nowrap;
  transition: background var(--d-hover) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: color-mix(in oklab, var(--sc-accent) 94%, black); }
}
.cta:active { translate: 0 1px; }

.contact {
  list-style: none; margin: 0.75rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
  font-size: 0.9375rem; color: var(--sc-ink-soft);
}
.contact a {
  color: var(--sc-ink); text-decoration: none;
  border-bottom: 1px solid var(--sc-line);
  padding-bottom: 1px;
  transition: border-color var(--d-hover) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .contact a:hover { border-bottom-color: var(--sc-ink); }
}

/* ------------------------------------------------------- THE LIVING PLAN --
   The signature move and the only navigation the film has. Draws with travel,
   stamps rooms as they are entered, marks the camera, jumps on click. */
.plan-rail {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  height: var(--rail-h);
  background: color-mix(in oklab, var(--sc-canvas) 92%, transparent);
  border-top: 1px solid var(--sc-line);
}
.plan-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plan-svg path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }

.plan-route { stroke: var(--sc-line); }
.plan-wall, .plan-door {
  stroke: var(--sc-line);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke 320ms var(--sc-ease-out);
}
.plan-room.is-past .plan-wall, .plan-room.is-past .plan-door { stroke: var(--sc-line); }
.plan-room.is-current .plan-wall, .plan-room.is-current .plan-door { stroke: var(--sc-accent); }
.plan-marker { fill: var(--sc-accent); stroke: none; }
.plan-ticks { display: none; }
.plan-ticks line { stroke: var(--sc-line); stroke-width: 1; vector-effect: non-scaling-stroke; }

.plan-stamps { list-style: none; margin: 0; padding: 0; }
.plan-stamps li {
  position: absolute; top: 8px; translate: -50% 0;
  font-family: var(--sc-font-mono); font-size: 0.625rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sc-ink-soft); white-space: nowrap;
  opacity: 0; transition: opacity 420ms var(--sc-ease-out);
  pointer-events: none;
}
.plan-stamps li.is-on { opacity: 1; }
.plan-stamps li.is-current { color: var(--sc-accent); }

.plan-current { display: none; }

.plan-nav { list-style: none; margin: 0; padding: 0; }
.plan-nav li { position: absolute; inset: 0 auto 0 auto; top: 0; bottom: 0; }
.plan-nav button {
  width: 100%; height: 100%; min-height: 44px;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; border-radius: var(--sc-r-sm);
}
@media (hover: hover) and (pointer: fine) {
  .plan-nav button:hover { background: color-mix(in oklab, var(--sc-ink) 5%, transparent); }
}

/* --------------------------------------------------------------- mobile --
   The authored portrait interpretation, not a scale-down. Every corner anchor
   becomes a bottom band; the plan reduces to route, ticks and one room name. */
@media (max-width: 860px) {
  .copy {
    inset-inline: var(--sc-gutter);
    left: var(--sc-gutter); right: var(--sc-gutter);
    top: auto; translate: none;
    bottom: calc(var(--rail-h) + clamp(1.25rem, 4vh, 2.5rem));
    max-width: none; text-align: left; align-items: stretch;
  }
  .copy--center { top: auto; }
  .copy--center-low { text-align: left; align-items: stretch; }
  .copy--center-low .t-body { margin-inline: 0; }

  /* Every corner gradient darkens a corner the copy has just left. Point the
     density at the band the copy actually occupies. */
  .scrim--lead, .scrim--lead-low, .scrim--trail, .scrim--trail-low, .scrim--center {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 95%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 80%, transparent) 26%,
      color-mix(in oklab, var(--sc-canvas) 34%, transparent) 48%,
      transparent 66%);
  }

  :root { --t-hero: clamp(1.9rem, 8vw, 2.6rem); --t-display: clamp(2.6rem, 12vw, 3.6rem); }

  .plan-room { display: none; }
  .plan-ticks { display: block; }
  .plan-stamps { display: none; }
  .plan-current {
    display: block; position: absolute; left: var(--sc-gutter); top: 8px;
    font-family: var(--sc-font-mono); font-size: 0.625rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent);
    margin: 0; pointer-events: none;
  }
  .chrome-nav { gap: 0.9rem; }
}

/* ------------------------------------------------------- reduced motion --
   The plan renders fully drawn, the marker jumps, every stamp is present, and
   the posters are the film. The whole story still reads. */
@media (prefers-reduced-motion: reduce) {
  [data-lines] .ln > i { transform: none; opacity: 1; transition: none; }
  [data-body] { opacity: 1; transform: none; transition: none; }
  .is-revealed .t-display { animation: none; }
  .plan-wall, .plan-door { stroke-dashoffset: 0 !important; }
  .plan-stamps li { opacity: 1; transition: none; }
  .cta, .chrome-nav a, .contact a { transition: none; }
}