/* ============================================================
   Jasper & Moe — save the date
   ============================================================ */
@font-face { font-family: 'Melodrame'; src: url(../assets/fonts/melodrame.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Satoshi'; src: url(../assets/fonts/satoshi-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url(../assets/fonts/satoshi-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url(../assets/fonts/satoshi-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --desk: #ffffff;
  --paper: #ffffff;
  --env: #1d3a2c;          /* bottle green */
  --env-deep: #132a1f;
  --ink: #1f1d1b;
  --ink-2: #6a655e;
  --shu: #c9442c;          /* vermilion — hanko, Sundays, highlights */
  --ao: #2d4c8c;           /* Saturday blue */
  --line: 70, 88, 104;     /* drafting line rgb */
  --cjk-serif: 'Noto Serif JP';
  --cjk-sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', sans-serif;
  --serif: 'Melodrame', var(--cjk-serif), 'Times New Roman', serif;
  --sans: 'Satoshi', 'Helvetica Neue', Arial, var(--cjk-sans);
  --jp: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --tex: url(../assets/tex/paper.png);
  --grain: url(../assets/tex/grain.png);
  --card-shadow: 0 0 0 .5px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.05), 0 6px 12px -6px rgba(20,20,20,.16), 0 30px 50px -24px rgba(20,20,20,.3);
  /* set from JS */
  --cw: 330px; --ch: 440px; --ew: 356px; --eh: 466px; --fh: 220px; --et: 4px;
}
html:lang(ja) body { word-break: auto-phrase; line-break: strict; }
html:lang(zh-Hant) body { line-break: strict; }
html:lang(zh-Hant) { --cjk-serif: 'Noto Serif TC'; --cjk-sans: 'PingFang TC', 'Heiti TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--desk);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body.is-loading .stage { opacity: 0; }
.stage { transition: opacity .8s ease; }
body.is-locked { overflow: hidden; }
/* Lenis smooth wheel scrolling */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.defs { position: absolute; width: 0; height: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { -webkit-appearance: none; appearance: none; }

.ink   { filter: url(#ink); }
.ink-s { filter: url(#ink-s); }
/* the heavy ink eats thin CJK strokes (一, 。), so translated copy gets the light one */
html:not(:lang(en)) :is([data-i18n], [data-next-msg]).ink { filter: url(#ink-s); }

.scroller { height: 1100vh; pointer-events: none; }

/* small print that never drops below a readable size on phones */
.card { --xs: max(9px, 2.3cqw); --s: max(11px, 3cqw); }

/* ============ desk: white paper, faint drafting grid ============ */
.desk { position: fixed; inset: 0; pointer-events: none; background: var(--desk); }
.desk::before { content: ''; position: absolute; inset: 0; background: var(--tex); background-size: 420px; mix-blend-mode: multiply; opacity: .35; }
.desk-grid { position: absolute; inset: -1px;
  background-image:
    linear-gradient(rgba(var(--line), .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--line), .05) 1px, transparent 1px),
    linear-gradient(rgba(var(--line), .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--line), .022) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
  background-position: calc(50% - 48px) calc(50% - 48px);
  -webkit-mask-image: radial-gradient(90% 80% at 50% 50%, #000 30%, transparent 100%);
          mask-image: radial-gradient(90% 80% at 50% 50%, #000 30%, transparent 100%); }

/* ============ stage & the 3D envelope ============ */
.stage { position: fixed; inset: 0; perspective: 1800px; pointer-events: none; }
.stage > * { pointer-events: auto; }
.env3d, .env-shadow {
  position: absolute; left: calc(50% - var(--ew) / 2); top: calc(50% - var(--eh) / 2);
  width: var(--ew); height: var(--eh); will-change: transform;
}
.env3d { transform-style: preserve-3d; pointer-events: none; }
.env3d > * { pointer-events: auto; }
.env-shadow { transform-origin: 50% 50%; opacity: .8; pointer-events: none; }
/* a 24px blur, painted once as a box-shadow instead of re-blurred every frame */
.env-shadow::before { content: ''; position: absolute; inset: 48px; border-radius: 6px; background: rgba(10,25,18,.42); box-shadow: 0 0 48px 48px rgba(10,25,18,.42); }
.env-fill { fill: var(--env); }

.env-front, .env-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; }
.env-front { transform: translateZ(calc(var(--et) / 2)); border-radius: 3px; overflow: hidden; background: var(--env); container-type: inline-size; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.env-back { transform: rotateY(180deg) translateZ(calc(var(--et) / 2)); perspective: 1400px; }
.env-edge { position: absolute; background: var(--env-deep); }
.e-l, .e-r { top: 0; width: var(--et); height: 100%; transform: rotateY(90deg); }
.e-l { left: calc(var(--et) / -2); } .e-r { left: calc(100% - var(--et) / 2); }
.e-t, .e-b { left: 0; width: 100%; height: var(--et); transform: rotateX(90deg); }
.e-t { top: calc(var(--et) / -2); } .e-b { top: calc(100% - var(--et) / 2); }

/* address side: the photo is printed on the envelope */
.ef-photo { position: absolute; inset: 0; }
.ef-photo img { object-position: 50% 40%; }
.ef-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8,18,13,.78), rgba(8,18,13,.38) 32%, rgba(8,18,13,0) 58%); }
.env-front::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--tex); background-size: 300px; mix-blend-mode: multiply; opacity: .55; }
.ef-text { position: absolute; left: 8cqw; right: 8cqw; bottom: 25cqw; text-align: center; z-index: 1; }
.ef-title { font: 400 8.6cqw/1.02 var(--serif); letter-spacing: -.01em; }
html:not(:lang(en)) .ef-title { font-size: 6.4cqw; line-height: 1.4; font-weight: 500; letter-spacing: .06em; }
.ef-sub { margin-top: 3.4cqw; font: 500 max(9px, 2.5cqw)/1.3 var(--sans); letter-spacing: .3em; text-transform: uppercase; opacity: .82; }
html:not(:lang(en)) .ef-sub { letter-spacing: .12em; }
.ef-shinten { position: absolute; left: 50%; bottom: 7cqw; transform: translateX(-50%) rotate(-2deg); z-index: 1;
  border: .5cqw solid var(--shu); padding: 1.3cqw 1cqw; writing-mode: vertical-rl; font: 700 4.4cqw/1 var(--jp); color: var(--shu);
  letter-spacing: .1em; filter: url(#stamp); background: rgba(255,255,255,.04); }

/* flap side */
.env-inside { position: absolute; left: 0; right: 0; top: 0; height: 30%; border-radius: 3px 3px 0 0;
  background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.08) 30%, rgba(0,0,0,0)), var(--tex), var(--env-deep); background-size: auto, 300px, auto; background-blend-mode: normal, multiply, normal; }
.pocket { position: absolute; inset: 0; z-index: 3; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.pocket > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.flap { position: absolute; left: 0; top: 0; width: 100%; height: var(--fh); z-index: 5; transform-origin: 50% 0;
  filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,.28)); pointer-events: none; will-change: transform; }
.flap-face { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.flap-in { display: none; }
.flap.is-open .flap-out, .flap.is-open .seal-top { display: none; }
.flap.is-open .flap-in { display: block; }

/* seal sticker */
.seal { position: absolute; width: calc(var(--ew) * .235); aspect-ratio: 1; left: calc(50% - var(--ew) * .1175);
  top: calc(var(--fh) * .985 - var(--ew) * .1175); }
.seal svg { width: 100%; height: 100%; display: block; overflow: visible; }
.seal-top { -webkit-clip-path: polygon(0 0,100% 0,100% 52%,93% 49%,86% 54%,78% 50%,71% 55%,63% 50%,55% 54%,49% 49%,41% 54%,33% 50%,26% 55%,18% 50%,11% 54%,5% 49%,0 53%);
                    clip-path: polygon(0 0,100% 0,100% 52%,93% 49%,86% 54%,78% 50%,71% 55%,63% 50%,55% 54%,49% 49%,41% 54%,33% 50%,26% 55%,18% 50%,11% 54%,5% 49%,0 53%);
  transform-origin: 50% 100%; }
.seal-bottom { -webkit-clip-path: polygon(0 100%,100% 100%,100% 52%,93% 49%,86% 54%,78% 50%,71% 55%,63% 50%,55% 54%,49% 49%,41% 54%,33% 50%,26% 55%,18% 50%,11% 54%,5% 49%,0 53%);
                       clip-path: polygon(0 100%,100% 100%,100% 52%,93% 49%,86% 54%,78% 50%,71% 55%,63% 50%,55% 54%,49% 49%,41% 54%,33% 50%,26% 55%,18% 50%,11% 54%,5% 49%,0 53%); }
.pocket .seal-bottom { filter: drop-shadow(0 1px 1.2px rgba(0,0,0,.35)); }
.seal-edge { fill: var(--shu); }
.seal-mono { font: 400 30px 'Melodrame', serif; text-anchor: middle; fill: var(--shu); letter-spacing: -.02em; }
.seal-ring-t { font: 700 6.4px 'Satoshi', sans-serif; letter-spacing: .21em; fill: var(--shu); }
.seal-emboss .hi { fill: rgba(255,225,210,.55); transform: translate(-.55px, -.55px); }
.seal-emboss .lo { fill: rgba(70,8,0,.45); transform: translate(.6px, .7px); }

/* hero controls: scroll hint + language */
.hero-ui { position: absolute; left: 0; right: 0; bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px)); display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; }
.scroll-hint { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
  font: 500 10px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--ink-2); }
html:not(:lang(en)) .scroll-hint { letter-spacing: .14em; font-size: 11px; }
.scroll-hint i { width: 1px; height: 26px; background: linear-gradient(var(--ink-2), transparent); animation: hint 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); opacity: 1 } 60% { transform: scaleY(1); opacity: 1 } 100% { transform: scaleY(1); opacity: 0 } }
.lang { pointer-events: auto; display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(31,29,27,.14); border-radius: 99px; background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lang button { border: 0; background: none; cursor: pointer; padding: 7px 13px; border-radius: 99px; min-height: 32px;
  font: 500 12px/1 var(--sans); letter-spacing: .06em; color: var(--ink-2); transition: background .25s, color .25s; }
.lang button[data-lang="en"] { letter-spacing: .16em; }
.lang button[data-lang="ja"] { font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif; }
.lang button[data-lang="zh"] { font-family: 'PingFang TC', 'Noto Sans TC', sans-serif; }
.lang button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* ============ cards ============ */
.cards { position: absolute; inset: 0; z-index: 2; }
.card { position: absolute; width: var(--cw); height: var(--ch); left: calc(50% - var(--cw) / 2); top: calc(var(--eh) * .03);
  container-type: inline-size; will-change: transform; perspective: 1400px; }
.card:not(.is-active) { pointer-events: none; }
.card-tilt, .face { position: absolute; inset: 0; border-radius: 1cqw; overflow: hidden; box-shadow: var(--card-shadow); }
.card-tilt { transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.paper-card { background: var(--tex), var(--paper); background-size: 320px, auto; background-blend-mode: multiply; }
/* grid printed on the back, bleeding through — kept faint */
.paper-card::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(var(--line), .05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--line), .05) 1px, transparent 1px);
  background-size: 8.333cqw 8.333cqw; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(60% 45% at 80% 20%, #000, transparent), radial-gradient(50% 40% at 15% 85%, rgba(0,0,0,.7), transparent);
          mask-image: radial-gradient(60% 45% at 80% 20%, #000, transparent), radial-gradient(50% 40% at 15% 85%, rgba(0,0,0,.7), transparent); }
.card-tilt::after, .face::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 20; border-radius: inherit; will-change: transform;
  background: linear-gradient(var(--sheen-a, 160deg), rgba(255,255,255,.22), rgba(255,255,255,0) 50%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }

/* printed photograph */
.print { position: relative; overflow: hidden; background: #fff; }
.print img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.03) saturate(.9); }
.print::after { content: ''; position: absolute; inset: 0; background: var(--grain); background-size: 256px; mix-blend-mode: overlay; opacity: .16; pointer-events: none; }

/* double-sided cards */
.card-tilt.duplex { overflow: visible; box-shadow: none; transform-style: preserve-3d; }
.card-tilt.duplex::after { display: none; }
.card-flip { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face-back { transform: rotateY(180deg); }

/* 01 · invitation */
.invite-photo { position: absolute; left: 0; right: 0; top: 0; height: 50%; }
.invite-photo img { object-position: 40% 60%; }
.invite-text { position: absolute; left: 30%; right: 30%; top: 50%; bottom: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  font: 400 max(14px, 5.2cqw)/1.22 var(--serif); letter-spacing: -.005em; }
html:not(:lang(en)) .invite-text { left: 20%; right: 20%; font-size: max(12px, 3.9cqw); line-height: 1.75; letter-spacing: .04em; font-weight: 500; }

/* 02 · the date */
.card-date .face-shadow { position: absolute; left: 0; right: 0; bottom: 0; top: 1.2%; border-radius: 0 0 1cqw 1cqw; transform: translateZ(-1px);
  box-shadow: 0 1px 1px rgba(0,0,0,.06), 0 14px 18px rgba(20,20,20,.14); }
.cal-sheet { box-shadow: none; border-radius: 0 0 1cqw 1cqw; background: rgba(254,253,250,.9);
  -webkit-clip-path: polygon(0 1.1%,3% .4%,7% 1.3%,11% .5%,16% 1.2%,20% .3%,25% 1.4%,29% .6%,34% 1.3%,38% .4%,43% 1.4%,48% .6%,52% 1.3%,57% .4%,61% 1.2%,66% .5%,71% 1.4%,75% .6%,80% 1.2%,84% .4%,88% 1.3%,92% .5%,96% 1.2%,100% .6%,100% 100%,0 100%);
          clip-path: polygon(0 1.1%,3% .4%,7% 1.3%,11% .5%,16% 1.2%,20% .3%,25% 1.4%,29% .6%,34% 1.3%,38% .4%,43% 1.4%,48% .6%,52% 1.3%,57% .4%,61% 1.2%,66% .5%,71% 1.4%,75% .6%,80% 1.2%,84% .4%,88% 1.3%,92% .5%,96% 1.2%,100% .6%,100% 100%,0 100%); }
.cal-sheet::before { content: ''; position: absolute; inset: 0; background: var(--tex); background-size: 300px; mix-blend-mode: multiply; opacity: .5; pointer-events: none; }
.face-front > * { position: absolute; }
.sh-top { left: 7cqw; right: 7cqw; top: 8cqw; display: flex; justify-content: space-between; align-items: flex-start; }
.sh-month { font: 400 9cqw/1 'Melodrame', serif; display: flex; align-items: baseline; gap: .6cqw; }
.sh-month small { font: 700 3.4cqw/1 var(--jp); }
.sh-month-en { font: 500 var(--xs)/1.5 'Satoshi', sans-serif; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-2); text-align: center; padding-top: 1.2cqw; }
.sh-era { writing-mode: vertical-rl; font: 500 2.6cqw/1 var(--jp); letter-spacing: .2em; color: var(--ink-2); }
.sh-num { left: 0; right: 0; top: 22cqw; text-align: center; font: 400 66cqw/1 'Melodrame', serif; letter-spacing: -.05em; color: var(--shu); }
.sh-wd-jp { left: 7.5cqw; top: 38cqw; writing-mode: vertical-rl; font: 900 5.4cqw/1 var(--jp); letter-spacing: .12em; color: var(--shu); }
.sh-wd-en { right: 7cqw; top: 38cqw; writing-mode: vertical-rl; font: 700 var(--xs)/1 'Satoshi', sans-serif; letter-spacing: .4em; text-transform: uppercase; color: var(--shu); }
.sh-rule { left: 7cqw; right: 7cqw; top: 97cqw; height: 1px; background: rgba(31,29,27,.3); }
.sh-ask { left: 12cqw; right: 12cqw; top: 97cqw; bottom: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  font: 400 max(14px, 5.4cqw)/1.15 var(--serif); }
html:not(:lang(en)) .sh-ask { font-size: max(13px, 4.2cqw); line-height: 1.6; font-weight: 500; letter-spacing: .04em; }

.cb { position: absolute; inset: 10cqw 7cqw 8cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cb-month { font: 400 max(16px, 6.4cqw)/1 var(--serif); }
html:not(:lang(en)) .cb-month { font-weight: 500; font-size: max(15px, 5.2cqw); letter-spacing: .06em; }
.cb-grid { margin-top: 6cqw; width: 100%; display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 1.6cqw; font: 500 var(--s)/1 'Satoshi', var(--cjk-sans); isolation: isolate; }
.cb-grid .h { font-size: var(--xs); letter-spacing: .1em; color: var(--ink-2); padding-bottom: 1.4cqw; }
.cb-grid span { position: relative; display: grid; place-items: center; height: 7.4cqw; min-height: 22px; }
.cb-grid .su { color: var(--shu); } .cb-grid .sa { color: var(--ao); }
.cb-grid .mx::before { content: ''; position: absolute; left: 0; right: 0; top: 12%; bottom: 12%; background: rgba(201,68,44,.12); z-index: -1; }
.cb-grid .mx.cap-l::before { left: 12%; border-radius: 99px 0 0 99px; }
.cb-grid .mx.cap-r::before { right: 12%; border-radius: 0 99px 99px 0; }
.cb-grid .wd { color: #fff; font-weight: 700; }
.cb-grid .wd::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7.2cqw; height: 7.2cqw; min-width: 22px; min-height: 22px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--shu); z-index: -1; }
.cb-legend { margin-top: 4.6cqw; display: flex; flex-wrap: wrap; justify-content: center; gap: 2cqw 5cqw; font: 500 var(--xs)/1 'Satoshi', var(--cjk-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
html:not(:lang(en)) .cb-legend { letter-spacing: .04em; }
.cb-legend span { display: flex; align-items: center; gap: 1.6cqw; }
.cb-legend b { font-weight: 500; }
.lg-mix { width: 5cqw; height: 2.4cqw; border-radius: 99px; background: rgba(201,68,44,.16); }
.lg-day { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--shu); }
.cb-note { margin-top: 7cqw; max-width: 88%; font: 400 var(--s)/1.6 var(--sans); color: var(--ink); }
html:not(:lang(en)) .cb-note { line-height: 1.8; letter-spacing: .03em; }

/* 03 · venue */
.venue-type { position: absolute; left: 0; top: 5cqw; width: 100%; height: auto; overflow: visible; mix-blend-mode: multiply; }
.vt-tokyo { font-family: 'Melodrame', serif; font-size: 122px; letter-spacing: -5px; text-anchor: middle; }
.vt-red { fill: var(--shu); }
/* sits on Tokyo's x-height, tucked against the k's ascender (x/y measured from the glyphs) */
.vt-kanji { font-family: var(--jp); font-weight: 500; font-size: 25px; letter-spacing: 2px; text-anchor: start; }
.vt-ink { fill: var(--ink); }
.vt-cut { fill: var(--paper); }
.venue-scrap { position: absolute; left: 24cqw; top: 60cqw; width: 34cqw; height: 38cqw; transform: rotate(-4deg);
  background: var(--tex), #f0efeb; background-size: 300px; background-blend-mode: multiply; box-shadow: 0 .5cqw 1cqw rgba(0,0,0,.08);
  -webkit-clip-path: polygon(2% 3%,12% 0,24% 2%,37% 0,52% 3%,66% 1%,81% 3%,97% 0,100% 18%,98% 36%,100% 55%,97% 74%,100% 97%,82% 100%,64% 97%,45% 100%,28% 98%,9% 100%,0 86%,3% 66%,0 44%,2% 24%);
          clip-path: polygon(2% 3%,12% 0,24% 2%,37% 0,52% 3%,66% 1%,81% 3%,97% 0,100% 18%,98% 36%,100% 55%,97% 74%,100% 97%,82% 100%,64% 97%,45% 100%,28% 98%,9% 100%,0 86%,3% 66%,0 44%,2% 24%); }
.venue-tower { position: absolute; top: 48cqw; height: 60cqw; aspect-ratio: 564 / 2116; left: calc(41% - 60cqw * 564 / 2116 / 2); }
.venue-tower img { width: 100%; height: 100%; filter: drop-shadow(.4cqw .6cqw .5cqw rgba(0,0,0,.2)); }
.venue-band { position: absolute; left: -3cqw; right: -5cqw; top: 64.2%; height: 4.4%; border: .35cqw solid var(--shu); }
.venue-band-fill { position: absolute; inset: 0; background: var(--shu); mix-blend-mode: multiply; opacity: .78; }
.venue-leader { position: absolute; left: calc(100% + 5cqw); top: 66.4%; display: flex; align-items: flex-start; }
.venue-leader i { width: 6cqw; height: 1px; background: var(--shu); flex: none; }
.venue-leader span { margin-left: 2cqw; margin-top: -.72em; font: 500 var(--xs)/1.45 var(--sans); letter-spacing: .04em; color: var(--shu); white-space: nowrap; }
.venue-leader span b { display: block; font-weight: 700; }
.venue-datum { position: absolute; right: calc(100% + 6cqw); font: 500 var(--xs)/1 'Satoshi', sans-serif; letter-spacing: .14em; white-space: nowrap; color: var(--ink-2); }
.venue-datum b { font-size: 2.6cqw; color: var(--ink); font-weight: 400; }
.venue-datum.d-top { top: 64.2%; } .venue-datum.d-gl { top: calc(100% - 3.5cqw); }
.venue-dimline { position: absolute; right: calc(100% + 4.6cqw); top: 66.3%; bottom: 1.2cqw; width: 1px; background: rgba(31,29,27,.4); }
.venue-dimline::before, .venue-dimline::after { content: ''; position: absolute; left: -1.1cqw; width: 2.2cqw; height: 1px; background: rgba(31,29,27,.55); transform: rotate(-45deg); }
.venue-dimline::before { top: 0; } .venue-dimline::after { bottom: 0; }
.tape { position: absolute; width: 13cqw; height: 4.2cqw; background: rgba(238,236,228,.8); box-shadow: 0 .2cqw .4cqw rgba(0,0,0,.06);
  -webkit-clip-path: polygon(0 8%,6% 0,12% 10%,18% 0,100% 4%,96% 50%,100% 100%,0 94%,4% 50%); clip-path: polygon(0 8%,6% 0,12% 10%,18% 0,100% 4%,96% 50%,100% 100%,0 94%,4% 50%); }
.tape.t1 { top: 16%; left: -7cqw; transform: rotate(-24deg); }
.tape.t2 { bottom: 3%; right: -8cqw; transform: rotate(18deg); }
.venue-name { position: absolute; left: 0; right: 0; bottom: 10cqw; text-align: center; font: 400 max(18px, 7.8cqw)/1 'Melodrame', serif; letter-spacing: -.01em; }

/* 04 · rsvp */
.rsvp, .rsvp-next { position: absolute; inset: 8cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear 0s; }
.rsvp-title { font: 400 max(22px, 10cqw)/1 var(--serif); letter-spacing: -.015em; }
html:not(:lang(en)) .rsvp-title { font-size: max(19px, 7cqw); font-weight: 500; letter-spacing: .04em; }
.rsvp-names { margin-top: 7cqw; width: 94%; display: flex; gap: 5cqw; }
.rsvp-name { flex: 1; min-width: 0; display: block; padding: 1cqw 0 1.8cqw; border: 0; border-bottom: 1px solid rgba(31,29,27,.4); background: transparent; border-radius: 0;
  font: 400 max(16px, 4.8cqw)/1.2 var(--serif); color: var(--ink); text-align: center; outline: none; -webkit-appearance: none; caret-color: var(--shu); }
.rsvp-name::placeholder { color: rgba(31,29,27,.28); }
.rsvp-name:focus { border-bottom-color: var(--ink); }
.hanko-row { border: 0; margin-top: 8cqw; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 3cqw; }
.hanko { display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; cursor: pointer; position: relative; }
.hanko input { position: absolute; opacity: 0; pointer-events: none; }
.hanko-seat { position: relative; width: max(52px, 17cqw); height: max(52px, 17cqw); border-radius: 50%; border: 1px dashed rgba(31,29,27,.3); display: grid; place-items: center; transition: border-color .3s; }
.hanko-seat::before { content: ''; position: absolute; inset: 1.4cqw; border-radius: 50%; border: 1px solid rgba(31,29,27,.1); }
.hanko-ink { position: absolute; inset: -.6cqw; border-radius: 50%; border: .9cqw solid var(--shu); color: var(--shu); display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 900 max(15px, 5cqw)/1.02 var(--jp); filter: url(#stamp); opacity: 0; transform: scale(1.35) rotate(var(--r, -8deg)); mix-blend-mode: multiply; }
.hanko-ink::before { content: ''; position: absolute; inset: .7cqw; border-radius: 50%; border: .3cqw solid var(--shu); opacity: .9; }
.hanko-ink b { font-weight: 900; }
.hanko-cap { font: 500 var(--xs)/1.35 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); text-align: center; transition: color .3s; }
html:not(:lang(en)) .hanko-cap { letter-spacing: .04em; }
.hanko:hover .hanko-seat { border-color: rgba(31,29,27,.6); }
.hanko.is-on .hanko-cap { color: var(--ink); }
.hanko:not(.is-on) .hanko-ink { opacity: .1; filter: none; transform: scale(.8); color: var(--ink); border-color: transparent; mix-blend-mode: normal; }
.hanko:not(.is-on) .hanko-ink::before { opacity: 0; }
.hanko:not(.is-on):hover .hanko-ink { opacity: .22; }
.hanko.is-on .hanko-ink { animation: stamp .5s cubic-bezier(.3,1.4,.5,1) forwards; }
.hanko.is-on .hanko-seat { border-color: transparent; }
.hanko input:focus-visible + .hanko-seat { outline: 1px solid var(--ink); outline-offset: 3px; }
@keyframes stamp {
  0%   { opacity: 0; transform: scale(1.5) rotate(calc(var(--r) - 10deg)); }
  45%  { opacity: 1; transform: scale(.94) rotate(var(--r)); }
  70%  { transform: scale(1.02) rotate(var(--r)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--r)); }
}
.plus { margin-top: 6cqw; display: flex; align-items: center; justify-content: center; gap: 4cqw; min-height: max(40px, 11cqw);
  opacity: 0; visibility: hidden; transform: translateY(2cqw); transition: opacity .4s, transform .4s, visibility 0s .4s; }
.rsvp.is-yes .plus { opacity: 1; visibility: inherit; transform: none; transition: opacity .4s, transform .4s; }
.plus-label { font: 500 var(--xs)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
html:not(:lang(en)) .plus-label { letter-spacing: .06em; }
.stepper { display: flex; align-items: center; gap: 3cqw; }
.step { width: max(36px, 9.5cqw); height: max(36px, 9.5cqw); border-radius: 50%; border: 1px solid rgba(31,29,27,.4); background: none; cursor: pointer;
  font: 300 max(18px, 5cqw)/1 var(--sans); color: var(--ink); display: grid; place-items: center; transition: background .2s, color .2s, opacity .2s; }
.step:hover { background: var(--ink); color: #fff; }
.step:disabled { opacity: .3; pointer-events: none; }
.plus-n { min-width: 6cqw; font: 400 max(22px, 7cqw)/1 'Melodrame', serif; }
.rsvp-error { margin-top: 3cqw; min-height: 1.4em; font: 500 var(--xs)/1.35 var(--sans); color: var(--shu); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 2.2cqw; cursor: pointer; text-decoration: none; border-radius: 99px;
  min-height: 42px; padding: 3.2cqw 6.6cqw; font: 700 var(--xs)/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; transition: transform .2s, background .25s, color .25s; }
html:not(:lang(en)) .btn { letter-spacing: .08em; font-size: max(11px, 2.8cqw); }
.btn:active { transform: scale(.97); }
.btn svg { width: max(13px, 3.6cqw); height: max(13px, 3.6cqw); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.btn-solid { border: 0; background: var(--ink); color: #fff; box-shadow: 0 .6cqw 1.4cqw -.4cqw rgba(0,0,0,.35); }
.btn-solid:hover { background: var(--env); }
.btn-line { border: 1px solid rgba(31,29,27,.45); background: none; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-text { border: 0; background: none; color: var(--ink-2); box-shadow: none; text-decoration: underline; text-underline-offset: 4px; }
.confirm { margin-top: 1cqw; }

.rsvp-next { opacity: 0; visibility: hidden; transform: translateY(3cqw); }
.card-rsvp.is-next .rsvp { opacity: 0; visibility: hidden; transform: translateY(-3cqw); transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; }
.card-rsvp.is-next .rsvp-next { opacity: 1; visibility: inherit; transform: none; transition: opacity .6s ease .45s, transform .6s ease .45s; }
.next-msg { max-width: 86%; font: 400 max(18px, 7cqw)/1.1 var(--serif); }
html:not(:lang(en)) .next-msg { font-size: max(15px, 4.8cqw); line-height: 1.6; font-weight: 500; }
.rsvp-next .cal-btns { margin-top: 8cqw; width: 74%; display: flex; flex-direction: column; gap: 3cqw; }
.rsvp-next .cal-btns .btn::before { content: '＋'; font-weight: 400; margin-right: .4em; }
.next-actions { margin-top: 10cqw; display: flex; align-items: center; gap: 3cqw; }
.card-rsvp.is-folding .card-tilt > * { transition: opacity .35s; opacity: 0; }

/* ============ plane / sent ============ */
.plane-layer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; overflow: visible; display: none; }
.plane-layer polygon { stroke-linejoin: round; }
.sent { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 31; text-align: center; pointer-events: none; visibility: hidden; width: min(86vw, 420px); }
.sent-icon { width: 84px; height: 84px; margin: 0 auto 22px; }
.sent-icon svg { width: 100%; height: 100%; overflow: visible; }
.sent-ring { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; filter: drop-shadow(0 6px 10px rgba(20,20,20,.12)); }
.sent-plane { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.sent-badge { fill: var(--shu); }
.sent-check { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; }
.sent-title { font: 400 clamp(30px, 6vw, 44px)/1 var(--serif); letter-spacing: -.01em; }
html:not(:lang(en)) .sent-title { font-size: clamp(22px, 5vw, 32px); line-height: 1.5; font-weight: 500; }
.sent-sub { margin-top: 14px; font: 500 11px/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); }
html:not(:lang(en)) .sent-sub { letter-spacing: .06em; font-size: 12px; }

/* ============ finale ============ */
.finale { position: fixed; inset: 0; z-index: 20; visibility: hidden; pointer-events: none; }
.finale.is-on { pointer-events: auto; }
.finale-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.duo { display: flex; align-items: center; gap: min(5vw, 30px); margin-bottom: min(7vh, 52px); }
.portrait { width: min(31vw, 170px, 24vh); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 10px 24px -12px rgba(20,20,20,.35); }
.portrait img { object-position: 46% 36%; }
.portrait:last-child img { object-position: 52% 34%; }
.xi { font: 700 min(11vw, 48px)/1 'Noto Serif SC', 'Noto Serif TC', 'Songti SC', serif; color: var(--shu); filter: url(#ink-s); }
.finale-title { font: 400 clamp(30px, 6.4vw, 46px)/1 var(--serif); letter-spacing: -.015em; }
html:not(:lang(en)) .finale-title { font-size: clamp(22px, 5.2vw, 34px); line-height: 1.5; font-weight: 500; letter-spacing: .04em; }
.finale-sub { margin-top: 14px; font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
.restart { margin-top: min(6vh, 44px); background: none; border: 0; cursor: pointer; padding: 10px 6px;
  font: 500 10px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--ink-2); opacity: .75;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(31,29,27,.3); transition: opacity .2s; }
html:not(:lang(en)) .restart { letter-spacing: .08em; font-size: 12px; }
.restart:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .scroll-hint i { animation: none; }
  .card-tilt { transition: none; }
}