@font-face { font-family:'Iansui'; src:url('https://cdn.jsdelivr.net/gh/ButTaiwan/iansui@main/fonts/ttf/Iansui-Regular.ttf') format('truetype'); font-display:swap; }
:root { --ink:#202326; --paper:#f3efe8; --paper-dark:#dfd9cf; --accent:#a46f68; --blue:#bfced1; --serif:'Playfair Display','Iansui',serif; --sans:'Iansui','Noto Sans TC','DM Sans',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); overflow-x:hidden; }
body.is-loading { overflow:hidden; }
.chapter-nav, main { transition:opacity .6s ease; }
body.is-loading .chapter-nav, body.is-loading main { visibility:hidden; opacity:0; }
.site-loader[hidden] { display:none !important; }
.site-loader {
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  min-height:100svh;
  padding:28px;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(191,206,209,.42), transparent 30%),
    radial-gradient(circle at 88% 92%, rgba(226,197,184,.38), transparent 32%),
    #f3efe8;
  opacity:1;
  transition:opacity .65s ease, visibility .65s ease;
}
body.is-ready .site-loader { visibility:hidden; opacity:0; pointer-events:none; }
.loader-card {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  width:min(88vw,430px);
  min-height:min(62vh,500px);
  padding:52px 38px;
  border:1px solid rgba(113,139,149,.34);
  background:rgba(250,247,241,.58);
  box-shadow:0 24px 70px rgba(70,65,58,.08);
  text-align:center;
}
.loader-card::before { content:""; position:absolute; inset:10px; border:1px solid rgba(164,111,104,.18); }
.loader-monogram { position:relative; z-index:1; font-family:var(--serif); font-size:31px; letter-spacing:.2em; }
.loader-monogram i { color:var(--accent); font-size:20px; font-style:normal; }
.loader-ornament { position:relative; z-index:1; margin:34px 0 24px; color:#718b95; font-size:22px; animation:loaderPulse 1.5s ease-in-out infinite; }
.loader-card p { position:relative; z-index:1; margin:0; color:#5f5b57; font-size:13px; letter-spacing:.16em; line-height:1.8; }
.loader-card small { position:relative; z-index:1; margin-top:24px; color:#9a7770; font-family:var(--serif); font-size:11px; letter-spacing:.22em; }
.loader-line { position:relative; z-index:1; width:min(220px,66vw); height:1px; margin-top:30px; overflow:hidden; background:rgba(113,139,149,.2); }
.loader-line i { position:absolute; inset:0 auto 0 0; width:42%; background:#718b95; animation:loaderSweep 1.35s ease-in-out infinite; }
.site-loader.has-error .loader-ornament, .site-loader.has-error .loader-line i { animation:none; }
.site-loader.has-error .loader-line i { width:100%; background:var(--accent); opacity:.55; }
@keyframes loaderPulse { 0%,100% { opacity:.45; transform:scale(.82) rotate(0); } 50% { opacity:1; transform:scale(1.08) rotate(45deg); } }
@keyframes loaderSweep { 0% { transform:translateX(-105%); } 50% { transform:translateX(140%); } 100% { transform:translateX(350%); } }
@media (max-width:800px) {
  .site-loader { padding:18px; }
  .loader-card { width:min(90vw,390px); min-height:min(68svh,520px); padding:46px 24px; }
  .loader-monogram { font-size:28px; }
}
button, select { font:inherit; }
.grain { position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.065; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
.chapter-nav { position:fixed; z-index:30; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:28px 4vw; color:var(--ink); font-size:10px; letter-spacing:.18em; mix-blend-mode:multiply; }
.nav-mark { font-family:var(--serif); font-size:16px; letter-spacing:.08em; }
.nav-date { font-size:9px; }
.chapter-dots { display:flex; gap:10px; }
.dot { width:7px; height:7px; padding:0; border:1px solid currentColor; border-radius:50%; background:transparent; cursor:pointer; transition:.3s; }
.dot.active { background:currentColor; transform:scale(1.35); }
.chapter { position:relative; min-height:100svh; overflow:hidden; scroll-margin-top:20px; }
.hero { display:flex; align-items:center; padding:12vw 11vw; color:#fff; background:#313437; }
.hero-photo,.hero-overlay,.rsvp-photo,.letter-backdrop { position:absolute; inset:0; background-position:center; background-size:cover; }
.photo-one { background-image:url('/photos/hero.jpg'); background-position:center 38%; transform:scale(1.04); animation:slowZoom 16s ease-in-out infinite alternate; }
.hero-overlay { background:linear-gradient(90deg,rgba(10,12,14,.66),rgba(10,12,14,.12) 65%,rgba(10,12,14,.18)); }
.hero-copy { position:relative; z-index:1; max-width:720px; }
.eyebrow { margin:0 0 24px; text-transform:uppercase; font-size:10px; letter-spacing:.2em; line-height:1.8; }
h1,h2 { margin:0; font-family:var(--serif); font-size:clamp(4.5rem,10vw,9.5rem); font-weight:400; line-height:.9; letter-spacing:-.055em; }
h1 em,h2 em { color:var(--accent); font-weight:400; }
.hero h1 em { color:#f4d9c9; }
.hero-sub { margin:30px 0 0; font-family:var(--serif); font-size:20px; font-style:italic; }
.scroll-cue { display:flex; align-items:center; gap:18px; margin-top:12vh; color:inherit; font-size:9px; letter-spacing:.2em; text-decoration:none; }
.scroll-cue i { display:grid; place-items:center; width:32px; height:32px; border:1px solid currentColor; border-radius:50%; font-size:18px; font-style:normal; }
.hero-caption { position:absolute; bottom:34px; right:4vw; font-family:var(--serif); font-size:12px; line-height:1.5; text-align:right; opacity:.85; }.hero-caption span { font-family:var(--sans); font-size:9px; letter-spacing:.2em; }
.invitation { background:var(--paper); padding:10vw 9vw; }
.invitation-layout { display:grid; grid-template-columns:1fr minmax(300px,1.2fr) minmax(230px,.75fr); align-items:center; gap:8vw; min-height:80vh; }
.chapter-label { display:flex; gap:16px; align-self:start; color:var(--accent); font-size:9px; letter-spacing:.2em; writing-mode:vertical-rl; }.chapter-label span:first-child { opacity:.6; }.chapter-label.light { color:#f3efe8; }
.invitation-copy { max-width:560px; }.invitation-copy h2 { font-size:clamp(3.1rem,6.2vw,7rem); }.invitation-copy h2 em { color:var(--ink); }.names { display:flex; align-items:center; gap:20px; margin:45px 0 28px; font-family:var(--serif); font-size:24px; }.names b { color:var(--accent); font-size:18px; font-weight:400; }.body-copy { font-family:'Noto Sans TC',sans-serif; font-size:14px; line-height:2.1; color:#6d6a66; }
.portrait { margin:0; transform:rotate(3deg); }.portrait img { width:100%; aspect-ratio:3/4; display:block; object-fit:cover; object-position:center; filter:saturate(.75); }.portrait figcaption { margin-top:12px; font-family:var(--serif); font-size:11px; font-style:italic; text-align:right; color:#817b74; }
.letter-chapter { display:grid; place-items:center; color:var(--paper); background:#83989b; }.letter-backdrop { background-image:linear-gradient(rgba(31,42,43,.28),rgba(31,42,43,.5)),url('/photos/letter.jpg'); background-position:center 35%; filter:saturate(.65); }.letter-chapter .chapter-label { position:absolute; top:11vw; left:9vw; }
.letter-stage { position:relative; z-index:1; display:flex; align-items:center; flex-direction:column; text-align:center; }.letter-stage .eyebrow { opacity:.8; }.envelope { position:relative; width:min(72vw,460px); aspect-ratio:1.5; margin:24px 0 20px; border:0; background:transparent; cursor:pointer; perspective:900px; filter:drop-shadow(0 26px 22px rgba(17,31,32,.2)); }.envelope-body { position:absolute; inset:0; background:#e7d2c3; border-radius:3px; clip-path:polygon(0 0,50% 53%,100% 0,100% 100%,0 100%); }.envelope-flap { position:absolute; inset:0; background:#f0ded2; clip-path:polygon(0 0,100% 0,50% 58%); transform-origin:top; transition:transform .9s cubic-bezier(.2,.7,.2,1); z-index:4; }.envelope-letter { position:absolute; z-index:2; left:8%; right:8%; bottom:8%; height:88%; display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding:9%; color:var(--ink); background:#f7f3ea; text-align:left; transform:translateY(4%); transition:transform 1s cubic-bezier(.2,.7,.2,1) .15s; }.letter-title { font-family:var(--serif); font-size:clamp(1.15rem,3vw,1.5rem); font-style:italic; }.envelope-letter #letter-content { font-family:'Noto Sans TC',sans-serif; font-size:12px; line-height:1.9; }.letter-sign { margin-top:auto; font-family:var(--serif); font-size:13px; font-style:italic; }.envelope-seal { position:absolute; z-index:5; top:46%; left:50%; display:grid; place-items:center; width:42px; height:42px; transform:translate(-50%,-50%); border:1px solid #986a63; border-radius:50%; color:#986a63; background:#d49e91; font-family:var(--serif); font-size:19px; transition:.5s; }.envelope.open .envelope-flap { transform:rotateX(180deg); }.envelope.open .envelope-letter { transform:translateY(-42%); }.envelope.open .envelope-seal { opacity:0; transform:translate(-50%,-50%) scale(.5); }.tap-hint { font-size:10px; letter-spacing:.15em; opacity:.8; transition:.3s; }.envelope.open + .tap-hint { opacity:0; }
.rsvp { display:grid; grid-template-columns:1fr minmax(400px,.9fr); background:#d6c5bb; }.rsvp-photo { position:relative; background-image:linear-gradient(90deg,rgba(20,18,18,.04),rgba(20,18,18,.15)),url('/photos/rsvp.jpg'); background-position:center; }.rsvp-panel { position:relative; z-index:1; margin:7vw 5vw 7vw -8vw; padding:6vw; background:rgba(243,239,232,.94); box-shadow:0 25px 60px rgba(61,44,37,.12); }.rsvp-panel .chapter-label { position:absolute; top:6vw; right:5vw; }.rsvp-panel h2 { font-size:clamp(3.3rem,5.5vw,6rem); }.rsvp-panel h2 em { color:var(--accent); }form { margin-top:36px; }fieldset { display:flex; gap:20px; margin:0 0 25px; padding:0; border:0; }legend,.field-label { display:block; margin-bottom:11px; font-size:11px; color:#827873; letter-spacing:.08em; }fieldset label { display:flex; gap:7px; align-items:center; font-size:12px; cursor:pointer; }input[type=radio] { accent-color:var(--accent); }.field-label select { display:block; width:100%; margin-top:9px; padding:12px 4px; border:0; border-bottom:1px solid #bfb5ab; color:var(--ink); background:transparent; }.submit-button { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:34px; padding:16px 0; border:0; border-bottom:1px solid var(--ink); color:var(--ink); background:transparent; font-size:11px; letter-spacing:.15em; cursor:pointer; }.submit-button span { font-size:20px; transition:.3s; }.submit-button:hover span { transform:translateX(8px); }.form-message { min-height:20px; margin:15px 0 0; color:var(--accent); font-size:12px; }
.reveal { opacity:0; transform:translateY(26px); transition:opacity .9s ease,transform .9s ease; }.reveal.visible { opacity:1; transform:none; }@keyframes slowZoom { from{transform:scale(1.04)} to{transform:scale(1.1)} }
@media (max-width:800px) { .chapter-nav { padding:20px 6vw; }.nav-date{display:none}.chapter { min-height:100svh; }.hero { padding:34vw 8vw 18vw; align-items:flex-end; }.hero-overlay { background:linear-gradient(0deg,rgba(10,12,14,.68),rgba(10,12,14,.08) 80%); }.hero-copy { padding-bottom:8vh; }.hero h1 { font-size:clamp(4rem,18vw,7rem); }.hero-sub{font-size:17px}.hero-caption{right:8vw;bottom:24px}.invitation { padding:24vw 8vw 18vw; }.invitation-layout { display:flex; flex-direction:column; align-items:stretch; gap:35px; }.invitation-layout .chapter-label { writing-mode:horizontal-tb; }.invitation-copy h2{font-size:clamp(3.15rem,14vw,5rem)}.names{margin:30px 0 20px}.portrait{width:64%; align-self:flex-end; margin-top:10px}.letter-chapter .chapter-label{top:20vw;left:8vw}.letter-stage{padding:30vw 8vw 10vw}.envelope{width:min(84vw,420px)}.rsvp { display:block; min-height:auto; padding:18vw 0 0; }.rsvp-photo { position:relative; height:45vh; }.rsvp-panel { margin:-10vh 6vw 0; padding:12vw 8vw 10vw; }.rsvp-panel .chapter-label{top:12vw;right:8vw} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Interaction refinements */
.envelope { overflow:hidden; transition:transform .8s ease; }
.envelope.open { overflow:visible; transform:scale(1.1); filter:none; }
.envelope .envelope-letter { visibility:hidden; opacity:0; transform:translateY(110%); }
.envelope-letter[hidden] { display:none !important; }
.envelope.open .envelope-letter { z-index:5; transform:translate(-1%, -42%); }
.envelope.open .envelope-letter { visibility:visible; opacity:1; }
.envelope-letter { align-items:center; gap:7px; padding:7% 6%; text-align:center; background:radial-gradient(circle at 0 0,rgba(172,69,68,.24),transparent 22%),radial-gradient(circle at 100% 100%,rgba(116,137,106,.25),transparent 23%),#f7f3ea; }
.letter-ornament { color:#a46f68; font-size:15px; line-height:1; }
.formal-title { font-family:var(--serif); font-size:clamp(12px,2vw,16px); letter-spacing:.18em; }
.formal-subtitle { color:#6c5d59; font-family:var(--sans); font-size:clamp(9px,1.5vw,12px); letter-spacing:.12em; }
.formal-couples { display:grid; grid-template-columns:1fr 1fr; width:100%; margin:7px 0 2px; gap:8px; }
.formal-couples > span { display:flex; flex-direction:column; gap:2px; }
.formal-couples small { color:#827873; font-size:8px; letter-spacing:.1em; }
.formal-couples strong { font-size:10px; font-weight:500; }
.formal-couples b { font-size:8px; font-weight:400; }
.formal-divider { display:flex; align-items:center; width:84%; gap:7px; color:#827873; font-size:9px; }
.formal-divider i { height:1px; flex:1; background:#bfb5ab; }
.formal-details { color:#655b57; font-size:8px; line-height:1.55; }
.formal-details strong { font-weight:600; }
.letter-chapter.focused { color:var(--ink); background:#eee7dd; }
.letter-chapter.focused .letter-backdrop { opacity:.08; }
.letter-chapter.focused .letter-stage { transform:translateY(-3vh); transition:transform .8s ease; }
.letter-chapter.focused .letter-stage .eyebrow { color:var(--accent); }
.confirmation-card { margin-top:38px; border-top:1px solid #bfb5ab; }
.confirmation-row { display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:17px 0; border-bottom:1px solid #bfb5ab; font-size:12px; }
.confirmation-row[hidden] { display:none; }
.confirmation-row span { color:#827873; }
.confirmation-row strong { color:var(--ink); font-weight:500; text-align:right; }
.confirmation-button { display:flex; align-items:center; justify-content:center; gap:13px; min-width:230px; margin:30px auto 0; padding:14px 24px; border:1px solid #718b95; border-radius:999px; color:#f9f6ef; background:#78919a; box-shadow:0 10px 20px rgba(66,81,87,.16); font:inherit; font-size:11px; letter-spacing:.13em; cursor:pointer; transition:transform .25s,box-shadow .25s,background .25s,opacity .25s; }
.confirmation-button span { font-size:18px; line-height:1; transition:transform .25s; }
.confirmation-button:hover:not(:disabled) { background:#657f89; box-shadow:0 14px 25px rgba(66,81,87,.22); transform:translateY(-2px); }
.confirmation-button:hover:not(:disabled) span { transform:translateX(4px); }
.confirmation-button:disabled { cursor:default; opacity:.48; box-shadow:none; }
.confirmation-button.acknowledged { border-color:#a9766d; color:#9e6e66; background:transparent; box-shadow:none; opacity:1; }
.confirmation-status { min-height:20px; margin:12px 0 0; color:var(--accent); font-size:12px; text-align:center; }
.confirmation-reminder { margin:26px auto 0; color:#827873; font-size:11px; line-height:1.9; text-align:center; }

/* Revealed after the guest acknowledges their attendance details. */
.line-invite[hidden] { display:none !important; }
.line-invite {
  display:grid;
  grid-template-columns:minmax(0,1fr) 148px;
  align-items:center;
  gap:24px;
  max-width:560px;
  margin:24px auto 0;
  padding:24px;
  border:1px solid rgba(113,139,149,.3);
  border-radius:3px;
  background:rgba(248,245,238,.8);
  box-shadow:0 16px 34px rgba(66,81,87,.09);
  animation:lineInviteReveal .65s ease both;
}
.line-invite-copy { min-width:0; text-align:left; }
.line-invite-kicker { margin:0 0 8px; color:#718b95; font-size:9px; letter-spacing:.2em; }
.line-invite h3 { margin:0; font-family:var(--serif); font-size:clamp(24px,2.5vw,34px); font-weight:400; line-height:1.15; }
.line-invite-copy > p:not(.line-invite-kicker) { margin:12px 0 18px; color:#746d68; font-size:11px; line-height:1.8; }
.line-join-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:12px 18px;
  border-radius:999px;
  color:#fff;
  background:#378b65;
  box-shadow:0 8px 18px rgba(55,139,101,.18);
  font-size:11px;
  letter-spacing:.08em;
  text-decoration:none;
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.line-join-button:hover { background:#287a55; box-shadow:0 11px 22px rgba(55,139,101,.24); transform:translateY(-2px); }
.line-join-button span { font-family:var(--sans); font-size:16px; line-height:1; }
.line-qr-wrap { display:flex; flex-direction:column; align-items:center; gap:7px; }
.line-qr-wrap img { display:block; width:136px; height:136px; padding:7px; border:1px solid rgba(32,35,38,.1); background:#fff; }
.line-qr-wrap small { color:#8a827c; font-size:8px; letter-spacing:.06em; text-align:center; }
@keyframes lineInviteReveal { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (max-width:800px) {
  .line-invite { grid-template-columns:1fr; gap:18px; padding:22px 20px; text-align:center; }
  .line-invite-copy { text-align:center; }
  .line-invite h3 { font-size:27px; }
  .line-invite-copy > p:not(.line-invite-kicker) { max-width:280px; margin:11px auto 17px; }
  .line-qr-wrap img { width:124px; height:124px; }
}

/* Final letter sizing: keep the invitation card larger than its content, especially on phones. */
.envelope-letter { left:2%; right:2%; bottom:5%; height:118%; gap:10px; padding:8% 7%; }
.envelope.open .envelope-letter { transform:translate(-1%, -52%); }
.formal-title { font-size:clamp(16px,2.6vw,22px); }
.formal-subtitle { font-size:clamp(11px,1.7vw,15px); }
.formal-couples small { font-size:10px; }
.formal-couples strong { font-size:13px; }
.formal-couples b { font-size:10px; }
.formal-details { font-size:11px; line-height:1.7; }
@media (max-width:800px) {
  .envelope { width:min(88vw,440px); }
  .envelope-letter { height:138%; bottom:0; padding:9% 7%; gap:11px; }
  .envelope.open .envelope-letter { transform:translate(-1%, -60%); }
  .formal-title { font-size:clamp(17px,5vw,24px); }
  .formal-subtitle { font-size:clamp(12px,3.4vw,16px); }
  .formal-couples strong { font-size:clamp(12px,3.2vw,15px); }
  .formal-details { font-size:clamp(10px,2.8vw,13px); }
}

/* Center the opened invitation card in the envelope focus view. */
.letter-chapter.focused .letter-stage { transform:translateY(0); }
.envelope.open .envelope-letter { transform:translate(-1%, 10%); }
@media (max-width:800px) {
  .envelope.open .envelope-letter { transform:translate(-1%, 10%); }
}

/* Fly the invitation out of the envelope and center it as a vertical card. */
.envelope.open { transform:none; }
.envelope.open .envelope-letter {
  position:fixed;
  z-index:100;
  left:50%;
  top:50%;
  right:auto;
  bottom:auto;
  width:min(86vw,560px);
  height:min(80vh,780px);
  min-height:520px;
  padding:8% 8%;
  transform:translate(-50%,-50%) scale(1);
  animation:letterFlyOut 1.05s cubic-bezier(.18,.8,.2,1) both;
}
@keyframes letterFlyOut {
  from { opacity:0; transform:translate(-50%,42vh) scale(.72) rotate(1.5deg); }
  to { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0); }
}
@media (max-width:800px) {
  .envelope.open .envelope-letter {
    width:min(86vw,520px);
    height:min(80vh,720px);
    min-height:480px;
    padding:10% 8%;
  }
}

/* Editorial invitation treatment: use the tall card as a composed paper design. */
.envelope.open .envelope-letter {
  gap:16px;
  padding:7% 8%;
  border:1px solid rgba(164,111,104,.22);
  box-shadow:0 24px 70px rgba(52,39,33,.18), inset 0 0 0 10px rgba(255,255,255,.22);
}
.envelope.open .envelope-letter::before {
  content:"";
  position:absolute;
  inset:22px;
  border:1px solid rgba(164,111,104,.25);
  pointer-events:none;
}
.letter-ornament { font-size:26px; }
.formal-title {
  font-size:clamp(22px,4vw,34px);
  letter-spacing:.2em;
}
.formal-subtitle {
  font-size:clamp(15px,2.5vw,20px);
  letter-spacing:.16em;
}
.formal-motto {
  color:#9a7770;
  font-family:var(--sans);
  font-size:clamp(9px,1.3vw,12px);
  letter-spacing:.18em;
  text-align:center;
}
.formal-couples {
  margin:18px 0 6px;
  gap:22px;
}
.formal-couples small { font-size:clamp(11px,1.5vw,14px); }
.formal-couples strong { font-size:clamp(17px,2.4vw,22px); }
.formal-couples b { font-size:clamp(12px,1.7vw,16px); }
.formal-divider { font-size:13px; gap:12px; }
.formal-details {
  font-size:clamp(14px,2vw,18px);
  line-height:1.9;
}
.formal-footer {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:auto;
  color:#9a7770;
  font-family:var(--serif);
  font-size:clamp(11px,1.5vw,14px);
  letter-spacing:.16em;
}
.formal-footer i { font-size:12px; font-style:normal; }
@media (max-width:800px) {
  .envelope.open .envelope-letter { gap:13px; padding:9% 8%; }
  .envelope.open .envelope-letter::before { inset:16px; }
  .formal-title { font-size:clamp(22px,6vw,30px); }
  .formal-subtitle { font-size:clamp(14px,3.8vw,18px); }
  .formal-couples { margin:13px 0 4px; gap:12px; }
  .formal-couples strong { font-size:clamp(15px,4vw,20px); }
  .formal-details { font-size:clamp(13px,3.8vw,17px); }
}

/* Give each family block a clearer two-tier hierarchy. */
.formal-couples > span { gap:5px; }
.formal-couples > span small:nth-of-type(2) {
  margin-top:14px;
  padding-top:8px;
  border-top:1px solid rgba(130,120,115,.28);
}
.formal-couples > span b { margin-top:1px; }

@media (max-width:800px) {
  .formal-couples > span small:nth-of-type(2) {
    margin-top:10px;
    padding-top:6px;
  }
}

/* Adaptive invitation artwork: landscape on wide screens, portrait on phones. */
.envelope.open .envelope-letter {
  width:min(94vw,1080px);
  height:min(82vh,680px);
  min-height:560px;
  padding:34px 42px;
  display:block;
  overflow:hidden;
}
.letter-portrait-layout { display:none; }
.letter-landscape-layout {
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(230px,.68fr);
  gap:34px;
  width:100%;
  height:100%;
  color:var(--ink);
  text-align:left;
}
.landscape-copy {
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:20px;
  min-width:0;
  height:100%;
  padding:4px 0;
}
.invite-heading {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}
.invite-heading .letter-ornament { margin-bottom:1px; }
.invite-title {
  font-family:var(--serif);
  font-size:clamp(24px,3.2vw,38px);
  letter-spacing:.2em;
  line-height:1;
  white-space:nowrap;
}
.invite-subtitle {
  color:#6c5d59;
  font-family:var(--sans);
  font-size:clamp(14px,1.6vw,18px);
  letter-spacing:.16em;
}
.invite-motto {
  color:#9a7770;
  font-family:var(--sans);
  font-size:clamp(9px,1.1vw,12px);
  letter-spacing:.12em;
  white-space:nowrap;
}
.landscape-people {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  margin:0;
  padding:13px 0;
  border-top:1px solid rgba(130,120,115,.28);
  border-bottom:1px solid rgba(130,120,115,.28);
  text-align:center;
}
.landscape-person,
.invite-person {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.landscape-person small,
.invite-person small,
.landscape-info small,
.schedule-item small {
  color:#827873;
  font-size:clamp(10px,1.1vw,13px);
  letter-spacing:.1em;
}
.landscape-person strong { font-size:clamp(16px,1.8vw,22px); font-weight:500; }
.landscape-person b,
.invite-person b { font-size:clamp(11px,1.25vw,15px); font-weight:400; }
.landscape-heart { color:#758b9a; font-size:20px; }
.landscape-rule,
.portrait-rule {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  color:#827873;
  font-size:12px;
  letter-spacing:.12em;
}
.landscape-rule i,
.portrait-rule i { height:1px; flex:1; background:#bfb5ab; }
.landscape-rule b,
.portrait-rule b { font-weight:400; white-space:nowrap; }
.landscape-info {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:0;
  text-align:center;
}
.landscape-info > span,
.schedule-item > span:last-child {
  display:flex;
  flex-direction:column;
  gap:5px;
}
.landscape-info strong { font-size:clamp(13px,1.5vw,18px); font-weight:500; }
.landscape-info b { color:#655b57; font-size:clamp(11px,1.25vw,14px); font-weight:400; line-height:1.6; }
.landscape-visual {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
  height:100%;
  padding:4px 0;
}
.landscape-visual img {
  width:100%;
  height:clamp(240px,44vh,390px);
  flex:0 1 auto;
  object-fit:cover;
  object-position:center 42%;
  border:7px solid #fff;
  box-shadow:0 8px 20px rgba(52,39,33,.14);
}
.visual-caption {
  margin-top:12px;
  color:#9a7770;
  font-family:var(--serif);
  font-size:clamp(18px,2vw,26px);
  font-style:italic;
  line-height:1;
  text-align:center;
}
.visual-caption small {
  display:block;
  margin-top:7px;
  font-family:var(--sans);
  font-size:9px;
  font-style:normal;
  letter-spacing:.24em;
}
.invite-footer {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:12px;
  color:#9a7770;
  font-family:var(--serif);
  font-size:clamp(11px,1.3vw,14px);
  letter-spacing:.16em;
  white-space:nowrap;
}
.invite-footer i { font-size:11px; font-style:normal; }

@media (max-width:800px) {
  .envelope.open .envelope-letter {
    width:min(89vw,440px);
    height:min(86vh,740px);
    min-height:620px;
    padding:30px 24px;
  }
  .letter-landscape-layout { display:none; }
  .letter-portrait-layout {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:100%;
    height:100%;
    color:var(--ink);
  }
  .invite-heading { gap:6px; }
  .invite-title { font-size:clamp(22px,6.4vw,29px); letter-spacing:.16em; }
  .invite-subtitle { font-size:clamp(13px,3.5vw,16px); letter-spacing:.12em; }
  .invite-motto { font-size:clamp(8px,2.25vw,10px); letter-spacing:.08em; }
  .portrait-people {
    display:grid;
    grid-template-columns:1fr 26px 1fr;
    align-items:center;
    gap:4px;
    margin:6px 0 2px;
  }
  .invite-face {
    width:clamp(76px,21vw,104px);
    aspect-ratio:1;
    margin-bottom:4px;
    border:3px solid #f7f3ea;
    border-radius:50%;
    background-image:none;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    box-shadow:0 5px 12px rgba(52,39,33,.18);
  }
  .groom-face { background-image:url('/photos/groom.jpg'); }
  .bride-face { background-image:url('/photos/bride.jpg'); }
  .invite-person { gap:3px; }
  .invite-person small { font-size:10px; }
  .invite-person strong { font-size:clamp(14px,4.2vw,18px); font-weight:500; }
  .invite-person b { font-size:clamp(10px,2.8vw,13px); }
  .portrait-ampersand { color:#758b9a; font-family:var(--serif); font-size:21px; text-align:center; }
  .portrait-rule { gap:8px; font-size:11px; }
  .portrait-schedule {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin:4px 0 2px;
  }
  .schedule-item { display:flex; align-items:center; gap:8px; min-width:0; }
  .schedule-icon {
    display:grid;
    flex:0 0 32px;
    place-items:center;
    width:32px;
    height:32px;
    border:1px solid rgba(130,120,115,.3);
    border-radius:50%;
    color:#758b9a;
    font-size:19px;
  }
  .schedule-item > span:last-child { gap:2px; min-width:0; }
  .schedule-item small { font-size:9px; }
  .schedule-item strong { font-size:clamp(10px,2.7vw,13px); font-weight:500; white-space:nowrap; }
  .schedule-item b { color:#655b57; font-size:clamp(9px,2.5vw,12px); font-weight:400; white-space:nowrap; }
  .portrait-address { color:#655b57; font-size:clamp(10px,2.8vw,13px); text-align:center; }
  .invite-footer { margin-top:3px; font-size:clamp(10px,2.8vw,13px); }
}

/* Complete paper-invitation details: ceremony, transport, and dress code. */
.landscape-details {
  display:grid;
  grid-template-columns:1.02fr 1.3fr .82fr;
  gap:16px;
  margin-top:-4px;
  padding-top:13px;
  border-top:1px solid rgba(130,120,115,.28);
  color:#655b57;
}
.detail-block {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width:0;
  text-align:left;
  font-size:clamp(10px,1.05vw,13px);
  line-height:1.45;
}
.detail-block small {
  margin-bottom:3px;
  color:#827873;
  font-size:clamp(10px,1.05vw,13px);
  letter-spacing:.12em;
}
.detail-block b { color:var(--ink); font-weight:500; }
.transport-block span { overflow-wrap:anywhere; }
.dress-block { align-items:center; text-align:center; }
.dress-swatches { display:flex; gap:6px; margin-top:5px; }
.dress-swatches i { width:15px; height:15px; border-radius:50%; background:#c6d9d5; }
.dress-swatches i:nth-child(2) { background:#d7e1ed; }
.dress-swatches i:nth-child(3) { background:#f7d1cf; }
.dress-swatches i:nth-child(4) { background:#f0e2ef; }
.dress-swatches i:nth-child(5) { background:#dac0d6; }
.dress-swatches i:nth-child(6) { background:#e6e7e8; }

.portrait-schedule-full { grid-template-columns:1fr 1fr; }
.portrait-schedule-full .schedule-item { align-items:flex-start; }
.portrait-schedule-full .schedule-item > span:last-child { gap:3px; }
.portrait-schedule-full .schedule-item small { letter-spacing:0; }
.portrait-address {
  display:flex;
  flex-direction:column;
  gap:2px;
  color:#655b57;
  font-size:clamp(10px,1.1vw,13px);
  line-height:1.45;
  text-align:center;
}
.portrait-address b { margin-top:3px; color:var(--ink); font-weight:500; }
.portrait-address b:first-child { margin-top:0; }
.portrait-dress {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#655b57;
  font-size:clamp(10px,1.05vw,13px);
}
.portrait-dress small { color:#827873; letter-spacing:.12em; }
.portrait-dress b { color:var(--ink); font-weight:500; }
.portrait-date {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  color:#655b57;
  font-size:clamp(10px,1.1vw,13px);
  line-height:1.45;
  text-align:center;
}
.portrait-date strong { color:var(--ink); font-weight:500; }
.portrait-date b { font-weight:400; }

@media (max-width:800px) {
  .landscape-details { display:none; }
  .portrait-schedule-full {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:4px 0 2px;
  }
  .portrait-schedule-full .schedule-item { gap:8px; }
  .portrait-schedule-full .schedule-item > span:last-child { gap:2px; }
  .portrait-schedule-full .schedule-item small { font-size:clamp(9px,2.5vw,12px); white-space:normal; }
  .portrait-schedule-full .schedule-item b { font-size:clamp(9px,2.5vw,12px); white-space:nowrap; }
  .portrait-address { font-size:clamp(9px,2.55vw,12px); line-height:1.35; }
  .portrait-address b { margin-top:3px; }
  .portrait-dress { flex-direction:column; gap:1px; font-size:clamp(9px,2.5vw,12px); }
  .portrait-dress small { font-size:clamp(9px,2.4vw,11px); }
  .portrait-date { font-size:clamp(9px,2.55vw,12px); }
}

/* Paper invitation composition — mirrors the supplied portrait and landscape reference cards. */
.envelope.open .envelope-letter {
  padding:30px 34px;
  background:radial-gradient(circle at 0 0, rgba(189,205,207,.2), transparent 27%), radial-gradient(circle at 100% 100%, rgba(210,184,173,.18), transparent 28%), #f8f5ee;
}
.envelope.open .envelope-letter::before { inset:12px; border-color:rgba(117,139,154,.33); }
.letter-landscape-layout { grid-template-columns:minmax(0,1.45fr) minmax(250px,.68fr); gap:27px; }
.landscape-copy { gap:9px; padding:6px 0 2px; }
.invite-heading { gap:6px; }
.letter-ornament { color:#748b9c; font-size:22px; }
.invite-title { font-size:clamp(23px,2.45vw,34px); letter-spacing:.18em; }
.invite-subtitle { color:#4f5150; font-size:clamp(12px,1.25vw,15px); letter-spacing:.18em; }
.invite-motto { color:#75808a; font-size:clamp(8px,.9vw,11px); letter-spacing:.11em; }
.landscape-people { padding:6px 0; border:0; gap:12px; }
.landscape-person, .invite-person { gap:3px; }
.landscape-person small, .invite-person small { font-size:clamp(9px,.95vw,12px); }
.landscape-person strong { font-size:clamp(14px,1.45vw,18px); }
.landscape-person b, .invite-person b { font-size:clamp(10px,1.02vw,13px); }
.landscape-heart { color:#718899; font-size:17px; }
.landscape-rule, .portrait-divider { color:#718899; font-size:12px; letter-spacing:0; }
.landscape-rule b, .portrait-divider b { font-weight:400; }
.event-kicker { display:block; color:#718899; font-size:clamp(10px,1vw,12px); letter-spacing:.16em; text-align:center; }
.landscape-events, .portrait-events { display:grid; grid-template-columns:1fr 1fr; }
.landscape-events { border-bottom:0; }
.event-card { display:flex; align-items:center; gap:10px; min-width:0; padding:7px 14px; }
.event-card + .event-card { border-left:1px solid rgba(117,139,154,.28); }
.event-icon { display:grid; place-items:center; flex:0 0 37px; width:37px; height:37px; border:1px solid rgba(117,139,154,.42); border-radius:50%; color:#718899; font-family:var(--serif); font-size:20px; }
.event-card > span:last-child { display:flex; flex-direction:column; gap:2px; min-width:0; }
.event-card b { color:var(--ink); font-size:clamp(10px,1vw,13px); font-weight:500; white-space:nowrap; }
.event-card em { color:#5d615f; font-size:clamp(9px,.91vw,12px); font-style:normal; line-height:1.35; white-space:nowrap; }
.landscape-bottom { display:grid; grid-template-columns:1.42fr .82fr; gap:18px; padding-top:7px; }
.landscape-transport, .landscape-dress { display:flex; flex-direction:column; gap:3px; min-width:0; color:#5d615f; font-size:clamp(8px,.78vw,11px); line-height:1.35; }
.landscape-transport small, .landscape-dress small { margin-bottom:2px; color:#718899; font-size:clamp(9px,.9vw,11px); letter-spacing:.15em; }
.landscape-transport b, .landscape-dress b { color:var(--ink); font-size:clamp(9px,.86vw,12px); font-weight:500; }
.landscape-transport em { font-style:normal; }
.landscape-dress { align-items:center; padding-left:15px; border-left:1px solid rgba(117,139,154,.28); text-align:center; }
.dress-swatches { margin-top:6px; }
.dress-swatches i { width:14px; height:14px; }
.landscape-visual { padding:4px 2px 0; }
.landscape-visual img { width:100%; height:clamp(300px,50vh,408px); border:7px solid #fff; object-position:center 42%; transform:rotate(.5deg); }
.visual-caption { margin-top:10px; color:#a46f68; font-size:clamp(17px,1.75vw,24px); }
.visual-caption small { margin-top:5px; }
.landscape-visual .invite-footer { margin-top:auto; font-size:clamp(9px,.95vw,12px); }

@media (max-width:800px) {
  .envelope.open .envelope-letter {
    width:min(90vw,455px);
    height:min(88svh,760px);
    min-height:0;
    padding:21px 24px;
  }
  .envelope.open .envelope-letter::before { inset:12px; }
  .letter-portrait-layout { gap:0; }
  .invite-heading { gap:4px; }
  .letter-ornament { font-size:18px; }
  .invite-title { font-size:clamp(20px,5.7vw,28px); letter-spacing:.14em; }
  .invite-subtitle { font-size:clamp(11px,3.1vw,15px); letter-spacing:.1em; }
  .invite-motto { font-size:clamp(7px,1.9vw,9px); letter-spacing:.05em; }
  .portrait-people { grid-template-columns:1fr 24px 1fr; gap:4px; margin:3px 0; }
  .invite-face { width:clamp(64px,18vw,82px); border:2px solid #f8f5ee; }
  .invite-person { gap:2px; }
  .invite-person small { font-size:clamp(8px,2.25vw,10px); }
  .invite-person strong { font-size:clamp(12px,3.4vw,16px); }
  .invite-person b { font-size:clamp(8px,2.25vw,10px); }
  .portrait-ampersand { color:#718899; font-size:19px; }
  .portrait-divider { display:flex; align-items:center; gap:9px; width:100%; color:#718899; font-size:11px; }
  .portrait-divider i { height:1px; flex:1; background:rgba(117,139,154,.42); }
  .event-kicker { font-size:10px; letter-spacing:.14em; }
  .portrait-events { margin:2px 0; }
  .event-card { gap:6px; padding:5px 7px; }
  .event-icon { flex-basis:30px; width:30px; height:30px; font-size:16px; }
  .event-card b { font-size:clamp(8px,2.25vw,10px); white-space:nowrap; }
  .event-card em { font-size:clamp(8px,2.15vw,10px); }
  .portrait-transport { position:relative; display:flex; flex-direction:column; gap:3px; padding-right:44px; color:#5d615f; font-size:clamp(8px,2.1vw,10px); line-height:1.32; }
  .portrait-transport > span { display:flex; flex-direction:column; gap:1px; }
  .portrait-transport b { color:var(--ink); font-size:clamp(8px,2.25vw,10px); font-weight:500; }
  .portrait-transport em { font-style:normal; }
  .floral-mark { position:absolute; right:1px; bottom:-2px; color:#8ca0a8; font-family:var(--serif); font-size:38px; font-style:normal; opacity:.72; }
  .portrait-dress { flex-direction:row; gap:7px; font-size:clamp(8px,2.1vw,10px); }
  .portrait-dress small { font-size:inherit; color:#718899; letter-spacing:.12em; }
  .portrait-dress b { font-weight:500; }
  .letter-portrait-layout > .invite-footer { margin-top:0; font-size:clamp(8px,2.15vw,10px); }
}

/* Second reference pass: the desktop card is intentionally more restrained and bottom-weighted. */
@media (min-width:801px) {
  .envelope.open .envelope-letter { padding:32px 38px; }
  .envelope.open .envelope-letter::before { inset:13px; }
  .letter-landscape-layout { grid-template-columns:minmax(0,1.5fr) minmax(248px,.66fr); gap:30px; }
  .landscape-copy { gap:7px; }
  .invite-title { font-size:clamp(22px,2.18vw,30px); letter-spacing:.16em; }
  .invite-subtitle { font-size:clamp(11px,1.12vw,14px); letter-spacing:.16em; }
  .invite-motto { font-size:clamp(8px,.82vw,10px); }
  .landscape-people { padding:5px 0 7px; }
  .landscape-person strong { font-size:clamp(13px,1.28vw,16px); }
  .landscape-person b { font-size:clamp(9px,.92vw,12px); }
  .landscape-rule { margin-top:2px; }
  .event-kicker { font-size:10px; }
  .event-card { gap:8px; padding:7px 13px; }
  .event-icon { flex-basis:34px; width:34px; height:34px; font-size:18px; }
  .event-card b { font-size:clamp(9px,.88vw,12px); }
  .event-card em { font-size:clamp(8px,.78vw,10px); }
  .landscape-bottom { margin-top:44px; padding-top:9px; }
  .landscape-transport, .landscape-dress { font-size:clamp(8px,.72vw,10px); }
  .landscape-transport b, .landscape-dress b { font-size:clamp(9px,.8vw,11px); }
  .landscape-visual { position:relative; padding-top:12px; }
  .landscape-visual::before { content:""; position:absolute; z-index:1; top:1px; left:50%; width:72px; height:19px; transform:translateX(-50%) rotate(5deg); background:rgba(217,204,184,.84); box-shadow:0 1px 1px rgba(52,39,33,.08); }
  .landscape-visual img { width:min(92%,286px); height:370px; margin:0 auto; border:9px solid #fff; object-position:24% 44%; transform:rotate(.7deg); box-shadow:0 9px 20px rgba(52,39,33,.16); }
  .visual-caption { margin-top:13px; font-size:21px; }
  .landscape-visual .invite-footer { margin-top:auto; }
}

/* Mobile portrait invitation — match the paper invitation's 2:3 composition. */
@media (max-width:800px) {
  .envelope.open .envelope-letter {
    width:min(88vw, 420px, 62dvh);
    height:auto;
    min-height:0;
    max-height:calc(100dvh - 36px);
    aspect-ratio:2 / 3;
    padding:clamp(18px, 5.5vw, 27px) clamp(18px, 6vw, 28px);
    background:
      radial-gradient(circle at 8% 4%, rgba(197, 212, 214, .26), transparent 25%),
      radial-gradient(circle at 92% 92%, rgba(219, 190, 181, .2), transparent 27%),
      #f8f5ee;
  }
  .envelope.open .envelope-letter::before { inset:11px; }
  .letter-portrait-layout {
    justify-content:space-between;
    padding:3px 6px 2px;
  }
  .invite-heading { gap:5px; }
  .letter-ornament { font-size:20px; }
  .invite-title { font-size:clamp(21px, 6vw, 29px); letter-spacing:.16em; }
  .invite-subtitle {
    font-size:clamp(10px, 2.8vw, 13px);
    letter-spacing:.08em;
    white-space:nowrap;
  }
  .invite-motto { font-size:clamp(7px, 2vw, 9px); letter-spacing:.07em; }
  .portrait-people {
    grid-template-columns:1fr 28px 1fr;
    gap:7px;
    margin:6px 0 4px;
  }
  .invite-face { width:clamp(68px, 19.5vw, 88px); border-width:2px; }
  .invite-person { gap:2px; }
  .invite-person small { font-size:clamp(8px, 2.25vw, 10px); }
  .invite-person strong { font-size:clamp(12px, 3.55vw, 16px); }
  .invite-person b { font-size:clamp(8px, 2.3vw, 10px); }
  .portrait-divider { gap:10px; margin:1px 0; font-size:11px; }
  .event-kicker { margin:1px 0 2px; font-size:10px; }
  .portrait-events { margin:0; }
  .event-card { gap:7px; padding:6px 5px; }
  .event-icon { flex-basis:32px; width:32px; height:32px; font-size:17px; }
  .event-card b { font-size:clamp(8px, 2.2vw, 10px); }
  .event-card em { font-size:clamp(8px, 2.1vw, 10px); line-height:1.3; }
  .portrait-transport { gap:4px; padding:1px 47px 0 1px; font-size:clamp(8px, 2.1vw, 10px); line-height:1.35; }
  .portrait-transport > span { gap:2px; }
  .portrait-transport b { font-size:clamp(8px, 2.2vw, 10px); }
  .floral-mark { right:0; bottom:1px; font-size:43px; opacity:.62; }
  .portrait-dress {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:3px 7px;
    padding-top:2px;
  }
  .portrait-dress .dress-swatches { display:flex; gap:5px; margin:0; }
  .portrait-dress .dress-swatches i { width:11px; height:11px; }
  .letter-portrait-layout > .invite-footer {
    margin-top:2px;
    color:#718899;
    font-size:clamp(8px, 2.15vw, 10px);
    letter-spacing:.19em;
  }
}

/* Portrait-card refinements: balanced names, centered travel information, and line icons. */
.event-symbol {
  width:74%;
  height:74%;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2.5;
}
@media (max-width:800px) {
  .groom-face {
    background-size:190%;
    background-position:69% 47%;
  }
  .portrait-transport {
    width:100%;
    align-items:center;
    padding-right:47px;
    padding-left:47px;
    text-align:center;
  }
  .portrait-transport > span { align-items:center; }
  .portrait-events .event-card { gap:8px; padding:6px 4px; }
  .portrait-events .event-icon {
    flex-basis:40px;
    width:40px;
    height:40px;
  }
  .portrait-events .event-symbol { width:78%; height:78%; stroke-width:2.4; }
}

/* Safari: prevent the legacy transform transition from running before the fly-out. */
.envelope .envelope-letter { transition:none !important; }
.envelope.open .envelope-letter { animation:none !important; }
.envelope.open.is-opening .envelope-letter { animation:letterFlyOut 1.05s cubic-bezier(.18,.8,.2,1) both !important; }
.envelope.open:not(.is-opening) .envelope-letter {
  opacity:1;
  transform:translate(-50%,-50%) scale(1) rotate(0);
}

/* Desktop paper: proportion and type hierarchy matched to the horizontal reference. */
@media (min-width:801px) {
  .envelope.open .envelope-letter {
    width:min(94vw,1080px);
    height:min(77vh,620px);
    min-height:560px;
    padding:30px 36px;
  }
  .envelope.open .envelope-letter::before { inset:12px; border-color:rgba(105,128,143,.33); }
  .letter-landscape-layout { grid-template-columns:minmax(0,1.48fr) minmax(245px,.64fr); gap:32px; }
  .landscape-copy { display:flex; gap:0; padding:6px 0 0; }
  .invite-heading { gap:7px; }
  .letter-ornament { font-size:23px; }
  .invite-title { font-size:clamp(25px,2.55vw,34px); letter-spacing:.17em; }
  .invite-subtitle { font-size:clamp(13px,1.28vw,16px); letter-spacing:.16em; }
  .invite-motto { font-size:clamp(9px,.95vw,11px); letter-spacing:.11em; }
  .landscape-people { margin-top:13px; padding:5px 0 8px; }
  .landscape-person { gap:4px; }
  .landscape-person small { font-size:clamp(10px,1vw,12px); }
  .landscape-person strong { font-size:clamp(16px,1.55vw,20px); }
  .landscape-person b { font-size:clamp(11px,1.05vw,14px); }
  .landscape-heart { font-size:18px; }
  .landscape-rule { margin-top:7px; }
  .event-kicker { margin:8px 0 4px; font-size:clamp(10px,.95vw,12px); }
  .landscape-events { min-height:82px; }
  .event-card { gap:10px; padding:10px 14px; }
  .event-icon { flex-basis:38px; width:38px; height:38px; font-size:20px; }
  .event-card b { font-size:clamp(11px,1.02vw,13px); }
  .event-card em { font-size:clamp(10px,.92vw,12px); line-height:1.4; }
  .landscape-bottom { margin-top:auto; grid-template-columns:1.35fr .92fr; gap:22px; min-height:115px; padding:17px 4px 4px; border-top:1px solid rgba(105,128,143,.28); }
  .landscape-transport, .landscape-dress { gap:4px; font-size:clamp(10px,.9vw,12px); line-height:1.45; }
  .landscape-transport small, .landscape-dress small { font-size:clamp(10px,.95vw,12px); }
  .landscape-transport b, .landscape-dress b { font-size:clamp(11px,1.02vw,13px); }
  .landscape-dress { padding-left:22px; }
  .dress-swatches { margin-top:8px; }
  .dress-swatches i { width:16px; height:16px; }
  .landscape-visual { padding-top:8px; }
  .landscape-visual::before { top:-2px; width:74px; height:20px; }
  .landscape-visual img { width:min(92%,270px); height:348px; border-width:10px; object-position:18% 48%; filter:saturate(.78) contrast(.94) brightness(1.02); }
  .visual-caption { margin-top:12px; font-size:23px; }
  .visual-caption small { font-size:9px; }
}

/* Close the central gap and vertically center the desktop polaroid. */
@media (min-width:801px) {
  .landscape-copy { justify-content:flex-start; }
  .invite-title { font-size:clamp(30px,3vw,38px); letter-spacing:.16em; }
  .invite-subtitle { font-size:clamp(15px,1.45vw,18px); }
  .invite-motto { font-size:clamp(10px,1vw,12px); }
  .landscape-people { margin-top:11px; padding-bottom:10px; }
  .landscape-person small { font-size:clamp(11px,1.08vw,13px); }
  .landscape-person strong { font-size:clamp(18px,1.75vw,22px); }
  .landscape-person b { font-size:clamp(12px,1.12vw,15px); }
  .landscape-rule { margin-top:8px; }
  .event-kicker { margin:8px 0 5px; font-size:clamp(11px,1.05vw,13px); }
  .landscape-events { min-height:92px; }
  .event-card { gap:11px; padding:12px 15px; }
  .event-icon { flex-basis:42px; width:42px; height:42px; font-size:22px; }
  .event-card b { font-size:clamp(12px,1.15vw,15px); }
  .event-card em { font-size:clamp(11px,1.02vw,13px); }
  .landscape-bottom { margin-top:18px; min-height:0; padding:16px 5px 4px; }
  .landscape-transport, .landscape-dress { font-size:clamp(11px,1vw,13px); line-height:1.45; }
  .landscape-transport small, .landscape-dress small { font-size:clamp(11px,1.05vw,13px); }
  .landscape-transport b, .landscape-dress b { font-size:clamp(12px,1.12vw,15px); }
  .landscape-visual { justify-content:center; padding:0 0 10px; }
  .landscape-visual::before { top:28px; }
  .landscape-visual img { margin:0 auto; transform:translateY(30px) rotate(.7deg); }
  .landscape-visual .visual-caption { transform:translateY(30px); }
  .landscape-visual .invite-footer { position:absolute; right:0; bottom:0; left:0; margin:0; }
}

/* Keep the opening invitation heading refined and on two intentional lines on desktop. */
@media (min-width:801px) {
  .invitation-copy h2 {
    font-size:clamp(3.25rem, 4vw, 5.25rem);
    letter-spacing:-.035em;
    white-space:nowrap;
  }
}

/* Venue travel guide */
.transport {
  padding:clamp(86px, 10vw, 150px) 8vw;
  background:linear-gradient(120deg, #d5e1e0 0%, #f3efe8 52%, #ead9ce 100%);
}
.transport-layout {
  display:grid;
  grid-template-columns:auto minmax(240px, .72fr) minmax(330px, 1.12fr);
  align-items:center;
  gap:clamp(30px, 5vw, 78px);
  width:min(1180px, 100%);
  min-height:calc(100svh - clamp(170px, 18vw, 250px));
  margin:0 auto;
}
.transport-copy { max-width:390px; }
.transport-copy h2 { font-size:clamp(4.2rem, 7vw, 7rem); }
.transport-copy h2 em { color:var(--accent); }
.transport-copy > p:not(.eyebrow) {
  margin:30px 0 0;
  color:#555956;
  font-size:clamp(14px, 1.2vw, 17px);
  line-height:2;
}
.transport-copy .transport-address { margin-top:8px; font-weight:600; }
.transport-note {
  display:block;
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid rgba(92, 105, 103, .35);
  color:#718899;
  font-size:12px;
  letter-spacing:.07em;
  line-height:1.9;
}
.parking-notes {
  margin-top:26px;
  padding:16px 18px 15px;
  border-left:2px solid rgba(176, 119, 109, .72);
  background:rgba(255, 252, 247, .45);
  color:var(--ink);
  font-size:13px;
  line-height:1.7;
}
.parking-notes strong {
  display:block;
  margin-bottom:6px;
  color:var(--rose);
  font-size:11px;
  letter-spacing:.16em;
}
.parking-notes p { margin:4px 0 0; }
.venue-map { margin:0; }
.venue-map img {
  display:block;
  width:min(100%, 540px);
  max-height:72svh;
  margin:0 auto;
  border:10px solid #fffdf9;
  box-shadow:0 18px 40px rgba(55, 66, 63, .2);
  object-fit:contain;
}
.venue-map figcaption {
  margin-top:12px;
  color:#727976;
  font-family:var(--serif);
  font-size:12px;
  font-style:italic;
  text-align:right;
}

@media (max-width:800px) {
  .transport { padding:114px 7vw 72px; }
  .transport-layout {
    display:grid;
    grid-template-columns:1fr;
    gap:28px;
    min-height:0;
  }
  .transport-layout .chapter-label { writing-mode:horizontal-tb; }
  .transport-copy { max-width:none; }
  .transport-copy h2 { font-size:clamp(3.5rem, 16vw, 5.5rem); }
  .transport-copy > p:not(.eyebrow) { margin-top:22px; font-size:14px; }
  .transport-note { margin-top:20px; }
  .parking-notes { margin-top:20px; padding:14px 15px; font-size:12px; }
  .venue-map img { width:100%; max-height:none; border-width:7px; }
  .venue-map figcaption { font-size:11px; }
}