/* Layout: a save-the-date book in the style of the couple's "Salute!" card:
   cream scalloped cards laid on hand-painted cobalt and periwinkle stripes, a flat
   cobalt lemon sprig with one ripe lemon, gold rules and a gold bow, a
   rounded handwritten script for titles, spaced capitals for details and a
   soft serif italic for little notes.
   Each section fades into the next as you scroll, like turning a page.
   Deliberately a single light look, like a printed invitation. */
:root {
  color-scheme: light;
  --ivory: #fbf5ea;
  --ivory-2: #f6ead6;
  --card: #fcefdf;          /* the cream of the scalloped card */
  --ink: #17245a;
  --ink-soft: #46507a;
  --line: #ecdcc2;

  --cobalt: #1d3fbd;
  --cobalt-deep: #16309a;
  --cobalt-soft: #e2e8fb;
  --periwinkle: #7d9be6;
  --lemon: #f5b324;
  --lemon-deep: #a86f00;
  --lemon-soft: #fdeec8;
  --gold: #eeaa22;
  --terracotta: #b8623f;
  --terracotta-soft: #f5e3da;

  --script: "Norican", "Brush Script MT", cursive;          /* titles, names, dates */
  --italic: "Playfair Display", Georgia, serif;            /* soft italic notes */
  --body: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.75rem;
  --step-3: clamp(2rem, calc(5 * var(--vw, 1vw)), 2.7rem);
  --step-4: clamp(2.9rem, calc(8 * var(--vw, 1vw)), 5.4rem);

  --measure: 60ch;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--head, 120px); }
body {
  margin: 0;
  background-color: var(--ivory);
  /* faint paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.38  0 0 0 0 0.25  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--cobalt); text-underline-offset: 3px; }
::selection { background: var(--lemon-soft); }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
h1, h2, h3 { font-weight: 400; line-height: 1.12; text-wrap: balance; margin: 0; }
h1, h2 { font-family: var(--script); color: var(--cobalt); }
h2 { font-size: clamp(2.3rem, calc(6 * var(--vw, 1vw)), 3.3rem); line-height: 1.15; }
h3 { font-family: var(--body); font-weight: 500; font-size: var(--step-1); }
p, figure { margin: 0; }

.wrap {
  width: 100%;
  max-width: 66rem;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cobalt);
  font-weight: 500;
}
.script { font-family: var(--script); font-weight: 400; font-size: clamp(2rem, calc(5 * var(--vw, 1vw)), 2.7rem); line-height: 1.15; color: var(--cobalt); }
.hint { font-size: var(--step--1); color: var(--ink-soft); }
.soft { color: var(--ink-soft); }
.error { color: #a4312a; font-size: var(--step--1); font-weight: 500; }

/* ---------- Ribbon stripes and scalloped cards ---------- */
.tile-band {
  display: block; width: 100%; height: 64px;
  background: url("../img/stripes.jpg") repeat-x 0 0 / 120px 240px;
  box-shadow: inset 0 -3px 0 var(--gold);
}
.site-footer .tile-band { height: 36px; box-shadow: inset 0 3px 0 var(--gold); }
.stripes { background: var(--periwinkle) url("../img/stripes.jpg") repeat 0 0 / 120px 240px; }
.page.stripes { box-shadow: inset 0 3px 0 var(--gold), inset 0 -3px 0 var(--gold); }
/* A cream card with a scalloped edge and a thin gold frame inside it. The
   scallops are a mask on a layer behind the content, so sprigs and bows can
   still reach past the edge. */
.scallop {
  --r: 13px;
  position: relative;
  isolation: isolate;
  padding: calc(var(--r) * 2 + clamp(26px, calc(5 * var(--vw, 1vw)), 44px)) calc(var(--r) * 2 + clamp(18px, calc(5 * var(--vw, 1vw)), 44px));
}
.scallop::before, .scallop::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.scallop::before {
  inset: 0;
  background: var(--card);
  /* site.js draws the scalloped outline at the card's size (--scallop);
     until it runs the card is a plain rectangle */
  -webkit-mask: var(--scallop, linear-gradient(#000 0 0)) 0 0 / 100% 100% no-repeat;
  mask: var(--scallop, linear-gradient(#000 0 0)) 0 0 / 100% 100% no-repeat;
}
.scallop::after { inset: calc(var(--r) * 2 + 6px); border: 2px solid var(--gold); border-radius: 14px; }
/* the gold bow tied on the bottom of the frame */
.scallop > svg.bow { position: absolute; left: 50%; bottom: calc(var(--r) * 2 + 6px - 17px); width: 96px; height: 32px; margin-left: -48px; overflow: visible; pointer-events: none; }
.cover > .tile-band { height: clamp(24px, calc(5 * var(--vh, 1vh)), 56px); }
.sprig { position: absolute; pointer-events: none; overflow: visible; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.swash { position: absolute; left: 50%; bottom: 4px; width: 120px; height: 18px; margin-left: -60px; overflow: visible; }

/* ---------- Buttons and fields ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--cobalt);
  color: #fff;
  font: 500 0.8125rem/1 var(--body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--cobalt);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.button:hover { background: var(--cobalt-deep); }
.button:disabled { opacity: 0.6; cursor: wait; }
.button.ghost { background: transparent; color: var(--cobalt); }
.button.ghost:hover { background: var(--cobalt-soft); }
.button.wide { width: 100%; }
.link-button {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: inherit; font-size: var(--step--1); color: var(--cobalt);
  text-decoration: underline; text-underline-offset: 3px;
}
.field { display: grid; gap: 6px; text-align: left; }
label { font-size: var(--step--1); font-weight: 500; letter-spacing: 0.02em; }
input[type="text"], input[type="email"], input[type="tel"] {
  width: 100%;
  min-height: 48px;
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
}
input:focus { border-color: var(--cobalt); outline: none; box-shadow: 0 0 0 3px var(--cobalt-soft); }

/* ---------- The cover (sign-in) ---------- */
.cover {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--periwinkle) url("../img/stripes.jpg") repeat 0 0 / 120px 240px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform-origin: 50% 0;
}
.cover-inner {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding-block: clamp(16px, calc(3 * var(--vh, 1vh)), 40px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.cover-card {
  width: min(100%, 500px);
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
  padding-bottom: calc(var(--r) * 2 + clamp(34px, calc(5 * var(--vh, 1vh)), 48px));
}
.cover > .tile-band { visibility: hidden; height: 0; }
.cover-card > * { width: 100%; }
.cover-eyebrow {
  font-family: var(--script); font-size: clamp(2.6rem, min(calc(12 * var(--vw, 1vw)), calc(8 * var(--vh, 1vh))), 4.2rem); line-height: 1.05; color: var(--cobalt);
}
.cover-card > .cover-sprig { width: min(44%, 170px, calc(21 * var(--vh, 1vh))); aspect-ratio: 240 / 170; height: auto; margin: 4px auto 2px; }
.cover-names { font-family: var(--script); font-weight: 400; font-size: clamp(2rem, min(calc(8 * var(--vw, 1vw)), calc(5.2 * var(--vh, 1vh))), 2.7rem); line-height: 1.1; margin-bottom: 10px; color: var(--cobalt); }
.cover-names .amp { font-size: 0.8em; }
.cover-names .surname { display: block; }
.cover-date { display: flex; justify-content: center; align-items: center; gap: 6px; margin-bottom: 4px; font-family: var(--body); font-weight: 500; font-size: clamp(1.15rem, calc(4.8 * var(--vw, 1vw)), 1.6rem); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--cobalt); }
.cover-date i { font-style: normal; color: var(--gold); font-size: 1.3em; line-height: 1; }
.cover-card .cover-form { width: min(100%, 420px); margin-top: 12px; }
.cover-form { display: grid; gap: 12px; margin-top: 8px; padding-top: 20px; border-top: 1px dashed var(--gold); text-align: left; }
.cover-form .script, .cover-form .hint { text-align: center; }
.inline-field { display: flex; gap: 8px; }
.phone-field {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.phone-field:focus-within { border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-soft); }
.phone-prefix { padding-left: 14px; color: var(--ink-soft); font-size: var(--step-0); }
.inline-field .phone-field input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; box-shadow: none;
  padding-left: 8px;
  font-variant-numeric: tabular-nums; letter-spacing: 0.03em;
}
.preview-note { font-style: italic; }

/* After sign-in the cover melts away and the painting fades in; then the
   title rises in line by line. */
.cover.opening { pointer-events: none; animation: cover-fade 0.7s ease forwards; }
@keyframes cover-fade { to { opacity: 0; transform: scale(1.03); } }
.book.arriving .site-header { animation: fade-in 1.2s ease 1s both; }
.book.arriving .hero-bg { animation: fade-in 1.6s ease both; }
.book.arriving .hero-text > * { animation: rise-in 1.4s cubic-bezier(0.25, 0.6, 0.3, 1) both; animation-delay: calc(0.9s + var(--n, 0) * 0.3s); }
/* held until the painting has loaded, so nothing starts half-drawn */
.book.arriving.waiting .site-header, .book.arriving.waiting .hero-bg, .book.arriving.waiting .hero-text > * { animation-play-state: paused; }
.book.arriving .hero-text > :nth-child(2) { --n: 1; }
.book.arriving .hero-text > :nth-child(3) { --n: 2; }
.book.arriving .hero-text > :nth-child(4) { --n: 3; }
.book.arriving .hero-text > :nth-child(5) { --n: 4; }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- Header: stays pinned while the pages scroll under it ---------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background-color: var(--ivory);
  box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(28, 41, 69, 0.06);
}
.site-header .tile-band { height: 22px; box-shadow: inset 0 -2px 0 var(--gold); }
.book::before {
  content: "";
  position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 21;
  background: var(--ivory);
}
.header-inner {
  max-width: 66rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px 24px;
  flex-wrap: wrap;
  padding-block: 10px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.monogram {
  font-family: var(--script); font-size: 2.25rem; line-height: 1;
  color: var(--cobalt); text-decoration: none; margin-right: auto;
  -webkit-text-stroke: 0.6px var(--cobalt); text-shadow: 1px 2px 0 var(--gold-soft, #f6d98a);
}
.site-nav { display: flex; gap: 18px; overflow-x: auto; max-width: 100%; }
.site-nav a {
  color: var(--ink); text-decoration: none;
  letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8125rem; font-weight: 500;
  padding: 6px 2px; white-space: nowrap;
}
.site-nav a:hover { color: var(--cobalt); }
/* a gold rule under the current page */
.site-nav a[aria-current="page"] { color: var(--cobalt); box-shadow: inset 0 -3px 0 var(--gold); }
/* the gut-feeling pill beside the nav; it glows gently until answered */
.feel-jump {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--gold);
  background: #fffaf0; color: var(--cobalt); text-decoration: none;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  animation: feel-glow 2.6s ease-in-out infinite;
}
.feel-jump:hover { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.feel-jump.answered { animation: none; border-color: var(--cobalt); }
.feel-jump.is-yes { background: var(--cobalt); color: #fff; }
.feel-jump.is-maybe { background: #fdf0c8; border-color: var(--gold); }
.feel-jump.is-no { background: var(--terracotta-soft); border-color: var(--terracotta); color: var(--terracotta); }
@keyframes feel-glow { 50% { box-shadow: 0 0 0 5px rgba(238, 170, 34, 0.25); } }
@media (max-width: 760px) {
  .header-inner .who { order: 3; }
  .feel-jump { order: 4; margin-left: auto; padding: 5px 11px; font-size: 0.6875rem; letter-spacing: 0.1em; }
}
@media (prefers-reduced-motion: reduce) { .feel-jump { animation: none; } }
.who { font-size: var(--step--1); color: var(--ink-soft); display: flex; gap: 8px; align-items: baseline; }

/* ---------- Pages ---------- */
.page { position: relative; padding-block: clamp(64px, calc(10 * var(--vw, 1vw)), 120px); }
.page + .page::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  width: min(220px, 50%); height: 2px; transform: translateX(-50%);
  background: var(--gold); opacity: 0.6;
}
.section-head { display: grid; gap: 12px; margin-bottom: 48px; max-width: var(--measure); }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head p:not(.eyebrow) { color: var(--ink-soft); }

/* Pages: as you scroll, each section settles into place and the one before
   fades out while the next fades in (see setupPageFades in site.js). */
/* each section fills the screen; scrolling is the browser's own, no snapping */
/* the travel guide reads as one page: sections are only as tall as their content */
html.paged .page-travel .page:not(.page-intro) { min-height: 0; padding-block: clamp(56px, calc(9 * var(--vh, 1vh)), 96px); }
html.paged .page, html.paged .page-hero { min-height: calc(calc(100 * var(--vh, 1svh)) - var(--head, 96px)); }
html.paged .page { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: clamp(40px, calc(7 * var(--vh, 1vh)), 80px); }
html.paged .page-hero { align-content: start; }
html.paged .fade { opacity: 0.08; transform: translateY(18px); transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1), transform 1.8s cubic-bezier(0.2, 0.6, 0.2, 1); }
html.paged .fade.shown { opacity: 1; transform: none; }

/* Title page: the couple's watercolor of the view fills the page and fades
   into the paper below. */
.page-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  justify-items: center;
  min-height: calc(calc(100 * var(--vh, 1svh)) - var(--head, 96px));
  padding: clamp(56px, calc(11 * var(--vh, 1vh)), 120px) max(16px, env(safe-area-inset-right, 0px)) 120px max(16px, env(safe-area-inset-left, 0px));
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  object-position: 55% 26%;   /* a little more of the olive branches at the top */
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, #000 80%, transparent);
}
.hero-text {
  position: relative;
  will-change: transform, opacity;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  max-width: 100%;
  padding: 28px clamp(8px, calc(4 * var(--vw, 1vw)), 56px) 32px;
}
/* a soft pool of light behind the words, so they read on any part of the painting */
.hero-text::before {
  content: ""; position: absolute; inset: -18% -14%; z-index: -1;
  background: radial-gradient(closest-side, rgba(252, 239, 223, 0.86), rgba(252, 239, 223, 0.62) 55%, rgba(252, 239, 223, 0));
}
/* The title lock-up follows the "Salute!" card: a big script line, small
   typewriter capitals, the date in script over a gold rule, a typewriter
   note, then the family name in script. */
.hero-title {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(3.4rem, calc(13 * var(--vw, 1vw)), 7.4rem);
  line-height: 1.05;
  white-space: nowrap;
  color: var(--cobalt);
  /* room for the script's swashes, which reach past the letters' box: iPhone
     browsers cut off anything outside it while the line fades in */
  padding: 0.12em 0.3em;
  margin: -0.12em -0.3em;
}
.hero-place {
  margin-top: 6px;
  font-family: var(--body); font-weight: 500;
  font-size: clamp(1.05rem, calc(3.8 * var(--vw, 1vw)), 1.5rem);
  letter-spacing: 0.24em; padding-left: 0.24em; text-transform: uppercase;
  color: var(--cobalt);
}
.hero-date { position: relative; display: grid; place-items: center; padding-bottom: 14px; margin-top: 8px; }
.hero-date b {
  position: relative; z-index: 1;
  font-family: var(--script); font-weight: 400;
  font-size: clamp(2.4rem, calc(8 * var(--vw, 1vw)), 4.2rem); line-height: 1.1;
  color: var(--cobalt);
  padding: 0 0.25em; margin: 0 -0.25em;   /* room for the swashes, as above */
}
.hero-date .swash { width: 88%; height: 20px; left: 6%; margin-left: 0; bottom: 0; }
.hero-note { font-family: var(--italic); font-style: italic; font-size: clamp(1.45rem, calc(4.4 * var(--vw, 1vw)), 1.9rem); color: var(--gold); text-shadow: 0 1px 3px rgba(255, 250, 240, 0.9); font-variant-numeric: lining-nums; }
.hero-place .dot { color: var(--gold); font-weight: 700; }
.hero-family {
  margin-top: 14px;
  font-family: var(--body); font-weight: 500;   /* same spaced capitals as SORRENTO · ITALY, set larger */
  font-size: clamp(1.8rem, calc(7.6 * var(--vw, 1vw)), 3.4rem);
  letter-spacing: 0.24em; padding-left: 0.24em; text-transform: uppercase;
  line-height: 1.15;
  color: var(--cobalt);
}
.arch-wrap { position: relative; justify-self: center; width: min(86%, 380px); margin-bottom: 20px; }
.arch {
  position: relative;
  aspect-ratio: 2 / 3;
  width: 100%;
  max-width: 100%;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: var(--ivory-2);
  outline: 2px solid var(--gold);
  outline-offset: 8px;
}
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; }

/* Story */
.story { display: grid; gap: 16px; justify-items: center; text-align: center; }
.story-lead {
  font-family: var(--body); font-weight: 400;
  font-size: clamp(1.25rem, calc(2.8 * var(--vw, 1vw)), 1.6rem); line-height: 1.45;
  max-width: 26ch; text-wrap: balance; color: var(--ink);
}
.story-note { max-width: 46ch; color: var(--ink-soft); text-wrap: balance; }
.dates { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 44px; margin-block: 6px; }
.date { display: grid; justify-items: center; gap: 4px; }
.date-num { position: relative; display: grid; place-items: center; min-width: 120px; padding-bottom: 14px; margin-bottom: 8px; }
.date-num b { position: relative; z-index: 1; font-family: var(--script); font-weight: 400; font-size: 4.4rem; line-height: 1.05; color: var(--cobalt); }
.date-it { font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cobalt); font-weight: 500; }
.date-en { font-family: var(--italic); font-style: italic; color: var(--ink-soft); }
.date-rule { width: 2px; height: 104px; background: var(--gold); opacity: 0.6; }

.story-title { font-size: clamp(3rem, calc(6.5 * var(--vw, 1vw)), 4.4rem); line-height: 1.05; }
/* little Amalfi touches: the two of us driving in, testa di moro vases, spritzes */
.doodle { display: block; overflow: visible; pointer-events: none; }
.story-road { width: min(100%, 300px); display: flex; justify-content: center; border-bottom: 2px dashed var(--gold); margin-top: 2px; }
.story-car { width: 230px; height: auto; margin-bottom: -2px; }
html.paged .story-car:not(.go) { opacity: 0; }
html.paged .story-car.go { animation: drive-in 4.2s cubic-bezier(0.25, 0.7, 0.25, 1) 0.7s both, putt 1.05s ease-in-out 0.7s 4; }
@keyframes drive-in { from { translate: -260px 0; opacity: 0; } 15% { opacity: 1; } }
/* a soft rocking ride; it uses transform so nothing around the scooter moves */
@keyframes putt { 0%, 100% { transform: none; } 30% { transform: translateY(-1.5px) rotate(-0.6deg); } 70% { transform: translateY(0.5px) rotate(0.4deg); } }
.venue-title { display: flex; align-items: center; justify-content: center; gap: clamp(10px, calc(3 * var(--vw, 1vw)), 28px); }
.moor { flex: none; width: clamp(48px, calc(7 * var(--vw, 1vw)), 76px); height: auto; aspect-ratio: 100 / 140; }
.moor-right { transform: scaleX(-1); }
@media (min-width: 700px) { .venue-title h2 { white-space: nowrap; } }
@media (min-width: 1000px) { .page-venue .section-head { max-width: none; margin-bottom: 32px; } .page-venue .section-head p:last-child { white-space: nowrap; } }
.spritz { justify-self: center; width: 116px; height: 74px; margin-bottom: 4px; }

/* Venue */
/* three portrait photos in a row, sized so the row fits on one screen; the
   middle one shows first and the other two drift out from behind it */
.gallery {
  --gw: min(calc(96 * var(--vw, 1vw)), calc((calc(100 * var(--vh, 1svh)) - var(--head, 96px) - 330px) * 2.25 + 32px), 1200px);   /* photos fit under the heading on one screen */
  display: grid;
  --gg: 34px;                /* room for each photo's gold frame */
  --frame: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gg);
  width: var(--gw);
  margin-inline: calc(50% - var(--gw) / 2);
}
.page-venue { overflow-x: clip; }
.gallery figure { position: relative; min-width: 0; }
.gallery .g-main { z-index: 1; }
.gallery img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.gallery img { cursor: zoom-in; }
.gallery img:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Tapping a venue photo opens it big over a dimmed page; any tap closes it. */
.lightbox {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(16, 26, 70, 0.88);
  cursor: zoom-out;
  opacity: 0; transition: opacity 0.25s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.shown { opacity: 1; }
.lightbox-frame {
  margin: 0; line-height: 0;
  outline: 2px solid var(--gold); outline-offset: 8px;
  transform: scale(0.94); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lightbox.shown .lightbox-frame { transform: none; }
.lightbox-frame img {
  display: block; width: auto; height: auto;
  max-width: calc(100 * var(--vw, 1vw) - 64px);
  max-height: calc(100 * var(--vh, 1vh) - 96px);
}
.lightbox-close {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  font: 300 30px/44px var(--body); cursor: pointer;
}
html.lightbox-open, html.lightbox-open body { overflow: hidden; }
/* a square gold frame set a little off each photo, like the one around ours */
.gallery figure { outline: 2px solid var(--gold); outline-offset: var(--frame); background: var(--ivory-2); }
/* the middle photo settles first, then the outer two fan out slowly from behind it */
html.paged .gallery .g-main { transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s, opacity 1.2s ease 0.3s; }
html.paged .page-venue:not(.shown) .gallery .g-main { transform: scale(0.92); opacity: 0; }
/* the side photos fan out once the whole gallery is on screen (site.js adds
   .fanned) and tuck back behind the middle one when it leaves */
html.paged .gallery figure:not(.g-main) { transition: transform 3s cubic-bezier(0.22, 0.61, 0.18, 1) 0.5s, opacity 2.2s ease 0.5s; }
html.paged .gallery:not(.fanned) figure:first-child { transform: translateX(calc(100% + var(--gg))) rotate(4deg) scale(0.9); opacity: 0; transition-delay: 0s; transition-duration: 0.6s; }
html.paged .gallery:not(.fanned) figure:last-child { transform: translateX(calc(-100% - var(--gg))) rotate(-4deg) scale(0.9); opacity: 0; transition-delay: 0s; transition-duration: 0.6s; }
/* on wide screens the photo sits beside the story and the venue photos line
   up in one row, so each section fits on one screen */
@media (min-width: 900px) {
  .story { grid-template-columns: min(400px, calc((calc(100 * var(--vh, 1svh)) - var(--head, 96px) - 124px) * 2 / 3)) minmax(0, 38rem); justify-content: center; column-gap: clamp(48px, calc(6 * var(--vw, 1vw)), 80px); row-gap: 22px; align-items: center; align-content: center; }
  .story .arch-wrap { grid-row: 1 / span 5; width: 100%; margin-bottom: 0; align-self: center; }
  .story-lead { max-width: 36rem; font-size: clamp(1.25rem, calc(1.9 * var(--vw, 1vw)), 1.45rem); }
  .story .dates { margin-block: 0; }
}

/* Gut feeling: a cream train ticket to Sorrento on the stripes, with a
   lemon-coloured stub, notches where it tears off and a perforated line. */
.ticket {
  --stub: 200px;
  --notch: 16px;
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--stub) minmax(0, 1fr);
  background: var(--card);
  border-radius: 18px;
  -webkit-mask:
    radial-gradient(circle var(--notch) at var(--stub) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at var(--stub) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.page-reply .wrap { filter: drop-shadow(0 18px 30px rgba(23, 36, 90, 0.28)); }
.ticket-stub {
  display: grid; align-content: center; justify-items: center; gap: 10px;
  padding: 28px 18px;
  background: var(--lemon-soft);
  border-right: 3px dotted rgba(29, 63, 189, 0.35);
  border-radius: 18px 0 0 18px;
  text-align: center; color: var(--cobalt);
}
.stub-kind { font-family: var(--script); font-size: 2.1rem; line-height: 1; }
.stub-route, .stub-date, .stub-no { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; }
.stub-route i { font-style: normal; color: var(--gold); }
.stub-date { font-size: 0.95rem; letter-spacing: 0.16em; padding: 4px 10px; border: 1.5px solid var(--cobalt); border-radius: 4px; }
.stub-no { color: var(--ink-soft); font-size: 0.68rem; }
.ticket .feel-panel { padding: clamp(28px, calc(5 * var(--vw, 1vw)), 48px) clamp(22px, calc(5 * var(--vw, 1vw)), 52px); max-width: none; }
.ticket .spritz { width: 120px; height: 76px; margin: 2px 0; }
@media (max-width: 700px) {
  .ticket {
    --stub: 0px;
    grid-template-columns: minmax(0, 1fr);
    -webkit-mask:
      radial-gradient(circle var(--notch) at 0 152px, #0000 98%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle var(--notch) at 100% 152px, #0000 98%, #000) right / 51% 100% no-repeat;
    mask:
      radial-gradient(circle var(--notch) at 0 152px, #0000 98%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle var(--notch) at 100% 152px, #0000 98%, #000) right / 51% 100% no-repeat;
  }
  .ticket-stub {
    height: 152px; grid-template-columns: auto auto; column-gap: 18px; row-gap: 6px; align-content: center;
    border-right: 0; border-bottom: 3px dotted rgba(29, 63, 189, 0.35); border-radius: 18px 18px 0 0; padding: 16px;
  }
  .ticket-stub .spritz { grid-row: 1 / span 4; width: 150px; height: 95px; }
  .ticket-stub > span { justify-self: start; }
}

/* Gut feeling */
.feel-panel {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
  text-align: center;
}
.feel-panel > :not(.sprig) { position: relative; }
.feel-sub { color: var(--ink-soft); margin-bottom: 18px; }
.feel-panel #feel-hello { font-size: clamp(1.35rem, calc(3 * var(--vw, 1vw)), 1.7rem); color: var(--ink-soft); margin-bottom: -6px; }
.feel-panel h2 { font-size: clamp(2.8rem, calc(7 * var(--vw, 1vw)), 4.2rem); line-height: 1.05; }
.feel-options { display: grid; gap: 12px; }
.feel {
  display: flex; align-items: center; gap: 16px;
  width: 100%;
  min-height: 62px;
  padding: 10px 20px 10px 12px;
  border: 1px solid var(--c);
  border-radius: 999px;
  background: #fffdf8;
  color: var(--ink);
  font: 400 var(--step-0)/1.3 var(--body);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, border-color 0.3s ease;
}
.feel:hover { background: var(--c-soft); }
.feel-icon {
  flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-soft); color: var(--c-ink);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.feel-icon svg { width: 20px; height: 20px; }
.feel-yes { --c: var(--cobalt); --c-soft: var(--cobalt-soft); --c-ink: var(--cobalt); --c-on: #ffffff; }
.feel-maybe { --c: var(--lemon); --c-soft: var(--lemon-soft); --c-ink: #7a5a00; --c-on: #1c2945; }
.feel-no { --c: var(--terracotta); --c-soft: var(--terracotta-soft); --c-ink: var(--terracotta); --c-on: #ffffff; }
.feel-maybe[aria-checked="true"] { --c: var(--lemon); }
.feel[aria-checked="true"] { background: var(--c); border-color: var(--c); color: var(--c-on); }
.feel[aria-checked="true"] .feel-icon { background: rgba(255, 255, 255, 0.9); color: var(--c-ink); }
.has-choice .feel[aria-checked="false"] { opacity: 0.6; }
.has-choice .feel[aria-checked="false"]:hover { opacity: 1; }
.send { margin-top: 10px; }
.switch { text-align: center; }
/* A better address for the invitation */
.address-panel { position: relative; max-width: 600px; margin: 0 auto; display: grid; gap: 10px; text-align: center; }
.address-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 12px; margin-bottom: 8px; }
.address-grid .span-2 { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .address-grid .span-2 { grid-column: auto; }
}
.optional { font-weight: 400; color: var(--ink-soft); }
.feel-status { min-height: 1.6em; margin-top: 10px; font-family: var(--italic); font-style: italic; font-size: var(--step-1); color: var(--ink); }

/* The address form is a postcard on plain paper, with an airmail edge, so it
   stands apart from the striped gut-feeling card above it. */
.postcard {
  max-width: 980px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 0;
  text-align: left;
  background: var(--card);
  border: 12px solid transparent;
  border-image: repeating-linear-gradient(135deg, var(--cobalt) 0 16px, var(--card) 16px 24px, var(--gold) 24px 40px, var(--card) 40px 48px) 12;
  box-shadow: 0 2px 4px rgba(23, 36, 90, 0.08), 0 22px 44px rgba(23, 36, 90, 0.16);
}
.pc-note { display: grid; gap: 12px; align-content: center; padding: clamp(28px, calc(5 * var(--vw, 1vw)), 52px); }
.pc-note h2 { font-size: clamp(2rem, calc(4.4 * var(--vw, 1vw)), 2.8rem); }
.pc-note .feel-sub { margin: 0; }
.pc-sign { font-family: var(--script); font-size: 1.6rem; line-height: 1.2; color: var(--cobalt); margin-top: 6px; }
.pc-to { position: relative; display: grid; gap: 12px; align-content: start; padding: clamp(28px, calc(4 * var(--vw, 1vw)), 44px); padding-top: 140px; border-left: 2px solid var(--line); }
/* a perforated stamp in the corner: the sun setting over the bay */
.pc-stamp {
  --r: 4px;
  position: absolute; top: 22px; right: 24px;
  width: 92px; height: 110px;
  display: grid; justify-items: center; align-content: center; gap: 6px;
  background: var(--lemon-soft);
  box-shadow: inset 0 0 0 9px #fffdf8, inset 0 0 0 11px var(--cobalt);
  -webkit-mask:
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat,
    radial-gradient(circle closest-side, #000 97%, #0000) 0 0 / calc(2 * var(--r) + 2px) calc(2 * var(--r) + 2px) round;
  mask:
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat,
    radial-gradient(circle closest-side, #000 97%, #0000) 0 0 / calc(2 * var(--r) + 2px) calc(2 * var(--r) + 2px) round;
  filter: drop-shadow(0 2px 2px rgba(23, 36, 90, 0.15));
  transform: rotate(4deg);
}
.pc-stamp svg { width: 64px; height: 58px; }
.pc-stamp span { font-weight: 500; font-size: 0.66rem; letter-spacing: 0.14em; color: var(--cobalt); }
.pc-postmark { position: absolute; top: 28px; right: 96px; width: 170px; height: 102px; transform: rotate(-8deg); pointer-events: none; }
/* write the address on the lines, like on a real postcard */
.postcard .address-grid { gap: 10px 18px; margin-bottom: 8px; }
.postcard .field label { font-weight: 500; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cobalt); }
.postcard .field label .optional { text-transform: none; letter-spacing: 0; }
.postcard input[type="text"], .postcard input[type="email"], .postcard input[type="tel"] {
  min-height: 36px; padding: 4px 2px;
  background: transparent; border: 0; border-bottom: 2px solid var(--cobalt); border-radius: 0;
  font-size: 1.05rem;
}
.postcard input[type="text"]:focus, .postcard input[type="email"]:focus, .postcard input[type="tel"]:focus { box-shadow: none; border-bottom-color: var(--gold); background: rgba(245, 179, 36, 0.08); }
.postcard .address-grid .span-2 { grid-column: 1 / -1; }
.postcard .feel-status { text-align: center; }
/* on phones it reads like the back of a real postcard: the stamp up in the
   corner, the note beneath it, then the address lines packed closer */
@media (max-width: 760px) {
  .postcard { position: relative; grid-template-columns: minmax(0, 1fr); }
  .pc-note { gap: 8px; padding: 26px 22px 18px; }
  .pc-note .eyebrow, .pc-note h2 { padding-right: 78px; }
  .pc-note h2 { font-size: 2.1rem; line-height: 1.1; }
  .pc-to { position: static; border-left: 0; border-top: 2px dashed var(--line); margin-inline: 22px; padding: 18px 0 22px; gap: 10px; }
  .pc-stamp { --r: 3px; top: 8px; right: 12px; width: 70px; height: 84px; gap: 3px; box-shadow: inset 0 0 0 7px #fffdf8, inset 0 0 0 9px var(--cobalt); }
  .pc-stamp svg { width: 46px; height: 42px; }
  .pc-stamp span { font-size: 0.56rem; }
  .pc-postmark { top: 40px; right: 26px; width: 104px; height: 62px; opacity: 0.8; }
  .postcard .address-grid { gap: 14px 16px; margin-bottom: 4px; }
  .postcard .field { gap: 0; }
  .postcard input[type="text"], .postcard input[type="email"], .postcard input[type="tel"] { min-height: 32px; }
}

/* Schedule (hidden for now) */
.days { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.day { display: grid; gap: 14px; align-content: start; min-width: 0; }
.day-head { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--cobalt); }
.day-head .dow { font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cobalt); font-weight: 500; }
.day-head .date { font-family: var(--script); font-size: 2.2rem; color: var(--cobalt); }
.event { display: grid; gap: 2px; }
.event time { font-variant-numeric: tabular-nums; font-size: var(--step--1); color: var(--ink-soft); }
.event p { color: var(--ink-soft); font-size: var(--step--1); }
.event .private { justify-self: start; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; padding: 2px 8px; background: var(--lemon-soft); color: #7a5a00; }

/* ---------- Travel page ---------- */
.page-intro { padding-block: clamp(40px, calc(7 * var(--vw, 1vw)), 80px) clamp(48px, calc(8 * var(--vw, 1vw)), 96px); }
.page-intro .section-head { margin-bottom: 0; }
.page-title { font-size: var(--step-4); color: var(--cobalt); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card {
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}
.card .tag {
  justify-self: start;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  padding: 3px 10px; background: var(--lemon-soft); color: #7a5a00;
}
.card .code { font-weight: 500; font-size: 2.6rem; color: var(--cobalt); line-height: 1; }
.card p { font-size: var(--step--1); color: var(--ink-soft); }
.star { color: var(--gold); font-weight: 600; font-size: 1.2em; line-height: 0; }
.table-note { margin-top: 14px; font-family: var(--italic); font-style: italic; color: var(--ink-soft); }
.table-scroll { overflow-x: auto; max-width: 100%; border-top: 1px solid var(--cobalt); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: var(--step--1); }
th, td { text-align: left; padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.72rem; color: var(--cobalt); }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 44px; }
.tips > div { display: grid; gap: 6px; min-width: 0; align-content: start; }
.tips p { color: var(--ink-soft); font-size: var(--step--1); }
.weather { display: flex; flex-wrap: wrap; gap: 16px 48px; margin-bottom: 40px; }
.weather div { display: grid; }
.weather b { font-weight: 500; font-size: var(--step-3); line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--cobalt); }
.weather span { font-size: var(--step--1); color: var(--ink-soft); }

/* the welcome sits on Chandler's watercolor of the coast: the painting
   blooms in when the page opens and fades away as you scroll on, with a
   see-through cream card on the right so the town still shows */
.page-intro { display: grid; align-items: center; min-height: min(calc(86 * var(--vh, 1svh)), 820px); overflow: hidden; }
.intro-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 30% 42%;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
  animation: intro-bloom 3.2s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
@keyframes intro-bloom { from { opacity: 0; transform: scale(1.1); filter: blur(8px) saturate(0.5); } 40% { opacity: 1; } }
.page-intro .wrap { position: relative; z-index: 1; display: grid; }
.intro-card {
  justify-self: end; max-width: 31rem; padding: 30px 34px 34px; display: grid; gap: 8px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  border-radius: 18px; box-shadow: 0 18px 40px rgba(23, 36, 90, 0.22);
  will-change: transform, opacity;
  animation: fade-in 1.2s ease 1s both;
}
.intro-card > * { animation: rise-in 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(1.4s + var(--n, 0) * 0.3s); }
.intro-card > :nth-child(2) { --n: 1; }
.intro-card > :nth-child(3) { --n: 2; }
.intro-card .page-title { font-family: var(--script); font-weight: 400; line-height: 1.05; }
.intro-card p:last-child { color: var(--ink); }
html.paged .page-intro.fade { opacity: 1; transform: none; }   /* the painting does its own fading */
@media (max-width: 760px) { .page-intro { align-items: end; } .intro-bg { object-position: 22% center; } .intro-card { justify-self: stretch; padding: 24px 22px 26px; } }
@media (prefers-reduced-motion: reduce) { .intro-bg, .intro-card, .intro-card > *, .plane-banner span { animation: none; } }

/* the little plane flies across Flying in, left to right, towing its banner */
.page-flights { overflow: hidden; }
.flights-plane { position: relative; width: clamp(300px, calc(44 * var(--vw, 1vw)), 560px); aspect-ratio: 1200 / 255; margin: 0 4% 10px auto; }
.plane-body { position: absolute; right: 0; top: 0; width: 47.37%; height: 100%; }
/* the banner is cut into thin strips that rise and fall a beat apart, so a
   ripple runs from the tow rope back to the tail */
.plane-banner { position: absolute; left: 0; top: 0; width: 52.63%; height: 100%; }
.plane-banner span {
  position: absolute; top: 0; height: 100%; left: calc(var(--i) * 100% / var(--n)); width: calc(100% / var(--n));
  background: url("../img/plane-banner.webp") no-repeat;
  background-size: calc(var(--n) * 100%) 100%;
  background-position: calc(var(--i) * 100% / (var(--n) - 1)) 0;
  animation: flap 1.3s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.045s - 3s);
}
@keyframes flap { 0%, 100% { transform: translateY(calc(var(--a) * -1px)); } 50% { transform: translateY(calc(var(--a) * 1px)); } }
html.paged .flights-plane:not(.go) { opacity: 0; }
html.paged .flights-plane.go { animation: fly-in 5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both, float 5s ease-in-out 5.3s infinite; }
/* a little wooden launch rocking on the swell above the ferry table */
.page-boat { overflow: hidden; }
.page-boat .wrap { position: relative; }
.ferry-boat { position: absolute; right: 0; top: -30px; width: clamp(170px, calc(19 * var(--vw, 1vw)), 250px); height: auto; transition: opacity 1.4s ease; }
html.paged .ferry-boat:not(.go) { opacity: 0; }
html.paged .ferry-boat.go { animation: rock 4.5s ease-in-out infinite; }
@keyframes rock { 50% { transform: translateY(-3px) rotate(-1.5deg); } }
@media (max-width: 900px) { .ferry-boat { position: relative; top: 0; display: block; width: min(52%, 200px); margin: 0 0 8px auto; } }
@keyframes fly-in { from { translate: calc(-70 * var(--vw, 1vw)) 24px; } }
@keyframes float { 50% { translate: 0 -6px; } }
@media (max-width: 760px) { .flights-plane { width: min(92%, 340px); margin: 0 16px 10px auto; } }

/* Day trips: cream cards on the stripes, each with a perforated stamp
   holding a photo of the place, set at a slight tilt like stamps on a letter. */
.explore-head { max-width: 40rem; margin: 0 auto 36px; padding: 22px 28px 26px; text-align: center; display: grid; gap: 4px; background: var(--card); border-radius: 18px; }
.explore-head p:last-child { color: var(--ink-soft); }
.explore-head .script { font-size: clamp(1.35rem, calc(3 * var(--vw, 1vw)), 1.7rem); color: var(--ink-soft); }
.explore-head h2 { font-size: clamp(2.8rem, calc(7 * var(--vw, 1vw)), 4.2rem); line-height: 1.05; }
.trips { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; }
.trip {
  position: relative; display: grid; gap: 6px; align-content: start;
  padding: 22px 22px 20px; background: var(--card); border-radius: 18px;
  box-shadow: 0 14px 28px rgba(23, 36, 90, 0.22);
}
.trip-stamp {
  --r: 4px;
  display: block; justify-self: stretch; padding: 9px; margin: -48px 6px 10px;
  background: #fffdf8;
  -webkit-mask:
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat,
    radial-gradient(circle closest-side, #000 97%, #0000) 0 0 / calc(2 * var(--r) + 2px) calc(2 * var(--r) + 2px) round;
  mask:
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat,
    radial-gradient(circle closest-side, #000 97%, #0000) 0 0 / calc(2 * var(--r) + 2px) calc(2 * var(--r) + 2px) round;
  transform: rotate(-4deg);
  transition: transform 0.4s ease;
}
.trip:nth-child(2n) .trip-stamp { transform: rotate(3deg); }
.trip:nth-child(3n) .trip-stamp { transform: rotate(-2deg); }
.trip:hover .trip-stamp { transform: rotate(0) scale(1.04); }
.trip-stamp img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.trips { padding-top: 44px; row-gap: 64px; }
.trip-meta { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: #b97a00; }
.trip h3 { font-family: var(--script); font-weight: 400; font-size: 1.9rem; line-height: 1.1; color: var(--cobalt); }
.trip p:not(.trip-meta) { font-size: var(--step--1); color: var(--ink-soft); }
.trip-link { justify-self: start; margin-top: 6px; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 2px; }
.trip-link:hover { color: var(--cobalt-deep); border-color: var(--cobalt); }

/* Notes for the couple: a cream scalloped card on the stripes, a bookend to
   the sign-in card. A row of prompts fills in an idea; the note is free text. */
.page-notes .wrap { display: grid; justify-items: center; }
.notes-card { width: min(100%, 620px); display: grid; gap: 14px; text-align: center; }
.notes-card .script { font-size: clamp(2.4rem, calc(6 * var(--vw, 1vw)), 3.2rem); line-height: 1.05; color: var(--cobalt); }
.notes-card .lede { color: var(--ink-soft); max-width: 34rem; margin-inline: auto; }
.note-kinds { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.note-kinds button {
  font: 500 0.75rem/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  background: #fffdf8; color: var(--cobalt); border: 1.5px solid var(--periwinkle);
}
.note-kinds button[aria-pressed="true"] { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.notes-card textarea {
  width: 100%; min-height: 130px; resize: vertical; padding: 16px 18px;
  font: 400 1rem/1.6 var(--body); color: var(--ink); background: #fffdf8;
  border: 1.5px solid var(--gold); border-radius: 16px;
}
.notes-card textarea:focus { border-color: var(--cobalt); outline: none; box-shadow: 0 0 0 3px var(--cobalt-soft); }
.notes-card .button { justify-self: center; min-width: 220px; }
.page-notes .wrap { filter: drop-shadow(0 18px 30px rgba(23, 36, 90, 0.28)); }

/* ---------- Footer ---------- */
.footer-inner {
  text-align: center; padding-block: 32px 26px; display: grid; gap: 0; justify-items: center;
  color: var(--ink-soft); font-size: var(--step--1);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
/* a gold rule with a little sailboat riding on it, above the sign-off */
.footer-sail { display: block; width: min(220px, 60%); height: 34px; margin-bottom: 6px; overflow: visible; }
.footer-sail .sail { animation: bob 4s ease-in-out infinite; transform-origin: 110px 30px; }
@keyframes bob { 50% { transform: translateY(-2px) rotate(-3deg); } }
.footer-inner > .script { font-size: clamp(1.4rem, calc(3 * var(--vw, 1vw)), 1.75rem); color: var(--ink-soft); }
.footer-names { font-family: var(--script); font-size: clamp(2.8rem, calc(7 * var(--vw, 1vw)), 3.8rem); line-height: 1.05; color: var(--cobalt); }

@media (max-width: 760px) {
  /* the title page fills the phone screen; the next section fades in below */
  .hero-bg { object-position: 62% 50%; }
  .page-hero { padding-top: clamp(120px, calc(20 * var(--vh, 1vh)), 170px); }
  /* on phones the three portraits stay in a row, a little closer together */
  .gallery { --gg: 14px; --frame: 4px; width: calc(100% - 8px); margin-inline: 4px; }
  .gallery figure { outline-width: 1.5px; }
  /* phone screens are tall: the venue sits snugly instead of floating in a full screen */
  html.paged .page-venue { min-height: 0; }
  .page-venue .section-head { margin-bottom: 28px; gap: 8px; }
  .venue-title { gap: 4px; }
  .moor { width: 40px; }
  .venue-title h2 { max-width: 6.8em; text-wrap: balance; }
  .date-rule { display: none; }
  .scallop { --r: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .feel, .button { transition: none; }
  .cover.opening { animation-duration: 0.01s; }
}
.inline-field .phone-field input:first-child { padding-left: 14px; }
.inline-field .phone-field input:focus { box-shadow: none; }
@media (max-width: 420px) {
  .inline-field .button { padding-inline: 18px; }
}

/* Phones: the airport table becomes a stack of short entries (option and
   time on top, then where from and the note) so nothing runs off the edge,
   and the boat sits tucked over the heading */
@media (max-width: 760px) {
  html.paged .page-travel .page-boat:not(.page-intro) { padding-block: 28px 44px; }
  .ferry-boat { width: min(44%, 170px); margin: 0 -4px -14px auto; }
  .page-boat .section-head { margin-bottom: 22px; gap: 6px; }
  .page-boat table { min-width: 0; }
  .page-boat thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .page-boat tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .page-boat td { display: block; padding: 0; border: 0; }
  .page-boat td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 600; color: var(--cobalt); font-size: 1.05rem; }
  .page-boat td.num { grid-column: 2; grid-row: 1; align-self: center; color: var(--ink); }
  .page-boat td:nth-child(2) { grid-column: 1 / -1; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lemon-deep); font-weight: 500; }
  .page-boat td:nth-child(4) { grid-column: 1 / -1; margin-top: 4px; color: var(--ink-soft); }
  .page-boat .table-scroll { overflow: visible; }
}

/* Wide computer screens: spread everything out sideways rather than
   stacking it in a narrow, tall column */
@media (min-width: 1100px) {
  .wrap, .header-inner { max-width: 84rem; }
  html.paged .page { padding-block: clamp(32px, calc(5 * var(--vh, 1vh)), 64px); }
  html.paged .page-travel .page:not(.page-intro) { padding-block: clamp(40px, calc(6 * var(--vh, 1vh)), 72px); }
  .page-hero { padding-top: clamp(40px, calc(8 * var(--vh, 1vh)), 96px); }
  .story { grid-template-columns: min(440px, calc((calc(100 * var(--vh, 1svh)) - var(--head, 96px) - 110px) * 2 / 3)) minmax(0, 44rem); column-gap: clamp(64px, calc(8 * var(--vw, 1vw)), 140px); }
  .story-lead { max-width: 40rem; }
  .gallery { --gw: min(calc(94 * var(--vw, 1vw)), calc((calc(100 * var(--vh, 1svh)) - var(--head, 96px) - 320px) * 2.4 + 68px), 1500px); }
  .gallery img { aspect-ratio: 4 / 5; }
  .ticket { --stub: 250px; max-width: 1060px; }
  .feel-panel { max-width: 720px; }
  .postcard { max-width: 1180px; }
  /* notes: wide and short, chips on one line, a smaller writing box */
  .notes-card { width: min(100%, 1080px); gap: 10px; padding-block: calc(var(--r) * 2 + 24px); }
  .notes-card .lede { max-width: 54rem; }
  .notes-card textarea { min-height: 92px; }
  .notes-card #note-status:empty { display: none; }
  /* a slimmer sign-off at the bottom */
  .footer-inner { padding-block: 22px 18px; }
  .footer-sail { height: 28px; margin-bottom: 2px; }
  .footer-inner > .script { font-size: 1.35rem; }
  .footer-names { font-size: 2.7rem; }
  /* day trips: three across, two down, each card with its stamp beside the
     words, so all six fit on one screen */
  .page-explore .wrap { max-width: min(calc(94 * var(--vw, 1vw)), 96rem); }
  .explore-head { max-width: 44rem; margin-bottom: 20px; padding: 10px 28px 12px; }
  .explore-head h2 { font-size: 2.9rem; }
  .trips { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 0; gap: 20px 24px; }
  html.paged .page-travel .page-explore:not(.page-intro) { padding-block: 20px 24px; }
  /* the two watercolors open a little taller than the screen, so more of
     each painting shows */
  html.paged .page-hero, html.paged .page-travel .page-intro { min-height: calc(115 * var(--vh, 1svh) - var(--head, 96px)); }
  .trip { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); column-gap: 22px; row-gap: 4px; align-content: center; padding: 18px 20px; }
  .trip > :not(.trip-stamp) { grid-column: 2; }
  .trip-stamp { grid-column: 1; grid-row: 1 / span 4; align-self: center; margin: 0; padding: 7px; }
  .trip h3 { font-size: 1.65rem; }
  .trip p:not(.trip-meta) { font-size: 0.9rem; line-height: 1.5; }
  .trip-meta { font-size: 0.6875rem; }
  .trip-link { font-size: 0.75rem; }
  .section-head { max-width: 72ch; }
  /* the address fields pair up two to a row, so the postcard is shorter */
  .postcard .address-grid .span-2 { grid-column: auto; }
  .pc-to { padding-top: 132px; }
}