/* NY Nightlife v2 design system: "The Ledger" (concept 01, approved 2026-10-18).
   Ink / cream / bronze, Fraunces display + Instrument Sans body.
   Keep to these tokens and components.

   2026-10-20: fonts self-hosted; hero plates re-cut (gradient scrim, no clipped
   descenders); designed "pattern" plates for venues with no licensed photo;
   venue cards carry thumbnails; real desktop layout above 1040px. */

/* ---------------------------------------------------------------- fonts
   Self-hosted so no visitor IP reaches a third party on page load.
   Fraunces and Instrument Sans are both SIL Open Font License 1.1. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/fraunces-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/fraunces-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/fraunces-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/fraunces-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url(/fonts/instrument-sans-normal-400_700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url(/fonts/instrument-sans-normal-400_700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #0B0908;
  --ink-2: #17130F;
  --ink-3: #221C17;
  --cream: #EDE7DE;
  --cream-2: #D6CCBE;
  --bronze: #C08F52;
  --bronze-dk: #A57638;
  --bronze-lt: #D9A86A;
  --text-2: #D6CEC3;
  --muted: #B5ABA0;
  --rule: #3A322B;
  --edge: #6B5F52;
  --display: 'Fraunces', Georgia, serif;
  --body: 'Instrument Sans', system-ui, sans-serif;
  --r-lg: 18px;
  --r-md: 14px;
  --pad: 18px;
  --col: 760px;      /* reading column; widened on big screens */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
body.tall-bar { padding-bottom: calc(176px + env(safe-area-inset-bottom)); }
body.no-bar { padding-bottom: 0; }
/* Nyla, the chatbot (css/concierge.css, unchanged), stands above the sticky action bar */
body:not(.no-bar) .nyb-bubble { bottom: calc(86px + env(safe-area-inset-bottom)); }
body:not(.no-bar) .nyb-teaser { bottom: 440px; }
body.tall-bar .nyb-bubble { bottom: calc(184px + env(safe-area-inset-bottom)); }
body.tall-bar .nyb-teaser { bottom: 538px; }
/* panel heights: 100vh first, then 100dvh (the visible height on phones with toolbars) where supported */
body .nyb-panel { height: min(560px, calc(100vh - 130px)); height: min(560px, calc(100dvh - 130px)); }
body:not(.no-bar) .nyb-panel { bottom: calc(92px + env(safe-area-inset-bottom)); height: min(560px, calc(100vh - 124px)); height: min(560px, calc(100dvh - 124px)); }
body.tall-bar .nyb-panel { bottom: calc(184px + env(safe-area-inset-bottom)); height: min(560px, calc(100vh - 216px)); height: min(560px, calc(100dvh - 216px)); }
@media (max-width: 540px) {
  body:not(.no-bar) .nyb-teaser { bottom: 330px; }
  body.tall-bar .nyb-teaser { bottom: 428px; }
  body .nyb-panel { right: 12px; }
}
/* short or landscape screens: smaller Nyla, no speech bubble, and the open chat
   takes the whole screen (over the action bar) so there is room to read */
@media (max-height: 640px) {
  body .nyb-bubble { width: 70px; height: 170px; }
  body .nyb-teaser { display: none; }
  body .nyb-panel, body:not(.no-bar) .nyb-panel, body.tall-bar .nyb-panel { top: 8px; bottom: 8px; height: auto; }
  body .nyb-chips { flex-wrap: nowrap; overflow-x: auto; }
  body .nyb-chip { flex: none; }
}
a { color: var(--bronze-lt); }
a:hover { color: var(--cream); }
:focus-visible { outline: 3px solid var(--bronze-lt); outline-offset: 2px; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--col); margin: 0 auto; padding: 0 var(--pad); }
.wide { max-width: 1100px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 12px; }
.wordmark { font-family: var(--display); font-style: italic; font-size: 23px; color: var(--cream); text-decoration: none; }
.head-nav { display: flex; gap: 6px; align-items: center; }
.head-nav a.txt { display: none; color: var(--text-2); text-decoration: none; font-size: 15px; padding: 10px 12px; border-radius: 22px; }
.head-nav a.txt:hover { background: var(--ink-2); color: var(--cream); }
.icon-btn { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--edge); background: transparent; color: var(--cream); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
details.menu { position: relative; }
details.menu summary { list-style: none; cursor: pointer; }
details.menu summary::-webkit-details-marker { display: none; }
details.menu .panel { position: absolute; right: 0; top: 52px; width: 240px; background: var(--ink-2); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 8px; z-index: 20; }
details.menu .panel a { display: block; padding: 12px; border-radius: 10px; color: var(--cream); text-decoration: none; }
details.menu .panel a:hover { background: var(--ink-3); }
@media (min-width: 860px) { .head-nav a.txt { display: inline-block; } details.menu { display: none; } }

/* Type */
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze-lt); margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; }
h1 { font-size: clamp(36px, 10vw, 56px); line-height: 1.08; text-wrap: balance; overflow-wrap: break-word; }
h2 { font-size: 28px; line-height: 1.15; margin-top: 36px; }
h3, h2.as-h3 { font-size: 21px; line-height: 1.2; }
h2.as-h3 { margin-top: 0; }
p { margin: 10px 0 0; }
.lede { font-size: 18px; color: var(--text-2); max-width: 60ch; }
.small { font-size: 14px; color: var(--muted); }

/* ------------------------------------------------- Plate: the page's title block
   Three flavours, all the same shape so the site reads as one thing:
     .plate.photo    a licensed photograph behind the title
     .plate.pattern  a drawn cover for a venue we have no licensed photo of
     .plate          plain bronze (fallback)
   Descenders used to be shaved by overflow:hidden; the block now reserves
   space for them with padding-bottom plus a little leading under the title. */
.plate {
  position: relative;
  margin-top: 4px;
  border-radius: var(--r-lg);
  background: var(--bronze);
  color: var(--ink);
  padding: 20px 20px 22px;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  overflow: hidden;
  isolation: isolate;
}
.plate .eyebrow { color: var(--ink); opacity: 0.85; }
.plate h1 { padding-bottom: 0.06em; }
/* the eyebrow is wide-tracked, so let it wrap instead of running off the edge */
.plate .eyebrow { font-size: clamp(11px, 3vw, 13px); letter-spacing: 0.1em; max-width: 100%; overflow-wrap: anywhere; }
.plate.cream { background: var(--cream); }

/* Photo plate: a bottom-weighted gradient, not a flat veil. The flat veil
   greyed the whole picture out and still left the type sitting on neon. */
.plate.photo { color: var(--cream); min-height: 188px; background: var(--ink-3); }
.plate.photo img,
.plate.photo picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate.photo img { object-fit: cover; object-position: var(--pos, 50% 42%); }
.plate.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(11, 9, 8, 0.93) 0%, rgba(11, 9, 8, 0.88) 26%, rgba(11, 9, 8, 0.66) 46%, rgba(11, 9, 8, 0.28) 68%, rgba(11, 9, 8, 0.04) 100%),
    linear-gradient(to right, rgba(11, 9, 8, 0.42) 0%, rgba(11, 9, 8, 0.10) 46%, rgba(11, 9, 8, 0) 100%);
}
.plate.photo > * { position: relative; z-index: 1; }
.plate.photo > picture, .plate.photo > img { z-index: 0; }
.plate.photo .eyebrow { color: var(--cream); opacity: 0.92; text-shadow: 0 1px 10px rgba(11, 9, 8, 0.9); }
.plate.photo h1 { text-shadow: 0 2px 22px rgba(11, 9, 8, 0.75); }

/* Pattern plate: what a venue page shows when no free, correctly-licensed
   photograph of it exists. Drawn in CSS, so it costs no bytes and can never
   be mistaken for a picture of the room. */
.plate.pattern {
  color: var(--cream);
  min-height: 138px;
  border: 1px solid var(--rule);
  background:
    radial-gradient(130% 100% at 88% -10%, rgba(192, 143, 82, 0.30), rgba(192, 143, 82, 0) 60%),
    linear-gradient(150deg, var(--ink-3) 0%, var(--ink-2) 58%, var(--ink) 100%);
}
.plate.pattern .eyebrow { color: var(--bronze-lt); opacity: 1; }
.plate.pattern > * { position: relative; z-index: 1; }
.plate.pattern::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.plate .initial {
  position: absolute;
  right: 2px;
  bottom: -0.30em;
  z-index: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(132px, 34vw, 230px);
  line-height: 1;
  color: rgba(192, 143, 82, 0.16);
  pointer-events: none;
  user-select: none;
}
.pat1::before { background: repeating-linear-gradient(135deg, rgba(192, 143, 82, 0) 0 11px, rgba(192, 143, 82, 0.13) 11px 12px); }
.pat2::before { background: radial-gradient(rgba(192, 143, 82, 0.22) 1.2px, rgba(192, 143, 82, 0) 1.3px); background-size: 15px 15px; }
.pat3::before { background: repeating-radial-gradient(circle at 92% 4%, rgba(192, 143, 82, 0) 0 23px, rgba(192, 143, 82, 0.13) 23px 24px); }
.pat4::before { background: repeating-linear-gradient(90deg, rgba(192, 143, 82, 0) 0 23px, rgba(192, 143, 82, 0.11) 23px 24px); }
.pat5::before { background: repeating-linear-gradient(45deg, rgba(192, 143, 82, 0) 0 15px, rgba(192, 143, 82, 0.10) 15px 16px), repeating-linear-gradient(-45deg, rgba(192, 143, 82, 0) 0 15px, rgba(192, 143, 82, 0.10) 15px 16px); }
.pat6::before { background: repeating-linear-gradient(0deg, rgba(192, 143, 82, 0) 0 15px, rgba(192, 143, 82, 0.12) 15px 16px); }

.credit { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Answer card + source stamp */
.answer { margin-top: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--cream); color: var(--ink); }
.answer .label { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6E4F2A; }
.answer .value { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 9vw, 40px); line-height: 1.06; margin-top: 4px; }
.answer p { color: #3B342D; font-size: 16px; }
.stamp { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin-top: 10px; font-size: 14px; color: var(--text-2); text-decoration: none; }
.stamp .go { color: var(--bronze-lt); font-weight: 600; white-space: nowrap; }

/* Fact cards */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.fact { border: 1px solid var(--edge); border-radius: var(--r-md); padding: 12px; min-width: 0; }
.fact dt { font-size: 13px; color: var(--muted); }
.fact dd { margin: 4px 0 0; font-size: 15px; overflow-wrap: anywhere; }
.fact dd.big { font-family: var(--display); font-size: 24px; line-height: 1.1; }
.fact.full { grid-column: 1 / -1; }
.chip { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 8px; background: #2A231C; color: #E3B87A; }
.chip.ok { background: #1E2A20; color: #A9D3A5; }

/* Lists of venues (hubs, home). Each card carries a thumbnail: a photograph
   where one exists, otherwise the same drawn cover as that venue's page. */
.vlist { display: grid; gap: 10px; margin-top: 14px; }
.vcard {
  display: block;
  gap: 14px;
  align-items: start;
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  padding: 14px;
  color: var(--cream);
  text-decoration: none;
}
.vcard:hover { border-color: var(--bronze); background: var(--ink-2); }
.vcard .vtext { display: block; min-width: 0; }
.vcard .t, .vcard .m, .vcard .a { display: block; }
.vcard .t { font-family: var(--display); font-size: 22px; font-weight: 600; line-height: 1.15; }
.vcard .m { font-size: 14px; color: var(--muted); }
.vcard .a { margin-top: 6px; font-size: 15px; }
.vthumb {
  position: relative;
  display: none;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink-3);
  isolation: isolate;
}
.vthumb img { width: 100%; height: 100%; object-fit: cover; }
/* night photographs go very dark at 88px, so the frame gets a hairline */
.vthumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(237, 231, 222, 0.14); pointer-events: none; }
.vthumb.pattern { border: 1px solid var(--rule); background: radial-gradient(130% 100% at 88% -10%, rgba(192, 143, 82, 0.34), rgba(192, 143, 82, 0) 62%), linear-gradient(150deg, var(--ink-3), var(--ink)); }
.vthumb.pattern::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 2.6; }
.vthumb.pat1::before { background: repeating-linear-gradient(135deg, rgba(192, 143, 82, 0) 0 5px, rgba(192, 143, 82, 0.34) 5px 6px); }
.vthumb.pat2::before { background: radial-gradient(rgba(192, 143, 82, 0.5) 1.2px, rgba(192, 143, 82, 0) 1.4px); background-size: 9px 9px; }
.vthumb.pat3::before { background: repeating-radial-gradient(circle at 92% 4%, rgba(192, 143, 82, 0) 0 9px, rgba(192, 143, 82, 0.34) 9px 10px); }
.vthumb.pat4::before { background: repeating-linear-gradient(90deg, rgba(192, 143, 82, 0) 0 9px, rgba(192, 143, 82, 0.3) 9px 10px); }
.vthumb.pat5::before { background: repeating-linear-gradient(45deg, rgba(192, 143, 82, 0) 0 7px, rgba(192, 143, 82, 0.26) 7px 8px), repeating-linear-gradient(-45deg, rgba(192, 143, 82, 0) 0 7px, rgba(192, 143, 82, 0.26) 7px 8px); }
.vthumb.pat6::before { background: repeating-linear-gradient(0deg, rgba(192, 143, 82, 0) 0 7px, rgba(192, 143, 82, 0.32) 7px 8px); }
.vthumb .initial { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1; color: rgba(217, 168, 106, 0.72); }
@media (min-width: 700px) { .vlist.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Poster price cards (group pages) */
.scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: 16px; }
.posters { display: grid; gap: 10px; margin-top: 8px; }
.poster { border-radius: var(--r-lg); padding: 14px 16px; border: 1px solid var(--edge); }
.poster.cream { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.poster.bronze { background: var(--bronze); color: var(--ink); border-color: var(--bronze); }
.poster .row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.poster .name { font-weight: 600; font-size: 17px; }
.poster .price { font-family: var(--display); font-size: 30px; line-height: 1; white-space: nowrap; }
.poster .pp { font-family: var(--body); font-size: 13px; font-weight: 500; }
.poster .meta { font-size: 14px; margin-top: 6px; color: var(--muted); }
.poster.cream .meta { color: #5A5047; }
.poster.bronze .meta { color: #2E2216; }
.poster .tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 8px; background: var(--ink); color: var(--cream); margin-left: 6px; vertical-align: middle; }
.pbar { position: relative; height: 6px; border-radius: 3px; background: var(--ink-3); margin-top: 10px; }
.poster.cream .pbar { background: var(--cream-2); }
.poster.bronze .pbar { background: var(--bronze-dk); }
.pbar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--bronze); }
.poster.cream .pbar i, .poster.bronze .pbar i { background: var(--ink); }
.total { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--edge); }
.total b { font-family: var(--display); font-weight: 600; font-size: 38px; line-height: 1; }

/* Sticky action bar (phones and tablets). On a wide screen the same element
   becomes the sidebar card: see the 1040px block below. */
.actions { position: fixed; left: 0; right: 0; bottom: 0; background: var(--ink); border-top: 1px solid var(--rule); padding: 12px var(--pad) calc(14px + env(safe-area-inset-bottom)); z-index: 10; }
.actions .wrap { padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.actions .side-title { display: none; }
.btn { flex: 1 1 140px; min-height: 50px; border-radius: 25px; display: flex; align-items: center; justify-content: center; font-weight: 600; text-decoration: none; text-align: center; padding: 0 16px; font-size: 16px; }
.btn.primary { background: var(--bronze); color: var(--ink); }
.btn.cream { background: var(--cream); color: var(--ink); }
.btn.ghost { border: 1px solid var(--bronze); color: var(--cream); }
.btn.quiet { flex-basis: 100%; min-height: 44px; border: 1px solid var(--edge); color: var(--cream); font-weight: 500; font-size: 15px; }
.disclose { flex-basis: 100%; font-size: 12px; color: var(--muted); text-align: center; margin: 0; }
.inline-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Content blocks */
.card { margin-top: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--ink-2); }
.card-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; margin-top: 12px; border-radius: var(--r-md); background: var(--ink-2); color: var(--cream); text-decoration: none; }
.card-link .go { color: var(--bronze-lt); font-weight: 600; white-space: nowrap; }
.card-link .sub { display: block; font-size: 13px; color: var(--muted); }
ul.clean { padding-left: 18px; }
ul.clean li { margin: 6px 0; }
.sources { font-size: 14px; color: var(--muted); }
.sources li { margin: 2px 0; }
.sources a { display: inline-block; padding: 4px 0; }
.sources a { color: var(--bronze-lt); }
.skip li { margin: 6px 0; }
table.compare { width: 100%; border-collapse: collapse; font-size: 15px; }
table.compare th, table.compare td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.compare th { color: var(--muted); font-weight: 600; font-size: 13px; }
.scroll-x { overflow-x: auto; }
@media (max-width: 640px) {
  table.compare thead { display: none; }
  table.compare, table.compare tbody, table.compare tr, table.compare td { display: block; width: 100%; }
  table.compare tr { border: 1px solid var(--edge); border-radius: var(--r-md); padding: 6px 12px; margin-bottom: 10px; }
  table.compare td { border: 0; padding: 6px 0; }
  table.compare td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); }
  table.compare td:first-child::before { display: none; }
  table.compare td:first-child a { font-family: var(--display); font-size: 20px; font-weight: 600; }
}

/* Footer */
.site-foot { border-top: 1px solid var(--rule); margin-top: 48px; padding: 28px 0 32px; font-size: 14px; color: var(--muted); }
.site-foot a { color: var(--text-2); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0; }

/* A short viewport (a 400%-zoomed desktop, or a phone in landscape) cannot
   spare 77-137px of fixed bar, so there the bar simply ends the page. */
@media (max-height: 560px) {
  .actions { position: static; margin-top: 32px; border-top: 1px solid var(--rule); padding-bottom: 20px; }
  body, body.tall-bar { padding-bottom: 0; }
}
@media (min-height: 561px) {
  html { scroll-padding-bottom: 150px; }
}

/* Venue page column split. Below 1040 the aside is display:contents, so the
   action bar inside it keeps behaving as the fixed bottom bar it is today.
   The checked-date line belongs to the desktop sidebar card, not to the
   phone bar, where it would only cost a line of screen. */
.vside { display: contents; }
.vgrid .actions .disclose { display: none; }

@media (min-width: 700px) {
  body { font-size: 17px; }
  .plate { padding: 26px 28px 28px; min-height: 150px; }
  .plate.photo { min-height: 280px; }
  .plate.pattern { min-height: 230px; }
  .posters.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vcard { display: grid; grid-template-columns: 76px minmax(0, 1fr); }
  .vthumb { display: block; width: 76px; height: 76px; }
  .vthumb .initial { font-size: 34px; }
}

/* ------------------------------------------------------------- big screens
   Below this the site is the phone layout it was designed as. Above it the
   reading column widens, the hero gets room, and the venue page puts its
   actions in a sticky sidebar instead of a full-width bar across the screen. */
@media (min-width: 1040px) {
  :root { --col: 1080px; --pad: 32px; }
  body, body.tall-bar { padding-bottom: 0; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lede { font-size: 19px; }
  .vmain > p, main > p, main > ul.clean, .answer p, .card p { max-width: 70ch; }
  h1 { font-size: clamp(48px, 4.6vw, 64px); }
  h2 { font-size: 32px; margin-top: 44px; }

  .plate { padding: 32px 36px 34px; }
  .plate.photo { min-height: clamp(240px, 34vh, 320px); }
  .plate.pattern { min-height: 210px; }
  .plate .initial { font-size: 330px; }
  .plate h1 { max-width: 22ch; }
  .plate .eyebrow { font-size: 13px; letter-spacing: 0.14em; }

  /* The venue page: content left, a sticky card right. */
  .vgrid { display: grid; grid-template-columns: minmax(0, 1fr) 264px; column-gap: 32px; align-items: start; }
  .vside { display: block; position: sticky; top: 28px; }
  .vgrid .actions {
    position: static;
    border: 1px solid var(--edge);
    border-top: 1px solid var(--edge);
    border-radius: var(--r-lg);
    background: var(--ink-2);
    padding: 18px;
    margin-top: 14px;
  }
  .vgrid .actions .wrap { max-width: none; flex-direction: column; }
  .vgrid .actions .side-title { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
  .vgrid .actions .btn { flex: none; width: 100%; }
  .vgrid .actions .disclose { display: block; text-align: left; margin-top: 4px; }

  /* Everywhere else the bar stops being a fixed phone bar and simply ends
     the page, at the content width, with buttons the size of their labels. */
  .actions { position: static; margin-top: 40px; padding: 22px 0 0; border-top: 1px solid var(--rule); }
  .actions .wrap { max-width: var(--col); margin: 0 auto; }
  .actions .btn { flex: 0 0 auto; min-width: 220px; }
  .actions .btn.quiet { flex-basis: auto; }
  .actions .disclose { flex-basis: 100%; text-align: left; margin-top: 10px; }
  .vgrid .actions { margin-top: 14px; padding: 18px; }
  .vgrid .actions .btn, .vgrid .actions .btn.quiet { min-width: 0; }
  /* the sidebar takes 300px, so the fact cards stay two-up in what is left */
  .vgrid .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* page-level buttons size to their label instead of splitting the width */
  .inline-actions .btn { flex: 0 0 auto; min-width: 190px; }

  /* Hubs and the home page get the width instead of a sidebar. */
  .vlist.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .vcard { grid-template-columns: 88px minmax(0, 1fr); padding: 16px; }
  .vthumb { width: 88px; height: 88px; border-radius: 12px; }
  .vthumb .initial { font-size: 38px; }
  .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
  .split > h2 { margin-top: 44px; }
  table.compare { font-size: 16px; }
  table.compare th, table.compare td { padding: 12px 10px; }
  /* Nyla sits at the normal bottom once there is no bar to clear */
  body .nyb-bubble, body:not(.no-bar) .nyb-bubble, body.tall-bar .nyb-bubble { bottom: 16px; }
  .vgrid { margin-right: 0; }
  body .nyb-panel, body:not(.no-bar) .nyb-panel, body.tall-bar .nyb-panel { top: auto; bottom: 24px; height: min(560px, calc(100vh - 60px)); height: min(560px, calc(100dvh - 60px)); }
  body .nyb-teaser, body:not(.no-bar) .nyb-teaser, body.tall-bar .nyb-teaser { bottom: 370px; }
}

@media (min-width: 1340px) {
  :root { --col: 1180px; }
  .plate.photo { min-height: clamp(280px, 36vh, 360px); }
  .vgrid { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 52px; }
}

/* Windows High Contrast and other forced-colours modes drop author colours and
   may drop background images, which would leave a solid ghost initial over the
   title and cream text on a bare photograph. */
@media (forced-colors: active) {
  .plate .initial { display: none; }
  .plate.photo::after { background: Canvas; opacity: 0.85; }
  .plate.photo h1, .plate.photo .eyebrow { forced-color-adjust: none; color: CanvasText; background: Canvas; }
  .plate.pattern::before, .vthumb.pattern::before { display: none; }
  .pbar i { forced-color-adjust: none; background: Highlight; }
  .vthumb { border: 1px solid CanvasText; }
}

/* ---- Oct 2026 "alive" pass: Tonight box/page, hours table, changes log, signup ---- */
.live { margin-top: 18px; }
#tonight-box { min-height: 420px; }  /* room for the list, so the page doesn't jump when it loads */
.live h2 { margin-top: 0; }
.live .weather { margin: 6px 0 12px; }
.live .weather .small { display: block; margin-top: 2px; }
.live .weather .tip { color: var(--bronze-lt); }
.live-sec { margin-top: 26px; }
.tonight-list li, .news li, .lic li, .changes li { padding: 10px 0; border-bottom: 1px solid var(--rule); line-height: 1.45; }
.tonight-list li:last-child, .news li:last-child, .lic li:last-child, .changes li:last-child { border-bottom: 0; }
.tonight-list .chip, .hours-table .chip, .compare .chip { margin-left: 8px; vertical-align: middle; }
.hours-table { border-collapse: collapse; width: 100%; max-width: 420px; }
.hours-table th, .hours-table td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); font-weight: 400; }
.hours-table th { color: var(--muted); width: 64px; }
.news-signup { margin-top: 28px; }
.signup { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.signup label { width: 100%; font-size: 14px; color: var(--muted); }
.signup input { flex: 1 1 220px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--edge); background: var(--ink); color: var(--cream); font: inherit; }