/* Club Camping — the one global stylesheet ("soft depth").
   No inline styles anywhere. Mobile-first. Components use the cc- prefix; the admin style guide
   (/style-guide/) shows every one of them. Tokens live in the FIRST :root block (the style guide
   reads them from there); larger-screen depth values are overridden further down. */

/* ==== Tokens ============================================================= */
:root {
  /* Colour */
  --cc-bg: #EDF0F3; /* page background and raised surfaces (soft cool grey, option B) */
  --cc-bg-pressed: #E3E6E8; /* pressed secondary buttons and chips; ink 12.57:1 */
  --cc-edge: #D5D9DC; /* 1px card edge; decorative (1.24:1), shape mainly from depth */
  --cc-edge-strong: #7F8386; /* 1px form-control boundary; 3.34:1 for WCAG 1.4.11 */
  --cc-ink: #1F2421; /* body text and headings */
  --cc-ink-muted: #5B635E; /* secondary text */
  --cc-lime: #84CC16; /* backgrounds only, always with --cc-ink text */
  --cc-lime-pressed: #7ABD14; /* pressed primary button; ink 6.84:1 */
  --cc-lime-deep: #3F6A0B; /* links, focus rings, lime text on the background */
  --cc-lime-tint: #D3E7BC; /* confirmed fact pills, chip hover (25% lime on --cc-bg); ink 11.95:1 */
  --cc-white: #FFFFFF; /* highlight shadows and the occasional bright panel */
  --cc-tabbar-radius: var(--cc-radius-lg); /* outer corner of the floating tab bar */
  --cc-tabbar-border: 1px; /* tab bar edge */
  --cc-tabbar-inset: 0.5rem; /* equal gap from the bar's inner edge to the pill: top, bottom, outer sides */
  --cc-tabbar-pill-radius: calc(var(--cc-tabbar-radius) - var(--cc-tabbar-border) - var(--cc-tabbar-inset)); /* concentric */
  --cc-tabbar-ring-offset: 2px; /* focus ring outside the pill, still inside the inset */
  --cc-tabbar-height: calc(3.5rem + 2 * var(--cc-tabbar-inset) + 2 * var(--cc-tabbar-border)); /* 74px, excluding safe area */
  --cc-success: #2D6A1F; /* 5.75:1 on --cc-bg */
  --cc-warning: #8A5300; /* 5.53:1 on --cc-bg */
  --cc-danger: #B3261E; /* 5.71:1 on --cc-bg */
  --cc-info: #1F5FA8; /* 5.63:1 on --cc-bg */
  --cc-surface-dark: #262B30; /* header and footer panels (switch site-look) */
  --cc-on-dark: #EDF0F3; /* text on --cc-surface-dark; 12.48:1 */
  --cc-on-dark-muted: #B9C0C7; /* secondary text on --cc-surface-dark; 7.77:1 (lime accents there: 7.23:1) */

  /* Depth (Dave 2026-10-26): depth signals interactivity. Only clickable things are raised (buttons, whole-card links,
     tiles, chips, tabs, search fields on light surfaces, "Show map", FAQ toggles); everything informational is flat, with a tint or
     a 1px hairline and never a shadow. No raised element inside a raised one. These are the site's only two shadows. */
  --cc-shadow-raised: -5px -5px 12px #FFFFFF, 5px 5px 12px rgba(31, 36, 33, 0.22); /* clickable, at rest and on hover */
  --cc-shadow-pressed: inset 3px 3px 7px rgba(31, 36, 33, 0.24), inset -3px -3px 7px rgba(255, 255, 255, 0.7); /* pressed, selected, current */
  --cc-surface-tint: #E6EAEE; /* flat informational surfaces; ink 13.03:1, muted 5.12:1, links 5.30:1 */

  /* Type */
  --cc-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cc-weight-regular: 400;
  --cc-weight-medium: 500;
  --cc-weight-semibold: 600;
  --cc-weight-bold: 700;
  /* Type scale (Dave 2026-10-26: calmer, phone -> desktop) */
  --cc-text-small: 0.8125rem; /* 13px: meta, captions, sources, footer, stat labels */
  --cc-text-body: 1rem; /* 16px body */
  --cc-text-h6: 0.9375rem; /* 15px */
  --cc-text-h5: 1rem; /* 16px */
  --cc-text-h4: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16px -> 17px: component titles */
  --cc-text-h3: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16px -> 17px: h3 and card titles */
  --cc-text-h2: clamp(1.375rem, 1.26rem + 0.5vw, 1.625rem); /* 22px -> 26px */
  --cc-text-h1: clamp(1.75rem, 1.55rem + 0.85vw, 2.25rem); /* 28px -> 36px */
  --cc-text-eyebrow: 0.6875rem; /* 11px: uppercase labels (COUNTRY, NATIONAL PARK), letter-spacing 0.06em */
  --cc-text-nav: 0.9375rem; /* 15px: header links and header search */
  --cc-text-stat: 1.25rem; /* 20px: numbers in the stats strip */
  --cc-text-logo: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem); /* wordmark, unchanged */
  --cc-leading: 1.6;
  --cc-leading-tight: 1.15; /* h1-h2 */
  --cc-leading-snug: 1.3; /* h3-h6, small text */

  /* Space */
  --cc-space-1: 0.25rem;
  --cc-space-2: 0.5rem;
  --cc-space-3: 0.75rem;
  --cc-space-4: 1rem;
  --cc-space-5: 1.5rem;
  --cc-space-6: 2rem;
  --cc-space-7: 3rem;
  --cc-space-8: 4.5rem;
  --cc-flow: calc(var(--cc-space-5) * 0.75); /* space between blocks in a stack (18px; was 24px) */
  --cc-heading-above: calc(var(--cc-space-6) * 0.75); /* headings: clearly more space above (24px) ... */
  --cc-heading-below: calc(var(--cc-space-3) * 0.75); /* ... than below (9px) */

  /* Radii (generous, soft corners) */
  --cc-radius-sm: 0.75rem;
  --cc-radius: 1.25rem;
  --cc-radius-lg: 1.75rem;
  --cc-radius-pill: 999px;

  /* Motion */
  --cc-dur-fast: 120ms;
  --cc-dur: 200ms;
  --cc-dur-slow: 420ms;
  --cc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --cc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout and focus */
  --cc-wide: 75rem; /* 1200px: listings, maps, grids */
  --cc-map-section-max-h: 440px; /* campsite Map section map, from 64rem (full width, height capped) */
  --cc-measure: 70ch; /* running text */
  --cc-gutter: clamp(1rem, 4vw, 2rem);
  --cc-focus-width: 3px;
  --cc-focus-offset: 3px;
  --cc-tap-target: 2.75rem; /* smallest tap area (44 px); small controls get it invisibly via ::before */
}

@media (min-width: 48rem) {
  :root {
    --cc-shadow-raised: -7px -7px 16px #FFFFFF, 7px 7px 16px rgba(31, 36, 33, 0.2);
  }
}

/* ==== Fonts (Poppins 5.3.0 via Fontsource, OFL-1.1, self-hosted) ======== */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==== Base =============================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cc-bg);
  color: var(--cc-ink);
  font-family: var(--cc-font);
  font-size: var(--cc-text-body);
  font-weight: var(--cc-weight-regular);
  line-height: var(--cc-leading);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 { margin: var(--cc-heading-above) 0 var(--cc-heading-below); color: var(--cc-ink); line-height: var(--cc-leading-tight); font-weight: var(--cc-weight-semibold); }
:is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
h3, h4, h5, h6 { line-height: var(--cc-leading-snug); }
h1 { font-size: var(--cc-text-h1); font-weight: var(--cc-weight-semibold); letter-spacing: -0.02em; }
h2 { font-size: var(--cc-text-h2); letter-spacing: -0.015em; }
h3 { font-size: var(--cc-text-h3); }
h4 { font-size: var(--cc-text-h4); }
h5 { font-size: var(--cc-text-h5); }
h6 { font-size: var(--cc-text-h6); }
p { margin: 0 0 var(--cc-space-4); }
small, .cc-small { font-size: var(--cc-text-small); line-height: 1.5; }
code { font-size: 0.875em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Links are never soft: always underlined lime-deep text */
a { color: var(--cc-lime-deep); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { color: var(--cc-ink); text-decoration-thickness: 0.14em; }

/* One visible focus ring for everything interactive; outlines are not affected by shadows */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--cc-focus-width) solid var(--cc-lime-deep);
  outline-offset: var(--cc-focus-offset);
}

.cc-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.cc-skip { position: absolute; left: var(--cc-space-4); top: -10rem; z-index: 10; padding: var(--cc-space-3) var(--cc-space-4); background: var(--cc-lime); color: var(--cc-ink); border-radius: var(--cc-radius-sm); font-weight: var(--cc-weight-semibold); }
.cc-skip:focus { top: var(--cc-space-4); }

/* ==== Layout ============================================================= */
.cc-container { width: 100%; max-width: var(--cc-wide); margin-inline: auto; padding-inline: var(--cc-gutter); }
.cc-measure { max-width: var(--cc-measure); }
/* (0,2,0) so component resets like .cc-disclosure { margin: 0 } can't collapse the rhythm */
.cc-stack > :not(:first-child) { margin-top: var(--cc-flow); }
.cc-stack > :is(h2, h3, h4):not(:first-child) { margin-top: var(--cc-heading-above); }
/* the block right after a heading sits close to it: (0,2,1) beats the generic flow rule */
.cc-stack > :is(h2, h3, h4) + :not(:first-child) { margin-top: var(--cc-heading-below); }

.cc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--cc-space-4); }
.cc-grid > * { grid-column: span 12; }
.cc-span-1 { grid-column: span 1; }
@media (min-width: 48rem) {
  .cc-grid { gap: var(--cc-space-5); }
  .cc-span-md-3 { grid-column: span 3; }
  .cc-span-md-4 { grid-column: span 4; }
  .cc-span-md-6 { grid-column: span 6; }
  .cc-span-md-8 { grid-column: span 8; }
}
/* Feature grids: 2 columns on mobile, 4 from tablet */
.cc-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cc-space-4); padding: 0; margin: 0; list-style: none; }
@media (min-width: 48rem) { .cc-features { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cc-space-5); } }
.cc-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cc-space-5); }
@media (min-width: 40rem) { .cc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cc-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==== Surfaces ============================================================ */
/* .cc-raised and .cc-inset are older panel names: panels are informational, so both are flat now (depth rule) */
.cc-raised, .cc-inset { background: var(--cc-surface-tint); border-radius: var(--cc-radius); }
.cc-flat { background: var(--cc-bg); border: 1px solid var(--cc-edge); border-radius: var(--cc-radius); }
.cc-panel { padding: var(--cc-space-5); }
.cc-panel--white { background: var(--cc-white); }

/* ==== Header, nav, footer ================================================ */
.cc-header { position: relative; margin: var(--cc-space-4) 0; padding: var(--cc-space-3) var(--cc-space-4); background: var(--cc-bg); border: 1px solid var(--cc-edge); border-radius: var(--cc-radius-lg); }
.cc-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--cc-space-4); }
.cc-logo { position: relative; color: var(--cc-ink); font-size: var(--cc-text-logo); font-weight: var(--cc-weight-bold); letter-spacing: -0.02em; text-decoration: none; }
/* Invisible tap area (Dave 2026-11-03): the wordmark keeps its size; ::before makes it 44 px tall to a finger. */
.cc-logo::before { content: ""; position: absolute; inset: 50% 0 auto; height: var(--cc-tap-target); transform: translateY(-50%); }
.cc-logo:hover { color: var(--cc-ink); }
.cc-logo__mark { display: inline-block; width: 0.75em; height: 0.75em; margin-right: 0.4em; border-radius: 50%; background: var(--cc-lime); vertical-align: -0.05em; }
.cc-nav__list { display: flex; flex-direction: column; gap: var(--cc-space-1); margin: var(--cc-space-3) 0 0; padding: 0; list-style: none; }
.cc-header[data-menu="closed"] .cc-nav__list { display: none; }
/* Phones and tablets with JavaScript: the list starts hidden (the tab bar's Menu opens it), so it cannot collapse
   after the first paint and move the page (CLS 0.23 seen on slow phones). Without JavaScript it stays visible. */
@media (scripting: enabled) and (max-width: 63.99rem) {
  .cc-header:has(.cc-tabbar) .cc-nav__list { display: none; }
  .cc-header[data-menu="open"]:has(.cc-tabbar) .cc-nav__list { display: flex; }
}
/* Every state has the same box: same padding, line-height, 1px (transparent) border and weight 500. State shows only
   through shadows and an absolutely positioned underline, which never change the item's size or position. */
.cc-nav__link { position: relative; display: block; padding: var(--cc-space-3) var(--cc-space-4); border: 1px solid transparent; border-radius: var(--cc-radius-sm); color: var(--cc-ink); font-size: var(--cc-text-nav); font-weight: var(--cc-weight-medium); line-height: 1.5; text-decoration: none; }
.cc-nav__link:hover { color: var(--cc-ink); box-shadow: var(--cc-shadow-raised); }
.cc-nav__link[aria-current="page"] { box-shadow: var(--cc-shadow-pressed); font-weight: var(--cc-weight-medium); }
.cc-nav__link[aria-current="page"]::after { content: ""; position: absolute; left: var(--cc-space-4); right: var(--cc-space-4); bottom: 0.3rem; height: 3px; border-radius: var(--cc-radius-pill); background: var(--cc-lime-deep); }
/* Below 1024px the header shows the logo only; the tab bar (inside the same nav) is the navigation and its
   Menu tab opens the link list as a raised panel just above the bar, concentric with it. */
@media (max-width: 63.99rem) {
  .cc-header[data-menu="open"] .cc-nav__list {
    position: fixed; z-index: 41; inset-inline: var(--cc-space-3); bottom: calc(var(--cc-tabbar-height) + 2 * var(--cc-space-3) + env(safe-area-inset-bottom));
    max-width: 35rem; max-height: 60vh; margin: 0 auto; padding: var(--cc-tabbar-inset); overflow-y: auto;
    background: var(--cc-bg); border: var(--cc-tabbar-border) solid var(--cc-edge); border-radius: var(--cc-tabbar-radius); border-color: var(--cc-edge-strong);
  }
  .cc-header[data-menu="open"] .cc-nav__link { border-radius: var(--cc-tabbar-pill-radius); }
}
/* From 1024px the link list sits inline in the header (the tab bar is hidden) */
@media (min-width: 64rem) {
  .cc-header { display: flex; align-items: center; justify-content: space-between; }
  .cc-header[data-menu] .cc-nav__list, .cc-nav__list { display: flex; flex-direction: row; margin: 0; }
}

.cc-footer { margin-top: var(--cc-space-7); padding: var(--cc-space-6) 0; border-top: 1px solid var(--cc-edge); color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-footer__links { display: flex; flex-wrap: wrap; gap: var(--cc-space-2) var(--cc-space-5); margin: 0 0 var(--cc-space-4); padding: 0; list-style: none; }
.cc-footer__credit { margin: 0; }

.cc-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--cc-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--cc-text-small); }
.cc-breadcrumb li + li::before { content: "›"; margin-right: var(--cc-space-2); color: var(--cc-ink-muted); }
.cc-breadcrumb [aria-current="page"] { color: var(--cc-ink); font-weight: var(--cc-weight-medium); }

.cc-pagination ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cc-space-2); margin: 0; padding: 0; list-style: none; }
.cc-pagination a, .cc-pagination span[aria-current] { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--cc-space-3); border: 1px solid var(--cc-edge); border-radius: var(--cc-radius-pill); background: var(--cc-bg); color: var(--cc-ink); font-weight: var(--cc-weight-medium); text-decoration: none; }
.cc-pagination a { box-shadow: var(--cc-shadow-raised); }
.cc-pagination a:active { box-shadow: var(--cc-shadow-pressed); }
.cc-pagination span[aria-current] { box-shadow: var(--cc-shadow-pressed); font-weight: var(--cc-weight-bold); }
.cc-pagination__gap { padding: 0 var(--cc-space-1); color: var(--cc-ink-muted); }

/* ==== Actions ============================================================ */
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cc-space-2);
  min-height: 2.875rem; padding: var(--cc-space-3) var(--cc-space-5);
  border: 1px solid var(--cc-edge); border-radius: var(--cc-radius-pill);
  background: var(--cc-bg); color: var(--cc-ink);
  font: inherit; font-weight: var(--cc-weight-semibold); line-height: 1.2; text-decoration: none;
  box-shadow: var(--cc-shadow-raised); cursor: pointer;
  transition: box-shadow var(--cc-dur) var(--cc-ease), transform var(--cc-dur) var(--cc-ease);
}
.cc-btn:hover { color: var(--cc-ink); transform: translateY(-1px); }
.cc-btn:active, .cc-btn.is-pressed { background: var(--cc-bg-pressed); box-shadow: var(--cc-shadow-pressed); transform: translateY(1px); }
/* Primary: solid lime, ink text; the highest-contrast element in any component */
.cc-btn--primary { background: var(--cc-lime); border-color: var(--cc-lime); color: var(--cc-ink); }
.cc-btn--primary:active, .cc-btn--primary.is-pressed { background: var(--cc-lime-pressed); border-color: var(--cc-lime-pressed); box-shadow: var(--cc-shadow-pressed); }
.cc-btn--block { width: 100%; }
.cc-btn:disabled, .cc-btn[aria-disabled="true"] { box-shadow: none; transform: none; cursor: not-allowed; color: var(--cc-ink-muted); background: var(--cc-bg); border: 1px dashed var(--cc-edge-strong); }
.cc-actions { display: flex; flex-wrap: wrap; gap: var(--cc-space-4); align-items: center; }

.cc-chips { display: flex; flex-wrap: wrap; gap: var(--cc-space-3); margin: 0; padding: 0; list-style: none; }
.cc-chip { display: inline-flex; align-items: center; gap: var(--cc-space-2); min-height: 2.5rem; padding: var(--cc-space-2) var(--cc-space-4); border: 1px solid var(--cc-edge); border-radius: var(--cc-radius-pill); background: var(--cc-bg); color: var(--cc-ink); font: inherit; font-size: var(--cc-text-small); font-weight: var(--cc-weight-medium); box-shadow: var(--cc-shadow-raised); cursor: pointer; transition: box-shadow var(--cc-dur) var(--cc-ease); }
.cc-chip:active { background: var(--cc-bg-pressed); box-shadow: var(--cc-shadow-pressed); }
/* Selected = pressed in, plus a tick and bolder text so state never relies on depth alone */
.cc-chip[aria-pressed="true"] { background: var(--cc-bg-pressed); box-shadow: var(--cc-shadow-pressed); border-color: var(--cc-edge-strong); font-weight: var(--cc-weight-semibold); }
.cc-chip[aria-pressed="true"]::before { content: "✓"; color: var(--cc-lime-deep); font-weight: var(--cc-weight-bold); }
.cc-chip--link, .cc-chip--link:hover { color: var(--cc-ink); text-decoration: none; }

/* ==== Cards (whole card clickable through its one link) =================== */
.cc-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--cc-bg); border: 1px solid var(--cc-edge); border-radius: var(--cc-radius-lg);
  box-shadow: var(--cc-shadow-raised);
  transition: box-shadow var(--cc-dur) var(--cc-ease), transform var(--cc-dur) var(--cc-ease), opacity var(--cc-dur-slow) var(--cc-ease-out);
}
.cc-card:hover { transform: translateY(-3px); }
.cc-card:active { box-shadow: var(--cc-shadow-pressed); transform: translateY(0); }
.cc-card:has(.cc-card__link:focus-visible) { outline: var(--cc-focus-width) solid var(--cc-lime-deep); outline-offset: var(--cc-focus-offset); }
.cc-card__link:focus-visible { outline: none; }
@supports not selector(:has(*)) { .cc-card__link:focus-visible { outline: var(--cc-focus-width) solid var(--cc-lime-deep); } }
.cc-card__media { aspect-ratio: 16 / 10; margin: var(--cc-space-3) var(--cc-space-3) 0; border-radius: var(--cc-radius); background: linear-gradient(160deg, color-mix(in srgb, var(--cc-bg) 95%, var(--cc-ink)) 0%, color-mix(in srgb, var(--cc-bg) 88%, var(--cc-ink)) 100%); }
.cc-card__media--place { background: radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--cc-bg) 70%, var(--cc-lime)) 0 18%, transparent 19%), linear-gradient(160deg, color-mix(in srgb, var(--cc-bg) 95%, var(--cc-ink)), color-mix(in srgb, var(--cc-bg) 87%, var(--cc-ink))); }
.cc-card__media--guide { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--cc-bg) 95%, var(--cc-ink)) 0 12px, color-mix(in srgb, var(--cc-bg) 91%, var(--cc-ink)) 12px 24px); }
.cc-card__media--product { aspect-ratio: 1 / 1; background: radial-gradient(circle at 50% 55%, #FFFFFF 0 30%, color-mix(in srgb, var(--cc-bg) 91%, var(--cc-ink)) 31%); }
.cc-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--cc-space-2); padding: var(--cc-space-4) var(--cc-space-5) var(--cc-space-5); }
.cc-card__eyebrow { margin: 0; color: var(--cc-ink-muted); font-size: var(--cc-text-eyebrow); font-weight: var(--cc-weight-medium); text-transform: uppercase; letter-spacing: 0.06em; }
.cc-card__title { margin: 0; font-size: var(--cc-text-h3); }
.cc-card__link { color: var(--cc-ink); text-decoration: none; }
.cc-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cc-card__link:hover { color: var(--cc-ink); }
.cc-card__meta { margin: 0; color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-card__price { margin: auto 0 0; font-weight: var(--cc-weight-semibold); }
.cc-card__badges { display: flex; flex-wrap: wrap; gap: var(--cc-space-2); margin: var(--cc-space-2) 0 0; padding: 0; list-style: none; }

/* ==== Data =============================================================== */
.cc-table-wrap { overflow-x: auto; border: 1px solid var(--cc-edge); border-radius: var(--cc-radius); }
.cc-table-wrap:focus-visible { outline: var(--cc-focus-width) solid var(--cc-lime-deep); outline-offset: var(--cc-focus-offset); }
.cc-table { width: 100%; border-collapse: collapse; font-size: var(--cc-text-small); }
.cc-table caption { padding: var(--cc-space-4) var(--cc-space-4) 0; text-align: left; font-weight: var(--cc-weight-semibold); }
.cc-table th, .cc-table td { padding: var(--cc-space-3) var(--cc-space-4); border-bottom: 1px solid var(--cc-edge); text-align: left; vertical-align: top; }
.cc-table thead th { color: var(--cc-ink-muted); font-weight: var(--cc-weight-semibold); white-space: nowrap; }
.cc-table tbody tr:last-child > * { border-bottom: 0; }
.cc-table__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* long tokens (shadows, clamp()) wrap instead of forcing the column wider */
.cc-table th, .cc-table td, .cc-table code { overflow-wrap: anywhere; }
/* Below 640px every table row becomes a card and each cell reads "label: value"; the labels come from
   data-label (the column header), the real header row stays available to screen readers. No JS. */
@media (max-width: 39.99rem) {
  .cc-table-wrap { overflow: visible; border: 0; border-radius: 0; }
  .cc-table, .cc-table caption, .cc-table tbody, .cc-table tr, .cc-table th, .cc-table td { display: block; }
  .cc-table caption { padding: 0 0 var(--cc-space-3); }
  .cc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cc-table tbody tr { margin-bottom: var(--cc-space-3); padding: var(--cc-space-3) var(--cc-space-4); border: 1px solid var(--cc-edge); border-radius: var(--cc-radius); background: var(--cc-surface-tint); }
  .cc-table th, .cc-table td, .cc-table tbody tr:last-child > * { display: grid; grid-template-columns: minmax(4.5rem, 30%) minmax(0, 1fr); gap: var(--cc-space-3); align-items: start; padding: var(--cc-space-1) 0; border-bottom: 0; white-space: normal; }
  .cc-table [data-label]::before { content: attr(data-label); color: var(--cc-ink-muted); font-weight: var(--cc-weight-medium); }
  .cc-table th > *, .cc-table td > * { justify-self: start; } /* badges and swatches keep their own width */
  .cc-table th[scope="row"] { margin-bottom: var(--cc-space-1); padding-bottom: var(--cc-space-2); border-bottom: 1px solid var(--cc-edge); }
}

.cc-badge { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.15em 0.65em; border: 1px solid currentColor; border-radius: var(--cc-radius-pill); font-size: var(--cc-text-small); font-weight: var(--cc-weight-semibold); line-height: 1.5; white-space: nowrap; }
.cc-badge::before { font-weight: var(--cc-weight-bold); }
.cc-badge--owner { background: var(--cc-lime); border-color: var(--cc-lime); color: var(--cc-ink); }
.cc-badge--owner::before { content: "✓✓"; }
.cc-badge--website { color: var(--cc-info); }
.cc-badge--website::before { content: "✓"; }
.cc-badge--osm { color: var(--cc-ink-muted); border-color: var(--cc-edge-strong); }
.cc-badge--osm::before { content: "○"; }
.cc-badge--unknown { color: var(--cc-ink-muted); border-style: dashed; border-color: var(--cc-edge-strong); }
.cc-badge--unknown::before { content: "?"; }

.cc-stats { display: flex; flex-wrap: wrap; gap: var(--cc-space-2) var(--cc-space-6); margin: 0; padding: var(--cc-space-4) var(--cc-space-5); background: var(--cc-surface-tint); border-radius: var(--cc-radius-lg); }
.cc-stats__item { display: flex; align-items: baseline; gap: var(--cc-space-2); }
.cc-stats dt { order: 2; color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-stats dd { order: 1; margin: 0; font-size: var(--cc-text-stat); font-weight: var(--cc-weight-bold); font-variant-numeric: tabular-nums; }

.cc-map { display: grid; place-content: center; gap: var(--cc-space-2); min-height: 14rem; padding: var(--cc-space-5); border: 1px solid var(--cc-edge); border-radius: var(--cc-radius-lg); background: repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--cc-bg) 91%, var(--cc-ink)) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--cc-bg) 91%, var(--cc-ink)) 31px 32px), var(--cc-bg); text-align: center; }
.cc-map__label { margin: 0; font-weight: var(--cc-weight-semibold); }
.cc-map__attribution { margin: 0; color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-map--location { min-height: 12rem; margin: 0; }
.cc-map__coords { margin: 0; font-variant-numeric: tabular-nums; }
.cc-map__latlon { font-weight: var(--cc-weight-semibold); }
.cc-map__open { margin: var(--cc-space-2) 0 0; }

/* ==== Revenue and notices ================================================ */
.cc-booking, .cc-insure, .cc-capture { padding: var(--cc-space-5); background: var(--cc-surface-tint); border-radius: var(--cc-radius-lg); }
.cc-booking__title, .cc-insure__title, .cc-capture__title { margin-bottom: var(--cc-space-2); font-size: var(--cc-text-h4); }
.cc-booking__note, .cc-insure__note { margin: var(--cc-space-3) 0 0; color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-disclosure, .cc-amazon { margin: 0; padding: var(--cc-space-3) var(--cc-space-4); border: 1px solid var(--cc-edge); border-radius: var(--cc-radius-sm); color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-disclosure strong, .cc-amazon strong { color: var(--cc-ink); }

.cc-notice { display: grid; grid-template-columns: auto 1fr; gap: var(--cc-space-3); padding: var(--cc-space-4) var(--cc-space-5); background: var(--cc-bg); border: 1px solid var(--cc-edge); border-left: 6px solid currentColor; border-radius: var(--cc-radius); }
.cc-notice::before { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 2px solid currentColor; border-radius: 50%; font-weight: var(--cc-weight-bold); line-height: 1; }
.cc-notice__body { color: var(--cc-ink); }
.cc-notice__title { display: block; color: inherit; font-weight: var(--cc-weight-semibold); }
.cc-notice__body > :last-child { margin-bottom: 0; }
.cc-notice--info { color: var(--cc-info); }
.cc-notice--info::before { content: "i"; }
.cc-notice--success { color: var(--cc-success); }
.cc-notice--success::before { content: "✓"; }
.cc-notice--warning { color: var(--cc-warning); }
.cc-notice--warning::before { content: "!"; }
.cc-notice--danger { color: var(--cc-danger); }
.cc-notice--danger::before { content: "×"; }

/* ==== Forms ============================================================== */
.cc-form { display: grid; gap: var(--cc-space-5); }
.cc-field { display: grid; gap: var(--cc-space-2); }
.cc-label { font-weight: var(--cc-weight-semibold); }
.cc-help { margin: 0; color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-error { margin: 0; color: var(--cc-danger); font-size: var(--cc-text-small); font-weight: var(--cc-weight-semibold); }
.cc-error::before { content: "× "; }
.cc-input, .cc-select, .cc-textarea {
  width: 100%; min-height: 3rem; padding: var(--cc-space-3) var(--cc-space-4);
  border: 1px solid var(--cc-edge-strong); border-radius: var(--cc-radius-sm);
  background: var(--cc-bg); color: var(--cc-ink); font: inherit;
  transition: border-color var(--cc-dur) var(--cc-ease);
}
.cc-input::placeholder, .cc-textarea::placeholder { color: var(--cc-ink-muted); opacity: 1; }
.cc-input:focus, .cc-select:focus, .cc-textarea:focus { border-color: var(--cc-ink); }
.cc-input[aria-invalid="true"], .cc-textarea[aria-invalid="true"], .cc-select[aria-invalid="true"] { border: 2px solid var(--cc-danger); }
.cc-textarea { min-height: 8rem; resize: vertical; }
/* Form kit (feature form-kit): the result box lists the fields to fix (each links to its field) and takes focus; the
   Turnstile box keeps the widget's height (65px) before it renders, so nothing moves; one line under the button */
.cc-formblock__errors { margin: var(--cc-space-2) 0 0; padding-left: var(--cc-space-5); }
.cc-formblock__errors a { color: var(--cc-ink); }
.cc-notice[tabindex]:focus-visible { outline: var(--cc-focus-width) solid var(--cc-lime-deep); outline-offset: var(--cc-focus-offset); }
.cc-formblock__send { display: grid; gap: var(--cc-space-3); justify-items: start; }
.cc-turnstile { line-height: 0; }
@media (scripting: enabled) { .cc-turnstile { min-height: 4.0625rem; } }
.cc-select { appearance: none; padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231F2421' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.cc-search { position: relative; }
.cc-search .cc-input { padding-left: 2.75rem; border-radius: var(--cc-radius-pill); }
/* A magnifier, not a bare circle (which read as a radio button) */
.cc-search::before { content: ""; position: absolute; left: 1rem; top: 50%; width: 1.125rem; height: 1.125rem; margin-top: -0.5625rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B635E' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") no-repeat center / contain; pointer-events: none; }
/* Search fields on light surfaces are raised (they are the main control); the header's sits flat on the dark bar */
.cc-search .cc-input { box-shadow: var(--cc-shadow-raised); }

.cc-choice { display: flex; align-items: flex-start; gap: var(--cc-space-3); cursor: pointer; }
.cc-choice__input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; appearance: none; border: 1px solid var(--cc-edge-strong); background: var(--cc-bg) no-repeat center; cursor: pointer; }
.cc-choice__input[type="checkbox"] { border-radius: 0.4rem; }
.cc-choice__input[type="radio"] { border-radius: 50%; }
.cc-choice__input:checked { background-color: var(--cc-lime); border-color: var(--cc-ink); }
.cc-choice__input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1 5.5l4 4L13 1' fill='none' stroke='%231F2421' stroke-width='2.5'/%3E%3C/svg%3E"); }
.cc-choice__input[type="radio"]:checked { background-image: radial-gradient(circle, var(--cc-ink) 0 0.3rem, transparent 0.32rem); }
.cc-fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: var(--cc-space-3); }
.cc-fieldset legend { margin-bottom: var(--cc-space-2); padding: 0; font-weight: var(--cc-weight-semibold); }

.cc-toggle { display: inline-flex; align-items: center; gap: var(--cc-space-3); cursor: pointer; }
.cc-toggle__input {
  flex: none; width: 3.25rem; height: 1.875rem; margin: 0; appearance: none; cursor: pointer;
  border: 1px solid var(--cc-edge-strong); border-radius: var(--cc-radius-pill);
  background: radial-gradient(circle at 0.95rem 50%, var(--cc-white) 0 0.6rem, var(--cc-edge-strong) 0.62rem 0.68rem, transparent 0.7rem) var(--cc-bg);
  transition: background-position var(--cc-dur) var(--cc-ease), background-color var(--cc-dur) var(--cc-ease);
}
.cc-toggle__input:checked { background: radial-gradient(circle at calc(100% - 0.95rem) 50%, var(--cc-white) 0 0.6rem, var(--cc-ink) 0.62rem 0.68rem, transparent 0.7rem) var(--cc-lime); border-color: var(--cc-ink); }
.cc-toggle__state { color: var(--cc-ink-muted); font-size: var(--cc-text-small); }

/* ==== Content ============================================================ */
.cc-faq { display: grid; gap: var(--cc-space-3); }
.cc-faq__item { border: 1px solid var(--cc-edge); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-raised); }
.cc-faq__heading { margin: 0; font-size: var(--cc-text-h6); }
.cc-faq__button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--cc-space-4); padding: var(--cc-space-4) var(--cc-space-5); border: 0; border-radius: var(--cc-radius); background: transparent; color: var(--cc-ink); font: inherit; font-weight: var(--cc-weight-semibold); text-align: left; cursor: pointer; }
.cc-faq__button::after { content: "+"; flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-weight: var(--cc-weight-bold); }
.cc-faq__button[aria-expanded="true"]::after { content: "−"; }
.cc-faq__item:has(.cc-faq__button[aria-expanded="true"]) { box-shadow: var(--cc-shadow-pressed); }
.cc-faq__panel { padding: 0 var(--cc-space-5) var(--cc-space-4); }
.cc-faq__panel > :last-child { margin-bottom: 0; }

.cc-quote { margin: 0; padding: var(--cc-space-5) var(--cc-space-6); border: 1px solid var(--cc-edge); border-left: 6px solid var(--cc-lime); border-radius: var(--cc-radius); background: var(--cc-surface-tint); }
.cc-quote p { font-size: var(--cc-text-h5); font-weight: var(--cc-weight-medium); }
.cc-quote footer { color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-list { margin: 0 0 var(--cc-space-4); padding-left: 1.4em; }
.cc-list li + li { margin-top: var(--cc-space-2); }
.cc-list li::marker { color: var(--cc-lime-deep); font-weight: var(--cc-weight-bold); }

/* ==== Motion (entrance only for elements that scroll into view) ========== */
/* Content is never hidden: site.js adds .is-entering as an element first scrolls into view (one short fade-up) */
@keyframes cc-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cc-reveal { transition: box-shadow var(--cc-dur) var(--cc-ease), transform var(--cc-dur-slow) var(--cc-ease-out); }
.cc-reveal.is-entering { animation: cc-enter var(--cc-dur-slow) var(--cc-ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
  .cc-btn:hover, .cc-card:hover { transform: none; }
  .cc-reveal.is-entering { animation: none; }
}

/* ==== Bottom tab bar (phones and tablets; hidden from 1024px) ============ */
/* Floating raised bar. The active tab is a lime pill whose corners are concentric with the bar:
   pill radius = bar radius - bar border - inset, and the inset is the same on the top, bottom and
   outer sides (the list padding) and between tabs, so every curve follows the bar's curve. */
.cc-tabbar {
  position: fixed; z-index: 40; inset-inline: var(--cc-space-3); bottom: calc(var(--cc-space-3) + env(safe-area-inset-bottom));
  max-width: 35rem; margin-inline: auto; /* ~560px on tablets, centred, so the tabs stay close together */
  background: var(--cc-bg); border: var(--cc-tabbar-border) solid var(--cc-edge); border-radius: var(--cc-tabbar-radius);
  box-shadow: var(--cc-shadow-raised);
}
.cc-tabbar__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--cc-tabbar-inset); margin: 0; padding: var(--cc-tabbar-inset); list-style: none; }
/* every tab fills its row, so all pills share one height and the bottom inset always equals the top */
.cc-tabbar__list > li { display: flex; }
.cc-tabbar__link {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
  flex: 1; min-width: 3rem; min-height: 3.5rem; padding: var(--cc-space-1) 0; border-radius: var(--cc-tabbar-pill-radius);
  white-space: nowrap; /* labels stay on one line at 13px, so the bar keeps its height */
  color: var(--cc-ink-muted); font-size: var(--cc-text-small); font-weight: var(--cc-weight-medium); line-height: 1.2; text-align: center; text-decoration: none;
  transition: background-color var(--cc-dur) var(--cc-ease), color var(--cc-dur) var(--cc-ease), box-shadow var(--cc-dur) var(--cc-ease);
}
.cc-tabbar__icon { flex: none; width: 1.5rem; height: 1.5rem; }
.cc-tabbar__link:hover { color: var(--cc-ink); }
/* The Menu tab is a <button>: same look as the links */
button.cc-tabbar__link { border: 0; background: none; font: inherit; font-size: var(--cc-text-small); font-weight: var(--cc-weight-medium); line-height: 1.2; cursor: pointer; }
/* Menu open: the Menu tab stays pressed in */
.cc-tabbar__link[aria-expanded="true"] { background: var(--cc-bg-pressed); color: var(--cc-ink); box-shadow: var(--cc-shadow-pressed); }
.cc-tabbar__link[aria-current="page"] { background: var(--cc-lime); color: var(--cc-ink); font-weight: var(--cc-weight-bold); }
/* Pressed: same concentric radius, sunk into the bar */
.cc-tabbar__link:active { background: var(--cc-bg-pressed); color: var(--cc-ink); box-shadow: var(--cc-shadow-pressed); }
.cc-tabbar__link[aria-current="page"]:active { background: var(--cc-lime-pressed); box-shadow: var(--cc-shadow-pressed); }
/* Focus ring: drawn outside the pill with radius pill + offset (concentric again) and kept inside
   the inset: offset 2px + ring 3px = 5px < 8px inset, so it never touches the bar edge or a neighbour. */
.cc-tabbar__link:focus-visible { outline-offset: var(--cc-tabbar-ring-offset); }

/* Keep page content clear of the bar (and the iPhone home indicator) */
body:has(.cc-tabbar:not(.cc-tabbar--preview)) { padding-bottom: calc(var(--cc-tabbar-height) + var(--cc-space-3) + var(--cc-space-5) + env(safe-area-inset-bottom)); }

/* Static copy for the style guide */
.cc-tabbar--preview { position: static; margin: var(--cc-space-3) auto; }
.sg-phone { display: flex; flex-direction: column; justify-content: flex-end; min-height: 8rem; border: 1px solid var(--cc-edge-strong); border-radius: var(--cc-radius-lg); background: var(--cc-bg); }

@media (min-width: 64rem) {
  .cc-tabbar { display: none; }
  body:has(.cc-tabbar:not(.cc-tabbar--preview)) { padding-bottom: 0; }
  .cc-tabbar--preview { display: block; }
}

/* ==== Content hub components ============================================= */
.cc-icon { display: block; width: 1.5rem; height: 1.5rem; flex: none; }

/* Task tiles: 3 columns on phones, 4 from desktop; the whole tile is one link */
.cc-tiles__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cc-space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 64rem) { .cc-tiles__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cc-space-5); } }
.cc-tiles__list > li { display: flex; }
.cc-tile {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--cc-space-1);
  min-height: 6.5rem; padding: var(--cc-space-3); border: 1px solid var(--cc-edge); border-radius: var(--cc-radius);
  background: var(--cc-bg); color: var(--cc-ink); text-decoration: none; box-shadow: var(--cc-shadow-raised);
  transition: box-shadow var(--cc-dur) var(--cc-ease), transform var(--cc-dur) var(--cc-ease);
}
.cc-tile:hover { color: var(--cc-ink); transform: translateY(-2px); }
.cc-tile:active { background: var(--cc-bg-pressed); box-shadow: var(--cc-shadow-pressed); transform: translateY(0); }
.cc-tile__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: var(--cc-space-1); border-radius: var(--cc-radius-sm); background: var(--cc-lime); color: var(--cc-ink); }
.cc-tile__title { font-size: var(--cc-text-small); font-weight: var(--cc-weight-semibold); line-height: 1.25; }
.cc-tile__desc { color: var(--cc-ink-muted); font-size: var(--cc-text-small); line-height: 1.35; }
.cc-tile__title, .cc-tile__desc { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
@media (min-width: 48rem) { .cc-tile { padding: var(--cc-space-4); } .cc-tile__title { font-size: var(--cc-text-body); } }

/* At a glance: label / value rows with a source marker and a footnote link */
.cc-glance { padding: var(--cc-space-5); border-radius: var(--cc-radius-lg); background: var(--cc-surface-tint); }
.cc-glance__title { font-size: var(--cc-text-h4); }
.cc-glance__list { margin: 0; }
.cc-glance__row { display: grid; grid-template-columns: minmax(7rem, 40%) 1fr; gap: var(--cc-space-3); padding: var(--cc-space-3) 0; border-bottom: 1px solid var(--cc-edge); }
.cc-glance__row:last-child { border-bottom: 0; }
/* Phones: label, value, then the source line on its own line (it must wrap, or the page gets wider than the screen) */
@media (max-width: 39.99rem) {
  .cc-glance__row { grid-template-columns: minmax(0, 1fr); gap: var(--cc-space-1); }
  .cc-glance__date { display: block; margin: var(--cc-space-1) 0 0; }
}
.cc-glance__label { color: var(--cc-ink-muted); font-weight: var(--cc-weight-medium); }
.cc-glance__value { margin: 0; font-weight: var(--cc-weight-semibold); overflow-wrap: anywhere; }
.cc-glance__unknown { color: var(--cc-ink-muted); font-weight: var(--cc-weight-regular); }
.cc-glance__update { margin-left: var(--cc-space-2); font-size: var(--cc-text-small); font-weight: var(--cc-weight-medium); }
.cc-glance__date { margin-left: var(--cc-space-1); color: var(--cc-ink-muted); font-size: var(--cc-text-small); font-weight: var(--cc-weight-regular); }
.cc-source { display: inline-block; margin-left: var(--cc-space-2); padding: 0 0.5em; border: 1px solid currentColor; border-radius: var(--cc-radius-pill); font-size: var(--cc-text-small); font-weight: var(--cc-weight-semibold); line-height: 1.6; vertical-align: 0.1em; }
.cc-source--owner { background: var(--cc-lime); border-color: var(--cc-lime); color: var(--cc-ink); }
.cc-source--manual { color: var(--cc-ink); border-color: var(--cc-edge-strong); }
.cc-source--website { color: var(--cc-info); }
.cc-source--osm { color: var(--cc-ink-muted); border-color: var(--cc-edge-strong); }
.cc-footnote-ref { margin-left: 0.15em; font-size: 0.75em; line-height: 0; }
.cc-footnote-ref a { padding: 0 0.15em; font-weight: var(--cc-weight-semibold); }

/* Nearby list */
.cc-nearby { padding: var(--cc-space-4) var(--cc-space-5) var(--cc-space-5); border-radius: var(--cc-radius-lg); background: var(--cc-surface-tint); }
.cc-nearby__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--cc-space-2) var(--cc-space-4); margin-bottom: var(--cc-space-2); }
.cc-nearby__title { display: flex; align-items: center; gap: var(--cc-space-2); margin: 0; font-size: var(--cc-text-h5); }
.cc-nearby__count { color: var(--cc-ink-muted); font-weight: var(--cc-weight-regular); }
.cc-nearby__map { font-size: var(--cc-text-small); font-weight: var(--cc-weight-semibold); }
.cc-nearby__list { margin: 0; padding: 0; list-style: none; }
.cc-nearby__item { display: grid; grid-template-columns: 1fr auto; gap: var(--cc-space-1) var(--cc-space-3); padding: var(--cc-space-3) 0; border-top: 1px solid var(--cc-edge); }
.cc-nearby__name { font-weight: var(--cc-weight-medium); }
.cc-nearby__distance { color: var(--cc-ink-muted); font-size: var(--cc-text-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-nearby__badges { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--cc-space-1); }
.cc-attr { padding: 0 0.55em; border: 1px solid var(--cc-edge-strong); border-radius: var(--cc-radius-pill); color: var(--cc-ink-muted); font-size: var(--cc-text-small); line-height: 1.7; }
.cc-nearby__more-summary { display: inline-block; padding-block: var(--cc-space-2); color: var(--cc-lime-deep); font-size: var(--cc-text-small); font-weight: var(--cc-weight-semibold); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.cc-nearby__more-summary:hover { color: var(--cc-ink); }

/* Alert signup card */
.cc-alert { padding: var(--cc-space-5); border-radius: var(--cc-radius-lg); background: var(--cc-surface-tint); }
.cc-alert__head { display: flex; align-items: center; gap: var(--cc-space-3); margin-bottom: var(--cc-space-2); }
.cc-alert__icon, .cc-benefit__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--cc-lime); color: var(--cc-ink); }
.cc-alert__title { margin: 0; font-size: var(--cc-text-h4); }
.cc-alert__intro { color: var(--cc-ink-muted); }

/* Contextual insurance block */
.cc-insure-ctx { padding: var(--cc-space-5); border-radius: var(--cc-radius-lg); background: var(--cc-surface-tint); }
.cc-insure-ctx__title { font-size: var(--cc-text-h4); }
.cc-insure-ctx__benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--cc-space-3); margin: var(--cc-space-4) 0 var(--cc-space-5); padding: 0; list-style: none; }
.cc-benefit__title, .cc-benefit__text { min-width: 0; overflow-wrap: anywhere; }
.cc-benefit { display: grid; grid-template-columns: auto 1fr; gap: var(--cc-space-1) var(--cc-space-3); padding: var(--cc-space-4); border: 1px solid var(--cc-edge); border-radius: var(--cc-radius); }
.cc-benefit__icon { grid-row: span 2; }
.cc-benefit__text { color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-insure-ctx__disclosure { margin: var(--cc-space-4) 0 0; color: var(--cc-ink-muted); font-size: var(--cc-text-small); }

/* Product carousel: CSS scroll-snap, the next card peeks in to show there is more */
.cc-carousel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--cc-space-2) var(--cc-space-4); margin-bottom: var(--cc-space-3); }
.cc-carousel__title { margin: 0; font-size: var(--cc-text-h4); }
.cc-carousel__disclosure { margin: 0; color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-carousel__track { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--cc-space-3); padding: var(--cc-space-3) var(--cc-space-3) var(--cc-space-5); border-radius: var(--cc-radius-lg); scrollbar-width: thin; }
.cc-carousel__track:focus-visible { outline: var(--cc-focus-width) solid var(--cc-lime-deep); outline-offset: var(--cc-focus-offset); }
.cc-carousel__list { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--cc-space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .cc-carousel__list { grid-auto-columns: 40%; } }
/* desktop: four cards plus a third of the next, so it is obvious there is more to scroll */
@media (min-width: 64rem) { .cc-carousel__list { grid-auto-columns: calc((100% - 4 * var(--cc-space-4)) / 4.33); } }
.cc-carousel__item { display: flex; scroll-snap-align: start; }
.cc-carousel__item > .cc-card { flex: 1; }

/* FAQ with <details>/<summary> (no JavaScript) */
.cc-details-faq { display: grid; gap: var(--cc-space-3); }
.cc-details { border: 1px solid var(--cc-edge); border-radius: var(--cc-radius); background: var(--cc-bg); box-shadow: var(--cc-shadow-raised); }
.cc-details__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--cc-space-4); padding: var(--cc-space-4) var(--cc-space-5); border-radius: var(--cc-radius); font-weight: var(--cc-weight-semibold); cursor: pointer; list-style: none; }
.cc-details__summary::-webkit-details-marker { display: none; }
.cc-details__summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-weight: var(--cc-weight-bold); }
.cc-details[open] > .cc-details__summary::after { content: "−"; }
.cc-details[open] { box-shadow: var(--cc-shadow-pressed); }
.cc-details__answer { padding: 0 var(--cc-space-5) var(--cc-space-4); }
.cc-details__answer > :last-child { margin-bottom: 0; }

/* Sources */
.cc-sources { padding-top: var(--cc-space-4); border-top: 2px solid var(--cc-edge); font-size: var(--cc-text-small); }
.cc-sources__title { font-size: var(--cc-text-h6); }
.cc-sources__list { margin: 0 0 var(--cc-space-3); padding-left: 1.5em; }
.cc-sources__list li + li { margin-top: var(--cc-space-1); }
.cc-sources__list li:target { outline: var(--cc-focus-width) solid var(--cc-lime); outline-offset: 2px; border-radius: 2px; }
.cc-sources__credit, .cc-sources__checked { margin: 0; color: var(--cc-ink-muted); }

/* Campsite page: one column; nearby categories in two columns from 48rem */
.cc-campsite { padding-block: var(--cc-space-5) var(--cc-space-7); }
.cc-campsite__subtitle { margin: 0; color: var(--cc-ink-muted); font-size: var(--cc-text-h5); font-weight: var(--cc-weight-medium); }
.cc-campsite__intro { max-width: var(--cc-measure); }
.cc-campsite__intro p { margin: 0; }
.cc-campsite__intro p + p { margin-top: var(--cc-space-2); }
.cc-campsite__nearby { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cc-space-4); align-items: start; }
@media (min-width: 48rem) { .cc-campsite__nearby { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cc-campsite__note { color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-campsite :is(section, nav)[id] { scroll-margin-top: var(--cc-space-5); }

/* Place pages */
.cc-place { padding-block: var(--cc-space-5) var(--cc-space-7); }
.cc-place__intro { max-width: var(--cc-measure); }
.cc-place__intro p { margin: 0; }
.cc-place__intro p + p { margin-top: var(--cc-space-2); }
.cc-place__note { color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-place :is(section, details)[id], .cc-place h2[id] { scroll-margin-top: var(--cc-space-5); }

/* Hand-check (admin only): verdict chips per fact, evidence quotes */
.cc-review { padding-block: var(--cc-space-5) var(--cc-space-7); }
.cc-review__note { color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-review__quote { font-style: italic; }
.cc-verdict { margin: 0; }
.cc-verdict__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.cc-verdict .cc-chips { gap: var(--cc-space-2); }
.cc-verdict[aria-busy="true"] .cc-chip { opacity: 0.6; }

/* Guides grid: 1 column on phones, 2 on tablets, 3 on desktop; image slot keeps its ratio */
.cc-guides { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cc-space-5); }
@media (min-width: 40rem) { .cc-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cc-guides { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cc-card__img { display: block; width: calc(100% - 2 * var(--cc-space-3)); aspect-ratio: 16 / 10; margin: var(--cc-space-3) var(--cc-space-3) 0; border-radius: var(--cc-radius); object-fit: cover; }
/* Place photos on homepage cards (switch place-photos): the <picture> adds no box of its own (its img is the card image);
   the credit line sits above the card's stretched link so its own link stays clickable */
.cc-card__pic { display: contents; }
.cc-card__pic > source { display: none; } /* otherwise the empty <source> becomes a grid item on phones; the browser still picks from it */
.cc-card__img[srcset] { background: var(--cc-surface-tint); }
.cc-card__credit { position: relative; z-index: 1; margin: 0; color: var(--cc-ink-muted); font-size: var(--cc-text-small); line-height: var(--cc-leading-snug); }
.cc-card__credit a { color: inherit; }
/* Phones: the image is a small square thumbnail beside the text, so long lists stay short (Dave 2026-10-25) */
@media (max-width: 39.99rem) {
  .cc-card:has(> .cc-card__img), .cc-card:has(> .cc-card__pic), .cc-card:has(> .cc-card__photo) { display: grid; grid-template-columns: calc(4.25rem + var(--cc-space-4)) minmax(0, 1fr); align-items: start; }
  .cc-card > .cc-card__img, .cc-card > .cc-card__pic > .cc-card__img { width: 4.25rem; height: 4.25rem; aspect-ratio: 1 / 1; margin: var(--cc-space-4) 0 var(--cc-space-4) var(--cc-space-4); }
  .cc-card:has(> .cc-card__img) > .cc-card__body, .cc-card:has(> .cc-card__pic) > .cc-card__body, .cc-card:has(> .cc-card__photo) > .cc-card__body { padding: var(--cc-space-4); }
  .cc-card:has(> .cc-card__photo) { --cc-card-thumb: 6rem; grid-template-columns: calc(var(--cc-card-thumb) + var(--cc-space-4)) minmax(0, 1fr); } /* 96 px on photo cards; other thumbnails stay 68 px */
  .cc-card > .cc-card__photo { width: var(--cc-card-thumb); margin: var(--cc-space-4) 0 var(--cc-space-4) var(--cc-space-4); }
  .cc-card > .cc-card__photo .cc-card__img { width: var(--cc-card-thumb); height: var(--cc-card-thumb); aspect-ratio: 1 / 1; }
  .cc-card > .cc-card__photo .cc-photocredit { right: calc(-1 * var(--cc-space-1)); bottom: calc(-1 * var(--cc-space-1)); } /* the circle sits 10 px inside its 44 px target, so this leaves it 6 px in from the photo's corner */
}

/* ==== Search form and link chips ========================================== */
/* One labelled field and a button: stacked on phones (full-width button), one row from 40rem */
.cc-searchbar { width: 100%; max-width: 40rem; text-align: left; }
.cc-searchbar__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cc-space-3); }
@media (min-width: 40rem) { .cc-searchbar__row { grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; } }
.cc-searchbar .cc-btn { min-height: 3rem; }
/* A lead-in and wrapping pill links; every pill is at least 44px tall */
.cc-linkchips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cc-space-2) var(--cc-space-3); }
.cc-linkchips__lead { margin: 0; color: var(--cc-ink-muted); font-size: var(--cc-text-small); font-weight: var(--cc-weight-semibold); }
.cc-linkchips .cc-chips { gap: var(--cc-space-2); }
.cc-linkchips .cc-chip { min-height: 2.75rem; }

/* Card grids that stop at 3 or 2 columns (6 cards fill two rows of 3) */
@media (min-width: 64rem) {
  .cc-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cc-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==== Homepage ============================================================ */
.cc-home { padding-block: var(--cc-space-6) var(--cc-space-7); }
.cc-hero { display: grid; gap: var(--cc-space-4); justify-items: start; }
.cc-hero__title { margin: 0; max-width: 22ch; font-size: var(--cc-text-h1); font-weight: var(--cc-weight-semibold); line-height: var(--cc-leading-tight); letter-spacing: -0.02em; }
.cc-hero__lead { margin: 0; max-width: var(--cc-measure); color: var(--cc-ink-muted); font-size: var(--cc-text-h5); }
@media (min-width: 64rem) {
  .cc-hero { justify-items: center; padding-block: var(--cc-space-6); text-align: center; }
  .cc-hero .cc-linkchips, .cc-hero .cc-linkchips .cc-chips { justify-content: center; }
}
.cc-home__more { margin: 0; }
.cc-trust { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cc-space-5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .cc-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cc-trust__title { margin: 0 0 var(--cc-space-2); font-size: var(--cc-text-h5); }
.cc-trust p { margin: 0; }
.cc-owner-cta > :last-child { margin-bottom: 0; }

/* ==== Search results ====================================================== */
.cc-searchpage { padding-block: var(--cc-space-5) var(--cc-space-7); }
.cc-searchpage__note { color: var(--cc-ink-muted); font-size: var(--cc-text-small); }

/* ==== Trust pages (WordPress page content, reduced to plain tags) ======== */
.cc-trustpage, .cc-notfound { padding-block: var(--cc-space-5) var(--cc-space-7); }
.cc-trustpage__updated { color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-prose { max-width: var(--cc-measure); }
.cc-prose > :first-child { margin-top: 0; }
.cc-prose h2 { margin: var(--cc-heading-above) 0 var(--cc-heading-below); font-size: var(--cc-text-h2); }
.cc-prose h3 { margin: var(--cc-heading-above) 0 var(--cc-heading-below); font-size: var(--cc-text-h3); }
.cc-prose :is(ul, ol) { margin: 0 0 var(--cc-space-4); padding-left: 1.4em; }
.cc-prose li + li { margin-top: var(--cc-space-2); }
.cc-prose li::marker { color: var(--cc-lime-deep); font-weight: var(--cc-weight-bold); }
.cc-prose address { margin: 0 0 var(--cc-space-4); font-style: normal; }
/* Long addresses and URLs wrap instead of widening the page */
.cc-prose a { overflow-wrap: anywhere; }

/* ==== Lime accents on live pages (switch lime-accents: body.cc-lime) ======= */
/* Lime is decorative on the page (1.73:1): every lime state also has words, a tick or bold weight. */
.cc-lime main h2:not(.cc-sources__title):not(.cc-visually-hidden)::before { content: ""; display: block; width: 2.5rem; height: 0.3rem; margin-bottom: var(--cc-space-2); border-radius: var(--cc-radius-pill); background: var(--cc-lime); }
.cc-lime .cc-stats dd { background: linear-gradient(var(--cc-lime), var(--cc-lime)) 0 100% / 100% 0.3em no-repeat; }
.cc-lime .cc-chip:hover { background: var(--cc-lime-tint); }
.cc-lime .cc-chip:is([aria-current="true"], [aria-current="page"], [aria-pressed="true"]) { background: var(--cc-lime); border-color: var(--cc-lime); color: var(--cc-ink); font-weight: var(--cc-weight-bold); box-shadow: var(--cc-shadow-pressed); }
.cc-lime .cc-chip[aria-current]::before { content: "✓" / ""; font-weight: var(--cc-weight-bold); }
.cc-lime .cc-chip[aria-pressed="true"]::before { color: var(--cc-ink); }
.cc-lime .cc-nearby__icon { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--cc-lime); color: var(--cc-ink); }
.cc-lime .cc-nearby__icon .cc-icon { width: 1.1rem; height: 1.1rem; }
.cc-lime .cc-card::before, .cc-card--edge::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 3px; background: var(--cc-lime); opacity: 0; transition: opacity var(--cc-dur) var(--cc-ease); pointer-events: none; }
.cc-lime .cc-card:is(:hover, :focus-within)::before { opacity: 1; }

/* ==== Lime accents: components (fact pill) and the style guide's before/after classes ==== */
/* Confirmed fact value: tinted pill, tick, ink text. The tick is decorative (empty alt text); the words carry the meaning. */
.cc-fact { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.1em 0.7em; border-radius: var(--cc-radius-pill); color: var(--cc-ink); font-weight: var(--cc-weight-semibold); line-height: 1.6; }
.cc-fact--yes { background: var(--cc-lime-tint); }
.cc-fact--yes-solid { background: var(--cc-lime); }
.cc-fact--yes::before, .cc-fact--yes-solid::before { content: "✓" / ""; font-weight: var(--cc-weight-bold); }
/* Section heading: a short lime bar above the text (decorative) */
.cc-h-accent::before { content: ""; display: block; width: 2.5rem; height: 0.3rem; margin-bottom: var(--cc-space-2); border-radius: var(--cc-radius-pill); background: var(--cc-lime); }
/* Stat strip, option A: numbers on tint pills; option B: lime underline bar */
.cc-stats--tint dd { padding: 0 0.45em; border-radius: var(--cc-radius-sm); background: var(--cc-lime-tint); }
.cc-stats--bar dd { background: linear-gradient(var(--cc-lime), var(--cc-lime)) 0 100% / 100% 0.3em no-repeat; }
/* Chips: hover = tint; active/selected = solid lime pill, bold, with a tick (state never relies on colour alone) */
.cc-chips--lime .cc-chip:hover { background: var(--cc-lime-tint); }
.cc-chips--lime .cc-chip[aria-current="true"], .cc-chips--lime .cc-chip[aria-current="page"], .cc-chips--lime .cc-chip[aria-pressed="true"] { background: var(--cc-lime); border-color: var(--cc-lime); color: var(--cc-ink); font-weight: var(--cc-weight-bold); box-shadow: var(--cc-shadow-pressed); }
.cc-chips--lime .cc-chip[aria-current]::before, .cc-chips--lime .cc-chip[aria-pressed="true"]::before { content: "✓" / ""; color: var(--cc-ink); font-weight: var(--cc-weight-bold); }
/* Nearby category icon: ink icon in a small lime circle */
.cc-nearby__icon--lime { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--cc-lime); color: var(--cc-ink); }
.cc-nearby__icon--lime svg { width: 1.1rem; height: 1.1rem; }
/* Card hover/focus: thin lime top edge on top of the existing lift */
.cc-card--edge:is(:hover, :focus-within)::before, .cc-card--edge.is-demo-hover::before { opacity: 1; }
/* Style guide layout for before/after pairs */
.sg-compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cc-space-4); }
@media (min-width: 48rem) { .sg-compare { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.sg-h2 { margin: 0; font-size: var(--cc-text-h3); font-weight: var(--cc-weight-semibold); }
.sg-bg--cc-lime-tint { background: var(--cc-lime-tint); }
.sg-fg--cc-lime-tint { color: var(--cc-ink); }
.sg-pair.sg-fg--cc-lime-tint { border: 3px solid var(--cc-lime-tint); }
.sg-sample--cc-lime-tint { background: var(--cc-lime-tint); }

/* ==== Scene illustrations (feature scenes): flat, decorative, never a photo of the campsite ==== */
.cc-campsite__scene, .cc-hero__scene { display: block; width: 100%; height: 7rem; object-fit: cover; border-radius: var(--cc-radius-lg); }
@media (min-width: 40rem) { .cc-campsite__scene, .cc-hero__scene { height: 10rem; } }
@media (min-width: 64rem) {
  .cc-campsite__scene { float: right; width: 24rem; height: auto; aspect-ratio: 16 / 10; margin: 0 0 var(--cc-space-4) var(--cc-space-6); }
  .cc-hero__scene { max-width: 48rem; height: 12rem; }
}
.cc-campsite__scene ~ .cc-jump { clear: both; }

/* ==== Holding page ======================================================= */
.holding { display: grid; place-content: center; min-height: 100vh; min-height: 100svh; padding: var(--cc-space-6) var(--cc-gutter); text-align: center; }
.holding__title { margin: 0; font-size: var(--cc-text-h1); }
.holding__accent { font-weight: var(--cc-weight-medium); background: linear-gradient(var(--cc-lime), var(--cc-lime)) 0 100% / 100% 0.35em no-repeat; }

/* ==== Generic page ======================================================= */
/* main only: WordPress also puts class "page" on <body> for its pages, which pushed the header down 32px there */
main.page { padding-block: var(--cc-space-6); }
.page__title { font-size: var(--cc-text-h2); }

/* ==== Style guide (admin only) =========================================== */
.sg-intro { max-width: var(--cc-measure); color: var(--cc-ink-muted); }
.sg-toc { display: flex; flex-wrap: wrap; gap: var(--cc-space-2); margin: 0 0 var(--cc-space-6); padding: 0; list-style: none; font-size: var(--cc-text-small); }
.sg-toc a { display: inline-block; padding: var(--cc-space-1) var(--cc-space-3); border: 1px solid var(--cc-edge); border-radius: var(--cc-radius-pill); box-shadow: var(--cc-shadow-raised); text-decoration: none; }
.sg-section { margin-top: var(--cc-space-8); scroll-margin-top: var(--cc-space-5); }
.sg-section__title { padding-bottom: var(--cc-space-2); border-bottom: 2px solid var(--cc-lime); }
.sg-classes { margin: 0 0 var(--cc-space-5); color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-stack > .sg-classes { margin-top: 0; }
.sg-classes code { color: var(--cc-ink); }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--cc-space-5); align-items: center; }
.sg-demo { display: grid; place-content: center; min-height: 7.5rem; padding: var(--cc-space-4); text-align: center; }
.sg-label { display: block; margin-bottom: var(--cc-space-2); color: var(--cc-ink-muted); font-size: var(--cc-text-small); font-weight: var(--cc-weight-semibold); }
.sg-width { padding: var(--cc-space-4) var(--cc-space-5); border: 2px dashed var(--cc-lime-deep); border-radius: var(--cc-radius); }
.sg-width__label { display: block; margin-bottom: var(--cc-space-2); color: var(--cc-lime-deep); font-size: var(--cc-text-small); font-weight: var(--cc-weight-semibold); }
.sg-width .cc-measure { padding: var(--cc-space-4); border-left: 4px solid var(--cc-lime); background: var(--cc-white); border-radius: var(--cc-radius-sm); }
.sg-type > * { margin-top: 0; }
.sg-grid-cell { padding: var(--cc-space-2) 0; border-radius: var(--cc-radius-sm); background: var(--cc-lime); color: var(--cc-ink); font-size: var(--cc-text-small); font-weight: var(--cc-weight-semibold); text-align: center; }
.sg-type > * { margin-bottom: var(--cc-space-3); }
.sg-type__meta { color: var(--cc-ink-muted); font-size: var(--cc-text-small); font-weight: var(--cc-weight-regular); }
.sg-pass { color: var(--cc-success); font-weight: var(--cc-weight-bold); }
.sg-fail { color: var(--cc-danger); font-weight: var(--cc-weight-bold); }
.sg-na { color: var(--cc-ink-muted); }
.sg-pair { display: inline-flex; align-items: center; justify-content: center; min-width: 5.5rem; padding: var(--cc-space-1) var(--cc-space-3); border: 1px solid var(--cc-edge); border-radius: var(--cc-radius-sm); font-weight: var(--cc-weight-semibold); }

/* Contrast-pair swatches: foreground and background as classes (no inline styles) */
.sg-fg--cc-ink { color: var(--cc-ink); }
.sg-fg--cc-ink-muted { color: var(--cc-ink-muted); }
.sg-fg--cc-lime-deep { color: var(--cc-lime-deep); }
.sg-fg--cc-success { color: var(--cc-success); }
.sg-fg--cc-warning { color: var(--cc-warning); }
.sg-fg--cc-danger { color: var(--cc-danger); }
.sg-fg--cc-info { color: var(--cc-info); }
.sg-fg--cc-edge, .sg-fg--cc-edge-strong, .sg-fg--cc-lime { color: var(--cc-ink); }
.sg-bg--cc-bg { background: var(--cc-bg); }
.sg-bg--cc-white { background: var(--cc-white); }
.sg-bg--cc-lime { background: var(--cc-lime); }
.sg-bg--cc-lime-pressed { background: var(--cc-lime-pressed); }
.sg-bg--cc-bg-pressed { background: var(--cc-bg-pressed); }
.sg-pair.sg-fg--cc-edge { border: 3px solid var(--cc-edge); }
.sg-pair.sg-fg--cc-edge-strong { border: 3px solid var(--cc-edge-strong); }
.sg-pair.sg-fg--cc-lime { border: 3px solid var(--cc-lime); }
.sg-pair.sg-ring { outline: var(--cc-focus-width) solid var(--cc-lime-deep); outline-offset: 2px; }

.sg-sample { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; min-height: 2rem; border-radius: var(--cc-radius-sm); }
.sg-sample--cc-bg { background: var(--cc-bg); border: 1px solid var(--cc-edge-strong); }
.sg-sample--cc-edge { background: var(--cc-edge); }
.sg-sample--cc-edge-strong { background: var(--cc-edge-strong); }
.sg-sample--cc-ink { background: var(--cc-ink); }
.sg-sample--cc-ink-muted { background: var(--cc-ink-muted); }
.sg-sample--cc-lime { background: var(--cc-lime); }
.sg-sample--cc-lime-deep { background: var(--cc-lime-deep); }
.sg-sample--cc-white { background: var(--cc-white); border: 1px solid var(--cc-edge-strong); }
.sg-sample--cc-success { background: var(--cc-success); }
.sg-sample--cc-warning { background: var(--cc-warning); }
.sg-sample--cc-danger { background: var(--cc-danger); }
.sg-sample--cc-info { background: var(--cc-info); }
.sg-sample--cc-lime-pressed { background: var(--cc-lime-pressed); }
.sg-sample--cc-bg-pressed { background: var(--cc-bg-pressed); border: 1px solid var(--cc-edge-strong); }
.sg-sample--cc-shadow-raised { box-shadow: var(--cc-shadow-raised); }
.sg-sample--cc-shadow-pressed { box-shadow: var(--cc-shadow-pressed); }
.sg-sample--cc-surface-tint { background: var(--cc-surface-tint); }
.sg-sample--cc-radius-sm, .sg-sample--cc-radius, .sg-sample--cc-radius-lg, .sg-sample--cc-radius-pill { border: 2px solid var(--cc-lime-deep); }
.sg-sample--cc-radius-sm { border-radius: var(--cc-radius-sm); }
.sg-sample--cc-radius { border-radius: var(--cc-radius); }
.sg-sample--cc-radius-lg { border-radius: var(--cc-radius-lg); }
.sg-sample--cc-radius-pill { border-radius: var(--cc-radius-pill); }
.sg-space { display: block; height: 0.75rem; border-radius: 2px; background: var(--cc-lime); }
.sg-space--cc-space-1 { width: var(--cc-space-1); }
.sg-space--cc-space-2 { width: var(--cc-space-2); }
.sg-space--cc-space-3 { width: var(--cc-space-3); }
.sg-space--cc-space-4 { width: var(--cc-space-4); }
.sg-space--cc-space-5 { width: var(--cc-space-5); }
.sg-space--cc-space-6 { width: var(--cc-space-6); }
.sg-space--cc-space-7 { width: var(--cc-space-7); }
.sg-space--cc-space-8 { width: var(--cc-space-8); }

/* ==== Site look (switch site-look: body.cc-look; Dave 2026-10-26) ========= */
/* Header and footer: raised dark panels on the light page. Text --cc-on-dark (12.48:1), secondary --cc-on-dark-muted
   (7.77:1); lime is the accent there (7.23:1). Below 1024px only the header bar is dark: the menu panel that opens
   above the tab bar and the tab bar itself keep the light look. */
.cc-look .cc-header { background: var(--cc-surface-dark); border-color: var(--cc-surface-dark); }
.cc-look .cc-logo, .cc-look .cc-logo:hover { color: var(--cc-on-dark); }
.cc-look .cc-logo__mark { box-shadow: none; }
.cc-look .cc-header__bar :focus-visible, .cc-look .cc-header__search :focus-visible { outline-color: var(--cc-lime); }
@media (min-width: 64rem) {
  .cc-look .cc-header { gap: var(--cc-space-5); }
  .cc-look .cc-nav__link { color: var(--cc-on-dark); }
  .cc-look .cc-nav__link:hover { color: var(--cc-on-dark); background: rgba(255, 255, 255, 0.08); box-shadow: none; }
  .cc-look .cc-nav__link[aria-current="page"] { color: var(--cc-on-dark); background: rgba(255, 255, 255, 0.08); box-shadow: none; }
  .cc-look .cc-nav__link[aria-current="page"]::after { background: var(--cc-lime); }
  .cc-look .cc-nav__list :focus-visible { outline-color: var(--cc-lime); }
}
/* Header search: from 1024px only (the tab bar's Search tab covers smaller screens); label kept for screen readers */
.cc-header__search { display: none; }
@media (min-width: 64rem) {
  .cc-header__search { display: block; flex: 1 1 18rem; max-width: 26rem; margin-inline: auto; }
}
.cc-header__search .cc-searchbar { max-width: none; }
.cc-header__search .cc-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cc-header__search .cc-searchbar__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--cc-space-2); }
.cc-header__search .cc-input { box-shadow: none; min-height: 2.75rem; padding-block: var(--cc-space-2); padding-left: var(--cc-space-4); font-size: var(--cc-text-nav); }
.cc-header__search .cc-search::before { display: none; }
/* Round lime icon button: the word "Search" stays in the button (font-size 0) as its accessible name */
.cc-header__search .cc-btn { box-shadow: none; width: 2.75rem; min-height: 2.75rem; padding: 0; border-radius: 50%; font-size: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231F2421' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .cc-look .cc-header { gap: var(--cc-space-3); }
  .cc-look .cc-nav__link { padding-inline: var(--cc-space-3); }
}
@media (min-width: 64rem) {
  .cc-look .cc-header__bar { flex: none; }
  .cc-look .cc-logo { white-space: nowrap; }

}
/* Footer: dark panel, links in --cc-on-dark with a lime underline, lime on hover */
.cc-look .cc-footer { margin-bottom: var(--cc-space-5); padding: var(--cc-space-6) var(--cc-space-5); border: 0; border-radius: var(--cc-radius-lg); background: var(--cc-surface-dark); color: var(--cc-on-dark-muted); }
.cc-look .cc-footer a { color: var(--cc-on-dark); text-decoration-color: var(--cc-lime); }
.cc-look .cc-footer a:hover { color: var(--cc-lime); }
.cc-look .cc-footer :focus-visible { outline-color: var(--cc-lime); }
.cc-footer__disclosure, .cc-footer__operator { max-width: var(--cc-measure); margin: var(--cc-space-3) 0 0; }
.cc-footer__operator { color: var(--cc-on-dark); font-weight: var(--cc-weight-semibold); }
/* Newsletter (feature newsletter): the compact form, one row from 48rem, stacked on phones. The field stays 16px inside the
   13px footer, or iOS zooms the page on focus. Step 2's boxes sit in two columns so the page fits one phone screen. */
.cc-newsletter { display: grid; gap: var(--cc-space-3); }
.cc-newsletter--footer { margin-bottom: var(--cc-space-6); }
.cc-newsletter__title { margin: 0; font-size: var(--cc-text-h3); font-weight: var(--cc-weight-semibold); }
.cc-look .cc-footer .cc-newsletter__title { color: var(--cc-on-dark); }
.cc-newsletter__form { display: grid; gap: var(--cc-space-3); max-width: var(--cc-measure); }
.cc-newsletter .cc-input { font-size: var(--cc-text-body); }
.cc-newsletter .cc-btn { justify-self: start; }
.cc-look .cc-footer .cc-newsletter .cc-label, .cc-look .cc-footer .cc-newsletter__consent { color: var(--cc-on-dark); }
.cc-look .cc-footer .cc-newsletter .cc-btn { box-shadow: none; color: var(--cc-ink); }
@media (min-width: 48rem) {
  .cc-newsletter__form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .cc-newsletter__consent { grid-row: 2; grid-column: 1 / -1; }
}
.cc-step2__email { margin: 0; font-size: var(--cc-text-small); white-space: nowrap; }
.cc-step2__email strong { display: inline-block; max-width: calc(100% - 8.5rem); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.cc-step2 { display: grid; gap: var(--cc-space-3); max-width: var(--cc-measure); }
.cc-step2__campers { min-width: 0; margin: 0; padding: 0; border: 0; }
.cc-step2__campers legend { padding: 0; margin-bottom: var(--cc-space-2); }
.cc-step2__hint { color: var(--cc-ink-muted); font-size: var(--cc-text-small); font-weight: var(--cc-weight-regular); }
.cc-step2__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cc-space-2) var(--cc-space-3); }
.cc-step2 .cc-btn { justify-self: start; }
@media (max-width: 47.99rem) {
  .cc-step2__area { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--cc-space-2); align-items: center; }
}
/* Low vision: cards, tiles and panels keep a 3.34:1 edge, so their shape never depends on the soft shadows alone */
.cc-look :is(.cc-card, .cc-tile, .cc-pagination a, .cc-pagination span[aria-current]) { border-color: var(--cc-edge-strong); }

/* ==== Homepage sections (switches home-sections, type-pages) ============== */
/* Camping types: 2 columns on phones (an odd last tile spans both), 5 in one row from 48rem */
.cc-tiles--types .cc-tiles__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-tiles--types .cc-tiles__list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .cc-tiles--types .cc-tiles__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cc-tiles--types .cc-tiles__list > li:last-child:nth-child(odd) { grid-column: auto; }
}
/* Campsites hub (switch campsites-hub-v2): stats and tiles 2 by 2 on phones, 4 across from 48rem; illustrations match the 96 px photos */
.cc-stats--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cc-space-4) var(--cc-space-5); }
.cc-stats--grid .cc-stats__item { flex-direction: column; align-items: flex-start; gap: var(--cc-space-1); }
.cc-tiles--hub .cc-tiles__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
@media (min-width: 48rem) {
  .cc-stats--grid, .cc-tiles--hub .cc-tiles__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 39.99rem) {
  .cc-place--hub .cc-card:has(> .cc-card__img) { --cc-card-thumb: 6rem; grid-template-columns: calc(var(--cc-card-thumb) + var(--cc-space-4)) minmax(0, 1fr); }
  .cc-place--hub .cc-card > .cc-card__img { width: var(--cc-card-thumb); height: var(--cc-card-thumb); }
}
/* Data story: big figures from our own data, one card each; the source line under them */
.cc-story__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cc-space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .cc-story__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cc-space-5); } }
.cc-story__item { display: grid; align-content: start; gap: var(--cc-space-2); padding: var(--cc-space-5); background: var(--cc-surface-tint); border-radius: var(--cc-radius-lg); }
.cc-story__figure { justify-self: start; font-size: var(--cc-text-h2); font-weight: var(--cc-weight-bold); line-height: var(--cc-leading-tight); font-variant-numeric: tabular-nums; }
.cc-lime .cc-story__figure { background: linear-gradient(var(--cc-lime), var(--cc-lime)) 0 100% / 100% 0.25em no-repeat; }
.cc-story__source { margin: 0; max-width: var(--cc-measure); color: var(--cc-ink-muted); font-size: var(--cc-text-small); }

/* ==== Camping-type placeholder pages ====================================== */
.cc-typepage { padding-block: var(--cc-space-5) var(--cc-space-7); }

/* ==== Place listing (switch place-listing) ================================ */
/* Sort and filter: a pressed-in panel; one column on phones, one row from 48rem */
.cc-listing { display: grid; gap: var(--cc-space-4); padding: var(--cc-space-4) var(--cc-space-5); background: var(--cc-surface-tint); border-radius: var(--cc-radius-lg); }
@media (min-width: 48rem) { .cc-listing { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr) auto; align-items: end; gap: var(--cc-space-5); } }
.cc-listing__filters legend { margin-bottom: var(--cc-space-2); }
.cc-listing__choices { display: flex; flex-wrap: wrap; gap: var(--cc-space-2) var(--cc-space-5); }
.cc-listing__choices .cc-choice { align-items: center; min-height: 2.75rem; }
.cc-listing__choices .cc-choice__input { margin: 0; }
.cc-listing__count { color: var(--cc-ink-muted); }
.cc-listing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cc-space-3) var(--cc-space-5); }
.cc-listing__actions .cc-btn { min-height: 3rem; }
/* Nearest places under the town on campsite cards */
.cc-card__near { margin: 0; color: var(--cc-ink-muted); font-size: var(--cc-text-small); }

/* ==== Place map (switch place-map) ======================================== */
/* The frame keeps its ratio from the first paint (4:3 phones, 16:10 from 40rem), so the map arriving moves nothing. */
.cc-placemap { display: grid; gap: var(--cc-space-2); margin: 0; }
.cc-placemap__frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--cc-edge-strong); border-radius: var(--cc-radius-lg); background: color-mix(in srgb, var(--cc-bg) 90%, var(--cc-ink)); }
@media (min-width: 40rem) { .cc-placemap__frame { aspect-ratio: 16 / 10; } }
.cc-placemap__static { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* (0,2,0): beats the vendor rule .mapboxgl-map { position: relative } further down, which would collapse it to 0 height */
.cc-placemap .cc-placemap__canvas { position: absolute; inset: 0; }
.cc-placemap__canvas:empty { pointer-events: none; }
.cc-placemap.is-live .cc-placemap__static { visibility: hidden; }
/* "Show map": centred over the static image until the interactive map is live (site.js reveals it; no JS = image only) */
.cc-placemap__load { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.cc-placemap__load[hidden] { display: none; }
.cc-placemap__load:disabled { opacity: 1; color: var(--cc-ink); background: var(--cc-bg); border: 1px solid var(--cc-edge-strong); }
.cc-placemap__caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--cc-space-1) var(--cc-space-4); color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-placemap .mapboxgl-map { font: inherit; }
.cc-placemap .mapboxgl-popup-content { padding: var(--cc-space-3) var(--cc-space-6) var(--cc-space-3) var(--cc-space-4); border-radius: var(--cc-radius-sm); color: var(--cc-ink); font-size: var(--cc-text-small); box-shadow: none; border: 1px solid var(--cc-edge-strong); }
.cc-placemap .mapboxgl-popup-close-button { width: 2rem; height: 2rem; font-size: 1.25rem; }
.cc-mappop__title { display: block; font-weight: var(--cc-weight-semibold); }
.cc-mappop__type { color: var(--cc-ink-muted); }
.cc-placemap .mapboxgl-ctrl :focus-visible { outline: var(--cc-focus-width) solid var(--cc-lime-deep); outline-offset: 2px; box-shadow: none; }
/* Map controls are clickable: the raised token replaces Mapbox's own ring shadow */
.cc-placemap .mapboxgl-ctrl-group:not(:empty) { box-shadow: var(--cc-shadow-raised); }
.cc-placemap .mapboxgl-ctrl-popup-tip, .cc-placemap .mapboxgl-popup-tip { box-shadow: none; }

/* ==== Style guide: dark surface sample and the header search shown at any width ==== */
.sg-dark { padding: var(--cc-space-5); border-radius: var(--cc-radius-lg); background: var(--cc-surface-dark); }
.sg-dark p { margin: 0; }
.sg-dark p + p { margin-top: var(--cc-space-2); }
.sg-dark__text { color: var(--cc-on-dark); }
.sg-dark__muted { color: var(--cc-on-dark-muted); }
.sg-dark a { color: var(--cc-on-dark); text-decoration-color: var(--cc-lime); }
.sg-dark a:hover { color: var(--cc-lime); }
.sg-dark :focus-visible { outline-color: var(--cc-lime); }
.sg-headersearch { display: block; max-width: 26rem; margin: 0; padding: var(--cc-space-3); border-radius: var(--cc-radius-lg); background: var(--cc-surface-dark); }
.sg-fg--cc-on-dark { color: var(--cc-on-dark); }
.sg-fg--cc-on-dark-muted { color: var(--cc-on-dark-muted); }
.sg-bg--cc-surface-dark { background: var(--cc-surface-dark); }
.sg-pair.sg-fg--cc-lime.sg-bg--cc-surface-dark { color: var(--cc-lime); border-color: var(--cc-surface-dark); }
.sg-sample--cc-surface-dark { background: var(--cc-surface-dark); }
.sg-sample--cc-on-dark { background: var(--cc-on-dark); border: 1px solid var(--cc-edge-strong); }
.sg-sample--cc-on-dark-muted { background: var(--cc-on-dark-muted); }

/* ==== Vendor: Mapbox GL JS 3.32.0 map CSS (trimmed to the controls the place map uses; Mapbox TOS licence) ==== */
.mapboxgl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgb(0 0 0/0)}
.mapboxgl-canvas{position:absolute;left:0;top:0}
.mapboxgl-map:-webkit-full-screen{width:100%;height:100%}
.mapboxgl-canvas-container.mapboxgl-interactive,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass{cursor:grab;-webkit-user-select:none;user-select:none}
.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer{cursor:pointer}
.mapboxgl-canvas-container.mapboxgl-interactive:active,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active{cursor:grabbing}
.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas{touch-action:pan-x pan-y}
.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:pinch-zoom}
.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:none}
.mapboxgl-ctrl-bottom,.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right,.mapboxgl-ctrl-left,.mapboxgl-ctrl-right,.mapboxgl-ctrl-top,.mapboxgl-ctrl-top-left,.mapboxgl-ctrl-top-right{position:absolute;pointer-events:none;z-index:2}
.mapboxgl-ctrl-top-left{top:0;left:0}
.mapboxgl-ctrl-top{top:0;left:50%;transform:translateX(-50%)}
.mapboxgl-ctrl-top-right{top:0;right:0}
.mapboxgl-ctrl-right{top:50%;transform:translateY(-50%);right:0}
.mapboxgl-ctrl-bottom-right{right:0;bottom:0}
.mapboxgl-ctrl-bottom{bottom:0;left:50%;transform:translateX(-50%)}
.mapboxgl-ctrl-bottom-left{bottom:0;left:0}
.mapboxgl-ctrl-left{top:50%;transform:translateY(-50%);left:0}
.mapboxgl-ctrl{clear:both;pointer-events:auto}
.mapboxgl-ctrl-top-left .mapboxgl-ctrl{margin:10px 0 0 10px;float:left}
.mapboxgl-ctrl-top .mapboxgl-ctrl{margin:10px 0;float:left}
.mapboxgl-ctrl-top-right .mapboxgl-ctrl{margin:10px 10px 0 0;float:right}
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,.mapboxgl-ctrl-right .mapboxgl-ctrl{margin:0 10px 10px 0;float:right}
.mapboxgl-ctrl-bottom .mapboxgl-ctrl{margin:10px 0;float:left}
.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,.mapboxgl-ctrl-left .mapboxgl-ctrl{margin:0 0 10px 10px;float:left}
.mapboxgl-ctrl-group{border-radius:4px;background:#fff}
.mapboxgl-ctrl-group button{width:32px;height:32px;display:block;padding:0;outline:none;border:0;box-sizing:border-box;background-color:initial;cursor:pointer;overflow:hidden}
.mapboxgl-ctrl-group button+button{border-top:1px solid #ddd}
.mapboxgl-ctrl button .mapboxgl-ctrl-icon{display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:50%}
.mapboxgl-ctrl button:disabled{cursor:not-allowed}
.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon{opacity:.25}
.mapboxgl-ctrl-group button:first-child{border-radius:4px 4px 0 0}
.mapboxgl-ctrl-group button:last-child{border-radius:0 0 4px 4px}
.mapboxgl-ctrl-group button:only-child{border-radius:inherit}
.mapboxgl-ctrl button:not(:disabled):hover{background-color:#eee}
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23333%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M10%2013c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h9c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013h-9z%22%2F%3E%3C%2Fsvg%3E")}
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23333%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M14.5%208.5c-.75%200-1.5.75-1.5%201.5v3h-3c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h3v3c0%20.75.75%201.5%201.5%201.5S16%2019.75%2016%2019v-3h3c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013h-3v-3c0-.75-.75-1.5-1.5-1.5z%22%2F%3E%3C%2Fsvg%3E")}
.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23333%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M10.5%2014l4-8%204%208h-8z%22%2F%3E%3Cpath%20id%3D%22south%22%20d%3D%22M10.5%2016l4%208%204-8h-8z%22%20fill%3D%22%23ccc%22%2F%3E%3C%2Fsvg%3E")}
a.mapboxgl-ctrl-logo{width:88px;height:23px;margin:0 0 -4px -4px;display:block;background-repeat:no-repeat;cursor:pointer;overflow:hidden;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2088%2023%22%3E%3Cdefs%3E%3Cpath%20id%3D%22logo%22%20d%3D%22M11.5%202.25c5.105%200%209.25%204.145%209.25%209.25s-4.145%209.25-9.25%209.25-9.25-4.145-9.25-9.25%204.145-9.25%209.25-9.25zM6.997%2015.983c-.051-.338-.828-5.802%202.233-8.873a4.395%204.395%200%20013.13-1.28c1.27%200%202.49.51%203.39%201.42.91.9%201.42%202.12%201.42%203.39%200%201.18-.449%202.301-1.28%203.13C12.72%2016.93%207%2016%207%2016l-.003-.017zM15.3%2010.5l-2%20.8-.8%202-.8-2-2-.8%202-.8.8-2%20.8%202%202%20.8z%22%2F%3E%3Cpath%20id%3D%22text%22%20d%3D%22M50.63%208c.13%200%20.23.1.23.23V9c.7-.76%201.7-1.18%202.73-1.18%202.17%200%203.95%201.85%203.95%204.17s-1.77%204.19-3.94%204.19c-1.04%200-2.03-.43-2.74-1.18v3.77c0%20.13-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01%200%20.01%200%20.01-.01.13%200%20.22.1.22.22v7.55c0%20.12-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V15c-.7.76-1.69%201.19-2.73%201.19-2.17%200-3.94-1.87-3.94-4.19%200-2.32%201.77-4.19%203.94-4.19%201.03%200%202.02.43%202.73%201.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24%204.24%200%2000-4.16%203.29c-.13.59-.13%201.19%200%201.77a4.233%204.233%200%20004.17%203.3c2.35%200%204.26-1.87%204.26-4.19%200-2.32-1.9-4.17-4.27-4.17zM60.63%205c.13%200%20.23.1.23.23v3.76c.7-.76%201.7-1.18%202.73-1.18%201.88%200%203.45%201.4%203.84%203.28.13.59.13%201.2%200%201.8-.39%201.88-1.96%203.29-3.84%203.29-1.03%200-2.02-.43-2.73-1.18v.77c0%20.12-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34%2011h-1.4c-.13%200-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13%200%20.22.11.23.22v.68c.5-.68%201.3-1.09%202.16-1.1h.03c1.09%200%202.09.6%202.6%201.55.45-.95%201.4-1.55%202.44-1.56%201.62%200%202.93%201.25%202.9%202.78l.03%205.2c0%20.13-.1.23-.23.23h-1.41c-.13%200-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8%200-1.46.7-1.59%201.62l.01%204.68c0%20.13-.11.23-.23.23h-1.41c-.13%200-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85%200-1.54.79-1.6%201.8v4.5c0%20.13-.1.23-.23.23zm53.615%200h-1.61c-.04%200-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213%200%2001-.03-.12c0-.12.09-.21.21-.21h1.61c.13%200%20.24.06.3.17l1.41%202.37%201.4-2.37a.34.34%200%2001.3-.17h1.6c.04%200%20.08.01.12.03.09.06.13.19.06.28l-2.37%203.65%202.43%203.7c0%20.05.01.09.01.13%200%20.12-.09.21-.21.21h-1.61c-.13%200-.24-.06-.3-.17l-1.44-2.42-1.44%202.42a.34.34%200%2001-.3.17zm-7.12-1.49c-1.33%200-2.42-1.12-2.42-2.51%200-1.39%201.08-2.52%202.42-2.52%201.33%200%202.42%201.12%202.42%202.51%200%201.39-1.08%202.51-2.42%202.52zm-19.865%200c-1.32%200-2.39-1.11-2.42-2.48v-.07c.02-1.38%201.09-2.49%202.4-2.49%201.32%200%202.41%201.12%202.41%202.51%200%201.39-1.07%202.52-2.39%202.53zm-8.11-2.48c-.01%201.37-1.09%202.47-2.41%202.47s-2.42-1.12-2.42-2.51c0-1.39%201.08-2.52%202.4-2.52%201.33%200%202.39%201.11%202.41%202.48l.02.08zm18.12%202.47c-1.32%200-2.39-1.11-2.41-2.48v-.06c.02-1.38%201.09-2.48%202.41-2.48s2.42%201.12%202.42%202.51c0%201.39-1.09%202.51-2.42%202.51z%22%2F%3E%3C%2Fdefs%3E%3Cmask%20id%3D%22clip%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22white%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23logo%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%2F%3E%3C%2Fmask%3E%3Cg%20id%3D%22outline%22%20opacity%3D%220.3%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%3E%3Ccircle%20mask%3D%22url(%23clip)%22%20cx%3D%2211.5%22%20cy%3D%2211.5%22%20r%3D%229.25%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%20mask%3D%22url(%23clip)%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22fill%22%20opacity%3D%220.9%22%20fill%3D%22%23fff%22%3E%3Cuse%20xlink%3Ahref%3D%22%23logo%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
a.mapboxgl-ctrl-logo.mapboxgl-compact{width:23px}
.mapboxgl-ctrl.mapboxgl-ctrl-attrib{padding:0 5px;background-color:#ffffff80;margin:0}
@media screen{.mapboxgl-ctrl-attrib.mapboxgl-compact{min-height:20px;padding:2px 24px 2px 0;margin:10px;position:relative;background-color:#fff;border-radius:12px;box-sizing:initial}.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 28px 2px 8px;visibility:visible}:is(.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-left,.mapboxgl-ctrl-top-left)>.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 8px 2px 28px;border-radius:12px}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner{display:none}.mapboxgl-ctrl-attrib-button{display:none;cursor:pointer;position:absolute;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M4%2010a6%206%200%201%200%2012%200%206%206%200%201%200-12%200m5-3a1%201%200%201%200%202%200%201%201%200%201%200-2%200m0%203a1%201%200%201%201%202%200v3a1%201%200%201%201-2%200%22%2F%3E%3C%2Fsvg%3E");background-color:#ffffff80;width:24px;height:24px;box-sizing:border-box;border-radius:12px;outline:none;top:0;right:0;border:0}:is(.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-left,.mapboxgl-ctrl-top-left) .mapboxgl-ctrl-attrib-button{left:0}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner{display:block}.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button{background-color:#0000000d}.mapboxgl-ctrl-bottom-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;right:0}.mapboxgl-ctrl-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{right:0}.mapboxgl-ctrl-top-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{top:0;right:0}.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{top:0;left:0}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;left:0}.mapboxgl-ctrl-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{left:0}}
.mapboxgl-ctrl-attrib a{color:#000000bf;text-decoration:none}
.mapboxgl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}
.mapboxgl-ctrl-attrib .mapbox-improve-map{font-weight:700;margin-left:2px}
.mapboxgl-attrib-empty{display:none}
.mapboxgl-ctrl-scale{background-color:#ffffffbf;font-size:10px;border-color:#333;border-style:none solid solid;border-width:medium 2px 2px;padding:0 5px;color:#333;box-sizing:border-box;white-space:nowrap}
.mapboxgl-popup{position:absolute;top:0;left:0;display:flex;will-change:transform;pointer-events:none}
.mapboxgl-popup-anchor-top,.mapboxgl-popup-anchor-top-left,.mapboxgl-popup-anchor-top-right{flex-direction:column}
.mapboxgl-popup-anchor-bottom,.mapboxgl-popup-anchor-bottom-left,.mapboxgl-popup-anchor-bottom-right{flex-direction:column-reverse}
.mapboxgl-popup-anchor-left{flex-direction:row}
.mapboxgl-popup-anchor-right{flex-direction:row-reverse}
.mapboxgl-popup-tip{width:0;height:0;border:10px solid #0000;z-index:1}
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip{align-self:center;border-top:none;border-bottom-color:#fff}
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{align-self:flex-start;border-top:none;border-left:none;border-bottom-color:#fff}
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{align-self:flex-end;border-top:none;border-right:none;border-bottom-color:#fff}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{align-self:center;border-left:none;border-right-color:#fff}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{align-self:center;border-right:none;border-left-color:#fff}
.mapboxgl-popup-close-button{position:absolute;right:0;top:0;border:0;border-radius:0 3px 0 0;cursor:pointer;background-color:initial}
.mapboxgl-popup-close-button:hover{background-color:#eee}
.mapboxgl-popup-content{position:relative;background:#fff;border-radius:3px;padding:10px 10px 15px;pointer-events:auto}
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content{border-top-left-radius:0}
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content{border-top-right-radius:0}
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content{border-bottom-left-radius:0}
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content{border-bottom-right-radius:0}
.mapboxgl-popup-track-pointer{display:none}
.mapboxgl-popup-track-pointer *{pointer-events:none;user-select:none}
.mapboxgl-map:hover .mapboxgl-popup-track-pointer{display:flex}
.mapboxgl-map:active .mapboxgl-popup-track-pointer{display:none}
.mapboxgl-crosshair,.mapboxgl-crosshair .mapboxgl-interactive,.mapboxgl-crosshair .mapboxgl-interactive:active{cursor:crosshair}
.mapboxgl-boxzoom{position:absolute;top:0;left:0;width:0;height:0;background:#fff;border:2px dotted #202020;opacity:.5}
@media print{.mapbox-improve-map{display:none}}
.mapboxgl-scroll-zoom-blocker,.mapboxgl-touch-pan-blocker{color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;justify-content:center;text-align:center;position:absolute;display:flex;align-items:center;top:0;left:0;width:100%;height:100%;background:#000000b3;opacity:0;pointer-events:none;transition:opacity .75s ease-in-out;transition-delay:1s}
.mapboxgl-scroll-zoom-blocker-show,.mapboxgl-touch-pan-blocker-show{opacity:1;transition:opacity .1s ease-in-out}
.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page,.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page .mapboxgl-canvas{touch-action:pan-x pan-y}


/* ==== Depth samples (style guide) ======================================== */
/* ==== Homepage hero (Dave 2026-10-26): typographic on a soft lime/grey panel; no illustration ==== */
.cc-home-sections .cc-hero { padding: var(--cc-space-6) var(--cc-space-5); border-radius: var(--cc-radius-lg); background: radial-gradient(ellipse at 92% 0%, color-mix(in srgb, var(--cc-lime) 24%, transparent) 0, transparent 55%), radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--cc-lime) 12%, transparent) 0, transparent 50%), var(--cc-surface-tint); }
@media (min-width: 64rem) { .cc-home-sections .cc-hero { padding: var(--cc-space-8) var(--cc-space-7); } }
/* The campsite dot map: straight under the search on phones (the hero's gap cancelled, its top peeks into the first
   screen above the tab bar), beside the text from 1024px */
.cc-hero__map { order: 1; justify-self: center; width: 100%; max-width: 15rem; height: auto; margin-top: calc(-1 * var(--cc-space-4)); }
@media (max-width: 63.99rem) { .cc-home-sections .cc-hero { padding-top: var(--cc-space-5); } }
/* Entrance: the dots fade up once from the first render; if the image is still on its way when site.js runs, the fade
   waits for it (is-waiting) and plays when it arrives (is-in). It starts faint, never invisible, so it still counts
   for LCP, and opacity moves nothing. Reduced motion: no animation. */
@keyframes cc-dots-in { from { opacity: 0.15; } to { opacity: 1; } }
.cc-hero__map { animation: cc-dots-in 900ms var(--cc-ease-out) both; }
.cc-hero__map.is-waiting { animation: none; opacity: 0.15; }
.cc-hero__map.is-in { animation: cc-dots-in 900ms var(--cc-ease-out) both; }
@media (prefers-reduced-motion: reduce) { .cc-hero__map, .cc-hero__map.is-in { animation: none; } .cc-hero__map.is-waiting { opacity: 1; } }
@media (min-width: 64rem) {
  .cc-hero:has(> .cc-hero__map) { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); column-gap: var(--cc-space-7); justify-items: start; text-align: left; }
  .cc-hero:has(> .cc-hero__map) > * { grid-column: 1; }
  .cc-hero:has(> .cc-hero__map) > .cc-hero__map { grid-column: 2; grid-row: 1 / span 4; align-self: center; max-width: 18rem; margin-top: 0; }
}

.sg-depth { border-radius: var(--cc-radius); background: var(--cc-bg); }
.sg-depth--raised { box-shadow: var(--cc-shadow-raised); }
.sg-depth--pressed { box-shadow: var(--cc-shadow-pressed); }
.sg-depth--flat { background: var(--cc-surface-tint); }

/* ==== Contact page: "Updating: {campsite}" under the owners heading ===== */
.cc-updating { padding: var(--cc-space-3) var(--cc-space-4); border-left: 4px solid var(--cc-lime-deep); border-radius: var(--cc-radius-sm); background: var(--cc-surface-tint); }

/* ==== Campsite page v2 (switch campsite-v2) ============================== */
/* Calm: more space between sections, flat information, raised only on what you can click. */
.cc-campsite--v2 { --cc-flow: var(--cc-space-6); }
.cc-campsite--v2 :is(section, figure)[id] { scroll-margin-top: 4.5rem; }
/* Hero: text then map on phones; side by side from 1024px */
.cc-chero { display: grid; gap: var(--cc-space-5); align-items: start; }
@media (min-width: 64rem) { .cc-chero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--cc-space-7); } }
.cc-chero__text { display: grid; gap: var(--cc-space-4); justify-items: start; min-width: 0; }
.cc-chero__title { margin: 0; }
.cc-chero__where { margin: 0; color: var(--cc-ink-muted); }
.cc-chero__essentials { margin: 0; color: var(--cc-ink-muted); font-size: var(--cc-text-small); font-variant-numeric: tabular-nums; }
.cc-chero__actions { display: flex; flex-wrap: wrap; gap: var(--cc-space-3); }
.cc-chero__map { min-width: 0; }
/* Fact chips: information, so flat pills */
.cc-factchips { display: flex; flex-wrap: wrap; gap: var(--cc-space-2); margin: 0; padding: 0; list-style: none; }
.cc-factchip { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.3em 0.75em; border-radius: var(--cc-radius-pill); background: var(--cc-surface-tint); color: var(--cc-ink); font-size: var(--cc-text-small); font-weight: var(--cc-weight-medium); }
.cc-lime .cc-factchip { background: var(--cc-lime-tint); }
.cc-factchip__icon { flex: none; width: 1rem; height: 1rem; }
/* Section nav: slim and sticky; the section in view is pressed */
.cc-secnav { position: sticky; top: 0; z-index: 30; margin-inline: calc(-1 * var(--cc-gutter)); padding: var(--cc-space-2) var(--cc-gutter); border-bottom: 1px solid var(--cc-edge); background: var(--cc-bg); }
.cc-secnav__list { display: flex; gap: var(--cc-space-1); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.cc-secnav__link { display: block; padding: var(--cc-space-2) var(--cc-space-3); border-radius: var(--cc-radius-pill); color: var(--cc-ink-muted); font-size: var(--cc-text-nav); font-weight: var(--cc-weight-medium); text-decoration: none; white-space: nowrap; }
.cc-secnav__link:hover { color: var(--cc-ink); box-shadow: var(--cc-shadow-raised); }
.cc-secnav__link[aria-current="true"] { color: var(--cc-ink); box-shadow: var(--cc-shadow-pressed); }
/* Facilities: flat icon tiles, 2 columns on phones, 4 from 48rem; the small "i" (raised: it is a button) shows the source */
.cc-facilities { display: grid; gap: var(--cc-space-3); }
.cc-ftiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cc-space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .cc-ftiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Top row: icon left, source button right; below, the label at full width with its tick, then the detail */
.cc-ftile { position: relative; display: grid; grid-template-columns: minmax(0, max-content) 1fr; align-content: start; align-items: baseline; column-gap: var(--cc-space-2); min-height: 5.5rem; padding: var(--cc-space-3); border-radius: var(--cc-radius); background: var(--cc-surface-tint); }
.cc-ftile__icon { grid-column: 1 / -1; justify-self: start; width: 1.75rem; height: 1.75rem; margin-bottom: var(--cc-space-2); }
.cc-ftile__label { grid-row: 2; grid-column: 1; font-weight: var(--cc-weight-semibold); line-height: var(--cc-leading-snug); overflow-wrap: break-word; }
.cc-ftile__ok { grid-row: 2; grid-column: 2; color: var(--cc-lime-deep); font-weight: var(--cc-weight-bold); }
.cc-ftile__detail { grid-row: 3; grid-column: 1 / -1; color: var(--cc-ink-muted); font-size: var(--cc-text-small); line-height: var(--cc-leading-snug); }
.cc-ftile__src { grid-column: 1 / -1; height: 0; }
.cc-ftile__srcbtn { position: absolute; top: var(--cc-space-3); right: var(--cc-space-3); display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--cc-bg); box-shadow: var(--cc-shadow-raised); color: var(--cc-ink-muted); font-size: var(--cc-text-small); font-weight: var(--cc-weight-semibold); line-height: 1; cursor: pointer; list-style: none; }
.cc-ftile__srcbtn::-webkit-details-marker { display: none; }
/* Invisible tap area (Dave 2026-11-03): the button stays 24 px; ::before gives it a centred 44 px target inside the tile. */
.cc-ftile__srcbtn::before { content: ""; position: absolute; top: 50%; left: 50%; width: var(--cc-tap-target); height: var(--cc-tap-target); transform: translate(-50%, -50%); }
.cc-ftile__src[open] > .cc-ftile__srcbtn { box-shadow: var(--cc-shadow-pressed); color: var(--cc-ink); }
.cc-ftile__srctext { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(100% + var(--cc-space-1)); margin: 0; padding: var(--cc-space-2) var(--cc-space-3); border: 1px solid var(--cc-edge-strong); border-radius: var(--cc-radius-sm); background: var(--cc-white); color: var(--cc-ink); font-size: var(--cc-text-small); }
.cc-facilities__line, .cc-facilities__prov { margin: 0; color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-facilities__empty { margin: 0; padding: var(--cc-space-4) var(--cc-space-5); border-radius: var(--cc-radius); background: var(--cc-surface-tint); }
.cc-csec__quiet { display: flex; flex-wrap: wrap; gap: var(--cc-space-2) var(--cc-space-5); margin: 0; color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-csec__owner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cc-space-2) var(--cc-space-3); }
/* What's nearby: segmented tabs (raised; the selected one pressed), one list per tab. No JS: stacked sections. */
.cc-ntabs__list { display: inline-flex; flex-wrap: wrap; gap: var(--cc-space-2); margin-bottom: var(--cc-space-4); padding: var(--cc-space-1); border-radius: var(--cc-radius-pill); background: var(--cc-surface-tint); }
.cc-ntabs__list[hidden] { display: none; }
.cc-ntabs__tab { min-height: 2.75rem; padding: var(--cc-space-2) var(--cc-space-4); border: 1px solid var(--cc-edge); border-radius: var(--cc-radius-pill); background: var(--cc-bg); color: var(--cc-ink); font: inherit; font-size: var(--cc-text-nav); font-weight: var(--cc-weight-medium); box-shadow: var(--cc-shadow-raised); cursor: pointer; }
.cc-ntabs__tab[aria-selected="true"] { background: var(--cc-bg-pressed); font-weight: var(--cc-weight-semibold); box-shadow: var(--cc-shadow-pressed); }
.cc-lime .cc-ntabs__tab[aria-selected="true"] { background: var(--cc-lime); border-color: var(--cc-lime); }
.cc-ntabs__panel + .cc-ntabs__panel { margin-top: var(--cc-space-5); }
.cc-ntabs__heading { margin: 0 0 var(--cc-space-2); font-size: var(--cc-text-h3); }
.cc-nlist { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .cc-nlist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cc-space-6); } }
.cc-nlist__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--cc-space-3); align-items: center; min-height: 3.5rem; padding: var(--cc-space-2) 0; border-bottom: 1px solid var(--cc-edge); }
.cc-nlist__icon { width: 1.25rem; height: 1.25rem; color: var(--cc-ink-muted); }
.cc-nlist__name { font-weight: var(--cc-weight-medium); overflow-wrap: anywhere; }
.cc-nlist__cat { display: block; color: var(--cc-ink-muted); font-size: var(--cc-text-small); font-weight: var(--cc-weight-regular); }
.cc-nlist__dist { color: var(--cc-ink-muted); font-size: var(--cc-text-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-nlist--summary { margin-top: var(--cc-space-3); }
.cc-nlist--summary .cc-nlist__name { font-weight: var(--cc-weight-regular); }
/* Nearby campsites: compact whole-card links in a scroll-snap row (clickable, so raised); no images */
.cc-crow { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--cc-gutter); margin-inline: calc(-1 * var(--cc-gutter)); padding: var(--cc-space-3) var(--cc-gutter) var(--cc-space-5); scrollbar-width: thin; }
.cc-crow:focus-visible { outline: var(--cc-focus-width) solid var(--cc-lime-deep); outline-offset: calc(-1 * var(--cc-focus-width)); }
.cc-crow__list { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 17rem); gap: var(--cc-space-4); margin: 0; padding: 0; list-style: none; }
.cc-crow__item { display: flex; scroll-snap-align: start; }
.cc-ccard { position: relative; flex: 1; display: grid; align-content: start; gap: var(--cc-space-2); padding: var(--cc-space-4); border: 1px solid var(--cc-edge); border-radius: var(--cc-radius); background: var(--cc-bg); box-shadow: var(--cc-shadow-raised); transition: transform var(--cc-dur) var(--cc-ease); }
.cc-look .cc-ccard { border-color: var(--cc-edge-strong); }
.cc-ccard:hover { transform: translateY(-2px); }
.cc-ccard:active { box-shadow: var(--cc-shadow-pressed); transform: none; }
.cc-ccard:has(.cc-ccard__link:focus-visible) { outline: var(--cc-focus-width) solid var(--cc-lime-deep); outline-offset: var(--cc-focus-offset); }
.cc-ccard__title { margin: 0; font-size: var(--cc-text-h3); }
.cc-ccard__link { color: var(--cc-ink); text-decoration: none; }
.cc-ccard__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cc-ccard__link:focus-visible { outline: none; }
.cc-ccard__meta { margin: 0; color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
.cc-ccard__chips { display: flex; flex-wrap: wrap; gap: var(--cc-space-1); margin: 0; padding: 0; list-style: none; }
.cc-ccard__chips li { padding: 0.1em 0.6em; border-radius: var(--cc-radius-pill); background: var(--cc-surface-tint); font-size: var(--cc-text-small); }
@media (prefers-reduced-motion: reduce) { .cc-ccard:hover { transform: none; } }
/* FAQ and sources, lighter: no borders (the toggles keep their raised shadow) */
.cc-campsite--v2 .cc-details { border-color: transparent; }
.cc-campsite--v2 .cc-sources { border-top-width: 1px; }

/* ==== Products (Phase F, Dave 2026-10-26: Amazon kit lists) ===============
   Product cards are clickable, so they are raised cards (.cc-card, one stretched link); the list intro, "what to
   look for", the specs table and the disclaimer (.cc-amazon) are flat. Product images sit on a white panel because
   Amazon's images have white backgrounds; with no image (data over 24 hours old) the panel is an empty tint. */
.cc-kit { padding-block: var(--cc-space-5) var(--cc-space-7); }
.cc-products__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cc-space-4); margin: 0; padding: 0; list-style: none; }
.cc-products__grid > li { display: flex; min-width: 0; }
.cc-products__grid > li > .cc-card { flex: 1; min-width: 0; }
@media (min-width: 48rem) { .cc-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cc-space-5); } }
@media (min-width: 75rem) { .cc-products__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cc-product__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; margin: var(--cc-space-3) var(--cc-space-3) 0; padding: var(--cc-space-3); overflow: hidden; border-radius: var(--cc-radius); background: var(--cc-white); }
.cc-product__media:empty { background: var(--cc-surface-tint); }
.cc-product__img { width: 100%; height: 100%; object-fit: contain; }
.cc-product .cc-card__body { gap: var(--cc-space-1); padding: var(--cc-space-3) var(--cc-space-4) var(--cc-space-4); }
.cc-product .cc-card__title { overflow-wrap: anywhere; }
.cc-product__reason { margin: 0; color: var(--cc-ink-muted); font-size: var(--cc-text-small); line-height: var(--cc-leading-snug); }
.cc-product__price { margin: auto 0 0; padding-top: var(--cc-space-2); font-size: var(--cc-text-small); font-weight: var(--cc-weight-semibold); line-height: var(--cc-leading-snug); }
.cc-product__price--none { color: var(--cc-ink-muted); font-weight: var(--cc-weight-medium); }
.cc-product__highlight { margin: 0; font-size: var(--cc-text-small); font-weight: var(--cc-weight-semibold); line-height: var(--cc-leading-snug); }
.cc-products__note { margin: 0; color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
/* Phones (below 640px): one horizontal card per row, the image square on its white tile at about 35% on the left,
   the text on the right; the whole card stays one link (.cc-card__link::after). From 640px the grid above applies. */
@media (max-width: 39.99rem) {
  .cc-products__grid { grid-template-columns: minmax(0, 1fr); gap: var(--cc-space-3); }
  .cc-products__grid .cc-product { flex-direction: row; align-items: stretch; }
  .cc-products__grid .cc-product__media { flex: 0 0 35%; align-self: flex-start; margin: var(--cc-space-3) 0 var(--cc-space-3) var(--cc-space-3); padding: var(--cc-space-2); }
  .cc-products__grid .cc-product .cc-card__body { min-width: 0; padding: var(--cc-space-3) var(--cc-space-4) var(--cc-space-3) var(--cc-space-3); }
}
/* Guides (switch guides): long-form text with numbered citations to the sources list; the nearest-gas lookup keeps
   bottled gas and LPG autogas in two separate flat panels */
.cc-guide { padding-block: var(--cc-space-5) var(--cc-space-7); }
.cc-cite { font-size: 0.7em; line-height: 0; }
.cc-cite a { text-decoration: none; }
.cc-gas-near__row { display: flex; flex-wrap: wrap; gap: var(--cc-space-3); align-items: stretch; }
.cc-gas-near__row .cc-select { flex: 1 1 16rem; max-width: 28rem; }
.cc-gas-near__results { display: grid; gap: var(--cc-space-4); }
@media (min-width: 48rem) { .cc-gas-near__results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cc-gas-near__list { padding: var(--cc-space-4) var(--cc-space-5); border-radius: var(--cc-radius-lg); background: var(--cc-surface-tint); }
.cc-gas-near__list h3 { margin: 0 0 var(--cc-space-2); font-size: var(--cc-text-h3); }
.cc-gas-near__list ol { margin: var(--cc-space-3) 0 0; padding-left: 1.4em; }
.cc-gas-near__list li + li { margin-top: var(--cc-space-1); }
.cc-gas-near__note { margin: 0; color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
/* Photos (switch site-photos): the image box is reserved by its width/height attributes (CLS 0) and scales to the
   column; the credit line is flat, small and muted, with the licence, source and Report links */
.cc-photo { margin: 0; }
.cc-photo__img { display: block; width: 100%; height: auto; border-radius: var(--cc-radius-lg); background: var(--cc-surface-tint); }
.cc-photo--small { max-width: 40rem; } /* largest file 640 px: shown at its own size, not stretched */
.cc-photo__credit { margin-top: var(--cc-space-2); color: var(--cc-ink-muted); font-size: var(--cc-text-small); line-height: var(--cc-leading-snug); }
.cc-photo__picture { display: block; }
/* Photo credit behind an info button (feature photo-credit-popover). 44 px target, 24 px circle: flat, it sits on a photo.
   85% dark keeps lime 4.47:1 over pure white and 7.86:1 over black. The popover is native (top layer); site.js places it. */
.cc-card__photo { position: relative; margin: var(--cc-space-3) var(--cc-space-3) 0; }
.cc-card__photo .cc-card__img { width: 100%; margin: 0; }
.cc-photo--button { position: relative; }
.cc-photocredit { position: absolute; right: 0; bottom: 0; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; color: var(--cc-lime); font-size: var(--cc-text-small); font-weight: var(--cc-weight-semibold); line-height: 1; cursor: pointer; }
.cc-photocredit__i { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: color-mix(in srgb, var(--cc-surface-dark) 85%, transparent); }
.cc-photocredit:focus-visible { outline: none; }
.cc-photocredit:focus-visible .cc-photocredit__i { outline: var(--cc-focus-width) solid var(--cc-lime); outline-offset: 1px; }
.cc-photocredit__pop { max-width: min(20rem, calc(100vw - 2 * var(--cc-space-3))); padding: var(--cc-space-2) var(--cc-space-3); border: 1px solid var(--cc-edge); border-radius: var(--cc-radius-sm); background: var(--cc-bg); color: var(--cc-ink); font-size: var(--cc-text-small); line-height: var(--cc-leading-snug); }
.cc-photocredit__pop.is-placed { inset: auto; top: var(--cc-credit-top); left: var(--cc-credit-left); margin: 0; }
@media (scripting: enabled) { .cc-photocredit__pop:not(.is-placed) { opacity: 0; } }
@supports not selector(:popover-open) { .cc-photocredit { display: none; } .cc-photocredit__pop:not(.is-placed) { display: block; position: static; margin-top: var(--cc-space-2); opacity: 1; } }
@media print { .cc-photocredit { display: none; } .cc-photocredit__pop { display: block; position: static; margin: var(--cc-space-2) 0 0; padding: 0; border: 0; opacity: 1; } }
/* Campsite hero photo (Phase H3): 3:2, flat (not clickable: no shadow), under the location line. The img width/height
   attributes are the box (never wider than the file or 1.5 x its height, so cover never upscales); max-width fits it
   to the column on phones; the card radius token. */
.cc-photo--hero { justify-self: stretch; min-width: 0; }
.cc-photo__hero-img { display: block; max-width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--cc-radius-lg); background: var(--cc-surface-tint); }
/* From 64rem, with a photo: the photo takes the map's column (the map has its own section), top-aligned with the H1.
   The text block spans the hero as two columns; its explicit rows (one per left-hand item, from cc-chero--rows-N)
   end in a 1fr row that absorbs the photo's extra height, so the left-hand gaps never stretch. */
@media (min-width: 64rem) {
  .cc-chero--photo { grid-template-columns: minmax(0, 1fr); }
  .cc-chero--photo .cc-chero__text { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: var(--cc-space-7); }
  .cc-chero--photo .cc-chero__text > * { grid-column: 1; }
  .cc-chero--photo .cc-chero__text > .cc-photo--hero { grid-column: 2; grid-row: 1 / -1; }
  .cc-chero--rows-3 .cc-chero__text { grid-template-rows: repeat(3, auto) 1fr; }
  .cc-chero--rows-4 .cc-chero__text { grid-template-rows: repeat(4, auto) 1fr; }
  .cc-chero--rows-5 .cc-chero__text { grid-template-rows: repeat(5, auto) 1fr; }
  .cc-csec--map .cc-placemap__frame { aspect-ratio: auto; width: 100%; height: var(--cc-map-section-max-h); }   /* full width; the static image crops (cover) */
}
.cc-kit-guide__list { display: grid; gap: var(--cc-space-4); margin: 0; padding: var(--cc-space-5); border-radius: var(--cc-radius-lg); background: var(--cc-surface-tint); }
@media (min-width: 48rem) { .cc-kit-guide__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cc-space-5) var(--cc-space-6); } }
.cc-kit-guide__item dt { font-weight: var(--cc-weight-semibold); }
.cc-kit-guide__item dd { margin: var(--cc-space-1) 0 0; }
.cc-kit__links { display: flex; flex-wrap: wrap; gap: var(--cc-space-3); }
@media (prefers-reduced-motion: reduce) { .cc-product:hover { transform: none; } }

/* ==== Sticky header (switch header-sticky, Dave 2026-10-26) ===============
   site.js sets html[data-cc-header] to top | hidden | shown. "top": the header in the page as always. Stuck
   (hidden or shown): the header is fixed at exactly its own place and size (the slot keeps its space, so nothing
   moves), its dark pill becomes a translucent ::before layer with backdrop blur, and every visible change is a
   transform or clip: hidden slides it up out of view; shown lifts it 8px from the top and, on desktop, clips the
   pill to 60px. The tab bar and the phone menu live inside the header and are fixed to the screen, so the header
   element itself is never transformed or blurred (that would pin them to it). Lengths come from site.js:
   --cc-hdr-lift, --cc-hdr-clip, --cc-hdr-hide on the header; --cc-secnav-shift on the section nav. */
.cc-header-slot { display: flow-root; }
html:has([data-cc-sticky]) { scroll-padding-top: 4.5rem; }
html:has([data-cc-sticky]) .cc-campsite--v2 :is(section, figure)[id] { scroll-margin-top: 0; }
html[data-cc-header="hidden"] .cc-header-slot > .cc-header,
html[data-cc-header="shown"] .cc-header-slot > .cc-header {
  position: fixed; z-index: 35; top: var(--cc-space-4); left: 0; right: 0;
  width: calc(100% - 2 * var(--cc-gutter)); max-width: calc(var(--cc-wide) - 2 * var(--cc-gutter)); margin: 0 auto;
  background: transparent; border-color: transparent; pointer-events: none;
}
.cc-header-slot > .cc-header::before {
  content: ""; position: absolute; z-index: -1; inset: -1px; border-radius: inherit; background: var(--cc-surface-dark);
  opacity: 0; transition: transform var(--cc-dur) var(--cc-ease), clip-path var(--cc-dur) var(--cc-ease);
}
html[data-cc-header="hidden"] .cc-header-slot > .cc-header::before,
html[data-cc-header="shown"] .cc-header-slot > .cc-header::before { opacity: 1; clip-path: inset(0 0 0 0 round var(--cc-radius-lg)); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cc-header-slot > .cc-header::before { background: color-mix(in srgb, var(--cc-surface-dark) 85%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
}
.cc-header-slot > .cc-header :is(.cc-header__bar, .cc-header__search) { transition: transform var(--cc-dur) var(--cc-ease); }
html[data-cc-header] .cc-header-slot > .cc-header :is(.cc-header__bar, .cc-header__search, .cc-tabbar, .cc-nav__list) { pointer-events: auto; }
html[data-cc-header="shown"] .cc-header-slot > .cc-header::before { transform: translateY(calc(-1 * var(--cc-hdr-lift-bg, 0px))); clip-path: inset(0 0 var(--cc-hdr-clip, 0px) 0 round var(--cc-radius-lg)); }
html[data-cc-header="shown"] .cc-header-slot > .cc-header :is(.cc-header__bar, .cc-header__search) { transform: translateY(calc(-1 * var(--cc-hdr-lift, 0px))); }
html[data-cc-header="hidden"] .cc-header-slot > .cc-header::before,
html[data-cc-header="hidden"] .cc-header-slot > .cc-header :is(.cc-header__bar, .cc-header__search) { transform: translateY(calc(-1 * var(--cc-hdr-hide, 8rem))); }
@media (min-width: 64rem) {
  .cc-header-slot > .cc-header .cc-nav__list { transition: transform var(--cc-dur) var(--cc-ease); }
  html[data-cc-header="shown"] .cc-header-slot > .cc-header .cc-nav__list { transform: translateY(calc(-1 * var(--cc-hdr-lift, 0px))); }
  html[data-cc-header="hidden"] .cc-header-slot > .cc-header .cc-nav__list { transform: translateY(calc(-1 * var(--cc-hdr-hide, 8rem))); }
}
/* Switching between "top" and stuck happens out of view or at the very top: never animated */
html.cc-header-instant .cc-header-slot > .cc-header::before,
html.cc-header-instant .cc-header-slot > .cc-header :is(.cc-header__bar, .cc-header__search, .cc-nav__list) { transition: none; }
/* Section nav: docks under the shown header, at the top when it is hidden (transform only) */
html[data-cc-header] .cc-secnav { transform: translateY(var(--cc-secnav-shift, 0px)); }
html[data-cc-header] .cc-secnav.is-docking { transition: transform var(--cc-dur) var(--cc-ease); }
@media (prefers-reduced-motion: reduce) {
  .cc-header-slot > .cc-header::before,
  .cc-header-slot > .cc-header :is(.cc-header__bar, .cc-header__search, .cc-nav__list),
  html[data-cc-header] .cc-secnav.is-docking { transition: none; }
}

/* ==== Checklist (guide-camping-checklist) =============================== */
/* Groups of .cc-choice checkboxes; flat information panels (ticking is the only interaction). */
.cc-checklist { display: grid; gap: var(--cc-space-4); }
@media (min-width: 48rem) { .cc-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cc-checklist__group { padding: var(--cc-space-4); border: 1px solid var(--cc-edge); border-radius: var(--cc-radius); background: var(--cc-surface-tint); }
.cc-checklist__title { margin: 0 0 var(--cc-space-3); }
.cc-checklist__list { display: grid; gap: var(--cc-space-2); margin: 0; padding: 0; list-style: none; }
.cc-checklist__link { color: var(--cc-ink-muted); font-size: var(--cc-text-small); }
/* The print button needs JavaScript; without it the browser's own print still works. */
@media (scripting: none) { [data-cc-print] { display: none; } }

/* ==== Cookie choice (feature ga4) ======================================= */
/* A flat panel fixed at the bottom (above the phone tab bar, like the phone menu), so showing it never moves the page.
   Accept and Reject are the same .cc-btn, equal width on one row. Hidden until site.js shows it. */
.cc-consent {
  position: fixed; z-index: 42; inset-inline: var(--cc-space-3); bottom: calc(var(--cc-space-3) + env(safe-area-inset-bottom));
  max-width: 35rem; margin: 0 auto; padding: var(--cc-space-4) var(--cc-space-5);
  background: var(--cc-bg); border: 1px solid var(--cc-edge-strong); border-radius: var(--cc-radius-lg);
}
.cc-consent[hidden] { display: none; }
.cc-consent__text { margin: 0 0 var(--cc-space-4); font-size: var(--cc-text-small); line-height: var(--cc-leading-snug); }
.cc-consent__actions { display: flex; gap: var(--cc-space-3); }
.cc-consent__actions .cc-btn { flex: 1 1 0; }
@media (max-width: 63.99rem) {
  body:has(.cc-tabbar:not(.cc-tabbar--preview)) .cc-consent { bottom: calc(var(--cc-tabbar-height) + 2 * var(--cc-space-3) + env(safe-area-inset-bottom)); }
}
@media (min-width: 64rem) {
  .cc-consent { inset-inline: var(--cc-space-5) auto; bottom: var(--cc-space-5); }
}
@media print { .cc-consent { display: none; } }

/* Printing a checklist guide: only the title, the section headings and the lists, ink only. */
@media print {
  body.cc-guide-page:has(.cc-checklist) { background: #fff; color: #000; }
  body.cc-guide-page:has(.cc-checklist) :is(.cc-skip, .cc-header-slot, .cc-tabbar, .cc-footer) { display: none; }
  body.cc-guide-page:has(.cc-checklist) main > :not(h1, h2, .cc-checklist) { display: none; }
  body.cc-guide-page:has(.cc-checklist) .cc-checklist { display: block; columns: 2; column-gap: 2rem; }
  body.cc-guide-page:has(.cc-checklist) .cc-checklist__group { break-inside: avoid; margin-bottom: 1rem; padding: 0; border: 0; background: none; }
  body.cc-guide-page:has(.cc-checklist) :is(.cc-checklist__link, .cc-cite) { display: none; }
  body.cc-guide-page:has(.cc-checklist) .cc-checklist__title a { color: #000; text-decoration: none; }
  body.cc-guide-page:has(.cc-checklist) .cc-choice__input { border: 1px solid #000; background-color: #fff; }
  body.cc-guide-page:has(.cc-checklist) .cc-choice__input:not(:checked) { background-image: none; }
  body.cc-guide-page:has(.cc-checklist) .cc-choice__input:checked { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}