/* ============================================================
   Mi monita — Yellow Flowers Day
   ============================================================ */

:root {
  /* Yellow flowers are the whole point, so they own the palette. */
  --yellow:        #ffc933;
  --yellow-light:  #ffe9a8;
  --yellow-pale:   #fff6dc;
  --yellow-deep:   #e0a200;
  --yellow-ink:    #9a6b00;   /* 4.5:1 on cream; use for text, keep -deep for decoration */
  --cream:         #fffbf2;
  --ink:           #3a2a14;
  --ink-soft:      #7d6547;
  --night:         #171209;
  --night-soft:    #241c10;
  --stem:          #5d7a3a;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-hand:    "Caveat", "Bradley Hand", "Marker Felt", "Segoe Print", cursive;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 20px;
  --radius: 4px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Nana palette: dusty rose, lilac, mauve, wine. Secondary to the
     yellow, used only in the interlude and its divider. */
  --nana-rose:  #d98da4;
  --nana-blush: #f2d3da;
  --nana-mauve: #9b8bb0;
  --nana-lilac: #ded3e8;
  --nana-wine:  #6e2138;

  /* Strawberry, drawn here. Osaki wore one; we borrow the idea only. */
  --berry-svg: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 120 120%27><path d=%27M60 114C36 104 20 80 20 58c0-15 9-26 24-28 6-1 11 1 16 3 5-2 10-4 16-3 15 2 24 13 24 28 0 22-16 46-40 56z%27 fill=%27%23d8294c%27/><path d=%27M60 114C36 104 20 80 20 58c0-15 9-26 24-28 6-1 11 1 16 3v81z%27 fill=%27%23e8496a%27 opacity=%270.45%27/><g fill=%27%23ffe3cf%27><ellipse cx=%2742%27 cy=%2756%27 rx=%273%27 ry=%274.5%27/><ellipse cx=%2760%27 cy=%2750%27 rx=%273%27 ry=%274.5%27/><ellipse cx=%2778%27 cy=%2756%27 rx=%273%27 ry=%274.5%27/><ellipse cx=%2751%27 cy=%2772%27 rx=%273%27 ry=%274.5%27/><ellipse cx=%2769%27 cy=%2772%27 rx=%273%27 ry=%274.5%27/><ellipse cx=%2760%27 cy=%2788%27 rx=%273%27 ry=%274.5%27/></g><g fill=%27%233f8442%27><path d=%27M60 32c-7-8-17-12-27-12 2 10 11 18 22 20z%27/><path d=%27M60 32c7-8 17-12 27-12-2 10-11 18-22 20z%27/><path d=%27M60 32c-4-9-4-18 0-26 4 8 4 17 0 26z%27/></g></svg>");
}

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

/* The UA stylesheet gives [hidden] display:none at the lowest possible
   priority, so any `display` rule below silently defeats it. Several
   elements here are toggled with the hidden attribute, so pin it down. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

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

/* ---------- Petal canvas ---------- */

#petals {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100lvh;   /* does not change when the iOS toolbar collapses */
  z-index: 60;
  pointer-events: none;
}

/* ---------- Shared type ---------- */

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap.narrow { max-width: 660px; }
.center { text-align: center; }
.mb { margin-bottom: clamp(36px, 6vw, 64px); }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.015em;
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  margin: 0 0 0.6em;
}
.display--lg { font-size: clamp(2.4rem, 9vw, 4.4rem); }
.display--xl { font-size: clamp(3rem, 13vw, 5.6rem); }
.display em {
  font-style: italic;
  color: var(--yellow-ink);
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--yellow-ink);
  margin: 0 0 1.1em;
}
.eyebrow--c { text-align: center; }

.lead {
  font-size: clamp(1.06rem, 2.4vw, 1.26rem);
  line-height: 1.68;
  color: var(--ink-soft);
}
.lead--c { max-width: 44ch; margin-inline: auto; }

.big {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4.2vw, 2.1rem);
  line-height: 1.32;
  color: var(--ink);
  margin-top: 1.4em;
}

.muted { color: var(--ink-soft); font-size: 0.93rem; }

.hand {
  font-family: var(--font-hand);
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.4;
  color: var(--yellow-ink);
  margin-top: 1.2em;
}
.hand--lg { font-size: clamp(1.45rem, 3.6vw, 1.85rem); color: var(--yellow); }
.hand--xl { font-size: clamp(2rem, 6vw, 3rem); }

/* ============================================================
   THE GATE
   Dark and empty on purpose. One elevator, one button, nothing
   else. The day, the title and the flowers are the payoff, so
   none of them exist until she presses the button.
   ============================================================ */

.gate {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vh, 44px) var(--gutter);
  color: var(--yellow-pale);
  overflow: hidden;
  /* Near black, with just enough falloff that the doors are not
     floating in a flat void. */
  background: radial-gradient(100% 70% at 50% 48%, #16130d 0%, #0a0806 60%, #040302 100%);
}

/* The warm glow that floods in once the doors part. A separate
   layer because gradients themselves cannot be transitioned. */
.gate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 85% at 50% 42%, #40311a 0%, #1a1510 52%, #080604 100%);
  opacity: 0;
  transition: opacity 2.8s var(--ease);
}
.gate.is-open::before { opacity: 1; }

.gate__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  text-align: center;
}

/* ---------- the reveal, held out of the layout ---------- */

.gate__head {
  position: absolute;
  text-align: center;
  z-index: 1;
  top: clamp(22px, 6vh, 60px);
  left: var(--gutter);
  right: var(--gutter);
  transition: opacity 1.6s var(--ease) 0.7s, transform 1.6s var(--ease) 0.7s;
}
.js .gate__head { opacity: 0; transform: translateY(-10px); }
.gate.is-open .gate__head { opacity: 1; transform: none; }

.gate__date {
  font-family: var(--font-hand);
  font-size: clamp(1.15rem, 4vw, 1.4rem);
  color: var(--yellow);
  margin: 0 0 0.1em;
  opacity: 0.9;
}

.gate__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 7.5vw, 2.9rem);
  line-height: 1.05;
  margin: 0;
  color: #fff8e6;
}
.gate__title em {
  font-style: italic;
  color: var(--yellow);
  display: inline-block;
}

.gate__foot {
  position: absolute;
  text-align: center;
  z-index: 1;
  bottom: clamp(20px, 5.5vh, 52px);
  left: var(--gutter);
  right: var(--gutter);
}

.gate__hint {
  margin: 0;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
  text-wrap: balance;
  color: rgba(255, 246, 220, 0.62);
  transition: opacity 0.8s;
}
.gate__hint.is-hidden { opacity: 0; }

.gate__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--yellow);
  animation: fadeUp 0.9s var(--ease) both;
}
.gate__chev { font-size: 1rem; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } }

/* ============================================================
   THE ELEVATOR
   Flat vector illustration, not faux photography. Broad smooth
   gradients, crisp diagonal gloss, one big soft ceiling
   reflection. No fine grain anywhere: at this size repeating
   hairlines only read as noise.
   ============================================================ */

.elevator {
  --steel-hi: #f2f4fa;
  --steel-1:  #d5d9e6;
  --steel-2:  #b3b8cb;
  --steel-3:  #9095ab;
  --steel-4:  #6d7287;
  --steel-lo: #4c5165;

  position: relative;
  width: min(300px, 56vw, 40vh);
  margin-inline: auto;
}

/* Pool of reflected light on the floor, so the car is standing
   somewhere instead of floating. */
.elevator::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -14%;
  right: -14%;
  top: 99%;
  height: 46px;
  background: radial-gradient(48% 100% at 50% 0%, rgba(178, 190, 215, 0.1), transparent 68%);
  transition: background 1.6s var(--ease);
  pointer-events: none;
}
.elevator.is-open::after {
  background: radial-gradient(52% 100% at 50% 0%, rgba(255, 186, 60, 0.28), transparent 72%);
}

/* ---------- header box with the lantern ---------- */

.elevator__header {
  position: relative;
  /* Overhangs the doorway, the way the reference does. */
  margin-inline: -7%;
  aspect-ratio: 7 / 1;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(168deg,
    var(--steel-hi) 0%, var(--steel-1) 26%, var(--steel-3) 62%, var(--steel-2) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 -3px 16px rgba(0, 0, 0, 0.5);
}
/* Single clean gloss streak across the box. */
.elevator__header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(112deg,
    transparent 8%, rgba(255, 255, 255, 0.5) 15%, rgba(255, 255, 255, 0.5) 22%, transparent 29%);
}
/* Underside shadow cast onto the doorway below. */
.elevator__header::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 100%;
  height: 7px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent);
  pointer-events: none;
}

.elevator__display {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2b2f3b 0%, #14171e 100%);
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.95),
    0 1px 0 rgba(255, 255, 255, 0.42);
}

.elevator__dir {
  font-size: 0.5rem;
  line-height: 1;
  color: #ffa62e;
  opacity: 0.28;
  transition: opacity 0.3s;
}
.elevator.is-moving .elevator__dir { animation: lantern 0.5s steps(2) infinite; }
@keyframes lantern { 50% { opacity: 1; } }
.elevator.is-open .elevator__dir { opacity: 1; }

.elevator__floor {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #ffb642;
  text-shadow: 0 0 9px rgba(255, 150, 20, 0.85);
  font-variant-numeric: tabular-nums;
  min-width: 0.7em;
  text-align: center;
}

/* ---------- surround: the side jambs ---------- */

.elevator__doorway {
  position: relative;
  padding: 9px 12.5% 0;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(101deg,
    var(--steel-1) 0%, var(--steel-2) 16%, var(--steel-4) 46%,
    var(--steel-1) 63%, var(--steel-3) 80%, var(--steel-4) 100%);
  /* An outer box-shadow here instead of a filter on the whole
     elevator: a filter forces the entire subtree to re-rasterise
     every frame the doors move, which iOS cannot afford. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    0 34px 62px -20px rgba(0, 0, 0, 0.92);
}
/* Gloss running down the jambs, the brightest note in the piece. */
.elevator__doorway::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(108deg,
    transparent 2%, rgba(255, 255, 255, 0.46) 7%, rgba(255, 255, 255, 0.2) 12%,
    transparent 17%, transparent 84%, rgba(255, 255, 255, 0.3) 90%, transparent 95%);
  pointer-events: none;
}

/* ---------- doorway opening ---------- */

.elevator__shaft {
  position: relative;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  background: #0b0d12;
  /* Chamfer where the jamb turns into the opening. */
  box-shadow:
    inset 0 0 0 2px rgba(29, 32, 41, 0.95),
    inset 0 6px 12px rgba(0, 0, 0, 0.85);
}

.elevator__light {
  position: absolute;
  inset: 0;
  background: radial-gradient(74% 56% at 50% 34%, #ffe08a 0%, #ffbe3d 38%, #d98a10 72%, #7d4c05 100%);
  opacity: 0;
  transition: opacity 1.5s var(--ease);
}
.elevator.is-open .elevator__light { opacity: 1; }

.elevator__interior {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 15px;
}
/* Cabin read: darker side walls, a hint of a back panel seam and
   a soft ceiling pool of light. */
.elevator__cabwall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(48% 22% at 50% 4%, rgba(255, 255, 255, 0.4), transparent 72%),
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.08) 12%,
      transparent 26%, transparent 74%,
      rgba(0, 0, 0, 0.08) 88%, rgba(0, 0, 0, 0.4) 100%),
    linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.16) 63%, transparent 64%);
}

.elevator__msg {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(0.95rem, 3.3vw, 1.25rem);
  line-height: 1.34;
  color: #4a2c02;
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s var(--ease) 1.2s, transform 0.9s var(--ease) 1.2s;
}
.elevator.is-open .elevator__msg { opacity: 1; transform: none; }

/* ---------- the door panels ---------- */

.elevator__door {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 50.3%;
  height: 100%;
  transition: transform 2.1s var(--ease);
  will-change: transform;
}
/* Diagonal gloss plus the horizontal trim line. Kept on a layer of
   its own so the base metal gradient stays clean. */
.elevator__door::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      transparent 60.4%, rgba(0, 0, 0, 0.2) 60.8%,
      rgba(255, 255, 255, 0.52) 61.6%, rgba(255, 255, 255, 0.1) 62.4%, transparent 63%),
    linear-gradient(106deg,
      transparent 26%, rgba(255, 255, 255, 0.3) 36%,
      rgba(255, 255, 255, 0.3) 42%, transparent 52%);
}
/* Shadowed leading edge where the panels meet. */
.elevator__door::after {
  content: "";
  position: absolute;
  top: 0;
  width: 8px;
  height: 100%;
}

.elevator__door--l {
  left: 0;
  /* The big soft ceiling reflection: each half carries the near
     side of one oval, so together they form a single highlight
     centred on the seam. */
  background-image:
    radial-gradient(64% 32% at 100% 27%, rgba(255, 255, 255, 0.52), transparent 72%),
    linear-gradient(103deg,
      var(--steel-2) 0%, var(--steel-1) 30%, var(--steel-3) 62%, var(--steel-2) 100%);
}
.elevator__door--r {
  right: 0;
  background-image:
    radial-gradient(64% 32% at 0% 27%, rgba(255, 255, 255, 0.52), transparent 72%),
    linear-gradient(103deg,
      var(--steel-1) 0%, var(--steel-3) 34%, var(--steel-2) 68%, var(--steel-4) 100%);
}
.elevator__door--l::after {
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(24, 27, 35, 0.6));
}
.elevator__door--r::after {
  left: 0;
  background: linear-gradient(270deg, transparent, rgba(24, 27, 35, 0.6));
}

.elevator.is-open .elevator__door--l { transform: translateX(-100%); }
.elevator.is-open .elevator__door--r { transform: translateX(100%); }

/* ---------- threshold ---------- */

.elevator__sill {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.6%;
  min-height: 6px;
  background: linear-gradient(180deg, var(--steel-2) 0%, var(--steel-4) 55%, var(--steel-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 -7px 12px rgba(0, 0, 0, 0.6);
}

/* ---------- hall call station ---------- */

.callplate {
  position: absolute;
  bottom: 15%;
  left: 100%;
  margin-left: clamp(9px, 2.6vw, 20px);
  padding: 7px;
  border-radius: 3px;
  background: linear-gradient(146deg,
    var(--steel-hi) 0%, var(--steel-1) 34%, var(--steel-3) 68%, var(--steel-2) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    0 10px 20px -9px rgba(0, 0, 0, 0.9);
}
.callplate::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg,
    transparent 14%, rgba(255, 255, 255, 0.48) 24%, transparent 34%);
  pointer-events: none;
}

.callbtn {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.callbtn:disabled { cursor: default; }
.callbtn:active { transform: translateY(1.5px) scale(0.96); }

/* Ripple inviting the first tap. Stops for good once pressed.
   Animated with transform and opacity only: a box-shadow ripple
   repaints every frame, which iOS charges dearly for. */
.callbtn::after {
  content: "";
  position: absolute;
  inset: -8px;   /* lifts the hit area to 46px */
  border-radius: 50%;
  border: 2px solid rgba(255, 201, 51, 0.5);
  animation: callHalo 2.6s ease-out infinite;
  will-change: transform, opacity;
}
@keyframes callHalo {
  0%        { transform: scale(0.82); opacity: 0.85; }
  70%, 100% { transform: scale(1.65); opacity: 0; }
}
.callbtn.is-lit::after { animation: none; box-shadow: none; }

.callbtn__bezel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(158deg,
    var(--steel-hi) 0%, var(--steel-2) 48%, var(--steel-4) 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.callbtn__lens {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #5c6274, #343949 62%, #21252f 100%);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12);
  transition: background 0.35s, box-shadow 0.35s;
}
.callbtn.is-lit .callbtn__lens {
  background: radial-gradient(circle at 40% 30%, #fff8e2, #ffc247 52%, #e8920c 100%);
  box-shadow:
    inset 0 0 8px rgba(255, 255, 255, 0.72),
    0 0 18px 4px rgba(255, 180, 40, 0.8);
}

/* ============================================================
   STORY
   ============================================================ */

.story { position: relative; z-index: 1; }
/* Hidden until the elevator opens, but only when JS is running to open it. */
.js .story:not(.is-open) { display: none; }

.chapter, .counter, .hero, .letter, .closing {
  padding-block: clamp(64px, 11vw, 128px);
}

/* reveal on scroll. Scoped to .js so the page is fully readable
   with scripts disabled or failing. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- hero ---------- */

.hero {
  background:
    radial-gradient(90% 60% at 82% 6%, var(--yellow-pale) 0%, transparent 70%),
    var(--cream);
}
.hero__grid {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.hero__photo { margin: 0; position: relative; }
.hero__photo img {
  width: 100%;
  border-radius: 2px;
  box-shadow:
    0 0 0 9px #fff,
    0 26px 60px -24px rgba(58, 42, 20, 0.5);
}
.hero__photo figcaption,
.tile figcaption {
  font-family: var(--font-hand);
  color: var(--ink-soft);
}
.hero__photo figcaption {
  margin-top: 22px;
  font-size: 1.3rem;
  text-align: center;
}

@media (min-width: 820px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
  .hero__photo { transform: rotate(1.6deg); }
}

/* ---------- divider with a bloom ---------- */

.divider {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(420px, 74vw);
  margin: 0 auto;
}
.divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--yellow-light), transparent);
}
.bloom {
  flex: none;
  width: 26px;
  height: 26px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%23ffc933'%3E%3Cellipse cx='60' cy='26' rx='13' ry='26'/%3E%3Cellipse cx='60' cy='26' rx='13' ry='26' transform='rotate(60 60 60)'/%3E%3Cellipse cx='60' cy='26' rx='13' ry='26' transform='rotate(120 60 60)'/%3E%3Cellipse cx='60' cy='26' rx='13' ry='26' transform='rotate(180 60 60)'/%3E%3Cellipse cx='60' cy='26' rx='13' ry='26' transform='rotate(240 60 60)'/%3E%3Cellipse cx='60' cy='26' rx='13' ry='26' transform='rotate(300 60 60)'/%3E%3C/g%3E%3Ccircle cx='60' cy='60' r='17' fill='%238a5a12'/%3E%3C/svg%3E");
}

/* ---------- counters ---------- */

.counter { text-align: center; }
.counter .display { margin-bottom: 1.1em; }

.clock {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 620px;
  margin: 0 auto 1.6em;
}
.clock--sm { grid-template-columns: repeat(4, 1fr); max-width: 520px; }

.clock__cell {
  padding: 16px 6px 13px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff, var(--yellow-pale));
  box-shadow: 0 0 0 1px rgba(224, 162, 0, 0.16);
}
.clock__cell b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 6.5vw, 2.5rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.clock__cell small {
  display: block;
  margin-top: 6px;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.countdown {
  margin-top: clamp(44px, 7vw, 72px);
  padding: clamp(28px, 5vw, 44px) 0 0;
  text-align: center;
  border-top: 1px solid var(--yellow-light);
}

/* ---------- chapters ---------- */

/* Inter 300 blooms and thins on OLED black; step up one weight. */
.chapter--dark, .interlude, .closing { font-weight: 400; }

.chapter p { margin: 0 0 1.1em; }

.chapter__grid {
  display: grid;
  gap: clamp(30px, 5vw, 54px);
  align-items: center;
}
.chapter__photo { margin: 0; }
.chapter__photo img {
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 24px 56px -26px rgba(0, 0, 0, 0.7);
}

@media (min-width: 820px) {
  .chapter__grid { grid-template-columns: 1fr 1fr; }
}

.chapter--dark {
  background: linear-gradient(175deg, var(--night) 0%, var(--night-soft) 100%);
  color: rgba(255, 246, 220, 0.8);
}
.chapter--dark .display { color: #fff8e6; }
.chapter--dark .eyebrow { color: var(--yellow); }

.chapter--warm {
  background:
    radial-gradient(100% 50% at 20% 0%, var(--yellow-pale), transparent 65%),
    #fffdf7;
}

/* ---------- photo mosaic ---------- */

.mosaic {
  display: grid;
  grid-auto-flow: dense;   /* backfills the cells a tall tile would otherwise leave open */
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 132px;
  gap: 10px;
}
.tile {
  position: relative;
  grid-row: span 2;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--yellow-pale);
  box-shadow: 0 10px 28px -16px rgba(58, 42, 20, 0.55);
}
.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 4; }   /* exactly two default tiles high, so no 1-row hole */

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
@media (hover: hover) {
  .tile:hover img { transform: scale(1.045); }
}

.tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 44px 13px 11px;
  font-size: 1.04rem;
  line-height: 1.3;
  color: #fff;
  background: linear-gradient(transparent, rgba(23, 18, 9, 0.85) 55%);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

@media (min-width: 760px) {
  .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 168px; gap: 16px; }
  .tile figcaption { font-size: 1.15rem; padding: 30px 16px 13px; }
}

/* ---------- the letter ---------- */

.letter {
  background:
    radial-gradient(120% 70% at 50% 0%, var(--yellow-pale) 0%, transparent 62%),
    linear-gradient(180deg, #fffdf6, var(--cream));
  text-align: center;
}
.letter__body {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.32rem, 4.4vw, 2rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}
.letter__body p { margin: 0 0 1em; }
.letter__body p:first-child { color: var(--yellow-ink); }

/* ---------- closing ---------- */

.closing {
  background: radial-gradient(110% 80% at 50% 100%, #2c2213 0%, var(--night) 62%, #0c0904 100%);
  color: #fff8e6;
  text-align: center;
}
.closing .display { color: #fff8e6; }
.closing .display em { color: var(--yellow); }

.flowerbtn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  padding: 10px;
  border: 0;
  background: none;
  cursor: pointer;
  color: rgba(255, 246, 220, 0.75);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.flowerbtn svg { width: clamp(84px, 22vw, 112px); height: auto; }
.flowerbtn__petals { fill: var(--yellow); transform-origin: 60px 60px; }
.flowerbtn__core { fill: #8a5a12; }
.flowerbtn svg { transition: transform 0.8s var(--ease); }
.flowerbtn:hover svg, .flowerbtn:focus-visible svg { transform: rotate(24deg) scale(1.06); }
.flowerbtn.is-open svg { animation: spinBloom 1.3s var(--ease); }
@keyframes spinBloom {
  50%  { transform: rotate(180deg) scale(1.22); }
  100% { transform: rotate(360deg) scale(1); }
}

.secret {
  max-width: 34ch;
  margin: 30px auto 0;
  font-family: var(--font-hand);
  font-size: clamp(1.4rem, 4.6vw, 1.95rem);
  line-height: 1.45;
  color: var(--yellow);
  animation: fadeUp 1s var(--ease) both;
}

.signature {
  margin-top: clamp(48px, 9vw, 84px);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: rgba(255, 246, 220, 0.34);
}

/* ============================================================
   INTERLUDE: NANA
   An homage to the look, never a copy of the artwork. The cues
   are the palette, the framed panel collage of the opening
   sequence, and the strawberry. All of it drawn here from
   scratch. No character art, no logo.
   ============================================================ */

.interlude {
  position: relative;
  padding-block: clamp(64px, 11vw, 128px);
  background:
    radial-gradient(90% 55% at 12% 0%, rgba(155, 139, 176, 0.22), transparent 68%),
    radial-gradient(80% 50% at 92% 100%, rgba(217, 141, 164, 0.18), transparent 66%),
    linear-gradient(176deg, #241c29 0%, #1b1520 58%, #120e16 100%);
  color: rgba(244, 235, 240, 0.82);
  overflow: hidden;
}

/* Paper grain of a printed page, done with two soft washes rather
   than a noise texture. */
.interlude::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 39px,
      rgba(255, 255, 255, 0.014) 39px 40px);
  pointer-events: none;
}

.interlude__label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--nana-rose);
  margin: 0 0 0.9em;
}

.interlude__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 16vw, 6rem);
  line-height: 0.92;
  letter-spacing: 0.02em;
  margin: 0 0 clamp(26px, 5vw, 44px);
  color: #fbf4f7;
}
/* Strawberry sitting in for the dot, Osaki's own motif. */
.interlude__berry {
  display: inline-block;
  width: clamp(26px, 7vw, 44px);
  height: clamp(26px, 7vw, 44px);
  margin-left: 0.12em;
  vertical-align: baseline;
  background: no-repeat center/contain var(--berry-svg);
}

.interlude p { margin: 0 0 1.15em; }
.interlude .accent {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 4.4vw, 1.9rem);
  line-height: 1.38;
  color: var(--nana-blush);
}

/* ---------- the panel collage ---------- */

.collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 2.4vw, 18px);
  margin-top: clamp(34px, 6vw, 58px);
}

.panel {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  padding: 7px;
  border: 1px solid rgba(12, 8, 14, 0.7);
  box-shadow:
    0 14px 30px -14px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  /* Both properties: a bare transform here would replace the
     .reveal shorthand and make the panels pop instead of fade. */
  transition: transform 0.6s var(--ease), opacity 0.95s var(--ease);
}
/* Flat pastel card stock behind each frame, cycling like the
   boxes in the opening. */
.panel:nth-child(5n + 1) { background: var(--nana-blush); }
.panel:nth-child(5n + 2) { background: var(--nana-lilac); }
.panel:nth-child(5n + 3) { background: #f7efe2; }
.panel:nth-child(5n + 4) { background: var(--nana-rose); }
.panel:nth-child(5n + 5) { background: var(--nana-mauve); }

.panel:nth-child(odd)  { transform: rotate(-1.1deg); }
.panel:nth-child(even) { transform: rotate(1deg); }
@media (hover: hover) {
  .panel:hover { transform: rotate(0deg) scale(1.02); }
}

.panel--wide { grid-column: span 2; aspect-ratio: 16 / 11; }

.panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}

.panel figcaption {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  padding: 18px 9px 7px;
  font-family: var(--font-hand);
  font-size: 1.02rem;
  line-height: 1.25;
  color: #fff;
  background: linear-gradient(transparent, rgba(20, 14, 22, 0.86));
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
}

@media (min-width: 760px) {
  .collage { grid-template-columns: repeat(4, 1fr); }
  .panel--wide { grid-column: span 2; }
  .panel figcaption { font-size: 1.12rem; }
}

/* ---------- strawberry divider ---------- */

.bloom--berry { background-image: var(--berry-svg); }
.divider--berry span {
  background: linear-gradient(90deg, transparent, rgba(217, 141, 164, 0.5), transparent);
}

/* ============================================================
   THE _HIGHLIGHT_ MARK
   Their apartment number. Solid colour is declared first so the
   text can never end up invisible where background-clip: text is
   not supported; the gradient and its animation are added only
   behind an @supports guard.
   ============================================================ */

.hl {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 1.24em;
  letter-spacing: 0.05em;
  color: var(--nana-rose);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hl {
    background: linear-gradient(100deg,
      var(--nana-rose) 0%,
      #ffd66b 24%,
      #fff6d8 42%,
      #ffd66b 60%,
      var(--nana-rose) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Light sweeping across the number, plus a slow breath of glow. */
    /* Sweep only. An infinitely animated filter repaints forever
       and is one of the most expensive things to do on a phone. */
    animation: hlSheen 7s linear infinite;
    filter: drop-shadow(0 0 9px rgba(255, 205, 100, 0.5));
  }
}

@keyframes hlSheen {
  to { background-position: 200% 0; }
}

/* ============================================================
   Reduced motion — the story still has to work
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  #petals { display: none; }
}