/* ==========================================================================
   Jessica & Joshua — 02.07.2027
   Palette and type are lifted from the printed save the date: near-black
   textured ground, warm ivory type, a single antique-gold accent.
   ========================================================================== */

:root {
  /* Night sky: deep navy ground, antique gold foil, warm ivory type. */
  --ink:        #060a16;
  --ink-2:      #0a1122;
  --ink-3:      #101a31;
  --line:       #22304f;
  --line-soft:  #182440;
  --ivory:      #f3ead6;
  --ivory-dim:  #cdc3ae;
  --muted:      #8b90a6;
  --gold:       #d9ac52;
  --gold-soft:  #e8c877;
  --gold-deep:  #a37f34;
  --wax:        #8d2230;
  --ok:         #7fae7a;
  --warn:       #d8a657;
  --err:        #e08d8d;

  --serif: 'Cormorant Garamond', 'Adobe Caslon Pro', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', 'Futura', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --script: 'Pinyon Script', 'Snell Roundhand', 'Apple Chancery', cursive;

  --measure: 62ch;
  --pad: clamp(20px, 5vw, 64px);
}

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

html { overflow-x: hidden; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -10%, #16213f 0%, rgba(6,10,22,0) 62%),
    radial-gradient(ellipse 90% 60% at 85% 110%, #131c38 0%, rgba(6,10,22,0) 60%);
  background-attachment: fixed;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { min-height: 100vh; display: flex; flex-direction: column; }

/* Film grain, the same texture the printed card has. Pointer-events off so it
   never intercepts a tap. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: grain-drift 8s steps(8) infinite;
}
@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1.5%, 1%); }
  50%  { transform: translate(1%, -1.5%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}
/* Content sits above the starfield. */
.site-header, main, .site-footer, .env-stage, .reveal, .admin-wrap, .admin-header, .login-shell {
  position: relative; z-index: 1;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--ivory); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

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

/* --------------------------------------------------------------- typography */

h1, h2, h3 { font-weight: 300; margin: 0 0 0.5em; letter-spacing: 0.02em; }

.display {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 300;
  line-height: 1.15;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.script { font-family: var(--script); text-transform: none; letter-spacing: 0; }

.rule {
  display: flex; align-items: center; gap: 16px;
  color: var(--muted);
  font-style: italic; font-size: 0.95em;
}
.rule::before, .rule::after {
  content: ''; height: 1px; background: var(--line); flex: 1;
}

/* ------------------------------------------------------------------- layout */

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: 720px; }

main { flex: 1 0 auto; }

section { padding: clamp(56px, 9vw, 110px) 0; }
section + section { border-top: 1px solid var(--line-soft); }

/* --------------------------------------------------------------- site nav */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10, 10, 12, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 66px;
}
.brand {
  font-family: var(--serif); color: var(--gold);
  font-size: 22px; letter-spacing: 0.2em; text-transform: uppercase;
}
.brand small {
  display: block; font-family: var(--sans); font-size: 9px;
  letter-spacing: 0.3em; color: var(--muted);
}
.nav { display: flex; gap: clamp(14px, 2.4vw, 30px); flex-wrap: wrap; }
.nav a {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ivory-dim); padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--gold); border-bottom-color: var(--gold-deep); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  color: var(--ivory); font-family: var(--sans); font-size: 11px;
  letter-spacing: 0.2em; padding: 8px 14px; cursor: pointer; text-transform: uppercase;
}
@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--ink-2); border-bottom: 1px solid var(--line);
    padding: 8px var(--pad) 18px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
}

/* ---------------------------------------------------------------- the hero */

.hero {
  position: relative; min-height: min(88vh, 820px);
  display: grid; place-items: center; text-align: center;
  overflow: hidden; padding: 80px 0;
}
.hero-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.12) brightness(0.42);
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(10,10,12,0.25) 0%, rgba(10,10,12,0.86) 72%, var(--ink) 100%);
}
.hero-inner { position: relative; z-index: 2; padding: 0 var(--pad); }

.monogram {
  font-family: var(--script);
  font-size: clamp(76px, 15vw, 150px);
  color: var(--gold);
  line-height: 0.9;
  margin: 0 0 18px;
  text-shadow: 0 2px 30px rgba(0,0,0,0.7);
}

.hero h1 { font-size: clamp(28px, 6.4vw, 60px); margin-bottom: 4px; }
.hero .names { font-size: clamp(22px, 4.6vw, 44px); }
.hero .date {
  font-family: var(--sans); font-size: clamp(14px, 2.4vw, 20px);
  letter-spacing: 0.42em; margin-top: 22px; color: var(--ivory);
}
.hero .venue { color: var(--ivory-dim); font-size: 16px; margin-top: 10px; font-style: italic; }

/* ------------------------------------------------------------- countdown */

.countdown {
  display: flex; justify-content: center; gap: clamp(16px, 4vw, 44px);
  margin-top: 40px; flex-wrap: wrap;
}
.countdown div { min-width: 62px; }
.countdown b {
  display: block; font-family: var(--serif); font-weight: 300;
  font-size: clamp(26px, 5vw, 40px); color: var(--gold); line-height: 1;
}
.countdown span {
  font-family: var(--sans); font-size: 9px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--muted);
}

/* ------------------------------------------------------------------ blocks */

.grid { display: grid; gap: clamp(20px, 3vw, 34px); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid > .span-2 { grid-column: 1 / -1; }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card-block {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  padding: clamp(24px, 4vw, 40px);
}
.card-block h3 {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
.card-block p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(19px, 2.4vw, 23px); color: var(--ivory-dim); max-width: var(--measure); }

.section-title { text-align: center; margin-bottom: clamp(30px, 5vw, 56px); }
.section-title h2 { font-size: clamp(24px, 4.2vw, 38px); }

/* ------------------------------------------------------------------ button */

.btn {
  display: inline-block; cursor: pointer;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; text-align: center;
  padding: 15px 34px;
  border: 1px solid var(--gold-deep);
  background: transparent; color: var(--gold);
  transition: background 0.35s ease, color 0.35s ease;
}
.btn:hover { background: var(--gold); color: var(--ink); }
.btn.solid { background: var(--gold); color: var(--ink); }
.btn.solid:hover { background: var(--ivory); border-color: var(--ivory); }
.btn.ghost { border-color: var(--line); color: var(--ivory-dim); }
.btn.ghost:hover { background: var(--ink-3); color: var(--ivory); }
.btn.small { padding: 9px 18px; font-size: 10px; letter-spacing: 0.18em; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.center { text-align: center; }
.center .btn-row { justify-content: center; }

/* ------------------------------------------------------------------- forms */

.field { margin-bottom: 22px; }
.field label {
  display: block; font-family: var(--sans); font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.field .req { color: var(--gold-deep); }
.field .hint { font-family: var(--sans); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; margin-top: 6px; }

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], input[type=date], select, textarea {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--ivory);
  font-family: var(--serif); font-size: 17px;
  padding: 13px 14px;
  border-radius: 2px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold-deep); background: var(--ink-3); }
input::placeholder, textarea::placeholder { color: #5d5850; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238f8878' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.55; }

.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--err); }
.field-error {
  display: block; font-family: var(--sans); font-size: 12px;
  color: var(--err); margin-top: 7px; letter-spacing: 0.03em;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 620px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
}

.alert {
  border: 1px solid var(--line); border-left-width: 3px;
  padding: 14px 18px; margin-bottom: 26px;
  font-family: var(--sans); font-size: 14px; letter-spacing: 0.02em;
}
.alert.error { border-left-color: var(--err); color: #f0c9c9; background: rgba(140,60,60,0.10); }
.alert.ok    { border-left-color: var(--ok);  color: #cfe4cd; background: rgba(70,120,70,0.10); }
.alert.info  { border-left-color: var(--gold-deep); color: var(--ivory-dim); background: rgba(180,150,80,0.07); }

/* ------------------------------------------------------------------ footer */

.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--line-soft);
  padding: 44px 0; text-align: center;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
}
.site-footer .mono { font-family: var(--script); font-size: 34px; color: var(--gold-deep); letter-spacing: 0; text-transform: none; margin-bottom: 12px; }

/* ===================================================================
   THE ENVELOPE
   =================================================================== */

.env-stage {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse 100% 70% at 50% 40%, rgba(22,33,63,0.75) 0%, rgba(6,10,22,0.92) 68%, var(--ink) 100%);
  padding: 24px;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.85s ease;
}
/* The stage fades fully out BEFORE the reveal fades in. Cross-fading the two
   double-exposes the card and the form text over each other, which reads as
   broken type rather than a transition. */
.env-stage.fading { opacity: 0; }
.env-stage.dismissed { display: none; }

.env-hint {
  position: absolute; bottom: clamp(28px, 7vh, 66px); left: 0; right: 0;
  text-align: center;
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--muted);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .env-hint { animation: none; opacity: 0.8; } }

.envelope-scene { perspective: 1600px; width: min(92vw, 580px); }

.envelope {
  position: relative;
  width: 100%;
  aspect-ratio: 1.42 / 1;
  transform-style: preserve-3d;
  cursor: pointer;
  background: none; border: 0; padding: 0;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.7s ease;
}
.envelope:hover { transform: translateY(-6px); }
.envelope.is-open:hover { transform: none; }

/* Paper stock: deep navy card stock, the colour of the printed piece */
.env-body, .env-flap, .env-pocket {
  position: absolute; inset: 0;
  background: linear-gradient(155deg, #1b2748 0%, #131d3a 48%, #0d1428 100%);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.45);
}
.env-body {
  border-radius: 3px;
  box-shadow: 0 34px 80px rgba(0,0,0,0.8), inset 0 0 70px rgba(0,0,0,0.5);
}
/* A hairline gold rule inset from the edge, echoing the card's border */
.env-body::after {
  content: ''; position: absolute; inset: 12px;
  border: 1px solid rgba(217,172,82,0.28); border-radius: 2px;
  pointer-events: none;
}

/* The addressee, written on the envelope face.
   Sits below the flap's point (52%) and above the pocket, so the wax seal
   never lands on top of the name. */
.env-address {
  position: absolute; left: 0; right: 0; top: 64%; bottom: 4%; z-index: 7;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; padding: 0 10%;
  pointer-events: none;
  /* Fades as the letter opens. The address block sits above the card in the
     stack so it reads as ink on the envelope face; left visible, the card
     would rise up behind the guest's own name and be obscured by it. */
  opacity: 1;
  transition: opacity 0.25s ease;
}
/* Goes immediately, with no delay: the card begins rising behind it and any
   overlap reads as the name being printed across the photograph. */
.envelope.is-open .env-address { opacity: 0; transition-duration: 0.2s; }
.env-address .to {
  font-family: var(--sans); font-size: clamp(8px, 1.5vw, 10px);
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-deep);
}
.env-address .name {
  font-family: var(--script);
  font-size: clamp(22px, 4.6vw, 42px);
  color: var(--gold-soft); line-height: 1.1;
  text-shadow: 0 1px 12px rgba(217,172,82,0.35);
  word-break: break-word;
  max-width: 100%;
}
/* A ruled line beneath the name, the way a real envelope is addressed. */
.env-address .name.name-lg { font-size: clamp(17px, 3.3vw, 30px); line-height: 1.18; }
.env-address .name.name-xl { font-size: clamp(14px, 2.6vw, 24px); line-height: 1.22; }
/* A six-name household needs the extra line to come from somewhere. Rather
   than pushing the block up under the wax seal, drop the eyebrow and tighten
   the spacing — the names are the point of the envelope, not the label. */
.env-address:has(.name-xl) { bottom: 2%; gap: 2px; }
.env-address:has(.name-xl) .to { display: none; }
.env-address:has(.name-xl) .from { margin-top: 2px; }
.env-address:has(.name-xl) .name::after { margin-top: 5px; }

.env-address .name::after {
  content: ''; display: block; height: 1px; width: 52%;
  margin: 7px auto 0; background: var(--gold-deep); opacity: 0.6;
}
.env-address .from {
  font-family: var(--sans); font-size: clamp(7px, 1.2vw, 9px);
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted);
  margin-top: 6px;
}

/* Pocket: the front panel with the classic V, drawn over the card */
.env-pocket {
  z-index: 6;
  clip-path: polygon(0 26%, 50% 76%, 100% 26%, 100% 100%, 0 100%);
  background: linear-gradient(170deg, #1a2547 0%, #101a35 100%);
  box-shadow: inset 0 8px 26px rgba(0, 0, 0, 0.4);
}

/* Flap opens away from the viewer, hinged at the top */
.env-flap {
  z-index: 8;
  height: 52%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform 1.5s cubic-bezier(0.45, 0.05, 0.2, 1), z-index 0s 0.7s;
  background: linear-gradient(180deg, #1e2b52 0%, #14203e 100%);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}
.envelope.is-open .env-flap { transform: rotateX(-172deg); z-index: 1; }

/* Wax seal */
.env-seal {
  position: absolute; z-index: 10;
  left: 50%; top: 52%; transform: translate(-50%, -50%);
  transition: transform 0.85s ease, opacity 0.85s ease;
  width: clamp(58px, 12vw, 84px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f0d78f 0%, var(--gold) 42%, #8d6a22 100%);
  box-shadow: 0 6px 20px rgba(0,0,0,0.6), inset 0 -3px 9px rgba(90,60,10,0.5), inset 0 3px 7px rgba(255,255,255,0.35);
  display: grid; place-items: center;
  font-family: var(--script); font-size: clamp(24px, 5vw, 34px);
  color: #2a1f08;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.env-seal::after {
  content: ''; position: absolute; inset: 6%;
  border-radius: 50%; border: 1px dashed rgba(60, 42, 8, 0.35);
}
.envelope.is-open .env-seal { transform: translate(-50%, -50%) scale(1.7) rotate(-14deg); opacity: 0; }

/* The card itself rises out of the envelope.
 *
 * Sized from the viewport, not the envelope: the envelope is capped at 580px
 * while a screen is not, so an envelope-relative scale that filled a phone
 * overflowed a desktop.
 *
 * The movement is two phases, which is what makes it read as a card being
 * drawn out of a pocket rather than one sliding through it:
 *   1. it lifts, still small, until it is clear of the envelope
 *   2. only then does it grow to full size and settle centred
 * The layer change happens between the two, while the card is already clear,
 * so nothing is ever seen passing through the paper. */
.env-card {
  position: absolute; z-index: 5;
  left: 50%;
  bottom: 4%;
  height: min(86vh, 940px);
  width: auto;
  max-width: 94vw;
  aspect-ratio: 9 / 16;
  transform: translateX(-50%) translateY(0) scale(var(--card-small, 0.3));
  transform-origin: bottom center;
  opacity: 0;
  pointer-events: none;
}

/* The two-phase rise is driven from envelope.js with measured pixel values.
   It was a CSS animation using var() inside @keyframes, which parsed and
   reported itself as running while producing no movement at all - the custom
   properties were never interpolated. Explicit values from script are
   deterministic and can be verified. */
.env-card.is-out { z-index: 9; }

/*
 * Once the card is on its way out, the envelope itself recedes.
 *
 * There is no room above a centred envelope for a card to clear it before
 * growing, so without this the card either grows while still overlapping the
 * paper - which reads as passing through it - or stays too small to read. The
 * parts fade individually rather than the whole envelope, because the card is
 * a child of it and would fade too.
 */
.env-body, .env-pocket, .env-flap, .env-address, .env-seal {
  transition: opacity 0.55s ease;
}
.envelope.card-out .env-body,
.envelope.card-out .env-pocket,
.envelope.card-out .env-flap { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .env-flap, .env-card, .env-seal, .envelope { transition-duration: 0.01ms !important; }
  .envelope.is-open .env-card {
    animation: none;
    opacity: 1;
    z-index: 9;
    transform: translateX(-50%) translateY(var(--card-rise, 0px)) scale(1);
  }
}

/* The real artwork, framed in gold the way the print piece is.
   Doubled class so these win over the .std-card base regardless of order. */
.std-card.std-card--image {
  margin: 0;
  display: block;
  width: fit-content;
  max-width: min(92vw, 420px);
  height: auto;
  aspect-ratio: auto;
  padding: 0;
  border: 1px solid rgba(217,172,82,0.45);
  box-shadow: 0 30px 80px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,0,0,0.6);
  background: none;
  overflow: hidden;
}
.std-card.std-card--image img { display: block; width: 100%; height: auto; }
.std-card.std-card--image::after { content: none; }

/* The typographic fallback, used when no artwork has been uploaded */
.std-card {
  position: relative;
  width: min(92vw, 430px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  background: #080d1a;
  border: 1px solid #1c2846;
  overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 5% 6%;
  text-align: center;
  box-shadow: 0 40px 90px rgba(0,0,0,0.8);
}
.std-card .photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.2) brightness(0.55);
  opacity: 0.85;
}
.std-card::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,8,10,0.92) 0%, rgba(8,8,10,0.30) 34%, rgba(8,8,10,0.34) 58%, rgba(8,8,10,0.95) 100%);
}
.std-card > * { position: relative; z-index: 2; width: 100%; }

.std-top .mono {
  font-family: var(--script);
  font-size: clamp(46px, 12vw, 78px);
  color: var(--gold); line-height: 0.85; margin-bottom: 6px;
}
.std-top .save {
  font-family: var(--serif); text-transform: uppercase;
  letter-spacing: 0.2em; font-size: clamp(19px, 5.2vw, 31px);
  color: var(--ivory);
}
.std-top .save i { font-family: var(--serif); text-transform: lowercase; letter-spacing: 0.02em; font-size: 0.78em; }
.std-top .forthe {
  font-family: var(--sans); font-size: clamp(9px, 2.2vw, 12px);
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--ivory-dim);
  margin-top: 6px;
}
.std-bottom .n {
  font-family: var(--serif); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: clamp(19px, 5.4vw, 32px);
  color: var(--ivory); line-height: 1.1;
}
.std-bottom .and {
  font-family: var(--script); font-size: clamp(19px, 4.6vw, 28px);
  color: var(--ivory-dim); margin: 6px 0;
  display: flex; align-items: center; gap: 14px;
}
.std-bottom .and::before, .std-bottom .and::after {
  content: ''; height: 1px; background: var(--ivory-dim); opacity: 0.5; flex: 1;
}
.std-bottom .d {
  font-family: var(--sans); letter-spacing: 0.32em;
  font-size: clamp(13px, 3.4vw, 19px); color: var(--ivory); margin-top: 16px;
}
.std-bottom .v {
  font-family: var(--sans); font-size: clamp(8px, 1.9vw, 10px);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: 8px;
}

/* The reveal panel that follows the envelope */
.reveal {
  position: fixed; inset: 0; z-index: 110;
  background: var(--ink);
  background-image:
    radial-gradient(ellipse 120% 70% at 50% -10%, #16213f 0%, rgba(6,10,22,0) 60%),
    radial-gradient(ellipse 90% 60% at 80% 110%, #131c38 0%, rgba(6,10,22,0) 58%);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; pointer-events: none;
  transition: opacity 1.1s ease;
}
.reveal.shown { opacity: 1; pointer-events: auto; }
.reveal-inner { min-height: 100%; padding: clamp(18px, 3.4vh, 40px) var(--pad) 70px; }

/*
 * Two columns on a wide screen, card first on a narrow one. Either way the
 * "Where should we mail your invitation?" heading lands in the first viewport
 * — the whole point of the page is that request, so it must not need a scroll.
 */
.reveal-grid {
  display: grid;
  gap: clamp(20px, 4vw, 52px);
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 1fr);
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}
.reveal-card-hold { display: grid; place-items: start center; position: sticky; top: clamp(18px, 3.4vh, 40px); }
.reveal-card-hold .std-card { width: 100%; max-width: 460px; height: auto; }
.reveal-card-hold .std-card.std-card--image { max-width: min(100%, 460px); }
.reveal-card-hold .std-card.std-card--image img { max-height: 82vh; width: auto; }

.reveal-ask { padding-top: 4px; }
.reveal-ask .ask-title { font-size: clamp(23px, 3.2vw, 36px); margin: 0 0 14px; }
.reveal-ask .ask-sub {
  color: var(--ivory-dim); margin: 0 0 26px; max-width: 46ch; font-size: 17px;
}
.reveal-ask .ask-privacy {
  margin-top: 18px; color: var(--muted);
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.02em;
}
.ask-done { padding: 8px 0; }

.reveal-foot {
  max-width: 1120px; margin: clamp(40px, 7vh, 80px) auto 0;
  text-align: center; padding-top: 30px; border-top: 1px solid var(--line-soft);
}
.reveal-foot .rule { max-width: 380px; margin: 0 auto 18px; }
.reveal-foot-venue {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}

@media (max-width: 900px) {
  .reveal-grid { grid-template-columns: 1fr; }
  .reveal-card-hold { position: static; }
  /* Cap the card so the heading below it is already on screen. */
  /* Big enough to actually read on a phone, while still leaving the mailing
     address question and its first field above the fold. Measured, not guessed. */
  .reveal-card-hold .std-card { max-width: min(94vw, 430px); max-height: 66vh; width: auto; }
  .reveal-card-hold .std-card.std-card--image { max-width: min(94vw, 430px); }
  .reveal-card-hold .std-card.std-card--image img { max-height: 64vh; width: auto; }
  /* The heading says it; the extra sentence costs a card that reads properly. */
  .reveal-ask .ask-sub { display: none; }
  .reveal-inner { padding-top: 12px; }
  .reveal-ask .ask-title { margin-bottom: 10px; }
  .reveal-ask .ask-sub { font-size: 16px; }
}

/* Very short screens: shrink the card further rather than push the ask down. */
@media (max-width: 900px) and (max-height: 700px) {
  .reveal-card-hold .std-card { max-height: 44vh; }
  .reveal-card-hold .std-card.std-card--image img { max-height: 42vh; }
}

.music-toggle {
  position: fixed; top: 16px; right: 16px; z-index: 130;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(18,18,22,0.8); border: 1px solid var(--line);
  color: var(--gold); cursor: pointer;
  font-size: 15px; line-height: 1;
  backdrop-filter: blur(6px);
}
.music-toggle:hover { border-color: var(--gold-deep); }
.music-toggle .bars { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.music-toggle .bars i {
  width: 2px; background: currentColor; height: 40%;
  animation: eq 1s ease-in-out infinite;
}
.music-toggle .bars i:nth-child(2) { animation-delay: 0.18s; height: 100%; }
.music-toggle .bars i:nth-child(3) { animation-delay: 0.36s; height: 65%; }
.music-toggle.muted .bars i { animation-play-state: paused; height: 30%; opacity: 0.5; }
@keyframes eq { 0%,100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .music-toggle .bars i { animation: none; } }

/* ------------------------------------------------------------- confetti-ish */
.sparkle-layer { position: fixed; inset: 0; pointer-events: none; z-index: 125; overflow: hidden; }
.sparkle {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); opacity: 0;
  animation: fall 3.4s linear forwards;
}
@keyframes fall {
  0%   { opacity: 0; transform: translateY(-10vh) rotate(0deg) scale(0.6); }
  10%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(105vh) rotate(520deg) scale(1); }
}

/* ------------------------------------------------------------------ gallery */

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.gallery figure { margin: 0; position: relative; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line-soft); }
.gallery img {
  width: 100%; height: 280px; object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.9);
  transition: filter 0.5s ease, transform 0.7s ease;
}
.gallery figure:hover img { filter: grayscale(0.15) contrast(1.02) brightness(1); transform: scale(1.03); }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 14px 10px;
  background: linear-gradient(180deg, transparent, rgba(8,8,10,0.9));
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ivory-dim);
}

/* --------------------------------------------------------------------- map */

.map-frame {
  width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--line);
  filter: grayscale(1) contrast(1.05) invert(0.92) hue-rotate(180deg);
  background: var(--ink-2);
}
.map-note { font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }

/* ------------------------------------------------------------------ faq/dl */

.faq details {
  border-bottom: 1px solid var(--line-soft);
  padding: 20px 0;
}
.faq summary {
  cursor: pointer; list-style: none;
  font-size: 20px; color: var(--ivory);
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--gold); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: '\2013'; }
.faq p { color: var(--ivory-dim); margin: 14px 0 0; max-width: var(--measure); }

dl.detail-list { margin: 0; }
dl.detail-list dt {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--muted); margin-top: 20px;
}
dl.detail-list dd { margin: 6px 0 0; color: var(--ivory); }

/* ===================================================================
   ADMIN
   =================================================================== */

body.admin {
  font-family: var(--sans);
  font-size: 14px;
  background: #0c0c0f;
  line-height: 1.55;
}
body.admin h1, body.admin h2, body.admin h3 { font-family: var(--serif); }

.admin-header {
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
  position: sticky; top: 0; z-index: 40;
}
.admin-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 60px; flex-wrap: wrap; }
.admin-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.admin-nav a { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory-dim); }
.admin-nav a[aria-current='page'] { color: var(--gold); }

.admin-wrap { max-width: 1500px; margin: 0 auto; padding: 30px var(--pad) 90px; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 30px; }
.stat {
  border: 1px solid var(--line); background: var(--ink-2); padding: 18px 20px;
}
.stat b { display: block; font-family: var(--serif); font-size: 34px; font-weight: 300; color: var(--gold); line-height: 1.1; }
.stat span { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }

.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.toolbar input[type=text] { max-width: 300px; font-family: var(--sans); font-size: 14px; padding: 9px 12px; }
.toolbar .spacer { flex: 1; }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); background: var(--ink-2); }
table.data { width: 100%; border-collapse: collapse; min-width: 940px; font-size: 13px; }
table.data th, table.data td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.data th {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); background: var(--ink-3); position: sticky; top: 0; z-index: 2;
  white-space: nowrap;
}
table.data tr:hover td { background: rgba(255,255,255,0.02); }
table.data td.name { font-family: var(--serif); font-size: 16px; color: var(--ivory); }
table.data td.muted, .muted { color: var(--muted); }
table.data .nowrap { white-space: nowrap; }

.chip {
  display: inline-block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted);
  white-space: nowrap;
}
.chip.on   { color: var(--ok);   border-color: rgba(127,174,122,0.5); background: rgba(127,174,122,0.08); }
.chip.warn { color: var(--warn); border-color: rgba(216,166,87,0.5);  background: rgba(216,166,87,0.08); }
.chip.off  { color: var(--muted); }
.chip.bad  { color: var(--err);  border-color: rgba(217,128,128,0.5); background: rgba(217,128,128,0.08); }
.chip.gold { color: var(--gold); border-color: var(--gold-deep); }

.linkbox {
  display: flex; gap: 6px; align-items: center;
}
.linkbox input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  padding: 6px 8px; background: var(--ink-3); border: 1px solid var(--line); color: var(--ivory-dim);
  /* Table cells collapse an input to nothing without an explicit basis. */
  width: 200px; min-width: 150px; flex: 0 1 200px;
}
table.data .linkbox input { width: 168px; }

.panel { border: 1px solid var(--line); background: var(--ink-2); padding: 24px; margin-bottom: 22px; }
.panel h2 { font-size: 20px; margin-bottom: 4px; }
.panel .panel-sub { color: var(--muted); font-size: 13px; margin: 0 0 20px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  padding: 10px 0 10px 22px; border-bottom: 1px solid var(--line-soft);
  position: relative; font-size: 13px;
}
.timeline li::before {
  content: ''; position: absolute; left: 4px; top: 17px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold-deep);
}
.timeline li time { color: var(--muted); font-size: 11px; display: block; }

body.admin input, body.admin select, body.admin textarea { font-family: var(--sans); font-size: 14px; padding: 10px 12px; }
body.admin .field label { font-size: 10px; }

.login-shell { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.login-box { width: 100%; max-width: 380px; border: 1px solid var(--line); background: var(--ink-2); padding: 34px; }

.copy-ok { color: var(--ok); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }

.dryrun-banner {
  border: 1px solid var(--warn); background: rgba(216,166,87,0.08);
  color: #e9d3a4; padding: 12px 18px; margin-bottom: 22px; font-size: 13px;
}
.dryrun-banner b { color: var(--warn); }

@media print {
  .grain, .site-header, .site-footer, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Admin file input */
body.admin input[type=file] {
  width: 100%; background: var(--ink-3); border: 1px dashed var(--line);
  color: var(--ivory-dim); padding: 14px; border-radius: 2px; font-size: 13px;
}
body.admin code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em; color: var(--gold); background: rgba(216,196,140,0.08);
  padding: 1px 5px; border-radius: 2px;
}
body.admin textarea[readonly] { background: var(--ink-3); color: var(--ivory-dim); font-family: var(--sans); }

/* ---------------------------------------------- address on file + editor */

.address-card {
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold-deep);
  background: var(--ink-2);
  padding: 18px 22px;
  margin: 22px 0 0;
}
.address-card address {
  font-style: normal;
  color: var(--ivory);
  line-height: 1.6;
}

.address-editor {
  border-top: 1px solid var(--line-soft);
  margin-top: 34px;
  padding-top: 8px;
}
.address-editor > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.address-editor > summary::-webkit-details-marker { display: none; }
.address-editor > summary::after {
  content: '+';
  font-size: 20px;
  line-height: 1;
  color: var(--gold-deep);
}
.address-editor[open] > summary::after { content: '\2013'; }
.address-editor > summary:hover { color: var(--ivory); }
.address-editor-body { padding-top: 10px; }

/* Suppress transitions for a single frame, so resetting the envelope for a
   replay does not play the opening animation backwards. */
.no-anim,
.no-anim * {
  transition: none !important;
  animation: none !important;
}

/* ------------------------------------------------------------ the monogram */
/* Lifted straight off the printed card, so the mark on screen is the same one
   that is on the save the date rather than a font approximation. */

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1;
}
.brand-mark {
  width: clamp(56px, 7vw, 74px);
  height: auto;
  display: block;
}
.brand small {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--muted);
}

.footer-mark {
  width: 96px;
  height: auto;
  margin: 0 auto 14px;
  opacity: 0.9;
}

.hero-mark {
  width: clamp(150px, 30vw, 240px);
  height: auto;
  margin: 0 auto 18px;
  filter: drop-shadow(0 2px 26px rgba(0, 0, 0, 0.75));
}

body.admin .brand-mark { width: 46px; }

.footer-admin {
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--muted);
  opacity: 0.55;
}
.footer-admin:hover { opacity: 1; color: var(--gold); }


/* ===================================================================
   STARFIELD
   The card is a night sky of dust and light. Three passes give depth without
   fighting the type: a dense far field, a nearer set of brighter points that
   drifts faster, and a handful of four-point sparkles. All behind everything,
   none of it takes a tap.
   =================================================================== */

.stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Exactly viewport-sized. The drifting layers inside are oversized and
     clipped here, so nothing ever extends the page box. */
  overflow: hidden;
  /* Sparkles live here, on their own element, so every layer shares one
     background-repeat value. */
  background-repeat: no-repeat;
  background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 12 L31.7 28.3 L48 30 L31.7 31.7 L30 48 L28.3 31.7 L12 30 L28.3 28.3 Z' fill='%23f0dfae'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 12 L31.7 28.3 L48 30 L31.7 31.7 L30 48 L28.3 31.7 L12 30 L28.3 28.3 Z' fill='%23f0dfae'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 12 L31.7 28.3 L48 30 L31.7 31.7 L30 48 L28.3 31.7 L12 30 L28.3 28.3 Z' fill='%23f0dfae'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 12 L31.7 28.3 L48 30 L31.7 31.7 L30 48 L28.3 31.7 L12 30 L28.3 28.3 Z' fill='%23f0dfae'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 12 L31.7 28.3 L48 30 L31.7 31.7 L30 48 L28.3 31.7 L12 30 L28.3 28.3 Z' fill='%23f0dfae'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 12 L31.7 28.3 L48 30 L31.7 31.7 L30 48 L28.3 31.7 L12 30 L28.3 28.3 Z' fill='%23f0dfae'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 12 L31.7 28.3 L48 30 L31.7 31.7 L30 48 L28.3 31.7 L12 30 L28.3 28.3 Z' fill='%23f0dfae'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 12 L31.7 28.3 L48 30 L31.7 31.7 L30 48 L28.3 31.7 L12 30 L28.3 28.3 Z' fill='%23f0dfae'/%3E%3C/svg%3E");
  background-size: 16px 16px, 16px 16px, 16px 16px, 16px 16px, 16px 16px, 16px 16px, 16px 16px, 16px 16px;
  background-position: 11% 19%, 79% 12%, 33% 55%, 89% 68%, 57% 86%, 7% 74%, 68% 38%, 23% 91%;
  opacity: 0.5;
  animation: star-twinkle-near 7s ease-in-out infinite;
}
.stars::before,
.stars::after {
  background-image: radial-gradient(2.9px 2.9px at 32.23% 7.13%, rgba(244,228,186,0.95), transparent 60%),
    radial-gradient(2.9px 2.9px at 0.95% 91.43%, rgba(255,253,246,1), transparent 60%),
    radial-gradient(2.4px 2.4px at 2.44% 97.52%, rgba(244,228,186,0.95), transparent 60%),
    radial-gradient(2.9px 2.9px at 79.11% 90.51%, rgba(255,253,246,1), transparent 60%),
    radial-gradient(2.4px 2.4px at 69.6% 85.28%, rgba(244,228,186,0.95), transparent 60%),
    radial-gradient(2.0px 2.0px at 17.15% 67.64%, rgba(255,253,246,1), transparent 60%),
    radial-gradient(2.0px 2.0px at 74.87% 3.55%, rgba(255,253,246,1), transparent 60%),
    radial-gradient(2.0px 2.0px at 47.8% 3.58%, rgba(255,253,246,1), transparent 60%),
    radial-gradient(2.4px 2.4px at 11.8% 34.89%, rgba(255,253,246,1), transparent 60%),
    radial-gradient(2.4px 2.4px at 89.88% 47.58%, rgba(244,228,186,0.95), transparent 60%),
    radial-gradient(2.4px 2.4px at 5.83% 58.22%, rgba(244,228,186,0.95), transparent 60%),
    radial-gradient(2.9px 2.9px at 95.54% 27.37%, rgba(244,228,186,0.95), transparent 60%),
    radial-gradient(2.4px 2.4px at 19.97% 39.73%, rgba(244,228,186,0.95), transparent 60%),
    radial-gradient(2.0px 2.0px at 48.43% 38.42%, rgba(255,253,246,1), transparent 60%),
    radial-gradient(2.0px 2.0px at 43.74% 21.77%, rgba(255,253,246,1), transparent 60%),
    radial-gradient(2.0px 2.0px at 35.44% 89.35%, rgba(244,228,186,0.95), transparent 60%);
  background-size: 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px;
  opacity: 0.9;
  animation: star-drift-near 170s linear infinite, star-twinkle-near 5.5s ease-in-out infinite;
}

.stars::before {
  background-image: radial-gradient(1.0px 1.0px at 90.45% 75.94%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 26.4% 70.65%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.0px 1.0px at 1.78% 8.98%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 29.97% 6.15%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.0px 1.0px at 39.31% 6.13%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.0px 1.0px at 51.66% 76.45%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 59.5% 87.36%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.0px 1.0px at 62.01% 30.91%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 88.31% 87.24%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 73.47% 98.61%, rgba(236,220,178,0.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 74.66% 32.81%, rgba(236,220,178,0.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 87.72% 19.48%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.0px 1.0px at 60.35% 74.62%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 17.96% 27.36%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.0px 1.0px at 14.11% 4.49%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.0px 1.0px at 44.29% 24.68%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 44.6% 33.34%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.0px 1.0px at 20.07% 12.26%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 9.32% 64.47%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 39.73% 43.31%, rgba(236,220,178,0.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 66.15% 14.72%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 43.85% 98.56%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 41.56% 99.26%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 87.92% 98.09%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 59.26% 47.05%, rgba(236,220,178,0.7), transparent 60%),
    radial-gradient(1.0px 1.0px at 66.74% 70.63%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.0px 1.0px at 45.04% 18.41%, rgba(236,220,178,0.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 1.04% 97.4%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 70.75% 80.01%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 49.08% 82.69%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 16.25% 49.29%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.0px 1.0px at 66.77% 1.17%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 57.71% 21.6%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.0px 1.0px at 72.76% 95.06%, rgba(255,250,238,0.85), transparent 60%);
  background-size: 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px;
  opacity: 0.85;
  animation: star-drift-far 260s linear infinite, star-twinkle-far 8s ease-in-out infinite;
}

.stars::after {
  background-image: radial-gradient(2.9px 2.9px at 32.23% 7.13%, rgba(244,228,186,0.95), transparent 60%),
    radial-gradient(2.9px 2.9px at 0.95% 91.43%, rgba(255,253,246,1), transparent 60%),
    radial-gradient(2.4px 2.4px at 2.44% 97.52%, rgba(244,228,186,0.95), transparent 60%),
    radial-gradient(2.9px 2.9px at 79.11% 90.51%, rgba(255,253,246,1), transparent 60%),
    radial-gradient(2.4px 2.4px at 69.6% 85.28%, rgba(244,228,186,0.95), transparent 60%),
    radial-gradient(2.0px 2.0px at 17.15% 67.64%, rgba(255,253,246,1), transparent 60%),
    radial-gradient(2.0px 2.0px at 74.87% 3.55%, rgba(255,253,246,1), transparent 60%),
    radial-gradient(2.0px 2.0px at 47.8% 3.58%, rgba(255,253,246,1), transparent 60%),
    radial-gradient(2.4px 2.4px at 11.8% 34.89%, rgba(255,253,246,1), transparent 60%),
    radial-gradient(2.4px 2.4px at 89.88% 47.58%, rgba(244,228,186,0.95), transparent 60%),
    radial-gradient(2.4px 2.4px at 5.83% 58.22%, rgba(244,228,186,0.95), transparent 60%),
    radial-gradient(2.9px 2.9px at 95.54% 27.37%, rgba(244,228,186,0.95), transparent 60%),
    radial-gradient(2.4px 2.4px at 19.97% 39.73%, rgba(244,228,186,0.95), transparent 60%),
    radial-gradient(2.0px 2.0px at 48.43% 38.42%, rgba(255,253,246,1), transparent 60%),
    radial-gradient(2.0px 2.0px at 43.74% 21.77%, rgba(255,253,246,1), transparent 60%),
    radial-gradient(2.0px 2.0px at 35.44% 89.35%, rgba(244,228,186,0.95), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 14 L31.6 28.4 L46 30 L31.6 31.6 L30 46 L28.4 31.6 L14 30 L28.4 28.4 Z' fill='%23f0dfae' opacity='0.85'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 14 L31.6 28.4 L46 30 L31.6 31.6 L30 46 L28.4 31.6 L14 30 L28.4 28.4 Z' fill='%23f0dfae' opacity='0.85'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 14 L31.6 28.4 L46 30 L31.6 31.6 L30 46 L28.4 31.6 L14 30 L28.4 28.4 Z' fill='%23f0dfae' opacity='0.85'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 14 L31.6 28.4 L46 30 L31.6 31.6 L30 46 L28.4 31.6 L14 30 L28.4 28.4 Z' fill='%23f0dfae' opacity='0.85'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 14 L31.6 28.4 L46 30 L31.6 31.6 L30 46 L28.4 31.6 L14 30 L28.4 28.4 Z' fill='%23f0dfae' opacity='0.85'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 14 L31.6 28.4 L46 30 L31.6 31.6 L30 46 L28.4 31.6 L14 30 L28.4 28.4 Z' fill='%23f0dfae' opacity='0.85'/%3E%3C/svg%3E");
  background-size: 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 18px 18px, 18px 18px, 18px 18px, 18px 18px, 18px 18px, 18px 18px;
  background-position: 0 0, 12% 22%, 78% 14%, 34% 62%, 88% 71%, 58% 88%, 6% 78%;
  background-repeat: repeat, no-repeat;
  opacity: 0.9;
  animation: star-drift-near 170s linear infinite, star-twinkle-near 5.5s ease-in-out infinite;
}

@keyframes star-drift-far  { to { transform: translate3d(-46px, 28px, 0); } }
@keyframes star-drift-near { to { transform: translate3d(34px, -22px, 0); } }
@keyframes star-twinkle-far  { 0%, 100% { opacity: 0.62; } 50% { opacity: 0.95; } }
@keyframes star-twinkle-near { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .stars::before, .stars::after { animation: none; opacity: 0.75; }
}

/* The sky continues behind the envelope and the reveal rather than stopping
   at the panel edge. */
.env-stage::before,
.reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(1.0px 1.0px at 90.45% 75.94%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 26.4% 70.65%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.0px 1.0px at 1.78% 8.98%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 29.97% 6.15%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.0px 1.0px at 39.31% 6.13%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.0px 1.0px at 51.66% 76.45%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 59.5% 87.36%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.0px 1.0px at 62.01% 30.91%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 88.31% 87.24%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 73.47% 98.61%, rgba(236,220,178,0.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 74.66% 32.81%, rgba(236,220,178,0.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 87.72% 19.48%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.0px 1.0px at 60.35% 74.62%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 17.96% 27.36%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.0px 1.0px at 14.11% 4.49%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.0px 1.0px at 44.29% 24.68%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 44.6% 33.34%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.0px 1.0px at 20.07% 12.26%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 9.32% 64.47%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 39.73% 43.31%, rgba(236,220,178,0.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 66.15% 14.72%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 43.85% 98.56%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 41.56% 99.26%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 87.92% 98.09%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 59.26% 47.05%, rgba(236,220,178,0.7), transparent 60%),
    radial-gradient(1.0px 1.0px at 66.74% 70.63%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.0px 1.0px at 45.04% 18.41%, rgba(236,220,178,0.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 1.04% 97.4%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 70.75% 80.01%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 49.08% 82.69%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 16.25% 49.29%, rgba(255,250,238,0.85), transparent 60%),
    radial-gradient(1.0px 1.0px at 66.77% 1.17%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 57.71% 21.6%, rgba(255,250,238,0.6), transparent 60%),
    radial-gradient(1.0px 1.0px at 72.76% 95.06%, rgba(255,250,238,0.85), transparent 60%);
  background-size: 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px, 330px 330px;
  background-repeat: repeat;
  opacity: 0.6;
  animation: star-twinkle-far 8s ease-in-out infinite;
}
.envelope-scene, .env-hint, .reveal-inner { position: relative; z-index: 1; }

/* ------------------------------------------------------- privacy & terms */

.legal { text-align: left; }
.legal .section-title { text-align: center; }
.legal-updated {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin-top: 12px;
}
.legal h3 {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold);
  margin: 40px 0 12px;
}
.legal p { color: var(--ivory-dim); max-width: var(--measure); }
.legal .lede { color: var(--ivory); }
.legal ul { color: var(--ivory-dim); max-width: var(--measure); padding-left: 1.1em; }
.legal li { margin-bottom: 8px; }
.legal b { color: var(--ivory); font-weight: 400; }
.legal-contact {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--sans); font-size: 13px; color: var(--muted);
}

.footer-legal {
  margin-top: 18px;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.24em;
}
.footer-legal a { color: var(--muted); opacity: 0.7; }
.footer-legal a:hover { opacity: 1; color: var(--gold); }
.footer-legal span { color: var(--muted); opacity: 0.4; }

/* --------------------------------------------------- consent checkbox rows */

.checkbox-line {
  display: flex; align-items: flex-start; gap: 12px;
  text-transform: none; letter-spacing: 0.01em;
  font-family: var(--sans); font-size: 13px; line-height: 1.55;
  color: var(--ivory-dim); cursor: pointer;
}
.checkbox-line input[type=checkbox] {
  width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px;
  accent-color: var(--gold); cursor: pointer;
}
.checkbox-line span { display: block; }

.consent-box {
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: clamp(22px, 4vw, 34px);
  margin: 44px 0 0;
}
.consent-intro { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-bottom: 22px; }

.consent-quote {
  margin: 16px 0;
  padding: 16px 20px;
  border-left: 2px solid var(--gold-deep);
  background: var(--ink-2);
  color: var(--ivory);
  font-style: italic;
  max-width: var(--measure);
}

/* ------------------------------------------------------------ batch send */

.send-batch { border-color: var(--gold-deep); }
.send-batch .stat b { font-size: 26px; }
.send-batch-form { margin-top: 6px; }
.send-batch-form .form-grid { max-width: 560px; }

/* ------------------------------------------------- the order of the evening
   Cocktail hour comes before the ceremony, which is the opposite of what most
   guests expect, so the sequence is numbered and spelled out rather than left
   to a comma-separated line. */
.order-of-day {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.order-of-day li {
  position: relative;
  padding: 20px 24px 20px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}
.order-of-day li::before {
  content: '';
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), transparent);
}
.order-of-day .ord-step {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.order-of-day h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: 500;
}
.order-of-day p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}
.ord-note {
  margin-top: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* -------------------------------------------------- renaming from the list
   Fixing a misspelling should not mean leaving the page, so the name cell
   carries its own small editor. The read and write states occupy the same
   place, and the row does not reflow when it switches. */
.name-cell {
  display: block;
  /* Reserve the editor's height in the read state too. Without this the row
     grows the moment the editor opens and every row below it jumps, which is
     miserable when you are working down a list fixing spellings. */
  min-height: 33px;
}
.name-cell .name-read,
.name-cell .name-write {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 33px;
}
/* The editor lifts out of the column and floats over the row.

   The names are long - the longest household on the list is 81 characters -
   and the Guest column cannot be made wide enough to proofread one inside it
   without squeezing every other column. Taking the editor out of flow gives
   the field real width, and because the row already reserves the height,
   opening it moves nothing. */
.name-cell .name-write {
  flex-wrap: nowrap;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: max(100%, min(680px, 74vw));
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--ink-3);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
table.data td.name { position: relative; }
.name-cell .name-write .btn {
  flex: none;
  white-space: nowrap;
  padding: 5px 9px;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.name-cell [hidden] { display: none; }
/* Invisible, but still holding its place, so the row keeps its height. */
.name-cell.is-editing .name-read { visibility: hidden; }

/* The list scrolls sideways already, so the name column can afford the room
   the editor needs. */
table.data td.name, table.data th:first-child { min-width: 320px; }

.name-edit-btn {
  flex: none;
  text-decoration: none;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 2px 7px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  /* Quiet, but always there. Hiding it until hover keeps the list tidy and
     makes the feature impossible to find, which is the wrong trade for a
     control whose whole job is to be reached quickly. */
  opacity: 0.5;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
tr:hover .name-edit-btn,
.name-edit-btn:focus-visible { opacity: 1; }
.name-edit-btn:hover { color: var(--gold); border-color: var(--line); opacity: 1; }

.name-cell input[name="display_name"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 9px;
  font-size: 13px;
}
.name-error {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--err, #d98080);
}
.name-cell.name-saved .name-read a {
  animation: name-saved-flash 1.2s ease;
}
@keyframes name-saved-flash {
  0%, 40% { color: var(--gold-soft); }
  100%    { color: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  .name-cell.name-saved .name-read a { animation: none; }
  .name-edit-btn { transition: none; }
}

/* Touch screens have no hover state to reveal anything, so give it full weight. */
@media (hover: none) {
  .name-edit-btn { opacity: 1; }
}

/* ------------------------------------------------- venue on its own line
   The name and the street address are two different facts and were being run
   together on one line with a middot. Separated, and the address set a little
   quieter so the name still leads. */
.hero .venue .venue-name,
.reveal-foot-venue .venue-name,
.hero .venue .venue-address,
.reveal-foot-venue .venue-address { display: block; }
.hero .venue .venue-address,
.reveal-foot-venue .venue-address {
  font-style: normal;
  font-size: 0.88em;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------- add to calendar
   Offered wherever a guest has just read the date: the home hero, the day
   page, and their own invitation after the envelope opens. */
.add-calendar { margin-top: 26px; text-align: center; }
.add-calendar-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.hero .add-calendar { margin-top: 22px; }
.reveal-foot .add-calendar { margin-top: 26px; }

/* ------------------------------------------------ the message, on the page
   where you decide to send it. Shown as a phone bubble because that is how it
   will actually arrive, and reading it any other way invites you to skim. */
.msg-preview .msg-phone {
  margin: 18px 0 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--ink);
}
.msg-preview .msg-to {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.msg-preview .msg-bubble {
  display: inline-block;
  max-width: min(100%, 460px);
  padding: 13px 16px;
  border-radius: 18px 18px 18px 5px;
  background: #1f2b47;
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  /* A real message wraps rather than scrolls, links included. */
  overflow-wrap: anywhere;
}
.msg-preview .msg-facts { margin-bottom: 16px; }
.msg-preview .msg-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.msg-preview .msg-pick label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.msg-preview .msg-pick select { width: auto; min-width: 200px; max-width: 320px; }

/* The editor sits with the preview, so changing the words and seeing the
   result are the same place rather than two different pages. */
.msg-preview .msg-edit {
  margin: 4px 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-2);
}
.msg-preview .msg-edit > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.msg-preview .msg-edit[open] > summary { border-bottom: 1px solid var(--line-soft); }
.msg-preview .msg-edit-body { padding: 18px 16px 16px; }
.msg-preview .msg-edit-body textarea { font-size: 14px; line-height: 1.55; }