/* Clubbly — tokens from the mobile app theme (src/theme/theme.ts) */
:root{
  color-scheme:dark;
  --app-bg:#08080a;--bg:#0b0b0d;--surface-deep:#0f0f12;--surface-input:#141418;--surface:#151519;--surface-alt:#17171b;--surface-raised:#1a1a1f;
  --text:#f2f0ea;--text-soft:#c9c7c0;--muted:#8b8b93;--faint:#6e6e76;--dim:#55555c;
  --gold:#d4af37;--on-gold:#0b0b0d;--gold-text:#e7cc79;--violet:#9b87ff;--violet-text:#cfc4ff;--green:#4ade80;--green-text:#8cebb0;--danger:#ff9b9b;
  --hairline:rgba(242,240,234,.07);--border-soft:rgba(242,240,234,.08);--border:rgba(242,240,234,.12);--border-med:rgba(242,240,234,.14);--border-strong:rgba(242,240,234,.16);--border-loud:rgba(242,240,234,.22);
  --focus-ring:#e7cc79;--gold-line:rgba(212,175,55,.28);--gold-border:rgba(212,175,55,.4);--gold-fill:rgba(212,175,55,.08);
  --violet-border:rgba(155,135,255,.4);--violet-fill:rgba(155,135,255,.14);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:26px;--space-7:40px;--space-8:96px;
  --radius-xs:6px;--radius-md:12px;--radius-lg:14px;--radius-xl:16px;--radius-xxl:20px;--radius-pill:999px;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--font-serif:"Playfair Display",Georgia,serif;
  --gutter:var(--space-5);
}
@media(min-width:768px){:root{--gutter:var(--space-7)}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text-soft);font:400 16px/26px var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--gold-text)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img,svg{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gutter)}
.read{max-width:640px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--on-gold);padding:8px 14px;border-radius:var(--radius-md);z-index:20}
.skip:focus{left:8px}

/* type */
h1,h2,h3{font-family:var(--font-serif);font-weight:500;color:var(--text);margin:0}
.display{font-size:clamp(42px,8vw,72px);line-height:1.03;letter-spacing:-.01em}
h2,.h1{font-size:clamp(32px,5vw,48px);line-height:1.1}
h3,.title{font-size:26px;line-height:1.2}
.lead{font-size:19px;line-height:30px;color:var(--text-soft);margin:var(--space-5) 0 0;max-width:560px}
.eyebrow{display:block;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-3)}
.eyebrow.v{color:var(--violet-text)}

/* header */
.top{position:sticky;top:0;z-index:10;background:rgba(11,11,13,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline)}
.top .wrap{display:flex;align-items:center;gap:var(--space-4);height:68px}
.brand{font:500 24px var(--font-serif);color:var(--text);text-decoration:none;margin-right:auto}
.nav{display:flex;gap:var(--space-2);align-items:center}
.nav a.chip-link{font-size:13px;font-weight:500;color:var(--text-soft);text-decoration:none;padding:10px 14px;border-radius:var(--radius-pill);transition:color .15s,background .15s}
.nav a.chip-link:hover,.nav a[aria-current=page]{color:var(--text);background:var(--surface-alt)}
@media(max-width:700px){.nav a.chip-link{display:none}.nav a.chip-link.keep{display:inline-block}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;border-radius:var(--radius-xl);font:600 15px/20px var(--font-sans);text-decoration:none;border:1px solid transparent;color:var(--text);cursor:pointer;transition:border-color .15s,background .15s,opacity .15s}
.btn.primary{background:var(--gold);color:var(--on-gold);font-weight:700}
.btn.primary:hover{opacity:.92}
.btn.outline{border-color:var(--border-strong)}.btn.outline:hover{border-color:var(--border-loud)}
.btn.sm{min-height:42px;padding:0 18px;font-size:13px;border-radius:var(--radius-pill)}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-7)}

/* hero */
.hero{position:relative;overflow:hidden;padding:88px 0 var(--space-8);background:linear-gradient(180deg,#1d1a22 0%,#111013 55%,#0c0b0e 100%)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(242,240,234,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(242,240,234,.035) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.hero .wrap{position:relative;display:grid;gap:var(--space-7);align-items:center}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.1fr .9fr}}
.hero.sub{padding:72px 0 64px}

/* phone mock — drawn in CSS, no screenshots yet */
.phone{width:290px;margin:0 auto;border:1px solid var(--border-strong);border-radius:44px;background:var(--bg);padding:16px;box-shadow:none}
.phone .screen{border-radius:30px;background:var(--surface-deep);border:1px solid var(--border-soft);padding:22px 18px;min-height:480px;display:flex;flex-direction:column;gap:14px}
.floor{position:relative;height:200px;border-radius:var(--radius-xl);border:1px solid var(--border-soft);background:linear-gradient(180deg,#1d1a22,#0c0b0e);overflow:hidden}
.floor::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(242,240,234,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(242,240,234,.035) 1px,transparent 1px);background-size:26px 26px}
.tbl{position:absolute;width:34px;height:34px;border-radius:50%;background:var(--surface-raised);border:1px solid var(--border-med)}
.tbl.open{background:var(--surface-raised)}.tbl.mine{background:var(--gold);border-color:transparent}.tbl.taken{background:#121216;border-style:dashed}
.legend{display:flex;gap:14px;font-size:11px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}

/* sections */
section{padding:var(--space-8) 0}
section+section{border-top:1px solid var(--hairline)}
.grid{display:grid;gap:var(--space-5);margin-top:var(--space-7)}
@media(min-width:1000px){.grid.three{grid-template-columns:repeat(3,1fr)}.grid.two{grid-template-columns:repeat(2,1fr)}}
@media(min-width:700px) and (max-width:999px){.grid.three,.grid.two{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-xxl);padding:var(--space-6) var(--space-5) var(--space-6);transition:border-color .15s,background .15s}
.card:hover{background:var(--surface-raised);border-color:var(--border)}
.card h3{margin:0 0 var(--space-2)}
.card p{margin:0}
.card.venue{border-color:var(--violet-border);background:linear-gradient(var(--violet-fill),var(--violet-fill)),var(--surface)}
.step{font:500 15px var(--font-serif);color:var(--gold-text);display:inline-flex;width:36px;height:36px;border-radius:50%;border:1px solid var(--gold-border);background:var(--gold-fill);align-items:center;justify-content:center;margin-bottom:var(--space-4)}
.badge{display:inline-block;padding:4px 8px;border-radius:var(--radius-xs);border:1px solid;font-size:10px;line-height:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--space-3)}
.badge.v{color:var(--violet-text);border-color:var(--violet-border);background:var(--violet-fill)}
.badge.g{color:var(--gold-text);border-color:var(--gold-border);background:var(--gold-fill)}
.band{background:var(--surface-deep)}
.cta{text-align:center}.cta .lead{margin-left:auto;margin-right:auto}.cta .actions{justify-content:center}

/* prose */
.prose h2{font-size:28px;margin:var(--space-7) 0 var(--space-3)}
.prose p,.prose li{max-width:640px}
.prose ul{padding-left:20px}
details{border-bottom:1px solid var(--hairline);padding:var(--space-4) 0;max-width:720px}
summary{cursor:pointer;color:var(--text);font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::after{content:"+";color:var(--gold-text)}details[open] summary::after{content:"–"}
summary::-webkit-details-marker{display:none}
details p{margin:var(--space-3) 0 0}

/* footer */
footer{background:var(--app-bg);border-top:1px solid var(--hairline);padding:56px 0 40px;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:var(--space-5) var(--space-7);justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
footer a{color:var(--muted);text-decoration:none}footer a:hover{color:var(--text)}
footer .brand{font-size:22px}