:root {
  color-scheme: dark;
  --void: #03080e;
  --deep: #07111b;
  --ink: #0b1722;
  --panel: rgba(8, 17, 27, .58);
  --panel-strong: rgba(11, 23, 34, .76);
  --panel-soft: rgba(19, 31, 43, .48);
  --silver: #b9c1cc;
  --chrome: #7f8b98;
  --off: #edf3f8;
  --muted: rgba(237, 243, 248, .72);
  --dim: rgba(237, 243, 248, .54);
  --line: rgba(196, 211, 224, .18);
  --line-strong: rgba(207, 221, 235, .34);
  --blue: #54caff;
  --blue-deep: #168ee8;
  --copper: #e19a61;
  --copper-dark: #a86443;
  --shadow: rgba(0, 0, 0, .44);
  --page-width: min(1180px, calc(100% - 2rem));
  --font-display: "Segoe UI Variable Display", "Arial Black", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--void); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--off);
  font-family: var(--font-body);
  line-height: 1.58;
  background: var(--void);
  overflow-x: hidden;
}
.fixed-world {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("assets/brand/cogg9-machine-core-fixed-bg.png");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  background-attachment: fixed;
  transform: translateZ(0);
}
.fixed-world::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 78% 42%, rgba(84, 202, 255, .09), transparent 38%),
    radial-gradient(ellipse at 75% 61%, rgba(225, 154, 97, .065), transparent 34%),
    linear-gradient(90deg, rgba(3,8,14,.90) 0%, rgba(3,8,14,.72) 23%, rgba(3,8,14,.29) 53%, rgba(3,8,14,.06) 100%),
    linear-gradient(180deg, rgba(3,8,14,.24) 0%, rgba(3,8,14,.04) 42%, rgba(3,8,14,.56) 100%);
}
.fixed-world::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(84,202,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84,202,255,.028) 1px, transparent 1px),
    radial-gradient(circle at 76% 48%, transparent 0 18%, rgba(84,202,255,.07) 18.15% 18.3%, transparent 18.45% 27%, rgba(225,154,97,.055) 27.15% 27.35%, transparent 27.5% 100%),
    repeating-linear-gradient(0deg, rgba(237,243,248,.022) 0 1px, transparent 1px 5px);
  background-size: 96px 96px, 96px 96px, 100% 100%, 100% 100%;
  opacity: .62;
  mask-image: linear-gradient(90deg, transparent, black 30%, black);
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.04em; }
h1 { max-width: 720px; margin-bottom: 1.1rem; font-size: clamp(2.8rem, 5.25vw, 6.35rem); line-height: .98; }
h2 { margin-bottom: 1rem; font-size: clamp(2.05rem, 3.85vw, 4.35rem); line-height: 1.03; }
h3 { margin-bottom: .75rem; font-size: clamp(1.35rem, 1.8vw, 1.85rem); line-height: 1.08; }
p { color: var(--muted); }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0 clamp(1rem, 4vw, 3.5rem);
  background: linear-gradient(180deg, rgba(3,8,14,.86), rgba(3,8,14,.38));
  border-bottom: 1px solid rgba(196,211,224,.13);
  backdrop-filter: blur(18px) saturate(130%);
}
.brand { display: flex; align-items: center; width: 330px; height: 64px; overflow: hidden; }
.brand img { height: 66px; width: auto; display: block; filter: drop-shadow(0 8px 18px rgba(0,0,0,.52)); }
.site-header nav { display: flex; align-items: center; gap: clamp(.7rem, 1.55vw, 1.35rem); color: rgba(237,243,248,.78); font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; }
.site-header nav a { position: relative; padding: .55rem 0; }
.site-header nav a::after { content:""; position:absolute; left:0; right:100%; bottom:.18rem; height:1px; background:linear-gradient(90deg,var(--copper),var(--blue)); transition:right .18s ease; }
.site-header nav a:hover { color: var(--off); }
.site-header nav a:hover::after { right: 0; }

main, footer { position: relative; z-index: 1; }
.content-block {
  width: var(--page-width);
  margin: 0 auto;
  padding: clamp(3.5rem, 7vh, 5.75rem) 0;
  display: grid;
  gap: clamp(1rem, 2vw, 1.45rem);
}
.hero-block { min-height: 100svh; padding-top: 8.5rem; align-content: center; }
.split-block { grid-template-columns: minmax(0, .76fr) minmax(320px, .68fr); align-items: center; }
.module-block { min-height: 54vh; align-content: center; }
.align-left { justify-items: start; }
.align-right { justify-items: end; }
.align-center { justify-items: center; }

.art-reveal {
  position: relative;
  z-index: 1;
  width: var(--page-width);
  min-height: clamp(35vh, 48vh, 70vh);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: end;
  pointer-events: none;
}
.art-reveal::before,
.art-reveal::after { content: ""; position: absolute; pointer-events: none; }
.art-reveal::before {
  right: clamp(.5rem, 4vw, 3rem);
  top: 50%;
  width: min(380px, 42vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(84,202,255,.44), rgba(225,154,97,.38), transparent);
  box-shadow: 0 0 28px rgba(84,202,255,.16);
}
.art-reveal::after {
  right: clamp(.5rem, 4vw, 3rem);
  top: calc(50% - 42px);
  width: 84px;
  height: 84px;
  border-top: 1px solid rgba(84,202,255,.42);
  border-right: 1px solid rgba(225,154,97,.32);
  opacity: .76;
}
.art-reveal span {
  margin-right: clamp(.5rem, 4vw, 3rem);
  padding: .42rem .7rem;
  border: 1px solid rgba(196,211,224,.14);
  background: rgba(3,8,14,.22);
  color: rgba(237,243,248,.50);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.reveal-hero { min-height: 44vh; }
.reveal-research-hms { min-height: 54vh; }
.reveal-hms-plastic { min-height: 62vh; }
.reveal-plastic-research { min-height: 50vh; }
.reveal-before-ledger { min-height: 46vh; }
.reveal-ledger-local { min-height: 42vh; }
.reveal-before-support { min-height: 56vh; }

.panel {
  position: relative;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 24%),
    linear-gradient(180deg, var(--panel), rgba(5,12,20,.52));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(84,202,255,.032),
    0 24px 78px var(--shadow),
    0 0 40px rgba(84,202,255,.04);
  backdrop-filter: blur(16px) saturate(122%);
  border-radius: 30px;
  overflow: hidden;
}
.panel::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(225,154,97,.42), transparent 18%, transparent 80%, rgba(84,202,255,.34)),
    linear-gradient(180deg, rgba(255,255,255,.075), transparent 36%);
  opacity:.16;
}
.panel::after {
  content:"";
  position:absolute;
  inset:auto 1.35rem 1.1rem 1.35rem;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(84,202,255,.38), rgba(225,154,97,.24), transparent);
  opacity:.5;
}
.narrow-panel { width: min(660px, 58vw); }
.compact-panel { width: min(590px, 100%); }
.medium-panel { width: min(850px, 74vw); }
.feature-panel { width: min(620px, 58vw); }
.hero-panel {
  padding: clamp(1.35rem, 3.4vw, 2.85rem);
  background:
    radial-gradient(circle at 100% 0%, rgba(84,202,255,.13), transparent 32%),
    linear-gradient(135deg, rgba(11,23,34,.82), rgba(5,12,20,.56));
}
.lead-panel, .copy-panel, .section-panel, .ledger-panel, .local-panel, .support-panel, .contact-panel { padding: clamp(1.25rem, 3vw, 2.65rem); }
.copy-panel { font-size: clamp(1rem, 1.25vw, 1.12rem); }
.copy-panel p:last-child, .panel p:last-child { margin-bottom: 0; }

.eyebrow, .section-kicker {
  display: block;
  margin-bottom: .85rem;
  color: var(--copper);
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-copy { max-width: 590px; color: rgba(237,243,248,.84); font-size: clamp(1.04rem, 1.35vw, 1.2rem); }
.cta-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-weight: 800;
  letter-spacing: .01em;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.button.primary { color: #120905; background: linear-gradient(180deg, #f0b083, var(--copper)); box-shadow: 0 18px 46px rgba(225,154,97,.18), inset 0 1px 0 rgba(255,255,255,.36); }
.button.secondary { color: var(--off); background: rgba(4,12,20,.38); border-color: rgba(84,202,255,.34); }
.button:hover { transform: translateY(-1px); border-color: rgba(84,202,255,.62); box-shadow: 0 20px 58px rgba(0,0,0,.28), 0 0 28px rgba(84,202,255,.08); }
.text-link { display:inline-flex; width:max-content; margin-top:1rem; color:var(--blue); font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid rgba(84,202,255,.32); padding-bottom:.18rem; }
.text-link:hover { color:var(--off); border-color:var(--copper); }
.click-card,
.click-slide {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.click-card:hover,
.click-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(84,202,255,.54);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(84,202,255,.055),
    0 30px 90px rgba(0,0,0,.52),
    0 0 42px rgba(84,202,255,.12);
}
.click-slide:hover .click-card-part,
.click-slide:focus-visible .click-card-part {
  transform: translateY(-4px);
  border-color: rgba(84,202,255,.54);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 30px 90px rgba(0,0,0,.48),
    0 0 42px rgba(84,202,255,.10);
}
.click-card:focus-visible,
.click-slide:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 7px;
}
.click-card:hover .card-cue,
.click-card:focus-visible .card-cue,
.click-slide:hover .card-cue,
.click-slide:focus-visible .card-cue {
  color: var(--off);
  border-color: var(--copper);
}
.click-card:hover .card-cue::after,
.click-card:focus-visible .card-cue::after,
.click-slide:hover .card-cue::after,
.click-slide:focus-visible .card-cue::after {
  content: "";
  width: .35rem;
}
.click-card-part { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.status-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.65rem; }
.status-row span, .chip-list li {
  border: 1px solid rgba(196,211,224,.17);
  background: rgba(3,8,14,.38);
  color: rgba(237,243,248,.72);
  border-radius: 999px;
  font-size: .86rem;
}
.status-row span { padding: .46rem .66rem; }

.panel-grid { display: grid; gap: clamp(.9rem, 1.7vw, 1.25rem); }
.four-up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.reduced-grid { width: min(1080px, 100%); }
.module-panel { min-height: 360px; padding: clamp(1.25rem, 3vw, 2.25rem); }
.module-top { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: clamp(2rem, 6vw, 3.8rem); color: var(--chrome); font-family: var(--font-mono); font-size: .78rem; }
.module-top span { color: var(--copper); }
.module-top em { color: var(--blue); font-style: normal; text-align: right; }
.big-line { color: var(--off); font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.25; letter-spacing: -.025em; }
.chip-list { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.25rem 0 0; list-style: none; }
.chip-list li { padding: .42rem .62rem; color: var(--silver); }
.mini-panel { min-height: 205px; padding: 1.1rem; }
.mini-panel > span { color: var(--blue); font-family: var(--font-mono); font-size: .72rem; }
.ledger-panel::before { content: "LAB EVIDENCE CONSOLE"; position:absolute; top:1.15rem; right:1.5rem; color:rgba(84,202,255,.42); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; background:none; opacity:1; }
.ledger-list { display: grid; gap: .75rem; margin-top: 1.6rem; }
.ledger-list div { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; padding: .85rem 0; border-top: 1px solid rgba(196,211,224,.13); }
.ledger-list b { color: var(--copper); }
.ledger-list span { color: var(--muted); }
.local-panel p { max-width: 720px; }
.local-list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .65rem; padding: 0; margin: 1.8rem 0 0; list-style: none; }
.local-list li { border: 1px solid rgba(196,211,224,.15); padding: .85rem; border-radius: 16px; background: rgba(3,8,14,.34); color: rgba(237,243,248,.82); }
.support-block { gap: 1px; padding-bottom: 2.5rem; }
.support-panel, .contact-panel { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.contact-panel { background: linear-gradient(135deg, rgba(19,31,43,.64), rgba(5,12,20,.58)); }
.support-panel > div, .contact-panel > div { max-width: 660px; }
.footer-panel {
  width: var(--page-width);
  margin: 0 auto 2rem;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  color: rgba(237,243,248,.60);
  border-radius: 24px;
}
.footer-brand { display: flex; align-items: center; gap: .75rem; }
.footer-brand img { border-radius: 10px; }
.footer-brand strong { color: var(--off); letter-spacing: .08em; }
.footer-brand p { margin: .1rem 0 0; }
footer nav { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
footer a:hover { color: var(--blue); }
.disclaimer { grid-column: 1 / -1; margin: 0; color: rgba(237,243,248,.46); font-size: .9rem; }

/* Detail / project pages */
.detail-page .fixed-world::before { background: linear-gradient(90deg, rgba(3,8,14,.94), rgba(3,8,14,.72) 42%, rgba(3,8,14,.34)), linear-gradient(180deg, rgba(3,8,14,.22), rgba(3,8,14,.72)); }
.article-shell { width: var(--page-width); margin: 0 auto; padding: 9.5rem 0 4rem; }
.project-article { display:grid; gap:1.25rem; }
.back-link { width:max-content; color:rgba(237,243,248,.68); font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em; }
.back-link:hover { color:var(--blue); }
.article-hero { padding:clamp(1.5rem,4vw,3.4rem); max-width:940px; }
.article-hero h1 { font-size:clamp(2.4rem,5.2vw,5.1rem); margin-bottom:.8rem; line-height:1.02; }
.article-summary { max-width:760px; color:rgba(237,243,248,.84); font-size:clamp(1.08rem,1.8vw,1.42rem); }
.article-meta { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.4rem; }
.article-meta span { border:1px solid rgba(196,211,224,.17); background:rgba(3,8,14,.38); color:rgba(237,243,248,.72); border-radius:999px; padding:.45rem .68rem; font-size:.84rem; }
.article-layout { display:grid; grid-template-columns:220px minmax(0, 1fr); gap:1.25rem; align-items:start; }
.article-toc { position:sticky; top:96px; padding:1rem; display:grid; gap:.55rem; }
.article-toc a { color:rgba(237,243,248,.68); font-family:var(--font-mono); font-size:.74rem; letter-spacing:.05em; padding:.3rem 0; border-bottom:1px solid rgba(196,211,224,.10); }
.article-toc a:hover { color:var(--blue); }
.article-stack { display:grid; gap:1.25rem; max-width:900px; }
.article-simple { max-width:900px; }
.article-section { padding:clamp(1.25rem,3vw,2.4rem); }
.article-section h2 { font-size:clamp(1.8rem,3.2vw,3.15rem); }
.article-section p, .article-section li { color:rgba(237,243,248,.74); }
.article-section ul { margin:0; padding-left:1.2rem; }
.article-grid, .ledger-state-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.ledger-state-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.concept-card { padding:1.15rem; min-height:180px; }
.concept-card h3 { font-size:1.25rem; }
.hud-divider {
  position: relative;
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: .8rem;
  color: rgba(237,243,248,.42);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hud-divider::before,
.hud-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(84,202,255,.42), rgba(225,154,97,.26), transparent);
  box-shadow: 0 0 18px rgba(84,202,255,.12);
}
.concept-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.concept-strip.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.concept-chip-panel {
  padding:1rem;
  min-height:118px;
  border-radius:20px;
}
.concept-chip-panel span {
  color: var(--copper);
  font-family: var(--font-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.concept-chip-panel strong { display:block; margin:.45rem 0 .3rem; color:var(--off); font-size:1.05rem; }
.concept-chip-panel p { margin:0; color:rgba(237,243,248,.65); font-size:.92rem; line-height:1.45; }
.callout {
  position: relative;
  margin: 1.2rem 0 0;
  padding: .95rem 1rem .95rem 1.1rem;
  border-left: 2px solid var(--blue);
  border-radius: 0 16px 16px 0;
  background: linear-gradient(90deg, rgba(84,202,255,.105), rgba(3,8,14,.22));
  color: rgba(237,243,248,.82) !important;
}
.callout b { color: var(--blue); }
.pull-quote {
  padding: clamp(1.1rem, 2.7vw, 2rem);
  border-color: rgba(225,154,97,.30);
  background:
    radial-gradient(circle at 0% 0%, rgba(225,154,97,.10), transparent 38%),
    linear-gradient(135deg, rgba(20,24,28,.70), rgba(5,12,20,.54));
}
.pull-quote blockquote {
  margin:0;
  color: var(--off);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.65rem);
  line-height:1.12;
  letter-spacing:-.04em;
}
.pull-quote span {
  display:block;
  margin-top:1rem;
  color:rgba(237,243,248,.50);
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.caution-panel { border-color:rgba(225,154,97,.28); background:linear-gradient(135deg, rgba(225,154,97,.08), rgba(5,12,20,.58)); }
.related-panel { padding:clamp(1.25rem,3vw,2.2rem); }
.related-panel h2 { font-size:clamp(1.7rem,2.8vw,2.8rem); }
.related-links { display:flex; flex-wrap:wrap; gap:.75rem; }
.related-links a { border:1px solid rgba(84,202,255,.30); background:rgba(3,8,14,.36); border-radius:999px; padding:.7rem .95rem; color:rgba(237,243,248,.82); font-weight:700; }
.related-links a:hover { border-color:var(--copper); color:var(--off); }
.pathway-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.85rem; }
.pathway-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pathway-card {
  display:block;
  min-height:150px;
  padding:1rem;
  border:1px solid rgba(84,202,255,.22);
  border-radius:20px;
  background:linear-gradient(135deg, rgba(84,202,255,.055), rgba(3,8,14,.34));
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pathway-card span { color:var(--copper); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; }
.pathway-card strong { display:block; margin:.45rem 0 .35rem; color:var(--off); font-size:1.15rem; }
.pathway-card p { margin:0; color:rgba(237,243,248,.65); font-size:.92rem; line-height:1.45; }
.pathway-card:hover, .pathway-card:focus-visible { transform:translateY(-3px); border-color:rgba(84,202,255,.62); box-shadow:0 18px 44px rgba(0,0,0,.28), 0 0 28px rgba(84,202,255,.10); outline:none; }
.faq-list { display:grid; gap:.75rem; }
.faq-list details {
  border:1px solid rgba(196,211,224,.14);
  border-radius:18px;
  background:rgba(3,8,14,.30);
  padding:.9rem 1rem;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.faq-list details:hover { border-color:rgba(84,202,255,.36); background:rgba(3,8,14,.46); transform:translateY(-1px); }
.faq-list summary {
  cursor:pointer;
  color:var(--off);
  font-weight:800;
}
.faq-list summary:focus-visible { outline:2px solid var(--blue); outline-offset:4px; border-radius:8px; }
.faq-list p { margin:.7rem 0 0; }

.project-avatar {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  isolation: isolate;
}
.project-avatar::before,
.project-avatar::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 999px;
  pointer-events: none;
}
.project-avatar::before {
  background:
    radial-gradient(circle at 50% 44%, rgba(84,202,255,.18), transparent 52%),
    conic-gradient(from 18deg, rgba(225,154,97,.52), rgba(84,202,255,.40), transparent 34%, rgba(225,154,97,.42), rgba(84,202,255,.32), rgba(225,154,97,.52));
  filter: blur(8px);
  opacity: .58;
  z-index: -2;
}
.project-avatar::after {
  border: 1px solid rgba(84,202,255,.34);
  box-shadow:
    inset 0 0 20px rgba(84,202,255,.10),
    0 0 34px rgba(84,202,255,.12),
    0 0 18px rgba(225,154,97,.09);
  z-index: 2;
}
.project-avatar img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 999px;
  border: 1px solid rgba(225,154,97,.28);
  background:
    radial-gradient(circle at 50% 30%, rgba(84,202,255,.18), transparent 55%),
    rgba(3,8,14,.46);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 18px 44px rgba(0,0,0,.38),
    0 0 28px rgba(84,202,255,.12);
}
.avatar-orbit::after { animation: avatarPulse 5.6s ease-in-out infinite; }
@keyframes avatarPulse {
  0%, 100% { opacity:.68; transform:scale(1); }
  50% { opacity:.98; transform:scale(1.025); }
}
.project-avatar figcaption {
  margin-top: .65rem;
  color: rgba(237,243,248,.58);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}
.has-project-avatar { overflow: hidden; }
.home-card-avatar {
  position: absolute;
  top: clamp(.85rem, 2vw, 1.25rem);
  right: clamp(.85rem, 2vw, 1.35rem);
  width: clamp(118px, 15vw, 184px);
  opacity: .94;
  transform: rotate(1deg);
}
.module-panel.has-project-avatar { padding-right: clamp(1.25rem, 20vw, 14rem); }
.wave-lead-card.has-project-avatar { min-height: 286px; padding-right: clamp(1.25rem, 20vw, 14rem); }
.click-card:hover .home-card-avatar,
.click-card:focus-visible .home-card-avatar,
.click-slide:hover .home-card-avatar,
.click-slide:focus-visible .home-card-avatar {
  transform: translateY(-5px) rotate(0deg) scale(1.025);
}
.home-card-avatar,
.project-page-avatar,
.faq-avatar { transition: transform .22s ease, filter .22s ease, opacity .22s ease; }
.project-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 255px);
  align-items: center;
  gap: clamp(1rem, 3vw, 2.25rem);
}
.project-hero-copy { min-width: 0; }
.project-page-avatar { width: min(255px, 24vw); justify-self: center; }
.project-avatar--hms img { object-position: 50% 48%; }
.project-avatar--plasticnode img { object-position: 50% 46%; }
.project-avatar--wavecodec img { object-position: 50% 46%; }
.project-avatar--hms::before { background: radial-gradient(circle at 48% 42%, rgba(84,202,255,.28), transparent 54%), conic-gradient(from 28deg, rgba(225,154,97,.54), rgba(84,202,255,.44), transparent 40%, rgba(225,154,97,.44)); }
.project-avatar--plasticnode::before { background: radial-gradient(circle at 48% 42%, rgba(84,202,255,.24), transparent 54%), conic-gradient(from 115deg, rgba(225,154,97,.56), rgba(84,202,255,.38), transparent 34%, rgba(225,154,97,.36)); }
.project-avatar--wavecodec::before { background: radial-gradient(circle at 48% 42%, rgba(84,202,255,.34), transparent 54%), conic-gradient(from 210deg, rgba(84,202,255,.58), rgba(225,154,97,.42), transparent 38%, rgba(84,202,255,.44)); }
.faq-panel-with-avatar { display: grid; gap: 1rem; }
.faq-avatar-guide {
  display: flex;
  align-items: center;
  gap: .95rem;
  padding: .75rem .85rem;
  border: 1px solid rgba(84,202,255,.22);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0% 50%, rgba(84,202,255,.11), transparent 42%),
    linear-gradient(135deg, rgba(3,8,14,.38), rgba(11,23,34,.42));
}
.faq-avatar { width: clamp(76px, 12vw, 112px); flex: 0 0 auto; }
.faq-avatar-guide span {
  display:block;
  color: var(--copper);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.faq-avatar-guide p { margin: .15rem 0 0; color: rgba(237,243,248,.86); font-size: clamp(1.02rem, 1.4vw, 1.18rem); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
@supports not (backdrop-filter: blur(8px)) {
  .panel, .site-header { background-color: rgba(8,17,27,.86); }
}
@media (max-width: 1100px) {
  :root { --page-width: min(100% - 1.25rem, 980px); }
  h1 { font-size: clamp(2.65rem, 7vw, 5.25rem); }
  h2 { font-size: clamp(2rem, 5vw, 3.6rem); }
  .fixed-world::before { background: linear-gradient(90deg, rgba(3,8,14,.92), rgba(3,8,14,.58) 62%, rgba(3,8,14,.24)), linear-gradient(180deg, rgba(3,8,14,.24), rgba(3,8,14,.62)); }
  .split-block { grid-template-columns: 1fr; max-width: 760px; }
  .narrow-panel, .compact-panel, .medium-panel, .feature-panel { width: min(680px, 72vw); }
  .four-up { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .local-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .art-reveal { min-height: clamp(30vh, 42vh, 55vh); }
  .reveal-hms-plastic, .reveal-before-support { min-height: 50vh; }
  .article-layout { grid-template-columns:1fr; }
  .article-toc { position:relative; top:auto; display:flex; flex-wrap:wrap; }
  .article-grid { grid-template-columns:1fr; }
  .concept-strip, .concept-strip.four, .pathway-grid, .pathway-grid.two { grid-template-columns:1fr; }
  .project-hero-grid { grid-template-columns:minmax(0, 1fr) minmax(150px, 210px); }
  .project-page-avatar { width:min(210px, 26vw); }
}
@media (max-width: 780px) {
  :root { --page-width: min(100% - .9rem, 720px); }
  .fixed-world { background-attachment: scroll; background-position: 67% center; }
  .fixed-world::before { background: linear-gradient(90deg, rgba(3,8,14,.91), rgba(3,8,14,.70)), linear-gradient(180deg, rgba(3,8,14,.22), rgba(3,8,14,.62)); }
  .fixed-world::after { opacity: .42; }
  .site-header { position: absolute; align-items: flex-start; padding-top: 1rem; padding-bottom: 1rem; }
  .brand { width: 250px; }
  .brand img { height: 56px; }
  .site-header nav { justify-content:flex-end; flex-wrap:wrap; gap:.45rem .75rem; font-size:.70rem; }
  .content-block { padding: 3rem 0; }
  .hero-block { min-height: auto; padding-top: 11.5rem; }
  .module-block { min-height: auto; }
  .align-right, .align-left { justify-items: start; }
  .narrow-panel, .compact-panel, .medium-panel, .feature-panel { width: min(100%, 680px); }
  .four-up, .ledger-state-grid { grid-template-columns: 1fr; }
  .module-panel, .mini-panel { min-height: auto; }
  .support-panel, .contact-panel { display: grid; align-items: start; }
  .footer-panel { grid-template-columns: 1fr; }
  .art-reveal { min-height: clamp(24vh, 32vh, 40vh); justify-content: end; }
  .art-reveal span { font-size: .6rem; opacity: .72; }
  .article-shell { padding-top:11.5rem; }
  .project-hero-grid { grid-template-columns:1fr; }
  .project-page-avatar { width:min(210px, 72vw); justify-self:start; }
  .module-panel.has-project-avatar, .wave-lead-card.has-project-avatar { padding-right:1.15rem; padding-top:clamp(8.5rem, 34vw, 12rem); }
  .home-card-avatar { width:clamp(112px, 30vw, 156px); left:1.15rem; right:auto; top:1rem; }
  .faq-avatar-guide { align-items:flex-start; }
}
@media (max-width: 520px) {
  :root { --page-width: min(100% - .75rem, 480px); }
  .fixed-world::before { background: linear-gradient(90deg, rgba(3,8,14,.91), rgba(3,8,14,.78)), linear-gradient(180deg, rgba(3,8,14,.34), rgba(3,8,14,.70)); }
  .site-header { display: grid; grid-template-columns: 1fr; gap: .4rem; }
  .site-header nav { justify-content: flex-start; }
  .brand { width: 220px; }
  .brand img { height: 50px; }
  .hero-block { padding-top: 12rem; }
  .panel { border-radius: 22px; }
  .hero-panel, .lead-panel, .copy-panel, .section-panel, .ledger-panel, .local-panel, .support-panel, .contact-panel, .article-hero, .article-section, .related-panel { padding: 1.15rem; }
  h1 { font-size: clamp(2.25rem, 10vw, 3.25rem); }
  h2 { font-size: clamp(1.9rem, 8vw, 2.7rem); }
  .button { width: 100%; }
  .status-row span { font-size: .78rem; }
  .ledger-panel::before { display: none; }
  .ledger-list div { grid-template-columns: 1fr; gap: .15rem; }
  .local-list { grid-template-columns: 1fr; }
  .art-reveal { min-height: clamp(16vh, 22vh, 28vh); }
  .art-reveal::before { width: 56vw; }
  .art-reveal span { display: none; }
  .article-shell { padding-top:12rem; }
  .article-meta span, .related-links a { width:100%; }
  .home-card-avatar { width:116px; }
  .module-panel.has-project-avatar, .wave-lead-card.has-project-avatar { padding-top:8.4rem; }
  .faq-avatar-guide { display:grid; grid-template-columns:auto 1fr; gap:.75rem; }
  .faq-avatar { width:72px; }
}