/* ============================================================
   NOMADOLOGY — layout & components
   ============================================================ */

html { background: var(--color-bg); }

body {
  overflow-x: hidden;
}

.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-4);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

.wrap {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-12));
}

.wrap--split {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: start;
}
.wrap--split-reverse { grid-template-columns: 1.1fr 0.9fr; }

.section {
  padding-block: clamp(var(--space-16), 9vw, var(--space-32));
  border-top: 1px solid var(--color-divider);
  position: relative;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
  margin-block: var(--space-3) var(--space-6);
  max-width: 22ch;
}

.section-intro {
  max-width: 62ch;
  color: var(--color-text-muted);
  margin-bottom: var(--space-10);
  font-size: var(--text-lg);
}

.label-tag {
  font-size: var(--text-xs);
  color: var(--color-primary);
  text-transform: uppercase;
  font-weight: 600;
}
.label-tag--tight { margin-top: var(--space-16); margin-bottom: var(--space-2); }

p { color: var(--color-text); }
.section p:not(.section-intro):not(.hero__lede) {
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  max-width: 62ch;
}
.section p strong { color: var(--color-text); font-weight: 600; }
.section p em { color: var(--color-text); font-style: italic; }

.cite {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: oklch(from var(--color-primary) l c h / 0.35);
  text-underline-offset: 2px;
  font-size: 0.9em;
}
.cite:hover { text-decoration-color: currentColor; }

/* ============ HEADER ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: oklch(from var(--color-bg) l c h / 0.78);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--color-divider);
  transition: transform 0.35s var(--ease-in-out), box-shadow 0.35s var(--ease-in-out);
}
.site-header--hidden { transform: translateY(-100%); }
.site-header--scrolled { box-shadow: var(--shadow-sm); }

.site-header__inner {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding: var(--space-3) clamp(var(--space-5), 5vw, var(--space-12));
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  margin-right: auto;
}
.logo__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
}
.logo:hover { color: var(--color-primary); }

.site-nav {
  display: flex;
  gap: var(--space-6);
}
.site-nav a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.site-nav a:hover { color: var(--color-primary); }

.theme-toggle {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
}
.theme-toggle:hover { color: var(--color-primary); background: var(--color-surface-offset); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--color-bg);
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    oklch(from var(--color-bg) l c h / 0.15) 0%,
    oklch(from var(--color-bg) l c h / 0.05) 45%,
    oklch(from var(--color-bg) l c h / 0.55) 100%
  );
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-12));
  width: 100%;
}
.kicker {
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: var(--color-primary);
  max-width: 42ch;
  margin-bottom: var(--space-6);
  font-weight: 500;
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: 0.92;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-shadow: 0 2px 40px oklch(from var(--color-bg) l c h / 0.4);
}
.hero__title-accent { color: var(--color-primary); }
.hero__lede {
  margin-top: var(--space-8);
  max-width: 46ch;
  font-size: var(--text-lg);
  color: var(--color-text);
  text-shadow: 0 1px 20px oklch(from var(--color-bg) l c h / 0.5);
}
.hero__lede strong { color: var(--color-primary); font-weight: 600; }
.hero__cta-row {
  margin-top: var(--space-10);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.hero__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
}
.hero__scroll-cue {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 36px;
  border: 1.5px solid oklch(from var(--color-text) l c h / 0.35);
  border-radius: var(--radius-full);
  z-index: 2;
}
.hero__scroll-cue span {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: scroll-cue 1.8s var(--ease-in-out) infinite;
}
@keyframes scroll-cue {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

/* ============ THESIS ============ */
.thesis__label { position: sticky; top: 100px; }

/* ============ SCROLL REVEAL ============ */
.reveal { opacity: 1; }
@supports (animation-timeline: view()) {
  .reveal {
    opacity: 0;
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}
@keyframes reveal-fade { to { opacity: 1; } }

/* ============ SPACE COMPARE ============ */
.compare {
  position: relative;
  height: min(56vw, 460px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  isolation: isolate;
  background: var(--color-surface-offset);
}
.compare__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.compare__panel--striated {
  color: var(--color-text-muted);
  background: var(--color-surface-2);
}
.compare__panel--smooth {
  clip-path: inset(0 0 0 50%);
  background: oklch(0.2 0.02 55);
  color: oklch(0.92 0.02 60);
}
.compare__svg { flex: 1; width: 100%; }
.compare__points circle { fill: var(--color-primary); }
.compare__route { stroke: var(--color-primary); stroke-width: 1.5; opacity: 0.7; }
.compare__canvas { flex: 1; width: 100%; height: 100%; display: block; }
.compare__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(to top, oklch(0 0 0 / 0.35), transparent);
}
.compare__label span { font-size: var(--text-xs); text-transform: uppercase; color: var(--color-primary); font-weight: 700; }
.compare__label p { color: inherit; max-width: 34ch; font-size: var(--text-sm); margin-top: var(--space-1); }
.compare__panel--smooth .compare__label span { color: var(--color-system); }

.compare__slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 5;
  appearance: none;
}
.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--color-primary);
  transform: translateX(-1px);
  z-index: 4;
  box-shadow: 0 0 12px oklch(from var(--color-primary) l c h / 0.6);
}
.compare__handle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary);
  transform: translate(-50%, -50%);
}
.compare__handle::after {
  content: '↔';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  color: var(--color-text-inverse);
  font-size: 14px;
}

.four-elements { margin-top: var(--space-20); }
.four-elements__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.fe-card {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.fe-card:nth-child(2) { margin-top: var(--space-6); }
.fe-card:nth-child(4) { margin-top: var(--space-3); }
.fe-card__n { color: var(--color-text-faint); font-size: var(--text-xs); }
.fe-card h3 { font-family: var(--font-display); font-size: var(--text-base); margin-block: var(--space-2) var(--space-1); }
.fe-card p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.fe-source { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-5); }

/* ============ AXIOM DIAGRAM ============ */
.axiom-diagram {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-5);
  min-height: 340px;
}
.axiom-diagram__state, .axiom-diagram__wm {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}
.axiom-diagram > span, .axiom-diagram__state > .mono, .axiom-diagram__wm > .mono {
  font-size: var(--text-xs);
  color: var(--color-primary);
  font-weight: 700;
}
.axiom-diagram__gap {
  writing-mode: vertical-rl;
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  text-transform: uppercase;
}
.axiom-diagram__tree {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
  position: relative;
  height: 120px;
  width: 100%;
}
.axiom-diagram__tree .node--root { grid-column: 3 / 5; }
.node {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-surface-dynamic);
  border: 1.5px solid var(--color-border);
  margin-inline: auto;
  align-self: end;
}
.axiom-diagram__tree .node--root { background: var(--color-primary); border-color: var(--color-primary); width: 20px; height: 20px; align-self: start; }
.axiom-diagram__pack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-content: center;
  height: 120px;
}
.node--pack { background: var(--color-system); border-color: var(--color-system); }
.axiom-diagram__caption { color: var(--color-text-faint) !important; text-transform: none !important; font-size: var(--text-xs) !important; }

.pull-quote {
  border-left: 2px solid var(--color-primary);
  padding-left: var(--space-6);
  margin-block: var(--space-8);
}
.pull-quote p {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text) !important;
  font-weight: 500;
  line-height: 1.25;
}
.pull-quote cite {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-style: normal;
}
.pull-quote cite a { color: var(--color-text-faint); }

/* ============ RHIZOME/TREE GRAPH ============ */
.diagram-toggle {
  display: inline-flex;
  gap: var(--space-2);
  background: var(--color-surface-offset);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}
.toggle-pill {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}
.toggle-pill[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.graph-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  height: min(52vw, 440px);
  overflow: hidden;
}
#graph-canvas { width: 100%; height: 100%; display: block; }

.principles {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.principle span { color: var(--color-primary); font-size: var(--text-xs); font-weight: 700; }
.principle h3 { font-family: var(--font-display); font-size: var(--text-base); margin-block: var(--space-2) var(--space-1); }
.principle p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

/* ============ SYSTEMS FEEDBACK ============ */
.feedback-diagram { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); position: sticky; top: 120px; }
.feedback-svg { width: 100%; max-width: 320px; color: var(--color-text-muted); }
.feedback-nodes circle { fill: var(--color-surface); stroke: var(--color-system); stroke-width: 1.5; }
.feedback-nodes text { fill: var(--color-text); font-size: 9px; letter-spacing: 0.03em; }
.feedback-loop { stroke: var(--color-system); }
.feedback-loop path { fill: var(--color-system); }
#arrow path { fill: var(--color-system); }
.feedback-caption { font-size: var(--text-xs); color: var(--color-text-faint); text-align: center; max-width: 26ch; }

/* ============ LINES OF FLIGHT CANVAS ============ */
.flight-canvas-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: min(60vw, 460px);
  background: var(--color-surface-2);
}
#flight-canvas { width: 100%; height: 100%; display: block; }
.caption { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-3); text-transform: uppercase; }

/* ============ CAPTURE BARS ============ */
.capture-bars {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.capture-bar { display: flex; flex-direction: column; gap: var(--space-2); }
.capture-bar > span:first-child { font-size: var(--text-xs); color: var(--color-text-muted); }
.capture-bar > span:last-child { font-size: var(--text-xs); color: var(--color-text-faint); align-self: flex-end; }
.capture-bar__track {
  height: 10px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.capture-bar__fill {
  height: 100%;
  width: var(--fill);
  background: var(--color-system);
  border-radius: var(--radius-full);
}
.capture-bar__fill--full { background: var(--color-primary); }

/* ============ GLOSSARY ============ */
.glossary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@container style(--supports-container: true) {}
.term-chip {
  text-align: left;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  anchor-name: none;
}
.term-chip:hover, .term-chip:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-surface-offset);
}
.term-chip__term { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; }
.term-chip__hint { display: block; font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-1); }

.term-popover {
  max-width: 380px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  color: var(--color-text);
  inset: unset;
  margin: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.term-popover::backdrop { background: oklch(0.1 0 0 / 0.5); backdrop-filter: blur(2px); }
.term-popover__label { color: var(--color-primary); font-size: var(--text-xs); text-transform: uppercase; margin-bottom: var(--space-2); }
.term-popover h3 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-3); }
.term-popover p { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.term-popover__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--color-text-muted);
  font-size: 18px;
  display: grid;
  place-items: center;
}
.term-popover__close:hover { background: var(--color-surface-offset); color: var(--color-text); }

@supports (anchor-name: --x) {
  .term-chip { anchor-name: var(--anchor-nm, none); }
}

/* ============ READING LIST ============ */
.reading-list { display: flex; flex-direction: column; gap: var(--space-3); max-width: 70ch; }
.reading-list a {
  color: var(--color-text);
  text-decoration: none;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-base);
  display: block;
}
.reading-list a:hover { color: var(--color-primary); }
.reading-list em { color: var(--color-text-muted); }

/* ============ FOOTER ============ */
.site-footer {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-10);
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.logo--footer { color: var(--color-text-faint); font-family: var(--font-display); font-size: var(--text-sm); }
.site-footer__note { font-size: var(--text-xs); color: var(--color-text-faint); max-width: 46ch; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .wrap--split, .wrap--split-reverse { grid-template-columns: 1fr; }
  .thesis__label { position: static; margin-bottom: var(--space-4); }
  .four-elements__grid { grid-template-columns: repeat(2, 1fr); }
  .fe-card:nth-child(2), .fe-card:nth-child(4) { margin-top: 0; }
  .principles { grid-template-columns: repeat(2, 1fr); }
  .glossary-grid { grid-template-columns: repeat(2, 1fr); }
  .axiom-diagram { flex-direction: column; }
  .axiom-diagram__gap { writing-mode: horizontal-tb; }
  .feedback-diagram { position: static; margin-top: var(--space-10); }
  .site-nav { display: none; }
}

@media (max-width: 560px) {
  .four-elements__grid { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
  .glossary-grid { grid-template-columns: 1fr; }
  .hero__cta-row { flex-direction: column; align-items: flex-start; }
  .compare { height: 70vw; }
  .term-popover { width: calc(100% - var(--space-8)); }
  .hero__title { font-size: clamp(2.6rem, 15vw, 3.4rem); overflow-wrap: break-word; }
}

@media (prefers-contrast: more) {
  .cite, .site-nav a { text-decoration: underline; }
}