/* =====================================================================
   vguide.css — density components for visitor pages
   ---------------------------------------------------------------------
   Pairs with icons.css. Everything here exists to break a wall of small
   text blocks into something a person can scan in twenty seconds.

     .vg-band     a thin full-bleed photograph between sections
     .vg-cards    a responsive grid of small fact cards
     .vg-card     one card: icon, title, two lines, mono facts
     .vg-two      what is covered against what is not
     .vg-legend   one line that explains a whole list, said once
     .vg-rank     a compact ranked row, replaces heading + paragraph
     .vg-chips    linked venue chips with a mono score
     .vg-fig      a graphic in a frame, scrollable at phone width
     .vg-bar      a proportion drawn, not described
     .vg-dish     a dish card with an inline glyph

   Colours come from style.css. Nothing new is invented.
   ===================================================================== */

/* ------------------------------------------------- 1. PHOTOGRAPH BAND */
/* A wide photograph, laid thin, edge to edge. The panorama shots in the
   library are 4:1 to 7:1, so they sit here without being cropped to death. */
.vg-band {
  margin: 0;
  position: relative;
  line-height: 0;
  background: var(--bg-sunk);
}
.vg-band img {
  width: 100%;
  height: clamp(120px, 22vw, 210px);
  object-fit: cover;
  object-position: center 55%;
  display: block;
}
.vg-band figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  padding: 40px 18px 9px;
  line-height: 1.35;
  font-size: .74rem;
  color: #fff;
  /* The scrim has to hold white text over ANY of the 34 photographs, and
     several of them are pale roofs and bright water at exactly this height.
     A single .72 stop faded out too early and the credit line sat on the
     photograph itself. Three stops, starting darker and reaching further up,
     keep the caption above 4.5:1 on the brightest frame we have. */
  background: linear-gradient(to top,
    rgba(7,59,82,.92) 0%, rgba(7,59,82,.78) 46%, rgba(7,59,82,0) 100%);
}
.vg-band figcaption b { font-weight: 600; }
.vg-band figcaption a { color: #fff; opacity: .92; }
.vg-band .vg-band-credit { font-size: .66rem; opacity: .88; }

/* ------------------------------------------------------- 2. FACT CARDS */
.vg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 10px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
}
.vg-cards.tight { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.vg-cards > .sg-cap { grid-column: 1 / -1; margin-bottom: 0; }

.vg-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 14px 16px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.vg-card > .ic,
.vg-card > .ic-badge { color: var(--ic-key, #1f5d4c); }
.vg-card > .ic { width: 1.55em; height: 1.55em; stroke-width: 1.6; }
.vg-card h4,
.vg-card .vg-card-t {
  margin: 0;
  font-family: var(--font-sans, "Inter Tight", system-ui, sans-serif);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--text);
}
.vg-card p { margin: 0; font-size: .89rem; line-height: 1.5; color: var(--text-soft); }
.vg-card p strong { color: var(--text); font-weight: 600; }
.vg-card .sg-facts { margin-top: auto; }

/* The number a card is really about. Mono, always. */
.vg-num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-feature-settings: "tnum" 1;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--text);
}
.vg-num small { font-size: .62em; font-weight: 500; color: var(--text-soft); margin-left: 2px; }

/* A card that says do not. The word "Never" carries it; the colour agrees. */
.vg-card.vg-dont {
  border-color: color-mix(in srgb, var(--bad-fg) 45%, var(--line));
  border-left-width: 4px;
  background: var(--bad-bg);
}
.vg-card.vg-dont > .ic { color: var(--bad-fg); }
.vg-card.vg-dont .vg-card-t { color: var(--bad-fg); }
.vg-card.vg-dont p { color: var(--text); }

.vg-card.vg-do {
  border-color: color-mix(in srgb, var(--ok-fg) 38%, var(--line));
  border-left-width: 4px;
  background: var(--ok-bg);
}
.vg-card.vg-do > .ic { color: var(--ok-fg); }
.vg-card.vg-do .vg-card-t { color: var(--ok-fg); }
.vg-card.vg-do p { color: var(--text); }

/* --------------------------------------- 3. COVERED / NOT COVERED PAIR */
.vg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
@media (max-width: 620px) { .vg-two { grid-template-columns: 1fr; } }
.vg-two > div {
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.vg-two h4 {
  margin: 0 0 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans, "Inter Tight", system-ui, sans-serif);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.vg-two ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.vg-two li { font-size: .89rem; line-height: 1.45; padding-left: 16px; position: relative; }
.vg-two li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 2px; border-radius: 2px; background: currentColor; opacity: .45; }
.vg-two .vg-yes { border-color: color-mix(in srgb, var(--ok-fg) 32%, var(--line)); }
.vg-two .vg-yes h4 { color: var(--ok-fg); }
.vg-two .vg-no  { border-color: color-mix(in srgb, var(--bad-fg) 32%, var(--line)); }
.vg-two .vg-no h4 { color: var(--bad-fg); }

/* ------------------------------------------------ 4. SAY IT ONCE, LEGEND */
/* One line above a list explaining every mark inside it, so no card has to
   repeat "Tripadvisor" or "average for these dates" ever again. */
.vg-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-sunk);
  font-size: .78rem;
  line-height: 1.4;
  color: var(--text-soft);
}
.vg-legend b { color: var(--text); font-weight: 600; }
.vg-legend .ic { color: var(--ic-key, #1f5d4c); }
.vg-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.vg-legend .vg-key {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 500;
  color: var(--text);
}

/* ------------------------------------------------- 5. COMPACT RANKED ROW */
/* Replaces a heading plus a paragraph plus three rating captions. */
.vg-rank { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: vgrank; }
.vg-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 13px;
  align-items: start;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.vg-score {
  grid-row: 1 / span 3;
  align-self: start;
  min-width: 52px;
  padding: 7px 6px 6px;
  border-radius: 12px;
  background: var(--bg-sunk);
  text-align: center;
  line-height: 1;
}
.vg-score b {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-feature-settings: "tnum" 1;
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -.04em;
  color: var(--text);
}
/* The rank. It was .58rem, which lands at 9px, in soft ink, on the sand
   background: 4.2:1 and too small to read at arm's length. It carries a real
   fact, so it gets the full text colour and a readable size. */
.vg-score span {
  display: block;
  margin-top: 4px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text);
  opacity: .78;
}
.vg-row h3, .vg-row .vg-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.01em;
}
.vg-row h3 a, .vg-row .vg-name a { color: var(--text); text-decoration: none; }
.vg-row h3 a:hover, .vg-row .vg-name a:hover { color: var(--aegean); text-decoration: underline; }
.vg-row p { margin: 0; font-size: .89rem; line-height: 1.5; color: var(--text-soft); }
.vg-row .vg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  font-size: .76rem;
  color: var(--text-soft);
}
.vg-row .vg-meta > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.vg-row .vg-meta .ic { color: var(--ic-key, #1f5d4c); }
.vg-row .vg-meta em {
  font-style: normal;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-feature-settings: "tnum" 1;
  color: var(--text);
}
@media (max-width: 420px) {
  .vg-row { grid-template-columns: 1fr; gap: 7px; }
  .vg-score { grid-row: auto; justify-self: start; display: flex; align-items: baseline; gap: 7px; padding: 5px 10px; }
  .vg-score span { margin: 0; }
}

/* ---------------------------------------------------------- 6. CHIPS */
/* Six venues per dish used to be six headings and six paragraphs. */
.vg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vg-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-alt);
  font-size: .82rem;
  line-height: 1.3;
  color: var(--text);
  text-decoration: none;
}
a.vg-chip:hover { border-color: var(--aegean); color: var(--aegean); }
.vg-chip em {
  font-style: normal;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-feature-settings: "tnum" 1;
  font-size: .82em;
  font-weight: 600;
  color: var(--text-soft);
}

/* ------------------------------------------------- 7. GRAPHIC IN A FRAME */
.vg-fig {
  margin: 18px 0;
  padding: 16px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
  overflow: hidden;
}
.vg-fig > figcaption {
  padding: 0 18px;
  margin: 0 0 12px;
  font-family: var(--font-sans, "Inter Tight", system-ui, sans-serif);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.vg-fig > figcaption + .vg-scroll { margin-top: 0; }
.vg-fig .vg-note { padding: 10px 18px 0; margin: 0; font-size: .82rem; line-height: 1.5; color: var(--text-soft); }
.vg-fig svg { display: block; max-width: 100%; height: auto; }
.vg-fig > svg { padding: 0 18px; box-sizing: border-box; }

/* Anything too wide for a phone scrolls inside its own frame, never the page. */
.vg-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: 0 18px; }
.vg-scroll svg { min-width: 620px; }
.vg-scroll.wide svg { min-width: 900px; }

/* Graphic colours, so every drawing on the site agrees with every other. */
.vg-g-line   { fill: none; stroke: var(--line); stroke-width: 1.5; }
.vg-g-rule   { fill: none; stroke: var(--text-soft); stroke-width: 1.2; opacity: .45; }
.vg-g-key    { fill: var(--ic-key, #1f5d4c); }
.vg-g-keys   { fill: none; stroke: var(--ic-key, #1f5d4c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vg-g-sea    { fill: var(--sea); }
.vg-g-soft   { fill: var(--bg-sunk); }
.vg-g-accent { fill: var(--terracotta); }
.vg-g-accents{ fill: none; stroke: var(--terracotta); stroke-width: 2; stroke-linecap: round; }
.vg-g-t {
  font-family: var(--font-sans, "Inter Tight", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  fill: var(--text);
}
.vg-g-t.soft { fill: var(--text-soft); }
.vg-g-t.small { font-size: 9.5px; }
.vg-g-n {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-feature-settings: "tnum" 1;
  font-size: 11px;
  font-weight: 600;
  fill: var(--text);
}
.vg-g-n.big { font-size: 15px; }
.vg-g-n.soft { fill: var(--text-soft); font-weight: 500; }
.vg-g-inv { fill: #fff; }

/* --------------------------------------------------- 8. PROPORTION BAR */
.vg-bar { margin: 16px 0; }
.vg-bar-t { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; color: var(--text-soft); margin-bottom: 7px; }
.vg-bar-t b { color: var(--text); font-family: var(--font-mono, ui-monospace, monospace); font-weight: 600; }
.vg-bar-track { height: 26px; border-radius: 8px; background: var(--bg-sunk); border: 1px solid var(--line); overflow: hidden; display: flex; }
.vg-bar-fill { background: var(--ic-key, #1f5d4c); display: flex; align-items: center; padding-left: 9px; }
/* The fill is --ic-key, and --ic-key flips from dark pine in the light theme
   to pale shallow in the dark one. Fixed white text was 1.65:1 on the dark
   theme, so the label takes its colour from the theme too. */
.vg-bar-fill span { font-family: var(--font-mono, ui-monospace, monospace); font-size: .74rem; font-weight: 600; color: var(--vg-on-key, #fff); white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vg-bar-fill span { --vg-on-key: #0a3a47; }
}
:root[data-theme="dark"] .vg-bar-fill span { --vg-on-key: #0a3a47; }
.vg-bar-rest { flex: 1; display: flex; align-items: center; padding-left: 9px; }
.vg-bar-rest span { font-family: var(--font-mono, ui-monospace, monospace); font-size: .74rem; font-weight: 600; color: var(--text-soft); white-space: nowrap; }

/* ------------------------------------------------------- 9. DISH CARDS */
.vg-dishes { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.vg-dish {
  margin: 0;
  padding: 0 0 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
  overflow: hidden;
}
.vg-dish-top { display: flex; align-items: center; gap: 13px; padding: 14px 16px; background: var(--bg-sunk); }
.vg-dish-top svg { flex: none; width: 46px; height: 46px; }
.vg-dish-top h3 { margin: 0; font-size: 1.05rem; line-height: 1.2; }
.vg-dish-top .vg-dish-gk { display: block; margin-top: 3px; font-family: var(--font-sans, "Inter Tight", system-ui, sans-serif); font-size: .76rem; font-weight: 500; color: var(--text-soft); }
.vg-dish-bd { padding: 13px 16px 0; }
.vg-dish-bd > p { margin: 0 0 11px; font-size: .9rem; line-height: 1.55; }
.vg-dish .sg-facts { margin: 0 0 11px; }
.vg-dish-know {
  margin: 0 0 12px;
  padding: 9px 0 9px 13px;
  border-left: 3px solid var(--gold);
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.vg-dish-know b { color: var(--text); }
.vg-dish-eat { padding: 0 16px; }
.vg-dish-eat > .vg-eat-cap {
  margin: 0 0 7px;
  font-family: var(--font-sans, "Inter Tight", system-ui, sans-serif);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
/* Three of the sixteen dishes have no venue in the dataset. The page says so
   in its method note, so the cards have to say so too. An empty card that
   simply stops reads as an oversight, and a silent absence is not a stated
   one. */
.vg-eat-none > p:last-child {
  margin: 0;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--text-soft);
}

/* ------------------------------------------------------ 10. QUICK JUMP */
.vg-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
.vg-jump a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-alt);
  font-size: .82rem;
  color: var(--text);
  text-decoration: none;
}
.vg-jump a:hover { border-color: var(--aegean); color: var(--aegean); }

/* ------------------------------------------------- 11. COLLAPSIBLE GROUP */
/* 95 standing headings become 27 things you can open. */
.vg-fold {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
  margin: 0 0 8px;
  overflow: hidden;
}
.vg-fold > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: .97rem;
  line-height: 1.3;
}
.vg-fold > summary::-webkit-details-marker { display: none; }
.vg-fold > summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-soft);
  border-bottom: 2px solid var(--text-soft);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s cubic-bezier(.16,.84,.34,1);
}
.vg-fold[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.vg-fold > summary:hover { background: var(--bg-sunk); }
.vg-stop {
  flex: none;
  min-width: 30px;
  padding: 3px 7px;
  border-radius: 8px;
  background: var(--bg-sunk);
  text-align: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-feature-settings: "tnum" 1;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text);
}
.vg-fold[open] > summary .vg-stop,
.vg-fold > summary:hover .vg-stop { background: var(--bg); }
.vg-fold-bd { padding: 2px 15px 15px; border-top: 1px solid var(--line); }
.vg-fold-bd > *:first-child { margin-top: 12px; }
.vg-count {
  flex: none;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-soft);
}

@media (prefers-reduced-motion: reduce) {
  .vg-fold > summary::after { transition: none; }
}

/* --------------------------------------------- 12. A RATING, SAID ONCE */
/* "Google 4.8 · Tripadvisor 4.7" appeared 767 times across the guides. The
   words move up into one legend and each row keeps a letter and a number. */
.vg-src { display: inline-flex; align-items: baseline; gap: 5px; }
.vg-src i {
  font-style: normal;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1;
  padding: 3px 5px 2px;
  border-radius: 5px;
  background: var(--bg-sunk);
  color: var(--text-soft);
}
.vg-src em {
  font-style: normal;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-feature-settings: "tnum" 1;
  font-weight: 600;
  color: var(--text);
}
.vg-src.none {
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-soft);
}
.vg-legend b.vg-key {
  display: inline-block;
  padding: 2px 6px;
  margin-right: 2px;
  border-radius: 5px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  font-size: .74rem;
  line-height: 1.2;
}

/* -------------------------------------------------- 13. SCATTER DOTS */
.vg-dot { fill: var(--ic-key, #1f5d4c); opacity: .55; }
.vg-dot-out { fill: none; stroke: var(--terracotta); stroke-width: 2; }

/* ---------------------------------------------- 14. SCHEMATIC MAP FILLS */
.vg-g-water { fill: color-mix(in srgb, var(--sea) 22%, transparent); }
.vg-g-land  { fill: var(--bg-sunk); stroke: var(--line); stroke-width: 1; }
.vg-g-road  { fill: var(--bg-alt); stroke: var(--line); stroke-width: 1; }
.vg-g-pine  { fill: color-mix(in srgb, var(--olive) 40%, transparent); }

/* ------------------------------------------------------- 15. BUS ROUTE */
.vg-fare2 { fill: none; stroke: var(--ic-key, #1f5d4c); stroke-width: 3.5; stroke-linecap: round; }
.vg-fare3 { fill: none; stroke: var(--terracotta); stroke-width: 3.5; stroke-linecap: round; }
.vg-node { fill: var(--bg-alt); stroke: var(--text-soft); stroke-width: 1.2; }
.vg-node-beach { fill: var(--aegean); stroke: var(--bg-alt); stroke-width: 1.4; }

/* A folded stop carries its number, its name and its counts on one line. */
.vg-fold-wide > summary { flex-wrap: wrap; gap: 8px 10px; }
.vg-stop-n { flex: 1 1 auto; min-width: 120px; }
.vg-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-sunk);
  font-family: var(--font-sans, "Inter Tight", system-ui, sans-serif);
  font-size: .76rem;
  font-weight: 500;
  color: var(--text-soft);
}
.vg-count .ic { color: var(--ic-key, #1f5d4c); }

/* ------------------------------------------------------ 16. AREA CARDS */
.vg-area {
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
  margin: 0 0 12px;
  box-shadow: var(--shadow);
}
.vg-area h2 { margin: 0 0 8px; font-size: 1.3rem; line-height: 1.2; }
.vg-area > .vg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: .8rem;
  color: var(--text-soft);
  margin-bottom: 10px;
}
.vg-area > .vg-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.vg-area > .vg-meta .ic { color: var(--ic-key, #1f5d4c); }
.vg-area > .vg-meta em {
  font-style: normal;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-feature-settings: "tnum" 1;
  font-weight: 600;
  color: var(--text);
}
.vg-suits {
  margin: 0 0 12px !important;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--text-soft);
}
.vg-area > p { margin: 0 0 12px; font-size: .93rem; line-height: 1.6; }
.vg-factlines { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 9px; }
.vg-fact-line {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: .89rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.vg-fact-line .ic { color: var(--ic-key, #1f5d4c); margin-top: .22em; }
.vg-fact-line strong, .vg-fact-line b { color: var(--text); }
.vg-down {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--warn-bg);
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text);
}
.vg-down .ic { color: var(--warn-fg); margin-top: .22em; }

/* --------------------------------------------------- 17. DISH GLYPHS */
/* Nothing in the photograph library shows food, so every dish is drawn. */
.vg-glyph { width: 46px; height: 46px; flex: none; }
.vg-gs  { fill: none; stroke: var(--ic-key, #1f5d4c); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vg-gf  { fill: var(--ic-key, #1f5d4c); stroke: none; }
.vg-gfs { fill: color-mix(in srgb, var(--ic-key, #1f5d4c) 18%, transparent); stroke: var(--ic-key, #1f5d4c); stroke-width: 1.7; stroke-linejoin: round; }

/* Dish card trimmings */
.vg-dish-top .vg-glyph { width: 46px; height: 46px; }
.vg-eat-cap { display: flex; align-items: center; gap: 7px; }
.vg-eat-cap .ic { color: var(--ic-key, #1f5d4c); }
.vg-eat-cap b {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
}
.vg-more { margin: 9px 0 0; font-size: .8rem; color: var(--text-soft); }
.vg-gk {
  display: block;
  margin-top: 2px;
  font-family: var(--font-sans, "Inter Tight", system-ui, sans-serif);
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-soft);
}

/* ---------------------------- 18. BEACH CARD FACTS, SAID ONCE IN A LEGEND */
/* The five labels used to repeat on all 29 cards, 145 lines of the same words. */
.bcard-facts.vg-icf li {
  display: grid;
  grid-template-columns: 1.35em 1fr;
  gap: 9px;
  align-items: baseline;
  justify-content: start;
  padding: 6px 0;
}
.bcard-facts.vg-icf .ic,
.bcard-facts.vg-icf .vg-glyph { color: var(--ic-key, #1f5d4c); justify-self: center; }
.bcard-facts.vg-icf b { text-align: left; font-size: .78rem; }
.vg-glyph-xs { width: 1.35em; height: 1.35em; }
.vg-legend .vg-glyph-xs { width: 1.15em; height: 1.15em; vertical-align: -.2em; }

/* A fact row whose value is a sentence rather than a number. */
.sg-fact .vg-fact-wide {
  font-family: var(--font-sans, "Inter Tight", system-ui, sans-serif);
  font-size: .89rem;
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
  color: var(--text);
}
.sg-fact .vg-fact-wide strong { font-weight: 600; }
.vg-factlines.boxed {
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
  gap: 10px;
}
.vg-factlines.boxed .vg-fact-line + .vg-fact-line { border-top: 1px solid var(--line); padding-top: 10px; }
.vg-fact-line > span { min-width: 0; overflow-wrap: anywhere; }
.vg-cross { fill: none; stroke: var(--terracotta); stroke-width: 2.2; stroke-linecap: round; }
.ic-accent-t { fill: var(--terracotta); font-weight: 700; }

/* -------------------------- 19. DAY TRIP FACTS, LABELS SAID ONCE IN A LEGEND */
.tfacts.vg-icf li { grid-template-columns: 1.35em 1fr; gap: 11px; }
.tfacts.vg-icf .ic { color: var(--ic-key, #1f5d4c); justify-self: center; }