/* ============================================================
   fooddiez.de — "Atlas unbekannter Gerichte"
   main.css — design tokens + sitewide chrome + shared components.

   Palette family: "safran" — single saturated saffron/turmeric
   chromatic (no second red/gold tone) on warm bone ground +
   warm near-black ink.
   Type: bold humanist-sans display paired with a Charter-led
   serif body — the INVERSE role assignment from
   gamblingguide.ca's Iowan-Old-Style-display pairing, so it
   doesn't collide on the P0 typography table.

   Token values are copied VERBATIM from the approved mockup
   (design-blueprints/homepage-v3.html). Do not "tidy" them.

   TWO EXCEPTIONS, both forced by WCAG AA (1.4.3) — an accessibility
   audit found 36 failing text/background combinations that all
   traced back to exactly these two tokens. Hue and saturation are
   held, only lightness moved, so the saffron/warm family is intact:

     --ink-3  light  #9C8A72 -> #786854   (was 2.84:1 on --ground)
     --ink-3  dark   #937E60 -> #9D8768   (was 4.05:1 on --surface-2)
     --herb   light  #A66A0E -> #8F5B0C   (was 3.59:1 on --herb-wash)
     --herb   dark   #F5BC4E   UNCHANGED  (9.14:1 worst case, passes)

   Worst-case ratios after the change, measured against every surface
   each token is actually painted on:
     light --ink-3 : ground 4.58 · surface 5.20 · surface-2 5.38
     light --herb  : herb-wash 4.59 · ground 4.88 · surface-2 5.72
     dark  --ink-3 : surface-2 4.57 · surface 4.92 · ground 5.30
   --herb has to clear --herb-wash too, because .method .eyebrow puts
   it on the wash band on the front page. Do not lighten either token
   back toward the mockup value without re-running those numbers.

   NOTE: this theme carries ZERO advertising. The approved mockup
   had two "Anzeige" placeholder slots (top leaderboard, in-feed);
   fooddiez.de only ever ran generic AdSense and house policy only
   preserves an ad position across a rebuild when it was
   specifically an online-gambling banner. Both slots and their
   CSS (.ad-strip/.ad-tag/.ad-box/.infeed) were removed, and the
   surrounding spacing closed up so nothing is left hanging.
   ============================================================ */

:root {
  --ground:      #F7ECD3;
  --surface:     #FFFBF1;
  --surface-2:   #FFFFFF;
  --ink:         #2B1D10;
  --ink-2:       #6B563E;
  --ink-3:       #786854;
  --line:        #E9D9B4;
  --line-soft:   #F0E4C4;
  --herb:        #8F5B0C;  /* text-safe saffron */
  --herb-bright: #F0A421;  /* fills, meters, glyphs */
  --herb-deep:   #7A4E0A;
  --herb-wash:   #FBE4B0;
  --mast-bg:     #2B1D10;  /* dark in both themes — a committed device */
  --mast-ink:    #FBF2DE;
  --mast-ink-2:  #C2AA88;
  --mast-line:   #4A3620;
  --hatch:       #EFE1BE;
  --band-hover:  #3A2914;
  --btn-bg:      #F0A421;
  --btn-ink:     #2B1D10;
  --btn-bg-h:    #7A4E0A;
  --btn-ink-h:   #FBF2DE;
  --shadow:      0 18px 46px -22px rgba(43,29,16,0.42);

  /* Selected-chip role (active Bekanntheitsgrad pill, current page number).
     NOT a new palette colour — it only says WHICH existing palette pair the
     "selected" state maps to, because the right answer differs per theme.
     Light: the near-black masthead fill, exactly as approved in the mockup.
     Dark:  see the dark blocks — there, near-black-on-dark makes the selected
     chip DARKER than the unselected ones, so the one state that should read as
     "active" recedes into the page instead. Dark maps it to the saffron button
     fill instead, which is the same pair .btn-solid already uses in dark. */
  --chip-bg:     var(--mast-bg);
  --chip-ink:    var(--mast-ink);
  --chip-n:      var(--herb-bright);

  --ff-display: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ff-body: Charter,"Bitstream Charter","Sitka Text",Georgia,"Times New Roman",serif;
  --ff-mono: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --sec: clamp(56px, 7.5vw, 104px);
  --gut: clamp(18px, 4vw, 32px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:      #1B140B;
    --surface:     #241B0F;
    --surface-2:   #2C2112;
    --ink:         #F5E9D2;
    --ink-2:       #CBB490;
    --ink-3:       #9D8768;
    --line:        #3E2E17;
    --line-soft:   #332512;
    --herb:        #F5BC4E;
    --herb-bright: #FFC94D;
    --herb-deep:   #FFDA8A;
    --herb-wash:   #3A2A10;
    --mast-bg:     #120D07;
    --mast-ink:    #FBF2DE;
    --mast-ink-2:  #C2AA88;
    --mast-line:   #362712;
    --hatch:       #2C2112;
    --band-hover:  #1D1509;
    --btn-bg:      #FFC94D;
    --btn-ink:     #1B140B;
    --btn-bg-h:    #FFDA8A;
    --btn-ink-h:   #1B140B;
    --shadow:      0 18px 46px -22px rgba(0,0,0,0.7);
    /* saffron fill, so "selected" is the brightest chip in the row rather than
       the dimmest. #1B140B on #FFC94D = 11.8:1. */
    --chip-bg:     var(--btn-bg);
    --chip-ink:    var(--btn-ink);
    --chip-n:      var(--btn-ink);
  }
}
/* explicit overrides win in BOTH directions, so a manual toggle can beat the OS */
:root[data-theme="dark"] {
  --ground:#1B140B; --surface:#241B0F; --surface-2:#2C2112;
  --ink:#F5E9D2; --ink-2:#CBB490; --ink-3:#9D8768;
  --line:#3E2E17; --line-soft:#332512;
  --herb:#F5BC4E; --herb-bright:#FFC94D; --herb-deep:#FFDA8A; --herb-wash:#3A2A10;
  --mast-bg:#120D07; --mast-ink:#FBF2DE; --mast-ink-2:#C2AA88; --mast-line:#362712;
  --hatch:#2C2112; --band-hover:#1D1509;
  --btn-bg:#FFC94D; --btn-ink:#1B140B; --btn-bg-h:#FFDA8A; --btn-ink-h:#1B140B;
  --shadow:0 18px 46px -22px rgba(0,0,0,0.7);
  --chip-bg:var(--btn-bg); --chip-ink:var(--btn-ink); --chip-n:var(--btn-ink);
}
:root[data-theme="light"] {
  --ground:#F7ECD3; --surface:#FFFBF1; --surface-2:#FFFFFF;
  --ink:#2B1D10; --ink-2:#6B563E; --ink-3:#786854;
  --line:#E9D9B4; --line-soft:#F0E4C4;
  --herb:#8F5B0C; --herb-bright:#F0A421; --herb-deep:#7A4E0A; --herb-wash:#FBE4B0;
  --mast-bg:#2B1D10; --mast-ink:#FBF2DE; --mast-ink-2:#C2AA88; --mast-line:#4A3620;
  --hatch:#EFE1BE; --band-hover:#3A2914;
  --btn-bg:#F0A421; --btn-ink:#2B1D10; --btn-bg-h:#7A4E0A; --btn-ink-h:#FBF2DE;
  --shadow:0 18px 46px -22px rgba(43,29,16,0.42);
  --chip-bg:var(--mast-bg); --chip-ink:var(--mast-ink); --chip-n:var(--herb-bright);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  /* overflow-x ONLY — never overflow/overflow-y on body, that kills Chrome scrolling */
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--herb-bright); outline-offset: 3px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gut); }

h1, h2, h3, .display { font-family: var(--ff-display); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.mono { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--btn-bg); color: var(--btn-ink);
  font-family: var(--ff-mono); font-size: 0.75rem; padding: 10px 16px;
}
.skip-link:focus { left: 8px; top: 8px; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  white-space: nowrap;
}

.eyebrow {
  font-family: var(--ff-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--herb);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- masthead ---------- */
.mast { background: var(--mast-bg); color: var(--mast-ink); }
.mast-inner {
  display: flex; align-items: center; gap: 20px 28px;
  flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px;
}
.wordmark { display: block; margin-right: auto; }
.wordmark b {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.03em;
  line-height: 1;
  display: inline-block;
}
.wordmark .chef-mark {
  width: 0.68em; height: 0.68em;
  fill: var(--herb-bright);
  vertical-align: -0.08em;
  margin-left: 4px;
}
.wordmark small {
  display: block;
  font-family: var(--ff-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mast-ink-2);
  margin-top: 5px;
}
.mast-nav { display: flex; gap: 22px; font-size: 0.875rem; font-weight: 600; overflow-x: auto; scrollbar-width: none; }
.mast-nav::-webkit-scrollbar { display: none; }
.mast-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.mast-nav a { color: var(--mast-ink); white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent; transition: border-color .18s ease, color .18s ease; }
.mast-nav a:hover, .mast-nav .current-menu-item > a { color: var(--herb-bright); border-bottom-color: var(--herb-bright); }
.mast-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--mast-line); border-radius: 12px; padding: 7px 10px; min-width: 190px; flex: 0 1 240px; }
.mast-search span { color: var(--herb-bright); font-size: 0.9rem; line-height: 1; }
.mast-search input {
  /* No `outline: none` here. It suppressed the global :focus-visible ring for
     this one control, leaving the search field the only focusable element on
     the site with no visible focus indicator (WCAG 2.4.7). */
  border: 0; background: none; color: var(--mast-ink);
  font-family: var(--ff-mono); font-size: 0.75rem; width: 100%; min-width: 0;
}
.mast-search input::placeholder { color: var(--mast-ink-2); }
.mast-search button { border: 0; background: none; padding: 0; cursor: pointer; color: var(--herb-bright); line-height: 1; }

/* ---------- section heads ---------- */
.sec-head { margin-bottom: 26px; }
.sec-head h1, .sec-head h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 8px; }
.sec-head p { color: var(--ink-2); font-size: 0.9375rem; max-width: 60ch; margin: 0; }
.sec-head .go { font-family: var(--ff-mono); font-size: 0.75rem; color: var(--herb); border-bottom: 1px solid currentColor; }

/* .sec-head-center: the "Stöbern nach Bekanntheitsgrad" and "Der Atlas
   unbekannter Gerichte..." sections on the front page only — every other
   .sec-head (e.g. the Magazin "Weiterlesen" band) keeps the normal
   left-aligned layout. The eyebrow's trailing hairline is dropped rather
   than centered with it: a short centered label with a line running off to
   just one side reads as broken, not centered. */
.sec-head-center { text-align: center; }
.sec-head-center .eyebrow { justify-content: center; }
.sec-head-center .eyebrow::after { display: none; }
.sec-head-center p { margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--ff-body); font-size: 0.8125rem; font-weight: 700;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; letter-spacing: 0.01em; display: inline-block;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-solid { background: var(--btn-bg); color: var(--btn-ink); }
.btn-solid:hover { background: var(--btn-bg-h); color: var(--btn-ink-h); }
.btn-line { background: none; border-color: var(--line); color: var(--ink); }
.btn-line:hover { border-color: var(--herb); color: var(--herb); }
.btn[hidden] { display: none; }
/* sitewide equivalent of home.css's .deck-actions, for templates that do not
   enqueue that sheet (404). */
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.fd-404-suggest { margin-top: var(--sec); }

/* ---------- exotic-meter (Bekanntheitsgrad, 3 segments) ---------- */
.meter { display: inline-flex; align-items: center; gap: 4px; vertical-align: -1px; margin-right: 8px; }
.meter i {
  width: 15px; height: 8px; display: block;
  background: var(--line); border-radius: 1px;
}
.meter i.on { background: var(--herb-bright); }
@media (prefers-reduced-motion: no-preference) {
  .meter i.on { animation: tick .34s cubic-bezier(.2,.8,.3,1) both; transform-origin: left center; }
  .meter i.on:nth-child(1) { animation-delay: .05s; }
  .meter i.on:nth-child(2) { animation-delay: .16s; }
  .meter i.on:nth-child(3) { animation-delay: .27s; }
}
@keyframes tick { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- toolbar (search + sort, /gerichte/ archive) ---------- */
.fd-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 24px;
}
.fd-toolbar-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; min-width: 200px; flex: 1 1 240px;
}
.fd-toolbar-search span { color: var(--herb); font-size: 0.9rem; line-height: 1; }
.fd-toolbar-search input {
  border: 0; background: none; color: var(--ink);
  font-family: var(--ff-mono); font-size: 0.8125rem; width: 100%; min-width: 0;
}
.fd-toolbar-search input::placeholder { color: var(--ink-3); }
.fd-toolbar-sort select {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; font-family: var(--ff-mono); font-size: 0.8125rem; color: var(--ink);
  cursor: pointer;
}
.fd-toolbar .btn { padding: 10px 20px; font-size: 0.75rem; }

/* ---------- filter pills (Bekanntheitsgrad) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 15px;
  font-size: 0.8125rem; font-weight: 600; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.pill:hover { border-color: var(--herb); color: var(--herb); }
.pill .n { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; font-size: 0.6875rem; color: var(--ink-3); }
/* aria-current, not aria-pressed: the pills are links now (see
   fd_render_bekanntheit_filters) so the /bekanntheit/ archives are crawlable.
   Rendering is byte-identical to the previous pressed state. */
.pill[aria-current] { background: var(--chip-bg); border-color: var(--chip-bg); color: var(--chip-ink); }
.pill[aria-current] .n { color: var(--chip-n); }
.pill[aria-current]:hover { color: var(--chip-ink); border-color: var(--chip-bg); }

/* ---------- dish grid (home, archive, taxonomy) ---------- */
.dish-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.dish {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* The transition already listed `transform`, but nothing ever set one — the
   whole hover was a 1px border tint, which on a 12-card grid barely registers
   as "this is clickable". A 3px lift plus the deck's own --shadow reuses depth
   the design already uses for the Steckbrief card. */
.dish:hover, .dish:focus-within { border-color: var(--herb); transform: translateY(-3px); box-shadow: var(--shadow); }
.dish.hide { display: none; }
.dish-shot { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.dish-shot img { width: 100%; height: 100%; object-fit: cover; }
.dish-flag {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--mast-bg); color: var(--mast-ink);
  font-family: var(--ff-mono); font-size: 0.5625rem; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 5px 9px;
}
/* hover reveal: DACH sourcing tip, overlaid on the photo (no layout shift) */
.dish-buy {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  background: var(--mast-bg); color: var(--mast-ink);
  padding: 11px 12px 12px;
  font-size: 0.75rem; line-height: 1.45;
  transform: translateY(102%); opacity: 0;
  transition: transform .26s cubic-bezier(.2,.8,.3,1), opacity .2s ease;
}
.dish-buy b {
  display: block; font-family: var(--ff-mono); font-weight: 400;
  font-size: 0.5625rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--herb-bright); margin-bottom: 3px;
}
.dish:hover .dish-buy, .dish:focus-within .dish-buy { transform: translateY(0); opacity: 1; }
/* no hover available (touch): keep the tip permanently visible, still absolutely
   positioned — a static child would be clipped out of the fixed-ratio photo box.
   This also means the card's link never needs a first tap to "reveal" anything,
   so there is no iOS double-tap trap. */
@media (hover: none) { .dish-buy { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dish-buy { transition: none; } }

.dish-txt { padding: 14px 14px 15px; display: flex; flex-direction: column; flex: 1; }
/* :is(h2,h3) — the card title's LEVEL is set by the caller (fd_heading_tag),
   because h3 under a page <h1> skipped a heading level on the archive and term
   pages. Rendering is identical for either element. */
.dish-txt :is(h2, h3) { font-size: 1.0625rem; line-height: 1.25; margin: 0; font-style: italic; overflow-wrap: anywhere; }
.dish-txt :is(h2, h3) a { display: block; }
.dish:hover .dish-txt :is(h2, h3) a { color: var(--herb); }
.dish-phon { font-family: var(--ff-mono); font-size: 0.6875rem; color: var(--ink-3); margin: 5px 0 0; overflow-wrap: anywhere; }
.dish-phon i { font-style: normal; color: var(--herb); font-weight: 700; text-transform: uppercase; }
.dish-gloss { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-2); margin: 9px 0 0; }
.dish-meta {
  margin-top: auto; padding-top: 12px;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.lvl { color: var(--herb); }
.lvl::before { content: "\25C6\A0"; }
.lvl.k2 { color: var(--ink-2); }
.lvl.k1 { color: var(--ink-3); }

.grid-empty {
  grid-column: 1 / -1; border: 1px dashed var(--line); border-radius: 18px;
  padding: 28px; text-align: center; color: var(--ink-3);
  font-family: var(--ff-mono); font-size: 0.75rem;
}

/* practical facets */
.facets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.facets .lbl { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.chip {
  font-family: var(--ff-mono); font-size: 0.6875rem;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; color: var(--ink-2);
  transition: border-color .16s ease, color .16s ease;
}
.chip:hover { border-color: var(--herb); color: var(--herb); }

/* ---------- magazine list ----------
   MOVED HERE FROM home.css. Three templates render this markup — the front
   page's "Weiterlesen" band, index.php (the /magazin/ index) and search.php
   (which requires index.php) — but home.css is only enqueued on the front page
   and the Atlas page. So /magazin/ and EVERY search-results page were shipping
   .mag/.mag-item markup with no rule to match it: full-bleed unstyled
   thumbnails, no row hairlines, dates orphaned onto their own line. It looked
   like a theme that had not been written yet. A component used by three
   templates belongs in the always-loaded sheet.

   The row also gained a dek (the real post excerpt). At 1440px the old row was
   a 92px thumb, a title, and ~700px of nothing before a right-aligned date —
   with real headlines in place it read as an unfinished list rather than an
   editorial index. */
.mag { display: grid; gap: 0; border-top: 1px solid var(--line); }
.mag-item {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 18px;
  align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .2s ease;
}
.mag-item:hover { padding-left: 8px; }
.mag-item img { width: 104px; height: 76px; object-fit: cover; border-radius: 12px; }
.mag-item :is(h2, h3) { font-size: 1.0625rem; margin: 0 0 4px; line-height: 1.3; }
.mag-item:hover :is(h2, h3) { color: var(--herb); }
.mag-item .tag {
  display: block; font-family: var(--ff-mono); font-size: 0.625rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--herb); margin-bottom: 5px;
}
.mag-item .dek { font-size: 0.875rem; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 74ch; }
.mag-item .when { font-family: var(--ff-mono); font-size: 0.6875rem; color: var(--ink-3); white-space: nowrap; }

/* ---------- breadcrumbs ---------- */
.crumbs {
  font-family: var(--ff-mono); font-size: 0.6875rem; color: var(--ink-3);
  padding: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px;
}
.crumbs a { border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--herb); border-bottom-color: currentColor; }
.crumbs span[aria-current] { color: var(--ink-2); }

/* ---------- magazine post body + suggested-articles sidebar ----------
   .prose keeps its 68ch measure; the sidebar fills the leftover width on the
   wide hero-width viewport instead of leaving it empty. Card look and sticky
   behavior mirror .zutaten on the dish template — same "narrow companion
   column" role, different content. */
.article-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 4vw, 48px); align-items: start; }
.mag-suggested {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 18px; padding: 20px 20px 6px;
  position: sticky; top: 20px;
}
.mag-suggested .kicker { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--herb-deep); margin: 0 0 14px; }
.mag-suggested ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mag-suggested li { border-top: 1px solid var(--line); }
.mag-suggested li:first-child { border-top: 0; }
.mag-suggested a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 0; }
.mag-suggested img { width: 64px; height: 46px; object-fit: cover; border-radius: 10px; }
.mag-suggested span { font-size: 0.875rem; line-height: 1.35; color: var(--ink); }
.mag-suggested a:hover span { color: var(--herb); }
@media (max-width: 900px) {
  .article-body { grid-template-columns: minmax(0, 1fr); }
  .mag-suggested { position: static; }
}

/* ---------- generic prose page ---------- */
.prose { max-width: 68ch; }
/* .prose-wide: /herkunfts-atlas/ and /aussprache/ only. Both sit directly under
   a full-width .page-head-hero row (the hero image runs the full height of that
   row), and the normal 68ch prose measure left a wide dead gap on the right
   below the image — the text block was less than half the row's own width.
   Fills the same width as the hero row above it instead. */
.prose-wide { max-width: none; }
.prose h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 34px 0 10px; }
.prose h3 { font-size: 1.0625rem; margin: 26px 0 8px; }
.prose p, .prose li { font-size: 1rem; line-height: 1.7; color: var(--ink-2); }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 8px; }
.prose strong { color: var(--ink); }
.prose a { color: var(--herb); border-bottom: 1px solid currentColor; }

.page-head { padding: 26px 0 0; }
.page-head h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.06; margin: 8px 0 14px; }
/* QA round 1 (2026-08-11): several H1s need fuller, keyword-carrying wording
   (cornerstones, magazine titles) that runs past 70 characters. Per house
   rule, the fix is a smaller font-size, never rewriting/shortening the text
   — see feedback_long_h1_fix_via_font_size. fd_h1_class() in helpers.php
   adds this modifier once the rendered H1 text passes that threshold. */
.page-head h1.long { font-size: clamp(1.5rem, 3vw, 2.1rem); }
/* 1.1875rem, not 1.0625rem. .prose p is 1rem, so at the old size the standfirst
   and the first body paragraph were within half a step of each other — on
   /herkunfts-atlas/, where the lede is immediately followed by prose, the two
   read as one undifferentiated block of grey text instead of deck-then-body. */
.page-head .lede { font-size: 1.1875rem; line-height: 1.6; color: var(--ink-2); max-width: 52ch; margin: 0; }

/* ---------- page hero image (index/atlas/aussprache/legal/editorial pages,
   and herkunft term archives) — text + image side by side, same proportions
   as the (otherwise unused on desktop) homepage .hero grid ---------- */
.page-head-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.page-head-hero .page-head { padding: 0; }
.page-head-hero .hero-img {
  /* height MUST be explicit (not left to default), because the <img> also
     carries real width/height HTML attributes (added for CLS prevention —
     see fd_hero_img()). Without an authored `height`, the browser uses the
     attribute's raw pixel value as the used height, which fights this
     aspect-ratio and produces a squeezed, over-cropped box under object-fit.
  */
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 20px; box-shadow: var(--shadow);
}
@media (max-width: 780px) {
  .page-head-hero { grid-template-columns: minmax(0, 1fr); }
  .page-head-hero .hero-img { aspect-ratio: 16 / 9; order: -1; }
}

.section-pad { padding: clamp(30px,4vw,48px) 0 var(--sec); }
/* When .section-pad is the last thing in its container its own var(--sec) bottom
   padding stacks on top of the next element's var(--sec) top margin — a measured
   208px of dead ground before the footer on /magazin/, /gerichte/, every term
   archive, every plain page and the 404. Whatever follows (footer.site, or
   .post-foot on single.php, where .section-pad is the last child of <article>)
   already carries a full var(--sec) of its own, and that is the site's section
   rhythm. Measured after: 104px in both cases. */
.section-pad:last-child { padding-bottom: 0; }

/* ---------- Aussprache list (page-aussprache.php) ---------- */
.pron-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pron-list li { border-bottom: 1px solid var(--line); }
.pron-list a, .pron-list > li > span {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 6px 20px; align-items: baseline; padding: 14px 0;
  transition: padding-left .18s ease;
}
.pron-list a:hover { padding-left: 8px; }
.pron-list em { font-family: var(--ff-display); font-weight: 800; font-style: italic; font-size: 1.0625rem; overflow-wrap: anywhere; }
.pron-list a:hover em { color: var(--herb); }
.pron-list .p { font-family: var(--ff-mono); font-size: 0.8125rem; color: var(--ink-2); overflow-wrap: anywhere; }
.pron-list .p i { font-style: normal; color: var(--herb); font-weight: 700; text-transform: uppercase; }
.pron-list .o { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 720px) {
  .pron-list a, .pron-list > li > span { grid-template-columns: minmax(0, 1fr) auto; }
  .pron-list .p { grid-column: 1 / -1; }
}

/* ---------- article foot (single.php + single-gericht.php) ----------
   ONE definition for both now. dish.css used to carry a byte-identical copy of
   this block ("ported verbatim so the dish page's rendering is untouched"), so
   the same grammar had to be fixed twice.

   Was `flex` + `justify-content: space-between` over three always-rendered
   spans. The first dish has no previous post and the last has no next, so on
   those pages one span is empty and space-between redistributes the survivors:
   on /gericht/molokhia/ the "Mehr aus Ägypten & Levante" link landed at ~45%
   of the width with the right third blank, which reads as a layout accident
   rather than a centred link. A 1fr/auto/1fr grid pins left/centre/right
   regardless of how many of the three are actually present. */
.dish-foot, .post-foot {
  margin-top: var(--sec); padding-top: 20px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px 26px; align-items: start;
  font-family: var(--ff-mono); font-size: 0.75rem;
}
.dish-foot > :nth-child(2), .post-foot > :nth-child(2) { text-align: center; }
.dish-foot > :nth-child(3), .post-foot > :nth-child(3) { text-align: right; }
.dish-foot a, .post-foot a { color: var(--herb); border-bottom: 1px solid currentColor; }
/* prev/next were bare titles with only an arrow to say which direction they
   went — "← Bánh xèo" alone does not tell you it is the previous recipe. */
.dish-foot small, .post-foot small {
  display: block; font-size: 0.625rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
@media (max-width: 720px) {
  .dish-foot, .post-foot { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .dish-foot > :nth-child(2), .post-foot > :nth-child(2),
  .dish-foot > :nth-child(3), .post-foot > :nth-child(3) { text-align: left; }
  .dish-foot > :empty, .post-foot > :empty { display: none; }
}

/* ---------- pagination ---------- */
.navigation.pagination { margin-top: 34px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--ff-mono); font-size: 0.8125rem; }
.nav-links .page-numbers {
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; color: var(--ink-2);
}
.nav-links .page-numbers.current { background: var(--chip-bg); border-color: var(--chip-bg); color: var(--chip-ink); }
.nav-links a.page-numbers:hover { border-color: var(--herb); color: var(--herb); }

/* ---------- footer ---------- */
footer.site { background: var(--mast-bg); color: var(--mast-ink); padding: clamp(38px,5vw,58px) 0 30px; margin-top: var(--sec); }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 28px; border-bottom: 1px solid var(--mast-line); }
.foot-top p { font-size: 0.8125rem; color: var(--mast-ink-2); max-width: 34ch; margin: 12px 0 0; }
/* h2 (was h4 — that skipped a heading level on every page). This rule overrides
   the global h1,h2,h3 display-font rule above, so the look is unchanged. */
.foot-col h2 { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--herb-bright); margin: 0 0 12px; font-weight: 400; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-col a { font-size: 0.8125rem; color: var(--mast-ink-2); }
.foot-col a:hover { color: var(--mast-ink); }
.foot-bot { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; padding-top: 18px; font-family: var(--ff-mono); font-size: 0.6875rem; color: var(--mast-ink-2); }

/* the home page's last section (.method) already carries a full --sec of bottom
   padding, so the footer must not add its own margin there — otherwise removing
   the mockup's annotation box leaves a double gap. */
.home footer.site { margin-top: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .dish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .foot-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .dish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .mag-item { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .mag-item img { width: 76px; height: 56px; }
  .mag-item .when { grid-column: 2; }
  /* clamped rather than hidden: at 390px the text column is ~250px, so a full
     dek is five lines and the row stops being scannable. */
  .mag-item .dek {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
@media (max-width: 460px) {
  .dish-grid { grid-template-columns: minmax(0, 1fr); }
}
/* The nav is an overflow-x: auto strip with its scrollbar hidden. Measured at
   390px it is 396px of content in a 354px box, so the last item ("Magazin")
   was clipped mid-word with nothing on screen to suggest it could be scrolled
   to — a hidden scrollbar plus a hard clip is a dead end on touch. It only
   overflows below ~430px, so let it wrap onto a second line there instead:
   every item stays visible and it stops depending on a gesture nobody is
   prompted to make. */
@media (max-width: 430px) {
  .mast-nav { overflow-x: visible; }
  .mast-nav, .mast-nav ul { flex-wrap: wrap; gap: 8px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}