:root {
  --dark:   #17080E;
  --cream:  #EDE4D3;
  --red:    #8B0018;
  --border: #5C1A1B;
  --muted:  #8A8175;
  --subtle: #3D3530;
}

@font-face {
  font-family: 'ghosthey';
  src: url('../fonts/ghosthey/ghosthey-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 80%;
  descent-override: 20%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'ghosthey';
  src: url('../fonts/ghosthey/ghosthey-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  ascent-override: 80%;
  descent-override: 20%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Copernicus';
  src: url('../fonts/copernicus/Copernicus-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Copernicus';
  src: url('../fonts/copernicus/Copernicus-BookItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Copernicus';
  src: url('../fonts/copernicus/Copernicus-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Copernicus';
  src: url('../fonts/copernicus/Copernicus-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Copernicus';
  src: url('../fonts/copernicus/Copernicus-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Copernicus';
  src: url('../fonts/copernicus/Copernicus-SemiboldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Copernicus';
  src: url('../fonts/copernicus/Copernicus-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Copernicus';
  src: url('../fonts/copernicus/Copernicus-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Copernicus';
  src: url('../fonts/copernicus/Copernicus-Extrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Copernicus';
  src: url('../fonts/copernicus/Copernicus-ExtraboldItalic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Copernicus';
  src: url('../fonts/copernicus/Copernicus-Heavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Copernicus';
  src: url('../fonts/copernicus/Copernicus-HeavyItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

html {
  margin: 0;
  padding: 0;
  background: var(--dark);
  color: var(--cream);
  overflow-x: hidden;
  overscroll-behavior-y: none;
  scrollbar-gutter: stable;
  cursor: url('/img/mouse/cursor.png') 2 2, auto;
}

.noise {
  position: absolute;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  filter: brightness(0.2) contrast(1.5);
  opacity: 0.25;
}

/* The inline <svg> defaults to display:inline, leaving a few px of
   baseline descender gap beneath it that inflated the page's scrollable
   height past the actual visible content (revealing the body background
   below the footer when scrolled all the way down). */
.noise svg {
  display: block;
}

body.rsvp-red .noise {
  display: none;
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  margin: 0;
  padding: 64px 64px 0 64px;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--dark);
  color: var(--cream);
  font-family: 'Copernicus', 'Times New Roman', serif;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: page-fade-in 3s ease both;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Spacing above each real content section. Listed explicitly (rather
   than "every body child except noise/footer/nav") so utility elements
   — the icon-defs svg, .noise, .site-nav, scripts, anything a browser
   extension injects — can never pick this up by accident. Also avoids
   flex `gap`, which the Safari inspector was showing bleeding past the
   footer on short pages. */
.divider,
.hero,
.rsvp-hero,
.content-block,
.banner {
  margin-top: 72px;
}

/* ── Shared label style ──────────────────────────── */

strong {
  font-weight: 700;
}

a:hover {
  text-decoration: none;
}

.eyebrow {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
}

/* ── SVG star ornament ───────────────────────────── */

.star {
  color: var(--red);
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  overflow: visible;
}

/* ── Ornamental dividers ─────────────────────────── */

.divider .star,
.banner .star {
  color: var(--border);
}

.divider {
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  gap: -3px;
}

.divider--content {
  max-width: 225px;
  margin: 48px 0 0;
}

.rule {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Bottom banner: lines fade toward the center text */
.banner .rule:first-of-type {
  background: linear-gradient(to right, var(--border), transparent);
}

.banner .rule:last-of-type {
  background: linear-gradient(to left, var(--border), transparent);
}

/* ── Hero ────────────────────────────────────────── */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  container-type: inline-size;
  gap: 24px;
}

.hero-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.hero-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.arch {
  width: 72px;
  aspect-ratio: 150 / 288;
  margin-bottom: 24px;
}

.hero picture {
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.grooms {
  width: 100%;
  height: auto;
  display: block;
  padding: 64px 0;
}

.diamond {
  font-size: 14px;
  display: block;
  margin: 2px 0 40px;
  line-height: 1;
}

/* ── Info card ───────────────────────────────────── */

.info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 24px;
  width: 100%;
  max-width: 412px;
  box-sizing: border-box;
  gap: 16px;
}

.info .diamond {
  margin: 0;
}

.info .venue {
  margin: 0;
}

.info .button {
  margin-bottom: 0;
}

.lanaux {
  width: 150px;
  height: auto;
  margin-bottom: 0;
}

.venue {
  line-height: 2;
  margin: 0 0 24px;
}

.button {
  font-family: 'Copernicus', 'Times New Roman', serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  padding: 12px 24px 10px;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
  font-size: 11px;
  display: inline-block;
  color: var(--cream);
  background: var(--red);
  border: 1px solid var(--red);
  text-decoration: none;
  margin-bottom: 32px;
  -webkit-appearance: none;
  appearance: none;
}

/* The Venmo button in the gift FAQ is the last thing in its section,
   so its own margin-bottom just stacks on top of the inter-section
   spacing instead of doing anything useful. */
.content-section > .button:last-child {
  margin-bottom: 0;
}

.button:hover:not(:disabled) {
  background: transparent;
  color: var(--red);
}

/* ── RSVP ─────────────────────────────────────────── */

.rsvp-hero {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 96px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding-top: 56px;
}

.rsvp {
  width: 440px;
  max-width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}

.rsvp-copy {
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 16px;
}

.back-link {
  display: block;
  width: fit-content;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0;
  margin: 0 0 16px;
  font-family: 'Copernicus', 'Times New Roman', serif;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: inherit;
  text-decoration: none;
  text-align: left;
  text-transform: uppercase;
}

.back-link[hidden] {
  display: none;
}

.back-link:hover {
  border-bottom-color: currentColor;
  opacity: 0.7;
}

.zip-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

#plus4-stage {
  width: 100%;
}

#plus4-stage > *:not(#plus4-back) {
  opacity: 0;
  transform: translateY(12px);
  animation: guest-card-in 0.45s ease forwards;
}

.field {
  width: 100%;
  text-align: left;
}

.field label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#zip,
#plus4 {
  text-align: center;
  font-size: 24px;
  letter-spacing: 0.1em;
  font-family: 'ghosthey', 'Copernicus', 'Times New Roman', serif;
}

input[type="text"],
input[type="tel"],
textarea {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid var(--subtle);
  border-radius: 4px;
  color: var(--cream);
  font-family: 'Copernicus', 'Times New Roman', serif;
  font-size: 16px;
  padding: 14px 16px;
}

input[type="text"]:focus,
input[type="tel"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--red);
}

button.button {
  border: 1px solid var(--red);
  background: var(--red);
}

button.button:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

button.button[aria-busy="true"] {
  opacity: 1;
}

.spinner {
  display: inline-block;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -1px;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#lookup-status {
  margin-top: 16px;
}


/* Guest fieldsets */

.guest-block {
  width: 100%;
  background: var(--cream);
  border: none;
  border-radius: 8px;
  padding: 24px;
  box-sizing: border-box;
  margin: 0 0 24px;
  text-align: left;
  opacity: 0;
  transform: translateY(12px);
  animation: guest-card-in 0.45s ease forwards;
}

@keyframes guest-card-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Scroll/load reveal (site content sections, footer) ──── */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Content revealed on page load (not via scroll) fades in only, matching
   the nav/hero's plain fade — the slide-up is reserved for content the
   scroll observer discovers as you scroll down to it. */
.reveal.fade-only {
  transform: none;
}

.footer-top {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.party-card.reveal:nth-child(2) { transition-delay: 0.08s; }
.party-card.reveal:nth-child(3) { transition-delay: 0.16s; }
.party-card.reveal:nth-child(4) { transition-delay: 0.24s; }

.hotel-card.reveal:nth-child(2) { transition-delay: 0.06s; }
.hotel-card.reveal:nth-child(3) { transition-delay: 0.12s; }
.hotel-card.reveal:nth-child(4) { transition-delay: 0.18s; }
.hotel-card.reveal:nth-child(5) { transition-delay: 0.24s; }
.hotel-card.reveal:nth-child(6) { transition-delay: 0.3s; }

.content-photo--develop {
  filter: grayscale(100%);
  transition: filter 1.4s ease;
}

.content-photo--develop.developed {
  filter: grayscale(0%);
}

.content-gallery-photo {
  opacity: 0;
  transition: opacity 1.4s ease;
}

.content-gallery-photo.developed {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .content-photo--develop {
    filter: none;
    transition: none;
  }
  .content-gallery-photo {
    opacity: 1;
    transition: none;
  }
}

.guest-name {
  font-family: 'ghosthey', 'Copernicus', 'Times New Roman', serif;
  font-size: 32px;
  font-weight: 400;
  margin: 0 0 20px;
  transition: opacity 0.3s ease;
}

.guest-name.declined {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.6;
}

.attend-options {
  display: flex;
  gap: 24px;
  margin: 12px 0 0;
}

.attend-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.attend-options label:has(input:checked),
.dietary-choices label:has(input:checked) {
  text-shadow: 0 0 0.3px currentColor;
}

.attend-options.locked {
  pointer-events: none;
}

.attend-options.locked label {
  opacity: 0.55;
}

.dietary-options {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  border: none;
  padding: 0;
  opacity: 0;
  transition: grid-template-rows 0.35s ease, opacity 0.3s ease, margin 0.35s ease;
}

.dietary-options.open {
  grid-template-rows: 1fr;
  margin: 20px 0 0;
  opacity: 1;
}

.dietary-inner {
  min-height: 0;
  overflow: hidden;
}

.dietary-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.dietary-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.dietary-choices label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.dietary-choices label.dietary-choice-none {
  flex-basis: 100%;
  margin-bottom: 4px;
}

.dietary-grid {
  flex-basis: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 20px;
}

.dietary-grid label {
  white-space: nowrap;
}

.dietary-choices label.dietary-choice-other {
  flex-basis: 100%;
  margin-top: 4px;
}

.dietary-other-notes {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  transition: grid-template-rows 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease;
}

.dietary-other-notes.open {
  grid-template-rows: 1fr;
  margin-top: 14px;
  opacity: 1;
}

.dietary-other-notes-inner {
  min-height: 0;
  overflow: hidden;
}

.dietary-other-notes-inner label {
  display: block;
  margin-bottom: 10px;
}

.dietary-other-notes textarea {
  min-height: 80px;
  resize: vertical;
}

.guest-name-override {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  transition: grid-template-rows 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease;
}

.guest-name-override.open {
  grid-template-rows: 1fr;
  margin-top: 16px;
  opacity: 1;
}

.guest-name-override-inner {
  min-height: 0;
  overflow: hidden;
}

/* Deadline / not-found notices */

.rsvp-notice {
  width: 100%;
  background: var(--subtle);
  color: var(--cream);
  border-radius: 4px;
  padding: 24px 24px 16px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.7;
  opacity: 0;
  transform: translateY(12px);
  animation: guest-card-in 0.45s ease forwards;
}

.rsvp-disclaimer {
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  font-style: italic;
  margin: 16px 0 8px;
}

#address-confirm {
  background: var(--border);
  color: var(--cream);
  margin-bottom: 24px;
  font-size: 13px;
  padding: 8px 16px;
}

/* ── RSVP form state hooks ───────────────────────── */

#rsvp-form[data-state="loading"] button.button {
  opacity: 0.6;
  pointer-events: none;
}

#form-error {
  margin-top: 16px;
}

#form-success {
  margin-top: 16px;
}

#plus4-status {
  margin-top: 16px;
}


/* ── RSVP page: red background theme ─────────────── */
/* --muted/--subtle are redefined here so every rule that already
   references them (labels, hints, borders) stays legible on red
   without needing an individual override per selector. */

html.rsvp-red,
body.rsvp-red {
  background: var(--red);
}

body.rsvp-red {
  --muted: rgba(22, 7, 5, 0.75);
  --subtle: rgba(22, 7, 5, 0.3);
  --border: rgba(22, 7, 5, 0.3);
  color: var(--dark);
}

body.rsvp-red .site-footer {
  padding-top: 64px;
}

body.rsvp-red .page-title {
  font-size: 140px;
}

@media (min-width: 768px) {
  body.rsvp-red .site-nav {
    display: none;
  }
}

@media (max-width: 1024px) {
  .rsvp-hero {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
}

@media (max-width: 767px) {
  .rsvp-hero {
    padding-top: 16px;
  }
  body.rsvp-red .page-title {
    font-size: 96px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  body.rsvp-red .footer-second-line {
    width: min(640px, 100%);
  }
  .guest-name {
    font-size: 32px;
    line-height: 1.25;
    padding-top: 16px;
  }
  .attend-options label {
    font-size: 16px;
  }
  .back-link {
    font-size: 14px;
  }
  .dietary-label {
    font-size: 13px;
  }
  .dietary-choices label {
    font-size: 16px;
  }
  .dietary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dietary-grid label:first-child {
    grid-column: 1 / -1;
    order: 1;
  }
  body.rsvp-red .site-footer {
    display: flex;
  }
  body.rsvp-red .site-footer .footer-nav,
  body.rsvp-red .site-footer .banner {
    display: none;
  }
}

body.rsvp-red input[type="text"],
body.rsvp-red input[type="tel"],
body.rsvp-red textarea {
  color: var(--dark);
  border-color: var(--dark);
}

body.rsvp-red .button,
body.rsvp-red button.button {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--cream);
}

body.rsvp-red .button:hover:not(:disabled),
body.rsvp-red button.button:hover:not(:disabled) {
  background: transparent;
  border-color: var(--dark);
  color: var(--dark);
}

body.rsvp-red input[type="text"]:focus,
body.rsvp-red input[type="tel"]:focus,
body.rsvp-red textarea:focus {
  border-color: var(--cream);
}

body.rsvp-red .guest-block textarea:focus {
  border-color: var(--dark);
}

/* ── Bottom banner ───────────────────────────────── */

.banner {
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.banner-label {
  color: var(--red);
  white-space: nowrap;
  flex-shrink: 0;
}

br.secondary-br { display: none; }

/* ── Site nav ─────────────────────────────────────── */

.site-nav {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 32px;
  box-sizing: border-box;
}

.site-nav a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--red);
}

.site-nav .nav-logo {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  text-decoration: none;
  color: var(--cream);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0;
  white-space: normal;
  font-weight: 400;
}

.site-nav .nav-logo:hover {
  color: var(--red);
}

.nav-logo-img {
  width: 150px;
  height: auto;
  display: block;
}

.nav-logo-file {
  display: none;
}

.nav-second-line {
  display: none;
}

@media (min-width: 768px) {
  .site-nav.is-home .nav-logo {
    display: none;
  }
}

/* ── Site footer ──────────────────────────────────── */

.site-footer {
  width: 100vw;
  margin-top: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  background: var(--red);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 56px;
  padding: 128px 24px 56px;
}

.footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.footer-nav a {
  font-family: 'Copernicus', 'Times New Roman', serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark);
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
}

.footer-nav a:hover {
  color: var(--cream);
}

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: -32px;
}

.footer-legal a {
  font-family: 'Copernicus', 'Times New Roman', serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.footer-legal a:hover {
  color: var(--cream);
}

.footer-second-line {
  width: min(640px, 90%);
  height: auto;
  display: block;
}

.site-footer .banner {
  width: 100%;
  max-width: calc(100vw - 128px);
  box-sizing: border-box;
}

.site-footer .banner-label,
.site-footer .banner .star {
  color: var(--dark);
}

.site-footer .banner .rule:first-of-type {
  background: linear-gradient(to right, var(--dark), transparent);
}

.site-footer .banner .rule:last-of-type {
  background: linear-gradient(to left, var(--dark), transparent);
}

/* The old in-page "'Til death" banner is superseded by the footer's on desktop */
@media (min-width: 768px) {
  .banner {
    display: none;
  }
  .site-footer .banner {
    display: flex;
  }
}

@media (max-width: 767px) {
  .site-footer {
    display: none;
  }
}

.sc {
  font-size: 0.75em;
}

/* ── Content sections (page bodies) ── */

main {
  width: 100%;
  display: contents;
}

.content-block[hidden] {
  display: none;
}

.content-block {
  max-width: 600px;
  margin: 0 auto;
  padding: 48px 0 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.content-header {
  padding-top: 56px;
}

.page-title {
  font-family: 'ghosthey', 'UnifrakturMaguntia', serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  text-align: center;
}

.section-heading {
  font-family: 'ghosthey', 'UnifrakturMaguntia', serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}

.content-section {
  width: 100%;
}

.content-subsection {
  width: 100%;
  margin: 24px 0 -32px;
  text-align: center;
}

.content-subsection .diamond {
  margin: 2px auto 24px;
}

.content-label {
  color: var(--red);
  margin-bottom: 8px;
  font-weight: 700;
}

.content-date {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--border);
  margin: -4px 0 8px;
}

/* Self-link question permalinks (FAQ): identical in every state so
   they're easy to copy/share, cursor is the only clickable affordance. */
.content-label a,
.content-label a:hover,
.content-label a:visited {
  color: inherit;
  text-decoration: none;
}

.content-body {
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 16px;
}

.content-body:last-child {
  margin-bottom: 0;
}

.content-body em {
  font-style: italic;
}

main a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 0.5px;
}

.content-figure {
  width: 100%;
  margin: 16px 0 0;
}

.content-photo {
  width: 300px;
  height: 380px;
  border: 5px solid var(--cream);
  border-radius: 3px;
  box-sizing: border-box;
  display: block;
  object-fit: cover;
  margin: 32px auto 16px;
}

.content-photo--wide {
  width: calc(100% + 96px);
  max-width: 696px;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 32px -48px 16px;
  border-width: 8px;
}

.content-photo-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  width: calc(100% + 96px);
  max-width: 696px;
  margin: 32px -48px 16px;
}

.content-photo-row .content-photo {
  flex: 1 1 0;
  width: auto;
  max-width: 300px;
  height: auto;
  aspect-ratio: 300 / 380;
  margin: 0;
}

.content-caption {
  margin-bottom: 32px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.025em;
  text-align: center;
  font-style: italic;
}

.content-address {
  font-size: 14px;
  text-align: center;
  margin: 24px 0 8px;
  line-height: 1.4;
}

.content-handle {
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-align: center;
  margin-bottom: 24px;
}

.hotel-cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 24px 0;
}

.hotel-card {
  border: 1px solid var(--subtle);
  border-radius: 4px;
  padding: 48px;
}

.hotel-name {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 3px;
}

.hotel-meta {
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
  margin: 0 0 10px;
}

.hotel-desc {
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}

.party-cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 24px 0;
}

.party-card {
  border: 1px solid var(--subtle);
  border-radius: 4px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.party-portrait {
  width: 200px;
  height: 256px;
  border-radius: 50%;
  background: var(--subtle);
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 24px;
  border: 2px solid var(--muted);
  outline: 1px solid var(--muted);
  outline-offset: 4px;
}

.party-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
}

.party-name {
  font-size: 16px;
  font-weight: 400;
  margin: 0 0 3px;
}

.party-role {
  font-size: 16px;
  font-style: italic;
  color: var(--muted);
  margin: 0;
}

.party-bio {
  display: none;
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}

.content-aside {
  color: var(--muted);
  font-style: italic;
}

.page-lead-in {
  padding-top: 8px;
}

.content-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: calc(100% + 96px);
  max-width: 696px;
  margin: 32px -48px 0;
}

.content-gallery-item {
  height: auto;
  background: var(--muted);
  border: 5px solid var(--cream);
  border-radius: 3px;
  box-sizing: border-box;
  overflow: hidden;
}

.content-gallery-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.attire-video-link {
  display: block;
  margin: 32px 0;
}

.attire-video {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--subtle);
  display: block;
  border: 5px solid var(--cream);
  border-radius: 3px;
  box-sizing: border-box;
}

/* Bleeds past body's own padding to sit flush at the viewport's top/left/
   right edges. The horizontal cancellation works because body's padding is
   symmetric: 50% of the containing block's (body's content-box) width minus
   50vw equals exactly -1 * the padding. The negative margin-top cancels
   body's padding-top the same way (must match it exactly; also overridden
   in the mobile media query below, where body's padding-top differs). */
.family-banner {
  width: 100vw;
  margin-top: -64px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.wifi-accordion {
  background-color: var(--red);
  overflow: hidden;
  margin-bottom: 32px;
}

.wifi-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wifi-accordion-summary::-webkit-details-marker {
  display: none;
}

/* var(--muted) was tuned for the old transparent/dark background and reads
   at ~2.6:1 against the new solid --red fill (fails WCAG's 4.5:1 for text);
   --cream holds ~7.9:1 against --red, so it's used here instead. */
.wifi-accordion-label {
  color: var(--cream);
}

.wifi-accordion-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cream);
}

.wifi-accordion-caret {
  display: inline-block;
  transition: transform 0.2s ease;
}

.wifi-accordion[open] .wifi-accordion-caret {
  transform: rotate(180deg);
}

/* var(--border) is a dark red-brown, nearly invisible against --red (same
   family, ~1.3:1); a translucent cream line actually shows up as a divider. */
.wifi-box {
  border-top: 1px solid rgba(237, 228, 211, 0.2);
  padding: 24px;
  text-align: center;
}

.wifi-network {
  margin-top: 20px;
}

.wifi-network:first-of-type {
  margin-top: 0;
}

.wifi-venue {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
}

.wifi-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  margin: 0 0 2px;
}

/* user-select: all so a single tap/click also selects the whole password
   as a fallback, since the .wifi-copy button is the primary way to copy it. */
.wifi-detail code {
  background: var(--subtle);
  border-radius: 3px;
  padding: 1px 8px;
  font-size: 13px;
  user-select: all;
}

.wifi-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: var(--cream);
  opacity: 0.75;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.wifi-copy:hover {
  opacity: 1;
}

/* ── Media queries ───────────────────────────────── */

@media (min-width: 768px) {
  .hotel-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .party-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .party-card:only-child {
    grid-column: 1 / -1;
  }

  /* Extra breathing room on the dark background before it hands off
     to the footer's red, since .banner (the next sibling) is hidden
     on desktop and contributes nothing there. :has() (not
     :last-of-type, which matches by tag not class and would catch
     .banner instead) targets the actual last content section before
     the footer. Desktop-only: on mobile .banner is visible and
     already provides its own spacing via margin-top. */
  .content-block:has(+ .banner),
  .hero:has(+ .banner) {
    padding-bottom: 72px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .content-gallery {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 250px;
    margin: 32px auto 0;
    gap: 12px;
  }
}

@media (max-width: 767px) {
  body {
    padding: 32px 16px 72px 16px;
  }
  .family-banner {
    margin-top: -32px;
  }
  .divider,
  .hero,
  .rsvp-hero,
  .content-block,
  .banner {
    margin-top: 24px;
  }
  .content-block { padding: 16px 0 32px; }
  .divider--content { margin: 48px 0 0; }
  .grooms {
    margin-top: 32px;
  }
  br.secondary-br {
    display: none;
  }
  .button {
    padding: 20px 40px 18px;
    border-radius: 4px;
    font-size: 13px;
  }
  .banner-label {
    font-size: 10px;
    line-height: 1.15;
    padding: 0 8px;
  }
  .content-header {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  main > .banner {
    margin-top: 32px;
  }
  .content-figure {
    margin: 32px 0 0;
  }
  .content-photo--wide {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-width: 5px;
  }
  .content-gallery {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .content-photo-row {
    flex-direction: column;
    align-items: center;
    width: calc(100% + 32px);
    max-width: 632px;
    margin-left: -16px;
    margin-right: -16px;
  }
  .hotel-card {
    padding: 32px;
    border-width: 0.5px;
    border-radius: 6px;
  }
  .party-card {
    padding: 24px;
    border-width: 0.5px;
    border-radius: 6px;
  }
  .wifi-accordion {
    border-radius: 0;
  }
  .hotel-desc {
    font-size: 14px;
  }
  .guest-block {
    padding: 20px;
  }
  .attend-options {
    gap: 16px;
  }
}

/* ── Mobile nav menu button ──────────────────────── */

.nav-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--muted);
  font-family: 'Copernicus', 'Times New Roman', serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

@media (max-width: 767px) {
  .arch {
    width: 56px;
  }
  .site-nav {
    position: absolute;
    height: 0;
    overflow: visible;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .nav-menu-btn {
    display: block;
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    padding: 10px 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: var(--cream);
    color: var(--dark);
    border-radius: 3px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.5);
    z-index: 9998;
    white-space: nowrap;
  }
  .site-nav a {
    display: none;
  }
  .site-nav .nav-logo {
    display: none;
  }

  /* ── Mobile nav overlay ─────────────────────────── */

  @keyframes nav-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes nav-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
  }

  .site-nav.is-open {
    animation: nav-fade-in 0.2s ease;
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 9999;
    background: var(--red);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 0;
    margin: 0;
  }
  .site-nav.is-open a {
    display: block;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dark);
    padding: 2px 0;
    line-height: 1;
    text-decoration: none;
  }
  .site-nav.is-closing {
    animation: nav-fade-out 0.2s ease forwards;
  }
  .site-nav.is-open a[aria-current="page"] {
    color: var(--cream);
  }
  .site-nav.is-open a:hover {
    color: var(--cream);
  }
  .site-nav.is-open .nav-menu-btn {
    position: absolute;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    top: auto;
    transform: translateX(-50%);
    width: auto;
    padding: 10px 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    border-radius: 3px;
    background: transparent;
    border: 1px solid var(--cream);
    color: var(--cream);
    box-shadow: none;
  }
  .site-nav.is-open .nav-second-line {
    display: block;
    width: 360px;
    max-width: 95%;
    height: auto;
    margin-top: 8px;
  }
  .site-nav.is-open .nav-logo {
    display: flex;
    flex-basis: auto;
    padding: 0;
    color: var(--dark);
    font-size: 0;
    letter-spacing: 0;
    text-transform: none;
  }
  .site-nav.is-open .nav-logo:hover {
    color: var(--cream);
  }
  .site-nav.is-open .nav-logo-svg {
    display: block;
    width: 300px;
  }
  .site-nav.is-open .nav-logo-file {
    display: none;
  }
}

html.nav-open,
body.nav-open {
  overflow: hidden;
}

/* ── Custom pointer cursor ────────────────────────── */

a,
button,
.button,
.attend-options label,
.dietary-choices label,
.nav-menu-btn,
input[type="checkbox"],
input[type="radio"],
select {
  cursor: url('/img/mouse/pointer.png') 2 2, pointer;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--dark);
}