/* ============================================================================
   gray-acres-farm — site.css
   Load order: kit/tokens.css → kit/kit.css → this file.
   The PASTURE mood — the light/agrarian default, filled from the farm's own
   sources (BUILD-BRIEF.md): the linocut logo's paper and black, the evening
   pasture, the sundown sky over the chicken tractors, Mount Lamborn's slate.
   Honest source names first; the kit's shared slots are ALIASED onto them
   (CONVENTIONS §1). Measured contrast ratios are recorded in CLAUDE.md —
   sundown is a mark, never text.
   ========================================================================== */

:root {
  /* ── honest source names ─────────────────────────────────────────────── */
  --paper:         #F7F3EA;   /* the logo sheet — warm white               */
  --paper-2:       #EEE8D8;   /* a toned band                              */
  --linocut:       #1C1A17;   /* the block-print black — 15.7:1 on paper   */
  --pasture:       #56682A;   /* evening grass — 5.6:1, display/large only */
  --pasture-deep:  #3C4A1C;   /* grass in shadow — 8.7:1, the label voice  */
  --sundown:       #C0602C;   /* the sky over the tractors — 3.8:1, MARKS  */
  --sundown-deep:  #9E4A1E;   /* its ember — 5.5:1, large text only        */
  --clay:          #A65E3A;   /* the brooder floor — 4.4:1, decorative     */
  --straw:         #B8893A;   /* hay — 2.8:1, decorative                   */
  --hay:           #D7BC7C;   /* brooder-lamp glow — 1.7:1, decorative     */
  --lamborn:       #4B6273;   /* the mountain's haze — 5.8:1, UI non-text  */
  --lamborn-deep:  #35495A;   /* the ridge line — 8.4:1, the link          */

  /* ── grounds / ink ───────────────────────────────────────────────────── */
  --ink:        var(--linocut);
  --ink-soft:   rgba(28, 26, 23, 0.78);   /* 8.0:1 on paper, 7.6:1 on paper-2 */
  --ink-faint:  rgba(28, 26, 23, 0.58);   /* 4.1:1 — decorative / non-text UI */
  --rule:       rgba(28, 26, 23, 0.14);

  /* ── shared slots filled from the farm's sources (§1 alias mechanism) ── */
  --rust:   var(--sundown);
  --terra:  var(--clay);
  --ochre:  var(--straw);
  --wheat:  var(--hay);
  --olive:  var(--pasture);
  --sage:   var(--pasture-deep);
  --slate:  var(--lamborn);
  --cool:   var(--lamborn);

  --accent: var(--sundown);
  --link:   var(--lamborn-deep);
  --focus:  var(--lamborn-deep);

  /* ── type — the client's own family, carried over from the old site
     (Alegreya SC for headings, Alegreya Sans for body). Here the roles split
     inside one family: Alegreya for reading, Alegreya SC for display, Alegreya
     Sans as the label voice. --hand is unused (the linocut is the hand). ── */
  --serif:   "Alegreya", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --display: "Alegreya SC", "Alegreya", Georgia, serif;
  --label:   "Alegreya Sans", "Gill Sans", "Trebuchet MS", system-ui, sans-serif;

  --glass-bg:     rgba(247, 243, 234, 0.86);
  --glass-border: rgba(28, 26, 23, 0.14);
}

/* ── base ──────────────────────────────────────────────────────────────── */
body {
  font-size: 18px;
  line-height: 1.65;
}
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
h2 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.005em; }
h3 { font-size: clamp(22px, 2.6vw, 28px); }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* label voice: Alegreya Sans sits small, so it takes a size up from the kit */
.eyebrow, .label {
  font-family: var(--label);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pasture-deep);            /* 8.7:1 — clears the §8 label budget */
}
.title-rule::after { background: var(--sundown); }   /* the one accent hairline */

a.text-link {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--link) 40%, transparent);
  transition: border-color var(--dur) var(--ease);
}
a.text-link:hover, a.text-link:focus-visible { border-bottom-color: var(--link); }

/* buttons: the ghost .btn is the one CTA per page; .btn--book for in-flow doors */
.btn { color: var(--ink); border-color: color-mix(in srgb, var(--sundown) 60%, transparent); }
.btn:hover, .btn:focus-visible { color: var(--paper); background: var(--pasture-deep); border-color: var(--pasture-deep); }
.btn--book { color: var(--link); }

/* ── skip link (WCAG 2.4.1) — same shape as the-pub; candidate PROMOTE to kit ── */
.skip-link {
  position: fixed;
  left: var(--sp-4);
  top: -6rem;
  z-index: 200;
  padding: 12px 20px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--focus);
  border-radius: var(--radius-md);
  font-family: var(--label);
  font-size: 17px;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* ── nav — full-width sticky bar (§4.2, the light/agrarian pattern) ─────── */
.site-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--gutter);
  border-radius: 0;
  border-left: 0; border-right: 0; border-top: 0;
}
.site-bar .nav-brand { display: inline-flex; align-items: center; gap: var(--sp-3); }
.site-bar .nav-brand img { height: 40px; width: auto; display: block; }
.site-bar .nav-brand .brand-place {
  font-family: var(--label);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-left: var(--sp-3);
  border-left: 1px solid var(--rule);
}
.nav-links {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/* the three enterprise legs sit on the page's centre line, not the nav's */
.nav-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: clamp(16px, 2.2vw, 40px);
  align-items: center;
}
.nav-right { display: flex; gap: clamp(14px, 1.6vw, 28px); align-items: center; }
.nav-leg { display: inline-flex; align-items: center; gap: var(--sp-2); }
.nav-links a { white-space: nowrap; }
.nav-block { width: 24px; height: auto; display: block; flex: none; }
.nav-links a {
  font-family: var(--label);
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  padding: var(--sp-1) 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-links a:hover { border-bottom-color: var(--rule); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--sundown); }
.nav-toggle {
  display: none;
  font-family: var(--label);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  cursor: pointer;
  padding: var(--sp-1) var(--sp-4);
}
@media (max-width: 1240px) { .site-bar .brand-place { display: none; } }
@media (max-width: 1120px) {
  .site-bar { flex-wrap: wrap; }
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    flex: 0 0 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4) 0 var(--sp-2);
    border-top: 1px solid var(--rule);
    margin-top: var(--sp-3);
  }
  .site-bar.is-open .nav-links { display: flex; }
  .nav-center, .nav-right {
    position: static;
    transform: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
}

/* ── page structure ────────────────────────────────────────────────────── */
main { padding-top: 72px; }               /* clears the fixed bar */
.band { padding: clamp(44px, 8vh, 100px) 0; }
.band--toned { background: var(--paper-2); }
.band--tight { padding-top: clamp(28px, 5vh, 56px); }
.section-open { margin-bottom: var(--sp-6); }
.section-open .eyebrow { display: block; margin-bottom: var(--sp-3); }
.section-note { color: var(--ink-soft); max-width: 40em; margin-top: var(--sp-4); }
.prose { max-width: 40em; }
.prose p { color: var(--ink-soft); }
.prose p.lede, .lede { color: var(--ink); font-size: clamp(20px, 2.2vw, 24px); line-height: 1.5; }
.measure-wide { max-width: 56em; }

/* the three blocks — the site's signature (the client's own linocut) ──────
   A page head wears the block of its enterprise; the home page's "three
   legs" strip and the footer carry all three. */
.block { width: 72px; height: auto; display: block; }
.block--lg { width: 104px; }
.page-head { padding-top: clamp(40px, 7vh, 80px); }
.page-head .block { margin-bottom: var(--sp-4); }
.page-head h1 { font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.01em; }
.page-head .page-sub { margin-top: var(--sp-4); }

/* ── hero (home) — the pasture photo left, the client's mark beside it ──── */
.hero {
  padding-top: clamp(28px, 5vh, 56px);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.hero-photo { position: relative; margin: 0; }
.hero-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}
.hero-photo figcaption {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  font-family: var(--label);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 1px 4px rgba(28, 26, 23, 0.7);
}
.hero-mark h1 { margin: 0; }                 /* the wordmark IS the h1 */
.hero-mark .wordmark { width: min(100%, 360px); height: auto; display: block; }
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hero-mark .wordmark { width: 220px; }
}

/* ── the story chapters (home) — rail + prose, photos offset ─────────────── */
.chapter {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-7);
  align-items: start;
}
.chapter + .chapter { margin-top: clamp(48px, 8vh, 96px); }
.chapter-media { margin: 0; display: grid; gap: var(--sp-4); }
.chapter-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  box-shadow: var(--shadow-md);
}
.chapter-text p { color: var(--ink-soft); }
.chapter-text p:first-of-type { color: var(--ink); }
@media (max-width: 820px) {
  .chapter { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* a chapter whose picture is the arc below it, so the prose reads on its own
   centre line (2026-09-21) */
.chapter-prose { max-width: 46em; margin-inline: auto; }
.chapter-prose p { color: var(--ink-soft); }
.chapter + .chapter-prose { margin-top: clamp(48px, 8vh, 96px); }

/* ── the brand arc (home): Diamond G → Mountain Bird as one composition ────
   The two marks hold the apex, in the order the prose tells them; each brand's
   photo dips lower and outboard. The flanking columns are equal so the pair of
   marks lands on the page's centre line. Replaces two scattered chapters
   (2026-09-21, Ben's review). */
.brand-arc {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 3.4fr) minmax(0, 3.4fr) minmax(0, 6fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  max-width: 74em;
  margin: clamp(36px, 6vh, 72px) auto;
}
.arc-mark { display: flex; justify-content: center; }
.arc-mark img { width: 100%; height: auto; display: block; }
/* the Mountain Bird mark is a door to mountainbird.co (2026-09-21); the linocut
   holds still, so the affordance is a small lift and a fade, nothing more */
.mark-link {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mark-link:hover, .mark-link:focus-visible { opacity: 0.82; transform: translateY(-2px); }
.arc-mark--dg img { max-width: 188px; }        /* the heavier, denser mark, held back */
.arc-mark--mb img { max-width: 196px; }        /* the lighter one, optically matched */
.arc-photo { margin: 0; padding-top: clamp(24px, 5vw, 76px); }   /* the dip */

.arc-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: block;
}
/* Both ends of the arc are the same square, so the curve is symmetric: the packed
   bird 2:3 → 1:1 loses only grass top and bottom, and the pasture 3:2 → 1:1 is
   aimed right of centre so the far bird and the line of tractors stay in. */
.arc-photo img { aspect-ratio: 1 / 1; object-fit: cover; }
.arc-photo--right img { object-position: 75% center; }

/* phones: the arc unstacks into mark-above-photo, centred (2026-09-21) */
@media (max-width: 820px) {
  .brand-arc {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    justify-items: center;
    max-width: 480px;
  }
  .arc-mark--dg   { grid-row: 1; }
  .arc-photo--left  { grid-row: 2; }
  .arc-mark--mb   { grid-row: 3; margin-top: var(--sp-5); }
  .arc-photo--right { grid-row: 4; }
  .arc-photo { padding-top: 0; width: 100%; }
  /* on a phone each photo is alone on its line, so it keeps its own shape */
  .arc-photo--left img  { aspect-ratio: 4 / 5; }
  .arc-photo--right img { aspect-ratio: 3 / 2; object-position: center; }
}

/* the care paragraph — photo one side, the words beside it so they read */
.care {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.care-photo { margin: 0; }
.care-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  box-shadow: var(--shadow-md);
}
.care-words {
  margin: 0;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--sundown);
  font-family: var(--serif);
  font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1.5;
  color: var(--ink);
}
@media (max-width: 820px) {
  .care { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* ── photo rows on subpages ───────────────────────────────────────────── */
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin: var(--sp-6) 0; }
.photo-pair img, .photo-wide img {
  width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); display: block;
}
.photo-pair img { aspect-ratio: 4 / 3; }
.photo-wide { margin: var(--sp-6) 0; }
.photo-wide img { aspect-ratio: 5 / 3; }
/* .photo-strip retired 2026-09-21 — its fixed rows cropped; see .team-gallery below */
@media (max-width: 640px) {
  .photo-pair { grid-template-columns: 1fr; }
}

/* ── the crew gallery (Join Our Team) — masonry, nothing cropped ──────────
   All five crew photos are 1600×1200, so the variation is width, not crop: a
   wide column of two beside a narrow column of three, sized so both columns
   run out within one gap of each other. Replaces .photo-strip's fixed rows,
   which cut the group photo into a portrait (2026-09-21, Ben's review). */
.team-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  margin: var(--sp-6) 0;
}
.team-col { display: grid; gap: var(--sp-4); align-content: start; }
.team-gallery figure { margin: 0; }
.team-gallery img {
  width: 100%;
  height: auto;                        /* the photo's own shape, never a crop */
  border-radius: var(--radius-md);
  display: block;
}
@media (max-width: 640px) {
  .team-gallery { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .team-col { gap: var(--sp-3); }
}

/* farm store — the Q&A as a definition list, the map beside it */
.store {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--sp-7);
  align-items: start;
}
.store dl { margin: 0; }
.store dt {
  font-family: var(--display);
  font-size: clamp(21px, 2.4vw, 26px);
  margin-top: var(--sp-5);
}
.store dt:first-child { margin-top: 0; }
.store dd { margin: var(--sp-2) 0 0; color: var(--ink-soft); }
.store-map { margin: 0; }
.store-map img { width: 100%; height: auto; border-radius: var(--radius-md); display: block; box-shadow: var(--shadow-md); }
.store-map figcaption { font-family: var(--label); font-size: 14px; letter-spacing: 0.08em; color: var(--ink-soft); margin-top: var(--sp-3); }
@media (max-width: 820px) { .store { grid-template-columns: 1fr; } }

/* ── contact ───────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-7); align-items: start; }
.contact-lines { list-style: none; margin: 0; padding: 0; }
.contact-lines li { padding: var(--sp-4) 0; border-bottom: 1px solid var(--rule); }
.contact-lines .label { display: block; margin-bottom: var(--sp-1); }
.contact-lines a { color: var(--link); text-decoration: none; font-size: clamp(19px, 2vw, 22px); }
.contact-lines .big { font-family: var(--display); font-size: clamp(22px, 2.6vw, 30px); }
.contact-icons { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); }
/* the address stays in its own case — the display face is small-caps, which reads
   wrong on an email address */
.mail-line { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--serif); }
.mail-line svg { flex: none; color: var(--ink-faint); }
.icon-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-link:hover, .icon-link:focus-visible { color: var(--pasture-deep); border-color: var(--pasture-deep); }
.icon-link svg { display: block; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

/* ── stories ───────────────────────────────────────────────────────────── */
.story-list { list-style: none; margin: 0; padding: 0; }
.story-list li {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr);
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--rule);
}
.story-list .story-date {
  font-family: var(--label);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pasture-deep);
  padding-top: 0.5em;
}
.story-list h2 { font-size: clamp(24px, 2.8vw, 32px); }
.story-list h2 a { color: inherit; text-decoration: none; }
.story-list h2 a:hover, .story-list h2 a:focus-visible { color: var(--pasture-deep); }
.story-list .story-teaser { color: var(--ink-soft); margin-top: var(--sp-2); font-size: 17px; }
.story-list .story-tags { font-family: var(--label); font-size: 14px; letter-spacing: 0.08em; color: var(--ink-soft); margin-top: var(--sp-2); }
/* one tidy 4:3 box so the list reads as a column; the crop is aimed per post from
   stories.json ("thumb_position"), and a featured image that is a document rather
   than a photo ("thumb_fit": "contain") is shown whole on a toned pad instead of
   sliced (2026-09-21, Ben's review). */
.story-list img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); display: block; }
.story-list img.thumb-doc { object-fit: contain; background: var(--paper-2); padding: var(--sp-2); }
@media (max-width: 820px) {
  .story-list li { grid-template-columns: 1fr; gap: var(--sp-3); }
  .story-list img { max-width: 360px; }
}

/* post page — the banner is the old template's post thumbnail, kept above the title */
/* The banner shows the whole photo — no crop. It shrinks to fit the column and the
   viewport, and is never blown up past its own pixels (--nw, set by build-stories.py
   from the file itself). Before 2026-09-21 this was object-fit: cover, which took the
   tops of the heads off the wedding portrait on "Where are you from?". */
.story-banner { margin: 0 0 var(--sp-6); }
.story-banner img {
  width: auto;
  height: auto;
  max-width: min(100%, var(--nw, 100%));
  max-height: 62vh;
  margin-inline: auto;
  border-radius: var(--radius-md);
  display: block;
}
.story-head .story-meta {
  font-family: var(--label);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pasture-deep);
  margin-top: var(--sp-4);
}
/* The post reads as one centred column of prose with the photos free to run
   wider (2026-09-18). Three treatments, no more: a photo across the column, a
   photo paired beside its paragraph, or a row of photos. */
.story-body { max-width: none; }
.story-body > p,
.story-body > h2, .story-body > h3,
.story-body > ul, .story-body > ol,
.story-body > blockquote, .story-body > hr { max-width: 46em; margin-left: auto; margin-right: auto; }
.story-body p { color: var(--ink-soft); font-size: 19px; }
.story-body p:first-of-type { color: var(--ink); }
.story-body h2, .story-body h3 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.story-body h2 { font-size: clamp(26px, 3vw, 34px); }
.story-body ul, .story-body ol { color: var(--ink-soft); padding-left: 1.4em; margin-bottom: var(--sp-4); }
.story-body li { margin-bottom: var(--sp-2); }
.story-body a { color: var(--link); }
/* Every photo in a post renders at its own size, capped by the column, by --cap
   (the treatment's own limit) and by --nw (its real pixel width, written in by
   build-stories.py). Nothing is cropped and nothing is upscaled: the small
   reference shots — the cheese cave at 640×590, the kombucha infographic at 360
   wide — come out small, which is what they are. (2026-09-21, Ben's review.) */
.story-body figure { margin: var(--sp-6) 0; --cap: 100%; }
.story-body figure img {
  width: auto;
  height: auto;
  max-width: min(100%, var(--cap), var(--nw, 100%));
  max-height: 78vh;
  margin-inline: auto;
  border-radius: var(--radius-md);
  display: block;
}
.story-body figcaption { font-family: var(--label); font-size: 14px; letter-spacing: 0.06em; color: var(--ink-soft); margin-top: var(--sp-2); }
.story-body hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-6) 0; }
.story-body blockquote { margin: var(--sp-5) 0; padding-left: var(--sp-5); border-left: 2px solid var(--sundown); font-style: italic; }

/* a photo across the column; a portrait is held to a readable width so it does not
   run the length of the screen */
.story-body .story-figure--tall { --cap: 560px; }

/* a photo and its paragraph, side by side — the one weave */
.story-pair {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4.5vw, 80px);
  align-items: center;
  max-width: 72em;                      /* shares the prose's centre line */
  margin: var(--sp-7) auto;
}
.story-body .story-pair figure { margin: 0; }
.story-pair figure img { max-height: 58vh; }   /* a tall photo stays in step with its paragraph */
.story-pair p { margin: 0; }
.story-pair--right figure { order: 2; }

/* a run of photos, as masonry columns — each whole, no common box to trim to and
   no holes where a landscape shot sits in a row beside a portrait one. Columns
   balance their own heights, which is the whole trick. (2026-09-21.) */
.story-gallery { columns: 2; column-gap: var(--sp-4); margin: var(--sp-7) 0; }
.story-gallery--3 { columns: 3; }
.story-body .story-gallery figure { margin: 0 0 var(--sp-4); break-inside: avoid; }
.story-gallery img { max-height: none; }

/* a tall, narrow graphic (the borrowed kombucha infographic is 360×1400) stands at
   its own size rather than being capped into a ribbon */
.story-body .story-figure--strip { --cap: 100%; }
.story-body .story-figure--strip img { max-height: none; }

@media (max-width: 820px) {
  .story-pair { grid-template-columns: 1fr; gap: var(--sp-5); }
  .story-pair--right figure { order: 0; }
  .story-gallery--3 { columns: 2; }
}
@media (max-width: 520px) {
  .story-gallery, .story-gallery--3 { columns: 1; }
}

.story-nav {
  clear: both;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4);
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--rule);
  font-family: var(--label); font-size: 16px;
}
.story-nav a { color: var(--link); text-decoration: none; }
.story-nav a:hover, .story-nav a:focus-visible { text-decoration: underline; }

/* ── accessibility page list ───────────────────────────────────────────── */
.a11y-list { list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.a11y-list li { color: var(--ink-soft); margin-bottom: var(--sp-4); padding-left: var(--sp-5); border-left: 1px solid var(--rule); }
.a11y-list strong { color: var(--ink); font-weight: 600; }
.a11y-reviewed { font-family: var(--label); font-size: 15px; letter-spacing: 0.06em; color: var(--ink-soft); margin-top: var(--sp-6); }

/* ── footer — the three blocks, the open-door policy verbatim ───────────── */
.site-footer { border-top: 1px solid var(--rule); margin-top: clamp(48px, 8vh, 96px); padding: var(--sp-7) 0 var(--sp-6); background: var(--paper-2); }
.footer-blocks { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.footer-blocks img { width: 48px; height: auto; }
.footer-cols { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--sp-6); color: var(--ink-soft); font-size: 17px; }
.footer-cols .label { display: block; margin-bottom: var(--sp-2); }
.footer-cols address { font-style: normal; }
.footer-cols a { color: var(--link); text-decoration: none; }
.footer-cols a:hover, .footer-cols a:focus-visible { text-decoration: underline; }
.footer-nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--rule);
  font-family: var(--label); font-size: 16px;
}
.footer-nav a { color: var(--link); text-decoration: none; }
.footer-nav a:hover, .footer-nav a:focus-visible { text-decoration: underline; }
/* the fine line: the farm's own copyright at one end, the build credit at the
   other. Kept on --ink-soft (8.0:1) rather than --ink-faint, which is non-text
   only in this palette. (2026-09-21.) */
.footer-fine {
  margin-top: var(--sp-5);
  color: var(--ink-soft);
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
}
.footer-credit { font-family: var(--label); font-size: 14px; letter-spacing: 0.05em; }
.footer-credit a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); }
.footer-credit a:hover, .footer-credit a:focus-visible { border-bottom-color: var(--link); }
@media (max-width: 820px) { .footer-cols { grid-template-columns: 1fr; } }

/* ── reduced motion: the kit stills the reveals; nothing else moves here ── */
@media (prefers-reduced-motion: reduce) {
  .btn, .nav-links a, .icon-link, .mark-link { transition: none; }
  .mark-link:hover, .mark-link:focus-visible { transform: none; }
}