/* Local Manrope (optional). Put your woff2 files into /assets/font/.
   If you don't have them, the page will fall back to system fonts. */
@font-face{
  font-family: 'Manrope';
  src: url('../assets/font/manrope-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Manrope';
  src: url('../assets/font/manrope-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --fg: #ffffff;
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.18);
  --focus: #ffffff;
  --radius: 6px;
  --space: clamp(16px, 2.5vw, 28px);
  --maxw: 960px;
}

html,body{height:100%}
body{
  margin:0; color:var(--fg);
  font:16px/1.6 "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background:#000; position:relative; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background-position:center center; background-repeat:no-repeat; background-size:cover;
  background-image:url("../assets/bg-mobile.jpg"); transform:translateZ(0);
}
@media (min-width: 900px){
  body::before{ background-image:url("../assets/bg-desktop.jpg"); }
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1;
  background: radial-gradient(1200px 800px at 15% 15%, rgba(0,0,0,.15), rgba(0,0,0,.45) 65%),
              linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.55));
  pointer-events:none;
}

a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:calc(var(--space)*1.2) var(--space)}
header{padding-top:calc(var(--space)*0.5);padding-bottom:calc(var(--space)*1.2)}

h1{
  font-size:clamp(34px,7vw,72px); line-height:1.02; margin:0 0 8px 0;
  text-transform:uppercase; letter-spacing:.06em; font-weight:400;
  text-shadow:0 2px 18px rgba(0,0,0,.35)
}
.tagline{
  color:var(--muted); font-weight:400; font-size:clamp(16px,2.6vw,20px);
  margin:0 0 calc(var(--space)*1.6) 0;
  text-shadow:0 2px 14px rgba(0,0,0,.35)
}

.row{display:flex;flex-wrap:wrap;gap:12px}
.cta-row{margin-top:calc(var(--space)*0.2)}

.btn{
  appearance:none; border:1px solid rgba(255,255,255,.38);
  border-radius:var(--radius);
  padding:12px 16px; cursor:pointer; color:#fff; text-decoration:none;
  font-weight:800; letter-spacing:.01em; line-height:1.2;
  display:inline-flex; align-items:center; gap:10px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.btn:active{ transform: translateY(0) scale(.995) }
.btn:focus-visible{
  outline:3px solid var(--focus); outline-offset:3px;
  box-shadow:0 0 0 6px rgba(255,255,255,.22);
}
.btn.small{padding:9px 12px}

.icon{width:18px;height:18px;display:inline-block}
.icon .bi{
  width:18px;
  height:18px;
  display:block;
  fill:#fff;
  stroke:none;
}

.section{padding:calc(var(--space)*1.2) 0;border-top:1px solid var(--line);background:transparent}
.section h2{
  font-size:clamp(20px,3.2vw,28px); margin:0 0 12px 0; letter-spacing:.02em; font-weight:800;
  text-shadow:0 2px 14px rgba(0,0,0,.35)
}
.lede{color:var(--muted);max-width:72ch;text-shadow:0 2px 14px rgba(0,0,0,.35)}

.socials{display:flex;flex-wrap:wrap; gap:10px; margin-top:12px}
.socials .btn{padding:10px 12px}

.list{display:grid;gap:8px;margin-top:12px}
.card{
  border:1px solid var(--line); border-radius:var(--radius); padding:14px;
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items:start; gap:10px;
  background: rgba(0,0,0,.22); backdrop-filter: blur(2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.when{
  font-variant-numeric:tabular-nums}
.where{display:flex;flex-direction:column}
.venue{font-weight:900; letter-spacing:.01em}
.city{color:var(--muted)}
.right{display:flex; align-items:center; gap:8px}
.muted{color:var(--muted)}
.hidden{display:none !important}

.venue-link{
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.45);
  text-underline-offset: 2px;
  color: #fff;
}
.venue-link:hover{ text-decoration-color: rgba(255,255,255,.85); }

.link-icon{
  width: 13px;
  height: 13px;
  display: inline-block;
  vertical-align: text-bottom;
  margin-left: 6px;
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.venue-link:hover .link-icon{
  opacity: 0.95;
  transform: translate(2px,-2px);
}

/* Past events: bold strike-through */
.card.is-past{ opacity: 0.65; filter: saturate(70%); position: relative; }
.card.is-past .when,
.card.is-past .venue,
.card.is-past .city{
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.85);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

footer{padding:calc(var(--space)*1.2) 0;border-top:1px solid var(--line);font-size:14px}
footer .links{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:8px}
.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}


/* Date + time stacked */
.when{display:flex;flex-direction:column;gap:2px;min-width:130px}
.when .date{font-variant-numeric:tabular-nums}
.when .time{font-variant-numeric:tabular-nums; color: var(--muted); font-weight:700; font-size: 0.95em}


/* Override: stack date + time in the left column */
.when{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.when .date{font-variant-numeric:tabular-nums}
.when .time{
  font-variant-numeric:tabular-nums;
  color: var(--muted);
  font-weight:700;
  font-size: 0.95em;
}


/* ===== Legal overlay ===== */
.legal-link{
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.45);
  text-underline-offset: 2px;
}
.legal-link:hover{ text-decoration-color: rgba(255,255,255,.85); }

.overlay.hidden{ display:none !important; }
.overlay{
  position:fixed; inset:0; z-index:9999;
}
.overlay-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(2px);
}
.overlay-panel{
  position:relative;
  width:min(520px, calc(100% - 2*var(--space)));
  margin: calc(var(--space) * 2) auto 0;
  border:1px solid rgba(255,255,255,.22);
  border-radius: var(--radius);
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
  padding: 18px 18px 16px;
}
.overlay-title{
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .02em;
}
.overlay-text{ margin: 0 0 14px 0; }
.overlay-links{ display:flex; gap:10px; flex-wrap:wrap; }

.overlay-close{
  position:absolute;
  top:10px; right:10px;
  width:40px; height:40px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-size: 26px;
  line-height: 1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.overlay-close:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.55);
  transform: translateY(-1px);
}
.overlay-close:active{ transform: translateY(0) scale(.99); }


.overlay-content p{
  margin: 0 0 12px 0;
}
.overlay-mail{
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.45);
  text-underline-offset: 2px;
}
.overlay-mail:hover{
  text-decoration-color: rgba(255,255,255,.85);
}


/* Overlay typography refinement */
.overlay-panel{
  max-width: 460px;
}

.overlay-title{
  font-weight: 900;
  letter-spacing: .04em;
}

.overlay-content{
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  max-width: 42ch;
}

/* Calendar grid: hide unused right column */
.right{display:none}