/* tastemaker · macrostructure: Long-Scroll Narrative · mood: technical/playful · page: site
 * arc: hook(H1) -> stakes(F6) -> mechanism(F1) -> how(F4) -> proof(log) -> close(C2)
 * nav: N1 (earned: two destinations) · hero: H1 · footer: Ft2 · knobs: hero=left-bias/system-window/ambient-mark
 * palette: existing SAO night/amber/cyan · contrast: pass (matrix)
 * critique: ShowTell 4 · Phil 5 · Hier 5 · Spec 5 · Restr 4 · Var 5 */

@font-face { font-family: "SAOUI"; src: url("saoui-regular.0fe80b87b2.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "SAOUI"; src: url("saoui-bold.77ff8913e9.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("rajdhani-500.e55b84ff3e.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("rajdhani-600.27826a81a2.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("rajdhani-700.f1a889cab0.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("source-sans-400-600.ef966fe9c3.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("source-sans-italic-400.7b93c09398.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;
  --color-bg: #070b13;
  --color-surface: #0b1220;
  --color-surface-raised: #111b2b;
  --color-text: #e3ebf5;
  --color-muted: #8b9bb0;
  --color-muted-deep: #60748e;
  --color-primary: #f2a340;
  --color-primary-hover: #ffbb5e;
  --color-on-primary: #14100a;
  --color-accent: #5cc4f0;
  --color-glass-faint: rgba(230, 240, 252, 0.04);
  --color-glass: rgba(230, 240, 252, 0.06);
  --color-glass-strong: rgba(230, 240, 252, 0.1);
  --color-line: rgba(168, 196, 226, 0.18);
  --color-line-soft: rgba(168, 196, 226, 0.1);
  --color-primary-line: rgba(242, 163, 64, 0.36);
  --color-primary-wash: rgba(242, 163, 64, 0.08);
  --color-accent-wash: rgba(92, 196, 240, 0.08);
  --color-nav-solid: rgba(7, 11, 19, 0.94);
  --color-nav-fade: rgba(7, 11, 19, 0.76);
  --color-shadow: rgba(0, 0, 0, 0.42);
  --color-backdrop-solid: rgba(7, 11, 19, 0.97);
  --color-backdrop-mid: rgba(7, 11, 19, 0.84);
  --color-backdrop-clear: rgba(7, 11, 19, 0.34);
  --font-display: "SAOUI", "Rajdhani", sans-serif;
  --font-ui: "Rajdhani", sans-serif;
  --font-body: "Source Sans 3", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;
  --radius-control: 3px;
  --radius-panel: 10px;
  --shadow-panel: 0 32px 96px var(--color-shadow);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-story: cubic-bezier(0.77, 0, 0.175, 1);
  --duration-press: 120ms;
  --duration-panel: 240ms;
  --duration-story: 280ms;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: var(--color-primary-wash);
}
img { display: block; max-width: 100%; height: auto; }
a, button { touch-action: manipulation; }
a { color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
main:focus { outline: none; }
main:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  transform: translateY(calc(-100% - var(--space-4)));
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}
.skip-link:focus { transform: translateY(0); }
.wrap { width: min(100% - var(--space-12), 1060px); margin-inline: auto; }
h1, h2, h3 {
  color: var(--color-text);
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
h2 {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.35rem);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
p { text-wrap: pretty; }
.eyebrow, .section-index, .ledger-label, .ledger-state, .route-scope, .process-output, .nav-mark, .nav-links, .sys-head, .hero-tag, .btn, .feed-link, .log-signal, .route-state {
  font-family: var(--font-ui);
  text-transform: uppercase;
}
.eyebrow, .section-index, .sys-head { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.2em; }
.section-index { color: var(--color-primary); }
.section-lead { max-width: 720px; }
.section-lead h2, .section-lead > p:last-child { margin-top: var(--space-6); }
.section-lead > p:last-child { max-width: 56ch; color: var(--color-muted); font-size: 1.05rem; }
.section-lead-sticky { align-self: start; position: sticky; top: var(--space-24); }
.section { padding-block: var(--space-24); scroll-margin-top: var(--space-24); }
.section-pivotal { padding-block: var(--space-32); }
.section-alt { background: var(--color-surface); border-block: 1px solid var(--color-line-soft); }

/* Navigation */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: var(--space-1) var(--space-8);
  border-bottom: 1px solid transparent;
  background: linear-gradient(var(--color-nav-solid), var(--color-nav-fade) 70%, transparent);
  transition: background-color var(--duration-panel) var(--ease-out), border-color var(--duration-panel) var(--ease-out);
}
.nav.is-scrolled { border-bottom-color: var(--color-line-soft); background: var(--color-nav-solid); backdrop-filter: blur(10px); }
.nav-mark {
  display: flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  gap: var(--space-3);
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  white-space: nowrap;
}
.nav-mark em { color: var(--color-muted); font-style: normal; }
.nav-nvg {
  width: 43px;
  height: 16px;
  flex: 0 0 auto;
  background-image: url("data:image/png;base64,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");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: invert(0.9);
  opacity: 0.85;
}
.nav-links { display: flex; align-items: center; gap: var(--space-6); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.1em; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding-inline: var(--space-1);
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-press) var(--ease-out);
}
.nav-links a[aria-current="page"] { color: var(--color-text); }

/* Hero */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 92vh;
  min-height: 92svh;
  overflow: clip;
  padding-block: var(--space-32) var(--space-24);
  background: radial-gradient(ellipse at 74% 35%, var(--color-accent-wash), transparent 46%), var(--color-bg);
}
.hero-circle { position: absolute; inset: 0 -22% 0 34%; display: grid; place-items: center; pointer-events: none; }
.hero-circle img { width: min(116vmin, 980px); opacity: 0.16; animation: spin 140s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-wrap { position: relative; z-index: 1; }
.hero-inner { max-width: 720px; animation: hero-enter var(--duration-story) var(--ease-out) both; }
@keyframes hero-enter {
  from { opacity: 0.01; transform: translateY(var(--space-3)); }
}
.sys-window { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-panel); background: var(--color-glass-strong); box-shadow: var(--shadow-panel); }
.hero-inner.sys-window { padding: 0 var(--space-12) var(--space-12); backdrop-filter: blur(12px); }
.sys-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-inline: calc(var(--space-12) * -1);
  margin-bottom: var(--space-12);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-glass);
  color: var(--color-text);
}
.sys-head span:last-child { color: var(--color-muted); letter-spacing: 0.12em; }
.hero-title {
  max-width: 11ch;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 8vw, 6rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 0 50px var(--color-glass-strong);
}
.hero-tag { margin-top: var(--space-6); color: var(--color-muted); font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 500; letter-spacing: 0.03em; text-transform: none; }
.hero-tag strong { color: var(--color-text); font-weight: 700; }
.hero-copy { max-width: 55ch; margin-top: var(--space-4); color: var(--color-muted); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin-top: var(--space-8); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--duration-press) var(--ease-out), background-color var(--duration-press) var(--ease-out), color var(--duration-press) var(--ease-out), border-color var(--duration-press) var(--ease-out);
}
.btn-solid { background: var(--color-primary); color: var(--color-on-primary); }
.btn-ghost { border-color: var(--color-line); color: var(--color-text); }
.landing-link, .text-action, .page-back, .to-top, .feed-link, .roster-join, .section-strip a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-muted);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--duration-press) var(--ease-out), transform var(--duration-press) var(--ease-out);
}
.text-action { color: var(--color-accent); }
.text-action span, .roster-join span { margin-left: var(--space-2); }

/* Production ledger */
.production-grid, .process-grid, .roadmap-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: var(--space-16);
  align-items: start;
}
.floor-ledger {
  position: relative;
  margin-right: calc(var(--space-16) * -1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.floor-ledger::before {
  content: "";
  position: absolute;
  top: 104px;
  bottom: 104px;
  left: 58px;
  width: 1px;
  background: var(--color-primary);
  transform: scaleY(0.02);
  transform-origin: top;
  transition: transform var(--duration-story) var(--ease-story);
}
.floor-ledger.is-active::before { transform: scaleY(1); }
.ledger-head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-6); padding: var(--space-8); border-bottom: 1px solid var(--color-line); background: var(--color-glass-faint); }
.ledger-head h3 { margin-top: var(--space-1); font-size: 1.4rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ledger-label, .ledger-state, .route-scope, .process-output { color: var(--color-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; }
.ledger-state { flex: 0 0 auto; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-primary-line); color: var(--color-primary); }
.floor-route { list-style: none; padding: var(--space-4) var(--space-8); }
.floor-route li {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  min-height: 112px;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-line-soft);
}
.floor-route li:last-child { border-bottom: 0; }
.route-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-surface-raised);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}
.floor-route strong, .floor-route div span { display: block; }
.floor-route strong { font-family: var(--font-ui); font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; }
.floor-route div span { margin-top: var(--space-1); color: var(--color-muted); }
.route-scope { color: var(--color-accent); white-space: nowrap; }
.route-return .route-node { border-color: var(--color-primary-line); background: var(--color-primary-wash); }
.floor-ledger figcaption { padding: var(--space-4) var(--space-8); border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: 0.9rem; }

/* Recruiting roster */
#recruit .section-lead { max-width: 780px; }
.roster { list-style: none; margin-top: var(--space-12); padding: 0; border-top: 1px solid var(--color-line); }
.roster li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-8); padding-block: var(--space-6); border-bottom: 1px solid var(--color-line-soft); }
.roster-role { grid-column: 1; font-family: var(--font-ui); font-size: 1.2rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.roster-need { grid-column: 1; max-width: 60ch; color: var(--color-muted); }
.roster-terms {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  color: var(--color-muted);
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.roster-terms.is-paid { border-color: var(--color-primary-line); color: var(--color-primary); }
.roster-join { grid-column: 2; grid-row: 2; justify-self: end; align-self: end; color: var(--color-accent); }
.join-status { max-width: 64ch; margin-top: var(--space-8); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line); border-left: 2px solid var(--color-primary); border-radius: var(--radius-control); background: var(--color-glass); }
.join-status[hidden] { display: none; }

/* Contribution process */
.process-flow { list-style: none; padding: 0; border-top: 1px solid var(--color-line); }
.process-flow li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-6); align-items: start; padding-block: var(--space-8); border-bottom: 1px solid var(--color-line-soft); }
.process-number { color: var(--color-muted-deep); font-family: var(--font-display); font-size: 1.5rem; line-height: 1; }
.process-flow h3 { font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase; }
.process-flow p { max-width: 48ch; margin-top: var(--space-2); color: var(--color-muted); }
.process-output { color: var(--color-primary); }

/* Proof and close */
.transmission { display: grid; grid-template-columns: 0.7fr minmax(0, 1.3fr); gap: var(--space-16); align-items: center; }
.transmission-number { color: var(--color-primary); font-family: var(--font-display); font-size: clamp(6rem, 18vw, 13rem); line-height: 0.75; letter-spacing: -0.02em; opacity: 0.75; }
.transmission-copy h2 { margin-top: var(--space-4); }
.transmission-copy > p:not(.log-signal) { max-width: 52ch; margin-top: var(--space-6); color: var(--color-muted); }
.transmission-copy .text-action { margin-top: var(--space-6); }
.log-signal, .route-state { color: var(--color-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; }
.log-signal time { white-space: nowrap; }
.closing-cta { text-align: center; }
.closing-cta h2 { max-width: 19ch; margin: var(--space-6) auto var(--space-8); font-size: clamp(2.4rem, 5vw, 4.2rem); }

/* Internal pages */
.content-page { min-height: 100dvh; background: radial-gradient(ellipse at 50% 0, var(--color-accent-wash), transparent 45%), var(--color-bg); }
.content-page > .section:first-child { padding-top: calc(var(--space-24) + var(--space-6)); }
.content-page-title { max-width: 15ch; overflow-wrap: anywhere; font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 4.8rem); line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; }
.page-back { margin-bottom: var(--space-8); }
.concept-text { max-width: 53ch; margin-top: var(--space-8); font-size: 1.15rem; line-height: 1.7; }
.section-strip { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); max-width: 64ch; margin-top: var(--space-8); padding: var(--space-4) 0 0; border-top: 1px solid var(--color-line-soft); list-style: none; }
.section-strip a::before { content: "›"; margin-right: var(--space-2); color: var(--color-primary); }
.project-backdrop { position: relative; min-height: 760px; overflow: clip; display: grid; align-items: center; }
.project-backdrop::before, .project-backdrop::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.project-backdrop::before { background-image: var(--backdrop-image); background-position: var(--backdrop-position, center); background-size: cover; opacity: var(--backdrop-opacity, 0.38); filter: saturate(0.78); transform: scale(1.02); }
.project-backdrop::after { background: linear-gradient(90deg, var(--color-backdrop-solid), var(--color-backdrop-mid) 46%, var(--color-backdrop-clear)), linear-gradient(180deg, var(--color-bg), transparent 18%, transparent 82%, var(--color-bg)); }
.project-backdrop > .wrap { position: relative; z-index: 1; }
.backdrop-castle { --backdrop-image: url("aincrad-castle.46ec41940a.webp"); --backdrop-position: center; }

/* Project principles */
.project-principles .section-lead { margin-bottom: var(--space-16); }
.principle-stack { display: grid; gap: var(--space-24); }
.principle { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-16); align-items: center; }
.principle-consequence { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.principle-copy { max-width: 46ch; }
.principle-number { color: var(--color-primary); font-family: var(--font-display); font-size: 1.4rem; }
.principle h3 { margin-top: var(--space-4); font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: 0.05em; text-transform: uppercase; }
.principle-copy > p:last-child { margin-top: var(--space-4); color: var(--color-muted); }
.identity-sheet, .consequence-map, .floor-stack { border: 1px solid var(--color-line); border-radius: var(--radius-panel); background: var(--color-surface-raised); box-shadow: var(--shadow-panel); }
.identity-head { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-line); color: var(--color-muted); font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.identity-sheet dl { padding: var(--space-4) var(--space-6); }
.identity-sheet dl div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); padding-block: var(--space-4); border-bottom: 1px solid var(--color-line-soft); }
.identity-sheet dl div:last-child { border-bottom: 0; }
.identity-sheet dt { color: var(--color-muted); }
.identity-sheet dd { color: var(--color-accent); font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.consequence-map { display: grid; grid-template-columns: minmax(0, 0.85fr) 80px minmax(0, 1.15fr); gap: var(--space-4); align-items: center; padding: var(--space-8); }
.consequence-origin { padding: var(--space-6); border-left: 2px solid var(--color-primary); background: var(--color-primary-wash); }
.consequence-origin span, .consequence-origin strong { display: block; }
.consequence-origin span { color: var(--color-primary); font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.consequence-origin strong { margin-top: var(--space-2); }
.consequence-lines { display: grid; gap: var(--space-3); }
.consequence-lines span { height: 1px; background: var(--color-line); transform-origin: left; }
.consequence-results { display: grid; gap: var(--space-3); }
.consequence-results span { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line-soft); color: var(--color-muted); }
.floor-stack { display: grid; gap: var(--space-3); padding: var(--space-8); perspective: 800px; }
.floor-stack div { display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding-inline: var(--space-6); border: 1px solid var(--color-line-soft); background: var(--color-glass-faint); transform: perspective(800px) rotateX(8deg); }
.floor-stack span { color: var(--color-muted-deep); font-family: var(--font-display); font-size: 2rem; }
.floor-stack small { color: var(--color-muted); font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.floor-stack .floor-active { border-color: var(--color-primary-line); background: var(--color-primary-wash); }
.floor-stack .floor-active span, .floor-stack .floor-active small { color: var(--color-primary); }

/* Roadmap and contribution */
.route { list-style: none; padding: 0; border-top: 1px solid var(--color-line); }
.route li { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-8); border-bottom: 1px solid var(--color-line-soft); }
.route-marker { color: var(--color-muted-deep); font-family: var(--font-display); font-size: 2rem; line-height: 1; }
.route h3 { margin: var(--space-1) 0 var(--space-2); font-size: 1.2rem; letter-spacing: 0.06em; text-transform: uppercase; }
.route li > div > p:last-child { max-width: 58ch; color: var(--color-muted); }
.contribute-panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr); gap: var(--space-16); align-items: end; padding: var(--space-12); border: 1px solid var(--color-line); border-radius: var(--radius-panel); background: var(--color-surface-raised); box-shadow: var(--shadow-panel); }
.contribute-panel h2 { margin-top: var(--space-6); }
.contribute-panel p:last-child { max-width: 62ch; margin-top: var(--space-6); color: var(--color-muted); }
.contribute-actions { display: grid; justify-items: start; gap: var(--space-4); }
.credits { padding-block: var(--space-16); }
.credits-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--space-16); }
.credits-copy { max-width: 68ch; color: var(--color-muted); }
.credits-copy p + p { margin-top: var(--space-4); }
.credits-copy a { color: var(--color-muted); }

/* System log */
.log-page .wrap { max-width: 900px; }
.log-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-8); }
.log-heading .content-page-title { margin-top: var(--space-2); }
.log-intro { max-width: 50ch; margin-top: var(--space-4); color: var(--color-muted); }
.feed-link { flex: 0 0 auto; }
.feed-link::before { content: "◉"; margin-right: var(--space-2); color: var(--color-primary); }
.log-entry { margin-top: var(--space-12); overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-panel); background: var(--color-glass); }
.log-entry header { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-6); align-items: center; padding: var(--space-6); border-bottom: 1px solid var(--color-line); background: var(--color-glass-faint); }
.log-number { position: relative; color: var(--color-primary); font-family: var(--font-display); font-size: 2rem; line-height: 1; text-decoration: none; }
.log-number::after { content: "#"; position: absolute; top: 0; left: 100%; margin-left: var(--space-1); color: var(--color-muted); font-size: 0.9rem; opacity: 0; transition: opacity var(--duration-press) var(--ease-out); }
.log-number:focus-visible::after { opacity: 1; }
.log-entry h2 { max-width: none; margin-top: var(--space-1); font-family: var(--font-ui); font-size: 1.3rem; letter-spacing: 0.05em; text-transform: uppercase; }
.log-copy { max-width: 68ch; padding: var(--space-8); color: var(--color-muted); }
.log-copy p + p { margin-top: var(--space-4); }
.to-top { margin-top: var(--space-6); }

/* Footer */
.footer { border-top: 1px solid var(--color-line-soft); padding-block: var(--space-8); color: var(--color-muted); font-size: 0.88rem; }
.footer-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.footer-line nav { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--space-4) var(--space-6); }
.footer-line nav a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.footer a { color: var(--color-muted); white-space: nowrap; }

/* Motion fallback for the project's self-only CSP. Content stays visible if JS fails. */
.motion-ready [data-reveal], .motion-ready [data-reveal-group] > * { opacity: 0; transform: translateY(var(--space-4)); }
.motion-ready [data-reveal].is-visible, .motion-ready [data-reveal-group] > *.is-visible { opacity: 1; transform: translateY(0); transition: opacity var(--duration-story) var(--ease-out), transform var(--duration-story) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover, .landing-link:hover, .page-back:hover, .to-top:hover, .feed-link:hover, .footer a:hover { color: var(--color-text); }
  .text-action:hover, .roster-join:hover { color: var(--color-text); transform: translateX(var(--space-1)); }
  .btn-solid:hover { background: var(--color-primary-hover); }
  .btn-ghost:hover { border-color: var(--color-muted-deep); background: var(--color-glass-strong); }
  .log-number:hover::after { opacity: 1; }
}
.btn:active { transform: scale(0.97); }
.landing-link:active, .text-action:active, .roster-join:active, .nav-links a:active { color: var(--color-text); }

@media (max-width: 960px) {
  .floor-ledger { margin-right: 0; }
  .production-grid, .process-grid, .roadmap-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .section-lead-sticky { position: static; }
  .principle, .principle-consequence { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .principle-consequence .consequence-map { order: 2; }
  .contribute-panel, .credits-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}

@media (max-width: 640px) {
  .wrap { width: min(100% - var(--space-8), 1060px); }
  .nav { padding-inline: var(--space-4); }
  .nav-mark { gap: 0; }
  .nav-mark span:not(.nav-nvg) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-links { gap: var(--space-2); font-size: 0.74rem; }
  .nav-links a { padding-inline: var(--space-2); }
  .section { padding-block: var(--space-16); }
  .section-pivotal { padding-block: var(--space-24); }
  .hero { min-height: 100svh; padding-block: var(--space-24) var(--space-16); }
  .hero-circle { inset: 0 -62% 0 0; }
  .hero-inner.sys-window { padding: 0 var(--space-6) var(--space-8); }
  .sys-head { display: grid; margin-inline: calc(var(--space-6) * -1); margin-bottom: var(--space-8); padding: var(--space-3) var(--space-4); }
  .hero-title { font-size: clamp(3rem, 17vw, 4.25rem); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .btn { width: 100%; }
  .landing-link { justify-content: center; }
  .ledger-head, .floor-route, .floor-ledger figcaption { padding-inline: var(--space-4); }
  .floor-ledger::before { left: 36px; }
  .floor-route li { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); }
  .route-node { width: 40px; height: 40px; font-size: 0.8rem; }
  .route-scope { grid-column: 2; justify-self: start; }
  .roster li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .roster-terms, .roster-join { grid-column: 1; grid-row: auto; justify-self: start; }
  .roster-terms { margin-top: var(--space-2); }
  .process-flow li { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); }
  .process-output { grid-column: 2; }
  .transmission { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .transmission-number { font-size: 7rem; }
  .project-backdrop { min-height: 720px; }
  .project-backdrop::after { background: linear-gradient(90deg, var(--color-backdrop-solid), var(--color-backdrop-mid)), linear-gradient(180deg, var(--color-bg), transparent 20%, transparent 80%, var(--color-bg)); }
  .backdrop-castle { --backdrop-image: url("aincrad-castle-960.1348fe008d.webp"); }
  .backdrop-castle::before { background-position: 50% 12%; background-repeat: no-repeat; background-size: auto 46%; opacity: 0.32; }
  .consequence-map { grid-template-columns: minmax(0, 1fr); }
  .consequence-lines { grid-template-columns: repeat(3, 1fr); }
  .consequence-lines span { width: 1px; height: var(--space-6); justify-self: center; }
  .route li { grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-4); }
  .contribute-panel { padding: var(--space-6); }
  .log-heading, .footer-line { align-items: start; flex-direction: column; }
  .log-entry header { grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); }
  .log-copy { padding: var(--space-6); }
  .footer-line nav { justify-content: start; }
}

@media (max-width: 400px) {
  .nav-links { gap: 0; }
  .nav-links a { padding-inline: var(--space-1); }
  .hero-title { font-size: 2.85rem; }
  .ledger-head { display: grid; }
  .ledger-state { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-circle img { animation: none; }
  .motion-ready [data-reveal], .motion-ready [data-reveal-group] > * { opacity: 1; transform: none; transition: opacity 120ms linear; }
  .hero-inner { animation: none; }
  .floor-ledger::before { transform: scaleY(1); transition: none; }
  .nav, .nav-links a, .btn, .landing-link, .text-action, .page-back, .to-top, .feed-link, .roster-join, .section-strip a, .log-number::after { transition: none; }
}