:root {
  --paper:#fafafa; --surface:#fff; --surface-2:#f4f4f5; --ink:#111214;
  --muted:#6b6f76; --line:#e4e4e7;
  --accent:#b4552f;            /* eat — warm terracotta */
  --accent-stay:#3d5a80;       /* stay — deep slate blue */
  --radius:14px;
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow:0 8px 28px rgba(0,0,0,.08);
  --maxw:1100px;
}
[data-v="stay"] { --accent:var(--accent-stay); }
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#101214; --surface:#16181b; --surface-2:#1b1e22; --ink:#eceef1;
    --muted:#9aa0a8; --line:#282c31;
    --accent:#e08256; --accent-stay:#7fa5cc;
    --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow:0 8px 28px rgba(0,0,0,.5);
  }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.62; letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.wrap.narrow { max-width:760px; }
a { color:var(--accent); }
h1,h2,h3 { letter-spacing:-.024em; line-height:1.15; font-weight:650; margin:0 0 .5em; }
h1 { font-size:clamp(2rem,4.4vw,3.35rem); }
h2 { font-size:clamp(1.3rem,2.2vw,1.72rem); margin-top:2em; }
h3 { font-size:1.06rem; margin-top:1.6em; }
p { margin:0 0 1.05em; }
.lead { font-size:1.09rem; color:var(--muted); max-width:62ch; }
.muted { color:var(--muted); }

/* header */
.site-head { border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:20; }
.site-head-in { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 0; }
.brand { font-weight:650; font-size:1.02rem; letter-spacing:-.03em; text-decoration:none; color:var(--ink); }
.brand span { color:var(--accent); }
.mainnav { display:flex; gap:19px; font-size:.9rem; }
.mainnav a { color:var(--muted); text-decoration:none; }
.mainnav a:hover, .mainnav a[aria-current] { color:var(--ink); }

/* crumbs */
.crumbs { font-size:.82rem; color:var(--muted); padding:16px 0 0; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--accent); }
.crumbs span { margin:0 7px; opacity:.5; }

main { padding-bottom:56px; }
.section { padding:34px 0; }
.hero { padding:44px 0 26px; }

/* stat strip */
.stats { display:flex; flex-wrap:wrap; gap:26px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:26px 0; }
.stat-n { font-size:1.5rem; font-weight:650; letter-spacing:-.03em; display:block; }
.stat-l { font-size:.78rem; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; }

/* cards + listing */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:12px; margin:20px 0; }
.card { display:flex; flex-direction:column; gap:3px; padding:16px 18px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface); text-decoration:none; color:inherit;
  box-shadow:var(--shadow-xs); transition:border-color .18s ease-out, transform .18s ease-out; }
.card:hover { border-color:var(--accent); transform:translateY(-2px); }
.card-t { font-weight:650; letter-spacing:-.02em; }
.card-s { font-size:.84rem; color:var(--muted); }

.venues { list-style:none; margin:18px 0; padding:0; border-top:1px solid var(--line); }
.venues li { border-bottom:1px solid var(--line); }
.v-row { display:flex; align-items:baseline; gap:12px; padding:13px 2px; text-decoration:none; color:inherit; }
.v-row:hover .v-name { color:var(--accent); }
.v-name { font-weight:650; letter-spacing:-.015em; }
.v-meta { font-size:.83rem; color:var(--muted); margin-left:auto; text-align:right; white-space:nowrap; }
.v-tags { font-size:.83rem; color:var(--muted); }
.plain { color:inherit; text-decoration:none; }

/* facts table */
.facts { width:100%; border-collapse:collapse; margin:18px 0; font-size:.94rem; }
.facts th { text-align:left; font-weight:400; color:var(--muted); padding:9px 14px 9px 0; vertical-align:top; width:34%; border-bottom:1px solid var(--line); }
.facts td { padding:9px 0; border-bottom:1px solid var(--line); }

/* verified badge */
.verified { display:inline-flex; align-items:center; gap:7px; font-size:.8rem; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; margin:0 6px 6px 0; }
.verified b { font-weight:650; color:var(--ink); }

/* dot map — the only imagery on the site, generated from our own data */
.dotmap { display:block; width:100%; max-width:340px; height:auto; margin:4px 0 18px; }
.dotmap circle { fill:var(--accent); }
.dotmap .bg { fill:var(--muted); opacity:.22; }

/* ads — fixed height reserved so CLS stays at zero */
.ad { display:block; margin:30px 0; text-align:center; border:1px solid var(--line); border-radius:var(--radius); padding:10px; background:var(--surface); }
.ad-label { display:block; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.ad--rect { min-height:296px; }
.ad--strip { min-height:130px; }
.ad:has(> ins.adsbygoogle[data-ad-status="unfilled"]) { display:none; }

/* footer */
.site-foot { border-top:1px solid var(--line); background:var(--surface-2); padding:34px 0 44px; font-size:.87rem; color:var(--muted); }
.foot-links { display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 18px; }
.site-foot a { color:var(--muted); text-decoration:none; }
.site-foot a:hover { color:var(--accent); }
.attrib { font-size:.8rem; line-height:1.6; max-width:70ch; }

@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }

.netbar { border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: .82rem; }
.netbar-in { display: flex; align-items: center; gap: 14px; padding: 7px 0; flex-wrap: wrap; }
.netbar-label { color: var(--muted); letter-spacing: .04em; }
.netbar-links { display: flex; gap: 14px; flex-wrap: wrap; }
.netbar-links a { color: var(--muted); text-decoration: none; }
.netbar-links a:hover { color: var(--accent); }


.author { border-top: 1px solid var(--line); padding: 46px 0 40px; }
.author-kicker { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.author-name { font-size: 1.32rem; letter-spacing: -.022em; margin: 0 0 8px; font-weight: 650; }
.author-name a { color: inherit; text-decoration: none; }
.author-name a:hover { color: var(--accent); }
.author-bio { color: var(--muted); font-size: .93rem; line-height: 1.62; margin: 0 0 16px; max-width: 52ch; }
.author-links { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.author-links a {
  display: inline-block; padding: 6px 13px; border: 1px solid var(--line);
  border-radius: 999px; font-size: .84rem; text-decoration: none; color: var(--ink);
  transition: border-color .18s ease-out, color .18s ease-out;
}
.author-links a:hover { border-color: var(--accent); color: var(--accent); }


.intro { position:relative; min-height:min(88vh,760px); display:flex; align-items:center; overflow:hidden; }
.intro-canvas, .introsvg {
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  color:var(--accent); opacity:.5; pointer-events:none;
}
.introsvg { object-fit:contain; }
/* Once the canvas is live the static SVG steps aside. */
.intro[data-live="1"] .introsvg { display:none; }
.intro-in { position:relative; z-index:1; max-width:none; }
.intro-copy {
  max-width:20ch; background:linear-gradient(90deg, var(--paper) 0%, var(--paper) 62%, transparent 100%);
  padding:26px 46px 26px 0;
}
.intro h1 { font-size:clamp(2.3rem,6.4vw,4.4rem); margin:0 0 .35em; }
.intro .lead { font-size:clamp(1rem,1.7vw,1.2rem); max-width:34ch; }
.intro-cta { display:flex; gap:11px; flex-wrap:wrap; margin-top:26px; }
.intro-cta a {
  padding:11px 22px; border-radius:999px; text-decoration:none; font-size:.94rem; font-weight:650;
  border:1px solid var(--accent); color:var(--accent);
  transition:background-color .18s ease-out, color .18s ease-out;
}
.intro-cta a:first-child { background:var(--accent); color:var(--paper); }
.intro-cta a:hover { background:var(--accent); color:var(--paper); }
@media (max-width:720px) {
  .intro-copy { max-width:none; background:none; padding-right:0; }
  .intro-canvas, .introsvg { opacity:.26; }
}
@media (prefers-reduced-motion: reduce) { .intro-canvas { display:none !important; } .intro[data-live="1"] .introsvg { display:block; } }