/* ============================================================
   BOUTELS.COM — main.css (site pages)
   Design tokens (:root) + shared components (drawers, primary button,
   geocomplete, .member-line, .text-link) live in shared.css, which every
   site page links DIRECTLY, render-blocking, right before this file (NOT via
   @import — @import serialized the two downloads and, combined with the old
   async-CSS boot swap, caused a full-viewport CLS on first paint). This file =
   site-page styles + global resets. Sections:
     2. Reset & Base      3. Typography       4. Skip Link
     5. Navigation        6. Hero             7. Dictionary Entry
     8. Search Form       9. Filter Pills    10. Shared Section Layout
    11. Movement         12. Article Floats  13. Designation
    14. Browse & Tabs    15. Property Cards  16. Footer
    17. Interior Pages   18. Listing Pages   19. Browse Results
    20. Page Body        21. About           22. Partnerships
    23. Email Signup     24. Wayfinding Typography   25. Responsive
   (Old §1 tokens + §8b geocomplete moved to shared.css.)
   ============================================================ */

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;        /* 16px base — never go below this */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

ul { list-style: none; }
a  { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
img, iframe { display: block; max-width: 100%; }

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

/* Display headings use Barlow Condensed 800 — uppercase only */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-headline);
}

h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }

/* Standard content subheading: teal + underline. Just write <h3> to get it. Components with their
   own heading treatment (map, Star Report, gold designation tiles, etc.) override via their class. */
h3 {
  font-size: 1.625rem;
  color: var(--color-teal);
  letter-spacing: 0.02em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

p  { line-height: 1.7; }

/* Inline emphasis — body text only, never display */
em { font-style: italic; }
strong { font-weight: 600; }

/* ™ in Barlow Condensed display headings — keeps it small and lightweight */
/* .trademark-sup moved to shared.css (used by the site AND the map). */

/* ── Shared: eyebrow label (small-caps section label used in multiple components) */
.movement__sidebar-label,
.newest__label,
.boutel-reel__label,
.listing__aside-label,
.listing-itinerary__label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ============================================================
   4. SKIP LINK
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  padding: 12px 24px;
  background: var(--color-teal);
  color: var(--color-dark-text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  z-index: 9999; /* accessibility skip-link must sit above ALL fixed nav/overlays when focused */
  border-radius: 0 0 var(--radius-button) 0;
  transition: top var(--transition-fast);
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* Screen-reader-only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   5. NAVIGATION
   ============================================================ */
/* When the gold admin bar is present (admins only), push the page down and keep the sticky nav below it. */
html.has-admin-bar body { padding-top: var(--admin-bar-h); }
.nav {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 2px 40px 26px; /* 2px top + ~26px SVG internal whitespace = 28px visual top; 26px visual bottom — balanced */
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: var(--admin-bar-h, 0px);
  z-index: 100;
}

.nav__logo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  align-items: flex-start;
}

/* Wordmark rendered as SVG file — zero font dependency, scales perfectly */
.nav__wordmark-svg {
  display: block;
  height: 85px;
  width: auto;
}

/* Colour variants are baked into the SVG files:
   boutels-logo.svg      → BOUT near-black, ELS teal (#1A8F7C) — cream bg
   boutels-logo-dark.svg → BOUT cream, ELS teal (#1A8F7C) — dark bg */

.nav__descriptor {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  line-height: 1;
  white-space: nowrap;
}

/* The hero copy is display text, not something you'd select — show the default arrow, never the
   text I-beam. Anything actionable inside the hero (the map CTA) keeps its pointer. `cursor` is
   inherited, so setting it on the container cascades to its text. */
.hero { cursor: default; }
.hero a,
.hero button { cursor: pointer; }
/* The logo links home on EVERY page, so it gets the hand cursor — except on the home page itself,
   where you're already "here", so it reads as the brand mark (arrow, not a pointer). */
.nav__logo { cursor: pointer; }
body.is-home .nav__logo { cursor: default; }

.nav__links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}

.nav__links > li {
  display: flex;
}

.nav__link {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  min-height: 30px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-headline);
  white-space: nowrap;
  background: var(--color-nav-pill);
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast);
}

.nav__link:hover       { background: var(--color-nav-pill-hover); }
/* Focus indicator — visible on all interactive elements */
:focus-visible {
  outline: 3px solid var(--color-teal);
  outline-offset: 3px;
  border-radius: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ── Nav dropdown ──────────────────────────────────────────
   Disclosure pattern: button[aria-expanded] toggles a <ul>
   of plain nav links. No role="menu" — simpler and more
   screen-reader-friendly for navigation contexts.
   ──────────────────────────────────────────────────────── */
.nav__dropdown {
  position: relative;
}

.nav__dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Teal hamburger button — stands out as a button, matches the map header */
.nav__hamburger {
  width: 48px;
  height: 48px;
  padding: 0;
  justify-content: center;
  background: var(--color-teal);
  color: var(--color-white);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.nav__hamburger svg { width: 22px; height: 22px; }
.nav__hamburger:hover { opacity: 0.9; }

button.nav__dropdown-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

/* Homepage hamburger dropdown — matches the map menu: centered button, tight gap,
   tan section headers, body font, close X. */
.nav__dropdown { align-self: center; }
.nav__dropdown-menu { top: calc(100% + 6px); width: 270px; max-width: calc(100vw - 24px); padding: 8px; }
/* header row: Home/Map (left) | Member Login/Log Out (center) | X (right) — matches the map menu */
.navmenu-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 0 2px 6px; }
.navmenu-home { /* teal square Home/Map button, injected by nav.js (hidden on the home page) */
  grid-column: 1; justify-self: start; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; background: var(--color-teal); border-radius: 9px; color: var(--color-white); text-decoration: none; cursor: pointer;
}
.navmenu-home svg { width: 20px; height: 20px; }
.navmenu-login { /* Member Login / Log Out, injected by auth.js — fills the space between Home and X */
  grid-column: 2; grid-row: 1; justify-self: stretch; border: 0; background: var(--color-teal); color: var(--color-white);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.9375rem; padding: 9px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap;
}
.navmenu-close {
  grid-column: 3; justify-self: end;
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: var(--color-headline); border-radius: 9px; color: var(--color-white); cursor: pointer;
}
.navmenu-close svg { width: 16px; height: 16px; }
.navmenu-sec { margin-top: 6px; } /* matches the map menu's .menu-sec */
.navmenu-h {
  margin: 0 0 2px; padding: 12px 14px; border-radius: 7px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem;
  color: var(--color-teal); background: var(--color-tan-tint);
}
/* When a .navmenu-h is an accordion toggle (Member Dashboard), give it the map's chevron treatment. */
summary.navmenu-h { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; user-select: none; }
summary.navmenu-h::-webkit-details-marker { display: none; }
summary.navmenu-h::after { content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-right: 2px solid var(--color-teal); border-bottom: 2px solid var(--color-teal); transform: rotate(45deg); transition: transform 0.2s ease; margin: 0 4px 2px 0; }
details[open] > summary.navmenu-h::after { transform: rotate(-135deg); margin-bottom: -2px; }
.navmenu-item {
  display: flex; align-items: center; width: 100%; text-align: left;
  padding: 10px 13px; border: 0; background: transparent; cursor: pointer; /* matches the map menu's .menu-link/.menu-check spacing */
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 500;
  text-transform: none; letter-spacing: normal;
  color: var(--color-headline); text-decoration: none; border-radius: 8px;
}
.navmenu-item:hover { background: var(--color-bg); }
.nav__dropdown-btn[aria-expanded="true"] .nav__dropdown-arrow {
  transform: rotate(180deg);
}

.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 220px;
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(26, 26, 24, 0.12);
  z-index: 200;
} /* padding intentionally omitted here — the redesigned rule above sets padding:8px so section-head pills inset from the edges, matching the map menu */

.nav__dropdown-menu[hidden] { display: none; }

.nav__dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 20px;
  min-height: 48px;
  justify-content: center;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-headline);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.nav__dropdown-item:hover {
  background: var(--color-bg);
}
/* ============================================================
   5b. IOS INSTALL BANNER
   ============================================================ */

.ios-banner {
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--color-dark-bg);
  color: var(--color-dark-text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: var(--space-3) var(--space-6);
}

.ios-banner:not([hidden]) {
  display: flex;
}

.ios-banner__text {
  margin: 0;
  line-height: 1.5;
}

.ios-banner__share-icon {
  fill: currentColor;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.ios-banner__close {
  background: none;
  border: none;
  color: var(--color-dark-text);
  cursor: pointer;
  font-size: 16px;
  padding: var(--space-3) var(--space-3);
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pwa-install-btn {
  display: none; /* shown only by JS on mobile/tablet */
  margin: var(--space-6) auto 0;
  padding: var(--space-3) var(--space-6);
  background: var(--color-teal);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  letter-spacing: 0.01em;
}

.pwa-install-btn:not([hidden]) {
  display: block;
}

@media (pointer: fine) {
  .pwa-install-btn { display: none !important; }
}

/* ============================================================
   6. HERO
   ============================================================ */
.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6)), url('https://res.cloudinary.com/dmjv7op9l/image/upload/f_auto,q_auto,w_1920/home-bkgd-map-light-blurred.gif') center / cover no-repeat;
  padding: 48px 40px 56px;
  text-align: center;
  position: relative;
  /* overflow: hidden removed — the ::before grain uses inset:0 and doesn't need clipping;
     keeping overflow:hidden would clip the geocomplete dropdown */
}

/* Subtle grain texture — SVG feTurbulence as data URI, no external asset needed */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 300px 300px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 1;
}

.hero__inner {
  max-width: var(--max-width-form);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  position: relative;
  z-index: 1;
}

/* ============================================================
   7. DICTIONARY ENTRY (inside hero)
   ============================================================ */
/* Hero brand block: the "BOUtique + moTELS" wordmark image + the real SEO text H1 below it */
.hero__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* The wordmark is now a responsive image (was live text). Scales with the viewport. */
.hero__wordmark {
  width: 100%;
  max-width: 760px;
  height: auto;
  display: block;
}

/* The real, keyword-rich H1 — replaces the old dictionary headline so crawlers get a proper text H1. */
.hero__h1 {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-weight: 300;
  font-style: italic;
  color: var(--color-white);
  line-height: 1.4;
  text-align: center;
  margin: 0;
  max-width: 42ch;
}

/* Hero intro paragraph — sits under the H1, sets up the value prop for crawlers + readers */
.hero__intro {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.6;
  text-align: left;
  margin: 0;
  max-width: 62ch;
}

/* CTA + its subtitle grouped so the subtitle sits close under the button
   (the hero__inner flex gap only spaces this group from the dictionary above). */
.hero__cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

/* Hero CTA — big button to the road-trip map (replaces the easily-missed search) */
.hero__map-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  background: var(--color-teal);
  color: var(--color-white);
  border-radius: var(--radius-button);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.15rem, 3vw, 1.55rem);
  text-decoration: none;
  box-shadow: 0 6px 26px rgba(26, 143, 124, 0.35);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.hero__map-cta svg { width: 1.3em; height: 1.3em; flex: 0 0 auto; }
.hero__map-cta:hover { transform: translateY(-1px); opacity: 0.95; }
/* Sidebar variant (replaced the newsletter signup): full-width block, sized down */
.hero__map-cta--block {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: var(--space-8);
  padding: 14px 20px;
  font-size: 1.05rem;
}
.hero__map-sub { margin: 0; font-size: 1rem; font-style: italic; color: var(--color-white); }

/* Bottom search section (mirrors the hero search people missed up top) */
.home-search { padding: var(--space-16) var(--space-6); background: var(--color-tan-tint); text-align: center; }
.home-search__inner { max-width: var(--max-width-form); margin: 0 auto; }
.home-search__h { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 4vw, 2.2rem); color: var(--color-headline); margin: 0 0 var(--space-5); }
/* ============================================================
   8a. MISSION BAND
   ============================================================ */
.mission {
  background: var(--color-tan-tint);
  padding: 28px 40px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.mission__statement {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-style: italic;
  font-weight: 400;
  color: var(--color-headline);
  line-height: 1.6;
  margin: 0;
  opacity: 0.8;
}

/* Mission statement wraps naturally — no forced breaks */

/* Open Road editorial section */
.open-road {
  background: var(--color-bg);
  padding: 60px 0;
}

.open-road__inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--space-10);
}

.open-road__h2 {
  margin: 0 0 var(--space-3);
}

.open-road__tagline {
  font-size: 1rem;
  font-style: italic;
  color: var(--color-teal);
  margin: 0 0 var(--space-6);
}

.open-road__split {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
}

.open-road__text {
  flex: 1;
}

.open-road__body {
  font-size: 1.0625rem;
  color: var(--color-text);
  margin: var(--space-5) 0 0;
}

.open-road__figure {
  flex: 0 0 55%;
}

.open-road__img-wrap {
  clip-path: inset(10px 0 70px 0 round 12px);
  margin-bottom: -70px;
}

.open-road__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.open-road__caption {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  text-align: center;
}

/* ============================================================
   8. SEARCH FORM
   ============================================================ */
.search {
  width: 100%;
  max-width: var(--max-width-form);
}

/* Unified search pod */
.search__pod {
  width: 100%;
  background: rgba(242, 237, 228, 0.07);
  border: 1px solid rgba(242, 237, 228, 0.2);
  border-radius: 20px;
  padding: 14px 0; /* no horizontal padding — the input/button row carries its own */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Top row: nearby button + input+submit */
.search__pod-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Input+submit row fills remaining space; joined with no gap */
.search__pod-top .search__row {
  flex: 1;
  gap: 0;
}

.search__pod-top .search__input {
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}

.search__pod-top .search__submit {
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

/* Pills: tiered dark tray — reads as a secondary filter row */
.search__pod .hero-pills {
  position: relative; /* anchor for the state pill dropdown */
  margin: 0;
  justify-content: center;
  background: rgba(0, 0, 0, 0.32);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: none;
  border: 1px solid rgba(242, 237, 228, 0.07);
}

/* Pill buttons inside the tray */
.search__pod .hero-pill__btn {
  background: rgba(242, 237, 228, 0.08);
  border: 1px solid rgba(242, 237, 228, 0.14);
  color: var(--color-dark-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.search__pod .hero-pill__btn:hover {
  background: rgba(242, 237, 228, 0.15);
  border-color: rgba(242, 237, 228, 0.25);
}
.search__row {
  display: flex;
  width: 100%;
  gap: var(--space-2);
  position: relative; /* anchors .geocomplete dropdown */
}

/* Input — white bg, dark text: 17:1 ✓ */
.search__input {
  flex: 1;
  height: 54px;
  padding: 0 20px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-headline);
  background: var(--color-input-bg);
  border: 1.5px solid transparent;
  border-radius: var(--radius-card);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--transition-fast);
}

.search__input::placeholder {
  color: var(--color-muted);
  font-weight: 400;
}

.search__input:focus {
  border-color: var(--color-teal);
}

/* "Find My Stay" on desktop, "Search" on small mobile, icon-only on smallest */
.search__submit-short { display: none; }
.search__submit-icon  { display: none; }

/* Submit button — white text on teal: 3.99:1 ✓ (large text) */
.search__submit {
  flex-shrink: 0;
  height: 54px;
  padding: 0 28px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);             /* white on #1A8F7C = 3.99:1 ✓ large text */
  background: var(--color-teal);
  border: none;
  border-radius: var(--radius-card);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}

.search__submit:hover { opacity: 0.88; }

/* Nearby CTA — warm light bg on dark hero: 14:1 ✓ */
.btn-nearby {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-headline);
  background: var(--color-nav-pill);
  border: none;
  border-radius: var(--radius-card);
  text-decoration: none;
  transition: background var(--transition-fast);
  gap: var(--space-2);
}

.btn-nearby:hover { background: var(--color-nav-pill-hover); }
/* ============================================================
   8c. HERO BROWSE PILLS (Timezone / Region / Landscape dropdowns)
   ============================================================ */
.hero-pills {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--space-4) auto 0;
}.hero-pill__btn[aria-expanded="true"] .hero-pill__arrow {
  transform: rotate(180deg);
}/* State pill — overrides base position:relative so the dropdown anchors to
   the .search__pod .hero-pills container (which is position:relative) instead
   of the individual button, letting the menu span the full pills row. */
.hero-pill--state { position: static; }
/* Higher specificity (0,3,0) ensures [hidden] wins over display:flex above */
.hero-pill--state .hero-pill__menu[hidden] { display: none; }
/* ============================================================
   9. FILTER PILLS
   ============================================================ */
.filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  border: none;
  padding: 0;
}

/* pill — outline style, cream text on dark bg */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;         /* Minimum touch target */
  padding: 0 20px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(242, 237, 228, 0.6);
  background: transparent;
  border: 1px solid rgba(242, 237, 228, 0.25);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              color var(--transition-fast),
              background var(--transition-fast);
}

.pill:hover {
  color: var(--color-dark-text);
  border-color: rgba(242, 237, 228, 0.6);
}

/* Active state — teal fill + checkmark (never color alone) */
.pill[aria-pressed="true"] {
  color: var(--color-headline);
  background: var(--color-teal);
  border-color: var(--color-teal);
}
.pill[aria-pressed="true"] .pill__check { display: block; }

/* ============================================================
   10. SHARED SECTION LAYOUT
   All homepage content sections share the same background,
   horizontal padding, and inner-container pattern.
   Individual section rules below add only what's unique.
   ============================================================ */
.designation,
.movement,
.browse,
.nominate,
.newest {
  background: var(--color-bg);
  padding: 0 0 var(--space-12);
}

.designation__inner,
.movement__inner,
.browse__inner,
.nominate__inner,
.newest__inner,
.boutel-standard__inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--space-10);
}

/* ============================================================
   THE BOUTEL STANDARD — dark-beige callout band before the tiers
   ============================================================ */
.boutel-standard {
  background: var(--color-tan-active);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-16) 0;
}
.boutel-standard__callout {
  max-width: var(--max-width-text);
  margin: 0 auto;
  padding: var(--space-10) var(--space-8);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-teal);
  border-radius: var(--radius-card);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  text-align: center;
}
.boutel-standard__h2 {
  margin: 0 0 var(--space-4);
  color: var(--color-headline);
}
.boutel-standard__body {
  font-size: 1.1875rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0;
  text-align: left; /* body reads left-aligned; the h2 stays centered */
}
.boutel-standard__body strong {
  color: var(--color-headline);
}

/* ============================================================
   11. MOVEMENT SECTION
   ============================================================ */

.movement {
  padding-top: var(--space-12);
}

/* Adjacent movement sections share the same bg — no double padding */
.movement + .movement {
  padding-top: 0;
}

/* Two shapes share this component. With a lone .movement__article child (homepage, most guides, the FAQ
   and cross-link blocks) it is a single centered column at a readable measure. With an .movement__article
   + .movement__sidebar pair (the decade history pages) it is the classic two-column essay + sidebar.
   justify-content:center handles both: it centers the lone article, and centers the essay/sidebar pair. */
.movement__split {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  justify-content: center;
}

.movement__article {
  flex: 0 1 760px;
  max-width: 760px;
  min-width: 0;
  display: flow-root;
}

/* Section headers inside a long-form article (the /history/ essays + the homepage Movement essay) and
   the standalone grid/list sections that sit in a .movement__inner (the /guides/ region grids + index,
   the "More Boutels" grids) use the universal dark <h2>/<h3> treatment; this only adds the essay spacing
   + clears any floated figure so a heading never overlaps one. Scoped to DIRECT children so a nested
   section title (e.g. the homepage Movement heading inside __header, or an essay heading inside __article)
   is untouched. */
.movement__article > h2,
.movement__article > h3,
.movement__inner > h2,
.movement__inner > h3,
.collection-layout__stays > h2,
.collection-layout__stays > h3 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  clear: both;
}

/* Collection page layout: essay + "More Boutel Collections" rail + the full stays list in ONE grid, so
   on desktop it keeps the classic look (essay + 360px rail on top, stays full-width beneath), but on
   mobile it reorders to essay -> stays -> rail, dropping "More Boutel Collections" to the very bottom.
   Collection-only wrapper so the shared .movement__split (decade pages) is untouched. */
.collection-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) 360px;
  gap: 48px;
  align-items: start;
  justify-content: center;
  grid-template-areas:
    "article sidebar"
    "stays   stays";
}
.collection-layout > .movement__article { grid-area: article; max-width: none; }
.collection-layout > .movement__sidebar { grid-area: sidebar; }
.collection-layout__stays { grid-area: stays; min-width: 0; }

/* Regional browse pages (region hubs + topic x region): the filter bar + its result grid. */
.rfilter { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); align-items: center; margin-bottom: var(--space-8); padding: var(--space-5); background: var(--color-tan-tint); border-radius: var(--radius-card); }
.rfilter__group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rfilter__label { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; color: var(--color-headline); margin-right: 4px; }
.rfilter__pill { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg); font-size: 0.9rem; cursor: pointer; user-select: none; transition: background var(--transition-fast), color var(--transition-fast); }
.rfilter__pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.rfilter__pill:has(input:checked) { background: var(--color-teal); color: var(--color-white); border-color: var(--color-teal); }
.rfilter__pill:focus-within { outline: 2px solid var(--color-teal); outline-offset: 2px; }
.rfilter__count { width: 100%; margin: 0; font-size: 0.9rem; color: var(--color-text-muted); }
.rfilter__clear { background: none; border: none; color: var(--color-teal); font-weight: 600; cursor: pointer; text-decoration: underline; font-size: 0.9rem; padding: 0; }
.rfilter-hide { display: none !important; }
.rfilter__empty { padding: var(--space-8); text-align: center; color: var(--color-text-muted); }

/* History index chapters: the "what it felt like" title + vignette on the left, the chapter card on the
   right. Stacks (text then card) on mobile. A divider separates consecutive chapters. */
.history-chapter { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-10); align-items: center; padding: var(--space-10) 0; }
.history-chapter + .history-chapter { border-top: 1px solid var(--color-border); }
.history-chapter__text > h2 { margin-top: 0; }
.history-chapter__card { min-width: 0; }
@media (max-width: 760px) {
  .history-chapter { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-8) 0; }
  .history-chapter__card { max-width: 440px; }
}

.movement__sidebar {
  flex: 0 0 360px; /* firm 360px — matches the listing-page .listing__aside width */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-tan-tint);
  border-left: 3px solid var(--color-border);
}

.movement__sidebar-label {
  /* Natural case (not the uppercase eyebrow) so a decade reads "1930s", not "1930S". */
  text-transform: none;
  letter-spacing: 0.02em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}
/* Collection list-cards in the rail sit on the tan sidebar, so flip them to cream to stand out. */
.movement__sidebar .guide-card { background: var(--color-bg); }

#newest-designations-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.movement__loading {
  font-size: 0.9375rem;
  color: var(--color-muted);
  padding: var(--space-3) 0;
}

.movement__header { margin-bottom: var(--space-6); }
.movement__header--spaced { margin-top: var(--space-16); } /* the second movement header needs top separation */
/* small reusable utilities (replacing one-off inline styles) */
.text-teal { color: var(--color-teal); }
.btn-primary { display: inline-block; background-color: var(--color-teal); color: var(--color-white); padding: 14px 28px; border-radius: var(--radius-button); text-decoration: none; font-weight: 600; font-size: 1rem; }
.btn-primary:hover { opacity: 0.9; }
.page-hero .btn-primary { margin-top: var(--space-6); }

.movement__subline {
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--color-muted);
  line-height: 1.4;
}

/* The article body paragraph — 17px/1.8, deliberately larger than the 16px base <p> for long-read
   comfort. Shared by the homepage Movement essay (.movement__body) AND the listing pages
   (.listing__body); ONE rule so the two can't drift. */
.movement__body,
.listing__body {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-text-muted);
  margin-bottom: 18px;
}

/* Inline body links — bold teal, with the underline appearing on hover. */
.movement__body a,
.listing__body a {
  color: var(--color-teal);
  font-weight: 700;
  text-decoration: none;
}
.movement__body a:hover,
.listing__body a:hover {
  text-decoration: underline;
}

/* Check-icon list — breaks a run-on sentence into scannable points (teal check glyph) */
.check-list {
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text);
}
.check-list svg {
  width: 1.35em;
  height: 1.35em;
  flex: 0 0 auto;
  color: var(--color-teal);
  margin-top: 0.05em;
}

/* ============================================================
   GUIDES — pillar hubs at /guides/<slug>/ (editorial + region-grouped cards).
   Reuses .property-card, .page-hero, .hero__map-cta, .listing__badge, .amenity.
   ============================================================ */
/* Collections index: each category is a full-width band (alternating cream / tan-tint like the homepage).
   Inside, three vertically-centered columns: the big "By ..." label, the large line to its right, then
   that category's 2x2 cards. Side padding on the SECTION + centered inner = aligns with the page-hero.
   Stacks to one column on mobile (label -> line -> cards). */
.collections-band { padding: var(--space-12) var(--space-10); }
.collections-band--alt { background: var(--color-tan-tint); }
.collections-band--alt .guide-card { background: var(--color-bg); }   /* flip card shade so cards don't blend into the tan band */
.collections__inner { max-width: var(--max-width-content); margin: 0 auto; }
.collections__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2.6fr) minmax(0, 7fr); gap: var(--space-8); align-items: center; }
.collections__label { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-headline); font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1; margin: 0; }
.collections__blurb { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(1.375rem, 2.2vw, 1.9rem); line-height: 1.15; color: var(--color-text-muted); margin: 0; }
@media (max-width: 820px) {
  .collections-band { padding: var(--space-10) var(--space-6); }
  .collections__row { grid-template-columns: 1fr; gap: var(--space-5); }
}
.guide-more { margin: var(--space-4) 0 0; font-size: 0.95rem; line-height: 1.7; color: var(--color-text-muted); }
.guide-more__label { font-weight: 600; color: var(--color-text); }
.guide-more a { color: var(--color-teal); text-decoration: none; }
.guide-more a:hover { text-decoration: underline; }
/* /guides/ index — the hub of hubs */
.guide-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); }
.guide-card { display: flex; flex-direction: column; background: var(--color-tan-tint); border-radius: var(--radius-card); overflow: hidden; text-decoration: none; transition: transform var(--transition-fast); }
.guide-card:hover { transform: translateY(-2px); }
.guide-card__poster { display: block; width: 100%; height: 116px; flex: 0 0 auto; object-fit: cover; }
.guide-card__body { display: flex; flex-direction: column; gap: 6px; padding: var(--space-6); }
.guide-card__h { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-headline); font-size: 1.1rem; }
.guide-card__d { font-size: 0.9rem; line-height: 1.5; color: var(--color-text-muted); }
.guide-card__n { font-size: 0.8rem; color: var(--color-teal); font-weight: 600; }

/* Mid-essay search: just the title + form (not a full-width band) — a chance to
   jump to the map after learning what a Boutel is, before the longer history. */
.movement__search {
  margin: var(--space-12) 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.movement__search .home-search__h {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
}
/* Full article width so the pod's left edge lines up with the title (not centered/capped) */
.movement__search .search { max-width: none; }

/* Pull quote — Barlow Condensed on cream */
.movement__pullquote {
  margin: 36px 0;
  padding: 24px 32px;
  border-left: 4px solid var(--color-teal);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-headline);
  line-height: 1.15;
  clear: both;
}

/* ============================================================
   NEWEST BOUTELS SECTION
   Own full-width section below the editorial.
   Grid grows naturally as more listings are added.
   ============================================================ */
.newest {
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   12. ARTICLE IMAGE FLOATS
   ============================================================ */
.article-img { margin-bottom: var(--space-2); }

.article-img--right {
  float: right;
  width: 44%;
  margin-left: 32px;
  margin-bottom: 20px;
  margin-top: 4px;
}

.article-img--left {
  float: left;
  width: 44%;
  margin-right: 32px;
  margin-bottom: 20px;
  margin-top: 4px;
}

.article-img--full {
  width: 100%;
  clear: both;
  margin: var(--space-10) 0 var(--space-8);
}

.article-img img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-button);
}

.article-img figcaption {
  font-size: 0.875rem;
  color: var(--color-muted);
  font-style: italic;
  line-height: 1.45;
  margin-top: 6px;
}

/* ============================================================
   13. DESIGNATION SECTION
   ============================================================ */
.designation {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-16);
  background: var(--color-tan-tint);
}

.designation__intro {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-top: var(--space-5);
  margin-bottom: var(--space-10);
}

/* Mood board — 4 images, varied heights, editorial feel */
.desig-moodboard {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: var(--space-12);
}

.desig-moodboard__item {
  margin: 0;
  border-radius: var(--radius-button);
  overflow: hidden;
}

.desig-moodboard__item--tall  { height: 240px; }
.desig-moodboard__item--short { height: 240px; }

.desig-moodboard__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.desig-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12);
}

/* H3 group labels — teal on cream: 3.5:1 ✓ (24px large text) */
.desig-group__h3 {
  font-size: 1.5rem;
  color: var(--color-teal);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-5);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

.desig-criteria {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.desig-criterion {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.desig-criterion strong {
  color: var(--color-headline);
  font-weight: 600;
}

.browse h2 sup,
.about__h1 sup,
.page-hero__h1 sup {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.35em;
  vertical-align: super;
  letter-spacing: 0;
  text-transform: none;
}

/* ============================================================
   15. PROPERTY CARDS (in .movement__sidebar)
   ============================================================ */
/* ── Shared: card surface (bordered card used across multiple components) */
.property-card,
.listing-notes__card,
.listing-nearby__item,
.listing-itinerary,
.listing-details,
.listing-card,
.nominate-card {
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.property-card {
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-fast);
}

.property-card:hover {
  box-shadow: 0 4px 20px rgba(26, 26, 24, 0.08);
}

/* Photo wrapper — aspect-ratio 16:9, object-fit cover */
.property-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-dark-bg);
}

.property-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.property-card__body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.property-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--color-headline);
  line-height: 1.1;
}

.property-card__location {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

.property-card__distance {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-teal);
  margin-top: 4px;
}

/* Key-feature chips (pets / EV / breakfast / wifi) — a glanceable summary that
   replaces the old amenity filters. */
.property-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
/* homepage sidebar amenity chips now use the shared .amenity (shared.css) */

.property-card__desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 45%, transparent 100%);
}

/* CTA link — near-black body text on white: 17:1 ✓ */
.property-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-headline);
  margin-top: var(--space-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-teal);
}

.property-card__cta:hover { color: var(--color-teal); }

/* ── Full-width teal CTA button — the card's "Learn More", sitting at the bottom of the card body
   after the faded description. Overrides the .property-card__cta text-link base into a filled button
   (white text on teal, centered, no underline), matching the .hero__map-cta treatment. */
.property-card__cta--button,
.guide-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: var(--space-3);
  padding: 12px var(--space-4);
  gap: 0;
  background: var(--color-teal);
  color: var(--color-white);
  border-radius: var(--radius-button);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
/* Push the CTA to the very bottom of the card so buttons align across a row of varying-length cards;
   the description's bottom margin guarantees breathing room above the button even on a tall card where
   the auto margin collapses to nothing. */
.guide-card__body { flex: 1 1 auto; }
.guide-card__cta { margin-top: auto; }
.guide-card__d { margin-bottom: var(--space-4); }

.property-card__cta--button:hover,
.guide-card:hover .guide-card__cta,
.listing-card__cta:hover {
  opacity: 0.88;
  color: var(--color-white);
}

/* Responsive multi-column layout for .property-card collections — used where the sidebar's five
   featured stays overflow into a full-width grid (the /history/ "more Boutels" band). */
.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
  margin-bottom: var(--space-12);
}

/* ============================================================
   MOBILE BOUTEL REEL — compact 3-column grid of newest designations
   Hidden by default (display:none). Shown only at ≤768px via media query.
   .movement__sidebar is hidden at that same breakpoint so the two never
   appear simultaneously.
   ============================================================ */
.boutel-reel {
  display: none;
  background: var(--color-bg);
  padding: var(--space-8) 0;
}

.boutel-reel__label {
  padding: 0 var(--space-4) var(--space-3);
}

.boutel-reel__scroll {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding: 0 var(--space-4);
}

.boutel-reel__card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--color-input-bg);
  border-radius: var(--radius-button);
  overflow: hidden;
}

.boutel-reel__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.boutel-reel__body {
  padding: var(--space-2);
}

.boutel-reel__name {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-headline);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.boutel-reel__location {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   16. FOOTER
   ============================================================ */
.footer {
  background: var(--color-dark-bg);
  margin-top: 60px;
}

/* The "Where are you going?" band (footer partial) sits flush against the footer top — no gap. */
.home-search + .footer { margin-top: 0; }

.footer__inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: var(--space-16) var(--space-10);
}

.footer__nav {
  display: flex;
  gap: var(--space-16);
  justify-content: flex-start;
  margin-bottom: var(--space-10);
}

.footer__nav ul {
  margin: 0;
  padding: 0;
}

.footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__nav-heading {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin: 0;
}

/* Footer sits on --color-dark-bg, so every link (nav <a> OR a drawer-trigger <button> like
   "Nominate a Property" / "Request a Map Location") is white with no underline; underline only on
   hover. .footer a (0,1,1) outranks .text-link so blue links flip too. Buttons don't inherit color,
   so .footer__nav-link is listed explicitly to catch the <button> triggers. */
.footer a,
.footer__nav-link { color: var(--color-white); text-decoration: none; }
.footer a:hover,
.footer__nav-link:hover { text-decoration: underline; }
/* Lock before a guest's member-only footer link (My Trip Planner / Stargazing) — white, sits inline. */
.footer-lock { width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px; flex: 0 0 auto; }
/* Every footer link — the <a> links (Learn/Legal) AND the <button> triggers (Sharing is Caring) — shares
   ONE size + line-height so all three columns match. Buttons don't inherit font-size, so it's set here. */
.footer__nav-link { font-size: 1rem; line-height: 1.5; }

.footer__divider {
  border: none;
  border-top: 1px solid rgba(242, 237, 228, 0.15);
  margin: 0 0 var(--space-8);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__copy {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin: 0;
}

.footer__logo {
  height: 28px;
  width: auto;
  display: block;
}

/* ============================================================
   17. INTERIOR PAGES
   ============================================================ */

/* Page Hero — simple dark header shared by all interior pages */
.page-hero {
  background: var(--color-dark-bg);
  padding: var(--space-16) var(--space-10);
  text-align: center;
}

.page-hero__inner {
  max-width: var(--max-width-form);
  margin: 0 auto;
}

.page-hero__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--space-4);
}

.page-hero__h1 {
  color: var(--color-dark-text);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  margin-bottom: var(--space-4);
}

.page-hero__lead {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.65;
  color: rgba(242, 237, 228, 0.7);
  max-width: 560px;
  margin: 0 auto;
}

.page-hero--browse {
  text-align: left;
}

.page-hero--browse .page-hero__inner {
  max-width: var(--max-width-content);
}

.page-hero--browse .page-hero__lead {
  max-width: var(--max-width-text);
  margin: 0;
}

.page-hero--road-trip {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

/* Road-trip hero: title left | search card center | button right */
.page-hero--road-trip .page-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.page-hero__text { flex: 1; min-width: 0; }
.page-hero__nav  { flex: 1; display: flex; justify-content: flex-end; align-items: center; }

@media (max-width: 780px) {
  .page-hero--road-trip .page-hero__inner {
    align-items: center;
    gap: var(--space-4);
  }
  /* Force "Road Trips" to its own line so the button always fits right */
  .page-hero--road-trip .page-hero__accent { display: block; }
  /* Remove top margin so button stays vertically centered next to title in row layout */
  .page-hero--road-trip .browse-new-search { margin-top: 0; flex-shrink: 0; }
  .page-hero__nav { flex: unset; }
}

.page-hero__title-row .page-hero__h1 {
  margin-bottom: 0;
}

.page-hero__title-row .browse-new-search {
  margin-top: 0;
  flex-shrink: 0;
}

.page-hero__accent {
  color: var(--color-teal);
}

.browse-new-search {
  display: inline-block;
  margin-top: var(--space-6);
  padding: 9px 18px;
  background: transparent;
  color: var(--color-dark-text);
  border: 1.5px solid rgba(242, 237, 228, 0.35);
  border-radius: var(--radius-button);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.browse-new-search:hover {
  border-color: var(--color-dark-text);
  color: var(--color-dark-text);
}

/* Nominate page — criteria section */
.nominate h2 {
  margin-bottom: var(--space-4);
}

.nominate__intro {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: var(--max-width-text);
  margin-bottom: var(--space-12);
}

/* Nominate page — CTA section */
.nominate-ctas {
  padding: var(--space-16) var(--space-10) var(--space-20);
  border-top: 1px solid var(--color-border);
}

.nominate-ctas__inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
}

.nominate-ctas__h2 {
  text-align: center;
  margin-bottom: var(--space-12);
}

.nominate-ctas__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

/* Full-card link — entire card is the tap target */
.nominate-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-10);
  text-decoration: none;
  transition: box-shadow var(--transition-fast), transform var(--transition-normal);
}

.nominate-card:hover {
  box-shadow: 0 8px 32px rgba(26, 26, 24, 0.10);
  transform: translateY(-2px);
}

.nominate-card__eyebrow {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-teal);
}

/* Styled as a heading visually — not an actual h* so it stays inside a link */
.nominate-card__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--color-headline);
  line-height: 1.1;
}

.nominate-card__body {
  display: block;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  flex: 1;
}

/* Visual teal button — not interactive, card itself is the link */
.nominate-card__btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0 24px;
  height: 52px;
  background: var(--color-teal);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-button);
  margin-top: var(--space-2);
  transition: opacity var(--transition-fast);
}

.nominate-card:hover .nominate-card__btn {
  opacity: 0.88;
}

/* ============================================================
   18. LISTING PAGES  (/listings/[slug]/)
   Static pre-generated pages — one per property.
   All sections are conditional: if the Sheet field is empty,
   the section and its heading are not rendered.
   ============================================================ */

/* ── Breadcrumb ────────────────────────────────────────────── */

.listing-breadcrumb-row {
  max-width: var(--max-width-content);
  margin: var(--space-5) auto 0;
  padding: 0 var(--space-10);
  display: flex;
  flex-wrap: wrap; /* keep "Go to Map" floated right when it fits; wrap it below only when there isn't room */
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.listing-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.listing-browse-pill {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  height: 36px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-white);
  white-space: nowrap;
  background: var(--color-teal);
  border-radius: var(--radius-button);
  text-decoration: none;
  flex-shrink: 0;
  margin-left: auto; /* float to the right of the breadcrumb (stays right even if it wraps to its own line) */
  transition: opacity var(--transition-fast);
}

.listing-browse-pill:hover { opacity: 0.88; }

/* Big full-width teal CTA button at the bottom of a listing ("Go to Map") and of a topic x region page
   ("View all Boutels in ..."). Sits above the footer's search band, far from the filters, so it reads
   as navigation rather than a filter control. */
.listing__map-cta,
.region-all-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: var(--space-6) 0 var(--space-10);
  padding: 15px 22px;
  background: var(--color-teal);
  color: var(--color-white);
  border-radius: var(--radius-button);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  text-decoration: none;
}
.listing__map-cta svg { width: 20px; height: 20px; }
.listing__map-cta:hover,
.region-all-cta:hover { opacity: 0.92; }
/* Current (last) breadcrumb crumb: a light, non-interactive pill instead of the teal link pill.
   Higher specificity so it wins over .listing-breadcrumb__link (defined later). */
.listing-breadcrumb__link.listing-breadcrumb__current { background: var(--color-dark-text); color: var(--color-dark-bg); cursor: default; }
/* Breadcrumb sitting inside the dark hero (region pages): the ">" separators go white. The pills keep
   their own colours (teal links, cream current). */
.page-hero__crumbs { color: var(--color-white); margin-bottom: var(--space-5); }

/* Copy-address button + new-tab icon in the listing details */
.listing-copyaddr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  vertical-align: middle;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-white);
  color: var(--color-muted);
  cursor: pointer;
}
.listing-copyaddr svg { width: 15px; height: 15px; }
.listing-copyaddr:hover { color: var(--color-teal); border-color: var(--color-teal); }
.listing-copyaddr__ok { display: none; color: var(--color-teal); }
.listing-copyaddr.is-copied .listing-copyaddr__i { display: none; }
.listing-copyaddr.is-copied .listing-copyaddr__ok { display: block; }
/* Website value is copy-only plain text (no link) — the .listing-copyaddr button beside it copies the URL. */

.listing-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  height: 36px;
  background: var(--color-teal);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}

.listing-breadcrumb__link:hover {
  opacity: 0.88;
}

/* ── Photo gallery carousel ────────────────────────────────── */

.listing-gallery {
  max-width: var(--max-width-content);
  margin: var(--space-4) auto 0;
  padding: 0 var(--space-10);
}

/* Frame = the image viewport: position:relative so arrows anchor inside it */
.listing-gallery__frame {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-dark-bg);
}

.listing-gallery__slide { display: block; }
.listing-gallery__slide[hidden] { display: none; }

.listing-gallery__slide img,
.listing-gallery__slide .img-placeholder {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Prev/Next arrow buttons — 48×48 min, float over image */
.listing-gallery__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-headline);
  z-index: 1;
  transition: background var(--transition-fast);
}

.listing-gallery__btn:hover { background: var(--color-input-bg); }

.listing-gallery__btn--prev { left: 14px; }
.listing-gallery__btn--next { right: 14px; }


.listing-gallery__frame--placeholder::after {
  content: 'Imagery coming soon.';
  font-family: var(--font-body);
  font-size: 1rem;
  font-style: italic;
  color: var(--color-text-muted);
  text-align: center;
  padding: 0 var(--space-3);
  pointer-events: none;
}

/* "1 of N" counter — bottom-right of frame */
.listing-gallery__counter {
  position: absolute;
  bottom: 14px;
  right: 16px;
  background: rgba(26, 26, 24, 0.65);
  color: var(--color-dark-text);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  z-index: 1;
  pointer-events: none;
}

/* Dot navigation — below frame */
.listing-gallery__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.listing-gallery__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--transition-fast), width var(--transition-fast);
}

.listing-gallery__dot--active {
  background: var(--color-teal);
  width: 22px;
  border-radius: var(--radius-pill);
}

/* ── Listing content wrapper ───────────────────────────────── */

.listing {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: var(--space-10) var(--space-10) var(--space-20);
}

/* Two-column layout: article left, landscape aside right.
   Only rendered when landscape_description is populated. */
.listing__layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-12);
  align-items: start;
}

.listing__article,
.listing__aside {
  min-width: 0;
}

.listing__aside {
  background: var(--color-tan-tint);
  border-left: 3px solid var(--color-border);
  padding: var(--space-5);
}

.listing__aside-label {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.listing-landscape__body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  margin-top: var(--space-4);
  margin-bottom: var(--space-5);
}

.listing-landscape__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.listing-landscape__grid--1 {
  grid-template-columns: 1fr;
}

.listing-landscape__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
}

/* Designation badge (.listing__badge / --hm / --plus / -star / --card) is now the ONE
   shared component in shared.css (site + map). Change the look THERE. Only context-specific
   layout tweaks for it remain in this file (area guide, desig-tile, etc.). */

/* ── Honorable Mention preface block ─────────────────────────── */

.hm-preface {
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--color-teal);
  border-radius: 0;
  background: var(--color-teal-tint);
  margin-bottom: var(--space-8);
}
.hm-preface__text {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* H1 — matches .page-hero__h1 scale */
.listing__name {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  margin-bottom: var(--space-3);
}

/* Favorite star after the listing title — members save/remove; syncs to the map (favorites.js).
   Gold when saved, muted outline when not; sized in em so it scales with the responsive H1. */
.listing-fav {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  font-size: inherit;
  margin-left: 0.28em;
  padding: 0.1em;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  position: relative;
  top: -0.06em;
  -webkit-tap-highlight-color: transparent;
}
.listing-fav svg { width: 0.62em; height: 0.62em; display: block; }
.listing-fav__on { display: none; line-height: 0; }
.listing-fav__off { line-height: 0; }
.listing-fav.is-fav { color: var(--color-gold); }
.listing-fav.is-fav .listing-fav__on { display: block; }
.listing-fav.is-fav .listing-fav__off { display: none; }
@media (hover: hover) { .listing-fav:hover { color: var(--color-gold); } }
/* Larger star injected inline at the end of the H1 (favorites.js .listing__titlefav) — scales with the title. */
.listing__titlefav { display: inline; }
/* Guest = locked star: muted, a small lock badge, and it does NOT gold-hover (tap opens sign-in). */
.listing-fav--locked { color: var(--color-muted); cursor: pointer; }
.listing-fav__lock { position: absolute; right: -0.06em; bottom: 0; line-height: 0; color: var(--color-muted); }
.listing-fav__lock svg { width: 0.32em; height: 0.32em; display: block; }
@media (hover: hover) { .listing-fav--locked:hover { color: var(--color-muted); } }

/* The "My Trip" section (status pill) sits at the top of the listing article (favorites.js; .member-status is in shared.css) */
.listing-member-bar { margin: 0 0 var(--space-10); }
.listing-mytrip { background: var(--color-tan-tint); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-5); }
.listing-mytrip__h { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8125rem; color: var(--color-muted); margin: 0; }
.listing-mytrip__h--locked { display: flex; align-items: center; gap: 6px; }
.listing-mytrip__h--locked svg { width: 15px; height: 15px; flex: 0 0 15px; }
/* header row: just the "My Trip" heading now (the favorite star moved next to the page title) */
.listing-mytrip__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--space-3); }
.listing-mytrip { padding-bottom: var(--space-6); }
/* locked (signed-out): gray the previews, then a clear sign-up CTA */
.listing-mytrip--locked .member-status { opacity: 0.5; pointer-events: none; }
.listing-mytrip--locked .listing-mytrip__btns { pointer-events: none; }
/* Locked (signed-out): neutral warm-beige buttons instead of dimmed teal, so the teal sign-in
   CTA is the only teal on the card. Lock icons + status pills keep their gray treatment. */
.listing-mytrip--locked .mytrip-btn,
.listing-mytrip--locked .mytrip-btn--share,
.listing-mytrip--locked .mytrip-trip {
  background: var(--color-tan-active);
  border-color: var(--color-tan-active);
  color: var(--color-muted);
}
.listing-mytrip--locked .mytrip-btn svg,
.listing-mytrip--locked .mytrip-trip svg { color: var(--color-muted); }
/* Note + Share buttons in the My Trip box (mirror the map card) */
/* Status pill spans the full box (like the buttons) instead of scrunching to its content */
.listing-mytrip .member-status { display: flex; width: 100%; }
.listing-mytrip .member-status__seg { flex: 1 1 0; justify-content: center; }
.listing-mytrip__btns { display: flex; gap: 8px; margin-top: var(--space-4); }
.mytrip-btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 12px; border: 1.5px solid var(--color-border); border-radius: var(--radius-button); background: var(--color-white); color: var(--color-text); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.mytrip-btn svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--color-teal); }
.mytrip-btn:disabled { background: var(--color-tan-tint); border-color: var(--color-border); color: var(--color-text-muted); cursor: default; } /* grayed out until a trip status is selected */
.mytrip-btn:disabled svg { color: var(--color-text-muted); }
.mytrip-btn:not(:disabled):hover { border-color: var(--color-teal); } /* no hover treatment on the disabled Note button */
.mytrip-btn--has { border-color: var(--color-teal); color: var(--color-teal); }
.mytrip-btn--share { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); }
.mytrip-btn--share svg { color: var(--color-white); }
.mytrip-btn--share:hover { opacity: 0.9; }
/* "+ Trip Planner" -> "✓ Trip Planner": full-width CTA under the Note/Share row; filled teal to add, outlined once in the trip */
.mytrip-trip { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 8px; padding: 11px 14px; border: 1.5px solid var(--color-teal); border-radius: var(--radius-button); background: var(--color-teal); color: var(--color-white); font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.mytrip-trip svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--color-white); }
.mytrip-trip--in { background: var(--color-white); color: var(--color-teal); }
.mytrip-trip--in svg { color: var(--color-teal); }
.mytrip-trip:hover { opacity: 0.9; }
.listing-mytrip__cta { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--space-4); padding: 11px 22px; border: 0; border-radius: var(--radius-button); background: var(--color-teal); color: var(--color-white); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.9rem; cursor: pointer; }
.listing-mytrip__cta:hover { opacity: 0.9; }
.listing-mytrip__hint { font-size: 0.8125rem; line-height: 1.5; color: var(--color-muted); margin: var(--space-3) 0 0; }
@media (max-width: 520px) {
  .listing-member-bar .member-status { width: 100%; justify-content: space-between; }
  .listing-member-bar .member-status__seg { padding: 8px 10px; font-size: 0.75rem; }
}

/* City, State · Area */
.listing__address {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-headline);
  margin-bottom: var(--space-1);
}

.listing__location {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
}

.listing__location strong {
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Amenity pill row — scrolls on mobile if needed */
.listing__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.listing__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-4);
}

.listing__pill svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--color-teal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Book CTA — teal full-width button (used at top and bottom of page) */

.listing__tagline {
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--color-muted);
  margin-bottom: var(--space-8);
}

/* H2 — all listing section headings */
.listing__h2 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-5);
}

/* First H2 in the article column sits flush at the top of .listing__layout so it
   aligns with .listing__aside-label, and the tagline-to-heading gap is not doubled */
.listing__article .listing__h2:first-of-type {
  margin-top: 0;
}
/* .listing__body is styled together with .movement__body (one shared rule up in the Movement section). */

/* ── Amenities grid ────────────────────────────────────────── */

.listing-amenities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.listing-amenities__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  padding: var(--space-4);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* ── Shared: SVG icon base (18×18, teal stroke by default) */
.listing-amenities__icon,
.listing-notes__icon,
.listing-details__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.listing-amenities__icon {
  stroke: var(--color-teal);
  stroke-width: 2;
}

/* ── Section photo strip ───────────────────────────────────── */

.listing-section-photos {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  margin-bottom: var(--space-4);
}

.listing-section-photos--1 { grid-template-columns: 1fr; }
.listing-section-photos--2 { grid-template-columns: 1fr 1fr; }
.listing-section-photos--3 { grid-template-columns: 1fr 1fr 1fr; }

.listing-section-photos__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
}

/* ── What Guests Love / Worth Knowing ─────────────────────── */

.listing-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}


.listing-notes__card {
  padding: var(--space-6);
}

.listing-notes__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--color-teal);
  margin-bottom: var(--space-4);
}

.listing-notes__icon {
  stroke: var(--color-teal);
  stroke-width: 2.5;
}

.listing-notes__list {
  display: flex;
  flex-direction: column;
}

.listing-notes__item {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  padding: var(--space-3) 0 var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--color-bg);
  position: relative;
}

.listing-notes__item:last-child { border-bottom: none; }

/* ✓ marker for pros */
.listing-notes__item--pro::before {
  content: '✓';
  position: absolute;
  left: var(--space-2);
  color: var(--color-teal);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.7;
}

/* · marker for worth-knowing */
.listing-notes__item--note::before {
  content: '·';
  position: absolute;
  left: var(--space-2);
  color: var(--color-muted);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
}

/* ── Nearby landmarks ──────────────────────────────────────── */

.listing-nearby {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.listing-nearby__item {
  display: flex;
  gap: var(--space-4);
  overflow: hidden;
}

/* Left image — fixed width, 4:3 */
.listing-nearby__image {
  flex-shrink: 0;
  width: 140px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Gray placeholder box when no image is sourced for a nearby place (same slot as the image) */
.listing-nearby__placeholder {
  flex-shrink: 0;
  width: 140px;
  aspect-ratio: 4 / 3;
  background: var(--color-placeholder-bg);
  display: block;
}

.listing-nearby__body {
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}

/* landmark name — Barlow Condensed, matching other card names */
.listing-nearby__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--color-headline);
  line-height: 1.15;
}

/* distance text — teal, per AEO formula */
.listing-nearby__distance {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-teal);
  letter-spacing: 0.02em;
}

.listing-nearby__desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Gray placeholder (image icon centered) for a nearby item with no photo */
.listing-nearby__ph { flex-shrink: 0; width: 140px; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: var(--color-border); color: var(--color-text-muted); }
.listing-nearby__ph svg { width: 34px; height: 34px; opacity: 0.5; }

/* ── On the Road — itinerary email capture ─────────────────── */

.listing-itinerary {
  padding: var(--space-6);
  margin-top: var(--space-10);
}

.listing-itinerary__label {
  display: block;
  margin-bottom: var(--space-3);
}

.listing-itinerary__teaser {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.listing-itinerary__form {
  display: flex;
  gap: var(--space-2);
}

.listing-itinerary__input {
  flex: 1;
  height: 44px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-headline);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  outline: none;
  transition: border-color var(--transition-fast);
}

.listing-itinerary__input:focus { border-color: var(--color-teal); }

.listing-itinerary__btn {
  height: 44px;
  padding: 0 var(--space-5);
  background: var(--color-teal);
  color: var(--color-white);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--radius-button);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}

.listing-itinerary__btn:hover { opacity: 0.88; }

/* ── Details card ──────────────────────────────────────────── */

.listing-details {
  overflow: hidden;
  margin-bottom: var(--space-10);
}

.listing-details__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-bg);
  font-size: 1rem;
  line-height: 1.5;
}

.listing-details__row:last-of-type { border-bottom: none; }

.listing-details__icon {
  margin-top: 3px;
  stroke: var(--color-muted);
  stroke-width: 2;
}

.listing-details__label {
  font-weight: 500;
  color: var(--color-muted);
  min-width: 80px;
  flex-shrink: 0;
}

.listing-details__value { color: var(--color-text); }

.listing-details__value a {
  color: var(--color-teal);
  text-decoration: underline;
}
.listing-details__value a:hover { text-decoration: none; }

.listing-details__icon--teal { stroke: var(--color-teal); }
.listing-details__note {
  font-size: 0.8125rem;
  color: var(--color-muted);
  padding: var(--space-4) var(--space-6);
  line-height: 1.5;
  border-top: 1px solid var(--color-bg);
}

/* "Go to Map" button under the Address (replaces the old static map image).
   Scoped to beat the generic ".listing-details__value a" teal-link rule, and
   display:flex so it sits on its own line under the city/state. */
.listing-details__value a.listing-details__map-btn {
  display: flex;
  width: fit-content;
  align-items: center;
  height: 34px;
  margin-top: 10px;
  padding: 0 16px;
  background: var(--color-teal);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
.listing-details__value a.listing-details__map-btn:hover { opacity: 0.85; color: var(--color-white); }

/* Map placeholder — at bottom of details card */
.listing-details__map {
  border-top: 1px solid var(--color-bg);
  height: 200px;
  background: var(--color-map-placeholder);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
/* ── Auto-generated FAQ ────────────────────────────────────── */

/* ============================================================
   CONTENT PROSE — shared typography for a plain content page.
   Add `prose` to the .page-body__inner and write bare <h1>/<h2>/
   <h3>/<p>/<ul>; no per-heading classes needed. :where() keeps the
   specificity low so nested components (e.g. .listing-faq below)
   keep their own styles. The base sheet sizes h2/h3 but NOT h1, so
   a page title needs this explicit size to outrank the section h2s.
   ============================================================ */
.prose :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: var(--space-6); }
.prose :where(h2) { font-size: clamp(1.75rem, 3vw, 2.5rem); margin: var(--space-12) 0 var(--space-4); }
.prose :where(h3) { margin: var(--space-8) 0 var(--space-2); }
.prose :where(p)  { font-size: 1.0625rem; line-height: 1.8; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.prose :where(ul, ol) { margin: 0 0 var(--space-6); padding-left: var(--space-6); }
.prose :where(li) { font-size: 1.0625rem; line-height: 1.7; color: var(--color-text-muted); margin-bottom: var(--space-3); }

.listing-faq {
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.listing-faq__item {
  border-bottom: 1px solid var(--color-border);
}

.listing-faq__item:first-child {
  border-top: 1px solid var(--color-border);
}

.listing-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-teal);
  cursor: pointer;
  list-style: none;
  min-height: 48px;
  transition: background var(--transition-fast);
}
/* hover + open (selected) state — a darker warm beige on the caret-circle accordions */
.listing-faq__summary:hover,
details[open] > .listing-faq__summary { background: var(--color-tan-active); }

.listing-faq__summary::-webkit-details-marker { display: none; }

/* Small inline icon inside FAQ answer text (e.g. the Share / menu glyphs in the add-to-home-screen steps). */
.faq-ico { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.2em; fill: currentColor; }

/* Every FAQ accordion uses the shared solid caret-circle chevron (matches map + dashboard). */
.listing-faq__chev {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  transition: transform var(--transition-fast);
}
details[open] > .listing-faq__summary .listing-faq__chev { transform: rotate(180deg); }

/* ── Gem guide pages (/gems/<slug>/) — crawlable "listing" pages for map Gems ───── */
/* Hero reuses the Boutel .listing-gallery frame (16:9 Cloudinary image); rendered only when a gem
   has a hero_image, so no CSS here for it. */
.gem__inner { max-width: 760px; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-16); }
.gem__eyebrow { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-teal); font-size: 14px; margin: 0 0 8px; }
.gem__h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.03; color: var(--color-headline); margin: 0 0 6px; }
.gem__sub { font-size: 1.05rem; color: var(--color-text-muted); margin: 0 0 var(--space-6); }
.gem-acc__p { font-size: 1.02rem; line-height: 1.7; color: var(--color-text-muted); margin: 0 0 1em; }
.gem__maplink { display: inline-block; margin: var(--space-4) 0 var(--space-8); color: var(--color-teal); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.gem__maplink:hover { opacity: 0.8; }
.gem__acc { margin-top: var(--space-4); }
.gem-acc__body { padding-top: 4px; }
.gem-acc__body .gem-acc__p:last-child { margin-bottom: 0; }
/* Closest Boutels + Things-to-Do cards (image/placeholder | name, badge, address+copy, phone, distance, Learn More) */
.gem-nearby { display: flex; flex-direction: column; margin-top: 8px; }
.gem-nearby__card { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--color-border); }
.gem-nearby__card:first-child { border-top: none; padding-top: 4px; }
.gem-nearby__ph { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--color-teal-tint); color: var(--color-teal); }
.gem-nearby__ph svg { width: 30px; height: 30px; }
.gem-nearby__ph--plus { background: var(--color-gold-tint); color: var(--color-gold-text); }
.gem-nearby__ph--hm { background: var(--color-tan-tint); color: var(--color-hm-badge-text); }
.gem-nearby__body { flex: 1 1 auto; min-width: 0; }
.gem-nearby__name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; line-height: 1.1; margin: 0 0 8px; color: var(--color-headline); }
.gem-nearby__addr { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 0.95rem; color: var(--color-headline); }
.gem-nearby__phone { margin: 4px 0 0; font-size: 0.95rem; }
.gem-nearby__phone a { color: var(--color-teal); text-decoration: none; }
.gem-nearby__foot { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 0.9rem; color: var(--color-text-muted); }
.gem-nearby__sep { color: var(--color-border); }
.gem-nearby__more { color: var(--color-teal); font-weight: 600; text-decoration: underline; }
.gem-nearby__more:hover { text-decoration: none; }

/* Breadcrumb/pill icons + the responsive "Road Trip Planner" -> "Planner" label (site-wide naming) */
.bc-ico { width: 1em; height: 1em; vertical-align: -0.14em; flex-shrink: 0; }
.listing-breadcrumb__link .bc-ico { margin-right: 5px; }
.rtp-pill .bc-ico, .hero__map-cta .bc-ico { margin-right: 6px; }
.rtp-lbl-short { display: none; }
@media (max-width: 640px) {
  .rtp-lbl-full { display: none; }
  .rtp-lbl-short { display: inline; }
}

.listing-faq__answer {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  padding: var(--space-4) var(--space-5) var(--space-4);
}
/* Gentle reveal so the panel does not snap open */
details[open] > .listing-faq__answer {
  animation: faq-answer-in 0.28s ease both;
}
@keyframes faq-answer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  details[open] > .listing-faq__answer { animation: none; }
}

/* Homepage FAQ — bottom-of-page section that reuses the .listing-faq accordion look */
.home-faq {
  padding: var(--space-16) var(--space-6);
  border-top: 1px solid var(--color-border);
}
.home-faq__inner {
  max-width: 780px;
  margin: 0 auto;
}
.home-faq #home-faq-heading {
  margin-bottom: var(--space-8);
}

/* ── Related Boutels ───────────────────────────────────────── */


.browse-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-input-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast),
              color var(--transition-fast),
              background var(--transition-fast);
}

.browse-pill:hover {
  border-color: var(--color-teal);
  color: var(--color-headline);
}

.browse-pill::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  background: transparent no-repeat center / 10px;
  flex-shrink: 0;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast);
}

.browse-pill[aria-pressed="true"] {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-white);
}

.browse-pill[aria-pressed="true"]::before {
  background-color: var(--color-white);
  border-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%231A8F7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C%2Fsvg%3E");
}

/* ── Image placeholder (absent or broken images) ────────────── */

/* !important: the placeholder swaps in for an <img>, so it must win over the
   image/context rules already on that element to stay centered. */
.img-placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--color-placeholder-bg) !important;
}

.img-placeholder::after {
  content: 'Imagery coming soon.';
  font-family: var(--font-body);
  font-size: 1rem;
  font-style: italic;
  color: var(--color-white);
  text-align: center;
  padding: 0 var(--space-3);
  pointer-events: none;
}

/* Amenity quick-tags (Pets/EV/Breakfast/WiFi) are now the shared .amenity in shared.css. */

/* ============================================================
   20. INTERIOR PAGE BODY (shared)
   Use .page-body on the outer wrapper and .page-body__inner on
   the content column for every non-listing content page.
   This matches the alignment model of .listing-breadcrumb-row:
   max-width-content centred, horizontal padding on the inner
   div only — never on the outer wrapper.
   ============================================================ */

.page-body {
  background: var(--color-bg);
  padding: 48px 0 80px;
}

.page-body__inner {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--space-10);
}

/* ============================================================
   21. ABOUT PAGE
   ============================================================ */

.about__h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
  margin-bottom: var(--space-6);
}

.about__intro {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: var(--space-10);
}

/* Numbered rule sub-headings in "How We Choose" — clear break between rules;
   the bold one-line summary directly below hugs the heading (small bottom gap).
   Uses the base h3 size (1.5rem): bigger than body, smaller than an h2. */
.about__h3 {
  margin: var(--space-12) 0 var(--space-2);
}

/* Founder bio: flow-root contains the right-floated portrait within the section */
.bio-block { display: flow-root; }

.about__section {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.about__section--tan {
  background: var(--color-tan-tint);
  border-top: none;
  margin-left: calc(-1 * var(--space-10));
  margin-right: calc(-1 * var(--space-10));
  padding-left: var(--space-10);
  padding-right: var(--space-10);
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

.about__h2 {
  margin-bottom: var(--space-4);
}

.about__body {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.about__body + .about__body {
  margin-top: var(--space-4);
}

/* ── Designation tiles (classification section) ──────────────── */
.desig-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.desig-tile {
  border-radius: var(--radius-card);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  border: 1px solid var(--color-border);
}

.desig-tile--plus {
  background: var(--color-desig-plus-bg);
  border-color: var(--color-gold);
}

.desig-tile--standard {
  background: var(--color-teal-tint);
  border-color: rgba(26, 143, 124, 0.25);
}

.desig-tile--hm {
  background: var(--color-tan-tint);
  border-color: var(--color-border);
}

.desig-tile__badge-wrap {
  display: flex;
}

.desig-tile__badge-wrap .listing__badge,
.desig-tile__badge-wrap .listing__badge--hm {
  margin-bottom: 0;
}

.desig-tile--standard .listing__badge {
  background: var(--color-white);
}

.desig-tile__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--color-headline);
}

.desig-tile--plus .desig-tile__name {
  color: var(--color-gold);
}

.desig-tile__name sup {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.4em;
  vertical-align: super;
  letter-spacing: 0;
  text-transform: none;
}

.desig-tile__body {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  flex: 1;
}

.desig-tile--plus .desig-tile__body {
  color: rgba(255, 224, 138, 0.75);
}

@media (max-width: 768px) {
  .desig-tiles { grid-template-columns: 1fr; }
  .open-road__split { flex-direction: column; align-items: stretch; }
  .open-road__figure { flex: 0 0 auto; width: 100%; }
}

/* ============================================================
   OUR STORY PAGE
   ============================================================ */

/* .our-story structural layout is inherited from .page-body */
.our-story {
  padding: var(--space-16) 0; /* 64px top/bottom overrides .page-body default */
}

.our-story__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: var(--space-10);
}

/* Sub-headings that break up the story body — strong break above, comfortable gap below */
.our-story__h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin-top: var(--space-12);
  margin-bottom: var(--space-6);
}

.our-story__inner p {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: var(--space-6);
  max-width: 68ch;
}

/* Founder photo — a portrait, so cap the width and left-align it with the story column */
.our-story__figure {
  margin: var(--space-8) 0;
  max-width: 400px;
}
.our-story__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.our-story__caption {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* Two-column story: narrative + byline on the left, a photo + feedback rail on the right.
   Stacks to one column on narrow screens (story, then photo, then feedback). */
.our-story__split {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-12);
  align-items: start;
}
@media (max-width: 820px) {
  .our-story__split { grid-template-columns: 1fr; gap: var(--space-6); }
}
/* the photo sits flush at the top of the right rail and fills its width */
.our-story__aside .our-story__figure { margin: 0 0 var(--space-6); max-width: none; }
.our-story__feedback-h {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1.25rem;
  color: var(--color-headline);
  margin: 0 0 var(--space-3);
}
/* space the second CTA (Submit a Property) away from the first */
.our-story__feedback-p + .our-story__feedback-h { margin-top: var(--space-8); }
.our-story__aside .our-story__feedback-p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
  max-width: none;
}

/* Literary pull quote — sits under the byline inside the left story column */
.our-story__pullquote {
  margin: var(--space-6) 0;
  padding: 14px 22px;
  border-left: 4px solid var(--color-teal);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-headline);
}
.our-story__pullquote-cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
}

.our-story__byline {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-muted);
  margin-top: var(--space-4);
  margin-bottom: var(--space-10);
}

.our-story__faq {
  margin-top: var(--space-6);
}

.our-story__faq-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: var(--space-8);
}

.our-story__faq-list {
  margin: 0;
  padding: 0;
}

.our-story__faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-6) 0;
}

.our-story__faq-item:first-child {
  border-top: 1px solid var(--color-border);
}

.our-story__faq-q {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-headline);
  margin-bottom: var(--space-2);
}

.our-story__faq-a {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0;
}

/* ============================================================
   22. PARTNERSHIPS PAGE
   ============================================================ */

.partnerships__subtitle {
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-muted);
  margin-top: var(--space-3);
  margin-bottom: var(--space-10);
}

.partnerships__opp-label {
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-headline);
  margin-top: var(--space-8);
  margin-bottom: var(--space-2);
}

.partnerships__contact {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
/* ============================================================
   23. EMAIL SIGNUP COMPONENT
   Used in .movement__sidebar (homepage) and .listing__aside (listing pages).
   ============================================================ */

.email-signup {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.listing__aside .email-signup {
  margin-bottom: var(--space-5);
}.email-signup__input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 1.2rem;
  border: 1px solid var(--color-teal);
  background: var(--color-input-bg);
  color: var(--color-text);
  border-radius: 4px;
  font-family: var(--font-body);
}

.email-signup__input:focus {
  outline: 2px solid var(--color-teal);
  outline-offset: 1px;
}

.email-signup__btn {
  padding: 8px 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-dark-text);
  background: var(--color-teal);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.email-signup__btn:hover {
  opacity: 0.85;
}

.email-signup__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.email-signup__success {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-teal);
  margin-top: var(--space-2);
}

.email-signup__error {
  font-size: 0.875rem;
  color: var(--color-error);
  margin-top: var(--space-2);
}

.footer__nav-btn {
  padding: 0;
  text-align: left;
}

/* ============================================================
   24. WAYFINDING TYPOGRAPHY
   Condensed Rule: all navigation, search, filters, buttons,
   breadcrumbs, and the brand tagline use Barlow Condensed 800
   uppercase. Content/editorial text uses the body font only.
   Placed last (before responsive) to win the cascade over
   component-specific font rules above.
   ============================================================ */
.nav__descriptor,
.nav__link,
.nav__dropdown-btn,
.nav__dropdown-item,
.search__submit,
.hero-pill__btn,
.browse__tab,
.browse__tab[aria-selected="true"],
.browse__by,
.footer__nav-heading,
.footer__nav-link,
.listing-breadcrumb,
.listing-breadcrumb__link,
.listing-browse-pill,
.browse-pill,
.browse-new-search,
.state-empty__btn,
.page-hero__label {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
}

.nav__descriptor     { letter-spacing: 0.22em; }
.footer__nav-heading { letter-spacing: 0.12em; }
.nav__link,
.nav__dropdown-btn,
.nav__dropdown-item  { letter-spacing: 0.07em; }
.search__submit,
.browse-new-search,
.state-empty__btn    { letter-spacing: 0.07em; }
.hero-pill__btn,
.browse__tab,
.browse-pill         { letter-spacing: 0.06em; }
.listing-breadcrumb,
.listing-breadcrumb__link,
.footer__nav-link    { letter-spacing: 0.05em; }
.page-hero__label    { letter-spacing: 0.1em; }

/* ============================================================
   25. RESPONSIVE OVERRIDES
   ============================================================ */

/* Tablet — ≤ 900px */
@media (max-width: 900px) {
  .desig-moodboard { grid-template-columns: repeat(3, 1fr); }
  /* The essay + sidebar two-column (history pages) stacks below the reading width: the sidebar
     drops under the essay and goes full-width so its cards flow fluidly and never overflow. */
  .movement__split { flex-direction: column; align-items: center; }
  .movement__sidebar { flex: none; width: 100%; }
  /* Collection pages: stack essay -> stays -> "More Boutel Collections" rail (rail at the very bottom). */
  .collection-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "article" "stays" "sidebar";
    gap: var(--space-8);
    justify-content: stretch;
  }
}

/* Large mobile — ≤ 768px */
@media (max-width: 768px) {
  /* Nav — only horizontal padding narrows; vertical stays identical to desktop */
  .nav { padding: 2px 20px 26px; }

  /* Homepage-only mobile reel (the homepage has no .movement__sidebar; the history-page sidebar
     stays visible, stacked full-width from the 900px rule above). */
  .boutel-reel { display: block; }
  .boutel-reel__img-wrap { width: 100%; overflow: hidden; }
  .boutel-reel__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block;
    height: auto;
  }

  /* Interior pages */
  .page-hero { padding: 48px 24px; }
  .page-body { padding: 32px 0 60px; }
  .page-body__inner { padding: 0 var(--space-5); }
  .our-story { padding: var(--space-10) 0; }
  .about__section { margin-top: var(--space-10); }
  .about__section--tan {
    margin-left: calc(-1 * var(--space-5));
    margin-right: calc(-1 * var(--space-5));
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  /* Listing pages */
  .listing-gallery { padding: 0 24px; }
  .listing { padding: var(--space-8) 24px var(--space-16); }
  .listing-breadcrumb-row { padding: 0 24px; }
  .listing-amenities { grid-template-columns: repeat(2, 1fr); }
  .listing-notes { grid-template-columns: 1fr; }
  .listing-related__grid { grid-template-columns: repeat(2, 1fr); }
  .listing__layout { grid-template-columns: 1fr; gap: 0; }
  .listing__aside {
    border-left: none;
    border-top: 3px solid var(--color-border);
    margin-top: var(--space-8);
  }
}

/* Small mobile — ≤ 480px (nav rules moved below ≤680px so they win the cascade) */
@media (max-width: 480px) {
  .search__pod .hero-pill.hero-pill--landscape { display: none; }
}

/* State empty page */
.state-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 320px;
  padding: 80px 24px;
}
.state-empty__inner {
  text-align: center;
  max-width: 480px;
}
.state-empty__msg {
  font-size: 1.25rem;
  color: var(--color-text);
  margin-bottom: 28px;
}
.state-empty__btn {
  display: inline-block;
  background: var(--color-teal);
  color: var(--color-white);
  font-size: 0.9375rem;
  padding: 13px 28px;
  border-radius: var(--radius-button);
  text-decoration: none;
  transition: opacity 0.15s;
}
.state-empty__btn:hover { opacity: 0.88; }

/* Mobile — ≤ 680px */
@media (max-width: 680px) {
  /* Nav — tighten horizontal button padding on narrow screens */
  .nav__link { padding: 0 10px; }
  .nav__dropdown-btn { font-size: 0.75rem; }

  /* Hero */
  .hero { padding: 48px 20px; }
  .hero__inner { gap: var(--space-8); }

  /* Search pod */
  .search__pod { padding: 10px; border-radius: 16px; }
  /* Mid-essay "Where are you going?" pod: no horizontal padding so it lines up flush with the heading + text */
  .movement__search .search__pod { padding: 0; }

  /* Submit: show magnifying glass icon only */
  .search__input { padding: 0 14px; }
  .search__input::placeholder { font-size: 0.875rem; }
  .search__submit-full  { display: none; }
  .search__submit-short { display: none; }
  .search__submit-icon  { display: flex; align-items: center; justify-content: center; }
  .search__submit       { padding: 0; width: 44px; display: flex; align-items: center; justify-content: center; }

  /* Hero pills: merge into one connected row */
  .search__pod .hero-pills { flex-wrap: nowrap; gap: 0; padding: 0; }
  .search__pod .hero-pill  { flex: 1 1 0; min-width: 0; }
  .search__pod .hero-pill__btn {
    width: 100%;
    justify-content: center;
    padding: 0 5px;
    min-height: 36px;
    font-size: 0.8rem;
    gap: 3px;
    border-radius: 0;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(242, 237, 228, 0.2);
  }
  .search__pod .hero-pill:first-child .hero-pill__btn { border-radius: 12px 0 0 12px; }
  .search__pod .hero-pill:last-child  .hero-pill__btn { border-right: none; border-radius: 0 12px 12px 0; }
  .search__pod .hero-pill__icon  { display: none; }
  .search__pod .hero-pill__arrow { width: 9px; height: 6px; }

  /* Mission — reduce from 40px to match hero 20px sides */
  .mission { padding: 28px 20px; }

  /* Content sections — align to hero's 20px side padding */
  .designation,
  .movement,
  .browse,
  .nominate,
  .newest { padding: 0 20px 32px; }
  .designation { padding-top: 40px; }

  /* __inner containers carry 40px horizontal padding on desktop; zero it
     at mobile so it doesn't stack on top of the section's 20px gutter */
  .designation__inner,
  .movement__inner,
  .browse__inner,
  .nominate__inner,
  .newest__inner { padding-left: 0; padding-right: 0; }

  /* Boutel Standard band keeps a 20px side gutter (the callout card must not touch the edges) */
  .boutel-standard { padding: var(--space-12) 20px; }
  .boutel-standard__inner { padding-left: 0; padding-right: 0; }
  .boutel-standard__callout { padding: var(--space-8) var(--space-5); }

  /* Hero pill dropdowns — smaller items, capped height */
  .hero-pill__menu { max-height: 55vh; overflow-y: auto; min-width: 110px; }
  .hero-pill__item { font-size: 0.8125rem; padding: 8px 14px; }
  /* Last pill (Landscape) opens right; anchor to right edge so it stays on screen */
  .search__pod .hero-pill:last-child .hero-pill__menu { left: auto; right: 0; }

  /* Movement — split already stacks from the 900px rule; only the floated in-content images change here */
  .article-img--right,
  .article-img--left {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Designation */
  .desig-groups { grid-template-columns: 1fr; }
  .desig-moodboard { grid-template-columns: repeat(3, 1fr); }
  .desig-moodboard__item--tall,
  .desig-moodboard__item--short { height: 140px; }

  /* Interior pages */
  .page-hero { padding: 48px 20px; }
  .nominate-ctas { padding: 40px 24px 60px; }
  .nominate-ctas__grid { grid-template-columns: 1fr; }
  .nominate-card { padding: 28px 24px; }
  .browse-pill::before { display: none; }
  .browse-pill { padding: 0 14px; }

  /* Listing pages */
  .listing-gallery { padding: 0 16px; }
  .listing { padding: var(--space-6) 20px var(--space-12); }
  .listing-breadcrumb-row { padding: 0 20px; } /* flex-wrap + margin-left:auto handle the stacking now (button floats right, wraps below only when needed) */
  .listing__name { margin-bottom: var(--space-2); }
  .listing-amenities { grid-template-columns: 1fr; }
  .listing-section-photos--2,
  .listing-section-photos--3 { grid-template-columns: 1fr; }
  .listing-nearby__image,
  .listing-nearby__placeholder { width: 100px; }
  .listing-itinerary__form { flex-direction: column; }
  .listing-itinerary__input { width: 100%; }
  .listing-itinerary__btn { width: 100%; justify-content: center; }
  .listing-related__grid { grid-template-columns: 1fr; }
  .listing-details__row { padding: var(--space-4); }
}

/* Small mobile nav — ≤ 480px (placed after ≤680px so these override it) */
@media (max-width: 480px) {
  .nav { padding: 2px 16px 26px; }
  .nav__link { padding: 0 9px; }
}

/* Very small screens — ≤ 500px portrait: shrink logo, descriptor, nav buttons, and zone labels */
@media (max-width: 500px) {
  .nav                { padding: 2px 12px 16px; }
  .nav__wordmark-svg  { height: 60px; max-width: 160px; }
  .nav__logo          { gap: 5px; }
  .nav__descriptor    { font-size: 0.75rem; letter-spacing: 0.10em; }
  .nav__links         { gap: 5px; }
  .nav__link          { padding: 0 8px; font-size: 0.72rem; min-height: 26px; white-space: normal; text-align: center; }
  .nav__dropdown-btn  { padding: 0 8px; font-size: 0.72rem; min-height: 26px; white-space: normal; text-align: center; }
}

/* Footer — ≤ 600px */
@media (max-width: 600px) {
  .footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-8);
  }
  /* footer__bottom stays row: copyright left, logo right (no override needed) */
}

.search__panel {
  display: contents;
}

.search__panel[hidden] {
  display: none;
}

/* "Back to the map" pill on a listing page (reuses the browse-pill look). */
.listing-map-back { margin-right: var(--space-2); }