/* A viewport canvas covers every page length without a giant bitmap or tiling. */
:root {
  --starfic-sky-color: #080c15;
  --starfic-star-color: 224, 235, 255;
  --starfic-word-color: 242, 247, 255;
  --starfic-star-cool: 187, 218, 255;
  --starfic-star-warm: 255, 226, 193;
  --starfic-nebula-blue: 45, 87, 170;
  --starfic-nebula-violet: 105, 55, 155;
}
html[data-mode='light'] {
  --starfic-sky-color: #f4f7fc;
  --starfic-star-color: 49, 68, 100;
  --starfic-word-color: 28, 46, 75;
  --starfic-star-cool: 49, 86, 132;
  --starfic-star-warm: 120, 87, 58;
  --starfic-nebula-blue: 120, 158, 215;
  --starfic-nebula-violet: 174, 142, 201;
}
html body.site-bg {
  isolation: isolate;
  min-width: 0;
  background: var(--starfic-sky-color) !important;
}
#starfic-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}
body #site.site {
  z-index: 1;
  background: transparent !important;
  box-shadow: none;
}
body #site::before,
body #site::after,
body .main__background,
body .header-background {
  display: none !important;
}
body .main,
body .footer,
body .footer::before,
body .footer::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
/* Keep animated points out of long-form text without adding layout space. */
body.single-fcn_chapter .chapter__content {
  background: var(--starfic-sky-color);
  box-shadow: 0 0 24px 18px var(--starfic-sky-color);
}
/* Keep one compact, responsive header on Home, Library, Store, and reader pages. */
body .header.starfic-celestial-header {
  display: grid;
  place-items: center;
  height: clamp(106px, 13vw, 154px) !important;
  margin: 0;
  padding: 0 16px;
  background: transparent !important;
  box-shadow: none;
  overflow: hidden;
  contain: layout style;
}
body .header.starfic-celestial-header::before,
body .header.starfic-celestial-header::after { display: none; }
.starfic-wordmark-heading {
  width: min(100%, 720px);
  margin: 0;
  padding: 0;
  line-height: 1;
}
.starfic-wordmark {
  display: grid;
  position: relative;
  place-items: center;
  width: 100%;
  height: clamp(90px, 11.5vw, 134px);
  color: rgb(var(--starfic-word-color));
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.starfic-wordmark:focus-visible {
  outline: 1px solid var(--starfic-accent);
  outline-offset: -3px;
  border-radius: 5px;
}
.starfic-wordmark-fallback {
  font: 700 clamp(48px, 10vw, 108px)/1 Georgia, 'Times New Roman', serif;
  letter-spacing: -.035em;
  text-shadow: none;
}
.starfic-wordmark-canvas {
  position: absolute;
  inset: -18px -24px;
  width: calc(100% + 48px);
  height: calc(100% + 36px);
  pointer-events: none;
}
.starfic-wordmark.is-rendered .starfic-wordmark-fallback { visibility: hidden; }
@media (max-width: 767px) {
  body .header.starfic-celestial-header {
    height: clamp(72px, 14vw, 106px) !important;
  }
  .starfic-wordmark {
    height: clamp(64px, 13vw, 98px);
  }
}
/* Fullscreen reading should keep Fictioneer's explicit distraction-free behavior. */
:is(:fullscreen, :-webkit-full-screen) .starfic-celestial-header { display: none !important; }
@media print {
  #starfic-sky, .starfic-celestial-header { display: none !important; }
  body.site-bg { background: #fff !important; }
}