/* Robes of Light — the site's styles.
   Type and colour are the homepage's (Round 9 of the mockup,
   design-canvas/PaperRays.dc.html): IM Fell English for headings, Commissioner
   for everything read or clicked, on warm paper with a green-black ink. */

:root {
  --gold: #c79806;
  --gold-dark: #947104;
  --ink: #1f2b24;
  --ink-hover: #33443a;
  --ink-soft: #4b554e;
  --muted: #6d6450;
  --rust: #9a4a2b;
  --cream: #f3e3bd;
  --paper: #fcfaf4;
  --paper-alt: #f7efdb;
  --field: #fffdf7;
  --line: #e7e0cf;
  --rule: #d9d2bf;
  /* The dark page (The Luminaries): night grounds, moonlit text. */
  --night: #111814;
  --night-alt: #18221c;
  --night-card: #1f2b24;
  --night-line: #33443a;
  --moon: #e9e1cc;
  --moon-soft: #b9b09a;
  --font-head: 'IM Fell English', Garamond, Georgia, serif;
  --font-body: 'Commissioner', 'Helvetica Neue', Arial, sans-serif;
  --max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* The header is sticky, so an anchor target would otherwise land underneath it. */
:target { scroll-margin-top: 100px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold-dark); }
a:hover { color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.8rem, 6.4vw, 5rem); line-height: 1; letter-spacing: -.01em; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.05; text-align: center; }
h3 { font-size: 1.65rem; }
h4 { font-size: 1.4rem; }
/* A subheading that follows running text needs more air above than below,
   or it reads as the tail of the paragraph rather than the head of the next. */
:is(p, ul, ol) + :is(h3, h4) { margin-top: 1.5em; }

p { margin: 0 0 1em; text-wrap: pretty; }
strong, b { font-weight: 600; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; margin: 0 auto; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.small { font-size: .92rem; }

/* The small spaced capitals that name a section or a state. */
.eyebrow {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.eyebrow.muted-ink { color: var(--muted); }
.eyebrow.now { color: var(--rust); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Announcement + header ---------- */
/* The band's text and link are computed by show-band.js from the date: live
   ticket, replay, or replay at 35% off. What is written in the partial is only
   the no-script fallback. */
.announcement {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 14px;
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  padding: 12px 16px;
  font-size: .9rem;
  text-decoration: none;
}
.announcement:hover { color: var(--paper); }
.band-state {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.band-go { border-bottom: 1px solid rgba(243, 227, 189, .5); font-weight: 600; white-space: nowrap; }
@media (max-width: 600px) {
  .announcement { font-size: .84rem; line-height: 1.4; padding: 8px 14px; gap: 2px 10px; }
  .band-state { font-size: .68rem; flex-basis: 100%; }
}

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
/* The crown sits in the middle, with About and the Library to its left and
   Join, Tune In and the pill to its right. The nav is one element for the
   menu button's sake; `display: contents` lets its two lists take the outer
   columns of this grid either side of the logo. */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: 100px;
}
.logo { grid-column: 2; grid-row: 1; }
.logo img { height: 52px; width: auto; }  /* logo.svg is tight-cropped 2.15:1 */
.nav { display: contents; }
.nav-left { grid-column: 1; grid-row: 1; justify-self: start; }
.nav-right { grid-column: 3; grid-row: 1; justify-self: end; }

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; align-items: center; }
.nav a, .nav .dropdown > span {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-dark); }
.dropdown { position: relative; }
.dropdown > span::after { content: " \25BE"; font-size: .8em; }
.dropdown ul {
  display: none;
  position: absolute;
  top: 100%;
  left: -16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 0;
  min-width: 220px;
  box-shadow: 0 10px 28px rgba(31, 43, 36, .08);
}
.dropdown ul a { display: block; padding: 8px 16px; }
.dropdown:hover ul, .dropdown:focus-within ul { display: flex; }
/* Library carries "Start Here" hung beneath it, small gold italic with a star
   (header A on the Library canvas, 2026-10-01): the nav says the formal noun,
   the page's purpose rides underneath. In the phone menu it sits on the same line. */
.nav a.nav-lib { position: relative; display: inline-block; }
.nav-lib small {
  position: absolute; left: 50%; top: calc(100% + 1px); transform: translateX(-50%);
  white-space: nowrap; font-family: var(--font-head); font-style: italic;
  font-size: .84rem; font-weight: 400; color: var(--gold-dark);
}

.nav a.nav-pill {
  background: var(--gold);
  color: var(--paper);
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 600;
  white-space: nowrap;
}
.nav a.nav-pill:hover { background: var(--gold-dark); color: var(--paper); }
/* The Solar Story Post pill is an owl holding a letter, no words, on a wide
   screen (Cassidy, 2026-09-27); its name is read out from the hidden label and
   shown on hover. In the phone menu, a list of words, the name shows beside it. */
.nav a.nav-post { display: inline-flex; align-items: center; gap: 10px; padding: 8px; }
.nav-post svg { width: 36px; height: 36px; flex: none; }
.nav-post-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 1.8rem;
  color: var(--ink);
  cursor: pointer;
}

/* Below this the two lists no longer fit either side of the crown. The crown
   stays centred, the menu button takes the right-hand column, and both lists
   drop into one panel under the header. */
@media (max-width: 960px) {
  .header-inner { min-height: 76px; }
  .logo img { height: 44px; }
  .nav-toggle { display: block; grid-column: 3; grid-row: 1; justify-self: end; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 20px 16px; }
  /* The panel hangs from a sticky header, so scrolling the page never brings
     its foot into view: it scrolls itself instead, within the height left
     under the header (--nav-room, measured by main.js when it opens), and the
     page behind it is held still - by <html> alone: overflow on <body> as well
     makes body its own scroller, the sticky header sticks to that instead of
     the window, and anyone scrolled down loses the header and the menu. */
  .nav.open { display: block; max-height: var(--nav-room, calc(100dvh - 76px)); overflow-y: auto; overscroll-behavior: contain; }
  html.nav-open { overflow: hidden; }
  /* The desktop grid's justify-self applies to block boxes too in current
     browsers, and pushed the right-hand list across the panel. */
  .nav-left, .nav-right { justify-self: stretch; }
  .nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
  .nav li { width: 100%; }
  .nav a, .nav .dropdown > span { display: block; padding: 10px 0; }
  .dropdown ul { display: flex; position: static; border: 0; padding: 0 0 0 16px; min-width: 0; }
  .dropdown > span::after { content: ""; }
  .dropdown ul { box-shadow: none; }
  .nav a.nav-pill { display: inline-block; margin: 8px 0; padding: 10px 20px; }
  .nav a.nav-post { display: inline-flex; padding: 6px 20px 6px 8px; }
  .nav-post svg { width: 32px; height: 32px; }
  .nav-post-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .nav-lib small { position: static; transform: none; margin-left: 8px; font-size: .95rem; }
}

/* ---------- Sections ---------- */
section { padding: 72px 0; }
.section-alt { background: var(--paper-alt); }
.trio-intro { padding: 72px 0 0; }
.trio-intro p { font-size: 1.08rem; margin: 0; }
.ruled { display: flex; align-items: center; gap: 20px; color: var(--gold); margin: 0 0 .5em; }
.ruled::before, .ruled::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .55; }
body.dark main .ruled { color: var(--gold); }

.section-dark { background: var(--ink); color: var(--cream); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--cream); }
.section-dark .muted { color: #cfc4a4; }
.section-dark a { color: var(--cream); }

.hero {
  position: relative;
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  color: var(--paper);
  text-align: center;
  padding: 140px 0;
}
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(31, 43, 36, .55); }
.hero > * { position: relative; }
.hero h1 { color: var(--paper); }
.hero p { font-size: clamp(1.1rem, 1.6vw, 1.32rem); font-weight: 300; max-width: 680px; margin: 0 auto 1em; }

.page-title { text-align: center; padding: clamp(56px, 7vw, 96px) 0 32px; }
.page-title .subtitle { font-size: clamp(1.1rem, 1.6vw, 1.32rem); font-weight: 300; line-height: 1.6; color: var(--ink-soft); max-width: 680px; margin: 0 auto; }

.banner-img { width: 100%; max-height: 520px; object-fit: cover; }
/* Portraits side by side render at one size whatever their source resolution. */
.portrait { width: min(300px, 100%); aspect-ratio: 1; object-fit: cover; margin-bottom: 24px; }
/* Art exported on an opaque white ground: let the paper show through. */
.on-paper { mix-blend-mode: multiply; }

/* ---------- Layout helpers ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split.top + *, * + .split.top { margin-top: 36px; }
.split.top { align-items: start; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 860px) {
  .split, .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 32px; }
}

.card {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  padding: 32px;
}
.card img { margin: -32px -32px 24px; width: calc(100% + 64px); max-width: none; aspect-ratio: 4 / 3; object-fit: cover; }
.card.price { display: flex; flex-direction: column; }
.card.price .btn { margin-top: auto; align-self: flex-start; }
/* The join button sits in a [data-doors] wrapper, so the wrapper takes the
   push to the foot of the card and the button inside it stops taking it. */
.card.price [data-doors] { margin-top: auto; }
.card.price [data-doors] .btn { margin-top: 0; }
.price-tag { font-family: var(--font-head); font-size: 2.4rem; line-height: 1.1; color: var(--gold-dark); margin: .4em 0; }

/* Event banners from Heartbeat are 2:1 or 4:1 with the title centred, so a
   grid of them is framed 2:1 and cropped from the middle. */
.banners .card img { aspect-ratio: 2 / 1; }
/* The three entry doors are tall photographs; shown whole, standing in the
   card, or they stop reading as doors. */
.doors .card img { aspect-ratio: 4 / 5; object-fit: contain; padding-top: 28px; }

/* Cards led by a line-art object rather than a photograph.  The Luminaries'
   two long card sections (the year's gatherings, the curriculum) each carried
   a Heartbeat banner per card, which made a wall of thumbnails; the objects
   from the I Spy layer name the thing in one stroke and let the reading of a
   long section stay on the words. */
.icon-cards .card { padding: 28px; }
.icon-cards .card-icon {
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 0 14px;
  color: var(--gold-dark);
  stroke-width: 3.6;
}
body.dark main .icon-cards .card-icon { color: var(--gold); }
@media (max-width: 600px) { .icon-cards .card-icon { width: 44px; height: 44px; } }

/* A heading in a stack takes its object beside it rather than above. */
h4.with-mark { display: flex; align-items: center; gap: 12px; }
.stack-icon { flex: none; width: 34px; height: 34px; color: var(--gold-dark); stroke-width: 3.6; }
body.dark main .stack-icon { color: var(--gold); }

/* ---------- Dark pages ---------- */
/* The Luminaries is the one dark page: the homepage's paper and ink swapped,
   gold kept. Only <main> turns; the header and footer stay as every page has
   them. */
body.dark main { background: var(--night); color: var(--moon); }
body.dark main h2, body.dark main h3, body.dark main h4 { color: var(--cream); }
body.dark main .section-alt { background: var(--night-alt); }
body.dark main .section-dark { background: #0a0f0c; }
body.dark main .muted { color: var(--moon-soft); }
/* --gold-dark is too faint for small capitals on the night grounds. */
body.dark main .eyebrow { color: var(--gold); }
body.dark main a:not(.btn) { color: var(--gold); }
body.dark main a:not(.btn):hover { color: var(--cream); }
body.dark main .card { background: var(--night-card); border-color: var(--night-line); }
body.dark main .price-tag { color: var(--gold); }
body.dark main .btn { background: var(--gold); border-color: var(--gold); color: var(--ink); }
body.dark main .btn:hover { background: #d9ab1f; border-color: #d9ab1f; color: var(--ink); }

/* A sheet of paper on a dark page: art exported on white, given an edge. */
/* The Lunar Praxis spreads, shown as an evidence photograph: a wide white
   margin with the caption written in it, taped to the page and a degree or so
   off square, so the one real artefact on the page reads as something pinned
   to the desk rather than a screenshot. The tape is two pseudo-elements; it is
   decoration, so nothing of meaning hangs on it. */
.sheet {
  position: relative;
  margin: 0;
  padding: 14px 14px 0;
  background: #fbf7ee;
  border-radius: 2px;
  transform: rotate(-1.4deg);
  box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .85);
}
.sheet img { display: block; background: none; padding: 0; border-radius: 0; box-shadow: none; }
.sheet figcaption {
  margin: 0;
  padding: 12px 6px 16px;
  text-align: center;
  font-family: var(--font-head);
  font-style: italic;
  font-size: .95rem;
  color: #4a4036;
}
.sheet::before,
.sheet::after {
  content: "";
  position: absolute;
  width: 92px;
  height: 26px;
  background: rgba(232, 220, 196, .22);
  border-left: 1px solid rgba(232, 220, 196, .12);
  border-right: 1px solid rgba(232, 220, 196, .12);
}
.sheet::before { top: -12px; left: -18px; transform: rotate(-24deg); }
.sheet::after { bottom: 26px; right: -20px; transform: rotate(-22deg); }
/* The Luminaries' collage wall: our visionary boards, taped up in the cell
   the Come Together grid leaves empty, beside the Crafternoons card. Two
   boards each, Susan's and Cassidy's, 2026 and 2025. Each is a small .sheet
   that opens large (lightbox.js). */
.collage-wall { padding: 18px 8px; min-width: 0; }
/* Two boards each now (Susan's 2025 joined them 2026-11-09): a tall board over
   a wide one in each column, so the two columns come out level without the
   hole a fixed grid row leaves under a landscape board. The columns are two
   flex stacks rather than CSS multicol, which fragmented a .sheet across the
   gap and painted its tape twice - break-inside is not honoured on a
   transformed element, and every sheet here is rotated. */
.collage-wall .boards { display: flex; align-items: flex-start; gap: 18px; }
.collage-wall .col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.collage-wall .sheet { padding: 7px 7px 0; }
.collage-wall .col:nth-child(1) .sheet:nth-child(1) { transform: rotate(-2.4deg); }
.collage-wall .col:nth-child(1) .sheet:nth-child(2) { transform: rotate(2.2deg); }
.collage-wall .col:nth-child(2) .sheet:nth-child(1) { transform: rotate(1.7deg) translateX(-4px); }
.collage-wall .col:nth-child(2) .sheet:nth-child(2) { transform: rotate(-1.6deg) translateX(-6px); }
.collage-wall .sheet img { width: 100%; height: auto; cursor: zoom-in; }
.collage-wall .sheet figcaption { font-size: .74rem; line-height: 1.3; padding: 7px 2px 9px; }
.collage-wall .sheet::before, .collage-wall .sheet::after { width: 46px; height: 14px; }
.collage-wall .sheet::before { top: -7px; left: -10px; }
.collage-wall .sheet::after { bottom: 14px; right: -12px; }
.collage-wall .sheet:hover { box-shadow: 0 26px 50px -20px rgba(0, 0, 0, .95); }
/* Under the boards, a board made into a journal cover: what a board becomes
   for the rest of the year. A mockup of a real journal (cut_journal_mockup.py). */
.collage-wall .journal { margin: 8px 0 0; text-align: center; transform: rotate(-2deg); }
.collage-wall .journal img { width: 100%; height: auto; cursor: zoom-in; }
.collage-wall .journal figcaption { font-family: var(--font-head); font-style: italic; font-size: .86rem; color: var(--moon-soft); margin-top: 6px; }
.stack { display: grid; gap: 40px; }

/* A hero over art: the page's own painting, darkened enough to carry the title. */
.hero-art { background-position: center 42%; }
.hero-art::before { background: linear-gradient(rgba(10, 15, 12, .45), rgba(10, 15, 12, .7)); }
/* The four-seasons graphic behind the Membership header. A phone shows only
   the middle of it, the seam between spring and summer, so there it swaps to
   the one panel for the season we are in (main.js sets data-season; the
   panels are cut by tools/images/cut_bluegrid.py), each anchored on its
   subject. Without script the phone keeps the whole graphic. */
@media (max-width: 600px) {
  .hero-art[data-season="winter"] { background-image: url('../images/bluegrid-winter.webp') !important; background-position: center 50%; }
  .hero-art[data-season="spring"] { background-image: url('../images/bluegrid-spring.webp') !important; background-position: center 50%; }
  .hero-art[data-season="summer"] { background-image: url('../images/bluegrid-summer.webp') !important; background-position: center 100%; }
  .hero-art[data-season="autumn"] { background-image: url('../images/bluegrid-autumn.webp') !important; background-position: center 40%; }
}

/* Venture Deeper. Two pages carry this band - the Luminaries, where the
   reader has arrived, and the membership page's upsell, where they are being
   asked to cross - so the art and the ground are variables and the block is
   written once. On a wide screen the picture fills the band with the text in
   the dark to its left; on a phone the picture is above the text.
   There is deliberately only one Alice on the site (2026-11-09): she is the
   threshold, so she stays on the membership page, and the Luminaries gets the
   wood you are already in. */
.rabbit-hole {
  --rh-img: url('../images/dark-foliage.webp');
  --rh-ground: var(--night);
  position: relative;
  background: var(--rh-ground) var(--rh-img) no-repeat;
  background-size: cover;
  background-position: 72% center;
  padding: clamp(96px, 10vw, 150px) 0;
  color: var(--moon);
}
.rabbit-hole .container { position: relative; }
.rabbit-hole::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--rh-ground) 0%, rgba(17, 24, 20, .95) 36%, rgba(17, 24, 20, .6) 55%, rgba(17, 24, 20, .35) 75%, rgba(17, 24, 20, .35) 100%);
}
.rabbit-text { max-width: 500px; }
.rabbit-hole h2, .rabbit-hole h3, .rabbit-hole h4 { color: var(--cream); }
.rabbit-hole h2 { text-align: left; }
.rabbit-hole .eyebrow { color: var(--gold); }
.rabbit-hole a:not(.btn) { color: var(--gold); }
.rabbit-hole .btn { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.rabbit-hole .btn:hover { background: #d9ab1f; border-color: #d9ab1f; color: var(--ink); }
.rabbit-hole .card { background: var(--night-card); border-color: var(--night-line); }
.rabbit-hole .price-tag { color: var(--gold); }
.rabbit-hole .muted { color: var(--moon-soft); }
@media (max-width: 860px) {
  .rabbit-hole { background-position: 62% center; }
  .rabbit-hole::before { background: linear-gradient(180deg, rgba(17, 24, 20, .2) 0, rgba(17, 24, 20, .58) 22%, rgba(17, 24, 20, .92) 58%, var(--rh-ground) 100%); }
  .rabbit-text { max-width: none; }
}

/* The membership page's upsell to the Luminaries: Alice at the little door,
   standing in a field of code rain. The picture is composed by
   tools/images/make_venture_band.py so the rain and Alice are one image at
   one scale - laying her over a separate tile of rain showed two rains and
   the edge of her rectangle between them. She is the rain's own green with
   the rain dimmed behind her line; the gold Alice on a plain ground was the
   other finalist and that script says how to swap to her. */
.rabbit-hole.venture {
  --rh-img: url('../images/venture-band.webp');
  --rh-ground: #050805;
  background-position: right center;
  padding: clamp(72px, 7vw, 110px) 0;
}
/* Dims the rain under the card and lets go of it past the card's edge, where
   there is nothing to read and the neon is the whole point. */
.rabbit-hole.venture::before {
  background: linear-gradient(90deg, var(--rh-ground) 0%, rgba(5, 8, 5, .93) 34%, rgba(5, 8, 5, .55) 52%, transparent 70%);
}
.venture-inner { max-width: 560px; }
.rabbit-hole.venture h2 { margin-top: 0; }
/* On a phone the card is as wide as the band, so there is no clear beside it:
   the picture stands whole above the card instead, and fades into the ground.
   The band is 4:3, hence the 75vw. */
@media (max-width: 860px) {
  .rabbit-hole.venture {
    background-size: 100% auto;
    background-position: center top;
    padding-top: calc(72vw - 20px);
  }
  .rabbit-hole.venture::before {
    background: linear-gradient(180deg, transparent 0, transparent 44vw, var(--rh-ground) 74vw);
  }
  .venture-inner { max-width: none; }
}

.feature { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: center; margin-bottom: 56px; }
.feature:nth-child(even) img { order: 2; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } .feature:nth-child(even) img { order: 0; } }

ul.checks, ul.plain { padding-left: 1.2em; }
ul.checks li, ul.plain li { margin-bottom: .4em; }

blockquote {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-style: italic;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}
blockquote cite { display: block; margin-top: 16px; font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-style: normal; color: var(--gold-dark); }
.section-dark blockquote cite { color: var(--gold); }

/* ---------- Buttons ---------- */
/* The homepage's pills: filled ink, or outlined ink. On dark ground they
   turn gold, as the footer's sign-up does. */
.btn, .pill-btn {
  display: inline-block;
  padding: 17px 30px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover, .pill-btn:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--paper); }
.btn.outline, .pill-btn.outline { background: transparent; color: var(--ink); }
.btn.outline:hover, .pill-btn.outline:hover { background: var(--ink); color: var(--paper); }
.btn:focus-visible, .pill-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn + .btn { margin-left: 8px; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn.gold:hover { background: #d9ab1f; border-color: #d9ab1f; color: var(--ink); }
/* A button that is not one: "Doors open Dec 7" while seasonal enrolment is
   shut (show-band.js fills [data-doors]). Kept the shape of the button it
   stands in for, so the card does not change height as the season turns. */
.btn.shut {
  background: transparent;
  border-color: var(--line);
  border-style: dashed;
  color: var(--muted);
  cursor: default;
}
.btn.shut:hover { background: transparent; border-color: var(--line); color: var(--muted); }
[data-doors] .small { margin: .7em 0 0; max-width: 34em; }

.section-dark .btn, .hero .btn { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.section-dark .btn:hover, .hero .btn:hover { background: #d9ab1f; border-color: #d9ab1f; color: var(--ink); }
.section-dark .btn.outline, .hero .btn.outline { background: transparent; border-color: var(--cream); color: var(--cream); }
.section-dark .btn.outline:hover, .hero .btn.outline:hover { background: var(--cream); color: var(--ink); }

/* ---------- Countdown ---------- */
.countdown { display: flex; justify-content: center; gap: 24px; margin: 32px 0; flex-wrap: wrap; }
.countdown div { min-width: 96px; }
.countdown span { display: block; font-family: var(--font-head); font-size: 3rem; color: var(--gold); line-height: 1; }
.countdown small { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; }

/* ---------- FAQ ---------- */
details { border-bottom: 1px solid var(--rule); padding: 18px 0; }
details summary { font-family: var(--font-head); font-size: 1.45rem; line-height: 1.25; cursor: pointer; }
details[open] summary { margin-bottom: 12px; color: var(--gold-dark); }

/* ---------- Show more ---------- */
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.show-more { background: none; border: 0; color: var(--ink); font: inherit; font-weight: 600; padding: 0; cursor: pointer; text-decoration: none; border-bottom: 1.5px solid var(--gold); }
.show-more:hover { color: var(--gold-dark); }

/* ---------- Forms ---------- */
form.inline { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
input, textarea, select {
  font: inherit;
  padding: 14px 20px;
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  background: var(--field);
  color: var(--ink);
  width: 100%;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(199, 152, 6, .35); }
form.inline input { width: min(360px, 100%); border-radius: 999px; }
form.stack { display: grid; gap: 14px; max-width: 520px; margin: 0 auto; }

/* ---------- Embeds ---------- */
.embed { width: 100%; border: 0; border-radius: 12px; }
.video { position: relative; aspect-ratio: 16 / 9; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Tune In ---------- */
/* The show notes and archive are written by tools/shownotes/build_shownotes.py. */
.ti-intro { padding: 48px 0; }
.ti-intro .wrap { display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: center; }
.ti-intro img { border-radius: 10px; }
.ti-intro h1 { color: var(--cream); margin: 0 0 8px; }
.ti-intro .eyebrow, .ti-archive .eyebrow { color: var(--gold); }
.ti-intro .lede { font-size: 1.1rem; max-width: 58ch; margin: 0; }
.tune-in .listen { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; }
.tune-in .body .listen .btn { padding: 8px 16px; font-size: .82rem; }
@media (max-width: 700px) {
  .ti-intro { padding: 32px 0; }
  .ti-intro .wrap { grid-template-columns: 96px 1fr; gap: 18px; }
  .ti-intro .lede, .ti-intro .listen { grid-column: 1 / -1; }
  .ti-intro .lede { font-size: 1rem; }
}

/* An episode: number, title and date folded; description, audio and notes inside. */
.tune-in .eps { border-top: 1px solid var(--rule); }
details.ep { padding: 0; border-bottom: 1px solid var(--rule); }
details.ep > summary { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 2px 12px; align-items: baseline; padding: 16px 4px; list-style: none; font-family: var(--font-body); font-size: 1rem; }
details.ep > summary::-webkit-details-marker { display: none; }
details.ep > summary .n { font-family: var(--font-head); font-size: 1.5rem; color: var(--gold-dark); grid-row: span 2; line-height: 1; }
details.ep > summary .t { font-family: var(--font-head); font-size: 1.3rem; line-height: 1.25; text-wrap: balance; }
details.ep > summary .d { grid-column: 2; font-size: .82rem; color: var(--muted); }
details.ep > summary::after { content: '+'; grid-row: 1; grid-column: 3; color: var(--gold-dark); font-size: 1.3rem; line-height: 1; }
details.ep[open] > summary::after { content: '\2013'; }
details.ep[open] > summary { margin: 0; color: inherit; }
details.ep > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
details.ep .body { padding: 0 4px 28px calc(2.2em + 16px); }
@media (max-width: 600px) { details.ep .body { padding-left: 4px; } }
.tune-in audio { display: block; width: 100%; margin: 18px 0 0; }

/* The latest episode, set apart. */
details.ep.latest { background: var(--paper-alt); border: 1px solid #e6d29a; border-left: 4px solid var(--gold); border-radius: 4px; margin: 0 0 18px; }
details.ep.latest > summary { padding: 20px 18px 18px 14px; }
details.ep.latest > summary .n { font-size: 2.2rem; color: var(--gold); }
details.ep.latest > summary .t { font-size: clamp(1.5rem, 4vw, 2rem); }
details.ep.latest .body { padding: 0 18px 28px calc(2.2em + 26px); }
@media (max-width: 600px) { details.ep.latest .body { padding: 0 14px 24px; } }
details.ep .badge { display: block; width: max-content; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px; background: var(--rust); color: #fff; font-family: var(--font-body); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

.tune-in .lede { font-size: 1.02rem; }
.tune-in .lede ul, .tune-in .notes ul { margin: 6px 0 10px; padding-left: 1.2em; }
.tune-in .lede li, .tune-in .notes li { margin: 4px 0; }
.tune-in .notes { font-size: .97rem; }
.tune-in .notes h4 { font-family: var(--font-head); font-size: 1.35rem; margin: 28px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.tune-in .notes p.label { font-weight: 600; margin: 18px 0 4px; }
.tune-in .notes li ul { margin: 4px 0; }
.tune-in .notes p.link { margin: 2px 0 8px 1.2em; font-size: .9rem; overflow-wrap: anywhere; }
.tune-in .notes li > p.link { margin: 2px 0 6px; }
.tune-in .notes blockquote { border-left: 2px solid var(--gold); margin: 8px 0; padding-left: 12px; font-style: italic; }
.tune-in .notes details.inner { border: 0; padding: 8px 0; }
.tune-in .notes details.inner summary { font-family: var(--font-body); font-size: 1rem; font-weight: 600; }
.tune-in .notes p.verse { margin: 0 0 14px; }
.tune-in .notes p.poem-n { margin: 22px 0 6px; font-family: var(--font-head); color: var(--gold-dark); }
.ti-archive .notes p.poem-n { color: var(--gold); }
/* Photos share a height, not a width: one card stands at that height, and a
   photo of three cards side by side comes out three cards wide. The caption
   takes the photo's width (width 0, min-width 100%), however long it runs. */
.tune-in .cards { display: flex; flex-wrap: wrap; gap: 20px 16px; margin: 16px 0; align-items: flex-start; }
.tune-in .cards figure { display: flex; flex-direction: column; margin: 0; max-width: 100%; }
.tune-in .cards img { display: block; height: auto; width: auto; max-width: 100%; max-height: 340px; border-radius: 8px; }
.tune-in .cards figcaption { width: 0; min-width: 100%; font-size: .82rem; line-height: 1.4; color: var(--muted); padding-top: 6px; }
.tune-in .cards.top { margin: 4px 0 20px; }
@media (max-width: 600px) { .tune-in .cards img { max-height: 240px; } }
.ti-archive .cards figcaption { color: #a99f86; }
.ti-more { border: 0; padding: 0; margin: 14px 0 0; }
.ti-more summary { font-family: var(--font-body); font-size: .9rem; font-weight: 600; color: var(--gold); cursor: pointer; }
.ti-more[open] summary { color: var(--gold); margin-bottom: 8px; }
.ti-more p { color: var(--cream); font-size: .98rem; max-width: 62ch; }
details.ep > summary .stage:not(:empty)::before { content: ' \00b7 '; }
.pull { margin: 0 0 22px; padding: 4px 0 4px 18px; border-left: 3px solid var(--gold); font-family: var(--font-head); font-size: clamp(1.3rem, 3.4vw, 1.65rem); line-height: 1.3; font-style: italic; }
.ti-archive .pull { color: var(--cream); }
.tune-in .tx-link { margin: 14px 0 0; font-weight: 600; }

/* A transcript page (transcript-sNeN.html, written by build_shownotes.py). */
.transcript .back { font-size: .9rem; margin: 0 0 18px; }
.transcript h1 { text-wrap: balance; margin: 4px 0 8px; }
.transcript .tx-meta { color: var(--muted); font-size: .9rem; }
.transcript .tx-note { color: var(--muted); font-size: .85rem; font-style: italic; border-bottom: 1px solid var(--rule); padding-bottom: 16px; }
.transcript .tx p { margin: 0 0 1.1em; line-height: 1.7; }
.transcript .tx .who { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark); }

.tune-in img[data-full] { cursor: zoom-in; }
.tune-in img[data-full]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Lightbox (lightbox.js): a show-notes picture or a collage-wall board, large. */
.lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; overflow: auto; cursor: zoom-out; }
.lightbox::backdrop { background: rgba(10, 15, 12, .92); }
.lightbox figure { margin: 0; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 56px 16px 24px; box-sizing: border-box; }
.lightbox img { max-width: min(100%, 1400px); height: auto; border-radius: 6px; }
.lightbox figcaption { color: var(--cream); font-size: .92rem; max-width: 60ch; text-align: center; }
.lightbox figcaption a { color: var(--gold); }
.lightbox-close { position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--cream); color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.tune-in .listen-line { font-size: .9rem; margin: 12px 0 0; }
.tune-in .credit { font-size: .8rem; color: var(--muted); margin-top: 20px; }

.ti-playlist .wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: center; }
@media (max-width: 820px) { .ti-playlist .wrap { grid-template-columns: 1fr; gap: 8px; } }

/* The archive, on dark. */
.ti-archive .intro { color: #cfc4a4; max-width: 60ch; }
.ti-archive details.year { padding: 0; border-bottom: 1px solid var(--night-line); }
.ti-archive details.year > summary { font-family: var(--font-head); font-size: 1.7rem; color: var(--cream); padding: 18px 0; list-style: none; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ti-archive details.year > summary::-webkit-details-marker { display: none; }
.ti-archive details.year > summary::after { content: '+'; font-family: var(--font-body); color: var(--gold); }
.ti-archive details.year[open] > summary::after { content: '\2013'; }
.ti-archive details.year[open] > summary { color: var(--gold); margin: 0; }
.ti-archive details.year > summary .count { margin-left: auto; font-family: var(--font-body); font-size: .8rem; color: #cfc4a4; }
.ti-archive details.year > summary .tag { font-family: var(--font-body); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 2px 8px; }
.ti-archive details.ep { border-bottom: 1px solid var(--night-line); }
.ti-archive details.ep > summary .t { color: var(--cream); font-size: 1.15rem; }
.ti-archive details.ep > summary .n, .ti-archive details.ep > summary::after { color: var(--gold); }
.ti-archive details.ep > summary .n { font-size: 1.25rem; }
.ti-archive details.ep > summary .d { color: #a99f86; }
.ti-archive .body { color: #e3d8bd; font-size: .95rem; }
.ti-archive .body a { color: var(--gold); }
.ti-archive .notes h4 { color: var(--cream); border-color: var(--night-line); }
.ti-archive .notes p.label { color: var(--cream); }
.ti-archive .credit { color: #a99f86; }

/* ---------- Legal ---------- */
.legal h3 { margin-top: 1.6em; }
.legal p, .legal li { font-size: .98rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--cream); padding: 64px 20px 32px; font-size: .95rem; }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.site-footer h2 { font-size: 1.65rem; line-height: 1.1; color: var(--cream); margin: 0 0 14px; text-align: left; }
.site-footer p { margin: 0 0 12px; }
.footer-signup p { color: #cfc4a4; line-height: 1.6; }

.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 56px; align-items: start; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
/* The sign-up is one pill: the field and the gold button sit inside it. */
.footer-signup form.inline {
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: min(340px, 100%);
  margin-top: 18px;
  padding: 6px 6px 6px 20px;
  border: 1.5px solid #6f7a6d;
  border-radius: 999px;
}
.footer-signup form.inline:focus-within { border-color: var(--gold); }
.footer-signup form.inline input {
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  box-shadow: none;
}
.footer-signup form.inline input::placeholder { color: #9aa094; }
.footer-signup .btn { flex: none; padding: 10px 18px; font-size: .88rem; background: var(--gold); border-color: var(--gold); color: var(--ink); }
.footer-signup .btn:hover { background: #d9ab1f; border-color: #d9ab1f; }
.footer-signup .muted, .footer-contact .muted { color: #9aa094; font-size: .82rem; }
.footer-consent { margin-top: 12px; line-height: 1.5; }
.footer-consent a { color: inherit; text-underline-offset: 2px; }
.footer-social a { margin-right: 18px; }

.footer-legal {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(243, 227, 189, .2);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 28px;
  font-size: .88rem;
  color: #cfc4a4;
}
.footer-legal p { margin: 0; }
.footer-legal a { margin-left: 28px; }
.footer-legal a:first-child { margin-left: 0; }

@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
  .footer-legal { flex-direction: column; }
}

/* ---------- The Solar Story compass ---------- */
/* Eight stages. Four of them open at a named gate; the others at an equinox
   or solstice - so nothing here is called a gate. Static: the interactive
   version is parked in tools/options/. */
.year-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.year-head h2 { margin: 0; }
.year-head p { margin: 4px 0 0; }

.wheel-wrap { display: flex; justify-content: center; }
.compass-fig { position: relative; width: 100%; max-width: 760px; }
.compass { display: block; width: 100%; height: auto; }
.compass-season {
  font-family: var(--font-body);
  font-size: 19px;
  letter-spacing: .22em;
  fill: #fffdf7;
  paint-order: stroke;
  stroke: rgba(31, 43, 36, .45);
  stroke-width: 3px;
}

/* The eight labels ring the drawing; JS puts them on their spoke. */
.compass-pt {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 124px;
  text-align: center;
  line-height: 1.15;
}
.compass-stage { font-family: var(--font-head); font-size: 1.1rem; }
.compass-turn { font-size: .78rem; color: var(--muted); }
.compass-date { font-size: .78rem; color: var(--gold-dark); font-variant-numeric: tabular-nums; }
.compass-pt.on .compass-stage { color: #9a4a2b; }
.compass-pt .stage-flag { margin-top: 4px; }

/* "We are here" beside the marker: EB Garamond italic in cream, lifted off the
   photography by a soft dark glow rather than a hard border. The homepage wheel
   sets its copy ink-under-cream, but that wheel has cream ground around its
   rim; here the words sit on the picture itself, where a cream halo punches a
   hole in it and ink goes muddy. */
.compass-now {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  fill: #fffdf7;
  stroke: none;
  filter: drop-shadow(0 0 2px rgba(31, 43, 36, .95))
          drop-shadow(0 1px 3px rgba(31, 43, 36, .7));
}

.stage-flag {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9a4a2b;
  border: 1px solid #9a4a2b;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.stage-loading { color: #6d6450; }

@media (max-width: 720px) {
  .compass-pt { width: 92px; }
  .compass-stage { font-size: .88rem; }
  .compass-turn { font-size: .72rem; }
  .compass-date { font-size: .7rem; }
  .compass-season { font-size: 24px; letter-spacing: .16em; }
  .compass-now { font-size: 18px; }
}
/* ---- clicking a season quadrant ---- */
.season-hit { fill: transparent; stroke: none; cursor: pointer; }
.season-hit:focus { outline: none; }
.season-hit:focus-visible { stroke: var(--gold-dark); stroke-width: 3; }
.season-fill { fill: none; stroke: none; pointer-events: none; transition: fill .2s; }
.season-fill.hover { fill: rgba(255, 253, 247, .14); }
.season-fill.on { fill: rgba(255, 253, 247, .26); stroke: var(--gold-dark); stroke-width: 2.5; }

.season-panel { display: none; }
.season-hint {
  margin: 0 0 10px;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a7d64;
}
.season-panel h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--gold-dark);
}
.season-span { margin: 3px 0 14px; font-size: .88rem; color: #6d6450; }
.season-stages { display: grid; gap: 12px; }
.season-stage {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 11px 13px;
  border-left: 3px solid rgba(148, 113, 4, .35);
  background: rgba(148, 113, 4, .05);
}
.season-stage.on { border-left-color: #9a4a2b; background: rgba(154, 74, 43, .07); }
.season-stage .compass-stage { font-size: 1.15rem; }
.season-stage .stage-flag { align-self: flex-start; margin-top: 7px; }

/* Wide: the ring is the display. A picked season keeps its two labels; the
   other six step back. */
.compass-pt { transition: opacity .25s; }
.compass-fig.focusing .compass-pt:not(.lit) { opacity: .28; }

@media (max-width: 519px) {
  /* .wheel-wrap is a flex row that centres the figure; the panel is a second
     child of it and would otherwise sit beside the wheel and squeeze it. */
  .wheel-wrap { display: block; }
  .compass-fig { display: block; margin: 0 auto; }
  .compass-pt { display: none; }

  /* With the ring labels gone the season names are the only type on the
     drawing, so they carry more and have to hold up over bright photography. */
  .compass-season {
    font-size: 28px;
    letter-spacing: .14em;
    stroke-width: 3.5px;
    stroke: rgba(31, 43, 36, .55);
  }
  .compass-now { font-size: 20px; }

  .season-panel {
    display: block;
    max-width: 420px;
    margin: 18px auto 0;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 113, 4, .3);
  }
}

/* The public year-at-a-glance is the programme calendar, printed. Everything
   that orients a reader on screen - the explanation, the stage list, the CTA -
   is scaffolding for the sheet, not part of it, and drops out. It renders
   whatever cycle the data carries, so it cannot go stale the way a hand-built
   PDF does. */
@media print {
  @page { size: letter landscape; margin: 10mm; }
  body { background: #fff; color: #000; font-size: 10pt; }
  .announcement, .site-header, .site-footer, .no-print { display: none !important; }
  main section { padding: 0 !important; }
  .section-alt, .section-dark { background: #fff !important; color: #000 !important; }
  .container, .container.narrow { max-width: none; width: auto; padding: 0; }
  h1 { font-size: 22pt; margin-bottom: 2mm; }
  h2 { font-size: 14pt; }
  .year-head { margin-bottom: 4mm; }
  a[href]::after { content: ""; }
}

.narrow-lead { max-width: 62ch; }
.feature h3 { margin-bottom: 4px; }
.feature .muted { margin-top: 0; font-size: .95rem; }

/* The Year Is the Syllabus (calendar.html): five scales of time, largest first */
.scales { list-style: none; margin: 32px 0; padding: 0; }
.scales li { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; padding: 20px 0; border-top: 1px solid var(--rule); }
.scales li:last-child { border-bottom: 1px solid var(--rule); }
.scales .icon { width: 48px; height: 48px; justify-self: center; }
.scales h3 { margin: 0 0 4px; font-size: 1.45rem; }
.scales h3 span { font-family: var(--font-head); font-style: italic; font-size: 1.1rem; color: var(--gold-dark); margin-left: 6px; }
.scales p { margin: 0; }
@media (max-width: 480px) {
  .scales li { grid-template-columns: 40px 1fr; gap: 14px; }
  .scales .icon { width: 38px; height: 38px; }
  .scales h3 span { display: block; margin: 2px 0 0; }
}

/* The Luminaries: hero subtitle, the qualifying lines, and the ladder of offerings. */
.hero-sub { font-family: var(--font-head); font-style: italic; color: var(--cream); }

.reasons { list-style: none; margin: 28px 0 0; padding: 0; }
.reasons li { padding: 16px 0; border-top: 1px solid var(--rule); font-size: 1.08rem; }
.reasons li:last-child { border-bottom: 1px solid var(--rule); }
body.dark main .reasons li { border-color: var(--night-line); }

.ladder { margin: 28px 0 0; }
.ladder li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 22px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--rule); }
.ladder li:last-child { border-bottom: 1px solid var(--rule); }
.ladder strong { font-family: var(--font-head); font-weight: 400; font-size: 1.22rem; }
.ladder li.is-here strong { color: var(--gold); }
body.dark main .ladder li { border-color: var(--night-line); }
body.dark main .ladder strong { color: var(--cream); }
body.dark main .ladder li.is-here strong { color: var(--gold); }
@media (max-width: 600px) {
  .ladder li { grid-template-columns: 1fr; gap: 4px; }
}
body.dark main .ladder strong a:not(.btn) { color: var(--cream); text-decoration-color: var(--gold-dark); }
body.dark main .ladder strong a:not(.btn):hover { color: var(--gold); }

/* The Luminaries: gold for a short list of named things -- the seven words of
   wisdom, and the three kinds of programming. Only on a page whose links are
   not gold in running text: beside one, a gold run reads as a broken link
   (tried on Our method 2026-11-09 and taken back to bold). */
.virtues { color: var(--gold); }
body.dark main .virtues { color: var(--gold); }
.defining { font-family: var(--font-head); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.35; margin: 1.1em 0; }
body.dark main .defining { color: var(--cream); }

.stations { list-style: none; margin: 34px 0 0; padding: 0; counter-reset: none; }
.stations li { display: grid; grid-template-columns: 62px 1fr; gap: 22px; align-items: start; padding: 26px 0; border-top: 1px solid var(--rule); }
.stations li:last-child { border-bottom: 1px solid var(--rule); }
.stations .num { font-family: var(--font-head); font-size: 1.9rem; line-height: 1; color: var(--gold-dark); justify-self: center; padding-top: 4px; }
.stations h3 { margin: 0 0 8px; font-size: 1.5rem; }
.stations p { margin: 0 0 8px; }
.stations p:last-child { margin: 0; }
body.dark main .stations li { border-color: var(--night-line); }
body.dark main .stations .num { color: var(--gold); }
@media (max-width: 600px) {
  .stations li { grid-template-columns: 40px 1fr; gap: 16px; padding: 22px 0; }
  .stations .num { font-size: 1.5rem; }
}

/* The Luminaries' I Spy layer: the inspiration board's objects redrawn as line art and
   scattered in the margins, so the page itself reads as a detective's desk. Decorative
   only (aria-hidden), and hidden below 900px, where there are no margins to hide in. */
.spy-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* stroke-width is inherited, so it is set on the <svg> and reaches the cloned art. */

.has-spy { position: relative; isolation: isolate; overflow: hidden; }
.has-spy > .container { position: relative; z-index: 1; }
.spy { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.spy-item {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s, 80px); height: var(--s, 80px);
  transform: rotate(var(--r, 0deg));
  color: var(--gold); opacity: .17; stroke-width: 3.2;
}
body.dark main .spy-item { opacity: .2; }
/* The margins hold the board's own objects, cut out of Cassidy's inspiration
   board: photographs of the desk rather than drawings of it. They are centred
   on their point and may run off the edge, the way an object on a desk is only
   half in shot. Kept low enough to stay behind the words, which sit above them
   on .has-spy > .container. */
img.spy-item {
  width: var(--s, 160px); height: auto;
  max-width: none;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  opacity: .38;
}
body.dark main img.spy-item { opacity: .38; }
/* On a phone there are no margins, so the objects can only sit behind the words.
   They close in to the corners at a size and strength that stays behind the text
   (Cassidy's pick "C", 2026-11-01, over one object bled off the left edge, which
   landed behind the heading). Card sections hide them anyway - a card is opaque -
   so on a phone this layer only shows in the prose sections. */
@media (max-width: 900px) {
  .spy img.spy-item,
  body.dark main .spy img.spy-item { width: 110px; opacity: .24; }
  .spy img.spy-item:nth-child(1) { left: 2%; top: 4%; }
  .spy img.spy-item:nth-child(2) { left: 98%; top: 95%; }
  .spy svg.spy-item { display: none; }
}

/* The stations take the same objects at full strength, in place of numerals. */
.stations .station-icon { width: 46px; height: 46px; color: var(--gold-dark); stroke-width: 3.6; }
body.dark main .stations .station-icon { color: var(--gold); }
@media (max-width: 600px) { .stations .station-icon { width: 34px; height: 34px; } }

/* A quotation given a band of its own, over a photograph (--qb-img) held
   down under a dark scrim so the words read in cream. */
.quote-band {
  --qb-img: none;
  position: relative;
  background: var(--night) var(--qb-img) center / cover no-repeat;
  padding: clamp(96px, 12vw, 170px) 0;
}
.quote-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(5, 8, 5, .72), rgba(5, 8, 5, .45));
}
.quote-band > .container { position: relative; }
.quote-band.roots { --qb-img: url('../images/mossyroots.webp'); }
/* A daylit photograph: the scrim does more of the work, so the band stays
   in the page's night. */
.quote-band.roots::before {
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(5, 8, 5, .86), rgba(5, 8, 5, .66));
}
/* The whale is the picture, not a ground: it hangs at the top of the band,
   fading out at its sides and foot into the deep blue its own photograph
   ends in, and the words sit in that water below it. */
.quote-band.whale { background: #000d3c; padding-top: calc(min(100vw, 900px) * .56); padding-bottom: clamp(72px, 8vw, 110px); }
.quote-band.whale::before {
  inset: 0 auto auto 50%; transform: translateX(-50%);
  width: min(100%, 900px); aspect-ratio: 3 / 2;
  background: url('../images/whale.webp') center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 86%), linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(180deg, #000 50%, transparent 86%), linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-composite: intersect;
}
body.dark main .quote-band blockquote { color: var(--cream); text-shadow: 0 1px 14px rgba(0, 0, 0, .7); }
body.dark main .quote-band blockquote cite { color: var(--gold); }

.wm-credit { font-size: .8rem; color: var(--muted); margin-top: 26px; }
body.dark main .wm-credit { color: var(--moon-soft); }

/* The one line on a sell page that points at Our method's "Find your way in"
   fold. The translations themselves stay off this page on purpose. */
.way-in { margin-top: 1.1em; color: var(--muted); }
.way-in a { color: var(--gold-dark); white-space: nowrap; }

/* ---- The Solar Story Post switch ----
   Off from 2026-11-10 until Resend and the sign-up function are live. Everything
   marked data-post="on" (the nav owl, the footer sign-up, the homepage block, the
   Calendar band, the Library book, the doors and lines that point at #signup) is
   hidden, and the data-post="off" stand-ins show. To switch the Post back on,
   replace this whole block with:
     [data-post="off"] { display: none !important; }  */
[data-post="on"] { display: none !important; }
@media (min-width: 861px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .doors-begin .grid-3 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
}
.ladder .soon { display: block; margin-top: 4px; font-family: var(--font-body); font-style: normal; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }