/* Doonvarra Head Observatory
   A printed feature that starts in the reader's lit room and gets darker,
   chapter by chapter, until only red light is left. Each chapter paints its
   own ground (hard cuts, no drift). One hue of red for the accent, in two
   lightnesses: deep on paper, pale on every dark ground. */

:root {
  --sc-canvas:     #06070b;
  --sc-surface:    #101219;
  --sc-ink:        #f1e4e0;
  --sc-ink-soft:   #c9aba5;
  --sc-accent:     #ff8a7e;
  --sc-accent-ink: #1a0806;
  --sc-font-display: "Newsreader", Georgia, serif;
  --sc-font-text:    "Newsreader", Georgia, serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --sc-t-base: clamp(1.06rem, 1rem + 0.25vw, 1.2rem);
  --sc-leading-body: 1.6;
  --laser: #6cf59a;
  --lamp: #ff3b2f;
}
@media (max-width: 700px) {
  :root { --sc-t-4xl: clamp(2.6rem, 1.2rem + 7vw, 3.6rem); --sc-t-3xl: clamp(2.2rem, 1.4rem + 5vw, 3rem); }
}

/* ------------------------------------------------------------ grounds -- */
.tone-paper {
  --sc-canvas: #f0efeb; --sc-surface: #e5e3dd;
  --sc-ink: #131419; --sc-ink-soft: #474952;
  --sc-accent: #a3231b; --sc-accent-ink: #ffffff;
  --sc-shadow-color: 40 8% 30%;
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.7);
}
.tone-dusk {
  --sc-canvas: #1a2130; --sc-surface: #232c3e;
  --sc-ink: #eef1f6; --sc-ink-soft: #b7bfcd;
}
.tone-slate {
  --sc-canvas: #363c45; --sc-surface: #414852;
  --sc-ink: #f4f4f2; --sc-ink-soft: #d0d4da;
}
.tone-night { --sc-canvas: #05060b; }
.tone-ember { --sc-canvas: #0d0909; --sc-surface: #1a1212; }
.chap {
  position: relative;
  background: var(--sc-canvas);
  color: var(--sc-ink);
}
.tone-night, .tone-ember { letter-spacing: 0.004em; }
.tone-night .sc-body, .tone-ember .sc-body, .tone-dusk .sc-body, .tone-slate .sc-body { line-height: 1.66; }

/* ----------------------------------------------------------- type ------ */
.sc-display { font-weight: 500; letter-spacing: -0.022em; line-height: 1.02; }
.sc-display--xl { letter-spacing: -0.03em; line-height: 0.96; }
.sc-body { font-size: var(--sc-t-base); }
.sc-lede { font-size: var(--sc-t-lg); line-height: 1.42; letter-spacing: -0.008em; }
.cap {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--sc-ink-soft);
  margin: var(--sc-3) 0 0;
  max-width: 60ch;
}
.cap strong { font-weight: 500; color: var(--sc-ink); }
.pull { margin: 0; }
.pull p {
  font-family: var(--sc-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--sc-t-xl);
  line-height: 1.24;
  letter-spacing: -0.012em;
  margin: 0;
  max-width: 28ch;
  text-wrap: balance;
}
.pull footer {
  margin-top: var(--sc-3);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft);
}

/* The one action, set as a line of running text everywhere it appears. */
.cta {
  display: inline-block;
  font-weight: 500;
  color: var(--sc-ink);
  text-decoration: underline;
  text-decoration-color: var(--sc-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.28em;
  transition: color 160ms var(--sc-ease-out), text-decoration-color 160ms var(--sc-ease-out);
}
.cta::after { content: " \2192"; }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { color: var(--sc-accent); }
}
.cta:active { transform: translateY(1px); }

/* ----------------------------------------------------------- folio ----- */
.folio {
  position: fixed; z-index: var(--sc-z-chrome);
  left: clamp(0.9rem, 1.6vw, 1.6rem); top: 50%;
  margin: 0;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  display: flex; gap: var(--sc-4);
  padding: var(--sc-3) var(--sc-2);
  border-radius: var(--sc-r-sm);
  font-family: var(--sc-font-mono); font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: #05060b; color: #e7d6d1;
  transition: background-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out);
}
.folio[data-tone="light"] { background: #f0efeb; color: #2a2c33; }
.folio__mark { opacity: 0.8; }
.folio__here { color: inherit; }
@media (max-width: 1099px) { .folio { display: none; } }

/* ----------------------------------------------------------- I title --- */
.title {
  min-height: 100vh; min-height: 100svh;
  display: grid; align-content: end;
  padding-block: clamp(3rem, 8vh, 6rem) clamp(3rem, 9vh, 7rem);
  background:
    radial-gradient(70rem 42rem at 8% -6%, #fbfaf7 0%, rgb(251 250 247 / 0) 62%),
    var(--sc-canvas);
}
.title__grid { display: grid; gap: var(--sc-8); }
.title__plate {
  width: clamp(11rem, 24vw, 19rem); height: auto;
  justify-self: end;
  fill: none; stroke: var(--sc-ink); stroke-width: 1.4;
  stroke-linejoin: round;
}
.title__horizon { stroke-width: 1; opacity: 0.6; }
.title__h1 { max-width: 12ch; }
.title__h1-2 { display: block; font-style: italic; font-weight: 400; }
.title__lede { color: var(--sc-ink-soft); max-width: 34ch; }
.title__wry {
  font-family: var(--sc-font-display); font-size: var(--sc-t-xl);
  line-height: 1.25; letter-spacing: -0.012em;
  max-width: 26ch; margin: 0; text-wrap: balance;
}
.title__copy > .title__lede { margin-top: var(--sc-6); }
.title__copy > .title__wry { margin-top: var(--sc-5); }
.title__copy > .title__cta { margin-top: var(--sc-6); font-size: var(--sc-t-lg); }
.title__cta { margin: 0; }

/* ----------------------------------------------------------- II orla --- */
.orla { padding-block: var(--sc-section); }
.orla__grid { display: grid; gap: var(--sc-7); align-items: start; }
@media (min-width: 861px) {
  .orla__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sc-9); align-items: center; }
}
.orla__fig { margin: 0; max-width: 30rem; }
.orla__frame { aspect-ratio: 2 / 3; overflow: hidden; border-radius: 3px; box-shadow: var(--sc-e2); background: #2a0b08; }
.orla__frame img { width: 100%; height: 116%; max-width: none; object-fit: cover; margin-top: -8%; }
.orla__copy .pull { margin-top: var(--sc-6); }
.orla__copy .pull p { font-size: var(--sc-t-xl); line-height: 1.2; max-width: 26ch; }
.orla__copy .pull + .sc-body { margin-top: var(--sc-6); }

/* ----------------------------------------------------------- III weather */
.weather { padding-block: var(--sc-section); }
.weather__grid { display: grid; gap: var(--sc-7); }
@media (min-width: 861px) {
  .weather__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sc-8); align-items: center; }
  .weather__quote { grid-column: 1 / -1; }
}
.bulletin { margin: var(--sc-6) 0 0; border-top: 1px solid var(--sc-hairline-strong); }
.bulletin > div {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--sc-4);
  padding-block: var(--sc-4);
  border-bottom: 1px solid var(--sc-hairline-strong);
}
.bulletin dt {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sc-ink); padding-top: 0.3em;
}
.bulletin dd { margin: 0; color: var(--sc-ink-soft); }
@media (max-width: 520px) {
  .bulletin > div { grid-template-columns: 1fr; gap: var(--sc-1); }
}
.weather__fig { margin: 0; }
.weather__stack { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 3px; box-shadow: var(--sc-e3); background: #2b3038; }
.weather__stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.weather__quote { margin-top: var(--sc-8); }
.weather__quote .sc-display { max-width: 17ch; font-style: italic; font-weight: 400; }
.weather__sign { margin: var(--sc-6) 0 0; max-width: 52ch; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.5; }
.weather__sign .cta { margin-top: var(--sc-3); }

/* ----------------------------------------------------------- IV dark --- */
.dark {
  min-height: 118vh; min-height: 118svh;
  display: grid; align-content: end;
  padding-block: var(--sc-10) clamp(4rem, 14vh, 9rem);
}
.dark__copy { max-width: 46rem; margin-left: auto; }
.torch {
  display: block; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #ffb3a8 0 18%, #e2372b 42%, rgb(226 55 43 / 0.25) 62%, rgb(226 55 43 / 0) 72%);
}
.dark__h {
  font-family: var(--sc-font-mono); font-weight: 400;
  font-size: var(--sc-t-sm); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.sc-stack > .dark__h { margin-top: var(--sc-6); }
.pull--dark p { font-size: var(--sc-t-2xl); line-height: 1.14; max-width: 23ch; }

/* ----------------------------------------------------------- V twenty -- */
.twenty__stage { background: var(--sc-canvas); display: grid; }
.sky { position: relative; overflow: hidden; container-type: size; background: #04050a; }
.sky__square {
  position: absolute; left: 50%; bottom: 0;
  width: min(100cqw, 100cqh); aspect-ratio: 1;
  translate: -50% 0;
}
.sky__svg { width: 100%; height: 100%; overflow: visible; max-width: none; }

.sky__stars circle {
  fill: #f6f3ee;
  opacity: calc(clamp(0, (var(--seen, 1) - var(--m)) * 7, 1) * var(--b));
}
.sky__first { fill: #ffffff; }
.sky__band { opacity: calc(clamp(0, (var(--seen, 1) - 0.45) * 5, 1) * 0.52); will-change: opacity; }
.sky__band rect { fill: #fff; }
.sky__lanes path { fill: none; stroke: #04050a; stroke-linecap: round; opacity: 0.9; }
.sky__m31 { fill: #dcdfe8; opacity: calc(clamp(0, (var(--seen, 1) - 0.72) * 9, 1) * 0.8); }
.sky__beam { stroke: var(--laser); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 220ms var(--sc-ease-out); }
.sky[data-beam="star"] .beam--star,
.sky[data-beam="band"] .beam--band,
.sky[data-beam="m31"] .beam--m31 { opacity: 0.8; }

.sky__headland { fill: #020306; }
.sky__lookout rect { fill: #121723; }
.sky__dome rect, .sky__dome path { fill: #151a24; }
.sky__dome .sky__slit { fill: #3a0f0c; }
.sky__dome .sky__door { fill: var(--lamp); opacity: 0.8; }
.sky__scope path { fill: none; stroke: #161b25; stroke-width: 2.2; stroke-linecap: round; }
.sky__scope .sky__tube { stroke-width: 6; }
.sky__lamp { fill: var(--lamp); opacity: calc(clamp(0.14, var(--lit, 1) * 11 - var(--i), 1) * 0.92); }

.sky__label {
  position: absolute; margin: 0;
  font-family: var(--sc-font-mono); font-size: 0.8rem; line-height: 1.3;
  letter-spacing: 0.04em; color: var(--laser);
  white-space: nowrap;
  transition: opacity 260ms var(--sc-ease-out);
}
.sky__label--star { right: 22.8%; top: 9.6%; }
.sky__label--band { left: 61.5%; top: 43.6%; }
.sky__label--m31 { left: 11%; top: 25.8%; }

.twenty__copy { padding: var(--sc-5) var(--sc-gutter) var(--sc-5); align-self: center; }
.twenty__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-4); flex-wrap: wrap; }
.twenty__h { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xl); line-height: 1.1; letter-spacing: -0.015em; margin: 0; }
.clock { margin: 0; font-family: var(--sc-font-mono); display: flex; align-items: baseline; gap: var(--sc-2); }
.clock__label { font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.clock__n { font-size: var(--sc-t-2xl); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; color: var(--sc-ink); min-width: 2ch; text-align: right; }
.twenty__sub { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); font-style: italic; }
.log { list-style: none; margin: var(--sc-5) 0 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.log li {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--sc-2);
  padding-block: 0.42rem; border-bottom: 1px solid var(--sc-hairline);
  font-size: 1rem; line-height: 1.4; color: var(--sc-ink-soft);
  transition: opacity 260ms var(--sc-ease-out), color 260ms var(--sc-ease-out);
}
.log__t { font-family: var(--sc-font-mono); font-size: 0.78rem; padding-top: 0.2em; color: var(--sc-ink-soft); }
.log li:last-child, .log li.is-now { color: var(--sc-ink); }
.js-sky .log li.is-now:not(:last-child) { color: var(--sc-ink); }
.js-sky .log li:last-child:not(.is-now) { color: var(--sc-ink-soft); }
.js-sky .log li.is-later, .js-sky .sky__label.is-later { opacity: 0; }
.twenty__cap { margin-top: var(--sc-4); }

@media (min-width: 861px) {
  .twenty__stage { grid-template-columns: minmax(20rem, 0.78fr) minmax(0, 1.5fr); }
  .twenty__copy { order: 0; padding-left: max(var(--sc-gutter), 4.5rem); padding-right: var(--sc-6); }
  .twenty .sky { order: 1; height: 100vh; height: 100svh; }
}
@media (max-width: 860px) {
  .twenty__stage { grid-template-rows: auto 1fr; }
  .twenty .sky { height: 48vh; height: 48svh; }
}
@media (max-width: 860px) and (max-height: 720px) {
  .twenty .sky { height: 40vh; height: 40svh; }
}
@media (max-width: 860px) {
  .twenty__copy { padding-top: var(--sc-3); align-self: start; }
  .twenty__h { font-size: 1.25rem; }
  .clock__n { font-size: 2rem; }
  .twenty__sub { font-size: 0.95rem; margin-top: 0; }
  .log { margin-top: var(--sc-3); }
  .log li { font-size: 0.9rem; padding-block: 0.26rem; line-height: 1.34; grid-template-columns: 1.9rem minmax(0, 1fr); }
  .log__t { font-size: 0.72rem; }
  .twenty__cap { margin-top: var(--sc-2); font-size: 0.7rem; }
  .sky__label { font-size: 0.72rem; }
}

/* ----------------------------------------------------------- VI eye ---- */
.eye { padding-block: var(--sc-section); }
.eye__intro { max-width: 46rem; }
.pair { display: grid; gap: var(--sc-6); margin-top: var(--sc-8); }
@media (min-width: 761px) { .pair { grid-template-columns: 1fr 1fr; } }
.pair__fig { margin: 0; }
.pair__fig img { width: 100%; height: auto; border-radius: 3px; }
.m31 { display: grid; gap: var(--sc-5); margin-top: var(--sc-10); align-items: end; }
@media (min-width: 961px) { .m31 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sc-8); } }
.m31__big { font-size: clamp(2.8rem, 1.5rem + 5.4vw, 6.2rem); font-style: italic; font-weight: 400; line-height: 0.98; margin: 0; }
.saturn { display: grid; gap: var(--sc-6); margin-top: var(--sc-10); align-items: center; }
@media (min-width: 861px) { .saturn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-9); } }
.saturn__fig { margin: 0; max-width: 32rem; width: 100%; justify-self: center; border-radius: 50%; overflow: hidden; }
.saturn__fig img { width: 100%; height: auto; }
.saturn__text .sc-display { font-style: italic; font-weight: 400; }
.seen { margin-top: var(--sc-10); }
.seen__h { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xl); line-height: 1.15; margin: 0; }
.seen__list { display: grid; gap: var(--sc-5) var(--sc-6); margin: var(--sc-6) 0 0; }
@media (min-width: 600px) { .seen__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .seen__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.seen__list > div { border-top: 1px solid var(--sc-hairline-strong); padding-top: var(--sc-4); }
.seen__list dt { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 500; }
.seen__list dd { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); }
.seen__cta dt { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 400; }
.seen__cta dd { font-size: var(--sc-t-lg); color: var(--sc-ink); }

/* ----------------------------------------------------------- VII facts - */
.facts { padding-block: var(--sc-section); }
.facts__head { max-width: 44rem; }
.facts__grid { display: grid; gap: var(--sc-6); margin: var(--sc-8) 0 0; }
@media (min-width: 600px) { .facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .facts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { border-top: 2px solid var(--sc-ink); padding-top: var(--sc-4); }
.fact dt {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent);
}
.fact dd { margin: var(--sc-3) 0 0; line-height: 1.55; }

.year { margin-top: var(--sc-10); display: grid; gap: var(--sc-5); }
.year__head { display: grid; gap: var(--sc-2); }
.year__h { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xl); line-height: 1.15; margin: 0; }
.year__months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-2); max-width: 44rem; }
@media (min-width: 560px) { .year__months { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .year__months { grid-template-columns: repeat(12, minmax(0, 1fr)); max-width: none; } }
.year__months button {
  min-height: 2.75rem;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); letter-spacing: 0.04em;
  background: transparent; color: var(--sc-ink);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 45%, transparent); border-radius: var(--sc-r-sm);
  cursor: pointer;
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .year__months button:hover { border-color: var(--sc-ink); background: var(--sc-surface); }
}
.year__months button:active { transform: translateY(1px); }
.year__months button[aria-pressed="true"] { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }
.year__months button:disabled { opacity: 0.45; cursor: not-allowed; }
.year__out { margin: 0; font-size: var(--sc-t-lg); line-height: 1.45; max-width: 52ch; min-height: 2.9em; }
.year__out strong { font-weight: 600; }
.year__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.year__rows li {
  display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: var(--sc-4);
  padding: var(--sc-3) var(--sc-3);
  border-bottom: 1px solid var(--sc-hairline-strong);
  transition: background-color 180ms var(--sc-ease-out);
}
.year__when { font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); letter-spacing: 0.02em; padding-top: 0.12em; }
.year__rows li.is-match { background: color-mix(in oklab, var(--sc-accent) 12%, var(--sc-canvas)); }
.year__rows li.is-match .year__when { color: var(--sc-accent); }
@media (max-width: 520px) { .year__rows li { grid-template-columns: 1fr; gap: 0; } }

.contact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sc-5); align-items: center; margin-top: var(--sc-9); }
.contact__img { width: clamp(5.5rem, 12vw, 8.5rem); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.contact__h { font-family: var(--sc-font-mono); font-weight: 400; font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0; }
.contact__text .sc-body { color: var(--sc-ink); margin-top: var(--sc-1); }
.contact__mail { font-family: var(--sc-font-mono); font-size: 0.95em; letter-spacing: 0; }

/* ----------------------------------------------------------- VIII pan -- */
.night__stage { background: var(--sc-canvas); display: flex; align-items: center; }
.rail { gap: clamp(1.5rem, 3.4vw, 3.5rem); padding-inline: max(var(--sc-gutter), 4.5rem) var(--sc-gutter); align-items: flex-start; }
.rail__lead { flex: 0 0 min(25rem, 78vw); align-self: center; }
.rail__lead .sc-body { margin-top: var(--sc-4); }
.stop { flex: 0 0 clamp(16rem, 30vw, 27rem); margin: 0; }
.stop img { width: 100%; height: clamp(13rem, 50vh, 32rem); object-fit: cover; object-position: 50% 88%; border-radius: 3px; box-shadow: var(--sc-e2); }
.stop h3 { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg); margin: var(--sc-4) 0 0; }
.stop p { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); font-size: 1rem; line-height: 1.5; max-width: 34ch; }
.stop__note { font-family: var(--sc-font-mono); font-size: 0.78em; }
@media (max-width: 860px) {
  .rail { padding-inline: var(--sc-gutter); }
  .stop { flex-basis: 76vw; }
  .stop img { height: 40vh; height: 40svh; }
}
@media (prefers-reduced-motion: no-preference) {
  .stop { opacity: calc(0.55 + 0.45 * clamp(0, (var(--sc-p, 1) * 5 - var(--k, 0)) , 1)); }
  .stop:nth-of-type(1) { --k: 0; }
  .stop:nth-of-type(2) { --k: 0.9; }
  .stop:nth-of-type(3) { --k: 1.8; }
  .stop:nth-of-type(4) { --k: 2.7; }
}

/* ----------------------------------------------------------- IX close -- */
.close { min-height: 100vh; min-height: 100svh; }
.close__grid { display: grid; min-height: inherit; }
.close__copy { padding: var(--sc-9) var(--sc-gutter) var(--sc-8); align-self: center; max-width: 44rem; }
.pull--close p { font-size: var(--sc-t-xl); line-height: 1.2; max-width: 24ch; }
.close__h { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-2xl); line-height: 1.1; letter-spacing: -0.015em; }
.sc-stack > .close__h { margin-top: var(--sc-7); }
.cta--close { text-decoration-thickness: 3px; }
.colophon {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); line-height: 1.6;
  color: var(--sc-ink-soft); max-width: 52ch;
}
.sc-stack > .colophon { margin-top: var(--sc-7); padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); }
.close .sky { min-height: 22rem; }
@media (min-width: 861px) {
  .close__grid { grid-template-columns: minmax(28rem, 1fr) minmax(0, 1.15fr); }
  .close__copy { padding-left: max(var(--sc-gutter), 4.5rem); padding-right: var(--sc-6); }
  .close .sky { height: 100vh; height: 100svh; }
}
@media (max-width: 860px) {
  .close .sky { order: -1; height: 52vh; height: 52svh; }
  .close__copy { padding-top: var(--sc-6); }
}

/* The month picker is script-only; without it the full year list stands. */
.year [hidden] { display: none; }
@media (scripting: none) { .folio { display: none; } }