/* Nét xanh: a line-drawn wedding invitation laid out like its reference (two phone screens on a sage poster with a
   hand-drawn wavy frame). Every size inside a sheet is in --u = sheet width / 390, the width of the reference screen,
   so each screen is its artboard scaled whole. */
:root {
  --sage: #d9dbcc; --sage-2: #ced1bd; --paper: #f8f7f3; --olive: #5c6530; --olive-art: #5d6436;
  --ink: #1d1d1b; --text: #3b3934; --pill: #c5c6b1; --pill-h: #b9bba2;
  --col: min(440px, calc((100svh - 56px) * 390 / 802));
  --u: calc(var(--col) / 390);
  --script: "Ms Madi", cursive; --sans: "Manrope", system-ui, sans-serif; --serif: "Gilda Display", Georgia, serif;
}
@media (max-width: 560px) { :root { --col: 100vw; } }
/* a phone held sideways: one screen at phone width, read by scrolling (the poster fit would shrink the copy to ~5px) */
@media (orientation: landscape) and (max-height: 500px) { :root { --col: min(440px, 100vw); } .device { display: none; } }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--sage); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); color: var(--text); background: var(--sage); overflow-x: clip; }
body.locked { overflow: hidden; height: 100svh; }
::selection { background: var(--pill); color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
.script { font-family: var(--script); font-weight: 400; color: var(--olive); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 90; padding: 8px 14px; background: var(--paper); color: var(--ink); border-radius: 99px; font-size: 13px; }
.skip:focus { top: 12px; }

/* ---------- the poster: sage, giant script words, the wavy frame ---------- */
.bd { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.wm { position: absolute; margin: 0; font-family: var(--script); color: var(--sage-2); line-height: 1; white-space: nowrap;
  font-size: 31vw; will-change: transform; }
.wm-a { left: -3vw; top: -.16em; transform: rotate(-5deg); }
.wm-b { right: -4vw; bottom: -.08em; transform: rotate(-4deg); }
@media (orientation: landscape) { .wm { font-size: min(24vw, 64vh); } }
.wave { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wave path { fill: none; stroke: var(--olive); stroke-linecap: round; stroke-linejoin: round; }

/* ---------- opener ---------- */
.op { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; cursor: pointer; outline: none;
  transition: opacity .5s ease, visibility .5s; }
.op.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.op-in { text-align: center; color: var(--text); padding: 0 max(12vw, 15vmin); transition: transform .7s cubic-bezier(.5,0,.2,1), opacity .5s; }
.op.opening .op-in { transform: translateY(-6vh); opacity: 0; }
.op-in p { margin: 0; }
.op-k { font-size: clamp(11px, 1.7vmin, 14px); letter-spacing: .32em; padding-left: .32em; text-transform: uppercase; font-weight: 500; color: var(--olive); }
.op-g { margin-top: 1.2vmin !important; font-size: clamp(16px, 2.6vmin, 22px); font-weight: 300; }
.op-n { margin: 4vmin 0 3vmin !important; font-size: clamp(54px, 11vmin, 104px); line-height: 1.15; white-space: nowrap; }
.op-n span { font-size: .8em; }
.op-d { font-family: var(--serif); font-size: clamp(17px, 2.8vmin, 24px); letter-spacing: .18em; color: var(--olive); }
.op:focus-visible .op-n { text-decoration: underline 1px; text-underline-offset: .2em; }
@media (max-width: 560px) { .op-n { font-size: 15vw; white-space: normal; } .op-n span { display: block; font-size: .7em; line-height: 1; } }

/* ---------- the column of screens ---------- */
.col { position: relative; z-index: 2; width: var(--col); margin: 0 auto; padding: calc(var(--u) * 28) 0 calc(var(--u) * 24); outline: none; }
body.locked .col { transform: translateY(106svh); }
.col.rise { transition: transform 1.05s cubic-bezier(.2,.8,.2,1); }
.sheet { position: relative; background: var(--paper); border-radius: calc(var(--u) * 42); overflow: clip; }
.sheet-b { margin-top: calc(var(--u) * 56); }
@media (max-width: 560px) {
  .col { padding-top: 0; }
  .sheet { border-radius: calc(var(--u) * 30); }
  .sheet-a { border-top-left-radius: 0; border-top-right-radius: 0; }
  .sheet-b { margin-top: calc(var(--u) * 14); }
  .hero { margin-top: env(safe-area-inset-top); }
}

/* the phone outline of the first screen, as on the poster (desktop only: on a phone, the phone is the frame) */
.device { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 802); z-index: 3; pointer-events: none;
  border: calc(var(--u) * 6) solid #545a30; border-radius: calc(var(--u) * 42); }
.notch { position: absolute; left: 50%; top: calc(var(--u) * -1); width: calc(var(--u) * 214); height: calc(var(--u) * 27);
  transform: translateX(-50%); background: #545a30; border-radius: 0 0 calc(var(--u) * 16) calc(var(--u) * 16); }
.notch b { position: absolute; left: 50%; top: calc(var(--u) * 10); width: calc(var(--u) * 52); height: calc(var(--u) * 5);
  transform: translateX(-50%); background: var(--paper); border-radius: 9px; }
.notch s { position: absolute; left: calc(50% + var(--u) * 40); top: calc(var(--u) * 9.5); width: calc(var(--u) * 6); aspect-ratio: 1;
  background: var(--paper); border-radius: 50%; }
.key { position: absolute; width: calc(var(--u) * 4); background: #545a30; border-radius: calc(var(--u) * 2); }
.k1 { left: calc(var(--u) * -9); top: calc(var(--u) * 168); height: calc(var(--u) * 38); }
.k2 { left: calc(var(--u) * -9); top: calc(var(--u) * 222); height: calc(var(--u) * 38); }
.k3 { right: calc(var(--u) * -9); top: calc(var(--u) * 196); height: calc(var(--u) * 58); }
.sheet-a { overflow: visible; }
.sheet-a > :not(.device) { position: relative; }
@media (max-width: 560px) { .device { display: none; } }

/* reading copy: small grotesk, centred, as in the reference */
.txt { margin: 0; font-size: calc(var(--u) * 13); line-height: 1.5; font-weight: 400; color: var(--text); text-align: center; text-wrap: pretty; }
.pill { display: inline-flex; align-items: center; justify-content: center; height: calc(var(--u) * 28); min-width: calc(var(--u) * 180);
  padding: 0 calc(var(--u) * 18); border: 0; border-radius: 99px; background: var(--pill); color: #2c2c28; font-size: calc(var(--u) * 12.5);
  font-weight: 400; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .25s; }
.pill:hover { background: var(--pill-h); }
.pill:focus-visible, .snd:focus-visible { outline: 1.5px solid var(--olive); outline-offset: 3px; }

/* ---------- screen 1: names, the couple with the date cards, the invitation ---------- */
.hero { height: calc(var(--u) * 802); }
.hero > * { position: absolute; left: 0; right: 0; margin: 0 auto; }
.names { top: calc(var(--u) * 38); font-size: calc(var(--u) * 37); line-height: 1.5; text-align: center; white-space: nowrap; }
.couple { top: calc(var(--u) * 147); left: calc(var(--u) * 12); width: calc(var(--u) * 238); aspect-ratio: 952 / 1149; }
.couple .art-slot { color: var(--ink); }
.sign { position: absolute; top: 14.2%; transform: translate(-50%, -50%); font-family: var(--serif); font-size: calc(var(--u) * 53);
  line-height: 1; color: var(--olive); letter-spacing: .01em; }
.s1 { left: 28.4%; } .s2 { left: 69.8%; }
.lead { top: calc(var(--u) * 492); width: calc(var(--u) * 312); }
.shout { top: calc(var(--u) * 594); font-size: calc(var(--u) * 38); line-height: 1.5; text-align: center; white-space: nowrap; }
.venue { top: calc(var(--u) * 677); width: calc(var(--u) * 290); }
.hero .pill { top: calc(var(--u) * 748); width: calc(var(--u) * 180); }

/* ---------- the day's programme inside the long table of guests ---------- */
.prog { height: calc(var(--u) * 648); }
.prog h2 { position: absolute; top: calc(var(--u) * 30); left: 0; right: 0; margin: 0; font-size: calc(var(--u) * 40); line-height: 1.5; text-align: center; }
.table { position: absolute; top: calc(var(--u) * 130); left: calc(var(--u) * 17); width: calc(var(--u) * 356); aspect-ratio: 1424 / 1891; }
.table .art-slot { color: var(--ink); }
.times { position: absolute; left: 50%; top: calc(var(--u) * 116); width: calc(var(--u) * 120); margin: 0; padding: 0; list-style: none;
  transform: translateX(-50%); text-align: center; }
.times li { height: calc(var(--u) * 73); display: flex; flex-direction: column; align-items: center; }
.times b { font-size: calc(var(--u) * 33); line-height: 1.2; font-weight: 400; }
.times span { font-size: calc(var(--u) * 12.5); line-height: 1.3; color: var(--text); }

/* ---------- screen 2: dress code, gift, flowers, contacts (positions measured from the reference) ---------- */
.sheet-b { padding-bottom: calc(var(--u) * 30); }
.d { position: relative; }
.d > * { position: absolute; margin: 0; }
.d-art { color: var(--olive-art); }
.d-head h2 { margin: 0; font-size: calc(var(--u) * 34); line-height: 1.5; white-space: nowrap; }
.d-head .arrow { position: absolute; color: var(--olive-art); }
.d-text { display: flex; flex-direction: column; align-items: center; }

#dress-code { height: calc(var(--u) * 320); }
#dress-code .d-art { left: calc(var(--u) * 58); top: calc(var(--u) * 42); width: calc(var(--u) * 126); }
.h-dress { left: calc(var(--u) * 240); top: calc(var(--u) * 38); transform: rotate(11deg); transform-origin: 0 50%; }
.h-dress .arrow { left: calc(var(--u) * 8); top: calc(var(--u) * 64); width: calc(var(--u) * 47); transform: rotate(-11deg); }
#dress-code .d-text { left: calc(var(--u) * 22); top: calc(var(--u) * 180); width: calc(var(--u) * 200); }
.sw { display: flex; gap: calc(var(--u) * 3.5); margin: calc(var(--u) * 14) 0 0; padding: 0; list-style: none; }
.sw li { width: calc(var(--u) * 25); aspect-ratio: 1; border-radius: 50%; background: var(--c); }

#qua-mung { height: calc(var(--u) * 238); }
.h-gift { left: calc(var(--u) * 36); top: calc(var(--u) * 26); transform: rotate(-11deg); transform-origin: 0 50%; }
.h-gift .arrow { left: calc(var(--u) * 52); top: calc(var(--u) * 58); width: calc(var(--u) * 54); transform: rotate(11deg); }
#qua-mung .d-art { left: calc(var(--u) * 205); top: calc(var(--u) * 28); width: calc(var(--u) * 127); }
#qua-mung .d-text { left: calc(var(--u) * 168); top: calc(var(--u) * 164); width: calc(var(--u) * 200); }

#hoa { height: calc(var(--u) * 268); }
#hoa .d-art { left: calc(var(--u) * 56); top: calc(var(--u) * 18); width: calc(var(--u) * 128); }
.h-flowers { left: calc(var(--u) * 262); top: calc(var(--u) * 56); transform: rotate(11deg); transform-origin: 0 50%; }
.h-flowers .arrow { left: calc(var(--u) * -10); top: calc(var(--u) * 50); width: calc(var(--u) * 54); transform: rotate(-11deg); }
#hoa .d-text { left: calc(var(--u) * 22); top: calc(var(--u) * 170); width: calc(var(--u) * 200); }

#lien-he { height: calc(var(--u) * 262); }
.h-contact { left: calc(var(--u) * 18); top: calc(var(--u) * 28); transform: rotate(-11deg); transform-origin: 0 50%; }
.h-contact .arrow { left: calc(var(--u) * 82); top: calc(var(--u) * 62); width: calc(var(--u) * 54); transform: rotate(11deg); }
#lien-he .d-art { left: calc(var(--u) * 217); top: calc(var(--u) * 2); width: calc(var(--u) * 92); }
#lien-he .d-text { left: calc(var(--u) * 163); top: calc(var(--u) * 146); width: calc(var(--u) * 202); }
#lien-he .pill { margin-top: calc(var(--u) * 14); }

/* ---------- reply, in the same hand ---------- */
.rsvp { position: relative; margin: calc(var(--u) * 26) calc(var(--u) * 34) 0; padding-top: calc(var(--u) * 26); text-align: center;
  border-top: 1px solid rgba(92, 101, 48, .18); }
.rsvp h2 { margin: 0; font-size: calc(var(--u) * 40); line-height: 1.5; }
.rsvp > .txt { margin-top: calc(var(--u) * 2); }
.form { display: grid; gap: calc(var(--u) * 16); margin-top: calc(var(--u) * 22); text-align: left; }
.f { display: grid; gap: calc(var(--u) * 4); margin: 0; padding: 0; border: 0; min-width: 0; }
.f > span, .f legend { font-size: calc(var(--u) * 11); letter-spacing: .14em; text-transform: uppercase; color: var(--olive); font-weight: 500; padding: 0; }
.f input:not([type=radio]), .f select, .f textarea { width: 100%; padding: calc(var(--u) * 6) 0; border: 0; border-bottom: 1px solid rgba(59, 57, 52, .28);
  border-radius: 0; background: transparent; font-size: max(16px, calc(var(--u) * 14)); color: var(--ink); outline: none; resize: none; }
.f input:focus, .f select:focus, .f textarea:focus { border-bottom-color: var(--olive); }
.f select { appearance: none; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235c6530' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") right 2px center / 11px no-repeat; }
.f-n { width: calc(var(--u) * 120); }
.chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); }
.chips legend { width: 100%; margin-bottom: calc(var(--u) * 6); }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 14); border: 1px solid rgba(92, 101, 48, .35);
  border-radius: 99px; font-size: calc(var(--u) * 13); white-space: nowrap; transition: background .2s, border-color .2s; }
.chips input:checked + span { background: var(--pill); border-color: var(--pill); }
.chips input:focus-visible + span { outline: 1.5px solid var(--olive); outline-offset: 2px; }
.form .pill { justify-self: center; margin-top: calc(var(--u) * 6); }
.done { padding: calc(var(--u) * 18) 0 calc(var(--u) * 6); outline: none; }
.done[hidden] { display: none; }
.done .script { margin: 0; font-size: calc(var(--u) * 36); line-height: 1.5; }
.done .pill { margin-top: calc(var(--u) * 16); }
.pill-line { background: transparent; border: 1px solid var(--pill); }

/* ---------- footer on the poster ---------- */
.foot { padding: calc(var(--u) * 30) calc(var(--u) * 20) calc(13vmin + 64px); text-align: center; }
.foot-n { margin: 0; font-family: var(--serif); font-size: calc(var(--u) * 17); text-wrap: balance; color: var(--olive); letter-spacing: .04em; }
.foot-c { margin: calc(var(--u) * 8) auto 0; max-width: calc(var(--u) * 300); font-size: calc(var(--u) * 10.5); line-height: 1.6; color: #6c6e5c; }

/* ---------- floating dock: sound + reply ---------- */
.dock { position: fixed; z-index: 30; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px;
  transform: translate(-50%, 0); transition: transform .45s cubic-bezier(.3,.7,.2,1), opacity .35s; }
body.locked .dock, .dock.away { transform: translate(-50%, 90px); opacity: 0; pointer-events: none; }
.dock .pill { height: 36px; min-width: 0; padding: 0 20px; font-size: 13px; box-shadow: 0 6px 18px -10px rgba(40, 44, 20, .5); }
.snd { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(92, 101, 48, .4); border-radius: 50%;
  background: var(--paper); color: var(--olive); cursor: pointer; box-shadow: 0 6px 18px -10px rgba(40, 44, 20, .5); }
.snd svg { width: 16px; height: 16px; }
.snd[aria-pressed=true] svg { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-2px) rotate(-6deg); } }

/* ---------- drawn art and writing ---------- */
.art-slot svg { display: block; width: 100%; height: auto; overflow: visible; }
.art-slot:not(.ready) { visibility: hidden; }
.js .w:not(.is-w) { clip-path: inset(-40% 100% -40% -8%); }
.js .w.is-w { clip-path: inset(-40% -8% -40% -8%); transition: clip-path var(--wd, 1s) cubic-bezier(.55,.1,.35,1); }
.js .w.w-done { clip-path: none; }
.js .rv:not(.in) { opacity: 0; transform: translateY(calc(var(--u) * 8)); }
.js .rv.in { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .sw li:not(.in) { transform: scale(0); }
.js .sw li.in { transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
[data-go], a, button { -webkit-tap-highlight-color: transparent; }
#hoi-am, #chuong-trinh { scroll-margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .js .w, .js .rv, .js .sw li { clip-path: none !important; opacity: 1 !important; transform: none !important; }
  .col.rise, .op, .op-in { transition: none; }
  .snd[aria-pressed=true] svg { animation: none; }
}
/* on a phone the screens fill the width: the frame would only peek through the gaps between them */
@media (max-width: 560px) { .wave { transition: opacity .6s; } body:not(.locked) .wave { opacity: 0; } }

/* the reply form hides once sent (its display: grid would otherwise override [hidden]) */
.form[hidden] { display: none; }