/* ============================================================
   HEALTHCARE LEADERSHIP DINNER — Digital Invitation
   Ramsay Brown × HW Fisher × RCGP
   ============================================================
   CUSTOMISATION:
   • Brand colours live in event-config.js (colours section)
     and are applied here as CSS custom properties.
   • The :root block below provides fallback defaults.
   ============================================================ */

/* ── BRAND COLOUR TOKENS (overridden by event-config.js) ──── */
:root {
  --navy:        #17143A;   /* Ramsay Brown navy */
  --navy-mid:    #3D3A60;
  --navy-light:  #57547A;
  --orange:      #F19C03;   /* Ramsay Brown orange */
  --orange-dim:  rgba(241,156,3,0.55);
  --cream:       #F4F0EB;
  --warm-white:  #FDFAF6;
  --text-dark:   #1A1A1A;
  --text-mid:    #3D3D3D;
  --text-light:  #6B6B6B;
  --border:      rgba(23, 20, 58, 0.12);
  --border-soft: rgba(23, 20, 58, 0.07);
  --shadow-deep: 0 32px 80px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.3);
  --shadow-card: 0 24px 64px rgba(23,20,58,0.16), 0 4px 16px rgba(23,20,58,0.08);
  --radius:      3px;
  --transition:  cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  background: var(--navy);
  color: var(--text-dark);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── TYPOGRAPHY ───────────────────────────────────────────── */
h1, h2, h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

p, li, label, input, textarea, select {
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ── SCENE WRAPPER ────────────────────────────────────────── */
.scene {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Clean single-colour background — no fake gradients */
  background: var(--navy);
  padding: 2rem 1rem;
  position: relative;
}

/* Very faint grain texture — barely perceptible, adds depth */
.scene::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.012'%3E%3Ccircle cx='10' cy='10' r='1'/%3E%3Ccircle cx='40' cy='10' r='1'/%3E%3Ccircle cx='70' cy='10' r='1'/%3E%3Ccircle cx='25' cy='40' r='1'/%3E%3Ccircle cx='55' cy='40' r='1'/%3E%3Ccircle cx='10' cy='70' r='1'/%3E%3Ccircle cx='40' cy='70' r='1'/%3E%3Ccircle cx='70' cy='70' r='1'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ── SCENE HEADER (pre-open) ──────────────────────────────── */
.scene-header {
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 2;
  transition: opacity 0.6s var(--transition), transform 0.6s var(--transition);
}

.scene-header.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
}

/* Ramsay Brown logo sat above the invitation header */
.scene-header__brand {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.75rem;
}

.scene-header__brand img {
  height: 44px;
  width: auto;
  /* Original logo colours — grey wordmark + orange motif */
  opacity: 1;
}

@media (max-width: 600px) {
  .scene-header__brand img { height: 36px; }
  .scene-header__brand { margin-bottom: 1.25rem; }
}

.scene-header__eyebrow {
  font-family: 'Lato', sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.75rem;
  opacity: 0.9;
}

.scene-header__title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--warm-white);
  font-weight: 400;
  letter-spacing: 0.03em;
}

.scene-header__subtitle {
  font-family: 'Lato', sans-serif;
  font-size: 0.8125rem;
  color: rgba(253,250,246,0.45);
  margin-top: 0.5rem;
  letter-spacing: 0.07em;
}

/* ── ENVELOPE ─────────────────────────────────────────────── */
.envelope-wrapper {
  position: relative;
  z-index: 2;
  perspective: 1200px;
  width: min(520px, 90vw);
}

.envelope {
  width: 100%;
  cursor: pointer;
  position: relative;
  filter: drop-shadow(0 28px 70px rgba(0,0,0,0.5));
  transition: transform 0.3s var(--transition), filter 0.3s var(--transition);
  outline: none;
}

.envelope:hover {
  transform: translateY(-5px) scale(1.007);
  filter: drop-shadow(0 40px 90px rgba(0,0,0,0.6));
}

.envelope:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 8px;
  border-radius: var(--radius);
}

.envelope:hover .envelope__prompt {
  opacity: 1;
  transform: translateY(0);
}

/* Envelope body */
.envelope__body {
  width: 100%;
  aspect-ratio: 520/360;
  background: var(--navy-light);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  /* Clean edge — no gold border */
  border: 1px solid rgba(255,255,255,0.06);
}

/* Left and right bottom triangular panels */
.envelope__left,
.envelope__right {
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 60%;
  pointer-events: none;
}

.envelope__left {
  left: 0;
  background: var(--navy-mid);
  clip-path: polygon(0 100%, 100% 100%, 0 0);
}

.envelope__right {
  right: 0;
  background: var(--navy-mid);
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

/* No decorative motif on envelope triangles */
.envelope__left::after,
.envelope__right::after { content: none; }

/* Thin orange separator line between lid and body */
.envelope__band {
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--orange-dim) 20%,
    var(--orange) 50%,
    var(--orange-dim) 80%,
    transparent 100%
  );
  opacity: 0.35;
  z-index: 4;
}

/* Envelope logo strip */
.envelope__logos {
  position: absolute;
  top: 1.25rem;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  z-index: 3;
  padding: 0 1.5rem;
}

.card__logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo text fallback — no boxes, no borders */
.logo-placeholder {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.8;
  font-family: 'Lato', sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-white);
}

/* Thin vertical rule between envelope logos */
.logo-divider {
  width: 1px;
  height: 20px;
  background: rgba(253,250,246,0.18);
  flex-shrink: 0;
}

/* Envelope lid */
.envelope__lid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  transform-origin: top center;
  transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(0.2, 0, 0.1, 1.0);
  z-index: 10;
  pointer-events: none;
}

.envelope__lid-face {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(155deg, var(--navy-mid) 0%, var(--navy-light) 55%, var(--navy) 100%);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Very faint orange glow at tip of lid */
.envelope__lid-face::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: radial-gradient(ellipse 30% 20% at 50% 96%, rgba(241,156,3,0.1) 0%, transparent 100%);
}

/*
  Premium wax seal — SVG stamp rendered by renderSeal() in script.js.
  Sits ON TOP of the flap join: z-index is higher than the lid (10)
  so it visibly holds the envelope closed rather than hiding behind
  the triangle flap. Positioned at the body's vertical centre, which
  is exactly where the lid's lower tip meets the body.
*/
.envelope__seal {
  position: absolute;
  top:  50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:  72px;
  height: 72px;
  z-index: 20;            /* above .envelope__lid (z-index 10) */
  pointer-events: none;   /* taps pass through to the envelope */
  overflow: visible;      /* never clip the seal's soft shadow */
}

/* SVG handles the text — hide the fallback span */
.envelope__seal-text { display: none; }

/* Open state */
.envelope.is-open .envelope__lid {
  transform: rotateX(-180deg);
}

/*
  Wax seal break:
  1. Holds in place briefly (flap is still shut).
  2. Presses/scales up subtly — as if the wax is being lifted.
  3. Rises and fades smoothly while the flap opens upward.
*/
.envelope.is-open .envelope__seal {
  animation: sealBreak 0.9s cubic-bezier(0.32, 0, 0.4, 1) 0.08s forwards;
}

@keyframes sealBreak {
  0%   { transform: translate(-50%, -50%) scale(1)    rotate(0deg);   opacity: 1; }
  22%  { transform: translate(-50%, -52%) scale(1.08) rotate(-1deg);  opacity: 1; }
  55%  { transform: translate(-50%, -68%) scale(1.0)  rotate(3deg);   opacity: 0.85; }
  100% { transform: translate(-50%, -96%) scale(0.78) rotate(7deg);   opacity: 0; }
}

/* ── CTA PROMPT ───────────────────────────────────────────── */
.envelope__prompt {
  margin-top: 1.75rem;
  text-align: center;
  opacity: 0.6;
  transform: translateY(4px);
  transition: opacity 0.3s var(--transition), transform 0.3s var(--transition);
}

.envelope__prompt p {
  font-family: 'Lato', sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(241,156,3,0.8);
}

.envelope__prompt-icon {
  display: inline-block;
  margin-bottom: 0.4rem;
  animation: bob 2.2s ease-in-out infinite;
  color: rgba(241,156,3,0.75);
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* ── INVITATION CARD ──────────────────────────────────────── */
.invitation-card {
  width: min(520px, 90vw);
  background: var(--warm-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  position: relative;
  z-index: 1;

  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;

  transition:
    max-height 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s,
    opacity    0.6s var(--transition)              0.85s,
    margin-top 0.9s cubic-bezier(0.4, 0, 0.2, 1)  0.5s;
}

.invitation-card.is-visible {
  max-height: 5000px;
  opacity: 1;
  margin-top: 1.5rem;
  overflow: visible;
}

/* Card top bar — thin, solid, brand orange */
.card__accent {
  height: 3px;
  background: var(--orange);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Card inner */
.card__inner {
  padding: clamp(2rem, 6vw, 3.5rem);
}

/* ── CARD HEADER ──────────────────────────────────────────── */
.card__header {
  text-align: center;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

/* Logo row — clean, no boxes */
.card__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2.25rem;
  flex-wrap: wrap;
}

/* Logo image — used when a real logo file is supplied */
.card__logo-img {
  display: block;
  height: auto;
  max-height: 36px;
  width: auto;
  object-fit: contain;
}

/* Text fallback — only shown when no logo file is set
   No border, no box, no background — just clean typography */
.card-logo-placeholder {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  text-align: center;
  line-height: 1.35;
  opacity: 0.75;
}

/* Vertical rule between logos */
.card__logo-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
  flex-shrink: 0;
}

/* Simple horizontal rule — replaces the generic flourish/icon */
.card__flourish {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 1.75rem auto;
  max-width: 200px;
  display: block;
}

/* Hide all pseudo-elements and the icon from the old flourish */
.card__flourish::before,
.card__flourish::after {
  display: none;
}

.card__flourish-icon {
  display: none;
}

.card__eyebrow {
  font-family: 'Lato', sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1rem;
}

.card__title {
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  color: var(--navy);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.card__subtitle {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  color: var(--text-light);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ── EVENT META BLOCK ─────────────────────────────────────── */
/*
  Thin orange border all around — cleaner than the left-only bar.
  Subtle background tint, no heavy shadow.
*/
.card__meta {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.25rem;
  padding: 1.5rem 1.5rem 1.25rem;
  background: rgba(42,37,74,0.025);
  border: 1px solid rgba(241,156,3,0.35);
  border-radius: var(--radius);
}

.card__meta-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.card__meta-icon {
  width: 16px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--orange);
  opacity: 0.7;
}

.card__meta-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  display: block;
  margin-bottom: 0.2rem;
}

.card__meta-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.4;
}

.card__meta-sub {
  font-family: 'Lato', sans-serif;
  font-size: 0.8125rem;
  color: var(--text-light);
  display: block;
  margin-top: 0.2rem;
  line-height: 1.6;
}

/* ── INVITATION BODY ──────────────────────────────────────── */
.card__body {
  margin-bottom: 2rem;
}

.card__salutation {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--navy);
  margin-bottom: 1.25rem;
  font-weight: 400;
}

.card__copy {
  font-family: 'Lato', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.78;
  color: var(--text-mid);
  margin-bottom: 1rem;
}

/* Programme list — clean, minimal */
.card__programme {
  list-style: none;
  margin: 1.5rem 0 1.75rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
  /* No border-bottom — the card__divider hr below serves as the sole separator */
}

.card__programme li {
  font-family: 'Lato', sans-serif;
  font-size: 0.875rem;
  color: var(--text-mid);
  line-height: 1.65;
  padding: 0.3rem 0 0.3rem 1.375rem;
  position: relative;
}

.card__programme li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--orange);
  opacity: 0.7;
}

/* Section divider */
.card__divider {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 2.5rem 0;
}

/* ── RSVP SECTION ─────────────────────────────────────────── */
.card__rsvp-header {
  text-align: center;
  margin-bottom: 2rem;
}

.card__rsvp-title {
  font-size: 1.625rem;
  color: var(--navy);
  font-weight: 400;
  margin-bottom: 0.4rem;
}

.card__rsvp-deadline {
  font-family: 'Lato', sans-serif;
  font-size: 0.8125rem;
  color: var(--text-light);
  letter-spacing: 0.03em;
}

/* Replaces the "Kindly respond" heading after form submission */
.card__rsvp-received {
  font-family: 'Lato', sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  text-align: center;
  margin-bottom: 0;
}

/* ── FORM ─────────────────────────────────────────────────── */
.rsvp-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group--half-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.65;
}

.form-label .required {
  color: var(--orange);
  margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(42,37,74,0.18);
  border-radius: var(--radius);
  background: var(--warm-white);
  font-family: 'Lato', sans-serif;
  font-size: 0.9375rem;
  color: var(--text-dark);
  transition: border-color 0.2s var(--transition), box-shadow 0.2s var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(107,107,107,0.45);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(42,37,74,0.07);
}

.form-textarea {
  resize: vertical;
  min-height: 90px;
}

/* Attendance radio */
.attendance-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.attendance-option {
  position: relative;
}

.attendance-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.attendance-option label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.75rem;
  border: 1.5px solid rgba(42,37,74,0.15);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s var(--transition);
  background: transparent;
  min-height: 72px;
}

.attendance-option label:hover {
  border-color: var(--navy);
  background: rgba(42,37,74,0.03);
}

.attendance-option input:checked + label {
  border-color: var(--navy);
  background: var(--navy);
}

.attendance-option input:checked + label .attendance-label-main {
  color: var(--warm-white);
}

.attendance-option input:checked + label .attendance-label-sub {
  color: rgba(253,250,246,0.55);
}

.attendance-option input:focus-visible + label {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.attendance-label-main {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.3;
}

.attendance-label-sub {
  font-family: 'Lato', sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--text-light);
  margin-top: 0.2rem;
}

/* Submit button */
.btn-submit {
  width: 100%;
  padding: 1rem 2rem;
  background: var(--navy);
  color: var(--warm-white);
  border: none;
  border-radius: var(--radius);
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s var(--transition), transform 0.15s var(--transition), box-shadow 0.2s var(--transition);
  margin-top: 0.5rem;
}

.btn-submit:hover {
  background: var(--navy-mid);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(42,37,74,0.28);
}

.btn-submit:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-submit:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Form note */
.form-note {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  color: var(--text-light);
  text-align: center;
  line-height: 1.6;
}

/* ── CONFIRMATION ─────────────────────────────────────────── */
.confirmation {
  display: none;
  text-align: center;
  padding: 2.5rem 1rem;
  animation: fadeUp 0.5s var(--transition) both;
}

.confirmation.is-visible {
  display: block;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.confirmation__icon {
  width: 52px;
  height: 52px;
  background: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.confirmation__icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--orange);
  stroke-width: 2.5;
  fill: none;
}

.confirmation__title {
  font-size: 1.75rem;
  color: var(--navy);
  margin-bottom: 1rem;
}

.confirmation__copy {
  font-family: 'Lato', sans-serif;
  font-size: 0.9375rem;
  color: var(--text-mid);
  line-height: 1.75;
  max-width: 400px;
  margin: 0 auto;
}

/* ── CARD FOOTER ──────────────────────────────────────────── */
.card__footer {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

.card__footer-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

/* Footer logos — no boxes, same clean treatment as header */
.card__footer-logos .card-logo-placeholder {
  font-size: 0.6875rem;
}

.card__footer-copy {
  font-family: 'Lato', sans-serif;
  font-size: 0.75rem;
  color: var(--text-light);
  line-height: 1.6;
}

.card__footer-copy a {
  color: var(--navy);
  text-decoration: none;
  opacity: 0.65;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.2s;
}

.card__footer-copy a:hover { opacity: 1; }

/* ── NO-JS FALLBACK ───────────────────────────────────────── */
.no-js .envelope-wrapper { display: none; }

.no-js .invitation-card {
  max-height: none;
  opacity: 1;
  overflow: visible;
  margin-top: 0;
}

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .envelope,
  .envelope__lid,
  .invitation-card,
  .scene-header {
    transition: none !important;
  }
  .envelope__prompt-icon {
    animation: none !important;
  }
  .invitation-card.is-visible {
    transition: none !important;
  }
  /* Seal: skip animation, just hide immediately */
  .envelope.is-open .envelope__seal {
    animation: none !important;
    opacity:   0;
  }
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .scene { padding: 1.5rem 0.75rem; }

  .card__inner { padding: 1.75rem 1.25rem; }

  .form-group--half-pair { grid-template-columns: 1fr; }

  .attendance-group { grid-template-columns: 1fr; }

  .card__logos { gap: 1.25rem; }

  .card__logo-divider { display: none; }

  .envelope__logos { gap: 1rem; padding: 0 1rem; }

  /* Slightly smaller wax seal on phones — still a clear feature */
  .envelope__seal { width: 52px; height: 52px; }

  .logo-divider { display: none; }

  .card__footer-logos { gap: 1.25rem; }
}

@media (max-width: 380px) {
  .card__title { font-size: 1.375rem; }
}