/* Siliconcordat / Moissanite Labs — prototype stylesheet (Direction A: Carbon–Silicon Cut)
   One stylesheet for /, /ml and /ml/*. Load ../tokens.css first (separate <link>, not @import). No build step. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink-2);
  font: 400 17px/1.65 var(--font-body);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--ink); margin: 0; letter-spacing: -0.012em; font-optical-sizing: auto; }
a { color: var(--link); text-decoration: underline; text-decoration-color: rgb(212 180 138 / 0.45); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color var(--dur-ui) var(--ease-film), text-decoration-color var(--dur-ui) var(--ease-film); }
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 0; }
strong { color: var(--ink); font-weight: 600; }
::selection { background: var(--carbon-deep); color: var(--fire-strong); }

.chem { text-transform: none; letter-spacing: 0.02em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--fire); color: var(--bg); padding: 10px 14px; font: 500 0.9rem var(--font-body); text-decoration: none; border-radius: var(--radius); }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max-landing); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--ml { max-width: var(--max-ml); }

/* ---------- Mono meta (captions, chapter markers, numbers) ---------- */
.meta, .chapter-marker, .caption {
  font: 500 0.75rem/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.chapter-marker { display: flex; align-items: center; gap: 14px; color: var(--ink-2); margin-bottom: 28px; }
.chapter-marker .num { color: var(--fire); }
.chapter-marker::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }

/* ---------- Family header ---------- */
.family-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: rgb(10 9 8 / 0.86); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(1px)) { .family-header { background: rgb(10 9 8 / 0.72); backdrop-filter: blur(10px) saturate(1.1); } }
.family-header .wrap { height: 100%; display: flex; align-items: center; gap: 8px; }
.family-header--over { position: fixed; left: 0; right: 0; background: linear-gradient(rgb(10 9 8 / 0.7), rgb(10 9 8 / 0)); border-bottom-color: transparent; backdrop-filter: none; }
.family-header--over.is-scrolled { background: rgb(10 9 8 / 0.82); border-bottom-color: var(--line); }
@supports (backdrop-filter: blur(1px)) { .family-header--over.is-scrolled { background: rgb(10 9 8 / 0.7); backdrop-filter: blur(10px) saturate(1.1); } }
.fam { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fam a { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; color: var(--ink-2); text-decoration: none; font: 500 0.875rem/1 var(--font-body); letter-spacing: 0.01em; }
.fam a:hover { color: var(--ink); }
.fam .fam-home { padding-left: 0; margin-right: 18px; color: var(--ink); font: 500 1.125rem/1 var(--font-display); letter-spacing: 0; }
.fam .fam-home svg { width: 28px; height: 28px; }
/* current item: 1px fire underline + facet tick (never colour alone) */
.fam a[aria-current="page"] { color: var(--ink); }
.fam a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 9px; height: 1px; background: var(--fire); }
.fam .fam-home[aria-current="page"]::after { left: 36px; right: 0; }
.fam a[aria-current="page"]::before { content: ""; position: absolute; left: 50%; bottom: 6px; width: 5px; height: 5px; background: var(--fire); transform: translateX(-50%) rotate(45deg); }
.fam .fam-home[aria-current="page"]::before { left: calc(50% + 18px); }
.fam .fam-weft .weft-tick { width: 6px; height: 6px; background: var(--weft-bg); outline: 1px solid var(--weft-link); outline-offset: 0; transform: rotate(45deg); transition: background var(--dur-ui); }
.fam .fam-weft:hover { color: var(--weft-link); }
.fam .fam-weft:hover .weft-tick { background: var(--weft-link); }
.header-meta { margin-left: auto; }
.header-meta .chip { font-size: 0.6875rem; }
.menu { display: none; margin-left: auto; position: relative; }
.menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--line-2); color: var(--ink); font: 500 0.75rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius); }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { border-color: var(--fire); }
.menu[open] > summary { border-color: var(--fire); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px; background: var(--surface); border: 1px solid var(--line-2); padding: 6px; display: grid; }
.menu-panel a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; color: var(--ink); text-decoration: none; font: 500 1rem var(--font-body); border-bottom: 1px solid var(--line); }
.menu-panel a:last-child { border-bottom: 0; }
.menu-panel a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--fire); }
.menu-panel a[aria-current="page"]::after { content: "Here"; font: 500 0.6875rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fire); }
.menu-panel .weft-row:hover { color: var(--weft-link); }
@media (max-width: 720px) {
  .fam li:not(:first-child) { display: none; }
  .header-meta { display: none; }
  .menu { display: block; }
}

/* ---------- Working-proposal chip ---------- */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 8px; border: 1px solid rgb(230 210 168 / 0.5); color: var(--fire); background: rgb(10 9 8 / 0.55); font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; border-radius: var(--radius); white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); }
.proposal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; margin: 0 0 clamp(28px, 4vw, 44px); max-width: 44rem; }
.proposal p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); flex: 1 1 22rem; }

/* ==================================================================
   LANDING ( / )
   ================================================================== */
.hero { position: relative; min-height: max(680px, 100svh); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.chamber { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 74% 44%, rgb(157 176 196 / 0.13), transparent 70%),
    radial-gradient(45% 60% at 18% 88%, rgb(196 132 74 / 0.16), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, var(--bg-2), var(--bg) 70%);
}
.chamber__crystal { position: absolute; right: -4vw; top: 50%; width: min(1320px, 92vw); aspect-ratio: 1600 / 1000; transform: translateY(-46%); opacity: 0.78;
  -webkit-mask-image: radial-gradient(62% 70% at 70% 50%, #000 40%, transparent 88%); mask-image: radial-gradient(62% 70% at 70% 50%, #000 40%, transparent 88%); }
.chamber__crystal img { width: 100%; height: 100%; object-fit: cover; }
.chamber__caustic { position: absolute; inset: -20%; opacity: 0.16; mix-blend-mode: screen;
  background: url("/assets/caustic.webp") 0 0 / 768px 768px repeat;
  -webkit-mask-image: radial-gradient(30% 36% at 64% 50%, #000 15%, transparent 100%); mask-image: radial-gradient(30% 36% at 64% 50%, #000 15%, transparent 100%);
  filter: blur(0.4px); }
.chamber__caustic--b { opacity: 0.12; background-size: 1100px 1100px; }
.chamber__seam { position: absolute; top: 10%; bottom: 0; left: 61%; width: 1px; background: linear-gradient(180deg, transparent, rgb(230 210 168 / 0.0) 10%, rgb(230 210 168 / 0.38) 45%, rgb(196 132 74 / 0.28) 75%, transparent); }
.chamber__seam::after { content: ""; position: absolute; left: -40px; right: -40px; top: 40%; height: 30%; background: radial-gradient(closest-side, rgb(230 210 168 / 0.08), transparent); }
.chamber__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(transparent, var(--bg) 92%); }
@media (prefers-reduced-motion: no-preference) {
  .chamber__caustic { animation: drift-a var(--dur-caustic) linear infinite; }
  .chamber__caustic--b { animation: drift-b 52s linear infinite; }
}
@keyframes drift-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-768px, -768px, 0); } }
@keyframes drift-b { from { transform: translate3d(0, 0, 0) rotate(0.001deg); } to { transform: translate3d(1100px, -1100px, 0) rotate(0.001deg); } }

.hero__inner { position: relative; width: 100%; padding-top: calc(var(--header-h) + clamp(48px, 10vh, 120px)); padding-bottom: clamp(56px, 11vh, 120px); }
.hero__title { font-size: clamp(3.25rem, 1.2rem + 7.6vw, 8.75rem); line-height: 0.92; font-weight: 360; letter-spacing: -0.03em; font-variation-settings: "opsz" 60; margin: 0 0 clamp(24px, 3vw, 36px); max-width: 11ch; }
.hero__title .the { display: block; font-size: 0.34em; letter-spacing: -0.005em; font-weight: 400; color: var(--ink-2); margin-bottom: 0.18em; }
.hero__lede { font-family: var(--font-display); font-variation-settings: "opsz" 24; font-weight: 380; font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); line-height: 1.38; color: var(--ink-2); max-width: 31ch; margin: 0 0 clamp(32px, 4vw, 48px); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.textlink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; font: 500 0.9375rem var(--font-body); border-bottom: 1px solid var(--line-2); transition: border-color var(--dur-ui), color var(--dur-ui); }
.textlink .arr { color: var(--fire); transition: transform var(--dur-ui) var(--ease-film); }
.textlink:hover { color: var(--fire-strong); border-bottom-color: var(--fire); }
.textlink:hover .arr { transform: translateX(3px); }
.textlink--down:hover .arr { transform: translateY(3px); }
.hero__fig { position: absolute; right: var(--gutter); bottom: clamp(56px, 11vh, 120px); text-align: right; }
.hero__fig .caption { display: block; }
.hero__fig .caption + .caption { margin-top: 6px; color: var(--muted); }
.hero__fig .si, .hero__fig .c { text-transform: none; letter-spacing: 0.02em; }
.hero__fig .si { color: var(--silicon); } .hero__fig .c { color: var(--carbon); }
.scrollcue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); text-decoration: none; font: 500 0.6875rem var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.scrollcue::after { content: ""; width: 1px; height: 36px; background: linear-gradient(var(--fire), transparent); }
.scrollcue:hover { color: var(--fire); }

/* ---------- Chapters ---------- */
.chapter { position: relative; padding: clamp(72px, 9vw, 128px) 0; border-bottom: 1px solid var(--line); }
.chapter__title { font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem); line-height: 1.02; font-weight: 380; letter-spacing: -0.022em; font-variation-settings: "opsz" 48; max-width: 18ch; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 900ms var(--ease-film), transform 900ms var(--ease-film); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

/* Name / metaphor */
.name-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 112px); align-items: start; }
.pull { font-family: var(--font-display); font-weight: 360; font-variation-settings: "opsz" 48; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.25rem); line-height: 1.12; letter-spacing: -0.018em; color: var(--ink); margin: 0 0 48px; }
.prose { max-width: var(--max-prose); }
.prose p { font-size: 1.0625rem; }
.prose--lead p:first-child { font-size: 1.1875rem; color: var(--ink); }
.caveat { margin: 36px 0 0; padding: 22px 0 0 24px; border-left: 1px solid var(--fire); position: relative; }
.caveat::before { content: ""; position: absolute; left: -4px; top: 0; width: 7px; height: 7px; background: var(--fire); transform: rotate(45deg); }
.caveat .meta { color: var(--fire); display: block; margin: -22px 0 10px; padding-top: 0; }
.caveat p { color: var(--ink); font-size: 1.0625rem; margin: 0; }

.specimen { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; max-width: 460px; }
.el { position: relative; padding: 18px 18px 16px; border: 1px solid var(--line-2); background: var(--surface); aspect-ratio: 1 / 1.08; display: flex; flex-direction: column; justify-content: space-between; }
.el--c { border-color: rgb(196 132 74 / 0.55); background: linear-gradient(160deg, rgb(196 132 74 / 0.12), transparent 60%), var(--surface); }
.el--si { border-color: rgb(157 176 196 / 0.55); background: linear-gradient(200deg, rgb(157 176 196 / 0.12), transparent 60%), var(--surface); }
.el__z { font: 500 0.8125rem var(--font-mono); color: var(--muted); }
.el__sym { font: 360 clamp(3rem, 2rem + 3vw, 4.5rem)/1 var(--font-display); font-variation-settings: "opsz" 60; color: var(--ink); }
.el--c .el__sym { color: var(--carbon); } .el--si .el__sym { color: var(--silicon); }
.el__name { font: 500 0.75rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.bond { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; gap: 8px; }
.bond__line { width: 100%; height: 1px; background: linear-gradient(90deg, var(--silicon), var(--fire), var(--carbon)); }
.bond .meta { color: var(--fire); font-size: 0.75rem; text-transform: none; letter-spacing: 0.04em; }
.specimen-cap { grid-column: 1 / -1; margin-top: 14px; }

/* Principles */
.section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 112px); align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.section-head p { margin: 0; max-width: 34rem; }
.principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line); }
.principle { position: relative; padding: 32px 32px 40px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 300px; display: flex; flex-direction: column; }
.principle__n { font: 500 0.8125rem var(--font-mono); letter-spacing: 0.1em; color: var(--fire); margin-bottom: 48px; display: flex; align-items: center; gap: 12px; }
.principle__n::after { content: ""; width: 24px; height: 1px; background: var(--line-2); }
.principle h3 { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.12; font-weight: 420; font-variation-settings: "opsz" 32; margin-bottom: 16px; }
.principle p { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
.principle::before { content: ""; position: absolute; top: -1px; left: -1px; width: 28px; height: 1px; background: var(--fire); }
.principle:nth-child(3n+1)::after, .principle:nth-child(3n)::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none; }

/* Ecosystem */
.eco-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 112px); margin-bottom: clamp(48px, 6vw, 72px); align-items: start; }
.note { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--line-2); background: var(--bg-2); margin-top: 28px; }
.note .meta { color: var(--fire); white-space: nowrap; padding-top: 3px; }
.note p { margin: 0; color: var(--ink); font-size: 0.975rem; }
.constellation { margin: 0 0 clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; }
.constellation svg { width: 100%; height: auto; }
.constellation figcaption { margin-top: 12px; }
.directions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dcard { position: relative; display: flex; flex-direction: column; min-height: 268px; padding: 26px 26px 22px; background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line-2); border-radius: var(--radius); transition: border-color var(--dur-ui) var(--ease-film), background var(--dur-ui) var(--ease-film); }
.dcard::before { content: ""; position: absolute; top: -1px; right: -1px; width: 22px; height: 22px; background: linear-gradient(225deg, var(--bg) 50%, var(--line-2) 50%, var(--line-2) calc(50% + 1px), transparent calc(50% + 1px)); transition: background var(--dur-ui); }
.dcard__status { display: inline-flex; align-items: center; gap: 8px; font: 500 0.6875rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 36px; }
.dcard__status::before { content: ""; width: 6px; height: 6px; border: 1px solid var(--silicon); transform: rotate(45deg); }
.dcard h3 { font-size: 2rem; line-height: 1; font-weight: 420; font-variation-settings: "opsz" 40; margin-bottom: 14px; }
.dcard h3 a { color: var(--ink); text-decoration: none; }
.dcard h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.dcard h3 a:focus-visible { outline: none; }
.dcard h3 a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 3px; }
.dcard p { margin: 0 0 24px; font-size: 0.975rem; line-height: 1.58; color: var(--ink-2); }
.dcard__links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--line); font: 400 0.8125rem var(--font-mono); }
.dcard__url { color: var(--link); display: inline-flex; gap: 6px; white-space: nowrap; }
.dcard__links a { position: relative; z-index: 2; color: var(--ink-2); text-decoration-color: var(--line-2); }
.dcard__links a:hover { color: var(--fire-strong); text-decoration-color: currentColor; }
.dcard__aside { color: var(--muted); font-size: 0.75rem; flex-basis: 100%; }
.dcard--link:hover { border-color: rgb(230 210 168 / 0.55); background: linear-gradient(180deg, var(--surface-2), var(--bg-2)); }
.dcard--link:hover::before { background: linear-gradient(225deg, var(--bg) 50%, var(--fire) 50%, var(--fire) calc(50% + 1px), transparent calc(50% + 1px)); }
.dcard--link:hover .dcard__url { color: var(--fire-strong); }
.dcard--link:hover .dcard__url .arr { transform: translate(2px, -2px); }
.dcard .arr { display: inline-block; transition: transform var(--dur-ui) var(--ease-film); }
.dcard--foundation .dcard__status::before { border-color: var(--fire); background: var(--fire); }
.dcard--aspiration { background: transparent; border: 1px dashed var(--line-2); }
.dcard--aspiration::before { display: none; }
.dcard--aspiration h3 { color: var(--ink-2); }
.badge-asp { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border: 1px dashed var(--muted); color: var(--ink-2); font: 500 0.6875rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 36px; align-self: flex-start; }
.dcard--aspiration p { color: var(--ink-2); }
.dcard--aspiration .dcard__links { color: var(--muted); border-top-style: dashed; }
.dcard--weft { background: linear-gradient(180deg, var(--surface), var(--bg-2)); }
.dcard--weft .dcard__status::before { border-color: var(--weft-link); }
.dcard--weft .dcard__url { color: var(--weft-link); }
.dcard--weft:hover { border-color: rgb(127 203 227 / 0.55); background: linear-gradient(90deg, var(--surface-2) 70%, var(--weft-bg)); }
.dcard--weft:hover::before { background: linear-gradient(225deg, var(--bg) 50%, var(--weft-link) 50%, var(--weft-link) calc(50% + 1px), transparent calc(50% + 1px)); }
.dcard--weft:hover .dcard__url { color: var(--weft-ink); }

/* Doorways */
.doorways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.door { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 380px; padding: clamp(28px, 3vw, 44px); text-decoration: none; color: var(--ink); border: 1px solid var(--line-2); overflow: hidden; isolation: isolate; border-radius: var(--radius); transition: border-color var(--dur-door) var(--ease-film); }
.door__k { font: 500 0.75rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 16px; }
.door__title { font: 360 clamp(2.5rem, 1.6rem + 3vw, 4.25rem)/1 var(--font-display); font-variation-settings: "opsz" 60; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 14px; }
.door__desc { color: var(--ink-2); max-width: 28rem; margin: 0 0 28px; }
.door__go { display: inline-flex; align-items: center; gap: 12px; font: 500 0.9375rem var(--font-body); color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid var(--line-2); align-self: flex-start; transition: border-color var(--dur-ui), color var(--dur-ui); }
.door__go .arr { transition: transform var(--dur-door) var(--ease-film); color: var(--fire); }
.door--lab { background: radial-gradient(80% 90% at 0% 100%, rgb(196 132 74 / 0.16), transparent 60%), radial-gradient(70% 80% at 100% 0%, rgb(157 176 196 / 0.10), transparent 60%), var(--surface); }
.door--lab .door__mark { position: absolute; right: -56px; bottom: -64px; width: 320px; opacity: 0.09; z-index: -1; }
.door--lab:hover { border-color: rgb(230 210 168 / 0.6); }
.door--lab:hover .door__go { border-color: var(--fire); color: var(--fire-strong); }
.door--lab:hover .door__go .arr { transform: translateX(4px); }
/* Weft doorway: the door is ajar. A sliver of Weft's room (navy #060a12, aqua #7fcbe3) at the right edge; widens on hover/focus. */
.door--weft { background: linear-gradient(120deg, var(--surface) 0%, var(--bg-2) 100%); }
.door--weft::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 10px; z-index: -1;
  background: linear-gradient(90deg, rgb(127 203 227 / 0.0), rgb(127 203 227 / 0.06) 30%, transparent 30.5%), linear-gradient(180deg, #0b1825, var(--weft-bg) 70%);
  box-shadow: -1px 0 0 var(--weft-link), -18px 0 40px -10px rgb(127 203 227 / 0.25);
  transition: width var(--dur-door) var(--ease-film), box-shadow var(--dur-door) var(--ease-film); }
.door--weft .door__k .room { color: var(--weft-link); }
.door--weft .door__go .arr { color: var(--weft-link); }
.door--weft:hover, .door--weft:focus-visible { border-color: rgb(127 203 227 / 0.55); }
.door--weft:hover::after, .door--weft:focus-visible::after { width: 34%; box-shadow: -1px 0 0 var(--weft-link), -40px 0 80px -20px rgb(127 203 227 / 0.3); }
.door--weft:hover .door__go, .door--weft:focus-visible .door__go { border-color: var(--weft-link); color: var(--weft-ink); }
.door--weft:hover .door__go .arr { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .door--weft::after, .door__go .arr, .dcard, .textlink .arr { transition: none !important; } }

/* Footer */
.site-footer { padding: clamp(56px, 7vw, 96px) 0 48px; background: linear-gradient(var(--bg), var(--bg-2)); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.footer-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); font: 500 1.25rem var(--font-display); text-decoration: none; margin-bottom: 24px; }
.footer-brand svg { width: 30px; height: 30px; }
.footer-fam { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer-fam a { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; }
.footer-fam a:hover { color: var(--ink); }
.footer-fam a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--fire); text-underline-offset: 6px; }
.footer-fam .path { font: 400 0.75rem var(--font-mono); color: var(--muted); }
.footer-fam a.fam-weft:hover { color: var(--weft-link); }
.humility { border-top: 1px solid var(--line-2); padding-top: 20px; }
.humility .meta { color: var(--fire); display: block; margin-bottom: 12px; }
.humility p { font-size: 0.9375rem; color: var(--ink-2); max-width: 46rem; }
.footer-base { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ==================================================================
   /ml  — the lab (tighter, instrument captions, less film)
   ================================================================== */
.localnav { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: var(--header-h); z-index: 40; }
.localnav .wrap { display: flex; align-items: center; gap: 4px; min-height: 48px; overflow-x: auto; scrollbar-width: none; }
.localnav .meta { margin-right: 18px; white-space: nowrap; }
.localnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink-2); text-decoration: none; font: 500 0.875rem var(--font-body); white-space: nowrap; position: relative; }
.localnav a:hover { color: var(--ink); }
.localnav a[aria-current] { color: var(--ink); }
.localnav a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 1px; background: var(--fire); }

.ml-hero { padding: clamp(64px, 9vw, 120px) 0 clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.ml-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 80px); align-items: end; }
.ml-hero h1 { font-size: clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem); line-height: 0.96; font-weight: 360; letter-spacing: -0.028em; font-variation-settings: "opsz" 60; margin: 0 0 28px; }
.ml-hero .lede { font: 380 clamp(1.2rem, 1rem + 0.6vw, 1.5rem)/1.4 var(--font-display); font-variation-settings: "opsz" 24; color: var(--ink-2); max-width: 32ch; margin: 0; }
.plate { position: relative; border: 1px solid var(--line-2); background: var(--bg-2); }
.plate__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(70% 70% at 70% 40%, rgb(157 176 196 / 0.12), transparent 70%), radial-gradient(60% 60% at 10% 100%, rgb(196 132 74 / 0.14), transparent 70%); }
.plate__img img { position: absolute; width: 140%; max-width: none; left: -60%; top: -2%; opacity: 0.85; }
.plate__cap { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line-2); }
.plate__tick { position: absolute; width: 9px; height: 9px; border-color: var(--fire); border-style: solid; border-width: 0; }
.plate__tick--tl { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.plate__tick--tr { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.plate__tick--bl { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.plate__tick--br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

.ml-section { padding: clamp(64px, 8vw, 112px) 0; border-bottom: 1px solid var(--line); }
.ml-section h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.05; font-weight: 380; font-variation-settings: "opsz" 48; letter-spacing: -0.02em; }
.ml-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 80px); }
.ml-cols aside .meta { display: block; margin-top: 14px; }
.about p { font-size: 1.0625rem; max-width: var(--max-prose); }
.about p.first { font: 380 1.375rem/1.45 var(--font-display); font-variation-settings: "opsz" 24; color: var(--ink); }
.about .caveat { max-width: var(--max-prose); }

.dir-table { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.dir-row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1.6fr) minmax(0, 4fr) minmax(0, 3fr); gap: 24px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); transition: background var(--dur-ui); }
.dir-row__id { font: 500 0.75rem var(--font-mono); letter-spacing: 0.08em; color: var(--muted); }
.dir-row h3 { font-size: 1.625rem; font-weight: 420; font-variation-settings: "opsz" 32; line-height: 1.1; }
.dir-row h3 a { color: var(--ink); text-decoration: none; }
.dir-row h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.dir-row h3 a:focus-visible { outline: none; }
.dir-row h3 a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.dir-row p { margin: 0; font-size: 0.975rem; color: var(--ink-2); }
.dir-row__status { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font: 400 0.8125rem var(--font-mono); }
.dir-row__status .tag { font: 500 0.6875rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.dir-row__status .tag::before { content: ""; width: 6px; height: 6px; border: 1px solid var(--silicon); transform: rotate(45deg); }
.dir-row__status .url { color: var(--link); white-space: nowrap; font-size: 0.75rem; }
.dir-row__status a { position: relative; z-index: 2; color: var(--ink-2); }
.dir-row--link:hover { background: linear-gradient(90deg, rgb(230 210 168 / 0.05), transparent 70%); }
.dir-row--link:hover h3 a { color: var(--fire-strong); }
.dir-row--link:hover .url { color: var(--fire-strong); }
.dir-row--weft .tag::before { border-color: var(--weft-link); background: var(--weft-bg); }
.dir-row--weft .url { color: var(--weft-link); }
.dir-row--weft:hover { background: linear-gradient(90deg, transparent 40%, rgb(6 10 18 / 0.9)); box-shadow: inset -2px 0 0 var(--weft-link); }
.dir-row--weft:hover h3 a { color: var(--weft-ink); }
.dir-row--asp { border-bottom-style: dashed; }
.dir-row--asp h3 { color: var(--ink-2); }
.dir-row--asp .tag::before { border-style: dashed; border-color: var(--muted); }
.subhead { margin: 48px 0 0; padding: 14px 0; border-bottom: 1px solid var(--line-2); }

.principle-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.principle-index li { border-bottom: 1px solid var(--line); }
.principle-index li:nth-child(odd) { border-right: 1px solid var(--line); }
.principle-index a { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: baseline; padding: 20px 20px 20px 0; min-height: 64px; text-decoration: none; color: var(--ink); }
.principle-index li:nth-child(even) a { padding-left: 20px; }
.principle-index .n { font: 500 0.8125rem var(--font-mono); color: var(--fire); }
.principle-index .t { font: 420 1.375rem/1.2 var(--font-display); font-variation-settings: "opsz" 28; }
.principle-index .arr { color: var(--muted); transition: transform var(--dur-ui), color var(--dur-ui); }
.principle-index a:hover .t { color: var(--fire-strong); }
.principle-index a:hover .arr { color: var(--fire); transform: translateX(3px); }

/* ==================================================================
   Deeper page template ( /ml/principles/ )
   ================================================================== */
.doc-head { padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink-2); text-decoration: none; font: 500 0.875rem var(--font-body); margin-bottom: 36px; }
.back .arr { color: var(--fire); transition: transform var(--dur-ui); }
.back:hover { color: var(--ink); } .back:hover .arr { transform: translateX(-3px); }
.eyebrow { font: 500 0.75rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fire); margin: 0 0 18px; display: block; }
.doc-head h1 { font-size: clamp(2.75rem, 1.6rem + 4vw, 5.25rem); line-height: 0.98; font-weight: 360; letter-spacing: -0.028em; font-variation-settings: "opsz" 60; margin: 0 0 24px; }
.dek { font: 380 clamp(1.2rem, 1rem + 0.6vw, 1.5rem)/1.42 var(--font-display); font-variation-settings: "opsz" 24; color: var(--ink-2); max-width: 36ch; margin: 0 0 28px; }
.doc { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 80px); padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 8vw, 120px); }
.toc { position: sticky; top: calc(var(--header-h) + 72px); align-self: start; }
.toc ol { list-style: none; margin: 14px 0 0; padding: 0; border-left: 1px solid var(--line-2); }
.toc a { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; min-height: 40px; padding: 8px 0 8px 14px; color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; margin-left: -1px; border-left: 1px solid transparent; }
.toc a .n { font: 500 0.75rem var(--font-mono); color: var(--muted); }
.toc a:hover { color: var(--ink); border-left-color: var(--fire); }
.toc a[aria-current="location"] { color: var(--ink); border-left-color: var(--fire); }
.doc-section { padding: 0 0 clamp(48px, 6vw, 72px); margin-bottom: clamp(48px, 6vw, 72px); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 24px); }
.doc-section:last-of-type { border-bottom: 0; margin-bottom: 0; }
.doc-section .principle__n { margin-bottom: 20px; }
.doc-section h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.05; font-weight: 380; font-variation-settings: "opsz" 48; letter-spacing: -0.02em; margin-bottom: 22px; }
.doc-section p { font: 400 1.25rem/1.6 var(--font-display); font-variation-settings: "opsz" 18; color: var(--ink); max-width: 36rem; }
.doc-src { margin-top: 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .principles, .directions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dir-row { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 2fr); }
  .dir-row__status { grid-column: 2 / -1; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
}
@media (max-width: 860px) {
  .name-grid, .section-head, .eco-intro, .footer-grid, .ml-hero__grid, .ml-cols, .doc { grid-template-columns: minmax(0, 1fr); }
  .doorways { grid-template-columns: minmax(0, 1fr); }
  .hero__fig { display: none; }
  .chamber__crystal { width: 150vw; right: -22vw; top: 40px; transform: none; opacity: 0.5; -webkit-mask-image: radial-gradient(60% 60% at 68% 45%, #000 35%, transparent 80%); mask-image: radial-gradient(60% 60% at 68% 45%, #000 35%, transparent 80%); }
  .chamber__seam { display: none; }
  .chamber__caustic { -webkit-mask-image: radial-gradient(40% 30% at 70% 30%, #000 15%, transparent 100%); mask-image: radial-gradient(40% 30% at 70% 30%, #000 15%, transparent 100%); }
  .toc { position: static; }
  .principle-index { grid-template-columns: minmax(0, 1fr); }
  .principle-index li:nth-child(odd) { border-right: 0; }
  .principle-index li:nth-child(even) a { padding-left: 0; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .principles, .directions { grid-template-columns: minmax(0, 1fr); }
  .principle { min-height: 0; padding: 28px 4px 32px 20px; }
  .principle__n { margin-bottom: 24px; }
  .dcard { min-height: 0; }
  .dcard__status, .badge-asp { margin-bottom: 22px; }
  .door { min-height: 300px; }
  .dir-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dir-row__status { grid-column: auto; }
  .hero__inner { padding-top: calc(var(--header-h) + 40px); }
  .scrollcue { display: none; }
  .note { flex-direction: column; gap: 8px; }
  .constellation { display: none; }
  .dcard__url { white-space: normal; overflow-wrap: anywhere; }
}