/* ================================================================
   OTABQ Web Schema v3 — Guest Design System
   albuquerqueoldtown.com
   ================================================================
   Fonts: Alegreya (headings), Poppins (body), JetBrains Mono (labels/code)
   Palette: Teal / Terra / Ink / Sand / Cream
   ================================================================ */

/* ================================================================
   TOKENS
   ================================================================ */

:root {
  /* ---- Palette ---- */
  --teal: #67a6a4;
  --tl: #8fc4c2; /* teal-light */
  --td: #4a8785; /* teal-dark */
  --tm: #e8f3f2; /* teal-mist */
  --terra: #c4755b;
  --trl: #d9a08d; /* terra-light */
  --trd: #a55a42; /* terra-dark */
  --trb: #f3e6e0; /* terra-blush */
  --ink: #141827;
  --inks: #2a2d3e; /* ink-secondary */
  --body: #555555; /* WCAG AA on cream — was #676767 */
  --bl: #666666; /* body-light — WCAG AA on cream */
  --sand: #b5aba0;
  --sl: #d4cec7; /* sand-light */
  --cream: #f5f0ea;
  --cw: #ede8e2; /* cream-warm */
  --w: #fff;

  /* ---- Logo ---- */
  --nav-logo-url: url("https://www.albuquerqueoldtown.com/cdn-cgi/image/quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2025/09/Old-Town-ABQ-OTDark@2x.png");

  /* ---- Gradient / decorative shades (mosaic, parallax) ---- */
  --ink-deep: #0d1018;
  --ink-mid: #1e2a42;
  --ink-slate: #2a3550;

  /* ---- Chip category colors ---- */
  --chip-event-bg: var(--trb);
  --chip-event-fg: var(--trd);
  --chip-dining-bg: var(--tm);
  --chip-dining-fg: var(--td);
  --chip-shopping-bg: #f0ece8;
  --chip-shopping-fg: #6b6155;
  --chip-history-bg: #e8e8ec;
  --chip-history-fg: var(--inks);
  --chip-lodging-bg: #e0eded;
  --chip-lodging-fg: var(--td);
  --chip-tours-bg: #f0e4de;
  --chip-tours-fg: var(--trd);

  /* ---- Tag colors ---- */
  --tag-free-bg: #e4f2e4;
  --tag-free-fg: #2d7a2d;

  /* ---- Fonts ---- */
  --fh: "Alegreya", Georgia, serif;
  --fb: "Poppins", Helvetica, sans-serif;
  --fm: "JetBrains Mono", monospace; /* PREVIEW CHROME ONLY — do not use in site components */

  /* ---- Type Scale: Display ---- */
  --ts-pghead-s: clamp(40px, 5.5vw, 71px);
  --ts-pghead-w: 600;
  --ts-pghead-lh: 1.04;
  --ts-h1-s: clamp(36px, 5.3vw, 69px);
  --ts-h1-w: 700;
  --ts-h1-lh: 1.13;
  --ts-h2-s: clamp(32px, 4vw, 52px);
  --ts-h2-w: 700; /* lh varies by context — see band-lh, px-lh */
  --ts-h3-s: clamp(28px, 3.4vw, 44px);
  --ts-h3-w: 400;
  --ts-h3-lh: 1.25;
  --ts-sig-title-s: clamp(24px, 3vw, 38px);
  --ts-sig-title-w: 700;
  --ts-sig-title-lh: 1.15;

  /* ---- Type Scale: Content ---- */
  --ts-pgsub-s: 28px;
  --ts-pgsub-w: 500;
  --ts-pgsub-lh: 1.25;
  --ts-nav-s: 24px;
  --ts-nav-w: 700;
  --ts-nav-lh: 1;
  --ts-body-s: 21px;
  --ts-body-w: 400;
  --ts-body-lh: 1.8;
  --ts-h4-s: 21px;
  --ts-h4-w: 500;
  --ts-h4-lh: 1.43;
  --ts-h5-s: 16px;
  --ts-h5-w: 600;
  --ts-h5-lh: 1.8;
  --ts-caption-s: 16px;
  --ts-caption-w: 400;
  --ts-caption-lh: 1.6;
  --ts-small-s: 14px;
  --ts-small-w: 400;
  --ts-small-lh: 1;
  /* Note: .pull-quote cite and .footer-cta intentionally use 600 weight override on small size */

  /* ---- Type Scale: Micro (10-14px range) ---- */
  --ts-micro-s: 10px;
  --ts-micro-w: 400;
  --ts-micro-lh: 1;
  --ts-micro-md-s: 11px;
  --ts-micro-md-w: 400;
  --ts-micro-md-lh: 1;
  --ts-micro-lg-s: 12px;
  --ts-micro-lg-w: 700;
  --ts-micro-lg-lh: 1;
  --ts-ui-s: 13px;
  --ts-ui-w: 400;
  --ts-ui-lh: 1;
  --ts-ui-label-s: 14px;
  --ts-ui-label-w: 700;
  --ts-ui-label-lh: 1;

  /* ---- Type Scale: Compact ---- */
  /* nav-compact and nav-mobile removed — use --ts-nav-s for nav links, --ts-h4-s for mobile nav */
  --ts-hero-sub-s: 15px; /* hero sub-heading */
  --ts-event-title-s: 20px; /* event card title */
  --ts-brand-w: 700;

  /* ---- Type Scale: Contextual line-height ---- */
  --ts-band-s: var(--ts-h2-s); /* alias for band headings */
  --ts-band-w: 800;
  --ts-band-lh: 1.15;
  --ts-px-lh: 1.1; /* parallax/page-hero h3 */
  --ts-hero-sub-w: 500;
  --ts-hero-body-lh: 1.65; /* tighter than --ts-body-lh in hero context */
  --ts-list-lh: 1.7; /* content lists — slightly tighter than body */

  /* ---- Type Scale: recurring date badge ---- */
  --ts-db-mo-s: var(--ts-micro-lg-s);
  --ts-db-mo-w: 700;
  --ts-db-mo-lh: 1;
  --ts-db-dy-s: 28px;
  --ts-db-dy-w: 700;
  --ts-db-dy-lh: 1;
  --ts-db-rec-mo-s: var(--ts-micro-s);
  --ts-db-rec-mo-w: 700;
  --ts-db-rec-dy-s: 20px;
  --ts-db-rec-dy-w: 700;
}

/* ================================================================
   RESET
   ================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font: var(--ts-body-w) var(--ts-body-s)/var(--ts-body-lh) var(--fb);
  color: var(--body);
  background: var(--cw);
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--teal);
  text-decoration: none;
}

/* ================================================================
   ACCESSIBILITY
   ================================================================ */

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--teal);
  color: var(--w);
  padding: 8px 16px;
  z-index: 10000;
  font: 600 var(--ts-small-s)/1 var(--fb);
  border-radius: 0 0 8px 0;
  transition: top 0.2s;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(103, 166, 164, 0.4);
  outline: none;
}

.card:focus-visible,
.ev-card:focus-visible,
.callout:focus-visible,
.listing-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(103, 166, 164, 0.4);
  outline: none;
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: none; /* handled by their own focus styles */
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover,
  .ev-card:hover {
    transform: none;
  }
  .card:hover .card-img-bg,
  .mi:hover .mi-i,
  .editorial:hover .editorial-img-bg {
    transform: none;
  }
  .btn:hover {
    transform: none;
  }
  .pal div:hover {
    transform: none;
  }
}

/* ================================================================
   BUTTONS — square with rounded corners, not pills
   ================================================================ */

.bg {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 var(--ts-h5-s)/1 var(--fb);
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 14px 28px;
  border-radius: 10px;
  letter-spacing: 0.01em;
}
.btn svg {
  width: 18px;
  height: 18px;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--teal);
  color: var(--w);
  border-color: var(--teal);
}
.btn-primary:hover {
  background: var(--td);
  border-color: var(--td);
  box-shadow: 0 8px 24px rgba(103, 166, 164, 0.3);
}

.btn-secondary {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal);
}
.btn-secondary:hover {
  background: var(--teal);
  color: var(--w);
}

.btn-terra {
  background: var(--terra);
  color: var(--w);
  border-color: var(--terra);
}
.btn-terra:hover {
  background: var(--trd);
  border-color: var(--trd);
  box-shadow: 0 8px 24px rgba(196, 117, 91, 0.3);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--sl);
}
.btn-ghost:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--w);
}

.btn-dark {
  background: var(--ink);
  color: var(--w);
  border-color: var(--ink);
}
.btn-dark:hover {
  background: var(--inks);
  box-shadow: 0 8px 24px rgba(20, 24, 39, 0.25);
}

.btn-sm {
  font-size: var(--ts-ui-s);
  padding: 10px 20px;
  border-radius: 8px;
}

.btn-band {
  background: var(--w);
  color: var(--teal);
  border-color: var(--w);
}
.btn-band:hover {
  background: var(--ink);
  color: var(--w);
  border-color: var(--ink);
}

.btn-icon {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 10px;
  justify-content: center;
}

/* Disabled state */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

/* ================================================================
   CHIPS — category labels
   ================================================================ */

.chip-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  font: 600 var(--ts-small-s)/1.5 var(--fh);
  letter-spacing: 0.03em;
  text-transform: capitalize;
  padding: 4px 16px;
  border-radius: 8px;
}

.chip-events {
  background: var(--chip-event-bg);
  color: var(--chip-event-fg);
}
.chip-dining {
  background: var(--chip-dining-bg);
  color: var(--chip-dining-fg);
}
.chip-shopping {
  background: var(--chip-shopping-bg);
  color: var(--chip-shopping-fg);
}
.chip-history {
  background: var(--chip-history-bg);
  color: var(--chip-history-fg);
}
.chip-lodging {
  background: var(--chip-lodging-bg);
  color: var(--chip-lodging-fg);
}
.chip-tours {
  background: var(--chip-tours-bg);
  color: var(--chip-tours-fg);
}
.chip-art {
  background: var(--tm);
  color: var(--td);
}
.chip-music {
  background: var(--chip-history-bg);
  color: var(--chip-history-fg);
}
.chip-food {
  background: var(--trb);
  color: var(--trd);
}
.chip-community {
  background: var(--chip-shopping-bg);
  color: var(--chip-shopping-fg);
}

/* ================================================================
   TAGS — inline status markers
   ================================================================ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 var(--ts-micro-md-s)/var(--ts-micro-md-lh) var(--fb);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 6px;
}
.tag-free {
  background: var(--tag-free-bg);
  color: var(--tag-free-fg);
}

/* ================================================================
   ATOMS
   ================================================================ */

/* Text link */
.text-link {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--tl);
  font-weight: 500;
  transition: all 0.15s;
}
.text-link:hover {
  color: var(--td);
  text-decoration-color: var(--td);
}
.text-link:active {
  opacity: 0.7;
}

/* Date badge */
.date-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  min-height: 72px;
  background: var(--terra);
  color: var(--w);
  border-radius: 10px;
  text-align: center;
  line-height: 1;
  padding: 8px;
}
.date-badge .mo {
  font: var(--ts-db-mo-w) var(--ts-db-mo-s)/var(--ts-db-mo-lh) var(--fh);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.date-badge .dy {
  font: var(--ts-db-dy-w) var(--ts-db-dy-s)/var(--ts-db-dy-lh) var(--fh);
}

/* Recurring date badge (smaller) */
.date-badge.recurring {
  width: 48px;
  min-height: 56px;
  padding: 6px;
}
.date-badge.recurring .mo {
  font: var(--ts-db-rec-mo-w) var(--ts-db-rec-mo-s)/1 var(--fh);
  letter-spacing: 0.1em;
}
.date-badge.recurring .dy {
  font: var(--ts-db-rec-dy-w) var(--ts-db-rec-dy-s)/1 var(--fh);
}

/* Date badge variants */
.date-badge.alt {
  background: var(--teal);
}
.date-badge.light {
  background: var(--w);
  color: var(--ink);
  border: 1.5px solid var(--sl);
}
.date-badge.light .mo {
  color: var(--terra);
}

/* Overline */
.overline {
  font: 600 var(--ts-h5-s)/var(--ts-h5-lh) var(--fh);
  letter-spacing: 0.04em;
  text-transform: capitalize;
  color: var(--teal);
}

/* Horizontal rules */
.hr1 {
  border: none;
  height: 2px;
  background: var(--sl);
}
.hr-diamond {
  border: none;
  height: 2px;
  background: var(--sl);
  position: relative;
  margin: 24px 0;
}
.hr-diamond::after {
  content: "\25C6";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--cw);
  padding: 0 16px;
  color: var(--teal);
  font-size: var(--ts-h5-s);
}

/* Pull quote */
.pull-quote {
  font: italic 400 var(--ts-pgsub-s)/1.35 var(--fh);
  color: var(--ink);
  border-left: 5px solid var(--teal);
  padding-left: 28px;
}
/* cite uses 600 weight — intentional bold variant of --ts-small-s */
.pull-quote cite {
  display: block;
  font: 600 var(--ts-small-s)/1 var(--fb);
  font-style: normal;
  color: var(--bl);
  margin-top: 14px;
  letter-spacing: 0.03em;
}

/* Drop cap */
.drop-cap::first-letter {
  font: 700 4em/0.78 var(--fh);
  float: left;
  margin-right: 12px;
  margin-top: 6px;
  color: var(--teal);
}

/* ================================================================
   BREADCRUMB
   ================================================================ */

.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font: var(--ts-small-w) var(--ts-small-s)/1 var(--fb);
  list-style: none;
}
.breadcrumb a {
  color: var(--teal);
}
.breadcrumb a:hover {
  color: var(--td);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.breadcrumb span {
  color: var(--bl);
}
.breadcrumb-sep {
  color: var(--sand);
  font-size: var(--ts-micro-s);
}

/* ================================================================
   NAVIGATION
   ================================================================ */

.nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 32px 0;
  max-width: 1280px;
  margin: 0 auto;
}
.nav-logo {
  margin-bottom: 10px;
}
.nav-logo img {
  height: 72px;
  width: auto;
  display: block;
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  padding: 0 0 14px;
}
.nav-links a {
  font: var(--ts-nav-w) var(--ts-nav-s)/1 var(--fh);
  text-transform: capitalize;
  text-decoration: none;
  letter-spacing: 0.02em;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 3px;
  border-radius: 2px;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:hover::after {
  width: 100%;
}
.nav-links a.active::after {
  width: 100%;
  background: var(--teal);
}
.nav-links a.active {
  color: var(--ink);
}

/* Transparent nav (over hero) */
.nav-t {
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: none;
  z-index: 2;
  transition:
    background 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-t,
.nav-t a {
  color: var(--cw);
}
.nav-t .nav-links a.active {
  color: var(--cw);
}
.nav-t .nav-links a::after {
  background: var(--cw);
}
.nav-t .nav-logo img {
  height: 76px;
}

/* Solid nav (scrolled) */
.nav-s {
  background: var(--cream);
  box-shadow: 0 4px 20px rgba(20, 24, 39, 0.06);
  border-bottom: 1px solid var(--sl);
  position: sticky;
  top: 0;
  z-index: 100;
  transition:
    background 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav.nav-s {
  padding-top: 8px;
  max-width: none;
}
.nav-s .nav-logo {
  margin-bottom: 4px;
}
.nav-s .nav-links {
  padding-bottom: 13px;
}
.nav-s,
.nav-s a {
  color: var(--ink);
}
.nav-s a:hover {
  color: var(--body);
}
.nav-s .nav-logo img {
  height: 55px;
}

/* Mobile nav (hidden by default — JS toggles visibility) */
.nav-m {
  display: none;
  flex-direction: column;
  gap: 0;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--w);
  z-index: 100;
  padding: 16px 0;
  box-shadow: 0 8px 32px rgba(20, 24, 39, 0.12);
}
.nav-m.is-open {
  display: flex;
}
.nav-m a {
  display: block;
  padding: 16px 32px;
  font: var(--ts-nav-w) var(--ts-nav-s)/1 var(--fh);
  color: var(--ink);
  border-bottom: 1px solid var(--cream);
  text-decoration: none;
}
.nav-m a:hover {
  background: var(--cream);
  color: var(--teal);
}

/* Hamburger toggle */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  padding: 10px;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-toggle span {
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle span::before {
  top: -7px;
}
.nav-toggle span::after {
  top: 7px;
}

/* Open state (X shape) — toggled via JS */
.nav-toggle.is-open span {
  background: transparent;
}
.nav-toggle.is-open span::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-toggle.is-open span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Sub-navigation (neighborhood, sub-area pages) */
.subnav {
  background: var(--ink);
  border-bottom: 1px solid var(--inks);
  box-shadow: 0 4px 20px rgba(20, 24, 39, 0.15);
  position: sticky;
  top: 0;
  z-index: 100;
}
.subnav-inner {
  display: flex;
  align-items: center;
  padding: 0 32px;
  height: 56px;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
}
.subnav-back {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 var(--ts-small-s)/1 var(--fb);
  color: var(--tl);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}
.subnav-back:hover {
  color: var(--w);
}
.subnav-back svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.subnav-logo {
  height: 36px;
  width: auto;
  display: block;
}
.subnav-sep {
  width: 1px;
  height: 28px;
  background: var(--inks);
  flex-shrink: 0;
}
.subnav-title {
  font: 700 var(--ts-micro-lg-s)/1 var(--fb);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sand);
}

/* Subnav dropdown — click-to-toggle child page menu */
.subnav-dropdown {
  position: relative;
}
.subnav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}
.subnav-dropdown-toggle:hover,
.subnav-dropdown-toggle:focus-visible {
  color: var(--w);
}
.subnav-dropdown-toggle:focus-visible {
  outline: 2px solid var(--tl);
  outline-offset: 4px;
  border-radius: 2px;
}
.subnav-caret {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}
.subnav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 200px;
  background: var(--inks);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 6px 0;
  box-shadow: 0 8px 32px rgba(20, 24, 39, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.97) translateY(4px);
  transition:
    opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.2s;
  z-index: 200;
}
.subnav-dropdown-link {
  display: block;
  padding: 10px 20px;
  font: 500 14px/1.2 var(--fb);
  color: var(--sl);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.15s cubic-bezier(0.33, 1, 0.68, 1),
    background 0.15s cubic-bezier(0.33, 1, 0.68, 1);
}
.subnav-dropdown-link:hover {
  color: var(--w);
  background: rgba(255, 255, 255, 0.06);
}
.subnav-dropdown.is-open .subnav-caret {
  transform: rotate(180deg);
}
.subnav-dropdown.is-open .subnav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .subnav-caret,
  .subnav-dropdown-menu {
    transition-duration: 0.01ms !important;
  }
}

.subnav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.subnav-anchors {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.subnav-anchors a {
  font: 500 var(--ts-small-s)/1 var(--fb);
  color: var(--sl);
  text-decoration: none;
  position: relative;
  transition: color 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}
.subnav-anchors a:hover {
  color: var(--w);
}
.subnav-anchors a.active {
  color: var(--w);
  font-weight: 600;
}

/* Subnav — tablet: hide section links, keep core nav */
@media (max-width: 900px) {
  .subnav-anchors {
    display: none;
  }
  .subnav-sep {
    display: none;
  }
}

/* Subnav — mobile: minimal bar */
@media (max-width: 600px) {
  .subnav-inner {
    padding: 0 16px;
    gap: 12px;
  }
  .subnav-title {
    display: none;
  }
  .subnav-dropdown {
    display: none;
  }
  .subnav-logo {
    margin: 0 auto;
  }
  .footer-bar {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* ================================================================
   HEROES
   ================================================================ */

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--w);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-f .hero-bg {
  background: linear-gradient(
    160deg,
    var(--ink-deep) 0%,
    var(--ink) 30%,
    var(--ink-mid) 60%,
    var(--ink-slate) 100%
  );
}
.hero-p .hero-bg {
  background: linear-gradient(160deg, var(--ink), var(--ink-slate));
}

.hero-ov {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-f .hero-ov {
  background: linear-gradient(
    to right,
    rgba(20, 24, 39, 0.78) 0%,
    rgba(20, 24, 39, 0.4) 55%,
    rgba(20, 24, 39, 0.1) 100%
  );
}
.hero-p .hero-ov {
  background: rgba(20, 24, 39, 0.45);
}

.hero-c {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

/* Full hero */
.hero-f {
  min-height: 540px;
  border-radius: 14px;
}
.hero-f .hero-c {
  padding: 56px 48px;
}
.hero-f h1 {
  font: var(--ts-pghead-w) var(--ts-pghead-s)/1.02 var(--fh);
  margin-bottom: 16px;
}
.hero-f h1 strong {
  font-weight: 900;
}

/* Page hero (compact) */
.hero-p {
  min-height: 180px;
}
.hero-p .hero-c {
  max-width: 100%;
  text-align: left;
  padding: 40px 48px;
}
.hero-p h1 {
  font: var(--ts-h3-w) var(--ts-h3-s)/1.3 var(--fh);
}

/* Hero sub-heading */
.hero-sub {
  font: var(--ts-hero-sub-w) var(--ts-hero-sub-s)/1 var(--fh);
  letter-spacing: 0.1em;
  text-transform: capitalize;
  color: var(--tl);
  margin-bottom: 16px;
}

/* Hero body text — intentionally tighter than --ts-body-lh */
.hero p {
  font-size: var(--ts-body-s);
  opacity: 0.82;
  margin-bottom: 20px;
  line-height: var(--ts-hero-body-lh);
  max-width: 480px;
}

/* Category hero — centered text, flat overlay, photo background */
.hero-cat {
  min-height: 65vh;
  align-items: flex-end;
  justify-content: center;
}
.hero-cat .hero-bg {
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
}
.hero-cat .hero-ov {
  background: rgba(20, 24, 39, 0.45);
}
.hero-cat .hero-c {
  text-align: center;
  max-width: 100%;
  width: 100%;
  padding: 0 48px 56px;
}
.hero-cat h1 {
  font: var(--ts-h1-w) var(--ts-h1-s)/var(--ts-h1-lh) var(--fh);
  text-transform: capitalize;
  margin-bottom: 12px;
}
.hero-cat .hero-sub {
  margin-bottom: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  animation: hw-sub-in 0.8s ease forwards;
  animation-delay: 1s;
}

/* Hero word — word-by-word slide-rise animation (E6 / ease-out-expo) */
.hw {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: hw-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.16s + 0.2s);
}
@keyframes hw-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hw-sub-in {
  to {
    opacity: 0.85;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hw,
  .hero-cat .hero-sub {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .hero-kb .hero-bg {
    animation: none;
  }
}

/* Ken Burns — slow cinematic drift on hero background (C2).
   15s × alternate = 30s full cycle.
   Drift 0→80% (12s), hold 80→100% (3s), then alternate
   reverses: hold 3s at apex, drift 12s back. */
@keyframes hero-drift {
  0% {
    transform: scale(1) translate(0, 0);
  }
  80% {
    transform: scale(1.06) translate(-0.8%, -0.4%);
  }
  100% {
    transform: scale(1.06) translate(-0.8%, -0.4%);
  }
}
.hero-kb .hero-bg {
  animation: hero-drift 15s linear infinite alternate;
  will-change: transform;
}

/* Radial vignette — brighter center, dark edges */
.hero-vignette .hero-ov {
  background: radial-gradient(
    ellipse 70% 70% at 50% 45%,
    rgba(20, 24, 39, 0.18) 0%,
    rgba(20, 24, 39, 0.5) 50%,
    rgba(20, 24, 39, 0.78) 100%
  );
}

/* ================================================================
   EDITORIAL
   ================================================================ */

.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 440px;
}
.editorial-img {
  position: relative;
  overflow: hidden;
}
.editorial-img-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--tm) 0%, var(--sl) 40%, var(--cw) 100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.editorial:hover .editorial-img-bg {
  transform: scale(1.03);
}

.editorial-body {
  padding: 60px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--w);
}
.editorial-body h2 {
  font: var(--ts-h2-w) var(--ts-h2-s)/1.12 var(--fh);
  color: var(--ink);
  margin-bottom: 16px;
}
.editorial-body p {
  max-width: 480px;
  margin-bottom: 20px;
  font-size: var(--ts-body-s);
  line-height: var(--ts-list-lh);
}

/* Signature editorial — distinct heading scale */
.sig-editorial .editorial-body h2 {
  font: var(--ts-sig-title-w) var(--ts-sig-title-s)/var(--ts-sig-title-lh) var(--fh);
  color: var(--ink);
  margin-bottom: 16px;
}

/* ================================================================
   STORY SPREAD — full-bleed image + pull-quote
   ================================================================ */

.story-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
}
.story-spread-img {
  position: relative;
  overflow: hidden;
}
.story-spread-img-inner {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--tm) 0%, var(--sl) 40%, var(--cw) 100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.story-spread:hover .story-spread-img-inner {
  transform: scale(1.03);
}
.story-spread-img-bg {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  font: italic var(--ts-caption-w) var(--ts-caption-s)/var(--ts-caption-lh) var(--fb);
  color: var(--w);
  text-shadow: 0 1px 4px rgba(20, 24, 39, 0.5);
}
.story-spread-text {
  padding: 60px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--w);
}
.story-spread-text blockquote {
  font: italic 400 var(--ts-pgsub-s)/1.45 var(--fh);
  color: var(--ink);
  margin-bottom: 16px;
}
.story-spread-text cite {
  display: block;
  font: 600 var(--ts-small-s)/1 var(--fb);
  font-style: normal;
  color: var(--bl);
  letter-spacing: 0.03em;
}

/* ================================================================
   PROSE
   ================================================================ */

.prose {
  max-width: 768px;
  margin: 0 auto;
  padding: 70px 26px;
  background: var(--w);
}
.prose h2 {
  font: var(--ts-h2-w) var(--ts-h2-s)/var(--ts-px-lh) var(--fh);
  color: var(--ink);
  text-align: center;
  margin-bottom: 24px;
}
.prose p {
  margin-bottom: 20px;
  font-size: var(--ts-body-s);
  line-height: var(--ts-body-lh);
}
.prose p + p {
  text-indent: 1.8em;
}

/* ================================================================
   SPLIT
   ================================================================ */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.split > div {
  padding: 60px 52px;
}
.split h3 {
  font: var(--ts-h3-w) var(--ts-h3-s)/1.32 var(--fh);
  color: var(--ink);
  margin-bottom: 16px;
}

/* ================================================================
   PANEL PAIR — Two side-by-side cards, white + cream-alt
   ================================================================ */

.panel-strip {
  background: var(--cw);
  padding: 48px 0;
}
.panel-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 48px 32px;
  max-width: 1280px;
  margin: 0 auto;
}
.panel-card {
  background: var(--w);
  border-radius: 14px;
  padding: 44px 40px;
}
.panel-card--alt {
  background: var(--cream);
}
.panel-card h2 {
  font: var(--ts-h2-w) var(--ts-h2-s)/1.12 var(--fh);
  color: var(--ink);
  margin-bottom: 12px;
}
.panel-card h3 {
  font: var(--ts-h3-w) var(--ts-h3-s)/var(--ts-h3-lh) var(--fh);
  color: var(--ink);
  margin-bottom: 12px;
}
.panel-card p {
  font-size: var(--ts-body-s);
  line-height: var(--ts-body-lh);
  color: var(--body);
  margin-bottom: 16px;
}
.panel-card .panel-img {
  border-radius: 10px;
  overflow: hidden;
  margin: 24px 0 8px;
}
.panel-card .panel-img img {
  width: 100%;
  height: auto;
  display: block;
}
.panel-caption {
  font: italic var(--ts-caption-w) var(--ts-caption-s)/var(--ts-caption-lh) var(--fb);
  color: var(--bl);
  text-align: center;
  margin-top: 8px;
}

/* ================================================================
   DARK SECTION
   ================================================================ */

.dark {
  background: var(--ink);
  color: var(--cream);
  padding: 64px 32px;
}
.dark .in {
  max-width: 1280px;
  margin: 0 auto;
}
.dark h2 {
  font: var(--ts-h2-w) var(--ts-h2-s)/var(--ts-px-lh) var(--fh);
  color: var(--cw);
  margin-bottom: 20px;
}
.dark .overline {
  color: var(--tl);
}
.dark .pull-quote {
  color: var(--sl);
  border-left-color: var(--td);
}
.dark .pull-quote cite {
  color: var(--sand);
}
.dark .btn-secondary {
  color: var(--tl);
  border-color: var(--td);
}
.dark .btn-secondary:hover {
  background: var(--td);
  color: var(--w);
  border-color: var(--td);
}
.dark .text-link {
  color: var(--tl);
  text-decoration-color: var(--td);
}
.dark .hr-diamond {
  background: rgba(181, 171, 160, 0.15);
}
.dark .hr-diamond::after {
  background: var(--ink);
  color: var(--td);
}
.dark p {
  max-width: 680px;
  font-size: var(--ts-body-s);
  line-height: var(--ts-body-lh);
  margin-bottom: 20px;
  color: var(--sand);
}

/* Dark chip variants — all 6 categories */
.dark .chip-events {
  background: rgba(196, 117, 91, 0.15);
  color: var(--trl);
}
.dark .chip-dining {
  background: rgba(103, 166, 164, 0.15);
  color: var(--tl);
}
.dark .chip-shopping {
  background: rgba(107, 97, 85, 0.12);
  color: var(--sl);
}
.dark .chip-history {
  background: rgba(42, 45, 62, 0.2);
  color: var(--sl);
}
.dark .chip-lodging {
  background: rgba(103, 166, 164, 0.12);
  color: var(--tl);
}
.dark .chip-tours {
  background: rgba(196, 117, 91, 0.12);
  color: var(--trl);
}
.dark .chip-art {
  background: rgba(103, 166, 164, 0.15);
  color: var(--tl);
}
.dark .chip-music {
  background: rgba(42, 45, 62, 0.2);
  color: var(--sl);
}
.dark .chip-food {
  background: rgba(196, 117, 91, 0.15);
  color: var(--trl);
}
.dark .chip-community {
  background: rgba(107, 97, 85, 0.12);
  color: var(--sl);
}

/* ================================================================
   ACCENT BANDS
   ================================================================ */

.band {
  padding: 52px 32px;
  text-align: center;
  color: var(--w);
}
.band h3 {
  font: var(--ts-band-w) var(--ts-band-s)/var(--ts-band-lh) var(--fh);
  margin-bottom: 10px;
}
.band p {
  max-width: 460px;
  margin: 0 auto 20px;
  font-size: var(--ts-nav-s);
  line-height: 1.5;
  opacity: 0.9;
}
.band .btn {
  background: var(--w);
  border-color: var(--w);
  border-radius: 10px;
}
.band-t {
  background: var(--teal);
}
.band-t .btn {
  color: var(--td);
}
.band-t .btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--w);
}
.band-r {
  background: var(--terra);
}
.band-r .btn {
  color: var(--trd);
}
.band-r .btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--w);
}

/* ================================================================
   MEDIA SHOWCASE — rounded card with image/video + play overlay
   ================================================================ */

.media-showcase {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.media-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--sl);
  cursor: pointer;
}
.media-card img,
.media-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.media-card:hover img,
.media-card:hover video {
  transform: scale(1.02);
}
.media-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.media-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(20, 24, 39, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--w);
  font: 600 var(--ts-small-s)/1 var(--fb);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.media-play-btn:hover {
  background: rgba(20, 24, 39, 0.8);
  transform: scale(1.05);
}
.media-play-btn svg {
  width: 20px;
  height: 20px;
}
.media-caption {
  font: italic var(--ts-caption-w) var(--ts-caption-s)/var(--ts-caption-lh) var(--fb);
  color: var(--bl);
  text-align: center;
  margin-top: 12px;
}

/* ================================================================
   CARDS
   ================================================================ */

.card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(20, 24, 39, 0.07);
  background: var(--w);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(20, 24, 39, 0.12);
}
.card:active {
  transform: translateY(-2px);
}
.card-img {
  height: 200px;
  position: relative;
  overflow: hidden;
}
.card-img-bg {
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover .card-img-bg {
  transform: scale(1.06);
}
.card-img .chip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}
.card-bd {
  padding: 20px 22px;
}
.card-bd h4 {
  font: var(--ts-h4-w) var(--ts-h4-s)/1.2 var(--fh);
  color: var(--ink);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.card-bd p {
  font-size: var(--ts-h5-s);
  margin-bottom: 14px;
  line-height: var(--ts-caption-lh);
}

/* Card footer */
.card-ft {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 2px solid var(--cream);
}
.card-ft .m {
  font: var(--ts-micro-md-w) var(--ts-micro-md-s)/var(--ts-micro-md-lh) var(--fb);
  color: var(--bl);
  letter-spacing: 0.04em;
}

.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ================================================================
   CONTENT CARDS (events, articles, etc.)
   ================================================================ */

.callout {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(20, 24, 39, 0.07);
  background: var(--w);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.callout:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(20, 24, 39, 0.1);
}
.callout:active {
  transform: translateY(-1px);
}
.callout p {
  font-size: var(--ts-h5-s);
  line-height: var(--ts-caption-lh);
  margin-bottom: 12px;
}
.callout li {
  font-size: var(--ts-h5-s);
  line-height: var(--ts-caption-lh);
}

/* Callout card internals */
.callout-body {
  padding: 28px 28px 20px;
}
.callout h4 {
  font: var(--ts-h4-w) var(--ts-h4-s)/1.25 var(--fh);
  color: var(--ink);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.callout-icon {
  font-size: 32px;
  margin-bottom: 12px;
  line-height: 1;
}
.callout-sub {
  font: 600 var(--ts-small-s)/1.4 var(--fb);
  color: var(--bl);
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.callout-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px;
  border-top: 1px solid var(--cream);
}
.callout-footer .chip {
  font-size: var(--ts-micro-lg-s);
  padding: 2px 10px;
}

/* Callout card grids */
.callout-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.callout-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Callout card colored-top-border variants */
.callout--teal {
  border-top: 4px solid var(--teal);
}
.callout--terra {
  border-top: 4px solid var(--terra);
}
.callout--ink {
  border-top: 4px solid var(--ink);
}

/* Callout card list styling */
.callout ul {
  list-style: none;
  padding: 0;
}
.callout ul li {
  padding: 4px 0;
  padding-left: 18px;
  position: relative;
}
.callout ul li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
}
.callout--terra ul li::before {
  color: var(--terra);
}
.callout--ink ul li::before {
  color: var(--sand);
}

/* Dark section callout card variants */
.dark .callout {
  background: var(--inks);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.dark .callout:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}
.dark .callout h4 {
  color: var(--cw);
}
.dark .callout p {
  color: var(--sand);
  max-width: none;
}
.dark .callout li {
  color: var(--sand);
}
.dark .callout-sub {
  color: var(--sand);
}
.dark .callout-footer {
  border-top-color: rgba(181, 171, 160, 0.15);
}
.dark .callout--teal {
  border-top-color: var(--tl);
}
.dark .callout--terra {
  border-top-color: var(--trl);
}
.dark .callout--ink {
  border-top-color: var(--sand);
}

/* panel-caption: defined above (italic Poppins, bl color) — do not duplicate */

/* ================================================================
   EVENTS — from wireframe, themed with OTABQ tokens
   ================================================================ */

/* --- HERO SPOTLIGHT (editorial: image + dark info) --- */
.ev-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ev-hero-image {
  position: relative;
  min-height: 400px;
  background: var(--sl);
  overflow: hidden;
}
.ev-hero-image .placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 var(--ts-small-s)/1 var(--fb);
  color: var(--bl);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ev-hero-badge-sig {
  position: absolute;
  top: 16px;
  left: 16px;
  font: 600 var(--ts-micro-md-s)/1 var(--fb);
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--terra);
  color: var(--w);
}
.ev-hero-badge-date {
  position: absolute;
  bottom: 16px;
  left: 16px;
}
.ev-hero-info {
  background: var(--ink);
  color: var(--cream);
  padding: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ev-hero-info .overline {
  font: 600 var(--ts-ui-s)/1 var(--fb);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 8px;
}
.ev-hero-info h1 {
  font: 700 clamp(28px, 4vw, 44px)/1.15 var(--fh);
  color: var(--cream);
  margin-bottom: 16px;
}
.ev-hero-info .venue {
  font-size: var(--ts-hero-sub-s);
  margin-bottom: 4px;
  color: var(--sand);
}
.ev-hero-info .venue a {
  color: var(--cream);
  text-decoration: underline;
}
.ev-hero-info .datetime {
  font-size: var(--ts-small-s);
  color: var(--sand);
  margin-bottom: 24px;
}
.ev-hero-info .description {
  font-size: var(--ts-caption-s);
  line-height: 1.7;
  color: var(--sand);
  margin-bottom: 24px;
  max-width: 440px;
  opacity: 1;
}
.ev-hero-info .actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

/* --- DIVIDER BAR --- */
.divider-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--td), var(--teal), var(--tl));
}

/* --- PRICE --- */
.price {
  display: inline-block;
  font: 600 var(--ts-micro-lg-s)/1 var(--fb);
  padding: 4px 10px;
  border-radius: 6px;
}
.price.free {
  background: var(--tag-free-bg);
  color: var(--tag-free-fg);
}
.price.paid {
  background: var(--trb);
  color: var(--trd);
}

/* --- FEED --- */
.feed {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px;
}
.feed-header {
  margin-bottom: 40px;
}
.feed-header h2 {
  font: 700 clamp(24px, 3.5vw, 40px)/1.15 var(--fh);
  color: var(--ink);
  margin-bottom: 16px;
}
.feed-intro {
  font: 400 clamp(15px, 1.8vw, 17px)/1.7 var(--fb);
  color: var(--body);
  max-width: 640px;
  margin-bottom: 20px;
}
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-bar .btn-sm.is-active {
  background: var(--teal);
  color: var(--w);
  border-color: var(--teal);
}

/* Filter buttons use chip colors as background when active */
.filter-bar .btn-filter {
  border-radius: 20px;
  padding: 8px 20px;
  font-weight: 500;
  font-size: 14px;
  background: transparent;
  border: 1.5px solid var(--sl);
  color: var(--ink);
  cursor: pointer;
  transition: all 200ms ease;
}
.filter-bar .btn-filter:hover {
  border-color: var(--bl);
}
.filter-bar .btn-filter.is-active {
  border-color: transparent;
}
/* When active, each chip-class button gets its own chip background+color */
.filter-bar .btn-filter.is-active.chip-music {
  background: var(--chip-history-bg);
  color: var(--chip-history-fg);
  border-color: transparent;
}
.filter-bar .btn-filter.is-active.chip-art {
  background: var(--tm);
  color: var(--td);
  border-color: transparent;
}
.filter-bar .btn-filter.is-active.chip-events {
  background: var(--chip-event-bg);
  color: var(--chip-event-fg);
  border-color: transparent;
}
.filter-bar .btn-filter.is-active.chip-food {
  background: var(--trb);
  color: var(--trd);
  border-color: transparent;
}
.filter-bar .btn-filter.is-active.chip-community {
  background: var(--chip-shopping-bg);
  color: var(--chip-shopping-fg);
  border-color: transparent;
}
/* "All" button uses teal when active */
.filter-bar .btn-filter.is-active:not([class*="chip-"]) {
  background: var(--teal);
  color: var(--w);
  border-color: transparent;
}

/* --- MONTH HEADER --- */
.month-header {
  padding-top: 40px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--ink);
}
.month-header h3 {
  font: 700 var(--ts-h4-s)/1.4 var(--fh);
  color: var(--ink);
  padding-bottom: 10px;
}
.month-header h3 span {
  font-weight: 400;
  font-size: var(--ts-small-s);
  color: var(--bl);
  margin-left: 6px;
}

/* --- SIGNATURE EVENT (in-feed editorial) --- */
.sig-event {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(20, 24, 39, 0.07);
  margin-bottom: 24px;
  transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sig-event:hover {
  box-shadow: 0 16px 40px rgba(20, 24, 39, 0.11);
}
.sig-image {
  position: relative;
  min-height: 280px;
  background: var(--sl);
  overflow: hidden;
}
.sig-image .placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 var(--ts-micro-lg-s)/1 var(--fb);
  color: var(--bl);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sig-image .ev-hero-badge-sig {
  position: absolute;
  top: 16px;
  left: 16px;
}
.sig-image .date-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
}
.sig-info {
  background: var(--ink);
  color: var(--cream);
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sig-info .overline {
  font: 600 var(--ts-micro-lg-s)/1 var(--fb);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 8px;
}
.sig-info h3 {
  font: 700 clamp(20px, 2.5vw, 30px)/1.2 var(--fh);
  color: var(--cream);
  margin-bottom: 8px;
}
.sig-info .venue {
  font-size: var(--ts-small-s);
  color: var(--sand);
  margin-bottom: 4px;
}
.sig-info .venue a {
  color: var(--cream);
}
.sig-info .datetime {
  font-size: var(--ts-ui-s);
  color: var(--sand);
  margin-bottom: 16px;
}
.sig-info .description {
  font-size: var(--ts-hero-sub-s);
  line-height: 1.6;
  color: var(--sand);
  margin-bottom: 16px;
  max-width: 380px;
}
.sig-info .meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* --- REGULAR EVENT CARD --- */
.ev-card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(20, 24, 39, 0.07);
  background: var(--w);
  margin-bottom: 16px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ev-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(20, 24, 39, 0.11);
}
.ev-card:active {
  transform: translateY(-1px);
}

/* Desktop 3-col grid */
.ev-desktop {
  display: grid;
  grid-template-columns: 80px 1fr 160px;
  min-height: 160px;
}
.ev-desktop.no-poster {
  grid-template-columns: 80px 1fr;
}

/* When column */
.ev-when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  gap: 6px;
  border-right: 1px solid var(--sl);
}
.ev-when .time {
  font: 500 var(--ts-micro-lg-s)/1.2 var(--fb);
  color: var(--bl);
  text-align: center;
}
.ev-when .day-label {
  font: 400 var(--ts-micro-s)/1 var(--fb);
  color: var(--sand);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Info column */
.ev-info {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ev-info h4 {
  font: 600 var(--ts-event-title-s)/1.2 var(--fh);
  color: var(--body);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ev-info .venue {
  font-size: var(--ts-small-s);
  margin-bottom: 4px;
}
.ev-info .venue a {
  font-size: var(--ts-small-s);
}
.ev-info .venue span {
  color: var(--bl);
  font-size: var(--ts-ui-s);
}
.ev-info .description {
  font-size: var(--ts-small-s);
  color: var(--bl);
  line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ev-info .meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Recurrence */
.ev-recurrence {
  font: 500 var(--ts-micro-s)/1.3 var(--fb);
  color: var(--td);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.ev-recurrence::before {
  content: "\21BB ";
}

/* Poster column */
.ev-poster {
  background: var(--sl);
  min-height: 160px;
  position: relative;
  overflow: hidden;
}
.ev-poster .placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 var(--ts-micro-s)/1 var(--fb);
  color: var(--bl);
  text-transform: uppercase;
}

/* Mobile layout */
.ev-mobile {
  display: none;
}

/* --- SUBSCRIBE BAND --- */
.subscribe-band {
  padding: 52px 24px;
  text-align: center;
  background: var(--teal);
  color: var(--w);
}
.subscribe-band h3 {
  font: 700 clamp(22px, 3vw, 34px)/1.2 var(--fh);
  margin-bottom: 8px;
}
.subscribe-band p {
  max-width: 400px;
  margin: 0 auto 16px;
  font-size: var(--ts-hero-sub-s);
  line-height: 1.5;
  opacity: 0.85;
}

/* --- LOAD MORE --- */
.load-more {
  text-align: center;
  padding: 40px 0 16px;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 900px) {
  .ev-hero {
    grid-template-columns: 1fr;
  }
  .ev-hero-image {
    min-height: 280px;
    aspect-ratio: 4/3;
  }
  .sig-event {
    grid-template-columns: 1fr;
  }
  .sig-image {
    min-height: 220px;
    aspect-ratio: 4/3;
  }
}

@media (max-width: 800px) {
  .ev-desktop {
    display: none !important;
  }
  .ev-mobile {
    display: flex;
    gap: 12px;
    padding: 16px;
    align-items: flex-start;
  }

  .ev-mob-thumb {
    width: 80px;
    min-width: 80px;
    height: 110px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--sl);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ev-mob-thumb span {
    font: 400 8px/1 var(--fb);
    color: var(--bl);
    text-transform: uppercase;
  }

  .ev-mob-body {
    flex: 1;
    min-width: 0;
  }
  .ev-mob-body h4 {
    font: 600 var(--ts-h5-s)/1.2 var(--fh);
    color: var(--body);
    margin-bottom: 3px;
  }
  .ev-mob-body .venue {
    font-size: var(--ts-ui-s);
    margin-bottom: 6px;
  }
  .ev-mob-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }
  .ev-mob-meta .date-badge {
    width: 42px;
    min-height: 50px;
  }
  .ev-mob-meta .date-badge .dy {
    font-size: 18px;
  }
  .ev-mob-meta .time {
    font: 500 var(--ts-micro-md-s)/1.2 var(--fb);
    color: var(--bl);
  }
  .ev-mob-meta .day-label {
    font: 400 9px/1 var(--fb);
    color: var(--sand);
    text-transform: uppercase;
  }
  .ev-mob-body .description {
    font-size: var(--ts-ui-s);
    margin-bottom: 8px;
  }
  .ev-mob-body .meta {
    margin-top: 6px;
  }

  .ev-hero-image {
    aspect-ratio: 1/1;
    min-height: auto;
  }
  .ev-hero-info {
    padding: 24px;
  }
  .sig-info {
    padding: 24px 16px;
  }
  .feed {
    padding: 24px 16px;
  }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 24px;
  }
  .footer-bar {
    padding: 16px 24px;
  }
}

/* ================================================================
   EVENTS PAGE — Feed & Detail Enhancements
   Promoted from events-page.html and events-detail.html mockups.
   ================================================================ */

/* ----------------------------------------------------------------
   FEED PAGE — Hero overrides
   Base .hero-cat is 65vh / align-items: flex-end (otabq.css:1095-1098)
   Events page uses a trimmed hero: 40vh, centered content.
   ---------------------------------------------------------------- */
.events-hero {
  min-height: calc(50vh - 100px);
  align-items: flex-end;
  padding-bottom: 48px;
}
.events-hero-content {
  padding-top: 0;
}
.events-hero-sub {
  letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------
   FEED PAGE — Event card info overrides
   ---------------------------------------------------------------- */
.ev-info h4 {
  font: 700 clamp(20px, 2.5vw, 30px) / 1.2 var(--fh);
  margin-bottom: 2px;
}
.ev-info {
  padding: 24px 28px;
  gap: 6px;
  justify-content: flex-start;
}
.ev-info .description {
  font: 400 17px / 1.6 var(--fb);
  color: var(--body);
  margin-bottom: 8px;
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

/* --- Venue row — larger, inline with category chip --- */
.ev-info .venue,
.ev-info .venue a {
  font-size: 16px;
}
.ev-info .venue {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.ev-info .venue .chip {
  flex-shrink: 0;
}
/* Venue link styling — teal colored, larger font */
.ev-info .venue .venue-link,
.ev-mob-body .venue .venue-link {
  color: var(--teal);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.sig-info .venue .venue-link {
  color: var(--cream);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.ev-info .venue a,
.ev-mob-body .venue a {
  text-decoration: none;
}
.ev-info .venue a:hover,
.ev-mob-body .venue a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* --- .ev-subtitle — italic sub-headline below event title --- */
.ev-info .ev-subtitle {
  font: 400 15px / 1.4 var(--fb);
  color: var(--bl);
  font-style: italic;
  margin-bottom: 2px;
}

/* --- Time/day in when column — scaled up --- */
.ev-when .time {
  font-size: 14px;
  font-weight: 600;
}
.ev-when .day-label {
  font-size: 12px;
}

/* --- Flexible image layout for ev-card --- */
.ev-desktop {
  grid-template-columns: 120px 1fr auto;
  min-height: auto;
}

/* --- Bigger date badge in the when column --- */
.ev-when {
  padding: 20px 10px;
  padding-top: 24px;
  gap: 8px;
  justify-content: flex-start;
}
.ev-when .date-badge {
  width: 82px;
  min-height: 86px;
  border-radius: 14px;
}
.ev-when .date-badge .mo {
  font-size: 15px;
  letter-spacing: 0.12em;
}
.ev-when .date-badge .dy {
  font-size: 40px;
}
.ev-when .price {
  margin-top: 2px;
}

/* --- Poster — show full image, no cropping --- */
.ev-poster {
  min-height: auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--cream);
  position: relative;
}
.ev-poster img {
  display: block;
  width: auto;
  height: auto;
  max-width: 360px;
  max-height: 420px;
  object-fit: contain;
  border-radius: 0;
}
@media (max-width: 1100px) {
  .ev-poster img {
    max-width: 280px;
    max-height: 340px;
  }
}
@media (max-width: 960px) {
  .ev-poster img {
    max-width: 200px;
    max-height: 260px;
  }
}

/* --- .ev-poster::after — inner shadow for print-on-paper depth --- */
.ev-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 20px rgba(20, 24, 39, 0.08);
  pointer-events: none;
  z-index: 1;
}

/* --- .ev-recur-label — recurrence indicator under date badge --- */
.ev-recur-label {
  font: 500 11px/1 var(--fb);
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 4px 8px;
  background: rgba(103, 166, 164, 0.1);
  border-radius: 6px;
}

/* --- .ev-duration — multi-day dot track under date badge --- */
.ev-duration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
}
.ev-duration .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sl);
}
.ev-duration .dot.filled {
  background: var(--terra);
}
.ev-duration .dot.today {
  background: var(--teal);
}
.ev-duration .ellipsis {
  font: 600 10px/1 var(--fb);
  color: var(--sl);
  letter-spacing: -1px;
}
.ev-range {
  font: 500 11px/1 var(--fb);
  color: var(--bl);
  text-align: center;
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* --- .meta .text-link — compact size for meta rows --- */
.meta .text-link {
  font: 500 15px / 1 var(--fb);
  text-decoration-thickness: 1px;
}

/* --- Salient-style gradient underline on ev-info Read More --- */
.ev-info .meta .text-link {
  text-decoration: none;
  background-repeat: no-repeat;
  background-size: 0 1.5px;
  background-image: linear-gradient(to right, var(--teal) 0, var(--teal) 100%);
  background-position: left bottom;
  transition: background-size 0.55s cubic-bezier(0.2, 0.75, 0.5, 1);
  padding-bottom: 2px;
}
.ev-info .meta .text-link:hover {
  background-size: 100% 1.5px;
}

/* --- Poppins font-family for all event card body text --- */
.ev-info .venue,
.ev-info .venue a,
.ev-info .venue span,
.ev-info .description,
.ev-info .meta,
.ev-info .meta .text-link,
.ev-info .meta .price,
.ev-when .time,
.ev-when .day-label,
.ev-mob-body .venue,
.ev-mob-body .venue a,
.ev-mob-body .description,
.ev-mob-body .meta,
.ev-mob-meta .time,
.ev-mob-meta .day-label,
.sig-info .venue,
.sig-info .venue a,
.sig-info .datetime,
.sig-info .description,
.sig-info .meta,
.sig-info .meta .text-link,
.sig-info .meta .price,
.month-header h3,
.month-header h3 span,
.date-badge .mo,
.date-badge .dy {
  font-family: var(--fb);
}

/* ----------------------------------------------------------------
   FEED PAGE — Card link wrappers
   SSR renders cards as <a> tags for full-card clickability.
   Reset link defaults so card styles (bg, shadow, radius) apply.
   ---------------------------------------------------------------- */
a.ev-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.sig-event {
  display: grid;
  text-decoration: none;
  color: inherit;
}

/* ----------------------------------------------------------------
   FEED PAGE — Card hover animations
   H2 (card lift, 200ms ease-out-cubic) + H1 (image zoom, 400ms ease-out-quart)
   ---------------------------------------------------------------- */
.ev-card {
  cursor: pointer;
}
.ev-card .ev-poster img {
  transform: scale(1);
  transition:
    transform 400ms cubic-bezier(0.25, 1, 0.5, 1),
    border-radius 400ms cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
.ev-card.is-visible:hover,
.sig-event.is-visible:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(20, 24, 39, 0.13);
  transition:
    transform 200ms cubic-bezier(0.33, 1, 0.68, 1),
    box-shadow 200ms cubic-bezier(0.33, 1, 0.68, 1);
}
.ev-card:hover .ev-poster img {
  transform: scale(0.88);
  border-radius: 10px;
}
.ev-card.is-visible:active,
.sig-event.is-visible:active {
  transform: translateY(-1px) scale(0.995);
}

/* ----------------------------------------------------------------
   FEED PAGE — Scroll-triggered entrance (S1 fade-up, 80ms stagger)
   Cards start invisible; JS adds .is-visible on intersect.
   Shadow starts transparent and fades in with the card.
   Hover transitions are on :hover so they don't conflict.
   ---------------------------------------------------------------- */
.ev-card,
.sig-event {
  opacity: 0;
  transform: translateY(30px);
  box-shadow: 0 0 0 transparent;
}
.ev-card.is-visible,
.sig-event.is-visible {
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(20, 24, 39, 0.07);
  transition:
    opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------------------------
   FEED PAGE — Signature event overrides
   Base .sig-event is 1fr 1fr grid (otabq.css:1987)
   Events page uses 40%/1fr for wider info panel.
   ---------------------------------------------------------------- */
.sig-event {
  grid-template-columns: 40% 1fr;
  cursor: pointer;
  transition:
    transform 200ms cubic-bezier(0.33, 1, 0.68, 1),
    box-shadow 200ms cubic-bezier(0.33, 1, 0.68, 1);
}
.sig-image {
  aspect-ratio: 4/5;
  min-height: auto;
}
.sig-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition:
    transform 400ms cubic-bezier(0.25, 1, 0.5, 1),
    border-radius 400ms cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
.sig-image::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 20px rgba(20, 24, 39, 0.08);
  pointer-events: none;
  z-index: 1;
}
.sig-event:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(20, 24, 39, 0.13);
}
.sig-event:hover .sig-image img {
  transform: scale(0.88);
  border-radius: 10px;
}
.sig-event:active {
  transform: translateY(-1px) scale(0.995);
}

/* --- Sig-info — scaled up for portrait card layout --- */
.sig-info {
  padding: 48px 44px;
  justify-content: center;
  gap: 0;
}
.sig-info .overline {
  font: 600 12px/1 var(--fb);
  letter-spacing: 0.14em;
  margin-bottom: 14px;
  color: var(--terra);
}
.sig-info h3 {
  font: 700 clamp(28px, 3vw, 42px) / 1.12 var(--fh);
  margin-bottom: 10px;
  width: fit-content;
  background-repeat: no-repeat;
  background-size: 0 3px;
  background-image: linear-gradient(to right, var(--terra) 0, var(--terra) 100%);
  background-position: left bottom;
  transition: background-size 0.55s cubic-bezier(0.2, 0.75, 0.5, 1);
  padding-bottom: 6px;
}
.sig-event:hover .sig-info h3 {
  background-size: 100% 3px;
}

/* --- .ev-subtitle on sig-info — italic with highlight sweep on hover --- */
.sig-info .ev-subtitle {
  font: 400 17px / 1.4 var(--fb);
  color: var(--sand);
  font-style: italic;
  margin: 14px 0 16px;
  width: fit-content;
  background-repeat: no-repeat;
  background-size: 0 40%;
  background-image: linear-gradient(
    to right,
    rgba(193, 110, 76, 0.15) 0,
    rgba(193, 110, 76, 0.15) 100%
  );
  background-position: left 90%;
  transition: background-size 0.9s cubic-bezier(0.15, 0.75, 0.4, 1);
  display: inline;
}
.sig-event:hover .sig-info .ev-subtitle {
  background-size: 100% 40%;
}

/* --- Sig-info venue — divider line, larger font --- */
.sig-info .venue {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(181, 171, 160, 0.15);
}
.sig-info .venue a {
  font-size: 16px;
  color: var(--cream);
  font-weight: 500;
  text-decoration: none;
}
.sig-info .venue a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.sig-info .venue .chip {
  flex-shrink: 0;
}

/* --- Sig-info datetime — bolder, more distinct --- */
.sig-info .datetime {
  font: 600 14px/1 var(--fb);
  color: var(--cream);
  letter-spacing: 0.03em;
  margin-bottom: 20px;
  padding: 10px 0;
  opacity: 0.85;
}

/* --- Sig-info description — lighter, no max-width clamp --- */
.sig-info .description {
  font: 400 16px / 1.7 var(--fb);
  max-width: none;
  color: var(--sand);
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
  margin-bottom: 24px;
}

/* --- Sig-info price pill and Read More link --- */
.sig-info > .price {
  margin: 6px 0;
  align-self: flex-start;
}
.sig-info .meta .text-link {
  text-decoration: none;
  font: 600 15px / 1 var(--fb);
  color: var(--cream);
  letter-spacing: 0.02em;
  background-repeat: no-repeat;
  background-size: 0 1.5px;
  background-image: linear-gradient(to right, var(--terra) 0, var(--terra) 100%);
  background-position: left bottom;
  transition: background-size 0.55s cubic-bezier(0.2, 0.75, 0.5, 1);
  padding-bottom: 3px;
}
.sig-info .meta .text-link:hover {
  background-size: 100% 1.5px;
}

/* --- Dots on dark sig-info background --- */
.sig-info .ev-duration .dot {
  background: rgba(255, 255, 255, 0.25);
}
.sig-info .ev-duration .dot.filled {
  background: var(--sand);
}
.sig-info .ev-duration .ellipsis {
  color: rgba(255, 255, 255, 0.25);
}

/* ----------------------------------------------------------------
   FEED PAGE — Signature date overlays
   ---------------------------------------------------------------- */

/* --- .sig-date-price — date + price cluster on sig image --- */
.sig-date-price {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.sig-date-price .price {
  font-size: 13px;
  padding: 5px 12px;
}
.sig-image .sig-date-price .date-badge {
  position: static;
  bottom: auto;
  left: auto;
  width: 52px;
  min-height: 56px;
  flex-shrink: 0;
}

/* --- .sig-date-dash — dash between two date badges --- */
.sig-date-dash {
  font: 700 24px/1 var(--fh);
  color: var(--w);
  flex-shrink: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* --- .sig-date-strip — multi-day date strip across sig image --- */
.sig-date-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: linear-gradient(transparent, rgba(20, 24, 39, 0.7));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sig-date-strip .price {
  font-size: 12px;
  padding: 4px 10px;
  flex-shrink: 0;
}
.sig-date-strip-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
.strip-mo {
  font: 700 10px/1 var(--fb);
  color: var(--sand);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 2px;
  flex-shrink: 0;
}
.strip-day {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  font: 600 13px/32px var(--fb);
  text-align: center;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.strip-day.past {
  opacity: 0.35;
}
.strip-day.today {
  background: var(--teal);
  color: var(--w);
  box-shadow:
    0 0 0 2px var(--w),
    0 0 12px rgba(103, 166, 164, 0.5);
}

/* ----------------------------------------------------------------
   DETAIL PAGE — Unified card container
   Wraps hero + panel-pair + footer CTA into a single card
   with flush internal edges and shared border-radius.
   ---------------------------------------------------------------- */
.ev-unified-card {
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(20, 24, 39, 0.07);
  background: var(--cw);
}
.ev-detail-hero {
  min-height: 480px;
}
.ev-unified-card .hero {
  border-radius: 0;
}
.ev-unified-card .panel-card {
  border-radius: 0;
}
.ev-unified-card .panel-pair {
  max-width: none;
  padding: 0;
  gap: 0;
  grid-template-columns: 7fr 3fr;
}
/* Constrain WordPress-imported headings in the about panel */
.ev-unified-card .panel-card h1,
.ev-unified-card .panel-card h2,
.ev-unified-card .panel-card h3,
.ev-unified-card .panel-card h4 {
  font: 600 clamp(17px, 1.8vw, 21px) / 1.3 var(--fb);
  color: var(--ink);
  margin: 20px 0 8px;
}
.ev-unified-card .panel-card h1:first-child,
.ev-unified-card .panel-card h2:first-child,
.ev-unified-card .panel-card h3:first-child {
  margin-top: 0;
}
.ev-unified-card .panel-card p {
  font: 400 15px/1.7 var(--fb);
  color: var(--body);
  margin-bottom: 12px;
}
.ev-unified-card .panel-card ul,
.ev-unified-card .panel-card ol {
  font: 400 15px/1.7 var(--fb);
  color: var(--body);
  padding-left: 20px;
  margin-bottom: 12px;
}

/* --- Breadcrumb on dark/image backgrounds --- */
.breadcrumb-light {
  margin-bottom: 20px;
}
.breadcrumb-light a {
  color: rgba(255, 255, 255, 0.5);
}
.breadcrumb-light a:hover {
  color: rgba(255, 255, 255, 0.85);
}
.breadcrumb-light .breadcrumb-sep {
  color: rgba(255, 255, 255, 0.25);
}
.breadcrumb-light > span:last-child {
  color: rgba(255, 255, 255, 0.8);
}

/* --- Overline variants --- */
.overline-block {
  display: block;
  margin-bottom: 14px;
}
.overline-terra {
  display: block;
  margin-bottom: 20px;
  color: var(--terra);
}

/* --- Event metadata components --- */
.ev-meta-section {
  margin-bottom: 24px;
}
.ev-meta-section:last-child {
  margin-bottom: 0;
}
.ev-meta-label {
  font: 600 var(--ts-small-s)/1 var(--fb);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bl);
  margin-bottom: 10px;
}
.ev-meta-value {
  font: 400 var(--ts-nav-s)/1.5 var(--fb);
  color: var(--ink);
}
.ev-meta-value strong {
  font-weight: 600;
}

/* --- Calendar-style date block with icon + text --- */
.ev-date-block {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ev-date-icon {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--teal);
  color: var(--w);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ev-date-icon-month {
  font: 700 10px/1 var(--fb);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ev-date-icon-day {
  font: 700 22px/1 var(--fb);
  margin-top: 2px;
}
.ev-date-text {
  font: 400 var(--ts-nav-s)/1.4 var(--fb);
  color: var(--ink);
}

/* --- Free admission badge --- */
.ev-free-badge {
  display: inline-block;
  font: 700 var(--ts-small-s)/1 var(--fb);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--tm);
  padding: 6px 16px;
  border-radius: 8px;
}

/* --- Performer list with separator lines --- */
.ev-performers {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ev-performers li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--sl);
  font: 400 var(--ts-nav-s)/1.4 var(--fb);
  color: var(--ink);
}
.ev-performers li:last-child {
  border-bottom: none;
}
.ev-performer-role {
  font: 600 var(--ts-small-s)/1 var(--fb);
  letter-spacing: 0.04em;
  color: var(--bl);
}

/* --- Organizer attribution line --- */
.ev-organizer {
  font: 400 var(--ts-small-s)/1.4 var(--fb);
  color: var(--bl);
  margin-top: 20px;
}
.ev-organizer strong {
  font-weight: 600;
  color: var(--ink);
}

/* --- CTA group: map + buttons cluster --- */
.ev-cta-group {
  margin-top: 24px;
}
.ev-cta-secondary {
  margin-left: 16px;
}

/* --- Footer CTA bar inside the unified card --- */
.ev-footer-cta {
  text-align: center;
  padding: 40px 32px;
  border-top: 1px solid var(--sl);
}
.ev-footer-cta p {
  font: 400 var(--ts-caption-s)/1.5 var(--fb);
  color: var(--bl);
  margin-bottom: 16px;
}

/* ----------------------------------------------------------------
   SHARED — Footer tagline typography
   ---------------------------------------------------------------- */
.footer-tagline {
  font-size: var(--ts-h5-s);
  line-height: var(--ts-hero-body-lh);
}

/* ----------------------------------------------------------------
   EVENTS PAGE RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 900px) {
  .sig-event {
    grid-template-columns: 1fr;
  }
  .sig-image {
    aspect-ratio: 16/9;
    min-height: 220px;
  }
  .sig-info {
    padding: 32px 24px;
  }
  .ev-unified-card .panel-pair {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  /* Restate phone-size sig-info padding so earlier 800px rule
     is not overridden by the 900px block above. */
  .sig-info {
    padding: 24px 16px;
  }
}

@media (max-width: 600px) {
  .ev-detail-hero {
    min-height: clamp(280px, 50vh, 480px);
  }
  .ev-unified-card .hero-c {
    padding: 32px 20px;
  }
  /* Tighten events feed on mobile */
  .hero-cat.events-hero {
    min-height: 260px;
    padding-bottom: 0;
  }
  .hero-cat.events-hero .hero-c {
    padding: 0 20px 24px;
  }
  .feed {
    padding: 20px 16px;
  }
  .feed-header {
    margin-bottom: 20px;
  }
  .feed-header h2 {
    margin-bottom: 10px;
  }
  .filter-bar .btn-filter {
    padding: 6px 14px;
    font-size: 13px;
  }
  .month-header {
    padding-top: 24px;
    margin-bottom: 16px;
  }
}

/* ----------------------------------------------------------------
   EVENTS PAGE — prefers-reduced-motion
   Disables entrance animations and hover transforms.
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ev-card,
  .sig-event {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ev-card .ev-poster img {
    transition: none;
    transform: none;
  }
}

/* ================================================================
   CONTENT LIST
   ================================================================ */

.cl li {
  font-size: var(--ts-body-s);
  line-height: var(--ts-list-lh);
}

/* ================================================================
   MOSAIC
   ================================================================ */

.mos {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, 130px);
  gap: 6px;
}
.mi {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.mi-i {
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.mi:hover .mi-i {
  transform: scale(1.06);
}

.mi:nth-child(1) {
  grid-column: 1/6;
  grid-row: 1/3;
}
.mi:nth-child(2) {
  grid-column: 6/9;
}
.mi:nth-child(3) {
  grid-column: 9/13;
}
.mi:nth-child(4) {
  grid-column: 6/10;
  grid-row: 2/4;
}
.mi:nth-child(5) {
  grid-column: 10/13;
  grid-row: 2;
}
.mi:nth-child(6) {
  grid-column: 1/6;
  grid-row: 3;
}
.mi:nth-child(7) {
  grid-column: 10/13;
  grid-row: 3;
}

/* Mosaic gradient fills — using palette tokens where possible */
.m1 {
  background: var(--teal);
}
.m2 {
  background: var(--terra);
}
.m3 {
  background: var(--sand);
}
.m4 {
  background: var(--ink);
}
.m5 {
  background: var(--td);
}
.m6 {
  background: var(--trl);
}
.m7 {
  background: var(--inks);
}

/* Parallax strip */
.prlx {
  height: 240px;
  background: var(--ink);
  position: relative;
}
.prlx::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 39, 0.45);
}

/* ================================================================
   BUSINESS LISTING COMPONENTS
   ================================================================ */

/* Listing card — browse page */
.listing-card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(20, 24, 39, 0.07);
  background: var(--w);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.listing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(20, 24, 39, 0.12);
}
.listing-card:active {
  transform: translateY(-2px);
}
.listing-card-img {
  height: 180px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--tm), var(--sl));
}
.listing-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.listing-card:hover .listing-card-img img {
  transform: scale(1.06);
}
.listing-card-img .chip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}
.listing-card-body {
  padding: 20px 22px;
}
.listing-card-body h4 {
  font: var(--ts-h4-w) var(--ts-h4-s)/1.25 var(--fh);
  color: var(--ink);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.listing-card-body p {
  font-size: var(--ts-h5-s);
  line-height: var(--ts-caption-lh);
  color: var(--body);
  margin-bottom: 10px;
  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.listing-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--cream);
}
.listing-card-meta .location {
  font: var(--ts-micro-md-w) var(--ts-micro-md-s)/var(--ts-micro-md-lh) var(--fb);
  color: var(--bl);
  letter-spacing: 0.04em;
}

/* Open/Closed badges */
.open-badge,
.closed-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 var(--ts-micro-md-s)/var(--ts-micro-md-lh) var(--fb);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 6px;
}
.open-badge {
  background: var(--tag-free-bg);
  color: var(--tag-free-fg);
}
.open-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tag-free-fg);
}
.closed-badge {
  background: var(--trb);
  color: var(--trd);
}
.closed-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--trd);
}

/* Listing grid */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* Listing detail layout */
.listing-detail {
  max-width: 900px;
  margin: 0 auto;
}
.listing-detail-hero {
  height: 320px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 32px;
  background: linear-gradient(160deg, var(--tm), var(--sl));
  position: relative;
}
.listing-detail-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.listing-detail-info {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.listing-detail-info h1 {
  font: var(--ts-h2-w) var(--ts-h2-s)/var(--ts-band-lh) var(--fh);
  color: var(--ink);
  margin-bottom: 12px;
}
.listing-detail-info p {
  font-size: var(--ts-nav-s);
  line-height: var(--ts-body-lh);
  margin-bottom: 16px;
}
.listing-detail-sidebar {
  padding: 24px;
  background: var(--cream);
  border-radius: 14px;
  align-self: start;
}
.listing-detail-sidebar h5 {
  font: var(--ts-h5-w) var(--ts-h5-s)/1 var(--fh);
  letter-spacing: 0.04em;
  text-transform: capitalize;
  color: var(--ink);
  margin-bottom: 12px;
}

/* Hours table */
.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ts-small-s);
}
.hours-table td {
  padding: 6px 0;
  border-bottom: 1px solid var(--sl);
}
.hours-table td:first-child {
  font: var(--ts-small-w) var(--ts-small-s)/1.4 var(--fb);
  color: var(--ink);
  font-weight: 600;
}
.hours-table td:last-child {
  font: var(--ts-small-w) var(--ts-small-s)/1.4 var(--fb);
  color: var(--body);
  text-align: right;
}
.hours-table tr:last-child td {
  border-bottom: none;
}
.hours-table .today td {
  color: var(--teal);
  font-weight: 600;
}

/* Gallery grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.gallery-grid img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
}

/* Map placeholder */
.map-placeholder {
  height: 200px;
  border-radius: 14px;
  background: var(--tm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--td);
  font: var(--ts-small-w) var(--ts-small-s)/1 var(--fb);
}

/* ================================================================
   PAGINATION
   ================================================================ */

.pagination {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--body);
  font: 600 var(--ts-small-s)/1 var(--fb);
  cursor: pointer;
  transition: all 0.15s;
}
.page-btn:hover {
  background: var(--cream);
  color: var(--ink);
}
.page-btn.is-active {
  background: var(--ink);
  color: var(--w);
}
.page-btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}
.page-btn svg {
  width: 16px;
  height: 16px;
}

/* ================================================================
   FORMS
   ================================================================ */

.form-group {
  margin-bottom: 20px;
}

.label {
  display: block;
  font: var(--ts-ui-label-w) var(--ts-ui-label-s)/1 var(--fh);
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font: var(--ts-body-w) var(--ts-h5-s)/var(--ts-h5-lh) var(--fb);
  color: var(--ink);
  background: var(--w);
  border: 2px solid var(--sl);
  border-radius: 10px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.input::placeholder {
  color: var(--sand);
}
.input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(103, 166, 164, 0.15);
  outline: none;
}

.select {
  width: 100%;
  height: 48px;
  padding: 0 40px 0 16px;
  font: var(--ts-body-w) var(--ts-h5-s)/var(--ts-h5-lh) var(--fb);
  color: var(--ink);
  background: var(--w);
  border: 2px solid var(--sl);
  border-radius: 10px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b5aba0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(103, 166, 164, 0.15);
  outline: none;
}

.textarea {
  width: 100%;
  min-height: 120px;
  padding: 14px 16px;
  font: var(--ts-body-w) var(--ts-h5-s)/var(--ts-caption-lh) var(--fb);
  color: var(--ink);
  background: var(--w);
  border: 2px solid var(--sl);
  border-radius: 10px;
  resize: vertical;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.textarea::placeholder {
  color: var(--sand);
}
.textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(103, 166, 164, 0.15);
  outline: none;
}

.form-hint {
  display: block;
  margin-top: 6px;
  font: var(--ts-micro-md-w) var(--ts-micro-md-s)/1.4 var(--fb);
  color: var(--bl);
}

/* Error state */
.form-group.has-error .input,
.form-group.has-error .select,
.form-group.has-error .textarea {
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(196, 117, 91, 0.12);
}
.form-error {
  display: block;
  margin-top: 6px;
  font: 500 var(--ts-micro-md-s)/1.4 var(--fb);
  color: var(--trd);
}

/* Checkbox + Radio */
.checkbox,
.radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font: var(--ts-small-w) var(--ts-small-s)/1 var(--fb);
  color: var(--ink);
}
.checkbox input,
.radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.checkbox .check,
.radio .check {
  width: 20px;
  height: 20px;
  border: 2px solid var(--sl);
  background: var(--w);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.checkbox .check {
  border-radius: 6px;
}
.radio .check {
  border-radius: 50%;
}

.checkbox input:checked + .check {
  background: var(--teal);
  border-color: var(--teal);
}
.checkbox input:checked + .check::after {
  content: "";
  width: 6px;
  height: 10px;
  border: 2px solid var(--w);
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}
.radio input:checked + .check {
  border-color: var(--teal);
}
.radio input:checked + .check::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal);
}

/* Search input */
.search-input {
  position: relative;
}
.search-input .input {
  padding-left: 44px;
}
.search-input svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--sand);
  pointer-events: none;
}

/* Newsletter inline form */
.newsletter-form {
  display: flex;
  gap: 8px;
  max-width: 420px;
}
.newsletter-form .input {
  flex: 1;
  border-radius: 10px 0 0 10px;
}
.newsletter-form .btn {
  border-radius: 0 10px 10px 0;
  white-space: nowrap;
}
.newsletter-consent {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 var(--ts-small-s)/1.4 var(--fb);
  color: var(--tl);
  margin: 8px 0 0;
  max-width: 420px;
  cursor: pointer;
}

/* ================================================================
   LOADING / ERROR / EMPTY STATES
   ================================================================ */

/* Skeleton shimmer */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, var(--cream) 25%, var(--cw) 37%, var(--cream) 63%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

.skeleton-card {
  border-radius: 14px;
  overflow: hidden;
  background: var(--w);
  box-shadow: 0 4px 16px rgba(20, 24, 39, 0.07);
}
.skeleton-card-img {
  height: 180px;
  background: linear-gradient(90deg, var(--cream) 25%, var(--cw) 37%, var(--cream) 63%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-card-body {
  padding: 20px;
}
.skeleton-card-body .skeleton {
  height: 14px;
  margin-bottom: 10px;
}
.skeleton-card-body .skeleton:first-child {
  width: 70%;
  height: 20px;
}
.skeleton-card-body .skeleton:last-child {
  width: 50%;
}

/* Spinner */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--sl);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.spinner-sm {
  width: 18px;
  height: 18px;
  border-width: 2px;
}
.spinner-lg {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
}
.empty-state svg {
  width: 56px;
  height: 56px;
  color: var(--sand);
  margin-bottom: 16px;
}
.empty-state h3 {
  font: var(--ts-h4-w) var(--ts-h4-s)/1.3 var(--fh);
  color: var(--ink);
  margin-bottom: 8px;
}
.empty-state p {
  font-size: var(--ts-h5-s);
  color: var(--bl);
  max-width: 360px;
  margin-bottom: 20px;
}

/* Error state */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
}
.error-state svg {
  width: 56px;
  height: 56px;
  color: var(--terra);
  margin-bottom: 16px;
}
.error-state h3 {
  font: var(--ts-h4-w) var(--ts-h4-s)/1.3 var(--fh);
  color: var(--ink);
  margin-bottom: 8px;
}
.error-state p {
  font-size: var(--ts-h5-s);
  color: var(--bl);
  max-width: 360px;
  margin-bottom: 20px;
}

/* ================================================================
   TOAST / NOTIFICATIONS
   ================================================================ */

@keyframes toast-in {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes toast-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 10px;
  font: 500 var(--ts-small-s)/1 var(--fb);
  box-shadow: 0 8px 32px rgba(20, 24, 39, 0.18);
  animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.is-leaving {
  animation: toast-out 0.2s ease-in forwards;
}
.toast svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.toast--success {
  background: var(--ink);
  color: var(--w);
}
.toast--success svg {
  color: var(--tl);
}
.toast--error {
  background: var(--trd);
  color: var(--w);
}
.toast--error svg {
  color: var(--trl);
}

/* ================================================================
   FOOTER
   ================================================================ */

.footer {
  background: var(--cream);
  border-top: 2px solid var(--sl);
}
.footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: 48px 32px;
}
.footer-brand {
  font: var(--ts-nav-w) var(--ts-nav-s)/var(--ts-nav-lh) var(--fh);
  color: var(--ink);
  margin-bottom: 14px;
}
.footer-brand small {
  display: block;
  font: 500 var(--ts-micro-s)/1 var(--fh);
  letter-spacing: 0.18em;
  color: var(--sand);
  text-transform: capitalize;
  margin-top: 4px;
}
.footer h5 {
  font: var(--ts-h5-w) var(--ts-h5-s)/1 var(--fh);
  letter-spacing: 0.04em;
  text-transform: capitalize;
  color: var(--ink);
  margin-bottom: 14px;
}
.footer p {
  font-size: var(--ts-h5-s);
  line-height: 1.5;
  color: var(--body);
}
.footer ul {
  list-style: none;
}
.footer li {
  margin-bottom: 8px;
}
.footer a {
  font-size: var(--ts-h5-s);
  color: var(--body);
  transition: color 0.15s;
}
.footer a:hover {
  color: var(--teal);
}
.footer dt {
  font: 600 var(--ts-h5-s)/var(--ts-caption-lh) var(--fh);
  color: var(--ink);
}
.footer dd {
  font-size: var(--ts-h5-s);
  color: var(--body);
  margin-bottom: 8px;
}

/* Footer CTA — intentional 600 weight override on small size */
.footer-cta {
  font: 600 var(--ts-small-s)/1 var(--fb);
  color: var(--teal);
}

/* Footer bottom bar */
.footer-bar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 32px;
  border-top: 2px solid var(--sl);
  display: flex;
  justify-content: space-between;
  font: var(--ts-micro-md-w) var(--ts-micro-md-s)/1 var(--fb);
  color: var(--sand);
  letter-spacing: 0.04em;
}

/* Footer bottom small text — 12px italic 500 */
.footer-bottom small {
  font: italic 500 var(--ts-micro-lg-s)/1.4 var(--fb);
  color: var(--bl);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 900px) {
  .editorial,
  .split,
  .story-spread,
  .panel-pair {
    grid-template-columns: 1fr;
  }
  .card-grid-3,
  .callout-grid-3 {
    grid-template-columns: 1fr;
  }
  .callout-grid-2 {
    grid-template-columns: 1fr;
  }
  .g2,
  .g3,
  .g4,
  .g5,
  .g60 {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mos {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 100px);
  }
  .mos .mi {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .listing-detail-info {
    grid-template-columns: 1fr;
  }
  .listing-grid {
    grid-template-columns: 1fr;
  }
  .newsletter-form {
    flex-direction: column;
  }
  .newsletter-form .input {
    border-radius: 10px;
  }
  .newsletter-form .btn {
    border-radius: 10px;
  }
}

@media (max-width: 768px) {
  .card-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
  .callout-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
  .listing-grid {
    grid-template-columns: 1fr 1fr;
  }
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .nav-links {
    gap: 16px;
  }
  .sec {
    padding: 32px 24px;
  }
}

@media (max-width: 480px) {
  .sec {
    padding: 24px 16px;
  }
  .card-grid-3 {
    grid-template-columns: 1fr;
  }
  .editorial {
    grid-template-columns: 1fr;
  }
  .story-spread {
    grid-template-columns: 1fr;
  }
  .listing-grid {
    grid-template-columns: 1fr;
  }
  .hero-f {
    min-height: 400px;
  }
  .hero-f .hero-c {
    padding: 32px 24px;
  }
}

@media print {
  .nav,
  .nav-toggle,
  .nav-m,
  .skip-link {
    display: none;
  }
  .hero-f,
  .hero-p {
    min-height: auto;
  }
  .card:hover,
  .btn:hover {
    transform: none;
    box-shadow: none;
  }
  body {
    background: white;
    color: black;
    font-size: 12pt;
  }
  a {
    color: black;
    text-decoration: underline;
  }
  .footer {
    border-top: 1px solid #ccc;
  }
}

/* ================================================================
   BENTO GRID
   Asymmetric grid layout for value-prop, stats, and feature sections.
   Desktop: 3 columns. Tablet (<=900px): 2 columns. Mobile (<=600px): 1 column.
   ================================================================ */

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
}

.bento-cell {
  background: var(--w);
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(20, 24, 39, 0.07);
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.bento-cell:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(20, 24, 39, 0.12);
}
.bento-cell:active {
  transform: translateY(-1px);
}

/* ---- Span modifiers ---- */

.bento-cell--span-2 {
  grid-column: span 2;
}
.bento-cell--span-row {
  grid-row: span 2;
}
.bento-cell--span-2-row {
  grid-column: span 2;
  grid-row: span 2;
}

/* ---- Color variants ---- */

.bento-cell--accent {
  background: var(--tm);
}
.bento-cell--dark {
  background: var(--ink);
  color: var(--cream);
}
.bento-cell--dark .bento-stat .stat-label {
  color: var(--sl);
}
.bento-cell--dark .bento-stat .stat-number {
  color: var(--w);
}
.bento-cell--terra {
  background: var(--trb);
}
.bento-cell--img {
  padding: 0;
  overflow: hidden;
  min-height: 240px;
}
.bento-cell--img .bento-img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 240px;
  background: var(--sl);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--ts-caption-w) var(--ts-caption-s) / var(--ts-caption-lh) var(--fb);
  color: var(--bl);
}

/* ---- Stat pattern ---- */

.bento-stat {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
}
.bento-stat .stat-number {
  font: 700 clamp(48px, 5vw, 64px) / 1 var(--fh);
  color: var(--ink);
  letter-spacing: -0.02em;
}
.bento-stat .stat-unit {
  font: 700 clamp(28px, 3vw, 36px) / 1 var(--fh);
  color: var(--teal);
  vertical-align: super;
  margin-left: 2px;
}
.bento-stat .stat-label {
  font: var(--ts-caption-w) var(--ts-caption-s) / var(--ts-caption-lh) var(--fb);
  color: var(--body);
  margin-top: 12px;
}

/* Compact stat — used in "By the Numbers" dense grids */
.bento-stat--compact .stat-number {
  font-size: clamp(36px, 4vw, 48px);
}
.bento-stat--compact .stat-label {
  font-size: var(--ts-small-s);
  margin-top: 8px;
}

/* ---- Icon decoration ---- */

.bento-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 16px;
}

/* ---- Cell heading ---- */

.bento-heading {
  font: 700 var(--ts-pgsub-s) / var(--ts-pgsub-lh) var(--fh);
  color: var(--ink);
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---- Cell body text ---- */

.bento-text {
  font: var(--ts-caption-w) var(--ts-caption-s) / var(--ts-caption-lh) var(--fb);
  color: var(--body);
}

/* ---- Feature list inside a cell ---- */

.bento-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.bento-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: var(--ts-caption-w) var(--ts-caption-s) / var(--ts-caption-lh) var(--fb);
  color: var(--body);
}
.bento-list .li-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--w);
  font-size: 12px;
  margin-top: 2px;
}

/* ---- CTA button inside a cell ---- */

.bento-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 var(--ts-h5-s) / 1 var(--fb);
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 14px 28px;
  border-radius: 10px;
  letter-spacing: 0.01em;
  margin-top: auto;
  text-decoration: none;
}
.bento-cta--primary {
  background: var(--terra);
  color: var(--w);
  border-color: var(--terra);
}
.bento-cta--primary:hover {
  background: var(--trd);
  border-color: var(--trd);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(196, 117, 91, 0.3);
}
.bento-cta--teal {
  background: var(--teal);
  color: var(--w);
  border-color: var(--teal);
}
.bento-cta--teal:hover {
  background: var(--td);
  border-color: var(--td);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(103, 166, 164, 0.3);
}
.bento-cta--outline {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal);
}
.bento-cta--outline:hover {
  background: var(--teal);
  color: var(--w);
  transform: translateY(-2px);
}

/* ---- Tagline / quote inside dark cells ---- */

.bento-tagline {
  font: 600 var(--ts-sig-title-s) / var(--ts-sig-title-lh) var(--fh);
  color: var(--w);
  flex: 1;
  display: flex;
  align-items: center;
}
.bento-tagline em {
  font-style: italic;
  color: var(--tl);
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento-cell--span-2,
  .bento-cell--span-2-row {
    grid-column: span 2;
  }
  .bento-cell--span-row {
    grid-row: span 1;
  }
}

@media (max-width: 600px) {
  .bento {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .bento-cell--span-2,
  .bento-cell--span-2-row {
    grid-column: span 1;
  }
  .bento-cell--span-row,
  .bento-cell--span-2-row {
    grid-row: span 1;
  }
  .bento-cell {
    padding: 24px;
  }
  .bento-stat .stat-number {
    font-size: 40px;
  }
  .bento-stat .stat-unit {
    font-size: 24px;
  }
  .bento-tagline {
    font-size: clamp(20px, 5vw, 28px);
  }
}

/* ================================================================
   NEIGHBORHOOD PAGE — Sticky anchor nav, pricing, FAQ, tier cards
   ================================================================ */

/* ----------------------------------------------------------------
   STICKY ANCHOR NAV — hidden on load, slides in after hero
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   SECTION CONTAINER — consistent section padding for landing pages
   ---------------------------------------------------------------- */

.lp-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 32px;
}

/* ----------------------------------------------------------------
   TAG — paid variant (free variant exists above as .tag-free)
   ---------------------------------------------------------------- */

.tag-paid {
  background: #e8e8ec;
  color: var(--inks);
}

/* ----------------------------------------------------------------
   TIER CARDS — pricing tier display (map plans, etc.)
   ---------------------------------------------------------------- */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.tier-card {
  background: var(--w);
  border: 2px solid var(--sl);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.tier-card:hover {
  border-color: var(--teal);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(20, 24, 39, 0.1);
}
.tier-card--popular {
  border-color: var(--teal);
  box-shadow: 0 4px 20px rgba(103, 166, 164, 0.15);
}
.tier-card h4 {
  font: var(--ts-h4-w) var(--ts-h4-s)/1.2 var(--fh);
  color: var(--ink);
  margin-bottom: 4px;
}
.tier-card .tier-sub {
  font: var(--ts-small-w) var(--ts-small-s)/1.4 var(--fb);
  color: var(--bl);
  margin-bottom: 16px;
}
.tier-card .tier-price {
  font: 700 32px/1 var(--fh);
  color: var(--ink);
}
.tier-card .tier-price span {
  font: var(--ts-small-w) var(--ts-small-s)/1 var(--fb);
  color: var(--bl);
}
.tier-card .tier-detail {
  font: var(--ts-micro-md-w) var(--ts-micro-md-s)/1.4 var(--fb);
  color: var(--bl);
  margin-top: 8px;
}
.tier-card .tier-badge {
  display: inline-block;
  font: 600 var(--ts-micro-md-s)/1 var(--fb);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 6px;
  margin-top: 12px;
}
.tier-badge--popular {
  background: var(--tm);
  color: var(--td);
}
.tier-badge--limited {
  background: var(--trb);
  color: var(--trd);
}

@media (max-width: 900px) {
  .tier-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .tier-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin: 0 auto;
  }
}

/* ----------------------------------------------------------------
   PRICING TABLE — grouped rows with section headers
   ---------------------------------------------------------------- */

.price-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--ts-small-w) var(--ts-small-s)/1.6 var(--fb);
  color: var(--body);
}
.price-table th {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--sl);
  font: 600 var(--ts-small-s)/1 var(--fb);
  color: var(--ink);
}
.price-table td {
  padding: 12px 20px;
  background: var(--w);
  border-bottom: 1px solid var(--cream);
  vertical-align: top;
}
.price-table .price-group {
  background: var(--cream);
  font: 600 var(--ts-small-s)/1 var(--fb);
  color: var(--ink);
}
.price-table .price-group td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--sl);
}
.price-table .price-free {
  color: var(--tag-free-fg);
  font-weight: 600;
}
.price-table .price-muted td {
  color: var(--bl);
}

/* ----------------------------------------------------------------
   FAQ GRID — Q&A card pairs
   ---------------------------------------------------------------- */

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.faq-card {
  background: var(--w);
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: 0 2px 12px rgba(20, 24, 39, 0.05);
}
.faq-card h4 {
  font: 600 var(--ts-h5-s)/1.4 var(--fh);
  color: var(--ink);
  margin-bottom: 8px;
}
.faq-card p {
  font: var(--ts-small-w) var(--ts-small-s)/1.6 var(--fb);
  color: var(--body);
}

@media (max-width: 600px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------
   GOVERNANCE BOX — de-emphasized info card
   ---------------------------------------------------------------- */

.gov-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--cream);
  border-radius: 14px;
  padding: 28px 32px;
  margin-top: 24px;
}
.gov-box-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.gov-box h4 {
  font: 600 var(--ts-h5-s)/1 var(--fh);
  color: var(--ink);
  margin-bottom: 8px;
}
.gov-box p {
  font: var(--ts-small-w) var(--ts-small-s)/1.6 var(--fb);
  color: var(--body);
}

/* ----------------------------------------------------------------
   MAP COMPARISON — before/after on dark background
   ---------------------------------------------------------------- */

.map-compare {
  background: var(--ink);
  border-radius: 14px;
  padding: 32px;
  color: var(--cream);
}
.map-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.map-compare-cell {
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}
.map-compare-label {
  font: 600 var(--ts-micro-s)/1 var(--fb);
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.map-compare-listing {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px 14px;
  text-align: left;
  border-radius: 4px;
}
.map-compare-listing strong {
  display: block;
  font: 600 var(--ts-micro-md-s)/1.4 var(--fb);
  color: var(--cream);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.map-compare-listing span {
  font: var(--ts-micro-w) var(--ts-micro-s)/1.4 var(--fb);
  color: rgba(255, 255, 255, 0.4);
}
.map-compare-ad {
  display: inline-block;
  border: 2px dashed rgba(255, 255, 255, 0.15);
  padding: 14px 20px;
  margin-top: 10px;
  font: var(--ts-micro-w) var(--ts-micro-s)/1 var(--fb);
  color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

/* ----------------------------------------------------------------
   DASHBOARD MOCKUP — stylized preview of portal dashboard
   ---------------------------------------------------------------- */

.dash-mock {
  background: var(--cream);
  border-radius: 14px;
  padding: 24px;
}
.dash-mock-inner {
  background: var(--w);
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(20, 24, 39, 0.06);
}
.dash-mock h3 {
  font: 300 var(--ts-h4-s)/1.3 var(--fh);
  color: var(--ink);
  margin-bottom: 6px;
}
.dash-mock p {
  font: var(--ts-micro-md-w) var(--ts-micro-md-s)/1.4 var(--fb);
  color: var(--bl);
  margin-bottom: 16px;
}
.dash-mock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--sl);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 10px;
  font: var(--ts-small-w) var(--ts-small-s)/1 var(--fb);
  color: var(--ink);
}
.dash-mock-row:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------------
   PHOTO GRID — 3-column portrait image strip (events section)
   ---------------------------------------------------------------- */

.photo-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  border-radius: 14px;
  overflow: hidden;
}
.photo-strip img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

@media (max-width: 600px) {
  .photo-strip {
    grid-template-columns: 1fr;
  }
  .photo-strip img {
    height: 220px;
  }
}

/* ----------------------------------------------------------------
   HERO NEIGHBORHOOD — full-viewport hero with L→R gradient overlay
   ---------------------------------------------------------------- */

.hero-nbhd {
  min-height: 600px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--w);
}
.hero-nbhd .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}
.hero-nbhd .hero-ov {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(20, 24, 39, 0.93) 0%,
    rgba(20, 24, 39, 0.65) 45%,
    rgba(20, 24, 39, 0.4) 100%
  );
}
.hero-nbhd .hero-c {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px 48px 80px;
}
.hero-nbhd h1 {
  font: 200 clamp(36px, 5vw, 52px)/1.06 var(--fh);
  margin-bottom: 20px;
}
.hero-nbhd h1 em {
  font-style: italic;
  color: var(--trl);
}
.hero-nbhd p {
  font: var(--ts-caption-w) var(--ts-caption-s)/var(--ts-caption-lh) var(--fb);
  opacity: 0.55;
  max-width: 580px;
  margin-bottom: 28px;
}
.hero-nbhd .hero-portal {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 40px;
  padding-top: 20px;
  font: var(--ts-micro-md-w) var(--ts-micro-md-s)/1 var(--fb);
  color: rgba(255, 255, 255, 0.3);
}
.hero-nbhd .hero-portal strong {
  color: rgba(255, 255, 255, 0.55);
}

/* ================================================================
   HERO LANES — action lanes inside .hero-nbhd
   Two-column frosted glass cards: Join (terra accent) + Newsletter.
   Includes entrance animations (E1 fade-up, E3 scale-in, C3 glow).
   ================================================================ */

/* ---- Vertical action wrapper (stacked layout) ---- */
.hero-actions {
  margin-top: 36px;
}
.hero-actions > * + * {
  margin-top: 28px;
}

/* ---- Lane typography ---- */
.hero-lane-title {
  font: 600 clamp(13px, 1.1vw, 15px)/1.2 var(--fb);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hero-lane-sub {
  font: 400 var(--ts-small-s)/1.6 var(--fb);
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 14px;
}

/* ---- Sign-in prompt ---- */
.hero-sign-in {
  font: 400 var(--ts-small-s)/1 var(--fb);
  color: rgba(255, 255, 255, 0.35);
  margin-top: 20px;
}
.hero-sign-in a {
  color: var(--trl);
  text-decoration: none;
  font-weight: 500;
}
.hero-sign-in a:hover {
  text-decoration: underline;
}

/* ---- Two-column lane grid — compact, centered lower in hero ---- */
.hero-lanes {
  display: grid;
  grid-template-columns: 3fr 4fr;
  gap: 20px;
  margin-top: 36px;
  max-width: 880px;
  align-items: stretch;
}
.hero-lane {
  background: rgba(20, 24, 39, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.hero-lane .btn,
.hero-lane .newsletter-form {
  margin-top: auto;
}
.hero-lane .newsletter-form {
  max-width: none;
}

/* ---- Accent variant (solid terra — Join card) ---- */
.hero-lane--accent {
  background: var(--terra);
  border: none;
  border-radius: 12px;
}
.hero-lane--accent .hero-lane-title {
  color: var(--w);
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: 0.06em;
}
.hero-lane--accent .hero-lane-sub {
  color: rgba(255, 255, 255, 0.75);
}

/* ---- Inner body inside accent card (description + button) ---- */
.hero-lane-body {
  margin-top: auto;
}
.hero-lane-body .hero-lane-sub {
  margin-bottom: 12px;
}

/* ---- Newsletter variant (teal border all sides) ---- */
.hero-lane--newsletter {
  border: 1px solid var(--teal);
}

@media (max-width: 600px) {
  .hero-lanes {
    grid-template-columns: 1fr;
  }
}

/* ---- Hero entrance animation ---- */

/* E1: fade-up */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* E3: scale-in (modals/cards settling into place) */
@keyframes heroScaleIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* C3-inspired: terra glow pulse on Join card */
@keyframes terraGlow {
  0%,
  100% {
    box-shadow: 0 4px 20px rgba(196, 117, 91, 0.15);
  }
  50% {
    box-shadow: 0 4px 32px rgba(196, 117, 91, 0.4);
  }
}

/* C3: breathing pulse on Join button */
@keyframes btnPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Entrance sequence: headline → subhead → Join (elastic) → Newsletter → sign-in → portal */
.hero-nbhd h1 {
  animation: heroFadeUp 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-nbhd > .hero-c > p {
  animation: heroFadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}
.hero-lane--accent {
  animation:
    heroScaleIn 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 400ms both,
    terraGlow 3s ease-in-out 1.2s 2;
}
.hero-lane--accent .btn {
  animation: btnPulse 3s ease-in-out 2.5s 3;
}
.hero-lane--newsletter {
  animation: heroFadeUp 500ms cubic-bezier(0.16, 1, 0.3, 1) 550ms both;
}
.hero-sign-in {
  animation: heroFadeUp 400ms cubic-bezier(0.16, 1, 0.3, 1) 700ms both;
}
.hero-nbhd .hero-portal {
  animation: heroFadeUp 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-nbhd h1,
  .hero-nbhd > .hero-c > p,
  .hero-lane--accent,
  .hero-lane--accent .btn,
  .hero-lane--newsletter,
  .hero-sign-in,
  .hero-nbhd .hero-portal {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ================================================================
   PITCH — full-viewport text statement section
   The "stop the scroller" moment. Pure typography, no decoration.
   Near 100vh, heading is the largest text on the page.
   Animation: E1 word-by-word fade-up (12px, cinematic 800ms).
   ================================================================ */

.pitch {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 48px;
  text-align: center;
  background: var(--ink);
}

.pitch-heading {
  font: 900 clamp(52px, 10vw, 150px)/0.95 var(--fh);
  color: var(--cream);
  margin: 0 0 48px;
  max-width: 1100px;
  letter-spacing: -0.02em;
}
.pitch-heading em {
  font-style: italic;
  color: var(--tl);
}

.pitch-body {
  font: 300 clamp(20px, 2.4vw, 30px)/1.65 var(--fb);
  color: var(--sand);
  max-width: 700px;
  margin: 0;
}
.pitch-body strong {
  font-weight: 600;
  color: var(--cream);
}

/* Word wrapper for per-word animation */
.pitch-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.12em 0.18em;
}
.pitch-word-inner {
  display: inline-block;
}

/* Overline above heading */
.pitch-overline {
  font: 600 clamp(11px, 1vw, 14px)/1 var(--fb);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tl);
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(12px);
}
.pitch.vis .pitch-overline {
  animation: pitchFadeUp 700ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}

/* Subtle glow line below heading */
.pitch-glow {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tl), transparent);
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(12px);
}
.pitch.vis .pitch-glow {
  animation: pitchFadeUp 1000ms cubic-bezier(0.16, 1, 0.3, 1) 1300ms both;
}

/* CTA — ghost light, right-aligned, subtle */
.pitch-cta {
  margin-top: 40px;
  width: 100%;
  max-width: 700px;
  text-align: right;
  opacity: 0;
  transform: translateY(12px);
}
.pitch.vis .pitch-cta {
  animation: pitchFadeUp 800ms cubic-bezier(0.16, 1, 0.3, 1) 2200ms both;
}
.pitch-btn {
  opacity: 0.3;
  transition: opacity 200ms cubic-bezier(0.33, 1, 0.68, 1);
}
.pitch-btn:hover {
  opacity: 0.5;
}

/* ---- Pitch animation — E1 fade-up (12px translate, cinematic) ---- */
@keyframes pitchFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Word-by-word entrance — staggered E1, triggered on scroll (.vis) */
.pitch .pitch-word-inner {
  opacity: 0;
  transform: translateY(12px);
}
.pitch.vis .pitch-word-inner {
  animation: pitchFadeUp 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pitch.vis .pitch-word:nth-child(1) .pitch-word-inner {
  animation-delay: 100ms;
}
.pitch.vis .pitch-word:nth-child(2) .pitch-word-inner {
  animation-delay: 500ms;
}
.pitch.vis .pitch-word:nth-child(3) .pitch-word-inner {
  animation-delay: 650ms;
}
.pitch.vis .pitch-word:nth-child(4) .pitch-word-inner {
  animation-delay: 850ms;
}
.pitch.vis .pitch-word:nth-child(5) .pitch-word-inner {
  animation-delay: 1100ms;
}
.pitch.vis .pitch-word:nth-child(6) .pitch-word-inner {
  animation-delay: 1300ms;
}

/* Body text fades up after heading */
.pitch .pitch-body {
  opacity: 0;
  transform: translateY(12px);
}
.pitch.vis .pitch-body {
  animation: pitchFadeUp 800ms cubic-bezier(0.16, 1, 0.3, 1) 1900ms both;
}

/* ---- Pitch responsive ---- */
@media (max-width: 768px) {
  .pitch {
    padding: 72px 28px;
    min-height: 75vh;
  }
  .pitch-heading {
    margin-bottom: 36px;
  }
}
@media (max-width: 480px) {
  .pitch {
    padding: 56px 20px;
    min-height: 65vh;
  }
  .pitch-heading {
    margin-bottom: 28px;
  }
}

/* ---- Pitch reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .pitch .pitch-word-inner,
  .pitch .pitch-body,
  .pitch-overline,
  .pitch-glow,
  .pitch-cta {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ================================================================
   MAP THEATER — dark cinematic printed map section
   Full ink background, giant stat, frosted showcase + tier cards.
   ================================================================ */

.map-theater {
  background: var(--cream);
  padding: 80px 48px;
  color: var(--ink);
}
.map-theater .badge {
  display: inline-flex;
  margin-bottom: 24px;
}
.map-theater-head {
  text-align: center;
  margin-bottom: 12px;
}
.map-theater h2 {
  font: 400 clamp(22px, 2.6vw, 32px)/1.4 var(--fb);
  color: var(--ink);
  text-align: center;
  margin: 0 0 16px;
}
.map-theater .map-lead {
  font: 300 clamp(15px, 1.3vw, 17px)/1.7 var(--fb);
  color: var(--bl);
  text-align: center;
  max-width: 540px;
  margin: 0 auto 12px;
}

/* Giant stat number */
.map-hero-stat {
  text-align: center;
  margin-bottom: 56px;
}
.map-hero-stat .stat-big {
  font: 800 clamp(48px, 7vw, 96px)/1 var(--fh);
  color: var(--teal);
  letter-spacing: -0.03em;
  display: block;
}
.map-hero-stat .stat-caption {
  font: 400 var(--ts-caption-s)/1.5 var(--fb);
  color: var(--bl);
  margin-top: 8px;
  display: block;
}

/* Enlarged compare showcase */
.map-showcase-lg {
  background: var(--w);
  border: 1px solid rgba(20, 24, 39, 0.08);
  border-radius: 14px;
  padding: 24px 28px;
  max-width: 720px;
  margin: 0 auto 48px;
  box-shadow: 0 4px 16px rgba(20, 24, 39, 0.07);
}
.map-showcase-lg h4 {
  font: 600 var(--ts-h5-s)/1.3 var(--fh);
  color: var(--ink);
  margin-bottom: 14px;
  text-align: center;
}
.map-showcase-lg .map-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.map-showcase-lg .map-compare-cell {
  border: 1px dashed rgba(20, 24, 39, 0.1);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}
.map-showcase-lg .map-compare-label {
  font: 600 var(--ts-micro-s)/1 var(--fb);
  color: var(--bl);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.map-showcase-lg .map-compare-listing {
  display: inline-block;
  border: 1px solid rgba(20, 24, 39, 0.1);
  padding: 12px 14px;
  text-align: left;
  border-radius: 6px;
  line-height: 1;
}
.map-showcase-lg .map-compare-listing .pin {
  display: inline-block;
  font: 700 var(--ts-micro-s)/1 var(--fb);
  color: var(--w);
  background: var(--teal);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  text-align: center;
  line-height: 18px;
  margin-right: 6px;
  vertical-align: middle;
}
.map-showcase-lg .map-compare-listing strong {
  display: inline;
  font: 600 var(--ts-small-s)/1 var(--fb);
  color: var(--ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.map-showcase-lg .map-compare-listing .listing-lines {
  display: block;
  font: 400 var(--ts-micro-s)/1.6 var(--fb);
  color: var(--body);
  margin-top: 2px;
  padding-left: 24px;
}
.map-showcase-lg .map-compare-ad {
  display: inline-block;
  border: 2px dashed rgba(20, 24, 39, 0.12);
  padding: 24px 32px;
  font: 400 var(--ts-micro-s)/1 var(--fb);
  color: var(--bl);
  border-radius: 6px;
}
.map-compare-ad--sized {
  width: 140px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.map-compare-upgrade {
  font: 500 var(--ts-micro-s)/1 var(--fb);
  color: var(--teal);
  margin-top: 14px;
  letter-spacing: 0.03em;
}
.map-compare-cell--upgrade {
  border-style: dashed;
  border-color: rgba(20, 24, 39, 0.08);
}

/* Info columns */
.map-info-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 720px;
  margin: 0 auto 56px;
}
.map-info-cols h4 {
  font: 600 var(--ts-h4-s)/1.3 var(--fh);
  color: var(--ink);
  margin: 0 0 10px;
}
.map-info-cols p {
  font: 400 var(--ts-caption-s)/1.7 var(--fb);
  color: var(--body);
  margin: 0 0 16px;
}
.map-info-cols .price-tag {
  font: 800 32px/1 var(--fh);
  color: var(--teal);
}
.map-info-cols .price-tag span {
  font: 400 var(--ts-small-s)/1 var(--fb);
  color: var(--bl);
}

/* Tier cards */
.tier-frost-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}
.tier-frost {
  background: var(--w);
  border: 1px solid rgba(20, 24, 39, 0.06);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(20, 24, 39, 0.05);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.tier-frost:hover {
  border-color: var(--teal);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(20, 24, 39, 0.1);
}
.tier-frost--pop {
  border-color: var(--teal);
  background: var(--tm);
}
.tier-frost h4 {
  font: 500 var(--ts-h4-s)/1.2 var(--fh);
  color: var(--ink);
  margin-bottom: 4px;
}
.tier-frost .tf-sub {
  font: 400 var(--ts-small-s)/1.4 var(--fb);
  color: var(--bl);
  margin-bottom: 16px;
}
.tier-frost .tf-price {
  font: 700 32px/1 var(--fh);
  color: var(--ink);
}
.tier-frost .tf-price span {
  font: 400 var(--ts-small-s)/1 var(--fb);
  color: var(--bl);
}
.tier-frost .tf-detail {
  font: 400 var(--ts-micro-md-s)/1.4 var(--fb);
  color: var(--bl);
  margin-top: 8px;
}
.tier-frost .tf-badge {
  display: inline-block;
  font: 600 var(--ts-micro-md-s)/1 var(--fb);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 6px;
  margin-top: 12px;
}
.tf-badge--pop {
  background: var(--tm);
  color: var(--td);
}
.tf-badge--ltd {
  background: var(--trb);
  color: var(--trd);
}

.map-tier-head {
  text-align: center;
  margin-bottom: 24px;
}
.map-tier-head h3 {
  font: 600 var(--ts-h4-s)/1.3 var(--fh);
  color: var(--ink);
  margin: 0 0 6px;
}
.map-tier-head p {
  font: 400 var(--ts-small-s)/1.5 var(--fb);
  color: var(--body);
}

/* CTA centered below tiers */
.map-cta {
  text-align: center;
  margin-top: 48px;
}

/* ---- Map Theater responsive ---- */
@media (max-width: 800px) {
  .map-info-cols {
    grid-template-columns: 1fr;
  }
  .tier-frost-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .map-showcase-lg .map-compare-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .tier-frost-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
  .map-theater {
    padding: 56px 20px;
  }
}

/* ================================================================
   WEBSITE LISTING — ghosted form → polished result card
   Showcases what a storefront listing looks like on the site.
   Ghosted wireframe input fields → real listing card with arrow.
   Stats strip + CTA pair with featured upgrade.
   ================================================================ */

.wl {
  max-width: 1060px;
  margin: 0 auto;
  padding: 80px 32px;
  background: var(--cream);
}

/* Header */
.wl-head {
  margin-bottom: 48px;
}
.wl-head .badge {
  margin-bottom: 20px;
}
.wl-head h2 {
  font: 700 var(--ts-h2-s)/1.15 var(--fh);
  color: var(--ink);
  margin: 0 0 14px;
}
.wl-head h2 em {
  font-style: italic;
  color: var(--teal);
}
.wl-head p {
  font: 300 clamp(16px, 1.4vw, 19px)/1.65 var(--fb);
  color: var(--body);
  max-width: 480px;
}

/* Split layout: form | arrow | result */
.wl-split {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 56px;
}

/* Ghosted form — transparent, wireframe feel */
.wl-ghost {
  border: 1px solid var(--sl);
  border-radius: 14px;
  padding: 28px 24px;
  background: transparent;
}
.wl-ghost-title {
  font: 500 var(--ts-small-s)/1 var(--fb);
  color: var(--bl);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sl);
}
.wl-ghost-field {
  margin-bottom: 18px;
}
.wl-ghost-field:last-child {
  margin-bottom: 0;
}
.wl-ghost-label {
  font: 500 var(--ts-micro-s)/1 var(--fb);
  color: var(--sand);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}
.wl-ghost-input {
  border: 1px solid var(--sl);
  border-radius: 8px;
  padding: 11px 14px;
  font: 400 var(--ts-small-s)/1.4 var(--fh);
  color: var(--ink);
  background: transparent;
  width: 100%;
  box-sizing: border-box;
}
.wl-ghost-input--dim {
  color: var(--sand);
  font-family: var(--fb);
  font-style: italic;
}
.wl-ghost-photo {
  border: 1px dashed var(--sl);
  border-radius: 8px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 400 var(--ts-micro-md-s)/1 var(--fb);
  color: var(--sand);
  background: transparent;
}
.wl-ghost-photo svg {
  width: 18px;
  height: 18px;
  stroke: var(--sand);
  fill: none;
  stroke-width: 1.5;
}
.wl-ghost-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Arrow between form and result */
.wl-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wl-arrow svg {
  width: 40px;
  height: 40px;
  stroke: var(--sl);
  fill: none;
  stroke-width: 1.5;
}

/* Result card — polished listing preview */
.wl-result {
  background: var(--w);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(20, 24, 39, 0.09);
}
.wl-result-img {
  height: 200px;
  background-size: cover;
  background-position: center;
}
.wl-result-body {
  padding: 24px;
}
.wl-result-body h3 {
  font: 700 var(--ts-h4-s)/1.2 var(--fh);
  color: var(--ink);
  margin: 0 0 4px;
}
.wl-result-body .wl-addr {
  font: 400 var(--ts-small-s)/1.4 var(--fb);
  color: var(--bl);
  margin-bottom: 10px;
}
.wl-result-body .wl-desc {
  font: 400 var(--ts-caption-s)/1.6 var(--fb);
  color: var(--body);
  margin-bottom: 14px;
}
.wl-result-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.wl-result-note {
  font: 400 var(--ts-micro-md-s)/1.4 var(--fb);
  color: var(--sand);
  padding-top: 12px;
  border-top: 1px solid var(--sl);
}

/* Stats strip */
.wl-stats-head {
  font: 500 var(--ts-small-s)/1 var(--fb);
  color: var(--bl);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 16px;
}
.wl-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 48px;
}
.wl-stat {
  background: var(--w);
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(20, 24, 39, 0.04);
}
.wl-stat .ws-num {
  font: 800 clamp(28px, 3.5vw, 40px)/1 var(--fh);
  color: var(--ink);
  letter-spacing: -0.02em;
  display: block;
}
.wl-stat .ws-label {
  font: 400 var(--ts-small-s)/1.4 var(--fb);
  color: var(--bl);
  margin-top: 6px;
  display: block;
}
.wl-stat .ws-context {
  font: 400 var(--ts-micro-md-s)/1.4 var(--fb);
  color: var(--sand);
  margin-top: 4px;
  display: block;
  font-style: italic;
}

/* CTA pair: free listing + featured upgrade */
.wl-bottom {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 12px;
}
.wl-cta-main {
  background: var(--w);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 1px 4px rgba(20, 24, 39, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.wl-cta-main h4 {
  font: 600 var(--ts-h4-s)/1.3 var(--fh);
  color: var(--ink);
  margin: 0 0 4px;
}
.wl-cta-main p {
  font: 400 var(--ts-small-s)/1.5 var(--fb);
  color: var(--bl);
  margin: 0;
}
.wl-cta-main .btn {
  flex-shrink: 0;
  white-space: nowrap;
}
.wl-cta-boost {
  background: var(--ink);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wl-cta-boost h4 {
  font: 600 var(--ts-h5-s)/1.3 var(--fh);
  color: var(--cream);
  margin: 0 0 6px;
}
.wl-cta-boost p {
  font: 400 var(--ts-micro-md-s)/1.5 var(--fb);
  color: var(--sand);
  margin: 0;
}

/* ---- Website Listing responsive ---- */
@media (max-width: 800px) {
  .wl-split {
    grid-template-columns: 1fr;
  }
  .wl-arrow svg {
    transform: rotate(90deg);
  }
  .wl-stats {
    grid-template-columns: 1fr;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
  .wl-bottom {
    grid-template-columns: 1fr;
  }
  .wl-cta-main {
    flex-direction: column;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .wl {
    padding: 56px 20px;
  }
}

/* ================================================================
   PAGE CLOSE — dark bookend closing section
   Governance statement + CTA. Mirrors the Pitch section at top.
   ================================================================ */

.page-close {
  background: var(--ink);
  padding: 100px 48px 80px;
  text-align: center;
}

.page-close-statement {
  max-width: 720px;
  margin: 0 auto 56px;
}
.page-close-statement h2 {
  font: 700 clamp(28px, 3.5vw, 44px)/1.15 var(--fh);
  color: var(--cream);
  margin: 0 0 24px;
}
.page-close-statement h2 em {
  font-style: italic;
  color: var(--tl);
}
.page-close-statement p {
  font: 300 clamp(16px, 1.4vw, 19px)/1.7 var(--fb);
  color: var(--sand);
  margin: 0 0 16px;
}
.page-close-statement p:last-child {
  margin-bottom: 0;
}
.page-close-statement .close-accent {
  font: 400 clamp(17px, 1.6vw, 21px)/1.5 var(--fh);
  font-style: italic;
  color: var(--tl);
}

/* Glow separator */
.page-close-glow {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tl), transparent);
  margin: 0 auto 48px;
}

/* CTA */
.page-close-actions {
  max-width: 480px;
  margin: 0 auto;
}
.page-close-actions .btn {
  margin-bottom: 20px;
}
.page-close-signin {
  font: 400 var(--ts-small-s)/1 var(--fb);
  color: rgba(255, 255, 255, 0.35);
}
.page-close-signin a {
  color: var(--tl);
  text-decoration: none;
  font-weight: 500;
}
.page-close-signin a:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .page-close {
    padding: 72px 20px 56px;
  }
}

/* ================================================================
   SCROLL REVEAL — fade-up on intersection
   ================================================================ */

.rv {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.rv.vis {
  opacity: 1;
  transform: translateY(0);
}
.rv-d1 {
  transition-delay: 0.12s;
}
.rv-d2 {
  transition-delay: 0.24s;
}
.rv-d3 {
  transition-delay: 0.36s;
}

@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ================================================================
   BADGE — dark pill with colored dot, section label
   ================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--sl);
  font: 600 var(--ts-ui-s)/1 var(--fb);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 20px 10px 16px;
  border-radius: 10px;
  margin-bottom: 18px;
}
.badge::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--teal);
}
.badge--terra::before {
  background: var(--terra);
}
.badge--ink::before {
  background: var(--sand);
}
.dark .badge {
  background: rgba(255, 255, 255, 0.08);
  color: var(--sl);
}
.dark .badge::before {
  background: var(--tl);
}

/* ================================================================
   HERO REFINEMENTS — decorative subtitle dash, footer, ghost button
   ================================================================ */

.hero-sub::before {
  content: "";
  width: 40px;
  height: 2px;
  background: var(--tl);
  display: inline-block;
  vertical-align: middle;
  margin-right: 14px;
}

.hero-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 44px;
  padding-top: 18px;
  font: 400 var(--ts-micro-lg-s)/1.5 var(--fb);
  color: rgba(255, 255, 255, 0.3);
}
.hero-foot strong {
  color: rgba(255, 255, 255, 0.55);
}

.btn-ghost-light {
  background: transparent;
  color: var(--w);
  border-color: rgba(255, 255, 255, 0.35);
}
.btn-ghost-light:hover {
  border-color: var(--w);
  background: rgba(255, 255, 255, 0.08);
  color: var(--w);
}

/* ================================================================
   HOOK CARDS — persona cards with colored top bars
   ================================================================ */

.hook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.hook-card {
  background: var(--w);
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: 0 4px 16px rgba(20, 24, 39, 0.07);
  text-align: left;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.hook-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}
.hook-card:nth-child(1)::before {
  background: var(--teal);
}
.hook-card:nth-child(2)::before {
  background: var(--terra);
}
.hook-card:nth-child(3)::before {
  background: var(--ink);
}
.hook-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(20, 24, 39, 0.12);
}
.hook-card h4 {
  font: 500 var(--ts-h4-s)/1.2 var(--fh);
  color: var(--ink);
  margin-bottom: 4px;
}
.hook-card .hook-sub {
  font: 400 var(--ts-small-s)/1 var(--fb);
  color: var(--bl);
  margin-bottom: 18px;
}
.hook-card li {
  font: 400 var(--ts-caption-s)/1.6 var(--fb);
  color: var(--body);
  padding: 7px 0;
  border-bottom: 1px solid var(--cream);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hook-card li:last-child {
  border-bottom: none;
}
.hook-card .tag {
  margin-left: auto;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .hook-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   EDITORIAL CONTAINED — rounded 2-col with image zoom
   ================================================================ */

.ed-contained {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(20, 24, 39, 0.07);
}
.ed-contained .ed-img {
  position: relative;
  overflow: hidden;
}
.ed-contained .ed-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ed-contained:hover .ed-img img {
  transform: scale(1.03);
}
.ed-contained .ed-body {
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--w);
}
.ed-contained .ed-body h2 {
  font: 700 clamp(28px, 3.5vw, 44px)/1.15 var(--fh);
  color: var(--ink);
  margin-bottom: 14px;
}
.ed-contained .ed-body p {
  max-width: 460px;
  margin-bottom: 16px;
  font-size: var(--ts-nav-s);
  line-height: 1.7;
}
.ed-contained .ed-body li {
  font: 400 var(--ts-caption-s)/1.7 var(--fb);
  color: var(--body);
  padding: 5px 0 5px 22px;
  position: relative;
}
.ed-contained .ed-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--teal);
}

@media (max-width: 900px) {
  .ed-contained {
    grid-template-columns: 1fr;
  }
  .ed-contained .ed-img {
    min-height: 260px;
  }
  .ed-contained .ed-body {
    padding: 36px 28px;
  }
}

/* ================================================================
   EVENT PHOTOS — 3-col grid with hover zoom
   ================================================================ */

.ev-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-radius: 14px;
  overflow: hidden;
  height: 340px;
}
.ev-photos > div {
  overflow: hidden;
}
.ev-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ev-photos > div:hover img {
  transform: scale(1.06);
}
.ev-photos > div:nth-child(1) img {
  object-position: center 15%;
}
.ev-photos > div:nth-child(2) img {
  object-position: center 20%;
}
.ev-photos > div:nth-child(3) img {
  object-position: center 25%;
}

@media (max-width: 900px) {
  .ev-photos {
    height: auto;
  }
  .ev-photos > div {
    height: 200px;
  }
}

/* ================================================================
   TOUR TYPES — small hover cards in 2-col grid
   ================================================================ */

.tour-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}
.tour-type {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 var(--ts-caption-s)/1 var(--fh);
  color: var(--ink);
  background: var(--w);
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(20, 24, 39, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.tour-type:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(20, 24, 39, 0.08);
}

@media (max-width: 600px) {
  .tour-types {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   TOURS PAGE — "Happening Today" section
   ================================================================ */

.today-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.today-title {
  font: 700 clamp(2rem, 4vw, 3rem)/1 var(--fh);
  color: var(--ink);
  letter-spacing: -0.02em;
}
.today-title em {
  font-weight: 300;
  font-style: italic;
}
.today-date {
  font: var(--ts-ui-w) var(--ts-ui-s)/1.4 var(--fb);
  color: var(--bl);
}
.today-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 var(--ts-micro-lg-s)/1 var(--fb);
  color: var(--terra);
}
.today-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--terra);
  animation: tours-pulse 2s ease-in-out infinite;
}
@keyframes tours-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.today-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.today-scroll::-webkit-scrollbar {
  display: none;
}
.today-empty {
  font: 400 var(--ts-body-s)/1.7 var(--fh);
  color: var(--bl);
}

/* Today card */
.tc {
  flex: 0 0 280px;
  background: var(--w);
  border-radius: 14px;
  overflow: hidden;
  transition:
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 300ms;
  cursor: pointer;
}
.tc:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(20, 24, 39, 0.12);
}
.tc-img {
  height: 140px;
  background: var(--cream);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--ts-micro-md-w) var(--ts-micro-md-s)/1 var(--fb);
  color: var(--bl);
}
.tc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tc:hover .tc-img img {
  transform: scale(1.06);
}
.tc-time {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(20, 24, 39, 0.9);
  color: var(--w);
  font: 600 var(--ts-micro-lg-s)/1 var(--fb);
  padding: 5px 12px;
  border-radius: 6px;
}
.tc-body {
  padding: 14px 18px 18px;
}
.tc-op {
  font: 700 var(--ts-micro-s)/1 var(--fb);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--teal);
  margin-bottom: 4px;
}
.tc-name {
  font: 700 1.15rem/1.2 var(--fh);
  color: var(--ink);
  margin-bottom: 4px;
}
.tc-meta {
  font: var(--ts-micro-lg-w) var(--ts-micro-lg-s)/1.4 var(--fb);
  color: var(--body);
  margin-bottom: 12px;
}
.tc-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 var(--ts-micro-lg-s)/1 var(--fb);
  color: var(--terra);
  text-decoration: none;
  border-bottom: 1px solid var(--trl);
  padding-bottom: 1px;
  transition: border-color 0.2s;
}
.tc-cta:hover {
  border-color: var(--terra);
}
.today-more {
  flex: 0 0 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 var(--ts-small-s)/1 var(--fh);
  color: var(--terra);
  cursor: pointer;
}

@media (max-width: 768px) {
  .tc {
    flex: 0 0 240px;
  }
}

/* ================================================================
   TOURS PAGE — Operator cards
   ================================================================ */

.op-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
}
.op-h {
  font: 700 clamp(2rem, 4vw, 3rem)/1 var(--fh);
  color: var(--ink);
  letter-spacing: -0.02em;
}
.op-h em {
  font-weight: 300;
  font-style: italic;
}
.op-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.opc {
  background: var(--w);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 260px 1fr;
  transition:
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 300ms;
}
.opc:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(20, 24, 39, 0.1);
}
.opc-img {
  background: var(--cream);
  min-height: 260px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--ts-micro-md-w) var(--ts-micro-md-s)/1 var(--fb);
  color: var(--bl);
}
.opc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.opc:hover .opc-img img {
  transform: scale(1.05);
}
.opc-body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
}
.opc-type {
  font: 700 var(--ts-micro-s)/1 var(--fb);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--teal);
  margin-bottom: 4px;
}
.opc-name {
  font: 700 clamp(1.35rem, 2.2vw, 1.65rem)/1.15 var(--fh);
  color: var(--ink);
  margin-bottom: 8px;
}
.opc-desc {
  font: var(--ts-ui-w) var(--ts-ui-s)/1.6 var(--fb);
  color: var(--body);
  margin-bottom: 12px;
}
.opc-contact {
  font: var(--ts-micro-lg-w) var(--ts-micro-lg-s)/1.4 var(--fb);
  color: var(--bl);
  margin-bottom: 16px;
}
.opc-contact a {
  color: var(--terra);
  text-decoration: none;
  border-bottom: 1px solid var(--trl);
}
.opc-contact a:hover {
  border-color: var(--terra);
}

/* Schedule */
.opc-sched {
  flex: 1;
  margin-bottom: 16px;
}
.opc-sched-label {
  font: 700 var(--ts-micro-s)/1 var(--fb);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bl);
  margin-bottom: 8px;
}
.sr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font: var(--ts-micro-lg-w) var(--ts-micro-lg-s)/1.4 var(--fb);
}
.sr-name {
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-days {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.sd {
  width: 18px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font: 700 8px/1 var(--fb);
}
.sd.on {
  background: var(--tm);
  color: var(--td);
}
.sd.off {
  color: var(--sl);
}
.sr-time {
  font: 600 var(--ts-micro-md-s)/1 var(--fb);
  color: var(--teal);
  min-width: 44px;
  text-align: right;
  flex-shrink: 0;
}
.sr-more {
  font: 600 var(--ts-micro-md-s)/1 var(--fb);
  color: var(--terra);
  cursor: pointer;
  padding: 6px 0;
}

/* Operator card footer */
.opc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--cream);
  margin-top: auto;
}
.opc-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 var(--ts-micro-lg-s)/1 var(--fb);
  color: var(--w);
  background: var(--terra);
  padding: 9px 18px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
}
.opc-cta:hover {
  background: var(--trd);
}
.opc-price {
  font: var(--ts-micro-lg-w) var(--ts-micro-lg-s)/1 var(--fb);
  color: var(--bl);
}
.prv-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 var(--ts-micro-s)/1 var(--fb);
  color: #7b6d9a;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(168, 152, 192, 0.08);
  margin-left: 10px;
}

/* Tours page — section label */
.s-num {
  font: 700 var(--ts-micro-md-s)/1 var(--fb);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--terra);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.s-num::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--terra);
  border-radius: 1px;
}

/* Tours page — bottom CTA */
.bot-cta {
  text-align: center;
}
.bot-cta h3 {
  font: 700 clamp(1.75rem, 3.5vw, 2.75rem)/1 var(--fh);
  color: var(--ink);
  margin-bottom: 10px;
}
.bot-cta h3 em {
  font-weight: 300;
  font-style: italic;
}
.bot-cta p {
  font: 400 clamp(1rem, 1.4vw, 1.2rem)/1.7 var(--fh);
  color: var(--body);
  margin-bottom: 24px;
}
.bot-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 var(--ts-ui-s)/1 var(--fb);
  color: var(--w);
  background: var(--teal);
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
}
.bot-btn:hover {
  background: var(--td);
}
.bot-cta-section {
  padding: 64px 32px;
  background: var(--cream);
}
.bot-cta .newsletter-form {
  margin: 0 auto;
}
.bot-cta-signin {
  margin-top: 20px;
  font: 400 var(--ts-small-s)/1 var(--fb);
  color: var(--body);
}
.bot-cta-signin a {
  color: var(--teal);
  font-weight: 600;
}

@media (max-width: 768px) {
  .opc {
    grid-template-columns: 1fr;
  }
  .opc-img {
    min-height: 200px;
  }
}

/* ================================================================
   DARK SECTION — price box + note refinements
   ================================================================ */

.dark-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 32px 0;
}
.dark-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 28px 24px;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.dark-card:hover {
  border-color: rgba(103, 166, 164, 0.25);
  background: rgba(103, 166, 164, 0.04);
  transform: translateY(-3px);
}
.dark-card .ic {
  font-size: 28px;
  margin-bottom: 12px;
  display: block;
}
.dark-card h4 {
  font: 500 var(--ts-h4-s)/var(--ts-h4-lh) var(--fh);
  color: var(--cw);
  margin-bottom: 8px;
}
.dark-card p {
  font: 400 var(--ts-caption-s)/1.6 var(--fb);
  color: var(--sand);
  margin-bottom: 0;
  max-width: none;
}

.price-box {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 24px 36px;
  margin-top: 12px;
}
.price-box .amt {
  font: 800 48px/1 var(--fh);
  color: var(--w);
}
.price-box .per {
  font: 400 var(--ts-caption-s)/1 var(--fb);
  color: var(--sand);
}
.note,
.dark .note {
  font: 400 var(--ts-small-s)/1.6 var(--fb);
  color: rgba(255, 255, 255, 0.25);
  max-width: 560px;
  margin-top: 20px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Security editorial split — 2-column layout for dark sections */
.sec-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 20px;
  align-items: start;
}
.sec-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sec-sub {
  font: 400 var(--ts-small-s)/1.6 var(--fb);
  color: var(--sand);
  margin-top: 12px;
}
.note--left {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.sec-split .pull-quote {
  max-width: none;
  margin: 24px 0 40px;
}

@media (max-width: 900px) {
  .sec-split {
    grid-template-columns: 1fr;
  }
  .dark-cards {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   FAQ CARD — hover enhancement
   ================================================================ */

.faq-card {
  background: var(--w);
  border-radius: 14px;
  padding: 24px 28px;
  border: 2px solid transparent;
  box-shadow: 0 4px 16px rgba(20, 24, 39, 0.07);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-card:hover {
  border-color: var(--teal);
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(20, 24, 39, 0.12);
}

/* ================================================================
   PRICING TABLE — dark header, rounded, shadow
   ================================================================ */

.price-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(20, 24, 39, 0.07);
  font: var(--ts-small-w) var(--ts-small-s)/1.6 var(--fb);
  color: var(--body);
}
.price-table thead th {
  text-align: left;
  padding: 14px 20px;
  background: var(--ink);
  color: var(--sl);
  font: 500 var(--ts-micro-md-s)/1 var(--fb);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ================================================================
   SPACING UTILITIES
   ================================================================ */

.s-y {
  padding-top: 72px;
  padding-bottom: 72px;
}
.s-top {
  padding-top: 72px;
}
.s-bot {
  padding-bottom: 72px;
}

/* ================================================================
   DASHBOARD ROW — hover enhancement
   ================================================================ */

.dash-mock-row:hover {
  border-color: var(--teal);
  background: var(--tm);
}

/* ================================================================
   PHOTO DIVIDER — contained atmospheric image break
   ================================================================ */

.photo-divider {
  max-width: 1280px;
  margin: 48px auto;
  padding: 0 32px;
}
.photo-divider-card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(20, 24, 39, 0.07);
  position: relative;
  height: 340px;
  background: var(--cream);
  transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.photo-divider-card:hover {
  box-shadow: 0 20px 48px rgba(20, 24, 39, 0.12);
}
.photo-divider-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.photo-divider-card:hover .photo-divider-img {
  transform: scale(1.02);
}
.photo-divider-accent {
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--teal);
  box-shadow: 0 2px 8px rgba(103, 166, 164, 0.3);
  z-index: 2;
}

@media (max-width: 600px) {
  .photo-divider-card {
    height: 240px;
  }
}

/* ================================================================
   PERSONA CARDS — identity-first persona columns
   Gradient-tinted cards with thick left accent bar, color-matched
   bullet dots, and full-width CTA buttons. Three variants:
   teal (residents), terra (merchants), ink (property owners).
   ================================================================ */

.persona-section-head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 48px;
}
.persona-section-head h2 {
  font: 700 var(--ts-h2-s)/var(--ts-band-lh) var(--fh);
  color: var(--ink);
}

.persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.persona-card {
  border-radius: 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.persona-card:hover {
  transform: translateY(-5px);
}

/* Thick left accent bar */
.persona-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 5px;
}

/* ---- Teal variant (residents) ---- */
.persona-card--teal {
  background: linear-gradient(165deg, var(--tm) 0%, var(--w) 100%);
  box-shadow:
    0 4px 16px rgba(103, 166, 164, 0.08),
    0 1px 3px rgba(20, 24, 39, 0.04);
}
.persona-card--teal::before {
  background: linear-gradient(to bottom, var(--teal), var(--td));
}
.persona-card--teal:hover {
  box-shadow:
    0 20px 48px rgba(103, 166, 164, 0.15),
    0 4px 12px rgba(20, 24, 39, 0.06);
}
.persona-card--teal li::before {
  background: var(--teal);
}

/* ---- Terra variant (merchants) ---- */
.persona-card--terra {
  background: linear-gradient(165deg, var(--trb) 0%, var(--w) 100%);
  box-shadow:
    0 4px 16px rgba(196, 117, 91, 0.08),
    0 1px 3px rgba(20, 24, 39, 0.04);
}
.persona-card--terra::before {
  background: linear-gradient(to bottom, var(--terra), var(--trd));
}
.persona-card--terra:hover {
  box-shadow:
    0 20px 48px rgba(196, 117, 91, 0.15),
    0 4px 12px rgba(20, 24, 39, 0.06);
}
.persona-card--terra li::before {
  background: var(--terra);
}

/* ---- Ink variant (property owners) ---- */
.persona-card--ink {
  background: linear-gradient(165deg, #eaeaf0 0%, var(--w) 100%);
  box-shadow:
    0 4px 16px rgba(20, 24, 39, 0.06),
    0 1px 3px rgba(20, 24, 39, 0.04);
}
.persona-card--ink::before {
  background: linear-gradient(to bottom, var(--inks), var(--ink));
}
.persona-card--ink:hover {
  box-shadow:
    0 20px 48px rgba(20, 24, 39, 0.12),
    0 4px 12px rgba(20, 24, 39, 0.06);
}
.persona-card--ink li::before {
  background: var(--ink);
}

/* ---- Card inner content ---- */
.persona-card-inner {
  padding: 40px 36px 36px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.persona-card h3 {
  font: 800 clamp(30px, 3.2vw, 42px)/1.05 var(--fh);
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.persona-card .persona-sub {
  font: 400 italic clamp(17px, 1.5vw, 20px)/1.4 var(--fh);
  color: var(--bl);
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(20, 24, 39, 0.08);
}

.persona-card ul {
  list-style: none;
  flex: 1;
  margin-bottom: 32px;
}
.persona-card li {
  font: 400 15px/1.55 var(--fb);
  color: var(--body);
  padding: 10px 0;
  border-bottom: 1px solid rgba(20, 24, 39, 0.05);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.persona-card li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}
.persona-card li:last-child {
  border-bottom: none;
}
.persona-card .tag {
  margin-left: auto;
  flex-shrink: 0;
}
.persona-card .btn {
  display: block;
  text-align: center;
  width: 100%;
  padding: 14px 24px;
}

@media (max-width: 900px) {
  .persona-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
}

/* ================================================================
   PORTAL FEATURES — filterable feature card rows
   3-column card rows (title | description | atoms) with member-type
   filter bar. Replaces persona columns + feature list. Includes
   member-type mini-chips (.pw) and "learn more" indicator.
   ================================================================ */

/* ---- Section wrapper ---- */
.pf-section {
  padding: 80px 0 64px;
  background: var(--cream);
}

/* ---- Section container + header ---- */
.pf {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 32px;
}
.pf-head {
  text-align: center;
  margin-bottom: 36px;
}
.pf-head h2 {
  font: 700 var(--ts-h2-s)/var(--ts-band-lh) var(--fh);
  color: var(--ink);
}

/* ---- Filter bar (pill buttons) ---- */
.pf-filter {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.pf-filter .btn-sm {
  border-radius: 20px;
  padding: 8px 20px;
  font-weight: 500;
}
.pf-filter .btn-sm.is-active {
  background: var(--teal);
  color: var(--w);
  border-color: var(--teal);
}

/* ---- Member-type mini-chips ---- */
.pw {
  display: inline-block;
  font: 600 10px/1 var(--fb);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
}
.pw--r {
  background: var(--tm);
  color: var(--td);
}
.pw--m {
  background: var(--trb);
  color: var(--trd);
}
.pw--o {
  background: #eaeaf0;
  color: var(--inks);
}

/* ---- Feature card row (D4 variant) ---- */
.pf3c-row {
  display: grid;
  grid-template-columns: 240px 1fr auto;
  gap: 24px;
  padding: 22px 28px;
  background: var(--w);
  border-radius: 12px;
  margin-bottom: 10px;
  align-items: baseline;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(20, 24, 39, 0.04);
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf3c-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 24, 39, 0.07);
}
.pf3c-row h4 {
  font: 400 clamp(17px, 1.5vw, 20px)/1.25 var(--fh);
  color: var(--ink);
}
.pf3c-row h4 strong {
  font-weight: 800;
}
.pf3c-row p {
  font: 400 14px/1.55 var(--fb);
  color: var(--body);
}
.pf3c-atoms {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.pf3c-chips {
  display: flex;
  gap: 4px;
}

/* "Learn more" indicator on clickable rows */
.pf3c-row[data-detail] {
  cursor: pointer;
  border-left: 4px solid var(--teal);
}
.pf3c-row[data-detail] h4::after {
  content: " \2192";
  color: var(--teal);
  font-weight: 400;
  opacity: 0.7;
  transition:
    opacity 0.2s,
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}
.pf3c-row[data-detail]:hover h4 {
  color: var(--teal);
}
.pf3c-row[data-detail]:hover h4::after {
  opacity: 1;
  transform: translateX(3px);
}

/* Hide filtered-out items */
[data-types].is-hidden {
  display: none;
}

@media (max-width: 800px) {
  .pf3c-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 20px;
  }
  .pf3c-atoms {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
}

/* ================================================================
   NEIGHBORHOOD PAGE — RESPONSIVE FIXES
   Mobile-first overrides for the /neighborhood/ landing page.
   900px = tablet, 600px = phone.
   ================================================================ */

/* ---- 900px: Tablet ---- */

@media (max-width: 900px) {
  /* Hero: reduce side padding, top padding (nav is smaller) */
  .hero-nbhd .hero-c {
    padding: 100px 32px 64px;
  }

  /* Section container: reduce vertical padding */
  .lp-section {
    padding: 56px 24px;
  }

  /* Vertical section spacing */
  .s-y {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  /* Dark section padding */
  .dark {
    padding: 56px 24px;
  }

  /* Map compare: tighter padding at tablet */
  .map-compare {
    padding: 24px;
  }

  /* Price table: reduce cell padding to prevent overflow */
  .price-table th,
  .price-table td {
    padding: 10px 12px;
    font-size: var(--ts-micro-lg-s);
  }

  /* Photo divider: reduce margin */
  .photo-divider {
    margin: 32px auto;
    padding: 0 24px;
  }

  /* Band: reduce padding */
  .band {
    padding: 40px 24px;
  }

  /* Dashboard mockup: tighter padding */
  .dash-mock {
    padding: 16px;
  }
  .dash-mock-inner {
    padding: 20px;
  }

  /* Category hero: reduce padding */
  .hero-cat .hero-c {
    padding: 0 32px 48px;
  }
}

/* ---- 600px: Phone ---- */

@media (max-width: 600px) {
  /* Category hero: phone sizing */
  .hero-cat {
    min-height: 50vh;
  }
  .hero-cat .hero-c {
    padding: 0 20px 36px;
  }
  .hero-cat h1 {
    font-size: clamp(28px, 7vw, 36px);
  }

  /* Hero: tighter padding for small screens */
  .hero-nbhd {
    min-height: 80vh;
  }
  .hero-nbhd .hero-c {
    padding: 88px 20px 48px;
  }
  .hero-nbhd h1 {
    font-size: clamp(28px, 7vw, 36px);
  }

  /* Section container: phone-size padding */
  .lp-section {
    padding: 40px 16px;
  }

  /* Vertical section spacing */
  .s-y {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* Dark section */
  .dark {
    padding: 40px 16px;
  }

  /* Two-column grids: collapse to single column */
  .grd.g2 {
    grid-template-columns: 1fr;
  }

  /* Three-column and above: single column */
  .g3,
  .g4,
  .g5,
  .g60 {
    grid-template-columns: 1fr;
  }

  /* Event photos: single column with per-div height */
  .ev-photos {
    grid-template-columns: 1fr;
    height: auto;
  }
  .ev-photos > div {
    height: 200px;
  }

  /* Map compare inner grid: single column */
  .map-compare-grid {
    grid-template-columns: 1fr;
  }

  /* Buttons: slightly reduce padding for narrow screens */
  .btn {
    padding: 12px 22px;
    font-size: var(--ts-small-s);
  }
  .btn-sm {
    padding: 8px 16px;
  }

  /* Hero button group: stack vertically if needed */
  .hero-nbhd .bg {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-nbhd .bg .btn {
    width: 100%;
    justify-content: center;
  }

  /* Band heading: smaller */
  .band h3 {
    font-size: clamp(22px, 5vw, 32px);
  }
  .band p {
    font-size: var(--ts-caption-s);
  }
  .band {
    padding: 36px 16px;
  }

  /* Photo divider */
  .photo-divider {
    margin: 24px auto;
    padding: 0 16px;
  }

  /* Governance box: stack on mobile */
  .gov-box {
    flex-direction: column;
    padding: 24px 20px;
  }

  /* Dashboard mockup rows: wrap content */
  .dash-mock-row {
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 14px;
  }
  .dash-mock-row span {
    flex-wrap: wrap;
  }

  /* Hook card list items: allow tag wrapping */
  .hook-card li {
    flex-wrap: wrap;
  }

  /* Price box: tighter padding */
  .price-box {
    padding: 18px 24px;
  }
  .price-box .amt {
    font-size: 36px;
  }

  /* Card grid 3: single column */
  .card-grid-3 {
    grid-template-columns: 1fr;
  }

  /* Price table: tight fit on phone, scroll if needed */
  .price-table {
    font-size: var(--ts-micro-md-s);
  }
  .price-table th,
  .price-table td {
    padding: 8px 8px;
    font-size: var(--ts-micro-md-s);
  }
  .price-table thead th {
    font-size: var(--ts-micro-s);
    padding: 10px 8px;
  }
  .price-table .price-group td {
    padding: 8px 8px;
    font-size: var(--ts-micro-md-s);
  }
  /* Notes column: hide on very narrow to prevent overflow */
  .price-table th:nth-child(3),
  .price-table td:nth-child(3) {
    display: none;
  }

  /* Final CTA section: reduce padding */
  section:last-of-type {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Footer: tighter */
  footer.dark {
    padding: 28px 16px;
  }

  /* Tier card: slightly tighter */
  .tier-card {
    padding: 24px 16px;
  }

  /* FAQ card: slightly tighter */
  .faq-card {
    padding: 20px 20px;
  }

  /* Map compare: tighter padding */
  .map-compare {
    padding: 20px;
  }
  .map-compare-cell {
    padding: 16px;
  }
}

/* ================================================================
   PRODUCTION DESIGN SYSTEM ENDS HERE

   Everything below is preview/documentation chrome.
   Do not use these classes in production pages.
   ================================================================ */

/* ================================================================
   PREVIEW CHROME
   These styles are for the design reference document only.
   They use micro/ui tokens for consistency.
   ================================================================ */

.bar {
  background: var(--ink);
  color: var(--tl);
  padding: 10px 24px;
  font: 500 var(--ts-micro-md-s)/var(--ts-micro-md-lh) var(--fm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.bar span {
  color: var(--sand);
}

.lbl {
  font: 500 var(--ts-micro-s)/var(--ts-micro-lh) var(--fm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
  padding: 14px 24px;
  background: var(--cw);
  position: sticky;
  top: 31px;
  z-index: 99;
}

.sec {
  padding: 48px 32px;
  max-width: 1280px;
  margin: 0 auto;
}
.sec.full {
  max-width: none;
  padding: 0;
}
.sec.bleed {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Preview type-scale row */
.ts {
  padding: 20px 0;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  align-items: baseline;
}
.ts + .ts {
  border-top: 1px solid var(--sl);
}
.ts small {
  font: var(--ts-micro-w) var(--ts-micro-s)/1.5 var(--fm);
  color: var(--sand);
  text-align: right;
}
.ts small strong {
  display: block;
  color: var(--td);
  font-weight: 500;
}

/* Preview chrome: "page state" labels */
.ps-n,
.ps-h,
.ps-r {
  font: var(--ts-micro-md-w) var(--ts-micro-md-s)/var(--ts-micro-md-lh) var(--fm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}
.ps-n {
  background: var(--tm);
  color: var(--td);
}
.ps-h {
  background: var(--trb);
  color: var(--trd);
}
.ps-r {
  background: var(--cream);
  color: var(--sand);
}

/* Preview: token grid */
.tg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 40px;
  margin-bottom: 32px;
}
.tk {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--sl);
}
.sr {
  border-radius: 10px;
  padding: 24px;
  text-align: center;
}

/* Preview token/variable display */
.tm {
  font: var(--ts-ui-w) var(--ts-ui-s)/var(--ts-ui-lh) var(--fm);
  color: var(--bl);
}
.tk-k {
  font: var(--ts-micro-md-w) var(--ts-micro-md-s)/var(--ts-micro-md-lh) var(--fm);
  color: var(--sand);
}
.tk-v {
  font: var(--ts-ui-w) var(--ts-ui-s)/var(--ts-ui-lh) var(--fm);
  color: var(--ink);
}
.tk-v code {
  font: var(--ts-ui-w) var(--ts-ui-s)/var(--ts-ui-lh) var(--fm);
  color: var(--td);
}
.sd {
  font: var(--ts-micro-md-w) var(--ts-micro-md-s)/var(--ts-micro-md-lh) var(--fm);
  color: var(--bl);
}
.gn {
  font: var(--ts-ui-w) var(--ts-ui-s)/var(--ts-ui-lh) var(--fm);
  color: var(--tag-free-fg);
}
.gd-label {
  font: var(--ts-ui-w) var(--ts-ui-s)/var(--ts-ui-lh) var(--fm);
  color: var(--trd);
}

/* Footer meta in preview */
.footer-meta {
  font: var(--ts-micro-md-w) var(--ts-micro-md-s)/var(--ts-micro-md-lh) var(--fm);
  color: var(--sand);
}

/* Background color name labels */
.bgc-n {
  font: var(--ts-micro-md-w) var(--ts-micro-md-s)/var(--ts-micro-md-lh) var(--fm);
  color: var(--sand);
}
.bgc-v {
  font: var(--ts-ui-w) var(--ts-ui-s)/var(--ts-ui-lh) var(--fm);
  color: var(--bl);
}

/* Variables display grid */
.vars {
  font: var(--ts-ui-w) var(--ts-ui-s)/1.8 var(--fm);
  color: var(--body);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
}
.vars dt {
  color: var(--sand);
  font-size: var(--ts-micro-md-s);
}
.vars dd {
  color: var(--ink);
  font-size: var(--ts-ui-s);
}

/* ================================================================
   PALETTE
   ================================================================ */

.pal {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(20, 24, 39, 0.08);
}
.pal div {
  transition: transform 0.3s;
}
.pal div:hover {
  transform: scaleY(1.15);
  z-index: 2;
}

/* ================================================================
   COLUMN GRIDS
   ================================================================ */

.grd {
  display: grid;
  gap: 16px;
}
.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.g4 {
  grid-template-columns: repeat(4, 1fr);
}
.g5 {
  grid-template-columns: repeat(5, 1fr);
}
.g60 {
  grid-template-columns: 60% 1fr;
}
.gd {
  background: var(--w);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}
.gd-t {
  font: var(--ts-h5-w) var(--ts-h5-s)/1 var(--fh);
  color: var(--ink);
  letter-spacing: 0.02em;
}