/* ==========================================================================
   NOOSPHERE — visual system
   Palette and typography follow NOOSPHERE_Philosophy_and_Design_v1_0.
   Surface balance: ~75% dark space, ~15% light text, ~10% light accents.
   ========================================================================== */

/* --------------------------------------------------------------- fonts --
   Sora and IBM Plex Mono are self-hosted (SIL Open Font License 1.1;
   licence texts live in /assets/fonts). General Sans comes from Fontshare —
   see HANDOFF.md, self-hosting needs a licence confirmation. Sora is the
   fallback, so the page stays readable if Fontshare does not answer.
   ----------------------------------------------------------------------- */

@font-face {
  font-family: 'Sora';
  src: url('/assets/fonts/Sora-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/Sora-Variable.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --obsidian: #09080D;
  --plum: #28172C;
  --plum-deep: #170D1A;
  --amethyst: #B196FF;
  --amber: #FFBA78;
  --ivory: #F3EEE5;
  --mist: #BBB2C5;

  --line: rgba(177, 150, 255, 0.16);
  --line-strong: rgba(177, 150, 255, 0.34);
  --surface: rgba(23, 13, 26, 0.62);
  --danger: #FF9DAF;

  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'General Sans', 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --measure: 34rem;
  --pad: clamp(20px, 5vw, 64px);

  color-scheme: dark;
}

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

/* display:grid/flex would otherwise defeat the [hidden] attribute. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
  overflow-x: hidden;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 900px) { body { font-size: 19px; } }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------ background */

#horizon {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  /* If neither WebGL nor the 2D canvas starts, this gradient remains. */
  background:
    radial-gradient(58% 42% at 50% 38%, rgba(255, 186, 120, 0.10), transparent 62%),
    radial-gradient(90% 70% at 50% 40%, rgba(40, 23, 44, 0.92), transparent 78%),
    var(--obsidian);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* The light impulse fires only after a committed write. */
.flash {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(48% 40% at 50% 34%, rgba(255, 186, 120, 0.55), transparent 70%);
}

.flash.is-firing { animation: flash 1500ms cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes flash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}

/* -------------------------------------------------------------- structure */

main, .topline, .foot { position: relative; z-index: 2; }

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 20;
  background: var(--amber);
  color: var(--obsidian);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 500;
}
.skip:focus { left: 16px; }

.topline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: clamp(18px, 3vw, 28px) var(--pad);
  font-size: 12px;
  color: var(--mist);
}

.topline__name { letter-spacing: 0.02em; }
.topline__phase { font-size: 11px; letter-spacing: 0.22em; color: var(--amethyst); }

.wrap {
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.wrap--narrow { max-width: 46rem; }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(72px + env(safe-area-inset-top, 0px)) var(--pad) clamp(28px, 6vh, 56px);
}

/* Portrait composition: the hole occupies the top band and the copy starts
   below it. Without this reserved space the heading sits inside the ring —
   which is exactly what the review found on mobile. The renderer places the
   hole at 15.5% of the viewport height with a radius of 15.5% of the smaller
   dimension, so the text column begins past the outer edge of its glow. */
@media (max-aspect-ratio: 95/100) {
  .hero {
    padding-top: calc(clamp(184px, 30vh, 320px) + env(safe-area-inset-top, 0px));
  }
}

/* Local shading behind the copy.
   The hole sits in the right third on desktop and high up in portrait, so the
   ring no longer crosses the text — but the disk still throws light across the
   column while it turns. This scrim is anchored to the text, so the copy stays
   readable at every frame of the animation rather than only at rest. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(9, 8, 13, 0.88) 0%, rgba(9, 8, 13, 0.78) 26%,
    rgba(9, 8, 13, 0.34) 44%, rgba(9, 8, 13, 0) 58%);
}

@media (max-width: 900px) {
  .hero::before {
    inset: 18% 0 0;
    background: linear-gradient(180deg,
      rgba(9, 8, 13, 0) 0%, rgba(9, 8, 13, 0.72) 16%, rgba(9, 8, 13, 0.93) 38%);
  }
}

@media (max-height: 680px) and (max-width: 900px) {
  .hero__question { font-size: clamp(30px, 8.5vw, 42px) !important; }
  .hero__lead { font-size: 16px; margin-bottom: 18px; }
  .reading__value { font-size: clamp(28px, 6.5vw, 38px); }
  .hero__hint { display: none; }
}

.hero__inner { width: 100%; max-width: 46rem; position: relative; }

.hero__question {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 6.6vw, 82px);
  line-height: 0.96;
  letter-spacing: -0.036em;
  margin: 0 0 clamp(18px, 3vh, 30px);
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(9, 8, 13, 0.9);
}

.hero__lead {
  max-width: var(--measure);
  margin: 0 0 clamp(22px, 3.4vh, 32px);
  text-shadow: 0 1px 24px rgba(9, 8, 13, 0.95);
}

.hero__act { margin: 0 0 clamp(24px, 3.8vh, 34px); }

.hero__hint {
  margin: clamp(22px, 4vh, 44px) 0 0;
  font-size: 12px;
  color: var(--mist);
  opacity: 0.55;
}

@media (min-width: 900px) {
  .hero { justify-content: center; padding-bottom: clamp(40px, 7vh, 72px); }
  /* Bottom right, so it never collides with the disclosure on the left. */
  .hero__hint { position: absolute; bottom: 26px; right: var(--pad); left: auto; margin: 0; text-align: right; }
}

/* A short desktop window has no room for the hint at all. */
@media (min-width: 900px) and (max-height: 820px) {
  .hero__hint { display: none; }
  .hero__question { font-size: clamp(36px, 5.6vw, 66px); }
}

/* --------------------------------------------------------------- buttons */

.impulse-button {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  padding: 15px 30px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  color: #1A0F06;
  background: linear-gradient(180deg, #FFD6A8, var(--amber) 62%, #E79A55);
  box-shadow: 0 0 0 1px rgba(255, 186, 120, 0.5), 0 14px 44px -18px rgba(255, 186, 120, 0.9);
  transition: transform 160ms ease, box-shadow 220ms ease, filter 160ms ease;
}

.impulse-button:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 0 1px rgba(255, 186, 120, 0.7), 0 18px 54px -18px rgba(255, 186, 120, 1);
}
.impulse-button:active { transform: translateY(1px); }
.impulse-button--submit { width: 100%; text-align: center; margin-top: 4px; }
.impulse-button[disabled] { opacity: 0.55; cursor: progress; }

.ghost-button {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ivory);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.ghost-button:hover { border-color: var(--amber); background: rgba(255, 186, 120, 0.08); }
.ghost-button--danger { color: var(--mist); }
.ghost-button--danger:hover { border-color: var(--danger); background: rgba(255, 157, 175, 0.08); color: var(--danger); }

.button-row { display: flex; flex-wrap: wrap; gap: 10px; }

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------------------------- reading */

.reading { max-width: 32rem; }

.reading__value {
  font-size: clamp(34px, 7.5vw, 60px);
  font-weight: 500;
  line-height: 1;
  margin: 0;
}

.reading__skeleton {
  font-size: 14px;
  font-weight: 400;
  color: var(--mist);
  opacity: 0.7;
}

.reading__unit { margin: 6px 0 16px; font-size: 14px; color: var(--mist); }

.rail { position: relative; height: 2px; background: var(--line); border-radius: 2px; }

.rail__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, rgba(177, 150, 255, 0.5), var(--amber));
  border-radius: 2px;
  transition: width 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rail__mark {
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 14px 2px rgba(255, 186, 120, 0.8);
  transition: left 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reading__threshold { margin: 12px 0 0; font-size: 12px; color: var(--mist); }

/* ------------------------------------------------------------ disclosure */

.disclosure { margin-top: 16px; }

.disclosure > summary {
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  color: var(--amethyst);
  list-style: none;
  padding: 4px 0;
  border-bottom: 1px solid var(--line-strong);
  transition: color 160ms ease, border-color 160ms ease;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary:hover { color: var(--amber); border-color: var(--amber); }
.disclosure[open] > summary { margin-bottom: 18px; }

.disclosure__body { max-width: var(--measure); }
.disclosure--return { margin-top: 32px; }

/* -------------------------------------------------------------- sections */

.band {
  padding: clamp(64px, 12vh, 132px) 0;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(9, 8, 13, 0.88), rgba(23, 13, 26, 0.94));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.band--join { background: linear-gradient(180deg, rgba(23, 13, 26, 0.94), rgba(40, 23, 44, 0.9)); }
.band--archive { background: linear-gradient(180deg, rgba(23, 13, 26, 0.94), rgba(9, 8, 13, 0.97)); }

.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 4.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  margin: 0 0 20px;
}

.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.018em;
  margin: 56px 0 14px;
}

.prose { max-width: var(--measure); margin: 0 0 22px; }
.prose--small { font-size: 15px; color: var(--mist); }

/* ---------------------------------------------------------------- ledger */

.ledger { margin: 24px 0 20px; border-top: 1px solid var(--line); }

.ledger__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.ledger dt { font-size: 15px; color: var(--mist); margin: 0; }
.ledger dd { margin: 0; font-size: 18px; }

.ledger__row--sum dt { color: var(--ivory); }
.ledger__row--sum dd { font-size: 22px; color: var(--amber); }

.ledger__tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 11px;
  color: var(--amethyst);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ form */

.panel {
  margin-top: 32px;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.form { display: grid; gap: 22px; }
.form--inline { gap: 16px; margin-top: 16px; }

.field { display: grid; gap: 7px; border: 0; padding: 0; margin: 0; min-width: 0; }

.field label, .field legend {
  font-size: 15px;
  font-weight: 500;
  color: var(--ivory);
  padding: 0;
}

.field__opt { font-weight: 400; color: var(--mist); font-size: 13px; }

.field input[type="text"], .field input[type="email"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ivory);
  background: rgba(9, 8, 13, 0.68);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color 160ms ease, background 160ms ease;
}

.field input::placeholder { color: rgba(187, 178, 197, 0.55); }
.field input:focus { border-color: var(--amber); background: rgba(9, 8, 13, 0.85); outline: none; }
.field input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.field input[aria-invalid="true"] { border-color: var(--danger); }

.field__help { margin: 0; font-size: 13px; color: var(--mist); }
.field--choice legend { margin-bottom: 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.chip span {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 15px;
  color: var(--mist);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.chip:hover span { color: var(--ivory); border-color: var(--amethyst); }
.chip input:checked + span { color: var(--obsidian); background: var(--amethyst); border-color: var(--amethyst); }
.chip input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 3px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { margin: 0; font-size: 15px; min-height: 1.4em; }
.form__status.is-error { color: var(--danger); }
.form__status.is-ok { color: var(--amber); }
.form__status.is-busy { color: var(--mist); }

/* ------------------------------------------------------------- node card */

.node-card { display: grid; gap: 20px; }
.node-card__kicker { margin: 0; font-size: 14px; color: var(--amethyst); }

.node-card__id {
  margin: 0;
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 500;
  line-height: 1;
  color: var(--amber);
}

.node-card__meta {
  display: grid;
  gap: 14px;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.node-card__meta > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.node-card__meta dt { font-size: 14px; color: var(--mist); }
.node-card__meta dd { margin: 0; font-size: 15px; text-align: right; }

.recovery {
  border: 1px solid rgba(255, 186, 120, 0.4);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  gap: 10px;
}
.recovery__label { margin: 0; font-size: 13px; color: var(--amber); }
.recovery__key { margin: 0; font-size: 15px; word-break: break-all; }

.node-card__note { margin: 0; font-size: 14px; color: var(--mist); }

/* --------------------------------------------------------- constellation */

.constellation {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 2;
  min-height: 190px;
  margin: 24px 0 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(60% 90% at 50% 50%, rgba(40, 23, 44, 0.55), transparent 72%),
    rgba(9, 8, 13, 0.45);
  overflow: hidden;
}

.constellation__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--amethyst);
  box-shadow: 0 0 10px 1px rgba(177, 150, 255, 0.55);
}

.constellation__dot--recent {
  background: var(--amber);
  box-shadow: 0 0 14px 2px rgba(255, 186, 120, 0.8);
}

.constellation__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: var(--mist);
  padding: 20px;
  text-align: center;
}

/* ------------------------------------------------------------------- log */

.log { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); }

.log__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.log__head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.log__code { font-family: var(--font-mono); font-size: 13px; color: var(--amethyst); }
.log__time { font-family: var(--font-mono); font-size: 12px; color: var(--mist); opacity: 0.75; }
.log__detail { font-size: 15px; margin: 0; }
.log__more { margin: 20px 0 0; }

.log__empty, .chapters__empty, .tally__empty {
  color: var(--mist);
  font-size: 15px;
  padding: 14px 0;
  list-style: none;
}

@media (min-width: 720px) {
  .log__item { grid-template-columns: 15rem 1fr; gap: 16px; align-items: baseline; }
  .log__head { flex-direction: column; gap: 2px; }
}

/* -------------------------------------------------------------- chapters */

.chapters { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); }
.chapter { padding: 22px 0; border-bottom: 1px solid var(--line); }
.chapter__head { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.chapter__number { font-family: var(--font-mono); font-size: 14px; color: var(--amethyst); }

.chapter__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.018em;
  margin: 0;
}

.chapter__state {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--mist);
}
.chapter__state--published { color: var(--amber); border-color: rgba(255, 186, 120, 0.45); }

.chapter__summary { margin: 8px 0 0; font-size: 15px; color: var(--mist); max-width: var(--measure); }
.chapter__body { margin: 14px 0 0; max-width: var(--measure); font-size: 16px; }
.chapter__body p { margin: 0 0 14px; }

.chapter details > summary {
  cursor: pointer;
  margin-top: 12px;
  font-size: 14px;
  color: var(--amethyst);
  list-style: none;
}
.chapter details > summary::-webkit-details-marker { display: none; }
.chapter details > summary::before { content: '+ '; }
.chapter details[open] > summary::before { content: '– '; }

/* --------------------------------------------------------------- tallies */

.tally { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 40rem; }

.tally__row {
  display: grid;
  grid-template-columns: 9rem 1fr 4rem;
  gap: 12px;
  align-items: center;
  font-size: 15px;
}
.tally__bar { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.tally__bar span { display: block; height: 100%; background: var(--amethyst); }
.tally__count { font-family: var(--font-mono); font-size: 14px; text-align: right; color: var(--mist); }

@media (max-width: 520px) {
  .tally__row { grid-template-columns: 1fr 3.5rem; }
  .tally__bar { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------- archive */

.archive-mark {
  display: inline-block;
  margin: 0 0 24px;
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 12px;
  color: var(--amethyst);
}

.archive { max-width: var(--measure); }
.archive article + article { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }

.archive__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  margin: 0 0 12px;
  letter-spacing: -0.018em;
}
.archive__body p { margin: 0 0 14px; color: var(--mist); }
.archive__body p:first-of-type { color: var(--ivory); }

/* ---------------------------------------------------------------- footer */

.foot {
  border-top: 1px solid var(--line);
  padding: 48px 0 calc(48px + env(safe-area-inset-bottom, 0px));
  background: var(--obsidian);
}
.foot__line { max-width: var(--measure); margin: 0 0 14px; font-size: 14px; color: var(--mist); }
.foot__line--dim { font-size: 12px; opacity: 0.7; }

.noscript-note {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 18px var(--pad);
  background: rgba(255, 186, 120, 0.1);
  border-top: 1px solid rgba(255, 186, 120, 0.35);
  color: var(--amber);
  font-size: 14px;
}

/* --------------------------------------------------------- reduced motion */

@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;
  }
  .flash.is-firing { opacity: 0; }
}

/* ----------------------------------------------------------- high contrast */

@media (prefers-contrast: more) {
  :root { --mist: #D7D1DE; --line: rgba(177, 150, 255, 0.4); }
  .band { background: rgba(9, 8, 13, 0.97); }
}

@media print {
  #horizon, .grain, .flash, .constellation { display: none; }
  body { background: #fff; color: #000; }
}


/* ======================================================================
   v2.1 additions
   ====================================================================== */

/* ------------------------------------------------------- preview banner */

.preview-bar {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) var(--pad) 12px;
  background: rgba(177, 150, 255, 0.14);
  border-bottom: 1px solid var(--line-strong);
  font-size: 14px;
  color: var(--ivory);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.preview-bar strong { color: var(--amethyst); }

/* ---------------------------------------------------------- hero promise */

.hero__promise {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  max-width: var(--measure);
  margin: 0 0 clamp(22px, 3.4vh, 32px);
  font-size: 15px;
  color: var(--mist);
  padding-left: 16px;
  border-left: 2px solid rgba(255, 186, 120, 0.45);
}

.hero__promise-mark {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--amber);
  white-space: nowrap;
}

.hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

.quiet-link {
  color: var(--amethyst);
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.quiet-link:hover { border-color: var(--amethyst); }

/* --------------------------------------------------------------- genesis */

.band--genesis {
  background: linear-gradient(180deg, rgba(9, 8, 13, 0.9), rgba(28, 16, 32, 0.95));
}

.kicker {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
}

.prose--lead { font-size: 18px; max-width: 42rem; }

.genesis-meter { margin: 0 0 32px; max-width: 32rem; }
.genesis-meter__bar {
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.genesis-meter__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(177, 150, 255, 0.6), var(--amber));
  transition: width 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.genesis-meter__text { margin: 10px 0 0; font-size: 13px; color: var(--mist); }

.release { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }

.release__item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.release__item.is-locked { opacity: 0.86; }

.release__locked {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--mist);
  padding-left: 14px;
  border-left: 1px solid rgba(255, 186, 120, 0.4);
}

/* The horizon carries a raised state once the release is open. */
body.is-open .kicker { color: var(--amethyst); }
body.is-open .release__item { opacity: 1; }

/* --------------------------------------------------------------- sources */

.sources { margin-top: 16px; }
.sources > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--amethyst);
  list-style: none;
}
.sources > summary::-webkit-details-marker { display: none; }
.sources > summary::before { content: '↗ '; }
.sources ul { margin: 12px 0 0; padding-left: 18px; }
.sources li { font-size: 14px; color: var(--mist); margin-bottom: 8px; }
.sources a { color: var(--amethyst); word-break: break-word; }
.sources a:hover { color: var(--amber); }

.chapter__state--sourced { color: var(--amethyst); border-color: var(--line-strong); }

.next-release {
  margin: 24px 0 0;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  font-size: 15px;
  color: var(--mist);
  max-width: var(--measure);
}
.next-release strong { color: var(--ivory); }

/* ------------------------------------------------------------ plain list */

.plain-list { margin: 0; padding-left: 18px; }
.plain-list li { font-size: 15px; color: var(--mist); margin-bottom: 12px; }
.plain-list strong { color: var(--ivory); }

/* ------------------------------------------------------- your own node */

.constellation__dot--mine {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--amber);
  box-shadow: 0 0 0 2px rgba(255, 186, 120, 0.35), 0 0 22px 4px rgba(255, 186, 120, 0.9);
  z-index: 2;
}

.constellation__dot.is-pulsing { animation: dotPulse 900ms ease-in-out 3; }

@keyframes dotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.9); }
}

.constellation__mine {
  position: absolute;
  left: 14px;
  bottom: 10px;
  margin: 0;
  font-size: 13px;
  color: var(--amber);
}

/* ------------------------------------------------------------ small bits */

.ghost-button--small { padding: 6px 14px; font-size: 13px; }

.form__status.is-warn { color: var(--amber); }

.field--challenge { gap: 10px; }
#turnstileWidget { min-height: 65px; }

.recovery__note { margin: 0; font-size: 13px; color: var(--mist); }
.node-card__note--dim { font-size: 13px; opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .constellation__dot.is-pulsing { animation: none; outline: 2px solid var(--amber); outline-offset: 3px; }
}