/* Nusheen + George — styled after the Bliss & Bone theme they chose.
   Colours and fonts are CSS variables so they can be changed from /admin. */

/* The couple's fonts (personal-use licences in /fonts). Browsers only download the ones in use.
   unicode-range limits each font to the characters it really draws. The rest (numbers,
   punctuation, accents) fall through to Cormorant Garamond:
   - Signatie: curly quotes, long dashes and "…" are blank
   - Monteilga: 0/7/8/9, most punctuation and accents are blank
   - Magnetic Azuhster (demo): every digit is a watermark
   - Magazine: capitals, digits and basic punctuation only
   The "NG … Fallback" faces are Cormorant Garamond scaled to each font's capital height
   (Monteilga caps are 1.03em tall, Azuhster's 0.77em) so borrowed numbers match the letters.
   Azuhster also draws its letters 0.2em below the baseline, so site.js wraps numbers in
   <span class="dg"> and .dg nudges them down to match (see --dg-shift below). */
@font-face { font-family: "NG Title Fallback"; src: url("/fonts/cormorant-500.woff2") format("woff2"); size-adjust: 150%; font-display: swap; }
@font-face { font-family: "NG Sub Fallback"; src: url("/fonts/cormorant-300.woff2") format("woff2"); size-adjust: 155%; font-display: swap; }
@font-face { font-family: "NG Body Fallback"; src: url("/fonts/cormorant-500.woff2") format("woff2"); size-adjust: 122%; font-display: swap; }
@font-face { font-family: "NG Body Fallback"; src: url("/fonts/cormorant-500-italic.woff2") format("woff2"); font-style: italic; size-adjust: 122%; font-display: swap; }
@font-face { font-family: "Signatie"; src: url("/fonts/signatie.woff2") format("woff2"); font-display: swap;
  unicode-range: U+0000-2012, U+2015-2018, U+201A-201B, U+201E-2025, U+2027-FFFF; }
@font-face { font-family: "Monteilga"; src: url("/fonts/monteilga.woff2") format("woff2"); font-display: swap;
  unicode-range: U+0020, U+0026, U+002C, U+002E, U+0041-005A, U+0061-007A; }
@font-face { font-family: "Magnetic Azuhster"; src: url("/fonts/magnetic-azuhster.woff2") format("woff2"); font-display: swap;
  unicode-range: U+0000-002F, U+003A-FFFF; }
@font-face { font-family: "Magnetic Azuhster"; src: url("/fonts/magnetic-azuhster-italic.woff2") format("woff2"); font-style: italic; font-display: swap;
  unicode-range: U+0000-002F, U+003A-FFFF; }
@font-face { font-family: "Magazine"; src: url("/fonts/magazine.woff2") format("woff2"); font-display: swap;
  unicode-range: U+0020-0021, U+002C, U+002E, U+0030-003B, U+003F, U+0041-005A, U+0061-007A; }

:root {
  --bg: #EFD6CB;
  --primary: #405F03;
  --soft: #7B9143;          /* lighter green used on the RSVP title */
  --line: #79734D;
  --banner: #625F24;
  --banner-text: #F7F3E9;
  --menu-bg: #405F03;
  --menu-text: #EFD6CB;
  --font-heading: "Signatie", "NG Title Fallback", Georgia, serif;
  --font-sub: "Monteilga", "NG Sub Fallback", Georgia, serif;
  --font-body: "Magnetic Azuhster", "NG Body Fallback", Georgia, serif;
  --body-weight: 400;
  --header-h: 235px;     /* current header height (shrinks on scroll) */
  --header-full: 235px;  /* header height before shrinking */
  --ease: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; } /* page still scrolls; the bar is just hidden */
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--primary);
  font: var(--body-weight) 17px/1.55 var(--font-body);
  font-variant-numeric: lining-nums; /* Cormorant's default old-style numbers look uneven in dates */
  font-feature-settings: "lnum" 1;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }

/* Numbers borrowed from Cormorant: lower them to Azuhster's baseline in body text only.
   Admin can switch fonts, so the shift is only applied while the body font is Azuhster. */
body { --dg-shift: 0; }
body.font-azuhster { --dg-shift: 0.2em; }
.t-heading, .t-sub, .guest-name, .event-title, .field label, #menu nav a, .home-links a,
.faq-item > button, #gate h1, .rsvp-head .t-heading, .banner .t-heading { --dg-shift: 0; }
.dg { position: relative; top: var(--dg-shift); }
/* Typed numbers (phone, email) can't be nudged, so form fields use the fallback font outright. */
input[type="tel"], input[type="email"] { font-family: "NG Body Fallback", Georgia, serif !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

h2, h3, h4, p { margin: 0; font-weight: normal; }
.t-heading {           /* "Ballet" script titles on the original */
  font-family: var(--font-heading);
  font-size: clamp(40px, 6.2vw, 57px);
  line-height: 1.4;
  margin-bottom: 0.4em;
  overflow-wrap: anywhere;
}
.t-sub {               /* "Morena" subheads on the original */
  font-family: var(--font-sub);
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.3;
  margin-bottom: 0.25em;
}
.t-lead { font-size: 18px; line-height: 1.6; margin-bottom: 12px; }
.t-body { font-size: 17px; line-height: 1.6; margin-bottom: 10px; }
.t-lead:last-child, .t-body:last-child { margin-bottom: 0; }

/* Bordered button, as on the original */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  min-height: 48px;
  padding: 10px 26px;
  margin: 18px 6px 0;
  border: 1px solid var(--primary);
  background: transparent;
  color: var(--primary);
  font: 16px/1.2 var(--font-body);
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.button:hover { background: var(--primary); color: var(--bg); }
.button:disabled { opacity: 0.4; pointer-events: none; }
.button.solid { background: var(--primary); color: var(--bg); }
.button.solid:hover { opacity: 0.85; }
.button.large { font-size: 19px; min-width: 240px; min-height: 56px; }

/* ---------- Loading ---------- */
#loading {
  position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 2000;
  transition: opacity 0.5s var(--ease);
}
#loading.done { opacity: 0; pointer-events: none; }
.spinner { width: 34px; height: 34px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.9s linear infinite; opacity: 0.6; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Name gate ---------- */
#gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 22px;
  text-align: center;
}
#gate .inner { width: 100%; max-width: 820px; animation: rise 0.9s var(--ease) both; }
#gate h1 {
  margin: 0 0 26px;
  font: normal clamp(28px, 4.6vw, 52px)/1.45 var(--font-heading);
}
#gate form { max-width: 400px; margin: 0 auto; }
#gate input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--primary);
  font: 18px var(--font-body);
  text-align: center;
  outline: none;
}
#gate input::placeholder { color: var(--primary); opacity: 0.55; }
#gate input:focus { border-bottom-color: var(--primary); }
#gate .button { min-width: 140px; margin-top: 18px; }
.gate-msg { margin-top: 22px; font-size: 16px; line-height: 1.55; min-height: 1em; }
.gate-welcome { font: clamp(24px, 3.2vw, 32px)/1.3 var(--font-sub); margin: -4px 0 6px; }
.gate-msg .help { display: block; margin-top: 10px; opacity: 0.8; font-size: 15px; }
.choices { display: grid; gap: 10px; margin-top: 14px; }
.choices .button { width: 100%; margin: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Header ---------- */
header.site {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 90px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: padding 0.35s var(--ease);
}
header.site .logo { display: block; line-height: 0; border: 0; background: none; padding: 0; cursor: pointer; }
/* Kept modest so the video gets most of the screen */
header.site .logo img { width: auto; max-height: 96px; max-width: 50vw; transition: max-height 0.35s var(--ease); }
header.site.compact { padding-top: 8px; padding-bottom: 8px; }
header.site.compact .logo img { max-height: 54px; }

/* Hamburger (#mm on the original) */
.menu-btn {
  position: fixed;
  right: 28px;
  top: calc(var(--header-h) / 2);
  translate: 0 -50%;
  color: var(--primary);
  width: 56px;
  height: 56px;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
/* Only animate once the header has been measured, so the button doesn't slide on page load */
body.header-ready .menu-btn { transition: top 0.35s var(--ease); }
.menu-btn .bars { position: relative; width: 34px; height: 18px; display: block; }
.menu-btn .bars::before, .menu-btn .bars::after, .menu-btn .bars span {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--primary);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease), background 0.3s var(--ease), top 0.4s var(--ease);
}
.menu-btn .bars::before { top: 0; }
.menu-btn .bars span { top: 8px; }
.menu-btn .bars::after { top: 16px; }
.menu-btn .label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; }
body.menu-open .menu-btn { color: var(--menu-text); }
body.menu-open .menu-btn .bars::before, body.menu-open .menu-btn .bars::after, body.menu-open .menu-btn .bars span { background: var(--menu-text); }
body.menu-open .menu-btn .bars::before { top: 8px; transform: rotate(45deg); }
body.menu-open .menu-btn .bars::after { top: 8px; transform: rotate(-45deg); }
body.menu-open .menu-btn .bars span { opacity: 0; }

/* Split-screen menu (#navContent.split.inverse on the original) */
#menu { position: fixed; inset: 0; z-index: 900; display: flex; visibility: hidden; }
#menu.open { visibility: visible; }
#menu .shade {
  width: 50%;
  background: color-mix(in srgb, var(--menu-bg) 80%, transparent);
  transform: translateY(100%);
  transition: transform 0.45s var(--ease);
  border: 0;
  padding: 0;
  cursor: pointer;
}
#menu nav {
  width: 50%;
  background: var(--menu-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4% 5.5% 4% 7%;
  transform: translateY(-100%);
  transition: transform 0.45s var(--ease);
  overflow-y: auto;
}
#menu.open .shade, #menu.open nav { transform: none; }
#menu nav a {
  display: block;
  width: fit-content;
  margin-bottom: 10px;
  padding: 6px 0;
  color: var(--menu-text);
  font: clamp(26px, 2.6vw, 33px)/1.5 var(--font-sub);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
#menu nav a::after {
  content: ""; display: block; height: 1px; margin-top: 4px; background: currentColor;
  transform: scaleX(0); transform-origin: left center; transition: transform 0.4s var(--ease);
}
#menu nav a:hover::after, #menu nav a.current::after { transform: scaleX(1); }
#menu.open nav a { opacity: 1; transform: none; }
#menu.open nav a:nth-child(2) { transition-delay: 0.08s; }
#menu.open nav a:nth-child(3) { transition-delay: 0.16s; }
#menu.open nav a:nth-child(4) { transition-delay: 0.24s; }
#menu .who { margin-top: 34px; color: var(--menu-text); font-size: 15px; opacity: 0.85; }
#menu .who button { background: none; border: 0; padding: 8px 0; text-decoration: underline; cursor: pointer; color: inherit; font-size: 15px; }

/* ---------- Pages ---------- */
/* Uses the full (unshrunk) header height so content doesn't jump when the header shrinks on scroll. */
main { padding-top: var(--header-full); min-height: 100vh; }
.page { display: none; text-align: center; animation: fade 0.5s var(--ease) both; }
.page.active { display: block; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.text-block { max-width: 700px; margin: 0 auto; padding: 50px 40px 40px; }
.icon {
  display: inline-block;
  height: 90px;
  width: 140px;
  margin-bottom: 1.1em;
  background: var(--primary);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* Home: the video fills the screen below the header; page buttons sit just below it */
.video-wrap { position: relative; width: 100%; height: calc(100vh - var(--header-full)); height: calc(100svh - var(--header-full)); min-height: 240px; background: #000; }
.video-wrap iframe, .video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Self-hosted film: always show the whole frame. The film is a 4:3 Super 8 scan whose
   film-strip edges are part of the look, so it is never cropped; black fills the sides. */
.video-wrap video { object-fit: contain; background: #000; cursor: pointer; }
.film-play {
  position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.28); cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.film-play::after { content: ""; position: absolute; left: 34px; top: 26px; border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent #fff; }
.film-play:hover { transform: scale(1.05); background: rgba(0, 0, 0, 0.4); }
.film-sound, .scroll-cue {
  position: absolute; left: 50%; bottom: 24px; translate: -50% 0;
  padding: 12px 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--bg) 92%, transparent); color: var(--primary);
  font: 16px/1 var(--font-body); letter-spacing: 0.04em; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 4px; animation: nudge 1.8s ease-in-out infinite; }
.scroll-cue .chev { width: 12px; height: 12px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -2px; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.home-after { padding: 46px 24px 64px; }
.home-after .t-sub { margin-bottom: 4px; }
.status-line { font-size: 16px; opacity: 0.85; margin-top: 6px; }
.home-links { display: grid; gap: 14px; max-width: 420px; margin: 30px auto 0; }
.home-links a {
  display: flex; align-items: center; justify-content: center;
  min-height: 60px; padding: 12px 20px;
  border: 1px solid var(--primary);
  font: clamp(20px, 2.4vw, 24px)/1.2 var(--font-sub);
  text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.home-links a:hover, .home-links a.solid { background: var(--primary); color: var(--bg); }
.home-links a.solid:hover { opacity: 0.88; }

/* Host controls */
.host-signin {
  position: fixed; top: 4px; right: 8px; z-index: 1100;
  padding: 6px 8px; border: 0; background: none; cursor: pointer;
  color: var(--primary); font: 11px/1 var(--font-body); letter-spacing: 0.06em; opacity: 0.5;
}
.host-signin:hover { opacity: 1; }
body.menu-open .host-signin, body.menu-open .host-bar { display: none; }
body.is-host #menu .who { display: none; }
.host-bar { position: fixed; top: 10px; left: 10px; z-index: 1100; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.host-bar button, .host-bar a {
  min-height: 32px; padding: 6px 12px; border: 1px solid var(--primary); border-radius: 0;
  background: var(--bg); color: var(--primary); font: 12px/1.2 var(--font-body); letter-spacing: 0.05em;
  text-align: center; text-decoration: none; cursor: pointer;
}
.host-bar button[aria-pressed="true"] { background: var(--primary); color: var(--bg); }
.host-bar button:hover, .host-bar a:hover { opacity: 0.75; }
.signin-dialog { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--bg) 85%, transparent); }
.signin-card { width: 100%; max-width: 340px; padding: 30px 26px; background: var(--bg); border: 1px solid var(--line); text-align: center; }
.signin-card input { width: 100%; height: 50px; margin: 14px 0 6px; padding: 0 6px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--primary); font: 18px var(--font-body); text-align: center; outline: none; }
.signin-msg { color: #b3261e; font-size: 14px; min-height: 1.2em; }
.preview-note { text-align: center; font-size: 14px; padding: 10px 14px; margin-bottom: 18px; border: 1px dashed var(--line); }

/* Itinerary: three boxes */
.boxes3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 40px 30px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px 40px 60px;
}
.boxes3 .box { flex: 1 1 0; min-width: 0; max-width: 400px; padding: 0 10px; }
.boxes3 .t-heading { white-space: pre-line; }

/* Wedding day details */
.banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 46vh;
  padding: 60px 30px;
  background: var(--banner);
  color: var(--banner-text);
}
.banner .t-heading, .banner .t-sub { color: var(--banner-text); max-width: 700px; }
.faq { max-width: 700px; margin: 0 auto; padding: 40px 40px 60px; text-align: left; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0 24px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: clamp(22px, 3vw, 30px)/1.3 var(--font-sub);
  color: var(--primary);
}
.plus { position: relative; flex: 0 0 15px; height: 15px; }
.plus::before, .plus::after { content: ""; position: absolute; background: currentColor; transition: transform 0.4s var(--ease); }
.plus::before { left: 0; top: 7px; width: 15px; height: 1px; }
.plus::after { left: 7px; top: 0; width: 1px; height: 15px; }
.faq-item.open .plus::after { transform: scaleY(0); }
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.faq-item.open .faq-panel { grid-template-rows: 1fr; }
.faq-panel > div { overflow: hidden; }
.faq-panel .content { padding: 0 0 28px; }
.faq-panel .button { margin-left: 0; }

/* RSVP */
.rsvp { max-width: 700px; margin: 0 auto; padding: 50px 20px 60px; text-align: left; }
.rsvp-head { text-align: center; }
.rsvp-head .t-heading { color: var(--soft); font-size: clamp(46px, 7vw, 66px); margin-bottom: 0.1em; }
.rsvp-head .note { color: var(--soft); font-size: 18px; padding-bottom: 20px; }
.rule { height: 5px; background: var(--line); margin-bottom: 10px; }
.rsvp-card { padding: 44px 70px 50px; }
.guest-name {
  font: clamp(32px, 5vw, 46px)/1.25 var(--font-sub);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.intro-help { font-size: 16px; opacity: 0.85; margin: 10px 0 0; }
.event { padding: 30px 0 6px; }
.event-title { font: clamp(26px, 3.6vw, 34px)/1.25 var(--font-sub); }
.event-date { font-size: 16px; opacity: 0.85; margin: 2px 0 14px; }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid var(--primary);
  background: transparent;
  color: var(--primary);
  font: 17px/1.25 var(--font-body);
  text-align: center;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.choice .tick { width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; flex: 0 0 18px; position: relative; }
.choice[aria-checked="true"] { background: var(--primary); color: var(--bg); }
.choice[aria-checked="true"] .tick::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; }
.event.missing .choice { border-color: #b3261e; }
.event .need { display: none; color: #b3261e; font-size: 15px; margin-top: 8px; }
.event.missing .need { display: block; }

.field { margin-top: 26px; }
.field label { display: block; font: clamp(20px, 2.6vw, 24px)/1.3 var(--font-sub); margin-bottom: 4px; }
.field .hint { font-size: 14px; opacity: 0.8; margin-bottom: 4px; }
.field input, .field textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--primary);
  font: 18px/1.5 var(--font-body);
  outline: none;
  resize: none;
}
.field textarea { min-height: 50px; overflow: hidden; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--primary); }
.field input::placeholder, .field textarea::placeholder { color: var(--primary); opacity: 0.5; }
.field.missing input { border-bottom-color: #b3261e; }
.dietary { margin-top: 16px; }
.form-error { color: #b3261e; text-align: center; margin-top: 24px; font-size: 16px; }
.submit-row { text-align: center; margin-top: 18px; }

.confirm { text-align: center; padding: 10px 0; }
.confirm h4 { font-size: 22px; margin-bottom: 18px; }
.summary { list-style: none; padding: 0; margin: 0 auto 22px; max-width: 460px; text-align: left; border-top: 1px solid var(--line); }
.summary li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.summary li b { font-weight: normal; text-align: right; }
.link-btn { background: none; border: 0; padding: 10px; cursor: pointer; font-size: 16px; text-decoration: underline; text-underline-offset: 4px; }
.copy-row { display: flex; align-items: center; gap: 10px; max-width: 420px; margin: 18px auto 0; border-bottom: 1px solid var(--line); }
.copy-row label { white-space: nowrap; font-size: 15px; }
.copy-row input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; color: var(--primary); font: 16px var(--font-body); outline: none; }
.copy-row button { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; font-size: 20px; }
.copy-msg { margin-top: 10px; font-size: 15px; }
.closed { text-align: center; padding: 30px 0; font-size: 18px; }

footer.site { border-top: 1px solid var(--line); padding: 22px; text-align: center; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- Tablet & phone ---------- */
@media (max-width: 900px) {
  .boxes3 { flex-direction: column; align-items: center; gap: 10px; padding: 10px 24px 50px; }
  .boxes3 .box { max-width: 560px; width: 100%; padding: 30px 0; border-top: 1px solid var(--line); }
  .boxes3 .box:first-child { border-top: 0; }
}
@media (max-width: 768px) {
  header.site { padding: 10px 76px 10px 20px; }
  header.site .logo img { max-height: 62px; max-width: 40vw; }
  header.site.compact .logo img { max-height: 44px; }
  .menu-btn { right: 10px; }
  /* Keep the tiny sign-in clear of the menu button */
  .host-signin { top: 6px; right: 66px; }
  /* Host bar takes the top-left corner, so centre the logo while signed in */
  body.is-host header.site { padding-left: 76px; justify-content: center; }
  #menu .shade { display: none; }
  #menu nav { width: 100%; padding: 90px 36px 40px; }
  .text-block { padding: 40px 24px 30px; }
  .faq { padding: 20px 22px 50px; }
  .rsvp { padding: 36px 16px 50px; }
  .rsvp-card { padding: 28px 6px 40px; }
  .banner { min-height: 38vh; }
}
@media (max-width: 440px) {
  .choice-row { grid-template-columns: 1fr; }
  .copy-row { flex-wrap: wrap; }
  .copy-row label { width: 100%; padding-top: 8px; }
}
/* Phones turned sideways: let the video fill the screen */
@media (max-height: 500px) and (orientation: landscape) {
  header.site { padding-top: 8px; padding-bottom: 8px; }
  header.site .logo img, header.site.compact .logo img { max-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}