/* GPT-5 aesthetic — confident, vivid, magazine energy */
:root{
  --gold:#FFD60A; --orange:#FF9F0A; --coral:#FF6B6B; --pink:#FF2D55; --cyan:#22D3EE; --cyan-deep:#06B6D4; --sand:#FDE68A; --ink:#111827; --muted:#6B7280; --border:#E5E7EB;
  --bg:#fff; --text:#111827; --body:16.5px; --lh:1.55;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:var(--lh);}
img{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Type scale */
.display{font-family:"Fraunces",ui-serif,Georgia,serif;font-weight:900;letter-spacing:-.045em;font-size:clamp(3rem,8vw,9rem);line-height:.9;margin:.2em 0}
.page-heading{font-family:"Fraunces",ui-serif,Georgia,serif;font-weight:900;letter-spacing:-.035em;font-size:clamp(1.8rem,4.5vw,4rem);margin:.2em 0}
.section-kicker{font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:.8rem}
.dek{max-width:70ch;color:#374151}
.muted{color:var(--muted)}
.center{text-align:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;border-radius:999px;border:1px solid var(--border);padding:.6rem 1rem;font-weight:700;transition:transform .08s ease, box-shadow .2s ease, background .2s ease;text-decoration:none;color:var(--ink);background:#fff;box-shadow:0 1px 2px rgba(17,24,39,.04)}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(17,24,39,.08)}
.btn-sm{padding:.45rem .8rem;font-size:.9rem}
.btn-lg{padding:.9rem 1.3rem;font-size:1.05rem}
.btn-primary{background:linear-gradient(90deg,var(--coral),var(--gold));border-color:transparent;color:#111}
.btn-ghost{background:#fff;color:var(--ink)}
.btn-dark{background:#111;color:#fff;border-color:#111}

/* Header */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:30}
.header-inner{display:flex;align-items:center;gap:16px;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo img{width:40px;height:40px;border-radius:50%;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.logo .wordmark{font-family:"Fraunces";font-weight:900;letter-spacing:-.03em}
.main-nav{margin-left:auto;display:flex;gap:14px;align-items:center}
.main-nav a{color:#111;text-decoration:none;font-weight:700}
.header-cta{margin-left:8px}
.auth{display:flex;gap:10px;margin-left:8px}

/* Hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border);background:
  radial-gradient(1200px 400px at 80% -10%, rgba(255,109,109,.10), transparent 60%),
  radial-gradient(900px 300px at 0% -10%, rgba(34,211,238,.12), transparent 60%),
  #fff;
}
.hero-inner{padding:48px 0 36px}
.hero-eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-size:.8rem;margin:0 0 .6rem}
.tagline{font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:800;letter-spacing:-.01em;margin:.2rem 0 1.2rem}
.hero-illustration{height:220px;border-radius:24px;background:
  linear-gradient(180deg, rgba(255,109,109,.0), rgba(255,109,109,.18) 38%, rgba(255,214,10,.22) 100%),
  linear-gradient(90deg, rgba(34,211,238,.18), rgba(255,109,109,.22));
  box-shadow:inset 0 -60px 120px rgba(255,109,109,.25), inset 0 1px 0 rgba(255,255,255,.6);
  position:relative}
.hero-illustration:after{content:"";position:absolute;inset:auto 0 -60px 0;height:120px;background:
  radial-gradient(120px 60px at 20% 0, rgba(255,214,10,.6), transparent 70%),
  radial-gradient(180px 80px at 50% 0, rgba(255,109,109,.55), transparent 70%),
  radial-gradient(140px 70px at 80% 0, rgba(255,45,85,.45), transparent 70%);
  filter:blur(18px);opacity:.9}

/* Sections */
.section{padding:44px 0;border-bottom:1px solid var(--border)}
.section .section-head{margin-bottom:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.venue-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}

/* Cards & tokens */
.venue-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 4px 24px rgba(17,24,39,.06)}
.venue-card-image{aspect-ratio:16/10;background:linear-gradient(120deg, #fdf2f8, #cffafe)}
.venue-card-body{padding:12px}
.venue-card-title{font-weight:900;letter-spacing:-.02em}
.venue-card-meta{color:var(--muted);font-size:.9rem}
.venue-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.venue-tag,.badge{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;padding:.15rem .5rem;font-weight:700;font-size:.75rem;color:#374151;background:#fff}
.badge-open{border-color:#10B981;color:#047857;background:#ECFDF5}
.badge-closed{border-color:#DC2626;color:#991B1B;background:#FEF2F2}
.badge-rating{border-color:#F59E0B;background:#FFFBEB}
.badge-area{border-color:#06B6D4;background:#ECFEFF}

/* Canon list cards */
.canon-card{border:1px solid var(--border);border-radius:18px;padding:18px;background:linear-gradient(180deg,#fff, #fff),radial-gradient(400px 200px at 100% -20%, rgba(255,45,85,.10), transparent 60%);background-blend-mode:normal,screen}
.canon-card h3{font-family:"Fraunces";font-weight:900;letter-spacing:-.03em;margin:.2rem 0}
.canon-card .kicker{font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#9CA3AF;font-size:.75rem}
.canon-card .dek{margin:.3rem 0 1rem}
.canon-picks{display:flex;gap:10px;flex-wrap:wrap}
.canon-picks .badge{background:#fff}

/* Hit list */
.section-hitlist{--accent:var(--cyan-deep)}
.hitlist{counter-reset:item}
.hitlist .venue-card{position:relative}
.hitlist .venue-card:before{counter-increment:item;content:counter(item, decimal-leading-zero);position:absolute;top:8px;left:10px;font-weight:900;color:var(--accent);font-size:1.1rem}

/* Feature Matso's */
.info-card.matsos{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;border:1px solid var(--border);border-radius:20px;padding:22px;background:
  radial-gradient(500px 240px at 10% -20%, rgba(34,211,238,.18), transparent 60%),
  radial-gradient(400px 200px at 100% 120%, rgba(255,107,107,.14), transparent 60%),
  #fff}
.pull-quote{font-family:"Fraunces";font-weight:900;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.03em}
.feature-copy .btn-dark{margin-top:8px}

/* Areas */
.area-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.area-card{border:1px solid var(--border);border-radius:16px;padding:14px;background:linear-gradient(180deg,#fff, #fff),radial-gradient(360px 180px at 0% -10%, rgba(255,214,10,.16), transparent 60%);background-blend-mode:normal,screen}
.area-name{font-weight:900}
.area-count{color:var(--muted)}
.area-blurb{margin:.2rem 0 0;color:#374151}

/* Chips & tags */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--border);border-radius:999px;padding:.4rem .8rem;font-weight:800;background:#fff}

/* Values strip */
.section-values{background:linear-gradient(90deg, rgba(255,214,10,.18), rgba(255,107,107,.18));border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.values{display:flex;justify-content:center}
.values-list{display:flex;gap:16px;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-weight:800}
.values-list li{background:#fff;border:1px solid var(--border);border-radius:999px;padding:.5rem .9rem;box-shadow:0 2px 10px rgba(17,24,39,.06)}

/* CTA */
.section-cta{background:linear-gradient(180deg, rgba(34,211,238,.12), rgba(255,214,10,.12))}

/* Footer */
.site-footer{padding:36px 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:16px}
.footer-brand img{width:56px;height:56px;border-radius:50%;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.footer-about{color:#374151;max-width:36ch}
.footer-col h3{font-weight:900;letter-spacing:-.02em}
.footer-copy{border-top:1px solid var(--border);margin-top:18px;padding-top:12px;color:#374151}

/* Responsive */
@media (max-width: 1000px){
  .venue-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .area-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .info-card.matsos{grid-template-columns:1fr}
}
@media (max-width: 700px){
  .grid-2{grid-template-columns:1fr}
  .venue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .area-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-illustration{height:160px;border-radius:16px}
  .header-inner{gap:10px}
  .main-nav{display:none}
}
@media (max-width: 420px){
  .venue-grid{grid-template-columns:1fr}
  .area-grid{grid-template-columns:1fr}
}
