/* ===== Fractal network type layer (fonts/TYPE_AMENDMENT.md, 2026-10-20). Loaded last; only the type swaps, layout stays. =====
   Grid faces render ONLY at integer multiples of their design unit and never with faux bold:
   - FS PX Title: 9 px per em -> sizes are multiples of 18px.
   - VCR OSD Mono: 20.48 px per em (100 units at 2048 upm) -> 20.48px (x1) or 40.96px (x2). */
:root{
  --f-title:"FS PX Title",ui-monospace,monospace;
  --f-second:"VCR OSD Mono","Inter",ui-monospace,monospace;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-head:var(--f-title);--f-mono:var(--f-second);--f-ui:var(--f-second);
  --t-px:9px;--s-px:20.48px;
  --t-hero:calc(var(--t-px) * 6);--t-1:calc(var(--t-px) * 8);--t-2:calc(var(--t-px) * 4);--t-3:calc(var(--t-px) * 2);
  --s-1:var(--s-px);--s-2:calc(var(--s-px) * 2)}
html{font-synthesis:none}
/* titles */
h1,h2,.hero-title,.env-title,.tree-link,.idx-name,.wcard-name,.sel-name,.stats dd,.env-cta h3,.philosophy h3,.discipline h3,.wordmark,.wordmark-text,.footer-brand,.index-hd h2,.lead-title,.lead-strong{
  font-family:var(--f-title)!important;font-weight:400!important;font-style:normal!important;letter-spacing:0!important;line-height:1!important;-webkit-font-smoothing:auto}
.hero-title,.env-title{font-size:var(--t-hero)!important}
.lead-strong,h2,.index-hd h2,.env-cta h3,.philosophy h3,.tree-link,.idx-name,.wcard-name,.sel-name,.stats dd{font-size:var(--t-2)!important}
.discipline h3,.wordmark,.wordmark-text,.footer-brand{font-size:var(--t-3)!important}
.hero-title em{font-style:normal!important}
h2{line-height:1.25!important}
.hero-title,.env-title{line-height:1.125!important}
/* secondary: subtitles, labels, eyebrows, metadata, IDs, nav, buttons */
.kicker,.eyebrow,.section-index,.badge,.map-legend,.legend,.crumbs ol,.crumbs a,.env-parent,.sub,.facts dt,.row-k,.preview-tag,.site-nav ul a,.btn,.ctl,.menu-toggle,.menu-label,.text-link,.stats dt,.sel-k,.sel-spec dt,.sel-spec dd,.sel-go,.stage-hd,.idx-no,.idx-sub,.idx-tag,.wcard-no,.wcard-meta,.env-sec h3,.list-note,.category,.footer-tag,.footer-copy,.row-meta,.fa-btn,.index-note,.net-hd,.kid,.fsid,.env-meta,.chip,.member-name,.note,.map-hint,.back-to,.tree-sum{
  font-family:var(--f-second)!important;font-weight:400!important;font-style:normal!important;letter-spacing:0!important;font-size:var(--s-1)!important;line-height:1.25}
.tree-sum{font-family:var(--f-body)!important;font-size:.9375rem!important}
@media (max-width:899px){.js .site-nav ul a{font-size:var(--s-2)!important}}
.badge{gap:8px}
/* the map labels zoom continuously, so they stay in the body face (a grid face cannot hold its grid while scaling) */
.node .label,.node .stage-label{font-family:var(--f-body)!important;letter-spacing:.02em!important}
@media (min-width:1100px){html[data-dir=a] .hero-title,html[data-dir=c] .hero-title,.env-title{font-size:calc(var(--t-px) * 8)!important}}
@media (max-width:1099px){.hero-title,.env-title{font-size:calc(var(--t-px) * 6)!important}}
@media (max-width:699px){
  .hero-title,.env-title{font-size:calc(var(--t-px) * 4)!important}
  .idx-name,.wcard-name,.sel-name,.tree-link,.lead-strong{font-size:var(--t-3)!important}
  h2,.index-hd h2,.env-cta h3,.philosophy h3,.stats dd{font-size:calc(var(--t-px) * 4)!important}
  .site-nav ul a,.btn,.text-link{font-size:var(--s-1)!important}
}
/* calmer grid UI: sentence case for the longer labels, caps only for short tags; tighter nav so the header keeps one row at 1200px */
.env-parent,.crumbs ol,.crumbs a,.stage-hd,.sel-k,.preview-tag,.row-k,.facts dt,.sub,.net-hd,.footer-copy,.footer-tag,.list-note,.index-note,.sel-go,.idx-sub,.category,.wcard-meta,.idx-tag,.env-sec h3,.text-link,.ctl,.btn,.site-nav ul a,.menu-label,.fa-btn{text-transform:none!important}
.site-nav,.site-nav ul{column-gap:18px!important}
.header-inner{column-gap:16px}
/* ===== portal B: art/PORTAL_B_FIX_SPEC_v1.md §0.2-0.3 + Fix 3 (2026-10-20): grid faces only. Inter sizes/spacing: theme.css "SPEC v1" block. =====
   FS PX Title 18/36/54/72, line-height = size + 9. VCR OSD Mono: short single-line machine strings, 20.48 (40.96 mobile menu). Uppercase: eyebrow/kicker + legend only. */
html[data-dir=b] :is(.kicker,.kid,.section-index,.eyebrow,.map-legend li,.idx-no,.facts dt,.sel-spec dt,.row-k,.sel-k,.crumbs li,.stage-hd span,.fsid){
  font-family:var(--f-second)!important;font-weight:400!important;font-style:normal!important;letter-spacing:0!important;font-size:var(--s-1)!important;line-height:25.6px!important;white-space:nowrap}
@media (max-width:899px){html[data-dir=b].js .site-nav ul a{font-family:var(--f-second)!important;font-weight:400!important;font-style:normal!important;letter-spacing:0!important;font-size:var(--s-2)!important;line-height:51.2px!important;white-space:nowrap}}
html[data-dir=b] :is(h2,.section-title,.index-hd h2,.env-cta h3,.philosophy h3,.lead-strong,.idx-name,.sel-name,.tree-link){font-size:var(--t-2)!important;line-height:45px!important}
html[data-dir=b] :is(.wordmark,.wordmark-text){font-size:var(--t-3)!important;line-height:18px!important}
html[data-dir=b] .hero-title,html[data-dir=b].js .hub-hero .hero-title{font-size:var(--t-hero)!important;line-height:63px!important;letter-spacing:0!important}
html[data-dir=b] .env .env-title{font-size:var(--t-1)!important;line-height:81px!important}
@media (max-width:1099px){html[data-dir=b] .env .env-title{font-size:var(--t-hero)!important;line-height:63px!important}}
@media (max-width:699px){
  html[data-dir=b] .hero-title,html[data-dir=b].js .hub-hero .hero-title,html[data-dir=b] .env .env-title{font-size:var(--t-2)!important;line-height:45px!important}
  html[data-dir=b] :is(.idx-name,.sel-name,.tree-link){font-size:var(--t-3)!important;line-height:27px!important}}
html[data-dir=b] *{text-transform:none!important}
html[data-dir=b] :is(.kicker,.kicker *,.section-index,.eyebrow,.map-legend,.map-legend *){text-transform:uppercase!important}
@media (max-width:359px){html[data-dir=b] :is(.kicker,.section-index,.sel-k,.stage-hd span,.crumbs li){white-space:normal}}
