/* The AA Wedding — invitation
   Palette sampled from the film: velvet reds, card paper, green ink. */
:root {
  --velvet-900: #2a0204;
  --velvet-800: #4a0306;
  --velvet-600: #7a070b;
  --ivory: #f8ecd6;
  --ivory-dim: rgba(248, 236, 214, .74);
  --paper: #f4e3c8;
  --paper-2: #efdcbd;
  --ink: #2d3b24;
  --ink-soft: #5b6449;
  --gold: #d7b46a;

  --serif: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --script: 'Michelangelus Italic', 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.2, .7, .2, 1);
  --col: min(100vw, calc(100vh * 9 / 16));   /* the invitation's column: the film's 9:16 frame */
  --svh: 100vh;
}
@supports (height: 100svh) { :root { --col: min(100vw, calc(100svh * 9 / 16)); --svh: 100svh; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--velvet-900); color: var(--ivory); }
/* Only the root scrolls. (body must NOT become a scroll container: overflow-x:hidden on body + overscroll-behavior
   would swallow every wheel/touch scroll before it reaches the page.) */
html { overflow: hidden; height: 100%; overscroll-behavior-y: none; }
html.scrollable { overflow-x: hidden; overflow-y: auto; height: auto; scroll-behavior: smooth; }
body {
  min-height: 100%; overflow-x: clip; touch-action: manipulation;
  font-family: var(--serif); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 4px; border-radius: 999px; }
a { color: inherit; }

/* ------------------------------------------------------------ backdrop + stage */
#backdrop {
  position: fixed; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 45%, transparent 0 35%, rgba(18, 0, 2, .78) 100%),
    url(/media/backdrop.jpg) center / cover no-repeat, var(--velvet-800);
  filter: saturate(1.05);
}
#page { position: relative; }
#stage {
  position: relative; width: var(--col); height: var(--svh); margin: 0 auto;
  overflow: hidden; background: var(--velvet-800);
  isolation: isolate; contain: layout paint;
}
@media (min-aspect-ratio: 10/16) {
  #stage, #more { box-shadow: 0 0 0 1px rgba(255, 230, 200, .04), 0 40px 120px rgba(0, 0, 0, .55); }
}
.layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#poster { z-index: 0; }
#videos { z-index: 1; }
#videos video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; pointer-events: none; background: transparent;
}
#videos video.on { opacity: 1; }
#videos video.fade { transition: opacity .26s linear; }
.plate { z-index: 2; opacity: 0; pointer-events: none; transform-origin: 0 0; }
[data-state="deck"] #plate-sharp { opacity: 1; will-change: transform; }

.scrim { position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease-soft); }
.scrim-top { top: 0; height: 34%; background: linear-gradient(rgba(28, 0, 3, .62), rgba(28, 0, 3, .22) 55%, transparent); }
.scrim-bottom { bottom: 0; height: 44%; background: linear-gradient(transparent, rgba(28, 0, 3, .30) 40%, rgba(22, 0, 2, .78)); }
[data-state="loading"] .scrim-bottom,
[data-state="await-open"] .scrim, [data-state="opening"] .scrim-bottom,
[data-state="hover"] .scrim-bottom, [data-state="pick-wait"] .scrim-bottom { opacity: 1; }
[data-state="deck"] .scrim-bottom { opacity: .7; transition: opacity 1.8s .7s var(--ease-soft); }

/* ------------------------------------------------------------ type */
/* type system: eyebrow (12px, wide) · label (11.5px bold) · button (12px) · body serif ≥ 15px · script for names */
.eyebrow {
  margin: 0; font: 600 12px/1.3 var(--serif); letter-spacing: .3em; text-transform: uppercase;
  color: var(--ivory-dim); text-indent: .3em;
}
.script { margin: 0; font: 400 clamp(37px, 12.4vw, 53px)/1.14 var(--script); color: var(--ivory); letter-spacing: .005em; }
.script.greet.is-long { font-size: clamp(28px, 9vw, 40px); max-width: 15em; margin-inline: auto; }
.lede { margin: 0; font: italic 500 clamp(18px, 5.2vw, 22px)/1.35 var(--serif); color: var(--ivory-dim); letter-spacing: .01em; }
.script, .lede, .hint, .eyebrow { text-shadow: 0 1px 2px rgba(30, 0, 2, .55), 0 6px 28px rgba(30, 0, 2, .55); }

/* ------------------------------------------------------------ prompts */
.ui { position: absolute; inset: 0; z-index: 6; pointer-events: none; visibility: hidden; }
.ui.is-in { visibility: visible; }
.ui-top, .ui-bottom {
  position: absolute; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 24px;
}
.ui-top { top: calc(env(safe-area-inset-top) + 9.5%); gap: 4px; }
.ui-bottom { bottom: calc(env(safe-area-inset-bottom) + 7%); gap: 14px; }
.ui [data-in] {
  opacity: 0; transform: translateY(12px); filter: blur(6px);
  transition: opacity .9s var(--ease-soft), transform 1.1s var(--ease-out), filter .9s var(--ease-soft);
}
.ui.is-in [data-in] { opacity: 1; transform: none; filter: blur(0); }
.ui.is-in [data-in]:nth-child(2) { transition-delay: .14s; }
.ui.is-in [data-in]:nth-child(3) { transition-delay: .28s; }
.ui.is-in [data-in]:nth-child(4) { transition-delay: .42s; }
.ui.is-out [data-in] {
  opacity: 0; transform: translateY(-8px); filter: blur(8px); transition-duration: .45s; transition-delay: 0s !important;
  transition-timing-function: var(--ease-soft);
}
.ui .hint, .ui button, .ui a { pointer-events: auto; }

/* write-on reveal for the guest's name */
.write {
  display: inline-block; padding: 0 .18em .08em;
  -webkit-mask-image: linear-gradient(100deg, #000 0 42%, transparent 58% 100%);
  mask-image: linear-gradient(100deg, #000 0 42%, transparent 58% 100%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
.ui.is-in .write { animation: write-on 2.1s .25s var(--ease-soft) forwards; }
@keyframes write-on { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }

.hint {
  font: 600 12.5px/1 var(--serif); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: var(--ivory);
  padding: 14px 22px; border-radius: 999px; min-height: 44px;
}

/* the film's single call to action: below the screen until the film waits for a tap, then it rises (a little overshoot,
   so the eye catches it) with the lede; tapped, it drops straight away */
.cta-dock { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 7%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 20px; text-align: center; pointer-events: none;
  opacity: 0; transform: translateY(calc(100% + 60px)); transition: transform .38s cubic-bezier(.55, 0, .9, .4), opacity .3s ease; }
.cta-dock.up { opacity: 1; transform: none; transition: transform .75s cubic-bezier(.2, 1.35, .4, 1), opacity .4s ease; }
.cta-dock .cta { pointer-events: auto; }
.cta-dock .lede:empty { display: none; }
/* the call to action on the film: unmistakable for every guest, whatever their age — a solid ivory button with a
   finger tapping it and a gold glow breathing around it */
.cta {
  position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 30px 0 22px;
  border-radius: 999px; background: var(--ivory); color: var(--velvet-800);
  font: 700 19px/1.15 var(--serif); letter-spacing: .01em; text-align: left;
  box-shadow: 0 14px 34px -10px rgba(10, 0, 0, .75), inset 0 0 0 1px rgba(215, 180, 106, .7);
}
.cta::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: cta-glow 2.4s var(--ease-out) infinite; }
@keyframes cta-glow { 0% { box-shadow: 0 0 0 0 rgba(255, 228, 170, .6); } 70%, 100% { box-shadow: 0 0 0 20px rgba(255, 228, 170, 0); } }
.cta:active { background: #fff6e6; }
.cta-hand { position: relative; flex: none; width: 30px; height: 30px; }
.cta-hand svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transform-origin: 40% 90%; animation: cta-tap 2.4s var(--ease-soft) infinite; }
.cta-hand::after { /* the ring the fingertip leaves */
  content: ''; position: absolute; left: 3px; top: -5px; width: 14px; height: 14px; border-radius: 50%; border: 1.6px solid currentColor;
  opacity: 0; animation: cta-ring 2.4s var(--ease-out) infinite; }
@keyframes cta-tap { 0%, 30%, 100% { transform: none; } 12% { transform: translateY(3px) scale(.9); } }
@keyframes cta-ring { 0%, 10% { opacity: 0; transform: scale(.3); } 14% { opacity: .85; } 42%, 100% { opacity: 0; transform: scale(2.2); } }

/* loader: a little deck fanning while the film arrives, with the progress in plain words */
.loader-ui { gap: 14px; }
.ld-deck { position: relative; width: 70px; height: 50px; }
.ld-deck i { position: absolute; left: 50%; top: 4px; width: 30px; height: 42px; margin-left: -15px; border-radius: 3px;
  background: var(--paper); box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px rgba(45, 59, 36, .55), 0 4px 10px rgba(10, 0, 0, .5);
  transform-origin: 50% 115%; animation: ld-fan 2.2s var(--ease-soft) infinite; }
.ld-deck i:nth-child(1) { --a: -20deg; }
.ld-deck i:nth-child(3) { --a: 20deg; }
.ld-deck i:nth-child(2) { z-index: 1; }
.ld-deck i:nth-child(2)::after { content: '♥'; position: absolute; inset: 0; display: grid; place-items: center; font: 18px/1 var(--serif); color: var(--velvet-600); }
@keyframes ld-fan { 0%, 100% { transform: rotate(0deg); } 40%, 62% { transform: rotate(var(--a, 0deg)); } }
.ld-text { margin: 0; font: italic 500 21px/1.3 var(--serif); color: var(--ivory); text-shadow: 0 1px 2px rgba(30, 0, 2, .6), 0 6px 26px rgba(30, 0, 2, .6); }
.ld-dots i { font-style: normal; animation: ld-dot 1.4s infinite; opacity: .2; }
.ld-dots i:nth-child(2) { animation-delay: .2s; } .ld-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ld-dot { 30% { opacity: 1; } 60%, 100% { opacity: .2; } }
.ld-pct { margin: 0; font: 600 15px/1 var(--serif); letter-spacing: .08em; color: var(--ivory-dim); font-variant-numeric: tabular-nums; }

/* loader */
.progress { width: 200px; height: 4px; background: rgba(248, 236, 214, .18); overflow: hidden; border-radius: 4px; }
.progress i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--ivory));
  transform-origin: 0 50%; transform: scaleX(0); transition: transform .35s var(--ease-soft); }
#loader.is-out { transition: visibility 0s .6s; }

/* tap feedback */
#fx { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.ripple {
  position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  border: 1px solid rgba(255, 236, 205, .7);
  background: radial-gradient(circle, rgba(255, 228, 190, .28), transparent 62%);
  animation: ripple .95s var(--ease-out) forwards;
}
@keyframes ripple { from { transform: scale(.15); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.flash { position: absolute; inset: 0; background: radial-gradient(60% 40% at var(--x) var(--y), rgba(255, 226, 180, .22), transparent 70%); animation: flash .9s ease-out forwards; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

/* sound */
.chrome-btn {
  position: fixed; z-index: 30; top: calc(env(safe-area-inset-top) + 14px); right: calc((100vw - var(--col)) / 2 + 14px);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(30, 0, 3, .28); border: 1px solid rgba(255, 236, 214, .16);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  transition: transform .3s var(--ease-out), background .3s, opacity .6s; opacity: 0;
}
.chrome-btn.is-in { opacity: 1; }
.chrome-btn:hover { background: rgba(30, 0, 3, .42); }
.chrome-btn:active { transform: scale(.92); }
.chrome-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--ivory); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* top-right, left of the sound button: Instagram, YouTube, WhatsApp, in the same glass */
.chrome-row { position: fixed; z-index: 30; top: calc(env(safe-area-inset-top) + 16px); right: calc((100vw - var(--col)) / 2 + 14px + 48px);
  display: flex; gap: 6px; opacity: 0; transition: transform .45s var(--ease-out), opacity .6s; }
.chrome-row[hidden] { display: none; }
.chrome-row.is-in { opacity: 1; }
.chrome-row.away { transform: translateY(calc(-100% - 24px - env(safe-area-inset-top))); opacity: 0; pointer-events: none; }
.chrome-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ivory);
  background: rgba(30, 0, 3, .28); border: 1px solid rgba(255, 236, 214, .16);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); transition: transform .3s var(--ease-out), background .3s; }
.chrome-ic:hover { background: rgba(30, 0, 3, .42); }
.chrome-ic:active { transform: scale(.92); }
.chrome-ic svg, .foot-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chrome-btn .off { display: none; }
.chrome-btn.muted .on { display: none; }
.chrome-btn.muted .off { display: inline; }
/* top-left: replay the invitation. Slides away while scrolling down, returns on the way up. */
.chrome-btn.replay {
  left: calc((100vw - var(--col)) / 2 + 14px); right: auto; width: auto; padding: 0 15px 0 12px; gap: 8px; display: flex; align-items: center; border-radius: 99px;
  font: 600 11px/1 var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--ivory);
  transition: transform .55s var(--ease-out), opacity .45s ease, background .3s;
}
.chrome-btn.replay[hidden] { display: none; }
.chrome-btn.replay svg { width: 16px; height: 16px; }
.chrome-btn.replay:hover svg { transform: rotate(-40deg); transition: transform .4s var(--ease-out); }
.chrome-btn.replay.away { transform: translateY(calc(-100% - 24px - env(safe-area-inset-top))); opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------ deck */
#deck { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.card {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch);
  transform-origin: 0 0; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 4% / 2.83%;
  background: var(--paper) url(/media/card-blank.webp) center / 100% 100% no-repeat;
  /* the card art is photographed, so it carries its own light and edge — only the shadow is added, and it grows in
     as the card lifts off the table */
  box-shadow: 0 2px 3px rgba(40, 0, 0, .26), 0 14px 28px -10px rgba(25, 0, 0, .55), 0 34px 70px -28px rgba(15, 0, 0, .65);
  transition: box-shadow 1.1s var(--ease-soft);
  container-type: inline-size; overflow: hidden; color: var(--ink);
  touch-action: pan-y; pointer-events: none; opacity: 0;   /* vertical swipes scroll the page; horizontal ones deal cards */
}
.card.flat { box-shadow: 0 0 0 rgba(40, 0, 0, 0), 0 0 0 -10px rgba(25, 0, 0, 0), 0 0 0 -28px rgba(15, 0, 0, 0); }
.card.ready { opacity: 1; }
[data-state="deck"] .card.top { pointer-events: auto; cursor: grab; }
.card.top.dragging { cursor: grabbing; }
.card.aa { background-image: url(/media/card-aa.webp); }

.cc { /* content block inside the printed frame, above the palace */
  position: absolute; left: 14.5%; right: 14.5%; top: 11.5%; height: 50.5%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  mix-blend-mode: multiply;
}
/* large enough to read at arm's length: every line on a card is at least ~15px on a phone */
.c-when { margin: 0; font: 700 5cqw/1.2 var(--serif); letter-spacing: .18em; text-indent: .2em; text-transform: uppercase; color: var(--accent, var(--ink-soft)); }
.c-title { margin: 2.4cqw 0 3cqw; font: 400 13.6cqw/1.12 var(--script); color: var(--ink); padding: 0 .1em; white-space: nowrap; }
.c-venue-name { font-size: 11.2cqw; line-height: 1.06; margin: 0 0 2cqw; }
.c-city { margin: 0; font: 700 4.4cqw/1.2 var(--serif); letter-spacing: .24em; text-indent: .24em; text-transform: uppercase; color: var(--ink-soft); }
.c-orn { width: 40cqw; height: 4.6cqw; margin: 1.8cqw 0 2.4cqw; color: var(--ink); flex: none; }
.c-orn .suit { color: var(--accent, var(--ink)); }
.c-tag { margin: 0; font: italic 500 6.3cqw/1.26 var(--serif); color: #4b5340; max-width: 70cqw; text-wrap: balance; }
.c-date { margin: 3.4cqw 0 0; font: 700 6.8cqw/1.2 var(--serif); letter-spacing: .01em; color: var(--ink); }
.c-venue {
  margin-top: 3cqw; display: inline-flex; align-items: center; gap: 1.8cqw; text-decoration: none;
  font: 700 3.9cqw/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  padding: 2.4cqw 4.2cqw; border-radius: 99px; border: .35cqw solid rgba(45, 59, 36, .35);
}
.c-venue-place { display: flex; flex-direction: column; align-items: center; color: inherit; text-decoration: none; }
.venue-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(246, 236, 214, .45); }
.c-venue svg { width: 4.4cqw; height: 4.4cqw; fill: none; stroke: currentColor; stroke-width: 2; }

/* event cards: the film's card with the event's painting at its foot (set in JS once the reveal film is in) */
.card.art { background-image: none; }
.cc[style*="--art"] { top: 10.5%; height: calc(var(--art) * 100% - 12.5%); }

/* Aditi & Amitesh, and the dates: script on the film's card, above its palace */
.script-cc { top: 13%; height: 41%; }
.c-script { margin: 0; display: flex; flex-direction: column; align-items: center; font: 400 14cqw/1.08 var(--script); color: var(--ink); }
/* the couple's names in their own hand (media/aa-names.svg, traced from their lettering): a mask, so it takes the
   colour of wherever it sits — green ink on the cards and the letter, ivory on the page, each board's accent */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.names { display: block; aspect-ratio: 708 / 478; background: currentColor;
  -webkit-mask: url(/media/aa-names.svg) center / contain no-repeat; mask: url(/media/aa-names.svg) center / contain no-repeat; }
.names-bold { -webkit-mask-image: url(/media/aa-names-bold.svg); mask-image: url(/media/aa-names-bold.svg); }
.c-names { margin: 0 0 0 -2cqw; width: 70cqw; color: var(--ink); }
.names-cc { top: 14.5%; height: 43%; }   /* centred in the space between the corner flourishes and the palace */
/* every event card's words start at the same height, so swiping from one to the next nothing jumps */
.ev-cc { justify-content: flex-start; padding-top: 3.6cqw; }
.ev-cc .c-when { font-size: 5.6cqw; letter-spacing: .14em; text-indent: .14em; }
.c-hero { margin: 1.4cqw 0 2.4cqw; line-height: 1.12; }
.ev-cc .c-date { margin: 0; font: 700 7cqw/1.18 var(--serif); }
.c-script span:first-child { margin-right: 10cqw; }
.c-script span:last-child { margin-left: 8cqw; }
.c-dates { font-size: 12.4cqw; line-height: 1.1; }
.c-dates span { margin: 0 !important; }

/* last card: scroll for more */
.more-cc { top: 14%; height: 44%; }
.more-cc .c-title { font-size: 12cqw; white-space: nowrap; }
.more-tag { max-width: 62cqw; }
.more-btn { margin-top: 2.4cqw; background: var(--ink); color: var(--paper); border-color: var(--ink); cursor: pointer; }

/* rsvp card */
.rsvp .cc { top: 10.5%; height: 52.5%; mix-blend-mode: normal; }
.rsvp .c-title { font-size: 8.5cqw; margin-top: .6cqw; }
.choice { display: flex; gap: 2.4cqw; margin-top: 3.2cqw; }
.chip {
  min-width: 26cqw; padding: 2.4cqw 3.6cqw; border-radius: 99px; border: .3cqw solid rgba(45, 59, 36, .45);
  font: 700 2.9cqw/1 var(--serif); letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; color: var(--ink);
  transition: background .25s, color .25s, transform .2s var(--ease-out), border-color .25s;
}
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.c-status { min-height: 8cqw; margin-top: 2cqw; display: flex; align-items: center; justify-content: center; gap: 2cqw;
  font: italic 500 4.1cqw/1.2 var(--serif); color: var(--ink-soft); }
.stepper { display: inline-flex; align-items: center; gap: 1.6cqw; font: 600 3.6cqw var(--serif); font-style: normal; color: var(--ink); }
.stepper button { width: 6.8cqw; height: 6.8cqw; border-radius: 50%; border: .3cqw solid rgba(45, 59, 36, .4); display: grid; place-items: center; font: 600 4cqw/1 var(--serif); }
.stepper button:active { transform: scale(.9); }
.stepper output { min-width: 4cqw; text-align: center; font-size: 4.6cqw; }
.name-form { display: flex; gap: 1.6cqw; align-items: center; }
.name-form input {
  width: 38cqw; padding: 1.6cqw 2.6cqw; border-radius: 99px; border: .3cqw solid rgba(45, 59, 36, .4); background: rgba(255, 250, 240, .55);
  font: 500 3.8cqw var(--serif); color: var(--ink); outline: none; -webkit-user-select: text; user-select: text;
}
.name-form input:focus { border-color: var(--ink); }
.name-form button { width: 7.6cqw; height: 7.6cqw; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; }
.name-form svg { width: 3.6cqw; height: 3.6cqw; fill: none; stroke: currentColor; stroke-width: 2.2; }
.actions { display: flex; flex-direction: column; gap: 2cqw; width: 100%; margin-top: 3cqw; }
.act {
  display: flex; align-items: center; justify-content: center; gap: 2.2cqw; width: 100%; min-height: 10.6cqw; border-radius: 99px;
  font: 700 2.95cqw/1 var(--serif); letter-spacing: .15em; text-indent: .15em; white-space: nowrap; text-transform: uppercase; text-decoration: none;
  transition: transform .2s var(--ease-out), background .25s, box-shadow .25s;
}
.act:active { transform: scale(.97); }
.act svg { width: 4cqw; height: 4cqw; flex: none; }
.act-ink { background: var(--ink); color: var(--paper); box-shadow: 0 .6cqw 1.6cqw -0.6cqw rgba(30, 40, 20, .7), inset 0 .2cqw 0 rgba(255, 255, 255, .1); }
.act-ink svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.act-line { border: .3cqw solid rgba(45, 59, 36, .5); color: var(--ink); }
.act-line svg { fill: currentColor; }

/* deck chrome */
.deck-ui { gap: 12px; }
.deck-nav { display: flex; align-items: center; gap: 10px; }
.nav-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; transition: background .25s, transform .2s var(--ease-out); }
.nav-btn:hover { background: rgba(255, 236, 214, .08); }
.nav-btn:active { transform: scale(.9); }
.nav-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--ivory-dim); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pips { display: flex; gap: 2px; }
.pip { width: 22px; height: 30px; display: grid; place-items: center; }
.pip::before {
  content: ''; width: 6px; height: 6px; transform: rotate(45deg); background: rgba(248, 236, 214, .32); border-radius: 1px;
  transition: background .35s, transform .45s var(--ease-out);
}
.pip[aria-selected="true"]::before { background: var(--ivory); transform: rotate(45deg) scale(1.35); box-shadow: 0 0 10px rgba(255, 220, 170, .6); }
#deck-label { min-height: 15px; font-size: 13px; transition: opacity .25s; }
#deck-label.swap { opacity: 0; }
.deck-foot { position: relative; height: 26px; width: 100%; display: grid; place-items: center; }
.swipe-hint, .more-cue { grid-area: 1 / 1; }
.swipe-hint { margin: 0; display: flex; align-items: center; gap: 10px; font: italic 500 17px/1 var(--serif); color: var(--ivory-dim); transition: opacity .6s, transform .6s var(--ease-out); }
.swipe-hint svg { width: 40px; height: 20px; fill: none; stroke: var(--ivory-dim); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.swipe-hint .sh-card { animation: sh 2.6s var(--ease-soft) infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sh { 0%, 100% { transform: none; } 30% { transform: translateX(-7px) rotate(-12deg); } 60% { transform: translateX(7px) rotate(12deg); } }
.swipe-hint.gone { opacity: 0; transform: translateY(6px); pointer-events: none; }
/* the scroll cue under the deck: a pill, readable, with a phone where a finger slides up and the page moves with it */
.more-cue {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 20px 7px 14px; border-radius: 99px;
  background: rgba(248, 236, 214, .1); border: 1px solid rgba(248, 236, 214, .3); color: var(--ivory);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 600 16px/1.2 var(--serif); letter-spacing: .01em; text-shadow: 0 1px 2px rgba(30, 0, 2, .55);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .6s, transform .7s cubic-bezier(.2, 1.3, .4, 1);
}
.more-cue .gesture { width: 22px; height: 31px; }
/* the gesture: a finger lands near the bottom of the screen, slides up, and the page's lines move up with it */
.gesture { display: block; flex: none; overflow: visible; }
.gesture .g-phone { fill: none; stroke: currentColor; stroke-width: 2.2; }
.gesture .g-lines path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; opacity: .45; }
.gesture .g-lines { animation: g-lines 2.2s var(--ease-soft) infinite; }
.gesture .g-finger { fill: currentColor; opacity: 0; transform-box: fill-box; transform-origin: center; animation: g-finger 2.2s var(--ease-soft) infinite; }
@keyframes g-finger { 0% { opacity: 0; transform: translateY(0) scale(1.4); } 12% { opacity: .95; transform: translateY(0) scale(1); }
  62% { opacity: .95; transform: translateY(-21px); } 76%, 100% { opacity: 0; transform: translateY(-23px); } }
@keyframes g-lines { 0%, 12% { transform: translateY(0); } 62%, 100% { transform: translateY(-14px); } }
.card-gesture { width: 13cqw; height: 18.2cqw; margin: 2.2cqw 0 2.6cqw; color: var(--ink); }
.more-cue.show { opacity: 1; transform: none; pointer-events: auto; transition-delay: .4s; }   /* (after the swipe hint has gone) */

/* ------------------------------------------------------------ calendar sheet */
.sheet { position: fixed; inset: 0; left: calc((100vw - var(--col)) / 2); right: auto; width: var(--col); z-index: 40; }
.sheet[hidden] { display: none; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(20, 0, 2, .5); opacity: 0; transition: opacity .35s; touch-action: none; }
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 86%; overflow: auto; overscroll-behavior: contain;
  padding: 10px 22px calc(env(safe-area-inset-bottom) + 18px); border-radius: 22px 22px 0 0;
  background: var(--paper) url(/media/paper.webp) center / cover; color: var(--ink);
  box-shadow: 0 -20px 60px rgba(20, 0, 0, .45);
  transform: translateY(100%); transition: transform .5s var(--ease-out);
}
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet.open .sheet-panel { transform: none; }
.sheet-grip { width: 38px; height: 4px; border-radius: 4px; background: rgba(45, 59, 36, .25); margin: 0 auto 14px; }
.sheet h2 { margin: 0 0 14px; text-align: center; font: 400 31px/1.12 var(--script); }
.sheet-primary {
  display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; text-decoration: none;
  background: var(--ink); color: var(--paper);
}
.sheet-primary svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.sheet-primary b { display: block; font: 700 13px/1.3 var(--serif); letter-spacing: .12em; text-transform: uppercase; }
.sheet-primary small { font: italic 500 15px/1.3 var(--serif); opacity: .8; }
.sheet-sub { margin: 20px 0 6px; font: 700 11px var(--serif); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }
#gcal-list { list-style: none; margin: 0; padding: 0; }
#gcal-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px solid rgba(45, 59, 36, .14); }
#gcal-list li:last-child { border-bottom: 0; }
#gcal-list b { display: block; font: 400 21px/1.15 var(--script); }
#gcal-list small { font: 600 12px var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
#gcal-list a { flex: none; padding: 9px 16px; border-radius: 99px; border: 1px solid rgba(45, 59, 36, .4); text-decoration: none; font: 700 11px/1 var(--serif); letter-spacing: .2em; text-transform: uppercase; }
#gcal-list a:active { background: rgba(45, 59, 36, .08); }
/* welcome back */
.back-lede { margin: -8px 0 12px; text-align: center; font: italic 500 17px/1.3 var(--serif); color: var(--ink-soft); }
.back-list { list-style: none; margin: 0 0 14px; padding: 0; }
.back-list li + li { border-top: 1px solid rgba(45, 59, 36, .14); }
.back-list a, .back-list button { display: flex; width: 100%; gap: 14px; align-items: center; padding: 12px 2px; text-align: left; text-decoration: none; color: var(--ink); background: none; border: 0; font: inherit; cursor: pointer; }
.back-list a:active, .back-list button:active { background: rgba(45, 59, 36, .06); }
.back-list svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.back-list b { display: block; font: 700 13px/1.3 var(--serif); letter-spacing: .12em; text-transform: uppercase; }
.back-list small { display: block; font: italic 500 15px/1.3 var(--serif); color: var(--ink-soft); }
.back-film { width: 100%; border: 0; text-align: left; cursor: pointer; }
.sheet-close { display: block; width: 100%; margin-top: 16px; padding: 14px; border-radius: 14px; font: 700 12px var(--serif); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); background: rgba(45, 59, 36, .08); }

/* toast */
#toast {
  position: fixed; z-index: 50; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 22px); transform: translate(-50%, 16px);
  padding: 11px 18px; border-radius: 99px; background: rgba(250, 240, 222, .96); color: var(--ink);
  font: italic 500 16px/1.2 var(--serif); white-space: nowrap; box-shadow: 0 10px 30px rgba(20, 0, 0, .35);
  opacity: 0; pointer-events: none; transition: opacity .35s, transform .5s var(--ease-out);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

.noscript { position: fixed; inset: auto 0 40px; text-align: center; padding: 0 24px; }

@media (prefers-reduced-motion: reduce) {
  .ui [data-in] { filter: none; transform: none; }
  .swipe-hint .sh-card, .cta::before, .cta-hand svg, .cta-hand::after, .ld-deck i, .ld-dots i { animation: none; }
  .ld-dots i { opacity: 1; }
}

/* ============================================================ below the cards */
#more {
  position: relative; width: var(--col); margin: 0 auto; padding-bottom: calc(env(safe-area-inset-bottom) + 24px); overflow-x: clip;
  /* the velvet tail (below) dissolves into this burgundy, which then deepens gently down the page */
  background:
    radial-gradient(90% 26% at 85% 48%, rgba(140, 8, 14, .22), transparent 65%),
    radial-gradient(110% 30% at 10% 82%, rgba(130, 8, 12, .2), transparent 60%),
    linear-gradient(#2a0204 0, #2a0204 calc(var(--svh) * .84), #320305 calc(var(--svh) * 1.4), #2c0204 70%, #200103);
}
#more::before { /* the film's velvet, mirrored at the seam so the last row of the stage continues exactly, then melting into burgundy */
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); pointer-events: none;
  width: calc(var(--svh) * 720 / 1280); height: calc(var(--svh) * 1080 / 1280);
  background: url(/media/velvet-tail.webp) top center / 100% 100% no-repeat;
}
.sec { position: relative; padding: 76px 22px 20px; }
.sec-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 34px; }
.sec-title { font-size: clamp(37px, 11.2vw, 48px); }
.us-title { margin: 8px 0 0; width: min(290px, 80%); color: var(--ivory); filter: drop-shadow(0 4px 18px rgba(30, 0, 2, .6)); }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease-soft), transform 1.2s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* timeline — quiet: time | a hairline thread | the event */
.tl { position: relative; --when: 76px; --gap: 26px; }
.tl-line { position: absolute; left: calc(var(--when) + var(--gap) / 2); top: 6px; bottom: 6px; width: 1px; background: rgba(215, 180, 106, .16); overflow: hidden; }
.tl-line i { position: absolute; inset: 0; transform-origin: 50% 0; transform: scaleY(var(--p, 0)); background: linear-gradient(rgba(215, 180, 106, .5), rgba(215, 180, 106, .8)); }
/* the thread's glowing tip leads the way down */
.tl-tip { position: absolute; left: calc(var(--when) + var(--gap) / 2); top: calc(6px + (100% - 12px) * var(--p, 0)); width: 5px; height: 5px; margin: -2.5px 0 0 -2px;
  border-radius: 50%; background: #fff3d6; box-shadow: 0 0 6px 2px rgba(255, 214, 140, .9), 0 0 22px 6px rgba(215, 180, 106, .45);
  opacity: calc(min(1, var(--p, 0) * 40) * (1 - max(0, var(--p, 0) - .985) * 66)); pointer-events: none; }

#tl-list { list-style: none; margin: 0; padding: 0; }
.tl-day, .tl-item { display: grid; grid-template-columns: var(--when) var(--gap) 1fr; align-items: start; }
/* each day opens like a chapter: "DAY 1" in gold with a rule running off, its date beneath, room before it */
.tl-day { margin: 52px 0 22px; }
.tl-day:first-child { margin-top: 4px; }
.tl-day-h { grid-column: 3; display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateX(-10px); filter: blur(4px); transition: opacity 1s var(--d, 0s) var(--ease-soft), transform 1.1s var(--d, 0s) var(--ease-out), filter 1s var(--d, 0s); }
.tl-day.in .tl-day-h { opacity: 1; transform: none; filter: none; }
.tl-day-h b { display: flex; align-items: center; gap: 12px; font: 700 13.5px/1 var(--serif); font-variant-numeric: lining-nums; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.tl-day-h b::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(215, 180, 106, .55), rgba(215, 180, 106, 0)); }
.tl-day-h span { font: italic 500 19px/1.25 var(--serif); color: var(--ivory); }
.tl-day i { grid-column: 2; justify-self: center; margin-top: 1px; width: 11px; height: 11px; transform: rotate(45deg) scale(0); border: 1px solid var(--gold); background: var(--gold);
  box-shadow: 0 0 12px rgba(215, 180, 106, .5); transition: transform .9s var(--d, 0s) cubic-bezier(.3, 1.6, .5, 1); }
.tl-day.in i { transform: rotate(225deg) scale(1); }
.tl-item { margin-bottom: 26px; }
.tl-when { grid-column: 1; text-align: right; padding-top: 10px; font: 700 14px/1.2 var(--serif); letter-spacing: .06em; text-transform: uppercase; color: var(--ivory);
  opacity: 0; transform: translateX(14px); transition: opacity .9s calc(var(--d, 0s) + .15s) var(--ease-soft), transform 1.1s calc(var(--d, 0s) + .15s) var(--ease-out); }
/* each event's bead lights as the thread reaches it, with a ring of gold breaking out of it */
.tl-node { position: relative; grid-column: 2; justify-self: center; margin-top: 13px; width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid rgba(215, 180, 106, .5); background: var(--velvet-900); transform: scale(.6);
  transition: background .5s var(--d, 0s), border-color .5s var(--d, 0s), transform .7s var(--d, 0s) cubic-bezier(.3, 1.8, .5, 1), box-shadow 1.2s var(--d, 0s); }
.tl-node::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; }
.tl-item.in .tl-node { transform: scale(1); background: var(--gold); border-color: var(--gold); box-shadow: 0 0 12px 2px rgba(215, 180, 106, .45); }
.tl-item.in .tl-node::after { animation: tl-burst 1.3s var(--d, 0s) var(--ease-out) both; }
@keyframes tl-burst { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(4.2); } }
.tl-what { grid-column: 3; }
/* the event comes in a line at a time: its name writes itself, then the details, its line and the calendar link */
.tl-what > * { opacity: 0; transform: translateX(-12px); filter: blur(5px);
  transition: opacity .9s var(--ease-soft), transform 1.1s var(--ease-out), filter .9s var(--ease-soft); }
.tl-item.in .tl-what > * { opacity: 1; transform: none; filter: none; }
.tl-item.in .tl-what > :nth-child(1) { transition-delay: calc(var(--d, 0s) + .2s); }
.tl-item.in .tl-what > :nth-child(2) { transition-delay: calc(var(--d, 0s) + .55s); }
.tl-item.in .tl-what > :nth-child(3) { transition-delay: calc(var(--d, 0s) + .72s); }
.tl-item.in .tl-what > :nth-child(4) { transition-delay: calc(var(--d, 0s) + .9s); }
.tl-name { -webkit-mask-image: linear-gradient(100deg, #000 0 42%, transparent 58% 100%); mask-image: linear-gradient(100deg, #000 0 42%, transparent 58% 100%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.tl-item.in .tl-name { animation: write-on 1.6s calc(var(--d, 0s) + .2s) var(--ease-soft) forwards; }
.tl-item.in .tl-when { opacity: 1; transform: none; }
.tl-name { margin: 0; font: 400 27.5px/1.18 var(--script); color: var(--ivory); }
.tl-detail { margin: 2px 0 0; font: italic 500 17px/1.35 var(--serif); color: rgba(248, 236, 214, .7); }
.tl-sched { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 9px; }
.tl-sched li { display: grid; grid-template-columns: 4.7em 1fr; column-gap: 10px; align-items: baseline; font: 400 15px/1.35 var(--serif); color: var(--ivory-dim); }
.tl-sched .ts-time { font: 600 15px/1.35 var(--serif); color: var(--ivory); white-space: nowrap; }
.tl-sched .ts-what { display: flex; flex-direction: column; gap: 1px; }
.tl-sched small { font: italic 500 15px/1.3 var(--serif); color: rgba(248, 236, 214, .62); }
.tl-sched b { font: 700 12px/1.4 var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--ivory); }
.tl-tag { margin: 3px 0 0; font: italic 500 17px/1.4 var(--serif); color: rgba(248, 236, 214, .66); }
.tl-add { display: inline-block; margin-top: 10px; font: 700 12px/1 var(--serif); letter-spacing: .2em; text-transform: uppercase; color: rgba(215, 180, 106, .85);
  text-decoration: underline; text-decoration-color: rgba(215, 180, 106, .35); text-underline-offset: 5px; transition: color .25s, text-decoration-color .25s; }
.tl-add:hover { color: var(--gold); text-decoration-color: var(--gold); }
.sec-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 30px; }
.sec-actions .btn { width: min(100%, 290px); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 20px; border-radius: 99px; text-decoration: none;
  font: 700 12px/1 var(--serif); letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; transition: transform .2s var(--ease-out), background .25s, box-shadow .25s; }
.btn:active { transform: scale(.97); }
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn-ivory { background: var(--ivory); color: var(--velvet-800); box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .7); }
.btn-ivory:hover { background: #fff6e6; }
.btn-line { border: 1px solid rgba(248, 236, 214, .45); color: var(--ivory); }
.btn-line:hover { background: rgba(248, 236, 214, .07); }
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: 0 10px 24px -12px rgba(20, 30, 10, .8), inset 0 1px 0 rgba(255, 255, 255, .1); }

/* paper panels share the deck's stationery */
.paper { position: relative; color: var(--ink); border-radius: 14px; padding: 30px 24px 28px;
  background: var(--paper) url(/media/paper.webp) center / cover; box-shadow: 0 2px 3px rgba(30, 0, 0, .3), 0 30px 60px -26px rgba(10, 0, 0, .8); }
.paper::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(45, 59, 36, .3); border-radius: 9px; pointer-events: none; }
.paper::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(45, 59, 36, .14); border-radius: 7px; pointer-events: none; }
.eyebrow.ink { color: var(--ink-soft); text-shadow: none; }

/* gallery: big polaroids clipped onto one long string of fairy lights, scrolled sideways */
.gallery { /* sideways only: it must never capture a vertical swipe (the tilted photos used to make it scroll vertically too) */
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y;
  scroll-snap-type: x mandatory; padding: 0 0 46px; margin: 0 -22px; scrollbar-width: none; outline: none; }
.gallery::-webkit-scrollbar { display: none; }
.line { position: relative; display: flex; align-items: flex-start; width: max-content; min-width: 100%; }
.line-end { flex: 0 0 9vw; max-width: 46px; }
.wire { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.wire path { fill: none; stroke: rgba(226, 200, 150, .45); stroke-width: 1.3; }
.bulbs { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.bulb { position: absolute; width: 7px; height: 9px; margin: -1px 0 0 -3.5px; border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 50% 38%, #fffbea, #ffd785 50%, #e9a443);
  box-shadow: 0 0 6px 2px rgba(255, 208, 120, .8), 0 0 20px 7px rgba(255, 176, 80, .3);
  animation: twinkle var(--t, 2s) ease-in-out var(--d, 0s) infinite alternate; }
@keyframes twinkle { 55% { opacity: .9; } 100% { opacity: .28; box-shadow: 0 0 3px 1px rgba(255, 208, 120, .35), 0 0 8px 2px rgba(255, 176, 80, .1); } }
.photo { flex: 0 0 min(82vw, 340px); position: relative; z-index: 2; scroll-snap-align: center; margin: 0; padding-top: calc(var(--peg, 30px) + 22px); }
.polaroid { position: relative; width: 93%; margin: 0 auto; padding: 12px 12px 0; border-radius: 2px; background: #fbf6ea;
  box-shadow: 0 2px 3px rgba(30, 0, 0, .35), 0 30px 46px -20px rgba(10, 0, 0, .9);
  transform-origin: 50% -22px; transform: rotate(var(--r, 0deg)) translateY(-26px); opacity: 0;
  transition: transform 1.2s var(--ease-out), opacity .8s; }
.photo.in .polaroid { transform: rotate(var(--r, 0deg)); opacity: 1; animation: sway var(--sway, 5s) ease-in-out 1.2s infinite; }
@keyframes sway { 0%, 100% { transform: rotate(var(--r, 0deg)); } 25% { transform: rotate(calc(var(--r, 0deg) + 1deg)); } 75% { transform: rotate(calc(var(--r, 0deg) - 1deg)); } }
/* the clothespin: the wire runs through its notch, its lower jaws grip the polaroid's white border */
.peg { position: absolute; left: 50%; top: -34px; width: 18px; height: 58px; margin-left: -9px; z-index: 3; overflow: visible;
  filter: drop-shadow(0 3px 2.5px rgba(20, 0, 0, .5)); }
@media (prefers-reduced-motion: reduce) { .bulb, .photo.in .polaroid { animation: none; } }
.photo img, .photo .ph { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1px; }
.photo .ph { display: grid; place-items: center; align-content: center; gap: 10px; color: rgba(45, 59, 36, .55);
  background: radial-gradient(120% 90% at 30% 20%, #efe2c9, #e2cfac); }
.photo .ph b { font: 400 43px/1 var(--script); color: rgba(45, 59, 36, .45); }
.photo .ph small { font: 600 10.5px var(--serif); letter-spacing: .26em; text-transform: uppercase; }
.photo figcaption { display: grid; place-items: center; min-height: 58px; padding: 4px 6px; text-align: center; font: 400 19.5px/1.15 var(--script); color: var(--ink); }
.note { margin-top: 18px; text-align: center; }
.note-body { margin: 12px 0 8px; font: italic 500 19px/1.55 var(--serif); color: var(--ink); }
.note-sign { margin: 6px 0 0; color: var(--ink); }
.note-sign .names { width: 168px; margin-left: auto; }

/* rsvp */
.rsvp-form { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.rsvp-title { margin: -4px 0 4px; font-size: 35px; color: var(--ink); text-shadow: none; }
.field { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; }
.field span, .party > span:first-child, .pickup > span { font: 700 11.5px/1.3 var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); font-style: normal; }
.field em { font-style: normal; letter-spacing: .1em; text-transform: none; opacity: .75; }
.field input, .field textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(45, 59, 36, .3); background: rgba(255, 251, 242, .7);
  font: 500 18px/1.35 var(--serif); color: var(--ink); outline: none; resize: vertical; -webkit-user-select: text; user-select: text; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(45, 59, 36, .12); }
.rsvp-form .choice { margin: 0; gap: 10px; }
.rsvp-form .chip { min-width: 0; padding: 12px 18px; font-size: 11.5px; border-width: 1px; }
.party { display: flex; align-items: center; gap: 14px; color: var(--ink-soft); }
.party[hidden] { display: none; }
.party .stepper { gap: 8px; }
.party .stepper button { width: 44px; height: 44px; font-size: 22px; border-width: 1px; }
.party .stepper output { font-size: 22px; min-width: 22px; }
.rsvp-form .btn-ink { width: 100%; margin-top: 4px; }
.btn-ink.is-busy { opacity: .78; cursor: progress; animation: busy 1.6s ease-in-out infinite; }
@keyframes busy { 50% { opacity: .55; } }
.rsvp-done { margin: 0; font: italic 500 18px/1.4 var(--serif); color: var(--ink); }

/* community */
.community { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 22px; border-radius: 16px;
  border: 1px solid rgba(248, 236, 214, .14); background: linear-gradient(180deg, rgba(255, 236, 214, .05), rgba(255, 236, 214, .02)); }
.community h2 { font-size: 42px; }
.community .lede { max-width: 30ch; }
.wa-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: rgba(248, 236, 214, .08); border: 1px solid rgba(248, 236, 214, .2); }
.wa-mark svg { width: 26px; height: 26px; fill: var(--ivory); }
.community .btn { margin-top: 6px; }

/* the note: crumpled paper that smooths out as it scrolls into view (WebGL; plain note if unavailable) */
.note-stage { position: relative; margin-top: 30px; }
.note-stage.has-gl .note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.note-gl { position: relative; display: block; z-index: 1; }
.note-shadow { position: absolute; left: 10%; right: 10%; bottom: -10px; height: 34px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(10, 0, 0, .65), transparent); filter: blur(6px);
  transform: translateY(calc(var(--c, 0) * -170%)) scale(calc(1 - var(--c, 0) * .5)); opacity: calc(.95 - var(--c, 0) * .25); }

/* rsvp: draw your card */
.rsvp { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 34px 22px 30px; }
.rsvp-title { margin: 2px 0 0; font-size: clamp(30px, 8.8vw, 37px); line-height: 1.12; color: var(--ink); text-shadow: none; }
.rsvp-lede { margin: 4px 0 2px; font: italic 500 17px/1.3 var(--serif); color: var(--ink-soft); }
.pick { display: flex; gap: 14px; justify-content: center; margin: 10px 0 14px; }
.pick-card {
  position: relative; width: min(38vw, 138px); aspect-ratio: .7; border-radius: 10px; padding: 16px 10px 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ink);
  background: var(--paper) url(/media/paper.webp) center / cover; border: 1px solid rgba(45, 59, 36, .22);
  box-shadow: 0 1px 2px rgba(30, 0, 0, .25), 0 12px 22px -12px rgba(30, 10, 0, .6);
  transition: transform .6s cubic-bezier(.3, 1.4, .5, 1), box-shadow .5s, opacity .5s, filter .5s;
}
.pick-card::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(45, 59, 36, .25); border-radius: 7px; pointer-events: none; }
.pick-card[data-rsvp="yes"] { transform: rotate(-5deg); --accent: #9c2f45; }
.pick-card[data-rsvp="no"] { transform: rotate(5deg); --accent: #1c1b18; }
@media (hover: hover) { .pick-card:hover { transform: translateY(-5px) rotate(0); } }
.pick.has-choice .pick-card { opacity: .5; filter: saturate(.6); }
.pick.has-choice .pick-card[data-rsvp="yes"] { transform: rotate(-9deg) scale(.94); }
.pick.has-choice .pick-card[data-rsvp="no"] { transform: rotate(9deg) scale(.94); }
.pick.has-choice .pick-card[aria-checked="true"] { opacity: 1; filter: none; transform: translateY(-12px) rotate(0) scale(1.05);
  box-shadow: 0 0 0 1.5px var(--accent), 0 2px 3px rgba(30, 0, 0, .25), 0 24px 34px -14px rgba(30, 10, 0, .7); }
.pc-corner { position: absolute; display: flex; flex-direction: column; align-items: center; font: 700 15px/1 var(--serif); color: var(--accent); }
.pc-tl { top: 9px; left: 10px; }
.pc-br { bottom: 9px; right: 10px; transform: rotate(180deg); }   /* like a real card: the index reads from either end */
.pc-corner i { width: 10px; height: 10px; margin-top: 2px; }
.pc-suit { width: 34px; height: 34px; color: var(--accent); margin-bottom: 4px; }
.pc-suit svg, .pc-corner svg { width: 100%; height: 100%; display: block; }
.pc-title { font: 400 19px/1.1 var(--script); }
.pc-sub { font: italic 500 14.5px/1.25 var(--serif); color: var(--ink-soft); }
.rsvp-more { display: grid; grid-template-rows: 0fr; width: 100%; transition: grid-template-rows .7s var(--ease-out); }
.rsvp-more.open { grid-template-rows: 1fr; }
.rsvp-more-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 2px 2px 4px; }
.rsvp-more:not(.open) .rsvp-more-in { visibility: hidden; transition: visibility 0s .7s; }
.rsvp-more .btn-ink { width: 100%; margin-top: 4px; }
.rsvp .party { justify-content: space-between; padding: 2px 2px; }

/* travel — all optional */
.travel { margin: 4px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid rgba(45, 59, 36, .16); text-align: left; min-width: 0; }
.travel[hidden] { display: none; }
.travel legend { padding: 0; font: 700 11.5px var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.travel legend em { font-style: normal; letter-spacing: .1em; text-transform: none; opacity: .75; }
.travel-hint { margin: 8px 0 12px; font: italic 500 16px/1.35 var(--serif); color: var(--ink-soft); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid rgba(45, 59, 36, .3); background: rgba(255, 251, 242, .55);
  font: 600 14.5px/1 var(--serif); color: var(--ink); transition: background .25s, color .25s, border-color .25s, transform .2s var(--ease-out); }
.opt:active { transform: scale(.96); }
.opt[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.travel-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
.travel-more.open { grid-template-rows: 1fr; }
.travel-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
.travel-more:not(.open) .travel-in { visibility: hidden; transition: visibility 0s .6s; }
.travel [data-for][hidden] { display: none; }
.field-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.field select { width: 100%; padding: 12px 34px 12px 14px; border-radius: 10px; border: 1px solid rgba(45, 59, 36, .3); background: rgba(255, 251, 242, .7);
  font: 500 17px/1.3 var(--serif); color: var(--ink); outline: none; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d3b24' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.field select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(45, 59, 36, .12); }
.field input[type="time"] { min-height: 47px; }
.pickup { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: var(--ink-soft); }
.travel-note { margin: 0; font: italic 500 16.5px/1.4 var(--serif); color: var(--ink-soft); }
.sealed { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 0 2px; }
.sealed[hidden] { display: none; }
.seal { width: 116px; height: 116px; filter: drop-shadow(0 7px 9px rgba(60, 0, 0, .45)); animation: stamp 1s cubic-bezier(.2, .9, .25, 1.15) both; }
.seal svg { width: 100%; height: 100%; display: block; }
@keyframes stamp { 0% { transform: scale(2.3) rotate(-30deg); opacity: 0; } 55% { transform: scale(.9) rotate(2deg); opacity: 1; } 75% { transform: scale(1.04) rotate(-7deg); } 100% { transform: scale(1) rotate(-6deg); } }
.sealed-msg { margin: 4px 0 0; max-width: 28ch; font: italic 500 19px/1.45 var(--serif); color: var(--ink); }
.link-btn { font: 700 10.5px var(--serif); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); padding: 10px; text-decoration: underline; text-underline-offset: 4px; }
.rsvp.is-sealed .pick, .rsvp.is-sealed .rsvp-more, .rsvp.is-sealed .rsvp-lede { display: none; }

/* footer: the AA mark in gold foil, dealt in */
.foot { position: relative; padding: 80px 22px calc(env(safe-area-inset-bottom) + 46px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: radial-gradient(70% 45% at 50% 32%, rgba(215, 180, 106, .11), transparent 70%); }
.logo { width: 128px; height: auto; overflow: visible; margin-bottom: 18px; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .45)); }
.logo path { transform-box: fill-box; transform-origin: center; transition: transform 1.1s var(--ease-out), opacity .9s ease; }
.lg-the { transform: translateY(-16px); opacity: 0; }
.lg-wedding { transform: translateY(16px); opacity: 0; }
.lg-a { transform: scale(.78) rotate(-8deg); opacity: 0; }
.lg-heart { transform: rotate(-180deg); opacity: 0; }
.foot.in .lg-the, .foot.in .lg-wedding { transform: none; opacity: 1; }
.foot.in .lg-wedding { transition-delay: .1s; }
.foot.in .lg-a { transform: none; opacity: 1; transition-delay: .2s; }
.foot.in .lg-heart { transform: none; opacity: 1; transition: transform 2.6s cubic-bezier(.22, .61, .2, 1), opacity 1.6s ease; }   /* each heart turns slowly into its place */
.foot.in .lg-h1 { transition-delay: .55s; }
.foot.in .lg-h2 { transition-delay: .85s; }
.lg-sheen { opacity: 0; }
.foot.in .lg-sheen { opacity: 1; animation: sheen 5s 1.4s ease-in-out infinite; }
@keyframes sheen { 0% { transform: skewX(-18deg) translateX(0); } 45%, 100% { transform: skewX(-18deg) translateX(270px); } }
.foot-date { margin: 0; font: 600 12px/1.3 var(--serif); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: var(--gold); }
.foot-venue { margin: 0; font: italic 500 18px/1.35 var(--serif); color: var(--ivory-dim); }
.foot-dir { margin-top: 22px; width: min(100%, 290px); min-height: 60px; padding: 10px 22px; text-indent: 0; }
.fd-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
.fd-text small { font: 700 11px/1 var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.fd-text b { font: 600 17px/1.1 var(--serif); letter-spacing: .01em; text-transform: none; }
.foot-social { display: flex; gap: 22px; margin-top: 26px; }
.foot-ic { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--ivory);
  font: 700 11.5px/1 var(--serif); letter-spacing: .16em; text-transform: uppercase; }
.foot-ic svg { box-sizing: content-box; width: 22px; height: 22px; padding: 13px; border-radius: 50%; border: 1px solid rgba(215, 180, 106, .5);
  color: var(--gold); transition: background .3s, transform .3s var(--ease-out); }
.foot-ic:hover svg { background: rgba(215, 180, 106, .12); }
.foot-ic:active svg { transform: scale(.92); }
.foot-ic span { color: var(--ivory-dim); }
.foot-love { margin: 30px 0 0; font: italic 500 14px var(--serif); color: rgba(248, 236, 214, .45); }
@media (prefers-reduced-motion: reduce) { .foot.in .lg-sheen { animation: none; } .lg-heart { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tl-what > *, .tl-when, .tl-node, .tl-day-h, .tl-day i { transition-duration: .2s !important; transition-delay: 0s !important; transform: none !important; filter: none !important; }
  .tl-name { -webkit-mask: none; mask: none; animation: none !important; } .tl-item.in .tl-node::after { animation: none; } .tl-tip { display: none; }
}

/* dress-code pill: readable ("Dress code" at 16px), always to hand while reading, with a tiny hand of cards in the
   boards' colours that fans open every few seconds, as an invitation */
.sticker {
  position: fixed; z-index: 25; right: calc((100vw - var(--col)) / 2 + 14px); bottom: calc(env(safe-area-inset-bottom) + 18px);
  display: flex; align-items: center; gap: 9px; height: 52px; padding: 0 20px 0 12px; border-radius: 99px;
  background: var(--ivory); color: var(--velvet-800); font: 700 16px/1 var(--serif); letter-spacing: .01em;
  box-shadow: 0 14px 30px -10px rgba(10, 0, 0, .75), inset 0 0 0 1px rgba(215, 180, 106, .65);
  opacity: 0; transform: translateY(calc(100% + 40px)); pointer-events: none;
  transition: transform .7s cubic-bezier(.2, 1.3, .4, 1), opacity .4s ease;
}
.sticker.show { opacity: 1; transform: none; pointer-events: auto; }
.sticker:active { transform: scale(.95); }
.st-fan { position: relative; width: 30px; height: 30px; flex: none; }
.st-fan i { position: absolute; left: 8px; top: 4px; width: 14px; height: 20px; border-radius: 2.5px; background: var(--bg, var(--velvet-600));
  box-shadow: 0 1px 2px rgba(40, 0, 0, .35), inset 0 0 0 1.5px rgba(255, 255, 255, .35); transform-origin: 50% 115%;
  transform: rotate(calc(var(--k) * 14deg)); animation: st-fan 6s ease-in-out 2.5s infinite; }
@keyframes st-fan { 0%, 72%, 100% { transform: rotate(calc(var(--k) * 14deg)); } 80%, 88% { transform: rotate(calc(var(--k) * 32deg)) translateY(-2px); } }

/* what to wear: the dress-code boards as a hand of cards; dealt open when it scrolls into view, and now and then one
   card lifts out of the hand as if offering itself. Each one opens the dress code at its own board. */
#wear { padding-top: 70px; }
.wear-hand { position: relative; height: 200px; max-width: 360px; margin: 6px auto 0; }
.wh-card { position: absolute; left: 50%; bottom: 14px; width: 96px; height: 134px; margin-left: -48px; padding: 11px 9px;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: left; cursor: pointer;
  border-radius: 8px; background: var(--bg); color: var(--ink); border: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 26px -12px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .12);
  transform-origin: 50% 125%; transform: rotate(0deg);
  transition: transform 1.1s calc(var(--i) * .07s) cubic-bezier(.3, 1.35, .5, 1); }
.wear-hand.in .wh-card { transform: translateX(calc(var(--k) * 50px)) rotate(calc(var(--k) * 9deg)); animation: wh-offer 10s calc(2s + var(--i) * 2s) ease-in-out infinite; }
@keyframes wh-offer { 0%, 10%, 100% { translate: 0 0; } 4%, 6% { translate: 0 -18px; } }
.wh-card:active { translate: 0 -10px; }
.wh-name { font: 700 11.5px/1 var(--serif); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.wh-strips { display: flex; flex-direction: column; gap: 4px; }
.wh-strips i { height: 10px; border-radius: 2px; background: var(--c); }
.wh-wild { margin-top: 18px; font: 400 20px/1.05 var(--script); color: var(--accent); text-align: center; }
#wear .sec-actions { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .tl-card, .photo, .polaroid { transition: none; }
  .st-fan i, .wear-hand.in .wh-card, .gesture .g-lines, .gesture .g-finger { animation: none; }
  .gesture .g-finger { opacity: .9; }
}

/* ------------------------------------------------------------ dress code: pick a card */
html.dc-lock, html.dc-lock body, html.sheet-lock, html.sheet-lock body { overflow: hidden; }
.dc { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; }
.dc[hidden] { display: none; }
.dc-backdrop { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 30%, rgba(74, 3, 6, .9), rgba(20, 0, 2, .97));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .45s var(--ease-soft); }
.dc.open .dc-backdrop { opacity: 1; }
.dc-sheet { position: relative; width: var(--col); height: 100%; height: 100dvh; display: flex; flex-direction: column;
  padding: max(18px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); color: var(--ivory);
  --cw: min(78vw, calc(var(--col) * .78), 340px, calc((100dvh - 250px) * .7)); }
.dc-head { position: relative; z-index: 30; text-align: center; padding: 8px 40px 0; opacity: 0; transform: translateY(-10px); transition: opacity .5s .1s, transform .6s .1s var(--ease-out); }
.dc.open .dc-head { opacity: 1; transform: none; }
.dc-eyebrow { margin: 0; font: 600 12px/1 var(--serif); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: var(--gold); }
.dc-title { margin: 8px 0 0; font: 400 35px/1.14 var(--script); color: var(--ivory); }
.dc-sub { margin: 6px 0 0; font: italic 500 16px/1.35 var(--serif); color: var(--ivory-dim); transition: opacity .3s; }
.dc-close { position: absolute; right: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(248, 236, 214, .1); color: var(--ivory); cursor: pointer; }
.dc-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* cards are laid out by dresscode.js: each is the full drawn-card size (--bw), scaled down for the hand and the row */
.dc-table { position: absolute; inset: 0; pointer-events: none; }
.dc-card {
  position: absolute; left: 0; top: 0; width: var(--bw, 300px); aspect-ratio: 5 / 7; margin: 0; padding: 0; border: 0; background: none;
  cursor: pointer; perspective: 1600px; container-type: inline-size; -webkit-tap-highlight-color: transparent; pointer-events: auto;
  transition: transform .8s cubic-bezier(.22, 1.12, .36, 1), opacity .5s var(--ease-soft), translate .45s var(--ease-out), rotate .45s var(--ease-out);
  will-change: transform; touch-action: pan-y;
}
.dc-card:focus-visible { outline: none; }
.dc-card:focus-visible .dc-face { box-shadow: 0 0 0 1cqw var(--gold), 0 18px 40px -14px rgba(0, 0, 0, .7); }
/* in the hand, a card rises a little under the finger (along its own tilt) */
.dc-inner { transition: transform .8s var(--ease-out) .1s, translate .35s var(--ease-out); }
.dc:not(.has-pick) .dc-card:hover .dc-inner, .dc:not(.has-pick) .dc-card:focus-visible .dc-inner { translate: 0 -7%; transition-delay: 0s; }
.dc-cap { position: absolute; left: 0; top: 0; padding: 4px 2px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 700 12px/1 var(--serif); letter-spacing: .1em; text-indent: .1em; text-transform: uppercase; color: var(--ivory-dim);
  opacity: 0; transition: opacity .4s var(--ease-soft) .25s, transform .8s cubic-bezier(.22, 1.12, .36, 1); }
.dc-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.dc-card.picked .dc-inner { transform: rotateY(180deg); }
.dc-face { position: absolute; inset: 0; border-radius: 4.5cqw; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--bg); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -14px rgba(0, 0, 0, .7), inset 0 0 0 .5cqw rgba(255, 255, 255, .08);
  /* a little paper grain on every board */
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.2px), radial-gradient(rgba(0, 0, 0, .05) 1px, transparent 1.2px);
  background-size: 3px 3px, 5px 5px; background-position: 0 0, 1px 2px; }
.dc-back { transform: rotateY(180deg); }

/* front: what shows in the hand */
.dc-front { display: flex; flex-direction: column; justify-content: center; padding: 10cqw 8cqw 10cqw 27cqw; }
/* in the hand only each card's left edge shows, so the name runs down it like a book's spine */
.dc-f-name { position: absolute; left: 6cqw; top: 7cqw; writing-mode: vertical-rl; font: 700 12.5cqw/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.dc-mini { display: grid; gap: 3.4cqw; width: 100%; }
.dc-mini i, .dc-strips i { display: block; border-radius: 1.6cqw; background: var(--c);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, .14), transparent 30%, rgba(255, 255, 255, .08) 60%, transparent 85%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px); }
.dc-mini i { height: 11cqw; }
.dc-front .dc-crown { width: 52cqw; align-self: center; color: var(--accent); fill: var(--accent); }
.dc-idx { position: absolute; left: 5.5cqw; top: 4.5cqw; display: flex; flex-direction: column; align-items: center; font: 600 7.5cqw/1 var(--serif); color: var(--accent); }
.dc-idx svg { width: 5.5cqw; height: 5.5cqw; fill: currentColor; margin-top: .8cqw; }
.dc-idx-flip { left: auto; top: auto; right: 5.5cqw; bottom: 4.5cqw; transform: rotate(180deg); }
.dc-wild-idx { font-size: 5cqw; line-height: 1.08; letter-spacing: 0; }
.dc-front .dc-idx { display: none; }

/* back: the mood board */
.dc-board { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 15cqw 8cqw 8cqw; text-align: left; }
.dc-couple { position: absolute; right: 6.5cqw; top: 5cqw; text-align: right; }
.dc-couple .names { width: 26cqw; margin-left: auto; color: var(--accent); }
/* the day sits with the event's name, aligned with it (left on the boards, centred on the wild card) */
.dc-when { margin-top: 15cqw; font: 700 4.4cqw/1.3 var(--serif); letter-spacing: .01em; opacity: .9; }
.dc-b-title { margin-top: 1.6cqw; font: 600 9cqw/1.05 var(--serif); letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }
.dc-strips { flex: 1; display: flex; flex-direction: column; gap: 2.4cqw; margin: 5cqw 0 4cqw; min-height: 0; }
.dc-strips i { flex: 1; box-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .18); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.dc-card.picked .dc-strips i { transform: none; }
.dc-card.picked .dc-strips i:nth-child(1) { transition-delay: .55s; } .dc-card.picked .dc-strips i:nth-child(2) { transition-delay: .62s; }
.dc-card.picked .dc-strips i:nth-child(3) { transition-delay: .69s; } .dc-card.picked .dc-strips i:nth-child(4) { transition-delay: .76s; }
.dc-card.picked .dc-strips i:nth-child(5) { transition-delay: .83s; }
.dc-note { font: italic 500 4.6cqw/1.32 var(--serif); padding-right: 9cqw; }
.dc-avoid { margin: -1cqw 0 2.6cqw; padding-right: 9cqw; font: 700 4.3cqw/1.3 var(--serif); color: var(--accent); }

/* the Joker: reception has no theme */
.dc-wild { align-items: center; text-align: center; padding-top: 33cqw; }
.dc-wild .dc-crown { width: 34cqw; color: var(--accent); fill: var(--accent); }
.dc-wild .dc-when { margin-top: 5cqw; }
.dc-wild .dc-b-title { margin-top: 1.6cqw; }
.dc-wild-line { margin-top: 3cqw; font: 400 12cqw/1.05 var(--script); color: var(--accent); }
.dc-wild .dc-note { margin-top: auto; padding: 0 6cqw; font-size: 4.8cqw; }

.dc-foot { position: absolute; left: 0; right: 0; top: 0; z-index: 25; display: flex; justify-content: center; opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease-soft); }
.dc.has-pick .dc-foot { transition-delay: .55s; }
.dc-foot { gap: 10px; }
.dc-pdf { text-decoration: none; }
.dc-card.dc-dragging { transition: transform .8s cubic-bezier(.22, 1.12, .36, 1), opacity .5s var(--ease-soft); }
.dc.has-pick .dc-sheet { touch-action: pan-y; }
.dc-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 99px; border: 1px solid rgba(248, 236, 214, .4);
  background: none; color: var(--ivory); font: 600 15px var(--serif); letter-spacing: .02em; cursor: pointer; }
.dc-pdf { background: var(--ivory); color: var(--velvet-800); border-color: var(--ivory); }
.dc-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .dc-card, .dc-inner, .dc-strips i, .dc-cap { transition-duration: .01s !important; transition-delay: 0s !important; } }

/* ------------------------------------------------------------ haptics (iPhone): lib/haptics.js */
/* the whole film is a tap target while it waits (open the box, shuffle, reveal) */
#tapzone { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
[data-state="await-open"] #tapzone, [data-state="hover"] #tapzone, [data-state="pick-wait"] #tapzone { pointer-events: auto; cursor: pointer; }
/* a transparent label over the element, wrapping a native switch the finger never sees: a real tap ticks */
.hx { position: absolute; inset: 0; z-index: 1; display: block; margin: 0; border-radius: inherit; cursor: inherit; -webkit-tap-highlight-color: transparent; }
.hx input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
html.hx-off .hx { display: none; }   /* muted: taps go straight through */
/* a card's words sit above the card's own switch but let taps through to it, except their buttons and links (which
   carry their own switch) */
.hx-ios .card .cc { z-index: 2; pointer-events: none; }
.hx-ios .card .cc a, .hx-ios .card .cc button { pointer-events: auto; }

/* The display italic (--script) wears its swash capitals: the R of Reception, the M of Mehendi. Kept last, because the
   `font` shorthand above resets font-feature-settings. */
.script, .c-title, .c-script, .sheet h2, #gcal-list b, .tl-name, .photo .ph b, .photo figcaption, .pc-title, .wh-wild, .dc-title, .dc-wild-line { font-feature-settings: "ss02"; }