/* ===========================================================================
   sterling-header.css — the design system and the site header.

   Ported verbatim from the Astro reference build (src/styles/tokens.css and
   src/components/Header.astro). Where a number here carries a "· ref" note it
   is a measured value from lakehousecanandaigua.com — see files/reference-nav.md
   in the project repository.

   This file is the single home for the header's appearance. Nothing about the
   header is styled from Elementor, because Elementor cannot express a
   clip-path sheet, a three-column mega panel or a drill-down drawer, and
   splitting the rules between here and a widget panel would leave nobody able
   to find them. Everything the client edits — menu items, button labels,
   preview images — lives in WordPress admin instead.
   =========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Self-hosted, Latin subset, woff2. No Google Fonts request. Four faces,
   four jobs, no overlap:
     Playfair Display  wordmark and hero display     variable 400–900
     Gilda Display     navigation, section headings  static   400
     Clash Grotesk     uppercase chrome, buttons     variable 200–700
     Cabinet Grotesk   body copy and long-form prose variable 100–900
-------------------------------------------------------------------------- */

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilda Display';
  src: url('../fonts/gilda-display.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Clash Grotesk';
  src: url('../fonts/clash-grotesk.woff2') format('woff2-variations');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('../fonts/cabinet-grotesk.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Palette ----------------------------------------------------------
     Warm-neutral greys, hue held at a constant 40° so the ramp never drifts
     as it darkens. Contrast on --surface: ink 17.9 : 1, ink-muted 5.3 : 1,
     ink-faint 2.7 : 1 — so ink-faint is for hairlines and decoration only.
     Never set a sentence in it.                                          */

  --surface:        #fbfaf8;
  --surface-raised: #ffffff;
  --surface-sunk:   #f2f1ed;
  --surface-ink:    #131211;

  --ink:            #131211;
  --ink-strong:     #000000;
  --ink-muted:      #6c6862;
  --ink-faint:      #9d9992;

  --rule:           #e2dfd9;
  --rule-strong:    #c9c5bd;

  --on-dark:        #ffffff;
  --on-dark-muted:  rgba(255, 255, 255, 0.88);
  --on-dark-faint:  rgba(255, 255, 255, 0.55);
  --on-dark-rule:   rgba(255, 255, 255, 0.28);

  /* Sampled against the brightest pixels of the actual hero frame. At 0.42
     the sibling links measured 2.0 : 1; here they measure 5.76 : 1, buttons
     7.24, wordmark 8.6. It holds most of its strength to a third of its depth
     before falling away, because the bar's contents are centred rather than
     sitting at its top — a scrim that releases immediately is darkest where
     there is nothing to read. */
  --scrim-top: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.68) 0%,
    rgba(0, 0, 0, 0.62) 42%,
    rgba(0, 0, 0, 0.2) 72%,
    rgba(0, 0, 0, 0) 100%
  );

  /* --- Type ------------------------------------------------------------- */

  --font-display: 'Playfair Display', 'Times New Roman', Times, serif;
  --font-nav: 'Gilda Display', 'Times New Roman', Times, serif;
  --font-chrome: 'Clash Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Cabinet Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --text-display-xl: clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem);
  --text-display-lg: clamp(2rem, 1.4rem + 1.9vw, 3rem);
  --text-nav:        1.625rem;  /* 26px — top-level nav      · ref 25px */
  --text-nav-sub:    1.25rem;   /* 20px — submenu links      · ref 22px */
  --text-nav-sm:     1.25rem;   /* 20px — top-level, drill-down          */
  --text-nav-sub-sm: 1.0625rem; /* 17px — submenu, drill-down            */

  --text-body:      1.0625rem;
  --text-ui:        0.9375rem;
  --text-eyebrow:   0.75rem;
  --text-micro:     0.6875rem;

  --track-wordmark: 0.34em;
  --track-eyebrow:  0.2em;
  --track-ui:       0.14em;
  --track-micro:    0.16em;
  --track-display:  0;

  /* --- Space ------------------------------------------------------------ */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;   /*  40px · ref column gap  */
  --space-8:  3.5rem;
  --space-9:  5rem;     /*  80px · ref page gutter */
  --space-10: 7.5rem;
  --space-11: 12.5rem;  /* 200px · ref menu top padding */

  --gutter: var(--space-9);
  --gutter-sm: var(--space-5);  /* 24px — 80px on a 375px screen leaves 215px */
  --measure: 34rem;

  /* --- The header — held at the reference's measured geometry ------------ */

  --bar-height:      8rem;      /* 128px · ref */
  --bar-height-sm:   4.75rem;   /*  76px — below 1280px */
  --menu-pad-top:    var(--space-11);  /* 200px · ref */
  --menu-pad-bottom: 5.625rem;         /*  90px · ref */
  --menu-col-main:   21.875rem; /* 350px · ref */
  --menu-col-sub:    21.875rem; /* 350px · ref */
  --menu-gap:        var(--space-7);   /* 40px · ref */
  --menu-preview-w:  28.3125rem;/* 453px · ref */
  --menu-preview-h:  26.125rem; /* 418px · ref */

  /* --- Motion -----------------------------------------------------------
     Two curves. --ease is the reference's own considered curve, right for
     things that travel. --ease-out never accelerates, right for things that
     appear where they already are.                                      */

  --ease:     cubic-bezier(0.77, 0, 0.175, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --dur-fast: 200ms;
  --dur-base: 420ms;
  --dur-slow: 700ms;
  --stagger:  45ms;

  --z-bar: 100;

  --focus-ring: 2px solid var(--ink-strong);
  --focus-ring-on-dark: 2px solid var(--on-dark);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --stagger: 0ms;
  }
}

/* ===========================================================================
   PRIMITIVES
   =========================================================================== */

.sterling-header *,
.sterling-header *::before,
.sterling-header *::after {
  box-sizing: border-box;
}

.sterling-header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sterling-header li {
  margin: 0;
}

.sterling-header a {
  color: inherit;
  text-decoration: none;
}

/* The hover and focus states are spelled out because Elementor's reset.css
   ships `[type="button"]:hover { background: #cc3366 }` as a placeholder, and
   its attribute-plus-pseudo selector outweighs a plain `.sterling-header
   button`. Without these, every trigger and the hamburger flash crimson. */
.sterling-header button,
.sterling-header button:hover,
.sterling-header button:focus,
.sterling-header button:focus-visible,
.sterling-header button:active {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.sterling-header svg {
  display: block;
}

.sterling-header :focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.sterling-header:not(.is-open):not(.is-scrolled) :focus-visible {
  outline: var(--focus-ring-on-dark);
}

/* Small letterspaced uppercase label. Gilda has no small caps, so this role
   is carried by Clash Grotesk. */
.sterling-header .eyebrow {
  font-family: var(--font-chrome);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink-muted);
  margin: 0;
}

/* Outlined rectangle. The reference uses two matched outlines rather than one
   filled block, and it is right: over a moving video a solid fill reads as an
   advertisement.

   The fill and the hovered text colour are two tokens rather than
   currentColor. They have to be: a pseudo-element painted with currentColor
   follows its parent as that colour transitions, so the fill wiped up on hover
   also turned into the hover text colour on the way — white on white, an
   invisible button. */
.sterling-header .button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--space-5);
  border: 1px solid currentColor;
  border-radius: 0;
  font-family: var(--font-chrome);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  transition: color var(--dur-base) var(--ease-out);
}

.sterling-header .button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--button-fill, var(--ink-strong));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-base) var(--ease-out);
}

.sterling-header .button:hover::before,
.sterling-header .button:focus-visible::before {
  transform: scaleY(1);
}

.sterling-header .button:hover,
.sterling-header .button:focus-visible {
  color: var(--button-ink, var(--surface));
}

.sterling-header .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sterling-header .skip-link {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: calc(var(--z-bar) + 10);
  padding: var(--space-3) var(--space-5);
  background: var(--surface);
  color: var(--ink-strong);
  font-family: var(--font-chrome);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.sterling-header .skip-link:focus-visible {
  transform: translateY(0);
}

/* Locks the page behind the open sheet without the layout shifting as the
   scrollbar disappears. */
body.sterling-menu-open {
  overflow: hidden;
  padding-right: var(--sterling-scrollbar, 0px);
}

/* ===========================================================================
   THE WORDMARK

   Live text rather than an outlined SVG, so the lockup can be typed, tracked
   and spaced by the design system instead of frozen into a path at one size.
   =========================================================================== */

.wordmark {
  display: grid;
  justify-items: center;
  gap: 0.2em;
  line-height: 1;
  color: currentColor;
  font-size: clamp(1.375rem, 1.05rem + 1.1vw, 1.75rem);
}

.wordmark__article,
.wordmark__place {
  font-family: var(--font-chrome);
  /* Proportional to the name, but floored: below about 9px these stop being
     read and start being texture, and the floor is what stops that happening
     on its own as the lockup scales down on narrow viewports. */
  font-size: max(9px, 0.34em);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
}

.wordmark__name {
  font-family: var(--font-display);
  font-size: 1em;
  font-weight: 400;
  letter-spacing: var(--track-wordmark);
  text-transform: uppercase;
  white-space: nowrap;
  /* Tracking adds space after the last letter too; pull it back so the word
     sits optically centred rather than measurably centred. */
  text-indent: var(--track-wordmark);
}

/* A rule broken by a small diamond. The device is borrowed from the Phoenix
   build: a hairline that steps aside for one mark rather than running through.
   It is the only ornament on the page and it earns its place by separating the
   name from the place. */
.wordmark__rule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5em;
  width: 72%;
  margin-block: 0.06em 0.12em;
}

.wordmark__rule::before,
.wordmark__rule::after {
  content: '';
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.wordmark__diamond {
  width: 0.28em;
  height: 0.28em;
  background: currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}

/* ===========================================================================
   THE BAR
   =========================================================================== */

.sterling-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-bar);
  color: var(--on-dark);
  /* Over the hero the buttons are white outlines, so they fill white and
     their text goes to ink. Both tokens flip together below. */
  --button-fill: var(--on-dark);
  --button-ink: var(--ink-strong);
}

/* The admin bar is 32px of chrome the design never accounted for. Push the
   whole header below it rather than letting it overlap the wordmark. */
body.admin-bar .sterling-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .sterling-header { top: 46px; }
}

/* Without a scrim the white bar is unreadable against a bright video frame.
   Depth and strength are the ones the contrast was sampled at. */
.sterling-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--bar-height) * 1.95);  /* 250px */
  background: var(--scrim-top);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

.bar {
  position: relative;
  /* Above the sheet, so the close button, wordmark and CTAs stay reachable
     while the menu is open. */
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* Everything in the bar sits on one optical centre line. Aligning to the top
     made the three groups start together and end at three different heights,
     because the wordmark is four lines tall and the rest is one. */
  align-items: center;
  gap: var(--space-5);
  height: var(--bar-height);
  padding: 0 var(--gutter);
}

.bar__left {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.bar__divider {
  width: 1px;
  height: 1.25rem;
  background: var(--on-dark-rule);
  transition: background-color var(--dur-base) var(--ease-out);
}

.siblings ul {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.siblings__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-chrome);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--on-dark-muted);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.siblings__label {
  position: relative;
}

.siblings__label::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -0.35em;
  height: 1px;
  background: currentColor;
  transition: right var(--dur-base) var(--ease-out);
}

.siblings__link:hover .siblings__label::after,
.siblings__link:focus-visible .siblings__label::after {
  right: 0;
}

.siblings__arrow {
  width: 0.6em;
  height: 0.6em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
  /* Travels along its own diagonal on hover — the direction it points. */
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.siblings__link:hover,
.siblings__link:focus-visible {
  color: var(--on-dark);
}

.siblings__link:hover .siblings__arrow,
.siblings__link:focus-visible .siblings__arrow {
  transform: translate(2px, -2px);
  opacity: 1;
}

.bar__logo {
  display: block;
  color: currentColor;
}

.bar__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
}

/* ===========================================================================
   THE HAMBURGER

   Three bars that collapse into a small cross: the outer two converge on the
   centre, rotate and shorten; the middle one is wiped out sideways. Swapping
   one icon for another would be a cut; this is a move.
   =========================================================================== */

.toggle {
  position: relative;
  display: block;
  width: 2.8125rem;  /* 45px · ref */
  height: 1.5rem;    /* 24px · ref */
  color: currentColor;
}

.toggle__bar {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
  transition:
    transform var(--dur-base) var(--ease),
    width var(--dur-base) var(--ease),
    opacity var(--dur-fast) var(--ease-out);
}

.toggle__bar:nth-child(2) { transform: translateY(-10px); }
.toggle__bar:nth-child(3) { transform: translateY(-50%); }
.toggle__bar:nth-child(4) { transform: translateY(9px); }

/* Closed, on hover: the middle bar draws back. One small, quiet tell that the
   control is live. */
.toggle:hover .toggle__bar:nth-child(3) {
  width: 55%;
}

.sterling-header.is-open .toggle__bar:nth-child(2) {
  width: 1.25rem;
  transform: translateY(-50%) rotate(45deg);
}

.sterling-header.is-open .toggle__bar:nth-child(3) {
  width: 0;
  opacity: 0;
}

.sterling-header.is-open .toggle__bar:nth-child(4) {
  width: 1.25rem;
  transform: translateY(-50%) rotate(-45deg);
}

/* ===========================================================================
   BAR STATES
   =========================================================================== */

.sterling-header.is-open,
.sterling-header.is-scrolled:not(.is-open) {
  color: var(--ink-strong);
  --button-fill: var(--ink-strong);
  --button-ink: var(--surface);
}

.sterling-header.is-open::before,
.sterling-header.is-scrolled:not(.is-open)::before {
  opacity: 0;
}

.sterling-header.is-open .bar__divider,
.sterling-header.is-scrolled:not(.is-open) .bar__divider {
  background: var(--rule-strong);
}

.sterling-header.is-open .siblings__link,
.sterling-header.is-scrolled:not(.is-open) .siblings__link {
  color: var(--ink-muted);
}

.sterling-header.is-open .siblings__link:hover,
.sterling-header.is-open .siblings__link:focus-visible,
.sterling-header.is-scrolled:not(.is-open) .siblings__link:hover,
.sterling-header.is-scrolled:not(.is-open) .siblings__link:focus-visible {
  color: var(--ink-strong);
}

.sterling-header.is-scrolled:not(.is-open) {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

/* ===========================================================================
   THE SHEET

   Content height, not viewport height — the hero stays visible below it,
   which is what makes the menu feel light rather than like a takeover.

   It opens on clip-path, drawn down from the top edge. clip-path is composited
   and it clips hit-testing too, so the closed sheet cannot be clicked through;
   `inert` keeps it out of the tab order and the accessibility tree.
   =========================================================================== */

.menu {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1;
  padding: var(--menu-pad-top) var(--gutter) var(--menu-pad-bottom);
  background: var(--surface);
  color: var(--ink);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-slow) var(--ease);
}

body.admin-bar .menu { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .menu { top: 46px; }
}

.sterling-header.is-open .menu {
  clip-path: inset(0 0 0 0);
}

.menu__cols {
  display: grid;
  grid-template-columns:
    var(--menu-col-main)
    minmax(0, 1fr)
    var(--menu-preview-w);
  column-gap: var(--menu-gap);
  align-items: start;
}

/* --- Column 1 — top level ------------------------------------------------- */

/* The positioning context every submenu resolves against, so `top: 0` on a
   panel means the top of the column rather than the top of its own item —
   the same trick the reference uses. min-height holds the divider up when the
   list is shorter than the preview. */
.menu__list {
  position: relative;
  min-height: var(--menu-preview-h);
}

/* The rule between the columns, centred in the 40px gap. It draws down with
   the sheet rather than fading, so the columns feel built rather than
   revealed. */
.menu__list::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% + var(--menu-gap));
  width: 1px;
  background: var(--rule);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-slow) var(--ease) 120ms;
}

.sterling-header.is-open .menu__list::after {
  transform: scaleY(1);
}

.menu__item {
  position: static;
  /* Rows arrive on a stagger, once the sheet is most of the way open. */
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.sterling-header.is-open .menu__item {
  opacity: 1;
  transform: none;
  transition-delay: calc(220ms + var(--i, 0) * var(--stagger));
}

.menu__item + .menu__item {
  margin-top: 2rem;  /* 32px — re-proportioned for four items */
}

.menu__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  color: var(--ink-strong);
  text-align: left;
}

.menu__label {
  position: relative;
  font-family: var(--font-nav);
  font-size: var(--text-nav);
  line-height: 1.05;
  letter-spacing: var(--track-display);
}

/* Underline drawn rather than text-decoration, so it can grow. */
.menu__label::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -0.18em;
  height: 1px;
  background: currentColor;
  transition: right var(--dur-base) var(--ease-out);
}

.menu__trigger:hover .menu__label::after,
.menu__trigger:focus-visible .menu__label::after,
.menu__trigger[aria-expanded='true'] .menu__label::after {
  right: 0;
}

.menu__chevron {
  flex: none;
  width: 0.375rem;
  height: 0.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.45;
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.menu__trigger:hover .menu__chevron,
.menu__trigger[aria-expanded='true'] .menu__chevron {
  transform: translateX(5px);
  opacity: 1;
}

/* --- Column 2 — submenus --------------------------------------------------
   Lifted out of the first column and dropped into the second. The offset is
   two gaps — 350 + 40 + 40 — which puts the submenu text 80px clear of the
   first column, the reference's measurement.

   Panels stack in one place, so a symmetric cross-fade would show two sets of
   words through each other. The outgoing panel leaves at once; only the
   incoming one animates, and its links arrive on their own small stagger. */

.menu__panel {
  position: absolute;
  top: 0;
  left: calc(100% + var(--menu-gap) + var(--space-7));
  width: var(--menu-col-sub);
  opacity: 0;
  visibility: hidden;
}

.menu__panel.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-out);
}

.menu__panel-title {
  margin-bottom: 1.5rem;
  color: var(--ink-muted);
}

/* Narrow-layout furniture. Present in the markup at every width so the
   drill-down needs no second copy of the navigation, hidden here. */
.menu__back,
.menu__foot {
  display: none;
}

.menu__panel li {
  opacity: 0;
  transform: translateY(8px);
}

.menu__panel.is-active li {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

.menu__panel li + li {
  margin-top: 0.875rem;  /* 14px · ref */
}

.menu__sublink {
  position: relative;
  display: inline-block;
  font-family: var(--font-nav);
  font-size: var(--text-nav-sub);
  line-height: 1.25;
  color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.menu__sublink::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -0.12em;
  height: 1px;
  background: currentColor;
  transition: right var(--dur-base) var(--ease-out);
}

.menu__sublink:hover,
.menu__sublink:focus-visible {
  color: var(--ink-strong);
}

.menu__sublink:hover::after,
.menu__sublink:focus-visible::after {
  right: 0;
}

/* --- Column 3 — preview --------------------------------------------------- */

.menu__preview {
  /* Third column explicitly: the submenus are absolutely positioned out of the
     first column, so the grid only has two children to place and the preview
     would otherwise fall into the submenus' space. */
  grid-column: 3;
  position: relative;
  width: var(--menu-preview-w);
  height: var(--menu-preview-h);
  overflow: hidden;
}

/* A slow, small scale-down as it fades in — the image settles rather than
   appears. Cheap: transform and opacity only. */
.menu__preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.menu__preview-img.is-active {
  opacity: 1;
  transform: scale(1);
}

/* ===========================================================================
   BELOW 1280px — THE DRILL-DOWN

   Same markup, different machine. The three-column sheet becomes a full-height
   drawer holding two layers: the top level, and whichever section has been
   opened sliding in over it from the right.

   The layer underneath does not move. A drill-down usually draws the parent
   back as the child arrives, and that is the nicer gesture, but the panels
   live inside their own <li> so that Tab order equals reading order on
   desktop — and a transform on an ancestor moves its descendants with it and
   captures position:fixed besides. Rather than counter-transform the panel
   against its parent, which works but is the kind of cleverness that breaks
   the next time someone touches it, the incoming panel carries the gesture.

   The image preview is dropped. A 453px well cannot survive a 375px viewport.
   =========================================================================== */

@media (max-width: 1279px) {
  .bar {
    height: var(--bar-height-sm);
    padding: 0 var(--gutter-sm);
  }

  .sterling-header::before {
    height: calc(var(--bar-height-sm) * 1.95);
  }

  .siblings,
  .bar__divider {
    display: none;
  }

  /* 100dvh, not 100vh: on mobile browsers the dynamic unit is the one that
     matches what is actually on screen, or the foot of the drawer ends up
     under the address bar. */
  .menu {
    top: 0;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
  }

  body.admin-bar .menu {
    top: 32px;
    height: calc(100dvh - 32px);
  }

  .menu__cols {
    display: block;
    position: absolute;
    inset: var(--bar-height-sm) 0 0;
  }

  .menu__preview {
    display: none;
  }

  .menu__list {
    position: absolute;
    inset: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .menu__list::after {
    display: none;
  }

  /* Full-bleed rows separated by hairlines, every target well clear of the
     44px minimum. */
  .menu__item,
  .menu__item + .menu__item {
    margin: 0;
    opacity: 1;
    transform: none;
    transition: none;
    border-bottom: 1px solid var(--rule);
  }

  /* Prefixed to outrank the `.sterling-header button` reset above, which is
     one class plus one type and would otherwise flatten this padding to zero
     on the two triggers that are buttons — leaving them hard against the left
     edge while the anchor rows stayed indented. */
  .sterling-header .menu__trigger {
    padding: var(--space-5) var(--gutter-sm);
    min-height: 3.75rem;
  }

  .menu__label {
    font-size: var(--text-nav-sm);
  }

  /* An underline that grows on hover is a pointer affordance, and there is no
     pointer here. */
  .menu__label::after {
    display: none;
  }

  .menu__chevron {
    width: 0.5rem;
    height: 1rem;
    opacity: 0.55;
  }

  .menu__trigger[aria-expanded='true'] .menu__chevron {
    transform: none;
  }

  /* Fixed rather than absolute, so it is immune to however far the list behind
     it has been scrolled. Nothing between it and the viewport carries a
     transform, so fixed resolves where it should; the menu's clip-path still
     hides it while the drawer is shut. */
  .menu__panel {
    position: fixed;
    inset: var(--bar-height-sm) 0 0;
    /* A panel lives inside the first <li> with children, so every list item
       after it paints later and would show straight through the panel covering
       them. Lifting it out of the flow is not enough — it has to be lifted out
       of the paint order too. */
    z-index: 5;
    left: 0;
    width: 100%;
    padding: 0;
    background: var(--surface);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 1;
    visibility: hidden;
    transform: translateX(100%);
    transition:
      transform var(--dur-base) var(--ease),
      visibility 0s linear var(--dur-base);
  }

  body.admin-bar .menu__panel { top: calc(var(--bar-height-sm) + 32px); }

  .menu__panel.is-active {
    visibility: visible;
    transform: translateX(0);
    transition:
      transform var(--dur-base) var(--ease),
      visibility 0s;
  }

  .menu__panel-title {
    display: none;
  }

  /* The way back, pinned to the top of the panel so it stays reachable however
     far the section has been scrolled. */
  .sterling-header .menu__back {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 3.25rem;
    padding: var(--space-4) var(--gutter-sm);
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    color: var(--ink-muted);
    text-align: left;
  }

  .menu__back-chevron {
    flex: none;
    width: 0.375rem;
    height: 0.75rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .menu__back:hover .menu__back-chevron,
  .menu__back:focus-visible .menu__back-chevron {
    transform: translateX(-3px);
  }

  .menu__panel li,
  .menu__panel li + li {
    margin: 0;
    opacity: 1;
    transform: none;
    transition: none;
    border-bottom: 1px solid var(--rule);
  }

  .menu__sublink {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    padding: var(--space-4) var(--gutter-sm);
    font-size: var(--text-nav-sub-sm);
    color: var(--ink);
  }

  .menu__sublink::after {
    display: none;
  }

  .menu__foot {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-7) var(--gutter-sm) var(--space-9);
    border-bottom: 0;
  }

  .menu__foot-actions {
    display: grid;
    gap: var(--space-3);
  }

  .menu__foot-actions .button {
    width: 100%;
    min-height: 3.25rem;
  }

  .menu__foot-siblings {
    display: grid;
    justify-items: start;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
  }

  .menu__foot-siblings .siblings__link {
    color: var(--ink-muted);
  }

  .menu__foot-siblings .siblings__link:hover,
  .menu__foot-siblings .siblings__link:focus-visible {
    color: var(--ink-strong);
  }
}

/* --- Wider than a phone, narrower than the desktop layout ------------------
   Full-bleed buttons are right on a 390px screen and wrong on a 768px one,
   where a single control 720px wide stops reading as a button. */

@media (min-width: 600px) and (max-width: 1279px) {
  .menu__foot {
    max-width: 34rem;
  }

  .menu__foot-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu__foot-siblings {
    grid-auto-flow: column;
    justify-content: start;
    gap: var(--space-7);
  }
}

/* --- Tablet: up to 1023 ----------------------------------------------------
   Both CTAs still clear the wordmark at 1024 and up. Below that only the
   primary one does without crowding the mark, so the secondary drops to the
   drawer and "Schedule a Tour" — the action a venue converts on — keeps the
   bar. */

@media (max-width: 1023px) {
  .bar__actions .button:first-child {
    display: none;
  }
}

/* --- Mobile: below 768 -----------------------------------------------------
   Hamburger left, wordmark centred, nothing else. */

@media (max-width: 767px) {
  .bar__actions {
    display: none;
  }
}