/* ==========================================================================
   Jen & Stijn · Palacio de Silvela
   A late afternoon by the sea, then a palace, then night. The invitation's
   five colours carry everything; Fraunces sets the voice, Jost the facts.
   Controls are pills, paper is deckled. The engine's classes and data-sc-*
   selectors are left alone.
   ========================================================================== */

:root {
  --ivory: #FAF7F0;
  --wear-beige: #D9C2A3;   /* placeholder: the beige for "What to wear", tone still to be chosen */
  --beige: #EFE1D0;
  --green: #2E3B2C;
  --green-deep: #1F291E;
  --night: #19211A;
  --olive: #8A8B54;
  --olive-ink: #6D6E3F;
  --sage: #A9A981;

  --sc-canvas: var(--ivory);
  --sc-surface: var(--beige);
  --sc-ink: var(--green);
  --sc-ink-soft: #55604E;
  --sc-accent: var(--olive);
  --sc-accent-ink: var(--ivory);
  --sc-shadow-color: 110 18% 12%;

  --sc-font-display: "Fraunces", "Georgia", serif;
  --sc-font-text: "Jost", "Futura", system-ui, sans-serif;

  --sc-gutter: clamp(1.25rem, 6vw, 6rem);
  --sc-section: clamp(5rem, 11vw, 9rem);
  --wrap: 76rem;
  --bar-h: 60px;
  /* How much of a pinned stage the browser's own bars cover right now.
     page.js keeps this exact as the bars slide; see the stage rule below. */
  --bars: 0px;

  --t-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-h2: clamp(2.9rem, 2rem + 3.6vw, 5rem);
  --display-vs: "opsz" 144, "SOFT" 60, "WONK" 1;

  interpolate-size: allow-keywords;
}

/* Pinned stages fill the LARGE viewport (browser bars collapsed). At 100svh
   they were one bar-height short once the bars slid away on the first
   scroll, and the next section showed through underneath every pinned act.
   While the bars are showing they cover the bottom --bars of the stage, so
   anything anchored to the bottom adds var(--bars) to its offset. */
@supports (height: 100lvh) {
  :root { --bars: calc(100lvh - 100svh); }
  .sc-stage { height: 100lvh; }
}
html.rm { --bars: 0px !important; }

html { scroll-padding-top: var(--bar-h); }
body { font-size: var(--t-body); line-height: 1.6; letter-spacing: 0.005em; font-weight: 400; background: var(--ivory); }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
p { margin: 0; }
a { text-decoration-color: var(--olive); text-underline-offset: 5px; }
em { font-style: italic; }
.i18n-pending main, .i18n-pending .bar { visibility: hidden; }

/* crest: the monogram's colour crosses into <use> as a custom property */
.crest__mono { font-family: var(--sc-font-display); font-style: italic; font-size: 28px; fill: var(--crest-ink, var(--green)); stroke: none; font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1; }
.crest__amp { font-size: 20px; }
.wax__body { fill: var(--olive); }
.wax__ring { fill: none; stroke: #6F7043; stroke-width: 3; }
.seal__imprint { color: #6F7043; --crest-ink: #6F7043; }

/* --------------------------------------------------------------- type -- */
.h2 {
  font-family: var(--sc-font-display); font-style: italic; font-weight: 340;
  font-variation-settings: var(--display-vs);
  font-size: var(--t-h2); line-height: 0.98; letter-spacing: -0.015em;
  margin: 0; text-wrap: balance;
}
.lede { margin-top: 1.25rem; max-width: 34ch; text-wrap: pretty; font-size: calc(var(--t-body) * 1.06); }
.label { font-family: var(--sc-font-text); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.35; }
.big { font-family: var(--sc-font-display); font-weight: 300; font-variation-settings: "opsz" 144, "SOFT" 40; font-size: clamp(2.6rem, 2rem + 2.4vw, 3.75rem); line-height: 1; letter-spacing: -0.02em; }
.body { margin-top: 0.75rem; max-width: 34ch; text-wrap: pretty; }
.link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-thickness: 1px; transition: text-decoration-color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

/* -------------------------------------------------------------- pills -- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 52px; padding: 0 1.6rem;
  border: 1px solid transparent; border-radius: 999px;
  font: 500 0.875rem/1 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  background: transparent; color: inherit;
  transition: transform 120ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.pill:active { transform: scale(0.97); }
.pill:disabled { opacity: 0.55; cursor: default; transform: none; }
.pill--sm { min-height: 40px; padding: 0 1rem; font-size: 0.75rem; letter-spacing: 0.14em; }
.pill--ink { background: var(--green); color: var(--ivory); }
.pill--ivory { background: var(--ivory); color: var(--green); }
.pill--line { border-color: currentColor; }
.pill--dashed { border: 1px dashed currentColor; width: 100%; min-height: 48px; }
.pill--wide { width: 100%; }
.pill--glass { background: rgb(25 33 26 / 0.55); color: var(--ivory); border-color: rgb(250 247 240 / 0.6); }
@media (hover: hover) and (pointer: fine) {
  .pill--ink:hover { background: var(--green-deep); }
  .pill--ivory:hover { background: var(--beige); }
  .pill--line:hover, .pill--dashed:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
}
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill--toggle { border-color: var(--green); color: var(--green); }
.pill--toggle[aria-selected="true"] { background: var(--green); color: var(--beige); }
.pills--two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pill-opt { position: relative; display: block; }
.pill-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pill-opt span {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1rem;
  border: 1px solid var(--green); border-radius: 999px;
  font: 500 0.875rem/1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
  transition: background-color 180ms var(--sc-ease-out), color 180ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.pill-opt input:checked + span { background: var(--green); color: var(--ivory); }
.pill-opt input:focus-visible + span { outline: 2px solid var(--olive); outline-offset: 3px; }
.pill-opt:active span { transform: scale(0.97); }
.pills--small .pill-opt span { min-height: 42px; font-size: 0.75rem; }

/* ------------------------------------------------------------- chrome -- */
.horizon { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 70; pointer-events: none; }
.horizon__line { position: absolute; inset: 0; background: linear-gradient(90deg, var(--olive) var(--hp, 0%), transparent var(--hp, 0%)); opacity: 0.9; }
.horizon__sun { position: absolute; top: -3px; left: var(--hp, 0%); width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--olive); box-shadow: 0 0 0 3px rgb(138 139 84 / 0.25); transition: background-color 400ms var(--sc-ease-out), box-shadow 400ms var(--sc-ease-out); }
.horizon.is-night .horizon__sun { background: var(--ivory); box-shadow: inset -3px -1px 0 0 var(--sage); }

.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px 0 18px;
  background: var(--bar-bg, var(--ivory));
  color: var(--bar-ink, var(--green));
  transition: background-color 280ms var(--sc-ease-out), color 280ms var(--sc-ease-out), transform 420ms var(--sc-ease-out);
}
.bar.is-away { transform: translateY(-100%); }
.bar__mark { font-family: var(--sc-font-display); font-style: italic; font-size: 1.5rem; font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1; text-decoration: none; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; letter-spacing: 0.02em; }
.bar__mark em { font-size: 0.8em; margin: 0 1px; }
.bar__current { flex: 1; min-width: 0; text-align: center; font-family: var(--sc-font-display); font-style: italic; font-size: 1.0625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 240ms var(--sc-ease-out); }
.bar__end { display: flex; align-items: center; gap: 8px; }
.bar__rsvp, .bar__lang { display: none; }
@media (min-width: 900px) {
  :root { --bar-h: 68px; }
  .bar { padding: 0 32px; gap: 24px; }
  .bar__rsvp { display: inline-flex; background: var(--bar-ink, var(--green)); color: var(--bar-bg-solid, var(--ivory)); }
  .bar__lang { display: inline-flex; }
}

.drawer {
  position: fixed; inset: 0; z-index: 80;
  background: var(--green); color: var(--ivory);
  display: flex; flex-direction: column;
  padding: 0 18px 28px; overflow: auto;
  opacity: 0; transition: opacity 260ms var(--sc-ease-out);
}
.drawer.is-open { opacity: 1; }
.drawer :focus-visible { outline-color: var(--sage); }
.drawer__top { height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; }
.drawer__nav { margin: 3vh 0 0; display: flex; flex-direction: column; }
.drawer__nav a {
  display: flex; align-items: center; min-height: 56px; padding: 4px 0;
  font-family: var(--sc-font-display); font-style: italic; font-weight: 320; font-variation-settings: var(--display-vs);
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); line-height: 1.05; text-decoration: none;
  opacity: 0; transform: translateY(12px);
  transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out), color 160ms;
  transition-delay: calc(var(--i, 0) * 32ms);
}
.drawer__nav a[aria-current="true"] { color: var(--sage); }
.drawer.is-open .drawer__nav a { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .drawer__nav a:hover { color: var(--sage); } }
.drawer__foot { margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.drawer__date { font-size: 0.9375rem; opacity: 0.85; }
@media (min-width: 900px) { .drawer { padding: 0 32px 40px; } .drawer__nav { display: block; columns: 2; column-gap: 6vw; margin-top: 8vh; } .drawer__nav a { break-inside: avoid; } }

/* ----------------------------------------------------------- the seal -- */
.gate { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 24px; background: var(--green);
  transition: opacity 520ms var(--sc-ease-out) 380ms, visibility 0s linear 900ms; }
.gate::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
.gate__card {
  position: relative; width: min(86vw, 24rem); aspect-ratio: 5 / 7; max-height: calc(100svh - 48px);
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(1.75rem, 6svh, 2.75rem) 1.5rem 1.5rem;
  background: var(--ivory); color: var(--green); clip-path: var(--deckle, none);
  text-align: center;
  transition: transform 700ms var(--sc-ease-in-out) 260ms, opacity 520ms var(--sc-ease-out) 380ms;
}
.gate__crest { width: 60px; height: 60px; color: var(--olive); }
.gate__names { margin-top: 0.75rem; font-family: var(--sc-font-display); font-style: italic; font-weight: 330; font-variation-settings: var(--display-vs); font-size: clamp(2.5rem, 2rem + 2vw, 3rem); line-height: 1; }
.gate__names em { color: var(--olive); }
.gate__date { margin-top: 0.75rem; font: 500 0.8125rem/1 var(--sc-font-text); letter-spacing: 0.3em; }
.gate__ribbon { position: absolute; left: 0; right: 0; top: 56%; height: 2.4rem; display: flex; }
.gate__ribbon span { flex: 1; background: linear-gradient(180deg, #BBBB95 0%, var(--sage) 45%, #9A9A71 100%); transition: transform 720ms var(--sc-ease-in-out); }
.gate__seal { position: absolute; left: 50%; top: calc(56% + 1.2rem); width: 6rem; height: 6rem; translate: -50% -50%; filter: drop-shadow(0 3px 4px hsl(110 30% 10% / 0.35)); transition: transform 420ms var(--sc-ease-out), opacity 320ms var(--sc-ease-out) 120ms; }
.gate__seal svg, .env__half svg, .sealing__seal svg { width: 100%; height: 100%; overflow: visible; display: block; }
.gate__prompt { margin-top: auto; font-size: 0.9375rem; }
.gate__prompt span[lang="es"] { font-family: var(--sc-font-display); font-style: italic; }
.gate__choices { margin-top: 0.875rem; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.gate__choices .pill--line { color: var(--green); }
.gate.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.gate.is-leaving .gate__seal { transform: translateY(-14px) scale(1.08); opacity: 0; }
.gate.is-leaving .gate__ribbon-l { transform: translateX(-104%); }
.gate.is-leaving .gate__ribbon-r { transform: translateX(104%); }
.gate.is-leaving .gate__card { transform: translateY(-4svh) scale(0.985); opacity: 0; }
html.gate-open body { overflow: hidden; }
/* The seal is visible from the very first paint: the boot script in <head>
   sets gate-open before the page draws, so nothing flashes behind it. */
html.gate-open .gate, .gate.is-leaving { display: grid; }

/* =========================================================== 1 · HERO == */
.hero__stage { background: var(--green-deep); color: var(--ivory); }
.hero__still, .hero__still img, .hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
/* The still and the cut-out share one framing with the depth scene (its
   focus and overscan), so handing over from one to the other never jumps. */
.hero__still img { object-fit: cover; object-position: var(--hero-pos, 50% 50%); transform-origin: var(--hero-pos, 50% 50%); scale: var(--hero-os, 1); transition: opacity 500ms var(--sc-ease-out); }
.hero__gl { opacity: 0; transition: opacity 500ms var(--sc-ease-out); }
.hero__stage.is-3d .hero__gl { opacity: 1; }
.hero__stage.is-3d .hero__still img { opacity: 0; }
/* The gull: far away, so it sits behind the names; page.js flies it. */
.hero__bird { position: absolute; left: 0; top: 0; width: 100px; height: 40px; fill: #34302a; opacity: 0; transform-origin: 50px 20px; will-change: transform; pointer-events: none; filter: blur(0.35px); }
.hero__bird.is-on { opacity: 0.94; }
.hero__names {
  position: absolute; left: 0; right: 0; top: var(--names-top, 5vh);
  margin: 0; text-align: center; color: var(--green);
  font-family: var(--sc-font-display); font-style: italic; font-weight: 330;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: var(--names-size, min(clamp(4.5rem, 13.5vw, 14rem), 22svh)); line-height: 0.84; letter-spacing: -0.03em;
  white-space: nowrap; will-change: transform, opacity;
}
.hero__amp { font-size: 0.72em; color: var(--olive-ink); }
.hero__names:focus { outline: none; }
.hero__cut { position: absolute; left: var(--ib-x, 0); top: var(--ib-y, 0); width: var(--ib-w, 100%); height: var(--ib-h, 100%); will-change: transform; pointer-events: none; }
.hero__cut img { width: 100%; height: 100%; max-width: none; display: block; }
.hero__stage:not(.is-3d) .hero__cut img { object-fit: cover; object-position: var(--hero-pos, 50% 50%); transform-origin: var(--hero-pos, 50% 50%); scale: var(--hero-os, 1); }
.hero__scrim { position: absolute; inset: auto 0 0 0; height: 48%; pointer-events: none;
  background: linear-gradient(to top, rgb(25 33 26 / 0.92) 0%, rgb(25 33 26 / 0.7) 32%, rgb(25 33 26 / 0.25) 64%, transparent 100%); }
.hero__copy { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: calc(max(24px, 4svh) + var(--bars)); display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.hero__invite { font-family: var(--sc-font-display); font-style: italic; font-weight: 340; font-variation-settings: "opsz" 72, "SOFT" 60, "WONK" 1; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.1; }
.hero__when { font-size: 1rem; letter-spacing: 0.02em; }
.hero__copy .pill { margin-top: 0.5rem; }
/* Which photo the hero uses follows the screen's shape, not its width: an
   upright screen gets the standing portrait, a wide one the kiss. The same
   query is in the <picture> sources and in page.js, so all layers agree. */
@media (max-aspect-ratio: 1/1) {
  .hero__names { --names-size: min(25vw, 16svh); --names-top: 15svh; line-height: 0.86; white-space: normal; }
  .hero__stijn { display: block; }
}
@media (max-width: 899px) {
  .hero__dot { display: none; }
  .hero__when span { display: block; }
}
@media (max-width: 899px) and (max-aspect-ratio: 1/1) { .hero__copy .pill { align-self: stretch; } }

/* ======================================================== 2 · SILENCE == */
.silence { min-height: 92svh; display: grid; align-content: center; padding: var(--sc-section) var(--sc-gutter); background: var(--ivory); color: var(--green); }
.silence__line {
  font-family: var(--sc-font-display); font-style: italic; font-weight: 320; font-variation-settings: var(--display-vs);
  font-size: clamp(3rem, 1.6rem + 6.5vw, 7.5rem); line-height: 0.95; letter-spacing: -0.02em; max-width: 11ch;
  opacity: 0; transform: translateY(20px); transition: opacity 1400ms var(--sc-ease-out), transform 1400ms var(--sc-ease-out);
}
.silence__line.is-in { opacity: 1; transform: none; }
html:not(.js) .silence__line { opacity: 1; transform: none; }

/* ========================================================= 3 · PALACE == */
.palace { color: var(--ivory); --sc-ink: var(--ivory); background: var(--night); }
.palace__stage { background: var(--night); }
.palace__ambient { position: absolute; inset: -8%; background: url("assets/palace.webp") center / cover no-repeat; filter: blur(34px) brightness(0.62) saturate(1.05); opacity: 0; }
.palace__poster, .palace__drone { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.palace__drone { opacity: 0; }
.palace__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 70% 55% at 0% 100%, rgb(25 33 26 / 0.6), transparent 70%), linear-gradient(to top, rgb(25 33 26 / 0.9) 0%, rgb(25 33 26 / 0.6) 26%, transparent 52%), linear-gradient(to bottom, rgb(25 33 26 / 0.62), transparent 22%); }
.palace__title { z-index: 3; bottom: calc(clamp(3rem, 12vh, 9rem) + var(--bars)); }
.palace__name { font-family: var(--sc-font-display); font-style: italic; font-weight: 320; font-variation-settings: var(--display-vs); font-size: clamp(3.2rem, 1.6rem + 7vw, 8rem); line-height: 0.92; letter-spacing: -0.02em; margin: 0; }
.palace__sub { margin-top: 0.875rem; font-size: 1.0625rem; max-width: 30ch; text-shadow: 0 1px 12px rgb(25 33 26 / 0.8); }
.palace__name { text-shadow: 0 2px 24px rgb(25 33 26 / 0.45); }
.aisle { position: absolute; top: 0; bottom: 0; left: 50%; width: min(100vw, 75svh); transform: translateX(-50%); opacity: 0; overflow: hidden; }
.aisle__still, .aisle__gl { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 45%; }
.aisle__gl { opacity: 0; }
.aisle.is-3d .aisle__gl { opacity: 1; }
.aisle.is-3d .aisle__still { opacity: 0; }
.aisle__walk { position: absolute; left: 0; right: 0; top: calc(var(--bar-h) + 18px); text-align: center; font: 600 0.75rem/1 var(--sc-font-text); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ivory); text-shadow: 0 0 2px rgb(25 33 26 / 0.7), 0 1px 14px rgb(25 33 26 / 0.8); opacity: 0; }
.palace__dip { position: absolute; inset: 0; background: var(--ivory); opacity: 0; pointer-events: none; z-index: 2; }

.notes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; z-index: 4; }
.notes__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.notes__lines line { stroke: var(--ivory); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; }
.note { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; }
.note__pin {
  position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--ivory); box-shadow: 0 0 0 4px rgb(250 247 240 / 0.3), 0 2px 8px rgb(0 0 0 / 0.35);
  transform: translate(var(--px, 0px), var(--py, 0px));
}
.note__pin::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgb(250 247 240 / 0.7); animation: ping 2.4s var(--sc-ease-out) infinite; }
@keyframes ping { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.note__tag {
  position: absolute; left: 0; top: 0; width: min(20rem, calc(100vw - 2 * var(--sc-gutter)));
  padding: 1.25rem 1.375rem 1.4rem; background: var(--ivory); color: var(--green);
  clip-path: var(--deckle, none); filter: drop-shadow(0 12px 24px rgb(0 0 0 / 0.3));
  transform: translate(var(--tx, 0px), var(--ty, 0px));
}
.note__kicker { font: 500 0.75rem/1.3 var(--sc-font-text); letter-spacing: 0.18em; text-transform: uppercase; color: var(--olive-ink); }
.note__title { margin-top: 0.4rem; font-family: var(--sc-font-display); font-style: italic; font-weight: 360; font-variation-settings: "opsz" 72, "SOFT" 60, "WONK" 1; font-size: 1.6rem; line-height: 1.08; }
.note__text { margin-top: 0.5rem; font-size: 0.96875rem; line-height: 1.55; text-wrap: pretty; }
.note__count { font-variant-numeric: tabular-nums; font-weight: 600; }
.note--plate .note__tag { width: min(24rem, calc(100vw - 2 * var(--sc-gutter))); text-align: center; }
.palace__years { position: absolute; z-index: 5; left: 50%; top: calc(var(--bar-h) + 10px); translate: -50% 0; display: flex; align-items: center; margin: 0; padding: 8px 14px 12px; list-style: none; opacity: 0; pointer-events: none;
  border-radius: 999px; background: rgb(25 33 26 / 0.38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 500 0.75rem/1 var(--sc-font-text); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--ivory); text-shadow: 0 0 2px rgb(25 33 26 / 0.7), 0 1px 12px rgb(25 33 26 / 0.8); white-space: nowrap; }
.palace__years li { position: relative; opacity: 0.5; transition: opacity 300ms var(--sc-ease-out); }
.palace__years li + li::before { content: ""; display: inline-block; width: clamp(10px, 2.4vw, 28px); height: 1px; margin: 0 clamp(6px, 1.4vw, 12px); vertical-align: middle; background: currentColor; opacity: 0.6; }
.palace__years li.is-past { opacity: 0.78; }
.palace__years li.is-now { opacity: 1; font-weight: 600; }
.palace__years li.is-now::after { content: ""; position: absolute; right: calc(2ch + 0.16em - 3px); bottom: -8px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.palace__look { position: absolute; left: 50%; bottom: calc(22px + var(--bars)); translate: -50% 0; z-index: 5; display: flex; align-items: center; gap: 12px; opacity: 0; transition: opacity 400ms var(--sc-ease-out); white-space: nowrap; }
.palace__look.is-on { opacity: 1; }
.palace__hint { font-size: 0.875rem; color: var(--ivory); text-shadow: 0 1px 10px rgb(0 0 0 / 0.6); }
.palace__stage.is-walking { cursor: grab; }
.palace__stage.is-dragging { cursor: grabbing; }
@media (max-width: 899px) { .palace__look { top: calc(var(--bar-h) + 56px); bottom: auto; } .palace__hint { display: none; } }

/* ======================================================== 4 · THE DAY == */
.day { --ground: 31svh; }
.day__stage { color: var(--day-ink, var(--green)); background: var(--day-top, var(--ivory)); }
.day__sky { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--day-top, var(--ivory)) 0%, var(--day-low, var(--beige)) 72%); }
.day__stars { position: absolute; inset: 0 0 35% 0; opacity: var(--stars, 0);
  background-image: radial-gradient(1.5px 1.5px at 12% 18%, var(--ivory), transparent), radial-gradient(1px 1px at 22% 42%, var(--ivory), transparent), radial-gradient(1.5px 1.5px at 37% 12%, var(--ivory), transparent), radial-gradient(1px 1px at 48% 30%, var(--ivory), transparent), radial-gradient(1.5px 1.5px at 63% 20%, var(--ivory), transparent), radial-gradient(1px 1px at 71% 44%, var(--ivory), transparent), radial-gradient(1.5px 1.5px at 84% 14%, var(--ivory), transparent), radial-gradient(1px 1px at 92% 36%, var(--ivory), transparent), radial-gradient(1px 1px at 6% 52%, var(--ivory), transparent), radial-gradient(1.5px 1.5px at 56% 6%, var(--ivory), transparent), radial-gradient(1px 1px at 30% 60%, var(--ivory), transparent), radial-gradient(1px 1px at 78% 62%, var(--ivory), transparent); }
.day__sun { --d: clamp(56px, 11vmin, 120px); position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--sun-core, #F6EAD6) 0 55%, var(--sun-edge, var(--beige)) 69%, transparent 71%);
  box-shadow: 0 0 70px 24px var(--sun-glow, rgb(239 225 208 / 0.55)); transform: translate(var(--sx, 50vw), var(--sy, 30svh)); will-change: transform; }
.day__moon { --d: clamp(34px, 6vmin, 64px); position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; opacity: 0;
  box-shadow: inset calc(var(--d) * -0.3) calc(var(--d) * 0.12) 0 0 #F1EBD8; filter: drop-shadow(0 0 16px rgb(241 235 216 / 0.45)); will-change: transform, opacity; }
.day__palace { position: absolute; left: 0; right: 0; bottom: calc(var(--ground) + var(--bars) - 1px); width: 100%; height: 50svh; overflow: visible; }
.day__skyline { fill: var(--silhouette, var(--green)); }
.day__windows rect { fill: #F4DDB0; opacity: clamp(0, calc((var(--night, 0) - var(--w, 0) * 0.6) * 3), 1); }
.day__stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--ground) + var(--bars)); background: var(--silhouette, var(--green)); }
/* The basement party: closed all evening, open at "Dancing, until late". */
.day__door-leaf { fill: var(--silhouette, var(--green)); stroke: rgb(244 221 176 / 0.35); stroke-width: 1.5; transform-box: fill-box; transition: transform 900ms var(--sc-ease-in-out); }
.day__door-leaf--l { transform-origin: left center; }
.day__door-leaf--r { transform-origin: right center; }
.day__door-light, .day__spill, .day__beams path { opacity: 0; transition: opacity 700ms var(--sc-ease-out); }
.day__spill { filter: blur(6px); mix-blend-mode: screen; }
.day__beams path { mix-blend-mode: screen; filter: blur(3px); }
.day__beams { transform-box: view-box; transform-origin: 402px 690px; }
.day__palace { z-index: 1; }
.day.is-party .day__door-leaf { transform: scaleX(0.08); }
.day.is-party .day__door-light { opacity: 1; animation: disco-fill 2.4s linear infinite; }
.day.is-party .day__spill { opacity: 0.85; animation: disco-fill 2.4s linear infinite, disco-pulse 1.2s ease-in-out infinite alternate; }
.day.is-party .day__beams path { opacity: 0.4; animation: disco-fill 2.4s linear infinite; }
.day.is-party .day__beams path:nth-child(2) { animation-delay: -0.8s; }
.day.is-party .day__beams path:nth-child(3) { animation-delay: -1.6s; }
.day.is-party .day__beams { animation: disco-sweep 5s ease-in-out infinite alternate; }
@keyframes disco-fill { 0%, 100% { fill: #E0529C; } 25% { fill: #F4C542; } 50% { fill: #3FC1D9; } 75% { fill: #8E6CE0; } }
@keyframes disco-pulse { from { opacity: 0.55; } to { opacity: 0.95; } }
@keyframes disco-sweep { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) {
  .day.is-party .day__door-light, .day.is-party .day__spill, .day.is-party .day__beams path, .day.is-party .day__beams { animation: none; fill: #F4C542; }
  .day__beams { display: none; }
}
.day__copy { position: absolute; left: var(--sc-gutter); top: calc(var(--bar-h) + 3svh); z-index: 2; }
.day__title { font-size: clamp(2.2rem, 1.8rem + 2vw, 3.4rem); }
.day__time { margin-top: 0.4rem; font-family: var(--sc-font-display); font-weight: 280; font-variation-settings: "opsz" 144, "SOFT" 40; font-size: clamp(4.5rem, 3rem + 8vw, 9.5rem); line-height: 0.86; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; }
.day__what { margin-top: 0.5rem; font-family: var(--sc-font-display); font-style: italic; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1; min-height: 1.3em; }
.day__list { position: absolute; z-index: 2; left: var(--sc-gutter); right: var(--sc-gutter); bottom: calc(14px + var(--bars)); margin: 0; padding: 0; list-style: none; color: var(--ivory);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.day__list li { display: grid; grid-template-columns: 3.1rem 1fr; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 0.875rem; line-height: 1.3; opacity: 0.6; transition: opacity 300ms var(--sc-ease-out); }
.day__list li.is-now { opacity: 1; }
.day__list li.is-past { opacity: 0.8; }
.day__t { font-weight: 600; font-variant-numeric: tabular-nums; }
.day__sunset { display: none; position: absolute; right: var(--sc-gutter); bottom: calc(var(--ground) + var(--bars) + 10px); z-index: 2; font: 500 0.75rem/1 var(--sc-font-text); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory); opacity: 0.9; }
@media (min-width: 900px) {
  .day { --ground: 22svh; }
  .day__palace { height: 60svh; }
  .day__list { left: auto; right: var(--sc-gutter); bottom: auto; top: calc(var(--bar-h) + 4svh); width: min(27rem, 38vw); color: var(--day-ink, var(--green)); display: block; }
  .day__list li { font-size: 1.0625rem; padding: 8px 0; grid-template-columns: 4.2rem 1fr; border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
  .day__sunset { display: block; bottom: calc(var(--ground) + var(--bars) + 16px); }
}
@media (max-height: 700px) and (max-width: 899px) { .day { --ground: 34svh; } .day__list li { font-size: 0.8125rem; padding: 2px 0; } .day__time { font-size: 4rem; } .day__palace { height: 36svh; } }

/* ================================================== paper inserts ==== */
.insert { padding: var(--sc-section) 0; color: var(--green); }
.insert--beige { background: var(--beige); }
.insert--ivory { background: var(--ivory); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sc-gutter); }
.fact { border-top: 1px solid color-mix(in srgb, var(--green) 40%, transparent); padding-top: 1.1rem; }
.fact .label + p { margin-top: 0.5rem; }

/* ---------------------------------------------------- getting there ---- */
.travel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 3rem clamp(3rem, 7vw, 7rem); align-items: start; }
.travel .pills { margin-top: 2rem; }
.swap { display: grid; margin-top: 2rem; }
.swap__item { grid-area: 1 / 1; transition: opacity 360ms var(--sc-ease-out), transform 360ms var(--sc-ease-out); }
.swap[data-mode-state="car"] [data-only="train"], .swap[data-mode-state="train"] [data-only="car"] { opacity: 0; transform: translateY(10px); visibility: hidden; }
.facts { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1.5rem 2rem; }
.map { margin: 0; justify-self: center; width: min(100%, 28rem); }
.map svg { width: 100%; height: auto; overflow: visible; }
.map__frame { fill: none; stroke: var(--green); stroke-width: 1.2; }
.map__frame--in { stroke-width: 0.6; }
.map__hatch { stroke: var(--green); stroke-width: 0.6; opacity: 0.55; }
.map__ring { fill: none; stroke: var(--green); stroke-width: 1; }
.map__river { fill: none; stroke: #8FA79A; stroke-width: 3.5; stroke-linecap: round; opacity: 0.85; }
.map__river-name { font-family: var(--sc-font-display); font-style: italic; font-size: 15px; fill: #4E6A5B; }
.map__gardens { stroke: none; }
.map__air { fill: none; stroke: var(--green); stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round; }
.map__plane path { fill: none; stroke: var(--green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.map__line { fill: none; stroke: var(--olive); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--draw-off, 1); transition: opacity 400ms var(--sc-ease-out); }
.map__place { font-family: var(--sc-font-display); font-style: italic; font-size: 26px; fill: var(--green); font-variation-settings: "opsz" 72, "SOFT" 60, "WONK" 1; }
.map__road { font-family: var(--sc-font-text); font-size: 14px; letter-spacing: 0.08em; fill: var(--green); }
.map__small { font-family: var(--sc-font-text); font-size: 12px; letter-spacing: 0.1em; fill: var(--green); text-transform: uppercase; }
.map__stop { fill: var(--beige); stroke: var(--green); stroke-width: 1.4; }
.map__dest { fill: var(--beige); stroke: var(--green); stroke-width: 2; transition: fill 300ms var(--sc-ease-out); }
.map__dest.is-there { fill: var(--green); }
.map__needle { fill: var(--green); opacity: 0.8; }
.map__scale line { stroke: var(--green); stroke-width: 1.2; }
.map__token-bg { fill: var(--green); }
.map__token-min { font: 600 11px/1 var(--sc-font-text); fill: var(--ivory); letter-spacing: 0.02em; }
.map__token { transition: opacity 300ms var(--sc-ease-out); }
.map__only { transition: opacity 400ms var(--sc-ease-out); }
.map[data-mode-state="car"] [data-only="train"], .map[data-mode-state="train"] [data-only="car"],
.map[data-mode-state="car"] .map__line[data-path="train"], .map[data-mode-state="train"] .map__line[data-path="car"] { opacity: 0; }
html:not(.js) .map__line { stroke-dashoffset: 0; }
html:not(.js) .swap [data-only="train"] { opacity: 1; visibility: visible; transform: none; grid-area: auto; margin-top: 1.5rem; }

/* --------------------------------------------------------- key tags ---- */
.stay__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 3rem clamp(3rem, 7vw, 7rem); align-items: start; }
.keys { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(0.75rem, 4vw, 3rem); padding-top: 18px; border-top: 2px solid var(--olive); }
.keys::before, .keys::after { content: ""; position: absolute; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--olive); }
.keys::before { left: -4px; } .keys::after { right: -4px; }
.key { position: relative; width: min(14.5rem, 45%); transform-origin: 50% -18px; will-change: transform; }
.key__string { display: block; width: 1px; height: var(--string, 64px); margin: -18px auto 0; background: var(--green); }
.key--b { --string: 104px; }
.key { perspective: 900px; }
/* The tag turns over. clip-path and filter would flatten the 3D on the turning
   element, so each face carries its own shape and shadow. */
.key__tag { position: relative; display: grid; transform-style: preserve-3d; transition: transform 720ms var(--sc-ease-out); }
.key__tag.is-turned { transform: rotateY(180deg); }
.key__face {
  grid-area: 1 / 1; display: grid; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  filter: drop-shadow(0 14px 18px hsl(110 18% 12% / 0.18));
}
.key__front { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.key__back { transform: rotateY(180deg); }
.key__skin {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2.4rem 1rem 1.4rem; background: var(--beige); color: var(--green);
  clip-path: polygon(22% 0, 78% 0, 100% 12%, 100% 100%, 0 100%, 0 12%);
}
.key__back .key__skin { background: var(--green); color: var(--ivory); padding-top: 2.2rem; }
.key__hole { position: absolute; left: 50%; top: 12px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ivory); box-shadow: inset 0 0 0 2px var(--olive); }
.key__skin > .label { display: block; }
.key__city { display: block; margin-top: 0.5rem; font-family: var(--sc-font-display); font-style: italic; font-weight: 330; font-variation-settings: var(--display-vs); font-size: clamp(2.2rem, 1.9rem + 1.5vw, 3rem); line-height: 1; }
.key__hint { display: block; margin-top: 1rem; padding-top: 0.7rem; border-top: 1px solid hsl(110 18% 20% / 0.25); font-size: 0.8125rem; line-height: 1.35; }
.key__front:hover .key__hint, .key__front:focus-visible .key__hint { text-decoration: underline; text-underline-offset: 3px; }
.key__front:focus-visible, .key__again:focus-visible, .key__book:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }
.key__hotel { font-family: var(--sc-font-display); font-style: italic; font-weight: 400; font-variation-settings: var(--display-vs); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.1; text-wrap: balance; }
.key__about { margin-top: 0.6rem; font-size: 0.8125rem; line-height: 1.4; opacity: 0.9; }
.key__book { margin-top: 0.9rem; font-weight: 500; font-size: 0.875rem; line-height: 1.3; color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; }
.key__again { margin-top: 0.7rem; padding: 4px 8px; border: 0; background: none; color: inherit; font: inherit; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; cursor: pointer; }
.rm .key__tag { transition: none; }
html:not(.js) .key__tag { display: block; }
html:not(.js) .key__back { transform: none; margin-top: 0.5rem; }
html:not(.js) .key__hint, html:not(.js) .key__again { display: none; }

/* ---------------------------------------------------------- plants ---- */
.plants { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
@media (min-width: 900px) { .plants { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }
.plant { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.plant__art { position: relative; z-index: 1; width: 100%; max-width: 11rem; height: auto; aspect-ratio: 120 / 200; overflow: visible; }
.plant__art .plant__lines path { fill: none; stroke: var(--green); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: clamp(0, calc(1 - var(--draw, 0) * 1.35 + var(--i, 0) * 0.008), 1); }
.plant__swatch { position: absolute; left: 12%; top: 14%; width: min(8.5rem, 62%); aspect-ratio: 1; border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  background: var(--c); opacity: calc(0.25 + var(--draw, 0) * 0.65); transform: scale(calc(0.85 + var(--draw, 0) * 0.15)) rotate(-8deg); }
.plant--beige .plant__swatch { box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 25%, transparent); }
.plant__name { margin-top: 0.5rem; font-family: var(--sc-font-display); font-style: italic; font-weight: 340; font-variation-settings: "opsz" 72, "SOFT" 60, "WONK" 1; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.05; }
.plant__latin { margin-top: 0.2rem; font-family: var(--sc-font-display); font-style: italic; font-size: 0.9375rem; color: var(--sc-ink-soft); }
.plant__where { margin-top: 0.4rem; font-size: 0.9375rem; line-height: 1.45; }
/* The wider palette: a paint-chip fan deck, folded until opened. On phones
   the chips open as a row you swipe instead, since a fan of sixteen will not
   fit across a phone. */
.palette { margin-top: 3rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.palette__close { display: none; }
.palette.is-open .palette__open { display: none; }
.palette.is-open .palette__close { display: inline; }
.palette__deck { list-style: none; margin: 0; padding: 0; }
.paint { position: relative; background: var(--c); color: var(--green); border-radius: 5px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18), 0 6px 14px hsl(110 18% 12% / 0.16); }
.paint--dark { color: var(--ivory); }
.paint__name { font: 500 0.625rem/1.15 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase; }
@keyframes paint-in { from { opacity: 0; transform: translateY(16px) rotate(-4deg); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) {
  .palette { align-items: stretch; }
  .palette__toggle { align-self: flex-start; }
  .palette__deck { display: none; margin-inline: calc(-1 * var(--sc-gutter)); padding: 6px var(--sc-gutter) 22px; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sc-gutter); scrollbar-width: none; }
  .palette__deck::-webkit-scrollbar { display: none; }
  .palette.is-open .palette__deck { display: flex; }
  .paint__name { letter-spacing: 0.1em; }   /* so the longest names (Terracotta, Eucalyptus) clear the chip edge */
  .paint { flex: none; width: 5.6rem; height: 8.75rem; display: flex; align-items: flex-end; padding: 0.65rem 0.5rem; scroll-snap-align: start; animation: paint-in 460ms var(--sc-ease-out) both; animation-delay: calc(var(--i) * 32ms); }
}
@media (min-width: 900px) {
  .palette__deck { --spread: 11deg; position: relative; width: 100%; height: 20rem; cursor: pointer; }
  .palette.is-open .palette__deck { cursor: default; }
  .palette__deck::after { content: ""; position: absolute; z-index: 40; left: 50%; bottom: 1.4rem; width: 10px; height: 10px; margin: 0 0 -5px -5px; border-radius: 50%; background: var(--ivory); box-shadow: inset 0 0 0 2px var(--olive), 0 1px 2px hsl(110 18% 12% / 0.3); }
  .paint { position: absolute; z-index: calc(var(--n) - var(--i)); left: 50%; bottom: 0; width: 2.9rem; height: 17rem; margin-left: -1.45rem; display: flex; justify-content: center; align-items: flex-start; padding-top: 0.9rem;
    transform-origin: 50% calc(100% - 1.4rem); transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 1.2deg));
    transition: transform 650ms var(--sc-ease-out); transition-delay: calc((var(--n) - var(--i)) * 12ms); }
  .paint__name { writing-mode: vertical-rl; font-size: 0.6875rem; letter-spacing: 0.18em; }
  .paint--r .paint__name { transform: rotate(180deg); }   /* the right half of the fan reads left to right too */
  .palette.is-open .paint { transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--spread))); transition-delay: calc(var(--i) * 14ms); }
  .palette.is-open .paint:hover { transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--spread))) translateY(-0.9rem); transition-duration: 220ms; transition-delay: 0s; }
}
.rm .paint { transition: none; animation: none; }
.paint { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.paint:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.palette__hint { display: none; font-size: 1rem; line-height: 1.4; color: var(--green); }
.palette.is-open .palette__hint { display: block; }
/* One colour, up close. */
.paint-zoom { width: min(22rem, calc(100vw - 48px)); padding: 0; border: 0; background: transparent; overflow: visible; }
.paint-zoom::backdrop { background: rgb(25 33 26 / 0.55); backdrop-filter: blur(3px); }
.paint-zoom[open] { animation: zoom-in 380ms var(--sc-ease-out); }
.paint-zoom[open]::backdrop { animation: fade-in 300ms var(--sc-ease-out); }
@keyframes zoom-in { from { opacity: 0; transform: translateY(18px) scale(0.86) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.paint-zoom__card { aspect-ratio: 3 / 4; border-radius: 8px; background: var(--c, var(--sage)); color: var(--green); display: flex; align-items: flex-end; padding: 1.4rem 1.5rem; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2), 0 24px 60px rgb(10 14 10 / 0.45); transition: background-color 300ms var(--sc-ease-out); }
.paint-zoom__card.is-dark { color: var(--ivory); }
.paint-zoom__name { font-family: var(--sc-font-display); font-style: italic; font-size: clamp(2rem, 1.6rem + 2vw, 2.8rem); line-height: 1; font-variation-settings: "opsz" 72, "SOFT" 60, "WONK" 1; }
.paint-zoom__bar { margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.paint-zoom__close { background: var(--ivory); color: var(--green); border-color: var(--ivory); }
.paint-zoom__step { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(250 247 240 / 0.7); background: rgb(25 33 26 / 0.35); color: var(--ivory); font-size: 1.05rem; cursor: pointer; }
.paint-zoom__step:focus-visible, .paint-zoom__close:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.rm .paint-zoom[open], .rm .paint-zoom[open]::backdrop { animation: none; }
@media (min-width: 900px) { .palette.is-open .paint.is-picked { transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--spread))) translateY(-1.4rem); transition-delay: 0s; } }
.wear__foot { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 2rem clamp(3rem, 7vw, 7rem); align-items: end; }
.wear__garden { font-family: var(--sc-font-display); font-style: italic; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.2; max-width: 22ch; font-variation-settings: "opsz" 72, "SOFT" 60, "WONK" 1; }

/* ============================================================ 8 · MENU == */
.menu__stage { background: var(--green); color: var(--green); }
.menu__media { position: absolute; left: 0; right: 0; top: 0; height: 48%; overflow: hidden; background: var(--beige); }
.menu__media .sc-stage__poster, .menu__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; }
.menu__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgb(25 33 26 / 0.88), rgb(25 33 26 / 0.5) 45%, transparent); pointer-events: none; z-index: 1; }
.menu__card { position: absolute; left: 12px; right: 12px; bottom: calc(12px + var(--bars)); top: calc((100% - var(--bars)) * var(--mt, 0.48) - 24px); z-index: 3; overflow: hidden;
  padding: 1.4rem 1.4rem 1.2rem; background: var(--ivory); clip-path: var(--deckle, none); filter: drop-shadow(0 10px 30px rgb(0 0 0 / 0.18));
  display: flex; flex-direction: column; }
.menu__title { font-size: clamp(2rem, 1.6rem + 2vw, 3.2rem); }
.menu__label { margin-top: 0.4rem; color: var(--olive-ink); }
.menu__items { margin: 0.8rem 0 0; padding: 0; list-style: none; }
.menu__items li { position: relative; padding: 3px 0 3px 1.4rem; font-family: var(--sc-font-display); font-style: italic; font-size: 1.0625rem; line-height: 1.3; font-variation-settings: "opsz" 24, "SOFT" 60, "WONK" 1;
  opacity: var(--in, 1); transform: translateX(calc((1 - var(--in, 1)) * 12px)); }
.menu__items--prose li { font-family: var(--sc-font-text); font-style: normal; font-size: 1rem; line-height: 1.5; padding: 6px 0 6px 1.4rem; font-variation-settings: normal; }
.menu__items li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.8rem; height: 1px; background: var(--olive); }
.menu__items--prose li::before { top: calc(6px + 0.75em - 0.5px); }
.menu__note { margin-top: auto; padding-top: 0.6rem; font-size: 0.8125rem; line-height: 1.45; color: var(--sc-ink-soft); }
/* Phone: the carving first, full screen; then it slides up into the top half
   (still framed on the knife) while the menu card rises into the bottom. */
@media (max-width: 899px) {
  .menu__media { height: 100%; clip-path: inset(0 0 calc(var(--k, 1) * (100% - (100% - var(--bars)) * var(--mt, 0.48))) 0); }
  .menu__media .sc-stage__poster, .menu__media video { object-position: 50% 60%; transform: translate3d(0, calc(var(--k, 1) * -42%), 0); will-change: transform; }
  .menu__media::after { inset: 0 0 auto 0; height: 40%; background: linear-gradient(to bottom, rgb(25 33 26 / 0.9), rgb(25 33 26 / 0.55) 50%, transparent); }
  .menu__card { transform: translate3d(0, calc((1 - var(--k, 1)) * (100% + 40px)), 0); }
}
/* Short phones (and any phone while its bars show): the card gets more of
   the screen and tighter type, so all three courses and the note fit. */
@media (max-width: 899px) and (max-height: 860px) {
  .menu__card { padding: 1.15rem 1.25rem 1rem; }
  .menu__title { font-size: 2rem; }
  .menu__items { margin-top: 0.5rem; }
  .menu__items--prose li { font-size: 0.9375rem; line-height: 1.45; padding: 4px 0 4px 1.4rem; }
  .menu__items--prose li::before { top: calc(4px + 0.725em - 0.5px); }
  .menu__note { font-size: 0.75rem; }
}
@media (max-width: 899px) and (max-height: 700px) { .menu__stage { --mt: 0.42; } }
@media (min-width: 900px) {
  .menu__media { right: 42%; height: 100%; }
  .menu__media .sc-stage__poster, .menu__media video { object-position: 40% 82%; }
  .menu__media::after { height: 30%; background: linear-gradient(to top, rgb(25 33 26 / 0.8), rgb(25 33 26 / 0.35) 55%, transparent); }
  .menu__card { left: auto; right: var(--sc-gutter); top: calc(var(--bar-h) + 5svh); bottom: calc(5svh + var(--bars)); width: min(36%, 30rem); padding: 2.4rem 2.2rem 2rem; justify-content: center; }
  .menu__items li { font-size: 1.3125rem; padding: 6px 0 6px 1.6rem; }
  .menu__items--prose li { font-size: 1.125rem; padding: 10px 0 10px 1.6rem; }
  .menu__items--prose li::before { top: calc(10px + 0.75em - 0.5px); }
  .menu__note { margin-top: 1.5rem; font-size: 0.9375rem; }
}

/* =========================================================== 9 · GIFTS == */
.gifts__stage { background: var(--beige); color: var(--green); display: grid; place-items: center; padding-bottom: var(--bars); perspective: 1400px; }
.gifts__title { position: absolute; top: calc(var(--bar-h) + clamp(16px, 5svh, 56px)); left: 0; right: 0; text-align: center; }
.env { position: relative; width: min(88vw, 36rem); aspect-ratio: 3 / 2; margin-top: 12svh; transform-style: preserve-3d; filter: drop-shadow(0 22px 34px hsl(110 18% 12% / 0.25)); }
.env__back { position: absolute; inset: 0; background: #999970; }
.env__card { position: absolute; left: 5%; right: 5%; top: 5%; height: 90%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.2rem 1.5rem 1.1rem; text-align: center;
  background: var(--ivory); color: var(--green); transform-origin: 50% 100%; will-change: transform; }
.env__crest { width: 3.25rem; height: 3.25rem; color: var(--olive); flex: none; }
.env__note { flex: 1; display: grid; place-items: center; max-width: 32ch; font-family: var(--sc-font-display); font-style: italic; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); line-height: 1.4; font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1; text-wrap: pretty; }
/* The card has two faces: the note with two ways to give, and the details. */
.gift { flex: 1; width: 100%; display: flex; flex-direction: column; transform-origin: 50% 50%; }
.gift__face { flex: 1; display: flex; flex-direction: column; align-items: center; gap: inherit; }
.gift__face[hidden] { display: none; }
.gift__front { gap: 0.55rem; }
.gift__front .env__note { flex: none; margin-top: auto; }
.gift__front .gift__ways { margin: 0.5rem 0 auto; }
.gift__ways { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gift__way { min-height: 36px; padding: 0 14px; border: 1px solid var(--olive); border-radius: 999px; background: transparent; color: var(--green); font: 500 0.6875rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out); }
.gift__way:focus-visible, .gift__again:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .gift__way:hover { background: var(--green); border-color: var(--green); color: var(--ivory); } }
.gift__back { justify-content: center; gap: 0.9rem; }
.gift__panel { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.gift__panel[hidden] { display: none; }
.gift__kicker { font: 500 0.75rem/1.2 var(--sc-font-text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--olive-ink); }
.gift__details { margin: 0; display: grid; gap: 0.7rem; }
.gift__details dt { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--olive-ink); }
.gift__details dd { margin: 0.15rem 0 0; font-family: var(--sc-font-display); font-style: italic; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.25; font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1; }
.gift__iban { white-space: nowrap; font-family: var(--sc-font-text); font-style: normal; font-size: 0.95em; letter-spacing: 0.06em; }
.gift__box { max-width: 24ch; font-family: var(--sc-font-display); font-style: italic; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.35; font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1; text-wrap: balance; }
.gift__again { margin-top: 0.2rem; padding: 6px 10px; border: 0; background: none; color: var(--green); font: 500 0.6875rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; opacity: 0.8; }
.env__copy { margin-left: 0.5rem; vertical-align: 0.15em; padding: 3px 9px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font: 500 0.6875rem/1.2 var(--sc-font-text); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.env__copy:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.env__sign { font-family: var(--sc-font-display); font-style: italic; font-size: 1.3rem; font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1; }
/* Phones keep a real envelope's shape (C6 is about 7:5); the card's type
   is set to fit it, and the card grows a little as it comes forward. */
@media (max-width: 640px) {
  .env { aspect-ratio: 7 / 5; margin-top: 20svh; }   /* lower, so the open flap clears the title */
  .env__crest { width: 2.1rem; height: 2.1rem; }
  .env__card { gap: 0.3rem; padding: 0.7rem 0.9rem 0.6rem; }
  .env__note { font-size: 0.9rem; line-height: 1.35; }
  .gift__front { gap: 0.3rem; }
  .gift__front .gift__ways { margin: 0.25rem 0 auto; }
  .gift__way { min-height: 32px; padding: 0 12px; font-size: 0.625rem; }
  .env__sign { font-size: 1.05rem; }
  .gift__back { gap: 0.5rem; }
  .gift__panel { gap: 0.45rem; }
  .gift__kicker { font-size: 0.6875rem; }
  .gift__details { gap: 0.4rem; }
  .gift__details dt { font-size: 0.625rem; }
  .gift__details dd { font-size: 1.0625rem; }
  .gift__box { font-size: 1rem; }
}
@media (max-width: 359px) {
  .env { aspect-ratio: 4 / 3; }
  .env__crest { width: 1.8rem; height: 1.8rem; }
  .env__note { font-size: 0.8125rem; line-height: 1.3; }
  .gift__ways { flex-wrap: nowrap; gap: 6px; }
  .gift__way { padding: 0 9px; letter-spacing: 0.12em; }
}
.env__front { position: absolute; inset: 0; z-index: 3; background: var(--sage); clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); }
.env__front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgb(255 255 255 / 0.14), transparent 40%, rgb(0 0 0 / 0.06)); }
.env__flap { position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 4; transform-origin: 50% 0; transform-style: preserve-3d; will-change: transform; }
.env__flap-out, .env__flap-in { position: absolute; inset: 0; backface-visibility: hidden; }
.env__flap-out { background: #9B9B71; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.env__flap-in { background: #B8B893; transform: rotateX(180deg); clip-path: polygon(0 100%, 100% 100%, 50% 0); }
.env__seal { position: absolute; left: 50%; top: 60%; width: 4.4rem; height: 4.4rem; translate: -50% -50%; z-index: 5; filter: drop-shadow(0 2px 3px hsl(110 30% 10% / 0.35)); }
.env__half { position: absolute; inset: 0; will-change: transform, opacity; }
.env__half--l { clip-path: polygon(0 0, 53% 0, 46% 28%, 56% 50%, 47% 74%, 54% 100%, 0 100%); }
.env__half--r { clip-path: polygon(53% 0, 100% 0, 100% 100%, 54% 100%, 47% 74%, 56% 50%, 46% 28%); }

/* ===================================================== 10 · WEEKEND == */
.cards { position: relative; list-style: none; margin: 1.5rem 0 0; padding: 18px var(--sc-gutter) 40px; display: flex; gap: clamp(18px, 3vw, 32px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sc-gutter); scrollbar-width: none; }
.cards::-webkit-scrollbar { display: none; }
.cards.is-grabbing { cursor: grabbing; scroll-snap-type: none; }
.card { cursor: pointer; -webkit-tap-highlight-color: transparent; flex: none; width: min(80vw, 25rem); aspect-ratio: 3 / 2; scroll-snap-align: start; perspective: 1200px; rotate: var(--tilt); transition: rotate 300ms var(--sc-ease-out); }
.card.is-turned { rotate: 0deg; }
.card__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 640ms var(--sc-ease-in-out); }
.card.is-turned .card__inner { transform: rotateY(180deg); }
.card__face { position: absolute; inset: 0; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem 1.4rem; background: var(--beige); color: var(--green);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 18px 40px -24px hsl(110 18% 12% / 0.55); }
.card__front::before { content: ""; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); pointer-events: none; }
.card__back { transform: rotateY(180deg); background: #F6EEE2; }
.card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.card__city { font: 500 0.75rem/1 var(--sc-font-text); letter-spacing: 0.2em; text-transform: uppercase; padding-top: 6px; }
.card__stamp { flex: none; width: 3.5rem; height: 4.2rem; padding: 6px; border: 2px dotted var(--olive); color: var(--olive); --crest-ink: var(--olive); display: grid; place-items: center; background: var(--ivory); }
.card__stamp svg { width: 100%; height: 100%; }
.card__name { font-family: var(--sc-font-display); font-style: italic; font-weight: 340; font-variation-settings: "opsz" 72, "SOFT" 60, "WONK" 1; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.3rem); line-height: 1.04; margin-bottom: 1.9rem; }
.card__turn, .card__back-btn { position: absolute; right: 14px; bottom: 12px; min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--green); font: 500 0.75rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--olive); text-underline-offset: 4px; cursor: pointer; }
.card__back-btn { position: static; }
.card__note { font-family: var(--sc-font-display); font-style: italic; font-size: 1.25rem; line-height: 1.4; max-width: 26ch; font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1; }
.card__actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card__mark { align-self: flex-start; margin: 0.4rem 0; padding: 5px 12px; border: 1.5px solid var(--olive); border-radius: 999px; color: var(--olive); font: 500 0.6875rem/1.2 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase; rotate: -2deg; }
.railnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 2rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--ivory); }
.railnav__arrows { display: none; gap: 8px; }
.railnav__step { width: 44px; padding: 0; letter-spacing: 0; font-size: 1rem; }
.railnav__step:disabled { opacity: 0.35; }
@media (hover: hover) and (pointer: fine) { .railnav__arrows { display: flex; } .chip:not([aria-pressed="true"]):hover, .railnav__step:not(:disabled):hover { background: color-mix(in srgb, var(--green) 8%, transparent); } }
html:not(.js) .railnav { display: none; }
@media (hover: hover) and (pointer: fine) { .card:not(.is-turned):hover { rotate: 0deg; } .cards { cursor: grab; } }

/* ============================================================ 11 · BAND == */
.band { position: relative; height: min(84svh, 50rem); overflow: hidden; background: var(--green); }
.band__media { position: absolute; inset: -12% 0; }
.band__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 52%; }
.band__clip { opacity: 0; transition: opacity 240ms linear; }
.band__clip.is-on { opacity: 1; }

/* ======================================================= 12 · QUESTIONS == */
.faq__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 2.5rem clamp(3rem, 7vw, 7rem); }
.faq__ask { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.faq__ask li { display: flex; align-items: baseline; gap: 1rem; }
.faq__who { min-width: 3.5rem; font: 500 0.75rem/1 var(--sc-font-text); letter-spacing: 0.18em; text-transform: uppercase; color: var(--olive-ink); }
.faq__ask a { font-family: var(--sc-font-display); font-style: italic; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); color: var(--green); text-decoration: none; font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1; }
.faq__ask a:hover { text-decoration: underline; }
/* A heart drawn in one stroke once the section comes into view. */
.faq__heart { display: block; width: 7.5rem; margin-top: 1.75rem; overflow: visible; }
.faq__heart path { fill: none; stroke: var(--olive); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.45,0,.2,1) 0.2s; }
.faq__heart.is-drawn path, html:not(.js) .faq__heart path, .rm .faq__heart path { stroke-dashoffset: 0; }
.rm .faq__heart path { transition: none; }
.faq__list { border-top: 1px solid color-mix(in srgb, var(--green) 45%, transparent); }
.qa { border-bottom: 1px solid color-mix(in srgb, var(--green) 45%, transparent); }
.qa__q { list-style: none; cursor: pointer; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0;
  font-family: var(--sc-font-display); font-style: italic; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.55rem); line-height: 1.2; font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1; }
.qa__q::-webkit-details-marker { display: none; }
.qa__icon { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid currentColor; }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; translate: -50% -50%; }
.qa__icon::before { width: 12px; height: 1.5px; }
.qa__icon::after { width: 1.5px; height: 12px; transition: transform 300ms var(--sc-ease-out); }
.qa[open] .qa__icon::after { transform: rotate(90deg); }
.qa::details-content { block-size: 0; overflow: clip; transition: block-size 380ms var(--sc-ease-out), content-visibility 380ms allow-discrete; }
.qa[open]::details-content { block-size: auto; }
.qa__a p { padding: 0 0 22px; max-width: 44ch; text-wrap: pretty; }

/* ============================================================ 13 · RSVP == */
.rsvp { position: relative; overflow: hidden; --sc-accent: var(--sage); background: linear-gradient(to bottom, var(--green) 0%, var(--night) 70%); color: var(--ivory); padding-top: var(--sc-section); }
.rsvp :focus-visible { outline-color: var(--sage); }
.rsvp__stars { position: absolute; inset: 0; pointer-events: none; opacity: 0.8;
  background-image: radial-gradient(1.5px 1.5px at 8% 12%, var(--ivory), transparent), radial-gradient(1px 1px at 18% 30%, var(--ivory), transparent), radial-gradient(1px 1px at 33% 8%, var(--ivory), transparent), radial-gradient(1.5px 1.5px at 47% 22%, var(--ivory), transparent), radial-gradient(1px 1px at 61% 6%, var(--ivory), transparent), radial-gradient(1.5px 1.5px at 76% 18%, var(--ivory), transparent), radial-gradient(1px 1px at 88% 9%, var(--ivory), transparent), radial-gradient(1px 1px at 95% 34%, var(--ivory), transparent), radial-gradient(1px 1px at 4% 48%, var(--ivory), transparent), radial-gradient(1.5px 1.5px at 26% 58%, var(--ivory), transparent), radial-gradient(1px 1px at 69% 52%, var(--ivory), transparent), radial-gradient(1px 1px at 83% 70%, var(--ivory), transparent);
  animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: 0.55; } to { opacity: 0.95; } }
.rsvp__title { font-size: clamp(3.5rem, 2.4rem + 5vw, 7rem); }
.rsvp__grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 2.5rem clamp(3rem, 7vw, 7rem); padding-bottom: var(--sc-section); align-items: start; }
.reply__card { position: relative; display: flex; flex-direction: column; gap: 1.6rem; padding: 2rem 1.4rem 1.8rem; background: var(--ivory); color: var(--green); clip-path: var(--deckle, none); --sc-accent: var(--olive); }
.reply__card :focus-visible { outline-color: var(--olive); }
@media (min-width: 900px) { .reply__card { padding: 2.6rem 2.4rem 2.4rem; } }
.reply__label { color: var(--olive-ink); text-align: center; }
.field { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.field legend { padding: 0; margin-bottom: 0.75rem; float: left; width: 100%; }
.field legend + * { clear: both; }
.field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field__row legend { float: none; width: auto; margin: 0; }
.field__count { font-family: var(--sc-font-display); font-style: italic; font-size: 1.0625rem; color: var(--olive-ink); }
.people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.person { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid color-mix(in srgb, var(--green) 22%, transparent); border-radius: 14px; animation: rise-in 380ms var(--sc-ease-out) both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } }
.person__row { display: flex; align-items: center; gap: 12px; }
.person__n { flex: none; width: 22px; font-family: var(--sc-font-display); font-style: italic; font-size: 1.375rem; color: var(--olive-ink); }
.person__remove { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); background: transparent; color: var(--green); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.person__remove:active { transform: scale(0.94); }
.input { flex: 1; min-width: 0; width: 100%; min-height: 48px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--green) 50%, transparent); border-radius: 0; background: transparent; color: var(--green); font: inherit; font-size: 1.125rem; padding: 6px 0; }
.input::placeholder { color: color-mix(in srgb, var(--green) 58%, transparent); }
.input:focus-visible { outline: none; border-bottom-color: var(--green); box-shadow: 0 1px 0 var(--green); }
.input[aria-invalid="true"] { border-bottom-color: #9A4A2E; box-shadow: 0 1px 0 #9A4A2E; }
.dates { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.date, .song { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--coming { gap: 1.6rem; }
.reply[data-attend="no"] .field--coming, .reply[data-attend="no"] .person__diet { display: none; }
.err { font-size: 0.9375rem; color: #8E4127; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reply__done { display: flex; flex-direction: column; gap: 1.2rem; outline: none; }
.reply__big { font-family: var(--sc-font-display); font-style: italic; font-weight: 330; font-variation-settings: var(--display-vs); font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem); line-height: 1.02; }
.reply__done [data-done-yes] > * + *, .reply__done [data-done-no] > * + * { margin-top: 0.75rem; }
.reply__done p:not(.reply__big):not(.label) { max-width: 34ch; }
.reply__done .pill { align-self: flex-start; }
.reply__sealed { color: var(--sage); }
.sealing { position: relative; width: min(100%, 21rem); aspect-ratio: 4 / 5; }
.sealing__card { position: absolute; inset: 0; background: var(--ivory); padding: 12px; clip-path: var(--deckle, none); }
.sealing__card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; }
.sealing__seal { position: absolute; right: -14px; bottom: -14px; width: 6rem; height: 6rem; filter: drop-shadow(0 3px 5px rgb(0 0 0 / 0.45)); }
.reply.is-sealing .sealing__seal { animation: press 900ms var(--sc-ease-out) both 250ms; }
@keyframes press { 0% { opacity: 0; transform: translateY(-46px) scale(1.5) rotate(-8deg); } 55% { opacity: 1; transform: translateY(0) scale(0.94) rotate(0deg); } 72% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }
.reply.is-sealing .sealing__card { animation: rise-in 600ms var(--sc-ease-out) both; }
.reply.is-sealing .reply__sealed, .reply.is-sealing [data-done-yes], .reply.is-sealing [data-done-no], .reply.is-sealing [data-change] { animation: rise-in 520ms var(--sc-ease-out) 900ms both; }
.foot { position: relative; border-top: 1px solid rgb(250 247 240 / 0.16); padding: 56px 24px 72px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; font-size: 1rem; }
.foot__crest { width: 88px; height: 88px; color: var(--sage); --crest-ink: var(--ivory); }

/* =================================================== reduced motion ==== */
@media (prefers-reduced-motion: reduce) {
  .gate, .gate__card, .gate__seal, .gate__ribbon span { transition-duration: 200ms !important; transition-delay: 0ms !important; }
  .gate.is-leaving .gate__card, .gate.is-leaving .gate__seal, .gate.is-leaving .gate__ribbon span { transform: none; }
  .silence__line { transform: none; transition-duration: 300ms; }
  .card__inner { transition-duration: 1ms; }
  .card { rotate: 0deg; }
  .reply.is-sealing .sealing__seal, .reply.is-sealing .sealing__card { animation: none; }
  .rsvp__stars { animation: none; }
  .note__pin::after { animation: none; }
  .plant__art .plant__lines path { stroke-dashoffset: 0; }
  .plant__swatch { opacity: 0.9; transform: rotate(-8deg); }
}
/* Acts that only make sense in motion become ordinary sections (page.js
   converts them before the engine mounts), laid out statically here. */
.rm .hero__stage { position: relative; height: 100svh; }
.rm .palace__stage, .rm .day__stage, .rm .gifts__stage, .rm .menu__stage { position: relative; height: auto; min-height: 100svh; }
.rm .palace__drone, .rm .palace__poster, .rm .palace__ambient, .rm .aisle__gl, .rm .palace__dip, .rm .palace__look, .rm .notes__lines, .rm .note__pin, .rm .aisle__walk, .rm .palace__years { display: none; }
.rm .palace__stage { display: grid; }
.rm .aisle { position: relative; left: auto; transform: none; width: 100%; height: 80svh; opacity: 1; }
.rm .palace__title { position: absolute; top: calc(80svh - 12rem); bottom: auto; opacity: 1 !important; }
.rm .palace__scrim { height: 80svh; }
.rm .notes { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 16px; padding: 28px var(--sc-gutter) 56px; }
.rm .note { position: relative; opacity: 1; visibility: visible; }
.rm .note__tag { position: relative; width: auto; transform: none; }
.rm .day__list li { opacity: 1; }
.rm .gifts__stage { padding: calc(var(--bar-h) + 7rem) 24px 12svh; }
.rm .env { margin-top: 0; aspect-ratio: auto; }
.rm .env__back, .rm .env__front, .rm .env__flap, .rm .env__seal { display: none; }
.rm .env__card { position: relative; inset: auto; height: auto; min-height: 18rem; box-shadow: var(--sc-e2); }
.rm .menu__card { position: relative; inset: auto; width: auto; margin: -2rem 12px 24px; }
.rm .menu__media { position: relative; height: 60svh; right: 0; }
.rm .menu__media { clip-path: none; }
.rm .menu__media video, .rm .menu__media .sc-stage__poster, .rm .menu__card { transform: none; }

/* A small code after the send error says where it failed (404, 503, 502…). */
.err[data-code]::after { content: ' (' attr(data-code) ')'; font-size: 0.8em; opacity: 0.75; }