/* Iconic — Cinematic Exhibition Sequence (prototype v20, unified background)
   Three independent layers, in this order:
     1. ONE continuous exhibition canvas painted once on .iconic-exhibition;
     2. the approved artwork crops, alpha-masked so they emerge from it;
     3. text, navigation and the chapter rail above both.
   No stage, threshold, chapter, wrapper or media element paints a background
   of its own — that was the rectangle/seam failure mode, and those rules are
   deleted here rather than overridden. */

.page-series--cinematic {
  /* Exhibition climate. The ground is the measured median of the plaster
     field in the approved compositions (sampled #a2978c / #a49a8e), so the
     four baked-in atmospheric grounds sit flush against the canvas instead of
     against a lighter tone. */
  /* Retuned to the V2 canvas's own top-edge tone (#b29f8f measured over its first
     100 rows) so the hero hands off to the asset on one tone. The previous value
     (#a2988e) was derived from the earlier reference plates and left a 14/255 step
     at the exhibition boundary once the V2 asset was dropped in. */
  --iconic-ground: #ae9c8d;
  --iconic-ground-rgb: 174, 156, 141;
  --iconic-text: #29251f;
  --iconic-text-soft: #4f473f;
  --iconic-quiet: #6c6158;
  --iconic-accent: #6d4e25;
  background: var(--iconic-ground);
  color: var(--iconic-text);
  overflow-x: hidden;
}

.page-series--cinematic .site-nav.is-scrolled {
  background: rgba(var(--iconic-ground-rgb), 0.88);
}

/* ==========================================================================
   THE UNIFIED EXHIBITION CANVAS
   --------------------------------------------------------------------------
   One generated atmosphere asset, painted once, shared by the whole exhibition.

     layer 2  chapter drift   .iconic-exhibition::after  (scrolls, tint only)
     layer 1  atmosphere      .iconic-exhibition::before (fixed, the asset)
     layer 0  plaster ground  background-color

   The asset is the ONLY source of texture on the page. Nothing else paints a
   background: no stage, threshold, chapter, wrapper or media element. The
   chapter drift above it is pure low-alpha tint spanning all three chapters as
   a single gradient, so it cannot resolve into a band or a panel.

   Asset contract (see references/ and BACKGROUND-ASSET-SPEC.md):
     path   multipage/assets/atmosphere/iconic-exhibition-canvas.webp
     size   900 x 12669 — the exhibition's own aspect (1 : 14.077), so `cover`
            is a uniform 1.228x upscale with no crop, no stretch, no repeat.
     tone   perimeter settles to #a99d95; field median ~#a3988a
     atmosphere only — no character fragment, no text, no frame, no vignette.
   ========================================================================== */
.iconic-exhibition {
  position: relative;
  isolation: isolate;
  background-color: var(--iconic-ground);
}

.iconic-exhibition::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--iconic-ground);
  /* ONE generated atmosphere asset, scrolling with the works so its deposits can
     be composed — a rich passage may sit where no copy falls at that scroll
     position. The asset is authored at 900 x 12669, the exact aspect of the
     exhibition (1 : 14.077), so `cover` resolves to a uniform 1.228x upscale
     with no crop and no distortion. Soft plaster is entirely low-frequency, so
     that upscale costs nothing and further suppresses grain.
     The four feTurbulence tiles and the six mineral-deposit gradients that used
     to live here are deleted, not overridden. */
  background-image: url("../../assets/atmosphere/iconic-exhibition-canvas.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* The ONLY thing layered above the canvas: an extremely subtle, exhibition-scale
   chapter drift. It scrolls (position:absolute) over the fixed canvas, is pure
   low-alpha tint with no texture of its own, and spans all three chapters as one
   gradient — so it can never produce a chapter block or a stage background. */
.iconic-exhibition::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(180deg,
    rgba(178, 169, 159, 0.10) 0%,
    rgba(170, 160, 150, 0.05) 8%,
    rgba(166, 152, 138, 0.05) 26%,
    rgba(160, 152, 140, 0.00) 46%,
    rgba(150, 150, 140, 0.05) 58%,
    rgba(146, 142, 142, 0.06) 74%,
    rgba(150, 142, 146, 0.08) 90%,
    rgba(158, 150, 150, 0.10) 100%);
}

/* Shared type */
.iconic-kicker,
.iconic-groups,
.iconic-index,
.iconic-meta,
.iconic-note,
.iconic-route,
.iconic-threshold__note,
.iconic-atmosphere-caption,
.iconic-enter {
  font-family: var(--sans);
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 200;
  letter-spacing: 0.22em;
  line-height: 1.7;
  text-transform: uppercase;
}

.iconic-index,
.iconic-meta,
.iconic-note {
  font-weight: 300;
  letter-spacing: 0.18em;
}

/* ---------- Hero ---------- */
.iconic-atmosphere-hero {
  --mx: 0px;
  --my: 0px;
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 2rem);
  min-height: calc(100svh - 2rem);
  overflow: hidden;
  background: var(--iconic-ground);
}

.iconic-atmosphere-field {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}

.iconic-atmosphere-field::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--iconic-ground-rgb), 0.22) 0 18%, transparent 36%, transparent 82%, rgba(var(--iconic-ground-rgb), 0.14) 100%),
    linear-gradient(180deg, rgba(var(--iconic-ground-rgb), 0.42), transparent 14%, transparent 78%, rgba(var(--iconic-ground-rgb), 0.72) 93%, var(--iconic-ground) 100%);
  pointer-events: none;
}

.iconic-atmosphere-field img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: 0.88;
  transform: scale(1.035) translate3d(calc(var(--mx) * -0.08), calc(var(--my) * -0.08), 0);
  transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
}

.iconic-atmosphere-art {
  position: absolute;
  inset: 0 0 0 29%;
  z-index: -1;
  margin: 0;
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.55) 3%, #000 10%, #000 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0, rgba(0, 0, 0, 0.34) 5%, rgba(0, 0, 0, 0.8) 10%, #000 14%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.55) 3%, #000 10%, #000 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0, rgba(0, 0, 0, 0.34) 5%, rgba(0, 0, 0, 0.8) 10%, #000 14%, #000 100%);
  mask-composite: intersect;
}

.iconic-atmosphere-art img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 51% center;
  filter: saturate(0.96) contrast(0.985);
  transform: scale(1.02) translate3d(calc(var(--mx) * 0.08), calc(var(--my) * 0.08), 0);
  transition: transform 800ms cubic-bezier(.2, .7, .2, 1);
}

.iconic-atmosphere-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: min(36rem, calc(28% - var(--gutter)));
  max-width: 36rem;
  min-height: inherit;
  padding: clamp(8.5rem, 16vh, 12rem) 0 clamp(3.2rem, 7vh, 5.5rem) var(--gutter);
}

.iconic-atmosphere-copy .iconic-atmosphere-index {
  margin: 0 0 1.35rem;
  color: var(--iconic-accent);
}

.iconic-atmosphere-copy h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(5.3rem, 10vw, 10.5rem);
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 0.72;
  color: var(--iconic-text);
}

.iconic-lede {
  max-width: 31rem;
  margin: clamp(2.3rem, 5vh, 4rem) 0 0;
  color: var(--iconic-text-soft);
  font-family: var(--sans);
  font-size: clamp(0.92rem, 1.15vw, 1.08rem);
  font-weight: 300;
  line-height: 1.75;
}

.iconic-groups {
  margin: 1.15rem 0 0;
  color: var(--iconic-quiet);
}

.iconic-enter {
  align-self: flex-start;
  margin-top: clamp(2rem, 4vh, 3.2rem);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(109, 78, 37, 0.7);
  color: var(--iconic-text);
  transition: border-color 250ms ease, color 250ms ease;
}

.iconic-enter span {
  display: inline-block;
  margin-left: 0.65rem;
}

.iconic-enter:hover {
  border-color: var(--iconic-text);
  color: var(--iconic-accent);
}

.iconic-atmosphere-caption {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2rem, 4vh, 3.25rem);
  z-index: 3;
  margin: 0;
  color: rgba(41, 37, 31, 0.58);
  writing-mode: vertical-rl;
}

/* ---------- Corridor ---------- */
.iconic-corridor {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: clamp(3.5rem, 7vh, 6rem) var(--gutter);
  scroll-margin-top: 5rem;
}

.iconic-corridor__aside .iconic-kicker {
  margin: 0 0 1.75rem;
  color: var(--iconic-quiet);
}

.iconic-chapter-nav {
  display: grid;
  gap: 0;
}

.iconic-chapter-nav a {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.95rem 0;
  border-top: 1px solid rgba(41, 37, 31, 0.16);
  color: var(--iconic-text);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 250ms ease;
}

.iconic-chapter-nav a:last-child {
  border-bottom: 1px solid rgba(41, 37, 31, 0.16);
}

.iconic-chapter-nav a span {
  color: var(--iconic-quiet);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
}

.iconic-chapter-nav a:hover {
  color: var(--iconic-accent);
}

.iconic-corridor__copy p {
  margin: 0;
  max-width: 58rem;
  color: rgba(41, 37, 31, 0.86);
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.7;
}

/* ---------- Chapter thresholds ---------- */
.iconic-chapter {
  scroll-margin-top: 5rem;
}

.iconic-threshold {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-height: 42vh;
  min-height: 42svh;
  padding: clamp(5rem, 10vh, 8rem) var(--gutter) clamp(2.5rem, 5vh, 4rem);
  overflow: hidden;
  color: var(--iconic-text);
}

/* Thresholds are pure typography. The three chapter background blocks that
   used to live here are deleted: the chapter evolution is now carried by the
   vertical drift of the single exhibition canvas, so a threshold can never
   read as a band across the page. */
.iconic-threshold {
  background: transparent;
}

.iconic-route {
  position: relative;
  z-index: 1;
  margin: 0 0 1rem;
  color: var(--iconic-quiet);
}

.iconic-threshold h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4.8rem, 11vw, 11rem);
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 0.86;
}

.iconic-threshold__note {
  position: relative;
  z-index: 1;
  margin: 1.4rem 0 0;
  color: var(--iconic-quiet);
}

/* ---------- Stages ---------- */
.iconic-stage {
  --ground: var(--iconic-ground);
  --ground-rgb: 170, 160, 152;
  --ink: var(--iconic-text);
  --soft: var(--iconic-text-soft);
  --bloom: rgba(132, 75, 70, 0.2);
  --cool: rgba(79, 102, 117, 0.2);
  --focus-x: 50%;
  --focus-y: 48%;
  position: relative;
  isolation: isolate;
  /* When min-height exceeds the inner content, centre the scene instead of
     leaving the whole leftover as a trailing band below the work. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--ink);
  background: transparent;
}

/* No .iconic-stage::before. Each stage is a transparent window onto the one
   exhibition canvas; the per-work --ground/--bloom/--cool custom properties in
   the markup are left in place but are no longer painted by anything, so there
   is nothing to butt against the stage above or below. overflow:hidden stays —
   the suite figures overhang their column by design. */

.iconic-stage__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: clamp(3.25rem, 5.5vh, 5.75rem) var(--gutter);
  gap: clamp(1rem, 2vw, 2rem);
}

.iconic-stage__media {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* Localised edge halo, coloured from the artwork's own outer band (--halo-rgb
   is measured per work at the end of this file). It exists only where a crop
   is present, ends at 74% of an ellipse that is itself inside the media box,
   and is skipped entirely on stages that have none — so it cannot square up
   into a plate or a card. */
.iconic-stage__media::before {
  content: '';
  position: absolute;
  inset: -4%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 47% 45% at 50% 53%,
    rgba(var(--halo-rgb, var(--iconic-ground-rgb)), 0.20) 0 24%,
    rgba(var(--halo-rgb, var(--iconic-ground-rgb)), 0.08) 50%,
    transparent 74%);
}

.iconic-stage__copy {
  position: relative;
  z-index: 3;
  max-width: 30rem;
}

/* No copy backing on ordinary stages: the text sits beside its crop, on the
   canvas, and the canvas is light enough to carry it. Only the three panoramas
   — where copy overlays artwork — keep a scrim, and that one is a soft bloom
   in the canvas's own tone rather than a text card (see the panorama block). */

.iconic-index {
  margin: 0 0 1.2rem;
  color: color-mix(in srgb, var(--ink) 55%, var(--soft));
  font-weight: 300;
}

.iconic-stage__copy h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 4.8vw, 5.6rem);
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.88;
  color: var(--ink);
}

.iconic-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.55rem;
  margin: 1.45rem 0 0;
  color: color-mix(in srgb, var(--ink) 68%, #6a5a4c);
  font-weight: 300;
}

.iconic-summary {
  margin: 1.55rem 0 0;
  color: color-mix(in srgb, var(--ink) 82%, var(--soft));
  font-family: var(--sans);
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  font-weight: 300;
  line-height: 1.7;
}

.iconic-note {
  display: block;
  margin-top: 1.5rem;
  color: rgba(70, 60, 52, 0.78);
}

/* Figures / dissolves */
.iconic-figure {
  margin: 0;
  overflow: visible;
  background: transparent;
}

.iconic-figure img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--focus-x) var(--focus-y);
  filter: saturate(0.96) contrast(0.99);
}

/* V17 atmospheric plates
   The 13 formerly crop-led scenes now use exact-pixel subject extractions on
   work-specific mineral/textile grounds. The cinematic stage rhythm remains
   unchanged: only the media field is unified. */
.iconic-stage--atmosphere .iconic-stage__inner {
  width: 100%;
  max-width: none;
}

.iconic-stage--atmosphere .iconic-stage__media--atmosphere {
  --atmosphere-h: min(74svh, 52rem);
  grid-column: 1 / 13;
  grid-row: 1;
  width: 100%;
  height: min(74vh, 52rem);
  height: var(--atmosphere-h);
  justify-self: stretch;
  overflow: hidden;
}

/* The over-painted edge bands are gone. The composite now fades to alpha 0
   through its own mask, so the shared canvas shows through the edge instead of
   a band of --ground being laid on top of it. */
.iconic-stage--atmosphere .iconic-stage__media--atmosphere::before {
  display: none;
}

/* Give the figure the composite's own 3:2 ratio inside the unchanged media box
   and centre it. The media box keeps its height, so stage heights and the
   vertical rhythm are untouched; but the figure box now coincides exactly with
   the painted pixels at every viewport, which is what lets the percentage mask
   land on the image's real edge instead of on letterbox space. */
.iconic-stage--atmosphere .iconic-stage__media--atmosphere {
  display: grid;
  place-items: center;
}

.iconic-stage--atmosphere .iconic-stage__media--atmosphere .iconic-figure {
  width: min(100%, calc(var(--atmosphere-h) * 1.5));
  aspect-ratio: 3 / 2;
  height: auto;
  max-height: 100%;
}

.iconic-stage--atmosphere .iconic-stage__media--atmosphere img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none;
}

.iconic-stage--atmosphere .iconic-stage__copy {
  align-self: center;
}

/* Keep the unified media field full-width on desktop/tablet.
   The atmosphere media rule above (grid-column: 1 / 13) has the same 0,2,0
   specificity as the stage-layout rules further down the file
   (.iconic-stage--focus-right/left/center .iconic-stage__media, ledger,
   intimate, wide, detail …), and those come later — so source order silently
   won them, compressing every atmosphere composite that also carries a focus/
   ledger/intimate/wide class into a 40–75% side plate with a dead centre void.
   Only sitt & shajara (no focus-* class) rendered as intended. Restore the
   author's full-width intent for all of them. Specificity here is 0,4,0
   (.iconic-stage + .iconic-stage--atmosphere + double media class) so it beats
   even the compound 0,3,0 stage rules that come later in the file — most
   notably `.iconic-stage--ledger.iconic-stage--focus-left .iconic-stage__media`
   (phaedra), which ties a 0,3,0 selector and would otherwise win on order.
   Scoped to >=921px; the mobile block (<=920px) keeps its own
   width/aspect-ratio treatment untouched. */
@media (min-width: 921px) {
  .iconic-stage.iconic-stage--atmosphere .iconic-stage__media.iconic-stage__media--atmosphere {
    grid-column: 1 / 13;
    grid-row: 1;
    width: 100%;
    justify-self: stretch;
  }
}

/* The three shared dissolve classes now carry framing only. The universal
   oval and the two universal directional wipes are deleted; every crop gets a
   composition-specific mask in the CROP INTEGRATION section at the end of this
   file, so no two works dissolve the same way. */
.iconic-figure--dissolve-oval img,
.iconic-figure--dissolve-east img,
.iconic-figure--dissolve-west img {
  aspect-ratio: 1.68 / 1;
}

/* Portrait stages */
.iconic-stage--portrait,
.iconic-stage--intimate,
.iconic-stage--wide {
  min-height: 78vh;
  min-height: 78svh;
}

.iconic-stage--focus-right .iconic-stage__media {
  grid-column: 5 / 13;
  grid-row: 1;
}

.iconic-stage--focus-right .iconic-stage__copy {
  grid-column: 1 / 6;
  grid-row: 1;
}

.iconic-stage--focus-left .iconic-stage__media {
  grid-column: 1 / 9;
  grid-row: 1;
}

.iconic-stage--focus-left .iconic-stage__copy {
  grid-column: 8 / 13;
  grid-row: 1;
  justify-self: end;
}

.iconic-stage--focus-center .iconic-stage__media {
  grid-column: 3 / 12;
  grid-row: 1;
}

.iconic-stage--focus-center .iconic-stage__copy {
  grid-column: 1 / 5;
  grid-row: 1;
  align-self: end;
  padding-bottom: clamp(2rem, 5vh, 5rem);
}

.iconic-stage--quiet {
  min-height: 68vh;
  min-height: 68svh;
}

.iconic-stage--quiet .iconic-stage__copy h3 {
  font-size: clamp(2.4rem, 4vw, 4.6rem);
}

.iconic-stage--intimate .iconic-stage__media {
  grid-column: 1 / 8;
}

.iconic-stage--intimate .iconic-stage__copy {
  grid-column: 7 / 13;
  justify-self: end;
}

.iconic-stage--wide .iconic-stage__media {
  grid-column: 1 / 10;
}

.iconic-stage--wide .iconic-stage__copy {
  grid-column: 8 / 13;
  justify-self: end;
}

/* Ledger — text-led */
.iconic-stage--ledger {
  min-height: 64vh;
  min-height: 64svh;
}

.iconic-stage--ledger .iconic-stage__copy {
  grid-column: 1 / 6;
  grid-row: 1;
  max-width: 34rem;
}

.iconic-stage--ledger .iconic-stage__media {
  grid-column: 6 / 13;
  grid-row: 1;
  width: 88%;
  justify-self: end;
}

.iconic-stage--ledger.iconic-stage--focus-left .iconic-stage__copy {
  grid-column: 7 / 13;
  justify-self: end;
}

.iconic-stage--ledger.iconic-stage--focus-left .iconic-stage__media {
  grid-column: 1 / 7;
  justify-self: start;
}

.iconic-stage--ledger .iconic-stage__copy h3 {
  font-size: clamp(2.6rem, 4.2vw, 4.8rem);
}

/* Detail suites */
.iconic-stage--detail,
.iconic-stage--confrontation {
  min-height: 82vh;
  min-height: 82svh;
}

.iconic-stage--detail .iconic-stage__copy {
  grid-column: 1 / 5;
  grid-row: 1;
  align-self: start;
  padding-top: clamp(1rem, 3vh, 3rem);
}

.iconic-stage--detail .iconic-stage__media--suite {
  grid-column: 4 / 13;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: center;
}

.iconic-stage--detail .iconic-figure--secondary {
  width: 88%;
  justify-self: end;
  margin-top: 18%;
}

.iconic-stage--stagger .iconic-stage__media--suite {
  grid-column: 1 / 9;
}

.iconic-stage--stagger .iconic-stage__copy {
  grid-column: 8 / 13;
  justify-self: end;
  align-self: center;
}

.iconic-stage--stagger .iconic-figure--secondary {
  margin-top: 0;
  margin-left: -18%;
  width: 78%;
  justify-self: start;
}

.iconic-stage--confrontation .iconic-stage__media--suite {
  grid-column: 1 / 10;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1.35fr 0.7fr;
  gap: clamp(0.75rem, 2vw, 2rem);
  align-items: end;
}

.iconic-stage--confrontation .iconic-stage__copy {
  grid-column: 9 / 13;
  grid-row: 1;
  justify-self: end;
  align-self: center;
}

.iconic-stage--confrontation .iconic-figure--secondary {
  width: 92%;
  margin-bottom: 8%;
}

/* ---------- Panoramas (approved composites) ---------- */
.iconic-stage--panorama {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr;
  /* V19: transparent — the masked .iconic-stage::before supplies the per-work
     field that dissolves into the shared page ground at both edges. */
  background: transparent;
  scroll-margin-top: 5rem;
}

.iconic-stage--panorama .iconic-stage__media--bleed {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.iconic-stage--panorama .iconic-stage__media--bleed {
  display: grid;
  place-items: center;
}

.iconic-stage--panorama .iconic-stage__media--bleed::before {
  display: none;
}

.iconic-figure--composite {
  width: 100%;
  height: 100%;
}

.iconic-figure--composite img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
}

.iconic-stage--panorama .iconic-stage__copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: min(32rem, 34%);
  max-width: 32rem;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: clamp(7rem, 12vh, 10rem) 0 clamp(3.5rem, 7vh, 5.5rem);
}

.iconic-stage--panorama .iconic-summary {
  max-width: 28rem;
}

.iconic-stage--copy-west .iconic-stage__copy {
  margin-left: var(--gutter);
  padding-right: 1rem;
}

.iconic-stage--copy-east .iconic-stage__copy {
  margin-left: auto;
  margin-right: var(--gutter);
  padding-left: 1rem;
  text-align: left;
}

/* The only copy scrim in the prototype. On the three panoramas the text can
   fall over artwork, so a soft bloom in the CANVAS's own tone lifts it — no
   edge, no rectangle, no per-work colour, and it fades to nothing well inside
   its own box, so it reads as the wall brightening rather than a text card. */
.iconic-stage--panorama .iconic-stage__copy::before {
  content: '';
  position: absolute;
  inset: 16% -30% 4% -28%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 56% 46% at 42% 60%,
    rgba(var(--iconic-ground-rgb), 0.66) 0 30%,
    rgba(var(--iconic-ground-rgb), 0.38) 58%,
    rgba(var(--iconic-ground-rgb), 0.12) 80%,
    transparent 100%);
}

.iconic-stage--copy-east .iconic-stage__copy::before {
  inset: 16% -28% 4% -30%;
  background: radial-gradient(ellipse 56% 46% at 58% 60%,
    rgba(var(--iconic-ground-rgb), 0.66) 0 30%,
    rgba(var(--iconic-ground-rgb), 0.38) 58%,
    rgba(var(--iconic-ground-rgb), 0.12) 80%,
    transparent 100%);
}

.iconic-stage--panorama .iconic-stage__copy h3 {
  font-size: clamp(3rem, 5.2vw, 6rem);
}

.iconic-stage--panorama-coda {
  min-height: 108vh;
  min-height: 108svh;
}

.iconic-stage--panorama-coda .iconic-stage__copy {
  min-height: 108vh;
  min-height: 108svh;
}

/* Desktop: keep the approved composite framing near center so paired
   figures and jewelry stay inside the viewport. Mobile biases below. */
#constantine-and-crispus .iconic-figure--composite img {
  object-position: 58% 46%;
}

#procne-and-itys .iconic-figure--composite img {
  object-position: 38% 44%;
}

#la-llorona .iconic-figure--composite img {
  object-position: 36% 42%;
}

/* ---------- End ---------- */
.iconic-end {
  padding: clamp(6rem, 12vh, 10rem) var(--gutter);
  text-align: center;
  /* Transparent: the curatorial panel is the tail of the same canvas. */
  background: transparent;
}

/* The footer's 1px border-top (site.css) was the last visible dividing edge on
   the page: it was inconspicuous while the canvas ended dark, but the V3 asset
   correctly resolves its bottom row to #ae9c8d, so the rule now reads as a line
   across the full width. Removed for this page only — scoped to
   .page-series--cinematic so site.css and every other series keep their footer
   rule untouched. Nothing replaces it: no line, gradient, shadow, overlay, fade,
   band or background block. The canvas simply meets the footer ground. */
.page-series--cinematic .site-footer {
  border-top: 0;
}

.iconic-end p {
  margin: 0 0 1.75rem;
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--iconic-quiet);
}

.iconic-end__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2.5rem;
}

.iconic-end__links a {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--iconic-text);
  border-bottom: 1px solid rgba(109, 78, 37, 0.55);
  padding-bottom: 0.35rem;
}

/* ---------- Chapter rail ---------- */
.iconic-rail {
  position: fixed;
  left: clamp(1.2rem, 2.8vw, 2.8rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 600ms ease, visibility 0s linear 600ms;
}

.iconic-rail.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 600ms ease, visibility 0s;
}

.iconic-rail ol {
  position: relative;
  display: grid;
  gap: clamp(1.3rem, 3vh, 2.2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.iconic-rail ol::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 5px;
  bottom: 5px;
  width: 1px;
  background: rgba(41, 37, 31, 0.16);
}

.iconic-rail a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--iconic-quiet);
}

.iconic-rail__tick {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(41, 37, 31, 0.42);
  background: var(--iconic-ground);
  transition: background 300ms ease, border-color 300ms ease, transform 300ms ease;
}

.iconic-rail__label {
  position: absolute;
  right: calc(100% + 0.7rem);
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--sans);
  font-size: 0.5rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--iconic-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.iconic-rail a:hover .iconic-rail__label,
.iconic-rail a:focus-visible .iconic-rail__label,
.iconic-rail a.is-active .iconic-rail__label {
  opacity: 1;
}

.iconic-rail a.is-active .iconic-rail__tick {
  background: var(--iconic-accent);
  border-color: var(--iconic-accent);
  transform: scale(1.15);
}

/* ---------- Mid widths ---------- */
@media (min-width: 921px) and (max-width: 1440px) {
  .iconic-stage--portrait,
  .iconic-stage--intimate,
  .iconic-stage--wide {
    min-height: min(66vh, 40rem);
    min-height: min(66svh, 40rem);
  }

  .iconic-stage--ledger {
    min-height: min(58vh, 34rem);
    min-height: min(58svh, 34rem);
  }

  .iconic-stage--detail,
  .iconic-stage--confrontation {
    min-height: min(70vh, 42rem);
    min-height: min(70svh, 42rem);
  }
}

@media (max-width: 1200px) and (min-width: 921px) {
  .iconic-atmosphere-art {
    inset: 0 0 0 41%;
  }

  .iconic-atmosphere-art img {
    object-position: 46% center;
  }

  .iconic-atmosphere-copy {
    width: min(32rem, calc(40% - var(--gutter)));
    isolation: isolate;
  }

  .iconic-atmosphere-copy::before {
    content: '';
    position: absolute;
    inset: 34% -26% 2% -34%;
    z-index: -1;
    background: radial-gradient(ellipse 58% 46% at 40% 62%,
      rgba(var(--iconic-ground-rgb), 0.7) 0 30%,
      rgba(var(--iconic-ground-rgb), 0.44) 58%,
      rgba(var(--iconic-ground-rgb), 0.14) 80%,
      transparent 100%);
    pointer-events: none;
  }

  .iconic-atmosphere-copy h1 {
    font-size: clamp(4.2rem, 7.4vw, 7.8rem);
  }

  .iconic-stage--panorama .iconic-stage__copy {
    width: min(30rem, 40%);
  }

  /* Narrow desktop crops the coda closer: slide the figure further left so
     the east copy clears her hand and rings. */
  #la-llorona .iconic-figure--composite img {
    object-position: 48% 42%;
  }

  .iconic-stage--detail .iconic-stage__media--suite,
  .iconic-stage--confrontation .iconic-stage__media--suite {
    grid-template-columns: 1.15fr 0.8fr;
  }
}

/* ---------- Mobile art direction ---------- */
@media (max-width: 920px) {
  .iconic-atmosphere-hero {
    display: grid;
    grid-template-rows: minmax(34rem, 62vh) auto;
    grid-template-rows: minmax(34rem, 62svh) auto;
    min-height: auto;
  }

  .iconic-atmosphere-field {
    bottom: auto;
    height: 72vh;
    height: 72svh;
  }

  .iconic-atmosphere-field::after {
    background:
      linear-gradient(180deg, rgba(var(--iconic-ground-rgb), 0.28), transparent 15%, transparent 64%, var(--iconic-ground) 96%),
      linear-gradient(90deg, rgba(var(--iconic-ground-rgb), 0.12), transparent 58%, rgba(var(--iconic-ground-rgb), 0.16));
  }

  .iconic-atmosphere-art {
    inset: 4.5rem 0 auto 10%;
    height: 58vh;
    height: 58svh;
    -webkit-mask-image: linear-gradient(180deg, #000 0 70%, rgba(0, 0, 0, 0.65) 84%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0 70%, rgba(0, 0, 0, 0.65) 84%, transparent 100%);
  }

  .iconic-atmosphere-copy {
    grid-row: 2;
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    min-height: auto;
    padding: 1rem var(--gutter) 4.5rem;
  }

  .iconic-atmosphere-copy h1 {
    font-size: clamp(4.4rem, 16vw, 7.5rem);
  }

  .iconic-atmosphere-caption {
    display: none;
  }

  .iconic-corridor {
    grid-template-columns: 1fr;
    padding-block: 4.5rem;
  }

  .iconic-threshold {
    min-height: 42vh;
    min-height: 42svh;
    padding-block: 5.5rem 3.5rem;
  }

  .iconic-threshold h2 {
    font-size: clamp(4.2rem, 18vw, 7rem);
  }

  .iconic-stage,
  .iconic-stage--portrait,
  .iconic-stage--intimate,
  .iconic-stage--wide,
  .iconic-stage--ledger,
  .iconic-stage--detail,
  .iconic-stage--confrontation,
  .iconic-stage--quiet {
    min-height: auto;
  }

  .iconic-stage__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-block: 4.5rem 5.5rem;
  }

  .iconic-stage__media,
  .iconic-stage--focus-right .iconic-stage__media,
  .iconic-stage--focus-left .iconic-stage__media,
  .iconic-stage--focus-center .iconic-stage__media,
  .iconic-stage--intimate .iconic-stage__media,
  .iconic-stage--wide .iconic-stage__media,
  .iconic-stage--ledger .iconic-stage__media,
  .iconic-stage--ledger.iconic-stage--focus-left .iconic-stage__media,
  .iconic-stage--detail .iconic-stage__media--suite,
  .iconic-stage--stagger .iconic-stage__media--suite,
  .iconic-stage--confrontation .iconic-stage__media--suite {
    grid-column: 1;
    grid-row: 1;
    width: min(100%, 40rem);
    justify-self: center;
  }

  .iconic-stage__copy,
  .iconic-stage--focus-right .iconic-stage__copy,
  .iconic-stage--focus-left .iconic-stage__copy,
  .iconic-stage--focus-center .iconic-stage__copy,
  .iconic-stage--intimate .iconic-stage__copy,
  .iconic-stage--wide .iconic-stage__copy,
  .iconic-stage--ledger .iconic-stage__copy,
  .iconic-stage--ledger.iconic-stage--focus-left .iconic-stage__copy,
  .iconic-stage--detail .iconic-stage__copy,
  .iconic-stage--stagger .iconic-stage__copy,
  .iconic-stage--confrontation .iconic-stage__copy {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    max-width: 36rem;
    padding: 0;
  }

  .iconic-stage--atmosphere .iconic-stage__media--atmosphere {
    --atmosphere-h: auto;
    width: min(100%, 40rem);
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .iconic-stage--atmosphere .iconic-stage__media--atmosphere .iconic-figure {
    width: 100%;
  }

  .iconic-stage--atmosphere .iconic-stage__media--atmosphere img {
    object-fit: cover;
  }

  .iconic-stage--ledger .iconic-stage__copy {
    grid-row: 1;
  }

  .iconic-stage--ledger .iconic-stage__media {
    grid-row: 2;
    width: 92%;
  }

  .iconic-stage--detail .iconic-stage__media--suite,
  .iconic-stage--confrontation .iconic-stage__media--suite {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .iconic-stage--detail .iconic-figure--secondary,
  .iconic-stage--stagger .iconic-figure--secondary,
  .iconic-stage--confrontation .iconic-figure--secondary {
    width: 72%;
    margin: 0 auto;
    justify-self: center;
  }

  .iconic-stage--panorama {
    display: grid;
    grid-template-rows: minmax(22rem, 58vh) auto;
    grid-template-rows: minmax(22rem, 58svh) auto;
    min-height: auto;
  }

  .iconic-stage--panorama .iconic-stage__media--bleed {
    position: relative;
    inset: auto;
    height: 58vh;
    height: 58svh;
  }

  .iconic-stage--panorama .iconic-stage__copy {
    width: 100%;
    max-width: none;
    min-height: auto;
    margin: 0;
    padding: 1.25rem var(--gutter) 4.5rem;
  }

  .iconic-stage--panorama .iconic-stage__copy::before {
    inset: -8% -8% -10% -8%;
    background: linear-gradient(180deg, rgba(var(--iconic-ground-rgb), 0.2), rgba(var(--iconic-ground-rgb), 0.72) 28%);
  }

  .iconic-stage--panorama-coda {
    min-height: auto;
  }

  .iconic-stage--panorama-coda .iconic-stage__copy {
    min-height: auto;
  }

  #constantine-and-crispus .iconic-figure--composite img {
    object-position: 78% 40%;
  }

  #procne-and-itys .iconic-figure--composite img,
  #la-llorona .iconic-figure--composite img {
    object-position: 18% 38%;
  }

  .iconic-rail {
    left: 0;
    right: 0;
    top: 5.65rem;
    bottom: auto;
    transform: none;
    border-top: 1px solid rgba(41, 37, 31, 0.1);
    box-shadow: 0 10px 24px rgba(42, 36, 30, 0.06);
  }

  .site-nav {
    /* Keep primary nav as its own plane above the chapter indicator */
    box-shadow: 0 1px 0 rgba(41, 37, 31, 0.06);
  }

  .iconic-rail ol {
    grid-auto-flow: column;
    justify-content: center;
    gap: 0;
    padding: 0.45rem var(--gutter);
    border-bottom: 1px solid rgba(41, 37, 31, 0.12);
    background: rgba(var(--iconic-ground-rgb), 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .iconic-rail ol::before {
    display: none;
  }

  .iconic-rail a {
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
  }

  .iconic-rail__tick {
    width: 6px;
    height: 6px;
  }

  .iconic-rail__label {
    position: static;
    writing-mode: horizontal-tb;
    transform: none;
    opacity: 1;
    font-size: 0.48rem;
    letter-spacing: 0.12em;
  }

  .iconic-chapter,
  .iconic-stage,
  #iconic-corridor {
    scroll-margin-top: 8.6rem;
  }
}

/* Keyboard focus — discreet but visible on exhibition chrome */
.iconic-chapter-nav a:focus-visible,
.iconic-rail a:focus-visible,
.iconic-end__links a:focus-visible {
  outline: 1px solid rgba(109, 78, 37, 0.7);
  outline-offset: 4px;
}

@media (max-width: 680px) {
  .iconic-atmosphere-hero {
    grid-template-rows: minmax(26rem, 56vh) auto;
    grid-template-rows: minmax(26rem, 56svh) auto;
  }

  .iconic-atmosphere-art {
    inset: 4.5rem -6% auto 0;
    height: 52vh;
    height: 52svh;
  }

  .iconic-atmosphere-copy h1 {
    font-size: clamp(4rem, 20vw, 6.4rem);
    line-height: 0.76;
  }

  .iconic-stage__media {
    width: calc(100% + (var(--gutter) * 1.1)) !important;
    margin-inline: calc(var(--gutter) * -0.55);
  }

  .iconic-stage__copy h3 {
    font-size: clamp(2.4rem, 10vw, 3.4rem);
  }

  .iconic-stage--panorama .iconic-stage__media--bleed {
    height: 52vh;
    height: 52svh;
  }

  .iconic-end__links {
    flex-direction: column;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iconic-atmosphere-field img,
  .iconic-atmosphere-art img {
    transform: none !important;
    transition: none !important;
  }

  .iconic-rail,
  .iconic-rail a,
  .iconic-rail__tick,
  .iconic-rail__label,
  .iconic-enter,
  .iconic-chapter-nav a {
    transition: none !important;
  }
}


/* Hero typography (production class names) */
.iconic-atmosphere-index,
.iconic-atmosphere-groups,
.iconic-atmosphere-caption,
.iconic-atmosphere-scroll {
  font-family: var(--sans);
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 200;
  letter-spacing: 0.22em;
  line-height: 1.7;
  text-transform: uppercase;
}

.iconic-atmosphere-copy .iconic-atmosphere-index {
  margin: 0 0 1.35rem;
  color: var(--iconic-accent);
}

.iconic-atmosphere-copy h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(5.2rem, 9vw, 9.5rem);
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 0.82;
  color: var(--iconic-text);
}

.iconic-atmosphere-lede {
  margin: clamp(2.3rem, 5vh, 4rem) 0 0;
  max-width: 28rem;
  font-family: var(--sans);
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--iconic-text-soft);
}

.iconic-atmosphere-groups {
  margin: 1.15rem 0 0;
  color: var(--iconic-quiet);
}

.iconic-atmosphere-scroll {
  display: inline-flex;
  align-items: center;
  margin-top: clamp(2rem, 4vh, 3.2rem);
  padding-bottom: 0.55rem;
  color: var(--iconic-text);
  border-bottom: 1px solid rgba(109, 78, 37, 0.55);
  transition: color 300ms ease, border-color 300ms ease;
}

.iconic-atmosphere-scroll span {
  margin-left: 0.65rem;
}

.iconic-atmosphere-scroll:hover,
.iconic-atmosphere-scroll:focus-visible {
  color: var(--iconic-accent);
  border-color: var(--iconic-accent);
}

.iconic-atmosphere-caption {
  position: absolute;
  /* Left gutter: the right edge is occupied by the brooch and collar jewels,
     which made the label cross key jewelry and killed its contrast. */
  left: clamp(1.1rem, 2.6vw, 2.6rem);
  right: auto;
  bottom: 1.6rem;
  z-index: 3;
  margin: 0;
  color: var(--iconic-quiet);
  text-align: right;
  max-width: 16rem;
}

.page-series--cinematic .series-content {
  /* site.css caps .series-content with `width`, not `max-width` — override it
     too or every stage past the hero stops at 1500px and sits left-anchored
     on wider screens, cutting the panoramas at a visible seam. */
  width: 100%;
  margin: 0;
  padding: 0;
  max-width: none;
}

.page-series--cinematic .content-loading {
  display: none;
}



/* ---------- Suite compositions (multi-fragment works) ---------- */
.iconic-stage--suite-compose .iconic-stage__media--suite {
  position: relative;
  grid-column: 4 / 13;
  display: grid;
  grid-template-columns: 1.55fr 0.85fr;
  align-items: end;
  gap: 0;
  min-height: min(52vh, 34rem);
}

.iconic-stage--suite-compose .iconic-figure--primary {
  grid-column: 1 / 3;
  grid-row: 1;
  width: 100%;
  max-width: none;
  z-index: 1;
}

.iconic-stage--suite-compose .iconic-figure--secondary {
  grid-column: 2;
  grid-row: 1;
  width: 92%;
  max-width: 15.5rem;
  margin: 0 0 4% 0;
  justify-self: end;
  align-self: end;
  z-index: 2;
  transform: translate(-18%, 8%);
}

.iconic-stage--suite-compose .iconic-figure--primary img {
  aspect-ratio: 1.55 / 1;
  -webkit-mask-image:
    linear-gradient(90deg, #000 0 62%, rgba(0, 0, 0, 0.72) 82%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, #000 0 62%, rgba(0, 0, 0, 0.72) 82%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 86%, transparent 100%);
  mask-composite: intersect;
}

.iconic-stage--suite-compose .iconic-figure--secondary img {
  aspect-ratio: 1 / 1.08;
  -webkit-mask-image: radial-gradient(
    ellipse 54% 54% at 46% 44%,
    #000 0 44%,
    rgba(0, 0, 0, 0.9) 58%,
    rgba(0, 0, 0, 0.4) 76%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 54% 54% at 46% 44%,
    #000 0 44%,
    rgba(0, 0, 0, 0.9) 58%,
    rgba(0, 0, 0, 0.4) 76%,
    transparent 100%
  );
}

.iconic-stage--suite-compose .iconic-stage__copy {
  grid-column: 1 / 5;
  align-self: center;
}

/* Shajara: dominant figure + visible counterpoint at the shoulder */
.iconic-stage--suite-counterpoint .iconic-stage__media--suite {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 0;
  min-height: min(52vh, 34rem);
}

.iconic-stage--suite-counterpoint .iconic-figure--primary {
  grid-column: 1 / 2;
  grid-row: 1;
  width: 108%;
  justify-self: start;
  z-index: 2;
}

.iconic-stage--suite-counterpoint .iconic-figure--primary img {
  aspect-ratio: 1 / 1.12;
  -webkit-mask-image:
    linear-gradient(90deg, #000 0 68%, rgba(0, 0, 0, 0.7) 86%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, #000 0 68%, rgba(0, 0, 0, 0.7) 86%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

.iconic-stage--suite-counterpoint .iconic-figure--secondary {
  grid-column: 2;
  grid-row: 1;
  width: 96%;
  max-width: 24rem;
  margin: 0;
  justify-self: start;
  align-self: center;
  z-index: 1;
  transform: translate(-22%, 10%);
}

.iconic-stage--suite-counterpoint .iconic-figure--secondary img {
  aspect-ratio: 1 / 1.22;
  opacity: 0.98;
  -webkit-mask-image:
    linear-gradient(270deg, #000 0 55%, rgba(0, 0, 0, 0.65) 78%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(270deg, #000 0 55%, rgba(0, 0, 0, 0.65) 78%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

/* ---------- V18: protected previews + four narrative anchors ---------- */

/* The generated climate and the approved hero crop should read as one field,
   not two rectangular layers. Keep the centre legible and dissolve only the
   outer band into the page ground. */
.iconic-atmosphere-field {
  inset: -2.5%;
  background: var(--iconic-ground);
}

/* The hero sits above .iconic-exhibition in the document, so it carries the
   canvas tone as a flat ground and hands off to the canvas at the corridor. */
.iconic-atmosphere-hero {
  background: var(--iconic-ground);
}

.iconic-atmosphere-field img {
  -webkit-mask-image: radial-gradient(
    ellipse 82% 78% at 58% 48%,
    #000 0 58%,
    rgba(0, 0, 0, 0.9) 70%,
    rgba(0, 0, 0, 0.42) 84%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 82% 78% at 58% 48%,
    #000 0 58%,
    rgba(0, 0, 0, 0.9) 70%,
    rgba(0, 0, 0, 0.42) 84%,
    transparent 100%
  );
}

.iconic-atmosphere-art {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.52) 4%, #000 12%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.72) 9%, #000 15%, #000 74%, rgba(0, 0, 0, 0.5) 87%, transparent 97%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.52) 4%, #000 12%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.72) 9%, #000 15%, #000 74%, rgba(0, 0, 0, 0.5) 87%, transparent 97%);
  mask-composite: intersect;
}

/* The four story anchors keep their atmospheric full-character compositions.
   No edge band is painted over them any more; the figure box is matched to the
   composite's 3:2 ratio so its own alpha mask (CROP INTEGRATION, below) can
   dissolve the outer plaster straight into the shared canvas. */
.iconic-stage--anchor .iconic-stage__media--atmosphere,
.iconic-stage--anchor .iconic-stage__media--bleed {
  overflow: visible;
  background: transparent;
}

.iconic-stage--anchor .iconic-figure--composite {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  max-height: 100%;
}

.iconic-stage--anchor .iconic-figure--composite img {
  object-fit: contain;
}

/* Constantine and Procne had no approved crop in the original manifest.
   Their new derivative previews are intentionally partial and sit inside the
   existing panoramic pacing without exposing the full character field. */
.iconic-stage--excerpt .iconic-stage__media--bleed {
  inset: 6% var(--gutter);
  display: flex;
  align-items: center;
}

/* The vignette that faded these previews into an opaque --ground ring is gone;
   the previews themselves are unchanged and still partial. */
.iconic-stage--excerpt .iconic-figure {
  width: min(68vw, 68rem);
  height: min(72vh, 48rem);
}

.iconic-stage--excerpt .iconic-figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

#constantine-and-crispus.iconic-stage--excerpt .iconic-stage__media--bleed {
  justify-content: flex-end;
  padding-right: clamp(1rem, 4vw, 4rem);
}

#procne-and-itys.iconic-stage--excerpt .iconic-stage__media--bleed {
  justify-content: flex-start;
  padding-left: clamp(1rem, 4vw, 4rem);
}

.iconic-end p.iconic-end__access {
  max-width: 44rem;
  margin: 0 auto 2rem;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-transform: none;
  color: var(--iconic-text);
}

@media (max-width: 920px) {
  .iconic-atmosphere-field {
    inset: -2% -4% auto;
  }

  .iconic-atmosphere-art {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 72%, rgba(0, 0, 0, 0.62) 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 72%, rgba(0, 0, 0, 0.62) 86%, transparent 100%);
  }

  .iconic-stage--anchor .iconic-figure--composite {
    aspect-ratio: auto;
    height: 100%;
  }

  .iconic-stage--anchor .iconic-figure--composite img {
    object-fit: cover;
  }

  .iconic-stage--excerpt .iconic-stage__media--bleed {
    inset: auto;
    padding-inline: var(--gutter);
  }

  .iconic-stage--excerpt .iconic-figure {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 920px) {
  /* These suite rules sit after the generic mobile block, so their desktop
     grid placements must be re-stacked here or the copy collapses into a
     sliver beside implicit columns. */
  .iconic-stage--suite-compose .iconic-stage__media--suite,
  .iconic-stage--suite-counterpoint .iconic-stage__media--suite {
    min-height: auto;
    grid-column: 1;
    grid-template-columns: 1fr;
    width: min(100%, 40rem);
  }

  .iconic-stage--suite-compose .iconic-stage__copy {
    grid-column: 1;
  }

  .iconic-stage--suite-compose .iconic-figure--primary,
  .iconic-stage--suite-counterpoint .iconic-figure--primary {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }

  .iconic-stage--suite-compose .iconic-figure--secondary {
    grid-column: 1;
    grid-row: 1;
    width: min(42%, 10.5rem);
    max-width: none;
    justify-self: end;
    align-self: end;
    transform: translate(-6%, 12%);
    margin: 0;
  }

  .iconic-stage--suite-counterpoint .iconic-figure--primary {
    width: 86%;
    justify-self: start;
  }

  .iconic-stage--suite-counterpoint .iconic-figure--secondary {
    grid-column: 1;
    grid-row: 1;
    width: min(54%, 13rem);
    max-width: none;
    justify-self: end;
    align-self: center;
    transform: translate(4%, 8%);
    margin: 0;
    z-index: 1;
  }
}


/* ==========================================================================
   CROP INTEGRATION — composition-specific alpha masks
   --------------------------------------------------------------------------
   Every displayed image box is masked by a UNION of 2-3 soft ellipses whose
   ending shapes are clamped to lie strictly inside the box (>=1.5% margin on
   all four sides). Consequences, by construction:
     - alpha reaches 0 before the top, bottom, left and right boundaries, so
       no artwork rectangle can appear;
     - the union of offset lobes is asymmetric and different for every work,
       so there is no repeated universal oval;
     - the opaque core is placed over the face / jewellery / upper garment of
       each composition, taken from a per-image subject-energy analysis, so
       only outer garment and ground dissolve.
   Nothing here blurs, desaturates or blends the artwork: the mask changes
   alpha only, and the pixels that remain are the untouched original.
   ========================================================================== */
/* --- ordinary crops and protected previews ------------------------------ */
/* media left / copy right - mass leans left, shoulder lobe carries to the right */
#agrippina-and-nero .iconic-figure img {
  -webkit-mask-image:
    radial-gradient(ellipse 41.5% 40.5% at 43% 58%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 27% 33% at 67% 49%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 41.5% 40.5% at 43% 58%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 27% 33% at 67% 49%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  mask-composite: add;
}
/* ledger, media right - dissolve is heaviest on the copy (left) side */
#messalina-and-britannicus .iconic-figure img {
  -webkit-mask-image:
    radial-gradient(ellipse 40% 46% at 56% 52%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 25% 29% at 73% 68%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 40% 46% at 56% 52%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 25% 29% at 73% 68%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  mask-composite: add;
}
/* focus-center, copy lower-left - second lobe reaches down toward the copy */
#rodrigo-and-lucrezia-borgia .iconic-figure img {
  -webkit-mask-image:
    radial-gradient(ellipse 41% 45.5% at 56% 47%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 26% 30% at 34% 63%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 41% 45.5% at 56% 47%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 26% 30% at 34% 63%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  mask-composite: add;
}
/* media left / copy right - low wide primary, raised right lobe */
#al-khayzuran .iconic-figure img {
  -webkit-mask-image:
    radial-gradient(ellipse 44% 38% at 48% 60%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 24% 32% at 72% 44%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 44% 38% at 48% 60%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 24% 32% at 72% 44%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  mask-composite: add;
}
/* narrow subject column - tall slim primary, no wide spill */
#tantalus-and-pelops .iconic-figure img {
  -webkit-mask-image:
    radial-gradient(ellipse 34% 45% at 53% 48%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%),
    radial-gradient(ellipse 22% 27% at 40% 66%, #000 0 55%, rgba(0,0,0,.88) 71%, rgba(0,0,0,.46) 85%, rgba(0,0,0,.13) 94%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 34% 45% at 53% 48%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%),
    radial-gradient(ellipse 22% 27% at 40% 66%, #000 0 55%, rgba(0,0,0,.88) 71%, rgba(0,0,0,.46) 85%, rgba(0,0,0,.13) 94%, transparent 100%);
  mask-composite: add;
}
/* ledger focus-left, media left - trailing lobe to the lower right */
#phaedra-and-hippolytus .iconic-figure img {
  -webkit-mask-image:
    radial-gradient(ellipse 44% 43.5% at 47% 55%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 25% 25% at 67% 70%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 44% 43.5% at 47% 55%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 25% 25% at 67% 70%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  mask-composite: add;
}
/* media right / copy left - lower-right lobe keeps the child in the field */
#jocasta-and-oedipus .iconic-figure img {
  -webkit-mask-image:
    radial-gradient(ellipse 45% 45% at 52% 52%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 25% 23% at 71% 72%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 45% 45% at 52% 52%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 25% 23% at 71% 72%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  mask-composite: add;
}
/* wide stage: media spans cols 1-9 and the copy cols 8-12, so the copy column
   begins at 80% of the media box — the widest text/art overlap on the page.
   The lobes are pulled left so the headdress has dissolved by ~84%, keeping the
   title and metadata on plaster without a copy scrim. */
#baba-yaga .iconic-figure img {
  -webkit-mask-image:
    radial-gradient(ellipse 36% 45% at 47% 50%, #000 0 50%, rgba(0,0,0,.88) 66%, rgba(0,0,0,.42) 81%, rgba(0,0,0,.11) 92%, transparent 100%),
    radial-gradient(ellipse 25% 27% at 30% 66%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 36% 45% at 47% 50%, #000 0 50%, rgba(0,0,0,.88) 66%, rgba(0,0,0,.42) 81%, rgba(0,0,0,.11) 92%, transparent 100%),
    radial-gradient(ellipse 25% 27% at 30% 66%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  mask-composite: add;
}
/* media right / copy left */
#kuchisake-onna .iconic-figure img {
  -webkit-mask-image:
    radial-gradient(ellipse 43% 45% at 54% 50%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 25% 25% at 70% 70%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 43% 45% at 54% 50%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 25% 25% at 70% 70%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  mask-composite: add;
}
/* suite primary - dominant figure, lower-left counterweight */
#shajara-al-durr-and-izz-ad-din-aybak .iconic-figure--primary img {
  -webkit-mask-image:
    radial-gradient(ellipse 46% 45% at 50% 48%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 27% 24% at 38% 72%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 46% 45% at 50% 48%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 27% 24% at 38% 72%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  mask-composite: add;
}
/* suite counterpoint - smaller, sits lower and further right */
#shajara-al-durr-and-izz-ad-din-aybak .iconic-figure--secondary img {
  -webkit-mask-image:
    radial-gradient(ellipse 44% 39% at 47% 58%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%),
    radial-gradient(ellipse 23% 17% at 58% 79%, #000 0 55%, rgba(0,0,0,.88) 71%, rgba(0,0,0,.46) 85%, rgba(0,0,0,.13) 94%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 44% 39% at 47% 58%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%),
    radial-gradient(ellipse 23% 17% at 58% 79%, #000 0 55%, rgba(0,0,0,.88) 71%, rgba(0,0,0,.46) 85%, rgba(0,0,0,.13) 94%, transparent 100%);
  mask-composite: add;
}
/* protected preview - copy west, figure held east */
#constantine-and-crispus .iconic-figure img {
  -webkit-mask-image:
    radial-gradient(ellipse 41% 45% at 56% 50%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 23% 25% at 72% 68%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 41% 45% at 56% 50%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 23% 25% at 72% 68%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  mask-composite: add;
}
/* protected preview - copy east, figure held west */
#procne-and-itys .iconic-figure img {
  -webkit-mask-image:
    radial-gradient(ellipse 43% 40% at 46% 58%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 25% 29% at 63% 40%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 43% 40% at 46% 58%, #000 0 50%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.46) 83%, rgba(0,0,0,.13) 93%, transparent 100%),
    radial-gradient(ellipse 25% 29% at 63% 40%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  mask-composite: add;
}

/* --- four narrative anchors --------------------------------------------- */
/* The anchors keep their existing atmospheric compositions. The figure box
   is given the composite's own 3:2 ratio (below), so the mask coordinates are
   the image's own coordinates at every viewport, and the outer plaster is
   dissolved into the shared canvas instead of being over-painted by a band. */
/* anchor - subject right of centre, plaster carried left */
#semiramis-and-ninyas .iconic-figure--composite img {
  -webkit-mask-image:
    radial-gradient(ellipse 48.5% 48.5% at 50% 50%, #000 0 58%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.46) 87%, rgba(0,0,0,.13) 95%, transparent 100%),
    radial-gradient(ellipse 28.5% 42% at 70% 55%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%),
    radial-gradient(ellipse 25% 33% at 28% 44%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 48.5% 48.5% at 50% 50%, #000 0 58%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.46) 87%, rgba(0,0,0,.13) 95%, transparent 100%),
    radial-gradient(ellipse 28.5% 42% at 70% 55%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%),
    radial-gradient(ellipse 25% 33% at 28% 44%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  mask-composite: add;
}
/* anchor - paired figures right of centre */
#sitt-al-mulk-and-al-hakim .iconic-figure--composite img {
  -webkit-mask-image:
    radial-gradient(ellipse 48.5% 48.5% at 50% 50%, #000 0 58%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.46) 87%, rgba(0,0,0,.13) 95%, transparent 100%),
    radial-gradient(ellipse 30% 41% at 64% 56%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%),
    radial-gradient(ellipse 25% 31% at 30% 57%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 48.5% 48.5% at 50% 50%, #000 0 58%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.46) 87%, rgba(0,0,0,.13) 95%, transparent 100%),
    radial-gradient(ellipse 30% 41% at 64% 56%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%),
    radial-gradient(ellipse 25% 31% at 30% 57%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  mask-composite: add;
}
/* anchor - confrontation reads left, gold field carried right */
#seth-and-horus .iconic-figure--composite img {
  -webkit-mask-image:
    radial-gradient(ellipse 48.5% 48.5% at 50% 50%, #000 0 58%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.46) 87%, rgba(0,0,0,.13) 95%, transparent 100%),
    radial-gradient(ellipse 30% 41% at 35% 56%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%),
    radial-gradient(ellipse 25% 33% at 70% 46%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 48.5% 48.5% at 50% 50%, #000 0 58%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.46) 87%, rgba(0,0,0,.13) 95%, transparent 100%),
    radial-gradient(ellipse 30% 41% at 35% 56%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%),
    radial-gradient(ellipse 25% 33% at 70% 46%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  mask-composite: add;
}
/* anchor coda - figure left, mineral field right under the copy */
#la-llorona .iconic-figure--composite img {
  -webkit-mask-image:
    radial-gradient(ellipse 48.5% 48.5% at 50% 50%, #000 0 58%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.46) 87%, rgba(0,0,0,.13) 95%, transparent 100%),
    radial-gradient(ellipse 27% 40.5% at 30% 58%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%),
    radial-gradient(ellipse 24% 35% at 72% 48%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(ellipse 48.5% 48.5% at 50% 50%, #000 0 58%, rgba(0,0,0,.88) 74%, rgba(0,0,0,.46) 87%, rgba(0,0,0,.13) 95%, transparent 100%),
    radial-gradient(ellipse 27% 40.5% at 30% 58%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%),
    radial-gradient(ellipse 24% 35% at 72% 48%, #000 0 46%, rgba(0,0,0,.88) 64%, rgba(0,0,0,.46) 80%, rgba(0,0,0,.13) 92%, transparent 100%);
  mask-composite: add;
}

/* --- sampled edge halos --------------------------------------------------
   A localised bloom behind each crop, coloured from that artwork's own outer
   band (measured, not invented), so the work reads as bleeding into the wall.
   It ends at 74% of an ellipse that is itself well inside the media box, so it
   can never square up into a card or a plate. */
#agrippina-and-nero { --halo-rgb: 150,114,103; }
#messalina-and-britannicus { --halo-rgb: 150,140,126; }
#rodrigo-and-lucrezia-borgia { --halo-rgb: 160,136,121; }
#al-khayzuran { --halo-rgb: 147,127,116; }
#tantalus-and-pelops { --halo-rgb: 159,145,128; }
#phaedra-and-hippolytus { --halo-rgb: 164,136,118; }
#jocasta-and-oedipus { --halo-rgb: 150,131,106; }
#baba-yaga { --halo-rgb: 144,123,119; }
#kuchisake-onna { --halo-rgb: 161,141,150; }
#shajara-al-durr-and-izz-ad-din-aybak { --halo-rgb: 135,118,111; }
#constantine-and-crispus { --halo-rgb: 161,138,119; }
#procne-and-itys { --halo-rgb: 158,137,127; }

/* ==========================================================================
   V25 — PROGRESSIVE REVEAL
   --------------------------------------------------------------------------
   Reuses the site's existing .reveal / .is-visible IntersectionObserver
   (site.js: threshold 0.12, rootMargin 0 0 -7% 0, unobserve after firing, so an
   element reveals once and stays). site.js ALREADY force-adds .is-visible when
   prefers-reduced-motion is set or IntersectionObserver is missing. No new
   observer, listener, library or dependency is introduced here — only timing.

   Media leads, copy follows 120ms later. The reveal is applied to the media
   WRAPPER, never to .iconic-figure--primary/--secondary: those carry layout
   transforms (translate(-18%,8%) / translate(-22%,10%)) that .reveal's
   translateY would destroy.
   ========================================================================== */
.page-series--cinematic .iconic-stage__media.reveal { transition-duration: 950ms; }

.page-series--cinematic .iconic-stage__copy.reveal {
  transition-duration: 700ms;
  transition-delay: 120ms;
}

.page-series--cinematic .iconic-threshold.reveal,
.page-series--cinematic .iconic-end.reveal,
.page-series--cinematic .iconic-corridor__aside.reveal,
.page-series--cinematic .iconic-corridor__copy.reveal { transition-duration: 760ms; }

@media (max-width: 920px) {
  .page-series--cinematic .iconic-stage__media.reveal { transition-duration: 650ms; }
  .page-series--cinematic .iconic-stage__copy.reveal {
    transition-duration: 560ms;
    transition-delay: 80ms;
  }
}

/* No JavaScript at all: the observer never runs, so nothing would ever add
   .is-visible and the page would stay blank. Pure-CSS guard, no JS shim. */
@media (scripting: none) {
  .page-series--cinematic .reveal { opacity: 1; transform: none; transition: none; }
}

/* Reduced motion: site.js already reveals everything immediately; neutralise the
   transition too so there is no fade, displacement, scaling or delay at all. */
@media (prefers-reduced-motion: reduce) {
  .page-series--cinematic .reveal,
  .page-series--cinematic .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}