@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Great+Vibes&family=Montserrat:wght@500;600;700&display=swap');

:root {
  --paper: #f8f0eb;
  --paper-soft: #fffaf2;
  --paper-solid: #fffaf4;
  --ink: #443a34;
  --ink-muted: #75665d;
  --rose: #ca5274;
  --rose-deep: #b94367;
  --rose-soft: #f7dfe4;
  --blue: #2478b5;
  --blue-deep: #17689f;
  --blue-soft: #e7f1f8;
  --gold: #d09a3d;
  --gold-soft: #e9ca90;
  --gold-line: rgba(202, 148, 53, .86);
  --gold-text: #8c6522;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --script: 'Great Vibes', 'Snell Roundhand', 'Apple Chancery', cursive;
  --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --frame-image: url('./assets/frame-message-reference-v4.png');
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: #eee6dc;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: #eee6dc;
  font-family: var(--serif);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

button { cursor: pointer; }

[hidden] { display: none !important; }

.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;
}

.invitation-page {
  position: relative;
  isolation: isolate;
  width: min(100%, 1022px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 42px rgba(91, 70, 53, .08);
}

.watercolor-layer {
  position: absolute;
  top: -70px;
  left: 0;
  right: 0;
  bottom: -70px;
  z-index: -2;
  pointer-events: none;
  background-color: var(--paper);
  background-image: url('./assets/reference-border-continuous-v2.4.png');
  background-image: image-set(
    url('./assets/reference-border-continuous-v2.4.webp') type('image/webp') 1x,
    url('./assets/reference-border-continuous-v2.4.png') type('image/png') 1x
  );
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  will-change: transform;
}

.invitation-page::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  background: rgba(255, 249, 240, .88);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .85) 13%, #000 19%, #000 81%, rgba(0, 0, 0, .85) 87%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .85) 13%, #000 19%, #000 81%, rgba(0, 0, 0, .85) 87%, transparent 100%);
  pointer-events: none;
}

.invitation-card {
  position: relative;
  width: min(100% - 32px, 630px);
  margin: 0 auto;
  padding: 37px 0 22px;
}

.reveal-on-scroll { opacity: 1; transform: none; }

.hero { position: relative; text-align: center; }

.twinkle-star {
  position: absolute;
  z-index: 1;
  color: var(--gold);
  opacity: .5;
  pointer-events: none;
}

.twinkle-star-1 { top: -6px; left: 9%; font-size: 12px; }
.twinkle-star-2 { top: 34px; right: 7%; font-size: 9px; }
.twinkle-star-3 { top: 128px; left: 4%; font-size: 10px; }
.twinkle-star-4 { top: 150px; right: 3%; font-size: 13px; }

@media (max-width: 699px) {
  .twinkle-star-3 { top: 96px; left: 3%; }
  .twinkle-star-4 { top: 112px; right: 2%; }
}

.hero-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 18px;
  color: var(--gold-text);
  font: 700 15px/1 var(--sans);
  letter-spacing: .38em;
  text-transform: uppercase;
}

.hero-kicker i { flex: 0 0 auto; }

.hero h1 {
  display: block;
  margin: 0;
  color: var(--rose);
  font-family: var(--script);
  font-size: 118px;
  font-weight: 400;
  line-height: .72;
  letter-spacing: -.018em;
  text-shadow: 0 1px rgba(255, 255, 255, .76);
}

.hero h1 > span,
.hero h1 > strong { display: block; }

.hero h1 > strong {
  margin: 8px 0 0 14px;
  color: var(--blue);
  font-family: var(--script);
  font-size: 1.04em;
  font-weight: 400;
  line-height: .72;
}

.hero h1 em {
  display: inline-block;
  margin-right: .04em;
  color: var(--gold);
  font-size: .53em;
  font-style: normal;
  vertical-align: .18em;
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 466px;
  max-width: 82%;
  margin: 15px auto 5px;
  color: var(--gold);
}

.ornament span {
  display: block;
  flex: 1;
  height: 1px;
  background: var(--gold-soft);
}

.bear-picture {
  display: block;
  width: 560px;
  max-width: 90%;
  margin: 0 auto -4px;
  will-change: transform;
}

.bear-hero {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  filter: saturate(.88) contrast(.97) brightness(1.025);
}

.name-plaque {
  position: relative;
  display: flex;
  width: min(100%, 613px);
  min-height: 126px;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: -54px auto 0;
  padding: 12px 44px 14px;
  background-color: transparent;
  background-image: url('./assets/frame-name-reference-v4.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  white-space: nowrap;
  overflow: hidden;
}

.name-plaque::before {
  content: '';
  position: absolute;
  top: -25%;
  left: -60%;
  z-index: 2;
  width: 40%;
  height: 150%;
  background: linear-gradient(78deg, transparent 38%, rgba(255,253,244,.55) 47%, rgba(255,250,225,.85) 50%, rgba(255,253,244,.55) 53%, transparent 62%);
  pointer-events: none;
  opacity: 0;
}

.name-plaque .name {
  font: 400 63px/.92 var(--script);
}

.rose-name { color: var(--rose); }
.blue-name { color: var(--blue); }

.choice-word {
  flex: 0 0 auto;
  color: var(--gold);
  font: 600 16px/1 var(--serif);
  font-style: italic;
}

.hero-copy {
  display: flex;
  width: min(100%, 606px);
  min-height: 159px;
  align-items: center;
  justify-content: center;
  margin: -8px auto 0;
  padding: 20px 76px 22px;
  color: #3f3935;
  background-color: transparent;
  background-image: url('./assets/frame-message-reference-v4.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  font: 500 26px/1.1 var(--serif);
  text-align: center;
  text-wrap: balance;
}

.event-panel {
  display: grid;
  width: min(100%, 600px);
  gap: 4px;
  margin: 7px auto 0;
}

.ornate-frame {
  border: 16px solid transparent;
  border-image-source: var(--frame-image);
  border-image-slice: 23 23;
  border-image-width: 16px;
  border-image-repeat: stretch;
  background: rgba(255, 250, 242, .87);
  background-clip: padding-box;
}

.event-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.event-fact {
  min-width: 0;
  min-height: 154px;
  padding: 2px 12px 5px;
  text-align: center;
}

.icon-shell {
  display: grid;
  place-items: center;
  height: 39px;
  margin-bottom: 1px;
}

.rose-fact .icon-shell { color: var(--rose); }
.blue-fact .icon-shell { color: var(--blue); }
.rose-fact small { color: var(--rose); }
.blue-fact small { color: var(--blue); }

.event-fact small,
.gift-block small,
.pix-heading small,
.venue-copy small {
  display: block;
  color: var(--ink);
  font: 700 12px/1.15 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.event-fact strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font: 500 32px/.94 var(--serif);
}

.event-fact .fact-detail {
  display: block;
  margin-top: 5px;
  color: var(--rose);
  font: 400 21px/.95 var(--script);
}

.blue-fact .fact-detail {
  color: var(--blue);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
}

.countdown {
  min-height: 125px;
  padding: 2px 17px 3px;
}

.section-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 10px;
  color: var(--rose);
  font: 700 11px/1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.countdown-unit {
  position: relative;
  min-width: 0;
  padding: 0 5px;
  text-align: center;
}

.countdown-unit:not(:last-child)::after {
  position: absolute;
  top: 1px;
  right: 0;
  width: 1px;
  height: 47px;
  content: '';
  background: rgba(208, 154, 61, .44);
}

.countdown-value {
  display: block;
  color: var(--rose);
  font: 500 39px/.78 var(--serif);
  font-variant-numeric: tabular-nums;
}

.countdown-unit span {
  display: block;
  margin-top: 8px;
  color: #282624;
  font: 700 9px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gift-block {
  display: grid;
  grid-template-columns: 64px 1fr 46px;
  align-items: center;
  min-height: 74px;
  padding: 0 12px;
  color: var(--gold);
  text-align: center;
}

.gift-block::after {
  width: 46px;
  content: '';
}

.gift-block > i { justify-self: center; }

.gift-block small { margin-bottom: 1px; }

.gift-block strong {
  display: block;
  color: var(--rose);
  font: 400 25px/.95 var(--script);
}

.gift-note {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font: 600 9px/1.1 var(--sans);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.pix-block {
  min-height: 166px;
  padding: 0 10px;
  border-width: 13px;
  border-image-width: 13px;
}

.pix-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: -2px 0 1px;
  text-align: left;
}

.pix-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--rose);
}

.pix-heading small {
  margin-bottom: 1px;
  font-size: 9px;
}

.pix-heading strong {
  display: block;
  color: var(--rose);
  font: 400 25px/.9 var(--script);
}

.pix-heading strong .pix-word {
  display: inline-block;
  margin-left: .1em;
  font-family: var(--sans);
  font-size: .56em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1;
  transform: translateY(-.04em);
}

.pix-copy {
  max-width: 550px;
  margin: 0 auto 5px;
  color: var(--ink-muted);
  font: 500 12.5px/1.15 var(--serif);
  text-align: center;
  text-wrap: balance;
}

.pix-data {
  overflow: hidden;
  border: 1px solid rgba(208, 154, 61, .42);
  border-radius: 7px;
  background: rgba(255, 252, 247, .7);
}

.pix-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 25px;
  align-items: center;
}

.pix-row + .pix-row { border-top: 1px solid rgba(208, 154, 61, .34); }

.pix-row > span {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-right: 1px solid rgba(208, 154, 61, .34);
  color: #373230;
  font: 700 9px/1 var(--sans);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pix-row strong {
  min-width: 0;
  padding: 4px 10px;
  overflow-wrap: anywhere;
  color: #403a36;
  font: 600 12px/1.15 var(--sans);
}

.copy-pix {
  display: flex;
  width: 100%;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 5px;
  border: 1px solid rgba(36, 120, 181, .72);
  border-radius: 8px;
  color: var(--blue);
  background: rgba(250, 253, 255, .84);
  font: 700 12px/1 var(--sans);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.copy-pix:hover { background: #fff; }
.copy-pix:active { transform: translateY(1px); }
.copy-pix.is-copied { color: #477858; border-color: #77a084; }

.venue-block {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  min-height: 95px;
  padding: 9px 18px 8px;
  border: 1px solid rgba(73, 131, 171, .28);
  border-radius: 18px;
  background: rgba(230, 240, 247, .86);
}

.venue-icon {
  grid-row: 1 / span 2;
  justify-self: center;
  color: var(--blue);
}

.venue-copy { min-width: 0; }

.venue-copy small { margin-bottom: 2px; }

.venue-copy strong,
.venue-copy > span {
  display: block;
  overflow-wrap: anywhere;
}

.venue-copy strong {
  color: var(--ink);
  font: 500 16px/1.04 var(--serif);
}

.venue-copy > span {
  color: var(--ink);
  font: 500 15px/1.04 var(--serif);
}

.map-button {
  grid-column: 2;
  display: flex;
  min-height: 27px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 4px;
  border: 1px solid rgba(36, 120, 181, .25);
  border-radius: 999px;
  color: var(--blue);
  background: rgba(255, 252, 247, .8);
  font: 700 11px/1 var(--sans);
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}

.map-button:hover { background: #fff; }
.map-button:active { transform: translateY(1px); }

.primary-button {
  border: 0;
  color: #fff;
  background: var(--rose);
}

.rsvp-button {
  display: flex;
  width: 100%;
  min-height: 69px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 8px 20px 9px;
  border-radius: 17px;
  box-shadow: 0 7px 14px rgba(131, 47, 73, .20);
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.rsvp-button:hover {
  background: var(--rose-deep);
  box-shadow: 0 9px 18px rgba(131, 47, 73, .24);
}

.rsvp-button:active { transform: translateY(1px); }

.rsvp-button > i { flex: 0 0 auto; }

.rsvp-button strong {
  display: block;
  font: 400 31px/.86 var(--script);
}

.rsvp-button small {
  display: block;
  margin-top: 5px;
  font: 600 9px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.invitation-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 4px 0;
  color: var(--gold);
}

.invitation-footer p {
  margin: 0;
  color: #5d4b42;
  font: 400 25px/1 var(--script);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(36, 120, 181, .35);
  outline-offset: 3px;
}

/* RSVP modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(54, 43, 37, .52);
  backdrop-filter: blur(7px);
}

.rsvp-modal {
  position: relative;
  width: min(100%, 560px);
  max-height: min(92vh, 820px);
  overflow: auto;
  padding: 29px 24px 23px;
  border: 1px solid rgba(208, 154, 61, .44);
  border-radius: 24px;
  color: var(--ink);
  background: var(--paper-solid);
  box-shadow: 0 26px 72px rgba(47, 36, 29, .28);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(208, 154, 61, .35);
  border-radius: 50%;
  color: var(--ink-muted);
  background: #fff;
}

.modal-heading {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-right: 42px;
  margin-bottom: 22px;
  color: var(--rose);
}

.modal-heading h2,
.success-state h2 {
  margin: 2px 0;
  color: var(--ink);
  font: 600 33px/1 var(--serif);
}

.modal-heading p,
.success-state p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font: 500 17px/1.25 var(--serif);
}

.modal-eyebrow {
  margin: 0 0 6px !important;
  color: var(--rose) !important;
  font: 700 10px/1 var(--sans) !important;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.rsvp-form { display: grid; gap: 15px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.field label,
.guess-field legend {
  display: block;
  margin-bottom: 7px;
  color: #6f5f55;
  font: 700 10px/1 var(--sans);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.field input,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #dfcfb6;
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  font: 500 17px/1.2 var(--serif);
}

.field textarea { min-height: 84px; resize: vertical; }
.guess-field { padding: 0; margin: 1px 0; border: 0; }
.guess-field legend span { font-weight: 500; letter-spacing: 0; text-transform: none; }
.guess-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.guess-option input { position: absolute; opacity: 0; }

.guess-option span {
  display: flex;
  min-height: 47px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  border: 1px solid #e0d2bd;
  border-radius: 13px;
  background: #fff;
  font: 700 13px/1 var(--sans);
}

.guess-option-rose span { color: var(--rose); }
.guess-option-blue span { color: var(--blue); }
.guess-option input:checked + span { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(208, 154, 61, .13); }
.honeypot { position: absolute !important; left: -9999px !important; }

.submit-button,
.modal-done {
  width: 100%;
  min-height: 54px;
  border-radius: 14px;
  font: 700 13px/1 var(--sans);
}

.submit-button:disabled { cursor: wait; opacity: .68; }
.form-status { min-height: 18px; margin: 0; color: #54705d; font: 600 12px/1.3 var(--sans); text-align: center; }
.form-status.is-error { color: #a54545; }
.success-state { position: relative; padding: 30px 6px 10px; text-align: center; overflow: hidden; }
.success-icon { margin-bottom: 12px; color: #629071; }

.confetti-burst {
  position: absolute;
  inset: -10px 0 auto 0;
  height: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

.confetti-piece {
  position: absolute;
  top: 0;
  transform: translateY(0) rotate(0deg);
  opacity: 0;
  animation-name: confetti-fall;
  animation-timing-function: cubic-bezier(.25,.46,.45,.94);
  animation-fill-mode: forwards;
}

.confetti-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

@keyframes confetti-fall {
  0%   { opacity: 0; transform: translateY(-6px) translateX(0) rotate(0deg) scale(.6); }
  12%  { opacity: 1; transform: translateY(10px) translateX(calc(var(--drift) * .2)) rotate(calc(var(--spin) * .2)) scale(1); }
  100% { opacity: 0; transform: translateY(150px) translateX(var(--drift)) rotate(var(--spin)) scale(.9); }
}

/* Organizer panel — preserved and responsive */
.organizer-page {
  min-height: 100vh;
  padding: 32px 18px 60px;
  color: #4f4239;
  background: #f7f0e8;
  font-family: var(--sans);
}

.organizer-watercolor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background: url('./assets/reference-border-continuous-v2.4.png') center top / min(100%, 1022px) auto no-repeat;
}

#organizerRoot { position: relative; width: min(100%, 1180px); margin: auto; }

.login-card,
.loading-card,
.list-card,
.summary-card,
.organizer-header {
  border: 1px solid rgba(215, 189, 147, .66);
  background: rgba(255, 252, 247, .94);
  box-shadow: 0 15px 42px rgba(75, 60, 48, .08);
}

.login-card { width: min(100%, 480px); margin: 8vh auto 0; padding: 34px; border-radius: 24px; text-align: center; }
.login-mark { display: grid; width: 62px; height: 62px; place-items: center; margin: 0 auto 15px; border-radius: 50%; color: var(--rose); background: var(--rose-soft); }
.organizer-eyebrow { margin: 0 0 6px; color: var(--rose); font: 700 10px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; }
.login-card h1,
.organizer-header h1,
.list-header h2,
.loading-card h1 { margin: 0; color: #504138; font-family: var(--serif); }
.login-card h1 { font-size: 38px; }
.login-intro { color: #7d6c60; line-height: 1.5; }
.login-form { display: grid; gap: 14px; margin-top: 24px; text-align: left; }
.login-form label { color: #6b5c53; font-size: 12px; font-weight: 700; }
.login-form input { width: 100%; margin-top: 7px; padding: 13px; border: 1px solid #ddcfba; border-radius: 12px; background: #fff; }
.login-form button,
.list-actions button,
.organizer-header-actions button { padding: 13px 16px; border: 0; border-radius: 12px; color: #fff; background: var(--rose); font-weight: 700; }
.security-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; color: #8a786d; font-size: 12px; }
.back-link { display: inline-block; margin-top: 18px; color: var(--blue); }
.organizer-form-message { color: #a34545; font-size: 13px; }
.loading-card { display: flex; width: min(100%, 500px); align-items: center; gap: 16px; margin: 16vh auto; padding: 28px; border-radius: 22px; color: var(--rose); }
.organizer-shell { display: grid; gap: 20px; }
.organizer-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 25px; border-radius: 22px; }
.organizer-header h1 { font-size: 38px; }
.organizer-header p { margin: 5px 0 0; color: #7b6c62; }
.organizer-header-actions { display: flex; align-items: center; gap: 9px; }
.organizer-header-actions a { color: var(--blue); font-weight: 700; text-decoration: none; }
.summary-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.summary-card { display: flex; align-items: center; gap: 10px; padding: 18px; border-radius: 17px; }
.summary-icon { display: grid; place-items: center; color: var(--rose); }
.summary-card small { display: block; color: #847469; font-size: 10px; }
.summary-card strong { display: block; color: #55453b; font: 600 26px/1 var(--serif); }
.list-card { padding: 23px; border-radius: 22px; }
.list-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.list-header h2 { font-size: 30px; }
.list-header p { margin: 4px 0; color: #88786e; }
.list-actions { display: flex; gap: 8px; }
.list-actions button { display: flex; align-items: center; gap: 7px; border: 1px solid #dfd2bd; color: #655349; background: #fff; }
.search-field { display: flex; align-items: center; gap: 8px; margin: 18px 0; padding: 0 13px; border: 1px solid #ddd1bf; border-radius: 13px; background: #fff; }
.search-field input { width: 100%; padding: 13px 0; border: 0; outline: 0; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th,
td { padding: 12px 10px; border-bottom: 1px solid #eee5d8; text-align: left; white-space: nowrap; }
th { color: #89786c; font-size: 10px; text-transform: uppercase; }
.guess-badge,
.people-badge { display: inline-block; padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.guess-rose { color: var(--rose); background: var(--rose-soft); }
.guess-blue { color: var(--blue); background: var(--blue-soft); }
.mobile-list { display: none; }
.empty-state { padding: 38px; color: #84746a; text-align: center; }
.empty-state h3 { margin: 0 0 6px; color: #5b493d; font: 600 27px/1 var(--serif); }

@media (prefers-reduced-motion: no-preference) {
  .intro-step { animation: fade-lift .92s both cubic-bezier(.2,.82,.28,1); }
  .intro-step-2 { animation-delay: .12s; }
  .intro-step-3 { animation-delay: .24s; }
  .intro-step-4 { animation-delay: .36s; }
  .intro-step-5 { animation-delay: .50s; }
  .intro-step-6 { animation-delay: .64s; }

  @keyframes fade-lift {
    from { opacity: 0; transform: translateY(16px) scale(.992); }
    to { opacity: 1; transform: none; }
  }

  .bear-hero {
    transform-origin: 50% 78%;
    animation: bear-breathe 5.8s 1.45s ease-in-out infinite;
  }

  @keyframes bear-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.008); }
  }

  .name-plaque { animation-name: fade-lift, plaque-soft-glow; animation-duration: .92s, 6s; animation-delay: .50s, 1.5s; animation-timing-function: cubic-bezier(.2,.82,.28,1), ease-in-out; animation-fill-mode: both, none; animation-iteration-count: 1, infinite; }

  @keyframes plaque-soft-glow {
    0%, 100% { filter: drop-shadow(0 1px 0 rgba(255,255,255,.12)); }
    50% { filter: drop-shadow(0 4px 9px rgba(208,154,61,.12)); }
  }

  .name-plaque::before { animation: plaque-shimmer 6.5s ease-in-out 2.3s infinite; }

  @keyframes plaque-shimmer {
    0%, 14%   { left: -60%; opacity: 0; }
    18%       { opacity: .85; }
    34%, 100% { left: 130%; opacity: 0; }
  }

  /* Real scroll-triggered reveal — elements start hidden only once JS
     confirms motion is welcome, then the observer flips .is-visible. */
  .js-motion .reveal-on-scroll {
    opacity: 0;
    transform: translateY(22px) scale(.985);
    transition: opacity 1s cubic-bezier(.19,.85,.24,1), transform 1s cubic-bezier(.19,.85,.24,1);
  }

  .js-motion .reveal-on-scroll.is-visible {
    opacity: 1;
    transform: none;
  }

  .js-motion .event-facts.is-visible .event-fact:nth-child(2) { transition-delay: .1s; }
  .js-motion .countdown.is-visible .countdown-unit:nth-child(2) { transition-delay: .06s; }
  .js-motion .countdown.is-visible .countdown-unit:nth-child(3) { transition-delay: .12s; }
  .js-motion .countdown.is-visible .countdown-unit:nth-child(4) { transition-delay: .18s; }

  .twinkle-star { animation: twinkle 3.6s ease-in-out infinite; }
  .twinkle-star-2 { animation-delay: .8s; }
  .twinkle-star-3 { animation-delay: 1.6s; }
  .twinkle-star-4 { animation-delay: 2.4s; }

  @keyframes twinkle {
    0%, 100% { opacity: .25; transform: scale(.82); }
    50% { opacity: .95; transform: scale(1.12); }
  }

  .countdown-value.is-ticking { animation: tick-pulse .4s ease-out; }

  @keyframes tick-pulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.16); color: var(--gold); }
    100% { transform: scale(1); }
  }

  .rsvp-button { animation: rsvp-glow 3.2s ease-in-out infinite; }
  .rsvp-button:hover,
  .rsvp-button:focus-visible { animation-play-state: paused; }

  @keyframes rsvp-glow {
    0%, 100% { box-shadow: 0 7px 14px rgba(131, 47, 73, .20); }
    50% { box-shadow: 0 9px 22px rgba(131, 47, 73, .38); }
  }
}

@media (max-width: 699px) {
  .invitation-page { width: 100%; box-shadow: none; }

  .watercolor-layer {
    background-position: center top;
    background-size: 100% auto;
  }

  .invitation-page::after {
    background: rgba(255, 249, 240, .91);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .8) 8%, #000 15%, #000 85%, rgba(0, 0, 0, .8) 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .8) 8%, #000 15%, #000 85%, rgba(0, 0, 0, .8) 92%, transparent 100%);
  }

  .invitation-card {
    width: calc(100% - 22px);
    padding-top: 22px;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .hero-kicker {
    gap: 8px;
    margin-bottom: 12px;
    font-size: clamp(8px, 2.35vw, 10px);
    letter-spacing: .19em;
  }

  .hero h1 { font-size: clamp(54px, 15.7vw, 72px); line-height: .74; }
  .hero h1 > strong { margin-top: 7px; margin-left: 4px; font-size: 1.02em; line-height: .75; }
  .ornament { max-width: 74%; margin-top: 13px; margin-bottom: 5px; }
  .bear-picture { width: 100%; max-width: 96%; margin-top: 0; margin-bottom: -2px; }
  .name-plaque {
    min-height: 0;
    width: 100%;
    aspect-ratio: 613 / 126;
    gap: 7px;
    margin-top: 0;
    padding: 7px 25px 9px;
  }

  .name-plaque .name { font-size: clamp(35px, 11vw, 49px); }
  .choice-word { font-size: clamp(12px, 3.5vw, 16px); }

  .hero-copy {
    min-height: 0;
    width: min(100%, 606px);
    aspect-ratio: 606 / 159;
    margin-top: 7px;
    padding: 13px 29px 15px;
    font-size: clamp(14px, 4.15vw, 18px);
    line-height: 1.27;
  }
  .event-panel { margin-top: 9px; gap: 5px; }

  .ornate-frame {
    border-width: 13px;
    border-image-width: 13px;
  }

  .event-facts { gap: 5px; }
  .event-fact { min-height: 139px; padding: 1px 4px 4px; }
  .icon-shell { height: 34px; }
  .event-fact small { font-size: 9px; letter-spacing: .13em; }
  .event-fact strong { margin-top: 5px; font-size: clamp(22px, 6.5vw, 27px); }
  .event-fact .fact-detail { font-size: 19px; }
  .blue-fact .fact-detail { font-size: 19px; }

  .countdown { min-height: 113px; padding-inline: 6px; }
  .section-kicker { gap: 8px; margin-bottom: 9px; font-size: 9px; letter-spacing: .11em; }
  .countdown-value { font-size: clamp(30px, 9vw, 35px); }
  .countdown-unit span { margin-top: 7px; font-size: 7px; letter-spacing: .05em; }
  .countdown-unit:not(:last-child)::after { height: 43px; }

  .gift-block {
    grid-template-columns: 48px 1fr 34px;
    min-height: 78px;
    padding-inline: 2px;
  }

  .gift-block::after { width: 34px; }
  .gift-block > i { font-size: 31px !important; }
  .gift-block small { font-size: 9px; letter-spacing: .12em; }
  .gift-block strong { font-size: clamp(22px, 6.8vw, 27px); }
  .gift-note { margin-top: 4px; font-size: 7px; letter-spacing: .04em; }

  .pix-block { min-height: 190px; padding-inline: 3px; }
  .pix-heading { gap: 9px; margin-bottom: 4px; }
  .pix-icon i { font-size: 29px !important; }
  .pix-heading small { font-size: 8px; letter-spacing: .12em; }
  .pix-heading strong { font-size: clamp(22px, 7vw, 27px); }
  .pix-copy { max-width: 325px; margin-bottom: 7px; font-size: 12px; line-height: 1.23; }
  .pix-row { grid-template-columns: 79px minmax(0, 1fr); min-height: 28px; }
  .pix-row > span { padding-inline: 7px; font-size: 7px; }
  .pix-row strong { padding-inline: 7px; font-size: clamp(9px, 2.75vw, 11px); }
  .copy-pix { min-height: 38px; font-size: 10px; }

  .venue-block {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 108px;
    padding: 9px 10px 8px;
    border-radius: 16px;
  }

  .venue-icon i { font-size: 36px !important; }
  .venue-copy small { font-size: 9px; }
  .venue-copy strong { font-size: clamp(14px, 4vw, 16px); }
  .venue-copy > span { font-size: clamp(13px, 3.7vw, 15px); }
  .map-button { min-height: 31px; font-size: 9px; }

  .rsvp-button { min-height: 69px; gap: 10px; padding-inline: 14px; border-radius: 16px; }
  .rsvp-button > i { flex-shrink: 0; font-size: 30px !important; }
  .rsvp-button strong { font-size: clamp(19px, 6.4vw, 33px); white-space: nowrap; }
  .rsvp-button small { font-size: 7px; letter-spacing: .1em; }
  .invitation-footer { padding-top: 13px; }
  .invitation-footer p { font-size: clamp(20px, 6vw, 25px); }

  .rsvp-modal { padding: 26px 17px 20px; border-radius: 21px; }
  .field-row,
  .guess-options { grid-template-columns: 1fr 1fr; }

  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .organizer-header,
  .list-header { align-items: flex-start; flex-direction: column; }
  .organizer-header-actions { width: 100%; justify-content: space-between; }
  .table-wrap { display: none; }
  .mobile-list { display: grid; gap: 12px; }
  .guest-card { padding: 16px; border: 1px solid #e5d9c7; border-radius: 16px; background: #fff; }
  .guest-card-top { display: flex; justify-content: space-between; gap: 8px; }
  .guest-card h3 { margin: 2px 0; font: 600 24px/1 var(--serif); }
  .guest-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
  .guest-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
  .guest-card dl div { padding: 9px; border-radius: 10px; background: #faf6ef; }
  .guest-card dt { font-size: 9px; text-transform: uppercase; }
  .guest-card dd { margin: 3px 0 0; font-weight: 700; }
  .guest-card p { font-size: 12px; }
  .guest-card footer { display: flex; justify-content: space-between; gap: 7px; font-size: 11px; }
  .list-actions { width: 100%; }
  .list-actions button { flex: 1; justify-content: center; }
}

@media (max-width: 399px) {
  .hero h1 { font-size: clamp(52px, 15.4vw, 61px); }
  .hero-kicker { letter-spacing: .175em; }
  .name-plaque .name { font-size: clamp(35px, 10.8vw, 43px); }
  .hero-copy { padding-inline: 27px; font-size: clamp(14px, 4.05vw, 16px); }
}

@media (max-width: 359px) {
  .invitation-card { width: calc(100% - 14px); }
  .hero h1 { font-size: 51px; }
  .hero-kicker { letter-spacing: .15em; }
  .event-fact strong { font-size: 21px; }
  .section-kicker { gap: 5px; font-size: 8px; }
  .pix-copy { font-size: 11px; }
  .rsvp-button strong { font-size: 18px; }
}

/* === v6.2 · refinamento de composição da capa (mobile) === */
@media (max-width: 699px) {
  .invitation-card {
    padding-top: 18px;
  }

  .hero-kicker {
    margin-bottom: 10px;
    gap: 7px;
    font-size: clamp(8px, 2.25vw, 9.5px);
    letter-spacing: .18em;
  }

  .hero h1 {
    font-size: clamp(52px, 14.7vw, 67px);
    line-height: .77;
  }

  .hero h1 > strong {
    margin-top: 5px;
    margin-left: 3px;
    font-size: 1.01em;
    line-height: .77;
  }

  .ornament {
    max-width: 69%;
    margin-top: 10px;
    margin-bottom: 1px;
  }

  .bear-picture {
    width: 100%;
    max-width: 91%;
    margin-top: -3px;
    margin-bottom: -9px;
  }

  .name-plaque {
    width: 97%;
    gap: 6px;
    margin-top: 0;
    padding: 7px 23px 9px;
  }

  .name-plaque .name {
    font-size: clamp(34px, 10.35vw, 46px);
  }

  .choice-word {
    font-size: clamp(11px, 3.2vw, 15px);
  }

  .hero-copy {
    width: 97%;
    margin-top: 5px;
    padding: 13px 31px 15px;
    font-size: clamp(14px, 3.95vw, 17px);
    line-height: 1.25;
  }

  .event-panel {
    margin-top: 7px;
  }
}

@media (max-width: 399px) {
  .hero h1 { font-size: clamp(50px, 14.4vw, 57px); }
  .name-plaque .name { font-size: clamp(33px, 10vw, 40px); }
  .hero-copy { padding-inline: 26px; font-size: clamp(13.8px, 3.9vw, 15.5px); }
}

/* === v6.3 · primeira dobra = capa completa até o fim da mensagem === */
@media (max-width: 699px) {
  /* A página começa com 18px de padding no card. A hero completa o restante
     da pequena viewport do navegador, mantendo Data/Horário abaixo da dobra. */
  .hero {
    min-height: calc(100vh - 18px);
    min-height: calc(100svh - 18px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: clamp(12px, 2.2svh, 18px);
  }

  /* Reequilíbrio leve para a capa preencher a primeira dobra sem parecer esticada. */
  .hero-kicker { margin-bottom: 11px; }
  .ornament { margin-top: 11px; margin-bottom: 3px; }
  .bear-picture { max-width: 92%; margin-top: -1px; margin-bottom: -5px; }
  .name-plaque { width: 97.5%; }
  .hero-copy {
    width: 97.5%;
    margin-top: 6px;
    margin-bottom: 0;
  }

  /* O conteúdo funcional começa somente depois da capa/primeira dobra. */
  .event-panel { margin-top: 0; }
}

/* Em telas mobile muito baixas, preserva a regra sem cortar o texto. */
@media (max-width: 699px) and (max-height: 620px) {
  .hero {
    min-height: calc(100vh - 14px);
    min-height: calc(100svh - 14px);
    padding-bottom: 9px;
  }
  .invitation-card { padding-top: 14px; }
  .hero-kicker { margin-bottom: 8px; }
  .hero h1 { font-size: clamp(48px, 13.9vw, 55px); }
  .ornament { margin-top: 7px; margin-bottom: 0; }
  .bear-picture { max-width: 86%; margin-bottom: -7px; }
  .name-plaque { width: 95.5%; }
  .name-plaque .name { font-size: clamp(31px, 9.6vw, 38px); }
  .hero-copy {
    width: 95.5%;
    margin-top: 4px;
    padding-inline: 25px;
    font-size: clamp(13px, 3.75vw, 14.8px);
  }
}

/* === v6.4 · proporções da primeira tela ===
   A capa é composta em quatro níveis reais: título, ursinhos, nomes e mensagem.
   O espaço livre da viewport é distribuído ENTRE os níveis, nunca abaixo do texto. */
@media (max-width: 699px) {
  .hero {
    height: calc(100vh - 18px);
    height: calc(100svh - 18px);
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto auto;
    align-content: space-between;
    justify-items: center;
    padding-bottom: 5px;
  }

  .hero-heading {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* O bloco do título funciona como uma única composição. */
  .hero-kicker {
    margin: 0 0 9px;
  }
  .hero h1 {
    margin: 0;
    font-size: clamp(50px, 14.25vw, 64px);
    line-height: .78;
  }
  .hero h1 > strong {
    margin-top: 5px;
    line-height: .78;
  }
  .ornament {
    width: 67%;
    max-width: none;
    margin: 10px auto 0;
  }

  /* Hierarquia horizontal: imagem < molduras; evita aspecto inflado. */
  .bear-picture {
    width: 89%;
    max-width: none;
    margin: 0 auto;
  }
  .name-plaque {
    width: 96.5%;
    margin: 0 auto;
    padding-inline: 24px;
  }
  .name-plaque .name {
    font-size: clamp(32px, 9.85vw, 42px);
  }
  .choice-word {
    font-size: clamp(11px, 3vw, 14px);
  }
  .hero-copy {
    width: 96.5%;
    margin: 0 auto;
    padding: 12px 29px 14px;
    font-size: clamp(13.5px, 3.78vw, 16px);
    line-height: 1.27;
  }

  .event-panel { margin-top: 0; }
}

/* iPhones/Androids com viewport útil mais baixa: compacta os elementos,
   mantendo os quatro níveis e o fim da mensagem dentro da primeira dobra. */
@media (max-width: 699px) and (max-height: 620px) {
  .hero {
    height: calc(100vh - 14px);
    height: calc(100svh - 14px);
    padding-bottom: 3px;
  }
  .hero-kicker { margin-bottom: 6px; }
  .hero h1 { font-size: clamp(46px, 13.3vw, 53px); }
  .ornament { width: 63%; margin-top: 6px; }
  .bear-picture { width: 82%; }
  .name-plaque { width: 94.5%; padding-inline: 22px; }
  .name-plaque .name { font-size: clamp(30px, 9.1vw, 36px); }
  .hero-copy {
    width: 94.5%;
    padding: 10px 24px 12px;
    font-size: clamp(12.7px, 3.58vw, 14.3px);
    line-height: 1.23;
  }
}

/* === v6.6 · composição mais cheia na primeira tela ===
   Mantém a regra: a primeira dobra termina no fim da mensagem.
   O refino agora aumenta a presença de título, ursinhos e nomes,
   reduzindo vazios e aproximando melhor os blocos da capa. */
@media (max-width: 699px) {
  .hero {
    height: auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0;
    padding-bottom: 6px;
    overflow: visible;
  }

  .hero-heading {
    width: 100%;
  }

  .hero-kicker {
    margin-bottom: 5px;
    gap: 14px;
    font-size: clamp(10px, 2.7vw, 12px);
    letter-spacing: .24em;
  }

  .hero h1 {
    font-size: clamp(56px, 15.9vw, 71px);
    line-height: .74;
  }

  .hero h1 > strong {
    margin-top: 4px;
    margin-left: 5px;
  }

  .ornament {
    width: 72%;
    margin-top: 8px;
    margin-bottom: 1px;
    gap: 13px;
  }

  .bear-picture {
    width: 96.5%;
    max-width: none;
    margin-top: -2px;
    margin-bottom: -8px;
  }

  .name-plaque {
    width: 99.2%;
    min-height: 118px;
    margin-top: -12px;
    padding: 10px 19px 12px;
  }

  .name-plaque .name {
    font-size: clamp(36px, 10.95vw, 47px);
    line-height: .92;
  }

  .choice-word {
    font-size: clamp(11px, 3vw, 14px);
  }

  .hero-copy {
    width: 98.8%;
    min-height: 153px;
    margin-top: -6px;
    padding: 16px 25px 18px;
    font-size: clamp(15px, 4.18vw, 17.4px);
    line-height: 1.24;
  }

  .event-panel {
    margin-top: 0;
  }

  /* Proteção para viewport visual realmente baixa. */
  .hero.is-fold-compact .hero-kicker {
    margin-bottom: 4px;
    font-size: clamp(9px, 2.55vw, 11px);
    letter-spacing: .22em;
  }
  .hero.is-fold-compact h1 {
    font-size: clamp(51px, 14.6vw, 62px);
  }
  .hero.is-fold-compact .ornament {
    width: 66%;
    margin-top: 6px;
  }
  .hero.is-fold-compact .bear-picture {
    width: 88.5%;
    margin-bottom: -9px;
  }
  .hero.is-fold-compact .name-plaque {
    width: 96.6%;
    min-height: 108px;
    padding-inline: 20px;
  }
  .hero.is-fold-compact .name-plaque .name {
    font-size: clamp(32px, 9.75vw, 40px);
  }
  .hero.is-fold-compact .hero-copy {
    width: 96.6%;
    min-height: 144px;
    margin-top: -6px;
    padding: 13px 22px 15px;
    font-size: clamp(13.8px, 3.8vw, 15.2px);
    line-height: 1.22;
  }
}


/* === v6.7 · presença maior SEM extrapolar a largura ===
   Corrige o overflow horizontal observado no iPhone.
   Primeira tela continua terminando no fim da mensagem. */
@media (max-width: 699px) {
  html, body, #app, .invitation-page { max-width: 100%; overflow-x: clip; }

  .invitation-card {
    width: calc(100% - 22px);
    max-width: 100%;
  }

  .hero,
  .hero-heading {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .hero-kicker {
    width: 100%;
    max-width: 100%;
    padding-inline: 8px;
    gap: 10px;
    font-size: clamp(9.5px, 2.55vw, 11px);
    letter-spacing: .20em;
    white-space: nowrap;
  }

  .hero h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(52px, 14.55vw, 61px);
    line-height: .75;
    letter-spacing: -.025em;
    white-space: nowrap;
  }

  .hero h1 > strong {
    margin-top: 4px;
    margin-left: 0;
    font-size: .98em;
  }

  .ornament {
    width: 70%;
    max-width: 70%;
    margin-top: 8px;
  }

  .bear-picture {
    width: 94%;
    max-width: 94%;
    margin-inline: auto;
    transform-origin: center center;
  }

  .bear-hero {
    max-width: 100%;
  }

  .name-plaque {
    width: 98%;
    max-width: 98%;
    min-width: 0;
    margin-inline: auto;
    padding-inline: 17px;
    gap: 7px;
  }

  .name-plaque .name {
    font-size: clamp(33px, 9.75vw, 40px);
  }

  .choice-word {
    font-size: clamp(10px, 2.7vw, 12px);
  }

  .hero-copy {
    width: 98%;
    max-width: 98%;
    min-width: 0;
    margin-inline: auto;
    padding-inline: 23px;
    font-size: clamp(14.2px, 3.9vw, 16px);
  }

  .hero.is-fold-compact h1 {
    font-size: clamp(48px, 13.6vw, 56px);
  }
  .hero.is-fold-compact .bear-picture {
    width: 88%;
    max-width: 88%;
  }
  .hero.is-fold-compact .name-plaque {
    width: 96.5%;
    max-width: 96.5%;
  }
  .hero.is-fold-compact .name-plaque .name {
    font-size: clamp(31px, 9vw, 36px);
  }
  .hero.is-fold-compact .hero-copy {
    width: 96.5%;
    max-width: 96.5%;
  }
}

/* === v6.10 · respiro para a fonte cursiva ===
   Great Vibes tem hastes e floreios altos que, com line-height muito apertado,
   podem visualmente invadir as molduras decorativas vizinhas. Este bloco final
   dá mais altura de linha a todos os textos em fonte script e um pouco mais de
   espaço nos containers que não usam moldura de imagem esticada (evitando
   assim distorcer as artes de moldura). Também remove os recuos negativos que
   duplicavam o espaçamento já resolvido pelo layout natural do hero. */
.hero h1,
.hero h1 > strong {
  line-height: .92;
}

.name-plaque {
  min-height: 128px;
}

.name-plaque .name {
  line-height: 1.05;
}

.event-fact .fact-detail {
  line-height: 1.15;
}

.gift-block {
  min-height: 86px;
}

.gift-block strong {
  line-height: 1.15;
}

.pix-block {
  min-height: 176px;
}

.pix-heading strong {
  line-height: 1.1;
}

.rsvp-button {
  min-height: 74px;
  padding-block: 12px;
}

.rsvp-button strong {
  line-height: 1.15;
}

.invitation-footer p {
  line-height: 1.2;
}

@media (max-width: 699px) {
  .bear-picture { margin-top: 0; margin-bottom: 0; }
  .name-plaque { margin-top: 8px; min-height: 0; }
  .hero-copy { margin-top: 8px; }
  .name-plaque .name { font-size: clamp(32px, 9.6vw, 42px); }
}