/* Style B-pastel-glass — local-hero + pastels + frosted glass */
:root {
  --ink: #2a3340;
  --ink-muted: #5c6b7a;
  --bg: #eef4fb;
  --bg-soft: #f7fafc;
  --brand: #7eb6d9;
  --brand-ink: #4a7fa3; /* accents only — body links use --link-ink */
  --link-ink: #36658a; /* AA body links on white/glass */
  --brand-soft: #d9ecf7;
  --cta: #e89b8c;
  --cta-ink: #3b2420;
  --cta-hover: #de8a79;
  --border: rgba(255, 255, 255, 0.55);
  --border-solid: #c5d5e4;
  --star: #e0b44e;
  --ok: #5a9a7a;
  --header: transparent;
  --hero-scrim-top: rgba(126, 182, 217, 0.35);
  --hero-scrim-bot: rgba(47, 86, 116, 0.84); /* deepened for white type over light photos */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-blur: 16px;
  --glass-sat: 1.2;
  --radius: 12px;
  --radius-pill: 12px;
  --font: Inter, "Segoe UI", system-ui, sans-serif;
  --max-read: 42rem;
  --max: 68rem;
  --space-section: clamp(3rem, 5vw, 4.5rem);
  --pad: clamp(1.25rem, 3vw, 2rem);
  --fs-display: clamp(2.1rem, 4.5vw, 2.85rem);
  --fs-h2: 1.5rem;
  --fs-h3: 1.125rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
}

/* Shared glass utility — copy into styles.css or @import */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(74, 127, 163, 0.12);
  border-radius: var(--radius);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-bg-strong); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: var(--glass-bg-strong);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}