/* ============================================================================
   THEME · BLOSSOM   — pink, grey and white, and a different idea of what an
   invitation page can be.

   The other three drafts are all stationery: paper, a printed rule, a card on a
   ground. This one is not. It is a LIT ROOM — a slow aurora of pink and grey
   light behind frosted white glass. Same words, same order, same map pins;
   completely different physics.

   The four devices, in order of how much work each does:

     1. a LIVING GROUND. Four soft lights drift behind everything on a 38s
        cycle that never quite repeats, so the page is never twice the same.
        This is the whole idea; everything else serves it.
     2. FROSTED GLASS panels. White at 62%, blurred and saturated, so the pink
        and grey behind them bleed through the card rather than sitting beside
        it. That bleed is what makes the glass read as glass.
     3. HAIRLINE NUMERALS. The dates are outlined, not filled, at a size that
        would be vulgar if they were solid — pink showing through the counter of
        a 27 is the single most memorable thing on the page.
     4. GREY is structure, PINK is emphasis, WHITE is air. Never pink for a
        large area; it goes candy the moment it is a fill instead of a light.

   Loaded after styles.css and theme-atelier.css. Atelier is underneath for its
   LAYOUT only — the day-card date block, the bottom nav, the "Two Days"
   heading. Every surface it brings is replaced below.
   ========================================================================== */

:root{
  /* white — air */
  --white:#FFFFFF;
  --white-warm:#FDFCFC;

  /* grey — structure */
  --grey-100:#F2F0F1;
  --grey-200:#E4E1E2;
  --grey-400:#B4AEB1;
  --grey-600:#7C7478;
  --ink:#332F31;              /* 12.6:1 on white */
  --ink-soft:#5A5457;         /* 7.1:1  on white */
  --ink-mute:#6E6669;         /* 5.5:1  on white */

  /* pink — emphasis */
  --pink-50:#FDF2F6;
  --pink-100:#F9DDE7;
  --pink-300:#EFAEC8;
  --pink-500:#DB7BA4;
  --pink-600:#C04C7C;         /* the numeral outline — 3.78:1 on the glass */
  /* ⚠ Measured against the aurora at its STRONGEST pink, not against white.
     A moving ground has to be judged at its worst point, because the text
     scrolls through all of it. #B4436F looks fine on paper and measures 5.6:1
     on white, but only 3.01:1 where the pink light is densest — a fail for
     small caps. This holds 4.87:1 there and 6.82:1 on the glass. */
  --pink-700:#8A2A52;

  /* the base file's tokens, remapped */
  --paper:#FDFCFC;
  --tint:#FBF5F8;
  --grey:#F7F5F6;
  --blush:#FBF0F5;
  --blush-ink:#B4436F;
  --grey-mid:#6E6669;
  --gold:#B4436F;             /* there is no gold in this draft at all */
  --gold-soft:rgba(180,67,111,.34);
  --gold-line:rgba(180,67,111,.26);
  --line:rgba(51,47,49,.14);
  --line-soft:rgba(51,47,49,.08);

  --maxw:34rem;
}

/* ── 1 · THE LIVING GROUND ───────────────────────────────────────────────── */
/* Four lights, blurred past recognition, drifting on a long cycle. `inset:-25%`
   keeps their edges off screen while they move, so no light ever slides into
   view as a visible disc. */
/* ⚠ The white lives on <html> ONLY, and body MUST stay transparent.
   body::before sits at z-index:-2. Because body does not create a stacking
   context, that pseudo-element escapes to the ROOT stacking context and paints
   behind body's own background — so an opaque background on body buries the
   entire aurora and the page renders flat white with no error anywhere. */
html{ background:var(--white) }
body{ background:transparent }
body::before{
  content:""; position:fixed; inset:-25%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(40% 40% at 20% 22%, rgba(233,145,182,.92) 0%, rgba(233,145,182,0) 64%),
    radial-gradient(44% 44% at 82% 14%, rgba(198,92,138,.58) 0%, rgba(198,92,138,0) 66%),
    radial-gradient(50% 50% at 68% 74%, rgba(118,110,115,.52) 0%, rgba(118,110,115,0) 66%),
    radial-gradient(42% 42% at 12% 86%, rgba(240,190,212,.95) 0%, rgba(240,190,212,0) 64%),
    radial-gradient(38% 38% at 50% 50%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 62%);
  filter:blur(42px);
  animation:auroraDrift 38s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%   { transform:translate3d(0,0,0)      scale(1) }
  50%  { transform:translate3d(-3.5%,2.5%,0) scale(1.09) }
  100% { transform:translate3d(2.5%,-3%,0) scale(1.05) }
}
/* A veil of white over the lights. It is a balance, not a safety net: too much
   and the pink and grey disappear and the page is just white; too little and
   the pink saturates and the whole thing goes from "lit" to "candy". .28 keeps
   both colours clearly present while the panels still read as white glass. */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:rgba(255,255,255,.28);
}
@media (prefers-reduced-motion: reduce){
  body::before{ animation:none }
}

/* every scene is transparent — the lights ARE the ground */
.stage,.day-scene,.finale-scene,.days-head,.days-foot{
  background:none;
  min-height:0;
  padding:clamp(2.6rem,7vh,4rem) clamp(1.4rem,6vw,3rem);
  border-top:0;
}
.stage::before,.day-scene::before,.finale-scene::before,
.stage::after,.day-scene::after{ display:none }
.keyline,.band,.progress-rail{ display:none }
/* the finale is the one place the light is allowed to come up */
.finale-scene{
  background:radial-gradient(70% 46% at 50% 42%, rgba(239,174,200,.34) 0%, rgba(239,174,200,0) 68%);
}

/* ── 2 · FROSTED GLASS ───────────────────────────────────────────────────── */
/* The bleed is the point. A solid white panel over the lights would hide them
   and the page would collapse back into stationery. */
.day-inner,.sheet{
  position:relative;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);
  backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid rgba(255,255,255,.85);
  border-radius:18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 28px 60px -34px rgba(90,60,74,.34),
    0 6px 18px -12px rgba(90,60,74,.16);
  padding:clamp(2rem,7vw,3rem) clamp(1.4rem,6vw,2.4rem);
}
/* atelier's two concentric rules are a printed card; glass has one edge */
.day-inner::before,.day-inner::after{ display:none }
/* the sections themselves are never panelled */
.stage>.inner,.finale-type,.hero-type{
  background:none; box-shadow:none; border:0; border-radius:0;
  padding-left:0; padding-right:0;
}
.stage>.inner::before,.stage>.inner::after,
.finale-type::before,.finale-type::after,
.hero-type::before,.hero-type::after{ display:none }

/* ── 3 · TYPE ────────────────────────────────────────────────────────────── */
.display,.day-title,.days-head-title{
  font-family:var(--script); font-weight:400;
  font-size:clamp(2.7rem,11.5vw,4rem); line-height:1.16;
  letter-spacing:0; text-transform:none;
  /* Pinyon's swashes overshoot the box on every side; without the padding the
     tails fall outside the paint area and render invisible. */
  padding:.16em .3em .2em;
  color:var(--ink);
}
/* the ampersand and the section marks are the only pink type at size */
.hero-names .hn-amp{ color:var(--pink-500) }

.eyebrow,.day-tag,.days-head-eyebrow,.fact-label,.fc-label{
  color:var(--pink-700);
  font-family:var(--sans); font-weight:400;
  font-size:clamp(.66rem,2.9vw,.74rem);
  letter-spacing:.34em; text-indent:.34em; text-transform:uppercase;
}
.body,.ch-text,.day-lede,.micro{ color:var(--ink-soft) }
.hero-lead{ color:var(--ink-mute); font-size:clamp(.68rem,3vw,.78rem); letter-spacing:.3em; text-indent:.3em }
.hero-names .hn-one,.hero-names .hn-two{ color:var(--ink) }
.hero-dates{ color:var(--ink); font-size:clamp(.72rem,3.2vw,.84rem) }
.hero-place,.loader-label{ color:var(--ink-mute) }

/* a hairline with a pink lozenge — the rule this draft uses everywhere */
.hair,.days-head-rule{
  background-image:none;
  background:linear-gradient(90deg,transparent,var(--grey-400),transparent);
  height:1px; width:min(210px,58%); opacity:.9;
  margin-left:auto; margin-right:auto; position:relative;
}
.days-head-rule::after,.hair::after{
  content:""; position:absolute; left:50%; top:50%;
  width:6px; height:6px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--pink-500);
}

/* ── 4 · THE HAIRLINE NUMERAL ────────────────────────────────────────────── */
/* Outlined, not filled, so the drifting pink behind the glass shows through the
   counter of the 27 and the 28. At this size a solid numeral would shout; an
   outline at the same size reads as confidence. */
.day-date b{
  font-size:clamp(5.5rem,26vw,8rem); line-height:.9; letter-spacing:-.03em;
  color:transparent;
  /* --pink-500 measured 2.32:1 on the glass — an outline that faint disappears
     wherever the pink light is strongest, taking the date with it. */
  -webkit-text-stroke:1.5px var(--pink-600);
  paint-order:stroke fill;
}
@supports not ((-webkit-text-stroke:1px red)){
  /* no stroke support — fall back to a solid pink rather than invisible type */
  .day-date b{ color:var(--pink-600) }
}
.day-date span{ color:var(--ink-soft); font-size:clamp(1.05rem,4.4vw,1.2rem) }
.day-date span i + i::before{ color:var(--pink-300) }
.fact::before{ background:var(--grey-200) }
.fact-main{ font-size:clamp(1.15rem,4.8vw,1.4rem); color:var(--ink) }
.venue-link{ color:var(--ink); border-bottom-color:var(--pink-300) }
.venue-link:hover{ border-bottom-color:var(--pink-700) }

/* ── 5 · CONTROLS ────────────────────────────────────────────────────────── */
.btn,.tap-cue .label{
  border-radius:999px;
  background:var(--pink-700); color:#FFFFFF;
  box-shadow:0 12px 26px -14px rgba(180,67,111,.7);
  border:0;
}
.btn:hover{ background:#9C3760; color:#FFFFFF }
.btn--quiet{
  background:rgba(255,255,255,.72); color:var(--pink-700);
  box-shadow:inset 0 0 0 1px var(--pink-300);
}
.btn--quiet:hover{ background:#fff; color:#9C3760 }
.seg{
  border-radius:999px; color:var(--ink-soft);
  box-shadow:inset 0 0 0 1px var(--grey-200);
  background:rgba(255,255,255,.6);
}
.seg.on{ background:var(--pink-700); color:#FFFFFF; box-shadow:none }
.seg.on.seg-no{ background:var(--grey-600); color:#FFFFFF }
.field input{ color:var(--ink); border-bottom-color:var(--line) }
.field label{ color:var(--ink-mute) }
.sheet{ border-top:1px solid rgba(255,255,255,.85) }

/* the flip clock: white tiles, grey hinge, pink label */
.fc-half,.fc-flap{
  background-color:#FFFFFF; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--grey-200);
}
.fc-hinge{ background:var(--grey-200) }
.fc-digit{ filter:none }

/* ── 6 · THE BOTTOM NAV ──────────────────────────────────────────────────── */
.jump{
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.94) 42%);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.jump a{ color:var(--ink-mute); font-size:clamp(.6rem,2.6vw,.66rem); letter-spacing:.16em }
.jump a:hover,.jump a.on{ color:var(--pink-700); border-bottom-color:var(--pink-300) }

/* ── 7 · THE OPENING ─────────────────────────────────────────────────────── */
/* The films are the ivory card on blush stock, so the hero opens near-white and
   the lights come up underneath it. */
.opening-scene{ background:#FBF7F8 }
.hero-plate{
  background:
    radial-gradient(90% 54% at 50% -4%,  rgba(255,255,255,.92), transparent 64%),
    radial-gradient(120% 68% at 50% 106%, rgba(239,174,200,.55), transparent 66%),
    var(--white-warm);
}
.tap-cue .label{ box-shadow:0 14px 30px -14px rgba(180,67,111,.75) }
.scroll-hint span{ color:var(--ink-mute) }
.scroll-hint i{ background:var(--pink-300) }

/* The monogram and the seal are gold artwork, and gold is a fifth colour in a
   three-colour brief — it reads as a leftover from another draft. Desaturated
   they become silver, which puts GREY where the eye goes most. The pixels are
   untouched; deleting these two rules brings the gold straight back. */
.finale-seal,.wax-seal{ filter:grayscale(1) contrast(.92) brightness(1.06) }
.hero-mono,.rsvp-done .ws-mark{ filter:grayscale(1) contrast(1.05) brightness(.62) }


/* ── THE PROGRAMME ───────────────────────────────────────────────────────────
   A list of times is a table, not a paragraph. Centred, every multi-line entry
   rags on both edges and the eye loses the column; left-aligned against a
   right-aligned time, the times form a spine you can scan. */
.programme{
  width:100%; margin-top:clamp(1.4rem,4.5vw,2rem);
  list-style:none; padding:0; text-align:left;
}
.pr-step{ align-items:baseline }
.pr-time{ text-align:right }
.pr-what{ text-align:left }


/* ── THE STORY, AND THE GAP BELOW IT ─────────────────────────────────────────
   The couple's story is one 969-character paragraph, and that is a different
   typographic problem from the two-line ledes this layout was built for.

   ⚠ Do not narrow this measure. It was 32-36ch, which rendered ~34 characters
   a line on a phone — below the comfortable 45-75 range, so the paragraph
   became a tall thin column of about thirty lines. 46ch lets a phone use the
   full width it has (the container caps it there anyway) and stops a desktop
   from running the line too long. */
.chapter,.ch-text,.body{
  max-width:46ch;
  margin-left:auto; margin-right:auto;
}
.ch-text{ line-height:1.85 }
.chapter + .chapter{ margin-top:1.4rem }

/* the heading over the day sat a long way above its card once the eyebrow came
   off; this closes the gap without crowding it */
.days-head{ padding-bottom:clamp(.9rem,3vw,1.4rem) }
.day-scene:first-of-type{ padding-top:clamp(.4rem,1.5vh,.8rem) }