/* ============================================================
   Meditation Timer Online — Base stylesheet & design tokens
   Zero-dependency, calm, accessible, mobile-first.
   ============================================================ */

:root {
  /* --- Color tokens: cool cyan/blue/slate palette (v1.2) --- */
  --c-bg: #e9f0f3;            /* cool pale grey-blue page background */
  --c-surface: #f6fafc;       /* cards / dials */
  --c-surface-2: #dce7ec;     /* subtle wells */
  --c-ink: #1c2b38;           /* primary text — deep slate (darkened) */
  --c-ink-soft: #2b3e4d;      /* secondary text — deepened for contrast on glass */
  --c-muted: #4f6475;         /* captions / meta — deepened */
  --c-line: #cfdde3;          /* hairline borders */
  --c-accent: #5590ed;        /* brand blue */
  --c-accent-strong: #2f6bd6;
  --c-accent-soft: #dde9fc;
  --c-calm: #7fa8ec;          /* breathing orb base (light blue family) */
  --c-warn: #b0713a;          /* small warnings (warm, deliberate contrast) */
  --c-err: #9c3f34;

  /* --- Typography (system stacks only — performance & privacy) --- */
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* --- Spacing scale --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* --- Radii / shadows --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(35, 50, 60, 0.06), 0 4px 14px rgba(35, 50, 60, 0.07);
  --shadow-2: 0 2px 4px rgba(35, 50, 60, 0.08), 0 12px 32px rgba(35, 50, 60, 0.12);

  /* --- Layout --- */
  --nav-h: 60px;
  --maxw: 1080px;
  --maxw-tight: 760px;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-ink);
  background:
    radial-gradient(1200px 500px at 85% -10%, #e2edf1 0%, transparent 60%),
    var(--c-bg);
  background-color: var(--c-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; }
a { color: var(--c-accent-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-accent-strong); text-decoration-thickness: 2px; }
::selection { background: var(--c-accent-soft); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--c-ink);
  color: var(--c-bg);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 0 0 var(--r-sm) 0;
  z-index: 200;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(236, 243, 246, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--sp-5);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.brand {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand:hover { color: var(--c-accent-strong); }
.brand-mark { color: var(--c-accent); margin-right: 0.15em; }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  display: inline-block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  color: var(--c-ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-links a:hover { background: var(--c-surface-2); color: var(--c-ink); }
.nav-links a[aria-current="page"] {
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  font-weight: 600;
}

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }
.wrap-tight { max-width: var(--maxw-tight); margin: 0 auto; padding: 0 var(--sp-5); }
main { flex: 1; }

section { margin-bottom: var(--sp-7); }

.section-head { margin-bottom: var(--sp-5); }
.section-head h2 { margin: 0 0 var(--sp-2); }
.lede { font-size: 1.06rem; color: var(--c-ink-soft); max-width: 64ch; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.25; font-weight: 600; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.4em; }
li { margin-bottom: var(--sp-2); }

.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent-strong);
  margin: 0 0 var(--sp-3);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 0.7em 1.4em;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease,
    border-color 0.15s ease;
  min-height: 44px;
  background: transparent;
  color: var(--c-ink);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn.is-active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.btn:focus-visible, a:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}
.btn-primary { background: var(--c-accent); color: #fff; box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--c-accent-strong); color: #fff; }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-ghost { border-color: var(--c-line); background: var(--c-surface); }
.btn-ghost:hover { border-color: var(--c-accent); background: var(--c-accent-soft); }
.btn-lg { font-size: 1.15rem; padding: 0.85em 2em; }

/* ---------- Cards & wells ---------- */
.card {
  background: rgba(247, 251, 253, 0.72);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
}
.well {
  background: var(--c-surface-2);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}

.grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ---------- Chips / preset buttons ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  min-height: 40px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-ink-soft);
  padding: 0.35em 1em;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.chip:hover { border-color: var(--c-accent); color: var(--c-accent-strong); }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}

/* ---------- Timer dial ---------- */
.timer-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-6) var(--sp-5);
}
.dial-wrap {
  position: relative;
  width: min(78vw, 340px);
  margin-inline: auto; /* center the dial (and its text) in the card */
}
.dial { width: 100%; height: auto; }
.dial-bg { fill: none; stroke: rgba(35, 50, 60, 0.14); stroke-width: 10; }
.dial-fg {
  fill: none;
  stroke: url(#dialGrad);
  stroke-width: 10;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.4s linear;
  filter: drop-shadow(0 0 6px rgba(85, 144, 237, 0.45));
}
.dial-time {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.dial-time > * {
  width: 100%;
  text-align: center;
}
.time-digits {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 11vw, 4.2rem);
  font-weight: 300;
  line-height: 1;
  color: var(--c-ink);
  letter-spacing: 0.01em;
}
.time-state { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); margin-top: var(--sp-2); }

/* Glass panels — deep frosted "tinted" look: low fill opacity so the
   background photo shows through, strong blur for the matte veil, and a
   deeper cool slate-blue tint (less white) so the panel reads on bright
   photos. Tool timer cards keep their text readable via a soft halo. */
.glass {
  background: linear-gradient(165deg, rgba(150, 178, 232, 0.4) 0%, rgba(92, 126, 204, 0.26) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  backdrop-filter: blur(28px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 26px 80px rgba(15, 32, 45, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.card.glass {
  background: linear-gradient(165deg, rgba(136, 168, 228, 0.34) 0%, rgba(78, 113, 196, 0.22) 100%);
}

/* Readability halo for dark text sitting on the deeper glass + photo. */
.card.glass h1,
.card.glass .time-digits {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 20px rgba(238, 246, 250, 0.5);
}
.card.glass .lede,
.card.glass .time-state,
.card.glass .range-head label,
.card.glass .eyebrow,
.card.glass .range-value {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ---------- Duration slider ---------- */
.range-row { width: 100%; max-width: 460px; margin: 0 auto; }
.range-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}
.range-head label { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.range-value { font-family: var(--font-mono); font-size: 1.05rem; color: var(--c-accent-strong); font-weight: 600; }

input[type="range"].time-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--r-pill);
  background:
    linear-gradient(90deg, var(--c-accent) var(--fill, 0%), rgba(35, 50, 60, 0.14) var(--fill, 0%));
  outline-offset: 4px;
  cursor: pointer;
}
input[type="range"].time-range:focus-visible { outline: 3px solid var(--c-accent); }
input[type="range"].time-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--c-accent);
  box-shadow: 0 2px 8px rgba(51, 46, 38, 0.25);
  transition: transform 0.1s ease;
}
input[type="range"].time-range::-webkit-slider-thumb:hover { transform: scale(1.1); }
input[type="range"].time-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--c-accent);
  box-shadow: 0 2px 8px rgba(51, 46, 38, 0.25);
}
input[type="range"].time-range::-moz-range-track { background: transparent; }

/* Phase label shown during breathing */
.phase-label {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--c-accent-strong);
  text-transform: capitalize;
}
.phase-count {
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--c-muted);
  min-width: 2ch;
  text-align: center;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* Breathing orb — scale is driven per-frame by JS (js/breathing.js),
   so no CSS transition here: a transition would lag behind the phase
   math and break the inhale-hold-exhale-hold motion. Base size is kept
   modest (and the JS caps the max scale) so the enlarged ball never
   overlaps the phase label above or the counter below. */
.orb-wrap { position: relative; display: grid; place-items: center; }
.orb {
  width: min(48vw, 164px);
  height: min(48vw, 164px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ecf4ff 0%, #b6d0fa 52%, #6d99ee 100%);
  box-shadow:
    0 16px 44px rgba(47, 107, 214, 0.32),
    inset 0 -12px 28px rgba(20, 48, 128, 0.2);
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: var(--sp-8);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(244, 249, 251, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-footer .wrap {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 2fr 1fr 1fr;
}
.site-footer h3 { font-size: 1rem; margin: 0 0 var(--sp-3); }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links li { margin-bottom: var(--sp-2); }
.foot-links a { color: var(--c-ink-soft); text-decoration: none; }
.foot-links a:hover { color: var(--c-accent-strong); text-decoration: underline; }
.foot-note {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--c-muted);
  border-top: 1px solid var(--c-line);
  padding-top: var(--sp-4);
  margin: 0;
}
.privacy-note { max-width: 56ch; font-size: 0.95rem; color: var(--c-ink-soft); }
.privacy-note p { margin: 0 0 var(--sp-2); }

/* ---------- Article / guide layout ---------- */
/* Guides sit on a translucent cool-paper sheet so long-form text stays
   readable no matter which background photo is active behind it. */
.article {
  background: rgba(247, 251, 253, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--sp-5);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-7);
}
.article header { margin-bottom: var(--sp-6); }
.article-meta { font-size: 0.85rem; color: var(--c-muted); display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-3); }
.article-body h2 { margin-top: var(--sp-7); }
.article-body h3 { margin-top: var(--sp-6); }
.article-body .lead { font-size: 1.15rem; color: var(--c-ink-soft); }
.key-takeaways {
  background: var(--c-accent-soft);
  border-left: 4px solid var(--c-accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
}
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--sp-5) 3.2em;
  margin: 0;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-family: var(--font-display);
}

/* ---------- FAQ ---------- */
.faq details {
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--c-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; color: var(--c-accent); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p:last-child { margin-bottom: 0; }

/* ---------- Breadcrumbs ---------- */
.breadcrumb { font-size: 0.85rem; color: var(--c-muted); margin-bottom: var(--sp-4); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; margin: 0; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: var(--sp-2); color: var(--c-line); }
.breadcrumb a { color: var(--c-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-accent-strong); text-decoration: underline; }

/* Secondary explainer sections on tool pages: translucent cool sheet so
   headings stay readable above whichever background photo is active. */
.wrap-tight.section-head {
  background: rgba(247, 251, 253, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}

/* ---------- Misc components ---------- */
.stat-row { display: flex; gap: var(--sp-6); flex-wrap: wrap; justify-content: center; }
.stat { text-align: center; }
.stat b { display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--c-accent-strong); }
.stat span { font-size: 0.85rem; color: var(--c-muted); }

.callout {
  border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-warn);
  margin: var(--sp-5) 0;
}
.callout p:last-child { margin-bottom: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hidden { display: none !important; }

/* ---------- 404 ---------- */
.center-404 {
  text-align: center;
  padding: var(--sp-6) var(--sp-5);
  background: rgba(247, 251, 253, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  max-width: 620px;
  margin: var(--sp-7) auto;
}
.center-404 h1 { font-size: clamp(3rem, 10vw, 6rem); margin-bottom: var(--sp-3); }

/* ---------- Background customization (floating icon + popover) ----------
   The icon floats in the left gutter beside the centred timer card,
   below the nav bar; on narrow screens it docks bottom-left. */
.bg-toggle {
  position: fixed;
  z-index: 150;
  top: 46vh;
  transform: translateY(-50%);
  left: max(10px, calc((100vw - 860px) / 2 - 56px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: rgba(255, 255, 255, 0.75);
  color: var(--c-accent-strong);
  cursor: pointer;
  margin: 0;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow-1);
  -webkit-tap-highlight-color: transparent;
}
.bg-toggle:hover {
  background: #fff;
  box-shadow: var(--shadow-2);
}
.bg-toggle[aria-expanded="true"] {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.bg-toggle svg { width: 22px; height: 22px; display: block; }

@media (max-width: 960px) {
  .bg-toggle {
    top: auto;
    bottom: 18px;
    left: 12px;
    transform: none;
  }
  .bg-popover {
    top: auto;
    bottom: 76px;
  }
}

.bg-popover {
  position: fixed;
  z-index: 300;
  top: calc(var(--nav-h) + 8px);
  left: 12px;
  width: min(372px, calc(100vw - 24px));
  max-height: calc(100vh - var(--nav-h) - 24px);
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-5);
  background: rgba(250, 253, 255, 0.95);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}
.bg-popover[hidden] { display: none; }
.bg-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.bg-popover-head strong { font-family: var(--font-display); font-size: 1.05rem; }
.bg-close {
  border: 0;
  background: transparent;
  color: var(--c-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15em 0.4em;
  border-radius: var(--r-sm);
}
.bg-close:hover { color: var(--c-ink); background: var(--c-accent-soft); }

.bg-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bg-swatch {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 5px rgba(51, 46, 38, 0.22);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bg-swatch:hover { transform: scale(1.1); }
.bg-swatch.is-active { box-shadow: 0 0 0 3px var(--c-accent); }

.bg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.bg-label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  flex-basis: 100%;
  margin-bottom: -0.25em;
}
.bg-hint { font-size: 0.82rem; color: var(--c-muted); margin: var(--sp-3) 0 0; }
.bg-dim { display: inline-flex; align-items: center; gap: var(--sp-2); }
.bg-dim input { width: 140px; accent-color: var(--c-accent); }
.bg-dim output { font-family: var(--font-mono); font-size: 0.85rem; color: var(--c-accent-strong); min-width: 3ch; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .site-footer .wrap { grid-template-columns: 1fr; gap: var(--sp-4); }
  .brand { font-size: 1rem; }
  section { margin-bottom: var(--sp-6); }
  .time-digits { font-size: clamp(2.4rem, 15vw, 3.4rem); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}