@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Oswald:wght@400;500;600&family=Playfair+Display:wght@600;700&display=swap');
/* LOCAL EVENTS — STEAMPUNK INSTRUMENT PANEL (PROJECT_SPEC.md section 46).
   Charcoal, brass, copper, emerald lamplight, riveted plates, working gauges,
   gearwork and blueprint texture. Readability stays first; the owner lifted the
   performance constraint, so motion is generous but always reduced-motion safe. */

/* --- 1. Tokens ---
   Type sizes live in the --fs-* scale below. Oswald is condensed and reads
   smaller than DM Sans at the same pixel size, so plate labels sit a step
   above where a normal sans would. Nudge the whole interface from here. */
:root{color-scheme:dark;
  --fs-micro:11px;--fs-label:12.5px;--fs-small:13.5px;--fs-body:15px;--fs-lead:16px;
  --bg:#15120f;--bg-deep:#0e0c0a;--panel:#1e1a15;--panel2:#26211a;--panel3:#2e2820;--line:#3a3025;--line-soft:#2b241c;
  --brass:#e0bd72;--brass-mid:#c49a4a;--brass-deep:#8a6d2f;--brass-dark:#5d4a22;
  --copper:#c87941;--copper-deep:#8d4f24;
  --lamp:#3ad4a8;--lamp-dim:#1f9e7e;--lamp-glow:#3ad4a840;
  --text:#f4ead6;--text-2:#ded1b8;--muted:#b3a68f;--ink:#17130e;
  --display:'Playfair Display',Georgia,serif;--plate:'Oswald','DM Sans',sans-serif;--body:'DM Sans',system-ui,sans-serif;
  --brushed:repeating-linear-gradient(115deg,#ffffff06 0 1px,transparent 1px 3px,#00000010 3px 4px,transparent 4px 7px);
  --bezel:inset 0 1px 0 #ffffff14,inset 0 -1px 0 #00000070,inset 1px 0 0 #ffffff08,inset -1px 0 0 #00000040;
  --rivet:radial-gradient(circle at center,#f6e3b0 0 18%,#c9a75c 26% 48%,#7c6029 56% 80%,#00000055 84% 96%,transparent 97%);
  --ease:cubic-bezier(.2,.8,.2,1)}

/* --- 2. Base --- */
*{box-sizing:border-box}
body{margin:0;color:var(--text);font:var(--fs-body)/1.6 var(--body);background:linear-gradient(#ffffff05 1px,transparent 1px) 0 0/46px 46px,linear-gradient(90deg,#ffffff05 1px,transparent 1px) 0 0/46px 46px,linear-gradient(#ffffff03 1px,transparent 1px) 0 0/11.5px 11.5px,var(--bg);background-attachment:fixed}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* Drifting lamp and forge light, behind everything */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 60% 42% at 88% -4%,#3ad4a814,transparent 62%),radial-gradient(ellipse 52% 38% at 4% 2%,#c49a4a14,transparent 62%),radial-gradient(ellipse 70% 50% at 50% 108%,#8d4f2410,transparent 65%);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{opacity:.75;transform:translate3d(0,0,0) scale(1)}to{opacity:1;transform:translate3d(-2%,1.5%,0) scale(1.06)}}
button,input,select{font:inherit}
button,a,input,select{touch-action:manipulation}
button{cursor:pointer;color:inherit;border:0;background:none}
button:disabled{opacity:.5;cursor:not-allowed}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--lamp);outline-offset:3px;border-radius:3px}
::selection{background:var(--brass);color:var(--ink)}
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:#100e0b}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--brass-deep),var(--brass-dark));border:3px solid #100e0b;border-radius:7px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--brass),var(--brass-mid))}
.brass{color:var(--brass)}
.eyebrow{font:500 var(--fs-label)/1.7 var(--plate);letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
h1{font:700 clamp(32px,3.2vw,48px)/1.14 var(--display);letter-spacing:-.5px;margin:14px 0 12px}
h1 span{color:var(--brass);display:inline-block;animation:sparkle 4.5s ease-in-out infinite}
@keyframes sparkle{0%,92%,100%{text-shadow:0 0 0 transparent}96%{text-shadow:0 0 16px var(--brass)}}
h2{font:600 24px/1.25 var(--display);letter-spacing:-.2px;margin:0}
h3{font:600 19px/1.35 var(--display);margin:28px 0 14px}

/* --- 3. Gearwork --- */
.gear{position:absolute;pointer-events:none;color:var(--brass-deep);animation:turn 90s linear infinite;opacity:.22}
.gear.reverse{animation-direction:reverse}
@keyframes turn{to{transform:rotate(360deg)}}
.gear-a{right:296px;top:-48px;width:132px;height:132px}
.gear-b{right:238px;top:38px;width:66px;height:66px;opacity:.3;animation-duration:54s}
.gear-side{left:-54px;bottom:26px;width:130px;height:130px;opacity:.13}
.gear-intro{left:-34px;bottom:-60px;width:154px;height:154px;opacity:.17}
.gear-intro2{left:78px;bottom:24px;width:62px;height:62px;opacity:.13;animation-duration:52s}
.gear-section{right:-38px;top:16px;width:126px;height:126px;opacity:.12}
.gear-foot{right:-22px;top:-16px;width:64px;height:64px;opacity:.16;animation-duration:60s}
.gear-map{right:-26px;bottom:-26px;width:96px;height:96px;opacity:.16;animation-duration:70s}

/* --- 4. Masthead --- */
.masthead{position:relative;height:98px;display:flex;align-items:center;gap:30px;padding:0 36px;overflow:hidden;background:var(--brushed),linear-gradient(180deg,#2b2419 0%,#1d1812 60%,#171309 100%);border-bottom:1px solid var(--brass-dark);box-shadow:0 1px 0 #ffffff10 inset,0 6px 22px #00000070}
.masthead::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--brass-dark),var(--brass) 18%,var(--brass-deep) 50%,var(--brass) 82%,var(--brass-dark));box-shadow:0 0 10px #c49a4a30;background-size:200% 100%;animation:rail 14s linear infinite}
@keyframes rail{to{background-position:200% 0}}
.brand{display:flex;align-items:center;gap:14px;font:600 22px var(--plate);letter-spacing:3px;text-transform:uppercase;position:relative;z-index:1}
.brand small{display:block;font:400 10px var(--plate);letter-spacing:2.4px;color:var(--brass-mid);margin-top:6px}
.brand-mark{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:25px;color:var(--brass);background:radial-gradient(circle,#1a1610 0 58%,transparent 59%),conic-gradient(from 210deg,var(--brass-deep),var(--brass) 20%,#6d5526 44%,var(--brass) 68%,var(--brass-deep) 88%,var(--brass-dark));box-shadow:inset 0 0 0 1px #00000090,0 0 14px #c49a4a26,0 2px 4px #00000080;text-shadow:0 0 12px #e0bd7255;transition:box-shadow .4s,transform .5s var(--ease)}
.brand:hover .brand-mark{transform:rotate(120deg);box-shadow:inset 0 0 0 1px #00000090,0 0 26px #c49a4a55,0 2px 4px #00000080}
.location{margin-left:auto;display:flex;align-items:center;gap:11px;font-size:var(--fs-small);color:var(--text-2);position:relative;z-index:1}
.signal{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lamp);box-shadow:0 0 9px var(--lamp),0 0 3px #fff6;animation:lamp 3.2s ease-in-out infinite}
@keyframes lamp{0%,100%{opacity:1;box-shadow:0 0 12px var(--lamp),0 0 4px #fff8}50%{opacity:.4;box-shadow:0 0 4px var(--lamp-dim)}}
.state-label{font:500 var(--fs-micro) var(--plate);letter-spacing:1.8px;color:var(--brass);padding:7px 11px;border:1px solid var(--brass-dark);border-radius:2px;background:linear-gradient(180deg,#ffffff0a,transparent);box-shadow:var(--bezel)}

/* --- 5. Buttons --- */
.quiet-button{position:relative;overflow:hidden;font:500 var(--fs-small) var(--plate);letter-spacing:1.1px;text-transform:uppercase;color:var(--brass);padding:11px 16px;border:1px solid var(--brass-dark);border-radius:4px;background:linear-gradient(180deg,var(--panel3),var(--panel));box-shadow:var(--bezel);transition:border-color .22s,color .22s,box-shadow .22s,transform .12s}
.quiet-button::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 34%,#ffe9b830 48%,transparent 62%);translate:-130% 0;transition:translate .7s var(--ease)}
.quiet-button:hover:not(:disabled){border-color:var(--brass);color:var(--text);box-shadow:var(--bezel),0 0 16px #c49a4a33}
.quiet-button:hover:not(:disabled)::after{translate:130% 0}
.quiet-button:active:not(:disabled){transform:translateY(1px)}
.quiet-button b{font-weight:500;margin-left:9px;padding:2px 7px;border-radius:2px;color:var(--ink);background:var(--brass)}

/* --- 6. Layout --- */
.workspace{display:grid;grid-template-columns:266px minmax(0,1fr);max-width:1800px;margin:auto}
.sidebar,.search,.toolbar{min-width:0}

/* --- 7. Sidebar --- */
.sidebar{position:relative;overflow:hidden;padding:30px 22px 28px;min-height:calc(100vh - 98px);border-right:1px solid var(--line);background:linear-gradient(180deg,#1c1813,#17130f);box-shadow:inset -1px 0 0 #00000060}
.sidebar nav{margin:18px -6px 0;display:grid;gap:4px;position:relative;z-index:1}
.sidebar nav button{position:relative;display:flex;align-items:center;gap:13px;text-align:left;padding:13px 14px;font:400 var(--fs-lead) var(--plate);letter-spacing:.6px;color:var(--text-2);border:1px solid transparent;border-radius:4px;transition:background .22s,color .22s,border-color .22s,padding-left .22s var(--ease)}
.sidebar nav button span{width:19px;font-size:18px;color:var(--brass-mid);transition:color .22s,transform .35s var(--ease)}
.sidebar nav button:hover{background:#ffffff08;color:var(--text);padding-left:19px}
.sidebar nav button:hover span{color:var(--brass);transform:rotate(-14deg) scale(1.12)}
.sidebar nav button.active{color:var(--text);background:linear-gradient(90deg,#3ad4a81c,transparent 70%),var(--panel2);border-color:var(--line);box-shadow:inset 3px 0 0 var(--lamp),0 0 18px #3ad4a814}
.sidebar nav button.active span{color:var(--lamp)}
.sidebar nav small{margin-left:auto;font-size:var(--fs-micro);color:var(--brass-deep)}
.sidebar-rule{position:relative;height:1px;margin:26px 0;background:linear-gradient(90deg,transparent,var(--brass-dark) 20%,var(--brass-deep) 50%,var(--brass-dark) 80%,transparent)}
.sidebar-rule::after{content:'';position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--brass);box-shadow:0 0 6px #c49a4a60;animation:lamp 6s ease-in-out infinite}
.filter-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative;z-index:1}
.filter-heading button{font:500 var(--fs-micro) var(--plate);letter-spacing:1.4px;text-transform:uppercase;color:var(--copper);padding:0;transition:color .2s}
.filter-heading button:hover{color:var(--brass)}
.field-label{display:block;font:400 var(--fs-label) var(--plate);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:20px 0 8px;position:relative;z-index:1}
.field-label span{display:none}
.sidebar select,.sidebar input,.search,.finds-filters select,.finds-filters input{position:relative;z-index:1;border:1px solid var(--line);background:linear-gradient(180deg,#100e0b,#191510);border-radius:4px;color:var(--text);padding:11px 10px;width:100%;font-size:var(--fs-small);box-shadow:inset 0 2px 5px #00000080;transition:border-color .22s,box-shadow .22s}
.sidebar select:hover,.finds-filters select:hover{border-color:var(--brass-deep);box-shadow:inset 0 2px 5px #00000080,0 0 10px #c49a4a1f}
.sidebar option,.sort option,.finds-filters option{background:var(--panel)}
.favorite-list{margin-top:16px;display:grid;gap:16px;position:relative;z-index:1}
.favorite-list a{display:flex;gap:10px;align-items:center;font-size:var(--fs-small);line-height:1.5;transition:color .2s,transform .25s var(--ease)}
.favorite-list a:hover{color:var(--brass);transform:translateX(4px)}
.favorite-list a span{color:var(--brass);transition:transform .4s var(--ease)}
.favorite-list a:hover span{transform:rotate(72deg) scale(1.15)}
.favorite-list a small{display:block;font-size:var(--fs-micro);color:var(--muted)}
.finds-jump{display:block;margin-top:12px;padding:12px 6px;font:400 var(--fs-small) var(--plate);letter-spacing:1px;color:var(--copper);border-bottom:1px solid var(--line-soft);transition:color .22s,padding-left .22s var(--ease),border-color .22s;position:relative;z-index:1}
.finds-jump:hover{color:var(--brass);padding-left:12px;border-color:var(--brass-dark)}
.edition{position:relative;z-index:1;margin-top:32px;padding:20px 18px;border:1px solid var(--brass-dark);border-radius:4px;background:var(--brushed),linear-gradient(145deg,#2f2719,#1d1810);box-shadow:var(--bezel),0 3px 10px #00000060;transition:box-shadow .35s,border-color .35s}
.edition:hover{border-color:var(--brass-deep);box-shadow:var(--bezel),0 3px 18px #00000070,0 0 22px #c49a4a1a}
.edition>span{float:right;font-size:28px;color:var(--brass);line-height:1;animation:turn 26s linear infinite}
.edition p{font:600 19px/1.45 var(--display);margin:0 0 12px;color:var(--text)}
.edition small{font:400 var(--fs-micro) var(--plate);letter-spacing:1.8px;color:var(--brass-mid)}
.edition::before,.edition::after{content:'';position:absolute;left:7px;width:6px;height:6px;border-radius:50%;background:var(--rivet);background-size:6px 6px}
.edition::before{top:7px}
.edition::after{bottom:7px}

/* --- 8. Intro plaque --- */
main{padding:32px 34px;min-width:0}
.intro{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 30px;margin-bottom:26px;overflow:hidden;border:1px solid var(--brass-dark);border-radius:6px;background:var(--brushed),radial-gradient(ellipse 60% 100% at 100% 0%,#3ad4a80e,transparent 65%),linear-gradient(125deg,#302719 0%,#241e15 45%,#1b1610 100%);box-shadow:var(--bezel),0 6px 22px #00000060;animation:plateIn .8s var(--ease) both}
@keyframes plateIn{from{opacity:0;translate:0 -14px}to{opacity:1;translate:0 0}}
.intro>div:first-child{position:relative;z-index:1}
.intro p{color:var(--text-2);font-size:var(--fs-lead);margin:0;max-width:46ch}
.intro .eyebrow{color:var(--brass-mid)}

/* --- 9. The gauge --- */
.radius-dial{position:relative;flex-shrink:0;width:122px;height:122px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:50%;background:radial-gradient(circle,#14110c 0 62%,transparent 63%),conic-gradient(from 215deg,var(--brass-dark),var(--brass) 16%,#6b5225 40%,var(--brass) 62%,var(--brass-deep) 84%,var(--brass-dark));box-shadow:inset 0 0 0 1px #00000090,inset 0 0 18px #00000090,0 0 18px #c49a4a1f,0 3px 8px #00000080;--needle:38deg}
/* glass dome highlight */
.radius-dial::before{content:'';position:absolute;inset:15px;border-radius:50%;background:linear-gradient(150deg,#ffffff16 0 34%,transparent 52%);pointer-events:none;z-index:2}
.dial-face{position:absolute;inset:16px;border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--brass-mid) 0deg .8deg,transparent .8deg 15deg);-webkit-mask:radial-gradient(circle,transparent 0 68%,#000 69% 100%);mask:radial-gradient(circle,transparent 0 68%,#000 69% 100%);opacity:.75}
.dial-needle{position:absolute;left:50%;top:50%;width:2px;height:35px;margin-left:-1px;transform-origin:50% 100%;transform:translateY(-35px) rotate(var(--needle));background:linear-gradient(180deg,var(--lamp),var(--lamp-dim));box-shadow:0 0 8px var(--lamp-glow);border-radius:1px;transition:transform 1.05s var(--ease)}
.radius-dial.swept{animation:dialPulse .9s ease-out}
@keyframes dialPulse{0%{box-shadow:inset 0 0 0 1px #00000090,inset 0 0 18px #00000090,0 0 18px #c49a4a1f,0 3px 8px #00000080}40%{box-shadow:inset 0 0 0 1px #00000090,inset 0 0 18px #00000090,0 0 30px #3ad4a866,0 3px 8px #00000080}100%{box-shadow:inset 0 0 0 1px #00000090,inset 0 0 18px #00000090,0 0 18px #c49a4a1f,0 3px 8px #00000080}}
.radius-dial span{font:500 38px/1 var(--plate);color:var(--brass);text-shadow:0 0 14px #e0bd7240;z-index:1}
.radius-dial small{font:400 9px var(--plate);letter-spacing:1.5px;color:var(--muted);margin-top:5px;z-index:1}

/* --- 10. Toolbar --- */
.toolbar{display:flex;gap:14px}
.search{display:flex;align-items:center;gap:12px;padding:11px 16px;flex:1;width:auto}
.search:focus-within{border-color:var(--lamp);box-shadow:inset 0 2px 5px #00000080,0 0 0 1px var(--lamp-glow),0 0 18px #3ad4a81f}
.search>span{font-size:24px;color:var(--brass-mid);transition:color .25s,transform .35s var(--ease)}
.search:focus-within>span{color:var(--lamp);transform:rotate(-12deg) scale(1.1)}
.search input{background:none;border:0;outline:0;color:var(--text);width:100%;min-width:0;font-size:var(--fs-body);padding:0;box-shadow:none}
.search input::placeholder{color:var(--muted)}
.search kbd{font:400 var(--fs-label) var(--plate);border:1px solid var(--line);border-radius:3px;color:var(--muted);padding:2px 7px;background:#0f0d0a}
#mobile-filters{display:none;font:500 var(--fs-label) var(--plate);letter-spacing:1.2px;text-transform:uppercase;border:1px solid var(--line);border-radius:4px;padding:10px 14px;color:var(--brass)}
.view-toggle{display:flex;gap:3px;padding:4px;border:1px solid var(--line);border-radius:5px;white-space:nowrap;background:#100e0b;box-shadow:inset 0 2px 5px #00000080}
.view-toggle button{padding:9px 14px;font:400 var(--fs-label) var(--plate);letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);border-radius:3px;transition:background .25s,color .25s,box-shadow .25s}
.view-toggle button:hover{color:var(--text)}
.view-toggle button.active{color:var(--ink);background:linear-gradient(180deg,var(--brass),var(--brass-mid));box-shadow:0 1px 3px #00000070,0 0 14px #c49a4a30}
.categories{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 28px}
/* flex-shrink:0 keeps chips at their natural width so the row scrolls
   instead of squeezing and clipping the labels on narrow screens. */
.categories button{position:relative;overflow:hidden;flex:0 0 auto;padding:10px 15px;font:400 var(--fs-small) var(--plate);letter-spacing:1px;white-space:nowrap;color:var(--text-2);border:1px solid var(--line);border-radius:4px;background:linear-gradient(180deg,var(--panel2),var(--panel));box-shadow:var(--bezel);transition:border-color .22s,color .22s,transform .16s var(--ease),box-shadow .22s}
.categories button:hover{border-color:var(--brass-deep);color:var(--text);transform:translateY(-2px);box-shadow:var(--bezel),0 4px 12px #00000055}
.categories button.active{color:var(--ink);background:linear-gradient(180deg,var(--brass),var(--brass-mid));border-color:var(--brass);box-shadow:0 0 16px #c49a4a3d}
.categories button.active::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 36%,#fff8 50%,transparent 64%);translate:-130% 0;animation:shimmer 3.4s ease-in-out infinite}
@keyframes shimmer{0%,72%{translate:-130% 0}100%{translate:130% 0}}
.results-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px}
.results-heading>div{display:flex;align-items:center;gap:12px}
.results-heading span{font-size:var(--fs-small);color:var(--muted)}
.sort{font:400 var(--fs-label) var(--plate);letter-spacing:1px;color:var(--muted);white-space:nowrap}
.sort select{background:none;color:var(--text);border:0;font-size:var(--fs-small);padding:5px;font-family:var(--body)}

/* --- 11. Feed and event cards --- */
.discovery{display:grid;grid-template-columns:minmax(340px,1fr) minmax(320px,1fr);gap:22px;align-items:start}
.feed{display:grid;gap:13px;scroll-margin-top:20px;min-width:0;position:relative}
/* gear spinner while the feed loads */
.feed[aria-busy="true"]{min-height:180px}
.feed[aria-busy="true"]::before{content:'';position:absolute;left:50%;top:54px;width:52px;height:52px;margin-left:-26px;border-radius:50%;border:3px dashed var(--brass-deep);animation:turn 3.2s linear infinite;opacity:.85}
.feed[aria-busy="true"]::after{content:'';position:absolute;left:50%;top:70px;width:20px;height:20px;margin-left:-10px;border-radius:50%;border:2px solid var(--lamp-dim);opacity:.7;animation:turn 2s linear infinite reverse}
.event-card{position:relative;overflow:hidden;padding:22px 22px 15px;border:1px solid var(--line);border-radius:6px;background-image:var(--rivet),var(--rivet),var(--rivet),var(--rivet),var(--brushed),linear-gradient(135deg,#26211a 0%,#1d1913 55%,#191510 100%);background-size:7px 7px,7px 7px,7px 7px,7px 7px,auto,auto;background-position:9px 9px,calc(100% - 9px) 9px,9px calc(100% - 9px),calc(100% - 9px) calc(100% - 9px),0 0,0 0;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat,no-repeat;box-shadow:var(--bezel),0 3px 12px #00000055;transition:border-color .25s,transform .25s var(--ease),box-shadow .25s;animation:rise .5s var(--ease) both}
@keyframes rise{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
.event-card:nth-child(1){animation-delay:.02s}.event-card:nth-child(2){animation-delay:.06s}.event-card:nth-child(3){animation-delay:.1s}.event-card:nth-child(4){animation-delay:.14s}.event-card:nth-child(5){animation-delay:.18s}.event-card:nth-child(6){animation-delay:.22s}.event-card:nth-child(7){animation-delay:.26s}.event-card:nth-child(8){animation-delay:.3s}.event-card:nth-child(9){animation-delay:.34s}.event-card:nth-child(10){animation-delay:.38s}
.event-card:nth-child(n+13){animation:none}
/* brass sheen sweeps the plate on hover */
.event-card::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 32%,#ffe9b81f 46%,#fff4d612 53%,transparent 68%);translate:-130% 0;opacity:0;transition:translate .95s var(--ease),opacity .35s}
.event-card:hover{border-color:var(--brass-deep);transform:translateY(-3px);box-shadow:var(--bezel),0 10px 26px #00000075,0 0 20px #c49a4a14}
.event-card:hover::after{translate:130% 0;opacity:1}
.event-card.selected{border-color:var(--lamp-dim);box-shadow:var(--bezel),0 0 0 1px var(--lamp-glow),0 0 26px #3ad4a826}
.card-kicker{display:flex;justify-content:space-between;align-items:center;gap:8px;font:500 var(--fs-micro) var(--plate);letter-spacing:1.8px;text-transform:uppercase;color:var(--brass-mid);padding:0 14px}
.match{display:flex;align-items:center;gap:6px;font:400 var(--fs-micro) var(--plate);letter-spacing:1.2px;color:var(--lamp);white-space:nowrap}
.match b{font:500 18px var(--plate);letter-spacing:0;text-shadow:0 0 10px var(--lamp-glow)}
.card-title{font:600 22px/1.3 var(--display);letter-spacing:-.2px;margin:12px 36px 8px 0;padding-left:14px}
.card-title button{padding:0;text-align:left;font:inherit;transition:color .2s}
.card-title button:hover{color:var(--brass)}
.venue-line{font-size:var(--fs-small);color:var(--text-2);padding-left:14px}
.venue-line .star{color:var(--brass)}
.card-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--fs-small);color:var(--text);margin:16px 0 10px;padding-left:14px}
.card-meta span{display:flex;gap:6px}
.card-description{font-size:var(--fs-body);line-height:1.7;color:var(--muted);margin:10px 0 14px;padding-left:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reason-tags{display:flex;gap:6px;flex-wrap:wrap;padding-left:14px}
.reason-tags span{font:400 var(--fs-label) var(--plate);letter-spacing:.6px;color:var(--text-2);background:#ffffff0a;border:1px solid var(--line-soft);padding:5px 9px;border-radius:3px;transition:border-color .22s,color .22s}
.event-card:hover .reason-tags span{border-color:var(--brass-dark);color:var(--text)}
.card-bottom{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line-soft);margin:16px 0 0;padding:13px 14px 0;font:400 var(--fs-label) var(--plate);letter-spacing:.7px;color:var(--muted)}
.card-bottom .verified{margin-right:auto}
.card-bottom button,.card-bottom a{font:400 var(--fs-small) var(--plate);letter-spacing:.8px;padding:2px;color:var(--brass);transition:color .2s,transform .22s var(--ease)}
.card-bottom button:hover,.card-bottom a:hover{color:var(--text);transform:translateX(3px)}
.save{position:absolute;right:17px;top:50px;font-size:22px;color:var(--muted);z-index:2;transition:color .22s,transform .3s var(--ease)}
.save:hover{color:var(--copper);transform:scale(1.28) rotate(8deg)}
.save.saved{color:var(--copper);text-shadow:0 0 12px #c8794166;animation:thump .45s var(--ease)}
@keyframes thump{0%{transform:scale(1)}45%{transform:scale(1.42)}100%{transform:scale(1)}}

/* --- 12. Map panel --- */
.map-panel{position:sticky;top:20px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel);box-shadow:var(--bezel),0 4px 16px #00000060}
.map-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;font:500 var(--fs-micro) var(--plate);letter-spacing:1.5px;text-transform:uppercase;color:var(--text-2);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--panel3),var(--panel))}
.map-top .signal{margin-right:8px}
.map-top button{font:400 var(--fs-label) var(--plate);letter-spacing:1px;color:var(--brass);white-space:nowrap;transition:color .2s,transform .25s var(--ease)}
.map-top button:hover{color:var(--text);transform:translateY(-2px)}
#map{height:440px;background:#141110;position:relative}
.map-loading{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;color:var(--text-2);background-image:repeating-radial-gradient(circle at 30% 60%,#c49a4a0d 0 1px,transparent 1px 26px),repeating-radial-gradient(circle at 74% 30%,#3ad4a80a 0 1px,transparent 1px 34px),linear-gradient(#c49a4a10 1px,transparent 1px),linear-gradient(90deg,#c49a4a10 1px,transparent 1px);background-size:auto,auto,34px 34px,34px 34px}
.map-loading>span{font-size:64px;color:var(--brass-deep);animation:turn 12s linear infinite}
.map-loading p{font-size:var(--fs-small);line-height:1.7;max-width:250px}
.map-loading a{font-size:var(--fs-small);color:var(--brass);text-decoration:underline}
.map-bottom{display:flex;justify-content:space-between;gap:10px;padding:13px 15px;font:400 var(--fs-label) var(--plate);letter-spacing:.6px;color:var(--muted);border-top:1px solid var(--line-soft)}
.map-bottom small{font-size:var(--fs-micro);text-align:right}
.map-key{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lamp);box-shadow:0 0 6px var(--lamp-glow);margin-right:6px}
.map-key.gold{background:var(--brass);box-shadow:0 0 6px #c49a4a50;margin-left:11px}
.field-note{position:relative;overflow:hidden;display:flex;gap:14px;padding:19px;border-top:1px solid var(--line-soft);background:linear-gradient(110deg,#26211a,#1b1710)}
.field-note>span{color:var(--brass);font-size:24px;animation:nudge 4.5s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-3px)}}
.field-note strong{font:600 var(--fs-lead) var(--display);color:var(--text)}
.field-note p{font-size:var(--fs-small);line-height:1.6;color:var(--muted);margin:7px 0 0}
.map-info{color:#1a1510;font-family:var(--body);padding:5px;max-width:230px}
.map-info strong{font-size:15px}
.map-info p{font-size:var(--fs-small);margin:5px 0 9px}
.map-info button{background:var(--ink);color:var(--brass);padding:8px 12px;border-radius:3px;font-size:var(--fs-small)}

/* --- 13. Lower sections --- */
.local-finds{position:relative;overflow:hidden;margin-top:46px;padding-top:36px}
/* brass pipe divider */
.local-finds::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--brass-dark) 8%,var(--brass-deep) 30%,var(--brass) 50%,var(--brass-deep) 70%,var(--brass-dark) 92%,transparent);box-shadow:0 0 14px #c49a4a26}
.local-finds .results-heading>div{display:block}
.local-finds h2{margin-top:10px}
.local-finds .results-heading p{max-width:70ch;color:var(--muted);font-size:var(--fs-lead);line-height:1.65;margin:12px 0 0}
.finds-filters{display:flex;gap:22px;margin:20px 0 24px;flex-wrap:wrap;align-items:center;position:relative;z-index:1}
.finds-filters label{display:flex;align-items:center;gap:10px;font:400 var(--fs-label) var(--plate);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.finds-filters select,.finds-filters input{width:auto;padding:10px 12px}
.finds-filters input[type=checkbox]{width:auto;accent-color:var(--lamp-dim);box-shadow:none}
.finds-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;position:relative;z-index:1}
.find-card{position:relative;overflow:hidden;min-width:0;padding:24px;border:1px solid var(--line);border-top:2px solid var(--copper-deep);border-radius:6px;background-image:var(--rivet),var(--rivet),linear-gradient(140deg,#241f18,#191510);background-size:6px 6px,6px 6px,auto;background-position:8px 8px,calc(100% - 8px) 8px,0 0;background-repeat:no-repeat,no-repeat,no-repeat;box-shadow:var(--bezel),0 3px 10px #00000050;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;animation:rise .5s var(--ease) both}
.find-card:hover{transform:translateY(-3px);border-top-color:var(--copper);box-shadow:var(--bezel),0 10px 24px #00000070}
.find-card h3{font:600 19px/1.4 var(--display);margin:12px 0}
.find-card a{color:var(--text)}
.find-card a:hover{color:var(--brass);text-decoration:underline}
.find-card p{font-size:var(--fs-body);line-height:1.65;color:var(--muted);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.find-card small{color:var(--brass-mid);font-size:var(--fs-label)}
.find-card .quiet-button{margin-top:14px}
.route-result{font-size:var(--fs-small);color:var(--lamp);margin:10px 0 0}
.local-finds #finds-more{margin-top:22px}
.coverage{margin:30px 0;color:var(--text-2);font-size:var(--fs-body);position:relative;z-index:1}
.coverage summary{cursor:pointer;padding:15px 0;font:500 var(--fs-label) var(--plate);letter-spacing:1.6px;text-transform:uppercase;color:var(--brass-mid);transition:color .2s}
.coverage summary:hover{color:var(--brass)}
.coverage[open] .coverage-grid>div{animation:rise .45s var(--ease) both}
.coverage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.coverage-grid>div{padding:14px;background:var(--panel);border:1px solid var(--line-soft);border-radius:4px;transition:border-color .22s;font-size:var(--fs-small)}
.coverage-grid>div:hover{border-color:var(--brass-dark)}
.coverage-grid a{color:var(--brass)}
.coverage-grid a:hover{text-decoration:underline}
.coverage-grid small{display:block;margin-top:8px;color:var(--muted);font-size:var(--fs-label)}
#google-attribution{color:var(--muted)}
/* Scroll-driven reveal, where supported. Deliberately scoped to headings and
   filters only: the grids below are filled by JS after load, and an element
   that is empty when the timeline is evaluated can stay stuck at opacity 0. */
@supports (animation-timeline:view()){.local-finds>.results-heading,.local-finds>.finds-filters{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 38%}}
@keyframes reveal{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}

/* --- 14. Empty, dialog, toast, footer --- */
.empty{border:1px dashed var(--brass-dark);border-radius:6px;padding:50px 28px;text-align:center;color:var(--muted);line-height:1.8;font-size:var(--fs-body);background:radial-gradient(ellipse at center,#ffffff05,transparent 70%);animation:rise .5s var(--ease) both}
.empty strong{display:block;color:var(--text);font:600 23px var(--display);margin:12px 0}
.empty button{margin-top:10px;color:var(--brass);text-decoration:underline}
.empty .empty-icon{font-size:36px;color:var(--brass-deep);display:inline-block;animation:turn 18s linear infinite}
dialog{color:var(--text);border:1px solid var(--brass-dark);border-radius:8px;padding:38px;max-width:640px;width:calc(100% - 30px);max-height:90vh;overflow:auto;background:var(--brushed),linear-gradient(150deg,#2a231a,#16120d);box-shadow:var(--bezel),0 22px 60px #000000b0}
dialog[open]{animation:dialogIn .34s var(--ease)}
@keyframes dialogIn{from{opacity:0;translate:0 20px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
dialog::backdrop{background:#07060499;backdrop-filter:blur(4px);animation:fade .3s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.dialog-close{position:absolute;right:16px;top:12px;font-size:30px;color:var(--muted);transition:color .2s,transform .3s var(--ease)}
.dialog-close:hover{color:var(--brass);transform:rotate(90deg)}
dialog h2{font-size:31px;margin:18px 0 14px}
dialog p{line-height:1.8;color:var(--text-2);font-size:var(--fs-body);white-space:pre-line}
dialog dl{display:grid;grid-template-columns:116px 1fr;gap:15px;font-size:var(--fs-body);margin:28px 0}
dialog dt{font:400 var(--fs-label) var(--plate);letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);padding-top:2px}
dialog dd{margin:0}
.detail-actions{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.detail-actions a,.detail-actions button{position:relative;overflow:hidden;padding:13px 18px;font:500 var(--fs-label) var(--plate);letter-spacing:1.3px;text-transform:uppercase;border:1px solid var(--brass-dark);border-radius:4px;color:var(--brass);background:linear-gradient(180deg,var(--panel3),var(--panel));box-shadow:var(--bezel);transition:border-color .22s,color .22s,transform .14s var(--ease),box-shadow .22s}
.detail-actions a:hover,.detail-actions button:hover{border-color:var(--brass);color:var(--text);box-shadow:var(--bezel),0 0 16px #c49a4a30}
.detail-actions a:active,.detail-actions button:active{transform:translateY(1px)}
.detail-actions a:first-child{background:linear-gradient(180deg,var(--brass),var(--brass-mid));color:var(--ink);border-color:var(--brass)}
.detail-actions a:first-child:hover{color:var(--ink);box-shadow:var(--bezel),0 0 24px #c49a4a55}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,var(--brass),var(--brass-mid));color:var(--ink);font:500 var(--fs-small) var(--plate);letter-spacing:.9px;padding:14px 24px;border-radius:4px;display:none;z-index:10;box-shadow:0 6px 22px #000000a0,0 0 26px #c49a4a33;animation:toastIn .34s var(--ease)}
@keyframes toastIn{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
.skip{position:fixed;top:-100px;left:10px;z-index:20;background:var(--brass);padding:11px;color:var(--ink);transition:top .25s var(--ease)}
.skip:focus{top:10px}
footer{position:relative;overflow:hidden;margin-top:30px;border-top:1px solid var(--line);padding-top:20px;color:var(--muted);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font:400 var(--fs-label) var(--plate);letter-spacing:1px}
footer b{color:var(--brass);margin-left:10px;display:inline-block;animation:turn 22s linear infinite}
.list-only{grid-template-columns:1fr}
.list-only .feed{grid-template-columns:repeat(2,minmax(0,1fr))}
.list-only .map-panel{display:none}

/* --- 15. Responsive --- */
@media(min-width:1550px){:root{--fs-micro:11.5px;--fs-label:13px;--fs-small:14px;--fs-body:15.5px;--fs-lead:17px}main{padding:40px 48px}.event-card{padding:26px 26px 17px}.card-title{font-size:24px}#map{height:520px}}
@media(max-width:1150px){.workspace{grid-template-columns:214px minmax(0,1fr)}.sidebar{padding:26px 15px}main{padding:27px 23px}.discovery{grid-template-columns:1fr 1fr;gap:15px}.map-top{letter-spacing:1px;padding:12px 10px}.results-heading>div{display:block}.results-heading span{display:block;margin-top:5px}.view-toggle button{padding:9px 10px}.radius-dial{width:96px;height:96px}.radius-dial span{font-size:30px}.dial-needle{height:27px;transform:translateY(-27px) rotate(var(--needle))}.location .state-label{display:none}.card-title{font-size:19px}.event-card{padding:18px 18px 13px}.map-bottom{flex-direction:column}.map-bottom small{text-align:left}.coverage-grid,.finds-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gear-side,.gear-intro2{display:none}}
@media(max-width:900px){.masthead{padding:0 20px;height:86px}.masthead .gear{display:none}.brand{font-size:19px}.workspace{grid-template-columns:minmax(0,1fr)}.sidebar{padding:14px 20px;border-right:0;border-bottom:1px solid var(--line);min-height:0}.sidebar>.eyebrow,.sidebar .sidebar-rule,.filter-heading,.field-label,.sidebar select,.sidebar input,.favorite-list,.edition,.finds-jump,.gear-side{display:none}.sidebar nav{margin:0;display:flex;overflow-x:auto;gap:6px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.sidebar nav button{flex:0 0 auto;white-space:nowrap;padding:10px 12px;font-size:var(--fs-small)}.sidebar nav button:hover{padding-left:12px}.sidebar nav button span{font-size:16px}.sidebar nav small{display:none}main{padding:24px 20px}#mobile-filters{display:block}.sidebar.filters-open .field-label,.sidebar.filters-open select,.sidebar.filters-open input,.sidebar.filters-open .filter-heading{display:block;max-width:360px}.sidebar.filters-open .filter-heading{display:flex;margin-top:20px}.discovery{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.card-title{font-size:20px}.categories{margin-bottom:22px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}}
@media(max-width:650px){.masthead{padding:0 16px;gap:10px;height:80px}.brand-mark{width:42px;height:42px;font-size:20px}.brand{font-size:17px;letter-spacing:1.6px;gap:10px}.brand small{font-size:8px;letter-spacing:1.4px}.location{display:none}.quiet-button{margin-left:auto;padding:10px 12px}.quiet-button>span{display:none}.quiet-button b{margin-left:3px}.sidebar{padding:11px 13px}.sidebar nav button{padding:9px 11px}.sidebar nav button span{display:none}main{padding:24px 16px}.intro{gap:14px;padding:22px 20px}.gear-intro,.gear-intro2,.gear-section{display:none}.intro h1{font-size:29px}.intro p{font-size:var(--fs-small);max-width:32ch;line-height:1.6}.radius-dial{width:82px;height:82px}.radius-dial span{font-size:26px}.radius-dial small{font-size:6px;letter-spacing:1px}.dial-face{inset:11px}.dial-needle{height:23px;transform:translateY(-23px) rotate(var(--needle))}.toolbar{flex-wrap:wrap}.search{flex-basis:100%}.view-toggle{margin-left:auto}.categories{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin:12px 0 18px}.discovery{display:flex;flex-direction:column}.feed{width:100%}.map-panel{position:relative;top:0;order:-1;width:100%;margin-bottom:6px}#map{height:250px}.map-bottom{flex-direction:row}.map-bottom small{max-width:140px;text-align:right}.field-note{display:none}.event-card{padding:20px 20px 13px}.card-title{font-size:21px}.card-meta{gap:12px}.card-bottom{flex-wrap:wrap;gap:10px}.list-only .feed{display:grid;grid-template-columns:1fr}.results-heading h2{font-size:20px}.results-heading>div{flex-wrap:wrap}.finds-grid,.coverage-grid{grid-template-columns:1fr;gap:14px}footer>span:last-child{display:none}dialog{padding:28px}dialog h2{font-size:26px}dialog dl{grid-template-columns:100px 1fr}.detail-actions{flex-wrap:wrap}}

/* --- 16. Motion and contrast preferences --- */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.event-card:hover,.find-card:hover,.categories button:hover,.save:hover{transform:none}.event-card::after,.quiet-button::after,.categories button.active::after{display:none}.ambient{opacity:.85}}
@media(prefers-contrast:more){:root{--muted:#d6cab2;--line:#5c4d3a;--text-2:#f0e6d2}.event-card,.find-card,.map-panel{border-color:var(--brass-dark)}.gear,.ambient{opacity:.06}}