*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  /* Own stacking context, so the fixed background layers (negative z-index)
     paint above this background instead of behind it. */
  isolation: isolate;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
ol, ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--rose); }

/* Cards scale/slide in from off-position. Clip so they never cause sideways
   scroll on phones. `clip` (Safari 16+) does not create a scroll container;
   `hidden` is the fallback for older iOS. */
main { overflow-x: hidden; overflow-x: clip; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
[tabindex="-1"]:focus { outline: none; }

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

.skip-link {
  position: fixed;
  top: calc(env(safe-area-inset-top) + var(--space-2));
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--rose);
  color: var(--on-rose);
  border-radius: 12px;
  font-weight: 800;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.heart-icon { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ---------- Background (fixed, decorative) ---------- */
.bg-wash, .bg-pattern, .bg-clouds {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.bg-wash {
  z-index: -2;
  background:
    radial-gradient(55% 40% at 90% 5%, rgba(244, 114, 166, 0.30), transparent 70%),
    radial-gradient(50% 40% at 0% 45%, rgba(235, 217, 255, 0.85), transparent 70%),
    radial-gradient(60% 45% at 100% 95%, rgba(255, 214, 231, 0.95), transparent 70%),
    radial-gradient(35% 25% at 15% 100%, rgba(255, 224, 138, 0.35), transparent 70%),
    var(--bg);
}
/* Polka dots + tiny hearts, like a sticker sheet */
.bg-pattern {
  z-index: -1;
  opacity: 0.55;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23F472A6' fill-opacity='.35'%3E%3Cpath transform='translate(14 18) scale(.6)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3Cpath transform='translate(76 74) scale(.45) rotate(-14 12 12)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 3px, transparent 3.6px);
  background-size: 120px 120px, 28px 28px;
  background-position: 0 0, 14px 14px;
}

/* Clouds drift slowly across the whole page */
.bg-clouds { z-index: -1; overflow: hidden; }
.cloud {
  position: absolute;
  left: 0;
  width: 180px;
  height: 112px;
  fill: #FFFFFF;
  opacity: 0.85;
  filter: drop-shadow(0 8px 14px rgba(190, 24, 93, 0.10));
  animation: drift 70s linear infinite;
  will-change: transform;
}
.cloud--1 { top: 12%; animation-duration: 80s; animation-delay: -20s; }
.cloud--2 { top: 48%; width: 120px; height: 75px; opacity: 0.7; animation-duration: 60s; animation-delay: -45s; }
.cloud--3 { top: 78%; width: 220px; height: 137px; animation-duration: 95s; animation-delay: -5s; }
@keyframes drift {
  from { transform: translateX(-260px); }
  to   { transform: translateX(calc(100vw + 40px)); }
}
@media (prefers-reduced-motion: reduce) { .cloud { animation: none; transform: translateX(10vw); } .cloud--2 { transform: translateX(60vw); } }

/* Washi tape strip */
.tape {
  position: absolute;
  width: 92px;
  height: 26px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.55) 0 6px, transparent 6px 12px),
    var(--tape, var(--pink));
  opacity: 0.85;
  clip-path: polygon(0 0, 100% 0, 96% 25%, 100% 50%, 96% 75%, 100% 100%, 0 100%, 4% 75%, 0 50%, 4% 25%);
  pointer-events: none;
}
.tape--pink { --tape: #F9A8C9; }
.tape--lilac { --tape: #D6B8FF; }
.tape--butter { --tape: #FFD86B; }

/* Ribbon banner heading */
.banner {
  display: inline-block;
  padding: var(--space-2) var(--space-7);
  background: var(--rose);
  color: var(--on-rose);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 8vw, 2.8rem);
  line-height: 1.15;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%);
  transform: rotate(-2deg);
}
.banner--lilac { background: var(--lilac-text); }

/* ---------- Glass ---------- */
/* Real blur only on the counter and timeline cards; everything else is solid
   so a phone screen never stacks several big blurs. */
.glass, .glass-solid {
  background: var(--surface);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass {
    background: var(--glass);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
    backdrop-filter: blur(var(--blur)) saturate(150%);
  }
}
.glass-solid { background: rgba(255, 255, 255, 0.86); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  min-width: 44px;
  padding: 0 var(--space-5);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.btn:active { transform: scale(0.95); }
.btn--primary { background: var(--rose); color: var(--on-rose); box-shadow: 0 8px 20px -8px rgba(190, 24, 93, 0.6); }
.btn--primary:hover { background: #A3134F; }
.btn--ghost { background: rgba(255, 255, 255, 0.8); color: var(--rose); border-color: var(--blush); }
.btn--ghost:hover { border-color: var(--pink); }
.btn--sm { min-height: 44px; padding: 0 var(--space-4); font-size: 1rem; }

.noscript { padding: var(--space-5); text-align: center; color: var(--muted); }