:root {
  --bg: #f8f4ec;            /* warm cream paper */
  --bg-card: #ffffff;
  --ink: #1d1916;           /* near-black, slight warm */
  --ink-soft: #4a423b;
  --muted: #7a7068;
  --line: #e8dfce;
  --line-strong: #d8caaf;
  --accent: #c8500e;        /* deeper beer amber */
  --accent-deep: #9a3a07;
  --accent-soft: #fbe5cf;
  --cheap: #2e7d32;
  --cheap-bg: #d8eed9;
  --mid: #b78a04;
  --mid-bg: #fff1c8;
  --dear: #b03020;
  --dear-bg: #fad6cf;
  --na: #b3a899;
  --serif: 'Fraunces', 'Iowan Old Style', 'Charter', 'Georgia', serif;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(200,80,14,0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 5%, rgba(46,125,50,0.05), transparent 60%),
    var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-deep); }
a:hover { color: var(--accent); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---- Topbar ---- */
header.topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2000;
  isolation: isolate;
}
header.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
}
header.topbar .logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
header.topbar .logo .logo-mark {
  width: 30px; height: 30px;
  color: var(--accent);
}
header.topbar .logo .logo-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
  font-feature-settings: "ss01";
}
header.topbar .logo .logo-text em {
  font-style: normal;
  color: var(--accent);
  font-weight: 900;
}
header.topbar nav { display: flex; gap: 6px; }
header.topbar nav a {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: background 120ms;
}
header.topbar nav a:hover { background: var(--accent-soft); color: var(--accent-deep); }

main { padding: 36px 0 16px; }

/* ---- Hero ---- */
.hero { margin-bottom: 28px; max-width: 880px; }
.hero .kicker {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--accent-soft);
  padding: 5px 12px;
  border-radius: 999px;
  margin: 0 0 18px;
  font-weight: 600;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--ink);
}
.hero h1 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 700;
}
.hero .lead {
  font-size: 18px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 720px;
}
.hero .lead strong { color: var(--ink); }

/* ---- Map card ---- */
.map-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(29,25,22,0.03), 0 8px 30px -12px rgba(29,25,22,0.12);
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
  isolation: isolate;
}
.map-toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fffdf8 0%, var(--bg-card) 100%);
}
.map-tool { display: flex; align-items: center; gap: 10px; }
.map-tool label { font-size: 13px; color: var(--muted); font-weight: 500; }
.map-tool select {
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: white;
  cursor: pointer;
  color: var(--ink);
}
.map-tool select:hover { border-color: var(--accent); }
.map-legend {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  line-height: 1;
}
.map-legend .leg-label {
  display: inline-flex; align-items: center;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}
.map-legend .leg {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-soft); font-weight: 500;
  line-height: 1;
}
.map-legend .leg i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid white;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10);
  flex: 0 0 auto;
}
.map-legend .leg-star-svg {
  width: 12px;
  height: 12px;
  display: block;
}
.leg-cheap i { background: var(--cheap); }
.leg-mid   i { background: var(--mid); }
.leg-dear  i { background: var(--dear); }
.leg-na    i { background: var(--na); }
.leg-best i { background: #1f6f23; }
#map { height: 520px; width: 100%; background: #eee5d2; }
.map-foot { padding: 10px 18px; border-top: 1px solid var(--line); margin: 0; background: #fffdf8; }

/* ---- Map pins ---- */
.price-pin { background: transparent !important; border: none !important; }
.price-pin .pin {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1.5px solid white;
  color: white;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transform: translateY(0);
  transition: transform 120ms;
}
.price-pin:hover .pin { transform: translateY(-2px); }
.price-pin .pin-cheap { background: var(--cheap); }
.price-pin .pin-mid   { background: var(--mid); color: #2a1f00; }
.price-pin .pin-dear  { background: var(--dear); }
.price-pin .pin-na {
  background: var(--na);
  width: 14px; height: 14px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

/* Cheapest-in-view "best deal" pin */
.price-pin-best { z-index: 1000 !important; }
.price-pin .pin-best {
  font-size: 13px;
  padding: 7px 11px 7px 9px;
  background: #1f6f23;
  border: 2px solid #fffaee;
  box-shadow: 0 0 0 2px var(--cheap), 0 4px 10px rgba(0,0,0,0.3);
  animation: best-pulse 2.4s ease-in-out infinite;
}
.price-pin .pin-best .best-star {
  display: inline-block;
  margin-right: 4px;
  color: #ffd54a;
  font-size: 12px;
  text-shadow: 0 0 2px rgba(0,0,0,0.4);
}
@keyframes best-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--cheap), 0 4px 10px rgba(0,0,0,0.3); }
  50%      { box-shadow: 0 0 0 6px rgba(46,125,50,0.25), 0 4px 12px rgba(0,0,0,0.3); }
}

.foot-link { color: var(--accent-deep); text-decoration: none; font-weight: 600; }
.foot-link:hover { color: var(--accent); text-decoration: underline; }

/* ---- Filters ---- */
.filters {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 1px 0 rgba(29,25,22,0.03);
}
.filters input, .filters select, .filters button {
  font: inherit;
  font-size: 15px;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: white;
  color: var(--ink);
}
.filters input:focus, .filters select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.filters input { flex: 1 1 280px; }
.filters select { flex: 0 0 auto; cursor: pointer; }
.filters button {
  cursor: pointer; font-weight: 600;
  background: white;
}
.filters button:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }

/* ---- Tables ---- */
table.prices, table.venue-prices {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(29,25,22,0.03);
}
table.prices th, table.prices td,
table.venue-prices th, table.venue-prices td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 14.5px;
}
table.prices thead th {
  background: #fffaee;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line-strong);
  padding: 0;
}
table.prices thead th.th-sort > button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-align: inherit;
  transition: background 100ms, color 100ms;
}
table.prices thead th.th-sort.num > button { justify-content: flex-end; }
table.prices thead th.th-sort > button:hover {
  background: #fff3d6;
  color: var(--accent-deep);
}
table.prices thead th.th-sort > button:hover .sort-ind { color: var(--accent); opacity: 1; }
table.prices thead th.th-sort > button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: #fff3d6;
}
table.prices thead th.th-sort.is-active > button {
  color: var(--accent-deep);
  background: #fff0c9;
  box-shadow: inset 0 -3px 0 var(--accent);
}
.sort-ind {
  display: inline-block;
  width: 12px;
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
  opacity: 0.55;
  line-height: 1;
  transition: opacity 100ms, color 100ms;
}
.sort-ind.is-active {
  color: var(--accent);
  opacity: 1;
  font-size: 14px;
  font-weight: 800;
}
table.prices tbody tr:hover { background: #fffaee; }
table.prices tr:last-child td, table.venue-prices tr:last-child td { border-bottom: 0; }
table.prices a { color: var(--ink); font-weight: 600; text-decoration: none; }
table.prices a:hover { color: var(--accent); }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 13px; color: var(--muted); }

/* ---- Badges & change indicators ---- */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.badge-green  { background: var(--cheap-bg); color: var(--cheap); }
.badge-yellow { background: var(--mid-bg);   color: var(--mid); }
.badge-blue   { background: #dceaf8;         color: #1965b6; }
.badge-gray   { background: #ece6da;         color: var(--muted); }

.change {
  font-size: 13px; font-weight: 600;
  margin-left: 6px; vertical-align: middle;
}
.change.up { color: var(--accent); }
.change.down { color: var(--cheap); }
.change.same { color: var(--muted); }

/* ---- Venue page ---- */
.venue-head {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 26px;
  margin-bottom: 22px;
  box-shadow: 0 1px 0 rgba(29,25,22,0.03);
}
.venue-head h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
.venue-head .muted { margin: 0 0 8px; }
.venue-head .contact a {
  display: inline-block;
  margin-right: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  color: var(--ink-soft);
  background: white;
}
.venue-head .contact a:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }

h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 28px 0 12px;
}

table.venue-prices th { width: 32%; font-weight: 600; color: var(--ink-soft); }
table.venue-prices td.price { font-size: 22px; font-weight: 800; font-family: var(--serif); letter-spacing: -0.01em; }
table.venue-prices td.meta { color: var(--muted); font-size: 13px; }

.breadcrumb { margin-top: 0; margin-bottom: 14px; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }

.venue-meta { margin-top: 12px; }

/* ---- Specials grid ---- */
.day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.day-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 0 rgba(29,25,22,0.03);
}
.day-card h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--accent-deep);
}
.day-card ul { margin: 0; padding: 0; list-style: none; }
.day-card li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}
.day-card li:last-child { border-bottom: 0; }

/* ---- Buttons ---- */
.button {
  display: inline-block;
  background: var(--accent);
  color: white;
  padding: 11px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 2px 0 var(--accent-deep);
  transition: transform 80ms;
}
.button:hover { background: var(--accent-deep); color: white; transform: translateY(-1px); }

/* ---- Footer ---- */
footer {
  border-top: 1px solid var(--line);
  margin-top: 80px;
  padding: 28px 0;
  background: var(--bg-card);
  font-size: 13px;
  color: var(--muted);
}
footer .small { font-size: 13px; }

/* ---- Misc ---- */
.suburb-inline {
  display: none;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* ---- Mobile ---- */
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  header.topbar .wrap { padding: 10px 16px; gap: 8px; }
  header.topbar .logo .logo-mark { width: 26px; height: 26px; }
  header.topbar .logo .logo-text { font-size: 19px; }
  header.topbar nav { gap: 2px; }
  header.topbar nav a { padding: 6px 10px; font-size: 14px; }
  main { padding: 24px 0 8px; }
  .hero h1 { font-size: 30px; }
  .hero .lead { font-size: 16px; }
  #map { height: 420px; }
  .map-toolbar { padding: 12px; gap: 10px; }
  .map-legend { font-size: 11px; }
  .map-legend .leg { gap: 4px; }
  table.prices th.suburb-col,
  table.prices td.suburb-col { display: none; }
  .suburb-inline { display: block; }
  table.venue-prices th { width: 38%; }
  .venue-head { padding: 18px; }
}

/* Submission form */
.form-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 24px 0 40px;
  max-width: 640px;
}
.form-row { margin-bottom: 18px; }
.form-row[hidden] { display: none; }
.form-row label,
.form-row legend {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--ink);
}
.form-row input[type="text"],
.form-row input[type="number"],
.form-row select {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--ink);
  transition: border-color 120ms;
}
.form-row input[type="text"]:focus,
.form-row input[type="number"]:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-row input[type="file"] {
  font: inherit;
  font-size: 14px;
  padding: 6px 0;
}
.form-row input + label,
.form-row select + label {
  margin-top: 14px;
}
.form-row .form-help {
  font-size: 13px;
  color: var(--muted);
  margin: 6px 0 0;
}
.form-row .form-help.current-price {
  background: #fff7e0;
  border-left: 3px solid var(--mid);
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
  color: var(--ink-soft);
  font-size: 13.5px;
}
.form-row input[type="date"] {
  font: inherit;
  font-size: 15px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--ink);
}
.next-steps {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted);
  max-width: 520px;
  line-height: 1.5;
}
/* Honeypot — visually hidden but not display:none so bots fill it */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.item-radio {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 10px 14px 12px;
  margin: 0;
}
.item-radio legend { padding: 0 6px; }
.item-radio label {
  display: inline-block;
  margin: 4px 14px 4px 0;
  font-weight: 500;
  cursor: pointer;
}
.item-radio input[type="radio"] {
  margin-right: 6px;
  vertical-align: middle;
}
.form-actions { margin-top: 26px; }
.form-status {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  min-height: 1em;
}
.form-status:empty { display: none; }
.form-status.ok    { background: var(--cheap-bg); color: var(--cheap); }
.form-status.error { background: var(--dear-bg);  color: var(--dear); }

/* ---- Landing page (Australia map + city grid) ---- */
.hero-landing { max-width: 940px; }
.landing-map-card { margin-bottom: 36px; }
.landing-map-card #oz-map { height: 560px; width: 100%; background: #eaf1ee; }

.city-divicon { background: transparent !important; border: none !important; }
.city-pin {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--sans);
  text-align: center;
  padding: 6px 12px;
  border-radius: 14px;
  border: 2px solid white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.20);
  min-width: 100px;
  cursor: pointer;
  transition: transform 120ms;
  line-height: 1.1;
}
.city-pin:hover { transform: translateY(-2px); }
.city-pin strong { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.city-pin span   { font-size: 11px; opacity: 0.92; margin-top: 2px; }
.city-pin-live {
  background: var(--accent);
  color: white;
}
.city-pin-soon {
  background: rgba(255,255,255,0.96);
  color: var(--ink-soft);
  border: 2px dashed var(--line-strong);
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

.city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.city-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(29,25,22,0.03);
}
.city-card.city-card-soon {
  background: #fffaf2;
  border-style: dashed;
}
.city-card h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 8px;
}
.city-card .city-state {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}
.city-card-meta { margin: 0 0 8px; }
.city-card .city-stats {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--ink-soft);
}
.city-card-cta { font-size: 14px; }
.city-card .city-card-cta-soft {
  display: inline-block;
  font-weight: 600;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1.5px dashed currentColor;
  padding-bottom: 1px;
}
.city-card .city-card-cta-soft:hover { color: var(--accent); }

/* Inline 'Change city' link in hero */
a.city-switch {
  display: inline-block;
  margin-left: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1.5px dashed currentColor;
  padding-bottom: 1px;
}
a.city-switch:hover { color: var(--accent); }

/* Submit-a-price label collapses to "Submit" on phones */
header.topbar nav a[href$="submit.html"] span.short { display: none; }
header.topbar nav a[href$="submit.html"] span.full  { display: inline; }

@media (max-width: 480px) {
  .map-legend { display: none; }
  #map { height: 380px; }
  header.topbar nav a { padding: 5px 8px; font-size: 13.5px; }
  header.topbar .logo .logo-text { font-size: 17px; }
  header.topbar nav a[href$="submit.html"] span.short { display: inline; }
  header.topbar nav a[href$="submit.html"] span.full  { display: none; }
}