/* ===========================================================================
   The Cigar Trail — Classical design system
   Tokens taken verbatim from the design handoff. Warm near-white ground,
   Cormorant Garamond over Lora, hairline dividers, outlined buttons.
   No fills, no gradients, no pill shapes. Sized for an older audience:
   17px base text, 44–48px minimum touch targets, always-labeled controls.
   =========================================================================== */

:root {
  --bg: #f3f2f2;
  --surface: #eae9e9;
  --text: #201f1d;

  --accent: #b68235;
  --accent-100: #fff3e4;
  --accent-600: #a06f24;
  --accent-700: #7d5411;
  --accent-800: #5a3b0a;

  --divider: color-mix(in srgb, #201f1d 16%, transparent);

  --neutral-100: #f8f4f4;
  --neutral-200: #eae7e7;
  --neutral-300: #d7d3d3;
  --neutral-600: #7d7979;
  --neutral-700: #605d5d;
  --neutral-800: #444141;

  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Lora", Georgia, serif;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  --sp-1: 5px;
  --sp-2: 9px;
  --sp-3: 14px;
  --sp-4: 18px;
  --sp-6: 28px;
  --sp-8: 37px;

  --nav-h: 72px;

  font-size: 17px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { margin: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
}

body.modal-open { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600; /* never bolder */
  letter-spacing: -0.01em;
}

a { color: var(--accent-700); }

/* Faint drifting-smoke wash behind the page. Must never compete with text. */
/* Wispy smoke drifts through the whole page, not just the hero — pinned to
   the viewport (background-attachment: fixed) so it reads as ambient
   atmosphere behind the content rather than scrolling past like an image.
   It only shows through where a section doesn't paint its own opaque
   background (cards/panels/the nav all do), which keeps it well clear of
   anywhere text actually sits. Kept faint deliberately — see
   assets/smoke-texture.svg for why each wisp is already low-opacity before
   this layers a further 0.35 on top. */
.smoke-ground {
  background-color: var(--bg);
  background-image:
    url("../assets/smoke-texture.svg"),
    radial-gradient(ellipse 900px 480px at 8% -20%, color-mix(in srgb, var(--neutral-600) 16%, transparent) 0%, transparent 68%),
    radial-gradient(ellipse 650px 420px at 92% -8%, color-mix(in srgb, var(--neutral-600) 11%, transparent) 0%, transparent 70%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center center, 0 0, 0 0;
  background-size: cover, auto, auto;
  background-attachment: fixed, scroll, scroll;
}

/* ---------------------------------------------------------------- Buttons */
/* Outline only. No solid or gradient fills anywhere on the site. */
.btn,
.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  height: 48px;
  padding: 0 26px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--divider);
  background: transparent;
  color: var(--text);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.btn-primary { border-color: var(--accent); color: var(--accent-700); }
.btn-primary:hover { border-color: var(--accent-600); color: var(--accent-800); background: var(--accent-100); }
.btn-ghost:hover { border-color: var(--neutral-600); }

.btn-sm { height: 44px; padding: 0 20px; font-size: 1rem; }

.btn-link {
  background: none;
  border: none;
  color: var(--accent-700);
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* ------------------------------------------------------------------- Nav */
/* Sticky: the page is long now, and Add a Lounge should always be reachable. */
.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-8);
  border-bottom: 1px solid var(--divider);
  min-height: var(--nav-h);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 900;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--text);
  min-width: 0;
}

/* Abstract cigar mark: accent ring around an upright band. */
.logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-mark svg { flex: none; }

.wordmark { font-family: var(--font-heading); font-weight: 600; font-size: 1.3rem; line-height: 1.1; }

.nav-tagline {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--neutral-700);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-links { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; }
.nav-links a.nav-link { color: var(--text); text-decoration: none; font-size: 0.9rem; }
.nav-links a.nav-link:hover { color: var(--accent-700); text-decoration: underline; }
.nav-links a.nav-link[aria-current="page"] { color: var(--accent-700); }

.nav-search { flex: 1; max-width: 480px; margin-left: var(--sp-4); }

.nav-search input {
  width: 100%;
  height: 46px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
}
.nav-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ------------------------------------------------------------------ Hero */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-8);
  padding: var(--sp-8);
  align-items: center;
  position: relative;
}

.hero-copy { position: relative; z-index: 1; }

.hero h1 { font-size: 2.6rem; line-height: 1.1; margin: 0 0 var(--sp-3); }

.hero-sub {
  font-size: 1.15rem;
  color: var(--neutral-800);
  line-height: 1.65;
  max-width: 46ch;
  margin: 0 0 var(--sp-4);
}

.hero-ctas { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hero-search { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; position: relative; }
.hero-search input[type="search"] {
  flex: 1;
  min-width: 220px;
  height: 48px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
}
.hero-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.hero-search-suggestions {
  list-style: none;
  margin: -8px 0 var(--sp-3);
  padding: 0;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.hero-search-suggestions li + li { border-top: 1px solid var(--divider); }
.hero-search-suggestions a {
  display: block;
  padding: 12px var(--sp-3);
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
}
.hero-search-suggestions a:hover,
.hero-search-suggestions a:focus { background: var(--bg); }
.hero-search-suggestions .suggestion-meta { color: var(--neutral-700); font-size: 0.82rem; }

/* Photo "plate": thin light mat, hairline outline, faint warm grade.
   With no real photo it shows the cigar illustration rather than a striped box —
   the layout reads as finished instead of broken. */
.plate {
  border: 6px solid var(--surface);
  outline: 1px solid var(--divider);
  filter: sepia(0.22) saturate(0.82) contrast(1.05);
  background: url("../assets/placeholder-cigar.svg") center / cover no-repeat, var(--neutral-200);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Capped so the whole framed box (border + photo) shrinks together as one
   unit — the photo stays full-frame (nothing cropped), it just renders
   smaller. justify-self keeps it centred once it's narrower than the grid
   column instead of hugging the column's left edge. */
.hero-photo { margin: 0; position: relative; z-index: 1; max-width: 320px; justify-self: center; }
.hero-photo figcaption {
  font-size: 0.7rem;
  color: var(--neutral-700);
  text-align: center;
  margin-top: 6px;
}

/* A real photo sits on top of the illustration and hides it entirely. */
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The hero photo shows the full, uncropped frame instead — no forced 4:3 box
   and no object-fit: cover cutting off the top/bottom of a portrait photo.
   Compound selectors (not just .hero-plate) so these reliably beat the two
   rules above regardless of source order — see the dropzone-hero comment
   earlier in this file for why that matters with equal-specificity rules. */
.plate.hero-plate { aspect-ratio: auto; }
.plate.hero-plate img { height: auto; object-fit: contain; }

/* ------------------------------------------------------------- Home body */
.section { padding: 0 var(--sp-8) var(--sp-8); scroll-margin-top: var(--nav-h); }

.section h2 {
  font-size: 1.4rem;
  margin: 0 0 var(--sp-4);
  border-top: 1px solid var(--divider);
  padding-top: var(--sp-6);
}

.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }

.featured-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  text-decoration: none;
  color: var(--text);
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
}
.featured-card:hover { border-color: var(--accent); }
.featured-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.featured-card .plate { border-width: 5px; aspect-ratio: 16 / 10; }

.featured-name { font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; }
.featured-meta { font-size: 0.82rem; color: var(--neutral-700); }
.featured-card p { font-size: 0.85rem; margin: 0; opacity: 0.8; line-height: 1.5; }

.cta-strip {
  border-top: 1px solid var(--divider);
  padding: var(--sp-4) var(--sp-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.cta-strip .cta-text { font-family: var(--font-heading); font-size: 1.1rem; }

/* ---------------------------------------------------------------- Badges */
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

.badge {
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 1.5px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge.tinted { background: var(--accent-100); color: var(--accent-800); }
.badge.outlined { border-color: var(--accent); color: var(--accent-700); }
.badge.muted { border-color: var(--divider); color: var(--neutral-700); }

/* ------------------------------------------------------ Directory section */
.directory-search { display: flex; margin-bottom: var(--sp-3); }

.directory-search input[type="search"] {
  height: 46px;
  width: 100%;
  padding: 0 var(--sp-3);
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
}
.directory-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.filters {
  display: flex;
  gap: var(--sp-4);
  align-items: end;
  padding: var(--sp-3);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: none;
  background: var(--surface);
  flex-wrap: wrap;
}

.filter { display: flex; flex-direction: column; gap: 4px; }

.filter > span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--neutral-700);
  font-weight: 600;
}

.filter select {
  height: 44px;
  min-width: 170px;
  padding: 0 10px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 0.92rem;
  font-family: var(--font-body);
  color: var(--text);
  cursor: pointer;
}
.filter select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.filter-foot {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 44px;
}
.result-count { font-size: 0.85rem; color: var(--neutral-700); }

/* Fixed height: the directory is a panel inside a scrolling page now, not a
   full-height app screen, so it must not swallow the whole viewport. */
.directory-split {
  display: flex;
  height: 660px;
  border: 1px solid var(--divider);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
}

.lounge-panel {
  width: 400px;
  flex: none;
  border-right: 1px solid var(--divider);
  overflow-y: auto;
  padding: var(--sp-3);
  background: var(--bg);
}

.lounge-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }

.lounge-card {
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  background: transparent;
  transition: border-color 0.15s;
}
.lounge-card:hover { border-color: var(--accent); }
.lounge-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lounge-card.active {
  border: 1.5px solid var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.lounge-card h3 { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.card-price { color: var(--accent-700); font-weight: 600; font-size: 0.9rem; flex: none; }
.card-meta { font-size: 0.82rem; color: var(--neutral-700); }
.card-distance { font-size: 0.82rem; color: var(--accent-700); font-weight: 600; margin-top: 2px; }
.card-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }

.no-results { padding: var(--sp-8) var(--sp-3); color: var(--neutral-700); font-size: 0.9rem; text-align: center; }
.no-results code { background: var(--surface); padding: 1px 5px; border-radius: var(--radius-sm); }

/* ------------------------------------------------------------------- Map */
.map-wrap { flex: 1; position: relative; min-width: 0; }
#map { height: 100%; width: 100%; background: var(--neutral-200); }


.cigar-marker { background: none; border: none; }

.map-legend {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 500;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-md);
}

.map-legend strong {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neutral-700);
  font-weight: 600;
  margin-bottom: 2px;
}

.map-legend span { display: flex; align-items: center; gap: 8px; }

/* Shape, not colour alone, carries the meaning. */
.legend-shape { width: 10px; height: 10px; background: var(--accent); display: inline-block; flex: none; }
.legend-shape[data-seating="sit-down"] { border-radius: 50%; }
.legend-shape[data-seating="members"] { border-radius: 0; }
.legend-shape[data-seating="retail-only"] { height: 2px; }
.legend-shape[data-seating="unknown"] { background: transparent; border: 1.5px solid var(--accent); border-radius: 50%; }

/* Flashes briefly when someone scrolls over the map without Ctrl/Cmd held —
   explains why the page didn't move, rather than just silently ignoring
   their scroll. Centered, sits above the map tiles but below Leaflet's own
   zoom control (z-index 1000) so it never blocks a real click. */
.map-scroll-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 700;
  background: color-mix(in srgb, var(--neutral-800) 88%, transparent);
  color: var(--neutral-100);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.map-scroll-hint.visible { opacity: 1; }

.leaflet-popup-content-wrapper {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.leaflet-popup-tip { background: var(--surface); }
.leaflet-popup-content { margin: var(--sp-3); font-family: var(--font-body); }
.popup-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.1rem; }
.popup-meta { font-size: 0.82rem; color: var(--neutral-700); }

/* ---------------------------------------------------------------- Drawer */
.drawer[hidden], .modal-backdrop[hidden] { display: none; }

.drawer-scrim {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--neutral-800) 35%, transparent);
  z-index: 1100;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 460px;
  max-width: 100vw;
  background: var(--surface);
  border-left: 1px solid var(--divider);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-4) var(--sp-4) var(--sp-6);
  overflow-y: auto;
  z-index: 1200;
}

.close-row { display: flex; justify-content: flex-end; }

.close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--divider);
  background: var(--bg);
  color: var(--neutral-700);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-btn:hover { border-color: var(--accent); color: var(--accent-700); }

.drawer h2 { font-size: 1.5rem; margin: var(--sp-3) 0 4px; }
.drawer-meta { font-size: 0.85rem; color: var(--neutral-700); margin-bottom: var(--sp-2); }
.drawer p { font-size: 0.92rem; line-height: 1.6; }

.photo-strip { display: flex; gap: var(--sp-2); overflow-x: auto; margin-top: var(--sp-2); padding-bottom: 4px; }

.photo-item { position: relative; flex: none; width: 170px; margin: 0; }
.photo-item .plate { aspect-ratio: 4 / 3; border-width: 5px; padding: 0; overflow: hidden; cursor: zoom-in; }

/* Click-to-enlarge overlay for lounge photos. Reuses .modal-backdrop (same
   dimmed, blurred, centered scrim as the Add a Lounge form) rather than a
   one-off overlay, so it matches the rest of the site's dialog styling. */
.lightbox-backdrop { align-items: center; cursor: zoom-out; }
.lightbox-img {
  max-width: min(90vw, 1100px);
  max-height: 88vh;
  width: auto;
  height: auto;
  border: 8px solid var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  cursor: default;
}
.lightbox-close {
  position: fixed;
  top: var(--sp-4);
  right: var(--sp-4);
  background: var(--surface);
  border-radius: 50%;
}

/* No illustration when a lounge has no photos — the upload control itself
   fills the space instead, so the empty state is an invitation to contribute
   rather than a stand-in graphic. */
/* Compound selector (not just .dropzone-hero): this rule sits before the base
   .dropzone rule in the file, and CSS breaks equal-specificity ties by source
   order — a single-class selector here would lose to .dropzone's `display:
   block` further down. .dropzone.dropzone-hero outranks it regardless of
   order. */
.dropzone.dropzone-hero {
  margin-top: var(--sp-2);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--sp-6) var(--sp-4);
}
.dropzone-hero .dropzone-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
}
.dropzone-hero .dropzone-sub { font-size: 0.83rem; color: var(--neutral-700); }

.photo-actions { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }

.status-msg { font-size: 0.85rem; margin: var(--sp-2) 0 0; min-height: 1em; }
.status-msg.ok { color: var(--accent-700); }
.status-msg.warn { color: #9a3412; }

.details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  margin: var(--sp-3) 0;
  font-size: 0.88rem;
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
}
.details dt {
  color: var(--neutral-700);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding-top: 2px;
}
.details dd { margin: 0; }

.drawer-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }

.notice {
  border: 1px solid var(--divider);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg);
  padding: var(--sp-3);
  font-size: 0.85rem !important;
  line-height: 1.55 !important;
  margin: var(--sp-3) 0 0;
}

/* --------------------------------------------------------------- Reviews */
.review-section { border-top: 1px solid var(--divider); padding-top: var(--sp-3); margin-top: var(--sp-4); }

.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.section-head h3 { font-size: 1.1rem; margin: 0; }
.avg-rating { color: var(--accent-700); font-size: 0.85rem; font-weight: 600; }

.review-list { list-style: none; margin: 0; padding: 0; }

.review {
  position: relative;
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--bg);
  padding: var(--sp-3);
  margin-top: var(--sp-2);
}

.review-head { display: flex; justify-content: space-between; gap: var(--sp-2); }
.review-author { font-weight: 600; font-size: 0.9rem; }
.review-stars { color: var(--accent-700); font-size: 0.85rem; }
.review-date { font-size: 0.72rem; color: var(--neutral-700); margin-top: 2px; }
.review p { font-size: 0.87rem; margin: 8px 0 0; line-height: 1.55; }

.empty-note { font-size: 0.87rem; color: var(--neutral-700); font-style: italic; }

.review-form {
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--bg);
  padding: var(--sp-3);
  margin-top: var(--sp-3);
}
.review-form-title { font-size: 0.85rem; font-weight: 600; margin-bottom: var(--sp-2); }

.review-form label { display: block; margin-bottom: var(--sp-2); }
.review-form .lbl {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-700);
  font-weight: 600;
  margin-bottom: 4px;
}

.review-form input,
.review-form select,
.review-form textarea {
  width: 100%;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text);
}
.review-form input, .review-form select { height: 44px; padding: 0 10px; }
.review-form textarea { padding: 8px 10px; resize: vertical; }
.review-form input:focus, .review-form select:focus, .review-form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.review-form-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }

/* ----------------------------------------------------------------- Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--neutral-800) 45%, transparent);
  backdrop-filter: blur(2px);
  z-index: 2000;
  display: flex;
  justify-content: center;
  padding: var(--sp-8) var(--sp-3);
  overflow-y: auto;
}

.modal {
  position: relative;
  width: min(720px, 100%);
  height: max-content;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
}

.modal h2 { font-size: 1.6rem; margin: 0 0 6px; }
.modal-intro { font-size: 0.9rem; color: var(--neutral-700); margin: 0 0 var(--sp-4); line-height: 1.6; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.field { display: flex; flex-direction: column; gap: 5px; margin-top: var(--sp-3); }
.field-grid .field { margin-top: 0; }

.field > span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-700);
  font-weight: 600;
}
.field > span b { color: var(--accent-700); }

.field input,
.field select,
.field textarea {
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  width: 100%;
}
.field input, .field select { height: 46px; padding: 0 12px; }
.field textarea { padding: 10px 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* Google's search widget defaults to color-scheme: light dark — meaning it
   follows the browser/OS's dark-mode preference on its own, independent of
   this page's (always-light) theme, which is why it can render as a solid
   black box regardless of anything else on the form. Pinning color-scheme
   to light stops it from ever picking its dark palette; the explicit
   background/border/color/font values on top match it to the rest of the
   form's inputs rather than Google's own default light-grey look. */
gmp-place-autocomplete {
  display: block;
  width: 100%;
  height: 46px;
  color-scheme: light;
  background-color: var(--bg);
  color: var(--text);
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.dropzone {
  margin-top: 6px;
  border: 1.5px dashed var(--divider);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  text-align: center;
  color: var(--neutral-700);
  font-size: 0.85rem;
  background: var(--bg);
  cursor: pointer;
  display: block;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--accent-100); }

.hp { position: absolute; left: -9999px; }

.field-help {
  font-size: 0.82rem;
  color: var(--neutral-700);
  line-height: 1.5;
  margin: 6px 0 0;
}
.field-help b { color: var(--text); }

.optional { text-transform: none; letter-spacing: 0; font-weight: 400; }

.photo-preview { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.photo-preview img {
  width: 76px; height: 76px; object-fit: cover;
  border: 4px solid var(--bg); outline: 1px solid var(--divider);
}

.form-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; }

.payload p { font-size: 0.85rem; color: var(--neutral-700); line-height: 1.6; }
.payload code { background: var(--bg); padding: 1px 5px; border-radius: var(--radius-sm); }
.payload pre {
  background: var(--neutral-800);
  color: var(--neutral-100);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  font-size: 0.78rem;
  overflow-x: auto;
  max-height: 280px;
  line-height: 1.5;
}

/* ----------------------------------------------------------------- About */
/* .about itself stays 68ch for readable line length, but with no cap on the
   section around it, that narrow column just sits pinned to the left edge on
   a wide monitor — everything to its right (including the room the Churchill
   photo's margin note is meant to use) becomes dead, lopsided whitespace
   instead of a balanced margin. Capping and centering the whole section
   turns that leftover space into an even margin on both sides. */
.about-section { max-width: 1240px; margin: 0 auto; }
.about { max-width: 68ch; }
.breadcrumbs { font-size: 0.85rem; color: var(--neutral-700); margin-bottom: var(--sp-4); }
.breadcrumbs a { color: inherit; }
.about p { font-size: 1rem; line-height: 1.7; text-align: justify; }

.about-subhead {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.2rem;
  margin: var(--sp-6) 0 var(--sp-3);
}

/* First-person narrative — set a touch warmer and looser than the copy above
   it, with a rule down the left so it reads as a personal aside. */
.founding-story {
  border-left: 2px solid var(--accent);
  padding-left: var(--sp-4);
}
.founding-story p { line-height: 1.75; color: var(--neutral-800); }
.founding-story p:first-child { margin-top: 0; }
.founding-story p:first-child::first-letter {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 2.6em;
  float: left;
  line-height: 0.86;
  margin: 0.06em 0.08em 0 0;
  color: var(--accent-700);
}
.founding-story p:last-child { margin-bottom: 0; }

.aside-card {
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin: var(--sp-6) 0;
  background: var(--surface);
}
.aside-card .aside-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; margin-bottom: 6px; }
/* Same size as the surrounding About copy (.about p is 1rem) — this text
   isn't a footnote, it shouldn't read smaller than the paragraphs around it. */
.aside-card p { font-size: 1rem; line-height: 1.7; margin: 0; text-align: left; }

/* Photo + text. Genuine public-domain photo — see the figcaption credit and
   README for source/license. Default (up to 1360px): photo sits to the right
   of the text, inside the card — row-reverse so the DOM can keep image-then-
   text order (doesn't really matter for a figure+prose pair) while reading
   right visually. */
.aside-card-photo { display: flex; flex-direction: row-reverse; gap: var(--sp-4); align-items: flex-start; }

.aside-photo { flex: 0 0 210px; margin: 0; }
.aside-photo .plate { aspect-ratio: 1 / 1; border-width: 4px; }
.aside-photo figcaption {
  font-size: 0.68rem;
  color: var(--neutral-700);
  line-height: 1.45;
  margin-top: 6px;
  text-align: center;
}

.aside-text { flex: 1; min-width: 0; }

/* Wide viewports: the photo escapes the card entirely and sits in the page's
   own right-hand margin — the "empty blank space" beside the centered
   About column — rather than being squeezed inside the box. .about is the
   positioning anchor (max-width: 68ch, centered), so this only fires once
   there's reliably enough gutter (~370px+) to hold a 260px photo without
   crowding the viewport edge. */
@media (min-width: 1440px) {
  /* Anchored to the card itself, not the whole About column — otherwise the
     photo aligns with wherever .about starts (the very first paragraph)
     instead of sitting next to "In Good Company" specifically. */
  .aside-card-photo { display: block; position: relative; }
  .aside-photo {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: var(--sp-6);
    width: 260px;
  }
}

@media (max-width: 620px) {
  .aside-card-photo { flex-direction: column; align-items: center; }
  .aside-photo { flex: 0 0 auto; width: 210px; }
}

/* Personal photos that aren't tied to a specific lounge listing — candid
   shots from the road rather than curated venue documentation. Lives outside
   the narrow .about reading column (see the HTML) so the collage can use the
   section's full width, same as .featured-grid.
   Every tile is pinned to the same fixed photo height, but the mat around
   each photo shrink-wraps to that photo's own rendered width (justify-items:
   center + the plate sizing itself off the image, not the grid column) —
   a portrait photo in a 1/3-width column previously left a huge slab of
   empty beige mat on either side of it; this way the frame is only ever as
   big as the photo it holds.
   The photo height (.plate) and the caption height (figcaption) are each
   fixed separately rather than sharing one flexible box — sharing meant a
   long caption ate into its own photo's height, shrinking that one photo
   smaller than its neighbors. Fixed heights for both, plus a real row gap
   (an earlier version referenced two spacing tokens, --sp-5 and --sp-7,
   that don't exist in this file's scale — the whole gap/margin declarations
   silently dropped to zero, which is why captions were butting up against
   the row below), keep every tile and every caption the same size. */
.road-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 308px;
  gap: var(--sp-8) var(--sp-6);
  margin: var(--sp-6) 0 var(--sp-8);
  justify-items: center;
}
.road-photo {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.road-photo:nth-child(odd) { transform: rotate(-1.5deg); }
.road-photo:nth-child(even) { transform: rotate(1.5deg); }
.road-photo .plate {
  height: 220px;
  flex: none;
  width: auto;
  max-width: 100%;
  aspect-ratio: auto;
  background: var(--surface);
  border: 10px solid var(--surface);
  outline: 1px solid var(--divider);
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.road-photo .plate img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.road-photo figcaption {
  height: 78px;
  max-width: 300px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--neutral-700);
  text-align: center;
  margin-top: 10px;
  flex: none;
}

.steps { display: flex; flex-direction: column; gap: var(--sp-3); }
.step { display: flex; gap: var(--sp-3); }
.step-num {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--accent-700);
  font-size: 1.3rem;
  flex: none;
  width: 32px;
}

/* ---------------------------------------------------------------- Footer */
.site-footer {
  border-top: 1px solid var(--divider);
  padding: var(--sp-4) var(--sp-8);
  font-size: 0.8rem;
  color: var(--neutral-700);
  text-align: center;
}
.site-footer p { margin: 0 auto; max-width: 90ch; line-height: 1.6; }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 1080px) {
  .nav-tagline { display: none; }
}

@media (max-width: 900px) {
  :root { --sp-8: 22px; }

  .nav { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
  .nav-links { width: 100%; margin-left: 0; justify-content: space-between; }
  .nav-search { flex-basis: 100%; max-width: none; margin-left: 0; order: 3; }

  .hero { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.1rem; }
  .featured-grid { grid-template-columns: 1fr; }
  /* One column on mobile; the fixed tile height only makes sense when
     photos sit side by side, so let each one use its natural height again
     at full column width instead of shrink-wrapped to its own aspect ratio. */
  .road-gallery { grid-template-columns: 1fr; grid-auto-rows: auto; justify-items: stretch; }
  .road-photo .plate { height: auto; flex: none; width: 100%; max-width: none; }
  .road-photo .plate img { height: auto; width: 100%; max-width: none; }
  .road-photo figcaption { height: auto; max-width: none; display: block; }

  .directory-split { flex-direction: column; height: auto; }
  .lounge-panel { width: 100%; height: 55vh; border-right: none; border-bottom: 1px solid var(--divider); }
  .map-wrap { height: 60vh; flex: none; }
  .filters { border-radius: var(--radius-md) var(--radius-md) 0 0; }

  .drawer { width: 100vw; top: auto; height: 85vh; border-left: none; border-top: 1px solid var(--divider); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

  .field-grid { grid-template-columns: 1fr; }
  .modal { padding: var(--sp-4); }
  .about p { text-align: left; }
}