/* Doonvarra Head Observatory: page styles. Tokens first, then each act. */

:root {
  --sc-canvas:      #070a10;
  --sc-surface:     #0f141c;
  --sc-ink:         #eef1f5;
  --sc-ink-soft:    #a9b2bf;
  --sc-accent:      #ff4b3e;   /* the red torch */
  --sc-accent-ink:  #14060a;
  --sc-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --sc-font-mono:    "Instrument Sans", system-ui, sans-serif;
  --sc-shadow-color: 222 40% 3%;
  --sc-r-sm: 4px; --sc-r-md: 6px; --sc-r-lg: 10px;
  --sc-leading-body: 1.66;

  /* the lit room, before the switch. One hue for the accent, two lightnesses,
     because the page hard-cuts once from a lit ground to a dark one. */
  --room-canvas:   #f1ede6;
  --room-canvas-2: #faf7f1;
  --room-ink:      #171614;
  --room-ink-soft: #55514a;
  --room-accent:   #a8231b;
}
@media (max-width: 700px) {
  :root { --sc-t-4xl: clamp(2.5rem, 1.2rem + 7.2vw, 3.4rem); }
}

.sc-display { font-weight: 500; }
.sc-display--xl, .sc-display--lg { letter-spacing: -0.02em; }
.sc-lede { font-weight: 400; color: var(--sc-ink); }
.sc-body { font-size: var(--sc-t-base); }
b, strong { font-weight: 600; color: var(--sc-ink); }
figure { margin: 0; }
figcaption { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; margin-top: var(--sc-3); text-wrap: pretty; max-width: 52ch; }
img { width: 100%; height: auto; }

/* ------------------------------------------------------------ chrome --
   Only red light is allowed after dark, so the chrome is a torch: a wordmark,
   a readout of how long your eyes have had, and the one action. It carries
   its own opaque ground so it reads over whatever passes beneath it. */
.torch {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  height: 3rem; padding-inline: var(--sc-gutter);
  background: var(--room-canvas); color: var(--room-ink);
  font-size: var(--sc-t-sm);
  transition: background-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out);
}
html.is-night .torch { background: var(--sc-canvas); color: var(--sc-ink); }
.torch a { text-decoration: none; }
.torch__mark { font-family: var(--sc-font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em; white-space: nowrap; }
.torch__mark span { font-family: var(--sc-font-text); font-weight: 400; font-size: 0.78em; letter-spacing: 0.04em; text-transform: uppercase; margin-left: 0.35em; color: var(--room-ink-soft); }
html.is-night .torch__mark span { color: var(--sc-ink-soft); }
.torch__read { margin: 0; display: inline-flex; align-items: center; gap: 0.5em; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.torch__dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--room-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--room-accent) 18%, transparent); }
html.is-night .torch__dot { background: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 22%, transparent); }
.torch__cta { color: var(--room-accent); font-weight: 600; white-space: nowrap; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
html.is-night .torch__cta { color: var(--sc-accent); }
.torch__cta:hover { border-bottom-width: 2px; }
@media (max-width: 700px) {
  .torch__cta { display: none; }
  .torch__mark { line-height: 1.05; }
  .torch__mark span { display: block; margin-left: 0; font-size: 0.62rem; }
}

/* ---------------------------------------------------------- 1 · room --
   Type on a lit ground; depth from scale and one overlapping shape. A dark
   panel steps over it at p = 0.47: the lights going off. */
.room { --sc-p: 0; }
.room__stage {
  background: radial-gradient(70rem 42rem at 88% -10%, var(--room-canvas-2), transparent 62%), var(--room-canvas);
  color: var(--room-ink);
}
.room__lamp {
  position: absolute; top: -14vw; right: -10vw; width: 52vw; height: 52vw; max-width: 44rem; max-height: 44rem;
  border-radius: 50%; border: 1px solid color-mix(in oklab, var(--room-ink) 14%, transparent);
  background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--room-canvas-2) 70%, white), transparent 68%);
  pointer-events: none;
}
.room__lit .sc-lede { color: var(--room-ink-soft); max-width: 40ch; }
.room__lit .sc-display { text-wrap: balance; }
.room__dark {
  position: absolute; inset: 0; z-index: 3;
  background: var(--sc-canvas); color: var(--sc-ink);
  opacity: clamp(0, (var(--sc-p) - 0.44) * 60, 1);
}
.room__dark .sc-lede { color: var(--sc-ink-soft); }
.room__dark .sc-display--lg { margin-bottom: var(--sc-4); }
@media (max-width: 700px) {
  .room__lamp { top: -20vw; right: -30vw; width: 80vw; height: 80vw; }
}

/* ---------------------------------------------------------- 2 · path -- */
.path .sc-copy--trail .sc-lede { margin-top: var(--sc-4); }
@media (max-width: 860px) {
  .path .sc-copy--trail .sc-display--lg { font-size: var(--sc-t-2xl); }
}

/* ---------------------------------------------------------- 3 · lawn -- */
.lawn { padding-block: var(--sc-8) var(--sc-9); }
.lawn__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-8); align-items: center; }
.lawn__fig img { border-radius: var(--sc-r-md); }
.lawn__copy .sc-display { max-width: 18ch; }
@media (max-width: 860px) {
  .lawn__grid { grid-template-columns: 1fr; gap: var(--sc-6); }
  .lawn__fig { max-width: 26rem; }
}

/* ------------------------------------------------ 4 · twenty minutes --
   The drawn sky. Every star carries --m, the adaptation it needs; the stage
   publishes --a. With no script --a is 1 and the sky renders adapted. */
.dark__stage { background: #04060b; }
.sky { --a: 1; position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sky circle { fill: #e9edf6; opacity: calc(clamp(0, (var(--a) - var(--m)) * 10, 1) * var(--o)); }
.sky__glow { fill: none; stroke: #c6cdd9; stroke-width: 240; stroke-linecap: round; filter: url(#skyblur);
  opacity: calc(clamp(0, (var(--a) - var(--m)) * 6, 1) * 0.22); }
.sky__lane { fill: none; stroke: #04060b; stroke-width: calc(var(--w) * 1px); stroke-linecap: round; filter: url(#laneblur);
  opacity: calc(clamp(0, (var(--a) - var(--m)) * 6, 1) * 0.9); }
.sky__andromeda { fill: #d9dfe9; filter: url(#andblur); opacity: calc(clamp(0, (var(--a) - var(--m)) * 8, 1) * 0.5); }
.dark__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.dark__scrim--top { background: linear-gradient(to bottom right, color-mix(in oklab, #04060b 96%, transparent) 0%, color-mix(in oklab, #04060b 80%, transparent) 22%, transparent 48%); }
.dark__read {
  position: absolute; z-index: var(--sc-z-copy); left: var(--sc-gutter); top: calc(3rem + var(--sc-6));
  margin: 0; color: var(--sc-accent); font-family: var(--sc-font-display); font-weight: 500;
  display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 0.3em;
  line-height: 0.9; letter-spacing: -0.03em;
}
.dark__min { font-size: var(--sc-t-4xl); font-variant-numeric: tabular-nums; }
.dark__unit { font-size: var(--sc-t-xl); font-family: var(--sc-font-text); font-weight: 500; letter-spacing: 0; }
.dark__state { grid-column: 1 / -1; font-family: var(--sc-font-text); font-size: var(--sc-t-sm); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.6em; color: var(--sc-accent); }
.dark__copy .sc-lede { color: var(--sc-ink); max-width: 38ch; }
.dark__copy .sc-display--lg { max-width: 16ch; }
.dark__andro {
  position: absolute; z-index: var(--sc-z-copy); right: var(--sc-gutter); top: 27%; margin: 0;
  max-width: 22rem; padding: var(--sc-2) var(--sc-3);
  background: #04060b; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5;
  border-left: 1px solid var(--sc-accent);
}
.dark__phone {
  position: absolute; z-index: var(--sc-z-copy); right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem);
  appearance: none; border: 1px solid var(--sc-accent); background: #04060b; color: var(--sc-accent);
  border-radius: var(--sc-r-md); padding: 0.6em 1em; font-weight: 600; font-size: var(--sc-t-sm); cursor: pointer;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out), transform 100ms var(--sc-ease-out);
}
.dark__phone:hover { background: var(--sc-accent); color: var(--sc-accent-ink); }
.dark__phone:active { transform: scale(0.97); }
.dark__flash { position: absolute; inset: 0; z-index: 4; background: #fbf8f2; opacity: 0; pointer-events: none; transition: opacity 420ms var(--sc-ease-out); }
.dark__flash.is-on { opacity: 1; transition-duration: 60ms; }
@media (max-width: 860px) {
  .dark__min { font-size: var(--sc-t-3xl); }
  .dark__andro { top: 24%; max-width: min(18rem, 56vw); font-size: var(--sc-t-xs); }
  .dark__phone { bottom: auto; top: calc(3rem + var(--sc-6)); right: var(--sc-gutter); }
  .dark__copy .sc-display--lg { font-size: var(--sc-t-2xl); }
}

/* ----------------------------------------------------------- 5 · eye -- */
.eye { padding-top: var(--sc-8); }
.eye__lead { max-width: 60rem; margin-bottom: var(--sc-7); }
.eye__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-6); }
.eye__img img { border-radius: var(--sc-r-md); }
.eye__fig figcaption b { color: var(--sc-ink); }
@media (max-width: 760px) { .eye__pair { grid-template-columns: 1fr; } }

.ledger { margin-top: var(--sc-10); }
.ledger__head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sc-7); align-items: end; margin-bottom: var(--sc-7); }
.ledger__fig { max-width: 22rem; }
.ledger__fig img { border-radius: var(--sc-r-md); }
.ledger__list { margin: 0; border-top: 1px solid var(--sc-hairline-strong); }
.ledger__row { display: grid; grid-template-columns: 15rem 13rem minmax(0, 1fr); gap: var(--sc-5); padding: var(--sc-5) 0; border-bottom: 1px solid var(--sc-hairline); align-items: baseline; }
.ledger__row dt { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; }
.ledger__row dd { margin: 0; }
.ledger__when { color: var(--sc-accent); font-weight: 500; font-size: var(--sc-t-sm); letter-spacing: 0.04em; text-transform: uppercase; }
.ledger__eye { color: var(--sc-ink-soft); max-width: 58ch; }
.ledger__true { display: flex; align-items: center; gap: var(--sc-4); margin-top: var(--sc-4); font-size: var(--sc-t-sm); color: var(--sc-ink); }
.ledger__true img { width: 5.5rem; height: 5.5rem; flex: none; border-radius: 50%; border: 1px solid var(--sc-hairline-strong); }
.ledger__cta { margin: var(--sc-7) 0 0; }
.cta {
  display: inline-block; background: var(--sc-accent); color: var(--sc-accent-ink); text-decoration: none;
  font-weight: 600; padding: 0.85em 1.4em; border-radius: var(--sc-r-md); white-space: nowrap;
  transition: transform 120ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.cta:hover { background: color-mix(in oklab, var(--sc-accent) 88%, white); }
.cta:active { transform: translateY(1px); }
@media (max-width: 900px) {
  .ledger__head { grid-template-columns: 1fr; gap: var(--sc-5); }
  .ledger__fig { max-width: 16rem; }
  .ledger__row { grid-template-columns: 1fr; gap: var(--sc-2); }
}

/* --------------------------------------------------------- 6 · cloud -- */
.cloud__stage { background: #0b0e15; }
.cloud__bed { position: absolute; inset: -80px 0; display: block; }
.cloud__bed img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.cloud__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 97%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 88%, transparent) 34%, color-mix(in oklab, var(--sc-canvas) 52%, transparent) 60%, transparent 82%); }
.cloud__copy .sc-display--lg { max-width: 14ch; }
.cloud__copy .sc-lede { max-width: 40ch; }
.cloud__copy .sc-display--md { font-style: italic; font-weight: 400; max-width: 22ch; }
@media (max-width: 860px) { .cloud__copy .sc-display--lg { font-size: var(--sc-t-2xl); } }

/* ---------------------------------------------------------- 7 · home -- */
.home { padding-top: var(--sc-8); }
.promise { max-width: 60rem; }
.promise__list { list-style: none; margin: var(--sc-6) 0 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.promise__list li { padding: var(--sc-4) 0; border-bottom: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); max-width: 62ch; text-wrap: pretty; }
.promise__list b { display: block; color: var(--sc-ink); margin-bottom: 0.15em; }

.orla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-8); align-items: start; margin-top: var(--sc-10); }
.orla__media { display: grid; gap: var(--sc-5); }
.orla__media img { border-radius: var(--sc-r-md); }
.orla__copy { position: sticky; top: calc(3rem + var(--sc-6)); }
.orla__copy .sc-lede { font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-xl); }
@media (max-width: 860px) {
  .orla { grid-template-columns: 1fr; gap: var(--sc-6); }
  .orla__copy { position: static; }
  .orla__media { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 520px) { .orla__media { grid-template-columns: 1fr; max-width: 22rem; } }

.book { margin-top: var(--sc-10); padding-top: var(--sc-7); border-top: 1px solid var(--sc-hairline-strong); scroll-margin-top: 3rem; }
.book__lead { max-width: 50rem; margin-bottom: var(--sc-7); }
.book__body { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--sc-8); align-items: start; }
.facts { margin: 0; border-top: 1px solid var(--sc-hairline); }
.facts__row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--sc-5); padding: var(--sc-4) 0; border-bottom: 1px solid var(--sc-hairline); }
.facts__row dt { color: var(--sc-accent); font-weight: 500; font-size: var(--sc-t-sm); letter-spacing: 0.04em; text-transform: uppercase; padding-top: 0.25em; }
.facts__row dd { margin: 0; color: var(--sc-ink-soft); max-width: 58ch; text-wrap: pretty; }
.book__fig { max-width: 24rem; }
.book__fig img { border-radius: var(--sc-r-md); }
@media (max-width: 860px) {
  .book__body { grid-template-columns: 1fr; gap: var(--sc-6); }
  .book__fig { max-width: 20rem; }
}
@media (max-width: 520px) { .facts__row { grid-template-columns: 1fr; gap: var(--sc-1); } }

.lend { margin-top: var(--sc-11); max-width: 58rem; }
.lend__line { font-size: var(--sc-t-3xl); font-style: italic; font-weight: 400; line-height: 1.04; letter-spacing: -0.015em; max-width: 20ch; }
.lend__who { margin: var(--sc-5) 0 0; color: var(--sc-accent); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--sc-t-sm); }
.lend__mail { margin: var(--sc-7) 0 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; letter-spacing: -0.01em; }
.lend__mail span { display: block; font-family: var(--sc-font-text); font-size: var(--sc-t-base); font-weight: 400; color: var(--sc-ink-soft); letter-spacing: 0; margin-top: var(--sc-2); }
.foot { margin-top: var(--sc-10); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.foot p { margin: 0; }
@media (max-width: 700px) {
  .lend { margin-top: var(--sc-10); }
  .lend__line { font-size: var(--sc-t-2xl); }
}

/* ------------------------------------------------ reduced motion ------ */
@media (prefers-reduced-motion: reduce) {
  .dark__flash { display: none; }
  .torch { transition: none; }
}

/* --------------------------------------------- no script, print -------
   The engine lays every act out in flow; these two panels of ours were
   absolute and need the same treatment so their copy sits in reading order. */
@media (scripting: none), print {
  .room__dark { position: relative; inset: auto; opacity: 1; padding-block: var(--sc-7); margin-top: var(--sc-7); }
  .room__lamp { display: none; }
  .torch { position: static; }
  .dark__read, .dark__andro, .dark__phone { position: relative; inset: auto; margin: var(--sc-5) var(--sc-gutter); }
  .sky { position: relative; height: 56vh; }
  .dark__scrim, .dark__stage > .sc-scrim { display: none; }
  .cloud__bed { position: relative; inset: auto; height: 50vh; }
  .cloud__scrim { display: none; }
  .orla__copy { position: static; }
}