/*
Theme Name: MXNOW Child
Theme URI: https://mxnowtravel.com
Description: MXNOW! editorial design system — magazine-style luxury Mexico travel agency aesthetic. Built from the proven working CSS that ran on the live site through 2026-06-03.
Author: MXNOW Travel LLC
Author URI: https://mxnowtravel.com
Template: grandtour
Version: 1.0.22
License: Proprietary
Text Domain: mxnow-child
*/

/* === Reset CSS variables that some pages reference but block 10 doesn't define === */
:root {
  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --body: 'Fraunces', 'EB Garamond', Georgia, serif;
  --ink: #1A1A1A;
  --ink-soft: #555;
  --ink-faint: #8A8A8A;
  --bg: #FBFAF6;
  --hairline: #E2DFD7;
  --label-red: #A02530;
  --label-green: #2F5D43;
  --warm: #FBFAF6;
  --cream-green: #CFA;
  --white: #FFFFFF;
}

/* === HIGH-PRIORITY TYPOGRAPHY OVERRIDES — beat GrandTour\'s injected Poppins/Bebas === */
body, .mxnow, .mxnow-page,
body h1, body h2, body h3, body h4, body h5, body h6,
.mxnow h1, .mxnow h2, .mxnow h3, .mxnow h4, .mxnow h5, .mxnow h6 {
  font-family: var(--body) !important;
}
body h1, body h2, body h3, body h4, body h5, body h6,
.hero h1, .hero h2, .legal-hero h1, .mx-closing h2, .mx-closing .mx-h2,
.section-head h2, .intro-section h2, .editorial-caption strong,
.hotels h3, .restaurants h3, .restaurants h4, .resto-category h4,
.day-text h3, .itinerary h2, .facts .fact .value, .legal-section h2 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
}
body .eyebrow, body .label, body .chapter-label, body .day-label,
.eyebrow, .label, .chapter-label, .day-label,
.mx-ribbon .mx-nav-inner a, .mx-ribbon .mx-nav-sep, .mx-ribbon a.cta, .mx-ribbon a.nav-cta {
  font-family: var(--sans) !important;
}
body em, .mxnow em, .hero em, h1 em, h2 em, h3 em {
  font-family: var(--serif) !important;
  font-style: italic;
}

/* === HOMEPAGE SLIDER HERO — fix text visibility over dark background === */
.mx-home-hero {
  position: relative;
  width: 100%;
  height: 90vh;
  min-height: 600px;
  overflow: hidden;
  background: #1A1A1A;
}
.mx-home-hero .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
  background-size: cover;
  background-position: center;
}
.mx-home-hero .slide.active { opacity: 1; }
.mx-home-hero .slide video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mx-home-hero .overlay {
  position: absolute;
  inset: 0;
  padding: 48px;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 10;
  background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
}
.mx-home-hero .overlay > * { pointer-events: auto; }
.mx-home-hero .overlay h1,
body .mx-home-hero .overlay h1,
.mxnow .mx-home-hero .overlay h1 {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(48px, 6vw, 88px) !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
  max-width: 760px;
  margin: 0 !important;
}
@media (max-width: 880px) {
  .mx-home-hero { height: 75vh; min-height: 480px; }
  .mx-home-hero .overlay { padding: 24px; }
  .mx-home-hero .overlay h1 { font-size: 42px !important; max-width: 100%; }
}

/* === sr-only utility — hides the "Skip to content" link and other screen-reader-only elements === */
.sr-only,
body .sr-only,
a.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* === MASTHEAD ALIASES — map header.php class names to editorial design tokens ===
   header.php uses .mx-ribbon/.row/.left/.right/.brand-mark/.byline/.mx-nav-inner
   Editorial design system uses .ribbon/.ribbon-inner/.brand/.brand-byline/.nav-links
   This block matches both naming conventions so the masthead renders correctly.
*/
.mx-ribbon {
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
  padding: 0;
}
.mx-ribbon .row {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.mx-ribbon .left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}
.mx-ribbon a.brand-mark {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}
.mx-ribbon a.brand-mark img,
.mx-ribbon .brand-img {
  height: 36px !important;
  width: auto !important;
  display: block;
  max-width: none;
}
.mx-ribbon .byline,
.mx-ribbon .left .byline {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 25px !important;
  color: #555 !important;
  white-space: nowrap;
  line-height: 1;
}
.mx-ribbon nav.right {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
}
.mx-ribbon .mx-nav-inner {
  display: flex;
  align-items: center;
  gap: 0.95em;
}
.mx-ribbon .mx-nav-inner a {
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  font-size: 12px !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink) !important;
  text-decoration: none !important;
  white-space: nowrap;
  padding: 8px 0;
  border-bottom: 0 !important;
}
.mx-ribbon .mx-nav-inner a:hover {
  color: var(--label-red) !important;
}
.mx-ribbon .mx-nav-sep {
  color: var(--ink-faint);
  font-weight: 300;
  user-select: none;
  pointer-events: none;
}
.mx-ribbon a.cta,
.mx-ribbon a.nav-cta {
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  padding: 12px 22px !important;
  border: 1px solid var(--label-red) !important;
  background: transparent !important;
  transition: background-color 0.18s ease, color 0.18s ease;
  margin-left: 0.5em;
}
.mx-ribbon a.cta:hover,
.mx-ribbon a.nav-cta:hover {
  background: var(--label-red) !important;
  color: #fff !important;
}

/* Trips hover dropdown */
.mx-ribbon .mx-trips-dd {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.mx-ribbon .mx-trips-dd .mx-trips-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg);
  border: 1px solid var(--hairline);
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 260px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s;
  z-index: 1000;
}
.mx-ribbon .mx-trips-dd:hover .mx-trips-menu,
.mx-ribbon .mx-trips-dd:focus-within .mx-trips-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0s;
}
.mx-ribbon .mx-trips-dd .mx-trips-menu a {
  font-family: var(--serif) !important;
  font-style: italic;
  font-weight: 400 !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink) !important;
  padding: 2px 0 !important;
}
.mx-ribbon .mx-trips-dd .mx-trips-menu a:hover {
  color: var(--label-red) !important;
}

@media (max-width: 880px) {
  .mx-ribbon .row { flex-wrap: wrap; gap: 16px; padding: 12px 24px; }
  .mx-ribbon a.brand-mark img { height: 28px !important; }
  .mx-ribbon .byline { display: none; }
  .mx-ribbon nav.right { width: 100%; justify-content: flex-end; }
  .mx-ribbon .mx-nav-inner { gap: 18px; }
  .mx-ribbon .mx-nav-inner a:not(.cta):not(.nav-cta) { font-size: 10px !important; letter-spacing: 0.18em; }
}

/* === BEGIN ORIGINAL EDITORIAL DESIGN SYSTEM (extracted from live page snapshot 2026-06-03) === */


/* === Block 10 === */
/* MXNOW-FOOTER-BYLINE-LIGHTEN-v1 */.mx-footer .footer-byline-stamp,.mx-footer .footer-byline-stamp *,.mx-footer .footer-byline-stamp a[href^="tel:"],.mx-footer .footer-byline-stamp a[href^="mailto:"]{color:#555 !important}/* MXNOW-FOOTER-LOGO-CENTER-v1 */.mx-footer .brand-mark img{transform:translateX(5.08%)}/* MXNOW-FOOTER-TIGHTEN-v7 */.mx-ribbon .mx-nav-inner > .mx-trips-dd .mx-trips-trigger::after,.mx-ribbon .mx-nav-inner > p > a:first-child::after{content:none !important}.mx-footer{padding:28px 0 20px !important}.mx-footer .row{gap:14px !important;row-gap:14px !important}.mx-footer .row > *{margin:0 !important;padding:0 !important}.mx-footer .row p{padding:4px 0 !important}.mx-footer .footer-byline-stamp{margin-top:14px !important;padding:0 !important}.mx-footer .footer-byline-stamp > *{margin:4px 0 !important;padding:4px 0 !important;line-height:1.4 !important}.mx-footer .footer-copyright-line{margin-top:14px !important;padding:0 !important}<!-- MXNOW-NAV-SEP-V1 -->/* MXNOW-NAV-PIPES-v6 */.mx-ribbon .mx-nav-inner{display:inline-flex;align-items:center;column-gap:0}.mx-ribbon .mx-nav-inner > p{display:inline-flex;align-items:center;gap:0.95em;margin:0}.mx-ribbon .mx-nav-inner > .mx-trips-dd{margin-right:0.95em}.mx-ribbon .mx-nav-inner > p > a.cta{margin-left:0.5em}.mx-nav-sep{display:inline-block;color:var(--faint);font-weight:300;letter-spacing:0;user-select:none;pointer-events:none}.mx-ribbon .byline{color:#555;font-weight:500;font-size:25px}@media(max-width:768px){.mx-nav-sep,.mx-ribbon .mx-nav-inner > .mx-trips-dd::after{display:none}.mx-ribbon .byline{font-size:18px}}/* MXNOW-NAV-PIPES-v5 */.mx-ribbon .mx-nav-inner > .mx-trips-dd .mx-trips-trigger::after,.mx-ribbon .mx-nav-inner > p > a:first-child::after{content:"|";display:inline-block;margin-left:0.70em;margin-right:0.45em;color:var(--faint);font-weight:300;pointer-events:none}.mx-ribbon .mx-nav-inner > p > a:nth-child(2)::after{content:none}.mx-ribbon .mx-nav-inner > p > a.cta{margin-left:1.1em}.mx-ribbon .byline{color:#555;font-weight:500;font-size:23px}@media(max-width:768px){.mx-ribbon .mx-nav-inner > .mx-trips-dd .mx-trips-trigger::after,.mx-ribbon .mx-nav-inner > p > a:first-child::after{display:none}.mx-ribbon .byline{font-size:18px}}@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Fraunces:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;500&display=swap');
  :root {
    --bg: #fbfaf6;
    --ink: #1a1a1a;
    --ink-soft: #555555;
    --ink-faint: #8a8a8a;
    --hairline: #e2dfd7;
    --label: #a02530;
    --label-alt: #2f5d43;
    --serif: "Cormorant Garamond", Georgia, serif;
    --serif-2: "Fraunces", Georgia, serif;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--serif-2);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }
  img { display: block; max-width: 100%; height: auto; }
  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
  .wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 48px; }
  /* ============== Labels ============== */
  .label {
    font-family: var(--sans);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--label);
    display: inline-block;
  }
  .label.green { color: var(--label-alt); }
  /* ============== Caption (for images) ============== */
  .caption {
    font-family: var(--sans);
    font-weight: 300;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-top: 12px;
  }
  /* ============== Ribbon ============== */
  .ribbon {
    border-bottom: 1px solid var(--hairline);
    padding: 24px 0;
    background: var(--bg);
  }
  .ribbon-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
  .brand { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); }
  .brand-mark {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 26px;
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .brand-mark .a1 { color: var(--ink); }
  .brand-mark .a2 { color: var(--label-alt); }
  .brand-mark .a3 { color: var(--label); }
  .brand-byline {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    color: var(--ink-soft);
  }
  .nav-links { display: flex; gap: 30px; align-items: center; }
  .nav-links a {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    transition: color 0.15s;
  }
  .nav-links a:hover { color: var(--label); }
  .nav-cta {
    border: 1px solid var(--label);
    padding: 10px 20px;
    color: var(--label) !important;
  }
  .nav-cta:hover { background: var(--label); color: white !important; }
  /* ============== HERO ============== */
  .hero {
    padding: 90px 0 100px;
    border-bottom: 1px solid var(--hairline);
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .hero-text .label { margin-bottom: 32px; }
  .hero h1 {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(56px, 6.5vw, 96px);
    line-height: 0.98;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 30px;
  }
  .hero h1 em { font-style: italic; font-weight: 400; }
  .hero .tagline {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(22px, 2vw, 26px);
    line-height: 1.45;
    color: var(--ink-soft);
    max-width: 460px;
  }
  .hero-image {
    aspect-ratio: 3/4;
    overflow: hidden;
  }
  .hero-image img { width: 100%; height: 100%; object-fit: cover; }
  /* ============== FACTS ============== */
  .facts {
    padding: 70px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .facts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .fact { padding: 0 32px; border-left: 1px solid var(--hairline); }
  .fact:first-child { border-left: none; padding-left: 0; }
  .fact .label { display: block; margin-bottom: 14px; }
  .fact .value {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.25;
    color: var(--ink);
  }
  /* ============== INTRO + IMAGE ============== */
  .intro-section {
    padding: 100px 0 80px;
    border-bottom: 1px solid var(--hairline);
  }
  .intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .intro-text .label { margin-bottom: 28px; }
  .intro-text p {
    font-family: var(--serif-2);
    font-weight: 300;
    font-size: 21px;
    line-height: 1.65;
    color: var(--ink);
  }
  .intro-text p em { font-style: italic; }
  .intro-image { aspect-ratio: 4/5; overflow: hidden; }
  .intro-image img { width: 100%; height: 100%; object-fit: cover; }
  /* ============== FULL-BLEED EDITORIAL ============== */
  .editorial {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--hairline);
  }
  .editorial img {
    width: 100%;
    height: 70vh;
    min-height: 480px;
    object-fit: cover;
  }
  .editorial .editorial-caption {
    padding: 18px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  /* ============== SECTION HEAD ============== */
  .section-head { margin-bottom: 72px; max-width: 720px; }
  .section-head .label { margin-bottom: 22px; }
  .section-head h2 {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(40px, 4.8vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.005em;
    color: var(--ink);
  }
  .section-head h2 em { font-style: italic; }
  /* ============== ITINERARY ============== */
  .itinerary { padding: 110px 0 40px; }
  .day {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    padding: 64px 0;
    border-top: 1px solid var(--hairline);
  }
  .day:first-of-type { border-top: none; padding-top: 0; }
  .day.reverse .day-image { order: 2; }
  .day.reverse .day-body { order: 1; }
  .day-image { aspect-ratio: 5/4; overflow: hidden; }
  .day-image img { width: 100%; height: 100%; object-fit: cover; }
  .day-mark { font-family: var(--sans); font-weight: 300; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--label); margin-bottom: 20px; }
  .day-mark .num { font-family: var(--serif); font-style: italic; font-size: 18px; margin-left: 6px; color: var(--label); letter-spacing: 0; }
  .day-body h3 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 36px; line-height: 1.15; margin-bottom: 22px; color: var(--ink); }
  .day-body p { font-family: var(--serif-2); font-weight: 300; font-size: 17px; line-height: 1.75; color: var(--ink); }
  .day-body p + p { margin-top: 16px; }
  .hotels { padding: 120px 0 80px; border-top: 1px solid var(--hairline); }
  .hotel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px 56px; }
  .hotel-image { aspect-ratio: 4/3; overflow: hidden; margin-bottom: 26px; }
  .hotel-image img { width: 100%; height: 100%; object-fit: cover; }
  .hotel-num { font-family: var(--sans); font-weight: 300; font-size: 11px; letter-spacing: 0.28em; color: var(--label); display: block; margin-bottom: 10px; }
  .hotel h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--ink); margin-bottom: 6px; }
  .hotel .character { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-soft); margin-bottom: 18px; }
  .hotel p { font-family: var(--serif-2); font-weight: 300; font-size: 16px; line-height: 1.7; color: var(--ink); margin-bottom: 14px; }
  .hotel .best, .hotel .tradeoff { font-family: var(--serif-2); font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
  .hotel .best strong, .hotel .tradeoff strong { color: var(--ink); font-weight: 500; }
  .restaurants { padding: 110px 0 80px; border-top: 1px solid var(--hairline); }
  .resto-with-image { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
  .resto-image { aspect-ratio: 4/5; overflow: hidden; position: sticky; top: 32px; }
  .resto-image img { width: 100%; height: 100%; object-fit: cover; }
  .resto-section { margin-top: 0; }
  .resto-section + .resto-section { margin-top: 44px; }
  .resto-section .label.green { display: block; margin-bottom: 22px; }
  .resto-list { display: grid; grid-template-columns: 1fr; gap: 0; }
  .resto { padding: 18px 0; border-top: 1px solid var(--hairline); }
  .resto:first-child { border-top: none; padding-top: 0; }
  .resto h4 { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--ink); margin-bottom: 4px; }
  .resto p { font-family: var(--serif-2); font-weight: 300; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
  .cta-section { position: relative; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
  .cta-image { width: 100%; height: 70vh; min-height: 520px; overflow: hidden; position: relative; }
  .cta-image img { width: 100%; height: 100%; object-fit: cover; }
  .cta-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%); }
  .cta-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 32px; z-index: 1; }
  .cta-overlay .label { color: rgba(255,255,255,0.85); margin-bottom: 28px; }
  .cta-overlay h2 { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(44px, 5.5vw, 68px); line-height: 1.1; color: white; margin-bottom: 24px; }
  .cta-overlay p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; color: rgba(255,255,255,0.92); max-width: 540px; margin: 0 auto 40px; line-height: 1.5; }
  .cta-button { display: inline-block; padding: 18px 44px; border: 1px solid white; color: white; text-decoration: none; font-family: var(--sans); font-weight: 300; font-size: 11.5px; letter-spacing: 0.3em; text-transform: uppercase; transition: all 0.2s; }
  .cta-button:hover { background: white; color: var(--ink); }
  .footer { padding: 64px 0 48px; }
  .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; }
  .footer .copy { font-family: var(--serif); font-size: 14px; color: var(--ink-soft); font-style: italic; }
  .footer-nav { display: flex; gap: 26px; flex-wrap: wrap; }
  .footer-nav a { font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
  .footer-nav a:hover { color: var(--label); }
  @media (max-width: 880px) {
    .wrap, .wrap-narrow, .editorial .editorial-caption { padding-left: 24px; padding-right: 24px; }
    .ribbon-inner { flex-wrap: wrap; gap: 16px; }
    .brand-byline { display: none; }
    .nav-links { width: 100%; justify-content: flex-end; gap: 18px; }
    .nav-links a:not(.nav-cta) { font-size: 10px; }
    .hero-grid, .intro-grid, .day, .resto-with-image, .hotel-grid { grid-template-columns: 1fr; gap: 36px; }
    .day.reverse .day-image { order: 0; }
    .facts-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
    .fact { border-left: none; padding: 0 16px; }
    .fact:nth-child(odd) { padding-left: 0; }
    .resto-image { position: static; }
  }
.mxn-badge { display: inline-flex; font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-weight: 700; line-height: 1; align-items: stretch; border-radius: 2px; overflow: hidden; vertical-align: middle; font-size: clamp(28px, 2.6vw, 38px); }
.mxn-badge__mx, .mxn-badge__now { border: 1px solid #1a1a1a; padding: 0; display: flex; align-items: center; letter-spacing: -0.04em; }
.mxn-badge__mx { background: #fff; color: #1a1a1a; border-right: none; padding-left: 0.05em; padding-right: 0.05em; }
.mxn-badge__now { background: #1a1a1a; border-left: none; padding-left: 0.05em; padding-right: 0.05em; }
.mxn-badge__now .mxn-n  { color: #2f5d43; }
.mxn-badge__now .mxn-o  { color: #fff; }
.mxn-badge__now .mxn-w  { color: #a02530; }
.mxn-badge__now .mxn-ex { color: #fff; letter-spacing: 0; }
.mxn-badge__lh { display: inline-block; line-height: 0.72; padding-top: 0.02em; padding-bottom: 0.02em; }
/* Override theme conflicts */
.label, span.label, div.label { color: #a02530 !important; }
.label.green, span.label.green, div.label.green { color: #2f5d43 !important; }
.fact { border-left: 1px solid #e2dfd7 !important; }
.fact:first-child { border-left: none !important; }
.day { border-top: 1px solid #e2dfd7 !important; }
.day:first-of-type { border-top: none !important; }
.section-head h2, .day-body h3, .hero h1, .hero .tagline, .intro-text p, .footer .copy, .hotel h3, .hotel .character { color: inherit; }
/* More breathing room from left/right edges */
.wrap { max-width: 1280px !important; margin: 0 auto !important; padding-left: 80px !important; padding-right: 80px !important; }
.editorial .editorial-caption { padding-left: 80px !important; padding-right: 80px !important; }
@media (max-width: 880px) { .wrap, .editorial .editorial-caption { padding-left: 28px !important; padding-right: 28px !important; } }
/* Tighter vertical rhythm — added 2026-05-31 */
.hero { padding-top: 64px !important; padding-bottom: 72px !important; }
.facts { padding-top: 48px !important; padding-bottom: 48px !important; }
.intro-section { padding-top: 64px !important; padding-bottom: 64px !important; }
.editorial-image { height: 45vh !important; min-height: 45vh !important; max-height: 45vh !important; }
.editorial-image img { height: 45vh !important; max-height: 45vh !important; }
.itinerary { padding-top: 64px !important; padding-bottom: 32px !important; }
.day { padding-top: 48px !important; padding-bottom: 48px !important; }
.hotels { padding-top: 64px !important; padding-bottom: 56px !important; }
.restaurants { padding-top: 64px !important; padding-bottom: 56px !important; }
.footer { padding-top: 48px !important; padding-bottom: 32px !important; }
.section-head { margin-bottom: 40px !important; }
/* Tightening pass 2 — bottom-heavy sections */
.editorial { height: 40vh !important; min-height: 40vh !important; max-height: 40vh !important; }
.editorial img { height: 40vh !important; max-height: 40vh !important; object-fit: cover !important; }
.day { padding-top: 32px !important; padding-bottom: 32px !important; }
.day-image { max-height: 360px !important; }
.day-image img { max-height: 360px !important; object-fit: cover !important; }
.section-head { margin-bottom: 28px !important; }
.hotels { padding-top: 48px !important; padding-bottom: 40px !important; }
.hotel-grid { gap: 48px 40px !important; }
.hotel-image { aspect-ratio: 3/2 !important; }
.hotel-image img, .hotel img { aspect-ratio: 3/2 !important; }
.restaurants { padding-top: 48px !important; padding-bottom: 40px !important; }
.resto-sticky { max-height: 480px !important; }
.resto-sticky img { max-height: 480px !important; object-fit: cover !important; }
.resto { padding-top: 12px !important; padding-bottom: 12px !important; }
.cta-section { padding-top: 48px !important; padding-bottom: 56px !important; }
.footer { padding-top: 36px !important; padding-bottom: 24px !important; }
.intro-grid img { max-height: 520px !important; object-fit: cover !important; }
/* Byline emphasis 2026-05-31 */
.brand-byline { font-size: 19px !important; color: #1a1a1a !important; }
/* Logo enlarged 2026-05-31 */
.mxn-badge, .mxn-badge__mx, .mxn-badge__now { font-size: 50px !important; }
/* 880px content max-width — LOCKED 2026-06-01, applies to every page */
.wrap { max-width: 880px !important; }
.wrap-narrow { max-width: 880px !important; }
.legal-body .wrap { max-width: 880px !important; }
.legal-hero .wrap { max-width: 880px !important; }
.about-hero .wrap { max-width: 880px !important; }
.about-dictionary .wrap { max-width: 880px !important; }
.about-section .wrap { max-width: 880px !important; }
.about-cta .wrap { max-width: 880px !important; }
/* REVERTED 2026-06-01 — image-forward pages stay at 1280px */
.wrap { max-width: 1280px !important; }
.wrap-narrow { max-width: 880px !important; }
.about-hero .wrap { max-width: 1280px !important; }
.about-dictionary .wrap { max-width: 760px !important; }
.about-section .wrap { max-width: 880px !important; }
.about-cta .wrap { max-width: 720px !important; }</p>
<p>.mx-ribbon .brand-mark{display:inline-block;line-height:0;text-decoration:none}
.mx-ribbon .brand-mark img{height:36px;width:auto;display:block}
.mx-footer .brand-mark{display:inline-block;line-height:0;text-decoration:none}
.mx-footer .brand-mark img{height:26px;width:auto;display:block}
@media(max-width:880px){.mx-ribbon .brand-mark img{height:28px}.mx-footer .brand-mark img{height:22px}}</p>
<p>.brand-img{height:36px;width:auto;display:inline-block;vertical-align:middle}
.mx-footer .brand-img{height:26px}
@media(max-width:880px){.brand-img{height:28px} .mx-footer .brand-img{height:22px}}

/* === Block 11 === */
.footer .footer-inner{flex-direction:column !important;align-items:center !important;text-align:center;gap:18px !important}.footer .brand-img{height:auto !important;width:240px !important;display:block !important;margin:0 auto !important}.footer .footer-nav{display:flex;flex-wrap:wrap;justify-content:center}

/* === Block 12 === */
.mx-closing{background:#1A1A1A !important;color:#fff !important;text-align:center !important;padding:96px 0 !important;position:relative}.mx-closing .container-narrow{max-width:880px !important;margin:0 auto !important;padding:0 48px !important;text-align:center !important}.mx-closing .mx-h2{color:#fff !important;text-align:center !important;font-size:54px !important;font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:300;line-height:1.1;margin:0 0 24px !important;display:block}.mx-closing .eyebrow{color:#cfa !important;text-align:center !important;display:block;margin-bottom:18px;font-family:Inter,sans-serif;font-size:11px;letter-spacing:0.28em;text-transform:uppercase;font-weight:300}.mx-closing .sub{color:rgba(255,255,255,0.78) !important;text-align:center !important;margin:0 auto 32px !important;max-width:560px;font-family:Fraunces,Georgia,serif;font-size:18px}.mx-closing a{color:#fff !important;border:1px solid #fff !important;padding:14px 28px !important;text-decoration:none !important;display:inline-block !important;font-family:Inter,sans-serif;font-size:11px;letter-spacing:0.28em;text-transform:uppercase;font-weight:300}

/* === Block 13 === */
.ribbon .brand-img{height:36px !important;width:auto !important;display:inline-block !important;vertical-align:middle !important;max-width:none !important}.ribbon{padding:10px 0 !important}@media(max-width:880px){.ribbon .brand-img{height:28px !important}}

/* === Block 14 === */
.mx-trips-dd{position:relative;display:inline-block}.mx-trips-dd .mx-trips-menu{display:none;position:absolute;top:100%;left:0;background:#FBFAF6;border:1px solid #E2DFD7;padding:14px 22px;min-width:300px;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,0.08)}.mx-trips-dd:hover .mx-trips-menu,.mx-trips-dd:focus-within .mx-trips-menu{display:block}.mx-trips-dd .mx-trips-menu a{display:block !important;padding:8px 0 !important;font-family:Inter,sans-serif !important;font-size:11px !important;letter-spacing:0.18em !important;text-transform:uppercase !important;color:#1A1A1A !important;border:none !important;text-decoration:none !important;white-space:nowrap;margin:0 !important}.mx-trips-dd .mx-trips-menu a:hover{color:#A02530 !important}

/* === Block 15 === */
.mx-nav-inner{display:flex !important;align-items:center !important;gap:18px !important;flex-shrink:0 !important;white-space:nowrap !important}.mx-ribbon .right{display:block !important;flex-shrink:0 !important}.mx-ribbon .right p,.mx-nav-inner p{display:contents !important;margin:0 !important;padding:0 !important}

/* === Block 16 === */
.ribbon .nav-links,.ribbon nav{display:block !important}.ribbon .nav-links>.mx-nav-inner{display:flex !important;align-items:center !important;gap:18px !important;flex-shrink:0 !important;white-space:nowrap !important}.ribbon .nav-links p,.ribbon nav p{display:contents !important;margin:0 !important;padding:0 !important}

/* === Block 17 === */
section.editorial{min-height:0 !important;height:auto !important;padding-bottom:48px !important}section.editorial img{display:block !important;max-width:100% !important}section.itinerary{position:relative;z-index:2;background:#FBFAF6 !important}

/* === Block 18 === */
.mx-trips-dd{position:relative;display:inline-flex !important;align-items:center !important;line-height:1 !important;height:auto !important;margin:0 !important;padding:0 !important}.mx-trips-dd .mx-trips-trigger{display:inline-block !important;line-height:inherit !important;margin:0 !important;padding:0 !important;vertical-align:baseline !important}

/* === Block 19 === */
.mx-ribbon .byline,.ribbon .brand-byline{color:#000 !important;font-weight:600 !important;-webkit-text-stroke:0 !important}

/* === Block 20 === */
.footer .copy{color:#000 !important;font-weight:600 !important;font-size:20px !important;font-style:italic !important;font-family:"Cormorant Garamond",serif !important}

/* ==========================================================================
   === Block 21 — MX-* SECTION RULES (v1.0.6, 2026-06-03 PM)              ===
   Migrated pages (Concierge, Colonial Heart, Capital y Corazón) use the
   .mx-hero / .mx-facts / .mx-intro / .mx-city / .mx-days / .mx-departure /
   .mx-practical / .mx-positioning / .mx-process / .mx-inquiry section
   classes inherited from the pre-rebuild inline-CSS template. This block
   gives them the editorial typography + spacing the unprefixed canonical
   classes already have.
   ========================================================================== */

/* Containers used inside mx-* sections */
.mx-hero .container, .mx-facts .container, .mx-intro .container,
.mx-city .container, .mx-days .container, .mx-departure .container,
.mx-practical .container, .mx-positioning .container, .mx-process .container {
  max-width: 1240px; margin: 0 auto; padding-left: 32px; padding-right: 32px;
}
.mx-inquiry .container-narrow, .mx-hero .container-narrow {
  max-width: 820px; margin: 0 auto; padding-left: 32px; padding-right: 32px;
}

/* ---- MX-HERO — trip & section hero ---- */
.mx-hero {
  padding: 64px 0 56px !important;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}
.mx-hero .container {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.mx-hero .container > .copy { grid-column: 1; }
.mx-hero .container > figure { grid-column: 2; margin: 0; aspect-ratio: 4/5; overflow: hidden; }
.mx-hero .container > figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Concierge has no figure — single column */
.mx-hero .container:not(:has(figure)) { display: block; max-width: 920px; }

.mx-hero .copy .eyebrow,
.mx-hero .copy > span:first-child,
.mx-hero > p:first-of-type {
  display: block !important;
  font-family: var(--sans) !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--label-red) !important;
  margin-bottom: 28px !important;
}
.mx-hero .copy .mx-h1,
.mx-hero .copy h1,
body .mx-hero .copy .mx-h1 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(56px, 7vw, 96px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.015em !important;
  color: var(--ink) !important;
  margin: 0 0 22px !important;
  display: block;
}
.mx-hero .copy .mx-h1 em, .mx-hero .copy h1 em { font-style: italic !important; font-weight: 400 !important; }
.mx-hero .copy .tagline,
.mx-hero .copy p {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(20px, 1.8vw, 26px) !important;
  line-height: 1.45 !important;
  color: var(--ink-soft) !important;
  max-width: 560px;
  margin: 0 0 18px !important;
}
.mx-hero a {
  display: inline-block;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--label-red) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--label-red);
  padding-bottom: 4px;
  margin-top: 12px;
}

/* ---- MX-FACTS — 4-column fact strip ---- */
.mx-facts {
  padding: 56px 0 !important;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}
.mx-facts .grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.mx-facts .cell { padding: 0 28px; border-left: 1px solid var(--hairline); }
.mx-facts .cell:first-child { border-left: none; padding-left: 0; }
.mx-facts .cell .label,
.mx-facts .cell > span:first-child {
  display: block !important;
  font-family: var(--sans) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--label-red) !important;
  margin-bottom: 14px !important;
}
.mx-facts .cell .val,
.mx-facts .cell > div:not(.label) {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
}

/* ---- MX-INTRO / MX-POSITIONING / MX-PROCESS — editorial body sections ---- */
.mx-intro, .mx-positioning, .mx-process {
  padding: 96px 0 !important;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}
.mx-intro .container, .mx-positioning .container, .mx-process .container {
  max-width: 900px;
}
.mx-intro .eyebrow, .mx-positioning .eyebrow, .mx-process .eyebrow,
.mx-intro > p:first-child, .mx-positioning > p:first-child, .mx-process > p:first-child {
  display: block;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--label-red) !important;
  margin-bottom: 28px !important;
}
.mx-intro h2, .mx-positioning h2, .mx-process h2,
.mx-intro .mx-h2, .mx-positioning .mx-h2, .mx-process .mx-h2,
body .mx-positioning h2, body .mx-process h2 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(40px, 5vw, 64px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
  margin: 0 0 36px !important;
}
.mx-intro h2 em, .mx-positioning h2 em, .mx-process h2 em { font-style: italic !important; }
.mx-intro p, .mx-positioning p, .mx-process p,
.mx-intro li, .mx-positioning li, .mx-process li {
  font-family: var(--body) !important;
  font-weight: 300 !important;
  font-size: 19px !important;
  line-height: 1.7 !important;
  color: var(--ink) !important;
  margin: 0 0 20px !important;
  max-width: 720px;
}
.mx-intro p em, .mx-positioning p em, .mx-process p em { font-style: italic; }
.mx-intro img, .mx-positioning img, .mx-process img {
  width: 100%; height: auto; display: block; margin: 40px 0;
}
.mx-process ol { counter-reset: step; list-style: none; padding-left: 0; }
.mx-process ol li {
  counter-increment: step; padding-left: 64px; position: relative;
  margin: 0 0 36px !important;
}
.mx-process ol li::before {
  content: "0" counter(step);
  position: absolute; left: 0; top: 4px;
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.22em;
  color: var(--label-red); font-weight: 400;
}

/* ---- MX-CITY — city divider with image + content ---- */
.mx-city {
  padding: 88px 0 56px !important;
  border-top: 1px solid var(--hairline);
}
.mx-city .container { max-width: 1100px; }
.mx-city .eyebrow,
.mx-city > p:first-child {
  display: block;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--label-red) !important;
  margin-bottom: 24px !important;
}
.mx-city h2, .mx-city .mx-h2 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(40px, 5vw, 64px) !important;
  line-height: 1.05 !important;
  color: var(--ink) !important;
  margin: 0 0 32px !important;
}
.mx-city h2 em, .mx-city .mx-h2 em { font-style: italic !important; }
.mx-city p, .mx-city li {
  font-family: var(--body) !important; font-weight: 300 !important;
  font-size: 18px !important; line-height: 1.7 !important;
  color: var(--ink) !important; margin: 0 0 18px !important;
  max-width: 720px;
}
.mx-city img { width: 100%; height: auto; display: block; margin: 32px 0; }

/* ---- MX-DAYS — itinerary detail ---- */
.mx-days {
  padding: 80px 0 60px !important;
  border-top: 1px solid var(--hairline);
}
.mx-days .day, .mx-days > .container > div {
  padding: 48px 0 !important;
  border-top: 1px solid var(--hairline);
}
.mx-days .day:first-of-type, .mx-days > .container > div:first-of-type {
  border-top: none; padding-top: 0;
}
.mx-days h3, .mx-days .day h3, .mx-days .day-mark {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3vw, 36px) !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
  margin: 0 0 22px !important;
}
.mx-days .day-mark { font-style: normal !important; font-family: var(--sans) !important; font-size: 11px !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; color: var(--label-red) !important; margin-bottom: 12px !important; }
.mx-days p, .mx-days .day p {
  font-family: var(--body) !important; font-weight: 300 !important;
  font-size: 17px !important; line-height: 1.75 !important;
  color: var(--ink) !important; margin: 0 0 16px !important;
}
.mx-days img { width: 100%; height: auto; display: block; margin: 24px 0; }

/* ---- MX-DEPARTURE + MX-PRACTICAL — closing info bands ---- */
.mx-departure, .mx-practical {
  padding: 72px 0 !important;
  border-top: 1px solid var(--hairline);
  background: var(--bg);
}
.mx-departure .container, .mx-practical .container { max-width: 920px; }
.mx-departure .eyebrow, .mx-practical .eyebrow,
.mx-departure > p:first-child, .mx-practical > p:first-child {
  display: block;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--label-green) !important;
  margin-bottom: 22px !important;
}
.mx-departure h2, .mx-practical h2, .mx-departure .mx-h2, .mx-practical .mx-h2 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.1 !important;
  color: var(--ink) !important;
  margin: 0 0 28px !important;
}
.mx-departure h2 em, .mx-practical h2 em { font-style: italic !important; }
.mx-departure p, .mx-practical p, .mx-departure li, .mx-practical li {
  font-family: var(--body) !important; font-weight: 300 !important;
  font-size: 17px !important; line-height: 1.7 !important;
  color: var(--ink) !important; margin: 0 0 14px !important;
}
.mx-departure ul, .mx-practical ul { padding-left: 1.2em; }

/* ---- MX-INQUIRY — dark closing CTA band (Concierge bottom) ---- */
.mx-inquiry {
  padding: 110px 0 !important;
  background: var(--ink) !important;
  color: #ffffff !important;
}
.mx-inquiry .container-narrow { text-align: center; }
.mx-inquiry .eyebrow,
.mx-inquiry > p:first-child {
  display: block;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.7) !important;
  margin-bottom: 28px !important;
}
.mx-inquiry h2, .mx-inquiry .mx-h2,
body .mx-inquiry h2 {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(44px, 5.5vw, 72px) !important;
  line-height: 1.05 !important;
  color: #ffffff !important;
  margin: 0 0 28px !important;
}
.mx-inquiry p, .mx-inquiry li {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(20px, 2vw, 26px) !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,0.88) !important;
  max-width: 600px; margin: 0 auto 28px !important;
}
.mx-inquiry a {
  display: inline-block;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border: 1px solid #ffffff;
  padding: 18px 44px;
  margin-top: 16px;
  transition: all 0.2s;
}
.mx-inquiry a:hover { background: #ffffff; color: var(--ink) !important; }

/* ---- LEGAL-HERO H1 sizing fix ---- */
.legal-hero {
  padding: 96px 0 56px !important;
  background: var(--bg);
}
.legal-hero .wrap, .legal-hero .container {
  max-width: 920px; margin: 0 auto; padding-left: 32px; padding-right: 32px; text-align: center;
}
.legal-hero .eyebrow, .legal-hero > p:first-child {
  display: block;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--label-red) !important;
  margin-bottom: 28px !important;
}
.legal-hero h1,
body .legal-hero h1 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(56px, 7vw, 96px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.015em !important;
  color: var(--ink) !important;
  margin: 0 0 24px !important;
}
.legal-hero h1 em { font-style: italic !important; }
.legal-hero .meta, .legal-hero p {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ink-faint) !important;
  margin: 12px 0 0 !important;
}
.legal-body {
  padding: 56px 0 96px !important;
  background: var(--bg);
}
.legal-body .wrap, .legal-body .container {
  max-width: 720px; margin: 0 auto; padding-left: 32px; padding-right: 32px;
}
.legal-body h2, body .legal-body h2 {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3.2vw, 38px) !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
  margin: 56px 0 18px !important;
}
.legal-body h3, body .legal-body h3 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  margin: 32px 0 12px !important;
}
.legal-body p, .legal-body li {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  color: var(--ink) !important;
  margin: 0 0 16px !important;
}
.legal-body p em, .legal-body li em { font-style: italic; }
.legal-body p:first-of-type {
  font-style: italic;
  font-size: 20px !important;
  color: var(--ink) !important;
  margin-bottom: 32px !important;
}
.legal-body a { color: var(--label-red); text-decoration: underline; }

/* ---- KIRKI/POPPINS DEFEAT — high-specificity H1/H2 typography enforcement ---- */
html body .mx-hero h1, html body .mx-hero .mx-h1,
html body .mx-positioning h2, html body .mx-process h2, html body .mx-intro h2,
html body .mx-city h2, html body .mx-days h3,
html body .mx-departure h2, html body .mx-practical h2,
html body .mx-inquiry h2,
html body .legal-hero h1, html body .legal-body h2, html body .legal-body h3 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
}

/* ---- MOBILE RESPONSIVE for mx-* sections ---- */
@media (max-width: 880px) {
  .mx-hero .container { grid-template-columns: 1fr; gap: 32px; }
  .mx-hero .container > figure { aspect-ratio: 4/3; }
  .mx-facts .grid { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  .mx-facts .cell { padding: 0 16px; }
  .mx-facts .cell:nth-child(odd) { border-left: none; padding-left: 0; }
  .mx-intro, .mx-positioning, .mx-process { padding: 64px 0 !important; }
  .mx-inquiry { padding: 80px 0 !important; }
  .legal-hero { padding: 56px 0 32px !important; }
  .legal-body { padding: 32px 0 64px !important; }
}

/* ==========================================================================
   === Block 22 — HOME PAGE + ABOUT PAGE (v1.0.7, 2026-06-03 late PM)      ===
   Fixes: home trips cards rendering as full-bleed images. About page
   dictionary, pillars, sections, all completely unstyled.
   ========================================================================== */

/* ---- Container utility classes used by home/about ---- */
.mx-trips .container, .mx-concierge .container, .mx-closing .container,
.mx-positioning .container, .mx-positioning .container-narrow,
.about-section .wrap, .about-dictionary .wrap, .about-cta .wrap,
.about-hero .wrap, .hero.about-hero .wrap {
  max-width: 1240px; margin: 0 auto; padding-left: 32px; padding-right: 32px;
}
.mx-closing .container-narrow, .mx-positioning .container-narrow,
.about-section.alt .wrap {
  max-width: 920px; margin: 0 auto; padding-left: 32px; padding-right: 32px;
}

/* ---- HOMEPAGE POSITIONING SECTION (under hero) ---- */
.mx-positioning {
  padding: 88px 0 !important;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.mx-positioning .container-narrow, .mx-positioning > .container-narrow {
  max-width: 880px !important; margin: 0 auto !important;
  text-align: left;
}
.mx-positioning .eyebrow, .mx-positioning .label {
  display: block;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--label-red) !important;
  margin-bottom: 28px !important;
}
.mx-positioning .mx-h2, .mx-positioning h2 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(40px, 5vw, 64px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
  margin: 0 0 32px !important;
  display: block;
}
.mx-positioning .mx-h2 em, .mx-positioning h2 em { font-style: italic !important; }
.mx-positioning p {
  font-family: var(--body) !important;
  font-weight: 300 !important;
  font-size: 19px !important;
  line-height: 1.7 !important;
  color: var(--ink) !important;
  margin: 0 0 18px !important;
  max-width: 720px;
}
.mx-positioning p em { font-style: italic; }

/* ---- HOMEPAGE TRIPS GRID (the broken section) ---- */
.mx-trips {
  padding: 96px 0 !important;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.mx-trips .section-head {
  max-width: 720px;
  margin: 0 auto 72px;
  text-align: center;
}
.mx-trips .section-head .eyebrow, .mx-trips .section-head > p:first-of-type {
  display: block;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--label-green) !important;
  margin-bottom: 24px !important;
}
.mx-trips .section-head .mx-h2 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(40px, 5vw, 60px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
  margin: 0 0 24px !important;
}
.mx-trips .section-head .mx-h2 em { font-style: italic !important; }
.mx-trips .section-head .lede {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.55 !important;
  color: var(--ink-soft) !important;
  margin: 0 !important;
  max-width: none !important;
}

/* The actual cards grid — 6-column base, cards span 2 (row 1) or 3 (row 2)
   so the layout reads 3 equal cards across the top, 2 wider cards across the
   bottom that together fill the same width. */
.mx-trips .grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 40px 32px !important;
  max-width: 100%;
}
.mx-trips .card {
  grid-column: span 2;
}
.mx-trips .card.card-wide {
  grid-column: span 3;
}
.mx-trips .card {
  display: block;
  position: relative;
}
.mx-trips .card > a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.mx-trips .card figure {
  margin: 0 0 22px !important;
  aspect-ratio: 4/5 !important;
  overflow: hidden !important;
  background: var(--hairline);
}
.mx-trips .card figure img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s ease;
}
.mx-trips .card:hover figure img { transform: scale(1.03); }
.mx-trips .card .meta {
  display: block;
  font-family: var(--sans) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--label-red) !important;
  margin-bottom: 10px !important;
}
.mx-trips .card .mx-h3 {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
  margin: 0 0 12px !important;
  display: block;
}
.mx-trips .card p {
  font-family: var(--body) !important;
  font-weight: 300 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--ink-soft) !important;
  margin: 0 0 14px !important;
}
.mx-trips .card .link, .mx-trips .card a .link {
  display: inline-block;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--label-red) !important;
  border-bottom: 1px solid var(--label-red);
  padding-bottom: 3px;
  margin-top: 4px;
}
.mx-trips .card br { display: none; }

/* ---- HOMEPAGE CONCIERGE TEASER (after trips) ---- */
.mx-concierge {
  padding: 96px 0 !important;
  background: #fff;
  border-bottom: 1px solid var(--hairline);
}
.mx-concierge .container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 72px !important;
  align-items: center !important;
}
.mx-concierge figure {
  margin: 0;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.mx-concierge figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.mx-concierge .copy { display: block; }
.mx-concierge .copy .eyebrow,
.mx-concierge .copy .eyebrow.green {
  display: block;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--label-green) !important;
  margin-bottom: 28px !important;
}
.mx-concierge .copy .mx-h2 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(36px, 4.6vw, 56px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
  margin: 0 0 28px !important;
  display: block;
}
.mx-concierge .copy .mx-h2 em { font-style: italic !important; }
.mx-concierge .copy p {
  font-family: var(--body) !important;
  font-weight: 300 !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: var(--ink) !important;
  margin: 0 0 16px !important;
  max-width: 520px;
}
.mx-concierge .copy a.link, .mx-concierge .copy a {
  display: inline-block;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--label-green) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--label-green);
  padding-bottom: 4px;
  margin-top: 12px;
}

/* ---- HOMEPAGE CLOSING BAND (mx-closing) — make sure consistent ---- */
.mx-closing {
  padding: 110px 0 !important;
  background: var(--ink) !important;
  color: white !important;
  text-align: center;
}
.mx-closing .container-narrow {
  max-width: 720px; margin: 0 auto;
}
.mx-closing .eyebrow {
  display: block;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.65) !important;
  margin-bottom: 28px !important;
}
.mx-closing h2, .mx-closing .mx-h2 {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(44px, 5.5vw, 72px) !important;
  line-height: 1.05 !important;
  color: #ffffff !important;
  margin: 0 0 24px !important;
}
.mx-closing .sub, .mx-closing p {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.85) !important;
  margin: 0 auto 32px !important;
  max-width: 540px;
}
.mx-closing a {
  display: inline-block;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: white !important;
  text-decoration: none !important;
  border: 1px solid white;
  padding: 18px 40px;
}
.mx-closing a:hover { background: white; color: var(--ink) !important; }

/* ---- ABOUT PAGE: hero ---- */
.hero.about-hero {
  padding: 88px 0 64px !important;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}
.hero.about-hero .wrap {
  max-width: 900px !important;
  display: block !important;
  grid-template-columns: none !important;
  text-align: left;
}
.hero.about-hero .label, .hero.about-hero .eyebrow {
  display: block;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--label-red) !important;
  margin-bottom: 28px !important;
}
.hero.about-hero h1,
body .hero.about-hero h1 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(72px, 9vw, 132px) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  margin: 0 0 32px !important;
}
.hero.about-hero h1 em { font-style: italic !important; font-weight: 400; }
.hero.about-hero .tagline {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  line-height: 1.45 !important;
  color: var(--ink-soft) !important;
  max-width: 640px;
  margin: 0 !important;
}

/* ---- ABOUT PAGE: dictionary entry ---- */
.about-dictionary {
  padding: 72px 0 88px !important;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.about-dictionary .wrap { max-width: 720px !important; }
.about-dictionary .dict-entry {
  border: 1px solid var(--hairline);
  background: #fff;
  padding: 56px 64px;
  position: relative;
}
.about-dictionary .dict-head {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 22px;
  margin-bottom: 28px;
}
.about-dictionary .dict-word {
  display: block;
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 42px !important;
  line-height: 1 !important;
  color: var(--ink);
  margin-bottom: 8px;
}
.about-dictionary .dict-pron {
  display: block;
  font-family: var(--body) !important;
  font-style: italic !important;
  font-size: 18px !important;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.about-dictionary .dict-pos {
  display: block;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--label-red);
}
.about-dictionary .dict-head br { display: none; }
.about-dictionary .dict-defs {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  counter-reset: dictdef;
}
.about-dictionary .dict-defs li {
  counter-increment: dictdef;
  padding: 16px 0 16px 48px;
  position: relative;
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: var(--ink);
  border-top: 1px solid var(--hairline);
}
.about-dictionary .dict-defs li:first-child { border-top: none; padding-top: 0; }
.about-dictionary .dict-defs li::before {
  content: counter(dictdef) ".";
  position: absolute; left: 0; top: 17px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--label-red);
}
.about-dictionary .dict-defs li:first-child::before { top: 1px; }
.about-dictionary .dict-origin {
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.about-dictionary .dict-origin .label-text,
.about-dictionary .dict-origin > span:first-child {
  display: block;
  font-family: var(--sans) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--label-green);
  margin-bottom: 14px;
}
.about-dictionary .dict-origin p {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
.about-dictionary .dict-signature {
  margin-top: 24px;
  text-align: right;
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: 14px !important;
  color: var(--ink-soft) !important;
}

/* ---- ABOUT PAGE: standard body sections ---- */
.about-section {
  padding: 96px 0 !important;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}
.about-section.alt {
  background: #fff;
}
.about-section .wrap { max-width: 920px !important; }
.about-section .eyebrow {
  display: block;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--label-red) !important;
  margin-bottom: 28px !important;
}
.about-section.alt .eyebrow { color: var(--label-green) !important; }
.about-section h2,
body .about-section h2 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(36px, 4.6vw, 58px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
  margin: 0 0 40px !important;
  display: block;
}
.about-section h2 em { font-style: italic !important; }
.about-section p {
  font-family: var(--body) !important;
  font-weight: 300 !important;
  font-size: 19px !important;
  line-height: 1.7 !important;
  color: var(--ink) !important;
  margin: 0 0 20px !important;
  max-width: 760px;
}
.about-section p em { font-style: italic; }

/* ---- ABOUT PAGE: pillars (Three things we do) ---- */
.about-pillars {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 48px !important;
  margin-top: 24px;
}
.about-pillars .pillar {
  display: block;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.about-pillars .pillar-num {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 28px !important;
  color: var(--label-green) !important;
  margin-bottom: 14px !important;
}
.about-pillars .pillar-title {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  margin-bottom: 14px !important;
}
.about-pillars .pillar-body {
  font-family: var(--body) !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

/* ---- ABOUT PAGE: "Three things we don't" bulleted list ---- */
.about-nots {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}
.about-nots li {
  position: relative;
  padding: 18px 0 18px 36px;
  border-top: 1px solid var(--hairline);
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: var(--ink);
}
.about-nots li::before {
  content: "—";
  position: absolute; left: 0; top: 18px;
  color: var(--label-red);
  font-family: var(--sans);
}

/* ---- ABOUT PAGE: CTA closing band (dark) ---- */
.about-cta {
  padding: 110px 0 !important;
  background: var(--ink) !important;
  color: #fff !important;
  text-align: center;
}
.about-cta .wrap { max-width: 720px !important; }
.about-cta h2,
body .about-cta h2 {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(44px, 5.5vw, 68px) !important;
  line-height: 1.05 !important;
  color: #fff !important;
  margin: 0 0 28px !important;
}
.about-cta p {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.85) !important;
  margin: 0 auto 36px !important;
  max-width: 560px;
}
.about-cta .cta-button, .about-cta a.cta-button, .about-cta a {
  display: inline-block;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: white !important;
  text-decoration: none !important;
  border: 1px solid white;
  padding: 18px 44px;
  transition: all 0.2s;
}
.about-cta .cta-button:hover { background: white; color: var(--ink) !important; }

/* ---- LEGAL-HERO: Contact "We answer every email/call" line (.updated class) ---- */
.legal-hero .updated,
.legal-hero .meta {
  display: block;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--ink-faint) !important;
  margin: 24px 0 0 !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* ---- MOBILE responsive ---- */
@media (max-width: 880px) {
  .mx-trips .grid { grid-template-columns: 1fr 1fr !important; gap: 28px 18px !important; }
  .mx-concierge .container { grid-template-columns: 1fr !important; gap: 32px !important; }
  .about-pillars { grid-template-columns: 1fr !important; gap: 28px !important; }
  .about-dictionary .dict-entry { padding: 36px 28px; }
  .hero.about-hero { padding: 56px 0 40px !important; }
  .about-section { padding: 64px 0 !important; }
}
@media (max-width: 560px) {
  .mx-trips .grid { grid-template-columns: 1fr !important; gap: 36px !important; }
}

/* ==========================================================================
   === Block 23 — TRAVELOGUE (v1.0.8, 2026-06-03 PM)                      ===
   Editorial-style index + single templates for /travelogue/ entries.
   ========================================================================== */

/* ---- Travelogue hero (archive page header) ---- */
.travelogue-hero {
  padding: 96px 0 56px !important;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}
.travelogue-hero .wrap {
  max-width: 920px !important; margin: 0 auto !important;
  padding-left: 32px !important; padding-right: 32px !important;
  text-align: center;
}
.travelogue-hero .eyebrow {
  display: block;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--label-red) !important;
  margin-bottom: 28px !important;
}
.travelogue-hero h1, body .travelogue-hero h1 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(56px, 7vw, 96px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.015em !important;
  color: var(--ink) !important;
  margin: 0 0 24px !important;
}
.travelogue-hero h1 em { font-style: italic !important; }
.travelogue-hero .tagline {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(20px, 1.8vw, 26px) !important;
  line-height: 1.5 !important;
  color: var(--ink-soft) !important;
  margin: 0 auto !important;
  max-width: 720px;
}

/* ---- Travelogue grid (archive) ---- */
.travelogue-grid {
  padding: 72px 0 96px !important;
  background: var(--bg);
}
.travelogue-grid .wrap {
  max-width: 1280px !important; margin: 0 auto !important;
  padding-left: 32px !important; padding-right: 32px !important;
}
.travelogue-grid .grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 48px 32px !important;
}
.travelogue-grid .t-card { display: block; }
.travelogue-grid .t-card > a {
  display: block; color: inherit; text-decoration: none;
}
.travelogue-grid .t-card figure {
  margin: 0 0 20px !important;
  aspect-ratio: 4/5 !important;
  overflow: hidden !important;
  background: var(--hairline);
}
.travelogue-grid .t-card figure.no-image {
  background: linear-gradient(135deg, var(--hairline) 0%, var(--bg) 100%);
}
.travelogue-grid .t-card figure img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
  transition: transform 0.6s ease;
}
.travelogue-grid .t-card:hover figure img { transform: scale(1.03); }
.travelogue-grid .t-card .meta {
  display: block;
  font-family: var(--sans) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--label-red) !important;
  margin-bottom: 10px !important;
}
.travelogue-grid .t-card .meta .sep { margin: 0 6px; color: var(--ink-faint); }
.travelogue-grid .t-card .meta .dest { color: var(--ink-soft); }
.travelogue-grid .t-card .t-title {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  margin: 0 0 10px !important;
  display: block;
}
.travelogue-grid .t-card .excerpt {
  font-family: var(--body) !important;
  font-weight: 300 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--ink-soft) !important;
  margin: 0 0 14px !important;
}
.travelogue-grid .t-card .link {
  display: inline-block;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--label-red) !important;
  border-bottom: 1px solid var(--label-red);
  padding-bottom: 3px;
  margin-top: 4px;
}

/* Format-specific tint accents */
.travelogue-grid .t-format-video .meta .format,
.travelogue-grid .t-format-restaurant .meta .format,
.travelogue-grid .t-format-hotel .meta .format { color: var(--label-green); }
.travelogue-grid .t-format-advisory .meta .format { color: var(--label-red); font-weight: 500; }

/* Empty state */
.travelogue-empty {
  text-align: center; max-width: 600px; margin: 80px auto;
  font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink-soft);
}
.travelogue-empty .sub { font-size: 16px; margin-top: 24px; }
.travelogue-empty a { color: var(--label-red); border-bottom: 1px solid currentColor; }

/* Pagination */
.travelogue-grid .pagination, .travelogue-grid .nav-links {
  margin-top: 72px; text-align: center;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
}
.travelogue-grid .nav-links a, .travelogue-grid .pagination a {
  color: var(--label-red); text-decoration: none; padding: 8px 14px;
  border: 1px solid var(--hairline);
}

/* ---- Travelogue single entry ---- */
.travelogue-single .t-hero {
  padding: 80px 0 48px !important;
  background: var(--bg);
}
.travelogue-single .t-hero .wrap {
  max-width: 880px !important; margin: 0 auto !important;
  padding-left: 32px !important; padding-right: 32px !important;
  text-align: center;
}
.travelogue-single .t-meta-top {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--label-red) !important;
  margin-bottom: 28px !important;
}
.travelogue-single .t-meta-top .sep { margin: 0 6px; color: var(--ink-faint); }
.travelogue-single .t-meta-top .date,
.travelogue-single .t-meta-top .dest { color: var(--ink-soft); }
.travelogue-single .t-title, body .travelogue-single .t-title {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(40px, 5.2vw, 72px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
  margin: 0 0 24px !important;
}
.travelogue-single .t-title em { font-style: italic !important; }
.travelogue-single .t-dek {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  line-height: 1.5 !important;
  color: var(--ink-soft) !important;
  margin: 0 auto !important;
  max-width: 640px;
}
.travelogue-single .t-cover {
  margin: 0 !important; aspect-ratio: 16/9; overflow: hidden;
}
.travelogue-single .t-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.travelogue-single .t-body {
  padding: 64px 0 80px;
  background: var(--bg);
}
.travelogue-single .t-body .wrap {
  max-width: 720px !important; margin: 0 auto !important;
  padding-left: 32px !important; padding-right: 32px !important;
}
.travelogue-single .t-body p,
.travelogue-single .t-body li {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: 19px !important;
  line-height: 1.7 !important;
  color: var(--ink) !important;
  margin: 0 0 18px !important;
}
.travelogue-single .t-body p:first-of-type:first-letter {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 5em; line-height: 0.9; float: left; margin: 4px 12px 0 0;
  color: var(--ink);
}
.travelogue-single .t-body h2, body .travelogue-single .t-body h2 {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  font-size: 30px !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  margin: 48px 0 16px !important;
}
.travelogue-single .t-body h3, body .travelogue-single .t-body h3 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  color: var(--ink) !important;
  margin: 32px 0 12px !important;
}
.travelogue-single .t-body img, .travelogue-single .t-body figure {
  margin: 32px 0; max-width: 100%; height: auto;
}
.travelogue-single .t-body blockquote {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: 24px !important;
  line-height: 1.45 !important;
  color: var(--ink) !important;
  margin: 40px 0 !important;
  padding: 0 0 0 24px !important;
  border-left: 3px solid var(--label-red);
}

/* Foot: tags + prev/next */
.travelogue-single .t-foot {
  padding: 48px 0 80px;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
}
.travelogue-single .t-foot .wrap {
  max-width: 720px !important; margin: 0 auto !important;
  padding-left: 32px !important; padding-right: 32px !important;
}
.travelogue-single .t-tags {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px;
}
.travelogue-single .t-tag {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--label-red);
  border: 1px solid var(--hairline);
  padding: 6px 12px;
  text-decoration: none;
}
.travelogue-single .t-prev-next {
  display: flex; justify-content: space-between; gap: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-family: var(--serif); font-style: italic; font-size: 17px;
}
.travelogue-single .t-prev-next a {
  color: var(--ink); text-decoration: none;
}
.travelogue-single .t-prev-next .prev,
.travelogue-single .t-prev-next .next { color: var(--ink-soft); }

/* Format-specific accents for single entries */
.travelogue-single.t-format-advisory .t-meta-top .format {
  color: var(--label-red); font-weight: 500;
}
.travelogue-single.t-format-video .t-meta-top .format,
.travelogue-single.t-format-restaurant .t-meta-top .format,
.travelogue-single.t-format-hotel .t-meta-top .format {
  color: var(--label-green);
}

/* Mobile responsive */
@media (max-width: 880px) {
  .travelogue-grid .grid { grid-template-columns: 1fr 1fr !important; gap: 32px 18px !important; }
}
@media (max-width: 560px) {
  .travelogue-grid .grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .travelogue-single .t-prev-next { flex-direction: column; gap: 16px; }
}

/* ==========================================================================
   === Block 24 — MASTHEAD REFLOW for narrower viewports (v1.0.9)         ===
   With TRAVELOGUE added, the nav was overflowing at ~1500px. Tighten the
   nav spacing/size progressively so everything fits without horizontal scroll.
   ========================================================================== */

@media (max-width: 1700px) {
  .mx-ribbon .row { gap: 24px !important; }
  .mx-nav-inner { gap: 14px !important; }
  .mx-nav-inner a:not(.cta) {
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
  }
  .mx-nav-inner .mx-nav-sep { font-size: 11px !important; }
  .mx-nav-inner .cta, .mx-ribbon .cta {
    padding: 8px 14px !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
  }
}

@media (max-width: 1500px) {
  .mx-nav-inner { gap: 10px !important; }
  .mx-nav-inner a:not(.cta) {
    font-size: 10.5px !important;
    letter-spacing: 0.14em !important;
  }
  .mx-nav-inner .cta, .mx-ribbon .cta {
    padding: 7px 12px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.14em !important;
  }
}

@media (max-width: 1280px) {
  /* Drop the "Start a Trip" CTA on smaller desktops — the Concierge link does same job */
  .mx-nav-inner .cta, .mx-ribbon .cta { display: none !important; }
  .mx-ribbon .byline { display: none; }
}

/* Belt-and-suspenders: prevent any inherited overflow from creating horizontal scroll */
html, body { overflow-x: hidden !important; }
.mx-ribbon, .mx-ribbon .row { max-width: 100vw; }

/* ==========================================================================
   === Block 25 — BYLINE SIZE (v1.0.12)                                    ===
   Masthead byline sized as discreet supporting tagline. Stays at 17px on
   standard desktops (1200-1920px). Drops only on small laptops < 1200.
   ========================================================================== */

.mx-ribbon .byline,
.mx-ribbon .left .byline,
.ribbon .brand-byline {
  font-size: 17px !important;
  font-style: italic !important;
  letter-spacing: 0 !important;
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  max-width: 480px;
  line-height: 1.25;
}

@media (max-width: 1200px) {
  .mx-ribbon .byline { display: none !important; }
}

/* ==========================================================================
   === Block 26 — FOOTER INSET TO MATCH HEADER (v1.0.13)                  ===
   Masthead .row has padding 18px 48px. Footer was full-bleed. Align by
   adding 48px left/right padding on .footer-inner so footer content sits
   on the same vertical edges as masthead content.
   ========================================================================== */

.mx-footer .footer-inner {
  padding-left: 48px !important;
  padding-right: 48px !important;
  max-width: 1496px;
  margin: 0 auto;
  box-sizing: border-box;
}

@media (max-width: 880px) {
  .mx-footer .footer-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ==========================================================================
   === Block 27 — HOME HERO STANZAS (v1.0.16)                              ===
   Smaller, left-justified. High specificity to beat earlier rules.
   ========================================================================== */

html body .mx-home-hero .overlay,
html .mxnow .mx-home-hero .overlay {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding-top: 40px !important;
}
html body .mx-home-hero .overlay h1,
html body.mxnow .mx-home-hero .overlay h1,
html .mxnow .mx-home-hero .overlay h1 {
  font-size: clamp(28px, 2.6vw, 40px) !important;
  line-height: 1.7 !important;
  max-width: 640px !important;
  text-align: left !important;
  margin: 0 !important;
}
html body .mx-home-hero .overlay h1 span {
  display: block !important;
  white-space: nowrap !important;
  margin-bottom: 0.75em !important;
}
html body .mx-home-hero .overlay h1 span:last-child {
  margin-bottom: 0 !important;
}
.mx-home-hero .overlay h1 br { display: none !important; }

@media (max-width: 880px) {
  html body .mx-home-hero .overlay h1 {
    font-size: clamp(22px, 5vw, 32px) !important;
    max-width: 90% !important;
  }
  html body .mx-home-hero .overlay h1 span {
    white-space: normal !important;
  }
}

/* ==========================================================================
   === Block 28 — SLIDER CROSS-FADE (v1.0.24 — JS-driven)                  ===
   Opacity and Ken Burns are both driven entirely from theme.js via the
   Web Animations API. This block strips out the old CSS transition/
   animation so they can't race or fight with JS state.

   - First paint: slide 0 has class .active (opacity 1 via base rule below).
   - After DOMContentLoaded: JS takes over via inline styles + WAAPI.
   ========================================================================== */

/* Base — every slide starts hidden; .active is opacity 1 for first paint */
.mx-home-hero .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center;
}
.mx-home-hero .slide.active {
  opacity: 1;
}
/* Videos inside slides inherit their slide's opacity */
.mx-home-hero .slide video {
  opacity: inherit;
}

/* ==========================================================================
   === Block 29 — KEN BURNS BASE (v1.0.24)                                 ===
   Static base. Transform is animated by JS via Web Animations API on the
   active image slide. Zoom is one-way (1.0 → 1.10) and JS resets to 1.0
   only after the slide has fully faded out, so the reset is invisible.
   ========================================================================== */

.mx-home-hero .slide[data-type="image"] {
  transform-origin: center center;
  will-change: opacity, transform;
}

/* ==========================================================================
   === Block 30 — LEAD HEADLINE SIZE -36% total (v1.0.26)                  ===
   Two cumulative passes of -20% (0.8 × 0.8 = 0.64 of original).
   Trims the lead H1 on every interior page (trip pages, legal pages,
   about, travelogue). Each rule below uses html body specificity so it
   overrides the earlier Kirki-defeat blocks (lines 710, 997, 1387, 1711)
   and the legacy .hero h1 rule (line 384).
   ========================================================================== */

/* .mx-hero (trip / concierge / contact pages) */
html body .mx-hero .copy .mx-h1,
html body .mx-hero .copy h1 {
  font-size: clamp(36px, 4.5vw, 62px) !important;
}

/* .legal-hero (privacy, terms, etc.) */
html body .legal-hero h1 {
  font-size: clamp(36px, 4.5vw, 62px) !important;
}

/* .travelogue-hero (Travelogue CPT archive + single) */
html body .travelogue-hero h1 {
  font-size: clamp(36px, 4.5vw, 62px) !important;
}

/* .hero.about-hero (About page — was oversized at clamp 72-132px original) */
html body .hero.about-hero h1 {
  font-size: clamp(46px, 5.8vw, 85px) !important;
}

/* Legacy .hero h1 (the older non-mx hero, kept for any legacy templates) */
html body .hero h1 {
  font-size: clamp(36px, 4.2vw, 62px) !important;
}

/* ==========================================================================
   === Block 31 — BOTTOM-OF-PAGE HEADINGS -20% (v1.0.27)                   ===
   Trims two repeating closing headings across every trip page:

   1) "A week designed in conversation." — the cream callout above the
      dark closing band, which has its font-size inline-styled
      (clamp 36/5vw/52) inside a section with background:#fbfaf6.
   2) "Imagine {Destination}." — the dark closing band heading rendered
      from mxnow_closing_band() in functions.php (.mx-closing .mx-h2),
      currently locked at 54px by an earlier !important block.

   Both reduced ~20%. We use html body + !important to win against the
   earlier rules and against the inline font-size on the cream callout.
   ========================================================================== */

/* (1) "A week designed in conversation." (cream callout) */
html body section[style*="background:#fbfaf6"] h2,
html body section[style*="background: #fbfaf6"] h2 {
  font-size: clamp(29px, 4vw, 42px) !important;
}

/* (2) "Imagine X." closing band */
html body .mx-closing .mx-h2,
html body .mx-closing h2 {
  font-size: clamp(28px, 3.6vw, 43px) !important;
}

/* ==========================================================================
   === Block 32 — ABOUT PAGE: hide redundant closing band (v1.0.28)        ===
   The About page (post ID 1983) has its own custom dark CTA section
   (.about-cta — "A trip designed in conversation.") that fills the same
   role as the global .mx-closing band. footer.php renders both, producing
   two black sections back-to-back. Suppress the global closing band on
   this page only — the page-specific CTA stays.
   ========================================================================== */
body.page-id-1983 .mx-closing { display: none !important; }

/* Concierge (id 14) — same pattern as About. The page has its own black
   .mx-inquiry CTA at the bottom, so the global closing band would render
   as a redundant second black section. */
body.page-id-14 .mx-closing { display: none !important; }

/* ==========================================================================
   === Block 38 — Concierge .mx-inquiry padding tighten (v1.0.41)          ===
   The dark inquiry band was 110px top/bottom for the old 8-field form.
   Asymmetric trim: leave breathing room above the heading, shrink the
   tail under the submit button so the section doesn't read as a black
   wall after the CTA.
   ========================================================================== */
.mx-inquiry {
  padding: 64px 0 36px !important;
}

/* Block 33 (mirror flip on Capital y Corazón hero) was removed in v1.0.30
   when the hero image was replaced with a straight-on Catedral Metropolitana
   shot that needs no transform. */

/* ==========================================================================
   === Block 34 — CONCIERGE hero stanza fix (v1.0.31)                      ===
   The Concierge page hero uses a custom .stanza wrapper instead of an h1
   / .mx-h1 — "Design your own. / A trip that exists exactly once." It had
   no CSS rule of its own and was inheriting body type (15px). Match it to
   the lead-headline scale used elsewhere (clamp 36/4.5vw/62).
   ========================================================================== */
html body .mx-hero .copy .stanza {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(36px, 4.5vw, 62px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em !important;
  color: var(--ink) !important;
  margin: 0 0 22px !important;
  display: block;
}
html body .mx-hero .copy .stanza span {
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  display: block;
}
html body .mx-hero .copy .stanza span em {
  font-style: italic !important;
  font-weight: 400 !important;
}
html body .mx-hero .copy .stanza .accent {
  font-style: italic !important;
  font-weight: 400 !important;
}
/* Hide the explicit <br> tags inside the stanza now that spans are block-display */
html body .mx-hero .copy .stanza br { display: none !important; }

/* ==========================================================================
   === Block 35 — ROMANCE ADD-ON CALLOUT (v1.0.34)                         ===
   "Add the Romance / For Two" section appended to all 5 signature trip
   pages. Centered, white background, sits between the trip body and the
   dark closing band. Categories only — no menu inclusions. CTA routes to
   the Concierge inquiry form.
   ========================================================================== */
.mx-romance {
  background: #fbfaf6;
  border-top: 1px solid #e7e3d8;
  padding: 88px 0 96px;
  text-align: center;
}
.mx-romance .container-narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 48px;
  text-align: center;
}
.mx-romance .eyebrow {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--label-red);
  margin: 0 0 22px;
}
.mx-romance .mx-h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 22px;
  display: block;
}
.mx-romance .lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 620px;
  margin: 0 auto 18px;
}
.mx-romance .sub {
  font-family: var(--body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  color: #555;
  max-width: 620px;
  margin: 0 auto 36px;
}
.mx-romance .mx-romance-cta {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 16px 32px;
  text-decoration: none;
  transition: all 0.2s;
}
.mx-romance .mx-romance-cta:hover {
  background: var(--ink);
  color: #fff;
}
@media (max-width: 720px) {
  .mx-romance { padding: 64px 0 72px; }
  .mx-romance .container-narrow { padding: 0 24px; }
}

/* ==========================================================================
   === Block 36 — FOOTER LOGO ENLARGE (v1.0.35)                            ===
   Footer logo was 26px desktop / 22px mobile (set on line 627 + 628 of an
   earlier block). Bumping ~35% so the wordmark reads at the bottom of the
   page without dominating it.
   ========================================================================== */
.mx-footer .brand-mark img,
.mx-footer .brand-img {
  height: 30px !important;
}
@media (max-width: 880px) {
  .mx-footer .brand-mark img,
  .mx-footer .brand-img {
    height: 24px !important;
  }
}

/* ==========================================================================
   === Block 37 — CONCIERGE FORM (v1.0.38)                                 ===
   The Concierge inquiry form is one large textarea where the visitor
   types their name, contact info, and trip description in a single
   paragraph. The previous 4-input layout is gone; this block styles
   what remains so the textarea reads as a substantial editorial input.
   ========================================================================== */
.mx-form {
  max-width: 720px;
  margin: 0 auto;
}
.mx-form .full {
  margin-bottom: 28px;
}
.mx-form label {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
.mx-form textarea {
  width: 100%;
  min-height: 260px;
  padding: 22px 24px;
  font-family: var(--body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  border: 1px solid #d8d3c4;
  border-radius: 2px;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.mx-form textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.mx-form textarea::placeholder {
  color: #999;
  font-style: italic;
}
.mx-form-cta {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: 16px 32px;
  cursor: pointer;
  transition: all 0.2s;
}
.mx-form-cta:hover {
  background: var(--ink);
  color: #fff;
}
@media (max-width: 720px) {
  .mx-form { padding: 0 24px; }
  .mx-form textarea { min-height: 220px; padding: 18px 20px; font-size: 16px; }
}