:root{
  --bg:#F2F5F4;
  --surface:#FFFFFF;
  --surface-2:#EAF0EE;
  --text:#1C2B30;
  --text-soft:#5E6E70;
  --border:#DEE5E3;
  --teal:#127D77;
  --teal-strong:#0B4F55;
  --coral:#F0563C;
  --sun:#F2A63D;
  --good:#2E7D5B;
  --good-bg:#E4F3EA;
  --shadow: 0 18px 40px -24px rgba(20,40,45,0.35);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A2027;
    --surface:#102B32;
    --surface-2:#0D262D;
    --text:#F1E9D8;
    --text-soft:#9FB4B6;
    --border:#1E3E44;
    --teal:#4FD1C4;
    --teal-strong:#8FE3D8;
    --coral:#FF8163;
    --sun:#F5BE6B;
    --good:#7ED0A3;
    --good-bg:#123227;
    --shadow: 0 18px 44px -22px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0A2027;
  --surface:#102B32;
  --surface-2:#0D262D;
  --text:#F1E9D8;
  --text-soft:#9FB4B6;
  --border:#1E3E44;
  --teal:#4FD1C4;
  --teal-strong:#8FE3D8;
  --coral:#FF8163;
  --sun:#F5BE6B;
  --good:#7ED0A3;
  --good-bg:#123227;
  --shadow: 0 18px 44px -22px rgba(0,0,0,0.6);
}

*{box-sizing:border-box;}
body{
  margin:0;
  background-color:var(--bg);
  color:var(--text);
  font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Fraunces", Georgia, serif;
  text-wrap:balance;
  margin:0;
}
.mono{
  font-family:"Space Mono", ui-monospace, SFMono-Regular, monospace;
  font-variant-numeric:tabular-nums;
}
.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;
}

.page{
  max-width:640px;
  margin:0 auto;
  padding-inline:20px;
  padding-block:28px 44px;
}

/* ---------- GATE ---------- */
:root{
  --stars-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Ccircle cx='18' cy='26' r='1.2' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='58' cy='78' r='0.8' fill='white' fill-opacity='0.55'/%3E%3Ccircle cx='104' cy='38' r='1' fill='white' fill-opacity='0.5'/%3E%3Ccircle cx='150' cy='92' r='1.4' fill='white' fill-opacity='0.8'/%3E%3Ccircle cx='190' cy='150' r='0.9' fill='white' fill-opacity='0.5'/%3E%3Ccircle cx='38' cy='138' r='1.1' fill='white' fill-opacity='0.7'/%3E%3Ccircle cx='88' cy='172' r='0.7' fill='white' fill-opacity='0.4'/%3E%3Ccircle cx='128' cy='18' r='0.9' fill='white' fill-opacity='0.6'/%3E%3Ccircle cx='8' cy='196' r='1.3' fill='white' fill-opacity='0.85'/%3E%3Ccircle cx='176' cy='8' r='0.8' fill='white' fill-opacity='0.5'/%3E%3Ccircle cx='210' cy='60' r='1' fill='white' fill-opacity='0.6'/%3E%3Ccircle cx='68' cy='10' r='0.6' fill='white' fill-opacity='0.4'/%3E%3C/svg%3E");
}
.gate{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  overflow-x:hidden;
  background-image:
    var(--stars-bg),
    radial-gradient(90% 65% at 50% 8%, #F4ECC6 0%, #DCE6EF 24%, #9FB8CE 48%, #5C7896 72%, #263A54 100%);
  background-repeat:repeat, no-repeat;
  background-size:220px 220px, cover;
}
.gate-wrap{
  width:100%;
  max-width:640px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.gate-eyebrow{
  margin:0;
  font-family:"Space Mono", monospace;
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#33465F;
  opacity:0.85;
}

/* ---------- CARD CLUSTER + POST-ITS ---------- */
.card-cluster{
  position:relative;
  width:100%;
  max-width:300px;
  margin-inline:auto;
}
.postits{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:26px;
}
.postit{
  perspective:900px;
  z-index:3;
  flex:none;
}
.postit-card{
  position:relative;
  width:100%;
  height:100%;
  cursor:pointer;
  transform-style:preserve-3d;
  transition:transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.postit-card.flipped{ transform:rotateY(180deg); }
.postit-card:focus-visible{
  outline:2px solid #F0E5A8;
  outline-offset:3px;
}
.postit-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border-radius:2px;
  padding:12px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#2A3245;
  box-shadow:0 12px 20px -10px rgba(10,15,25,0.5);
}
.postit-face::before{
  content:"";
  position:absolute;
  top:-6px;
  left:50%;
  width:30px;
  height:13px;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(255,255,255,0.5);
  border:1px solid rgba(255,255,255,0.35);
}
.postit-front{
  background:#F4ECC6;
}
.postit-back{
  transform:rotateY(180deg);
  background:#F4ECC6;
  font-family:"Work Sans", sans-serif;
  font-size:0.64rem;
  line-height:1.32;
}
.postit:nth-of-type(2) .postit-front,
.postit:nth-of-type(2) .postit-back,
.postit:nth-of-type(4) .postit-front,
.postit:nth-of-type(4) .postit-back{
  background:#DCE6EF;
}
.postit:nth-of-type(3) .postit-front,
.postit:nth-of-type(3) .postit-back{
  background:#E7CFC3;
}
.postit:nth-of-type(6) .postit-front,
.postit:nth-of-type(6) .postit-back{
  background:#DCE6EF;
}

/* sizes tuned per note length; stacked in a row below the card on narrow screens */
.postit:nth-of-type(1){ width:120px; height:140px; transform:rotate(-4deg); }
.postit:nth-of-type(2){ width:92px; height:92px; transform:rotate(6deg); }
.postit:nth-of-type(3){ width:120px; height:140px; transform:rotate(-3deg); }
.postit:nth-of-type(4){ width:80px; height:80px; transform:rotate(5deg); }
.postit:nth-of-type(5){ width:104px; height:104px; transform:rotate(-5deg); }
.postit:nth-of-type(6){ width:100px; height:100px; transform:rotate(4deg); }

@media (min-width:820px){
  .card-cluster{ max-width:660px; }
  .postits{ display:contents; }
  .postit{ position:absolute; }
  .postit:nth-of-type(1){ top:0; left:10px; }
  .postit:nth-of-type(3){ top:190px; left:10px; }
  .postit:nth-of-type(6){ top:340px; left:10px; }
  .postit:nth-of-type(2){ top:10px; right:10px; }
  .postit:nth-of-type(4){ top:142px; right:10px; }
  .postit:nth-of-type(5){ top:262px; right:10px; }
}

/* ---------- FLIP CARD ---------- */
.flip-scene{
  position:relative;
  width:100%;
  max-width:300px;
  margin-inline:auto;
  perspective:1400px;
  animation:float 6s ease-in-out infinite;
}
.flip-scene::before{
  content:"";
  position:absolute;
  inset:-18% -30%;
  background:radial-gradient(circle, rgba(240,229,168,0.55) 0%, rgba(240,229,168,0) 68%);
  filter:blur(18px);
  z-index:-1;
  pointer-events:none;
}
@keyframes float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
.flip-card{
  position:relative;
  width:100%;
  aspect-ratio:364/624;
  cursor:pointer;
  transform-style:preserve-3d;
  transition:transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.flip-card.flipped{
  transform:rotateY(180deg);
  cursor:default;
}
.flip-card:focus-visible{
  outline:3px solid var(--sun);
  outline-offset:6px;
}
.flip-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border-radius:16px;
  box-shadow:0 24px 60px -20px rgba(10,20,25,0.5);
  overflow:hidden;
}
.flip-face.front{
  background:var(--surface);
}
.flip-face.front img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.flip-hint{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  text-align:center;
  font-family:"Space Mono", monospace;
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#F4ECC6;
  background:linear-gradient(to top, rgba(30,45,70,0.8), transparent);
}
.flip-face.back{
  transform:rotateY(180deg);
  background-image:
    var(--stars-bg),
    radial-gradient(120% 80% at 50% -8%, rgba(240,229,168,0.32) 0%, rgba(240,229,168,0) 48%),
    linear-gradient(165deg, #30435F 0%, #16233A 100%);
  background-repeat:repeat, no-repeat, no-repeat;
  background-size:170px 170px, auto, auto;
  box-shadow:inset 0 0 44px rgba(0,0,0,0.35);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  padding:28px 24px;
  text-align:center;
}
.flip-face.back h1{
  font-size:1.5rem;
  font-weight:600;
  color:#F4ECC6;
}
.gate-form{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.gate-text-input{
  font:inherit;
  font-size:1rem;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(244,236,198,0.35);
  background:rgba(255,255,255,0.08);
  color:#F4ECC6;
  text-align:center;
}
.gate-text-input::placeholder{
  color:rgba(244,236,198,0.55);
}
.gate-text-input:focus-visible{
  outline:2px solid #F0E5A8;
  outline-offset:2px;
}
.gate-form button{
  font:inherit;
  font-weight:600;
  font-size:0.95rem;
  padding:12px 14px;
  border-radius:10px;
  border:none;
  background:linear-gradient(180deg, #F4ECC6 0%, #E8D98A 100%);
  color:#1F2E45;
  cursor:pointer;
}
.gate-form button:hover{ background:linear-gradient(180deg, #FBF6DE 0%, #F0E5A8 100%); }
.gate-form button:focus-visible{
  outline:2px solid #F4ECC6;
  outline-offset:2px;
}
.gate-error{
  margin:14px 0 0;
  font-size:0.85rem;
  color:#FF9E80;
}
.back-content.shake,
.confirm-card.shake{ animation:shake 0.4s; }
@keyframes shake{
  0%, 100%{ transform:translateX(0); }
  20%, 60%{ transform:translateX(-8px); }
  40%, 80%{ transform:translateX(8px); }
}

/* ---------- CONFIRM GATE ---------- */
.confirm-gate{
  display:none;
  position:fixed;
  inset:0;
  z-index:60;
  align-items:center;
  justify-content:center;
  padding:24px;
  overflow:hidden;
  background-image:
    var(--stars-bg),
    radial-gradient(90% 65% at 50% 8%, #F4ECC6 0%, #DCE6EF 24%, #9FB8CE 48%, #5C7896 72%, #263A54 100%);
  background-repeat:repeat, no-repeat;
  background-size:220px 220px, cover;
}
.confirm-gate.visible{ display:flex; }
.confirm-card{
  position:relative;
  z-index:2;
  width:100%;
  max-width:320px;
  padding:32px 26px;
  border-radius:18px;
  text-align:center;
  background-image:
    var(--stars-bg),
    radial-gradient(120% 80% at 50% -8%, rgba(240,229,168,0.32) 0%, rgba(240,229,168,0) 48%),
    linear-gradient(165deg, #30435F 0%, #16233A 100%);
  background-repeat:repeat, no-repeat, no-repeat;
  background-size:170px 170px, auto, auto;
  box-shadow:0 24px 60px -20px rgba(10,20,25,0.5), inset 0 0 44px rgba(0,0,0,0.35);
}
.confirm-card h1{
  font-size:1.8rem;
  font-weight:600;
  color:#F4ECC6;
}
.red-flash{
  position:absolute;
  inset:0;
  background:#B91C1C;
  opacity:0;
  pointer-events:none;
  z-index:1;
}
.red-flash.flash{ animation:redFlash 0.7s ease; }
@keyframes redFlash{
  0%{ opacity:0; }
  20%{ opacity:0.85; }
  100%{ opacity:0; }
}
.confirm-toast{
  position:absolute;
  top:22%;
  left:50%;
  margin:0;
  max-width:280px;
  padding:14px 20px;
  border-radius:12px;
  background:#FFFFFF;
  color:#8C1F1F;
  font-weight:700;
  font-size:0.95rem;
  text-align:center;
  box-shadow:0 20px 40px -10px rgba(0,0,0,0.45);
  z-index:10;
  opacity:0;
}
.confirm-toast.show{ animation:toastPop 1.4s ease forwards; }
@keyframes toastPop{
  0%{ opacity:0; transform:translate(-50%,-40px) scale(0.8) rotate(-4deg); }
  15%{ opacity:1; transform:translate(-50%,0) scale(1.05) rotate(2deg); }
  25%{ opacity:1; transform:translate(-50%,0) scale(1) rotate(-1deg); }
  85%{ opacity:1; transform:translate(-50%,0) scale(1) rotate(0deg); }
  100%{ opacity:0; transform:translate(-50%,-10px) scale(0.95); }
}

@media (prefers-reduced-motion: reduce){
  .back-content.shake,
  .confirm-card.shake{ animation:none; }
  .flip-card{ transition:none; }
  .flip-scene{ animation:none; }
  .postit-card{ transition:none; }
  .red-flash.flash{ animation:none; }
  .confirm-toast.show{ animation:none; opacity:1; }
}

/* ---------- HERO ---------- */
.hero-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px 24px;
  box-shadow:var(--shadow);
}
.hero-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.hero-eyebrow{
  font-family:"Space Mono", monospace;
  font-size:0.66rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-soft);
}
.hero-countdown{
  font-family:"Space Mono", monospace;
  font-size:0.7rem;
  letter-spacing:0.03em;
  color:var(--teal-strong);
  white-space:nowrap;
}
.hero-countdown strong{
  font-family:"Fraunces", serif;
  font-weight:700;
  font-size:1rem;
  margin-right:4px;
}
.hero-title{
  margin-top:8px;
  font-size:clamp(1.9rem, 7vw, 2.6rem);
  font-weight:600;
  color:var(--text);
}
.hero-route{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
}
.hero-code{
  font-family:"Space Mono", monospace;
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:0.04em;
  color:var(--text);
}
.hero-arrow{ color:var(--coral); flex:none; }
.hero-meta{
  margin-top:8px;
  font-size:0.86rem;
  color:var(--text-soft);
}

/* ---------- SECTION NAV ---------- */
.section-nav{
  display:flex;
  gap:20px;
  margin-top:20px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
  font-family:"Space Mono", monospace;
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.section-nav a{
  color:var(--text-soft);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:2px solid transparent;
}
.section-nav a:hover,
.section-nav a:focus-visible{
  color:var(--teal-strong);
  border-bottom-color:var(--coral);
  outline:none;
}

/* ---------- AMENITIES ---------- */
.amenities{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin-top:14px;
}
.amenity{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.78rem;
  color:var(--text-soft);
}
.amenity svg{ color:var(--teal); flex:none; }

/* ---------- SECTIONS ---------- */
.section{
  padding-block:26px 4px;
}
.section-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.section-head svg{ color:var(--teal); flex:none; }
.section-head h2{
  font-size:1.3rem;
  font-weight:600;
  color:var(--text);
}

/* ---------- TICKETS ---------- */
.tickets{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.ticket{
  display:block;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:18px 20px;
}
.ticket-label{
  display:block;
  font-size:0.66rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-soft);
}
.ticket-route{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  gap:8px;
  margin-top:14px;
}
.ticket-endpoint{
  display:flex;
  flex-direction:column;
}
.ticket-endpoint.dest{
  align-items:flex-end;
  text-align:right;
}
.ticket-time{
  font-family:"Work Sans", sans-serif;
  font-weight:600;
  font-size:1.4rem;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.ticket-code{
  font-family:"Space Mono", monospace;
  font-size:0.78rem;
  letter-spacing:0.06em;
  color:var(--teal-strong);
  margin-top:3px;
}
.ticket-city{
  font-family:"Fraunces", serif;
  font-style:italic;
  font-size:0.76rem;
  color:var(--text-soft);
  margin-top:2px;
}
.ticket-path-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:10px;
  min-width:64px;
}
.ticket-path-col svg{
  width:100%;
  height:14px;
  color:var(--coral);
}
.ticket-duration{
  margin-top:4px;
  font-family:"Space Mono", monospace;
  font-size:0.62rem;
  color:var(--text-soft);
  white-space:nowrap;
}
.ticket-footer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed var(--border);
  font-size:0.72rem;
  color:var(--text-soft);
}
.ticket-confirmation{
  font-family:"Space Mono", monospace;
  letter-spacing:0.01em;
}

/* ---------- HOTEL ---------- */
.hotel-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:22px;
}
.hotel-card + .hotel-card{
  margin-top:18px;
}
.badge{
  display:inline-block;
  background:var(--good-bg);
  color:var(--good);
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.04em;
  padding:4px 10px;
  border-radius:999px;
}
.hotel-card h3{
  font-size:1.3rem;
  font-weight:600;
  margin-top:10px;
}
.hotel-sub{
  margin:4px 0 0;
  color:var(--text-soft);
  font-size:0.9rem;
}
.hotel-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px 20px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.g-label{
  display:block;
  font-size:0.66rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-soft);
}
.g-value{
  display:block;
  margin-top:3px;
  font-size:0.94rem;
}
.hotel-codes{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.code-mono{
  display:block;
  margin-top:3px;
  font-family:"Space Mono", monospace;
  font-size:0.88rem;
  color:var(--teal-strong);
}

footer{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--border);
  color:var(--text-soft);
  font-size:0.85rem;
  text-align:center;
}

/* ---------- PROOFS + LIGHTBOX ---------- */
.proofs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:22px 26px;
  padding-block:10px 6px;
}
.proof{
  width:140px;
  flex:none;
  background:#FFFFFF;
  padding:10px 10px 30px;
  border:none;
  border-radius:2px;
  box-shadow:0 14px 26px -14px rgba(20,30,40,0.4), 0 2px 6px rgba(20,30,40,0.18);
  cursor:pointer;
  font:inherit;
  color:inherit;
  text-align:center;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.proof:nth-child(1){ transform:rotate(-4deg); }
.proof:nth-child(2){ transform:rotate(3deg); }
.proof:nth-child(3){ transform:rotate(-2deg); }
.proof:nth-child(4){ transform:rotate(2deg); }
.proof:hover,
.proof:focus-visible{
  transform:rotate(0deg) scale(1.04);
  box-shadow:0 18px 34px -16px rgba(20,30,40,0.48), 0 4px 10px rgba(20,30,40,0.2);
  z-index:1;
  outline:none;
}
.proof img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:top;
  display:block;
  background:#e5e5e5;
}
.proof-label{
  display:block;
  margin-top:10px;
  font-family:"Fraunces", serif;
  font-style:italic;
  font-size:0.82rem;
  color:#333;
}
.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(10,15,20,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.lightbox[hidden]{ display:none; }
.lightbox img{
  max-width:100%;
  max-height:100%;
  border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
.lightbox-close{
  position:absolute;
  top:calc(16px + env(safe-area-inset-top, 0px));
  right:16px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.15);
  color:#fff;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
}
.lightbox-close:hover{ background:rgba(255,255,255,0.25); }

@media (max-width:420px){
  .ticket-footer{ flex-wrap:wrap; gap:4px 10px; }
  .hotel-grid{ grid-template-columns:1fr 1fr; }
}