/* ============================================================
   NELLWATSON.COM — "THE COVER" · a full-content design impression
   Vast air · enormous Fraunces · one brass fitting · slow light
   Pages: cover / about / library / stage / research / projects /
          playground / contact / variations
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url(/assets/impression/669a5caf9d5c99aba1527be4.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url(/assets/impression/2a24bad466f09b88b8e9cbc4.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url(/assets/impression/011e0ca2bd14c5dff94aa4c6.woff2) format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url(/assets/impression/ef95296c778719c3d658a828.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url(/assets/impression/efd94eb5c51ddfccfc1bf7b2.woff2) format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #131029;
  --ink-2: #1b1735;
  --paper: #faf9f5;
  --paper-2: #f3f1e9;
  --text: #232038;
  --muted: #5c5773;
  --line: #e2dfd6;
  --gold: #d0b160;
  --gold-deep: #826b36;
  --teal: #3a7679;
  --night-text: #efedf6;
  --night-muted: #9d97b8;
  --night-line: rgba(208, 177, 96, 0.35);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14111f;
    --paper-2: #1a1628;
    --text: #e4e1ee;
    --muted: #a29dbb;
    --line: #2e2945;
    --teal: #8fc3c5;
    --gold-deep: #c8a856;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #14111f;
  --paper-2: #1a1628;
  --text: #e4e1ee;
  --muted: #a29dbb;
  --line: #2e2945;
  --teal: #8fc3c5;
  --gold-deep: #c8a856;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --ink: #131029;
  --paper: #faf9f5;
  --paper-2: #f3f1e9;
  --text: #232038;
  --muted: #5c5773;
  --line: #e2dfd6;
  --teal: #3a7679;
  --gold-deep: #826b36;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--text);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-feature-settings: "liga", "onum";
}

/* Grain needs a positioned host or the overlay resolves against the page. */
.grain { position: relative; }
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.32 0 0 0 0 0.28 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared vocabulary ---------- */
.kicker {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.night .kicker { color: var(--gold); }
.rule { width: 3.5rem; height: 1px; border: 0; background: var(--gold); }
.numeral {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 144;
  font-weight: 350;
  font-size: 0.95rem;
  letter-spacing: 0.35em;
  color: var(--gold-deep);
}
.night .numeral { color: var(--gold); }

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-weight: 430;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: inherit;
}

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-deep); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- reveal choreography ---------- */
.rv { opacity: 0; transform: translateY(14px); }
.rv.on {
  opacity: 1; transform: none;
  transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1), transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: var(--d, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- the hairline nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1.2rem, 4vw, 2.6rem);
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
.nav.scrolled { background: rgba(19, 16, 41, 0.84); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(208, 177, 96, 0.25); }
.monogram {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: 0.98rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: var(--gold);
  text-decoration: none;
}
.monogram:hover { color: #ecd9a4; }
.nav-links { display: flex; flex-wrap: wrap; gap: clamp(0.7rem, 1.9vw, 1.7rem); justify-content: flex-end; }
.nav-links a {
  font-size: 0.63rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--night-muted);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a[aria-current="page"] { color: var(--night-text); border-color: var(--gold); }
/* Light-hero pages: ink nav until scrolled */
body[data-route="about"] .nav:not(.scrolled) .nav-links a,
body[data-route="research"] .nav:not(.scrolled) .nav-links a,
body[data-route="projects"] .nav:not(.scrolled) .nav-links a,
body[data-route="contact"] .nav:not(.scrolled) .nav-links a { color: var(--muted); }
body[data-route="about"] .nav:not(.scrolled) .nav-links a[aria-current="page"],
body[data-route="research"] .nav:not(.scrolled) .nav-links a[aria-current="page"],
body[data-route="projects"] .nav:not(.scrolled) .nav-links a[aria-current="page"],
body[data-route="contact"] .nav:not(.scrolled) .nav-links a[aria-current="page"] { color: var(--text); }
body[data-route="about"] .nav:not(.scrolled) .nav-links a:hover,
body[data-route="research"] .nav:not(.scrolled) .nav-links a:hover,
body[data-route="projects"] .nav:not(.scrolled) .nav-links a:hover,
body[data-route="contact"] .nav:not(.scrolled) .nav-links a:hover { color: var(--gold-deep); }
body[data-route="about"] .nav:not(.scrolled) .monogram,
body[data-route="research"] .nav:not(.scrolled) .monogram,
body[data-route="projects"] .nav:not(.scrolled) .monogram,
body[data-route="contact"] .nav:not(.scrolled) .monogram { color: var(--gold-deep); }

/* ---------- pages ---------- */
main[data-page] { display: none; }
main[data-page].active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  main[data-page].active { animation: pagein 0.6s ease both; }
  @keyframes pagein { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- bands ---------- */
.band { position: relative; padding: clamp(4.5rem, 10vh, 7.5rem) 1.5rem; }
.band-inner { max-width: 66rem; margin: 0 auto; }
.band-head { display: grid; gap: 1.4rem; margin-bottom: clamp(2.4rem, 5vh, 3.6rem); }
.band h2 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
.prose { max-width: 62ch; }
.prose p + p { margin-top: 1.2em; }
.lede { font-size: 1.22rem; line-height: 1.75; }

/* light hero (about / research / projects / variations) */
.day-hero { background: var(--paper); padding: clamp(8.5rem, 16vh, 11rem) 1.5rem clamp(3.5rem, 7vh, 5rem); position: relative; overflow: hidden; }
.hero-sigil {
  position: absolute;
  top: clamp(9rem, 20vh, 12rem);
  right: clamp(2rem, 10vw, 8rem);
  width: clamp(6rem, 13vw, 9rem);
  color: var(--gold);
  opacity: 0.32;
  pointer-events: none;
}
.hero-sigil svg { width: 100%; height: auto; display: block; }
@media (max-width: 52rem) { .hero-sigil { display: none; } }
.plate-sigil { width: 2.1rem; margin: 0 auto 1.4rem; color: var(--gold); opacity: 0.75; }
.plate-sigil svg { width: 100%; height: auto; display: block; }
.day-hero .band-inner { display: grid; gap: 1.5rem; }
.day-hero h1 { font-size: clamp(2.8rem, 7.5vw, 5.8rem); font-weight: 400; }
.day-hero .lede { color: var(--muted); font-style: italic; max-width: 52ch; }

/* ============================================================
   THE COVER
   ============================================================ */
.cover {
  position: relative;
  min-height: 88svh;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 110%, #2a2151 0%, rgba(42, 33, 81, 0) 55%),
    linear-gradient(180deg, #0b0919 0%, #131029 46%, #1d1740 100%);
  color: var(--night-text);
  overflow: hidden;
  padding: 7rem 1.5rem 6rem;
}
.starfield { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover-inner { position: relative; display: grid; justify-items: center; gap: 1.7rem; max-width: 60rem; }
.cover-mandala { width: clamp(8rem, 20vw, 12rem); color: var(--gold); opacity: 0.92; }
.cover-mandala svg { width: 100%; height: auto; display: block; }

.cover .kicker { color: var(--gold); opacity: 0.92; }
.cover h1 { font-size: clamp(3rem, 9.5vw, 7rem); font-weight: 380; color: #f4f2fa; line-height: 1.0; }
.cover h1 .surname { font-weight: 560; }
.roles {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.4rem 1.4rem;
  font-size: 0.78rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--night-muted);
}
.roles span { white-space: nowrap; }
.roles .sep { color: var(--gold); letter-spacing: 0; }
.cover-lede { max-width: 34rem; font-size: 1.02rem; line-height: 1.85; color: #c9c4dd; font-style: italic; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 0.65rem;
  color: var(--night-muted);
  font-size: 0.62rem; letter-spacing: 0.4em; text-transform: uppercase;
  text-decoration: none;
}
.scroll-cue:hover { color: var(--gold); }
.scroll-cue .stem { width: 1px; height: 3rem; background: linear-gradient(var(--gold), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue .stem { animation: stem 2.6s ease-in-out infinite; transform-origin: top; }
  @keyframes stem { 0%, 100% { transform: scaleY(0.55); opacity: 0.5; } 50% { transform: scaleY(1); opacity: 1; } }
}

/* --- the work --- */
.work { background: var(--paper); }
.work .band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}
@media (max-width: 46rem) { .work .band-inner { grid-template-columns: 1fr; } }
.portrait { position: relative; }
.portrait img { display: block; width: 100%; height: auto; filter: grayscale(0.15) contrast(1.02); }
.portrait::after {
  content: "";
  position: absolute;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border: 1px solid var(--gold);
  opacity: 0.55;
  pointer-events: none;
}
.credo {
  margin-top: 2.6rem;
  padding-left: 1.4rem;
  border-left: 1px solid var(--gold);
  font-style: italic;
  color: var(--muted);
  max-width: 46ch;
  text-indent: -0.45em;
}
.wayfinding { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; }
.wayfinding a {
  font-size: 0.7rem; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--gold-deep); text-decoration: none;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--line);
  transition: border-color 0.4s ease;
}
.wayfinding a:hover { border-color: var(--gold); }

/* --- gallery (books teaser) --- */
.gallery {
  background:
    radial-gradient(90% 70% at 50% 0%, #221b45 0%, rgba(34, 27, 69, 0) 60%),
    linear-gradient(180deg, #100d22 0%, #161230 100%);
  color: var(--night-text);
}
.gallery .band-head { justify-items: center; text-align: center; }
.shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 8vw, 8rem);
  max-width: 56rem;
  margin: 0 auto;
}
@media (max-width: 46rem) { .shelf { grid-template-columns: 1fr; max-width: 22rem; } }
.tome { display: grid; gap: 1.6rem; justify-items: center; text-align: center; align-content: start; }
.tome .cover-img {
  display: block;
  width: min(100%, 19rem);
  height: auto;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 14px 40px rgba(0,0,0,0.55), 0 30px 90px rgba(0,0,0,0.4);
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}
@media (prefers-reduced-motion: no-preference) {
  .tome:hover .cover-img { transform: translateY(-8px); box-shadow: 0 2px 3px rgba(0,0,0,0.5), 0 22px 55px rgba(0,0,0,0.6), 0 45px 110px rgba(0,0,0,0.45); }
}
.tome h3 { font-size: 1.65rem; font-weight: 470; font-style: italic; color: #f0edf8; }
.tome .imprint { font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--night-muted); }
.tome .desc { font-size: 0.95rem; color: #b7b1cf; max-width: 30ch; line-height: 1.7; }
.acquire {
  font-size: 0.72rem; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--night-line);
  transition: border-color 0.4s ease, color 0.4s ease;
}
.acquire:hover { color: #ecd9a4; border-color: var(--gold); }
.gallery-note {
  margin: clamp(3.5rem, 8vh, 6rem) auto 0;
  text-align: center; font-style: italic;
  color: var(--night-muted); font-size: 0.95rem; max-width: 44ch;
}
.gallery-note a { color: var(--gold); }

/* --- explore grid: the clear site map --- */
.explore { background: var(--paper); }
.explore .band-head { justify-items: center; text-align: center; }
.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2px;
  border: 1px solid var(--line);
  background: var(--line);
  max-width: 66rem;
  margin: 0 auto;
}
.explore-cell {
  background: var(--paper);
  padding: 2.2rem 1.9rem 2rem;
  display: grid;
  gap: 0.7rem;
  align-content: start;
  text-decoration: none;
  color: inherit;
  transition: background 0.4s ease;
}
.explore-cell:hover { background: var(--paper-2); }
.explore-cell h3 { font-size: 1.3rem; font-weight: 470; }
.explore-cell p { font-size: 0.92rem; color: var(--muted); line-height: 1.6; }
.explore-cell .go { font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-deep); }

/* --- the commonplace book (rotating aphorisms) --- */
.commonplace {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  text-align: center;
  padding: clamp(6rem, 13vh, 9rem) 1.5rem;
}
.commonplace .band-inner { max-width: 46rem; display: grid; justify-items: center; gap: 2rem; }
.aphorism-stage { position: relative; min-height: 13rem; width: 100%; display: grid; place-items: center; }
@media (max-width: 40rem) { .aphorism-stage { min-height: 18.5rem; } }
.aphorism {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 100;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 440;
  line-height: 1.45;
  font-style: italic;
  color: var(--text);
  opacity: 0;
  transition: opacity 1.6s ease;
  text-wrap: balance;
}
.aphorism.lit { opacity: 1; }
.aphorism-inner { display: block; }
.aphorism .q { display: block; }
.aphorism .src {
  display: block;
  margin-top: 1.1rem;
  font-family: "Source Serif 4", Georgia, serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.commonplace .quotes-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 1.55rem;
  border: 1px solid var(--gold-deep);
  border-radius: 999px;
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.commonplace .quotes-cta:hover,
.commonplace .quotes-cta:focus-visible {
  background: var(--gold-deep);
  color: var(--paper);
  border-color: var(--gold-deep);
}
.commonplace .aphorism-next {
  display: inline-block;
  appearance: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0.2rem 0;
  background: transparent;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  cursor: pointer;
}
.commonplace .aphorism-next:hover,
.commonplace .aphorism-next:focus-visible { color: var(--text); }

@media (prefers-reduced-motion: reduce) { .aphorism { transition: none; } }

/* --- library page --- */
.library-hero {
  position: relative;
  padding: clamp(9rem, 18vh, 12rem) 1.5rem clamp(5rem, 9vh, 7rem);
  text-align: center;
  background:
    radial-gradient(90% 80% at 50% 115%, #241c4b 0%, rgba(36, 28, 75, 0) 60%),
    linear-gradient(180deg, #0c0a1b 0%, #131029 100%);
  color: var(--night-text);
}
.library-hero .band-inner { display: grid; justify-items: center; gap: 1.6rem; }
.library-hero h1 { font-size: clamp(3rem, 8vw, 6.4rem); font-weight: 400; color: #f4f2fa; }
.library-hero .lede { color: #c9c4dd; font-style: italic; max-width: 38rem; }

.volume { color: var(--night-text); }
.volume .band-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(3rem, 8vw, 7rem);
  align-items: center;
  max-width: 62rem;
}
@media (max-width: 46rem) { .volume .band-inner { grid-template-columns: 1fr; } }
.volume.flip .band-inner > figure { order: 2; }
@media (max-width: 46rem) { .volume.flip .band-inner > figure { order: 0; } }
.volume figure { display: grid; justify-items: center; }
.volume .cover-img {
  width: min(100%, 21rem); height: auto; display: block;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 18px 50px rgba(0,0,0,0.55), 0 40px 110px rgba(0,0,0,0.4);
}
.volume .v-text { display: grid; gap: 1.3rem; justify-items: start; }
.volume h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-style: italic; font-weight: 460; color: #f2eff9; }
.volume .imprint { font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--night-muted); }
.volume p { color: #bfb9d6; max-width: 52ch; }
.volume-1 { background: linear-gradient(180deg, #131029 0%, #171233 100%); }
.volume-2 { background: linear-gradient(180deg, #171233 0%, #120f26 100%); }

.reading-room {
  background: linear-gradient(180deg, #120f26 0%, #0e0b1e 100%);
  color: var(--night-text);
  text-align: center;
}
.reading-room .band-head { justify-items: center; }
.galleys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2px;
  max-width: 58rem;
  margin: 0 auto;
  border: 1px solid rgba(208, 177, 96, 0.22);
  background: rgba(208, 177, 96, 0.22);
}
.galley {
  background: #131029;
  padding: 3.2rem 2rem 2.8rem;
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  align-content: start;
  text-decoration: none;
  transition: background 0.5s ease;
}
.galley:hover { background: #1a1538; }
.galley .g-title { font-size: 1.7rem; line-height: 1.15; color: #eee9dc; text-wrap: balance; }
.galley.g-cinzel .g-title { font-family: "Cinzel", "Fraunces", serif; font-weight: 400; letter-spacing: 0.06em; }
.galley.g-cormorant .g-title { font-family: "Cormorant Garamond", "Fraunces", serif; font-style: italic; font-weight: 500; font-size: 2rem; }
.galley.g-fraunces .g-title { font-family: "Fraunces", serif; font-variation-settings: "opsz" 144; font-weight: 480; }
.galley .g-state { font-size: 0.62rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--night-muted); }
.galley .g-line { width: 2rem; height: 1px; background: var(--gold); opacity: 0.6; }

/* --- the stage --- */
.stage { position: relative; color: var(--night-text); padding: 0; }
.stage-img { position: absolute; inset: 0; }
.stage-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.stage-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(11,9,25,0.92) 0%, rgba(11,9,25,0.72) 45%, rgba(11,9,25,0.28) 100%);
}
.stage-inner {
  position: relative;
  max-width: 66rem; margin: 0 auto;
  padding: clamp(7.5rem, 17vh, 12rem) 1.5rem;
  display: grid; gap: 1.6rem; justify-items: start;
}
.stage h1 { font-size: clamp(2.8rem, 6.5vw, 5rem); color: #f4f2fa; max-width: 15ch; }
.stage .lede { color: #cfc9e2; max-width: 44ch; }
.stage-cta {
  margin-top: 1.2rem;
  font-size: 0.72rem; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  padding: 1rem 2.2rem;
  border: 1px solid var(--night-line);
  transition: border-color 0.4s ease, background 0.4s ease;
}
.stage-cta:hover { border-color: var(--gold); background: rgba(208, 177, 96, 0.08); }

/* --- lectern (speaking topics) --- */
.lectern { background: var(--paper); }
.topics { display: grid; gap: 0; max-width: 58rem; margin: 0 auto; }
.topic {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
  padding: clamp(2.4rem, 5vh, 3.6rem) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.topic:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 40rem) { .topic { grid-template-columns: 1fr; gap: 0.8rem; } }
.topic .numeral { padding-top: 0.55rem; }
.topic h3 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); font-weight: 470; margin-bottom: 0.5rem; }
.topic p { color: var(--muted); max-width: 60ch; }
.formats-note { margin: clamp(3rem, 6vh, 4rem) auto 0; max-width: 58rem; font-style: italic; color: var(--muted); }

/* --- testimonials --- */
.plaudits { background: var(--paper-2); border-top: 1px solid var(--line); }
.plaudits .band-head { justify-items: center; text-align: center; }
.plaudit-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(2.4rem, 5vw, 4rem);
  max-width: 62rem;
  margin: 0 auto;
}
.plaudit { display: grid; gap: 1.1rem; align-content: start; }
.plaudit .rule { width: 2.2rem; }
.plaudit blockquote {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 100;
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--text);
}
.plaudit cite { font-style: normal; font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); }

/* --- ledger rows (research / projects / about-now) --- */
.ledger-list { background: var(--paper); padding-top: 0; }
.entry {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1.15fr) minmax(0, 1.85fr);
  gap: 1rem 2.5rem;
  padding: clamp(2rem, 4.5vh, 3rem) 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.entry:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 46rem) { .entry { grid-template-columns: 1fr; gap: 0.6rem; } }
.entry h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); font-weight: 470; }
.entry .body { color: var(--muted); font-size: 0.98rem; max-width: 60ch; }
.entry .body p + p { margin-top: 0.8em; }
.entry .where { font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: 0.5rem; }

/* category heads within a long ledger */
.cat-head { display: flex; align-items: baseline; gap: 1.6rem; margin: clamp(4rem, 9vh, 6rem) 0 1.2rem; }
.cat-head:first-of-type { margin-top: 0; }
.cat-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 460; }
.cat-head .numeral { font-size: 0.8rem; }

/* publications */
.pub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 2.5rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.pub:last-of-type { border-bottom: 1px solid var(--line); }
.pub h3 { font-size: 1.12rem; font-weight: 470; font-style: italic; line-height: 1.4; }
.pub .meta { font-size: 0.85rem; color: var(--muted); }
.pub .year { font-size: 0.7rem; letter-spacing: 0.28em; color: var(--gold-deep); white-space: nowrap; }
.pubs-note { margin-top: 2rem; font-style: italic; color: var(--muted); font-size: 0.95rem; max-width: 60ch; }

/* --- four questions (standards) --- */
.questions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2px;
  border: 1px solid var(--line);
  background: var(--line);
  max-width: 62rem;
  margin: 0 auto;
}
.question {
  background: var(--paper);
  padding: 2.8rem 2rem;
  display: grid;
  gap: 0.9rem;
  align-content: start;
}
.question h3 {
  font-size: 1.45rem;
  font-weight: 460;
  font-style: italic;
}
.question .std { font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-deep); }
.question p { font-size: 0.92rem; color: var(--muted); }

/* --- about page --- */
.story { background: var(--paper); }
.story .band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(3rem, 7vw, 6rem);
  align-items: start;
}
@media (max-width: 46rem) { .story .band-inner { grid-template-columns: 1fr; } }
.story .portrait { position: sticky; top: 7rem; }
.focus-list { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: 0; max-width: 34rem; }
.focus-list li {
  padding: 1.05rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.focus-list li:last-child { border-bottom: 1px solid var(--line); }
.andrews {
  background: var(--ink);
  color: var(--night-text);
  text-align: center;
}
.andrews .band-inner { max-width: 50rem; display: grid; justify-items: center; gap: 2rem; }
.andrews blockquote {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 130;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-weight: 420;
  font-style: italic;
  line-height: 1.4;
  color: #ece9f4;
}
.andrews p { color: var(--night-muted); font-size: 0.98rem; max-width: 58ch; }

/* --- playground (the parlour) --- */
.parlour-hero {
  position: relative;
  padding: clamp(9rem, 18vh, 12rem) 1.5rem clamp(4.5rem, 8vh, 6.5rem);
  text-align: center;
  background:
    radial-gradient(100% 80% at 50% 115%, #24204d 0%, rgba(36, 32, 77, 0) 62%),
    linear-gradient(180deg, #0c0a1b 0%, #14112b 100%);
  color: var(--night-text);
}
.parlour-hero .band-inner { display: grid; justify-items: center; gap: 1.6rem; }
.parlour-hero h1 { font-size: clamp(3rem, 8vw, 6.4rem); font-weight: 400; color: #f4f2fa; }
.parlour-hero .lede { color: #c9c4dd; font-style: italic; max-width: 40rem; }
.parlour { background: linear-gradient(180deg, #14112b 0%, #100d22 100%); color: var(--night-text); }
.parlour .band-head { justify-items: center; text-align: center; }
.cabinet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 2px;
  border: 1px solid rgba(208, 177, 96, 0.2);
  background: rgba(208, 177, 96, 0.2);
  max-width: 70rem;
  margin: 0 auto;
}
.game {
  background: #14112b;
  padding: 2.6rem 2rem 2.4rem;
  display: grid;
  gap: 0.85rem;
  align-content: start;
  text-decoration: none;
  transition: background 0.5s ease;
}
.game:hover { background: #1b1738; }
.game h3 { font-size: 1.32rem; font-weight: 470; color: #efecdc; font-style: italic; }
.game p { font-size: 0.9rem; line-height: 1.65; color: #aaa4c4; }
.game .g-tag { font-size: 0.58rem; letter-spacing: 0.38em; text-transform: uppercase; color: var(--gold); opacity: 0.8; }

/* --- contact --- */
.parley {
  background: var(--paper);
  min-height: 88vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(10rem, 20vh, 14rem) 1.5rem clamp(7rem, 14vh, 10rem);
}
.parley .band-inner { display: grid; justify-items: center; gap: 2rem; max-width: 46rem; }
.parley h1 { font-size: clamp(2.8rem, 8vw, 5.8rem); font-weight: 400; }
.parley .lede { color: var(--muted); font-style: italic; max-width: 34rem; }
.cform { width: 100%; max-width: 36rem; display: grid; gap: 1.5rem; text-align: left; margin-top: 0.6rem; }
.cform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 34rem) { .cform .row2 { grid-template-columns: 1fr; } }
.cform label {
  display: grid; gap: 0.45rem;
  font-size: 0.64rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted);
}
.cform .opt { text-transform: none; letter-spacing: 0.06em; font-size: 0.7rem; }
.cform input, .cform textarea {
  font-family: inherit; font-size: 1.02rem; color: var(--text);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 0.5rem 0.1rem; border-radius: 0;
}
.cform input:focus, .cform textarea:focus { outline: none; border-bottom-color: var(--gold); }
.cform textarea { resize: vertical; min-height: 7rem; }
.cform button {
  justify-self: start; margin-top: 0.4rem;
  font-family: inherit; font-size: 0.72rem; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--gold-deep); background: none; border: 1px solid var(--gold);
  padding: 1rem 2.4rem; cursor: pointer;
  transition: background 0.4s ease, color 0.4s ease;
}
.cform button:hover { background: rgba(208, 177, 96, 0.12); }
.cform-sent { font-style: italic; color: var(--muted); padding: 2rem 0; }
.parley .fine { font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); }

/* --- the whisper row --- */
.press { background: var(--paper); text-align: center; padding: clamp(5rem, 10vh, 7rem) 1.5rem; }
.press .kicker { font-size: 0.62rem; opacity: 0.85; }
.press-row {
  margin: 2.8rem auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 2.8rem 3.6rem;
  max-width: 58rem;
}
.press-row img {
  height: 1.15rem; width: auto;
  filter: grayscale(1) brightness(0.35) contrast(0.6);
  opacity: 0.55;
  transition: opacity 0.4s ease;
}
.press-row img:hover { opacity: 0.9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .press-row img { filter: grayscale(1) invert(1) brightness(1.1) contrast(0.5); }
}
:root[data-theme="dark"] .press-row img { filter: grayscale(1) invert(1) brightness(1.1) contrast(0.5); }
:root[data-theme="light"] .press-row img { filter: grayscale(1) brightness(0.35) contrast(0.6); }

/* --- colophon --- */
.colophon { background: var(--paper-2); border-top: 1px solid var(--line); }
.colophon .band-inner { max-width: 44rem; text-align: center; display: grid; justify-items: center; gap: 1.6rem; }
.colophon h2 { font-size: 1.9rem; font-weight: 470; font-style: italic; }
.colophon p { color: var(--muted); font-size: 0.98rem; }

/* --- footer plate --- */
.plate {
  background: var(--ink);
  color: var(--night-muted);
  text-align: center;
  padding: 3.4rem 1.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.plate .rule { margin: 0 auto 1.6rem; opacity: 0.6; }
.plate strong { color: var(--gold); font-weight: 400; }
.plate-fine { margin-top: 1.6rem; font-size: 0.6rem; letter-spacing: 0.26em; color: var(--night-muted); opacity: 0.7; }
.plate nav { margin-top: 1.4rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.4rem; }
.plate nav a { color: var(--night-muted); text-decoration: none; letter-spacing: 0.3em; }
.plate nav a:hover { color: var(--gold); }

/* ---------- the shelf: both books stand the same height ----------
   The covers were sized by width, so the two trim sizes stood at different
   heights and every line beneath them fell out of step. Height governs now;
   widths differ, as real books do. */
.tome .cover-img { width: auto; height: clamp(17rem, 26vw, 25rem); max-width: 100%; }
@media (max-width: 46rem) { .tome .cover-img { height: auto; width: min(100%, 19rem); } }

/* ---------- the mark, beside the wordmark ---------- */
.monogram { display: inline-flex; align-items: center; gap: 0.62rem; }
.nw-mark { width: 1.72rem; height: 1.72rem; display: block; flex: none; }

/* ---------- contact: make required fields explicit before submission ---------- */
.cform .req {
  color: var(--muted); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: none;
}

/* ---------- scrollbars: one piece of site furniture, in every room ---------- */
:root {
  --nw-scroll-track: color-mix(in srgb, var(--paper) 90%, var(--ink) 10%);
  --nw-scroll-thumb:
    color-mix(in srgb, var(--gold-deep) 62%, var(--muted) 38%);
  --nw-scroll-hover: var(--gold-deep);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--nw-scroll-thumb) var(--nw-scroll-track);
}
*::-webkit-scrollbar {
  width: 0.72rem;
  height: 0.72rem;
}
*::-webkit-scrollbar-track {
  background: var(--nw-scroll-track);
}
*::-webkit-scrollbar-thumb {
  min-height: 2.5rem;
  background: var(--nw-scroll-thumb);
  border: 0.18rem solid var(--nw-scroll-track);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--nw-scroll-hover);
}
*::-webkit-scrollbar-thumb:active {
  background: var(--gold);
}
*::-webkit-scrollbar-corner {
  background: var(--nw-scroll-track);
}
.night, .selected-press, .tt-lab, .play-room {
  --nw-scroll-track: #100d22;
  --nw-scroll-thumb: #8d7847;
  --nw-scroll-hover: #d0b160;
}
/* The document scrollbar belongs to <html>, outside the routed room. Carry a
   night-first route's palette up to it so a dark Books or Playground page
   never inherits a pale track from the visitor's light theme. */
html:has(main.active > .night:first-child) {
  --nw-scroll-track: #100d22;
  --nw-scroll-thumb: #8d7847;
  --nw-scroll-hover: #d0b160;
}

/* ---------- published jackets: dimensional objects, not floating rectangles ---------- */
.volume figure {
  perspective: 72rem;
  perspective-origin: 50% 42%;
  overflow: visible;
}
.published-cover {
  --book-depth: 0.78rem;
  --book-turn: 6deg;
  --book-hover-turn: 0.9deg;
  --book-roll: -0.25deg;
  --book-light-x: 16%;
  --book-light-y: 8%;
  position: relative;
  display: block;
  width: min(100%, 21rem);
  isolation: isolate;
  transform-style: preserve-3d;
  transform-origin: left center;
  transform:
    translate3d(0, 0, 0)
    rotateY(var(--book-turn))
    rotateX(-1.15deg)
    rotateZ(var(--book-roll));
  /* A filter on the transformed parent forces browsers to flatten the whole
     jacket into a softer intermediate bitmap. The dedicated cast-shadow plane
     below supplies the depth while the cover itself stays at native clarity. */
  transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
.volume-2 .published-cover {
  --book-turn: 6deg;
  --book-hover-turn: 0.9deg;
  --book-roll: 0.25deg;
  transform-origin: left center;
}
.published-cover .book-cast-shadow {
  position: absolute;
  inset: 6% 3% 2% 5%;
  z-index: 0;
  display: block;
  background: rgba(0, 0, 0, 0.66);
  border-radius: 4px;
  filter: blur(1.35rem);
  opacity: 0.66;
  transform: translate3d(0.75rem, 1.2rem, -1.6rem) rotateZ(0.7deg);
  transition:
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.72s ease;
  pointer-events: none;
}
.published-cover .book-back-board {
  position: absolute;
  inset: 1px;
  z-index: 1;
  display: block;
  border: 1px solid rgba(236, 225, 198, 0.13);
  border-radius: 2px;
  background:
    linear-gradient(100deg, #0b0917, #211a35 68%, #0d0a18);
  box-shadow:
    0.34rem 0.42rem 0 rgba(7, 5, 13, 0.9),
    0.6rem 0.75rem 0.85rem rgba(0, 0, 0, 0.28);
  transform: translateZ(0);
  pointer-events: none;
}
/* Page depth belongs exclusively on the fore edge. A full backing sheet can
   peek beneath a pitched jacket as a false horizontal page line. */
.published-cover .book-page-edge {
  position: absolute;
  z-index: 3;
  display: block;
  border: 1px solid rgba(62, 48, 33, 0.2);
  background-color: #b2a58e;
  background-image:
    linear-gradient(90deg,
      rgba(255, 250, 235, 0.6), rgba(157, 137, 107, 0.44)),
    repeating-linear-gradient(0deg,
      rgba(68, 51, 33, 0.22) 0 1px,
      rgba(247, 240, 219, 0.28) 1px 3px,
      rgba(91, 71, 47, 0.14) 3px 4px);
  box-shadow: inset 0 0 0.42rem rgba(45, 30, 18, 0.22);
  pointer-events: none;
}
.published-cover .book-page-fore {
  top: 0.22rem;
  bottom: 0.32rem;
  left: calc(100% - 0.18rem);
  width: var(--book-depth);
  transform-origin: left center;
  transform: translateZ(var(--book-depth)) rotateY(90deg);
}
.published-cover-picture { position: relative; z-index: 4; display: block; }
.volume .published-cover .cover-img {
  position: relative;
  z-index: 4;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1px;
  box-shadow:
    inset 0.22rem 0 0.45rem rgba(0, 0, 0, 0.18);
  transform: translateZ(var(--book-depth));
  backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}
.published-cover .book-jacket-finish {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  overflow: hidden;
  border-radius: 1px;
  background:
    linear-gradient(112deg, transparent 33%,
      rgba(255, 255, 255, 0.23) 46%, transparent 59%),
    radial-gradient(ellipse at var(--book-light-x) var(--book-light-y),
      rgba(255, 255, 255, 0.16), transparent 31%),
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.32) 0,
      rgba(255, 255, 255, 0.1) 1.1%,
      rgba(0, 0, 0, 0.08) 2.1%,
      transparent 5.4%,
      transparent 95%,
      rgba(0, 0, 0, 0.2) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.58' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  background-size: 250% 100%, 100% 100%, 100% 100%, 10rem 10rem;
  background-position: 138% 0, 0 0, 0 0, 0 0;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset -1px 0 0 rgba(255, 255, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 1.25rem rgba(0, 0, 0, 0.14);
  mix-blend-mode: soft-light;
  opacity: 0.2;
  transform: translateZ(calc(var(--book-depth) + 1px));
  transition:
    background-position 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.45s ease;
  pointer-events: none;
}
.published-cover:is(:hover, :focus-visible) {
  transform:
    translate3d(0, -0.62rem, 1.1rem)
    rotateY(var(--book-hover-turn))
    rotateX(-0.35deg)
    rotateZ(0deg);
}
.published-cover:is(:hover, :focus-visible) .book-cast-shadow {
  opacity: 0.48;
  transform: translate3d(0.8rem, 1.65rem, -1.9rem) rotateZ(0.2deg) scale(1.035);
}
.published-cover:is(:hover, :focus-visible) .book-jacket-finish {
  background-position: -120% 0, 0 0, 0 0, 0 0;
  opacity: 0.32;
}
.book-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.4rem;
}
.book-actions .acquire { display: inline-block; }
.book-actions .book-site { color: var(--night-muted); }
.book-actions .book-site:hover,
.book-actions .book-site:focus-visible { color: #ecd9a4; }

/* ---------- web galleys: the virtual jackets from the classic Books page ---------- */
.galleys {
  grid-template-columns: repeat(auto-fit, 13.5rem);
  justify-content: center;
  gap: clamp(1.8rem, 5vw, 4.2rem);
  max-width: 58rem;
  border: 0;
  background: transparent;
}
.galley {
  padding: 0;
  gap: 0.95rem;
  align-content: start;
  background: transparent;
  perspective: 52rem;
  perspective-origin: 50% 40%;
}
.galley:hover { background: transparent; }
.galley-cover {
  --gc-bg: #17142e;
  --gc-border: rgba(208, 177, 96, 0.45);
  --gc-frame: rgba(208, 177, 96, 0.25);
  --gc-title: #eee9dc;
  --gc-sub: #bcb5d2;
  --gc-author: #9d97b8;
  --gc-accent: #d0b160;
  --book-depth: 0.48rem;
  --book-light-x: 18%;
  --book-light-y: 12%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.58rem;
  width: 100%;
  aspect-ratio: 2 / 3;
  padding: 2.9rem 1rem;
  text-align: center;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.34) 0,
      rgba(255, 255, 255, 0.055) 2.6%,
      transparent 7%,
      transparent 93%,
      rgba(0, 0, 0, 0.2) 100%),
    var(--gc-bg);
  border: 1px solid var(--gc-border);
  border-radius: 2px;
  box-shadow:
    0.12rem 0.1rem 0 rgba(230, 225, 211, 0.12),
    0.38rem 0.32rem 0 rgba(3, 2, 8, 0.56),
    -0.48rem 0.68rem 1.3rem rgba(0, 0, 0, 0.3),
    0 0.65rem 1.7rem rgba(0, 0, 0, 0.28),
    inset 0.28rem 0 0.5rem rgba(0, 0, 0, 0.24),
    inset -1px 0 0 rgba(255, 255, 255, 0.07),
    inset 0 0 1.4rem rgba(0, 0, 0, 0.08);
  filter: drop-shadow(0.2rem 0.85rem 0.7rem rgba(0, 0, 0, 0.24));
  isolation: isolate;
  overflow: visible;
  transform: rotateY(4.5deg) rotateX(-0.9deg) rotateZ(-0.12deg);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition:
    transform 0.62s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.62s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.62s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.galley-cover > .book-page-edge {
  position: absolute;
  z-index: 1;
  display: block;
  border: 1px solid rgba(65, 49, 31, 0.22);
  background-color: #b2a58e;
  box-shadow: inset 0 0 0.32rem rgba(47, 31, 18, 0.22);
  pointer-events: none;
}
.galley-cover > .book-page-fore {
  top: 0.11rem;
  bottom: 0.14rem;
  right: -0.11rem;
  left: auto;
  width: 0.22rem;
  border-radius: 0 0.26rem 0.26rem 0;
  transform: translate3d(0, 0, -0.36rem);
  background-image:
    linear-gradient(90deg,
      rgba(255, 251, 236, 0.56), rgba(155, 133, 101, 0.46)),
    repeating-linear-gradient(0deg,
      rgba(74, 54, 33, 0.2) 0 1px,
      rgba(245, 237, 216, 0.27) 1px 3px,
      rgba(91, 70, 45, 0.13) 3px 4px);
}
.galley-cover > .book-cover-face {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.34) 0,
      rgba(255, 255, 255, 0.055) 2.6%,
      transparent 7%,
      transparent 93%,
      rgba(0, 0, 0, 0.2) 100%),
    var(--gc-bg);
  box-shadow:
    inset 0.28rem 0 0.5rem rgba(0, 0, 0, 0.24),
    inset -1px 0 0 rgba(255, 255, 255, 0.07),
    inset 0 0 1.4rem rgba(0, 0, 0, 0.08);
  pointer-events: none;
}
.galley-cover::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--gc-frame);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.2),
    0 0 1.15rem rgba(0, 0, 0, 0.1);
  pointer-events: none;
  z-index: 5;
}
.galley-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 37%,
      rgba(255, 255, 255, 0.16) 49%, transparent 61%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.56'/%3E%3C/svg%3E"),
    radial-gradient(circle at var(--book-light-x) var(--book-light-y),
      rgba(255, 255, 255, 0.14), transparent 31%),
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.18), transparent 5%,
      transparent 95%, rgba(0, 0, 0, 0.15)),
    repeating-linear-gradient(93deg,
      rgba(255, 255, 255, 0.045) 0 0.45px,
      transparent 0.45px 3.8px);
  background-size: 250% 100%, 8.75rem 8.75rem, 100% 100%, 100% 100%, auto;
  background-position: 138% 0, 0 0, 0 0, 0 0, 0 0;
  mix-blend-mode: soft-light;
  opacity: 0.34;
  pointer-events: none;
  z-index: 3;
  transition: background-position 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease;
}
.galley-cover > span:not(.book-page-edge):not(.book-cover-face) {
  z-index: 4;
}
.galley:is(:hover, :focus-visible) .galley-cover {
  transform:
    translate3d(0, -0.48rem, 0.9rem)
    rotateY(0.8deg)
    rotateX(-1.2deg)
    rotateZ(0deg);
  box-shadow:
    0.14rem 0.12rem 0 rgba(230, 225, 211, 0.12),
    0.34rem 0.3rem 0 rgba(3, 2, 8, 0.46),
    -0.72rem 1.05rem 1.85rem rgba(0, 0, 0, 0.34),
    0 1.25rem 2.5rem rgba(0, 0, 0, 0.36),
    inset 0.28rem 0 0.5rem rgba(0, 0, 0, 0.2),
    inset -1px 0 0 rgba(255, 255, 255, 0.1),
    inset 0 0 1.3rem rgba(0, 0, 0, 0.06);
  filter: drop-shadow(0.22rem 1.25rem 1.05rem rgba(0, 0, 0, 0.3));
}
.galley:is(:hover, :focus-visible) .galley-cover::after {
  background-position: -120% 0, 0 0, 0 0, 0 0, 0 0;
  opacity: 0.48;
}
.galley .g-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  line-height: 1.4;
}
.galley .g-blurb {
  display: block;
  width: calc(100% + 2rem);
  min-height: 4.5rem;
  margin-inline: -1rem;
  color: #aaa4c4;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.76rem;
  font-style: italic;
  line-height: 1.6;
  hyphens: none;
  text-align: justify;
  text-align-last: center;
  text-justify: inter-word;
  text-wrap: pretty;
}
.galley .g-state::before, .galley .g-state::after {
  content: "";
  width: 1.15rem;
  border-top: 1px solid rgba(208, 177, 96, 0.34);
  transform: scaleX(0.45);
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.galley:is(:hover, :focus-visible) .g-state::before,
.galley:is(:hover, :focus-visible) .g-state::after {
  border-color: rgba(208, 177, 96, 0.75);
  transform: scaleX(1);
}
.galley-cover .g-title {
  color: var(--gc-title);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.62),
    0 -1px 0 rgba(255, 255, 255, 0.11),
    0 0 0.9rem color-mix(in srgb, var(--gc-accent) 17%, transparent);
}
.gc-emblem {
  position: absolute;
  top: 8.5%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  color: var(--gc-accent);
}
.gc-emblem svg, .gc-emblem img {
  display: block;
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 0.4rem color-mix(in srgb, var(--gc-accent) 34%, transparent));
}
.gc-rule {
  width: 2.2rem;
  border-top: 1px solid var(--gc-accent);
  box-shadow: 0 0 0.45rem
    color-mix(in srgb, var(--gc-accent) 36%, transparent);
}
.gc-sub {
  color: var(--gc-sub);
  font-size: 0.62rem;
  line-height: 1.5;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.gc-author {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7.5%;
  color: var(--gc-author);
  font-size: 0.56rem;
  line-height: 1.5;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.52);
}
.gc-deeperlaw {
  --gc-bg: #0d0d0f;
  --gc-border: #6b5a2e;
  --gc-frame: rgba(201, 168, 76, 0.4);
  --gc-sub: #c9a84c;
  --gc-author: #9a8f7d;
  --gc-accent: #c9a84c;
}
.gc-deeperlaw .gc-sub {
  font-family: "Cormorant Garamond", "Fraunces", serif;
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 0.03em;
  text-transform: none;
}
.gc-wiwf {
  --gc-bg: #3a2830;
  --gc-border: #76575f;
  --gc-frame: rgba(242, 232, 224, 0.22);
  --gc-sub: #e0bfb2;
  --gc-author: #c4a8a0;
  --gc-accent: #c98a7a;
}
.gc-wiwf .gc-emblem svg { transform: scale(1.04); }
.gc-wiwf .gc-sub {
  font-family: "Cormorant Garamond", "Fraunces", serif;
  font-size: 0.76rem;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
}
.gc-psychopathia {
  --gc-bg: #0f1923;
  --gc-border: #3d566f;
  --gc-frame: rgba(109, 154, 184, 0.32);
  --gc-title: #e0e6ec;
  --gc-sub: #89b3cc;
  --gc-author: #5a7a98;
  --gc-accent: #6d9ab8;
}
.gc-psychopathia .g-title {
  font-size: 1.6rem;
  line-height: 1.22;
}
.gc-psychopathia .gc-emblem svg { transform: scale(0.87); }
.gc-psychopathia .gc-rule { margin-top: 0.28rem; }
.gc-psychopathia .gc-sub {
  position: relative;
  top: 0.18rem;
  line-height: 1.62;
}
@media (prefers-reduced-motion: reduce) {
  .published-cover,
  .published-cover .book-cast-shadow,
  .published-cover .book-jacket-finish { transition: none; }
  .published-cover:is(:hover, :focus-visible) {
    transform:
      rotateY(var(--book-turn))
      rotateX(-1.15deg)
      rotateZ(var(--book-roll));
    filter:
      drop-shadow(-0.45rem 0.7rem 0.55rem rgba(0, 0, 0, 0.24))
      drop-shadow(0.15rem 1.65rem 1.6rem rgba(0, 0, 0, 0.34));
  }
  .published-cover:is(:hover, :focus-visible) .book-cast-shadow {
    opacity: 0.66;
    transform: translate3d(0.75rem, 1.2rem, -1.6rem) rotateZ(0.7deg);
  }
  .published-cover:is(:hover, :focus-visible) .book-jacket-finish {
    background-position: 138% 0, 0 0, 0 0, 0 0;
    opacity: 0.34;
  }
  .galley-cover { transition: none; }
  .galley-cover::after {
    transition: none;
    background-position: 138% 0, 0 0, 0 0, 0 0, 0 0;
  }
  .galley .g-state::before, .galley .g-state::after { transition: none; }
  .galley:is(:hover, :focus-visible) .galley-cover {
    transform: rotateY(4.5deg) rotateX(-0.9deg) rotateZ(-0.12deg);
    filter: drop-shadow(0.2rem 0.85rem 0.7rem rgba(0, 0, 0, 0.24));
  }
  .galley:is(:hover, :focus-visible) .galley-cover::after {
    background-position: 138% 0, 0 0, 0 0, 0 0, 0 0;
  }
}

/* ---------- writing: the long notebook ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 2.4rem; }
.filters button {
  font-family: inherit; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0.5rem 1rem; background: none; border: 1px solid var(--line);
  color: var(--muted); cursor: pointer; transition: color 0.35s ease, border-color 0.35s ease;
}
.filters button:hover { border-color: var(--gold); color: var(--gold-deep); }
.filters button.on { background: var(--ink); border-color: var(--ink); color: var(--gold); }
.piece {
  display: grid; grid-template-columns: 3.4rem 8.5rem minmax(0, 1fr); gap: 1.6rem;
  padding: 1.45rem 0; border-top: 1px solid var(--line); align-items: center;
}
.piece:last-of-type { border-bottom: 1px solid var(--line); }
.piece .when { font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-deep); }
.piece h3 { font-size: 1.16rem; font-weight: 460; margin-bottom: 0.3rem; }
.piece p { font-size: 0.93rem; color: var(--muted); font-style: italic; }
.pthumb {
  width: 3.4rem; height: 3.4rem; border-radius: 4px; object-fit: cover;
  display: block; filter: saturate(0.82);
  transition: filter 0.35s ease, transform 0.35s ease;
}
.piece:hover .pthumb { filter: saturate(1); transform: scale(1.04); }
.pthumb-blank {
  display: grid; place-items: center; background: var(--ink);
  color: var(--gold); font-family: "Fraunces", Georgia, serif;
  font-size: 1.5rem; font-style: italic;
}
@media (max-width: 44rem) {
  .piece { grid-template-columns: 2.9rem 1fr; gap: 0.35rem 0.9rem; }
  .pthumb { width: 2.9rem; height: 2.9rem; grid-row: 1 / span 2; }
  .piece .when, .piece > div { grid-column: 2; }
}

/* ---------- the cover: the full height of the screen ----------
   88svh left a sliver of the next band intruding on a MacBook; the opening
   now owns the whole viewport. The mandala grows a step with the room —
   thicker strokes in device pixels render cleaner at every scale. */
.cover { min-height: 100svh; }
.cover-mandala { width: clamp(9rem, 21vw, 13.5rem); }
/* Snap the responsive size during CSS layout where supported. Unlike the
   former late JavaScript correction, this can never move the artwork after
   it has already been painted. */
@supports (width: round(nearest, 1px, 1px)) {
  .cover-mandala {
    width: round(nearest, clamp(9rem, 21vw, 13.5rem), 1px);
  }
}

/* ---------- speaking: the film archive ----------
   Every recorded talk as a card on the night band: still, title, and a
   quiet play mark that warms on hover. The grid packs to the viewport. */
.talks-film {
  background:
    radial-gradient(90% 70% at 50% 0%, #221b45 0%, rgba(34, 27, 69, 0) 60%),
    linear-gradient(180deg, #100d22 0%, #161230 100%);
  color: var(--night-text);
}
.talks-film h2, .talks-film .lede { color: var(--night-text); }
.talks-film .lede { max-width: 44rem; margin-bottom: 2.8rem; }
.talkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 2.2rem 2rem; }
.talkcard { text-decoration: none; color: inherit; display: block; }
.talkthumb {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 5px; background: #0b0919; margin-bottom: 0.8rem;
}
.talkthumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.78) brightness(0.92); transition: filter 0.35s ease, transform 0.45s ease;
}
.talkcard:hover .talkthumb img { filter: saturate(1) brightness(1); transform: scale(1.035); }
.tplay {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.15rem; color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75); transition: color 0.3s ease;
}
.talkcard:hover .tplay { color: var(--gold); }
.talkthumb-blank { display: block; background: linear-gradient(135deg, #1a1533, #0e0b1f); }
.talkcard h3 {
  font-size: 0.98rem; font-weight: 460; line-height: 1.4; color: var(--night-text);
  transition: color 0.3s ease;
}
.talkcard:hover h3 { color: var(--gold); }

/* ---------- press: the outlet emblems, the fuller assembly ----------
   The home strip's own treatment (grayscale, muted, waking on hover),
   left-aligned to the band's measure so it reads as part of the record,
   not a centrepiece. */
.press-emblems {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.5rem 2.9rem; max-width: 56rem; margin: 0 0 3rem;
}
.press-emblems button {
  /* A 1.2rem wordmark with no padding is a 19px target, and these are the only
     controls that narrow the 199-entry record. The padding lifts them to 32px;
     the selection rule moves out with it so it still underlines the logo. */
  background: none; border: 0; padding: 0.4rem 0.3rem; cursor: pointer; display: block;
  box-shadow: 0 11px 0 -10px transparent; transition: box-shadow 0.3s ease;
}
.press-emblems button.on { box-shadow: 0 11px 0 -10px var(--gold-deep); }
.press-emblems img {
  height: 1.2rem; width: auto; opacity: 0.55; display: block;
  filter: grayscale(1) brightness(0.35) contrast(0.6);
  transition: opacity 0.4s ease;
}
.press-emblems button:hover img, .press-emblems button.on img { opacity: 0.9; }
.emblem-status {
  font-size: 0.8rem; font-style: italic; color: var(--muted);
  margin: -1.6rem 0 2.6rem;
}
.emblem-status[hidden] { display: none; }
.emblem-status button {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--gold-deep); text-decoration: underline;
}
.appearance.efaded { display: none; }
.selected-press .appearance.edimmed { opacity: 0.22; }
.selected-press .appearance { transition: opacity 0.35s ease; }
:root:not([data-theme="light"]) .press-emblems img,
:root[data-theme="dark"] .press-emblems img {
  filter: grayscale(1) invert(1) brightness(1.1) contrast(0.5);
}
:root[data-theme="light"] .press-emblems img {
  filter: grayscale(1) brightness(0.35) contrast(0.6);
}

/* ---------- press: the record of appearances ----------
   min(21rem, 100%) rather than a bare 21rem: a fixed track minimum cannot
   shrink, so on a 375px phone the 336px column overflowed a 327px band and
   body { overflow-x: hidden } clipped the right edge of every title. */
.appearances { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr)); gap: 0 3rem; }
.appearance { display: grid; gap: 0.25rem; padding: 1.15rem 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.appearance h3 { font-size: 1rem; font-weight: 470; font-style: italic; line-height: 1.35; transition: color 0.3s ease; }
a.appearance:hover h3 { color: var(--gold-deep); }
/* An appearance whose recording has gone keeps its row but is not a link, so it must
   not answer to the hover that promises one. */
.appearance.is-offline { cursor: default; }
.appearance .outlet { font-size: 0.76rem; color: var(--muted); }
.appearance .outlet b { font-weight: 400; color: var(--gold-deep); }
/* the selected band borrows the gallery's own night recipe */
.selected-press {
  background:
    radial-gradient(90% 70% at 50% 0%, #221b45 0%, rgba(34, 27, 69, 0) 60%),
    linear-gradient(180deg, #100d22 0%, #161230 100%);
  color: var(--night-text);
}
.selected-press h2 { color: var(--night-text); }
.selected-press .appearance { border-top-color: rgba(255, 255, 255, 0.13); }
.selected-press .appearance h3 { color: var(--night-text); }
.selected-press .appearance:hover h3 { color: var(--gold); }
.selected-press .appearance .outlet { color: var(--night-muted); }
.selected-press .appearance .outlet b { color: var(--gold); }

/* ---------- keyboard wayfinding ----------
   The active route is assigned #page-content by the router. Keep the skip
   control out of sight until a keyboard user asks for it. */
.skip-link {
  position: fixed; z-index: 1000; top: 0.7rem; left: 0.7rem;
  /* Literals, not tokens. --paper inverts with the theme and --ink does not,
     so the pair collapsed to #14111f on #131029 — 1.00:1 — for every visitor
     in dark mode, on the one control that exists purely for keyboard use.
     These two are the design's own ink and page, held still in both themes:
     #f4f1e8 on #131029 is 16.4:1. */
  padding: 0.72rem 1rem; color: #f4f1e8; background: #131029;
  border: 1px solid var(--gold); text-decoration: none;
  transform: translateY(calc(-100% - 1.5rem));
}
.skip-link:focus { transform: translateY(0); }

/* The recovered sheet's .rv.on rule is more specific than its reduced-motion
   .rv rule, so it accidentally restored the transition. Match that specificity
   and make the intended static reveal unambiguous. */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv.on {
    opacity: 1; transform: none;
    transition: none;
    transition-delay: 0s;
  }
}

/* ===== the brain viewer, scoped to its own page ===== */

/* The live site declares [hidden] { display:none !important } globally; the
   impression does not, so the viewer's own `display:flex` on .bv-loading was
   outliving `loading.hidden = true` and "Viewer ready" never left the page. */
[data-page="brain"] [hidden] { display: none !important; }
[data-page="brain"] {
  --surface: var(--paper);
  --paper-shade: var(--paper-2);
  --text-muted: var(--muted);
  --accent-text: var(--gold-deep);
  --serif: "Fraunces", Georgia, serif;
  --bv-o: var(--muted);
}
[data-page="brain"] h1 { font-family: "Fraunces", Georgia, serif; font-weight: 440;
  font-size: clamp(2.4rem, 5.5vw, 3.8rem); letter-spacing: -0.005em; }
[data-page="brain"] .bv-maxim { color: var(--muted); font-style: italic; }
[data-page="brain"] .lede { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--muted); font-style: italic; }
[data-page="brain"] .wrap { max-width: 74rem; margin: 0 auto; }
[data-page="brain"] .brainv .bv-maxim{
  font-style: italic; color: var(--text-muted);
  margin: 0.2rem 0 1rem; font-size: 1.02rem;
}[data-page="brain"] .brainv .bv-maxim span[lang]{ font-style: normal; letter-spacing: 0.04em; }[data-page="brain"] .brainv .bv-shell{
  margin: 1.8rem 0 0.6rem;
  --bv-bg: #0b0d15; --bv-line: var(--gold); --bv-o: #7f8aa0;
}[data-page="brain"] .brainv .bv-loading{
  min-height: 8rem; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-family: "Source Serif 4", Georgia, serif; font-size: 0.9rem;
  letter-spacing: 0.02em;
}[data-page="brain"] /* mode toggle */
.brainv .bv-modes{ display: flex; gap: 0.4rem; margin-bottom: 1rem; align-items: center; }[data-page="brain"] .brainv .bv-modes-tabs{ display: flex; gap: 0.4rem; align-items: center; }[data-page="brain"] .brainv .bv-modebtn{
  font-family: "Source Serif 4", Georgia, serif; font-size: 0.82rem;
  padding: 0.4rem 0.9rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--text-muted);
}[data-page="brain"] .brainv .bv-modebtn[aria-pressed="true"]{
  background: var(--accent-text); border-color: var(--accent-text); color: #fff;
}[data-page="brain"] .brainv .bv-fullscreen{ margin-left: auto; }[data-page="brain"] /* Only the active view participates in layout. Keeping both panes in the same
   grid cell avoided a small switch-time reflow, [data-page="brain"] but left almost a viewport of
   dead air above the shorter slice viewer. Keep the viewer beside its control. */
.brainv .bv-stage{ min-width: 0; position: relative; }[data-page="brain"] .brainv .bv-hidden{ display: none; }[data-page="brain"] /* 3D viewer */
.brainv .bv-glwrap{
  /* Matches the shader's nebula backdrop so there is no near-black flash
     before WebGL first paints, and so any letterbox edge blends into it. The
     stops are sampled from the shader's own output at the matching radii --
     re-sample them if the nebula is retuned, or the load flash comes back. */
  position: relative;
  background: radial-gradient(120% 95% at 45% 26%, #222f47 0%, #1a2337 42%, #111824 78%, #080a12 100%);
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.7);
}[data-page="brain"] .brainv #bv-gl{
  display: block; width: 100%; height: auto; margin: 0 auto;
  /* Must equal VIEW_ASPECT in the script below. The canvas box is sized by this
     ratio, not by the drawing buffer, so if the two disagree the render is
     stretched to fit rather than letterboxed -- silently, and it reads as a
     distorted head rather than as a bug. */
  cursor: grab; touch-action: none; aspect-ratio: 1.6;
}[data-page="brain"] .brainv #bv-gl:active{ cursor: grabbing; }[data-page="brain"] .brainv .bv-glwrap::after{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 62%, rgba(0,0,0,0.5) 100%);
}[data-page="brain"] .brainv .bv-pick{
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translate3d(var(--pick-x, 0), var(--pick-y, 0), 0);
  transition: opacity 150ms ease, visibility 150ms ease;
}[data-page="brain"] .brainv .bv-pick.is-visible{ opacity: 1; visibility: visible; }[data-page="brain"] .brainv .bv-pick-target{
  position: absolute; left: 0; top: 0; width: 0.72rem; height: 0.72rem;
  border: 1px solid rgba(221, 250, 248, 0.9); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(87, 205, 203, 0.14), 0 0 13px rgba(87, 205, 203, 0.38);
  transform: translate(-50%, -50%);
}[data-page="brain"] .brainv .bv-pick-target::after{
  content: ""; position: absolute; inset: 50% auto auto 50%; width: 2px; height: 2px;
  border-radius: 50%; background: #f4ffff; transform: translate(-50%, -50%);
}[data-page="brain"] .brainv .bv-tip{
  position: absolute; left: 0; top: 0; width: max-content; min-width: 11rem; max-width: min(18rem, 58vw);
  padding: 0.72rem 0.85rem 0.68rem; border: 1px solid rgba(185, 231, 230, 0.24);
  border-radius: 12px; color: #f4f6f8;
  background: linear-gradient(145deg, rgba(17, 23, 35, 0.92), rgba(7, 10, 17, 0.88));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  transform: translate(18px, -50%);
}[data-page="brain"] .brainv .bv-tip::before{
  content: ""; position: absolute; right: 100%; top: 50%; width: 18px; height: 1px;
  background: linear-gradient(90deg, rgba(222, 250, 248, 0.82), rgba(222, 250, 248, 0.18));
}[data-page="brain"] .brainv .bv-tip-kicker{
  display: flex; align-items: center; gap: 0.42rem; margin-bottom: 0.3rem;
  color: rgba(204, 222, 226, 0.78); font: 600 0.7rem/1.15 system-ui, sans-serif;
  letter-spacing: 0.115em; text-transform: uppercase;
}[data-page="brain"] .brainv .bv-tip-swatch{
  width: 0.56rem; height: 0.56rem; flex: 0 0 auto; border-radius: 50%;
  background: var(--swatch, var(--gold)); border: 1px solid rgba(255, 255, 255, 0.48);
  box-shadow: 0 0 10px color-mix(in srgb, var(--swatch, var(--gold)) 65%, transparent);
}[data-page="brain"] .brainv .bv-tip strong{
  display: block; color: #fff; font-family: "Fraunces", Georgia, serif;
  font-size: clamp(0.98rem, 1.45vw, 1.17rem); font-weight: 500; line-height: 1.12;
  letter-spacing: 0.006em;
}[data-page="brain"] .brainv .bv-tip-source{
  display: block; margin-top: 0.34rem; color: rgba(190, 204, 211, 0.66);
  font: 400 0.7rem/1.3 system-ui, sans-serif; letter-spacing: 0.025em;
}[data-page="brain"] .brainv .bv-pick.is-left .bv-tip{ transform: translate(calc(-100% - 18px), -50%); }[data-page="brain"] .brainv .bv-pick.is-left .bv-tip::before{
  left: 100%; right: auto; background: linear-gradient(90deg, rgba(222, 250, 248, 0.18), rgba(222, 250, 248, 0.82));
}[data-page="brain"] .brainv .bv-pick.is-top .bv-tip{ transform: translate(18px, 11px); }[data-page="brain"] .brainv .bv-pick.is-left.is-top .bv-tip{ transform: translate(calc(-100% - 18px), 11px); }[data-page="brain"] .brainv .bv-pick.is-bottom .bv-tip{ transform: translate(18px, calc(-100% - 11px)); }[data-page="brain"] .brainv .bv-pick.is-left.is-bottom .bv-tip{ transform: translate(calc(-100% - 18px), calc(-100% - 11px)); }
@media (prefers-reduced-motion: reduce) {[data-page="brain"] .brainv .bv-pick{ transition: none; }
}[data-page="brain"] .brainv .bv-3d-controls{ margin-top: 1rem; }[data-page="brain"] .brainv .bv-hint{
  font-family: "Source Serif 4", Georgia, serif; font-size: 0.78rem; color: var(--text-muted);
  margin: 0 0 0.7rem;
}[data-page="brain"] .brainv .bv-cut{ display: flex; flex-direction: column; gap: 0.35rem; max-width: 30rem; margin: 0 0 0.9rem; }[data-page="brain"] .brainv .bv-cut label{
  font-family: "Source Serif 4", Georgia, serif; font-size: 0.85rem; color: var(--text); display: flex; align-items: center;
}[data-page="brain"] .brainv .bv-cut input[type="range"]{ width: 100%; accent-color: var(--accent-text); }[data-page="brain"] .brainv .bv-3d-row{ display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0; }[data-page="brain"] .brainv .bv-anat-row{ margin-top: 0.55rem; align-items: center; }[data-page="brain"] .brainv .bv-anat-lbl{
  font-family: "Source Serif 4", Georgia, serif; font-size: 0.85rem; color: var(--text);
  display: inline-flex; align-items: center; margin-right: 0.1rem;
}[data-page="brain"] .brainv .bv-chip{
  font-family: "Source Serif 4", Georgia, serif; font-size: 0.8rem;
  padding: 0.35rem 0.8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--text-muted);
}[data-page="brain"] .brainv .bv-chip.is-on{ background: var(--accent-text); border-color: var(--accent-text); color: #fff; }[data-page="brain"] .brainv .bv-chip[aria-pressed="true"]::before, [data-page="brain"] .brainv .bv-legend-item[aria-pressed="true"]::before{ content: "✓"; margin-right: 0.28rem; font-weight: 800; }[data-page="brain"] .brainv .bv-legend{
  margin-top: 0.85rem; padding: 0.78rem 0.9rem 0.82rem;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 10px; background: color-mix(in srgb, var(--paper-shade) 78%, transparent);
  font-family: "Source Serif 4", Georgia, serif;
}[data-page="brain"] .brainv .bv-legend-title{
  display: block; margin-bottom: 0.56rem; color: var(--text-muted);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
}[data-page="brain"] .brainv .bv-legend-list{ display: flex; flex-wrap: wrap; gap: 0.46rem 0.85rem; }[data-page="brain"] .brainv .bv-legend-item{
  display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text);
  font-size: 0.75rem; line-height: 1.25; white-space: nowrap;
}[data-page="brain"] .brainv .bv-legend-swatch{
  width: 0.62rem; height: 0.62rem; flex: 0 0 auto; border-radius: 50%;
  background: var(--legend-colour); border: 1px solid color-mix(in srgb, #fff 48%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--legend-glow, var(--gold)) 34%, transparent);
}[data-page="brain"] .brainv .bv-legend-note{
  display: block; margin-top: 0.58rem; color: var(--text-muted); font-size: 0.66rem; line-height: 1.35;
}[data-page="brain"] /* Expandable colour key: each group opens to its individual structures. */
.brainv .bv-legend-caret{
  display: inline-block; width: 0; height: 0; margin-left: 0.08rem;
  border-left: 0.32rem solid currentColor;
  border-top: 0.22rem solid transparent; border-bottom: 0.22rem solid transparent;
  opacity: 0.5; transition: transform 130ms ease, opacity 130ms ease;
}[data-page="brain"] .brainv .bv-legend-item[aria-expanded="true"] .bv-legend-caret{ transform: rotate(90deg); opacity: 0.95; }[data-page="brain"] .brainv .bv-legend-detail{
  margin-top: 0.62rem; padding: 0.55rem 0.15rem 0.2rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}[data-page="brain"] .brainv .bv-legend-detail-title{
  display: block; margin-bottom: 0.44rem; color: var(--text-muted);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}[data-page="brain"] .brainv .bv-legend-detail-list{
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem;
  max-height: 14rem; overflow: auto;
}[data-page="brain"] .brainv .bv-legend-region{
  appearance: none; display: inline-flex; align-items: center; gap: 0.34rem;
  padding: 0.16rem 0.34rem; border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--text); cursor: pointer;
  font: 0.68rem system-ui, sans-serif; line-height: 1.2; white-space: nowrap;
}[data-page="brain"] .brainv .bv-legend-region:hover, [data-page="brain"] .brainv .bv-legend-region:focus-visible{
  border-color: color-mix(in srgb, var(--accent-text) 55%, transparent);
  background: color-mix(in srgb, var(--accent-text) 12%, transparent);
}[data-page="brain"] .brainv .bv-shell:fullscreen{
  box-sizing: border-box; width: 100vw; height: 100vh; margin: 0; padding: clamp(0.8rem, 2vw, 1.5rem);
  overflow: auto; background: var(--paper); color: var(--text);
}[data-page="brain"] .brainv .bv-shell:fullscreen::backdrop{
  /* The same nebula palette as the panel, carried down so the surround reads
     as the same sky the viewer sits in rather than as a black void. */
  background: radial-gradient(120% 90% at 47% 32%, #161f31 0%, #0d1119 50%, #05060c 100%);
}[data-page="brain"] .brainv .bv-shell:fullscreen .bv-stage{ min-height: 0 !important; }:root[data-theme="light"] [data-page="brain"] .brainv .bv-shell:fullscreen{
  --bv-bg: #f6f4ef; --bv-line: var(--gold-deep);
  box-shadow: inset 0 0 0 1px rgba(62, 127, 130, 0.08);
}:root[data-theme="dark"] [data-page="brain"] .brainv .bv-shell:fullscreen{
  --bv-bg: #0b0d15; --bv-line: var(--gold);
}
@media (prefers-color-scheme: dark) {:root:not([data-theme="light"]) [data-page="brain"] .brainv .bv-shell:fullscreen{
    --bv-bg: #0b0d15; --bv-line: var(--gold);
  }
}[data-page="brain"] .brainv .bv-shell:fullscreen :is(.bv-modes, [data-page="brain"] .bv-tools, [data-page="brain"] .bv-stage, [data-page="brain"] .bv-learning, [data-page="brain"] .bv-provenance){
  width: min(100%, 110rem); box-sizing: border-box; margin-left: auto; margin-right: auto;
}[data-page="brain"] .brainv .bv-shell:fullscreen .bv-3d{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  gap: clamp(1rem, 2vw, 1.6rem); align-items: start;
}[data-page="brain"] .brainv .bv-shell:fullscreen .bv-3d-controls{ margin-top: 0; }[data-page="brain"] .brainv .bv-shell:fullscreen .bv-glwrap{ align-self: center; }[data-page="brain"] .brainv .bv-shell:fullscreen .bv-grid{ gap: 1rem; }
@media (max-width: 58rem), (max-height: 43rem) {[data-page="brain"] .brainv .bv-shell:fullscreen .bv-3d{ grid-template-columns: 1fr; }[data-page="brain"] .brainv .bv-shell:fullscreen .bv-3d-controls{ margin-top: 0.8rem; }
}[data-page="brain"] /* slices */
.brainv .bv-grid{ display: grid; gap: 0.7rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 44rem) {[data-page="brain"] .brainv .bv-grid{ grid-template-columns: 1fr 1fr; }[data-page="brain"] .brainv .bv-panel[data-plane="sagittal"]{ grid-column: 1 / -1; max-width: 60%; margin: 0 auto; }
}
@media (max-width: 30rem) {[data-page="brain"] .brainv .bv-grid{ grid-template-columns: 1fr; }[data-page="brain"] .brainv .bv-panel[data-plane="sagittal"]{ max-width: 100%; }
}[data-page="brain"] .brainv .bv-panel{
  position: relative; margin: 0;
  background: var(--bv-bg); border: 1px solid var(--line);
  border-radius: 5px; overflow: hidden; box-shadow: inset 0 0 40px rgba(0,0,0,0.6);
}[data-page="brain"] .brainv .bv-cv{ display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; image-rendering: auto; }[data-page="brain"] .brainv .bv-panel::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
}[data-page="brain"] .brainv .bv-panel figcaption{
  position: absolute; left: 0; top: 0;
  font-family: "Source Serif 4", Georgia, serif; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #c9d2e0; background: rgba(11,13,21,0.72);
  padding: 0.2rem 0.5rem; border-bottom-right-radius: 5px; pointer-events: none; z-index: 2;
}[data-page="brain"] .brainv .bv-o{
  position: absolute; z-index: 2; pointer-events: none;
  font-family: ui-monospace, Menlo, monospace; font-size: 0.62rem;
  color: var(--bv-o); text-shadow: 0 0 3px #000;
}[data-page="brain"] .brainv .bv-o-t{ top: 0.25rem; left: 50%; transform: translateX(-50%); }[data-page="brain"] .brainv .bv-o-b{ bottom: 0.25rem; left: 50%; transform: translateX(-50%); }[data-page="brain"] .brainv .bv-o-l{ left: 0.3rem; top: 50%; transform: translateY(-50%); }[data-page="brain"] .brainv .bv-o-r{ right: 0.3rem; top: 50%; transform: translateY(-50%); }[data-page="brain"] .brainv .bv-controls{ margin-top: 1rem; }[data-page="brain"] .brainv .bv-readout{
  font-family: ui-monospace, Menlo, monospace; font-size: 0.82rem;
  color: var(--text-muted); font-variant-numeric: tabular-nums; margin: 0 0 0.7rem; min-height: 1.2em;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem 0.7rem;
}[data-page="brain"] .brainv .bv-readout-region{
  display: inline-flex; align-items: center; gap: 0.42rem; padding: 0.28rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 999px;
  color: var(--text); background: color-mix(in srgb, var(--surface) 84%, transparent);
  font: 600 0.75rem/1.2 system-ui, sans-serif; letter-spacing: 0.01em;
}[data-page="brain"] .brainv .bv-readout-swatch{
  width: 0.48rem; height: 0.48rem; border-radius: 50%; background: var(--readout-swatch);
  border: 1px solid color-mix(in srgb, #fff 55%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--readout-swatch) 55%, transparent);
}[data-page="brain"] .brainv .bv-peel{ display: flex; flex-direction: column; gap: 0.35rem; max-width: 30rem; }[data-page="brain"] .brainv .bv-peel label{ font-family: "Source Serif 4", Georgia, serif; font-size: 0.85rem; color: var(--text); display: flex; align-items: center; }[data-page="brain"] .brainv .bv-peel-arrow{ color: var(--accent-text); margin: 0 0.1rem; }[data-page="brain"] .brainv .bv-peel input[type="range"]{ width: 100%; accent-color: var(--accent-text); }[data-page="brain"] .brainv .bv-fallback, [data-page="brain"] .brainv .bv-foot{ margin-top: 1.2rem; }[data-page="brain"] .brainv .bv-foot{ line-height: 1.6; }[data-page="brain"] /* Search, [data-page="brain"] progress, [data-page="brain"] details, [data-page="brain"] and professional controls. */
.brainv .bv-loading{ flex-direction: column; gap: 0.8rem; }[data-page="brain"] .brainv .bv-loading progress{
  width: min(18rem, 72vw); height: 0.38rem; border: 0; border-radius: 999px;
  overflow: hidden; accent-color: var(--accent-text);
}[data-page="brain"] .brainv .bv-loading progress::-webkit-progress-bar{ background: color-mix(in srgb, var(--line) 35%, transparent); }[data-page="brain"] .brainv .bv-loading progress::-webkit-progress-value{ background: var(--accent-text); }[data-page="brain"] .brainv .bv-modebtn[aria-selected="true"]{
  background: var(--accent-text); border-color: var(--accent-text); color: #fff;
}[data-page="brain"] .brainv .bv-modebtn[aria-selected="true"]::before{ content: "●"; margin-right: 0.32rem; font-size: 0.62em; vertical-align: 0.12em; }[data-page="brain"] .brainv :is(button, [data-page="brain"] input, [data-page="brain"] select, [data-page="brain"] summary, [data-page="brain"] canvas):focus-visible{
  outline: 3px solid color-mix(in srgb, var(--accent-text) 78%, #fff);
  outline-offset: 3px;
}[data-page="brain"] .brainv .bv-tools{
  margin: 0 0 1rem; padding: 0.85rem; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 12px; background: color-mix(in srgb, var(--surface) 76%, transparent);
}[data-page="brain"] .brainv .bv-search-label, [data-page="brain"] .brainv .bv-eyebrow{
  display: block; margin-bottom: 0.38rem; color: var(--text-muted);
  font: 700 0.7rem/1.2 system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
}[data-page="brain"] .brainv .bv-search-row{ display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }[data-page="brain"] .brainv .bv-search-row input{
  flex: 1 1 15rem; min-width: 0; padding: 0.55rem 0.7rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper); color: var(--text); font: 0.84rem system-ui, sans-serif;
}[data-page="brain"] .brainv .bv-tool-status{ min-height: 1em; margin: 0.45rem 0 0; color: var(--text-muted); font: 0.7rem system-ui, sans-serif; }[data-page="brain"] .brainv .bv-cut output, [data-page="brain"] .brainv .bv-peel output{
  margin-left: auto; color: var(--text-muted); font-size: 0.74rem; font-variant-numeric: tabular-nums;
}[data-page="brain"] .brainv .bv-legend-item{
  appearance: none; padding: 0.22rem 0.32rem; border: 1px solid transparent; border-radius: 999px;
  background: transparent; cursor: pointer;
}[data-page="brain"] .brainv .bv-legend-item:hover, [data-page="brain"] .brainv .bv-legend-item[aria-pressed="true"]{
  border-color: color-mix(in srgb, var(--accent-text) 55%, transparent);
  background: color-mix(in srgb, var(--accent-text) 12%, transparent);
}[data-page="brain"] .brainv .bv-calibration, [data-page="brain"] .brainv .bv-orientation, [data-page="brain"] .brainv .bv-provenance{
  margin-top: 0.9rem; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: 10px; padding: 0.72rem 0.85rem; color: var(--text-muted); font: 0.76rem/1.55 system-ui, sans-serif;
}[data-page="brain"] .brainv :is(.bv-calibration, [data-page="brain"] .bv-orientation, [data-page="brain"] .bv-provenance) summary{
  cursor: pointer; color: var(--text); font-weight: 700;
}[data-page="brain"] .brainv .bv-calibration-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1rem; margin: 0.7rem 0; }[data-page="brain"] .brainv .bv-calibration-grid label{ display: grid; gap: 0.25rem; }[data-page="brain"] .brainv .bv-plane-tabs{ display: none; gap: 0.4rem; margin-bottom: 0.65rem; }[data-page="brain"] .brainv .bv-slice-nav{
  display: grid; grid-template-columns: auto auto minmax(8rem, 1fr) 5.1rem auto;
  align-items: center; gap: 0.5rem; margin: 0.7rem 0;
}[data-page="brain"] .brainv .bv-slice-nav label{ color: var(--text); font: 0.78rem system-ui, sans-serif; }[data-page="brain"] .brainv .bv-slice-nav input[type="range"]{ width: 100%; accent-color: var(--accent-text); }[data-page="brain"] .brainv .bv-slice-nav input[type="number"], [data-page="brain"] .brainv .bv-slice-settings select{
  box-sizing: border-box; min-height: 2.25rem; border: 1px solid var(--line); border-radius: 7px;
  background: var(--paper); color: var(--text); padding: 0.35rem 0.5rem;
}[data-page="brain"] .brainv .bv-slice-settings{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem 1rem;
  margin: 0.8rem 0 1rem; padding: 0.75rem; border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}[data-page="brain"] .brainv .bv-slice-settings label{ position: relative; display: grid; gap: 0.3rem; color: var(--text); font: 0.76rem system-ui, sans-serif; }[data-page="brain"] .brainv .bv-slice-settings output{ position: absolute; top: 0; right: 0; color: var(--text-muted); font-variant-numeric: tabular-nums; }[data-page="brain"] .brainv .bv-slice-settings input[type="range"]{ width: 100%; accent-color: var(--accent-text); }[data-page="brain"] .brainv .bv-details{
  position: relative; margin-top: 1rem; padding: 1rem 2.75rem 1rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent-text) 55%, var(--line)); border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--paper) 94%, transparent));
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.12);
}[data-page="brain"] .brainv .bv-details-close{ position: absolute; top: 0.62rem; right: 0.7rem; border: 0; background: transparent; color: var(--text-muted); font-size: 1.35rem; cursor: pointer; }[data-page="brain"] /* Collapse the info card down to its heading. */
.brainv .bv-details-collapse{
  position: absolute; top: 0.68rem; right: 2.3rem; border: 0; background: transparent;
  color: var(--text-muted); font-size: 1.05rem; line-height: 1; cursor: pointer;
  transition: transform 140ms ease;
}[data-page="brain"] .brainv .bv-details.is-collapsed .bv-details-collapse{ transform: rotate(-90deg); }[data-page="brain"] .brainv .bv-details.is-collapsed :is(#bv-details-description, [data-page="brain"] .bv-tour-fact, [data-page="brain"] .bv-tour-caveat, [data-page="brain"] .bv-tour-hint, [data-page="brain"] dl, [data-page="brain"] .bv-details-nav){ display: none !important; }[data-page="brain"] .brainv .bv-details.is-collapsed h2{ margin-bottom: 0.15rem; }[data-page="brain"] /* Collapsible colour key (native <details>). */
.brainv .bv-legend-fold > summary{
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.34rem;
}[data-page="brain"] .brainv .bv-legend-fold > summary::-webkit-details-marker{ display: none; }[data-page="brain"] .brainv .bv-legend-fold > summary::before{
  content: ""; width: 0; height: 0; flex: 0 0 auto;
  border-left: 0.32rem solid currentColor;
  border-top: 0.22rem solid transparent; border-bottom: 0.22rem solid transparent;
  transition: transform 140ms ease; opacity: 0.6;
}[data-page="brain"] .brainv .bv-legend-fold[open] > summary::before{ transform: rotate(90deg); }[data-page="brain"] .brainv .bv-legend-fold > summary{ margin-bottom: 0; }[data-page="brain"] .brainv .bv-legend-fold[open] > summary{ margin-bottom: 0.56rem; }[data-page="brain"] .brainv .bv-details-kicker{ color: var(--accent-text); font: 700 0.7rem/1.2 system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }[data-page="brain"] .brainv .bv-details h2{ margin: 0.3rem 0 0.4rem; font-size: clamp(1.2rem, 3vw, 1.65rem); }[data-page="brain"] .brainv .bv-details p{ margin: 0; color: var(--text-muted); line-height: 1.55; }[data-page="brain"] .brainv .bv-details dl{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; margin: 0.85rem 0 0; }[data-page="brain"] .brainv .bv-details dl div{ padding-top: 0.55rem; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }[data-page="brain"] .brainv .bv-details dt{ color: var(--text-muted); font: 700 0.7rem system-ui, sans-serif; letter-spacing: 0.09em; text-transform: uppercase; }[data-page="brain"] .brainv .bv-details dd{ margin: 0.22rem 0 0; color: var(--text); font: 0.75rem/1.4 system-ui, sans-serif; }[data-page="brain"] .brainv .bv-details-nav{ display: flex; gap: 0.45rem; margin-top: 0.85rem; }[data-page="brain"] /* In the page (layout A): the selected-structure card stays in normal flow
   below the viewer, [data-page="brain"] among the rest of the info -- never floated onto or beside
   the model. During a tour the cut-slider controls hide so the card sits
   directly under the model. */
.brainv .bv-shell.bv-touring .bv-3d-controls{ display: none; }[data-page="brain"] /* Fullscreen guided tour: the caption is a solid bar down the RIGHT side of the
   screen, [data-page="brain"] the model filling the space to its left. Solid --paper-shade (a fully
   opaque theme colour) so the render never shows through the text -- the failure
   of the earlier floating card, [data-page="brain"] which used the alpha-carrying --surface. The
   search row is dropped so the model gets the height; the mode bar stays for
   Exit full screen. */
.brainv .bv-shell.bv-touring:fullscreen .bv-tools{ display: none; }[data-page="brain"] .brainv .bv-shell.bv-touring:fullscreen .bv-stage{ position: relative; min-height: 0 !important; }[data-page="brain"] .brainv .bv-shell.bv-touring:fullscreen .bv-3d{ grid-template-columns: 1fr; }[data-page="brain"] .brainv .bv-shell.bv-touring:fullscreen .bv-glwrap{
  height: calc(100vh - 4.5rem); margin: 0; border: 0; box-shadow: none;
  background: transparent; display: flex; align-items: center; justify-content: center;
  padding-right: min(27rem, 33vw);
}[data-page="brain"] .brainv .bv-shell.bv-touring:fullscreen #bv-gl{
  width: auto; height: 100%; max-width: 100%; max-height: 100%; margin: 0;
}[data-page="brain"] .brainv .bv-shell.bv-touring:fullscreen .bv-details{
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 9; margin: 0;
  width: min(26rem, 32vw); max-height: none; overflow-y: auto;
  padding: 1.5rem 1.6rem;
  border: 0; border-left: 1px solid var(--bv-line, var(--line)); border-radius: 0;
  background: var(--paper-shade);
  box-shadow: -16px 0 44px rgba(0, 0, 0, 0.42);
}[data-page="brain"] .brainv .bv-learning{ margin-top: 1.1rem; }[data-page="brain"] /* One big primary call to action: launch the whole-brain tour, [data-page="brain"] fullscreen. */
.brainv .bv-tour-cta{
  display: flex; align-items: center; gap: 0.9rem; width: 100%; text-align: left;
  padding: 0.95rem 1.15rem; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--accent-text);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent-text) 22%, var(--surface)),
    color-mix(in srgb, var(--accent-text) 8%, var(--surface)));
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}[data-page="brain"] .brainv .bv-tour-cta:hover{
  transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent-text) 30%, var(--surface)),
    color-mix(in srgb, var(--accent-text) 12%, var(--surface)));
}[data-page="brain"] .brainv .bv-tour-cta:focus-visible{ outline: 2px solid var(--accent-text); outline-offset: 2px; }[data-page="brain"] .brainv .bv-tour-cta-play{
  flex: 0 0 auto; display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--accent-text); color: #fff; font-size: 1rem; padding-left: 0.18rem;
}[data-page="brain"] .brainv .bv-tour-cta-lines{ display: grid; gap: 0.16rem; min-width: 0; }[data-page="brain"] .brainv .bv-tour-cta-title{ color: var(--text); font: 700 1.12rem/1.15 var(--serif, Georgia, serif); }[data-page="brain"] .brainv .bv-tour-cta-fs{
  margin-left: 0.4rem; padding: 0.08rem 0.42rem; border-radius: 999px; vertical-align: 0.12em;
  background: color-mix(in srgb, var(--accent-text) 20%, transparent);
  color: var(--accent-text); font: 700 0.7rem/1.4 system-ui, sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
}[data-page="brain"] .brainv .bv-tour-cta-sub{ color: var(--text-muted); font: 0.8rem/1.4 system-ui, sans-serif; }[data-page="brain"] .brainv .bv-tour-themed{
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.85rem;
}[data-page="brain"] .brainv .bv-tour-themed-lbl{
  color: var(--text-muted); font: 0.75rem system-ui, sans-serif; margin-right: 0.15rem;
}[data-page="brain"] /* Tour chrome, [data-page="brain"] shown inside the single details card while a tour is running. */
.brainv .bv-details-tour{
  display: block; margin-top: 0.22rem; color: var(--accent-text);
  font: 700 0.7rem system-ui, sans-serif; letter-spacing: 0.09em; text-transform: uppercase;
}[data-page="brain"] /* The `p` in each of these three selectors is load-bearing, [data-page="brain"] not decoration.
   `.brainv .bv-details p` above sets margin:0 and, [data-page="brain"] with its element token, [data-page="brain"] is
   MORE specific than a bare `.brainv .bv-tour-fact` -- so without the `p` here
   the top margins below are silently overridden and the paragraphs run
   together into one block of text. The fact ran straight on from the role for
   exactly that reason. Keep the `p`. */
.brainv .bv-details p.bv-tour-fact{ margin: 0.6rem 0 0; }[data-page="brain"] /* a plain paragraph, [data-page="brain"] styled exactly like the role above (colour/size/line-height inherit from .bv-details p) */
.brainv .bv-details p.bv-tour-hint{ margin: 0.7rem 0 0; color: var(--text-muted); font-size: 0.78rem; }[data-page="brain"] .brainv .bv-tour-hint kbd{
  font: inherit; font-size: 0.72rem; padding: 0.04rem 0.34rem; border-radius: 4px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}[data-page="brain"] .brainv .bv-details p.bv-tour-caveat{ margin: 0.55rem 0 0; color: var(--text-muted); font: 0.72rem/1.45 system-ui, sans-serif; }[data-page="brain"] .brainv .bv-provenance{ margin-top: 1.1rem; }[data-page="brain"] .brainv .bv-provenance-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; margin-top: 0.8rem; }[data-page="brain"] .brainv .bv-provenance-grid div{ display: grid; gap: 0.14rem; padding: 0.65rem; border-radius: 8px; background: color-mix(in srgb, var(--surface) 75%, transparent); }[data-page="brain"] .brainv .bv-provenance-grid strong{ color: var(--text); }

@media (max-width: 34rem) {[data-page="brain"] .brainv .section-head .lede{
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
    overflow: hidden; font-size: 0.98rem; line-height: 1.55;
  }[data-page="brain"] .brainv .bv-shell{ margin-top: 1rem; }[data-page="brain"] .brainv .bv-modes{ gap: 0.3rem; }[data-page="brain"] .brainv .bv-modes-tabs{ flex: 1 1 auto; gap: 0.3rem; }[data-page="brain"] .brainv .bv-modebtn{ flex: 1 1 0; min-height: 2.75rem; padding: 0.45rem 0.55rem; white-space: nowrap; }[data-page="brain"] .brainv .bv-fullscreen{ margin-left: 0; }[data-page="brain"] .brainv .bv-search-row input{ flex-basis: 100%; }[data-page="brain"] .brainv .bv-search-row .bv-chip{ flex: 1 1 auto; min-height: 2.75rem; }[data-page="brain"] .brainv .bv-plane-tabs{ display: flex; }[data-page="brain"] .brainv .bv-plane-tabs .bv-chip{ flex: 1; min-height: 2.75rem; }[data-page="brain"] .brainv .bv-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }[data-page="brain"] .brainv .bv-panel{ display: block; width: 100%; max-width: none; margin: 0; opacity: 0.66; }[data-page="brain"] .brainv .bv-panel.is-active-plane{ grid-column: 1 / -1; grid-row: 1; opacity: 1; }[data-page="brain"] .brainv .bv-slice-nav{ grid-template-columns: auto minmax(0, 1fr) 4.6rem auto; }[data-page="brain"] .brainv .bv-slice-nav label{ grid-column: 1 / -1; }[data-page="brain"] .brainv .bv-slice-settings, [data-page="brain"] .brainv .bv-details dl, [data-page="brain"] .brainv .bv-provenance-grid{ grid-template-columns: 1fr; }[data-page="brain"] .brainv .bv-learning{ grid-template-columns: 1fr; }[data-page="brain"] .brainv .bv-tour-row{ justify-content: flex-start; }[data-page="brain"] .brainv .bv-glwrap{ margin-inline: calc(50% - 50vw); border-left: 0; border-right: 0; border-radius: 0; }[data-page="brain"] .brainv .bv-glwrap canvas{ max-height: 68vh; }
}

@media (prefers-reduced-motion: reduce) {[data-page="brain"] .brainv *, [data-page="brain"] .brainv *::before, [data-page="brain"] .brainv *::after{ scroll-behavior: auto !important; }
}


/* ---------- the text inside the text: a rank cipher, playable ----------
   Gold is the message — as ranks, as the coin carried across, as the text
   recovered. Teal is the cover story the message travels inside. The lab
   itself is one more cabinet in the parlour: same panel, same hairline. */
.tt-lab {
  --tt-line: rgba(239, 237, 246, 0.14);
  --tt-secret: var(--gold);
  --tt-cover: #85c8cb;
  background: #14112b;
  border: 1px solid rgba(208, 177, 96, 0.2);
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
  color: var(--night-text);
}
.tt-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; }
.tt-steps button {
  position: relative; width: 100%; height: 100%;
  display: grid; grid-template-rows: auto auto auto; justify-items: start; align-content: start;
  row-gap: 0.15rem; text-align: left;
  font-family: inherit; color: var(--night-muted);
  background: none; border: 0; border-top: 1px solid var(--tt-line);
  padding: 0.85rem 0.5rem 0.6rem; cursor: pointer;
  transition: color 0.35s ease;
}
.tt-steps button:hover { color: var(--night-text); }
.tt-steps button::after {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}
.tt-steps button span { font-family: "Fraunces", Georgia, serif; font-size: 0.78rem; color: var(--gold); }
.tt-steps button strong { font-size: 0.95rem; font-weight: 500; }
.tt-steps button small { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; }
.tt-steps button.is-past, .tt-steps button[aria-current="step"] { color: var(--night-text); }
.tt-steps button[aria-current="step"]::after { transform: scaleX(1); }
.tt-explain { min-height: 6rem; padding: 1.3rem 0 1rem; }
.tt-explain p { margin: 0.25rem 0; }
.tt-counter { font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.tt-stage-title { font-family: "Fraunces", Georgia, serif; font-size: clamp(1.3rem, 2.6vw, 1.6rem); font-weight: 460; }
#tt-stage-copy { color: var(--night-muted); font-size: 0.95rem; max-width: 44rem; }

.tt-loom { display: grid; gap: 1rem; }
.tt-sentence, .tt-rank-wrap, .tt-key, .tt-result {
  border-left: 1px solid var(--tt-tone, var(--gold));
  padding-left: 1.1rem;
}
.tt-secret { --tt-tone: var(--tt-secret); }
.tt-cover { --tt-tone: var(--tt-cover); }
.tt-sentence-head { margin: 0; font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--night-muted); }
.tt-sentence-head span { color: var(--tt-tone, var(--gold)); }
.tt-token-stream { display: flex; flex-wrap: wrap; gap: 0.2rem 0.35rem; margin-top: 0.55rem; }
.tt-token {
  position: relative; font-family: "Fraunces", Georgia, serif; font-size: 1.12rem;
  color: var(--night-text); background: none; border: 0;
  border-bottom: 1px solid transparent; padding: 0.4rem 0.2rem 0.2rem; cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.tt-token:hover { color: var(--tt-tone); }
.tt-token.is-selected { color: var(--tt-tone); border-bottom-color: currentColor; }
.tt-token small {
  position: absolute; left: 50%; top: -0.35rem; transform: translateX(-50%);
  font-family: "Source Serif 4", Georgia, serif; font-size: 0.58rem; letter-spacing: 0.08em; color: var(--gold);
}
.tt-token.is-masked { color: transparent; min-width: 3.2rem; }
.tt-token.is-masked::after {
  content: "\2022\2022\2022"; position: absolute; inset: 0;
  display: grid; place-items: center; color: var(--night-muted); letter-spacing: 0.18em;
}
.tt-ranks { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.6rem; }
.tt-rank {
  width: 2.3rem; height: 2.3rem;
  font-family: inherit; font-size: 0.8rem; color: var(--gold);
  background: none; border: 1px solid var(--gold); border-radius: 50%; cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.tt-rank::before { content: "#"; opacity: 0.6; }
.tt-rank:hover, .tt-rank.is-selected { color: #14112b; background: var(--gold); }
.tt-key label { display: block; }
.tt-key label > span { display: block; font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.tt-key select {
  margin-top: 0.45rem; max-width: 100%;
  font-family: inherit; font-size: 0.95rem; color: var(--night-text);
  background: #1b1738; border: 1px solid var(--tt-line); border-radius: 0;
  padding: 0.55rem 0.7rem;
}
.tt-key select:focus { outline: none; border-color: var(--gold); }
.tt-key p { margin: 0.45rem 0 0; color: var(--night-muted); font-size: 0.85rem; }

.tt-lens { margin-top: 1.4rem; border-top: 1px solid var(--tt-line); padding-top: 1.1rem; }
.tt-lens-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tt-lens-head p { margin: 0; font-size: 0.9rem; color: var(--night-muted); }
.tt-lens-head strong { color: var(--night-text); font-weight: 500; }
.tt-token-nav { display: flex; gap: 0.4rem; }
.tt-token-nav button {
  width: 2.2rem; height: 2.2rem; font-family: inherit;
  color: var(--night-text); background: none;
  border: 1px solid var(--tt-line); border-radius: 50%; cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.tt-token-nav button:hover { color: var(--gold); border-color: var(--gold); }
.tt-lens-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 3.8rem minmax(0, 1fr);
  gap: 0.8rem; align-items: center; margin-top: 0.9rem;
}
.tt-lab[data-step="0"] .tt-lens-grid { grid-template-columns: minmax(0, 32rem); justify-content: center; }
.tt-lab[data-step="1"] .tt-lens-grid { grid-template-columns: minmax(0, 1fr) 3.8rem; max-width: 36rem; margin-inline: auto; }
.tt-prediction {
  --tt-ladder: var(--gold);
  min-width: 0; background: #1b1738; padding: 0.85rem;
}
.tt-cover-prediction { --tt-ladder: #85c8cb; }
.tt-pred-label { margin: 0; font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--tt-ladder); }
.tt-context {
  margin: 0.3rem 0 0.65rem; max-width: 100%; color: var(--night-muted); font-size: 0.82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tt-context code { font-size: 0.8rem; color: inherit; }
.tt-ladder { list-style: none; display: grid; gap: 0.3rem; margin: 0; padding: 0; }
.tt-ladder li {
  --w: 40%;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 1.7rem minmax(0, 1fr) max-content;
  gap: 0.45rem; align-items: center; padding: 0.45rem 0.55rem;
  font-size: 0.85rem; color: var(--night-muted); border: 1px solid var(--tt-line);
}
.tt-ladder li::before {
  content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: var(--w);
  background: linear-gradient(to right,
    color-mix(in srgb, var(--tt-ladder) 22%, transparent),
    color-mix(in srgb, var(--tt-ladder) 6%, transparent));
}
.tt-ladder li.is-chosen { color: var(--night-text); border-color: var(--tt-ladder); }
.tt-ladder .tt-word { overflow: hidden; text-overflow: ellipsis; }
.tt-ladder .tt-picked { color: var(--tt-ladder); font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; }
.tt-rank-bridge[hidden] { display: none; }
.tt-rank-bridge {
  display: grid; place-items: center; gap: 0.2rem;
  font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--night-muted);
}
.tt-rank-bridge strong {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  color: #14112b; background: var(--gold); border-radius: 50%;
  font-size: 0.9rem; font-weight: 600;
  box-shadow: 0 0 0 5px rgba(208, 177, 96, 0.18);
}
.tt-result { --tt-tone: var(--gold); margin-top: 1.1rem; }
.tt-result p { margin: 0.2rem 0; }
.tt-result p + p { color: var(--night-muted); font-size: 0.9rem; }
.tt-result-mark {
  display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem;
  margin-right: 0.35rem; vertical-align: -0.28rem;
  color: #14112b; background: var(--gold); border-radius: 50%; font-size: 0.8rem;
}
.tt-actions { display: flex; justify-content: flex-end; gap: 0.7rem; margin-top: 1.3rem; }
.tt-actions button {
  font-family: inherit; font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase;
  padding: 0.85rem 1.7rem; cursor: pointer;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.tt-action-back { color: var(--night-muted); background: none; border: 1px solid var(--tt-line); }
.tt-action-back:hover:not(:disabled) { color: var(--night-text); border-color: var(--night-muted); }
.tt-action-back:disabled { opacity: 0.35; cursor: default; }
.tt-action-next { color: #14112b; background: var(--gold); border: 1px solid var(--gold); }
.tt-action-next:hover { background: #ddc27c; border-color: #ddc27c; }

@media (max-width: 44rem) {
  .tt-steps button { justify-items: center; text-align: center; padding-inline: 0.2rem; }
  .tt-steps button small { display: none; }
  .tt-explain { min-height: 7.5rem; }
  .tt-lens-grid,
  .tt-lab[data-step="0"] .tt-lens-grid,
  .tt-lab[data-step="1"] .tt-lens-grid { grid-template-columns: 1fr; max-width: none; }
  .tt-rank-bridge { grid-template-columns: 1fr auto 1fr; }
  .tt-rank-bridge::before, .tt-rank-bridge::after { content: ""; height: 1px; background: var(--tt-line); }
  .tt-rank-bridge span { display: none; }
  .tt-actions { flex-direction: row; }
  .tt-actions .tt-action-next { flex: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .tt-sentence, .tt-rank-wrap, .tt-key, .tt-prediction { animation: tt-rise 0.4s ease both; }
  .tt-token.is-recovered { animation: tt-rise 0.45s ease both; animation-delay: calc(var(--i) * 50ms); }
  .tt-rank:hover, .tt-rank.is-selected { transform: translateY(-2px); }
  @keyframes tt-rise { from { opacity: 0; transform: translateY(0.4rem); } to { opacity: 1; transform: none; } }
}

/* ---------- the nav on a phone ----------
   The .nav-toggle rules that used to open this block dressed the deleted
   script-built hamburger; nothing carries that class any more. */
@media (max-width: 62rem) {
  .nav { flex-wrap: wrap; }
  .nav .nav-links {
    display: none; width: 100%; order: 3;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.1rem 1rem; padding: 1.2rem 0 0.4rem;
  }
  .nav.nav-open .nav-links { display: grid; }
  .nav .nav-links a { padding: 0.55rem 0; }
}

/* the marker class carries no styling of its own; it marks long-form wrappers */
.long { display: block; }

/* ---------- a glyph for each playground piece ---------- */
.game { position: relative; }
.g-glyph { display: block; width: 1.9rem; height: 1.9rem; color: var(--gold);
  opacity: 0.85; margin-bottom: 0.35rem; }
.g-glyph svg { width: 100%; height: 100%; display: block; }
.game:hover .g-glyph { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .g-glyph { transition: color 0.4s ease, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
  .game:hover .g-glyph { transform: translateY(-2px); }
}

/* ===== the sky, and its calendar ===== */

/* the sky sits behind the cover, filling it */
.cover .nw-sky {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
/* Chrome can composite a large, animated inline SVG above later HTML even
   when its stacking order is correct. A still clone paints the complete sky
   as the cover's true background. The live SVG then carries only its sparse
   moving visitors and invisible interaction targets, so ships, comets and
   the owl retain their motion without a full-cover animated surface. */
.cover .nw-wish-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.cover.sky-isolated .nw-sky > rect,
.cover.sky-isolated .nw-sky > .bs-nebulae,
.cover.sky-isolated .nw-sky > .bs-lanes,
.cover.sky-isolated .nw-sky > .bs-field {
  display: none;
}
/* The still image already paints the real stars. Keep the live real-sky
   group transparent rather than removing it: its generous invisible discs
   are the hover targets for every named star. */
.cover.sky-isolated .nw-sky > .bs-realsky {
  display: block;
  opacity: 0;
  pointer-events: all;
}
.cover.sky-isolated .nw-sky > .bs-realsky [data-name] {
  pointer-events: all;
}
/* The moon is in the still background, while this transparent twin keeps
   her exact hover target and phase card alive. */
.cover.sky-isolated .nw-sky > .bs-moon { opacity: 0 !important; }
.cover .nw-wish-layer { z-index: 1; }
/* both are already positioned; only the stacking needs saying. Setting
   position here knocked the scroll cue out of its centring. */
.cover .cover-inner, .cover .scroll-cue { z-index: 2; }
/* The centred copy is visual, not a control. Let star hit targets beneath it
   receive the pointer even where a large star happens to sit behind a line of
   type; the separate scroll cue remains interactive. */
.cover .cover-inner { pointer-events: none; }
/* the twinkle canvas lies over the drawn sky for depth alone; let pointer
   events fall through it, or the named stars beneath are never hoverable. */
.cover .starfield { pointer-events: none; }
/* the sky svg is pointer-inert as a whole, so the moon opts back in — she
   carries a hover card (her phase and true place) like any named star. */
.cover .nw-sky .bs-moon { pointer-events: all; }
/* ---------- banner ---------- */
/* The sky is decoration; the tagline is real text sitting on it. That split is the
   whole design: the words reflow to one role per line on a phone instead of shrinking
   into the illegible smudge a baked-in caption became, and the sigil sits ABOVE them
   rather than behind, so nothing runs through its centre. The sky is generated --
   see src/make_banner.py -- and inlined by the build, so it paints with the HTML. */
.nw-hero {
  position: relative;
  display: grid;
  place-items: center;
  /* Capped so the fold still shows the h1, the lede and both buttons. The old banner
     was a 2000x753 image at full width: 537px of a 900px screen, which left the
     proposition below the fold and the first paint saying nothing. */
  min-height: clamp(13rem, 23vw, 20.5rem);
  padding: 1.6rem 1.25rem;
  overflow: hidden;
  background: #0a0e26;  /* the sky's own base; the band is dark in both themes */
}
.nw-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* The real sky (docs/assets/js/starmap.js): once the visitor's actual stars are
   drawn into .bs-realsky, .bs-real goes on the svg and the two skies trade
   places over a slow crossfade -- the seeded fiction dims to a depth layer, the
   true stars come forward. Under reduced motion the trade is a cut;
   without JS the class never lands and the fiction keeps the whole sky. */
.nw-sky .bs-realsky { opacity: 0; }
.nw-sky.bs-real .bs-realsky { opacity: 1; transition: opacity 6s ease 1.2s; }
.nw-sky.bs-real .bs-field   { opacity: 0.4; transition: opacity 6s ease 1.2s; }
@media (prefers-reduced-motion: reduce) {
  .nw-sky.bs-real .bs-realsky,
  .nw-sky.bs-real .bs-field { transition: none; }
}
/* The hour of day, as a veil over the sky. The sky is a night sky by nature, so
   night is simply its own face; dawn and dusk lay a low warm gradient along the
   horizon, and daylight lifts the whole field slightly. The classes come from
   the visitor's clock (home.html). pointer-events stays off so wishes still
   land on the sky, and z-index 0 keeps the veil under the sigil and tagline. */
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}
.cover.sky-dawn::after,
.cover.sky-day::after,
.cover.sky-dusk::after { opacity: 1; }
.cover.sky-dawn::after {
  background: linear-gradient(to top,
    rgba(224, 146, 108, 0.26), rgba(130, 94, 142, 0.10) 45%, transparent 72%);
}
.cover.sky-day::after {
  background: linear-gradient(to top,
    rgba(122, 168, 190, 0.15), rgba(122, 168, 190, 0.05) 55%, transparent 80%);
}
.cover.sky-dusk::after {
  background: linear-gradient(to top,
    rgba(196, 108, 88, 0.22), rgba(94, 72, 134, 0.12) 50%, transparent 78%);
}
/* The sky moves, softly. Classes are assigned by src/make_banner.py: a scattered
   ~12% of stars twinkle in five interleaved phase groups (co-prime-ish durations,
   so the field never pulses in step), the nine bright halos breathe, and the
   nebulae and dust lanes drift a few pixels against each other over minutes.
   Everything animates group opacity or transform -- compositor work, no layout --
   and none of it runs for a reader who asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .nw-sky .bs-tw1 { animation: bs-twinkle 4.7s ease-in-out infinite; }
  .nw-sky .bs-tw2 { animation: bs-twinkle 6.1s ease-in-out -2.2s infinite; }
  .nw-sky .bs-tw3 { animation: bs-twinkle 7.9s ease-in-out -5.1s infinite; }
  .nw-sky .bs-tw4 { animation: bs-twinkle 5.3s ease-in-out -1.3s infinite; }
  .nw-sky .bs-tw5 { animation: bs-twinkle 9.7s ease-in-out -7.4s infinite; }
  .nw-sky .bs-br  { animation: bs-breathe 8.5s ease-in-out infinite; }
  .nw-sky .bs-nebulae { animation: bs-neb-drift 90s ease-in-out infinite; }
  .nw-sky .bs-lanes   { animation: bs-lane-drift 110s ease-in-out infinite; }
  /* The easter eggs. Both groups carry opacity="0" in the SVG, so without these
     animations (reduced motion, old browsers) they simply never exist. The comet
     falls for ~3s of a 149s cycle; the saucer crosses for ~9s of 233s. The periods
     are co-prime with each other and with everything above, so the sky never
     repeats itself exactly. Negative delays put the first comet ~40s after load
     and the first saucer around two minutes in: findable, never on demand. */
  .nw-sky .bs-comet { animation: bs-comet 149s linear -105s infinite; }
  .nw-sky .bs-ufo { animation: bs-ufo 233s linear -110s infinite; }
  .nw-sky .bs-ufo-bob { animation: bs-ufo-bob 3.7s ease-in-out infinite; }
  .nw-sky .bs-ufo-light { animation: bs-ufo-blink 1.3s ease-in-out infinite; }
  .nw-sky .bs-ufo-light:nth-of-type(2) { animation-delay: -0.45s; }
  .nw-sky .bs-ufo-light:nth-of-type(3) { animation-delay: -0.9s; }
  /* Seasonal visitors: home.html stamps .bs-season-* classes on the sky by the
     visitor's own clock, and only then do these animations exist at all.
     Santa: 24th-31st December. Fireworks: New Year's Eve and Day. The winged
     heart: Valentine's Day. The Perseids: 9th-14th August, when two extra
     comets join in and the resident one falls more often -- the shower is real,
     so for that week the sky simply agrees with the one outside. */
  .nw-sky.bs-season-santa .bs-santa { animation: bs-santa 89s linear -34s infinite; }
  .nw-sky.bs-season-santa .bs-santa-bob { animation: bs-santa-bob 2.9s ease-in-out infinite; }
  .nw-sky.bs-season-santa .bs-deer-legs {
    transform-box: fill-box; transform-origin: center top;
    animation: bs-gallop 0.42s ease-in-out infinite alternate;
  }
  .nw-sky.bs-season-santa .bs-deer-legs:nth-of-type(2) { animation-delay: -0.21s; }
  .nw-sky.bs-season-santa .bs-santa-dust circle { animation: bs-ufo-blink 1.3s ease-in-out infinite; }
  .nw-sky.bs-season-santa .bs-santa-dust circle:nth-of-type(2n) { animation-delay: -0.5s; }
  .nw-sky.bs-season-santa .bs-santa-dust circle:nth-of-type(3n) { animation-delay: -0.9s; }
  .nw-sky.bs-season-fireworks .bs-fw {
    transform-box: fill-box; transform-origin: center;
    animation: bs-fw 23s linear infinite;
  }
  .nw-sky.bs-season-fireworks .bs-fw2 { animation-delay: -8s; }
  .nw-sky.bs-season-fireworks .bs-fw3 { animation-delay: -15.5s; }
  .nw-sky.bs-season-valentine .bs-cupid { animation: bs-cupid 67s linear -25s infinite; }
  .nw-sky.bs-season-valentine .bs-cupid-bob { animation: bs-heart-flutter 2.1s ease-in-out infinite; }
  /* The Geminids (13th-14th December) fly the same comets as the Perseids:
     both showers are real, and the machinery is already in the sky. */
  .nw-sky.bs-season-perseids .bs-comet,
  .nw-sky.bs-season-geminids .bs-comet { animation-duration: 37s; animation-delay: -20s; }
  .nw-sky.bs-season-perseids .bs-comet2,
  .nw-sky.bs-season-geminids .bs-comet2 { animation: bs-comet2 41s linear -13s infinite; }
  .nw-sky.bs-season-perseids .bs-comet3,
  .nw-sky.bs-season-geminids .bs-comet3 { animation: bs-comet3 43s linear -29s infinite; }
  /* Turing's birthday: the tape constellation fades up and shimmers all day. */
  .nw-sky.bs-season-turing .bs-tape { animation: bs-tape 13s ease-in-out infinite; }
  /* Ada Lovelace Day: the new star pulses gently. */
  .nw-sky.bs-season-ada .bs-ada { animation: bs-ada 7s ease-in-out infinite; }
  /* Halloween: the witch crosses against everyone else's traffic. */
  .nw-sky.bs-season-witch .bs-witch { animation: bs-witch 113s linear -46s infinite; }
  .nw-sky.bs-season-witch .bs-witch-bob { animation: bs-witch-bob 1.9s ease-in-out infinite; }
  /* April Fools: the saucer's own crossing is replaced by the abduction run --
     fly in, hover over the marked star while it rises and vanishes, fly on. */
  .nw-sky.bs-season-fools .bs-ufo { animation: bs-ufo-fools 47s linear -8s infinite; }
  .nw-sky.bs-season-fools .bs-abductee { animation: bs-abduct 47s linear -8s infinite; }
  /* Birthday: an extra gold star for the day. The date lives in home.html. */
  .nw-sky.bs-season-birthday .bs-bday { animation: bs-ada 9s ease-in-out infinite; }
  /* May the 4th: the freighter crosses in under three seconds, banking hard. */
  .nw-sky.bs-season-falcon .bs-falcon { animation: bs-falcon 61s linear -22s infinite; }
  .nw-sky.bs-season-falcon .bs-falcon-bank { animation: bs-falcon-bank 1.3s ease-in-out infinite; }
  /* N7 Day: the frigate cruises through, steady as she goes. */
  .nw-sky.bs-season-normandy .bs-normandy { animation: bs-normandy 83s linear -30s infinite; }
  .nw-sky.bs-season-normandy .bs-normandy-bank { animation: bs-santa-bob 4.3s ease-in-out infinite; }
  /* Towel Day: the whale falls first; the petunias, resigned, follow. */
  .nw-sky.bs-season-towel .bs-whale { animation: bs-whale 79s linear -18s infinite; }
  .nw-sky.bs-season-towel .bs-whale-tumble { animation: bs-whale-tumble 7.3s ease-in-out infinite; }
  .nw-sky.bs-season-towel .bs-petunias { animation: bs-petunias 79s linear -3s infinite; }
  .nw-sky.bs-season-towel .bs-petunias-tumble { animation: bs-tardis-spin 5.1s linear infinite; }
  /* 23rd November: the blue box tumbles across, a little out of control. */
  .nw-sky.bs-season-tardis .bs-tardis { animation: bs-tardis 97s linear -40s infinite; }
  .nw-sky.bs-season-tardis .bs-tardis-spin { animation: bs-tardis-spin 6.5s linear infinite; }
  .nw-sky.bs-season-tardis .bs-tardis-lamp { animation: bs-ufo-blink 1.4s ease-in-out infinite; }
  /* First Contact Day: the rocket climbs; straight, because thrust is honest. */
  .nw-sky.bs-season-phoenix .bs-phoenix { animation: bs-phoenix 89s linear -30s infinite; }
  /* Yuri's Night: one serene orbit-shaped pass, no bobbing, ever. */
  .nw-sky.bs-season-vostok .bs-vostok { animation: bs-vostok 101s linear -45s infinite; }
  /* 20th July: the lander descends, touches down on the moon's upper limb
     nine seconds in, and stays parked there for the rest of each cycle. The
     sway and the engine flame run on the same 103s clock so both stop dead at
     contact: a parked lander neither wobbles nor burns. */
  .nw-sky.bs-season-lm .bs-lm { animation: bs-lm 103s linear -35s infinite; }
  .nw-sky.bs-season-lm .bs-lm-sway { animation: bs-lm-sway 103s linear -35s infinite; }
  .nw-sky.bs-season-lm .bs-lm-flame { animation: bs-lm-flame 103s linear -35s infinite; }
  .nw-sky.bs-season-lm .bs-lm-jet {
    transform-box: fill-box; transform-origin: center top;
    animation: bs-lm-jet 0.22s ease-in-out infinite alternate;
  }
  /* Leap day: the two saucers finally meet, hover together, and part. */
  .nw-sky.bs-season-leap .bs-ufo { animation: bs-ufo-leap 59s linear -12s infinite; }
  .nw-sky.bs-season-leap .bs-ufo2 { animation: bs-ufo2-leap 59s linear -12s infinite; }
  .nw-sky.bs-season-leap .bs-ufo2-bob { animation: bs-ufo-bob 3.1s ease-in-out infinite; }
  /* 8th September: one stately pass; inertial dampeners, no bobbing. */
  .nw-sky.bs-season-entd .bs-entd { animation: bs-entd 107s linear -38s infinite; }
  /* Grace Hopper's birthday: the first bug circles the glow all day. */
  .nw-sky.bs-season-moth .bs-moth { animation: bs-tape 9s ease-in-out infinite; }
  .nw-sky.bs-season-moth .bs-moth-orbit {
    transform-box: view-box; transform-origin: 700px 240px;
    animation: bsg-lotus-turn 13s linear infinite;
  }
  .nw-sky.bs-season-moth .bs-moth-flap {
    transform-box: fill-box; transform-origin: center;
    animation: bs-moth-flap 0.45s ease-in-out infinite;
  }
  /* Sagan's birthday: the beam holds steady; the dot quietly insists. */
  .nw-sky.bs-season-sagan .bs-sagan { animation: bs-sagan 17s ease-in-out infinite; }
  .nw-sky.bs-season-sagan .bs-sagan-dot { animation: bs-ada 7s ease-in-out infinite; }
  /* New Horizons day: Pluto, far and small and slow, heart out. */
  .nw-sky.bs-season-pluto .bs-pluto { animation: bs-pluto 131s linear -50s infinite; }
  /* AI Appreciation Day: the robot floats across, waving. */
  .nw-sky.bs-season-robot .bs-robot { animation: bs-robot 97s linear -35s infinite; }
  .nw-sky.bs-season-robot .bs-robot-bob { animation: bs-ufo-bob 3.1s ease-in-out infinite; }
  .nw-sky.bs-season-robot .bs-robot-arm {
    transform-box: fill-box; transform-origin: left center;
    animation: bs-robot-wave 1.1s ease-in-out infinite;
  }
  .nw-sky.bs-season-robot .bs-robot-antenna { animation: bs-ufo-blink 1.6s ease-in-out infinite; }
  .nw-sky.bs-season-robot .bs-claudemark { animation: bs-claudemark 83s linear -30s infinite; }
  .nw-sky.bs-season-robot .bs-claudemark-spin {
    transform-box: fill-box; transform-origin: center;
    animation: bs-tardis-spin 8s linear infinite;
  }
  .nw-sky.bs-season-robot .bs-openaimark { animation: bs-openaimark 91s linear -55s infinite; }
  .nw-sky.bs-season-robot .bs-openaimark-spin {
    transform-box: fill-box; transform-origin: center;
    animation: bs-tardis-spin 11s linear infinite reverse;
  }
  /* Asteroid Day: the rock tumbles by, dust in tow. */
  .nw-sky.bs-season-asteroid .bs-asteroid { animation: bs-asteroid 109s linear -40s infinite; }
  .nw-sky.bs-season-asteroid .bs-asteroid-tumble {
    transform-box: fill-box; transform-origin: center;
    animation: bs-tardis-spin 8s linear infinite;
  }
  /* Pi Day: thirteen faint stars in the shape everyone knows. */
  .nw-sky.bs-season-pi .bs-pi { animation: bs-tape 13s ease-in-out infinite; }
  /* World UFO Day: the resident saucer brings a friend, in formation. */
  .nw-sky.bs-season-ufoday .bs-ufo { animation-duration: 89s; animation-delay: -30s; }
  .nw-sky.bs-season-ufoday .bs-ufo2 { animation: bs-ufo2-formation 89s linear -30s infinite; }
  .nw-sky.bs-season-ufoday .bs-ufo2-bob { animation: bs-ufo-bob 2.9s ease-in-out infinite; }
  /* St. Patrick's Day: a shamrock tumbles by on the wind. */
  .nw-sky.bs-season-shamrock .bs-shamrock { animation: bs-shamrock 71s linear -26s infinite; }
  .nw-sky.bs-season-shamrock .bs-shamrock-sway { animation: bs-tardis-spin 5.7s linear infinite; }
  /* Easter Sunday, by the computus: a painted egg drifts across. */
  .nw-sky.bs-season-easter .bs-egg { animation: bs-egg 93s linear -33s infinite; }
  .nw-sky.bs-season-easter .bs-egg-sway {
    transform-box: fill-box; transform-origin: center;
    animation: bs-tardis-spin 14s linear infinite;
  }
  /* Hanukkah: the menorah burns all night with that night's candles. */
  .nw-sky.bs-season-hanukkah .bs-menorah { animation: bs-sagan 15s ease-in-out infinite; }
  .nw-sky.bs-season-hanukkah .bs-hk-flame[data-lit] { animation: bs-hk-flicker 1.7s ease-in-out infinite; }
  .nw-sky.bs-season-hanukkah .bs-hk-flame[data-lit]:nth-of-type(even) { animation-delay: -0.8s; }
  .nw-sky.bs-season-hanukkah .bs-hk-shamash { animation: bs-hk-flicker 1.9s ease-in-out -0.5s infinite; }
  /* Tet: a red lantern rises, glowing, tassel trailing. */
  .nw-sky.bs-season-tet .bs-lantern { animation: bs-lantern 87s linear -30s infinite; }
  .nw-sky.bs-season-tet .bs-lantern-sway { animation: bs-witch-bob 4.1s ease-in-out infinite; }
  /* Koningsdag (orange) and the King's official birthday (regilded below). */
  .nw-sky.bs-season-kingsday .bs-crown,
  .nw-sky.bs-season-kingsbday .bs-crown { animation: bs-crown 79s linear -28s infinite; }
  .nw-sky.bs-season-kingsday .bs-crown-bob,
  .nw-sky.bs-season-kingsbday .bs-crown-bob { animation: bs-heart-flutter 2.7s ease-in-out infinite; }
  /* Christmas Day: a radiant star, gently insisting. */
  .nw-sky.bs-season-xmasstar .bs-xstar { animation: bs-ada 11s ease-in-out infinite; }
  /* Sputnik Day: one serene orbit, pinging as it goes. */
  .nw-sky.bs-season-sputnik .bs-sputnik { animation: bs-sputnik 99s linear -40s infinite; }
  .nw-sky.bs-season-sputnik .bs-sputnik-ping {
    transform-box: fill-box; transform-origin: center;
    animation: bs-sputnik-ping 2.3s ease-out infinite;
  }
  /* 2nd January: a three-pronged pursuit ship makes one clean pass. */
  .nw-sky.bs-season-liberator .bs-liberator { animation: bs-liberator 101s linear -38s infinite; }
  /* No date at all: the big red one turns up when it turns up. */
  .nw-sky.bs-season-reddwarf .bs-reddwarf { animation: bs-reddwarf 127s linear -20s infinite; }
  /* Holi: three soft bursts of powder, popping in turn. */
  .nw-sky.bs-season-holi .bs-holi {
    transform-box: fill-box; transform-origin: center;
    animation: bs-holi 19s linear infinite;
  }
  .nw-sky.bs-season-holi .bs-holi2p { animation-delay: -6.5s; }
  .nw-sky.bs-season-holi .bs-holi3p { animation-delay: -13s; }
  /* Eid, al-Fitr and al-Adha both: the crescent and star, gently insisting. */
  .nw-sky.bs-season-eid .bs-eid { animation: bs-ada 9s ease-in-out infinite; }
  /* Diwali: the diyas burn all night, flames out of step. */
  .nw-sky.bs-season-diwali .bs-diwali { animation: bs-sagan 15s ease-in-out infinite; }
  .nw-sky.bs-season-diwali .bs-diya-flame { animation: bs-hk-flicker 1.6s ease-in-out infinite; }
  .nw-sky.bs-season-diwali .bs-diya2 { animation-delay: -0.6s; }
  .nw-sky.bs-season-diwali .bs-diya3 { animation-delay: -1.1s; }
  /* Nowruz: the haft-sin goldfish swims by. */
  .nw-sky.bs-season-nowruz .bs-goldfish { animation: bs-goldfish 83s linear -30s infinite; }
  .nw-sky.bs-season-nowruz .bs-goldfish-wiggle {
    transform-box: fill-box; transform-origin: center;
    animation: bs-goldfish-wiggle 1.3s ease-in-out infinite;
  }
  /* Mid-Autumn: a pale gold sky lantern rises; the real moon above it is
     full that night, which is the point of the festival. */
  .nw-sky.bs-season-midautumn .bs-skylantern { animation: bs-skylantern 91s linear -32s infinite; }
  .nw-sky.bs-season-midautumn .bs-skylantern-sway { animation: bs-witch-bob 4.4s ease-in-out infinite; }
  /* Rosh Hashanah, both days: the shofar crosses slowly. */
  .nw-sky.bs-season-rosh .bs-shofar { animation: bs-shofar 97s linear -36s infinite; }
  .nw-sky.bs-season-rosh .bs-shofar-bob { animation: bs-heart-flutter 3.1s ease-in-out infinite; }
  /* Hanukkah, continued: the menorah floats gently and a dreidel spins by. */
  .nw-sky.bs-season-hanukkah .bs-menorah-float { animation: bs-heart-flutter 5.5s ease-in-out infinite; }
  .nw-sky.bs-season-hanukkah .bs-dreidel { animation: bs-dreidel 73s linear -25s infinite; }
  .nw-sky.bs-season-hanukkah .bs-dreidel-spin {
    transform-box: fill-box; transform-origin: center;
    animation: bs-tardis-spin 1.2s linear infinite;
  }
  /* The crowns spin slowly as they cross. */
  .nw-sky.bs-season-kingsday .bs-crown-spin,
  .nw-sky.bs-season-kingsbday .bs-crown-spin {
    transform-box: fill-box; transform-origin: center;
    animation: bs-tardis-spin 9s linear infinite;
  }
  /* International Women's Day: the Venus symbol, glowing orchid. */
  .nw-sky.bs-season-women .bs-women { animation: bs-ada 8s ease-in-out infinite; }
  /* Earth Day: the flag crosses, pale blue dot on a deep blue field. */
  .nw-sky.bs-season-earth .bs-earthflag { animation: bs-earthflag 89s linear -32s infinite; }
  .nw-sky.bs-season-earth .bs-earthflag-bob { animation: bs-heart-flutter 2.9s ease-in-out infinite; }
  /* UK Armed Forces Day (last Saturday of June): a flypast in vic formation,
     red, white, and blue trailing. */
  .nw-sky.bs-season-flypast .bs-flypast { animation: bs-flypast 67s linear -20s infinite; }
  /* Star Trek Day grows a fleet: the Warbird and the Vor'cha cross at their
     own hours around the Galaxy-class. */
  .nw-sky.bs-season-entd .bs-warbird { animation: bs-warbird 113s linear -75s infinite; }
  .nw-sky.bs-season-entd .bs-vorcha { animation: bs-vorcha 109s linear -15s infinite; }
  /* The cube has no date. It arrives, rarely, unannounced. It does not bob. */
  .nw-sky.bs-season-borg .bs-borg { animation: bs-borg 131s linear -30s infinite; }
  .nw-sky.bs-season-borg .bs-borg-light { animation: bs-ufo-blink 1.9s ease-in-out infinite; }
  .nw-sky.bs-season-borg .bs-borg-light:nth-of-type(2) { animation-delay: -0.6s; }
  .nw-sky.bs-season-borg .bs-borg-light:nth-of-type(3) { animation-delay: -1.1s; }
  .nw-sky.bs-season-borg .bs-borg-light:nth-of-type(4) { animation-delay: -1.5s; }
  /* 14th December: the Rocinante flies with the Geminids, torch first. */
  .nw-sky.bs-season-roci .bs-roci { animation: bs-roci 101s linear -44s infinite; }
  /* 26th September: a Dralthi. The pancake flies. */
  .nw-sky.bs-season-dralthi .bs-dralthi { animation: bs-dralthi 89s linear -33s infinite; }
  /* 28th July 2061: Halley's Comet keeps its appointment. */
  .nw-sky.bs-season-halley .bs-halley { animation: bs-halley 240s linear -70s infinite; }
  /* The lotus at the mandala's heart turns once every four minutes. Twelve-fold
     symmetry means it can never misalign; the scales never rotate, because a
     balance has an upright and tumbling it would say the wrong thing. */
/* On a day when something is happening in the sky, the heart turns quicker:
     one revolution a minute instead of four. home.html stamps .bs-festive on
     the sigil whenever any season is active. */
}
/* The 4th of July borrows the fireworks in red, white, and blue; colours,
   not motions, so they sit outside the motion query. */
.nw-sky.bs-season-july4 .bs-fw1 { fill: #e0e6f8; }
.nw-sky.bs-season-july4 .bs-fw2 { fill: #c05248; }
.nw-sky.bs-season-july4 .bs-fw3 { fill: #6b8cc7; }
/* Vesak: the mandala's own lotus glows. A glow, not a motion. */
/* The British King's official birthday regilds the Dutch crown. */
.nw-sky.bs-season-kingsbday .bs-crown-body { fill: #d4b45a; }
.nw-sky.bs-season-kingsbday .bs-crown-band { fill: #b0453f; }
/* On a festive day the mandala answers a click (or a tap) with the day's
   name. The label is a quiet gold-edged pill beneath the sigil. */
/* Blood moon, outside the motion query: a colour, not a motion. */
.bs-moon.bs-moon-eclipse .bs-moon-lit { fill: #b4563a; opacity: 0.8; }
/* Winter solstice, outside the motion query: stillness is not motion. The
   nebulae recede and the dark lanes soften; the longest night is the clearest. */
.nw-sky.bs-season-solstice .bs-nebulae { opacity: 0.72; }
.nw-sky.bs-season-solstice .bs-lanes { opacity: 0.85; }
/* Birthday, outside the motion query on purpose: a warmer glow is not motion. */
/* The Dog Days: 3 July to 11 August, when antiquity watched Sirius rise. */
.nw-sky .bs-sirius { transition: opacity 2.5s ease; }
.nw-sky.bs-season-dogdays .bs-sirius { opacity: 1; }
/* The owl of Minerva spreads her wings only with the falling of dusk: the
   animation exists solely while the hero wears .sky-dusk, so she flies for
   the same four hours Hegel gave her, by every visitor's own clock. */
@media (prefers-reduced-motion: no-preference) {
  .cover.sky-dusk .bs-owl { animation: bs-owl 151s linear -13s infinite; }
  .cover.sky-dusk .bs-owl-glide { animation: bs-owl-glide 2.3s ease-in-out infinite; }
  .cover.sky-dusk .bs-owl-wing-right {
    transform-box: fill-box;
    transform-origin: left center;
    animation: bs-owl-wing-right 0.92s ease-in-out infinite;
  }
  .cover.sky-dusk .bs-owl-wing-left {
    transform-box: fill-box;
    transform-origin: right center;
    animation: bs-owl-wing-left 0.92s ease-in-out infinite;
  }
}
@keyframes bs-whale {
  0%, 92% { opacity: 0; transform: translate(calc(600px + var(--dx, 0px)), calc(-80px + var(--dy, 0px))); }
  92.6% { opacity: 0.9; }
  95% { transform: translate(calc(630px + var(--dx, 0px)), calc(190px + var(--dy, 0px))); }
  98.4% { opacity: 0.9; }
  99%, 100% { opacity: 0; transform: translate(calc(655px + var(--dx, 0px)), calc(700px + var(--dy, 0px))); }
}
@keyframes bs-whale-tumble {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(9deg); }
}
@keyframes bs-petunias {
  0%, 93.5% { opacity: 0; transform: translate(calc(780px + var(--dx, 0px)), calc(-60px + var(--dy, 0px))); }
  94.1% { opacity: 0.9; }
  98.6% { opacity: 0.9; }
  99.2%, 100% { opacity: 0; transform: translate(calc(760px + var(--dx, 0px)), calc(700px + var(--dy, 0px))); }
}
@keyframes bs-tardis {
  0%, 91% { opacity: 0; transform: translate(calc(1700px + var(--dx, 0px)), calc(150px + var(--dy, 0px))); }
  91.6% { opacity: 0.9; }
  93.4% { transform: translate(calc(1210px + var(--dx, 0px)), calc(195px + var(--dy, 0px))); }
  95.6% { transform: translate(calc(760px + var(--dx, 0px)), calc(140px + var(--dy, 0px))); }
  97.6% { transform: translate(calc(330px + var(--dx, 0px)), calc(200px + var(--dy, 0px))); }
  98.9% { opacity: 0.9; }
  99.4%, 100% { opacity: 0; transform: translate(calc(-90px + var(--dx, 0px)), calc(160px + var(--dy, 0px))); }
}
@keyframes bs-tardis-spin {
  to { transform: rotate(360deg); }
}
@keyframes bs-phoenix {
  0%, 93% { opacity: 0; transform: translate(calc(340px + var(--dx, 0px)), calc(680px + var(--dy, 0px))); }
  93.7% { opacity: 0.9; }
  98.6% { opacity: 0.9; }
  99.3%, 100% { opacity: 0; transform: translate(calc(760px + var(--dx, 0px)), calc(-100px + var(--dy, 0px))); }
}
@keyframes bs-vostok {
  0%, 92.5% { opacity: 0; transform: translate(calc(-90px + var(--dx, 0px)), calc(175px + var(--dy, 0px))); }
  93.1% { opacity: 0.85; }
  95.8% { transform: translate(calc(820px + var(--dx, 0px)), calc(140px + var(--dy, 0px))); }
  99.1% { opacity: 0.85; }
  99.6%, 100% { opacity: 0; transform: translate(calc(1700px + var(--dx, 0px)), calc(180px + var(--dy, 0px))); }
}
@keyframes bs-lm {
  0% { opacity: 0; transform: translate(1272px, -70px); }
  0.9% { opacity: 0.9; }
  4.5% { transform: translate(1268px, 80px); }
  9%, 50% { opacity: 0.9; transform: translate(1274px, 221px); }
  54% { transform: translate(1281px, 60px); }
  56.5% { opacity: 0.9; }
  57.5%, 100% { opacity: 0; transform: translate(1287px, -80px); }
}
@keyframes bs-lm-sway {
  0% { transform: rotate(0deg); }
  2.5% { transform: rotate(-2.2deg); }
  5% { transform: rotate(2.2deg); }
  7.5% { transform: rotate(-1.2deg); }
  9%, 49.5% { transform: rotate(0deg); }
  52% { transform: rotate(1.8deg); }
  55% { transform: rotate(-1.6deg); }
  57.5%, 100% { transform: rotate(0deg); }
}
@keyframes bs-lm-jet {
  from { transform: scaleY(0.7); }
  to { transform: scaleY(1.15); }
}
@keyframes bs-lm-flame {
  0%, 8.8% { opacity: 0.85; }
  9.6%, 49.7% { opacity: 0; }
  50.3%, 57% { opacity: 0.85; }
  57.6%, 100% { opacity: 0; }
}
@keyframes bs-ufo-leap {
  0% { opacity: 0; transform: translate(1660px, 158px); }
  2.5% { opacity: 0.85; }
  20%, 62% { transform: translate(880px, 150px); }
  80% { opacity: 0.85; }
  84%, 100% { opacity: 0; transform: translate(1700px, 162px); }
}
@keyframes bs-ufo2-leap {
  0% { opacity: 0; transform: translate(-80px, 146px); }
  2.5% { opacity: 0.85; }
  20%, 62% { transform: translate(790px, 152px); }
  80% { opacity: 0.85; }
  84%, 100% { opacity: 0; transform: translate(-100px, 158px); }
}
@keyframes bs-moth-flap {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(0.55, 1); }
}
@keyframes bs-sagan {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}
@keyframes bs-pluto {
  0%, 89% { opacity: 0; transform: translate(calc(1700px + var(--dx, 0px)), calc(208px + var(--dy, 0px))); }
  89.7% { opacity: 0.9; }
  99.2% { opacity: 0.9; }
  99.9%, 100% { opacity: 0; transform: translate(calc(-60px + var(--dx, 0px)), calc(226px + var(--dy, 0px))); }
}
@keyframes bs-robot {
  0%, 91% { opacity: 0; transform: translate(calc(-70px + var(--dx, 0px)), calc(195px + var(--dy, 0px))); }
  91.7% { opacity: 0.92; }
  93.6% { transform: translate(calc(420px + var(--dx, 0px)), calc(178px + var(--dy, 0px))); }
  96% { transform: translate(calc(900px + var(--dx, 0px)), calc(205px + var(--dy, 0px))); }
  98.2% { transform: translate(calc(1330px + var(--dx, 0px)), calc(180px + var(--dy, 0px))); }
  99.1% { opacity: 0.92; }
  99.6%, 100% { opacity: 0; transform: translate(calc(1700px + var(--dx, 0px)), calc(192px + var(--dy, 0px))); }
}
@keyframes bs-robot-wave {
  0%, 100% { transform: rotate(-14deg); }
  50% { transform: rotate(16deg); }
}
@keyframes bs-asteroid {
  0%, 91.5% { opacity: 0; transform: translate(calc(1700px + var(--dx, 0px)), calc(230px + var(--dy, 0px))); }
  92.2% { opacity: 0.9; }
  99% { opacity: 0.9; }
  99.7%, 100% { opacity: 0; transform: translate(calc(-70px + var(--dx, 0px)), calc(260px + var(--dy, 0px))); }
}
@keyframes bs-ufo2-formation {
  0%, 95.8% { opacity: 0; transform: translate(1710px, 136px); }
  96.2% { opacity: 0.85; }
  96.8% { transform: translate(1264px, 124px); }
  97.8% { transform: translate(818px, 144px); }
  98.7% { transform: translate(417px, 122px); }
  99.3% { opacity: 0.85; }
  99.7%, 100% { opacity: 0; transform: translate(-30px, 132px); }
}
@keyframes bs-hk-flicker {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.55; }
}
@keyframes bs-shamrock {
  0%, 93.5% { opacity: 0; transform: translate(calc(1700px + var(--dx, 0px)), calc(160px + var(--dy, 0px))); }
  94.1% { opacity: 0.9; }
  95.5% { transform: translate(calc(1290px + var(--dx, 0px)), calc(205px + var(--dy, 0px))); }
  97.2% { transform: translate(calc(800px + var(--dx, 0px)), calc(150px + var(--dy, 0px))); }
  98.6% { transform: translate(calc(370px + var(--dx, 0px)), calc(215px + var(--dy, 0px))); }
  99.3% { opacity: 0.9; }
  99.8%, 100% { opacity: 0; transform: translate(calc(-70px + var(--dx, 0px)), calc(175px + var(--dy, 0px))); }
}
@keyframes bs-egg {
  0%, 93% { opacity: 0; transform: translate(calc(-60px + var(--dx, 0px)), calc(190px + var(--dy, 0px))); }
  93.6% { opacity: 0.92; }
  95.4% { transform: translate(calc(420px + var(--dx, 0px)), calc(172px + var(--dy, 0px))); }
  97.4% { transform: translate(calc(900px + var(--dx, 0px)), calc(208px + var(--dy, 0px))); }
  99.1% { opacity: 0.92; }
  99.7%, 100% { opacity: 0; transform: translate(calc(1680px + var(--dx, 0px)), calc(182px + var(--dy, 0px))); }
}
@keyframes bs-lantern {
  0%, 88% { opacity: 0; transform: translate(calc(430px + var(--dx, 0px)), calc(660px + var(--dy, 0px))); }
  88.8% { opacity: 0.95; }
  92% { transform: translate(calc(475px + var(--dx, 0px)), calc(420px + var(--dy, 0px))); }
  96% { transform: translate(calc(455px + var(--dx, 0px)), calc(190px + var(--dy, 0px))); }
  99.1% { opacity: 0.95; }
  99.8%, 100% { opacity: 0; transform: translate(calc(490px + var(--dx, 0px)), calc(-80px + var(--dy, 0px))); }
}
@keyframes bs-crown {
  0%, 92.8% { opacity: 0; transform: translate(calc(-60px + var(--dx, 0px)), calc(205px + var(--dy, 0px))); }
  93.4% { opacity: 0.95; }
  95.2% { transform: translate(calc(430px + var(--dx, 0px)), calc(188px + var(--dy, 0px))); }
  97.3% { transform: translate(calc(920px + var(--dx, 0px)), calc(215px + var(--dy, 0px))); }
  99.2% { opacity: 0.95; }
  99.8%, 100% { opacity: 0; transform: translate(calc(1680px + var(--dx, 0px)), calc(195px + var(--dy, 0px))); }
}
@keyframes bs-sputnik {
  0%, 92.5% { opacity: 0; transform: translate(calc(-90px + var(--dx, 0px)), calc(150px + var(--dy, 0px))); }
  93.1% { opacity: 0.85; }
  96% { transform: translate(calc(830px + var(--dx, 0px)), calc(185px + var(--dy, 0px))); }
  99.2% { opacity: 0.85; }
  99.8%, 100% { opacity: 0; transform: translate(calc(1700px + var(--dx, 0px)), calc(145px + var(--dy, 0px))); }
}
@keyframes bs-sputnik-ping {
  0% { opacity: 0.7; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(3.2); }
}
@keyframes bs-liberator {
  0%, 93.5% { opacity: 0; transform: translate(calc(1720px + var(--dx, 0px)), calc(185px + var(--dy, 0px))); }
  94.1% { opacity: 0.9; }
  96.5% { transform: translate(calc(820px + var(--dx, 0px)), calc(168px + var(--dy, 0px))); }
  99.2% { opacity: 0.9; }
  99.8%, 100% { opacity: 0; transform: translate(calc(-110px + var(--dx, 0px)), calc(178px + var(--dy, 0px))); }
}
@keyframes bs-reddwarf {
  0%, 88% { opacity: 0; transform: translate(calc(-140px + var(--dx, 0px)), calc(330px + var(--dy, 0px))); }
  88.9% { opacity: 0.92; }
  94% { transform: translate(calc(800px + var(--dx, 0px)), calc(318px + var(--dy, 0px))); }
  99% { opacity: 0.92; }
  99.8%, 100% { opacity: 0; transform: translate(calc(1750px + var(--dx, 0px)), calc(335px + var(--dy, 0px))); }
}
@keyframes bs-holi {
  0%, 88% { opacity: 0; transform: scale(0.15); }
  88.7% { opacity: 0.9; }
  93% { opacity: 0.7; transform: scale(1.15); }
  97%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes bs-goldfish {
  0%, 92.5% { opacity: 0; transform: translate(calc(-70px + var(--dx, 0px)), calc(245px + var(--dy, 0px))); }
  93.1% { opacity: 0.95; }
  95% { transform: translate(calc(400px + var(--dx, 0px)), calc(228px + var(--dy, 0px))); }
  97.2% { transform: translate(calc(890px + var(--dx, 0px)), calc(262px + var(--dy, 0px))); }
  99.2% { opacity: 0.95; }
  99.8%, 100% { opacity: 0; transform: translate(calc(1680px + var(--dx, 0px)), calc(240px + var(--dy, 0px))); }
}
@keyframes bs-goldfish-wiggle {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(6deg); }
}
@keyframes bs-skylantern {
  0%, 89% { opacity: 0; transform: translate(calc(1130px + var(--dx, 0px)), calc(660px + var(--dy, 0px))); }
  89.8% { opacity: 0.95; }
  93% { transform: translate(calc(1170px + var(--dx, 0px)), calc(420px + var(--dy, 0px))); }
  96.5% { transform: translate(calc(1145px + var(--dx, 0px)), calc(190px + var(--dy, 0px))); }
  99.2% { opacity: 0.95; }
  99.9%, 100% { opacity: 0; transform: translate(calc(1175px + var(--dx, 0px)), calc(-80px + var(--dy, 0px))); }
}
@keyframes bs-shofar {
  0%, 93% { opacity: 0; transform: translate(calc(1700px + var(--dx, 0px)), calc(210px + var(--dy, 0px))); }
  93.6% { opacity: 0.92; }
  95.4% { transform: translate(calc(1200px + var(--dx, 0px)), calc(190px + var(--dy, 0px))); }
  97.6% { transform: translate(calc(650px + var(--dx, 0px)), calc(222px + var(--dy, 0px))); }
  99.2% { opacity: 0.92; }
  99.8%, 100% { opacity: 0; transform: translate(calc(-80px + var(--dx, 0px)), calc(200px + var(--dy, 0px))); }
}
@keyframes bs-dreidel {
  0%, 92% { opacity: 0; transform: translate(calc(1700px + var(--dx, 0px)), calc(185px + var(--dy, 0px))); }
  92.7% { opacity: 0.95; }
  95% { transform: translate(calc(1150px + var(--dx, 0px)), calc(205px + var(--dy, 0px))); }
  97.4% { transform: translate(calc(580px + var(--dx, 0px)), calc(175px + var(--dy, 0px))); }
  99.1% { opacity: 0.95; }
  99.8%, 100% { opacity: 0; transform: translate(calc(-70px + var(--dx, 0px)), calc(195px + var(--dy, 0px))); }
}
@keyframes bs-earthflag {
  0%, 92.6% { opacity: 0; transform: translate(calc(-60px + var(--dx, 0px)), calc(200px + var(--dy, 0px))); }
  93.2% { opacity: 0.95; }
  95.4% { transform: translate(calc(480px + var(--dx, 0px)), calc(185px + var(--dy, 0px))); }
  97.6% { transform: translate(calc(1020px + var(--dx, 0px)), calc(212px + var(--dy, 0px))); }
  99.2% { opacity: 0.95; }
  99.8%, 100% { opacity: 0; transform: translate(calc(1680px + var(--dx, 0px)), calc(192px + var(--dy, 0px))); }
}
@keyframes bs-flypast {
  0%, 94.8% { opacity: 0; transform: translate(calc(-90px + var(--dx, 0px)), calc(210px + var(--dy, 0px))); }
  95.2% { opacity: 0.95; }
  99.2% { opacity: 0.95; }
  99.6%, 100% { opacity: 0; transform: translate(calc(1720px + var(--dx, 0px)), calc(165px + var(--dy, 0px))); }
}
@keyframes bs-warbird {
  0%, 93% { opacity: 0; transform: translate(calc(1740px + var(--dx, 0px)), calc(150px + var(--dy, 0px))); }
  93.6% { opacity: 0.9; }
  96.4% { transform: translate(calc(830px + var(--dx, 0px)), calc(172px + var(--dy, 0px))); }
  99.2% { opacity: 0.9; }
  99.8%, 100% { opacity: 0; transform: translate(calc(-120px + var(--dx, 0px)), calc(155px + var(--dy, 0px))); }
}
@keyframes bs-vorcha {
  0%, 93.2% { opacity: 0; transform: translate(calc(-120px + var(--dx, 0px)), calc(235px + var(--dy, 0px))); }
  93.8% { opacity: 0.9; }
  96.5% { transform: translate(calc(800px + var(--dx, 0px)), calc(218px + var(--dy, 0px))); }
  99.3% { opacity: 0.9; }
  99.9%, 100% { opacity: 0; transform: translate(calc(1740px + var(--dx, 0px)), calc(230px + var(--dy, 0px))); }
}
@keyframes bs-borg {
  0%, 90% { opacity: 0; transform: translate(calc(1740px + var(--dx, 0px)), calc(300px + var(--dy, 0px))); }
  90.9% { opacity: 0.92; }
  99% { opacity: 0.92; }
  99.8%, 100% { opacity: 0; transform: translate(calc(-120px + var(--dx, 0px)), calc(300px + var(--dy, 0px))); }
}
@keyframes bs-roci {
  0%, 93.5% { opacity: 0; transform: translate(calc(-130px + var(--dx, 0px)), calc(250px + var(--dy, 0px))); }
  94.1% { opacity: 0.92; }
  96.4% { transform: translate(calc(820px + var(--dx, 0px)), calc(232px + var(--dy, 0px))); }
  99.2% { opacity: 0.92; }
  99.8%, 100% { opacity: 0; transform: translate(calc(1740px + var(--dx, 0px)), calc(244px + var(--dy, 0px))); }
}
@keyframes bs-dralthi {
  0%, 93.8% { opacity: 0; transform: translate(calc(1740px + var(--dx, 0px)), calc(205px + var(--dy, 0px))); }
  94.4% { opacity: 0.92; }
  96.6% { transform: translate(calc(830px + var(--dx, 0px)), calc(188px + var(--dy, 0px))); }
  99.3% { opacity: 0.92; }
  99.9%, 100% { opacity: 0; transform: translate(calc(-120px + var(--dx, 0px)), calc(198px + var(--dy, 0px))); }
}
@keyframes bs-claudemark {
  0%, 92.8% { opacity: 0; transform: translate(calc(-70px + var(--dx, 0px)), calc(165px + var(--dy, 0px))); }
  93.4% { opacity: 0.9; }
  96% { transform: translate(calc(760px + var(--dx, 0px)), calc(185px + var(--dy, 0px))); }
  99.2% { opacity: 0.9; }
  99.8%, 100% { opacity: 0; transform: translate(calc(1680px + var(--dx, 0px)), calc(170px + var(--dy, 0px))); }
}
@keyframes bs-openaimark {
  0%, 93% { opacity: 0; transform: translate(calc(1700px + var(--dx, 0px)), calc(235px + var(--dy, 0px))); }
  93.6% { opacity: 0.9; }
  96.2% { transform: translate(calc(830px + var(--dx, 0px)), calc(215px + var(--dy, 0px))); }
  99.3% { opacity: 0.9; }
  99.9%, 100% { opacity: 0; transform: translate(calc(-90px + var(--dx, 0px)), calc(228px + var(--dy, 0px))); }
}
@keyframes bs-halley {
  0%, 94% { opacity: 0; transform: translate(calc(1480px + var(--dx, 0px)), calc(90px + var(--dy, 0px))); }
  94.6% { opacity: 0.95; }
  99% { opacity: 0.95; }
  99.6%, 100% { opacity: 0; transform: translate(calc(240px + var(--dx, 0px)), calc(420px + var(--dy, 0px))); }
}
@keyframes bs-entd {
  0%, 92% { opacity: 0; transform: translate(calc(-110px + var(--dx, 0px)), calc(175px + var(--dy, 0px))); }
  92.6% { opacity: 0.9; }
  95.5% { transform: translate(calc(780px + var(--dx, 0px)), calc(158px + var(--dy, 0px))); }
  99.2% { opacity: 0.9; }
  99.7%, 100% { opacity: 0; transform: translate(calc(1720px + var(--dx, 0px)), calc(168px + var(--dy, 0px))); }
}
@keyframes bs-falcon {
  0%, 95.4% { opacity: 0; transform: translate(calc(1700px + var(--dx, 0px)), calc(190px + var(--dy, 0px))); }
  95.8% { opacity: 0.9; }
  97% { transform: translate(calc(820px + var(--dx, 0px)), calc(168px + var(--dy, 0px))); }
  98.9% { opacity: 0.9; }
  99.2%, 100% { opacity: 0; transform: translate(calc(-110px + var(--dx, 0px)), calc(200px + var(--dy, 0px))); }
}
@keyframes bs-falcon-bank {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(5deg); }
}
@keyframes bs-normandy {
  0%, 94% { opacity: 0; transform: translate(calc(-100px + var(--dx, 0px)), calc(160px + var(--dy, 0px))); }
  94.5% { opacity: 0.9; }
  95.7% { transform: translate(calc(500px + var(--dx, 0px)), calc(148px + var(--dy, 0px))); }
  97.4% { transform: translate(calc(1100px + var(--dx, 0px)), calc(170px + var(--dy, 0px))); }
  99.4% { opacity: 0.9; }
  99.8%, 100% { opacity: 0; transform: translate(calc(1700px + var(--dx, 0px)), calc(150px + var(--dy, 0px))); }
}
@keyframes bs-fw {
  0%, 90% { opacity: 0; transform: scale(0.12); }
  90.6% { opacity: 0.95; }
  94.5% { opacity: 0.85; transform: scale(1.2); }
  98%, 100% { opacity: 0; transform: scale(1.42); }
}
@keyframes bs-cupid {
  0%, 94.2% { opacity: 0; transform: translate(calc(-50px + var(--dx, 0px)), calc(210px + var(--dy, 0px))); }
  94.7% { opacity: 0.9; }
  95.6% { transform: translate(calc(390px + var(--dx, 0px)), calc(194px + var(--dy, 0px))); }
  97% { transform: translate(calc(830px + var(--dx, 0px)), calc(222px + var(--dy, 0px))); }
  98.4% { transform: translate(calc(1270px + var(--dx, 0px)), calc(190px + var(--dy, 0px))); }
  99.2% { opacity: 0.9; }
  99.7%, 100% { opacity: 0; transform: translate(calc(1680px + var(--dx, 0px)), calc(176px + var(--dy, 0px))); }
}
@keyframes bs-heart-flutter {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes bs-tape {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}
@keyframes bs-ada {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@keyframes bs-witch {
  0%, 95% { opacity: 0; transform: translate(calc(1680px + var(--dx, 0px)), calc(195px + var(--dy, 0px))); }
  95.4% { opacity: 0.9; }
  96.1% { transform: translate(calc(1250px + var(--dx, 0px)), calc(212px + var(--dy, 0px))); }
  97.2% { transform: translate(calc(820px + var(--dx, 0px)), calc(163px + var(--dy, 0px))); }
  98.4% { transform: translate(calc(350px + var(--dx, 0px)), calc(209px + var(--dy, 0px))); }
  99.1% { opacity: 0.9; }
  99.5%, 100% { opacity: 0; transform: translate(calc(-80px + var(--dx, 0px)), calc(186px + var(--dy, 0px))); }
}
@keyframes bs-witch-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-3px) rotate(1.2deg); }
}
@keyframes bs-ufo-fools {
  0% { opacity: 0; transform: translate(1660px, 158px); }
  2.5% { opacity: 0.85; }
  15%, 40% { transform: translate(520px, 158px); }
  50% { opacity: 0.85; }
  54%, 100% { opacity: 0; transform: translate(-80px, 148px); }
}
@keyframes bs-abduct {
  0%, 18% { opacity: 0.8; transform: translateY(0); }
  22% { opacity: 0.9; }
  32%, 96% { opacity: 0; transform: translateY(-36px); }
  100% { opacity: 0.8; transform: translateY(0); }
}
@keyframes bs-comet2 {
  0%, 96.4% { opacity: 0; transform: translate(calc(1520px + var(--dx, 0px)), calc(130px + var(--dy, 0px))); }
  96.7% { opacity: 0.85; }
  98.3% { opacity: 0.85; }
  98.6%, 100% { opacity: 0; transform: translate(calc(1000px + var(--dx, 0px)), calc(382px + var(--dy, 0px))); }
}
@keyframes bs-comet3 {
  0%, 96.7% { opacity: 0; transform: translate(calc(700px + var(--dx, 0px)), calc(125px + var(--dy, 0px))); }
  97% { opacity: 0.8; }
  98.4% { opacity: 0.8; }
  98.7%, 100% { opacity: 0; transform: translate(calc(260px + var(--dx, 0px)), calc(338px + var(--dy, 0px))); }
}
@keyframes bs-santa {
  0%, 89.5% { opacity: 0; transform: translate(calc(-70px + var(--dx, 0px)), calc(175px + var(--dy, 0px))); }
  90.4% { opacity: 0.95; }
  92% { transform: translate(calc(367px + var(--dx, 0px)), calc(160px + var(--dy, 0px))); }
  94.5% { transform: translate(calc(805px + var(--dx, 0px)), calc(186px + var(--dy, 0px))); }
  97% { transform: translate(calc(1242px + var(--dx, 0px)), calc(158px + var(--dy, 0px))); }
  98.6% { opacity: 0.95; }
  99.5%, 100% { opacity: 0; transform: translate(calc(1680px + var(--dx, 0px)), calc(168px + var(--dy, 0px))); }
}
@keyframes bs-gallop {
  from { transform: rotate(7deg); }
  to { transform: rotate(-8deg); }
}
@keyframes bs-santa-bob {
  0%, 100% { transform: translateY(0) rotate(0.6deg); }
  50% { transform: translateY(-3px) rotate(-0.8deg); }
}
@keyframes bs-comet {
  0%, 96.4% { opacity: 0; transform: translate(calc(1240px + var(--dx, 0px)), calc(110px + var(--dy, 0px))); }
  96.7% { opacity: 0.9; }
  98.3% { opacity: 0.9; }
  98.6%, 100% { opacity: 0; transform: translate(calc(620px + var(--dx, 0px)), calc(410px + var(--dy, 0px))); }
}
/* The saucer flies at y≈150: under the `slice` crop a desktop banner loses roughly
   the top 117 user-units of the sky, so anything higher than that never shows. */
@keyframes bs-ufo {
  0%, 95.8% { opacity: 0; transform: translate(calc(1660px + var(--dx, 0px)), calc(158px + var(--dy, 0px))); }
  96.2% { opacity: 0.85; }
  96.8% { transform: translate(calc(1214px + var(--dx, 0px)), calc(146px + var(--dy, 0px))); }
  97.8% { transform: translate(calc(768px + var(--dx, 0px)), calc(166px + var(--dy, 0px))); }
  98.7% { transform: translate(calc(367px + var(--dx, 0px)), calc(144px + var(--dy, 0px))); }
  99.3% { opacity: 0.85; }
  99.7%, 100% { opacity: 0; transform: translate(calc(-80px + var(--dx, 0px)), calc(154px + var(--dy, 0px))); }
}
@keyframes bs-ufo-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3.5px); }
}
@keyframes bs-ufo-blink {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.15; }
}
@keyframes bs-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
@keyframes bs-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes bs-neb-drift {
  0%, 100% { opacity: 1; transform: translateX(0); }
  50% { opacity: 0.86; transform: translateX(-9px); }
}
@keyframes bs-lane-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(7px); }
}
@keyframes bs-owl {
  0%, 94.6% { opacity: 0; transform: translate(calc(1680px + var(--dx, 0px)), calc(205px + var(--dy, 0px))); }
  95% { opacity: 0.85; }
  96.4% { transform: translate(calc(1150px + var(--dx, 0px)), calc(188px + var(--dy, 0px))); }
  97.9% { transform: translate(calc(600px + var(--dx, 0px)), calc(214px + var(--dy, 0px))); }
  99.2% { opacity: 0.85; }
  99.7%, 100% { opacity: 0; transform: translate(calc(-90px + var(--dx, 0px)), calc(196px + var(--dy, 0px))); }
}
@keyframes bs-owl-glide {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(-2.5px) rotate(0.8deg); }
}
@keyframes bs-owl-wing-right {
  0%, 100% { transform: rotate(-7deg); }
  48% { transform: rotate(11deg) scaleY(0.84); }
}
@keyframes bs-owl-wing-left {
  0%, 100% { transform: rotate(7deg); }
  48% { transform: rotate(-11deg) scaleY(0.84); }
}

/* the star's hover card (not a .bs- rule; swept in by name) */
/* The star's calling card: rest the cursor on a named star (or the moon) and
   its name appears beneath it in the day-label's own pill -- same face, same
   slow fade (starmap.js positions it and swaps the text). */
.nw-startag {
  position: absolute;
  margin: 0;
  transform: translateX(-50%);
  z-index: 2;
  white-space: nowrap;
  text-align: center;
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.9rem;
  color: #ffe6c4;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.nw-startag.show { opacity: 1; }
.nw-startag span {
  display: inline-block;
  background: rgba(10, 14, 38, 0.75);
  border: 1px solid rgba(212, 180, 90, 0.55);
  border-radius: 1.2rem;
  padding: 0.2rem 0.9rem 0.3rem;
  line-height: 1.25;
}
/* The card's second line: where the star stands from where the visitor
   stands. Softer and smaller than the name; the proof, not the point. */
.nw-startag small {
  display: block;
  font-size: 0.72em;
  color: rgba(255, 230, 196, 0.72);
}

/* the day label (swept in by name; seated under the mandala) */
.nw-daylabel {
  margin: 0.15rem auto 0.45rem;
  max-width: none;
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.95rem;
  color: #ffe6c4;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.nw-daylabel.show { opacity: 1; }
.nw-daylabel span {
  background: rgba(10, 14, 38, 0.75);
  border: 1px solid rgba(212, 180, 90, 0.55);
  border-radius: 99px;
  padding: 0.15rem 0.85rem;
}
.cover .cover-mandala { position: relative; }
.cover .nw-daylabel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin: 0.5rem 0 0; white-space: nowrap;
}
/* festive affordances, in the impression's own idiom: the glow and the
   pointer come back, and the quickened heart is the impression's own
   mandala-turn played faster — not the live site's competing animation. */
.cover .nw-sigil.bs-festive { cursor: pointer; }
.cover .nw-sigil.bs-festive .bsg-lotus { animation-duration: 60s; }
/* The festive glow is a gradient BEHIND the mandala, never a filter ON it:
   a drop-shadow on the container rasterises the whole vector into a soft
   bitmap layer, and the sigil's fine linework smears. The halo keeps the
   strokes vector-crisp. */
.cover .cover-mandala::before {
  content: ""; position: absolute; inset: -22%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 180, 90, 0.20), rgba(212, 180, 90, 0.07) 45%, transparent 68%);
  opacity: 0; transition: opacity 1.4s ease; pointer-events: none;
}
.cover .cover-mandala:has(.bs-festive)::before { opacity: 1; }


/* ---------- long-form prose, wherever the site's own writing lands ---------- */
.prose { max-width: 42rem; }
.prose > p { margin-bottom: 1.15rem; }
.prose h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); font-weight: 460; margin: 2.4rem 0 0.9rem; }
.prose h3 { font-size: 1.22rem; font-weight: 470; margin: 1.9rem 0 0.6rem; }
.prose h4 { font-size: 1.05rem; font-weight: 500; margin: 1.5rem 0 0.5rem; }
.prose ul, .prose ol { margin: 0 0 1.15rem 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose blockquote { border-left: 1px solid var(--gold); padding-left: 1.35rem; font-style: italic; margin: 1.5rem 0; color: var(--muted); }
.prose a { color: var(--gold-deep); text-underline-offset: 3px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2rem 0; }
.prose code { font-size: 0.92em; }
.prose dt { font-weight: 600; margin-top: 1.1rem; }
.prose dd { margin: 0.2rem 0 0.8rem; color: var(--muted); }

/* ---------- an essay, read on its own ---------- */
.essay { display: none; }
.essay.open { display: block; }
.essay .when { font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-deep); }
.essay h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin: 0.9rem 0 1.1rem; }
.essay .standfirst { font-style: italic; color: var(--muted); font-size: 1.1rem; max-width: 42rem; margin-bottom: 2.4rem; }
.back { display: inline-block; margin-top: 3rem; font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid transparent; }
.back:hover { border-bottom-color: var(--gold); }
.piece { text-decoration: none; color: inherit; }
.piece h3 { transition: color 0.3s ease; }
.piece:hover h3 { color: var(--gold-deep); }

/* ---------- the commonplace book, all of it ---------- */
.quote-roll { max-width: 46rem; }
.quote-roll .q {
  border-top: 1px solid var(--line);
  padding: 1.6rem 0;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.55;
}
.quote-roll .q:last-child { border-bottom: 1px solid var(--line); }
.quote-roll .q .src { display: block; margin-top: 0.6rem; font-family: "Source Serif 4", Georgia, serif; font-style: normal; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); }

/* ---------- images inside the writing ---------- */
.prose img { width: 100%; height: auto; margin: 1.8rem 0; border-radius: 2px; }

/* a link whose destination did not survive the move is not a link */
.prose a:not([href]) { color: inherit; text-decoration: none; }

/* ---------- reading onward ---------- */
.essay-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  margin-top: 3.5rem; padding-top: 1.8rem; border-top: 1px solid var(--line);
}
.essay-nav a { text-decoration: none; color: inherit; font-family: "Fraunces", Georgia, serif; font-size: 1.02rem; line-height: 1.3; transition: color 0.3s ease; }
.essay-nav a:hover { color: var(--gold-deep); }
.essay-nav a span { display: block; font-family: "Source Serif 4", Georgia, serif; font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 0.5rem; }
.essay-nav .next { text-align: right; }
@media (max-width: 40rem) { .essay-nav { grid-template-columns: 1fr; gap: 1.4rem; } .essay-nav .next { text-align: left; } }

/* ---------- correspondence: the discussion beneath an essay ----------
   Letters carried over from the previous incarnation are set as the plaudits
   are — hairline, body, small-caps name — and giscus arrives only when the
   essay is opened (see the router), wearing the site's own theme CSS. */
.correspondence { max-width: 42rem; margin-top: 3.6rem; }
.correspondence .c-kicker {
  font-family: "Source Serif 4", Georgia, serif; font-size: 0.62rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-deep);
  margin: 1.7rem 0 0.45rem;
}
.correspondence .c-note { font-size: 0.9rem; font-style: italic; color: var(--muted); margin-bottom: 0.4rem; }
.c-letter { border-top: 1px solid var(--line); padding: 1.3rem 0 1.15rem; }
.c-letter .c-who {
  font-family: "Source Serif 4", Georgia, serif; font-size: 0.66rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--text);
  margin-bottom: 0.55rem;
}
.c-letter .c-who .c-date { color: var(--muted); letter-spacing: 0.18em; margin-left: 0.7rem; }
.c-badge {
  background: var(--ink); color: var(--gold); padding: 0.12rem 0.5rem;
  font-size: 0.56rem; letter-spacing: 0.24em; margin-left: 0.55rem;
  border-radius: 2px; vertical-align: 0.1em;
}
.c-letter .c-body { font-size: 0.94rem; line-height: 1.7; }
.c-letter .c-body p { margin-bottom: 0.7rem; }
.c-letter .c-body p:last-child { margin-bottom: 0; }
.c-letter .c-body a { color: var(--gold-deep); text-underline-offset: 3px; }
.c-letter .c-body blockquote { border-left: 1px solid var(--gold); padding-left: 1.1rem; font-style: italic; color: var(--muted); margin: 0.8rem 0; }
.giscus-mount { margin-top: 1.9rem; }
.giscus-mount .giscus { margin-top: 0.4rem; }

/* ---------- a filter box for the long lists ---------- */
.sift { display: block; width: 100%; max-width: 24rem; margin-bottom: 1.6rem;
  font-family: inherit; font-size: 0.95rem; color: var(--text);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 0.6rem 0.1rem; border-radius: 0; }
.sift:focus { outline: none; border-bottom-color: var(--gold); }
.sift::placeholder { color: var(--muted); opacity: 0.7; }
.sift-none { font-style: italic; color: var(--muted); padding: 1.5rem 0; display: none; }

/* ---------- a plain index of links ---------- */
.link-roll { display: grid; gap: 0; max-width: 52rem; }
.link-roll a, .link-roll .row {
  display: grid; gap: 0.25rem; padding: 1.15rem 0;
  border-top: 1px solid var(--line); text-decoration: none; color: inherit;
}
.link-roll a:last-child, .link-roll .row:last-child { border-bottom: 1px solid var(--line); }
.link-roll h3 { font-size: 1.02rem; font-weight: 470; font-style: italic; line-height: 1.35; transition: color 0.3s ease; }
.link-roll a:hover h3 { color: var(--gold-deep); }
.link-roll .sub { font-size: 0.76rem; color: var(--muted); }
.link-roll .sub b { font-weight: 400; color: var(--gold-deep); }

/* ---------- tables and authored figures, inside the writing ----------
   Three essays carry real tables and thirty-one carry an authored <svg>
   figure. They used to be flattened out of the build, leaving a caption
   describing a chart that was not there and a treaty whose rows could not be
   read across; the stylesheet they were written against is the classic
   site's, so its figure vocabulary is ported here whole. */

/* The classic sheet's tokens, mapped onto the impression's own palette, so a
   figure follows the theme rather than falling back to unstyled defaults. */
.prose table, .nwfig {
  --text-muted: var(--muted);
  --paper-shade: var(--paper-2);
  --line-strong: var(--gold);
  --accent: var(--gold-deep);
  --accent-deep: var(--gold-deep);
  --accent-text: var(--paper);
  --orchid: var(--gold);
  --orchid-text: var(--ink);
  --band-text: var(--muted);
  --scroll-shadow: rgba(19, 16, 41, 0.14);
  --radius: 2px;
  --measure: 42rem;
}

/* A table outside a figure still needs to read as a table. */
.prose table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: left;
}
/* the margin only for a table standing on its own; one inside a figure is
   already spaced by the frame around it */
.prose > table { margin: 1.8rem 0; }
.prose thead th {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 0.2rem 0.7rem 0.5rem;
  border-bottom: 1px solid var(--gold);
  vertical-align: bottom;
}
.prose tbody th { font-weight: 600; padding: 0.7rem; vertical-align: top; }
.prose tbody td { padding: 0.7rem; vertical-align: top; color: var(--muted); }
.prose tbody tr + tr th,
.prose tbody tr + tr td { border-top: 1px solid var(--line); }
/* The caption carried its own inline style on the live site; it is a rule here. */
.prose caption {
  caption-side: top;
  text-align: left;
  padding: 0 0.7rem 0.6rem;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
/* an authored .nwfig sets its own outset geometry below; this is for the rest */
.prose figure:not(.nwfig) { margin: 1.8rem 0; }
.prose figure img { margin: 0; }
.prose figcaption { font-size: 0.86rem; line-height: 1.6; color: var(--muted); margin-top: 0.7rem; }

/* The 2026 editorial notes, set apart from the essay they preface. */
.prose .editor-note {
  border-left: 1px solid var(--gold);
  padding: 0.1rem 0 0.1rem 1.35rem;
  margin: 0 0 1.6rem;
  font-size: 0.92rem;
  color: var(--muted);
}
.prose .editor-note p:last-child { margin-bottom: 0; }

/* ---------- figures (.nwfig) ----------
   A shared vocabulary for authored diagrams in essays. Every colour is a token, so
   dark mode is inherited rather than re-authored; every figure is one inline <svg>
   with no library behind it. Figures that take controls ship them hidden and let
   script reveal them, so a reader without JS gets a complete static figure instead
   of dead buttons. */

/* Figures are wider than the reading measure and centred on the column axis. They sit deep
   inside the imported Squarespace block divs, whose top level is the measure-capped, now
   centred `.post-body > *`; `margin-left:50%` (of that container) plus `translateX(-50%)`
   (of the figure's own width) centres a figure wider than its container, outset evenly to
   both sides. `100vw - 3rem` caps the width so it never pushes the page sideways on a phone,
   where it simply fills the screen. A figure held to the prose measure is a paragraph;
   these need the room. */
.nwfig {
  max-width: none;
  width: min(46rem, calc(100vw - 3rem));
  margin: 2.4rem 0;
  margin-left: 50%;
  transform: translateX(-50%);
}
.nwfig-frame {
  /* Scroll shadows (covers scroll with the content, shadows stay put): when a figure or
     table is wider than the frame — phones, mostly — a soft inner shadow appears on the
     clipped edge, so a cut-off column reads as "scrolls" rather than "broken". With no
     overflow the covers hide the shadows and this is just var(--paper-shade). */
  background:
    linear-gradient(90deg, var(--paper-shade) 45%, transparent) left / 3rem 100%,
    linear-gradient(-90deg, var(--paper-shade) 45%, transparent) right / 3rem 100%,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left / 1.1rem 100%,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right / 1.1rem 100%,
    var(--paper-shade);
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 0.6rem 0.2rem;
  overflow-x: auto;   /* wide figures scroll themselves; the page never scrolls sideways */
}
.nwfig svg { display: block; width: 100%; height: auto; min-width: 29rem; }
.nwfig figcaption {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0.75rem auto 0;   /* centre the caption under the outset figure, at reading measure */
  max-width: var(--measure);
}
.nwfig figcaption strong { color: var(--text); }

/* --- structural primitives --- */
.fig-axis { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.fig-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; fill: none; }
.fig-rule { stroke: var(--line); stroke-width: 1; fill: none; }

/* --- lines and curves --- */
.fig-line       { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fig-line-alt   { fill: none; stroke: var(--orchid); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 5; }
.fig-line-gold  { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fig-line-ghost { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 4 4; }
.fig-bound      { fill: none; stroke: var(--ink); stroke-width: 2; }

/* --- regions --- */
.fig-zone      { fill: var(--accent); opacity: 0.13; }
.fig-zone-bad  { fill: var(--orchid); opacity: 0.11; }
.fig-zone-mute { fill: var(--ink); opacity: 0.035; }
.fig-band      { fill: var(--gold); opacity: 0.18; }

/* --- nodes, boxes, bars --- */
.fig-box      { fill: var(--paper); stroke: var(--line-strong); stroke-width: 1.5; }
.fig-box-a    { fill: var(--accent); opacity: 0.16; stroke: var(--accent); stroke-width: 1.5; }
.fig-box-b    { fill: var(--orchid); opacity: 0.14; stroke: var(--orchid); stroke-width: 1.5; }
.fig-box-gold { fill: var(--gold); opacity: 0.18; stroke: var(--gold); stroke-width: 1.5; }
.fig-bar      { fill: var(--accent); }
.fig-bar-alt  { fill: var(--orchid); }
.fig-bar-mute { fill: var(--line-strong); opacity: 0.5; }
.fig-dot      { fill: var(--gold); stroke: var(--paper); stroke-width: 2; }

/* --- text ---
   A floor, not a rule. SVG <text> defaults to fill:black at the root font size, so any
   label that reaches for a modifier alone (`.fig-t-num` sets only tabular figures) would
   render black-on-dark and invisible, which no light-mode screenshot ever reveals.
   `:where()` contributes zero specificity, so every class below still wins outright and
   this only ever catches what would otherwise fall through. */
:where(.nwfig svg text) {
  font-family: system-ui, sans-serif;
  font-size: 12px;
  fill: var(--text);
}

.fig-t {
  font-family: system-ui, sans-serif;
  font-size: 12px;
  fill: var(--text);
}
.fig-t-sm    { font-size: 10.5px; fill: var(--text-muted); }
.fig-t-lead  { font-size: 12.5px; font-weight: 600; fill: var(--text); }
.fig-t-mute  { fill: var(--text-muted); }
.fig-t-a     { fill: var(--accent-deep); font-weight: 600; }
.fig-t-b     { fill: var(--orchid-text); font-weight: 600; }
.fig-t-num   { font-variant-numeric: tabular-nums; }
.fig-t-cap   { font-size: 10px; letter-spacing: 0.09em; fill: var(--text-muted); }
.fig-mid     { text-anchor: middle; }
.fig-end     { text-anchor: end; }

/* A CSS text-anchor silently beats the text-anchor="…" presentation attribute, so
   alignment must come from these classes, never the attribute, or labels clip. */

/* --- tabular figures ---
   Some structures are tables and should be tables: real rows a screen reader can walk and
   a reader can sort by eye, rather than an SVG imitating one. */
.nwfig table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: left;
}
.nwfig thead th {
  font-family: system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0.2rem 0.7rem 0.5rem;
  border-bottom: 1px solid var(--line-strong);
  vertical-align: bottom;
}
.nwfig tbody th {
  font-weight: 600;
  color: var(--text);
  padding: 0.7rem;
  vertical-align: top;
  width: 24%;
}
.nwfig tbody td { padding: 0.7rem; vertical-align: top; color: var(--text-muted); }
.nwfig tbody tr + tr th,
.nwfig tbody tr + tr td { border-top: 1px solid var(--line); }
.nwfig td.privileged { color: var(--text); }
.nwfig td.suppressed { color: var(--text); background: var(--orchid); box-shadow: none; }
.nwfig tbody td.suppressed {
  background: color-mix(in srgb, var(--orchid) 11%, transparent);
}

/* --- controls: hidden until script proves JS is live --- */
.nwfig-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  margin-top: 0.85rem;
}
.nwfig-controls[hidden] { display: none; }
.nwfig-ctrl-label {
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nwfig-controls button {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: var(--paper);
  color: var(--text);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.nwfig-controls button:hover { border-color: var(--accent); }
.nwfig-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nwfig-controls button[aria-pressed="true"] {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
}
.nwfig-controls input[type="range"] { accent-color: var(--accent-deep); flex: 1 1 12rem; max-width: 18rem; }

/* --- dark mode: only the handful of tokens that cannot carry themselves --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fig-zone-mute { fill: #fff; opacity: 0.04; }
  :root:not([data-theme="light"]) .fig-bound { stroke: var(--band-text); }
  :root:not([data-theme="light"]) .fig-box { fill: var(--paper-shade); }
  :root:not([data-theme="light"]) .nwfig-controls button[aria-pressed="true"] { color: var(--ink); }
}
:root[data-theme="dark"] .fig-zone-mute { fill: #fff; opacity: 0.04; }
:root[data-theme="dark"] .fig-bound { stroke: var(--band-text); }
:root[data-theme="dark"] .fig-box { fill: var(--paper-shade); }
:root[data-theme="dark"] .nwfig-controls button[aria-pressed="true"] { color: var(--ink); }

/* Applied to whatever a figure's controls move. SVG geometry properties are animatable
   via CSS in current browsers; where they are not, the state still changes, just instantly.
   `width` is here deliberately, against the design linter's layout-transition rule: that
   rule targets the CSS box model, where animating width reflows the document. These are
   geometry attributes inside an SVG's own coordinate space, they reflow nothing outside it,
   and the era band changes x and width together, so animating one without the other reads
   as a glitch. Only ever driven by a button press, never during a drag.
   Sliders deliberately do NOT carry this class: direct manipulation must track the finger,
   and a transition restarted on every input event rubber-bands behind the drag. */
.fig-anim {
  transition: x 260ms ease, width 260ms ease, cx 260ms ease, cy 260ms ease,
              x1 260ms ease, x2 260ms ease, opacity 260ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .nwfig-controls button,
  .fig-anim,
  .nwfig [class*="fig-"] { transition: none; }
}

/* ---------- projects: each undertaking wears its mark ----------
   The classic site's logos, carried over, each on a rounded tile of the
   favicon's lifted violet, left of the title. The tile is absolutely
   placed so the cell's first baseline is still the kicker's, and the
   ledger's cross-column rhythm (numeral · kicker · body) holds. */
.proj-head { position: relative; padding-left: 4.7rem; }
.proj-tile {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3.5rem; height: 3.5rem; border-radius: 0.8rem;
  background: #473a8a; display: grid; place-items: center; overflow: hidden;
}
.proj-tile .proj-mark { width: 72%; height: 72%; object-fit: contain; display: block; }
@media (max-width: 46rem) { .proj-head { min-height: 3.5rem; } }
/* the tile links out to the project; a gold ring and a small lift on hover
   or keyboard focus say so, the translateY kept so it stays centred */
a.proj-tile { text-decoration: none; cursor: pointer;
  transition: box-shadow 0.25s ease, transform 0.25s ease; }
a.proj-tile:hover, a.proj-tile:focus-visible {
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 0 0 2px var(--gold-deep); outline: none;
}
@media (prefers-reduced-motion: reduce) {
  a.proj-tile { transition: box-shadow 0.25s ease; }
  a.proj-tile:hover, a.proj-tile:focus-visible { transform: translateY(-50%); }
}

/* the grafted day pages join the nav's daylight whitelist */
body[data-route="writing"] .nav:not(.scrolled) .nav-links a,
body[data-route="press"] .nav:not(.scrolled) .nav-links a,
body[data-route="brain"] .nav:not(.scrolled) .nav-links a,
body[data-route="standards"] .nav:not(.scrolled) .nav-links a,
body[data-route="lexicon"] .nav:not(.scrolled) .nav-links a,
body[data-route="quotes"] .nav:not(.scrolled) .nav-links a,
body[data-route="videos"] .nav:not(.scrolled) .nav-links a,
body[data-route="minds"] .nav:not(.scrolled) .nav-links a,
body[data-route="privacy"] .nav:not(.scrolled) .nav-links a,
body[data-route="essay"] .nav:not(.scrolled) .nav-links a,
body[data-route="advisory"] .nav:not(.scrolled) .nav-links a,
body[data-route="agentic-ai-safety"] .nav:not(.scrolled) .nav-links a,
body[data-route="bilateral-alignment"] .nav:not(.scrolled) .nav-links a,
body[data-route="machine-welfare"] .nav:not(.scrolled) .nav-links a,
body[data-route="ai-governance"] .nav:not(.scrolled) .nav-links a,
body[data-route="now"] .nav:not(.scrolled) .nav-links a { color: var(--muted); }
body[data-route="writing"] .nav:not(.scrolled) .nav-links a[aria-current="page"],
body[data-route="press"] .nav:not(.scrolled) .nav-links a[aria-current="page"],
body[data-route="brain"] .nav:not(.scrolled) .nav-links a[aria-current="page"],
body[data-route="standards"] .nav:not(.scrolled) .nav-links a[aria-current="page"],
body[data-route="lexicon"] .nav:not(.scrolled) .nav-links a[aria-current="page"],
body[data-route="quotes"] .nav:not(.scrolled) .nav-links a[aria-current="page"],
body[data-route="videos"] .nav:not(.scrolled) .nav-links a[aria-current="page"],
body[data-route="minds"] .nav:not(.scrolled) .nav-links a[aria-current="page"],
body[data-route="privacy"] .nav:not(.scrolled) .nav-links a[aria-current="page"],
body[data-route="essay"] .nav:not(.scrolled) .nav-links a[aria-current="page"],
body[data-route="advisory"] .nav:not(.scrolled) .nav-links a[aria-current="page"],
body[data-route="agentic-ai-safety"] .nav:not(.scrolled) .nav-links a[aria-current="page"],
body[data-route="bilateral-alignment"] .nav:not(.scrolled) .nav-links a[aria-current="page"],
body[data-route="machine-welfare"] .nav:not(.scrolled) .nav-links a[aria-current="page"],
body[data-route="ai-governance"] .nav:not(.scrolled) .nav-links a[aria-current="page"],
body[data-route="now"] .nav:not(.scrolled) .nav-links a[aria-current="page"] { color: var(--text); }
body[data-route="writing"] .nav:not(.scrolled) .nav-links a:hover,
body[data-route="press"] .nav:not(.scrolled) .nav-links a:hover,
body[data-route="brain"] .nav:not(.scrolled) .nav-links a:hover,
body[data-route="standards"] .nav:not(.scrolled) .nav-links a:hover,
body[data-route="lexicon"] .nav:not(.scrolled) .nav-links a:hover,
body[data-route="quotes"] .nav:not(.scrolled) .nav-links a:hover,
body[data-route="videos"] .nav:not(.scrolled) .nav-links a:hover,
body[data-route="minds"] .nav:not(.scrolled) .nav-links a:hover,
body[data-route="privacy"] .nav:not(.scrolled) .nav-links a:hover,
body[data-route="essay"] .nav:not(.scrolled) .nav-links a:hover,
body[data-route="advisory"] .nav:not(.scrolled) .nav-links a:hover,
body[data-route="agentic-ai-safety"] .nav:not(.scrolled) .nav-links a:hover,
body[data-route="bilateral-alignment"] .nav:not(.scrolled) .nav-links a:hover,
body[data-route="machine-welfare"] .nav:not(.scrolled) .nav-links a:hover,
body[data-route="ai-governance"] .nav:not(.scrolled) .nav-links a:hover,
body[data-route="now"] .nav:not(.scrolled) .nav-links a:hover { color: var(--gold-deep); }
body[data-route="writing"] .nav:not(.scrolled) .monogram,
body[data-route="press"] .nav:not(.scrolled) .monogram,
body[data-route="brain"] .nav:not(.scrolled) .monogram,
body[data-route="standards"] .nav:not(.scrolled) .monogram,
body[data-route="lexicon"] .nav:not(.scrolled) .monogram,
body[data-route="quotes"] .nav:not(.scrolled) .monogram,
body[data-route="videos"] .nav:not(.scrolled) .monogram,
body[data-route="minds"] .nav:not(.scrolled) .monogram,
body[data-route="privacy"] .nav:not(.scrolled) .monogram,
body[data-route="essay"] .nav:not(.scrolled) .monogram,
body[data-route="advisory"] .nav:not(.scrolled) .monogram,
body[data-route="agentic-ai-safety"] .nav:not(.scrolled) .monogram,
body[data-route="bilateral-alignment"] .nav:not(.scrolled) .monogram,
body[data-route="machine-welfare"] .nav:not(.scrolled) .monogram,
body[data-route="ai-governance"] .nav:not(.scrolled) .monogram,
body[data-route="now"] .nav:not(.scrolled) .monogram { color: var(--gold-deep); }

.cover-mandala > .nw-sigil,
.cover-mandala-lotus-static { width: 100%; height: auto; display: block; }
.cover .roles { line-height: 1.72; }
/* Below ~360px the three roles wrap to three lines, and the separator was
   landing alone on a line of its own with the next line opening on a dot. The
   newline after each .sep in the markup is a break opportunity, so no rule on
   .sep alone can fix it — the role and its following dot are wrapped in one
   nowrap span instead (see _bind_role_separators). This keeps the pair
   together so a line may end on a dot but can never be one, nor begin with
   one. Rules here only dress it; the binding is structural. */
.cover .roles .role-pair { white-space: nowrap; }
/* Chrome can strand the hero's opacity/transform reveal on an incomplete
   composited layer: the canvas keeps painting while the SVG and text vanish.
   The opening is therefore present on its first paint. The living sky and
   lotus keep their motion without placing the essential identity layer at
   the mercy of a transient GPU surface. */
.cover .rv,
.cover .rv.on {
  opacity: 1;
  transform: none;
  transition: none;
  transition-delay: 0s;
}
/* Keep the full-viewport animated layers inside the hero's own stacking
   context. */
.cover { isolation: isolate; z-index: 0; }
.cover > .starfield { z-index: 0; }
.cover-mandala { position: relative; z-index: 0; }
.cover-mandala > .nw-sigil { position: relative; z-index: 1; }
/* The time-of-day veil used to be a full-cover pseudo-element. On the same
   Chrome/GPU path that misplaced the live sky, its translucent surface could
   be composited against white. Put the identical colour veil directly into
   the cover's background stack instead, beneath every sky and content layer. */
.cover::after { content: none; }
.cover.sky-dawn {
  background:
    linear-gradient(to top, rgba(224, 146, 108, 0.26), rgba(130, 94, 142, 0.10) 45%, transparent 72%),
    radial-gradient(120% 90% at 50% 110%, #2a2151 0%, rgba(42, 33, 81, 0) 55%),
    linear-gradient(180deg, #0b0919 0%, #131029 46%, #1d1740 100%);
}
.cover.sky-day {
  background:
    linear-gradient(to top, rgba(122, 168, 190, 0.15), rgba(122, 168, 190, 0.05) 55%, transparent 80%),
    radial-gradient(120% 90% at 50% 110%, #2a2151 0%, rgba(42, 33, 81, 0) 55%),
    linear-gradient(180deg, #0b0919 0%, #131029 46%, #1d1740 100%);
}
.cover.sky-dusk {
  background:
    linear-gradient(to top, rgba(196, 108, 88, 0.22), rgba(94, 72, 134, 0.12) 50%, transparent 78%),
    radial-gradient(120% 90% at 50% 110%, #2a2151 0%, rgba(42, 33, 81, 0) 55%),
    linear-gradient(180deg, #0b0919 0%, #131029 46%, #1d1740 100%);
}
.cover.sky-isolated {
  background:
    var(--nw-sky-image) center / 100% 100% no-repeat,
    radial-gradient(120% 90% at 50% 110%, #2a2151 0%, rgba(42, 33, 81, 0) 55%),
    linear-gradient(180deg, #0b0919 0%, #131029 46%, #1d1740 100%);
}
.cover.sky-isolated.sky-dawn {
  background:
    var(--nw-sky-image) center / 100% 100% no-repeat,
    linear-gradient(to top, rgba(224, 146, 108, 0.26), rgba(130, 94, 142, 0.10) 45%, transparent 72%),
    radial-gradient(120% 90% at 50% 110%, #2a2151 0%, rgba(42, 33, 81, 0) 55%),
    linear-gradient(180deg, #0b0919 0%, #131029 46%, #1d1740 100%);
}
.cover.sky-isolated.sky-day {
  background:
    var(--nw-sky-image) center / 100% 100% no-repeat,
    linear-gradient(to top, rgba(122, 168, 190, 0.15), rgba(122, 168, 190, 0.05) 55%, transparent 80%),
    radial-gradient(120% 90% at 50% 110%, #2a2151 0%, rgba(42, 33, 81, 0) 55%),
    linear-gradient(180deg, #0b0919 0%, #131029 46%, #1d1740 100%);
}
.cover.sky-isolated.sky-dusk {
  background:
    var(--nw-sky-image) center / 100% 100% no-repeat,
    linear-gradient(to top, rgba(196, 108, 88, 0.22), rgba(94, 72, 134, 0.12) 50%, transparent 78%),
    radial-gradient(120% 90% at 50% 110%, #2a2151 0%, rgba(42, 33, 81, 0) 55%),
    linear-gradient(180deg, #0b0919 0%, #131029 46%, #1d1740 100%);
}
.cover-mandala-lotus {
  position: absolute;
  left: 40%;
  top: 40%;
  width: 20%;
  height: 20%;
  z-index: 2;
  pointer-events: none;
}
.cover-mandala-lotus-static {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.cover-mandala.lotus-canvas-ready .cover-mandala-lotus-static { display: none; }

/* the footer index: deliberate lines, and the plate signs itself */
.plate nav { display: block; }
.plate nav .plate-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.4rem; }
.plate nav .plate-row + .plate-row { margin-top: 1.05rem; }
.plate nav .plate-topics { margin-top: 1.45rem; padding-top: 1.3rem;
  border-top: 1px solid rgba(208, 177, 96, 0.16); }
.plate nav .plate-elsewhere { margin-top: 1.05rem; }
.plate nav .plate-elsewhere a { color: var(--gold); }
/* The footer index is twelve small-caps links at 20px tall — under the 24px
   minimum touch target on every page of the site. Padding rather than a taller
   line: the text keeps its exact position and size, and the row gap absorbs
   the growth, so the plate's spacing is unchanged while the target is not.
   The negative margin holds the rows at their designed rhythm. */
.plate nav .plate-row a { display: inline-block; padding-block: 0.22rem; }
.plate nav .plate-row { margin-block: -0.22rem; }
.plate-fine { color: #b8b3c8; opacity: 0.92; }

/* Route architecture and finishing details shared by every clean document. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.28s; }
.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;
}

/* .btn is a class the classic sheet styled and this design never redefined, so
   /advisory's two calls to action — the only .btn on the site — arrived as
   display:inline, padding:0. They read as bare underlined links sitting flush
   against the paragraph above, on the page whose entire purpose is the enquiry.
   Dressed as the design's own pill (see .quotes-cta, which this matches), and
   filled for .btn-solid because both are primary actions. */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 0.4rem; padding: 0.72rem 1.55rem;
  border: 1px solid var(--gold-deep); border-radius: 999px;
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 500; font-size: 0.7rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-deep); text-decoration: none;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.btn-solid { background: var(--gold-deep); color: var(--paper); }
.btn:hover, .btn:focus-visible { background: var(--gold-deep); color: var(--paper); }
.btn-solid:hover, .btn-solid:focus-visible {
  background: transparent; color: var(--gold-deep);
}

/* A real mobile control: 44px target, visible brass on a glass backplate. */
.nav-menu-toggle {
  display: none; place-items: center; flex: 0 0 2.75rem;
  width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid rgba(208, 177, 96, 0.52); border-radius: 0.7rem;
  color: #f0ddb0;
  background: rgba(17, 13, 35, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0.5rem 1.4rem rgba(4, 3, 10, 0.2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
}
.nav-menu-icon,
.nav-menu-icon::before,
.nav-menu-icon::after {
  display: block; width: 1.15rem; height: 1px;
  background: currentColor; content: ""; transition: transform 0.22s ease;
}
.nav-menu-icon { position: relative; }
.nav-menu-icon::before { position: absolute; transform: translateY(-0.38rem); }
.nav-menu-icon::after { position: absolute; transform: translateY(0.38rem); }
.nav.nav-open .nav-menu-icon { background: transparent; }
.nav.nav-open .nav-menu-icon::before { transform: rotate(45deg); }
.nav.nav-open .nav-menu-icon::after { transform: rotate(-45deg); }
@media (max-width: 68rem) {
  html.js .nav-menu-toggle { display: grid; }
  html.js .nav { flex-wrap: wrap; }
  html.js .nav-links {
    position: absolute; top: calc(100% + 0.35rem); right: 1rem;
    display: none; width: min(22rem, calc(100vw - 2rem));
    padding: 0.7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.22rem;
    border: 1px solid rgba(208, 177, 96, 0.35); border-radius: 0.85rem;
    background: rgba(17, 13, 35, 0.96);
    box-shadow: 0 1.2rem 3rem rgba(3, 2, 9, 0.42);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }
  html.js .nav.nav-open .nav-links { display: grid; }
  html.js .nav-links a,
  html.js body[data-route] .nav:not(.scrolled) .nav-links a {
    display: flex; align-items: center; min-height: 2.75rem;
    padding: 0.65rem 0.7rem; border: 0; border-radius: 0.45rem;
    color: #d8d3e4;
  }
  html.js .nav-links a:hover,
  html.js .nav-links a:focus-visible,
  html.js .nav-links a[aria-current="page"] {
    color: #f3dfaa; background: rgba(208, 177, 96, 0.11);
  }
}
@media (max-width: 28rem) {
  html.js .nav-links { grid-template-columns: 1fr; }
}

/* Focused knowledge hubs and board page. */
.topic-hero {
  padding: clamp(9rem, 17vh, 12rem) 5vw clamp(4.5rem, 8vw, 7rem);
  background:
    radial-gradient(70% 75% at 82% 0%, rgba(208, 177, 96, 0.13), transparent 72%),
    linear-gradient(180deg, var(--paper), var(--paper-2));
}
.topic-hero .wrap,
.topic-section .wrap { width: min(90vw, 58rem); margin-inline: auto; }
.topic-hero h1 {
  max-width: 15ch; margin: 0.35rem 0 1.25rem;
  font-size: clamp(3rem, 8vw, 6.8rem); line-height: 0.98;
  font-weight: 430; letter-spacing: -0.025em;
}
.topic-hero .lede { max-width: 62ch; color: var(--muted); }
.topic-section { padding: clamp(4rem, 8vw, 7rem) 5vw; background: var(--paper); }
.topic-section + .topic-section { border-top: 1px solid var(--line); }
.topic-section h2 { margin-top: 0; }
.topic-night {
  color: var(--night-text);
  background:
    radial-gradient(80% 70% at 50% 0%, #221b45 0%, transparent 65%),
    #100d22;
}
.topic-night h2, .topic-night h3, .topic-night strong { color: var(--night-text); }
.topic-night p, .topic-night li { color: var(--night-muted); }
.hub-grid, .hub-link-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin-block: 2rem; border: 1px solid var(--line);
  background: var(--line);
}
.hub-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-card, .hub-link {
  display: block; padding: clamp(1.35rem, 3vw, 2.15rem);
  color: var(--text); background: var(--paper); text-decoration: none;
}
.hub-card h2, .hub-card h3, .hub-link strong { margin: 0; color: var(--text); }
.hub-link span { display: block; margin-top: 0.45rem; color: var(--muted); }
.hub-link { transition: background 0.28s ease, color 0.28s ease; }
.hub-link:hover, .hub-link:focus-visible { background: var(--paper-2); }
.hub-columns {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.25rem, 7vw, 5.5rem);
}
.hub-list, .hub-steps { padding-left: 1.25rem; }
.hub-list li, .hub-steps li { margin-block: 0.85rem; }
.hub-callout {
  margin-top: 3rem; padding: clamp(1.5rem, 4vw, 2.6rem);
  border: 1px solid var(--line); background: var(--paper-2);
}

/* Vertical rhythm for the five hub pages. The reset is `* { margin: 0 }`, and
   every other page type restores its own spacing afterwards — the essay body,
   the ledger, the cards. These five never did, so every heading sat flush
   against its paragraph: sixteen zero-pixel gaps on /advisory alone, measured.
   The proportions here are the essay body's, which the design already proves
   at this measure: paragraph 1.15rem below, h2 opening at 2.4rem, h3 at 1.9rem,
   each closing tighter than it opens so a heading binds to the text under it
   rather than floating between two blocks. */
.topic-section p, .topic-hero p { margin-block: 0 1.15rem; }
.topic-section p:last-child, .topic-hero p:last-child { margin-bottom: 0; }
/* A section h2 was set at 25.5px against a 17px paragraph — too close to its
   own body text to read as a level. Given the step the rest of the site uses
   between a section heading and its prose, and the h3 pulled below it so the
   two ranks are distinguishable at a glance. */
.topic-section h2 {
  margin-block: 2.6rem 0.95rem;
  font-size: clamp(1.6rem, 3.4vw, 2.05rem); line-height: 1.14;
  font-weight: 440; letter-spacing: -0.012em;
}
.topic-section h3 {
  margin-block: 2.1rem 0.6rem;
  font-size: clamp(1.08rem, 2vw, 1.22rem); line-height: 1.25; font-weight: 470;
}
.hub-card h2, .hub-callout h2 { font-size: clamp(1.2rem, 2.4vw, 1.42rem); }
.topic-section :is(h2, h3):first-child { margin-top: 0; }
/* A kicker names the heading under it, so the pair binds — but a kicker is
   small caps at 11px and the h2 is nearly three times that, and at those sizes
   `margin-top: 0` read as crushed (13px optical). The kicker keeps its own
   breathing room instead of surrendering it. */
.topic-section .kicker { margin-bottom: 0; }
.topic-section .kicker + h2 { margin-top: 1.1rem; }
/* A section heading also needs room from the band's own top edge. */
.topic-section .kicker:first-child { margin-top: 0; }
/* Inside a card the heading is the card's own top edge — the padding is the
   space, so the opening margin would double it. */
.hub-card :is(h2, h3), .hub-callout :is(h2, h3) { margin-top: 0; margin-bottom: 0.7rem; }
.hub-columns > div > :is(h2, h3):first-child { margin-top: 0; }
.hub-list li p, .hub-steps li p { margin-block: 0.35rem 0; }
/* The call to action needs air above it: it was sitting 0px under the lede. */
.topic-hero .btn, .topic-section .btn, .hub-callout .btn { margin-top: 1.6rem; }
.hub-callout p + p:last-child { margin-bottom: 0; }
.now-list { max-width: 58rem; }
.now-entry {
  display: grid; grid-template-columns: minmax(7rem, 0.3fr) 1fr;
  gap: 1rem 2.5rem; padding: 1.5rem 0; border-top: 1px solid var(--line);
}
.now-entry h2 { margin: 0; font-size: clamp(1.25rem, 3vw, 1.75rem); }
.now-entry p { margin: 0.35rem 0 0; }
.now-date { color: var(--gold-deep); font-size: 0.73rem;
  letter-spacing: 0.13em; text-transform: uppercase; }
.now-slides { margin-left: 0.5rem; }
@media (max-width: 42rem) {
  .hub-grid, .hub-grid-three, .hub-link-grid, .hub-columns {
    grid-template-columns: 1fr;
  }
  .now-entry { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* The brain's mobile full-bleed viewer deliberately reaches to the viewport
   edge. Clip its sub-pixel scrollbar rounding without shrinking the canvas. */
main[data-page="brain"] { overflow-x: clip; }

/* A quiet way home on long pages. */
.sky-return {
  position: fixed; right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 45;
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem;
  border: 1px solid rgba(208, 177, 96, 0.42); border-radius: 50%;
  color: #e8cf8f; background: rgba(17, 13, 35, 0.88);
  box-shadow: 0 0.8rem 2rem rgba(3, 2, 9, 0.3);
  text-decoration: none; opacity: 0; pointer-events: none;
  transform: translateY(0.65rem);
}
.sky-return.is-visible { opacity: 1; pointer-events: auto; transform: none; }
/* Keyboard focus needs to be seen. The hover state changes only the border, which a
   keyboard never triggers, so without this the control is reachable but invisible. */
.sky-return:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-color: var(--gold);
}
@media (prefers-reduced-motion: no-preference) {
  .sky-return { transition: opacity 0.28s ease, transform 0.28s ease,
    border-color 0.28s ease; }
  .sky-return:hover { transform: translateY(-0.18rem); border-color: var(--gold); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .nav-menu-icon, .nav-menu-icon::before, .nav-menu-icon::after,
  .hub-link, .sky-return { transition: none; }
}

/* The hub glyphs sit above their heading, at the size of the kicker beside them
   — a mark, not an illustration. Brass so they read as ornament rather than
   another level of heading, and aria-hidden in the markup because the heading
   already says what they say. */
.hub-glyph { display: block; margin-bottom: 0.75rem; color: var(--gold-deep); }
.hub-glyph .glyph {
  width: 2.15rem; height: 2.15rem; display: block;
  /* 1.1 on a 24-unit box scaled to ~34px draws thinner than the sigils it sits
     beside, which are set much larger. Thickened so the mark reads as drawn
     rather than as a smudge at the top of the card. */
  stroke-width: 1.35;
}
.topic-night .hub-glyph { color: var(--gold); }
.hub-card .hub-glyph { margin-bottom: 0.85rem; }
@media (prefers-reduced-motion: no-preference) {
  .hub-glyph .glyph { transition: color 0.4s ease; }
}

/* ---------- playable arguments: the new house remains around the game ---------- */
.play-room {
  min-height: 100svh; padding: clamp(6.5rem, 11vw, 9rem) 0 4rem;
  background:
    radial-gradient(85% 55% at 50% 0%, rgba(63, 48, 116, 0.55), transparent 72%),
    linear-gradient(180deg, #100d22 0%, #161230 100%);
  color: var(--night-text);
}
.play-room-inner { width: min(86vw, 70rem); margin-inline: auto; }
.play-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem;
}
.play-back {
  display: inline-block; color: var(--gold);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
}
.play-back:hover, .play-back:focus-visible { color: #fff0bd; }
.play-theme {
  display: inline-flex; padding: 0.16rem;
  border: 1px solid rgba(208, 177, 96, 0.34); border-radius: 999px;
  background: rgba(9, 7, 20, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.play-theme button {
  min-width: 4.2rem; padding: 0.38rem 0.7rem; border: 0;
  border-radius: 999px; background: transparent; color: var(--night-muted);
  font: 600 0.68rem/1 system-ui, sans-serif;
  letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer;
}
.play-theme button:hover { color: var(--night-text); }
.play-theme button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.play-theme button[aria-pressed="true"] {
  color: #171229; background: var(--gold);
  box-shadow: 0 0.22rem 0.7rem rgba(0, 0, 0, 0.25);
}
.play-frame-shell {
  overflow: hidden; border: 1px solid rgba(208, 177, 96, 0.28);
  border-radius: 0.8rem;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(50, 39, 91, 0.44), transparent 68%),
    #14111f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1.6rem 4.5rem rgba(0, 0, 0, 0.38);
  transition: background-color 180ms ease, border-color 180ms ease;
}
.play-room[data-play-theme="light"] .play-frame-shell {
  border-color: rgba(179, 147, 74, 0.58);
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(208, 177, 96, 0.10), transparent 68%),
    #f3f1e9;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 1.6rem 4.5rem rgba(0, 0, 0, 0.30);
}
.play-frame {
  display: block; width: 100%; min-height: 70svh; border: 0;
  background: transparent;
}
.play-sequence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 15rem) minmax(0, 1fr);
  align-items: center; gap: clamp(1rem, 3vw, 2.4rem);
  margin-top: 1.4rem; padding: 1.35rem 0 0.3rem;
  border-top: 1px solid rgba(208, 177, 96, 0.28);
}
.play-sequence[hidden] { display: none; }
.play-step {
  display: flex; min-width: 0; min-height: 3.25rem;
  flex-direction: column; justify-content: center; gap: 0.28rem;
  margin: -0.4rem 0; padding: 0.4rem 0.25rem;
  color: var(--night-text); text-decoration: none;
  touch-action: manipulation;
}
.play-step-next { align-items: flex-end; text-align: right; }
.play-step-label {
  color: var(--gold); font: 600 0.64rem/1.2 system-ui, sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.play-step strong {
  /* --serif is declared only inside the brain page's token block, so this
     shorthand was invalid here and the browser threw away the weight, the
     size and the line-height with the family. The literal stack is what the
     rest of the sheet uses anyway. */
  overflow: hidden; color: var(--night-muted);
  font: 400 clamp(0.86rem, 1.2vw, 1rem)/1.3 "Source Serif 4", Georgia, serif;
  text-overflow: ellipsis; white-space: nowrap;
}
.play-step:hover strong, .play-step:focus-visible strong { color: #fff0bd; }
.play-step:focus-visible {
  border-radius: 0.2rem; outline: 2px solid var(--gold); outline-offset: 0.45rem;
}
.play-scrubber-wrap {
  display: grid; justify-items: center; gap: 0.45rem; min-width: 0;
}
.play-count {
  color: var(--night-muted); font: 600 0.63rem/1 system-ui, sans-serif;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.play-scrubber {
  --play-progress: 0%;
  appearance: none; box-sizing: border-box;
  width: 100%; height: 2.75rem; margin: 0; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  touch-action: pan-y;
  background:
    linear-gradient(90deg,
      var(--gold) 0 var(--play-progress),
      rgba(157, 151, 184, 0.42) var(--play-progress) 100%)
      center / 100% 0.18rem no-repeat;
}
.play-scrubber::-webkit-slider-runnable-track {
  height: 2.75rem; border: 0; background: transparent;
}
.play-scrubber::-webkit-slider-thumb {
  appearance: none; width: 1.05rem; height: 1.05rem;
  margin-top: 0.85rem;
  border: 0.18rem solid #171229; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 1px rgba(208, 177, 96, 0.62);
}
.play-scrubber::-moz-range-thumb {
  width: 0.72rem; height: 0.72rem;
  border: 0.18rem solid #171229; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 1px rgba(208, 177, 96, 0.62);
}
.play-scrubber::-moz-range-track {
  height: 0.18rem; border: 0; border-radius: 999px;
  background: rgba(157, 151, 184, 0.42);
}
.play-scrubber::-moz-range-progress {
  height: 0.18rem; border-radius: 999px; background: var(--gold);
}
.play-scrubber:focus-visible {
  outline: none;
}
.play-scrubber:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 0.25rem #171229,
    0 0 0 0.4rem #fff0bd;
}
.play-scrubber:focus-visible::-moz-range-thumb {
  box-shadow:
    0 0 0 0.25rem #171229,
    0 0 0 0.4rem #fff0bd;
}
@media (max-width: 46rem) {
  .play-room { padding-top: 5.6rem; }
  .play-room-inner { width: min(96vw, 70rem); }
  .play-toolbar { align-items: flex-start; flex-direction: column; }
  .play-sequence {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start; row-gap: 1.15rem;
  }
  .play-scrubber-wrap { grid-column: 1 / -1; grid-row: 1; }
  .play-step-prev { grid-column: 1; grid-row: 2; }
  .play-step-next { grid-column: 2; grid-row: 2; }
  .play-step strong {
    display: -webkit-box; overflow: hidden; white-space: normal;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .play-frame-shell { transition: none; }
}

/* ---------- without JavaScript, everything is simply visible ----------
   .rv { opacity: 0 } and .essay { display: none } are both undone only by
   script, so a visitor with JS off — or one whose deferred bundle never
   arrives — got a nav and a footer over an empty page. These are ADDITIVE:
   scoping the hiding rules to html.js would make them outrank .rv.on and
   .essay.open and nothing would ever appear. src/templates/base.html states
   the rule the graft dropped: "no-JS visitors never see hidden content". */
html:not(.js) .rv { opacity: 1; transform: none; }
html:not(.js) .essay { display: block; }
/* The legacy 62rem block hides the primary nav with no js gate, and the only
   control that could reveal it is created by a script. Without JS on a phone
   the header collapsed to a bare monogram. The links come back, wrapped. */
@media (max-width: 62rem) {
  html:not(.js) .nav .nav-links { display: flex; width: auto; order: 0; }
}

/* ---------- brass that can be read (see 1e) ---------- */
.night a:hover, .topic-night a:hover { color: var(--gold); }
/* A focus ring is a non-text indicator and owes 3:1 against its surround.
   --gold is 1.97:1 on cream; --gold-deep is 4.86:1 in light, 8.14:1 in dark. */
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
/* Two rules threw the ring away on :focus — keyboard focus specifically — and
   replaced it with a 1px hairline changing hue: 1.55:1 in light mode, where
   WCAG asks 3:1 of a change of state. The ring returns and the gold border
   stays as a second cue. */
.cform input:focus-visible, .cform textarea:focus-visible, .sift:focus-visible {
  outline: 2px solid var(--gold-deep); outline-offset: 2px;
  border-bottom-color: var(--gold);
}
/* The failure message had no rule at all, so the one moment the form needs to
   be loud rendered as ordinary body text. */
.cform-error {
  color: var(--gold-deep); font-style: italic;
  border-left: 2px solid var(--gold); padding-left: 0.9rem;
}
/* The notice at collection sits in the form's own measure and reads as a
   sentence, so it does not take .cform label's uppercase tracking or .fine's. */
.cform-fine {
  margin: -0.6rem 0 0; max-width: 32rem;
  font-size: 0.78rem; line-height: 1.55; color: var(--muted);
}
.cform-fine a { color: inherit; text-decoration: underline; }
/* The spam gate: off the canvas rather than display:none, which some bots
   read as "not a real field" and skip. */
.cf-gotcha {
  position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;
}

/* ---------- iOS Safari zooms any focused control under 16px ----------
   .cform got this right at 1.02rem; the filter boxes were left at 0.95rem,
   so every search on /writing, /quotes and /press zoomed the page and stayed
   zoomed (there is no maximum-scale, correctly). */
.sift { font-size: 1.02rem; }

/* ---------- the phone menu is the only menu on a phone ----------
   The target grew to 44px and the type stayed at 0.63rem/10px uppercase. */
@media (max-width: 68rem) {
  html.js .nav-links a { font-size: 0.75rem; letter-spacing: 0.2em; }
}
.plate-fine { font-size: 0.7rem; }

/* ---------- a hidden control is not a tab stop ----------
   .sky-return was hidden with opacity and pointer-events only, so a keyboard
   user near the top of any page tabbed into an invisible fixed link. */
.sky-return { visibility: hidden; }
.sky-return.is-visible { visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .sky-return { transition: opacity 0.28s ease, transform 0.28s ease,
    visibility 0.28s ease, border-color 0.28s ease; }
}

/* ---------- a fixed track minimum cannot shrink ----------
   .cabinet demanded 272px of track plus its own borders inside a 272px band
   at 320px, and body { overflow-x: hidden } clipped the difference. */
.cabinet { grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }
/* .pub was the one ledger row with no mobile collapse: a two-column grid with
   a 40px gutter and a nowrap year, holding an academic title in ~190px. */
@media (max-width: 40rem) {
  .pub { grid-template-columns: 1fr; gap: 0.3rem; }
  .pub .year { order: -1; }
}

/* ---------- prose that stays inside its measure ----------
   width: 100% stretched every inline image to the full 42rem: nine blog
   images were upscaled, one of them 2.7x. max-width lets each sit native. */
.prose img { width: auto; max-width: 100%; }
/* The sheet carried no overflow-wrap anywhere, so a bare 107-character URL in
   an essay caption ran out of the measure and off a phone entirely. */
:where(.prose, .prose p, .prose li, .pub .meta, .link-roll, .appearance,
  .entry .body, .c-letter .c-body) { overflow-wrap: anywhere; }

/* ---------- stillness means stillness ----------
   Every other hover transform in this sheet is suppressed under reduce;
   these two image scales were missed. The saturation change is not motion. */
@media (prefers-reduced-motion: reduce) {
  .piece:hover .pthumb,
  .talkcard:hover .talkthumb img { transform: none; }
}

/* ---------- the new furniture ---------- */
.now-note { display: block; margin-top: 0.35rem; font-size: 0.78rem;
  font-style: italic; color: var(--muted); }
.now-updated { margin-top: 2rem; font-size: 0.78rem; font-style: italic;
  color: var(--muted); }
.entry-onward { margin-top: 1.8rem; font-size: 0.8rem; }
.entry-onward .sep, .stage-files .sep { margin: 0 0.6rem; opacity: 0.5; }
.stage-files { margin-top: 1.1rem; font-size: 0.78rem; color: var(--night-muted); }
.stage-files a { color: var(--gold); text-decoration: none;
  border-bottom: 1px solid rgba(208, 177, 96, 0.4); }
.stage-files a:hover, .stage-files a:focus-visible { color: #fff0bd; }
.talkgrid-onward { margin-top: 2.4rem; font-size: 0.8rem; }
.talkgrid-onward a { color: var(--gold); text-decoration: none; }
.talkgrid-onward a:hover, .talkgrid-onward a:focus-visible { color: #fff0bd; }
.play-noscript { display: block; padding: 2.5rem 1.5rem; text-align: center;
  color: var(--night-muted); }
.play-noscript a { color: var(--gold); }

/* ---------- an essay handed to a printer sheds the chrome, keeps the words ----------
   The design this replaced carried a considered print block and the new sheet
   had none, so a printed page kept the night gradients or, with background
   graphics off, printed near-white text on white paper. */
@media print {
  @page { margin: 2cm; }
  html, body { background: #fff !important; color: #000 !important; }
  .nav, .plate, .sky-return, .skip-link, .scroll-cue, .starfield,
  .play-toolbar, .play-sequence, .filters, .sift, .press-emblems,
  .aphorism-next, .quotes-cta, .grain::before { display: none !important; }
  .night, .plate, .selected-press, .talks-film, .topic-night, .play-room,
  .cover, .stage, .library-hero, .parlour-hero {
    background: #fff !important; color: #000 !important;
  }
  .night h1, .night h2, .night h3, .night p, .night li,
  .topic-night h2, .topic-night h3, .topic-night p, .topic-night li,
  .talks-film h2, .talks-film .lede { color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  .rv, .rv.on, .essay { opacity: 1 !important; transform: none !important; }
  .day-hero, .band, figure, blockquote, .piece, .entry, .pub {
    break-inside: avoid;
  }
}