/* ---------- Top bar (solid, no blur) ---------- */
.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--gutter-r) var(--space-2) var(--gutter);
  background: linear-gradient(to bottom, rgba(255, 240, 246, 0.96) 60%, rgba(255, 240, 246, 0));
}
.topbar__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  min-height: 44px;
  min-width: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--rose);
  text-decoration: none;
}
.topbar__logo .heart-icon { color: var(--bow); font-size: 0.8em; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;               /* fallback */
  min-height: calc(100dvh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--gutter-r) var(--space-8) var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
}
.hero__kicker {
  display: inline-block;
  align-self: flex-start;
  padding: var(--space-1) var(--space-4);
  background: var(--surface);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--rose);
  box-shadow: var(--shadow);
  transform: rotate(-3deg);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.6rem, 19vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--text);
}
.hero__line { display: block; }
.hero__line--accent {
  position: relative;
  display: inline-block;
  margin-left: 0.6em;
  color: var(--bow);               /* very large display: 3.9:1 passes the 3:1 large-text rule */
}
.squiggle {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -0.12em;
  width: 112%;
  height: 0.22em;
  fill: none;
  stroke: var(--pink);
  stroke-width: 6;
  stroke-linecap: round;
  overflow: visible;
}
.hero__cta { align-self: flex-start; }

/* Stickers stuck around the headline and button (decorative, tappable for fun) */
.hero__title { position: relative; }
.hero__actions { position: relative; display: flex; align-items: center; min-height: 64px; }
.sticker {
  position: absolute;
  z-index: 2;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sticker__art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: #FFFFFF;
  stroke-width: 2.6;
  paint-order: stroke;
  filter: drop-shadow(0 4px 6px rgba(190, 24, 93, 0.22));
  animation: bob 4s ease-in-out infinite;
}
.sticker--star     { top: -0.55em; right: 2%; width: 48px; height: 48px; fill: var(--butter); }
.sticker--sparkle  { top: -0.35em; left: 52%; width: 26px; height: 26px; fill: var(--lilac-text); }
.sticker--heart    { top: 0.05em; left: calc(100% + 0.25em); width: 56px; height: 56px; fill: var(--pink); }
.sticker--flower   { top: 50%; right: 6%; width: 54px; height: 54px; margin-top: -27px; fill: #FFB3D1; }
.sticker--sparkle2 { top: 0; right: 30%; width: 22px; height: 22px; fill: var(--bow); }
.sticker--star .sticker__art     { animation-delay: -1s; }
.sticker--heart .sticker__art    { animation-delay: -2.2s; animation-duration: 3.4s; }
.sticker--sparkle .sticker__art  { animation: twinkle 2.4s ease-in-out infinite; }
.sticker--sparkle2 .sticker__art { animation: twinkle 3s ease-in-out -1.2s infinite; }
.sticker--flower .sticker__art   { animation: spin-slow 14s linear infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-8px) rotate(6deg); }
}
@keyframes twinkle {
  0%, 100% { transform: scale(0.7) rotate(0deg); opacity: 0.6; }
  50%      { transform: scale(1.1) rotate(20deg); opacity: 1; }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* ---------- Counter ---------- */
.counter {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  max-width: 560px;
  transform: rotate(-1deg);
}
.counter__tape { top: -12px; left: 18px; transform: rotate(-8deg); }
.counter__bow {
  position: absolute;
  top: -28px;
  right: 20px;
  width: 72px;
  height: 54px;
  transform: rotate(10deg);
  filter: drop-shadow(0 3px 0 #FFFFFF) drop-shadow(0 6px 10px rgba(190, 24, 93, 0.25));
}
.counter__label {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.counter__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3) var(--space-4);
}
.counter__unit { display: flex; align-items: baseline; gap: var(--space-2); }
.counter__unit:first-child { grid-column: 1 / -1; }
.counter__digits {
  display: flex;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.counter__unit:first-child .counter__digits { font-size: clamp(4.5rem, 22vw, 6.8rem); color: var(--rose); }
.counter__name {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--rose);
}
.counter__beat { color: var(--bow); font-size: 1.3em; animation: heartbeat 1.4s ease-in-out infinite; }
@keyframes heartbeat {
  0%, 40%, 100% { transform: scale(1); }
  12% { transform: scale(1.25); }
  24% { transform: scale(1.05); }
  32% { transform: scale(1.2); }
}
.digit { display: block; width: 0.6em; height: 1.05em; overflow: hidden; text-align: center; }
.digit__reel {
  display: flex;
  flex-direction: column;
  transition: transform 600ms var(--ease-out);
  will-change: transform;
}
.digit__reel span { display: block; height: 1.05em; }

@media (min-width: 640px) {
  .counter__grid { grid-template-columns: auto repeat(3, auto); align-items: baseline; justify-content: start; gap: var(--space-5); }
  .counter__unit:first-child { grid-column: auto; }
}

/* Little-number chips under the counter */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); max-width: 560px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px 6px 10px;
  background: var(--surface);
  border: 2px solid var(--blush);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  box-shadow: 0 4px 10px -6px rgba(190, 24, 93, 0.4);
}
.chip:nth-child(odd) { transform: rotate(-1.5deg); }
.chip:nth-child(even) { transform: rotate(1.5deg); }
.chip strong { color: var(--rose); font-weight: 800; }
.chip svg { width: 18px; height: 18px; flex: none; }
.chip--heart svg { fill: var(--bow); }
.chip--star svg { fill: #F2B600; }
.chip--sparkle svg { fill: var(--lilac-text); }
.chip--today { background: var(--rose); border-color: var(--rose); color: var(--on-rose); }
.chip--today strong { color: var(--on-rose); }
.chip--today svg { fill: var(--on-rose); }

/* ---------- Sections ---------- */
.section {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-8) var(--gutter-r) var(--space-8) var(--gutter);
  scroll-margin-top: 56px;
}
.section:focus { outline: none; }
.section__head { margin-bottom: var(--space-7); display: grid; justify-items: start; gap: var(--space-3); }
.section__sub { font-family: var(--font-hand); font-weight: 700; color: var(--muted); font-size: 1.35rem; }

/* Row of hearts between sections */
.divider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
}
.divider span {
  width: 14px;
  height: 14px;
  background: var(--pink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath 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/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath 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/svg%3E") center / contain no-repeat;
}
.divider span:nth-child(odd) { background: var(--blush); }
.divider span:nth-child(3) { width: 20px; height: 20px; background: var(--bow); }

/* ---------- Timeline (scrapbook) ---------- */
.timeline { position: relative; }
.timeline__spine {               /* stitched ribbon */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 16px;
  width: 4px;
  border-radius: 4px;
  background: repeating-linear-gradient(to bottom, rgba(244, 114, 166, 0.45) 0 8px, transparent 8px 16px);
  overflow: hidden;
}
.timeline__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--pink), var(--lilac-text));
  transform-origin: top center;
}
.timeline__list { display: grid; gap: var(--space-9); }
.timeline__status { padding-left: 48px; color: var(--muted); }

.entry { position: relative; padding-left: 48px; display: grid; gap: var(--space-4); }
.entry::before {                  /* heart node on the spine */
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 28px;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E5304A' stroke='%23fff' stroke-width='1.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%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(190, 24, 93, 0.3));
}

.polaroid {
  position: relative;
  padding: 12px 12px 18px;
  background: var(--paper);
  border-radius: 6px;
  box-shadow: 0 2px 0 rgba(190, 24, 93, 0.06), 0 18px 34px -16px rgba(74, 23, 52, 0.35);
  transform: rotate(-1.6deg);
}
.entry:nth-child(even) .polaroid { transform: rotate(1.6deg); }
.polaroid .tape { top: -12px; left: 50%; margin-left: -46px; transform: rotate(-3deg); }
.entry:nth-child(3n+2) .polaroid .tape { --tape: #D6B8FF; transform: rotate(4deg); }
.entry:nth-child(3n) .polaroid .tape { --tape: #FFD86B; }
.polaroid__photo { overflow: hidden; border-radius: 2px; background: var(--blush); }
.polaroid__photo img { width: 100%; height: auto; }
.polaroid__title {
  margin-top: var(--space-3);
  padding-right: 84px;            /* room for the stamp */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--text);
}
.polaroid__place { padding-right: 84px; color: var(--muted); font-size: 0.95rem; }

/* Postmark-style date stamp */
.stamp {
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 76px;
  height: 76px;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--rose);
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 5px var(--blush);
  color: var(--rose);
  font-family: var(--font-display);
  line-height: 1;
  transform: rotate(-12deg);
}
.stamp__day { font-size: 1.5rem; font-weight: 700; }
.stamp__mon { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; }
.stamp__yr { font-size: 0.72rem; font-weight: 600; }

/* Handwritten sticky-note captions */
.notes { display: grid; gap: var(--space-4); padding: 0 var(--space-2); }
.note {
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-4);
  background: var(--note-pink);
  border-radius: 4px 4px 18px 4px;
  box-shadow: 0 10px 18px -12px rgba(74, 23, 52, 0.35);
  transform: rotate(1deg);
}
.note--hers { background: var(--note-lilac); transform: rotate(-1.2deg); margin-left: var(--space-4); }
.note__who {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--rose);
}
.note--hers .note__who { color: var(--lilac-text); }
.note__text { font-family: var(--font-hand); font-size: 1.45rem; line-height: 1.3; color: var(--text); }
.note--empty { background: rgba(255, 255, 255, 0.55); border: 2px dashed #CDB4F0; box-shadow: none; }
.note--empty .note__text { color: var(--muted); }

.doodle {
  position: absolute;
  width: 40px;
  height: 40px;
  stroke: #FFFFFF;
  stroke-width: 2.6;
  paint-order: stroke;
  overflow: visible;
  filter: drop-shadow(0 3px 5px rgba(190, 24, 93, 0.25));
  pointer-events: none;
}
.doodle--star { fill: var(--butter); }
.doodle--heart { fill: var(--pink); }
.doodle--sparkle { fill: var(--lilac-text); }
.doodle--flower { fill: #FFB3D1; }
.entry:nth-child(odd) .doodle { top: -16px; right: -6px; }
.entry:nth-child(even) .doodle { top: 40%; left: 26px; }

@media (min-width: 900px) {
  .timeline__spine { left: 50%; transform: translateX(-50%); }
  .timeline__status { padding-left: 0; text-align: center; }
  .entry { width: calc(50% - 56px); padding-left: 0; }
  .entry:nth-child(odd) { justify-self: start; }
  .entry:nth-child(even) { justify-self: end; }
  .entry:nth-child(odd)::before { left: auto; right: -70px; }
  .entry:nth-child(even)::before { left: -70px; }
  .entry:nth-child(even) .doodle { left: -20px; }
}

/* ---------- Stubs: sticky notes on a board ---------- */
.notes-board { display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .notes-board { grid-template-columns: repeat(2, 1fr); } }
.sticky {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--note-pink);
  border-radius: 4px 4px 22px 4px;
  box-shadow: 0 14px 22px -14px rgba(74, 23, 52, 0.4);
  color: var(--text);
  font-family: var(--font-hand);
  font-size: 1.35rem;
  line-height: 1.3;
}
.sticky .tape { top: -12px; left: 50%; margin-left: -46px; }
.sticky--pink   { transform: rotate(-1.5deg); }
.sticky--lilac  { background: var(--note-lilac); transform: rotate(1.2deg); }
.sticky--butter { background: var(--note-butter); transform: rotate(1deg); }
.sticky--mint   { background: var(--mint); transform: rotate(-1deg); }
.sticky__title {
  margin-bottom: var(--space-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--rose);
}
.section--stub { padding-bottom: var(--space-7); }

/* ---------- Footer ---------- */
.footer {
  padding: var(--space-7) var(--gutter-r) calc(env(safe-area-inset-bottom) + var(--space-7)) var(--gutter);
  text-align: center;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--muted);
}
.footer__heart { color: var(--bow); vertical-align: -0.1em; }

/* ---------- Intro: the envelope ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding: env(safe-area-inset-top) var(--gutter-r) env(safe-area-inset-bottom) var(--gutter);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 3px, transparent 3.6px) 0 0 / 28px 28px,
    radial-gradient(70% 60% at 50% 45%, #FFE3EF, #FFC9DE 75%);
}
.intro[hidden] { display: none; }
html.intro-pending .intro { display: flex; }
html.intro-pending body { overflow: hidden; }
.intro__skip {
  position: absolute;
  top: calc(env(safe-area-inset-top) + var(--space-3));
  right: var(--gutter-r);
  z-index: 2;
}
.intro__stage { position: relative; display: grid; justify-items: center; gap: var(--space-6); text-align: center; }
.intro__kicker { font-family: var(--font-hand); font-weight: 700; font-size: 1.6rem; color: var(--rose); }
.intro__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 17vw, 7rem);
  line-height: 1;
  color: var(--rose);
  text-shadow: 0 4px 0 #FFFFFF, 0 10px 24px rgba(190, 24, 93, 0.25);
}

.envelope {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: 3 / 2;
  perspective: 900px;
}
.envelope__back, .envelope__front, .envelope__flap { position: absolute; left: 0; right: 0; }
.envelope__back { inset: 0; z-index: 1; background: #F6A9C7; border-radius: 12px; }
.envelope__front {
  inset: 0;
  z-index: 3;
  background: linear-gradient(160deg, #FFD3E4, #FFBCD6);
  border-radius: 12px;
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 20px 40px -18px rgba(190, 24, 93, 0.5);
}
.envelope__flap {
  top: 0;
  z-index: 4;
  height: 58%;
  background: linear-gradient(#F9B8D0, #F49BBE);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  border-radius: 12px 12px 0 0;
}
.envelope__seal {
  position: absolute;
  z-index: 5;
  top: calc(58% - 24px);
  left: 50%;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  fill: var(--bow);
  stroke: #FFFFFF;
  stroke-width: 2;
  paint-order: stroke;
  overflow: visible;
  filter: drop-shadow(0 3px 4px rgba(190, 24, 93, 0.35));
}
.letter {
  position: absolute;
  z-index: 2;
  left: 7%;
  right: 7%;
  top: 6%;
  height: 92%;
  padding: 14px var(--space-4) var(--space-3);
  display: grid;
  align-content: start;
  text-align: left;
  line-height: 28px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 27px, rgba(244, 114, 166, 0.3) 27px 28px) 0 14px / 100% calc(100% - 14px) no-repeat,
    var(--paper);
  border-radius: 8px;
  box-shadow: 0 6px 16px -8px rgba(74, 23, 52, 0.35);
  font-family: var(--font-hand);
  color: var(--text);
}
.letter__greeting { font-size: 1.5rem; font-weight: 700; color: var(--rose); }
.letter__body { font-size: 1.3rem; }
.letter__signoff { justify-self: end; font-size: 1.35rem; font-weight: 700; color: var(--rose); }

/* Opened state without animation (reduced motion / no GSAP) */
.envelope.is-open .envelope__flap { transform: rotateX(180deg); z-index: 0; }
.envelope.is-open .envelope__seal { opacity: 0; }
.envelope.is-open ~ .intro__head, .intro__stage:has(.envelope.is-open) .intro__head { opacity: 0; }
.envelope.is-open .letter { z-index: 6; transform: translateY(-34%) scale(1.12); }

.intro__floaters span {
  position: absolute;
  bottom: -40px;
  width: 22px;
  height: 22px;
  background: var(--pink);
  opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath 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/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath 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/svg%3E") center / contain no-repeat;
}
.intro__floaters span:nth-child(1) { left: 8%; }
.intro__floaters span:nth-child(2) { left: 24%; width: 14px; height: 14px; background: var(--bow); }
.intro__floaters span:nth-child(3) { left: 40%; width: 30px; height: 30px; }
.intro__floaters span:nth-child(4) { left: 58%; width: 16px; height: 16px; background: #FFFFFF; }
.intro__floaters span:nth-child(5) { left: 74%; width: 26px; height: 26px; background: var(--bow); }
.intro__floaters span:nth-child(6) { left: 88%; width: 12px; height: 12px; }
.intro__floaters span:nth-child(7) { left: 50%; width: 18px; height: 18px; background: var(--lilac-text); }

@media (prefers-reduced-motion: reduce) {
  .digit__reel { transition: none; }
  .counter__beat, .sticker__art { animation: none; }
}

/* ---------- Paragraph catalogues ---------- */
.catalogues { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .catalogues { grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; } }
.catalogue { min-width: 0; display: grid; gap: var(--space-5); }
.catalogue__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }

/* Baby blue / baby pink letters with a dark sticker outline so they stay readable */
.catalogue__title {
  --fill: var(--baby-blue);
  --edge: var(--blue-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 9.5vw, 3rem);
  line-height: 1.05;
  color: var(--fill);
  text-shadow:
    -2px -2px 0 var(--edge), 2px -2px 0 var(--edge), -2px 2px 0 var(--edge), 2px 2px 0 var(--edge),
    0 -2px 0 var(--edge), 0 2px 0 var(--edge), -2px 0 0 var(--edge), 2px 0 0 var(--edge),
    0 4px 0 #FFFFFF, 0 8px 14px rgba(31, 63, 102, 0.25);
  transform: rotate(-2deg);
}
.catalogue--hers .catalogue__title {
  --fill: var(--baby-pink);
  --edge: var(--text);
  text-shadow:
    -2px -2px 0 var(--edge), 2px -2px 0 var(--edge), -2px 2px 0 var(--edge), 2px 2px 0 var(--edge),
    0 -2px 0 var(--edge), 0 2px 0 var(--edge), -2px 0 0 var(--edge), 2px 0 0 var(--edge),
    0 4px 0 #FFFFFF, 0 8px 14px rgba(190, 24, 93, 0.25);
  transform: rotate(2deg);
}
.catalogue__count {
  padding: 2px var(--space-3);
  border-radius: var(--radius);
  background: var(--blue-paper);
  color: var(--blue-ink);
  font-weight: 800;
  font-size: 0.9rem;
}
.catalogue--hers .catalogue__count { background: var(--note-pink); color: var(--rose); }
.catalogue__months { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-4); min-width: 0; }
.catalogue__months > :not(.month--single) { grid-column: 1 / -1; }
.month--single .month__label { font-size: 1.2rem; }
.month--single .month__count { display: none; }
.month--single .month__row { overflow: visible; }
.month--single .month__row > li { flex-basis: 100%; }
.month--single .pcard { min-height: 150px; }
.catalogue__empty { font-family: var(--font-hand); font-size: 1.35rem; color: var(--muted); }

.month { min-width: 0; }
.month__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--blue-text);
}
.catalogue--hers .month__label { color: var(--rose); }
.month__count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--radius);
  background: var(--blue-ink);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 800;
}
.catalogue--hers .month__count { background: var(--rose); }

/* One swipeable row of paper cards per month */
.month__row {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 18px 4px 14px;          /* room for tape + shadows */
  margin: -6px -4px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--blush) transparent;
}
.month__row > li { flex: 0 0 min(250px, 78%); scroll-snap-align: start; }

.pcard {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  width: 100%;
  min-height: 168px;
  padding: var(--space-5) var(--space-4) var(--space-4);
  border: 0;
  border-radius: 4px 4px 18px 4px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 25px, rgba(44, 95, 153, 0.14) 25px 26px) 0 20px / 100% calc(100% - 20px) no-repeat,
    var(--blue-paper);
  color: var(--blue-ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 12px 20px -14px rgba(31, 63, 102, 0.55);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.month__row > li:nth-child(odd) .pcard { transform: rotate(-1.2deg); }
.month__row > li:nth-child(even) .pcard { transform: rotate(1.2deg); }
.pcard:hover { box-shadow: 0 16px 26px -14px rgba(31, 63, 102, 0.6); }
.pcard:active { transform: scale(0.97); }
.catalogue--hers .pcard {
  background:
    repeating-linear-gradient(to bottom, transparent 0 25px, rgba(190, 24, 93, 0.12) 25px 26px) 0 20px / 100% calc(100% - 20px) no-repeat,
    var(--note-pink);
  color: var(--text);
  box-shadow: 0 12px 20px -14px rgba(190, 24, 93, 0.55);
}
.pcard__tape {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 70px;
  height: 22px;
  margin-left: -35px;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.55) 0 6px, transparent 6px 12px), var(--baby-blue);
  opacity: 0.9;
  clip-path: polygon(0 0, 100% 0, 96% 25%, 100% 50%, 96% 75%, 100% 100%, 0 100%, 4% 75%, 0 50%, 4% 25%);
  transform: rotate(-3deg);
}
.catalogue--hers .pcard__tape { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.55) 0 6px, transparent 6px 12px), var(--baby-pink); }
.pcard__title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
.pcard__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  font-family: var(--font-hand);
  font-size: 1.25rem;
  line-height: 26px;
  white-space: pre-line;
}
.pcard__more {
  justify-self: end;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--blue-text);
}
.catalogue--hers .pcard__more { color: var(--rose); }
.pcard__more::after { content: " →"; }

/* ---------- Reading sheet (native <dialog>) ---------- */
html.reader-open, html.reader-open body { overflow: hidden; }
.reader {
  width: min(640px, 100%);
  max-width: 100%;
  height: min(86dvh, 760px);
  max-height: 100dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 26px 26px 0 0;
  background: transparent;
  color: var(--blue-ink);
  overflow: visible;
}
@media (min-width: 700px) { .reader { margin: auto; border-radius: 26px; } }
.reader::backdrop { background: rgba(74, 23, 52, 0.4); }
.reader[open] { animation: sheet-up 380ms var(--ease-out); }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.reader__paper {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5) var(--space-5) calc(env(safe-area-inset-bottom) + var(--space-4));
  border-radius: inherit;
  background: var(--blue-paper);
  box-shadow: 0 -10px 40px -10px rgba(31, 63, 102, 0.4);
}
.reader__paper { position: relative; }
.reader__paper::after {            /* paper continues below the screen so the spring never shows a gap */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 60vh;
  background: inherit;
}
.reader.is-springing[open] { animation: none; }
.reader[data-side="hers"] { color: var(--text); }
.reader[data-side="hers"] .reader__paper { background: var(--note-pink); }
.reader__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.reader__kicker { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
.reader__meta { font-weight: 700; font-size: 0.95rem; color: var(--blue-text); }
.reader[data-side="hers"] .reader__meta { color: var(--rose); }
.reader__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: inherit;
  cursor: pointer;
}
.reader__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.reader__title { margin-top: var(--space-3); font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.reader__text {                    /* the scroller */
  flex: 1 1 auto;
  min-height: 0;
  margin-top: var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.75);
}
/* The words and their ruled lines live on one element inside the scroller,
   so they scroll together without repainting (no background-attachment). */
.reader__lines {
  min-height: 100%;
  padding: var(--space-4);
  background: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(44, 95, 153, 0.12) 31px 32px) 0 var(--space-4) / 100% auto no-repeat;
  font-family: var(--font-hand);
  font-size: 1.4rem;
  line-height: 32px;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.reader[data-side="hers"] .reader__lines {
  background: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(190, 24, 93, 0.12) 31px 32px) 0 var(--space-4) / 100% auto no-repeat;
}

/* Reading mode: kicks in once the paragraph is scrolled */
.reader.is-reading { height: calc(100dvh - 8px); }
.reader.is-reading .reader__paper { padding-top: var(--space-3); }
.reader.is-reading .reader__head { align-items: center; }
.reader.is-reading .reader__kicker { font-size: 1.05rem; }
.reader.is-reading .reader__meta { font-size: 0.8rem; }
.reader.is-reading .reader__title { display: none; }
.reader.is-reading .reader__close { width: 40px; height: 40px; }
.reader.is-reading .reader__text { margin-top: var(--space-2); }
.reader.is-reading .reader__nav { margin-top: var(--space-2); }
.reader.is-reading .reader__nav .btn { min-height: 44px; }
.reader__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }
.reader__pos { font-weight: 800; font-size: 0.95rem; }
.reader__nav .btn:disabled { opacity: 0.4; cursor: default; }
@media (prefers-reduced-motion: reduce) { .reader[open] { animation: none; } }

/* Sealed letter: listed but not added yet */
.pcard--sealed {
  place-items: center;
  align-content: center;
  text-align: center;
  background: var(--blue-paper);
}
.catalogue--hers .pcard--sealed { background: var(--note-pink); }
.pcard--sealed .pcard__title { justify-self: center; }
.pcard__seal {
  width: 46px;
  height: 46px;
  fill: var(--blue-text);
  stroke: #FFFFFF;
  stroke-width: 2;
  paint-order: stroke;
  overflow: visible;
  filter: drop-shadow(0 3px 4px rgba(31, 63, 102, 0.3));
}
.catalogue--hers .pcard__seal { fill: var(--bow); filter: drop-shadow(0 3px 4px rgba(190, 24, 93, 0.3)); }
.pcard__sealed-label { font-family: var(--font-hand); font-weight: 700; font-size: 1.3rem; color: var(--blue-text); }
.catalogue--hers .pcard__sealed-label { color: var(--rose); }
.pcard.is-wiggling { animation: wiggle 420ms var(--ease-out); }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-4deg); }
  50% { transform: rotate(3deg); }
  75% { transform: rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) { .pcard.is-wiggling { animation: none; } }
/* ☆ / ♡ after the catalogue titles, drawn like the lettering: baby fill, dark outline */
.catalogue__symbol {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-left: 0.02em;
  vertical-align: -0.12em;
  overflow: visible;
  fill: var(--fill);
  stroke: var(--edge);
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 0 #FFFFFF);
}

/* =====================================================================
   Tablet / iPad
   Portrait (700–1023px): one centred column instead of a stretched one.
   Landscape (≥1024px): hero splits into two columns.
   ===================================================================== */
@media (min-width: 700px) {
  :root {
    --gutter: max(var(--space-6), env(safe-area-inset-left));
    --gutter-r: max(var(--space-6), env(safe-area-inset-right));
  }

  /* Intro: a bigger envelope and letter for a bigger screen */
  .intro__kicker { font-size: 2rem; }
  .envelope { width: min(440px, 70vw); }
  .envelope__seal { width: 58px; height: 58px; margin-left: -29px; top: calc(58% - 30px); }
  .letter { padding: 22px var(--space-6) var(--space-4); line-height: 40px; }
  .letter { background:
      repeating-linear-gradient(to bottom, transparent 0 39px, rgba(244, 114, 166, 0.3) 39px 40px) 0 22px / 100% calc(100% - 22px) no-repeat,
      var(--paper); }
  .letter__greeting { font-size: 2rem; }
  .letter__body { font-size: 1.75rem; }
  .letter__signoff { font-size: 1.8rem; }
  .intro__open, .intro__go { min-height: 56px; padding: 0 var(--space-7); font-size: 1.3rem; }

  /* Reader is a centred card here, not a bottom sheet: no paper tail below it */
  .reader__paper::after { display: none; }
  .reader__lines { font-size: 1.55rem; line-height: 36px; }
  .reader__lines { background: repeating-linear-gradient(to bottom, transparent 0 35px, rgba(44, 95, 153, 0.12) 35px 36px) 0 var(--space-4) / 100% auto no-repeat; }
  .reader[data-side="hers"] .reader__lines { background: repeating-linear-gradient(to bottom, transparent 0 35px, rgba(190, 24, 93, 0.12) 35px 36px) 0 var(--space-4) / 100% auto no-repeat; }
}

@media (min-width: 700px) and (max-width: 1023px) {
  .hero, .section { max-width: 720px; }
  .counter, .chips { max-width: none; }
  .hero__title { font-size: clamp(6rem, 15vw, 8.5rem); }
  .timeline__list { gap: var(--space-9); }
}

@media (min-width: 1024px) {
  /* Landscape: headline on the left, counter + little numbers on the right */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas:
      "kicker counter"
      "title  counter"
      "title  chips"
      "title  actions";
    grid-template-rows: auto auto auto auto;
    column-gap: var(--space-8);
    row-gap: var(--space-5);
    align-content: center;
  }
  .hero__kicker { grid-area: kicker; align-self: end; justify-self: start; }
  .hero__title { grid-area: title; align-self: center; }
  .counter { grid-area: counter; align-self: end; max-width: none; }
  /* Narrower column: days on their own row again, like on a phone */
  .counter__grid { grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--space-3) var(--space-6); }
  .counter__unit:first-child { grid-column: 1 / -1; }
  .chips { grid-area: chips; max-width: none; }
  .hero__actions { grid-area: actions; align-self: start; }
}

/* Touch screens (phones, iPad without a trackpad) keep hover styles "stuck"
   after a tap, so only apply them where a real pointer can hover. */
@media (hover: none) {
  .btn--primary:hover { background: var(--rose); }
  .btn--ghost:hover { border-color: var(--blush); }
  .pcard:hover { box-shadow: 0 12px 20px -14px rgba(31, 63, 102, 0.55); }
  .catalogue--hers .pcard:hover { box-shadow: 0 12px 20px -14px rgba(190, 24, 93, 0.55); }
}

.topbar__actions { display: flex; align-items: center; gap: var(--space-2); }

/* ---------- Password lock (every visit) ---------- */
.lock { display: none; }
html.locked .lock {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100dvh;
  padding: env(safe-area-inset-top) var(--gutter-r) env(safe-area-inset-bottom) var(--gutter);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 3px, transparent 3.6px) 0 0 / 28px 28px,
    radial-gradient(70% 60% at 50% 40%, #FFE3EF, #FFC9DE 75%);
}
.lock[hidden] { display: none !important; }
.lock__card {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 340px);
  text-align: center;
}
.lock__padlock { width: 112px; height: 122px; overflow: visible; margin-bottom: var(--space-2); filter: drop-shadow(0 10px 14px rgba(190, 24, 93, 0.3)); }
.lock__shackle { fill: none; stroke: #FFFFFF; stroke-width: 12; stroke-linecap: round; }
.lock__body { fill: var(--bow); }
.lock__keyhole { fill: #9E1530; }
.lock__kicker { font-family: var(--font-hand); font-weight: 700; font-size: 1.4rem; color: var(--rose); }
.lock__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 10vw, 3rem);
  line-height: 1;
  color: var(--rose);
  text-shadow: 0 4px 0 #FFFFFF;
  margin-bottom: var(--space-4);
}
.lock__label { font-weight: 800; font-size: 0.95rem; color: var(--muted); }
.lock__row { display: flex; gap: var(--space-2); width: 100%; min-width: 0; }
.lock__input {
  flex: 1 1 0;
  width: 0;                         /* text inputs have a built-in min width; let flex size it */
  min-width: 0;
  min-height: 50px;
  padding: 0 var(--space-4);
  border: 2px solid #FFFFFF;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;                /* 16px+ so iOS doesn't zoom in */
  text-align: center;
  box-shadow: inset 0 2px 6px rgba(190, 24, 93, 0.12);
}
.lock__input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lock__go { flex: none; min-height: 50px; padding: 0 var(--space-5); }
.lock__msg { min-height: 1.6em; white-space: pre-line; line-height: 1.3; font-family: var(--font-hand); font-weight: 700; font-size: 1.3rem; color: var(--rose); }

/* ---------- Music player sheet ---------- */
html:has(.player[open]) { overflow: hidden; }
.player {
  width: min(560px, 100%);
  max-width: 100%;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 28px 28px 0 0;
  background: transparent;
  overflow: visible;
}
@media (min-width: 700px) { .player { margin: auto; border-radius: 28px; } }
.player::backdrop { background: rgba(74, 23, 52, 0.35); }
.player[open]:not(.is-springing) { animation: sheet-up 420ms var(--ease-out); }
.player__card::after {             /* paper continues below the screen so the spring never shows a gap */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 60vh;
  background: inherit;
}
@media (min-width: 700px) { .player__card::after { display: none; } }
.player__card { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.player__card:focus { outline: none; }
.player__card {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5) calc(env(safe-area-inset-bottom, 0px) + var(--space-5));
  border-radius: inherit;
  background: var(--paper);
  box-shadow: 0 -12px 40px -12px rgba(190, 24, 93, 0.45);
  color: var(--text);
}
.player__close {
  position: absolute;
  top: 6px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 32px;
  margin-left: -32px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.player__close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.player__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
.player__cover {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(96px, 30vw, 132px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 4px solid var(--text);
  border-radius: 22px;
  background: var(--blush);
}
.player__cover img { width: 100%; height: 100%; object-fit: cover; }
.player__cover.is-default {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 2.5px, transparent 3px) 0 0 / 16px 16px,
    linear-gradient(150deg, #FFB8D4, #F472A6);
}
.player__cover.is-default svg { width: 42%; height: 42%; margin-top: -18%; fill: var(--bow); stroke: #FFFFFF; stroke-width: 1.6; paint-order: stroke; overflow: visible; }
.player__cover.is-default span {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1rem;
  color: #FFFFFF;
}
.player.is-playing .player__cover.is-default svg { animation: heartbeat 1.4s ease-in-out infinite; }
.player__meta { min-width: 0; }
.player__title { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1.15; overflow-wrap: normal; word-break: normal; overflow: hidden; }
.player__artist { color: var(--muted); font-weight: 700; font-size: 0.92rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.player__like {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  background: none;
  cursor: pointer;
}
.player__like svg { width: 30px; height: 30px; fill: none; stroke: var(--text); stroke-width: 2.2; }
.player__like[aria-pressed="true"] svg { fill: var(--bow); stroke: var(--bow); }
.player__like.is-popping svg { animation: pop 420ms var(--ease-out); }

.player__range {
  --p: 0%;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.player__range::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: linear-gradient(to right, var(--text) var(--p), var(--blush) var(--p)); }
.player__range::-moz-range-track { height: 5px; border-radius: 3px; background: linear-gradient(to right, var(--text) var(--p), var(--blush) var(--p)); }
.player__range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6.5px; border-radius: 50%; background: var(--text); border: 3px solid var(--paper); }
.player__range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text); border: 3px solid var(--paper); }
.player__range:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.player__times { display: flex; justify-content: space-between; margin-top: -4px; font-weight: 700; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.player__controls { display: flex; align-items: center; justify-content: space-between; }
.player__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text);
  cursor: pointer;
}
.player__btn svg { width: 26px; height: 26px; fill: currentColor; }
.player__btn svg .ln { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.player__btn[aria-pressed="false"] { color: #B79AAA; }
.player__btn[aria-pressed="true"] { color: var(--rose); }
.player__btn:disabled { color: #D9C6D0; cursor: default; }
.player__play {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 0;
  border-radius: 50%;
  background: var(--text);
  color: var(--paper);
  cursor: pointer;
  box-shadow: 0 10px 20px -10px rgba(74, 23, 52, 0.7);
  transition: transform var(--dur-fast) var(--ease-out);
}
.player__play:active, .player__btn:active { transform: scale(0.92); }
.player__play svg { width: 30px; height: 30px; fill: currentColor; }
.player__play .i-pause, .player.is-playing .player__play .i-play { display: none; }
.player.is-playing .player__play .i-pause { display: block; }
.player .player__play { color: var(--pl-bg2); }

.player__wave { display: flex; align-items: center; justify-content: space-between; height: 54px; }
.player__wave i {
  display: block;
  width: 4px;
  height: calc(var(--h) * 100%);
  border-radius: 2px;
  background: var(--blush);
  transform-origin: center;
  transition: background-color 300ms var(--ease-out);
}
.player__wave i.is-lit { background: var(--text); }
.player.is-playing.is-open .player__wave i { animation: wave 1.2s ease-in-out infinite; }
@keyframes wave { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .player[open], .player.is-playing.is-open .player__wave i, .player.is-playing .player__cover.is-default svg { animation: none; }
}

/* ---------- Reze stickers ---------- */
.rsticker {
  position: absolute;
  z-index: 2;
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(74, 23, 52, 0.28));
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
#timeline .section__head, #paragraphs .section__head { position: relative; }
.rsticker--story { right: -4px; top: 46px; width: clamp(96px, 27vw, 150px); transform: rotate(8deg); }
.rsticker--letters { right: -2px; top: 66px; width: clamp(92px, 25vw, 140px); transform: rotate(-7deg); }
#timeline .section__sub, #paragraphs .section__sub { padding-right: clamp(96px, 27vw, 150px); }
.rsticker.is-boing { animation: boing 600ms var(--ease-out); }
@keyframes boing {
  0% { scale: 1; }
  30% { scale: 1.18; rotate: -6deg; }
  60% { scale: 0.95; rotate: 4deg; }
  100% { scale: 1; rotate: 0deg; }
}
/* Lock screen tease: slides in from the side on a wrong password */
.rsticker--tease {
  position: fixed;
  right: -8px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  width: clamp(120px, 34vw, 190px);
  transform: translateX(120%) rotate(10deg);
  transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.rsticker--tease.is-on { transform: translateX(0) rotate(-6deg); }
@media (prefers-reduced-motion: reduce) { .rsticker.is-boing { animation: none; } .rsticker--tease { transition: none; } }
/* More stickers: catalogues, scrapbooks, coming soon */
.catalogue__head { position: relative; }
.rsticker--cat {
  position: static;
  margin: -34px 0 -14px auto;
  width: clamp(86px, 24vw, 128px);
  transform: rotate(6deg);
}
.rsticker--cat-hers { margin-top: -4px; transform: rotate(-6deg); }
#books .section__head, #later .section__head { position: relative; }
#books .section__sub, #later .section__sub { padding-right: clamp(110px, 30vw, 170px); }
.rsticker--books { right: -4px; top: 68px; width: clamp(118px, 32vw, 180px); transform: rotate(5deg); }
.rsticker--soon { right: -2px; top: 66px; width: clamp(100px, 27vw, 150px); transform: rotate(-7deg); }

/* ---------- Highlighter on "I love you" ----------
   Looks like a real marker stroke: uneven ends, slightly tilted, a bit
   transparent so the ink shows through, broken cleanly across lines.
   Za's paragraphs: pink marker. Hawwi's: blue marker. */
mark.hl {
  --hl: 255, 92, 160;               /* pink */
  color: inherit;
  padding: 0.04em 0.28em;
  margin: 0 -0.18em;
  border-radius: 0.8em 0.3em 0.9em 0.25em;
  background:
    linear-gradient(104deg,
      rgba(var(--hl), 0) 0.9%,
      rgba(var(--hl), 0.55) 2.4%,
      rgba(var(--hl), 0.38) 5.8%,
      rgba(var(--hl), 0.42) 93%,
      rgba(var(--hl), 0.62) 96%,
      rgba(var(--hl), 0) 98%),
    linear-gradient(183deg,
      rgba(var(--hl), 0) 0%,
      rgba(var(--hl), 0.22) 7.9%,
      rgba(var(--hl), 0) 15%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.catalogue--hers mark.hl,
.reader[data-side="hers"] mark.hl { --hl: 77, 166, 255; }   /* blue */
/* Pet names (baby, my love, cutie patootie…): light red on both sides */
mark.hl.hl--nick,
.catalogue--hers mark.hl.hl--nick,
.reader[data-side="hers"] mark.hl.hl--nick { --hl: 255, 84, 84; }

/* ---------- Song theme: colours taken from the album cover ----------
   js/music.js sets these on <html> when a song loads. Registering them as
   colours lets the browser fade smoothly from one song's theme to the next. */
@property --pl-bg1  { syntax: '<color>'; inherits: true; initial-value: #FFFDFB; }
@property --pl-bg2  { syntax: '<color>'; inherits: true; initial-value: #FFFDFB; }
@property --pl-ink  { syntax: '<color>'; inherits: true; initial-value: #4A1734; }
@property --pl-acc  { syntax: '<color>'; inherits: true; initial-value: #BE185D; }
@property --pl-mid  { syntax: '<color>'; inherits: true; initial-value: #7D4565; }
@property --pl-soft { syntax: '<color>'; inherits: true; initial-value: #FFD6E7; }
@property --pl-tint { syntax: '<color>'; inherits: true; initial-value: #FFF5F9; }
@property --pl-mink { syntax: '<color>'; inherits: true; initial-value: #4A1734; }
@property --pl-macc { syntax: '<color>'; inherits: true; initial-value: #BE185D; }
@property --pl-wave { syntax: '<color>'; inherits: true; initial-value: #FFD6E7; }
@property --pl-wavelit { syntax: '<color>'; inherits: true; initial-value: #4A1734; }
@property --pl-island { syntax: '<color>'; inherits: true; initial-value: #F9A8D4; }
@property --pl-ink2 { syntax: '<color>'; inherits: true; initial-value: #4A1734; }
@property --pl-mid2 { syntax: '<color>'; inherits: true; initial-value: #7D4565; }
@property --pl-g1 { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@property --pl-g2 { syntax: '<percentage>'; inherits: true; initial-value: 78%; }
:root {
  transition: --pl-bg1 1s ease, --pl-bg2 1s ease, --pl-ink 1s ease, --pl-acc 1s ease,
              --pl-mid 1s ease, --pl-soft 1s ease, --pl-tint 1s ease, --pl-mink 1s ease, --pl-macc 1s ease,
              --pl-wave 1s ease, --pl-wavelit 1s ease, --pl-island 1s ease,
              --pl-ink2 1s ease, --pl-mid2 1s ease, --pl-g1 1s ease, --pl-g2 1s ease;
}
.player {
  --text: var(--pl-ink);
  --muted: var(--pl-mid);
  --blush: var(--pl-soft);
  --rose: var(--pl-acc);
  --paper: var(--pl-bg2);
}
.player__card { background: linear-gradient(180deg, var(--pl-bg1) var(--pl-g1), var(--pl-bg2) var(--pl-g2)); }
/* Everything below the title can use its own text colours (for gradients that go light to dark). */
.player__seek, .player__times, .player__controls, .player__close { --text: var(--pl-ink2); --muted: var(--pl-mid2); }
.player__card::after { background: var(--pl-bg2); }
.player__btn[aria-pressed="false"] { color: var(--muted); opacity: 0.75; }
.player__btn:disabled { color: var(--pl-soft); opacity: 1; }
.player::backdrop { background: rgba(30, 10, 20, 0.35); }
@media (prefers-reduced-motion: reduce) { :root { transition: none; } }

.player__wave i { background: var(--pl-wave); }
.player__wave i.is-lit { background: var(--pl-wavelit); }

/* ---------- Counter flip (back = anniversary countdown) ---------- */
.counter__face[hidden] { display: none; }
.counter__flip {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.counter__flip:focus-visible { outline: 3px solid var(--focus, #7C3AED); outline-offset: 4px; }
.counter__hint {
  /* a little tag hanging off the bottom edge, so it never covers the numbers */
  position: absolute;
  right: 18px;
  bottom: -13px;
  z-index: 1;
  padding: 1px 10px 2px;
  border: 2px solid var(--blush);
  border-radius: 999px;
  background: #FFFFFF;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--muted);
  transform: rotate(-3deg);
  pointer-events: none;
}
.counter.is-flipped .counter__unit:first-child .counter__digits { color: #8B4FD6; }

/* ---------- Watch together: cinema tickets (Soon chapter) ---------- */
.tickets__tally { font-weight: 700; color: var(--muted); margin-bottom: var(--space-4); }
.tickets__tally strong { color: var(--rose); }
.tickets__heading {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--lilac-text);
  margin: var(--space-4) 0 var(--space-3);
}
.tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .tickets { grid-template-columns: repeat(2, 1fr); } }
.ticket {
  --tint: var(--note-pink);
  --ink: #4A1734;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  min-height: 104px;
  color: var(--ink);
  filter: drop-shadow(0 8px 12px rgba(120, 40, 80, 0.14));
}
.ticket:nth-child(odd) { transform: rotate(-0.8deg); }
.ticket:nth-child(even) { transform: rotate(0.8deg); }
.ticket--lilac { --tint: var(--note-lilac); }
.ticket--butter { --tint: var(--note-butter); }
.ticket--mint { --tint: var(--mint); }
.ticket__main, .ticket__stub {
  background: var(--tint);
  /* bite-shaped notches where the stub tears off */
  -webkit-mask: radial-gradient(circle 10px at var(--nx) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 10px at var(--nx) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 10px at var(--nx) 0, #0000 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle 10px at var(--nx) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.ticket__main { --nx: 100%; padding: 14px 18px 14px 18px; border-radius: 14px 0 0 14px; min-width: 0; }
.ticket__stub {
  --nx: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  width: 64px;
  border-left: 2px dashed rgba(74, 23, 52, 0.25);
  border-radius: 0 14px 14px 0;
}
.ticket__admit {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}
.ticket__no { font-family: 'Space Mono', ui-monospace, monospace; font-size: 0.62rem; opacity: 0.7; }
.ticket__kind {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
.ticket__title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.2; margin: 2px 0; }
.ticket__note { font-size: 0.82rem; font-weight: 700; opacity: 0.7; }
.ticket__parts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0 2px; padding: 0; }
.ticket__part { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 700; }
.ticket__hole {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.45;
}
.ticket__part.is-punched .ticket__hole { background: #FFFFFF; border-color: var(--rose); opacity: 1; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); }
.ticket__part.is-punched .ticket__label { text-decoration: line-through; opacity: 0.6; }
.ticket.is-watched .ticket__main, .ticket.is-watched .ticket__stub { filter: saturate(0.6); }
.ticket.is-watched .ticket__title { opacity: 0.7; }
.ticket__stamp {
  position: absolute;
  right: 72px;
  top: 10px;
  padding: 3px 10px;
  border: 3px solid var(--rose);
  border-radius: 8px;
  color: var(--rose);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  transform: rotate(-10deg);
  opacity: 0.85;
  pointer-events: none;
}

/* ---------- Dynamic island: the player lives in a pill at the top ---------- */
.topbar { position: sticky; }
.island {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 108px;
  height: 36px;
  margin: auto;
  border-radius: 999px;
  background: #0B0B0E;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.island[hidden] { display: none; }
.island__open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 14px 0 5px;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.island__cover {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(150deg, #FFB8D4, #F472A6);
}
.island__cover img { width: 100%; height: 100%; object-fit: cover; }
.island__cover svg { width: 60%; height: 60%; fill: #FFFFFF; }
.island.is-playing .island__cover { animation: island-spin 8s linear infinite; }
@keyframes island-spin { to { transform: rotate(360deg); } }
.island__eq { display: flex; align-items: center; gap: 3px; height: 16px; }
.island__eq i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--pl-island);
  transform: scaleY(0.3);
  transform-origin: center;
}
.island.is-playing .island__eq i { animation: island-eq 0.9s ease-in-out infinite; }
.island.is-playing .island__eq i:nth-child(2) { animation-delay: -0.3s; animation-duration: 0.7s; }
.island.is-playing .island__eq i:nth-child(3) { animation-delay: -0.55s; animation-duration: 1s; }
.island.is-playing .island__eq i:nth-child(4) { animation-delay: -0.15s; animation-duration: 0.8s; }
@keyframes island-eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.island__progress { position: absolute; left: 18px; right: 18px; bottom: 2px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.12); overflow: hidden; pointer-events: none; }
.island__progress i { position: absolute; inset: 0; background: var(--pl-island); opacity: 0.8; transform-origin: left center; transform: scaleX(0); }

/* The full player now hangs from the top and is born from the island. */
.player { margin: calc(env(safe-area-inset-top, 0px) + 8px) auto auto; width: min(560px, calc(100% - 16px)); border-radius: 30px; }
@media (min-width: 700px) { .player { margin: calc(env(safe-area-inset-top, 0px) + 12px) auto auto; border-radius: 30px; } }
.player__card { padding: var(--space-6) var(--space-5) var(--space-5); box-shadow: 0 18px 40px -14px rgba(30, 10, 20, 0.55); overflow: hidden; }
.player__card::after { display: none; }
.player__card::before {               /* the black of the island, fading away as it opens */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: #0B0B0E;
  opacity: var(--ink-cover, 0);
  pointer-events: none;
}
.player[open]:not(.is-springing) { animation: island-fade 260ms var(--ease-out); }
@keyframes island-fade { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.player__close svg { transform: rotate(180deg); }   /* the chevron now points up: swipe up to close */

/* Small screens: "Replay intro" becomes an envelope icon so the island fits between. */
.topbar__replay svg { display: none; }
@media (max-width: 480px) {
  .topbar__replay { width: 44px; padding: 0; justify-content: center; }
  .topbar__replay span { display: none; }
  .topbar__replay svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}
@media (prefers-reduced-motion: reduce) {
  .island.is-playing .island__cover, .island.is-playing .island__eq i { animation: none; }
  .island.is-playing .island__eq i { transform: scaleY(0.7); }
}
/* Grab handle at the bottom edge of the hanging player */
.player__close { top: auto; bottom: 4px; }
.player__card { padding-top: var(--space-5); padding-bottom: calc(var(--space-6) + 6px); }

/* ---------- Intro letter: unfolds into a full sheet for long letters ---------- */
.intro__read {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 56px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 96px);
  pointer-events: none;
}
.intro__read[hidden] { display: none; }
.intro__paper {
  width: min(560px, 100%);
  max-height: 100%;
  display: flex;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 24px 50px -20px rgba(74, 23, 52, 0.55);
  overflow: hidden;
  pointer-events: auto;
  transform-origin: center center;
}
.intro__scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.intro__scroll:focus { outline: none; }
.intro__lines {
  display: grid;
  gap: 0;
  padding: 18px 22px 22px;
  text-align: left;
  font-family: var(--font-hand);
  color: var(--text);
  line-height: 32px;
  /* ruled lines live on the content, so they scroll with the words */
  background: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(244, 114, 166, 0.3) 31px 32px) 0 18px / 100% calc(100% - 18px) no-repeat;
}
.intro__lines .letter__greeting { font-size: 1.6rem; }
.intro__lines .letter__body { font-size: 1.35rem; white-space: pre-line; }
.intro__lines .letter__signoff { margin-top: 32px; font-size: 1.45rem; }
.intro.is-reading .envelope { visibility: hidden; }
.intro.is-reading .intro__go {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  z-index: 4;
  translate: -50% 0;
}
@media (min-width: 700px) {
  .intro__lines { padding: 26px 34px 30px; line-height: 40px; background-size: 100% calc(100% - 26px); background-position: 0 26px;
    background-image: repeating-linear-gradient(to bottom, transparent 0 39px, rgba(244, 114, 166, 0.3) 39px 40px); }
  .intro__lines .letter__greeting { font-size: 2rem; }
  .intro__lines .letter__body { font-size: 1.7rem; }
  .intro__lines .letter__signoff { margin-top: 40px; font-size: 1.8rem; }
}

/* Soon: the Denji-with-flowers sticker is tall, so the notes start below it */
.rsticker--soon { width: clamp(92px, 24vw, 132px); top: 58px; }
#later .notes-board { margin-top: clamp(64px, 20vw, 96px); }

/* ---------- Our Story: several photos in one moment ---------- */
.polaroid__photo--stack { position: relative; overflow: visible; background: none; }
.stack {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  background: var(--blush);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* the edges of the photos underneath, peeking out */
  box-shadow: 7px -6px 0 -1px #FFFFFF, 7px -6px 0 0 rgba(74, 23, 52, 0.12), 13px -11px 0 -2px #FFFFFF, 13px -11px 0 -1px rgba(74, 23, 52, 0.1);
}
.stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  opacity: 0;
}
.stack img.is-top { opacity: 1; z-index: 2; }
.stack img.is-entering { z-index: 3; }
.stack__dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.stack__dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--blush); transition: width 200ms var(--ease-out), background-color 200ms var(--ease-out); }
.stack__dots i.is-on { width: 16px; background: var(--rose); }
.polaroid__photo.is-tall img { aspect-ratio: 3 / 4; height: auto; object-fit: cover; }

/* Counter: the date line now sits under the numbers, on both sides */
.counter__label { margin: var(--space-3) 0 0; padding-right: 96px; }   /* clear of the "tap to flip" tag */
html.mode-chapters .counter__label { margin: var(--space-2) 0 0; }

/* Wide screens: the headline must stay in its own column, never under the counter */
@media (min-width: 1024px) {
  .hero__title { font-size: clamp(4.5rem, 7vw, 8.5rem); min-width: 0; }
}

/* Two date stamps on one polaroid (e.g. gifts from two different days) */
.stamp--extra { right: 74px; bottom: 18px; transform: rotate(-12deg); }
.polaroid--dates .stamp:not(.stamp--extra) { transform: rotate(8deg); z-index: 1; }
.polaroid--dates .polaroid__title { padding-right: 150px; }

/* The small letter inside the envelope only peeks; the full text is on the sheet it unfolds into */
.letter { overflow: hidden; }
.letter .letter__body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Two stamps: slightly smaller, and enough room under the photo that they never reach it */
.polaroid--dates .stamp { width: 66px; height: 66px; bottom: 10px; }
.polaroid--dates .stamp--extra { right: 66px; bottom: 14px; }
.polaroid--dates .stamp__day { font-size: 1.3rem; }
.polaroid--dates .polaroid__title { padding-right: 136px; min-height: 76px; display: flex; align-items: center; }

/* Hero buttons: a little bouncing arrow says "this goes further down" */
.hero__actions { gap: var(--space-3); flex-wrap: wrap; }
.hero__cta { display: inline-flex; align-items: center; gap: 8px; }
.cta__arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; animation: cta-bounce 1.4s ease-in-out infinite; }
.hero__cta--alt .cta__arrow { animation-delay: 0.2s; }
@keyframes cta-bounce { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .cta__arrow { animation: none; } }
/* Both buttons on one row on phones */
@media (max-width: 699px) {
  .hero__actions { flex-wrap: nowrap; gap: 8px; }
  .hero__actions .hero__cta { padding: 11px 14px; font-size: 0.95rem; min-height: 44px; white-space: nowrap; gap: 4px; }
  .hero__actions .cta__arrow { width: 15px; height: 15px; }
}
@media (max-width: 699px) {
  /* keep the flower and sparkle stickers off the two buttons */
  .hero__actions .sticker--flower { top: auto; bottom: -34px; right: 2%; margin-top: 0; width: 44px; height: 44px; }
  .hero__actions .sticker--sparkle2 { top: -18px; right: 6%; }
}

/* Seek bar: a taller invisible hit area, and the page must not scroll while dragging it */
.player__range { height: 40px; touch-action: none; }

/* Pochita stickers */
#watch .section__head, #playlists .section__head { position: relative; }
#watch .section__sub, #playlists .section__sub { padding-right: clamp(100px, 28vw, 160px); }
.rsticker--watch { right: -2px; top: 60px; width: clamp(96px, 26vw, 140px); transform: rotate(6deg); }
.rsticker--playlists { right: 0; top: 54px; width: clamp(84px, 23vw, 124px); transform: rotate(-8deg); }

/* ---------- Our List (shared to-do) ---------- */
.todos { display: grid; gap: var(--space-4); }
.chip-btn {
  min-height: 40px;
  padding: 6px 14px;
  border: 2px solid var(--blush);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chip-btn[aria-pressed="true"] { background: var(--rose); border-color: var(--rose); color: var(--on-rose); }
.todo-who { display: flex; align-items: center; gap: 8px; font-family: var(--font-hand); font-weight: 700; font-size: 1.2rem; color: var(--muted); }
.todo-form { display: grid; gap: 10px; padding: var(--space-4); border-radius: 18px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 10px 24px -16px rgba(190, 24, 93, 0.5); }
.todo-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.todo-add { display: flex; gap: 8px; }
.todo-input {
  flex: 1;
  width: 0;
  min-height: 46px;
  padding: 0 14px;
  border: 2px solid var(--blush);
  border-radius: 14px;
  background: #FFFFFF;
  color: var(--text);
  font: 700 1rem var(--font-body);   /* 16px: stops iPhone zooming in on tap */
}
.todo-input:focus { outline: none; border-color: var(--rose); }
.todo-add__btn { min-height: 46px; padding: 0 18px; }
.todo-status { padding: 10px 14px; border-radius: 12px; background: var(--note-butter); font-weight: 700; font-size: 0.92rem; }
.todo-group { margin-top: var(--space-3); }
.todo-group__head { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-hand); font-weight: 700; font-size: 1.45rem; color: var(--lilac-text); margin-bottom: 8px; }
.todo-group__count { font-family: var(--font-body); font-size: 0.85rem; color: var(--muted); }
.todo-empty { font-family: var(--font-hand); font-size: 1.15rem; color: var(--muted); }
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.todo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 10px 12px;
  border-radius: 14px;
  background: var(--note-pink);
  box-shadow: 0 6px 14px -10px rgba(74, 23, 52, 0.4);
}
.todo--za { background: #E3F0FF; }
.todo--hawwi { background: var(--note-pink); }
.todo__tick {
  width: 30px;
  height: 30px;
  border: 2.5px solid var(--rose);
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
  position: relative;
}
.todo--za .todo__tick { border-color: #2F7BD9; }
.todo.is-done .todo__tick { background: var(--rose); }
.todo--za.is-done .todo__tick { background: #2F7BD9; }
.todo.is-done .todo__tick::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #FFFFFF; font-weight: 900; font-size: 0.95rem; }
.todo__text { font-weight: 700; overflow-wrap: anywhere; }
.todo__by { font-size: 0.75rem; color: var(--muted); }
.todo.is-done .todo__text { text-decoration: line-through; opacity: 0.55; }
.todo__del { width: 36px; height: 36px; border: 0; background: none; color: var(--muted); font-size: 1.4rem; cursor: pointer; }