/* ==========================================================================
   Insomniotters — layout and components
   Tokens live in tokens.css. Nothing here should hardcode a color or size.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--font-scripture);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  /* Faint vertical gradient — candlelight falling off toward the floor. */
  background-image: linear-gradient(to bottom, var(--ink-raised) 0%, var(--ink) 38%);
  background-repeat: no-repeat;
  background-size: 100% 60vh;
}

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

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--parchment); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.skip-link {
  position: absolute; left: var(--space-s); top: var(--space-s);
  padding: var(--space-xs) var(--space-m);
  background: var(--ink-raised); color: var(--gold);
  border: var(--rule-gold); border-radius: var(--radius);
  transform: translateY(-250%);
  transition: transform 160ms var(--ease);
  z-index: 100;
}
.skip-link:focus { transform: translateY(0); }

/* --- Layout primitives ---------------------------------------------------- */

.shell { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.prose { max-width: var(--measure); }

/* --- Masthead ------------------------------------------------------------- */

.masthead {
  padding-block: var(--space-m);
  border-bottom: var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--space-m);
  align-items: baseline; justify-content: space-between;
}
.masthead__wordmark {
  font-size: var(--step-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}
.masthead__wordmark span { color: var(--parchment-soft); }

.nav { display: flex; flex-wrap: wrap; gap: var(--space-m); list-style: none; margin: 0; padding: 0; }
.nav a {
  font-family: var(--font-plain);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--parchment-soft);
  padding-block: var(--space-2xs);
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--gold); }
.nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold-deep); }

/* --- Page header ---------------------------------------------------------- */

.page-head { padding-block: var(--space-2xl) var(--space-xl); }
.page-head__eyebrow {
  font-family: var(--font-plain);
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 var(--space-m);
}
.page-head__title {
  font-size: var(--step-5);
  line-height: var(--leading-tight);
  font-weight: 400;
  margin: 0 0 var(--space-m);
  color: var(--gold);
}
.page-head__standfirst {
  font-size: var(--step-1);
  color: var(--parchment-soft);
  max-width: var(--measure);
  margin: 0;
  font-style: italic;
}

/* --- Phase sections ------------------------------------------------------- */

.phase { padding-block: var(--space-xl); border-top: var(--rule); }

.phase__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-m); margin-bottom: var(--space-l); }
.phase__title {
  font-size: var(--step-3); font-weight: 400; margin: 0; color: var(--gold);
  letter-spacing: 0.01em;
}
.phase__days {
  font-family: var(--font-plain); font-size: var(--step--1);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--parchment-mute);
}
.phase__blurb { color: var(--parchment-soft); font-style: italic; max-width: var(--measure); margin: 0 0 var(--space-l); }

/* The Death: no events, and the design leans into that. Near-empty, sunk
   deeper than the rest of the page. Absence rendered as absence. */
.phase--death {
  background: var(--ink-abyss);
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  padding-block: var(--space-3xl);
  border-block: var(--rule);
}
.phase--death .phase__title { color: var(--parchment-mute); }
.phase--death .phase__blurb { color: var(--parchment-mute); max-width: 46ch; }

/* The Death section carries a single line and nothing else. With no
   supporting copy to sit against, it has to hold the space on its own —
   so it is set at display size, in the scripture face, given room. */
.phase--death__creed {
  font-size: var(--step-3);
  line-height: 1.25;
  color: var(--gold);
  font-style: italic;
  max-width: 24ch;
  margin: 0;
}

/* --- Event cards ---------------------------------------------------------- */

.events { display: grid; gap: var(--space-m); list-style: none; margin: 0; padding: 0; }

.event {
  background: var(--ink-raised);
  border: var(--rule);
  border-left: 2px solid var(--gold-deep);
  border-radius: var(--radius);
  padding: var(--space-l);
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.event:hover { border-left-color: var(--gold); }

.event__when {
  font-family: var(--font-plain);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 var(--space-xs);
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m);
}
.event__title { font-size: var(--step-2); font-weight: 400; line-height: var(--leading-tight); margin: 0 0 var(--space-s); color: var(--parchment); }
.event__hook { font-size: var(--step-1); font-style: italic; color: var(--gold); margin: 0 0 var(--space-m); max-width: var(--measure); }

.event__body { max-width: var(--measure); }
.event__body p { margin: 0 0 var(--space-m); }
.event__body p:last-child { margin-bottom: 0; }

/* Logistics: the plain-voice register. Deliberately unglamorous — this is the
   line that gets someone to actually show up on time with the right gear. */
.event__logistics {
  font-family: var(--font-plain);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--parchment-soft);
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  border-left: 2px solid var(--parchment-mute);
  padding: var(--space-s) var(--space-m);
  margin-top: var(--space-m);
  max-width: var(--measure);
}
.event__logistics b {
  display: block;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.82em;
  color: var(--parchment-mute);
  margin-bottom: var(--space-2xs);
}

.event__tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: var(--space-m) 0 0; padding: 0; }
.event__tags li {
  font-family: var(--font-plain);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--parchment-mute);
  border: var(--rule); border-radius: var(--radius);
  padding: 0.2em 0.6em;
}

/* --- Outside the narrative ----------------------------------------------
   Glass House. No gold, no scripture voice, no in-universe chrome. Camp said
   it "exists outside the narrative of Pachi" and the styling honors that
   literally — a sober space must not be dressed in the joke religion's
   vestments. Set in the plain face throughout. */

.event--sanctuary {
  border-left-color: var(--sanctuary-deep);
  font-family: var(--font-plain);
  background: none;
  border-color: var(--sanctuary-deep);
}
.event--sanctuary:hover { border-left-color: var(--sanctuary); }
.event--sanctuary .event__when { color: var(--sanctuary); }
.event--sanctuary .event__title { font-family: var(--font-plain); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; }
.event--sanctuary .event__hook { font-style: normal; color: var(--sanctuary); font-size: var(--step-0); }
.event--sanctuary .event__body { font-size: var(--step--1); line-height: 1.6; color: var(--parchment-soft); }
.event--sanctuary .event__logistics { border-left-color: var(--sanctuary-deep); }

/* --- Hero ----------------------------------------------------------------
   The art is portrait stained glass with "House of Pachi" already lettered
   into it, so it is treated as a window set into a wall — framed, lit from
   behind — rather than as a full-bleed background. A tall window beside the
   text reads as architecture; the same image stretched across the top reads
   as a stock header. */

.hero {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  padding-block: var(--space-2xl);
}
@media (min-width: 56rem) {
  .hero { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: var(--space-2xl); }
  .hero__window { order: 2; }
}

.hero__window {
  position: relative;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: var(--space-xs);
  background: var(--ink-abyss);
  /* Light spilling out from behind the glass. */
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5), 0 0 70px -18px var(--gold-dim), var(--shadow-lift);
  max-width: 34rem;
  margin-inline: auto;
}
.hero__window img { border-radius: 1px; width: 100%; }

.hero__title {
  font-size: var(--step-5);
  line-height: 0.95;
  font-weight: 400;
  margin: 0 0 var(--space-m);
  color: var(--gold);
  letter-spacing: -0.01em;
}
.hero__kicker {
  font-family: var(--font-plain);
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--flame);
  margin: 0 0 var(--space-m);
}
.hero__lede { font-size: var(--step-1); color: var(--parchment); max-width: 42ch; margin: 0 0 var(--space-m); }
.hero__sub  { color: var(--parchment-soft); max-width: var(--measure); margin: 0 0 var(--space-l); font-style: italic; }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.button {
  font-family: var(--font-plain);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-s) var(--space-l);
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius);
  color: var(--gold);
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.button:hover { background: var(--gold); color: var(--ink); }
/* Small qualifier inside a button — used to flag a link that leaves the site.
   Sits under the label rather than beside it so the button keeps its shape. */
.button__note {
  display: block;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.72em;
  color: var(--parchment-mute);
  margin-top: 0.35em;
}
.button:hover .button__note, .button:focus-visible .button__note { color: inherit; }

.button--quiet { border-color: var(--ink-hairline); color: var(--parchment-soft); }
.button--quiet:hover { background: none; border-color: var(--parchment-soft); color: var(--parchment); }

/* --- The cycle: three stained-glass panels ------------------------------- */

.cycle { display: grid; gap: var(--space-xl); padding-block: var(--space-xl); }
@media (min-width: 52rem) {
  .cycle { grid-template-columns: repeat(3, 1fr); gap: var(--space-l); align-items: start; }
}

.panel { display: flex; flex-direction: column; gap: var(--space-m); }
.panel__glass {
  border: 1px solid var(--gold-dim);
  padding: var(--space-2xs);
  background: var(--ink-abyss);
  box-shadow: 0 0 50px -20px var(--gold-dim);
}
.panel__numeral {
  font-family: var(--font-plain); font-size: var(--step--1);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep);
  margin: 0;
}
.panel__title { font-size: var(--step-2); font-weight: 400; margin: 0; color: var(--gold); line-height: var(--leading-tight); }
.panel__text { margin: 0; color: var(--parchment-soft); }

/* The Death panel is quieter than its neighbors in the labeling only — the
   image itself always shows at full strength. An earlier version dimmed the
   glass until hover; it hid the best image in the set from anyone who didn't
   happen to mouse over it, and did nothing at all on touch. */
.panel--death .panel__title, .panel--death .panel__numeral { color: var(--parchment-mute); }

/* --- Illuminated plates --------------------------------------------------
   The manuscript images carry their own lettering, which is unreadable at
   phone width and invisible to screen readers and search engines. So each
   plate ships as image + full transcription on a vellum card. The image is
   the illumination; the card is the text. Both are the real thing. */

.plate { padding-block: var(--space-xl); border-top: var(--rule); }
.plate__grid { display: grid; gap: var(--space-l); align-items: start; }
@media (min-width: 60rem) {
  .plate__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); }
  .plate:nth-of-type(even) .plate__figure { order: 2; }
}

.plate__figure { margin: 0; }
.plate__figure img {
  width: 100%;
  border: 1px solid var(--vellum-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
.plate__figure figcaption {
  font-family: var(--font-plain); font-size: var(--step--1);
  color: var(--parchment-mute); margin-top: var(--space-s);
  display: flex; justify-content: space-between; gap: var(--space-m);
}
.plate__figure a { color: var(--parchment-soft); }

/* Vellum card — dark ink on light, inverting the site on purpose so the
   transcription reads as a leaf of the codex rather than a caption. */
.vellum {
  background: var(--vellum);
  color: var(--vellum-ink);
  border: 1px solid var(--vellum-edge);
  border-radius: var(--radius);
  padding: var(--space-l);
  box-shadow: var(--shadow-lift);
}
.vellum__fig {
  font-family: var(--font-plain); font-size: var(--step--1);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rubric); margin: 0 0 var(--space-xs);
}
.vellum__title {
  font-size: var(--step-2); font-weight: 400; line-height: var(--leading-tight);
  margin: 0 0 var(--space-m); color: var(--vellum-ink);
}
.vellum p { margin: 0 0 var(--space-m); }
.vellum p:last-child { margin-bottom: 0; }
/* Drop cap, as on the plates themselves. */
.vellum__scripture > p:first-of-type::first-letter {
  float: left; font-size: 3.1em; line-height: 0.82;
  padding: 0.04em 0.09em 0 0; color: var(--rubric);
}
.vellum__moral {
  margin-top: var(--space-l); padding-top: var(--space-m);
  border-top: 1px solid var(--vellum-edge);
}
.vellum__moral h4 {
  font-size: var(--step-0); font-weight: 400; color: var(--rubric);
  margin: 0 0 var(--space-xs); letter-spacing: 0.01em;
}
.vellum__moral p { font-size: var(--step--1); line-height: 1.6; color: var(--vellum-soft); }
.vellum__latin {
  list-style: none; margin: var(--space-m) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-m);
  font-family: var(--font-plain); font-size: 0.78rem;
  letter-spacing: 0.1em; color: var(--rubric);
}
.vellum__latin span { color: var(--vellum-soft); display: block; letter-spacing: 0; font-style: italic; }

/* --- Location -----------------------------------------------------------
   The single most important fact on the site. Set at display size, tabular,
   readable across a dusty street at night. */

.where {
  display: flex; flex-wrap: wrap;
  gap: var(--space-xl);
  padding-block: var(--space-xl);
  align-items: flex-start;
}
.where__text { flex: 1 1 20rem; min-width: 0; }

/* The map gets the larger share — it carries fine print (street names, clock
   positions) that has to stay legible, and it is the single most useful thing
   on this page. Sits on its own white card because a city map should read as
   a document, not as decoration. */
.where__map { flex: 1 1 26rem; margin: 0; }
.where__map img {
  width: 100%;
  background: #fff;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: var(--space-s);
  box-shadow: var(--shadow-lift);
}
.where__map figcaption {
  font-family: var(--font-plain); font-size: var(--step--1);
  color: var(--parchment-mute); margin-top: var(--space-s);
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m);
  justify-content: space-between;
}

/* Emblem as a closing mark at the foot of the page. */
.emblem--sign-off { max-width: 15rem; margin-inline: auto; margin-top: var(--space-2xl); }

.where__address {
  font-size: var(--step-4);
  line-height: 1.05;
  color: var(--gold);
  margin: 0 0 var(--space-s);
  letter-spacing: -0.01em;
}
.where__address b { display: block; font-weight: 400; }
.where__cross {
  font-size: 0.5em; color: var(--parchment-mute); font-style: italic;
  display: block; margin-block: 0.15em;
}
.where__ring {
  font-family: var(--font-plain); font-size: var(--step--1);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--parchment-mute); margin: 0 0 var(--space-l);
}

.emblem {
  max-width: 26rem; margin-inline: auto;
  border: 1px solid var(--gold-dim);
  padding: var(--space-2xs);
  background: #000;
  box-shadow: 0 0 60px -20px var(--gold-dim), var(--shadow-lift);
}

/* Creed — the camp's own description, given room to breathe. */
.creed {
  border-left: 2px solid var(--gold-deep);
  padding: var(--space-m) 0 var(--space-m) var(--space-l);
  margin: 0 0 var(--space-l);
  max-width: var(--measure);
}
.creed p { font-size: var(--step-2); line-height: 1.35; color: var(--parchment); margin: 0; }

/* --- Contact -------------------------------------------------------------
   The last thing on the page and the only place that accepts a reply. Set
   large enough to read at a glance and to be legible in a photograph of the
   screen, which is how half of these actually get saved. */

.contact { display: grid; gap: var(--space-l); padding: 0; margin: 0 0 var(--space-l); list-style: none; }
@media (min-width: 38rem) { .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.contact li { border-top: 1px solid var(--gold-dim); padding-top: var(--space-s); }
.contact b {
  display: block;
  font-family: var(--font-plain); font-size: var(--step--1);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--parchment-mute); font-weight: 600;
  margin-bottom: var(--space-2xs);
}
.contact a {
  font-size: var(--step-1);
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-dim);
  overflow-wrap: anywhere;
}
.contact a:hover, .contact a:focus-visible { color: var(--parchment); border-bottom-color: var(--parchment); }

.detail-list { display: grid; gap: var(--space-l); padding: 0; margin: 0; list-style: none; }
@media (min-width: 44rem) { .detail-list { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.detail-list dt, .detail-list h3 {
  font-family: var(--font-plain); font-size: var(--step--1);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 var(--space-xs); font-weight: 600;
}
.detail-list p { margin: 0; color: var(--parchment-soft); }

/* --- Event with an illustration pane -------------------------------------
   Used where an event has a real photograph rather than devotional art. The
   image sits beside the copy instead of above it, so the card still scans as
   a schedule entry and not as a blog post. */

/* max-width lives on the base rule, not just inside the side-by-side layout,
   so the image stays small even if the flex container fails to apply for any
   reason. Degrading to "small image below the copy" is acceptable; degrading
   to "full-bleed photograph of soup" is not. */
.event__pane { margin: var(--space-m) 0 0; max-width: 14.3rem; }
.event__pane img {
  width: 100%; border-radius: var(--radius);
  border: 1px solid var(--ink-hairline);
}
.event__pane figcaption {
  font-family: var(--font-plain); font-size: 0.76rem;
  line-height: 1.5;
  letter-spacing: 0.06em; color: var(--parchment-mute);
  margin-top: var(--space-xs); font-style: italic;
}

/* Copy left, image right — with NO media query, deliberately.

   Two earlier attempts failed for different reasons: `grid-row: 1 / -1` with
   no explicit rows silently collapsed to one row, and then a min-width: 46rem
   breakpoint simply didn't match a browser window narrower than 736px. Flex
   wrapping removes the guesswork: the two panes sit side by side whenever
   their flex-basis values both fit, and drop to stacked when they don't. The
   layout responds to the actual space available rather than to an assumption
   about the viewport. */
.event--illustrated {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
  align-items: flex-start;
}
.event--illustrated .event__copy { flex: 1 1 16rem; min-width: 0; }
.event--illustrated .event__pane { flex: 0 0 14.3rem; margin: 0; }

/* --- The Books -----------------------------------------------------------
   Four codices, one of them mostly lost. Numbered in the margin like a
   manuscript, with the fourth deliberately degraded. */

.books { display: grid; gap: var(--space-l); padding: 0; margin: 0; list-style: none; counter-reset: book; }

/* A Book is a flex row: the text block, and — on the three Books that mark a
   station of the Cycle — a stained-glass panel beside it. Flex wrap rather
   than a breakpoint, so the panel drops below the text only when there is
   genuinely no room for it. */
.book {
  counter-increment: book;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
  align-items: flex-start;
  padding-block: var(--space-l);
  border-top: var(--rule);
}
.book__main {
  flex: 1 1 22rem;
  min-width: 0;
  display: grid; gap: var(--space-s) var(--space-l);
  grid-template-columns: 3.5rem minmax(0, 1fr);
}
.book__main::before {
  content: counter(book, upper-roman);
  grid-row: 1 / span 3;
  font-family: var(--font-scripture);
  font-size: var(--step-4);
  line-height: 0.85;
  color: var(--gold-dim);
}

/* The panel. Sized like the schedule's gazpacho pane for consistency, with
   the same max-width safety net on the base rule. */
.book__plate { flex: 0 0 14.3rem; max-width: 14.3rem; margin: 0; }
.book__plate .panel__glass { margin: 0; }
.book__plate figcaption {
  font-family: var(--font-plain); font-size: var(--step--1);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep); margin-top: var(--space-s);
}
.book__plate figcaption em {
  display: block; letter-spacing: 0; text-transform: none;
  font-style: italic; color: var(--parchment-mute);
  font-family: var(--font-scripture); font-size: var(--step-0);
  margin-top: var(--space-2xs);
}
/* Book the Third is the unlearning — the panel is dimmed to match the
   doctrine, not hidden. */
.book--lost .book__plate figcaption { color: var(--parchment-mute); }
.book__title { font-size: var(--step-2); font-weight: 400; margin: 0; color: var(--gold); line-height: var(--leading-tight); }
/* "Book the First:" runs inline with the title rather than sitting above it
   as an eyebrow, so the heading reads as one continuous line. The number keeps
   a muted tone so the name still carries the emphasis. */
.book__title span { color: var(--parchment-mute); }
.book__text { margin: 0; color: var(--parchment-soft); max-width: var(--measure); }
.book__text + .book__text { margin-top: var(--space-s); }
.book__gloss {
  grid-column: 2;
  font-family: var(--font-plain); font-size: var(--step--1);
  color: var(--parchment-mute); font-style: italic;
  border-left: 2px solid var(--ink-hairline); padding-left: var(--space-m);
  max-width: var(--measure); margin: var(--space-xs) 0 0;
}

/* The Fourth Book survives only in fragments held by rival factions. */
.book--lost::before { color: var(--parchment-mute); opacity: 0.5; }
.book--lost .book__title { color: var(--parchment-soft); }
.book--lost .book__text { color: var(--parchment-mute); }

.fragments { display: grid; gap: var(--space-s); padding: 0; margin: var(--space-m) 0 0; list-style: none; grid-column: 2; }
@media (min-width: 44rem) { .fragments { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.fragments li {
  border: var(--rule); border-radius: var(--radius);
  padding: var(--space-s) var(--space-m);
  font-family: var(--font-plain); font-size: var(--step--1);
  color: var(--parchment-soft);
  background: var(--ink-raised);
}
.fragments b { display: block; color: var(--gold-deep); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.74rem; margin-bottom: var(--space-2xs); }

/* --- The Schism ----------------------------------------------------------
   Two readings of the same text, set as opposing columns so the page itself
   argues. Neither is given the visual upper hand. */

.schism { display: grid; gap: var(--space-l); margin-block: var(--space-l); }
@media (min-width: 52rem) { .schism { grid-template-columns: 1fr 1fr; } }

.creed-card {
  border: var(--rule); border-radius: var(--radius);
  padding: var(--space-l);
  background: var(--ink-raised);
  display: flex; flex-direction: column; gap: var(--space-s);
}
.creed-card--ours { border-color: var(--gold-deep); border-left-width: 2px; }
.creed-card__tag {
  font-family: var(--font-plain); font-size: 0.74rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0;
}
.creed-card--theirs .creed-card__tag { color: var(--parchment-mute); }
.creed-card__name { font-size: var(--step-2); font-weight: 400; margin: 0; color: var(--gold); line-height: var(--leading-tight); }
.creed-card--theirs .creed-card__name { color: var(--parchment); }
.creed-card p { margin: 0; color: var(--parchment-soft); }
.creed-card__note {
  margin-top: auto; padding-top: var(--space-m);
  border-top: var(--rule);
  font-family: var(--font-plain); font-size: var(--step--1);
  color: var(--parchment-mute);
}

/* --- Unresolved doctrine -------------------------------------------------
   Open questions, presented as open. The point is the withholding. */

.disputed { display: grid; gap: var(--space-m); padding: 0; margin: 0; list-style: none; }
@media (min-width: 46rem) { .disputed { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.disputed li {
  border-top: 1px solid var(--gold-dim);
  padding-top: var(--space-m);
}
.disputed h3 { font-size: var(--step-1); font-weight: 400; margin: 0 0 var(--space-xs); color: var(--gold); }
.disputed p { margin: 0; color: var(--parchment-soft); font-size: var(--step--1); font-family: var(--font-plain); line-height: 1.6; }

/* --- At a glance ---------------------------------------------------------
   The whole week in one scan, chronological, above the detailed sections.
   A real <table> because it is real tabular data — screen readers announce
   the row and column relationships, which a stack of divs cannot. */

.glance { margin-block: var(--space-l) var(--space-2xl); }
.glance__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-plain);
  font-size: var(--step--1);
}
.glance__table caption {
  text-align: left;
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-bottom: var(--space-s);
}
.glance__table th {
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--parchment-mute);
  padding: 0 var(--space-m) var(--space-xs) 0;
  border-bottom: 1px solid var(--gold-dim);
  white-space: nowrap;
}
.glance__table td {
  padding: var(--space-s) var(--space-m) var(--space-s) 0;
  border-bottom: var(--rule);
  vertical-align: baseline;
  color: var(--parchment-soft);
}
.glance__table tr:last-child td { border-bottom: none; }
.glance__day  { white-space: nowrap; color: var(--parchment); }
.glance__time { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--parchment); }
.glance__what a {
  font-family: var(--font-scripture);
  font-size: var(--step-0);
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.glance__what a:hover, .glance__what a:focus-visible { border-bottom-color: var(--gold-deep); }
.glance__note { display: block; color: var(--parchment-mute); font-size: 0.78rem; margin-top: 0.15em; }

/* The mid-week gap gets a row of its own — it explains the hole in the
   schedule rather than leaving people to wonder if we forgot Tuesday. */
.glance__row--gap td { color: var(--parchment-mute); font-style: italic; }
.glance__row--gap .glance__day { color: var(--parchment-mute); }

/* Below ~34rem the Day/Time columns are dropped from the table flow and
   reflowed above the event name, so nothing is truncated or side-scrolled. */
@media (max-width: 34rem) {
  .glance__table, .glance__table tbody, .glance__table tr, .glance__table td { display: block; width: 100%; }
  .glance__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .glance__table tr { border-bottom: var(--rule); padding-block: var(--space-s); }
  .glance__table tr:last-child { border-bottom: none; }
  .glance__table td { border: none; padding: 0 0 var(--space-2xs); }
  .glance__day, .glance__time { display: inline; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); }
  .glance__day::after { content: " · "; }
  .glance__what { padding-top: var(--space-2xs); }
}

/* --- About / history -----------------------------------------------------
   The group shot leads, full width, because it is the single most persuasive
   thing on the site: it answers "what would it be like to be there" in a way
   no illustration can. */

.about__lead { margin: 0 0 var(--space-xl); }
.about__lead img {
  width: 100%;
  border: 1px solid var(--ink-hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
.about__lead figcaption {
  font-family: var(--font-plain); font-size: var(--step--1);
  color: var(--parchment-mute); margin-top: var(--space-s);
  font-style: italic;
}

/* Three names, ten years. A spine for the history that follows. */
.eras {
  display: grid; gap: var(--space-m);
  list-style: none; margin: 0 0 var(--space-xl); padding: 0;
}
@media (min-width: 40rem) { .eras { grid-template-columns: repeat(3, 1fr); } }
.eras li {
  border-top: 1px solid var(--gold-dim);
  padding-top: var(--space-s);
}
.eras b {
  display: block;
  font-family: var(--font-plain); font-size: var(--step--1);
  letter-spacing: 0.2em; color: var(--gold-deep);
  font-weight: 600; margin-bottom: var(--space-2xs);
}
.eras span { font-size: var(--step-1); color: var(--parchment); }
.eras em { display: block; font-size: var(--step--1); color: var(--parchment-mute); font-style: normal; font-family: var(--font-plain); margin-top: var(--space-2xs); }
.eras li:last-child b { color: var(--flame); }

.about__body { max-width: var(--measure); }
.about__body p { margin: 0 0 var(--space-m); }
.about__body p:last-child { margin: 0; }
.about__body .lede { font-size: var(--step-1); color: var(--parchment); }

/* --- Gallery -------------------------------------------------------------
   An archive rather than a slideshow. Every piece at a readable size with a
   link to the full-resolution original, because campmates and neighbouring
   camps will want these files for stickers, patches, and flyers. */

.gallery { display: grid; gap: var(--space-l); padding: 0; margin: 0; list-style: none; }
@media (min-width: 40rem) { .gallery { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } }

.work { display: flex; flex-direction: column; gap: var(--space-s); margin: 0; }
.work__frame {
  border: 1px solid var(--gold-dim);
  padding: var(--space-2xs);
  background: var(--ink-abyss);
  box-shadow: 0 0 40px -18px var(--gold-dim);
  transition: border-color 200ms var(--ease);
}
.work a:hover .work__frame, .work a:focus-visible .work__frame { border-color: var(--gold); }
.work a { text-decoration: none; display: block; }
.work__title { font-size: var(--step-0); color: var(--parchment); margin: 0; }
.work__meta {
  font-family: var(--font-plain); font-size: 0.76rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--parchment-mute); margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m);
}

/* --- Download / call-to-action strip ------------------------------------ */

.strip {
  border: var(--rule); border-left: 2px solid var(--gold-deep);
  border-radius: var(--radius);
  background: var(--ink-raised);
  padding: var(--space-l);
  display: flex; flex-wrap: wrap; gap: var(--space-m);
  align-items: center; justify-content: space-between;
  margin-block: var(--space-l);
}
.strip__text { max-width: 46ch; }
.strip h3 { font-size: var(--step-1); font-weight: 400; margin: 0 0 var(--space-2xs); color: var(--gold); }
.strip p { margin: 0; color: var(--parchment-soft); font-family: var(--font-plain); font-size: var(--step--1); }

/* --- Footer -------------------------------------------------------------- */

.footer {
  margin-top: var(--space-2xl);
  border-top: var(--rule);
  padding-block: var(--space-xl) var(--space-2xl);
  font-family: var(--font-plain);
  font-size: var(--step--1);
  color: var(--parchment-mute);
}
.footer p { max-width: var(--measure); margin: 0 0 var(--space-s); }
.footer__welcome { color: var(--parchment-soft); font-family: var(--font-scripture); font-size: var(--step-0); font-style: italic; }

/* --- Print: the manuscript, actually on paper ---------------------------- */
@media print {
  body { background: #fff; color: #000; background-image: none; }
  .masthead, .nav, .skip-link, .footer { display: none; }
  .event { border: 1px solid #999; break-inside: avoid; page-break-inside: avoid; }
  .phase--death { background: none; }
}