/* Cape Town food: the /food/ hub and the dish pages. Card styles live in food-cards.css.
   Mobile first: 16px gutters under 768px, no element wider than the viewport. */
.fd-page { background: var(--fod-cream); color: var(--fod-body); overflow-x: clip; }
.fd-page a { color: var(--fod-terracotta); }
.fd-page a:focus-visible, .fd-page button:focus-visible { outline: 3px solid var(--fod-saffron); outline-offset: 2px; }
@media (max-width: 767.98px) { .fd-page .container { --bs-gutter-x: 2rem; } }

.fd-crumbs { margin: 0 0 1rem; font-size: .82rem; color: rgba(253, 246, 234, .78); }
.fd-crumbs a { color: var(--fod-saffron-soft); text-decoration: none; }
.fd-crumbs a:hover { text-decoration: underline; }
.fd-kicker { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .6rem; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--fod-saffron); }
.fd-kicker::before { content: ""; width: 1.8rem; height: 2px; background: currentColor; }
.fd-serif { font-family: var(--fod-serif); }

/* ── Hub hero: text and a collage of dish photos, each with its credit ── */
.fd-hero { position: relative; padding: 1.75rem 0 2.25rem; color: var(--fod-cream);
  background:
    radial-gradient(circle at 1.5px 1.5px, rgba(253, 246, 234, .07) 1.2px, transparent 1.6px) 0 0 / 16px 16px,
    radial-gradient(80% 110% at 100% 0%, #8a3518 0%, rgba(138, 53, 24, 0) 62%),
    linear-gradient(160deg, #6a2711 0%, #3d150a 100%); }
.fd-hero__grid { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 992px) { .fd-hero { padding: 2.5rem 0 3.5rem; } .fd-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; } }
.fd-title { margin: 0 0 .9rem; font-family: var(--fod-serif); font-size: clamp(2.6rem, 9vw, 4.6rem); font-weight: 700; line-height: .98; letter-spacing: -.025em; color: #fff; }
.fd-title em { font-style: italic; color: var(--fod-saffron-soft); }
.fd-lede { margin: 0; max-width: 46ch; font-size: 1.08rem; line-height: 1.6; color: rgba(253, 246, 234, .9); }
.fd-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.fd-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .95rem; border: 1px solid rgba(253, 246, 234, .3); border-radius: 999px; color: var(--fod-cream); font-size: .86rem; font-weight: 700; text-decoration: none; }
.fd-jump a:hover { border-color: var(--fod-saffron); color: var(--fod-saffron-soft); }
.fd-jump__count { margin-left: .35rem; color: var(--fod-saffron); font-variant-numeric: tabular-nums; }

.fd-collage { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); margin: 0; }
.fd-collage__item { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: #5a2412; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .7); }
.fd-collage__item img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.fd-collage__item:first-child { grid-column: span 2; }
.fd-collage__item:nth-child(4) { display: none; }
.fd-collage--2 .fd-collage__item:first-child { grid-column: auto; }
.fd-collage--2 .fd-collage__item:first-child img { aspect-ratio: 1; }
.fd-collage__item:first-child img { aspect-ratio: 16 / 10; }
@media (min-width: 992px) {
  .fd-collage { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); height: 30rem; }
  .fd-collage__item:first-child { grid-column: span 2; grid-row: span 2; }
  .fd-collage__item img, .fd-collage__item:first-child img { aspect-ratio: auto; height: 100%; }
  .fd-collage--1 .fd-collage__item:first-child { grid-column: span 3; }
}
.fd-collage__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem .75rem .55rem; background: linear-gradient(180deg, rgba(38, 12, 5, 0), rgba(38, 12, 5, .88)); font-size: .66rem; line-height: 1.35; color: rgba(253, 246, 234, .82); }
.fd-collage__cap strong { display: block; margin-bottom: .1rem; font-family: var(--fod-serif); font-size: 1.05rem; font-weight: 700; color: #fff; }
.fd-collage__cap strong a { color: #fff; text-decoration: none; }
.fd-collage__cap strong a:hover { color: var(--fod-saffron-soft); }
.fd-collage__cap a { color: rgba(253, 246, 234, .92); }
.fd-collage--empty { display: flex; align-items: flex-end; min-height: 14rem; padding: 1.25rem; border-radius: 16px; border: 1px solid rgba(253, 246, 234, .2);
  background: radial-gradient(circle at 1.5px 1.5px, rgba(242, 181, 68, .25) 1.2px, transparent 1.6px) 0 0 / 14px 14px; font-family: var(--fod-serif); font-style: italic; font-size: 1.4rem; color: var(--fod-saffron-soft); }

/* ── Sections ── */
.fd-section { padding: 2.5rem 0; }
@media (min-width: 768px) { .fd-section { padding: 3.5rem 0; } }
.fd-section--season { background: linear-gradient(180deg, #fbe7c2 0%, #f8dcaa 100%); border-bottom: 1px solid #efc98a; }
.fd-section--paper { background: var(--fod-paper); border-top: 1px solid var(--fod-line); border-bottom: 1px solid var(--fod-line); }
.fd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.25rem; }
.fd-head > :first-child { min-width: 0; }
.fd-label { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .35rem; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--fod-terracotta); }
.fd-label::before { content: ""; width: 1.4rem; height: 2px; background: currentColor; }
.fd-h2 { margin: 0; font-family: var(--fod-serif); font-size: clamp(1.7rem, 4.4vw, 2.4rem); font-weight: 700; line-height: 1.08; letter-spacing: -.015em; color: var(--fod-ink); }
.fd-sub { margin: .45rem 0 0; max-width: 60ch; font-size: .98rem; line-height: 1.55; color: var(--fod-body); }
.rail--fd { --rail-card-w: 280px; --rail-card-w-phone: 78vw; --rail-card-max: 300px; --rail-gap: 16px; --rail-line: rgba(61, 21, 10, .16); --rail-thumb: var(--fod-terracotta); --rail-arrow-ink: var(--fod-ink); --rail-arrow-line: rgba(61, 21, 10, .2); }
.rail--fd .rail__track { padding-bottom: 1.4rem; }

/* Filter chips: plain links (?category=…#dishes), so they work without JavaScript. */
.fd-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.fd-chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 1rem; border: 1px solid var(--fod-line); border-radius: 999px; background: #fff; color: var(--fod-ink) !important; font-size: .88rem; font-weight: 700; text-decoration: none; box-shadow: 0 1px 2px rgba(42, 18, 10, .06); }
.fd-chip:hover { border-color: var(--fod-terracotta); }
.fd-chip[aria-current="true"] { border-color: var(--fod-terracotta); background: var(--fod-terracotta); color: var(--fod-cream) !important; }
.fd-chip__n { font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }

/* Magazine grid: two columns on phones, four on desktop; every seventh card, starting with the first, is a feature twice the size. */
.fd-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .fd-grid { gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .fd-grid { gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fd-grid > li { display: flex; min-width: 0; }
.fd-grid > li > .fod-card { flex: 1 1 auto; }
.fd-grid > li.is-feature { grid-column: span 2; }
@media (min-width: 768px) { .fd-grid > li.is-feature { grid-row: span 2; } }
.fd-grid .fod-card__link, .fd-grid .fod-card--plain .fod-card__link { display: flex; flex-direction: column; flex: 1 1 auto; }
.fd-grid .is-feature .fod-card__media, .fd-grid .is-feature .fod-plain { flex: 1 1 auto; }
@media (min-width: 768px) { .fd-grid .is-feature .fod-card__media, .fd-grid .is-feature .fod-plain { aspect-ratio: auto; min-height: 100%; } }
.fd-grid .is-feature .fod-card__name, .fd-grid .is-feature .fod-plain__name { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.fd-grid .is-feature .fod-card__summary { -webkit-line-clamp: 3; font-size: .95rem; }
@media (max-width: 767.98px) {
  .fd-grid li:not(.is-feature) .fod-card__name { font-size: 1.15rem; }
  .fd-grid li:not(.is-feature) .fod-plain__name { font-size: 1.35rem; }
  .fd-grid li:not(.is-feature) .fod-card__summary, .fd-grid li:not(.is-feature) .fod-card__more { display: none; }
  .fd-grid li:not(.is-feature) .fod-card__scrim { padding: 3rem .75rem .75rem; }
  .fd-grid li:not(.is-feature) .fod-plain { padding: .8rem; }
  .fd-grid li:not(.is-feature) .fod-plain .fod-pill { top: .7rem; left: .8rem; }
  .fd-grid li:not(.is-feature) .fod-credit { padding: .4rem .75rem 0; margin-bottom: .55rem; }
  .fd-grid .fod-pill { font-size: .6rem; padding: .2rem .5rem; }
}
.fd-empty { padding: 1.25rem; border: 1px dashed var(--fod-line); border-radius: 14px; background: #fff; color: var(--fod-muted); }

/* Stories and maps */
.fd-stories { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); margin: 0; padding: 0; list-style: none; }
.fd-stories > li { display: flex; min-width: 0; }
.fd-stories > li > .fod-card { flex: 1 1 auto; }
.fd-maps { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin: 0; padding: 0; list-style: none; }
.fd-map { display: flex; gap: .9rem; align-items: flex-start; height: 100%; padding: 1.1rem 1.15rem; border: 1px solid var(--fod-line); border-radius: 16px; background: #fff; color: var(--fod-ink) !important; text-decoration: none; }
.fd-map:hover { border-color: var(--fod-terracotta); box-shadow: 0 10px 24px -16px rgba(42, 18, 10, .5); }
.fd-map__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--fod-saffron-soft); color: var(--fod-terracotta); font-size: 1.15rem; }
.fd-map__title { display: block; font-family: var(--fod-serif); font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.fd-map__text { display: block; margin-top: .2rem; font-size: .88rem; line-height: 1.45; color: var(--fod-muted); }
.fd-note { display: flex; gap: .75rem; align-items: flex-start; margin: 2rem 0 0; padding: 1rem 1.15rem; border-left: 3px solid var(--fod-saffron); background: #fff; font-size: .92rem; line-height: 1.55; color: var(--fod-body); }

/* ── Dish page ── */
.fd-dish-hero { position: relative; color: var(--fod-cream); background: linear-gradient(160deg, #6a2711 0%, #3d150a 100%); }
.fd-dish-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .fd-dish-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 34rem; } }
.fd-dish-hero__media { position: relative; margin: 0; background: #5a2412; }
.fd-dish-hero__media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 992px) { .fd-dish-hero__media img { aspect-ratio: auto; position: absolute; inset: 0; } }
.fd-dish-hero__media .fod-plain { aspect-ratio: 4 / 3; height: 100%; justify-content: center; }
@media (min-width: 992px) { .fd-dish-hero__media .fod-plain { aspect-ratio: auto; position: absolute; inset: 0; } }
.fd-dish-hero__media .fod-plain__name { font-size: clamp(3rem, 9vw, 5.5rem); }
.fd-dish-hero__text { display: flex; flex-direction: column; justify-content: center; padding: 1.75rem 1rem 2rem; }
@media (min-width: 768px) { .fd-dish-hero__text { padding: 2.25rem 2.5rem; } }
@media (min-width: 992px) { .fd-dish-hero__text { padding: 3rem 3.25rem; } }
.fd-dish-title { margin: 0 0 .35rem; font-family: var(--fod-serif); font-size: clamp(2.6rem, 8vw, 4.4rem); font-weight: 700; line-height: .98; letter-spacing: -.025em; color: #fff; overflow-wrap: anywhere; }
.fd-aka { margin: 0 0 1rem; font-family: var(--fod-serif); font-style: italic; font-size: 1.1rem; color: var(--fod-saffron-soft); }
.fd-dish-summary { margin: 0; font-size: 1.12rem; line-height: 1.6; color: rgba(253, 246, 234, .92); max-width: 44ch; }
.fd-dish-hero__pills { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; }
.fd-caption { margin: 0; padding: .55rem 1rem .7rem; background: #2a0f07; font-size: .74rem; line-height: 1.45; color: rgba(253, 246, 234, .8); }
.fd-caption a { color: rgba(253, 246, 234, .95); text-underline-offset: 2px; }
@media (min-width: 992px) { .fd-caption { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(42, 15, 7, 0), rgba(42, 15, 7, .9) 45%); padding-top: 2.5rem; } }

.fd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--fod-line); border-bottom: 1px solid var(--fod-line); }
@media (min-width: 768px) { .fd-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fd-facts > li { padding: 1rem 1rem 1.05rem; background: var(--fod-paper); min-width: 0; }
@media (min-width: 768px) { .fd-facts > li { padding: 1.2rem 1.5rem; } }
.fd-facts dt, .fd-facts__k { display: block; margin-bottom: .25rem; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--fod-terracotta); }
.fd-facts__v { display: block; font-family: var(--fod-serif); font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: var(--fod-ink); overflow-wrap: anywhere; }
.fd-facts__note { display: block; margin-top: .2rem; font-size: .8rem; line-height: 1.4; color: var(--fod-muted); }

.fd-article { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .fd-article { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4rem; align-items: start; } }
.fd-story { max-width: 66ch; font-family: var(--fod-serif); font-size: 1.16rem; line-height: 1.75; color: var(--fod-ink); }
.fd-story p { margin: 0 0 1.2rem; }
.fd-story > p:first-child::first-letter { float: left; margin: .12rem .5rem 0 0; font-size: 3.6rem; line-height: .82; font-weight: 700; color: var(--fod-terracotta); }

.fd-cook { position: relative; padding: 1.4rem 1.25rem 1.25rem; border-radius: 20px; background: var(--fod-deep); color: var(--fod-cream); box-shadow: var(--fod-shadow); }
@media (min-width: 992px) { .fd-cook { position: sticky; top: 5.5rem; } }
.fd-cook .fd-label { color: var(--fod-saffron); }
.fd-cook .fd-h2 { color: #fff; font-size: 1.7rem; }
.fd-cook__intro { margin: .45rem 0 1rem; font-size: .88rem; line-height: 1.5; color: rgba(253, 246, 234, .8); }
.fd-recipes { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.fd-recipe { display: flex; gap: .85rem; align-items: center; padding: .85rem .95rem; border: 1px solid rgba(253, 246, 234, .16); border-radius: 14px; background: rgba(253, 246, 234, .06); color: var(--fod-cream) !important; text-decoration: none; }
.fd-recipe:hover, .fd-recipe:focus-visible { border-color: var(--fod-saffron); background: rgba(242, 181, 68, .12); }
.fd-recipe__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--fod-saffron); color: var(--fod-deep); font-family: var(--fod-serif); font-size: 1.1rem; font-weight: 700; }
.fd-recipe__text { min-width: 0; flex: 1 1 auto; }
.fd-recipe__pub { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--fod-saffron); }
.fd-recipe__title { display: block; margin-top: .1rem; font-size: .95rem; font-weight: 700; line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
.fd-recipe__ext { flex: none; color: rgba(253, 246, 234, .7); font-size: .95rem; }
.fd-cook__note { margin: .9rem 0 0; font-size: .74rem; line-height: 1.45; color: rgba(253, 246, 234, .68); }

.fd-sources { margin: 0; padding: 0; list-style: none; counter-reset: src; display: grid; gap: .55rem; }
.fd-sources li { position: relative; padding-left: 2rem; font-size: .92rem; line-height: 1.5; counter-increment: src; }
.fd-sources li::before { content: counter(src); position: absolute; left: 0; top: .05rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--fod-saffron-soft); color: var(--fod-terracotta); font-size: .72rem; font-weight: 800; line-height: 1.4rem; text-align: center; }
.fd-sources__pub { color: var(--fod-muted); }
.fd-back { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 700; text-decoration: none; }