/* Overlay above the sizzle video, recoloured to match the cream menu bar (--canvas: #f4efe6). */

/* logo SVG: filter chain approximating #f4efe6 (calculated from black source). */
.hero__brand {
  filter: brightness(0) saturate(100%) invert(96%) sepia(11%) saturate(184%) hue-rotate(345deg) brightness(102%) contrast(94%);
}

/* Push the CTA further down — about halfway between the logo and the screen bottom. */
.hero__overlay {
  grid-template-rows: 1fr auto auto 1.6fr auto 0.4fr;
}

.hero__cta {
  grid-row: 5;
  margin-top: 0;
}

/* CTA pill + sound toggle in the hero — same cream blur as the menu bar. */
.hero .cta-pill,
.hero__sound,
.hero__sound[aria-pressed='true'],
.hero__sound[aria-pressed='false'] {
  background: rgba(244, 239, 230, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  color: var(--ink);
  border-color: rgba(244, 239, 230, 0.78);
}

.hero .cta-pill:hover,
.hero__sound:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

/* Replace the colored-dot glyph with a small speaker icon (on / crossed). */
.hero__sound-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  font-size: inherit;
  line-height: 1;
  color: currentColor;
}

.hero__sound-icon {
  display: none;
}

.hero__sound[aria-pressed='true'] .hero__sound-icon--on {
  display: block;
}

.hero__sound[aria-pressed='false'] .hero__sound-icon--off {
  display: block;
}

/* play button shown when the video can't autoplay. */
.hero__play {
  color: var(--cream);
  border-color: var(--cream);
}

/* Hero is full-viewport. Nav is fixed (below) so no negative margin is needed. */
.hero {
  height: 100vh;
  margin-top: 0;
}

/* Each photo chapter sticks at the top of the viewport while the next
   cream interstitial slides up over it. */
.chapter {
  position: sticky;
  top: 0;
}

/* Cream interstitials sit above the sticky chapter, with a subtle drop-shadow
   visible above their top edge as they slide up over the photo behind. */
.interstitial {
  position: relative;
  z-index: 2;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.1);
}

/* Defensive: long titles shouldn't overflow narrow viewports. */
.interstitial__title {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
}

@media (max-width: 600px) {
  .interstitial__title {
    font-size: clamp(32px, 8.5vh, 72px);
  }
}

/* Chapter text panels: centered on the photo, slightly larger text,
   transparent cream-blur surface (matches the nav / CTA system). */
.chapter:not(.chapter--contact):not(.chapter--gallery) .chapter__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  margin: 0;
  width: min(560px, 88vw);
  max-width: 88vw;
  background: rgba(244, 239, 230, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-left: 0;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
  font-size: 1.08em;
}

.chapter:not(.chapter--contact):not(.chapter--gallery) .chapter__panel .chapter__lede {
  font-size: 1.35em;
}

@media (max-width: 600px) {
  .chapter:not(.chapter--contact):not(.chapter--gallery) .chapter__panel {
    width: 88vw;
    border-top: 0;
  }
}

/* Compact the bottom of the site — Contact interstitial + Contact chapter + footer
   together fit within one viewport (minus the header). */
.interstitial#int-10 {
  min-height: 0;
  padding: 5vh 6vw 3vh;
  box-shadow: none;
}

.interstitial#int-10 .interstitial__title {
  font-size: clamp(40px, 8vh, 96px);
}

.chapter--contact {
  position: relative;
  min-height: 0;
}

.chapter--contact .chapter__panel--centred {
  margin: 0 auto;
  padding: 4vh 6vw 3vh;
}

.chapter--contact .chapter__panel--centred p {
  margin-bottom: 0.6rem;
}

.footer {
  padding: 3vh 6vw calc(3vh + var(--strip-h));
}

/* Header: fixed so its height can shrink without reflowing the page.
   Ever-so-slight cream blur. Smooth drop-down on reveal, smooth shrink on scroll. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(244, 239, 230, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.9s ease,
    height 0.28s ease;
  will-change: transform, height;
}

/* Condensed state — when scrolled past a short threshold. */
.nav[data-condensed='true'] {
  height: 52px;
}

/* Pages without a hero need top padding so content sits below the fixed nav. */
body:not(:has(.hero)) {
  padding-top: var(--nav-h);
}

/* Intro state — only on the home page (which has .hero): scroll locked, nav lifted. */
body:has(.hero:not(.hero--revealed)) {
  overflow: hidden;
}

body:has(.hero:not(.hero--revealed)) .nav {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav {
    transition: none;
  }

  body:has(.hero:not(.hero--revealed)) {
    overflow: auto;
  }

  body:has(.hero:not(.hero--revealed)) .nav {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
}

/* Dev sliders → nav text style. */
:root {
  --dev-nav-size: 13px;
  --dev-nav-weight: 400;
  --dev-nav-track: 0.22em;
}

.nav__links a {
  font-size: var(--dev-nav-size);
  font-weight: var(--dev-nav-weight);
  letter-spacing: var(--dev-nav-track);
  white-space: nowrap;
}

/* Hamburger button — visible only on narrow screens. */
.nav__hamburger {
  justify-self: end;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: transparent;
  border: none;
  color: var(--moss);
  cursor: pointer;
  transition: color var(--t-fast);
}

.nav__hamburger:hover {
  color: var(--ink);
}

/* Wide screens: menu group sits centered at 2/3 from left at rest,
   slides to right-aligned when the nav is condensed. */
@media (min-width: 721px) {
  .nav__links {
    position: absolute;
    top: 50%;
    left: 66.6667%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: max-content;
    white-space: nowrap;
    transition: left 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nav[data-condensed='true'] .nav__links {
    left: calc(100% - 4vw);
    transform: translate(-100%, -50%);
  }
}

@media (max-width: 720px) {
  .nav {
    grid-template-columns: auto 1fr auto;
  }

  .nav__hamburger {
    display: inline-flex;
  }

  .nav__links {
    /* Sit flush below the (fixed) nav, edge-to-edge across the viewport. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    flex-direction: column;
    gap: 0;
    background: rgba(244, 239, 230, 0.92);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    border-bottom: 1px solid var(--rule);
    padding: 0;
    display: none;
    transform: none;
  }

  .nav[data-menu-open='true'] .nav__links {
    display: flex;
  }

  .nav__links a {
    display: block;
    width: 100%;
    padding: 14px 5vw;
    border-bottom: 1px solid var(--rule);
    text-align: left;
  }

  .nav__links a:last-child {
    border-bottom: 0;
  }
}