/* ================= HỒI 2: HÔM NAY ================= */
.today{
  position:relative; visibility:hidden;
  background:var(--ivory-2); color:var(--ink-2); font-family:var(--f-body);
}
.today.on{ visibility:visible; }
html:not(.locked) body{ background:var(--ivory-2); }

.progress{ position:fixed; left:0; top:0; z-index:50; width:100%; height:2px; background:var(--red);
  transform-origin:0 50%; transform:scaleX(0); }

.today section{ position:relative; }
.today .title{ margin:18px 0 0; font:400 clamp(40px, 10vw, 96px)/1.0 var(--f-display); letter-spacing:-.01em; color:var(--ink-2); }
.today .title em{ font-style:italic; color:var(--red); }

.btn-line{
  display:inline-flex; align-items:center; gap:8px; padding:12px 16px 11px;
  border:1px solid rgb(22 17 15 / .8); border-radius:0; background:transparent; text-decoration:none;
  font:500 11px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
  transition:background .3s, color .3s, border-color .3s;
}
.btn-line:hover, .btn-line:focus-visible{ background:var(--red); border-color:var(--red); color:var(--ivory); }
.btn-text{ border:0; background:none; padding:6px 0; font:500 11px var(--f-mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); text-decoration:underline; text-underline-offset:4px; }

/* ---------- Cảnh 6: Hero ---------- */
.hero{ min-height:100svh; overflow:hidden; padding-top:max(26px, env(safe-area-inset-top)); }
.kicker{ position:relative; z-index:2; margin:0; padding:0 6vw;
  font:500 11px/1.4 var(--f-mono); letter-spacing:.2em; color:var(--red); }
.names{ position:relative; z-index:2; margin:.22em 0 0 calc(6vw - .04em); color:var(--red);
  font:400 clamp(50px, 15vw, 210px)/.92 var(--f-display); letter-spacing:-.015em; }
.names em{ font-style:italic; font-weight:400; }
.names .amp{ margin:.02em 0 -.04em 1.05em; font-size:.62em; line-height:1; color:var(--gold); }
.hero-side{ position:absolute; z-index:2; right:max(10px, 2.2vw); top:34svh; margin:0;
  writing-mode:vertical-rl; font:500 9.5px/1 var(--f-mono); letter-spacing:.32em; color:var(--mute); }
.hero-photo{ position:absolute; left:0; right:0; top:24svh; bottom:0; margin:0; overflow:hidden; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 100%; will-change:transform;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 28%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 28%); }
.scroll-cue{ position:absolute; z-index:2; left:6vw; bottom:max(22px, env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px; text-decoration:none;
  font:500 10px/1 var(--f-mono); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); }
.scroll-cue i{ position:relative; width:1px; height:44px; background:rgb(22 17 15 / .2); overflow:hidden; }
.scroll-cue i::after{ content:""; position:absolute; left:0; top:0; width:1px; height:40%; background:var(--red);
  animation:cue 1.8s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes cue{ from{ translate:0 -100%; } to{ translate:0 260%; } }

@media (orientation: landscape) and (min-width: 640px){
  .names{ margin-top:10svh; font-size:clamp(80px, 9vw, 210px); }
  .hero-photo{ left:auto; right:7vw; top:0; width:44vw;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 16%);
            mask-image:linear-gradient(to right, transparent 0, #000 16%); }
  .hero-photo img{ object-position:50% 70%; }
  .hero-side{ top:auto; bottom:6svh; }
}

/* ---------- Cảnh 7: Hai chúng mình ---------- */
.couple{ padding:clamp(90px, 16svh, 180px) 6vw clamp(60px, 10svh, 120px); }
.couple-grid{ display:grid; gap:36px; margin-top:36px; }
.person small{ display:block; font:500 11px/1 var(--f-mono); letter-spacing:.22em; color:var(--red); }
.person h3{ margin:14px 0 14px; font:400 clamp(40px, 10.5vw, 66px)/1.02 var(--f-display); letter-spacing:-.01em; }
.person h3 span{ display:block; font-size:.5em; letter-spacing:.02em; color:var(--mute); margin-bottom:.15em; }
.person .role{ margin:0; font:italic 400 18px/1.4 var(--f-display); color:var(--red); }
.person .parents{ margin:4px 0 0; font:300 16px/1.7 var(--f-body); }
.groom{ text-align:right; }
.couple-photo{ margin:0 -6vw; overflow:hidden; aspect-ratio:3/4; }
.couple-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 78%; }
@media (min-width: 900px){
  .couple-grid{ grid-template-columns:1fr minmax(320px, 32vw) 1fr; align-items:end; gap:4vw; margin-top:48px; }
  .person h3{ font-size:clamp(40px, 3.8vw, 66px); }
  .bride{ text-align:right; padding-bottom:12svh; }
  .groom{ text-align:left; padding-bottom:4svh; }
  .couple-photo{ margin:0; aspect-ratio:auto; height:min(82svh, 820px); }
}

/* ---------- Cảnh 8: Đếm ngược + lịch ---------- */
.date{ padding:clamp(80px, 14svh, 160px) 6vw; border-top:1px solid rgb(22 17 15 / .1); }
.cd-for{ margin:22px 0 0; font:400 15px/1.6 var(--f-body); color:var(--mute); }
.cd-for span{ color:var(--ink-2); font-weight:500; }
.countdown{ display:grid; grid-template-columns:repeat(4, auto); justify-content:start; gap:0; margin-top:34px; }
.cd-unit{ padding:0 clamp(8px, 2.6vw, 40px); border-left:1px solid rgb(22 17 15 / .14); }
.cd-unit:first-child{ padding-left:0; border-left:0; }
.cd-num{ position:relative; display:block; height:1em; overflow:hidden;
  font:300 clamp(40px, 12.6vw, 160px)/1 var(--f-body); font-variant-numeric:tabular-nums; letter-spacing:-.04em; color:var(--red); }
.cd-num > span{ display:block; }
.cd-num > span + span{ position:absolute; left:0; top:0; }
.cd-unit small{ display:block; margin-top:10px; font:500 10.5px/1 var(--f-mono); letter-spacing:.22em; color:var(--mute); }
.cd-done{ margin:30px 0 0; font:italic 400 clamp(30px, 7vw, 60px)/1.15 var(--f-display); color:var(--red); }

.calendar{ margin-top:64px; max-width:440px; }
.cal-head{ display:flex; justify-content:space-between; align-items:baseline; padding-bottom:12px; border-bottom:1px solid rgb(22 17 15 / .14); }
.cal-head b{ font:400 30px/1 var(--f-display); }
.cal-head span{ font:500 11px var(--f-mono); letter-spacing:.2em; color:var(--mute); }
.cal-grid{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); margin-top:12px; text-align:center; }
.cal-grid .wd{ padding:6px 0 10px; font:500 10px var(--f-mono); letter-spacing:.12em; color:var(--mute); }
.cal-grid .day{ position:relative; display:grid; place-items:center; aspect-ratio:1; font:300 16px/1 var(--f-body); font-variant-numeric:tabular-nums; }
.cal-grid .day.cn{ color:var(--red); }
.cal-grid .day.mark{ font-weight:500; color:var(--red); }
.cal-grid .day svg{ position:absolute; inset:-6%; width:112%; height:112%; overflow:visible; pointer-events:none; }
.cal-grid .day svg path{ fill:none; stroke:var(--red); stroke-width:1.6; stroke-linecap:round; }
.cal-legend{ display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:16px; padding-top:14px; border-top:1px solid rgb(22 17 15 / .14);
  font:400 13px/1.4 var(--f-body); color:var(--ink-2); }
.cal-legend b{ font:500 13px var(--f-mono); color:var(--red); margin-right:6px; }
@media (min-width: 900px){
  .date{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); column-gap:6vw; align-items:start; }
  .date > *{ grid-column:1; }
  .date .calendar{ grid-column:2; grid-row:1 / span 3; align-self:end; justify-self:end; width:100%; margin-top:0; }
  .date .countdown, .date .cd-done{ grid-column:1 / -1; margin-top:64px; }
  .cd-num{ font-size:clamp(46px, 11vw, 190px); }
}

/* ---------- Lịch trình ---------- */
.schedule{ padding:clamp(80px, 14svh, 160px) 6vw clamp(40px, 8svh, 80px); border-top:1px solid rgb(22 17 15 / .1); }
.events{ position:relative; margin-top:56px; padding-left:44px; }
.events::before{ content:""; position:absolute; left:9px; top:8px; bottom:40px; width:1px; background:rgb(22 17 15 / .12); }
.rail{ position:absolute; left:9px; top:8px; bottom:40px; width:1px; background:var(--red); transform-origin:50% 0; transform:scaleY(0); }
.event{ position:relative; padding-bottom:84px; }
.event .dot{ position:absolute; left:-41px; top:3px; width:13px; height:13px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 6px var(--ivory-2); }
.ev-no{ margin:0; font:500 11px/1.4 var(--f-mono); letter-spacing:.2em; color:var(--red); }
.ev-mine{ display:inline-block; margin-left:8px; padding:3px 7px 2px; background:var(--red); color:var(--ivory); font-size:9.5px; letter-spacing:.16em; vertical-align:1px; }
.ev-time{ margin:14px 0 0; font:300 clamp(64px, 19vw, 150px)/.95 var(--f-body); letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--ink-2); }
.ev-date{ margin:10px 0 0; font:400 clamp(24px, 6vw, 36px)/1.2 var(--f-display); }
.ev-lunar{ margin:4px 0 0; font:italic 400 16px/1.4 var(--f-display); color:var(--mute); }
.ev-addr{ margin:18px 0 0; max-width:34ch; font:300 16px/1.65 var(--f-body); }
.ev-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
@media (min-width: 900px){
  .events{ padding-left:64px; }
  .event{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); column-gap:5vw; align-items:end; }
  .event .dot{ left:-61px; }
  .event > *{ grid-column:2; }
  .event .ev-no{ grid-column:1 / -1; }
  .event .ev-time{ grid-column:1; grid-row:2 / span 4; align-self:start; }
}

/* ---------- Cảnh 9: Album — cuộn phim, ảnh rõ dần ---------- */
.album{ position:relative; height:100svh; overflow:hidden; background:var(--ivory-2); border-top:1px solid rgb(22 17 15 / .1); }
.album-intro{ position:absolute; z-index:2; left:6vw; right:6vw; top:max(60px, 9svh); }
.album-intro .title{ font-size:clamp(32px, 8.4vw, 76px); }
.album-intro .title > span{ display:block; }
.album-word{ position:absolute; right:3vw; bottom:8svh; margin:0; pointer-events:none;
  font:italic 400 clamp(130px, 36vw, 440px)/.9 var(--f-display); color:transparent;
  -webkit-text-stroke:1px var(--red-soft); opacity:.6; }
.album-rail{ position:absolute; left:0; right:0; top:57%; transform:translateY(-50%) rotate(-3deg); }
.album-track{ position:relative; display:flex; align-items:center; gap:14px; width:max-content; margin-left:58vw;
  padding:46px 14px; background:#1A1311; will-change:transform; box-shadow:0 34px 50px -30px rgb(22 17 15 / .65); }
.album-track::before, .album-track::after{ content:""; position:absolute; left:0; right:0; height:11px;
  background:repeating-linear-gradient(90deg, transparent 0 10px, rgb(250 248 246 / .94) 10px 22px, transparent 22px 32px); }
.album-track::before{ top:9px; }
.album-track::after{ bottom:9px; }
.film-leader{ flex:none; align-self:stretch; width:min(36vw, 300px); display:flex; flex-direction:column; justify-content:space-between;
  padding:4px 6px; font:600 10px/1 var(--f-mono); letter-spacing:.22em; color:var(--gold); }
.film-leader b{ font:italic 400 clamp(26px, 6vw, 44px)/1 var(--f-display); letter-spacing:0; color:rgb(250 248 246 / .85); }
.film-tail{ flex:none; width:30vw; align-self:stretch; }
.frame{ position:relative; flex:none; margin:0; cursor:zoom-in; transform-origin:50% 50%; will-change:transform; }
.frame .ph{ position:relative; height:min(44svh, 560px); overflow:hidden; background:#2B1D19; }
.frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.frame .pos{ will-change:filter, transform; }
.frame .flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.frame .edge{ position:absolute; left:2px; font:600 9px/1 var(--f-mono); letter-spacing:.22em; color:var(--gold); white-space:nowrap; }
.frame .edge.top{ top:-23px; }
.frame .edge.bot{ bottom:-23px; }
.album-hud{ position:absolute; z-index:2; left:6vw; right:6vw; bottom:max(22px, env(safe-area-inset-bottom));
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  font:500 10.5px/1.3 var(--f-mono); letter-spacing:.2em; color:var(--ink-2); }
.album-hud .mask{ display:inline-block; vertical-align:bottom; }
.album-hud b{ color:var(--red); font-weight:600; }
#albumState{ text-align:right; color:var(--mute); }
#albumState.done{ color:var(--red); }
@media (min-width: 900px){
  .album-intro{ right:auto; width:52vw; }
  .album-rail{ top:61%; }
  .frame .ph{ height:min(52svh, 600px); }
}

/* ---------- Cảnh 10: Thư hồi âm ---------- */
.rsvp{ padding:clamp(80px, 14svh, 160px) 6vw clamp(130px, 18svh, 180px); border-top:1px solid rgb(22 17 15 / .1); overflow:hidden; }
.rsvp-stage{ position:relative; max-width:600px; margin-top:44px; }
.rsvp-card{ display:grid; gap:28px; padding:clamp(24px, 6vw, 44px); background:#fff; border:1px solid rgb(22 17 15 / .08);
  box-shadow:0 30px 60px -40px rgb(22 17 15 / .35); transform-origin:50% 40%; }
.field{ display:grid; gap:10px; margin:0; padding:0; border:0; min-width:0; }
.field > span, .field legend{ padding:0; font:500 10.5px/1 var(--f-mono); letter-spacing:.2em; color:var(--mute); }
.field legend{ margin-bottom:10px; }
.field input:not([type=radio]), .field textarea{
  width:100%; padding:8px 0 10px; border:0; border-bottom:1px solid rgb(22 17 15 / .25); border-radius:0; background:transparent;
  font:300 18px/1.5 var(--f-body); color:var(--ink-2); outline:none; transition:border-color .3s; resize:vertical;
}
.field input:focus, .field textarea:focus{ border-bottom-color:var(--red); }
.field input::placeholder, .field textarea::placeholder{ color:#B9B3B1; }
.choice{ display:flex; flex-wrap:wrap; gap:8px; }
.choice label{ position:relative; }
.choice input{ position:absolute; opacity:0; inset:0; }
.choice span{ display:block; padding:12px 16px; border:1px solid rgb(22 17 15 / .2); font:400 14.5px/1.2 var(--f-body); transition:background .25s, color .25s, border-color .25s; cursor:pointer; }
.choice input:checked + span{ background:var(--red); border-color:var(--red); color:var(--ivory); }
.choice input:focus-visible + span{ outline:2px solid var(--red); outline-offset:2px; }
.choice.small span{ padding:10px 12px; font-size:13.5px; }
.field-row{ display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start; }
.stepper{ display:flex; align-items:center; border:1px solid rgb(22 17 15 / .2); width:max-content; }
.stepper button{ width:42px; height:42px; border:0; background:none; font:300 22px/1 var(--f-body); }
.stepper input{ width:40px !important; padding:0 !important; border:0 !important; text-align:center; font:400 17px var(--f-body) !important; }
.btn-send{ display:flex; justify-content:space-between; align-items:center; width:100%; padding:20px 22px; border:0; background:var(--ink-2); color:var(--ivory);
  font:500 12.5px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; transition:background .3s; }
.btn-send i{ font-style:normal; font-size:18px; transition:translate .3s var(--ease-out); }
.btn-send:hover{ background:var(--red); }
.btn-send:hover i{ translate:6px 0; }
.btn-send:disabled{ opacity:.6; }
.rsvp-error{ margin:-12px 0 0; min-height:1em; font:400 13px var(--f-body); color:var(--red); }
.rsvp-envelope{ position:absolute; left:50%; top:120px; width:220px; height:140px; margin-left:-110px; visibility:hidden; }
.rsvp-envelope svg{ width:100%; height:100%; filter:drop-shadow(0 12px 20px rgb(22 17 15 / .2)); }
.rsvp-envelope .rubber{ font-size:15px; }
.rsvp-done{ padding:10px 0 0; }
.rsvp-done-title{ margin:0; font:400 clamp(30px, 7vw, 52px)/1.15 var(--f-display); }
.rsvp-done-title em{ color:var(--red); }
.rsvp-done > p:not(.rsvp-done-title){ margin:16px 0 0; font:300 17px/1.6 var(--f-body); }
.rsvp-gift{ margin-top:28px; padding:20px 0; border-top:1px solid rgb(22 17 15 / .12); border-bottom:1px solid rgb(22 17 15 / .12); }
.rsvp-gift p{ margin:0 0 14px; font:italic 400 17px/1.5 var(--f-display); }
.rsvp-done .btn-text{ margin-top:22px; }
.mini-road{ position:absolute; left:0; right:0; bottom:28px; height:80px; pointer-events:none; overflow:hidden; }
.mini-road::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgb(22 17 15 / .25); }
.mini-road svg{ position:absolute; left:0; bottom:0; width:96px; visibility:hidden; }

@media (min-width: 900px){
  .rsvp{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1fr); column-gap:6vw; align-items:start; }
  .rsvp > .label, .rsvp > .title{ grid-column:1; }
  .rsvp-stage{ grid-column:2; grid-row:1 / span 3; margin-top:0; }
}

/* ---------- Cảnh 11: Lời cảm ơn ---------- */
.thanks{ min-height:118svh; overflow:hidden; border-top:1px solid rgb(22 17 15 / .1); }
.thanks-text{ position:relative; z-index:2; padding:clamp(70px, 12svh, 140px) 6vw 0; }
.thanks-title{ margin:14px 0 0; font:italic 400 clamp(60px, 17vw, 190px)/.92 var(--f-display); color:var(--red); letter-spacing:-.02em; }
.thanks-body{ max-width:34ch; margin:22px 0 0; font:300 16.5px/1.7 var(--f-body); }
.thanks-sign{ width:min(250px, 66vw); margin-top:4px; overflow:visible; }
.thanks-photo{ position:absolute; left:0; right:0; top:44svh; bottom:0; margin:0; overflow:hidden; }
.thanks-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 100%;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 30%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 30%); }
@media (orientation: landscape) and (min-width: 640px){
  .thanks{ min-height:100svh; }
  .thanks-text{ width:50vw; padding-top:20svh; }
  .thanks-title{ font-size:clamp(60px, 8.6vw, 190px); }
  .thanks-photo{ left:auto; right:7vw; top:0; width:42vw;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 16%);
            mask-image:linear-gradient(to right, transparent 0, #000 16%); }
  .thanks-photo img{ object-position:50% 70%; -webkit-mask-image:none; mask-image:none; }
}

/* ---------- Chân trang ---------- */
.foot{ display:grid; justify-items:center; gap:14px; padding:72px 6vw max(80px, calc(env(safe-area-inset-bottom) + 64px)); text-align:center; background:var(--ivory-2); }
.gift-stamp{ --p:12px; width:120px; height:156px; border:0; background:var(--ivory); rotate:-4deg;
  filter:drop-shadow(0 8px 14px rgb(22 17 15 / .2)); transition:rotate .5s var(--ease-out), translate .5s var(--ease-out); }
.gift-stamp:hover{ rotate:0deg; translate:0 -4px; }
.gift-stamp-in{ display:grid; place-content:center; justify-items:center; gap:2px; height:100%; border:1px solid var(--red-soft); background:var(--paper), #FFF9F6; color:var(--red); }
.gift-stamp-in svg{ width:46px; height:46px; margin-bottom:10px; }
.gift-stamp-in b{ font:600 10px/1.5 var(--f-mono); letter-spacing:.16em; }
.foot-mono{ margin:16px 0 0; font:500 10.5px/1.6 var(--f-mono); letter-spacing:.2em; color:var(--mute); }
.foot-sign{ margin:0; font:700 28px/1 var(--f-hand); color:var(--red-deep); }

/* ---------- Xem ảnh ---------- */
.lightbox{ position:fixed; inset:0; z-index:70; background:rgb(22 17 15 / .95); display:grid; place-items:center; touch-action:pan-y; }
.lb-stage{ width:100%; height:100%; display:grid; place-items:center; padding:56px 12px 64px; }
.lb-stage img{ max-width:100%; max-height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.lb-close, .lb-nav{ position:absolute; border:0; background:none; color:var(--ivory); }
.lb-close{ top:max(10px, env(safe-area-inset-top)); right:10px; width:48px; height:48px; font-size:20px; }
.lb-nav{ top:50%; translate:0 -50%; width:56px; height:80px; font:300 44px/1 var(--f-body); opacity:.75; }
.lb-nav.prev{ left:4px; } .lb-nav.next{ right:4px; }
.lb-count{ position:absolute; bottom:max(18px, env(safe-area-inset-bottom)); left:0; right:0; margin:0; text-align:center;
  font:500 11px var(--f-mono); letter-spacing:.22em; color:rgb(251 244 240 / .7); }
@media (hover: none){ .lb-nav{ display:none; } }

/* ---------- Bưu phẩm gửi kèm ---------- */
.gift{ position:fixed; inset:0; z-index:65; }
.gift-scrim{ position:absolute; inset:0; background:rgb(22 17 15 / .45); }
.gift-sheet{ position:absolute; left:50%; bottom:0; width:min(100%, 600px); translate:-50% 0; max-height:94svh; overflow-y:auto; overscroll-behavior:contain;
  padding:30px clamp(18px, 5vw, 36px) max(30px, env(safe-area-inset-bottom)); background:var(--ivory-2); border-radius:18px 18px 0 0; }
.gift-close{ position:absolute; top:10px; right:10px; width:44px; height:44px; border:0; background:none; font-size:18px; }
.gift-lead{ margin:14px 0 26px; font:italic 400 18px/1.55 var(--f-display); color:var(--ink-2); }
.gift-envs{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:64px; }
.genv{ position:relative; aspect-ratio:1.45; border:0; padding:0; border-radius:4px; background:var(--paper), var(--red-velvet); color:var(--ivory);
  box-shadow:0 12px 24px -14px rgb(60 0 10 / .6); overflow:visible; perspective:600px; }
.genv::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:62%; background:#A5313C; clip-path:polygon(0 100%, 50% 18%, 100% 100%); border-radius:0 0 4px 4px; }
.genv-flap{ position:absolute; left:0; right:0; top:0; height:58%; background:#AE3843; clip-path:polygon(0 0, 100% 0, 50% 100%); transform-origin:50% 0; z-index:2; }
.genv b{ position:absolute; z-index:3; left:0; right:0; bottom:14%; font:600 10.5px/1 var(--f-mono); letter-spacing:.2em; }
.genv i{ position:absolute; z-index:3; left:50%; top:44%; width:30px; height:30px; translate:-50% -50%; border-radius:50%; background:var(--red); box-shadow:0 2px 4px rgb(0 0 0 / .3); }
.genv i::after{ content:""; position:absolute; inset:7px; background:currentColor; -webkit-mask:url(../assets/svg/favicon.svg) center / 100% no-repeat; opacity:0; }
.genv.active{ outline:2px solid var(--red); outline-offset:4px; }
.gift-detail{ margin-top:24px; }
.qr-stamp{ --p:12px; position:relative; width:252px; height:300px; margin:6px auto 0; background:var(--red); }
.qr-stamp-in{ display:grid; justify-items:center; align-content:center; gap:8px; height:100%; padding:14px; background:#fff; border:1px dashed var(--red-soft); }
.qr-stamp-in img, .qr-ph{ width:200px; height:200px; object-fit:contain; }
.qr-ph{ display:grid; place-items:center; padding:20px; background:repeating-linear-gradient(45deg, var(--blush) 0 8px, #fff 8px 16px); font:500 11px/1.5 var(--f-mono); letter-spacing:.08em; color:var(--red-deep); text-align:center; }
.qr-stamp-in small{ font:600 9.5px var(--f-mono); letter-spacing:.2em; color:var(--red); }
.qr-pm{ position:absolute; right:-26px; top:-22px; width:84px; height:84px; color:var(--red-deep); opacity:.45; rotate:-14deg; filter:url(#ink); }
.slip{ margin:26px auto 0; max-width:420px; padding:16px 18px; border:1px dashed rgb(22 17 15 / .3); background:var(--paper), #fff; font:400 13px/1.9 var(--f-mono); }
.slip p{ margin:0; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.slip p span:first-child{ min-width:10ch; color:var(--mute); }
.slip-actions{ position:relative; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px; }
.slip-actions .rubber{ left:auto; right:-6px; top:-30px; translate:none; font-size:11px; }