:root {
  color-scheme: dark;
  --yellow:#f4d000;
  --yellow-soft:#8c7700;
  --bg:#080808;
  --panel:#141414;
  --panel-raised:#1c1c1c;
  --line:#343434;
  --text:#f5f5f2;
  --muted:#aaa;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
* { box-sizing:border-box }
html { background:var(--bg) }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 80% 0,#292300 0,transparent 28rem),var(--bg) }
button,a { font:inherit }
button { color:inherit }
header { height:74px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 max(20px,calc((100vw - 1240px)/2)); border-bottom:1px solid #282828; background:#080808e8; backdrop-filter:blur(12px); position:sticky; top:0; z-index:20 }
.brand { display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; text-transform:uppercase; letter-spacing:.06em }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border:2px solid var(--yellow); border-radius:50%; color:var(--yellow); font-weight:900 }
.brand strong,.brand small { display:block }.brand small { margin-top:2px; color:var(--muted); font-size:10px; letter-spacing:.16em }
.club-link { color:var(--yellow); text-decoration:none; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em }
main { width:min(1240px,100%); margin:auto; padding:clamp(28px,5vw,70px) 20px 60px }
.hero { max-width:760px; margin-bottom:18px }
.eyebrow { margin:0 0 8px; color:var(--yellow); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.18em }
.calendar-card { overflow:hidden; border:1px solid var(--line); border-top:4px solid var(--yellow); border-radius:2px; background:var(--panel); box-shadow:0 24px 80px #0009 }
.toolbar { display:grid; grid-template-columns:44px minmax(0,1fr) 44px auto; gap:10px; align-items:center; min-height:80px; padding:14px 18px; border-bottom:1px solid var(--line) }
.toolbar h2 { margin:0; text-align:center; font-size:clamp(22px,3vw,31px); text-transform:uppercase; letter-spacing:.03em }
.icon-button,.today-button,.dialog-close { border:1px solid #454545; background:#222; cursor:pointer }
.icon-button { width:44px; height:44px; border-radius:50%; font-size:30px; line-height:1 }.icon-button:hover,.today-button:hover { border-color:var(--yellow); color:var(--yellow) }
.today-button { min-height:42px; padding:0 17px; border-radius:21px; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em }
.status { padding:12px 18px; color:var(--muted); border-bottom:1px solid var(--line) }.status:empty { display:none }.status.error { color:#ff9b92 }
.calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--line) }
.dow { padding:11px 4px; background:#0d0d0d; color:#999; text-align:center; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.12em }
.week { grid-column:1/-1; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; position:relative; background:var(--line) }
.day { min-height:116px; padding:9px; background:#111; color:#ddd }.day.out { color:#555; background:#0c0c0c }.day.today { box-shadow:inset 0 0 0 2px var(--yellow) }.day-number { display:grid; place-items:center; width:28px; height:28px; font-weight:750 }.day.today .day-number { border-radius:50%; background:var(--yellow); color:#0a0a0a }
.event-bar { position:absolute; z-index:2; left:calc(var(--start)*100%/7 + 3px); top:calc(41px + var(--slot)*27px); width:calc(var(--span)*100%/7 - 6px); height:23px; overflow:hidden; padding:3px 8px; border:0; border-left:3px solid #fff7a3; border-radius:5px; background:var(--yellow); color:#101010; text-align:left; font-size:12px; font-weight:850; white-space:nowrap; text-overflow:ellipsis; cursor:pointer }
.event-bar:hover { filter:brightness(1.12) }.event-bar.before { border-top-left-radius:0; border-bottom-left-radius:0; border-left-width:0 }.event-bar.after { border-top-right-radius:0; border-bottom-right-radius:0 }
.agenda-section { margin-top:54px }.section-heading h2 { margin:0 0 22px; font-size:clamp(28px,4vw,45px); text-transform:uppercase }
.agenda { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
.agenda-item { display:grid; grid-template-columns:62px minmax(0,1fr); gap:16px; min-height:116px; padding:18px; border:1px solid var(--line); border-left:4px solid var(--yellow); border-radius:2px; background:var(--panel); color:var(--text); text-align:left; cursor:pointer }
.agenda-item:hover { background:var(--panel-raised); border-color:var(--yellow) }.agenda-date { color:var(--yellow); text-align:center; text-transform:uppercase }.agenda-date strong { display:block; font-size:29px; line-height:1 }.agenda-date span { display:block; margin-top:5px; font-size:11px; font-weight:850; letter-spacing:.08em }.agenda-copy strong { display:block; font-size:17px }.agenda-copy span { display:block; margin-top:7px; color:var(--muted); font-size:13px; line-height:1.4 }.empty { grid-column:1/-1; padding:28px; border:1px dashed #444; color:var(--muted); text-align:center }
dialog { width:min(640px,calc(100% - 28px)); max-height:calc(100dvh - 28px); padding:28px; border:2px solid var(--yellow); border-radius:3px; background:#111; color:var(--text); box-shadow:0 25px 100px #000; overflow:auto }dialog::backdrop { background:#000c; backdrop-filter:blur(3px) }dialog h2 { margin:0 42px 22px 0; font-size:clamp(27px,5vw,42px); line-height:1.05 }.dialog-close { position:absolute; top:15px; right:15px; width:38px; height:38px; border-radius:50%; font-size:25px }.flyer { display:block; width:100%; max-height:440px; margin:0 0 22px; object-fit:contain; background:#080808 }dl { margin:0 }dl div { display:grid; grid-template-columns:74px 1fr; gap:12px; padding:11px 0; border-top:1px solid var(--line) }dt { color:var(--yellow); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.1em }dd { margin:0; line-height:1.45 }.description { white-space:pre-wrap; color:#ccc; line-height:1.6 }.primary-button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; margin-top:8px; padding:0 18px; background:var(--yellow); color:#090909; text-decoration:none; font-weight:900; text-transform:uppercase; letter-spacing:.06em }.primary-button[hidden] { display:none }
footer { padding:28px 20px calc(28px + env(safe-area-inset-bottom)); border-top:1px solid #242424; color:#777; text-align:center; font-size:12px; text-transform:uppercase; letter-spacing:.12em }
@media (max-width:820px) { .agenda { grid-template-columns:repeat(2,minmax(0,1fr)) }.day { min-height:96px; padding:6px }.event-bar { top:calc(35px + var(--slot)*24px); height:21px; padding:3px 5px; font-size:10px }.day-number { width:24px; height:24px; font-size:13px } }
@media (max-width:570px) { header { height:64px; padding:0 14px }.brand-mark { width:36px; height:36px;font-size:13px }.brand strong { font-size:13px }.club-link { display:none }main { padding:30px 8px 42px }.hero { padding:0 10px; margin-bottom:14px }.toolbar { grid-template-columns:40px minmax(0,1fr) 40px; min-height:67px; padding:10px 8px }.toolbar h2 { font-size:20px }.icon-button { width:40px; height:40px }.today-button { grid-column:1/-1; justify-self:center; min-height:32px; margin-top:-3px }.dow { padding:9px 1px; font-size:9px; letter-spacing:.04em }.day { min-height:82px; padding:4px }.event-bar { top:calc(29px + var(--slot)*20px); height:18px; padding:2px 4px; border-left-width:2px; font-size:9px }.agenda-section { padding:0 8px; margin-top:38px }.agenda { grid-template-columns:1fr }.agenda-item { min-height:98px; padding:14px }.calendar-card { border-left:0; border-right:0 }dialog { padding:22px 18px } }
