/* Home: the shared shell and footer over the film. Loaded after styles.css, so it settles where the two meet.
   On the film the bar is an overlay in the film's own colours (--fg is white on dark sections, graphite on light);
   past the film, or while a menu is open, it is the white bar every other page has. The film itself is untouched. */

/* The film's snap points land at the very top; site.css pads scroll targets for its sticky bar. */
html { scroll-padding-top: 0; }
/* Until film.js has placed its snap points, nothing else is a snap target. Otherwise, when the styles arrive
   before the film is sized, the browser latches onto the first section and follows it to the foot of the film. */
html:not(:has(.film__snap)) .section, html:not(:has(.film__snap)) .footer { scroll-snap-align: none; }

/* film.js sets --gutter to the film board's letterboxed margin. The shell keeps the site's own gutters instead,
   so the menu sits where it sits on every other page and keeps its room on short, wide windows. */
:root { --site-gutter: 88px; }
@media (max-width: 1279px) { :root { --site-gutter: 48px; } }
@media (max-width: 1023px) { :root { --site-gutter: 32px; } }
@media (max-width: 767px) { :root { --site-gutter: 16px; } }
.bar.nav, .footer.on-dark, .sheet, .booksheet {
  --gutter: var(--site-gutter);
  --pad: max(var(--site-gutter), calc((100% - 1264px) / 2));
}

.bar.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: 88px; gap: 24px; padding: 0 var(--pad);
  background: transparent; border-bottom-color: transparent; color: var(--fg);
  transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out), color 240ms var(--ease-out);
}
.bar.nav .bar__brand { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.bar.nav .bar__lockup { color: var(--fg-brand); transition: color 240ms var(--ease-out); }
.bar.nav .nav__count { color: var(--fg-accent); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color 240ms var(--ease-out); }
body[data-theme="light"] .bar.nav .nav__count { color: var(--color-foreground); }

/* Past the film the bar settles to 72, as before. A menu opening on the film keeps the height,
   so nothing jumps; only the ground turns white, and the bar and panel read as one sheet. */
.bar.nav.is-past { height: var(--bar); backdrop-filter: none; box-shadow: none; }
.bar.nav.is-past, .bar.nav.is-menu { background: var(--color-surface); border-bottom-color: var(--color-border); color: var(--color-foreground); }
.bar.nav.is-past .bar__lockup, .bar.nav.is-menu .bar__lockup { color: var(--color-primary); }
.bar.nav.is-menu .nav__count { color: var(--color-foreground); }

/* The shared footer, not the film's old one. */
.footer.on-dark { padding: 0; gap: 0; display: block; }

@media (max-width: 767px) {
  .bar.nav, .bar.nav.is-past { height: 56px; }
  .bar.nav .bar__brand { gap: 14px; }
}

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