:root {
  --bg:#08080a; --card:rgba(255,255,255,.035); --line:rgba(255,255,255,.09);
  --gold:#e6c875; --gold-hi:#fff1c2; --text:#f6f3ea; --dim:#9a968b;
}
* { box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body {
  margin:0; min-height:100vh; color:var(--text); background:var(--bg);
  font:17px/1.6 "Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  background-image:
    radial-gradient(900px 520px at 50% -180px, rgba(230,200,117,.20), transparent 70%),
    radial-gradient(600px 400px at 100% 100%, rgba(230,200,117,.05), transparent 70%);
  background-attachment:fixed;
}
main { max-width:720px; margin:0 auto; padding:clamp(56px,11vh,120px) 22px 96px; }

.eyebrow {
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); backdrop-filter:blur(8px);
  color:var(--gold); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold); }
.eyebrow a { color:inherit; text-decoration:none; }

h1 {
  margin:22px 0 16px; font-size:clamp(40px,8.4vw,72px); line-height:1; font-weight:800; letter-spacing:-.035em;
  background:linear-gradient(180deg,#fff 30%,var(--gold) 130%); -webkit-background-clip:text; background-clip:text; color:transparent;
}
h2 { font-size:22px; letter-spacing:-.015em; margin:48px 0 10px; }
h3 { letter-spacing:-.01em; }
p.lede { color:var(--dim); font-size:clamp(18px,2.4vw,20px); max-width:34em; margin:0 0 34px; }

/* signup: one pill, input and button joined */
form {
  display:flex; gap:6px; padding:6px; border-radius:16px; max-width:520px;
  border:1px solid var(--line); background:rgba(255,255,255,.04); backdrop-filter:blur(10px);
  transition:border-color .2s, box-shadow .2s;
}
form:focus-within { border-color:rgba(230,200,117,.55); box-shadow:0 0 0 4px rgba(230,200,117,.10), 0 18px 50px -20px rgba(230,200,117,.35); }
input[type=email] { flex:1 1 auto; min-width:0; padding:13px 14px; border:0; background:transparent; color:var(--text); font:inherit; }
input[type=email]::placeholder { color:#77736a; }
input[type=email]:focus { outline:none; }
button {
  padding:13px 20px; border:0; border-radius:11px; cursor:pointer; white-space:nowrap;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:#161616; font:inherit; font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 8px 24px -10px rgba(230,200,117,.7);
  transition:transform .15s, filter .15s;
}
button:hover { transform:translateY(-1px); filter:brightness(1.05); }
button:active { transform:translateY(0); }
button[disabled] { opacity:.6; cursor:default; transform:none; }
.hp { position:absolute; left:-9999px; }
.note { color:var(--dim); font-size:14px; margin-top:14px; min-height:20px; }
.note.err { color:#ff9c8a; }

/* rooms */
#rooms { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.card {
  display:block; position:relative; overflow:hidden; padding:22px; border-radius:18px; color:inherit; text-decoration:none;
  border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
#cards .card, #missing .card { margin:14px 0; }
a.card:hover { transform:translateY(-3px); border-color:rgba(230,200,117,.5); box-shadow:0 24px 60px -30px rgba(230,200,117,.5); }
a.card::after { content:"\2192"; position:absolute; right:20px; top:20px; color:var(--gold); opacity:.6; transition:transform .2s, opacity .2s; }
a.card:hover::after { transform:translateX(4px); opacity:1; }
.card .kind { color:var(--gold); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.card h3 { margin:10px 0 6px; font-size:21px; line-height:1.2; padding-right:26px; }
.card p { margin:0; color:var(--dim); font-size:15.5px; }
.card.soon { opacity:.5; }
.card.soon .kind { color:var(--dim); }

.gets { margin:34px 0 0; padding:0; list-style:none; max-width:520px; }
.gets li { padding:12px 0 12px 30px; border-top:1px solid var(--line); position:relative; color:#d9d5ca; }
.gets li::before { content:""; position:absolute; left:4px; top:21px; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px rgba(230,200,117,.8); }

/* unlocked content */
.rich { margin-top:8px; }
.rich p { color:#d9d5ca; }
.rich h3 { font-size:18px; margin:26px 0 6px; }
.rich pre {
  white-space:pre-wrap; margin:12px 0 0; padding:20px; border-radius:16px; overflow-x:auto;
  border:1px solid var(--line); background:rgba(0,0,0,.45); color:#eee9dc;
  font:14.5px/1.6 ui-monospace,"SF Mono",Menlo,monospace;
}
.rich table { width:100%; border-collapse:collapse; font-size:14.5px; margin-bottom:6px; }
.rich th { text-align:left; border-bottom:1px solid var(--line); padding:8px 12px 8px 0; color:var(--gold); font-weight:600; }
.copy { float:right; margin:20px 10px 0 0; position:relative; z-index:1; padding:6px 12px; font-size:12.5px; border-radius:8px; box-shadow:none; }

footer { margin-top:72px; padding-top:22px; border-top:1px solid var(--line); color:var(--dim); font-size:14px; }
footer a { color:var(--gold); text-decoration:none; }
[hidden] { display:none !important; }

@media (max-width:480px) {
  form { flex-direction:column; padding:8px; }
  button { width:100%; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }

/* emoji */
.icon { font-size:34px; line-height:1; margin-bottom:14px; }
.icon.big { font-size:52px; margin:26px 0 -6px; }
.icon:empty { display:none; }
.card.soon .icon { filter:grayscale(1); }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.chips:empty { display:none; }
.chips span { padding:5px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04); font-size:13px; color:#d9d5ca; }
.gets li { padding-left:0; font-size:17px; }
.gets li::before { display:none; }

/* photos */
.card.has-banner { padding-top:0; }
.banner { display:block; width:calc(100% + 44px); margin:0 -22px 20px; aspect-ratio:16/9; object-fit:cover; object-position:70% 30%; }
.card.has-banner::after { top:auto; bottom:20px; }
.hero { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:20px; margin-top:24px; border:1px solid var(--line); box-shadow:0 30px 80px -40px rgba(230,200,117,.45); }

/* check-your-email state */
.checkbox { max-width:520px; padding:26px; border-radius:18px; border:1px solid rgba(230,200,117,.45); background:linear-gradient(180deg,rgba(230,200,117,.10),rgba(255,255,255,.02)); }
.checkbox h2 { margin:0 0 8px; }
.checkbox p { margin:0 0 10px; color:#d9d5ca; }

/* front page portrait */
.top { display:grid; grid-template-columns:1fr 230px; gap:28px; align-items:end; margin-bottom:34px; }
.top p.lede { margin-bottom:0; }
.portrait { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:20px; border:1px solid var(--line); box-shadow:0 30px 80px -30px rgba(230,200,117,.55); }
@media (max-width:640px) {
  .top { grid-template-columns:1fr; gap:22px; }
  .portrait { aspect-ratio:1/1; object-position:50% 20%; }
}

/* front page: wide hero instead of the portrait column */
.top { display:block; margin-bottom:26px; }
main > .hero { margin:0 0 30px; }

/* the big offer card, above the rooms */
#featured { margin-top:14px; }
#featured:empty { display:none; }
.offer {
  display:block; padding:30px; border-radius:22px; color:inherit; text-decoration:none; position:relative; overflow:hidden;
  border:1px solid rgba(230,200,117,.6);
  background:radial-gradient(520px 260px at 100% 0%, rgba(230,200,117,.28), transparent 70%), linear-gradient(180deg,rgba(230,200,117,.10),rgba(255,255,255,.02));
  box-shadow:0 30px 90px -40px rgba(230,200,117,.7); transition:transform .2s, box-shadow .2s;
}
.offer:hover { transform:translateY(-3px); box-shadow:0 36px 100px -36px rgba(230,200,117,.9); }
.offer .kind { color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.offer h2 { margin:12px 0 8px; font-size:clamp(28px,5vw,40px); line-height:1.05; letter-spacing:-.03em; }
.offer p { margin:0; color:#e4e0d4; font-size:18px; max-width:30em; }
.offer .chips span { background:rgba(0,0,0,.35); font-size:14px; }
.offer .btn { display:inline-block; margin-top:22px; padding:13px 22px; border-radius:11px; font-weight:700; color:#161616; background:linear-gradient(180deg,var(--gold-hi),var(--gold)); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); }