/* =========================================================
   LENA & NIKLAS — EDITABLE DESIGN TOKENS
   Adjust these values to tune the complete visual system.
   ========================================================= */
:root {
  --paper: #f4efe7;
  --paper-bright: #fbf7f0;
  --paper-deep: #e8dfd2;
  --sage: #5f6e5b;
  --forest: #394536;
  --forest-deep: #263127;
  --taupe: #cdbba6;
  --gold: #b89a68;
  --wax: #cdb896;
  --ink: #352f2b;
  --ink-soft: #746960;
  --line: rgba(53, 47, 43, .26);
  --serif-display: "Bodoni 72 Smallcaps", "Bodoni 72", Didot, "Bodoni MT", "Times New Roman", serif;
  --serif-body: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --script: "Snell Roundhand", "Apple Chancery", "Segoe Script", cursive;
  --sans: Avenir, "Avenir Next", Montserrat, ui-sans-serif, sans-serif;
  --ease: cubic-bezier(.22, .76, .24, 1);
  --page-w: min(35vw, 390px);
  --page-h: min(57vw, 620px);
  --light-screen-x: 28%;
  --light-screen-y: 24%;
  --light-wash-x: 28%;
  --light-wash-y: 24%;
  --light-angle: 135deg;
  --paper-light-alpha: .38;
  --paper-wash-alpha: .14;
  --surface-graze-alpha: .09;
  --light-shadow-x: 8px;
  --light-shadow-y: -5px;
  --light-shadow-blur: 38px;
  --imprint-dark-x: -.82px;
  --imprint-dark-y: .66px;
  --imprint-light-x: .82px;
  --imprint-light-y: -.66px;
  --imprint-dark-color: rgba(59,47,39,.42);
  --imprint-light-color: rgba(255,252,245,.90);
  --botanical-dark-color: rgba(67,58,49,.44);
  --botanical-light-color: rgba(255,252,245,.72);
  --botanical-brightness: 1;
  --surface-light-rgb: 255 252 245;
  --surface-fibre-rgb: 82 67 54;
  --seal-shadow-x: 8px;
  --seal-shadow-y: 8px;
  --seal-shadow-blur: 10px;
  --seal-glint-x: 28%;
  --seal-glint-y: 24%;

  /* STATIC MATERIAL CONTROLS
     These values drive every surface below the opening card and the password
     dialog. Edit them here to tune the baked light and debossing globally. */
  --static-light-x: 28%;
  --static-light-y: 24%;
  --static-light-wash-x: 31%;
  --static-light-wash-y: 27%;
  --static-light-angle: 135deg;
  --static-paper-highlight-alpha: .38;
  --static-paper-wash-alpha: .14;
  --static-paper-graze-alpha: .09;
  --static-shadow-x: 8px;
  --static-shadow-y: 7px;
  --static-shadow-blur: 34px;
  --static-deboss-dark-x: -.82px;
  --static-deboss-dark-y: .66px;
  --static-deboss-light-x: .82px;
  --static-deboss-light-y: -.66px;
  --static-deboss-dark-color: rgba(59,47,39,.42);
  --static-deboss-light-color: rgba(255,252,245,.90);
  --static-botanical-dark-color: rgba(67,58,49,.44);
  --static-botanical-light-color: rgba(255,252,245,.72);
  --static-dialog-seal-shadow: 8px 8px 10px rgba(61,45,31,.31);
}

/* Typed dynamic values let supporting engines update the isolated light and
   transform layers without reparsing unrelated declarations. Unsupported
   engines retain the same custom-property fallback path. */
@property --light-screen-x { syntax:"<length-percentage>"; inherits:true; initial-value:28%; }
@property --light-screen-y { syntax:"<length-percentage>"; inherits:true; initial-value:24%; }
@property --light-wash-x { syntax:"<length-percentage>"; inherits:true; initial-value:28%; }
@property --light-wash-y { syntax:"<length-percentage>"; inherits:true; initial-value:24%; }
@property --light-angle { syntax:"<angle>"; inherits:true; initial-value:135deg; }
@property --paper-light-alpha { syntax:"<number>"; inherits:true; initial-value:.38; }
@property --paper-wash-alpha { syntax:"<number>"; inherits:true; initial-value:.14; }
@property --surface-graze-alpha { syntax:"<number>"; inherits:true; initial-value:.09; }
@property --light-shadow-x { syntax:"<length>"; inherits:true; initial-value:8px; }
@property --light-shadow-y { syntax:"<length>"; inherits:true; initial-value:-5px; }
@property --light-shadow-blur { syntax:"<length>"; inherits:true; initial-value:38px; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--serif-body);
  font-size: 17px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
a { color: inherit; }
button, input { font: inherit; }
img { display: block; max-width: 100%; }

body::before {
  content: "";
  position: fixed;
  z-index: 9998;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  mix-blend-mode: multiply;
  background:
    repeating-linear-gradient(88deg, transparent 0 3px, rgba(91,72,52,.026) 3px 4px, transparent 4px 9px),
    repeating-linear-gradient(2deg, transparent 0 5px, rgba(255,255,255,.19) 5px 6px, transparent 6px 13px),
    radial-gradient(ellipse at 17% 23%, rgba(66,50,38,.025), transparent 34%),
    radial-gradient(ellipse at 76% 69%, rgba(255,255,255,.12), transparent 31%);
}

.skip-link {
  position: fixed;
  z-index: 10000;
  left: 1rem;
  top: 1rem;
  padding: .72rem 1rem;
  color: white;
  background: var(--forest-deep);
  font: 700 .7rem/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: translateY(-180%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: none; }

/* Shared paper, type and botanical language ---------------- */
.paper-light {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(88deg, transparent 0 3px, rgb(var(--surface-fibre-rgb) / .022) 3px 4px, transparent 4px 9px),
    repeating-linear-gradient(2deg, transparent 0 5px, rgba(255,255,255,.052) 5px 6px, transparent 6px 13px),
    radial-gradient(ellipse at 28% 34%, rgba(58,43,32,.025), transparent 43%);
  opacity: .82;
  mix-blend-mode: soft-light;
}
.paper-light::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 118% 96% at var(--light-screen-x) var(--light-screen-y), rgb(var(--surface-light-rgb) / var(--paper-light-alpha)), transparent 72%),
    radial-gradient(ellipse 78% 62% at var(--light-wash-x) var(--light-wash-y), rgb(var(--surface-light-rgb) / var(--paper-wash-alpha)), transparent 76%),
    linear-gradient(var(--light-angle), rgb(var(--surface-light-rgb) / var(--surface-graze-alpha)), transparent 43%, rgb(var(--surface-fibre-rgb) / calc(var(--surface-graze-alpha) * .58)));
}

.botanical {
  position: absolute;
  display: block;
  pointer-events: none;
  filter:
    drop-shadow(var(--static-deboss-dark-x) var(--static-deboss-dark-y) .18px var(--static-botanical-dark-color))
    drop-shadow(var(--static-deboss-light-x) var(--static-deboss-light-y) .18px var(--static-botanical-light-color));
}
.opening .botanical {
  filter:
    drop-shadow(var(--imprint-dark-x) var(--imprint-dark-y) .18px var(--botanical-dark-color))
    drop-shadow(var(--imprint-light-x) var(--imprint-light-y) .18px var(--botanical-light-color));
}
.botanical::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:url("assets/botanical-collection.png");
  background-repeat:no-repeat;
  background-size:200% 200%;
  filter:grayscale(1) sepia(.12) saturate(.28) contrast(.58) brightness(var(--botanical-brightness));
}
.botanical--olive::before { background-position: 0 0; }
.botanical--wildflower::before { background-position: 100% 0; }
.botanical--fern::before { background-position: 0 100%; }
.botanical--meadow::before { background-position: 100% 100%; }

.microcopy,
.eyebrow,
.invite-line,
.time-line,
.venue-line,
.cover-date,
.section-number,
.card-ribbon {
  margin: 0;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .23em;
}
.microcopy { font-size: clamp(.42rem, .56vw, .58rem); line-height: 1.8; }
.eyebrow { font-size: .62rem; color: var(--sage); }
.section-number { font-size: .66rem; color: var(--gold); }
.embossed {
  text-shadow:
    var(--imprint-dark-x) var(--imprint-dark-y) .22px var(--imprint-dark-color),
    var(--imprint-light-x) var(--imprint-light-y) .22px var(--imprint-light-color);
}

.fine-ornament { display: flex; align-items: center; gap: .75rem; width: 11rem; color: var(--gold); }
.fine-ornament span { flex: 1; height: 1px; background: currentColor; opacity: .65; }
.fine-ornament b { font-weight: 400; font-size: .7rem; }

/* Opening -------------------------------------------------- */
.opening {
  --open-progress: 0;
  --zoom-progress: 0;
  --cover-shadow-alpha: .22;
  --cover-ambient-alpha: .10;
  --scene-scale: 1;
  --scene-x: 0px;
  --scene-y: 0px;
  --cue-opacity: 0;
  --caption-opacity: 0;
  --live-page-left: 50vw;
  --live-page-top: calc(50svh - var(--page-h) / 2);
  --live-page-width: var(--page-w);
  --live-page-height: var(--page-h);
  --live-border-width: 1px;
  --live-radius-x: 0px;
  --live-radius-y: 0px;
  --live-corner: 14px;
  --card-radius-x: 50%;
  --card-radius-y: 20%;
  --card-corner: 14px;
  --intro-tilt-x: 0deg;
  --intro-tilt-y: 0deg;
  --card-shadow-x: 8px;
  --card-shadow-y: 7px;
  --card-shadow-blur: 34px;
  --open-card-shadow-alpha: 0;
  position: relative;
  height: 390svh;
  min-height: 2400px;
  background:
    radial-gradient(circle at 18% 22%, rgba(95,110,91,.16), transparent 30rem),
    radial-gradient(circle at 84% 79%, rgba(205,187,166,.26), transparent 35rem),
    var(--paper);
}
.opening__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  overflow: clip;
  perspective: 2100px;
  isolation: isolate;
}
.opening__sticky::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 125% 102% at var(--static-light-x) var(--static-light-y), rgb(var(--surface-light-rgb) / calc(var(--static-paper-highlight-alpha) * .92)), transparent 73%),
    radial-gradient(ellipse 82% 66% at var(--static-light-wash-x) var(--static-light-wash-y), rgb(var(--surface-light-rgb) / var(--static-paper-wash-alpha)), transparent 77%),
    linear-gradient(var(--static-light-angle), rgb(var(--surface-light-rgb) / var(--static-paper-graze-alpha)), transparent 44%, rgb(var(--surface-fibre-rgb) / calc(var(--static-paper-graze-alpha) * .52))),
    repeating-linear-gradient(88deg, transparent 0 3px, rgb(var(--surface-fibre-rgb) / .018) 3px 4px, transparent 4px 10px),
    repeating-linear-gradient(2deg, transparent 0 6px, rgba(255,255,255,.042) 6px 7px, transparent 7px 14px);
  mix-blend-mode:soft-light;
}
.opening.reduced-ready { height: 100svh; min-height: 100svh; }
.ambient-light {
  position: absolute;
  width: min(52vw, 650px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
  opacity: .25;
}
.ambient-light--one { left: -18%; top: -28%; background: var(--taupe); }
.ambient-light--two { right: -20%; bottom: -35%; background: var(--sage); }
.opening-kicker,
.opening-cue,
.opening-caption {
  position: absolute;
  z-index: 20;
  left: 50%;
  margin: 0;
  width: min(90%, 30rem);
  color: var(--ink-soft);
  font: .62rem/1.4 var(--sans);
  letter-spacing: .24em;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.opening-kicker { top: max(1.5rem, env(safe-area-inset-top)); }
.opening-cue { bottom: max(1.5rem, env(safe-area-inset-bottom)); opacity: 1; transition: opacity .35s ease; }
.opening-caption { bottom: max(1.5rem, env(safe-area-inset-bottom)); opacity: var(--caption-opacity); }
.opening-advance {
  display:flex;
  width:auto;
  max-width:90%;
  min-height:44px;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  padding:.65rem 1rem;
  border:0;
  outline:0;
  background:transparent;
  cursor:pointer;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,color .2s ease;
}
.opening-advance.is-available { visibility:visible; pointer-events:auto; }
.opening-advance:disabled { cursor:default; }
.opening-advance:focus-visible { outline:1px solid var(--gold); outline-offset:2px; }
.opening-advance__arrow { font-size:.86rem; letter-spacing:0; transition:transform .2s ease; }
.opening-advance:hover .opening-advance__arrow { transform:translateY(2px); }
body.is-open .opening-cue { opacity: 0; }

.card-scene {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: calc(var(--page-w) * 2);
  height: var(--page-h);
  perspective: 2200px;
  transform: translate(-50%, -50%) translate3d(var(--scene-x), var(--scene-y), 0) scale(var(--scene-scale)) rotateX(var(--intro-tilt-x)) rotateY(var(--intro-tilt-y));
  transform-origin: center;
}
.card-scene.is-transforming { will-change:transform; }
.live-page.is-transforming { will-change:transform; }
.open-card-shadow {
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:calc(var(--page-w) * 2);
  height:var(--page-h);
  opacity:var(--open-card-shadow-alpha);
  filter:drop-shadow(var(--card-shadow-x) var(--card-shadow-y) var(--card-shadow-blur) rgba(52,43,35,1));
  transform:translate(-50%, -50%) translate3d(var(--scene-x), var(--scene-y), 0) scale(var(--scene-scale)) rotateX(var(--intro-tilt-x)) rotateY(var(--intro-tilt-y));
  transform-origin:center;
  pointer-events:none;
}
.open-card-shadow::before,
.open-card-shadow::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  border-radius:var(--card-radius-x) var(--card-radius-x) var(--card-corner) var(--card-corner) / var(--card-radius-y) var(--card-radius-y) var(--card-corner) var(--card-corner);
  background:#342b23;
}
.open-card-shadow::before { left:0; }
.open-card-shadow::after { right:0; }
.card { position: relative; z-index:1; width: 100%; height: 100%; transform-style: preserve-3d; }
.card__inside,
.card__cover {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
}
.card__inside--right {
  right: 0;
  z-index: 1;
  border: 1px solid rgba(53,47,43,.12);
  border-radius: var(--card-radius-x) var(--card-radius-x) var(--card-corner) var(--card-corner) / var(--card-radius-y) var(--card-radius-y) var(--card-corner) var(--card-corner);
  background: transparent;
  box-shadow: inset 20px 0 30px rgba(69,53,42,.06);
  pointer-events: none;
}
.card__cover {
  left: 50%;
  z-index: 4;
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--open-progress) * -179deg));
}
.card__cover.is-transforming { will-change:transform; }
.cover-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(53,47,43,.12);
  border-radius: var(--card-radius-x) var(--card-radius-x) var(--card-corner) var(--card-corner) / var(--card-radius-y) var(--card-radius-y) var(--card-corner) var(--card-corner);
  background:
    repeating-linear-gradient(88deg, rgba(72,55,42,.012) 0 1px, transparent 1px 4px),
    var(--paper-bright);
  box-shadow:
    var(--light-shadow-x) var(--light-shadow-y) var(--light-shadow-blur) rgb(52 43 35 / var(--cover-shadow-alpha)),
    0 8px 18px rgb(52 43 35 / var(--cover-ambient-alpha)),
    inset 18px 0 30px rgba(78,57,39,.07),
    inset 0 1px rgba(255,255,255,.72);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cover-face > *:not(.paper-light):not(.botanical) { position: relative; z-index: 2; }
.cover-face--front {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  place-items: center;
  align-content: center;
  padding: 17% 11% 8%;
  text-align: center;
}
.cover-face--back {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.7rem;
  padding: 18% 13%;
  text-align: center;
  transform: rotateY(180deg);
  box-shadow:
    var(--light-shadow-x) var(--light-shadow-y) var(--light-shadow-blur) rgb(52 43 35 / var(--cover-shadow-alpha)),
    0 8px 18px rgb(52 43 35 / var(--cover-ambient-alpha)),
    inset -24px 0 35px rgba(78,57,39,.09),
    inset 0 1px rgba(255,255,255,.72);
}
.cover-names,
.names {
  margin: 7% 0 5%;
  color: var(--ink);
  font-family: var(--serif-display);
  font-weight: 300;
  line-height: .9;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.cover-names { font-size: clamp(2rem, 4vw, 3.5rem); }
.cover-names span,
.names span { display: block; }
.cover-names em,
.names em {
  display: block;
  margin: .16em 0 .18em;
  color: var(--ink-soft);
  font-family: var(--script);
  font-size: .5em;
  font-weight: 400;
  letter-spacing: 0;
  line-height: .72;
  text-transform: none;
}
.cover-face .invite-line { max-width: 30ch; font-size: clamp(.39rem, .52vw, .54rem); line-height: 1.8; }
.cover-date { margin-top: 8%; font-size: clamp(.44rem, .58vw, .6rem); }
.cover-botanical { left: -12%; bottom: 3%; width: 54%; aspect-ratio: 1; opacity: .38; transform: rotate(-6deg); }
.back-botanical { left: -17%; bottom: -4%; width: 57%; aspect-ratio: 1; opacity: .22; transform: rotate(-9deg); }
.back-monogram { font-family: var(--serif-display); font-size: clamp(2rem, 3vw, 3.2rem); letter-spacing: .18em; }
.inside-note { margin: 0; max-width: 24ch; color: var(--ink-soft); font-style: italic; }

.seal-wrap { align-self: end; display: grid; place-items: center; margin-bottom: -3%; }
.wax-seal {
  position: relative;
  display: block;
  width: clamp(4.7rem, 7vw, 6rem);
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  filter:
    drop-shadow(var(--seal-shadow-x) var(--seal-shadow-y) var(--seal-shadow-blur) rgba(61,45,31,.34))
    drop-shadow(0 2px 2px rgba(61,45,31,.25));
  animation: seal-float 3.2s ease-in-out infinite;
  transition: transform .25s ease, filter .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.wax-seal img { width: 100%; height: 100%; object-fit: contain; }
.seal-glint { position:absolute; inset:8%; border-radius:50%; opacity:.72; filter:blur(5px); background:radial-gradient(circle at var(--seal-glint-x) var(--seal-glint-y), rgba(255,255,255,.26), rgba(255,255,255,.12) 30%, rgba(255,255,255,.035) 52%, transparent 76%); mix-blend-mode:screen; }
.wax-seal:hover { transform: translateY(-4px) scale(1.035); filter: drop-shadow(var(--seal-shadow-x) var(--seal-shadow-y) calc(var(--seal-shadow-blur) + 4px) rgba(61,45,31,.40)) drop-shadow(0 2px 2px rgba(61,45,31,.22)); }
.wax-seal:focus-visible { outline: 2px solid var(--forest); outline-offset: .35rem; }
.seal-label { margin-top: -.15rem; color: var(--ink-soft); font: .46rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.opening.is-unlocking .wax-seal { animation: seal-break .68s var(--ease) forwards; pointer-events: none; }
.opening.is-unlocked .wax-seal { animation:none; }
@keyframes seal-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-4px) rotate(.5deg); } }
@keyframes seal-break { 0% { transform: scale(1); opacity: 1; } 45% { transform: scale(.94) rotate(-3deg); opacity: 1; } 100% { transform: translateY(12px) scale(.74) rotate(9deg); opacity: 0; } }

/* Persistent invitation page ------------------------------ */
.live-page {
  position: absolute;
  z-index: 2;
  left: var(--live-page-left);
  top: var(--live-page-top);
  width: var(--live-page-width);
  height: var(--live-page-height);
  container-type: size;
  contain: layout paint style;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: var(--live-border-width) solid rgba(53,47,43,.12);
  border-radius: var(--live-radius-x) var(--live-radius-x) var(--live-corner) var(--live-corner) / var(--live-radius-y) var(--live-radius-y) var(--live-corner) var(--live-corner);
  background:
    repeating-linear-gradient(88deg, rgba(72,55,42,.010) 0 1px, transparent 1px 4px),
    var(--paper-bright);
  box-shadow:
    inset 3cqw 0 5cqw rgba(78,57,39,.055);
  text-align: center;
  pointer-events: none;
  transform:rotateX(var(--intro-tilt-x)) rotateY(var(--intro-tilt-y));
  transform-origin:left center;
  transform-style:preserve-3d;
  -webkit-font-smoothing: antialiased;
}
.live-page:focus { outline:none; }
.live-page > *:not(.paper-light):not(.botanical) { position: relative; z-index: 2; }
.live-page__content { display: flex; width: 100%; min-height: 100%; flex-direction: column; align-items: center; justify-content: center; padding: 9cqw 8cqw 7cqw; }
.live-page .microcopy { font-size: min(1.75cqw, 1.2cqh); white-space: nowrap; }
.live-page .names { margin: 2.6cqh 0 2.2cqh; font-size: min(11.7cqw, 7.8cqh); white-space: nowrap; }
.live-page .invite-line { max-width: 36ch; font-size: min(1.7cqw, 1.18cqh); line-height: 1.8; }
.date-lockup {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  width: 78%;
  margin: 3.2cqh auto 2.2cqh;
}
.date-lockup span { padding: 1cqh 1cqw; border-top: max(1px,.1cqw) solid var(--line); border-bottom: max(1px,.1cqw) solid var(--line); font: min(1.65cqw,1.15cqh)/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.date-lockup strong { padding: 0 3.2cqw; border-inline: max(1px,.1cqw) solid var(--line); font: 300 min(8.8cqw,6cqh)/1 var(--serif-display); }
.live-page .time-line,
.live-page .venue-line { font-size: min(1.52cqw,1.05cqh); }
.tiny-heart { margin: 2.3cqh 0 1.1cqh; color: var(--gold); font-size: min(2cqw,1.4cqh); }
.venue-script { margin: 0; font-family: var(--script); font-size: min(6cqw,4cqh); line-height: 1; }
.live-botanical { width: 28cqw; height: 28cqw; opacity: .22; }
.live-botanical--top { right: -5cqw; top: -4cqw; transform: rotate(7deg); }
.live-botanical--bottom { left: -5cqw; bottom: -4cqw; transform: rotate(5deg); }

/* Password dialog ---------------------------------------- */
.unlock-dialog { width: min(calc(100% - 2rem), 440px); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--ink); }
.unlock-dialog::backdrop { background: rgba(30,35,29,.52); backdrop-filter: blur(7px) saturate(.75); }
.unlock-card {
  position: relative;
  overflow: hidden;
  padding: 76px 48px 44px;
  border: 1px solid rgba(53,47,43,.14);
  border-radius: 50% 50% 22px 22px / 18% 18% 22px 22px;
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.72), transparent 34%),
    repeating-linear-gradient(88deg, rgba(72,55,42,.012) 0 1px, transparent 1px 4px),
    var(--paper-bright);
  box-shadow:
    var(--static-shadow-x) var(--static-shadow-y) calc(var(--static-shadow-blur) + 18px) rgba(20,25,20,.30),
    0 8px 22px rgba(20,25,20,.18),
    inset 0 1px rgba(255,255,255,.72);
  text-align: center;
  animation: dialog-in .32s var(--ease) both;
}
.unlock-card::after {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 118% 96% at var(--static-light-x) var(--static-light-y), rgb(var(--surface-light-rgb) / var(--static-paper-highlight-alpha)), transparent 72%),
    radial-gradient(ellipse 78% 62% at var(--static-light-wash-x) var(--static-light-wash-y), rgb(var(--surface-light-rgb) / var(--static-paper-wash-alpha)), transparent 76%),
    linear-gradient(var(--static-light-angle), rgb(var(--surface-light-rgb) / var(--static-paper-graze-alpha)), transparent 43%, rgb(var(--surface-fibre-rgb) / calc(var(--static-paper-graze-alpha) * .58))),
    repeating-linear-gradient(88deg, transparent 0 3px, rgb(var(--surface-fibre-rgb) / .024) 3px 4px, transparent 4px 9px),
    repeating-linear-gradient(2deg, transparent 0 5px, rgba(255,255,255,.055) 5px 6px, transparent 6px 13px);
  opacity:.86;
  mix-blend-mode:soft-light;
}
.unlock-card > * { position: relative; z-index: 2; }
.dialog-close {
  position: absolute;
  z-index: 4;
  top: 28px;
  right: 30px;
  display: grid;
  width: 38px;
  aspect-ratio: 1;
  place-items: center;
  padding: 0 0 2px;
  border: 1px solid rgba(53,47,43,.20);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255,255,255,.54);
  box-shadow: 0 4px 12px rgba(53,47,43,.08);
  font: 300 1.55rem/1 var(--sans);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.dialog-close:hover,
.dialog-close:focus-visible { background: white; transform: rotate(5deg); outline: 2px solid var(--sage); outline-offset: 2px; }
.dialog-seal { width: 70px; height: 70px; object-fit: contain; margin: 0 auto 10px; filter: drop-shadow(var(--static-dialog-seal-shadow)); }
.unlock-card .eyebrow { font-size: .58rem; }
.unlock-card h2 {
  margin: 8px 0 10px;
  font: 300 2.8rem/1 var(--serif-display);
  letter-spacing: .02em;
  text-shadow:
    var(--static-deboss-dark-x) var(--static-deboss-dark-y) .32px var(--static-deboss-dark-color),
    var(--static-deboss-light-x) var(--static-deboss-light-y) .32px var(--static-deboss-light-color);
}
.unlock-card > p:not(.eyebrow):not(.password-error):not(.password-status) { max-width: 28ch; margin: 0 auto 24px; color: var(--ink-soft); }
.password-field { display: block; color: var(--ink-soft); font: .58rem/1 var(--sans); letter-spacing: .14em; text-align: left; text-transform: uppercase; }
.password-field input { width: 100%; margin-top: 8px; padding: 13px 14px; border: 1px solid rgba(53,47,43,.25); border-radius: 2px; outline: none; color: var(--ink); background: rgba(255,255,255,.48); font-family: var(--serif-body); }
.password-field input:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(57,69,54,.1); background: white; }
.password-error { min-height: 22px; margin: 8px 0 3px; color: #8a3e37; font-size: .78rem; }
.password-status { min-height:22px; margin:8px 0 3px; color:var(--ink-soft); font-size:.78rem; }
.unlock-submit { display:flex; width:100%; align-items:center; justify-content:space-between; padding:13px 16px; border:1px solid var(--forest); color:var(--paper); background:var(--forest); font: .62rem/1 var(--sans); letter-spacing:.15em; text-transform:uppercase; cursor:pointer; }
.unlock-submit:hover,
.unlock-submit:focus-visible { background: var(--forest-deep); outline: 2px solid var(--gold); outline-offset: 2px; }
.unlock-submit:disabled { opacity:.62; cursor:wait; }
@keyframes dialog-in { from { opacity:0; filter:blur(1.5px); } to { opacity:1; filter:none; } }

/* Website sections --------------------------------------- */
.site-content { position: relative; z-index: 5; background: var(--paper); }
.site-content[aria-hidden="true"] { visibility: hidden; }
.section {
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:clamp(70px,8vw,120px) clamp(22px,7vw,110px);
  contain:layout paint style;
}
/* Only scenes that are guaranteed to remain one viewport tall are deferred.
   The timeline remains fully laid out because it grows on short screens; its
   real height must be known before Venue navigation stops are calculated. */
.section--welcome,
.section--playlist {
  content-visibility:auto;
  contain-intrinsic-block-size:auto 0px;
}
.section::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 118% 96% at var(--static-light-x) var(--static-light-y), rgb(var(--surface-light-rgb) / var(--static-paper-highlight-alpha)), transparent 72%),
    radial-gradient(ellipse 78% 62% at var(--static-light-wash-x) var(--static-light-wash-y), rgb(var(--surface-light-rgb) / var(--static-paper-wash-alpha)), transparent 76%),
    linear-gradient(var(--static-light-angle), rgb(var(--surface-light-rgb) / var(--static-paper-graze-alpha)), transparent 43%, rgb(var(--surface-fibre-rgb) / calc(var(--static-paper-graze-alpha) * .58))),
    repeating-linear-gradient(88deg, transparent 0 3px, rgb(var(--surface-fibre-rgb) / .024) 3px 4px, transparent 4px 9px),
    repeating-linear-gradient(2deg, transparent 0 5px, rgba(255,255,255,.045) 5px 6px, transparent 6px 13px),
    radial-gradient(ellipse at 24% 37%, rgba(48,38,31,.022), transparent 44%);
  opacity:.84;
  mix-blend-mode:soft-light;
}
.section h2 {
  margin:0;
  font-family:var(--serif-display);
  font-weight:300;
  text-shadow:
    var(--static-deboss-dark-x) var(--static-deboss-dark-y) .32px var(--static-deboss-dark-color),
    var(--static-deboss-light-x) var(--static-deboss-light-y) .32px var(--static-deboss-light-color);
}
.reveal {
  --reveal-y:28px;
  opacity:0;
  transform:translateY(var(--reveal-y));
  transition:opacity .8s ease, transform .9s var(--ease);
}
.reveal.is-visible { --reveal-y:0px; opacity:1; }

/* Cursor tilt remains interactive, but the material light and cast shadow on
   these surfaces are the fixed values above. Transforming a card therefore
   costs only a compositor update and never recalculates its illumination. */
.tilt-surface {
  --tilt-perspective:1500px;
  --tilt-x:0deg;
  --tilt-y:0deg;
  transform:perspective(var(--tilt-perspective)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style:preserve-3d;
  transform-origin:center;
  transition:transform .38s var(--ease);
}
.tilt-surface.is-transforming { will-change:transform; }
.reveal.tilt-surface {
  transform:translateY(var(--reveal-y)) perspective(var(--tilt-perspective)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}
.tilt-surface--subtle { --tilt-perspective:1800px; }

/* Automatic invitation navigation ------------------------ */
.visually-hidden {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.section-navigation {
  position:fixed;
  z-index:9000;
  right:max(18px,env(safe-area-inset-right));
  top:50%;
  display:grid;
  gap:8px;
  color:var(--ink);
  opacity:.42;
  transform:translateY(-50%);
  transition:opacity .2s ease,color .25s ease;
}
.section-navigation[aria-hidden="true"] { visibility:hidden; pointer-events:none; }
.section-navigation:hover,
.section-navigation:focus-within { opacity:1; }
.section-navigation[data-tone="light"] { color:var(--paper-bright); }
.section-navigation__button {
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  padding:0;
  border:1px solid currentColor;
  border-radius:50%;
  color:inherit;
  background:transparent;
  font:.82rem/1 var(--sans);
  cursor:pointer;
  opacity:.72;
  transition:opacity .18s ease,transform .18s ease,background .18s ease;
}
.section-navigation__button:hover { opacity:1; transform:scale(1.04); }
.section-navigation__button:focus-visible { opacity:1; outline:2px solid var(--gold); outline-offset:2px; }
.section-navigation__button:disabled { cursor:default; opacity:.32; transform:none; }
.section-navigation__button[hidden] { display:none; }
body.is-auto-navigating .section-navigation__button { pointer-events:none; }

.section--day,
.section--playlist,
.section--closing,
.gift-card,
.rsvp-card {
  --surface-light-rgb:220 229 214;
  --surface-fibre-rgb:230 236 225;
  --static-deboss-dark-color:rgba(15,24,17,.58);
  --static-deboss-light-color:rgba(230,238,225,.62);
  --static-botanical-dark-color:rgba(16,25,18,.56);
  --static-botanical-light-color:rgba(230,238,225,.60);
  --botanical-brightness:1.32;
}

.gift-card,
.rsvp-card {
  width:min(100%,680px);
  height:clamp(540px,60svh,580px);
  min-height:clamp(540px,60svh,580px);
}

.section--welcome { background:var(--paper-bright); }
.welcome-copy { position:relative; z-index:2; width:min(100%,720px); text-align:center; display:grid; justify-items:center; gap:18px; }
.welcome-copy h2 { font-size:clamp(3rem,6vw,5.6rem); line-height:.95; letter-spacing:.01em; }
.welcome-copy > p:last-child { max-width:41ch; margin:4px 0 0; font-size:clamp(1rem,1.5vw,1.24rem); }
.welcome-botanical { width:min(34vw,430px); aspect-ratio:1; opacity:.30; }
.welcome-botanical--left { left:-8%; bottom:-3%; transform:rotate(-4deg); }
.welcome-botanical--right { right:-5%; bottom:-10%; transform:rotate(6deg); }

.section--day { color:var(--paper-bright); background:var(--forest); }
.day-layout { position:relative; z-index:2; width:min(100%,990px); display:grid; grid-template-columns:minmax(300px,.86fr) minmax(420px,1.14fr); gap:clamp(38px,5vw,72px); align-items:center; }
.day-layout .section-heading { transform:translateX(clamp(38px,4vw,60px)); }
.section-heading h2 { margin-top:14px; font-size:clamp(3.2rem,6vw,6.2rem); line-height:.91; }
.section-heading--light .section-number,
.section-heading--light .eyebrow { color:var(--taupe); }
.day-botanical { left:-9%; top:9%; width:min(42vw,520px); aspect-ratio:1; opacity:.12; transform:rotate(-8deg); }
.timeline { position:relative; list-style:none; margin:0; padding:0; }
.timeline::before { content:""; position:absolute; left:106px; top:18px; bottom:25px; width:1px; background:rgba(244,239,231,.32); }
.timeline li { display:grid; grid-template-columns:82px 34px 1fr; gap:10px; min-height:98px; }
.timeline time { padding-top:1px; font:300 1.45rem/1.2 var(--serif-display); text-align:right; }
.timeline-dot { z-index:2; width:7px; height:7px; margin:10px auto 0; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px var(--forest); }
.timeline h3 { margin:0; font:300 1.5rem/1.1 var(--serif-display); }
.timeline p { max-width:32ch; margin:4px 0 0; color:rgba(244,239,231,.68); font-size:.9rem; }

.section--venue { padding-block:clamp(44px,4vw,62px); background:var(--paper-deep); }
.venue-layout {
  --venue-inner-width:min(100%,calc(898px - clamp(96px,12vw,160px)));
  width:min(100%,900px);
  display:grid;
  justify-items:center;
  gap:18px;
}
.venue-copy { width:var(--venue-inner-width); text-align:center; }
.venue-copy h2 { margin:8px 0 16px; font-size:clamp(3.2rem,4.25vw,4.25rem); line-height:.94; text-transform:uppercase; letter-spacing:.018em; }
.venue-copy > p:not(.section-number):not(.eyebrow) { max-width:46ch; margin:0 auto 4px; }
.venue-photo {
  width:min(var(--venue-inner-width),650px);
  height:auto;
  aspect-ratio:738 / 520;
  margin:0;
  overflow:hidden;
  border-radius:34px;
  box-shadow:
    var(--static-shadow-x) var(--static-shadow-y) var(--static-shadow-blur) rgba(47,40,33,.20),
    0 4px 12px rgba(47,40,33,.08);
}
.venue-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 58%; }
.venue-meta { width:var(--venue-inner-width); display:grid; justify-items:center; gap:18px; padding-top:2px; text-align:center; }
.outline-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:12px 19px; border:1px solid currentColor; text-decoration:none; font: .61rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; transition:background .2s ease,color .2s ease; }
.outline-button:hover { color:var(--paper); background:var(--forest); }
.outline-button--light:hover { color:var(--forest); background:var(--paper); }

.section--details { background:#d9ddd2; }
.stationery-card {
  position:relative;
  z-index:2;
  overflow:hidden;
  border:1px solid rgba(53,47,43,.12);
  background:var(--paper-bright);
  box-shadow:
    var(--static-shadow-x) var(--static-shadow-y) var(--static-shadow-blur) rgba(47,40,33,.21),
    0 5px 14px rgba(47,40,33,.09);
}
.stationery-card::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 118% 96% at var(--static-light-x) var(--static-light-y), rgb(var(--surface-light-rgb) / calc(var(--static-paper-highlight-alpha) * 1.08)), transparent 72%),
    radial-gradient(ellipse 78% 62% at var(--static-light-wash-x) var(--static-light-wash-y), rgb(var(--surface-light-rgb) / calc(var(--static-paper-wash-alpha) * 1.12)), transparent 76%),
    linear-gradient(var(--static-light-angle), rgb(var(--surface-light-rgb) / calc(var(--static-paper-graze-alpha) * 1.12)), transparent 43%, rgb(var(--surface-fibre-rgb) / calc(var(--static-paper-graze-alpha) * .62))),
    repeating-linear-gradient(88deg, transparent 0 3px, rgb(var(--surface-fibre-rgb) / .028) 3px 4px, transparent 4px 9px),
    repeating-linear-gradient(2deg, transparent 0 5px, rgba(255,255,255,.058) 5px 6px, transparent 6px 13px),
    radial-gradient(ellipse at 31% 29%, rgba(45,34,27,.028), transparent 42%);
  opacity:.90;
  mix-blend-mode:soft-light;
}
.stationery-card > * { position:relative; z-index:2; }
.stationery-card > .botanical { position:absolute; z-index:1; }
.details-card { width:min(100%,960px); border-radius:28px; }
.card-ribbon { padding:12px 18px; color:var(--paper); background:var(--forest); font-size:.6rem; text-align:center; }
.card-heading { padding:54px 25px 34px; text-align:center; }
.card-heading h2 { margin-top:8px; font-size:clamp(2.7rem,5vw,4.8rem); }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.detail-grid article { min-height:180px; padding:36px; display:grid; grid-template-columns:42px 1fr; gap:17px; }
.detail-grid article:nth-child(odd) { border-right:1px solid var(--line); }
.detail-grid article:nth-child(-n+2) { border-bottom:1px solid var(--line); }
.line-icon { color:var(--gold); font:300 1.8rem/1 var(--serif-display); }
.detail-grid h3 { margin:0 0 6px; font:700 .63rem/1.2 var(--sans); letter-spacing:.13em; text-transform:uppercase; }
.detail-grid p { margin:0; color:var(--ink-soft); font-size:.91rem; }
.details-botanical { right:-5%; bottom:-7%; width:220px; height:220px; opacity:.17; transform:rotate(8deg); }

.section--gifts { background:var(--paper-bright); }
.gift-card { border:1px solid rgba(255,255,255,.07); border-radius:28px; color:var(--paper); background:var(--forest-deep); padding:clamp(52px,6vw,68px); text-align:center; display:grid; align-content:center; justify-items:center; }
.gift-card .section-number,
.gift-card .eyebrow { color:var(--taupe); }
.gift-card h2 { max-width:11ch; margin:15px 0 20px; font-size:clamp(3rem,5.2vw,4.4rem); line-height:.96; }
.gift-card p:not(.section-number):not(.eyebrow) { max-width:34ch; color:rgba(244,239,231,.76); }
.gift-botanical { width:150px; height:150px; top:5%; right:-2%; opacity:.15; transform:rotate(16deg); }
.short-rule { width:60px; height:1px; margin-top:26px; background:rgba(244,239,231,.55); }

.section--playlist { color:var(--paper); background:var(--sage); }
.playlist-copy { position:relative; z-index:2; width:min(100%,1050px); text-align:center; }
.playlist-copy .section-number,
.playlist-copy .eyebrow { color:var(--paper); }
.playlist-copy h2 { margin:18px 0 30px; font-size:clamp(3.8rem,8vw,8.6rem); line-height:.86; }
.playlist-copy > p:not(.section-number):not(.eyebrow) { max-width:39ch; margin:0 auto 34px; color:rgba(244,239,231,.78); }
.playlist-botanical { left:-7%; bottom:-12%; width:min(50vw,650px); aspect-ratio:1; opacity:.09; transform:rotate(-7deg); }

.section--rsvp { background:var(--paper-deep); }
.rsvp-card { border:1px solid rgba(255,255,255,.07); border-radius:28px; color:var(--paper); background:var(--forest); padding:58px 46px; text-align:center; display:grid; place-content:center; justify-items:center; }
.rsvp-card .section-number,
.rsvp-card .eyebrow { color:var(--taupe); }
.rsvp-card h2 { margin:12px 0 2px; font-size:clamp(3rem,5vw,4.7rem); }
.rsvp-deadline { margin:0 0 20px; font:300 clamp(1.4rem,2.5vw,2rem)/1 var(--serif-display); }
.rsvp-card > p:not(.section-number):not(.eyebrow):not(.rsvp-deadline) { max-width:38ch; margin:0 auto 28px; color:rgba(244,239,231,.76); }
.rsvp-botanical { width:220px; height:220px; opacity:.14; }
.rsvp-botanical--left { left:-6%; bottom:-4%; transform:rotate(-8deg); }
.rsvp-botanical--right { right:-7%; top:-4%; transform:rotate(11deg); }

.section--closing { min-height:100svh; color:var(--paper); background:var(--forest-deep); }
.closing-copy { position:relative; z-index:2; display:grid; justify-items:center; text-align:center; }
.closing-copy .eyebrow { color:var(--taupe); }
.closing-copy h2 { margin:22px 0 38px; font-size:clamp(3.7rem,8vw,8rem); line-height:.88; }
.signature { margin:0 0 60px; font:1.55rem/1.25 var(--script); }
.signature span { font-size:2.2rem; }
.back-link { font: .58rem/1 var(--sans); letter-spacing:.13em; text-transform:uppercase; text-underline-offset:5px; }
.closing-botanical { position:relative; width:100px; height:100px; margin-bottom:20px; opacity:.25; transform:rotate(-18deg); }

/* Responsive --------------------------------------------- */
@media (min-width: 801px) and (max-width: 1040px) {
  .venue-layout { --venue-inner-width:calc(100% - 24vw + 38px); }
}

/* Keep Venue and Details as true one-stop scenes when browser chrome reduces
   the usable height. Venue retains its original vertical composition; only
   the photograph's overall size changes, never its fixed aspect ratio. */
@media (min-width: 801px) and (max-height: 820px) {
  .section--venue,
  .section--details { height:100svh; min-height:100svh; padding-block:clamp(22px,4svh,34px); }
  .section--venue { padding-inline:22px; }
  .venue-layout {
    --venue-inner-width:auto;
    width:min(100%,900px);
    grid-template-columns:1fr;
    justify-items:center;
    gap:clamp(7px,1.4svh,12px);
  }
  .venue-copy { width:min(100%,738px); text-align:center; }
  .venue-copy h2 {
    margin:2px 0 7px;
    font-size:clamp(2.25rem,4.2vw,3.4rem);
    letter-spacing:.012em;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }
  .venue-copy > p:not(.section-number):not(.eyebrow) {
    max-width:52ch;
    margin:0 auto;
    font-size:.91rem;
    line-height:1.38;
  }
  .venue-photo {
    width:min(650px, calc((100svh - 250px) * 738 / 520), calc(100vw - 44px));
  }
  .venue-meta {
    width:min(100%,650px);
    grid-template-columns:1fr;
    align-items:center;
    justify-items:center;
    gap:0;
    text-align:center;
  }
  .venue-meta .outline-button { margin-top:0; }
  .card-heading { padding:28px 25px 20px; }
  .card-heading h2 { font-size:clamp(2.5rem,4.4vw,4rem); }
  .detail-grid article { min-height:118px; padding:18px 26px; }
}

@media (max-width: 800px) {
  :root { --page-w:min(72vw,330px); --page-h:min(112vw,520px); }
  .opening { height:360svh; min-height:2100px; }
  .cover-names { font-size:clamp(1.8rem,8vw,2.7rem); }
  .cover-face--front { padding-top:18%; }
  .wax-seal { width:clamp(4.4rem,19vw,5.3rem); }
  .live-page__content { padding:9cqw 7cqw 7cqw; }
  .live-page .microcopy { font-size:min(3.3cqw,1.5cqh); }
  .live-page .names { font-size:min(15cqw,7.4cqh); }
  .live-page .invite-line { font-size:min(3.2cqw,1.45cqh); }
  .date-lockup { width:90%; }
  .date-lockup span { font-size:min(3cqw,1.35cqh); }
  .date-lockup strong { font-size:min(11cqw,5.7cqh); }
  .live-page .time-line,
  .live-page .venue-line { font-size:min(2.9cqw,1.28cqh); }
  .venue-script { font-size:min(8cqw,3.7cqh); }
  .section { padding:64px 20px; }
  .welcome-botanical { width:55vw; opacity:.22; }
  .day-layout { grid-template-columns:1fr; gap:44px; }
  .day-layout .section-heading { transform:none; }
  .section-heading { text-align:center; }
  .timeline { width:min(100%,560px); margin:auto; }
  .section--venue { padding-block:52px; }
  .venue-layout { --venue-inner-width:calc(100% - 38px); text-align:center; gap:16px; }
  .venue-copy > p:not(.section-number):not(.eyebrow) { margin-inline:auto; }
  .venue-photo { height:auto; min-height:0; aspect-ratio:297 / 405; border-radius:26px; }
  .venue-meta { gap:16px; }
  .detail-grid { grid-template-columns:1fr; }
  .detail-grid article { min-height:0; padding:30px 26px; border-right:0 !important; border-bottom:1px solid var(--line) !important; }
  .detail-grid article:last-child { border-bottom:0 !important; }
  .gift-card,
  .rsvp-card { height:560px; min-height:560px; }
  .rsvp-card { padding:70px 30px; }
}

@media (max-width: 520px) {
  :root { --page-w:min(78vw,310px); --page-h:min(126vw,500px); }
  .opening-kicker { top:24px; }
  .opening-cue,
  .opening-caption { bottom:24px; }
  .cover-botanical { width:59%; }
  .unlock-card { padding:72px 28px 38px; }
  .dialog-close { right:23px; top:26px; }
  .welcome-copy h2 { font-size:3.2rem; }
  .section-heading h2 { font-size:3.5rem; }
  .timeline::before { left:81px; }
  .timeline li { grid-template-columns:61px 28px 1fr; gap:6px; min-height:98px; }
  .timeline time { font-size:1.1rem; }
  .timeline h3 { font-size:1.25rem; }
  .timeline p { font-size:.82rem; }
  .venue-copy h2 { font-size:3.1rem; }
  .details-card,
  .gift-card,
  .rsvp-card { border-radius:22px; }
  .gift-card,
  .rsvp-card { height:560px; min-height:560px; padding:48px 30px; }
  .gift-card h2 { font-size:clamp(2.35rem,11vw,2.75rem); }
  .closing-copy h2 { font-size:3.6rem; }
  .section-navigation {
    top:auto;
    right:max(14px,env(safe-area-inset-right));
    bottom:max(14px,env(safe-area-inset-bottom));
    grid-template-columns:44px 44px;
    transform:none;
  }
}

@media (max-height: 650px) and (orientation: landscape) {
  :root { --page-w:min(29vw,290px); --page-h:min(78vh,470px); }
  .opening-kicker { top:14px; }
  .opening-cue,
  .opening-caption { bottom:14px; }
  .unlock-dialog { width:min(calc(100% - 2rem),680px); }
  .unlock-card { padding:34px 70px 28px; border-radius:42% 42% 18px 18px / 20% 20% 18px 18px; }
  .dialog-seal { width:46px; height:46px; margin-bottom:2px; }
  .unlock-card h2 { font-size:2rem; }
  .unlock-card > p:not(.eyebrow):not(.password-error):not(.password-status) { margin-bottom:12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .card-scene,
  .live-page { will-change:auto; }
}

@media (hover:none), (pointer:coarse) {
  body.is-open { touch-action:pan-x pinch-zoom; }
  .unlock-dialog,
  .unlock-dialog *,
  input,
  textarea,
  select { touch-action:auto; }
  .card-scene,
  .live-page { will-change:auto; }
}

body.is-page-hidden .wax-seal { animation-play-state:paused; }