/* 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);
}

/* Pin the sound toggle to the visible viewport bottom, not the hero's vh
   bottom — on Android the hero is 100vh which extends behind the URL bar /
   gesture nav, so a plain bottom:22px hides the button on first load. The
   (100vh - 100dvh) term is zero when chrome is collapsed and grows to the
   chrome height when it's shown, lifting the button by exactly that much.
   env(safe-area-inset-bottom) keeps it above the iOS home indicator. */
.hero__sound {
  bottom: calc(22px + env(safe-area-inset-bottom));
}

@supports (height: 100dvh) {
  .hero__sound {
    bottom: calc(22px + env(safe-area-inset-bottom) + (100vh - 100dvh));
  }
}

.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.
   Sized in vh (not dvh) so the hero doesn't reflow when Android's URL bar
   collapses — that reflow flickered the chapter images below. The sound
   toggle handles small-viewport visibility itself (see .hero__sound above). */
.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. Height fills the viewport minus
   whatever the nav is currently set to. */
.chapter {
  position: sticky;
  top: calc(var(--nav-h) + var(--interstitial-h));
  min-height: calc(100vh - var(--nav-h) - var(--interstitial-h));
}

/* First chapter has no interstitial above it, so it fills the full
   below-nav viewport and sticks immediately under the nav. */
#ch-1 {
  top: var(--nav-h);
  min-height: calc(100vh - var(--nav-h));
}

/* Each chapter owns its own stacking + paint context so neighbouring
   sticky/relative chapters can't bleed their backdrop-filter or large
   bitmap into each other (which produced flickering + ghosted panels
   on wide viewports once the photos were upgraded to 1920w).
   clip-path is the Android-Chrome-safe clip — overflow:hidden on the parent
   doesn't constrain a GPU-promoted child (the chapter__bg with will-change:
   transform), so without this the bottom of #ch-community's photo composited
   on top of the cream Contact interstitial / chapter that follows. */
.chapter {
  isolation: isolate;
  contain: layout paint;
  clip-path: inset(0);
}

/* Static background. The card-stacking comes from position: sticky on the
   chapters and interstitials — no animation needed. We previously ran a
   scroll-driven parallax (animation-timeline: view()) that recomputed a
   translate3d on every chapter__bg every scroll frame; on Android that
   produced compositing glitches at the bottom of the page because every
   sticky chapter above kept its GPU layer hot. Static + scale(1.12) gives
   the same "slightly bigger than viewport" crop without per-frame work. */
.chapter__bg,
.chapter.is-active .chapter__bg {
  animation: none;
  transform: translate3d(0, 0, 0) scale(1.12);
  backface-visibility: hidden;
}

/* Last scenic chapter + its interstitial release stickiness so the Contact
   section and footer share the final viewport, instead of the community
   photo pinning above them. z-index 3 lifts them above the still-sticky
   earlier interstitials (which sit at z-index 2). */
#int-community,
#ch-community {
  position: relative;
  top: auto;
  z-index: 3;
}

/* 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.
   Spread = -blur confines the shadow to above the element so it doesn't
   leak onto the next chapter — and so the leaks don't accumulate as
   successive interstitials sticky-pin on top of each other. */
.interstitial {
  position: sticky;
  top: calc(var(--nav-h));
  z-index: 2;
  box-shadow: 0 -28px 28px -28px rgba(0, 0, 0, 0.18);
}

/* Defensive: long titles shouldn't overflow narrow viewports. */
.interstitial__title {
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-hyphens: none;
  hyphens: none;
  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).
   translateZ(0) on this trio promotes them to their own GPU layers so they
   composite above any chapter__bg layers from sticky chapters earlier in the
   page (paired with the chapter clip-path above). */
.interstitial#int-10,
.chapter--contact,
.footer {
  transform: translateZ(0);
}

.interstitial#int-10 {
  position: relative;
  top: auto;
  z-index: 3;
  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;
  top: auto;
  z-index: 3;
  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));
  position: relative;
  bottom: 0;
}

/* 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. */
:root {
  --nav-h: 8vh;
  --nav-h-condensed: 6vh;
  --interstitial-h: 14vh;
}

/* When the nav is condensed, drive --nav-h from --nav-h-condensed so chapters,
   interstitials, and anything else that reads --nav-h track the live height. */
:root:has(.nav[data-condensed='true']) {
  --nav-h: var(--nav-h-condensed);
}

/* Short viewports: bump the vh share so the bar stays usable. */
@media (max-height: 800px) {
  :root {
    --nav-h: 10vh;
    --nav-h-condensed: 7.5vh;
  }
}

/* Tall viewports: shrink the vh share so the bar doesn't dominate. */
@media (min-height: 1200px) {
  :root {
    --nav-h: 6vh;
    --nav-h-condensed: 4.5vh;
  }
}

@media (min-height: 1700px) {
  :root {
    --nav-h: 4.5vh;
    --nav-h-condensed: 3.5vh;
  }
}

.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: var(--nav-h-condensed);
}

/* 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;
  }
}

/* Compact section-title bands: slim cream divider between chapters,
   not a full screen of white. Johnny: ~1/4 of previous height so the
   sticky chapter image behind stays visible.
   No fade-in — the band just exists and scrolls with the page. */
.interstitial,
.interstitial.is-visible {
  min-height: var(--interstitial-h);
  padding: 3vh 6vw;
  opacity: 1;
  transform: none;
  transition: none;
}

.interstitial__title {
  font-size: clamp(28px, 6vh, 64px);
}

@media (max-width: 600px) {
  :root {
    --interstitial-h: 16vh;
  }

  .interstitial {
    padding: 3vh 6vw;
  }

  .interstitial__title {
    font-size: clamp(24px, 5.5vh, 48px);
  }
}

/* Waitlist form — extends the .page layout used by /founder and /vision. */
.waitlist {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  max-width: 560px;
}

.waitlist .page__lede {
  margin-bottom: 0.6rem;
}

.waitlist__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border: 0;
  padding: 0;
  margin: 0;
}

.waitlist__field label,
.waitlist__field legend {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moss);
  padding: 0;
}

.waitlist__field input[type='text'],
.waitlist__field input[type='email'],
.waitlist__field input[type='tel'] {
  font-family: var(--serif);
  font-size: 1em;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem 0;
  transition: border-color var(--t-fast);
}

.waitlist__field input:focus {
  outline: none;
  border-bottom-color: var(--moss);
}

.waitlist__field input[aria-invalid='true'] {
  border-bottom-color: #b3261e;
}

.waitlist__error {
  font-size: 13px;
  color: #b3261e;
  font-style: italic;
}

.waitlist__reasons {
  margin-top: 0.4rem;
}

.waitlist__checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.6rem 1rem;
  margin-top: 0.6rem;
}

.waitlist__check {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1em;
  color: var(--ink-soft);
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.waitlist__check input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--moss);
  cursor: pointer;
}

.waitlist__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.waitlist__server-error {
  color: #b3261e;
  font-style: italic;
  margin: 0;
}

.waitlist button[type='submit'] {
  align-self: flex-start;
  margin-top: 0.6rem;
}

.waitlist button[type='submit']:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.waitlist__spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  vertical-align: -1px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: waitlist-spin 0.7s linear infinite;
}

@keyframes waitlist-spin {
  to {
    transform: rotate(360deg);
  }
}

.waitlist__status {
  margin: 0.2rem 0 0;
  font-style: italic;
  font-size: 0.95em;
  color: var(--ink-dim);
}

@media (prefers-reduced-motion: reduce) {
  .waitlist__spinner {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.5;
  }
}

/* /join page — full-bleed background photo with a cream-blur form panel
   sitting close under the nav. Footer is intentionally omitted on this page. */
body:has(.page.join) {
  /* Bg is fixed to the viewport and reaches behind the (cream-blurred) nav,
     so we drop the global "below-fixed-nav" padding the join page would inherit. */
  padding-top: 0;
}

.page.join {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--nav-h) + clamp(16px, 3vh, 40px)) 6vw clamp(28px, 5vh, 64px);
  align-items: start;
  justify-items: center;
  /* The base .page rule paints the cream canvas; on /join we need the fixed
     photo behind to show through. */
  background: transparent;
}

.join__bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  /* Pin to the large viewport so Android's URL-bar transitions don't re-resolve
     the height and re-crop the cover image (visible flicker). lvh = standardised
     large-viewport unit; 100vh fallback also pins to the large viewport on
     mobile Chrome. svh/dvh would shrink with the bar — exactly what we don't want. */
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
}

.join__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.join__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 17, 15, 0.18), rgba(20, 17, 15, 0.32));
  pointer-events: none;
}

.join__panel {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  background: rgba(244, 239, 230, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(244, 239, 230, 0.6);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  padding: clamp(24px, 4vh, 48px) clamp(24px, 4vw, 56px);
}

.join__panel .page__title.join__title {
  margin-bottom: 1.2rem;
  font-size: clamp(40px, 6vw, 72px);
}

.join__panel .page__lede {
  margin-bottom: 1rem;
}

.join__panel .page__back {
  margin-top: 1.4rem;
}

.join__panel .waitlist {
  gap: 1.2rem;
  max-width: none;
}

@media (max-width: 600px) {
  .page.join {
    padding: calc(var(--nav-h) + 12px) 4vw 28px;
  }

  .join__panel {
    padding: 22px 20px 26px;
    border-radius: 0;
  }

  .join__panel .page__title.join__title {
    font-size: clamp(34px, 9vw, 52px);
    margin-bottom: 0.8rem;
  }

  .join__panel .waitlist__checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.8rem;
  }
}