/* Parking site theme.
   Mobile-first and deliberately small: the whole point of the product is that the
   answer is readable before anything loads, so there is no framework, no map SDK and
   no webfont. Three theme states are handled — explicit light, explicit dark, and the
   unstamped default where only prefers-color-scheme separates them. */

:root {
  --ground: #F2F4F7;
  --surface: #FFFFFF;
  --surface-sunk: #E9EDF2;
  --ink: #141C26;
  --ink-mid: #47566A;
  --ink-soft: #74829A;
  --rule: #D8DFE8;
  --rule-strong: #B9C4D2;
  --accent: #0E4FA8;
  --accent-ink: #FFFFFF;
  --accent-soft: #E4EDFB;
  --signal: #B36A00;
  --signal-soft: #FBEFD8;
  --shadow: 0 1px 2px rgba(20, 28, 38, .06), 0 8px 24px rgba(20, 28, 38, .07);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0F141A;
    --surface: #19202A;
    --surface-sunk: #222B37;
    --ink: #E7ECF3;
    --ink-mid: #A6B3C4;
    --ink-soft: #7D8B9E;
    --rule: #2C3644;
    --rule-strong: #3D4A5C;
    --accent: #6FA5F0;
    --accent-ink: #0F141A;
    --accent-soft: #1B2C45;
    --signal: #E5A93F;
    --signal-soft: #33290F;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

:root[data-theme="dark"] {
  --ground: #0F141A;
  --surface: #19202A;
  --surface-sunk: #222B37;
  --ink: #E7ECF3;
  --ink-mid: #A6B3C4;
  --ink-soft: #7D8B9E;
  --rule: #2C3644;
  --rule-strong: #3D4A5C;
  --accent: #6FA5F0;
  --accent-ink: #0F141A;
  --accent-soft: #1B2C45;
  --signal: #E5A93F;
  --signal-soft: #33290F;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* The reading column. Wide enough on desktop that the answer card and everything
   supporting it can sit side by side, rather than a phone layout stretched down a
   1600px monitor. */
.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px 72px;
}

/* ---- masthead ---- */
/* Full-bleed bar with its contents held to the reading column, so the rule under it
   spans the window instead of stopping short at 620px. */
.bar {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  margin-bottom: 4px;
}

.bar-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 750;
  font-size: 14px;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
}

.pmark {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
}

.bar-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- blocks ---- */
.block {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

h1 {
  font-size: clamp(27px, 3.4vw, 36px);
  line-height: 1.12;
  letter-spacing: -.022em;
  font-weight: 780;
  margin: 0;
  text-wrap: balance;
}

.sub {
  font-size: 13.5px;
  color: var(--ink-mid);
  line-height: 1.45;
}

.sub-h {
  font-size: 15px;
  font-weight: 720;
  letter-spacing: -.008em;
}

/* ---- the answer ---- */
.answer {
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

.answer-flag {
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 6px 12px;
}

.answer-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.answer-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.lot-name {
  font-size: 20px;
  font-weight: 730;
  letter-spacing: -.014em;
  line-height: 1.2;
}

.price {
  font-size: 27px;
  font-weight: 780;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 3px;
  background: var(--surface-sunk);
  color: var(--ink-mid);
  white-space: nowrap;
}

.chip.stars { color: var(--ink); font-variant-numeric: tabular-nums; }

.reason {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}

.cta {
  display: block;
  text-align: center;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 680;
  font-size: 15px;
  padding: 13px;
  border-radius: 7px;
}

.cta:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

.typical {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  text-align: center;
  letter-spacing: .02em;
  line-height: 1.6;
}

/* ---- alternates ---- */
.alts {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
}

.alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}

.alt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.alt-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.alt-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.alt-name { font-size: 14.5px; font-weight: 620; letter-spacing: -.008em; }
.alt-meta { font-size: 12.5px; color: var(--ink-mid); }

.alt-price {
  font-size: 17px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* ---- event list ---- */
.events { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }

.event-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}

.event-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.event-name { font-size: 14.5px; font-weight: 600; letter-spacing: -.006em; min-width: 0; }
.event-date {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  letter-spacing: .02em;
}

/* ---- venue index ---- */
.venue-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}

.venue-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.venue-card h2 { margin: 0; font-size: 17px; font-weight: 720; letter-spacing: -.01em; }
.venue-card .sub { font-size: 13px; }

.divider { height: 1px; background: var(--rule); }

.foot {
  padding: 20px 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  line-height: 1.7;
  letter-spacing: .02em;
}

.foot a { color: var(--ink-soft); }

@media (prefers-reduced-motion: no-preference) {
  .cta, .alt, .event-row, .venue-card { transition: opacity .15s ease, border-color .15s ease; }
  .cta:hover { opacity: .88; }
  .alt:hover .alt-name, .event-row:hover .event-name { color: var(--accent); }
  .venue-card:hover { border-color: var(--rule-strong); }
}

/* ==========================================================================
   Home page.

   The venue and event pages are deliberately plain, read in a hurry and often in
   a car. This page has the opposite job: it has to earn enough trust that someone
   believes a single recommendation. So it gets weight, depth and colour.

   The visual language comes from the subject rather than a template: asphalt,
   painted bay lines, the blue of a parking sign, road-marking amber. The hero
   commits to a dark ground in both themes, because it reads as a surface you park
   on and a band that stays constant gives the page a spine.
   ========================================================================== */

.home-wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* ---- hero ---- */
.hero {
  --asphalt: #12161C;
  --paint: #F6F8FB;
  --paint-dim: rgba(246, 248, 251, .13);
  --amber: #F2B233;
  position: relative;
  overflow: hidden;
  background: var(--asphalt);
  color: var(--paint);
  padding: 66px 0 74px;
}

/* Painted bay markings as seen from above, masked so they fade behind the text
   instead of fighting it. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 116px, var(--paint-dim) 116px 120px),
    linear-gradient(0deg, transparent 0 78%, var(--paint-dim) 78% calc(78% + 3px), transparent calc(78% + 3px));
  -webkit-mask-image: radial-gradient(120% 100% at 78% 40%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 100% at 78% 40%, #000 0%, transparent 72%);
  pointer-events: none;
}

.hero-grid { position: relative; display: grid; gap: 44px; align-items: center; }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 56px; }
}

.hero-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid rgba(242, 178, 51, .4);
  border-radius: 999px;
  padding: 6px 13px;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(38px, 5.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -.038em;
  font-weight: 830;
  margin: 0 0 20px;
  color: var(--paint);
  text-wrap: balance;
}

.hero h1 em { font-style: normal; color: var(--amber); }

.hero p.lede {
  font-size: clamp(16.5px, 1.5vw, 19px);
  color: rgba(246, 248, 251, .72);
  max-width: 44ch;
  line-height: 1.5;
  margin: 0 0 30px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #3D7BD6 0%, #0E4FA8 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 730;
  font-size: 16.5px;
  padding: 16px 30px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 10px 26px rgba(14, 79, 168, .42);
}

.hero-cta:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

/* ---- the demo: the pile of options behind, the one answer in front ---- */
.demo { position: relative; padding: 8px 0 0; }

.demo-stack {
  display: flex;
  flex-direction: column;
  gap: 7px;
  transform: perspective(900px) rotateX(6deg);
  transform-origin: top center;
}

.demo-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 15px;
  border-radius: 8px;
  background: rgba(246, 248, 251, .055);
  border: 1px solid rgba(246, 248, 251, .075);
  font-size: 13.5px;
  color: rgba(246, 248, 251, .4);
}

.demo-row span:last-child { font-variant-numeric: tabular-nums; }

/* Each row further down is fainter: the pile you are being asked to sort through. */
.demo-row:nth-child(1) { opacity: .95; }
.demo-row:nth-child(2) { opacity: .78; }
.demo-row:nth-child(3) { opacity: .6; }
.demo-row:nth-child(4) { opacity: .44; }
.demo-row:nth-child(5) { opacity: .3; }
.demo-row:nth-child(6) { opacity: .18; }
.demo-row:nth-child(7) { opacity: .09; }

.demo-answer {
  position: relative;
  margin: -132px -6px 0 14px;
  background: #FFFFFF;
  color: #141C26;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .55);
}

.demo-flag {
  background: linear-gradient(180deg, #3D7BD6 0%, #0E4FA8 100%);
  color: #fff;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding: 8px 15px;
}

.demo-body { padding: 17px 18px 19px; display: flex; flex-direction: column; gap: 11px; }
.demo-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.demo-lot { font-size: 19px; font-weight: 760; letter-spacing: -.017em; line-height: 1.2; }

.demo-price {
  font-size: 30px;
  font-weight: 810;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.demo-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.demo-chip {
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 4px;
  background: #EDF1F6;
  color: #47566A;
  white-space: nowrap;
}

.demo-why { font-size: 13.5px; line-height: 1.5; color: #2A3646; }

.demo-book {
  display: block;
  text-align: center;
  background: linear-gradient(180deg, #3D7BD6 0%, #0E4FA8 100%);
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  padding: 12px;
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  text-decoration: none;
}

.demo-caption {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(246, 248, 251, .34);
  text-align: center;
}

/* ---- sections ---- */
.home-section { padding: 66px 0; }
.home-section + .home-section { border-top: 1px solid var(--rule); }

.home-section h2 {
  font-size: clamp(24px, 3.6vw, 34px);
  letter-spacing: -.026em;
  font-weight: 790;
  margin: 0 0 12px;
  text-wrap: balance;
}

.home-section .intro {
  color: var(--ink-mid);
  font-size: 17px;
  max-width: 56ch;
  margin: 0 0 36px;
  line-height: 1.55;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow);
}

.card .glyph {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 140%);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 6px;
}

.card h3 { margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.012em; }
.card p { margin: 0; font-size: 14.5px; color: var(--ink-mid); line-height: 1.6; }

/* ---- steps: a real sequence, so the numbering carries meaning ---- */
.steps { display: flex; flex-direction: column; }

.step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

.step:last-child { border-bottom: none; }

.step .n {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  background: linear-gradient(180deg, #3D7BD6 0%, #0E4FA8 100%);
  border-radius: 11px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  color: #fff;
}

.step h3 { margin: 0 0 4px; font-size: 17px; font-weight: 740; letter-spacing: -.012em; }
.step p { margin: 0; font-size: 15px; color: var(--ink-mid); line-height: 1.6; }

/* ---- closing band ---- */
.band {
  position: relative;
  overflow: hidden;
  background: #12161C;
  color: #F6F8FB;
  padding: 66px 0;
  text-align: center;
}

.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0 116px, rgba(246, 248, 251, .11) 116px 120px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
}

.band > * { position: relative; }
.band h2 { margin: 0 0 14px; font-size: clamp(24px, 3.6vw, 34px); letter-spacing: -.026em; font-weight: 790; }
.band p { margin: 0 auto 28px; max-width: 46ch; color: rgba(246, 248, 251, .7); font-size: 17px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-cta, .card { transition: transform .18s ease, box-shadow .18s ease; }
  .hero-cta:hover { transform: translateY(-2px); }
  .card:hover { transform: translateY(-3px); }
}

/* ==========================================================================
   Desktop layout for the venue and event pages.

   On a phone these pages are one column and the order is the argument: answer,
   then alternatives, then everything else. On a wide screen that same order
   becomes a 2,000px scroll with the answer stranded at the top and half the
   window empty, so the supporting material moves alongside it instead. The
   answer stays put while the schedule scrolls, because it is the thing the
   reader came for and the thing they check back against.
   ========================================================================== */

.cols { display: flex; flex-direction: column; gap: 0; }

.col-side { display: flex; flex-direction: column; }

@media (min-width: 940px) {
  .cols {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding-top: 8px;
  }

  .col-main { position: sticky; top: 20px; }

  /* The first block in each column sets its own top padding on mobile; side by side
     they need to start level with each other. */
  .col-main > .block:first-child,
  .col-side > .block:first-child { padding-top: 0; }

  /* The rule between answer and alternates is a mobile affordance — in two columns
     the gap already separates them. */
  .col-side .divider { display: none; }

}

/* Long schedules are the main reason these pages ran tall. Multi-column is ignored on
   a flex container, so the list has to drop back to display:block to split. */
@media (min-width: 1180px) {
  .events {
    display: block;
    column-count: 2;
    column-gap: 36px;
    border-top: none;
  }
  .event-row {
    break-inside: avoid;
    border-top: 1px solid var(--rule);
    border-bottom: none;
  }
}

/* Venue directory: cards in a grid rather than a single stacked column. */
.venue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* ---- search ---- */
.search-wrap { display: flex; flex-direction: column; gap: 6px; }

.search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.search-field input {
  width: 100%;
  font-family: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--rule-strong);
  border-radius: 12px;
  padding: 16px 18px 16px 46px;
  box-shadow: var(--shadow);
  -webkit-appearance: none;
  appearance: none;
}

.search-field input::placeholder { color: var(--ink-soft); }

.search-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-field .mag {
  position: absolute;
  left: 17px;
  width: 17px;
  height: 17px;
  pointer-events: none;
  color: var(--ink-soft);
}

.search-hint {
  font-size: 13px;
  color: var(--ink-soft);
  padding: 2px 2px 0;
}

.results { display: flex; flex-direction: column; margin-top: 22px; }

.res-group {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 18px 0 8px;
  border-bottom: 1px solid var(--rule);
}

.res {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}

.res:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.res-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.res-name { font-size: 15.5px; font-weight: 640; letter-spacing: -.008em; }
.res-sub { font-size: 13px; color: var(--ink-mid); }

.res-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  letter-spacing: .02em;
}

.res mark {
  background: var(--signal-soft);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.res-empty { padding: 30px 2px; color: var(--ink-mid); font-size: 15px; }

@media (prefers-reduced-motion: no-preference) {
  .res { transition: background .12s ease; }
  .res:hover { background: var(--surface-sunk); }
}