/* Off Hours Nashville: minimal and futuristic. Lots of air, faint column guides instead of borders,
   frosted glass surfaces, huge condensed headlines (Oswald), an elegant serif for taglines
   (Instrument Serif), Inter Tight for everything else. Day is soft apricot with warm brown ink;
   night is deep blue-black. One signal orange. */
:root {
  /* Day: soft apricot paper that sets off the deep orange in the logo, warm brown ink. */
  --paper: #FDE8DA; --paper-2: #F9DAC6; --paper-3: #F3C9AF;
  --ink: #24140E; --ink-2: #4A2E22; --muted: #7E5C4D; --muted-2: #EE8B67;
  --line: rgba(36, 20, 14, .09); --guide: rgba(36, 20, 14, .05);
  --rule: var(--line); --rule-strong: rgba(36, 20, 14, .18);
  --frost: rgba(255, 255, 255, .5); --frost-2: rgba(255, 255, 255, .72); --frost-line: rgba(255, 255, 255, .85);
  --accent: #FA3600;        /* squares, markers, the side tab */
  --accent-fill: #E23400;   /* fills behind white text */
  --accent-text: #C42A00;   /* small orange text on paper */
  --accent-tint: rgba(250, 54, 0, .07);
  --display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --brand: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --glass: var(--frost); --glass-2: var(--frost-2); --field-focus: #fff;
  --bar-bg: rgba(253, 232, 218, .62); --deep: #24140E; --on-deep: #FBEDE4; --river-text: #5D7C8A; --gm: #5E5E5E; --hours: #E23400;
  --shadow: 0 1px 2px rgba(36, 20, 14, .05), 0 14px 34px -14px rgba(120, 40, 10, .22);
  --glow: radial-gradient(1100px 620px at 88% -8%, rgba(250, 96, 40, .22), transparent 70%), radial-gradient(900px 600px at -10% 40%, rgba(255, 170, 120, .18), transparent 70%);
  color-scheme: light;
}
/* Night mode: deep blue-black, soft white ink. Applied by the sunset script (data-theme on <html>);
   without JavaScript the device setting decides. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #0D0F14; --paper-2: #161922; --paper-3: #1E222C;
  --ink: #ECEDEF; --ink-2: #C3C7CF; --muted: #868C98; --muted-2: #4C525E;
  --line: rgba(236, 237, 239, .08); --guide: rgba(236, 237, 239, .035); --rule-strong: rgba(236, 237, 239, .18);
  --frost: rgba(255, 255, 255, .045); --frost-2: rgba(255, 255, 255, .07); --frost-line: rgba(255, 255, 255, .08);
  --accent-text: #FF7A4D; --accent-tint: rgba(250, 54, 0, .12);
  --field-focus: rgba(255, 255, 255, .1); --bar-bg: rgba(13, 15, 20, .72); --deep: #07080B; --on-deep: #ECEDEF;
  --river-text: #8FB0BE; --gm: #FFFFFF; --hours: #FA3600; --shadow: 0 12px 32px -12px rgba(0, 0, 0, .6); --glow: none;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --paper: #0D0F14; --paper-2: #161922; --paper-3: #1E222C;
  --ink: #ECEDEF; --ink-2: #C3C7CF; --muted: #868C98; --muted-2: #4C525E;
  --line: rgba(236, 237, 239, .08); --guide: rgba(236, 237, 239, .035); --rule-strong: rgba(236, 237, 239, .18);
  --frost: rgba(255, 255, 255, .045); --frost-2: rgba(255, 255, 255, .07); --frost-line: rgba(255, 255, 255, .08);
  --accent-text: #FF7A4D; --accent-tint: rgba(250, 54, 0, .12);
  --field-focus: rgba(255, 255, 255, .1); --bar-bg: rgba(13, 15, 20, .72); --deep: #07080B; --on-deep: #ECEDEF;
  --river-text: #8FB0BE; --gm: #FFFFFF; --hours: #FA3600; --shadow: 0 12px 32px -12px rgba(0, 0, 0, .6); --glow: none;
  color-scheme: dark;
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; background: var(--paper) }
body { margin: 0; color: var(--ink); background: var(--glow, none) fixed, var(--paper); font-family: var(--body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11" }
/* faint column guides, fixed behind everything */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--guide) 1px, transparent 1px) 0 0 / calc(100% / 6) 100% }
img, svg { max-width: 100% }
[hidden] { display: none !important }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
::selection { background: var(--accent); color: #fff }
.wrap { max-width: 1340px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)) }
.frame { min-height: 100vh }

/* frosted surfaces */
.frosted, .nav li a, .theme-toggle, .chip, .rail-box, .tile, .panel, .pick, .cta-slot, .b, .show-more, .vibe span {
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2) }

/* nav: logo, then frosted buttons */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px max(24px, env(safe-area-inset-left, 0px)); flex-wrap: wrap }
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; margin-right: auto }
.logo .mark { width: 30px; height: 30px; color: var(--ink); flex: none }
.logo .word { display: grid; line-height: 1; font-family: var(--brand); font-weight: 700; font-size: 19px; letter-spacing: -.02em; text-transform: uppercase }
.logo .word small { font-family: var(--body); font-weight: 500; font-size: 9px; letter-spacing: .38em; color: var(--muted); margin-top: 5px }
.logo .word em { font-style: normal; color: var(--hours) }
.nav ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0 }
.nav li a { display: block; padding: 9px 14px; border-radius: 3px; background: var(--frost); box-shadow: inset 0 0 0 1px var(--frost-line); font-size: 12.5px; font-weight: 500; letter-spacing: .01em; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background .2s }
.nav li a:hover { background: var(--frost-2) }
.nav li a[aria-current="page"] { background: var(--ink); color: var(--paper); box-shadow: none }
.nav li.cta a { color: var(--accent-text) }
.nav li.cta a span { margin-left: 6px; color: var(--accent) }
.nav li.cta a[aria-current="page"] { color: var(--paper) }
.theme-toggle { font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink); background: var(--frost); box-shadow: inset 0 0 0 1px var(--frost-line); border: 0; border-radius: 3px; padding: 9px 13px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; order: 3 }
.theme-toggle:hover { background: var(--frost-2) }
.theme-toggle svg { width: 15px; height: 15px; flex: none }
.theme-toggle span { display: inline-flex; align-items: center; gap: 7px }
.theme-toggle .to-day { display: none }
:root[data-theme="dark"] .theme-toggle .to-day { display: inline-flex }
:root[data-theme="dark"] .theme-toggle .to-night { display: none }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .to-day { display: inline-flex } :root:not([data-theme="light"]) .theme-toggle .to-night { display: none } }

/* masthead: italic serif tagline, huge condensed headline, a quiet aside */
.mast { position: relative }
.mast .x, .mast.has-art::before { display: none }
.art { padding: 24px 24px 0; display: flex; flex-direction: column; align-items: center }
.art .drawing { width: 100%; max-width: 1000px; height: auto; display: block }
.mast-grid { max-width: 1340px; margin: 0 auto; padding: 28px max(24px, env(safe-area-inset-left, 0px)) 34px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 28px 56px; align-items: end }
.mast-main { display: grid; gap: 14px; align-content: end; min-width: 0 }
.mast-side { display: grid; gap: 18px; align-content: end; padding-bottom: 8px }
.eyebrow { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.25; color: var(--ink-2); max-width: none; white-space: nowrap }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(52px, 9.2vw, 140px); line-height: .88; letter-spacing: -.005em; text-transform: uppercase; margin: 0; text-wrap: balance }
h1 span { color: var(--muted-2) }
.mast.small h1 { font-size: clamp(42px, 6.6vw, 96px) }
.lede { max-width: 46ch; margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6 }
.lede a { color: var(--ink) }
.go { justify-self: start; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-decoration: none; display: inline-flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 3px; background: var(--frost); box-shadow: inset 0 0 0 1px var(--frost-line) }
.go span { color: var(--accent); font-size: 14px; transition: transform .2s }
.go:hover span { transform: translateX(3px) }
.crumbs { font-size: 12px; letter-spacing: .02em; color: var(--muted) }
.crumbs a { color: var(--muted) }
.tally { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.tally b { color: var(--ink); font-weight: 600 }
.side-art .drawing { width: 100%; max-width: 360px; height: auto; display: block; margin-left: auto }
.mast-side .drawing { border-radius: 6px }

/* sticky day bar and filters: frosted, no rules */
.bar { position: sticky; top: 0; z-index: 5; background: var(--bar-bg); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3) }
.bar .wrap { display: grid }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding-top: 6px }
.day { font: inherit; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: 14px 0 12px; border: 0; background: transparent; color: var(--muted); cursor: pointer; position: relative; text-align: center; text-decoration: none; transition: color .2s }
.day::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 0; height: 2px; background: var(--accent); transition: width .25s, left .25s }
.day:hover { color: var(--ink) }
.day[aria-pressed="true"], .day[aria-current="page"] { color: var(--ink) }
.day[aria-pressed="true"]::after, .day[aria-current="page"]::after { width: 28px; left: calc(50% - 14px) }
.day .today { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 8.5px; letter-spacing: .16em; color: var(--accent-text); display: flex; gap: 4px; align-items: center; white-space: nowrap }
.day .today::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent) }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0 14px }
.chip { font: inherit; font-size: 12px; font-weight: 500; padding: 8px 13px; border: 0; border-radius: 3px; background: var(--frost); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-block; transition: background .2s }
.chip:hover { background: var(--frost-2) }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none }
select, input, textarea { font: inherit; font-size: 14px; padding: 9px 12px; border-radius: 3px; border: 0; box-shadow: inset 0 0 0 1px var(--line); background: var(--frost-2); color: var(--ink); min-width: 0 }
select:focus, input:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink); background: var(--field-focus) }
.filters select, .filters input { font-size: 12.5px; padding: 8px 11px }
.filters input[type="search"] { flex: 1 1 200px }
::placeholder { color: var(--muted) }

/* content */
main .wrap { padding-block: 44px 96px; display: grid; gap: 80px }
.summary, .section-head { margin-bottom: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: end }
h2 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4.6vw, 64px); margin: 0; line-height: .92; letter-spacing: 0; text-transform: uppercase; text-wrap: balance }
h2 span { color: var(--muted-2) }
h3 { text-wrap: balance }
.summary p { margin: 0; color: var(--muted); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase }
.section-head a { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-decoration: none }
.section-head a::after { content: "  →"; color: var(--accent) }

/* time slots and deal rows */
.slot + .slot { margin-top: 44px }
.slot h3 { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 4px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line) }
.slot h3 span:first-child { display: inline-flex; align-items: center; gap: 10px; color: var(--ink) }
.slot h3 span:first-child::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent) }
.slot h3 span:last-child { color: var(--muted); font-weight: 500; letter-spacing: .08em }
.slot h3 .trust { font-style: normal }
.row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 24px; padding: 20px 0; border-bottom: 1px solid var(--line) }
.row.featured { padding-inline: 18px; margin-inline: -18px; background: var(--accent-tint); border-radius: 4px; border-bottom-color: transparent }
.time { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; padding-top: 4px; color: var(--ink-2) }
.time .live { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text) }
.time .ok { display: inline-flex; vertical-align: -2px; margin-right: 8px; color: var(--muted) }
.time .ok:hover { color: var(--accent-text) }
.chk { width: 12px; height: 12px; display: inline-block }
.source .chk { vertical-align: -1px; margin-right: 2px }
.who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px }
.who a.v { font-family: var(--body); font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); text-decoration: none; line-height: 1.15 }
.who a.v:hover { color: var(--accent-text) }
.hood { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.hood a { color: var(--muted); text-decoration: none }
.hood a:hover { color: var(--ink) }
.line { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; font-size: 15px; margin-top: 7px; color: var(--ink-2) }
.tag { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding-top: 3px; color: var(--muted) }
.tag.eat { color: var(--accent-text) }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px }
.badges:empty { display: none }
.b { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; line-height: 1.4; border-radius: 3px; background: var(--frost-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px }
.b a { color: inherit; text-decoration: none }
.b.sp { color: var(--ink) }
.b.ok::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2) }
.b.warn { background: var(--accent-tint); box-shadow: none; color: var(--accent-text) }
.b.ft { background: var(--ink); box-shadow: none; color: var(--paper) }
.b.ft::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent) }
.b.meta { background: none; box-shadow: none; padding-left: 0; text-transform: none; font-weight: 400; font-size: 12.5px; letter-spacing: 0; color: var(--muted); -webkit-backdrop-filter: none; backdrop-filter: none }
.b.rs { background: var(--accent-fill); box-shadow: none; color: #fff }
.b.rs:hover { background: var(--ink); color: var(--paper) }
/* Google rating chip (filled by ratings.js). Attribution follows Google Maps rules: Roboto 400, 12px+, #5E5E5E on light, white on dark. */
.gr { font-size: 12px; white-space: nowrap }
.gr a { color: var(--ink); text-decoration: none }
.gr a:hover { text-decoration: underline }
.gr .star { color: var(--accent) }
.gr .gm { font-family: Roboto, Arial, sans-serif; font-weight: 400; font-size: 12px; letter-spacing: normal; text-transform: none; color: var(--gm); white-space: nowrap }
.lede .gr::before { content: " · "; color: var(--muted) }
.empty { padding: 28px 0; color: var(--muted) }
.slot:not(.open) .row.more { display: none }
.show-more { font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; width: 100%; padding: 14px; margin-top: 14px; border: 0; border-radius: 3px; background: var(--frost); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); cursor: pointer }
.show-more span { color: var(--accent) }
.show-more:hover { background: var(--frost-2) }

/* tiles: frosted cards with air between them */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px }
.tile { position: relative; display: grid; gap: 6px; padding: 18px 18px 20px; min-height: 112px; align-content: end; border-radius: 4px; background: var(--frost); box-shadow: inset 0 0 0 1px var(--frost-line); text-decoration: none; color: var(--ink); transition: background .2s, transform .2s }
.tile::after { content: "→"; position: absolute; top: 14px; right: 16px; font-size: 14px; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s }
.tile:hover { background: var(--frost-2) }
.tile:hover::after { opacity: 1; transform: none }
.tile b { font-family: var(--display); font-weight: 400; font-size: 23px; letter-spacing: .005em; line-height: 1; text-transform: uppercase }
.tile span { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.tile.has-icon { padding: 44px 104px 18px 18px; min-height: 136px }
.tile .icon { position: absolute; right: 10px; bottom: 10px; width: 84px; height: 84px }
.tile.has-icon::after { right: auto; left: 18px }

/* panels, prose, forms */
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px }
.panel { padding: 26px; display: grid; gap: 12px; align-content: start; border-radius: 4px; background: var(--frost); box-shadow: inset 0 0 0 1px var(--frost-line) }
.panel h3 { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin: 0; color: var(--ink-2) }
.panel ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2) }
.panel p { margin: 0; font-size: 14.5px; color: var(--muted) }
.prose { max-width: 64ch; display: grid; gap: 18px; font-size: 16.5px; line-height: 1.65; color: var(--ink-2) }
.prose p, .prose ul { margin: 0 }
.prose ul { padding-left: 20px; display: grid; gap: 6px }
.prose h2 { margin-top: 22px; color: var(--ink); font-size: clamp(26px, 3vw, 38px) }
form.stack { display: grid; gap: 18px; max-width: 560px }
form.stack label { display: grid; gap: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2) }
form.stack label small { letter-spacing: 0; text-transform: none; font-weight: 400; font-size: 12.5px; color: var(--muted) }
form.stack input, form.stack select, form.stack textarea { letter-spacing: 0; text-transform: none; font-weight: 400 }
.btn { font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 13px 20px; border-radius: 3px; border: 0; background: var(--accent-fill); color: #fff; cursor: pointer; justify-self: start; text-decoration: none; display: inline-block; transition: background .2s }
.btn:hover { background: var(--ink); color: var(--paper) }
.btn.ghost { background: var(--frost); box-shadow: inset 0 0 0 1px var(--rule-strong); color: var(--ink) }
.btn.ghost:hover { background: var(--ink); color: var(--paper); box-shadow: none }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.msg { font-size: 14px; font-weight: 500 }
.msg.good { color: var(--ink) }
.msg.bad { color: var(--accent-text) }
.inline-form { display: flex; flex-wrap: wrap; gap: 6px }
.inline-form input[type="email"] { flex: 1 1 200px }
.price { font-family: var(--display); font-weight: 400; font-size: 64px; line-height: .9 }
.price small { font-family: var(--body); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.cta-slot { border-radius: 4px; background: var(--frost); box-shadow: inset 0 0 0 1px var(--frost-line); padding: 22px 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--ink) }

/* footer: deep block, a giant quiet wordmark */
footer { background: var(--deep); color: var(--on-deep); position: relative; overflow: hidden }
footer .wrap { display: grid; padding-top: 64px }
footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px 32px }
footer h4 { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(236, 237, 239, .55); margin: 0 0 16px }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px }
footer a { color: rgba(236, 237, 239, .86); text-decoration: none }
footer a:hover { color: #fff }
footer p { margin: 0; font-size: 14px; color: rgba(236, 237, 239, .7) }
footer input { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: var(--on-deep) }
footer input:focus { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5) }
footer .btn:hover { background: var(--on-deep); color: var(--deep) }
footer .msg.good { color: var(--on-deep) }
footer .wrap > p { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(236, 237, 239, .45); padding: 40px 0 22px }
.foot-word { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 21vw; line-height: .78; letter-spacing: -.01em; white-space: nowrap; color: rgba(236, 237, 239, .06); margin: 0 0 0 -1vw; padding-bottom: 1.2vw; user-select: none; pointer-events: none }
.foot-word em { font-style: normal; color: rgba(250, 54, 0, .22) }

/* fixed orange side tab, like a bookmark: jumps to the newsletter signup */
.side-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 6; background: var(--accent); color: #fff; text-decoration: none; writing-mode: vertical-rl; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 18px 11px; display: flex; gap: 12px; align-items: center; transition: padding .2s }
.side-tab:hover { padding-right: 15px; color: #fff }
.side-tab b { font-weight: 400; font-size: 15px; writing-mode: horizontal-tb }

/* Tonight's crawl: three floating cards, with the walk from the previous stop */
.picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.pick { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: var(--ink); min-width: 0; border-radius: 6px; overflow: hidden; background: var(--frost); box-shadow: inset 0 0 0 1px var(--frost-line), var(--shadow); transition: transform .3s }
.pick:hover { transform: translateY(-3px) }
.pick figure { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-3) }
.pick figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease }
.pick:hover figure img { transform: scale(1.03) }
.pick .role { position: absolute; left: 12px; top: 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #161A22; padding: 5px 9px; border-radius: 3px }
.pick .leg { position: absolute; right: 12px; top: 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: rgba(22, 26, 34, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; padding: 5px 9px; border-radius: 3px }
.pick .leg::before { content: "→ "; color: #FF7A4D }
.pick-body { padding: 18px 20px 22px; display: grid; gap: 8px; align-content: start }
.pick h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: .005em; line-height: 1; text-transform: uppercase }
.pick:hover h3 { color: var(--accent-text) }
.status { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px }
.status.live { color: var(--accent-text) }
.status.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(250, 54, 0, .15) }
.pick-meta { margin: 0; font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }

/* voice */
.why { font-family: var(--body); font-style: normal; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--ink-2); margin: 0 }
.why.big { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; max-width: 44ch; color: var(--ink) }
.pick .why { font-size: 16px; color: var(--ink) }
.vibe { display: flex; flex-wrap: wrap; gap: 6px }
.vibe span { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; background: var(--frost); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2) }

/* home: content + sticky rail */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px }
.home-main { display: grid; gap: 80px; min-width: 0 }
.rail { display: grid; gap: 12px; align-content: start }
@media (min-width: 1100px) {
  .home-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px }
  .rail { position: sticky; top: 132px }
  .venue-rail { top: 24px }
}
.rail-box { border-radius: 6px; background: var(--frost); box-shadow: inset 0 0 0 1px var(--frost-line); padding: 20px; display: grid; gap: 12px }
.rail-label { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px }
.rail-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none }
.rail-box.now { background: var(--deep); color: var(--on-deep); box-shadow: var(--shadow) }
.rail-box.now .rail-label { color: rgba(236, 237, 239, .55) }
.clock { font-family: var(--display); font-weight: 400; font-size: 48px; white-space: nowrap; line-height: .95; text-transform: uppercase }
.on-now { display: flex; align-items: baseline; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(236, 237, 239, .7) }
.on-now b { font-family: var(--display); font-weight: 400; font-size: 30px; color: #FF7A4D; letter-spacing: 0 }
.next { font-size: 13.5px; color: rgba(236, 237, 239, .8) }
.next a { color: #fff }
.rail-box.edit .btn { padding: 11px 15px }
.hoodmap { width: 100%; height: auto; display: block; color: var(--ink); border-radius: 4px; background: var(--frost-2) }
.hoodmap .hood-dot { cursor: pointer }
.hoodmap .hood-dot circle { fill: var(--accent); fill-opacity: .85; stroke: var(--paper); stroke-width: .8 }
.hoodmap .hood-dot text { font-family: var(--body); font-weight: 500; font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-2) }
.hoodmap .hood-dot text.end { text-anchor: end }
.hoodmap .hood-dot.empty circle { fill: var(--paper-3); fill-opacity: 1 }
.hoodmap .hood-dot.on circle { fill: var(--ink) }
.hoodmap .hood-dot.on text { fill: var(--ink); font-weight: 700 }
.hoodmap .hood-dot:hover text, .hoodmap .hood-dot:focus text { fill: var(--accent-text) }
.hoodmap .hood-dot:focus { outline: none }
.hoodmap .river { font-family: var(--serif); font-style: italic; font-size: 10px; fill: var(--river-text) }
.map-note { margin: 0; font-size: 12.5px; color: var(--muted) }
.also { list-style: none; margin: 0; padding: 0; display: grid }
.also li + li { border-top: 1px solid var(--line) }
.also a { display: grid; gap: 2px; padding: 10px 0; text-decoration: none; color: var(--ink) }
.also b { font-weight: 600; font-size: 15px; letter-spacing: -.01em }
.also span { font-size: 13px; color: var(--muted); line-height: 1.4 }
.also a:hover b { color: var(--accent-text) }

/* venue page */
.venue-art { margin: 0; line-height: 0; overflow: hidden; border-radius: 6px; box-shadow: var(--shadow) }
.venue-art svg { width: 100%; height: auto; display: block }
.mast-side .lede { font-size: 14px }
.mast-main .why.big { margin-top: 6px }
.chip.solid { background: var(--accent-fill); box-shadow: none; color: #fff }
.chip.solid:hover { background: var(--ink); color: var(--paper) }
.off-days { margin: 0; font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }

/* art: glass by day, neon by night (both versions are in the page; the theme picks one) */
span.art-d { display: contents }
.art-n { display: none }
:root[data-theme="dark"] .art-d { display: none }
:root[data-theme="dark"] span.art-n { display: contents }
:root[data-theme="dark"] img.art-n { display: block }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .art-d { display: none } :root:not([data-theme="light"]) span.art-n { display: contents } :root:not([data-theme="light"]) img.art-n { display: block } }

@media (max-width: 1099px) { .side-tab { display: none } }
@media (max-width: 900px) {
  .nav { padding-top: 14px; padding-bottom: 10px }
  .nav nav { order: 4; width: calc(100% + 48px); margin: 0 -24px }
  .nav ul { overflow-x: auto; padding: 4px 24px; scrollbar-width: none }
  .nav ul::-webkit-scrollbar { display: none }
  .mast-grid { grid-template-columns: 1fr; padding-top: 18px; padding-bottom: 24px }
  .mast-side { padding-bottom: 0 }
  .picks { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(300px, 46%); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; scrollbar-width: none; padding: 4px 24px 24px; margin: -4px -24px -24px }
  .picks::-webkit-scrollbar { display: none }
  .pick { scroll-snap-align: start }
}
@media (max-width: 560px) {
  body::before { background-size: calc(100% / 3) 100% }
  .wrap, .nav, .mast-grid { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)) }
  .nav nav { width: calc(100% + 36px); margin: 0 -18px }
  .nav ul { padding: 4px 18px }
  .logo .word { font-size: 17px }
  main .wrap { padding-block: 32px 72px; gap: 60px }
  .home-main { gap: 60px }
  .bar { position: sticky }
  .days { gap: 0 }
  .day { font-size: 10.5px; letter-spacing: .06em }
  .filters { gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 6px 18px 12px }
  .filters::-webkit-scrollbar { display: none }
  .filters > * { flex: none }
  .filters input[type="search"] { flex: 0 0 200px }
  .row { grid-template-columns: 1fr; gap: 3px; padding: 18px 0 }
  .row.featured { padding-inline: 14px; margin-inline: -14px }
  .time { display: flex; gap: 10px; align-items: baseline; padding-top: 0 }
  .time .live { margin-top: 0 }
  .who a.v { font-size: 19px }
  .slot h3 .trust { display: none }
  .picks { grid-auto-columns: 84%; padding: 4px 18px 24px; margin: -4px -18px -24px; gap: 10px; scroll-padding-inline: 18px }
  .pick h3 { font-size: 26px }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .tile.has-icon { padding: 18px 14px 16px; min-height: 150px; align-content: end }
  .tile .icon { width: 64px; height: 64px; top: 10px; right: 10px; bottom: auto }
  .tile b { font-size: 20px }
  .venue-art { max-width: 460px }
  .cta-slot { font-size: 16px }
  .foot-word { font-size: 25vw }
}
.hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 14px }
.hours dt { color: var(--muted); font-weight: 500 }
.hours dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums }
.also b small { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-left: 6px }
.rides { margin: 14px 0 0; font-size: 13px; color: var(--muted) }
.rides a { color: var(--ink); font-weight: 500 }
.rides a:hover { color: var(--accent-text) }
@media (max-width: 640px) { .eyebrow { white-space: normal; max-width: 34ch } }

/* ---------- neighborhoods: interactive map + synced list ---------- */
.nmap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 16px; align-items: start }
.nmap-map { position: sticky; top: 16px }
.nmap-canvas { position: relative; border-radius: 8px; overflow: hidden; background: var(--frost); box-shadow: inset 0 0 0 1px var(--frost-line), var(--shadow); height: calc(100vh - 32px); max-height: 860px; min-height: 480px }
.bigmap { width: 100%; height: 100%; display: block; color: var(--ink); touch-action: none; cursor: grab; user-select: none; --s: 1 }
.bigmap:active { cursor: grabbing }
.bigmap .river { fill: none; stroke: #7FA9C7; stroke-width: 7px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; opacity: .9 }
.bigmap .river-line { fill: none; stroke: currentColor; stroke-width: 1px; stroke-dasharray: 4 4; opacity: .35 }
.bigmap .river-name { font-family: var(--serif); font-style: italic; font-size: calc(16px * var(--s)); fill: var(--river-text) }
.bigmap .hz { cursor: pointer; outline: none; opacity: .55; transition: opacity .3s }
.bigmap .hz path { fill: var(--fill, transparent); stroke: var(--fill, transparent); stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-linejoin: miter; transition: fill .3s }
.bigmap .hz:hover, .bigmap .hz:focus { opacity: .72 }
.bigmap.has-hood .hz:not(.on) { opacity: .15 }
.bigmap.has-hood .hz.on { opacity: .7 }
.bigmap .borders { fill: none; stroke: var(--paper); stroke-width: 1.6px; stroke-linejoin: miter; pointer-events: none }
.bigmap .hl { cursor: pointer }
.bigmap .hl .lab { transform: scale(var(--s)) }
.bigmap .hl text { font-family: var(--body); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-anchor: middle; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round }
.bigmap .hl text.n { font-weight: 600; font-size: 9px; letter-spacing: .1em; fill: var(--accent-text) }
.bigmap.has-hood .hl:not(.on) { opacity: .45 }
.bigmap .vd { cursor: pointer }
.bigmap .vd circle { r: calc(4px * var(--s)); fill: var(--paper); stroke: var(--ink); stroke-width: 1.2px; vector-effect: non-scaling-stroke; transition: opacity .2s }
.bigmap .vd.later circle { fill: var(--ink) }
.bigmap .vd.live circle { fill: #fff; stroke: var(--accent); stroke-width: 3px; r: calc(5px * var(--s)) }
.bigmap .vd.none circle, .bigmap .vd.off circle { opacity: .4 }
.bigmap .vd.dim circle { opacity: .2 }
.bigmap .vd.sel circle { r: calc(9px * var(--s)); fill: var(--accent); stroke: var(--paper); stroke-width: 3px; opacity: 1 }
.bigmap .vd:hover circle { stroke: var(--accent); stroke-width: 3px }
.bigmap .me { fill: #2F7BF5; stroke: #fff; stroke-width: calc(2px * var(--s)); r: calc(7px * var(--s)) }
.bigmap .me-halo { fill: #2F7BF5; opacity: .18; r: calc(18px * var(--s)) }
.nmap-zoom { position: absolute; right: 12px; top: 12px; display: grid; gap: 6px }
.nmap-zoom button { font: inherit; font-size: 15px; font-weight: 600; min-width: 38px; height: 38px; padding: 0 10px; border: 0; border-radius: 4px; background: var(--frost-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px) }
.nmap-zoom button:hover { background: var(--paper) }
.nmap-zoom #z-reset { font-size: 11px; letter-spacing: .1em; text-transform: uppercase }
.nmap-legend { position: absolute; left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; border-radius: 4px; background: var(--frost-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2) }
.nmap-legend span { display: inline-flex; align-items: center; gap: 6px }
.lg { width: 9px; height: 9px; border-radius: 50%; display: inline-block }
.lg.live { background: var(--accent) } .lg.later { background: var(--ink); opacity: .75 } .lg.none { background: var(--paper-3); box-shadow: inset 0 0 0 1px var(--rule-strong) }
.hood-card { position: absolute; left: 12px; top: 12px; max-width: min(320px, calc(100% - 80px)); display: grid; gap: 4px; padding: 14px 40px 14px 16px; border-radius: 6px; background: var(--frost-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow) }
.hood-card b { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; text-transform: uppercase }
.hood-card span { font-size: 12.5px; color: var(--muted) }
.hood-card a { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); text-decoration: none; margin-top: 4px }
.hood-card button { position: absolute; right: 8px; top: 6px; border: 0; background: none; font-size: 20px; color: var(--muted); cursor: pointer }
.nmap-side { display: grid; gap: 10px; align-content: start; min-width: 0 }
.nmap-filters { display: grid; gap: 4px; position: sticky; top: 0; z-index: 2; background: var(--paper); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 8px; padding: 2px 4px 6px }
.nmap-days { padding-top: 10px }
.nmap-days .day { padding: 12px 0 10px; font-size: 11px; letter-spacing: .1em }
.nmap-filters .filters { padding: 4px 0 }
.nmap-count { margin: 0; padding: 0 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.nmap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.nmap-list .empty { padding: 20px 4px; color: var(--muted) }
.mi { position: relative; border-radius: 6px; background: var(--frost); box-shadow: inset 0 0 0 1px var(--frost-line); transition: background .2s }
.mi:hover { background: var(--frost-2) }
.mi.sel { background: var(--frost-2); box-shadow: inset 0 0 0 1.5px var(--accent) }
.mi-btn { font: inherit; text-align: left; width: 100%; border: 0; background: none; color: var(--ink); cursor: pointer; display: grid; gap: 4px; padding: 14px 70px 14px 16px }
.mi-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.mi-top b { font-weight: 600; font-size: 17px; letter-spacing: -.01em }
.mi-top em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text) }
.mi-meta { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.mi-meta .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: .7; flex: none }
.mi.live .mi-meta { color: var(--accent-text) } .mi.live .mi-meta .dot { background: var(--accent); opacity: 1; box-shadow: 0 0 0 3px rgba(250, 54, 0, .18) }
.mi-deal { font-size: 14.5px; line-height: 1.45; color: var(--ink-2) }
.mi-go { position: absolute; right: 14px; top: 14px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-decoration: none }
.mi-go:hover { color: var(--accent-text) }
@media (min-width: 1000px) { .nmap-side { max-height: calc(100vh - 32px); overflow-y: auto; position: sticky; top: 16px; scrollbar-width: thin; padding-right: 2px } }
@media (max-width: 999px) {
  .nmap { grid-template-columns: 1fr }
  .nmap-map { position: relative; top: 0 }
  .nmap-canvas { height: 62vh; min-height: 360px }
}
@media (max-width: 560px) {
  .nmap-canvas { height: 58vh; margin: 0 -18px; border-radius: 0 }
  .nmap-legend { font-size: 9px; gap: 3px 8px; padding: 6px 8px; right: 12px }
  .heatbar { width: 44px }
  .nmap-zoom button { min-width: 34px; height: 34px }
  .hood-card b { font-size: 22px }
}
.bigmap:not(.zoomed) .hl text.n { display: none }
.bigmap:not(.zoomed) .hl text { font-size: 10px }
.rail-box .go.map-link { margin-top: 2px }
.nmap-legend .heat { gap: 8px }
.heatbar { width: 70px; height: 9px; border-radius: 2px; display: inline-block; background: linear-gradient(90deg, rgb(76,127,230), rgb(169,200,240), rgb(246,185,138), rgb(217,48,0)); box-shadow: inset 0 0 0 1px var(--line) }
.lg.live { background: #fff; box-shadow: inset 0 0 0 2.5px var(--accent) }
.bigmap .vd circle { stroke: #fff }
.bigmap .vd.later circle { fill: var(--ink); stroke: #fff }
:root[data-theme="dark"] .bigmap .vd.later circle { fill: #fff; stroke: #0D0F14 }
:root[data-theme="dark"] .heatbar { background: linear-gradient(90deg, rgb(40,70,150), rgb(72,112,186), rgb(170,82,44), rgb(232,72,18)) }
.bigmap .river-name { font-size: 13px; fill: #4F7FA3; paint-order: stroke; stroke: var(--paper); stroke-width: 3px }
.bigmap .area-lines { fill: none; stroke: var(--ink); stroke-opacity: .35; stroke-width: 1.2px; stroke-dasharray: 5 3; pointer-events: none }
.nmap-credit { margin: 6px 2px 0; font-size: 10.5px; color: var(--muted) }

/* ---------- quick filters: big blue tap targets, set apart from the orange day tabs ---------- */
:root { --q: #2C5BC0; --q-bg: rgba(76, 127, 230, .12); --q-line: rgba(76, 127, 230, .35); --q-on: #2F62D6 }
:root[data-theme="dark"] { --q: #A9C4FF; --q-bg: rgba(110, 150, 255, .12); --q-line: rgba(110, 150, 255, .35); --q-on: #4C7FE6 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --q: #A9C4FF; --q-bg: rgba(110, 150, 255, .12); --q-line: rgba(110, 150, 255, .35); --q-on: #4C7FE6 } }
.qf { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 4px }
.qchip { font: inherit; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--q-bg); box-shadow: inset 0 0 0 1px var(--q-line); color: var(--q); cursor: pointer; transition: background .2s, color .2s; -webkit-tap-highlight-color: transparent }
.qchip svg { width: 16px; height: 16px; flex: none }
.qchip:hover { background: rgba(76, 127, 230, .2) }
.qchip[aria-pressed="true"] { background: var(--q-on); color: #fff; box-shadow: none }
.qchip.busy { opacity: .6 }
@media (max-width: 560px) {
  .qf { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 10px 18px 4px }
  .qf::-webkit-scrollbar { display: none }
  .qchip { flex: none; font-size: 13.5px; min-height: 42px; padding: 0 14px }
}

/* ---------- compact rows (Now / Next / Later) ---------- */
.crow { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line) }
.crow.more { display: none }
.crow.featured { background: var(--accent-tint); border-radius: 4px; padding-inline: 12px; margin-inline: -12px; border-bottom-color: transparent }
.ct { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap }
.ct .ok { display: inline-flex; vertical-align: -2px; margin-right: 7px; color: var(--muted) }
.ct.live { color: var(--accent-text) }
.ct.live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(250, 54, 0, .15) }
.cmain { min-width: 0; display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: baseline }
.cv { font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--ink); text-decoration: none }
.cv:hover { color: var(--accent-text) }
.ch { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.ch b { color: var(--q); font-weight: 700 }
.ctag { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; background: var(--frost-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); text-decoration: none }
.ctag.ft { background: var(--ink); color: var(--paper); box-shadow: none }
.ctag.warn { background: var(--accent-tint); color: var(--accent-text); box-shadow: none }
.ctag.rs { background: var(--accent-fill); color: #fff; box-shadow: none }
.cd { flex-basis: 100%; font-size: 14.5px; line-height: 1.45; color: var(--ink-2) }
.cmore { flex-basis: 100%; display: none; gap: 3px; margin-top: 4px }
.crow.expanded .cmore { display: grid }
.cd2 { font-size: 13.5px; color: var(--muted); line-height: 1.4 }
.cx { font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); background: none; border: 0; cursor: pointer; padding: 6px 0 6px 8px; white-space: nowrap }
.cx:hover { color: var(--accent-text) }
details.slot.earlier summary { cursor: pointer; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 14px 0; border-bottom: 1px solid var(--line) }
.slot h3 + .crow { border-top: 0 }
@media (max-width: 640px) {
  .crow { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 0 }
  .ct { grid-column: 1 / -1 }
  .cv { font-size: 16.5px }
  .cd { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
  .crow.expanded .cd { -webkit-line-clamp: unset }
}
@media (max-width: 560px) { .bar { position: static } }

/* ---------- homepage list: time-slot tabs + card grid (layout C) ---------- */
.stabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin: 4px 0 16px; overflow-x: auto; scrollbar-width: none }
.stabs::-webkit-scrollbar { display: none }
.stab { font: inherit; flex: none; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 14px 16px 12px; border: 0; background: none; color: var(--muted); cursor: pointer; position: relative; display: inline-flex; gap: 8px; align-items: baseline }
.stab small { font-size: 11px; font-weight: 600; letter-spacing: 0; padding: 1px 7px; border-radius: 999px; background: var(--frost-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2) }
.stab:hover { color: var(--ink) }
.stab[aria-selected="true"] { color: var(--ink) }
.stab[aria-selected="true"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: var(--accent) }
.stab[aria-selected="true"] small { background: var(--accent-fill); color: #fff; box-shadow: none }
.stab:disabled { opacity: .35; cursor: default }
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px }
.stab .short { display: none }
.dv, .dd { overflow-wrap: anywhere }
.dcard { display: grid; gap: 7px; align-content: start; padding: 16px 16px 14px; border-radius: 6px; background: var(--frost); box-shadow: inset 0 0 0 1px var(--frost-line); min-width: 0 }
.dcard.more { display: none }
.dcard.featured { box-shadow: inset 0 0 0 1.5px var(--accent) }
.dt { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 7px }
.dt .ok { color: var(--muted); display: inline-flex }
.dt.live { color: var(--accent-text) }
.dt.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(250, 54, 0, .15); flex: none; order: -1 }
.dv { font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1; text-transform: uppercase; color: var(--ink); text-decoration: none }
.dv:hover { color: var(--accent-text) }
.dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.dm summary { cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); list-style: none }
.dm summary::-webkit-details-marker { display: none }
.dm ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; color: var(--ink-2) }
.df { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 2px }
.df b { color: var(--q, var(--accent-text)) }
.dtags { display: inline-flex; flex-wrap: wrap; gap: 4px }
@media (max-width: 560px) {
  .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .dt { flex-wrap: wrap; font-size: 10px; letter-spacing: .08em; gap: 5px }
  .df { font-size: 9.5px; letter-spacing: .08em }
  .stab .long { display: none }
  .stab .short { display: inline }
  .dcard { padding: 12px 12px 11px; gap: 6px }
  .dv { font-size: 18px }
  .dd { font-size: 12.5px; -webkit-line-clamp: 4 }
  .stab { font-size: 11.5px; padding: 12px 12px 10px }
  .stab[aria-selected="true"]::after { left: 12px; right: 12px }
}
@media (max-width: 340px) { .dgrid { grid-template-columns: minmax(0, 1fr) } }
.home-main > *, .home-main section { min-width: 0 }

/* ---------- Ask Off Hours (featured planner) ---------- */
.ask { position: relative; overflow: hidden; border-radius: 10px; padding: clamp(22px, 3vw, 34px); display: grid; gap: 16px; color: #F5EEE8;
  background: radial-gradient(600px 300px at 100% 0%, rgba(250, 54, 0, .45), transparent 70%), radial-gradient(500px 300px at 0% 100%, rgba(76, 127, 230, .35), transparent 70%), #1A100C; box-shadow: var(--shadow) }
:root[data-theme="dark"] .ask { background: radial-gradient(600px 300px at 100% 0%, rgba(250, 54, 0, .35), transparent 70%), radial-gradient(500px 300px at 0% 100%, rgba(76, 127, 230, .3), transparent 70%), #151821; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) }
.ask-head { display: grid; gap: 8px; max-width: 62ch }
.ask-badge { justify-self: start; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #FFB08F; padding: 5px 10px; border-radius: 999px; background: rgba(250, 54, 0, .18); box-shadow: inset 0 0 0 1px rgba(250, 54, 0, .4) }
.ask-badge svg { width: 13px; height: 13px }
.ask h2 { color: #fff; font-size: clamp(34px, 4.4vw, 56px) }
.ask h2 span { color: #FF8A5C }
.ask-head p { margin: 0; font-size: 15.5px; line-height: 1.5; color: rgba(245, 238, 232, .82) }
.ask-form { display: flex; gap: 8px; flex-wrap: wrap }
.ask-form input { flex: 1 1 260px; font-size: 17px; padding: 15px 18px; border-radius: 8px; background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25) }
.ask-form input::placeholder { color: rgba(245, 238, 232, .55) }
.ask-form input:focus { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1.5px #FF8A5C }
.ask-form .btn { padding: 0 22px; min-height: 52px; border-radius: 8px; font-size: 13px }
.ask-form .btn:hover { background: #fff; color: #1A100C }
.ask-form.busy .btn { opacity: .6; pointer-events: none }
.ask-try { display: flex; gap: 8px; flex-wrap: wrap }
.ask-chip { font: inherit; font-size: 13px; padding: 8px 13px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: rgba(245, 238, 232, .9); cursor: pointer; text-align: left }
.ask-chip:hover { background: rgba(255, 255, 255, .16); color: #fff }
.ask-out { display: grid; gap: 14px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, .12) }
.ask-thinking { margin: 8px 0 0; color: rgba(245, 238, 232, .75); display: flex; align-items: center; gap: 5px }
.ask-thinking i { width: 6px; height: 6px; border-radius: 50%; background: #FF8A5C; animation: askdot 1s infinite ease-in-out }
.ask-thinking i:nth-child(2) { animation-delay: .15s } .ask-thinking i:nth-child(3) { animation-delay: .3s; margin-right: 6px }
@keyframes askdot { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .ask-thinking i { animation: none } }
.ask-answer { display: grid; gap: 6px; padding-top: 12px }
.ask-answer p { margin: 0; font-size: 17px; line-height: 1.5; color: #fff }
.ask-src { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 238, 232, .55) }
.ask-stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px }
.ask-stops li { display: grid; gap: 6px; align-content: start }
.ask-leg { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #FFB08F }
.ask-stops.crawl li:first-child { padding-top: 21px }
.ask-stop { display: grid; gap: 6px; padding: 14px 16px; border-radius: 8px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14) }
.ask-role { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 238, 232, .6) }
.ask-v { font-family: var(--display); font-size: 24px; line-height: 1; text-transform: uppercase; color: #fff; text-decoration: none }
.ask-v:hover { color: #FF8A5C }
.ask-t { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(245, 238, 232, .65) }
.ask-t.live { color: #FF8A5C }
.ask-stop p { margin: 0; font-size: 14px; line-height: 1.45; color: rgba(245, 238, 232, .88) }
.ask-stop .ask-why { color: #FFB08F; font-size: 13px }
.ask-links { display: flex; gap: 14px; margin-top: 2px }
.ask-links a { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-decoration: none }
.ask-links a:hover { color: #FF8A5C }
.ask-fine { margin: 0; font-size: 12px; color: rgba(245, 238, 232, .5) }
@media (max-width: 560px) {
  .ask { margin: 0 -18px; border-radius: 0; padding: 26px 18px }
  .ask-form .btn { flex: 1 1 100% }
  .ask-try { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 0 18px }
  .ask-try::-webkit-scrollbar { display: none }
  .ask-chip { flex: none }
}

/* ---------- homepage flow (Nov 5): hero + live card, planner, crawl, then one deal browser ---------- */
.now-card { display: grid; gap: 8px; padding: 20px 22px; border-radius: 10px; background: var(--deep); color: var(--on-deep); box-shadow: var(--shadow); max-width: 380px; width: 100%; justify-self: end }
.now-card .rail-label { color: rgba(236, 237, 239, .6) }
.now-card .clock { font-size: 44px }
.now-go { margin-top: 4px; justify-self: start; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-decoration: none; padding: 10px 14px; border-radius: 6px; background: var(--accent-fill) }
.now-go:hover { background: #fff; color: var(--deep) }
.kicker-line { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); display: flex; align-items: center; gap: 8px; margin-bottom: 8px }
.kicker-line::before { content: ""; width: 18px; height: 2px; background: var(--accent) }
.deals .summary { margin-bottom: 14px }
.dealbar { position: sticky; top: 0; z-index: 6; display: grid; gap: 2px; margin: 0 -14px; padding: 6px 14px 0; border-radius: 0 0 10px 10px; background: var(--bar-bg); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 1px 0 var(--line) }
.db-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0 }
.db-label { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.dealbar .days { padding-top: 0; border-bottom: 0 }
.dealbar .day { padding: 12px 0 10px }
.dealbar .stabs { margin: 0; border-bottom: 0 }
.db-filters { display: grid; gap: 10px; padding: 14px 0 16px }
.db-filters .qf { padding: 0 }
.db-filters .filters { padding: 0 0 0 64px }
.deals .dgrid { margin-top: 4px }
@media (max-width: 900px) {
  .mast-grid .now-card { justify-self: stretch; max-width: none }
}
@media (max-width: 560px) {
  .mast-main h1 { font-size: 46px }
  .mast-main .lede { font-size: 15px }
  .now-card .clock { font-size: 30px }
  .dealbar { margin: 0 -18px; padding: 4px 18px 0; border-radius: 0 }
  .db-row { grid-template-columns: minmax(0, 1fr); gap: 0 }
  .db-label { display: none }
  .dealbar .day { padding: 11px 0 9px }
  .db-filters { padding: 12px 0 14px }
  .db-filters .filters > * { min-width: 0; width: 100% }
  .db-filters .qf { margin: 0 -18px; padding: 0 18px; flex-wrap: nowrap; overflow-x: auto }
  .db-filters .qchip { min-height: 40px; font-size: 13px; padding: 0 13px }
  .kicker-line { font-size: 10.5px }
}

/* ---------- homepage UX pass (Nov 5): today at a glance, On now tab, card status, next step ---------- */
.mast-main .hero-lede { max-width: 50ch; font-size: 18px; line-height: 1.55; color: var(--ink-2); margin-top: 4px }
.now-card { gap: 12px; padding: 20px 22px 18px }
.nc-top { display: grid; gap: 6px }
.nc-status { margin: 0; font-size: 15px; line-height: 1.45; color: rgba(236, 237, 239, .85) }
.nc-status b { font-family: var(--display); font-weight: 400; font-size: 26px; color: #FF7A4D; vertical-align: -2px }
.nc-status a { color: #fff; text-underline-offset: 3px }
.nc-day { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: end; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, .1) }
.ncs { font: inherit; border: 0; background: none; padding: 6px 0 0; margin: 0; cursor: pointer; display: grid; justify-items: stretch; gap: 5px; color: rgba(236, 237, 239, .7); text-align: center; border-radius: 4px }
.ncs b { font-family: var(--display); font-weight: 400; font-size: 17px; line-height: 1; color: #fff }
.ncs i { display: block; border-radius: 3px 3px 1px 1px; background: rgba(255, 255, 255, .2); transition: background .2s }
.ncs span { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap }
.ncs.cur i { background: var(--accent) }
.ncs.cur span { color: #FF8A5C }
.ncs.past { opacity: .45 }
.ncs:hover i, .ncs:focus-visible i { background: #FF8A5C }
.ncs:disabled { cursor: default; opacity: .25 }
.now-go { justify-self: stretch; text-align: center; padding: 12px 14px }

.stab { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 7px; row-gap: 2px; padding: 12px 14px 10px; letter-spacing: .08em; font-size: 12.5px; text-align: left }
.stab em { grid-column: 1 / -1; font-style: normal; font-size: 10.5px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--muted) }
.stab[aria-selected="true"]::after { left: 14px; right: 14px }
.stab.now .sn::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(250, 54, 0, .15) }
.stab .short, .stab .long { display: none }

.dt { justify-content: space-between }
.dt .ok { margin-left: auto; color: var(--muted) }
.dt .ok:hover { color: var(--accent-text) }
.dt .chk { width: 14px; height: 14px }
.dt.soon { color: var(--q, var(--accent-text)) }
.dt.live::before { order: 0 }
.dt.live { justify-content: flex-start }
.dcard.over { opacity: .55 }
.dcard.over:hover { opacity: 1 }
.dm li span { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }

.next-slot { font: inherit; width: 100%; margin-top: 14px; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: left; padding: 16px 20px; border: 0; border-radius: 8px; cursor: pointer; color: var(--ink); background: var(--frost); box-shadow: inset 0 0 0 1px var(--frost-line); transition: background .2s }
.next-slot:hover { background: var(--frost-2) }
.next-slot span { grid-row: 1 / 3; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text) }
.next-slot b { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; text-transform: uppercase }
.next-slot small { grid-column: 2; font-size: 12.5px; color: var(--muted) }
.next-slot i { grid-column: 3; grid-row: 1 / 3; font-style: normal; font-size: 22px; color: var(--accent) }
.show-more + .next-slot { margin-top: 10px }

.f-clear { font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); background: none; border: 0; padding: 8px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px }
.empty-box { display: grid; justify-items: start; gap: 12px; padding: 28px 22px; border-radius: 8px; background: var(--frost); box-shadow: inset 0 0 0 1px var(--frost-line) }
.empty-box p { margin: 0; font-size: 16px }

@media (max-width: 900px) {
  .mast-main .hero-lede { font-size: 16px }
}
@media (max-width: 560px) {
  .mast-main .hero-lede { font-size: 15.5px }
  .now-card { padding: 16px 16px 14px; gap: 10px }
  .now-card .clock { font-size: 32px }
  .nc-status { font-size: 14px }
  .stab { padding: 12px 12px 10px; font-size: 12px }
  .stab em { display: none }
  .dgrid { grid-template-columns: minmax(0, 1fr); gap: 8px }
  .dcard { padding: 14px 15px 12px; gap: 6px }
  .dv { font-size: 22px }
  .dt { font-size: 10.5px }
  .db-filters .filters { padding: 0; margin: 0; overflow: visible; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) }
  .db-filters .filters .f-clear { grid-column: 1 / -1; justify-self: start; padding: 2px 0 }
  .next-slot { padding: 14px 16px }
  .next-slot b { font-size: 22px }
  /* Tonight's crawl as a route: stacked stops with a thumbnail, so all three show at once. */
  .picks { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow: visible; padding: 0; margin: 0; gap: 8px }
  .pick { grid-template-rows: none; grid-template-columns: 116px minmax(0, 1fr) }
  .pick figure { aspect-ratio: auto; height: 100% ; min-height: 128px }
  .pick .role { left: 6px; top: 6px; font-size: 9px; padding: 4px 6px; letter-spacing: .1em }
  .pick .leg { left: 6px; right: auto; top: auto; bottom: 6px; font-size: 9px; padding: 4px 6px; letter-spacing: .06em }
  .pick-body { padding: 12px 14px 14px; gap: 5px }
  .pick h3 { font-size: 22px }
  .pick .why { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
  .hood-grid { gap: 6px }
  .hood-grid .tile { min-height: 0; padding: 12px 14px; gap: 2px }
  .hood-grid .tile b { font-size: 17px }
  .hood-grid .tile span { font-size: 10px }
}
.dcard .ctag.rs { background: none; color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent) }
.dcard .ctag.rs:hover { background: var(--accent-fill); color: #fff }
@media (max-width: 560px) {
  .dealbar .stabs, .db-filters .qf, .ask-try { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent) }
}

/* ---------- neighborhoods page UX pass (Nov 5) ---------- */
.bigmap .vd.over circle { fill: var(--ink); opacity: .35 }
:root[data-theme="dark"] .bigmap .vd.over circle { fill: #fff }
.nmap-canvas { height: calc(100vh - 56px) }
.nmap-qf { padding: 6px 0 2px; gap: 6px }
.nmap-qf .qchip { min-height: 36px; font-size: 13px; padding: 0 12px }
.hood-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px 0 4px }
.hood-chips::-webkit-scrollbar { display: none }
.hchip { font: inherit; flex: none; display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 8px 12px; border: 0; border-radius: 999px; cursor: pointer; color: var(--ink); background: var(--frost); box-shadow: inset 0 0 0 1px var(--line) }
.hchip small { font-size: 11px; color: var(--muted) }
.hchip:hover { background: var(--frost-2) }
.hchip.on { background: var(--ink); color: var(--paper); box-shadow: none }
.hchip.on small { color: inherit; opacity: .7 }
.hchip:disabled { opacity: .4; cursor: default }
.mi-meta { text-transform: none; letter-spacing: .02em; font-size: 12.5px }
.mi.soon .mi-meta { color: var(--q, var(--accent-text)) }
.mi.over { opacity: .55 }
.mi.over:hover, .mi.over.sel { opacity: 1 }
.mi.more { display: none }
.mi-foot { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.mi-all { list-style: none }
.mi-all .show-more { margin-top: 4px }
.hood-card .hc-line { font-size: 14px; font-weight: 600; color: var(--accent-text) }
.sec-note { margin: -8px 0 16px; color: var(--muted); font-size: 14px }
@media (max-width: 999px) {
  .nmap-canvas { height: 62vh }
  .nmap-filters { position: sticky; top: 0; z-index: 5; margin: 0 -18px; padding: 2px 18px 6px; border-radius: 0; background: var(--bar-bg); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 1px 0 var(--line) }
}
@media (max-width: 560px) {
  .nmap-canvas { height: 56vh }
  .nmap-qf { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 6px 18px 2px }
  .nmap-qf::-webkit-scrollbar { display: none }
  .nmap-qf, .hood-chips { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent) }
  .hood-chips { margin: 0 -18px; padding: 6px 18px 4px }
  .nmap-legend { left: 8px; right: auto; bottom: 8px }
  .nmap-credit { padding: 0 2px }
  .mi-btn { padding: 13px 64px 13px 14px }
}
@media (max-width: 999px) {
  /* Phones and tablets: controls first, then the map they drive, then the list. */
  .nmap-side { display: contents }
  .nmap-filters { order: -1; position: static; margin: 0; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none }
  .nmap-list { order: 2 }
  .nmap-days { padding-top: 0 }
}
@media (max-width: 560px) {
  .nmap { gap: 10px }
  .mast.small .mast-grid { padding-bottom: 14px }
  .hood-card { padding: 10px 34px 10px 12px; max-width: 62% }
  .hood-card b { font-size: 19px }
  .hood-card span { font-size: 11.5px }
  .hood-card .hc-line { font-size: 13px }
  .hood-card a { font-size: 10.5px }
}

/* ---------- venue page UX pass (Nov 5): today card, real buttons, the week at a glance ---------- */
.v-now { display: grid; gap: 6px; max-width: 560px; margin-top: 10px; padding: 18px 20px; border-radius: 10px; background: var(--deep); color: var(--on-deep); box-shadow: var(--shadow) }
.vn-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px }
.vn-pill { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(236, 237, 239, .75); display: inline-flex; align-items: center; gap: 7px }
.vn-pill.live { color: #FF8A5C }
.vn-pill.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FA3600; box-shadow: 0 0 0 3px rgba(250, 54, 0, .25) }
.vn-pill.soon { color: #9DB8FF }
.vn-hours { font-size: 12.5px; color: rgba(236, 237, 239, .7) }
.vn-open { font-weight: 700; color: rgba(236, 237, 239, .9) }
.vn-open.on { color: #7FD69A }
.vn-deal { margin: 0; font-size: 19px; line-height: 1.4; color: #fff }
.vn-when { margin: 0; font-size: 14px; color: rgba(236, 237, 239, .8) }
.vn-week { justify-self: start; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-decoration: none }
.vn-week:hover { color: #FF8A5C }
.v-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px }
.v-actions .btn { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px }

.week { min-width: 0 }
.wk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.wk { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; padding: 16px 18px; border-radius: 8px; background: var(--frost); box-shadow: inset 0 0 0 1px var(--frost-line) }
.wk.none { background: none; box-shadow: inset 0 0 0 1px var(--line); padding-top: 12px; padding-bottom: 12px }
.wk.today { box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--frost-2) }
.wk-day { display: flex; flex-direction: column; align-items: flex-start; gap: 6px }
.wk-day b { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.05; text-transform: uppercase }
.wk.none .wk-day b { font-size: 17px; color: var(--muted) }
.wk-today { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--accent-fill); padding: 3px 7px; border-radius: 3px }
.wk-deals { display: grid; gap: 12px; min-width: 0 }
.wk-nil { font-size: 13px; color: var(--muted); align-self: center }
.wk-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: baseline }
.wk-t { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 6px }
.wk-row.live .wk-t { color: var(--accent-text) }
.wk-row.live .wk-t::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(250, 54, 0, .15); flex: none }
.wk-row.over { opacity: .5 }
.wk-what { display: grid; gap: 4px; justify-items: start }
.wk-what p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink) }
.wk-what p b { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 10px }
.v-fix { margin: 18px 2px 0; font-size: 13.5px; color: var(--muted) }
.v-fix a { color: var(--ink-2) }
.also .nb-now { font-size: 13px; color: var(--ink-2) }
.also .nb-now:empty { display: none }
.also .nb-now.live { color: var(--accent-text) }
.also .nb-now.live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px }
@media (max-width: 700px) {
  .wk { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 15px }
  .wk-day { flex-direction: row; align-items: center; gap: 10px }
  .wk-day b { font-size: 20px }
  .wk-row { grid-template-columns: minmax(0, 1fr); gap: 4px }
  .v-now { padding: 16px }
  .vn-deal { font-size: 17px }
  .v-actions .btn { flex: 1 1 auto; justify-content: center; padding: 0 14px }
}
@media (max-width: 700px) {
  /* Phones: a short strip of the drawing, and the rail leads with hours and nearby, map last. */
  .venue-art { max-width: none; height: 132px; display: flex; align-items: center }
  .venue-art > span { width: 100% }
  .venue-rail > .rail-box:first-child { order: 3 }
}

/* ---------- day pages (Nov 5): the homepage deal browser, opened on that day ---------- */
.js .seo-list { display: none }
.seo-h { margin: 22px 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text) }
.day-page { display: grid; gap: 28px; max-width: 1040px }
.day-page .deals .summary { margin-bottom: 10px }
.mast h1 .day-name { color: inherit }
.day-page #dayname { font-size: clamp(28px, 4vw, 46px) }

/* ---------- deal-type pages (Nov 5): one card per place, spots by day, filters ---------- */
.type-card { position: relative }
.tc-art { position: absolute; right: 14px; top: 10px; width: 64px; height: 64px; line-height: 0; opacity: .95 }
.type-card .nc-status { padding-right: 70px }
.nc-week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px }
.ncs.sel i { background: #fff }
.ncs.sel span { color: #fff }
.tdays { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 0 }
.tday { font: inherit; display: inline-flex; align-items: baseline; gap: 6px; position: relative; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 9px 13px; border: 0; border-radius: 999px; cursor: pointer; color: var(--ink); background: var(--frost); box-shadow: inset 0 0 0 1px var(--line) }
.tday small { font-size: 11px; color: var(--muted); letter-spacing: 0 }
.tday .today { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 8.5px; letter-spacing: .12em; color: var(--accent-text) }
.tday.on { background: var(--ink); color: var(--paper); box-shadow: none }
.tday.on small { color: inherit; opacity: .7 }
.tday:disabled { opacity: .35; cursor: default }
.t-count { margin: 0 0 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.sched { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13px; color: var(--ink-2) }
.sched b { font-weight: 600; color: var(--ink) }
.sched li.hit b { color: var(--accent-text) }
.type-page .dealbar { padding-top: 4px }
.cat-group { display: grid; gap: 14px }
.cat-h { font-size: 12px !important; font-family: inherit !important; font-weight: 700 !important; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); margin: 0 }
.cat-group + .cat-group { margin-top: 26px }
.tile .cat-today { font-style: normal; color: var(--accent-text) }
.tile.quiet .cat-today { color: var(--muted) }
@media (max-width: 560px) {
  .tdays { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 12px 18px 10px; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent) }
  .tdays::-webkit-scrollbar { display: none }
  .tday { flex: none }
  .type-page .db-filters .qf { flex-wrap: wrap; overflow: visible }
  .ncs span { font-size: 9px; letter-spacing: .02em }
  .tc-art { width: 48px; height: 48px }
  .type-card .nc-status { padding-right: 52px }
  .tile.has-icon { min-height: 112px; padding: 14px 12px 12px }
  .tile.has-icon .icon { width: 52px; height: 52px }
}
@media (max-width: 560px) {
  .tile.has-icon { min-height: 128px }
  .tile.has-icon .icon { width: 44px; height: 44px; top: 10px; right: 10px }
}
.sched li.hit { color: var(--ink) }