/* ============================================================= NAV */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav--solid {
  background: rgba(10, 10, 11, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.nav__inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav__brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__link {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--marble); }

.nav__cta { min-height: 2.5rem; padding: 0.5rem 1.4rem; }

.nav__right { display: flex; align-items: center; gap: 1.25rem; }

/* sound toggle — hidden until the audio engine reports the track exists */
.sound-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding-inline: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver);
}
.sound-toggle.is-available { display: inline-flex; }
.sound-toggle__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sound-toggle__bars i { width: 2px; background: currentColor; height: 100%; }
.sound-toggle__bars i:nth-child(1) { height: 55%; }
.sound-toggle__bars i:nth-child(3) { height: 70%; }
.sound-toggle[aria-pressed="false"] .sound-toggle__bars i { height: 3px; }

/* mobile menu */
.nav__menu-btn {
  display: none;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  background: var(--ink);
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 3rem;
}
.menu-overlay.is-open { display: block; }
.menu-overlay__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.menu-overlay__link {
  font-family: var(--font-serif);
  font-size: 2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.menu-overlay__close {
  position: absolute;
  top: 1.1rem; right: var(--gutter);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  min-height: 2.75rem;
}
.menu-overlay__meta { margin-top: 3rem; display: grid; gap: 0.4rem; color: var(--smoke); font-size: var(--fs-small); }

@media (max-width: 899px) {
  .nav__links { display: none; }
  .nav__menu-btn { display: inline-flex; }
  .nav__cta { display: none; }
}

/* ============================================================= HERO */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  isolation: isolate;
  background: var(--ink);
}

.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero__video { opacity: 0; transition: opacity 600ms var(--ease-out); }
.hero__video.is-active { opacity: 1; }

/* copy readability — restrained left/bottom scrim, no heavy wash */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,11,0.42) 0%, rgba(10,10,11,0) 30%),
    linear-gradient(75deg, rgba(10,10,11,0.72) 0%, rgba(10,10,11,0.25) 46%, rgba(10,10,11,0) 70%);
}

.hero__content {
  position: relative;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(4rem, 10vh, 7.5rem);
  display: grid;
  gap: 1.6rem;
  justify-items: start;
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 600;
  max-width: 11ch;
}
/* the title receives programmatic focus as a reading anchor after the
   entrance — it is not interactive, so no focus ring */
.hero__title:focus, .hero__title:focus-visible { outline: none; }
.hero__title em { font-style: italic; font-weight: 500; }

.hero__lead {
  font-size: var(--fs-lead);
  color: var(--silver-bright);
  max-width: 34ch;
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; }

.hero__scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--smoke);
  writing-mode: vertical-rl;
}
.hero__scroll-cue::after {
  content: '';
  width: 1px;
  height: 3rem;
  background: linear-gradient(180deg, var(--silver) 0%, transparent 100%);
}
@media (max-width: 767px) { .hero__scroll-cue { display: none; } }

/* ============================================================= SECTIONS (shared) */
.section { padding-block: var(--space-section); position: relative; }
.section--tight { padding-block: calc(var(--space-section) * 0.6); }
.section__head { display: grid; gap: 1.2rem; max-width: 46rem; }
.section__title { font-size: var(--fs-h2); text-wrap: balance; }
.section__lead { font-size: var(--fs-lead); color: var(--silver); max-width: 40ch; }

/* ============================================================= SIGNATURE FLOOR */
.floor { background: var(--ink); }

.floor__stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.floor__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.floor__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: 50% 62%; /* tighten toward the embedded logo */
}
.floor__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* left band keeps the copy readable over the brightest marble veins */
  background:
    linear-gradient(90deg, rgba(10,10,11,0.74) 0%, rgba(10,10,11,0.4) 40%, rgba(10,10,11,0) 64%),
    linear-gradient(180deg, rgba(10,10,11,0.85) 0%, rgba(10,10,11,0.18) 34%, rgba(10,10,11,0.06) 55%, rgba(10,10,11,0.62) 100%);
}

/* one moving specular band — light, not liquid; the floor itself never deforms */
.floor__sweep {
  position: absolute;
  inset: -12% -30%;
  z-index: 1;
  background: linear-gradient(105deg,
    transparent 42%,
    rgba(244, 244, 242, 0.05) 48%,
    rgba(244, 244, 242, 0.13) 50%,
    rgba(244, 244, 242, 0.05) 52%,
    transparent 58%);
  transform: translateX(-55%);
  pointer-events: none;
  mix-blend-mode: screen;
}

.floor__copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 1.2rem;
  justify-items: start;
}
.floor__copy .section__title { max-width: 14ch; }

/* ============================================================= FOOTER */
.footer { border-top: 1px solid var(--line); padding: 2.5rem 0 calc(2.5rem + var(--safe-bottom)); }
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  color: var(--smoke);
  font-size: var(--fs-small);
}

/* ============================================================= STICKY MOBILE BOOK */
.book-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  padding: 0.75rem var(--gutter) calc(0.75rem + var(--safe-bottom));
  background: rgba(10, 10, 11, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--dur-med) var(--ease-out);
}
.book-bar.is-visible { transform: none; }
.book-bar .btn { width: 100%; }
@media (max-width: 767px) {
  html.entered .book-bar { display: block; }
}

/* ============================================================= MOTION PREP
   Elements only hide when JS + motion are actually running (.has-motion),
   so the page is complete with JS off or reduced motion on. */
html.has-motion [data-reveal] { opacity: 0; transform: translateY(24px); }
html.has-motion .hero [data-reveal] { transform: translateY(18px); }

@media (prefers-reduced-motion: reduce) {
  .book-bar { transition: none; }
  .floor__sweep { display: none; }
}