/* =====================================================================================
   stories.css (OWNER E): /stories, /guides, /guides/<city> and /stories/<slug> in the Colour Blocks look.
   Linked in <head> after site.css by front matter "css": "stories" (pages/stories.html, pages/guides.html; build.mjs
   sets it for every story and guide page), so it only adds to site.css's tokens and components.
   - .scards > li.scard   the story card (build.mjs storyCard): radius 32 / pad 12 / photo 20, like the Bite cards.
                          White on orange or ink, grey on white. 1 → 2 (600) → 3 (1100) → 4 (1600) across;
                          .scards--3 stops at 3. The headline's link is stretched over the card; credit links sit above it.
   - .idx-head            an index's header block (h1 + lede side by side from 1100px).
   - .st-hero .st-photo   an article's orange opening block: words beside the cover (in a white card with its credit).
   - .st-main             the article's text at the measure, with the places and the waitlist beside it from 1100px.
   - .st-more             More stories (orange).
   ===================================================================================== */

/* ---------- Story cards ---------- */
.scards { --cols: 1; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 24px); }
@media (min-width: 600px) { .scards { --cols: 2; } }
@media (min-width: 1100px) { .scards { --cols: 3; } }
@media (min-width: 1600px) { .scards:not(.scards--3) { --cols: 4; } }
.scard { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--white); color: var(--black); border-radius: var(--r-lg); padding: 12px 12px 20px; }
.blk--white .scard { background: var(--grey-1); }
.scard__ph { aspect-ratio: 3 / 2; border-radius: var(--r-md); overflow: hidden; background: var(--grey-2); }
.scard__ph picture { display: contents; }
.scard__ph img { width: 100%; height: 100%; object-fit: cover; }
.scard__kicker { margin: 18px 10px 0; font-size: .9375rem; font-weight: 700; line-height: 1.3; color: var(--orange-text); }
.scard .scard__title { margin: 8px 10px 0; max-width: none; font: 700 clamp(1.25rem, 1.05rem + .6vw, 1.625rem)/1.14 var(--font-display); letter-spacing: -.02em; }
.scard__link { color: inherit; text-decoration: none; }
.scard__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.scard__link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.scard__link:focus-visible { outline: none; }
.scard:has(.scard__link:focus-visible) { outline: 3px solid var(--accent-graphic); outline-offset: 3px; }
.scard__dek { margin: 10px 10px 0; font-size: 1rem; line-height: 1.5; color: var(--grey-4); }
.scard__foot { margin: auto 10px 0; padding-top: 16px; display: grid; gap: 2px; font-size: .8125rem; line-height: 1.4; color: var(--grey-4); }
.scard__foot time { font-weight: 600; }
.scard__credit a { position: relative; z-index: 1; padding-block: 14px; color: inherit; text-decoration: underline; }

/* ---------- Index header blocks (/stories, /guides, a guide hub) ---------- */
.idx-head__grid { display: grid; gap: 20px clamp(32px, 5vw, 96px); align-items: end; }
.idx-head__title { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.idx-head__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.blk.idx-head { padding-top: clamp(16px, 3vw, 56px); } /* continues the orange header: no lip */
.idx-head .lede, .idx-head .standfirst { color: var(--ink); }
.idx-head .more { color: var(--ink); }
@media (min-width: 1100px) { .idx-head__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.idx-note { margin-top: clamp(24px, 3vw, 40px); max-width: var(--measure); }

/* ---------- An article's opening (orange, continuing the header: no lip) ---------- */
.blk.st-hero { padding-top: clamp(8px, 2vw, 32px); }
.st-hero__grid { display: grid; gap: clamp(28px, 4vw, 80px); align-items: center; }
.st-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.st-hero .kicker, .st-hero .byline { color: var(--ink); }
.st-hero__title { max-width: 20ch; font: 800 clamp(2rem, 1.1rem + 3.4vw, 4.25rem)/1.04 var(--font-display); letter-spacing: -.03em; }
.st-hero__dek { max-width: 32em; font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.5rem); font-weight: 500; line-height: 1.45; }
.st-photo { margin: 0; min-width: 0; background: var(--white); color: var(--black); border-radius: var(--r-lg); padding: 12px; box-shadow: var(--shadow-float); }
.st-photo picture { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--grey-2); }
.st-photo img { width: 100%; height: 100%; object-fit: cover; }
.st-photo figcaption { margin: 12px 8px 2px; font-size: .8125rem; line-height: 1.4; color: var(--grey-4); }
.st-photo figcaption a { padding-block: 14px; color: inherit; text-decoration: underline; }
@media (min-width: 1100px) { .st-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

/* ---------- The article's text, places and waitlist (white) ---------- */
.st-main__grid { display: grid; gap: clamp(48px, 6vw, 96px); align-items: start; }
@media (min-width: 1100px) { .st-main__grid { grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem); } }
.st-text { min-width: 0; }
.prose.st-body { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.65; }
.prose.st-body > * + * { margin-top: 1.05em; }
.prose.st-body h2 { max-width: 24ch; margin-top: 1.9em; font: 700 clamp(1.375rem, 1.1rem + .9vw, 1.875rem)/1.15 var(--font-display); letter-spacing: -.02em; }
.prose.st-body blockquote { margin-block: 1.6em; padding: 2px 0 2px 1em; border-left: 4px solid var(--orange); font: 700 clamp(1.1875rem, 1rem + .6vw, 1.5rem)/1.35 var(--font-display); letter-spacing: -.02em; }
.story-note { max-width: 40rem; margin-top: clamp(40px, 5vw, 64px); padding: clamp(22px, 2.4vw, 36px); border-radius: var(--r-lg); background: var(--grey-1); font-size: 1rem; line-height: 1.55; color: var(--ink2); }
.story-note > * + * { margin-top: .7em; }
.story-note .story-note__title { max-width: none; font: 700 1.3125rem/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.story-note a { padding-block: 12px; text-decoration: underline; }
.st-aside { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.st-aside .st-aside__title { max-width: none; font: 700 clamp(1.5rem, 1.25rem + .8vw, 2rem)/1.08 var(--font-display); }
.story-places { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--ink); }
.story-places__item { display: flex; flex-direction: column; gap: 2px; padding-block: 14px; border-bottom: 2px solid var(--ink); }
.story-places__name { font: 700 1.125rem/1.25 var(--font-display); letter-spacing: -.02em; }
.story-places__blurb { font-size: 1rem; line-height: 1.45; color: var(--ink2); }
@media (min-width: 1100px) { .st-aside { align-self: stretch; } .st-cta { position: sticky; top: 24px; } }
.st-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 8px; padding: clamp(22px, 2.2vw, 32px); border-radius: var(--r-lg); background: var(--orange); color: var(--black); font-weight: 600; }

/* ---------- More stories (orange) ---------- */
.st-more__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 32px; margin-bottom: clamp(28px, 3.5vw, 56px); }
.st-more__head h2 { font-size: clamp(2rem, 4.4vw, 4.5rem); }