:root {
  --motion-ease:cubic-bezier(.22,.61,.36,1);
  --navy:#212b44;
  --rose:#f8c5c9;
  --paper:#fffefa;
  --white:#fff;
  --muted:#6d7078;
  --line:#dedfdc;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Segoe UI',Arial,sans-serif;
  --content:1020px;
  color-scheme:light;
  font-family:var(--sans);
  color:var(--navy);
  background:var(--white);
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:auto;
  scroll-padding-top:28px;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body {
  margin:0;
  font-size:16px;
  line-height:1.65;
  max-width:100%;
  overflow-x:hidden;
}

body.is-closed {
  overflow:hidden;
}

button,input,textarea {
  font:inherit;
}

button,a,input,textarea,label {
  -webkit-tap-highlight-color:transparent;
}

h1,h2,h3,.guest-names,.monogram,.eyebrow,.section-number,.event-icon,.parents-ornament,.detail-mark,.tiny-divider,.scroll-cue {
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

main :where(h1,h2,h3,h4,p,span,figcaption,svg,img) {
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

button {
  cursor:pointer;
}

a {
  color:inherit;
}

button:disabled {
  cursor:wait;
  opacity:.55;
}

[hidden] {
  display:none!important;
}

h1,h2,h3,p,figure {
  margin:0;
}

h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.15;
}

h2 {
  font-size:clamp(2.25rem,5.5vw,3.65rem);
  letter-spacing:-.045em;
}

h2 em {
  font-weight:400;
}

h3 {
  font-size:1.9rem;
  letter-spacing:-.025em;
}

em {
  font-family:var(--serif);
  font-weight:400;
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:3px solid #a85d6b;
  outline-offset:5px;
}

::selection {
  background:var(--rose);
  color:var(--navy);
}

.eyebrow,.section-number {
  font-size:.75rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.18em;
  line-height:1.7;
}

.section-number {
  display:block;
  color:var(--muted);
  margin-bottom:25px;
}

.script {
  font:italic 1.7rem/1.3 var(--serif);
  color:#956473;
}

.muted {
  color:var(--muted);
}

.small {
  font-size:.875rem;
}

.section {
  padding:76px 25px;
}

.monogram {
  font:1.45rem/1.3 var(--serif);
  letter-spacing:-.1em;
  display:inline-block;
}

.monogram>span {
  font-size:.85em;
  font-style:italic;
  position:relative;
  top:.16em;
  margin:0 .14em;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  min-height:54px;
  padding:13px 27px;
  border:1px solid var(--navy);
  background:var(--navy);
  color:var(--white);
  border-radius:2px;
  font-size:.875rem;
  letter-spacing:.02em;
  transition:background 350ms ease,transform 400ms var(--motion-ease);
}

.button:hover {
  background:#33415f;
  transform:translateY(-2px);
}

.button:active {
  transform:translateY(0);
}

.ui-icon {
  display:block;
  width:1.15em;
  height:1.15em;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;
}

.button>.ui-icon {
  width:18px;
  height:18px;
}

.fine-line {
  width:42px;
  height:1px;
  background:var(--navy);
  margin:24px auto;
}

.tiny-divider {
  margin:34px auto;
  color:#ac7b83;
}

.tiny-divider svg {
  display:block;
  width:24px;
  height:24px;
  margin:auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.15;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.skip-link {
  position:absolute;
  top:10px;
  left:15px;
  padding:10px 20px;
  background:var(--navy);
  color:white;
  z-index:10;
  transform:translateY(-200%);
}

.skip-link:focus {
  transform:translateY(0);
}

.noscript {
  position:fixed;
  top:0;
  z-index:100;
  background:white;
  padding:15px;
  box-shadow:0 0 0 100vmax #fffc;
}

/* A physical envelope is the opening control's animated visual. */
.cover {
  position:relative;
  min-height:100vh;
  height:100vh;
  min-height:100svh;
  height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  overflow:hidden;
  padding:23px 22px 20px;
  padding:max(23px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));
  background:radial-gradient(ellipse at 30% 20%,#fff 35%,#faf8f6 100%);
  isolation:isolate;
  transition:opacity 450ms ease-in-out;
}

.cover:before {
  content:'';
  pointer-events:none;
  position:absolute;
  inset:15px;
  border:1px solid #212b4414;
  z-index:-1;
}

.cover-top {
  width:100%;
  max-width:1080px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 8px;
  gap:16px;
}

.cover-top .eyebrow {
  font-size:.65rem;
  letter-spacing:.13em;
}

.cover-content {
  text-align:center;
  width:100%;
  max-width:570px;
  margin:auto 0;
  padding:28px 0 30px;
  position:relative;
}

.cover-kicker {
  margin:0 0 13px;
}

.cover h1 {
  font-size:clamp(2.3rem,7.9vw,3.8rem);
  letter-spacing:-.055em;
}

.cover h1 em {
  font-size:.8em;
  margin:0 3px;
}

.cover-intro {
  font:italic 1rem/1.6 var(--serif);
  color:var(--muted);
  margin-top:15px;
}

.envelope-wrap {
  width:min(100%,345px);
  max-width:100%;
  height:215px;
  margin:45px auto 29px;
  perspective:1100px;
  position:relative;
}

.envelope {
  position:absolute;
  inset:0;
  background:#eee9e4;
  border-radius:2px;
  box-shadow:0 20px 30px -15px #34241938,0 3px 8px #0000000b;
  isolation:isolate;
}

.envelope-lining {
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 5px,#212b4409 5px 6px),#f3dedf;
  border-radius:3px;
}

.letter {
  position:absolute;
  inset:12px 14px 10px;
  background:#fffefa;
  border:1px solid #e3ded7;
  overflow:hidden;
  z-index:2;
  container-type:size;
  transition:transform 1300ms cubic-bezier(.45,0,.25,1) 900ms;
}

.envelope-pocket {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:3;
}

button:focus:not(:focus-visible),a:focus:not(:focus-visible) { outline:none; }

.envelope-flap {
  position:absolute;
  inset:0;
  transform-origin:50% 0;
  z-index:4;
  filter:drop-shadow(0 3px 3px #79634824);
  transition:transform 1100ms cubic-bezier(.45,0,.25,1) 100ms,z-index 0s 650ms,visibility 0s 650ms;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.envelope-flap::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(175deg,#fffefa,#f3eee7);
  clip-path:polygon(0 0,100% 0,50% 59%);
  -webkit-clip-path:polygon(0 0,100% 0,50% 59%);
}

.envelope-back-flap {
  position:absolute;
  inset:0;
  clip-path:polygon(0 0,100% 0,50% 59%);
  -webkit-clip-path:polygon(0 0,100% 0,50% 59%);
  transform-origin:50% 0;
  background:#efddde;
  z-index:1;
  transform:rotateX(0);
  transition:transform 1100ms cubic-bezier(.45,0,.25,1) 100ms;
}

.seal {
  position:absolute;
  left:50%;
  top:46%;
  transform:translate(-50%,-10%);
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:48% 51% 46% 53%;
  color:#ebd9cc;
  background:radial-gradient(circle at 30% 20%,#414b61,#212b44 75%);
  box-shadow:0 3px 5px #171e3540,inset 0 0 0 4px #6470874d,inset 0 0 0 6px #101a332e;
  z-index:5;
  transition:opacity 250ms ease-in-out,transform 300ms ease-in-out;
}

.seal>span {
  font:1.18rem var(--serif);
  letter-spacing:-.13em;
  text-shadow:0 1px #111;
}

.seal-amp {
  font-size:.8em;
  font-style:italic;
}

.addressee .eyebrow {
  font-size:.65rem;
  letter-spacing:.16em;
}

.guest-names {
  font:1.55rem/1.35 var(--serif);
  margin:10px 0 22px;
  min-height:34px;
  overflow-wrap:anywhere;
}

.open-button {
  min-width:222px;
}

.cover-footer {
  font:italic .82rem/1.5 var(--serif);
  color:var(--muted);
  padding:0 15px;
  text-align:center;
}

.cover-error {
  font-size:.875rem;
  color:#a23b4b;
  max-width:340px;
  margin:14px auto 0;
}

.cover-error:empty {
  display:none;
}

.cover.is-opening .seal {
  opacity:0;
  transform:translate(-50%,-10%) scale(.8);
}

.cover.is-opening .envelope-flap {
  transform:rotateX(180deg);
  z-index:0;
  /* Only the white front disappears when the hinge turns away. */
  visibility:hidden;
}

.cover.is-opening .envelope-back-flap {
  transform:rotateX(180deg);
}

.cover.is-opening .letter {
  transform:translateY(calc(-100% - 24px));
}

.cover.is-opening {
  position:fixed;
  inset:0;
  z-index:20;
  pointer-events:none;
}

.cover.is-leaving {
  opacity:0;
}

.cover.is-leaving .envelope { transform:translateY(65px); opacity:0; transition:transform 700ms var(--motion-ease),opacity 450ms ease; }
.hero.is-unfolding { z-index:30; }

/* Clear the space above the envelope before the flap and letter rise into it. */
.cover-top,.cover-kicker,.cover h1,.cover-intro { transition:opacity 180ms ease; }
.cover.is-opening .cover-top,.cover.is-opening .cover-kicker,.cover.is-opening h1,.cover.is-opening .cover-intro { opacity:0; }

/* Vertical invitation: large type, generous paper margins, quiet color shifts. */
.hero {
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-align:center;
  padding-top:25px;
  padding-bottom:30px;
  padding-top:max(25px,env(safe-area-inset-top));
  padding-bottom:max(30px,env(safe-area-inset-bottom));
  overflow:hidden;
  background:#fffefa;
}

.hero:before {
  content:'';
  position:absolute;
  inset:13px;
  border:1px solid #212b441a;
  pointer-events:none;
}

.hero-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  z-index:1;
  width:100%;
  max-width:1080px;
  margin:0 auto;
}

.hero-top .eyebrow {
  font-size:.7rem;
}

.hero-inner {
  position:relative;
  z-index:1;
  padding:55px 0 45px;
}

.hero-inner > .eyebrow {
  font-size:.65rem;
  font-weight:400;
  letter-spacing:.13em;
  color:var(--muted);
}

.hero-script {
  font-size:1.1rem;
  line-height:1.45;
  color:#8d7780;
  margin:6px 0 30px;
}

.hero h2 {
  font-size:clamp(4rem,17vw,6.8rem);
  line-height:1;
  letter-spacing:-.065em;
}

.hero-amp {
  display:block;
  font:italic .53em/1.3 var(--serif);
  color:#ad7980;
  letter-spacing:0;
  margin:8px 0;
}

.hero-date {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.3em;
  font:1.35rem/1.25 var(--serif);
  font-variant-numeric:lining-nums;
  letter-spacing:.08em;
}

/* A tiny crop of the existing natural cord, turned into a horizontal dash. */
.date-dash {
  position:relative;
  display:inline-block;
  flex:0 0 .85em;
  height:.6em;
  color:transparent;
  letter-spacing:0;
}
.date-dash::before {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:.22em;
  height:.85em;
  background:url('../assets/rattan-floral-divider.png') center center / 3.6em auto no-repeat;
  transform:translate(-50%,-50%) rotate(90deg);
  opacity:.75;
}

.hero-date-note {
  font-size:.875rem;
  color:var(--muted);
  margin-top:10px;
}

.scroll-cue {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-decoration:none;
  position:relative;
  z-index:1;
}

.scroll-cue .eyebrow {
  font-size:.65rem;
}

.scroll-cue>.scroll-arrow {
  width:22px;
  height:22px;
}

.intro {
  text-align:center;
  max-width:660px;
  margin:auto;
}

.intro-quote {
  font:1.75rem/1.5 var(--serif);
  letter-spacing:-.035em;
  margin:0 auto 24px;
}

.intro-quote em {
  color:#94646d;
}

.intro>p:not(.intro-quote) {
  max-width:430px;
  margin-left:auto;
  margin-right:auto;
}

.intro>p:not(.intro-quote):not(.small) {
  color:var(--muted);
}

.small-heading {
  font-size:1.75rem;
  letter-spacing:-.035em;
}

.countdown {
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:10px;
  margin:24px 0 16px;
  font-variant-numeric:tabular-nums;
}

.countdown div {
  display:flex;
  flex-direction:column;
  min-width:46px;
}

.countdown div>span:first-child {
  font:2.2rem/1.25 var(--serif);
}

.countdown div>span:last-child {
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-top:7px;
  color:var(--muted);
}

.countdown i {
  font:1.5rem var(--serif);
  margin-top:5px;
  color:#b29297;
}

.day {
  background:#f6f6f3;
  text-align:center;
}

.day>h2 {
  max-width:700px;
  margin:0 auto 47px;
}

.events {
  max-width:var(--content);
  margin:auto;
  display:grid;
}

.event {
  position:relative;
  padding:5px 14px 40px;
}

.event+.event {
  border-top:1px solid #d7d9d7;
  padding-top:40px;
  padding-bottom:0;
}

.event-index {
  display:block;
  font:italic 2rem var(--serif);
  color:#ae7e87;
  margin-bottom:20px;
}

.event-icon {
  display:block;
  width:90px;
  height:90px;
  margin:0 auto 18px;
  color:var(--navy);
}

.event-icon-accent { stroke:#c58e99; }

.event .eyebrow {
  font-size:.65rem;
  margin-bottom:14px;
}

.event h3 {
  font-size:2.5rem;
  margin-bottom:15px;
}

.event>p:not(.eyebrow) {
  font-size:.95rem;
}

.event-rule {
  width:25px;
  height:1px;
  background:#b6bdc5;
  margin:22px auto;
}

.event .event-place {
  font-weight:500;
  margin-bottom:5px;
}

.event .muted {
  max-width:300px;
  margin:auto;
}

.event-details {
  white-space:pre-line;
  line-height:1.75;
}

.event-detail-line { display:block; }

.event-time {
  width:max-content;
  margin:7px auto 0;
  padding:2px 11px 3px;
  border:1px solid #c58e9952;
  border-radius:999px;
  color:#8f6570;
  font:italic 1.02rem/1.45 var(--serif);
}

.reception-venue-art {
  position:relative;
  width:min(94%,720px);
  margin:24px auto 0;
  overflow:hidden;
}

.reception-venue-art::after {
  content:none;
}

.reception-venue-image {
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.day-timeline {
  width:min(calc(100% - 36px),620px);
  margin:58px auto 0;
  padding:0;
  background:transparent;
}

.timeline-rule {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  color:#bd8792;
}

.timeline-rule span {
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,currentColor);
  opacity:.48;
}

.timeline-rule span:last-child {
  background:linear-gradient(90deg,currentColor,transparent);
}

.timeline-rule svg,
.timeline-title-ornament {
  flex:0 0 auto;
  width:58px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.05;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.day-timeline h3 {
  margin:20px 0 0;
  color:var(--navy);
  font-size:clamp(2.15rem,6.4vw,2.75rem);
  font-weight:400;
  letter-spacing:-.04em;
}

.timeline-title-ornament {
  display:block;
  width:48px;
  height:20px;
  margin:7px auto 9px;
  color:#bd8792;
}

.timeline-list {
  width:min(100%,380px);
  margin:0 auto;
  padding:0;
  list-style:none;
  transform:translateX(8px);
}

.timeline-item {
  display:grid;
  grid-template-columns:92px 22px minmax(0,1fr);
  align-items:center;
  column-gap:8px;
  min-height:88px;
  text-align:left;
}

.timeline-icon {
  display:grid;
  place-items:center;
  width:92px;
  height:66px;
}

.timeline-icon svg {
  display:block;
  width:92px;
  height:66px;
  fill:none;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.timeline-icon-primary {
  stroke:var(--navy);
}

.timeline-icon-accent {
  stroke:#bd8792;
  stroke-width:1.05;
}

.timeline-axis {
  position:relative;
  align-self:stretch;
}

.timeline-axis::before {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:#bd87927a;
}

.timeline-axis::after {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:9px;
  height:9px;
  border:1px solid #b9828e;
  border-radius:50%;
  background:#d9b8be;
  box-shadow:0 0 0 2px #f6f6f3;
  transform:translate(-50%,-50%);
}

.timeline-copy time {
  display:block;
  margin-bottom:2px;
  color:var(--navy);
  font:clamp(1.4rem,4.7vw,1.65rem)/1.12 var(--serif);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.025em;
}

.timeline-copy p {
  color:#687187;
  font-size:.88rem;
  line-height:1.45;
  text-wrap:balance;
}

.timeline-rule--bottom {
  margin-top:18px;
}

.timeline-rule--bottom svg {
  transform:rotate(180deg);
}

.day-timeline + .hospitality {
  margin-top:34px;
}

.hospitality {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  max-width:620px;
  margin:45px auto 0;
  padding:29px 18px 0;
  border-top:1px solid #d7d9d7;
}

.hospitality::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  background:url('../assets/images/decor/troquelado-fondo.webp') center 8% / 100% auto no-repeat;
  opacity:.1;
  pointer-events:none;
}

.hospitality h3 {
  max-width:520px;
  margin:0 auto 14px;
  font-size:1.55rem;
}

.hospitality>p {
  max-width:570px;
  margin:0 auto;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.8;
}

.hospitality .hospitality-date {
  margin-top:15px;
  color:#9d6c79;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.story {
  max-width:var(--content);
  margin:auto;
  text-align:center;
  position:relative;
  isolation:isolate;
}

.story::before {
  content:'';
  position:absolute;
  z-index:-1;
  top:24px;
  left:4px;
  width:clamp(112px,18vw,178px);
  aspect-ratio:1;
  background:url('../assets/images/decor/ornamento-esquina.webp') top left / contain no-repeat;
  opacity:.2;
  pointer-events:none;
}

.story .script {
  font-size:1.4rem;
  margin-bottom:18px;
}

.story-layout {
  display:grid;
  gap:30px;
  justify-items:center;
}

.story-text {
  width:100%;
  max-width:60ch;
}

.story-text>p:first-child {
  max-width:38ch;
  margin-inline:auto;
  font:clamp(1.4rem,3vw,1.65rem)/1.5 var(--serif);
  letter-spacing:-.025em;
  text-wrap:balance;
}

.story-text>p:nth-child(2) {
  color:var(--muted);
  margin-top:26px;
  line-height:1.8;
  text-wrap:pretty;
}

.story-signature {
  font:italic 1.25rem var(--serif);
  margin-top:25px;
}

.save-date-film {
  max-width:960px;
  margin:auto;
  padding-top:0;
  padding-bottom:42px;
  text-align:center;
}

.save-date-film h2 {
  font-size:clamp(2.1rem,7vw,3.1rem);
  letter-spacing:-.035em;
}

.save-date-film h2::after {
  content:'';
  display:block;
  width:42px;
  height:1px;
  margin:13px auto 0;
  background:linear-gradient(90deg,transparent,#ac7b83,transparent);
}

.save-date-film-frame {
  position:relative;
  width:100%;
  max-width:820px;
  margin:17px auto 0;
  padding:4px;
  background:#fffdfa;
  border:1px solid #212b4424;
  box-shadow:0 14px 34px #212b4419;
}

.save-date-film-frame::after {
  content:'';
  position:absolute;
  inset:8px;
  border:1px solid #ffffff78;
  pointer-events:none;
}

.save-date-film video {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background:#171c2b;
  object-fit:cover;
}

.gallery {
  padding-top:10px;
  text-align:center;
  max-width:1160px;
  margin:auto;
  position:relative;
  isolation:isolate;
}

.gallery-intro {
  margin:20px auto 36px;
  max-width:310px;
}

.section-ornament {
  position:relative;
  z-index:2;
  display:block;
  height:auto;
  max-width:calc(100% - 48px);
  margin-inline:auto;
  object-fit:contain;
  pointer-events:none;
}

.section-ornament--floral {
  width:270px;
  margin-top:22px;
  margin-bottom:34px;
}

.section-ornament--line {
  width:470px;
  margin-top:0;
  margin-bottom:34px;
}

.photo-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:21px 15px;
  position:relative;
  align-items:start;
}

.photo {
  position:relative;
  z-index:1;
}

.photo-placeholder {
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:#fffaf6;
  border:1px solid #212b4426;
  border-radius:2px;
  box-shadow:0 10px 24px #212b4418;
}

.photo-placeholder:before {
  content:'';
  position:absolute;
  inset:4px;
  border:1px solid #ffffff9c;
  pointer-events:none;
  z-index:2;
}

.photo-placeholder:after {
  content:none;
}

.photo-image {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.94) contrast(.98) brightness(1.01);
}

.photo-two .photo-image {
  object-position:50% 48%;
}

.photo-number {
  font:italic 1.2rem var(--serif);
}

.photo-phrase {
  font:1.2rem/1.3 var(--serif);
  letter-spacing:-.03em;
}

.photo .eyebrow {
  font-size:.55rem;
  letter-spacing:.09em;
}

.photo-two {
  padding-top:0;
}

.photo-two .photo-placeholder {
  background:#edf0f1;
  color:#596171;
}

.photo-three {
  grid-column:1/-1;
  width:100%;
  max-width:calc(50% - 8px);
  justify-self:center;
}

.photo-three .photo-placeholder {
  background:#f4e4e4;
  color:#7c5b62;
}

.photo figcaption {
  font:italic .9rem/1.4 var(--serif);
  margin-top:9px;
  color:#6e6872;
  letter-spacing:.01em;
}

.photo figcaption::before {
  content:'';
  display:block;
  width:22px;
  height:1px;
  margin:0 auto 6px;
  background:linear-gradient(90deg,transparent,#ac7b83,transparent);
  opacity:.72;
}

.details {
  position:relative;
  padding-bottom:0;
  background:#faf6f5;
  text-align:center;
}

.detail-grid {
  display:grid;
  gap:40px;
  max-width:var(--content);
  margin:42px auto 0;
}

.detail-grid article+article {
  border-top:1px solid #decfce;
  padding-top:36px;
}

.detail-mark {
  font:2.1rem var(--serif);
  display:block;
  margin-bottom:18px;
  color:#976b75;
}

.detail-grid h3 {
  font-size:1.65rem;
  margin-bottom:16px;
}

.detail-grid p {
  max-width:340px;
  margin:12px auto 0;
}

.detail-grid .muted {
  font-size:.95rem;
}

/* Formal dress guidance, scoped to this detail only. */
.dress-code {
  min-width:0;
}

.dress-code-icon {
  display:block;
  width:78px;
  height:64px;
  margin:0 auto 18px;
  color:var(--navy);
}

.detail-grid .dress-code-level {
  margin-top:0;
  color:#8e5969;
  font:italic 1.25rem/1.45 var(--serif);
}

.detail-grid .dress-code-copy {
  margin-top:18px;
  line-height:1.8;
  text-wrap:pretty;
}

.dress-code-copy span {
  display:block;
}

.dress-code-copy span + span {
  margin-top:6px;
}

.detail-grid .dress-code-note {
  max-width:34ch;
  margin-top:24px;
  padding:16px 17px;
  color:#654f59;
  background:linear-gradient(145deg,#fffaf7,#f9ecec);
  border:1px solid #d9b9bd;
  border-radius:2px;
  box-shadow:0 8px 20px #986e7610;
  font-size:.86rem;
  line-height:1.72;
  text-wrap:balance;
}

/* Gift details reuse the invitation's rattan and lace stationery. */
.gifts {
  min-width:0;
}

.gift-accounts {
  display:grid;
  gap:22px;
  width:100%;
  max-width:420px;
  margin:30px auto 0;
}

.gift-card {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:32px 22px 30px;
  border:1px solid #d8cbb7;
  border-radius:12px;
  background:var(--paper);
  box-shadow:0 5px 18px #212b4406;
  color:var(--navy);
}

.gift-card::before,
.gift-card::after {
  content:'';
  position:absolute;
  pointer-events:none;
  z-index:-1;
}

.gift-card::before {
  inset:6px;
  border:1px dashed #c3aa8066;
  border-radius:8px;
}

.gift-card::after {
  right:0;
  bottom:0;
  width:105px;
  height:125px;
  background:url('../assets/rattan-lace-reference.webp') right bottom / 250px 375px no-repeat;
  opacity:.32;
  -webkit-mask-image:radial-gradient(ellipse at bottom right,#000 30%,transparent 72%);
  mask-image:radial-gradient(ellipse at bottom right,#000 30%,transparent 72%);
}

.gift-card h4 {
  margin:0;
  font:1.65rem/1.25 var(--serif);
  letter-spacing:-.025em;
  text-wrap:balance;
}

.gift-card h4::after {
  content:'';
  display:block;
  width:32px;
  height:2px;
  margin:15px auto 19px;
  background:var(--rose);
}

.gift-card dl,
.gift-card dd {
  margin:0;
}

.gift-card dt {
  color:var(--muted);
  font-size:.78rem;
  line-height:1.6;
}

.gift-card dd {
  margin-top:3px;
  font-size:.95rem;
  line-height:1.55;
}

.gift-card .gift-account dd {
  font:1.5rem/1.35 var(--serif);
  letter-spacing:.045em;
  font-variant-numeric:lining-nums tabular-nums;
}

.gift-holder {
  margin-top:19px;
}

.gift-holder dd {
  text-wrap:balance;
}

.gift-id {
  margin-top:12px;
  font-variant-numeric:tabular-nums;
}

.rsvp {
  position:relative;
  isolation:isolate;
  max-width:680px;
  margin:auto;
  text-align:center;
  padding-top:38px;
  padding-bottom:42px;
}

.rsvp::before {
  content:'';
  position:absolute;
  z-index:-1;
  top:0;
  left:calc(50% - 50vw);
  width:100vw;
  height:78px;
  background:linear-gradient(to bottom,#faf6f5,rgba(255,255,255,0));
  pointer-events:none;
}

.rsvp .script {
  font-size:1.4rem;
  margin-bottom:16px;
}

.rsvp-intro {
  margin:22px 0 35px;
  color:var(--muted);
}

.rsvp-form {
  text-align:left;
}

.rsvp-deadline {
  margin:0 auto 25px;
  max-width:340px;
  color:var(--muted);
  font-size:.84rem;
  line-height:1.7;
  text-align:center;
  text-wrap:balance;
}

.rsvp-person {
  margin:0;
  padding:25px 0;
  border:0;
  border-top:1px solid var(--line);
  min-width:0;
}

.rsvp-person legend {
  float:left;
  padding:0;
  width:100%;
  font:1.5rem/1.4 var(--serif);
  margin-bottom:14px;
  overflow-wrap:anywhere;
}

.person-role {
  font:.72rem var(--sans);
  display:block;
  color:var(--muted);
  margin-top:3px;
}

.choices {
  clear:both;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.choice {
  position:relative;
  cursor:pointer;
  display:flex;
}

.choice input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}

.choice span {
  width:100%;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:9px 7px;
  border:1px solid #c6c9d0;
  border-radius:2px;
  font-size:.8rem;
  text-align:center;
  transition:background 320ms ease,border-color 320ms ease;
}

.choice input:checked+span {
  border-color:var(--navy);
  background:var(--navy);
  color:white;
}

.choice input:focus-visible+span {
  outline:3px solid #a85d6b;
  outline-offset:4px;
}

.choice:hover span {
  border-color:var(--navy);
}

.companion-field {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:22px;
}

.companion-field label {
  font-size:.875rem;
}

.companion-field input {
  width:100%;
  min-height:52px;
  border:1px solid #afb4bf;
  padding:12px;
  border-radius:2px;
  background:white;
  color:var(--navy);
  -webkit-appearance:none;
  appearance:none;
}

.field-error,.form-error {
  font-size:.875rem;
  color:#9b3046;
  margin-top:10px;
}

.field-error:empty,.form-error:empty {
  display:none;
}

.rsvp-message-block {
  margin:10px 0 12px;
  padding:25px 0 23px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:center;
}

.rsvp-message-title {
  display:block;
  font:1.55rem/1.35 var(--serif);
}

.rsvp-message-help {
  max-width:390px;
  margin:8px auto 15px;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.65;
}

.rsvp-message-input {
  display:block;
  width:100%;
  min-height:112px;
  resize:vertical;
  border:1px solid #afb4bf;
  border-radius:2px;
  padding:13px 14px;
  background:#fff;
  color:var(--navy);
  font:1rem/1.6 var(--serif);
  -webkit-appearance:none;
  appearance:none;
}

.rsvp-message-input:focus-visible {
  outline:3px solid rgba(168,93,107,.25);
  outline-offset:2px;
  border-color:var(--navy);
}

.rsvp-submit {
  width:100%;
  margin-top:15px;
}

.save-note {
  font-size:.8rem;
  color:var(--muted);
  text-align:center;
  margin-top:12px;
}

.demo-note {
  margin:24px auto 0;
  font-size:.75rem;
  color:var(--muted);
  max-width:420px;
  line-height:1.7;
}

.rsvp-success {
  text-align:center;
  padding:25px 15px 20px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.success-symbol {
  display:grid;
  place-items:center;
  margin:auto auto 15px;
  border:1px solid #b5c0b7;
  border-radius:50%;
  width:44px;
  height:44px;
  color:#456553;
}

.rsvp-success h3 {
  font-size:1.8rem;
  margin-bottom:12px;
}

.rsvp-success>p {
  font-size:.95rem;
  color:var(--muted);
}

.response-list {
  list-style:none;
  padding:0;
  margin:23px 0;
}

.response-list li {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:12px 0;
  border-bottom:1px solid #ececea;
  text-align:left;
  font-size:.875rem;
}

.response-list li>span:first-child {
  overflow-wrap:anywhere;
}

.response-list li>span:last-child {
  flex-shrink:0;
  font-size:.75rem;
}

.rsvp-saved-message {
  margin:24px 0 17px;
  padding:20px 18px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.rsvp-saved-message h4 {
  margin:0 0 9px;
  font:.69rem/1.4 var(--sans);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#9d6c79;
}

.rsvp-saved-message p {
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font:italic 1.02rem/1.7 var(--serif);
  color:var(--navy);
}

.edit-response {
  background:transparent;
  color:var(--navy);
  min-height:48px;
  margin:8px auto 0;
}

.edit-response:hover {
  background:#f3f1ef;
}

.rsvp-closed-notice p {
  max-width:380px;
  margin:auto;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.8;
  text-wrap:balance;
}

.rsvp-success .rsvp-closed-thanks {
  margin:22px auto 0;
  max-width:320px;
  font:italic 1.08rem/1.6 var(--serif);
  color:#9d6c79;
  text-wrap:balance;
}

.closing {
  position:relative;
  margin-top:0;
  background:var(--navy);
  color:white;
  text-align:center;
  display:flex;
  align-items:center;
  flex-direction:column;
  padding-top:55px;
  padding-bottom:45px;
}

.closing::before {
  content:none;
}

.closing .monogram {
  font-size:2rem;
  color:var(--rose);
  margin-bottom:30px;
}

.closing>p {
  font:1.7rem/1.4 var(--serif);
  letter-spacing:-.03em;
}

.closing>p em {
  color:var(--rose);
}

.closing-names {
  font:1.35rem var(--serif);
  margin:32px 0 16px;
}

.closing>.eyebrow {
  font-size:.6rem;
  opacity:.65;
}

.botanical {
  position:absolute;
  pointer-events:none;
  user-select:none;
  mix-blend-mode:multiply;
  object-fit:contain;
  z-index:-1;
}

.cover-botanical {
  width:290px;
  height:435px;
  left:-173px;
  top:15%;
  opacity:.5;
  transform:rotate(26deg);
}

.hero-botanical {
  width:350px;
  height:525px;
  right:-210px;
  bottom:105px;
  opacity:.72;
  transform:rotate(-17deg);
  z-index:0;
}

@media(min-width:700px) {
  .section {
    padding:100px 50px;
  }
  .cover {
    padding:35px 35px 24px;
  }
  .cover:before {
    inset:20px;
  }
  .cover-top .eyebrow {
    font-size:.7rem;
  }
  .cover-content {
    padding:30px 0;
  }
  .envelope-wrap {
    width:430px;
    height:267px;
    margin:47px auto 33px;
  }
  .seal {
    width:70px;
    height:70px;
  }
  .seal>span {
    font-size:1.35rem;
  }
  .guest-names {
    font-size:1.8rem;
  }
  .cover-kicker {
    margin-bottom:17px;
  }
  .cover-footer {
    font-size:.9rem;
  }
  .cover-botanical {
    width:420px;
    height:630px;
    left:-145px;
    top:5%;
    opacity:.6;
  }
  .hero {
    padding-top:35px;
    padding-bottom:35px;
    min-height:900px;
    min-height:100svh;
  }
  .hero:before {
    inset:20px;
  }
  .hero-inner {
    padding:50px 0;
  }
  .hero h2 {
    font-size:6.8rem;
  }
  .hero-botanical {
    width:560px;
    height:840px;
    right:-215px;
    bottom:-30px;
    opacity:.8;
  }
  .hero-script {
    font-size:1.2rem;
  }
  .intro-quote {
    font-size:2.25rem;
  }
  .countdown {
    gap:23px;
    margin-top:30px;
  }
  .countdown div {
    min-width:58px;
  }
  .countdown div>span:first-child {
    font-size:3rem;
  }
  .countdown div>span:last-child {
    font-size:.7rem;
  }
  .countdown i {
    margin-top:12px;
  }
  .events {
    grid-template-columns:1fr 1fr;
    gap:0;
  }
  .event {
    padding:0 30px;
  }
  .event+.event {
    border-top:0;
    border-left:1px solid #d7d9d7;
    padding:0 30px;
  }
  .story-layout {
    gap:38px;
  }
  .gallery {
    padding-top:15px;
  }
  .gallery-intro {
    max-width:unset;
  }
  .photo-grid {
    grid-template-columns:1fr 1fr 1fr;
    gap:35px;
  }
  .photo-placeholder {
    padding:0;
  }
  .photo-two {
    padding-top:0;
  }
  .photo-three {
    grid-column:auto;
    max-width:none;
  }
  .photo-phrase {
    font-size:1.9rem;
  }
  .photo .eyebrow {
    font-size:.65rem;
  }
  .photo figcaption {
    font-size:1rem;
  }
  .detail-grid {
    grid-template-columns:1fr 1fr;
    gap:0;
    margin-top:50px;
  }
  .detail-grid article {
    padding:0 35px;
  }
  .detail-grid article+article {
    border-top:0;
    border-left:1px solid #decfce;
    padding-top:0;
  }
  .choices .choice span {
    font-size:.875rem;
  }
  .closing {
    padding-top:65px;
    padding-bottom:55px;
  }
  .closing>p {
    font-size:2.25rem;
  }
}

@media(max-height:740px) and (max-width:699px) {
  .cover {
    min-height:650px;
    height:100svh;
    overflow-y:auto;
    padding-top:20px;
  }
  .cover-content {
    padding:20px 0;
  }
  .envelope-wrap {
    height:175px;
    width:280px;
    margin-top:28px;
    margin-bottom:22px;
  }
  .cover h1 {
    font-size:2.2rem;
  }
  .cover-intro {
    margin-top:8px;
  }
  .guest-names {
    margin-top:6px;
    margin-bottom:15px;
  }
  .cover-footer {
    font-size:.75rem;
  }
  .cover-top .eyebrow {
    font-size:.6rem;
  }
  .hero-inner {
    padding:32px 0;
  }
  .hero h2 {
    font-size:4.1rem;
  }
}

@media(max-width:359px) {
  .cover {
    padding-left:20px;
    padding-right:20px;
  }
  .cover-top .eyebrow {
    font-size:.57rem;
  }
  .cover h1 {
    font-size:2.15rem;
  }
  .cover-intro {
    font-size:.95rem;
  }
  .section {
    padding-left:20px;
    padding-right:20px;
  }
  .countdown {
    gap:7px;
  }
  .choices {
    gap:7px;
  }
  .choice span {
    font-size:.75rem;
  }
  .photo-phrase {
    font-size:1.1rem;
  }
  .intro-quote {
    font-size:1.6rem;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *:not(.cover):not(.cover *),*:before,*:after {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    transition-delay:0s!important;
  }
}

/* Readable metadata and touch targets, including narrow and short screens. */
.cover-top .eyebrow,.hero-top .eyebrow,.addressee .eyebrow,.scroll-cue .eyebrow,.event .eyebrow,.photo .eyebrow,.closing>.eyebrow {
  font-size:.75rem;
}

.countdown div>span:last-child,.person-role,.response-list li>span:last-child {
  font-size:.75rem;
}

.choice span {
  font-size:.875rem;
}

.cover-content {
  flex-shrink:0;
}

.cover-top,.cover-footer {
  flex-shrink:0;
}

.audio-toggle {
  position:relative;
  flex-shrink:0;
  width:46px;
  height:46px;
  min-height:44px;
  border:1px solid var(--line);
  background:white;
  color:var(--navy);
  border-radius:50%;
  padding:10px;
  box-shadow:0 3px 12px #0001;
  font-size:.875rem;
  display:grid;
  place-items:center;
  transition:background 350ms ease,color 350ms ease;
}

@media(max-width:699px) {
  .day>h2 { margin-bottom:38px; }
  .event-icon { width:86px; height:86px; margin-bottom:18px; }
  .event h3 { font-size:2.15rem; }
  .event-details { line-height:1.65; }
  .reception-venue-art { width:calc(100% + 50px); max-width:none; margin:20px -25px 0; }
  .hospitality { margin-top:38px; padding:25px 7px 0; }
  .hospitality h3 { font-size:1.4rem; text-wrap:balance; }
  .hospitality>p { font-size:.86rem; line-height:1.72; }
  .section-ornament--floral { width:215px; margin-top:18px; margin-bottom:28px; }
  .rsvp { padding-top:38px; }
  .section-ornament--line { width:315px; margin-top:0; margin-bottom:38px; }
  .rsvp-message-block { padding:22px 0 20px; }
  .rsvp-message-title { font-size:1.45rem; }
  .rsvp-message-input { min-height:104px; }
  .companion-field input,.rsvp-message-input { font-size:16px; }
}

/* Parents: an editorial interlude within the existing paper layout. */
.parents {
  text-align:center;
  border-top:1px solid #212b4412;
  max-width:1100px;
  margin:auto;
}
.parents>.eyebrow { color:var(--muted); margin-bottom:18px; }
.parents h2 { font-size:clamp(2.2rem,5vw,3.3rem); }
.parents-intro { max-width:36ch; margin:18px auto 28px; color:var(--muted); line-height:1.65; text-wrap:balance; }
.parents-intro span { display:block; }
.parents-intro span + span { margin-top:4px; }
.parents-families { display:grid; grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr); gap:6px; align-items:center; }
.parent-family { display:grid; grid-template-rows:1fr auto 1fr; align-items:center; height:100%; }
.parent-family p { font:clamp(.95rem,4.25vw,1.36rem)/1.45 var(--serif); letter-spacing:-.01em; overflow-wrap:break-word; }
.parent-amp { display:block; font:italic 1.1rem var(--serif); color:#ac7b83; margin:6px auto; }
.parents-ornament { display:block; width:34px; height:230px; object-fit:cover; object-position:center; }
.location-button { margin-top:25px; text-decoration:none; background:transparent; color:var(--navy); }
.location-button:hover { background:var(--navy); color:white; }
@media(min-width:700px) {
  .parents-families { grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); gap:18px; }
  .parent-family p { font-size:1.45rem; }
  .parents-ornament { width:44px; }
}

/* One floating control, with room for safe-area insets and unobstructed form fields. */
.music-dock {
  position:fixed;
  right:12px;
  right:max(12px,env(safe-area-inset-right));
  bottom:12px;
  bottom:max(12px,env(safe-area-inset-bottom));
  z-index:10;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:calc(100vw - 24px);
  pointer-events:none;
}
.audio-toggle { pointer-events:auto; }
.audio-toggle svg { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.audio-toggle[data-state="playing"],.audio-toggle[data-state="loading"] { background:var(--navy); color:var(--rose); }
.audio-toggle[data-state="playing"] .music-slash,.audio-toggle[data-state="loading"] .music-slash { display:none; }
.music-status { max-width:210px; font-size:.75rem; padding:4px 9px; color:var(--navy); background:#fffefaf2; border-radius:3px; }
.rsvp:focus-within~.music-dock .music-status { visibility:hidden; }
.rsvp:focus-within~.music-dock { bottom:auto; top:12px; top:max(12px,env(safe-area-inset-top)); }

@supports(overflow:clip) {
  html,body { overflow-x:clip; }
}

@media(hover:none) and (pointer:coarse) {
  .button:hover { background:var(--navy); transform:none; }
  .location-button:hover { background:transparent; color:var(--navy); }
  .choice:hover span { border-color:#c6c9d0; }
  .album-open-label:hover { text-decoration:none; }
}

/* Only opacity/transform animate; each scroll reveal runs once. */
.motion-ready [data-reveal] {
  transition:opacity 850ms var(--motion-ease) var(--reveal-delay,0ms),transform 850ms var(--motion-ease) var(--reveal-delay,0ms);
}
.motion-ready [data-reveal]:not(.is-revealed) { opacity:0; transform:translateY(12px); }
.rsvp-success,.rsvp-form { animation:gentle-arrival 600ms var(--motion-ease) both; }
.companion-field:not([hidden]) { animation:gentle-arrival 450ms var(--motion-ease) both; }
@keyframes gentle-arrival { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) {
  .motion-ready [data-reveal]:not(.is-revealed) { opacity:1; transform:none; }
  .rsvp-success,.rsvp-form,.companion-field:not([hidden]) { animation:none; }
}

@media(max-height:740px) and (max-width:699px) {
  .cover {
    min-height:100svh;
    height:100svh;
  }
  .cover-content {
    margin:0;
  }
  .cover-top .eyebrow {
    font-size:.75rem;
  }
}

@media(max-width:359px) {
  .cover-top .eyebrow {
    max-width:205px;
    text-align:right;
    font-size:.75rem;
    letter-spacing:.08em;
  }
  .choice span {
    font-size:.875rem;
  }
  .photo .eyebrow {
    font-size:.75rem;
    letter-spacing:.03em;
  }
}

/* Natural scroll keeps focus/validation and touch interactions predictable. */
html {
  scroll-behavior:auto;
}

/* The cover can scroll when large text or a long family name needs more room. */
.cover {
  overflow-x:hidden;
  overflow-y:auto;
}

.hero h2 {
  overflow-wrap:anywhere;
}

/* Small rattan/lace corners from the couple's reference, without changing layout. */
.cover::after,
.hero::after,
.parents::after {
  content:'';
  position:absolute;
  pointer-events:none;
  background-image:url('../assets/rattan-lace-reference.webp');
  background-repeat:no-repeat;
  background-size:360px 540px;
  opacity:.3;
  -webkit-mask-image:radial-gradient(ellipse at bottom right,#000 25%,transparent 72%);
  mask-image:radial-gradient(ellipse at bottom right,#000 25%,transparent 72%);
}
.cover::after {
  width:170px;
  height:190px;
  right:0;
  bottom:0;
  z-index:-1;
  background-position:right bottom;
}
.hero::after {
  width:120px;
  height:155px;
  left:0;
  top:0;
  z-index:0;
  background-position:left top;
  opacity:.22;
  -webkit-mask-image:radial-gradient(ellipse at top left,#000 15%,transparent 72%);
  mask-image:radial-gradient(ellipse at top left,#000 15%,transparent 72%);
}
.parents {
  position:relative;
  isolation:isolate;
}
.parents::after {
  width:125px;
  height:135px;
  right:0;
  bottom:0;
  z-index:-1;
  background-size:300px 450px;
  background-position:right bottom;
  opacity:.23;
}
@media(min-width:700px) {
  .cover::after { width:230px; height:235px; background-size:440px 660px; }
  .hero::after { width:165px; height:200px; background-size:440px 660px; }
  .parents::after { width:165px; height:170px; background-size:360px 540px; }
}

/* Fit the complete printed header, including its date note, inside the sheet. */
.letter .hero { min-height:0; height:100%; padding:2.5cqh 18px; justify-content:flex-start; }
.letter .hero::before { inset:6px; }
.letter .hero::after { width:65px; height:85px; background-size:180px 270px; }
.letter .hero-top { padding:0; }
.letter .monogram { font-size:6cqh; }
.letter .eyebrow { font-size:2.8cqh; }
.letter .hero-inner { width:100%; padding:1.5cqh 0; }
.letter .hero-inner > .eyebrow { font-size:2.3cqh; }
.letter .hero-script { font-size:4cqh; margin:1cqh 0 3cqh; }
.letter .hero h2 { font-size:15cqh; }
.letter .hero-amp { margin:1.5cqh 0; }
.letter .fine-line { width:22px; margin:2cqh auto; }
.letter .hero-date { font-size:5cqh; }
.letter .hero-date-note { font-size:4cqh; line-height:1.35; margin-top:1.5cqh; }
.letter .hero-botanical { width:170px; height:255px; right:-65px; bottom:-15px; opacity:.65; }

/* Compact mobile rhythm for the four editorial details adjusted together. */
@media(max-width:699px) {
  .intro .tiny-divider {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:108px;
    margin:27px auto 13px;
    color:#ac7b83;
    font-size:.72rem;
    opacity:.8;
  }

  .intro .tiny-divider::before,
  .intro .tiny-divider::after {
    content:'';
    width:36px;
    height:1px;
    background:linear-gradient(90deg,transparent,#b7966f);
  }

  .intro .tiny-divider::after {
    background:linear-gradient(90deg,#b7966f,transparent);
  }

  .intro .small-heading {
    color:var(--navy);
    font-size:2rem;
    letter-spacing:-.04em;
  }

  .countdown {
    gap:8px;
    margin:18px 0 10px;
  }

  .countdown div {
    min-width:48px;
  }

  .countdown div>span:first-child {
    color:var(--navy);
    font-size:2.75rem;
    line-height:1.12;
  }

  .countdown div>span:last-child {
    margin-top:4px;
    color:#737783;
    font-size:.68rem;
    font-weight:500;
    letter-spacing:.13em;
  }

  .countdown i {
    margin-top:4px;
    color:#ac7b83;
    font-size:1.7rem;
  }

  #countdown-note {
    max-width:290px;
    margin-right:auto;
    margin-left:auto;
    font-size:.78rem;
    opacity:.68;
  }

  .parents {
    padding-top:50px;
    padding-bottom:40px;
  }

  .parents>.eyebrow {
    margin-bottom:12px;
  }

  .parents-intro {
    margin:14px auto 23px;
    line-height:1.58;
  }

  .parents-intro span + span {
    margin-top:3px;
  }

  .parents-families {
    grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);
    justify-content:center;
    gap:6px;
  }

  .parent-family p {
    font-size:1.06rem;
    line-height:1.4;
  }

  .parent-amp {
    margin:5px auto;
  }

  .parents-ornament {
    width:30px;
    height:190px;
    opacity:.82;
  }

  .gift-accounts {
    gap:14px;
    margin-top:24px;
  }

  .gift-card {
    padding:22px 20px 20px;
  }

  .gift-card::before {
    inset:5px;
    border-color:#c3aa8052;
  }

  .gift-card::after {
    width:82px;
    height:96px;
    background-size:220px 330px;
    opacity:.24;
  }

  .gift-card h4 {
    font-size:1.58rem;
  }

  .gift-card h4::after {
    width:28px;
    height:1px;
    margin:9px auto 12px;
  }

  .gift-card dt {
    line-height:1.35;
  }

  .gift-card dd {
    margin-top:1px;
    line-height:1.4;
  }

  .gift-card .gift-account dd {
    font-size:1.42rem;
    line-height:1.25;
  }

  .gift-holder {
    margin-top:12px;
  }

  .gift-id {
    margin-top:8px;
  }

  .rsvp-intro {
    margin:18px 0 26px;
  }

  .rsvp-deadline {
    margin-bottom:18px;
    line-height:1.55;
  }

  .rsvp-person {
    padding:18px 0;
  }

  .rsvp-person legend {
    margin-bottom:10px;
    font-size:1.45rem;
    line-height:1.3;
  }

  .choices {
    gap:8px;
  }

  .choice span {
    min-height:46px;
    padding:7px 6px;
  }

  .companion-field {
    gap:6px;
    margin-top:16px;
  }

  .companion-field input {
    min-height:48px;
    padding:10px 12px;
  }

  .rsvp-submit {
    margin-top:10px;
  }

  .save-note {
    margin-top:9px;
  }

  .demo-note {
    margin-top:20px;
  }
}

/* Preserve the 390px composition and ease the scale only on narrower phones. */
@media(max-width:384px) {
  .section {
    padding-right:21px;
    padding-left:21px;
  }

  .cover {
    padding-right:21px;
    padding-left:21px;
  }

  .cover h1 {
    font-size:clamp(2.15rem,9.5vw,2.4rem);
  }

  .guest-names {
    font-size:1.45rem;
  }

  h2 {
    font-size:clamp(2.05rem,9vw,2.2rem);
  }

  .hero-inner {
    padding-top:46px;
    padding-bottom:38px;
  }

  .hero h2 {
    font-size:clamp(3.65rem,16vw,4rem);
  }

  .intro-quote {
    font-size:1.65rem;
  }

  .intro .small-heading {
    font-size:1.85rem;
  }

  .countdown {
    gap:6px;
  }

  .countdown div {
    min-width:44px;
  }

  .countdown div>span:first-child {
    font-size:2.5rem;
  }

  .event-icon {
    width:82px;
    height:82px;
  }

  .event h3 {
    font-size:2rem;
  }

  .reception-venue-art {
    width:calc(100% + 42px);
    margin-right:-21px;
    margin-left:-21px;
  }

  .day-timeline {
    margin-top:50px;
    padding:0;
  }

  .day-timeline h3 {
    margin-top:18px;
    font-size:2.2rem;
  }

  .timeline-item {
    grid-template-columns:82px 18px minmax(0,1fr);
    column-gap:6px;
    min-height:86px;
  }

  .timeline-icon {
    width:82px;
    height:60px;
  }

  .timeline-icon svg {
    width:82px;
    height:60px;
  }

  .timeline-copy time {
    font-size:1.28rem;
  }

  .timeline-copy p {
    font-size:.82rem;
  }

  .parents h2 {
    font-size:2.05rem;
  }

  .parent-family p {
    font-size:1rem;
  }

  .story .script,
  .rsvp .script {
    font-size:1.32rem;
  }

  .story-text>p:first-child {
    font-size:1.34rem;
  }

  .save-date-film h2 {
    font-size:2rem;
  }

  .detail-grid h3 {
    font-size:1.55rem;
  }

  .rsvp-person legend {
    font-size:1.35rem;
  }

  .button {
    gap:18px;
    padding-right:23px;
    padding-left:23px;
  }
}