/* Finish layer, loaded last on every public page.
   1. Dark, moody, metallic surface for every deep-blue background.
   2. Readability floor: sentences at 15px or more, uppercase labels at 13px or more, stronger faint text. */

:root{
  --metal-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008333 0.7' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.82 0 0 0 0 0.84 0 0 0 0 1 0.12 0 0 0 -0.035'/%3E%3C/filter%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0 1 0.1 0 0 0 -0.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --metal-sheen:
    linear-gradient(112deg,transparent 18%,rgba(150,158,255,.04) 34%,rgba(226,228,255,.035) 41%,transparent 55%,rgba(130,140,255,.035) 74%,transparent 86%),
    radial-gradient(110% 75% at 88% -8%,rgba(40,30,140,.38),transparent 62%),
    radial-gradient(90% 70% at -12% 108%,rgba(22,15,84,.6),transparent 60%);
  --metal-base:linear-gradient(180deg,#07022e 0%,#04001e 55%,#030018 100%);
  --metal:var(--metal-grain),var(--metal-sheen),var(--metal-base);
}

/* Homepage: the fixed backdrop carries every dark section while scrolling. */
.backdrop-dark{background:var(--metal)}
.world-obsidian{background:var(--metal)}
.hero-copy::before{background:var(--metal-grain),linear-gradient(180deg,var(--ink) 0%,var(--deep,#0b0035) calc(100% - 64px),var(--bone) 100%)}
@media(max-width:600px){.hero-copy::before{background:var(--metal-grain),linear-gradient(180deg,var(--ink) 0%,#0b0035 calc(100% - 100px),var(--bone) 100%)}}

/* Older rules paint some dark scenes solid; let the metal backdrop show through instead. */
html.has-motion #absurd,html.has-motion #absurd .absurd-stage,html.has-motion #question,html.has-motion #question .scene-stage,
html.has-motion .stagewall-frame,html.has-motion .site-home .stagewall-stage{background:transparent!important}
html:not(.has-motion) #absurd,html:not(.has-motion) #question{background:var(--metal)!important}
html:not(.has-motion) #absurd .absurd-stage,html:not(.has-motion) #question .scene-stage,html:not(.has-motion) .stagewall-frame,html:not(.has-motion) .site-home .stagewall-stage{background:transparent!important}
:root .absurd-track .mono{color:#c9b36a}

/* Inner pages: one fixed metal surface behind the whole page. */
html:has(body.site-inner-page){background:#04001e}
body.site-inner-page,html.has-motion body.path-page,body.inflow-distilled,.inflow-distilled{background:transparent}
body.site-inner-page::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--metal);pointer-events:none}
.path-page>header{background:transparent}
.site-header .brand-lockup img{mix-blend-mode:lighten}

/* Shared header: same metal, kept nearly opaque so links stay crisp. */
body .site-header{background:var(--metal-grain),linear-gradient(180deg,rgba(9,4,48,.985),rgba(4,0,30,.985))!important}

/* ---------- Readability floor ---------- */

/* Header: larger navigation text. */
:root .site-header .chapter-links{font-size:17px;gap:30px}
:root .site-header .site-motion{font-size:14px!important;width:auto;padding-inline:2px}
:root .site-header .site-primary{font-size:14px!important;padding:13px 22px!important}
@media(max-width:1180px){:root .site-header .chapter-links{font-size:16px;gap:22px}}
@media(max-width:900px){
  :root .site-header .chapter-links{font-size:15px;gap:18px}
  :root .site-header .site-motion{font-size:14px!important}
  :root .site-header .site-primary{font-size:13px!important;padding:10px 14px!important}
}
:root .site-header .chapter-links a{font-size:inherit}
/* Phones: the logo already links home, so the Home link steps aside to keep the rest large. */
@media(max-width:600px){:root .site-header .chapter-links a[href="index.html"]{display:none}:root .site-header .chapter-links{font-size:15.5px;gap:16px;justify-content:space-between}}
@media(max-width:360px){:root .site-header .chapter-links{font-size:14.5px;gap:10px}}

/* Uppercase labels and eyebrows: 13px floor, calmer tracking. */
:root .eyebrow,:root .path-main .eyebrow,:root .i-status,:root .i-tag,:root .hero-role,:root .aperture-step,
:root .door-num,:root .absurd-count,:root .cue,:root .frag-label,:root .rail li,:root .maturity-title,
:root .absurd-track .mono,:root .how-stacy-steps li::before,:root .close .foot{font-size:13px!important;letter-spacing:.1em}
:root .i-story-heading .i-status{font-size:13px!important}
:root .maturity-title{font-size:14px!important}
:root .rail li{color:rgba(216,213,206,.78)}
:root .close .foot{color:rgba(216,213,206,.82)}

/* Buttons and calls to action */
:root .btn,:root .hero-actions .btn,:root .architect-paths .btn,:root .aperture-after .btn{font-size:14px}
:root .path-actions a,:root .path-actions button,:root .path-copy a.primary{font-size:16px}
:root .hero-speaking,:root .door-action,:root .hero-building,:root .how-stacy-link,:root .i-future-link,:root .text-link{font-size:16px}
:root .sp-watch{font-size:14px}

/* Small sentences: captions, notes, footers, credentials */
:root .stagewall-quote cite,:root .sp-quote cite{font-size:14px}
:root .tedx-watch small{font-size:14px}
:root .creds li,:root .sp-creds li,:root .path-credentials li{font-size:14px}
:root .ring-name{font-size:14px}
:root .ring-state{font-size:15px;color:rgba(216,213,206,.88)}
:root .maturity-tag{font-size:14px}
:root .tedx-player-footer,:root .tedx-player-footer a{font-size:15px}
:root .thread-meaning span,:root .future-perspective,:root .ledger-explanation{font-size:17px}
:root .path-photo figcaption,:root .i-story figcaption{font-size:15px}
:root .path-footer,:root .path-footer a,:root .path-footer span,:root .i-footer,:root .site-inner-page>footer{font-size:14px}
:root .quiet,:root .form-note,:root .pending,:root .i-next p{font-size:16px}
:root .field label,:root .field>span{font-size:16px}
:root #asymmetry .asym-qualifier,:root .asym-qualifier{font-size:15px}
:root #asymmetry figcaption{font-size:16px;color:rgba(4,0,30,.8)}
:root .meeting-meta p{font-size:15px}
:root .booking-steps span,:root .steps span{font-size:14px}

:root .how-stacy .eyebrow,:root .aperture-head .eyebrow{font-size:14px!important}
:root .aperture-head .eyebrow{letter-spacing:.04em}
:root .aperture-label span{font-size:14px}
@media(max-width:760px){:root .aperture-label span{font-size:13px}}
:root .door small,:root .aperture-future small,:root a small{font-size:14px}

/* Phones: no sentence below 16px, labels stay at 13px. */
@media(max-width:600px){
  :root .lede{font-size:1rem}
  :root .hero-person{font-size:.875rem}
  :root .aperture-text{font-size:18px}
  :root .thread-meaning p,:root .decision-explanation{font-size:16px}
  :root #asymmetry .lane b{font-size:13px}
  :root #asymmetry .slip-title{font-size:13px}
}