/*
 * TIA Africa — Global Foundation + Header/Footer CSS
 * Version: 1.5.0
 * Session: Redesign foundation — base design tokens, global header (transparent-over-hero,
 *          sticky-condensing, grouped Discover/Stay/Read dropdown nav, slide-in mobile drawer),
 *          and multi-column editorial footer (newsletter + social + auto copyright).
 *          v1.1.0 adds the canonical TYPOGRAPHY SYSTEM (see note below).
 * Date: 2026-06-10 (v1.0.0) · 2026-06-10 (v1.1.0 — typography system)
 *       · 2026-06-22 (v1.2.0 — Cuisine listing: dish-card grid, §7)
 *       · 2026-06-22 (v1.3.0 — Cuisine experiences: exp-card grid, §8)
 *       · 2026-06-23 (v1.5.0 — modern-standards hardening + all CPT archive grids + quiet-luxury)
 *
 * v1.5.0 — BEST-OF-BREED HARDENING + CPT ARCHIVE GRIDS (ui-ux-pro-max design session,
 *   referenced against reference/featured-page.html, the-vibe-page.html, city-guide-final.html;
 *   north star = GQ/Vogue/Esquire/NYT-Travel editorial, NOT the engine's "Liquid Glass" suggestion).
 *   Three workstreams:
 *   (A) MODERN-STANDARDS HARDENING (§0B + inline):
 *       • Metric-override fallback @font-face (Georgia/Arial tuned to Fraunces/Mona Sans) → kills
 *         the swap-in layout shift (CLS) before the variable woff2 lands.
 *       • scrollbar-gutter:stable → drawer/search open no longer jumps the page.
 *       • scroll-margin-top on anchor targets → fixed header never covers #content / in-page jumps.
 *       • text-wrap:balance on headlines, text-wrap:pretty on body/deks → magazine-grade ragging.
 *       • Cross-document View Transitions (@view-transition: navigation auto) + a `tia-hero` morph
 *         name shared by archive card image (set on click via tia-global.js) and the single hero —
 *         app-like hero morph on an MPA. Fully guarded by prefers-reduced-motion.
 *   (B) QUIET-LUXURY DIAL-BACK (§1B/§2/§9): gold demoted from large fills to a restraint accent
 *       (eyebrows, labels, hairlines, hover, quote mark, thin CTA). Ink + serif + whitespace lead.
 *       Hero titles render INK (not gold-fill); the gold-slab quote/CTA blocks become warm-paper
 *       with gold accents. The brand stays gold — just spoken quietly.
 *   (C) CPT ARCHIVE GRIDS (§9–§13): ports feature-/vibe-/city-/dest- card grids + shared furniture
 *       (archive hero, categories bar, events strip, quote, CTA, inline newsletter) from the
 *       references into the canonical sheet — tokenized (Fraunces/Mona Sans + --tia-*), per-CPT
 *       namespaced (Layer 3), and POSITIONALLY sized via the approved nth-child sequences
 *       (CLAUDE.md §4) on BOTH the static card and JetEngine's .jet-listing-grid__item — never a
 *       hand size-class, never card_size (Layer 1, permanently deprecated). Same dual-path adapter
 *       proven on exp-card (§8). v1.4.0 skipped to keep the asset version aligned with this drop.
 *
 * v1.3.0 — CUISINE EXPERIENCES (exp-card). Ports the experiences-grid/exp-card
 *   editorial hero grid from reference/cuisine-page.html, tokenized and
 *   namespaced `exp-` (§8). Card sizing is the positional nth-child sequence
 *   (cap 7) from CLAUDE.md §4 — NOT the reference's hand-applied size classes —
 *   so size comes from grid POSITION, never a meta field (card_size stays
 *   deprecated per ARCHITECTURE_LESSONS Layer 1). Works as a curated static
 *   section OR a dynamic JetEngine Listing Grid (a documented adapter re-maps
 *   the sequence onto Jet's .jet-listing-grid__item wrapper). No new tokens.
 *
 * v1.2.0 — CUISINE LISTING (dish-card). Ports the dishes-grid/dish-card block
 *   from reference/cuisine-page.html into the canonical stylesheet, tokenized
 *   (Fraunces/Mona Sans + --tia-* tokens replace the reference's raw Tiempos/
 *   Inter/hex) and namespaced `dish-` per ARCHITECTURE_LESSONS Layer 3. This is
 *   the render layer for JetEngine Query 53 (cuisine_for_current_destination —
 *   city-scoped section on City-Guide/Vibe-Spot singles) and Query 54
 *   (cuisine_all_global_hub — global hub); BOTH drive the SAME listing item.
 *   Card CSS ships now so the surface is ready the instant 53/54 are re-saved in
 *   the Query Builder UI (the MCP-written tax_query overlay must be re-saved
 *   once to become non-fatal — see ia-tags-cuisine-architecture notes). Section
 *   7 header documents the exact JetEngine Listing Item markup. No new fonts,
 *   no new tokens — pure reuse of the v1.1.0 foundation.
 * Stack: Hello Elementor Child + JetEngine 3.7.10 + Elementor Basic + JetThemeCore
 * Delivery: Child-theme enqueued stylesheet (versioned, git-tracked) — canonical CSS home
 *           per ARCHITECTURE_LESSONS §1/§4. NOT Customizer Additional CSS.
 *
 * v1.1.0 — TYPOGRAPHY SYSTEM (single source of truth for type; no per-widget font overrides):
 *   Establishes the publication's first real web-font load — self-hosted, OFL-licensed, variable.
 *     • Serif  = Fraunces  → display + headline + subhead + long-form BODY (optical-size axis).
 *     • Sans   = Mona Sans → eyebrows, nav, labels, buttons, captions (functional/UI).
 *   Tiempos REMOVED from all stacks (commercial Klim face, no license confirmed). Inter dropped
 *   from the UI slot (flagged generic by frontend-design). Fonts are self-hosted in ../fonts —
 *   no Google Fonts / CDN call (privacy + performance). font-display: swap; two faces preloaded
 *   from functions.php to avoid FOUT shift. Until the .woff2 binaries are dropped in, the
 *   Georgia / system-sans fallback stack renders with zero breakage.
 *   Binary drop-in + latin/latin-ext subsetting steps: post_design/README_Typography.md.
 *
 * JS dependency: assets/js/tia-global.js (vanilla, no framework). Required because CSS alone
 *   cannot (a) toggle the header's solid/condensed state on scroll, (b) detect hero vs.
 *   non-hero pages to choose overlay vs. solid header mode, (c) open/close the mobile drawer
 *   and the search field, or (d) drive accessible submenu toggling. All structure and dynamic
 *   content remain real Elementor/JetEngine widgets — this file styles them; the JS only
 *   toggles state classes. Nothing here replaces builder-editable structure.
 *
 * Namespacing: every selector is prefixed `tia-` (header: tia-header*, footer: tia-footer*,
 *   tokens: --tia-*). No bare element/global selectors that could collide with Hello,
 *   Elementor, or Jet output. Specificity kept low; the only documented !important uses are
 *   noted inline where Hello/Elementor base widget styles must be overridden.
 */

/* ============================================================================
   0. @font-face — self-hosted variable fonts (OFL). Files live in ../fonts.
   Variable: weight via numeric font-weight (wght axis); size via
   font-optical-sizing:auto (opsz axis). Custom SOFT/WONK axes left at their
   clean defaults (0/0) for reading. Subset: latin + latin-ext.
   ============================================================================ */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-Variable.woff2') format('woff2');
  font-weight: 300 900;          /* wght axis range */
  font-stretch: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-Italic-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-stretch: normal;
  font-style: italic;            /* leads / standfirsts / pull-quotes */
  font-display: swap;
}
@font-face {
  font-family: 'Mona Sans';
  src: url('../fonts/MonaSans-Variable.woff2') format('woff2');
  font-weight: 200 900;          /* wght axis range */
  font-stretch: 75% 125%;        /* wdth axis (kept at 100% in use) */
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------------------
   Metric-override fallback faces (v1.5.0). Each maps a system fallback to the
   real face's metrics so the swap from fallback → Fraunces/Mona Sans causes NO
   reflow (Cumulative Layout Shift ≈ 0). Used by the *-fallback families in the
   font stacks below. Values are tuned to the two variable faces; adjust only if
   the subset metrics change. Until the woff2 binaries land these fallbacks also
   render the page at the correct rhythm, so there is no "ugly then nice" jump.
   ---------------------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces-fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 102%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'MonaSans-fallback';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ============================================================================
   1. DESIGN TOKENS — the foundation the rest of the redesign inherits
   ============================================================================ */
:root {
  /* Brand gold system */
  --tia-gold-primary:   #987848;
  --tia-gold-mid:       #d4af37;
  --tia-gold-light:     #b09060;
  --tia-gold-deep:      #6f5631;
  --tia-orange:         #d97706;   /* secondary brand accent */

  /* Ink + neutrals */
  --tia-ink:            #1a1a1a;
  --tia-ink-soft:       #2a2a2a;
  --tia-text-secondary: #555555;
  --tia-text-muted:     #6b6b6b;
  --tia-text-faint:     #8a8a8a;

  /* Surfaces */
  --tia-bg:             #ffffff;
  --tia-bg-secondary:   #fafafa;
  --tia-bg-tertiary:    #f5f3ef;   /* warm paper */
  --tia-cream:          #fff1e0;   /* on-image text + warm panels */
  --tia-charcoal:       #161310;   /* warm near-black — footer ground */
  --tia-charcoal-soft:  #211d18;

  /* On-image contrast tokens */
  --tia-cream-overlay:  #fff1e0;
  --tia-crimson-accent: #8b1a1c;
  --tia-navy:           #0a3055;

  /* Hairlines / borders */
  --tia-line:           rgba(26, 26, 26, 0.10);
  --tia-line-strong:    rgba(26, 26, 26, 0.16);
  --tia-line-ondark:    rgba(255, 241, 224, 0.16);

  /* Typography — canonical families (self-hosted, OFL, variable). v1.1.0.
     Single source of truth — do not set font-family on individual Elementor widgets. */
  --tia-font-serif: 'Fraunces', 'Fraunces-fallback', Georgia, 'Times New Roman', serif;                         /* display + headline + body */
  --tia-font-sans:  'Mona Sans', 'MonaSans-fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* UI / functional */

  /* Role weights (map to the wght axis of both variable families) */
  --tia-wt-body:     400;
  --tia-wt-medium:   500;
  --tia-wt-semibold: 600;
  --tia-wt-bold:     700;
  --tia-wt-display:  800;
  --tia-wt-black:    900;

  /* Modular type scale (1.25 minor third), fluid where it earns it */
  --tia-fs-eyebrow: 0.72rem;
  --tia-fs-nav:     0.82rem;
  --tia-fs-body:    clamp(1rem, 1.65vw, 1.18rem);
  --tia-fs-lead:    clamp(1.15rem, 2vw, 1.45rem);
  --tia-fs-h3:      clamp(1.4rem, 2.4vw, 1.9rem);
  --tia-fs-h2:      clamp(2rem, 4vw, 3.2rem);
  --tia-fs-h1:      clamp(3rem, 8vw, 6rem);
  --tia-fs-display: clamp(4rem, 12vw, 11rem);

  --tia-tracking-eyebrow: 0.28em;
  --tia-tracking-nav:     0.16em;
  --tia-tracking-label:   0.16em;
  --tia-leading-tight:    1.05;
  --tia-leading-snug:     1.3;
  --tia-leading-body:     1.62;

  /* Spacing scale */
  --tia-space-1: 4px;
  --tia-space-2: 8px;
  --tia-space-3: 12px;
  --tia-space-4: 16px;
  --tia-space-5: 24px;
  --tia-space-6: 32px;
  --tia-space-7: 48px;
  --tia-space-8: 64px;
  --tia-space-9: 96px;
  --tia-gutter:  clamp(20px, 5vw, 72px);   /* page side padding */
  --tia-maxw:    1800px;

  /* Header geometry */
  --tia-header-h:       96px;   /* resting height (over hero) */
  --tia-header-h-stuck: 68px;   /* condensed height */

  /* Motion */
  --tia-ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --tia-ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --tia-t-slow:      0.7s var(--tia-ease);
  --tia-t-mid:       0.4s var(--tia-ease);
  --tia-t-fast:      0.22s ease;

  /* Shape + elevation */
  --tia-radius:      3px;
  --tia-radius-pill: 50px;
  --tia-shadow-soft: 0 1px 0 var(--tia-line), 0 12px 34px rgba(26, 26, 26, 0.10);
  --tia-shadow-pop:  0 18px 60px rgba(22, 19, 16, 0.18);

  /* Gold gradients */
  --tia-gold-gradient:      linear-gradient(135deg, #987848 0%, #d4af37 48%, #987848 92%);
  --tia-gold-gradient-warm: linear-gradient(135deg, #b09060 0%, #d4af37 50%, #987848 100%);

  /* Z-index scale */
  --tia-z-header:  1000;
  --tia-z-drawer:  1100;
  --tia-z-scrim:   1090;
}

/* ============================================================================
   1B. BASE TYPOGRAPHY — applies the canonical system globally so the type load
   actually renders across the site. Tokens above are the single source; this
   maps roles to elements. Elementor/Jet headings inherit the families here
   rather than carrying per-widget font overrides.
   ============================================================================ */
body,
.elementor-widget-text-editor,
.elementor-widget-theme-post-content {
  font-family: var(--tia-font-serif);
  font-optical-sizing: auto;                 /* opsz tracks size on Fraunces */
  font-weight: var(--tia-wt-body);
  font-size: var(--tia-fs-body);
  line-height: var(--tia-leading-body);
  color: var(--tia-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;                         /* v1.5.0 — orphan/widow control on long-form prose */
}

/* Headlines — Fraunces, optical-sized. Sizes stay role-mapped; weight by level. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--tia-font-serif);
  font-optical-sizing: auto;
  color: var(--tia-ink);
  line-height: var(--tia-leading-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;                        /* v1.5.0 — even headline ragging (magazine-grade) */
}
h1, .elementor-heading-title.elementor-size-xl { font-weight: var(--tia-wt-display); font-size: var(--tia-fs-h1); }
h2, .elementor-heading-title.elementor-size-large { font-weight: var(--tia-wt-bold); font-size: var(--tia-fs-h2); line-height: 1.08; }
h3 { font-weight: var(--tia-wt-semibold); font-size: var(--tia-fs-h3); line-height: var(--tia-leading-snug); letter-spacing: -0.01em; }
h4, h5, h6 { font-weight: var(--tia-wt-semibold); letter-spacing: -0.005em; }

/* Role utility classes — reuse these instead of styling type ad hoc in widgets */
.tia-display {
  font-family: var(--tia-font-serif);
  font-optical-sizing: auto;
  font-weight: var(--tia-wt-black);
  font-size: var(--tia-fs-display);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.tia-lead {
  font-family: var(--tia-font-serif);
  font-style: italic;
  font-weight: var(--tia-wt-body);
  font-size: var(--tia-fs-lead);
  line-height: 1.4;
  color: var(--tia-ink-soft);
}
.tia-pullquote {
  font-family: var(--tia-font-serif);
  font-style: italic;
  font-weight: var(--tia-wt-medium);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.tia-eyebrow {
  font-family: var(--tia-font-sans);
  font-weight: var(--tia-wt-semibold);
  font-size: var(--tia-fs-eyebrow);
  letter-spacing: var(--tia-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tia-gold-primary);
}
.tia-caption {
  font-family: var(--tia-font-sans);
  font-weight: var(--tia-wt-medium);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--tia-text-muted);
}
/* Functional/UI text defaults to the sans (buttons, forms, menus) */
.elementor-button, button, input, select, textarea {
  font-family: var(--tia-font-sans);
}

/* ============================================================================
   1C. MODERN-STANDARDS FOUNDATION (v1.5.0)
   Browser-native robustness wins that apply across every page. All progressive
   — older engines ignore unknown props and fall back cleanly.
   ============================================================================ */

/* Stable scrollbar gutter — reserving the gutter means toggling the mobile
   drawer / search overlay (which locks body scroll) no longer shifts the page
   sideways. Modern, zero-JS fix for the classic scroll-lock jump. */
html {
  scrollbar-gutter: stable;
}

/* Fixed-header anchor offset — the skip link (#content) and any in-page anchor
   must clear the fixed header instead of hiding beneath it. Scoped to real
   jump targets so it never adds stray spacing elsewhere. */
:where(#content, [id]):target,
#content {
  scroll-margin-top: calc(var(--tia-header-h-stuck) + var(--tia-space-5));
}

/* ---- Cross-document View Transitions (MPA hero morph) ----------------------
   `navigation: auto` opts this same-origin site into native cross-document view
   transitions: a smooth crossfade between pages by default, and a true MORPH of
   any element that carries the SAME view-transition-name on both pages. The
   single-post hero image is named `tia-hero` (below); tia-global.js stamps the
   same name on a card's image the instant it is clicked, so the archive card
   image morphs into the article hero on navigation. Progressive enhancement —
   unsupported browsers just navigate normally. ------------------------------- */
@view-transition {
  navigation: auto;
}

/* The destination hero image on single templates. Add CSS Class `tia-hero-media`
   to the single's hero image/section so it is the morph target. (Archive cards
   get the matching name dynamically on click — see tia-global.js.) */
.tia-hero-media {
  view-transition-name: tia-hero;
}

/* ============================================================================
   2. GLOBAL HEADER
   Built as a JetThemeCore header template (Entire Site). Structure + dynamic
   content (logo, WP nav menu, search, CTA, social) stay as Elementor/Jet
   widgets; this styles the CSS Classes assigned to them. State classes
   (.is-stuck, .tia-header--solid, .is-open) are toggled by tia-global.js.
   ============================================================================ */
.tia-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--tia-z-header);
  display: flex;
  align-items: center;
  height: var(--tia-header-h);
  padding: 0 var(--tia-gutter);
  background: transparent;
  /* Top scrim so cream nav stays legible over bright hero imagery */
  box-shadow: none;
  transition:
    height var(--tia-t-mid),
    background var(--tia-t-mid),
    box-shadow var(--tia-t-mid),
    border-color var(--tia-t-mid);
  border-bottom: 1px solid transparent;
}

/* Scrim pseudo-element — only in overlay (transparent) mode */
.tia-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(22, 19, 16, 0.55) 0%, rgba(22, 19, 16, 0) 100%);
  opacity: 1;
  transition: opacity var(--tia-t-mid);
}

/* Condensed (scrolled) + solid (no-hero pages) share the solid treatment */
.tia-header.is-stuck,
.tia-header.tia-header--solid {
  height: var(--tia-header-h-stuck);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: var(--tia-shadow-soft);
  border-bottom-color: var(--tia-line);
}
.tia-header.is-stuck::before,
.tia-header.tia-header--solid::before {
  opacity: 0;
}

/* Inner rail — flat structure: brand | nav | actions */
.tia-header__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--tia-maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--tia-space-6);
}

/* ---- Brand / wordmark ---- */
.tia-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  font-family: var(--tia-font-serif);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  color: var(--tia-cream);
  transition: color var(--tia-t-mid);
}
.tia-brand .tia-brand__mark { /* "AFRICA" — lighter weight pairing */
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.06em;
  opacity: 0.92;
}
.is-stuck .tia-brand,
.tia-header--solid .tia-brand { color: var(--tia-ink); }

/* If a real logo image widget is used instead of the wordmark */
.tia-brand img { display: block; height: 34px; width: auto; }

/* ---- Primary nav (WP menu widget) ---- */
.tia-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
.tia-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tia-nav li { position: relative; }
.tia-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  font-family: var(--tia-font-sans);
  font-size: var(--tia-fs-nav);
  font-weight: 600;
  letter-spacing: var(--tia-tracking-nav);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tia-cream);
  padding: 10px 0;
  position: relative;
  transition: color var(--tia-t-fast);
}
.is-stuck .tia-nav a,
.tia-header--solid .tia-nav a { color: var(--tia-ink); }

/* Gold underline draw on hover / current */
.tia-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1.5px;
  background: var(--tia-gold-gradient);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--tia-t-mid);
}
.tia-nav a:hover,
.tia-nav .current-menu-item > a,
.tia-nav .current-menu-parent > a { color: var(--tia-gold-mid); }
.is-stuck .tia-nav a:hover,
.tia-header--solid .tia-nav a:hover,
.is-stuck .tia-nav .current-menu-item > a,
.tia-header--solid .tia-nav .current-menu-item > a { color: var(--tia-gold-primary); }
.tia-nav a:hover::after,
.tia-nav .current-menu-item > a::after,
.tia-nav .current-menu-parent > a::after { transform: scaleX(1); }

/* Dropdown caret on grouped items (Discover / Stay / Read) */
.tia-nav .menu-item-has-children > a::before {
  content: "";
  order: 2;
  width: 6px;
  height: 6px;
  margin-left: 0.4ch;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--tia-t-fast);
  opacity: 0.7;
}
.tia-nav .menu-item-has-children:hover > a::before {
  transform: translateY(0) rotate(45deg);
}

/* ---- Dropdown panels ---- */
.tia-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 230px;
  padding: 10px;
  margin: 0;
  list-style: none;
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--tia-line);
  border-top: 2px solid var(--tia-gold-primary);
  border-radius: var(--tia-radius);
  box-shadow: var(--tia-shadow-pop);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--tia-t-fast), transform var(--tia-t-fast), visibility var(--tia-t-fast);
}
.tia-nav li:hover > .sub-menu,
.tia-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.tia-nav .sub-menu a {
  display: block;
  width: 100%;
  padding: 11px 14px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--tia-ink) !important; /* override inherited overlay/cream color in any header state */
  border-radius: 2px;
  transition: background var(--tia-t-fast), color var(--tia-t-fast);
}
.tia-nav .sub-menu a::after { display: none; }
.tia-nav .sub-menu a:hover {
  background: var(--tia-bg-tertiary);
  color: var(--tia-gold-primary) !important;
  padding-left: 18px;
}

/* ---- Header actions (search, CTA, social, burger) ---- */
.tia-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--tia-space-4);
}

.tia-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--tia-cream);
  cursor: pointer;
  transition: color var(--tia-t-fast), background var(--tia-t-fast);
}
.tia-iconbtn svg { width: 21px; height: 21px; display: block; }
.tia-iconbtn:hover { color: var(--tia-gold-mid); background: rgba(255, 241, 224, 0.12); }
.is-stuck .tia-iconbtn,
.tia-header--solid .tia-iconbtn { color: var(--tia-ink); }
.is-stuck .tia-iconbtn:hover,
.tia-header--solid .tia-iconbtn:hover { color: var(--tia-gold-primary); background: var(--tia-bg-tertiary); }

/* CTA pill (e.g. Subscribe) — Elementor Button widget with class .tia-cta */
.tia-cta,
.tia-cta.elementor-button {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 22px;
  font-family: var(--tia-font-sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tia-cream);
  background: transparent;
  border: 1.5px solid rgba(255, 241, 224, 0.55);
  border-radius: var(--tia-radius-pill);
  transition: all var(--tia-t-mid);
}
.tia-cta:hover {
  color: var(--tia-charcoal);
  background: var(--tia-cream);
  border-color: var(--tia-cream);
}
.is-stuck .tia-cta,
.tia-header--solid .tia-cta {
  color: #fff;
  background: var(--tia-gold-gradient);
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(152, 120, 72, 0.28);
}
.is-stuck .tia-cta:hover,
.tia-header--solid .tia-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(152, 120, 72, 0.42);
}

/* ---- Inline search field (toggled by search icon) ---- */
.tia-search {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--tia-space-3);
  padding: 0 var(--tia-gutter);
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--tia-t-mid), transform var(--tia-t-mid), visibility var(--tia-t-mid);
}
.tia-header.is-search-open .tia-search {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.tia-search input[type="search"],
.tia-search input[type="text"] {
  flex: 1 1 auto;
  border: 0;
  border-bottom: 2px solid var(--tia-line-strong);
  background: transparent;
  font-family: var(--tia-font-serif);
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  color: var(--tia-ink);
  padding: 10px 4px;
  outline: none;
}
.tia-search input::placeholder { color: var(--tia-text-faint); font-style: italic; }
.tia-search .tia-iconbtn { color: var(--tia-ink); }

/* ---- Mobile burger (hidden on desktop) ---- */
.tia-burger { display: none; }

/* ============================================================================
   3. MOBILE DRAWER (slide-in from right) + SCRIM
   Markup lives in the header template (an off-canvas container of widgets).
   tia-global.js toggles .is-open on <body>/.tia-drawer and traps focus.
   ============================================================================ */
.tia-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--tia-z-scrim);
  background: rgba(22, 19, 16, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tia-t-mid), visibility var(--tia-t-mid);
}
.tia-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--tia-z-drawer);
  width: min(420px, 86vw);
  height: 100%;
  height: 100dvh;
  padding: clamp(24px, 6vw, 44px);
  background: var(--tia-cream);
  color: var(--tia-ink);
  box-shadow: -30px 0 80px rgba(22, 19, 16, 0.30);
  transform: translateX(100%);
  transition: transform 0.5s var(--tia-ease);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--tia-space-6);
}
body.tia-drawer-open .tia-scrim { opacity: 1; visibility: visible; }
body.tia-drawer-open .tia-drawer { transform: translateX(0); }

.tia-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--tia-space-5);
  border-bottom: 1px solid var(--tia-line);
}
.tia-drawer__brand {
  font-family: var(--tia-font-serif);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--tia-ink);
  text-decoration: none;
}

/* Drawer nav — large serif editorial links + accordion submenus */
.tia-drawer nav ul { list-style: none; margin: 0; padding: 0; }
.tia-drawer > nav > ul { display: flex; flex-direction: column; }
.tia-drawer nav > ul > li { border-bottom: 1px solid var(--tia-line); }
.tia-drawer nav a {
  display: block;
  padding: 16px 0;
  font-family: var(--tia-font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tia-ink);
  text-decoration: none;
  transition: color var(--tia-t-fast), padding-left var(--tia-t-fast);
}
.tia-drawer nav a:hover { color: var(--tia-gold-primary); padding-left: 8px; }

/* Drawer submenu (accordion) — collapsed by default, .is-expanded reveals */
.tia-drawer .sub-menu {
  max-height: 0;
  overflow: hidden;
  padding-left: 14px;
  border-left: 2px solid var(--tia-gold-light);
  transition: max-height var(--tia-t-mid);
}
.tia-drawer .menu-item-has-children.is-expanded > .sub-menu { max-height: 420px; }
.tia-drawer .sub-menu a {
  font-family: var(--tia-font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 11px 0;
}

.tia-drawer__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--tia-space-4);
  padding-top: var(--tia-space-5);
  border-top: 1px solid var(--tia-line);
}
.tia-drawer__social { display: flex; gap: var(--tia-space-3); }
.tia-drawer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--tia-line-strong);
  border-radius: 50%;
  color: var(--tia-ink);
  transition: all var(--tia-t-fast);
}
.tia-drawer__social a:hover { background: var(--tia-gold-primary); border-color: var(--tia-gold-primary); color: #fff; }
.tia-drawer__social svg { width: 18px; height: 18px; }

/* ============================================================================
   4. GLOBAL FOOTER — multi-column editorial
   JetThemeCore footer template (Entire Site). Columns are real Elementor
   columns/JetEngine menu widgets; the year auto-updates via tia-global.js.
   ============================================================================ */
.tia-footer {
  background: var(--tia-charcoal);
  color: var(--tia-cream);
  padding: clamp(56px, 8vw, 110px) var(--tia-gutter) 0;
  font-family: var(--tia-font-serif);
  position: relative;
}
.tia-footer::before { /* top gold hairline */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--tia-gold-gradient);
}
.tia-footer__inner {
  max-width: var(--tia-maxw);
  margin: 0 auto;
}

/* Brand + statement + newsletter band */
.tia-footer__top {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  padding-bottom: clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--tia-line-ondark);
}
.tia-footer__brand {
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  margin: 0 0 var(--tia-space-4);
  color: var(--tia-cream);
}
.tia-footer__brand em { font-weight: 400; font-style: italic; color: var(--tia-gold-light); }
.tia-footer__statement {
  max-width: 46ch;
  font-size: var(--tia-fs-lead);
  line-height: var(--tia-leading-snug);
  color: rgba(255, 241, 224, 0.74);
  margin: 0;
}

/* Newsletter */
.tia-newsletter__label {
  font-family: var(--tia-font-sans);
  font-size: var(--tia-fs-eyebrow);
  letter-spacing: var(--tia-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tia-gold-light);
  margin: 0 0 var(--tia-space-4);
}
.tia-newsletter__form {
  display: flex;
  align-items: stretch;
  border-bottom: 2px solid var(--tia-line-ondark);
  transition: border-color var(--tia-t-fast);
}
.tia-newsletter__form:focus-within { border-color: var(--tia-gold-mid); }
.tia-newsletter__form input[type="email"] {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  outline: none;
  padding: 14px 2px;
  font-family: var(--tia-font-serif);
  font-size: 1.15rem;
  color: var(--tia-cream);
}
.tia-newsletter__form input::placeholder { color: rgba(255, 241, 224, 0.45); }
.tia-newsletter__form button {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: var(--tia-gold-mid);
  font-family: var(--tia-font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 6px;
  cursor: pointer;
  transition: color var(--tia-t-fast);
}
.tia-newsletter__form button:hover { color: var(--tia-cream); }

/* Link columns */
.tia-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(40px, 5vw, 72px) 0;
}
.tia-footer__col h4 {
  font-family: var(--tia-font-sans);
  font-size: var(--tia-fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tia-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tia-gold-light);
  margin: 0 0 var(--tia-space-5);
}
.tia-footer__col ul { list-style: none; margin: 0; padding: 0; }
.tia-footer__col li { margin-bottom: var(--tia-space-3); }
.tia-footer__col a {
  font-size: 1.02rem;
  color: rgba(255, 241, 224, 0.78);
  text-decoration: none;
  transition: color var(--tia-t-fast), padding-left var(--tia-t-fast);
}
.tia-footer__col a:hover { color: var(--tia-cream); padding-left: 5px; }

/* Bottom bar — social + auto copyright + legal */
.tia-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--tia-space-4);
  padding: var(--tia-space-6) 0;
  border-top: 1px solid var(--tia-line-ondark);
}
.tia-footer__social { display: flex; gap: var(--tia-space-3); }
.tia-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--tia-line-ondark);
  border-radius: 50%;
  color: var(--tia-cream);
  transition: all var(--tia-t-fast);
}
.tia-footer__social a:hover { background: var(--tia-gold-primary); border-color: var(--tia-gold-primary); transform: translateY(-3px); }
.tia-footer__social svg { width: 18px; height: 18px; }
.tia-footer__legal {
  font-family: var(--tia-font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(255, 241, 224, 0.55);
}
.tia-footer__legal a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--tia-line-ondark); }
.tia-footer__legal a:hover { color: var(--tia-cream); }

/* ============================================================================
   5. RESPONSIVE — 1200px tablet, 768px mobile
   ============================================================================ */
@media (max-width: 1200px) {
  :root { --tia-header-h: 84px; --tia-header-h-stuck: 64px; }
  .tia-footer__top { grid-template-columns: 1fr; gap: var(--tia-space-6); }
  .tia-footer__cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  /* Header collapses to brand + actions + burger; desktop nav hidden */
  .tia-nav,
  .tia-header__actions .tia-cta { display: none; }
  .tia-burger { display: inline-flex; }

  .tia-header__inner { justify-content: space-between; gap: var(--tia-space-4); }
  .tia-header__actions { gap: var(--tia-space-2); }

  .tia-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--tia-space-6); }
  .tia-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 460px) {
  .tia-footer__cols { grid-template-columns: 1fr; }
}

/* ============================================================================
   6. ACCESSIBILITY + MOTION
   ============================================================================ */
.tia-header a:focus-visible,
.tia-iconbtn:focus-visible,
.tia-cta:focus-visible,
.tia-drawer a:focus-visible,
.tia-footer a:focus-visible,
.tia-newsletter__form button:focus-visible {
  outline: 2px solid var(--tia-gold-mid);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip-link helper (place a .tia-skip anchor first in the header template) */
.tia-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: calc(var(--tia-z-drawer) + 1);
  background: var(--tia-ink);
  color: var(--tia-cream);
  padding: 12px 18px;
  font-family: var(--tia-font-sans);
  font-size: 0.85rem;
  border-radius: 0 0 var(--tia-radius) 0;
}
.tia-skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  .tia-header,
  .tia-header::before,
  .tia-nav a::after,
  .tia-nav .sub-menu,
  .tia-search,
  .tia-scrim,
  .tia-drawer,
  .tia-drawer .sub-menu,
  .tia-cta,
  .tia-footer__social a,
  .tia-footer__col a,
  .tia-drawer nav a,
  .dish-card,
  .dish-img,
  .exp-card,
  .exp-img,
  .feature-card, .feature-img,
  .vibe-card, .vibe-img,
  .city-card, .city-img,
  .dest-card, .dest-img,
  .category-card, .event-card, .cta-button {
    transition: none !important; /* honor reduced-motion — documented exception */
  }
  /* Disable the View Transitions morph/crossfade for reduced-motion users. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ============================================================================
   7. CUISINE LISTING — dish-card (JetEngine Listing item + grid)
   ----------------------------------------------------------------------------
   Render target: reference/cuisine-page.html  →  .dishes-grid / .dish-card.
   Data source:   JetEngine Query 53 (cuisine_for_current_destination — the
                  city-scoped section injected on City-Guide + Vibe-Spot singles,
                  6/pp) and Query 54 (cuisine_all_global_hub — the global hub,
                  12/pp). BOTH feed the SAME listing item template below.
   Namespace:     `dish-` (per ARCHITECTURE_LESSONS Layer 3 — per-surface prefix).
                  Cuisine is a Tag (topic=cuisine), NOT a CPT; the prefix is the
                  presentation namespace, not a post-type. Card sizing is uniform
                  (auto-fit) — no nth-child sequence and no card_size meta.

   ── REQUIRED JetEngine Listing Item markup (build once in JetEngine ▸ Listings,
      "Listing source = Posts"; attach the listing to the Listing Grid widget
      that runs Query 53 or 54). The listing item ROOT carries .dish-card and is
      the post-link wrapper. Dynamic Field / macro hints in « » : ──────────────

      <a class="dish-card" href="«Permalink»">
        <img class="dish-img" src="«Featured image — size: large»"
             alt="«Post Title»" loading="lazy">
        <div class="dish-content">
          <span class="dish-location">«Post Terms: city (fallback topic)»</span>
          <h3 class="dish-name">«Post Title»</h3>
          <p class="dish-description">«Post Excerpt — trim ~22 words»</p>
        </div>
      </a>

   ── GRID WRAPPER: add the CSS class `dishes-grid` to the JetEngine Listing Grid
      widget. The rule below also targets the widget's inner
      `.jet-listing-grid__items` so the auto-fit grid wins over Jet's own column
      layout, and zeroes Jet's inline per-item widths.
   ── SECTION CHROME (Query 53 injection): wrap the grid in `.dish-section` with a
      `.dish-section__title` heading ("Cuisine in <City>"). The global hub
      (Query 54) uses the page hero (.tia-display + .tia-lead, §1B) instead, so
      no bespoke hero CSS is needed here.
   ============================================================================ */

/* Section panel — the city-scoped injection block (Query 53) */
.dish-section {
  background: var(--tia-bg-secondary);
  padding: clamp(48px, 6vw, 80px) var(--tia-gutter);
  border-radius: var(--tia-radius);
  margin: var(--tia-space-9) 0;
}
.dish-section__title {
  font-family: var(--tia-font-serif);
  font-optical-sizing: auto;
  font-weight: var(--tia-wt-black);
  font-size: var(--tia-fs-h2);
  line-height: var(--tia-leading-tight);
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--tia-ink);
  margin: 0 0 var(--tia-space-8);
}

/* Grid — uniform auto-fit cards. Applied to the Listing Grid widget
   (.dishes-grid) and forced onto Jet's inner item wrapper so the auto-fit grid
   overrides the plugin's default column flex/grid output. */
.dishes-grid,
.dishes-grid .jet-listing-grid__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 2.4vw, 35px);
  max-width: 1400px;
  margin: 0 auto;
}
/* Neutralise Jet's inline per-item width/margins (documented override —
   JetEngine sets a percentage width inline on each grid item). */
.dishes-grid .jet-listing-grid__item {
  width: auto !important;
  margin: 0 !important;
}

/* Card — works as <a> (link wrapper) or <div>. */
.dish-card {
  display: block;
  background: var(--tia-bg);
  border: 1px solid var(--tia-line);
  border-radius: var(--tia-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--tia-t-mid), box-shadow var(--tia-t-mid), border-color var(--tia-t-mid);
}
.dish-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--tia-shadow-soft);
  border-color: transparent;
}

.dish-img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform var(--tia-t-slow);
}
.dish-card:hover .dish-img { transform: scale(1.05); }

.dish-content { padding: clamp(24px, 2.2vw, 30px) clamp(22px, 2vw, 28px); }

.dish-location {
  display: block;
  font-family: var(--tia-font-sans);
  font-weight: var(--tia-wt-bold);
  font-size: var(--tia-fs-eyebrow);
  letter-spacing: var(--tia-tracking-label);
  text-transform: uppercase;
  color: var(--tia-gold-primary);
  margin-bottom: var(--tia-space-2);
}
.dish-name {
  font-family: var(--tia-font-serif);
  font-optical-sizing: auto;
  font-weight: var(--tia-wt-display);
  font-size: var(--tia-fs-h3);
  line-height: var(--tia-leading-snug);
  letter-spacing: -0.01em;
  color: var(--tia-ink);
  margin: 0 0 var(--tia-space-3);
}
.dish-description {
  font-family: var(--tia-font-serif);
  font-size: var(--tia-fs-body);
  line-height: var(--tia-leading-snug);
  color: var(--tia-text-muted);
  margin: 0;
}

/* Responsive — auto-fit already reflows; collapse hard to 1-col on phones and
   trim image height. */
@media (max-width: 768px) {
  .dishes-grid,
  .dishes-grid .jet-listing-grid__items { grid-template-columns: 1fr; }
  .dish-section { padding: clamp(40px, 8vw, 60px) var(--tia-space-6); }
  .dish-img { height: 220px; }
}

/* ============================================================================
   8. CUISINE EXPERIENCES — exp-card (editorial hero grid)
   ----------------------------------------------------------------------------
   Render target: reference/cuisine-page.html → .experiences-grid / .exp-card.
   Role:          the curated editorial collection grid that sits ABOVE the
                  dish-card listing on the Cuisine hub — large image tiles with
                  a label + display title + standfirst (e.g. "Fine Dining /
                  Award-Winning Tables"). Each tile links to a collection /
                  Topic archive. Separate from the dish-card listing (§7) — this
                  grid is NOT driven by Query 53/54.
   Namespace:     `exp-` (ARCHITECTURE_LESSONS Layer 3 — per-surface prefix).
   SIZING LAW:    card size is assigned by GRID POSITION via nth-child (the
                  approved Cuisine/Experiences sequence, cap 7, CLAUDE.md §4) —
                  never a meta field, never a hand class. Markup is identical for
                  every tile; CSS position decides the span/height. card_size
                  stays deprecated.

   ── PATH A — curated static section (the reference build; Elementor HTML/Image
      widgets or an HTML block). Every tile is identical markup; emit 1–7 in
      publish order: ─────────────────────────────────────────────────────────

      <div class="experiences-container">
        <div class="experiences-grid">
          <a class="exp-card" href="«collection / Topic archive URL»">
            <img class="exp-img" src="«image»" alt="«tile title»" loading="lazy">
            <div class="exp-overlay">
              <span class="exp-label">«kicker»</span>
              <h2 class="exp-title">«display title»</h2>
              <p class="exp-description">«standfirst»</p>
            </div>
          </a>
          … up to 7 .exp-card tiles (8th+ auto-hidden by the cap) …
        </div>
      </div>

   ── PATH B — dynamic JetEngine Listing Grid (if the tiles become a query of
      "experience"-tagged posts). Build a listing item whose ROOT is .exp-card
      (same inner markup as Path A; exp-label = a term/eyebrow field, exp-title =
      Post Title, exp-description = excerpt). Add the CSS class `experiences-grid`
      to the Listing Grid widget and set its Columns control to 1 so Jet does not
      impose its own column count — the rules below supply the 12-col grid and
      re-map the nth-child sequence onto Jet's .jet-listing-grid__item wrapper.
   ============================================================================ */

/* Pull-up container — lifts the grid over the hero's bottom fade. */
.experiences-container {
  max-width: 1850px;
  margin: -10vh auto 0;
  padding: 0 4vw 120px;
  position: relative;
  z-index: 10;
}

/* The 12-column grid. Class sits on the static wrapper (Path A) or the
   JetEngine widget (Path B). */
.experiences-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
  margin: 60px 0;
}
/* Any non-card direct child (Elementor/Jet nesting in Path B) spans full width
   so the real grid lives one level down on .jet-listing-grid__items — prevents
   the widget wrapper being squished into a single 1/12 track. */
.experiences-grid > :not(.exp-card) { grid-column: 1 / -1; }

/* Path B adapter: the inner Jet items wrapper becomes the 12-col grid. */
.experiences-grid .jet-listing-grid__items {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
  margin: 0;
}
.experiences-grid .jet-listing-grid__item { margin: 0 !important; }
.experiences-grid .jet-listing-grid__item > .exp-card { height: 100%; }

/* Card — works as <a> (link tile) or <div>. */
.exp-card {
  position: relative;
  display: block;
  border-radius: var(--tia-radius);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform var(--tia-t-slow);
}
.exp-card:hover { transform: translateY(-14px); z-index: 5; }

.exp-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tia-t-slow);
}
.exp-card:hover .exp-img { transform: scale(1.06); }

.exp-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(28px, 3vw, 42px);
  background: linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.86) 58%, transparent 100%);
}
.exp-label {
  display: block;
  font-family: var(--tia-font-sans);
  font-weight: var(--tia-wt-bold);
  font-size: var(--tia-fs-eyebrow);
  letter-spacing: var(--tia-tracking-label);
  text-transform: uppercase;
  color: var(--tia-gold-primary);
  margin-bottom: var(--tia-space-2);
}
.exp-title {
  font-family: var(--tia-font-serif);
  font-optical-sizing: auto;
  font-weight: var(--tia-wt-black);
  font-size: clamp(2.2rem, 4.5vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--tia-ink);
  margin: 0 0 var(--tia-space-3);
}
.exp-description {
  font-family: var(--tia-font-serif);
  font-style: italic;
  font-size: var(--tia-fs-lead);
  line-height: 1.4;
  color: var(--tia-text-secondary);
  max-width: 480px;
  margin: 0;
}

/* ---- Positional sizing — the approved cap-7 sequence (CLAUDE.md §4).
   Each rule targets whichever element is the DIRECT grid child: the static
   .exp-card (Path A) or JetEngine's .jet-listing-grid__item (Path B). ---- */
.experiences-grid > .exp-card:nth-child(1),
.experiences-grid .jet-listing-grid__item:nth-child(1) { grid-column: span 12; height: 78vh; }  /* hero   */
.experiences-grid > .exp-card:nth-child(2),
.experiences-grid .jet-listing-grid__item:nth-child(2) { grid-column: span 8;  height: 68vh; }  /* large  */
.experiences-grid > .exp-card:nth-child(3),
.experiences-grid .jet-listing-grid__item:nth-child(3) { grid-column: span 4;  height: 68vh; }  /* medium */
.experiences-grid > .exp-card:nth-child(4),
.experiences-grid > .exp-card:nth-child(5),
.experiences-grid .jet-listing-grid__item:nth-child(4),
.experiences-grid .jet-listing-grid__item:nth-child(5) { grid-column: span 6;  height: 60vh; }  /* regular */
.experiences-grid > .exp-card:nth-child(6),
.experiences-grid .jet-listing-grid__item:nth-child(6) { grid-column: span 4;  height: 82vh; }  /* tall   */
.experiences-grid > .exp-card:nth-child(7),
.experiences-grid .jet-listing-grid__item:nth-child(7) { grid-column: span 8;  height: 68vh; }  /* large  */
/* Cap: 7 — newest publish first; the rest rotate out automatically. */
.experiences-grid > .exp-card:nth-child(n+8),
.experiences-grid .jet-listing-grid__item:nth-child(n+8) { display: none; }

/* ---- Responsive — 1200px collapses the 12-col to 6-col (all tiles span 6,
   heights trimmed ~8vh); 768px goes single-column. nth-child(n) keeps the
   override specificity equal to the base sequence so source order wins. ---- */
@media (max-width: 1200px) {
  .experiences-grid,
  .experiences-grid .jet-listing-grid__items { grid-template-columns: repeat(6, 1fr); }

  .experiences-grid > .exp-card:nth-child(1),
  .experiences-grid .jet-listing-grid__item:nth-child(1) { grid-column: span 6; height: 70vh; }
  .experiences-grid > .exp-card:nth-child(2),
  .experiences-grid > .exp-card:nth-child(7),
  .experiences-grid .jet-listing-grid__item:nth-child(2),
  .experiences-grid .jet-listing-grid__item:nth-child(7) { grid-column: span 6; height: 65vh; }
  .experiences-grid > .exp-card:nth-child(3),
  .experiences-grid > .exp-card:nth-child(6),
  .experiences-grid .jet-listing-grid__item:nth-child(3),
  .experiences-grid .jet-listing-grid__item:nth-child(6) { grid-column: span 6; height: 60vh; }
  .experiences-grid > .exp-card:nth-child(4),
  .experiences-grid > .exp-card:nth-child(5),
  .experiences-grid .jet-listing-grid__item:nth-child(4),
  .experiences-grid .jet-listing-grid__item:nth-child(5) { grid-column: span 6; height: 56vh; }
}

@media (max-width: 768px) {
  .experiences-grid,
  .experiences-grid .jet-listing-grid__items { grid-template-columns: 1fr; gap: 26px; }
  .experiences-grid > .exp-card:nth-child(n),
  .experiences-grid .jet-listing-grid__item:nth-child(n) {
    grid-column: 1 / -1;
    height: 62vh;
    min-height: 480px;
  }
  .exp-overlay { padding: 34px; }
}

/* ============================================================================
   9. ARCHIVE PAGE FURNITURE (v1.5.0) — shared, page-level (NOT per-CPT) chrome
   ----------------------------------------------------------------------------
   The pieces every CPT archive shares: the full-bleed hero, the categories bar,
   the events strip, the reader quote, the closing CTA, and the inline newsletter.
   These are page-level classes (un-prefixed, as in the references) — the per-CPT
   CARD grids are §10–§13. Quiet-luxury: gold is an ACCENT (eyebrows, hairlines,
   quote mark, thin CTA); ink + serif + whitespace carry the page. The reference
   gold SLABS (quote bg, gold-fill hero text) are deliberately demoted here.
   ============================================================================ */

/* ---- Archive hero. `.hero-section` is also the tia-global.js hero marker, so
   non-hero pages auto-fall back to the solid header. Background image is set on
   the Elementor Section; this styles the structure + fade. ---- */
.hero-section {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(560px, 88vh, 1100px);
  margin: 0;
  overflow: hidden;
}
/* White fade so the wordmark/overlaid content and the grid pull-up read cleanly. */
.hero-section .hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 30%, rgba(255, 255, 255, 0.95) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--tia-maxw);
  margin: 0 auto;
  padding: 0 var(--tia-gutter) clamp(48px, 8vh, 120px);
}
/* Quiet-luxury hero title: INK editorial display, not the gold-fill of the
   references. Whitespace + scale do the work. Add `.hero-title--gold` only where
   a gold-fill headline is explicitly wanted. */
.hero-title {
  font-family: var(--tia-font-serif);
  font-optical-sizing: auto;
  font-weight: var(--tia-wt-black);
  font-size: var(--tia-fs-display);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--tia-ink);
  margin: 0 0 var(--tia-space-5);
  text-wrap: balance;
}
.hero-title--gold {
  background: var(--tia-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-subtitle {
  font-family: var(--tia-font-serif);
  font-style: italic;
  font-weight: var(--tia-wt-body);
  font-size: var(--tia-fs-lead);
  line-height: 1.4;
  color: var(--tia-ink-soft);
  max-width: 50ch;
  margin: 0;
}

/* ---- Categories bar (Featured archive). Quiet: warm-paper card, gold hairline
   accent on the left, gold eyebrow. ---- */
.categories-section {
  max-width: var(--tia-maxw);
  margin: -10vh auto 0;
  padding: 0 var(--tia-gutter) var(--tia-space-8);
  position: relative;
  z-index: 10;
}
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--tia-space-5);
  margin-bottom: var(--tia-space-9);
}
.category-card {
  background: var(--tia-bg-tertiary);
  padding: var(--tia-space-6) var(--tia-space-6);
  border-radius: var(--tia-radius);
  border-left: 3px solid var(--tia-gold-primary);
  transition: transform var(--tia-t-mid), background var(--tia-t-mid);
  cursor: pointer;
}
.category-card:hover { transform: translateY(-6px); background: #f1ede6; }
.category-tag {
  font-family: var(--tia-font-sans);
  font-size: var(--tia-fs-eyebrow);
  font-weight: var(--tia-wt-bold);
  letter-spacing: var(--tia-tracking-label);
  text-transform: uppercase;
  color: var(--tia-gold-primary);
  margin-bottom: var(--tia-space-3);
}
.category-description {
  font-family: var(--tia-font-serif);
  font-size: var(--tia-fs-body);
  line-height: var(--tia-leading-snug);
  color: var(--tia-text-secondary);
  margin-bottom: var(--tia-space-4);
}
.category-link {
  font-family: var(--tia-font-sans);
  font-size: 0.82rem;
  font-weight: var(--tia-wt-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tia-gold-primary);
  text-decoration: none;
  display: inline-block;
  transition: transform var(--tia-t-fast);
}
.category-link:hover { transform: translateX(5px); }

/* ---- Events strip (Vibe archive). Quiet: white card, gold hairline accent. ---- */
.events-section {
  background: var(--tia-bg-secondary);
  padding: clamp(56px, 7vw, 80px) var(--tia-gutter);
  border-radius: var(--tia-radius);
  margin: var(--tia-space-9) 0;
}
.events-section > h2 {
  text-align: center;
  font-size: var(--tia-fs-h2);
  font-weight: var(--tia-wt-black);
  margin: 0 0 var(--tia-space-8);
}
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--tia-space-7);
  max-width: 1450px;
  margin: 0 auto;
}
.event-card {
  background: var(--tia-bg);
  border-radius: var(--tia-radius);
  border-left: 4px solid var(--tia-gold-primary);
  overflow: hidden;
  transition: transform var(--tia-t-mid), box-shadow var(--tia-t-mid);
}
.event-card:hover { transform: translateY(-6px); box-shadow: var(--tia-shadow-soft); }
.event-content { padding: var(--tia-space-6) var(--tia-space-6); }
.event-type {
  font-family: var(--tia-font-sans);
  font-size: var(--tia-fs-eyebrow);
  font-weight: var(--tia-wt-bold);
  letter-spacing: var(--tia-tracking-label);
  text-transform: uppercase;
  color: var(--tia-gold-primary);
  margin-bottom: var(--tia-space-3);
}
.event-name {
  font-family: var(--tia-font-serif);
  font-weight: var(--tia-wt-display);
  font-size: var(--tia-fs-h3);
  line-height: var(--tia-leading-snug);
  color: var(--tia-ink);
  margin: 0 0 var(--tia-space-3);
}
.event-location {
  font-family: var(--tia-font-serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--tia-text-muted);
  margin: 0 0 var(--tia-space-2);
}
.event-description {
  font-family: var(--tia-font-serif);
  font-size: var(--tia-fs-body);
  line-height: var(--tia-leading-snug);
  color: var(--tia-text-muted);
  margin: 0;
}

/* ---- Reader quote. Quiet-luxury: warm-paper ground + ink text + oversized GOLD
   quote mark accent (the references' full gold slab is demoted). ---- */
.quote-section {
  position: relative;
  background: var(--tia-bg-tertiary);
  padding: clamp(56px, 7vw, 84px) var(--tia-gutter);
  border-radius: var(--tia-radius);
  margin: var(--tia-space-9) 0;
  overflow: hidden;
}
.quote-section::before {
  content: "\201C";
  position: absolute;
  top: -0.18em;
  left: 0.18em;
  font-family: var(--tia-font-serif);
  font-size: clamp(120px, 18vw, 220px);
  line-height: 1;
  color: var(--tia-gold-primary);
  opacity: 0.16;
  pointer-events: none;
}
.quote-section blockquote {
  position: relative;
  font-family: var(--tia-font-serif);
  font-style: italic;
  font-weight: var(--tia-wt-body);
  font-size: clamp(1.6rem, 3.1vw, 2.6rem);
  line-height: 1.4;
  color: var(--tia-ink);
  max-width: 60ch;
  margin: 0 auto var(--tia-space-5);
  text-align: center;
  text-wrap: balance;
}
.quote-section cite {
  display: block;
  text-align: center;
  font-family: var(--tia-font-sans);
  font-style: normal;
  font-size: 0.9rem;
  font-weight: var(--tia-wt-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tia-gold-deep);
}
/* State-brief alias: .quote-text / .quote-cite (Top-Destinations heading widgets). */
.quote-text { font-style: italic; color: var(--tia-ink); }
.quote-cite { color: var(--tia-gold-deep); letter-spacing: 0.16em; text-transform: uppercase; }

/* ---- Closing CTA. Quiet: airy paper section, ink heading, ONE restrained gold
   pill (solid, soft shadow — not the reference's heavy glow). Covers both the
   featured/vibe `.cta-section` and the city `.cta-block`, and the state-brief
   `.cta-heading` / `.cta-description` heading/text widgets. ---- */
.cta-section,
.cta-block {
  text-align: center;
  background: var(--tia-bg-secondary);
  border-radius: var(--tia-radius);
  padding: clamp(64px, 8vw, 96px) var(--tia-gutter);
  margin: var(--tia-space-9) 0;
}
.cta-section > h2, .cta-block > h2,
.cta-heading {
  font-size: var(--tia-fs-h2);
  font-weight: var(--tia-wt-black);
  line-height: 1.08;
  color: var(--tia-ink);
  margin: 0 0 var(--tia-space-5);
}
.cta-section > p, .cta-block > p,
.cta-description {
  font-family: var(--tia-font-serif);
  font-size: var(--tia-fs-lead);
  line-height: var(--tia-leading-body);
  color: var(--tia-text-secondary);
  max-width: 60ch;
  margin: 0 auto var(--tia-space-7);
}
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  padding: 18px 48px;
  font-family: var(--tia-font-sans);
  font-size: 0.84rem;
  font-weight: var(--tia-wt-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--tia-gold-primary);
  border: 0;
  border-radius: var(--tia-radius-pill);
  box-shadow: 0 8px 24px rgba(152, 120, 72, 0.22);
  cursor: pointer;
  transition: transform var(--tia-t-mid), box-shadow var(--tia-t-mid), background var(--tia-t-mid);
}
.cta-button:hover {
  transform: translateY(-3px);
  background: var(--tia-gold-deep);
  box-shadow: 0 14px 36px rgba(152, 120, 72, 0.32);
}

/* ---- Inline newsletter (can sit after a grid). Quiet-luxury: warm CHARCOAL
   ground (echoes the footer) with cream type — NOT the reference gold slab.
   Keep it OUT of the card grid so the nth-child card sequence stays clean. ---- */
.newsletter-inline {
  background: var(--tia-charcoal);
  color: var(--tia-cream);
  border-radius: var(--tia-radius);
  padding: clamp(48px, 6vw, 70px) var(--tia-gutter);
  text-align: center;
  margin: var(--tia-space-8) 0;
  position: relative;
}
.newsletter-inline::before { /* top gold hairline, matching the footer */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tia-gold-gradient);
  border-radius: var(--tia-radius) var(--tia-radius) 0 0;
}
.newsletter-inline h3 {
  font-size: var(--tia-fs-h2);
  font-weight: var(--tia-wt-black);
  color: var(--tia-cream);
  margin: 0 0 var(--tia-space-3);
}
.newsletter-inline p {
  font-family: var(--tia-font-serif);
  font-size: var(--tia-fs-lead);
  color: rgba(255, 241, 224, 0.8);
  margin: 0 auto var(--tia-space-7);
  max-width: 54ch;
}
.newsletter-form {
  display: flex;
  gap: var(--tia-space-3);
  max-width: 520px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.newsletter-input {
  flex: 1 1 250px;
  min-width: 240px;
  padding: 15px 20px;
  font-family: var(--tia-font-sans);
  font-size: 1rem;
  color: var(--tia-ink);
  background: var(--tia-cream);
  border: 1px solid transparent;
  border-radius: var(--tia-radius-pill);
  outline: none;
  transition: border-color var(--tia-t-fast);
}
.newsletter-input:focus-visible { border-color: var(--tia-gold-mid); }
.newsletter-button {
  padding: 15px 38px;
  font-family: var(--tia-font-sans);
  font-size: 0.82rem;
  font-weight: var(--tia-wt-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tia-charcoal);
  background: var(--tia-gold-mid);
  border: 0;
  border-radius: var(--tia-radius-pill);
  cursor: pointer;
  transition: background var(--tia-t-fast), transform var(--tia-t-fast);
}
.newsletter-button:hover { background: var(--tia-cream); transform: translateY(-2px); }

/* ----------------------------------------------------------------------------
   SHARED CARD-GRID SCAFFOLD NOTE (applies to §10–§13)
   Each CPT grid is its own namespace (Layer 3). Sizing is POSITIONAL nth-child
   per CLAUDE.md §4 — NEVER a hand size-class, NEVER card_size (Layer 1 dead).
   Every rule targets BOTH the static card (Path A) and JetEngine's
   .jet-listing-grid__item (Path B), exactly as exp-card (§8). The grid must hold
   ONLY cards as direct children — place newsletter/quote/CTA as siblings AFTER
   the grid so the nth-child count is never thrown off.
   View-transition hero morph: tia-global.js stamps view-transition-name:tia-hero
   on the clicked card's image just before navigation; the single's hero carries
   .tia-hero-media (§1C) with the same name, so the image morphs across pages.
   ---------------------------------------------------------------------------- */

/* ============================================================================
   10. FEATURED ARTICLES — feature-card grid (cap 9, CLAUDE.md §4)
   ============================================================================ */
.features-container {
  max-width: var(--tia-maxw);
  margin: -10vh auto 0;
  padding: 0 var(--tia-gutter) clamp(64px, 10vh, 120px);
  position: relative;
  z-index: 10;
}
.features-grid,
.features-grid .jet-listing-grid__items {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
  margin: 60px 0;
}
.features-grid > :not(.feature-card) { grid-column: 1 / -1; } /* tolerate Path-B wrappers */
.features-grid .jet-listing-grid__item { margin: 0 !important; }
.features-grid .jet-listing-grid__item > .feature-card { height: 100%; }

.feature-card {
  position: relative;
  display: block;
  border-radius: var(--tia-radius);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  background: var(--tia-bg-tertiary);
  transition: transform var(--tia-t-slow);
}
.feature-card:hover { transform: translateY(-14px); z-index: 5; }
.feature-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--tia-t-slow);
}
.feature-card:hover .feature-img { transform: scale(1.06); }
.feature-overlay {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(28px, 3vw, 40px);
  background: linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.88) 54%, transparent 100%);
}
.feature-badge {
  display: inline-block;
  font-family: var(--tia-font-sans);
  font-size: 0.65rem;
  font-weight: var(--tia-wt-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: var(--tia-gold-primary);
  padding: 6px 14px;
  border-radius: var(--tia-radius);
  margin-bottom: var(--tia-space-3);
}
.feature-category {
  display: block;
  font-family: var(--tia-font-sans);
  font-size: var(--tia-fs-eyebrow);
  font-weight: var(--tia-wt-bold);
  letter-spacing: var(--tia-tracking-label);
  text-transform: uppercase;
  color: var(--tia-gold-primary);
  margin-bottom: var(--tia-space-3);
}
.feature-title {
  font-family: var(--tia-font-serif);
  font-optical-sizing: auto;
  font-weight: var(--tia-wt-black);
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--tia-ink);
  margin: 0 0 var(--tia-space-3);
  text-wrap: balance;
}
.feature-dek {
  font-family: var(--tia-font-serif);
  font-size: var(--tia-fs-body);
  line-height: var(--tia-leading-snug);
  color: var(--tia-text-secondary);
  max-width: 52ch;
  margin: 0 0 var(--tia-space-3);
}
.feature-meta {
  display: flex;
  gap: var(--tia-space-4);
  font-family: var(--tia-font-sans);
  font-size: 0.85rem;
  color: var(--tia-text-faint);
}

/* Positional sequence — cap 9 */
.features-grid > .feature-card:nth-child(1),
.features-grid .jet-listing-grid__item:nth-child(1) { grid-column: span 12; height: 80vh; } /* hero    */
.features-grid > .feature-card:nth-child(2),
.features-grid > .feature-card:nth-child(7),
.features-grid .jet-listing-grid__item:nth-child(2),
.features-grid .jet-listing-grid__item:nth-child(7) { grid-column: span 8; height: 68vh; }  /* large   */
.features-grid > .feature-card:nth-child(3),
.features-grid .jet-listing-grid__item:nth-child(3) { grid-column: span 4; height: 68vh; }   /* medium  */
.features-grid > .feature-card:nth-child(4),
.features-grid > .feature-card:nth-child(5),
.features-grid > .feature-card:nth-child(8),
.features-grid > .feature-card:nth-child(9),
.features-grid .jet-listing-grid__item:nth-child(4),
.features-grid .jet-listing-grid__item:nth-child(5),
.features-grid .jet-listing-grid__item:nth-child(8),
.features-grid .jet-listing-grid__item:nth-child(9) { grid-column: span 6; height: 58vh; }   /* regular */
.features-grid > .feature-card:nth-child(6),
.features-grid .jet-listing-grid__item:nth-child(6) { grid-column: span 4; height: 82vh; }   /* tall    */
.features-grid > .feature-card:nth-child(n+10),
.features-grid .jet-listing-grid__item:nth-child(n+10) { display: none; }

/* ============================================================================
   11. VIBE SPOTS — vibe-card grid (cap 10, CLAUDE.md §4)
   ============================================================================ */
.vibe-container {
  max-width: var(--tia-maxw);
  margin: -11vh auto 0;
  padding: 0 var(--tia-gutter) clamp(64px, 10vh, 120px);
  position: relative;
  z-index: 10;
}
.vibe-grid,
.vibe-grid .jet-listing-grid__items {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
  margin: 60px 0;
}
.vibe-grid > :not(.vibe-card) { grid-column: 1 / -1; }
.vibe-grid .jet-listing-grid__item { margin: 0 !important; }
.vibe-grid .jet-listing-grid__item > .vibe-card { height: 100%; }

.vibe-card {
  position: relative;
  display: block;
  border-radius: var(--tia-radius);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform var(--tia-t-slow);
}
.vibe-card:hover { transform: translateY(-14px); z-index: 5; }
.vibe-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--tia-t-slow);
}
.vibe-card:hover .vibe-img { transform: scale(1.06); }
.vibe-overlay {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(30px, 3.2vw, 44px);
  background: linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.87) 56%, transparent 100%);
}
.vibe-label {
  font-family: var(--tia-font-sans);
  font-size: var(--tia-fs-eyebrow);
  font-weight: var(--tia-wt-bold);
  letter-spacing: var(--tia-tracking-label);
  text-transform: uppercase;
  color: var(--tia-gold-primary);
  margin-bottom: var(--tia-space-2);
}
.vibe-title {
  font-family: var(--tia-font-serif);
  font-optical-sizing: auto;
  font-weight: var(--tia-wt-black);
  font-size: clamp(2.3rem, 4.8vw, 5rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--tia-ink);
  margin: 0 0 var(--tia-space-3);
  text-wrap: balance;
}
.vibe-description {
  font-family: var(--tia-font-serif);
  font-style: italic;
  font-size: var(--tia-fs-body);
  line-height: 1.4;
  color: var(--tia-text-secondary);
  max-width: 490px;
  margin: 0;
}

/* Positional sequence — cap 10 */
.vibe-grid > .vibe-card:nth-child(1),
.vibe-grid .jet-listing-grid__item:nth-child(1) { grid-column: span 12; height: 80vh; } /* hero   */
.vibe-grid > .vibe-card:nth-child(2),
.vibe-grid > .vibe-card:nth-child(7),
.vibe-grid .jet-listing-grid__item:nth-child(2),
.vibe-grid .jet-listing-grid__item:nth-child(7) { grid-column: span 8; height: 70vh; }  /* large  */
.vibe-grid > .vibe-card:nth-child(3),
.vibe-grid .jet-listing-grid__item:nth-child(3) { grid-column: span 4; height: 70vh; }   /* medium */
.vibe-grid > .vibe-card:nth-child(4),
.vibe-grid > .vibe-card:nth-child(5),
.vibe-grid .jet-listing-grid__item:nth-child(4),
.vibe-grid .jet-listing-grid__item:nth-child(5) { grid-column: span 6; height: 62vh; }   /* regular */
.vibe-grid > .vibe-card:nth-child(6),
.vibe-grid .jet-listing-grid__item:nth-child(6) { grid-column: span 4; height: 86vh; }   /* tall   */
.vibe-grid > .vibe-card:nth-child(8),
.vibe-grid > .vibe-card:nth-child(9),
.vibe-grid > .vibe-card:nth-child(10),
.vibe-grid .jet-listing-grid__item:nth-child(8),
.vibe-grid .jet-listing-grid__item:nth-child(9),
.vibe-grid .jet-listing-grid__item:nth-child(10) { grid-column: span 4; height: 56vh; }  /* small  */
.vibe-grid > .vibe-card:nth-child(n+11),
.vibe-grid .jet-listing-grid__item:nth-child(n+11) { display: none; }

/* ============================================================================
   12. CITY GUIDES — city-card grid (cap 10, CLAUDE.md §4)
   ============================================================================ */
.cities-container {
  max-width: var(--tia-maxw);
  margin: -10vh auto 0;
  padding: 0 var(--tia-gutter) clamp(64px, 10vh, 120px);
  position: relative;
  z-index: 10;
}
.cities-grid,
.cities-grid .jet-listing-grid__items {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 30px;
  margin: 60px 0;
}
.cities-grid > :not(.city-card) { grid-column: 1 / -1; }
.cities-grid .jet-listing-grid__item { margin: 0 !important; }
.cities-grid .jet-listing-grid__item > .city-card { height: 100%; }

.city-card {
  position: relative;
  display: block;
  border-radius: var(--tia-radius);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform var(--tia-t-slow);
}
.city-card:hover { transform: translateY(-12px); z-index: 5; }
.city-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--tia-t-slow);
}
.city-card:hover .city-img { transform: scale(1.06); }
.city-overlay {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(28px, 3vw, 40px);
  background: linear-gradient(to top, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.8) 60%, transparent 100%);
}
.city-country {
  font-family: var(--tia-font-sans);
  font-size: var(--tia-fs-eyebrow);
  font-weight: var(--tia-wt-bold);
  letter-spacing: var(--tia-tracking-label);
  text-transform: uppercase;
  color: var(--tia-gold-primary);
  margin-bottom: var(--tia-space-2);
}
.city-name {
  font-family: var(--tia-font-serif);
  font-optical-sizing: auto;
  font-weight: var(--tia-wt-black);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tia-ink);
  margin: 0 0 var(--tia-space-2);
  text-wrap: balance;
}
.city-description {
  font-family: var(--tia-font-serif);
  font-style: italic;
  font-size: var(--tia-fs-body);
  line-height: 1.4;
  color: var(--tia-text-secondary);
  margin: 0;
}

/* Positional sequence — cap 10 (xl opener) */
.cities-grid > .city-card:nth-child(1),
.cities-grid .jet-listing-grid__item:nth-child(1) { grid-column: span 12; height: 75vh; } /* xl     */
.cities-grid > .city-card:nth-child(2),
.cities-grid > .city-card:nth-child(7),
.cities-grid .jet-listing-grid__item:nth-child(2),
.cities-grid .jet-listing-grid__item:nth-child(7) { grid-column: span 8; height: 70vh; }   /* large  */
.cities-grid > .city-card:nth-child(3),
.cities-grid .jet-listing-grid__item:nth-child(3) { grid-column: span 4; height: 70vh; }    /* medium */
.cities-grid > .city-card:nth-child(4),
.cities-grid > .city-card:nth-child(5),
.cities-grid .jet-listing-grid__item:nth-child(4),
.cities-grid .jet-listing-grid__item:nth-child(5) { grid-column: span 6; height: 60vh; }    /* regular */
.cities-grid > .city-card:nth-child(6),
.cities-grid .jet-listing-grid__item:nth-child(6) { grid-column: span 4; height: 85vh; }    /* tall   */
.cities-grid > .city-card:nth-child(8),
.cities-grid > .city-card:nth-child(9),
.cities-grid > .city-card:nth-child(10),
.cities-grid .jet-listing-grid__item:nth-child(8),
.cities-grid .jet-listing-grid__item:nth-child(9),
.cities-grid .jet-listing-grid__item:nth-child(10) { grid-column: span 4; height: 55vh; }   /* small  */
.cities-grid > .city-card:nth-child(n+11),
.cities-grid .jet-listing-grid__item:nth-child(n+11) { display: none; }

/* ============================================================================
   13. TOP DESTINATIONS — dest-card grid (cap 10, CLAUDE.md §4)
   card_size meta REMOVED — nth-child controls all sizing (state-brief §2/§4 are
   superseded; this is the canonical render layer for the dest- listing).
   ============================================================================ */
.destinations-container {
  max-width: var(--tia-maxw);
  margin: -10vh auto 0;
  padding: 0 var(--tia-gutter) clamp(64px, 10vh, 120px);
  position: relative;
  z-index: 10;
}
.destinations-grid,
.destinations-grid-container,
.destinations-grid .jet-listing-grid__items {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 35px;
  margin: 60px 0;
}
.destinations-grid > :not(.dest-card),
.destinations-grid-container > :not(.dest-card) { grid-column: 1 / -1; }
.destinations-grid .jet-listing-grid__item { margin: 0 !important; }
.destinations-grid .jet-listing-grid__item > .dest-card { height: 100%; }

.dest-card {
  position: relative;
  display: block;
  border-radius: var(--tia-radius);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform var(--tia-t-slow);
}
.dest-card:hover { transform: translateY(-14px); z-index: 5; }
.dest-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--tia-t-slow);
}
.dest-card:hover .dest-img { transform: scale(1.06); }
.dest-overlay {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(28px, 3vw, 40px);
  background: linear-gradient(to top, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.8) 60%, transparent 100%);
}
.dest-country {
  font-family: var(--tia-font-sans);
  font-size: var(--tia-fs-eyebrow);
  font-weight: var(--tia-wt-bold);
  letter-spacing: var(--tia-tracking-label);
  text-transform: uppercase;
  color: var(--tia-gold-primary);
  margin-bottom: var(--tia-space-2);
}
.dest-name {
  font-family: var(--tia-font-serif);
  font-optical-sizing: auto;
  font-weight: var(--tia-wt-black);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tia-ink);
  margin: 0 0 var(--tia-space-2);
  text-wrap: balance;
}
.dest-tagline {
  font-family: var(--tia-font-serif);
  font-style: italic;
  font-size: var(--tia-fs-body);
  line-height: 1.4;
  color: var(--tia-text-secondary);
  margin: 0;
}

/* Positional sequence — cap 10 (xl opener), same rhythm as City Guides */
.destinations-grid > .dest-card:nth-child(1),
.destinations-grid-container > .dest-card:nth-child(1),
.destinations-grid .jet-listing-grid__item:nth-child(1) { grid-column: span 12; height: 75vh; }
.destinations-grid > .dest-card:nth-child(2),
.destinations-grid > .dest-card:nth-child(7),
.destinations-grid-container > .dest-card:nth-child(2),
.destinations-grid-container > .dest-card:nth-child(7),
.destinations-grid .jet-listing-grid__item:nth-child(2),
.destinations-grid .jet-listing-grid__item:nth-child(7) { grid-column: span 8; height: 70vh; }
.destinations-grid > .dest-card:nth-child(3),
.destinations-grid-container > .dest-card:nth-child(3),
.destinations-grid .jet-listing-grid__item:nth-child(3) { grid-column: span 4; height: 70vh; }
.destinations-grid > .dest-card:nth-child(4),
.destinations-grid > .dest-card:nth-child(5),
.destinations-grid-container > .dest-card:nth-child(4),
.destinations-grid-container > .dest-card:nth-child(5),
.destinations-grid .jet-listing-grid__item:nth-child(4),
.destinations-grid .jet-listing-grid__item:nth-child(5) { grid-column: span 6; height: 60vh; }
.destinations-grid > .dest-card:nth-child(6),
.destinations-grid-container > .dest-card:nth-child(6),
.destinations-grid .jet-listing-grid__item:nth-child(6) { grid-column: span 4; height: 85vh; }
.destinations-grid > .dest-card:nth-child(8),
.destinations-grid > .dest-card:nth-child(9),
.destinations-grid > .dest-card:nth-child(10),
.destinations-grid-container > .dest-card:nth-child(8),
.destinations-grid-container > .dest-card:nth-child(9),
.destinations-grid-container > .dest-card:nth-child(10),
.destinations-grid .jet-listing-grid__item:nth-child(8),
.destinations-grid .jet-listing-grid__item:nth-child(9),
.destinations-grid .jet-listing-grid__item:nth-child(10) { grid-column: span 4; height: 55vh; }
.destinations-grid > .dest-card:nth-child(n+11),
.destinations-grid-container > .dest-card:nth-child(n+11),
.destinations-grid .jet-listing-grid__item:nth-child(n+11) { display: none; }

/* ============================================================================
   14. CPT-GRID RESPONSIVE — 1200px → 6-col, 768px → 1-col (all four grids)
   nth-child(n) keeps override specificity equal to the base sequence so source
   order wins; every card collapses to full width on phones.
   ============================================================================ */
@media (max-width: 1200px) {
  .features-grid, .features-grid .jet-listing-grid__items,
  .vibe-grid, .vibe-grid .jet-listing-grid__items,
  .cities-grid, .cities-grid .jet-listing-grid__items,
  .destinations-grid, .destinations-grid-container,
  .destinations-grid .jet-listing-grid__items {
    grid-template-columns: repeat(6, 1fr);
  }
  .features-grid > .feature-card:nth-child(n),
  .features-grid .jet-listing-grid__item:nth-child(n),
  .vibe-grid > .vibe-card:nth-child(n),
  .vibe-grid .jet-listing-grid__item:nth-child(n),
  .cities-grid > .city-card:nth-child(n),
  .cities-grid .jet-listing-grid__item:nth-child(n),
  .destinations-grid > .dest-card:nth-child(n),
  .destinations-grid-container > .dest-card:nth-child(n),
  .destinations-grid .jet-listing-grid__item:nth-child(n) {
    grid-column: span 6;
    height: 60vh;
  }
  /* Keep the lead tile dominant on tablet */
  .features-grid > .feature-card:nth-child(1),
  .features-grid .jet-listing-grid__item:nth-child(1),
  .vibe-grid > .vibe-card:nth-child(1),
  .vibe-grid .jet-listing-grid__item:nth-child(1),
  .cities-grid > .city-card:nth-child(1),
  .cities-grid .jet-listing-grid__item:nth-child(1),
  .destinations-grid > .dest-card:nth-child(1),
  .destinations-grid-container > .dest-card:nth-child(1),
  .destinations-grid .jet-listing-grid__item:nth-child(1) { grid-column: span 6; height: 68vh; }
}

@media (max-width: 768px) {
  .features-grid, .features-grid .jet-listing-grid__items,
  .vibe-grid, .vibe-grid .jet-listing-grid__items,
  .cities-grid, .cities-grid .jet-listing-grid__items,
  .destinations-grid, .destinations-grid-container,
  .destinations-grid .jet-listing-grid__items {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .features-grid > .feature-card:nth-child(n),
  .features-grid .jet-listing-grid__item:nth-child(n),
  .vibe-grid > .vibe-card:nth-child(n),
  .vibe-grid .jet-listing-grid__item:nth-child(n),
  .cities-grid > .city-card:nth-child(n),
  .cities-grid .jet-listing-grid__item:nth-child(n),
  .destinations-grid > .dest-card:nth-child(n),
  .destinations-grid-container > .dest-card:nth-child(n),
  .destinations-grid .jet-listing-grid__item:nth-child(n) {
    grid-column: 1 / -1;
    height: 62vh;
    min-height: 480px;
  }
  .feature-overlay, .vibe-overlay, .city-overlay, .dest-overlay { padding: 32px; }
  .categories-grid { grid-template-columns: 1fr; }
  .events-grid { grid-template-columns: 1fr; }
  .events-section, .quote-section, .cta-section, .cta-block { padding: 60px var(--tia-space-6); }
  .newsletter-form { flex-direction: column; }
  .newsletter-input { min-width: 100%; }
}