/* ====================================================================
   TEMPLE · world.aurielle.eu
   Scroll primary. Falls through. Universal descent register at launch.
   Pushing for myth: deeper grounds, breathing motion, scroll reveals,
   mobile-adapted chambers.
   ==================================================================== */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-temple);
  color: var(--fg-on-ink);
  font-family: var(--font-serif);
  font-feature-settings: "lnum","kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============== Stage machine ============== */
.temple { position: relative; min-height: 100vh; overflow: hidden; }
.surface {
  position: fixed; inset: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-fall) var(--ease-couture), visibility 0s linear var(--t-fall);
  overflow-y: auto;
}
.surface--on {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity var(--t-fall) var(--ease-couture), visibility 0s linear 0s;
}

/* ============== Wordmark (persistent, small, top centre) ============== */
.temple__mark {
  position: fixed; top: 28px; left: 50%; transform: translateX(-50%);
  z-index: 60;
  height: 12px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--ease-couture), filter var(--t-base) var(--ease-couture);
  letter-spacing: 0.3em;
}
.temple__mark--on {
  opacity: 0.55; pointer-events: auto; cursor: pointer;
  /* Soft dark halo · keeps the ivory wordmark legible on any background,
     including the closing photograph where bright areas could otherwise
     blow it out. */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7))
          drop-shadow(0 0 14px rgba(0, 0, 0, 0.45));
}
.temple__mark--on:hover { opacity: 0.95; }
/* On the wing's ivory ground, invert the mark so it reads as ink, and
   reverse the shadow polarity so it still has contrast against ivory. */
.temple__mark--on[data-stage="wing"] {
  filter: invert(1)
          drop-shadow(0 1px 2px rgba(244, 239, 230, 0.55));
}

/* ============================================================
   THRESHOLD · landing
   ============================================================ */
.threshold {
  background: var(--aurielle-deep-ink);
  text-align: center;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  color: var(--fg-on-ink);
}

/* Vellum-on-ink · a faint grain across the deep ground so the page
   stops reading as a flat web canvas and starts reading as tooled
   leather or night-marble. Screen blend so the grain lifts a few
   highlight specks without raising the overall ground. */
.threshold::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--vellum-noise);
  background-repeat: repeat;
  background-size: 220px 220px;
  mix-blend-mode: screen;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}

/* Ambient luminance from below the inscription · myth-ground.
   The slow breath gives the centre a faint candle-behind-paper feel. */
.threshold::after {
  content: '';
  position: absolute; inset: -8%;
  background:
    radial-gradient(ellipse 70% 56% at 50% 56%, rgba(229, 169, 160, 0.12) 0%, transparent 62%),
    radial-gradient(ellipse 90% 30% at 50% 96%, rgba(229, 169, 160, 0.06) 0%, transparent 70%);
  animation: thresholdBreath 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes thresholdBreath {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%       { opacity: 0.95; transform: scale(1.04); }
}

/* The drawn portal · two columns arching at the top, threshold step
   at the foot. Stretched to fill the viewport with preserveAspectRatio
   none; strokes are non-scaling so the hairlines stay 1px at any size. */
.threshold__portal {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  color: rgba(229, 169, 160, 0.28);
  pointer-events: none;
  z-index: 1;
}
.threshold__portal line,
.threshold__portal path,
.threshold__portal circle {
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  fill: none;
}
.threshold__portal circle { fill: currentColor; stroke: none; }
.threshold__portal-step-outer { opacity: 0.5; }

/* Inner column · the page's content stacked between the masthead at
   the lintel and the cue at the threshold step. Flex column with
   space-between distributes the three zones across the full height. */
.threshold__inner {
  position: relative; z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  padding: 18vh 64px 13vh;
  gap: 40px;
}

/* Masthead · sigil and wordmark above the arch, the dedication. */
.threshold__masthead {
  display: grid; justify-items: center; gap: 22px;
  padding-top: 4px;
}
.threshold__sigil {
  width: 56px; height: 74px;
  background: url('assets/mythology/emblem-blush.png') center/contain no-repeat;
  filter: drop-shadow(0 0 26px rgba(229, 169, 160, 0.36))
          drop-shadow(0 0 6px rgba(229, 169, 160, 0.25));
  animation: sigilBreath 7s var(--ease-couture) infinite;
}
.threshold__mark {
  height: 16px;
  opacity: 0.78;
  letter-spacing: 0.3em;
}

/* Core · inscription centered inside the doorway, with the address
   apparition placed below as the visitor's whisper. */
.threshold__core {
  display: grid;
  gap: 36px;
  justify-items: center;
  max-width: 760px;
}
.threshold__inscription { display: flex; flex-direction: column; gap: 22px; justify-items: center; align-items: center; }
.threshold__it {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 400;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.18;
  color: var(--fg-on-ink);
  letter-spacing: 0.005em;
  text-wrap: balance;
  margin: 0;
}
.threshold__en {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 400;
  font-size: calc(clamp(40px, 5vw, 68px) * 0.42);
  line-height: 1.35;
  color: var(--fg-on-ink-2);
  letter-spacing: 0.04em;
  text-wrap: balance;
  margin: 0;
  opacity: 0.78;
}

/* Direct address · the site whispers once and falls silent. */
.threshold__address {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14.5px;
  letter-spacing: 0.06em;
  color: var(--fg-on-ink-2);
  opacity: 0;
  animation: addressOnce 10s 1.8s ease-in-out forwards;
}
.threshold__address em { font-style: italic; }
@keyframes addressOnce {
  0%    { opacity: 0; transform: translateY(8px); }
  16%   { opacity: 0.8; transform: translateY(0); }
  72%   { opacity: 0.8; transform: translateY(0); }
  100%  { opacity: 0; transform: translateY(-4px); }
}

/* Descent cue · sits at the threshold step. Falling hairline +
   the italic word *scendi*. Gesture, not a UI affordance. */
.threshold__cue {
  display: grid; gap: 18px; justify-items: center;
  padding: 8px 24px 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: opacity var(--t-base) var(--ease-couture);
}
.threshold__cue:hover .threshold__cue-word,
.threshold__cue:focus-visible .threshold__cue-word { opacity: 1; color: var(--fg-on-ink); }
.threshold__cue:hover .threshold__cue-line,
.threshold__cue:focus-visible .threshold__cue-line { opacity: 0.85; }
.threshold__cue:focus-visible { outline: 1px solid rgba(229, 169, 160, 0.4); outline-offset: 4px; }
.threshold__cue-line {
  display: block;
  width: 1px; height: 96px;
  background: linear-gradient(180deg, var(--fg-on-ink-2) 0%, transparent 100%);
  animation: fallLine 2.6s var(--ease-couture) infinite;
  transform-origin: top;
  opacity: 0.65;
}
.threshold__cue-word {
  font-family: var(--font-serif);
  font-style: italic; font-size: 13px;
  color: var(--fg-on-ink-2);
  letter-spacing: 0.06em;
  opacity: 0.65;
}

/* Language picker · which language speaks first.
   Two italic options separated by a hairline, sitting beneath the
   address apparition. Persists across visits; default Italian. */
.threshold__lang {
  display: inline-flex; align-items: center; gap: 16px;
  margin-top: 8px;
}
.threshold__lang-option {
  background: none; border: none; padding: 4px 6px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: var(--fg-on-ink-2);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity var(--t-base) var(--ease-couture),
              color var(--t-base) var(--ease-couture);
}
.threshold__lang-option em { font-style: italic; }
.threshold__lang-option:hover { opacity: 0.85; color: var(--fg-on-ink); }
.threshold__lang-option.is-on {
  opacity: 1;
  color: var(--fg-on-ink);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 0.5px;
  text-decoration-color: rgba(229, 169, 160, 0.7);
}
.threshold__lang-sep {
  display: block;
  width: 1px; height: 12px;
  background: rgba(244, 239, 230, 0.35);
}
@keyframes fallLine {
  0%   { transform: scaleY(0); transform-origin: top;    opacity: 0; }
  45%  { transform: scaleY(1); transform-origin: top;    opacity: 0.65; }
  55%  { transform: scaleY(1); transform-origin: bottom; opacity: 0.65; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* Scroll sentinel · invisible. When it enters the viewport the surface
   crossfades to the floor plan. */
.threshold__sentinel {
  position: absolute; left: 0; right: 0;
  top: 130vh; height: 60vh;
  pointer-events: none;
}

/* Screen-reader-only · keeps the descent reachable by keyboard / AT users. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   FLOOR PLAN · the eleven-stage tree
   ============================================================ */
.floorplan {
  background: var(--aurielle-deep-ink);
  min-height: 100vh;
  padding: 112px 48px 80px;
  display: grid; gap: 56px;
  align-content: start;
  position: relative;
}
.floorplan::before {
  /* Faint manuscript ground — ink texture by gradient. */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,   rgba(229,169,160,0.05) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(229,169,160,0.04) 0%, transparent 50%);
}
.floorplan__head {
  display: grid; gap: 14px; justify-items: center; text-align: center;
  position: relative; z-index: 1;
}
.floorplan__eyebrow {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--fg-on-ink-2);
}
.floorplan__title {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(36px, 4vw, 56px); color: var(--fg-on-ink);
  margin: 0;
}
.floorplan__sub {
  font-family: var(--font-serif); font-style: italic;
  font-size: 17px; color: var(--fg-on-ink-2); margin: 0;
  max-width: 52ch;
}

/* ============================================================
   THE DESCENT · vertical tree, drawn line.
   The eleven stages rendered as a single descending column. After
   Bivium the spine forks; shadow continues left, rebirth continues
   right. Stations are plaques (numeral · rule · name · italic
   caption · wax sigil). The four-register architecture is visible
   from the ground up — ash sigils on shadow, gilded on rebirth.
   ============================================================ */
.descent {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.descent__trunk {
  display: grid;
  justify-items: center;
}
.descent__branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  align-items: start;
}

/* Spine · the single vertical hairline that connects two stations
   along the descent. Width 1px, fades at top and bottom so the
   line reads as drawn rather than constructed. */
.spine {
  display: block;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(229, 169, 160, 0.45) 18%,
    rgba(229, 169, 160, 0.45) 82%,
    transparent 100%);
}

/* Fork · the bifurcation at Bivium, drawn as a single SVG. Spans
   the same column as the trunk so the apex sits over the center,
   then fans outward to meet the two branches' top spines. */
.fork {
  width: 100%;
  height: 200px;
  display: block;
}

/* Branch · the descending half-column after the fork. The branch
   head declares the register (ash for shadow, gilded for rebirth)
   as a single horizontal band over a small italic label. Stations
   stack below, connected by the spine. */
.branch {
  display: grid;
  justify-items: center;
  padding-top: 8px;
}
.branch__head {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.branch__band {
  display: block;
  width: 64px;
  height: 2px;
}
.branch--shadow  .branch__band { background: linear-gradient(90deg, rgba(180,180,188,0) 0%, rgba(180,180,188,0.7) 50%, rgba(180,180,188,0) 100%); }
.branch--rebirth .branch__band { background: linear-gradient(90deg, rgba(201,164,83,0)  0%, rgba(201,164,83,0.85)  50%, rgba(201,164,83,0)  100%); }
.branch__label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--fg-on-ink-2);
  opacity: 0.6;
}
.branch__stations {
  display: grid;
  justify-items: center;
}
.branch__terminus {
  width: 18px; height: 24px;
  margin-top: 4px;
  -webkit-mask: url('assets/mythology/emblem-ivory.png') center/contain no-repeat;
          mask: url('assets/mythology/emblem-ivory.png') center/contain no-repeat;
  opacity: 0.22;
}
.branch__terminus--shadow  { background: var(--shadow-bone); }
.branch__terminus--rebirth {
  background: var(--rebirth-gold);
  opacity: 0.28;
  -webkit-mask-image: url('assets/mythology/emblem-renaissance-gold.png');
          mask-image: url('assets/mythology/emblem-renaissance-gold.png');
}

/* ----- STATION · a single wing's plaque ---------------------------- */
.station {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 6px 18px 14px;
  color: var(--fg-on-ink-2);
  cursor: default;
  transition: color var(--t-base) var(--ease-couture);
}
.station__numeral {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  letter-spacing: 0.22em;
  color: var(--fg-on-ink-2);
  opacity: 0.85;
}
.station__rule {
  width: 28px;
  height: 1px;
  background: rgba(229, 169, 160, 0.45);
  margin: 4px 0 4px;
}
.station__name {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 24px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--fg-on-ink-2);
  transition: letter-spacing var(--t-base) var(--ease-couture);
  text-wrap: balance;
  text-align: center;
}
.station__caption {
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--fg-on-ink-2);
  opacity: 0.65;
  letter-spacing: 0.01em;
}
.station__caption em { font-style: italic; }

/* Quiet 'entra' label, appears beneath the open station's sigil. */
.station__entra {
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, 4px);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--fg-on-ink-2);
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 360ms var(--ease-couture), transform 360ms var(--ease-couture);
}

/* Station states · diminished pre-bivium · faintly visible sealed.
   The open station carries full luminance. */
.station--pre-bivium     { opacity: 0.52; }
.station--sealed-shadow  { opacity: 0.44; }
.station--sealed-rebirth { opacity: 0.50; }

.station--open {
  color: var(--fg-on-ink);
  cursor: pointer;
}
.station--open .station__numeral { color: var(--exsilium-pink-soft); opacity: 1; }
.station--open .station__rule    { background: rgba(229, 169, 160, 0.85); width: 44px; }
.station--open .station__name    { color: var(--fg-on-ink); }
.station--open .station__caption { color: var(--exsilium-pink-soft); opacity: 0.95; }
.station--open:hover .station__name { letter-spacing: 0.42em; }
.station--open:hover .station__entra,
.station--open:focus-visible .station__entra {
  opacity: 1; transform: translate(-50%, 10px);
}

/* ----- SIGIL · the brand emblem rendered as the wing's mark ------- */
/* The sigil IS the Aurielle emblem (star + anchor). No wax disc —
   the emblem is already a finished mark; adding a coloured circle
   behind it produces a blob and hides the silhouette. Each state
   tints and weights the same emblem differently:
     open            · blush, full visibility, slow breath, soft glow
     pre-bivium      · ivory at low opacity (not yet pressed)
     sealed-shadow   · ash-grey at low opacity (pressed cold)
     sealed-rebirth  · gilded at low opacity (pressed warm)
*/
.sigil {
  display: block;
  width: 36px; height: 48px;
  margin-top: 14px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Open · the blush emblem at full presence. A faint radial halo
   sits behind it (filtered drop-shadow), and the whole thing
   breathes slowly. */
.sigil--open {
  background-image: url('assets/mythology/emblem-blush.png');
  filter: drop-shadow(0 0 14px rgba(229, 169, 160, 0.45))
          drop-shadow(0 0 4px rgba(229, 169, 160, 0.30));
  animation: sigilBreath 7s var(--ease-couture) infinite;
}
@keyframes sigilBreath {
  0%, 100% { transform: scale(0.96); filter: drop-shadow(0 0 12px rgba(229,169,160,0.32)) drop-shadow(0 0 4px rgba(229,169,160,0.25)); }
  50%      { transform: scale(1.03); filter: drop-shadow(0 0 22px rgba(229,169,160,0.55)) drop-shadow(0 0 6px rgba(229,169,160,0.40)); }
}

/* Pre-bivium · the wings are present in the architecture but not
   yet pressed. Ivory emblem at low opacity, no glow, no breath. */
.sigil--pre-bivium {
  background-image: url('assets/mythology/emblem-ivory.png');
  opacity: 0.32;
}

/* Sealed shadow · the emblem pressed cold. Ash colour via mask +
   solid background, so the silhouette stays crisp at small size. */
.sigil--sealed-shadow {
  background-image: none;
  -webkit-mask: url('assets/mythology/emblem-ivory.png') center/contain no-repeat;
          mask: url('assets/mythology/emblem-ivory.png') center/contain no-repeat;
  background: var(--shadow-bone);
  opacity: 0.42;
}

/* Sealed rebirth · the emblem pressed warm. Gold variant from the
   brand assets, kept at low opacity so the register reads but the
   sealed wings stay subordinate to Exsilium. */
.sigil--sealed-rebirth {
  background-image: url('assets/mythology/emblem-renaissance-gold.png');
  opacity: 0.48;
  filter: drop-shadow(0 0 6px rgba(201, 164, 83, 0.18));
}

/* Floor plan footer · a quiet hairline, then the gallery doorway. */
.floorplan__foot {
  display: grid; gap: 56px;
  justify-items: center;
  margin-top: 24px;
  position: relative;
  z-index: 1;
}
.floorplan__rule {
  width: 96px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(229,169,160,0.42) 50%, transparent 100%);
}

/* Gallery doorway · a side-door at the foot of the floor plan.
   Replaces the prior card-with-thumb-and-arrow. A small portrait
   crop, clipped at the top into an arched shape, sits over its
   own italic caption — *a door, not a button*. Hover brightens
   the image slightly; the caption is the click target's label. */
.doorway {
  display: grid;
  justify-items: center;
  gap: 16px;
  background: none; border: none; cursor: pointer;
  padding: 0;
  color: var(--fg-on-ink-2);
  transition: color var(--t-base) var(--ease-couture);
}
.doorway__thumb {
  position: relative;
  display: block;
  width: 112px; height: 168px;
  clip-path: path('M 0 56 C 0 22, 28 0, 56 0 C 84 0, 112 22, 112 56 L 112 168 L 0 168 Z');
}
.doorway__img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: #15182a;
  filter: brightness(0.78) saturate(0.92);
  transition: filter var(--t-base) var(--ease-couture);
}
.doorway__frame {
  position: absolute; inset: 6px 6px 6px 6px;
  border: 1px solid rgba(244, 239, 230, 0.32);
  clip-path: path('M 0 50 C 0 18, 24 0, 50 0 C 76 0, 100 18, 100 50 L 100 156 L 0 156 Z');
  pointer-events: none;
}
.doorway__label {
  display: grid; gap: 4px; justify-items: center;
  text-align: center;
}
.doorway__title {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--fg-on-ink);
  opacity: 0.85;
}
.doorway__caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--fg-on-ink-2);
  letter-spacing: 0.01em;
  opacity: 0.75;
}
.doorway:hover .doorway__img { filter: brightness(1) saturate(1); }
.doorway:hover .doorway__title { opacity: 1; }
.doorway:hover .doorway__caption { opacity: 1; }

/* Gallery doorway · LEGACY · the prior card-with-arrow doorway is
   Sits below the eleven-stage tree with the visual weight of a node,
   not a footer link. Small thumbnail + label + italic caption + arrow. */
.floorplan__gallery {
  display: inline-grid;
  grid-template-columns: 84px 1fr auto;
  align-items: center;
  gap: 24px;
  justify-self: center;
  margin: 0;
  padding: 14px 24px 14px 14px;
  background: rgba(244, 239, 230, 0.025);
  border: 1px solid var(--hairline-ink);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-base) var(--ease-couture),
              border-color var(--t-base) var(--ease-couture);
}
.floorplan__gallery:hover {
  background: rgba(244, 239, 230, 0.05);
  border-color: rgba(244, 239, 230, 0.28);
}
.floorplan__gallery-thumb {
  display: block;
  width: 84px; height: 112px;
  background-size: cover; background-position: center;
  background-color: #15182a;
}
.floorplan__gallery-meta {
  display: grid; gap: 6px;
}
.floorplan__gallery-title {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--fg-on-ink);
}
.floorplan__gallery-caption {
  font-family: var(--font-serif); font-style: italic; font-size: 14.5px;
  color: var(--fg-on-ink-2);
  letter-spacing: 0.01em;
}
.floorplan__gallery-arrow {
  font-family: var(--font-display); font-size: 16px;
  color: var(--fg-on-ink-2);
  transition: transform var(--t-base) var(--ease-couture), color var(--t-base) var(--ease-couture);
}
.floorplan__gallery:hover .floorplan__gallery-arrow {
  color: var(--fg-on-ink);
  transform: translateX(4px);
}

/* ============================================================
   VELLUM · subtle parchment grain on the ivory grounds.
   Painted as ::before with multiply blend at low opacity so the
   surface stops reading as a flat web background and starts
   reading as a page in a book. The page contents sit above
   (z-index: 1) so nothing on top is dulled by the texture.
   ============================================================ */
.wing__threshold,
.chamber__body[data-tint="pink-soft"],
.chamber__body[data-tint="pink"],
.chamber__body[data-tint="pink-bruise"],
.interstice[data-tint="pink-soft"],
.interstice[data-tint="pink"] {
  position: relative;
}
.wing__threshold::after,
.chamber__body[data-tint="pink-soft"]::after,
.chamber__body[data-tint="pink"]::after,
.chamber__body[data-tint="pink-bruise"]::after,
.interstice[data-tint="pink-soft"]::after,
.interstice[data-tint="pink"]::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--vellum-noise);
  background-repeat: repeat;
  background-size: 220px 220px;
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.chamber__body[data-tint="pink-bruise"]::after { opacity: 0.7; }

/* Keep content above the noise — the chamber bodies and interstices
   render their children in z-index 1 so the texture stays in the
   ground rather than dulling the type. */
.wing__threshold > *,
.chamber__body > *,
.interstice > * { position: relative; z-index: 1; }

/* ============================================================
   WING · Exsilium · scroll primary
   ============================================================ */
.wing {
  min-height: 100vh;
  background: var(--aurielle-ivory);
  color: var(--fg1);
}

.wing__threshold {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 96px 48px 96px;
  text-align: center;
  background: var(--aurielle-ivory);
  position: relative;
  overflow: hidden;
}

/* Ghost emblem watermark · large and centered, very low opacity.
   Reads as something pressed through the page rather than printed
   on it. Sits exactly behind the wordmark so it gives EXSILIUM a
   faint halo rather than competing as a separate object. */
.wing__threshold-watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -54%);
  width: 80vmin; height: 80vmin;
  -webkit-mask: url('assets/mythology/emblem-blush.png') center/contain no-repeat;
          mask: url('assets/mythology/emblem-blush.png') center/contain no-repeat;
  background: var(--exsilium-pink-bruise);
  opacity: 0.045;
  pointer-events: none;
  z-index: 0;
}

.wing__threshold-inner {
  max-width: 820px;
  display: grid; gap: 24px; place-items: center;
  position: relative; z-index: 1;
}

/* Folio header · the manuscript-page mark at the top, identifying
   this page as a chapter opening. Rule · italic label · rule. */
.wing__threshold-folio {
  display: inline-grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  width: min(420px, 60%);
  margin-bottom: 12px;
}
.wing__threshold-folio-rule {
  display: block;
  height: 1px;
  background: var(--hairline);
}
.wing__threshold-folio-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  color: var(--fg3);
  white-space: nowrap;
}

/* Wing numeral · the Roman numeral, the wing's plaque-mark above
   the title. Sized smaller than the wordmark so the wing name
   keeps its rank. */
.wing__threshold-numeral {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--fg2);
  margin-bottom: 4px;
}

/* Wing-name display · sized slightly down from the prior treatment
   so it sits comfortably between the folio header and the divider
   below. */
.wing__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(64px, 10vw, 152px);
  letter-spacing: 0.22em; text-transform: uppercase; line-height: 1;
  color: var(--fg1); margin: 0;
}

/* Divider · the chapter rule beneath EXSILIUM, with the brand
   emblem set as the centre glyph. Carries the eye from title down
   into the inscription. */
.wing__threshold-divider {
  display: inline-grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  width: min(520px, 70%);
  margin: 28px 0 16px;
}
.wing__threshold-divider-rule {
  display: block;
  height: 1px;
  background: var(--hairline);
}
.wing__threshold-divider-emblem {
  display: block;
  width: 22px; height: 30px;
  -webkit-mask: url('assets/mythology/emblem-blush.png') center/contain no-repeat;
          mask: url('assets/mythology/emblem-blush.png') center/contain no-repeat;
  background: var(--exsilium-pink);
  opacity: 0.85;
}

.wing__threshold-asterism {
  margin-top: 28px;
  color: var(--fg3);
}
.wing__inscription-it {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.3; color: var(--fg1);
  text-wrap: balance; margin-top: 8px;
}
.wing__inscription-en {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: calc(clamp(28px, 3.4vw, 44px) * 0.55); line-height: 1.4; color: var(--fg2);
  text-wrap: balance;
}

/* Chamber */
.chamber {
  min-height: 100vh;
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 0; align-items: stretch;
  position: relative;
}
.chamber__video-wrap {
  position: relative; background: var(--aurielle-deep-ink);
  overflow: hidden;
  /* Fill the grid cell completely so the wing's ivory ground never
     leaks through at the bottom of a tall chamber row. */
  width: 100%; height: 100%;
  min-height: 100vh;
}
/* Niche frame · a hairline rule seated inside the image edge, plus a
   soft inset shadow. Says "painting in a wall" rather than "image on
   a screen". Colour follows the chamber's tint so the frame reads as
   part of the temple's atmosphere rather than as UI chrome. Lives as
   a sibling of the <video>, not a pseudo, because the wrap's ::before
   and ::after are already used by per-chamber atmospheric effects. */
.chamber__frame {
  position: absolute; inset: 16px;
  border: 1px solid rgba(244, 239, 230, 0.20);
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  pointer-events: none;
  z-index: 3;
}
.chamber__video-wrap[data-tint="pink-soft"]   .chamber__frame,
.chamber__video-wrap[data-tint="pink"]        .chamber__frame,
.chamber__video-wrap[data-tint="pink-bruise"] .chamber__frame {
  border-color: rgba(122, 44, 38, 0.22);
  box-shadow:
    inset 0 0 60px rgba(122, 44, 38, 0.14),
    inset 0 0 0 1px rgba(122, 44, 38, 0.04);
}
.chamber__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: filter 1.6s var(--ease-couture);
}

/* Atmospheric register · per-chamber palette correction in CSS, per spec
   (temple-architecture.md, pre-launch work #2).
   Drawings stay · saturation drops gently · pinks bruise · blues deepen.
   Not a redraw, an atmosphere pass. */
.chamber__video-wrap[data-tint="pink-soft"]   .chamber__video {
  filter: saturate(0.92) brightness(1.02) contrast(1.02);
}
.chamber__video-wrap[data-tint="pink"]        .chamber__video {
  filter: saturate(0.92) brightness(1.00) contrast(1.02);
}
.chamber__video-wrap[data-tint="pink-bruise"] .chamber__video {
  filter: saturate(0.88) brightness(0.94) contrast(1.05) hue-rotate(-3deg);
}
.chamber__video-wrap[data-tint="red-warm"]    .chamber__video {
  filter: saturate(0.92) brightness(0.92) contrast(1.06);
}

/* Cortile · sky enhancement. The sunset is a narrow band at the top 12-14%
   of the frame. Two soft layers drift horizontally across the sky · the
   architecture below is untouched. */
.chamber__video-wrap[data-tint="red-warm"]::before {
  content: '';
  position: absolute;
  top: 0; left: -20%; right: -20%; height: 14%;
  background: radial-gradient(
    ellipse 35% 100% at 70% 50%,
    rgba(255, 218, 180, 0.55) 0%,
    rgba(255, 218, 180, 0.20) 50%,
    transparent 80%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  filter: blur(8px);
  animation: skyDriftSlow 26s ease-in-out infinite;
  z-index: 1;
}
.chamber__video-wrap[data-tint="red-warm"]::after {
  content: '';
  position: absolute;
  top: 0; left: -25%; right: -25%; height: 16%;
  background: radial-gradient(
    ellipse 30% 100% at 30% 50%,
    rgba(255, 235, 200, 0.50) 0%,
    rgba(255, 235, 200, 0.18) 55%,
    transparent 80%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  filter: blur(10px);
  animation: skyDrift 17s ease-in-out infinite;
  z-index: 1;
}
@keyframes skyDrift {
  0%, 100% { transform: translateX(0);    opacity: 0.7; }
  50%      { transform: translateX(40%);  opacity: 1; }
}
@keyframes skyDriftSlow {
  0%, 100% { transform: translateX(0);    opacity: 0.6; }
  50%      { transform: translateX(-38%); opacity: 0.95; }
}
.chamber__video-wrap[data-tint="red-deep"]    .chamber__video {
  filter: saturate(0.85) brightness(0.78) contrast(1.08) hue-rotate(-4deg);
}

/* Giardino · the prior fountain shimmer + basin glow overlays were
   tuned to the original illustration's fountain position. The new
   illustration carries its own atmosphere; the overlays now flicker
   over the moon. Removed. The chamber atmosphere comes from the
   video's own painted light. */
.chamber__video-wrap[data-tint="red-blood"]   .chamber__video {
  filter: saturate(0.78) brightness(0.70) contrast(1.10) hue-rotate(-6deg);
}

/* Acque · candle warmth at the bath rim.
   Smaller, lower radials than the chandelier above. Slightly faster
   flicker so they don't sync with the chandelier's breath. */
.chamber__video-wrap[data-tint="red-blood"]::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 14% 10% at 20% 70%, rgba(255, 200, 130, 0.40) 0%, transparent 65%),
    radial-gradient(ellipse 14% 10% at 80% 70%, rgba(255, 200, 130, 0.40) 0%, transparent 65%),
    radial-gradient(ellipse 10%  8% at 50% 82%, rgba(255, 200, 130, 0.22) 0%, transparent 65%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: candleFlicker 3.2s ease-in-out infinite;
  z-index: 1;
}
@keyframes candleFlicker {
  0%, 100% { opacity: 0.78; }
  40%      { opacity: 0.96; }
  60%      { opacity: 0.88; }
}

/* Acque · candlelight glow from the chandelier above the bath.
   Soft warm radial in screen blend mode · lightens the area around the
   light source without lifting the rest of the scene. A slow breath
   pulse mimics a candle. */
.chamber__video-wrap[data-tint="red-blood"]::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse 38% 50% at 50% 26%,
    rgba(255, 215, 150, 0.45) 0%,
    rgba(255, 215, 150, 0.22) 32%,
    rgba(255, 215, 150, 0.06) 58%,
    transparent 78%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  animation: candleBreath 5.4s ease-in-out infinite;
  z-index: 1;
}
@keyframes candleBreath {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* No overlays on the illustration. The chamber name lives in the body
   so the artwork stays uninterrupted. */

/* Origine Frame 2 · vignette breathing per spec.
   0 → 1.5s    mild vignette (room visible)
   1.5 → 2.5s  vignette tightens (focus on red cloth)
   2.5 → 4s    vignette eases back out
*/
.chamber__video-wrap[data-vignette="breathing"]::after {
  content: '';
  position: absolute; inset: -8%;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 70% at 50% 65%,
              transparent 0%, transparent 30%,
              rgba(0,0,0,1) 100%);
  animation: vignetteBreath 4s ease-in-out infinite;
  z-index: 1;
}
@keyframes vignetteBreath {
  0%   { transform: scale(1);    opacity: 0.55; }
  37.5%{ transform: scale(1);    opacity: 0.55; }
  62.5%{ transform: scale(0.88); opacity: 0.95; }
  100% { transform: scale(1);    opacity: 0.55; }
}

/* ============================================================
   CHAMBER ATMOSPHERE · per-chamber particle layer.
   Each chamber adds a sibling <span class="chamber__atmo"> inside
   the video-wrap. The layer sits below the inscribed frame and
   above the painting. All particles are pure-CSS animated with
   parameters passed in via CSS custom properties from React.
   Reduced motion suppresses everything.
   ============================================================ */
.chamber__atmo {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.chamber__atmo span {
  position: absolute;
  display: block;
  border-radius: 50%;
  /* Each child reads its parameters via CSS vars set inline. Defaults
     here keep things sane if a var is missing. */
  --x: 0.5;
  --y: 0.5;
  --delay: 0;
  --duration: 16;
  --size: 2;
  --drift: 0;
  --opacity: 0.6;
  left: calc(var(--x) * 100%);
  top:  calc(var(--y) * 100%);
  width:  calc(var(--size) * 1px);
  height: calc(var(--size) * 1px);
  will-change: transform, opacity;
}

/* La Discesa · pale dust motes falling.
   Each mote starts above the frame and drifts down past the bottom.
   Horizontal drift sways slightly so the descent isn't mechanical. */
.chamber__atmo--motes span {
  background: rgba(244, 232, 220, 0.85);
  box-shadow: 0 0 6px rgba(244, 232, 220, 0.35);
  top: -6%;
  opacity: 0;
  animation: moteDrift calc(var(--duration) * 1s) linear calc(var(--delay) * 1s) infinite;
}
@keyframes moteDrift {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  8%   { opacity: var(--opacity); }
  92%  { opacity: var(--opacity); }
  100% { transform: translate3d(calc(var(--drift) * 1px), 110vh, 0); opacity: 0; }
}

/* L'Origine · warm embers rising.
   Fewer, larger, warmer than the motes. Each starts below the frame
   and lifts upward; a slow horizontal sway sells "warm air rising". */
.chamber__atmo--embers span {
  background: rgba(248, 196, 168, 0.85);
  box-shadow: 0 0 10px rgba(248, 178, 142, 0.55),
              0 0 22px rgba(248, 178, 142, 0.25);
  top: 106%;
  width:  calc((var(--size) + 1) * 1px);
  height: calc((var(--size) + 1) * 1px);
  opacity: 0;
  animation: emberRise calc((var(--duration) + 6) * 1s) ease-in-out calc(var(--delay) * 1s) infinite;
}
@keyframes emberRise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: var(--opacity); }
  50%  { transform: translate3d(calc(var(--drift) * 1px), -55vh, 0); }
  88%  { opacity: var(--opacity); }
  100% { transform: translate3d(calc(var(--drift) * -1px), -115vh, 0); opacity: 0; }
}

/* Il Giardino · low warm mist drifting along the ground line.
   Two large patches at different speeds + opacities; a third smaller
   patch higher in the frame catches the moonlight. Mist sits in
   screen blend so it lifts the dark red ground toward warmth, not
   ivory whiteness. */
.chamber__atmo--mist span {
  border-radius: 50%;
  filter: blur(22px);
  mix-blend-mode: screen;
  left: -10%; right: auto;
  width: 75%; height: 30%;
  top: auto; bottom: -6%;
}
.chamber__atmo--mist span:nth-child(1) {
  background: radial-gradient(ellipse 60% 80% at 50% 50%,
    rgba(252, 222, 196, 0.45) 0%,
    rgba(248, 200, 168, 0.22) 45%,
    transparent 80%);
  animation: mistDrift 22s ease-in-out 0s infinite, mistBreath 14s ease-in-out 0s infinite;
}
.chamber__atmo--mist span:nth-child(2) {
  left: auto; right: -20%;
  width: 85%; height: 36%;
  bottom: -10%;
  background: radial-gradient(ellipse 60% 80% at 50% 50%,
    rgba(252, 218, 186, 0.38) 0%,
    rgba(244, 188, 156, 0.18) 50%,
    transparent 78%);
  animation: mistDriftBack 26s ease-in-out -8s infinite, mistBreath 17s ease-in-out -4s infinite;
}
@keyframes mistDrift {
  0%, 100% { transform: translateX(-8%); }
  50%      { transform: translateX(16%); }
}
@keyframes mistDriftBack {
  0%, 100% { transform: translateX(12%); }
  50%      { transform: translateX(-14%); }
}
@keyframes mistBreath {
  0%, 100% { opacity: 0.70; }
  50%      { opacity: 1; }
}

/* Le Acque · ripples on the bath surface.
   Real water ripples are flat ellipses (perspective compression) that
   stay on the water surface, not perfect circles climbing into the
   room. Placed low in the frame where the bath water is visible. Three
   rings staggered on a 7s cycle, expanding to a modest peak, then
   fading. Sits in screen blend so the painted water lifts faintly
   without producing a hard hoop. */
.chamber__atmo--ripple span,
.chamber__atmo--ripple span:nth-child(1) {
  left: 38%; top: 84%;
  width: 14%; height: 2.4%;
  aspect-ratio: auto;
  background: none;
  border: 1px solid rgba(252, 222, 196, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.35);
  transform-origin: center;
  opacity: 0;
  mix-blend-mode: screen;
  animation: ripple 7s ease-out 0s infinite;
}
.chamber__atmo--ripple span:nth-child(2) {
  left: 52%; top: 88%;
  width: 12%; height: 2%;
  animation-delay: -2.5s;
}
.chamber__atmo--ripple span:nth-child(3) {
  left: 44%; top: 86%;
  width: 10%; height: 1.8%;
  animation-delay: -4.8s;
}
@keyframes ripple {
  0%   { transform: translate(-50%, -50%) scale(0.35); opacity: 0; }
  18%  { opacity: 0.7; }
  60%  { opacity: 0.4; }
  100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
}

.chamber__body {
  background: var(--aurielle-ivory);
  padding: 112px 64px 96px;
  display: grid; align-content: center; gap: 28px;
}
/* Chamber plaque — the chiseled signage at the head of each chamber body.
   Roman numeral large, hairline divider, display name in caps, English
   caption italic. Reads as a temple plaque rather than a UX section header.
   Aligns to the start of the chamber body (left, or center on paired). */
.chamber__plaque {
  display: grid;
  justify-items: start;
  gap: 10px;
  margin-bottom: 4px;
}
.chamber__plaque-numeral {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 4.2vw, 64px);
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--fg1);
  opacity: 0.78;
}
.chamber__plaque-rule {
  width: 38px;
  height: 1px;
  background: var(--hairline);
  margin: 2px 0 4px;
}
.chamber__plaque-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--fg1);
  text-wrap: balance;
}
.chamber__plaque-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--fg2);
  margin-top: 2px;
}

/* Paired plaque centers — the diptych's single shared plaque. */
.chamber__body--paired .chamber__plaque {
  justify-items: center;
  text-align: center;
}

/* Plaque on the deep tinted bodies — ivory ink switches in. */
.chamber__body[data-tint="red-warm"]  .chamber__plaque-numeral,
.chamber__body[data-tint="red-deep"]  .chamber__plaque-numeral,
.chamber__body[data-tint="red-blood"] .chamber__plaque-numeral,
.chamber__body[data-tint="red-warm"]  .chamber__plaque-name,
.chamber__body[data-tint="red-deep"]  .chamber__plaque-name,
.chamber__body[data-tint="red-blood"] .chamber__plaque-name { color: var(--fg-on-ink); }
.chamber__body[data-tint="red-warm"]  .chamber__plaque-caption,
.chamber__body[data-tint="red-deep"]  .chamber__plaque-caption,
.chamber__body[data-tint="red-blood"] .chamber__plaque-caption { color: var(--fg-on-ink-2); }
.chamber__body[data-tint="red-warm"]  .chamber__plaque-rule,
.chamber__body[data-tint="red-deep"]  .chamber__plaque-rule,
.chamber__body[data-tint="red-blood"] .chamber__plaque-rule { background: rgba(244,239,230,.35); }

.chamber__inscription-it {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 2.8vw, 42px); line-height: 1.32; color: var(--fg1);
  text-wrap: balance;
}
.chamber__inscription-en {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: calc(clamp(28px, 2.8vw, 42px) * 0.6); line-height: 1.42; color: var(--fg2);
  text-wrap: balance;
}
/* .chamber__rule removed — the plaque now carries the divider role. */

/* Chambers alternate the layout */
.chamber--reverse { grid-template-columns: 1fr 1.15fr; direction: rtl; }
.chamber--reverse > * { direction: ltr; }

/* Full-bleed chamber · Le Acque, the wing's terminal.
   The illustration takes the full viewport; the body becomes an
   inscribed panel in one corner — text *inside the fresco* rather
   than text *beside it*. Earns its strangeness once. */
.chamber--full-bleed {
  display: block;
  position: relative;
  min-height: 100vh;
  direction: ltr;
}
.chamber--full-bleed .chamber__video-wrap {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.chamber--full-bleed .chamber__frame { inset: 24px; border-color: rgba(244, 239, 230, 0.18); }
.chamber--full-bleed .chamber__body {
  position: absolute;
  left: 56px; top: 56px;
  width: min(440px, 38vw);
  padding: 36px 36px 32px;
  background: rgba(26, 10, 14, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(244, 239, 230, 0.16);
  z-index: 4;
  gap: 20px;
}
.chamber--full-bleed .chamber__plaque { justify-items: start; }
.chamber--full-bleed .chamber__plaque-numeral,
.chamber--full-bleed .chamber__plaque-name { color: var(--fg-on-ink); }
.chamber--full-bleed .chamber__plaque-caption { color: var(--fg-on-ink-2); }
.chamber--full-bleed .chamber__plaque-rule { background: rgba(244, 239, 230, 0.45); }

/* L'Origine diptych · two illustrations side by side on the top row,
   two inscriptions side by side on the bottom row. One chamber rendered
   as the wing's pivot moment. */
.chamber--paired {
  direction: ltr;
  min-height: auto;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh auto;
  column-gap: 40px;
  background: var(--aurielle-ivory);
}
.chamber--paired > * { direction: ltr; }
.chamber--paired .chamber__video-wrap { border-right: none; }

/* The diptych's shared body spans both columns. One header + one name,
   then two inscriptions side by side, one centered rule, two subtitles. */
.chamber__body--paired {
  grid-column: span 2;
  padding: 80px 56px 96px;
  text-align: center;
  display: grid;
  gap: 28px;
  justify-items: center;
}

.chamber__pair-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  width: 100%;
  max-width: 1080px;
  text-align: left;
}
.chamber__pair-col { display: grid; gap: 12px; }
/* The English subtitle row sits closer to the Italian above it — no
   divider rule between, the lighter italic carries the separation. */
.chamber__pair-row--en { margin-top: -4px; }
.chamber__pair-label {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--fg2);
}
.chamber__rule--centered {
  width: 96px; height: 1px; background: var(--hairline);
  margin: 0;
}

/* Scroll-reveal: each chamber body fades in as it enters the viewport.
   Pure opacity — no translateY. The page's own scroll motion already
   carries the body in; layering a transform on top fights the scroll
   and reads as awkward. Duration tuned so the fade resolves cleanly
   around the time the body settles in the upper-middle of the screen. */
.chamber__body { opacity: 0; transition: opacity 900ms var(--ease-couture); }
.chamber.is-visible .chamber__body { opacity: 1; }

/* Pause atmospheric animations + per-chamber CSS overlays when the
   chamber is not the active one in the viewport. Saves CPU/battery
   when the visitor has scrolled past or hasn't reached the chamber
   yet. The is-active class is toggled by the chamber observer in
   Wing.jsx (ioMedia). */
.chamber:not(.is-active) .chamber__atmo span,
.chamber:not(.is-active) .chamber__video-wrap::before,
.chamber:not(.is-active) .chamber__video-wrap::after {
  animation-play-state: paused !important;
}

/* ============================================================
   I18N · single-string language gates.
   The <T it=... en=... /> helper renders both as adjacent spans;
   these rules hide whichever isn't the active language. Combined
   with the inscription order/size swap below this covers every
   piece of copy in the temple — chamber names, floor plan headers,
   gallery captions, button labels, footer links.
   ============================================================ */
.temple[data-lang="it"] .i18n-en { display: none; }
.temple[data-lang="en"] .i18n-it { display: none; }

/* ============================================================
   LANGUAGE SWAP · IT primary (default) ⇄ EN primary.
   The visitor's choice at the threshold toggles a data-lang
   attribute on the .temple root. Default rules style IT as
   primary and EN as 70%-italic subtitle; the [data-lang="en"]
   block flips both the order (EN above IT) and the sizing
   (EN takes the primary size, IT shrinks to subtitle).
   ============================================================ */

/* Bilingual containers · IT first by default, EN below as subtitle.
   When data-lang="en", flex/grid order swaps so EN renders first.
   The containers themselves are flex-column so children pick up the
   gap and the order property cleanly. */
.threshold__inscription .threshold__it,
.wing__bilingual .wing__inscription-it,
.chamber__bilingual .chamber__inscription-it,
.closing__inscription .closing__it { order: 1; }
.threshold__inscription .threshold__en,
.wing__bilingual .wing__inscription-en,
.chamber__bilingual .chamber__inscription-en,
.closing__inscription .closing__en { order: 2; }

/* When EN is primary · swap the order so the visitor's chosen language
   reads first; the secondary language follows beneath as subtitle. */
.temple[data-lang="en"] .threshold__inscription .threshold__it,
.temple[data-lang="en"] .wing__bilingual .wing__inscription-it,
.temple[data-lang="en"] .chamber__bilingual .chamber__inscription-it,
.temple[data-lang="en"] .closing__inscription .closing__it { order: 2; }
.temple[data-lang="en"] .threshold__inscription .threshold__en,
.temple[data-lang="en"] .wing__bilingual .wing__inscription-en,
.temple[data-lang="en"] .chamber__bilingual .chamber__inscription-en,
.temple[data-lang="en"] .closing__inscription .closing__en { order: 1; }

/* THRESHOLD · size swap.
   Defaults: IT primary (clamp 40–68px, full opacity), EN secondary
   (42% of primary, lighter opacity, more letter-spaced). When EN is
   primary, the styling exchanges. */
.temple[data-lang="en"] .threshold__it {
  font-size: calc(clamp(40px, 5vw, 68px) * 0.42);
  line-height: 1.35;
  color: var(--fg-on-ink-2);
  letter-spacing: 0.04em;
  opacity: 0.78;
}
.temple[data-lang="en"] .threshold__en {
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.18;
  color: var(--fg-on-ink);
  letter-spacing: 0.005em;
  opacity: 1;
}

/* WING THRESHOLD · size swap. */
.temple[data-lang="en"] .wing__inscription-it {
  font-size: calc(clamp(28px, 3.4vw, 44px) * 0.55);
  line-height: 1.4;
  color: var(--fg2);
}
.temple[data-lang="en"] .wing__inscription-en {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.3;
  color: var(--fg1);
}

/* CHAMBER inscription · size swap (single chambers + the diptych's
   inscriptions which share the same classes). */
.temple[data-lang="en"] .chamber__inscription-it {
  font-size: calc(clamp(28px, 2.8vw, 42px) * 0.6);
  line-height: 1.42;
  color: var(--fg2);
}
.temple[data-lang="en"] .chamber__inscription-en {
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1.32;
  color: var(--fg1);
}
/* Chamber bodies on the deep tinted grounds invert the foreground
   palette · re-apply the inverted swap when EN primary. */
.temple[data-lang="en"] .chamber__body[data-tint="red-warm"]  .chamber__inscription-it,
.temple[data-lang="en"] .chamber__body[data-tint="red-deep"]  .chamber__inscription-it,
.temple[data-lang="en"] .chamber__body[data-tint="red-blood"] .chamber__inscription-it { color: var(--fg-on-ink-2); }
.temple[data-lang="en"] .chamber__body[data-tint="red-warm"]  .chamber__inscription-en,
.temple[data-lang="en"] .chamber__body[data-tint="red-deep"]  .chamber__inscription-en,
.temple[data-lang="en"] .chamber__body[data-tint="red-blood"] .chamber__inscription-en { color: var(--fg-on-ink); }

/* CLOSING · size swap. */
.temple[data-lang="en"] .closing__it {
  font-size: calc(clamp(36px, 4.6vw, 72px) * 0.45);
  color: var(--fg-on-ink-2);
}
.temple[data-lang="en"] .closing__en {
  font-size: clamp(36px, 4.6vw, 72px);
  line-height: 1.12;
  color: var(--fg-on-ink);
}

/* Monolingual chambers (Le Acque) · the terminal chamber drops the
   subtitle entirely as a structural pattern break. Hide whichever is
   secondary based on the visitor's chosen primary language. */
.temple[data-lang="it"] .chamber__body--monolingual .chamber__inscription-en { display: none; }
.temple[data-lang="en"] .chamber__body--monolingual .chamber__inscription-it { display: none; }

/* Bilingual wrapper styles · keep the visual spacing identical to the
   surrounding flow so existing layouts don't reflow. */
.chamber__bilingual {
  display: flex; flex-direction: column;
  gap: 28px;
  width: 100%;
}
.wing__bilingual {
  display: flex; flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
}

/* Paired diptych bilingual · the IT pair-row and EN pair-row swap as
   blocks when EN primary. The wrapper preserves the original column
   gap and width. */
.chamber__bilingual--paired {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  width: 100%;
  max-width: 1080px;
}
.temple[data-lang="en"] .chamber__bilingual--paired .chamber__pair-row { order: 2; }
.temple[data-lang="en"] .chamber__bilingual--paired .chamber__pair-row--en { order: 1; }

/* And the inscriptions inside the diptych pair-rows · the rows
   themselves hold IT inscriptions (chamber__pair-row, default) and
   EN inscriptions (chamber__pair-row--en). When EN primary, the IT
   inscriptions inside chamber__pair-row become secondary-sized, and
   the EN inscriptions inside chamber__pair-row--en become primary. */
.temple[data-lang="en"] .chamber__pair-row .chamber__inscription-it {
  font-size: calc(clamp(28px, 2.8vw, 42px) * 0.6);
  line-height: 1.42;
  color: var(--fg2);
}
.temple[data-lang="en"] .chamber__pair-row--en .chamber__inscription-en {
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1.32;
  color: var(--fg1);
}

/* Surround tints — sweet to blood. First three chambers stay near-ivory;
   Cortile shifts into the first true red; Giardino and Acque drop almost
   to ink, where the inscription palette switches to ivory. */
.chamber__body[data-tint="pink-soft"]   { background: var(--aurielle-ivory); }
.chamber__body[data-tint="pink"]        { background: var(--aurielle-ivory); }
.chamber__body[data-tint="pink-bruise"] { background: #ECDFD3; }
.chamber__body[data-tint="red-warm"]    { background: #B8514A; }
.chamber__body[data-tint="red-deep"]    { background: #5A1F22; }
.chamber__body[data-tint="red-blood"]   { background: #1A0A0E; }

.chamber__body[data-tint="red-warm"]  .chamber__inscription-it,
.chamber__body[data-tint="red-deep"]  .chamber__inscription-it,
.chamber__body[data-tint="red-blood"] .chamber__inscription-it { color: var(--fg-on-ink); }
.chamber__body[data-tint="red-warm"]  .chamber__inscription-en,
.chamber__body[data-tint="red-deep"]  .chamber__inscription-en,
.chamber__body[data-tint="red-blood"] .chamber__inscription-en { color: var(--fg-on-ink-2); }


/* ============================================================
   INTERSTICE · the photographic fall between chambers.
   Replaces the old 168px hairline band with a real stanza —
   ~90vh tall — that carries one tipped-in photograph plus an
   italic Italian caption. The ground inherits the tint of the
   chamber just left so the descent reads as one surface that
   the photograph is pinned into.
   ============================================================ */
.interstice {
  min-height: 70vh;
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  align-items: center;
  padding: 56px 32px 64px;
  background: var(--aurielle-ivory);
  position: relative;
  overflow: hidden;
}
.interstice[data-tint="pink-soft"]   { background: var(--aurielle-ivory); }
.interstice[data-tint="pink"]        { background: var(--aurielle-ivory); }
.interstice[data-tint="pink-bruise"] { background: #ECDFD3; }
.interstice[data-tint="red-warm"]    { background: #B8514A; }
.interstice[data-tint="red-deep"]    { background: #5A1F22; }
.interstice[data-tint="red-blood"]   { background: #1A0A0E; }

/* The plate · the photograph itself, centered as a tipped-in portrait.
   1px inner hairline frame seated inside the image edge to mark it as
   *plate* rather than full-bleed image. The image is constrained by
   height so a tall portrait doesn't push the caption off-screen. */
.interstice__plate {
  position: relative;
  grid-row: 1;
  width: clamp(280px, 42vw, 520px);
  max-height: 60vh;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(11, 14, 26, .35),
              0 6px 14px -8px rgba(11, 14, 26, .18);
}
.interstice__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Hairline plate frame · color flips on deep grounds. */
.interstice__frame {
  position: absolute; inset: 14px;
  border: 1px solid rgba(244, 239, 230, 0.6);
  pointer-events: none;
}
.interstice[data-tint="pink-soft"]   .interstice__frame,
.interstice[data-tint="pink"]        .interstice__frame,
.interstice[data-tint="pink-bruise"] .interstice__frame {
  border-color: rgba(244, 239, 230, 0.7);
}
.interstice[data-tint="red-warm"]    .interstice__frame { border-color: rgba(244, 239, 230, 0.55); }
.interstice[data-tint="red-deep"]    .interstice__frame { border-color: rgba(244, 239, 230, 0.45); }
.interstice[data-tint="red-blood"]   .interstice__frame { border-color: rgba(244, 239, 230, 0.35); }

/* Caption · italic, single line, no English translation.
   The photograph speaks; the caption annotates. */
.interstice__caption {
  grid-row: 2;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.4;
  color: var(--fg1);
  text-wrap: balance;
  text-align: center;
  margin-top: 36px;
  max-width: 36ch;
  letter-spacing: 0.005em;
}
.interstice[data-tint="pink-bruise"] .interstice__caption,
.interstice[data-tint="red-warm"]    .interstice__caption,
.interstice[data-tint="red-deep"]    .interstice__caption,
.interstice[data-tint="red-blood"]   .interstice__caption {
  color: var(--fg-on-ink);
}

/* Page mark · ghosted emblem far below the caption.
   The descent sigil, very small, low contrast — a page number rather
   than a divider. */
.interstice__emblem {
  grid-row: 3;
  align-self: end;
  width: 22px; height: 30px;
  margin-top: 32px;
  -webkit-mask: url('assets/mythology/emblem-blush.png') center/contain no-repeat;
          mask: url('assets/mythology/emblem-blush.png') center/contain no-repeat;
  background: var(--fg1);
  opacity: 0.18;
}
.interstice[data-tint="pink-bruise"] .interstice__emblem,
.interstice[data-tint="red-warm"]    .interstice__emblem,
.interstice[data-tint="red-deep"]    .interstice__emblem,
.interstice[data-tint="red-blood"]   .interstice__emblem {
  -webkit-mask-image: url('assets/mythology/emblem-ivory.png');
          mask-image: url('assets/mythology/emblem-ivory.png');
  background: var(--fg-on-ink);
  opacity: 0.22;
}

/* Reveal · plate + caption fade in once the interstice is on screen.
   Tuned to feel like an apparition rather than a transition. */
.interstice__plate,
.interstice__caption,
.interstice__emblem {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1100ms var(--ease-couture),
              transform 1100ms var(--ease-couture);
}
.interstice.is-visible .interstice__plate   { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.interstice.is-visible .interstice__caption { opacity: 1; transform: translateY(0); transition-delay: 380ms; }
.interstice.is-visible .interstice__emblem  { opacity: 0.18; transform: translateY(0); transition-delay: 700ms; }
.interstice[data-tint="pink-bruise"].is-visible .interstice__emblem,
.interstice[data-tint="red-warm"].is-visible    .interstice__emblem,
.interstice[data-tint="red-deep"].is-visible    .interstice__emblem,
.interstice[data-tint="red-blood"].is-visible   .interstice__emblem { opacity: 0.22; }

/* End of wing · the terminal tail.
   Continues the near-ink ground of the final chamber (Acque) so the wing
   doesn't visually end at a panel. A small sentinel near the bottom is
   used by the IntersectionObserver in Wing.jsx to trigger the fade to
   the closing screen. Visitor falls through. */
.wing__tail {
  height: 80vh;
  background: linear-gradient(180deg, #1A0A0E 0%, var(--aurielle-deep-ink) 100%);
}
.wing__sentinel {
  height: 1px; width: 100%;
  pointer-events: none;
}

/* ============================================================
   CLOSING · phased reveal
   ============================================================ */
.closing {
  min-height: 100vh;
  background: var(--aurielle-deep-ink) center/cover no-repeat;
  position: relative;
  display: grid; place-items: center; text-align: center;
  padding: 64px 32px;
}
.closing__veil {
  position: absolute; inset: 0;
  /* Two stacked gradients · a radial vignette that deepens the area
     where the inscription sits, and a vertical pass that fades the
     image at the top and floor it at the bottom for the choices.
     Inscription wins centre; photograph wins edges. */
  background:
    radial-gradient(ellipse 70% 50% at 50% 48%,
      rgba(11, 14, 26, 0.78) 0%,
      rgba(11, 14, 26, 0.42) 50%,
      rgba(11, 14, 26, 0.08) 100%),
    linear-gradient(180deg,
      rgba(11, 14, 26, 0.55) 0%,
      rgba(11, 14, 26, 0.12) 22%,
      rgba(11, 14, 26, 0.18) 68%,
      rgba(11, 14, 26, 0.92) 100%);
}
.closing__inner {
  position: relative; z-index: 1;
  display: grid; gap: 56px; place-items: center;
}
.closing__inscription { display: grid; gap: 18px; justify-items: center; }

/* Wing's seal · a small Roman I above the inscription, marking
   "Fine del primo esilio" as the closing of Wing I. Not chrome:
   the seal that pins the closing to the temple's numeration. */
.closing__seal {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.32em;
  color: var(--fg-on-ink-2);
  opacity: 0.7;
  padding-right: 0.32em; /* the letter-spacing trick — pulls the I left of center */
}
.closing__asterism { margin-top: 18px; }
.closing__it {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(36px, 4.6vw, 72px); line-height: 1.12;
  color: var(--fg-on-ink); text-wrap: balance;
}
.closing__en {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: calc(clamp(36px, 4.6vw, 72px) * 0.45); color: var(--fg-on-ink-2); text-wrap: balance;
}

.closing__inscription, .closing__choices, .closing__bottega {
  opacity: 0;
  transition: opacity 2s var(--ease-couture);
}
.closing.is-revealed .closing__inscription { opacity: 1; transition-delay: 1.4s; }
.closing.is-revealed .closing__choices     { opacity: 1; transition-delay: 3.4s; }
.closing.is-revealed .closing__bottega     { opacity: 1; transition-delay: 4.6s; }

/* Two peer doorways · Ritorna al tempio · Galleria fotografica */
.closing__choices {
  display: inline-flex; align-items: center; gap: 24px;
}
/* Hairline divider replaces the prior · separator. Sits at type
   baseline as a thin vertical rule, ~18px tall, very low contrast. */
.closing__choices-mid {
  display: inline-block;
  width: 1px; height: 16px;
  background: rgba(244, 239, 230, 0.32);
  transform: translateY(2px);
}
.closing__return {
  background: none; border: none; padding: 0;
  font-family: var(--font-serif); font-style: italic; font-size: 17px;
  color: var(--fg-on-ink);
  text-decoration: underline; text-underline-offset: 8px;
  text-decoration-thickness: 0.5px;
  text-decoration-color: rgba(244, 239, 230, 0.55);
  cursor: pointer;
  letter-spacing: 0.01em;
  opacity: 0.85;
  transition: color var(--t-base) var(--ease-couture), opacity var(--t-base) var(--ease-couture), text-decoration-color var(--t-base) var(--ease-couture);
}
.closing__return:hover {
  color: var(--fg-on-ink);
  opacity: 1;
  text-decoration-color: var(--fg-on-ink);
}
/* "La bottega è altrove" · set as a press-release footer, not as a
   link. Letter-spaced sans caps at small size, airy, with a thin
   underline appearing only on hover. Sells the asymmetry the brand
   essence claims — commerce reachable but explicitly subordinate. */
.closing__bottega {
  margin-top: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--fg-on-ink-2);
  text-decoration: none;
  background: none; border: none; cursor: pointer;
  display: inline-flex;
  align-items: center; gap: 10px;
  opacity: 0.7;
  transition: opacity var(--t-base) var(--ease-couture), color var(--t-base) var(--ease-couture);
}
.closing__bottega::after {
  content: '';
  width: 22px; height: 1px;
  background: currentColor;
  opacity: 0.5;
  transition: width var(--t-base) var(--ease-couture);
}
.closing__bottega:hover {
  color: var(--fg-on-ink);
  opacity: 1;
}
.closing__bottega:hover::after { width: 34px; }

/* ============================================================
   GALLERY · the museum hall · a walk through the wing.
   Plate spreads stack vertically with the gallery's deep-ink
   ground around them; atmosphere spreads break that rhythm with
   full-bleed establishing / passage / exit photographs. Sculpture
   interludes sit between plates as smaller centered figures.
   ============================================================ */
.gallery {
  background: var(--aurielle-deep-ink);
  min-height: 100vh;
  position: relative;
  /* No outer padding · atmosphere spreads need to bleed edge-to-edge.
     The plate hall sets its own inner padding. */
}
.gallery::before {
  /* Faint vellum-on-ink across the whole surface · the gallery wall. */
  content: '';
  position: absolute; inset: 0;
  background-image: var(--vellum-noise);
  background-repeat: repeat;
  background-size: 220px 220px;
  mix-blend-mode: screen;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.gallery > * { position: relative; z-index: 1; }

/* The hall · a vertical sequence of spreads with consistent gaps.
   Atmosphere spreads inside this column override the column's max-width
   via their own full-bleed positioning. */
.gallery__hall {
  display: grid;
  gap: 112px;
  width: 100%;
}

/* ============================================================
   PLATE · a hung work
   ============================================================ */

.plate {
  position: relative;
  display: grid;
  gap: 18px;
  margin: 0;
}
.plate__img {
  display: block;
  width: 100%;
  background: #15182a center/cover no-repeat;
  aspect-ratio: 3 / 4;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.55),
              0 6px 14px -8px rgba(0,0,0,0.30);
}
.plate__frame {
  position: absolute;
  inset: 10px 10px auto 10px;
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(244, 239, 230, 0.32);
  pointer-events: none;
}
/* Picture light · a soft warm radial highlight along the top edge of
   each plate, fading downward. Reads as gallery spot-lighting from
   above. Screen-blend so it lifts the top of the photograph without
   washing out the rest. */
.plate__light {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 38%;
  background: radial-gradient(ellipse 65% 100% at 50% 0%,
    rgba(252, 232, 200, 0.20) 0%,
    rgba(252, 232, 200, 0.08) 40%,
    transparent 75%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.plate__folio {
  display: block;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  color: var(--fg-on-ink-2);
  opacity: 0.6;
  margin: 0;
}

/* ----- SPREAD types ---------------------------------------------- */

.spread {
  display: grid;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
}

.spread--hero {
  grid-template-columns: 1fr;
  padding: 0 18% 0;
}
.spread--hero .plate__img,
.spread--hero .plate__frame { aspect-ratio: 4/5; }

.spread--landscape {
  grid-template-columns: 1fr;
  padding: 0 8% 0;
}
.spread--landscape .plate__img {
  aspect-ratio: 16/9;
  background-position: center 28%;
}
.spread--landscape .plate__frame { aspect-ratio: 16/9; }

.spread--pair {
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 0 6%;
}

.spread--asym {
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  padding: 0 6%;
  align-items: stretch;
}
.spread--asym .spread__asym-col {
  display: grid;
  /* note + plate vertically; the note takes whatever the top reserves
     and the plate sits beneath it. Bottom margin keeps the smaller
     plate hanging visually below the principal work's centre. */
  grid-template-rows: 1fr auto;
  gap: 24px;
  align-content: end;
  padding-bottom: 6%;
}
.spread__asym-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.4;
  letter-spacing: 0.015em;
  color: var(--fg-on-ink);
  opacity: 0.88;
  text-align: left;
  text-wrap: balance;
  max-width: 18ch;
  padding-top: 12%;  /* drops the note down so it sits at gallery eye-level */
}
.spread__asym-note em { font-style: italic; }

/* PART · the section opener before each register. */
.spread--part {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 32px 48px 12px;
  text-align: center;
  max-width: 1280px;
  margin: 0 auto;
}
.spread__part-roman {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 4.6vw, 64px);
  letter-spacing: 0.22em;
  color: var(--fg-on-ink);
  opacity: 0.78;
  line-height: 1;
}
.spread__part-it {
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--fg-on-ink-2);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.spread__part-it em { font-style: italic; }

/* ============================================================
   ATMOSPHERE · full-bleed establishing / passage / exit shot
   ============================================================ */
.atmosphere {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  /* Atmosphere spreads break out of the gallery__hall column to bleed
     edge-to-edge. The gallery__hall has no horizontal padding so this
     works without negative-margin gymnastics. */
}
.atmosphere__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.atmosphere__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(11, 14, 26, 0.30) 0%,
    rgba(11, 14, 26, 0.05) 30%,
    rgba(11, 14, 26, 0.10) 60%,
    rgba(11, 14, 26, 0.55) 100%);
  pointer-events: none;
}

/* Opening overlay · sits low, leaves the upper 2/3 of the photograph
   uninterrupted so the room is seen first. */
.atmosphere__overlay {
  position: absolute;
  left: 0; right: 0;
  display: grid; justify-items: center;
  gap: 18px;
  text-align: center;
  padding: 0 48px;
  z-index: 1;
}
.atmosphere__overlay--opening {
  bottom: 12%;
}
.atmosphere__eyebrow {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--fg-on-ink-2);
  display: inline-flex; align-items: center; gap: 14px;
}
.atmosphere__eyebrow span {
  font-size: 18px;
  letter-spacing: 0.22em;
  color: var(--exsilium-pink-soft);
}
.atmosphere__title {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(32px, 3.8vw, 52px);
  color: var(--fg-on-ink);
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.atmosphere__asterism { margin-top: 6px; }

/* Passage overlay · centered, the moment between rooms. A small Roman
   marker with the destination's name beneath, flanked by hairlines. */
.atmosphere__overlay--passage {
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.atmosphere__overlay--passage .atmosphere__passage-rule {
  display: block;
  height: 1px;
  background: rgba(244, 239, 230, 0.6);
}
.atmosphere__passage-mark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: 0.18em;
  color: var(--fg-on-ink);
  line-height: 1;
}
.atmosphere__passage-it {
  position: absolute;
  bottom: -38px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: var(--fg-on-ink);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

/* Exit overlay · sits low, italic only, the final breath. */
.atmosphere__overlay--exit {
  bottom: 14%;
}
.atmosphere__exit-it {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--fg-on-ink);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   SCULPTURE · a smaller centered atmospheric photograph
   ============================================================ */
.sculpture {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin: 0;
  padding: 0 24%;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
.sculpture__plate {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.55),
              0 6px 14px -8px rgba(0,0,0,0.30);
}
.sculpture__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.sculpture__caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--fg-on-ink-2);
  opacity: 0.85;
  text-align: center;
}

/* ============================================================
   Closing
   ============================================================ */
.gallery__foot {
  display: grid; justify-items: center; gap: 36px;
  margin: 0;
  padding: 96px 32px 96px;
}
.gallery__foot-asterism { color: var(--fg-on-ink-2); }

.gallery__back {
  background: none; border: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--fg-on-ink-2);
  cursor: pointer;
  padding: 8px 18px;
  letter-spacing: 0.18em;
  opacity: 0.78;
  transition: opacity var(--t-base) var(--ease-couture), color var(--t-base) var(--ease-couture);
}
.gallery__back em { font-style: italic; }
.gallery__back:hover { color: var(--fg-on-ink); opacity: 1; }

/* ============================================================
   FLOATING RETURN-TO-FLOORPLAN MARK · used on wing + closing
   ============================================================ */
.return-mark {
  background: none; border: 1px solid var(--hairline);
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--fg2); cursor: pointer;
  padding: 12px 22px; border-radius: var(--radius-2);
  transition: background var(--t-base) var(--ease-couture);
}
.return-mark:hover { background: rgba(11,14,26,.06); }
.return-mark--ink { border-color: rgba(234,196,191,.3); color: var(--fg-on-ink-2); }
.return-mark--ink:hover { background: rgba(255,255,255,.04); color: var(--fg-on-ink); }

/* ============================================================
   MOBILE · the temple thoughtfully adapted
   ============================================================ */
@media (max-width: 900px) {
  /* Threshold scales */
  .threshold__inner { padding: 15vh 28px 11vh; gap: 24px; }
  .threshold__mark { height: 13px; }
  .threshold__sigil { width: 46px; height: 60px; }
  .threshold__masthead { gap: 16px; }
  .threshold__core { gap: 28px; }
  .threshold__cue-line { height: 72px; }
  .threshold__cue { gap: 14px; }
  /* The portal's columns sit slightly inset on small screens so
     the inscription doesn't crowd the drawn jambs. */
  .threshold__portal { color: rgba(229, 169, 160, 0.20); }

  /* Floor plan · the descent collapses cleanly · trunk stays vertical,
     branches stack one above the other rather than side by side. */
  .floorplan { padding: 88px 24px 56px; gap: 40px; }
  .descent { max-width: 100%; }
  .descent__branches { grid-template-columns: 1fr; gap: 24px; }
  .fork { display: none; }
  .descent__branches::before {
    content: ''; display: block; grid-column: 1; height: 28px;
    width: 1px; justify-self: center;
    background: linear-gradient(180deg, transparent 0%, rgba(229,169,160,0.45) 20%, rgba(229,169,160,0.45) 80%, transparent 100%);
    margin: 0 auto;
  }
  .branch__head { margin-bottom: 14px; }
  .station { padding: 6px 10px 12px; }
  .station__name { font-size: 17px; letter-spacing: 0.28em; }
  .station__entra { display: none; }

  /* Wing threshold scales */
  .wing__threshold { padding: 64px 24px; }
  .wing__threshold-inner { gap: 28px; }

  /* Chambers stack · illustration on top, inscription beneath */
  .chamber, .chamber--reverse { grid-template-columns: 1fr; direction: ltr; min-height: auto; }
  .chamber__video-wrap { aspect-ratio: 2160 / 3108; min-height: 60vh; }
  .chamber__body { padding: 56px 28px 72px; gap: 24px; }
  .chamber__plaque-numeral { font-size: clamp(28px, 6.4vw, 40px); }
  .chamber__plaque-name { font-size: clamp(22px, 6.4vw, 30px); letter-spacing: 0.18em; }
  .chamber__plaque-caption { font-size: 13.5px; }
  .chamber__inscription-it { font-size: clamp(22px, 5.4vw, 30px); }
  .chamber__inscription-en { font-size: clamp(14px, 3.4vw, 18px); }

  /* L'Origine diptych collapses to single column on mobile · stacked
     pair: video · video · single shared body underneath. */
  .chamber--paired {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0;
    row-gap: 0;
  }
  .chamber--paired .chamber__video-wrap { aspect-ratio: 2160/3108; min-height: 70vh; }
  .chamber__body--paired { padding: 48px 24px 64px; gap: 20px; }
  .chamber__body--paired .chamber__pair-row {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 100%;
  }
  .chamber__pair-label { font-size: 9.5px; letter-spacing: 0.36em; }

  /* Interstice photographs · scale down on narrow viewports; ample
     vertical breathing room either side of the plate. */
  .interstice { min-height: 60vh; padding: 48px 24px 56px; }
  .interstice__plate { width: min(82vw, 360px); max-height: 56vh; }
  .interstice__caption { font-size: 17px; margin-top: 28px; max-width: 28ch; }
  .interstice__emblem { width: 18px; height: 24px; margin-top: 24px; }

  /* Full-bleed chamber falls back to a stacked layout on narrow
     viewports — the corner inscription is replaced by a full-width
     panel beneath the illustration so the text stays legible. */
  .chamber--full-bleed { display: grid; grid-template-columns: 1fr; min-height: auto; }
  .chamber--full-bleed .chamber__video-wrap {
    position: relative; inset: auto;
    width: 100%; height: auto;
    aspect-ratio: 2160 / 3108; min-height: 60vh;
  }
  .chamber--full-bleed .chamber__body {
    position: relative; right: auto; bottom: auto;
    width: 100%;
    padding: 56px 28px 72px;
    background: var(--aurielle-deep-ink);
    border: none; backdrop-filter: none;
  }

  /* Floor plan · the gallery doorway scales modestly on narrow. The
     prior card-style rules are dead now that the doorway is a clipped
     portrait crop, but kept here as a defensive scale-down. */
  .doorway__thumb { width: 96px; height: 144px; }
  .doorway__title { font-size: 10px; letter-spacing: 0.34em; }
  .doorway__caption { font-size: 12.5px; }

  /* Closing · choices stack vertical on narrow */
  .closing { padding: 48px 24px; }
  .closing__inner { gap: 40px; }
  .closing__choices { flex-direction: column; gap: 16px; align-items: center; }
  .closing__choices-mid { display: none; }
  .closing__return { font-size: 16px; text-underline-offset: 6px; }
  .closing__bottega { font-size: 12px; }

  /* Gallery · spreads collapse cleanly on narrow viewports */
  .gallery__hall { gap: 72px; }
  .spread { padding: 0 24px; }
  .spread--hero { padding: 0 8%; }
  .spread--pair { grid-template-columns: 1fr; padding: 0 8%; gap: 16px; }
  .spread--asym { grid-template-columns: 1fr; padding: 0 8%; gap: 16px; }
  .spread--asym .spread__asym-col { padding-bottom: 0; }
  .spread__asym-note { padding-top: 0; max-width: 100%; text-align: center; font-size: clamp(18px, 4.4vw, 22px); }
  .spread--part { padding: 16px 24px 8px; }
  .spread__part-roman { font-size: clamp(34px, 9vw, 48px); }
  .spread__part-it { font-size: clamp(18px, 4.4vw, 22px); }
  .atmosphere { height: 80vh; min-height: 480px; }
  .atmosphere__overlay--opening { bottom: 10%; padding: 0 24px; }
  .atmosphere__overlay--passage { padding: 0 16px; gap: 18px; max-width: 92%; }
  .atmosphere__passage-mark { font-size: clamp(30px, 8vw, 44px); }
  .atmosphere__passage-it { font-size: 14px; bottom: -32px; }
  .sculpture { padding: 0 16%; }
  .gallery__foot { padding: 72px 24px 80px; gap: 28px; }
}

@media (max-width: 560px) {
  .spread--hero { padding: 0; }
  .wing__name { font-size: clamp(40px, 12vw, 56px); letter-spacing: 0.18em; }
  .wing__threshold { padding: 56px 18px; }
  .closing__it { font-size: clamp(28px, 8vw, 44px); }
  .closing__en { font-size: clamp(14px, 4vw, 20px); }
  .doorway__thumb { width: 84px; height: 126px; }
}

/* ============================================================
   prefers-reduced-motion · null decorative animations + fast
   transitions for users who request it.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Kill all looped decorative animations · static states remain visible */
  .threshold::before,
  .threshold__cue-line,
  .threshold__address,
  .sigil--open,
  .interstice__plate,
  .interstice__caption,
  .interstice__emblem,
  .chamber__video-wrap[data-vignette="breathing"]::after,
  .chamber__video-wrap[data-tint="red-warm"]::before,
  .chamber__video-wrap[data-tint="red-warm"]::after,
  .chamber__video-wrap[data-tint="red-deep"]::before,
  .chamber__video-wrap[data-tint="red-deep"]::after,
  .chamber__video-wrap[data-tint="red-blood"]::before,
  .chamber__video-wrap[data-tint="red-blood"]::after {
    animation: none !important;
  }
  /* Atmospheric particle layers · suppress all chamber motes/embers/
     mist/ripple animations under reduced motion. */
  .chamber__atmo span,
  .chamber__atmo--motes span,
  .chamber__atmo--embers span,
  .chamber__atmo--mist span,
  .chamber__atmo--ripple span {
    animation: none !important;
    opacity: 0 !important;
  }

  /* Long crossfades become near-instant */
  .surface,
  .chamber__body,
  .interstice__plate,
  .interstice__caption,
  .interstice__emblem,
  .closing__inscription,
  .closing__choices,
  .closing__bottega,
  .closing__return {
    transition-duration: 0.001ms !important;
  }
  .closing.is-revealed .closing__inscription,
  .closing.is-revealed .closing__choices,
  .closing.is-revealed .closing__bottega {
    transition-delay: 0s !important;
  }
}

/* ============================================================
   EXSILIUM · ONE WARM-DARK GROUND
   
   The wing is one warm-dark color throughout — chosen to read
   as the descent's atmosphere rather than as commercial-luxury
   cream. The pink illustrations of the early chambers and the
   red illustrations of the late chambers both pop against this
   ground; the wing reads as one continuous register, with the
   chamber's narrative carried entirely by the painted images.
   
   Text inverts to ivory across the wing. The existing per-tint
   inversion rules (originally set only for red chambers) are
   now applied universally.
   ============================================================ */

.wing,
.wing__threshold,
.chamber--paired,
.chamber__body,
.chamber__body[data-tint="pink-soft"],
.chamber__body[data-tint="pink"],
.chamber__body[data-tint="pink-bruise"],
.chamber__body[data-tint="red-warm"],
.chamber__body[data-tint="red-deep"],
.chamber__body[data-tint="red-blood"],
.interstice,
.interstice[data-tint="pink-soft"],
.interstice[data-tint="pink"],
.interstice[data-tint="pink-bruise"],
.interstice[data-tint="red-warm"],
.interstice[data-tint="red-deep"],
.interstice[data-tint="red-blood"],
.chamber__video-wrap,
.chamber__video-wrap[data-tint="pink-soft"],
.chamber__video-wrap[data-tint="pink"],
.chamber__video-wrap[data-tint="pink-bruise"],
.chamber__video-wrap[data-tint="red-warm"],
.chamber__video-wrap[data-tint="red-deep"],
.chamber__video-wrap[data-tint="red-blood"] {
  background: #1A0E12;
}

/* Wing threshold text · ivory on dark */
.wing__threshold-numeral { color: var(--fg-on-ink-2); }
.wing__name              { color: var(--fg-on-ink); }
.wing__inscription-it    { color: var(--fg-on-ink); }
.wing__inscription-en    { color: var(--fg-on-ink-2); }
.wing__threshold-divider-rule { background: var(--hairline-ink); }

/* Chamber plaque · ivory on dark, applied to ALL tints */
.chamber__body .chamber__plaque-numeral { color: var(--fg-on-ink); }
.chamber__body .chamber__plaque-name    { color: var(--fg-on-ink); }
.chamber__body .chamber__plaque-caption { color: var(--fg-on-ink-2); }
.chamber__body .chamber__plaque-rule    { background: rgba(244, 239, 230, 0.35); }

/* Chamber inscription · ivory on dark */
.chamber__body .chamber__inscription-it { color: var(--fg-on-ink); }
.chamber__body .chamber__inscription-en { color: var(--fg-on-ink-2); }

/* Paired chamber labels (prima · seconda) */
.chamber__pair-label { color: var(--fg-on-ink-2); }

/* EN-primary inversion · swap which language reads bright */
.temple[data-lang="en"] .chamber__body .chamber__inscription-it { color: var(--fg-on-ink-2); }
.temple[data-lang="en"] .chamber__body .chamber__inscription-en { color: var(--fg-on-ink); }
.temple[data-lang="en"] .wing__inscription-it { color: var(--fg-on-ink-2); }
.temple[data-lang="en"] .wing__inscription-en { color: var(--fg-on-ink); }

/* Interstice caption · ivory on dark */
.interstice .interstice__caption { color: var(--fg-on-ink); }

/* Chamber frame border · lighten across all tints for the
   dark ground; the original pink-bruise reddish border becomes
   invisible against warm-dark. */
.chamber__video-wrap[data-tint="pink-soft"]   .chamber__frame,
.chamber__video-wrap[data-tint="pink"]        .chamber__frame,
.chamber__video-wrap[data-tint="pink-bruise"] .chamber__frame {
  border-color: rgba(244, 239, 230, 0.22);
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.30),
    inset 0 0 0 1px rgba(0, 0, 0, 0.10);
}

/* Vellum noise overlay was designed for ivory ground · suppress
   it on the dark ground where multiply-blend would just darken. */
.chamber__body[data-tint="pink-soft"]::after,
.chamber__body[data-tint="pink"]::after,
.chamber__body[data-tint="pink-bruise"]::after,
.interstice[data-tint="pink-soft"]::after,
.interstice[data-tint="pink"]::after,
.wing__threshold::after {
  display: none;
}

/* ============================================================
   WORDMARK · HIDDEN EVERYWHERE
   The temple doesn't need a brand mark stamped on it. The
   inscription carries the voice; the URL bar carries the name.
   ============================================================ */
.threshold__mark,
.temple__mark { display: none !important; }