/* Versioned shared header, modal navigation, and footer chrome. */

.brand-chrome-enabled {
  --brand-header-scrolled-height: clamp(4.5rem, 7vw, 5.25rem);
  --brand-header-initial-height: clamp(6.5rem, 10vw, 8.75rem);
  min-width: 0;
  overflow-x: clip;
  color: var(--text-primary);
  /* The footer and the adjoining sage section share this backing paint. At
     fractional device pixels their clipped edges must not expose ivory. */
  background: var(--color-sage);
  font-family: var(--font-interface);
}

.brand-chrome-enabled.brand-intro-open,
.brand-chrome-enabled.brand-menu-open {
  overflow: hidden;
}

.brand-chrome-enabled a:focus-visible,
.brand-chrome-enabled button:focus-visible {
  outline: 0.1875rem solid var(--color-cream);
  outline-offset: 0.25rem;
}

/* The entry cover and skip link move reading focus to this region. Chrome's
   default outline would paint blue seams along the page edges. Controls keep
   their own visible keyboard focus indicators. */
.brand-chrome-enabled #main-content:focus { outline: 0; }

.brand-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand-skip-link {
  position: fixed;
  z-index: var(--layer-focus);
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-subtle);
  color: var(--text-primary);
  background: var(--color-cream);
  font-weight: 700;
  transform: translateY(calc(-100% - var(--space-7)));
  transition: transform 160ms ease;
}

.brand-skip-link:focus {
  transform: translateY(0);
}

.brand-header {
  --brand-header-height: var(--brand-header-initial-height);
  position: fixed;
  z-index: var(--layer-header);
  inset: 0 0 auto;
  height: var(--brand-header-height);
  color: var(--text-on-dark);
  background: transparent;
}

.brand-header__shade {
  position: absolute;
  z-index: var(--layer-decoration);
  inset: 0;
  pointer-events: none;
}

.brand-header__shade::before { content: none; }

.brand-header__shade::after {
  position: absolute;
  inset: 0;
  content: "";
  background: rgb(64 65 21 / 60%);
  opacity: 0;
  /* Height and logo change together. A fading shade would briefly expand
     into the taller initial header on a fast return to the top. */
  transition: none;
}

.brand-header.is-scrolled {
  --brand-header-height: var(--brand-header-scrolled-height);
  background: transparent;
}

.brand-header.is-scrolled .brand-header__shade::after {
  opacity: 1;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.brand-header__home {
  position: absolute;
  z-index: var(--layer-content);
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(11rem, 31vw, 24rem);
  height: calc(100% - var(--space-4));
  transform: translate(-50%, -50%);
}

.brand-header__logo-frame {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* The Home target changes size between states. Swap artwork together with
     that target to avoid a fading large lockup in the smaller wordmark box. */
  transition: none;
}

.brand-header__logo-frame--large {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition-delay: 0s;
}

.brand-header__logo-frame--compact {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92);
}

.brand-header.is-scrolled .brand-header__logo-frame--large {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92);
}

.brand-header.is-scrolled .brand-header__logo-frame--compact {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition-delay: 0s;
}

.brand-header__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-header__logo--compact {
  width: min(72%, 14rem);
}

/* Match the 77% / 15rem wordmark size without leaving a wide invisible Home
   target. Reserve both focus rings and the menu on either side of the center. */
.brand-header.is-scrolled .brand-header__home {
  --wordmark-side-clearance: calc(
    max(var(--space-4), env(safe-area-inset-left), env(safe-area-inset-right))
    + min(2.75rem, 44px) + 14px + 4px
  );
  width: min(
    calc(clamp(11rem, 31vw, 24rem) * 0.77),
    15rem,
    calc(100% - 2 * var(--wordmark-side-clearance))
  );
}

.brand-header.is-scrolled .brand-header__logo--compact {
  width: 100%;
  min-height: 0;
}

/* Keep the normal 3px/4px focus treatment at enlarged text sizes too: both
   rings fit the reserved 14px without squeezing the lettering unnecessarily. */
.brand-header.is-scrolled .brand-header__home:focus-visible,
.brand-header.is-scrolled .brand-menu-toggle:focus-visible {
  outline-width: 3px;
  outline-offset: 4px;
}

.brand-menu-toggle,
.brand-menu-close {
  position: absolute;
  z-index: var(--layer-content);
  display: grid;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  color: var(--text-on-dark);
  background: transparent;
  cursor: pointer;
}

.brand-menu-toggle {
  top: 50%;
  right: max(var(--space-7), env(safe-area-inset-right));
  align-content: center;
  gap: 0.34rem;
  transform: translateY(-50%);
}

.brand-menu-toggle__line {
  display: block;
  width: 1.75rem;
  height: 0.125rem;
  margin-inline: auto;
  border-radius: var(--radius-pill);
  background: currentcolor;
}

/* At enlarged text sizes, keep the centered wordmark clear of the menu.
   The target remains at least 44px wide at normal/enlarged text; its height,
   right inset, and all initial/menu-overlay controls retain their sizing. */
.brand-header.is-scrolled .brand-menu-toggle {
  min-width: 0;
  max-width: 44px;
}

.brand-header.is-scrolled .brand-menu-toggle__line {
  max-width: 28px;
}

.brand-menu-overlay {
  position: fixed;
  z-index: var(--layer-overlay);
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--text-on-dark);
  background: var(--surface-dark);
}

.brand-menu-overlay[hidden] {
  display: none;
}

.brand-menu-overlay__inner {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: clamp(1rem, 5vh, 3rem);
  box-sizing: border-box;
  min-height: 100%;
  min-height: 100dvh;
  padding: calc(max(1rem, env(safe-area-inset-top)) + 2.75rem + 1rem)
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
}

.brand-menu-close {
  top: max(var(--space-4), env(safe-area-inset-top));
  right: max(var(--space-4), env(safe-area-inset-right));
  place-items: center;
  font-size: 2.3rem;
  line-height: 1;
}

.brand-menu-overlay__home {
  justify-self: center;
  /* The 200×205 canvas is nearly filled by ink; width caps the height on phones. */
  width: min(100%, 70vh);
  height: 57vh;
}

.brand-menu-overlay__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-menu-nav {
  align-self: center;
  width: min(100%, 84rem);
  margin-inline: auto;
  padding-block: .5rem;
}

.brand-menu-nav__list,
.brand-footer__social {
  padding: 0;
  margin: 0;
  list-style: none;
}

.brand-menu-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem 1rem;
  text-align: center;
}

.brand-menu-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-1) var(--space-4);
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  overflow-wrap: anywhere;
  max-width: 100%;
  box-sizing: border-box;
  line-height: 1.05;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

.brand-menu-nav__link:hover,
.brand-menu-nav__link[aria-current="page"] {
  color: var(--text-warm-on-dark);
  text-decoration-line: underline;
}

.brand-noscript-nav {
  position: fixed;
  z-index: var(--layer-overlay);
  inset: var(--brand-header-height) 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3);
  color: var(--text-on-dark);
  background: var(--surface-deep);
}

.brand-noscript-nav {
  max-height: calc(100svh - var(--brand-header-height));
  box-sizing: border-box;
  overflow: auto;
}

@media (max-width: 40rem) {
  .brand-menu-overlay__inner { gap: .5rem; }
  .brand-menu-overlay__home { width: min(100%, 56svh); height: min(47svh, calc((100vw - 2rem) * 205 / 200)); }
  .brand-menu-nav__list { flex-direction: column; gap: .25rem; }
  .brand-menu-nav__link { font-size: 1.5rem; padding: .25rem .5rem; }
}

.brand-noscript-nav a {
  min-height: 2.75rem;
  padding: var(--space-2);
}

.brand-site-main {
  min-height: 55vh;
  padding-top: calc(clamp(6.5rem, 10vw, 8.75rem) + var(--space-5));
  background: var(--surface-page);
}

.brand-site-main--full-bleed {
  padding-top: 0;
  padding-bottom: 0;
}

.brand-content-rail {
  width: min(
    calc(100% - var(--brand-content-gutter) - var(--brand-content-gutter)),
    var(--brand-content-max)
  );
  margin-inline: auto;
}

.brand-footer {
  /* Owner-tunable footer ornament adjustments; 0px preserves the approved baseline */
  --brand-footer-ornament-pair-overlap-adjustment: .625rem;
  --brand-footer-ornament-between-pairs-adjustment: .3125rem;
  --brand-footer-ornament-toward-content-adjustment: 4.375rem;
  /* The six-cell strip spans the viewport even after content reaches its
     desktop cap. Its artwork must continue filling those cells. */
  --brand-footer-ornament-size: max(2.25rem, 5vw);
  position: relative;
  z-index: var(--layer-content);
  isolation: isolate;
  margin-top: var(--space-8);
  border-top: 0;
  /* Cover the join's fractional device pixel with the same opaque paint;
     this adds no layout height and does not move either section's content. */
  box-shadow: 0 -1px 0 var(--color-sage);
  overflow: hidden;
  color: var(--color-coffee);
  background: var(--color-sage);
}

.brand-ornament-strip {
  position: relative;
  z-index: var(--layer-decoration);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  width: 100%;
  min-height: clamp(2.75rem, 5vw, 4.5rem);
  padding: var(--space-1) max(var(--space-2), 2vw);
  overflow: hidden;
  pointer-events: none;
  background: transparent;
  transform-origin: center;
}

.brand-ornament-strip--top {
  margin-bottom: calc(
    0px - var(--brand-footer-ornament-toward-content-adjustment)
  );
}

.brand-ornament-strip--bottom {
  margin-top: calc(
    0px - var(--brand-footer-ornament-toward-content-adjustment)
  );
  transform: rotate(180deg);
}

.brand-ornament-strip__item {
  --brand-footer-ornament-pair-offset: 0px;
  --brand-footer-ornament-group-offset: 0px;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  inset-inline-start: calc(
    var(--brand-footer-ornament-group-offset) -
      var(--brand-footer-ornament-pair-offset)
  );
  transform-origin: center;
}

.brand-ornament-strip__item--pair-second {
  --brand-footer-ornament-pair-offset:
    var(--brand-footer-ornament-pair-overlap-adjustment);
}

.brand-ornament-strip__item--outer-start {
  --brand-footer-ornament-group-offset: calc(
    0px - var(--brand-footer-ornament-between-pairs-adjustment)
  );
}

.brand-ornament-strip__item--outer-end {
  --brand-footer-ornament-group-offset:
    var(--brand-footer-ornament-between-pairs-adjustment);
}

.brand-ornament-strip__item--mirrored {
  transform: scaleX(-1);
}

.brand-ornament-strip__orientation {
  display: grid;
  place-items: center;
  width: min(100%, var(--brand-footer-ornament-size));
  transform: rotate(90deg);
  transform-origin: center;
}

.brand-ornament-strip__image {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.92;
}

.brand-footer__inner {
  position: relative;
  z-index: var(--layer-content);
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding-block: var(--space-3);
  color: var(--color-coffee);
  background: transparent;
  text-align: center;
}

/* Optional route-specific photographs; the existing center column is unchanged. */
.brand-footer--has-photos .brand-footer__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem) minmax(0, 1fr);
  column-gap: clamp(1rem, 3vw, 3rem);
}
.brand-footer--has-photos .brand-footer__inner > :not(.brand-footer__photos) {
  grid-column: 2;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.brand-footer__photos { display: contents; }
.brand-footer__photo {
  align-self: center;
  width: min(100%, 20rem);
  aspect-ratio: 3 / 2;
  border: 2px solid #fff;
  box-sizing: border-box;
  min-width: 0;
  grid-row: 1;
}
.brand-footer__photo--left { grid-column: 1; }
.brand-footer__photo--right { grid-column: 3; }
.brand-footer__photo picture, .brand-footer__photo img { display: block; width: 100%; height: 100%; }
.brand-footer__photo img { object-fit: cover; }
.brand-footer__photo[hidden], .brand-footer__photos[hidden] { display: none; }
@media (max-width: 48rem) {
  .brand-footer--has-photos .brand-footer__inner { grid-template-columns: minmax(0, 1fr); }
  .brand-footer--has-photos .brand-footer__inner > :not(.brand-footer__photos) { grid-column: 1; }
  .brand-footer__photos { display: flex; justify-content: center; gap: 1rem; width: 100%; }
  .brand-footer__photo { width: calc((100% - 1rem) / 2); flex: none; }
}

.brand-footer__social {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}

.brand-footer__social a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  justify-content: center;
  color: var(--color-coffee);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

.brand-footer__social a:hover {
  color: var(--color-forest);
  text-decoration-line: underline;
}

.brand-footer__logo-link {
  display: grid;
  place-items: center;
  width: clamp(9rem, 27vw, 16rem);
  height: auto;
  line-height: 0;
}

.brand-footer__logo {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.brand-footer__inner p,
.brand-footer__inner address,
.brand-footer__inner ul {
  margin: 0;
}

.brand-footer__inner ul {
  padding: 0;
}

.brand-footer__copyright {
  max-width: 42rem;
  margin: 0;
}

.brand-footer__copyright {
  color: var(--color-coffee);
  font-size: 0.9rem;
}

@media (max-width: 37.5rem) {
  .brand-footer {
    --brand-footer-ornament-toward-content-adjustment: 20px;
    --brand-footer-ornament-size: clamp(1.25rem, 5vw, 1.75rem);
  }

  .brand-ornament-strip {
    min-height: calc(var(--brand-footer-ornament-size) + var(--space-1));
  }
}

@media (min-width: 48rem) {
  .brand-menu-nav__list {
    gap: var(--space-3);
  }

  .brand-footer__inner {
    gap: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-skip-link,
  .brand-header,
  .brand-header__shade,
  .brand-header__shade::after,
  .brand-header__logo-frame {
    scroll-behavior: auto;
    transition-duration: 0.001ms;
  }
}

/* Phone controls share one vertical center. Reserve both focus rings and a
   44px menu target symmetrically, keeping the Home artwork viewport-centered. */
@media (max-width: 48rem) {
  .brand-chrome-enabled {
    --brand-header-initial-height: calc(100px + env(safe-area-inset-top));
    --brand-header-scrolled-height: calc(72px + env(safe-area-inset-top));
  }
  .brand-header {
    width: 100vw;
    --phone-header-side-clearance: calc(max(12px, env(safe-area-inset-left), env(safe-area-inset-right)) + 44px + 20px);
  }
  .brand-header .brand-header__home {
    top: calc(50% + env(safe-area-inset-top) / 2);
    width: min(18rem, calc(100% - 2 * var(--phone-header-side-clearance)));
    height: 84px;
    transform: translate(-50%, -50%);
  }
  .brand-header.is-scrolled .brand-header__home {
    width: min(15rem, calc(100% - 2 * var(--phone-header-side-clearance)));
    height: 44px;
  }
  .brand-header .brand-menu-toggle {
    top: calc(50% + env(safe-area-inset-top) / 2);
    right: max(12px, env(safe-area-inset-right));
    transform: translateY(-50%);
    width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  }
  .brand-header .brand-header__logo { min-width: 0; min-height: 0; }
  .brand-header .brand-menu-toggle__line { max-width: 28px; }
  .brand-header__home:focus-visible, .brand-menu-toggle:focus-visible { outline-width: 3px; outline-offset: 4px; }
}
/* Rotate inside an explicitly sized strip: the tall source canvas must not
   reserve its unrotated height. Phones keep their accepted composition. */
@media (min-width: 48.001rem) {
  .brand-footer { --brand-footer-ornament-toward-content-adjustment: 0px; }
  .brand-footer .brand-ornament-strip__item { height: var(--brand-footer-ornament-size); }
  .brand-footer .brand-ornament-strip__orientation {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

/* The accepted phone ink gap is about 27.3px, including canvas whitespace. */
@media (min-width: 48.001rem) {
  .brand-footer .brand-ornament-strip { padding-block: calc(var(--space-3) + 1.3125rem); }
}