/* Editorial town guides — shared stylesheet.
   The design is the Sarnia editorial page (/sarnia) written as plain CSS so the
   other guides can share it without a build step: Playfair Display and Inter
   (self-hosted under /assets/sarnia-editorial/fonts), thin rules, one accent
   per guide, asymmetric grids, and the same components (hero, drop-cap lede,
   "In this guide" rail, feature stories with "If you go" footers, columned favourites
   with parent details, find-something rows, before-you-go disclosures, and the
   newsletter band).

   Everything here is scoped to .ge-main / .ge-band. It must never style the
   shared navigation: .lfhx-header, .lfhx-footer, #lfhx-menu and
   .mobile-bottom-nav belong to nav-footer.css (see CLAUDE.md). */

:root {
  --ge-sans: "Inter", Arial, sans-serif;
  --ge-serif: "Playfair", Georgia, serif;
  --ge-ink: #283339;
  --ge-muted: #57656b;
  --ge-line: #d4dcdd;
  --ge-white: #fff;
  /* The accent is the one colour a guide is allowed. Sarnia's is lake blue. */
  --ge-accent: #315f73;
  --ge-accent-dark: #23495b;
  --ge-sand: #f2f5f3;
  --ge-accent-soft: rgba(49, 95, 115, 0.4);
}
/* One accent per guide, each a blue chosen from the place (owner, 19
   September 2026: per town, in blues; the greens, olive, teal and rust went):
   Petrolia's night sky over the derricks, Grand Bend's lake at noon, the
   Ausable channel, the Huron shore at Plympton, the St. Clair River, the
   Warwick sky over the reed beds. Every one clears 5.5:1 as white on the
   fill and as text on white. */
body[data-guide="petrolia"]          { --ge-accent: #3b4f8a; --ge-accent-dark: #2c3c6b; --ge-sand: #f0f2f7; --ge-accent-soft: rgba(59, 79, 138, 0.4); }
body[data-guide="grand-bend"]        { --ge-accent: #1e6a9c; --ge-accent-dark: #165077; --ge-sand: #eef3f7; --ge-accent-soft: rgba(30, 106, 156, 0.4); }
body[data-guide="lambton-shores"]    { --ge-accent: #2b6f8e; --ge-accent-dark: #1f546c; --ge-sand: #eef3f6; --ge-accent-soft: rgba(43, 111, 142, 0.4); }
body[data-guide="plympton-wyoming"]  { --ge-accent: #237087; --ge-accent-dark: #1a5566; --ge-sand: #edf3f5; --ge-accent-soft: rgba(35, 112, 135, 0.4); }
body[data-guide="st-clair-township"] { --ge-accent: #2c4a6b; --ge-accent-dark: #1f3650; --ge-sand: #eef2f5; --ge-accent-soft: rgba(44, 74, 107, 0.4); }
body[data-guide="warwick"]           { --ge-accent: #4a5f85; --ge-accent-dark: #384866; --ge-sand: #f0f2f6; --ge-accent-soft: rgba(74, 95, 133, 0.4); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.ge-body {
  margin: 0;
  background: var(--ge-white);
  color: var(--ge-ink);
  font-family: var(--ge-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- resets, scoped to the article ---------- */
.ge-main, .ge-main *, .ge-main *::before, .ge-main *::after { box-sizing: border-box; }
.ge-main h1, .ge-main h2, .ge-main h3, .ge-main p, .ge-main figure, .ge-main dl, .ge-main dd { margin: 0; }
.ge-main img { display: block; max-width: 100%; height: auto; }
.ge-main a { color: inherit; text-decoration: none; }
.ge-main button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ge-main summary { list-style: none; cursor: pointer; }
.ge-main summary::-webkit-details-marker { display: none; }
.ge-main a:focus-visible, .ge-main button:focus-visible, .ge-main summary:focus-visible, .ge-main select:focus-visible {
  outline: 2px solid var(--ge-accent); outline-offset: 4px;
}
.ge-main section[id], .ge-main article[id] { scroll-margin-top: 5.5rem; }
.ge-main [hidden] { display: none !important; }

/* ---------- primitives ---------- */
.ge-skip {
  position: absolute; left: 1rem; top: -5rem; z-index: 200;
  background: var(--ge-accent); color: #fff; padding: .75rem 1.25rem;
  font: 500 .875rem/1.2 var(--ge-sans); text-decoration: none;
}
.ge-skip:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.shell { width: 100%; max-width: 1320px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
@media (min-width: 640px)  { .shell { padding-left: 2.5rem; padding-right: 2.5rem; } }
@media (min-width: 1024px) { .shell { padding-left: 4rem;   padding-right: 4rem; } }

.eyebrow { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: var(--ge-accent); }
@media (min-width: 640px) { .eyebrow { font-size: 11px; } }
.section-title { font-family: var(--ge-serif); font-weight: 400; font-size: 2.25rem; line-height: 1.12; letter-spacing: -.025em; }
@media (min-width: 768px) { .section-title { font-size: 46px; } }
.body-copy { font-size: 16px; line-height: 1.85; color: rgba(40, 51, 57, .9); }
@media (min-width: 768px) { .body-copy { font-size: 17px; } }
.text-link {
  display: inline-flex; min-height: 2.75rem; align-items: center; gap: .5rem;
  padding: .5rem 0; border-bottom: 1px solid transparent;
  font-size: .875rem; font-weight: 600; color: var(--ge-accent);
  transition: border-color .2s;
}
.text-link:hover { border-color: var(--ge-accent); }
.icon { display: inline-block; width: 18px; height: 18px; flex-shrink: 0; }
.icon--invert { filter: invert(1); }
.caption { margin-top: .75rem; font-size: 11px; line-height: 1.6; color: var(--ge-muted); }
.caption a, .ge-hero-cap a { text-decoration: underline; text-underline-offset: 2px; }
.ge-muted { color: var(--ge-muted); }
.ge-small { font-size: .875rem; line-height: 1.75; color: var(--ge-muted); }
.ge-inline { color: var(--ge-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- article header ---------- */
.ge-head { padding-top: 2rem; padding-bottom: 2rem; }
@media (min-width: 768px) { .ge-head { padding-top: 3rem; padding-bottom: 2.5rem; } }
.ge-kicker { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 1.25rem; font-size: 11px; color: var(--ge-muted); }
.ge-kicker a:hover { color: var(--ge-accent); text-decoration: underline; text-underline-offset: 3px; }
.ge-title {
  font-family: var(--ge-serif); font-weight: 600;
  font-size: clamp(3.2rem, 6.3vw, 5.7rem); line-height: 1.06; letter-spacing: -.055em;
}
.ge-deck { margin-top: 1rem; font-family: var(--ge-serif); font-weight: 400; font-size: 26px; line-height: 1.25; letter-spacing: -.015em; }
@media (min-width: 768px) { .ge-deck { font-size: 36px; } }
.ge-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: 1.5rem; font-size: 11px; color: var(--ge-muted); }
@media (min-width: 640px) { .ge-meta { font-size: 12px; } }

/* ---------- hero ---------- */
.ge-hero-frame { position: relative; margin: 0 auto; max-width: 1920px; overflow: hidden; background: var(--ge-sand); }
.ge-hero-img { width: 100%; height: 290px; object-fit: cover; object-position: 50% 50%; }
@media (min-width: 640px)  { .ge-hero-img { height: 400px; } }
@media (min-width: 1024px) { .ge-hero-img { height: 490px; } }
.ge-hero-quote {
  display: none; position: absolute; right: 8%; top: 2rem; max-width: 175px;
  background: rgba(255,255,255,.95); padding: 1.25rem;
  font-family: var(--ge-serif); font-style: italic; font-size: 23px; line-height: 1.25; color: var(--ge-accent);
}
@media (min-width: 1280px) { .ge-hero-quote { display: block; } }
.ge-hero-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-top: .75rem; font-size: 10px; line-height: 20px; color: var(--ge-muted); }
/* .ge-main img sets height:auto with higher specificity than .ge-hero-img's own
   height, so the plain (non-split) hero silently renders at full native aspect
   ratio instead of the capped height above -- a latent bug on every guide using
   this hero variant. Fixing it here rather than in the shared rule, scoped to
   this guide only, since a site-wide fix is out of scope for this pass. */
body[data-guide="lambton-shores"] .ge-hero-img { height: 290px; }
@media (min-width: 640px)  { body[data-guide="lambton-shores"] .ge-hero-img { height: 400px; } }
@media (min-width: 1024px) { body[data-guide="lambton-shores"] .ge-hero-img { height: 490px; } }

/* A split hero for a photograph that should not be stretched: the picture at
   its true width, and a sand panel carrying the guide's opening facts. */
.ge-hero-split { display: grid; background: var(--ge-sand); }
@media (min-width: 900px) { .ge-hero-split { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); } }
.ge-hero-split .ge-hero-img { height: 290px; }
@media (min-width: 640px) { .ge-hero-split .ge-hero-img { height: 400px; } }
@media (min-width: 900px) { .ge-hero-split .ge-hero-img { height: 100%; min-height: 460px; } }
.ge-hero-panel { padding: 1.75rem 1.5rem 2rem; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 640px) { .ge-hero-panel { padding: 2.25rem 2.5rem; } }
.ge-hero-panel .ge-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ge-hero-panel .ge-quote { font-family: var(--ge-serif); font-style: italic; font-size: 26px; line-height: 1.25; color: var(--ge-accent); }
@media (min-width: 1024px) { .ge-hero-panel .ge-quote { font-size: 30px; } }

/* Fact strip: three or four short numbers a family can carry in their head. */
.ge-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1.25rem 1.5rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--ge-line); }
.ge-facts div { min-width: 0; }
.ge-facts strong { display: block; font-family: var(--ge-serif); font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: -.02em; color: var(--ge-ink); }
.ge-facts span { display: block; margin-top: .4rem; font-size: 11px; line-height: 1.5; color: var(--ge-muted); text-transform: uppercase; letter-spacing: .12em; }

/* ---------- intro: lede + rail ---------- */
.ge-intro { display: grid; gap: 2.5rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 768px) { .ge-intro { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 5rem; padding-top: 3.5rem; padding-bottom: 3.5rem; } }
.ge-lede::first-letter { float: left; margin-right: .75rem; font-family: var(--ge-serif); font-size: 86px; line-height: .84; color: var(--ge-ink); }
.ge-intro .body-copy + .body-copy { margin-top: 1.5rem; }
.ge-main .ge-pull { margin-top: 2.5rem; max-width: 490px; padding-left: 1.25rem; border-left: 1px solid var(--ge-accent); font-family: var(--ge-serif); font-style: italic; font-size: 1.25rem; line-height: 1.6; color: var(--ge-accent); }
.ge-toc { align-self: start; background: var(--ge-sand); padding: 1.75rem; }
@media (min-width: 640px) { .ge-toc { padding: 2rem; } }
.ge-toc-nav { margin-top: 1rem; padding-left: 1rem; border-left: 1px solid var(--ge-accent-soft); font-size: 13px; }
.ge-toc-nav a { display: block; padding: .5rem 0; }
.ge-toc-nav a:hover { color: color-mix(in srgb, var(--ge-accent) 65%, white); text-decoration: underline; text-underline-offset: 3px; }
.ge-btn {
  display: flex; min-height: 3rem; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.5rem; padding: .75rem 1.25rem; background: var(--ge-accent); color: #fff;
  font-size: .875rem; font-weight: 500; transition: background-color .2s;
}
.ge-btn:hover { background: var(--ge-accent-dark); }
/* The article reset (.ge-main a { color: inherit }) outranks .ge-btn on its own,
   which left the button's label in dark ink on the brown fill on phones. */
.ge-main a.ge-btn { color: #fff; }

/* ---------- section furniture ---------- */
.ge-sec { padding-bottom: 3rem; }
@media (min-width: 768px) { .ge-sec { padding-bottom: 5rem; } }
.ge-sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; padding: 2rem 0 1.75rem; border-top: 1px solid var(--ge-line); }
.ge-sec-intro { display: grid; gap: 1.25rem; margin-bottom: 2.5rem; }
@media (min-width: 768px) { .ge-sec-intro { grid-template-columns: 1.3fr 1fr; align-items: end; } }
.ge-sec-intro p.ge-small { max-width: 420px; }
@media (min-width: 768px) { .ge-sec-intro p.ge-small { justify-self: end; } }
.ge-sec-intro .section-title { margin-top: .75rem; }

/* ---------- stories ---------- */
.ge-story-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .ge-story-grid { grid-template-columns: minmax(0, 1fr) 230px; gap: 3rem; } }
.ge-stories { display: grid; gap: 2.25rem; }
.ge-story { display: grid; gap: 1.5rem; padding-bottom: 2.25rem; border-bottom: 1px solid var(--ge-line); }
@media (min-width: 640px) { .ge-story { grid-template-columns: .95fr 1fr; } }
.ge-story:last-child { border-bottom: 0; }
.ge-story--wide { grid-template-columns: 1fr; }
@media (min-width: 640px) { .ge-story--wide { grid-template-columns: 1.15fr .85fr; } }
/* The alternating photo side is a wide-screen rhythm; on a phone every story opens with its photo. */
@media (min-width: 640px) { .ge-story--flip figure { order: 2; } }
.ge-story figure a { display: block; overflow: hidden; }
.ge-story-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ge-story-img--tall { aspect-ratio: 4 / 5; }
.ge-story-img--natural { aspect-ratio: auto; }
.ge-story h3 { margin-top: .75rem; font-family: var(--ge-serif); font-weight: 400; font-size: 29px; line-height: 1.16; letter-spacing: -.02em; }
@media (min-width: 768px) { .ge-story h3 { font-size: 34px; } }
.ge-story-body { margin-top: 1rem; font-size: 15px; line-height: 1.8; color: var(--ge-muted); }
.ge-story-body p + p { margin-top: .9rem; }
.ge-story-body strong { color: var(--ge-ink); font-weight: 600; }
.ge-story .ge-note { margin-top: .75rem; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--ge-accent); }
/* "If you go": the practical footer a story can carry, so a landmark is told once
   and the reader is never sent back down the page to find its details again. */
.ge-story-go { margin-top: 1.5rem; padding: 1.25rem 1.5rem; background: var(--ge-sand); font-size: .875rem; line-height: 1.75; color: var(--ge-muted); }
.ge-story-go p + p { margin-top: .6rem; }
.ge-story-go-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: .25rem; }
/* A photo of the place itself can lead the box, bleeding to its edges. */
.ge-story-go .ge-story-go-fig { margin: -1.25rem -1.5rem 1rem; }
.ge-story-go-fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ge-story-go-fig--square img { aspect-ratio: 1 / 1; }
.ge-story-go-fig .caption { padding: 0 1.5rem; }
.ge-reflect { align-self: start; }
@media (min-width: 1024px) { .ge-reflect { position: sticky; top: 6rem; } }
@media (max-width: 700px) { body[data-guide="grand-bend"] .ge-reflect { display: none; } }
.ge-reflect p:first-child { font-family: var(--ge-serif); font-style: italic; font-size: 32px; line-height: 1.24; letter-spacing: -.02em; color: var(--ge-accent); }
.ge-reflect .eyebrow { margin-top: 1.5rem; }

/* A short timeline: years down the left, one line each. */
.ge-timeline { margin-top: 2rem; border-top: 1px solid var(--ge-line); }
/* A timeline that closes a run of stories hangs off the last story's own rule
   instead of drawing a second one under it. */
.ge-story + .ge-timeline { margin-top: 0; border-top: 0; }
.ge-timeline div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--ge-line); font-size: 14px; line-height: 1.6; color: var(--ge-muted); }
.ge-timeline dt { font-family: var(--ge-serif); font-size: 22px; line-height: 1.1; color: var(--ge-ink); }
.ge-timeline dd strong { color: var(--ge-ink); font-weight: 600; }

/* A chapter heading that follows an eyebrow line or a .ge-sec-head row directly,
   for a guide that groups several stories under one numbered chapter (Lambton
   Shores' Forest/Arkona/Thedford). */
.ge-chapter-title { margin-top: .75rem; }
.ge-chapter-intro { margin-top: 1.5rem; max-width: 760px; }
.ge-chapter-intro p + p { margin-top: 1.25rem; }
.ge-chapter-intro + .ge-story, .ge-chapter-title + .ge-story { margin-top: 2.5rem; }

/* A story told in prose alone, with no photograph to pair it with. */
.ge-story--text { grid-template-columns: 1fr; max-width: 760px; }

/* A small supporting photograph inside a run of prose: a detail shot or a
   secondary image, sized modestly rather than repeating a full story photo. */
.ge-figure-sm { margin-top: 1.5rem; max-width: 320px; }
.ge-figure-sm img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ge-figure-sm--square img { aspect-ratio: 1 / 1; }

/* A compact service line: a venue's name, address and links, run in as quiet
   text rather than a boxed panel. Used where a story already told its own
   practical details do not warrant a separate "if you go" treatment. */
.ge-service { margin-top: 1.5rem; font-size: .875rem; line-height: 1.75; color: var(--ge-muted); }
.ge-service strong { color: var(--ge-ink); font-weight: 600; }
.ge-service-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: .75rem; }

/* A quiet, restrained cross-link or transition: a line, not a card or a box. */
.ge-quiet-link { padding: 1.25rem 0; border-top: 1px solid var(--ge-line); }
.ge-quiet-link .body-copy { margin-top: .5rem; max-width: 680px; }
.ge-quiet-link .text-link { margin-top: .25rem; }

/* ---------- then-and-now (a small aside, not a full section) ---------- */
.ge-then-now { padding-top: 2.5rem; padding-bottom: 2.5rem; border-top: 1px solid var(--ge-line); border-bottom: 1px solid var(--ge-line); }
.ge-then-now-title { margin-top: .5rem; font-family: var(--ge-serif); font-weight: 400; font-size: 1.875rem; line-height: 1.15; }
.ge-then-now-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .ge-then-now-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.ge-then-now-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ge-then-now-copy { margin-top: 1.25rem; max-width: 42rem; font-size: .875rem; line-height: 1.75; color: var(--ge-muted); }

/* ---------- favourites (columns) ---------- */
.ge-favs { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 768px) { .ge-favs { padding-top: 5rem; padding-bottom: 5rem; } }
.ge-columns { column-count: 1; column-gap: 2.25rem; }
@media (min-width: 640px)  { .ge-columns { column-count: 2; } }
@media (min-width: 1024px) { .ge-columns { column-count: 3; } }
/* Row order for the card section: 01 02 03 across, then 04 05. The column
   layout above reads down each column, which looks like a card is missing
   once the cards carry photos of different heights. */
.ge-columns--rows { column-count: auto; display: grid; grid-template-columns: 1fr; gap: 3rem 2.25rem; }
@media (min-width: 640px)  { .ge-columns--rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ge-columns--rows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ge-columns--rows .ge-card { margin-bottom: 0; }
.ge-card { display: block; margin-bottom: 3.5rem; break-inside: avoid; }
.ge-card > a.ge-card-link { display: block; overflow: hidden; background: var(--ge-sand); }
.card-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .5s ease-out; }
.card-photo--wide { aspect-ratio: 4 / 3; }
.card-photo--square { aspect-ratio: 1 / 1; }
.ge-card:hover .card-photo, .ge-card:focus-within .card-photo { transform: scale(1.035); }
.ge-card .eyebrow { margin-top: 1.5rem; }
/* A kicker that leads its card (Grand Bend puts it above the photo) starts flush,
   so a card at the top of a column line up with the ones beside it: multi-column
   layout drops a leading margin after a column break but keeps the first one. */
.ge-card > .eyebrow:first-child { margin-top: 0; }
.ge-card--text { padding-top: 1.5rem; border-top: 1px solid var(--ge-line); }
.ge-card--text .eyebrow { margin-top: 0; }
.ge-card--text .num { display: block; font-family: var(--ge-serif); font-size: 64px; line-height: .9; letter-spacing: -.04em; color: var(--ge-line); margin-bottom: 1rem; }
/* A numbered photo card mixed into an otherwise .ge-card--text numbered
   list (St. Clair Township's Brigden Fair, among three text cards numbered
   01, 03, 04): the same number, on a solid accent-coloured badge pinned on
   the photo, so nothing in the sequence reads as skipped. A solid fill
   keeps it legible regardless of what the photo underneath is (19
   September 2026 -- the owner spotted the gap where 02 should be). */
.ge-card--numbered .ge-card-link { position: relative; display: block; }
.ge-card--numbered .num {
  position: absolute; top: .85rem; left: .85rem; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ge-accent); color: #fff;
  font-family: var(--ge-serif); font-size: 18px; font-weight: 500; line-height: 1;
}
.ge-card h3 { margin-top: .75rem; font-family: var(--ge-serif); font-weight: 400; font-size: 29px; line-height: 1.16; letter-spacing: -.02em; }
.ge-card h3 a:hover { color: var(--ge-accent); }
.ge-card > p:not(.eyebrow) { margin-top: 1rem; font-size: 15px; line-height: 1.8; color: var(--ge-muted); }
.ge-card-foot { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.ge-more { display: flex; flex-wrap: wrap; gap: 0 2rem; padding-top: 1rem; border-top: 1px solid var(--ge-line); }

/* ---------- disclosures ---------- */
.disclosure { border-top: 1px solid var(--ge-line); }
.disclosure summary { display: flex; min-height: 3.5rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-size: .875rem; font-weight: 500; }
.disclosure summary .icon { transition: transform .2s; }
.disclosure[open] summary .icon { transform: rotate(180deg); }
.disclosure .ge-answer { padding-bottom: 1.5rem; font-size: .875rem; line-height: 1.75; color: var(--ge-muted); }
.disclosure .ge-answer p + p { margin-top: .6rem; }
.ge-card .disclosure { margin-top: 1rem; }
.ge-card .disclosure .ge-answer { padding-bottom: 1rem; }

/* ---------- find something ---------- */
.ge-find { padding-bottom: 3.5rem; }
@media (min-width: 768px) { .ge-find { padding-bottom: 5rem; } }
.ge-find .section-title { margin-top: .75rem; }
.ge-find-grid { display: grid; gap: 2.5rem; margin-top: 2.25rem; }
@media (min-width: 768px) { .ge-find-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.ge-box { background: var(--ge-sand); padding: 1.75rem; }
@media (min-width: 640px) { .ge-box { padding: 2.25rem; } }
/* A box can open with a photo bleeding to its edges (the Sunnyside lore box). */
.ge-box .ge-box-fig { margin: -1.75rem -1.75rem 1.25rem; }
.ge-box-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ge-box-fig .caption { padding: 0 1.75rem; }
@media (min-width: 640px) { .ge-box .ge-box-fig { margin: -2.25rem -2.25rem 1.5rem; } .ge-box-fig .caption { padding: 0 2.25rem; } }
/* Lore boxes size to their own content; a photo box beside a text box otherwise leaves a blank sand slab. */
.ge-sec .ge-find-grid { align-items: start; }
/* A pair of boxes meant to read as one band (Petrolia's lore) share a height,
   and the shorter one centres its text rather than leaving a sand gap below. */
.ge-sec .ge-find-grid--even { align-items: stretch; }
.ge-box--centred { display: flex; flex-direction: column; justify-content: center; }
.ge-box h3, .ge-rows h3 { font-family: var(--ge-serif); font-weight: 400; font-size: 29px; line-height: 1.15; }
.ge-box p { margin-top: 1rem; font-size: .875rem; line-height: 1.75; color: var(--ge-muted); }
.ge-box label { display: block; margin-top: 1.25rem; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; color: var(--ge-accent); }
.ge-select { display: block; width: 100%; margin-top: .5rem; min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid var(--ge-line); background: #fff; font: inherit; font-size: .875rem; color: var(--ge-ink); }
.ge-rows { align-self: center; }
.ge-rows-list { margin-top: 1.25rem; border-top: 1px solid var(--ge-line); }
.ge-rows-list a { display: flex; min-height: 3.5rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--ge-line); font-size: .875rem; }
.ge-rows-list a:hover { color: var(--ge-accent); }

/* ---------- before you go ---------- */
.ge-before { padding-bottom: 4rem; }
@media (min-width: 768px) { .ge-before { padding-bottom: 5rem; } }
.ge-before-grid { display: grid; gap: 2.5rem; padding-top: 3rem; border-top: 1px solid var(--ge-line); }
@media (min-width: 768px) { .ge-before-grid { grid-template-columns: .8fr 1.4fr; gap: 5rem; } }
.ge-before-grid .section-title { margin-top: .75rem; }
.ge-before-grid .ge-small { margin-top: 1.5rem; }

/* ---------- sources ---------- */
.ge-sources { padding-bottom: 3rem; font-size: 12px; line-height: 1.7; color: var(--ge-muted); }
.ge-sources p + p { margin-top: .5rem; }
.ge-sources a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- newsletter band ---------- */
.ge-band { background: var(--ge-accent); color: #fff; padding: 3rem 0; }
@media (min-width: 768px) { .ge-band { padding: 4rem 0; } }
.ge-band * { box-sizing: border-box; }
.ge-band .shell { display: flex; flex-direction: column; justify-content: space-between; gap: 1.75rem; }
@media (min-width: 768px) { .ge-band .shell { flex-direction: row; align-items: center; } }
.ge-band p, .ge-band h2 { margin: 0; }
.ge-band .eyebrow { color: rgba(255,255,255,.8); }
.ge-band h2 { margin-top: .75rem; font-family: var(--ge-serif); font-weight: 400; font-size: 35px; line-height: 1.2; }
@media (min-width: 768px) { .ge-band h2 { font-size: 42px; } }
.ge-band-btn {
  display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: 1.25rem;
  align-self: flex-start; padding: .75rem 1.5rem; border: 1px solid rgba(255,255,255,.6);
  color: #fff; font-size: .875rem; font-weight: 500; text-decoration: none; transition: background-color .2s, color .2s;
}
.ge-band-btn:hover { background: #fff; color: var(--ge-accent); }
@media (min-width: 768px) { .ge-band-btn { align-self: auto; } }

/* ---------- phones read top to bottom: a photo sits under its own heading ---------- */
/* On a wide screen a story's photo sits beside its text and a card's photo leads it,
   so source order is invisible. Stacked on a phone, a photo that comes before its
   kicker reads as belonging to the heading above it: the Grand Bend stories opened
   with the river under the section heading, and the Louis Armstrong poster under
   the river's title. Below 640px (where the story grid stacks) the kicker and title
   lead a story, its photo follows, then the body; a card leads with its kicker, then
   the photo, then the title, which is the order the owner approved on Grand Bend.
   A photo inside an "If you go" or sand box stops bleeding to the box edge here,
   so it lines up with the text beside it instead of stepping 24px out from it. */
@media (max-width: 639px) {
  .ge-story { display: flex; flex-direction: column; gap: 0; }
  .ge-story > div { display: contents; }
  .ge-story > div > * { order: 3; }
  .ge-story > div > .eyebrow { order: 0; }
  .ge-story > div > h3 { order: 1; }
  .ge-story > figure { order: 2; margin-top: 1.25rem; }
  .ge-story > figure + div > .ge-story-body { margin-top: 1.25rem; }
  .ge-card:not(.ge-card--text) { display: flex; flex-direction: column; }
  .ge-card:not(.ge-card--text) > * { order: 1; }
  .ge-card:not(.ge-card--text) > .eyebrow { order: 0; margin-top: 0; }
  .ge-card:not(.ge-card--text) > a.ge-card-link { margin-top: .75rem; }
  .ge-story-go .ge-story-go-fig { margin: 0 0 1rem; }
  .ge-story-go-fig .caption { padding: 0; }
  .ge-box .ge-box-fig { margin: 0 0 1.25rem; }
  .ge-box-fig .caption { padding: 0; }
}

/* ---------- back to top (phones only; guide-to-top.js shows it) ---------- */
.tg-to-top { display: none; }
@media (max-width: 700px) {
  .tg-to-top.is-visible { display: flex; }
  .tg-to-top {
    position: fixed; right: .9rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 4.4rem); z-index: 80;
    align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--ge-line); border-radius: 999px; background: #fff; color: var(--ge-accent);
    font: 1.1rem/1 var(--ge-sans); cursor: pointer; box-shadow: 0 6px 18px rgba(40, 51, 57, .18);
  }
  .tg-to-top:focus-visible { outline: 2px solid var(--ge-accent); outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .text-link, .card-photo, .disclosure summary .icon, .ge-btn, .ge-band-btn { transition: none; }
  .ge-card:hover .card-photo, .ge-card:focus-within .card-photo { transform: none; }
}