/* Ghana Food Blog directory — layered on top of Carbon.
   =========================================================================
   Three rules this file keeps to:

   1. Colour, spacing and type come from Carbon tokens, so switching the theme
      class on <html> (cds--white / g10 / g90 / g100) restyles everything.
   2. The brand is Carbon's own `orange` family. The logo orange sampled from
      ghanafoodblog-trans.png is #FF7D33; Carbon's orange-40 is #ff832b — ten
      RGB units apart. So branding this build needed no invented palette, only
      a decision about which step of Carbon's ramp does which job.
   3. Every foreground/background pair here is checked by
      tools/check_contrast.php against WCAG 2.2 AA. Run it after changing a
      colour.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts
   IBM Plex, self-hosted.

   The compiled carbon.css in this project contains exactly one @font-face —
   IBM Plex Mono Light, Cyrillic subset — so Plex Sans never loaded and every
   page fell back to Segoe UI. Carbon in a system font reads as a generic
   admin panel; the typeface is most of what makes it look like Carbon.

   Served from this origin rather than a CDN: no third-party dependency at
   runtime, no extra DNS and TLS handshake, and the files are immutable so they
   cache forever. 409 KB for seven weights, loaded with font-display:swap so
   text paints immediately in the fallback.
   ------------------------------------------------------------------- */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/IBMPlexSans-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/IBMPlexSans-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/IBMPlexSans-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
}

/* ------------------------------------------------------------- brand tokens
   Two orange steps with strictly different jobs, because they are not
   interchangeable:

     --gfb-brand        #ff832b  2.46:1 on white.  DECORATIVE ONLY.
                        The logo, wide accent bars, tinted surfaces. It is
                        below the 3:1 floor for a meaningful graphic, so it
                        must never be the only thing marking an active tab, a
                        selected card or any other state.
     --gfb-brand-strong #ba4e00  5.03:1 on white.  EVERYTHING THAT MEANS
                        SOMETHING: links, primary buttons, active indicators.

   Getting those two the wrong way round is the easy way to put the brand
   everywhere and make the site unreadable.
   ------------------------------------------------------------------------- */
/* ------------------------------------------------------------ spacing scale
   Carbon's spacing tokens, declared here because the compiled carbon.css in
   this project DOES NOT DEFINE THEM.

   It declares 663 custom properties — every colour token, four times over for
   the four themes — and not one `--cds-spacing-*`. So every
   `padding: var(--cds-spacing-05)` and `gap: var(--cds-spacing-03)` in this
   file resolved to nothing and the declaration was dropped: 181 uses, all
   silently discarded. The result was a site with no padding and no gaps
   anywhere — cards touching, labels jammed against their counts, text against
   the viewport edge. It had been that way since the first build.

   Nothing errors on an undefined custom property. The CSS stays valid, the
   server still returns 200 with the right bytes, and only looking at the page
   shows it. tools/check_css_tokens.php now compares what is consumed against
   what is declared so this cannot come back.

   Values are Carbon v11's scale, cross-checked against the literals the
   compiled stylesheet emitted (.cds--modal-header uses .5rem / 1rem / 3rem for
   spacing-03 / 05 / 09).
   ------------------------------------------------------------------------- */
:root {
  --cds-spacing-01: 0.125rem;  /*   2px */
  --cds-spacing-02: 0.25rem;   /*   4px */
  --cds-spacing-03: 0.5rem;    /*   8px */
  --cds-spacing-04: 0.75rem;   /*  12px */
  --cds-spacing-05: 1rem;      /*  16px */
  --cds-spacing-06: 1.5rem;    /*  24px */
  --cds-spacing-07: 2rem;      /*  32px */
  --cds-spacing-08: 2.5rem;    /*  40px */
  --cds-spacing-09: 3rem;      /*  48px */
  --cds-spacing-10: 4rem;      /*  64px */
  --cds-spacing-11: 5rem;      /*  80px */
  --cds-spacing-12: 6rem;      /*  96px */
  --cds-spacing-13: 10rem;     /* 160px */
}

:root {
  --gfb-brand:          #ff832b;   /* Carbon orange-40 — the logo colour */
  --gfb-brand-strong:   #ba4e00;   /* orange-60 — interactive            */
  --gfb-brand-deep:     #8a3800;   /* orange-70 — hover                  */
  --gfb-brand-tint:     #fff2e8;   /* orange-10 — tinted surfaces        */
  --gfb-brand-tint-2:   #ffd9be;   /* orange-20 — borders on tint        */

  /* Carbon's own interactive tokens, repointed at the brand. Doing it here
     rather than restyling each component means Carbon's buttons, links and
     tags pick the brand up on their own. Focus deliberately stays Carbon
     blue: it is the system's recognisable focus indicator and it has to read
     against orange as well as against white. */
  --cds-link-primary:          var(--gfb-brand-strong);
  --cds-link-primary-hover:    var(--gfb-brand-deep);
  --cds-button-primary:        var(--gfb-brand-strong);
  --cds-button-primary-hover:  var(--gfb-brand-deep);
  --cds-button-primary-active: var(--gfb-brand-deep);
  --cds-interactive:           var(--gfb-brand-strong);
  --cds-background-brand:      var(--gfb-brand-strong);
  --cds-border-interactive:    var(--gfb-brand-strong);
}

/* The dark themes need the lighter step: orange-60 on a near-black surface is
   too dark to read, while orange-40 is 7.4:1 against gray-100. */
.cds--g90, .cds--g100 {
  --cds-link-primary:       var(--gfb-brand);
  --cds-link-primary-hover: #ffb784;
  --cds-interactive:        var(--gfb-brand);
  --gfb-brand-tint:         #3e1a00;
  --gfb-brand-tint-2:       #5e2900;
}

/* ----------------------------------------------------------------- base */
body {
  background: var(--cds-background);
  color: var(--cds-text-primary);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
}
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }

/* Counts, prices and distances line up when they share a column. */
.gfb-num, .gfb-card__price, .gfb-menu__price, .gfb-result__dist,
.gfb-result__price, .gfb-facet__count, .gfb-chip__count,
.gfb-hero__stats, .gfb-citycard__count, .gfb-stat {
  font-variant-numeric: tabular-nums;
}

.gfb-wrap { max-width: 1056px; margin-inline: auto; padding-inline: var(--cds-spacing-05); }
.gfb-wrap--wide { max-width: 1536px; }
.gfb-narrow { max-width: 40rem; margin-inline: auto; padding-block: var(--cds-spacing-07); }
.gfb-muted { color: var(--cds-text-secondary); font-size: .875rem; line-height: 1.5; }

/* ------------------------------------------------------------ skip link */
.gfb-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  background: var(--cds-background-inverse); color: var(--cds-text-inverse);
  font-weight: 600; text-decoration: underline;
}
.gfb-skip:focus { left: var(--cds-spacing-05); }

/* Anything interactive this stylesheet adds keeps a visible focus ring. */
.gfb-facet__opt:focus-visible,
.gfb-chip:focus-visible,
.gfb-citycard:focus-visible,
.gfb-card:focus-visible,
.gfb-result__locate:focus-visible,
.gfb-brand:focus-visible,
.gfb-postnav__link:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

/* ---------------------------------------------------------- masthead */
.gfb-masthead {
  background: var(--cds-background);
  border-bottom: 1px solid var(--cds-border-subtle-01);
  padding-block: var(--cds-spacing-05);
  position: relative;
}
/* The one place the logo orange earns a full-strength appearance: a hairline
   the width of the page, purely decorative, with no meaning resting on it. */
.gfb-masthead::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--gfb-brand) 0%, var(--gfb-brand-strong) 100%);
}
.gfb-masthead .gfb-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--cds-spacing-05) var(--cds-spacing-07); flex-wrap: wrap;
}
.gfb-brand { display: inline-flex; align-items: center; text-decoration: none; }
.gfb-brand__logo {
  height: 2.25rem; width: auto; display: block;
}
@media (max-width: 420px) { .gfb-brand__logo { height: 1.75rem; } }

.gfb-nav {
  display: flex; gap: var(--cds-spacing-06); flex-wrap: wrap; align-items: center;
}
.gfb-nav .cds--link {
  position: relative; padding-block: var(--cds-spacing-02);
  font-size: .9375rem; text-decoration: none; color: var(--cds-text-secondary);
}
.gfb-nav .cds--link:hover { color: var(--cds-text-primary); text-decoration: underline; }
.gfb-nav .is-current { color: var(--cds-text-primary); font-weight: 600; }
/* The active marker uses orange-60, which clears 3:1 — orange-40 would not. */
.gfb-nav .is-current::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--gfb-brand-strong);
}

/* ---------------------------------------------------------------- hero */
.gfb-hero { padding-block: var(--cds-spacing-09) var(--cds-spacing-06); max-width: 54rem; }
.gfb-eyebrow {
  display: inline-flex; align-items: center; gap: var(--cds-spacing-03);
  margin: 0 0 var(--cds-spacing-04); font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cds-text-secondary);
}
.gfb-eyebrow::before {
  content: ''; width: 1.5rem; height: 2px; background: var(--gfb-brand-strong); flex: none;
}
/* Bold, tight headings. Carbon's expressive scale at 300 reads washed out at
   these sizes; the hierarchy here is carried by weight and tracking. */
.gfb-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  font-weight: 600; line-height: 1.1; letter-spacing: -.02em;
  color: var(--cds-text-primary);
}
.gfb-hero__lede {
  margin: var(--cds-spacing-05) 0 0; max-width: 44rem;
  color: var(--cds-text-secondary); font-size: 1.125rem; line-height: 1.6;
}
.gfb-hero__stats {
  margin: var(--cds-spacing-06) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--cds-spacing-03) var(--cds-spacing-05);
  align-items: baseline; color: var(--cds-text-secondary); font-size: .9375rem;
}
.gfb-hero__stats strong {
  color: var(--cds-text-primary); font-weight: 600; font-size: 1.125rem;
}
.gfb-hero--locator { padding-bottom: var(--cds-spacing-05); }

/* --------------------------------------------------------- search bars */
.gfb-searchbar, .gfb-locatorbar {
  display: flex; gap: var(--cds-spacing-05); flex-wrap: wrap; align-items: flex-end;
  padding: var(--cds-spacing-06);
  margin-top: var(--cds-spacing-06);
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01);
  border-left: 3px solid var(--gfb-brand-strong);
}
.gfb-searchbar .cds--search { flex: 1 1 18rem; min-width: 0; }
.gfb-locatorbar .cds--search { flex: 1 1 16rem; min-width: 0; }
.gfb-inline-field { flex: 0 1 13rem; margin: 0; }
.gfb-submit { flex: 0 0 auto; }
.gfb-searchbar--blog { border-bottom: 1px solid var(--cds-border-subtle-01); }

/* Carbon's inputs sit on layer-01; inside our panel that disappears. */
.gfb-searchbar .cds--search-input,
.gfb-locatorbar .cds--search-input,
.gfb-searchbar .cds--select-input,
.gfb-locatorbar .cds--select-input,
.gfb-adminsearch .cds--text-input {
  background: var(--cds-field-02, var(--cds-background));
  border-bottom: 1px solid var(--cds-border-strong-01);
}

.gfb-geo {
  display: flex; align-items: center; gap: var(--cds-spacing-05);
  flex-wrap: wrap; padding-block: var(--cds-spacing-05);
}
.gfb-geo .cds--btn { display: inline-flex; align-items: center; gap: var(--cds-spacing-03); }
.gfb-geo__status { margin: 0; font-size: .875rem; color: var(--cds-text-secondary); max-width: 42rem; }

/* -------------------------------------------------------------- layout */
.gfb-layout {
  display: grid; gap: var(--cds-spacing-08);
  grid-template-columns: 16rem minmax(0, 1fr);
  padding-block: var(--cds-spacing-07) var(--cds-spacing-10);
}
.gfb-layout--locator { grid-template-columns: 15rem minmax(0, 1fr); }
@media (max-width: 900px) {
  .gfb-layout, .gfb-layout--locator { grid-template-columns: 1fr; gap: var(--cds-spacing-06); }
}

.gfb-filters__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--cds-spacing-04);
  margin-bottom: var(--cds-spacing-05); padding-bottom: var(--cds-spacing-04);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.gfb-filters__head h2 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.gfb-facet { margin: 0 0 var(--cds-spacing-06); border: 0; padding: 0; }
.gfb-facet legend {
  margin-bottom: var(--cds-spacing-03); font-size: .75rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cds-text-secondary);
}
.gfb-facet .cds--form-item { margin: 0; }

/* Facets are links, not checkboxes: every filtered view gets a real URL. */
.gfb-facet__opt {
  display: flex; align-items: center; gap: var(--cds-spacing-03);
  min-height: 2.25rem; padding: var(--cds-spacing-02) var(--cds-spacing-03);
  text-decoration: none; color: var(--cds-text-primary); font-size: .875rem;
  border-left: 2px solid transparent;
  transition: background 110ms ease-out, border-color 110ms ease-out;
}
.gfb-facet__opt:hover { background: var(--cds-layer-hover-01); }
.gfb-facet__opt.is-on {
  background: var(--gfb-brand-tint);
  border-left-color: var(--gfb-brand-strong);
  font-weight: 600;
}
.gfb-facet__box {
  flex: none; width: 1rem; height: 1rem;
  border: 1px solid var(--cds-icon-secondary); border-radius: 1px;
  position: relative;
}
.gfb-facet__opt.is-on .gfb-facet__box {
  background: var(--gfb-brand-strong); border-color: var(--gfb-brand-strong);
}
/* A tick, so the on-state is not carried by colour alone. */
.gfb-facet__opt.is-on .gfb-facet__box::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.gfb-facet__name { flex: 1; }
.gfb-facet__count { color: var(--cds-text-secondary); font-size: .75rem; }
.gfb-facet__opt.is-on .gfb-facet__count { color: var(--gfb-brand-deep); }
.gfb-facet__more summary {
  cursor: pointer; padding: var(--cds-spacing-03);
  font-size: .875rem; color: var(--cds-link-primary);
}
.gfb-facet__more summary:hover { text-decoration: underline; }
.gfb-facet__note {
  margin: var(--cds-spacing-03) 0 0; padding: var(--cds-spacing-04);
  background: var(--gfb-brand-tint); border-left: 2px solid var(--gfb-brand-tint-2);
  font-size: .8125rem; color: var(--cds-text-secondary); line-height: 1.45;
}
.gfb-filters__aside {
  margin: 0; padding-top: var(--cds-spacing-05); font-size: .8125rem;
  color: var(--cds-text-secondary); border-top: 1px solid var(--cds-border-subtle-01);
}

.gfb-resultbar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--cds-spacing-05); flex-wrap: wrap;
  margin-bottom: var(--cds-spacing-05); padding-bottom: var(--cds-spacing-04);
  border-bottom: 1px solid var(--cds-border-subtle-01);
}
.gfb-resultbar p { margin: 0; }
.gfb-resultbar strong { font-size: 1.125rem; font-weight: 600; }

/* --------------------------------------------------------------- cards */
.gfb-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--cds-spacing-05);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.gfb-grid--posts { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }

.gfb-card {
  display: flex; flex-direction: column; height: 100%; padding: 0;
  text-decoration: none; color: inherit; overflow: hidden;
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01);
  transition: background 110ms ease-out, border-color 110ms ease-out;
}
.gfb-card:hover { background: var(--cds-layer-hover-01); border-color: var(--cds-border-strong-01); }
/* The media box is a fixed-ratio frame and the image is absolutely positioned
   inside it. Relying on aspect-ratio alone left the images at their natural
   heights when the card was a flex item, so the grid came out ragged and the
   price badge rode up over the title. padding-top is the ratio fallback, and
   `flex: none` stops the column flex container shrinking the frame. */
.gfb-card__media {
  position: relative; display: block; width: 100%; flex: none;
  overflow: hidden; background: var(--gfb-brand-tint);
  aspect-ratio: 3 / 2;
}
@supports not (aspect-ratio: 3 / 2) {
  .gfb-card__media { height: 0; padding-top: 66.666%; }
  .gfb-card--post .gfb-card__media { padding-top: 56.25%; }
}
.gfb-card--post .gfb-card__media { aspect-ratio: 16 / 9; }
.gfb-card__media img,
.gfb-card__noimg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.gfb-card__media img {
  transition: transform 220ms cubic-bezier(.2, 0, .38, .9);
}
.gfb-card:hover .gfb-card__media img { transform: scale(1.03); }

/* Most imported joints have no photograph, and a page of diagonal hatching is
   the ugliest thing the directory can show. A tinted plate mark reads as
   deliberate rather than broken. */
.gfb-card__noimg {
  display: block;
  background-color: var(--gfb-brand-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23ffd9be' stroke-width='1.25'%3E%3Ccircle cx='16' cy='16' r='9.5'/%3E%3Ccircle cx='16' cy='16' r='5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 4.5rem 4.5rem;
}
.gfb-card__price {
  position: absolute; left: 0; bottom: 0;
  background: var(--cds-background-inverse); color: var(--cds-text-inverse);
  font-size: .75rem; font-weight: 600; padding: .25rem .5rem;
}
.gfb-card__body {
  display: flex; flex-direction: column; gap: var(--cds-spacing-03);
  padding: var(--cds-spacing-05); flex: 1;
}
.gfb-card__title {
  font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em;
}
.gfb-card:hover .gfb-card__title { text-decoration: underline; text-underline-offset: 2px; }
.gfb-card__meta {
  display: flex; align-items: center; gap: var(--cds-spacing-03);
  flex-wrap: wrap; color: var(--cds-text-secondary); font-size: .8125rem;
}
.gfb-card__excerpt {
  font-size: .875rem; color: var(--cds-text-secondary); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.gfb-card__hours { display: block; }
.gfb-card__tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: auto; padding-top: var(--cds-spacing-03); }
.gfb-card__menu {
  font-size: .75rem; color: var(--cds-support-success); font-weight: 600;
}

/* -------------------------------------------------------- state badges */
/* State is carried by the words; colour only reinforces it. */
.gfb-hours {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.gfb-hours__dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }
.gfb-hours--green     { color: var(--cds-support-success); }
.gfb-hours--gray      { color: var(--cds-text-secondary); }
.gfb-hours--red       { color: var(--cds-support-error); }
.gfb-hours--cool-gray { color: var(--cds-text-placeholder); }

.gfb-prov {
  display: inline-block; font-size: .6875rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .125rem .375rem; white-space: nowrap;
}
/* White on orange-60 is 5.03:1. White on the logo orange would be 2.46:1, which
   is why the reviewed badge uses the darker step. */
.gfb-prov--editorial { color: #fff; background: var(--gfb-brand-strong); }
.gfb-prov--osm {
  color: var(--cds-text-secondary); background: transparent;
  border: 1px solid var(--cds-border-subtle-01);
}

/* -------------------------------------------------- empty / error tiles */
.gfb-empty, .gfb-error, .gfb-success {
  padding: var(--cds-spacing-08); text-align: center;
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01);
}
.gfb-empty h2, .gfb-empty h3, .gfb-error h2, .gfb-success h2 {
  margin: 0 0 var(--cds-spacing-04); font-weight: 600; letter-spacing: -.01em;
}
.gfb-empty p, .gfb-error p { max-width: 36rem; margin-inline: auto; color: var(--cds-text-secondary); }
.gfb-error { text-align: left; border-left: 3px solid var(--cds-support-error); }
.gfb-error p { margin-inline: 0; }
.gfb-success { text-align: left; border-left: 3px solid var(--cds-support-success); }
.gfb-empty__actions {
  display: flex; gap: var(--cds-spacing-04); flex-wrap: wrap; justify-content: center;
  margin-top: var(--cds-spacing-06);
}
.gfb-error .gfb-empty__actions { justify-content: flex-start; }

.gfb-pager {
  display: flex; align-items: center; justify-content: center;
  gap: var(--cds-spacing-05); margin-top: var(--cds-spacing-08);
  padding-top: var(--cds-spacing-06); border-top: 1px solid var(--cds-border-subtle-01);
}

/* ----------------------------------------------------------------- map */
.gfb-map-shell { margin-bottom: var(--cds-spacing-06); }
.gfb-map {
  height: clamp(18rem, 45vh, 32rem); width: 100%;
  background: var(--cds-layer-02);
  border: 1px solid var(--cds-border-subtle-01);
}
.gfb-map:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.gfb-map.is-unavailable { display: grid; place-items: center; height: auto; padding: var(--cds-spacing-07); }
.gfb-map__fallback, .gfb-map.is-unavailable { text-align: center; color: var(--cds-text-secondary); }
.gfb-map__fallback p { margin: 0; padding: var(--cds-spacing-07); max-width: 36rem; }
.gfb-map__status {
  margin: var(--cds-spacing-03) 0 0; font-size: .8125rem;
  color: var(--cds-text-secondary); min-height: 1.25rem;
}

.leaflet-container { font-family: inherit; font-size: .875rem; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--cds-layer-01); color: var(--cds-text-primary);
  border-radius: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.leaflet-container a.leaflet-popup-close-button { color: var(--cds-text-secondary); }
.leaflet-bar a {
  background: var(--cds-layer-01); color: var(--cds-text-primary);
  border-bottom-color: var(--cds-border-subtle-01);
}
.leaflet-bar a:hover { background: var(--cds-layer-hover-01); }
.leaflet-control-attribution {
  background: var(--cds-layer-01); color: var(--cds-text-secondary); font-size: .6875rem;
}
.leaflet-control-attribution a { color: var(--cds-link-primary); }

/* Reviewed listings get the larger, filled pin: the distinction is the point. */
.gfb-pin > span {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  box-sizing: border-box; transition: transform 120ms ease-out;
}
.gfb-pin--editorial > span {
  background: var(--gfb-brand-strong); border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--gfb-brand-deep);
}
.gfb-pin--osm > span {
  background: #fff; border: 2px solid var(--cds-text-secondary);
}
.gfb-pin.is-hover > span { background: var(--cds-support-success); transform: scale(1.45); }

.gfb-pop { display: grid; gap: .25rem; min-width: 11rem; }
.gfb-pop__name { font-weight: 600; font-size: .9375rem; color: var(--cds-link-primary); }
.gfb-pop__city, .gfb-pop__prov { color: var(--cds-text-secondary); font-size: .75rem; }
.gfb-pop__prov { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.gfb-pop__open { color: var(--cds-support-success); font-size: .75rem; font-weight: 600; }
.gfb-pop__shut { color: var(--cds-support-error); font-size: .75rem; font-weight: 600; }
.gfb-pop__unknown { color: var(--cds-text-placeholder); font-size: .75rem; }
.gfb-pop__dir { margin-top: .25rem; font-size: .8125rem; }

/* --------------------------------------------------------- result list */
.gfb-results__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cds-spacing-03); }
.gfb-result {
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01);
  border-left-width: 3px; border-left-color: var(--cds-border-subtle-01);
  transition: background 110ms ease-out, border-color 110ms ease-out;
}
.gfb-result.has-pin { border-left-color: var(--gfb-brand-strong); }
.gfb-result:hover { background: var(--cds-layer-hover-01); }
.gfb-result__body { padding: var(--cds-spacing-05); display: grid; gap: var(--cds-spacing-03); }
.gfb-result__name { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.gfb-result__name a { color: var(--cds-text-primary); text-decoration: none; }
.gfb-result__name a:hover { text-decoration: underline; text-underline-offset: 2px; }
.gfb-result__meta {
  margin: 0; display: flex; align-items: center; gap: var(--cds-spacing-04);
  flex-wrap: wrap; font-size: .8125rem; color: var(--cds-text-secondary);
}
.gfb-result__dist { font-weight: 600; color: var(--cds-text-primary); }
.gfb-result__addr { margin: 0; font-size: .8125rem; color: var(--cds-text-secondary); }
.gfb-result__actions {
  margin: 0; display: flex; gap: var(--cds-spacing-05); flex-wrap: wrap; align-items: center;
}
.gfb-result__locate {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .875rem; color: var(--cds-link-primary); text-decoration: underline;
}

/* ----------------------------------------------------------- city grid */
.gfb-cities { padding-block: var(--cds-spacing-05); }
.gfb-cities h2 { margin: 0 0 var(--cds-spacing-03); font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; }
.gfb-cities__list {
  list-style: none; margin: var(--cds-spacing-06) 0 0; padding: 0;
  display: grid; gap: var(--cds-spacing-04);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
.gfb-citycard {
  display: grid; gap: .125rem; padding: var(--cds-spacing-05);
  text-decoration: none; color: inherit; height: 100%;
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01);
  border-left: 3px solid transparent;
  transition: background 110ms ease-out, border-color 110ms ease-out;
}
.gfb-citycard:hover {
  background: var(--cds-layer-hover-01); border-left-color: var(--gfb-brand-strong);
}
.gfb-citycard__name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.gfb-citycard:hover .gfb-citycard__name { text-decoration: underline; text-underline-offset: 2px; }
.gfb-citycard__region {
  font-size: .6875rem; color: var(--cds-text-secondary);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.gfb-citycard__count { margin-top: var(--cds-spacing-03); font-size: .8125rem; color: var(--cds-text-secondary); }

/* --------------------------------------------------------------- chips */
.gfb-chips {
  display: flex; gap: var(--cds-spacing-03); flex-wrap: wrap;
  list-style: none; margin: 0; padding: var(--cds-spacing-05) 0;
}
.gfb-chips--inline { padding-block: var(--cds-spacing-03); }
.gfb-chip {
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 2.25rem; padding: .25rem var(--cds-spacing-05);
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01);
  color: var(--cds-text-primary); text-decoration: none; font-size: .875rem;
  transition: background 110ms ease-out, border-color 110ms ease-out;
}
.gfb-chip:hover { background: var(--gfb-brand-tint); border-color: var(--gfb-brand-tint-2); }
.gfb-chip.is-on {
  background: var(--gfb-brand-strong); color: #fff; border-color: var(--gfb-brand-strong);
  font-weight: 600;
}
.gfb-chip__count { font-size: .75rem; opacity: .8; }

/* ------------------------------------------- blog <-> directory bridge */
.gfb-bridge {
  padding: var(--cds-spacing-06); margin-bottom: var(--cds-spacing-06);
  background: var(--gfb-brand-tint); border-left: 3px solid var(--gfb-brand-strong);
}
.gfb-bridge h2 {
  margin: 0 0 var(--cds-spacing-05); font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em;
}
.gfb-bridge__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cds-spacing-03); }
.gfb-bridge__list li {
  display: flex; align-items: baseline; gap: var(--cds-spacing-03);
  flex-wrap: wrap; font-size: .875rem; color: var(--cds-text-secondary);
}
.gfb-bridge__dish { min-width: 8rem; font-weight: 600; color: var(--cds-text-primary); }

/* ---------------------------------------------------------- detail page */
.gfb-breadcrumb {
  display: flex; gap: var(--cds-spacing-03); flex-wrap: wrap; align-items: center;
  padding-block: var(--cds-spacing-05); font-size: .8125rem; color: var(--cds-text-secondary);
}
.gfb-breadcrumb [aria-current] { color: var(--cds-text-primary); font-weight: 500; }

.gfb-notice {
  padding: var(--cds-spacing-05); margin-bottom: var(--cds-spacing-05);
  background: var(--cds-layer-01); border-left: 3px solid var(--cds-support-warning);
  font-size: .9375rem;
}
.gfb-notice--error  { border-left-color: var(--cds-support-error); }
.gfb-notice--ok     { border-left-color: var(--cds-support-success); }
.gfb-notice--source { border-left-color: var(--gfb-brand-strong); background: var(--gfb-brand-tint); }

/* Capped rather than a pure 16:9. On a 1050px column that ratio is a 590px
   image, which pushes the name, the hours and the address below the fold —
   the three things someone opening a listing came for. */
.gfb-joint__hero {
  aspect-ratio: 16 / 9; max-height: 24rem; overflow: hidden;
  background: var(--gfb-brand-tint);
}
.gfb-joint__hero img { width: 100%; height: 100%; object-fit: cover; }
.gfb-post__hero { max-height: 26rem; }
.gfb-joint__head { padding-block: var(--cds-spacing-07) var(--cds-spacing-05); }
.gfb-joint__head h1 {
  margin: 0; font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);
  font-weight: 600; line-height: 1.12; letter-spacing: -.02em;
}
.gfb-joint__sub { margin: var(--cds-spacing-04) 0 0; color: var(--cds-text-secondary); font-size: 1rem; }
.gfb-joint__region { display: block; font-size: .8125rem; }
.gfb-joint__badges {
  margin: var(--cds-spacing-05) 0 0; display: flex; align-items: center;
  gap: var(--cds-spacing-04); flex-wrap: wrap;
}
.gfb-joint__tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: var(--cds-spacing-05); }

.gfb-joint__cols, .gfb-post__cols {
  display: grid; gap: var(--cds-spacing-08);
  grid-template-columns: minmax(0, 1fr) 20rem;
  padding-bottom: var(--cds-spacing-10);
}
.gfb-post__cols { grid-template-columns: minmax(0, 1fr) 19rem; }
@media (max-width: 860px) {
  .gfb-joint__cols, .gfb-post__cols { grid-template-columns: 1fr; gap: var(--cds-spacing-07); }
}

.gfb-prose { max-width: 42rem; }
.gfb-prose p { margin: 0 0 var(--cds-spacing-05); line-height: 1.65; color: var(--cds-text-secondary); }

/* ---------------------------------------------------------------- menu */
.gfb-menu { margin-top: var(--cds-spacing-08); }
.gfb-menu h2, .gfb-openhours h2, .gfb-related h2, .gfb-post__dishes h2 {
  margin: 0 0 var(--cds-spacing-04); font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em;
}
.gfb-menu__source { margin: 0 0 var(--cds-spacing-06); font-size: .875rem; color: var(--cds-text-secondary); }
.gfb-menu__section {
  margin: var(--cds-spacing-07) 0 var(--cds-spacing-03);
  font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cds-text-secondary);
  border-bottom: 1px solid var(--cds-border-subtle-01); padding-bottom: var(--cds-spacing-03);
}
.gfb-menu__list { list-style: none; margin: 0; padding: 0; }
.gfb-menu__item {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--cds-spacing-05); padding: var(--cds-spacing-04) 0;
  border-bottom: 1px solid var(--cds-border-subtle-00);
}
.gfb-menu__name { display: block; font-weight: 500; }
.gfb-menu__desc { display: block; margin-top: .125rem; font-size: .875rem; color: var(--cds-text-secondary); }
.gfb-menu__price { flex: none; font-weight: 600; color: var(--cds-text-primary); }
.gfb-menu__disclaimer { margin-top: var(--cds-spacing-05); }
.gfb-menu-missing {
  padding: var(--cds-spacing-06); margin-top: var(--cds-spacing-07);
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01);
}
.gfb-menu-missing h2 { margin: 0 0 var(--cds-spacing-04); font-size: 1.125rem; font-weight: 600; }

/* ------------------------------------------------------- opening hours */
.gfb-openhours { margin-top: var(--cds-spacing-08); }
.gfb-openhours__summary { margin: 0 0 var(--cds-spacing-03); font-size: 1rem; }
.gfb-openhours__raw {
  margin: 0 0 var(--cds-spacing-03); padding: var(--cds-spacing-04);
  background: var(--cds-layer-01); border-left: 2px solid var(--cds-border-strong-01);
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: .875rem;
}

/* -------------------------------------------------------------- aside */
.gfb-facts, .gfb-side-block {
  padding: var(--cds-spacing-06); background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01);
}
.gfb-side-block { margin-bottom: var(--cds-spacing-05); }
.gfb-facts__title, .gfb-side-block__title {
  margin: 0 0 var(--cds-spacing-05); font-size: 1rem; font-weight: 600; letter-spacing: -.01em;
  padding-bottom: var(--cds-spacing-03); border-bottom: 1px solid var(--cds-border-subtle-01);
}
.gfb-facts dl { margin: 0; }
.gfb-facts dt {
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cds-text-secondary); margin-top: var(--cds-spacing-05);
}
.gfb-facts dt:first-child { margin-top: 0; }
.gfb-facts dd { margin: .25rem 0 0; font-size: .9375rem; }
.gfb-facts__note { display: block; font-size: .75rem; color: var(--cds-text-secondary); }
.gfb-facts__actions { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-03); margin-top: var(--cds-spacing-06); }
.gfb-facts__coords { margin: var(--cds-spacing-05) 0 0; font-size: .875rem; }
.gfb-side-block__note { margin: 0 0 var(--cds-spacing-05); }
.gfb-side-block .cds--btn { margin-top: var(--cds-spacing-05); }

.gfb-gallery {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--cds-spacing-03);
  margin-top: var(--cds-spacing-05);
}
.gfb-gallery img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.gfb-side-note { margin-top: var(--cds-spacing-05); }
.gfb-side-note--licence { font-size: .75rem; line-height: 1.5; }

.gfb-jointlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cds-spacing-04); }
.gfb-jointlist li { font-size: .9375rem; }
.gfb-jointlist__where { display: block; font-size: .8125rem; color: var(--cds-text-secondary); }
.gfb-jointlist__meta {
  display: flex; align-items: center; gap: var(--cds-spacing-03); flex-wrap: wrap; margin-top: .25rem;
}

/* ------------------------------------------------------------- related */
.gfb-related { margin-top: var(--cds-spacing-08); }
.gfb-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cds-spacing-03); }
.gfb-related > ul > li > a {
  display: flex; align-items: center; gap: var(--cds-spacing-05);
  padding: var(--cds-spacing-03); text-decoration: none;
  color: var(--cds-text-primary); background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01); border-left: 3px solid transparent;
  font-weight: 500;
  transition: background 110ms ease-out, border-color 110ms ease-out;
}
.gfb-related > ul > li > a:hover {
  background: var(--cds-layer-hover-01); border-left-color: var(--gfb-brand-strong);
}
.gfb-related img { width: 4.5rem; height: 4.5rem; object-fit: cover; flex: none; }

.gfb-nearby { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cds-spacing-04); }
.gfb-nearby li { display: grid; gap: .25rem; }
.gfb-nearby__meta {
  display: flex; align-items: center; gap: var(--cds-spacing-03); flex-wrap: wrap;
  font-size: .8125rem; color: var(--cds-text-secondary);
}

/* ------------------------------------------------------------- article */
.gfb-post__head { padding-block: var(--cds-spacing-07) var(--cds-spacing-05); }
.gfb-post__head h1 {
  margin: 0; font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 600; line-height: 1.12; letter-spacing: -.02em; max-width: 44rem;
}
.gfb-post__meta {
  margin: var(--cds-spacing-05) 0 0; display: flex; align-items: center;
  gap: var(--cds-spacing-04); flex-wrap: wrap;
  font-size: .875rem; color: var(--cds-text-secondary);
}
.gfb-post__hero {
  margin: 0 0 var(--cds-spacing-07); aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--gfb-brand-tint);
}
.gfb-post__hero img { width: 100%; height: 100%; object-fit: cover; }

.gfb-toc {
  padding: var(--cds-spacing-05); margin-bottom: var(--cds-spacing-07);
  background: var(--cds-layer-01); border-left: 3px solid var(--gfb-brand-strong);
}
.gfb-toc__title {
  margin: 0 0 var(--cds-spacing-03); font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cds-text-secondary);
}
.gfb-toc ol { margin: 0; padding-left: 1.25rem; display: grid; gap: .25rem; font-size: .875rem; }

/* Body copy is for reading: capped measure, real hierarchy, generous leading. */
.gfb-prose--post { max-width: 40rem; }
.gfb-prose--post p {
  color: var(--cds-text-primary); font-size: 1.0625rem; line-height: 1.7;
  margin: 0 0 var(--cds-spacing-05);
}
.gfb-prose--post h2 {
  margin: var(--cds-spacing-09) 0 var(--cds-spacing-04);
  font-size: 1.625rem; font-weight: 600; line-height: 1.25; letter-spacing: -.015em;
  scroll-margin-top: var(--cds-spacing-05);
}
.gfb-prose--post h3 {
  margin: var(--cds-spacing-07) 0 var(--cds-spacing-03);
  font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em;
  scroll-margin-top: var(--cds-spacing-05);
}
.gfb-prose--post h4 { margin: var(--cds-spacing-06) 0 var(--cds-spacing-03); font-size: 1.0625rem; font-weight: 600; }
.gfb-prose--post ul, .gfb-prose--post ol { margin: 0 0 var(--cds-spacing-05); padding-left: 1.5rem; }
.gfb-prose--post li { margin-bottom: var(--cds-spacing-03); line-height: 1.65; }
.gfb-prose--post li::marker { color: var(--gfb-brand-strong); }
.gfb-prose--post strong { font-weight: 600; color: var(--cds-text-primary); }
.gfb-prose--post a { color: var(--cds-link-primary); text-underline-offset: 2px; }
.gfb-prose--post figure { margin: var(--cds-spacing-07) 0; }
.gfb-prose--post figure img { width: 100%; height: auto; }
.gfb-prose--post figcaption {
  margin-top: var(--cds-spacing-03); font-size: .8125rem; color: var(--cds-text-secondary);
  padding-left: var(--cds-spacing-04); border-left: 2px solid var(--gfb-brand-tint-2);
}
.gfb-prose--post hr { border: 0; border-top: 1px solid var(--cds-border-subtle-01); margin: var(--cds-spacing-08) 0; }
.gfb-prose--post blockquote {
  margin: var(--cds-spacing-07) 0; padding: var(--cds-spacing-04) var(--cds-spacing-06);
  background: var(--gfb-brand-tint); border-left: 3px solid var(--gfb-brand-strong);
  color: var(--cds-text-primary); font-size: 1.0625rem;
}
.gfb-prose--post table { width: 100%; border-collapse: collapse; margin-bottom: var(--cds-spacing-05); }
.gfb-prose--post th, .gfb-prose--post td {
  padding: var(--cds-spacing-03); text-align: left;
  border-bottom: 1px solid var(--cds-border-subtle-01); font-size: .9375rem;
}
.gfb-prose--post th { font-weight: 600; background: var(--cds-layer-01); }

.gfb-post__dishes { margin-top: var(--cds-spacing-08); }
.gfb-post__dishes p { margin: 0; }

.gfb-postnav {
  display: grid; gap: var(--cds-spacing-04); grid-template-columns: 1fr 1fr;
  margin-top: var(--cds-spacing-09); padding-top: var(--cds-spacing-06);
  border-top: 1px solid var(--cds-border-subtle-01);
}
@media (max-width: 600px) { .gfb-postnav { grid-template-columns: 1fr; } }
.gfb-postnav__link {
  display: grid; gap: .25rem; padding: var(--cds-spacing-05);
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01);
  text-decoration: none; color: var(--cds-text-primary);
  font-size: .9375rem; font-weight: 600;
  transition: background 110ms ease-out, border-color 110ms ease-out;
}
.gfb-postnav__link:hover { background: var(--cds-layer-hover-01); border-color: var(--gfb-brand-strong); }
.gfb-postnav__link--next { text-align: right; }
.gfb-postnav__dir {
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gfb-brand-deep);
}

/* --------------------------------------------------------------- forms */
.gfb-form { margin-top: var(--cds-spacing-06); }
.gfb-form .cds--form-item { margin-bottom: var(--cds-spacing-06); }
.gfb-form .cds--text-area, .gfb-form .cds--text-input { width: 100%; }
.gfb-menu-editor { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: .875rem; }
/* Honeypot — hidden from people without being display:none, which some bots skip. */
.gfb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------- admin */
.gfb-adminbar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--cds-spacing-05); flex-wrap: wrap; padding-block: var(--cds-spacing-07);
}
.gfb-adminbar h1 { margin: 0; font-weight: 600; font-size: 1.75rem; letter-spacing: -.02em; }
.gfb-stats {
  display: grid; gap: var(--cds-spacing-04); margin-bottom: var(--cds-spacing-07);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.gfb-stats .cds--tile {
  padding: var(--cds-spacing-05); background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01); border-top: 2px solid var(--gfb-brand-strong);
}
.gfb-stat { display: block; font-size: 1.75rem; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.gfb-stats span:not(.gfb-stat) { font-size: .8125rem; color: var(--cds-text-secondary); }
.gfb-tablewrap { overflow-x: auto; margin-bottom: var(--cds-spacing-07); }
.gfb-adminsearch {
  display: flex; gap: var(--cds-spacing-05); align-items: flex-end;
  margin-bottom: var(--cds-spacing-05); flex-wrap: wrap;
}
.gfb-adminsearch .cds--form-item { margin: 0; flex: 0 1 20rem; }

/* --------------------------------------------------------------- adverts
   An ad has to be obviously an ad. The label is an AdSense requirement and
   also the honest thing: a reader should never mistake a unit for a listing
   we stand behind.

   min-height reserves the space before the unit fills, so the article does not
   jump when it loads. Layout shift is a ranking signal, it hurts viewability —
   which is what actually gets paid for — and it makes a page feel cheap.
   ------------------------------------------------------------------------- */
.gfb-ad {
  display: block; margin-block: var(--cds-spacing-07);
  padding: var(--cds-spacing-04);
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-01);
}
.gfb-ad__label {
  display: block; margin-bottom: var(--cds-spacing-03);
  font-size: .625rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cds-text-secondary);
}
.gfb-ad__unit { display: block; width: 100%; }

/* In the article column the unit gets room; in the sidebar it is a tile. */
.gfb-ad--article .gfb-ad__unit { min-height: 15.625rem; }
.gfb-ad--sidebar { margin-block: 0 var(--cds-spacing-05); }
.gfb-ad--sidebar .gfb-ad__unit { min-height: 15.625rem; }
.gfb-ad--footer .gfb-ad__unit  { min-height: 6.25rem; }

/* Never let a unit push the page sideways on a phone. */
.gfb-ad, .gfb-ad__unit { max-width: 100%; overflow: hidden; }

@media print { .gfb-ad { display: none; } }

/* -------------------------------------------------------------- footer */
.gfb-footer {
  margin-top: var(--cds-spacing-10);
  border-top: 1px solid var(--cds-border-subtle-01);
  background: var(--cds-layer-01);
  padding-block: var(--cds-spacing-08);
  color: var(--cds-text-secondary); font-size: .875rem;
}
.gfb-footer p { margin: 0; max-width: 46rem; line-height: 1.6; }
.gfb-footer__brand { margin-bottom: var(--cds-spacing-05); }
.gfb-footer__logo { height: 1.75rem; width: auto; opacity: .9; }

/* A licence condition, so it is styled to be read, not to disappear. */
.gfb-attrib {
  margin-top: var(--cds-spacing-05); padding-top: var(--cds-spacing-05);
  border-top: 1px solid var(--cds-border-subtle-01);
  font-size: .8125rem; color: var(--cds-text-secondary); line-height: 1.6;
}

/* ------------------------------------------------------- touch targets */
@media (pointer: coarse) {
  .gfb-facet__opt, .gfb-chip, .gfb-result__actions a, .gfb-result__locate,
  .gfb-nav .cds--link {
    min-height: 2.75rem;
  }
  .gfb-facet__opt { padding-block: var(--cds-spacing-03); }
  .gfb-result__actions { gap: var(--cds-spacing-06); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
  .gfb-card:hover .gfb-card__media img { transform: none; }
}