/* ============================================================================
   THEME · NAVY   — the nathan-amara register, for Fredrika & Hosea

   Loaded after styles.css and song.css. It overrides the LOOK only: the tap
   gate, the dissolve, the flip clock, the turntable, the form and the reveals
   all stay in the files before it, untouched.

   ⚠ ONE DELIBERATE HYBRID. The nathan-amara films are navy; the Fredrika &
   Hosea films are an ivory card on blush stock. A navy hero behind an ivory
   film makes the dissolve land as a hard tonal cut. So the OPENING stays light
   — it has to match the film it receives — and the page goes to night from the
   record onward: the card is opened, then the evening starts. Force the hero
   navy to "be consistent" and you break the one moment the whole piece is
   built around.
   ========================================================================== */

:root{
  /* the navy field, from nathan-amara */
  --navy-950:#04070E;
  --navy-900:#070C18;
  --navy-850:#0A1122;
  --navy-800:#0D1730;
  --navy-700:#13203F;

  /* grounds: the base file's four paper tones become four depths of night */
  --paper:#070C18;
  --tint:#0A1122;
  --grey:#0D1730;
  --blush:#13203F;

  /* gold, brighter than the light build's — it is sitting on navy now, where
     #A9812F reads as brown. Measured on --paper: 7.4:1. */
  --gold:#C9A24B;
  --gold-hi:#E8CC86;
  --gold-soft:rgba(201,162,75,.34);
  --gold-line:rgba(201,162,75,.30);

  /* ink inverts: warm off-white on navy. 14.6:1 on --paper. */
  --ink:#F2EBDD;
  --ink-soft:rgba(242,235,221,.76);
  --ink-mute:rgba(242,235,221,.56);
  --line:rgba(242,235,221,.16);
  --line-soft:rgba(242,235,221,.09);

  /* the two accent inks the light build used for small caps have no meaning on
     navy; both become gold so nothing falls to an unreadable brown */
  --blush-ink:#D8B563;
  --grey-mid:rgba(242,235,221,.62);
}

html, body{ background:var(--navy-900) }

/* the light build's ornament belongs to the other draft. theme-atelier is
   loaded before this file for its LAYOUT; everything below undoes its paper. */
html{ background-image:none !important; background-color:#060B16 }
body::before, body::after{ display:none }

/* every framed panel becomes a navy plate with a gold rule, not ivory */
.stage>.inner,.day-inner,.finale-type,.hero-type{
  background:linear-gradient(160deg,rgba(27,43,83,.55),rgba(7,12,24,.55));
  box-shadow:0 26px 60px -34px rgba(0,0,0,.95);
}
.stage>.inner::before,.day-inner::before,.finale-type::before{ border-color:var(--gold-line) }
.stage>.inner::after,.day-inner::after,.finale-type::after{ border-color:var(--gold-soft) }
/* The fleuron divider is gold-on-ivory artwork: it disappears on navy, so a
   hairline replaces it there. It is NOT reset inside .hero-type — the opening
   card is still ivory, and that is the one place the artwork belongs. */
/* `background-image:none !important` followed by a `background:` shorthand does
   NOT give you the gradient — the important longhand outranks the shorthand
   that comes after it, and the rule silently paints nothing. One shorthand,
   no !important; .stage/.day-inner/.finale-type already out-specify the
   single-class rule in theme-atelier. */
.stage .hair,.day-inner .hair,.finale-type .hair,.hero-type .hair{
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
  height:1px; width:min(230px,62%);
}
.keyline{ display:none }
.band{ display:none }
.stage::before,.day-scene::before,.finale-scene::before{ display:none }

/* ── grounds ─────────────────────────────────────────────────────────────── */
/* These were FLAT colours, and that is what put the visible bands behind the
   day cards: two solid navies meeting at a hard horizontal line.

   nathan-amara's grounds are three layers each — a blue bloom from the top, a
   faint gold glow in one bottom corner, and a vertical ramp. The ramp is the
   part that matters: every one of them STARTS AND ENDS DARK, so consecutive
   scenes meet dark-to-dark and the seam disappears. Copy the mid-tone without
   the dark ends and the banding comes straight back.

   Taken one step further here: every ramp starts AND ends on the SAME anchor,
   #060B16, and only the mid-stop differs. nathan-amara's own ends are close but
   not equal (#05090F against #0A1122), and on a dark field the eye still caught
   that 5-value step as a line. Identical endpoints make it seamless by
   construction rather than by eye. Change a mid-stop freely; do NOT change an
   endpoint without changing all of them. */
.stage,.days-head,.days-foot{
  background:
    radial-gradient(88% 56% at 50% 4%,    rgba(28,46,90,.5) 0%, rgba(28,46,90,0) 62%),
    radial-gradient(130% 84% at 88% 100%, rgba(201,162,75,.085) 0%, rgba(201,162,75,0) 60%),
    linear-gradient(180deg,#060B16 0%,#0A1224 50%,#060B16 100%);
}
.stage--tint,.day-cool{
  background:
    radial-gradient(92% 60% at 50% 0%,    rgba(38,60,110,.55) 0%, rgba(38,60,110,0) 64%),
    radial-gradient(120% 78% at 12% 100%, rgba(201,162,75,.10) 0%, rgba(201,162,75,0) 58%),
    linear-gradient(180deg,#060B16 0%,#0D1730 50%,#060B16 100%);
}
.day-warm{
  background:
    radial-gradient(96% 62% at 50% 2%,   rgba(46,70,124,.46) 0%, rgba(46,70,124,0) 66%),
    radial-gradient(120% 80% at 20% 96%, rgba(201,162,75,.13) 0%, rgba(201,162,75,0) 58%),
    linear-gradient(180deg,#060B16 0%,#12203D 50%,#060B16 100%);
}
.finale-scene{
  background:
    radial-gradient(90% 58% at 50% 6%,   rgba(30,50,96,.45) 0%, rgba(30,50,96,0) 62%),
    linear-gradient(180deg,#060B16 0%,#0A1122 46%,#04070E 100%);
}

/* one hairline of gold between every section, which is what stops four navies
   reading as one long ground */
.stage,.day-scene,.finale-scene{ border-top:1px solid var(--gold-line) }

/* ── centred, like the nathan-amara build ────────────────────────────────── */
/* The base stylesheet is the editorial one and sets everything flush left.
   That register does not survive on navy with a script face — it reads as an
   article, not an invitation. */
.stage>.inner,.day-inner,.finale-type,.rsvp-done{
  align-items:center; text-align:center;
  margin-left:auto; margin-right:auto;
}
.chapter,.day-lede,.fact,.body,.ch-text{ text-align:center }
.turntable{ margin-left:auto; margin-right:auto }
.sheet .btn,.cal-btn,.tt-cue{ align-self:center }
.rsvp-day{ text-align:left }
.field input{ text-align:center }
.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);
}

/* ── type ────────────────────────────────────────────────────────────────── */
.display,.day-title,.days-head-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;
  color:var(--gold-hi); padding:.14em .1em .18em;
}
.eyebrow,.day-tag,.fact-label,.fc-label,.days-head-eyebrow{ color:var(--gold) }
.body,.ch-text,.day-lede{ color:var(--ink-soft) }
/* centring only — the FILL is set per-context above, so the opening card keeps
   the couple's own gold fleuron and only the navy sections get a hairline */
.hair{ opacity:1; margin-left:auto; margin-right:auto }

/* ── the day cards, on navy ──────────────────────────────────────────────── */
.day-inner{
  background:linear-gradient(160deg,rgba(27,43,83,.5),rgba(7,12,24,.5));
  box-shadow:0 26px 60px -34px rgba(0,0,0,.95);
}
.day-inner::before{ border-color:var(--gold-line) }
.day-inner::after { border-color:var(--gold-soft) }
.day-date b{ color:var(--ink) }
.day-date span{ color:var(--ink-soft) }
.day-date span i + i::before{ color:var(--gold) }
.venue-link{ color:var(--ink); border-bottom-color:var(--gold-soft) }
.venue-link:hover{ border-bottom-color:var(--gold-hi) }
.fact::before{ background:var(--gold-soft) }

/* ── the flip clock, on navy ─────────────────────────────────────────────── */
.fc-half,.fc-flap{
  background-color:var(--navy-700);
  color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--gold-line);
}
.fc-hinge{ background:rgba(0,0,0,.5) }

/* ── forms and buttons ───────────────────────────────────────────────────── */
.sheet{ background:rgba(19,32,63,.42); box-shadow:none; border-top:1px solid var(--gold-line) }
.field input{ color:var(--ink); border-bottom-color:var(--line) }
.field label{ color:var(--ink-mute) }
.btn,.tap-cue .label{
  border-radius:999px; background:transparent; color:var(--gold-hi);
  box-shadow:inset 0 0 0 1px var(--gold-line);
}
.btn:hover{ background:var(--gold); color:var(--navy-950) }
.seg{ border-radius:999px; box-shadow:inset 0 0 0 1px var(--gold-soft); color:var(--ink-soft) }
.seg.on{ background:var(--gold); color:var(--navy-950); box-shadow:none }
.seg.on.seg-no{ background:var(--ink-mute); color:var(--navy-950) }

/* ── the bottom nav ──────────────────────────────────────────────────────── */
.jump{ background:linear-gradient(180deg,rgba(7,12,24,0),rgba(7,12,24,.96) 42%) }
.jump a{ color:var(--ink-mute) }
.jump a:hover,.jump a.on{ color:var(--gold-hi); border-bottom-color:var(--gold-soft) }

/* ── THE OPENING, NAVY ──────────────────────────────────────────────────────
   This used to stay light, because the films were the ivory Fredrika & Hosea
   card and a navy hero behind an ivory film makes the dissolve land as a hard
   cut. The films are now nathan-amara's NAVY card — generic artwork, no names
   and no initials on it, checked frame by frame — so the hero can be night
   too and the hand-over is a fade rather than a cut. That swap is what made
   this section possible; put the ivory films back and this has to go with
   them. The originals are in assets/_fh-light-films-backup/. */
.opening-scene{ background:var(--navy-950) }
.hero-plate{
  background:
    radial-gradient(96% 56% at 50% -6%,  rgba(27,43,83,.85), transparent 66%),
    radial-gradient(120% 66% at 50% 108%, rgba(10,17,34,.95), transparent 64%),
    var(--navy-950);
}
.hero-type{
  background:linear-gradient(160deg,rgba(27,43,83,.62),rgba(7,12,24,.62));
  box-shadow:0 34px 70px -36px rgba(0,0,0,.95);
}
.hero-type::before{ border-color:var(--gold-line) }
.hero-type::after { border-color:var(--gold-soft) }
.hero-names .hn-one,.hero-names .hn-two,.hero-dates{ color:var(--ink) }
.hero-names .hn-amp{ color:var(--gold-hi) }
.hero-name{ color:var(--gold-hi) }
.hero-lead,.hero-place,.loader-label{ color:var(--ink-mute) }
.tap-cue .label{
  background:rgba(7,12,24,.72); color:var(--gold-hi);
  box-shadow:inset 0 0 0 1px var(--gold-line), 0 12px 28px -14px rgba(0,0,0,.9);
}
.scroll-hint span{ color:var(--ink-mute) }
.scroll-hint i{ background:var(--gold-soft) }

/* ── THE PAGE-LOAD BAR ───────────────────────────────────────────────────────
   Replaces the breathing wax seal. A hairline crawling across the top of a
   dark screen reads as a site coming in — which is exactly what is happening,
   except the bytes are the film's. Driven from the real download in
   updateProgress(); see the clamp note there for why it stops at 92%. */
.film-loader{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  display:block; padding:0; background:none;
  transition:opacity .8s var(--ease);
}
.film-loader.gone{ opacity:0 }
.load-rail{
  position:absolute; top:0; left:0; right:0; height:2px;
  background:rgba(242,235,221,.07);
  overflow:hidden;
}
.load-rail i{
  display:block; width:100%; height:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-deep,#8A6524),var(--gold) 45%,var(--gold-hi) 75%,var(--gold));
  box-shadow:0 0 14px rgba(201,162,75,.55);
  transition:transform .45s cubic-bezier(.25,.8,.3,1);
}
/* a stalled line still has to look alive, or the guest assumes it is broken */
.film-loader.slow .load-rail i{ animation:load-breathe 2.4s ease-in-out infinite }
@keyframes load-breathe{ 50%{ opacity:.45 } }

/* the wax seal only appears in the RSVP confirmation and the finale now */
.film-loader .wax-seal,.loader-label{ display:none }

/* Our Story, on navy. The chapter body needs the same centring and ink as the
   rest of the build; the base file styles it for a light ground. */
.chapters{ width:100% }
.chapter{ text-align:center; margin-left:auto; margin-right:auto; max-width:32ch }
.ch-text{ color:var(--ink-soft) }
.ch-title{ color:var(--gold-hi) }
.ch-no{ color:var(--gold) }

/* ── UNDOING THE PRINTED CARD ────────────────────────────────────────────────
   theme-atelier is loaded underneath for its LAYOUT, and its look came with
   it: an opaque panel inside two concentric gold rules at inset 7px and 11px.
   That is a printed square card, and it is exactly what makes this read as a
   recolour of the pink draft.

   nathan-amara does two different things, and this restores both:

     1. the SECTIONS are not boxed at all. Heading, rule and type sit directly
        on the navy, and the grounds themselves do the separating.
     2. only the sub-cards get a surface, and it is GLASS, not paper — one
        gold hairline, 4px radius, a single faint keyline engraved inside it,
        a translucent gradient and a blur. One border, not two.

   Contents are untouched; this is surface only. */

/* 1 · the sections lose their box */
.stage>.inner,.finale-type,.hero-type{
  background:none;
  box-shadow:none;
  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 }

/* Room, but not a forced height. nathan-amara sets min-height:62svh on its
   stages and gets away with it because its sections are FULL — a programme
   list, a photo grid, a dress palette. Ours are a five-line card, and at 62svh
   that measured 503px of section around 268px of content: 47% of every screen
   was empty, and the page read as unfinished rather than calm.

   The sections hug their content now and the padding does the breathing. */
.stage,.day-scene,.finale-scene{
  min-height:0;
  padding:clamp(2.5rem,6.5vh,3.8rem) clamp(1.4rem,6vw,4rem);
  border-top:0;
}
.opening-scene{ min-height:100svh; min-height:100dvh }

/* 2 · the glass surface, on the day cards and the reply form only */
.day-inner,.sheet{
  position:relative;
  background:linear-gradient(168deg, rgba(24,38,72,.62), rgba(9,15,31,.72));
  border:1px solid var(--gold-line);
  border-radius:4px;
  box-shadow:
    0 1px 0 rgba(255,246,220,.07) inset,
    0 30px 60px -40px rgba(0,0,0,.95),
    0 4px 14px -10px rgba(0,0,0,.6);
  backdrop-filter:blur(2px);
  padding:clamp(1.9rem,6.5vw,2.8rem) clamp(1.3rem,5.5vw,2.2rem);
}
/* ONE engraved keyline inside, where atelier had a second full rule */
.day-inner::before{ display:none }
.day-inner::after,.sheet::after{
  content:""; position:absolute; inset:6px; border-radius:2px;
  border:1px solid var(--gold-line-soft,rgba(201,162,75,.16));
  pointer-events:none;
}
.sheet{ border-top:1px solid var(--gold-line) }

/* the heading over the pair and the calendar under it: both were sized when
   the sections around them were 503px tall */
.days-head{ padding:clamp(1.9rem,6vw,3rem) 1rem clamp(1.1rem,3.5vw,1.7rem) }
.days-foot{ padding:clamp(1.2rem,4vw,1.9rem) 1rem clamp(1.8rem,6vw,2.6rem) }
/* the day cards sat in the middle of an over-tall scene; with the scene tight
   they only need to clear each other */
.day-scene{ padding-top:clamp(.5rem,1.6vh,.9rem); padding-bottom:clamp(.5rem,1.6vh,.9rem) }
.day-scene:first-of-type{ padding-top:0 }


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