/* style.css: every style for wedding template Pro-10 (index.html). Mobile-first;
   769px+ shows the desktop notice instead of the page. Class names are shared
   with script.js (is-locked, is-loading, is-intro, is-in, is-visible, is-open,
   is-sent). Painted pigment lives on <canvas class="paint"> layers drawn by
   paint.js. Shape rule for the whole page: anything you tap is a full pill
   (buttons, count pills), fields and answer cards are 16px, painted panels and
   sheets carry no other radius than the sheet lip. */

/* ===== FONTS =====
   Vardi: calligraphic Georgian display (name, titles, times). Irubaqidze: body.
   `block` is only safe because the loader covers the block period. */
@font-face {
  font-family: 'Vardi';
  src: url('fonts/vardi.woff2') format('woff2');
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: 'Irubaqidze';
  src: url('fonts/irubaqidze.woff2') format('woff2');
  font-weight: 400;
  font-display: block;
}

/* ===== TOKENS =====
   Pulled from the hero video: marble (pearl), pool water (lagoon, aqua),
   bougainvillea (accent). The accent is the only saturated UI colour. */
:root {
  --vh: 1vh;
  --pearl: #f6f5f2;
  /* Both inks pushed dark for legibility over paper and paint; ink-soft is
     only a hair lighter than ink now, for hierarchy, never for faint text. */
  --ink: #082a30;
  --ink-soft: #1f454b;
  --aqua: #3fa2a8;
  --accent: #a8327e;
  --gold: #b88f33;
  --white: #fdfdfb;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Rounded top lip of every sheet; used as both radius and negative overlap. */
  --lip: 30px;
  --display: 'Vardi', 'Irubaqidze', serif;
  --body: 'Irubaqidze', 'Noto Serif Georgian', serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { overscroll-behavior-y: none; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.8s ease;
}
html.can-scroll { scrollbar-color: rgba(15, 61, 68, 0.35) var(--pearl); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background-color: var(--pearl); }
::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 6px; transition: background-color 0.8s ease; }
html.can-scroll ::-webkit-scrollbar-thumb { background-color: rgba(15, 61, 68, 0.35); }

body {
  margin: 0;
  background-color: var(--pearl);
  background-image: url('https://weddsite.b-cdn.net/showcase/pro-10/paper.webp');
  background-size: 512px 512px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  /* Every text on the page is heavy, for legibility on phones. Both fonts ship a single
     weight, so the browser's synthetic bold is soft; a same-colour outline drawn
     under the fill adds the real weight. Only the width is set here: the stroke
     colour's initial value is currentcolor, so each element outlines in its own
     colour (white countdown, pink accents, dark ink). Vardi gets a wider one
     below, its hairlines need it. */
  font-weight: 900;
  -webkit-text-stroke-width: 0.5px;
  paint-order: stroke fill;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

p, h1, h2, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }

.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* Intro lock: JS traps the gesture (script.js). Never position:fixed or
   overflow:hidden here; Chrome iOS from a chat app freezes a short viewport. */
html.is-locked, body.is-locked { overscroll-behavior: none; touch-action: none; }

/* ===== LOADER ===== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pearl);
  transition: opacity 0.7s ease;
}
.loader.is-done { opacity: 0; pointer-events: none; }
.loader.is-gone { display: none; }
.loader__ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(15, 61, 68, 0.12);
  border-top-color: var(--aqua);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background-color: #2d6f74;
}
.vh-lock .hero { min-height: calc(var(--vh) * 100); }

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* A soft base under the painted mist so the name stays legible on any frame. */
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(246, 245, 242, 0.5) 0%, rgba(246, 245, 242, 0.18) 34%, rgba(246, 245, 242, 0) 48%,
    rgba(10, 48, 56, 0) 70%, rgba(10, 48, 56, 0.35) 100%);
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero.is-intro .hero__veil { opacity: 1; }

.hero__mist {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__top {
  position: absolute;
  left: 0;
  right: 0;
  top: 6.5%;
  padding: 0 22px;
  text-align: center;
}
/* Eyebrow and date sit on the thinnest part of the mist, over a busy frame, so
   they get full ink and a paper-coloured halo (the watercolor style's own way
   of keeping a hand note legible over a painting) instead of a box. */
.hero__eyebrow,
.hero__date {
  text-shadow: 0 0 2px rgba(246, 245, 242, 0.95), 0 0 8px rgba(246, 245, 242, 0.9), 0 0 18px rgba(246, 245, 242, 0.8);
}
.hero__eyebrow {
  font-size: 17px;
  letter-spacing: 0.14em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.1s var(--ease) 0.7s, transform 1.1s var(--ease) 0.7s;
}
.hero__name { margin: 4px auto 0; width: 90%; max-width: 400px; line-height: 0; }
.hero__name-svg { width: 100%; height: auto; overflow: visible; }
.hero__name-svg path { vector-effect: non-scaling-stroke; }
.hero__date {
  margin-top: 8px;
  font-size: 20px;
  -webkit-text-stroke-width: 0.6px;
  letter-spacing: 0.03em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.1s var(--ease) 3.4s, transform 1.1s var(--ease) 3.4s;
}
.hero.is-intro .hero__eyebrow,
.hero.is-intro .hero__date { opacity: 1; transform: none; }

.hero__bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--lip) + 4%);     /* clear of the first sheet's lip */
  padding: 0 22px env(safe-area-inset-bottom);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.2s var(--ease) 2.2s, transform 1.2s var(--ease) 2.2s;
}
.hero.is-intro .hero__bottom { opacity: 1; transform: none; }

.count { display: flex; justify-content: center; gap: 20px; color: var(--white); text-shadow: 0 1px 3px rgba(8, 40, 46, 0.7), 0 2px 18px rgba(8, 40, 46, 0.75); }
.count__cell { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.count__num { font-family: var(--display); font-size: 50px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.count__lbl { font-size: 15px; letter-spacing: 0.06em; }

/* Scroll hint: a bright pearl pill (the tap cover's look) so it pops off the
   dark water, with a pulsing ring and a bob. Two layers on purpose: the outer
   link fades in once, 3.6s into the intro; the inner pill handles the scrolled
   state with no delay, so scrolling back to the top shows it again at once. */
.scroll-hint {
  display: block;
  width: fit-content;
  margin: 20px auto 0;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.9s ease 3.6s;
}
.hero.is-intro .scroll-hint { opacity: 1; }
.scroll-hint__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px 13px 26px;
  border-radius: 999px;
  background-color: rgba(246, 245, 242, 0.95);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0.03em;
  box-shadow: 0 10px 30px rgba(8, 40, 46, 0.35);
  transition: opacity 0.5s ease;
}
.scroll-hint__pill .icon { font-size: 24px; color: var(--accent); stroke: currentColor; stroke-width: 8px; }
.scroll-hint__pill::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  border: 2px solid rgba(246, 245, 242, 0.9);
  animation: tap-ring 2s var(--ease) infinite;
}
.hero.is-intro .scroll-hint__pill { animation: hint-bob 1.6s ease-in-out 3.6s infinite; }
html.is-scrolled .scroll-hint__pill { opacity: 0; pointer-events: none; }
@keyframes hint-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(9px); }
}

/* Low Power Mode tap cover. An opaque still of the video's first frame, so the
   guest never sees the stalled <video> (iOS draws its own play glyph on it). The
   poster is that same frame and the crop matches the video's object-fit, so the
   swap to the playing video under it is invisible; the tap starts the video and
   the intro together. */
.intro-tap {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 22%;
  background-color: #2d6f74;
  background-image: url('https://weddsite.b-cdn.net/showcase/pro-10/hero-poster.jpg');
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  cursor: pointer;
}
.intro-tap.is-visible { opacity: 1; pointer-events: auto; }
/* Backup for the same case: never show WebKit's own start-playback button. */
.hero__video::-webkit-media-controls-start-playback-button { display: none; -webkit-appearance: none; }
.hero__video::-webkit-media-controls { display: none; }
.intro-tap__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background-color: rgba(246, 245, 242, 0.92);
  color: var(--ink);
  font-size: 16px;
  box-shadow: 0 10px 34px rgba(15, 61, 68, 0.22);
}
.intro-tap__pill .icon { font-size: 22px; color: var(--accent); }
.intro-tap__pill::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  border: 1px solid rgba(246, 245, 242, 0.9);
  animation: tap-ring 2.2s var(--ease) infinite;
}
@keyframes tap-ring {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.35, 1.7); opacity: 0; }
}

/* ===== SECTIONS ===== */
/* ===== SHEETS =====
   Every block below the hero is a sheet of paper laid over the one before it
   (the Weddsite sheet-stack build): a rounded top lip, an upward shadow and a
   negative margin so it rides over its neighbour. DOM order is paint order, later
   on top, which is exactly what the overlap needs. Sheets are opaque; separation
   comes from the lip, the shadow and a step in paper tone. The tone is a colour
   multiplied into the shared paper texture, so every sheet keeps its grain.
   z-index also makes each sheet a stacking context, so the multiply-blended
   .paint canvas inside blends with this sheet's own paper and nothing else. */
.section,
.footer {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--lip) * -1);
  border-top-left-radius: var(--lip);
  border-top-right-radius: var(--lip);
  background-color: var(--sheet-tone, #ffffff);
  background-image: url('https://weddsite.b-cdn.net/showcase/pro-10/paper.webp');
  background-size: 512px 512px;
  background-blend-mode: multiply;
  box-shadow: 0 -14px 32px rgba(15, 61, 68, 0.14);
}
/* Catches the light along the lip so the fold still reads where two sheets
   are nearly the same tone. */
.section::before,
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 11%;
  right: 11%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.85);
  z-index: 1;
}
/* Tones step through colours of the video: marble, pool water, bougainvillea. */
.schedule { --sheet-tone: #eef6f5; }
.dress    { --sheet-tone: #fbf1f6; }
.rsvp     { --sheet-tone: #edf4f4; }
.footer   { --sheet-tone: #e3eeee; }

.section { padding: 92px 24px; }
.section__inner { position: relative; z-index: 1; }

/* Pigment layers multiply into the paper like real watercolor. */
.paint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* clips strokes (the hanging sprigs) to the sheet's rounded lip */
  border-radius: var(--lip) var(--lip) 0 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.title {
  font-family: var(--display);
  font-size: 44px;
  line-height: 1.3;
  color: var(--ink);
}
.eyebrow { font-size: 16px; letter-spacing: 0.12em; color: var(--ink); }

/* Vardi leans like an italic: its swashes run ~0.3em past the last letter's
   advance and ~0.1em before the first, so a box sized to the advances (a
   fit-content word, an inline-block) crops them. Every Vardi box gets that room
   as padding, so the ink always sits inside its own box. */
.title, .slot__time, .dress__word, .party__big .w, .footer__name, .count__num {
  padding-left: 0.12em;
  padding-right: 0.34em;
  -webkit-text-stroke-width: 1px;
}

/* Scroll reveal: script.js adds .is-in once, via IntersectionObserver. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Welcome: text kept to the left so the sprig owns the top-right corner. */
.welcome { padding-top: 128px; }
.welcome .title { max-width: 250px; }
.welcome__text { margin-top: 20px; max-width: 290px; font-size: 19px; line-height: 1.75; color: var(--ink); }

/* Schedule */
.schedule .title { text-align: center; }
.slot { position: relative; margin-top: 54px; max-width: 72%; }
.slot--right { margin-left: auto; text-align: right; }
.slot__time { font-family: var(--display); font-size: 62px; line-height: 1.15; }
.slot__name { margin-top: 2px; font-size: 20px; color: var(--ink); font-weight: 900; }
/* Venue line under each item: a pin + the place, tapping opens its map. */
.slot__place {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: rgba(8, 42, 48, 0.3);
  text-underline-offset: 7px;
}
.slot__place .icon { font-size: 18px; color: var(--accent); }

/* Place: one .venue block per location. Venue names are in the upright body
   face, not Vardi, so they read at a glance. Georgian names take
   .place__name--long; a short Latin code name (e.g. "G17") takes
   .place__name--plain, the phone's own sans at full size. */
.place { text-align: center; }
.venue { margin-top: 48px; }
.venue + .venue { margin-top: 64px; }
.venue__when { font-size: 17px; line-height: 1.5; color: var(--ink-soft); font-weight: 900; }
.place__name { margin-top: 6px; font-family: var(--body); font-size: 84px; line-height: 1.15; letter-spacing: 0.04em; color: var(--ink); font-weight: 900; }
.place__name--plain { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-weight: 800; letter-spacing: 0.02em; -webkit-text-stroke-width: 0; }
.place__name--long { margin-left: auto; margin-right: auto; max-width: 15ch; font-size: 32px; line-height: 1.35; letter-spacing: 0.01em; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 28px;
  border-radius: 999px;
  background-color: var(--ink);
  color: var(--pearl);
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(15, 61, 68, 0.2);
  transition: opacity 1.1s var(--ease) var(--d, 0s), transform 0.25s var(--ease);
}
.btn .icon { font-size: 19px; }
.btn:active { transform: scale(0.97); }
/* Parking: centred like the venues above it, car over a bold balanced line,
   all inside the painted aqua panel (script.js "place" builder measures this
   box). On reveal the car drives in from the left and settles with a small
   bounce, after the card itself has faded up. */
.parking {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 76px auto 0;
  max-width: 340px;
  padding: 36px 22px 38px;
  text-align: center;
}
.parking__icon {
  font-size: 50px;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-70px);
  transition: opacity 0.6s ease 0.55s, transform 1s cubic-bezier(0.34, 1.4, 0.64, 1) 0.55s;
}
.parking.is-in .parking__icon { opacity: 1; transform: none; }
.parking__text {
  max-width: 17em;
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: balance;
}

/* Dress code */
.dress .title { text-align: right; }
.glitter { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.dress__words { margin-top: 30px; }
.dress__word {
  display: block;
  width: fit-content;
  font-family: var(--display);
  font-size: 38px;
  line-height: 1.45;
  color: var(--ink);
}
.dress__word + .dress__word { margin-top: 20px; }
.dress__word:nth-child(2) { margin-left: auto; margin-right: auto; }
.dress__word:nth-child(3) { margin-left: auto; }

/* Party: the words bounce in on .is-in, then keep a small dance step. */
.party { padding: 120px 24px; text-align: center; overflow: visible; cursor: pointer; user-select: none; -webkit-user-select: none; }
.party__petals {
  position: absolute;
  left: 0;
  right: 0;
  top: -140px;
  bottom: -140px;
  width: 100%;
  height: calc(100% + 280px);
  pointer-events: none;
  z-index: 3;
}
.party__big {
  margin-top: 18px;
  font-family: var(--display);
  font-size: 54px;
  line-height: 1.3;
  color: var(--ink);
}
.party__big .w {
  display: inline-block;
  margin: 0 -0.12em;              /* the lean padding doubles as the word gap */
  opacity: 0;
  transform: translateY(40px) rotate(-6deg) scale(0.85);
  transition: opacity 0.7s ease calc(var(--i) * 0.12s), transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.12s);
}
.party__big .w:nth-child(1) { color: var(--accent); }
.party__big.is-in .w { opacity: 1; transform: none; }
.party__big.is-dancing .w { animation: dance 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * -0.36s); }
@keyframes dance {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(-2deg); }
  75% { transform: translateY(2px) rotate(2deg); }
}

/* RSVP. Labels sit above their fields; radios are visually hidden inside
   their cards/pills so the whole card is the hit area, focus still shows. */
.rsvp { padding: 100px 24px; }
.rsvp .title { text-align: center; }
.rsvp__deadline { margin-top: 6px; text-align: center; font-size: 17px; color: var(--ink-soft); }
.rsvp__form { display: grid; gap: 22px; max-width: 360px; margin: 36px auto 0; }
.field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field__label { padding: 0; font-size: 15px; color: var(--ink-soft); }
.field__input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(15, 61, 68, 0.26);
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.75);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field__input:focus { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(63, 162, 168, 0.22); }
.field__input.is-invalid { border-color: var(--accent); }

.choice { display: grid; gap: 10px; }
.choice__card, .pill { position: relative; display: block; cursor: pointer; }
.choice__card input, .pill input { position: absolute; opacity: 0; pointer-events: none; }
.choice__card span {
  display: block;
  padding: 15px 18px;
  border: 1px solid rgba(15, 61, 68, 0.26);
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.75);
  font-size: 17px;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.choice__card input:checked + span { background-color: var(--ink); border-color: var(--ink); color: var(--pearl); }
.choice__card input:focus-visible + span,
.pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(63, 162, 168, 0.35); }

/* Party size only matters for a "yes"; script.js opens it on that answer. */
.rsvp__count { display: none; }
.rsvp__count.is-open { display: grid; animation: rise 0.5s var(--ease); }
.pills { display: flex; gap: 10px; }
.pill span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(15, 61, 68, 0.26);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.75);
  font-size: 18px;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.pill input:checked + span { background-color: var(--accent); border-color: var(--accent); color: var(--white); }

.rsvp__error { min-height: 1.5em; margin-top: -8px; font-size: 15px; color: var(--accent); }
.rsvp__submit { justify-self: center; margin-top: 0; padding: 15px 46px; border: 0; font: inherit; font-size: 17px; cursor: pointer; }
.rsvp__thanks { display: none; margin-top: 36px; text-align: center; }
.rsvp.is-sent .rsvp__form { display: none; }
.rsvp.is-sent .rsvp__thanks { display: block; animation: rise 0.8s var(--ease); }
.rsvp__thanks-icon { font-size: 46px; color: var(--accent); }
.rsvp__thanks-text { max-width: 26ch; margin: 12px auto 0; font-size: 21px; line-height: 1.6; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Footer */
.footer { padding: 150px 24px calc(40px + env(safe-area-inset-bottom)); text-align: center; }
.footer__name { position: relative; font-family: var(--display); font-size: 46px; line-height: 1.3; }
.footer__credit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 30px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink);
  opacity: 0.3;
  transition: opacity 0.3s ease;
}
.footer__credit:hover, .footer__credit:active { opacity: 0.6; }
.footer__logo { width: 18px; height: auto; }

/* ===== DESKTOP NOTICE ===== */
.desktop-notice {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background-color: var(--pearl);
  background-image: url('https://weddsite.b-cdn.net/showcase/pro-10/paper.webp');
}
.desktop-notice p { font-size: 15px; line-height: 1.9; color: var(--ink); }
.desktop-notice__logo { width: 52px; height: auto; opacity: 0.8; margin-bottom: 18px; }
.desktop-notice__sub { margin-top: 6px; font-size: 13px; color: var(--ink-soft) !important; }

/* ===== BREAKPOINTS ===== */
@media (min-width: 481px) {
  .title { font-size: 50px; }
  .slot__time { font-size: 70px; }
  .dress__word { font-size: 46px; }
  .place__name { font-size: 70px; }
  .party__big { font-size: 62px; }
}

@media (min-width: 769px) {
  .desktop-notice { display: flex; }
  main, .loader { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .party__big .w, .parking__icon { transition: none; opacity: 1; transform: none; }
  .party__big.is-dancing .w, .intro-tap__pill::after, .rsvp__count.is-open, .rsvp.is-sent .rsvp__thanks, .hero.is-intro .scroll-hint__pill, .scroll-hint__pill::after { animation: none; }
  .hero__eyebrow, .hero__date, .hero__bottom, .hero__veil, .scroll-hint, .scroll-hint__pill { transition: none; }
}