/* ============================================================================
   THEME · SAGE   — white and sage green, with champagne as the metal.
   Lorna Ruvinga & Ritja Hongonekua, 26 March 2027.

   Their wedding colours are champagne, white and sage green, so the page is
   built from those three and nothing else.

   ⚠ THE ONE DECISION THAT SHAPES EVERYTHING BELOW.
   The obvious move is champagne foil headings, the way the cream draft had gold
   ones. It cannot be done here, and this was measured rather than guessed: a
   champagne highlight bright enough to read as metal (#A88C58) manages only
   2.61:1 on the sage ground and 1.75:1 on the deepest one — nowhere near the
   3:1 a display size needs. Every lighter champagne is worse. A pale metal on a
   mid-tone ground is a contrast problem you cannot design around.

   So the roles are swapped instead:

       SAGE carries the TYPE      — headings, labels, body. 5.3:1 to 7.7:1.
       CHAMPAGNE is the METAL     — hairlines, the divider lozenge, the numeral
                                    outline, the buttons. Never a paragraph.
       WHITE is the AIR           — most of the page, most of the time.

   Loaded after styles.css and theme-atelier.css. Atelier is underneath for its
   LAYOUT only (the day-card date block, the bottom nav, the "The Day" heading);
   every surface it brings is replaced below.
   ========================================================================== */

:root{
  /* white — air */
  --white:#FFFFFF;
  --white-soft:#FCFDFB;

  /* sage — the colour, and the type */
  --sage-50:#F3F5F1;          /* the ground anchor */
  --sage-100:#E4EAE0;
  --sage-200:#D2DCCD;
  --sage-300:#CBD8C6;
  --sage-400:#A8B8A2;
  --sage-600:#74856E;
  --sage-800:#3B4736;         /* 5.35:1 on the deepest ground, 7.7:1 on white */

  /* champagne — the metal, never a paragraph */
  --champ-100:#EFE6D3;
  --champ-300:#D9C7A1;
  --champ-500:#B49A69;
  --champ-700:#8A7343;
  --champ-900:#6E5A2E;        /* 6.5:1 on white — the only champagne that holds text */

  /* ink */
  --ink:#2F3630;              /* 12.2:1 on white */
  --ink-soft:#4A5745;         /* 7.5:1 */
  --ink-mute:#5D6A58;

  /* the base file's tokens, remapped onto this palette */
  --paper:#FCFDFB;
  --tint:#E4EAE0;
  --grey:#FCFDFB;
  --blush:#E4EAE0;
  --blush-ink:#3B4736;
  --grey-mid:#4A5745;
  --gold:#B49A69;
  --gold-2:#D9C7A1;
  --gold-4:#B49A69;
  --gold-hi:#EFE6D3;
  --gold-ink:#6E5A2E;
  --gold-soft:rgba(180,154,105,.46);
  --gold-line:rgba(180,154,105,.36);
  --line:rgba(59,71,54,.20);
  --line-soft:rgba(59,71,54,.11);
}

html,body{ background:var(--sage-50) }
body::before,body::after{ display:none }
.keyline,.band{ display:none }

/* ── 1 · THE GROUNDS ─────────────────────────────────────────────────────── */
/* Three layers each: a soft bloom, a corner glow, and a vertical ramp.

   ⚠ Every ramp starts AND ends on the SAME anchor, #F3F5F1, and only the
   mid-stop differs. Ramps that run light-to-dark leave each scene ending darker
   than the next one begins, and that step draws a visible band across the page.
   Identical endpoints make the joins seamless by construction rather than by
   eye. Change a mid-stop freely; do NOT change one endpoint without changing
   all of them.

   ⚠ The bloom sits at 30%, not at the top. A bloom peaking at the very top of a
   tall section opens far brighter than the short section above it closes, which
   draws its own line even when the ramps agree. */
.stage,.day-cool,.days-head,.days-foot{
  background:
    radial-gradient(94% 56% at 50% 30%,   rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 66%),
    radial-gradient(120% 80% at 14% 100%, rgba(168,184,162,.20) 0%, rgba(168,184,162,0) 62%),
    linear-gradient(180deg,#F3F5F1 0%,#FCFDFB 50%,#F3F5F1 100%);
}
.stage--tint,.day-warm{
  background:
    radial-gradient(94% 56% at 50% 30%,  rgba(252,253,251,.72) 0%, rgba(252,253,251,0) 66%),
    radial-gradient(115% 78% at 86% 96%, rgba(116,133,110,.20) 0%, rgba(116,133,110,0) 62%),
    linear-gradient(180deg,#F3F5F1 0%,#E4EAE0 50%,#F3F5F1 100%);
}
/* ⚠ The finale foot stops at #CBD8C6, not lower. Everything on it — the script,
   the small caps, the champagne rule — was measured against THIS value. Deepen
   it and the champagne accents start failing first, silently. */
.finale-scene{
  background:
    radial-gradient(94% 58% at 50% 28%, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 64%),
    linear-gradient(180deg,#F3F5F1 0%,#DDE5D9 55%,#CBD8C6 100%);
}

/* the woven linen tooth, retinted green-grey to sit under sage rather than tan.

   ⚠ .days-head and .days-foot MUST be in this list, and display:block is
   load-bearing: theme-atelier sets `display:none` on the three ::before it
   knows about, so without it the tooth renders on those two blocks alone and
   they sit a visible shade darker than everything around them. */
.days-head,.days-foot{ position:relative }
.stage::before,.day-scene::before,.finale-scene::before,
.days-head::before,.days-foot::before{
  display:block;
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.42; mix-blend-mode:multiply;
  background-image:
    repeating-linear-gradient(90deg, rgba(90,105,86,.040) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(90,105,86,.030) 0 1px, transparent 1px 3px);
}
/* ⚠ No feathered seam. Anchored endpoints and a feather are alternatives — run
   both and the feather lifts each scene's foot, the next opens at the anchor,
   and the step it was meant to hide is the step it creates. */
.stage>.inner,.day-inner,.finale-type{ position:relative; z-index:2 }

/* ── 2 · NO BOXES ────────────────────────────────────────────────────────── */
.stage>.inner,.day-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,
.day-inner::before,.day-inner::after,
.finale-type::before,.finale-type::after,
.hero-type::before,.hero-type::after{ display:none }

.stage,.day-scene,.finale-scene{
  min-height:0;
  padding:clamp(3rem,8vh,4.6rem) clamp(1.5rem,6vw,3.5rem);
}

/* ── 3 · TYPE ────────────────────────────────────────────────────────────── */
/* Sage script, not champagne foil. See the note at the top of this file. */
.display,.day-title,.days-head-title{
  font-family:var(--script); font-weight:400;
  font-size:clamp(2.6rem,11vw,3.8rem); line-height:1.18;
  letter-spacing:0; text-transform:none;
  /* Pinyon's swashes overshoot the box on every side; without this padding the
     tails fall outside the paint area and the letters look sliced. */
  padding:.16em .3em .2em;
  color:var(--sage-800);
}

.eyebrow,.day-tag,.days-head-eyebrow,.fact-label,.fc-label{
  color:var(--sage-800);
  font-family:var(--sans); font-weight:400;
  font-size:clamp(.66rem,2.9vw,.74rem);
  letter-spacing:.32em; text-indent:.32em; text-transform:uppercase;
}

/* ── SPACING ────────────────────────────────────────────────────────────────
   ⚠ The measure set here is NOT the final one — the block at the foot of this
   file widens .body/.ch-text/.chapter to 46ch and wins by source order. The
   36ch below applies only to .day-lede, which is a single short line. See that
   block for why 46 rather than 36. */
.body,.ch-text,.day-lede{
  color:var(--ink-soft);
  font-size:clamp(1.02rem,4.3vw,1.14rem);
  line-height:1.9;
  max-width:36ch; margin-left:auto; margin-right:auto;
}
.chapters{ width:100% }
.micro{ color:var(--ink-mute); line-height:1.8 }
.display + .hair,.days-head-title + .days-head-rule{ margin-top:1.2rem }
.eyebrow{ margin-bottom:.75rem }
.day-date{ margin-top:1.1rem }
.day-facts{ margin-top:2rem }
.fact{ padding-top:1.4rem }
.fact-main{ margin-top:.5rem }

/* the divider: a champagne hairline with a champagne lozenge on it */
.hair,.days-head-rule{
  background-image:none;
  background:linear-gradient(90deg,transparent,var(--champ-500),transparent);
  height:1px; width:min(220px,60%); opacity:.95;
  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; transform:translate(-50%,-50%) rotate(45deg);
  background:var(--champ-700);
}

.day-date b{ color:var(--ink) }
.day-date span{ color:var(--ink-soft); font-size:clamp(1.05rem,4.4vw,1.2rem) }
.day-date span i + i::before{ color:var(--champ-500) }
.fact::before{ background:var(--gold-soft) }
.fact-main{ color:var(--ink) }
.venue-link{ color:var(--ink); border-bottom-color:var(--champ-500) }
.venue-link:hover{ border-bottom-color:var(--champ-900) }

/* the programme: a champagne time column against sage text */
.pr-time{ color:var(--champ-900) }
.pr-what{ color:var(--ink-soft); line-height:1.75 }
.pr-step{ padding:1rem 0; border-top:1px solid var(--line-soft) }

/* ── 4 · CONTROLS ────────────────────────────────────────────────────────── */
.btn,.tap-cue .label{
  border-radius:999px;
  background:var(--sage-800); color:#FFFFFF;
  box-shadow:0 12px 26px -14px rgba(59,71,54,.6);
  border:0;
}
.btn:hover{ background:#2F3830; color:#FFFFFF }
.btn--quiet{
  background:rgba(255,255,255,.8); color:var(--sage-800);
  box-shadow:inset 0 0 0 1px var(--champ-500);
}
.btn--quiet:hover{ background:#fff; color:var(--champ-900) }
.seg{
  border-radius:999px; color:var(--ink-soft);
  background:rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1px var(--sage-200);
}
.seg.on{ background:var(--sage-800); color:#FFFFFF; box-shadow:none }
.seg.on.seg-no{ background:var(--sage-600); color:#FFFFFF }
.sheet{
  background:rgba(255,255,255,.62); box-shadow:none;
  border-top:1px solid var(--champ-500);
}
.field input{ color:var(--ink); border-bottom-color:var(--line) }
.field label{ color:var(--ink-mute) }

/* the flip clock: white tiles, sage hairline, champagne label */
.fc-half,.fc-flap{
  background-color:#FFFFFF; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--sage-200);
}
.fc-hinge{ background:var(--sage-200) }
.fc-label{ color:var(--sage-800) }

/* ── 5 · THE BOTTOM NAV ──────────────────────────────────────────────────── */
.jump{
  background:linear-gradient(180deg, rgba(252,253,251,0), rgba(252,253,251,.96) 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(--sage-800); border-bottom-color:var(--champ-500) }
.progress-rail{ display:none }

/* ── 6 · THE OPENING ─────────────────────────────────────────────────────── */
.opening-scene{ background:#F6F8F4 }
.hero-plate{
  background:
    radial-gradient(92% 56% at 50% -4%,   rgba(255,255,255,.94), transparent 64%),
    radial-gradient(120% 70% at 50% 108%, rgba(168,184,162,.42), transparent 66%),
    var(--white-soft);
}
.hero-names .hn-one,.hero-names .hn-two,.hero-dates{ color:var(--ink) }
.hero-names .hn-amp{ color:var(--champ-700) }
.hero-name{ color:var(--sage-800) }
.hero-lead{ color:var(--ink-mute); font-size:clamp(.68rem,3vw,.78rem); letter-spacing:.3em; text-indent:.3em }
.hero-place,.loader-label{ color:var(--ink-mute) }
.scroll-hint span{ color:var(--ink-mute) }
.scroll-hint i{ background:var(--champ-500) }

/* the wax disc is warm gold artwork; on a sage page it becomes champagne */
.finale-seal,.wax-seal{ filter:saturate(.62) hue-rotate(-8deg) brightness(1.04) }

/* ── 7 · THE BLOSSOMS ────────────────────────────────────────────────────────
   Canvas petals, drifting over everything. See buildPetalDrift in main.js for
   the palette — the colours had to be chosen AGAINST this ground, not for
   prettiness: a cream or blush petal on a white-and-sage page is invisible
   (1.2-1.5:1 against the ground). Champagne and mid-sage carry 2.0-2.7:1, which
   is what a decorative shape needs to be seen without competing with the type. */
#petalDrift{ position:fixed; inset:0; z-index:58; pointer-events:none }

/* the gold-dust specks become champagne */
.particles{ position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden }
.particle{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--champ-100), rgba(180,154,105,0) 70%);
  opacity:0; will-change:transform,opacity;
}


/* ── 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) }