/* More-ish design system: bone paper, black hairlines, lemon-to-sky gradient, one grotesque. */
:root {
  --bone: #F1F0EA;
  --paper: #FFFFFF;
  --ink: #0C0C0C;
  --ink-2: #33332F;
  --ink-3: #55554F;
  --muted: #6E6E68;
  --line: #0C0C0C;
  --rule: #D5D3C8;
  --lemon: #F0F07C;
  --sky: #AFD8E0;
  --cream: #F7F4D8;
  --grad: linear-gradient(108deg, #F3F07C 0%, #EDF09A 44%, #AFD8E0 100%);
  --grad-soft: linear-gradient(105deg, #F6F4CB 0%, #EAF2DE 55%, #D9EBF0 100%);
  --bw: 1.6px;
}

/* One type scale for the whole site. Nothing sets a font-size outside this block. */
:root {
  --t-hero: clamp(30px, 6vw, 52px);
  --t-h1: clamp(26px, 5vw, 40px);
  --t-h2: clamp(19px, 2.6vw, 22px);
  --t-h3: 17px;
  --t-body: 15px;
  --t-lede: clamp(15px, 1.6vw, 17px);
  --t-sm: 13.5px;
  --t-xs: 12.5px;
  --t-label: 11.5px;
  --t-price: 25px;
  --t-price-sm: 20px;
  --t-price-xl: clamp(30px, 4vw, 38px);
  --tight: -0.035em;
  --snug: -0.02em;
}
.t-hero { font-size: var(--t-hero); line-height: 1.02; letter-spacing: var(--tight); font-weight: 700; text-wrap: balance; }
.t-h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: var(--tight); font-weight: 700; text-wrap: balance; }
.t-h2 { font-size: var(--t-h2); line-height: 1.15; letter-spacing: var(--snug); font-weight: 700; }
.t-h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: var(--snug); font-weight: 600; }
.t-body { font-size: var(--t-body); line-height: 1.5; }
.t-sm { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.t-xs { font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); }
.t-label { font-size: var(--t-label); font-weight: 600; letter-spacing: 1.2px; color: var(--ink-3); text-transform: uppercase; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font: 16px/1.5 "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow-wrap: break-word;
}
img { max-width: 100%; }
a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.wrap { max-width: 1120px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

/* Header */
.top {
  background: var(--paper);
  border-bottom: var(--bw) solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.top .wrap { display: flex; align-items: center; gap: 18px; min-height: 62px; }
.brand { font-size: 22px; font-weight: 700; letter-spacing: -0.04em; text-decoration: none; }
.top nav { display: flex; gap: 16px; margin-left: auto; align-items: center; }
.top nav a { font-size: var(--t-sm); font-weight: 500; text-decoration: none; }
@media (max-width: 640px) { .top nav a.hide-sm { display: none; } }

/* Buttons */
.btn, button.btn, a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 18px;
  border: var(--bw) solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink);
  font: 600 var(--t-sm)/1 "Archivo", sans-serif; letter-spacing: 0.4px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--cream); }
.btn-primary { background: var(--ink); color: var(--paper); border-radius: 999px; letter-spacing: 0.7px; }
.btn-primary:hover { background: #2a2a26; }
.btn-lemon { background: var(--lemon); }
.btn-sky { background: var(--sky); }
.btn-sm { min-height: 40px; padding: 10px 13px; font-size: var(--t-xs); }
.btn-lg { min-height: 52px; padding: 15px 26px; font-size: var(--t-body); }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 11px 14px;
  border: var(--bw) solid var(--line); border-radius: 8px; background: var(--paper);
  font: 500 var(--t-sm)/1 "Archivo", sans-serif; text-decoration: none; cursor: pointer; color: var(--ink);
}
.chip[aria-pressed="true"], .chip.on { background: var(--lemon); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }

/* Hero */
.hero {
  border: var(--bw) solid var(--line); border-radius: 26px;
  background-image: var(--grad);
  padding: 30px 24px 26px; margin-top: 22px;
}
.hero h1 { margin: 0 0 10px; font-size: var(--t-hero); line-height: 1.02; letter-spacing: var(--tight); font-weight: 700; text-wrap: balance; }
.hero p.lede { margin: 0 0 18px; font-size: var(--t-lede); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.hero.center { text-align: center; }
.hero.center p.lede, .hero.center .askbar { margin-left: auto; margin-right: auto; }
.askbar { display: flex; gap: 9px; flex-wrap: wrap; max-width: 760px; }
.askbar input[type="text"] {
  flex: 1 1 260px; min-width: 0; min-height: 52px;
  border: var(--bw) solid var(--line); border-radius: 10px; background: var(--paper);
  padding: 14px 16px; font: 16px "Archivo", sans-serif; color: var(--ink);
}
.askbar input::placeholder { color: var(--muted); }

/* Cards */
.cards { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.cards.grid4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--paper); border: var(--bw) solid var(--line); border-radius: 14px;
  padding: 14px 15px; text-decoration: none; color: var(--ink);
}
.card:hover { background: var(--cream); }
.card .grow { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.card .pub { display: block; font-size: var(--t-h3); font-weight: 600; letter-spacing: var(--snug); line-height: 1.2; }
.card .deal { display: block; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.4; }
.card .meta { display: block; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.4; }
.price { font-size: var(--t-price); font-weight: 700; letter-spacing: -0.05em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price.sm { font-size: var(--t-price-sm); }
.price.xl { font-size: var(--t-price-xl); }
/* A price longer than a few characters used to hold the whole row open and
   squeeze the pub name beside it to one letter per line. These set in small
   type and wrap, so the name keeps its width. "$25" stays nowrap and big.
   Must come after .sm and .xl, which would otherwise reset the size. */
.price.long { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; text-align: right; max-width: 8.5em; }
.tag {
  display: inline-block; background: var(--lemon); border: 1.4px solid var(--line);
  border-radius: 5px; padding: 3px 7px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase;
}
/* Backstop, and it applies whoever built the card: the price can never take
   more than 44% of the row, so the pub name beside it always keeps its width.
   No overflow-wrap here on purpose, so "$25" has no break point and stays on
   one line, while "Special noodle menu" wraps at its spaces instead of holding
   the row open. Three different renderers draw these cards (build.mjs and two
   places in app.js), so the guarantee belongs in CSS rather than in each one. */
.right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; max-width: 46%; }
.right .price { white-space: normal; }

/* Sections */
h2.sec { font-size: var(--t-h2); font-weight: 700; letter-spacing: var(--snug); margin: 30px 0 12px; }
.sec-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 30px 0 12px; }
.sec-head h2 { margin: 0; font-size: var(--t-h2); font-weight: 700; letter-spacing: var(--snug); }
.sec-head .note { font-size: var(--t-sm); color: var(--ink-3); }
.sec-head .spacer { flex: 1 1 auto; }
.eyebrow { display: block; font-size: var(--t-label); font-weight: 600; letter-spacing: 1.2px; color: var(--ink-3); text-transform: uppercase; }

/* Chat */
.thread { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.bubble-me { align-self: flex-end; max-width: 88%; background: var(--ink); color: var(--paper); border-radius: 14px 14px 4px 14px; padding: 12px 16px; font-size: var(--t-body); line-height: 1.45; }
.bubble-bot { align-self: flex-start; max-width: 96%; border: var(--bw) solid var(--line); border-radius: 14px 14px 14px 4px; padding: 13px 16px; font-size: var(--t-lede); line-height: 1.5; background-image: var(--grad-soft); }
.bubble-bot strong { font-weight: 700; }
.bubble-bot.is-thinking { background-image: none; background: var(--paper); padding: 12px 16px; }
/* Waiting state: the brand gradient split across three dots. */
.thinking { display: flex; align-items: center; gap: 11px; }
.thinking-t { font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); }
.dots { display: inline-flex; gap: 5px; vertical-align: middle; }
.dots i {
  width: 10px; height: 10px; border-radius: 999px; display: block;
  border: 1.2px solid var(--line); background: var(--lemon);
  animation: bob 1.05s ease-in-out infinite;
}
.dots i:nth-child(2) { background: #E2EFCB; animation-delay: .16s; }
.dots i:nth-child(3) { background: var(--sky); animation-delay: .32s; }
@keyframes bob { 0%, 100% { transform: translateY(0) scale(1); } 35% { transform: translateY(-5px) scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; } }
.skel { height: 13px; border-radius: 999px; background: #E2E0D6; }

/* Map */
#map { width: 100%; height: min(62vh, 560px); border: var(--bw) solid var(--line); border-radius: 16px; overflow: hidden; background: var(--bone); }

.filters {
  display: flex; flex-direction: column; gap: 12px;
  border: var(--bw) solid var(--line); border-radius: 16px; background: var(--paper);
  padding: 15px 16px; margin-bottom: 12px;
}
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.filter-row .eyebrow { flex: 0 0 104px; }
.filter-row .chips { flex: 1 1 260px; }

.chip-now { position: relative; margin-left: 13px; }
.chip-now::before { content: ""; position: absolute; left: -8px; top: 3px; bottom: 3px; width: 1.2px; background: var(--rule); }

.map-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 12px; }
.map-bar .count { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.map-bar .spacer { flex: 1 1 auto; }

.pin {
  display: flex; align-items: center; gap: 5px;
  background: var(--paper); border: var(--bw) solid var(--line); border-radius: 999px;
  padding: 4px 9px; font: 700 13px "Archivo", sans-serif; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(12, 12, 12, .28);
}
.pin:hover, .pin.on { background: var(--lemon); }
.pin .n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px;
  border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 600; padding: 0 4px;
}
.maplibregl-popup-content, .mapboxgl-popup-content {
  border: var(--bw) solid var(--line); border-radius: 12px; padding: 12px 14px;
  font-family: "Archivo", sans-serif; background: var(--paper);
}
.pop-name { display: block; font-size: var(--t-h3); font-weight: 700; line-height: 1.25; }
.pop-sub { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-bottom: 9px; }
.pop-deal {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: baseline;
  border-top: 1.2px solid var(--rule); padding: 7px 0;
}
.pop-deal .t { font-size: var(--t-sm); line-height: 1.35; }
.pop-deal .m { grid-column: 1; font-size: var(--t-xs); color: var(--ink-3); }
.pop-deal .pp { grid-row: 1; grid-column: 2; font-weight: 700; font-size: var(--t-sm); }
.pop-more { display: block; font-size: var(--t-xs); color: var(--ink-3); padding-top: 7px; }
.pop-link { display: inline-block; margin-top: 9px; font-size: var(--t-sm); font-weight: 600; }
.card .more-n { color: var(--ink-2); font-weight: 600; }
.more-wrap { display: flex; justify-content: center; margin-top: 16px; }

@media (max-width: 560px) {
  .filter-row .eyebrow { flex-basis: 100%; }
  .filter-row .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .filter-row .chips::-webkit-scrollbar { display: none; }
  .filter-row .chips .chip { flex: 0 0 auto; }
  .map-bar .count { flex: 1 1 100%; }
  .map-bar .spacer { display: none; }
  #map { height: min(58vh, 420px); }
}

/* Pub page */
.panel { background: var(--paper); border: var(--bw) solid var(--line); border-radius: 16px; padding: 18px; }
.panel.grad { background-image: var(--grad); }
.week { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.week li { display: flex; gap: 12px; align-items: baseline; border: 1.4px solid var(--line); border-radius: 8px; background: var(--paper); padding: 10px 12px; }
.week li.today { background: var(--cream); }
.week .d { min-width: 44px; font-size: 11px; font-weight: 600; letter-spacing: 0.7px; color: var(--ink-3); }
.week .t { flex: 1 1 auto; font-size: var(--t-body); }
.week .p { font-size: var(--t-body); font-weight: 700; font-variant-numeric: tabular-nums; }
.two-col { display: grid; gap: 16px; grid-template-columns: 1.3fr 1fr; align-items: start; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.field input, .field textarea, .field select {
  border: var(--bw) solid var(--line); border-radius: 10px; background: var(--paper);
  min-height: 48px; padding: 13px 14px; font: var(--t-body) "Archivo", sans-serif; color: var(--ink); width: 100%;
}
.row2 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .row2 { grid-template-columns: 1fr; } }
.ok { border: var(--bw) solid var(--line); border-radius: 12px; background: var(--lemon); padding: 14px 16px; font-weight: 600; }

/* Prose */
.prose { max-width: 66ch; }
.prose p { font-size: var(--t-lede); line-height: 1.65; color: var(--ink-2); }
.prose h2 { font-size: var(--t-h2); letter-spacing: var(--snug); margin-top: 28px; }
.crumb { font-size: var(--t-xs); color: var(--ink-3); padding-top: 18px; }
.crumb a { color: var(--ink-3); }

/* Signup sheet */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  border-top: var(--bw) solid var(--line); border-radius: 22px 22px 0 0;
  background-image: var(--grad);
  padding: 16px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 30px rgba(0,0,0,.14);
}
.sheet .inner { max-width: 640px; margin: 0 auto; }
.sheet h2 { margin: 0 0 6px; font-size: var(--t-h2); letter-spacing: var(--snug); }
.sheet p { margin: 0 0 12px; font-size: var(--t-sm); color: var(--ink-2); }
.sheet .close { position: absolute; right: 16px; top: 14px; border: 1.5px solid var(--line); background: transparent; border-radius: 999px; width: 38px; height: 38px; cursor: pointer; }
[hidden] { display: none !important; }

/* Footer */
footer.foot { margin: 40px 0 0; border-top: var(--bw) solid var(--line); background: var(--paper); }
footer.foot .wrap { padding-top: 22px; padding-bottom: 30px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
footer.foot .fine { font-size: var(--t-xs); color: var(--ink-3); flex: 1 1 260px; line-height: 1.5; }
footer.foot a { font-size: var(--t-sm); text-decoration: none; }
.pill-note { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; }

/* Answer cards sit inside the chat thread */
.answer-cards { margin: 2px 0 0; display: grid; gap: 9px; }
.answer-cards .card { border-radius: 13px; }
@media (min-width: 720px) { .answer-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.loc-note a { font-weight: 600; }

/* Chat sits left-aligned even inside the centred hero */
.hero.center .thread { text-align: left; }
.hero.center .thread .bubble-me { text-align: right; }

/* ---------- Chat mode ---------- */
/* Once a question is asked the hero becomes a self-contained conversation panel:
   the thread scrolls inside it and the ask bar sits at its foot, so the page
   underneath is untouched. */
body.chatting .hero.center {
  text-align: left;
  padding: 0 18px 14px;
  border-radius: 20px;
  background-image: none;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  min-height: 260px;
  max-height: min(74vh, 780px);
  overflow: hidden;
}
body.chatting .hero h1,
body.chatting .hero p.lede,
body.chatting #suggestions { display: none; }

body.chatting .chat-top { order: 1; }
body.chatting .thread {
  order: 2;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -4px;
  padding: 2px 4px 6px;
  scrollbar-width: thin;
}
/* Auto side margins on a flex item stop it stretching, so clear the ones the
   centred hero sets or the ask bar shrinks to the width of its own text. */
body.chatting .hero.center .askbar {
  order: 3;
  flex: 0 0 auto;
  align-self: stretch;
  max-width: none;
  margin: 0;
  padding-top: 12px;
  border-top: 1.4px solid var(--rule);
  gap: 9px;
  flex-wrap: nowrap;
  align-items: stretch;
}
body.chatting .askbar input[type="text"] { flex: 1 1 auto; min-height: 54px; font-size: 16px; }
body.chatting .askbar .btn { min-height: 54px; padding-left: 22px; padding-right: 22px; }
body.chatting .askbar [data-use-location] { display: none; }

.chat-top { display: none; }
body.chatting .chat-top {
  display: flex; align-items: center; gap: 10px;
  order: 1; flex: 0 0 auto;
  margin: 0 -18px 12px;
  padding: 14px 18px;
  background-image: var(--grad);
  border-bottom: var(--bw) solid var(--line);
}
body.chatting .chat-top .t-h3 { margin: 0; font-weight: 700; }
body.chatting .chat-top .btn { margin-left: auto; }
/* While an answer is coming back, the brand gradient drifts across the header. */
body.busy .chat-top { background-size: 220% 100%; animation: sweep 2.6s linear infinite; }
@keyframes sweep { from { background-position: 0% 50%; } to { background-position: 220% 50%; } }
@media (prefers-reduced-motion: reduce) { body.busy .chat-top { animation: none; } }