/*
 * /story/ — "Our Story".
 *
 * Two archive plates and nothing else (see page-story.php docblock), so
 * between them the facade's own visual language — the arch, the peachblow
 * palette, the fat display face — still carries the page. Three components
 * do the work:
 *
 * .plate is the archive frame. Deliberately NOT .arch: the arch is this
 * build's mask for production photography, and a historic document cropped
 * into a decorative shape stops reading as evidence. A plate runs unmasked
 * on a --stone-200 mount at its own aspect, and .plate--tall caps the width
 * of the portrait Kilburn view so a 1371x1536 plate does not open a
 * thousand-pixel hole in the middle of the page.
 *
 * .chronicle is the spine. Each era gets a big display-face year range above
 * its heading rather than a numbered list item; the client's own current site
 * already organizes this history into named eras, and a bare "1." would flat
 * out contradict the no-decorative-numbering rule for a *history timeline*
 * specifically, which is the one example the rule calls out by name.
 *
 * .period-quote carries the two standalone period quotations (the 1889
 * opening notice, the 1912 arson headline) at display scale, left-ruled in
 * the accent the way a program note is ruled off from the page around it.
 *
 * Colour: every accent-as-text pairing here reuses an existing verified
 * combination from theme.css rather than inventing a new one — --ember on
 * --paper (5.2:1, used everywhere already) and --accent on --night (the same
 * pairing .marquee__time and .eyebrow--night already rely on, ~6:1 by
 * construction since --night is oklch 17.8% and --accent is a mid-tone).
 * FIELD tokens here are borders and large display type only, never small text.
 */

/* ------------------------------------------------------------------ hero -- */

.story-hero__mark {
  --fan: 5.5rem;
  margin-bottom: 1.5rem;
}

.story-hero__lede { margin-bottom: 2rem; }

/* -------------------------------------------------------- archive plates -- */

.plate {
  margin: 2.5rem 0 0;
}

.plate img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--stone-200);
}

/* The one portrait plate in the build. Capped so it stays a plate. */
.plate--tall { max-width: 34rem; }

/*
 * A plate that is an entry in the chronicle picks up the spine and the
 * flex gap, so the timeline's rule runs down past the photograph instead of
 * stopping above it and leaving the image parked at the section's edge.
 */
.chronicle__plate {
  margin: 0;
  padding-left: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-left: 3px solid var(--stone-300);
}

/* --------------------------------------------------------- period quotes -- */

.period-quote {
  max-width: 42rem;
  margin: 1.75rem 0 0;
  padding-left: clamp(1.1rem, 0.85rem + 1vw, 1.6rem);
  border-left: 3px solid var(--accent);
}

.period-quote p {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 1.18;
  max-width: none;
}

.period-quote--headline p {
  font-size: var(--step-1);
  line-height: 1.3;
}

.period-quote footer {
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.bay--night .period-quote footer { color: var(--stone-300); }

.period-quote cite { font-style: normal; }

/* ------------------------------------------------------------ chronicle -- */

.chronicle {
  display: flex;
  flex-direction: column;
  gap: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
  margin-top: 2rem;
}

.chronicle__era {
  padding-left: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-left: 3px solid var(--stone-300);
}

.bay--night .chronicle__era { border-left-color: rgb(251 242 236 / 0.3); }

.chronicle__years {
  margin: 0 0 0.3rem;
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 1.05;
  color: var(--ember);
}

.bay--night .chronicle__years { color: var(--accent); }

.chronicle__era h3 {
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.chronicle__era p + p { margin-top: 1rem; }

/* --------------------------------------------------------------- today -- */

.story-today__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.75rem;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 46rem) {
  .story-hero__mark { --fan: 4rem; }

  .period-quote p { font-size: var(--step-1); }

  .period-quote--headline p { font-size: var(--step-0); }

  .chronicle__years { font-size: var(--step-1); }
}