/* ==========================================================================
   The Bluff Trail / WRWEO — interior pages
   Loaded after site.css. Adds: nav submenus, page headers, article layout,
   ledgers, tables, cards, timeline, people, link lists, cross-links.
   Same tokens, same field-guide language. No new fonts, no new colours.
   ========================================================================== */

/* ==========================================================================
   Navigation submenus
   Pure CSS: opens on hover and on :focus-within, so keyboard users reach it
   by tabbing through the parent link. No JavaScript involved.
   ========================================================================== */
.nav__list > li { position: relative; }

.nav__sub {
  list-style: none; padding: 0; margin: 0;
}

@media (min-width: 62rem) {
  .nav__item--sub > a { padding-right: 0.85rem; }
  .nav__item--sub > a::before {
    content: ''; position: absolute; right: 0; top: 50%;
    width: 0.32rem; height: 0.32rem; margin-top: -0.28rem;
    border-right: 1.5px solid var(--ink-faint);
    border-bottom: 1.5px solid var(--ink-faint);
    transform: rotate(45deg);
    transition: border-color 0.2s var(--ease);
  }
  .nav__item--sub:hover > a::before,
  .nav__item--sub:focus-within > a::before { border-color: var(--blaze-deep); }

  .nav__sub {
    position: absolute; top: 100%; left: -0.9rem;
    min-width: 15.5rem; padding: 0.4rem 0;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    box-shadow: 0 20px 34px -26px oklch(22% 0.03 155 / 0.85);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
    z-index: 20;
  }
  .nav__item--sub:hover > .nav__sub,
  .nav__item--sub:focus-within > .nav__sub {
    opacity: 1; visibility: visible; transform: none;
  }
  /* Bridges the gap between the bar and the panel so the pointer can travel. */
  .nav__item--sub::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 0.55rem;
  }
  .nav__sub a {
    display: block; padding: 0.5rem 0.9rem; font-size: var(--step--1);
    text-decoration: none; line-height: 1.35;
  }
  .nav__sub a::after { display: none; }
  .nav__sub a:hover { background: color-mix(in oklch, var(--blaze) 18%, transparent); }
}

@media (max-width: 61.9375rem) {
  .nav__sub { padding: 0.15rem 0 0.7rem 0.9rem; border-left: 2px solid var(--line); }
  .nav__sub li { border-bottom: 0; }
  .nav__sub a {
    display: block; padding-block: 0.5rem; text-decoration: none;
    font-size: var(--step-0); font-family: var(--text); font-weight: 500;
    color: var(--ink-soft); min-height: 2.4rem;
  }
  .nav__sub a:hover { color: var(--ink); }
  .nav__item--sub > a { padding-bottom: 0.6rem; }
}

.nav__list a[aria-current="page"] { font-weight: 700; }
.nav__list a[aria-current="page"]::after { transform: scaleX(1); }

/* ==========================================================================
   Page header
   ========================================================================== */
.pagehead {
  position: relative; overflow: hidden;
  background: var(--paper-deep);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2rem, 1.2rem + 3.4vw, 4.25rem) clamp(2rem, 1.2rem + 3vw, 3.5rem);
}
.pagehead > .wrap { position: relative; z-index: 1; }
.pagehead h1 {
  font-size: var(--step-4); margin-top: var(--space-md);
  max-width: 20ch; letter-spacing: -0.028em;
}
.pagehead__lede {
  margin-top: var(--space-lg); max-width: 58ch;
  font-family: var(--display); font-size: var(--step-1);
  line-height: 1.36; letter-spacing: -0.01em; color: var(--ink-soft);
}
.pagehead__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

/* Dark ground. Carries all the typography; pairs with either a .topo--dark
   (the graphic treatment) or a .pagehead__media photo. Splitting the ground
   from the photo is what makes graphic -> photo a two-line markup change. */
.pagehead--dark {
  background: var(--spruce-deep); border-bottom: 0; color: var(--paper);
  isolation: isolate;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(2rem, 1.2rem + 3vw, 3.5rem);
}
.pagehead--dark h1 { color: var(--paper); }
.pagehead--dark .pagehead__lede { color: color-mix(in oklch, var(--paper) 88%, var(--moss)); }
.pagehead--dark .breadcrumb,
.pagehead--dark .breadcrumb a { color: color-mix(in oklch, var(--paper) 70%, var(--spruce)); }
/* Recolouring the eyebrow here means no page has to remember .eyebrow--light. */
.pagehead--dark .eyebrow { color: color-mix(in oklch, var(--paper) 82%, var(--moss)); }
.pagehead--dark .pagehead__actions .btn--outline {
  border-color: color-mix(in oklch, var(--paper) 52%, transparent);
  color: var(--paper); background: transparent;
}
.pagehead--dark .pagehead__actions .btn--outline:hover {
  border-color: var(--blaze); color: var(--blaze);
}

/* Photo add-on. Concerns the media element only. */
.pagehead--photo .pagehead__media { position: absolute; inset: 0; z-index: 0; }
.pagehead--photo .pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead--photo .pagehead__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, oklch(19% 0.03 158 / 0.88) 0%, oklch(19% 0.03 158 / 0.5) 52%, oklch(19% 0.03 158 / 0.22) 100%);
}
/* Crop anchors. The CSP forbids inline styles, so object-position is a class. */
.pagehead__media--high img { object-position: 50% 26%; }
.pagehead__media--low  img { object-position: 50% 72%; }
.pagehead__media--left img { object-position: 26% 45%; }

/* Key figures at the foot of the page head. Lifts three numbers out of the
   margin and into the front door, and is what keeps a dozen dark page heads
   from looking like each other. Adapted from the home page .legend, but
   ground-agnostic. */
.pagehead__meta {
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line-strong);
  display: flex; flex-wrap: wrap;
  column-gap: clamp(1.5rem, 0.8rem + 2.4vw, 3rem); row-gap: var(--space-md);
}
.pagehead__meta div { display: grid; gap: 0.15rem; }
.pagehead__meta dt {
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.pagehead__meta dd {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--step-1);
  letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.pagehead--dark .pagehead__meta { border-top-color: color-mix(in oklch, var(--paper) 24%, transparent); }
.pagehead--dark .pagehead__meta dt { color: color-mix(in oklch, var(--paper) 62%, var(--spruce)); }
.pagehead--dark .pagehead__meta dd { color: var(--paper); }
/* Four figures do not fit a phone. Drop the tail rather than wrap to a stack. */
@media (max-width: 36rem) { .pagehead__meta div:nth-child(n+4) { display: none; } }

@media (min-width: 62rem) {
  /* Left-weighted on wide screens, matching .hero__media, so the photograph
     survives instead of disappearing under a flat top-to-bottom wash. */
  .pagehead--photo .pagehead__media::after {
    background:
      linear-gradient(to right, oklch(20% 0.035 158 / 0.86) 0%, oklch(20% 0.035 158 / 0.56) 44%, oklch(20% 0.035 158 / 0.14) 80%),
      linear-gradient(to top, oklch(19% 0.03 158 / 0.7) 0%, transparent 46%);
  }
}

/* Breadcrumb */
.breadcrumb {
  font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: var(--space-lg);
}
.breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.breadcrumb li + li::before { content: '\002F'; margin-right: 0.5rem; opacity: 0.6; }
.breadcrumb a { text-decoration: none; box-shadow: inset 0 -1px 0 currentColor; }
.breadcrumb a:hover { color: var(--blaze-ink); }
.pagehead--dark .breadcrumb a:hover { color: var(--blaze); }

/* ==========================================================================
   Article layout: body + sticky aside
   ========================================================================== */
.article { position: relative; padding-block: var(--section-y); }
.article > .topo { z-index: 0; }
.article__grid {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
}
.article__body { max-width: var(--measure); }
.article__body > * + * { margin-top: 1.15em; }
.article__body h2 {
  font-size: var(--step-2); margin-top: clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem);
  padding-top: var(--space-md); border-top: 1px solid var(--line);
}
.article__body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article__body h3 {
  font-size: var(--step-1); margin-top: var(--space-xl);
}
.article__body h4 {
  font-family: var(--text); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  margin-top: var(--space-lg);
}
.article__body p { line-height: 1.62; }
.article__body .lede {
  font-size: var(--step-1); font-family: var(--display);
  line-height: 1.36; letter-spacing: -0.01em;
}
.article__body a:not(.btn):not(.link-arrow) {
  text-decoration: none; box-shadow: inset 0 -1px 0 var(--line-strong);
  transition: box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}
.article__body a:not(.btn):not(.link-arrow):hover { box-shadow: inset 0 -2px 0 var(--blaze-deep); }
.article__body ul, .article__body ol { padding-left: 1.15rem; }
.article__body li + li { margin-top: 0.45rem; }
.article__body li { line-height: 1.6; }
.article__body ul li::marker { color: var(--moss); }
.article__body ol li::marker { color: var(--ink-faint); font-variant-numeric: tabular-nums; font-weight: 700; }
.article__body blockquote {
  border-left: 3px solid var(--blaze); padding-left: var(--space-lg);
  font-family: var(--display); font-size: var(--step-1); line-height: 1.42;
  font-style: italic; color: var(--ink-soft);
}
.article__body blockquote p + p { margin-top: 0.7em; }
.article__body figure { margin: var(--space-xl) 0; }
.article__body figure img { width: 100%; border: 1px solid var(--line); background: var(--paper); }
.article__body figcaption {
  margin-top: var(--space-sm); font-size: var(--step--1);
  color: var(--ink-soft); max-width: 52ch; line-height: 1.45;
}
.article__body hr { border: 0; border-top: 1px solid var(--line-strong); margin-block: var(--space-xl); }

.article__aside { display: grid; gap: var(--space-lg); align-content: start; }

/* On-page contents */
.toc {
  background: var(--paper-deep); border: 1px solid var(--line);
  padding: var(--space-lg);
}
.toc h2 {
  font-family: var(--text); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: var(--space-sm);
}
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { counter-increment: toc; border-bottom: 1px dotted var(--line-strong); }
.toc li:last-child { border-bottom: 0; }
.toc a {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.35rem;
  text-decoration: none; font-size: var(--step--1); line-height: 1.4;
  padding-block: 0.5rem; min-height: 2rem;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
  font-size: var(--step--2); font-weight: 700;
}
.toc a:hover { color: var(--blaze-ink); }

/* ==========================================================================
   Fact panel (key numbers in a margin)
   ========================================================================== */
.facts { border-top: 1px solid var(--line-strong); }
.facts h2 {
  font-family: var(--text); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  padding-top: var(--space-md); margin-bottom: var(--space-xs);
}
.facts dl { display: grid; margin: 0; }
.facts div {
  display: flex; align-items: baseline; gap: var(--space-sm);
  padding-block: 0.65rem; border-bottom: 1px dotted var(--line-strong);
}
.facts div:last-child { border-bottom: 0; }
.facts dt { font-size: var(--step--1); color: var(--ink-soft); flex: 1 1 auto; }
.facts dd {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--step-0);
  font-variant-numeric: tabular-nums; text-align: right; flex: none;
}

/* ==========================================================================
   Data table (distances, coordinates)
   ========================================================================== */
.table-scroll { overflow-x: auto; }
.dtable {
  width: 100%; border-collapse: collapse; font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.dtable caption {
  text-align: left; font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  padding-bottom: var(--space-sm);
}
.dtable th, .dtable td { padding: 0.7rem 0.85rem; text-align: left; vertical-align: baseline; }
.dtable thead th {
  border-bottom: 1px solid var(--ink-soft); font-size: var(--step--2);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700;
  white-space: nowrap;
}
.dtable tbody tr { border-bottom: 1px solid var(--line); }
.dtable tbody tr:last-child { border-bottom: 1px solid var(--line-strong); }
.dtable tbody th { font-weight: 500; font-family: var(--text); }
.dtable td[data-num], .dtable th[data-num] { text-align: right; white-space: nowrap; }
.dtable tbody td b { font-family: var(--display); font-size: var(--step-0); font-weight: 700; }
.dtable__note { font-size: var(--step--2); color: var(--ink-faint); margin-top: var(--space-sm); line-height: 1.5; }

/* ==========================================================================
   Cards (hub pages, cross-links)
   ========================================================================== */
.cardgrid {
  display: grid; gap: 1px; background: var(--line-strong);
  border: 1px solid var(--line-strong);
}
.card {
  background: var(--paper); padding: clamp(1.3rem, 1rem + 1.4vw, 2rem);
  display: grid; align-content: start; gap: var(--space-xs);
  text-decoration: none; position: relative;
  transition: background-color 0.25s var(--ease);
}
.card:hover { background: color-mix(in oklch, var(--blaze) 12%, var(--paper)); }
.card__tag {
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-faint);
}
.card h3 { font-size: var(--step-1); margin-top: 0.15rem; }
.card p { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.55; max-width: 44ch; }
.card__go {
  margin-top: var(--space-sm); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.03em; display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--blaze-ink);
}
.card__go::after { content: '\2192'; transition: transform 0.25s var(--ease); }
.card:hover .card__go::after { transform: translateX(4px); }
.card--dark { background: var(--spruce); color: color-mix(in oklch, var(--paper) 84%, var(--spruce)); }
.card--dark h3 { color: var(--paper); }
.card--dark .card__tag { color: var(--blaze); }
.card--dark p { color: color-mix(in oklch, var(--paper) 72%, var(--spruce)); }
.card--dark .card__go { color: var(--blaze); }
.card--dark:hover { background: var(--spruce-lift); }

@media (min-width: 40rem) { .cardgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) {
  .cardgrid--3 { grid-template-columns: repeat(3, 1fr); }
  /* Holds at two across; --3 would strand a lone card on a third row. */
  .cardgrid--2 { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Timeline (achievements)
   ========================================================================== */
.timeline { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line-strong); }
.timeline > li {
  display: grid; gap: 0.35rem var(--space-lg);
  padding-block: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  border-bottom: 1px solid var(--line);
}
.timeline__year {
  font-family: var(--display); font-size: var(--step-2); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.timeline__cat {
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 0.35rem;
}
/* Item titles are h4 for correct document outline; override the uppercase
   utility styling that .article__body h4 otherwise applies. */
.timeline h4 {
  font-family: var(--display); font-size: var(--step-1); font-weight: 620;
  letter-spacing: -0.015em; line-height: 1.18; text-transform: none;
  color: var(--ink); margin-top: 0;
}
.timeline p { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.58; max-width: 64ch; margin-top: 0.35rem; }
@media (min-width: 48rem) {
  .timeline > li { grid-template-columns: 7.5rem minmax(0, 1fr); }
}

/* ==========================================================================
   Link list (documents, external resources)
   ========================================================================== */
.linklist { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line-strong); }
.linklist > li { border-bottom: 1px solid var(--line); padding-block: var(--space-md); }
.linklist a {
  font-family: var(--display); font-size: var(--step-0); font-weight: 620;
  letter-spacing: -0.01em; text-decoration: none; line-height: 1.3;
  box-shadow: inset 0 -1px 0 var(--line-strong); display: inline;
  transition: box-shadow 0.2s var(--ease);
}
.linklist a:hover { box-shadow: inset 0 -2px 0 var(--blaze-deep); }
.linklist p { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.55; margin-top: 0.3rem; max-width: 62ch; }
.linklist__meta {
  font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); margin-left: 0.5rem; white-space: nowrap;
}

/* Compact two-column list of plain links */
.linkcols { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 var(--space-xl); }
.linkcols li { border-bottom: 1px dotted var(--line-strong); }
.linkcols a {
  display: block; padding-block: 0.6rem; text-decoration: none;
  font-size: var(--step--1); min-height: 2.2rem;
}
.linkcols a:hover { color: var(--blaze-ink); }
@media (min-width: 40rem) { .linkcols { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   People (board)
   ========================================================================== */
.term { border-top: 1px solid var(--line-strong); padding-top: var(--space-md); margin-top: var(--space-xl); }
.term__year {
  font-family: var(--text); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.people { list-style: none; padding: 0; margin-top: var(--space-sm); display: grid; gap: 0; }
.people li {
  display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap;
  padding-block: 0.55rem; border-bottom: 1px dotted var(--line-strong);
  font-size: var(--step-0);
}
.people li:last-child { border-bottom: 0; }
.people__role {
  font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blaze-ink); font-weight: 700;
}
.people__note { font-size: var(--step--2); color: var(--ink-faint); letter-spacing: 0.04em; }
@media (min-width: 48rem) { .people { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-xl); } }

/* ==========================================================================
   Numbered steps (route directions)
   ========================================================================== */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; border-top: 1px solid var(--line); }
.steps > li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--space-md);
  padding-block: var(--space-md); border-bottom: 1px solid var(--line);
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display); font-weight: 700; font-size: var(--step-1);
  color: var(--blaze-ink); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.steps h3 { font-size: var(--step-0); font-family: var(--text); font-weight: 700; }
.steps p { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.58; margin-top: 0.25rem; }

/* ==========================================================================
   Site markers (LNT camping sites, junctions)
   ========================================================================== */
.sites { display: grid; gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); }
.site { background: var(--paper); padding: var(--space-lg); display: grid; gap: 0.3rem; align-content: start; }
.site__name { font-family: var(--display); font-size: var(--step-1); font-weight: 620; letter-spacing: -0.015em; }
.site__mi { font-size: var(--step--1); color: var(--moss); font-weight: 600; }
.site__coords {
  font-variant-numeric: tabular-nums; font-size: var(--step--1);
  color: var(--ink-soft); margin-top: 0.35rem;
}
.site .btn--tiny { justify-self: start; margin-top: var(--space-xs); }
@media (min-width: 40rem) { .sites { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .sites { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   Callouts
   ========================================================================== */
.callout {
  border-left: 3px solid var(--moss);
  background: var(--paper-deep);
  padding: var(--space-lg);
  margin-block: var(--space-xl);
}
.callout__tag {
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--space-xs);
}
.callout p { font-size: var(--step--1) !important; line-height: 1.58; }
.callout p + p { margin-top: 0.7em; }
.callout--warn {
  border-left-color: var(--blaze-deep);
  background: color-mix(in oklch, var(--blaze) 15%, var(--paper));
}
.callout--warn .callout__tag { color: var(--blaze-ink); }
/* Outcomes and good news. Without this every emphasised note reads as a warning. */
.callout--good {
  border-left-color: var(--moss);
  background: color-mix(in oklch, var(--moss) 12%, var(--paper));
}
.callout--good .callout__tag { color: color-mix(in oklch, var(--moss) 78%, var(--ink)); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  display: flex; align-items: baseline; gap: var(--space-md);
  padding-block: clamp(0.9rem, 0.7rem + 0.7vw, 1.3rem);
  cursor: pointer; list-style: none;
  font-family: var(--display); font-size: var(--step-1); font-weight: 620;
  letter-spacing: -0.015em; line-height: 1.2;
  transition: background-color 0.25s var(--ease), padding-inline 0.25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; margin-left: auto; flex: none;
  font-family: var(--text); font-weight: 400; font-size: var(--step-2);
  line-height: 1; color: var(--ink-faint); transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { background: color-mix(in oklch, var(--blaze) 11%, transparent); padding-inline: 0.6rem; }
.faq details[open] summary { background: color-mix(in oklch, var(--blaze) 14%, transparent); padding-inline: 0.6rem; }
.faq__body { padding: 0 0.6rem clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem); max-width: 64ch; }
.faq__body p { font-size: var(--step--1); line-height: 1.6; color: var(--ink-soft); }
.faq__body p + p { margin-top: 0.7em; }
.faq details::details-content {
  block-size: 0; overflow: clip;
  transition: block-size 0.4s var(--ease), content-visibility 0.4s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }

/* ==========================================================================
   Bands

   A full-width strip on its own ground, sitting outside .article. Interior
   pages were a single unbroken paper column from page head to onward; bands
   give them the alternating grounds the home page has. Formalises what the
   stewardship page and the giving band were already doing by hand.

   Bands go at the head of an interior page (headline figures) or at its tail
   (a table, an FAQ, a card grid). Never between halves of .article — the
   table of contents sticks inside .article__grid and splitting the grid
   strands it.

   Two rules: no two adjacent bands share a ground, and no more than two dark
   grounds on a page. Band headings reuse .section__head / .section__sub.
   ========================================================================== */
.band { position: relative; overflow: hidden; padding-block: var(--section-y); }
.band > .wrap { position: relative; z-index: 1; }
.band--paper { background: var(--paper); border-top: 1px solid var(--line); }
.band--deep  { background: var(--paper-deep); border-block: 1px solid var(--line); }
.band--dark  { background: var(--spruce); color: color-mix(in oklch, var(--paper) 86%, var(--spruce)); }
.band--ink   { background: var(--spruce-deep); color: color-mix(in oklch, var(--paper) 80%, var(--spruce)); }
/* Bands carry modules, not prose, so tighten the vertical rhythm a little. */
.band--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

/* A band holding a section lifted out of .article__body needs the typographic
   defaults that .article__body was providing. Same two-measure rule as the
   article: text holds the measure, modules take the full width. */
.band .prose { max-width: none; }
.band .prose > * + * { margin-top: 1.15em; }
.band .prose > p,
.band .prose > ul,
.band .prose > ol,
.band .prose > h3,
.band .prose > h4,
.band .prose > blockquote { max-width: var(--measure); }
.band .prose h3 { font-size: var(--step-1); margin-top: var(--space-xl); }
.band .prose p { line-height: 1.62; }
.band .prose > ul, .band .prose > ol { padding-left: 1.15rem; }
.band .prose li + li { margin-top: 0.45rem; }
.band .prose li { line-height: 1.6; }
.band .prose > ul li::marker { color: var(--moss); }
.band .prose a:not(.btn):not(.link-arrow) {
  text-decoration: none; box-shadow: inset 0 -1px 0 var(--line-strong);
  transition: box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}
.band .prose a:not(.btn):not(.link-arrow):hover { box-shadow: inset 0 -2px 0 var(--blaze-deep); }
.band .prose figure { margin: var(--space-xl) 0; }
.band .prose figure img { width: 100%; border: 1px solid var(--line-strong); background: var(--paper); }
.band .prose figcaption {
  margin-top: var(--space-sm); font-size: var(--step--1);
  color: var(--ink-soft); max-width: 52ch; line-height: 1.45;
}
/* On a dark ground the borders and links have to flip. */
.band--dark .prose a:not(.btn):not(.link-arrow),
.band--ink .prose a:not(.btn):not(.link-arrow) {
  box-shadow: inset 0 -1px 0 color-mix(in oklch, var(--paper) 40%, transparent);
}
.band--dark .prose h3, .band--ink .prose h3 { color: var(--paper); }
.band--dark .prose figcaption, .band--ink .prose figcaption {
  color: color-mix(in oklch, var(--paper) 66%, var(--spruce));
}

/* ==========================================================================
   Cross-links band (bottom of every interior page)
   ========================================================================== */
.onward { background: var(--paper-deep); border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.onward h2 {
  font-family: var(--text); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: var(--space-lg);
}

/* Giving band, reused across interior pages */
.giveband { position: relative; overflow: hidden; background: var(--spruce); color: color-mix(in oklch, var(--paper) 86%, var(--spruce)); padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.giveband > .wrap { position: relative; z-index: 1; display: grid; gap: var(--space-lg); align-items: center; }
.giveband h2 { font-size: var(--step-2); color: var(--paper); max-width: 20ch; }
.giveband p { font-size: var(--step--1); max-width: 52ch; line-height: 1.6; color: color-mix(in oklch, var(--paper) 76%, var(--spruce)); }
.giveband__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
@media (min-width: 56rem) {
  .giveband > .wrap { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xl); }
}

/* ==========================================================================
   Media rows
   ========================================================================== */

.wide-figure { margin-block: var(--space-xl); }
.wide-figure img { width: 100%; border: 1px solid var(--line-strong); background: var(--paper); }
.wide-figure figcaption { margin-top: var(--space-sm); font-size: var(--step--1); color: var(--ink-soft); line-height: 1.45; max-width: 60ch; }

/* Paired figures across the full article column. One banner per page reads as
   monotonous, and a pair puts the smaller photographs in the library to work
   at a size they can carry. */
.figrow { display: grid; gap: var(--space-md); margin-block: var(--space-xl); }
.figrow figure { margin: 0; display: grid; grid-template-rows: auto min-content; }
.figrow img { width: 100%; height: 100%; object-fit: cover;
              border: 1px solid var(--line-strong); background: var(--paper); }
.figrow figcaption { margin-top: var(--space-sm); font-size: var(--step--1);
                     color: var(--ink-soft); line-height: 1.45; }
@media (min-width: 40rem) {
  .figrow { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .figrow--wide { grid-template-columns: 1.4fr 1fr; }
}

/* Video links (we do not embed third-party players) */
.videos { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.videos li { border-bottom: 1px solid var(--line); padding-block: var(--space-md); }
.videos a {
  display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap;
  text-decoration: none; font-family: var(--display); font-size: var(--step-0);
  font-weight: 620; letter-spacing: -0.01em;
}
.videos a::before {
  content: '\25B6'; font-family: var(--text); font-size: 0.62em; color: var(--blaze-ink);
  flex: none; transform: translateY(-0.1em);
}
.videos a:hover { color: var(--blaze-ink); }
.videos__len { font-family: var(--text); font-size: var(--step--2); font-weight: 500; color: var(--ink-faint); letter-spacing: 0.06em; }
.videos p { font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.3rem; line-height: 1.55; max-width: 58ch; }

/* ==========================================================================
   Desktop article grid
   ========================================================================== */
@media (min-width: 62rem) {
  .article__grid--aside {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr);
    column-gap: clamp(2.5rem, 1rem + 4vw, 5rem);
    align-items: start;
  }
  /* Two measures. Prose keeps the 68ch measure; structured modules — tables,
     timelines, link lists, FAQs, figures — take the whole column. Narrow text
     against wide artefacts is what stops an interior page reading as a blog
     post. Headings stay at measure so the rule on .article__body h2 lines up
     with the text it introduces; .post is prose and stays too. */
  .article__body { max-width: none; }
  .article__body > p,
  .article__body > ul,
  .article__body > ol,
  .article__body > h2,
  .article__body > h3,
  .article__body > h4,
  .article__body > blockquote,
  .article__body > .callout,
  .article__body > .advisory,
  .article__body > .post { max-width: var(--measure); }
  .pagehead h1 { max-width: 22ch; }
}
@media (min-width: 62rem) and (min-height: 48rem) {
  .article__aside { position: sticky; top: 8.5rem; }
}

/* ==========================================================================
   Home page hand-offs into the interior pages
   ========================================================================== */
.trail__more { margin-top: var(--space-md); }
.prepare__more {
  display: flex; flex-wrap: wrap; gap: var(--space-lg);
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}
.loops__map figcaption .link-arrow { margin-top: var(--space-sm); }

/* ==========================================================================
   Footer social row
   ========================================================================== */
.foot__social {
  list-style: none; padding: 0; margin-top: var(--space-md);
  display: flex; flex-wrap: wrap; gap: 0 var(--space-md);
}
.foot__social a {
  display: inline-block; text-decoration: none; font-size: var(--step--1);
  padding-block: 0.35rem; min-height: 1.65rem;
  box-shadow: inset 0 -1px 0 color-mix(in oklch, var(--paper) 30%, transparent);
  transition: color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.foot__social a:hover { color: var(--blaze); box-shadow: inset 0 -1px 0 var(--blaze); }

/* ==========================================================================
   PayPal membership form
   Posts straight to PayPal. No card details are entered on this site, and
   nothing is stored here. `form-action` in _headers must allow paypal.com.
   ========================================================================== */
.paypal {
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--blaze);
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  margin-block: var(--space-xl);
  display: grid; gap: var(--space-md); justify-items: start;
}
.paypal__tag {
  font-size: var(--step--2) !important; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-soft);
}
.paypal__row { display: grid; gap: 0.4rem; width: 100%; max-width: 30rem; }
.paypal__row label {
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.paypal select {
  font: inherit; font-size: var(--step-0); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong);
  padding: 0.7rem 0.8rem; width: 100%; min-height: 3rem; border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.paypal select:focus-visible { outline: 2px solid var(--blaze-deep); outline-offset: 2px; }
.paypal__fine {
  font-size: var(--step--2) !important; color: var(--ink-faint);
  line-height: 1.55; max-width: 54ch;
}

.address {
  font-variant-numeric: tabular-nums; line-height: 1.6;
  border-left: 2px solid var(--line-strong); padding-left: var(--space-md);
}

/* ==========================================================================
   News posts
   ========================================================================== */
.post {
  border-top: 1px solid var(--line-strong);
  padding-top: var(--space-lg);
  margin-top: clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem);
}
.article__body > .post:first-of-type { margin-top: var(--space-lg); }
.post h2 {
  font-size: var(--step-2); margin-top: 0.35rem !important;
  padding-top: 0 !important; border-top: 0 !important;
}
.post__date {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm);
  font-size: var(--step--2) !important; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.post__flag {
  font-weight: 700; letter-spacing: 0.1em; color: var(--blaze-ink);
  border: 1px solid currentColor; padding: 0.15rem 0.45rem;
}
.post__flag--closed { color: var(--ink-faint); }

/* ==========================================================================
   Trail report form
   Composes a mailto: link. Nothing is posted from the page and nothing is
   stored, so there is no endpoint to maintain and no data to protect.
   ========================================================================== */
.rform {
  border-top: 1px solid var(--line-strong);
  margin-top: var(--space-xl); padding-top: var(--space-lg);
  display: grid; gap: var(--space-lg);
}
.rform__row { display: grid; gap: 0.4rem; }
.rform__row > label,
.rform__fieldset > legend {
  font-size: var(--step--2); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.rform__req {
  margin-left: 0.4rem; letter-spacing: 0.08em; font-weight: 600;
  color: var(--blaze-ink); text-transform: uppercase;
}
.rform input[type="text"], .rform input[type="email"], .rform input[type="date"],
.rform input[type="number"], .rform textarea, .rform select {
  font: inherit; font-size: var(--step--1); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong);
  padding: 0.7rem 0.8rem; width: 100%; min-height: 3rem; border-radius: 0;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.rform textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
.rform input:focus, .rform textarea:focus, .rform select:focus {
  outline: none; border-color: var(--blaze-deep);
  box-shadow: inset 0 -2px 0 var(--blaze-deep);
}
.rform input:focus-visible, .rform textarea:focus-visible, .rform select:focus-visible {
  outline: 2px solid var(--blaze-deep); outline-offset: 2px;
}
.rform ::placeholder { color: var(--ink-faint); opacity: 1; }
.rform__hint { font-size: var(--step--2) !important; color: var(--ink-faint); line-height: 1.5; margin: 0; }
.rform__grid { display: grid; gap: var(--space-lg); }
.rform__fieldset { border: 0; padding: 0; margin: 0; }
.rform__checks { display: grid; gap: 0.1rem; margin-top: 0.3rem; }
.rform__checks label {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: var(--step--1); padding-block: 0.45rem; min-height: 2.2rem; cursor: pointer;
}
.rform__checks input { accent-color: var(--blaze-deep); width: 1.05rem; height: 1.05rem; flex: none; }
.rform__submit {
  border-top: 1px solid var(--line-strong); padding-top: var(--space-lg);
  display: grid; gap: var(--space-sm); justify-items: start;
}
.rform__submit .btn { text-decoration: none; }
@media (min-width: 34rem) {
  .rform__grid { grid-template-columns: repeat(2, 1fr); }
  .rform__checks { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-lg); }
}

/* ---- Print ---- */
@media print {
  .pagehead { background: #fff; }
  .onward, .giveband, .toc, .nav__sub, .rform__submit { display: none; }
}