/* Live Hastings — "the town after dark" (2026-09-25).
   One bold thing: the town under the real sky, with a lit window for each
   venue playing tonight. Everything under it stays quiet and legible.
   Tokens first; the sky's own tokens are set per phase further down. */

:root{
  --bg:#f2f4f1; --panel:#ffffff; --chip:#e5e9e7; --chip-2:#d8dedb;
  --ink:#141a27; --ink-2:#4a5466; --ink-3:#6c7688;
  --line:#dce1de; --line-2:#c7cecb;
  --sea:#0f6b75; --sea-ink:#0a4f57; --sea-tint:#d6ebea;
  --lamp:#f5a524; --lamp-ink:#8a5200; --lamp-tint:#fdf0d6;
  --rose:#c8394a; --rose-tint:#fbe3e5;
  --hut:#c3cbd0; --hut-hi:#9aa6b0;
  --shadow:0 1px 2px rgba(20,26,39,.06),0 8px 30px rgba(20,26,39,.08);
  --r:14px; --gut:24px; --max:1120px;
  --font:'Bricolage Grotesque',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0c1220; --panel:#131b2c; --chip:#1b2436; --chip-2:#243049;
    --ink:#e9edf5; --ink-2:#a8b2c5; --ink-3:#7f8aa0;
    --line:#212b3f; --line-2:#2d3950;
    --sea:#6fd0d5; --sea-ink:#9ce3e6; --sea-tint:#12343a;
    --lamp:#ffb84d; --lamp-ink:#ffc873; --lamp-tint:#3a2a10;
    --rose:#ff7b88; --rose-tint:#3b1a20;
    --hut:#2a3550; --hut-hi:#3b4867;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 40px rgba(0,0,0,.35);
  }
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.5 var(--font);font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--sea);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--sea-ink)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sea);outline-offset:3px;border-radius:6px}
h1,h2,h3{margin:0;font-weight:700;line-height:1.1;text-wrap:balance}
p{margin:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--panel);
  color:var(--ink);padding:10px 16px;border-radius:10px}
.skip:focus{left:12px}
.ext{width:.72em;height:.72em;margin-left:.28em;vertical-align:.02em;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}

/* ================================================================ the sky */
@property --sky-1{syntax:'<color>';inherits:true;initial-value:#060b1f}
@property --sky-2{syntax:'<color>';inherits:true;initial-value:#101a3a}
@property --sky-3{syntax:'<color>';inherits:true;initial-value:#243157}
@property --hills{syntax:'<color>';inherits:true;initial-value:#141c38}
@property --land{syntax:'<color>';inherits:true;initial-value:#070b19}
@property --sea-top{syntax:'<color>';inherits:true;initial-value:#0d1734}
@property --sea-deep{syntax:'<color>';inherits:true;initial-value:#050914}

.sky{
  --sky-ink:#f4f2ff; --sky-ink-2:rgba(236,236,255,.74); --sky-chip:rgba(255,255,255,.14);
  --star:1; --glow:1; --lamp:#ffb84d;
  position:relative;isolation:isolate;overflow:hidden;color:var(--sky-ink);
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 58%,var(--sky-3) 100%);
  transition:--sky-1 4s,--sky-2 4s,--sky-3 4s,--hills 4s,--land 4s,--sea-top 4s,--sea-deep 4s;
}
.sky[data-phase=night]{--sky-1:#060b1f;--sky-2:#0f1938;--sky-3:#26325a;
  --hills:#131b36;--land:#060a17;--sea-top:#0c1631;--sea-deep:#050913}
.sky[data-phase=dawn]{--sky-1:#232a57;--sky-2:#6f5388;--sky-3:#eaa39a;
  --hills:#43365d;--land:#1d1934;--sea-top:#5e5078;--sea-deep:#1d1934;--star:.35}
.sky[data-phase=morning]{--sky-1:#6f93cc;--sky-2:#dcb7c1;--sky-3:#fbe0c4;
  --hills:#a893a6;--land:#4f4b68;--sea-top:#c9a7ad;--sea-deep:#5d6e97;
  --star:0;--glow:.55;--sky-ink:#161a33;--sky-ink-2:rgba(22,26,51,.72);
  --sky-chip:rgba(22,26,51,.08)}
.sky[data-phase=day]{--sky-1:#5f9bd6;--sky-2:#a3c9eb;--sky-3:#e2eef4;
  --hills:#9db1c3;--land:#566a83;--sea-top:#79a5c7;--sea-deep:#39688f;
  --star:0;--glow:.4;--sky-ink:#0f1a2c;--sky-ink-2:rgba(15,26,44,.72);
  --sky-chip:rgba(15,26,44,.08)}
.sky[data-phase=golden]{--sky-1:#4a67ad;--sky-2:#e0956a;--sky-3:#f8cd8a;
  --hills:#8a6679;--land:#352c4b;--sea-top:#c4856c;--sea-deep:#4a456d;
  --star:0;--glow:.75}
.sky[data-phase=dusk]{--sky-1:#171a45;--sky-2:#553a78;--sky-3:#de7859;
  --hills:#37284f;--land:#16112b;--sea-top:#433160;--sea-deep:#16122b;--star:.5}

.heavens{position:absolute;inset:0;z-index:-1;pointer-events:none}
.stars{position:absolute;inset:0;width:100%;height:100%;opacity:var(--star);
  transition:opacity 4s}
.stars circle{fill:#fff;animation:twinkle 5s ease-in-out infinite alternate;
  animation-delay:var(--t)}
@keyframes twinkle{from{opacity:.95}to{opacity:.35}}
.sun{position:absolute;width:64px;height:64px;border-radius:50%;
  left:var(--sun-x,70%);top:var(--sun-y,40%);translate:-50% -50%;opacity:0;
  background:radial-gradient(circle,#fff8e1 0 34%,rgba(255,222,150,.55) 36%,rgba(255,200,120,0) 70%);
  transition:opacity 3s,left 3s,top 3s}
.js .sky[data-phase=day] .sun,.js .sky[data-phase=golden] .sun,
.js .sky[data-phase=morning] .sun{opacity:1}
.moon{position:absolute;right:11%;top:20%;width:34px;height:34px;opacity:0;
  transition:opacity 4s;filter:drop-shadow(0 0 12px rgba(255,248,220,.35))}
.moon-dark{fill:rgba(255,255,255,.07)}
.moon-lit{fill:#f5f1dc}
.sky[data-phase=night] .moon{opacity:1}
.sky[data-phase=dusk] .moon,.sky[data-phase=dawn] .moon{opacity:.6}

/* ---- the bar: brand + nav ---- */
.bar{position:relative;z-index:5;max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;
  padding:18px var(--gut) 0;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--sky-ink);
  text-decoration:none;font-weight:750;font-size:21px;letter-spacing:-.01em;
  font-variation-settings:'wdth' 85}
.brand:hover{color:var(--sky-ink)}
.mark{width:26px;height:27px;fill:var(--lamp);overflow:visible}
.mark path{transform-box:fill-box;transform-origin:50% 100%}
.playing .brand .mark path{animation:level 1.1s ease-in-out infinite alternate}
.playing .brand .mark path:nth-child(2){animation-duration:.8s}
.playing .brand .mark path:nth-child(3){animation-duration:1.4s}
.playing .brand .mark path:nth-child(4){animation-duration:.95s}
@keyframes level{from{transform:scaleY(1)}to{transform:scaleY(.62)}}

.hubnav{position:relative}
.navline{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.hubnav a{color:var(--sky-ink);text-decoration:none;font-size:15px;font-weight:550;
  padding:6px 11px;border-radius:999px;white-space:nowrap;transition:background .2s}
.hubnav a:hover{background:var(--sky-chip)}
.hubnav a.here{background:var(--sky-chip);box-shadow:inset 0 0 0 1px var(--sky-chip)}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;font-size:15px;font-weight:600;
  padding:7px 14px;border-radius:999px;background:var(--sky-chip)}
.menu summary::-webkit-details-marker{display:none}
.menusheet{position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:230px;
  display:flex;flex-direction:column;padding:8px;border-radius:var(--r);
  background:var(--panel);box-shadow:var(--shadow)}
.menusheet a{color:var(--ink);padding:10px 12px;border-radius:10px}
.menusheet a.here,.menusheet a:hover{background:var(--chip)}

/* ---- headline ---- */
.headline{position:relative;z-index:4;max-width:calc(var(--max) + 2*var(--gut));
  margin:0 auto;padding:44px var(--gut) 0}
.title{font-size:clamp(38px,6.4vw,84px);font-weight:760;letter-spacing:-.025em;
  line-height:.95;font-variation-settings:'wdth' 78;max-width:14ch}
.dir .title{font-size:clamp(36px,5.4vw,66px)}
.lede{margin-top:16px;font-size:clamp(18px,2.1vw,23px);line-height:1.35;
  max-width:36ch;text-wrap:pretty}
.dir .lede{font-size:clamp(16px,1.7vw,19px);max-width:52ch;color:var(--sky-ink-2)}
.hubline{margin-top:14px;font-size:15px;line-height:1.45;color:var(--sky-ink-2);max-width:52ch}
.hubline strong{color:var(--sky-ink);font-weight:620}
.clock{margin-top:10px;font-size:14px;color:var(--sky-ink-2);
  font-variant-numeric:tabular-nums}

/* ---- the town ---- */
.townwrap{position:relative;margin-top:-2vw;
  background:linear-gradient(to top,var(--sea-deep) 0,var(--sea-top) 21.6%,transparent 21.7%)}
.town{display:block;width:100%;max-width:1760px;height:auto;margin:0 auto;overflow:visible}
.dir .townwrap{margin-top:-4vw}
.town .hills{fill:var(--hills)}
.town .slopes{fill:color-mix(in srgb,var(--hills) 45%,var(--land))}
.town .land{fill:var(--land)}
.town .pier{fill:color-mix(in srgb,var(--land) 70%,#000)}
.town .track{fill:none;stroke:var(--land);stroke-width:1.6}
.town .lamp{cursor:pointer}
.town .bulb{fill:var(--lamp);animation:flicker 6s ease-in-out infinite;animation-delay:var(--d)}
.town .halo{opacity:var(--glow)}
.town .bulb{stroke:rgba(255,246,220,.55);stroke-width:1.2}
.town .lamp:hover .bulb,.town .lamp:focus .bulb{fill:#fff3d6}
.town .shimmer{fill:var(--lamp);opacity:calc(var(--glow) * .38);
  transform-box:fill-box;transform-origin:50% 0;
  animation:shimmer 3.2s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes flicker{0%,100%{opacity:1}46%{opacity:1}50%{opacity:.78}54%{opacity:1}}
@keyframes shimmer{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
/* The one orchestrated moment: the town switches on, west to east. */
.js .sky:not(.lit) .lamp,.js .sky:not(.lit) .shimmer{opacity:0}
.js .sky.lit .lamp{animation:lampon .9s ease-out both;
  animation-delay:calc(var(--i) * 110ms + 150ms)}
@keyframes lampon{from{opacity:0}40%{opacity:1}55%{opacity:.4}to{opacity:1}}
.lampnote{position:absolute;right:max(var(--gut),calc((100% - 1760px)/2 + var(--gut)));
  bottom:10px;font-size:13px;color:rgba(255,255,255,.78);max-width:44ch;text-align:right}
.sky[data-phase=day] .lampnote,.sky[data-phase=morning] .lampnote{color:rgba(255,255,255,.92)}

/* ================================================================ finder */
.finder{position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s}
.finder.stuck{border-bottom-color:var(--line)}
.finder-in{max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;
  padding:14px var(--gut);display:flex;gap:10px;align-items:center}
.search{flex:1;min-width:0;position:relative;display:flex;align-items:center}
.search>svg{position:absolute;left:15px;width:19px;height:19px;fill:none;
  stroke:var(--ink-3);stroke-width:1.8;stroke-linecap:round;pointer-events:none}
#q{width:100%;min-width:0;height:48px;padding:0 44px 0 44px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink);
  font:500 17px var(--font);outline:none;transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none}
#q::placeholder{color:var(--ink-3);font-weight:400}
#q:focus{border-color:var(--sea);box-shadow:0 0 0 4px var(--sea-tint)}
#q::-webkit-search-cancel-button{-webkit-appearance:none}
.slash{position:absolute;right:14px;font:500 12px var(--font);color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:6px;padding:1px 7px}
#q:focus+.slash,#q:not(:placeholder-shown)+.slash{display:none}
.nojs .views,.nojs .savedbtn,.nojs .slash{display:none}
.views{display:flex;padding:4px;border-radius:999px;background:var(--chip);flex:none}
.views button{border:0;background:none;cursor:pointer;padding:8px 16px;border-radius:999px;
  font-size:15px;font-weight:600;color:var(--ink-2)}
.views button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.savedbtn{flex:none;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px;
  border-radius:999px;border:1px solid var(--line-2);background:var(--panel);cursor:pointer;
  font-size:15px;font-weight:600}
.savedbtn svg{width:18px;height:18px;fill:none;stroke:var(--ink-2);stroke-width:1.6;
  stroke-linejoin:round}
.savedbtn .count{min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--chip);font-size:13px;display:inline-grid;place-items:center}
.savedbtn.has svg{fill:var(--lamp);stroke:var(--lamp)}
.savedbtn.has .count{background:var(--lamp);color:#241500}
.savedbtn.bump .count{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{from{transform:scale(1.5)}to{transform:scale(1)}}

.reading{max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;padding:0 var(--gut);
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;color:var(--ink-2)}
.reading:not(:empty){padding-bottom:12px}
.reading .lead{margin-right:4px}
.reading .count{margin-left:6px;color:var(--ink-3)}
.pill{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;
  padding:5px 8px 5px 12px;border-radius:999px;background:var(--sea-tint);color:var(--sea-ink);
  font-size:14px;font-weight:600}
.pill i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c)}
.pill .x{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;line-height:1;background:color-mix(in srgb,currentColor 14%,transparent)}
.pill.text{background:var(--chip);color:var(--ink)}
.linkbtn{border:0;background:none;padding:4px 6px;color:var(--sea);cursor:pointer;
  font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---- the fortnight: a net hut per day ---- */
.fortnight{max-width:calc(var(--max) + 2*var(--gut));margin:6px auto 0;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px;align-items:end}
.hut{--hh:calc(10px + var(--h) * 78px);position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;height:136px;text-decoration:none;color:var(--ink-2);
  border-radius:8px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hut .roof{display:block;width:100%;max-width:34px;height:var(--hh);background:var(--hut);
  clip-path:polygon(0 12px,50% 0,100% 12px,100% 100%,0 100%);
  transition:background .2s,height .5s cubic-bezier(.2,.8,.2,1)}
.hut.zero .roof{--hh:10px;background:var(--chip-2)}
.hut .n{font-size:12px;font-weight:650;color:var(--ink-3);margin-bottom:4px;
  font-variant-numeric:tabular-nums}
.hut .d{margin-top:7px;font-size:12px;font-weight:600;line-height:1}
.hut .dd{font-size:12px;color:var(--ink-3);line-height:1.4;font-variant-numeric:tabular-nums}
.hut.weekend .d{color:var(--ink)}
.hut:hover .roof{background:var(--hut-hi)}
.hut.on .roof{background:var(--lamp)}
.hut.on .n,.hut.on .d{color:var(--ink)}
.hut:first-child .roof{background:color-mix(in srgb,var(--lamp) 55%,var(--hut))}
.hut:first-child.on .roof{background:var(--lamp)}

.suggest{max-width:calc(var(--max) + 2*var(--gut));margin:14px auto 0;padding:0 var(--gut);
  display:flex;flex-wrap:wrap;gap:6px}
.suggest:empty{display:none}
.suggest button{border:1px solid var(--line-2);background:transparent;cursor:pointer;
  padding:6px 12px;border-radius:999px;font-size:14px;font-weight:550;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:7px;transition:background .15s,border-color .15s}
.suggest button i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.suggest button:hover{border-color:var(--ink-3);color:var(--ink)}
.suggest button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* ================================================================ listings */
main{display:block}
#listings,.scene,.dirmain,.shared,#mapwrap{max-width:calc(var(--max) + 2*var(--gut));
  margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
section[data-sec]{padding-top:44px}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding-bottom:6px}
.sechead h2{font-size:clamp(32px,4vw,46px);font-weight:750;letter-spacing:-.02em;
  font-variation-settings:'wdth' 82;display:flex;align-items:center;gap:12px}
.sechead .meta{font-size:15px;color:var(--ink-2)}
.playing section[data-sec=tonight] .sechead h2::before{content:'';width:11px;height:11px;
  border-radius:50%;background:var(--lamp);box-shadow:0 0 0 0 var(--lamp);
  animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--lamp) 60%,transparent)}
  80%,100%{box-shadow:0 0 0 12px transparent}}
.grouphead{display:flex;align-items:center;gap:14px;margin:26px 0 2px;
  font-size:15px;font-weight:650;color:var(--ink-2);letter-spacing:.01em}
.grouphead::after{content:'';flex:1;height:1px;background:var(--line)}
.dayhead{margin:30px 0 4px;font-size:22px;font-weight:700;letter-spacing:-.01em}
.dayhead .dd{color:var(--ink-3);font-weight:500}
.empty{padding:22px 0;color:var(--ink-2);max-width:60ch}
.empty b{color:var(--ink)}

.gig{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:4px 22px;
  padding:16px 0;border-top:1px solid var(--line);position:relative;
  transition:opacity .3s}
.zoneblock>.gig:first-of-type,.dayrows>.gig:first-child{border-top-color:transparent}
.when{display:flex;flex-direction:column;gap:2px;padding-top:1px}
.when time{font-size:27px;font-weight:680;line-height:1;letter-spacing:-.01em;
  font-variation-settings:'wdth' 80;font-variant-numeric:tabular-nums}
.when time.tbc{font-size:19px;color:var(--ink-3)}
.when .date{font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:3px}
.gig.dated .when time{font-size:20px}
.soon{font-size:12.5px;font-weight:650;color:var(--lamp-ink);line-height:1.25;margin-top:4px}
.soon:empty{display:none}
.what{min-width:0}
.gig .t{font-size:20px;font-weight:620;line-height:1.25;letter-spacing:-.005em;
  text-wrap:pretty;overflow-wrap:anywhere}
.gig .t a{color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .25s}
.gig .t a:hover{background-size:100% 1px;color:var(--sea)}
.v{margin-top:3px;font-size:16px}
.v .venue{color:var(--ink);font-weight:560;text-decoration:none}
.v .venue:hover{color:var(--sea);text-decoration:underline}
.v .zone{color:var(--ink-3);margin-left:6px}
.tags{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:7px;font-size:14px;color:var(--ink-2)}
.tags a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2)}
.tags a:hover{color:var(--sea);text-decoration-color:currentColor}
.sound{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
.sound i{width:9px;height:9px;border-radius:50%;background:var(--c);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.sound.guessed{font-weight:500;color:var(--ink-2)}
.sound.guessed i{background:transparent;box-shadow:inset 0 0 0 2px var(--c)}
.note{margin-top:6px;font-size:14px;color:var(--lamp-ink)}
.src{margin-top:6px;font-size:13px;color:var(--ink-3)}
.act{display:flex;align-items:center;justify-content:flex-end;gap:12px;align-self:start}
.price{font-size:14px;font-weight:650;padding:3px 10px;border-radius:999px;
  background:var(--chip);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.price.free{background:var(--sea-tint);color:var(--sea-ink)}
.tix{font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none}
.tix:hover{text-decoration:underline}
.warn{font-size:13px;font-weight:650;padding:3px 10px;border-radius:999px;
  background:var(--lamp-tint);color:var(--lamp-ink);white-space:nowrap}
.cxltag{font-size:13px;font-weight:700;padding:4px 11px;border-radius:999px;
  background:var(--rose-tint);color:var(--rose)}
.gig.cxl .t{text-decoration:line-through;text-decoration-color:var(--rose);
  text-decoration-thickness:2px;color:var(--ink-2)}
.gig.cxl .when time{color:var(--ink-3)}
.gig.past{opacity:.5}
.gig.flash::before{content:'';position:absolute;inset:0 -16px;z-index:-1;
  background:var(--lamp-tint);border-radius:12px;animation:flash 2.6s ease-out forwards}
@keyframes flash{0%,40%{opacity:1}to{opacity:0}}

.save{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--panel);display:grid;place-items:center;cursor:pointer;padding:0;
  transition:border-color .2s,background .2s}
.save svg{width:19px;height:19px;fill:none;stroke:var(--ink-2);stroke-width:1.6;
  stroke-linejoin:round;transition:fill .2s,stroke .2s}
.save:hover{border-color:var(--lamp)}
.save:hover svg{stroke:var(--lamp-ink)}
.save[aria-pressed=true]{border-color:var(--lamp);background:var(--lamp-tint)}
.save[aria-pressed=true] svg{fill:var(--lamp);stroke:var(--lamp)}
.save.pop svg{animation:pop .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes pop{0%{transform:scale(.6) rotate(-20deg)}to{transform:scale(1) rotate(0)}}
.save-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.nojs .save{display:none}

/* ---- a gig opened up ---- */
.expand{position:absolute;inset:0;z-index:0;border:0;background:none;cursor:pointer;
  border-radius:12px;padding:0}
.expand:focus-visible{outline-offset:-2px}
.gig>div{position:relative;z-index:1}
.gig .when,.gig .what{pointer-events:none}
.gig .when a,.gig .what a,.gig .what button{pointer-events:auto}
.drawer{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:8px;padding-top:10px}
.drawer[hidden]{display:none}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);
  background:var(--panel);color:var(--ink);cursor:pointer;padding:8px 14px;
  border-radius:999px;font-size:14px;font-weight:600;text-decoration:none}
.btn:hover{border-color:var(--ink-3);color:var(--ink)}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.primary:hover{color:var(--bg);opacity:.9}
.btn.quiet{border-color:transparent;background:none;color:var(--ink-2)}
.gig.open{background:linear-gradient(var(--panel),var(--panel)) padding-box}
.gig.open::after{content:'';position:absolute;inset:0 -16px;z-index:-1;
  background:var(--panel);border-radius:16px;box-shadow:var(--shadow)}

details.more{margin-top:18px}
details.more>summary{list-style:none;cursor:pointer;display:inline-flex;padding:10px 18px;
  border-radius:999px;background:var(--chip);font-weight:600;font-size:15px}
details.more>summary::-webkit-details-marker{display:none}
details.more[open]>summary{margin-bottom:6px}

.nomatch{padding:60px 0 20px;text-align:center;color:var(--ink-2)}
.nomatch b{display:block;color:var(--ink);font-size:24px;font-weight:700;margin-bottom:6px}
.nomatch .btn{margin-top:16px}
.shared{margin-top:22px}
.shared[hidden]{display:none}
.shared-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:16px 18px;
  border-radius:var(--r);background:var(--lamp-tint);color:var(--ink)}
.shared-in p{flex:1;min-width:220px}

/* ================================================================ map */
#mapwrap{display:none;padding-top:28px;grid-template-columns:minmax(0,1fr) 340px;gap:24px}
.mapview #mapwrap{display:grid}
.mapview #listings{display:none}
#map{height:min(72vh,680px);border-radius:18px;overflow:hidden;background:var(--chip);
  position:relative;z-index:0;isolation:isolate}
.maplist{max-height:min(72vh,680px);overflow:auto;padding-right:4px}
.maphead{font-size:15px;color:var(--ink-2);padding-bottom:10px}
.mapfoot{font-size:13px;color:var(--ink-3);padding-top:12px}
.maprow{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;width:100%;
  text-align:left;border:0;border-top:1px solid var(--line);background:none;cursor:pointer;
  padding:12px 4px;border-radius:0}
.maprow:hover{background:var(--chip)}
.maprow .vn{display:block;font-weight:620;line-height:1.25}
.maprow .vz,.maprow .vm{display:block;font-size:14px;color:var(--ink-2)}
.pin{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--lamp);color:#241500;font:700 13px var(--font);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lamp) 35%,transparent),0 2px 6px rgba(0,0,0,.3)}
.pin.shop{background:var(--sea);color:#fff;box-shadow:0 0 0 3px var(--sea-tint)}
.leaflet-container{font:inherit;background:var(--chip)}
.leaflet-popup-content-wrapper{border-radius:14px;background:var(--panel);color:var(--ink);
  box-shadow:var(--shadow)}
.leaflet-popup-tip{background:var(--panel)}
.leaflet-popup-content{margin:14px 16px;font-size:14px;line-height:1.4}
.leaflet-popup-content .pv{font-weight:700;font-size:16px}
.leaflet-popup-content .pz{color:var(--ink-2);margin-bottom:6px}
.leaflet-popup-content ul{list-style:none;margin:0;padding:0}
.leaflet-popup-content li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;
  padding:5px 0;border-top:1px solid var(--line)}
.leaflet-popup-content .pwhen{display:flex;flex-direction:column;color:var(--ink-2);font-size:13px}
.leaflet-popup-content .pwhen .tm{font-weight:700;color:var(--ink)}
.leaflet-top,.leaflet-bottom{z-index:800}
@media (prefers-color-scheme:dark){
  .leaflet-tile-pane{filter:invert(1) hue-rotate(185deg) brightness(.82) contrast(.92) saturate(.5)}
}

/* ================================================================ the scene */
.scene{padding-top:72px}
.scene>h2{font-size:clamp(28px,3.4vw,38px);font-weight:750;letter-spacing:-.02em;
  font-variation-settings:'wdth' 82;margin-bottom:10px}
.hubcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px}
.hubcard{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:12px;align-items:baseline;padding:18px 0 20px;border-top:1px solid var(--line);
  color:var(--ink);text-decoration:none}
.hubcard b{grid-row:1;font-size:30px;font-weight:720;font-variation-settings:'wdth' 80;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.hubcard b.nil{display:none}
.hubcard .t{font-size:18px;font-weight:650}
.hubcard .d{grid-column:1/-1;margin-top:6px;font-size:15px;color:var(--ink-2);line-height:1.4}
.hubcard:hover .t{color:var(--sea)}
.submitline{margin-top:22px;color:var(--ink-2)}

/* ================================================================ saved */
#tray{width:min(460px,100vw);max-height:none;height:100dvh;margin:0 0 0 auto;padding:0;border:0;
  background:var(--panel);color:var(--ink);box-shadow:var(--shadow);
  display:flex;flex-direction:column}
#tray:not([open]){display:none}
#tray::backdrop{background:rgba(8,12,22,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#tray[open]{animation:slidein .35s cubic-bezier(.2,.8,.2,1)}
@keyframes slidein{from{transform:translateX(40px);opacity:0}}
.tray-head{display:flex;align-items:baseline;gap:12px;padding:22px 22px 12px}
.tray-head h2{font-size:28px;font-weight:750;font-variation-settings:'wdth' 82}
.tray-head .sum{flex:1;color:var(--ink-2);font-size:14px}
.close{border:0;background:var(--chip);width:36px;height:36px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;align-self:center}
.close svg{width:14px;height:14px;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}
.stops{flex:1;overflow:auto;padding:4px 22px 12px}
.stop{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:12px;align-items:start;
  padding:12px 0}
.stop .tm{font-size:20px;font-weight:700;font-variation-settings:'wdth' 80;
  font-variant-numeric:tabular-nums}
.stop .dy{display:block;font-size:12px;color:var(--ink-3);font-weight:600}
.stop .st{font-weight:620;line-height:1.3}
.stop .sv{display:block;font-size:14px;color:var(--ink-2);font-weight:400}
.stop .rm{border:0;background:none;cursor:pointer;color:var(--ink-3);font-size:14px;padding:4px 6px;
  border-radius:8px}
.stop .rm:hover{background:var(--chip);color:var(--ink)}
.leg{display:flex;align-items:center;gap:10px;padding:2px 0 2px 26px;font-size:13px;color:var(--ink-2)}
.leg::before{content:'';width:2px;height:26px;background:repeating-linear-gradient(var(--line-2) 0 4px,transparent 4px 8px)}
.leg.day{padding:14px 0 6px;font-weight:650;color:var(--ink)}
.leg.clash{color:var(--lamp-ink);font-weight:600}
.leg.clash::before{background:repeating-linear-gradient(var(--lamp) 0 4px,transparent 4px 8px)}
.leg.day::before{display:none}
.tray-empty{padding:30px 0;color:var(--ink-2)}
.tray-empty svg{width:18px;height:18px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.6}
.tray-actions{display:flex;flex-wrap:wrap;gap:8px;padding:14px 22px;border-top:1px solid var(--line)}
.tray-note{padding:0 22px 22px;font-size:13px;color:var(--ink-3)}
.toast{position:fixed;left:50%;bottom:28px;z-index:1000;translate:-50% 0;padding:11px 18px;
  border-radius:999px;background:var(--ink);color:var(--bg);font-size:15px;font-weight:600;
  box-shadow:var(--shadow);animation:toast 2.4s ease forwards;pointer-events:none}
@keyframes toast{0%{opacity:0;transform:translateY(10px)}10%,80%{opacity:1;transform:none}to{opacity:0}}

/* ================================================================ footer */
.foot{margin-top:96px;background:#0a101d;color:#c9d1e0;
  padding:48px var(--gut) calc(40px + env(safe-area-inset-bottom))}
.foot>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.foot a{color:#e9edf5}
.foot-say{display:flex;gap:16px;align-items:flex-start}
.foot-say p{max-width:64ch;font-size:16px;line-height:1.55}
.foot-say strong{color:#fff}
.mark.small{flex:none;width:30px;height:31px;fill:#ffb84d;margin-top:2px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:28px;font-weight:600}
.foot-links a{text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.foot-small{margin-top:24px;font-size:13px;color:#8e98ad}
.foot-small a{color:#c9d1e0}

/* ================================================================ directory pages */
.dirmain{padding-top:36px}
.dirhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;padding-bottom:10px}
.dirhead h2{font-size:clamp(28px,3.4vw,38px);font-weight:750;letter-spacing:-.02em;
  font-variation-settings:'wdth' 82}
.dirhead .note{font-size:15px;color:var(--ink-2);max-width:70ch}
.zoneblock{margin-top:8px}
.dirmain .grouphead{font-size:22px;color:var(--ink);font-weight:700;margin-top:40px;
  letter-spacing:-.01em}
.dirent{padding:20px 0;border-top:1px solid var(--line);scroll-margin-top:24px}
.grouphead+.dirent{border-top-color:transparent}
.dirent:target{background:var(--lamp-tint);border-radius:12px;padding-left:14px;padding-right:14px;
  margin:0 -14px}
.dirent h3{font-size:22px;font-weight:660;letter-spacing:-.01em;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px 12px}
.dirent h3 a{color:var(--ink);text-decoration:none}
.dirent h3 a:hover{color:var(--sea)}
.dirent .meta{margin-top:4px;color:var(--ink-2);font-size:15px}
.dirent .cover{margin-top:6px;color:var(--ink-3);font-size:14px}
.dirent .cover a{color:var(--ink-2)}
.dirent .observed,.dirent .selfdesc,.dirent .pastline,.dirent .detail{margin-top:8px;
  font-size:15px;color:var(--ink-2);max-width:74ch}
.dirent .observed b,.dirent .selfdesc b,.dirent .pastline b{color:var(--ink);font-weight:620}
.dirent ul{list-style:none;margin:12px 0 0;padding:0}
.dirent li{display:grid;grid-template-columns:128px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:8px 0;border-top:1px dashed var(--line)}
.dirent li .dt{font-size:14px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.dirent li a{color:var(--ink);font-weight:560;text-decoration:none}
.dirent li a:hover{color:var(--sea);text-decoration:underline}
.dirent li .meta{display:inline;font-size:14px}
.dirent li .meta a{font-weight:500;color:var(--ink-2)}
.dirent li .save{width:34px;height:34px}
.dirent .more,.dirent .none{margin-top:10px;font-size:14px;color:var(--ink-3)}
.dirent .linksline{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dirent .linksline a{padding:5px 12px;border-radius:999px;background:var(--chip);color:var(--ink);
  font-size:14px;font-weight:600;text-decoration:none}
.dirent .linksline a:hover{background:var(--chip-2)}
.hubtag{font-size:13px;font-weight:650;padding:3px 10px;border-radius:999px;
  background:var(--lamp-tint);color:var(--lamp-ink);letter-spacing:0}
.hubtag.quiet{background:var(--chip);color:var(--ink-2)}
.soonstrip{margin:10px 0 18px;padding:18px 18px 16px;border-radius:var(--r);background:var(--panel);
  box-shadow:var(--shadow);font-size:15px}
.soonstrip b{display:block;margin-bottom:10px}
.soonstrip .chips{display:flex;flex-wrap:wrap;gap:6px}
.soonstrip a{padding:4px 11px;border-radius:999px;background:var(--chip);color:var(--ink);
  font-size:14px;font-weight:550;text-decoration:none;transition:background .15s}
.soonstrip a:hover{background:var(--sea-tint);color:var(--sea-ink)}
.corrections{margin-top:10px;font-size:14px;color:var(--ink-3)}
.dirmain>.cover,.zoneblock>.cover{margin:10px 0;color:var(--ink-3);font-size:14px}
.dirmain .empty{padding:30px 0}
#dirmap{height:420px;border-radius:18px;overflow:hidden;margin:10px 0 8px;position:relative;
  z-index:0;isolation:isolate;background:var(--chip)}
.dirmaplegend{font-size:13px;color:var(--ink-3);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.key{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--lamp)}
.key.shop{background:var(--sea);margin-left:8px}
.notice{padding:20px 22px;margin-top:14px;border-radius:var(--r);background:var(--panel);
  box-shadow:var(--shadow)}
.notice h3{font-size:20px;font-weight:660}
.notice .detail{margin-top:6px;color:var(--ink-2)}
.notice .meta{margin-top:8px;font-size:14px;color:var(--ink-3)}
.dirmain .gig{grid-template-columns:96px minmax(0,1fr) auto}

/* ================================================================ narrow */
@media (max-width:1080px){
  .navline{display:none}
  .menu{display:block}
  .hubcards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  #mapwrap{grid-template-columns:1fr}
  .maplist{max-height:none}
  #map{height:58vh}
}
@media (max-width:640px){
  :root{--gut:16px}
  body{font-size:16px}
  .headline{padding-top:30px}
  .lampnote{position:static;display:block;max-width:none;text-align:left;font-size:12px;
    padding:6px var(--gut) 8px;background:var(--sea-deep)}
  .townwrap{margin-top:8px}
  .finder-in{padding:10px var(--gut);gap:8px;flex-wrap:wrap}
  .search{flex:1 1 100%;order:1}
  .views{order:2;flex:1}
  .views button{flex:1}
  .savedbtn{order:3}
  #q{height:46px;font-size:16px}
  .slash{display:none}
  .fortnight{gap:3px}
  .suggest{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;
    -webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent)}
  .suggest::-webkit-scrollbar{display:none}
  .suggest button{flex:none}
  .views button{padding:7px 12px}
  .savedbtn,.views{height:42px}
  .hut{--hh:calc(8px + var(--h) * 54px);height:104px}
  .hut .n{font-size:11px}
  .hut .d{font-size:10.5px}
  .hut .dd{font-size:11px}
  .gig{grid-template-columns:58px minmax(0,1fr);gap:4px 14px}
  .when time{font-size:21px}
  .gig.dated .when time{font-size:17px}
  .when .date{font-size:12px}
  .gig .t{font-size:18px}
  .act{grid-column:2;flex-wrap:wrap;justify-content:flex-start;gap:8px 12px;padding-top:8px}
  .act .save{margin-left:auto}
  .drawer{grid-column:1/-1}
  .gig.open::after,.gig.flash::before{inset:0 -10px}
  .hubcards{grid-template-columns:1fr}
  .dirent li{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}
  .dirent li .dt{grid-column:1/-1}
  .dirmain .gig{grid-template-columns:70px minmax(0,1fr)}
  #tray{width:100vw;height:auto;max-height:88dvh;margin:auto 0 0;border-radius:20px 20px 0 0}
  #tray[open]{animation:slideup .35s cubic-bezier(.2,.8,.2,1)}
  @keyframes slideup{from{transform:translateY(40px);opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .sky:not(.lit) .lamp,.js .sky:not(.lit) .shimmer{opacity:1}
}
@media print{
  .sky .heavens,.town,.finder,.fortnight,.suggest,.save,#tray,.foot-links{display:none}
  .sky{background:none;color:#000}
}