/* Local-history stories — the small additions the shared guide design lacks.
   A story (/stag-island, /sarnia/history, /sarnia/gladstone-shipwreck,
   /sarnia/st-clair-tunnel) is set on guide-editorial.css: the same Playfair
   and Inter, the same ink and one accent, the same header, hero, drop-cap
   lede and "In this story" rail, the same sources line and newsletter band.
   What a story has that a town guide does not is a run of numbered chapters
   read straight down, with the odd wide photograph, pull quote, timeline or
   quiet note in the flow, and a "More stories" row at the end. Those pieces
   live here, written in the --ge-* tokens so the accent and type stay in
   step. Everything is scoped to .ge-main; the shared navigation belongs to
   nav-footer.css (see CLAUDE.md). */

/* ---------- chapters ---------- */
.st-chapter { padding-bottom: 3rem; }
@media (min-width: 768px) { .st-chapter { padding-bottom: 4.5rem; } }
/* guide-editorial.css resets .ge-main h2 and figure margins to 0, which outranks
   a bare class; the .ge-main prefix is what lets these margins apply (29 September
   2026: every chapter heading sat directly on its photo). */
.ge-main .st-chapter-title { margin-top: .75rem; max-width: 760px; font-family: var(--ge-serif); font-weight: 400; font-size: 32px; line-height: 1.15; letter-spacing: -.02em; }
@media (min-width: 768px) { .st-chapter-title { font-size: 40px; } }
.st-prose { margin-top: 1.5rem; max-width: 720px; }
.st-prose p + p { margin-top: 1.25rem; }
.st-prose strong { color: var(--ge-ink); font-weight: 600; }
.st-prose a { color: var(--ge-accent); text-decoration: underline; text-underline-offset: 3px; }
/* Prose that follows a figure, a note or a list picks up again with a little air. */
.st-figure + .st-prose, .st-note + .st-prose, .st-list + .st-prose, .ge-timeline + .st-prose { margin-top: 2rem; }

/* ---------- figures ---------- */
.ge-main .st-figure { margin-top: 2.25rem; max-width: 960px; }
.st-figure img { width: 100%; height: auto; }
.st-figure--wide { max-width: none; }
/* A historic photograph keeps its own proportions on the sand, never cropped. */
.st-figure--plate img { background: var(--ge-sand); }
.st-figure .caption { max-width: 720px; }

/* ---------- quiet note (a parent's question, a safety line) ---------- */
.st-note { margin-top: 2rem; max-width: 720px; padding: 1.25rem 1.5rem; background: var(--ge-sand); font-size: .875rem; line-height: 1.75; color: var(--ge-muted); }
.st-note .eyebrow { display: block; margin-bottom: .5rem; }
.st-note p + p { margin-top: .6rem; }
.st-note strong { color: var(--ge-ink); font-weight: 600; }

/* ---------- a short fact strip in the intro ---------- */
.st-facts { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--ge-line); }
.st-facts .ge-facts { margin-top: 0; }

/* ---------- a timeline inside a chapter ---------- */
.st-chapter .ge-timeline { max-width: 760px; }

/* ---------- a register of named things (the wreck sites) ---------- */
.st-list { display: grid; grid-template-columns: 1fr; margin: 1.5rem 0 0; max-width: 960px; border-top: 1px solid var(--ge-line); }
@media (min-width: 640px) { .st-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
.st-list div { padding: .75rem 0; border-bottom: 1px solid var(--ge-line); font-size: 14px; line-height: 1.6; color: var(--ge-muted); }
.st-list dt { font-weight: 600; color: var(--ge-ink); }
.st-list dd { margin: 0; }

/* ---------- more stories ---------- */
/* Two other stories, so two across from tablet width; the guide's three-up
   grid would leave a third of the row empty. */
.st-more .ge-columns--rows { margin-top: 2rem; gap: 2.5rem 2.25rem; max-width: 960px; }
@media (min-width: 640px) { .st-more .ge-columns--rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-more .ge-card { margin-bottom: 0; }
.st-more .ge-card h3 { font-size: 24px; }
@media (min-width: 768px) { .st-more .ge-card h3 { font-size: 26px; } }
.st-more .ge-more { margin-top: 2.5rem; }
.st-more .ge-card-foot { margin-top: .5rem; }

/* ---------- the rail on a story ---------- */
/* A story is read top to bottom, so on a phone the rail sits after the lede
   and stays short: chapter names only. */
.ge-body--story .ge-toc-nav a { padding: .4rem 0; }