/* ============================================================================
   THEME · ATELIER   — the default
   Loaded AFTER styles.css and overrides only the look. Everything mechanical —
   the tap gate, the dissolve, the flip clock, the form fields, the reveals —
   stays in the base file and is untouched.

   Built to the references the client sent. What all five of them share:

     1. a rich decorative ground running FULL BLEED behind everything —
        botanical, damask, drapery. Never a flat colour.
     2. the type held inside an ornamental FRAME laid on that ground — a double
        rule, an arch, a panel.
     3. centred. All of it.
     4. script for the names and the headings, gold, with tiny wide-tracked
        caps as labels.
     5. a fixed bottom nav bar (reference 1) so a guest can jump rather than
        scroll the whole thing.

   The ornament is cropped out of the couple's OWN card film: orn-fleuron.png
   is the gold fleuron printed on the card, keyed onto transparency, used as
   the divider. The ground is a hand-drawn VECTOR ogee damask (pat-damask.svg)
   in the film's blush — a still was tried first and pixelated, because a
   600 px frame cannot be stretched over a 1440 px screen.
   ========================================================================== */

:root{
  --ivory:#FCF8F2;          /* the card */
  --ivory-2:#F7F1E8;
  --gold:#A9812F;          /* rules, ornament, and LARGE script only */
  /* Small gold text on ivory measured 3.38:1 — under the 4.5:1 a 9.6px label
     needs, including "Tap To Open", the one control that opens the piece.
     This is the same gold carried deeper: 4.74:1, still unmistakably gold.
     Large script headings keep --gold, where 3:1 is the bar and 3.38 clears
     it. */
  --gold-ink:#8E6A1D;
  --gold-line:rgba(169,129,47,.55);
  --gold-soft:rgba(169,129,47,.38);
  --ink:#2A231D;
  --ink-soft:rgba(42,35,29,.78);
  --ink-mute:rgba(42,35,29,.72);  /* was .58 — 3.88:1 on ivory */
  --line:rgba(169,129,47,.28);
  --line-soft:rgba(169,129,47,.16);
  --grey-mid:#7A6C5B;      /* was #8A7C68 — 3.84:1, short of 4.5 at 9.6px */
  --blush-ink:#9C5548;
}

/* ── 1 · THE GROUND, SCROLLING ───────────────────────────────────────────── */
/* It used to be a FIXED layer, so the page slid over a ground that never
   moved. It is on the root element now with the default `scroll` attachment,
   which means it travels with the content the way wallpaper behind a real
   card does.

   Two layers. The damask tiles; over it, one gradient sized to 100% of the
   ROOT box — the whole document, not the viewport — so the blush deepens
   gradually from the opening to the finale. That single gradient is what stops
   a 5 000 px scroll reading as the same screen over and over. */
html{
  background-color:#EED3C5;
  /* No white anywhere in this ramp. The first version opened on a 66% white
     wash, so the guest met the piece on a near-white screen and the blush only
     arrived once they scrolled — the whole point of the ground is that the
     colour is there from the first frame. It runs light blush to deep blush
     instead, and every stop is a colour, not a tint of white. */
  background-image:
    linear-gradient(180deg,
      rgba(247,216,203,.50) 0%,
      rgba(238,201,185,.20) 28%,
      rgba(203,155,134,.24) 62%,
      rgba(174,120,100,.40) 100%),
    url("../assets/pat-damask.svg");
  background-repeat:no-repeat, repeat;
  background-size:100% 100%, 64px 85px;    /* the trellis is a FINE repeat */
  background-position:top center, top center;
}
body{ background:transparent }

.stage,.day-scene,.finale-scene{
  background:transparent;
  padding:clamp(1rem,3.5vw,2.2rem) clamp(.9rem,3.5vw,2rem);
}
/* the base file's per-section grain and damask are replaced by the one ground */
.stage::before,.day-scene::before,.finale-scene::before{ display:none }
.band{ display:none }
.keyline{ display:none }

/* ── 2 · THE FRAME ───────────────────────────────────────────────────────── */
/* An ivory panel with a double gold rule, laid on the ground. Reference 1's
   centre panel and reference 4's arch are the same device. */
.stage>.inner,.day-inner,.finale-type{
  max-width:33rem;
  align-items:center; text-align:center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%),
    var(--ivory);
  padding:clamp(3rem,10vw,4.5rem) clamp(1.5rem,7vw,3rem);
  box-shadow:0 30px 60px -34px rgba(88,58,42,.55);
  position:relative;
}
/* the outer rule */
.stage>.inner::before,.day-inner::before,.finale-type::before{
  content:""; position:absolute; inset:9px;
  border:1px solid var(--gold-line); pointer-events:none;
}
/* and the inner one, a hair inside it */
.stage>.inner::after,.day-inner::after,.finale-type::after{
  content:""; position:absolute; inset:14px;
  border:1px solid var(--gold-soft); pointer-events:none;
}

/* ── 3 · TYPE ────────────────────────────────────────────────────────────── */
.eyebrow,.day-tag{
  color:var(--gold-ink); font-size:.55rem;
  letter-spacing:.46em; text-indent:.46em;
}
.display,.day-title{
  font-family:var(--script); font-weight:400;
  font-size:clamp(2.5rem,10.5vw,3.6rem);
  line-height:1.16; letter-spacing:0; text-transform:none;
  padding:.14em .1em .18em; margin:.7rem 0 0;
  color:var(--gold);
}
.day-date{ justify-content:center; margin-top:1.2rem }
.day-date b{
  font-size:clamp(3.4rem,15vw,4.6rem); color:var(--ink); line-height:1;
}
.day-date span{ color:var(--ink-mute) }
.day-lede,.fact,.chapter{ text-align:center }
.chapter{ max-width:32ch }
.body,.ch-text{ margin-left:auto; margin-right:auto }

/* the couple's own fleuron, in place of a plain hairline */
.hair{
  width:min(230px,72%); height:34px; background:none; opacity:1;
  margin:1.4rem auto 0;
  background-image:url("../assets/orn-fleuron.png");
  background-size:contain; background-repeat:no-repeat; background-position:center;
}
.hero-type .hair,.finale-type .hair{ margin:1.4rem auto }

/* ── 4 · ROWS ────────────────────────────────────────────────────────────── */
.day-facts{ margin-top:2.2rem; width:100% }
.fact{ padding:1.4rem 0; border-top:1px solid var(--line-soft) }
.fact-label{ color:var(--gold-ink); letter-spacing:.4em; text-indent:.4em }
.day-warm .fact-label{ color:var(--gold-ink) }
.fact-main{ font-size:clamp(1.25rem,4.8vw,1.5rem) }
.fact-link{ border-bottom-color:var(--gold-line); color:var(--ink) }

.sheet{
  margin-top:2rem; padding:2rem 0 0;
  background:transparent; box-shadow:none;
  border-top:1px solid var(--line);
}
.rsvp-day{ border-top:1px solid var(--line-soft); text-align:left }
.rsvp-done{ align-items:center; text-align:center }
.sheet .btn,.cal-btn{ align-self:center }
.invited-chip,.rsvp-perday{ text-align:center; width:100% }
.field label{ left:50%; transform:translateX(-50%) }
.field input:focus~label,.field input:not(:placeholder-shown)~label{
  transform:translateX(-50%) translateY(-1.15rem) scale(.86);
}
.field input{ text-align:center }
.rsvp-recap{ margin-left:auto; margin-right:auto }

/* ── 5 · BUTTONS ─────────────────────────────────────────────────────────── */
/* Reference 4's pills: a hairline gold outline, not an ink slab. */
.btn,.tap-cue .label{
  border-radius:999px;
  background:transparent; color:var(--gold-ink);
  box-shadow:inset 0 0 0 1px var(--gold-line);
  padding:.95rem 2rem;
}
.btn:hover{ background:var(--gold); color:var(--ivory) }
.tap-cue .label{
  background:var(--ivory); color:var(--gold-ink);
  box-shadow:inset 0 0 0 1px var(--gold-line), 0 12px 28px -14px rgba(88,58,42,.6);
}
.seg{ border-radius:999px; box-shadow:inset 0 0 0 1px var(--gold-soft) }
.seg.on{ background:var(--gold); color:var(--ivory); box-shadow:none }
.seg.on.seg-no{ background:var(--grey-mid); color:var(--ivory) }

/* ── 6 · THE BOTTOM NAV ──────────────────────────────────────────────────── */
/* Straight from reference 1. It also answers "not too long": a guest who only
   wants the RSVP taps it rather than scrolling past everything. */
.jump{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:flex; justify-content:center; gap:clamp(.9rem,5vw,2.2rem);
  padding:.85rem 1rem calc(.85rem + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg, rgba(252,248,242,0), rgba(252,248,242,.96) 42%);
  font-family:var(--sans); font-weight:300;
  opacity:0; pointer-events:none;
  transition:opacity .7s var(--ease);
}
.jump.in{ opacity:1; pointer-events:auto }
.jump a{
  font-size:.55rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mute); padding:.2rem 0;
  border-bottom:1px solid transparent;
  white-space:nowrap;
}
.jump a:hover,.jump a.on{ color:var(--gold-ink); border-bottom-color:var(--gold-soft) }
/* the progress hairline would sit under the bar */
.progress-rail{ display:none }
/* and the scroll hint has to clear it */
.scroll-hint{ bottom:4.2rem }

/* ── 7 · THE OPENING ─────────────────────────────────────────────────────── */
/* This was a flat ivory rectangle — the first thing a guest sees, and the one
   screen that had none of the page's own language on it. It is the same
   framed card as every other section now, floating on the same damask, so the
   film hands over to something that looks like the invitation rather than to
   a blank page. It also matches what the film actually ends on: a card lying
   on patterned stock. */
.opening-scene{ background:transparent }
.hero-plate{
  /* The top glow was white and it bleached the ground behind the opening card.
     It is a warm blush light now, and the bottom is deeper, so the first screen
     carries the colour instead of announcing itself on white. */
  background:
    radial-gradient(95% 55% at 50% -8%,   rgba(252,232,222,.45), transparent 66%),
    radial-gradient(120% 66% at 50% 110%, rgba(197,140,118,.68), transparent 66%);
  padding:clamp(1rem,4vw,2.2rem);
}
/* the card itself */
.hero-type{
  max-width:min(33rem,100%); width:100%;
  padding:clamp(1.9rem,5.4vh,3.2rem) clamp(1.5rem,7vw,3rem);
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 42%),
    var(--ivory);
  box-shadow:0 34px 70px -36px rgba(88,58,42,.62);
}
.hero-type::before{
  content:""; position:absolute; inset:9px;
  border:1px solid var(--gold-line); pointer-events:none;
}
.hero-type::after{
  content:""; position:absolute; inset:14px;
  border:1px solid var(--gold-soft); pointer-events:none;
}
/* the monogram sat a long way off the type; inside a card it needs less air */
.hero-mono{ margin-bottom:clamp(1.1rem,3.2vh,1.7rem) }
.hero-type .hair{ margin:1.2rem auto 1.1rem }

.hero-name{ color:var(--blush-ink) }
.hero-lead{ color:var(--grey-mid) }
.hero-names .hn-one,.hero-names .hn-two{ color:var(--ink) }
.hero-names .hn-amp{ color:var(--gold) }
.hero-dates{ color:var(--ink) }
.hero-place{ color:var(--grey-mid) }
.loader-label{ color:var(--grey-mid) }
/* the hint sits on damask now, not on ivory, so it needs its own weight */
.scroll-hint span{ color:var(--ink-mute) }
.scroll-hint i{ background:var(--gold-line) }

/* ── 8 · THE FLIP CLOCK, on ivory ────────────────────────────────────────── */
/* White tiles on an ivory panel read as loose floating squares, and nine of
   them at the base size overran the panel's padding and clipped "SECONDS".
   Smaller, tighter, and outlined in gold so they read as one instrument. */
.countdown{ justify-content:center; gap:clamp(.5rem,3.2vw,1.1rem); width:100% }
.fc-digit{ --fh:clamp(32px,9.5vw,54px) }
.fc-digits{ gap:3px }
.fc-half,.fc-flap{
  background-color:#FFFFFF;
  box-shadow:inset 0 0 0 1px var(--line-soft);
}
.fc-digit{ filter:none }
.fc-hinge{ background:var(--line-soft) }
.fc-label{ color:var(--gold-ink); letter-spacing:.22em; text-indent:.22em }

/* ── 9 · THE OPENING ON A SHORT SCREEN ───────────────────────────────────── */
/* A phone held sideways is only ~360 px tall. The card is 453 px there, so the
   frame was cut off top and bottom — and `.opening-scene` is `overflow:hidden`,
   so it clipped silently rather than scrolling. Everything shrinks: the card's
   air, the monogram, the names, the fleuron. Keyed off HEIGHT, not width, so a
   short window on a laptop gets the same treatment. */
@media (max-height:600px){
  .hero-plate{ padding:clamp(.5rem,2vh,1rem) }
  .hero-type{
    max-width:min(31rem,100%);
    padding:clamp(1rem,3.4vh,1.7rem) clamp(1.2rem,5vw,2.2rem);
  }
  .hero-type::before{ inset:6px }
  .hero-type::after{ inset:10px }
  .hero-mono{ width:clamp(38px,7.5vh,52px); margin-bottom:clamp(.4rem,1.6vh,.8rem) }
  .hero-lead{ margin-bottom:.55rem; line-height:1.7 }
  .hero-name{ margin-bottom:.3rem }
  .hero-names .hn-one,.hero-names .hn-two{
    font-size:clamp(2rem,7.4vh,3rem); line-height:1.04;
  }
  .hero-type .hair{ margin:.55rem auto .5rem; height:20px }
  .hero-place{ margin-top:.35rem }
}

/* ── 10 · THE DAY CARDS, TO THE CLIENT'S REFERENCE ───────────────────────── */
/* The reference card is compact and centred: a tiny gold label, one very large
   numeral, the date spelled out in serif on ONE line, a short rule, then the
   venue. The double gold rule sits close to the edge and the whole card is
   small enough that both days read as a pair rather than as two screens. */
.day-scene{ padding:clamp(.6rem,2.4vw,1.4rem) clamp(.9rem,3.5vw,2rem) }
.day-inner{
  max-width:31rem;
  padding:clamp(2.1rem,7vw,3rem) clamp(1.4rem,6vw,2.4rem);
  border-radius:3px;
}
.day-inner::before{ inset:7px; border-radius:2px }
.day-inner::after { inset:11px; border-radius:1px }

/* the label */
.day-tag{ color:var(--gold-ink); font-size:.56rem; letter-spacing:.42em; text-indent:.42em }
/* the rule the builder puts under the label is redundant inside a framed card */
.day-inner>.rule{ display:none }

/* the numeral, then the date on one serif line */
.day-date{
  margin:.9rem 0 0; flex-direction:column; align-items:center; gap:.35rem;
}
.day-date b{
  font-size:clamp(3.6rem,17vw,5.2rem); line-height:.92; letter-spacing:-.02em;
  color:var(--ink);
}
.day-date span{
  flex-direction:row; align-items:baseline; gap:.55rem;
  font-family:var(--serif); font-weight:300; text-transform:none;
  font-size:clamp(1rem,4.2vw,1.15rem); letter-spacing:.01em;
  color:var(--ink-soft);
}
/* the middots live in CSS, so the separator is never read aloud as content */
.day-date span i + i::before{ content:"·"; margin-right:.55rem; color:var(--gold) }

/* the title and its line, quieter than the numeral */
.day-title{ font-size:clamp(1.9rem,8vw,2.6rem); margin-top:.9rem }
.day-lede{ margin-top:.2rem }
.day-when,.day-arrive{ text-align:center; width:100% }

/* a short centred hairline above each row, as the reference has above VENUE */
.day-facts{ margin-top:1.5rem }
.fact{ border-top:0; padding:1.1rem 0 0; position:relative }
.fact::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(9rem,46%); height:1px; background:var(--gold-soft);
}
.fact-label{ font-size:.54rem; letter-spacing:.38em; text-indent:.38em }
.fact-main{ font-size:clamp(1.1rem,4.6vw,1.32rem); margin-top:.45rem }

/* the heading over the pair of day cards — script on the bare ground, with a
   hairline and a single diamond under it, as the reference has */
.days-head{
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(2.4rem,9vw,4rem) 1rem clamp(1.4rem,5vw,2.2rem);
}
.days-head-title{
  margin:0; font-family:var(--script); font-weight:400;
  font-size:clamp(2.6rem,11vw,3.8rem); line-height:1.1;
  color:var(--gold); padding:.1em .1em .16em;
}
.days-head-rule{
  display:block; position:relative; margin-top:1rem;
  width:min(15rem,62%); height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-soft) 18%,var(--gold-soft) 82%,transparent);
}
.days-head-rule::after{
  content:""; position:absolute; left:50%; top:50%;
  width:5px; height:5px; transform:translate(-50%,-50%) rotate(45deg);
  background:var(--gold);
}
/* the Directions link's own underline was landing on the next row's hairline */
.fact-link{ margin-top:.7rem; margin-bottom:.3rem }
/* the small caps line above the "Two Days" heading, on the bare ground */
.days-head-eyebrow{ margin:0 0 .9rem; color:var(--gold-ink) }

/* the add-to-calendar, now under the pair of cards rather than inside one */
.days-foot{
  display:flex; justify-content:center;
  padding:clamp(1.6rem,6vw,2.6rem) 1rem clamp(2.4rem,8vw,3.4rem);
}

/* the venue line doubles as the map pin — a hairline under it is the only
   thing that says so, since the reference card has no Directions row */
.venue-link{
  color:inherit; text-decoration:none;
  border-bottom:1px solid var(--gold-soft);
  padding-bottom:2px;
}
.venue-link:hover{ border-bottom-color:var(--gold) }