/* Tú & Minh Anh — thiệp cưới online
   Layout: phone = one paper column (max 440px); iPad portrait = full-bleed paper with a 760px reading column
   and larger type; desktop / iPad landscape = split screen, a fixed photo panel on the left that changes
   with each part of the page, the invitation scrolling on the right.
   Principles: light linen paper, sage ink, photographic white flowers taken from the envelope,
   one recurring shape (the arch), an autumn wind that carries seeds, reed fluff and petals across. */
:root {
  --paper: #F6F6F1;        /* linen page */
  --paper-deep: #E6E9DF;   /* surround behind the phone column */
  --card: #FBFBF8;         /* raised surfaces: form, venue, sheet cards */
  --sage: #4E5D3C;         /* names, headings, primary ink */
  --sage-soft: #8A9677;    /* icons, outlines */
  --ink: #45493E;          /* running text */
  --muted: #6A6F5F;        /* captions, labels */
  --line: #CDD3C2;         /* hairlines */
  --line-soft: rgba(205, 211, 194, .7); /* section dividers */
  --field-line: #878F78;   /* form outlines (3:1 on paper) */
  --placeholder: #737868;  /* example text in fields (4.2:1) */
  --wax: #3E3D39;          /* seal charcoal: solid buttons */
  --error: #96402F;
  --font-display: "Noto Serif Display", "Didot", "Times New Roman", serif;
  --font-body: "EB Garamond", "Garamond", Georgia, serif;
  --font-script: "Great Vibes", "Snell Roundhand", "Segoe Script", cursive;
  --col: 440px;
  --stage: 0px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .28 0 0 0 0 .31 0 0 0 0 .24 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --gust-l: 0;
  --gust-r: 0;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--paper-deep) var(--grain);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html.is-locked, html.is-locked body { overflow: hidden; }
img { max-width: 100%; display: block; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
main:focus { outline: none; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }

/* ---------- paper column ---------- */
.paper {
  position: relative;
  max-width: var(--col);
  margin-inline: auto;
  background: var(--paper) var(--grain);
  overflow: hidden;
  overflow: clip;
}
@media (min-width: 520px) and (max-width: 699px), (min-width: 520px) and (max-width: 1023px) and (max-height: 520px) {
  .paper { box-shadow: 0 0 0 1px rgba(78, 93, 60, .06), 0 30px 80px rgba(60, 68, 48, .14); }
}

/* ---------- wind canvas ---------- */
.wind { position: fixed; inset: 0; z-index: 45; pointer-events: none; transition: opacity .6s ease; }
.env-on .wind { z-index: 101; }
.is-typing .wind { opacity: .25; }

/* ---------- shared type ---------- */
.script-title {
  font-family: var(--font-script);
  font-size: 50px;
  line-height: 1.2;
  color: var(--sage);
  text-align: center;
  text-wrap: balance;
}
.section-note {
  font-style: italic;
  color: var(--muted);
  max-width: 30ch;
  margin: 6px auto 0;
  text-wrap: balance;
}
.small-caps {
  text-wrap: balance;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}
.script { font-family: var(--font-script); }
.script, .script-title, .env-greet, .env-name, .cover__kicker, .invite__guest, .portrait__caption, .family h3,
.story__quote, .closing__line, .gift-pick__title, .gift-card__family, .stage__names { word-spacing: .12em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px;
  border-radius: 999px;
  font-family: var(--font-body); font-weight: 500; font-size: 16px; letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .25s, color .25s, border-color .25s, transform .2s;
}
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--solid { background: var(--wax); color: var(--paper); }
.btn--solid:hover { background: #2f2e2b; }
.btn--line { background: transparent; color: var(--sage); border-color: var(--sage); }
.btn--line:hover { background: rgba(78, 93, 60, .07); }
.btn--wide { width: 100%; min-height: 52px; }

.photo-btn {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  overflow: hidden;
}
.photo-btn img { width: 100%; height: auto; transition: transform .8s var(--ease); }
@media (hover: hover) { .photo-btn:hover img { transform: scale(1.025); } }
.arch { border-radius: 50% 50% 3px 3px / 37.5% 37.5% 3px 3px; }

/* ---------- envelope opening screen ---------- */
.envelope { display: none; }
.env-on .envelope {
  display: block;
  position: fixed; inset: 0; z-index: 100;
  background: var(--paper) var(--grain);
  overflow: hidden auto; overscroll-behavior: contain;
  transition: opacity .7s ease .5s;
  /* room left for the envelope once greeting, name and button are placed (main.js refines it) */
  --env-fit: calc((100vh - 300px) * 892 / 843);
  --env-fit: calc((100svh - 300px) * 892 / 843);
}
.envelope__inner {
  container-type: inline-size;
  min-height: 100%;
  max-width: 620px;
  margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: calc(env(safe-area-inset-top, 0px) + 64px) 20px calc(env(safe-area-inset-bottom, 0px) + 40px);
  text-align: center;
}
.env-greet {
  font-family: var(--font-script); font-size: 40px; font-size: clamp(32px, min(9cqw, 5.6svh), 46px); line-height: 1.1;
  color: var(--ink);
}
.env-name {
  font-family: var(--font-script); font-weight: 400;
  font-size: 60px; font-size: clamp(48px, min(15cqw, 9.6svh), 84px); line-height: 1.12;
  color: var(--sage);
  text-wrap: balance;
  max-width: 96%;
  padding-bottom: .06em;
}
.env-stage {
  display: block;
  position: relative;
  flex: none;
  width: min(112%, 560px, max(220px, var(--env-fit)));
  aspect-ratio: 892 / 843;
  margin: -3% 0 1%;
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.env-piece { position: absolute; inset: 0; display: block; }
.env-piece img { width: 100%; height: 100%; }
.env-hint {
  position: absolute; left: 44.95%; top: 54.45%; width: 11.66%; height: 12.34%;
  border-radius: 50%;
  pointer-events: none;
}
.env-hint::before, .env-hint::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .85);
  box-shadow: 0 0 12px rgba(255, 255, 255, .5);
  opacity: 0;
  animation: seal-ping 2.6s ease-out 2s infinite;
}
.env-hint::after { animation-delay: 2.65s; }
@keyframes seal-ping {
  0% { transform: scale(1); opacity: .9; }
  80%, 100% { transform: scale(2.1); opacity: 0; }
}
.env-open {
  min-height: 58px; padding: 0 44px;
  border: 0; border-radius: 999px;
  background: var(--wax); color: var(--paper);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(62, 61, 57, .22);
}
.env-open span { display: block; font-family: var(--font-script); font-size: 32px; line-height: 1; transform: translateY(3px); }
.env-open:active { transform: scale(.97); }

.env-layer { opacity: 0; }
.envelope.is-ready .env-layer {
  animation: env-rise-up .9s var(--ease) both;
  animation-delay: var(--d, 0s);
}
.envelope.is-exiting { opacity: 0; pointer-events: none; }
.envelope.is-exiting .env-layer {
  opacity: 1;
  animation: env-rise-away .7s var(--ease) both;
  animation-delay: calc(var(--d, 0s) * .42);
}
.envelope.is-exiting .env-hint { display: none; }
@keyframes env-rise-up { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes env-rise-away { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-34px); } }

/* flowers sway on their own and bend when a gust passes (transform + rotate compose) */
.sway--left { transform-origin: 19% 31%; animation: sway 7s ease-in-out 1.6s infinite; rotate: calc(var(--gust-l) * 3deg); }
.sway--right { transform-origin: 82% 75%; animation: sway 8s ease-in-out 1.9s infinite reverse; rotate: calc(var(--gust-r) * 2.4deg); }
@keyframes sway {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(1.4deg); }
  70% { transform: rotate(-1.1deg); }
}

/* ---------- floating controls ---------- */
.controls {
  position: fixed; top: 0; bottom: 0; left: 50%; z-index: 50;
  width: min(100%, var(--col));
  transform: translateX(-50%);
  pointer-events: none;
}
.ctl {
  position: absolute; pointer-events: auto;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ctl svg { width: 20px; height: 20px; }
.ctl--music { top: calc(env(safe-area-inset-top, 0px) + 60px); right: 14px; width: 46px; height: 46px; background: none; }
.ctl--scroll {
  top: calc(env(safe-area-inset-top, 0px) + 17px); left: 14px; width: 40px; height: 40px;
  background: rgba(251, 251, 248, .88); color: var(--sage);
  box-shadow: 0 0 0 1px var(--line), 0 6px 16px rgba(60, 68, 48, .12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ctl--scroll::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.ctl--scroll .ico-play { display: none; }
.ctl--scroll.is-paused .ico-play { display: block; }
.ctl--scroll.is-paused .ico-pause { display: none; }
.ctl--gift {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); right: 16px; width: 52px; height: 52px;
  background: var(--wax); color: var(--paper);
  box-shadow: 0 10px 24px rgba(62, 61, 57, .28);
  animation: wobble 7s ease-in-out 4s infinite;
  animation-play-state: paused;
}
.ctl--gift svg { width: 23px; height: 23px; }
.is-open .ctl--gift { animation-play-state: running; }
@keyframes wobble {
  0% { transform: scale(1); }
  1.5%, 3% { transform: scale(.92) rotate(-3deg); }
  4.5%, 7.5%, 10.5% { transform: scale(1.08) rotate(3deg); }
  6%, 9% { transform: scale(1.08) rotate(-3deg); }
  12.5%, 100% { transform: scale(1) rotate(0); }
}
.vinyl {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--sage) 0 27%, #2e2d2a 28% 30%, transparent 31%),
    repeating-radial-gradient(circle, #34332f 0 1.4px, #45443f 1.4px 2.8px);
  box-shadow: 0 6px 16px rgba(40, 42, 36, .28), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.vinyl::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(130deg, rgba(255,255,255,.18), transparent 40%, transparent 60%, rgba(255,255,255,.08));
}
.vinyl svg { width: 34%; height: auto; aspect-ratio: 1072 / 1020; color: var(--paper); }
.ctl--music.is-playing .vinyl { animation: spin 5s linear infinite; }
.ctl--music:not(.is-playing) .vinyl { filter: grayscale(.4); opacity: .78; }
.ctl--music:not(.is-playing)::after {
  content: ""; position: absolute; width: 62%; height: 1.5px; border-radius: 2px;
  background: var(--paper); box-shadow: 0 0 0 1px rgba(62,61,57,.5);
  transform: rotate(-45deg);
}
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- language flags (top-right, above everything incl. the envelope) ---------- */
.langs {
  position: fixed; z-index: 120;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: max(14px, calc((100vw - var(--col)) / 2 + 14px));
  display: flex;
  border-radius: 999px;
  background: rgba(251, 251, 248, .82);
  box-shadow: 0 0 0 1px var(--line), 0 6px 16px rgba(60, 68, 48, .10);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .35s ease, transform .45s var(--ease), visibility 0s linear 0s;
}
.langs.is-tucked, .has-dialog .langs {
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .3s ease, transform .4s var(--ease), visibility 0s linear .4s;
}
.lang {
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lang:focus-visible { outline-offset: -2px; }
.lang__flag {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
  opacity: .86; transform: scale(.82);
  transition: opacity .25s, transform .25s var(--ease), box-shadow .25s;
}
.lang svg { display: block; width: 100%; height: 100%; }
.lang[aria-pressed="true"] .lang__flag { opacity: 1; transform: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--sage); }
.lang:hover .lang__flag { opacity: 1; transform: scale(.9); }

/* ---------- reveal on scroll ---------- */
.reveal-on [data-reveal].is-armed {
  opacity: 0;
  transition: opacity var(--dur, 1.3s) ease-out var(--delay, 0s), transform var(--dur, 1.3s) ease-out var(--delay, 0s);
}
.reveal-on [data-reveal="slide-up"].is-armed { transform: translateY(50px); }
.reveal-on [data-reveal="slide-left"].is-armed { transform: translateX(50px); }
.reveal-on [data-reveal="slide-right"].is-armed { transform: translateX(-50px); }
.reveal-on [data-reveal].is-armed.is-visible { opacity: 1; transform: none; }

/* ---------- side panel (desktop / iPad landscape only) ---------- */
.stage { display: none; }

/* ---------- cover ---------- */
.cover {
  position: relative;
  min-height: min(92vh, 780px);
  min-height: min(92svh, 780px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 104px 24px 72px;
  text-align: center;
}
.bloom { position: absolute; pointer-events: none; height: auto; }
.bloom--tl { top: -34px; left: -30px; width: 37%; transform-origin: 32% 62%; rotate: calc(-14deg + var(--gust-l) * 5deg); }
.bloom--br { bottom: -6px; right: -24px; width: 37%; transform-origin: 66% 70%; rotate: calc(8deg + var(--gust-r) * 4deg); }
.cover__kicker { font-family: var(--font-script); font-size: 40px; line-height: 1.2; color: var(--sage); }
.cover__names {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(40px, 12.6vw, 54px);
  line-height: 1.12; letter-spacing: .035em;
  text-transform: uppercase;
  color: var(--sage);
  display: flex; flex-direction: column; align-items: center;
  margin-top: 6px;
}
.cover__names .amp {
  font-family: var(--font-script); text-transform: none; letter-spacing: 0;
  font-size: 1.2em; line-height: .95; margin: 0 0 -2px;
  color: var(--sage-soft);
}
.cover__date {
  display: flex; align-items: center; gap: 14px;
  margin-top: 22px;
  font-weight: 500; font-size: 14px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink);
}
.cover__rule { width: 34px; height: 1px; background: var(--sage-soft); }

/* ---------- portrait: vertical date + arch ---------- */
.portrait {
  display: grid;
  grid-template-columns: 27% 1fr;
  align-items: center;
  column-gap: 16px;
  padding: 44px 28px 72px 22px;
}
.portrait__date {
  display: flex; flex-direction: column; align-items: center;
  padding-right: 14px;
  border-right: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(50px, 16vw, 70px); line-height: 1.02;
  font-variant-numeric: lining-nums;
  color: var(--sage);
}
.portrait__photo { position: relative; margin: 0; padding: 0 0 14px 14px; }
.arch-line {
  position: absolute; left: 0; bottom: 0; right: 14px; top: -14px;
  border: 1px solid var(--sage-soft);
  border-radius: 50% 50% 3px 3px / 37.5% 37.5% 3px 3px;
  pointer-events: none;
}
.portrait__photo .photo-btn { position: relative; aspect-ratio: 3 / 4; }
.portrait__photo .photo-btn img { height: 100%; object-fit: cover; object-position: 50% 62%; }
.portrait__caption {
  grid-column: 1 / -1;
  margin-top: 26px;
  text-align: center;
  font-family: var(--font-script); font-size: 34px; line-height: 1.2;
  color: var(--sage);
}

/* ---------- invitation ---------- */
.invite { padding: 24px 30px 80px; text-align: center; }
.invite__lead { font-weight: 500; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink); }
.invite__guest {
  margin-top: 10px;
  font-family: var(--font-script); font-size: 44px; line-height: 1.2;
  color: var(--sage);
  text-wrap: balance;
}
.invite__text { margin: 12px auto 0; max-width: 28ch; text-wrap: balance; }
.invite__couple { display: flex; flex-direction: column; align-items: center; margin-top: 18px; }
.invite__couple .script { font-size: 58px; line-height: 1.15; color: var(--sage); }
.tiny-heart { width: 16px; height: 15px; color: var(--sage-soft); margin: 2px 0; }
.invite__when, .invite__where { margin-top: 30px; display: grid; gap: 4px; }
.invite__day {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(21px, 6.5vw, 25px); line-height: 1.25;
  letter-spacing: .01em; color: var(--sage); text-wrap: balance;
}
.invite__lunar { font-style: italic; color: var(--muted); font-size: 17px; }
.invite__venue {
  font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.3;
  letter-spacing: .04em; text-transform: uppercase; color: var(--sage);
}
.divider { display: block; width: 120px; height: 16px; margin: 40px auto 30px; color: var(--sage-soft); }
.families {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 24px 18px;
}
.family h3 { font-family: var(--font-script); font-size: 38px; line-height: 1.1; color: var(--sage); margin-bottom: 6px; }
.family p { font-size: 16.5px; line-height: 1.5; }
.family .role {
  display: block;
  font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); line-height: 1.6;
}
.family p + p { margin-top: 6px; }
.family .family__child { margin-top: 10px; font-style: italic; }

/* ---------- save the date ---------- */
.date { padding: 72px 26px 80px; text-align: center; border-top: 1px solid var(--line-soft); }
.date__month { margin-top: 4px; font-weight: 500; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; }
.cal { max-width: 336px; margin: 26px auto 0; }
.cal__head, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__head { font-weight: 500; font-size: 13px; letter-spacing: .06em; color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.cal__grid { row-gap: 4px; }
.cal__day {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1; font-size: 17px; font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
}
.cal__day--muted { color: transparent; }
.cal__day--weekend { color: var(--sage); }
.cal__day--wed { color: var(--paper); font-weight: 500; }
.cal__day--wed svg {
  position: absolute; left: 50%; top: 50%; width: 118%; height: 106%;
  transform: translate(-50%, -46%);
  color: var(--sage); z-index: 0;
  animation: beat 2.4s ease-in-out infinite;
}
.cal__day--wed span { position: relative; z-index: 1; }
@keyframes beat {
  0%, 60%, 100% { transform: translate(-50%, -46%) scale(1); }
  20% { transform: translate(-50%, -46%) scale(1.09); }
  35% { transform: translate(-50%, -46%) scale(1.02); }
}
.countdown { margin-top: 38px; }
.countdown__label { font-style: italic; color: var(--muted); }
.countdown__row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 340px; margin: 12px auto 0;
}
.countdown__row div { display: grid; gap: 2px; padding: 4px 0; }
.countdown__row div + div { border-left: 1px solid var(--line); }
.countdown__row b {
  font-family: var(--font-display); font-weight: 300; font-size: 38px; line-height: 1.1;
  font-variant-numeric: tabular-nums lining-nums; color: var(--sage);
}
.countdown__row span { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* ---------- timeline ---------- */
.timeline { padding: 72px 24px 80px; text-align: center; }
.tl { list-style: none; margin: 30px auto 0; padding: 0; max-width: 330px; position: relative; }
.tl::before {
  content: ""; position: absolute; left: 50%; top: 40px; bottom: 40px; width: 1px;
  background: var(--line);
}
.tl__item { display: grid; grid-template-columns: 1fr 72px 1fr; align-items: center; padding: 12px 0; }
.tl__item time {
  text-align: right; padding-right: 16px;
  font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 1;
  font-variant-numeric: tabular-nums lining-nums; color: var(--sage);
}
.tl__icon {
  position: relative; z-index: 1;
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--sage);
}
.tl__icon svg { width: 44px; height: 44px; }
.tl__label { text-align: left; padding-left: 16px; font-size: 19px; line-height: 1.3; }

/* ---------- venue ---------- */
.venue { padding: 24px 24px 80px; text-align: center; }
.venue__card {
  margin: 22px auto 0;
  max-width: 560px;
  padding: 0 0 30px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 50% 50% 8px 8px / 150px 150px 8px 8px;
  overflow: hidden;
}
.venue__photo { position: relative; margin: 0; aspect-ratio: 1580 / 1256; overflow: hidden; }
.venue__photo img { width: 100%; height: 100%; object-fit: cover; }
.venue__photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(to bottom, rgba(251, 251, 248, 0), var(--card));
}
.venue__body { position: relative; margin-top: -34px; padding: 0 22px; }
.venue__pin { width: 30px; height: 30px; color: var(--sage-soft); margin: 0 auto 10px; display: block; }
.venue__name {
  font-family: var(--font-display); font-weight: 300; font-size: 24px; line-height: 1.25;
  letter-spacing: .03em; text-transform: uppercase; color: var(--sage);
}
.venue__addr { margin-top: 10px; text-wrap: balance; }
.venue__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 24px auto 0; max-width: 380px; }
.venue__actions .btn { padding: 0 10px; font-size: 15.5px; white-space: nowrap; }
.venue__ics {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px;
  font-size: 15.5px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line);
}

/* ---------- story ---------- */
.story { padding: 72px 0 84px; border-top: 1px solid var(--line-soft); }
.story .script-title { padding-inline: 24px; }
:where(.story) figure { margin: 0; }
.story__wide { margin-top: 26px; }
.story__text { padding: 30px 30px 0; display: grid; gap: 14px; }
.story__text p { line-height: 1.7; text-wrap: pretty; }
.story__pair {
  display: grid; grid-template-columns: 60% 1fr; align-items: start;
  padding: 34px 22px 0 24px;
}
.story__pair.story__pair--solo { grid-template-columns: minmax(0, 62%); justify-content: center; padding-inline: 24px; }
.story__tall .photo-btn { aspect-ratio: 2 / 3; }
.story__tall .photo-btn img { height: 100%; object-fit: cover; }
.story__quote {
  padding: 40px 28px 0; text-align: center;
  font-family: var(--font-script); font-size: 38px; line-height: 1.25; color: var(--sage);
  text-wrap: balance;
}

/* ---------- story: engagement milestone ---------- */
.story__engage {
  display: grid; grid-template-columns: 56% 1fr; align-items: center; gap: 0 18px;
  padding: 44px 24px 0;
}
.story__engage-photo { margin: 0; }
.story__engage-photo .photo-btn { aspect-ratio: 2 / 3; border-radius: 3px; }
.story__engage-photo .photo-btn img { height: 100%; object-fit: cover; }
.milestone { text-align: left; }
.milestone__label {
  font-family: var(--font-script); font-size: 34px; line-height: 1.15; color: var(--sage);
  word-spacing: .12em;
}
.milestone__date {
  display: flex; flex-direction: column; margin-top: 8px;
  padding-left: 12px; border-left: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 300; font-size: 44px; line-height: 1.02;
  font-variant-numeric: lining-nums; color: var(--sage);
}
.milestone__date span:last-child { font-size: .6em; letter-spacing: .08em; margin-top: 4px; }
.milestone--wedding { text-align: center; padding: 48px 24px 0; }
.milestone--wedding .milestone__date { flex-direction: row; justify-content: center; gap: 14px; border: 0; padding: 0; }
.milestone--wedding .milestone__date span:last-child { font-size: 1em; letter-spacing: 0; margin: 0; }
.milestone--wedding .milestone__date span + span::before { content: "·"; margin-right: 14px; color: var(--sage-soft); }

/* ---------- album ---------- */
.album { padding: 72px 18px 84px; border-top: 1px solid var(--line-soft); }
.album__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px auto 0; max-width: 700px; }
.album__col { display: grid; gap: 12px; align-content: start; }
.album__col--offset { margin-top: 48px; }
.album__item { aspect-ratio: 2 / 3; border-radius: 3px; }
.album__item img { height: 100%; object-fit: cover; }

/* ---------- rsvp ---------- */
.rsvp { padding: 72px 22px 64px; text-align: center; border-top: 1px solid var(--line-soft); }
.form {
  margin: 26px auto 0; text-align: left;
  max-width: 560px;
  display: grid; gap: 20px;
  padding: 24px 20px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend { font-weight: 500; font-size: 15.5px; color: var(--ink); padding: 0; }
.field > legend { margin-bottom: 8px; }
.opt { font-weight: 400; color: var(--muted); }
.field input[type="text"], .field textarea {
  width: 100%;
  font: inherit; font-size: 18px; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--field-line); border-radius: 4px;
  padding: 11px 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.field input[type="text"]:focus, .field textarea:focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(78, 93, 60, .16); }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); font-style: italic; opacity: 1; }
:root[lang="ja"] .field input::placeholder, :root[lang="ja"] .field textarea::placeholder { font-style: normal; }
.field__hint { font-size: 14.5px; font-style: italic; color: var(--muted); text-wrap: pretty; }
.field.has-error input { border-color: var(--error); }
.field__error { color: var(--error); font-size: 15px; }
.choice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label {
  display: grid; place-items: center; text-align: center;
  min-height: 50px; padding: 6px 12px;
  border: 1px solid var(--field-line); border-radius: 999px;
  font-size: 16px; line-height: 1.2; cursor: pointer;
  background: var(--paper);
  transition: background-color .2s, color .2s, border-color .2s;
}
.choice input:checked + label { background: var(--sage); border-color: var(--sage); color: var(--paper); }
.choice input:focus-visible + label { outline: 2px solid var(--sage); outline-offset: 2px; }
.choice--small label { min-height: 46px; font-size: 15.5px; }
.field-row { display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; }
.stepper {
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  height: 46px; border: 1px solid var(--field-line); border-radius: 999px; background: var(--paper); overflow: hidden;
}
.stepper button { height: 100%; border: 0; background: none; font-size: 22px; color: var(--sage); cursor: pointer; }
.stepper input {
  width: 100%; min-width: 0; border: 0; background: none; text-align: center;
  font: inherit; font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.is-declining #rsvp-extra { display: none; }
.form__status { text-align: center; color: var(--sage); font-size: 16px; }
.form__status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form__status.is-error { color: var(--error); }
.form__done { position: relative; }
.form__link { justify-self: center; padding: 10px 6px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 15.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.form__link:hover { color: var(--sage); }
.form__done { text-align: center; display: grid; gap: 10px; padding: 10px 4px 4px; }
.form__done .script-title { font-size: 44px; }
.form__done .btn { justify-self: center; }
.form__done .script-title:focus { outline: none; }
.form__captcha { display: flex; justify-content: center; }
.form__captcha.is-shown { margin-top: 18px; }
.demo-note { font-size: 14.5px; color: var(--muted); font-style: italic; }

/* ---------- gift ---------- */
.gift { padding: 64px 22px 72px; text-align: center; border-top: 1px solid var(--line-soft); }
.gift__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px auto 0; max-width: 520px; }
.gift-pick {
  display: grid; justify-items: center; align-content: start; gap: 4px;
  padding: 30px 10px 20px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px 999px 10px 10px / 80px 80px 10px 10px;
  cursor: pointer; color: var(--ink);
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.gift-pick:hover { border-color: var(--sage-soft); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(60, 68, 48, .08); }
.gift-pick svg { width: 26px; height: 26px; color: var(--sage-soft); margin-bottom: 4px; }
.gift-pick__title { font-family: var(--font-script); font-size: 28px; line-height: 1.15; color: var(--sage); white-space: nowrap; }
.gift-pick__who { font-size: 14.5px; line-height: 1.35; color: var(--muted); text-wrap: balance; }

/* ---------- gift: only the invited family's box ---------- */
.gift__choices.is-single { grid-template-columns: minmax(0, 260px); justify-content: center; }
.gift-single .gift-tabs { display: none; }
.gift-single .gift-cards { grid-template-columns: minmax(0, 380px); justify-content: center; }

/* ---------- closing ---------- */
.closing {
  padding: 24px 28px calc(env(safe-area-inset-bottom, 0px) + 110px);
  text-align: center;
}
.closing__photo { width: 62%; max-width: 340px; margin: 0 auto; }
.closing__photo .photo-btn { aspect-ratio: 3 / 4; }
.closing__photo .photo-btn img { height: 100%; object-fit: cover; object-position: 40% 30%; }
.closing__line { margin-top: 30px; font-family: var(--font-script); font-size: 46px; line-height: 1.2; color: var(--sage); text-wrap: balance; }
.closing__mono { display: block; width: 76px; height: 72px; margin: 22px auto 8px; color: var(--sage); }
.closing__sign { font-weight: 500; font-size: 13.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }

/* ---------- sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 80; display: grid; align-items: end; justify-items: center; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(38, 42, 33, .4); animation: fade-in .3s ease both; }
.sheet__panel {
  position: relative;
  width: min(100%, 440px); max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 30px 20px calc(env(safe-area-inset-bottom, 0px) + 26px);
  background: var(--paper) var(--grain);
  border-radius: 22px 22px 0 0;
  text-align: center;
  animation: sheet-up .45s var(--ease) both;
}
.sheet__close {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(78, 93, 60, .08); color: var(--sage); cursor: pointer;
}
.sheet__close svg { width: 20px; height: 20px; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.gift-tabs {
  display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px;
  margin: 18px auto 0; padding: 4px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
}
.gift-tab {
  min-height: 40px; padding: 0 24px;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: 16px; color: var(--muted);
  transition: background-color .2s, color .2s;
}
.gift-tab[aria-selected="true"] { background: var(--sage); color: var(--paper); }
.gift-cards { display: grid; gap: 14px; margin-top: 14px; }
.gift-card { display: none; padding: 22px 16px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.gift-card.is-current { display: block; animation: fade-in .3s ease both; }
.gift-card__family { font-family: var(--font-script); font-size: 40px; line-height: 1.1; color: var(--sage); }
.gift-card__who { font-size: 16px; color: var(--muted); }
.gift-card__qr {
  width: 216px; margin: 14px auto 14px; padding: 14px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 0 0 1px var(--line), 0 10px 24px rgba(60, 68, 48, .08);
}
.gift-card__qr img { width: 100%; height: auto; }
.gift-card__qr--empty {
  display: grid; place-items: center; aspect-ratio: 1;
  font-size: 15px; font-style: italic; color: var(--muted); box-shadow: none; border: 1px dashed var(--sage-soft); background: none;
}
.gift-card__rows { display: grid; gap: 2px; }
.gift-card__bank { font-weight: 500; }
.gift-card__bank span { font-weight: 400; color: var(--muted); }
.gift-card__acct b {
  font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.3;
  letter-spacing: .05em; color: var(--sage); font-variant-numeric: tabular-nums lining-nums;
}
.gift-card__holder { font-size: 13.5px; letter-spacing: .16em; color: var(--muted); }
.gift-card__copy { justify-self: center; margin-top: 12px; min-height: 42px; }
.gift-tip { margin: 14px auto 0; max-width: 34ch; font-size: 14.5px; font-style: italic; color: var(--muted); text-wrap: balance; }
@keyframes pop-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- photo viewer ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 90;
  display: grid; grid-template: 100% / 100%; place-items: center;
  background: rgba(24, 26, 21, .95);
  animation: fade-in .25s ease both;
}
.viewer__stage { margin: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; width: 100%; height: 100%; padding: 64px 8px; touch-action: pan-y; }
.viewer__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; }
.viewer__close, .viewer__nav {
  position: absolute; z-index: 1;
  display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
}
.viewer__close { top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; }
.viewer__nav { top: 50%; transform: translateY(-50%); }
.viewer__nav--prev { left: 10px; }
.viewer__nav--next { right: 10px; }
.viewer svg { width: 22px; height: 22px; }
.viewer :focus-visible { outline-color: #fff; }
.viewer__count {
  position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); left: 0; right: 0;
  text-align: center; color: rgba(255, 255, 255, .75); font-size: 15px; letter-spacing: .1em;
}

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); z-index: 95;
  transform: translateX(-50%);
  max-width: min(92vw, 400px);
  padding: 10px 18px; border-radius: 999px;
  background: var(--wax); color: var(--paper);
  font-size: 15.5px; text-align: center;
  box-shadow: 0 10px 26px rgba(40, 42, 36, .25);
  animation: fade-in .25s ease both;
}

/* ---------- Japanese reading of names ---------- */
.kana { display: none; }
:root[lang="ja"] .kana { display: block; font-family: "Shippori Mincho", serif; font-size: 13px; letter-spacing: .14em; color: var(--muted); }
:root[lang="ja"] .cover .kana { margin-top: 10px; font-size: 14px; }
:root[lang="ja"] .invite__couple .kana { margin-top: 8px; }
:root[lang="ja"] .family .kana { display: block; font-size: 11.5px; letter-spacing: .04em; font-style: normal; margin-top: 2px; }

/* ---------- Japanese typography: kana/kanji fall back from the Latin faces to Shippori Mincho ---------- */
:root[lang="ja"] {
  --font-script: "Great Vibes", "Shippori Mincho", serif;
  --font-body: "EB Garamond", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
:root[lang="ja"] body { line-height: 1.85; word-break: auto-phrase; } /* Chrome: break Japanese lines between phrases */
:root[lang="ja"] .choice label { font-size: 15px; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
:root[lang="ja"] .section-note { max-width: 21em; }
:root[lang="ja"] .script-title { font-size: 28px; letter-spacing: .12em; line-height: 1.5; }
:root[lang="ja"] .env-greet { font-size: 20px; letter-spacing: .3em; }
:root[lang="ja"] .env-name { font-size: 36px; font-size: clamp(30px, 9cqw, 48px); letter-spacing: .06em; line-height: 1.35; }
:root[lang="ja"] .env-open span { font-size: 17px; letter-spacing: .14em; transform: none; }
:root[lang="ja"] .cover__kicker { font-size: 20px; letter-spacing: .3em; }
:root[lang="ja"] .portrait__caption { font-size: 17px; letter-spacing: .2em; }
:root[lang="ja"] .invite__lead { letter-spacing: .5em; }
:root[lang="ja"] .invite__guest { font-size: 28px; letter-spacing: .06em; line-height: 1.5; }
:root[lang="ja"] .invite__text { max-width: 22em; font-size: 16.5px; line-height: 2; }
:root[lang="ja"] .invite__day { font-size: clamp(20px, 6vw, 24px); }
:root[lang="ja"] .family h3 { font-size: 20px; letter-spacing: .2em; }
:root[lang="ja"] .story__text p { font-size: 16.5px; line-height: 2; }
:root[lang="ja"] .story__quote { font-size: 21px; letter-spacing: .08em; line-height: 1.8; }
:root[lang="ja"] .milestone__label { font-size: 17px; letter-spacing: .1em; line-height: 1.5; }
:root[lang="ja"] .closing__line { font-size: 22px; letter-spacing: .1em; line-height: 1.8; }
:root[lang="ja"] .gift-pick__title { font-size: 20px; letter-spacing: .12em; }
:root[lang="ja"] .gift-card__family { font-size: 22px; letter-spacing: .14em; }
:root[lang="ja"] .form__done .script-title { font-size: 24px; }
:root[lang="ja"] .small-caps, :root[lang="ja"] .date__month, :root[lang="ja"] .countdown__row span { letter-spacing: .12em; }
/* Japanese has no italic: use upright text wherever Vietnamese uses italics */
:root[lang="ja"] .section-note, :root[lang="ja"] .countdown__label, :root[lang="ja"] .invite__lunar,
:root[lang="ja"] .field__hint, :root[lang="ja"] .gift-tip, :root[lang="ja"] .demo-note,
:root[lang="ja"] .family .family__child { font-style: normal; }
:root[lang="ja"] #date-title { letter-spacing: 0; font-size: 46px; }

/* English: a few phrases are longer than the Vietnamese */
:root[lang="en"] .env-open span { font-size: 28px; }
:root[lang="en"] .gift-pick__title { font-size: 26px; }
:root[lang="en"] .family h3 { font-size: 30px; }
:root[lang="en"] .venue__actions .btn { font-size: 14.5px; }

/* ---------- small phones ---------- */
@media (max-width: 374px) {
  .field-row { grid-template-columns: 1fr; }
  .choice--small label { white-space: nowrap; }
  .venue__actions { grid-template-columns: 1fr; max-width: 250px; }
  .tl__label { font-size: 17.5px; }
  .portrait { grid-template-columns: 25% 1fr; column-gap: 12px; }
  .tl__icon { width: 64px; height: 64px; }
  .tl__item { grid-template-columns: 1fr 64px 1fr; }
  .gift-pick__title { font-size: 24px; }
}

/* =========================================================
   iPad (portrait) and up: full-bleed paper, 760px reading column, larger type
   ========================================================= */
@media (min-width: 700px) and (min-height: 521px), (min-width: 1024px) {
  :root { --col: 100%; }
  body { font-size: 20px; background: var(--paper) var(--grain); }
  .paper { max-width: none; }
  .paper > section { max-width: 760px; margin-inline: auto; }
  .controls { width: 100%; }
  .ctl--music { top: calc(env(safe-area-inset-top, 0px) + 78px); right: 24px; width: 54px; height: 54px; }
  .ctl--scroll { top: calc(env(safe-area-inset-top, 0px) + 28px); left: 24px; width: 44px; height: 44px; }
  .ctl--gift { right: 28px; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); width: 58px; height: 58px; }

  .script-title { font-size: 64px; }
  .env-stage { width: min(112%, 640px, max(220px, var(--env-fit))); }
  .envelope__inner { max-width: 700px; }
  .section-note { max-width: 36ch; }

  .cover { min-height: min(86vh, 1000px); min-height: min(86svh, 1000px); padding: 150px 60px 110px; }
  .bloom--tl { width: 30%; top: -40px; left: -24px; }
  .bloom--br { width: 30%; right: -18px; bottom: 0; }
  .cover__kicker { font-size: 56px; }
  .cover__names { font-size: 84px; }
  .cover__date { font-size: 17px; margin-top: 30px; }
  .cover__rule { width: 56px; }

  .portrait { grid-template-columns: 30% 1fr; column-gap: 34px; padding: 70px 110px 110px 70px; }
  .portrait__date { font-size: 112px; padding-right: 28px; }
  .portrait__photo { max-width: 400px; padding: 0 0 18px 18px; }
  .arch-line { right: 18px; top: -18px; }
  .portrait__caption { font-size: 44px; margin-top: 36px; }

  .invite { padding: 40px 80px 110px; }
  .invite__lead { font-size: 16px; }
  .invite__guest { font-size: 60px; }
  .invite__text { max-width: 34ch; }
  .invite__couple .script { font-size: 80px; }
  .invite__day { font-size: 32px; }
  .invite__venue { font-size: 26px; }
  .small-caps { font-size: 14px; }
  .families { max-width: 600px; margin: 0 auto; gap: 30px 40px; }
  .family h3 { font-size: 48px; }
  .family p { font-size: 19px; }
  .family .role { font-size: 12.5px; }

  .date { padding: 100px 40px 110px; }
  .date__month { font-size: 16px; }
  .cal { max-width: 460px; margin-top: 34px; }
  .cal__day { font-size: 21px; }
  .cal__head { font-size: 15px; }
  .countdown__row { max-width: 480px; }
  .countdown__row b { font-size: 56px; }
  .countdown__row span { font-size: 13px; }

  /* timeline turns horizontal */
  .timeline { padding: 100px 40px 110px; }
  .tl { max-width: 640px; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; }
  .tl::before { left: 16.6%; right: 16.6%; top: 46px; bottom: auto; width: auto; height: 1px; }
  .tl__item { grid-template-columns: 1fr; justify-items: center; gap: 14px; padding: 0 8px; }
  .tl__icon { order: -1; width: 92px; height: 92px; }
  .tl__icon svg { width: 56px; height: 56px; }
  .tl__item time { text-align: center; padding: 0; font-size: 40px; }
  .tl__label { text-align: center; padding: 0; font-size: 21px; }

  .venue { padding: 30px 40px 110px; }
  .venue__card { padding: 0 0 40px; border-radius: 50% 50% 10px 10px / 220px 220px 10px 10px; }
  .venue__body { padding: 0 40px; }
  .venue__name { font-size: 32px; }
  .venue__actions .btn { font-size: 17px; min-height: 50px; }

  .story { padding: 100px 0 110px; }
  .story__wide { margin-inline: 40px; }
  .story__text { max-width: 600px; margin: 0 auto; padding: 44px 30px 0; }
  .story__pair { grid-template-columns: 58% 1fr; padding: 50px 80px 0; }
  .story__quote { font-size: 52px; padding-top: 60px; }

  .rsvp { padding: 100px 40px 90px; }
  .form { padding: 34px 34px 30px; gap: 24px; }
  .field > label, .field > legend { font-size: 17px; }
  .choice label { font-size: 17.5px; }

  .gift { padding: 90px 40px 100px; }
  .gift__choices { gap: 20px; }
  .gift-pick { padding: 40px 18px 26px; }
  .gift-pick__title { font-size: 42px; }
  .gift-pick__who { font-size: 17px; }

  .closing { padding: 30px 40px calc(env(safe-area-inset-bottom, 0px) + 140px); }
  .closing__photo { width: 50%; }
  .closing__line { font-size: 64px; }
  .closing__mono { width: 96px; height: 90px; }
  .closing__sign { font-size: 15px; }

  /* sheet becomes a centred dialog showing both families side by side */
  .sheet { align-items: center; padding: 24px; }
  .sheet__panel { width: min(100%, 780px); border-radius: 20px; padding: 40px 34px 34px; animation-name: pop-in; }
  .gift-tabs { display: none; }
  .gift-cards { grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
  .gift-single .sheet__panel { width: min(100%, 500px); }
  .gift-card { display: block; }
  .toast { bottom: 120px; }

  /* flags, Japanese readings, engagement, album */
  .langs { top: calc(env(safe-area-inset-top, 0px) + 22px); right: 24px; }
  .lang { width: 44px; height: 44px; }
  .lang__flag { width: 34px; height: 34px; }
  :root[lang="ja"] .kana { font-size: 15px; }
  .story__engage { padding: 70px 80px 0; gap: 0 34px; }
  .milestone__label { font-size: 46px; }
  .milestone__date { font-size: 64px; }
  .milestone--wedding { padding-top: 70px; }
  .album { padding: 100px 40px 110px; }
  .album__grid { gap: 18px; }
  .album__col { gap: 18px; }
  .album__col--offset { margin-top: 80px; }

  /* Japanese and English type sizes */
  :root[lang="ja"] .script-title { font-size: 36px; }
  :root[lang="ja"] .cover__kicker { font-size: 26px; }
  :root[lang="ja"] .invite__guest { font-size: 38px; }
  :root[lang="ja"] .invite__text { font-size: 18px; }
  :root[lang="ja"] .story__quote { font-size: 28px; }
  :root[lang="ja"] .closing__line { font-size: 30px; }
  :root[lang="ja"] .gift-pick__title { font-size: 24px; }
  :root[lang="ja"] .milestone__label { font-size: 22px; }
  :root[lang="ja"] #date-title { font-size: 60px; }
  :root[lang="en"] .family h3 { font-size: 42px; }
  :root[lang="en"] .venue__actions .btn { font-size: 16.5px; }
}

/* =========================================================
   Desktop and iPad landscape: split screen
   ========================================================= */
@media (min-width: 1024px) and (orientation: landscape) {
  :root { --stage: clamp(400px, 44vw, 860px); }
  .stage {
    display: block;
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--stage); z-index: 1;
    overflow: hidden; background: #1F201C;
  }
  .stage__slides { position: absolute; inset: 0; }
  .stage__img {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
    object-fit: cover; opacity: 0;
    transition: opacity 1.6s ease;
    transform: scale(1.06);
  }
  .stage__img.is-active { opacity: 1; animation: kenburns 18s ease-out both; }
  .stage::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: linear-gradient(to top, rgba(22, 24, 19, .62) 0%, rgba(22, 24, 19, .12) 38%, rgba(22, 24, 19, 0) 55%);
  }
  .stage::before {
    content: ""; position: absolute; inset: 24px; z-index: 3; pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .42);
  }
  .stage__caption { position: absolute; left: 0; right: 0; bottom: 64px; z-index: 4; text-align: center; color: #fff; }
  .stage__mono { display: block; width: 66px; height: 62px; margin: 0 auto 8px; color: #fff; opacity: .95; }
  .stage__names { font-family: var(--font-script); font-size: clamp(48px, 4.4vw, 76px); line-height: 1.1; text-shadow: 0 2px 22px rgba(0, 0, 0, .3); }
  .stage__date { margin-top: 8px; font-size: 15px; letter-spacing: .5em; font-weight: 500; text-indent: .5em; }

  .paper { margin-left: var(--stage); min-height: 100vh; }
  .paper > section { max-width: 700px; }
  .controls { left: var(--stage); width: calc(100% - var(--stage)); transform: none; }
  .envelope__inner { max-width: 980px; }

  .cover { min-height: 100vh; padding: 120px 60px 100px; }
  .cover__names { font-size: clamp(64px, 5.4vw, 84px); }
  .portrait { padding: 80px 90px 110px 60px; }

  .sheet__panel { width: min(100%, 820px); }
  .gift-single .sheet__panel { width: min(100%, 500px); }
  .envelope__inner { padding-top: calc(env(safe-area-inset-top, 0px) + 56px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 48px); }
}
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1.0); } }

/* phone held sideways: greeting, name and button on the left, envelope on the right */
@media (orientation: landscape) and (max-height: 520px) {
  .envelope__inner {
    max-width: 960px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: 5vw; align-items: center; justify-items: center;
    padding: 16px max(28px, env(safe-area-inset-right, 0px)) 16px max(28px, env(safe-area-inset-left, 0px));
  }
  .env-greet { grid-area: 2 / 1; font-size: clamp(24px, 7.5svh, 36px); }
  .env-name { grid-area: 3 / 1; font-size: clamp(34px, 12svh, 58px); }
  .env-open { grid-area: 4 / 1; margin-top: 14px; min-height: 52px; }
  .env-stage { grid-area: 1 / 2 / -1 / 3; width: min(46vw, calc((100svh - 40px) * 892 / 843)); margin: 0; }
  :root[lang="ja"] .env-greet { font-size: 16px; }
  :root[lang="ja"] .env-name { font-size: clamp(24px, 8svh, 36px); }
  .cover { min-height: 0; padding: 96px 24px 88px; }
  .bloom--tl { width: 26%; }
  .bloom--br { width: 26%; }
  .viewer__stage { padding: 10px 60px 34px; }
  .viewer__count { bottom: 8px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .env-layer, .envelope.is-ready .env-layer, .envelope.is-exiting .env-layer { animation: none !important; opacity: 1; transform: none; }
  .env-on .envelope { transition-duration: .3s; transition-delay: 0s; }
  .sway--left, .sway--right, .env-hint::before, .env-hint::after, .ctl--gift, .cal__day--wed svg, .ctl--music.is-playing .vinyl, .stage__img.is-active { animation: none !important; }
  .reveal-on [data-reveal].is-armed { opacity: 1; transform: none; transition: none; }
  .sheet__panel, .sheet__backdrop, .viewer, .toast, .gift-card.is-current { animation: none; }
  .wind { display: none; }
}