:root { --ink:#101010; --paper:#f5f4ef; --line:#cbc9c1; --soft-line:#dedbd2; --day-line:#8f8d86; --acid:#e3ff43; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"Space Grotesk",Arial,sans-serif; } button,a,select { font:inherit; color:inherit; } button,select { cursor:pointer; } a { text-decoration:none; }
.site-header { height:72px; display:flex; align-items:center; gap:28px; padding:0 4vw; border-bottom:1px solid var(--ink); } .wordmark { font-size:24px; line-height:1; font-weight:600; letter-spacing:-.085em; } .site-header p { margin:0; font:12px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.03em; } .site-nav { margin-left:auto; display:flex; align-items:center; gap:16px; } .site-nav a { padding-bottom:3px; font:11px "DM Mono",monospace; text-transform:uppercase; } .site-nav a[aria-current] { border-bottom:1px solid var(--ink); } .auth-button { border:1px solid var(--ink); padding:8px 11px 7px; background:var(--ink); color:var(--paper); font:10px "DM Mono",monospace; letter-spacing:.04em; text-transform:uppercase; } .auth-button:hover { background:var(--acid); color:var(--ink); }
main { max-width:1280px; margin:auto; padding:0 4vw 180px; } .intro { padding:26px 0 18px; border-bottom:1px solid var(--ink); } .filters { display:flex; align-items:center; gap:28px; flex-wrap:wrap; } .filters label { position:relative; border-bottom:1px solid var(--ink); padding:0 0 8px; font:11px "DM Mono",monospace; } .filters select { appearance:none; border:0; background:transparent; padding:0 18px 0 8px; } .filters label::after { content:"↘"; position:absolute; right:6px; bottom:8px; pointer-events:none; } .location-button { border:0; border-bottom:1px solid var(--ink); padding:0 0 8px; background:transparent; font:11px "DM Mono",monospace; } .location-button:hover { color:#57554f; } .location-status { margin:15px 0 0; color:#686660; font:10px "DM Mono",monospace; }
.day { display:grid; grid-template-columns:125px 1fr; border-bottom:1px solid var(--day-line); } .day-stamp { padding:25px 0; font-family:"DM Mono",monospace; } .day-stamp span { display:block; font-size:11px; } .day-stamp strong { display:block; margin-top:4px; font-size:30px; font-weight:400; } .event-list { border-left:1px solid var(--line); } .event-row + .event-row { border-top:1px solid var(--soft-line); } .event-row:hover { background:var(--acid); box-shadow:inset 4px 0 0 var(--ink); } .meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:15px; padding:14px 18px 6px; color:#4c4a45; font:11px "DM Mono",monospace; } .venue-name { font-family:"Space Grotesk",Arial,sans-serif; font-size:17px; font-weight:600; letter-spacing:-.04em; color:var(--ink); } .distance { color:#77736d; font-size:10px; } .artist-stack { padding:10px 18px 22px; } .artist-line { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:baseline; gap:8px; } .artist-line + .artist-line { margin-top:7px; } .billing-label,.artist-style,.artist-location,.artist-separator,.artist-actions { font:10px "DM Mono",monospace; } .billing-label { text-transform:uppercase; } .event-info { min-width:0; border:0; padding:0; background:transparent; text-align:left; } .artist-name { display:inline; font-size:clamp(25px,3.2vw,48px); line-height:.95; font-weight:500; letter-spacing:-.07em; } .artist-style,.artist-location,.artist-separator { display:inline-block; margin-left:10px; } .artist-style { text-transform:lowercase; } .artist-separator { margin-left:8px; } .artist-actions { display:flex; flex-wrap:wrap; justify-content:end; gap:10px; white-space:nowrap; } .artist-actions button,.artist-actions a { border:0; border-bottom:1px solid var(--ink); padding:0 0 3px; background:transparent; font:10px "DM Mono",monospace; } .support-line .artist-name { font-size:18px; letter-spacing:-.045em; } .event-info:hover .artist-name { text-decoration:underline; }
.about-page { max-width:620px; padding:110px 0 0; } .about-page p { margin:0 0 18px; font-size:18px; line-height:1.5; letter-spacing:-.02em; } .about-page .about-lead { font-size:24px; line-height:1.15; font-weight:500; }
.location-dialog { width:min(460px,calc(100vw - 28px)); border:1px solid var(--ink); padding:clamp(26px,5vw,46px); background:var(--paper); box-shadow:12px 12px 0 var(--acid); } .location-dialog::backdrop { background:rgba(16,16,16,.7); backdrop-filter:blur(3px); } .eyebrow,.dialog-note { font:11px "DM Mono",monospace; } .location-dialog h2 { margin:16px 0 11px; font:400 clamp(54px,8vw,74px)/.76 "Instrument Serif",serif; letter-spacing:-.055em; } .location-dialog>p:not(.eyebrow):not(.dialog-note) { color:#57554f; line-height:1.35; } .close-dialog { position:absolute; top:11px; right:12px; border:0; background:transparent; font-size:27px; } .confirm-button { width:100%; margin-top:12px; border:1px solid var(--ink); padding:14px; background:var(--ink); color:var(--paper); font:11px "DM Mono",monospace; text-transform:uppercase; } .confirm-button:hover { background:var(--acid); color:var(--ink); } .dialog-note { color:#686660; font-size:9px; }
@media (max-width:700px) { .site-header { gap:12px; } .site-header p { display:none; } .filters { gap:16px; } .day { grid-template-columns:59px 1fr; } .day-stamp strong { font-size:17px; } .meta { padding:12px 12px 5px; } .meta span:nth-child(2) { display:none; } .artist-stack { padding:14px 12px; } .artist-line { grid-template-columns:30px minmax(0,1fr); padding-right:30px; position:relative; } .artist-location,.artist-separator,.artist-actions a { display:none; } .artist-actions { position:absolute; right:0; top:50%; transform:translateY(-50%); } .artist-actions button { width:22px; height:22px; border:1px solid var(--ink); border-radius:50%; font-size:0; } .artist-actions button::after { content:"▶"; font-size:9px; } .artist-name { font-size:30px; } .support-line .artist-name { font-size:18px; } }