/* ============================================================
   VEGAN WELLNESS RETREATS — Design System
   Bold / modern / Apple-inspired
   ============================================================ */

:root {
  /* Core palette */
  --ink: #0a0e0c;            /* near-black, slightly green — text / icons / selection */
  --ink-soft: #1a1f1c;
  --surface-dark: #12291c;   /* unified deep-forest dark surface: top bar, footer, dark sections
                                (was a mix of flat near-black + the homepage's forest-green) */
  --surface-dark-2: #1e3d2a; /* forest gradient partner (= moss-deep) */
  --paper: #ffffff;
  --cream: #f6f4ee;          /* warm off-white sections */
  --cream-2: #efece2;
  --mist: #e8ebe6;

  /* Brand greens */
  --moss: #2f5d40;           /* deep forest */
  --moss-deep: #1e3d2a;
  --leaf: #4a8a5c;           /* mid green */
  --sage: #8fae93;
  --sage-soft: #c5d6c8;

  /* Accents */
  --sun: #e3a34d;            /* warm amber — decorative gold highlights on dark */
  --sun-deep: #c9842f;
  --clay: #c66a4a;           /* terracotta (legacy alias; see --urgent) */
  --sky: #6fa8b8;

  /* ---- Conversion / semantic layer  ----------------------------------
     One job per color so the money moments read instantly:
       CTA amber  = BUY / checkout-forward actions ONLY
       urgent     = genuine scarcity / act-now (refined terracotta)
       danger     = the single system/error red
       save       = positive green for savings & discount anchors      */
  --cta: #e2a33f;            /* filled buy button — reserved for purchase */
  --cta-deep: #c9842f;       /* buy button hover */
  --cta-ink: #2a1a06;        /* text on amber: warm near-black, ~9:1 contrast */

  --urgent: #c0503a;         /* scarcity / low-stock / act-now */
  --urgent-deep: #a53f2c;
  --urgent-soft: #fbe9e3;    /* tint background for scarcity chips */
  --urgent-ink: #7a2e1e;     /* text on the soft tint */

  --danger: #c0392b;         /* THE one error/validation red */
  --danger-soft: #fdf3f2;

  --save: #1f7a4d;           /* positive green — "you save", discount anchor */
  --save-soft: #eaf6ec;

  --tx-accent: var(--sun);   /* Texas wayfinding = warm gold */
  --mi-accent: #6fa8b8;      /* Michigan wayfinding = cool water */

  /* Text */
  --text: #14201a;
  --text-2: #44524a;
  --text-3: #6c7a71;
  --on-dark: #f4f6f2;
  --on-dark-2: #b9c6bd;

  /* Lines */
  --line: rgba(20, 32, 26, 0.10);
  --line-strong: rgba(20, 32, 26, 0.18);
  --line-dark: rgba(255, 255, 255, 0.14);

  /* Type — editorial serif headlines (Fraunces) + clean humanist sans (Inter) */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;

  /* Layout */
  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --radius-lg: 4px;
  --radius-sm: 3px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadow */
  --shadow-sm: 0 2px 10px rgba(10, 14, 12, 0.06);
  --shadow: 0 18px 50px -18px rgba(10, 14, 12, 0.30);
  --shadow-lg: 0 40px 90px -30px rgba(10, 14, 12, 0.45);

  --nav-h: 88px;
}

/* ----------  Reset  ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

::selection { background: var(--sun); color: var(--ink); }

/* ----------  Typographic scale  ----------
   Headlines: Fraunces (editorial serif, optical sizing + slight softness).
   Body/UI:   Inter. */
.display {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(2.7rem, 7.6vw, 6.1rem);
  line-height: 1.0;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0;
}
h1, .h1 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
}
h2, .h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(1.8rem, 3.8vw, 3.05rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  font-weight: 600;
  margin: 0;
}
h3, .h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: 640;
  margin: 0;
}
.eyebrow {
  font-size: 0.78rem;
  font-weight: 660;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leaf);
  margin: 0 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1.5px;
  background: var(--leaf);
  display: inline-block;
}
.eyebrow.on-dark { color: var(--sun); }
.eyebrow.on-dark::before { background: var(--sun); }
.eyebrow.center { justify-content: center; }

.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--text-2);
  letter-spacing: -0.015em;
}
.serif { font-family: var(--serif); font-style: italic; }

/* ----------  Layout helpers  ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap-wide { max-width: 1380px; }
.section { padding-block: clamp(72px, 11vw, 150px); }
.section-sm { padding-block: clamp(48px, 7vw, 90px); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 64ch; }
.measure-sm { max-width: 48ch; }

.bg-cream { background: var(--cream); }
.bg-cream-2 { background: var(--cream-2); }
.bg-ink { background: var(--surface-dark); color: var(--on-dark); }
.bg-moss { background: var(--moss-deep); color: var(--on-dark); }

/* ----------  Buttons  ---------- */
.btn {
  --bg: var(--ink);
  --fg: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid transparent;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s ease, color 0.3s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn .arr { transition: transform 0.4s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* BUY / checkout-forward actions — the money color. Amber, bold, buy-only. */
.btn-primary { --bg: var(--cta); --fg: var(--cta-ink); font-weight: 700; }
.btn-primary:hover { --bg: var(--cta-deep); }
.btn-sun { --bg: var(--cta); --fg: var(--cta-ink); font-weight: 700; }
.btn-sun:hover { --bg: var(--cta-deep); }
/* Secondary / navigation — brand green (was the old primary look). */
.btn-secondary { --bg: var(--moss); --fg: #fff; }
.btn-secondary:hover { --bg: var(--moss-deep); }
.btn-light { --bg: #fff; --fg: var(--ink); box-shadow: var(--shadow-sm); }
.btn-ghost {
  --bg: transparent; --fg: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover { --bg: var(--ink); --fg: #fff; border-color: var(--ink); }
.btn-ghost.on-dark { --fg: var(--on-dark); border-color: var(--line-dark); }
.btn-ghost.on-dark:hover { --bg: #fff; --fg: var(--ink); }
.btn-lg { padding: 18px 36px; font-size: 1.05rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row.center { justify-content: center; }

/* Text link with arrow */
.tlink {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; color: var(--moss);
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.3s ease, gap 0.3s var(--ease);
  padding-bottom: 1px;
}
.tlink:hover { border-color: var(--leaf); gap: 11px; }
.tlink.on-dark { color: var(--sun); }

/* ----------  Pills / chips  ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px;
  border-radius: 4px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--line);
  font-size: 0.82rem; font-weight: 600;
  color: var(--text-2);
  backdrop-filter: blur(8px);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); }
.pill .dot.live { background: var(--urgent); box-shadow: 0 0 0 0 rgba(192,80,58,.6); animation: pulse 2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(192,80,58,.55); }
  70% { box-shadow: 0 0 0 9px rgba(192,80,58,0); }
  100% { box-shadow: 0 0 0 0 rgba(192,80,58,0); }
}

/* ----------  Scarcity / urgency (refined) ---------- */
.scarcity, .stock-low, .u-urgent { color: var(--urgent); font-weight: 650; }
.chip-urgent {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 4px;
  background: var(--urgent-soft); color: var(--urgent-ink);
  font-size: 0.78rem; font-weight: 700; letter-spacing: .01em;
}
.chip-urgent .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--urgent); }
/* Positive / savings emphasis for price anchors & discounts */
.u-save { color: var(--save); font-weight: 700; }
.chip-save { background: var(--save-soft); color: var(--save); padding: 5px 11px; border-radius: 4px; font-size: .78rem; font-weight: 700; }
.pill.on-dark { background: rgba(255,255,255,0.08); border-color: var(--line-dark); color: var(--on-dark); }
/* Hero social-proof bar: lighter weight, softer text, monochrome line icons */
.hero-pills .pill { font-weight: 560; }
.hero-pills .pill.on-dark {
  color: #fff;
  background: rgba(12,18,14,0.52);
  border-color: rgba(255,255,255,0.30);
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
  box-shadow: 0 2px 16px rgba(0,0,0,0.20);
}
.hero-pills .pill .ic { width: 14px; height: 14px; flex: none; opacity: 0.95; }

/* ----------  Announcement bar  ---------- */
.announce {
  background: var(--surface-dark);
  color: var(--on-dark);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 9px var(--gut);
  position: relative;
  z-index: 60;
}
.announce a { color: var(--sun); font-weight: 650; border-bottom: 1px solid transparent; transition: border-color .25s; }
.announce a:hover { border-color: var(--sun); }
.announce .sep { opacity: .4; margin-inline: 10px; }

/* ----------  Navigation  ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.nav.scrolled { border-color: var(--line); background: rgba(255,255,255,0.85); }
.nav-inner {
  height: 100%;
  max-width: 1380px; margin-inline: auto;
  padding-inline: var(--gut);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -0.03em; font-size: 1.06rem; flex: none; }
.brand-mark {
  width: 68px; height: 68px; border-radius: 8px;
  background: var(--moss);
  display: grid; place-items: center;
  color: #fff; flex: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.brand-mark svg { width: 44px; height: 44px; }
.brand small { display:block; font-size: .62rem; font-weight: 600; letter-spacing: .14em; color: var(--text-3); text-transform: uppercase; margin-top: 1px; }
/* New wordmark logo (sprout + "Vegan Wellness Retreats" + tagline).
   Footer is on a dark background and points its <img src> directly at
   the mono-white variant, so the logo renders correctly in every browser. */
.brand-logo { display: block; height: 42px; width: auto; }
/* Nav / registration header use the square tree-of-life mark (logo-mark.png) — size it
   up to fill the top bar; footer keeps the compact horizontal wordmark at the base 42px. */
.nav .brand-logo, .reg-head .brand-logo { height: 84px; width: 84px; max-width: none; } .brand-name { font-weight: 800; font-size: 1.16rem; line-height: 1.02; letter-spacing: -0.03em; color: var(--ink); } @media (max-width: 520px){ .brand-name { font-size: .98rem; } }
@media (max-width: 520px){ .nav .brand-logo, .reg-head .brand-logo { height: 64px; width: 64px; } }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-size: 0.92rem; font-weight: 550; color: var(--text-2);
  padding: 8px 13px; border-radius: 3px;
  transition: color .2s ease, background .2s ease;
}
.nav-links a:hover { color: var(--ink); background: rgba(20,32,26,.05); }
.nav-links a.active { color: var(--moss); }
.nav-cta { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none; width: 42px; height: 42px;
  border: 1px solid var(--line-strong); background: transparent;
  border-radius: 4px; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after { transform: translateY(6px); }
body.menu-open .nav-toggle span { background: transparent; }
body.menu-open .nav-toggle span::before { transform: rotate(45deg); }
body.menu-open .nav-toggle span::after { transform: rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 45;
  background: var(--cream);
  /* Clear the WHOLE header at the top — the sticky nav (var(--nav-h)=88px) AND the announcement
     bar (~40px, up to ~56px when it wraps on narrow screens) stacked above it — so the first item
     ("Texas 2027") is never clipped under the header. (Was var(--nav-h)+30 = 118px, which cleared
     the nav only and left ~36px of the first link hidden.) Plus a bottom safe-area gap. */
  padding: calc(var(--nav-h) + 78px) var(--gut) calc(40px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 6px;
  transform: translateY(-100%);
  opacity: 0; pointer-events: none;
  transition: transform .45s var(--ease), opacity .3s ease;
  /* Own scroll container: scrolls internally when the links overflow the
     viewport, with iOS momentum scrolling. `overscroll-behavior: contain`
     stops the scroll from bleeding into the (locked) page behind it. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
body.menu-open .mobile-menu { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
  flex: none;   /* never let a flex item shrink below its content height */
}
.mobile-menu a .arr { color: var(--sage); }
/* Was `margin-top:auto`, which in an overflowing flex column pushed the first
   link up above the scroll container's start and clipped it (the "stuck menu"
   bug). Drop the auto margin so content flows top-to-bottom and every item is
   reachable; a fixed top margin keeps the footer visually separated. */
.mobile-menu .mm-foot { margin-top: 24px; padding-top: 26px; border-top: 1px solid var(--line); display: grid; gap: 12px; flex: none; }

/* ----------  Cards  ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }

.feature {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature .ic {
  width: 52px; height: 52px; border-radius: 4px;
  background: var(--cream); color: var(--moss);
  display: grid; place-items: center; margin-bottom: 20px;
}
.feature .ic svg { width: 26px; height: 26px; }
.feature h3 { margin-bottom: 9px; }
.feature p { margin: 0; color: var(--text-2); font-size: 0.98rem; }

/* ----------  Grids  ---------- */
.grid { display: grid; gap: clamp(16px, 2vw, 28px); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

/* ----------  Stat strip  ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px,2vw,24px); }
.stat .num {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1; color: var(--ink);
}
.stat .num .u { color: var(--leaf); }
.stat .lbl { margin-top: 9px; font-size: 0.9rem; color: var(--text-3); font-weight: 550; }
.bg-ink .stat .num, .bg-moss .stat .num { color: #fff; }
.bg-ink .stat .num .u, .bg-moss .stat .num .u { color: var(--sun); }
.bg-ink .stat .lbl, .bg-moss .stat .lbl { color: var(--on-dark-2); }

/* ----------  Reveal animation  ---------- */
/* Only hide when JS is active (html.js). Without JS, content stays visible. */
.reveal { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
html.js .reveal { opacity: 0; transform: translateY(28px); }
html.js .reveal.in { opacity: 1; transform: none; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .pill .dot.live { animation: none; }
}

/* ----------  Footer  ---------- */
.footer { background: linear-gradient(165deg, var(--surface-dark), var(--surface-dark-2)); color: var(--on-dark); padding-block: clamp(56px, 8vw, 88px) 36px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--on-dark-2); margin: 0 0 18px; font-weight: 650; }
.footer-links { display: grid; gap: 11px; }
.footer-links a { color: var(--on-dark); opacity: .82; font-size: 0.95rem; transition: opacity .2s, color .2s; width: fit-content; }
.footer-links a:hover { opacity: 1; color: var(--sun); }
.footer .brand { color: #fff; }
.footer .brand small { color: var(--on-dark-2); }
.footer-blurb { color: var(--on-dark-2); margin: 18px 0 22px; max-width: 34ch; font-size: 0.95rem; }
.socials { display: flex; gap: 10px; }
.socials a {
  width: 40px; height: 40px; border-radius: 4px;
  border: 1px solid var(--line-dark);
  display: grid; place-items: center; opacity: .85;
  transition: background .25s, opacity .25s, transform .3s var(--ease);
}
.socials a:hover { background: rgba(255,255,255,.1); opacity: 1; transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; }
.footer-bottom {
  margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--on-dark-2);
}
.footer-bottom .mini-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom a:hover { color: var(--sun); }

/* ----------  Misc utilities  ---------- */
.tag {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.74rem; font-weight:680; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 12px; border-radius:4px;
}
.tag-tx { background: rgba(20,16,8,.55); color: var(--tx-accent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tag-mi { background: rgba(10,25,31,.55); color: var(--mi-accent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.divider { height:1px; background: var(--line); border:0; margin:0; }
.flow > * + * { margin-top: 1.1em; }
.muted { color: var(--text-3); }
.nowrap { white-space: nowrap; }

/* ----------  Responsive  ---------- */
@media (max-width: 980px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 860px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: flex; }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .g-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .btn-row .btn { width: 100%; }
  .announce { font-size: 0.76rem; }
  .announce .hide-sm { display: none; }
}

/* ---------- Nav declutter: key tabs stay inline, the rest live in the hamburger menu ---------- */
/* Remove the "Secure your spot" CTA button from the top bar. */
.nav-cta .btn { display: none; }

/* Show the hamburger (menu) button at all widths, not just on mobile. */ @media (min-width:861px){ .nav-links a[href^="volunteer.html"]{ display:inline-flex } }
.nav-toggle { display: flex; }

/* On desktop, keep only the key tabs inline; everything else is reachable via the menu. */
@media (min-width: 861px) {
  .nav-links a { display: none; }
  .nav-links a[href^="texas.html"],
  .nav-links a[href^="michigan.html"],
  .nav-links a[href^="index.html#food"],
  .nav-links a[href^="faq.html"],
  .nav-links a[href^="bus.html"],
  .nav-links a[href^="contact.html"] { display: inline-flex; }
}
/* Speed Dating + Vegan Olympics join the inline tabs only on wide screens —
   below 1150px the 8-tab row would overflow the bar, so they stay in the menu. */
@media (min-width: 1150px) {
  .nav-links a[href^="speed-dating.html"],
  .nav-links a[href^="vegan-olympics.html"] { display: inline-flex; }
}