:root { color-scheme:dark; --ink:#171c1e; --cream:#f8f3e8; --panel:#f5efe3; --red:#bd232b; --teal:#0b737c; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ink); color:var(--cream); font:16px/1.5 Arial,Helvetica,sans-serif; }
a { color:inherit; }
a:focus-visible, summary:focus-visible { outline:3px solid #67c9c8; outline-offset:4px; }
.wrap { width:min(1120px,calc(100% - 40px)); margin-inline:auto; }
.topbar { position:relative; z-index:2; background:#101516; border-bottom:1px solid #41494b; }
.topbar .wrap { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; width:184px; }
.brand img { display:block; width:100%; height:68px; object-fit:contain; }
nav { display:flex; align-items:center; gap:24px; font-size:.92rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
nav a:hover, nav summary:hover { color:#74d1d0; }
.vendor-menu { position:relative; }
.vendor-menu summary { display:inline-flex; align-items:center; gap:5px; min-height:44px; cursor:pointer; list-style:none; }
.vendor-menu summary::-webkit-details-marker { display:none; }
.vendor-menu summary::after { content:"⌄"; font-size:1.15em; line-height:1; margin-top:-5px; }
.vendor-options { position:absolute; right:0; top:100%; min-width:265px; padding:6px; background:#101516; border:1px solid #526163; box-shadow:0 12px 28px #0008; }
.vendor-options a { display:block; min-height:0; padding:12px; line-height:1.35; }
.vendor-options a:hover { background:#233034; }
.vendor-options small { display:block; margin-top:2px; color:#a9c0c0; font-size:.78rem; letter-spacing:.03em; }
.instagram-link { justify-content:center; width:44px; height:44px; }
.instagram-link svg { display:block; width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:2; }
.instagram-link .ig-dot { fill:currentColor; stroke:none; }
.back { display:inline-block; margin:30px 0 22px; color:#84d5d3; font-weight:700; text-decoration:none; }
.back:hover { text-decoration:underline; }
.event { display:grid; grid-template-columns:minmax(260px,.85fr) 1.6fr; background:var(--panel); color:#1b2224; border:1px solid #bfc6c2; margin-bottom:72px; }
.flyer-pane { display:flex; align-items:flex-start; justify-content:center; padding:24px; background:#dce2df; }
.flyer-pane img { display:block; width:100%; max-width:430px; height:auto; box-shadow:0 14px 30px #10151644; }
.details { padding:34px 38px 38px; }
.eyebrow { color:var(--red); font-weight:900; letter-spacing:.12em; text-transform:uppercase; margin:0 0 14px; }
h1 { font-size:clamp(2.2rem,4.5vw,4.1rem); line-height:1.02; letter-spacing:-.045em; text-transform:uppercase; margin:0 0 18px; }
.date { color:var(--red); font-size:1.15rem; font-weight:900; margin:0 0 24px; }
.venue { font-size:1.3rem; font-weight:800; margin:0 0 3px; }
.address { color:#536064; margin:0 0 24px; }
.facts { display:flex; flex-wrap:wrap; gap:9px; margin:0 0 24px; padding:0; list-style:none; }
.facts li { border:1px solid #acb8b5; padding:7px 11px; font-size:.89rem; font-weight:700; }
.note { color:#536064; margin:0 0 26px; }
.vendor-action { padding:20px 0 0; border-top:1px solid #b7c2bd; }
.vendor-action p { color:var(--teal); font-size:.86rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; margin:0 0 12px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.button { display:inline-block; padding:12px 18px; background:var(--red); color:#fff; text-decoration:none; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.button:hover { background:#a51b22; }
.button.secondary { color:#202a2d; background:transparent; border:1px solid #6c8585; }
.button.secondary:hover { background:#e1e9e6; }
footer { background:#0e1213; color:#b8c8c7; padding:26px 0; }
footer .wrap { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
@media(max-width:720px) {
  .topbar .wrap { min-height:70px; gap:12px; padding-block:7px; }
  .brand { width:145px; } .brand img { height:56px; }
  nav { margin-left:auto; flex-wrap:nowrap; justify-content:flex-end; gap:14px; font-size:.78rem; }
  .all-events { display:none; }
  .event { display:flex; flex-direction:column; }
  .flyer-pane { padding:15px; }
  .details { padding:26px 24px 30px; }
  .back { margin:20px 0 14px; }
}
@media(max-width:390px) { nav { gap:8px; font-size:.72rem; } .brand { width:118px; } }
@media(max-width:340px) { .brand { width:104px; } }