*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Safety net against horizontal scroll, matching the rule index.html already carries
   inline. The real overflow causes were fixed at source in the 2026-09-08 mobile pass
   (desktop-frame absolute positioning, nowrap headings, height-sized logo rows); this
   only catches anything that slips through later — e.g. a decorative element parked
   deliberately off-edge, or new copy longer than its box.
   On <html> ONLY, never <body>: html is already the root scroller in standards mode,
   whereas giving <body> its own overflow turns it into a separate scroll container,
   which is a known way to break `position: sticky` for descendants. */
html { overflow-x: hidden; }

body {
  font-family: var(--font-body);
  color: #1a1712;
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, h4 { margin: 0; }

.rule {
  width: 100%;
  height: 1px;
  background: rgba(26, 23, 18, 0.15);
  border: none;
}

/* ==========================================================================
   SITE HEADER — persistent sticky nav (2026-09-03, per Arina), shared by index.html
   and about.html. Separate from each page's own hero-scoped nav (.hero-overlay__nav /
   .nav) — those stay exactly as they were, transparent-on-video and scrolling away
   with their hero. This one is fixed at the page level so navigation stays reachable
   for the rest of the page. js/site-header.js toggles --visible and --solid together,
   off one "scrolled past the hero" condition: hidden entirely while the hero's own nav
   is still on screen (showing both at once read as a doubled/ghosted wordmark+link
   row — an earlier version revealed this on a flat scroll distance instead, which is
   what caused that), then appears already solid — cream bar, ink-colored text — the
   moment the hero's own nav is gone. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  z-index: 100;
  background: transparent;
  box-shadow: none;
  transform: translateY(-100%);
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
}
.site-header--visible {
  transform: translateY(0);
  pointer-events: auto;
}
.site-header--solid {
  background: var(--color-cream);
  box-shadow: 0 2px 12px rgba(36, 30, 22, 0.08);
}

.site-header__wordmark {
  position: absolute;
  top: 50%;
  left: 5.556%;
  transform: translateY(-50%);
  width: 88px;
  aspect-ratio: 136 / 77;
  background-color: var(--color-cream);
  -webkit-mask-image: url("../assets/webp/wordmark-mask.webp");
  mask-image: url("../assets/webp/wordmark-mask.webp");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.3s ease;
}
.site-header--solid .site-header__wordmark { background-color: var(--color-ink); }

.site-header__links {
  position: absolute;
  top: 50%;
  right: 5.556%;
  transform: translateY(-50%);
  display: flex;
  gap: 2.5vw;
}

.site-header__link {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(9px, 0.764vw, 11px);
  letter-spacing: 0.164em;
  text-transform: uppercase;
  color: var(--color-cream);
  white-space: nowrap;
  transition: color 0.3s ease;
}
.site-header--solid .site-header__link { color: var(--color-ink); }

/* Below tablet width the link row's fixed-width text collides with the wordmark
   (no room left of it once the wordmark's own left:5.556% offset is accounted for) —
   hidden here rather than shrunk further, matching the same call already made on each
   page's own hero-scoped nav (.inq-nav__link etc.) at the same breakpoint. The burger
   below replaces it. */
@media (max-width: 860px) {
  .site-header__links { display: none; }
}

/* ==========================================================================
   MOBILE NAV (2026-09-08)
   Every nav on the site hides its links below 860px, which left phones with no
   navigation at all — this is the replacement. The burger lives in the shared
   .site-header, so one copy serves all four pages.

   The sticky header normally stays hidden until the hero is scrolled past
   (js/site-header.js). That's fine on desktop, where each hero carries its own
   nav — but on mobile those hero navs are hidden too, so waiting for the hero
   would leave the top of every page unnavigable (index.html's hero is several
   thousand px tall). Below 860px the header is therefore pinned visible and
   solid from page load, independent of scroll position; the JS keeps running and
   toggling its classes, they just no longer decide anything at this width.
   ========================================================================== */
@media (max-width: 860px) {
  .site-header {
    height: 56px;
    transform: translateY(0);
    background: var(--color-cream);
    box-shadow: 0 1px 0 var(--color-rule);
    pointer-events: auto;
  }
  .site-header__wordmark { background-color: var(--color-ink); width: 76px; }
}

.site-header__burger {
  display: none;
  position: absolute;
  top: 50%;
  right: 5.556%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 102;
}
.site-header__burger span {
  position: absolute;
  left: 5px;
  width: 20px;
  height: 1.5px;
  background: var(--color-ink);
  border-radius: 1px;
  transition: transform 0.28s ease, opacity 0.2s ease;
}
.site-header__burger span:nth-child(1) { top: 10px; }
.site-header__burger span:nth-child(2) { top: 15px; }
.site-header__burger span:nth-child(3) { top: 20px; }
.site-header__burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.site-header__burger.is-open span:nth-child(2) { opacity: 0; }
.site-header__burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  top: 56px;
  left: 0;
  width: 100%;
  z-index: 99;
  background: var(--color-cream);
  border-top: 1px solid var(--color-rule);
  box-shadow: 0 14px 28px rgba(36, 30, 22, 0.10);
  /* grid-rows 0fr -> 1fr animates open without needing a hard-coded max-height */
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease, visibility 0.32s;
  visibility: hidden;
}
.mobile-nav__inner { overflow: hidden; min-height: 0; }
.mobile-nav.is-open { grid-template-rows: 1fr; visibility: visible; }

.mobile-nav__link {
  display: block;
  padding: 17px 5.556%;
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.mobile-nav__link:last-child { border-bottom: none; }
.mobile-nav__link--active { color: #a89478; }

@media (max-width: 860px) {
  .site-header__burger { display: block; }
}
@media (min-width: 861px) {
  .mobile-nav { display: none; }
}