:root{
  --h100: 100vh;
  --col: min(100vw, calc(var(--h100) * 1455 / 2342)); /* width of the portrait column every section uses */
  --cq: calc(var(--col) / 100); /* 1% of the column; becomes 1cqw below where supported */
  --navy: #16274a;
  --paper: #f7f2e6;
  --font-display: 'Libre Baskerville', serif;
  --ease: cubic-bezier(.65,0,.35,1);
}
@supports (height: 100dvh){ :root{ --h100: 100dvh; } }
@supports (width: 1cqw){ :root{ --cq: 1cqw; } }
@supports not (width: 1cqw){ .cd-frame{ --cq: calc(min(var(--col), var(--h100) * 608 / 1080) / 100); } }
*{ box-sizing: border-box; }
html, body{ height: 100%; margin: 0; }
body{ background: #0e1220; overflow: hidden; } /* locked on the envelope... */
body.site-opened{ overflow-y: auto; } /* ...scrolls once it is opened */
button{ font-family: inherit; cursor: pointer; }

/* Portrait stage matching the 1455x2342 background; extra width on desktop shows dark sides */
.stage{
  position: relative; overflow: hidden; overflow: clip;
  height: 100vh;
  height: 100dvh;
  width: var(--col);
  margin: 0 auto;
  container-type: inline-size;
  background:
    url('assets/photos/envelope/background1.png') 23% 43% / 130% 130% no-repeat,
    linear-gradient(180deg, #16274a 0%, #2c4a78 32%, #6f9dc4 62%, #cfe0ee 100%);
}

.invite-heading, .invite-date{
  position: absolute; left: 0; right: 0; margin: 0; text-align: center;
  font-family: var(--font-display); color: #fff; text-transform: uppercase;
  transform: translateY(-50%);
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
  transition: opacity .5s var(--ease);
}
.invite-heading{ top: 21.9%; font-weight: 700; letter-spacing: .01em; font-size: calc(var(--cq) * 4.5); }
.invite-date{ top: 26.1%; font-weight: 600; letter-spacing: .10em; font-size: calc(var(--cq) * 3.5); }

.envelope-wrap{
  position: absolute; left: 3%; top: 22.4%; width: 100%;
  aspect-ratio: 1097 / 692;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.envelope{ display: block; width: 100%; height: 100%; pointer-events: none; }
.envelope-hit{
  position: absolute; inset: 0; border: 0; background: none; padding: 0; border-radius: 4px;
}
.envelope-hit:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

.unseal-caption{
  position: absolute; left: 0; right: 9%; bottom: 4%; margin: 0; text-align: center;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: calc(var(--cq) * 2); color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
  pointer-events: none;
}

.stage.is-opened .envelope-wrap{ opacity: 0; transform: translateY(-4%) scale(1.05); pointer-events: none; }
.stage.is-opened .invite-heading, .stage.is-opened .invite-date{ opacity: 0; }

.countdown{
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease), visibility 0s linear .7s;
}
.stage.is-opened .countdown{ opacity: 1; visibility: visible; transition-delay: 0s; }
.cd-bg{
  position: absolute; inset: 0;
  background: url('assets/photos/countdown/background2.png') 60% 70% / 135% 125% no-repeat, #d9c9a8;
}
.cd-frame{
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  aspect-ratio: 608 / 1080; max-width: 100%;
  container-type: inline-size; perspective: 1400px;
}
.cd-flap, .cd-content, .cd-base{ position: absolute; display: block; height: auto; }
.cd-flap{ left: 6.58%; top: 11.57%; width: 83.44%; transform-origin: 50% 100%; transform: rotateX(90deg); opacity: .6; }
.cd-content{ left: 14.47%; top: 14.35%; width: 69.1%; opacity: 0; }
.cd-base{ left: .82%; top: 31.85%; width: 97%; }
/* "Click to see our story": the scroll sits in the slot of the old cloud (fitted to the Canva reference, 481:325 like click.png) and links to the Love Story section */
.cd-story{ position: absolute; display: block; left: 49.38%; top: 59.05%; width: 45.13%; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--ease); }
.cd-story img{ display: block; width: 100%; height: auto; }
.cd-story:hover{ transform: translateY(-1.2%) scale(1.04); }
.cd-story:active{ transform: scale(.98); }
.cd-story:focus-visible{ outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }
.stage.is-opened .cd-flap{ animation: flap-open 1.1s .3s var(--ease) both; }
.stage.is-opened .cd-content{ animation: content-in 1.6s 1s var(--ease) both; }
@keyframes flap-open{ from{ transform: rotateX(90deg); opacity: .6; } to{ transform: rotateX(0); opacity: 1; } }
@keyframes content-in{ from{ opacity: 0; transform: translateY(3%); } to{ opacity: 1; transform: none; } }

.cd-title, .cd-grid{
  position: absolute; left: 0; right: 0; margin: 0; text-align: center; color: #fff;
  font-family: var(--font-display); text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.cd-title{ top: 84.35%; transform: translateY(-50%); font-weight: 700; font-size: calc(var(--cq) * 3.2); letter-spacing: .02em; }
.cd-grid{ top: 86.2%; display: grid; grid-template-columns: repeat(4, calc(var(--cq) * 19.08)); justify-content: center; }
.cd-unit{ position: relative; display: flex; flex-direction: column; align-items: center; }
.cd-num{ font-size: calc(var(--cq) * 11); line-height: 1; font-variant-numeric: tabular-nums; }
.cd-unit:not(:last-child)::after{
  content: ":"; position: absolute; top: 0; right: 0; transform: translateX(50%);
  font-size: calc(var(--cq) * 11); line-height: 1;
}
.cd-label{ margin-top: calc(var(--cq) * .5); font-size: calc(var(--cq) * 2.6); line-height: 1; letter-spacing: .02em; }

/* Story: sits below the countdown, same column width as the stage */
.story{
  width: var(--col); margin: 0 auto;
  container-type: inline-size; overflow: clip; background: #0b1f66;
}
.story-top{
  position: relative; --gallery-band: calc(var(--cq) * 8); --gallery-band-shift: calc(var(--cq) * .8); padding-top: calc(var(--cq) * 5.8);
  background: url('assets/photos/story/background3.png') center top / cover no-repeat, #1c2a4a;
}
.story-flower, .story-text, .story-collage{ display: block; width: 100%; height: auto; }
.story-text{ position: relative; z-index: 1; margin-top: calc(var(--cq) * 2); } /* gap under the couple photo; the title already has its own top space inside the image */
#gallery{ scroll-margin-top: calc(var(--cq) * 10); } /* keeps the "Our Gallery" title in view when jumped to */
/* lovestory.png is transparent behind "Our Gallery", so the band is drawn here, behind it */
.story-top::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: var(--gallery-band-shift); height: var(--gallery-band);
  background: linear-gradient(90deg, #060a33 28%, #081c5f 80%);
}

/* Entourage: 402x648 canvas measured from the Canva reference; pieces and name lists placed in % of it */
.ent{
  position: relative; width: var(--col); margin: 0 auto;
  aspect-ratio: 402 / 648; container-type: inline-size; overflow: clip;
  background: url('assets/photos/weddingdeets/background4.png') 42% 50% / cover no-repeat, #e8eadb;
}
.ent-piece{ position: absolute; display: block; height: auto; pointer-events: none; }
.ent-names{
  position: absolute; transform: translateX(-50%); margin: 0; text-align: center; white-space: nowrap;
  font-family: 'Lora', serif; font-weight: 600; font-size: calc(var(--cq) * 2.1); line-height: calc(var(--cq) * 2.64); color: #161616;
}
.ent-status{
  position: absolute; left: 0; right: 0; bottom: 1.2%; margin: 0; text-align: center;
  font-family: system-ui, sans-serif; font-size: calc(var(--cq) * 2.3); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.ent-piece.title{ left: 12.19%; top: 0.00%; width: 81.72%; }
.ent-piece.pp{ left: 10.45%; top: 11.57%; width: 77.99%; }
.ent-piece.bm{ left: 13.18%; top: 31.02%; width: 75.09%; }
.ent-piece.cv{ left: 19.40%; top: 39.51%; width: 63.71%; }
.ent-piece.bb{ left: 18.16%; top: 50.93%; width: 66.14%; }
.ent-piece.bf{ left: 18.66%; top: 78.70%; width: 65.02%; }
.ent-names[data-ent="parentsGroom"]{ left: 30.85%; top: 14.38%; }
.ent-names[data-ent="parentsBride"]{ left: 70.65%; top: 14.38%; }
.ent-names[data-ent="principalLeft"]{ left: 31.34%; top: 22.02%; }
.ent-names[data-ent="principalRight"]{ left: 71.14%; top: 22.02%; }
.ent-names[data-ent="bestMan"]{ left: 30.97%; top: 36.84%; }
.ent-names[data-ent="maid"]{ left: 70.65%; top: 36.84%; }
.ent-names[data-ent="candle"]{ left: 31.59%; top: 47.48%; }
.ent-names[data-ent="veil"]{ left: 71.39%; top: 47.48%; }
.ent-names[data-ent="cord"]{ left: 51.24%; top: 57.28%; }
.ent-names[data-ent="groomsmen"]{ left: 30.85%; top: 68.24%; }
.ent-names[data-ent="bridesmaids"]{ left: 70.90%; top: 68.24%; }
.ent-names[data-ent="bible"]{ left: 51.74%; top: 81.51%; }
.ent-names[data-ent="coin"]{ left: 30.52%; top: 88.84%; }
.ent-names[data-ent="ring"]{ left: 72.26%; top: 88.84%; }
.ent-names[data-ent="flower"]{ left: 51.37%; top: 93.94%; }

/* Timeline & venue: the PNG carries the background, titles and icons; the two photos sit in its gaps and open Google Maps */
.venue{
  position: relative; width: var(--col); margin: 0 auto; aspect-ratio: 443 / 737; overflow: clip;
  background: url('assets/photos/wherewhen/timeline-venue.png') 29% 0 / cover no-repeat, #06104a;
}
.venue-link{ position: absolute; display: block; }
.venue-link img{ position: absolute; top: 0; display: block; height: auto; transition: filter .25s var(--ease); }
.venue-link:hover img{ filter: brightness(1.08); }
.venue-link:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.venue-link.ceremony{ left: 11.29%; top: 78.7%; width: 38.83%; height: 17.2%; }
.venue-link.ceremony img{ left: 9.88%; width: 76.7%; }
.venue-link.reception{ left: 57.56%; top: 78.43%; width: 29.57%; height: 17.4%; }
.venue-link.reception img{ left: 0; width: 100%; }
.sr-only{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Details & RSVP: the PNG carries the artwork and text; the RSVP link sits in its empty bottom area. Reference 312x698: the asset is stretched to fill it (about 3% wider than its own ratio). The box is cropped to 312x652 (blank silk) so the countdown can follow the RSVP form instead of sitting inside the picture. */
.details{
  position: relative; width: var(--col); margin: 0 auto; aspect-ratio: 312 / 652;
  container-type: inline-size; overflow: clip; --ink: #00357a;
  background: url('assets/photos/faq/faq.png') 0 0 / 100% calc(var(--col) * 698 / 312) no-repeat, #ececec;
}
.details::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--cq) * 8); background: linear-gradient(to bottom, rgba(240,240,240,0), #f0f0f0); pointer-events: none; }
.rsvp-link{
  position: absolute; z-index: 1; left: 50%; top: 95.25%; transform: translate(-50%, -50%); white-space: nowrap; margin: 0;
  padding: 0; border: 0; background: none; color: var(--ink); text-transform: uppercase;
  font-family: 'Instrument Serif', 'Libre Baskerville', serif; font-size: calc(var(--cq) * 7.8); line-height: 1.1;
  text-decoration: underline; text-decoration-thickness: calc(var(--cq) * .6); text-underline-offset: calc(var(--cq) * .9);
}
.rsvp-link:focus-visible{ outline: 2px solid var(--ink); outline-offset: 4px; }

/* Countdown under the RSVP form (sits right under the link while the form is closed) */
.dt-wrap{ width: var(--col); margin: 0 auto; container-type: inline-size; background: #f0f0f0; --ink: #00357a; }
.dt-inner{ padding: calc(var(--cq) * 1) 0 calc(var(--cq) * 14); text-align: center; color: var(--ink); text-transform: uppercase; font-family: 'Instrument Serif', 'Libre Baskerville', serif; }
.dt-title{ margin: 0 0 calc(var(--cq) * 2); font-size: calc(var(--cq) * 3.8); line-height: 1.2; letter-spacing: .05em; }
.dt-grid{ display: grid; grid-template-columns: repeat(4, calc(var(--cq) * 18)); justify-content: center; }
.dt-unit{ position: relative; display: flex; flex-direction: column; align-items: center; }
.dt-num{ font-size: calc(var(--cq) * 12); line-height: 1; font-variant-numeric: tabular-nums; }
.dt-unit:not(:last-child)::after{ content: ":"; position: absolute; top: 0; right: 0; transform: translateX(50%); font-size: calc(var(--cq) * 12); line-height: 1; }
.dt-label{ margin-top: calc(var(--cq) * 1.2); font-size: calc(var(--cq) * 2.8); line-height: 1; letter-spacing: .06em; }

/* RSVP form: opens under the Details section when "Click here to RSVP" is pressed */
.rsvp{
  width: var(--col); margin: 0 auto; container-type: inline-size; background: #f0f0f0;
  --rv-ink: #00357a; --rv-text: #405ca4; --rv-line: #c3d0e6; --rv-accept: #3c6e4a; --rv-decline: #9c5a4a;
  font-family: 'Lora', serif; color: var(--rv-text);
}
.rsvp-panel{ display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--ease), opacity .5s var(--ease); }
.rsvp-panel.is-open{ grid-template-rows: 1fr; opacity: 1; }
.rsvp-panel-inner{ overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear .6s; }
.rsvp-panel.is-open .rsvp-panel-inner{ visibility: visible; transition-delay: 0s; }
/* the card is inset a little so the side nav (fixed, near the column edge) never covers the fields */
.rsvp-card{
  margin: calc(var(--cq) * 3) calc(var(--cq) * 5) calc(var(--cq) * 9); padding: calc(var(--cq) * 8) calc(var(--cq) * 7) calc(var(--cq) * 7);
  background: #fff; border: 1px solid #dbe4f2; border-radius: 22px;
  box-shadow: 0 22px 44px -26px rgba(0,53,122,.45), 0 2px 6px rgba(0,53,122,.06);
}
.rsvp-orn{ display: flex; align-items: center; gap: 12px; max-width: 58%; margin: 0 auto calc(var(--cq) * 4); font-size: 14px; line-height: 1; color: var(--rv-ink); opacity: .55; }
.rsvp-orn::before, .rsvp-orn::after{ content: ""; flex: 1; height: 1px; background: currentColor; }
.rsvp-heading{ margin: 0 0 calc(var(--cq) * 3); text-align: center; text-wrap: balance; font: 400 clamp(30px, calc(var(--cq) * 10), 46px)/1.05 'Instrument Serif', 'Libre Baskerville', serif; color: var(--rv-ink); }
.rsvp-sub{ margin: 0 auto calc(var(--cq) * 8); max-width: 30em; text-align: center; text-wrap: balance; font-size: clamp(14px, calc(var(--cq) * 4), 17px); line-height: 1.6; }
.rsvp-label{ margin: 0 0 8px; font-size: clamp(11px, calc(var(--cq) * 3), 13px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rv-ink); }
.rsvp-input{
  display: block; width: 100%; padding: 15px 16px; border: 1px solid var(--rv-line); border-radius: 10px;
  background: #fbfcfe; font: italic 400 17px 'Lora', serif; color: #16233f; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.rsvp-input::placeholder{ font-style: normal; color: #8b99b4; }
.rsvp-input:focus{ outline: none; border-color: var(--rv-ink); box-shadow: 0 0 0 3px rgba(0,53,122,.16); background: #fff; }
.rsvp-btn:focus-visible, .rsvp-switch input:focus-visible ~ .track, .rsvp-modal-close:focus-visible{ outline: 2px solid var(--rv-ink); outline-offset: 2px; }
.rsvp-status{ display: flex; align-items: flex-start; gap: 8px; margin: 12px 2px 0; min-height: 20px; font-size: clamp(13px, calc(var(--cq) * 3.6), 15px); line-height: 1.4; color: var(--rv-accept); }
.rsvp-status .dot{ width: 7px; height: 7px; margin-top: .5em; border-radius: 50%; background: var(--rv-accept); flex: none; }
.rsvp-status.is-error{ color: var(--rv-decline); }
.rsvp-status.is-error .dot{ background: var(--rv-decline); }
.rsvp-reveal{ display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--ease), opacity .5s var(--ease); }
.rsvp-reveal.is-open{ grid-template-rows: 1fr; opacity: 1; }
.rsvp-reveal-inner{ overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear .6s; }
.rsvp-reveal.is-open .rsvp-reveal-inner{ visibility: visible; transition-delay: 0s; }
.rsvp-rule-label{ display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; font-size: clamp(11px, calc(var(--cq) * 3), 13px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rv-ink); }
.rsvp-rule-label::before, .rsvp-rule-label::after{ content: ""; flex: 1; border-top: 1px dashed var(--rv-line); }
.rsvp-person{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 14px; padding: 16px 18px; background: #f4f7fc; border: 1px solid #e1e9f5; border-radius: 14px; }
.rsvp-person-name{ flex: 1 1 140px; min-width: 0; overflow-wrap: break-word; font: italic 600 clamp(20px, calc(var(--cq) * 6), 26px)/1.25 'Lora', serif; color: var(--rv-ink); }
.rsvp-title{
  flex: none; min-width: 84px; padding: 9px 30px 9px 12px; border: 1px solid #c9d6ea; border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2300357a' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  font: 600 15px 'Lora', serif; color: var(--rv-ink);
}
.rsvp-title:focus{ outline: none; border-color: var(--rv-ink); box-shadow: 0 0 0 3px rgba(0,53,122,.16); }
.rsvp-control{ display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 12px; flex: 1 0 100%; padding-top: 12px; border-top: 1px dashed var(--rv-line); }
.rsvp-switch{ position: relative; width: 46px; height: 26px; flex: none; }
.rsvp-switch input{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
.rsvp-switch .track{ position: absolute; inset: 0; border-radius: 999px; background: var(--rv-decline); transition: background .25s var(--ease); }
.rsvp-switch .thumb{ position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .25s var(--ease); pointer-events: none; }
.rsvp-switch input:checked ~ .track{ background: var(--rv-accept); }
.rsvp-switch input:checked ~ .thumb{ transform: translateX(20px); }
.rsvp-switch-label{ white-space: nowrap; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rv-decline); }
.rsvp-switch-label.is-accept{ color: var(--rv-accept); }
.rsvp-confirm{ padding-top: 24px; }
.rsvp-btn{
  display: block; width: 100%; padding: 16px 18px; border: 0; border-radius: 10px;
  background: linear-gradient(180deg, #0a4aa3, var(--rv-ink)); color: #fff; box-shadow: 0 12px 22px -12px rgba(0,53,122,.7);
  font: 600 13px 'Lora', serif; letter-spacing: .14em; text-transform: uppercase;
  transition: transform .2s var(--ease), filter .2s var(--ease), opacity .2s var(--ease);
}
.rsvp-btn:hover{ filter: brightness(1.1); }
.rsvp-btn:active{ transform: scale(.985); }
.rsvp-btn:disabled{ opacity: .5; cursor: not-allowed; }
.rsvp-deadline{ margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #e6edf7; text-align: center; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.rsvp-overlay{ position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(10,18,32,.58); }
.rsvp-overlay.is-open{ display: flex; }
.rsvp-modal{
  width: 100%; max-width: 340px; padding: 38px 26px 30px; text-align: center; color: var(--paper);
  background: linear-gradient(165deg, var(--navy) 0%, #2c4a78 130%); border: 1px solid rgba(255,255,255,.3); border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.rsvp-modal-spark{ display: block; margin-bottom: 14px; font-size: 18px; color: #d7e6f4; }
.rsvp-modal-couple{ margin: 0 0 22px; font: italic 400 28px/1.2 'Libre Baskerville', serif; }
.rsvp-modal-couple span{ font-style: normal; }
.rsvp-modal-divider{ margin: 0 -26px 20px; border: 0; border-top: 1px solid rgba(255,255,255,.3); }
.rsvp-modal-heading{ margin: 0 0 16px; font: 400 12px 'Lora', serif; letter-spacing: .3em; text-transform: uppercase; color: #d7e6f4; }
.rsvp-modal-message{ margin: 0 0 28px; font: italic 400 16px/1.6 'Lora', serif; }
.rsvp-modal-close{ padding: 10px 32px; border: 1px solid rgba(255,255,255,.55); border-radius: 2px; background: none; color: var(--paper); font: 400 11px 'Lora', serif; letter-spacing: .2em; text-transform: uppercase; transition: background .2s var(--ease); }
.rsvp-modal-close:hover{ background: rgba(255,255,255,.12); }
@media (prefers-reduced-motion: reduce){
  .rsvp-panel, .rsvp-reveal, .rsvp-switch .track, .rsvp-switch .thumb{ transition-duration: .01s; }
}

/* Side nav: slim dot rail at the middle right; labels show on hover or tap; one blob travels between dots */
.side-nav{
  position: fixed; z-index: 40; top: 50%; transform: translateY(-50%);
  right: max(8px, calc((100vw - var(--col)) / 2 + 8px));
  opacity: 0; visibility: hidden;
}
body.site-opened .side-nav{ opacity: 1; visibility: visible; transition: opacity .6s var(--ease) 1.2s; }
.nav-rail{
  position: relative; width: 28px; padding: 4px 0; border-radius: 14px;
  background: rgba(22,39,74,.88); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.nav-list{ list-style: none; margin: 0; padding: 0; }
.nav-item{ position: relative; display: block; width: 26px; height: 44px; border-radius: 13px; }
.nav-item:focus-visible{ outline: 2px solid #fff; outline-offset: -2px; }
.nav-label{
  position: absolute; right: calc(100% + 6px); top: 50%; transform: translate(8px, -50%);
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--navy); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 2px 8px rgba(0,0,0,.3);
  color: rgba(243,247,251,.85); font: 400 13px/1 var(--font-display);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.nav-label::after{ content: ""; position: absolute; left: 100%; top: 0; bottom: 0; width: 8px; } /* hover bridge to the dot */
.nav-item[aria-current="true"] .nav-label{ color: #fff; font-weight: 700; }
.side-nav.is-open .nav-label{ opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.side-nav:has(.nav-item:focus-visible) .nav-label{ opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
@media (hover: hover){
  .side-nav:hover .nav-label{ opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
}
.nav-goo{ position: absolute; top: 4px; left: 0; width: 28px; filter: url(#navGoo); pointer-events: none; }
.nav-dot, .nav-blob{ position: absolute; border-radius: 50%; }
.nav-dot{ left: 10.5px; top: 18.5px; width: 7px; height: 7px; background: #7f97c9; }
.nav-blob{ left: 6px; top: 14px; width: 16px; height: 16px; background: #f3f7fb; }
@media (prefers-reduced-motion: reduce){ .nav-label{ transition-duration: .01s; } }

/* Music disc + hint, top-right corner of the viewport */
.music-disc{
  position: fixed; top: 16px; right: 16px; z-index: 50;
  width: 44px; height: 44px; padding: 0; border: none; background: none; border-radius: 50%;
}
.music-disc .disc-art{
  width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
  animation: disc-spin 3.2s linear infinite;
  transition: filter .3s var(--ease);
}
.music-disc.is-muted .disc-art{ animation-play-state: paused; filter: grayscale(1) opacity(.55); }
.music-disc .play-icon{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  opacity: 0; pointer-events: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
  transition: opacity .25s var(--ease);
}
.music-disc.is-muted .play-icon{ opacity: 1; }
@keyframes disc-spin{ to{ transform: rotate(360deg); } }

.music-hint{
  position: fixed; top: 38px; right: 68px; transform: translateY(-50%);
  z-index: 50; margin: 0; white-space: nowrap;
  background: var(--navy); color: var(--paper);
  font-family: system-ui, sans-serif; font-size: 11px; letter-spacing: .04em;
  padding: 7px 14px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  animation: hint-bob 1.8s ease-in-out infinite;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.music-hint::after{
  content: ""; position: absolute; top: 50%; right: -6px; transform: translateY(-50%);
  border: solid transparent; border-width: 6px 0 6px 6px; border-left-color: var(--navy);
}
.music-hint.is-hidden{ opacity: 0; transform: translateY(-50%) translateX(6px); pointer-events: none; }
@keyframes hint-bob{ 0%,100%{ transform: translateY(-50%); } 50%{ transform: translateY(calc(-50% - 3px)); } }

@media (prefers-reduced-motion: reduce){
  .music-disc .disc-art, .music-hint{ animation: none; }
  .envelope-wrap, .invite-heading, .invite-date, .countdown, .cd-story{ transition-duration: .01s; }
  .stage.is-opened .cd-flap, .stage.is-opened .cd-content{ animation-duration: .01s; animation-delay: 0s; }
}

/* Side nav: invisible when the page is idle, visible while scrolling (and on hover, focus, or after a tap on it) */
body.site-opened .side-nav{ opacity: 0; transition: opacity .35s var(--ease); }
body.site-opened .side-nav.is-scrolling,
body.site-opened .side-nav.is-open,
body.site-opened .side-nav:hover,
body.site-opened .side-nav:focus-within{ opacity: 1; }
/* On touch screens an invisible nav must not catch taps meant for the text underneath */
@media (hover: none){
  body.site-opened .side-nav:not(.is-scrolling):not(.is-open){ pointer-events: none; }
}