/* Public pages are one celestial stage. Administrative tools deliberately keep
   their own layout. Text stays in normal flow; only decoration is absolute. */
:root[data-mode] .cosmic-theatre {
  --cosmic-ink: var(--cosmic-canvas-ink);
  --cosmic-muted: var(--cosmic-canvas-muted);
  --cosmic-accent: #ccdcff;
  --cosmic-line: var(--cosmic-canvas-line);
  --cosmic-surface: #0b14312e;
  --cosmic-reading: #080f2980;
  --cosmic-inset: #b5c9ff0c;
  --cosmic-soft: #b5c9ff18;
  --cosmic-solid: #15213d;
  --theatre-dust: #8aa9fa;
  --theatre-light: #d0dfff;
  --theatre-wash: #14265066;
  --theatre-veil: #080f29;
  --orbit-caption-surface: radial-gradient(ellipse at 50% 50%, var(--theatre-wash), transparent 72%);
  --contact-surface: var(--orbit-caption-surface);
  --cosmic-shadow: none;
  --ink: var(--cosmic-ink); --muted: var(--cosmic-muted);
  --journal-ink: var(--cosmic-ink); --journal-muted: var(--cosmic-muted);
  --journal-accent: var(--cosmic-accent); --journal-line: var(--cosmic-line);
  --folio-ink: var(--cosmic-ink); --folio-muted: var(--cosmic-muted);
  --folio-accent: var(--cosmic-accent); --folio-line: var(--cosmic-line);
  --folio-gold: var(--theatre-light);
  --on-canvas: var(--cosmic-ink); --on-canvas-muted: var(--cosmic-muted);
  --on-paper: var(--cosmic-ink); --on-paper-muted: var(--cosmic-muted);
  --on-mat: var(--cosmic-ink); --on-mat-muted: var(--cosmic-muted);
  --on-note: var(--cosmic-ink); --on-note-muted: var(--cosmic-muted);
  --theatre-edge-left: max(clamp(16px, 2.4vw, 38px), calc(env(safe-area-inset-left, 0px) + 10px));
  --theatre-edge-right: max(clamp(16px, 2.4vw, 38px), calc(env(safe-area-inset-right, 0px) + 10px));
  --theatre-corner-top: max(12px, calc(env(safe-area-inset-top, 0px) + 8px));
  --theatre-header-clearance: 132px;
  --theatre-curtain-layer: 0;
}
:root[data-mode="dark"] .cosmic-theatre {
  --cosmic-accent: #d6bdb2; --cosmic-solid: #211b24;
  --cosmic-reading: #100f1680; --theatre-veil: #100f16;
  --theatre-dust: #a06d72; --theatre-light: #d6bdb2; --theatre-wash: #5533324d;
}
:root[data-mode="twilight"] .cosmic-theatre {
  --cosmic-accent: #dfcda5; --cosmic-solid: #203637;
  --cosmic-reading: #10232680; --theatre-veil: #102326;
  --theatre-dust: #9ab6a6; --theatre-light: #e1d5ac; --theatre-wash: #3c63534d;
}
.cosmic-theatre :is(h1, h2, h3, .journal-description) { text-shadow: 0 2px 20px var(--theatre-veil); }
.cosmic-theatre a:focus-visible, .cosmic-theatre button:focus-visible, .cosmic-theatre summary:focus-visible {
  outline: 2px solid var(--theatre-light); outline-offset: 5px;
}

/* A soft valance at the top, with functioning planetary pull-cords below it.
   The fabric is a CSS gradient, not a blur painted over the whole viewport. */
:root[data-mode] .cosmic-theatre .site-header {
  background: linear-gradient(var(--theatre-veil) 0%, color-mix(in srgb, var(--theatre-veil) 98%, transparent) 80%, transparent);
  height: var(--theatre-header-clearance);
  border: 0; box-shadow: none; backdrop-filter: none; isolation: isolate;
}
.theatre-curtain { position: absolute; z-index: var(--theatre-curtain-layer); inset: 0; overflow: hidden; pointer-events: none; }
.theatre-curtain::before {
  content: ""; position: absolute; left: -2%; right: -2%; top: -65px; height: 110px;
  border-radius: 0 0 50% 50%; border-bottom: 1px solid color-mix(in srgb, var(--theatre-dust) 35%, transparent);
  background: repeating-linear-gradient(92deg, #ffffff00 0 26px, #cad4ff05 33px, #00000026 46px, #ffffff00 62px), linear-gradient(var(--theatre-veil), color-mix(in srgb, var(--theatre-dust) 14%, var(--theatre-veil)));
  box-shadow: 0 6px 32px #00000015;
}
.theatre-curtain span { position: absolute; top: -70px; width: 29%; height: 156px; border-bottom: 1px solid color-mix(in srgb, var(--theatre-dust) 24%, transparent); background: linear-gradient(100deg, var(--theatre-veil), #00000000); border-radius: 0 0 80% 0; }
.theatre-curtain span:first-child { left: -6%; transform: rotate(6deg); }
.theatre-curtain span:last-child { right: -6%; transform: scaleX(-1) rotate(6deg); }
:root[data-mode] .cosmic-theatre .header-inner {
  position: relative;
  z-index: calc(var(--theatre-curtain-layer) + 2);
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 var(--theatre-edge-right) 10px var(--theatre-edge-left);
  align-items: flex-start;
}
:root[data-mode] .cosmic-theatre .brand {
  position: relative;
  z-index: 1;
  margin-top: var(--theatre-corner-top);
  pointer-events: auto;
  text-shadow: 0 1px 3px var(--theatre-veil), 0 0 18px color-mix(in srgb, var(--theatre-veil) 88%, transparent);
}
:root[data-mode] .cosmic-theatre .brand-symbol { color: var(--theatre-light); }
:root[data-mode] .cosmic-theatre .site-tools { position: relative; z-index: 2; margin-top: var(--theatre-corner-top); pointer-events: auto; }
:root[data-mode] .cosmic-theatre .main-nav { gap: 14px; align-items: flex-start; }
:root[data-mode] .cosmic-theatre .main-nav a {
  --cord: 35px; --orb: 23px; --planet: #a9bcec;
  position: relative; display: flex; justify-content: center; align-items: flex-end;
  min-width: 66px; min-height: 112px; padding: 76px 6px 8px;
  background: none; border-radius: 0; pointer-events: auto;
  color: var(--cosmic-canvas-muted); font: 13px/1.6 var(--sans);
}
:root[data-mode] .cosmic-theatre .main-nav a::before {
  content: ""; position: absolute; top: 8px; left: calc(50% - .5px); width: 1px; height: var(--cord);
  background: linear-gradient(transparent, var(--theatre-light)); opacity: .55;
}
:root[data-mode] .cosmic-theatre .main-nav a::after {
  content: ""; display: block; position: absolute; inset: auto; top: calc(var(--cord) + 5px); left: calc(50% - var(--orb)/2);
  width: var(--orb); height: var(--orb); border-radius: 50%; border: 1px solid #e4eaff50;
  background: radial-gradient(circle at 28% 25%, #e9f4ff, var(--planet) 26%, #172744 67%, #060c20 90%);
  box-shadow: -3px -1px 12px color-mix(in srgb, var(--planet) 22%, transparent), 0 0 0 5px #bdd0ff04;
  transition: box-shadow .3s, transform .3s;
}
:root[data-mode] .cosmic-theatre .main-nav a:nth-child(2) { --cord: 47px; --orb: 17px; --planet: #f0cb94; }
:root[data-mode] .cosmic-theatre .main-nav a:nth-child(3) { --cord: 27px; --orb: 28px; --planet: #b5abd6; }
:root[data-mode] .cosmic-theatre .main-nav a:nth-child(4) { --cord: 43px; --orb: 20px; --planet: #8ec3cc; }
:root[data-mode] .cosmic-theatre .main-nav a:nth-child(5) { --cord: 32px; --orb: 22px; --planet: #e1c5b3; }
:root[data-mode] .cosmic-theatre .main-nav a[aria-current] { color: var(--cosmic-canvas-ink); }
:root[data-mode] .cosmic-theatre .main-nav a[aria-current]:not(:focus-visible) { outline: none; }
:root[data-mode] .cosmic-theatre .main-nav a[aria-current]::after { box-shadow: 0 0 16px color-mix(in srgb, var(--planet) 55%, transparent), 0 0 0 6px #bdd0ff0b, 0 0 0 7px #bdd0ff25; }
:root[data-mode] .cosmic-theatre .site-stage { padding-top: var(--theatre-header-clearance); }
:root[data-mode] .cosmic-theatre .cosmos-preferences { top: 108px; }
html:has(.cosmic-theatre) { scroll-padding-top: 146px; }

/* The hero is a small solar system: the black hole and its orbit are the
   navigation itself. No separate illustration card, frame or duplicate menu. */
:root[data-mode] .cosmic-theatre .journal-home { max-width: 1280px; padding-top: 18px; }
:root[data-mode] .cosmic-theatre .journal-hero { grid-template-columns: minmax(0, 1fr) 540px; gap: 20px; min-height: 400px; border: 0; padding-bottom: 20px; }
:root[data-mode] .cosmic-theatre .journal-hero h1 { font-size: clamp(40px, 5.5vw, 72px); line-height: 1.25; font-weight: 500; }
:root[data-mode] .cosmic-theatre .journal-description { max-width: 34ch; line-height: 1.9; }
:root[data-mode] .cosmic-theatre .journal-directory { width: 540px; height: 380px; min-height: 380px; }
.theatre-singularity { position: absolute; width: 100%; height: 100%; inset: 0; pointer-events: none; }
:root[data-mode="dark"] .theatre-singularity { filter: sepia(.65) saturate(.5) hue-rotate(315deg); opacity: .65; }
:root[data-mode="twilight"] .theatre-singularity { filter: sepia(.35) hue-rotate(310deg) saturate(.5); opacity: .85; }
.cosmic-theatre .constellation-chart { opacity: .3; }
:root[data-mode] .cosmic-theatre .journal-directory a { max-width: 184px; min-height: 70px; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 8px; border-radius: 50%; }
:root[data-mode] .cosmic-theatre #home-tab-stories { left: 18px; top: 32px; }
:root[data-mode] .cosmic-theatre #home-tab-projects { left: 350px; top: 153px; }
:root[data-mode] .cosmic-theatre #home-tab-updates { left: 92px; top: 288px; }
:root[data-mode] .cosmic-theatre .journal-directory-number {
  position: relative;
  width: 52px; height: 52px; border: 1px solid #d4e2ff59;
  background: #14263c;
  box-shadow: 0 0 24px #8baaff30;
  color: #fff; font: 12px/1 var(--mono); text-shadow: 0 1px 6px #000;
  transition: transform .36s cubic-bezier(.22, .7, .24, 1), box-shadow .36s, border-color .36s;
}
.cosmic-theatre .planet-surface { position: absolute; inset: 0; z-index: 1; border-radius: 50%; overflow: hidden; }
.cosmic-theatre .planet-surface::before, .cosmic-theatre .planet-surface::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cosmic-theatre .planet-surface::before { background: var(--planet-texture) 0 0 / 200% 100% repeat-x; animation: planet-spin 32s linear infinite; }
.cosmic-theatre .planet-surface::after {
  background: radial-gradient(circle at 27% 21%, #ffffff70, #ffffff0a 27%, transparent 48%), radial-gradient(circle at 28% 26%, transparent 25%, #07132b40 56%, #020613dc 94%);
  box-shadow: inset 2px 2px 6px #e0efff4d, inset -7px -6px 12px #010611a3;
}
.cosmic-theatre #home-tab-stories { --planet-texture: url("./planet-ocean.svg"); }
.cosmic-theatre #home-tab-projects { --planet-texture: url("./planet-atmosphere.svg"); }
.cosmic-theatre #home-tab-updates { --planet-texture: url("./planet-ember.svg"); }
.cosmic-theatre #home-tab-projects .planet-surface::before { animation-duration: 42s; }
.cosmic-theatre #home-tab-updates .planet-surface::before { animation-duration: 50s; animation-direction: reverse; }
.cosmic-theatre #home-tab-projects .journal-directory-number::after {
  content: ""; position: absolute; z-index: 2; inset: 14px -12px; border: 1px solid #e4c9a98c; border-radius: 50%;
  transform: rotate(-24deg); box-shadow: 0 0 5px #edd6ab3d, inset 0 0 4px #edd6ab40; pointer-events: none;
}
.cosmic-theatre .journal-directory-number > .planet-index { position: absolute; z-index: 3; bottom: -3px; right: -5px; display: grid; place-items: center; width: 24px; height: 22px; border: 1px solid #b6ccff40; border-radius: 50%; background: #080e28; color: #e2ecff; }
.cosmic-theatre .planet-arriving .planet-surface { animation: planet-arrival .65s ease-out; }
@keyframes planet-spin { to { background-position: 100% 0; } }
@keyframes planet-arrival { 0%, 100% { filter: brightness(1); } 35% { filter: brightness(1.55) saturate(1.2); } }
:root[data-cosmos-motion="still"] .cosmic-theatre .planet-surface::before { animation-play-state: paused; }
:root[data-cosmos-motion="still"] .cosmic-theatre .planet-arriving .planet-surface { animation: none; }
:root[data-mode] .cosmic-theatre .journal-directory a > :nth-child(2) {
  color: var(--cosmic-canvas-ink); padding: 6px 8px; margin: -6px -8px; text-shadow: 0 2px 10px #000;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--theatre-veil) 85%, transparent) 25%, transparent 85%);
}
:root[data-mode] .cosmic-theatre .journal-directory a[aria-selected="true"] .journal-directory-number,
:root[data-mode] .cosmic-theatre .journal-directory a[aria-current] .journal-directory-number { box-shadow: 0 0 0 5px #b9cdff0d, 0 0 0 6px #b9cdff59, 0 0 28px #b9cdff4d; }
:root[data-mode] .cosmic-theatre .journal-total { position: absolute; left: 77px; top: 55px; background: none; color: var(--cosmic-canvas-muted); font-size: 12px; }
:root[data-mode] .cosmic-theatre .journal-section-head { position: relative; padding-top: 20px; margin-top: 8px; border-top: 0; }
:root[data-mode] .cosmic-theatre .journal-section-head::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--cosmic-canvas-line) 20%, transparent); }
:root[data-mode] .cosmic-theatre .journal-section-head h2 { font: 500 26px/1.5 var(--serif); }
:root[data-mode] .cosmic-theatre .journal-section-head p { display: none; }

/* Each work is a celestial body with a readable, unframed orbit annotation.
   The halos are feathered local light; nothing masks the continuous sky. */
:root[data-mode] .cosmic-theatre :is(.journal-projects, .project-folio-grid) { gap: 28px; }
:root[data-mode] .cosmic-theatre :is(.journal-projects, .project-folio-grid)::before { display: none; }
:root[data-mode] .cosmic-theatre .stellar-project-art { width: 190px; height: 204px; }
:root[data-mode] .cosmic-theatre .stellar-project-art svg { width: 190px; height: 190px; position: relative; z-index: 1; }
.celestial-seed { position: absolute; width: 84px; height: 84px; top: 53px; left: 53px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #e3eeff, #8bace0 16%, #4f6b9c 34%, #182440 66%, #050b20 84%); box-shadow: -8px -3px 34px #93acdb40, 6px 8px 24px #01091a70; }
.stellar-project-art[data-orbit="1"] .celestial-seed { background: radial-gradient(circle at 50% 50%, #080d20 44%, #b5b8f4 48%, #8a82ce66 52%, transparent 65%); box-shadow: none; }
.stellar-project-art[data-orbit="2"] .celestial-seed { background: radial-gradient(circle at 30% 25%, #f8e4b2, #d6a870 26%, #664c5f 54%, #17172d 85%); box-shadow: -4px -3px 28px #edbf5d30; }
:root[data-mode] .cosmic-theatre .stellar-project-art .journal-project-initial { top: 76px; left: 76px; width: 38px; height: 38px; background: none; border: 0; color: #fff; text-shadow: 0 1px 5px #000; }
.cosmic-theatre .stellar-project-number { bottom: 0; left: 86px; }
:root[data-mode] .cosmic-theatre .journal-project,
:root[data-mode] .cosmic-theatre .folio-project-link { grid-template-columns: 190px minmax(0, 1fr); gap: 12px; }
:root[data-mode] .cosmic-theatre .folio-project-link > .stellar-project-art { width: 190px; }
:root[data-mode] .cosmic-theatre .stellar-project-caption,
:root[data-mode] .cosmic-theatre .folio-project .folio-project-content {
  border: 0; border-radius: 0; background: none;
  text-shadow: 0 1px 12px #020714d9;
  --cosmic-accent: var(--cosmic-canvas-ink); --cosmic-line: var(--cosmic-canvas-line);
  --journal-ink: var(--cosmic-canvas-ink); --journal-muted: var(--cosmic-canvas-muted);
  --folio-ink: var(--cosmic-canvas-ink); --folio-muted: var(--cosmic-canvas-muted);
  color: var(--cosmic-canvas-ink);
}
:root[data-mode] .cosmic-theatre .journal-project:nth-child(even) .stellar-project-caption,
:root[data-mode] .cosmic-theatre .editorial-pages .folio-project:not(:first-child) .folio-project-content { background: none; }
.cosmic-theatre .stellar-project-caption::before,
.cosmic-theatre .folio-project-content::before { display: none; }
:root[data-mode] .cosmic-theatre .journal-project-body { padding-left: 16px; }
:root[data-mode] .cosmic-theatre .folio-project-content { padding-left: 16px; }
:root[data-mode] .cosmic-theatre .journal-project-actions { border-left: 0; }
:root[data-mode] .cosmic-theatre .folio-project :is(.folio-project-top, .folio-project-meta) { border-left: 0; }

/* Journal entries orbit a star. The reading order never depends on position. */
:root[data-mode] .cosmic-theatre .journal-story-copy,
:root[data-mode] .cosmic-theatre .journal-story-lead .journal-story-copy {
  background: none;
  border: 0;
  color: var(--cosmic-canvas-ink);
  text-shadow: 0 1px 2px #020714, 0 0 8px #020714e6;
  --journal-ink: var(--cosmic-canvas-ink);
  --journal-muted: var(--cosmic-canvas-muted);
  --journal-accent: var(--cosmic-canvas-ink);
}
:root[data-mode] .cosmic-theatre .journal-story-art { border: 0; background: radial-gradient(circle, #faf0d530, #b4ccff16 35%, transparent 70%); box-shadow: none; }
:root[data-mode] .cosmic-theatre .journal-story h3 { text-wrap: pretty; }
.cosmic-theatre .archive-list::before { opacity: .35; }
.cosmic-theatre .archive-entry { padding-block: 22px; }
.cosmic-theatre .archive-entry > div,
.cosmic-theatre .archive-entry:first-child > div { --entry-ink: var(--cosmic-canvas-ink); --entry-muted: var(--cosmic-canvas-muted); border: 0; border-radius: 0; background: radial-gradient(ellipse at 50% 50%, var(--theatre-wash), transparent 72%); }
.cosmic-theatre .archive-entry:nth-child(even) > div { background: none; }
.cosmic-theatre .archive-entry-number, .cosmic-theatre .archive-entry:first-child .archive-entry-number { position: relative; background: radial-gradient(circle at 36% 27%, #acb9dc22, #10183090 60%, transparent 72%); box-shadow: 0 0 24px #b4c7ff0c; border-color: var(--cosmic-canvas-line); }
.cosmic-theatre .archive-entry h2 { font-family: var(--serif); }
:root[data-mode] .cosmic-theatre .journal-update > div,
:root[data-mode] .cosmic-theatre .activity-timeline-item .activity-card {
  border: 0;
  background: none;
  text-shadow: 0 1px 2px #020714, 0 0 8px #020714e6;
}
:root[data-mode] .cosmic-theatre .journal-stories { gap: 14px 18px; }
:root[data-mode] .cosmic-theatre .journal-story,
:root[data-mode] .cosmic-theatre .journal-project,
:root[data-mode] .cosmic-theatre .journal-update,
:root[data-mode] .cosmic-theatre .folio-project-link {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--theatre-light) 58%, transparent);
  border-radius: 12px;
  background: none;
  box-shadow: none;
}
:root[data-mode] .cosmic-theatre .journal-story:nth-child(2),
:root[data-mode] .cosmic-theatre .journal-story-lead { border-top: 1px solid color-mix(in srgb, var(--theatre-light) 58%, transparent); }
:root[data-mode] .cosmic-theatre .journal-project { border-color: color-mix(in srgb, var(--theatre-light) 58%, transparent); }
:root[data-mode] .cosmic-theatre .journal-project:nth-child(even) .stellar-project-caption { background: none; }
:root[data-mode] .cosmic-theatre .journal-update { padding-inline: 18px; }
@media (hover: hover) {
  :root[data-mode] .cosmic-theatre :is(.journal-story, .journal-project, .journal-update, .folio-project-link):hover {
    border-color: color-mix(in srgb, var(--theatre-light) 82%, transparent);
  }
}
:root[data-mode] .cosmic-theatre .activity-timeline-item[data-kind="release"] .activity-card { border-left: 0; }
.cosmic-theatre .activity-signal-node { width: 12px; height: 12px; background: radial-gradient(circle at 35% 30%, #fff8e1, #b1c9f7 24%, #50668b 48%, transparent 72%); box-shadow: 0 0 20px #b6cfff55; border: 0; }
:root[data-mode] .cosmic-theatre .journal-update h3 { font-size: 20px; }

/* Unboxed nebula reading zone. Long text and controls remain conventional
   enough to read, select, zoom and operate; decorative bodies never contain it. */
:root[data-mode] .cosmic-theatre :is(.reading-sheet, .album-sheet, .timeline-empty-board, .journal-empty, .journal-quiet) { border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-mode] .cosmic-theatre .project-header > p {
  width: fit-content; max-width: 100%; padding: 4px 12px; margin-left: -12px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--theatre-veil) 85%, transparent) 8% 92%, transparent);
}
:root[data-mode] .cosmic-theatre :is(.reading-layout > .prose, .project-reading-content > .prose, .about-prose) { background: radial-gradient(ellipse at 50% 50%, var(--cosmic-reading) 25%, transparent 70%); border-radius: 0; }
:root[data-mode] .cosmic-theatre :is(.project-header, .article-header, .about-heading) { border: 0; }
:root[data-mode] .cosmic-theatre :is(.release-card, .update-card, .about-contact-card) { border: 0; border-left: 1px solid var(--cosmic-canvas-line); border-radius: 0; background: radial-gradient(ellipse at 50% 50%, var(--theatre-wash), transparent 72%); }
:root[data-mode] .cosmic-theatre .about-contact-entry dt { font-size: 12px; line-height: 1.6; letter-spacing: .06em; }
:root[data-mode] .cosmic-theatre .download-verify-summary { border: 0; border-left: 1px solid var(--cosmic-canvas-line); border-radius: 0; padding-inline: 16px; background: var(--orbit-caption-surface); }
:root[data-mode] .cosmic-theatre :is(.download-verify-summary span, .download-answer-field > span, .download-captcha-field small) { color: var(--cosmic-canvas-muted); font-size: 12px; line-height: 1.6; }
:root[data-mode] .cosmic-theatre .download-captcha-field { grid-template-columns: minmax(0, 1fr); gap: 8px; }
:root[data-mode] .cosmic-theatre .download-captcha-refresh { max-width: 100%; }
@media (min-width: 761px) {
  :root[data-mode] .cosmic-theatre .download-verify-form { grid-template-columns: minmax(0, 1fr) 196px auto; }
}
:root[data-mode] .cosmic-theatre .timeline-scroll-shell { background: none; border: 0; box-shadow: none; }
:root[data-mode] .cosmic-theatre :is(.stellar-empty, .empty-state) { background: none; border: 0; }
:root[data-mode] .cosmic-theatre .stellar-page-art { width: 240px; height: 160px; opacity: .8; color: var(--theatre-light); background: radial-gradient(ellipse, var(--theatre-wash), transparent 70%); }
:root[data-mode] .cosmic-theatre :is(.timeline-category-bar, .update-filters-bar) { background: var(--cosmic-navigation); border-color: var(--cosmic-line); }
:root[data-mode] .cosmic-theatre :is(.timeline-search-input-wrap, .project-outline, .article-toc) { background: color-mix(in srgb, var(--theatre-veil) 86%, transparent); }
:root[data-mode] .cosmic-theatre input, :root[data-mode] .cosmic-theatre textarea { color: var(--cosmic-ink); }
:root[data-mode] .cosmic-theatre input::placeholder { color: var(--cosmic-muted); opacity: 1; }
:root[data-mode] .cosmic-theatre :is(.button, .button-small, .timeline-search-submit) { background: var(--theatre-light); color: var(--theatre-veil); }

/* A low, open presentation plinth. It is the only footer, with visible legal
   records and real links above the non-interactive elliptical rim. */
:root[data-mode] .cosmic-theatre .site-footer { position: relative; isolation: isolate; border: 0; margin-top: 64px; padding: 16px max(32px, calc((100% - 1256px) / 2)) 12px; width: 100%; max-width: none; gap: 6px 32px; }
.theatre-podium { position: absolute; z-index: -1; top: -18px; left: 0; width: 100%; height: calc(100% + 18px); color: var(--theatre-dust); pointer-events: none; overflow: hidden; }
:root[data-mode] .cosmic-theatre .site-footer-record { padding-top: 0; border: 0; }
:root[data-mode] .cosmic-theatre .site-footer-brand { align-items: center; min-height: 44px; }
:root[data-mode] .cosmic-theatre .site-footer-record a { display: inline-flex; align-items: center; min-height: 36px; }
/* Keep small legal/navigation text readable even when bright stardust crosses
   it, without putting an opaque rectangle over the presentation plinth. */
:root[data-mode] .cosmic-theatre .site-footer :is(.site-footer-brand > span, nav a, .site-footer-record a, .site-footer-record-divider) {
  color: var(--cosmic-canvas-ink);
  text-shadow: 0 1px 8px var(--theatre-veil);
}
@media (max-width: 500px) {
  :root[data-mode] .cosmic-theatre:not(.is-home) .site-footer-meta { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  :root[data-mode] .cosmic-theatre:not(.is-home) .site-footer-record { justify-self: start; justify-items: start; width: 100%; text-align: left; }
}

@media (hover: hover) {
  :root[data-mode] .cosmic-theatre .main-nav a:hover { background: none; color: var(--cosmic-canvas-ink); }
  :root[data-mode] .cosmic-theatre .main-nav a:hover::after { transform: scale(1.12); box-shadow: 0 0 24px color-mix(in srgb, var(--planet) 60%, transparent); }
  :root[data-mode] .cosmic-theatre :is(.journal-project, .folio-project-link):hover .celestial-seed { filter: brightness(1.2); }
  :root[data-mode] .cosmic-theatre .journal-directory a:hover .journal-directory-number { transform: translateY(-4px) scale(1.1); box-shadow: 0 0 30px #b9d1ff80; }
}
:root[data-mode] .cosmic-theatre .journal-directory a:focus-visible .journal-directory-number { transform: translateY(-4px) scale(1.1); box-shadow: 0 0 30px #b9d1ff80; }
:root[data-mode] .cosmic-theatre .journal-directory a:active .journal-directory-number { transform: scale(.96); }
@media (max-width: 1100px) {
  :root[data-mode] .cosmic-theatre .main-nav { gap: 2px; }
  :root[data-mode] .cosmic-theatre .main-nav a { min-width: 58px; font-size: 12px; }
  :root[data-mode] .cosmic-theatre .journal-hero { grid-template-columns: minmax(0, 1fr) 420px; }
  :root[data-mode] .cosmic-theatre .journal-directory { width: 420px; }
  :root[data-mode] .cosmic-theatre #home-tab-projects { left: 245px; }
}
@media (max-width: 900px) {
  :root[data-mode] .cosmic-theatre .journal-hero { grid-template-columns: minmax(0, 1fr); gap: 12px; min-height: 0; }
  :root[data-mode] .cosmic-theatre .journal-hero-copy { padding-top: 24px; }
  :root[data-mode] .cosmic-theatre .journal-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; width: 100%; height: 240px; min-height: 240px; }
  .theatre-singularity { top: -25px; height: 290px; }
  :root[data-mode] .cosmic-theatre .journal-directory::before { display: none; }
  :root[data-mode] .cosmic-theatre .journal-directory a { position: relative; inset: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; max-width: none; width: 100%; min-height: 100px; padding: 8px 0; border-radius: 0; text-align: center; }
  :root[data-mode] .cosmic-theatre .journal-directory a > :nth-child(2) { padding: 6px 8px; }
  :root[data-mode] .cosmic-theatre .journal-total { display: none; }
  :root[data-mode] .cosmic-theatre .journal-directory-number { width: 44px; height: 44px; }
  :root[data-mode] .cosmic-theatre .stellar-project-art, :root[data-mode] .cosmic-theatre .folio-project-link > .stellar-project-art { width: 120px; height: 158px; }
  :root[data-mode] .cosmic-theatre .stellar-project-art svg { width: 120px; height: 120px; }
  .cosmic-theatre .celestial-seed { top: 35px; left: 35px; width: 50px; height: 50px; }
  :root[data-mode] .cosmic-theatre .stellar-project-art .journal-project-initial { top: 42px; left: 42px; width: 36px; height: 36px; }
  .cosmic-theatre .stellar-project-number { left: 51px; }
  :root[data-mode] .cosmic-theatre .journal-project, :root[data-mode] .cosmic-theatre .folio-project-link { grid-template-columns: 120px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  :root[data-mode] .cosmic-theatre { --theatre-header-clearance: 90px; }
  html:has(.cosmic-theatre) { scroll-padding-top: max(124px, calc(env(safe-area-inset-top, 0px) + 120px)); }
  :root[data-mode] .cosmic-theatre .header-inner { min-height: 0; align-items: flex-start; }
  :root[data-mode] .cosmic-theatre .brand { font-size: 16px; }
  .cosmic-theatre .theatre-curtain::before { top: -80px; }
  .cosmic-theatre .theatre-curtain span { top: -105px; }
  :root[data-mode] .cosmic-theatre .site-stage { padding-top: var(--theatre-header-clearance); }
  :root[data-mode] .cosmic-theatre .cosmos-preferences { top: 86px; max-height: calc(100dvh - 100px); }
  :root[data-mode] .cosmic-theatre .mobile-navigation > nav { top: 76px; background: color-mix(in srgb, var(--theatre-veil) 96%, transparent); border: 1px solid var(--cosmic-line); border-radius: 0 0 50% 50% / 0 0 12% 12%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 12px 28px; }
  :root[data-mode] .cosmic-theatre .mobile-navigation nav > a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 48px 4px 6px; min-height: 100px; height: auto; width: 100%; font-size: 13px; text-align: center; background: none; border-radius: 0; }
  .cosmic-theatre .mobile-navigation nav > a::before { content: ""; position: absolute; width: 1px; height: 25px; top: 0; left: 50%; background: var(--cosmic-canvas-line); }
  .cosmic-theatre .mobile-navigation nav > a::after { content: ""; position: absolute; top: 23px; left: calc(50% - 11px); width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 28% 25%, #e6eeff, #849cc9 25%, #243959 60%, #080f29 85%); box-shadow: 0 0 18px #bdd0ff30; }
  .cosmic-theatre .mobile-navigation nav > a:nth-child(2n)::after { background: radial-gradient(circle at 28% 25%, #ffefcb, #b69772 25%, #534059 60%, #100f29 85%); }
  :root[data-mode] .cosmic-theatre .site-tools .mobile-navigation nav > a[aria-current] { color: var(--theatre-light); background: none; }
  .cosmic-theatre .mobile-navigation nav > a[aria-current]::after { outline: 1px solid var(--theatre-light); outline-offset: 4px; }
  :root[data-mode] .cosmic-theatre .journal-home { padding-top: 8px; }
  :root[data-mode] .cosmic-theatre .journal-hero-copy { padding-top: 12px; }
  :root[data-mode] .cosmic-theatre .journal-hero h1 { font-size: 40px; }
  :root[data-mode] .cosmic-theatre .journal-description { margin-top: 16px; }
  :root[data-mode] .cosmic-theatre .journal-index { margin-top: 12px; }
  :root[data-mode] .cosmic-theatre .journal-hero { padding-bottom: 10px; }
  :root[data-mode] .cosmic-theatre .journal-directory { height: 208px; min-height: 208px; }
  .cosmic-theatre .theatre-singularity { top: -38px; height: 250px; }
  :root[data-mode] .cosmic-theatre .journal-directory a { font-size: 13px; min-height: 100px; }
  :root[data-mode] .cosmic-theatre .journal-section-head { padding-top: 22px; margin-bottom: 18px; }
  :root[data-mode] .cosmic-theatre .journal-section-head h2 { font-size: 23px; }
  :root[data-mode] .cosmic-theatre .journal-project, :root[data-mode] .cosmic-theatre .folio-project-link { grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
  :root[data-mode] .cosmic-theatre .stellar-project-art, :root[data-mode] .cosmic-theatre .folio-project-link > .stellar-project-art { width: 62px; height: 100px; margin-top: 14px; }
  :root[data-mode] .cosmic-theatre .stellar-project-art svg { position: absolute; top: 0; left: -9px; width: 80px; height: 80px; }
  .cosmic-theatre .celestial-seed { top: 22px; left: 13px; width: 36px; height: 36px; }
  :root[data-mode] .cosmic-theatre .stellar-project-art .journal-project-initial { top: 26px; left: 17px; width: 28px; height: 28px; font-size: 14px; }
  .cosmic-theatre .stellar-project-number { left: 23px; font-size: 12px; }
  :root[data-mode] .cosmic-theatre .journal-project-body { padding: 16px 0 10px 8px; }
  :root[data-mode] .cosmic-theatre .journal-project h3, :root[data-mode] .cosmic-theatre .folio-project h3 { font-size: 23px; }
  :root[data-mode] .cosmic-theatre .journal-project-actions { margin-inline: 8px 0; border: 0; }
  :root[data-mode] .cosmic-theatre .folio-project-content { padding: 16px 0 10px 8px; }
  :root[data-mode] .cosmic-theatre .stellar-page-art { width: 110px; height: 90px; top: -4px; }
  :root[data-mode] .cosmic-theatre :is(.memory-letter, .letter-only .memory-letter, .project-detail, .about-sheet) { padding-inline: 0; }
  :root[data-mode] .cosmic-theatre :is(.reading-layout > .prose, .project-reading-content > .prose, .about-prose) { padding-inline: 4px; }
  :root[data-mode] .cosmic-theatre :is(.prose, .reading-layout > .prose, .about-prose) { font-size: 17px; }
  :root[data-mode] .cosmic-theatre .site-footer { width: 100%; padding: 12px 20px 10px; margin-top: 44px; gap: 6px; }
  .cosmic-theatre .theatre-podium { width: 100%; left: 0; height: calc(100% + 12px); top: -12px; }
  :root[data-mode] .cosmic-theatre .site-footer-record { font-size: 12px; line-height: 1.7; }
}

/* Planetary pull-cords shared by the homepage and the editorial pages. */
:root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link {
  --cord: 48px;
  --orb: 23px;
  --orb-light: #d7e3ee;
  --orb-mid: #77736f;
  --orb-dark: #292b32;
  --orb-glow: #c8d4dd;
  position: relative;
  display: grid;
  place-items: start center;
  width: 76px;
  min-width: 76px;
  min-height: 126px;
  padding: 0;
  overflow: visible;
  color: var(--cosmic-canvas-muted);
  isolation: isolate;
}
:root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link::before,
:root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link::after {
  content: none;
  display: none;
}
.cosmic-theatre .planet-ribbon {
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 50%;
  width: 25px;
  min-height: 67px;
  padding: 8px 4px 12px;
  border-inline: 1px solid color-mix(in srgb, var(--theatre-light) 32%, transparent);
  border-radius: 0 0 6px 6px;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--theatre-veil) 86%, transparent) 18% 82%, transparent),
    linear-gradient(var(--theatre-veil), color-mix(in srgb, var(--orb-glow) 16%, var(--theatre-veil)));
  box-shadow: 0 5px 18px color-mix(in srgb, var(--orb-glow) 14%, transparent);
  color: color-mix(in srgb, var(--theatre-light) 82%, var(--cosmic-canvas-muted));
  font: 11px/1.15 var(--sans);
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 1px 7px #000c;
  writing-mode: vertical-rl;
  text-orientation: upright;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translate(-50%, -22px);
  transform-origin: 50% 0;
  transition: clip-path .42s cubic-bezier(.18, .72, .2, 1), opacity .2s ease, transform .42s cubic-bezier(.18, .72, .2, 1);
  pointer-events: none;
}
.cosmic-theatre:lang(en) .planet-ribbon { text-orientation: mixed; letter-spacing: .03em; }
.cosmic-theatre .planet-cord {
  position: absolute;
  z-index: 2;
  top: 3px;
  left: calc(50% - .5px);
  width: 1px;
  height: var(--cord);
  background: linear-gradient(transparent, color-mix(in srgb, var(--theatre-light) 60%, transparent) 22%, var(--theatre-light));
  box-shadow: 0 0 7px color-mix(in srgb, var(--theatre-light) 18%, transparent);
  transition: height .46s cubic-bezier(.18, .72, .2, 1), opacity .2s ease;
}
.cosmic-theatre .planet-cord::after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--theatre-light);
  box-shadow: 0 0 8px var(--theatre-light);
}
.cosmic-theatre .planet-orb {
  position: absolute;
  z-index: 3;
  top: calc(var(--cord) - var(--orb) / 2);
  left: calc(50% - var(--orb) / 2);
  width: var(--orb);
  height: var(--orb);
  border: 1px solid color-mix(in srgb, var(--orb-light) 58%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 29% 24%, #fff 0 5%, var(--orb-light) 10%, transparent 27%),
    radial-gradient(circle at 68% 72%, transparent 28%, #020510a8 70%, #02030b 100%),
    repeating-linear-gradient(9deg, transparent 0 4px, color-mix(in srgb, var(--orb-mid) 36%, transparent) 5px 6px),
    radial-gradient(circle at 38% 34%, var(--orb-light), var(--orb-mid) 44%, var(--orb-dark) 82%);
  box-shadow:
    inset 3px 1px 6px color-mix(in srgb, var(--orb-light) 25%, transparent),
    inset -7px -5px 11px #000a,
    -5px -2px 18px color-mix(in srgb, var(--orb-glow) 30%, transparent),
    0 0 0 4px color-mix(in srgb, var(--orb-glow) 5%, transparent);
  transition:
    top .46s cubic-bezier(.18, .72, .2, 1),
    transform .46s cubic-bezier(.18, .72, .2, 1),
    box-shadow .35s ease,
    filter .35s ease;
  will-change: transform, top;
}
.cosmic-theatre .planet-orb::before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: inherit;
  background: radial-gradient(circle at 33% 30%, transparent 18%, #0509155e 62%, #02040c 100%);
}
.cosmic-theatre .planet-orb::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid color-mix(in srgb, var(--orb-glow) 25%, transparent);
  border-radius: 50%;
  opacity: .55;
}
:root[data-mode] .cosmic-theatre .main-nav a[data-planet="mercury"] { --cord: 39px; --orb: 18px; --orb-light: #c9c1b8; --orb-mid: #77716a; --orb-dark: #2a2929; --orb-glow: #c7c3bf; }
:root[data-mode] .cosmic-theatre .main-nav a[data-planet="venus"] { --cord: 53px; --orb: 25px; --orb-light: #f5dfaa; --orb-mid: #b98e58; --orb-dark: #4f3028; --orb-glow: #f2c97f; }
:root[data-mode] .cosmic-theatre .main-nav a[data-planet="mars"] { --cord: 43px; --orb: 23px; --orb-light: #e4a17c; --orb-mid: #a94e35; --orb-dark: #3b1b20; --orb-glow: #ef7d56; }
:root[data-mode] .cosmic-theatre .main-nav a[data-planet="jupiter"] { --cord: 34px; --orb: 31px; --orb-light: #ead7b8; --orb-mid: #b68260; --orb-dark: #52372f; --orb-glow: #dfb183; }
:root[data-mode] .cosmic-theatre .main-nav a[data-planet="saturn"] { --cord: 45px; --orb: 27px; --orb-light: #ead7a3; --orb-mid: #a88151; --orb-dark: #3d3025; --orb-glow: #e5c783; }
:root[data-mode] .cosmic-theatre .main-nav a[data-planet="mars"] .planet-orb {
  background:
    radial-gradient(ellipse at 68% 62%, #5f2b2d 0 13%, transparent 15%),
    radial-gradient(circle at 28% 24%, #ffe0c6 0 4%, #d88b66 12%, transparent 29%),
    radial-gradient(circle at 70% 76%, transparent 34%, #190a14 76%, #080710 100%),
    radial-gradient(circle at 36% 31%, #d98966, #a94f39 45%, #3d1d22 84%);
}
:root[data-mode] .cosmic-theatre .main-nav a[data-planet="jupiter"] .planet-orb {
  background:
    radial-gradient(ellipse at 68% 62%, #c26f5b 0 9%, #7c493d 10% 14%, transparent 16%),
    repeating-linear-gradient(175deg, #e8d4b3 0 4px, #a9785c 5px 8px, #d9b892 9px 12px, #75534d 13px 14px),
    radial-gradient(circle at 31% 27%, #f4dfbd, #b98366 48%, #4f3433 84%);
  background-blend-mode: normal, soft-light, normal;
}
:root[data-mode] .cosmic-theatre .main-nav a[data-planet="venus"] .planet-orb {
  background:
    radial-gradient(circle at 29% 24%, #fff4d6 0 5%, #ebcd95 12%, transparent 29%),
    repeating-linear-gradient(166deg, transparent 0 5px, #fff0c64d 6px 8px, #8f684433 9px 11px),
    radial-gradient(circle at 38% 34%, #f5dda9, #bd8e5c 48%, #57352b 84%);
}
:root[data-mode] .cosmic-theatre .main-nav a[data-planet="saturn"] .planet-orb {
  background:
    radial-gradient(circle at 29% 24%, #fff3c9 0 5%, #e6cf9c 12%, transparent 29%),
    repeating-linear-gradient(172deg, #d8bf8b 0 4px, #9f7d52 5px 7px, #c5a36e 8px 11px),
    radial-gradient(circle at 38% 34%, #ead39d, #9e7b50 50%, #3e3125 84%);
}
:root[data-mode] .cosmic-theatre .main-nav a[data-planet="saturn"] .planet-orb::after {
  inset: 31% -48%;
  border: 2px solid #eddaa8b8;
  border-top-color: #fff2cb99;
  transform: rotate(-19deg);
  box-shadow: 0 0 0 2px #5a45373b, 0 0 8px #edd59d55;
  opacity: .9;
}
:root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link[aria-current] .planet-orb {
  box-shadow: inset 3px 1px 6px color-mix(in srgb, var(--orb-light) 28%, transparent), inset -7px -5px 11px #000a, -5px -2px 20px color-mix(in srgb, var(--orb-glow) 58%, transparent), 0 0 0 5px color-mix(in srgb, var(--orb-glow) 12%, transparent), 0 0 0 6px color-mix(in srgb, var(--orb-glow) 27%, transparent);
}
:root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link:hover .planet-cord,
:root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link:focus-visible .planet-cord { height: calc(var(--cord) + 30px); }
:root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link:hover .planet-orb,
:root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link:focus-visible .planet-orb {
  top: calc(var(--cord) + 30px - var(--orb) / 2);
  transform: scale(1.5);
  filter: saturate(1.12) brightness(1.06);
  box-shadow: inset 3px 1px 6px color-mix(in srgb, var(--orb-light) 30%, transparent), inset -8px -6px 13px #000b, -8px -3px 28px color-mix(in srgb, var(--orb-glow) 62%, transparent), 0 0 0 5px color-mix(in srgb, var(--orb-glow) 8%, transparent);
}
:root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link:hover .planet-ribbon,
:root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link:focus-visible .planet-ribbon {
  opacity: 1;
  clip-path: inset(0);
  transform: translate(-50%, 0);
  transition-delay: .06s;
}

@media screen {
  :root[data-mode] .cosmic-theatre .brand-logo { border-radius: 8px; mix-blend-mode: screen; }
}
@media screen and (min-width: 761px) {
  :root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link .planet-ribbon {
    top: calc(var(--cord) + var(--orb) / 2 + 9px);
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    white-space: nowrap;
    opacity: .8;
    clip-path: none;
    transform: translateX(-50%);
    font-size: 12px;
    letter-spacing: .05em;
    transition: top .46s cubic-bezier(.18, .72, .2, 1), opacity .2s ease, color .2s ease;
  }
  :root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link:is(:hover, :focus-visible) .planet-ribbon {
    top: calc(var(--cord) + var(--orb) / 2 + 39px);
    opacity: 1;
    transform: translateX(-50%);
  }
  :root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link[aria-current] .planet-ribbon { color: var(--theatre-light); opacity: 1; }
}
/* Keep the same planetary page links visible and comfortably tappable on
   every small-screen page, with room for the header utilities above them. */
@media screen and (max-width: 760px) {
  :root[data-mode] .cosmic-theatre {
    --theatre-header-clearance: calc(var(--theatre-corner-top) + 102px);
  }
  :root[data-mode] .cosmic-theatre.is-home .brand { max-width: calc(100% - 56px); }
  :root[data-mode] .cosmic-theatre .header-inner > .main-nav {
    position: absolute;
    top: calc(var(--theatre-corner-top) + 46px);
    right: var(--theatre-edge-right);
    left: var(--theatre-edge-left);
    display: flex;
    width: auto;
    gap: 0;
    margin: 0;
  }
  :root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link {
    --orb: 18px;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 48px;
    height: 48px;
  }
  :root[data-mode] .cosmic-theatre .main-nav .planet-cord { display: none; }
  :root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link .planet-orb,
  :root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link:is(:hover, :focus-visible) .planet-orb {
    top: 1px;
    transform: none;
  }
  :root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link .planet-ribbon,
  :root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link:is(:hover, :focus-visible) .planet-ribbon {
    top: 25px;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--cosmic-canvas-ink);
    font-size: 12px;
    letter-spacing: 0;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    white-space: nowrap;
    opacity: .9;
    clip-path: none;
    transform: translateX(-50%);
    transition: color .2s ease, opacity .2s ease;
  }
  :root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link[aria-current] .planet-ribbon {
    color: var(--theatre-light);
    opacity: 1;
  }
  :root[data-mode] .cosmic-theatre.is-home #appearance-toggle.floating-appearance-toggle {
    top: var(--theatre-corner-top);
    right: var(--theatre-edge-right);
    bottom: auto;
  }
  :root[data-mode] .cosmic-theatre.is-home .cosmos-preferences {
    top: calc(var(--theatre-corner-top) + 52px);
    max-height: calc(100dvh - var(--theatre-corner-top) - 64px);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-mode] .cosmic-theatre .main-nav a.celestial-nav-link .planet-ribbon { transition: none; }
}

/* A three-world perspective carousel. The active world is deliberately
   cropped by the hero, while the middle and far worlds stay fully readable. */
:root[data-mode] .cosmic-theatre .journal-home { isolation: isolate; }
:root[data-mode] .cosmic-theatre .journal-home .journal-section { pointer-events: none; }
:root[data-mode] .cosmic-theatre .journal-home .journal-section :is(a, button, input, textarea, select, label, summary, h2, h3, p, time) { pointer-events: auto; }
:root[data-mode] .cosmic-theatre .journal-home .journal-section :is(.journal-section-head, .journal-story, .journal-project, .journal-update, .journal-empty, .journal-quiet) { pointer-events: auto; }
:root[data-mode] .cosmic-theatre .site-footer { pointer-events: none; }
:root[data-mode] .cosmic-theatre .site-footer :is(a, button, p, span, small, time) { pointer-events: auto; }
:root[data-mode] .cosmic-theatre .journal-hero {
  position: relative;
  display: block;
  min-height: clamp(250px, 31svh, 340px);
  padding: 0;
  overflow: visible;
  border: 0;
  pointer-events: none;
}
:root[data-mode] .cosmic-theatre .journal-hero::after {
  display: none;
}
:root[data-mode] .cosmic-theatre .journal-hero-copy {
  position: relative;
  z-index: 30;
  width: min(48%, 560px);
  padding: 54px 0 38px;
  pointer-events: none;
}
:root[data-mode] .cosmic-theatre .journal-hero h1 {
  max-width: 10ch;
  color: var(--theatre-light);
  background: linear-gradient(90deg, color-mix(in srgb, var(--theatre-light) 12%, transparent) 0%, color-mix(in srgb, var(--theatre-light) 56%, transparent) 48%, var(--theatre-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: .012em;
  text-shadow: none;
  filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--theatre-veil) 84%, transparent));
  text-wrap: balance;
}
:root[data-mode] .cosmic-theatre .home-section-guide {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 15px;
  pointer-events: auto;
}
:root[data-mode] .cosmic-theatre .home-section-guide a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  color: var(--cosmic-canvas-ink);
  font: 13px/1.4 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  opacity: .8;
}
:root[data-mode] .cosmic-theatre .home-section-guide a:is(:hover, :focus-visible, [aria-current]) { opacity: 1; }
:root[data-mode] .cosmic-theatre .home-section-guide a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.home-section-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #8fbcec;
  box-shadow: 0 0 8px #8fbcec88;
}
[data-home-guide="projects"] .home-section-dot { background: #d68768; box-shadow: 0 0 8px #d6876888; }
[data-home-guide="updates"] .home-section-dot { background: #c6c2bc; box-shadow: 0 0 8px #c6c2bc88; }
:root[data-mode] .cosmic-theatre .journal-directory.planetary-stage {
  --planet-diameter: min(118vmin, 1380px);
  position: fixed;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100svh;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  pointer-events: none;
}
:root[data-mode] .cosmic-theatre .planetary-depth-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--theatre-light);
  opacity: .72;
  pointer-events: none;
}
:root[data-mode] .cosmic-theatre .home-distant-star {
  position: absolute;
  z-index: 1;
  top: max(calc(var(--theatre-header-clearance) + 8px), 12.5%);
  right: 3.2%;
  width: clamp(28px, 3vw, 44px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 42%, #a93f1466 100%),
    url("./sun-solar-system-scope.jpg") center / cover no-repeat;
  box-shadow:
    0 0 8px #fff,
    0 0 20px #ffe9b6,
    0 0 54px #ffc37c66,
    0 0 112px #82b9ff2e;
  opacity: .96;
}
:root[data-mode] .cosmic-theatre .home-distant-star::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -105%;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff0 12%, #ffe9bc2e 29%, #89baff1f 48%, transparent 70%),
    conic-gradient(from 14deg, transparent 0 44%, #fff2 47%, transparent 50% 91%, #dce9ff24 94%, transparent 97%);
  mix-blend-mode: screen;
}
:root[data-mode] .cosmic-theatre .home-distant-star::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 22%, #fffbeaaa, #fff3bc44 12%, transparent 35%);
  box-shadow: inset 1px 1px 3px #ffe5a060, inset -2px -3px 5px #97340960;
}
:root[data-mode] .cosmic-theatre .journal-directory a.planetary-tab {
  position: absolute;
  inset: 0 !important;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  pointer-events: none;
  color: var(--cosmic-canvas-ink);
}
:root[data-mode] .cosmic-theatre .journal-directory a.planetary-tab::before,
:root[data-mode] .cosmic-theatre .journal-directory a.planetary-tab::after { content: none; }
:root[data-mode] .cosmic-theatre .journal-directory a.planetary-tab::before {
  content: "";
  position: absolute;
  left: var(--planet-x, 82%);
  top: var(--planet-y, 90%);
  width: calc(var(--planet-diameter) * 1.24);
  height: calc(var(--planet-diameter) * 1.24);
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    transparent 75%,
    color-mix(in srgb, var(--planet-air) 14%, transparent) 81%,
    color-mix(in srgb, var(--planet-air) 28%, transparent) 85%,
    color-mix(in srgb, var(--planet-air) 10%, transparent) 92%,
    transparent 100%);
  opacity: var(--planet-opacity, 1);
  transform: translate(-50%, -50%) scale(var(--planet-scale, 1));
  pointer-events: none;
  transition: left .72s cubic-bezier(.16, .72, .16, 1),
    top .72s cubic-bezier(.16, .72, .16, 1),
    transform .72s cubic-bezier(.16, .72, .16, 1), opacity .48s ease;
}
:root[data-mode] .cosmic-theatre .planetary-tab[data-slot="front"] { z-index: 5; }
:root[data-mode] .cosmic-theatre .planetary-tab[data-slot="middle"] { z-index: 6; }
:root[data-mode] .cosmic-theatre .planetary-tab[data-slot="far"] { z-index: 7; }
:root[data-mode] .cosmic-theatre .journal-directory a.planetary-tab > .planetary-sphere {
  position: absolute;
  display: block;
  left: var(--planet-x, 82%);
  top: var(--planet-y, 90%);
  width: var(--planet-diameter);
  height: var(--planet-diameter);
  border-radius: 50%;
  clip-path: circle(50%);
  transform: translate(-50%, -50%) scale(var(--planet-scale, 1));
  transform-origin: 50% 50%;
  pointer-events: auto;
  cursor: pointer;
  transition:
    left .72s cubic-bezier(.16, .72, .16, 1),
    top .72s cubic-bezier(.16, .72, .16, 1),
    transform .72s cubic-bezier(.16, .72, .16, 1),
    filter .48s ease,
    opacity .48s ease;
  will-change: left, top, transform, filter;
}
:root[data-mode] .cosmic-theatre .planetary-tab[data-slot="front"] { --planet-x: 88%; --planet-y: 108%; --planet-scale: 1; --planet-opacity: 1; --planet-blur: 0px; }
:root[data-mode] .cosmic-theatre .planetary-tab[data-slot="middle"] { --planet-x: 73%; --planet-y: 33%; --planet-scale: .19; --planet-opacity: .92; --planet-blur: .35px; }
:root[data-mode] .cosmic-theatre .planetary-tab[data-slot="far"] { --planet-x: 87%; --planet-y: 22%; --planet-scale: .083; --planet-opacity: .78; --planet-blur: 1.1px; }
:root[data-mode] .cosmic-theatre .planetary-sphere {
  isolation: isolate;
  opacity: var(--planet-opacity);
  filter: blur(var(--planet-blur)) saturate(var(--planet-saturation, 1));
}
:root[data-mode] .cosmic-theatre .planetary-sphere .planet-surface {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  overflow: hidden;
  background: var(--planet-texture) 0 0 / 200% 100% repeat-x;
}
:root[data-mode] .cosmic-theatre .planetary-sphere .planet-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--planet-texture) 0 0 / 200% 100% repeat-x;
  animation: planet-spin var(--planet-spin, 48s) linear infinite;
}
:root[data-mode] .cosmic-theatre .planetary-sphere .planet-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 72% 23%, #fff2, transparent 32%),
    linear-gradient(225deg, transparent 28%, #06102130 57%, #02050dba 100%),
    radial-gradient(circle at 54% 38%, transparent 36%, #02050d70 100%);
}
:root[data-mode] .cosmic-theatre .planetary-sphere::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    transparent 87%,
    color-mix(in srgb, var(--planet-air) 12%, transparent) 95%,
    color-mix(in srgb, var(--planet-air) 38%, transparent) 99%,
    transparent 100%);
  opacity: .85;
  pointer-events: none;
}
:root[data-mode] .cosmic-theatre .planetary-limb {
  position: absolute;
  z-index: 4;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--planet-air) 42%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
:root[data-mode] .cosmic-theatre #home-tab-stories.planetary-earth { --planet-texture: url("./earth-blue-marble-2k.jpg"); --planet-spin: 54s; --planet-air: #81baff99; --planet-saturation: 1.08; }
:root[data-mode] .cosmic-theatre #home-tab-projects.planetary-mars { --planet-texture: url("./mars-viking-2k.jpg"); --planet-spin: 61s; --planet-air: #e9916b66; --planet-saturation: 1.14; }
:root[data-mode] .cosmic-theatre #home-tab-updates.planetary-mercury { --planet-texture: url("./mercury-messenger-2k.jpg"); --planet-spin: 68s; --planet-air: #c8c5bd40; --planet-saturation: .9; }
:root[data-cosmos-motion="still"][data-mode] .cosmic-theatre .planetary-sphere .planet-surface::before { animation-play-state: paused; }
@media (hover: hover) {
  :root[data-mode] .cosmic-theatre .planetary-tab[data-slot="front"] .planetary-sphere:hover { filter: blur(0) saturate(1.15) brightness(1.04); }
  :root[data-mode] .cosmic-theatre .planetary-tab[data-slot="middle"] .planetary-sphere:hover,
  :root[data-mode] .cosmic-theatre .planetary-tab[data-slot="far"] .planetary-sphere:hover { filter: blur(0) saturate(1.12) brightness(1.1); }
  :root[data-mode] .cosmic-theatre .planetary-sphere:hover::before { opacity: 1; }
}
:root[data-mode] .cosmic-theatre .planetary-tab:focus-visible { outline: none; }
:root[data-mode] .cosmic-theatre .planetary-tab:focus-visible .planetary-limb { border-color: var(--theatre-light); box-shadow: inset 0 0 0 4px var(--theatre-light); }
@media (max-width: 1100px) {
  :root[data-mode] .cosmic-theatre .journal-hero { min-height: clamp(230px, 29svh, 310px); }
  :root[data-mode] .cosmic-theatre .journal-hero-copy { width: min(55%, 500px); padding-top: 46px; }
  :root[data-mode] .cosmic-theatre .planetary-sphere { width: min(112vmin, 1040px); height: min(112vmin, 1040px); }
  :root[data-mode] .cosmic-theatre .planetary-tab[data-slot="front"] { --planet-x: 89%; --planet-y: 107%; }
  :root[data-mode] .cosmic-theatre .planetary-tab[data-slot="middle"] { --planet-x: 73%; --planet-y: 33%; }
  :root[data-mode] .cosmic-theatre .planetary-tab[data-slot="far"] { --planet-x: 88%; --planet-y: 22%; }
}
@media (max-width: 760px) {
  :root[data-mode] .cosmic-theatre .journal-hero { display: flex; flex-direction: column; min-height: 168px; overflow: visible; }
  :root[data-mode] .cosmic-theatre .journal-hero-copy { width: 100%; padding: 8px 0 4px; }
  :root[data-mode] .cosmic-theatre .journal-hero h1 { font-size: clamp(38px, 10.5vw, 44px); line-height: 1.16; max-width: 100%; }
  :root[data-mode] .cosmic-theatre .home-section-guide { margin-top: 8px; }
  :root[data-mode] .cosmic-theatre .journal-directory.planetary-stage { position: fixed; inset: 0; display: block; width: 100vw; height: 100svh; min-height: 0; margin: 0; overflow: hidden; }
  :root[data-mode] .cosmic-theatre .planetary-sphere { width: min(150vw, 700px); height: min(150vw, 700px); }
  :root[data-mode] .cosmic-theatre .planetary-tab[data-slot="front"] { --planet-x: 86%; --planet-y: 108%; --planet-scale: .74; }
  :root[data-mode] .cosmic-theatre .planetary-tab[data-slot="middle"] { --planet-x: 73%; --planet-y: 34%; --planet-scale: .19; }
  :root[data-mode] .cosmic-theatre .planetary-tab[data-slot="far"] { --planet-x: 88%; --planet-y: 21%; --planet-scale: .12; }
  :root[data-mode] .cosmic-theatre .home-distant-star { top: max(calc(var(--theatre-header-clearance) + 8px), 13.5%); right: 3.5%; width: clamp(25px, 7vw, 31px); }
}
@media (max-width: 760px) and (max-height: 650px) {
  :root[data-mode] .cosmic-theatre .home-distant-star { right: 24%; }
}

/* The compact utility menu replaces standalone header icons. Search and
   language remain one click away without competing with the planetary nav. */
:root[data-mode] .cosmic-theatre .header-menu > summary {
  border-color: color-mix(in srgb, var(--theatre-light) 38%, transparent);
  background:
    radial-gradient(circle at 35% 28%, #dbe8ff2e, transparent 45%),
    color-mix(in srgb, var(--theatre-veil) 78%, transparent);
  box-shadow: inset 0 1px #ffffff20, 0 8px 24px #0004;
}
:root[data-mode] .cosmic-theatre .header-menu[open] > summary {
  border-color: color-mix(in srgb, var(--theatre-light) 72%, transparent);
  background: color-mix(in srgb, var(--theatre-veil) 92%, transparent);
}
:root[data-mode] .cosmic-theatre .header-menu-panel {
  border-color: color-mix(in srgb, var(--theatre-light) 34%, transparent);
  background:
    radial-gradient(circle at 88% 5%, color-mix(in srgb, var(--theatre-light) 12%, transparent), transparent 36%),
    color-mix(in srgb, var(--theatre-veil) 97%, transparent);
  box-shadow: inset 0 1px #ffffff18, 0 22px 60px #0009;
}
:root[data-mode] .cosmic-theatre .header-menu-utilities :is(.menu-search, .language-link) {
  border-color: color-mix(in srgb, var(--theatre-light) 25%, transparent);
  background: color-mix(in srgb, var(--theatre-light) 7%, transparent);
}
:root[data-mode] .cosmic-theatre .header-menu-utilities :is(.menu-search, .language-link):hover {
  border-color: color-mix(in srgb, var(--theatre-light) 58%, transparent);
  background: color-mix(in srgb, var(--theatre-light) 12%, transparent);
}
:root[data-mode] .cosmic-theatre .header-menu-panel nav > a {
  position: static;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 8px;
  text-align: left;
  color: var(--cosmic-canvas-muted);
  font: 14px/1.5 var(--sans);
}
:root[data-mode] .cosmic-theatre .header-menu-panel nav > a::before,
:root[data-mode] .cosmic-theatre .header-menu-panel nav > a::after { content: none; display: none; }
:root[data-mode] .cosmic-theatre .header-menu-panel nav > a:hover,
:root[data-mode] .cosmic-theatre .header-menu-panel nav > a[aria-current] { color: var(--theatre-light); background: color-mix(in srgb, var(--theatre-light) 9%, transparent); }

/* A draggable theme world. Its fixed shading and rolling bands keep the
   sphere readable while its palette follows the active universe. */
:root[data-mode] .cosmic-theatre #appearance-toggle.floating-appearance-toggle {
  --orb-light: #eef7ff;
  --orb-mid: #8dc8f6;
  --orb-deep: #4569b7;
  --orb-shadow: #080f2e;
  --orb-glow: #9bcfff73;
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 999;
  width: 62px;
  height: 62px;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--orb-light) 48%, transparent);
  border-radius: 50%;
  background: radial-gradient(circle at 31% 26%, var(--orb-light) 0 4%, var(--orb-mid) 27%, var(--orb-deep) 58%, var(--orb-shadow) 100%);
  box-shadow:
    inset -12px -14px 24px #020617c9,
    inset 8px 7px 16px #ffffff4d,
    0 12px 30px #0008,
    0 0 28px var(--orb-glow);
  cursor: grab;
  touch-action: none;
  animation: none;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
:root[data-mode="dark"] .cosmic-theatre #appearance-toggle.floating-appearance-toggle {
  --orb-light: #ffd0b8;
  --orb-mid: #b85f54;
  --orb-deep: #5a2734;
  --orb-shadow: #100b13;
  --orb-glow: #a84d5266;
}
:root[data-mode="twilight"] .cosmic-theatre #appearance-toggle.floating-appearance-toggle {
  --orb-light: #f2e5b5;
  --orb-mid: #9cbba7;
  --orb-deep: #416767;
  --orb-shadow: #102326;
  --orb-glow: #93b7a86b;
}
:root[data-mode] .cosmic-theatre #appearance-toggle .appearance-toggle-icon {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  color: transparent;
}
.cosmic-theatre .theme-orb-surface {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background:
    repeating-linear-gradient(103deg, transparent 0 10%, #ffffff24 13% 16%, transparent 19% 29%),
    radial-gradient(circle at 58% 62%, #ffffff12, transparent 42%);
  animation: theme-orb-roll 11s linear infinite;
}
.cosmic-theatre .theme-orb-shade {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 27% 22%, #ffffffb8 0 2%, #ffffff1f 13%, transparent 29%),
    radial-gradient(circle at 72% 76%, #0000 24%, #01040f9c 76%, #01040fe8 100%);
  box-shadow: inset -8px -11px 18px #0006;
}
@keyframes theme-orb-roll { to { transform: rotate(360deg); } }
@media (hover: hover) {
  :root[data-mode] .cosmic-theatre #appearance-toggle.floating-appearance-toggle:hover { transform: scale(1.07); border-color: color-mix(in srgb, var(--orb-light) 78%, transparent); box-shadow: inset -12px -14px 24px #020617c9, inset 8px 7px 16px #ffffff5c, 0 16px 36px #0009, 0 0 38px var(--orb-glow); }
}
:root[data-mode] .cosmic-theatre #appearance-toggle.floating-appearance-toggle:active,
:root[data-mode] .cosmic-theatre #appearance-toggle.floating-appearance-toggle.is-dragging { cursor: grabbing; transform: scale(1.03); }
:root[data-mode] .cosmic-theatre #appearance-toggle.floating-appearance-toggle.is-dragging .theme-orb-surface { animation-play-state: paused; }
:root[data-cosmos-motion="still"] .cosmic-theatre .theme-orb-surface { animation-play-state: paused; }
@media (max-width: 760px) {
  :root[data-mode] .cosmic-theatre .header-menu-panel {
    position: fixed;
    top: calc(var(--theatre-corner-top) + 64px);
    right: var(--theatre-edge-right);
    left: var(--theatre-edge-left);
    width: auto;
    max-height: calc(100dvh - var(--theatre-corner-top) - 80px);
    overflow-y: auto;
  }
  :root[data-mode] .cosmic-theatre #appearance-toggle.floating-appearance-toggle { right: 18px; bottom: 18px; width: 56px; height: 56px; }
}
@media (max-width: 360px) {
  :root[data-mode] .cosmic-theatre .planetary-sphere { width: min(160vw, 680px); height: min(160vw, 680px); }
  :root[data-mode] .cosmic-theatre .planetary-tab[data-slot="front"] { --planet-scale: .7; }
}

/* About: a quiet personal introduction and a short letter within the sky. */
:root[data-mode] .cosmic-theatre .about-wrap { max-width: 1200px; padding: 36px 32px 28px; }
:root[data-mode] .cosmic-theatre .about-wrap .about-sheet { padding: 16px 24px 24px; }
:root[data-mode] .cosmic-theatre .about-wrap .about-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 360px);
  align-items: center;
  gap: clamp(18px, 4vw, 58px);
  min-height: 250px;
  margin: 0 0 32px;
  padding: 0 0 28px;
  border-bottom: 1px solid color-mix(in srgb, var(--theatre-light) 24%, transparent);
}
:root[data-mode] .cosmic-theatre .about-heading::before { content: none; }
:root[data-mode] .cosmic-theatre .about-heading-copy { min-width: 0; }
:root[data-mode] .cosmic-theatre .about-heading .about-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  color: var(--cosmic-canvas-muted);
  font: 13px/1.6 var(--sans);
}
.cosmic-theatre .about-label::before { content: ""; width: 32px; border-top: 1px solid var(--theatre-light); opacity: .8; }
:root[data-mode] .cosmic-theatre .about-heading h1 {
  margin: 0 0 14px;
  color: var(--theatre-light);
  font: 500 clamp(38px, 4vw, 56px)/1.3 var(--serif);
}
:root[data-mode] .cosmic-theatre .about-heading .about-desc {
  max-width: 34em;
  color: var(--cosmic-canvas-ink);
  font-size: 16px;
  line-height: 1.9;
}
.cosmic-theatre .about-emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 6 / 5;
  justify-self: end;
  pointer-events: none;
}
.cosmic-theatre .about-emblem::before {
  content: "";
  position: absolute;
  inset: 15%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--theatre-light) 15%, transparent), transparent 70%);
}
.cosmic-theatre .about-orbits { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; stroke: color-mix(in srgb, var(--theatre-light) 42%, transparent); stroke-width: .8; }
.cosmic-theatre .about-orbit-star, .cosmic-theatre .about-orbit-spark { fill: var(--theatre-light); stroke: none; }
.cosmic-theatre .about-emblem-logo {
  position: relative;
  z-index: 2;
  display: block;
  width: 58%;
  height: auto;
  box-sizing: content-box;
  padding: 4%;
  border: 1px solid color-mix(in srgb, var(--theatre-light) 24%, transparent);
  border-radius: 50%;
  background: #030d29;
  object-fit: contain;
  box-shadow: 0 0 32px color-mix(in srgb, var(--theatre-light) 12%, transparent);
}
.cosmic-theatre .about-emblem-fallback { color: var(--theatre-light); font: 68px/1 var(--serif); text-shadow: 0 0 28px var(--theatre-light); }
:root[data-mode] .cosmic-theatre .about-letter { padding-left: 22px; border-left: 1px solid color-mix(in srgb, var(--theatre-light) 33%, transparent); }
.cosmic-theatre .about-letter-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.cosmic-theatre .about-letter-number { color: var(--theatre-light); font-size: 13px; }
:root[data-mode] .cosmic-theatre .about-letter-title { color: var(--cosmic-canvas-muted); font: 13px/1.6 var(--sans); letter-spacing: .04em; }
:root[data-mode] .cosmic-theatre .about-letter .about-prose { padding: 8px 12px 4px 0; }
:root[data-mode] .cosmic-theatre .about-letter .about-prose p { text-wrap: pretty; }
:root[data-mode] .cosmic-theatre .about-letter .about-prose h2 { margin: 0 0 12px; font-size: clamp(22px, 2.2vw, 27px); line-height: 1.5; }
:root[data-mode] .cosmic-theatre .about-letter .about-prose h2:not(:first-child) { margin-top: 1.8em; }
.cosmic-theatre .about-discover { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 20px; }
:root[data-mode] .cosmic-theatre .about-discover a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--cosmic-canvas-ink);
  font: 14px/1.6 var(--sans);
  text-decoration: none;
}
.cosmic-theatre .about-discover a span { color: var(--theatre-light); }
:root[data-mode] .cosmic-theatre .about-discover a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 760px) {
  :root[data-mode] .cosmic-theatre .about-wrap { padding: 22px 20px 30px; }
  :root[data-mode] .cosmic-theatre .about-wrap .about-sheet { padding: 0; }
  :root[data-mode] .cosmic-theatre .about-wrap .about-heading {
    grid-template-columns: minmax(0, 1fr) minmax(100px, 36%);
    grid-template-areas: "label emblem" "name emblem" "description description";
    gap: 8px;
    min-height: 145px;
    margin-bottom: 24px;
    padding-bottom: 18px;
  }
  :root[data-mode] .cosmic-theatre .about-heading-copy { display: contents; }
  :root[data-mode] .cosmic-theatre .about-heading .about-label { grid-area: label; align-self: end; }
  :root[data-mode] .cosmic-theatre .about-heading h1 { grid-area: name; align-self: start; }
  :root[data-mode] .cosmic-theatre .about-heading .about-desc { grid-area: description; }
  :root[data-mode] .cosmic-theatre .about-heading .about-label { gap: 8px; margin-bottom: 8px; font-size: 12px; }
  .cosmic-theatre .about-label::before { width: 20px; }
  :root[data-mode] .cosmic-theatre .about-heading h1 { margin-bottom: 8px; font-size: 32px; }
  :root[data-mode] .cosmic-theatre .about-heading .about-desc { font-size: 15px; line-height: 1.8; }
  .cosmic-theatre .about-emblem { grid-area: emblem; max-width: 190px; }
  .cosmic-theatre .about-emblem-logo { width: 68%; }
  .cosmic-theatre .about-emblem-fallback { font-size: 42px; }
  :root[data-mode] .cosmic-theatre .about-letter { padding-left: 16px; }
  :root[data-mode] .cosmic-theatre .about-letter .about-prose { padding: 4px 0; }
  .cosmic-theatre .about-discover { margin-top: 14px; gap: 0 22px; }
  /* Keep the draggable theme world clear of page content by default. */
  :root[data-mode] .cosmic-theatre .header-inner .brand { max-width: calc(100% - 56px); }
  :root[data-mode] .cosmic-theatre #appearance-toggle.floating-appearance-toggle {
    top: var(--theatre-corner-top);
    right: var(--theatre-edge-right);
    bottom: auto;
    width: 44px;
    height: 44px;
  }
}

/* A compact archive toolbar and an open, readable list of stories. */
:root[data-mode] .cosmic-theatre .archive-toolbar { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 24px; }
:root[data-mode] .cosmic-theatre .archive-toolbar .timeline-search-bar { flex: 1 1 360px; min-width: 0; }
:root[data-mode] .cosmic-theatre .archive-toolbar .archive-tools { flex: 1 1 auto; justify-content: flex-end; margin: 0; }
:root[data-mode] .cosmic-theatre .archive-toolbar .archive-tools:has(.archive-filters[open]) { flex-basis: 100%; }
:root[data-mode] .cosmic-theatre .timeline-empty-board { min-height: 230px; padding: 20px 12px 32px; }
:root[data-mode] .cosmic-theatre .stellar-empty { gap: 6px; color: var(--cosmic-canvas-ink); }
:root[data-mode] .cosmic-theatre .stellar-empty .stellar-illustration { width: 146px; height: 98px; }
:root[data-mode] .cosmic-theatre .stellar-empty p { margin: 0; color: var(--cosmic-canvas-muted); font: 14px/1.7 var(--sans); }
:root[data-mode] .cosmic-theatre .stellar-empty .timeline-clear-btn { margin-top: 2px; }
:root[data-mode] .cosmic-theatre .archive-entry {
  grid-template-columns: 48px minmax(0, 1fr) 144px;
  gap: 20px;
  align-items: center;
  min-height: 140px;
  padding: 18px 0;
  border-bottom: 1px solid var(--cosmic-canvas-line);
}
:root[data-mode] .cosmic-theatre .archive-list::before { left: 23px; }
:root[data-mode] .cosmic-theatre .archive-entry-number,
:root[data-mode] .cosmic-theatre .archive-entry:first-child .archive-entry-number { width: 48px; height: 48px; margin: 0; align-self: center; font: 16px/48px var(--mono); pointer-events: none; }
:root[data-mode] .cosmic-theatre .archive-entry > .archive-entry-copy,
:root[data-mode] .cosmic-theatre .archive-entry:first-child > .archive-entry-copy { position: static; grid-column: 2; min-width: 0; padding: 4px 24px 4px 0; border: 0; background: none; }
:root[data-mode] .cosmic-theatre .archive-entry-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; margin-bottom: 5px; color: var(--cosmic-canvas-muted); font: 12px/1.6 var(--mono); }
:root[data-mode] .cosmic-theatre .archive-entry-category { display: inline; margin: 0; }
:root[data-mode] .cosmic-theatre .archive-entry h2,
:root[data-mode] .cosmic-theatre .archive-entry:first-child h2 { font: 500 clamp(21px, 2.1vw, 27px)/1.4 var(--serif); overflow-wrap: anywhere; }
:root[data-mode] .cosmic-theatre .archive-entry h2 a::after { z-index: 2; }
:root[data-mode] .cosmic-theatre .archive-entry p { margin: 7px 0 0; line-height: 1.65; }
:root[data-mode] .cosmic-theatre .archive-entry-arrow { right: 0; top: 18px; }
.cosmic-theatre .archive-entry-art { display: grid; place-items: center; width: 144px; height: 92px; overflow: hidden; border-radius: 4px; color: var(--cosmic-canvas-muted); pointer-events: none; }
.cosmic-theatre .archive-entry-art img { width: 100%; height: 100%; object-fit: cover; }
.cosmic-theatre .archive-entry-orbit { width: 130px; height: 86px; opacity: .55; }
.cosmic-theatre .timeline-mobile-hint { display: none; }
@media (hover: hover) {
  :root[data-mode] .cosmic-theatre .archive-entry:hover h2 a { color: var(--theatre-light); }
}
@media (max-width: 760px) {
  :root[data-mode] .cosmic-theatre .articles-canvas-wrap { padding: 22px 20px 24px; }
  :root[data-mode] .cosmic-theatre .articles-canvas-wrap .timeline-page-header { min-height: 88px; margin-bottom: 16px; }
  :root[data-mode] .cosmic-theatre .articles-canvas-wrap .stellar-page-art { width: 116px; height: 78px; top: -8px; }
  :root[data-mode] .cosmic-theatre .articles-canvas-wrap .stellar-masthead h1 { padding-right: 102px; }
  :root[data-mode] .cosmic-theatre .archive-toolbar { display: block; margin-bottom: 14px; }
  :root[data-mode] .cosmic-theatre .archive-toolbar .archive-tools { justify-content: space-between; gap: 6px 10px; margin-top: 8px; }
  :root[data-mode] .cosmic-theatre .archive-views a { padding-inline: 10px; }
  :root[data-mode] .cosmic-theatre .archive-filters > summary { font-size: 12px; }
  :root[data-mode] .cosmic-theatre .timeline-empty-board { min-height: 0; padding: 8px 0 26px; }
  :root[data-mode] .cosmic-theatre .stellar-empty { gap: 4px; }
  :root[data-mode] .cosmic-theatre .stellar-empty .stellar-illustration { width: 100px; height: 67px; }
  :root[data-mode] .cosmic-theatre .archive-entry { grid-template-columns: 30px minmax(0, 1fr) 68px; gap: 10px; min-height: 112px; padding: 14px 0; }
  :root[data-mode] .cosmic-theatre .archive-list::before { left: 14px; }
  :root[data-mode] .cosmic-theatre .archive-entry-number,
  :root[data-mode] .cosmic-theatre .archive-entry:first-child .archive-entry-number { grid-row: auto; width: 30px; height: 30px; font: 13px/30px var(--mono); }
  :root[data-mode] .cosmic-theatre .archive-entry > .archive-entry-copy,
  :root[data-mode] .cosmic-theatre .archive-entry:first-child > .archive-entry-copy { padding: 0 10px 0 0; }
  :root[data-mode] .cosmic-theatre .archive-entry h2,
  :root[data-mode] .cosmic-theatre .archive-entry:first-child h2 { font-size: 19px; }
  :root[data-mode] .cosmic-theatre .archive-entry p { font-size: 13px; }
  :root[data-mode] .cosmic-theatre .archive-entry-arrow { right: 0; top: 12px; font-size: 12px; }
  .cosmic-theatre .archive-entry-art { width: 68px; height: 68px; }
  .cosmic-theatre .archive-entry-orbit { width: 78px; height: 52px; }
  .cosmic-theatre .timeline-mobile-hint { display: block; color: var(--cosmic-canvas-muted); font: 12px/1.5 var(--sans); }
  :root[data-mode] .cosmic-theatre .reading-wrap:not(.about-wrap) { padding-top: 22px; }
  :root[data-mode] .cosmic-theatre .reading-wrap:not(.about-wrap) .reader-return { margin-bottom: 8px; }
  :root[data-mode] .cosmic-theatre .reading-wrap:not(.about-wrap) .memory-letter { padding-top: 14px; }
  :root[data-mode] .cosmic-theatre .reading-wrap:not(.about-wrap) .article-header::before { margin-bottom: 14px; }
  :root[data-mode] .cosmic-theatre .reading-wrap:not(.about-wrap) .article-header { margin-bottom: 18px; padding-bottom: 16px; }
  :root[data-mode] .cosmic-theatre .reading-wrap:not(.about-wrap) .article-header h1 { margin-bottom: 12px; }
  :root[data-mode] .cosmic-theatre .reading-wrap:not(.about-wrap) .article-summary { margin-bottom: 12px; }
  :root[data-mode] .cosmic-theatre .reading-wrap:not(.about-wrap) .article-byline { margin-top: 12px; }
  :root[data-mode] .cosmic-theatre .reading-wrap:not(.about-wrap) .reader-photo { margin-bottom: 22px; }
  :root[data-mode] .cosmic-theatre .reading-wrap:not(.about-wrap) .reading-layout { gap: 24px; }
}

/* Give an empty archive one composed scene instead of several floating elements. */
:root[data-mode] .cosmic-theatre .articles-canvas-wrap:has(.timeline-empty-board) .timeline-page-header { min-height: 0; margin-bottom: 24px; }
:root[data-mode] .cosmic-theatre .articles-canvas-wrap:has(.timeline-empty-board) .stellar-page-art { display: none; }
:root[data-mode] .cosmic-theatre .articles-canvas-wrap:has(.timeline-empty-board) .stellar-masthead h1 { padding-right: 0; }
:root[data-mode] .cosmic-theatre .articles-canvas-wrap:has(.timeline-empty-board) .archive-toolbar { gap: 12px 20px; justify-content: flex-start; }
:root[data-mode] .cosmic-theatre .articles-canvas-wrap:has(.timeline-empty-board) .archive-toolbar .timeline-search-bar { flex: 0 1 440px; }
:root[data-mode] .cosmic-theatre .articles-canvas-wrap:has(.timeline-empty-board) .archive-toolbar .archive-tools { flex: 0 1 auto; justify-content: flex-start; }
:root[data-mode] .cosmic-theatre .articles-canvas-wrap:has(.timeline-empty-board) .archive-toolbar .archive-tools:has(.archive-filters[open]) { flex-basis: 100%; }
:root[data-mode] .cosmic-theatre .articles-canvas-wrap .timeline-empty-board {
  display: block;
  min-height: 0;
  padding: 36px clamp(24px, 4.5vw, 64px);
  border-block: 1px solid color-mix(in srgb, var(--theatre-light) 24%, transparent);
  background: linear-gradient(110deg, color-mix(in srgb, var(--cosmic-solid) 45%, transparent), transparent 70%),
    radial-gradient(ellipse at 78% 50%, var(--theatre-wash), transparent 62%);
}
:root[data-mode] .cosmic-theatre .articles-canvas-wrap .stellar-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 38%);
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 4px 28px;
  width: 100%;
  text-align: left;
}
:root[data-mode] .cosmic-theatre .articles-canvas-wrap .stellar-empty .stellar-illustration {
  grid-column: 2;
  grid-row: 1 / 4;
  justify-self: center;
  width: min(100%, 300px);
  height: auto;
  color: var(--theatre-light);
  background: radial-gradient(ellipse, var(--theatre-wash), transparent 70%);
}
:root[data-mode] .cosmic-theatre .articles-canvas-wrap .stellar-empty h3 { grid-column: 1; grid-row: 1; align-self: end; font: 500 28px/1.45 var(--serif); }
:root[data-mode] .cosmic-theatre .articles-canvas-wrap .stellar-empty p { grid-column: 1; grid-row: 2; align-self: center; font-size: 15px; }
:root[data-mode] .cosmic-theatre .articles-canvas-wrap .stellar-empty .timeline-clear-btn {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  align-self: start;
  margin-top: 4px;
  padding: 0 15px;
  border: 1px solid color-mix(in srgb, var(--theatre-light) 38%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--theatre-light) 8%, transparent);
  font: 14px/1.4 var(--sans);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}
:root[data-mode] .cosmic-theatre .articles-canvas-wrap .stellar-empty .timeline-clear-btn:is(:hover, :focus-visible) { border-color: var(--theatre-light); background: color-mix(in srgb, var(--theatre-light) 15%, transparent); }
@media (max-width: 760px) {
  :root[data-mode] .cosmic-theatre .articles-canvas-wrap:has(.timeline-empty-board) .timeline-page-header { margin-bottom: 16px; }
  :root[data-mode] .cosmic-theatre .articles-canvas-wrap:has(.timeline-empty-board) .archive-views a { padding-inline: 7px; font-size: 12px; }
  :root[data-mode] .cosmic-theatre .articles-canvas-wrap .timeline-empty-board { padding: 14px 12px; }
  :root[data-mode] .cosmic-theatre .articles-canvas-wrap .stellar-empty { grid-template-columns: minmax(0, 1fr) 72px; gap: 2px 6px; }
  :root[data-mode] .cosmic-theatre .articles-canvas-wrap .stellar-empty .stellar-illustration { width: 72px; }
  :root[data-mode] .cosmic-theatre .articles-canvas-wrap .stellar-empty h3 { font-size: 21px; }
  :root[data-mode] .cosmic-theatre .articles-canvas-wrap .stellar-empty p { font-size: 13px; }
}
@media (max-width: 300px) {
  :root[data-mode] .cosmic-theatre .articles-canvas-wrap .stellar-empty { grid-template-columns: minmax(0, 1fr); }
  :root[data-mode] .cosmic-theatre .articles-canvas-wrap .stellar-empty .stellar-illustration { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cosmic-theatre *, .cosmic-theatre *::before, .cosmic-theatre *::after { scroll-behavior: auto; transition-duration: 0s; }
  .cosmic-theatre .planetary-sphere .planet-surface::before { animation: none; }
  .cosmic-theatre .theme-orb-surface { animation: none; }
  :root[data-mode] .cosmic-theatre .journal-directory a.planetary-tab::before,
  :root[data-mode] .cosmic-theatre .journal-directory a.planetary-tab > .planetary-sphere { transition: none; }
  .cosmic-theatre .planetary-sphere { transition: none; transform: translate(-50%, -50%) scale(var(--planet-scale, 1)) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-mode] .cosmic-theatre { --orbit-caption-surface: var(--cosmic-solid); --contact-surface: var(--cosmic-solid); }
  :root[data-mode] .cosmic-theatre :is(.journal-story-copy, .journal-story-lead .journal-story-copy, .stellar-project-caption, .folio-project .folio-project-content, .archive-entry > div, .journal-update > div, .activity-timeline-item .activity-card, .reading-sheet, .album-sheet, .reading-layout > .prose, .project-reading-content > .prose, .about-prose, .release-card, .update-card, .about-contact-card) {
    background: var(--cosmic-solid); border-radius: 8px;
  }
  :root[data-mode] .cosmic-theatre :is(.site-header, .cosmos-preferences, .project-outline, .article-toc, .timeline-search-input-wrap) { background: var(--cosmic-solid); }
  :root[data-mode] .cosmic-theatre .articles-canvas-wrap .timeline-empty-board { background: var(--cosmic-solid); }
}
@media (forced-colors: active) {
  .theatre-curtain, .theatre-singularity, .theatre-podium, .celestial-seed { display: none; }
  :root[data-mode] .cosmic-theatre { --cosmic-ink: CanvasText; --cosmic-muted: CanvasText; --cosmic-canvas-ink: CanvasText; --cosmic-canvas-muted: CanvasText; --theatre-light: Highlight; --theatre-veil: Canvas; }
  :root[data-mode] .cosmic-theatre :is(.main-nav a, .journal-directory a) { color: LinkText; border: 1px solid ButtonText; }
  :root[data-mode] .cosmic-theatre :is(.main-nav a, .journal-directory a)[aria-current], :root[data-mode] .cosmic-theatre .journal-directory a[aria-selected="true"] { outline: 2px solid Highlight; }
}
@media print {
  .theatre-curtain, .theatre-singularity, .theatre-podium, .celestial-seed { display: none; }
  .cosmic-theatre .about-emblem { display: none; }
  :root[data-mode] .cosmic-theatre { --cosmic-ink: #111; --cosmic-muted: #333; --cosmic-canvas-ink: #111; --cosmic-canvas-muted: #333; --cosmic-accent: #111; --orbit-caption-surface: none; --contact-surface: none; background: #fff; color: #111; }
  :root[data-mode] .cosmic-theatre .site-stage { padding-top: 0; }
  :root[data-mode] .cosmic-theatre :is(.journal-story-copy, .journal-story-lead .journal-story-copy, .stellar-project-caption, .folio-project .folio-project-content, .archive-entry > div, .reading-sheet, .reading-layout > .prose, .project-reading-content > .prose, .about-prose) { background: none; color: #111; text-shadow: none; }
  :root[data-mode] .cosmic-theatre .articles-canvas-wrap .timeline-empty-board { background: none; border-color: #777; }
  :root[data-mode] .cosmic-theatre .articles-canvas-wrap .stellar-empty .timeline-clear-btn { color: #111; background: none; border-color: #777; }
}