/* Story page — page-specific layout tweaks (ports mockups/story.html inline CSS). */
.story-lead{display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,48px);align-items:start}
/* Heritage portrait — show upright and complete (never a wide letterbox crop). */
.story-lead__media img{display:block;width:100%;max-width:480px;height:auto;margin:0 auto;border:1px solid var(--line)}
/* Title + prose read as one top-aligned text block; cap the measure so the copy
   never sets too wide when the container is single-column. */
.story-text{max-width:62ch}
.story-prose p{font-size:1.18rem;line-height:1.7;color:var(--ink-2);margin:0 0 1.1em}
.story-prose p:last-child{margin-bottom:0}
.purveyors__cta{margin-top:30px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:30px;justify-content:center}
.prose-center{text-align:center}
.prose-center .lede{margin-left:auto;margin-right:auto;margin-bottom:8px}
.mx-auto{margin-left:auto;margin-right:auto}
.families-note{font-family:var(--font-display);font-size:1.3rem;color:var(--ink);margin-top:30px}

/* Philosophy band (ink) — "When you eat well, you feel good." */
.story-philosophy{text-align:center;padding-top:clamp(60px,9vw,110px);padding-bottom:clamp(60px,9vw,110px)}
.story-philosophy h2{font-size:clamp(2.1rem,5vw,3.4rem);max-width:20ch;margin:0 auto 20px;color:var(--cream)}
.story-philosophy p{color:var(--cream-2);max-width:52ch;margin:0 auto;font-size:1.08rem}
/* B&W treatment — people/process/heritage shots only, never food. */
.img-bw{filter:grayscale(1) contrast(1.03)}

@media(min-width:981px){
  /* Modestly wider than .container--narrow (900px) so the text column sets at a
     comfortable 45-60 char measure once it is split off the photo column. */
  .story-page .container--narrow{max-width:1060px}
  .story-lead{grid-template-columns:1fr 1fr;align-items:start}
  .story-text{max-width:54ch}
  .story-lead__media img{max-width:500px}
}

/* Focused story close (7/14): centered heritage caption, a short closing line,
   and centered CTAs — no sparse horizontal split sections. */
.story-lead__media{margin:0}
.story-lead__cap{display:block;margin-top:10px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);text-align:center}
.story-closing{max-width:34ch;margin:clamp(32px,5vw,56px) auto 0;text-align:center;font-size:clamp(1.2rem,2.4vw,1.5rem);line-height:1.4;color:var(--ink)}
.story-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}

/* Second half of the story (8/12): sets full measure below the photo column, so the
   column beside the photograph stays short enough to sit level with it. */
.story-prose--wide{max-width:62ch;margin-top:clamp(28px,4vw,48px)}

/* "Read about us" (8/12): the outbound citations for the articles quoted above.
   Deliberately quiet per the calm direction: no cards, no logos, no chips. Each row is
   a headline with its publication beneath, and the whole row is the link. */
.story-press__h{font-size:clamp(1.3rem,2.6vw,1.7rem);margin:0 0 clamp(14px,2vw,22px)}
.story-press__list{list-style:none;margin:0;padding:0;max-width:62ch}
.story-press__list li{border-top:1px solid var(--line)}
.story-press__list li:last-child{border-bottom:1px solid var(--line)}
.story-press__list a{display:block;padding:14px 0;text-decoration:none;color:var(--ink)}
.story-press__list a:hover .story-press__title,
.story-press__list a:focus-visible .story-press__title{text-decoration:underline}
.story-press__title{display:block;font-size:1.05rem;line-height:1.4}
/* --accent, not --text-muted: the muted taupe is only rated AA on white and drops to
   3.82:1 on the soft band this section sits on. --accent clears it at 5.33:1. */
.story-press__meta{display:block;margin-top:4px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.story-press__note{max-width:62ch;margin:clamp(24px,3.5vw,38px) 0 clamp(10px,1.6vw,16px);color:var(--ink-2)}

/* Minimal, tight story page (7/14): title merged into the content column, snug
   padding, smaller gap between prose and photo — no sparse bands. */
.story-page.section{padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(40px,5vw,64px)}
/* Title sits inside the text column now: this is the gap to the first paragraph. */
.story__h{margin-bottom:clamp(16px,2.4vw,26px)}
/* Single gap rule for both breakpoints (higher specificity wins over the base). */
.story-page .story-lead{gap:clamp(28px,4vw,56px)}