:root {
  --black: #030404;
  --paper: #e9e2d3;
  --paper-soft: rgba(233,226,211,.72);
  --ember: #d5552e;
  --ember-soft: #a94b31;
  --cold: #9fc3d9;
  --cold-soft: #6e98b1;
  --hairline: rgba(230,224,210,.25);
  --scene-progress: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

.grain {
  position: fixed;
  inset: -60%;
  z-index: 50;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 0 0, transparent 0 1px, rgba(255,255,255,.75) 1px 2px),
    repeating-linear-gradient(87deg, rgba(255,255,255,.18) 0 1px, transparent 1px 4px);
  background-size: 5px 5px, 7px 7px;
  animation: grainShift .28s steps(2) infinite;
}
@keyframes grainShift {
  0% { transform: translate3d(-2%, 1%, 0); }
  25% { transform: translate3d(2%, -1%, 0); }
  50% { transform: translate3d(1%, 2%, 0); }
  75% { transform: translate3d(-1%, -2%, 0); }
  100% { transform: translate3d(-2%, 1%, 0); }
}

.cinema-bars::before,
.cinema-bars::after {
  content: "";
  position: fixed;
  left: 0;
  width: 100%;
  height: 1px;
  z-index: 45;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13) 12%, rgba(255,255,255,.13) 88%, transparent);
}
.cinema-bars::before { top: 0; }
.cinema-bars::after { bottom: 0; }

.site-mark {
  position: fixed;
  inset: 0 0 auto;
  height: 92px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 46px;
  z-index: 40;
  pointer-events: none;
  mix-blend-mode: normal;
}
.monogram {
  width: 34px;
  pointer-events: auto;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 29px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.08em;
  color: rgba(237,226,206,.9);
  text-shadow: 0 0 18px rgba(224,180,104,.15);
}
.section-name {
  font-size: 9px;
  letter-spacing: .38em;
  color: rgba(233,226,211,.5);
}
.section-name span { color: rgba(233,226,211,.25); }
.scene-count {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11px;
  color: rgba(233,226,211,.52);
}
.scene-count i { width: 34px; height: 1px; background: rgba(233,226,211,.18); }

.scene-nav {
  position: fixed;
  right: 42px;
  top: 50%;
  z-index: 40;
  transform: translateY(-50%);
  display: grid;
  gap: 17px;
}
.scene-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(233,226,211,.42);
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}
.scene-dot span {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(5px);
  width: max-content;
  opacity: 0;
  pointer-events: none;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(233,226,211,.52);
  transition: opacity .25s ease, transform .25s ease;
}
.scene-dot:hover span, .scene-dot:focus-visible span { opacity: 1; transform: translateY(-50%) translateX(0); }
.scene-dot.is-active { transform: scale(.72); background: var(--paper); border-color: var(--paper); }
.sequence--miro.is-active ~ * .scene-dot.is-active { background: var(--cold); }

.sequence {
  position: relative;
  height: 185vh;
  min-height: 1100px;
}
.scene {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 640px;
  overflow: clip;
  background: #020303;
  isolation: isolate;
}
.media {
  position: absolute;
  inset: -2%;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform, opacity, filter;
}
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.media--elian {
  background-position: 28% 50%;
  transform: scale(var(--media-scale, 1.025)) translate3d(var(--media-x, 0%), var(--media-y, 0%), 0);
  filter: contrast(1.04) saturate(.94) brightness(var(--media-bright, 1));
}
.media--elian::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.72) 74%, rgba(0,0,0,.92) 100%),
    linear-gradient(180deg, rgba(0,0,0,.3), transparent 18%, transparent 74%, rgba(0,0,0,.58));
}
.elian-heat {
  position: absolute;
  z-index: 1;
  width: 58vw;
  height: 48vh;
  left: 7vw;
  bottom: -24vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(217,79,35,.37), rgba(145,40,16,.12) 42%, transparent 72%);
  filter: blur(26px);
  opacity: var(--heat-opacity, .92);
  transform: scale(var(--heat-scale, 1));
  mix-blend-mode: screen;
}
.shadow-curtain {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: #010202;
  opacity: var(--curtain-opacity, 0);
}
.smoke {
  position: absolute;
  z-index: 2;
  width: 42vw;
  height: 58vh;
  left: 7vw;
  top: 15vh;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 40% 50%, rgba(221,218,210,.09), transparent 58%),
    radial-gradient(ellipse at 70% 42%, rgba(221,218,210,.05), transparent 62%);
  filter: blur(34px);
  mix-blend-mode: screen;
  opacity: var(--smoke-opacity, .52);
  animation: smokeDrift 12s ease-in-out infinite alternate;
}
.smoke--two { left: 22vw; top: 4vh; transform: scale(.74); opacity: .24; animation-duration: 16s; animation-direction: alternate-reverse; }
@keyframes smokeDrift { to { transform: translate3d(6vw,-3vh,0) scale(1.09); } }

.embers { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.ember {
  position: absolute;
  bottom: -3vh;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #ff7b42;
  box-shadow: 0 0 8px #e94f23, 0 0 18px rgba(233,79,35,.45);
  opacity: .8;
  animation: emberRise var(--d) linear var(--delay) infinite;
}
@keyframes emberRise {
  0% { transform: translate3d(0,0,0) scale(.6); opacity: 0; }
  10% { opacity: .85; }
  70% { opacity: .55; }
  100% { transform: translate3d(var(--drift), -72vh, 0) scale(.15); opacity: 0; }
}

.copy {
  position: absolute;
  z-index: 10;
  will-change: transform, opacity;
}
.copy .eyebrow {
  margin-bottom: 16px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .42em;
}
.copy h1, .copy h2 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(46px, 5vw, 82px);
  line-height: .96;
  font-weight: 400;
  letter-spacing: .08em;
  text-wrap: balance;
}
.copy .signature {
  margin: 23px 0 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(15px, 1.35vw, 21px);
  line-height: 1.5;
  letter-spacing: .025em;
  color: var(--paper-soft);
}
.copy--elian {
  right: clamp(90px, 8vw, 160px);
  top: 28vh;
  width: min(560px, 38vw);
  opacity: var(--copy-opacity, 0);
  transform: translate3d(var(--copy-x, 26px), var(--copy-y, 0px), 0);
}
.copy--elian .eyebrow { color: var(--ember); }
.copy--elian blockquote {
  margin: 62px 0 0 16%;
  padding-left: 24px;
  border-left: 1px solid rgba(201,88,52,.45);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(16px, 1.35vw, 22px);
  font-style: italic;
  line-height: 1.55;
  color: rgba(233,226,211,.7);
  opacity: var(--quote-opacity, 0);
  transform: translate3d(var(--copy-x, 0px), var(--copy-y, 20px), 0);
}
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 12;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  color: rgba(233,226,211,.42);
  opacity: var(--scroll-opacity, 1);
}
.scroll-cue span { font-size: 7px; letter-spacing: .32em; }
.scroll-cue i { width: 1px; height: 36px; background: linear-gradient(var(--paper-soft), transparent); }

.interlude {
  position: relative;
  height: 72vh;
  min-height: 520px;
  background: #010202;
  overflow: hidden;
}
.interlude::before,
.interlude::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 34%;
  pointer-events: none;
}
.interlude::before { top: 0; background: linear-gradient(#010202, transparent); }
.interlude::after { bottom: 0; background: linear-gradient(transparent, #020506); }
.interlude-inner { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }
.ember-line {
  width: 1px;
  height: 31vh;
  background: linear-gradient(transparent, rgba(214,78,38,.65), rgba(153,67,44,.18), transparent);
  filter: blur(.2px);
  animation: emberLine 4.8s ease-in-out infinite;
}
@keyframes emberLine { 50% { opacity: .28; transform: scaleY(.72); } }
.frequency-awakening {
  position: absolute;
  left: 50%; top: 50%;
  width: min(560px, 58vw);
  height: 90px;
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.3vw, 20px);
  opacity: .42;
  mix-blend-mode: screen;
}
.frequency-awakening span {
  width: 1px;
  height: 5px;
  background: rgba(126,172,199,.65);
  box-shadow: 0 0 12px rgba(89,145,176,.25);
  animation: frequencyWake 2.7s ease-in-out infinite alternate;
}
.frequency-awakening span:nth-child(2n) { animation-delay: -.45s; }
.frequency-awakening span:nth-child(3n) { animation-delay: -.9s; }
@keyframes frequencyWake { to { height: 48px; opacity: .2; } }

.media--miro {
  background-position: 56% 50%;
  transform: scale(var(--media-scale, 1.07)) translate3d(var(--media-x, 1.6%), var(--media-y, 0%), 0);
  filter: contrast(1.07) saturate(.72) brightness(var(--media-bright, .78));
}
.media--miro::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.4) 32%, rgba(0,0,0,.03) 58%, rgba(0,0,0,.28) 100%),
    linear-gradient(180deg, rgba(0,0,0,.38), transparent 26%, transparent 62%, rgba(0,0,0,.76));
}
.miro-veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #020405;
  opacity: var(--veil-opacity, .72);
  pointer-events: none;
}
.projector-beam {
  position: absolute;
  z-index: 2;
  left: -18vw;
  top: -12vh;
  width: 72vw;
  height: 78vh;
  background: conic-gradient(from 79deg at 0 0, transparent 0 7deg, rgba(183,217,233,.14) 9deg, rgba(151,197,219,.035) 17deg, transparent 23deg);
  filter: blur(6px);
  opacity: var(--projector-opacity, .12);
  transform-origin: 0 0;
  animation: projectorWander 8s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
@keyframes projectorWander { to { transform: rotate(2deg) translateY(1.5vh); opacity: .48; } }
.mechanical-pulse {
  position: absolute;
  z-index: 3;
  right: 24vw;
  top: 44vh;
  width: 190px;
  aspect-ratio: 1;
  border: 1px solid rgba(127,181,211,.12);
  border-radius: 50%;
  box-shadow: 0 0 80px rgba(109,163,192,.06), inset 0 0 70px rgba(89,136,161,.04);
  opacity: var(--pulse-opacity, 0);
  animation: breathingRing 5.6s ease-in-out infinite;
}
@keyframes breathingRing { 50% { transform: scale(1.13); opacity: .22; } }
.frequency-canvas {
  position: absolute;
  z-index: 4;
  left: 5vw;
  right: 5vw;
  bottom: 7vh;
  width: 90vw;
  height: 110px;
  opacity: var(--frequency-opacity, 0);
  mix-blend-mode: screen;
  pointer-events: none;
}
.copy--miro {
  left: clamp(64px, 8vw, 150px);
  top: 31vh;
  width: min(520px, 36vw);
  opacity: var(--copy-opacity, 0);
  transform: translate3d(var(--copy-x, -30px), var(--copy-y, 0px), 0);
}
.copy--miro .eyebrow { color: var(--cold); }
.copy--miro h2 { font-size: clamp(44px, 4.6vw, 76px); color: #d7e3e8; }
.copy--miro .signature { color: rgba(203,222,232,.72); }
.listening-mark { display: flex; align-items: center; gap: 6px; margin-top: 47px; height: 30px; opacity: .48; }
.listening-mark span { width: 1px; height: 4px; background: var(--cold); animation: listen 1.8s ease-in-out infinite alternate; }
.listening-mark span:nth-child(2) { animation-delay: -.4s; }
.listening-mark span:nth-child(3) { animation-delay: -.8s; }
.listening-mark span:nth-child(4) { animation-delay: -1.2s; }
.listening-mark span:nth-child(5) { animation-delay: -.7s; }
.listening-mark span:nth-child(6) { animation-delay: -.2s; }
.listening-mark span:nth-child(7) { animation-delay: -1s; }
@keyframes listen { to { height: 26px; opacity: .25; } }

@media (max-width: 900px) {
  .site-mark { height: 70px; padding: 0 20px; grid-template-columns: 1fr auto; }
  .section-name { display: none; }
  .monogram { font-size: 25px; }
  .scene-count { font-size: 10px; }
  .scene-nav { right: 16px; gap: 13px; }
  .scene-dot { width: 7px; height: 7px; }
  .scene-dot span { display: none; }
  .sequence { height: 165svh; min-height: 900px; }
  .scene { height: 100svh; min-height: 580px; }
  .media { inset: 0; }
  .media--elian { background-position: 50% 45%; transform: scale(var(--media-scale, 1.02)) translate3d(var(--media-x, 0%), var(--media-y, 0%), 0); }
  .media--elian::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.02) 35%, rgba(0,0,0,.34) 62%, rgba(0,0,0,.93) 100%),
      linear-gradient(90deg, rgba(0,0,0,.1), transparent 60%, rgba(0,0,0,.18));
  }
  .elian-heat { width: 92vw; left: 4vw; bottom: -18vh; opacity: .78; }
  .smoke { width: 90vw; left: 5vw; top: 12vh; }
  .copy--elian {
    left: 26px;
    right: 26px;
    top: auto;
    bottom: max(74px, calc(env(safe-area-inset-bottom) + 64px));
    width: auto;
    text-align: center;
    transform: translate3d(var(--copy-x, 0px), var(--copy-y, 24px), 0);
  }
  .copy .eyebrow { font-size: 8px; margin-bottom: 13px; letter-spacing: .36em; }
  .copy h1, .copy h2 { font-size: clamp(39px, 12vw, 58px); line-height: 1; letter-spacing: .055em; }
  .copy .signature { font-size: 14px; margin-top: 16px; }
  .copy--elian blockquote {
    margin: 27px auto 0;
    padding: 0;
    border: 0;
    font-size: 14px;
    line-height: 1.55;
    width: min(300px, 86vw);
  }
  .scroll-cue { display: none; }
  .interlude { height: 58svh; min-height: 360px; }
  .frequency-awakening { width: 76vw; }
  .media--miro { background-position: 52% 45%; transform: scale(var(--media-scale, 1.055)) translate3d(var(--media-x, 0%), var(--media-y, 0%), 0); }
  .media--miro::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.02) 38%, rgba(0,0,0,.42) 64%, rgba(0,0,0,.95) 100%),
      linear-gradient(90deg, rgba(0,0,0,.15), transparent 65%);
  }
  .copy--miro {
    left: 26px;
    right: 26px;
    top: auto;
    bottom: max(82px, calc(env(safe-area-inset-bottom) + 72px));
    width: auto;
    text-align: center;
    transform: translate3d(var(--copy-x, 0px), var(--copy-y, 20px), 0);
  }
  .copy--miro h2 { font-size: clamp(38px, 11.4vw, 56px); }
  .listening-mark { justify-content: center; margin-top: 29px; }
  .projector-beam { width: 120vw; height: 65vh; left: -30vw; }
  .mechanical-pulse { right: 17vw; top: 38vh; width: 128px; }
  .frequency-canvas { left: 6vw; width: 88vw; bottom: 4vh; height: 80px; opacity: .26; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain, .smoke, .ember, .ember-line, .frequency-awakening span, .projector-beam, .mechanical-pulse, .listening-mark span { animation: none !important; }
  .media, .copy { transition: none !important; }
}


/* ============================================================
   V2 EXTENSION ONLY — Élian + Miro above remain frozen from V1
   ============================================================ */

:root {
  --green-tech: #8eb8a7;
  --archive-gold: #c59b67;
  --passage-blue: #b4cee4;
}

.interlude--signal { background: #010303; }
.interlude-inner--signal { background: radial-gradient(circle at 50% 50%, rgba(71,115,132,.12), transparent 48%); }
.signal-line {
  position: absolute;
  left: 10vw;
  right: 10vw;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(135,183,207,.16) 12%, rgba(150,198,220,.72) 50%, rgba(135,183,207,.16) 88%, transparent);
  box-shadow: 0 0 24px rgba(111,167,193,.08);
}
.signal-nodes {
  position: absolute;
  left: 18vw;
  right: 18vw;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.signal-nodes i {
  width: 1px;
  height: 22px;
  background: linear-gradient(transparent, rgba(146,192,214,.75), transparent);
  animation: signalTighten 2.6s ease-in-out infinite alternate;
}
.signal-nodes i:nth-child(2n) { height: 42px; animation-delay: -.55s; }
.signal-nodes i:nth-child(3n) { height: 14px; animation-delay: -1.1s; }
@keyframes signalTighten { to { transform: scaleY(.28); opacity: .28; } }

.media--ciro {
  background-position: 64% 50%;
  transform: scale(var(--media-scale, 1.055)) translate3d(var(--media-x, 0%), 0, 0);
  filter: contrast(1.08) saturate(.76) brightness(var(--media-bright, .76));
}
.media--ciro::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.46) 31%, rgba(0,0,0,.08) 58%, rgba(0,0,0,.48) 100%),
    linear-gradient(180deg, rgba(0,0,0,.38), transparent 22%, transparent 66%, rgba(0,0,0,.76));
}
.ciro-aura {
  position: absolute;
  z-index: 2;
  right: 5vw;
  top: 28vh;
  width: 29vw;
  height: 38vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(121,174,154,.18), rgba(67,105,91,.06) 43%, transparent 72%);
  filter: blur(24px);
  opacity: var(--ciro-aura, .18);
  mix-blend-mode: screen;
}
.ciro-lines {
  position: absolute;
  z-index: 3;
  left: 7vw;
  top: 19vh;
  width: 35vw;
  display: grid;
  gap: 14px;
  opacity: var(--ciro-lines, 0);
}
.ciro-lines span { height: 1px; background: linear-gradient(90deg, rgba(137,187,168,.34), rgba(137,187,168,.08) 56%, transparent); }
.ciro-lines span:nth-child(2) { width: 78%; }
.ciro-lines span:nth-child(3) { width: 54%; }
.ciro-lines span:nth-child(4) { width: 88%; }
.ciro-dust {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 68% 62%, rgba(211,226,216,.045), transparent 18%),
    radial-gradient(circle at 74% 48%, rgba(127,184,161,.05), transparent 16%);
  opacity: var(--ciro-dust, .14);
}
.copy--ciro {
  left: clamp(64px, 7vw, 128px);
  top: 28vh;
  width: min(470px, 32vw);
  opacity: var(--copy-opacity, 0);
  transform: translate3d(var(--copy-x, 24px), var(--copy-y, 0px), 0);
}
.copy--ciro .eyebrow { color: rgba(154,203,184,.82); }
.copy--ciro h2 { color: rgba(232,235,230,.96); }
.copy--ciro .signature { color: rgba(214,225,217,.72); }
.copy--ciro blockquote {
  margin: 44px 0 0 12%;
  padding-left: 20px;
  border-left: 1px solid rgba(112,169,147,.32);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(16px, 1.25vw, 20px);
  font-style: italic;
  line-height: 1.5;
  color: rgba(176,214,197,.78);
  opacity: var(--quote-opacity, 0);
}

.interlude--paper { background: #050403; }
.interlude-inner--paper { background: radial-gradient(circle at 50% 50%, rgba(107,77,52,.16), transparent 50%); }
.paper-lines {
  position: absolute;
  left: 18vw;
  right: 18vw;
  top: 45%;
  display: grid;
  gap: 10px;
}
.paper-lines i { height: 1px; justify-self: center; background: linear-gradient(90deg, transparent, rgba(190,156,116,.42), transparent); }
.paper-lines i:nth-child(1) { width: 42%; }
.paper-lines i:nth-child(2) { width: 58%; }
.paper-lines i:nth-child(3) { width: 35%; }
.paper-lines i:nth-child(4) { width: 63%; }
.paper-lines i:nth-child(5) { width: 48%; }
.paper-cards { position: absolute; inset: 0; pointer-events: none; }
.paper-cards span {
  position: absolute;
  width: 68px;
  height: 42px;
  border: 1px solid rgba(190,158,118,.2);
  background: rgba(178,147,109,.04);
  animation: paperDrift 7s ease-in-out infinite alternate;
}
.paper-cards span:nth-child(1) { left: 32%; top: 43%; transform: rotate(-4deg); }
.paper-cards span:nth-child(2) { left: 42%; top: 52%; transform: rotate(3deg); animation-delay: -.7s; }
.paper-cards span:nth-child(3) { left: 57%; top: 40%; transform: rotate(-6deg); animation-delay: -1.2s; }
.paper-cards span:nth-child(4) { left: 65%; top: 53%; transform: rotate(5deg); animation-delay: -.4s; }
@keyframes paperDrift { to { transform: translateY(-16px) rotate(1deg); opacity: .32; } }

.media--archiviste {
  background-position: 66% 50%;
  transform: scale(var(--media-scale, 1.06)) translate3d(var(--media-x, 0%), 0, 0);
  filter: contrast(1.05) saturate(.78) brightness(var(--media-bright, .72));
}
.media--archiviste::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.5) 31%, rgba(0,0,0,.07) 62%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, rgba(0,0,0,.42), transparent 22%, transparent 65%, rgba(0,0,0,.82));
}
.archive-veil { position: absolute; inset: 0; z-index: 4; background: #080604; opacity: var(--archive-veil, .58); }
.archive-beam {
  position: absolute;
  z-index: 2;
  right: 4vw;
  top: 6vh;
  width: 52vw;
  height: 62vh;
  background: conic-gradient(from 221deg at 100% 0, transparent 0 8deg, rgba(236,202,146,.13) 10deg, rgba(236,202,146,.03) 18deg, transparent 24deg);
  filter: blur(5px);
  opacity: var(--archive-beam, .2);
  mix-blend-mode: screen;
}
.archive-dust {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(ellipse at 72% 47%, rgba(246,224,185,.06), transparent 25%);
  opacity: var(--archive-dust, .2);
}
.copy--archiviste {
  left: clamp(66px, 8vw, 146px);
  top: 35vh;
  width: min(520px, 36vw);
  opacity: var(--copy-opacity, 0);
  transform: translate3d(var(--copy-x, -18px), var(--copy-y, 0px), 0);
}
.copy--archiviste h2 { color: rgba(236,226,209,.97); }
.copy--archiviste .signature { color: rgba(222,198,161,.72); max-width: 390px; }

.interlude--corridor { background: #030404; }
.interlude-inner--corridor { background: radial-gradient(circle at 50% 52%, rgba(104,139,169,.1), transparent 44%); }
.corridor-walls { position: absolute; inset: 13vh 14vw; overflow: hidden; }
.corridor-walls i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34%;
  background: repeating-linear-gradient(180deg, rgba(118,91,67,.16) 0 11px, transparent 11px 19px);
  opacity: .34;
}
.corridor-walls i:first-child { left: 0; transform: perspective(500px) rotateY(55deg); transform-origin: left center; }
.corridor-walls i:last-child { right: 0; transform: perspective(500px) rotateY(-55deg); transform-origin: right center; }
.corridor-light {
  position: absolute;
  width: 18vw;
  height: 45vh;
  background: radial-gradient(ellipse, rgba(177,207,232,.38), rgba(133,168,194,.08) 45%, transparent 74%);
  filter: blur(18px);
}

.media--passeur {
  background-position: 58% 50%;
  transform: scale(var(--media-scale, 1.045)) translate3d(var(--media-x, 0%), 0, 0);
  filter: contrast(1.08) saturate(.8) brightness(var(--media-bright, .7));
}
.media--passeur::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.56) 32%, rgba(0,0,0,.12) 64%, rgba(0,0,0,.58) 100%),
    linear-gradient(180deg, rgba(0,0,0,.38), transparent 22%, transparent 67%, rgba(0,0,0,.84));
}
.passeur-fog {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at 75% 64%, rgba(171,200,226,.12), transparent 20%),
    linear-gradient(180deg, transparent 62%, rgba(104,133,158,.12));
  opacity: var(--passeur-fog, .25);
}
.passeur-trace {
  position: absolute;
  z-index: 3;
  right: 15vw;
  top: 24vh;
  width: 18vw;
  height: 48vh;
  border: 1px solid rgba(174,207,233,.07);
  border-radius: 50%;
  filter: blur(3px);
  opacity: var(--passeur-trace, .12);
  mix-blend-mode: screen;
}
.copy--passeur {
  left: clamp(66px, 8vw, 146px);
  bottom: 14vh;
  width: min(520px, 35vw);
  opacity: var(--copy-opacity, 0);
  transform: translate3d(var(--copy-x, 18px), var(--copy-y, 0px), 0);
}
.copy--passeur h2 { color: rgba(228,237,244,.97); }
.copy--passeur .signature { color: rgba(188,208,224,.74); max-width: 410px; }

@media (max-width: 900px) {
  .media--ciro { background-position: 58% 43%; transform: scale(var(--media-scale, 1.045)) translate3d(0,0,0); }
  .ciro-aura { right: 4vw; top: 31vh; width: 50vw; height: 28vh; }
  .ciro-lines { left: 12vw; top: 12vh; width: 62vw; }
  .copy--ciro {
    left: 26px; right: 26px; top: auto; bottom: max(80px, calc(env(safe-area-inset-bottom) + 70px)); width: auto; text-align: center;
    transform: translate3d(0, var(--copy-y, 20px), 0);
  }
  .copy--ciro blockquote { margin: 26px auto 0; padding: 0; border: 0; font-size: 14px; }

  .media--archiviste { background-position: 52% 45%; transform: scale(var(--media-scale, 1.05)) translate3d(0,0,0); }
  .archive-beam { right: -20vw; width: 100vw; height: 58vh; }
  .copy--archiviste {
    left: 26px; right: 26px; top: auto; bottom: max(80px, calc(env(safe-area-inset-bottom) + 70px)); width: auto; text-align: center;
    transform: translate3d(0, var(--copy-y, 18px), 0);
  }
  .copy--archiviste .signature { max-width: 280px; margin-left: auto; margin-right: auto; }

  .corridor-walls { inset: 10vh 4vw; }
  .corridor-light { width: 44vw; }
  .media--passeur { background-position: 54% 50%; transform: scale(var(--media-scale, 1.035)) translate3d(0,0,0); }
  .passeur-trace { right: 8vw; top: 24vh; width: 38vw; height: 42vh; }
  .copy--passeur {
    left: 26px; right: 26px; bottom: max(80px, calc(env(safe-area-inset-bottom) + 70px)); width: auto; text-align: center;
    transform: translate3d(0, var(--copy-y, 18px), 0);
  }
  .copy--passeur .signature { max-width: 300px; margin-left: auto; margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .signal-nodes i, .paper-cards span { animation: none !important; }
}

/* ============================================================
   V3 EDITORIAL LAYER ONLY — visuals, transitions and scroll remain V2
   ============================================================ */
.portrait-layer {
  margin-top: 30px;
  max-width: 520px;
  opacity: var(--portrait-opacity, 0);
  transform: translate3d(0, var(--portrait-y, 12px), 0);
  will-change: opacity, transform;
}
.narrator-fragment {
  margin: 0 0 15px;
  max-width: 500px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 1.08vw, 18px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: .012em;
  color: rgba(244,239,229,.84);
  text-wrap: pretty;
}
.copy--miro .narrator-fragment { color: rgba(220,235,243,.84); }
.copy--ciro .narrator-fragment { color: rgba(222,235,226,.84); }
.copy--passeur .narrator-fragment { color: rgba(211,226,238,.84); }

.portrait-fragment {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(12.5px, .88vw, 14px);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: .018em;
  color: rgba(233,226,211,.64);
  text-wrap: pretty;
}
.dossier-link {
  display: inline-flex;
  margin-top: 16px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(233,226,211,.18);
  font-size: 8px;
  line-height: 1;
  letter-spacing: .28em;
  color: rgba(233,226,211,.48);
  opacity: var(--dossier-opacity, 0);
  transition: color .25s ease, border-color .25s ease, opacity .25s ease;
}
.dossier-link:hover,
.dossier-link:focus-visible {
  color: rgba(244,239,229,.86);
  border-color: rgba(244,239,229,.42);
}
.copy--elian .portrait-layer { margin-left: 16%; }
.copy--elian .portrait-fragment { color: rgba(233,226,211,.62); }
.copy--miro .portrait-fragment { color: rgba(203,222,232,.62); }
.copy--miro .dossier-link { color: rgba(179,211,228,.5); border-color: rgba(159,195,217,.2); }
.copy--ciro .portrait-fragment { color: rgba(207,222,213,.63); }
.copy--ciro .dossier-link { color: rgba(161,201,183,.52); border-color: rgba(142,184,166,.2); }
.copy--archiviste .portrait-fragment { color: rgba(222,201,171,.65); }
.copy--archiviste .dossier-link { color: rgba(208,173,127,.54); border-color: rgba(195,155,103,.22); }
.copy--passeur .portrait-fragment { color: rgba(193,211,225,.64); }
.copy--passeur .dossier-link { color: rgba(183,210,232,.54); border-color: rgba(180,206,228,.22); }

@media (max-width: 900px) {
  .portrait-layer {
    margin: 19px auto 0;
    max-width: min(340px, 86vw);
    text-align: center;
  }
  .copy--elian .portrait-layer { margin-left: auto; }
  .narrator-fragment {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.42;
  }
  .portrait-fragment {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .01em;
  }
  .dossier-link {
    margin-top: 13px;
    font-size: 7px;
    letter-spacing: .24em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portrait-layer, .dossier-link { transition: none !important; }
}

/* v1.0 — signature Henigma Grid + minimal legal footer */
.monogram{width:36px;height:28px;display:block;font-size:0;line-height:0}
.figure-brand-icon{display:block;width:36px;height:28px;background:url('../assets/brand/hg-signature-white.png') center/contain no-repeat;opacity:.9;filter:drop-shadow(0 0 12px rgba(213,85,46,.1))}
.fig-footer{position:relative;z-index:35;display:flex;align-items:center;justify-content:center;gap:10px;padding:24px 20px 28px;background:#020303;border-top:1px solid rgba(233,226,211,.08);font-size:8px;letter-spacing:.19em;text-transform:uppercase;color:rgba(233,226,211,.38)}
.fig-footer a:hover,.fig-footer a:focus-visible{color:rgba(233,226,211,.82)}
@media(max-width:700px){.figure-brand-icon,.monogram{width:30px;height:23px}.fig-footer{font-size:7px;gap:8px}}

/* v2.0 — Solo Invito identity in Figures */
.monogram{width:auto!important;display:flex;align-items:center;gap:10px;font-family:Arial,Helvetica,sans-serif!important;font-size:0!important;letter-spacing:.18em!important}
.figure-brand-icon{display:block;width:31px;height:31px;background:url('../assets/brand/solo-invito-emblem.png') center/cover no-repeat;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 5px 18px rgba(0,0,0,.24)}
.figure-brand-text{font-size:9px;color:rgba(237,226,206,.82);white-space:nowrap;letter-spacing:.22em}
@media(max-width:700px){.figure-brand-text{display:none}.figure-brand-icon{width:28px;height:28px}}


/* ============================================================
   V4 — NIKA SOREN / LA PROJECTIONNISTE
   ============================================================ */
.interlude--projection { background:#020504; }
.interlude-inner--projection {
  background:
    radial-gradient(ellipse at 58% 50%, rgba(207,177,126,.14), transparent 38%),
    linear-gradient(90deg, rgba(71,112,101,.04), transparent 48%, rgba(203,167,111,.04));
}
.projection-aperture {
  position:absolute; left:50%; top:50%; width:min(52vw,760px); height:1px;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,rgba(222,196,151,.18) 12%,rgba(247,224,181,.76) 50%,rgba(222,196,151,.18) 88%,transparent);
  box-shadow:0 0 32px rgba(221,185,125,.11);
}
.projection-frames { position:absolute; inset:0; pointer-events:none; }
.projection-frames i {
  position:absolute; border:1px solid rgba(209,182,139,.12); opacity:.52;
  transform:perspective(700px) rotateY(-18deg) rotateX(4deg);
}
.projection-frames i:nth-child(1){width:18vw;height:12vw;left:25vw;top:34%;}
.projection-frames i:nth-child(2){width:15vw;height:10vw;left:43vw;top:41%;transform:perspective(700px) rotateY(14deg) rotateX(-3deg);}
.projection-frames i:nth-child(3){width:12vw;height:8vw;left:58vw;top:30%;opacity:.26;}
.projection-frames i:nth-child(4){width:10vw;height:7vw;left:36vw;top:53%;opacity:.22;}

.media--nika {
  background-position: 62% 50%;
  transform: scale(var(--media-scale,1.02)) translate3d(var(--media-x,0%),0,0);
  filter: contrast(1.04) saturate(.82) brightness(var(--media-bright,.78));
}
.media--nika::after {
  background:
    linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.64) 30%,rgba(0,0,0,.10) 58%,rgba(0,0,0,.42) 100%),
    linear-gradient(180deg,rgba(0,0,0,.30),transparent 22%,transparent 66%,rgba(0,0,0,.76));
}
.nika-veil { position:absolute;inset:0;z-index:4;background:#050706;opacity:var(--nika-veil,.46);pointer-events:none; }
.nika-projection {
  position:absolute;z-index:2;right:2vw;top:7vh;width:53vw;height:66vh;
  background:conic-gradient(from 213deg at 100% 12%,transparent 0 9deg,rgba(234,207,164,.12) 11deg,rgba(226,193,142,.035) 20deg,transparent 28deg);
  filter:blur(5px);opacity:var(--nika-projection,.16);mix-blend-mode:screen;pointer-events:none;
}
.nika-grid {
  position:absolute;z-index:3;right:3vw;top:17vh;width:42vw;height:52vh;opacity:var(--nika-grid,0);pointer-events:none;
  background:
    linear-gradient(rgba(201,174,132,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,174,132,.075) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(90deg,transparent,black 22%,black 78%,transparent),linear-gradient(180deg,transparent,black 18%,black 76%,transparent);
}
.copy--nika {
  left:clamp(64px,7vw,126px); top:27vh; width:min(500px,34vw);
  opacity:var(--copy-opacity,0); transform:translate3d(var(--copy-x,-20px),var(--copy-y,0),0);
}
.copy--nika .eyebrow { color:rgba(214,184,139,.84); }
.copy--nika h2 { color:rgba(239,232,218,.97); }
.copy--nika .signature { color:rgba(224,208,181,.76);max-width:480px; }
.copy--nika .narrator-fragment { color:rgba(239,224,198,.86); }
.copy--nika .portrait-fragment { color:rgba(224,214,195,.64); }
.copy--nika .dossier-link { color:rgba(213,184,142,.54);border-color:rgba(201,169,123,.22); }

@media (max-width:900px){
  .media--nika{background-position:50% 18%;transform:scale(var(--media-scale,1.015)) translate3d(0,0,0);}
  .media--nika::after{background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.20) 39%,rgba(0,0,0,.82) 68%,rgba(0,0,0,.96) 100%);}
  .nika-projection{right:-18vw;top:4vh;width:96vw;height:46vh;opacity:calc(var(--nika-projection,.2) * .75);}
  .nika-grid{right:4vw;top:11vh;width:92vw;height:38vh;background-size:42px 42px;opacity:calc(var(--nika-grid,0) * .6);}
  .copy--nika{left:26px;right:26px;top:auto;bottom:max(78px,calc(env(safe-area-inset-bottom) + 68px));width:auto;text-align:center;transform:translate3d(0,var(--copy-y,18px),0);}
  .copy--nika .signature{max-width:330px;margin-left:auto;margin-right:auto;}
}


/* Rovan Kor — L’Arrangeur. Same gallery treatment, restrained dark variation. */
.media--rovan {
  background-position: 68% 48%;
  transform: scale(var(--media-scale, 1.025)) translate3d(var(--media-x, 0%), 0, 0);
  filter: contrast(1.07) saturate(.62) brightness(var(--media-bright, .72));
}
.media--rovan::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.55) 34%, rgba(0,0,0,.08) 62%, rgba(0,0,0,.46) 100%),
    linear-gradient(180deg, rgba(0,0,0,.38), transparent 23%, transparent 67%, rgba(0,0,0,.82));
}
.rovan-veil { position:absolute;inset:0;z-index:4;background:#030303;opacity:var(--rovan-veil,.48);pointer-events:none; }
.rovan-lines { position:absolute;z-index:3;left:7vw;top:20vh;width:33vw;display:grid;gap:13px;opacity:var(--rovan-lines,0);pointer-events:none; }
.rovan-lines span { height:1px;background:linear-gradient(90deg,rgba(192,170,136,.26),rgba(192,170,136,.07) 58%,transparent); }
.rovan-lines span:nth-child(2){width:72%}.rovan-lines span:nth-child(3){width:46%}.rovan-lines span:nth-child(4){width:84%}
.copy--rovan {
  left:clamp(64px,7vw,128px);top:28vh;width:min(500px,34vw);
  opacity:var(--copy-opacity,0);transform:translate3d(var(--copy-x,-18px),var(--copy-y,0px),0);
}
.copy--rovan .eyebrow { color:rgba(197,174,137,.82); }
.copy--rovan h2 { color:rgba(236,231,220,.97); }
.copy--rovan .signature { color:rgba(218,205,184,.73);max-width:470px; }
.copy--rovan .narrator-fragment { color:rgba(232,218,196,.85); }
.copy--rovan .portrait-fragment { color:rgba(218,208,190,.63); }
.copy--rovan .dossier-link { color:rgba(205,180,143,.54);border-color:rgba(196,166,124,.22); }
@media (max-width:900px){
  .media--rovan{background-position:50% 22%;transform:scale(var(--media-scale,1.02)) translate3d(0,0,0);}
  .media--rovan::after{background:linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.18) 38%,rgba(0,0,0,.82) 69%,rgba(0,0,0,.96) 100%);}
  .rovan-lines{left:8vw;top:14vh;width:84vw;opacity:calc(var(--rovan-lines,0) * .55);}
  .copy--rovan{left:26px;right:26px;top:auto;bottom:max(78px,calc(env(safe-area-inset-bottom) + 68px));width:auto;text-align:center;transform:translate3d(0,var(--copy-y,18px),0);}
  .copy--rovan .signature{max-width:340px;margin-left:auto;margin-right:auto;}
}


/* Erel — La Sorcière. Same gallery treatment, warm lantern variation. */
.media--erel {
  background-position: 67% 48%;
  transform: scale(var(--media-scale, 1.025)) translate3d(var(--media-x, 0%), 0, 0);
  filter: contrast(1.04) saturate(.78) brightness(var(--media-bright, .74));
}
.media--erel::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.58) 34%, rgba(0,0,0,.08) 62%, rgba(0,0,0,.40) 100%),
    linear-gradient(180deg, rgba(0,0,0,.30), transparent 24%, transparent 66%, rgba(0,0,0,.80));
}
.erel-veil {
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:#040302; opacity:var(--erel-veil,.50);
}
.erel-glow {
  position:absolute; z-index:3; right:31vw; top:38vh; width:22vw; height:22vw; max-width:420px; max-height:420px;
  border-radius:50%; pointer-events:none; opacity:var(--erel-glow,.18);
  background:radial-gradient(circle,rgba(224,157,72,.34) 0%,rgba(194,113,42,.11) 34%,transparent 72%);
  filter:blur(12px); mix-blend-mode:screen;
}
.copy--erel {
  left:clamp(64px,7vw,128px); top:27vh; width:min(510px,35vw);
  opacity:var(--copy-opacity,0); transform:translate3d(var(--copy-x,-18px),var(--copy-y,0),0);
}
.copy--erel .eyebrow { color:rgba(218,171,111,.86); }
.copy--erel h2 { color:rgba(242,235,221,.98); }
.copy--erel .signature { color:rgba(225,203,174,.75); max-width:485px; }
.copy--erel .narrator-fragment { color:rgba(243,220,188,.88); }
.copy--erel .portrait-fragment { color:rgba(222,209,191,.65); }
.copy--erel .dossier-link { color:rgba(218,174,117,.56); border-color:rgba(203,153,92,.24); }

@media (max-width:900px){
  .media--erel { background-position:50% 18%; transform:scale(var(--media-scale,1.02)) translate3d(0,0,0); }
  .media--erel::after { background:linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.18) 38%,rgba(0,0,0,.82) 69%,rgba(0,0,0,.96) 100%); }
  .erel-glow { right:10vw; top:24vh; width:44vw; height:44vw; opacity:calc(var(--erel-glow,.2) * .78); }
  .copy--erel { left:26px; right:26px; top:auto; bottom:max(78px,calc(env(safe-area-inset-bottom) + 68px)); width:auto; text-align:center; transform:translate3d(0,var(--copy-y,18px),0); }
  .copy--erel .signature { max-width:350px; margin-left:auto; margin-right:auto; }
}

/* Vadim Gromov — Lieutenant à la criminelle. Same gallery treatment, colder urban variation. */
.media--vadim {
  background-position: 50% 50%;
  transform: scale(var(--media-scale, 1.01)) translate3d(var(--media-x, 0%), 0, 0);
  filter: contrast(1.04) saturate(.72) brightness(var(--media-bright, .76));
}
.media--vadim::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.64) 34%, rgba(0,0,0,.10) 61%, rgba(0,0,0,.36) 100%),
    linear-gradient(180deg, rgba(0,0,0,.26), transparent 24%, transparent 66%, rgba(0,0,0,.82));
}
.vadim-veil {
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:#020608; opacity:var(--vadim-veil,.48);
}
.copy--vadim {
  left:clamp(64px,7vw,128px); top:27vh; width:min(520px,36vw);
  opacity:var(--copy-opacity,0); transform:translate3d(var(--copy-x,-18px),var(--copy-y,0),0);
}
.copy--vadim .eyebrow { color:rgba(153,187,194,.84); }
.copy--vadim h2 { color:rgba(239,238,232,.98); }
.copy--vadim .signature { color:rgba(199,216,216,.73); max-width:500px; }
.copy--vadim .narrator-fragment { color:rgba(225,231,226,.88); }
.copy--vadim .portrait-fragment { color:rgba(209,217,213,.65); }
.copy--vadim .dossier-link { color:rgba(166,195,198,.56); border-color:rgba(139,177,181,.24); }

@media (max-width:900px){
  .media--vadim { background-position:50% 18%; transform:scale(var(--media-scale,1.018)) translate3d(0,0,0); }
  .media--vadim::after { background:linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.18) 38%,rgba(0,0,0,.82) 69%,rgba(0,0,0,.96) 100%); }
  .copy--vadim { left:26px; right:26px; top:auto; bottom:max(78px,calc(env(safe-area-inset-bottom) + 68px)); width:auto; text-align:center; transform:translate3d(0,var(--copy-y,18px),0); }
  .copy--vadim .signature { max-width:350px; margin-left:auto; margin-right:auto; }
}