/* BikeSafe CPH design system - PRD §5, tokens from design/homepage.html
   Final scheme: Plum accent on bright white (do not copy the mockup's
   Fjord-green/cream :root defaults). */

:root {
  --paper: #ffffff;
  --paper-2: #f4f4f2;
  --paper-3: #ebebe8;
  --ink: #1a1813;
  --ink-soft: #494539;
  --muted: #8c8678;
  --line: #e7e7e2;
  --white: #fff;
  --accent: #97386a;
  --accent-deep: #321f2c;
  --accent-contrast: #ffffff;
  --tint: #f0e6ec;
  --sans: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --r: 10px;
  --r-lg: 20px;
  --maxw: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); background: var(--paper); color: var(--ink);
  font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
p { margin: 0; text-wrap: pretty; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* buttons - pill-shaped, ≥48px touch targets (PRD §4.3) */
.btn {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 16px;
  padding: 14px 22px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-contrast);
  cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease; min-height: 48px;
}
.btn:hover { transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--accent); color: var(--accent-contrast); }
.btn .arr { transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(3px); }

section { padding: 72px 0; }
.divide { border-top: 1px solid var(--line); }
.sec-head { display: flex; flex-direction: column; gap: 14px; }
/* Page title vs section heading: the H1 is the biggest thing on an interior
   page, the H2s below it sit a clear step down and pick up the mono eyebrow's
   colour cue instead of competing. Both were one rule before, which made a
   page title and the first section heading read as equals. */
.sec-head h1 { font-size: clamp(36px, 6.2vw, 60px); line-height: 1.02; letter-spacing: -.022em; }
/* The recommended-by ribbon hangs off the header into the top right of the
   page, so the first block of an interior page starts below it - a long page
   title used to run underneath the logos. */
main > section:first-child:not(.hero) { padding-top: 118px; }
.sec-head h2 { font-size: clamp(25px, 3.5vw, 36px); line-height: 1.12; letter-spacing: -.012em; }
.sec-head .lede { color: var(--ink-soft); max-width: 54ch; font-size: clamp(16px, 2.4vw, 19px); }
.cap { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav .row { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -.02em; font-size: 19px; white-space: nowrap; flex-shrink: 0; }
.brand .mark { width: 32px; height: 32px; display: block; flex: none; }
.brand .sub { color: var(--muted); font-weight: 500; margin-left: -4px; }
.nav nav { display: flex; gap: 30px; align-items: center; }
.nav nav a { font-size: 15.5px; color: var(--ink-soft); font-weight: 500; }
.nav nav a:hover, .nav nav a[aria-current="page"] { color: var(--accent); }
/* the special "Fork & Spoke" guide link, set in the serif face */
.nav-serif { font-family: var(--serif); font-style: italic; font-size: 20px; letter-spacing: .01em; }
.nav .right { display: flex; align-items: center; gap: 14px; }
.nav-cta { font-size: 15px; padding: 10px 18px; min-height: 42px; white-space: nowrap; }
.burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--white); cursor: pointer; }
.burger i { width: 18px; height: 1.6px; background: var(--ink); display: block; transition: .25s; }
.mobile-menu { display: none; flex-direction: column; gap: 2px; padding: 10px 24px 22px; border-bottom: 1px solid var(--line); background: var(--paper); }
.mobile-menu a { padding: 13px 4px; font-size: 18px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.mobile-menu a:last-of-type { border-bottom: 0; }
.mobile-menu .btn { margin-top: 14px; justify-content: center; }
body.menu-open .mobile-menu { display: flex; }
body.menu-open .burger i:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
body.menu-open .burger i:nth-child(2) { opacity: 0; }
body.menu-open .burger i:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

/* offline indicator (PRD §3.6) */
.offline-banner {
  display: none; background: var(--ink); color: var(--paper); text-align: center;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; padding: 8px 16px;
}
body.is-offline .offline-banner { display: block; }

/* hero */
.hero { padding: 70px 0 26px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; font-size: clamp(46px, 7.2vw, 92px); line-height: .97; }
.hero h1 em { font-style: italic; }
.hero .sub { max-width: 46ch; margin-top: 24px; font-size: clamp(17px, 2.4vw, 21px); color: var(--ink-soft); }
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.support-ribbon { position: absolute; top: 100%; right: max(24px, calc((100% - var(--maxw)) / 2 + 24px)); z-index: 59; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 9px; background: var(--accent-deep); color: #fff; border-radius: 0 0 12px 12px; box-shadow: 0 8px 22px rgba(26, 24, 19, .16); text-decoration: none; }
.support-ribbon span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .68); }
.support-ribbon img { height: 36px; width: auto; filter: brightness(0) invert(1); }
a.support-ribbon:hover { background: var(--accent); }
.support-ribbon--rst { padding: 12px 18px 14px; gap: 14px; }
.support-ribbon--rst span { font-size: 13px; }
.support-ribbon__logos { display: flex; align-items: center; gap: 10px; }
.support-ribbon__logo { display: flex; align-items: center; justify-content: center; background: #fff; padding: 8px 12px; border-radius: 8px; transition: transform .16s ease, box-shadow .16s ease; }
.support-ribbon__logo:hover { transform: translateY(1px); box-shadow: 0 4px 12px rgba(26, 24, 19, .22); }
.support-ribbon__logo img { filter: none; height: 56px; width: auto; max-width: 130px; object-fit: contain; }

/* hero crossfade - cycles through 5 city photos */
.hero-fade { position: relative; height: clamp(360px, 52vw, 560px); border-radius: 20px; overflow: hidden; background: var(--paper-3); }
.hero-fade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.hero-fade img.active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-fade img { transition: none; }
}

/* hero stepper - quiet dots, barely-there until you look for them */
.hero-dots {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 5;
  display: flex; justify-content: center; gap: 2px;
  opacity: .55; transition: opacity .3s ease;
}
.hero-fade:hover .hero-dots, .hero-dots:focus-within { opacity: .9; }
.hero-dots button {
  width: 22px; height: 22px; padding: 0; border: 0; background: transparent;
  cursor: pointer; display: grid; place-items: center;
}
.hero-dots button::after {
  content: ''; width: 5px; height: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  transition: background .3s ease, transform .3s ease;
}
.hero-dots button:hover::after { background: rgba(255, 255, 255, .8); }
.hero-dots button.active::after { background: rgba(255, 255, 255, .95); transform: scale(1.3); }
.hero-dots button:focus-visible { outline: 1px solid rgba(255, 255, 255, .8); outline-offset: -6px; border-radius: 50%; }

/* photo bands + mosaic */
.band { display: block; width: 100%; height: clamp(280px, 42vw, 520px); object-fit: cover; border-radius: 20px; }
.band--page { height: clamp(220px, 32vw, 380px); margin-top: 34px; }
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 16px; margin-top: 40px; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.mosaic .m1 { grid-column: span 2; grid-row: span 2; }
.mosaic .m2 { grid-column: span 2; }
.stats { display: flex; gap: 46px; flex-wrap: wrap; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.stat b { display: block; font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -.03em; }
.stat span { font-size: 14px; color: var(--muted); }

/* cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.cards--two { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 13px; }
a.card { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.card:hover { border-color: var(--accent); box-shadow: 0 6px 22px rgba(26, 24, 19, .08); transform: translateY(-2px); }
.card .num { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .1em; }
.card h3 { font-size: 22px; letter-spacing: -.01em; }
.card p { color: var(--ink-soft); font-size: 15.5px; }
.card.more-card { justify-content: center; align-items: flex-start; background: var(--tint); }
.card.more-card h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; }

/* dark feature panel (routes, CTA) */
.panel { background: var(--accent-deep); color: var(--paper); border-radius: 28px; padding: clamp(28px, 4vw, 56px); }
.panel .eyebrow { color: rgba(255, 255, 255, .6); }
.panel h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5.5vw, 58px); margin-top: 10px; }
.panel .lede { color: rgba(255, 255, 255, .8); max-width: 52ch; margin-top: 14px; font-size: 18px; }
.panel .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); margin-top: 30px; }

/* route cards */
.route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.rcard { border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-lg); overflow: hidden; background: rgba(255, 255, 255, .03); display: flex; flex-direction: column; }
.rcard .rimg { position: relative; height: 170px; background: var(--paper-3); }
.rcard .rimg img { width: 100%; height: 100%; object-fit: cover; }
.rcard .rtag { position: absolute; top: 12px; left: 12px; z-index: 3; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; background: var(--paper); color: var(--ink); padding: 4px 9px; border-radius: 6px; }
.rcard .rbody { padding: 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.rcard h3 { font-size: 21px; }
.rcard p { color: rgba(255, 255, 255, .78); font-size: 14.5px; }
.rcard .rmeta { display: flex; gap: 16px; font-family: var(--mono); font-size: 12px; color: rgba(255, 255, 255, .6); margin-top: auto; padding-top: 6px; }

/* light list cards (directories, catalog on paper) */
.list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.lcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.lcard .limg { height: 170px; background: var(--paper-3); position: relative; }
.lcard .limg img { width: 100%; height: 100%; object-fit: cover; }
.lcard .ltag { position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; background: var(--paper); color: var(--ink); padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line); }
.lcard .lbody { padding: 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.lcard h3 { font-size: 21px; }
.lcard p { color: var(--ink-soft); font-size: 15px; }
.lcard .lmeta { display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: auto; padding-top: 8px; }
.lcard .more { font-weight: 600; display: inline-flex; gap: 8px; align-items: center; color: var(--accent); margin-top: 4px; }

/* partner disclosure label - mandatory for paid placements (PRD §1.4) */
.partner-badge {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
  border: 1px solid currentColor; border-radius: 6px; padding: 2px 7px;
}

/* maps */
.map { width: 100%; height: clamp(320px, 50vw, 520px); border-radius: var(--r-lg); border: 1px solid var(--line); z-index: 1; }

.map--route { height: clamp(380px, 56vw, 580px); }

/* map markers - numbered ride-order pins; plum for food & drink, ink for sights */
.poi-pin {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  border: 2.5px solid #fff; box-shadow: 0 3px 10px rgba(26, 24, 19, .4);
}
.poi-pin--food { background: var(--accent); }
.poi-pin--dot { width: 18px; height: 18px; }
.poi-pin { transition: transform .15s ease, box-shadow .15s ease; }
.poi-pin--hot { transform: scale(1.25); box-shadow: 0 5px 16px rgba(151, 56, 106, .5); }

/* map <-> card linking: highlighted card + clickable affordance */
[data-map-key], [data-poi] { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.lcard.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint); }

/* map legend */
.map-legend {
  display: flex; gap: 22px; flex-wrap: wrap; margin-top: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-soft);
}
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(26, 24, 19, .3); }
.legend-dot--sight { background: var(--ink); }
.legend-dot--food { background: var(--accent); }
.legend-line { width: 26px; height: 4px; border-radius: 2px; background: var(--accent); }

/* ride-order number on the stop cards, matching the map pins */
.stop-num {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 12px; font-weight: 500; vertical-align: 3px;
}

/* map popups - match the card design */
.leaflet-popup-content-wrapper {
  font-family: var(--sans); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(26, 24, 19, .18); border: 1px solid var(--line);
}
.leaflet-popup-content { margin: 14px 18px; font-size: 14.5px; color: var(--ink); line-height: 1.45; }
.leaflet-popup-content b { font-size: 16px; letter-spacing: -.01em; }
.leaflet-popup-content .popup-type {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px;
}
.leaflet-popup-content .popup-addr {
  display: block; font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 2px;
}
.leaflet-popup-content .popup-desc { margin: 8px 0 0; color: var(--ink-soft); font-size: 13.5px; }
.leaflet-popup-content .popup-meta {
  display: flex; gap: 14px; align-items: center; margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--line); font-size: 13px;
}
.leaflet-popup-content .popup-meta a { color: var(--accent); font-weight: 600; text-decoration: none; }
.leaflet-popup-tip { box-shadow: 0 8px 24px rgba(26, 24, 19, .18); }

/* type tag + number on stop cards */
.stop-type {
  align-self: flex-start; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px;
}
.stop-type--food { color: var(--accent); background: var(--tint); border-color: var(--tint); }
.stop-num--food { background: var(--accent); }

/* prose (guide sections, pages) */
.prose { max-width: 68ch; color: var(--ink-soft); }
.prose h2, .prose h3 { color: var(--ink); margin: 1.6em 0 .5em; }
.prose p { margin: 0 0 1em; }
.prose ul { padding-left: 1.2em; }
.verified { font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }

/* faq */
.faq-item { border-bottom: 1px solid var(--line); padding: 6px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; font-size: 18px; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; min-height: 48px; align-items: center; }
.faq-item summary::after { content: '+'; font-family: var(--mono); color: var(--muted); }
.faq-item[open] summary::after { content: '–'; }
.faq-item .answer { color: var(--ink-soft); padding-bottom: 18px; max-width: 68ch; }

/* bottom banners - cookie consent + PWA install (PRD §4.5, §3.6) */
.bottom-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80;
  max-width: 720px; margin-inline: auto;
  background: var(--ink); color: var(--paper); border-radius: 14px;
  padding: 16px 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.bottom-banner[hidden] { display: none; }
.bottom-banner p { font-size: 14.5px; line-height: 1.45; flex: 1; min-width: 220px; }
.bottom-banner a { text-decoration: underline; }
.banner-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.banner-actions .btn { min-height: 42px; padding: 10px 18px; font-size: 15px; }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--outline { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, .4); }
.btn--outline:hover { background: rgba(255, 255, 255, .12); transform: none; }
#pwa-ios-hint { font-size: 13.5px; color: rgba(255, 255, 255, .8); max-width: 24ch; }

/* select - pill dropdown with a custom chevron (native arrow is off-design) */
.select {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center;
  font: inherit; font-weight: 600; font-size: 16px; color: var(--ink);
  background-color: var(--white); border: 1px solid var(--accent); border-radius: 999px;
  min-height: 48px; padding: 10px 46px 10px 22px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2397386a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 12px 8px;
  transition: background-color .2s ease;
}
.select:hover { background-color: var(--tint); }
.select:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* contact form */
.form { display: grid; gap: 16px; max-width: 560px; margin-top: 30px; }
.form label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.form input[type="text"],
.form input[type="email"],
.form textarea {
  width: 100%; min-height: 48px; padding: 12px 16px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
}
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* newsletter form (footer) */
.fcol--news { max-width: 320px; }
.news-form { display: flex; gap: 8px; flex-wrap: wrap; }
.news-form input[type="email"] {
  flex: 1; min-width: 170px; min-height: 48px; padding: 10px 14px;
  font: inherit; font-size: 15px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
}
.news-form input[type="email"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.news-form .btn { font-size: 15px; padding: 10px 18px; }
.news-note { font-size: 12.5px; color: var(--muted); }
.news-ok { font-size: 14.5px; color: var(--accent); font-weight: 600; }
.news-err { font-size: 13px; color: #b3261e; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 56px 0 40px; }
.foot .frow { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot .fcol { display: flex; flex-direction: column; gap: 10px; }
.foot .fcol b { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.foot .fcol a { color: var(--ink-soft); font-size: 15px; }
.foot .fcol a:hover { color: var(--accent); }
.foot .fbottom { margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; }

/* responsive - mobile-first breakpoints from the mockup */
@media (max-width: 900px) {
  .nav nav { display: none; }
  .burger { display: flex; }
  .support-ribbon { right: max(16px, calc((100% - var(--maxw)) / 2 + 16px)); padding: 7px 12px; gap: 8px; }
  .support-ribbon span { font-size: 9px; }
  .support-ribbon img { height: 30px; }
  .support-ribbon--rst { padding: 9px 13px; gap: 10px; }
  .support-ribbon--rst span { font-size: 11px; }
  .support-ribbon__logos { gap: 8px; }
  .support-ribbon__logo { padding: 6px 9px; }
  .support-ribbon__logo img { height: 42px; max-width: 100px; }
  .cards, .route-grid, .list-grid { grid-template-columns: 1fr; }
  section { padding: 54px 0; }
  main > section:first-child:not(.hero) { padding-top: 100px; }
  .hero { padding-top: 24px; }
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-fade { height: clamp(300px, 70vw, 460px); order: -1; }
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .mosaic .m1 { grid-column: span 2; grid-row: span 1; }
  .mosaic .m2 { grid-column: span 2; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .nav .wrap { padding-inline: 16px; }
  .nav .row { gap: 10px; }
  .nav .right { gap: 10px; }
  .nav-cta { font-size: 13.5px; padding: 8px 13px; min-height: 38px; }
  .nav-cta .arr { display: none; } /* keep the pill on one line at phone width */
  .brand { font-size: 17px; gap: 8px; }
  .brand .mark { width: 28px; height: 28px; }
  /* stack the label over the logo pair so both partners fit at phone width */
  .support-ribbon--rst { flex-direction: column; align-items: flex-end; gap: 7px; padding: 8px 11px 11px; }
  .support-ribbon__logo img { height: 34px; max-width: 86px; }
}

/* turn-by-turn directions (street geometry from routes:fetch-geometry) */
.directions {
  list-style: none; margin: 30px 0 0; padding: 0;
  max-height: 440px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.directions li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 10px 18px; font-size: 14.5px; border-bottom: 1px solid var(--line);
}
.directions li:last-child { border-bottom: 0; }
.directions__dist { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.directions__stop { background: var(--tint); font-weight: 600; }
.directions__stop .stop-num { margin-right: 6px; }

/* device location: live "you are here" dot + locate-me control (all maps) */
.me-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #1c7ed6; border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(26, 24, 19, .45); position: relative;
}
.me-dot::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  background: rgba(28, 126, 214, .3); z-index: -1;
  animation: sbc-locate-pulse 2s ease-out infinite;
}
@keyframes sbc-locate-pulse {
  0% { transform: scale(.5); opacity: .8; }
  100% { transform: scale(2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .me-dot::before { animation: none; } }

.leaflet-bar a.sbc-locate { display: grid; place-items: center; color: var(--ink); }
.leaflet-bar a.sbc-locate svg { width: 18px; height: 18px; fill: currentColor; }
.leaflet-bar a.sbc-locate:hover { color: var(--accent); }
.leaflet-bar a.sbc-locate.is-busy { color: var(--accent); animation: sbc-locate-spin 1s linear infinite; }
@keyframes sbc-locate-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .leaflet-bar a.sbc-locate.is-busy { animation: none; } }

/* rule motions: one symbolic traffic-sign badge per rule (partials/rule-motion).
   Ported from the "Rules in Motion - Symbols" set; sized in container-query
   units so each badge fills its own square card rather than the viewport. */
.rule-row { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: start; margin-top: 34px; scroll-margin-top: 88px; }
.rule-row .prose { margin-top: 0; }

.rule-motion {
  margin: 0; position: sticky; top: 90px;
  aspect-ratio: 1; container-type: size;
  display: grid; place-items: center;
  background: var(--paper-2, #f1efe8); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  --danger: #c0492f;
}
/* compact badge for the landing-page essentials cards */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rule-motion--chip { position: static; width: 74px; border-radius: 14px; }
/* section accents (legal / signals / intersections / etiquette) */
.rule-motion.legal { --accent: #336aad; --tint: #e7eef6; }
.rule-motion.signals { --accent: #2f6a52; --tint: #e6efe9; }
.rule-motion.intersections { --accent: #be4f34; --tint: #f6e8e2; }
.rule-motion.etiquette { --accent: #8f3d68; --tint: #f1e6ec; }

.rule-motion .scene { position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }
.rule-motion .sign {
  position: relative; width: 72cqmin; height: 72cqmin; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent);
  animation: sym-breathe 5s ease-in-out infinite;
}
.rule-motion .sign svg { width: 58%; height: 58%; overflow: visible; display: block; }
.rule-motion .glyph { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.rule-motion .glyph-fill { fill: #fff; stroke: none; }
.rule-motion .bigchar { font-weight: 800; color: #fff; line-height: 1; font-size: 40cqmin; letter-spacing: -.02em; }

/* prohibition sign: white field, red ring, red slash, ink glyph */
.rule-motion .sign.no { background: var(--paper, #faf9f6); box-shadow: inset 0 0 0 6cqmin var(--danger); }
.rule-motion .sign.no .glyph { stroke: var(--ink); }
.rule-motion .sign.no .glyph-fill { fill: var(--ink); }
.rule-motion .sign.no .bigchar { color: var(--ink); }
.rule-motion .slash {
  position: absolute; left: 50%; top: 50%; width: 61cqmin; height: 6cqmin; border-radius: 3cqmin;
  background: var(--danger); transform: translate(-50%, -50%) rotate(-45deg); transform-origin: center;
}
/* advisory sign: soft tint field, slowly rotating dashed accent ring */
.rule-motion .sign.soft { background: var(--tint); }
.rule-motion .sign.soft .ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: sym-spin 24s linear infinite; }
.rule-motion .sign.soft .ring circle { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 6 6; }
.rule-motion .sign.soft .glyph { stroke: var(--accent); }
.rule-motion .sign.soft .glyph-fill { fill: var(--accent); }

/* gentle gestures - one per clip */
@keyframes sym-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes sym-nudge { 0%, 100% { transform: translateY(6%); } 50% { transform: translateY(-6%); } }
@keyframes sym-ring { 0%, 62%, 100% { transform: rotate(0deg); } 8% { transform: rotate(9deg); } 20% { transform: rotate(-8deg); } 32% { transform: rotate(5deg); } 44% { transform: rotate(-3deg); } 54% { transform: rotate(0deg); } }
@keyframes sym-glow { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes sym-arm { 0%, 16% { transform: rotate(0deg); } 40%, 60% { transform: rotate(-72deg); } 84%, 100% { transform: rotate(0deg); } }
@keyframes sym-slash { 0% { transform: translate(-50%, -50%) rotate(-45deg) scaleX(0); } 26%, 100% { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1); } }
@keyframes sym-draw { 0% { stroke-dashoffset: var(--len, 120); } 36%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: var(--len, 120); } }
@keyframes sym-flow { to { stroke-dashoffset: -30; } }
@keyframes sym-travelL { 0% { transform: translate(0, 30%); } 40% { transform: translate(0, -30%); } 60% { transform: translate(0, -30%); } 100% { transform: translate(-58%, -30%); } }
@keyframes sym-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sym-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7%); } }
@keyframes sym-step { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5%) rotate(2deg); } }
@keyframes sym-blink { 0%, 42%, 52%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.08); } }
@keyframes sym-tip { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes sym-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.rule-motion .g-nudge { animation: sym-nudge 3.4s ease-in-out infinite; }
.rule-motion .g-ring { animation: sym-ring 3.4s ease-in-out infinite; }
.rule-motion .g-sweep { animation: sym-sweep 8s linear infinite; transform-box: view-box; }
.rule-motion .g-glow { animation: sym-glow 2.8s ease-in-out infinite; }
.rule-motion .g-arm { animation: sym-arm 5s ease-in-out infinite; }
.rule-motion .g-draw { stroke-dasharray: var(--len, 120); animation: sym-draw 5s ease-in-out infinite; }
.rule-motion .g-flow { stroke-dasharray: 9 9; animation: sym-flow 1.4s linear infinite; }
.rule-motion .g-travel { transform-box: fill-box; transform-origin: center; animation: sym-travelL 5.5s ease-in-out infinite; }
.rule-motion .g-bob { transform-box: fill-box; transform-origin: center; animation: sym-bob 2.6s ease-in-out infinite; }
.rule-motion .g-step { transform-box: fill-box; transform-origin: bottom center; animation: sym-step 1.8s ease-in-out infinite; }
.rule-motion .g-blink { transform-box: fill-box; transform-origin: center; animation: sym-blink 4s ease-in-out infinite; }
.rule-motion .g-tip { transform-box: fill-box; transform-origin: bottom center; animation: sym-tip 4.5s ease-in-out infinite; }
.rule-motion .g-roll { transform-box: fill-box; transform-origin: center; animation: sym-roll 4s ease-in-out infinite; }
.rule-motion .slash.g-slash { animation: sym-slash 4.5s ease-in-out infinite; }
@keyframes sym-roll { 0%, 100% { transform: translateX(-4%); } 50% { transform: translateX(4%); } }

@media (max-width: 760px) {
  .rule-row { grid-template-columns: 1fr; gap: 14px; }
  .rule-motion { position: static; width: 96px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .rule-motion *, .rule-motion *::before, .rule-motion *::after { animation: none !important; }
}

/* ===== Fork & Spoke - the curated dining guide, in dark mode =====
   Flipping the palette vars on body.theme-dark recolours the whole page
   (header, footer and content) to a warm near-black with a brass accent. */
body.theme-dark {
  --paper: #15120e; --paper-2: #1e1a15; --paper-3: #272118; --white: #1e1a15;
  --ink: #f5f1e8; --ink-soft: #cdc4b4; --muted: #968c7a; --line: #3a3327;
  --accent: #c8a44d; --accent-deep: #e6c878; --accent-contrast: #15120e; --tint: #2a2215;
  background: #15120e; color: #f5f1e8;
}

.fs-hero { position: relative; padding: 92px 0 60px; background-size: cover; background-position: center; }
.fs-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,18,14,.66), rgba(21,18,14,.93)); }
.fs-hero .wrap { position: relative; }
.fs-hero h1 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(56px, 9vw, 104px); line-height: .92; letter-spacing: -.01em; margin: .1em 0 0; }
.fs-lede { max-width: 48ch; margin-top: 18px; color: var(--ink-soft); font-size: 19px; }
.fs-meta { margin-top: 20px; display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--muted); }

.fs-section { margin-top: 56px; }
.fs-section h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 33px; }
.fs-rule { height: 1px; background: var(--line); margin: 14px 0 26px; }

.fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.fs-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s ease, transform .15s ease; }
.fs-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.fs-img { height: 178px; background: var(--paper-3); }
.fs-img img { width: 100%; height: 100%; object-fit: cover; }
.fs-body { padding: 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.fs-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fs-type { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.fs-card h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.04; }
.fs-card p { color: var(--ink-soft); font-size: 15.5px; }
.fs-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.fs-bike { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 13px; }
.fs-bike svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
.fs-link { color: var(--accent); font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }

.fs-spokes { display: inline-flex; gap: 4px; color: var(--accent); }
.fs-spokes svg { width: 15px; height: 15px; display: block; }

.fs-empty { margin: 40px 0 20px; padding: 52px 28px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-lg); color: var(--ink-soft); }
.fs-empty h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 30px; color: var(--ink); margin-bottom: 8px; }

/* Tour de Table - "subscribe to new spots" block (dark theme) */
.fs-subscribe { margin: 64px 0 8px; }
.fs-sub { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px 34px; }
.fs-sub-copy { max-width: 46ch; }
.fs-sub-copy h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 32px; margin: .1em 0 8px; }
.fs-sub-copy p { color: var(--ink-soft); font-size: 16px; }
.fs-sub-action { flex: 1; min-width: 280px; }
.fs-sub-form { display: flex; gap: 8px; flex-wrap: wrap; }
.fs-sub-form input[type="email"] { flex: 1; min-width: 200px; min-height: 50px; padding: 12px 16px; font: inherit; font-size: 16px;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; }
.fs-sub-form input[type="email"]::placeholder { color: var(--muted); }
.fs-sub-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fs-sub-ok { color: var(--accent); font-size: 16px; }
.fs-sub-err { color: #e2887a; font-size: 14px; margin-top: 8px; }

/* Tour de Table - filter controls + map toggle (dark theme) */
.fs-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.fs-select {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); cursor: pointer;
  padding: 9px 32px 9px 14px; border-radius: 999px; border: 1px solid var(--line); background-color: transparent;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23968c7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color .15s ease, color .15s ease;
}
.fs-select:hover { border-color: var(--accent); color: var(--ink); }
.fs-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fs-select option { background: var(--paper-2); color: var(--ink); }
.fs-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12.5px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.fs-pill:hover { border-color: var(--accent); color: var(--ink); }
.fs-maptoggle { margin-left: auto; }
.fs-noresults { color: var(--ink-soft); margin-top: 34px; }
.fs-section[hidden], .fs-card[hidden] { display: none; }

/* Tour de Table teaser on the (light) landing page - dark/brass, no imagery */
.tdt-teaser { background: #15120e; color: #f5f1e8; border-radius: 28px; padding: clamp(28px, 4vw, 56px); }
.tdt-teaser .eyebrow { color: #c8a44d; }
.tdt-teaser h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5.5vw, 58px); margin-top: 10px; color: #f5f1e8; }
.tdt-teaser .lede { color: rgba(245, 241, 232, .8); max-width: 52ch; margin-top: 14px; font-size: 18px; }
.tdt-teaser .btn { background: #c8a44d; color: #15120e; border-color: #c8a44d; margin-top: 30px; }
.tdt-teaser .partner-badge { color: #c8a44d; }
.tdt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.tdt-card { border: 1px solid rgba(245, 241, 232, .16); border-radius: var(--r-lg); background: rgba(245, 241, 232, .03); padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s ease, transform .15s ease; }
.tdt-card:hover { border-color: #c8a44d; transform: translateY(-2px); }
.tdt-card .tdt-type { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: #c8a44d; }
.tdt-card h3 { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.05; }
.tdt-card p { color: rgba(245, 241, 232, .72); font-size: 14.5px; }
.tdt-card .tdt-meta { display: flex; align-items: center; gap: 16px; font-family: var(--mono); font-size: 12px; color: rgba(245, 241, 232, .6); margin-top: auto; padding-top: 6px; }
.tdt-card .tdt-spokes { display: inline-flex; gap: 3px; color: #c8a44d; }
.tdt-card .tdt-spokes svg { width: 13px; height: 13px; display: block; }

/* Tour de Table map - card click slides it out, plus a clickable cursor */
.fs-card[data-key] { cursor: pointer; }
#tdt-map.tdt-map--slide { animation: tdt-map-slide .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes tdt-map-slide { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #tdt-map.tdt-map--slide { animation: none; } }

/* Dark map call-outs on the dark theme (Tour de Table) */
body.theme-dark .leaflet-popup-content-wrapper { background: var(--paper-2); border-color: var(--line); }
body.theme-dark .leaflet-popup-content { color: var(--ink); }
body.theme-dark .leaflet-popup-tip { background: var(--paper-2); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
body.theme-dark .leaflet-popup-close-button { color: var(--muted); }
body.theme-dark .leaflet-popup-close-button:hover { color: var(--ink); }

/* "Use my location" opt-in button, rendered beneath a map */
.map-locate-cta { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.map-locate-cta svg { width: 16px; height: 16px; fill: currentColor; }
.map-locate-cta.is-busy { opacity: .6; pointer-events: none; }

/* Stack the teaser cards on mobile. Must follow the .tdt-grid base rule above so
   it wins on source order (media queries carry no extra specificity). */
@media (max-width: 900px) {
  .tdt-grid { grid-template-columns: 1fr; }
}

/* Scrollbar cyclist - a small bike that rides down the scrollbar as you scroll.
   Hidden by default; only shown on pointer-fine, wide viewports that actually
   have a scrollbar track. JS drives its vertical position via translateY. */
#scroll-bike {
  display: block; position: fixed; top: 0; right: 0; z-index: 50;
  width: 30px; height: 20px; pointer-events: none; /* small by default (mobile) */
  transition: opacity .3s ease; will-change: transform;
}
#scroll-bike.is-hidden { opacity: 0; }
.sb-cycle { display: block; width: 100%; height: 100%; transform: rotate(-90deg) scaleX(-1); overflow: visible; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.sb-tire { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.sb-frame { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sb-spokes { fill: none; stroke: var(--accent); stroke-width: .7; opacity: .65; }
.sb-hub { fill: var(--accent); }
.sb-whl { transform-box: fill-box; transform-origin: center; animation: sb-roll 2s linear infinite; }
#scroll-bike.is-riding .sb-whl { animation-duration: .5s; } /* spin up while scrolling */
@keyframes sb-roll { to { transform: rotate(360deg); } }

@media (min-width: 1024px) {
  #scroll-bike { width: 45px; height: 30px; } /* larger on desktop */
}
@media (prefers-reduced-motion: reduce) {
  .sb-whl { animation: none; }
}

/* ============================================================
   Cycling knowledge quiz (/quiz) + home-page teaser
   ============================================================ */
.quiz { padding: 52px 0 84px; }
.quiz-wrap { max-width: 760px; }
/* Honour the hidden attribute even on elements whose class sets a display
   (the .btn next/share buttons and the inline-block .quiz-last pill). */
.quiz [hidden] { display: none !important; }
.quiz-screen { animation: quiz-in .35s ease; }
@keyframes quiz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Intro */
.quiz-title { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; font-size: clamp(38px, 6.6vw, 70px); line-height: 1; margin-top: 16px; }
.quiz-title em { font-style: italic; }
.quiz-lede { margin-top: 22px; color: var(--ink-soft); font-size: clamp(17px, 2.4vw, 20px); max-width: 52ch; }
.quiz-last { margin-top: 20px; background: var(--tint); color: var(--ink); display: inline-block; padding: 9px 16px; border-radius: 999px; font-size: 15px; }
.quiz-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.quiz-actions--end { margin-top: 38px; }

/* Progress (with the little cyclist riding the bar) */
.quiz-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.quiz-count { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.quiz-prog { position: relative; flex: 1; height: 22px; display: flex; align-items: flex-end; }
.quiz-track { width: 100%; height: 6px; background: var(--paper-3); border-radius: 999px; overflow: hidden; }
.quiz-fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .45s ease; }
.quiz-track--lg { height: 10px; margin-top: 22px; }
.quiz-rider { position: absolute; left: 0; bottom: 1px; width: 30px; height: 20px; transition: left .45s ease; }
.quiz-bike { display: block; width: 30px; height: 20px; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12)); }

/* Question + options */
.quiz-q-img { width: 100%; height: clamp(140px, 26vw, 220px); object-fit: cover; border-radius: var(--r); margin-bottom: 24px; }
.quiz-q { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; font-size: clamp(26px, 4.4vw, 40px); line-height: 1.1; }
.quiz-options { display: grid; gap: 12px; margin-top: 26px; }
.quiz-option {
  text-align: left; font-family: var(--sans); font-size: 17px; color: var(--ink); width: 100%;
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r);
  padding: 15px 18px; min-height: 56px; cursor: pointer; line-height: 1.4;
  display: flex; align-items: center; gap: 13px;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.quiz-option::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; transition: inherit; }
.quiz-option:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.quiz-option:hover:not(:disabled)::before { border-color: var(--accent); }
.quiz-option:disabled { cursor: default; }
.quiz-option.is-correct { border-color: #2f6a52; background: #e6efe9; color: #1d3f30; }
.quiz-option.is-correct::before { border-color: #2f6a52; background: #2f6a52; }
.quiz-option.is-wrong { border-color: #be4f34; background: #f6e8e2; color: #5a2417; }
.quiz-option.is-wrong::before { border-color: #be4f34; background: #be4f34; }
.quiz-explain { margin-top: 22px; padding: 16px 18px; background: var(--paper-2); border-radius: var(--r); color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
.quiz-explain strong { color: var(--ink); }
.quiz-explain a { color: var(--accent); text-decoration: underline; white-space: nowrap; }
.quiz-nav { margin-top: 24px; }

/* Result */
.quiz-scorecard { display: flex; align-items: center; gap: 26px; margin-top: 8px; flex-wrap: wrap; }
.quiz-score { font-family: var(--serif); line-height: 1; display: flex; align-items: baseline; }
.quiz-score-num { font-size: clamp(64px, 13vw, 112px); color: var(--accent); }
.quiz-score-max { font-size: clamp(20px, 4vw, 30px); color: var(--muted); margin-left: 4px; }
.quiz-scoremeta { flex: 1; min-width: 230px; }
.quiz-tier { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 4.6vw, 40px); line-height: 1.05; }
.quiz-tier-blurb { margin-top: 10px; color: var(--ink-soft); font-size: 17px; }
.quiz-recos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.quiz-reco { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.quiz-reco p:last-child { margin-top: 10px; color: var(--ink-soft); font-size: 16px; }
.quiz-study { margin-top: 26px; padding: 20px 22px; background: var(--tint); border-radius: var(--r-lg); }
.quiz-study > p { font-weight: 600; }
.quiz-study .quiz-actions { margin-top: 14px; }
.quiz-routes-block { margin-top: 40px; }
.quiz-routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.quiz-route { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s ease, transform .15s ease; }
.quiz-route:hover { border-color: var(--accent); transform: translateY(-2px); }
.quiz-route-img { width: 100%; height: 132px; object-fit: cover; }
.quiz-route-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.quiz-route-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.quiz-route-name { font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.quiz-route-tag { color: var(--ink-soft); font-size: 15px; }
.quiz-route-meta { color: var(--muted); font-size: 12.5px; font-family: var(--mono); letter-spacing: .02em; margin-top: 4px; }

/* Difficulty pills (reused on route cards) */
.pill { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--paper-3); color: var(--ink-soft); white-space: nowrap; }
.pill--easy { background: #e6efe9; color: #2f6a52; }
.pill--moderate { background: #f3ecdd; color: #8a6324; }
.pill--hard { background: #f6e8e2; color: #be4f34; }

/* Home-page teaser band */
.quiz-teaser-sec { padding: 26px 0 6px; }
.quiz-teaser { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; background: var(--accent-deep); color: var(--paper); border-radius: var(--r-lg); padding: 34px 40px; }
.quiz-teaser .eyebrow { color: #d8a6c0; }
.quiz-teaser-h { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; font-size: clamp(26px, 3.7vw, 38px); line-height: 1.06; margin-top: 8px; max-width: 24ch; }
.quiz-teaser-p { margin-top: 12px; color: rgba(255, 255, 255, .82); font-size: 16px; max-width: 50ch; }
.quiz-teaser-cta .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.quiz-teaser-cta .btn:hover { background: #fff; }

@media (max-width: 760px) {
  .quiz { padding: 36px 0 64px; }
  .quiz-recos, .quiz-routes { grid-template-columns: 1fr; }
  .quiz-scorecard { gap: 14px; }
  .quiz-teaser { padding: 28px 24px; }
  .quiz-teaser-cta, .quiz-teaser-cta .btn { width: 100%; justify-content: center; }
}

/* Recommendation partner landing pages (/recommended-by/*) */
.partner-head { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.partner-head__logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 26px; transition: border-color .15s ease, box-shadow .15s ease; }
.partner-head__logo:hover { border-color: var(--accent); box-shadow: 0 6px 22px rgba(26, 24, 19, .08); }
.partner-head__logo img { height: 92px; width: auto; max-width: 210px; object-fit: contain; }
.partner-head .sec-head { flex: 1 1 380px; }

/* Cards whose heading is an outbound link to a partner's own page */
.card--ext h3 a { color: inherit; text-decoration: none; }
.card--ext h3 a:hover { color: var(--accent); text-decoration: underline; }
.card--ext p a { color: var(--accent); }

.partner-card__logo { display: flex; align-items: center; justify-content: flex-start; }
.partner-card__logo img { height: 54px; width: auto; max-width: 170px; object-fit: contain; }

@media (max-width: 760px) {
  .partner-head { gap: 22px; }
  .partner-head__logo { padding: 16px 18px; }
  .partner-head__logo img { height: 64px; max-width: 160px; }
}

/* Keyword kicker under an H1 whose main text comes from the database */
.h1-kw { display: block; margin-top: 10px; font-family: var(--mono); font-size: clamp(11px, 1.5vw, 13px); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

/* Copenhagen Bicycles safety films - click-to-load player with flag switcher */
.sv-sec { padding-top: 54px; }
.sv { margin-top: 34px; }
.sv-stage { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); aspect-ratio: 16 / 9; }
.sv-facade { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
/* the class sets display, so [hidden] needs its own rule to win */
.sv-facade[hidden] { display: none; }
.sv-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-facade::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 24, 19, 0) 45%, rgba(26, 24, 19, .35)); opacity: 0; transition: opacity .2s ease; }
.sv-facade:hover::after, .sv-facade:focus-visible::after { opacity: 1; }
.sv-play { position: absolute; inset: 0; margin: auto; width: 82px; height: 82px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: #fff; box-shadow: 0 10px 30px rgba(26, 24, 19, .3); transition: transform .18s ease, background .18s ease; }
.sv-play svg { width: 38px; height: 38px; margin-left: 3px; }
.sv-facade:hover .sv-play, .sv-facade:focus-visible .sv-play { transform: scale(1.06); background: var(--accent-deep); }
.sv-badge { position: absolute; left: 16px; bottom: 16px; z-index: 1; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(26, 24, 19, .66); padding: 6px 11px; border-radius: 999px; }
.sv-player, .sv-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.sv-flags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sv-flag { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: inherit; font-size: 14.5px; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.sv-flag:hover { border-color: var(--accent); transform: translateY(-1px); }
.sv-flag.is-active { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.sv-flag__emoji { font-size: 21px; line-height: 1; }
.sv-note { margin-top: 16px; color: var(--muted); font-size: 14px; max-width: 62ch; }

.sv-credit { margin-top: 26px; padding: 20px 24px; border-radius: var(--r-lg); background: var(--tint); font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.sv-credit a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.sv-credit span { display: block; margin-top: 8px; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--ink-soft); }
.sv-more { margin-top: 18px; }

body.theme-dark .sv-flag { background: var(--paper-2); }
body.theme-dark .sv-credit { background: var(--paper-2); }

@media (max-width: 560px) {
  .sv-play { width: 62px; height: 62px; }
  .sv-play svg { width: 28px; height: 28px; }
  .sv-flag { padding: 8px 12px; font-size: 13.5px; }
  .sv-flag__emoji { font-size: 18px; }
  .sv-credit { font-size: 18px; padding: 18px 20px; }
}

/* ---------- Per-language landing pages + footer language picker ---------- */

/* The guide in 18 languages. Full-width row of its own inside .frow so the
   translated page titles have room. Four columns filled top-to-bottom rather
   than left-to-right, so the reading order down each column matches the order
   in config/landing.php: --lang-rows comes from the layout and is the language
   count over four.

   At a quarter of the footer width a 50-character translated title will not fit
   on one line, so titles wrap rather than truncate - losing half a title to an
   ellipsis is worse than letting it run to a second line. */
.fcol--langs { flex: 1 0 100%; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.foot .fcol--langs .langgrid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--lang-rows, 5), auto); grid-auto-columns: minmax(0, 1fr); gap: 12px clamp(18px, 2vw, 32px); margin-top: 6px; }
.foot .fcol--langs .langgrid a { display: flex; align-items: baseline; gap: 9px; font-size: 13.5px; line-height: 1.35; min-width: 0; }
.foot .fcol--langs .langgrid a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.langgrid__flag { font-size: 15px; line-height: 1; flex: none; }
.langgrid__title { min-width: 0; }

/* Brand block is the last child of .frow, so it wraps onto its own line. */
.fcol--brand { flex: 1 0 100%; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); gap: 14px; }
.fcol--brand p { max-width: 46ch; color: var(--ink-soft); font-size: 15px; }

/* "Most of this site is in English" notice on the translated landing pages. */
.oslang { margin-top: 34px; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-lg); background: var(--tint); border: 1px solid var(--line); }
.oslang h2 { font-size: clamp(21px, 2.8vw, 26px); letter-spacing: -.01em; }
.oslang p { margin-top: 12px; color: var(--ink-soft); font-size: 16px; max-width: 68ch; }
.oslang__hints { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.oslang__hints li { display: flex; gap: 10px; align-items: baseline; color: var(--ink-soft); font-size: 15.5px; }
.oslang__hints b { flex: none; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); min-width: 74px; padding-top: 2px; }

body.theme-dark .oslang { background: var(--paper-2); }

/* Right-to-left (Arabic, Hebrew). The layout is flex/grid throughout, so only
   these few physical properties need mirroring. */
[dir="rtl"] .prose { margin-left: auto; margin-right: 0; }
[dir="rtl"] .prose ul { padding-left: 0; padding-right: 1.2em; }
[dir="rtl"] .brand .sub { margin-left: 0; margin-right: -4px; }
[dir="rtl"] .oslang__hints li { text-align: right; }
[dir="rtl"] .arr { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .card .num { direction: ltr; text-align: right; }

/* Arabic is cursive: letter-spacing pulls the joined letterforms apart and the
   text stops reading as words. These are the tracked, uppercased labels that
   now carry translated copy, so the tracking has to come off for RTL. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .h1-kw,
[dir="rtl"] .verified,
[dir="rtl"] .oslang__hints b { letter-spacing: 0; }

@media (max-width: 1099px) {
  /* Two columns, filled row-wise once the column-wise row count no longer applies. */
  .foot .fcol--langs .langgrid { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  /* One list on narrow screens - the long titles need the whole width. */
  .foot .fcol--langs .langgrid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .foot .fcol--langs .langgrid a { font-size: 14px; }
  .oslang__hints b { min-width: 0; }
}

/* Flag ahead of the language name in the H1 kicker on a translated landing
   page. Slightly larger than the kicker's tracked mono type so the flag stays
   legible, and mirrored for Arabic/Hebrew. */
.h1-kw__flag { font-size: 15px; line-height: 1; margin-right: 8px; letter-spacing: 0; vertical-align: -1px; }
[dir="rtl"] .h1-kw__flag { margin-right: 0; margin-left: 8px; }

/* ---------- Slim language strip (partials/language-flags) ---------- */

/* Sits directly under a hero and runs the full width of the viewport, no .wrap.
   Deliberately quiet: no rules or background, greyscale flags, and colour only
   on hover or for the page you are already on.

   A centred wrapping flex row, not a grid. The partial injects .langbar__break
   after the tenth language, which splits the 18 into rows of 10 and 8 while
   letting each row centre independently - a grid would pin the shorter row
   under the first columns instead. Below 1200px the break is dropped and the
   languages simply wrap and centre on their own. */
.langbar .langbar__list {
  list-style: none; margin: 0;
  padding: 16px clamp(16px, 3vw, 40px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px clamp(14px, 1.6vw, 30px);
}
.langbar__break { flex: 0 0 100%; height: 0; margin: 0; padding: 0; }
.langbar__item { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.2; }
.langbar__flag { flex: none; font-size: 17px; line-height: 1; filter: grayscale(1); opacity: .7; transition: filter .15s ease, opacity .15s ease; }
.langbar__name { white-space: nowrap; transition: color .15s ease; }

.langbar__item:hover .langbar__flag,
.langbar__item:focus-visible .langbar__flag { filter: grayscale(0); opacity: 1; }
.langbar__item:hover .langbar__name,
.langbar__item:focus-visible .langbar__name { color: var(--accent); }

/* The language you are already reading is shown as if hovered. */
.langbar__item[aria-current="page"] .langbar__flag { filter: grayscale(0); opacity: 1; }
.langbar__item[aria-current="page"] .langbar__name { color: var(--accent); font-weight: 600; }

@media (max-width: 1199px) {
  /* Let the languages find their own rows rather than forcing 10 onto one. */
  .langbar__break { display: none; }
  .langbar .langbar__list { gap: 12px clamp(12px, 1.4vw, 22px); }
}

@media (max-width: 480px) {
  .langbar .langbar__list { gap: 11px 14px; padding: 14px 16px; }
  .langbar__item { font-size: 13.5px; }
  .langbar__flag { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .langbar__flag, .langbar__name { transition: none; }
}