/* Doonvarra Head Observatory — page styles over the scrollcraft floor. */

:root {
  --sc-canvas:      #06080d;
  --sc-surface:     #0c1119;
  --sc-ink:         #f1ece1;
  --sc-ink-soft:    #ada495;
  --sc-accent:      #e0512f;   /* torch red: the only light allowed after dark */
  --sc-accent-ink:  #140604;
  --sc-font-display: "Newsreader", Georgia, serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist", system-ui, sans-serif;
}

@media (max-width: 700px) {
  :root { --sc-t-4xl: clamp(2.5rem, 1.3rem + 8vw, 3.6rem); }
}

/* Newsreader at display sizes wants its optical size and a light hand. */
.sc-display { font-optical-sizing: auto; font-weight: 340; letter-spacing: -0.02em; }
.sc-display--md { font-weight: 400; }

/* ------------------------------------------------------ the folio rail -- */
.folio {
  position: fixed;
  top: 50%; left: clamp(0.9rem, 2vw, 2rem);
  translate: 0 -50%;
  z-index: var(--sc-z-chrome);
}
.folio__list { list-style: none; margin: 0; padding: var(--sc-3) var(--sc-4); display: grid; gap: var(--sc-4); background: #06080d; border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md); }
.folio a {
  display: flex; align-items: center; gap: var(--sc-3);
  font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--sc-ink-soft); text-decoration: none;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.folio a::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in oklab, var(--sc-ink-soft) 45%, transparent);
  transition: background var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
.folio a:hover { color: var(--sc-ink); }
.folio a[aria-current="true"] { color: var(--sc-ink); }
.folio a[aria-current="true"]::before { background: var(--sc-accent); transform: scale(1.6); }
@media (max-width: 900px) { .folio { display: none; } }

/* -------------------------------------------------------- title page ---- */
.titlepage {
  min-height: 100svh;
  display: flex; align-items: center;
  background:
    radial-gradient(90rem 60rem at 78% -12%, #0a1020 0%, transparent 60%),
    var(--sc-canvas);
}
.titlepage__inner { max-width: 56rem; padding-block: var(--sc-9); }
.titlepage__meta { display: flex; align-items: center; gap: var(--sc-3); }
.redlight {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sc-accent);
  box-shadow: 0 0 10px 1px color-mix(in oklab, var(--sc-accent) 55%, transparent);
}
.titlepage .sc-lede { max-width: 40ch; }
.titlepage__go { margin: 0; }
.go {
  color: var(--sc-ink);
  font-weight: 500;
  text-decoration-color: color-mix(in oklab, var(--sc-accent) 70%, transparent);
  text-decoration-thickness: 2px;
  transition: text-decoration-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.go:hover { color: var(--sc-accent); text-decoration-color: var(--sc-accent); }
.go:active { transform: translateY(1px); }

/* --------------------------------------------------------- chapters ----- */
.chapter { background: var(--sc-canvas); }
.chapter--dark  { background: #070a11; }
.chapter--night { background: #080b12; }
.chapter--cloud { background: #0b0e14; }
.chapter--orla  { background: #070a10; }
.chapter--book  { background: #05070b; }

.chapter { padding-block: var(--sc-section); }
.chapter__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.chapter__grid--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.chapter__grid--rev > .chapter__text { order: 2; }
.chapter__grid--rev > .fig { order: 1; }
.chapter__grid + .chapter__grid,
.chapter__grid + .pair,
.sc-wrap + .sc-wrap { margin-top: clamp(3rem, 7vw, 6rem); }
@media (max-width: 820px) {
  .chapter__grid, .chapter__grid--rev { grid-template-columns: 1fr; }
  .chapter__grid--rev > .chapter__text { order: 1; }
  .chapter__grid--rev > .fig { order: 2; }
}

.pull p {
  font-family: var(--sc-font-display);
  font-style: italic;
  font-size: var(--sc-t-xl);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--sc-ink);
  text-wrap: balance;
  margin: 0;
}
.pull { margin: 0; padding-left: var(--sc-5); border-left: 1px solid color-mix(in oklab, var(--sc-accent) 55%, transparent); }

.plainlist { list-style: none; margin: 0; padding: 0; max-width: var(--sc-measure); }
.plainlist li {
  padding-block: var(--sc-3);
  border-top: 1px solid var(--sc-hairline);
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.plainlist li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.plainlist strong { color: var(--sc-ink); font-weight: 500; }

/* ---------------------------------------------------------- figures ----- */
.fig { margin: 0; }
.fig__frame {
  overflow: clip;
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e2), var(--sc-edge);
}
.fig__frame img { width: 100%; height: auto; }
.fig__frame--tall { aspect-ratio: 2 / 3; }
.fig__frame--tall img, .fig__frame--wide img { height: 112%; object-fit: cover; }
.fig__frame--wide { aspect-ratio: 21 / 9; }
.fig__cap {
  margin-top: var(--sc-3);
  font-size: var(--sc-t-sm);
  line-height: 1.55;
  color: var(--sc-ink-soft);
  max-width: 52ch;
  text-wrap: pretty;
}
.fig--wide { margin-top: clamp(2.5rem, 6vw, 5rem); }
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.pair .fig:last-child { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
@media (max-width: 700px) {
  .pair { grid-template-columns: 1fr; }
  .pair .fig:last-child { margin-top: 0; }
}

/* -------------------------------------------- the twenty minutes act ---- */
.starsact { background: #020307; }
.starsact__stage { background: #020307; }
.starsact__field {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.starsact__field circle {
  fill: #e9edf5;
  opacity: calc(clamp(0, (var(--sc-p, 1) - var(--t)) * 22, 1) * var(--b, 1));
}
.starsact__field circle.bandstar { fill: #f4f0e4; }
.starsact__band {
  opacity: calc(clamp(0, (var(--sc-p, 1) - 0.58) * 4, 1) * 0.9);
}
.starsact__clock {
  position: absolute;
  top: clamp(1.25rem, 4vh, 3rem); right: var(--sc-gutter);
  z-index: var(--sc-z-copy);
  margin: 0;
  color: var(--sc-ink-soft);
}
.starsact__clock span { color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.starsact__line { max-width: min(40rem, 76vw); }
.starsact__payoff { max-width: min(44rem, 76vw); }
.starsact__payoff .sc-display { margin-bottom: var(--sc-5); }
.starsact__payoff .sc-body { max-width: 46ch; }

@media (prefers-reduced-motion: reduce) {
  .starsact__field circle { opacity: var(--b, 1); }
  .starsact__band { opacity: 0.9; }
}

/* ------------------------------------------------------------- colophon - */
.colophon { padding-bottom: 0; }
.facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 72rem;
}
.facts div { border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-3); }
.facts dt {
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin-bottom: var(--sc-2);
}
.facts dd { margin: 0; color: var(--sc-ink); font-size: var(--sc-t-sm); line-height: 1.6; text-wrap: pretty; }
.colophon__contact { max-width: 46ch; }
.colophon__last { color: var(--sc-ink); margin-top: var(--sc-8); }
.foot {
  margin-top: var(--sc-9);
  padding-block: var(--sc-6);
  border-top: 1px solid var(--sc-hairline);
}
.foot p { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 60ch; }

/* After the pin: reduced padding, the flow section starts near p = 0. */
.chapter--afterdark { background: #04060b; padding-block: var(--sc-7); }
.afterdark__note { max-width: 46ch; margin-inline: auto; text-align: center; }