/* One final header treatment across the public site. Page copy, typography,
   logo swapping, drawer behaviour and Enquire visibility remain page-owned. */
html[data-header-material="glass"] body > .site-header[aria-label] {
  --header-ink: #231a10;
  --header-logo-filter: none;
  --header-menu-shadow: none;
  --header-menu-filter: none;
  --header-edge: inset 0 -1px currentColor;
  --header-glass: rgba(245, 239, 227, .76);
  --header-solid: #f5efe3;
  --header-blur: blur(14px);
  --header-brand-height: 60px;
  width: 100vw;
  min-height: 70px;
  padding-block: 5px;
  padding-top: calc(5px + env(safe-area-inset-top, 0px));
  align-items: center;
  color: var(--header-ink);
  background: var(--header-glass);
  border: 0;
  box-shadow: none;
  backdrop-filter: var(--header-blur);
  -webkit-backdrop-filter: var(--header-blur);
  /* Never interpolate layout when the logo changes or text is enlarged. */
  transition: background-color 180ms ease, color 180ms ease;
}

/* Both marks start clear. The opening-image guard below protects hero copy
   without changing this row's height or the page-owned logo swap. */
html[data-header-material="glass"] body > .site-header.site-header--full-wordmark,
html[data-header-material="glass"] body > .site-header.site-header--over-hero {
  --header-glass: transparent;
  --header-solid: transparent;
  --header-blur: none;
  --header-edge: none;
}
html[data-header-material="glass"][data-header-opening="photo"] body > .site-header.site-header--full-wordmark,
html[data-header-material="glass"][data-header-opening="photo"] body > .site-header.site-header--over-hero {
  --header-ink: #fff;
  /* Clean original orange artwork: no glow or outline over the hero. */
  --header-logo-filter: none;
  --header-menu-shadow: 0 1px 3px rgba(35, 26, 16, .9);
  --header-menu-filter: drop-shadow(0 1px 2px rgba(35, 26, 16, .8));
}

/* Explicit fallback for the Blog's split-image hero: the mark straddles sky
   and foliage, so preserving its fine detail takes priority over orange there.
   The original orange returns automatically when the light frost appears. */
html[data-header-material="glass"][data-header-logo-contrast="white"] body > .site-header.site-header--full-wordmark,
html[data-header-material="glass"][data-header-logo-contrast="white"] body > .site-header.site-header--over-hero {
  --header-logo-filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(35, 26, 16, .8));
}

/* Reading protection wins over full-wordmark/over-hero, including split mobile
   heroes whose image ends long before their copy. Keep the same light material
   used after the hero; later photographs never clear it. Accessibility media
   queries below still choose the solid fallback and remove transitions. */
html[data-header-material="glass"] body > .site-header[aria-label][data-header-hero-surface="frosted"] {
  --header-glass: rgba(245, 239, 227, .76);
  --header-solid: #f5efe3;
  --header-blur: blur(14px);
  --header-edge: inset 0 -1px currentColor;
  --header-ink: #231a10;
  --header-logo-filter: none;
  --header-menu-shadow: none;
  --header-menu-filter: none;
}

/* Centre the artwork, not the PNG canvas. The full mark's visible centre is
   at 46.8% of image height; the sunmark's is at 43.9%. Source files are intact.
   The resized wordmark has a separate pixel-rounding correction below. */
html[data-header-material="glass"] body > .site-header[aria-label] .brand {
  height: var(--header-brand-height);
  min-height: var(--header-brand-height);
  min-width: 0;
  overflow: visible;
}
html[data-header-material="glass"] body > .site-header[aria-label] .brand .header-icon {
  top: 50%;
  left: 50%;
  width: 220px;
  height: auto;
  max-width: none;
  object-fit: contain;
  transform: translate(-49.9%, -43.9%);
  filter: var(--header-logo-filter);
  pointer-events: none;
  transition: opacity 180ms ease;
}
html[data-header-material="glass"] body > .site-header[aria-label] .brand .header-icon--full-name {
  /* The visible lockup is about 60px tall, leaving equal breathing room
     inside the 70px header. Compact sunmark dimensions stay unchanged. */
  width: 190px;
  transform: translate(-49.8%, -46.8%);
}
/* The resized PNG rounds its transparent margins slightly differently. */
html[data-header-material="glass"] body > .site-header[aria-label] .brand .header-icon--full-name[src*="Shared_Zuvani_Wordmark-640.png"] {
  transform: translate(-49.766%, -46.948%);
}
/* The material, not About's underlying reading pane, owns Menu contrast. */
html[data-header-material="glass"][data-header-opening] body > .site-header[aria-label] :is(.menu-toggle, .home-mobile-menu-toggle) {
  color: var(--header-ink);
  text-shadow: var(--header-menu-shadow);
}
html[data-header-material="glass"] body > .site-header[aria-label] :is(.menu-toggle, .home-mobile-menu-toggle) svg { filter: var(--header-menu-filter); }
/* Enquire is the one unfilled control on the site: a hairline pill that takes
   its ink from the header material, so it reads on the ivory glass and on the
   photographic openings alike. Carrying no fill at rest also keeps it distinct
   from every filled content button on the same page. */
html[data-header-material="glass"] body > .site-header[aria-label] .inquire-link {
  color: var(--header-ink);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--btn-radius, 999px);
  box-shadow: none;
}
/* This selector outranks the per-page .inquire-link:hover rules, so the hover
   has to live here. Without it Enquire would have no feedback at all. */
@media (hover: hover) and (pointer: fine) {
  html[data-header-material="glass"] body > .site-header[aria-label] .inquire-link:hover {
    color: var(--warm-ivory, #f3ede0);
    background: var(--bronze, #8c6240);
    border-color: var(--bronze, #8c6240);
  }
}
html[data-header-material="glass"] body > .site-header[aria-label] :is(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Independent hit areas. Keep the homepage's own desktop navigation layout. */
html[data-header-material="glass"] body > .site-header[aria-label]:not(.home-header-v3) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
  gap: 12px;
}
html[data-header-material="glass"] body > .site-header[aria-label]:not(.home-header-v3) .brand {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 112px;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}
html[data-header-material="glass"] body > .site-header[aria-label]:not(.home-header-v3) .menu-toggle {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
html[data-header-material="glass"] body > .site-header[aria-label]:not(.home-header-v3) .inquire-link {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  margin: 0;
  min-width: 0;
}
html[data-header-material="glass"] body > .site-header[aria-label].material-header-crowded {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}
html[data-header-material="glass"] body > .site-header[aria-label].material-header-crowded .brand {
  grid-column: 1 / -1;
  grid-row: 1;
}
html[data-header-material="glass"] body > .site-header[aria-label].material-header-crowded .menu-toggle {
  grid-column: 1;
  grid-row: 2;
  flex-direction: column;
  align-items: start;
  gap: 2px;
}
html[data-header-material="glass"] body > .site-header[aria-label].material-header-crowded .menu-toggle span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
html[data-header-material="glass"] body > .site-header[aria-label].material-header-crowded .inquire-link {
  grid-column: 2;
  grid-row: 2;
}
@media (max-width: 640px) {
  html[data-header-material="glass"] body > .site-header[aria-label] { padding-inline: 16px; }
  html[data-header-material="glass"] body > .site-header.home-header-v3 .brand .header-icon { width: 180px; }
}
/* The article's text-only opening otherwise starts at 104px on a small phone,
   underneath the 126px two-row navigation. Reserve its initial reading space
   only when the existing crowded-header fallback is actually in use. */
@media (max-width: 760px) {
  html[data-header-material="glass"] body > .site-header.material-header-crowded ~ main > .article-hero[data-header-logo-section] {
    padding-top: max(160px, clamp(104px, 27vw, 168px));
  }
}
@media (max-width: 360px) {
  html[data-header-material="glass"] body > .site-header.home-header-v3 .brand .header-icon { width: 160px; }
}

/* Quiet phone navigation. Smaller artwork and labels, not smaller hit areas.
   Keep the desktop/tablet treatment and all hero/material state rules above.
   The fit helper retains a second row only when enlarged text needs it. */
@media (max-width: 640px) {
  html[data-header-material="glass"][data-header-opening] body > .site-header[aria-label] {
    --header-brand-height: 48px;
    --header-mobile-brand-slot: 80px;
    --header-mobile-gap: 8px;
    --header-mobile-menu-gap: 7px;
    min-height: 60px;
    padding-block: 6px;
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    gap: var(--header-mobile-gap);
  }
  html[data-header-material="glass"][data-header-opening] body > .site-header[aria-label]:not(.material-header-crowded) {
    grid-template-columns: minmax(0, 1fr) var(--header-mobile-brand-slot) minmax(0, 1fr);
  }
  html[data-header-material="glass"][data-header-opening] body > .site-header[aria-label] .brand {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: var(--header-mobile-brand-slot);
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }
  html[data-header-material="glass"][data-header-opening] body > .site-header[aria-label] .brand .header-icon {
    width: 140px;
  }
  html[data-header-material="glass"][data-header-opening] body > .site-header[aria-label] :is(.menu-toggle, .inquire-link) {
    min-height: 44px;
    font-size: .75rem;
    line-height: 1;
    letter-spacing: .12em;
    align-self: center;
  }
  html[data-header-material="glass"][data-header-opening] body > .site-header[aria-label] .menu-toggle {
    grid-column: 1;
    grid-row: 1;
    min-width: 44px;
    flex-direction: row;
    align-items: center;
    gap: var(--header-mobile-menu-gap);
  }
  html[data-header-material="glass"][data-header-opening] body > .site-header[aria-label] .menu-toggle span { min-width: 0; }
  html[data-header-material="glass"][data-header-opening] body > .site-header[aria-label] .menu-toggle svg {
    width: 18px;
    height: 14px;
  }
  html[data-header-material="glass"][data-header-opening] body > .site-header[aria-label] .inquire-link {
    position: relative;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    min-height: 32px;
    padding: 0 5px;
    border: 1px solid currentColor;
    border-radius: var(--btn-radius, 999px);
    text-shadow: var(--header-menu-shadow);
  }
  /* Keep the outlined pill visually small, but make all 44px vertically
     tappable. No horizontal extension into the neighbouring logo target. */
  html[data-header-material="glass"][data-header-opening] body > .site-header[aria-label] .inquire-link::before {
    content: "";
    position: absolute;
    inset: -7px 0;
  }
  html[data-header-material="glass"][data-header-opening] body > .site-header[aria-label] .inquire-link::after {
    inline-size: max(14px, 1em);
    block-size: max(14px, 1em);
    margin-inline-end: 7px;
  }
  html[data-header-material="glass"][data-header-opening] body > .site-header[aria-label].material-header-crowded .brand { grid-column: 1 / -1; }
  html[data-header-material="glass"][data-header-opening] body > .site-header[aria-label].material-header-crowded .menu-toggle { grid-row: 2; }
  html[data-header-material="glass"][data-header-opening] body > .site-header[aria-label].material-header-crowded .inquire-link {
    grid-column: 2;
    grid-row: 2;
  }
}
/* End quiet phone navigation. */

/* Scroll edge (28 September 2026). The frost no longer stops at a hard
   line: a short strip beneath the bar carries the same tint and blur and
   fades both out, so content passing under the bar dissolves into the
   material instead of meeting a step. header-material.js inserts it as the
   bar's next sibling and keeps its top level with the bar's measured
   bottom, one layer beneath the bar (16px, 12px on phones; kept short and
   steep, since a taller fade reads as a smear and draws the eye): a sibling rather than a pseudo-element
   because a backdrop filter can only see what lies inside its own blurred
   ancestor's box, and the bar is one. It has no content and takes no
   pointer events. The adjacent-sibling rules below mirror the bar's states:
   clear over an opening photograph, frosted once reading copy reaches the
   bar, and gone wherever the bar itself goes solid. */
html[data-header-material="glass"] body > .site-header[aria-label] + .site-header-edge {
  position: fixed;
  top: 70px;
  right: 0;
  left: 0;
  z-index: 49;
  height: 16px;
  pointer-events: none;
  background: rgba(245, 239, 227, .76);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* Continuous with the bar at the top, then a quick, eased fall-off: a
     taller or straighter ramp reads as a second, smeared band. */
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .5) 30%, rgba(0, 0, 0, .15) 65%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .5) 30%, rgba(0, 0, 0, .15) 65%, transparent 100%);
  opacity: 1;
  transition: opacity 180ms ease;
}
html[data-header-material="glass"] body > .site-header:is(.site-header--full-wordmark, .site-header--over-hero):not([data-header-hero-surface="frosted"]) + .site-header-edge {
  opacity: 0;
}
@media (max-width: 640px) {
  html[data-header-material="glass"] body > .site-header[aria-label] + .site-header-edge { height: 12px; }
}
@media print {
  html[data-header-material="glass"] body > .site-header[aria-label] + .site-header-edge { display: none; }
}

/* Keep native colours and a readable opaque surface when the user asks for
   less transparency or more contrast, or when background blur is unavailable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-header-material="glass"] body > .site-header[aria-label] { background: var(--header-solid); }
  html[data-header-material="glass"] body > .site-header[aria-label] + .site-header-edge { display: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-header-material="glass"] body > .site-header[aria-label] {
    background: var(--header-solid);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
  }
  html[data-header-material="glass"] body > .site-header[aria-label] + .site-header-edge { display: none; }
}
@media (prefers-contrast: more) {
  html[data-header-material="glass"] body > .site-header[aria-label] { box-shadow: var(--header-edge); }
  /* Colour preference never overrides a visitor's explicit contrast need.
     Light/frosted headers keep the original orange; only photo heroes reverse. */
  html[data-header-material="glass"][data-header-opening="photo"] body > .site-header.site-header--full-wordmark:not([data-header-hero-surface="frosted"]),
  html[data-header-material="glass"][data-header-opening="photo"] body > .site-header.site-header--over-hero:not([data-header-hero-surface="frosted"]) {
    --header-logo-filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(35, 26, 16, .8));
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-header-material="glass"] body > .site-header[aria-label],
  html[data-header-material="glass"] body > .site-header[aria-label] + .site-header-edge,
  html[data-header-material="glass"] body > .site-header[aria-label] .brand .header-icon { transition: none; }
}