/* A Day on the Vaal: Ben's 70th.
   The page is the party day: the sky moves from morning to night as you scroll. */

:root {
  --navy: #13294b;
  --navy-2: #1d3762;
  --ink-soft: #3c4e6c;
  --paper: #fffaf1;
  --cream: #fff8ec;
  --kraft: #f3dfb8;
  --sand: #f6e3c0;
  --sand-line: #d9c29a;
  --sun: #ffc93c;
  --sun-deep: #f2a516;
  --coral: #f2715a;
  --coral-deep: #c2412b;
  --rust: #9a2c18;
  --teal: #1e8d9a;
  --teal-deep: #0d6c75;
  --sky: #7fcdea;
  --night: #0b1733;

  --f-display: 'Bowlby One', 'Arial Black', Impact, sans-serif;
  --f-script: 'Yellowtail', 'Brush Script MT', cursive;
  --f-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Engine UI (recorder, calendar sheet, upload list) in our colours */
  --b70-bg: #fff8ec;
  --b70-surface: #ffffff;
  --b70-text: #13294b;
  --b70-muted: #3c4e6c;
  --b70-accent: #0d6c75;
  --b70-accent-text: #ffffff;
  --b70-line: #e2cfa8;
  --b70-error: #b3261e;
  --b70-ok: #1d6b3c;
  --b70-radius: 20px;
  --b70-font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --b70-font-display: 'Bowlby One', 'Arial Black', sans-serif;
  --b70-record: #d93025;

  --gutter: 16px;
  --top-ui: max(env(safe-area-inset-top), var(--b70-preview-bar, 0px));
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #bfe5f5;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--top-ui) + 64px);
}
body {
  margin: 0;
  min-height: 100vh;
  background: transparent;
  color: var(--navy);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(255, 201, 60, 0.35);
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg { display: block; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
strong { font-weight: 800; }
figure { margin: 0; }

.sr-only, .sprite {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--navy); color: var(--cream); padding: 12px 18px; border-radius: 12px; font-weight: 800;
}
.skip:focus { top: calc(12px + var(--top-ui)); }

.ico { width: 24px; height: 24px; flex: none; }

:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; box-shadow: 0 0 0 7px var(--sun); }

/* Phase-dependent content (core.css does the same; kept here in case it is missing) */
html:not([data-phase]) [data-show-phase]:not([data-show-phase~="before"]),
html[data-phase="before"] [data-show-phase]:not([data-show-phase~="before"]),
html[data-phase="party"] [data-show-phase]:not([data-show-phase~="party"]),
html[data-phase="after"] [data-show-phase]:not([data-show-phase~="after"]) { display: none !important; }

/* ================= Buttons ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px 24px;
  border: 3px solid var(--navy); border-radius: 999px;
  background: var(--cream); color: var(--navy);
  font-family: var(--f-body); font-size: 18px; font-weight: 800; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: 0 4px 0 var(--navy);
  transition: transform .12s ease, box-shadow .12s ease, background-color .2s;
  touch-action: manipulation;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-sun { background: var(--sun); }
.btn-sun:hover { background: #ffd666; }
.btn-teal { background: var(--teal-deep); color: #fff; }
.btn-teal:hover { background: #0b5f67; }
.btn-coral { background: var(--coral-deep); color: #fff; }
.btn-coral:hover { background: #ad3825; }
.btn-ghost { background: var(--cream); }
.btn-ghost:hover { background: #fff; }
.btn-wide { width: 100%; }
.btn-big { min-height: 62px; font-size: 19px; }
.btn-small { min-height: 50px; padding: 8px 20px; font-size: 17px; box-shadow: 0 3px 0 var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row .btn { flex: 1 1 200px; }

/* ================= The sky ================= */
.sky {
  --t: 0;
  --k: .5;
  position: fixed; left: 0; top: 0; width: 100%;
  height: 100vh; height: 100lvh;
  z-index: -1; overflow: hidden; pointer-events: none;
  contain: strict;
}
.sky-layer { position: absolute; inset: 0; will-change: opacity; }
.sky-morning   { background: linear-gradient(180deg, #a6dbf1 0%, #cdeaf5 46%, #fde6c8 100%); }
.sky-midday    { background: linear-gradient(180deg, #4fb2e5 0%, #8fd0f0 55%, #d6f0fb 100%); opacity: clamp(0, calc((var(--t) - .06) / .18), 1); }
.sky-afternoon { background: linear-gradient(180deg, #5eb4e2 0%, #a3d6ee 48%, #fbe6b0 100%); opacity: clamp(0, calc((var(--t) - .33) / .12), 1); }
.sky-golden    { background: linear-gradient(180deg, #74b8dc 0%, #bcd3d6 30%, #fbd49a 62%, #ffc98a 100%); opacity: clamp(0, calc((var(--t) - .5) / .13), 1); }
.sky-sunset    { background: linear-gradient(180deg, #8a86c2 0%, #e98a8a 34%, #f59a76 60%, #ffc48c 100%); opacity: clamp(0, calc((var(--t) - .69) / .1), 1); }
.sky-night     { background: linear-gradient(180deg, #081430 0%, #10234a 55%, #1e3767 100%); opacity: clamp(0, calc((var(--t) - .83) / .07), 1); }

.stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px, #fff, transparent),
    radial-gradient(1.2px 1.2px at 90px 80px, #fff8d8, transparent),
    radial-gradient(2px 2px at 160px 40px, #fff, transparent),
    radial-gradient(1.2px 1.2px at 220px 130px, #fff, transparent),
    radial-gradient(1.6px 1.6px at 60px 170px, #ffe9b0, transparent),
    radial-gradient(1.1px 1.1px at 130px 210px, #fff, transparent),
    radial-gradient(1.8px 1.8px at 250px 240px, #fff, transparent),
    radial-gradient(1.2px 1.2px at 10px 260px, #fff, transparent);
  background-size: 280px 280px;
  opacity: .9;
}
.stars-2 { background-size: 410px 370px; background-position: 120px 60px; opacity: .55; animation: twinkle 4.5s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .95; } }

.clouds { position: absolute; inset: 0; opacity: calc(1 - clamp(0, calc((var(--t) - .72) / .12), 1)); }
.cloud { position: absolute; left: 0; width: 180px; height: 72px; animation: drift 140s linear infinite; will-change: transform; }
.cloud-1 { top: 7%; animation-delay: -30s; }
.cloud-2 { top: 24%; width: 130px; animation-duration: 170s; animation-delay: -110s; opacity: .8; }
.cloud-3 { top: 46%; width: 220px; height: 88px; animation-duration: 200s; animation-delay: -60s; opacity: .7; }
@keyframes drift { from { transform: translateX(-260px); } to { transform: translateX(calc(100vw + 40px)); } }

/* The sun travels one arc across the day and turns into the moon at night.
   The arc is a wide ellipse whose top lies above the screen: the sun only shows in the
   top corners (morning on the left, golden hour and sunset on the right) and at midday
   it is overhead, out of frame, so it never sits behind the text.
   Everything hangs off --t (set from the scroll position) and --k (the ellipse's width/height). */
.orb-rise { position: absolute; inset: 0; transform: translateY(calc(80vh + 170px)); transition: transform 3s cubic-bezier(.2, .7, .2, 1); }
html.vaal-scrolled .orb-rise { transform: none; }
@media (min-width: 860px) { html.vaal-beat .orb-rise { transform: none; } }
.orb {
  --s: clamp(76px, 13vmin, 136px);
  --moon: clamp(0, calc((var(--t) - .83) / .07), 1);
  --ry: 43.6vh;
  --p: min(calc(var(--t) / .8), 1);
  --back: clamp(0, calc((var(--t) - .82) / .08), 1);
  --a: calc(-80deg + var(--p) * 160deg - var(--back) * 135deg);
  position: absolute; left: 50%; top: 31.6vh;
  width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  transform: scaleX(var(--k)) rotate(var(--a)) translateY(calc(var(--ry) * -1)) rotate(calc(var(--a) * -1)) scaleX(calc(1 / var(--k)));
  will-change: transform;
}
.orb > span { position: absolute; inset: 0; border-radius: 50%; }
.orb-glow {
  inset: -140% !important;
  background: radial-gradient(circle, rgba(255, 240, 170, .8) 0%, rgba(255, 224, 130, .34) 30%, rgba(255, 220, 120, 0) 62%);
  opacity: calc(1 - var(--moon));
}
.orb-sun {
  inset: -18% !important;
  background: radial-gradient(circle, #fffbe0 0%, #fff0a6 30%, #ffe066 46%, #ffd04a 56%, rgba(255, 201, 60, .45) 64%, rgba(255, 201, 60, 0) 72%);
  opacity: calc(.88 * (1 - var(--moon)));
}
.orb-dusk {
  inset: -18% !important;
  background: radial-gradient(circle, #ffe0b8 0%, #ffb27a 34%, #f58a62 52%, rgba(242, 113, 90, .45) 62%, rgba(242, 113, 90, 0) 72%);
  opacity: calc(clamp(0, calc((var(--t) - .56) / .2), 1) * .9 - var(--moon));
}
.orb-moon {
  background: radial-gradient(circle at 34% 30%, #fffdf2 0%, #f3eed9 60%, #ddd6bd 100%);
  box-shadow: inset -14px -8px 0 0 rgba(12, 26, 56, .22), 0 0 46px 8px rgba(220, 230, 255, .35);
  opacity: var(--moon);
  transform: scale(.72);
}
.orb-moon::before, .orb-moon::after { content: ""; position: absolute; border-radius: 50%; background: rgba(160, 150, 120, .28); }
.orb-moon::before { width: 22%; height: 22%; left: 26%; top: 30%; }
.orb-moon::after { width: 14%; height: 14%; left: 56%; top: 58%; }

/* ================= Hero: the postcard ================= */
.hero {
  min-height: 100vh; min-height: 100svh;
  padding: 18px var(--gutter) 8px;
  padding-top: calc(18px + env(safe-area-inset-top));
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero-kicker {
  font-weight: 800; font-size: 17px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy); margin: 2px 0 12px; text-wrap: balance;
  transition: opacity .5s;
}
.hero-kicker::before, .hero-kicker::after { content: "·"; margin: 0 .5em; color: var(--coral-deep); }
html.vaal-opening .hero-kicker, html.vaal-open .hero-kicker { opacity: 0; }
.hero-kicker.is-personal { text-transform: none; letter-spacing: .01em; font-size: 19px; max-width: 22em; line-height: 1.3; }
/* "A postcard for" on one line, "Oom Piet & Tannie Marie" kept together on the next, clear of the postmark */
.hero-kicker.is-personal { text-wrap: wrap; margin-bottom: 22px; }
.kicker-name { display: inline-block; }
.nobr { white-space: nowrap; }
.hero-kicker.is-personal::before, .hero-kicker.is-personal::after { content: none; }

.pc-stage { width: 100%; max-width: 430px; perspective: 1600px; margin: 0 auto; }
.pc-stage.is-stamped { animation: shake .32s linear; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translate(2px, 1px); } 40% { transform: translate(-2px, -1px); } 60% { transform: translate(1.5px, -1px); } 80% { transform: translate(-1px, 1px); } }
.pc {
  position: relative;
  display: grid;
  transform-style: preserve-3d;
  transition: transform 1.15s cubic-bezier(.45, .05, .2, 1);
  transform: rotate(-1.6deg) rotateY(0deg) scale(1) translateY(0);
}
.pc.is-flipped { transform: rotate(1deg) rotateY(180deg) scale(1) translateY(0); }
/* The first opening: a short lift, then a slow turn (the transition above is for later turns) */
.pc.is-opening { animation: pcopen 1.8s cubic-bezier(.45, .05, .25, 1) both; transition: none; }
@keyframes pcopen {
  0%   { transform: rotate(-1.6deg) rotateY(0deg) scale(1) translateY(0); }
  9%   { transform: rotate(-1.6deg) rotateY(0deg) scale(1.03) translateY(-6px); }
  55%  { transform: rotate(0deg) rotateY(110deg) scale(1.06) translateY(-12px); }
  100% { transform: rotate(1deg) rotateY(180deg) scale(1) translateY(0); }
}
.pc-face {
  grid-area: 1 / 1;
  position: relative;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: 10px;
  background: #fffdf6;
  box-shadow: 0 2px 0 rgba(19, 41, 75, .08), 0 22px 40px -14px rgba(19, 41, 75, .5), 0 6px 14px -6px rgba(19, 41, 75, .3);
  transition: box-shadow .3s;
}
.pc.is-opening .pc-face { box-shadow: 0 2px 0 rgba(19, 41, 75, .08), 0 40px 60px -18px rgba(19, 41, 75, .55), 0 10px 20px -6px rgba(19, 41, 75, .3); }
.pc-front { transform: rotateY(0deg); }
.pc-back { transform: rotateY(180deg); }
/* Older iPhones can let a turned-away face show through: hide it once it is edge-on. */
.pc.is-flipped .pc-front, .pc.is-opening .pc-front { visibility: hidden; transition: visibility 0s .75s; }
.pc:not(.is-flipped):not(.is-opening) .pc-front { visibility: visible; transition: visibility 0s .5s; }
.pc:not(.is-flipped):not(.is-opening) .pc-back { visibility: hidden; transition: visibility 0s .5s; }
.pc.is-flipped .pc-back, .pc.is-opening .pc-back { visibility: visible; transition: visibility 0s .6s; }

/* Front */
.pc-front { padding: 12px; cursor: pointer; display: flex; flex-direction: column; }
.pc-front::before { /* thin printed rule inside the white border */
  content: ""; position: absolute; inset: 7px; border: 1.5px solid rgba(19, 41, 75, .22); border-radius: 6px; pointer-events: none;
}
.pc-art { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; }
.pc-scene {
  position: absolute; inset: 0; overflow: hidden; border-radius: 4px;
  background: linear-gradient(180deg, #7fcdea 0%, #b9e4f4 52%, #fff1c9 100%);
}
.pc-rays {
  position: absolute; left: 50%; top: 58%; width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 110, .55) 0deg 7deg, rgba(255, 255, 255, 0) 7deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .7) 34%, transparent 62%);
          mask: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .7) 34%, transparent 62%);
}
.pc-rays { animation: rays 180s linear infinite; }
.pc.is-flipped .pc-rays { animation-play-state: paused; }
@keyframes rays { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.pc-land { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30%; }
.pc-willow { position: absolute; color: #24715c; width: 30%; height: auto; bottom: 14%; }
.pc-willow-l { left: -6%; }
.pc-willow-r { right: -8%; width: 26%; bottom: 16%; }

.pc-title { position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px 6px 4px; margin: auto 0; }
.pc-greet {
  font-family: var(--f-script); font-size: clamp(31px, 9.4vw, 44px); line-height: 1.05;
  color: var(--coral-deep);
  text-shadow: -2px -2px 0 #fff8ec, 2px -2px 0 #fff8ec, -2px 2px 0 #fff8ec, 2px 2px 0 #fff8ec, 0 3px 0 #fff8ec, 3px 5px 0 rgba(19, 41, 75, .35);
  transform: rotate(-4deg); margin: 22px 0 6px;
  white-space: nowrap;
}
.pc-wordbox { position: relative; display: block; width: 100%; }
.pc-wordbox-ben { width: min(82%, 42vh); margin-top: 2px; }
.pc-wordbox-70 { width: min(80%, 40vh); margin-top: -2px; }
.pc-word { width: 100%; height: auto; overflow: visible; }
.pc-word text { font-family: 'Bowlby One', 'Arial Black', sans-serif; }
.pc-turning {
  font-family: var(--f-script); font-size: clamp(26px, 7.4vw, 34px); line-height: 1; color: var(--navy);
  background: var(--sun); padding: 4px 18px 8px; border-radius: 999px; border: 2.5px solid var(--navy);
  box-shadow: 0 3px 0 var(--navy);
  transform: rotate(-3deg); margin: 4px 0 2px; position: relative; z-index: 1;
}
/* The date, on a ribbon across the water */
.pc-when {
  position: relative; z-index: 1; align-self: center; margin: 6px 18px 14px; padding: 5px 16px 7px;
  background: var(--cream); color: var(--navy); border: 2.5px solid var(--navy); border-radius: 4px;
  box-shadow: 0 3px 0 var(--navy);
  font-size: clamp(17px, 4.9vw, 20px); font-weight: 800; line-height: 1.25; letter-spacing: .005em;
  transform: rotate(-1.5deg);
}
.pc-when span { display: block; }
.pc-when-sep { display: none !important; }
.pc-when-time { font-weight: 700; }
.pc-when::before, .pc-when::after { /* ribbon tails */
  content: ""; position: absolute; top: 9px; bottom: -7px; width: 18px; z-index: -1;
  background: var(--coral-deep); border: 2.5px solid var(--navy);
}
.pc-when::before { left: -14px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 45% 50%); }
.pc-when::after { right: -14px; clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%); }
.pc-caption {
  position: relative; padding: 10px 2px 1px;
  font-size: clamp(17px, 4.8vw, 19px); font-weight: 800; letter-spacing: .01em; color: var(--navy); line-height: 1.25;
}
.postmark { position: absolute; width: 108px; height: 59px; top: -22px; right: 0; transform: rotate(-12deg); pointer-events: none; }

/* Letters fade in once the display font has arrived; until then a plain BEN / 70 holds the place */
.pc-word { opacity: 1; transition: opacity .5s; }
html.js:not(.fonts-ready) .pc-word { opacity: 0; }
.pc-fallback {
  display: none; position: absolute; inset: 0; align-items: center; justify-content: center;
  font-family: 'Arial Black', 'Arial Bold', Arial, sans-serif; font-weight: 900; font-size: clamp(64px, 21vw, 128px); line-height: 1;
  color: var(--navy); -webkit-text-stroke: 2px var(--cream); letter-spacing: .02em;
}
html.js:not(.fonts-ready) .pc-fallback { display: flex; }

/* Back */
.pc-back { padding: 16px 18px 18px; text-align: left; }
.pc-back-top { display: flex; align-items: flex-start; justify-content: space-between; position: relative; min-height: 84px; }
.pc-postcard-word { font-family: var(--f-display); font-size: 17px; letter-spacing: .3em; color: var(--navy); opacity: .75; padding-top: 6px; }
.stamp {
  width: 72px; padding: 3px; background: #fff; border: 5px dotted #fffdf6; background-clip: border-box;
  transform: rotate(4deg); box-shadow: 0 1px 3px rgba(19, 41, 75, .25); margin-right: 2px;
}
.stamp svg { width: 100%; height: auto; }
.postmark-back { top: 22px; right: 30px; width: 150px; height: 82px; transform: rotate(-14deg); }
.pc-note { position: relative; }
.pc-dear { font-family: var(--f-script); font-size: clamp(27px, 8vw, 34px); line-height: 1.15; color: var(--coral-deep); margin: 2px 0 6px; text-wrap: balance; }
.pc-dear.is-long { font-size: clamp(24px, 7vw, 34px); }
[data-ben70="greeting-wrap"]:not([hidden]) ~ .pc-dear-generic { display: none; }
.pc-headline { font-family: var(--f-display); font-size: clamp(30px, 9vw, 52px); line-height: 1.04; color: var(--navy); outline: none; white-space: nowrap; }
.pc-seventy-row { display: flex; align-items: center; gap: 6px; margin: 8px 0 6px; }
.pc-seventy { flex: 1 1 auto; width: 58%; max-width: 230px; margin-left: -2px; }
.snap {
  position: relative; flex: none; width: 38%; max-width: 190px; margin: 4px 0 0 auto;
  padding: 6px 6px 22px; background: #fffefa; border-radius: 2px;
  transform: rotate(-3deg); box-shadow: 0 2px 2px rgba(19, 41, 75, .12), 0 10px 18px -8px rgba(19, 41, 75, .45);
}
.snap img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: #cfe6ee; }
.snap::before { /* tape */
  content: ""; position: absolute; left: 50%; top: -12px; width: 64px; height: 24px; transform: translateX(-50%) rotate(4deg);
  background: rgba(255, 244, 205, .72); box-shadow: 0 1px 2px rgba(19, 41, 75, .14);
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px));
}
.snap figcaption { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font-family: var(--f-script); font-size: 19px; line-height: 1.1; color: var(--navy); }
.pc-line { font-size: 19px; font-weight: 700; margin: 6px 0 12px; }
.pc-facts { list-style: none; margin: 0 0 12px; padding: 12px 0 0; border-top: 2px dashed var(--sand-line); display: grid; gap: 8px; }
.pc-facts li { display: flex; gap: 10px; align-items: flex-start; font-size: 18px; line-height: 1.4; }
.pc-facts .ico { color: var(--teal-deep); margin-top: 1px; }
.pc-sign { font-family: var(--f-script); font-size: 28px; color: var(--navy); text-align: right; transform: rotate(-3deg); line-height: 1.1; }
.pc-address { display: none; }

/* The second beat, when the guitar comes in: the postmark lands, the greeting writes itself */
html.vaal-anim:not(.vaal-beat) .postmark-back { opacity: 0; }
html.vaal-anim.vaal-beat .postmark-back { animation: stampin .2s cubic-bezier(.5, 0, .9, .5) both; }
@keyframes stampin { from { opacity: 0; transform: rotate(-14deg) scale(1.45); } to { opacity: 1; transform: rotate(-14deg) scale(1); } }
html.vaal-anim:not(.vaal-beat) .pc-back .pc-dear { clip-path: inset(-12px 100% -12px -12px); }
html.vaal-anim.vaal-beat .pc-back .pc-dear { animation: write .95s cubic-bezier(.3, .1, .4, 1) .12s both; }
@keyframes write { from { clip-path: inset(-12px 100% -12px -12px); } to { clip-path: inset(-12px -12px -12px -12px); } }

.pc-turn {
  display: none; align-items: center; gap: 8px; margin: 16px auto 0;
  min-height: 48px; padding: 8px 18px; border: 2.5px solid var(--navy); border-radius: 999px; background: var(--cream);
  color: var(--navy); font-weight: 800; font-size: 17px; cursor: pointer; box-shadow: 0 3px 0 var(--navy);
}
html.vaal-open .pc-turn { display: inline-flex; }

/* The gate (before opening) */
.gate { margin-top: 22px; display: grid; justify-items: center; gap: 12px; width: 100%; max-width: 430px; }
.btn-open { width: 100%; min-height: 66px; font-size: 21px; padding: 14px 26px; }
.btn-open .ico { width: 28px; height: 28px; animation: nudge 4.5s ease-in-out 2s infinite; }
@keyframes nudge { 0%, 82%, 100% { transform: none; } 86% { transform: rotate(-12deg) scale(1.12); } 90% { transform: rotate(10deg) scale(1.12); } 94% { transform: rotate(-6deg); } }
.gate-note { font-size: 17px; font-weight: 700; color: var(--navy); background: rgba(255, 248, 236, .8); padding: 6px 16px; border-radius: 18px; line-height: 1.45; text-wrap: balance; }
.gate-note .ico { display: inline-block; width: 22px; height: 22px; vertical-align: -5px; margin-right: 6px; }
html.vaal-open .gate { display: none; }
html.vaal-opening .gate { opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .4s; pointer-events: none; }
html:not(.js) .gate { display: none; }
/* Until it is opened, only the photo side sets the card's height (the back can be taller) */
html.js:not(.vaal-open) .pc-back { position: absolute; left: 0; right: 0; top: 0; }
/* Without JavaScript: both sides of the card, one under the other */
html:not(.js) .pc, html:not(.js) .pc-face { transform: none; }
html:not(.js) .pc-back { grid-area: 2 / 1; margin-top: 18px; visibility: visible; position: relative; }

/* Countdown in sleeps */
.count { margin-top: 26px; width: 100%; max-width: 520px; }
.count-big {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 12px;
  font-family: var(--f-display); font-size: clamp(23px, 6.6vw, 34px); line-height: 1.1; color: var(--navy);
}
.count-sun {
  position: relative; display: inline-grid; place-items: center;
  width: 2.9em; height: 2.9em; border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #fff3b8, #ffd34d 55%, #ffc229);
  border: 3px solid var(--navy); box-shadow: 0 4px 0 var(--navy);
  transition: transform 1.3s cubic-bezier(.2, 1.4, .4, 1);
}
.count-sun::before {
  content: ""; position: absolute; inset: -18px; border-radius: 50%; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(242, 165, 22, .9) 0 9deg, transparent 9deg 22.5deg);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%, #000 68%, transparent 70%);
          mask: radial-gradient(circle, transparent 54%, #000 56%, #000 68%, transparent 70%);
  animation: spin 40s linear infinite;
  transition: opacity 1s .25s, scale 1.2s .2s cubic-bezier(.2, 1.3, .4, 1);
}
/* The sun of the day comes out on the second beat */
html.js:not(.vaal-beat) .count-sun { transform: translateY(14px) scale(.94); }
html.js:not(.vaal-beat) .count-sun::before { opacity: 0; scale: .7; }
@keyframes spin { to { transform: rotate(360deg); } }
.count-days { font-size: 1.45em; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.count-word { white-space: nowrap; }
.count-soon { font-family: var(--f-display); font-size: clamp(24px, 7vw, 34px); line-height: 1.15; }
.count.is-last-day .count-big { display: none; }
.count.is-last-day .count-soon { display: block !important; }
.count-small { margin-top: 14px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: 17px; font-weight: 700; }
.count-small .u { background: rgba(255, 248, 236, .88); border-radius: 999px; padding: 4px 12px; font-variant-numeric: tabular-nums; }
.count-small .u > span:first-child { font-weight: 800; }
.count-today { font-family: var(--f-display); font-size: clamp(30px, 9vw, 46px); line-height: 1.08; color: var(--navy); text-shadow: 3px 3px 0 var(--sun); }
.count-party .count-small, .count-after .count-small { display: block; max-width: 30em; margin: 12px auto 0; background: rgba(255, 248, 236, .88); padding: 8px 16px; border-radius: 16px; }

.hero-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 24px 0 8px; width: 100%; max-width: 430px; }
.hero-links .btn { flex: 1 1 auto; }

/* ================= River ================= */
.river { position: relative; height: clamp(190px, 27vw, 320px); margin-top: 4px; }
.river svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.ripples path { animation: ripple 7s ease-in-out infinite alternate; animation-play-state: paused; }
.ripples path:nth-child(2) { animation-duration: 9s; animation-direction: alternate-reverse; }
.ripples path:nth-child(3) { animation-duration: 11s; }
@keyframes ripple { from { transform: translateX(-24px); } to { transform: translateX(24px); } }
.glints circle { animation: glint 3.2s ease-in-out infinite; animation-play-state: paused; transform-box: fill-box; transform-origin: center; }
.glints circle:nth-child(2) { animation-delay: -1s; } .glints circle:nth-child(3) { animation-delay: -2s; } .glints circle:nth-child(4) { animation-delay: -.5s; }
@keyframes glint { 0%, 100% { opacity: .1; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.3); } }
.boat-cruise { animation: cruise 46s ease-in-out infinite alternate; animation-play-state: paused; }
.boat-bob { animation: bob 3.6s ease-in-out infinite; animation-play-state: paused; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(3px) rotate(1.5deg); } }
@keyframes cruise { from { transform: translateX(-170px); } to { transform: translateX(150px); } }
.is-live .ripples path, .is-live .glints circle, .is-live .boat-bob, .is-live .boat-cruise, .is-live .tent-glow, .is-live .lantern-glow, .is-live .hz-ripple, .is-live .bulb { animation-play-state: running; }

/* The river bank comes back at the top of every time of day, in that hour's colours */
.horizon {
  position: relative; height: 82px; margin: 0 calc(var(--gutter) * -1) 5vh;
  -webkit-mask: linear-gradient(180deg, #000 80%, transparent); mask: linear-gradient(180deg, #000 80%, transparent);
}
.horizon svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hz-land { fill: var(--hz-land); }
.hz-trees { color: var(--hz-tree); }
.hz-water { fill: var(--hz-water); }
.hz-shore { stroke: var(--hz-shine); stroke-width: 2; opacity: .8; }
.hz-ripple { stroke: var(--hz-shine); stroke-width: 3; stroke-linecap: round; opacity: .75; animation: ripple 9s ease-in-out infinite alternate; animation-play-state: paused; }
.hz-midday    { --hz-land: #52b087; --hz-tree: #2c7f62; --hz-water: #1f9fae; --hz-shine: #e2f8fb; }
.hz-afternoon { --hz-land: #5aa77c; --hz-tree: #2f7458; --hz-water: #34a5b0; --hz-shine: #fff3cf; }
.hz-golden    { --hz-land: #8b9a55; --hz-tree: #55642f; --hz-water: #d99a4e; --hz-shine: #fff0c4; }
.hz-sunset    { --hz-land: #7a5a7c; --hz-tree: #4a3352; --hz-water: #e5867a; --hz-shine: #ffd9b8; }

/* ================= Sections: times of the day ================= */
.day { position: relative; padding: 7vh var(--gutter) 2vh; }
#getting-there { padding-top: 6vh; }
.day-head { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.tod {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cream); color: var(--navy); border: 2.5px solid var(--navy); border-radius: 999px;
  padding: 5px 16px 5px 12px; font-size: 17px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 3px 0 var(--navy);
}
.tod .ico { width: 22px; height: 22px; color: var(--coral-deep); }
.day-title {
  margin-top: 16px;
  font-family: var(--f-display); font-size: clamp(40px, 11.6vw, 80px); line-height: 1.02; letter-spacing: -.005em;
  color: var(--navy); text-shadow: 3px 3px 0 var(--sun), 0 0 26px rgba(255, 250, 235, .6);
  text-wrap: balance;
}
.day-title-s { font-size: clamp(40px, 11vw, 64px); }
.day-lead { margin: 12px auto 0; max-width: 28em; font-size: 19px; font-weight: 700; color: var(--navy); text-wrap: balance; }
.day-golden .day-title { text-shadow: 3px 3px 0 #fff3cf, 0 0 26px rgba(255, 250, 235, .55); }
.day-sunset .day-title { text-shadow: 3px 3px 0 #ffd9a8, 0 0 26px rgba(255, 240, 220, .45); }
.day-night .tod { background: var(--navy); color: var(--cream); border-color: var(--cream); box-shadow: 0 3px 0 var(--cream); }
.day-night .tod .ico { color: var(--sun); }
.day-night .day-title { color: var(--cream); text-shadow: 3px 3px 0 var(--coral-deep), 0 0 3px #0a1733, 0 0 14px rgba(8, 20, 48, .95), 0 0 30px rgba(8, 20, 48, .8); }
.day-night .day-lead { color: var(--cream); text-shadow: 0 0 2px #0a1733, 0 0 6px #0a1733, 0 0 14px #0a1733, 0 0 24px rgba(8, 20, 48, .9); }
.skip-photos { margin-top: 16px; }

.cards { display: grid; gap: 20px; max-width: 560px; margin: 0 auto; }
.card {
  position: relative;
  background: var(--paper); color: var(--navy);
  border-radius: 22px; padding: 24px 20px;
  box-shadow: 0 1px 0 rgba(19, 41, 75, .06), 0 16px 36px -14px rgba(19, 41, 75, .38);
}
.card > p + p { margin-top: 8px; }
.card-title { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 23px; line-height: 1.15; margin-bottom: 12px; }
.card-title .ico { color: var(--coral-deep); width: 26px; height: 26px; }
.big-fact { font-size: 24px; font-weight: 800; line-height: 1.25; }
.fact-sub { font-size: 18px; color: var(--ink-soft); margin: 4px 0 18px !important; }

/* A print of Ben pegged to the top corner of a card */
.has-pin {
  --pw: 134px; --overlap: 60px; --ar: .75;
  --ph: calc((var(--pw) - 14px) * var(--ar) + 15px);
  margin-top: calc(var(--ph) - var(--overlap) + 8px);
}
.has-pin.pin-tall { --pw: 118px; --overlap: 72px; }
.has-pin > .card-title { padding-right: calc(var(--pw) - 2px); min-height: calc(var(--overlap) - 30px); font-size: 21px; }
@media (min-width: 420px) { .has-pin > .card-title { font-size: 23px; } }
@media (max-width: 399px) { .has-pin > .card-title .ico { display: none; } }
.pin {
  position: absolute; z-index: 3; top: 0; right: 8px; width: var(--pw);
  padding: 7px 7px 8px; background: #fffefa; border-radius: 2px;
  transform: translateY(calc(-100% + var(--overlap))) rotate(var(--tilt, 3deg));
  box-shadow: 0 2px 2px rgba(19, 41, 75, .12), 0 14px 22px -10px rgba(19, 41, 75, .5);
}
.pin img { width: 100%; height: auto; background: #cfe6ee; }
.pin::before { /* wooden peg */
  content: ""; position: absolute; left: calc(50% - 6px); top: -16px; width: 12px; height: 34px; border-radius: 3px; z-index: 2;
  background: linear-gradient(90deg, #c9955d, #e8bd85 45%, #b78149);
  box-shadow: inset 0 13px 0 -10px rgba(0, 0, 0, .25), 0 2px 3px rgba(19, 41, 75, .3);
}
.pin figcaption {
  position: absolute; left: -8px; bottom: -12px; padding: 3px 10px 4px; transform: rotate(-5deg);
  background: var(--kraft); color: var(--rust); font-family: var(--f-display); font-size: 17px; line-height: 1.2; white-space: nowrap;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
  padding-left: 16px; box-shadow: inset 0 -2px 0 rgba(19, 41, 75, .08);
}
/* RSVP: the print hangs above the reply card, on the left (the stamp is on the right) */
.has-pin.pin-above { --overlap: 20px; padding-top: 50px; }
.pin-above .pin { right: auto; left: 14px; }

.card-when .btn { margin-top: 2px; }
.rsvp-by { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px !important; padding: 12px 14px; background: #e7f5f3; border-radius: 14px; }
.rsvp-by .ico { color: var(--teal-deep); margin-top: 1px; }
.roadsign { display: flex; gap: 14px; align-items: center; margin-top: 18px; padding: 14px; background: #fff3c4; border-radius: 16px; border: 2px solid #f0d77a; }
.roadsign-sign { width: 58px; height: 58px; flex: none; }
.gps { margin-top: 12px !important; font-size: 17px; color: var(--ink-soft); }

/* Lunch: picnic-blanket edge */
.card-picnic { padding-top: 40px; }
.card-picnic::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; border-radius: 22px 22px 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(194, 65, 43, .5) 0 11px, transparent 11px 22px),
    repeating-linear-gradient(0deg, rgba(194, 65, 43, .5) 0 11px, transparent 11px 22px),
    #fff1ea;
}
.card-picnic.has-pin > .card-title { min-height: calc(var(--overlap) - 46px); }
.picnic { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.picnic li { display: flex; align-items: center; gap: 16px; font-size: 19px; line-height: 1.4; }
.picnic li + li { padding-top: 16px; border-top: 2px dashed var(--sand); }
.picnic-ico { width: 60px; height: 60px; flex: none; }

/* Dress code: beach towel */
.card-towel { padding-top: 38px; font-size: 19px; }
.card-towel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; border-radius: 22px 22px 0 0;
  background: repeating-linear-gradient(90deg, var(--teal) 0 18px, var(--cream) 18px 26px, var(--sun) 26px 44px, var(--cream) 44px 52px, var(--coral) 52px 70px, var(--cream) 70px 78px);
}
.card-towel.has-pin > .card-title { min-height: calc(var(--overlap) - 40px); }
.towel-body { display: flex; align-items: center; gap: 16px; }
.towel-ico { width: 84px; height: 84px; flex: none; }

/* ================= Seventy summers: washing lines ================= */
.day-summers { padding-left: 0; padding-right: 0; padding-top: 10vh; }
.day-summers .day-head { padding: 0 var(--gutter); }
.lines-loading { text-align: center; font-weight: 700; }
.line { margin-top: 22px; }
.line-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; padding: 0 var(--gutter); max-width: 1180px; margin: 0 auto; }
.line-name { font-family: var(--f-display); font-size: 25px; line-height: 1.12; color: var(--navy); text-shadow: 2px 2px 0 rgba(255, 248, 236, .8); }
.line-years { font-size: 17px; font-weight: 800; color: var(--navy); white-space: nowrap; background: rgba(255, 248, 236, .85); padding: 1px 12px; border-radius: 999px; }
.line-body { position: relative; }
.line-scroll {
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding: 0 var(--gutter);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 0 0 24px;
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 64px), rgba(0, 0, 0, .15));
          mask: linear-gradient(90deg, #000 calc(100% - 64px), rgba(0, 0, 0, .15));
}
.line.at-end .line-scroll, .line.no-scroll .line-scroll { -webkit-mask: none; mask: none; }
.line-scroll::-webkit-scrollbar { display: none; }
.line-scroll:focus-visible { outline-offset: -3px; }
.line-track {
  position: relative; display: flex; align-items: flex-start; gap: 16px;
  list-style: none; margin: 0; padding: 30px var(--gutter) 0; width: max-content; min-width: 100%;
}
.line-string { position: absolute; left: 0; top: 17px; height: 60px; pointer-events: none; overflow: visible; }
.line-string path { fill: none; }
.line-arrow {
  position: absolute; z-index: 4; top: 104px; width: 52px; height: 52px; border-radius: 50%; padding: 0;
  border: 2.5px solid var(--navy); background: var(--cream); color: var(--navy);
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 var(--navy), 0 6px 16px -4px rgba(19, 41, 75, .5);
  transition: opacity .25s, transform .12s;
}
.line-arrow:active { transform: translateY(2px); }
.line-arrow[hidden] { display: grid; opacity: 0; pointer-events: none; }
.line-prev { left: 8px; }
.line-next { right: 8px; }
.peg {
  --r: 0deg;
  position: relative; flex: none; min-width: 180px; display: flex; flex-direction: column; align-items: center; scroll-snap-align: start;
  transform-origin: 50% 0; transform: rotate(var(--r));
  animation: sway 5.5s ease-in-out infinite alternate; animation-play-state: paused;
}
.line.is-live .peg { animation-play-state: running; }
@keyframes sway { from { transform: rotate(calc(var(--r) - 1.3deg)); } to { transform: rotate(calc(var(--r) + 1.3deg)); } }
.print::before, .print::after { /* wooden pegs */
  content: ""; position: absolute; top: -12px; z-index: 2; width: 12px; height: 34px; border-radius: 3px;
  background: linear-gradient(90deg, #c9955d, #e8bd85 45%, #b78149);
  box-shadow: inset 0 13px 0 -10px rgba(0, 0, 0, .25), 0 2px 3px rgba(19, 41, 75, .3);
}
.print::before { left: 16%; } .print::after { right: 16%; }
.print {
  position: relative; display: block; width: auto; padding: 8px; margin: 0; border: 0; border-radius: 3px;
  background: #fffefa; cursor: zoom-in;
  box-shadow: 0 2px 2px rgba(19, 41, 75, .12), 0 14px 22px -10px rgba(19, 41, 75, .45);
}
.print img { width: 180px; height: 180px; background: #d7e9ef; border-radius: 1px; object-fit: cover; }
.print:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.tag {
  position: relative; align-self: stretch; margin: 14px 6px 0; padding: 12px 12px 12px;
  background: var(--kraft); color: var(--navy); font-size: 17px; line-height: 1.36; font-weight: 600; text-align: left;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px);
  box-shadow: inset 0 -2px 0 rgba(19, 41, 75, .08);
  text-wrap: pretty;
}
.tag::before { /* the string from the print to the tag */
  content: ""; position: absolute; left: 50%; top: -14px; width: 2px; height: 22px; background: rgba(19, 41, 75, .45);
}
.tag::after { content: ""; position: absolute; left: calc(50% - 5px); top: 6px; width: 10px; height: 10px; border-radius: 50%; background: rgba(19, 41, 75, .2); }
.tag-year { display: block; font-family: var(--f-display); font-size: 17px; color: var(--rust); margin: 8px 0 2px; letter-spacing: .02em; }
.about { font-family: var(--f-body); font-weight: 800; letter-spacing: 0; }

/* ================= RSVP ================= */
.card-reply { padding-top: 28px; background-image: radial-gradient(rgba(19, 41, 75, .035) 1px, transparent 1.4px); background-size: 14px 14px; background-color: var(--paper); }
.reply-stamp {
  position: absolute; right: 14px; top: -24px; width: 92px; height: 92px; border-radius: 50%; z-index: 2;
  display: grid; place-items: center; transform: rotate(10deg);
  background: var(--paper); border: 3px solid var(--coral-deep); box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 7px var(--coral-deep);
  color: var(--coral-deep); font-family: var(--f-display); font-size: 13px; letter-spacing: .02em;
}
.rsvp-form { display: grid; gap: 22px; }
.field { display: grid; gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
.label { font-weight: 800; font-size: 19px; padding: 0; color: var(--navy); }
.optional { font-weight: 600; color: var(--ink-soft); }
.input {
  width: 100%; min-height: 58px; padding: 12px 16px;
  font: 600 19px/1.3 var(--f-body); color: var(--navy);
  background: #fff; border: 2.5px solid #bfa77b; border-radius: 14px;
  -webkit-appearance: none; appearance: none;
}
.input:focus { outline: 3px solid var(--sun); outline-offset: 1px; border-color: var(--navy); }
.hint { font-size: 17px; color: var(--ink-soft); }
.choices { display: grid; gap: 12px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-box {
  display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 12px 16px 12px 14px;
  background: #fff; border: 2.5px solid #bfa77b; border-radius: 16px;
  font-weight: 800; font-size: 19px; line-height: 1.25; color: var(--navy);
  transition: background-color .2s, border-color .2s, transform .12s;
}
.choice-box::before {
  content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--navy); background: #fff center / 16px no-repeat;
}
.choice-box .ico { color: var(--coral-deep); }
.choice input:checked + .choice-box { background: #e3f4f2; border-color: var(--teal-deep); box-shadow: 0 0 0 2px var(--teal-deep); }
.choice input:checked + .choice-box::before {
  background-color: var(--teal-deep); border-color: var(--teal-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.choice input:focus-visible + .choice-box { outline: 3px solid var(--navy); outline-offset: 3px; }
.choice:active .choice-box { transform: scale(.985); }
.choice-pill .choice-box { min-height: 56px; }
.stepper { display: flex; align-items: center; gap: 18px; }
.stepper button {
  width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--navy);
  background: var(--sun); color: var(--navy); font-size: 30px; font-weight: 800; line-height: 1;
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 var(--navy); padding: 0 0 3px;
}
.stepper button:disabled { background: #f1e6cf; opacity: .55; box-shadow: none; cursor: default; }
.stepper-count { min-width: 2ch; text-align: center; font-family: var(--f-display); font-size: 36px; line-height: 1; }
.form-error {
  margin: 0; padding: 12px 14px; border-radius: 12px; background: #fde7e4; color: #8f1f17; font-weight: 800;
  border: 2px solid #e8a49b;
}
.thanks { text-align: center; padding: 6px 4px 4px; outline: none; }
.thanks-print {
  position: relative; width: 168px; margin: 18px auto 18px; padding: 8px 8px 30px; background: #fffefa; border-radius: 2px;
  transform: rotate(-3deg); box-shadow: 0 2px 2px rgba(19, 41, 75, .12), 0 16px 26px -10px rgba(19, 41, 75, .5);
}
.thanks-print img { width: 100%; height: auto; background: #cfe6ee; }
.thanks-print::before { content: ""; position: absolute; left: calc(50% - 6px); top: -16px; width: 12px; height: 34px; border-radius: 3px; background: linear-gradient(90deg, #c9955d, #e8bd85 45%, #b78149); box-shadow: 0 2px 3px rgba(19, 41, 75, .3); }
.thanks-print figcaption { position: absolute; left: 0; right: 0; bottom: 2px; font-family: var(--f-script); font-size: 24px; line-height: 1.1; color: var(--coral-deep); }
.thanks-title { font-family: var(--f-display); font-size: clamp(26px, 7.6vw, 34px); line-height: 1.12; margin-bottom: 10px; }
.thanks-text { font-size: 19px; margin: 0 auto 18px; max-width: 26em; }
html:not([data-rsvp="no"]) .thanks-print { animation: sunbob 3s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes sunbob { from { transform: rotate(-4deg); } to { transform: rotate(2deg); } }

/* ================= Memories ================= */
.card-letter { padding-top: 34px; }
.card-letter::before { /* airmail edge */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 22px 22px 0 0;
  background: repeating-linear-gradient(-45deg, var(--coral-deep) 0 14px, var(--paper) 14px 22px, var(--teal-deep) 22px 36px, var(--paper) 36px 44px);
}
.card-letter.has-pin > .card-title { min-height: calc(var(--overlap) - 36px); }
.asks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.asks li { display: flex; gap: 14px; align-items: flex-start; font-size: 19px; line-height: 1.4; }
.ask-num {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--coral-deep); color: #fff; font-family: var(--f-display); font-size: 18px; margin-top: -3px;
}
.send-by { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: #ffeedd; border-radius: 14px; margin-bottom: 22px; font-size: 18px; }
.send-by .ico { color: var(--coral-deep); }
.btn-record { min-height: 72px; font-size: 21px; border-radius: 22px; }
.rec-dot { position: relative; width: 22px; height: 22px; border-radius: 50%; background: #fff; flex: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); }
.rec-dot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #e0352b; }
.record-help { text-align: center; margin-top: 10px !important; font-size: 17px; color: var(--ink-soft); }
.or { display: flex; align-items: center; gap: 12px; margin: 26px 0 18px; font-weight: 800; font-size: 17px; color: var(--ink-soft); }
.or::before, .or::after { content: ""; flex: 1; height: 2px; background: var(--sand); }
.upload { display: grid; gap: 16px; }
.upload-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.upload-list:empty { display: none; }
.upload-thanks { padding: 14px 16px; background: #e3f4ea; border-radius: 14px; border: 2px solid #9fd0b2; }
.privacy { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px !important; font-size: 17px; color: var(--ink-soft); line-height: 1.45; }
.privacy .ico { color: var(--teal-deep); width: 22px; height: 22px; margin-top: 2px; }

/* ================= Night ================= */
.day-night { padding-top: 0; }
.lights { display: block; width: calc(100% + var(--gutter) * 2); height: 84px; margin: 0 calc(var(--gutter) * -1) 4vh; overflow: visible; }
.lights .wire { fill: none; stroke: #2b3b5f; stroke-width: 2; }
.lights .bulb { animation: bulb 3.4s ease-in-out infinite alternate; animation-play-state: paused; }
.lights .bulb.b2 { animation-delay: -1.7s; }
.lights .bulb.b3 { animation-delay: -.9s; animation-duration: 4.2s; }
@keyframes bulb { from { opacity: .72; } to { opacity: 1; } }
.campsite { position: relative; height: clamp(180px, 24vw, 280px); margin: 0 calc(var(--gutter) * -1) 0; -webkit-mask: linear-gradient(180deg, #000 78%, transparent); mask: linear-gradient(180deg, #000 78%, transparent); }
.campsite svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tent-glow, .lantern-glow { animation-play-state: paused; }
.lantern-glow { animation: flicker 1.8s ease-in-out infinite alternate; }
.tent-glow { animation: flicker 2.6s ease-in-out infinite alternate; }
@keyframes flicker { from { opacity: .7; } to { opacity: 1; } }
.day-night .cards { margin-top: -2px; }
.card-camp { font-size: 19px; }
.beds { list-style: none; margin: 16px 0 0; padding: 0; }
.bed { padding: 16px 0; border-top: 2px dashed var(--sand); }
.bed:last-child { padding-bottom: 0; }
.bed-name { font-weight: 800; font-size: 20px; line-height: 1.3; }
.bed-meta { font-size: 17px; color: var(--ink-soft); margin: 2px 0 12px !important; }
.bed-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.bed-btns .btn { flex: 1 1 210px; min-height: 52px; padding: 10px 16px; font-size: 17px; box-shadow: 0 3px 0 var(--navy); }
.card-ask p { font-size: 19px; margin-bottom: 16px; }
.tel { font-weight: 800; white-space: nowrap; padding: 11px 2px; } /* a 48px-tall tap area without moving the line */

/* ================= Footer under the stars ================= */
.footer {
  position: relative; text-align: center; color: var(--cream);
  padding: 16vh var(--gutter) calc(80px + env(safe-area-inset-bottom));
}
.footer-line { position: relative; margin: 0 calc(var(--gutter) * -1); height: 300px; }
.footer-line .lights { position: absolute; left: 0; top: 0; width: 100%; margin: 0; }
.pin-footer {
  --pw: 220px; position: absolute; left: 50%; top: 44px; right: auto; width: var(--pw);
  transform: translateX(-50%) rotate(var(--tilt, -2deg)); transform-origin: 50% 0;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .2), 0 18px 34px -10px rgba(0, 0, 0, .65);
}
.pin-footer figcaption { left: auto; right: -10px; bottom: -12px; transform: rotate(4deg); }
.sign-off { font-family: var(--f-script); font-size: clamp(36px, 10vw, 60px); line-height: 1.12; color: var(--cream); text-shadow: 0 0 3px #0a1733, 0 0 12px #0a1733, 0 2px 24px rgba(8, 20, 48, .9); }
.sign-off span { display: inline-block; }
.credit { text-shadow: 0 0 3px #0a1733, 0 0 10px #0a1733; display: block; margin: 18px auto 0 !important; font-size: 17px; font-weight: 700; color: #ece7d8; max-width: 22em; line-height: 1.5; text-wrap: balance; }
@media (min-width: 700px) { .credit { max-width: 40em; } }
.credit .ico { display: inline-block; vertical-align: -5px; color: var(--sun); margin-right: 4px; }
.footer-mark { width: 150px; height: 82px; margin: 30px auto 0; filter: invert(1) brightness(1.6); opacity: .5; transform: rotate(-8deg); }
.to-top { margin-top: 12px !important; }
.to-top a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; font-weight: 800; color: var(--cream); }

/* ================= Music =================
   While the song starts: a labelled pill, top right, over the card's stamp corner.
   After "Now playing": a 48px round button (play/pause with a tiny note) in whichever
   corner has no heading, button, link or form field under it; vaal.js picks the corner as
   the page scrolls, and tucks the button away for a moment when no corner is clear. */
.music {
  position: fixed; z-index: 40;
  top: calc(8px + var(--top-ui)); right: calc(10px + env(safe-area-inset-right));
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 16px 4px 5px; border-radius: 999px;
  background: rgba(19, 41, 75, .93); color: var(--cream); border: 2px solid rgba(255, 248, 236, .9);
  font-weight: 800; font-size: 17px; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 18px -4px rgba(8, 20, 48, .55);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .5s, transform .5s, visibility 0s .5s;
  touch-action: manipulation;
}
html.is-open .music, html.vaal-open .music { opacity: 1; visibility: visible; transform: none; transition: opacity .5s, transform .5s; }
.music-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sun); color: var(--navy); }
.music-ico svg { width: 20px; height: 20px; }
.music-pause { display: none; }
.music[aria-pressed="true"] .music-pause { display: block; }
.music[aria-pressed="true"] .music-play { display: none; }
.music-label { white-space: nowrap; padding-bottom: 1px; }
.music-label::before { content: "♪ "; color: var(--sun); }
.music-note { display: none; }
.music:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

/* The round button, and the corners it can sit in */
.music.is-compact, .music-probe {
  top: auto; right: auto; bottom: auto; left: auto;
  width: 48px; height: 48px; min-height: 0; padding: 0; gap: 0; justify-content: center; border-radius: 50%;
}
.music.is-compact .music-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.music.is-compact .music-note {
  display: grid; place-items: center; position: absolute; left: -5px; top: -5px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--coral-deep); color: #fff; border: 2px solid var(--cream); box-shadow: 0 2px 4px rgba(8, 20, 48, .35);
}
.music-note svg { width: 12px; height: 12px; }
.music-probe { position: fixed; visibility: hidden; pointer-events: none; }
.music.is-compact[data-spot="br"], .music-probe[data-spot="br"] { right: calc(12px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); }
.music.is-compact[data-spot="bl"], .music-probe[data-spot="bl"] { left: calc(12px + env(safe-area-inset-left)); bottom: calc(14px + env(safe-area-inset-bottom)); }
.music.is-compact[data-spot="tr"], .music-probe[data-spot="tr"] { right: calc(12px + env(safe-area-inset-right)); top: calc(12px + var(--top-ui)); }
.music.is-compact[data-spot="tl"], .music-probe[data-spot="tl"] { left: calc(12px + env(safe-area-inset-left)); top: calc(12px + var(--top-ui)); }
.music.is-compact[data-spot="mr"], .music-probe[data-spot="mr"] { right: calc(12px + env(safe-area-inset-right)); top: calc(50% - 24px); }
.music.is-compact[data-spot="ml"], .music-probe[data-spot="ml"] { left: calc(12px + env(safe-area-inset-left)); top: calc(50% - 24px); }
html.is-open .music.is-compact { transition: opacity .18s, transform .18s, visibility 0s; }
/* Changing corners: a quick fade out, then in at the new corner */
html.is-open .music.is-hopping, html.is-open .music.is-tucked, html.is-open .music.is-shrinking { opacity: 0; transform: scale(.6); pointer-events: none; }
html.is-open .music.is-tucked { visibility: hidden; transition: opacity .18s, transform .18s, visibility 0s .18s; }
html.is-open .music.is-tucked:focus-visible { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
html.np-landed .music.is-compact { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 40% { transform: scale(1.14); } }

/* "Now playing" label: shows when the guitar comes in (while the card is in view), then shrinks into the music button */
.now-playing {
  position: fixed; z-index: 41; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; width: min(400px, calc(100vw - 28px)); padding: 12px 16px 12px 12px;
  background: var(--cream); color: var(--navy); border: 2.5px solid var(--navy); border-radius: 14px;
  box-shadow: 0 4px 0 var(--navy), 0 18px 36px -10px rgba(8, 20, 48, .55);
  text-align: left; pointer-events: none;
  transform: translate(-50%, calc(100% + 40px)); opacity: 0;
  transition: transform .6s cubic-bezier(.2, .9, .3, 1.15), opacity .4s;
}
.now-playing::after { /* airmail edge */
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 4px; height: 4px; border-radius: 2px;
  background: repeating-linear-gradient(-45deg, var(--coral-deep) 0 8px, transparent 8px 12px, var(--teal-deep) 12px 20px, transparent 20px 24px);
  opacity: .8;
}
.now-playing[hidden] { display: none; }
.now-playing { --np-in: translate(-50%, 0); }
.now-playing.is-in { transform: var(--np-in); opacity: 1; }
/* It shrinks into the round music button (vaal.js sets where that is) */
.now-playing.is-leaving {
  transform: var(--np-in) translate(var(--np-dx, 0px), var(--np-dy, 0px)) scale(.12); opacity: 0;
  transition: transform .75s cubic-bezier(.5, 0, .7, .4), opacity .45s .3s;
}
.np-ico { width: 44px; height: 44px; flex: none; padding: 9px; border-radius: 50%; background: var(--sun); color: var(--navy); border: 2px solid var(--navy); }
.now-playing p { display: grid; line-height: 1.25; }
.np-kicker { font-size: 17px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--coral-deep); }
@media (max-width: 379px) { .np-ico { display: none; } .now-playing { padding-left: 16px; } .np-title { font-size: 18px; } }
.np-title { font-family: var(--f-display); font-size: 19px; line-height: 1.2; }
.np-sub { font-size: 17px; font-weight: 700; color: var(--ink-soft); }

/* ================= Lightbox ================= */
.lightbox {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column;
  background: #0a1733; color: var(--cream);
  padding: calc(8px + var(--top-ui)) calc(8px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
  animation: lbin .25s ease-out; outline: none;
}
.lightbox[hidden] { display: none; }
@keyframes lbin { from { opacity: 0; } }
.lb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }
.lb-count { font-weight: 800; font-size: 17px; padding-left: 8px; }
.lb-close, .lb-prev, .lb-next {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px;
  border-radius: 999px; border: 2.5px solid var(--cream); background: rgba(255, 248, 236, .08); color: var(--cream);
  font-weight: 800; font-size: 18px; cursor: pointer;
}
.lb-close:focus-visible, .lb-prev:focus-visible, .lb-next:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 10px 6px; touch-action: pan-y; overflow: hidden; user-select: none; -webkit-user-select: none; }
.lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; transition: transform .28s ease, opacity .28s ease; }
.lb-figure.is-out-left { transform: translateX(-40px); opacity: 0; }
.lb-figure.is-out-right { transform: translateX(40px); opacity: 0; }
.lb-print { background: #fffefa; padding: 8px; border-radius: 3px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); max-width: 100%; }
.lb-img {
  max-width: calc(100vw - 52px); max-height: calc(100vh - 300px - var(--top-ui)); max-height: calc(100dvh - 300px - var(--top-ui));
  width: auto; height: auto; object-fit: contain; background: #20345a;
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.lb-tag {
  margin-top: 16px; max-width: 34em; padding: 12px 18px; background: var(--kraft); color: var(--navy); text-align: center;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px);
  font-size: 18px; line-height: 1.38; font-weight: 600;
}
.lb-year { display: block; font-family: var(--f-display); color: var(--rust); font-size: 18px; }
.lb-chapter { display: block; font-size: 17px; color: var(--ink-soft); margin-top: 2px; }
.lb-nav { display: flex; justify-content: space-between; gap: 12px; padding: 6px 4px 0; }
.lb-nav button { flex: 1; justify-content: center; max-width: 220px; }
.lb-nav button:disabled { opacity: .35; cursor: default; }

/* ================= Celebrations ================= */
.celebrate { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
/* Confetti over a card falls behind its words (vaal.js puts it in this layer) */
.card-confetti { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.card-reply > .rsvp-form, .card-reply > .thanks, .card-letter > :not(.pin):not(.card-confetti) { position: relative; z-index: 1; }
.thanks-title, .thanks-text { text-shadow: 0 0 2px var(--paper), 0 0 5px var(--paper), 0 0 9px var(--paper), 0 0 14px var(--paper); }
.bit { position: absolute; top: 0; left: 0; will-change: transform; animation: fall var(--dur, 2.6s) cubic-bezier(.25, .6, .4, 1) forwards; }
@keyframes fall {
  0% { transform: translate(var(--x0), var(--y0)) rotate(0); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(var(--x1), var(--y1)) rotate(var(--rot)); opacity: 0; }
}
.plane { position: absolute; left: 0; top: calc(var(--top-ui) + 74px); width: min(540px, 94vw); animation: fly 8s linear forwards; }
.plane svg { width: 100%; height: auto; overflow: visible; }
.plane.is-leaving { opacity: 0; transition: opacity .3s; }
.plane-prop { animation: prop .12s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes prop { 50% { transform: scaleY(.25); } }
.plane-flag { animation: flutter .9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 0 50%; }
@keyframes flutter { to { transform: skewY(1.5deg) scaleY(.96); } }
@keyframes fly {
  0% { transform: translate(105vw, 10px); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  42% { transform: translate(calc(50vw - 50%), -4px); }
  60% { transform: translate(calc(50vw - 50% - 14px), 2px); animation-timing-function: cubic-bezier(.6, 0, .8, .6); }
  100% { transform: translate(-112%, 8px); }
}

/* ================= Bigger screens ================= */
@media (min-width: 700px) {
  :root { --gutter: 28px; }
  .cards { gap: 24px; }
  .card { padding: 30px 30px; }
  #getting-there .cards { max-width: 1000px; grid-template-columns: 1fr 1fr; align-items: start; }
  #getting-there .cards { margin-top: 64px; }
  #getting-there .has-pin { margin-top: 0; }
  .hero-kicker { opacity: 1 !important; }
  .line-name { font-size: 30px; }
  .lights { height: 96px; }
}
@media (min-width: 860px) and (min-height: 560px) {
  .hero { padding-top: 34px; }
  .pc-stage { max-width: 880px; }
  .pc-front { min-height: 520px; }
  /* Landscape card: BEN and 70 side by side, as big as the card allows */
  .pc-title {
    display: grid; grid-template-columns: 1.3fr 1fr; grid-template-areas: "greet greet" "ben seventy";
    align-items: end; justify-items: center; padding: 14px 18px 0; column-gap: 22px;
  }
  .pc-greet { grid-area: greet; font-size: 62px; margin: 0 0 14px; }
  .pc-wordbox-ben { grid-area: ben; width: 100%; max-width: 480px; justify-self: end; margin-bottom: 6px; }
  .pc-turning { position: absolute; left: 57%; bottom: -4px; font-size: 30px; transform: translateX(-50%) rotate(-8deg); margin: 0; }
  .pc-wordbox-70 { grid-area: seventy; width: 100%; max-width: 370px; justify-self: start; }
  .pc-when span { display: inline; }
  .pc-when-sep { display: inline !important; }
  .pc-when { margin-bottom: 18px; padding: 6px 22px 8px; }
  .postmark { width: 190px; height: 104px; top: -22px; right: -30px; }
  .pc-back { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto 1fr; column-gap: 34px; padding: 28px 34px 30px; }
  .pc-back-top { grid-column: 1 / -1; }
  .pc-note { grid-column: 1; }
  .pc-seventy { max-width: 300px; width: 300px; flex: none; }
  .snap { position: absolute; right: -335px; top: 4px; width: 190px; max-width: none; transform: rotate(3deg); }
  .pc-address { display: block; grid-column: 2; border-left: 2px solid rgba(19, 41, 75, .2); padding: 300px 0 0 30px; position: relative; }
  .pc-to { font-family: var(--f-display); font-size: 17px; letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
  .pc-addr-line { font-family: var(--f-script); font-size: 30px; line-height: 1.1; padding: 8px 0 6px; border-bottom: 2px solid rgba(19, 41, 75, .22); color: var(--navy); min-height: 52px; }
  .stamp { width: 96px; }
  .postmark-back { width: 190px; height: 104px; right: 118px; top: 6px; }
  .gate { max-width: 520px; }
  .count { margin-top: 34px; }
  .hero-links { max-width: 560px; }
  .day-title { text-shadow: 4px 4px 0 var(--sun), 0 0 30px rgba(255, 250, 235, .6); }
  .day-night .day-title { text-shadow: 4px 4px 0 var(--coral-deep), 0 0 3px #0a1733, 0 0 14px rgba(8, 20, 48, .95), 0 0 30px rgba(8, 20, 48, .8); }
  .horizon { height: 104px; }
  /* On a big screen "Now playing" sits bottom right, clear of the card, then shrinks into the music button */
  .now-playing { --np-in: translate(0, 0); left: auto; right: 24px; transform: translateY(calc(100% + 40px)); }
  .footer-line { height: 360px; }
  .pin-footer { --pw: 280px; }
}
@media (min-width: 1100px) {
  .lines { max-width: none; }
  .line-track { padding-left: max(var(--gutter), calc(50vw - 590px)); padding-right: max(var(--gutter), calc(50vw - 590px)); }
  .pc-stage { max-width: 980px; }
  .pc-front { min-height: 560px; }
  .pc-wordbox-ben { max-width: 520px; }
  .pc-wordbox-70 { max-width: 400px; }
  .pc-greet { font-size: 66px; margin-bottom: 14px; }
  /* Each time of day: the card on one side, a bigger print of Ben beside it */
  .day:not(#getting-there) .has-pin { margin-top: 0; }
  .day:not(#getting-there) .has-pin > .card-title { padding-right: 0; min-height: 0; }
  .day:not(#getting-there) .has-pin .pin { --pw: 260px; top: 40px; right: auto; left: calc(100% + 52px); transform: rotate(var(--tilt, 3deg)); }
  .day:not(#getting-there) .has-pin.pin-tall .pin { --pw: 230px; }
  .day-afternoon .has-pin .pin, .day-sunset .has-pin .pin { left: auto !important; right: calc(100% + 52px) !important; }
  .day:not(#getting-there) .pin figcaption { font-size: 19px; }
  .lb-img { max-height: 78vh; }
}

/* ================= Short phone screens (WhatsApp's browser on small iPhones) ================= */
@media (max-width: 859px) and (max-height: 700px) {
  .hero { padding-top: calc(10px + env(safe-area-inset-top)); }
  .hero-kicker { margin-bottom: 6px; }
  .pc-greet { margin: 8px 0 2px; font-size: clamp(28px, 8.4vw, 40px); }
  .pc-wordbox-ben { width: min(74%, 32vh); }
  .pc-wordbox-70 { width: min(72%, 30vh); }
  .pc-turning { margin: 2px 0; font-size: 26px; }
  .pc-title { padding-top: 4px; }
  .gate { margin-top: 12px; }
  .btn-open { min-height: 60px; }
  .pc-when { margin: 2px 18px 10px; }
}
@media (max-width: 859px) and (max-height: 600px) {
  /* Very short screens: the decorative kicker makes way so the Open button stays in view */
  .hero-kicker { display: none; }
  .hero { padding-top: calc(22px + env(safe-area-inset-top)); }
}

/* ================= A phone turned sideways ================= */
/* The card on the left, the Open button (then the countdown) on the right, so the guest
   never has to hunt below the card for the way in. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) {
  .hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "card kicker" "card gate" "card count" "card links" "card .";
    grid-template-rows: auto auto auto auto 1fr;
    align-items: start; column-gap: clamp(18px, 4vw, 40px);
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-left: calc(var(--gutter) + env(safe-area-inset-left)); padding-right: calc(var(--gutter) + env(safe-area-inset-right));
  }
  .pc-stage { grid-area: card; max-width: 400px; justify-self: end; }
  .pc { grid-template-columns: minmax(0, 1fr); }
  .pc-headline { font-size: clamp(30px, 4.6vw, 42px); }
  .pc-dear { font-size: clamp(26px, 3.8vw, 32px); }
  .hero-kicker { grid-area: kicker; display: block; margin: 8px 0 0; justify-self: center; }
  html.vaal-opening .hero-kicker { visibility: hidden; }
  html.vaal-open .hero-kicker { display: none; }
  .gate { grid-area: gate; margin-top: 16px; justify-self: center; }
  .count { grid-area: count; margin-top: 18px; justify-self: center; }
  html.vaal-open .count { margin-top: 58px; } /* clear of the song pill while it plays in */
  .hero-links { grid-area: links; margin-top: 18px; justify-self: center; }
  .pc-wordbox-ben { width: min(74%, 36vh); }
  .pc-wordbox-70 { width: min(72%, 34vh); }
  .pc-greet { font-size: clamp(28px, 4.4vw, 40px); }
  .count-big { font-size: clamp(22px, 3.6vw, 30px); }

  /* Height is scarce: a jump to a section (RSVP, the skip link, an email link) lands on its
     heading, not on the river-bank drawing above it */
  html { scroll-padding-top: calc(var(--top-ui) + 8px); }
  .day { padding-top: 4vh; }
  .horizon { height: 60px; margin-bottom: 2vh; }

  /* "Now playing" keeps to the right-hand column, clear of the card being read */
  .now-playing { --np-in: translate(0, 0); left: auto; right: calc(16px + env(safe-area-inset-right)); width: min(400px, 46vw); transform: translateY(calc(100% + 40px)); }

  /* The photo viewer: the caption beside the photo, so the photo can use the height */
  .lightbox { padding-top: calc(4px + var(--top-ui)); padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .lb-stage { padding: 4px 6px; }
  .lb-figure { flex-direction: row; align-items: center; gap: 18px; }
  .lb-img { max-height: calc(100vh - 136px - var(--top-ui)); max-height: calc(100dvh - 136px - var(--top-ui)); max-width: min(62vw, calc(100vw - 290px)); }
  .lb-tag { margin-top: 0; max-width: 15em; text-align: left; clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); }
  .lb-close, .lb-prev, .lb-next { min-height: 48px; }
  .lb-nav { padding-top: 2px; }
}

/* ================= Calm version ================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .pc { transform: none; }
  .pc.is-flipped { transform: rotateY(180deg); }
  .orb-rise { transform: none; }
  /* The sun and moon stay put in the top right corner and only fade into each other */
  .orb { transform: none; left: 12%; top: 13vh; }
  .count-sun, .count-sun::before { transform: none !important; opacity: 1 !important; scale: 1 !important; }
  .now-playing.is-leaving { transform: var(--np-in); opacity: 0; }
}

/* ================= Engine UI, made to feel at home ================= */
.b70-btn { font-weight: 800 !important; }
.b70-btn-primary { box-shadow: 0 4px 0 var(--navy); border: 3px solid var(--navy) !important; }
.b70-sheet-title, .b70-rec-title { font-family: var(--f-display) !important; font-weight: 400 !important; }
.b70-upload { background: #fff !important; border-color: #e2cfa8 !important; }
.b70-btn-secondary { border: 3px solid var(--navy) !important; color: var(--navy) !important; background: var(--cream) !important; box-shadow: 0 4px 0 var(--navy); }
.b70-sheet { border-top: 8px solid var(--sun); }
.b70-retry { white-space: nowrap; border-radius: 999px !important; padding: 0 20px !important; min-height: 48px; }