:root{
  --ink: #9c6a0c;
  --ink-soft: rgba(122, 90, 26, 0.86);
  --gold: #bfa14b;
  --gold-light: #ffe066;
  --cream: #fff8f0;
  --line: rgba(191, 161, 75, 0.4);
  --overlay: rgba(253, 230, 255, 0.18);
  --shadow: 0 24px 60px rgba(40, 22, 8, 0.3);
  --radius: 22px;
  --space-1: clamp(0.5rem, 1.3vw, 0.75rem);
  --space-2: clamp(0.75rem, 2vw, 1rem);
  --space-3: clamp(1rem, 2.6vw, 1.45rem);
  --space-4: clamp(1.25rem, 3vw, 1.9rem);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    linear-gradient(var(--overlay), var(--overlay)),
    url("../img/fondo4.jpg") center/cover no-repeat fixed;
  overflow-x:hidden;
}

.screen{
  min-height:100dvh;
  width:100%;
  display:grid;
  place-items:center;
  position:relative;
}
.is-hidden{display:none !important}

/* INTRO */
.screen--intro{
  background: radial-gradient(ellipse at 60% 40%, #2d1a0b 0%, #1a0d05 70%, #0a0502 100%);
  overflow:hidden;
  position:relative;
}
.intro-bg{
  position:absolute;
  inset:-20%;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 214, 157, .05) 0 1px,
      transparent 1px 24px
    ),
    linear-gradient(
      110deg,
      rgba(255, 214, 157, .14) 0%,
      rgba(255, 214, 157, 0) 42%,
      rgba(255, 214, 157, .14) 100%
    ),
    radial-gradient(circle at 20% 30%, rgba(255,200,120,.16), transparent 55%),
    radial-gradient(circle at 70% 55%, rgba(255,180,90,.14), transparent 60%),
    radial-gradient(circle at 50% 80%, rgba(255,220,160,.12), transparent 65%);
  filter: blur(1px);
  opacity:.74;
  mix-blend-mode: screen;
  animation: cardGridShift 5s linear infinite;
}
.screen--intro::after{
  content:"";
  position:absolute;
  inset:-8%;
  pointer-events:none;
  background: radial-gradient(circle at 30% 30%, rgba(191, 161, 75, .16), transparent 44%);
  opacity:.4;
  animation: cardGlowPulse 4.2s ease-in-out infinite;
}
.intro-center{
  position:relative;
  text-align:center;
  padding:var(--space-4);
  z-index:1;
}
.intro-hint{
  margin:1.7rem 0 0;
  font-size:clamp(0.94rem, 2.6vw, 1.12rem);
  font-weight:500;
  letter-spacing:.04em;
  color: rgba(246, 205, 136, .96);
  text-shadow: 0 12px 28px rgba(0,0,0,.42);
}

.intro-tip{
  margin:.62rem 0 0;
  font-size: clamp(0.9rem, 2.4vw, 1.04rem);
  font-weight:500;
  letter-spacing:.06em;
  color: rgba(238, 190, 115, .88);
  text-shadow: 0 10px 24px rgba(0,0,0,.36);
  opacity:.96;
}
.intro-tip--footer{
  position:absolute;
  left:50%;
  bottom: clamp(1rem, 2.8vh, 1.7rem);
  transform: translateX(-50%);
  margin:0;
  width:min(92%, 560px);
  text-align:center;
  z-index:1;
}

/* ENVELOPE */
.envelope{
  -webkit-tap-highlight-color: transparent;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  position:relative;
  width:min(260px, 72vw);
  height:170px;
  transform: translateZ(0);
}
.envelope__shadow{
  position:absolute; left:50%; top:52%;
  width:90%; height:20px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.35), transparent 70%);
  filter: blur(12px);
}
.envelope__back{
  position:absolute; inset:18px 12px 10px;
  border-radius:16px;
  background: linear-gradient(135deg, #caa06a, #9b6a33);
  box-shadow: 0 30px 92px rgba(0,0,0,.58);
}
.envelope__front{
  position:absolute; inset:28px 18px 16px;
  border-radius:14px;
  background: linear-gradient(135deg, #d9b07b, #b9803f);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 55%, 0 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.envelope__flap{
  position:absolute; left:18px; right:18px; top:28px; height:55%;
  border-radius:14px;
  background: linear-gradient(135deg, #e7c79d, #c18a47);
  clip-path: polygon(0 0, 100% 0, 50% 70%);
  transform-origin: 50% 0%;
  transform: rotateX(0deg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  animation: flapIdle 2.8s ease-in-out infinite;
}
.envelope__paper{
  position:absolute; left:30px; right:30px; bottom:30px; top:40px;
  background: linear-gradient(#fff, #fbf5ef);
  border-radius:12px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  transform: translateY(22px);
  display:grid;
  place-items:center;
  animation: paperIdle 2.8s ease-in-out infinite;
}
.paper__text{
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.8rem, 6vw, 2.2rem);
  color:#9b6a33;
  transform: translateY(20px);
}
.envelope.is-open .envelope__flap{ animation: flap .55s ease forwards; }
.envelope.is-open .envelope__paper{ animation: paper .65s .05s ease forwards; }
@keyframes flap{ to{ transform: rotateX(155deg); } }
@keyframes paper{ to{ transform: translateY(-26px); } }

@keyframes flapIdle{
  0%, 100%{ transform: rotateX(0deg); }
  50%{ transform: rotateX(9deg); }
}

@keyframes paperIdle{
  0%, 100%{ transform: translateY(22px); }
  50%{ transform: translateY(18px); }
}

/* LOADING */
.screen--loading{
  background: radial-gradient(ellipse at 60% 40%, #2d1a0b 0%, #1a0d05 70%, #0a0502 100%);
  color: #ebbb7d;
}
.loading-center{display:grid; gap:18px; place-items:center}
.ring{
  width:60px;
  height:60px;
  border-radius:50%;
  border:4px solid rgba(255, 255, 255, 0.12);
  border-top:4px solid #ffd69d;
  border-right:4px solid #b47a2b;
  border-bottom:4px solid #ffd69d;
  border-left:4px solid #b47a2b;
  box-shadow: 0 0 24px #fff8ee44, 0 0 8px #b47a2b88;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(80, 60, 30, 0.18) 100%);
  animation: spin 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.loading-text{
  font-size:2.4rem;
  font-family: "Great Vibes", cursive;
  font-weight:400;
  letter-spacing:.03em;
  text-shadow: 0 0 10px rgba(180, 122, 43, .35);
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bgGridDrift{
  from{transform: translateX(0)}
  to{transform: translateX(-30px)}
}
@keyframes bgPulse{
  0%, 100%{transform: scale(1); opacity:.54}
  50%{transform: scale(1.04); opacity:.72}
}
@keyframes bgScan{
  0%{background-position: 0 0, 0 0, 0 0}
  100%{background-position: 44px 0, 0 0, 0 0}
}
@keyframes sceneSheen{
  0%, 100%{
    background-position: 0% 0%, 0% 0%, 50% 50%;
    opacity:.34;
  }
  50%{
    background-position: 100% 0%, 100% 0%, 50% 50%;
    opacity:.5;
  }
}
@keyframes cardGridShift{
  from{background-position: 0 0, 0% 0%}
  to{background-position: 24px 0, 100% 0%}
}
@keyframes cardGlowPulse{
  0%,100%{opacity:.38; transform: scale(1)}
  50%{opacity:.58; transform: scale(1.02)}
}

/* INVITE SCENE */
.screen--invite{
  display:flex;
  align-items:stretch;
  justify-content:center;
  --invite-pad-y: clamp(0.35rem, 1.2vw, 0.8rem);
  padding: var(--invite-pad-y) clamp(0.6rem, 2vw, 1rem);
}
.invite-wrap{
  width:min(640px, 100%);
  display:grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items:center;
  gap: clamp(0.32rem, 0.8vh, 0.55rem);
  height: calc(100dvh - (var(--invite-pad-y) * 2));
  position:relative;
  z-index:1;
}
.invite-scene{
  width:100%;
  height:100%;
  min-height:0;
  position:relative;
  isolation:isolate;
}

/* stacking map: bg(0) overlay(1) confetti(2) bear(3) content(4) modal(100+) */
.scene-overlay{
  position:absolute;
  inset:0;
  border-radius:calc(var(--radius) + 8px);
  background:
    linear-gradient(112deg, rgba(255, 227, 173, .08) 0%, rgba(255, 227, 173, 0) 40%, rgba(255, 227, 173, .08) 100%),
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.22)),
    radial-gradient(circle at 50% 50%, rgba(255, 218, 143, .12), rgba(255, 218, 143, 0) 58%);
  background-size: 220% 100%, 100% 100%, 100% 100%;
  z-index:1;
  pointer-events:none;
  animation: sceneSheen 5.8s ease-in-out infinite;
}
.scene-confetti{
  position:absolute;
  bottom: clamp(-1.2rem, -2.2vw, -0.3rem);
  width: clamp(280px, 56vw, 420px);
  aspect-ratio: 1 / 1;
  background: url("../img/confetti.png") center/contain no-repeat;
  opacity:.48;
  z-index:2;
  pointer-events:none;
}
.scene-confetti--left{left: clamp(-2.1rem, -3.6vw, -0.7rem)}
.scene-confetti--right{right: clamp(-2.1rem, -3.6vw, -0.7rem); transform: scaleX(-1)}

.scene-card{
  position:relative;
  z-index:4;
  width:100%;
  height:100%;
  min-height:0;
  border-radius:var(--radius);
  padding: clamp(0.62rem, 1.8vw, 1.05rem) clamp(0.72rem, 2vw, 1.15rem) clamp(0.58rem, 1.6vw, 0.92rem);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,248,240,.5), rgba(255,248,240,.42));
  box-shadow: var(--shadow);
  overflow:visible;
  display:flex;
  flex-direction:column;
  isolation:isolate;
}
.scene-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 214, 157, .05) 0 1px,
      transparent 1px 24px
    ),
    linear-gradient(
      110deg,
      rgba(255, 214, 157, .14) 0%,
      rgba(255, 214, 157, 0) 42%,
      rgba(255, 214, 157, .14) 100%
    );
  mix-blend-mode: screen;
  opacity:.55;
  animation: cardGridShift 5s linear infinite;
}
.scene-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background: radial-gradient(circle at 30% 30%, rgba(191, 161, 75, .16), transparent 44%);
  opacity:.46;
  animation: cardGlowPulse 4.2s ease-in-out infinite;
}

.scene-bear{
  position:absolute;
  right: clamp(-1.4rem, -4vw, -0.65rem);
  bottom: clamp(-1rem, -2.5vw, -0.4rem);
  width: clamp(250px, 46vw, 360px);
  z-index:3;
  opacity:.46;
  pointer-events:none;
}
.scene-bear img{
  width:100%;
  height:auto;
  display:block;
  transform: rotate(-8deg);
  transform-origin: 28% 100%;
  animation: bearSway 4.8s ease-in-out infinite;
}

.hero-wrap{
  position:relative;
  z-index:4;
  display:grid;
  place-items:center;
  margin-top: clamp(-0.45rem, -1.2vw, 0.15rem);
  margin-bottom: clamp(-1rem, -2.2vw, -0.35rem);
}
.hero-image{
  width:min(100%, 480px);
  height:auto;
  display:block;
  filter: drop-shadow(0 14px 26px rgba(40,20,10,.2));
  transform-origin: 50% 48%;
  animation: heroFloat 7.5s ease-in-out infinite;
}

.scene-copy{
  position:relative;
  z-index:4;
  text-align:center;
  padding-inline: clamp(0.15rem, 1vw, 0.5rem);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap: clamp(0.25rem, 1.3vh, 0.75rem);
  flex:1 1 auto;
}

.honor-block{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: var(--space-2);
  margin: 0 0 clamp(0.35rem, 1.2vw, 0.5rem);
}
.honor-line{
  height:1.5px;
  flex: 1 1 85px;
  max-width:160px;
  background: linear-gradient(90deg, transparent, #9b7201, transparent);
}
.honor-label{
  font-size: clamp(0.92rem, 1.7vw, 1.12rem);
  letter-spacing: .2em;
  font-weight: 600;
}

.honor-names-svg{
  position:relative;
  width:min(100%, 360px);
  margin: 0 auto clamp(0.75rem, 1.9vw, 1.2rem);
}
.honor-names-svg svg{
  display:block;
  width:100%;
  height:auto;
}
.honor-main{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(0.2rem, 1vw, 0.45rem);
  margin:0;
}
.honor-name{
  font-family: "Libre Baskerville", serif;
  font-size: clamp(1.38rem, 3vw, 1.96rem);
  font-weight:700;
  color: #9c6a0c;
}
.honor-amp{
  font-family: "Rochester", cursive;
  font-size: clamp(1.54rem, 3.8vw, 2.28rem);
  color: #e2c97a;
}

.reveal-text{
  margin: clamp(0.1rem, 0.8vh, 0.45rem) 0 0;
  line-height:1.3;
  font-size: clamp(1.08rem, 2.3vw, 1.28rem);
  color: var(--ink-soft);
}
.reveal-main{
  font-weight:700;
  display:block;
  letter-spacing:.075em;
  margin:.15em 0;
}
.reveal-sub{
  display:block;
}
.reveal-sub.type{
  display:block;
  width:100%;
}
.event-info{
  margin: clamp(0.6rem, 1.9vw, 1rem) 0 0;
  font-size: clamp(1.28rem, 2.85vw, 1.6rem);
  line-height:1.28;
  color: var(--ink);
}
.event-place{
  font-weight:700;
  font-size: 1.04em;
  letter-spacing:.02em;
}

.assist-question{
  margin: clamp(0.1rem, 0.8vh, 0.4rem) 0 0;
  font-size: clamp(1.12rem, 2.6vw, 1.36rem);
  font-weight:700;
  color:#9b6c12;
}

.scene-footer{
  margin-top:auto;
  display:grid;
  gap: clamp(0.16rem, .8vh, 0.46rem);
  padding-bottom: clamp(1rem, 2.9vh, 1.7rem);
}

.card__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: var(--space-2);
  margin-top: clamp(0.25rem, 1vw, 0.55rem);
  padding-bottom: clamp(0.08rem, 0.5vw, 0.25rem);
  transition: opacity .35s ease, transform .35s ease;
}

#invite.is-typing-phase .card__actions{
  opacity:0;
  transform: translateY(8px);
  pointer-events:none;
}
.btn{
  border:0;
  border-radius:999px;
  padding: clamp(0.82rem, 2.4vw, 1.05rem) clamp(1.3rem, 3.6vw, 1.66rem);
  font-size: clamp(1.08rem, 2.6vw, 1.26rem);
  font-weight:600;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  cursor:pointer;
  transition: transform .12s ease, filter .12s ease;
}
.btn:focus-visible{
  outline: 3px solid rgba(255, 224, 102, 0.5);
  outline-offset: 2px;
}
.btn:hover{filter:brightness(1.03)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--ghost{
  background: rgba(255, 233, 179, 0.62);
  color:#8e6206;
  box-shadow: inset 0 0 0 1px rgba(191,161,75,.45);
}
.btn--solid{
  background: linear-gradient(90deg, #ffe9b3 0%, #f7d07e 100%);
  color:#8e6206;
  box-shadow: 0 8px 20px rgba(191,161,75,.25);
}
.btn--full{width:100%; justify-content:center}

.tiny{
  font-size: .8rem;
  color: rgba(95, 62, 21, 0.74);
  margin-top: 0;
  line-height:1.1;
}

/* TYPEWRITER */
.type{
  display:inline-block;
  min-height:1em;
}
.type.is-typing{
  border-right: 2px solid rgba(191,161,75,.7);
  padding-right:2px;
  animation: caret .9s steps(1) infinite;
}
@keyframes caret{50%{border-right-color:transparent}}

@keyframes bearSway{
  0%, 100%{
    transform: rotate(-8deg) translateY(0);
  }
  50%{
    transform: rotate(-6deg) translateY(-6px);
  }
}

@keyframes heroFloat{
  0%, 100%{
    transform: translateY(0) scale(1);
  }
  50%{
    transform: translateY(-8px) scale(1.018);
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-image{
    animation: none !important;
  }
  .scene-bear img{
    animation: none !important;
  }
}

/* MODAL */
.modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  z-index:120;
  padding: 1rem;
}
.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(10, 6, 3, .62);
  backdrop-filter: blur(3px);
}
.modal__card{
  position:relative;
  width:min(440px, 100%);
  max-height: min(92dvh, 760px);
  overflow:auto;
  border-radius: 18px;
  padding: 1rem;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(214,178,106,.28);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
}
.modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
.modal__header h2{
  margin:0;
  font-size:1.12rem;
  letter-spacing:.02em;
}
.iconbtn{
  width:34px;
  height:34px;
  border:0;
  border-radius:10px;
  background: rgba(214,178,106,.16);
  color:var(--ink);
  cursor:pointer;
}
.iconbtn:focus-visible{
  outline: 3px solid rgba(255, 224, 102, 0.5);
  outline-offset: 2px;
}
.form{
  display:grid;
  gap:.75rem;
  margin-top:.75rem;
}
label span,
.group-label{
  display:block;
  margin-bottom:.38rem;
  font-size:.86rem;
  color: rgba(106,76,59,.9);
  font-weight:600;
}
input,textarea,select{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(106,76,59,.18);
  padding:.72rem .76rem;
  font-family:inherit;
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color: rgba(214,178,106,.8);
  box-shadow: 0 0 0 3px rgba(214,178,106,.18);
}
.members-list{
  border:1px solid rgba(106,76,59,.18);
  border-radius:12px;
  background: rgba(255,255,255,.86);
  padding:.62rem .72rem;
  display:grid;
  gap:.5rem;
}
.members-list label{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:1rem;
}
.members-list input{
  width:16px;
  height:16px;
  margin:0;
}
.form__status{
  margin:0;
  font-size:.9rem;
  color: rgba(106,76,59,.82);
}

/* BREAKPOINTS */
@media (max-width: 900px){
  .screen--invite{
    align-items: stretch;
    justify-content: stretch;
    --invite-pad-y: .62rem;
    padding: .62rem;
  }
  .invite-wrap{
    width: 100%;
    height: calc(100dvh - 1.24rem);
    display:grid;
    grid-template-rows: 1fr auto;
    gap: .62rem;
  }
  .invite-scene{
    width:100%;
    min-height:0;
  }
  .scene-card{
    height:100%;
    min-height:0;
    padding: .42rem .5rem .4rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,248,240,.44), rgba(255,248,240,.34));
    border: 1px solid rgba(191, 161, 75, 0.22);
    box-shadow: 0 12px 28px rgba(40,22,8,.14);
  }
  .hero-wrap{
    margin-top: .16rem;
    margin-bottom: -.72rem;
  }
  .hero-image{
    width:min(100%, 700px);
    max-height: 43dvh;
    object-fit: contain;
  }
  .scene-copy{
    justify-content:flex-start;
    gap: clamp(.28rem, 1.05vh, .68rem);
    padding-inline: .1rem;
  }
  .honor-label{
    font-size: clamp(.9rem, 2.2vw, 1.04rem);
    letter-spacing:.14em;
  }
  .honor-block{
    margin-bottom: .26rem;
  }
  .honor-names-svg{
    width:min(100%, 410px);
    margin-bottom: .5rem;
  }
  .honor-name{
    font-size: clamp(1.42rem, 4.9vw, 1.9rem);
  }
  .honor-amp{
    font-size: clamp(1.62rem, 5.4vw, 2.14rem);
  }
  .reveal-text{
    margin-top:.22rem;
    font-size: clamp(.94rem, 2.35vw, 1.08rem);
    line-height:1.2;
  }
  .event-info{
    margin-top:.38rem;
    font-size: clamp(1.12rem, 2.7vw, 1.34rem);
    line-height:1.16;
  }
  .assist-question{
    margin-top:.26rem;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
  }
  .scene-footer{
    margin-top:auto;
    gap: .22rem;
    padding-bottom: clamp(.85rem, 2.2vh, 1.3rem);
  }
  .card__actions{
    width:100%;
    margin-top:.18rem;
    gap:.42rem;
    padding-bottom:0;
    flex-wrap: nowrap;
  }
  .card__actions .btn{
    flex: 1 1 0;
    min-width:0;
    justify-content:center;
    padding: .58rem .5rem;
    font-size: clamp(.94rem, 2.2vw, 1.06rem);
    white-space: nowrap;
  }
  .scene-bear{
    width: clamp(172px, 34vw, 236px);
    right: clamp(-1.35rem, -3.8vw, -.55rem);
    bottom: clamp(-1.8rem, -3.6vw, -.85rem);
    opacity:.34;
  }
  .scene-confetti{
    width: clamp(180px, 38vw, 280px);
    bottom: clamp(-1.45rem, -3.1vw, -.45rem);
    opacity:.28;
  }
  .scene-confetti--left{left: clamp(-2.05rem, -4.4vw, -.7rem)}
  .scene-confetti--right{right: clamp(-2.05rem, -4.4vw, -.7rem)}
  .tiny{
    font-size:.68rem;
    line-height:1;
    opacity:.86;
    text-align:center;
    margin:0 0 .44rem;
  }
}

@media (max-width: 900px) and (min-height: 861px){
  .scene-card{
    background: linear-gradient(180deg, rgba(255,248,240,.33), rgba(255,248,240,.22));
    border: 1px solid rgba(191, 161, 75, 0.16);
    box-shadow: 0 10px 24px rgba(40,22,8,.1);
    padding: .34rem .38rem .42rem;
  }
  .hero-wrap{
    margin-top: .14rem;
    margin-bottom: -.5rem;
  }
  .hero-image{
    max-height: 41dvh;
  }
  .scene-copy{
    gap: clamp(.26rem, 1.05vh, .62rem);
    padding-inline: .04rem;
  }
  .honor-line{
    max-width: 180px;
  }
  .honor-label{
    font-size: clamp(.96rem, 2.35vw, 1.1rem);
    letter-spacing: .16em;
  }
  .honor-name{
    font-size: clamp(1.48rem, 4.6vw, 1.98rem);
  }
  .honor-amp{
    font-size: clamp(1.72rem, 5.3vw, 2.24rem);
  }
  .reveal-text{
    font-size: clamp(1rem, 2.35vw, 1.18rem);
    line-height: 1.22;
  }
  .event-info{
    font-size: clamp(1.08rem, 2.45vw, 1.3rem);
    line-height: 1.18;
  }
  .assist-question{
    font-size: clamp(1.08rem, 2.5vw, 1.28rem);
  }
  .scene-footer{
    margin-top: auto;
    display: grid;
    gap: .22rem;
    padding-bottom: clamp(.9rem, 2.4vh, 1.4rem);
  }
  .scene-bear{
    width: clamp(190px, 37vw, 260px);
    right: -.9rem;
    bottom: -1.05rem;
    opacity: .4;
  }
  .scene-confetti{
    width: clamp(220px, 44vw, 320px);
    opacity: .34;
  }
}

@media (max-width: 900px) and (max-height: 860px){
  .screen--invite{--invite-pad-y:.52rem; padding:.52rem}
  .invite-wrap{height: calc(100dvh - 1.04rem)}
  .scene-card{padding:.4rem .46rem .44rem}
  .hero-wrap{margin-top:.06rem; margin-bottom:-.64rem}
  .hero-image{max-height: 37dvh}
  .scene-copy{gap: clamp(.24rem, .95vh, .58rem)}
  .honor-label{font-size: clamp(.92rem, 2.45vw, 1.08rem)}
  .honor-name{font-size: clamp(1.34rem, 4.75vw, 1.82rem)}
  .honor-amp{font-size: clamp(1.52rem, 5.2vw, 2rem)}
  .reveal-text{font-size: clamp(.94rem, 2.4vw, 1.08rem); line-height:1.2}
  .event-info{font-size: clamp(.98rem, 2.45vw, 1.16rem); line-height:1.15}
  .assist-question{font-size: clamp(1rem, 2.5vw, 1.18rem)}
  .scene-footer{padding-bottom: clamp(.8rem, 2.1vh, 1.2rem)}
  .card__actions .btn{padding:.52rem .44rem; font-size: clamp(.88rem, 1.95vw, .98rem)}
  .scene-bear{
    width: clamp(146px, 27vw, 196px);
    right: -.9rem;
    bottom: -1.15rem;
  }
}

@media (max-width: 900px) and (max-height: 820px){
  .screen--invite{--invite-pad-y:.48rem; padding:.48rem}
  .invite-wrap{height: calc(100dvh - .96rem)}
  .hero-image{max-height: 39dvh}
  .honor-name{font-size: clamp(1.38rem, 4.9vw, 1.88rem)}
  .honor-amp{font-size: clamp(1.58rem, 5.5vw, 2.05rem)}
  .reveal-text{font-size: clamp(.96rem, 2.5vw, 1.12rem)}
  .event-info{font-size: clamp(1rem, 2.5vw, 1.2rem)}
  .assist-question{font-size: clamp(1.02rem, 2.6vw, 1.22rem)}
  .card__actions .btn{padding:.54rem .46rem; font-size: clamp(.9rem, 2vw, 1rem)}
  .scene-bear{
    width: clamp(152px, 29vw, 206px);
    bottom: -1.25rem;
    right: -.95rem;
  }
}

@media (max-width: 900px) and (max-height: 700px){
  .screen--invite{--invite-pad-y:.36rem; padding:.36rem}
  .invite-wrap{height: calc(100dvh - .72rem)}
  .hero-wrap{margin-top:-.54rem; margin-bottom:-.54rem}
  .hero-image{
    width:min(100%, 680px);
    max-height: 33dvh;
  }
  .scene-copy{gap: .18rem}
  .honor-label{font-size:.88rem}
  .honor-name{font-size: clamp(1.18rem, 4.5vw, 1.62rem)}
  .honor-amp{font-size: clamp(1.36rem, 5.1vw, 1.98rem)}
  .reveal-text{font-size: clamp(.84rem, 2.2vw, .98rem); line-height:1.18}
  .event-info{font-size: clamp(.9rem, 2.3vw, 1.08rem); line-height:1.14; margin-top:.16rem}
  .assist-question{font-size: clamp(.92rem, 2.35vw, 1.06rem); margin-top:.1rem}
  .scene-footer{
    gap:.12rem;
    padding-bottom:.72rem;
  }
  .card__actions{margin-top:.08rem; gap:.3rem}
  .card__actions .btn{padding:.48rem .42rem; font-size: clamp(.84rem, 1.85vw, .94rem)}
  .scene-bear{
    width: clamp(126px, 25vw, 172px);
    bottom: -1.05rem;
    right: -.85rem;
  }
  .scene-confetti{
    width: clamp(145px, 34vw, 210px);
    bottom: -1.1rem;
    opacity:.24;
  }
  .tiny{
    font-size:.62rem;
    margin:0 0 .34rem;
  }
}

@media (max-width: 379px) and (max-height: 700px){
  .hero-wrap{
    margin-top: .08rem;
  }
  .hero-image{
    width:min(100%, 760px);
    max-height: 40dvh;
  }
  .honor-label{
    font-size: .9rem;
  }
  .honor-name{
    font-size: clamp(1.2rem, 4.8vw, 1.62rem);
  }
  .honor-amp{
    font-size: clamp(1.44rem, 5.8vw, 1.96rem);
  }
  .reveal-text{
    font-size: clamp(.9rem, 2.8vw, 1.04rem);
    line-height: 1.16;
  }
  .event-info{
    font-size: clamp(1.02rem, 3.1vw, 1.18rem);
  }
  .assist-question{
    font-size: clamp(.96rem, 2.95vw, 1.14rem);
  }
  .scene-bear{
    width: clamp(168px, 40vw, 228px);
    right: -1.06rem;
    bottom: -1.1rem;
    opacity: .35;
  }
}

@media (min-width: 380px) and (max-width: 900px) and (max-height: 700px){
  .hero-wrap{
    margin-top: .34rem;
  }
  .hero-image{
    width:min(100%, 960px);
    max-height: 52dvh;
  }
  .honor-label{
    font-size: .96rem;
  }
  .honor-name{
    font-size: clamp(1.46rem, 5.8vw, 2rem);
  }
  .honor-amp{
    font-size: clamp(1.64rem, 6.3vw, 2.16rem);
  }
  .reveal-text{
    font-size: clamp(.94rem, 3vw, 1.08rem);
    line-height: 1.16;
  }
  .event-info{
    font-size: clamp(1.04rem, 3.15vw, 1.24rem);
  }
  .assist-question{
    font-size: clamp(1rem, 3.05vw, 1.2rem);
  }
  .scene-bear{
    width: clamp(188px, 40vw, 258px);
    right: -1.18rem;
    bottom: -1.18rem;
    opacity: .36;
  }
}

@media (min-width: 901px){
  .screen--invite{
    --invite-pad-y: .62rem;
    padding: .62rem;
    align-items: stretch;
  }
  .invite-wrap{
    width: min(920px, 95vw);
    height: calc(100dvh - 1.24rem);
    grid-template-rows: 1fr auto;
    gap: .52rem;
  }
  .invite-scene{
    min-height: 0;
  }
  .scene-card{
    height: 100%;
    min-height: 0;
    padding: 1.25rem 1.6rem 1.2rem;
  }
  .hero-image{
    width:min(100%, 560px);
    max-height: 42dvh;
    object-fit: contain;
    filter: drop-shadow(0 12px 22px rgba(40,20,10,.16));
  }
  .scene-copy{
    gap: clamp(0.42rem, 1.2vh, 1.05rem);
  }
  .honor-name{
    font-size: clamp(1.52rem, 2.3vw, 2.14rem);
  }
  .honor-amp{
    font-size: clamp(1.68rem, 2.8vw, 2.32rem);
  }
  .reveal-text{
    font-size: clamp(1rem, 1.45vw, 1.2rem);
  }
  .event-info{
    font-size: clamp(1.2rem, 1.85vw, 1.5rem);
  }
  .assist-question{
    font-size: clamp(1.06rem, 1.6vw, 1.3rem);
  }
  .scene-bear{
    width: clamp(180px, 18vw, 255px);
    right: -.85rem;
    bottom: -1.05rem;
    opacity:.35;
  }
  .scene-confetti{
    width: clamp(320px, 34vw, 460px);
  }
}

@media (min-width: 901px) and (max-height: 850px){
  .screen--invite{--invite-pad-y:.48rem; padding:.48rem}
  .invite-wrap{height: calc(100dvh - .96rem)}
  .scene-card{padding: 1rem 1.2rem .98rem}
  .hero-image{max-height: 40dvh}
  .scene-bear{
    width: clamp(145px, 14vw, 205px);
    right: -.75rem;
    bottom: -1.2rem;
    opacity:.32;
  }
  .scene-confetti{
    width: clamp(185px, 20vw, 270px);
    opacity:.24;
  }
}