@layer sections {
  .nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 50;
    padding-block: var(--space-md);
    padding-block-start: calc(var(--space-md) + env(safe-area-inset-top, 0px));
    /* only transform + opacity animate; background is a plain fade */
    transition:
      background-color var(--d-mid) var(--e-out),
      padding-block var(--d-mid) var(--e-out),
      border-color var(--d-mid) var(--e-out);
    border-block-end: 1px solid transparent;
  }

  .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }

  .nav__mark {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 1.375rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--c-bone);
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
  }

  .nav__mark span {
    font-family: var(--f-mono);
    font-size: var(--t-2xs);
    letter-spacing: 0.2em;
    color: var(--c-ember);
  }

  .nav__links {
    display: none;
    gap: clamp(1rem, 2.4vw, 2.5rem);
  }

  @media (min-width: 48rem) {
    .nav__links { display: flex; }
  }

  .nav__link {
    font-family: var(--f-mono);
    font-size: var(--t-2xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-ash);
    position: relative;
    padding-block-end: 3px;
    transition: color var(--d-fast) var(--e-out);
  }

  .nav__link::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 1px;
    background: var(--c-ember);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--d-mid) var(--e-out);
  }

  .nav__link:hover { color: var(--c-bone); }
  .nav__link:hover::after { transform: scaleX(1); }

  .nav__cta {
    font-family: var(--f-mono);
    font-size: var(--t-2xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-basalt);
    background: var(--c-ember);
    padding: 0.7em 1.2em;
    transition: transform var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
  }

  .nav__cta:hover { transform: translateY(-2px); background: var(--c-sulphur); }

  /* Narrow screens: the marque tag and a two-word CTA both wrapped,
     doubling the bar height and eating the hero. */
  @media (max-width: 30rem) {
    .nav__mark span { display: none; }
    .nav__cta {
      white-space: nowrap;
      padding: 0.6em 0.9em;
      font-size: 0.625rem;
      letter-spacing: 0.12em;
    }
  }

  /* Condensed state. Applied by scripts/core/nav.js with separate
     add/remove thresholds so it cannot flicker at the boundary. */
  .nav.is-condensed {
    background: color-mix(in oklch, var(--c-basalt) 88%, transparent);
    backdrop-filter: blur(14px);
    padding-block: var(--space-2xs);
    padding-block-start: calc(var(--space-2xs) + env(safe-area-inset-top, 0px));
    border-block-end-color: var(--c-basalt-hi);
  }
}