/* ————————————————————————————————————————————————————————————————
   Chad & Nadine · October 18 2026 · Villa Erba, Lake Como
   World: the invitation, alive — white cotton paper, sage ink,
   Cormorant Garamond caps + italic, calligraphic script,
   watercolor florals from the invitation artwork.
   ———————————————————————————————————————————————————————————————— */

:root {
  --paper: #fdfcf9;
  --paper-soft: #f7f6ef;
  --sage: #8a9a6b;        /* display / large only */
  --sage-deep: #6d7c50;   /* large text, buttons, accents */
  --leaf-ink: #3d452f;    /* body */
  --leaf-mid: #5a6644;    /* secondary text */
  --blush: #e7c3b1;
  --blush-deep: #b57e63;
  --hairline: #e0e3d2;
  --hairline-soft: #ecefe1;

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --script: "Great Vibes", "Segoe Script", cursive;

  --panel-w: clamp(350px, 37vw, 540px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--leaf-ink);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.155rem;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--sage-deep); color: #fff; }
input, textarea { caret-color: var(--sage-deep); }

:focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

a {
  color: var(--sage-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--sage-deep) 45%, transparent);
  transition: color 160ms var(--ease-out), text-decoration-color 160ms var(--ease-out);
}
a:hover { color: var(--leaf-ink); text-decoration-color: var(--sage-deep); }

img { max-width: 100%; display: block; }

/* Scrollbars carry the palette */
* { scrollbar-width: thin; scrollbar-color: #cbd3b6 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cbd3b6; border-radius: 99px; border: 3px solid var(--paper); }
*::-webkit-scrollbar-track { background: transparent; }

/* ————— Layout: fixed invitation + scrolling journey ————— */

.frame {
  display: grid;
  grid-template-columns: var(--panel-w) minmax(0, 1fr);
}

/* ————— The invitation panel ————— */

.invitation {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  border-right: 1px solid var(--hairline);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.8rem, 3.2vh, 3rem) clamp(1.6rem, 2.6vw, 3rem);
}

/* Watercolor band — the invitation's own florals, right edge, bleeding off */
.florals {
  position: absolute;
  inset: 0 0 0 auto;
  width: 46%;
  background-image: url("../img/invitation-florals.webp");
  background-repeat: no-repeat;
  background-size: auto 145%;
  background-position: right top;
  pointer-events: none;
}
.florals::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--paper) 0%, rgba(253, 252, 249, 0.82) 30%, rgba(253, 252, 249, 0) 68%),
    linear-gradient(0deg, var(--paper) 4%, rgba(253, 252, 249, 0) 30%),
    linear-gradient(180deg, rgba(253, 252, 249, 0.5) 0%, rgba(253, 252, 249, 0) 12%);
}

.invitation__inner {
  position: relative;
  z-index: 1;
  max-width: 30rem;
}

.script {
  font-family: var(--script);
  font-weight: 400;
  color: var(--sage);
  line-height: 1.05;
}

.invitation__please {
  font-size: clamp(2.7rem, 3.6vw, 3.7rem);
  margin: 0 0 0.55em;
  transform: rotate(-2.5deg);
  transform-origin: left center;
}

.invitation__for {
  font-style: italic;
  font-weight: 500;
  color: var(--leaf-mid);
  font-size: clamp(1.15rem, 1.35vw, 1.4rem);
  letter-spacing: 0.05em;
  margin: 0 0 0.5em;
}

.invitation__names {
  font-weight: 500;
  font-size: clamp(2.5rem, 3.4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin: 0 0 0.55em;
}
.invitation__names .amp {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sage);
}

.invitation__when,
.invitation__where {
  font-style: italic;
  font-size: clamp(1.15rem, 1.3vw, 1.35rem);
  letter-spacing: 0.045em;
  color: var(--leaf-mid);
  margin: 0.2em 0;
}

.invitation__rule {
  width: 4.2rem;
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 1.6rem 0 1.9rem;
}

.btn {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--sage-deep);
  border: 1px solid var(--sage-deep);
  border-radius: 2px;
  padding: 0.95em 2.1em 0.85em;
  transition: background 180ms var(--ease-out), box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out);
  box-shadow: 0 2px 10px rgba(109, 124, 80, 0.22);
}
.btn:hover {
  background: #5d6a43;
  color: #fff;
  box-shadow: 0 5px 18px rgba(109, 124, 80, 0.3);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); box-shadow: 0 1px 6px rgba(109, 124, 80, 0.25); }

.btn--ghost {
  color: var(--sage-deep);
  background: transparent;
  box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--sage-deep) 55%, transparent);
}
.btn--ghost:hover { background: rgba(109, 124, 80, 0.07); color: var(--leaf-ink); box-shadow: none; transform: none; }

/* Panel nav */
.panel-nav {
  margin-top: 2.1rem;
}
.panel-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2.2rem;
  max-width: 24rem;
}
.panel-nav a {
  display: inline-block;
  padding: 0.24em 0;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--leaf-mid);
}
.panel-nav a:hover { color: var(--sage-deep); }

.invitation__foot {
  position: absolute;
  left: clamp(1.6rem, 2.6vw, 3rem);
  bottom: 1.4rem;
  z-index: 1;
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.09em;
  color: color-mix(in srgb, var(--leaf-mid) 78%, transparent);
}

/* Load moment: the invitation settles like a wash drying */
@media (prefers-reduced-motion: no-preference) {
  html.js .invitation__inner > *,
  html.js .invitation__foot {
    animation: wash 1100ms var(--ease-out) both;
  }
  html.js .invitation__inner > *:nth-child(1) { animation-delay: 80ms; }
  html.js .invitation__inner > *:nth-child(2) { animation-delay: 170ms; }
  html.js .invitation__inner > *:nth-child(3) { animation-delay: 260ms; }
  html.js .invitation__inner > *:nth-child(4) { animation-delay: 350ms; }
  html.js .invitation__inner > *:nth-child(5) { animation-delay: 410ms; }
  html.js .invitation__inner > *:nth-child(6) { animation-delay: 470ms; }
  html.js .invitation__inner > *:nth-child(7) { animation-delay: 530ms; }
  html.js .invitation__inner > *:nth-child(8) { animation-delay: 590ms; }
  html.js .invitation__inner > *:nth-child(9) { animation-delay: 650ms; }
  html.js .invitation__foot { animation-delay: 800ms; }
  html.js .florals { animation: floralwash 1600ms var(--ease-out) both; }
}
@keyframes wash {
  from { opacity: 0; filter: blur(7px); transform: translateY(10px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes floralwash {
  from { opacity: 0; filter: blur(14px); }
  to { opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] .lightbox__mount { animation: wash 380ms var(--ease-out) both; }
}

/* Scroll reveals: visible by default; JS opts sections in */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(22px); }
  html.js .reveal.in {
    opacity: 1;
    transform: none;
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  }
}

/* ————— The journey (right column) ————— */

.journey {
  --jpad: clamp(1.4rem, 4.5vw, 5rem);
  min-width: 0;
  padding: 0 var(--jpad);
}

.section {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(3.4rem, 7vh, 5.6rem) 0 clamp(2.6rem, 5vh, 4rem);
  scroll-margin-top: 1.5rem;
}
.section--wide { max-width: 56rem; }
.section + .section { border-top: 1px solid var(--hairline-soft); }

.sprig {
  display: block;
  margin: 0 0 1.1rem;
  color: var(--blush-deep);
}

h2 {
  font-weight: 500;
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h2 .lead {
  display: block;
  font-family: var(--script);
  font-weight: 400;
  font-size: 0.82em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sage);
  margin: 0 0 0.05em 0.05em;
}

.section__intro {
  font-style: italic;
  font-size: 1.2rem;
  color: var(--leaf-mid);
  max-width: 38rem;
  margin: 0 0 2.1rem;
}

h3 {
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--leaf-ink);
  margin: 2.4rem 0 0.75rem;
}

p { margin: 0 0 1em; }

/* To-be-confirmed chip: unmistakable, still of the world */
.tbc {
  display: inline-block;
  font-style: italic;
  font-size: 0.86em;
  line-height: 1.25;
  color: var(--blush-deep);
  border: 1px dashed color-mix(in srgb, var(--blush-deep) 55%, transparent);
  border-radius: 99px;
  padding: 0.1em 0.7em 0.14em;
  white-space: nowrap;
  vertical-align: baseline;
}

/* ————— The weekend: two day plates ————— */

.day {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr) auto;
  grid-template-areas:
    "date head art"
    "date rows rows";
  gap: 0.6rem clamp(1.2rem, 3vw, 2.4rem);
  padding: 2.2rem 0;
}
.day__date { grid-area: date; }
.day__head { grid-area: head; min-width: 0; }
.day .rows { grid-area: rows; }

/* One print per day, toned in the invitation's ink: the boat, the villa */
.day__print {
  --tilt: -0.6deg;
  grid-area: art;
  align-self: start;
  width: clamp(10rem, 17vw, 12.5rem);
  margin: 0.2rem 0 0;
  transform: rotate(var(--tilt));
  transition: transform 240ms var(--ease-out);
}
.day__print:hover, .day__print:focus-within { transform: rotate(0deg) translateY(-4px); }
.day__print-link {
  display: block;
  padding: 0.45rem;
  background: #fff;
  border: 1px solid var(--hairline);
  box-shadow: 0 3px 16px rgba(61, 69, 47, 0.1);
  transition: box-shadow 240ms var(--ease-out);
}
.day__print:hover .day__print-link, .day__print:focus-within .day__print-link { box-shadow: 0 10px 28px rgba(61, 69, 47, 0.16); }
.day__print-link:focus-visible { outline-offset: 5px; }
.day__print img { display: block; width: 100%; height: auto; }
.day + .day { border-top: 1px solid var(--hairline-soft); }

.day__date {
  text-align: center;
  color: var(--sage-deep);
  border-right: 1px solid var(--hairline);
  padding-right: 1.1rem;
  align-self: start;
  position: sticky;
  top: 1.5rem;
}
.day__dow { display: block; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
.day__num { display: block; font-size: 2.7rem; font-weight: 500; line-height: 1.05; font-variant-numeric: lining-nums; }
.day__mon { display: block; font-style: italic; font-size: 1rem; letter-spacing: 0.12em; }

.day__title {
  font-weight: 500;
  font-size: 1.75rem;
  letter-spacing: 0.05em;
  margin: 0 0 0.15em;
  color: var(--leaf-ink);
}
.day__title .script { font-size: 1.25em; margin-right: 0.12em; }
.day__place {
  font-style: italic;
  color: var(--leaf-mid);
  font-size: 1.12rem;
  margin: 0 0 1.1rem;
}

/* Timetable-rank fact rows */
.rows { margin: 0.6rem 0 0.4rem; }
.row {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  padding: 0.44em 0;
}
.row + .row { border-top: 1px dotted var(--hairline); }
.row__label {
  flex: 0 0 9.9em;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--leaf-mid);
}
.row__value {
  flex: 1 1 auto;
  font-variant-numeric: lining-nums tabular-nums;
}
.row__value strong { font-weight: 600; }

/* ————— Venue ————— */

/* The map: a real map, printed in the invitation's ink; Google only on request */
.map { margin: 2rem 0 0; }
.map__frame {
  background: #fff;
  border: 1px solid var(--hairline);
  padding: 0.55rem;
  box-shadow: 0 3px 16px rgba(61, 69, 47, 0.08);
}
.map__canvas { position: relative; }
.map__img { display: block; width: 100%; height: auto; }
.map__canvas iframe { display: block; width: 100%; aspect-ratio: 1600 / 1058; border: 0; background: var(--paper-soft); }
.map__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -100%);
  width: 28px;
  pointer-events: none;
}
.map__pin::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--blush-deep);
  opacity: 0.55;
  transform: translateX(-50%);
}
.map__pin svg {
  display: block;
  width: 28px;
  height: 33px;
  fill: var(--blush-deep);
  stroke: var(--paper);
  stroke-width: 0.7;
  filter: drop-shadow(0 2px 3px rgba(61, 69, 47, 0.28));
}
.map__pin svg circle { fill: var(--paper); stroke: none; }
.map__pin-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.55rem;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leaf-ink);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  padding: 0.12em 0.55em 0.1em;
  border-radius: 2px;
}
.map__credit {
  font-style: italic;
  font-size: 0.85rem;
  color: var(--leaf-mid);
  text-align: right;
  padding: 0.5rem 0.2rem 0;
}
.map__credit a { color: inherit; }
.map__actions {
  display: flex;
  align-items: center;
  gap: 0.8rem 1rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}
.map__actions .btn { padding: 0.8em 1.5em 0.72em; font-size: 0.92rem; }
.map__note { flex-basis: 100%; font-style: italic; font-size: 0.95rem; color: var(--leaf-mid); }

/* ————— Weather ————— */

.weather {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  margin: 1.6rem 0 0.8rem;
}
.wx {
  border: 1px solid var(--hairline);
  background: #fff;
  padding: 1.4rem 1.5rem 1.2rem;
  box-shadow: 0 3px 16px rgba(61, 69, 47, 0.06);
}
.wx__day {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin: 0 0 0.15rem;
}
.wx__event { font-style: italic; color: var(--leaf-mid); font-size: 1rem; margin: 0 0 0.9rem; }
.wx__temps {
  font-size: 2rem;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--leaf-ink);
  margin: 0 0 0.15rem;
}
.wx__temps .lo { color: var(--leaf-mid); font-size: 0.72em; }
.wx__f { font-style: italic; font-size: 0.98rem; color: var(--leaf-mid); margin: 0 0 0.75rem; font-variant-numeric: lining-nums; }
.wx__meta { font-size: 0.98rem; color: var(--leaf-mid); margin: 0; font-variant-numeric: lining-nums; }
.weather-note {
  font-style: italic;
  font-size: 0.98rem;
  color: var(--leaf-mid);
}

/* ————— RSVP ————— */

/* The one date on this page with a hard edge */
.deadline {
  margin: 0 0 2rem;
  padding-left: 1.2rem;
  border-left: 1px solid var(--sage-deep);
  font-size: 1.12rem;
}
.deadline__by { display: block; color: var(--leaf-ink); }
.deadline__by strong { font-weight: 600; color: var(--sage-deep); }
.deadline__left {
  display: block;
  margin-top: 0.15rem;
  font-style: italic;
  font-size: 0.98rem;
  color: var(--leaf-mid);
  font-variant-numeric: lining-nums tabular-nums;
  min-height: 1.4em;
}
.deadline__left--closed { color: var(--blush-deep); }

.rsvp-note {
  font-style: italic;
  color: var(--leaf-mid);
  border-left: 1px solid var(--hairline);
  padding-left: 1.2rem;
  margin: 0 0 2rem;
}

.form {
  display: grid;
  gap: 1.45rem;
  max-width: 34rem;
}
.field label,
fieldset legend {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--leaf-mid);
  margin-bottom: 0.45rem;
  padding: 0;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field textarea {
  width: 100%;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.12rem;
  color: var(--leaf-ink);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.7em 0.85em;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.field input:hover, .field textarea:hover { border-color: #c7cdb2; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--sage-deep);
  box-shadow: 0 0 0 3px rgba(109, 124, 80, 0.14);
}
.field input::placeholder, .field textarea::placeholder { color: #8f987b; font-style: italic; }
.field textarea { resize: vertical; min-height: 5.2em; }

fieldset { border: 0; margin: 0; padding: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 0.7rem 1.6rem; }
.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 1.12rem;
  cursor: pointer;
}
.choice input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15em;
  height: 1.15em;
  margin: 0;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--sage-deep) 60%, transparent);
  border-radius: 50%;
  background: #fff;
  display: inline-grid;
  place-content: center;
  transition: border-color 160ms var(--ease-out);
}
.field label.choice { display: inline-flex; }
.choice input::before {
  content: "";
  width: 0.52em;
  height: 0.52em;
  border-radius: 50%;
  background: var(--sage-deep);
  transform: scale(0);
  transition: transform 180ms var(--ease-out);
}
.choice:hover input { border-color: var(--sage-deep); }
.choice input:checked { border-color: var(--sage-deep); }
.choice input:checked::before { transform: scale(1); }

.form__actions { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; margin-top: 0.3rem; }
.form button[type="submit"] { cursor: pointer; }
.form button[disabled] { opacity: 0.55; cursor: progress; transform: none; }

.form-status { min-height: 1.5em; font-style: italic; font-size: 1.05rem; margin: 0; }
.form-status--ok { color: var(--sage-deep); }
.form-status--err { color: #a3543a; }

/* ————— Stay / lists ————— */

.stay { margin: 0.4rem 0 0; }
.stay__item { padding: 1.35rem 0; }
.stay__item + .stay__item { border-top: 1px solid var(--hairline-soft); }
.stay__name { font-weight: 600; font-size: 1.28rem; letter-spacing: 0.03em; margin: 0 0 0.15rem; }
.stay__name .dist {
  font-weight: 500;
  font-style: italic;
  font-size: 0.85em;
  letter-spacing: 0.02em;
  color: var(--sage-deep);
  white-space: nowrap;
}
.stay__meta { font-size: 1.05rem; color: var(--leaf-mid); margin: 0 0 0.35rem; font-variant-numeric: lining-nums; }
.stay__note { margin: 0; }
.stay__book { margin: 0.9rem 0 0; }
.stay__book .btn { padding: 0.8em 1.5em 0.72em; font-size: 0.92rem; }

/* ————— Getting to Como: coupons ————— */

.coupon { padding: 1.8rem 0; }
.coupon + .coupon { border-top: 1px solid var(--hairline-soft); }
.coupon__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.6rem;
}
.coupon__icon { flex: 0 0 auto; color: var(--sage-deep); transform: translateY(0.18em); }
.coupon__title { font-weight: 600; font-size: 1.32rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; }
.coupon__verdict {
  font-style: italic;
  font-size: 1rem;
  color: var(--blush-deep);
  margin-left: auto;
  white-space: nowrap;
}

/* ————— Eat & Do ————— */

.plates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.4rem 2.6rem;
  margin-top: 0.4rem;
}
.plates h3 { margin-top: 1.2rem; }
.plates ul { list-style: none; margin: 0; padding: 0; }
.plates li { padding: 0.34em 0; border-bottom: 1px dotted var(--hairline); }
.plates li:last-child { border-bottom: 0; }
.plates .where { font-style: italic; color: var(--leaf-mid); font-size: 0.94em; }
/* Each place is a pin on the map: ink-coloured link, sage pin, underline only on hover */
.place {
  color: var(--leaf-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.place .pin { display: inline-block; margin-left: 0.4em; vertical-align: -0.08em; color: var(--sage-deep); opacity: 0.75; transition: opacity 160ms var(--ease-out); }
.place:hover { color: var(--sage-deep); border-color: color-mix(in srgb, var(--sage-deep) 45%, transparent); }
.place:hover .pin { opacity: 1; }

.do-list { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.do-list li { padding: 0.6em 0; border-bottom: 1px dotted var(--hairline); }
.do-list li:last-child { border-bottom: 0; }
.do-list strong { font-weight: 600; }
.do-list .aside { font-style: italic; color: var(--leaf-mid); }

/* ————— The couple: a deck of prints, fanned across the paper ————— */

.deck {
  --deck-h: clamp(190px, 30vh, 280px);
  --deck-overlap: 2.4rem;
  position: relative;
  margin: 0.4rem calc(-1 * var(--jpad)) 0;
}
.deck__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--jpad);
  overscroll-behavior-x: contain;
  padding: 1.4rem var(--jpad) 1.6rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--jpad), #000 calc(100% - var(--jpad)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--jpad), #000 calc(100% - var(--jpad)), transparent);
}
.deck__list {
  display: flex;
  align-items: center;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0 var(--deck-overlap) 0 0;
}
.deck__card {
  --tilt: -1.4deg;
  --dy: 0px;
  --i: 1;
  position: relative;
  z-index: calc(30 - var(--i));
  flex: 0 0 auto;
  height: var(--deck-h);
  margin-left: calc(-1 * var(--deck-overlap));
  scroll-snap-align: start;
  transform: rotate(var(--tilt)) translateY(var(--dy));
  transition: transform 240ms var(--ease-out);
}
.deck__card:first-child { margin-left: 0; }
.deck__card:nth-child(2n)   { --tilt: 1.2deg;  --dy: 7px; }
.deck__card:nth-child(3n)   { --tilt: 0.5deg;  --dy: -6px; }
.deck__card:nth-child(4n+1) { --tilt: -0.9deg; --dy: 4px; }
.deck__card:hover,
.deck__card:focus-within {
  z-index: 40;
  transform: rotate(0deg) translateY(-6px);
}
.deck__link {
  display: flex;
  height: 100%;
  padding: 0.45rem;
  background: #fff;
  border: 1px solid var(--hairline);
  box-shadow: 0 3px 16px rgba(61, 69, 47, 0.1);
  transition: box-shadow 240ms var(--ease-out);
}
.deck__card:hover .deck__link,
.deck__card:focus-within .deck__link { box-shadow: 0 10px 28px rgba(61, 69, 47, 0.16); }
.deck__link:focus-visible { outline-offset: 5px; }
.deck__link img { height: 100%; width: auto; display: block; }

.deck__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-content: center;
  color: var(--sage-deep);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--sage-deep) 55%, transparent);
  border-radius: 2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out), opacity 160ms var(--ease-out);
}
.deck__arrow--prev { left: 0.6rem; }
.deck__arrow--next { right: 0.6rem; }
.deck__arrow--prev svg { transform: scaleX(-1); }
.deck__arrow:hover { background: color-mix(in srgb, var(--sage-deep) 8%, var(--paper)); color: var(--leaf-ink); }
.deck__arrow[disabled] { opacity: 0.3; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .deck__arrow:not([hidden]) { display: grid; }
}
.deck__hint {
  font-style: italic;
  font-size: 0.98rem;
  color: var(--leaf-mid);
  margin: 0.2rem 0 0;
}

/* Lightbox: one print held up against the paper */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--leaf-ink);
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__mount {
  margin: 0;
  padding: 0.6rem;
  background: #fff;
  border: 1px solid var(--hairline);
  box-shadow: 0 12px 44px rgba(61, 69, 47, 0.16);
  max-width: min(92vw, 1100px);
  max-height: 86dvh;
  display: flex;
  pointer-events: none;
}
.lightbox__mount img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(86dvh - 1.2rem - 2px);
  object-fit: contain;
}
/* A keyframe rather than a transition: transitions can stall on an element that
   first paints inside a freshly opened <dialog>. */
.lightbox__mount img:not(.is-loaded) { opacity: 0; }
.lightbox__mount img.is-loaded { animation: printfade 240ms var(--ease-out) both; }
@keyframes printfade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--sage-deep);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--sage-deep) 55%, transparent);
  border-radius: 2px;
  cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.lightbox__close:hover, .lightbox__nav:hover { background: color-mix(in srgb, var(--sage-deep) 8%, var(--paper)); color: var(--leaf-ink); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--prev svg { transform: scaleX(-1); }
.lightbox__nav--next { right: 1rem; }
.lightbox__count {
  position: absolute;
  left: 0; right: 0; bottom: 1rem;
  margin: 0;
  text-align: center;
  font-style: italic;
  font-size: 0.98rem;
  color: var(--leaf-mid);
  font-variant-numeric: lining-nums tabular-nums;
}
html.lightbox-open { overflow: hidden; }

/* ————— FAQ ————— */

.faq { margin-top: 1rem; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 0.2rem;
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: 0.02em;
  transition: color 160ms var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--sage-deep); }
.faq summary .mark {
  flex: 0 0 auto;
  color: var(--sage);
  transform: translateY(0.12em);
  transition: transform 240ms var(--ease-out);
}
.faq details[open] summary .mark { transform: translateY(0.12em) rotate(45deg); }
.faq .answer { padding: 0 0.2rem 1.2rem 2.1rem; max-width: 40rem; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ————— Tips ————— */

.tips {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  columns: 2;
  column-gap: 2.8rem;
}
.tips li {
  break-inside: avoid;
  padding: 0.55em 0;
  border-bottom: 1px dotted var(--hairline);
}
.tips li strong { font-weight: 600; }

/* ————— Footer ————— */

.close {
  text-align: center;
  padding: clamp(4rem, 9vh, 6.5rem) 0 1.5rem;
  border-top: 1px solid var(--hairline-soft);
}
.close .script { font-size: clamp(2.6rem, 3.2vw, 3.4rem); margin: 0 0 0.35em; display: block; }
.close__names {
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin: 0 0 1.6rem;
}
.close__contact { font-size: 1.05rem; color: var(--leaf-mid); margin: 0 0 0.4rem; }
.close__meta {
  font-style: italic;
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--leaf-mid) 75%, transparent);
  margin: 2.6rem 0 0;
}
.close__credit {
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--leaf-mid) 75%, transparent);
  margin: 0.5rem 0 0;
  padding-bottom: 2.2rem;
}
.close__credit a { color: inherit; text-decoration-color: color-mix(in srgb, var(--leaf-mid) 35%, transparent); }
.close__credit a:hover { color: var(--sage-deep); }

/* ————— Mobile RSVP bar ————— */

.rsvp-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--hairline);
  transform: translateY(110%);
  transition: transform 380ms var(--ease-out);
}
.rsvp-bar.show { transform: none; }
.rsvp-bar__date { font-style: italic; font-size: 1rem; color: var(--leaf-mid); margin: 0; }
.rsvp-bar .btn { padding: 0.68em 1.5em 0.6em; font-size: 0.92rem; box-shadow: 0 2px 8px rgba(109,124,80,0.25); }

/* ————— Responsive ————— */

/* Short laptop viewports: the whole invitation must fit */
@media (min-width: 1060px) and (max-height: 980px) {
  .invitation { padding-top: 2.4rem; padding-bottom: 2rem; }
  .invitation__please { font-size: clamp(2.2rem, 3.4vh, 3rem); margin-bottom: 0.4em; }
  .invitation__names { font-size: clamp(2rem, 4.6vh, 3rem); }
  .invitation__for, .invitation__when, .invitation__where { font-size: clamp(1rem, 1.9vh, 1.3rem); }
  .invitation__rule { margin: 1rem 0 0.9rem; }
  .btn { padding: 0.8em 1.9em 0.72em; }
  .panel-nav { margin-top: 1.5rem; }
  .panel-nav a { font-size: 0.86rem; padding: 0.18em 0; }
}

/* Very short viewports: everything still fits */
@media (min-width: 1060px) and (max-height: 820px) {
  .invitation { padding-top: 1rem; padding-bottom: 1.6rem; }
  .invitation__please { font-size: 2rem; margin-bottom: 0.35em; }
  .invitation__names { font-size: 1.9rem; }
  .invitation__for, .invitation__when, .invitation__where { font-size: 1rem; }
  .invitation__rule { margin: 0.8rem 0 0.7rem; }
  .panel-nav { margin-top: 1.2rem; }
  .panel-nav a { font-size: 0.8rem; letter-spacing: 0.14em; }
  .invitation__foot { display: none; }
}

@media (max-width: 1059px) {
  .frame { grid-template-columns: 1fr; }

  .invitation {
    position: relative;
    height: auto;
    min-height: 100svh;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    justify-content: center;
    padding: 4.5rem clamp(1.4rem, 6vw, 3rem) 5.5rem;
  }
  .florals {
    width: 58%;
    background-size: auto 155%;
    background-position: right top;
  }
  .florals::before {
    background:
      linear-gradient(90deg, var(--paper) 0%, rgba(253, 252, 249, 0.85) 26%, rgba(253, 252, 249, 0) 64%),
      linear-gradient(0deg, var(--paper) 6%, rgba(253, 252, 249, 0) 34%),
      linear-gradient(180deg, rgba(253, 252, 249, 0.5) 0%, rgba(253, 252, 249, 0) 12%);
  }
  .invitation__inner { max-width: 34rem; }
  .panel-nav ul { columns: 2; }
  .invitation__foot { position: static; margin-top: 3rem; }

  .rsvp-bar { display: flex; }

  .section { scroll-margin-top: 0.8rem; }
}

@media (max-width: 640px) {
  body { font-size: 1.09rem; }

  .invitation { padding-top: 3.6rem; }
  .invitation__please { font-size: 2.6rem; }
  .invitation__names { font-size: 2.15rem; letter-spacing: 0.11em; }
  .florals { width: 70%; background-size: auto 150%; background-position: right top; opacity: 0.92; }

  .day {
    grid-template-columns: 3.6rem minmax(0, 1fr);
    grid-template-areas:
      "date art"
      "date head"
      "date rows";
    gap: 0.4rem 1rem;
  }
  .day__date { padding-right: 0.7rem; position: static; }
  .day__print { width: 10rem; margin: 0.2rem 0 0.6rem; }
  .day__num { font-size: 2.1rem; }

  .deck { --deck-h: clamp(170px, 26vh, 220px); --deck-overlap: 1.6rem; }
  .map__pin { width: 22px; }
  .map__pin svg { width: 22px; height: 26px; }
  .map__pin-label { font-size: 0.72rem; margin-top: 0.4rem; }
  .deck__scroller { padding-top: 1rem; padding-bottom: 1.2rem; }
  .lightbox__close { top: 0.7rem; right: 0.7rem; }
  .lightbox__nav--prev { left: 0.5rem; }
  .lightbox__nav--next { right: 0.5rem; }
  .lightbox__mount { max-width: 94vw; max-height: 78dvh; }
  .lightbox__mount img { max-height: calc(78dvh - 1.2rem - 2px); }

  .weather { grid-template-columns: 1fr; }
  .tips { columns: 1; }
  .row { flex-wrap: wrap; }
  .row__label { min-width: 0; flex-basis: 100%; }
  .faq .answer { padding-left: 0.2rem; }

  .journey { padding-bottom: 4.5rem; }
  .close__credit { padding-bottom: 4.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rsvp-bar { transition: none; }
  .deck__card, .deck__link, .day__print, .day__print-link { transition: none; }
  .lightbox__mount img.is-loaded { animation: none; }
}

@media print {
  .invitation { position: static; height: auto; }
  .rsvp-bar, .panel-nav, .deck__arrow, .lightbox { display: none; }
  .frame { display: block; }
  .deck__scroller { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .deck__list { flex-wrap: wrap; width: auto; gap: 1rem; }
  .deck__card { margin-left: 0; transform: none; }
}