/* Braille figure — one per codex hero, filling the hero's open right side. */
.ascii-fig{position:absolute;right:2.6rem;top:50%;transform:translateY(-50%);
  width:min(30%,336px);pointer-events:none;user-select:none;opacity:.72}
.ascii-fig .ascii-pre{margin:0;font-family:ui-monospace,'SF Mono','JetBrains Mono',Consolas,monospace;
  font-size:11.5px;line-height:1.0;letter-spacing:0;color:#10B981;white-space:pre;
  text-shadow:0 0 9px rgba(16,185,129,.4)}
.ascii-fig .ascii-row{display:block}
.codex-voice .ascii-fig .ascii-pre{color:#e879a8;text-shadow:0 0 9px rgba(232,121,168,.35)}
.ascii-cap{position:absolute;right:3.4rem;bottom:1.4rem;font-family:ui-monospace,'SF Mono',Consolas,monospace;
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.4)}
@media(max-width:1100px){.ascii-fig,.ascii-cap{display:none}}

/* Reserve the figure zone so hero copy can never grow into it, whatever the
   copy length. Below 1100px the figure is hidden and the reserve lifts. */
@media(min-width:1101px){
  .codex-page .page-header{padding-right:calc(min(30%,336px) + 4rem)}
  .codex-voice .hero{padding-right:calc(min(30%,336px) + 4rem)}
}

/* ---- the ASCII ground: decoration only, zero layout influence ---- */
.ascii-ground{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  margin:0;pointer-events:none;user-select:none;z-index:0;
  font-family:ui-monospace,'SF Mono',Consolas,monospace;
  font-size:9.5px;line-height:1.0;letter-spacing:0;white-space:pre;z-index:-1;
  color:#10B981;opacity:.10;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 20%,transparent 78%);
  mask-image:radial-gradient(70% 70% at 50% 50%,#000 20%,transparent 78%)}
.codex-voice .ascii-ground{color:#e879a8}
/* the hero owns a stacking context so the ground can sit at -1: above the
   panel background, below every piece of content, without touching layout */
.codex-page .page-header,.codex-voice .hero{isolation:isolate}
@media(max-width:900px){.ascii-ground{display:none}}

/* ---- scroll depth rule: sits on the header's own bottom edge ---- */
#scrollrule{position:fixed;top:calc(var(--header-height) - 2px);left:0;right:0;height:2px;z-index:80;
  background:#10B981;transform:scaleX(0);transform-origin:0 50%;
  box-shadow:0 0 10px rgba(16,185,129,.5);will-change:transform}
.codex-voice #scrollrule{background:#e879a8;box-shadow:0 0 10px rgba(232,121,168,.5)}

/* ---- the ground on the MANTRA banners: over the circuit, under the veil ---- */
.mantra-banner .ascii-ground{z-index:1;opacity:.085;color:#cfd6cf;font-size:8.5px;
  -webkit-mask-image:radial-gradient(62% 66% at 50% 50%,#000 15%,transparent 74%);
  mask-image:radial-gradient(62% 66% at 50% 50%,#000 15%,transparent 74%)}
.mantra-banner .mb-veil{z-index:1}
.mantra-banner .mb-rain{z-index:1}

/* ---- the relic banner: E=mc² drawn in characters, full bleed behind ---- */
.equation{position:relative;isolation:isolate;overflow:hidden}
.ascii-emc2{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  margin:0;z-index:-1;pointer-events:none;user-select:none;
  font-family:ui-monospace,'SF Mono',Consolas,monospace;
  font-size:clamp(8px,1.02vw,15px);line-height:1.0;letter-spacing:0;white-space:pre;
  color:#10B981;opacity:.15;
  -webkit-mask-image:radial-gradient(70% 88% at 50% 50%,#000 26%,transparent 84%);
  mask-image:radial-gradient(70% 88% at 50% 50%,#000 26%,transparent 84%)}
.equation__inner{position:relative;z-index:1}
/* the title now leads, the formula sits under it as the specimen */
.equation .equation__title{
  font-size:clamp(36px,6.2vw,82px);line-height:1.04;letter-spacing:.005em;
  text-transform:uppercase;color:#f2efe8;margin:0 0 22px;text-wrap:balance;font-weight:700}
.equation .equation__formula{
  font-size:clamp(26px,3.2vw,44px);line-height:1;letter-spacing:.08em;
  color:var(--green,#10B981);margin:0 0 34px;font-weight:600;opacity:1;
  text-shadow:none;filter:none;background:none;-webkit-text-fill-color:currentColor}
.equation .equation__formula sup{text-shadow:none}
.equation .equation__formula sup{font-size:.55em;vertical-align:super}
@media(max-width:640px){.ascii-emc2{opacity:.12}}


/* ---- the flythrough, embedded as a banner: full-bleed frame, own scroll ---- */
.fly-banner{position:relative;width:100%;height:78vh;min-height:480px;
  border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);
  background:#000}
.fly-banner iframe{width:100%;height:100%;border:0;display:block}
.fly-gate{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;cursor:pointer;
  background:rgba(0,0,0,.44);border:0;transition:background .2s}
.fly-gate:hover{background:rgba(0,0,0,.28)}
.fly-gate__title{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(20px,2.6vw,34px);letter-spacing:.04em;color:#fff}
.fly-gate__hint{font-family:ui-monospace,'SF Mono',Consolas,monospace;font-size:9.5px;
  letter-spacing:.28em;color:#10B981}
@media(max-width:760px){.fly-banner{height:60vh}.fly-hint{display:none}}