@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@1,8..60,400;1,8..60,500&display=swap');

:root{--radius:1rem;}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{min-height:100%;}
body{font-family:'Poppins',sans-serif;font-weight:400;color:#fff;background:hsl(0 0% 8%);overflow-x:hidden;}
h1,h2,h3,h4{font-weight:500;}
h1 em,h2 em,h3 em,.italic{font-family:'Source Serif 4',serif;font-style:italic;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;}

.bg-video{position:fixed;inset:0;z-index:0;}
.bg-video video{width:100%;height:100%;object-fit:cover;}
.bg-video::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.25);}
.content{position:relative;z-index:10;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}

.liquid-glass{background:rgba(255,255,255,0.01);background-blend-mode:luminosity;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:none;box-shadow:inset 0 1px 1px rgba(255,255,255,0.1);position:relative;overflow:hidden;}
.liquid-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1.4px;background:linear-gradient(180deg,rgba(255,255,255,0.45) 0%,rgba(255,255,255,0.15) 20%,transparent 40%,transparent 60%,rgba(255,255,255,0.15) 80%,rgba(255,255,255,0.45) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;}
.liquid-glass-strong{background:rgba(255,255,255,0.01);background-blend-mode:luminosity;backdrop-filter:blur(50px);-webkit-backdrop-filter:blur(50px);border:none;box-shadow:4px 4px 4px rgba(0,0,0,0.05),inset 0 1px 1px rgba(255,255,255,0.15);position:relative;overflow:hidden;}
.liquid-glass-strong::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1.4px;background:linear-gradient(180deg,rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.2) 20%,transparent 40%,transparent 60%,rgba(255,255,255,0.2) 80%,rgba(255,255,255,0.5) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;}

.hoverable{transition:transform .25s ease;}
@media (hover:hover) and (pointer:fine){.hoverable:hover{transform:scale(1.05);}}
.hoverable:active{transform:scale(.95);}
.t80{color:rgba(255,255,255,.8);} .t60{color:rgba(255,255,255,.6);} .t50{color:rgba(255,255,255,.5);}
svg.ic{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* shared nav */
.site-nav{display:flex;justify-content:space-between;align-items:center;padding:26px 36px;gap:16px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:10px;}
.brand svg{width:30px;height:30px;}
.brand span{font-weight:600;font-size:1.4rem;letter-spacing:-.04em;}
.nav-links{display:flex;gap:8px;padding:8px 10px;border-radius:9999px;flex-wrap:wrap;}
.nav-links a{padding:8px 16px;border-radius:9999px;font-size:.8rem;color:rgba(255,255,255,.8);transition:background .25s,color .25s;}
.nav-links a:hover,.nav-links a.active{background:rgba(255,255,255,.12);color:#fff;}

/* page scaffolding */
.page{flex:1;width:min(1180px,100% - 2rem);margin:0 auto;padding:28px 0 70px;}
.page-head{text-align:center;margin:34px 0 44px;}
.page-head .kicker{font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px;}
.page-head h1{font-size:clamp(2rem,5vw,4rem);letter-spacing:-.04em;line-height:1.05;}
.page-head p{margin:18px auto 0;max-width:56ch;font-size:.95rem;line-height:1.8;color:rgba(255,255,255,.65);}

/* venue grid */
.v-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:22px;}
.v-card{border-radius:1.5rem;padding:14px;display:flex;flex-direction:column;gap:14px;}
.v-card .ph{border-radius:calc(1.5rem - 6px);overflow:hidden;aspect-ratio:16/10;}
.v-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;}
@media (hover:hover) and (pointer:fine){.v-card:hover .ph img{transform:scale(1.05);}}
.v-card h3{font-size:1.15rem;letter-spacing:-.01em;}
.v-card .loc{display:inline-block;font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:4px;}
.v-card .v-notes{font-size:.72rem;letter-spacing:.02em;color:rgba(255,255,255,.8);margin:-4px 0 0;}
.v-card p{font-size:.8rem;line-height:1.7;color:rgba(255,255,255,.65);flex:1;}
.v-actions{display:flex;gap:10px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:9999px;font-size:.78rem;font-weight:500;}
.btn.ghost{color:rgba(255,255,255,.75);}

/* generic cards & panels */
.panel{border-radius:2rem;padding:34px;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px;}
.info-card{border-radius:1.5rem;padding:26px;display:flex;flex-direction:column;gap:12px;}
.info-card h3{font-size:1rem;}
.info-card p{font-size:.8rem;line-height:1.7;color:rgba(255,255,255,.65);}
.icon-circle{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;}
.section-label{text-align:center;font-size:.7rem;font-weight:500;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.5);line-height:1.9;max-width:46ch;margin:38px auto 18px;}

.prose{max-width:64ch;margin:0 auto;font-size:.95rem;line-height:2;color:rgba(255,255,255,.75);}
.prose em{color:#fff;}
.stat-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:36px 0;}
.stat{padding:14px 26px;border-radius:9999px;text-align:center;}
.stat b{display:block;font-size:1.3rem;font-weight:500;}
.stat span{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);}

.site-footer{text-align:center;padding:34px 20px 44px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);}

/* ---------------------------------------------------------------------------
   glass fallback — the panels carry almost no background colour of their own
   (rgba(255,255,255,0.01)), so without backdrop-filter they vanish into the
   background video and take their text with them.
   --------------------------------------------------------------------------- */
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .liquid-glass{background:rgba(20,20,20,.72);}
  .liquid-glass-strong{background:rgba(14,14,14,.88);}
}

/* ---------------------------------------------------------------------------
   touch devices — no hover to reveal affordances, and fingers need ~44px
   --------------------------------------------------------------------------- */
@media (pointer:coarse){
  .nav-links a,.btn,.back{min-height:44px;}
  .btn,.back{display:inline-flex;align-items:center;justify-content:center;}
  .nav-links a{display:inline-flex;align-items:center;}
  .brand{min-height:44px;}
}

/* ---------------------------------------------------------------------------
   phones
   --------------------------------------------------------------------------- */
@media (max-width:768px){
  /* brand and nav each get their own centred row instead of fighting for one */
  .site-nav{flex-direction:column;justify-content:center;padding:18px 16px;gap:14px;}
  /* the pill wraps to 2-3 rows at this width; a rounded rect wraps gracefully,
     a 9999px radius does not */
  .nav-links{border-radius:1.25rem;justify-content:center;gap:4px;padding:8px;max-width:100%;}
  .nav-links a{padding:8px 13px;font-size:.78rem;}

  .page{padding:16px 0 54px;}
  .page-head{margin:20px 0 30px;}
  .page-head p{font-size:.9rem;line-height:1.7;}

  .panel{padding:22px;border-radius:1.5rem;}
  .info-card{padding:20px;}
  .v-grid{gap:16px;}
  .card-grid{gap:14px;}
  .section-label{margin:28px auto 14px;letter-spacing:.18em;line-height:1.8;}

  /* blur(50px) over a full-screen video is the single most expensive thing on
     the page for a phone GPU */
  .liquid-glass-strong{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}

  .prose{font-size:.9rem;line-height:1.85;}
  .stat-row{gap:10px;margin:26px 0;}
  .stat{padding:12px 20px;}
  .site-footer{padding:26px 16px 36px;letter-spacing:.08em;line-height:1.8;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .hoverable:active{transform:none;}
}