/* ============================================================================
   toekom.st — main stylesheet (Raumkonzept-faithful)
   White paper · black-10 hairlines · Bluu Next display, Poppins body ·
   one theme colour per chapter · three-column reading layout with a folding
   chapter rail. Pulls only from tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, canvas { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--link); }
::selection { background: var(--yellow-200); color: var(--ink); }

.u-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:where(a, button, [tabindex], input, summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link { position: fixed; top: -100%; left: var(--space-s); z-index: 1000;
  background: var(--ink); color: #fff; padding: var(--space-2xs) var(--space-s); font-size: var(--step--1); }
.skip-link:focus { top: var(--space-s); color: #fff; }

/* =====================  NAV  ============================================= */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; background: transparent;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  border-bottom: var(--hair) solid transparent; }
.nav[data-state="scrolled"] { background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom-color: var(--rule); }
.nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--space-m); padding: var(--space-xs) var(--gutter); }
.logotype { font-family: var(--font-titling); font-weight: 700; text-decoration: none;
  color: var(--ink); font-size: var(--step-2); letter-spacing: var(--tracking-tight); line-height: 1; justify-self: start; }
.logotype__dot, .logotype__st { color: var(--accent); }
.logotype--sm { font-size: var(--step-1); }
.lang { margin: 0; justify-self: center; font-size: var(--step--1); letter-spacing: .06em; color: var(--ink-faint); }
.lang a { color: var(--ink-faint); text-decoration: none; padding: 2px 3px; }
.lang a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.lang a:hover { color: var(--ink); }
.nav__links { justify-self: end; }
.nav__links ul { display: flex; gap: var(--space-m); list-style: none; margin: 0; padding: 0; }
.nav__links a { color: var(--ink-muted); text-decoration: none; font-size: var(--step--1); font-weight: 500; letter-spacing: .04em; white-space: nowrap; }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--ink); }
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 101; }
.progress__bar { display: block; height: 100%; width: 0; background: var(--accent); }

/* =====================  HERO — cycling colour field  ===================== */
.hero { position: relative; min-height: 100svh; overflow: hidden;
  background: var(--hero-bg, var(--yellow-200)); transition: background-color 1200ms var(--ease); }
.hero__maps { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; pointer-events: none; }
.hero__map { opacity: 0; transition: opacity 900ms var(--ease); }
.hero__map.is-on { opacity: .13; }
@media (prefers-reduced-motion: reduce) { .hero__map { transition: none; } }
.hero__frame { position: relative; z-index: 1; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: calc(var(--space-2xl) + 2rem) var(--gutter) var(--space-xl); }
.hero__rotator { margin-top: auto; }   /* statement top-left, answer bottom-right */
.hero__fixed, .hero__rotator { font-family: var(--font-display); font-weight: 700; margin: 0;
  font-size: clamp(2.6rem, 7.5vw, 6.5rem); line-height: 1.0; letter-spacing: var(--tracking-tight); color: var(--ink); }
.hero__rotator { align-self: flex-end; text-align: right; min-height: 1.1em; position: relative; width: 100%;
  margin-top: auto; }   /* pushes the answer to the bottom of the field */
.hero__word { position: absolute; right: 0; bottom: 0; opacity: 0; transform: translateY(12px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease); white-space: nowrap; }
.hero__word.is-on { opacity: 1; transform: none; }
.hero__intro { max-width: 26rem; margin: var(--space-l) 0 0; font-size: var(--step-0); line-height: 1.5; color: var(--ink); }
@media (max-width: 700px) { .hero__rotator .hero__word { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .hero { transition: none; } .hero__word { transition: none; } }

/* =====================  FOLDING CHAPTER RAIL  ============================ */
.rail { position: fixed; left: 0; top: 0; bottom: 0; width: 15rem; z-index: 60;
  display: none; flex-direction: column; justify-content: space-between;
  padding: 5.4rem var(--space-m) var(--space-m) var(--space-m); pointer-events: none; }
@media (min-width: 1240px) { .page--home .rail { display: flex; } }
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail__item { border-top: var(--hair) solid var(--rule); pointer-events: auto;
  animation: railin 420ms var(--ease); }
@keyframes railin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rail__item { animation: none; } }
.rail__item a { display: flex; align-items: center; gap: .5em; padding: .5em 2px;
  text-decoration: none; color: var(--ink-muted); font-size: var(--step--1); line-height: 1.25; }
.rail__item a:hover { color: var(--ink); }
.rail__dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--theme, var(--accent)); flex: none; }
.rail__done .rail__item:last-child a { color: var(--ink); font-weight: 600; font-size: var(--step-0); }

/* the document shifts right of the rail on wide screens */
.doc { position: relative; }
@media (min-width: 1240px) { .page--home .doc, .page--home .footer { padding-left: 15rem; } }

/* =====================  CHAPTER READING LAYOUT  ========================== */
.chapter { padding: var(--space-3xl) var(--gutter) var(--space-2xl); border-top: var(--hair) solid var(--rule); }
.chapter:first-child { border-top: 0; }
.kicker { font-size: var(--step--1); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--theme-text, var(--accent)); font-weight: 600; margin: 0 0 var(--space-s); }
.chapter__head { max-width: 72rem; margin: 0 auto var(--space-xl); }
.chapter__title { font-family: var(--font-display); font-weight: 700; margin: 0;
  font-size: clamp(2.6rem, 6.5vw, 5.6rem); line-height: 0.98; letter-spacing: var(--tracking-tight); text-wrap: balance; }
.chapter__grid { max-width: 72rem; margin-inline: auto; display: grid; gap: var(--space-2xl);
  grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .chapter__grid { grid-template-columns: minmax(0, 46rem) 1fr; } }
.chapter__body { max-width: 46rem; }
@media (min-width: 980px) { .chapter__head, .chapter__grid { padding-left: clamp(0rem, 8vw, 9rem); } }

.chapter__intro { font-size: var(--step-1); line-height: 1.5; color: var(--ink); margin: 0 0 var(--space-xl); max-width: 40rem; }
.fp { margin: 0 0 var(--space-m); color: var(--ink); font-size: var(--step-0); line-height: 1.6; }

/* framework item — number + title + full text */
.fitem { padding-top: var(--space-l); margin-top: var(--space-l); border-top: var(--hair) solid var(--rule); }
.fitem__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3);
  line-height: 1.05; letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-m); display: flex; gap: .6em; align-items: baseline; }
.fitem__n { font-family: var(--font-titling); color: var(--theme-text, var(--accent)); font-size: .72em; flex: none; }
.fitem__lede { font-size: var(--step-1); font-weight: 600; line-height: 1.4; margin: 0 0 var(--space-m); color: var(--ink); }

/* pulled question + highlighter */
.qpull { font-family: var(--font-display); font-weight: 700; margin: var(--space-l) 0;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.14; letter-spacing: var(--tracking-tight); max-width: 24ch; }
.hl { background: linear-gradient(100deg, transparent 1%, var(--yellow-200) 2.5%, var(--yellow-200) 97.5%, transparent 99%);
  box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: .04em .22em; margin-inline: -.08em; }
.hl--red { background: linear-gradient(100deg, transparent 1%, var(--red-100) 2.5%, var(--red-100) 97.5%, transparent 99%); }
.coda { margin-top: var(--space-xl); padding: var(--space-m) 0 0; border-top: 2px solid var(--theme, var(--ink)); }
.coda p { margin: 0; color: var(--ink-muted); font-size: var(--step--1); line-height: 1.6; }

/* right mini-index (mrail) */
.mrail { display: none; }
@media (min-width: 980px) {
  .mrail { display: block; }
  .mrail ol { list-style: none; margin: 0; padding: 0; position: sticky; top: 6rem; }
  .mrail li { border-top: var(--hair) solid var(--rule); }
  .mrail a { display: flex; gap: .6em; align-items: baseline; padding: .55em 2px; text-decoration: none;
    color: var(--ink-faint); font-size: var(--step--1); line-height: 1.3; transition: color var(--dur-fast); }
  .mrail__n { font-family: var(--font-titling); font-size: .95em; flex: none; }
  .mrail a:hover { color: var(--ink); }
  .mrail li.is-active a { color: var(--ink); font-weight: 600; }
  .mrail li.is-active .mrail__n { color: var(--theme-text, var(--accent)); }
}

/* =====================  ABERCROMBIE — SCROLLY  =========================== */
/* No-JS / reduced default: static full map, steps flow beneath it. */
.mapfigure { margin: var(--space-xl) auto; max-width: 88rem; }
.ab-svg { width: 100%; height: auto; }
.ablayer { transition: opacity 600ms var(--ease); }
.mapfigure__cap { display: grid; gap: var(--space-s) var(--space-l); margin-top: var(--space-s); grid-template-columns: 1fr; }
@media (min-width: 800px) { .mapfigure__cap { grid-template-columns: auto 1fr; align-items: start; } }
.maplegend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-l); }
.maplegend li { display: inline-flex; gap: .55em; align-items: baseline; font-size: var(--step--1); color: var(--ink-muted); transition: color var(--dur-fast); }
.maplegend__n { font-family: var(--font-titling); color: var(--theme-text, var(--accent)); }
.maplegend li.is-active { color: var(--ink); font-weight: 600; }
.mapfigure__credit { margin: 0; font-size: var(--step--1); color: var(--ink-faint); max-width: 46ch; justify-self: end; }
.scrolly__steps .scrolly__step { max-width: 46rem; }
.scrolly__step { padding: var(--space-l) 0; }

/* JS-enhanced: sticky map fills the stage, text cards keep to the left */
.scrolly.is-live { position: relative; }
.scrolly.is-live .scrolly__stage { position: sticky; top: 4.2rem; z-index: 0; height: min(92svh, 66rem); display: flex; }
.scrolly.is-live .mapfigure { margin: 0 auto; align-self: center; width: 100%; max-width: none; }
.scrolly.is-live .ab-svg { max-height: calc(92svh - 6.5rem); width: 100%; }
.scrolly.is-live .ablayer { opacity: 0; }
.scrolly.is-live .ablayer.is-revealed { opacity: .82; }
.scrolly.is-live .ablayer.is-current { opacity: 1; }
.scrolly.is-live .scrolly__steps { position: relative; z-index: 2; margin-top: calc(-1 * min(92svh, 66rem) + 7rem); padding-bottom: var(--space-xl); }
.scrolly.is-live .scrolly__step { background: rgba(255,255,255,.95); border: var(--hair) solid var(--rule-strong);
  border-left: 3px solid var(--theme, var(--accent)); padding: var(--space-m) var(--space-l); margin-bottom: 64svh;
  width: min(28rem, 88%); margin-left: 0; }
.scrolly.is-live .scrolly__step:first-child { margin-top: 12svh; }
.scrolly.is-live .scrolly__step:last-child { margin-bottom: 22svh; }
@media (prefers-reduced-motion: reduce) {
  .scrolly.is-live .scrolly__stage { position: relative; top: 0; height: auto; }
  .scrolly.is-live .ab-svg { max-height: none; }
  .scrolly.is-live .ablayer { opacity: 1 !important; }
  .scrolly.is-live .scrolly__steps { margin-top: 0; }
  .scrolly.is-live .scrolly__step { margin-bottom: var(--space-l); }
}

/* =====================  INVITATION  ====================================== */
.chapter--invitation .qpull--close { font-size: clamp(2rem, 5vw, 4rem); max-width: none; }
.invite__cta { margin: var(--space-xl) 0 0; }
.btn { display: inline-block; border: var(--hair) solid var(--ink); color: var(--ink); text-decoration: none;
  padding: .65em 1.4em; border-radius: 100px; font-weight: 600; font-size: var(--step--1);
  transition: background var(--dur-fast), color var(--dur-fast); }
.btn:hover { background: var(--ink); color: #fff; }

/* =====================  THE SYSTEM SECTION  ============================== */
.weave { max-width: 72rem; margin-inline: auto; }
@media (min-width: 980px) { .weave { padding-left: clamp(0rem, 8vw, 9rem); } }
.weave__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-m);
  flex-wrap: wrap; padding-bottom: var(--space-s); border-bottom: var(--hair) solid var(--rule); }
.viewtoggle { display: inline-flex; border: var(--hair) solid var(--rule-strong); border-radius: 100px; overflow: hidden; }
.viewtoggle button { font-family: var(--font-body); font-size: var(--step--1); font-weight: 500;
  background: transparent; border: 0; color: var(--ink-muted); padding: .45em 1.1em; cursor: pointer; }
.viewtoggle button[aria-selected="true"] { background: var(--ink); color: #fff; }
.syslegend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m);
  margin: 0; padding: 0; font-size: var(--step--1); color: var(--ink-muted); }
.syslegend li { display: inline-flex; align-items: center; gap: .45em; }
.syslegend__dot { inline-size: 9px; block-size: 9px; border-radius: 50%; display: inline-block; }

.weave[data-view="list"] .weave__graph, .weave[data-view="list"] [data-syslegend] { display: none; }
.weave[data-view="graph"] .weave__list { display: none; }

/* graph */
.weave__stage { width: 100%; min-height: 380px; }
.sysmap-svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.sysmap-edge { stroke: rgba(0,0,0,.16); stroke-width: 1; transition: stroke var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.sysmap-svg.is-focus .sysmap-edge { opacity: .12; }
.sysmap-svg.is-focus .sysmap-edge.is-active { opacity: 1; stroke: var(--ink); stroke-width: 1.5; }
.sysmap-node { cursor: pointer; }
.sysmap-node circle { transition: opacity var(--dur-fast) var(--ease); stroke: #fff; stroke-width: 1.25; }
.sysmap-label { fill: var(--ink-muted); font-family: var(--font-body); font-size: 11.5px; font-weight: 500;
  paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease); }
.sysmap-node--project .sysmap-label { font-weight: 700; font-size: 12.5px; fill: var(--ink); }
.sysmap-svg.is-focus .sysmap-node.is-dim circle { opacity: .15; }
.sysmap-svg.is-focus .sysmap-node.is-dim .sysmap-label { opacity: .2; }
.weave__info { margin: var(--space-m) 0 0; color: var(--ink-muted); font-size: var(--step--1); min-block-size: 3em; max-width: 64ch; line-height: 1.5; }
.weave__info strong { color: var(--ink); font-weight: 600; }
.weave-info__st { font-family: ui-monospace, monospace; font-size: .78em; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint); border: var(--hair) dashed var(--rule-strong); padding: 0 .4em; margin-left: .35em; }

/* list view — quick scan */
.weave__list { display: grid; }
.wrow { display: grid; grid-template-columns: 11rem auto 1fr; gap: var(--space-m); align-items: baseline;
  padding: var(--space-s) 2px; border-bottom: var(--hair) solid var(--rule); text-decoration: none; color: var(--ink); }
.wrow:hover .wrow__name { color: var(--link); }
.wrow__name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); letter-spacing: var(--tracking-tight); }
.wrow__st { font-family: ui-monospace, monospace; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.wrow__tags { color: var(--ink-muted); font-size: var(--step--1); line-height: 1.5; }
@media (max-width: 720px) { .wrow { grid-template-columns: 1fr auto; } .wrow__tags { grid-column: 1 / -1; } }

/* =====================  PROJECTS PAGE  =================================== */
.page--sub main { padding-top: 4.5rem; }
.projects-list { max-width: 72rem; margin-inline: auto; padding: var(--space-2xl) var(--gutter);
  display: grid; gap: var(--space-xl) var(--space-2xl); grid-template-columns: 1fr; }
@media (min-width: 800px) { .projects-list { grid-template-columns: 1fr 1fr; } }
.project { border-top: 2px solid var(--ink); padding-top: var(--space-s); }
.project__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s); flex-wrap: wrap; }
.project__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); margin: 0; letter-spacing: var(--tracking-tight); }
.project__link { font-size: var(--step--1); font-weight: 600; white-space: nowrap; }
.project__soon { font-family: ui-monospace, monospace; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.project__blurb { color: var(--ink-muted); margin: var(--space-2xs) 0 var(--space-s); max-width: 48ch; }
.project__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ptag a { font-size: var(--step--1); text-decoration: none; color: var(--ink-muted); border: var(--hair) solid var(--rule);
  border-radius: 100px; padding: .18em .7em; display: inline-block; transition: border-color .2s, color .2s; }
.ptag a:hover { border-color: var(--ink); color: var(--ink); }
.backhome { max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter) var(--space-2xl); }

/* =====================  FOOTER  ========================================== */
.footer { border-top: 2px solid var(--ink); padding: var(--space-xl) var(--gutter) var(--space-l);
  position: relative; z-index: 70; background: var(--bg); }
.footer__inner { max-width: 72rem; margin-inline: auto; }
.footer__top { display: flex; align-items: baseline; gap: var(--space-2xl); flex-wrap: wrap; }
.footer__brand { margin: 0; }
.footer__line { margin: 0; color: var(--ink-muted); font-size: var(--step--1); max-width: 52ch; line-height: 1.55; }
.footer__legal { display: flex; justify-content: space-between; gap: var(--space-s) var(--space-l); flex-wrap: wrap;
  margin: var(--space-l) 0 0; padding-top: var(--space-s); border-top: var(--hair) solid var(--rule);
  font-size: var(--step--1); color: var(--ink-faint); }
.footer__legal a { color: var(--ink-muted); text-decoration-thickness: 1px; }
.footer__legal a:hover { color: var(--ink); }

/* =====================  MOBILE  ========================================== */
@media (max-width: 760px) {
  /* nav: two rows — brand + lang, then the links (scrollable, never hidden) */
  .nav { background: rgba(255,255,255,.94); border-bottom-color: var(--rule); }
  .nav__inner { grid-template-columns: 1fr auto; row-gap: 0; padding-block: .55rem; }
  .lang { justify-self: end; }
  .nav__links { grid-column: 1 / -1; overflow-x: auto; scrollbar-width: none; }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links ul { gap: var(--space-m); padding: .15rem 0 .3rem; }
  .hero__frame { padding-top: 7rem; }
  .hero__intro { max-width: 100%; }
  .chapter { padding-block: var(--space-2xl) var(--space-xl); }
  .chapter__head { margin-bottom: var(--space-l); }
  .qpull { max-width: none; }
  .fitem__title { flex-wrap: wrap; gap: .3em .5em; }
  .scrolly.is-live .scrolly__step { width: 94%; padding: var(--space-m); margin-bottom: 56svh; }
  .scrolly.is-live .scrolly__stage { top: 5.6rem; height: min(78svh, 40rem); }
  .scrolly.is-live .ab-svg { max-height: calc(78svh - 8rem); }
  .scrolly.is-live .scrolly__steps { margin-top: calc(-1 * min(78svh, 40rem) + 6rem); }
  .mapfigure__credit { display: none; }
  .footer__top { gap: var(--space-s); flex-direction: column; }
  .footer__legal { flex-direction: column; }
  .backhome { padding-bottom: var(--space-xl); }
}

/* collection badge (Dravidian Urbanism) */
.coll { font-style: normal; font-weight: 600; color: var(--green-700); }
.project__coll { margin: var(--space-3xs) 0 0; font-size: var(--step--1); color: var(--ink-muted); }
.project__coll a { font-weight: 600; color: var(--green-700); }

/* =====================  PROTOTYPES (internal)  =========================== */
.proto { max-width: 76rem; margin-inline: auto; padding: var(--space-2xl) var(--gutter); border-top: var(--hair) solid var(--rule); }
.proto__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); margin: 0 0 var(--space-2xs); letter-spacing: var(--tracking-tight); }
.proto__note { color: var(--ink-muted); font-size: var(--step--1); max-width: 68ch; margin: 0 0 var(--space-l); line-height: 1.55; }
.proto-svg { width: 100%; height: auto; overflow: visible; display: block; }
.proto-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: var(--space-m) 0 0; padding: 0; }
.proto-chip { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-body); font-size: var(--step--1);
  background: transparent; border: var(--hair) solid var(--rule-strong); color: var(--ink-muted); border-radius: 100px;
  padding: .3em .9em; cursor: pointer; }
.proto-chip::before { content: ""; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--c, var(--ink)); }
.proto-chip:hover { border-color: var(--c, var(--ink)); color: var(--ink); }

/* iso stack */
.iso-slab { fill: #fafafa; stroke-width: 1.2; }
.iso-layerlabel { font-family: var(--font-body); font-size: 13px; font-weight: 600; fill: var(--ink-muted); }
.iso-itemlabel { font-family: var(--font-body); font-size: 10.5px; fill: var(--ink-faint);
  paint-order: stroke; stroke: #fff; stroke-width: 3px; transition: opacity .2s, fill .2s; }
.iso-item { transition: opacity .2s; }
.iso-thread .iso-link { fill: none; stroke: var(--c, var(--ink)); stroke-width: 1.6; opacity: .5; transition: opacity .2s, stroke-width .2s; }
.iso-thread .iso-branch { stroke: var(--c, var(--ink)); stroke-width: 1; opacity: .4; }
.iso-thread .iso-hit { fill: var(--c, var(--ink)); opacity: .55; transition: opacity .2s; }
.proto-svg--iso.is-focus .iso-thread { opacity: .1; }
.proto-svg--iso.is-focus .iso-thread.is-active { opacity: 1; }
.proto-svg--iso.is-focus .iso-thread.is-active .iso-link { opacity: 1; stroke-width: 2.4; }
.proto-svg--iso.is-focus .iso-itemlabel { opacity: .25; }
.proto-svg--iso.is-focus .iso-itemlabel.is-active { opacity: 1; fill: var(--ink); font-weight: 600; }

/* transit */
.tr-base { stroke: var(--ink); stroke-width: 2; }
.tr-station { stroke: #fff; stroke-width: 1.4; }
.tr-label { font-family: var(--font-body); font-size: 10.5px; fill: var(--ink-muted); transition: fill .2s, opacity .2s; }
.tr-group { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tr-bracket { stroke-width: 2; }
.tr-line { fill: none; stroke-width: 1.8; opacity: .55; transition: opacity .2s, stroke-width .2s; cursor: pointer; }
.tr-name { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; opacity: .75; transition: opacity .2s; cursor: pointer; }
.proto-svg--transit.is-focus .tr-line { opacity: .08; }
.proto-svg--transit.is-focus .tr-line.is-active { opacity: 1; stroke-width: 2.6; }
.proto-svg--transit.is-focus .tr-name { opacity: .15; }
.proto-svg--transit.is-focus .tr-name.is-active { opacity: 1; }
.proto-svg--transit.is-focus .tr-label { opacity: .25; }
.proto-svg--transit.is-focus .tr-label.is-active { opacity: 1; fill: var(--ink); font-weight: 600; }

/* punch score */
.punch { display: grid; gap: 0; font-size: var(--step--1); }
.punch__groups, .punch__head, .punch__row { display: grid; grid-template-columns: 11rem repeat(var(--cols), minmax(1.6rem, 1fr)); align-items: end; }
.punch__group { border-bottom: 2px solid var(--c, var(--ink)); color: var(--ink-muted); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600; padding: 0 .35em .25em; margin: 0 3px; white-space: nowrap; overflow: hidden; }
.punch__head .punch__col { writing-mode: vertical-rl; transform: rotate(200grad); justify-self: center;
  font-size: .72rem; color: var(--ink-faint); padding: .5em 0; max-block-size: 9em; transition: color .15s; }
.punch__row { border-top: var(--hair) solid var(--rule); transition: background .15s; }
.punch__name { font-family: var(--font-display); font-weight: 700; padding: .55em .35em .55em 0; letter-spacing: var(--tracking-tight); }
.punch__cell { justify-self: center; align-self: center; inline-size: 11px; block-size: 11px; border-radius: 50%; }
.punch__cell.is-on { background: var(--c, var(--ink)); }
.punch.is-focus .punch__row { opacity: .35; }
.punch.is-focus .punch__row.is-active { opacity: 1; background: rgba(0,0,0,.03); }
.punch.is-focus .punch__col.is-active { color: var(--ink); font-weight: 600; }
@media (max-width: 800px) { .punch__groups, .punch__head, .punch__row { grid-template-columns: 7rem repeat(var(--cols), minmax(1rem, 1fr)); } }

/* =====================  PROJECT MATRIX (score × transit)  ================ */
.pmx-section { max-width: 82rem; margin-inline: auto; padding: var(--space-xl) var(--gutter) var(--space-3xl);
  overflow-x: auto; }
#projects-head { padding-bottom: var(--space-s); }
#projects-head .chapter__intro { margin-bottom: var(--space-s); }
.pmx { --namew: 60%; font-size: var(--step--1); min-width: 46rem; margin-top: var(--space-l); }
/* name column 3/5 · the dot matrix shares the remaining 2/5 */
.pmx__groups, .pmx__head, .pmx__row { display: grid;
  grid-template-columns: var(--namew) repeat(var(--cols), minmax(0, 1fr)); align-items: end; }
.pmx__corner { }
.pmx__group { border-bottom: 2px solid var(--c, var(--ink)); color: var(--ink-muted); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600; padding: 0 .3em .25em; margin: 0 3px;
  white-space: nowrap; overflow: hidden; }
.pmx__head .pmx__col { writing-mode: vertical-rl; transform: rotate(200grad); justify-self: center;
  font-family: var(--font-body); font-size: .7rem; color: var(--ink-faint); background: none; border: 0;
  padding: .5em 0; max-block-size: 8.5em; cursor: pointer; transition: color .15s; overflow: hidden; }
.pmx__head .pmx__col:hover { color: var(--ink); }
.pmx__head .pmx__col.is-active { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pmx__row { border-top: var(--hair) solid var(--rule); position: relative; cursor: pointer;
  transition: opacity .2s var(--ease), background .15s; }
.pmx__row:hover { background: rgba(0,0,0,.025); }
.pmx__row.is-open { background: rgba(0,0,0,.03); }
.pmx__row.is-out { opacity: .18; pointer-events: none; }
.pmx__name { display: flex; align-items: baseline; gap: .6em; background: none; border: 0; cursor: pointer;
  text-align: left; padding: .7em .4em .7em 0; font-family: var(--font-body); }
.pmx__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2);
  letter-spacing: var(--tracking-tight); line-height: 1.05; color: var(--ink); }
.pmx__row:hover .pmx__title, .pmx__row.is-open .pmx__title { color: var(--link); }
.pmx__st { font-family: ui-monospace, monospace; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.pmx__cell { justify-self: center; align-self: center; inline-size: 11px; block-size: 11px; border-radius: 50%; z-index: 1; }
.pmx__cell.is-on { background: var(--c, var(--ink)); box-shadow: 0 0 0 2px #fff; }
.pmx__line { position: absolute; top: 50%; height: 2px; background: var(--ink); opacity: .3; z-index: 0; pointer-events: none; }
.pmx__row:hover .pmx__line, .pmx__row.is-open .pmx__line { opacity: .75; }
.pmx__detail { border-top: var(--hair) solid var(--rule); background: rgba(0,0,0,.02);
  padding: var(--space-l) var(--space-m) var(--space-l) 0; }
.pmx__desc { margin: 0 0 var(--space-s); color: var(--ink); font-size: var(--step-0); line-height: 1.6; max-width: 60ch; }
.pmx__links { margin: var(--space-2xs) 0 0; font-size: var(--step--1); }
.pmx__links a { font-weight: 600; }
@media (max-width: 860px) {
  .pmx__title { font-size: var(--step-1); }
  .pmx__head .pmx__col { font-size: .62rem; max-block-size: 7.5em; }
}

/* styleguide (internal) */
.sg-bar { display: flex; justify-content: space-between; padding: var(--space-s) var(--gutter); border-bottom: var(--hair) solid var(--rule); }
.sg-main { max-width: 72rem; margin-inline: auto; padding: var(--space-xl) var(--gutter); }
.sg-ramp { margin-block: var(--space-m); }
.sg-ramp__name { font-family: ui-monospace, monospace; font-size: var(--step--1); margin: 0 0 var(--space-3xs); }
.sg-ramp__row { display: grid; grid-template-columns: repeat(10, 1fr); }
.sg-swatch { aspect-ratio: 2/1; display: flex; align-items: flex-end; padding: 4px; font-size: .6rem; }
.u-display { font-family: var(--font-display); font-weight: 700; }