/* ============================================================
   nav.css — Split navigation with centered logo
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  /* Foggy frosted glass — a thin milky veil over a very heavy blur, so the
     page is clearly visible through it yet diffused into soft fog. */
  background: color-mix(in srgb, var(--color-warm-white) 90%, transparent);
  backdrop-filter: blur(40px) saturate(1.7) brightness(1.06);
  -webkit-backdrop-filter: blur(40px) saturate(1.7) brightness(1.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: box-shadow var(--transition), border-color var(--transition), background var(--transition), backdrop-filter var(--transition);
}

/* Scrolled: thicken the fog a touch for legibility and lift it off the page.
   Content behind stays visible but melts into a soft frosted blur. */
.nav.is-scrolled {
  background: color-mix(in srgb, var(--color-warm-white) 94%, transparent);
  backdrop-filter: blur(48px) saturate(1.8) brightness(1.08);
  -webkit-backdrop-filter: blur(48px) saturate(1.8) brightness(1.08);
  box-shadow: 0 10px 38px -20px rgba(30, 28, 24, 0.32);
  border-bottom-color: rgba(255, 255, 255, 0.45);
}

.nav__inner {
  height: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

/* Link groups */
.nav__group {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav__group--left { justify-content: flex-start; }
.nav__group--right { justify-content: flex-end; }

.nav__link {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-ink-70);
  padding-block: 0.6rem;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-sage);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}

.nav__link:hover { color: var(--color-ink); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__link.is-active { color: var(--color-ink); }
.nav__link.is-active::after { transform: scaleX(1); }

/* Centered logo lockup */
.nav__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  line-height: 1;
  text-align: center;
}

.nav__logo .logo-mark { width: 104px; height: auto; margin-bottom: 0.15rem; color: var(--color-ink); }

.nav__logo-text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--color-ink);
  white-space: nowrap;
}

.nav__logo-sub {
  font-family: var(--font-body);
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--color-earth);
}

/* Contact button (nav CTA) */
.nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius);
  background: var(--color-brand);
  color: var(--color-warm-white);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.nav__cta:hover { background: var(--color-sage); transform: translateY(-1px); }
.nav__cta::after { display: none; }

/* Hamburger */
.nav__toggle {
  display: none;
  width: 42px;
  height: 42px;
  position: relative;
  z-index: 120;
}

.nav__toggle span {
  position: absolute;
  left: 9px;
  width: 24px;
  height: 2px;
  background: var(--sky-ink);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav__toggle span:nth-child(1) { top: 15px; }
.nav__toggle span:nth-child(2) { top: 21px; }
.nav__toggle span:nth-child(3) { top: 27px; }

body.menu-open .nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Full-screen overlay menu (mobile) */
.nav__overlay {
  position: fixed;
  inset: var(--nav-height) 0 0;
  z-index: 110;
  background: var(--color-warm-white);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 1.25rem;
  align-content: start;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
body.menu-open { overflow: hidden; }
body.menu-open .nav__overlay { opacity: 1; visibility: visible; transform: none; }
/* The menu arrives like a wave: its lower edge rolls down the screen */
.nav__overlay { --wave-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='60'%3E%3Cpath d='M0,0 L0,32.9 L5,34.4 L10,35.9 L15,37.1 L20,38.2 L25,39.1 L30,39.8 L35,40.3 L40,40.6 L45,40.7 L50,40.6 L55,40.4 L60,40.1 L65,39.7 L70,39.2 L75,38.7 L80,38.1 L85,37.6 L90,37.1 L95,36.6 L100,36.2 L105,35.8 L110,35.5 L115,35.2 L120,35.0 L125,34.8 L130,34.6 L135,34.5 L140,34.3 L145,34.0 L150,33.7 L155,33.3 L160,32.9 L165,32.3 L170,31.6 L175,30.7 L180,29.8 L185,28.7 L190,27.6 L195,26.3 L200,25.0 L205,23.7 L210,22.3 L215,21.0 L220,19.8 L225,18.6 L230,17.6 L235,16.8 L240,16.1 L245,15.7 L250,15.5 L255,15.5 L260,15.8 L265,16.4 L270,17.2 L275,18.2 L280,19.4 L285,20.8 L290,22.4 L295,24.1 L300,25.8 L305,27.6 L310,29.4 L315,31.2 L320,32.9 L320,0Z'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) {
  body.menu-open .nav__overlay {
    -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% 100% no-repeat, var(--wave-down) 0 calc(100% + 60px) / 320px 60px repeat-x;
            mask: linear-gradient(#000, #000) 0 0 / 100% 100% no-repeat, var(--wave-down) 0 calc(100% + 60px) / 320px 60px repeat-x;
    animation: menuWave 0.75s cubic-bezier(.25,.8,.25,1);
  }
  body.menu-open .menu__links a { animation: fadeUp 0.5s var(--ease) both; animation-delay: calc(0.12s + var(--i, 0) * 0.04s); }
}
@keyframes menuWave {
  from { -webkit-mask-size: 100% 0%, 320px 60px; mask-size: 100% 0%, 320px 60px; -webkit-mask-position: 0 0, -160px 0; mask-position: 0 0, -160px 0; }
}
.menu__social { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.7rem; margin-top: 0.2rem; border-top: 1px solid var(--color-rule); font-size: 0.85rem; color: var(--color-ink-70); }
.menu__social:has(.social-row:empty) { display: none; }
.menu__social .social-row { gap: 0.4rem; }
.menu__social .social-row a { width: 38px; height: 38px; }
body.menu-open .nav__overlay > * { animation: fadeUp 0.5s var(--ease) both; }
body.menu-open .nav__overlay > *:nth-child(2) { animation-delay: 0.05s; }
body.menu-open .nav__overlay > *:nth-child(3) { animation-delay: 0.1s; }
body.menu-open .nav__overlay > *:nth-child(4) { animation-delay: 0.15s; }

.menu__search { display: flex; gap: 0.5rem; }
.menu__search select { flex: 1; min-width: 0; padding: 0.85rem 0.9rem; border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-warm-white); font: inherit; color: var(--color-ink); }
.menu__regions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.menu__region { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; display: block; }
.menu__region img { width: 100%; height: 100%; object-fit: cover; }
.menu__region::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,24,22,0.75), transparent 60%); }
.menu__region span { position: absolute; left: 0.8rem; bottom: 0.7rem; z-index: 1; color: #fff; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.1; }
.menu__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 1rem; border-top: 1px solid var(--color-rule); padding-top: 1rem; }
.nav__overlay .menu__links a { font-family: var(--font-display); font-size: 1.6rem; color: var(--color-ink); padding: 0.35rem 0; }
.nav__overlay .menu__links a.is-active, .nav__overlay .menu__links a:hover { color: var(--color-sage); }
.menu__agent { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 0.6rem; align-items: center; padding: 0.9rem; border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-warm-white); }
.menu__agent img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.menu__agent p { font-size: 0.82rem; color: var(--color-ink-40); line-height: 1.4; margin: 0; }
.menu__agent b { display: block; font-size: 1rem; color: var(--color-ink); }
.menu__call { padding: 0.6rem 0.9rem; border-radius: 999px; background: var(--color-brand-ground); color: #fff; font-size: 0.9rem; font-weight: 600; }
.menu__call + .menu__call { background: var(--color-cream); color: var(--color-ink); border: 1px solid var(--color-rule); }

/* ---------- Responsive nav ---------- */
@media (max-width: 980px) {
  .nav__inner { grid-template-columns: auto 1fr auto; }

  .nav__group--left,
  .nav__group--right { display: none; }

  .nav__logo { align-items: center; }

  .nav__toggle { display: block; justify-self: end; grid-column: 3; }
  .nav__inner { padding-inline: 1rem; gap: 0.5rem; }
  .nav__logo-text { font-size: clamp(0.85rem, 3.6vw, 1.15rem); letter-spacing: 0.12em; }

  .nav__logo { grid-column: 2; }
}

@media (min-width: 981px) {
  .nav__overlay { display: none; }
}

/* ---------- Header search button + finder ---------- */
.nav__search { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.8rem; border-radius: 999px; border: 1px solid var(--color-rule); color: var(--color-ink); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: border-color var(--transition-fast); }
.nav__search:hover { border-color: var(--color-ink-20); }
.nav__search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav__search span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nav__search { padding: 0; width: 40px; height: 40px; justify-content: center; }
.nav__search svg { width: 18px; height: 18px; }

.finder { width: min(40rem, calc(100vw - 2rem)); margin: 12vh auto auto; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--color-warm-white); box-shadow: var(--shadow-lg); color: var(--color-ink-70); }
.finder::backdrop { background: rgba(20,24,22,0.5); backdrop-filter: blur(3px); }
.finder[open] { animation: fadeUp 0.25s var(--ease); }
.finder__q { width: 100%; padding: 1.2rem 1.4rem; border: 0; border-bottom: 1px solid var(--color-rule); background: transparent; font: inherit; font-size: 1.2rem; color: var(--color-ink); }
.finder__q:focus { outline: none; }
.finder__list { list-style: none; max-height: min(55vh, 28rem); overflow-y: auto; padding: 0.5rem; margin: 0; }
.finder__list [role="option"] { display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem 0.75rem; border-radius: var(--radius); color: var(--color-ink); cursor: pointer; }
.finder__list [aria-selected="true"], .finder__list [role="option"]:hover { background: var(--color-cream); }
.finder__list img { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.finder__ic { width: 56px; height: 42px; flex-shrink: 0; border-radius: 6px; background: var(--color-sage-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5e4a' stroke-width='1.6'%3E%3Cpath d='M12 21s-6-5.4-6-10a6 6 0 1 1 12 0c0 4.6-6 10-6 10Z'/%3E%3Ccircle cx='12' cy='11' r='2'/%3E%3C/svg%3E") center / 22px no-repeat; }
.finder__list b { display: block; font-weight: 600; font-size: 1rem; }
.finder__list small { display: block; font-size: 0.85rem; color: var(--color-ink-40); }
.finder__none { padding: 1rem 0.75rem; color: var(--color-ink-40); }
.finder__group { padding: 0.75rem 0.75rem 0.15rem; font-family: var(--font-display); font-size: 1.05rem; color: var(--color-ink-40); }
.finder__group + li { margin-top: 0; }
.finder__hint { margin: 0; padding: 0.7rem 1.2rem; border-top: 1px solid var(--color-rule); font-size: 0.8rem; color: var(--color-ink-40); }
.finder__hint kbd { font: inherit; font-size: 0.75rem; padding: 0.05rem 0.35rem; border: 1px solid var(--color-rule); border-radius: 4px; background: var(--color-warm-white); margin-right: 0.2rem; }
@media (hover: none) { .finder__hint { display: none; } }

/* Mid-width desktops: tighter links and logo so neither side runs into the logo */
@media (min-width: 981px) and (max-width: 1180px) {
  .nav__group { gap: 1rem; }
  .nav__link { letter-spacing: 0.06em; font-size: 0.74rem; }
  .nav__logo-text { font-size: 0.98rem; letter-spacing: 0.12em; }
  .nav__cta { padding-inline: 1rem; }
}

/* Communities panel: every town as a photo card (nav.js) */
.nav__mega { position: static; display: inline-flex; align-items: center; height: 100%; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60; padding: 1.6rem 0 1.8rem;
  background: var(--color-warm-white, #faf8f3); border-top: 1px solid var(--color-rule, rgba(0,0,0,0.08)); box-shadow: 0 30px 50px -30px rgba(0,0,0,0.35);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.25s var(--ease), transform 0.35s var(--ease-out-expo), visibility 0s linear 0.35s;
}
.nav__mega.is-open .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega__inner { max-width: var(--container, 1240px); margin: 0 auto; padding: 0 var(--gutter, 2rem); display: grid; grid-template-columns: 5fr 4fr; gap: 2.4rem; }
.mega__title { font-family: var(--font-body); font-style: normal; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-ink-70); margin-bottom: 0.8rem; }
.mega__towns { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); gap: 0.8rem; }
.mega__town { display: block; color: var(--color-ink); }
.mega__pic { display: block; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; margin-bottom: 0.45rem; background: #dfe3dc; }
.mega__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out-expo); }
.mega__town:hover .mega__pic img, .mega__town:focus-visible .mega__pic img { transform: scale(1.08); }
.mega__town b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; line-height: 1.15; }
.mega__count { display: block; font-size: 0.75rem; color: var(--color-ink-70); min-height: 1.1em; }
.mega__town:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; border-radius: 8px; }
.mega__all { grid-column: 1 / -1; justify-self: start; font-size: 0.9rem; font-weight: 500; color: var(--color-brand); border-bottom: 1px solid currentColor; }
.nav__mega.is-open .mega__town { animation: megaIn 0.5s var(--ease-out-expo) both; }
.nav__mega.is-open .mega__town:nth-child(2) { animation-delay: 0.04s; } .nav__mega.is-open .mega__town:nth-child(3) { animation-delay: 0.08s; }
.nav__mega.is-open .mega__town:nth-child(4) { animation-delay: 0.12s; } .nav__mega.is-open .mega__town:nth-child(5) { animation-delay: 0.16s; }
@keyframes megaIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .mega, .nav__mega.is-open .mega__town { transition: none; animation: none; } }
.mega__region:first-child .mega__towns { grid-template-columns: repeat(5, 1fr); } .mega__region:nth-child(2) .mega__towns { grid-template-columns: repeat(4, 1fr); }

/* Header strip (KW: name, market centers and contact in the header on every
   page). It sits inside the fixed nav, so --nav-height includes it. */
:root { --strip-h: 32px; --nav-height: 116px; }
.nav__inner { height: calc(100% - var(--strip-h)); }
.nav__strip { height: var(--strip-h); background: var(--color-brand-deep, #12302f); color: rgba(246,239,220,0.86); font-size: 0.78rem; }
.nav__strip-inner { height: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1rem; white-space: nowrap; overflow: hidden; }
.nav__strip-who { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav__strip-ways, .nav__strip-from, .sky-pick { flex: 0 0 auto; }
.nav__strip b { font-weight: 600; color: #f6efdc; }
.nav__strip-ways { display: flex; gap: 1.4rem; }
.nav__strip a { color: #f6efdc; }
.nav__strip a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  :root { --strip-h: 28px; }
  .nav__strip { font-size: 0.7rem; }
  .nav__strip-ways { display: none; }
  .nav__strip-who { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 760px) { .nav__strip-mc { font-size: 0; } .nav__strip-mc::after { content: '· KW Elevate & KW Gulf Coast'; font-size: 0.7rem; } }

/* "Driving from" in the header strip (desktop) and the phone menu: the one
   place the visitor can change their city from any page (Listings.From) */
.nav__strip-ways { margin-left: auto; }
.nav__strip-from { margin-left: 1.6rem; padding-left: 1.6rem; border-left: 1px solid rgba(246,239,220,0.25); }
.nav__strip-from:empty { display: none; }
.nav__strip-from .from { font-family: var(--font-body); font-size: 0.78rem; gap: 0.3em; color: rgba(246,239,220,0.86); }
.nav__strip-from .from__sel { color: #f6efdc; border-bottom-width: 1px; padding-right: 1em; max-width: 15ch; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6efdc' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-size: 0.7em; }
.nav__strip-from .from.is-set .from__sel { color: #fff; }
@media (max-width: 760px) { .nav__strip-from { display: none; } }
.menu__from { margin: -0.4rem 0 0; }
.menu__from:empty { display: none; }
.menu__from .from { font-size: 1.3rem; }

/* The drive bar: once a city is set, the strip says how far each place is
   from it (Listings.From.paintStrip); each is a link to that town */
.from__times { display: inline-flex; gap: 0.9rem; margin-left: 0.9rem; padding-left: 0.9rem; border-left: 1px solid rgba(246,239,220,0.25); white-space: nowrap; }
/* make room for it: while a city is set, the market centers read in their short form below 1600px */
@media (max-width: 1599px) {
  html.has-from .nav__strip-mc { font-size: 0; }
  html.has-from .nav__strip-mc::after { content: '· KW Elevate & KW Gulf Coast'; font-size: 0.78rem; }
  html.has-from .nav__strip-ways { gap: 1rem; }
  html.has-from .nav__strip-from { margin-left: 1rem; padding-left: 1rem; }
  html.has-from .nav__strip-inner { max-width: calc(var(--max-width) + 6rem); gap: 0.75rem; }
  html.has-from .from__times { gap: 0.75rem; margin-left: 0.75rem; padding-left: 0.75rem; }
}
.from__times a { color: rgba(246,239,220,0.86); text-decoration: none; }
.from__times a:hover { text-decoration: underline; }
.from__times b { font-weight: 600; color: #f6efdc; }
.from__times b::after { content: ' ·'; font-weight: 400; color: rgba(246,239,220,0.5); }
@media (max-width: 1319px) { .from__times { display: none; } }

/* the phone menu's towns, each with the drive from the visitor's city (nav.js) */
.menu__towns { border-top: 1px solid var(--color-rule); padding-top: 1rem; }
.menu__towns-title { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-40); margin: 0 0 0.6rem; }
.menu__towns-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem 0.8rem; }
.menu__towns-grid a { display: grid; gap: 0.05rem; padding: 0.45rem 0; color: var(--color-ink); line-height: 1.2; }
.menu__towns-grid b { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; }
.menu__towns-grid span { font-size: 0.72rem; color: var(--color-earth); }
.menu__towns-grid span[hidden] { display: none; }
@media (max-width: 400px) { .menu__towns-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- The header condenses once you scroll (desktop) ----------
   The strip folds away and the logo settles smaller, so reading gets the room;
   everything that sticks under the header follows it through --nav-now. */
:root { --nav-now: var(--nav-height); }
@media (min-width: 981px) {
  :root:has(.nav.is-scrolled) { --nav-now: 68px; }
  .nav { transition: height 0.45s var(--ease), box-shadow var(--transition), border-color var(--transition), background var(--transition); }
  .nav__strip { overflow: hidden; transition: height 0.45s var(--ease), opacity 0.25s var(--ease); }
  .nav.is-scrolled { height: 68px; }
  .nav.is-scrolled .nav__strip { height: 0; opacity: 0; }
  .nav.is-scrolled .nav__inner { height: 100%; }
  .nav__logo .logo-mark { transition: width 0.45s var(--ease), margin 0.45s var(--ease); }
  .nav__logo-text { transition: font-size 0.45s var(--ease), letter-spacing 0.45s var(--ease); }
  .nav__logo-sub { transition: opacity 0.2s var(--ease), max-height 0.45s var(--ease); max-height: 1rem; overflow: hidden; }
  .nav.is-scrolled .nav__logo .logo-mark { width: 58px; margin-bottom: 0; }
  .nav.is-scrolled .nav__logo-text { font-size: 0.92rem; letter-spacing: 0.14em; }
  .nav.is-scrolled .nav__logo-sub { opacity: 0; max-height: 0; }
  .browse__bar, .sticky-home, .gtabs, .saturday__top, .is-split .browse__map { transition: top 0.45s var(--ease); }
}
@media (prefers-reduced-motion: reduce) { .nav, .nav__strip, .nav__logo .logo-mark, .nav__logo-text, .nav__logo-sub { transition: none; } }

/* Say it: the mic in the search box */
.finder__box { position: relative; }
.finder__mic { position: absolute; right: 0.9rem; top: 0.95rem; width: 38px; height: 38px; border-radius: 50%; background: var(--color-cream); color: var(--color-brand); display: grid; place-items: center; transition: background var(--transition-fast); }
.finder__mic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.finder__mic:hover { background: var(--color-sand); }
.finder__mic[aria-pressed="true"] { background: var(--color-earth); color: #fff; }
.finder__q { padding-right: 4rem; }

/* How far down the page you are: a hairline along the header's bottom edge */
.nav::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--color-earth); transform: scaleX(var(--read, 0)); transform-origin: left; pointer-events: none; }

/* On a phone the header condenses as well: the strip folds, the logo settles small */
@media (max-width: 980px) {
  :root:has(.nav.is-scrolled) { --nav-now: 60px; }
  .nav { transition: height 0.4s var(--ease), box-shadow var(--transition), background var(--transition); }
  .nav__strip { overflow: hidden; transition: height 0.4s var(--ease), opacity 0.2s var(--ease); }
  .nav.is-scrolled { height: 60px; }
  .nav.is-scrolled .nav__strip { height: 0; opacity: 0; }
  .nav.is-scrolled .nav__inner { height: 100%; }
  .nav__logo .logo-mark { transition: width 0.4s var(--ease), margin 0.4s var(--ease); }
  .nav__logo-text { transition: font-size 0.4s var(--ease); }
  .nav__logo-sub { transition: opacity 0.2s var(--ease), max-height 0.4s var(--ease); max-height: 1rem; overflow: hidden; }
  .nav.is-scrolled .nav__logo .logo-mark { width: 62px; margin-bottom: 0; }
  .nav.is-scrolled .nav__logo-text { font-size: 0.78rem; }
  .nav.is-scrolled .nav__logo-sub { opacity: 0; max-height: 0; }
}

/* The sky button in the ribbon (main.js): sun or moon, and whether the site is
   following the sun or held at day or night */
.sky-pick { display: inline-flex; align-items: center; gap: 0.4em; margin-left: 1.2rem; padding: 0.18rem 0.6rem 0.18rem 0.45rem; border-radius: 99px; border: 1px solid rgba(246, 239, 220, 0.3); color: #f6efdc; font: inherit; font-size: 0.74rem; white-space: nowrap; transition: border-color var(--transition-fast), background var(--transition-fast); }
.sky-pick svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sky-pick:hover { border-color: #f6efdc; background: rgba(246, 239, 220, 0.1); }
.sky-pick:focus-visible { outline: 2px solid #f6efdc; outline-offset: 2px; }
@media (max-width: 760px) { .sky-pick { margin-left: 0.6rem; padding: 0.3rem; border: 0; } .sky-pick span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .sky-pick svg { width: 17px; height: 17px; } }

/* ============================================================
   THE HEADER IS THE SKY (round three). The ribbon and the bar
   together are the hour's sky: first light, daylight, golden
   hour, dusk and night each have their own gradient (main.css
   SKY), and the sun or the moon crosses the ribbon at its real
   place in the day or the night (--sun and --moon from the head
   script; main.js SKY draws the moon in tonight's phase). The
   ink follows the sky, and the stars come out at night.
   ============================================================ */
:root { --sky-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e1c18' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
:root[data-sky="dusk"], :root[data-sky="night"] { --sky-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0e9da' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.nav, .nav.is-scrolled { background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom)); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--sky-line); }
.nav.is-scrolled { box-shadow: 0 10px 38px -20px rgba(0, 0, 0, 0.35); }
.nav__strip { position: relative; overflow: hidden; background: transparent; color: var(--sky-ink-soft); border-bottom: 1px solid var(--sky-line); }
.nav__strip-inner { position: relative; z-index: 1; }
.nav__strip b, .nav__strip a, .nav__strip-from .from__sel, .nav__strip-from .from.is-set .from__sel { color: var(--sky-ink); }
.nav__strip-from .from { color: var(--sky-ink-soft); }
.nav__strip-from, .from__times { border-left-color: var(--sky-line); }
.nav__strip-from .from__sel { background-image: var(--sky-chevron); }
.nav__link { color: var(--sky-ink-soft); }
.nav__link:hover, .nav__link.is-active { color: var(--sky-ink); }
.nav__logo .logo-mark, .nav__logo-text, .nav__logo-sub { color: var(--sky-ink); }
.nav__search { color: var(--sky-ink); border-color: var(--sky-line); }
.nav__search:hover { border-color: var(--sky-ink-soft); }
.sky-pick { color: var(--sky-ink); border-color: var(--sky-line); }
.sky-pick:hover { border-color: var(--sky-ink); background: color-mix(in srgb, var(--sky-ink) 10%, transparent); }
.sky-pick:focus-visible { outline-color: var(--sky-ink); }
/* the sun: a disc on the ribbon, as far along as the day is */
.nav__sky { position: absolute; top: 50%; left: calc(4% + var(--sun, 0.5) * 92%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--sun-color); box-shadow: 0 0 0 4px var(--sun-glow), 0 0 22px 8px var(--sun-glow); pointer-events: none; z-index: 0; }
:root[data-sky="dawn"] .nav__sky { box-shadow: 0 0 0 5px var(--sun-glow), 0 0 30px 12px var(--sun-glow); }
:root[data-sky="golden"] .nav__sky { box-shadow: 0 0 0 5px var(--sun-glow), 0 0 34px 14px var(--sun-glow); }
/* the moon: drawn in its phase, as far along as the night is */
:root[data-sky="dusk"] .nav__sky, :root[data-sky="night"] .nav__sky { left: calc(4% + var(--moon, 0.5) * 92%); background: none; box-shadow: none; }
.nav__sky svg { display: block; width: 18px; height: 18px; filter: drop-shadow(0 0 7px rgba(240, 236, 220, 0.55)); }
/* the stars, in two depths */
.nav__strip::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease); background-image: radial-gradient(1.6px 1.6px at 6% 28%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 13% 70%, rgba(255,255,255,0.75) 50%, transparent 52%), radial-gradient(1px 1px at 21% 40%, rgba(255,255,255,0.75) 50%, transparent 52%), radial-gradient(1.6px 1.6px at 29% 22%, rgba(255,255,255,0.75) 50%, transparent 52%), radial-gradient(1px 1px at 35% 64%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 42% 36%, rgba(255,255,255,0.75) 50%, transparent 52%), radial-gradient(1.6px 1.6px at 50% 74%, rgba(255,255,255,0.75) 50%, transparent 52%), radial-gradient(1px 1px at 57% 30%, rgba(255,255,255,0.75) 50%, transparent 52%), radial-gradient(1px 1px at 63% 58%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1.6px 1.6px at 70% 20%, rgba(255,255,255,0.75) 50%, transparent 52%), radial-gradient(1px 1px at 77% 66%, rgba(255,255,255,0.75) 50%, transparent 52%), radial-gradient(1px 1px at 84% 38%, rgba(255,255,255,0.75) 50%, transparent 52%), radial-gradient(1.6px 1.6px at 90% 72%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 96% 26%, rgba(255,255,255,0.75) 50%, transparent 52%), radial-gradient(1px 1px at 47% 16%, rgba(255,255,255,0.75) 50%, transparent 52%), radial-gradient(1.6px 1.6px at 25% 80%, rgba(255,255,255,0.75) 50%, transparent 52%); }
:root[data-sky="night"] .nav__strip::before { opacity: 1; }
:root[data-sky="dusk"] .nav__strip::before { opacity: 0.35; }
@media (max-width: 760px) { .nav__sky { width: 14px; height: 14px; margin: -7px 0 0 -7px; } .nav__sky svg { width: 14px; height: 14px; } }

/* The light's next move, in the ribbon (listings.js From.paintClocks): sunset
   over the coast in 48 min; first light over the mountains at 7:52 */
.nav__next { margin-left: 1.2rem; padding-left: 1.2rem; border-left: 1px solid var(--sky-line); color: var(--sky-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
a.nav__next:hover { color: var(--sky-ink); text-decoration: underline; text-underline-offset: 3px; }
.nav__next[hidden] { display: none; }
@media (max-width: 1280px) { .nav__next { display: none; } }

/* The phone menu's sky: the two places in their own light, and the sky button
   in words (main.js skyButton) */
.menu__sky { display: grid; gap: 0.6rem; margin: 0.2rem 0 0.6rem; }
.menu__skies { display: flex; gap: 0.5rem; }
.menu__skies[hidden] { display: none; }
.menu__skies .skytile { flex: 1 1 0; min-width: 0; padding: 0.5rem 0.7rem; column-gap: 0.5rem; }
.menu__skies .skytile b { font-size: 0.95rem; }
.menu__skies .skytile > span { font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu__sky-btn { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.75rem 0.9rem; border-radius: var(--radius); border: 1px solid var(--color-rule); background: var(--color-warm-white); color: var(--color-ink); font: inherit; font-size: 0.95rem; text-align: left; }
.menu__sky-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.menu__sky-btn em { font-style: normal; color: var(--color-ink-40); margin-left: 0.35rem; }
.menu__sky-btn em::before { content: '\00b7  '; }
/* the ribbon is a deeper band of the same sky, so it reads as a ribbon */
.nav__strip { background: color-mix(in srgb, var(--sky-top), var(--sky-ink) 7%); }

/* the sun rises into the ribbon on load (main.js adds is-up a frame later) */
html:not(.is-up) .nav__sky { transform: translateX(-40px); opacity: 0; }
.nav__sky { transition: transform 1.4s var(--ease), opacity 0.9s var(--ease); } /* transform and opacity only: no layout shift */

/* the light's next move, in the phone menu (listings.js From.paintClocks) */
.menu__next { font-size: 0.9rem; color: var(--color-ink-70); font-variant-numeric: tabular-nums; }
.menu__next[hidden] { display: none; }
.menu__next::after { content: ' \2192'; }