/* ==========================================================================
   Benjamin & Jael — wedding site
   Colors, fonts and sizes live in the :root block below. Change them there.
   ========================================================================== */

:root {
  /* Colors */
  --plum: #513553;          /* main purple background */
  --cream: #e9d7c2;         /* light text on purple, buttons */
  --nav-bg: #2f1d31;        /* top navigation bar: deep plum, a shade under the velvet */
  --nav-line: #b89a6e;      /* the bar's fine champagne-gold edge */
  --paper: #fdf4ea;         /* RSVP form card */
  --sand: #e6d3be;          /* RSVP page background */
  --linen: #eaddcf;         /* RSVP option tiles */
  --ink: #52402f;           /* dark brown text */
  --ink-soft: #856d55;      /* script names on the card */
  --nav-ink: #e9d7c2;       /* navigation links (cream) */

  /* Fonts */
  --serif: "Lora", Georgia, serif;
  --script: "Pinyon Script", cursive;
  --display: "Cormorant Garamond", Georgia, serif;
  --caps: "Cormorant SC", Georgia, serif;
  --mono: "Courier Prime", "Courier New", monospace;

  /* Layout unit: the original Canva design was 962 units wide.
     Every artwork position below is written in those units. */
  --u: calc(min(100vw, 1100px) / 962);
  --nav-h: 56px;
}

/* On phones the artwork is zoomed in a little so the card text stays readable;
   decorations at the far edges are allowed to crop. Raise 800 to zoom out more. */
@media (max-width: 700px) {
  :root { --u: calc(100vw / 800); --nav-h: 52px; }
}

/* On computers (wide screens) everything is shown larger: the artwork grows with the window up
   to 1480px wide (it stopped at 1100px before), but only as far as the window's height allows, so
   the whole save-the-date card, down to the year (unit 679) and a little below, fits on screen
   without scrolling. Raise 730 for more room under the card. It's never smaller than before.
   The rest of the PC sizes are at the end. */
@media (min-width: 1100px) {
  :root {
    --nav-h: 66px;
    --u: max(1100px / 962, min(min(100vw, 1480px) / 962, (100svh - var(--nav-h)) / 730));
  }
}

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

/* No blue flash when tapping links and buttons on phones (each has its own press effect).
   The keyboard focus outline below stays, for people who navigate without a mouse. */
html { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--plum);
  color: var(--cream);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: none; height: auto; user-select: none; -webkit-user-drag: none; }

a { color: inherit; }

/* Smooth fade between pages (Chrome, Edge, Safari 18+) */
@view-transition { navigation: auto; }

/* ---------- Top navigation ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 2.5vw, 28px);
  padding: 0 clamp(16px, 3vw, 32px);
  background: linear-gradient(var(--nav-bg), #27172a);
  border-bottom: 1px solid color-mix(in srgb, var(--nav-line) 50%, transparent);
  box-shadow: 0 6px 18px rgb(12 4 14 / 0.3);
}

.site-nav a {
  font-family: var(--caps);
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--nav-ink);
  opacity: 0.62;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 8px 0;
  position: relative;
  transition: opacity 0.2s ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { opacity: 1; }
.site-nav a:hover::after { transform: scaleX(1); }

@media (max-width: 700px) {
  .site-nav { justify-content: center; }
}

/* ---------- Shared pieces ---------- */

/* A centered artboard 962 units wide that artwork is positioned on */
.canvas {
  position: relative;
  width: calc(962 * var(--u));
  margin-left: calc(50% - 481 * var(--u));
}

.art {
  position: absolute;
  pointer-events: none;
}

/* The velvet cloth behind the cover and the save-the-date page */
.velvet { background: var(--plum) url("images/velvet.jpg") center top / cover; }

.caps-link {
  display: inline-block;
  font-family: var(--caps);
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 8px;
  transition: opacity 0.2s ease, letter-spacing 0.3s ease;
}
.caps-link:hover { opacity: 0.7; }

/* The J B monogram, captured from the original Canva design */
.monogram { margin: 0 auto; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

.fade-up { animation: fade-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.fade-up.d1 { animation-delay: 0.15s; }
.fade-up.d2 { animation-delay: 0.3s; }
.fade-up.d3 { animation-delay: 0.45s; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Home page (index.html), part 1 — the sealed envelope
   It lies over the save the date; opening it reveals the page underneath.
   ========================================================================== */

html { scrollbar-gutter: stable; }   /* page doesn't shift when the scrollbar comes back */
html.sealed body { overflow: hidden; }

.cover { display: none; }
html.sealed .cover,
html.resealing .cover {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 40;
  overflow: clip;  /* the hidden card below the envelope mustn't spill out */
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vh, 20px);
  padding: 24px 16px 32px;
  text-align: center;
}
/* The cloth sits on its own layer. main.js lines it up exactly with the page's cloth
   underneath, so it can be removed without any visible change. */
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--plum) url("images/velvet.jpg") no-repeat;
  background-position: var(--cloth-pos, center);
  background-size: var(--cloth-size, cover);
}

.cover-eyebrow {
  margin: 0;
  font-size: clamp(12px, 1.5vw, 15px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cover-names {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(44px, 8vw, 78px);
  line-height: 1.1;
}

.cover-envelope {
  display: block;
  width: min(92vw, 760px, (100svh - var(--nav-h) - 230px) * 1.332);
  border-radius: 12px;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cover-envelope:hover { transform: translateY(-6px) rotate(-0.6deg); }

.cover-open {
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: 0.22em;
}

/* --- The envelope, in layers (back to front): body, card, pocket, flap ---
   It's the open photo folded along its fold line (row 553 of its 1219, where the front lace starts). The box is the part
   below the line; the flap hinges on the box's top edge. Sizes below are shares of that box. */

.env {
  position: relative;
  display: block;
  aspect-ratio: 887 / 666;
  perspective: 1800px;
  perspective-origin: 50% 0;   /* seen from the fold, so the unfolding flap stays behind the rising card */
  container-type: inline-size;
}
.env > img,
.env-card-clip,
.env-flap { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Soft shadow under the envelope (a plain gradient: cheap to animate, unlike a filter) */
.env::before {
  content: "";
  position: absolute;
  left: 4%; right: 4%; bottom: -7%;
  height: 22%;
  background: radial-gradient(closest-side, rgb(10 4 14 / 0.55), transparent);
  opacity: 0.85;
  transition: opacity 0.5s ease;
}
.cover-envelope:hover .env::before { opacity: 1; }
.env-inside    { z-index: 1; }
/* Hides the card below the envelope. The bottom 1% of the envelope photo is a soft,
   see-through edge, so the cut sits 3% above the bottom to keep the card from peeking out. */
.env-card-clip { z-index: 2; clip-path: inset(-300% -50% 3% -50%); }
.env-pocket    { z-index: 3; }
.env-flap      { z-index: 4; transform-origin: 50% 0; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.flap-front, .flap-back { position: absolute; left: 0; width: 100%; backface-visibility: hidden; }
/* Outside: the closed photo's flap, at the same width. Its first few pixels are a soft edge,
   so it sits that much above the fold to put its solid edge right on the fold. */
.flap-front    { top: -0.86%; height: 98.21%; }
/* Inside: the open photo above the fold line, plus 10 rows below it that tuck over the body
   (shifted down by those 10 rows, so the fold line itself lands on the hinge) */
.flap-back     { top: 0; height: 84.53%; transform: translateY(-1.776%) rotateX(180deg); }

/* The flap lifts a little on hover, hinting that it opens */
.cover-envelope:hover .env-flap { transform: rotateX(16deg); }

/* The card inside the envelope (same artwork as the card on the page), placed exactly as in the
   open photo, just lower: it waits with its top edge on the fold line */
.env-card {
  position: absolute;
  left: 12.97%;
  top: 0;
  width: 74.41%;
  will-change: transform;
}
.cover.is-opening .env-card { box-shadow: 0 3px 8px rgb(20 8 24 / 0.45), 0 10px 26px rgb(20 8 24 / 0.4); }

/* --- Opening sequence. main.js adds the classes; its timings match these. ---
   1. click: words fade, envelope settles back, flap unfolds from the fold line
   2. once it's open, the card slides up out of the envelope (main.js)
   3. the open envelope, card and all, glides into its place on the page while the scene
      gathers around it */
.cover-eyebrow, .cover-names, .cover-open { transition: opacity 0.4s ease; }
.cover.is-opening .cover-eyebrow,
.cover.is-opening .cover-names,
.cover.is-opening .cover-open { opacity: 0; }
.cover.is-opening .cover-envelope { transform: none; pointer-events: none; cursor: default; }
.cover.is-opening .env      { animation: env-settle 1.2s cubic-bezier(0.45, 0, 0.25, 1) forwards; }
/* The swing is one eased motion; a separate step moves the flap behind the card the moment it
   passes upright (halfway through, with this evenly balanced easing). */
.cover.is-opening .env-flap {
  animation: flap-open 1.2s cubic-bezier(0.37, 0, 0.63, 1) 0.1s forwards, flap-behind 1.2s linear 0.1s forwards;
  will-change: transform;
}


@keyframes env-settle { to { transform: translateY(14%) scale(0.84); } }
@keyframes flap-open { to { transform: rotateX(180deg); } }
@keyframes flap-behind {
  0%, 49.9% { z-index: 4; }
  50%, 100% { z-index: 1; }
}


/* 3. The page takes over: unfolded, the cover's envelope is exactly the open photo, so the page's
   open envelope lines up with it and the cover is hidden without any visible change. main.js
   then glides envelope and card into place together. */
html.gliding .cover { visibility: hidden; pointer-events: none; }

/* The page's layers are made ahead of time so the hand-over doesn't stutter, and kept afterwards:
   dropping them when the animation ends would nudge everything by up to a pixel */
.hero .art,
.hero-card,
.details,
.contact { will-change: transform, opacity, translate; }

/* Hidden starting positions while sealed (released the moment the glide begins). They sit
   under the cover at a whisker above zero rather than at zero, so the browser has already
   drawn them when the glide starts and the hand-over doesn't hitch. */
html.sealed:not(.gliding) .hero .art,
html.sealed:not(.gliding) .hero-card,
html.sealed:not(.gliding) .details,
html.sealed:not(.gliding) .contact { opacity: 0.002; }
html.sealed:not(.gliding) .hero .art:not(.envelope, .glide-shadow) { translate: 0 calc(30 * var(--u)); }

html.gliding .hero .art,
html.gliding .details,
html.gliding .contact {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.55s ease, translate 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* the envelope appears at once (it takes over from the cover's) and main.js moves it */
html.gliding .hero .envelope,
html.gliding .hero .glide-shadow { transition: none; }
html.gliding .hero .ribbon       { transition-delay: 0.55s; }
html.gliding .hero .chain-1      { transition-delay: 0.65s; }
html.gliding .hero .spoon        { transition-delay: 0.7s; }
html.gliding .hero .chain-2      { transition-delay: 0.85s; }
html.gliding .hero .photo-frame  { transition-delay: 0.95s; }
html.gliding .details,
html.gliding .contact            { transition-delay: 1.1s; }

/* ==========================================================================
   Home page (index.html), part 2 — Save the date
   ========================================================================== */

#save-the-date { scroll-margin-top: var(--nav-h); }
.hero-card:focus { outline: none; }

/* --- Hero: the open envelope with the card --- */

/* Decorations past the screen's sides are cropped (otherwise phones zoom the whole page out
   to fit them), but nothing is cropped top or bottom, so the envelope can glide in from anywhere.
   The stacking order keeps the card between the envelope's back and its lace pocket. */
.velvet { overflow-x: clip; }
.hero { position: relative; z-index: 1; }
.hero .canvas { height: calc(1010 * var(--u)); }
.hero .glide-shadow   { z-index: 0; }
.hero .envelope       { z-index: 1; }
.hero-card            { z-index: 2; }
.hero .envelope-front { z-index: 3; }
.hero .chain-2        { z-index: 4; }
.hero .photo-frame    { z-index: 5; }

.ribbon   { left: calc(28 * var(--u));  top: calc(33 * var(--u));  width: calc(439 * var(--u)); }
.spoon    { left: calc(764 * var(--u)); top: calc(42 * var(--u));  width: calc(100 * var(--u)); transform: rotate(-2.35deg); }
.chain-1  { left: calc(628 * var(--u)); top: calc(131 * var(--u)); width: calc(292 * var(--u)); transform: rotate(-3.44deg); }

/* The open envelope (the open photo, 887 x 1219) */
.envelope { left: calc(175 * var(--u)); top: calc(155 * var(--u)); width: calc(608 * var(--u)); transform-origin: 0 0; }
/* The cover envelope's soft shadow, carried along by the glide and fading as it lands */
.glide-shadow {
  left: calc(199.32 * var(--u)); top: calc(922.1 * var(--u));   /* as under the cover's envelope body */
  width: calc(559.36 * var(--u)); height: calc(100.43 * var(--u));
  background: radial-gradient(closest-side, rgb(10 4 14 / 0.55), transparent);
  transform-origin: 0 0;
  visibility: hidden;
}
html.gliding .glide-shadow { visibility: visible; }

/* The save-the-date card. Its text is sized in card widths (cqw), so the same card
   can appear inside the sealed envelope and on the page. Each line sits by its center. */
.paper-card {
  position: absolute;
  margin: 0;
  aspect-ratio: 660 / 745;
  container-type: inline-size;
  background: url("images/card.webp") center / 100% 100%;
  color: var(--ink);
  font-weight: 400;
  text-align: center;
}
.paper-card > span { position: absolute; left: 0.43cqw; right: 0; line-height: 1.2; transform: translateY(-50%); white-space: nowrap; }
.card-eyebrow { top: 12.17cqw; font-size: 5.53cqw; letter-spacing: 0.17em; text-transform: uppercase; }
.card-names   { top: 23cqw; font-family: var(--script); color: var(--ink-soft); font-size: 11.49cqw; }
.card-month   { top: 40.9cqw; font-size: 5.31cqw; letter-spacing: 0.3em; text-transform: uppercase; padding-left: 0.3em; }
.card-day     { top: 58.59cqw; font-family: var(--display); font-weight: 500; font-size: 21.66cqw; font-variant-numeric: lining-nums; }
.card-year    { top: 75.16cqw; font-size: 5.97cqw; letter-spacing: 0.19em; font-weight: 500; padding-left: 0.19em; }

/* The card's place in the open envelope (matches the card in the open photo) */
.hero-card {
  left: calc(253.83 * var(--u)); top: calc(322.94 * var(--u)); width: calc(452.4 * var(--u)); transform-origin: 0 0;
  /* the card's own soft shadow on the lace (the photo's baked-in one is lifted, since it showed
     while the card was still down in the envelope) */
  box-shadow: 0 3px 8px rgb(20 8 24 / 0.45), 0 10px 26px rgb(20 8 24 / 0.4);
}

.chain-2 { left: calc(627 * var(--u)); top: calc(689 * var(--u)); width: calc(275 * var(--u)); transform: rotate(65.5deg) scaleY(-1); }

/* The oval frame. To change the picture, replace images/engagement-photo.jpg */
.photo-frame {
  left: calc(641 * var(--u));
  top: calc(662 * var(--u));
  width: calc(218 * var(--u));
  transform: rotate(8.9deg);
}
.photo-frame .photo {
  position: absolute;
  left: 6.4%; top: 4.2%; width: 87.2%; height: 91.6%;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 50%;
}
.photo-frame .frame { position: relative; width: 100%; }

/* --- Details: venue, countdown, RSVP call-to-action --- */

.details { position: relative; overflow: clip; text-align: center; }
.details .canvas { min-height: calc(1142 * var(--u)); padding-bottom: calc(150 * var(--u)); }

/* Pinned to the screen edges on wide screens; on phones they hang off the
   edges of the (wider-than-phone) canvas like the rest of the art. */
.details { --edge: min(0px, 50% - 481 * var(--u)); }
.babys-breath { left: calc(var(--edge) - 10 * var(--u)); top: calc(16 * var(--u)); width: calc(214 * var(--u)); }
.tray         { left: calc(var(--edge) - 34 * var(--u)); bottom: 0; width: calc(414 * var(--u)); }
.lace-drape   { right: calc(var(--edge) - 3 * var(--u)); bottom: 0; width: calc(430 * var(--u)); }

.label {
  margin: 0;
  font-size: max(14px, calc(19.7 * var(--u)));
  letter-spacing: 0.12em;
  line-height: 1.4;
}

.venue { padding-top: calc(44 * var(--u)); position: relative; }
.venue .label { font-weight: 600; }
.venue-name {
  margin: calc(23 * var(--u)) 0 0;
  font-size: max(16px, calc(21.6 * var(--u)));
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}
.venue-town {
  margin: calc(12 * var(--u)) 0 0;
  font-family: var(--script);
  font-size: max(22px, calc(27.5 * var(--u)));
  line-height: 1.4;
}

.countdown {
  position: relative;
  width: calc(450 * var(--u));
  min-width: min(330px, 100vw - 40px);
  aspect-ratio: 328 / 267;
  margin: calc(130 * var(--u)) auto 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: calc(14 * var(--u));
  color: var(--ink);
  background: url("images/torn-paper.webp") center / 100% 100% no-repeat;
}
.countdown h2 {
  margin: 0;
  font-size: max(17px, calc(29 * var(--u)));
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.countdown-clock {
  display: flex;
  justify-content: center;
  gap: 0.2em;
  margin-top: 0.5em;
  font-family: var(--mono);
  font-size: max(21px, calc(34 * var(--u)));
  line-height: 1.15;
  letter-spacing: 0.02em;
}
.countdown-clock .unit { display: flex; flex-direction: column; align-items: center; width: 2.1em; }
.countdown-clock .unit span:first-child { font-variant-numeric: tabular-nums; }
.countdown-clock .unit small { font-size: max(8px, 0.4em); letter-spacing: 0; margin-top: 1.4em; text-transform: uppercase; }
.countdown-clock .sep { line-height: 1.15; }
.countdown-done { margin: 0.6em 0 0; font-family: var(--script); font-size: max(28px, calc(40 * var(--u))); }

.join { margin-top: calc(90 * var(--u)); position: relative; z-index: 1; }

/* Keep text inside the screen even when the artboard is wider than a phone */
.venue, .join { max-width: calc(100vw - 32px); margin-left: auto; margin-right: auto; }

.button {
  display: inline-block;
  margin-top: calc(45 * var(--u));
  min-width: calc(310 * var(--u));
  padding: 0.83em 1.4em;
  font-family: var(--caps);
  font-size: max(17px, calc(21.6 * var(--u)));
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--cream);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.button:hover { transform: translateY(-2px); background: #f1e3d2; box-shadow: 0 10px 24px rgb(0 0 0 / 0.18); }
.button:active { transform: translateY(0) scale(0.98); }

.arrow {
  display: block;
  width: calc(186 * var(--u));
  min-width: 110px;
  margin: calc(17 * var(--u)) auto 0;
  transform: translateX(calc(-8 * var(--u)));
}

/* --- Footer: questions + monogram --- */

.contact {
  position: relative;
  overflow: clip;
  padding: calc(34 * var(--u)) 16px calc(44 * var(--u));
  text-align: center;
  color: var(--ink);
  background: var(--cream);
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/lace-background.jpg") 50% 66% / max(100%, 1157 * var(--u)) auto no-repeat;
  opacity: 0.52;
}
.contact > * { position: relative; }
.contact p {
  margin: 0;
  font-size: max(14px, calc(16.8 * var(--u)));
  letter-spacing: 0.12em;
  line-height: 1.15;
}
.contact .email { margin-top: calc(18 * var(--u)); }
.contact .email a { text-decoration: none; border-bottom: 1px solid rgb(82 64 47 / 0.35); transition: border-color 0.2s ease; }
.contact .email a:hover { border-color: currentColor; }
.contact .monogram { width: max(96px, calc(117 * var(--u))); margin-top: calc(20 * var(--u)); }
.contact .caps-link { margin-top: calc(14 * var(--u)); font-size: max(12px, calc(13.1 * var(--u))); letter-spacing: 0.19em; }

/* ==========================================================================
   Page 3 — RSVP (rsvp.html)
   ========================================================================== */

.rsvp-page { background: var(--sand); color: var(--ink); }

.rsvp {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 16px 32px;
  text-align: center;
}

.rsvp .monogram { width: 210px; }

.rsvp-intro {
  margin: 28px 0 24px;
  font-weight: 400;
  font-size: clamp(15px, 2vw, 18px);
  letter-spacing: 0.08em;
  line-height: 1.7;
}

.rsvp-card {
  text-align: left;
  background: var(--paper);
  border-radius: 16px;
  padding: clamp(24px, 5vw, 40px);
  box-shadow: 0 1px 2px rgb(82 64 47 / 0.06), 0 12px 32px rgb(82 64 47 / 0.08);
}

.field { margin: 0 0 28px; padding: 0; border: 0; min-width: 0; }
.field-label, .field legend {
  display: block;
  padding: 0;
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.4;
}
.field .optional { opacity: 0.6; font-size: 0.85em; }

.input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: transparent;
  border: 1px solid #a29383;
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.input:hover { border-color: var(--ink-soft); }
.input:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 3px rgb(133 109 85 / 0.18); }
.field.invalid .input { border-color: #a4453a; }

.options { display: grid; gap: 10px; }
.option { position: relative; display: block; cursor: pointer; }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option span {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  font-size: 17px;
  background: var(--linen);
  border: 1px solid transparent;
  border-radius: 10px;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.option span::before {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  border: 1px solid var(--ink-soft);
  border-radius: 50%;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.option:hover span { background: #e3d3c2; }
.option:active span { transform: scale(0.99); }
.option input:checked + span { background: #dfccb8; border-color: var(--ink-soft); }
.option input:checked + span::before { background: var(--ink); box-shadow: inset 0 0 0 3px #dfccb8; }
.option input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.field.invalid .option span { border-color: #a4453a; }

.error-text { display: none; margin: 8px 0 0; font-size: 14px; color: #a4453a; }
.field.invalid .error-text { display: block; }

.guest-fields, .reveal { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.35s ease, opacity 0.3s ease; }
.guest-fields > div, .reveal > div { overflow: hidden; }
.guest-fields.collapsed, .reveal.collapsed { grid-template-rows: 0fr; opacity: 0; }

/* "Names of guests": one numbered slot per guest, the first being the guest themself */
.party-names { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.party-names li { display: flex; align-items: center; gap: 12px; animation: fade-up 0.3s ease backwards; }
.party-names .input { flex: 1; min-width: 0; }
.party-num {
  flex: none;
  width: 8px; height: 8px;
  margin: 0 2px;
  background: var(--ink-soft);
  border-radius: 50%;
  opacity: 0.6;
}
.party-you-name {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  font-size: 17px;
  background: var(--linen);
  border-radius: 10px;
  overflow-wrap: anywhere;
}
.party-you-name small { flex: none; font-size: 13px; color: var(--ink-soft); }
.party-you-name .is-empty { color: var(--ink-soft); font-style: italic; }
.field.invalid .party-names input:placeholder-shown { border-color: #a4453a; }

/* "How many guests in total?" under the 3+ option */
.party-size {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 10px;
  padding: 12px 12px 12px 16px;
  font-size: 16px;
  background: var(--linen);
  border-radius: 10px;
}
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button {
  width: 44px; height: 44px;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgb(82 64 47 / 0.2);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}
.stepper button:hover { background: #fff; }
.stepper button:active { transform: scale(0.92); }
.stepper button[disabled] { opacity: 0.4; cursor: default; transform: none; }
.stepper input {
  width: 52px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 26px;
  text-align: center;
  color: var(--ink);
  background: transparent;
  border: 0;
  -moz-appearance: textfield;
}
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.submit {
  width: 100%;
  min-width: 0; /* .button's minimum width is for the save-the-date page; here it would spill out of narrow cards */
  margin-top: 4px;
  border-radius: 999px;
  font-size: 22px;
  padding: 14px 24px;
  box-shadow: none;
  font-family: var(--display);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.04em;
}
.submit:hover { box-shadow: 0 8px 20px rgb(82 64 47 / 0.14); }
.submit[disabled] { opacity: 0.6; cursor: progress; transform: none; }

.form-status { margin: 16px 0 0; text-align: center; font-size: 15px; line-height: 1.5; min-height: 1.5em; }
.form-status.error { color: #a4453a; }

.thanks { text-align: center; padding: 24px 0 8px; animation: fade-up 0.6s ease both; }
.thanks h2 { margin: 0; font-family: var(--script); font-weight: 400; font-size: clamp(40px, 8vw, 56px); line-height: 1.2; color: var(--ink-soft); }
.thanks p { margin: 12px 0 0; font-size: 17px; line-height: 1.6; letter-spacing: 0.04em; }

.rsvp .caps-link { margin-top: 20px; font-size: 13px; letter-spacing: 0.2em; }

/* ==========================================================================
   Private RSVPs page (rsvps.html). Uses the RSVP page's colors and form pieces.
   ========================================================================== */

.dash-page [hidden] { display: none !important; }

.dash-page svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.dash-script {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(46px, 8vw, 60px);
  line-height: 1.15;
  color: var(--ink-soft);
}

/* Labels and buttons on this page use the plain serif (not the small caps), so they're easy to read */
.dash-muted {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
}

/* --- Sign in --- */

.dash-login {
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.dash-login-card {
  width: min(100%, 420px);
  padding: 40px clamp(24px, 6vw, 36px) 32px;
  text-align: center;
  background: var(--paper);
  border: 1px solid rgb(82 64 47 / 0.08);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgb(82 64 47 / 0.06), 0 18px 44px rgb(82 64 47 / 0.12);
}
.dash-login-card .monogram { width: 112px; margin-bottom: 8px; }
.dash-login-card form { margin-top: 28px; text-align: left; }
.dash-login-card .submit { color: var(--cream); background: var(--plum); }
.dash-login-card .submit:hover { background: #5e3f61; box-shadow: 0 8px 20px rgb(47 29 49 / 0.25); }

.dash-password { position: relative; }
.dash-password .input { padding-right: 56px; }
.dash-reveal {
  position: absolute;
  top: 50%; right: 6px;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.dash-reveal:hover { color: var(--ink); background: rgb(82 64 47 / 0.06); }
.dash-reveal[aria-pressed="true"] { color: var(--ink); }

.dash-error { min-height: 1.5em; margin: 10px 0 12px; font-size: 14px; line-height: 1.5; color: #a4453a; }

.shake { animation: shake 0.4s ease; }
@keyframes shake {
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* --- The RSVPs --- */

.dash { max-width: 1080px; margin: 0 auto; padding: 32px 16px 48px; }

.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }

.dash-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.dash-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgb(82 64 47 / 0.16);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.dash-chip:hover { background: #fff; box-shadow: 0 6px 16px rgb(82 64 47 / 0.1); transform: translateY(-1px); }
.dash-chip:active { transform: scale(0.96); }
.dash-chip[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.dash-chip.spinning svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Phones: the buttons are icons only (their words stay for screen readers) */
@media (max-width: 520px) {
  .dash-head { align-items: center; }
  .dash-chip { width: 44px; padding: 0; justify-content: center; }
  .dash-chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }

.dash-stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid rgb(82 64 47 / 0.08);
  border-radius: 16px;
}
.dash-stat-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 46px;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.dash-stat-label {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
}
.dash-stat-main {
  color: var(--cream);
  background: var(--plum) url("images/velvet.jpg") center / cover;
  border-color: transparent;
  box-shadow: 0 12px 28px rgb(47 29 49 / 0.22);
}
.dash-stat-main .dash-stat-num { font-size: 60px; }
.dash-stat-main .dash-stat-label { color: var(--cream); opacity: 0.85; }
.dash-stat.pop { animation: pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pop { 40% { transform: scale(1.04); } }

@media (max-width: 760px) {
  .dash-stats { grid-template-columns: repeat(3, 1fr); }
  .dash-stat-main { grid-column: 1 / -1; }
  .dash-stat { padding: 16px; }
  .dash-stat-num { font-size: 38px; }
  .dash-stat-label { font-size: 14px; }
}

.dash-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 760px) { .dash-notes { grid-template-columns: 1fr; } }

.dash-panel {
  padding: 18px 22px 10px;
  background: var(--paper);
  border: 1px solid rgb(82 64 47 / 0.08);
  border-radius: 16px;
}
.dash-panel h2 {
  margin: 0 0 4px;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.dash-panel ul { margin: 0; padding: 0; list-style: none; max-height: 232px; overflow-y: auto; }
.dash-panel li { padding: 10px 0; border-top: 1px solid rgb(82 64 47 / 0.08); line-height: 1.45; }
.dash-panel li:first-child { border-top: 0; }
.dash-panel li span { display: block; font-size: 16px; overflow-wrap: anywhere; }
.dash-panel li small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-soft); }
.dash-panel .dash-none { font-size: 15px; font-style: italic; color: var(--ink-soft); }

.dash-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 28px 0 16px; }

.dash-search { position: relative; flex: 1 1 260px; }
.dash-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.dash-search input {
  width: 100%;
  min-height: 48px;
  padding: 0 18px 0 46px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgb(82 64 47 / 0.16);
  border-radius: 999px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.dash-search input::placeholder { color: var(--ink-soft); opacity: 0.8; }
.dash-search input:focus { outline: none; background: #fff; border-color: var(--ink-soft); box-shadow: 0 0 0 3px rgb(133 109 85 / 0.18); }

.dash-filter { display: inline-flex; padding: 4px; background: var(--linen); border-radius: 999px; }
.dash-filter button {
  min-height: 40px;
  padding: 0 16px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.dash-filter button:hover { color: var(--ink); }
.dash-filter button:active { transform: scale(0.96); }
.dash-filter button[aria-checked="true"] { color: var(--ink); background: var(--paper); box-shadow: 0 2px 6px rgb(82 64 47 / 0.12); }
@media (max-width: 520px) {
  .dash-filter { width: 100%; }
  .dash-filter button { flex: 1; padding: 0 8px; }
}

/* Cards / Sheet switch */
.dash-view button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.dash-view svg { width: 16px; height: 16px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Sheet mode: every RSVP as a row of one table --- */

.dash-list.is-sheet { display: block; }

.dash-sheet-wrap {
  overflow: auto;
  max-height: min(72vh, 760px);
  background: #fff;
  border: 1px solid rgb(82 64 47 / 0.1);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgb(82 64 47 / 0.05), 0 8px 22px rgb(82 64 47 / 0.06);
  animation: fade-up 0.35s ease backwards;
}

.dash-sheet {
  width: 100%;
  min-width: 960px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  line-height: 1.45;
}

.dash-sheet th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0;
  text-align: left;
  background: var(--plum);
  white-space: nowrap;
}
.dash-sheet th button {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  font: inherit;
  font-weight: 600;
  color: var(--cream);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.dash-sheet th button:hover { background: rgb(255 255 255 / 0.08); }
.dash-sheet th button:focus-visible { outline: 2px solid var(--cream); outline-offset: -4px; }
.dash-sheet th svg { width: 14px; height: 14px; opacity: 0.35; transition: opacity 0.2s ease, transform 0.2s ease; }
.dash-sheet th[aria-sort="ascending"] svg,
.dash-sheet th[aria-sort="descending"] svg { opacity: 1; }
.dash-sheet th[aria-sort="ascending"] svg path:last-child,
.dash-sheet th[aria-sort="descending"] svg path:first-child { opacity: 0; }
.dash-sheet th.is-num button { justify-content: center; }

.dash-sheet td {
  padding: 10px 14px;
  vertical-align: top;
  background: #fff;
  border-bottom: 1px solid rgb(82 64 47 / 0.08);
  overflow-wrap: anywhere;
  transition: background-color 0.15s ease;
}
/* Names stay pinned on the left while the table scrolls sideways (phones, narrow windows) */
.dash-sheet .is-name { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 rgb(82 64 47 / 0.08); }
.dash-sheet th.is-name { z-index: 2; box-shadow: none; }
.dash-sheet tbody tr:nth-child(even) td { background: #fbf5ee; }
.dash-sheet tbody tr:hover td { background: #f3eaf3; }
.dash-sheet tbody tr { transition: opacity 0.25s ease; }
.dash-sheet tbody tr.leaving { opacity: 0; }

.dash-sheet .is-when { width: 1%; white-space: nowrap; }
.dash-sheet td.is-when { color: var(--ink-soft); font-size: 13px; }
.dash-sheet .is-name { font-weight: 600; min-width: 150px; }
.dash-sheet .is-num { width: 1%; text-align: center; font-variant-numeric: tabular-nums; }
.dash-sheet td:nth-child(5), .dash-sheet td:nth-child(6), .dash-sheet td:nth-child(7) { min-width: 160px; }
.dash-sheet .is-actions { width: 1%; padding: 4px 8px; text-align: right; white-space: nowrap; vertical-align: middle; }
.dash-sheet .is-actions .dash-remove { padding: 0 10px; }
.dash-sheet .is-actions .dash-confirm { flex-wrap: nowrap; animation: none; }

.dash-pill {
  display: inline-block;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 999px;
}
.dash-pill.is-yes { color: var(--plum); background: rgb(81 53 83 / 0.1); }
.dash-pill.is-no { color: var(--ink-soft); background: var(--linen); font-style: italic; }

.dash-sheet tfoot td {
  position: sticky;
  bottom: 0;
  font-weight: 600;
  background: var(--linen);
  border-top: 1px solid rgb(82 64 47 / 0.15);
  border-bottom: 0;
}

.dash-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 760px) { .dash-list { grid-template-columns: 1fr; } }

.dash-card {
  position: relative;
  overflow: hidden;
  padding: 20px 22px 12px 26px;
  background: var(--paper);
  border: 1px solid rgb(82 64 47 / 0.08);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgb(82 64 47 / 0.05), 0 8px 22px rgb(82 64 47 / 0.06);
  animation: card-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.dash-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--plum); }
.dash-card.is-no::before { background: #c4b19c; }
.dash-card.leaving { opacity: 0; transform: scale(0.97); }
@keyframes card-in { from { opacity: 0; transform: translateY(10px); } }

.dash-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dash-card h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 25px; line-height: 1.15; overflow-wrap: anywhere; }
.dash-when { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }

.dash-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--plum);
  background: rgb(81 53 83 / 0.1);
  border-radius: 999px;
}
.dash-badge svg { width: 14px; height: 14px; stroke-width: 2.2; }
.is-no .dash-badge { color: var(--ink-soft); background: var(--linen); }

.dash-party { margin: 14px 0 0; font-size: 16px; font-weight: 500; }

.dash-card dl { margin: 8px 0 0; }
.dash-detail { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid rgb(82 64 47 / 0.08); }
.dash-detail dt { font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--ink-soft); }
.dash-detail dd { margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.dash-names { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.dash-names li { display: flex; align-items: baseline; gap: 8px; }
.dash-names li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--plum); opacity: 0.55; transform: translateY(-2px); }

.dash-card-foot { display: flex; justify-content: flex-end; min-height: 44px; margin-top: 4px; }

.dash-remove,
.dash-confirm button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.dash-remove svg { width: 16px; height: 16px; }
.dash-remove:hover { color: #a4453a; background: rgb(164 69 58 / 0.08); }
.dash-remove:active, .dash-confirm button:active { transform: scale(0.95); }

.dash-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; animation: fade-up 0.25s ease backwards; }
.dash-confirm span { margin-right: 4px; font-size: 14px; }
.dash-confirm button { border-color: rgb(82 64 47 / 0.2); color: var(--ink); }
.dash-confirm button:hover { background: rgb(82 64 47 / 0.06); }
.dash-confirm .danger { color: #fff; background: #a4453a; border-color: #a4453a; }
.dash-confirm .danger:hover { background: #8f3a30; }
.dash-confirm button[disabled] { opacity: 0.7; cursor: progress; }

/* Empty, nothing-found and error messages */
.dash-state {
  grid-column: 1 / -1;
  padding: 48px 16px;
  text-align: center;
  border: 1px dashed rgb(82 64 47 / 0.25);
  border-radius: 16px;
  animation: fade-up 0.5s ease backwards;
}
.dash-state .monogram { width: 84px; opacity: 0.85; }
.dash-state h3 { margin: 12px 0 4px; font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1.2; color: var(--ink); }
.dash-state p { margin: 0; font-size: 16px; line-height: 1.6; }
.dash-state.is-error h3 { color: #a4453a; }

/* Loading: soft placeholder cards */
.dash-skeleton { min-height: 160px; display: grid; align-content: start; gap: 12px; }
.dash-skeleton i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--linen) 25%, #f4e9dc 50%, var(--linen) 75%) 0 0 / 200% 100%; animation: shimmer 1.3s ease-in-out infinite; }
.dash-skeleton i:first-child { width: 55%; height: 22px; }
.dash-skeleton i:nth-child(2) { width: 30%; }
.dash-skeleton i:nth-child(3) { width: 80%; margin-top: 18px; }
@keyframes shimmer { to { background-position: -200% 0; } }

.dash-foot { margin-top: 32px; text-align: center; font-size: 14px; }

.dash-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 60;
  max-width: calc(100vw - 32px);
  padding: 12px 22px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--cream);
  background: var(--nav-bg);
  border: 1px solid color-mix(in srgb, var(--nav-line) 40%, transparent);
  border-radius: 999px;
  box-shadow: 0 12px 30px rgb(20 8 24 / 0.3);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dash-toast.show { opacity: 1; transform: translate(-50%, 0); }
.dash-toast.is-error { background: #7d2f27; }

/* ==========================================================================
   Computers: larger sizes (screens 1100px and wider; phones and tablets are unchanged)
   ========================================================================== */
@media (min-width: 1100px) {
  .site-nav { gap: 40px; padding: 0 44px; }
  .site-nav a { font-size: 28px; }

  /* the closed envelope and the words around it */
  .cover { gap: 22px; }
  .cover-eyebrow { font-size: 19px; }
  .cover-names { font-size: 104px; }
  .cover-envelope { width: min(1000px, 92vw, (100svh - var(--nav-h) - 290px) * 1.332); }
  .cover-open { font-size: 18px; }

  /* the RSVP page, all of it scaled up together */
  .rsvp { zoom: 1.25; }

  /* the private RSVPs page */
  .dash-login-card { zoom: 1.2; }
  .dash { zoom: 1.12; }
}