/* ============================================================================
   XENTH — Flagship site stylesheet
   XWEB-SABER-OVERNIGHT-001

   Design posture (CLAUDE_DESIGN_MISSION.md):
     Calm · premium · architectural · disciplined
     Human-readable before cinematic
     Spacious operating fields, not dashboard overload
     The interface becomes calmer after motion
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--xenth-bg);
  color: var(--xenth-text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection { background: rgba(78, 164, 255, 0.22); color: #fff; }

/* ------------------------------------------------- 2. Focus & skip linking */

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: 0;
  left: var(--gutter);
  transform: translateY(-140%);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--xenth-surface);
  border: var(--hairline) solid var(--xenth-signal);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(var(--s-3)); }

/* --------------------------------------------------------- 3. Layout prims */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--container-wide); }
.wrap--text { max-width: var(--container-text); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.section--edge { border-top: var(--hairline) solid var(--xenth-border-soft); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.section__head { max-width: 58ch; }
.section__head > * + * { margin-top: var(--s-4); }

/* ------------------------------------------------------------ 4. Typography */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--xenth-text-dim);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: var(--hairline);
  background: var(--xenth-border);
  flex: none;
}

.h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-head);
  letter-spacing: var(--tr-head);
}
.h3 {
  font-size: var(--t-h3);
  line-height: 1.18;
  letter-spacing: -0.015em;
}
.h4 {
  font-size: var(--t-h4);
  line-height: 1.28;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--xenth-text-muted);
  max-width: 52ch;
}

.muted { color: var(--xenth-text-muted); }
.dim   { color: var(--xenth-text-dim); }
.measure { max-width: 68ch; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--xenth-text-dim);
}

/* Foundation line — STRUCTURE. CLARITY. EXECUTION. */
.foundation {
  font-family: var(--font-mono);
  font-size: clamp(0.6875rem, 0.62rem + 0.3vw, 0.8125rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--xenth-text-muted);
}

/* ------------------------------------------------------------- 5. Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 0.9rem 1.6rem;
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: var(--hairline) solid var(--xenth-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--xenth-text);
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.btn--primary {
  background: var(--xenth-text);
  color: var(--xenth-bg);
  border-color: var(--xenth-text);
}
.btn--primary:hover { background: #fff; border-color: #fff; }

.btn--ghost:hover {
  border-color: var(--xenth-text-muted);
  background: rgba(255, 255, 255, 0.03);
}

.btn--block { width: 100%; }
.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.875rem; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.link {
  color: var(--xenth-text);
  border-bottom: var(--hairline) solid var(--xenth-border);
  padding-bottom: 1px;
  transition: border-color var(--dur-fast) var(--ease);
}
.link:hover { border-color: var(--xenth-signal); }

.link-arrow {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--xenth-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: color var(--dur-fast) var(--ease);
}
.link-arrow:hover { color: var(--xenth-text); }
.link-arrow::after {
  content: "\2192";
  transition: transform var(--dur-fast) var(--ease);
}
.link-arrow:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------- 6. Site header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 6, 8, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: var(--hairline) solid var(--xenth-border-soft);
}

.site-header__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--s-4) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  width: clamp(8.5rem, 12vw, 11.5rem);
}
.wordmark img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); }

.nav { display: none; align-items: center; gap: var(--s-5); }
.nav a {
  font-size: var(--t-small);
  color: var(--xenth-text-muted);
  transition: color var(--dur-fast) var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--xenth-text); }

/* `.nav a` (0,1,1) outranks `.btn--primary` (0,1,0), which left the header CTA
   rendering muted grey on a white fill at 2.33:1. Restore the button's own
   colours inside both nav contexts. */
.nav a.btn--primary,
.nav-panel a.btn--primary {
  color: var(--xenth-bg);
}
.nav a.btn--primary:hover,
.nav-panel a.btn--primary:hover { color: var(--xenth-bg); }

.nav-toggle {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--xenth-text-muted);
  padding: var(--s-2) var(--s-3);
  border: var(--hairline) solid var(--xenth-border);
  border-radius: var(--radius);
}

/* Without JS the panel is simply part of the page — never a dead end. */
.nav-panel {
  border-top: var(--hairline) solid var(--xenth-border-soft);
  padding: var(--s-4) var(--gutter) var(--s-6);
}
.nav-panel a {
  display: block;
  padding: var(--s-3) 0;
  font-size: 1.0625rem;
  border-bottom: var(--hairline) solid var(--xenth-border-soft);
  color: var(--xenth-text-muted);
}
.nav-panel a:hover, .nav-panel a[aria-current="page"] { color: var(--xenth-text); }
.nav-panel .btn { margin-top: var(--s-5); }

.js .nav-panel[hidden] { display: none; }

@media (min-width: 960px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .nav-panel { display: none; }
}

/* ------------------------------------------------------------- 7. The hero */

.hero {
  position: relative;
  min-height: calc(100svh - var(--spine-offset, 4.2rem));
  display: grid;
  align-items: center;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(4rem, 2.5rem + 6vw, 7.5rem);
  overflow: hidden;
}

/* The Signal Within. Video is optional; this native scene is the resilient
   master and resolves to the same final operating picture. */
.cinema { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cinema__canvas { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; filter: contrast(1.05) saturate(.86); }
.cinema::after { content: ""; position: absolute; z-index: 3; inset: 0; background: linear-gradient(90deg, rgba(5,6,8,.98) 0%, rgba(5,6,8,.80) 43%, rgba(5,6,8,.22) 78%, rgba(5,6,8,.58) 100%); }
.cinema__video { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 350ms var(--ease); }
.cinema[data-video="ready"] .cinema__video { opacity: .78; }
.cinema[data-video="ready"] .cinema__native, .cinema[data-video="ready"] .cinema__canvas { opacity: 0; }
.cinema__native { position: absolute; inset: 0; opacity: .88; transition: opacity 350ms var(--ease); background: radial-gradient(circle at 76% 48%, rgba(32,91,72,.32), transparent 23%), #050608; }
.js .cinema__native { display: none; }
.cinema__native::before { content: ""; position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size: 4.25rem 4.25rem; mask-image: linear-gradient(90deg,transparent 35%,#000); }
.cinema__haze { position: absolute; width: 50vmin; height: 50vmin; border-radius: 50%; right: 7vw; top: 50%; translate: 0 -50%; background: radial-gradient(circle,rgba(78,164,255,.16),rgba(75,47,130,.10) 32%,transparent 70%); }
.cinema__spine { position: absolute; right: 24vw; top: 18%; width: 1px; height: 64%; background: linear-gradient(transparent,var(--xenth-text),var(--xenth-signal),transparent); transform-origin: 50% 0; }
.cinema__authority,.cinema__evidence { position: absolute; right: calc(24vw - .36rem); width: .72rem; height: .72rem; transform: rotate(45deg); }
.cinema__authority { top: 47%; border: 1px solid var(--xenth-gold); box-shadow: 0 0 2rem rgba(217,164,40,.34); }
.cinema__evidence { top: 67%; background: var(--xenth-signal); box-shadow: 0 0 1.25rem rgba(78,164,255,.30); }
.js .cinema[data-state="playing"] .cinema__spine { animation: cinema-spine 12s var(--ease-out) both; }
.js .cinema[data-state="playing"] .cinema__authority { animation: cinema-authority 12s var(--ease-out) both; }
.js .cinema[data-state="playing"] .cinema__evidence { animation: cinema-evidence 12s var(--ease-out) both; }
.js .cinema[data-state="paused"] * { animation-play-state: paused !important; }
@keyframes cinema-spine { 0%{transform:scaleY(.05);opacity:.18} 30%,100%{transform:scaleY(1);opacity:1} }
@keyframes cinema-authority { 0%,38%{opacity:0;transform:rotate(45deg) scale(.5)} 54%,100%{opacity:1;transform:rotate(45deg) scale(1)} }
@keyframes cinema-evidence { 0%,62%{opacity:0;translate:0 -4rem} 84%,100%{opacity:1;translate:0 0} }
.hero__grid { z-index: 1; }
.cinema-controls { position: absolute; z-index: 3; right: var(--gutter); bottom: var(--s-5); display: flex; gap: var(--s-2); }
.cinema-controls button { min-height: 2.75rem; padding: .65rem .8rem; border: var(--hairline) solid var(--xenth-border); background: rgba(5,6,8,.82); color: var(--xenth-text-muted); font: 500 var(--t-label)/1 var(--font-mono); letter-spacing: var(--tr-label); text-transform: uppercase; }
.cinema-controls button:hover,.cinema-controls button:focus-visible { color: var(--xenth-text); border-color: var(--xenth-signal); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width: 700px) { .cinema::after{background:linear-gradient(180deg,rgba(5,6,8,.55),rgba(5,6,8,.96) 62%)} .cinema__spine{right:22vw;top:10%;height:48%}.cinema__authority,.cinema__evidence{right:calc(22vw - .36rem)} .cinema__authority{top:26%}.cinema__evidence{top:44%}.cinema-controls{bottom:var(--s-3)} .cinema-controls button{font-size:.58rem;padding:.55rem}.hero{padding-bottom:6.5rem} }

/* Restrained atmospheric influence — never a "giant blue surface". */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 70%;
  background:
    radial-gradient(60% 60% at 30% 0%, rgba(75, 47, 130, 0.16), transparent 70%),
    radial-gradient(40% 50% at 80% 10%, rgba(78, 164, 255, 0.05), transparent 70%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.hero__copy > * + * { margin-top: var(--s-5); }

.hero__title {
  font-size: var(--t-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-hero);
  font-weight: 600;
  text-transform: uppercase;
  max-width: 13ch;
}

.hero__lede {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--xenth-text-muted);
  max-width: 52ch;
}

.hero__foundation {
  padding-top: var(--s-5);
  border-top: var(--hairline) solid var(--xenth-border-soft);
}

@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }
}

/* ------------------------------------------- 8. Alignment field (hero art) */

.field {
  position: relative;
  border: var(--hairline) solid var(--xenth-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022), transparent 45%),
    var(--xenth-surface);
  padding: var(--s-5);
  min-height: 21rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-5);
}

.field__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

/* The one thin ice-blue route. A line, not a surface. */
.field__route {
  position: relative;
  height: var(--hairline);
  background: var(--xenth-border);
  overflow: hidden;
}
.field__route::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--xenth-signal), transparent);
  transform: translateX(0);
}
.js .field__route::after {
  transform: translateX(-100%);
  animation: route-pass var(--dur-slow) var(--ease-out) 760ms forwards;
}
@keyframes route-pass { to { transform: translateX(0); } }

.fragments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  list-style: none;
}

.fragment {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--xenth-text-muted);
  padding: var(--s-3) var(--s-4);
  border: var(--hairline) solid var(--xenth-border-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.015);
}

/* FRAGMENT -> ALIGN -> PLACE -> ACTIVATE -> REST.
   One movement, then stillness. Nothing loops. */
.js .fragment {
  opacity: 0;
  transform: translateY(6px);
  animation: fragment-settle var(--dur-base) var(--ease-out) forwards;
}
.js .fragment:nth-child(1) { animation-delay: 120ms; }
.js .fragment:nth-child(2) { animation-delay: 250ms; }
.js .fragment:nth-child(3) { animation-delay: 380ms; }
.js .fragment:nth-child(4) { animation-delay: 510ms; }

@keyframes fragment-settle {
  to { opacity: 1; transform: translateY(0); }
}

/* Fourth fragment is desktop-only — max 3 on mobile per HERO_COMPOSITION_ORDER */
.fragment--desktop { display: none; }
@media (min-width: 720px) {
  .fragment--desktop { display: block; }
}

.lane {
  border: var(--hairline) solid var(--xenth-border);
  border-left: 2px solid var(--xenth-signal);
  border-radius: var(--radius);
  padding: var(--s-4);
  background: rgba(78, 164, 255, 0.035);
}
.lane__label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--xenth-signal);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.lane__body {
  margin-top: var(--s-2);
  font-size: var(--t-small);
  color: var(--xenth-text);
}

.readout {
  display: grid;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--xenth-text-dim);
  list-style: none;
}
.readout li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-2);
  border-top: var(--hairline) solid var(--xenth-border-soft);
}
.readout b { font-weight: 400; color: var(--xenth-text-muted); }

.dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--xenth-signal);
  display: inline-block;
  flex: none;
}

/* ------------------------------------------------------- 9. Cards & grids */

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.card {
  border: var(--hairline) solid var(--xenth-border-soft);
  border-radius: var(--radius-lg);
  background: var(--xenth-surface);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color var(--dur-base) var(--ease);
}
.card:hover { border-color: var(--xenth-border); }
.card__index {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  color: var(--xenth-text-dim);
}
.card p { color: var(--xenth-text-muted); font-size: var(--t-small); }
.card__foot { margin-top: auto; padding-top: var(--s-3); }

a.card:hover { border-color: var(--xenth-text-dim); }

/* ------------------------------------------- 10. Status badges (truth tags) */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
  border-radius: 2px;
  border: var(--hairline) solid var(--xenth-border);
  color: var(--xenth-text-muted);
  align-self: flex-start;
  /* Longer status strings must wrap rather than force the panel wider than
     the viewport — at 320px this was pushing three pages into overflow. */
  max-width: 100%;
  text-wrap: balance;
}
/* Gold is earned proof only. */
.badge--proof {
  color: var(--xenth-gold);
  border-color: rgba(217, 164, 40, 0.4);
  background: rgba(217, 164, 40, 0.06);
}
/* Ice blue marks what is genuinely live/active. */
.badge--active {
  color: var(--xenth-signal);
  border-color: rgba(78, 164, 255, 0.4);
  background: rgba(78, 164, 255, 0.05);
}
/* Everything not yet shipped states so plainly. */
.badge--internal { color: var(--xenth-text-dim); }

/* ------------------------------------------------------ 11. The Race Layer */

.race { display: grid; gap: var(--s-4); list-style: none; }
@media (min-width: 720px) {
  .race { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.race__item {
  border: var(--hairline) solid var(--xenth-border-soft);
  border-top: 2px solid var(--xenth-border);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: var(--s-5) var(--s-4);
  background: var(--xenth-surface);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.race__item--track { border-top-color: var(--xenth-signal); }
.race__item--proof { border-top-color: var(--xenth-gold); }

.race__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.race__meta {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--xenth-text-dim);
}
.race__item p { font-size: var(--t-small); color: var(--xenth-text-muted); }

/* ------------------------------------------------- 12. Numbered step lists */

.steps { list-style: none; display: grid; gap: 0; }
.steps li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-top: var(--hairline) solid var(--xenth-border-soft);
  align-items: start;
}
.steps li:last-child { border-bottom: var(--hairline) solid var(--xenth-border-soft); }
.steps__n {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  color: var(--xenth-text-dim);
  padding-top: 0.35rem;
}
.steps p { color: var(--xenth-text-muted); font-size: var(--t-small); margin-top: var(--s-2); }

/* ----------------------------------------------------- 13. Deliverable list */

.checklist { list-style: none; display: grid; gap: var(--s-3); }
.checklist li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  font-size: var(--t-small);
  color: var(--xenth-text-muted);
}
.checklist li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.6rem;
  border: var(--hairline) solid var(--xenth-gold);
  transform: rotate(45deg);
}

/* ------------------------------------------------- 14. Split feature block */

.split { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 4rem); align-items: start; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.panel {
  border: var(--hairline) solid var(--xenth-border-soft);
  border-radius: var(--radius-lg);
  background: var(--xenth-surface);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* ------------------------------------------- 15. Philosophy / mythic layer */

/* The one place Zenith purple is permitted to breathe. Still restrained. */
.mythic {
  position: relative;
  overflow: hidden;
  border-top: var(--hairline) solid var(--xenth-border-soft);
  border-bottom: var(--hairline) solid var(--xenth-border-soft);
}
.mythic::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 100% at 50% 125%, rgba(75, 47, 130, 0.22), transparent 70%),
    radial-gradient(40% 60% at 12% 0%, rgba(49, 28, 92, 0.18), transparent 70%);
  pointer-events: none;
}
.mythic > * { position: relative; }

.mythic__lines {
  list-style: none;
  display: grid;
  gap: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.28;
  letter-spacing: -0.015em;
  max-width: 32ch;
}
.zenith { color: var(--xenth-purple-soft); }

/* ------------------------------------------------------------ 16. CTA band */

.cta {
  border: var(--hairline) solid var(--xenth-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 60%),
    var(--xenth-surface);
  padding: clamp(2rem, 1.3rem + 3vw, 3.5rem);
  display: grid;
  gap: var(--s-5);
}
.cta > div > * + * { margin-top: var(--s-3); }
@media (min-width: 860px) {
  .cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-8);
  }
}

/* ------------------------------------------------------- 17. Article lists */

.entries { list-style: none; display: grid; }
.entries li { border-top: var(--hairline) solid var(--xenth-border-soft); }
.entries li:last-child { border-bottom: var(--hairline) solid var(--xenth-border-soft); }
.entry { display: grid; gap: var(--s-2); padding: var(--s-5) 0; }
@media (min-width: 720px) {
  .entry {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--s-5);
    align-items: baseline;
  }
}
.entry__date {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--xenth-text-dim);
}
.entry__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; }
.entry p { font-size: var(--t-small); color: var(--xenth-text-muted); margin-top: var(--s-2); }

/* ---------------------------------------------------------- 18. Empty state */

.empty {
  border: var(--hairline) dashed var(--xenth-border);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  color: var(--xenth-text-muted);
  display: grid;
  gap: var(--s-3);
  justify-items: start;
}

/* ---------------------------------------------------------------- 19. Prose */

.prose { max-width: var(--container-text); }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: var(--t-h3); margin-top: var(--s-8); letter-spacing: -0.015em; }
.prose h3 { font-size: var(--t-h4); margin-top: var(--s-6); font-weight: 600; }
.prose p, .prose li { color: var(--xenth-text-muted); }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: var(--s-2); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose strong { color: var(--xenth-text); font-weight: 600; }

/* ----------------------------------------------------------------- 20. Form */

.form { display: grid; gap: var(--s-5); }
.field-row { display: grid; gap: var(--s-2); }

.label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--xenth-text-muted);
}

.input, .textarea, .select {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--xenth-text);
  background: var(--xenth-surface);
  border: var(--hairline) solid var(--xenth-border);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease);
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--xenth-text-dim); }
.textarea { min-height: 9rem; resize: vertical; }
.hint { font-size: 0.8125rem; color: var(--xenth-text-dim); }

/* --------------------------------------------------------------- 21. Footer */

.site-footer {
  border-top: var(--hairline) solid var(--xenth-border-soft);
  padding-block: var(--s-9) var(--s-7);
}

.footer__grid { display: grid; gap: var(--s-8); }
@media (min-width: 720px) {
  .footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
}

.footer__col h2 {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--xenth-text-dim);
  margin-bottom: var(--s-4);
}
.footer__col ul { list-style: none; display: grid; gap: var(--s-3); }
.footer__col a {
  font-size: var(--t-small);
  color: var(--xenth-text-muted);
  transition: color var(--dur-fast) var(--ease);
}
.footer__col a:hover { color: var(--xenth-text); }

.footer__base {
  margin-top: var(--s-9);
  padding-top: var(--s-5);
  border-top: var(--hairline) solid var(--xenth-border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--xenth-text-dim);
}

/* --------------------------------------------------- 22. Page header block */

.page-head {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
  border-bottom: var(--hairline) solid var(--xenth-border-soft);
}
.page-head > * + * { margin-top: var(--s-4); }
.page-head h1 {
  font-size: var(--t-h2);
  line-height: var(--lh-head);
  letter-spacing: var(--tr-head);
}

/* ------------------------------------------------- 23. The Living Spine */

/* The XENTH industrial design grammar as a section rail. Anatomy:
     Containment Frame   .spine__frame  — the structural rail that contains it
     Signal Channel      .spine__nodes::before — hairline connecting the nodes
     Verification Nodes  .spine__dot    — one per major section
     Living Core         [data-state="operational"] — the active section
     Authority Interface .spine__label  — read position, or navigate to it

   Weight discipline: structure 60 / intelligence 25 / signal 10 / authority 5.
   The frame and channel carry the mass; ice blue touches one dot at a time and
   never becomes a surface. Nothing loops, pulses or scans, and there is no
   cumulative fill — a filled track would read as a progress meter, which this
   is not. State is carried by one node, not by a bar.

   State colours come only from the --spine-* tokens in tokens.css. Do not put
   a literal colour in this section. */

.spine {
  --spine-dot: 5px;
  position: fixed;                 /* out of flow: initialising shifts nothing */
  z-index: 90;                     /* under the header (100), over content     */
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* Activated anchors clear the sticky header. --spine-offset is measured by
   main.js; the fallback is the real mobile header height, so the rail is
   correctly placed before scripting runs and if it never does. */
[data-spine] { scroll-margin-top: calc(var(--spine-offset, 4.2rem) + var(--s-6)); }

.spine__nodes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  position: relative;
}

.spine__node {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--spine-discovered);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease);
}

.spine__dot {
  flex: none;
  width: var(--spine-dot);
  height: var(--spine-dot);
  background: var(--spine-unknown);
  /* Architectural, not soft — square nodes, matching --radius discipline. */
  transition: background-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}

/* Motion law. Unknown -> Discovered -> Validated -> Locked -> Authorized ->
   Operational. Locked folds into Validated here: a static page has no state
   between "read" and "current". Exception is deliberately unrendered — there
   is no fault condition a marketing rail can be in. */
.spine__node[data-state="discovered"] .spine__dot { background: var(--spine-discovered); }
.spine__node[data-state="validated"]  .spine__dot { background: var(--spine-validated); }
.spine__node[data-state="validated"]  { color: var(--spine-validated); }

/* Authorized — human authority, deliberate interaction only. */
.spine__node:hover,
.spine__node:focus-visible { color: var(--spine-authorized); }
.spine__node:hover .spine__dot,
.spine__node:focus-visible .spine__dot { background: var(--spine-authorized); }

/* Operational — the Living Core. One node, flat ring, no glow. */
.spine__node[data-state="operational"] { color: var(--spine-authorized); }
.spine__node[data-state="operational"] .spine__dot {
  background: var(--spine-operational);
  box-shadow: 0 0 0 1px var(--spine-operational);
}

/* Never truncated. The length budget is enforced in build-site.mjs, where an
   over-long label fails the build instead of quietly turning into an ellipsis
   that tells the reader nothing. */
.spine__label { white-space: nowrap; }

/* --- Mobile (<720px): compact strip beneath the header, never full-height - */

.spine {
  top: var(--spine-offset, 4.2rem);
  left: 0;
  right: 0;
  padding: var(--s-2) var(--gutter);
  background: rgba(5, 6, 8, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: var(--hairline) solid var(--xenth-border-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.spine::-webkit-scrollbar { display: none; }

/* Containment Frame — horizontal while the rail is a strip. */
.spine__frame {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--hairline);
  background: var(--xenth-border-soft);
}

/* Signal Channel — the hairline the nodes sit on. */
.spine__nodes::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--hairline);
  background: var(--xenth-border);
}

.spine__nodes { gap: var(--s-5); align-items: center; }
.spine__item { position: relative; }
.spine__node { padding-block: var(--s-2); }

/* With scripting, the strip quiets to dots plus the one active label. Without
   it, every label stays visible and the strip simply scrolls — a static index,
   not a broken half-state. Labels are never display:none; they collapse
   visually while remaining in the accessibility tree. */
@media (max-width: 719px) {
  .js .spine__node:not([data-state="operational"]) .spine__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --- Desktop (>=1280px): persistent vertical rail in the left gutter ------
   Below this width the page container leaves no gutter to occupy, and a rail
   would sit on the text. The strip serves every narrower viewport instead. */

@media (min-width: 1280px) {
  .spine {
    top: 50%;
    left: var(--gutter);
    right: auto;
    transform: translateY(-50%);
    padding: var(--s-2) 0;
    background: none;
    backdrop-filter: none;
    border: 0;
    overflow: visible;
  }

  .spine__frame {
    left: calc(var(--spine-dot) / 2);
    right: auto;
    top: 0;
    bottom: 0;
    width: var(--hairline);
    height: auto;
  }

  .spine__nodes {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-5);
  }
  .spine__nodes::before {
    left: calc(var(--spine-dot) / 2);
    right: auto;
    top: 0;
    bottom: 0;
    width: var(--hairline);
    height: auto;
  }

  .spine__node { padding-block: 0; }

  /* Quiet until engaged. At rest the rail is structure and nodes only; the
     Authority Interface arrives when a human reaches for it, and overlays
     rather than reserving gutter the layout does not have. */
  .spine__label {
    opacity: 0;
    transform: translateX(calc(var(--s-2) * -1));
    padding: var(--s-1) var(--s-3);
    background: var(--xenth-surface-2);
    border: var(--hairline) solid var(--xenth-border);
    border-radius: var(--radius);
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease);
  }
  .spine:hover .spine__label,
  .spine:focus-within .spine__label {
    opacity: 1;
    transform: none;
  }
}

/* --- Wide desktop (>=1600px): the gutter finally fits standing labels ----- */

@media (min-width: 1600px) {
  .spine__label {
    opacity: 1;
    transform: none;
    background: none;
    border-color: transparent;
  }
  .spine:hover .spine__node[data-state="operational"] .spine__label,
  .spine__node[data-state="operational"] .spine__label { opacity: 1; }
}

/* Printing a section rail is meaningless — it navigates nothing on paper. */
@media print { .spine { display: none; } }

/* ------------------------------------------------- 24. Reduced motion law */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* Deliver the resting state directly — never a broken half-state. */
  .js .fragment { opacity: 1; transform: none; }
  .js .field__route::after { transform: translateX(0); }

  /* The Living Spine still changes state, it just never travels to get there.
     Node colour switches instantly via the rule above; the label reveal drops
     its slide entirely rather than running a 0.001ms one. */
  .spine__label { transform: none !important; }
  .cinema__video, .cinema-controls { display: none; }
  .cinema__canvas { filter: none; }
}