/* Two starry skies: midnight by default, a soft sunrise as an alternative. */
html:root {
  color-scheme: dark;
  --paper: #0B1633;
  --paper-2: #142342;
  --paper-3: #1C2E50;
  --paper-edge: #3A4B69;
  --ink: #FFF3DC;
  --ink-soft: #DFDFEA;
  --ink-mute: #B6BED3;
  --ink-faint: #8D9AB5;
  --oxblood: #F0BE80;
  --oxblood-2: #E5AA64;
  --magenta: #F2A2B7;
  --magenta-deep: #FFC0CE;
  --magenta-soft: #F4BCCB;
  --magenta-wash: #2B2947;
  --sage: #BBC5A0;
}
html:root body {
  min-height: 100vh;
  background-color: var(--paper);
  background-image: url('assets/stars.svg'),
    radial-gradient(ellipse at 80% 12%, #23365B80, transparent 48%),
    radial-gradient(ellipse at 5% 65%, #33315A55, transparent 45%);
  background-size: 960px 960px, 100% 100%, 100% 100%;
}
html:root .announce { background: #080F24; color: var(--ink-soft); }
html:root .band {
  background: linear-gradient(120deg, #182A4Bdd, #252542dd);
  border-block: 1px solid var(--paper-edge);
}
html:root .band .signup input {
  background: #0B1633;
  border-color: var(--paper-edge);
}
html:root .btn-primary {
  color: #17213A;
}
html:root ::selection {
  background: var(--magenta-soft);
  color: #0B1633;
}

/* The alternative retains the cream lettering and pink accents. */
html:not([data-theme="dark"]) {
  --paper: #101D38;
  --paper-2: #202F49;
  --paper-3: #293A54;
  --paper-edge: #65718B;
  --ink-soft: #EEE7EC;
  --ink-mute: #CED2E0;
}
html body { position: relative; isolation: isolate; }
/* Two sparse layers brighten at different times, behind all page content. */
html body::before, html body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 960px 960px;
  animation: star-glimmer 9s ease-in-out infinite;
}
html body::before { background-image: url('assets/stars-glimmer-a.svg'); }
html body::after {
  background-image: url('assets/stars-glimmer-b.svg');
  animation-duration: 13s;
  animation-delay: -6s;
}
@keyframes star-glimmer {
  0%, 45%, 100% { opacity: .12; }
  65% { opacity: .7; }
  82% { opacity: .3; }
}
html:root .band p { color: var(--ink-soft); }
html:root .band .fineprint { color: var(--ink-mute); }
html:root .cd-seg { color: var(--ink-mute); }
html:root .cd-seg b { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  html body::before, html body::after { animation: none; opacity: .5; }
}


/* One continuous sky across all sections. */
html:not([data-theme="dark"]) body {
  background-image: url('assets/stars.svg'), var(--sunrise-gradient, linear-gradient(#0B1633, #F6DCC5 60%, #CE702A));
  background-size: 960px 960px, 100% 100%;
}
html:root .intro, html:root .columns, html:root .books,
html:root .about, html:root .band, html:root footer.ft,
html:root .ft-top, html:root header.nav { border: 0; }
html:not([data-theme="dark"]) .band,
html:not([data-theme="dark"]) footer.ft { background: transparent; }
html:root header.nav {
  background: var(--nav-sky, #0B1633);
  transition: none;
}
html:root .band h2 { color: var(--ink); }
html:root .band .signup input { background: #202E48; color: #FFF3DC; }
html:root .band .signup input::placeholder { color: #C5CCDD; opacity: 1; }
html:root .fineprint { font-size: 11px !important; line-height: 1.45; }
/* Shared navigation layout for every public page. */
@media (max-width:1120px) {
  html:root .menu { display:none; }
  html:root .burger { display:flex; }
}
@media (max-width:600px) {
  html:root .nav-inner { height:auto; min-height:74px; flex-wrap:wrap; gap:12px; padding-top:14px; padding-bottom:14px; }
  html:root .nav-actions { gap:12px; }
  html:root .brand .word { font-size:24px; }
}
html:root .contact-aside { background:#142342; }
html:root .contact-aside .plain { color:#F5EDF0; }
html:root .aside-socials a:hover { background:#FFF3DC; color:#17223A; }
html:root :focus-visible { outline:2px solid var(--sky-accent, #F2A2B7); outline-offset:4px; }
html:root .band .signup input,
html:root .band input[type="email"] {
  background: #0B1633;
  border: 1.5px solid color-mix(in oklch, #FFF3DC 55%, transparent);
  color: #FFF3DC;
  box-shadow: none;
}
html:root .band input[type="email"]::placeholder { color: #C5CCDD; opacity: 1; }
html:root .band input[type="email"]:focus {
  background: #0B1633;
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--magenta) 24%, transparent);
}
html:not([data-theme="dark"]) .band input[type="email"] {
  background: #0B1633;
  border-color: rgba(255,243,220,.55);
  color: #FFF3DC;
}
html:not([data-theme="dark"]) .band input[type="email"]::placeholder { color: #C5CCDD; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html:root .eyebrow { color: var(--sky-accent, var(--magenta)); }
html:root .btn-outline:hover, html:root .theme-toggle:hover, html:root .socials a:hover { color: var(--sky-on-ink, var(--paper)); }

/* Canvas replaces the repeating stars only after it is ready. */
.star-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
html.has-star-field body::before, html.has-star-field body::after { display: none; }
html.has-star-field body {
  background-image: radial-gradient(ellipse at 80% 12%, #23365B80, transparent 48%),
    radial-gradient(ellipse at 5% 65%, #33315A55, transparent 45%);
  background-size: 100% 100%;
}
html.has-star-field:not([data-theme="dark"]) body {
  background-image: var(--sunrise-gradient, linear-gradient(#0B1633, #F6DCC5 60%, #CE702A));
}

/* A single navy-to-purple sky, with no separate newsletter panel. */
html[data-theme="dark"] body {
  background-image: url('assets/stars.svg'), var(--night-gradient, linear-gradient(#0B1633, #402250));
  background-size: 960px 960px, 100% 100%;
}
html.has-star-field[data-theme="dark"] body {
  background-image: var(--night-gradient, linear-gradient(#0B1633, #402250));
  background-size: 100% 100%;
}
html[data-theme="dark"] .band, html[data-theme="dark"] footer.ft { background: transparent; }

/* Warm star spirit cursor, with a tiny fading trail. */
.magic-cursor, .cursor-spark { position: fixed; pointer-events: none; z-index: 10000; }
.magic-cursor { display: none; width: 16px; height: 16px; margin: -8px; border-radius: 50%;
  background: radial-gradient(circle, #FFFDEE 0 8%, #FFE6A8 13%, #FFC16699 25%, #F58C3533 44%, transparent 70%);
  filter: drop-shadow(0 0 3px #FFCA7380);
  animation: cursor-shimmer 1.3s ease-in-out infinite; }
@media (hover: hover) and (pointer: fine) {
  html.magic-pointer, html.magic-pointer * { cursor: none !important; }
  .magic-cursor.visible { display: block; }
}
.cursor-spark { width: 2px; height: 2px; border-radius: 50%; background: #FFEAB3;
  box-shadow: 0 0 3px #FFAF50; animation: spark-fade .65s ease-out forwards; }
@keyframes cursor-shimmer {
  0%, 100% { transform: scale(.85); opacity: .85; }
  28%, 65% { transform: scale(1.12); opacity: 1; }
  45% { transform: scale(.92); opacity: .9; }
}
@keyframes spark-fade { to { transform: translateY(14px) scale(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .magic-cursor { animation: none; }
  .cursor-spark { display: none; }
}