/* Claudia & Marcos: the ink-and-watercolour site ("Nocturne"). One sheet of paper with paintings laid on it.
   Since 14 Nov every painting has real transparency (prep.py takes its white out), so NOTHING here uses mix-blend-mode:
   on iPhones a multiplied image could lose its blend and show as a white square. Keep it that way. */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/ebgaramond-latin.woff2) format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 500; font-display: swap; src: url(fonts/ebgaramond-italic-latin.woff2) format("woff2"); }
@font-face { font-family: "La Belle Aurore"; font-weight: 400; font-display: block; src: url(fonts/labelleaurore-400-latin.woff2) format("woff2"); }
@property --fan { syntax: "<angle>"; inherits: false; initial-value: 15deg; }

:root {
  --paper: #FBF8F1; --ink: #1F2A44; --text: #2B3040; --blue: #8FB0D0; --gold: #E0A22B; --pink: #C8327E; --ger: #D23B2E;
  --serif: "EB Garamond", Georgia, serif; --hand: "La Belle Aurore", "Snell Roundhand", cursive;
  --wobble: 255px 18px 225px 18px / 18px 225px 18px 255px;      /* a hand-drawn box */
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 1.1875rem/1.5 var(--serif); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, dl, dd, ol { margin: 0; padding: 0; }
ol { list-style: none; }
a { color: inherit; text-underline-offset: .18em; }
button { font: inherit; color: inherit; }
.caps { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.sheet { position: relative; isolation: isolate; background: var(--paper); overflow: hidden; display: block; outline: none; }
picture { display: contents; }      /* <picture> only chooses the file (AVIF or WebP); the <img> inside is laid out as if it stood alone */
.art { height: auto; }
.long { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wash { position: absolute; z-index: -1; pointer-events: none; background: var(--c, var(--blue)); opacity: var(--o, .4);
  -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
.w1 { --m: url(img/wash-1.webp?v=1); } .w2 { --m: url(img/wash-2.webp?v=1); } .w3 { --m: url(img/wash-3.webp?v=1); } .w4 { --m: url(img/wash-4.webp?v=1); }
.branch { position: absolute; z-index: -1; pointer-events: none; height: auto; max-width: none; }
.branch.tr { top: -16px; right: -22px; width: min(29vw, 240px); }
.branch.tl { top: -56px; left: -50px; width: min(34vw, 240px); transform: scaleX(-1); }
@media (min-width: 900px) { .branch.tr { top: -12px; right: calc(50% - 560px); width: 380px; } .branch.tl { left: calc(50% - 600px); width: 290px; top: -70px; } }
.star { position: absolute; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; overflow: visible; color: var(--ink); }
.star.g { color: var(--gold); } .star.b { color: #5E86B4; }
@keyframes twinkle { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .25; scale: .7; } }
.star.tw { animation: twinkle var(--t, 4s) ease-in-out var(--dl, 0s) infinite; }
.petal { position: fixed; z-index: 3; top: -24px; width: 12px; height: 8px; border-radius: 80% 20% 70% 30%; background: var(--pink); opacity: .75; pointer-events: none; animation: fall var(--t) linear var(--dl) infinite; }
@keyframes fall { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(var(--dx), 112vh) rotate(var(--rot)); } }

/* ---- top bar ---- */
.bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: rgba(251,248,241,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bar-mono { font: 400 1.7rem/1 var(--hand); color: var(--ink); text-decoration: none; padding: 4px 2px 0; white-space: nowrap; }
.bar-nav { flex: 1; display: flex; gap: 18px; justify-content: center; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bar-nav::-webkit-scrollbar { display: none; }
.bar-nav a { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--ink); white-space: nowrap; padding: 8px 0; }
.lang { display: flex; gap: 2px; }
.lang button { border: 0; background: none; cursor: pointer; font-size: .7rem; letter-spacing: .14em; padding: 8px 7px; color: var(--ink); opacity: .5; }
.lang button[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-underline-offset: .3em; }
@media (max-width: 640px) { .bar-nav { justify-content: flex-start; } }

/* ---- sections ---- */
.hero, .sec, .rsvp { position: relative; width: min(100% - 44px, 640px); margin-inline: auto; text-align: center; padding-block: clamp(54px, 9vh, 100px); }
.sec.wide { width: min(100% - 44px, 940px); }
.plaque { font: 400 clamp(2.1rem, 9vw, 2.7rem)/1.1 var(--hand); color: var(--ink); rotate: -2deg; }
.lede { margin: 1.4rem auto 0; max-width: 30em; }
.btn { display: inline-block; margin-top: 1.6rem; padding: .78em 1.5em; text-decoration: none; cursor: pointer; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); border: 1.5px solid currentColor; background: none; border-radius: var(--wobble); }
.btn--fill { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--line { margin-top: 1.1rem; font-size: .7rem; padding: .62em 1.2em; }
.spot { width: min(46%, 11rem); margin: 0 auto 1rem; }
.pots { width: min(62%, 290px); margin: 0 auto; }

/* ---- hero ---- */
.hero { padding-top: clamp(40px, 6vh, 70px); }
.hero-art { display: flex; align-items: center; justify-content: center; height: 60vh; height: 60svh; max-height: 150vw; min-height: 320px; }
.dancers { width: auto; max-height: 100%; max-width: 100%; }
.names { font: 400 clamp(3.1rem, 15.5vw, 5.6rem)/1 var(--hand); color: var(--ink); rotate: -5deg; margin-top: -1rem; }
.names span { display: block; white-space: nowrap; }
.names .n1 { margin-right: 22%; } .names .n2 { margin-left: 18%; margin-top: -.12em; }
.names .amp { display: inline; font-size: .62em; font-weight: 400; margin-right: .16em; color: var(--pink); }
.hero-what { margin-top: 1.6rem; }
.hero-date { margin-top: .45rem; font-size: clamp(1.3rem, 6vw, 1.65rem); line-height: 1.25; color: var(--ink); font-style: italic; }
.hero-place { margin-top: .5rem; }

/* ---- date ---- */
.count-label { margin-top: 2rem; color: var(--ink); }
.count { display: flex; justify-content: center; gap: clamp(.9rem, 5vw, 2rem); margin-top: .9rem; }
.count[hidden] { display: none; }
.count b { display: block; font-weight: 400; font-size: clamp(2rem, 10vw, 2.9rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.count small { display: block; margin-top: .4rem; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; }
.cal { position: relative; width: min(100%, 19.5rem); margin: 2.2rem auto 0; }
.cal-title { color: var(--ink); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: .5rem; margin-top: 1rem; font-size: 1.05rem; }
.cal-grid span { position: relative; line-height: 2.1rem; }
.cal-wd { font-size: .72rem; letter-spacing: .12em; opacity: .6; }
.cal-us { color: var(--ink); font-weight: 600; }
.cal-us svg { position: absolute; left: 50%; top: 50%; width: 2.9rem; height: 2.9rem; translate: -50% -50%; fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; overflow: visible; }
.cal-us path { stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset 1.1s ease .3s; }
.cal.is-seen .cal-us path { stroke-dashoffset: 0; }

/* ---- the day ---- */
.duo { display: grid; gap: clamp(3rem, 9vh, 5rem); margin-top: 2.4rem; }
@media (min-width: 820px) { .duo { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: end; } }
.place-art { width: min(100%, 23rem); margin-inline: auto; }
.when { margin-top: 1.2rem; color: var(--ink); }
.when b { font-weight: 600; letter-spacing: .1em; }
.place h3 { margin-top: .35rem; font-size: 1.5rem; font-weight: 400; font-style: italic; line-height: 1.2; color: var(--ink); }
.place p:not(.when) { margin-top: .4rem; }

/* ---- order of the day ---- */
.order { margin-top: 2.2rem; display: grid; gap: 1.7rem; }
.order li { position: relative; }
.order li + li::before { content: ""; display: block; width: 1px; height: 26px; margin: 0 auto 1.5rem; background: var(--ink); opacity: .45; }
.order-t { display: block; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.order-t.soon { font-weight: 400; opacity: .6; }
.order h3 { margin-top: .3rem; font-size: 1.55rem; font-weight: 400; font-style: italic; color: var(--ink); line-height: 1.2; }
.order p { margin-top: .2rem; }

/* ---- photo-booth strips, taped into the painting ---- */
.strips { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(1rem, 6vw, 2.6rem); padding-block: clamp(30px, 6vh, 60px); width: min(100% - 44px, 640px); margin-inline: auto; }
.strip { position: relative; width: clamp(104px, 31vw, 150px); background: #fff; padding: 6px 6px 8px; box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 10px 22px -10px rgba(0,0,0,.28); rotate: -4deg; }
.strip:nth-child(2) { rotate: 3deg; margin-top: 1.8rem; }
.strip:nth-child(3) { rotate: -1.5deg; margin-top: .4rem; }
.strip img { width: 100%; height: auto; }
.strip::before { content: ""; position: absolute; left: 50%; top: -11px; width: 58px; height: 22px; translate: -50% 0; rotate: -3deg; background: rgba(200,50,126,.32); }
@media (max-width: 520px) { .strip:nth-child(3) { display: none; } }

/* ---- facts (venue, travel, contact) ---- */
.sec-name { margin-top: 1.1rem; font-size: 1.5rem; font-style: italic; color: var(--ink); }
.facts { margin-top: 2rem; display: grid; gap: 1.7rem; }
.facts dt { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.facts dd { margin-top: .4rem; }
.facts div + div::before { content: "\2726"; display: block; margin-bottom: 1.3rem; color: var(--gold); font-size: .8rem; }
.meta { margin-top: 1.8rem; font-size: 1.05rem; font-style: italic; }

/* ---- hotels ---- */
.rail { display: flex; gap: 14px; margin: 2rem -22px 0; padding: 6px 22px 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; text-align: left; }
.rail::-webkit-scrollbar { display: none; }
.hotel { flex: 0 0 min(78%, 17.5rem); scroll-snap-align: center; display: flex; flex-direction: column; gap: .45rem; padding: 1.2rem 1.15rem 1.1rem; background: rgba(255,255,255,.62); border: 1.5px solid var(--ink); border-radius: var(--wobble); }
.hotel-area { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.hotel h3 { font-size: 1.45rem; font-weight: 400; font-style: italic; color: var(--ink); line-height: 1.15; }
.hotel-pick { align-self: flex-start; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; padding: .25em .7em; border-radius: 99px; background: var(--gold); color: #2a1d02; }
.hotel-blurb { font-size: 1.05rem; line-height: 1.4; flex: 1; }
.hotel-dist { font-style: italic; color: var(--ink); }
.hotel-links { display: flex; gap: 1.1rem; margin-top: .3rem; }
.hotel-links a { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.rail-nav { display: flex; justify-content: center; gap: .8rem; margin-top: .6rem; }
.rail-nav button { width: 2.6rem; height: 2.6rem; border: 1.5px solid var(--ink); border-radius: 50% 46% 52% 48%; background: none; cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--ink); }

/* ---- questions ---- */
.faq { margin-top: 2rem; text-align: left; }
.faq details { border-bottom: 1px solid rgba(31,42,68,.35); }
.faq details:first-child { border-top: 1px solid rgba(31,42,68,.35); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1rem .2rem; font-size: 1.3rem; font-style: italic; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-style: normal; font-size: 1.4rem; line-height: 1; color: var(--gold); transition: rotate .2s ease; }
.faq details[open] summary::after { rotate: 45deg; }
.faq p { padding: 0 .2rem 1.1rem; }

/* ---- reply ---- */
.rsvp { padding-bottom: clamp(70px, 12vh, 130px); }
.rsvpf { max-width: 25rem; margin: 2rem auto 0; text-align: left; }
.rsvpf-q { display: block; margin: 0 0 1.6rem; padding: 0; border: 0; min-width: 0; }
.rsvpf legend, .rsvpf-label { display: block; padding: 0; margin: 0 0 .55rem; font: 500 1.2rem/1.3 var(--serif); color: var(--ink); }
.rsvpf legend b, .rsvpf-label b { font-weight: 400; opacity: .7; }
.rsvpf-hint { display: block; margin: -.3rem 0 .55rem; font-size: 1rem; line-height: 1.4; font-style: italic; opacity: .85; }
.rsvpf input:not([type="radio"]), .rsvpf textarea { display: block; width: 100%; min-height: 3.1rem; padding: .6rem .9rem; border: 1.5px solid var(--ink); border-radius: var(--wobble); background: rgba(255,255,255,.72); color: var(--ink); font: 400 1.125rem/1.4 var(--serif); -webkit-appearance: none; appearance: none; }
.rsvpf textarea { resize: vertical; min-height: 4.6rem; border-radius: 18px 14px 20px 12px; }
.rsvpf input::placeholder { color: var(--ink); opacity: .45; }
.rsvpf input[type="date"] { min-width: 0; text-align: left; }
.rsvpf-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.rsvpf-choice label { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rsvpf-choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rsvpf-choice span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 3.4rem; padding: .5rem .6rem; border: 1.5px solid var(--ink); border-radius: var(--wobble); font: 500 1.08rem/1.25 var(--serif); color: var(--ink); background: rgba(255,255,255,.4); transition: transform .12s ease; }
.rsvpf-choice label:active span { transform: scale(.97); }
.rsvpf-choice input:checked + span { background: var(--ink); color: var(--paper); }
.rsvpf-choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.rsvpf-choice--sm { max-width: 14rem; }
.rsvpf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rsvpf-send { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.4rem; margin-top: .4rem; border: 1.5px solid var(--ink); border-radius: var(--wobble); background: var(--ink); color: var(--paper); font: 600 .86rem/1.2 var(--serif); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, opacity .2s ease; }
.rsvpf-send:active { transform: scale(.98); }
.rsvpf-send:disabled { opacity: .6; cursor: default; }
.rsvpf-status { min-height: 1.6rem; margin: .9rem 0 0; font-size: 1.05rem; line-height: 1.4; }
.rsvpf-status.is-error { padding: .65rem .85rem; background: #fff; color: #A32A21; border: 1.5px solid #A32A21; border-radius: var(--wobble); }
.rsvpf-done { max-width: 25rem; margin: 2rem auto 0; text-align: center; outline: none; }
.rsvpf-thanks-big { font: 400 clamp(3.4rem, 17vw, 5rem)/1 var(--hand); color: var(--ink); white-space: nowrap; rotate: -3deg; }
.rsvpf-thanks { margin: 1rem 0; font-size: 1.3rem; line-height: 1.45; }
.rsvpf-again { margin: 0 0 .5rem; font-style: italic; opacity: .85; }
.rsvpf-reset { margin-top: 1.25rem; min-height: 3rem; padding: .5rem 1.4rem; border: 1.5px solid var(--ink); border-radius: var(--wobble); background: none; color: var(--ink); cursor: pointer; font: 500 .78rem/1.2 var(--serif); letter-spacing: .2em; text-transform: uppercase; }
.preview-note { margin-top: 1rem; font-size: .95rem; font-style: italic; opacity: .8; }

/* ---- sign-off ---- */
.facts--center { justify-items: center; }
.fish { width: min(64%, 15rem); margin: 2.4rem auto 0; }
.signoff { margin-top: 1rem; font: 400 clamp(2.4rem, 11vw, 3.4rem)/1.1 var(--hand); color: var(--ink); rotate: -3deg; }
.foot { margin-top: 1.6rem; padding-bottom: 5rem; }
.fab { position: fixed; z-index: 45; left: 50%; bottom: 14px; translate: -50% 140%; padding: .85em 1.4em; border-radius: var(--wobble); background: var(--ink); color: var(--paper); text-decoration: none; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(31,42,68,.6); transition: translate .35s cubic-bezier(.2,.8,.2,1); }
.fab.is-on { translate: -50% 0; }

/* ---- the standalone reply page ---- */
.rsvp-head { position: relative; width: min(100% - 44px, 640px); margin-inline: auto; text-align: center; padding: 40px 0 0; }
.rsvp-head .names { margin-top: .4rem; font-size: clamp(2.6rem, 13vw, 4.4rem); }
.back { display: inline-block; margin-top: 2.5rem; font-size: 1.05rem; }

/* ---- reveal on scroll ---- */
.js .r { opacity: 0; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); transform: translateY(14px); }
.js .r.in { opacity: 1; transform: none; }
.js img.r { transform: none; transition: opacity 1.2s ease, clip-path 1.6s cubic-bezier(.3,.6,.2,1); clip-path: circle(8% at 50% 45%); }
.js img.r.in { clip-path: circle(110% at 50% 45%); }
.js .wash.r { transform: scale(.82); transition: opacity 1.6s ease, transform 2.2s cubic-bezier(.2,.7,.2,1); }
.js .wash.r.in { opacity: var(--o, .4); transform: none; }

/* ---- the opening: a fan, then the painting appears ---- */
.fan-intro { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; background: var(--paper); cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: opacity .7s ease; }
.fan-on .fan-intro { display: grid; }
.fan-on, .fan-on body { overflow: hidden; }
.fan-gone .fan-intro { opacity: 0; pointer-events: none; }
.fan { position: relative; width: min(86vw, 580px); }
.fan img { width: 100%; height: auto; transform-origin: var(--px) var(--py); rotate: 76deg; --fan: 15deg;
  -webkit-mask: conic-gradient(from 277deg at var(--px) var(--py), #000 0 var(--fan), transparent var(--fan));
  mask: conic-gradient(from 277deg at var(--px) var(--py), #000 0 var(--fan), transparent var(--fan));
  transition: rotate 1.25s cubic-bezier(.3,.9,.3,1), --fan 1.25s cubic-bezier(.3,.9,.3,1); }
.fan-open .fan img { rotate: 0deg; --fan: 174deg; }
.fan-names { position: absolute; left: 0; right: 0; top: calc(50% + min(26vw, 176px)); text-align: center; font: 400 clamp(2.1rem, 9.5vw, 3rem)/1.2 var(--hand); color: var(--ink); opacity: 0; transition: opacity .8s ease .9s; }
.fan-open .fan-names { opacity: 1; }
.fan-hint { position: absolute; left: 0; right: 0; bottom: 13vh; text-align: center; font: 400 1.9rem/1.2 var(--hand); color: var(--ink); transition: opacity .2s; }
.fan-open .fan-hint { opacity: 0; }
.fan-intro .lang { position: absolute; top: 12px; right: 14px; }
.fan-hit { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: none; cursor: pointer; }
.fan-intro .lang { z-index: 2; }
.playing .hero .wash { opacity: 0; transform: scale(.6); }
.playing .dancers { opacity: 0; clip-path: circle(0% at 46% 32%); }
.playing .names { clip-path: inset(-20% 100% -20% -5%); }
.playing .hero > :not(.hero-art):not(.names):not(.wash), .playing .star, .playing .branch.tr { opacity: 0; }
.played .hero .wash { transition: opacity 1.6s ease, transform 2.4s cubic-bezier(.2,.7,.2,1); }
.played .dancers { transition: opacity .8s ease .3s, clip-path 2.1s cubic-bezier(.4,.5,.2,1) .3s; clip-path: circle(120% at 46% 32%); }
.played .names { transition: clip-path 1.5s cubic-bezier(.5,.1,.3,1) 1.7s; clip-path: inset(-20% -5% -20% -5%); }
.played .hero > :not(.hero-art):not(.names):not(.wash) { transition: opacity 1s ease 2.8s; }
.played .star { transition: opacity .6s ease calc(1s + var(--i, 0) * 30ms); }
.played .branch.tr { transition: opacity 1.4s ease .9s; }

/* ---- preview only: flip between the options ---- */
.switch { position: fixed; z-index: 70; left: 8px; bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; max-width: calc(100% - 16px); padding: 7px 9px; border-radius: 16px; background: rgba(20,22,30,.84); color: #fff; font: 500 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.switch span { opacity: .65; margin: 0 2px 0 4px; }
.switch button { border: 0; border-radius: 99px; padding: 6px 9px; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; font: inherit; }
.switch button[aria-pressed="true"] { background: #fff; color: #14161e; }
.switch[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .r { opacity: 1; transform: none; clip-path: none; }
  .petal { display: none; }
  html { scroll-behavior: auto; }
}
.switch { bottom: 66px; }      /* preview bar sits above the floating reply button */
[hidden] { display: none !important; }      /* e.g. the plus-one name until "Yes" is chosen */
/* the top painting may be tall (a dance) or square (the car): it sizes itself, the box no longer has a fixed height */
.hero-art { height: auto; min-height: 0; max-height: none; }
.dancers { max-height: 60vh; max-height: 60svh; }
.names { margin-top: -.4rem; }
.dancers { max-height: 68vh; max-height: 68svh; }      /* the wide Mehari scene gets a little more room */
@media (min-width: 900px) { .branch.tr { right: calc(50% - 660px); } }      /* clear of the wide hero painting */

/* =====================================================================================================
   SUNSET ROUND (13 Nov): warm paper, everything hand-lettered in red, a blue door that opens onto a patio,
   a red-line cupid in every section. Four ways of lettering, set by <html data-type="brush|callig|menu|deco">.
   ===================================================================================================== */
@font-face { font-family: "Merienda"; font-weight: 400 900; font-display: swap; src: url(fonts/merienda-400-900-latin.woff2) format("woff2"); }
@font-face { font-family: "Pinyon Script"; font-weight: 400; font-display: swap; src: url(fonts/pinyonscript-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Charm"; font-weight: 400; font-display: swap; src: url(fonts/charm-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Charm"; font-weight: 700; font-display: swap; src: url(fonts/charm-700-latin.woff2) format("woff2"); }
@font-face { font-family: "Poiret One"; font-weight: 400; font-display: swap; src: url(fonts/poiretone-400-latin.woff2) format("woff2"); }
:root {
  --paper: #FBF6EC; --ink: #2B2730; --text: #35303A; --red: #D4301F; --blue: #2450B2; --peach: #F5C7A1; --gold: #E9AE3C; --pink: #C8327E;
  --hand: "Merienda"; --hand-w: 700; --hand-tt: none; --hand-ls: 0em; --plaque-size: clamp(1.75rem, 7.8vw, 2.35rem); --rot: -2deg; --mono-size: 1.25rem;
}
html[data-type="callig"] { --hand: "Pinyon Script"; --hand-w: 400; --plaque-size: clamp(2.5rem, 11vw, 3.3rem); --mono-size: 1.9rem; }
html[data-type="menu"] { --hand: "Charm"; --hand-w: 700; --plaque-size: clamp(2.1rem, 9.2vw, 2.8rem); --rot: -1deg; --mono-size: 1.6rem; }
html[data-type="deco"] { --hand: "Poiret One"; --hand-w: 400; --hand-tt: uppercase; --hand-ls: .16em; --plaque-size: clamp(1.3rem, 5.8vw, 1.75rem); --rot: 0deg; --mono-size: 1.1rem; }
.wash { background: var(--c, var(--peach)); }
.plaque, .signoff, .rsvpf-thanks-big, .bar-mono, .door-hint { font-family: var(--hand), cursive; font-weight: var(--hand-w); text-transform: var(--hand-tt); letter-spacing: var(--hand-ls); color: var(--red); }
.plaque { font-size: var(--plaque-size); line-height: 1.15; rotate: var(--rot); }
.signoff { font-size: calc(var(--plaque-size) * 1.2); line-height: 1.15; rotate: var(--rot); }
.rsvpf-thanks-big { font-size: calc(var(--plaque-size) * 1.5); line-height: 1.1; rotate: var(--rot); white-space: normal; }
.bar-mono { font-size: var(--mono-size); line-height: 1; padding-top: 2px; }
.names { rotate: none; margin-top: .3rem; font-size: 0; line-height: 0; }
.names-art { width: min(84%, 25rem); height: auto; margin: 0 auto; }
html[data-type="callig"] .names-art { width: min(94%, 29rem); }
html[data-type="menu"] .names-art, html[data-type="deco"] .names-art { width: min(72%, 21rem); }
.btn { color: var(--red); }
.btn--fill { background: var(--red); border-color: var(--red); color: #fff; }
.star { color: var(--red); stroke-width: 0; fill: currentColor; }
.star.g { color: var(--gold); } .star.b { color: var(--blue); }
.cal-us svg { stroke: var(--red); }
.facts div + div::before { color: var(--red); }
.faq summary::after { color: var(--red); }
.hotel-pick { background: var(--red); color: #fff; }
.fab { background: var(--red); color: #fff; box-shadow: 0 10px 24px -10px rgba(120,30,20,.6); }
.rsvpf-send { background: var(--red); border-color: var(--red); color: #fff; }
.rsvpf-choice input:checked + span { background: var(--red); border-color: var(--red); color: #fff; }
.strip::before { background: rgba(212,48,31,.3); }
.branch.tr { display: none; }                                   /* the hero painting brings its own bougainvillea now */
.fish { width: min(60%, 14rem); }

/* ---- the cupid, a character in every section ---- */
.cupid { display: block; height: auto; margin: 0 auto .6rem; }
.cupid.sm { width: min(38%, 8.8rem); }
.cupid.md { width: min(56%, 13rem); margin-bottom: 0; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.cupid.fl.in { animation: float 4.2s ease-in-out infinite; }
.js img.cupid.r { clip-path: none; transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); transform: translateY(12px) rotate(-6deg); }
.js img.cupid.r.in { transform: none; }
.place:has(.cupid.md) { align-self: center; }

/* ---- the reply: cupid, arrow and heart ---- */
.cupid-stage { position: relative; height: 9.5rem; width: min(100%, 24rem); margin: 0 auto 1rem; }
.cupid-main { position: absolute; left: 0; top: 0; height: 100%; width: auto; max-width: none; animation: float 4.2s ease-in-out infinite; }
.cupid-stage.sad .cupid-main { left: 50%; translate: -50% 0; animation: none; }
.cupid-arrow { position: absolute; left: 8.3rem; top: 2.55rem; width: 5.4rem; height: 1.1rem; fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; animation: float 4.2s ease-in-out infinite; }
.cupid-arrow .tip { fill: var(--red); stroke: none; }
.cupid-heart { position: absolute; right: .4rem; top: 2rem; width: 2.5rem; height: 2.25rem; fill: var(--red); opacity: 0; scale: .2; }
@keyframes fly { 0% { transform: translateX(0); } 100% { transform: translateX(var(--fly, 12rem)); opacity: 0; } }
@keyframes pop { 0% { opacity: 0; scale: .2; } 60% { opacity: 1; scale: 1.25; } 100% { opacity: 1; scale: 1; } }
@keyframes beat { 0%, 100% { scale: 1; } 50% { scale: 1.14; } }
.cupid-stage.yes .cupid-arrow { animation: fly .55s cubic-bezier(.3,0,.6,1) forwards; }
.cupid-stage.yes .cupid-heart { animation: pop .5s ease .5s forwards, beat 1.1s ease-in-out 1s infinite; }
.cupid-stage.sad .cupid-arrow, .cupid-stage.sad .cupid-heart { display: none; }
/* the "No" that does not want to be pressed */
.rsvpf-choice label { transition: translate .32s cubic-bezier(.3,1.5,.5,1), rotate .32s ease; }
.rsvpf-choice label.dodge { z-index: 5; }
.rsvpf-choice label.ask span { border-style: dashed; }

/* ---- the opening: a blue door on a white wall; it opens onto a patio full of flowers ---- */
.door-intro { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; background: var(--paper); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .8s ease; }
.door-on .door-intro { display: grid; }
.door-on, .door-on body { overflow: hidden; }
.door-gone .door-intro { opacity: 0; pointer-events: none; }
.door-stage { position: relative; isolation: isolate; background: var(--paper); height: min(84vh, 124vw); height: min(84svh, 124vw); margin-bottom: 5vh; transform-origin: calc(var(--dx) + var(--dw) / 2) calc(var(--dy) + var(--dh) / 2); transition: transform 1.5s cubic-bezier(.5,0,.25,1); }
.door-view { position: absolute; left: var(--dx); top: var(--dy); width: var(--dw); height: var(--dh); overflow: hidden;
  -webkit-mask: url(img/door-leaf.webp?v=103) center / 100% 100% no-repeat; mask: url(img/door-leaf.webp?v=103) center / 100% 100% no-repeat; transition: -webkit-mask-size 0s, mask-size 0s; }
.door-wall { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .9s ease .25s; }
.door-leafwrap { position: absolute; left: var(--dx); top: var(--dy); width: var(--dw); height: var(--dh); perspective: 1200px; transition: opacity .5s ease .5s; }
.door-leaf { width: 100%; height: 100%; transform-origin: 0 50%; transition: transform 1.15s cubic-bezier(.45,.05,.2,1); filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.door-open .door-leaf { transform: rotateY(-102deg); }
.door-through .door-stage { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--zoom, 2.6)); }
.door-through .door-view { -webkit-mask: none; mask: none; }
.door-through .door-wall, .door-through .door-leafwrap { opacity: 0; }
.door-hint { position: absolute; left: 0; right: 0; bottom: 4.5vh; margin: 0; text-align: center; font-size: calc(var(--plaque-size) * .78); line-height: 1.2; transition: opacity .25s; }
.door-open .door-hint { opacity: 0; }
.door-intro .lang { position: absolute; top: 12px; right: 14px; z-index: 2; }
.door-hit { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: none; cursor: pointer; }
.playing .names, .played .names { clip-path: none; }
.playing .names-art { clip-path: inset(0 100% 0 0); }
.played .names-art { transition: clip-path 1.5s cubic-bezier(.5,.1,.3,1) 1.5s; clip-path: inset(0 0 0 0); }

.switch { bottom: 66px; left: 8px; }
.switch .brk { display: block; flex-basis: 100%; height: 0; }
@media (min-width: 700px) { .switch .brk { display: none; } }
@media (prefers-reduced-motion: reduce) { .cupid.fl.in, .cupid-main, .cupid-arrow { animation: none; } }

/* =====================================================================================================
   ROUND 5 (13 Nov, evening): calmer calligraphy x3 + the "Barbier" italic capitals; the door opens straight
   onto the painting; one cupid that flies down the page and changes pose from section to section.
   ===================================================================================================== */
@font-face { font-family: "Allura"; font-weight: 400; font-display: swap; src: url(fonts/allura-latin.woff2) format("woff2"); }
@font-face { font-family: "Italianno"; font-weight: 400; font-display: swap; src: url(fonts/italianno-latin.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/cormorantgaramond-italic-latin.woff2) format("woff2"); }
html[data-type="cal1"] { --hand: "Pinyon Script"; --hand-w: 400; --hand-tt: none; --hand-ls: 0em; --hand-style: normal; --plaque-size: clamp(2.5rem, 11vw, 3.3rem); --rot: -2deg; --mono-size: 1.9rem; }
html[data-type="cal2"] { --hand: "Allura"; --hand-w: 400; --hand-tt: none; --hand-ls: 0em; --hand-style: normal; --plaque-size: clamp(2.6rem, 11.5vw, 3.4rem); --rot: -2deg; --mono-size: 2rem; }
html[data-type="cal3"] { --hand: "Italianno"; --hand-w: 400; --hand-tt: none; --hand-ls: 0em; --hand-style: normal; --plaque-size: clamp(2.9rem, 12.5vw, 3.8rem); --rot: -1deg; --mono-size: 2.2rem; }
html[data-type="barbier"] { --hand: "Cormorant Garamond"; --hand-w: 500; --hand-tt: uppercase; --hand-ls: .1em; --hand-style: italic; --plaque-size: clamp(1.4rem, 6.2vw, 1.85rem); --rot: 0deg; --mono-size: 1.15rem; }
.plaque, .signoff, .rsvpf-thanks-big, .bar-mono, .door-hint { font-style: var(--hand-style, normal); }
html[data-type="cal1"] .names-art, html[data-type="cal2"] .names-art, html[data-type="cal3"] .names-art { width: min(82%, 24rem); }
html[data-type="barbier"] .names-art { width: min(78%, 22rem); }

.door-view { background: var(--paper); }

/* one cupid, many places: each slot keeps its still drawing for when motion is off */
.cupid-slot { display: block; margin: 0 auto .6rem; }
.cupid-slot.sm { width: min(38%, 8.8rem); }
.cupid-slot.md { width: min(56%, 13rem); margin-bottom: 0; }
.cupid-slot.hero-slot { width: 4.4rem; margin: 1.5rem auto 0; }
.cupid-slot > .cupid { width: 100%; height: 100%; margin: 0; object-fit: contain; }
.place:has(.cupid-slot.md) { align-self: center; }
.stage-slot { position: absolute; left: 0; top: 0; height: 100%; width: auto; aspect-ratio: 452 / 394; margin: 0; }
.stage-slot > .cupid-main { position: static; display: block; width: 100%; height: 100%; object-fit: contain; }
.cupid-stage.sad .stage-slot { left: 50%; translate: -50% 0; aspect-ratio: 620 / 677; }
.cupid-stage.sad .cupid-main { left: auto; translate: none; }
.cupid-acting .cupid-slot > img { visibility: hidden; animation: none; }
.cupid-acting .cupid-arrow { animation: none; }
#cupidActor { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; will-change: transform; }
#cupidActor .cupid-bob { position: absolute; inset: 0; animation: float 4.2s ease-in-out infinite; }
#cupidActor.still .cupid-bob { animation: none; }
#cupidActor img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(.8) rotate(-10deg); transition: opacity .4s ease, transform .5s cubic-bezier(.3,1.4,.5,1); }
#cupidActor img.on { opacity: 1; transform: none; }
.door-on #cupidActor { visibility: hidden; }

/* =====================================================================================================
   ROUND 7 (14 Nov, night): the 1920s look is gone, back to the watercolour page of round 5. The top drawing
   is now a red brush drawing of the two of them at a cafe table with the Mehari parked beside them (five
   versions, cafe-1..5, picked in the preview bar), and two new letterings they sent: "dir" after a
   mid-century monoline script, "pen" after fine vintage pen handwriting. No fish at the end.
   ===================================================================================================== */
@font-face { font-family: "Cookie"; font-weight: 400; font-display: swap; src: url(fonts/cookie-latin.woff2) format("woff2"); }
@font-face { font-family: "Herr Von Muellerhoff"; font-weight: 400; font-display: swap; src: url(fonts/herrvonmuellerhoff-latin.woff2) format("woff2"); }
html[data-type="dir"] { --hand: "Cookie"; --hand-w: 400; --hand-tt: none; --hand-ls: 0em; --hand-style: normal; --plaque-size: clamp(2.3rem, 10.4vw, 3.1rem); --rot: -3deg; --mono-size: 1.8rem; }
html[data-type="pen"] { --hand: "Herr Von Muellerhoff"; --hand-w: 400; --hand-tt: none; --hand-ls: 0em; --hand-style: normal; --plaque-size: clamp(2.9rem, 12.8vw, 3.9rem); --rot: -2deg; --mono-size: 1.85rem; }
html[data-type="dir"] .names-art { width: min(80%, 23rem); }
html[data-type="pen"] .names-art { width: min(84%, 25rem); }
.dancers { max-height: 62vh; max-height: 62svh; }

/* =====================================================================================================
   ROUND 8 (13 Nov, late night): the three Soho booth prints are back, taped on top where the drawing was;
   the drawing they chose (the fourth) sits to the right of "Any questions"; their own little film closes
   the page, and the cupid at the hand-cranked camera is its play button.
   ===================================================================================================== */
.hero-strips { align-items: flex-start; margin: 0 -10px; padding: 16px 0 24px; }
.hero-strips .strip { flex: 0 0 auto; width: 34.6%; max-width: 196px; margin: 0; padding: 5px 5px 7px; }
.hero-strips .strip:nth-child(1) { rotate: -5deg; margin-right: -2.4%; }
.hero-strips .strip:nth-child(2) { rotate: 2deg; margin-top: 22px; z-index: 1; }
.hero-strips .strip:nth-child(3) { display: block; rotate: 5deg; margin-left: -2.4%; margin-top: 2px; }
.hero-strips .strip::before { width: 44%; max-width: 64px; }
@media (min-width: 700px) {
  .hero-strips { margin: 0; gap: 24px; }
  .hero-strips .strip { width: 30%; padding: 7px 7px 10px; }
  .hero-strips .strip:nth-child(1), .hero-strips .strip:nth-child(3) { margin-inline: 0; }
}
.hero-what { margin-top: 1.5rem; padding-left: .3em; font-size: 1.02rem; letter-spacing: .3em; font-weight: 600; color: var(--red); }

/* the goodbye film, taped up like a print */
.film { position: relative; width: min(100%, 34rem); margin: 3.4rem auto 0; }
.film-print { position: relative; background: #fff; padding: 8px 8px 10px; rotate: -1.5deg; box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 14px 28px -12px rgba(0,0,0,.3); }
.film-print::before, .film-print::after { content: ""; position: absolute; z-index: 1; top: -11px; width: 62px; height: 22px; background: rgba(212,48,31,.3); }
.film-print::before { left: 9%; rotate: -6deg; }
.film-print::after { right: 9%; rotate: 5deg; }
.film-print video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #1b1b1f; cursor: pointer; }
.film-cupid { position: relative; z-index: 2; display: block; width: min(44%, 10rem); margin: .5rem auto 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.film-hint { margin-top: .3rem; color: var(--red); }
.film.is-playing .film-hint { visibility: hidden; }

/* =====================================================================================================
   ROUND 9 (14 Nov): real transparency everywhere (see the top of this file); the door opens onto their photo of an
   old-town street, and the booth prints come after; a little watercolour under each title instead of the wavy line; the end of
   the page is the Mehari top left, phone and email in the middle, the two of them at the cafe on the right;
   booking codes on two hotels; six calmer italic letterings to choose from.
   ===================================================================================================== */
/* under the titles */
.orn { width: min(36%, 7.6rem); height: auto; margin: .75rem auto 0; }      /* a fine twig with small leaves: it must not weigh on the title */
.orn.flip { scale: -1 1; }
.js img.orn.r { clip-path: inset(0 100% 0 0); transition: opacity .8s ease, clip-path 1.3s cubic-bezier(.4,.2,.2,1) .15s; }      /* painted in from the left */
.js img.orn.r.in { clip-path: inset(0 0 0 0); }

/* behind the door: their daylight photo of the pier of the Marbella Club. One forward movement from the tap to the page: the door
   swings open, we go IN through the doorway (it grows to the screen; the script sets --zoom, --tx, --ty) while the photo closes in a
   little on the arch with the sign (its transform-origin), and WHILE it is still moving the scene dissolves onto the black-and-white
   booth prints. 14 Nov, late: "saltes a las fotos antes de que coja zoom las ramas": it used to run on down the boardwalk until the
   plants filled the screen and then stand still; now it never gets that far and never stops. */
.door-photo { width: 100%; height: 100%; object-fit: cover; object-position: 74% 50%; transform-origin: 51% 60%; transform: scale(1); transition: transform 2s cubic-bezier(.4,0,.4,1); }
.door-through .door-photo { transform: scale(1.28); }
.door-stage { transition: transform 2s cubic-bezier(.4,0,.4,1); }
.door-through .door-view { -webkit-mask: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.door-pass .door-intro { opacity: 0; pointer-events: none; transition: opacity .8s ease-in; }
.door-intro { transition: opacity 1.15s ease; }
.playing .hero-strips .strip { opacity: 0; translate: 0 -30px; }
.played .hero-strips .strip { transition: opacity .7s ease calc(.35s + var(--i, 0) * .25s), translate 1s cubic-bezier(.2,.9,.3,1.15) calc(.35s + var(--i, 0) * .25s); }
.played .names-art { transition: clip-path 1.5s cubic-bezier(.5,.1,.3,1) 1.35s; }
.played .hero > :not(.hero-art):not(.names):not(.wash) { transition: opacity 1s ease 2.5s; }

/* the end: the car top left, phone and email in the middle, the two of them on the right; on a phone they follow one another, each on its side */
#contact.wide { width: min(100% - 44px, 1080px); }
.bye { display: grid; gap: 1.5rem; margin-top: 1.4rem; }
.bye .facts { margin-top: 0; }
.bye-side { width: 78%; margin-left: -8px; justify-self: start; }
.bye-art { margin: 0 -12px 0 16%; }
.chiri, .cafe { width: 100%; }
.cafe {      /* the watercolour runs off the sheet at the top and on the right: let those two edges fade instead of ending in a cut */
  -webkit-mask: linear-gradient(to bottom, transparent, #000 5%), linear-gradient(to left, transparent, #000 4%); -webkit-mask-composite: source-in;
  mask: linear-gradient(to bottom, transparent, #000 5%), linear-gradient(to left, transparent, #000 4%); mask-composite: intersect; }
@media (min-width: 760px) {
  .bye { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 2rem; align-items: center; margin-top: 2rem; }      /* equal sides keep phone and email dead centre */
  .bye-side { width: 100%; margin: 0 0 0 -14px; align-self: start; }
  .bye-art { margin: 0 -22px 0 0; }
}
#contact .signoff { margin-top: 2.2rem; }

/* where to stay: the two hotels with a code for the guests */
.stay-note { margin: .9rem auto 0; max-width: 30em; font-size: 1.08rem; font-style: italic; }
.hotel-code { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .55rem; margin: .1rem 0; padding: .45rem .7rem; border: 1.5px dashed var(--red); border-radius: 14px 18px 13px 17px; }
.hotel-code span { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; }
.hotel-code b { font-weight: 600; font-size: clamp(.82rem, 4vw, 1rem); letter-spacing: .04em; white-space: nowrap; color: var(--red); -webkit-user-select: all; user-select: all; overflow-wrap: anywhere; }

/* six calmer letterings ("algo italic pero no tan exagerado o de lado"): two true italics and four gentle scripts. The sizes give
   every one the title width the Cookie script had, taken from the widest title ("Nos vemos en Marbella"), so none breaks in two. */
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/playfairdisplay-italic-latin.woff2) format("woff2"); }
@font-face { font-family: "Tangerine"; font-weight: 700; font-display: swap; src: url(fonts/tangerine-700-latin.woff2) format("woff2"); }
@font-face { font-family: "Parisienne"; font-weight: 400; font-display: swap; src: url(fonts/parisienne-latin.woff2) format("woff2"); }
@font-face { font-family: "Dancing Script"; font-weight: 400 700; font-display: swap; src: url(fonts/dancingscript-latin.woff2) format("woff2"); }
@font-face { font-family: "Sacramento"; font-weight: 400; font-display: swap; src: url(fonts/sacramento-latin.woff2) format("woff2"); }
html[data-type="cor"] { --hand: "Cormorant Garamond"; --hand-w: 500; --hand-tt: none; --hand-ls: 0em; --hand-style: italic; --plaque-size: clamp(1.66rem, 8.4vw, 2.5rem); --rot: 0deg; --mono-size: 1.5rem; }
html[data-type="play"] { --hand: "Playfair Display"; --hand-w: 400; --hand-tt: none; --hand-ls: 0em; --hand-style: italic; --plaque-size: clamp(1.4rem, 7vw, 2.1rem); --rot: 0deg; --mono-size: 1.25rem; }
html[data-type="tan"] { --hand: "Tangerine"; --hand-w: 700; --hand-tt: none; --hand-ls: 0em; --hand-style: normal; --plaque-size: clamp(2rem, 10.1vw, 3rem); --rot: -1deg; --mono-size: 1.85rem; }
html[data-type="par"] { --hand: "Parisienne"; --hand-w: 400; --hand-tt: none; --hand-ls: 0em; --hand-style: normal; --plaque-size: clamp(1.54rem, 7.75vw, 2.32rem); --rot: -1deg; --mono-size: 1.4rem; }
html[data-type="dan"] { --hand: "Dancing Script"; --hand-w: 500; --hand-tt: none; --hand-ls: 0em; --hand-style: normal; --plaque-size: clamp(1.68rem, 8.5vw, 2.54rem); --rot: -1deg; --mono-size: 1.5rem; }
html[data-type="sac"] { --hand: "Sacramento"; --hand-w: 400; --hand-tt: none; --hand-ls: 0em; --hand-style: normal; --plaque-size: clamp(1.62rem, 8.2vw, 2.45rem); --rot: -1deg; --mono-size: 1.5rem; }
html[data-type="cor"] .names-art { width: min(74%, 21rem); }
html[data-type="play"] .names-art { width: min(80%, 23rem); }
html[data-type="tan"] .names-art { width: min(70%, 20rem); }
html[data-type="par"] .names-art, html[data-type="dan"] .names-art { width: min(76%, 22rem); }
html[data-type="sac"] .names-art { width: min(80%, 23rem); }


/* =====================================================================================================
   ROUND 10 (14 Nov, evening): only a plain twig under the titles; no Mehari (a sketch of the beach bar of
   the pre-wedding party sits in its place, four versions in the preview bar); a new section for the
   pre-wedding party with his sunset photo as a small taped print; the question about children is gone.
   ===================================================================================================== */
.taped { position: relative; background: #fff; padding: 6px 6px 8px; box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 10px 22px -10px rgba(0,0,0,.28); }
.taped::before { content: ""; position: absolute; left: 50%; top: -11px; width: 44%; max-width: 64px; height: 22px; translate: -50% 0; rotate: -3deg; background: rgba(212,48,31,.3); }
.taped img { display: block; width: 100%; height: auto; }
.pre-name { margin-top: .35rem; font-size: 1.5rem; font-weight: 400; font-style: italic; line-height: 1.2; color: var(--ink); }
.pre-text { margin-top: .5rem; }
.pre-photo { width: min(46%, 11rem); margin: 2rem auto .3rem; rotate: -3deg; }
.pre-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .8rem; margin-top: .5rem; }

/* 14 Nov, night: the opening lines breathe (names and "we're getting married" together, then the date, then place and time, then the
   words); the drawing of the two of them beside "Any questions" is a little smaller; the bougainvillea branch above the church is
   smaller and fainter. */
.hero-what { margin-top: 1rem; }
.hero-date { margin-top: 1.6rem; }
.hero-place { margin-top: 1.25rem; }
.hero .lede { margin-top: 1.7rem; }
.bye-art { margin: 0 -6px 0 30%; }
@media (min-width: 760px) { .bye-art { margin: 0 -10px 0 20%; } }
.branch.tl { top: -34px; left: -30px; width: min(21vw, 140px); opacity: .7; }
@media (min-width: 900px) { .branch.tl { left: calc(50% - 540px); width: 170px; top: -44px; } }

/* =====================================================================================================
   ROUND 13 (14 Nov, night): two colour photos taped either side of the first geraniums; their watercolour
   of the finca in the "Celebration" card (the cupid moved up above the title); the cloud cupid rests about
   7 mm under the last line of the programme instead of at the top of "Where to stay".
   ===================================================================================================== */
.pots-row { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: start; width: min(100% - 28px, 1080px); margin: 0 auto; }
.pots-row .pots { grid-column: 1 / -1; grid-row: 2; }
.pic { width: 100%; margin: 0; }
.pic-r { grid-column: 2; grid-row: 1; justify-self: end; rotate: 4deg; margin-bottom: -14px; z-index: 1; }
.pic-l { grid-column: 1; grid-row: 3; justify-self: start; rotate: -5deg; margin-top: -26px; z-index: 1; }
.pic-r2 { grid-column: 2; grid-row: 3; justify-self: end; rotate: -3deg; margin-top: 4px; z-index: 1; }      /* the third one, lower on the right */
.pots-row .tall { width: min(78%, 130px); }
.pots-row .wide { width: min(100%, 170px); }
@media (min-width: 900px) {
  .pots-row { display: block; min-height: 300px; }
  .pic-l, .pic-r, .pic-r2 { position: absolute; margin: 0; }
  .pic-l { left: 6%; top: 34%; }
  .pic-r { right: 5%; top: -22%; }
  .pic-r2 { right: -1%; top: 127%; }          /* further right and about 7 mm lower: it was touching the words of the reply section */
  .pots-row.three .pic-r { top: -8%; }          /* clear of the last question above it (it must not cover its + sign) */
  .pots-row .tall { width: 188px; }
  .pots-row .wide { width: 246px; }
}
.cupid-slot.after-list { margin: 26px auto 0; }          /* about 7 mm under "until our feet give out" */
#schedule { padding-bottom: clamp(18px, 3vh, 34px); }
#stay { padding-top: clamp(30px, 5vh, 56px); }
@media (min-width: 820px) { .duo { align-items: start; } }          /* church and finca drawings start level with each other */
.faq p.iban { font-variant-numeric: tabular-nums; letter-spacing: .02em; -webkit-user-select: all; user-select: all; overflow-wrap: anywhere; }          /* one tap selects the whole account number */

/* taped photos hanging either side of the top of a section (a zero-height anchor placed just before it): the left one lower, the
   right one higher, as they drew it. They lie under the section's own content, so a title always stays readable. */
.flank { position: relative; height: 0; width: min(100%, 1080px); margin: 0 auto; }
.flank .pic { position: absolute; margin: 0; }
.flank-l { left: 8px; top: 104px; rotate: -5deg; }
.flank-r { right: 8px; top: 30px; rotate: 4deg; }
.flank .tall { width: 100px; }
.flank .wide { width: 128px; }
@media (min-width: 900px) {
  .flank-l { left: 7%; top: 78px; }
  .flank-r { right: 6%; top: 26px; }
  .flank .tall { width: 186px; }
  .flank .wide { width: 240px; }
}

/* the end of the page (14 Nov, late): the two drawings are gone; a taped photo sits on each side of phone and email instead
   (on a phone: one above on the left, one below on the right) */
.bye-l { justify-self: start; rotate: -4deg; margin-left: 2px; }
.bye-r { justify-self: end; rotate: 4deg; margin-right: 2px; }
.bye .tall { width: 132px; }
.bye .wide { width: 172px; }
@media (min-width: 760px) {
  .bye-l { justify-self: center; align-self: start; margin: 6px 0 0; }
  .bye-r { justify-self: center; align-self: center; margin: 0; }
  .bye .tall { width: min(100%, 200px); }
  .bye .wide { width: min(100%, 262px); }
}

/* the reply form with its three photos: the petrol station on the left beside the name, the two from the snow further down
   (right, then left). On a phone there is no room beside the form: one sits above it, the two others below. */
.rsvp-body { position: relative; }
.rsvp-pics { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 1.7rem -4px 0; }
.rsvp-pics.two { margin-top: 1.9rem; }
.rp { flex: 0 0 auto; width: min(47%, 172px); }
.rp-1 { rotate: -4deg; margin-left: 3%; }
.rp-2 { rotate: -3deg; margin-top: 16px; }
.rp-3 { rotate: 4deg; }
@media (min-width: 900px) {
  .rsvp-pics { display: contents; }
  .rp { position: absolute; margin: 0; width: clamp(170px, 19vw, 246px); z-index: 1; }
  .rp-1 { left: calc(320px - 45vw); top: 108px; }
  .rp-2 { right: calc(320px - 45vw); left: auto; top: 330px; rotate: 4deg; }
  .rp-3 { left: calc(320px - 44vw); top: 500px; rotate: -3deg; }
}
#rsvp .lede { max-width: 27em; }          /* a little narrower, so the photo on the right never touches its words */
@media (min-width: 900px) and (max-width: 1060px) { .pots-row.three .pic-r2 { width: 152px; } }
.flank-r.low { top: 78px; right: 2px; }          /* beside the title rather than above it */
.flank .low.wide { width: 112px; }          /* on a phone a little smaller, to leave the cupid's painted ring alone */
@media (min-width: 900px) { .flank-r.low { top: 64px; right: 5%; } .flank .low.wide { width: 240px; } }

/* the reply, last touches before going live (14 Nov): on "yes" the cupid no longer shoots an arrow: it does a fist pump (two frames
   swapped by the script) and a hand-lettered "Yes!" pops up beside it; "no" no longer runs away: the first tap only asks "Really?",
   the second one counts and the cupid cries. */
.cupid-yes { position: absolute; right: 7%; top: 2%; font: var(--hand-style, italic) var(--hand-w, 400) 2.7rem/1 var(--hand), cursive; color: var(--red); opacity: 0; scale: .2; rotate: -9deg; pointer-events: none; white-space: nowrap; }
.cupid-stage.yes .cupid-yes { animation: pop .45s cubic-bezier(.3,1.5,.5,1) .3s forwards; }
.cupid-stage.yes .cupid-arrow { display: none; }
.cupid-stage.yes .stage-slot { left: 50%; translate: -50% 0; aspect-ratio: var(--yes-ar, 1 / 1); }
.cupid-stage.yes .cupid-main { left: auto; translate: none; animation: none; }
.cupid-stage.yes .cupid-heart { right: auto; left: 9%; top: 1.5rem; }
.cupid-stage.sad .cupid-yes { display: none; }

/* =====================================================================================================
   PHONES (14 Nov, after going live): "la version de movil se ve muy populated… mas espacios y mejor
   distribuido todo". Under 700 px the page breathes: more room between sections and between the opening
   lines, the booth prints clear of the edges, every taped photo on a row of its own instead of on top of
   a cupid or a title, a smaller floating button, and (in ink.js) fewer sparkles and petals and a flying
   cupid that fades between its stops instead of crossing the text.
   ===================================================================================================== */
@media (max-width: 699px) {
  .hero, .sec, .rsvp { padding-block: 86px; }
  .hero { padding-top: 30px; padding-bottom: 70px; }
  .hero-strips { margin: 0; padding: 22px 0 38px; }
  .hero-strips .strip { width: 32%; }
  .names { margin-top: 1.1rem; }
  .hero-what { margin-top: 1.5rem; }
  .hero-date { margin-top: 2.1rem; }
  .hero-place { margin-top: 1.5rem; }
  .hero .lede { margin-top: 2.3rem; line-height: 1.6; }
  .hero .btn--fill { margin-top: 2.4rem; }
  .cupid-slot.hero-slot { margin-top: 2.6rem; }
  .lede { line-height: 1.58; }
  .plaque + picture > .orn, .orn { margin-top: 1rem; }
  .cal { margin-top: 2.8rem; }
  .count-label { margin-top: 2.8rem; }
  .duo { gap: 5.5rem; margin-top: 3rem; }
  .order { margin-top: 2.8rem; gap: 2.1rem; }
  .order li + li::before { margin-bottom: 1.9rem; }
  .rail { margin-top: 2.6rem; }
  .facts { margin-top: 2.6rem; gap: 2.1rem; }
  .faq { margin-top: 2.6rem; }
  .faq summary { padding: 1.2rem .2rem; }
  .rsvpf { margin-top: 2.4rem; }
  .rsvpf-q { margin-bottom: 2rem; }
  #schedule { padding-bottom: 40px; }
  #stay { padding-top: 64px; }
  .cupid-slot.after-list { margin-top: 40px; }

  /* the hanging geraniums with their photos: a loose zigzag, nothing overlapping */
  .pots-row { margin: 34px auto 6px; row-gap: 26px; }
  .pic-r { margin-bottom: 0; }
  .pic-l { margin-top: 0; }
  .pic-r2 { margin-top: 34px; }
  .pots-row .tall { width: min(80%, 132px); }
  .pots-row .wide { width: min(100%, 162px); }

  /* the pairs that hang beside a section on a wide screen: here they are a row of their own before that section */
  .flank { height: auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; width: calc(100% - 56px); margin: 30px auto -30px; }
  .flank .pic { position: static; }
  .flank .tall { width: 40%; }
  .flank .wide { width: 50%; }
  .flank-l { margin-top: 38px; }
  .flank-r.low { margin-left: auto; margin-top: 0; }
  .flank:has(> .low) { margin-top: -150px; }          /* the single photo by the date tucks in beside the one above it, on the free right half */
  .flank .low.wide { width: 46%; }

  /* the reply form's photo and the two beside phone and email */
  .rsvp-pics { margin: 2.4rem 0 .4rem; }
  .bye { gap: 2.6rem; margin-top: 2.4rem; }
  .film { margin-top: 4.2rem; }
  .pre-photo { margin-top: 2.6rem; margin-bottom: 1rem; }
  .pre-links { margin-top: 1.1rem; }

  /* top bar and floating button: quieter */
  .bar-nav { -webkit-mask: linear-gradient(to right, #000 78%, transparent); mask: linear-gradient(to right, #000 78%, transparent); }
  .fab { bottom: 10px; padding: .72em 1.15em; font-size: .66rem; letter-spacing: .16em; }
}