/* Patri & Rubén · 31.07.2027 — a cork board with everything pinned or taped
   to it: a magazine cover cut out and taped up, the couple's letter and the
   clothesline, the day, the hand-drawn route, the reply form and the questions. */

@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/bodoni-moda.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 500; font-display: swap; src: url("../assets/fonts/bodoni-moda-italic.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/instrument-sans.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../assets/fonts/caveat.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/courier-prime-400.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/courier-prime-700.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/instrument-serif.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/instrument-serif-italic.woff2") format("woff2"); }

:root {
  --cork: #d4ad7a;
  --cork-light: #e3c8a0;
  --cork-wash: linear-gradient(rgba(255, 248, 236, 0.34), rgba(255, 248, 236, 0.34));
  --sheet: #fffdf7;
  --ink: #1f1b16;
  --ink-soft: #4a4036;
  --muted: #6d6253;
  --cobalt: #2348c7;
  --tomato: #e2492f;
  --wine: #7b1e22;
  --mustard: #e8b630;
  --green: #2f7a4f;
  --pink: #f3a6b8;
  --yellow: #fde68a;
  --sky: #b8d4ff;
  --mint: #bfe3c4;
  --orange: #ffc58f;
  --lilac: #d9c8f4;
  --tape: rgba(232, 214, 170, 0.86);
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --label: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
  --serif: "Instrument Serif", Georgia, serif;
  --type: "Courier Prime", "Courier New", monospace;
  --wobble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='40'%3E%3Cpath d='M4 0c3 6-3 14 0 20s-3 14 0 20' fill='none' stroke='%231f1b16' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c5 0 9 4 8 9s-5 9-10 8-8-5-7-10 5-8 10-7c2 0 4 2 5 3' fill='%23fffdf7' stroke='%23e2492f' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --goal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='%23e2492f' stroke='%231f1b16' stroke-width='1.6'/%3E%3Cpath d='M12 17.5c-3.6-2.6-5.2-4.3-5.2-6.2 0-1.5 1.1-2.6 2.5-2.6 1 0 2 .5 2.7 1.5.7-1 1.7-1.5 2.7-1.5 1.4 0 2.5 1.1 2.5 2.6 0 1.9-1.6 3.6-5.2 6.2z' fill='%23fff'/%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13c2 1 4 3 6 6 3-6 7-11 11-15' fill='none' stroke='%23e2492f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9c3 3 5 5 7 7 2-3 5-5 7-8' fill='none' stroke='%232348c7' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E");
  --whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E");
  --mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");
  --directions: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M21.7 11.3l-9-9a1 1 0 0 0-1.4 0l-9 9a1 1 0 0 0 0 1.4l9 9a1 1 0 0 0 1.4 0l9-9a1 1 0 0 0 0-1.4zM14 14.5V12h-4v3H8v-4a1 1 0 0 1 1-1h5V7.5l3.5 3.5z'/%3E%3C/svg%3E");
  --map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.5 3l-.2 0L15 5.1 9 3 3.4 4.9c-.2.1-.4.3-.4.5V20.5c0 .3.2.5.5.5l.2 0L9 18.9l6 2.1 5.6-1.9c.2-.1.4-.3.4-.5V3.5c0-.3-.2-.5-.5-.5zM15 19l-6-2.1V5l6 2.1z'/%3E%3C/svg%3E");
  --calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M17 12h-5v5h5zM16 1v2H8V1H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-1V1zm3 18H5V8h14z'/%3E%3C/svg%3E");
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.3 3.2 4.5 6.9 4.5c2 0 3.6 1.1 5.1 3 1.5-1.9 3.1-3 5.1-3 3.7 0 6 3.8 4.5 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
  --help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-4h2v2h-2zm1-10a4 4 0 0 0-4 4h2a2 2 0 1 1 4 0c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5a4 4 0 0 0-4-4z'/%3E%3C/svg%3E");
  --torn: conic-gradient(from 45deg at left, #000 25%, #0000 0) left / 51% 0.42rem repeat-y, conic-gradient(from -135deg at right, #000 25%, #0000 0) right / 51% 0.42rem repeat-y;  --zigzag-bottom: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 1.1rem 0.55rem repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 0.55rem) no-repeat;
  --tilt-x: 0;
  --tilt-y: 0;
  --pinned: 0 1px 0 rgba(0, 0, 0, 0.05), calc(var(--tilt-x) * -8px) calc(18px + var(--tilt-y) * -6px) 30px -20px rgba(0, 0, 0, 0.55);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; scrollbar-color: var(--tomato) var(--cork-light); overflow-x: hidden; }
body {
  margin: 0;
  background: var(--cork-wash), var(--cork) url("../assets/cork.jpg") 0 0 / 256px 256px;
  color: var(--ink);
  font: 400 1rem/1.55 var(--type);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px dashed var(--cobalt); outline-offset: 4px; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 60; padding: 0.5rem 0.8rem; background: var(--ink); color: var(--sheet); font: 700 0.9rem/1.2 var(--type); }
.skip:focus { top: 1rem; }

/* Fasteners: paper tape and round-headed pins */
.tape { position: absolute; z-index: 3; width: 6rem; height: 1.7rem; background: var(--tape); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-mask: var(--torn); mask: var(--torn); }
.tape--l { left: -0.8rem; top: -0.6rem; transform: rotate(-32deg); }
.tape--r { right: -0.8rem; top: -0.6rem; transform: rotate(28deg); }
.tape--c { left: 50%; top: -0.8rem; transform: translateX(-50%) rotate(-3deg); }
.pin { position: absolute; z-index: 4; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9a85, var(--tomato) 58%, #9c2814); box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.35); }
.pin--c { left: 50%; top: -0.55rem; margin-left: -0.575rem; }
.pin--l { left: 1.1rem; top: -0.5rem; }
.pin--r { right: 1.1rem; top: -0.5rem; }

/* Opening envelope: kraft paper under a warm light, shown once per visit. Only
   the wax seal opens it: the seal splits, the flap lifts and the card slides out. */
.intro { display: none; }
.intro:focus { outline: none; }
.has-intro { overflow: hidden; }
.has-intro .intro { position: fixed; z-index: 80; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2rem; padding: 1.5rem; background: inherit; transition: opacity 0.5s ease, transform 0.5s ease; }
.has-intro .intro::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 55% at 50% 44%, rgba(255, 228, 176, 0.55), rgba(255, 214, 150, 0.14) 48%, rgba(48, 28, 8, 0.42) 100%); pointer-events: none; }
.intro__envelope { position: relative; width: min(86vw, 25rem); aspect-ratio: 3 / 2; perspective: 900px; filter: drop-shadow(6px 22px 22px rgba(48, 26, 6, 0.45)); }
.intro__card { position: absolute; z-index: 1; left: 6%; right: 6%; top: 8%; height: 84%; display: grid; place-content: center; gap: 0.45rem; background: var(--sheet); text-align: center; transition: transform 0.6s cubic-bezier(.2, .8, .2, 1) 0.75s; }
.intro__card b { font: 800 clamp(1.3rem, 6vw, 1.9rem)/1 var(--display); letter-spacing: -0.02em; text-transform: uppercase; }
.intro__card i { font-weight: 500; color: var(--wine); text-transform: none; }
.intro__card span { font: 600 0.78rem/1 var(--label); letter-spacing: 0.2em; color: var(--ink-soft); }
.intro__pocket {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(to bottom right, rgba(70, 40, 12, 0) calc(50% - 1px), rgba(70, 40, 12, 0.3) 50%, rgba(70, 40, 12, 0) calc(50% + 1px)) left bottom / 50% 55% no-repeat,
    linear-gradient(to bottom left, rgba(70, 40, 12, 0) calc(50% - 1px), rgba(70, 40, 12, 0.3) 50%, rgba(70, 40, 12, 0) calc(50% + 1px)) right bottom / 50% 55% no-repeat,
    url("../assets/paper-grain.png"),
    #c9a072;
  background-blend-mode: normal, normal, multiply, normal;
  box-shadow: inset 0 0 0 1px rgba(255, 238, 205, 0.25), inset 0 0 16px rgba(74, 42, 12, 0.4);
}
.intro__to { position: absolute; z-index: 3; left: 0; right: 0; bottom: 8%; font: 700 1.4rem/1.05 var(--hand); color: #2b1d10; text-align: center; transform: rotate(-2deg); }
.intro__flap { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 62%; background: linear-gradient(rgba(255, 236, 200, 0.12), rgba(60, 34, 8, 0.14)), url("../assets/paper-grain.png"), #bd9163; background-blend-mode: normal, multiply, normal; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform 0.55s ease-in-out 0.3s, z-index 0s linear 0.57s; }
.intro__seal { position: absolute; z-index: 5; left: 50%; top: 62%; width: 4.4rem; height: 4.4rem; margin: -2.2rem 0 0 -2.2rem; padding: 0; border: 0; border-radius: 48% 52% 46% 54% / 53% 47% 55% 45%; background: none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35); color: #f6dcc5; font: 800 1.15rem/1 var(--display); cursor: pointer; transition: box-shadow 0.2s ease; }
.intro__seal:focus-visible { outline: 2px solid rgba(255, 248, 236, 0.85); outline-offset: 3px; }
/* The whole seal shows until it is tapped; only then do the two halves appear and split */
.intro__wax { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: radial-gradient(circle at 35% 30%, #c2413b, var(--wine) 60%, #4d0f13); box-shadow: inset 0 0 0 0.35rem rgba(0, 0, 0, 0.14); }
.intro__wax--l, .intro__wax--r { opacity: 0; }
.intro__wax--l { clip-path: polygon(0 0, 52% 0, 46% 18%, 55% 34%, 45% 50%, 54% 66%, 47% 82%, 53% 100%, 0 100%); --split: translate(-0.9rem, 0.5rem) rotate(-16deg); }
.intro__wax--r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 53% 100%, 47% 82%, 54% 66%, 45% 50%, 55% 34%, 46% 18%); --split: translate(0.9rem, 0.7rem) rotate(14deg); }
.intro__hint { position: relative; padding: 0.4rem 0.9rem 0.3rem; background: var(--sheet); font: 700 1.5rem/1.1 var(--hand); color: var(--ink); box-shadow: 0 10px 14px -10px rgba(0, 0, 0, 0.5); transform: rotate(-2deg); }
.intro.is-opening .intro__seal { box-shadow: none; }
.intro.is-opening .intro__wax { opacity: 0; }
.intro.is-opening .intro__wax--l, .intro.is-opening .intro__wax--r { animation: wax-split 0.6s cubic-bezier(.3, .7, .4, 1) forwards; }
@keyframes wax-split { from { opacity: 1; transform: none; } 45% { opacity: 1; } to { opacity: 0; transform: var(--split); } }
.intro.is-opening .intro__flap { z-index: 0; transform: rotateX(180deg); }
.intro.is-opening .intro__card { transform: translateY(-58%); }
.intro.is-leaving { opacity: 0; transform: translateY(2rem); }

/* Language row, inside the contents menu */
.langs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.2rem; padding: 0.45rem 0 0.35rem; border-bottom: 2px dashed rgba(31, 27, 22, 0.22); }
.langs__title { flex-basis: 100%; font: 700 1.1rem/1 var(--hand); color: var(--muted); }
.langs button { min-width: 2.4rem; min-height: 2.2rem; border: 0; background: none; font: 700 1.35rem/1 var(--hand); color: var(--ink); cursor: pointer; opacity: 0.55; }
.langs button[aria-pressed="true"] { opacity: 1; color: var(--tomato); text-decoration: underline wavy var(--tomato); text-underline-offset: 0.2em; }

/* While the scripts fill in the page and the fonts arrive, the content waits (see the script in <head>) */
.is-loading main, .is-loading .fan { opacity: 0; }
main { position: relative; transition: opacity 0.3s ease; }

/* A red thread from the letter to the reply form, drawn while scrolling and tied in a bow.
   It passes over the sheets' blank edge but behind the letter and the photos. */
.thread { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.thread__line { fill: none; stroke: #b8261f; stroke-width: 2.6; stroke-linecap: round; }
.thread__bow { opacity: 0; scale: 0.3; transform-box: fill-box; transform-origin: center; transition: opacity 0.35s ease, scale 0.45s cubic-bezier(.2, 1.6, .4, 1); }
.thread__bow path { fill: none; stroke: #b8261f; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.thread__bow circle { fill: #b8261f; }
.thread.is-tied .thread__bow { opacity: 1; scale: 1.25; }

/* From the wedding day on there is nothing left to reply to */
.is-rsvp-closed #venis, .is-rsvp-closed .note--rsvp, .is-rsvp-closed .thread, .is-rsvp-closed .qa--reply { display: none; }

/* Party mode, from 23:30 on the wedding day: fairy lights over a darker board */
.garland { display: none; position: absolute; z-index: 6; left: 0; right: 0; top: 0.2rem; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.garland__wire { fill: none; stroke: #3b3530; stroke-width: 1.6; }
.garland__bulbs circle { fill: #ffd76a; filter: drop-shadow(0 0 5px #ffcf4d); animation: twinkle 2.2s ease-in-out infinite alternate; }
.garland__bulbs circle:nth-child(3n + 1) { fill: #ffb3c1; animation-delay: -0.7s; }
.garland__bulbs circle:nth-child(3n + 2) { fill: #b8e3ff; animation-delay: -1.4s; }
@keyframes twinkle { from { opacity: 0.55; } to { opacity: 1; } }
.is-party .garland { display: block; }
.is-party body::before { content: ""; position: fixed; z-index: -1; inset: 0; background: rgba(24, 14, 64, 0.46); pointer-events: none; }

/* Contents menu: a yellow note taped to the top right. It keeps its colour when
   it opens; the sections hang below it on one card of the same paper. */
.fan { position: fixed; z-index: 40; top: max(0.8rem, env(safe-area-inset-top)); right: max(0.9rem, env(safe-area-inset-right)); display: flex; align-items: flex-start; gap: 0.55rem; rotate: 1.5deg; transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), opacity 0.3s ease; }
.fan.is-tucked { transform: translateY(calc(-100% - 1.8rem)); }
.fan__nav { position: relative; }
.fan__toggle {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 7.4rem;
  height: 2.75rem;
  border: 0;
  background: var(--yellow);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.12), 0 10px 18px -8px rgba(0, 0, 0, 0.35);
  font: 700 1.4rem/1 var(--hand);
  color: var(--ink);
  cursor: pointer;
}
.fan__toggle::before { content: ""; order: 2; width: 0.85rem; height: 0.85rem; background: var(--tomato); -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; transition: transform 0.25s ease; }
.fan__toggle::after { content: ""; position: absolute; left: 50%; top: -0.45rem; width: 2.6rem; height: 0.9rem; background: var(--tape); transform: translateX(-50%) rotate(-5deg); -webkit-mask: var(--torn); mask: var(--torn); }
.fan__toggle[aria-expanded="true"]::before { transform: rotate(180deg); }
.fan__notes {
  position: absolute;
  right: 0;
  top: calc(100% - 0.2rem);
  display: grid;
  width: 11.5rem;
  padding: 0.5rem 0.9rem 0.7rem;
  background: var(--yellow);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.12), 0 18px 26px -14px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.6rem) scaleY(0.92);
  transform-origin: top right;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(.2, .8, .2, 1), visibility 0s linear 0.25s;
}
.fan.is-open .fan__notes { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.note { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.1rem; border-bottom: 2px dashed rgba(31, 27, 22, 0.22); font: 700 1.45rem/1 var(--hand); color: var(--ink); text-decoration: none; }
.note::before { content: ""; flex: none; width: 1.15rem; height: 1.15rem; background: var(--tomato); -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.note span { padding: 0 0.15rem; background: linear-gradient(transparent 55%, rgba(255, 255, 255, 0.75) 55% 90%, transparent 90%) left / 0 100% no-repeat; transition: background-size 0.2s ease; }
.note:hover span, .note:focus-visible span, .note[aria-current="true"] span { background-size: 100% 100%; }
.note[aria-current="true"] { color: var(--tomato); }
.note--day { --glyph: var(--calendar); }
.note--route { --glyph: var(--directions); }
.note--rsvp { --glyph: var(--mail); }
.note--faq { --glyph: var(--help); }

/* Background picker at the foot of the menu, only while the couple compare cork, light cork and paper */
/* Cover: the "Exclusiva" magazine cover, torn out along the spine and taped
   to the board, with a dog-eared corner and the tear-off calendar stuck on it */
.cover { position: relative; height: 100svh; min-height: 40rem; max-height: 62rem; overflow: hidden; }
.cover__frame { position: relative; height: 100%; max-width: 36rem; margin: 0 auto; }
.cover__magazine { --curl: 3.3rem; position: absolute; z-index: 1; left: 0.75rem; right: 0.75rem; top: 4rem; bottom: 1.3rem; container-type: inline-size; filter: drop-shadow(calc(var(--tilt-x) * -7px) calc(16px + var(--tilt-y) * -5px) 18px rgba(0, 0, 0, 0.32)); transform: rotate(-0.8deg); }
/* The paper under the print: its torn fibres show along the left edge */
.cover__magazine::before { content: ""; position: absolute; inset: 0; background: #f7f4ee; clip-path: polygon(2px 0, 100% 0, 100% calc(100% - var(--curl)), calc(100% - var(--curl)) 100%, 2px 100%, 0 98.6%, 3px 95.8%, 1px 93%, 4px 90.2%, 2px 87.4%, 5px 84.5%, 1px 81.7%, 3px 78.9%, 0 76.1%, 4px 73.2%, 2px 70.4%, 6px 67.6%, 3px 64.8%, 1px 61.9%, 4px 59.1%, 2px 56.3%, 5px 53.5%, 3px 50.6%, 0 47.9%, 2px 45%, 4px 42.2%, 1px 39.4%, 3px 36.6%, 5px 33.7%, 2px 30.9%, 4px 28.1%, 0 25.3%, 3px 22.4%, 1px 19.7%, 5px 16.9%, 2px 14%, 4px 11.2%, 1px 8.4%, 3px 5.5%, 0 2.8%); }
.cover__page { position: absolute; inset: 0; overflow: hidden; background: #ddd8cf; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - var(--curl)), calc(100% - var(--curl)) 100%, 7px 100%, 6px 98.6%, 10px 95.8%, 5px 93%, 9px 90.2%, 10px 87.4%, 10px 84.5%, 7px 81.7%, 7px 78.9%, 7px 76.1%, 9px 73.2%, 8px 70.4%, 10px 67.6%, 11px 64.8%, 6px 61.9%, 10px 59.1%, 9px 56.3%, 9px 53.5%, 8px 50.6%, 6px 47.9%, 10px 45%, 8px 42.2%, 8px 39.4%, 8px 36.6%, 11px 33.7%, 6px 30.9%, 13px 28.1%, 6px 25.3%, 8px 22.4%, 8px 19.7%, 9px 16.9%, 7px 14%, 12px 11.2%, 10px 8.4%, 6px 5.5%, 9px 2.8%); }
.cover__page img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
/* Glossy paper: a sheen, and the page bending towards the torn spine */
.cover__page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.2) 43%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(to right, rgba(60, 40, 20, 0.18), rgba(60, 40, 20, 0) 7%);
  pointer-events: none;
}
.cover__page::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(242, 238, 230, 0.6) 0%, rgba(242, 238, 230, 0) 24%, rgba(0, 0, 0, 0) 46%, rgba(12, 8, 6, 0.45) 68%, rgba(12, 8, 6, 0.82) 100%); pointer-events: none; }
/* The bottom right corner is folded over: the back of the page and its shadow */
.cover__curl { position: absolute; z-index: 2; right: 0; bottom: 0; width: var(--curl); height: var(--curl); filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.22)); }
.cover__curl::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top left, #cbc2b0 50%, #e8e2d5 63%, #fbf9f4 100%); clip-path: polygon(0 0, 100% 0, 0 100%); }
.cover__title { position: absolute; z-index: 2; left: 0; right: 0; top: 1.3rem; text-align: center; white-space: nowrap; color: var(--ink); font: 800 11.6cqi/0.86 var(--display); letter-spacing: -0.035em; text-transform: uppercase; }
.cover__title i { margin: 0 0.04em; font-weight: 500; color: var(--wine); text-transform: none; cursor: pointer; }
/* Tapping the "&" lets paper hearts fly */
.hearts { position: fixed; z-index: 50; width: 0; height: 0; pointer-events: none; }
.hearts span { position: absolute; left: 0; top: 0; width: var(--size); height: var(--size); background: var(--color); -webkit-mask: var(--heart) center / contain no-repeat; mask: var(--heart) center / contain no-repeat; opacity: 0; animation: heart-float 1.7s cubic-bezier(.2, .7, .3, 1) var(--delay) forwards; }
@keyframes heart-float { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% - var(--dy))) rotate(var(--spin)) scale(1); } }
.cover__issue { position: absolute; z-index: 2; left: 0; right: 0; top: calc(1.4rem + 11.6cqi); text-align: center; color: var(--ink); font: 600 0.74rem/1 var(--label); letter-spacing: 0.2em; text-transform: uppercase; }
.cover__tape--l { left: -1.7rem; top: -0.6rem; transform: rotate(-34deg); }
.cover__tape--r { right: -1.7rem; top: -0.6rem; transform: rotate(32deg); }

.cover__foot { position: absolute; z-index: 3; left: 1.1rem; right: -0.45rem; bottom: 1.2rem; display: grid; }
/* The calendar sits on top of the magazine and casts its own shadow on the page */
.cover__foot .calendar { justify-self: end; width: 6.7rem; margin-bottom: 1.1rem; padding: 1.3rem 0.4rem 0.6rem; box-shadow: 0 3px 0 -1px #f3eee2, 0 3px 0 0 #ddd3bf, 0 6px 0 -1px #f8f4ea, 0 6px 0 0 #d5cab4, 8px 16px 16px -4px rgba(0, 0, 0, 0.5), 2px 3px 5px rgba(0, 0, 0, 0.22); transform: rotate(4deg); }.cover__foot .calendar__label { margin: 0 0 0.05rem; color: var(--ink); }
.cover__foot .calendar__days { font-size: 3.4rem; }
.cover__foot .calendar__clock { margin-top: 0.4rem; padding-top: 0.35rem; font-size: 0.7rem; }
.cover__foot .calendar__clock b { font-size: 0.86rem; }
/* After the wedding the headline changes and the calendar stays on 31 July */
.calendar__before, .is-married .calendar__after { display: grid; justify-items: center; }
.calendar__after, .cover__after, .is-married .calendar__before, .is-married .cover__before { display: none; }
.is-married .cover__after { display: inline; }
.calendar__day, .calendar__since { display: grid; justify-items: center; }
/* 100 days, a month, a week, tomorrow and the day itself get a little flag */
.calendar__flag { position: absolute; z-index: 3; left: -1rem; top: -1.25rem; padding: 0.25rem 0.55rem 0.2rem; background: var(--tomato); color: #fff; font: 700 1rem/1 var(--hand); white-space: nowrap; box-shadow: 2px 2px 0 var(--ink); transform: rotate(-8deg); }
.calendar__thanks { margin-top: 0.4rem; padding-top: 0.35rem; border-top: 1px dashed rgba(31, 27, 22, 0.3); font: 700 1rem/1.05 var(--hand); color: var(--tomato); }
.cover__kicker { justify-self: start; padding: 0.3rem 0.55rem 0.28rem; background: var(--wine); color: #fff; font: 600 0.76rem/1 var(--label); letter-spacing: 0.16em; text-transform: uppercase; }
.cover__headline { margin-top: 0.45rem; padding-right: 1rem; color: #fff; font: italic 500 clamp(2.6rem, 12cqi, 5.6rem)/0.95 var(--display); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }
.cover__date { margin-top: 0.85rem; color: #fff; font: 600 4.9cqi/1.2 var(--label); letter-spacing: 0.16em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65); }

/* Countdown on a tear-off desk calendar */
.calendar {
  position: relative;
  display: grid;
  justify-items: center;
  min-width: 0;
  margin: 0;
  padding: 1.55rem 0.7rem 0.85rem;
  background: #fff;
  text-align: center;
  box-shadow: 0 3px 0 -1px #f3eee2, 0 3px 0 0 #ddd3bf, 0 6px 0 -1px #f8f4ea, 0 6px 0 0 #d5cab4, 0 18px 24px -14px rgba(0, 0, 0, 0.5);
}
.calendar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.95rem; background: var(--tomato); }
.calendar__rings {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: -0.55rem;
  height: 1.15rem;
  background:
    radial-gradient(circle at 50% 78%, #2b2b2b 0.15rem, transparent 0.17rem) 0 0 / 1.5rem 100% repeat-x,
    repeating-linear-gradient(90deg, transparent 0 0.62rem, #a9a9a9 0.62rem 0.88rem, transparent 0.88rem 1.5rem);
}
.calendar__page { display: grid; justify-items: center; }
.calendar__days { font: 400 4.6rem/0.85 var(--serif); }
.calendar__unit { font: 700 1.35rem/1 var(--hand); color: var(--tomato); }
.calendar__label { margin-top: 0.1rem; font: 500 1.05rem/1.1 var(--hand); color: var(--ink-soft); }
.calendar__clock { margin-top: 0.55rem; padding-top: 0.45rem; border-top: 1px dashed rgba(31, 27, 22, 0.3); font: 400 0.85rem/1 var(--type); }
.calendar__clock b { font-size: 1.05rem; }
/* The couple's letter, pinned above the clothesline it introduces */
.story { position: relative; padding: 3rem 0 0.6rem; }
.letter { position: relative; z-index: 2; max-width: 34rem; margin: 0 auto 2.8rem; padding: 0 1.1rem; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.24)); transform: rotate(-1.2deg); }
.letter__paper {
  --rule: 1.7rem;
  padding: 1.9rem 1.2rem 1.1rem 2.5rem;
  background:
    linear-gradient(90deg, transparent 1.6rem, rgba(226, 73, 47, 0.5) 1.6rem calc(1.6rem + 2px), transparent calc(1.6rem + 2px)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule) - 1px), rgba(35, 72, 199, 0.16) calc(var(--rule) - 1px) var(--rule)) 0 1.5rem,
    var(--sheet);
  -webkit-mask: var(--zigzag-bottom);
  mask: var(--zigzag-bottom);
}
.letter__text p { font: 400 1.18rem/var(--rule) var(--type); }
.letter__sign { display: table; margin: 0.3rem 0 0 auto; padding-bottom: 0.5rem; font: 700 1.75rem/1 var(--hand); color: var(--tomato); }
.letter__sign::before { content: "\2014\00a0"; }
.letter__hello { font: 700 1.55rem/var(--rule) var(--hand); color: var(--tomato); }
/* The signature is written by hand once the letter is on screen */
.letter__sign.is-waiting { clip-path: inset(-30% 100% -30% 0); }
.letter__sign.is-writing { animation: write 1.6s cubic-bezier(.45, .05, .35, 1) forwards; }
@keyframes write { from { clip-path: inset(-30% 100% -30% 0); } to { clip-path: inset(-30% -10% -30% 0); } }

/* Postage stamps with their postmark, on the letter and on the reply */
.stamp {
  --r: 3px;
  position: relative;
  z-index: 1;
  float: right;
  width: 4.4rem;
  height: 5.2rem;
  margin: -0.9rem -0.5rem 0.4rem 0.9rem;
  padding: calc(2 * var(--r));
  background:
    radial-gradient(var(--r), #0000 98%, #fff) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
  transform: rotate(4deg);
}
.stamp__art { display: grid; place-content: center; justify-items: center; gap: 0.25rem; height: 100%; background: linear-gradient(160deg, #ece4f8, var(--lilac)); color: var(--wine); }
/* Upright monograms: the italic ampersand's ball terminal reads as a stray dot at this size */
.stamp__art b { font: 800 1.15rem/1 var(--display); letter-spacing: 0.02em; }
.stamp__art i, .intro__seal i { font-style: normal; }
.stamp__art small { font: 600 0.55rem/1 var(--label); letter-spacing: 0.18em; color: var(--ink-soft); }
.stamp__mark { position: absolute; left: -1.4rem; top: 2.4rem; width: 5.2rem; height: auto; overflow: visible; opacity: 0.7; mix-blend-mode: multiply; transform: rotate(-14deg); pointer-events: none; }
.stamp__mark circle, .stamp__mark path { fill: none; stroke: #3b3530; stroke-width: 1.6; }
.stamp__mark text { font: 600 8.5px var(--label); letter-spacing: 0.08em; fill: #3b3530; }
.label { position: relative; display: table; margin: 0 auto; padding: 0.45rem 1.1rem 0.35rem; background: var(--sheet); font: 700 2.1rem/1 var(--hand); color: var(--cobalt); box-shadow: 0 10px 14px -10px rgba(0, 0, 0, 0.5); transform: rotate(-2deg); }

/* The clothesline title, with a taped note beside it on how to play with the photos */
.story__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 0.6rem; padding: 0 0.5rem; }
.story__head .label { margin: 0; padding: 0.4rem 0.85rem 0.3rem; font-size: 1.65rem; }
.hint-note { position: relative; max-width: 8.4rem; margin-top: 0.4rem; padding: 0.85rem 0.65rem 0.55rem; background: var(--sheet); font: 700 0.98rem/1.12 var(--hand); color: var(--tomato); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 10px 14px -10px rgba(0, 0, 0, 0.5); transform: rotate(3deg); }
.hint-note::before { content: ""; position: absolute; left: 50%; top: -0.55rem; width: 3.4rem; height: 1rem; background: var(--tape); transform: translateX(-50%) rotate(-5deg); -webkit-mask: var(--torn); mask: var(--torn); }
.hint-note::after { content: "\00a0\2193"; }

/* Clothesline */
.line { position: relative; z-index: 2; --photo-w: clamp(6.1rem, 25vw, 15rem); --rope-top: 40px; --rope-sag: 30px; }
.line__stage { position: relative; height: calc(var(--rope-top) + var(--rope-sag) + var(--photo-w) + 4.4rem + var(--max-drop, 58px)); overflow: hidden; }
.line__rope { position: absolute; left: 0; top: 0; width: 100%; overflow: visible; pointer-events: none; }
.line__rope path { fill: none; stroke: #6d5a43; stroke-width: 1.8; stroke-linecap: round; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.22)); }
.polaroid {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: var(--photo-w);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  --drop: 0px;
}
.polaroid:nth-of-type(even) { z-index: 1; --drop: 58px; }
.polaroid:focus-visible { outline: none; }
.polaroid:focus-visible .polaroid__front, .polaroid:focus-visible .polaroid__back { outline: 3px dashed var(--cobalt); outline-offset: 5px; }
.polaroid.is-dragging { cursor: grabbing; }
.polaroid__swing { position: relative; transform-origin: 50% calc(-1 * var(--drop) - 3px); perspective: 1000px; animation: sway 5.5s ease-in-out var(--delay, 0s) infinite alternate; }
.polaroid__swing::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1.5px; height: calc(var(--drop) + 3px); margin-left: -0.75px; background: #6d5a43; }
.polaroid.is-active .polaroid__swing { animation-play-state: paused; }
@keyframes sway { from { rotate: -1.4deg; } to { rotate: 1.4deg; } }
.peg {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -1.05rem;
  width: 0.64rem;
  height: 2.3rem;
  transform: translateX(-50%);
  border-radius: 2px 2px 3px 3px;
  background: linear-gradient(90deg, #c08d55 0 46%, #7d5733 46% 54%, #d9a96f 54%);
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
}
.peg::after { content: ""; position: absolute; left: -2px; right: -2px; top: 36%; height: 5px; border-radius: 3px; background: linear-gradient(#ececec, #8f8f8f); }
.polaroid__card { position: relative; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(.2, .75, .25, 1); }
.polaroid.is-flipped .polaroid__card { transform: rotateY(180deg); }
.polaroid__front, .polaroid__back { -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), calc(var(--tilt-x) * -6px) calc(14px + var(--tilt-y) * -5px) 22px -12px rgba(0, 0, 0, 0.55); }.polaroid__front { padding: 0.42rem 0.42rem 0; background: #fff; }
.polaroid__front img { width: 100%; aspect-ratio: 1; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.polaroid__caption { display: grid; place-items: center; min-height: 2.2rem; padding: 0.2rem 0.15rem 0.25rem; font: 700 clamp(1rem, 4.1vw, 1.25rem)/1.05 var(--hand); text-align: center; text-wrap: balance; }
.polaroid__back { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; transform: rotateY(180deg); background: #f6efdf url("../assets/paper-grain.png"); }
.polaroid__back time { font: 700 clamp(1.7rem, 7vw, 2.6rem)/1 var(--hand); color: var(--cobalt); transform: rotate(-4deg); }

/* Sheets pinned or taped to the board */
.board { padding-top: 0.6rem; }
.sheet { position: relative; margin: 2.2rem 0.9rem 2.6rem; padding: 2.2rem 1.2rem 1.8rem; background: var(--sheet); box-shadow: var(--pinned); }
.sheet--day { transform: rotate(-1deg); }
.sheet--route { transform: rotate(0.7deg); }
.sheet h2 { margin-bottom: 1.2rem; font: 700 2.8rem/1 var(--hand); color: var(--tomato); }
.sheet--route h2, .sheet--rsvp h2 { color: var(--cobalt); }

.doodle { list-style: none; margin: 0 0 1.4rem; padding: 0; --dot-y: 1.25rem; }
.doodle li { display: grid; grid-template-columns: 3.6rem 1.8rem 1fr; column-gap: 0.6rem; }
.doodle__icon { display: grid; place-items: center; width: 3.4rem; height: 2.5rem; border-radius: 6px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); transform: rotate(-5deg); }
.doodle li:nth-child(even) .doodle__icon { transform: rotate(4deg); }
.doodle__icon img { width: 2.6rem; height: 1.9rem; object-fit: contain; }
.doodle__rail { position: relative; }
.doodle__rail::before { content: ""; position: absolute; left: 50%; top: var(--dot-y); bottom: calc(-1 * var(--dot-y)); width: 8px; transform: translateX(-50%); background: var(--wobble) center top / 8px 40px repeat-y; }
.doodle li:last-child .doodle__rail::before { display: none; }
.doodle__rail::after { content: ""; position: absolute; left: 50%; top: var(--dot-y); width: 1.35rem; height: 1.35rem; transform: translate(-50%, -50%) rotate(-12deg); background: var(--circle) center / contain no-repeat; }
.doodle p { display: grid; padding-bottom: 1.1rem; }
.doodle time { display: flex; align-items: center; height: calc(var(--dot-y) * 2); font: 700 2.3rem/1 var(--hand); }
.doodle p span { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
/* On the wedding day, the step that is happening now */
.doodle li.is-now time { color: var(--tomato); }
.doodle li.is-now .doodle__rail::after { width: 1.6rem; height: 1.6rem; background-image: var(--goal); }
.doodle p .doodle__now { margin-left: 0.55rem; padding: 0.25rem 0.5rem 0.2rem; background: var(--tomato); color: #fff; font: 700 1.15rem/1 var(--hand); letter-spacing: 0; text-transform: none; box-shadow: 2px 2px 0 var(--ink); transform: rotate(-4deg); }

.notice { display: grid; grid-template-columns: 4.4rem 1fr; gap: 0.8rem; align-items: center; margin: 0.6rem -0.3rem 0; padding: 0.9rem 1rem; background: var(--yellow); box-shadow: 2px 4px 0 rgba(0, 0, 0, 0.08), 0 12px 18px -12px rgba(0, 0, 0, 0.4); transform: rotate(1.5deg); }
.notice--car { margin-top: 1.5rem; transform: rotate(-1.2deg); }
.notice p { font: 600 1.28rem/1.18 var(--hand); }
.notice__title { display: block; margin-bottom: 0.2rem; font: 700 0.78rem/1.2 var(--type); letter-spacing: 0.08em; text-transform: uppercase; }
.notice__icon { width: 4.4rem; height: auto; }
.notice__line { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.notice__cross { fill: none; stroke: var(--tomato); stroke-width: 3.6; stroke-linecap: round; }
.notice__wheel { fill: var(--yellow); stroke: var(--ink); stroke-width: 2.4; }
.notice__sign rect { fill: var(--cobalt); }
.notice__sign path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Ticket-shaped links with an icon that says what they do */
.tickets { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.1rem; }
.tickets--day { margin: 0 0 1.4rem; }
.ticket {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.25rem;
  background: var(--mustard);
  color: var(--ink);
  font: 700 0.86rem/1 var(--type);
  text-decoration: none;
  text-transform: uppercase;
  -webkit-mask: radial-gradient(circle 0.45rem at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 0.45rem at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 0.45rem at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 0.45rem at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.ticket::before { content: ""; flex: none; width: 1.15rem; height: 1.15rem; background: currentColor; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.ticket[target="_blank"]::after { content: "\2197"; }
.ticket--route { --glyph: var(--directions); }
.ticket--map { --glyph: var(--map); background: var(--pink); }
.ticket--calendar { --glyph: var(--calendar); background: var(--sky); }
/* Hand-drawn map: the N-320a runs beside the N-320 and the bridge crosses over it */
.sketch { max-width: 21rem; margin: 0 auto 1.5rem; }
.sketch svg { display: block; width: 100%; height: auto; overflow: visible; }
.sketch__edge { fill: none; stroke: #8b7d6a; stroke-width: 2.6; stroke-linecap: round; }
.sketch__median { fill: none; stroke: #b9ad99; stroke-width: 1.6; stroke-dasharray: 10 9; }
.sketch__road { fill: none; stroke: #d9d0c0; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.sketch__road--minor { stroke: #e2dacb; stroke-width: 8; }
.sketch__dirt { fill: none; stroke: #c9a46a; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 2 7; }
.sketch__lane { fill: none; stroke: #c9a46a; stroke-width: 6; stroke-linecap: round; }
.sketch__trees circle { fill: #8fb46c; stroke: #3f5a2a; stroke-width: 1.4; }
.sketch__route, .sketch__arrow { fill: none; stroke: var(--tomato); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.sketch__bridge rect { fill: var(--sheet); }
.sketch__bridge path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.sketch__stop { fill: var(--tomato); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.sketch__mill rect { fill: #f4ead6; stroke: var(--ink); stroke-width: 1.8; }
.sketch__house { fill: var(--sheet); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.sketch__heart { fill: var(--tomato); }
.sketch__parking rect { fill: #ebe4d4; stroke: #8b7d6a; stroke-width: 1.8; }
.sketch__parking path { fill: none; stroke: #8b7d6a; stroke-width: 1.6; stroke-linecap: round; }
.sketch__sign rect { fill: var(--cobalt); }
.sketch__sign path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sketch__labels text { font: 700 15px var(--hand); fill: var(--ink); }
.sketch__labels .sketch__small { font-size: 13px; }
.sketch__labels .sketch__goal { font-size: 17px; fill: var(--tomato); }
.sketch__body { fill: var(--cobalt); stroke: var(--ink); stroke-width: 1.1; }
.sketch__glass { fill: #d6e6ff; stroke: var(--ink); stroke-width: 0.6; }
.sketch__wheels { fill: var(--ink); }
.sketch figcaption { margin-top: 0.6rem; font-size: 0.8rem; color: var(--muted); text-align: center; }

.steps { list-style: none; margin: 0; padding: 0; --dot-y: 0.75rem; }
.steps li { display: grid; grid-template-columns: 1.4rem 1fr; column-gap: 0.7rem; }
.steps__rail { position: relative; }
.steps__rail::before { content: ""; position: absolute; left: 50%; top: var(--dot-y); bottom: calc(-1 * var(--dot-y)); width: 8px; transform: translateX(-50%); background: var(--wobble) center top / 8px 40px repeat-y; opacity: 0.7; }
.steps li:last-child .steps__rail::before { display: none; }
.steps__rail::after { content: ""; position: absolute; left: 50%; top: var(--dot-y); width: 1.05rem; height: 1.05rem; transform: translate(-50%, -50%); background: var(--circle) center / contain no-repeat; }
.steps p { display: grid; padding-bottom: 0.85rem; }
.steps strong { font-weight: 700; line-height: 1.5; }
.steps span { font-size: 0.88rem; color: #5b5145; }
.steps .steps__goal .steps__rail::after { width: 1.6rem; height: 1.6rem; background-image: var(--goal); }
.steps .steps__goal p { padding-bottom: 0.3rem; }
.steps .steps__goal strong { color: var(--tomato); }
.steps__note { margin: 0 0 0 2.1rem; font: 500 1.12rem/1.25 var(--hand); color: var(--muted); }

/* The reply: a sheet pinned with two pins */
.sheet--rsvp { padding-top: 2.4rem; transform: rotate(-0.3deg); }
.rsvp-lead { margin-bottom: 0.7rem; font: 400 1.55rem/1.25 var(--serif); }
.rsvp-help { margin-bottom: 1rem; font-size: 0.9rem; line-height: 1.6; }
.deadline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; margin-bottom: 1.4rem; font: 700 1.3rem/1.2 var(--hand); color: var(--tomato); }
.deadline__left { display: inline-block; padding: 0.05rem 0.6rem; border: 2px solid var(--tomato); border-radius: 50% 45% 52% 48% / 60% 55% 45% 50%; transform: rotate(-3deg); }
.rsvp .form-progress { display: inline-block; margin-bottom: 1.2rem; padding: 0.35rem 0.9rem 0.3rem; background: var(--cobalt); color: #fff; font: 700 1.3rem/1 var(--hand); box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.18); transform: rotate(-2deg); }
.rsvp fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.rsvp legend { padding: 0; }
.rsvp h3 { margin: 0.4rem 0 0.9rem; font: 700 1.9rem/1.05 var(--hand); color: var(--cobalt); }
/* Every question sits in its own box with a handwritten label */
.rsvp .field, .rsvp .choice-set { display: block; margin: 0 0 1rem; padding: 0.8rem 0.9rem 0.9rem; border: 2px solid rgba(31, 27, 22, 0.18); border-radius: 0.6rem; background: rgba(255, 253, 247, 0.96); }
.rsvp .field > span:first-child, .rsvp .choice-title, .rsvp legend:not(.sr-only) { position: relative; display: block; margin-bottom: 0.55rem; padding-left: 1.05rem; font: 700 1.32rem/1.15 var(--hand); color: var(--cobalt); }
.rsvp .field > span:first-child::before, .rsvp .choice-title::before, .rsvp legend:not(.sr-only)::before { content: ""; position: absolute; left: 0; top: 0.32em; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--tomato); }
.rsvp legend:not(.sr-only) { float: left; width: 100%; }
.rsvp legend:not(.sr-only) + * { clear: both; }
.rsvp .req::after { content: "\00a0*"; color: var(--tomato); }
.rsvp .hint { display: block; margin-top: 0.45rem; font: 500 1.1rem/1.25 var(--hand); color: var(--muted); }
.rsvp input[type="text"], .rsvp select, .rsvp textarea {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.3rem 0.65rem;
  border: 2px solid var(--ink);
  border-radius: 0.45rem;
  background-color: #fff;
  color: var(--cobalt);
  font: 700 1.45rem/1.3 var(--hand);
}
.rsvp select { -webkit-appearance: none; appearance: none; padding-right: 2.2rem; background: #fff var(--chevron) right 0.6rem center / 1.1rem no-repeat; cursor: pointer; }
.rsvp textarea { min-height: 5rem; resize: vertical; }
.rsvp input[type="text"]:focus, .rsvp select:focus, .rsvp textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(253, 230, 138, 0.95); }
.rsvp .choice { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0.5rem 0.55rem 0; padding: 0.45rem 0.9rem 0.45rem 0.55rem; border: 2px solid var(--ink); border-radius: 0.9rem; background: #fff; box-shadow: 2px 2px 0 var(--ink); font: 700 0.95rem/1.2 var(--type); cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease; }
.rsvp .choice:has(input:checked) { background: var(--yellow); transform: rotate(-1.5deg); }
.rsvp .choice input {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: 50% 46% 52% 48% / 48% 54% 46% 52%;
  background: var(--sheet) center / 1.05rem no-repeat;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.rsvp .choice input[type="checkbox"] { border-radius: 3px 5px 2px 4px; }
.rsvp .choice input:checked { border-color: var(--tomato); background-image: var(--tick); }
.rsvp .choice input:focus-visible { outline: 3px dashed var(--cobalt); outline-offset: 2px; }
/* The head count, each guest and each later step are coloured cards taped onto the sheet */
.rsvp .guest-list { counter-reset: guest; }
.rsvp .form-card, .rsvp .guest-card, .rsvp .form-step--card { position: relative; box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.1), 0 16px 22px -16px rgba(0, 0, 0, 0.5); }
.rsvp .form-card { margin: 0.6rem 0 0.4rem; padding: 2.3rem 1.4rem 1.6rem; background: var(--lilac); transform: rotate(0.4deg); }
.rsvp .guest-card { counter-increment: guest; margin: 1.9rem 0 0.6rem; padding: 2.1rem 0.85rem 0.3rem; background: var(--yellow); transform: rotate(-0.5deg); }
.rsvp .guest-card:nth-child(4n + 2) { background: var(--pink); transform: rotate(0.5deg); }
.rsvp .guest-card:nth-child(4n + 3) { background: var(--sky); transform: rotate(-0.3deg); }
.rsvp .guest-card:nth-child(4n + 4) { background: var(--mint); transform: rotate(0.4deg); }
.rsvp .guest-card::before { content: counter(guest); position: absolute; left: -0.6rem; top: -1.05rem; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--tomato); color: #fff; font: 700 1.7rem/1 var(--hand); box-shadow: 2px 2px 0 var(--ink); }
.rsvp .form-card::after, .rsvp .guest-card::after, .rsvp .form-step--card::after { content: ""; position: absolute; right: 1.2rem; top: -0.65rem; width: 4.6rem; height: 1.3rem; background: var(--tape); transform: rotate(4deg); -webkit-mask: var(--torn); mask: var(--torn); }
.rsvp .guest-card h3 { margin: 0 0 0.9rem 1.5rem; font: 700 1.65rem/1.05 var(--hand); color: var(--ink); }
.rsvp .form-step--card { margin: 0.6rem 0 0.4rem; padding: 2.3rem 1.4rem 1.6rem; background: var(--mint); transform: rotate(-0.4deg); }
.rsvp .form-step--card[data-step="note"] { background: var(--sky); transform: rotate(0.4deg); }
.rsvp .form-step--card h3 { margin-top: 0; color: var(--ink); }
.rsvp .is-invalid { outline: 3px dashed var(--tomato); outline-offset: 3px; }
.rsvp .form-error { margin-top: 0.4rem; font: 700 1.3rem/1.2 var(--hand); color: var(--tomato); }
.rsvp .form-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.3rem; }
.rsvp .btn {
  min-height: 2.9rem;
  padding: 0.45rem 1.2rem;
  border: 2px solid var(--ink);
  background: var(--mustard);
  color: var(--ink);
  font: 700 1.5rem/1 var(--hand);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-2deg);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rsvp .btn:hover { transform: rotate(0deg) translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.rsvp .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.rsvp .btn--back { background: var(--sheet); }
.rsvp .btn--back::before { content: "\2190\00a0"; }
.rsvp .btn--next::after { content: "\00a0\2192"; }
.rsvp .btn--send { background: var(--pink); }
.rsvp .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.form-status { font: 700 1.8rem/1.2 var(--hand); color: var(--cobalt); white-space: pre-line; }
.form-missing { font-size: 0.85rem; }

/* Questions: one pinned sticky note each, every one a different colour */
.sheet--faq { transform: rotate(0.4deg); }
.cards { display: grid; gap: 1.7rem 1.2rem; padding-top: 0.4rem; }
.qa { position: relative; padding: 1.4rem 1rem 1.15rem; background: var(--yellow); box-shadow: 2px 4px 0 rgba(0, 0, 0, 0.08), 0 14px 20px -14px rgba(0, 0, 0, 0.45); }
.qa:nth-child(2) { background: var(--pink); }
.qa:nth-child(3) { background: var(--sky); }
.qa:nth-child(4) { background: var(--mint); }
.qa:nth-child(5) { background: var(--orange); }
.qa:nth-child(6) { background: var(--lilac); }
.qa:nth-child(odd) { transform: rotate(-1.2deg); }
.qa:nth-child(even) { transform: rotate(1deg); }
.qa h3 { margin-bottom: 0.45rem; font: 700 1.5rem/1.1 var(--hand); color: var(--ink); }
.qa p { font-size: 0.88rem; line-height: 1.5; }

/* Contacts: a tear-off flyer pinned to the board on its own, below the questions */
.flyer { position: relative; width: min(100% - 2.6rem, 26rem); margin: 0 auto 2.8rem; filter: drop-shadow(0 9px 9px rgba(0, 0, 0, 0.22)); transform: rotate(-0.8deg); }
.flyer__sheet { padding: 1.5rem 1.05rem 0.9rem; background: #fffef9; }
.flyer h2 { font: 700 1.7rem/1.1 var(--hand); color: var(--cobalt); }
.flyer__lead { margin-top: 0.35rem; font: 700 1.2rem/1.1 var(--hand); color: var(--tomato); }
.flyer__lead::after { content: "\00a0\2193"; }
.flyer__tabs { display: flex; margin: 0; padding: 0; list-style: none; }
.flyer__tabs li { position: relative; display: flex; flex: 1 1 0; min-width: 0; }
.flyer__tabs li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.75rem; background: #fffef9; -webkit-mask: var(--zigzag-bottom); mask: var(--zigzag-bottom); }
/* The strip is rotated 180deg to read bottom to top, so its CSS bottom and right edges are the visual top and left */
.flyer__tabs a {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  height: 17rem;
  padding: 1rem 0.35rem;
  border-bottom: 2px dashed rgba(31, 27, 22, 0.4);
  background-color: #fffef9;
  color: var(--ink);
  font: 700 0.98rem/1.3 var(--type);
  text-decoration: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.flyer__tabs li + li a { border-right: 2px dashed rgba(31, 27, 22, 0.45); }
.flyer__tabs a:hover, .flyer__tabs a:focus-visible { background-color: #fdf0b8; }
.flyer__tabs a.is-torn { z-index: 3; -webkit-mask: var(--zigzag-bottom); mask: var(--zigzag-bottom); }
.flyer__who { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.3rem; }
.flyer__tabs b { font: 700 1.9rem/1 var(--hand); color: var(--tomato); }
.flyer__detail { white-space: nowrap; }
.flyer__icon { flex: none; width: 1.7rem; height: 1.7rem; background: var(--cobalt); -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; transform: rotate(180deg); }
.flyer__icon--phone { --glyph: var(--phone); }
.flyer__icon--mail { --glyph: var(--mail); }

/* Guests' photos: a polaroid waiting for the shared album, with a note saying it comes later */
.album { position: relative; width: min(100% - 5.5rem, 15rem); margin: 0 auto 3.2rem; transform: rotate(2deg); }
.album__card { position: relative; display: block; padding: 0.7rem 0.7rem 0; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 16px 24px -14px rgba(0, 0, 0, 0.55); }
.album__photo { display: grid; place-items: center; aspect-ratio: 1; background: #ece6da; }
.album__photo svg { width: 55%; height: auto; }
.album__camera { fill: none; stroke: var(--ink-soft); stroke-width: 2.6; stroke-linejoin: round; }
.album__heart { fill: var(--tomato); }
.album__caption { padding: 0.55rem 0.2rem 0.7rem; font: 700 1.6rem/1.1 var(--hand); color: var(--ink); text-align: center; }
.album__soon { position: absolute; z-index: 4; right: -1.8rem; bottom: 3.6rem; max-width: 8rem; padding: 0.85rem 0.7rem 0.55rem; background: var(--yellow); font: 700 1.1rem/1.12 var(--hand); color: var(--ink); box-shadow: 2px 4px 0 rgba(0, 0, 0, 0.08), 0 12px 16px -12px rgba(0, 0, 0, 0.45); transform: rotate(-7deg); }
.album__soon::before { content: ""; position: absolute; left: 50%; top: -0.55rem; width: 3.2rem; height: 1rem; background: var(--tape); transform: translateX(-50%) rotate(4deg); -webkit-mask: var(--torn); mask: var(--torn); }

.album__card:focus-visible { outline: 3px dashed var(--cobalt); outline-offset: 4px; }
.album.is-open .album__soon { background: var(--mint); }

/* Guestbook: a lined page to write on, and the messages the couple pin next to it */
.guestbook { width: min(100% - 2rem, 40rem); margin: 0 auto 3rem; }
.guestbook__book {
  --rule: 1.7rem;
  position: relative;
  padding: 2.1rem 1.3rem 1.4rem;
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule) - 1px), rgba(35, 72, 199, 0.12) calc(var(--rule) - 1px) var(--rule)) 0 1.3rem,
    var(--sheet);
  box-shadow: var(--pinned);
  transform: rotate(0.8deg);
}
.guestbook h2 { margin-bottom: 0.3rem; font: 700 2.4rem/1 var(--hand); color: var(--cobalt); }
.guestbook__lead { margin-bottom: 1rem; font: 600 1.25rem/1.2 var(--hand); color: var(--muted); }
.guestbook__field { display: block; margin-bottom: 0.9rem; }
.guestbook__field span { display: block; margin-bottom: 0.35rem; font: 700 1.3rem/1.1 var(--hand); color: var(--cobalt); }
.guestbook__field textarea, .guestbook__field input { width: 100%; padding: 0.35rem 0.65rem; border: 2px solid var(--ink); border-radius: 0.45rem; background: #fff; color: var(--ink); font: 600 1.35rem/1.3 var(--hand); }
.guestbook__field textarea { min-height: 5.5rem; resize: vertical; }
.guestbook__field textarea:focus, .guestbook__field input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(253, 230, 138, 0.95); }
.guestbook__error { margin-bottom: 0.6rem; font: 700 1.2rem/1.2 var(--hand); color: var(--tomato); }
.guestbook__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.ticket--whatsapp { --glyph: var(--whatsapp); border: 0; background: var(--mint); cursor: pointer; }
.ticket--mail { --glyph: var(--mail); border: 0; background: var(--sky); cursor: pointer; }
.guestbook__notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem 1.2rem; margin-top: 2rem; }
.guestbook__note { position: relative; width: min(100%, 15rem); padding: 1.3rem 1rem 0.9rem; background: var(--yellow); box-shadow: 2px 4px 0 rgba(0, 0, 0, 0.08), 0 14px 20px -14px rgba(0, 0, 0, 0.45); transform: rotate(-1.5deg); }
.guestbook__note:nth-child(even) { background: var(--pink); transform: rotate(1.5deg); }
.guestbook__note:nth-child(3n) { background: var(--mint); }
.guestbook__note p { font: 600 1.25rem/1.2 var(--hand); }
.guestbook__note figcaption { margin-top: 0.4rem; font: 700 1.1rem/1 var(--hand); color: var(--tomato); text-align: right; }
.guestbook__note figcaption::before { content: "\2014\00a0"; }
/* Closing note, taped at the end of the board */
.closing { position: relative; max-width: 25rem; margin: 1.4rem auto 4.5rem; padding: 1.9rem 1.5rem 1.4rem; background: var(--sheet); box-shadow: var(--pinned); text-align: center; transform: rotate(-1.6deg); }
.closing::after { content: ""; position: absolute; left: 50%; bottom: 0.7rem; width: 3.6rem; height: 0.5rem; border-bottom: 2px solid var(--tomato); border-radius: 0 0 50% 50%; transform: translateX(-50%); }
.closing__text { font: 700 2rem/1.15 var(--hand); color: var(--green); }
.closing__sign { margin: 0.5rem 0 0.9rem; font: 700 1.6rem/1 var(--hand); color: var(--tomato); }

/* Things that rain down: paper confetti for the reply, rice once the ceremony is over */
.shower { position: fixed; z-index: 70; inset: 0; overflow: hidden; pointer-events: none; }
.shower span { position: absolute; left: var(--x); top: -2rem; background: var(--color); animation: shower-fall 2.8s cubic-bezier(.3, .6, .5, 1) var(--delay) forwards; }
.confetti span { width: 0.7rem; height: 0.45rem; }
.confetti span:nth-child(3n) { width: 0.45rem; height: 0.8rem; }
.confetti span:nth-child(4n) { border-radius: 50%; }
.rice span { width: 0.3rem; height: 0.68rem; border-radius: 50%; box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); animation-duration: 3.2s; }
@keyframes shower-fall { to { transform: translate(var(--drift), 112vh) rotate(var(--spin)); } }
.cheer { position: fixed; z-index: 71; left: 50%; top: 44%; padding: 0.55rem 1.2rem 0.45rem; background: var(--sheet); font: 700 2.3rem/1 var(--hand); color: var(--tomato); white-space: nowrap; box-shadow: var(--pinned); transform: translateX(-50%) rotate(-3deg); animation: cheer 4.2s ease forwards; pointer-events: none; }
@keyframes cheer { 0% { opacity: 0; scale: 0.6; } 10% { opacity: 1; scale: 1.06; } 16% { scale: 1; } 85% { opacity: 1; } 100% { opacity: 0; translate: 0 -0.8rem; } }

/* After a reply: the envelope flies off, the sheet gets stamped and a polaroid says thanks */
.flying-letter {
  position: fixed;
  z-index: 72;
  width: 5.5rem;
  height: 3.6rem;
  margin: -1.8rem 0 0 -2.75rem;
  background:
    linear-gradient(to bottom right, rgba(31, 27, 22, 0) calc(50% - 1px), rgba(31, 27, 22, 0.2) 50%, rgba(31, 27, 22, 0) calc(50% + 1px)) left top / 50% 60% no-repeat,
    linear-gradient(to bottom left, rgba(31, 27, 22, 0) calc(50% - 1px), rgba(31, 27, 22, 0.2) 50%, rgba(31, 27, 22, 0) calc(50% + 1px)) right top / 50% 60% no-repeat,
    #f3e7cf;
  box-shadow: 0 10px 18px -8px rgba(0, 0, 0, 0.45);
  animation: fly-away 1.7s cubic-bezier(.5, 0, .3, 1) forwards;
  pointer-events: none;
}
.flying-letter::after { content: ""; position: absolute; right: 0.35rem; top: 0.35rem; width: 0.9rem; height: 1rem; border: 2px dotted #fff; background: var(--tomato); }
@keyframes fly-away { 0% { opacity: 0; transform: scale(0.6); } 15% { opacity: 1; transform: translateY(-1rem) rotate(-6deg) scale(1); } 100% { opacity: 0; transform: translate(60vw, -110vh) rotate(24deg) scale(0.7); } }
.confirmed { display: table; margin: 1rem auto 0; padding: 0.35rem 0.75rem 0.3rem; border: 3px double var(--tomato); border-radius: 0.45rem; color: var(--tomato); font: 700 1.2rem/1 var(--label); letter-spacing: 0.18em; text-align: center; text-transform: uppercase; mix-blend-mode: multiply; opacity: 0.85; transform: rotate(-9deg); animation: stamp-in 0.35s cubic-bezier(.3, 1.4, .5, 1) both; }
.confirmed small { display: block; margin-top: 0.2rem; font-size: 0.62rem; letter-spacing: 0.24em; }
@keyframes stamp-in { from { opacity: 0; transform: rotate(-9deg) scale(1.8); } to { opacity: 0.85; transform: rotate(-9deg) scale(1); } }
.thanks { position: relative; width: min(100%, 13rem); margin: 1.8rem auto 0.5rem; padding: 0.6rem 0.6rem 0; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 16px 24px -14px rgba(0, 0, 0, 0.55); transform: rotate(-2.5deg); }
.thanks img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.thanks figcaption { padding: 0.5rem 0.2rem 0.65rem; font: 700 1.35rem/1.1 var(--hand); text-align: center; }
@media (min-width: 760px) {
  .line { --photo-w: 12.5rem; --rope-top: 46px; --rope-sag: 46px; --max-drop: 36px; }
  .polaroid:nth-of-type(even) { --drop: 36px; }
  .story { padding-top: 4rem; }
  .story__head { gap: 1rem 1.6rem; }
  .story__head .label { padding: 0.45rem 1.1rem 0.35rem; font-size: 2.1rem; }
  .hint-note { max-width: 13rem; font-size: 1.15rem; }
  .sheet { max-width: 40rem; margin: 2.6rem auto 3.4rem; padding: 2.4rem 2.4rem 2rem; }
  .sheet--rsvp { max-width: 44rem; }
  .sheet--faq { max-width: 46rem; }
  .cards { grid-template-columns: 1fr 1fr; align-items: start; }
  .intro__envelope { width: min(80vw, 32rem); }
  .intro__card b { font-size: 2.3rem; }
  .intro__card span { font-size: 0.95rem; }
  .intro__seal { width: 5.2rem; height: 5.2rem; margin: -2.6rem 0 0 -2.6rem; font-size: 1.35rem; }
  .intro__to { font-size: 1.7rem; }
  .intro__hint { font-size: 1.7rem; }
}

@media (min-width: 1100px) {
  .line { --photo-w: 14.5rem; --rope-sag: 64px; }
  .letter__paper {
    --rule: 2rem;
    padding: 2.3rem 1.8rem 1.4rem 3rem;
    background:
      linear-gradient(90deg, transparent 1.9rem, rgba(226, 73, 47, 0.5) 1.9rem calc(1.9rem + 2px), transparent calc(1.9rem + 2px)),
      repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule) - 1px), rgba(35, 72, 199, 0.16) calc(var(--rule) - 1px) var(--rule)) 0 1.82rem,
      var(--sheet);
  }
  .letter__text p { font-size: 1.4rem; }
  .letter__sign { font-size: 2.1rem; }
  .board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.5rem; align-items: start; max-width: 76rem; margin: 0 auto; padding: 0.6rem 3rem 0; }
  .board .sheet { max-width: none; margin: 2rem 0 3rem; }
  .sheet--rsvp { max-width: 50rem; }
  .sheet--faq { max-width: 70rem; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .polaroid__swing { animation: none; }
  .polaroid__card { transition-duration: 0.01ms; }
  main, .fan, .fan__notes, .fan__toggle::before, .note span { transition: none; }
  .garland__bulbs circle { animation: none; }
}