/* ═══════════════════════════════════════════════════════════════════════
   css/eat-drink.css — DG-045 · English Eat & Drink
   "Tavola Romana": warm ivory ground, deep wine primary, tomato and dark
   basil accents, espresso text, saffron reserved for UNESCO and editorial.

   Every value below is an audited token. All 39 foreground/background
   pairs used here were computed against WCAG 2.1: text pairs at 4.5:1
   (3.0:1 where >=24px or >=18.66px bold), non-text UI pairs at 3.0:1
   (SC 1.4.11). tools/test_dg045.py recomputes them, so a future colour
   edit cannot silently regress.

   Scope: this file is loaded by eat-drink/index.html only. It adds; it
   overrides nothing in modules/lux-cards.css or modules/lux-page.css,
   whose behaviour this task does not change.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* surfaces */
  --ed-ivory:      #FBF7F0;
  --ed-ivory-2:    #F4EDE2;
  --ed-card:       #FFFFFF;
  /* primary */
  --ed-wine:       #6E1A2B;
  --ed-wine-dk:    #4E101E;
  --ed-wine-lt:    #8A2338;
  /* accents */
  --ed-tomato:     #B3301F;
  --ed-tomato-dk:  #8E2417;
  --ed-basil:      #2F5233;
  --ed-basil-dk:   #1F3A23;
  /* text */
  --ed-espresso:   #241A16;
  --ed-espresso-2: #57443C;
  --ed-espresso-3: #6B564C;
  /* editorial gold */
  --ed-saffron:    #7E6010;   /* safe as TEXT on every ivory ground */
  --ed-gold-line:  #AC7B1A;   /* safe as a MEANINGFUL border (>=3.0) */
  /* lines */
  --ed-line-ui:    #96805F;   /* any border that identifies a control or state */
  --ed-line-soft:  #E4D9C8;   /* decorative only — never the sole boundary */

  --ed-radius:  12px;
  --ed-radius-s: 9px;
  --ed-tap:     44px;         /* minimum interactive target */
  --ed-fd: 'Cormorant Garamond', Georgia, serif;
  --ed-fb: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* The page ground. .content comes from modules/lux-page.css; we set the body
   surface here rather than editing that shared file.

   DG-059 — every rule below was scoped to `html[data-ed-en]`, which was right
   while the English page was the only page this stylesheet applied to. The
   fourteen localized pages are now built from the same templates and load this
   same file, and they declare `data-ed-page="<lang>"` rather than the English
   opt-in. Scoped to English alone, they were left without the page's own
   ground colour, without its 1240px reading measure, with a different hero
   padding and — the one that matters most — without the `.ed` focus rings.
   Measured on /eat-drink/de/ before this change: body `rgb(248,247,242)`
   against English's `rgb(251,247,240)`, `.ed` max-width `none` against
   `1240px`, hero padding-top 18px against 9px.

   `:is()` keeps the specificity identical — both arguments are attribute
   selectors — so nothing in the cascade moves. */
html:is([data-ed-en],[data-ed-page]) body { background: var(--ed-ivory); color: var(--ed-espresso); }

/* The shared container widens to 95vw (1368px at 1440). At that measure the
   decision row stretches and the reading column runs long. The English page
   is held to a centred 1240px instead. .ed is the only child of .content, so
   the UNESCO strip, the shortcuts and the catalogue all share one edge. */
html:is([data-ed-en],[data-ed-page]) .ed { max-width: 1240px; margin-inline: auto; }

/* The shared hero is generous for a landing page; on a 320px phone it costs
   the guest a fifth of the viewport before any content. Tightened here, in
   the English stylesheet, rather than in the shared modules/lux-page.css. */
html:is([data-ed-en],[data-ed-page]) .lux-hero { padding-top: 9px; padding-bottom: 9px; }
html:is([data-ed-en],[data-ed-page]) .content { padding-top: 8px; }

/* Narrow phones: 12px gutters instead of 16px. Four pixels of margin on each
   side buys roughly one line back on the UNESCO paragraph, which is worth more
   to the guest than the whitespace. The type size is unchanged. */
@media (max-width: 360px) {
  html:is([data-ed-en],[data-ed-page]) .content { --container-pad: 12px; }
  html:is([data-ed-en],[data-ed-page]) .ed-unesco-strip { padding: 6px 10px 6px 9px; }
  html:is([data-ed-en],[data-ed-page]) .ed-unesco-strip-h { font-size: .92rem; }
}

.ed { font-family: var(--ed-fb); color: var(--ed-espresso); }
/* The concierge bar is sticky and about 80px tall, so scrolling a heading to
   the top of the viewport put it behind the bar — measured: the essentials
   heading was covered by 21px, and the results heading landed 51px above the
   fold entirely. Every scroll target in this block reserves that room, so a
   chosen shortcut always lands somewhere the guest can see and the focused
   heading is never hidden. */
/* DG-059 — this was a hard 96px, which is the bar's height at 100% plus a
   little. The bar is taller at larger text sizes — measured 213px at 320px
   with 200% text in German — so a focused control landed UNDER it, which
   `tools/test_dg046_browser.mjs` H.3 reported the moment the forks started
   using this stylesheet. `js/concierge-bar.js` publishes the bar's live
   height as `--lux-cbar-h` for exactly this reason; the reservation now
   tracks it, and the fallback is the bar's declared min-height. */
/* DG-059 — and the other half, which scroll-margin cannot do: a control that
   is ALREADY inside the viewport but underneath the sticky bar is not scrolled
   at all when it takes focus, because the browser considers it visible. At
   320px with 200% text the bar is over a third of the screen, and the first
   control below it — the UNESCO opener — was focused behind it in the three
   languages whose pill wraps. `scroll-padding-top` tells the browser that the
   top of the scrollport is not usable, which is what makes a focus scroll
   happen at all. It does not disturb the page's own fragment scrolls: those
   are computed in js/eat-drink.js from scroll-margin, not by the browser. */
html:is([data-ed-en],[data-ed-page]) {
  scroll-padding-top: calc(var(--lux-cbar-h, 80px) + 16px);
}

html:is([data-ed-en],[data-ed-page]) .ed [id],
html:is([data-ed-en],[data-ed-page]) .ed h2,
html:is([data-ed-en],[data-ed-page]) .ed .ed-card {
  scroll-margin-top: calc(var(--lux-cbar-h, 80px) + 16px);
}
/* A card, a row or a badge that clips its overflow must never be the reason a
   guest cannot read a word. At large browser text sizes a long unbroken token
   — an address, an hours string, a venue name — outgrew its box and was cut
   silently, because the body clips horizontally and nothing scrolled. Every
   run of text in this block may break rather than be cut. */
/* Every run of text in this block, at every heading level: a dish name is an
   h5 and "Abbacchio a Scottadito" is 10.8px wider than a 320px screen at 200%
   text scaling, where nothing scrolls and an unbreakable word is simply cut. */
.ed, .ed p, .ed li, .ed span, .ed a, .ed td, .ed th, .ed summary,
.ed h2, .ed h3, .ed h4, .ed h5, .ed h6, .ed dt, .ed dd, .ed blockquote {
  overflow-wrap: break-word;
}
/* Accessible name padding for links whose visible label is short ("Call",
   "Directions"). Visible to assistive technology, invisible on screen. */
.ed-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.ed *, .ed *::before, .ed *::after { box-sizing: border-box; }
.ed h2, .ed h3, .ed h4 { font-family: var(--ed-fd); line-height: 1.18; }
.ed p { line-height: 1.55; }

/* ── focus: visible everywhere, >=3.0:1 on every ground we paint ────── */
.ed :focus-visible,
html:is([data-ed-en],[data-ed-page]) .ed a:focus-visible,
html:is([data-ed-en],[data-ed-page]) .ed button:focus-visible,
html:is([data-ed-en],[data-ed-page]) .ed summary:focus-visible,
html:is([data-ed-en],[data-ed-page]) .ed input:focus-visible,
html:is([data-ed-en],[data-ed-page]) .ed select:focus-visible {
  outline: 3px solid var(--ed-wine);
  outline-offset: 2px;
  border-radius: 4px;
}
.ed .ed-on-dark:focus-visible { outline-color: #FFFFFF; }

/* ── section rhythm ─────────────────────────────────────────────────── */
.ed-sec { margin: 0 0 16px; }
.ed-sec > h2 {
  font-size: clamp(1.14rem, 1rem + .6vw, 1.6rem);
  font-weight: 700;
  color: var(--ed-espresso);
  margin: 0 0 6px;
}
.ed-sec > h2:focus { outline: none; }
.ed-sec > h2:focus-visible { outline: 3px solid var(--ed-wine); outline-offset: 3px; }
.ed-sec-intro {
  font-size: .84rem;
  color: var(--ed-espresso-2);   /* 8.56:1 on ivory */
  margin: 0 0 12px;
  max-width: 62ch;
}

/* ═══ 1 · UNESCO — overlay (state A) + compact strip (state B) ═══════ */

/* One node, two presentations. Without scripting the full recognition stays
   in the page; with scripting the strip is shown and js/eat-drink.js moves the
   same node into the overlay. The `ed-js` class is set synchronously in the
   head so the swap happens before first paint and nothing flashes. */
.ed-unesco-strip { display: none; }
html.ed-js .ed-unesco-strip { display: flex; }
html.ed-js .ed-unesco-full { display: none; }
html.ed-js .ed-unesco-full.ed-unesco--in-overlay { display: block; }

/* ── state B · the compact strip ─────────────────────────────────────── */
.ed-unesco-strip {
  align-items: center;
  gap: 10px;
  /* One line, not three. The short mobile label leaves the heritage title the
     room it needs, so the control never wraps below it and the strip stays
     secondary to the food choices. */
  flex-wrap: nowrap;
  background: var(--ed-ivory-2);
  border-left: 4px solid var(--ed-gold-line);   /* 3.51:1 — SC 1.4.11 */
  border-radius: 0 var(--ed-radius) var(--ed-radius) 0;
  padding: 7px 12px 7px 11px;
  margin: 6px 0 14px;
}
/* A drawn gold mark. The temple emoji it replaces rendered as a flat grey
   system glyph on the owner's phone, which read as a broken icon. */
.ed-unesco-mark { display: flex; align-items: center; flex-shrink: 0; color: var(--ed-saffron); }
.ed-unesco-mark svg { display: block; }
.ed-unesco-strip-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ed-unesco-eyebrow {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ed-saffron);        /* 5.06:1 on ivory-2 */
}
.ed-unesco-strip-h {
  font-family: var(--ed-fd);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ed-espresso);       /* 14.63:1 on ivory-2 */
}
.ed-unesco-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ed-tap);
  padding: 10px 15px;
  border: 1.5px solid var(--ed-gold-line);
  border-radius: 99px;
  background: var(--ed-card);
  color: var(--ed-saffron);        /* 5.89:1 on white */
  font: inherit;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.ed-unesco-open:hover {
  background: var(--ed-saffron);
  color: #FFFFFF;                  /* 5.89:1 */
  border-color: var(--ed-saffron);
}
/* One control, one accessible name. The full label is what assistive
   technology announces at every width; below 560px the visible text shortens
   so the heritage title keeps the room it needs, and the 44px activation
   target is preserved by the padding rather than by the text length. */
.ed-uo-short { display: none; }
@media (max-width: 559px) {
  /* a little more air on the right, so the control never reads as touching
     the edge of the screen */
  .ed-unesco-strip { padding-right: 14px; }
  .ed-unesco-open { padding: 10px 13px; font-size: .74rem; }
  .ed-uo-long { display: none; }
  .ed-uo-short { display: inline; }
}

/* ── state A · the overlay ───────────────────────────────────────────── */
.ed-uw {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
           calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
}
.ed-uw[hidden] { display: none !important; }
.ed-uw-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 7, 5, .72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: edUwFade .28s ease-out both;
}
.ed-uw-box {
  position: relative;
  width: min(100%, 640px);
  max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  background: linear-gradient(168deg, var(--ed-ivory) 0%, var(--ed-ivory-2) 100%);
  border: 1px solid var(--ed-gold-line);
  border-radius: 18px;
  box-shadow: 0 26px 70px rgba(12, 7, 5, .45), 0 0 0 1px rgba(174, 123, 26, .18);
  animation: edUwRise .34s cubic-bezier(.16, .84, .34, 1) both;
  overflow: hidden;
}
/* a restrained gold hairline across the top, the original's visual language */
.ed-uw-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ed-gold-line) 24%,
              #E4C57A 50%, var(--ed-gold-line) 76%, transparent);
}
@keyframes edUwFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes edUwRise {
  from { opacity: 0; transform: translateY(16px) scale(.975) }
  to   { opacity: 1; transform: none }
}

.ed-uw-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 20px 20px 6px;
}
/* the editorial measure — the body never stretches across a desktop viewport */
.ed-uw-scroll .ed-unesco-full { max-width: 62ch; margin: 0 auto; }
.ed-uw-scroll .ed-unesco-badge {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ed-saffron);        /* 5.51:1 on ivory */
  margin: 0 0 7px;
}
.ed-uw-scroll .ed-unesco-title {
  font-family: var(--ed-fd);
  font-size: clamp(1.28rem, 1.05rem + 1.05vw, 1.85rem);
  font-weight: 700;
  line-height: 1.16;
  color: var(--ed-espresso);       /* 15.93:1 on ivory */
  margin: 0 0 11px;
}
.ed-uw-scroll .ed-unesco-body {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ed-espresso-2);     /* 8.56:1 on ivory */
  margin: 0;
}
.ed-uw-scroll .ed-unesco-body strong { color: var(--ed-espresso); font-weight: 700; }

/* action area — always visible, never scrolled away */
.ed-uw-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 13px 20px calc(15px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(174, 123, 26, .28);
  background: var(--ed-ivory-2);
}
.ed-uw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ed-tap);
  padding: 11px 18px;
  border-radius: 99px;
  border: 1.5px solid transparent;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.ed-uw-btn--primary { background: var(--ed-wine); color: #FFFFFF; }   /* 11.38:1 */
.ed-uw-btn--primary:hover { background: var(--ed-wine-lt); }
.ed-uw-btn--ghost {
  background: transparent;
  color: var(--ed-wine);           /* 9.78:1 on ivory-2 */
  border-color: var(--ed-line-ui); /* 3.25:1 on ivory-2 */
}
.ed-uw-btn--ghost:hover { border-color: var(--ed-wine); background: var(--ed-card); }
.ed-uw-btn[hidden] { display: none !important; }

/* countdown — a ring plus a numeral, both aria-hidden so a screen reader is
   not told the number every second. The mechanism is announced once instead. */
.ed-uw-timer {
  position: relative;
  width: 40px; height: 40px;
  margin-left: auto;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.ed-uw-timer[hidden] { display: none !important; }
.ed-uw-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.ed-uw-ring circle { fill: none; stroke-width: 3; }
.ed-uw-ring .bg { stroke: rgba(174, 123, 26, .26); }
.ed-uw-ring .fg { stroke: var(--ed-gold-line); transition: stroke-dashoffset .2s linear; }
.ed-uw-num {
  font-size: .82rem;
  font-weight: 800;
  color: var(--ed-saffron);        /* 5.06:1 on ivory-2 */
  font-variant-numeric: tabular-nums;
}
.ed-uw-paused .ed-uw-timer { display: none; }

@media (max-width: 420px) {
  .ed-uw { padding: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom)); }
  .ed-uw-box { max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .ed-uw-scroll { padding: 16px 16px 4px; }
  .ed-uw-actions { padding: 11px 16px calc(13px + env(safe-area-inset-bottom)); gap: 7px; }
  .ed-uw-btn { flex: 1 1 auto; padding: 11px 12px; font-size: .78rem; }
}

/* Reduced motion: no scale, no fade, no ring animation. The controller also
   stops auto-dismissing, so the guest closes it themselves. */
@media (prefers-reduced-motion: reduce) {
  .ed-uw-backdrop, .ed-uw-box { animation: none !important; }
  .ed-uw-ring .fg { transition: none !important; }
}

/* ═══ 2 · decision shortcuts — the ingredient checkerboard ═══════════════
   Six choices, each carrying a muted Italian-ingredient colour: a tinted
   ground while it is one of the options, the matching deep colour when it is
   the one chosen. The checkerboard comes from the arrangement and these muted
   tints, never from alternating flag colours. The same values are declared in
   data/eat-drink-en.json, and tools/test_dg045.py recomputes every rendered
   combination against WCAG rather than trusting a token name.

   No card is filled unless it is the selection. "Near the apartment" keeps its
   prominence through the full-width row, a heavier border and larger type — so
   it can never read as a second active choice beside a real one. */
:root {
  --ed-ing-near-tint:            #DCE5D6;  /* sage        */
  --ed-ing-near-deep:            #2F5233;  /* basil       */
  --ed-ing-roman-dinner-tint:    #E8C1B5;  /* terracotta  */
  --ed-ing-roman-dinner-deep:    #9E3528;  /* dark tomato */
  --ed-ing-quick-tint:           #E8D29A;  /* pasta gold  */
  --ed-ing-quick-deep:           #7E6010;  /* saffron     */
  --ed-ing-coffee-sweet-tint:    #D7BDA4;  /* cappuccino  */
  --ed-ing-coffee-sweet-deep:    #3B2922;  /* espresso    */
  --ed-ing-aperitivo-tint:       #DFC4CD;  /* wine blush  */
  --ed-ing-aperitivo-deep:       #6E1A2B;  /* wine        */
  --ed-ing-special-evening-tint: #D5C5D2;  /* aubergine   */
  --ed-ing-special-evening-deep: #4B243A;  /* deep plum   */
}
.ed-sc[data-ed-shortcut="near"]            { --ing-tint: var(--ed-ing-near-tint);            --ing-deep: var(--ed-ing-near-deep); }
.ed-sc[data-ed-shortcut="roman-dinner"]    { --ing-tint: var(--ed-ing-roman-dinner-tint);    --ing-deep: var(--ed-ing-roman-dinner-deep); }
.ed-sc[data-ed-shortcut="quick"]           { --ing-tint: var(--ed-ing-quick-tint);           --ing-deep: var(--ed-ing-quick-deep); }
.ed-sc[data-ed-shortcut="coffee-sweet"]    { --ing-tint: var(--ed-ing-coffee-sweet-tint);    --ing-deep: var(--ed-ing-coffee-sweet-deep); }
.ed-sc[data-ed-shortcut="aperitivo"]       { --ing-tint: var(--ed-ing-aperitivo-tint);       --ing-deep: var(--ed-ing-aperitivo-deep); }
.ed-sc[data-ed-shortcut="special-evening"] { --ing-tint: var(--ed-ing-special-evening-tint); --ing-deep: var(--ed-ing-special-evening-deep); }

/* ═══ DG-049 · the square menu ════════════════════════════════════════
   Six equal squares in one regular grid: two columns on a phone, three from
   560px, and from 900px three columns inside a centred 940px menu so the six
   cards stay a menu instead of stretching across the 1240px content column.
   No card spans, because a span is what made them unequal. */
.ed-sc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
.ed-sc-list > li { margin: 0; min-width: 0; }

.ed-sc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  /* the square. Every card declares it, so the six agree by construction
     rather than by a height somebody has to keep in step. Where container
     queries exist the @supports block below turns it into a floor instead —
     see the note there. */
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 44px;
  padding: 12px 10px;
  border-radius: var(--ed-radius);
  background: var(--ing-tint);
  border: 1.5px solid var(--ing-deep);      /* 3.96:1 minimum on its own tint */
  font: inherit;
  font-size: 1.0625rem;                     /* 17px at 320 */
  font-weight: 700;
  line-height: 1.2;
  color: var(--ed-espresso);                /* 9.48:1 minimum on any tint */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
/* Four distinguishable states, none of them colour alone: hover doubles the
   rule without moving anything, pressed nudges the card, focus draws a ring
   outside it, and the selection adds a check. */
.ed-sc:hover { box-shadow: inset 0 0 0 1.5px var(--ing-deep); }
.ed-sc:active { transform: translateY(1px); }
.ed-sc:focus-visible {
  outline: 3px solid var(--ed-espresso);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 2px var(--ed-gold-line);
}

/* The square has to be a floor, not a cage. aspect-ratio fixes the height:
   when a guest enlarges browser text the label needs more room, the card does
   not give it, and the words paint outside the card and over the one beside
   it — measured at 320px/200%: 104px of text outside a 143px card. So where
   container queries exist — every browser this guide targets — the card is at
   least as tall as its own column (100cqw, the <li> being the container) and
   taller when the text needs it. At 100% every card is exactly its column
   width and the six are square and equal; at 125, 150 and 200% they grow
   downwards and nothing is ever cut. aspect-ratio above stays as the fallback
   for a browser without container queries, which then gets the square and the
   old overflow rather than no square at all. */
@supports (min-height: 100cqw) {
  .ed-sc-list > li { container-type: inline-size; }
  .ed-sc {
    aspect-ratio: auto;
    /* fill the row, so two cards side by side grow together instead of one
       standing tall beside a short one */
    height: 100%;
    min-height: 100cqw;
  }
}

.ed-sc-art {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ed-card);
  border: 1px solid var(--ed-gold-line);
  overflow: hidden;
}
/* Fallback layer. It sits behind the opaque illustration and is never seen
   while the image renders; with images disabled, or if a file fails and the
   onerror hides the picture, the monogram is what remains. */
.ed-sc-art-mono {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ed-fd);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--ed-saffron);          /* 6.63:1 on --ed-card */
}
.ed-sc-art picture { position: relative; display: block; width: 100%; height: 100%; }
.ed-sc-art-img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ed-sc-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  width: 100%;
}
/* The device chooses the font, and a face wider than DM Sans could otherwise
   push a long word past the card. Breaking a word is a last resort the guest
   will almost never see; a word escaping its card is not. */
/* DG-049 — the label is centred in a square, so its own box must never be
   wider than the card. break-word only breaks when the container already
   constrains the line; at 200% text "apartment" is 180px in a 143px card and
   the flex item would otherwise take its min-content width and push the page
   sideways. max-width pins it to the card and anywhere lets the break happen. */
.ed-sc-lab {
  display: block;
  min-width: 0;
  max-width: 100%;
  /* at 200% text "apartment" is wider than the card, so the line has to break
     inside a word. Hyphenate where English allows it and break anywhere only
     where it does not. */
  hyphens: auto;
  overflow-wrap: anywhere;
}
.ed-sc-hint {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ed-espresso-2);       /* 5.09:1 minimum on any tint */
}

/* "Near the apartment" — first, with a heavier rule, a restrained lift and a
   larger label. Prominence without a fill, so only the real selection is ever
   filled and nothing else can be mistaken for one. */
.ed-sc--primary {
  border-width: 3px;
  font-size: 1.125rem;
  box-shadow: 0 2px 10px rgba(47, 82, 51, .18);
}

/* ── selection · exactly one, and never signalled by colour alone ────────
   The check is a real element, so it can be asserted rather than inferred
   from a pseudo-element. It appears only on the card carrying aria-current. */
.ed-sc-check { display: none; }
.ed-sc[aria-current="true"] {
  background: var(--ing-deep);
  border-color: var(--ing-deep);
  color: #FFFFFF;                    /* 5.89:1 minimum on any deep colour */
}
.ed-sc[aria-current="true"] .ed-sc-hint { color: #F0E4D8; }
.ed-sc[aria-current="true"] .ed-sc-art { border-color: #E7D2A6; }
.ed-sc[aria-current="true"] .ed-sc-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid #FFFFFF;
  color: #FFFFFF;
  font-size: .8rem;
  font-weight: 900;
  line-height: 1;
}
.ed-sc[aria-current="true"] .ed-sc-check::before { content: "\2713"; }

/* ═══ 3 · essentials ═════════════════════════════════════════════════ */
/* A grid with no named track sizes its single column to max-content, so one
   long word can widen the whole column past the screen. Every one-column grid
   in this stylesheet names minmax(0, 1fr) so the track can shrink. */
.ed-ess-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
}

.ed-ess {
  background: var(--ed-card);
  border: 1.5px solid var(--ed-line-soft);
  border-left: 4px solid var(--ed-tomato);
  border-radius: var(--ed-radius);
  padding: 9px 11px 10px;
}
/* The recommendation type and the pick badge share the first line. Both are
   small caps, neither needs a line of its own, and the line they free is the
   one the meta row used to wrap onto at 320px. */
.ed-ess-role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ed-tomato-dk);      /* 8.70:1 on white */
  margin: 0 0 2px;
}
.ed-ess-role-lab { min-width: 0; overflow-wrap: break-word; }
.ed-ess-name { font-size: 1rem; font-weight: 800; margin: 0 0 2px; line-height: 1.2; }
.ed-ess-name a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ed-tap);
  color: var(--ed-espresso);
  text-decoration: none;
}
.ed-ess-name a:hover { text-decoration: underline; }
.ed-ess-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 9px;
  font-size: .73rem;
  color: var(--ed-espresso-3);
  margin: 0 0 7px;
}
.ed-sec-intro--after { margin: 10px 0 0; font-size: .78rem; }
.ed-ess-note { font-size: .8rem; color: var(--ed-espresso-2); margin: 0 0 9px; max-width: 60ch; }

/* Our pick — wine. Distinct from the partner treatment below. */
.ed-badge-pick {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--ed-wine);
  color: #FFFFFF;                  /* 11.38:1 */
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Partner benefit — basil, outlined, deliberately NOT equivalent to a pick:
   different hue, different shape, its own label and its own disclaimer. */
.ed-partner {
  border: 1.5px solid var(--ed-basil);   /* 8.84:1 as a border */
  border-radius: var(--ed-radius-s);
  background: #F2F6F2;
  padding: 7px 9px;
  margin: 0 0 8px;
}
/* The label runs into the terms instead of owning a line. It keeps its own
   colour, its own weight and its own words, so the benefit still reads as a
   partner arrangement and never as an editorial pick. */
.ed-partner-label {
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ed-basil-dk);       /* 13.03:1 on #F2F6F2 */
  margin-right: 7px;
  white-space: nowrap;
}
.ed-partner-terms { font-size: .78rem; line-height: 1.4; color: var(--ed-espresso); margin: 0; }
.ed-partner-note { font-size: .68rem; color: var(--ed-espresso-2); margin: 2px 0 0; }

/* the special-evening feature */
.ed-ess--feature { border-left-color: var(--ed-saffron); }
.ed-ess--feature .ed-ess-role { color: var(--ed-saffron); }   /* 5.89:1 on white */
/* The frame owns the aspect ratio and both children fill it absolutely, so the
   card is exactly as tall whether the photograph arrives or not — there is no
   height to shift. 16:9 on a phone, 3:2 from 560px; the file, its sizes and its
   failure behaviour are unchanged. */
.ed-feature-media {
  position: relative;
  margin: 0 0 10px;
  border-radius: var(--ed-radius-s);
  overflow: hidden;
  background: var(--ed-ivory-2);
  aspect-ratio: 16 / 9;
}
@media (min-width: 560px) {
  .ed-feature-media { aspect-ratio: 3 / 2; }
}
.ed-feature-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ed-feature-media img[data-ed-failed] { display: none; }

/* The failure state is a designed panel, not a broken-image icon and not an
   empty rectangle: ivory ground, a saffron rule under a drawn arch, the venue's
   name in the display face. It is plainly a mark, never a photograph, and it
   carries no image of anything unverified. Every word is already real text in
   the card, so the panel is aria-hidden and the name is announced once. */
.ed-feature-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, var(--ed-ivory-2) 62%, #F2EAD9 100%);
  box-shadow: inset 0 0 0 1.5px var(--ed-gold-line);
}
.ed-feature-media[data-ed-failed] .ed-feature-fallback { display: flex; }
.ed-feature-mark {
  width: 44px;
  height: 37px;
  color: var(--ed-saffron);          /* 5.89:1 on the ivory ground */
  flex-shrink: 0;
}
.ed-feature-fallback-name {
  font-family: var(--ed-fd);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  color: var(--ed-wine);             /* 11.38:1 */
}
.ed-feature-fallback-note {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ed-espresso-2);       /* 9.14:1 */
}
.ed-elsewhere {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 99px;
  border: 1.5px solid var(--ed-gold-line);
  color: var(--ed-saffron);
  background: var(--ed-ivory-2);
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ═══ 4 · find — search and filters ══════════════════════════════════ */
.ed-find { background: var(--ed-ivory-2); border-radius: var(--ed-radius); padding: 13px; }
.ed-field { display: block; margin: 0 0 10px; }
.ed-field > .ed-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ed-espresso-2);
  margin: 0 0 4px;
}
.ed-input, .ed-select {
  width: 100%;
  min-height: var(--ed-tap);
  padding: 10px 12px;
  border: 1.5px solid var(--ed-line-ui);
  border-radius: var(--ed-radius-s);
  background: var(--ed-card);
  color: var(--ed-espresso);
  font: inherit;
  font-size: .86rem;
}
.ed-input::placeholder { color: var(--ed-espresso-3); opacity: 1; }
.ed-filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.ed-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--ed-tap);
  padding: 6px 2px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ed-espresso);
  cursor: pointer;
}
.ed-toggle input { width: 24px; height: 24px; accent-color: var(--ed-wine); flex-shrink: 0; }

.ed-clear {
  min-height: var(--ed-tap);
  width: 100%;
  margin-top: 9px;
  padding: 10px 14px;
  border: 1.5px solid var(--ed-wine);
  border-radius: 99px;
  background: var(--ed-card);
  color: var(--ed-wine);           /* 11.38:1 */
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.ed-clear:hover { background: var(--ed-wine); color: #FFFFFF; }

.ed-count {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ed-espresso-2);
  margin: 12px 0 8px;
}
.ed-empty {
  padding: 14px;
  border: 1.5px dashed var(--ed-line-ui);
  border-radius: var(--ed-radius-s);
  font-size: .84rem;
  color: var(--ed-espresso-2);
}

/* ═══ 5 · categories, as one compact disclosure ══════════════════════
   Thirteen large pills in a ragged waterfall cost 554px at 320 and 503 at 360,
   with no hierarchy and no state. The same thirteen live behind one control,
   in a regular grid, and each of them is a filter rather than only an anchor. */
.ed-cats {
  border: 1.5px solid var(--ed-line-ui);
  border-radius: var(--ed-radius-s);
  background: var(--ed-card);
  margin: 0 0 12px;
}
/* Label and indicator on the first line, the hint under the label when it no
   longer fits beside it — so the caret never drifts to a line of its own. */
.ed-cats-sum {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 10px;
  min-height: var(--ed-tap);
  padding: 10px 13px;
  font-size: .84rem;
  font-weight: 700;
  color: var(--ed-espresso);
  cursor: pointer;
  list-style: none;
}
.ed-cats-sum::-webkit-details-marker { display: none; }
/* A real element rather than generated content: CSS content is read into the
   accessible name, and the caret is decoration — the state is exposed by the
   disclosure itself and by aria-expanded. */
.ed-cats-caret {
  grid-column: 2;
  grid-row: 1;
  font-size: .9rem;
  line-height: 1;
  color: var(--ed-espresso-2);
  transition: transform .18s ease;
}
.ed-cats[open] .ed-cats-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .ed-cats-caret { transition: none; }
}
.ed-cats-lab { grid-column: 1; grid-row: 1; min-width: 0; overflow-wrap: break-word; }
/* No nowrap: at 200% text scaling "13 categories · 93 unique places" is wider
   than a 320px screen, and a summary that wraps to two lines is the correct
   answer — a line cut at the edge is not. */
.ed-cats-hint {
  font-size: .7rem;
  font-weight: 600;
  color: var(--ed-espresso-2);
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  overflow-wrap: break-word;
}
.ed-cats-sum:hover { background: var(--ed-ivory-2); }
.ed-cats-sum:focus-visible {
  outline: 3px solid var(--ed-espresso);
  outline-offset: 2px;
}

/* Two equal columns on a phone, more as the width allows. Every control is the
   same height, so the grid never reads as a waterfall. */
.ed-catgrid {
  list-style: none;
  margin: 0;
  padding: 0 10px 11px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.ed-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: var(--ed-tap);
  padding: 8px 10px;
  border: 1.5px solid var(--ed-line-ui);
  border-radius: var(--ed-radius-s);
  background: var(--ed-card);
  color: var(--ed-espresso);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.ed-cat-lab { min-width: 0; overflow-wrap: break-word; }
.ed-cat:hover { border-color: var(--ed-wine); background: var(--ed-ivory-2); }
.ed-cat:focus-visible { outline: 3px solid var(--ed-espresso); outline-offset: 2px; }
/* The chosen category is a fill, a heavier border AND a check — never colour
   alone, and the same grammar the shortcut checkerboard uses. */
.ed-cat[aria-current="true"] {
  background: var(--ed-wine);
  border-color: var(--ed-wine);
  color: #FFFFFF;                   /* 11.38:1 */
}
.ed-cat[aria-current="true"] .ed-catn {
  background: #FFFFFF;
  color: var(--ed-wine);
}
.ed-cat[aria-current="true"] .ed-cat-lab::after {
  content: " \2713";
  font-weight: 900;
}
.ed-catn {
  flex-shrink: 0;
  font-size: .7rem;
  font-weight: 800;
  color: #FFFFFF;
  background: var(--ed-espresso-2);   /* 9.14:1 for the numeral */
  border-radius: 99px;
  padding: 1px 7px;
}

/* ═══ 5b · what the list is showing, and how much of it ══════════════ */
.ed-active {
  margin: 0 0 8px;
  padding: 9px 11px;
  background: var(--ed-ivory-2);
  border-left: 3px solid var(--ed-gold-line);
  border-radius: 0 var(--ed-radius-s) var(--ed-radius-s) 0;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ed-espresso);
}
.ed-count-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
}
.ed-count-row .ed-count { margin: 0; }
.ed-count-row .ed-clear { width: auto; margin: 0; padding: 8px 15px; }

.ed-more-wrap { margin: 14px 0 0; text-align: center; }
.ed-more {
  min-height: var(--ed-tap);
  width: 100%;
  max-width: 420px;
  padding: 11px 18px;
  border: 1.5px solid var(--ed-wine);
  border-radius: 99px;
  background: var(--ed-card);
  color: var(--ed-wine);            /* 11.38:1 */
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
}
.ed-more:hover { background: var(--ed-wine); color: #FFFFFF; }
.ed-more:focus-visible { outline: 3px solid var(--ed-espresso); outline-offset: 2px; }

.ed-search-row { display: flex; align-items: flex-end; gap: 8px; }
.ed-field--grow { flex: 1 1 auto; min-width: 0; }
.ed-clear-q { flex: 0 0 auto; margin-bottom: 10px; white-space: nowrap; }

@media (min-width: 560px) {
  .ed-catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .ed-catgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 12px 13px; }
  .ed-cat { font-size: .8rem; padding: 9px 12px; }
}

/* ═══ 6 · the canonical catalogue ════════════════════════════════════ */
.ed-group { margin: 0 0 20px; }
.ed-group > h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ed-espresso);
  margin: 0 0 3px;
  padding: 0 0 5px;
  border-bottom: 2px solid var(--ed-gold-line);
}
.ed-group > h3:focus-visible { outline: 3px solid var(--ed-wine); outline-offset: 3px; }
.ed-rows { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 7px; }

.ed-card {
  background: var(--ed-card);
  border: 1.5px solid var(--ed-line-soft);
  border-radius: var(--ed-radius-s);
  overflow: hidden;
}
.ed-card[open] { border-color: var(--ed-line-ui); }

/* native <summary> — focusable and operable by keyboard with no JS,
   and it publishes aria-expanded for free */
.ed-card > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--ed-tap);
  padding: 11px 13px;
  cursor: pointer;
  list-style: none;
}
.ed-card > summary::-webkit-details-marker { display: none; }
.ed-card > summary::marker { content: ""; }
.ed-card > summary:hover { background: var(--ed-ivory-2); }
.ed-sum-main { flex: 1; min-width: 0; }
.ed-name { font-size: .89rem; font-weight: 800; line-height: 1.25; color: var(--ed-espresso); }
.ed-meta { display: flex; flex-wrap: wrap; gap: 4px 9px; margin-top: 3px; font-size: .71rem; color: var(--ed-espresso-3); }
.ed-walk { font-weight: 700; }
.ed-price { font-weight: 700; color: var(--ed-tomato-dk); }   /* 8.70:1 */
.ed-chip {
  font-size: .64rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--ed-ivory-2);
  border: 1px solid var(--ed-line-soft);
  color: var(--ed-espresso-2);      /* 8.10:1 on ivory-2 */
}
.ed-chev { flex-shrink: 0; font-size: .8rem; color: var(--ed-wine); transition: transform .2s; }
.ed-card[open] .ed-chev { transform: rotate(90deg); }

.ed-body { padding: 0 13px 13px; border-top: 1px solid var(--ed-line-soft); }
.ed-desc { font-size: .8rem; color: var(--ed-espresso-2); margin: 10px 0; max-width: 62ch; }
.ed-dl { margin: 0 0 10px; font-size: .78rem; }
.ed-dl div { display: flex; gap: 7px; padding: 2px 0; }
.ed-dl dt { font-weight: 700; color: var(--ed-espresso-3); flex-shrink: 0; min-width: 6.5em; }
.ed-dl dd { margin: 0; color: var(--ed-espresso-2); }

.ed-acts { display: flex; flex-wrap: wrap; gap: 7px; }
.ed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--ed-tap);
  min-width: var(--ed-tap);
  padding: 10px 15px;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid transparent;
}
.ed-btn--primary { background: var(--ed-wine); color: #FFFFFF; }        /* 11.38:1 */
.ed-btn--primary:hover { background: var(--ed-wine-lt); }
.ed-btn--ghost { background: var(--ed-card); color: var(--ed-wine); border-color: var(--ed-line-ui); }
.ed-btn--ghost:hover { border-color: var(--ed-wine); background: var(--ed-ivory-2); }

/* ═══ 7 · Roman cuisine ══════════════════════════════════════════════
   Rendered statically by tools/dg045_build_en.py, so this stylesheet owns it
   outright: the shared script that used to inject both the markup and its own
   spotlight rules is not loaded on the English page. Nothing here is a scoped
   override any more — it is the block's only styling. */
.ed-cuisine {
  background: var(--ed-card);
  border: 1.5px solid var(--ed-line-soft);
  border-radius: var(--ed-radius);
  padding: 14px 12px 4px;
}
.rc-card-title {
  font-family: var(--ed-fd);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--ed-espresso);
}
.rc-pillars-label,
.rc-dish-label,
.rc-dish-where-label {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ed-espresso-2);
  margin: 0;
}
.rc-pillars-label { margin: 0 0 6px; }
.rc-pillars {
  list-style: none; margin: 0 0 4px; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px;
}
.rc-pillar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  background: var(--ed-ivory-2);
  border: 1.5px solid var(--ed-line-soft);
  border-radius: var(--ed-radius-s);
  font-size: .84rem;
  font-weight: 700;
  color: var(--ed-espresso);
}
.rc-pillar-ic { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.rc-pillar > span:not(.rc-pillar-ic) { min-width: 0; }

.rc-group { margin: 18px 0 0; }
.rc-group-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--ed-gold-line);
}
.rc-group-ic { font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
.rc-group-title {
  font-family: var(--ed-fd);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
  color: var(--ed-espresso);
}
.rc-dishes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.rc-dish {
  background: var(--ed-ivory-2);
  border: 1.5px solid var(--ed-line-soft);
  border-radius: var(--ed-radius-s);
  padding: 12px;
}
.rc-dish-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.rc-dish-ic { font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
/* A flex item's automatic minimum size is its min-content width, and
   overflow-wrap does not reduce that — so an unbreakable dish name stayed wide
   and its box was painted past a 320px screen at 200% text scaling. min-width:0
   lets the item shrink; the break-word rule then does the rest. */
.rc-dish-name {
  font-family: var(--ed-fd);
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
  color: var(--ed-espresso);
}
.rc-dish-row { display: flex; flex-direction: column; gap: 2px; margin: 0 0 7px; }
.rc-dish-val { font-size: .84rem; line-height: 1.45; color: var(--ed-espresso); }
.rc-dish-rule {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ed-espresso);
  background: var(--ed-card);
  border-left: 3px solid var(--ed-gold-line);
  padding: 8px 10px;
  border-radius: 0 var(--ed-radius-s) var(--ed-radius-s) 0;
  margin: 0 0 8px;
}
.rc-dish-where { margin-top: 8px; }
.rc-dish-where-list {
  list-style: none; padding: 0; margin: 5px 0 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
}
.rc-dish-where-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--ed-espresso);
}
/* Each entry links to that venue's own row in the catalogue above, so it is a
   real destination with the 44px tap area this page holds itself to. */
.rc-dish-where-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ed-tap);
  padding: 2px 0;
  font-weight: 700;
  color: var(--ed-wine);            /* 11.38:1 on the card ground */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rc-dish-where-list a:hover { color: var(--ed-espresso); }
.rc-dish-zone, .rc-dish-walk { color: var(--ed-espresso-2); font-size: .76rem; }

.rc-pairings {
  margin: 18px 0 12px;
  background: var(--ed-ivory-2);
  border: 1.5px solid var(--ed-line-soft);
  border-radius: var(--ed-radius-s);
  padding: 13px;
}
.rc-pairings-title {
  font-family: var(--ed-fd);
  font-size: 1.04rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ed-espresso);
}
/* A fixed layout lets a long wine name wrap instead of being cut: nothing here
   clips, but a phone at 200% text scaling has no width to spare. */
.rc-pairings-table { width: 100%; border-collapse: collapse; font-size: .86rem; table-layout: fixed; }
.rc-pairings-table th,
.rc-pairings-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--ed-line-soft);
  text-align: left;
  overflow-wrap: break-word;
  color: var(--ed-espresso);
}
.rc-pairings-table th { font-weight: 700; }
.rc-pairings-table td { font-weight: 400; }
.rc-pairings-table tr:last-child th,
.rc-pairings-table tr:last-child td { border-bottom: none; }

@media (min-width: 700px) {
  .rc-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rc-dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-cuisine { padding: 18px 18px 8px; }
}
@media (min-width: 1100px) {
  .rc-dishes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ═══ static / enhanced swap ═════════════════════════════════════════ */
.ed-nojs-note {
  font-size: .76rem;
  color: var(--ed-espresso-2);
  background: var(--ed-ivory-2);
  border: 1.5px solid var(--ed-line-soft);
  border-radius: var(--ed-radius-s);
  padding: 9px 11px;
  margin: 0 0 12px;
}
[hidden] { display: none !important; }

/* ═══ responsive ═════════════════════════════════════════════════════ */
/* The phone: two columns of equal squares. A 320px column is 143px, and the
   whole card — medallion, label and, on two of the six, a second line — has to
   fit inside that. These are the numbers that make it fit at 100% text with
   nothing squeezed: the longest label ("Coffee and something sweet") takes
   three 17px lines, and "Near the apartment" takes two plus its two-line hint. */
@media (max-width: 559px) {
  .ed-sc { gap: 4px; padding: 6px; line-height: 1.1; }
  .ed-sc-hint { font-size: .62rem; line-height: 1.25; }
}
@media (max-width: 359px) {
  .ed-sc-list { gap: 10px; }
  .ed-sc { gap: 3px; padding: 4px; line-height: 1.05; font-size: 1.0625rem; }
  /* 64px, against the 58px the horizontal card carried. The last four pixels
     are what let the second line of the hint stay inside the square. */
  .ed-sc-art { width: 64px; height: 64px; border-radius: 14px; }
  .ed-sc-art-mono { font-size: 1rem; }
  .ed-sc-hint { font-size: .62rem; line-height: 1.2; }
  .ed-sc--primary { font-size: 1.0625rem; border-width: 2px; }
}
@media (min-width: 360px) and (max-width: 559px) {
  /* 360 and 390: the same two columns with more room, so the medallion goes to
     84px and the label to 18px. */
  .ed-sc { font-size: 1.125rem; }
  .ed-sc--primary { font-size: 1.1875rem; }
}
@media (min-width: 560px) {
  /* From a tablet the six squares are three across and two down. The same card
     — illustration above a centred label — only larger. */
  .ed-sc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .ed-sc { font-size: 1.1875rem; gap: 11px; padding: 14px 12px; }
  .ed-sc--primary { font-size: 1.25rem; }
  .ed-sc-art { width: 102px; height: 102px; border-radius: 22px; }
  .ed-sc-art-mono { font-size: 1.15rem; }
  /* Content-driven, not row-driven. A grid stretches every item in a row to
     the tallest one, so an ordinary card sitting beside a partner card grew a
     dead white area under its actions — measured at 108-129px. A multi-column
     flow gives each card its own height and packs the columns instead: nothing
     stretches, nothing is a fixed height, and no content is positioned to fake
     it. break-inside keeps a card whole, and the feature spans every column so
     Aroma stays the full-width destination below the six local essentials.
     Reading and tab order are the document's: down column one, then two. */
  .ed-ess-list { display: block; columns: 2; column-gap: 8px; }
  .ed-ess-list > li { break-inside: avoid; margin: 0 0 8px; }
  /* the card can breathe under its last action now that it ends where its
     content ends */
  .ed-ess { padding-bottom: 18px; }
  .ed-ess--feature { column-span: all; margin-bottom: 0; }
  .ed-filter-row { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 900px) {
  /* Still three across and two down, but the menu stops being the full 1240px
     content column: at 940px with an 18px gap each card is 301px square, which
     is a menu of six choices rather than a band of six panels. Centred in the
     column, it shares an axis with everything above and below it. */
  .ed-sc-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 940px;
    margin-inline: auto;
  }
  .ed-sc { font-size: 1.25rem; gap: 14px; padding: 18px 16px; }
  .ed-sc--primary { font-size: 1.3125rem; }
  .ed-sc-art { width: 118px; height: 118px; border-radius: 26px; }
  .ed-sc-art-mono { font-size: 1.3rem; }
  .ed-sc-hint { font-size: .85rem; }
  .ed-ess-list { columns: 3; }
  .ed-rows { grid-template-columns: 1fr 1fr; }
  .ed-ess--feature {
    column-span: all;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 18px;
    align-items: start;
  }
  .ed-feature-media { margin: 0; }
}
@media (min-width: 1280px) {
  .ed-rows { grid-template-columns: repeat(3, 1fr); }
}

/* ═══ reduced motion — nothing here animates when it is asked not to ══ */
@media (prefers-reduced-motion: reduce) {
  html:is([data-ed-en],[data-ed-page]) { scroll-behavior: auto !important; }
  .ed, .ed *, .ed *::before, .ed *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ print ══════════════════════════════════════════════════════════ */
/* ═══ DG-051 · the map view ═══════════════════════════════════════════
   The list keeps every rule it had. Everything here is additive and lives
   between the count row and the groups, so nothing above the results section
   — and nothing in the DG-049 square menu — is touched. */

.ed-viewwrap { margin: 0 0 14px; }

/* Two buttons, one pressed. The state is carried by aria-pressed and by a
   fill plus a heavier border, never by colour alone. */
.ed-viewbar {
  display: inline-flex;
  gap: 0;
  border: 1.5px solid var(--ed-espresso);
  border-radius: 999px;
  overflow: hidden;
  background: var(--ed-ivory);
}
.ed-viewbtn {
  appearance: none;
  min-height: 44px;                 /* WCAG 2.5.8 with room to spare */
  padding: 8px 20px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ed-espresso);
  cursor: pointer;
}
.ed-viewbtn + .ed-viewbtn { border-left: 1.5px solid var(--ed-espresso); }
.ed-viewbtn.is-on { background: var(--ed-espresso); color: #FFFFFF; }
.ed-viewbtn:focus-visible { outline: 3px solid var(--ed-wine); outline-offset: 2px; }

/* ~60vh, bounded at both ends: tall enough to be a map on a 568px phone,
   never so tall that the list it belongs to is pushed off the screen. */
.ed-map { margin: 12px 0 4px; }
.ed-map-canvas {
  width: 100%;
  height: clamp(260px, 60vh, 560px);
  border: 1.5px solid var(--ed-gold-line);
  border-radius: var(--ed-radius);
  overflow: hidden;
  background: var(--ed-ivory-2);
}
.ed-map-status {
  margin: 10px 0 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ed-espresso-2);
}

/* A failure is a plain panel, and it is the status line itself — the canvas is
   removed, so the sentence appears once rather than twice. It carries no Google
   mark, no tiles and no borrowed chrome: it says the map is not there. */
.ed-map-status.is-failed {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin-top: 0;
  padding: 20px 16px;
  text-align: center;
  border: 1.5px dashed var(--ed-gold-line);
  border-radius: var(--ed-radius);
  background: var(--ed-ivory-2);
}

/* The selected place, as ordinary HTML under the canvas. */
.ed-map-panel {
  margin: 12px 0 0;
  padding: 14px 16px;
  background: var(--ed-ivory-2);
  border: 1.5px solid var(--ed-gold-line);
  border-radius: var(--ed-radius);
}
.ed-map-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ed-map-panel-name { margin: 0 0 6px; font-size: 1.15rem; line-height: 1.25; }
.ed-map-panel-name:focus-visible { outline: 3px solid var(--ed-wine); outline-offset: 2px; }
.ed-map-panel-close {
  appearance: none;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  margin: -6px -6px 0 0;
  border: 0;
  background: transparent;
  font: inherit; font-size: 1.5rem; line-height: 1;
  color: var(--ed-espresso);
  cursor: pointer;
}
.ed-map-panel-close:focus-visible { outline: 3px solid var(--ed-wine); outline-offset: 2px; }

/* The pin is decorative; the place it stands for is in the list and in the
   panel, both of which a keyboard and a screen reader can reach. */
.ed-pin {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ed-wine);
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

@media (prefers-reduced-motion: reduce) {
  .ed-viewbtn, .ed-map-panel-close { transition: none; }
}

@media print {
  .ed-find, .ed-sc-list, .ed-cats, .ed-clear, .ed-more-wrap { display: none !important; }
  .ed-card > summary { min-height: 0; }
  .ed-body { display: block !important; }
  .ed-card { break-inside: avoid; border-color: #999; }
}