/**
 * Site chrome — header, primary navigation, footer, wordmark.
 *
 * Loaded on every page because it is on every page. Block CSS is the part that
 * loads conditionally.
 */

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-surface);
  /* No border and no shadow (§4). The header separates from the page by a
   * value step once scrolled, which is the system's own depth device. */
  transition: background-color var(--duration-base) var(--ease-out);
}

.site-header--scrolled { background-color: var(--color-surface-raised); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-block-size: calc(var(--control-unit) + var(--space-xs));
}

/**
 * Inline navigation, desktop only.
 *
 * Below 48em it is hidden and the side panel takes over, reached from the
 * bottom FAB. Above it, the panel and its toggle are hidden instead — two
 * navigations on one screen is clutter, and the panel's secondary links are
 * already in the footer.
 */
.site-nav { display: none; }

@media (width >= 48em) {
  .site-nav { display: block; }
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.site-nav a {
  /* Controls are lowercase, always (§6.4) — it is what tells a control from a
   * heading without a border or an icon. */
  text-transform: lowercase;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  padding-inline: var(--space-2xs);
  border-radius: var(--radius-field);
}

.site-nav a:hover { color: var(--color-text); }

/* Current page marked by colour AND weight, never colour alone. */
.site-nav [aria-current="page"] {
  color: var(--color-accent);
  font-weight: var(--weight-bold);
}

/* --------------------------------------------------------------- brand */

.site-brand { margin: 0; }

.site-brand__link {
  text-decoration: none;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-block-size: var(--target-min);
}

.brand-mark { flex-shrink: 0; }

/* Display tracking — tight and negative — because the wordmark is display
 * type. The opposite direction from a chip. */
.site-brand__mark {
  position: relative;
  font-size: var(--text-md);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  padding-block-end: 0.28em;
}

/* The swash sits under the lettering and spans it. Absolute so it cannot
 * affect the line box — a logo must not change the header's height. */
.site-brand__swash {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  inline-size: 100%;
  block-size: 0.22em;
}

/* --------------------------------------------------------------- footer */

.site-footer {
  background-color: var(--color-surface);
  padding-block: var(--space-lg) var(--space-md);
  margin-block-start: var(--space-xl);
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer a {
  color: var(--color-text-muted);
  text-decoration: none;
  text-transform: lowercase;
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
}

.site-footer a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/**
 * Legal fine print. One of the sanctioned uses of sub-18px type — but SENTENCE
 * CASE, not the tracked-out caps this had.
 *
 * Chip style marks a string as a label, and §6.2.1 is specific that it is for
 * categories, statuses and machine strings the system is quoting back. A
 * copyright line and a trademark disclaimer are neither: they are sentences,
 * and setting them in tracked caps made the quietest content on the page shout.
 */
.site-footer__legal {
  display: grid;
  gap: var(--space-3xs);
  font-size: var(--text-meta);
  color: var(--color-text-subtle);
  max-inline-size: var(--measure-prose);
}

.site-footer__legal p { margin: 0; max-inline-size: none; }


/**
 * On a phone the navigation toggle is a fixed bottom-centre FAB, so the page
 * needs to end above it. Without this the last line of the footer sits under
 * the button and cannot be read or selected.
 */
@media (width < 48em) {
  /* The inline nav is hidden below 48em and the panel takes over, so the
   * header holds the wordmark alone. `space-between` on a single child pins it
   * left against an otherwise empty bar; centred, it reads as the masthead it
   * is. (owner, 2026-09-13) */
  .site-header__inner { justify-content: center; }

  .site-footer {
    padding-block-end: calc(var(--control-chip) + var(--space-lg) + env(safe-area-inset-bottom, 0px));
  }
}