/* THE SITE HERO — one line of doors, above everything.
 *
 * On the site's own pages it is an ordinary block at the top of the document.
 * On the PRODUCT it has to be more careful, and the careful part is the whole
 * reason this file has a height variable in it:
 *
 *   The application's topbar is `position: fixed` at `top: 14px`, so it does
 *   not move when something is put above it — it lands ON the hero. And its
 *   stage is `height: 100vh`, so it still claims the whole window and the
 *   bottom of the product goes under the fold.
 *
 * Both are corrected from one number. Put the bar's height in a custom
 * property, push the fixed topbar down by it, and take the same amount off the
 * stage. One value, three rules, nothing guessed — an earlier attempt at this
 * gave the stage `height: auto` instead and the simulation rendered as an empty
 * page.
 */

:root { --site-hero-h: 52px; }

.site-hero {
  height: var(--site-hero-h);
  display: flex;
  align-items: center;
  justify-content: center;
  /* The clean line, and the only rule on the page. Nothing else about the bar
     is drawn: no band, no shadow, no tint. The product has none of those and a
     bar with a background would be the first thing announcing a different
     program. */
  border-bottom: 1px solid var(--line);
  background: none;
  /* Above the application's fixed chrome, so the two never trade places. */
  position: relative;
  z-index: 70;
}

.site-hero-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(var(--s3), 3vw, var(--s5));
  padding: 0 var(--page-gutter);
}

.site-hero-nav a {
  /* THE DOORS ARE TAP TARGETS, not just words. At 11px they measured 14px tall
     on a phone, against the 24px floor a finger needs. The padding is vertical
     and the bar's own height is unchanged, so nothing about the desktop layout
     moves -- the hit area grows into space the bar already had. */
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding-inline: 2px;
  font-size: 11px;
  font-weight: 640;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease);
}
.site-hero-nav a:hover { color: var(--ink); }
/* The page you are on is marked by ink alone. A second rule under one item,
   directly above the rule under the whole bar, is two lines saying one thing. */
.site-hero-nav a[aria-current="page"] { color: var(--ink); }

/* ------------------------------------------------- the product's own page */

/* The fixed topbar starts below the hero instead of on top of it. 14px is the
   application's own offset from the top of its window; here that window starts
   under the bar. */
body.has-site-hero .topbar { top: calc(var(--site-hero-h) + 14px); }

/* And the stage gives back exactly what the hero took. `100%` rather than a
   viewport unit deliberately: the text-size setting is a `zoom` on the body,
   and viewport units are not scaled by an ancestor zoom while the painted box
   is — the same trap the application already documented on its topbar. */
body.has-site-hero #stage {
  height: calc(100% - var(--site-hero-h));
  /* AND the min-height comes off. app-fit.css floors the stage at 100dvh so a
     collapsing URL bar cannot eat its bottom; with a hero above, that floor is
     exactly what pushes the product 52px past the window instead. Measured:
     stage bottom at 952 in a 900px viewport. The floor becomes the same
     subtraction. */
  min-height: calc(100dvh - var(--site-hero-h));
}

@media (max-width: 520px) {
  /* Five doors do not fit one 390px line at this tracking, so the bar takes
     two and the height follows. */
  :root { --site-hero-h: 76px; }
  .site-hero-nav { gap: var(--s2) var(--s3); }
}