@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root{
  --espresso:#130a06;--coffee:#1b100a;--brown:#3a1d12;--bark:#5a3421;
  --cream:#f5efe9;--muted:#c9b8ab;--faint:rgba(245,239,233,.56);
  --caramel:#d99d70;--caramel-hi:#e6b085;--gold:#e0b189;
  --hairline:rgba(224,177,137,.18);--focus:#f5efe9;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--espresso)}
html,body{margin:0;min-height:100%}
body{
  min-height:100svh;color:var(--cream);font-family:Karla,Arial,sans-serif;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(90% 520px at 85% 0%,rgba(121,64,35,.55),transparent 70%),
    radial-gradient(60% 420px at 0% 100%,rgba(224,177,137,.08),transparent 70%),
    linear-gradient(180deg,var(--brown) 0,var(--coffee) 420px,var(--espresso) 100%);
}
img{display:block;max-width:100%}

/* Splash */
.portal-splash{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:inherit;background:linear-gradient(170deg,var(--brown) 0%,var(--coffee) 42%,var(--espresso) 100%);transition:opacity 420ms ease,visibility 420ms ease}
.portal-splash img{width:168px;height:auto;animation:splash-in 700ms cubic-bezier(.16,1,.3,1) both}
.portal-splash.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.splash-spinner{width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(224,177,137,.22);border-top-color:var(--caramel);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes splash-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Layout */
.portal{
  width:min(100% - 32px,440px);margin:0 auto;min-height:100svh;display:flex;flex-direction:column;gap:22px;
  padding:max(22px,calc(env(safe-area-inset-top) + 14px)) 0 max(22px,calc(env(safe-area-inset-bottom) + 14px));
}
.portal-top{display:flex;justify-content:center;padding:6px 0 2px}
.portal-wordmark{width:112px;height:auto;opacity:.95}

/* Event hero */
.event-hero{position:relative;border-radius:22px;overflow:hidden;background:linear-gradient(150deg,var(--bark),var(--brown) 55%,var(--coffee));box-shadow:0 24px 50px -24px rgba(0,0,0,.7),inset 0 0 0 1px var(--hairline)}
.event-hero-media{position:relative;aspect-ratio:5/4;display:grid;place-items:center;overflow:hidden}
.event-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,10,6,0) 35%,rgba(19,10,6,.55) 70%,rgba(19,10,6,.92) 100%)}
.event-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.event-monogram{position:relative;z-index:1;display:grid;place-items:center;width:112px;height:112px;margin-bottom:56px;border-radius:50%;font:600 40px/1 Poppins,Arial,sans-serif;letter-spacing:-.02em;color:var(--espresso);background:radial-gradient(circle at 30% 25%,var(--caramel-hi),var(--caramel) 60%,#b97c52);box-shadow:0 0 0 8px rgba(224,177,137,.1),0 0 0 18px rgba(224,177,137,.05)}
.event-hero.has-cover .event-monogram{display:none}
.event-hero-copy{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:20px 22px 22px}
.event-eyebrow{margin:0 0 8px;color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.event-hero h1{margin:0;font:600 clamp(26px,7.4vw,32px)/1.15 Poppins,Arial,sans-serif;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:anywhere}
.event-date{display:flex;align-items:center;gap:8px;margin:10px 0 0;color:var(--muted);font-size:14px}
.event-date::before{content:"";width:18px;height:1px;background:var(--gold);opacity:.7}

/* Choices */
.portal-choices{display:flex;flex-direction:column;gap:12px}
.choices-head{padding:4px 2px 4px}
.choices-head h2{margin:0;font:600 19px/1.3 Poppins,Arial,sans-serif;letter-spacing:-.015em}
.choices-head p{margin:6px 0 0;color:var(--muted);font-size:14.5px;line-height:1.5}
.choice{
  display:flex;align-items:center;gap:14px;min-height:88px;padding:16px 16px 16px 14px;border-radius:18px;
  background:linear-gradient(145deg,rgba(74,41,25,.72),rgba(30,17,11,.82));color:var(--cream);text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(224,177,137,.24),0 18px 32px -24px rgba(0,0,0,.9);
  transition:transform 180ms cubic-bezier(.16,1,.3,1),box-shadow 180ms ease,background-color 180ms ease;
  -webkit-tap-highlight-color:transparent;
}
.choice:active{transform:scale(.985);box-shadow:inset 0 0 0 1px rgba(224,177,137,.5)}
.choice:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.choice-icon{display:grid;place-items:center;flex:0 0 50px;width:50px;height:50px;border-radius:14px;background:var(--caramel);color:var(--espresso)}
.choice-icon svg,.choice-arrow{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.choice-icon svg{width:24px;height:24px}
.choice-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.choice-copy strong{font:600 15.5px/1.3 Poppins,Arial,sans-serif;letter-spacing:-.01em}
.choice-desc{font-size:13.5px;line-height:1.4;color:var(--muted)}
.choice-arrow{flex:none;width:20px;height:20px;color:var(--gold)}
.choice-badge{display:none;align-self:flex-start;margin-bottom:3px;padding:3px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(224,177,137,.45);color:var(--gold);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.choice[aria-disabled="true"]{cursor:default;background:rgba(30,17,11,.55);box-shadow:inset 0 0 0 1px rgba(224,177,137,.14)}
.choice[aria-disabled="true"] .choice-icon{background:rgba(224,177,137,.14);color:var(--gold)}
.choice[aria-disabled="true"] strong,.choice[aria-disabled="true"] .choice-desc{opacity:.7}
.choice[aria-disabled="true"] .choice-arrow{display:none}
.choice[aria-disabled="true"] .choice-badge{display:inline-block}
.choice[aria-disabled="true"]:active{transform:none}
.portal-note{margin:2px 0 0;color:var(--faint);font-size:13px;line-height:1.5;text-align:center}
.portal-note:empty{display:none}

/* Footer */
.portal-footer{margin-top:auto;padding-top:10px;display:flex;flex-direction:column;align-items:center;gap:12px}
.footer-label{display:flex;align-items:center;gap:12px;width:100%;margin:0;color:var(--faint);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.footer-label::before,.footer-label::after{content:"";flex:1;height:1px;background:var(--hairline)}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.footer-links a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:72px;padding:12px 6px;border-radius:16px;
  color:var(--cream);text-decoration:none;font-size:12.5px;font-weight:600;
  background:rgba(245,239,233,.04);box-shadow:inset 0 0 0 1px var(--hairline);
  transition:background-color 160ms ease,box-shadow 160ms ease;-webkit-tap-highlight-color:transparent;
}
.footer-links a:active{background:rgba(224,177,137,.12)}
.footer-links a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.footer-links svg{width:22px;height:22px;color:var(--gold)}
.footer-links .icon-outline{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.footer-links .icon-solid,.footer-links .icon-dot{fill:currentColor;stroke:none}
.footer-credit{margin:4px 0 0;color:rgba(245,239,233,.38);font-size:11.5px}

/* Hover only where a real pointer exists, so taps on phones don't leave a stuck highlight. */
@media (hover:hover){
  .choice:not([aria-disabled="true"]):hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(224,177,137,.55),0 22px 36px -24px rgba(0,0,0,.9)}
  .footer-links a:hover{background:rgba(224,177,137,.1);box-shadow:inset 0 0 0 1px rgba(224,177,137,.35)}
}
@media (min-width:600px){
  .portal{gap:26px;padding-top:40px;padding-bottom:36px}
  .event-hero-media{aspect-ratio:16/10}
}
@media (max-width:350px){
  .choice{gap:11px;padding:14px 12px}
  .choice-icon{flex-basis:44px;width:44px;height:44px}
  .event-monogram{width:84px;height:84px;margin-bottom:64px;font-size:30px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}