/* Fixed identity bar and one quiet, all-viewport navigation surface. */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-inline: var(--gutter);
  background: linear-gradient(to bottom, var(--hero-scrim-deep), transparent);
}

.site-header::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: var(--rule);
  background: var(--hairline);
  opacity: 0;
}

.site-header[data-scrolled='true'] {
  background: var(--navy-deep);
}

.site-header[data-scrolled='true']::after {
  opacity: 1;
}

.site-mark {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: var(--wt-display);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
}

.site-mark__logo {
  width: auto;
  height: 4.5rem;
  display: block;
}


.site-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  color: var(--cream);
}

.site-menu::backdrop {
  background: var(--modal-backdrop);
  opacity: 0;
  transition: opacity var(--dur-expand) var(--ease);
}

.site-menu__shell {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(92%, 27rem);   /* the panel ends where the list ends */
  height: 100%;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding-inline: var(--gutter);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-inline-start: var(--rule) solid var(--hairline-gold);
  background: var(--navy-deep);
  box-shadow: calc(var(--sp-8) * -1) 0 var(--sp-16) var(--modal-shadow);
  transform: translate3d(100%, 0, 0);
  transition: transform var(--dur-expand) var(--ease);
  will-change: transform;
}

.site-menu__header {
  position: sticky;
  top: 0;
  z-index: 1;
  /* the mark sits centred above the list rather than pinned to a corner */
  display: grid;
  justify-items: center;
  padding-block: var(--sp-4) var(--sp-3);
  align-items: center;
  justify-content: center;
  background: var(--navy-deep);
}


.site-menu__brand {
  color: var(--gold);
  /* The lockup is taller than the header row it used to sit in, which is why
     the monogram was cut off at the top. Give it its own breathing room. */
  align-self: center;
  padding-block: var(--sp-3) var(--sp-2);
}

.site-menu[data-state='open']::backdrop {
  opacity: 1;
}

.site-menu[data-state='open'] .site-menu__shell {
  transform: translate3d(0, 0, 0);
}

.site-menu[data-state='closing'] .site-menu__shell {
  transform: translate3d(100%, 0, 0);
}


.site-menu__primary,

.site-menu__primary a,




.site-menu a:hover,
.site-menu a[aria-current='page'] {
  color: var(--cream);
  border-bottom-color: var(--hairline-gold);
}

.nojs-nav {
  display: none;
}

html.no-js .nav-toggle,
html.no-js .site-menu {
  display: none;
}

html.no-js .nojs-nav {
  display: block;
  padding: calc(var(--header-h) + var(--sp-2)) var(--gutter) var(--sp-2);
  border-bottom: var(--rule) solid var(--hairline);
  background: var(--navy-deep);
}

.nojs-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
}

.nojs-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream-muted);
  text-decoration: none;
}

.site-footer {
  padding-block: var(--section-pad-tight);
  border-top: var(--rule) solid var(--hairline);
  background: var(--navy-deep);
}

.site-footer__legal {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.site-footer a,
.site-footer p {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--cream);
}

@media (max-width: 768px) {
  .site-menu__shell {
    width: 100%;
  }
}

/* ---------- Menu control: two rules that become a diagonal X ----------
   The closed state is two hairlines. The open state is the dialog's own
   close control, sitting in the same place, with the two rules crossed
   at 45 degrees so it reads as an X rather than a plus. */
.nav-toggle,
.site-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--sp-6);
  min-block-size: var(--sp-6);
  padding: 0;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--cream);
}

.site-menu__close {
  position: fixed;
  inset: 0 var(--gutter) auto auto;
  z-index: 2;
  min-block-size: var(--header-h);
}

.nav-toggle__bars,
.site-menu__close-bars {
  position: relative;
  display: block;
  width: 1.5rem;
  height: 0.75rem;
}
.nav-toggle__bars > span,
.site-menu__close-bars > span {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--rule);
  background: currentColor;
  transform-origin: center;
  transition:
    top var(--dur-expand) var(--ease),
    transform var(--dur-expand) var(--ease);
}
/* Closed: two rules, apart. */
.nav-toggle__bars > span:first-child { top: 0; }
.nav-toggle__bars > span:last-child  { bottom: 0; }

/* The dialog control begins as the same two rules in the same viewport
   position, then crosses while the drawer travels underneath it. */
.site-menu__close-bars > span:first-child {
  top: 0;
  transform: translateY(0) rotate(0);
}

.site-menu__close-bars > span:last-child {
  top: calc(100% - var(--rule));
  transform: translateY(0) rotate(0);
}

.site-menu[data-state='open'] .site-menu__close-bars > span:first-child {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.site-menu[data-state='open'] .site-menu__close-bars > span:last-child {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.nav-toggle:hover, .site-menu__close:hover { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .site-menu::backdrop,
  .site-menu__shell,
  .site-menu__close-bars > span {
    transition: none;
  }
}

/* ---------- Brand lockup ----------
   The supplied lockup is a landscape banner (586x276), sized by height
   so it keeps its own proportion. It replaces the monogram-plus-wordmark
   pairing in both the header and the menu. */
.site-menu__logo {
  height: clamp(2.6rem, 7vw, 4rem);
}
@media (max-width: 520px) {
  .site-mark__logo { height: 2.7rem; }   /* 25% smaller on a phone */
}

/* ============================================================
   MENU
   One centred column: Home, two groups that open in place,
   Gallery, Inquiry. The same on phone and desktop.
   ============================================================ */
.site-menu__nav {
  align-self: start;
  width: min(100%, 46rem);
  margin-inline: auto;
  padding-block: var(--sp-2) var(--sp-8);
}

.site-menu__list {
  display: grid;
  border-top: var(--rule) solid var(--hairline);
}
.site-menu__list > li { border-bottom: var(--rule) solid var(--hairline); }

.site-menu__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  min-block-size: var(--sp-8);
  padding: var(--sp-2) var(--sp-2);
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: var(--wt-display);
  font-size: calc(var(--fs-display-m) * 0.66);
  line-height: var(--lh-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  text-align: center;
  transition: color var(--dur-hover) var(--ease);
}
.site-menu__top:hover { color: var(--gold); }

.site-menu__caret {
  width: 0;
  height: 0;
  border-inline: 0.32em solid transparent;
  border-top: 0.36em solid currentColor;
  transition: transform var(--dur-hover) var(--ease);
}
.site-menu__disclosure[aria-expanded='true'] { color: var(--gold); }
.site-menu__disclosure[aria-expanded='true'] .site-menu__caret { transform: rotate(180deg); }

.site-menu__sub[hidden] { display: none; }
.site-menu__sub {
  display: grid;
  border-top: var(--rule) solid var(--hairline);
}

/* The group unrolls rather than appearing whole. Short, and only on the way
   open: a closing animation would hold the menu open after the tap. */
.site-menu__sub:not([hidden]) {
  overflow: hidden;
  animation: menu-drop 260ms var(--ease);
}

@keyframes menu-drop {
  from { max-height: 0; opacity: 0; }
  to   { max-height: 30rem; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu__sub:not([hidden]) { animation: none; }
}
.site-menu__sub > li + li { border-top: var(--rule) solid var(--hairline); }
.site-menu__sub a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--sp-6);
  padding: var(--sp-2);
  font-family: var(--font-body);
  font-variation-settings: 'wdth' var(--wdth-body);
  font-size: var(--fs-body);
  letter-spacing: 0.02em;
  color: var(--cream-muted);
  text-decoration: none;
  text-align: center;
  transition: color var(--dur-hover) var(--ease);
}
.site-menu__sub a:hover { color: var(--cream); }


@media (max-width: 768px) {
  .site-menu__top { font-size: calc(var(--fs-display-m) * 0.66); }
  .site-menu__nav { padding-block: var(--sp-2) var(--sp-8); }
  .site-menu__header { padding-block: var(--sp-5) var(--sp-3); }
}