:root {
  --bg: #0b0f1a;
  --bg-alt: #10162a;
  --surface: #151d33;
  --surface-border: #232d4a;
  --text: #eef1fb;
  --text-muted: #9aa3c0;
  --primary: #3ce8c0;
  --primary-dark: #1fae8e;
  --spirit-gold: #f0cf7a; /* matches the hero sigil's second ring (temple-scene.js) and its sky gradient's warm band */
  --radius: 14px;
  --max-width: 1120px;
  --header-height: 68px;
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--primary);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.muted {
  color: var(--text-muted);
}

.small {
  font-size: 0.875rem;
}

.mono {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  word-break: break-all;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11, 15, 26, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--surface-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  text-decoration: none;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  color: var(--text);
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
  cursor: pointer;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}

.site-nav a:hover {
  color: var(--text);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.95rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #04140f;
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-ghost {
  background: transparent;
  border-color: var(--surface-border);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.copy-inline,
.copy-btn {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  color: var(--primary);
  border-radius: 8px;
  padding: 2px 10px;
  font-family: inherit;
  cursor: pointer;
  font-size: 0.85em;
}

.copy-inline {
  margin-left: 10px;
  vertical-align: middle;
}

/* Hero */

.hero {
  position: relative;
  border-top: none;
}

/* Golden spiral: a true logarithmic spiral (r = a * e^{b*theta}) whose
   radius grows by exactly the golden ratio phi every quarter turn. Path
   geometry and the wrapping markup are generated at runtime by
   initSpiralAccents() in main.js - this just positions and animates
   whatever it inserts (a slow ambient rotation plus a one-time self-draw
   the first time each host section scrolls into view). .spiral-host marks
   a section as a mount point so its spiral doesn't get clipped/escape
   the section bounds. */
.spiral-host {
  position: relative;
  overflow: hidden;
}

.hero-spiral {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.hero-spiral-inline {
  top: -80px;
  right: -80px;
  width: min(360px, 46vw);
  height: min(360px, 46vw);
  opacity: 0.35;
}

.hero-spiral svg {
  width: 100%;
  height: 100%;
  animation: spiral-spin 220s linear infinite;
}

.hero-spiral path {
  fill: none;
  stroke: var(--spirit-gold);
  stroke-width: 1.4;
  stroke-linecap: round;
}

@keyframes spiral-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-spiral svg {
    animation: none;
  }
}

/* Temple flythrough: .temple-track provides extra scroll distance;
   .temple-stage inside it is position: sticky so it stays pinned to the
   viewport while that distance scrolls underneath. #temple-canvas is a
   real WebGL scene (rendered by assets/js/temple-scene.js via Three.js -
   self-hosted in assets/js/vendor/, no CDN) whose camera dollies forward
   based on scroll progress within the track. #temple-poster is a static
   CSS gradient fallback, shown instead when WebGL is unavailable, on
   small screens, or under prefers-reduced-motion. */
.temple-track {
  height: 260vh;
  position: relative;
}

.temple-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #0b0f1a;
}

#temple-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.temple-poster {
  position: absolute;
  inset: 0;
  display: none;
  background: radial-gradient(ellipse 70% 55% at 60% 40%, rgba(240, 207, 122, 0.22), transparent 60%),
    radial-gradient(ellipse 90% 70% at 40% 32%, #1f6e63 0%, #123330 48%, #081412 78%);
}

/* Guarantees hero text stays readable regardless of what the 3D scene is
   doing behind it (the sky is a bright teal/gold gradient, which is exactly
   the kind of background that can wash out lighter body text). */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(8, 6, 12, 0.62) 0%, rgba(8, 6, 12, 0.4) 38%, rgba(8, 6, 12, 0.08) 62%, transparent 78%);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.hero-overlay .btn,
.hero-overlay .copy-btn,
.hero-overlay a {
  pointer-events: auto;
}

.hero-overlay .container {
  width: 100%;
}

.scroll-hint {
  margin: 28px 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.scroll-hint span {
  display: inline-block;
  animation: scroll-hint-bob 2.2s ease-in-out infinite;
}

@keyframes scroll-hint-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

#hero-reveal-card {
  opacity: 0;
  transform: translateY(24px) scale(0.94);
}

/* No-JS / reduced-motion / small-screen / no-WebGL fallback: skip the
   scroll-jacked flythrough and show a single static poster frame instead.
   temple-scene.js adds .no-3d to .temple-track when it decides not to run
   (it makes that same call for reduced-motion / small-screen itself, so
   this media query is mainly the <noscript> / no-WebGL safety net).
   Height is content-driven (not a fixed vh) with overflow visible, and the
   overlay switches from absolute to normal flow, so the hero never clips
   its own text - a fixed height + centered + overflow:hidden combination
   previously cropped the heading off on narrow screens, where the hero
   copy wraps onto enough lines to exceed a fixed 88vh box. */
@media (prefers-reduced-motion: reduce), (max-width: 860px) {
  .temple-track {
    height: auto;
  }

  .temple-stage {
    position: relative;
    height: auto;
    min-height: 480px;
    overflow: visible;
  }

  #temple-canvas {
    display: none;
  }

  .temple-poster {
    display: block;
  }

  .hero-overlay {
    position: relative;
    padding: 96px 0 56px;
  }

  .scroll-hint {
    display: none;
  }

  #hero-reveal-card {
    opacity: 1;
    transform: none;
  }
}

.temple-track.no-3d {
  height: auto;
}

.temple-track.no-3d .temple-stage {
  position: relative;
  height: auto;
  min-height: 480px;
  overflow: visible;
}

.temple-track.no-3d #temple-canvas {
  display: none;
}

.temple-track.no-3d .temple-poster {
  display: block;
}

.temple-track.no-3d .hero-overlay {
  position: relative;
  padding: 96px 0 56px;
}

.temple-track.no-3d .scroll-hint {
  display: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero-grid > * {
  min-width: 0;
}

.eyebrow {
  display: inline-block;
  color: var(--primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.15;
  margin: 0 0 18px;
}

.hero-lead {
  color: var(--text-muted);
  font-size: 1.1rem;
  margin: 0 0 28px;
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.hero-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.hero-meta strong {
  color: var(--text);
  display: block;
  font-size: 1.05rem;
}

.hero-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 28px;
}

.pool-id-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0 22px;
  min-width: 0;
}

.pool-id-row code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.stat {
  background: var(--bg-alt);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 14px;
}

.stat .value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary);
}

.stat .label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Sections */

section {
  padding: 64px 0;
  border-top: 1px solid var(--surface-border);
  /* Anchor-scrolled section headings (nav links, scrollIntoView) would
     otherwise land partially hidden under the sticky header. */
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.section-head {
  max-width: 62ch;
  margin: 0 auto 40px;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 12px;
}

.section-head p {
  color: var(--text-muted);
  margin: 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.card-grid-tight {
  margin-bottom: 32px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 26px;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.card p {
  color: var(--text-muted);
  margin: 0;
  font-size: 0.95rem;
}

.card .icon {
  font-size: 1.6rem;
  margin-bottom: 12px;
}

.relay-status-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.relay-status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.relay-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.relay-dot.is-online {
  background: var(--primary);
}

.relay-dot.is-offline {
  background: #ff5c5c;
}

.relay-location {
  font-weight: 700;
  width: 2.2em;
}

.relay-state {
  color: var(--text-muted);
}

/* About BRIAN Pool + milestone timeline, composed as one pinned frame -
   .about-stage (position: sticky, top: 0, min-height: 100vh) locks in
   place while .about-track's extra height scrolls underneath, the same
   trick assets/js/temple-scene.js uses for the hero flythrough. The
   intro, trust cards AND timeline are held on screen together
   (vertically centered) rather than pinning the timeline alone, so
   nothing scrolls away before the timeline appears and nothing sits
   pinned with a lot of bare background around it - see the HTML comment
   above <section id="about"> for the two ways the previous, timeline-only
   version looked broken. initMilestoneReveal() in main.js ties scroll
   progress through the track directly to the timeline's reveal (no CSS
   transition here - values are set every animation frame for a 1:1
   scroll-scrubbed feel, exactly like initCardReveal()'s continuous
   scroll-linked reveal elsewhere on the page). Disabled below 860px and
   under prefers-reduced-motion, where main.js falls back to a simpler
   one-shot fade for the timeline and this whole track collapses to auto
   height / normal stacked flow (see the media query below) so nothing is
   ever pinned on a touch device. */

#about {
  /* .about-stage supplies its own vertical padding (and compensates for
     the sticky header) so the section doesn't also pad - avoids doubling
     up the gap above/below the pinned content. */
  padding: 0;
}

.about-track {
  position: relative;
  height: 220vh;
}

.about-stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-height) + 40px) 0 40px;
  background: var(--bg);
}

/* Wraps just the heading+cards, not the timeline, so it - not the whole
   section - is what carries .spiral-host's overflow: hidden (see
   initSpiralAccents() and the HTML comment above <section id="about">). */
.spiral-scope {
  margin-bottom: 44px;
}

.milestones {
  --line-scale: 1;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 34px 0 0;
  border-top: 1px solid var(--surface-border);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.milestones::before {
  content: "";
  position: absolute;
  top: 39px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--surface-border);
  transform: scaleX(var(--line-scale));
  transform-origin: left;
}

.milestone {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.milestone-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  /* Spirit Realm palette, matching the hero sigil's two rings */
  background: linear-gradient(135deg, var(--primary), var(--spirit-gold));
  margin-bottom: 10px;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--bg);
}

.milestone-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.milestone-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.milestone-label {
  font-weight: 700;
  font-size: 0.92rem;
}

.milestone-ref {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Same collapse-to-normal-flow treatment on narrow screens AND under
   prefers-reduced-motion (comma = OR) - matching temple-scene.js, which
   drops its own pin under both conditions rather than just skipping the
   animation while leaving the pin itself active. */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  #about {
    padding: 64px 0;
  }

  .about-track {
    height: auto;
  }

  .about-stage {
    position: static;
    min-height: 0;
    display: block;
    padding: 0;
    background: none;
  }

  .spiral-scope {
    margin-bottom: 40px;
  }

  .milestones {
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
  }

  .milestones::before {
    top: 34px;
    bottom: 4px;
    left: 5px;
    right: auto;
    width: 1px;
    height: auto;
    transform: scaleY(var(--line-scale));
    transform-origin: top;
  }

  .milestone {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
  }

  .milestone-dot {
    margin-bottom: 0;
    margin-top: 5px;
  }
}

/* Pool stats table */

.stats-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.stats-table th,
.stats-table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--surface-border);
  font-size: 0.95rem;
}

.stats-table tr:last-child td {
  border-bottom: none;
}

.stats-table th {
  color: var(--text-muted);
  font-weight: 500;
  width: 45%;
}

/* Delegate steps */

.steps {
  counter-reset: step;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.step {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--spirit-gold));
  color: #04140f;
  display: grid;
  place-items: center;
  font-weight: 700;
  margin-bottom: 14px;
}

.link-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.link-pills a {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
}

.link-pills a:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Generic label/value list (e.g. DRep IDs) */

.id-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0 0 12px;
}

.id-list-spaced {
  margin-top: 20px;
}

.follow-note {
  margin-top: 14px;
}

.id-list dt {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.id-list dd {
  margin: 0;
  font-size: 0.9rem;
}

/* FAQ */

.faq-item {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 6px 20px;
  margin-bottom: 12px;
}

.faq-item summary {
  cursor: pointer;
  padding: 14px 0;
  font-weight: 600;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  float: right;
  color: var(--primary);
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item p {
  color: var(--text-muted);
  margin: 0 0 16px;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--surface-border);
  padding: 40px 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--primary);
}

.footer-links svg {
  display: block;
}

.footer-disclaimer {
  max-width: 72ch;
  margin-top: 24px;
}


@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--surface-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }

  .site-nav.is-open {
    max-height: 320px;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 20px;
  }

  .site-nav a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--surface-border);
  }

  /* Label/value pairs (DRep IDs) read better stacked than squeezed into a
     narrow second column once the label eats most of the width. */
  .id-list {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }

  .id-list dt {
    margin-top: 10px;
  }

  .id-list dt:first-child {
    margin-top: 0;
  }
}