/* Sean & Meagan, June 19, 2027. The save-the-date, unfolded. */

:root {
  --paper: #f5f1e8;
  --paper-deep: #ece6d9;
  --card: #fcfaf5;
  --ink: #1c211d;
  --ink-soft: #444940;
  --sage: #57604f;
  --pine: #1b2921;
  --pine-hi: #2a3d31;
  --pine-ink: #f2eee3;
  --pine-soft: #bcc4b1;
  --amber: #d6b878;
  --focus: #85642a;
  --rule: rgba(28, 33, 29, 0.85);
  --hair: rgba(60, 52, 36, 0.2);

  /* Champagne gold: a deep tone for small text on ivory, a mid tone for hairlines and ornaments,
     a light tone on velvet, and a foil gradient for the few things that should catch the light. */
  --gold-ink: #85642a;
  --gold: #b08a42;
  --gold-hair: rgba(176, 138, 66, 0.55);
  --gold-light: #dcc28a;
  --foil: linear-gradient(102deg, #8a672b 0%, #c7a256 20%, #f2e1a9 36%, #c29a4e 52%, #8c6a2c 68%, #d9ba70 86%, #a47f3a 100%);
  /* Cotton paper grain, blended soft-light so it reads on ivory and on velvet alike. */
  --grain: url("../img/paper-grain.webp");

  /* Newsreader carries headings and reading text (its optical sizes turn hairline at display
     sizes and sturdy at text sizes). Imperial Script is for the names. Jost is only for tracked caps. */
  --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --text: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --script: "Imperial Script", "Snell Roundhand", "Apple Chancery", cursive;
  --hand: "Nothing You Could Do", "Bradley Hand", "Segoe Script", cursive;
  --sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;
  --space-7: 9rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/newsreader-roman.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("../fonts/newsreader-italic.woff2") format("woff2"); }
@font-face { font-family: "Imperial Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/imperial-script.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("../fonts/jost.woff2") format("woff2"); }
@font-face { font-family: "Nothing You Could Do"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/nothing-you-could-do.woff2") format("woff2"); }

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper) var(--grain) 0 0 / 512px;
  background-blend-mode: soft-light;
  color: var(--ink);
  font-family: var(--text);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.on-pine :focus-visible { outline-color: var(--amber); }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--ink); color: var(--paper); padding: 0.75rem 1rem;
  font-family: var(--sans); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.75rem;
}
.skip:focus { top: 1rem; }

/* ---------- Type primitives ---------- */

.display {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.018em;
  font-variant-numeric: oldstyle-nums;
  text-wrap: balance;
  margin: 0;
}

.caps {
  font-family: var(--sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.8125rem;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
}

.wide-caps { letter-spacing: 0.42em; }

.rule {
  display: block;
  width: 6rem;
  height: 0;
  border: 0;
  border-top: 2px solid var(--rule);
  margin: 0;
}

.prose { max-width: 62ch; }
.prose p { margin: 0 0 var(--space-2); }

/* ---------- Buttons ---------- */
/* Evergreen, with a gold hairline set just inside the edge like a foil-stamped border. */

.btn {
  --btn-bg: var(--pine);
  --btn-fg: var(--pine-ink);
  --btn-line: rgba(214, 184, 120, 0.8);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.95rem 1.9rem 0.9rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 0;
  box-shadow: inset 0 0 0 3px var(--btn-bg), inset 0 0 0 4px var(--btn-line);
  font: 400 0.8125rem/1 var(--sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.btn:hover { --btn-bg: var(--pine-hi); text-decoration: none; }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.55; cursor: progress; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--gold); box-shadow: none; }
.btn--ghost:hover { background: var(--pine); color: var(--pine-ink); border-color: var(--pine); }

.on-pine .btn { --btn-bg: var(--pine-ink); --btn-fg: var(--pine); --btn-line: rgba(176, 138, 66, 0.75); }
.on-pine .btn:hover { --btn-bg: #ffffff; }
.on-pine .btn--ghost { background: transparent; color: var(--pine-ink); border-color: var(--gold-light); }
.on-pine .btn--ghost:hover { background: var(--pine-ink); color: var(--pine); border-color: var(--pine-ink); }

.link-caps {
  font: 400 0.8125rem/1 var(--sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--gold);
}
.link-caps:hover { border-bottom-width: 2px; }

/* A gold divider: two tapering strokes and a lozenge. */
.flourish { display: block; width: 13rem; max-width: 70%; height: auto; margin: 0 auto; fill: var(--gold); overflow: visible; }
.flourish .flourish__open { fill: none; stroke: var(--gold); stroke-width: 1; }
.on-pine .flourish, .velvet .flourish, .stay-cover .flourish { fill: var(--gold-light); }
.on-pine .flourish .flourish__open, .velvet .flourish .flourish__open, .stay-cover .flourish .flourish__open { stroke: var(--gold-light); }

/* ---------- Cover: the main site landing screen ---------- */
/* A painting of the valley fills the screen. Everything typeset sits in its sky, in ink with a
   touch of gold, so the forest, river and wildflowers below are left alone. */

.cover {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  justify-items: center;
  padding: max(1.25rem, env(safe-area-inset-top)) clamp(1.25rem, 5vw, 4rem) max(2rem, env(safe-area-inset-bottom));
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  background: #b4c8dc;
}
.cover picture { display: contents; }
.cover__photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
/* Morning mist drawn across the sky behind the type, so every line reads against the mountains. */
.cover::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(75% 42% at 50% 24%, rgba(245, 241, 232, 0.82) 0%, rgba(245, 241, 232, 0.62) 45%, rgba(245, 241, 232, 0) 100%),
    linear-gradient(180deg, rgba(245, 241, 232, 0.35), rgba(245, 241, 232, 0) 55%);
}
.cover__nav, .cover__kicker, .cover__line {
  text-shadow: 0 0 1px rgba(245, 241, 232, 0.9), 0 0 10px rgba(245, 241, 232, 0.95), 0 0 24px rgba(245, 241, 232, 0.85);
}

.cover__nav { grid-row: 1; justify-self: stretch; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.6875rem; letter-spacing: 0.22em; }
.cover__nav a { color: var(--ink); text-decoration: none; padding: 0.5rem 0; }
.cover__nav a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.5em; }

.cover__title { grid-row: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(1.25rem, 5svh, 3.5rem); }
.cover__kicker { margin: 0 0 0.35rem; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.42em; color: var(--ink); }
.cover__names {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  font-size: clamp(3rem, 15.5vw, 8.5rem);
  white-space: nowrap;
  text-shadow: 0 0 22px rgba(245, 241, 232, 0.8);
}
.cover__names span { display: inline-block; }
.cover__amp {
  font-size: 0.8em;
  padding: 0.12em 0.4em; margin: -0.12em -0.4em;
  background: var(--foil);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 10px rgba(245, 241, 232, 0.9));
}
.cover__flourish { width: min(15rem, 64vw); margin: 0.55rem auto 0.85rem; }
.cover__line {
  margin: 0 auto;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink);
}
.cover__line > span:last-child { display: block; margin-top: 0.2rem; }
.cover__sep { display: none; }

.cover :focus-visible { outline-color: var(--ink); }

@media (min-width: 1024px) {
  .cover__nav { justify-content: flex-end; gap: 0.5rem 2.25rem; font-size: 0.75rem; letter-spacing: 0.3em; }
  .cover__title { padding-top: clamp(0.5rem, 3svh, 2.5rem); }
  .cover__kicker { font-size: 0.75rem; }
  .cover__names { font-size: clamp(6rem, 9vw, 8.5rem); }
  .cover__flourish { margin: 1.25rem auto 1rem; }
  .cover__line { font-size: 0.875rem; letter-spacing: 0.26em; }
  .cover__line > span:last-child { display: inline; margin: 0; }
  .cover__sep { display: inline; margin: 0 0.5em; color: var(--gold); }
}

/* ---------- Motion ----------
   Only active when <html> has the "motion" class (JavaScript on, reduced motion off). */

:root {
  --ease-write: cubic-bezier(0.45, 0.05, 0.25, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Cover: photo settles, names write themselves in, then the details float up. */
html.motion .cover__photo { transform: scale(1.08); filter: blur(8px) brightness(1.05); transition: transform 2.6s var(--ease-soft), filter 1.8s var(--ease-soft); }
html.motion .cover.is-revealed .cover__photo { transform: none; filter: none; }

html.motion .cover__names span,
html.motion [data-reveal="ink"] {
  /* Padding gives the script's swashes room inside the mask. */
  padding: 0.12em 0.4em;
  margin: -0.12em -0.4em;
  -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
  mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}
html.motion .cover.is-revealed .cover__names span { animation: write 1.25s var(--ease-write) forwards; }
html.motion .cover.is-revealed .cover__names span:nth-child(1) { animation-delay: 0.35s; animation-duration: 1.5s; }
html.motion .cover.is-revealed .cover__names span:nth-child(2) { animation-delay: 1.6s; animation-duration: 0.6s; }
html.motion .cover.is-revealed .cover__names span:nth-child(3) { animation-delay: 2s; animation-duration: 1.25s; }
html.motion [data-reveal="ink"].is-in { animation: write 1.3s var(--ease-write) forwards; }
html.motion .countdown__title, html.motion .footer__names { margin-inline: auto; }
html.motion .countdown__title { margin-bottom: 0.13rem; }
@keyframes write { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }

html.motion .cover__nav,
html.motion .cover__kicker,
html.motion .cover__line { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease-soft), transform 1.2s var(--ease-soft); }
html.motion .cover.is-revealed .cover__kicker { opacity: 1; transform: none; transition-delay: 0.1s; }
html.motion .cover.is-revealed .cover__nav { opacity: 1; transform: none; transition-delay: 3.1s; }
html.motion .cover.is-revealed .cover__line { opacity: 1; transform: none; transition-delay: 3.2s; }
/* The gold flourish draws outward from its lozenge once the names are written. */
html.motion .cover__flourish { opacity: 0; transform: scaleX(0.2); transition: opacity 0.9s ease, transform 1.4s var(--ease-soft); }
html.motion .cover.is-revealed .cover__flourish { opacity: 1; transform: none; transition-delay: 2.9s; }

/* Generic reveal: float up out of a soft blur. */
html.motion [data-reveal=""] {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity 0.9s var(--ease-soft), transform 1.1s var(--ease-soft), filter 0.9s var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 110ms);
}
html.motion [data-reveal=""].is-in { opacity: 1; transform: none; filter: none; }


/* Kids note unfurls from the center like a ribbon. */
html.motion [data-reveal="unfurl"] { clip-path: inset(-9rem 50% 0 50%); transition: clip-path 1.2s var(--ease-soft); }
html.motion [data-reveal="unfurl"] > * { opacity: 0; transform: translateY(10px); transition: opacity 0.8s var(--ease-soft) 0.6s, transform 0.9s var(--ease-soft) 0.6s; }
html.motion [data-reveal="unfurl"].is-in { clip-path: inset(-9rem 0 0 0); }
html.motion [data-reveal="unfurl"].is-in > * { opacity: 1; transform: none; }
html.motion [data-reveal="unfurl"].is-in > :last-child { transition-delay: 0.8s; }

/* Reply card slides up as if pulled from the envelope. */
html.motion [data-reveal="card"] {
  opacity: 0;
  transform: translateY(90px) rotate(-2.5deg) scale(0.96);
  transition: opacity 0.8s var(--ease-soft), transform 1.4s var(--ease-soft), box-shadow 1.4s var(--ease-soft);
}
html.motion [data-reveal="card"].is-in { opacity: 1; transform: none; }

/* Pine sprigs draw themselves: stem first, then needles. */
.sprig { display: block; width: 7.5rem; height: auto; margin: var(--space-3) auto 0; overflow: visible; }
.sprig path { fill: none; stroke: var(--gold); stroke-width: 1.1; stroke-linecap: round; }
.sprig__stem { stroke-width: 1.4; }
.sprig--center { margin: 0 auto var(--space-3); }
.on-pine .sprig path { stroke: var(--gold-light); }
html.motion .sprig path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.motion .sprig.is-in .sprig__stem { transition: stroke-dashoffset 1s var(--ease-write) 0.2s; stroke-dashoffset: 0; }
html.motion .sprig.is-in .sprig__needles { transition: stroke-dashoffset 1.8s ease-out 0.7s; stroke-dashoffset: 0; }

/* ---------- Envelope intro ----------
   An ivory envelope floating over the valley at dusk, closed with evergreen wax whose pines are
   touched with gold leaf, and a passcode line beneath it. The right passcode lifts the seal, the
   flap opens on an evergreen lining, the card slides out, comes forward and grows until it fills
   the screen, then gives way to the cover. */

html.envelope-on, html.envelope-on body { overflow: hidden; }
.envelope { display: none; }
html.show-envelope .envelope {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 50;
  overflow: hidden;
  --ar: 1.42;
  --w: min(86vw, 600px, 60vh * 1.42);
  --env: #f3eee3;
  --env-ink: #26352c;
  --lining: #22382c;
  --liner: url("../img/scene-valley.webp");
  --backdrop: url("../img/scene-valley.webp");
  background: #1d2a30 var(--backdrop) 50% 100% / cover no-repeat;
  color: var(--env-ink);
  transition: opacity 0.9s ease;
}
@media (max-width: 820px) {
  html.show-envelope .envelope { --liner: url("../img/scene-valley-tall.webp"); --backdrop: url("../img/scene-valley-tall.webp"); }
}
@media (max-aspect-ratio: 4/5) {
  html.show-envelope .envelope { --ar: 0.72; --w: min(84vw, 430px, 56vh * 0.72); }
}
/* Dusk over the valley, and a soft pool of light where the envelope rests. */
.envelope::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 46%, rgba(255, 236, 205, 0.16), rgba(255, 236, 205, 0) 70%),
    linear-gradient(180deg, rgba(16, 26, 34, 0.72) 0%, rgba(22, 34, 40, 0.42) 48%, rgba(14, 22, 18, 0.66) 100%);
}

.envelope__float {
  --tip: 54%;
  position: relative; z-index: 1;
  width: var(--w); aspect-ratio: var(--ar);
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (max-aspect-ratio: 4/5) {
  .envelope__float { --tip: 41%; }
}
html.motion .envelope__float { animation: env-arrive 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) both, env-sway 7s ease-in-out 1.5s infinite; }
@keyframes env-arrive { from { opacity: 0; transform: translateY(-36px) rotate(-5deg) scale(0.95); } }
@keyframes env-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(-0.3deg) translateY(-5px); } }

.envelope__stage { position: absolute; inset: 0; perspective: 1800px; cursor: pointer; }
.envelope__stage > * { position: absolute; }

.envelope__shadow { inset: 3% 2% -2%; background: rgba(5, 10, 8, 0.6); filter: blur(24px); transform: translateY(16px); border-radius: 10px; transition: opacity 0.8s ease; }

/* The back panel, lined in evergreen paper. */
.envelope__back { inset: 0; z-index: 1; border-radius: 2px; background: #e6e0d2 var(--grain) 0 0 / 512px; background-blend-mode: soft-light; overflow: hidden; }
.envelope__liner {
  position: absolute; left: 3.5%; right: 3.5%; top: 2.5%; height: calc(var(--tip) + 4%);
  background: var(--lining) var(--grain) 0 0 / 512px;
  background-blend-mode: soft-light;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}
.envelope__back::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 12px 18px -10px rgba(0, 0, 0, 0.4); }

/* The card inside: ivory stock, a double gold rule, the valley in an arch window. */
.envelope__card {
  z-index: 2;
  left: 5%; right: 5%; top: 5%; bottom: 4%;
  container-type: size;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.4cqmin;
  padding: 8cqmin;
  text-align: center;
  background: #fcfaf4 var(--grain) 0 0 / 512px;
  background-blend-mode: soft-light;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.18);
  transform: translate(0, 0) translateY(0) scale(1);
  transition: transform 1.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 1.3s ease;
}
.envelope__card::before, .envelope__card::after { content: ""; position: absolute; pointer-events: none; }
.envelope__card::before { inset: 3.2cqmin; border: 1px solid rgba(176, 138, 66, 0.75); }
.envelope__card::after { inset: 4.4cqmin; border: 1px solid rgba(176, 138, 66, 0.35); }
.envelope__card-art {
  height: 38cqh; aspect-ratio: 4 / 5; max-width: 60cqw;
  border-radius: 999px 999px 2px 2px;
  background: var(--liner) 50% 70% / cover;
  box-shadow: 0 0 0 1.2cqmin #fcfaf4, 0 0 0 calc(1.2cqmin + 1px) rgba(176, 138, 66, 0.8);
  margin-bottom: 2cqmin;
}
.envelope__card-kicker, .envelope__card-date {
  margin: 0; font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.32em;
  font-size: max(9px, 2.6cqmin); color: #85642a;
}
.envelope__card-names { margin: 0; font-family: var(--script); font-size: 11cqmin; line-height: 1.05; color: var(--env-ink); white-space: nowrap; }
.envelope__card-names span { color: #a8823d; font-size: 0.8em; }

/* The front pocket: side folds under the bottom fold, each catching the light a little differently. */
.envelope__pocket { inset: 0; z-index: 3; pointer-events: none; }
.envelope__pocket > div { position: absolute; inset: 0; }
.envelope__lift { filter: drop-shadow(0 -1px 1.5px rgba(48, 36, 20, 0.16)) drop-shadow(0 -4px 8px rgba(48, 36, 20, 0.07)); }
.envelope__sides, .envelope__bottom { position: absolute; inset: 0; border-radius: 2px; }
.envelope__sides {
  background-color: #ebe5d8;
  background-image: var(--grain), linear-gradient(90deg, rgba(120, 96, 60, 0.13), transparent 24%, transparent 76%, rgba(120, 96, 60, 0.13));
  background-size: 512px, 100% 100%;
  background-blend-mode: soft-light, normal;
  clip-path: polygon(0 0, 50% calc(var(--tip) - 5%), 100% 0, 100% 100%, 0 100%);
}
.envelope__bottom {
  background-color: #f3eee4;
  background-image: var(--grain), linear-gradient(0deg, rgba(255, 255, 255, 0.35), rgba(120, 96, 60, 0.06));
  background-size: 512px, 100% 100%;
  background-blend-mode: soft-light, normal;
  clip-path: polygon(0 100%, 1% 99%, 47% calc(var(--tip) + 6%), 50% calc(var(--tip) + 5%), 53% calc(var(--tip) + 6%), 99% 99%, 100% 100%);
}

/* The flap: ivory outside, evergreen lining inside. */
.envelope__flap-shadow, .envelope__flap { left: 0; right: 0; top: 0; height: var(--tip); }
.envelope__flap-shadow { z-index: 4; filter: drop-shadow(0 3px 3px rgba(48, 36, 20, 0.22)) drop-shadow(0 8px 12px rgba(48, 36, 20, 0.1)); transition: opacity 0.25s ease; }
.envelope__flap-shadow i { position: absolute; inset: 0; background: var(--env); clip-path: polygon(0 0, 100% 0, 54% 96%, 50% 100%, 46% 96%); }
.envelope__flap { z-index: 5; transform-origin: 50% 0; transform-style: preserve-3d; }
.envelope__flap > div { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.envelope__flap-out {
  background-color: #f6f1e7;
  background-image: var(--grain), linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%, rgba(120, 96, 60, 0.08));
  background-size: 512px, 100% 100%;
  background-blend-mode: soft-light, normal;
  clip-path: polygon(0 0, 100% 0, 54% 96%, 50% 100%, 46% 96%);
}
.envelope__flap-in { transform: rotateX(180deg); background: #e6e0d2; clip-path: polygon(0 100%, 100% 100%, 54% 4%, 50% 0, 46% 4%); }
.envelope__flap-in::before {
  content: ""; position: absolute; left: 3%; right: 3%; bottom: 0; top: 4%;
  background: var(--lining) var(--grain) 0 0 / 512px;
  background-blend-mode: soft-light;
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
}

.envelope__seal {
  position: absolute; z-index: 8;
  left: 50%; top: calc(var(--tip) - 0.7%);
  width: clamp(5.25rem, 25%, 8rem); aspect-ratio: 1;
  margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 4px rgba(20, 16, 8, 0.45)) drop-shadow(0 10px 12px rgba(20, 16, 8, 0.2));
  transition: transform 0.5s cubic-bezier(0.5, -0.5, 0.5, 1.5), opacity 0.45s ease;
  -webkit-tap-highlight-color: transparent;
}
.envelope__seal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.envelope__seal:hover, .envelope__seal:focus-visible { transform: translate(-50%, -50%) scale(1.06) rotate(-4deg); }
.envelope__seal:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 6px; }

/* The passcode, written beneath the envelope like an address line. */
.envelope__gate {
  position: absolute; z-index: 3; left: 0; right: 0;
  top: calc(50% + var(--w) / var(--ar) / 2 + clamp(1.5rem, 4.5vh, 2.75rem));
  display: grid; justify-items: center; gap: 0.55rem;
  margin: 0; padding: 0 16px;
  transition: opacity 0.4s ease;
}
html.motion .envelope__gate { animation: gate-in 1s var(--ease-soft) 1.1s both; }
@keyframes gate-in { from { opacity: 0; transform: translateY(8px); } }
.envelope__field {
  display: flex; align-items: center;
  width: min(17.5rem, 100%);
  border-bottom: 1px solid rgba(220, 194, 138, 0.75);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.envelope__field:focus-within { border-bottom-color: var(--gold-light); box-shadow: 0 1px 0 var(--gold-light); }
.envelope__field input {
  flex: 1; min-width: 0;
  margin: 0; padding: 0.75rem 0 0.65rem 2.75rem;
  background: transparent; border: 0; border-radius: 0;
  font: 400 16px/1.2 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; text-align: center;
  color: var(--pine-ink);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  -webkit-appearance: none; appearance: none;
}
.envelope__field input::placeholder { color: rgba(242, 238, 227, 0.8); }
.envelope__field input:focus { outline: none; }
.envelope__field button {
  flex: none; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; margin: 0; padding: 0;
  border: 0; background: none; color: var(--gold-light); cursor: pointer;
}
.envelope__field button svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease-soft); }
.envelope__field button:hover svg, .envelope__field button:focus-visible svg { transform: translateX(3px); }
.envelope__field button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.envelope__gate[aria-busy="true"] .envelope__field { opacity: 0.6; }
.envelope__status { min-height: 1.4em; max-width: 22rem; margin: 0; text-align: center; font: italic 400 1rem/1.4 var(--text); color: #f2dfb8; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); }
.envelope__gate.is-wrong .envelope__field { animation: gate-nudge 0.45s ease; }
@keyframes gate-nudge { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* Opening (timed from motion.js):
   is-opening   the seal lifts away and the passcode line fades
   is-open      the flap swings open on the evergreen lining
   is-rising    the card slides up out of the pocket as the envelope drops a little
   is-front     the card comes in front of the envelope
   is-expanding the card grows to fill the screen (transform set in JS)
   is-leaving   everything fades to the cover */
.envelope.is-opening .envelope__float { animation: none; }
.envelope.is-opening .envelope__stage { cursor: default; }
.envelope.is-opening .envelope__seal { transform: translate(-50%, -150%) scale(0.75) rotate(-20deg); opacity: 0; pointer-events: none; }
.envelope.is-opening .envelope__gate { opacity: 0; pointer-events: none; animation: none; }

.envelope.is-open .envelope__flap-shadow { opacity: 0; }
.envelope.is-open .envelope__flap { animation: flap-open 1.1s cubic-bezier(0.5, 0, 0.25, 1) forwards; }
@keyframes flap-open {
  0% { transform: rotateX(0deg); z-index: 5; }
  48% { z-index: 5; }
  52% { z-index: 0; }
  100% { transform: rotateX(180deg); z-index: 0; }
}

.envelope.is-rising .envelope__float { transform: translateY(22%); }
.envelope.is-rising .envelope__card { transform: translate(0, 0) translateY(-64%) scale(1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 24px 40px rgba(0, 0, 0, 0.3); }
.envelope.is-front .envelope__card { z-index: 9; }
.envelope.is-expanding .envelope__card { transition: transform 1.25s cubic-bezier(0.6, 0, 0.2, 1), box-shadow 1.25s ease; box-shadow: none; }
.envelope.is-expanding .envelope__back,
.envelope.is-expanding .envelope__pocket,
.envelope.is-expanding .envelope__flap,
.envelope.is-expanding .envelope__shadow { opacity: 0; transition: opacity 0.8s ease 0.15s; }
.envelope.is-leaving { opacity: 0; pointer-events: none; }

/* ---------- Countdown ---------- */

/* Framed in painted wildflowers: days large, the smaller units in a row beneath. */
.countdown {
  position: relative;
  --frame: min(100%, 34rem);
  width: var(--frame);
  aspect-ratio: 4 / 5;
  margin: var(--space-6) auto var(--space-3);
  padding: 0 19%;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
  background: url("../img/flora-wreath.webp") center / 100% 100% no-repeat;
}
.countdown__title { margin: 0 auto 0.25rem; font-family: var(--script); font-weight: 400; font-size: clamp(2.3rem, 10vw, 3.25rem); line-height: 1.15; width: fit-content; white-space: nowrap; }
.countdown__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 auto; width: 92%; }
.countdown__unit { padding: 0.9rem 0.1rem 0; }
.countdown__unit:first-child { grid-column: 1 / -1; padding: 0 0 1rem; border-bottom: 1px solid var(--gold-hair); }
.countdown__num { display: block; font-family: var(--display); font-weight: 300; font-size: clamp(1.4rem, 5.6vw, 2.25rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.countdown__unit:first-child .countdown__num { font-size: clamp(4rem, 19vw, 5.75rem); line-height: 0.95; }
.countdown__label { display: block; margin-top: 0.5rem; font-size: 0.5625rem; letter-spacing: 0.18em; color: var(--gold-ink); }
.countdown__done { font-family: var(--script); font-size: clamp(2.5rem, 11vw, 4rem); margin: 0; }
.countdown__num.is-ticking { animation: tick 0.5s var(--ease-soft); }
@keyframes tick { from { transform: translateY(-35%); opacity: 0.2; filter: blur(2px); } to { transform: none; opacity: 1; filter: none; } }

/* ---------- Painted scenes ----------
   Original paintings of the valley, and Swiftwater painted from the photo. The rough top and
   bottom edges are a tiling mask, so they survive any crop. The velvet bands share the same
   torn edge, so every colour field meets the paper like a painted card. */

.scene { margin: 0; line-height: 0; }
.scene img { width: 100%; height: clamp(15rem, 42vw, 38rem); object-fit: cover; object-position: 50% 78%; }
.scene, .weekend-band, .rsvp, .house, .cover {
  --edge: 30px;
  -webkit-mask:
    url("../img/edge-top.png") top left / auto var(--edge) repeat-x,
    url("../img/edge-bottom.png") bottom left / auto var(--edge) repeat-x,
    linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--edge) + 2px) no-repeat;
  mask:
    url("../img/edge-top.png") top left / auto var(--edge) repeat-x,
    url("../img/edge-bottom.png") bottom left / auto var(--edge) repeat-x,
    linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--edge) + 2px) no-repeat;
}
/* Flush edges where a scene meets the edge of the page. */
.cover {
  -webkit-mask: url("../img/edge-bottom.png") bottom left / auto var(--edge) repeat-x, linear-gradient(#000, #000) top / 100% calc(100% - var(--edge) + 1px) no-repeat;
  mask: url("../img/edge-bottom.png") bottom left / auto var(--edge) repeat-x, linear-gradient(#000, #000) top / 100% calc(100% - var(--edge) + 1px) no-repeat;
}
.scene--close {
  -webkit-mask: url("../img/edge-top.png") top left / auto var(--edge) repeat-x, linear-gradient(#000, #000) bottom / 100% calc(100% - var(--edge) + 1px) no-repeat;
  mask: url("../img/edge-top.png") top left / auto var(--edge) repeat-x, linear-gradient(#000, #000) bottom / 100% calc(100% - var(--edge) + 1px) no-repeat;
}
@media (max-width: 720px) { .scene, .weekend-band, .rsvp, .house, .cover { --edge: 20px; } }

/* ---------- Velvet ----------
   Deep evergreen with a soft overhead sheen and the paper grain worked in, like a velvet box. */

.velvet, .on-pine {
  background-color: var(--pine);
  background-image:
    var(--grain),
    radial-gradient(120% 55% at 50% 0%, rgba(214, 184, 120, 0.1), rgba(214, 184, 120, 0) 70%),
    radial-gradient(130% 70% at 50% 105%, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0) 70%);
  background-size: 512px, 100% 100%, 100% 100%;
  background-blend-mode: soft-light, normal, normal;
}
.on-pine { color: var(--pine-ink); }
.on-pine .section__lede, .on-pine .muted { color: var(--pine-soft); }
.on-pine .section__kicker, .velvet .section__kicker { color: var(--gold-light); }
.on-pine :focus-visible { outline-color: var(--amber); }

/* The gold frame: a double line with notched corners and a bead at each corner. */
.frame-gold::before {
  content: ""; position: absolute; pointer-events: none;
  border: 30px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23d6b878'%3E%3Cpath stroke-width='1.3' d='M22 4H98A18 18 0 0 0 116 22V98A18 18 0 0 0 98 116H22A18 18 0 0 0 4 98V22A18 18 0 0 0 22 4Z'/%3E%3Cpath stroke-width='.7' d='M26 11H94A15 15 0 0 0 109 26V94A15 15 0 0 0 94 109H26A15 15 0 0 0 11 94V26A15 15 0 0 0 26 11Z'/%3E%3Cg fill='%23d6b878' stroke='none'%3E%3Ccircle cx='13' cy='13' r='2.2'/%3E%3Ccircle cx='107' cy='13' r='2.2'/%3E%3Ccircle cx='13' cy='107' r='2.2'/%3E%3Ccircle cx='107' cy='107' r='2.2'/%3E%3C/g%3E%3C/svg%3E") 40 / 30px stretch;
}
.frame-gold { position: relative; }
.frame-gold::before { inset: 0; }

/* ---------- Sections ---------- */

.section { --pad-x: clamp(1.5rem, 6vw, 6rem); padding: var(--space-7) var(--pad-x); }
.section__head {
  max-width: 46rem; margin: 0 auto var(--space-5);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.section__title { font-family: var(--script); font-weight: 400; font-size: clamp(3.5rem, 11vw, 6rem); line-height: 1.12; letter-spacing: 0; }
.section__kicker { margin: 0.35rem 0 0; color: var(--gold-ink); font-size: 0.75rem; letter-spacing: 0.34em; }
.section__lede { margin: var(--space-3) auto 0; max-width: 40ch; color: var(--ink-soft); font-size: clamp(1.3125rem, 1.9vw, 1.5rem); line-height: 1.45; font-style: italic; font-weight: 350; text-wrap: pretty; }

.muted { color: var(--sage); }

/* ---------- The weekend ----------
   On velvet, inside the gold frame: Friday, Saturday (wider, larger), Sunday. */

.section.weekend-band { padding-top: 0; padding-bottom: calc(var(--space-7) + 0.5rem); overflow: clip; }
/* The night sky crowns the weekend: moon, pines and strings of lights, melting into the velvet. */
.crown { position: relative; margin: 0 calc(-1 * var(--pad-x)); line-height: 0; }
.crown img {
  width: 100%; height: clamp(16rem, 42vw, 36rem);
  object-fit: cover; object-position: 50% 62%;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}
.weekend-band .section__head { position: relative; margin-top: calc(-1 * clamp(2.5rem, 7vw, 6rem)); }
.weekend {
  max-width: 70rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr);
  padding: clamp(3rem, 6vw, 4.75rem) clamp(1.25rem, 4vw, 3.25rem);
  text-align: center;
}
.day { padding: var(--space-2) clamp(1.25rem, 3vw, 2.75rem); }
.day + .day { border-left: 1px solid rgba(214, 184, 120, 0.28); }
.day__date { margin: 0; color: var(--gold-light); font-size: 0.75rem; }
.day__name { margin: 0.1rem 0 var(--space-3); font-family: var(--script); font-weight: 400; font-size: clamp(2.75rem, 4vw, 3.5rem); line-height: 1.2; }
.day--main .day__name { font-size: clamp(3.4rem, 5.4vw, 4.75rem); }

.event { margin: 0; }
.event__title { font-family: var(--display); font-weight: 350; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.4rem; }
.event__where { margin: 0 auto; max-width: 26ch; color: var(--pine-soft); }

/* Saturday: the program, one item after another with a gold lozenge between. */
.program { list-style: none; margin: 0; padding: 0; }
.program li { padding: 0 0 var(--space-3); }
.program li:last-child { padding-bottom: 0; }
.program li + li::before {
  content: ""; display: block; width: 7px; height: 7px;
  margin: 0 auto var(--space-3);
  border: 1px solid var(--gold-light);
  transform: rotate(45deg);
}
.program h4 { margin: 0 0 0.35rem; font-family: var(--display); font-weight: 350; font-size: clamp(1.625rem, 2.3vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; }
.program p { margin: 0 auto; max-width: 30ch; color: var(--pine-soft); }

/* ---------- Venue ----------
   Swiftwater's name, address and directions, centered like the address on an envelope. */

.venue { padding-bottom: var(--space-7); }
.venue__grid { max-width: 40rem; margin: 0 auto; text-align: center; }
.venue__name { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(2.5rem, 4.6vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; }
.venue__address { font-style: normal; margin: var(--space-2) 0 var(--space-4); line-height: 1.8; }
.venue__address .caps { display: block; color: var(--gold-ink); }
.venue__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.venue__notes { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--gold-hair); }
.venue__notes p { margin: 0 0 var(--space-2); color: var(--ink-soft); }
.venue__notes p:last-child { margin-bottom: 0; }
.venue__notes p:first-child { font-family: var(--display); font-style: italic; font-weight: 350; font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.4; color: var(--ink); }
.venue__notes .muted { color: var(--sage); font-style: italic; }

/* ---------- Map ----------
   A small illustrated map of the drive: Puget Sound and Lake Washington in soft blue, little
   snow-capped Cascades and pines, a gold dotted route over Snoqualmie Pass to a heart at Suncadia,
   and Washington State in an inset. Labels are SVG text styled here, so they use the site's fonts. */

.map { max-width: 58rem; margin: 0 auto var(--space-6); }
.map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.map__water { fill: #cfdfe6; stroke: #a7c0cc; stroke-width: 1.5; }
.map__mtn { fill: #aebccb; }
.map__mtn--back { fill: #cbd5de; }
.map__mtn--rainier { fill: #b9c6d3; }
.map__snow { fill: #fbfaf6; }
.map__pine { fill: #5d7b62; }
.map__road { fill: none; stroke: #cdbf9e; stroke-width: 3; stroke-linecap: round; }
.map__route-glow { fill: none; stroke: rgba(176, 138, 66, 0.14); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.map__route { fill: none; stroke: var(--gold); stroke-width: 4.5; stroke-dasharray: 2 11; stroke-linecap: round; stroke-linejoin: round; }
.map__reveal { fill: none; stroke: #fff; stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; }
.map__dot { fill: var(--ink); }
.map__dot--pass { fill: var(--gold); }
.map__dot--small { fill: var(--sage); }
.map__plane path { fill: var(--ink); }
.map__pin path { fill: #a8423b; stroke: #fbfaf6; stroke-width: 3; }
.map__pin-shadow { fill: rgba(28, 33, 29, 0.18); }
.map__shield path { fill: var(--pine); }
.map__shield text { font: 500 13px var(--sans); letter-spacing: 0.06em; fill: var(--pine-ink); }
.map__compass path { fill: var(--gold); }
.map__compass .map__compass-tail { fill: var(--gold-hair); }
.map__compass text { font: 500 15px var(--sans); fill: var(--gold-ink); }
.map__label { font-family: var(--sans); font-size: 18px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; fill: var(--ink); }
.map__label--sm { font-size: 14px; font-weight: 400; fill: var(--ink-soft); }
.map__label--xs { font-size: 12px; font-weight: 400; letter-spacing: 0.28em; fill: var(--gold-ink); }
.map__script { font-family: var(--script); font-size: 62px; fill: var(--ink); }
.map__hand { font-family: var(--hand); font-size: 24px; fill: var(--gold-ink); }
.map__hand--route { font-size: 27px; }
.map__italic { font-family: var(--text); font-style: italic; font-size: 20px; fill: #6d8794; }
.map__inset rect { fill: var(--card); stroke: var(--gold-hair); stroke-width: 1.5; }
.map__state { fill: #dfe6dc; stroke: #9fb19f; stroke-width: 1.2; stroke-linejoin: round; }
.map__star { fill: #a8423b; }

/* The route draws itself from the airport to Suncadia, then the heart drops in. */
html.motion [data-reveal="map"] .map__reveal { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease-write) 0.3s; }
html.motion [data-reveal="map"].is-in .map__reveal { stroke-dashoffset: 0; }
html.motion [data-reveal="map"] .map__pin path, html.motion [data-reveal="map"] .map__pin ellipse { opacity: 0; transform: translateY(-18px); transition: opacity 0.5s ease 2.7s, transform 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) 2.7s; }
html.motion [data-reveal="map"] .map__pin ellipse { transform: scale(0.4); transform-box: fill-box; transform-origin: center; }
html.motion [data-reveal="map"].is-in .map__pin path, html.motion [data-reveal="map"].is-in .map__pin ellipse { opacity: 1; transform: none; }

/* On phones the map is narrow, so its labels grow and the optional ones step aside. */
@media (max-width: 720px) {
  .map { margin-inline: -0.5rem; margin-bottom: var(--space-5); }
  .map__label { font-size: 27px; }
  .map__label--sm { font-size: 22px; }
  .map__label--xs { font-size: 18px; }
  .map__script { font-size: 84px; }
  .map__hand, .map__hand--route { font-size: 36px; }
  .map__italic { font-size: 28px; }
  .map__opt { display: none; }
}

/* Things to do: six little scenes in the map's hand, each in the site's arch with a caption. */
.acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); margin: var(--space-4) 0 0.5rem; }
.act { margin: 0; text-align: center; }
.act__art { display: block; width: 100%; height: auto; overflow: visible; }
.act__frame { fill: none; stroke: var(--gold); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.act figcaption { margin-top: 0.7rem; font-size: 1rem; line-height: 1.35; color: var(--ink-soft); }
.act figcaption .caps { display: block; margin-bottom: 0.2rem; font-size: 0.6875rem; letter-spacing: 0.24em; color: var(--gold-ink); }
.act__sky { fill: #e8eef0; }
.act__grass { fill: #b6c8a1; }
.act__grass-deep { fill: #9bb287; }
.act__green { fill: #cadab5; }
.act__sand { fill: #efe5cc; }
.act__water { fill: #cfdfe6; }
.act__water--line { stroke: #a7c0cc; stroke-width: 1.5; }
.act__wave { fill: none; stroke: #f4f8f9; stroke-width: 2.5; stroke-linecap: round; }
.act__ink { fill: var(--ink); }
.act__pole { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.act__red { fill: #a8423b; }
.act__gold { fill: var(--gold); }
.act__trail { fill: none; stroke: var(--gold); stroke-width: 4.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.act__tube { fill: none; stroke: #a8423b; stroke-width: 6; }
.act__tube-shine { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.6; stroke-linecap: round; }
.act__deck { fill: #efe6cf; }
.act__wood { fill: #8d6c4c; }
.act__slide { fill: none; stroke: #a8423b; stroke-width: 9; stroke-linecap: round; }
.act__splash { fill: none; stroke: #a7c0cc; stroke-width: 2.2; stroke-linecap: round; }
.act__street { fill: #ddd3bd; }
.act__curb { fill: none; stroke: #c7b99b; stroke-width: 2; }
.act__house1 { fill: #c9b49a; }
.act__house2 { fill: #b5745e; }
.act__house3 { fill: #94a8b4; }
.act__trim { fill: none; stroke: rgba(28, 33, 29, 0.35); stroke-width: 2; }
.act__window { fill: #f6f1e4; stroke: rgba(28, 33, 29, 0.4); stroke-width: 1; }
.act__door { fill: #4f4236; }
.act__sign { fill: var(--gold); }
@media (max-width: 720px) {
  .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
  .act figcaption { font-size: 0.9375rem; }
}

/* ---------- Travel ---------- */

.travel {
  max-width: 66rem; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
}
.travel h3 { font-family: var(--display); font-weight: 300; font-style: italic; font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--gold); }
.travel__note h3 + p { max-width: 52ch; }
.travel__note p { margin: 0 0 var(--space-4); }
.travel__note p:last-child { margin-bottom: 0; }
.travel__aside { max-width: 66rem; margin: var(--space-5) auto 0; padding-top: var(--space-4); border-top: 1px solid var(--gold-hair); text-align: center; font-style: italic; font-size: 1.25rem; color: var(--ink-soft); text-wrap: balance; }

.travel ul { margin: 0; padding: 0; list-style: none; }
.travel li { padding: 0.65rem 0; border-top: 1px solid var(--hair); }
.travel li:last-child { border-bottom: 1px solid var(--hair); }
.travel li a { text-decoration: underline; text-decoration-color: var(--gold-hair); }
.travel li a:hover { text-decoration-color: currentColor; }
.travel li span { display: block; color: var(--sage); font-size: 0.95rem; }

/* ---------- FAQ ----------
   Questions as hairline-ruled rows; each opens on a gold plus that turns to a cross. */

.faq-section { padding-top: var(--space-5); }
.faq { max-width: 46rem; margin: 0 auto; border-top: 1px solid var(--gold-hair); }
.faq details { border-bottom: 1px solid var(--gold-hair); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0.25rem;
  cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 350; font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.25; letter-spacing: -0.01em;
  transition: color 0.3s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 0.9rem; height: 0.9rem;
  background:
    linear-gradient(var(--gold), var(--gold)) center / 100% 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center / 1px 100% no-repeat;
  transition: transform 0.4s var(--ease-soft);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--pine-hi); }
.faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.faq__a { padding: 0 0.25rem 1.75rem; color: var(--ink-soft); }
html.motion .faq details[open] .faq__a { animation: faq-in 0.5s var(--ease-soft); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }
.faq__a p { margin: 0 0 0.9rem; max-width: 60ch; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 0.22em; }
.faq__a a:hover { text-decoration-thickness: 2px; }

/* ---------- RSVP: the reply card ----------
   An ivory card resting on velvet, with painted sprays tucked into two corners. */

.rsvp { overflow: hidden; color: var(--pine-ink); }
.rsvp.section { padding-block: calc(var(--space-7) + 1rem); }

/* Wildflower sprays laid along two corners, straddling the card's edge. */
.reply::before, .reply::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  width: clamp(12rem, 52vw, 19rem); aspect-ratio: 1;
  background: url("../img/flora-spray.webp") center / contain no-repeat;
}
.reply::before { top: 0; left: 0; transform: translate(-9%, -9%); }
.reply::after { bottom: 0; right: 0; transform: translate(9%, 9%) rotate(180deg); }
.reply {
  position: relative;
  max-width: 44rem;
  margin: 0 auto;
  color: var(--ink);
  background: var(--card) var(--grain) 0 0 / 512px;
  background-blend-mode: soft-light;
  padding: 0.6rem;
  box-shadow: 0 1px 2px rgba(28, 33, 29, 0.08), 0 22px 44px -22px rgba(28, 33, 29, 0.35);
}
.velvet .reply { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 50px 90px -30px rgba(0, 0, 0, 0.7); }
.reply__inner {
  border: 1px solid var(--gold);
  outline: 1px solid var(--gold-hair);
  outline-offset: -6px;
  padding: clamp(2.25rem, 6vw, 4rem) clamp(1.25rem, 6vw, 4rem);
  text-align: center;
}
.reply__title { font-family: var(--script); font-weight: 400; font-style: normal; font-size: clamp(3.25rem, 9vw, 4.5rem); line-height: 1.12; letter-spacing: 0; }
.reply__sub { margin: var(--space-2) auto 0; max-width: 34ch; color: var(--ink-soft); text-wrap: balance; }
.reply__inner.is-done > .reply__title,
.reply__inner.is-done > .reply__sub,
.reply__inner.is-done > .rule,
.reply__inner.is-done > [data-config] { display: none; }
.reply .rule { margin: var(--space-4) auto; width: 4rem; border-top: 1px solid var(--gold); }

.reply form { text-align: left; }

.field { display: block; margin: 0 0 var(--space-4); }
.field__label { display: block; color: var(--sage); margin-bottom: 0.35rem; }
.field input,
.field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  border-radius: 0;
  padding: 0.55rem 0 0.6rem;
  font: 400 1.375rem/1.3 var(--display);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { font: 400 1.125rem/1.5 var(--text); min-height: 5.5rem; resize: vertical; border: 1px solid var(--hair); border-bottom-color: var(--ink); padding: 0.75rem; }
.field input::placeholder, .field textarea::placeholder { color: #7d8076; font-style: italic; }
.field input:focus { outline: none; border-bottom-width: 2px; padding-bottom: calc(0.6rem - 1px); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.stay-dates { display: grid; gap: 1.25rem; margin: 1.25rem 0 1.5rem; }

/* Arriving and leaving: a row of day tiles, weekday over date, in the site's own type. */
.daypick { min-width: 0; margin: 0; padding: 0; border: 0; }
.daypick legend { padding: 0; margin-bottom: 0.5rem; }
.daypick__opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--ink); }
.daypick__opts label { position: relative; cursor: pointer; }
.daypick__opts label + label span { border-left: 1px solid var(--ink); }
.daypick__opts input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.daypick__opts span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
  min-height: 3.6rem;
  font: 300 1.375rem/1 var(--display); font-variant-numeric: lining-nums;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.daypick__opts small { font: 400 0.625rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage); }
.daypick__opts label:hover span { background: rgba(30, 31, 28, 0.07); }
.daypick__opts input:checked + span { background: var(--pine); color: var(--pine-ink); }
.daypick__opts input:checked + span small { color: var(--gold-light); }
.daypick__opts input:checked:hover + span { background: var(--pine-hi); }
.daypick__opts input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.field__hint { display: block; margin-top: 0.5rem; font-size: 1rem; font-style: italic; color: var(--sage); }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.75rem; margin-top: var(--space-3); }
.text-btn {
  background: none; border: 0; padding: 0.5rem 0; cursor: pointer; color: var(--sage);
  font: 400 0.8125rem/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 0.4em;
}
.text-btn:hover { color: var(--ink); }

.status { margin: var(--space-3) 0 0; text-align: center; min-height: 1.6em; }
.status--error { color: #8a2f1d; }

/* Guest blocks inside the reply card */
.guest { padding: var(--space-3) 0; border-top: 1px solid var(--hair); }
.guest:first-of-type { border-top: 1px solid var(--rule); }
.guest__name { font-family: var(--display); font-weight: 300; font-size: 2rem; line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 var(--space-2); }

.choice { border: 0; margin: 0; padding: 0.75rem 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.75rem 1.25rem; }
.choice ~ .choice { border-top: 1px dotted var(--hair); }
.choice legend { float: left; padding: 0; }
.choice__event { font-size: 1.0625rem; }
.choice__event small { display: block; color: var(--sage); font-size: 0.9375rem; font-style: italic; }
.choice__opts { display: inline-flex; border: 1px solid var(--ink); }
.choice__opts label { position: relative; cursor: pointer; }
.choice__opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice__opts span {
  display: flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0.15rem 0.95rem 0; min-width: 6.25rem; text-align: center;
  font: 400 0.75rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.choice__opts label + label span { border-left: 1px solid var(--ink); }
.choice__opts input:checked + span { background: var(--pine); color: var(--pine-ink); }
.choice__opts input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice__opts label:hover span { background: rgba(30, 31, 28, 0.07); }
.choice__opts input:checked:hover + span { background: var(--pine-hi); }

.choice__error { grid-column: 1 / -1; margin: 0; color: #8a2f1d; font-size: 1rem; display: none; }
.choice.is-missing .choice__error { display: block; }
.choice.is-missing .choice__opts { border-color: #8a2f1d; box-shadow: 0 0 0 1px #8a2f1d; }
.stay-dates.is-missing .daypick__opts { border-color: #8a2f1d; box-shadow: 0 0 0 1px #8a2f1d; }
.stay-dates.is-missing::after { content: "Choose both days. Leaving needs to be after arriving."; grid-column: 1 / -1; color: #8a2f1d; font-size: 1rem; margin-top: -0.75rem; }

.reply__who { margin: 0.25rem 0 0; }

.keep-hint { margin: 0 0 var(--space-3); }

.extras { margin: 0 0 var(--space-3); }
.extras summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 2.75rem; color: var(--sage);
  font: 400 0.8125rem/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase;
}
.extras summary::-webkit-details-marker { display: none; }
.extras summary::before { content: "+"; font: 300 1.25rem/1 var(--sans); letter-spacing: 0; }
.extras[open] summary::before { content: "\2212"; }
.extras summary:hover { color: var(--ink); }
.extras[open] summary { margin-bottom: var(--space-3); }

.receipt { list-style: none; margin: var(--space-3) auto 0; padding: 0; max-width: 28rem; text-align: left; }
.receipt li { display: grid; gap: 0.15rem; padding: 0.85rem 0; border-top: 1px solid var(--hair); }
.receipt li:last-child { border-bottom: 1px solid var(--hair); }
.receipt__name { font-family: var(--display); font-size: 1.375rem; line-height: 1.2; }
.receipt__events { color: var(--ink-soft); font-size: 1.0625rem; }

.gate .reply__sub { max-width: 40ch; }
.gate__help { margin: var(--space-3) 0 0; color: var(--sage); font-size: 1rem; font-style: italic; }

.confirm { text-align: center; }
.confirm p { max-width: 36ch; margin: var(--space-2) auto 0; }

/* ---------- Add to calendar ---------- */
/* A quiet row of two ghost buttons: Google opens a prefilled event, the other link is a plain .ics
   file, which Apple Calendar, Outlook and most other calendars open directly. */
.calendar { margin: var(--space-4) auto 0; text-align: center; }
.calendar .calendar__label {
  display: inline-flex; align-items: center; gap: 0.55rem;
  max-width: none; margin: 0 0 var(--space-2);
  font-size: 0.75rem; color: var(--gold-ink);
}
.on-pine .calendar .calendar__label { color: var(--gold-light); }
.calendar__icon { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.1; }
/* Two equal buttons side by side, or stacked at the same width when there isn't room. */
.calendar__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.75rem; max-width: 30rem; margin: 0 auto; }
.calendar .btn { min-height: 2.75rem; padding: 0.8rem 1.35rem 0.75rem; font-size: 0.75rem; letter-spacing: 0.24em; }
.confirm .calendar { margin-top: var(--space-3); }


[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Footer ---------- */

.footer {
  padding: 0;
  text-align: center;
}
.footer__names { margin: 0 auto; width: fit-content; font-family: var(--script); font-size: clamp(3.25rem, 11vw, 5rem); line-height: 1.15; }
.footer__amp { color: var(--gold); font-size: 0.85em; }
.footer__flourish { width: 11rem; margin: 0 auto; }
.footer__line { margin: 0.9rem 0 0; font-style: italic; font-size: 1.25rem; color: var(--ink-soft); }
.footer__date { margin: 0.6rem 0 var(--space-5); color: var(--gold-ink); }

/* A note from us, in our own hand, above the photo. */
.welcome { max-width: 38rem; margin: 0 auto; padding: var(--space-6) clamp(1.5rem, 6vw, 2rem) 0; text-align: center; }
.welcome__note { margin: 0; font-family: var(--hand); font-size: clamp(1.45rem, 4.6vw, 1.85rem); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.welcome__sign { margin: var(--space-2) 0 0; font-family: var(--hand); font-size: clamp(1.6rem, 5vw, 2rem); line-height: 1.3; color: var(--gold-ink); text-align: right; padding-right: 0.5rem; }
.welcome + .portrait { margin-top: var(--space-5); }

/* The two of us in the tulip fields, under a gold-lined arch, just below the note. */
.portrait { position: relative; width: min(23rem, 76vw); margin: var(--space-6) auto var(--space-6); }
.portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; border-radius: 999px 999px 3px 3px; box-shadow: 0 1px 2px rgba(30, 31, 28, 0.1), 0 24px 44px -24px rgba(30, 31, 28, 0.45); }
.portrait::before { content: ""; position: absolute; inset: -0.7rem; border: 1px solid var(--gold); border-radius: 999px 999px 8px 8px; pointer-events: none; }

/* ---------- Stay site ----------
   The after-hours sibling of the wedding website: the same type, gold and velvet, but a
   photographed cover, a plain early agenda, and the house in snapshots. */

/* Cover: the great room dimmed toward evening, the title in ivory over it. */
.stay-cover {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 60rem);
  display: grid; grid-template-rows: auto 1fr;
  padding: max(1.25rem, env(safe-area-inset-top)) clamp(1.25rem, 5vw, 4rem) clamp(3.5rem, 10svh, 6.5rem);
  color: var(--pine-ink); text-align: center;
  background: #1c2620;
  --edge: 30px;
  -webkit-mask: url("../img/edge-bottom.png") bottom left / auto var(--edge) repeat-x, linear-gradient(#000, #000) top / 100% calc(100% - var(--edge) + 1px) no-repeat;
  mask: url("../img/edge-bottom.png") bottom left / auto var(--edge) repeat-x, linear-gradient(#000, #000) top / 100% calc(100% - var(--edge) + 1px) no-repeat;
}
.stay-cover__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 45% 60%; }
.stay-cover::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14, 20, 16, 0.6) 0%, rgba(14, 20, 16, 0.12) 24%, rgba(14, 20, 16, 0.4) 50%, rgba(14, 20, 16, 0.9) 100%);
}
.stay-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1rem; width: 100%; max-width: 72rem; margin: 0 auto; font-size: 0.6875rem; letter-spacing: 0.22em; }
.stay-nav a { color: inherit; text-decoration: none; padding: 0.5rem 0; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.stay-nav a:hover { text-decoration: underline; text-decoration-color: var(--gold-light); text-underline-offset: 0.5em; }
.stay-cover :focus-visible { outline-color: var(--gold-light); }
.stay-cover__title { align-self: end; }
.stay-cover__name { margin: 0 auto; width: fit-content; font-family: var(--script); font-weight: 400; font-size: clamp(3.4rem, 13vw, 7.5rem); line-height: 1.05; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
.stay-cover__name:focus { outline: none; }
.stay-cover__flourish { width: min(15rem, 64vw); margin: 0.75rem auto 0.9rem; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5)); }
.stay-cover__line { margin: 0; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.26em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.stay-cover__line + .stay-cover__line { margin-top: 0.3rem; font-weight: 400; color: var(--gold-light); }
@media (min-width: 1024px) { .stay-nav { justify-content: flex-end; gap: 0.5rem 2.25rem; font-size: 0.75rem; letter-spacing: 0.3em; } }
@media (max-width: 720px) { .stay-cover { --edge: 20px; min-height: 88svh; } }
html.motion .stay-cover__photo { animation: stay-settle 2.6s var(--ease-soft) both; }
html.motion .stay-cover__title { animation: stay-rise 1.4s var(--ease-soft) 0.4s both; }
@keyframes stay-settle { from { transform: scale(1.08); filter: blur(6px) brightness(1.1); } }
@keyframes stay-rise { from { opacity: 0; transform: translateY(18px); } }

/* The week: a plain, early agenda. One line per day, the day on the left. */
.agenda { padding-bottom: var(--space-6); }
.agenda__note { margin: 0.1rem 0 0; font-family: var(--hand); font-size: clamp(1.4rem, 4vw, 1.75rem); color: var(--gold-ink); rotate: -2deg; }
.agenda__list { max-width: 46rem; margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--gold-hair); }
.agenda__list > li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1.25rem; align-items: baseline; padding: 1.15rem 0.25rem; border-bottom: 1px solid var(--hair); }
.agenda__day { margin: 0; font-family: var(--display); font-weight: 300; font-size: 1.875rem; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums; white-space: nowrap; }
.agenda__day .caps { margin-right: 0.4rem; font-size: 0.6875rem; letter-spacing: 0.24em; vertical-align: 0.4em; color: var(--gold-ink); }
.agenda__items { margin: 0; padding: 0; list-style: none; font-size: 1.125rem; line-height: 1.55; color: var(--ink-soft); }
.agenda__items li { display: inline; }
.agenda__items li + li::before { content: "\00b7"; margin: 0 0.55rem; color: var(--gold); }
.agenda__list > li.is-wedding .agenda__day { color: var(--pine); }
.agenda__list > li.is-wedding .agenda__items { color: var(--ink); }

/* The house, on velvet: a snapshot of the bar, two big numbers, then what's there. */
.house { padding-top: var(--space-6); }
.snapshot {
  position: relative;
  width: min(40rem, 88vw); margin: 0 auto var(--space-5);
  padding: 0.7rem 0.7rem 3.1rem;
  background: #fbf8f1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 34px 60px -24px rgba(0, 0, 0, 0.65);
  rotate: -1.6deg;
}
.snapshot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.snapshot figcaption { position: absolute; left: 0; right: 0; bottom: 0.6rem; text-align: center; font-family: var(--hand); font-size: 1.5rem; line-height: 1.2; color: var(--ink); }
.house__stats { display: flex; justify-content: center; gap: clamp(3rem, 10vw, 7rem); margin: 0 auto var(--space-5); }
.house__stats > div { display: flex; flex-direction: column-reverse; align-items: center; }
.house__stats dt { color: var(--gold-light); font-size: 0.6875rem; letter-spacing: 0.26em; }
.house__stats dd { margin: 0 0 0.4rem; font-family: var(--display); font-weight: 300; font-size: clamp(3rem, 8vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.house__lists { max-width: 62rem; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.house__lists h3 { margin: 0 0 var(--space-2); padding-bottom: 0.75rem; border-bottom: 1px solid rgba(214, 184, 120, 0.4); font-weight: 400; color: var(--gold-light); }
.house__lists ul { margin: 0; padding: 0; list-style: none; }
.house__lists li { padding: 0.75rem 0; border-bottom: 1px solid rgba(242, 238, 227, 0.14); line-height: 1.4; }
.house__lists li:last-child { border-bottom: 0; }
.house__next { max-width: 40ch; margin: var(--space-5) auto 0; text-align: center; font-style: italic; font-size: 1.25rem; color: var(--pine-soft); text-wrap: balance; }

/* Reply on paper rather than velvet, so the two pages don't mirror each other. */
.rsvp.rsvp--paper { background: var(--paper-deep) var(--grain) 0 0 / 512px; background-blend-mode: soft-light; color: var(--ink); }

.footer__names { margin: 0.4rem auto var(--space-5); }

/* ---------- Stay passcode gate ---------- */

html.is-locked .stay-page { display: none; }
html:not(.is-locked) .gate { display: none; }

.gate {
  overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: var(--space-5) 1.5rem;
}
.gate__card { width: 100%; max-width: 34rem; }
.gate__alt { margin: var(--space-4) 0 0; text-align: center; color: var(--ink-soft); }
.gate .field input { text-align: center; letter-spacing: 0.08em; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .house__lists { grid-template-columns: 1fr 1fr; }
  .house__lists > :last-child { grid-column: 1 / -1; }
  .weekend { grid-template-columns: 1fr; max-width: 36rem; }
  .day { padding: 0 0.5rem; }
  .day + .day { border-left: 0; padding-top: var(--space-4); }
  .day + .day::before { content: ""; display: block; width: 5rem; height: 1px; margin: 0 auto var(--space-4); background: rgba(214, 184, 120, 0.45); }
  .travel { grid-template-columns: 1fr; gap: var(--space-5); }
}

@media (max-width: 720px) {
  .agenda__list > li { grid-template-columns: 4.75rem minmax(0, 1fr); gap: 0.9rem; }
  .agenda__day { font-size: 1.5rem; }
  .agenda__day .caps { display: block; margin: 0 0 0.3rem; vertical-align: 0; }
  .snapshot { padding: 0.5rem 0.5rem 2.6rem; }
  .snapshot figcaption { font-size: 1.3rem; bottom: 0.45rem; }
  .house__lists { grid-template-columns: 1fr; gap: var(--space-4); }
  body { font-size: 1.125rem; }

  .section { --pad-x: 1.5rem; padding: var(--space-6) var(--pad-x); }
  .section__head { margin-bottom: var(--space-4); }

  .section.weekend-band { --pad-x: 1rem; }
  .weekend { padding: var(--space-5) 1.25rem; }
  .frame-gold::before { border-width: 24px; border-image-width: 24px; }
  .venue__actions .btn { flex: 1 1 12rem; }

  .travel { gap: var(--space-4); }

  .reply { padding: 0.4rem; }
  .choice { grid-template-columns: 1fr; }
  .choice__opts { width: 100%; }
  .choice__opts label { flex: 1; }
  .choice__opts span { min-width: 0; padding: 0.15rem 0.4rem 0; font-size: 0.6875rem; letter-spacing: 0.12em; white-space: nowrap; }

}