@layer components {
  /* mattemotto: el cintillo es vidrio. la marca, el ancla. */

  /* mattemotto: el cintillo flota sobre la página. el héroe pasa por debajo. */
  .topbar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 40;
    color: var(--on-ink);
    border-block-end: 1px solid transparent;

    /* glass from the start — over the hero photo this reads as deep navy
       with subtle warmth from the cyclist beneath, not a gray void. */
    background: color-mix(in oklab, var(--ink) 80%, transparent);
    backdrop-filter:         saturate(1.3) blur(18px);
    -webkit-backdrop-filter: saturate(1.3) blur(18px);

    transition: background-color  var(--dur-medium) var(--ease-out-quint),
                border-color      var(--dur-medium) var(--ease-out-quint);
  }
  /* hairline appears after first scroll to mark separation from content */
  .topbar[data-scrolled="true"] {
    border-block-end-color: var(--hairline-on-ink);
  }

  /* fallback: no backdrop-filter -> solid ink for everyone. mattemotto trusts no browser. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .topbar { background: var(--ink); }
  }

  .topbar__inner {
    max-inline-size: var(--max-page);
    margin-inline: auto;
    padding-inline: var(--page-margin);
    padding-block: var(--space-sm);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-lg);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: currentColor;
  }
  .brand img {
    block-size: clamp(2.4rem, 3vw, 3rem);
    inline-size: auto;
  }

  .nav-primary {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2.4rem);
  }
  .nav-primary a {
    font-family: var(--font-sans);
    font-size: var(--fs-200);
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    color: currentColor;
    padding-block: 0.4rem;
    position: relative;
  }
  .nav-primary a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 1px;
    background: var(--orange);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform var(--dur-medium) var(--ease-out-quint);
  }
  .nav-primary a:hover::after,
  .nav-primary a[aria-current="page"]::after { transform: scaleX(1); }

  .nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    color: currentColor;
    padding: var(--space-xs);
    cursor: pointer;
    /* leave room for the X-glyph swap */
    inline-size: 2.5rem;
    block-size: 2.5rem;
    align-items: center;
    justify-content: center;
  }
  .nav-toggle svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    transition: transform var(--dur-medium) var(--ease-out-quint);
  }
  .nav-toggle svg line {
    transform-origin: 12px 12px;
    transition: transform var(--dur-medium) var(--ease-out-quint),
                opacity   var(--dur-quick)  var(--ease-out-quint);
  }
  /* X-glyph: top line tilts +45, middle fades, bottom line tilts -45 */
  .nav-toggle[aria-expanded="true"] svg line:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] svg line:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] svg line:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }

  /* ─── iPad-portrait + phone (aspect-ratio < 1/1) ────────────────────────
     Hamburger flush left. Brand centered. Right slot empty.
     CSS order swaps the visual order without touching HTML. */
  @media (aspect-ratio < 1/1) {
    .topbar__inner {
      /* three equal tracks so the brand sits truly centered */
      grid-template-columns: 1fr auto 1fr;
    }
    .nav-toggle {
      display: inline-flex;
      order: 1;
      justify-self: start;
    }
    .brand {
      order: 2;
      justify-self: center;
    }
    .nav-primary {
      /* the curtain — hidden until [data-open="true"] */
      order: 3;
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      inline-size: 100vw;
      block-size: 100dvh;
      z-index: 60;
      display: grid;
      place-content: center;
      gap: var(--space-md);
      background: var(--ink);
      padding-inline: var(--page-margin);
      padding-block: var(--space-4xl);
      opacity: 0;
      transform: translateY(-1rem);
      pointer-events: none;
      visibility: hidden;
      transition: opacity   var(--dur-medium) var(--ease-out-quint),
                  transform var(--dur-medium) var(--ease-out-quint),
                  visibility 0s linear var(--dur-medium);
    }
    .topbar[data-open="true"] .nav-primary {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
      visibility: visible;
      transition: opacity   var(--dur-medium) var(--ease-out-quint),
                  transform var(--dur-medium) var(--ease-out-quint),
                  visibility 0s linear 0s;
    }
    .nav-primary a {
      font-size: clamp(1.6rem, 8vw, 2.4rem);
      font-weight: 700;
      text-align: center;
      padding-block: var(--space-md);
      letter-spacing: -0.012em;
    }
    .nav-primary a::after {
      /* phone curtain doesn't need the underline gizmo */
      display: none;
    }
    /* keep the toggle clickable above the curtain */
    .topbar[data-open="true"] .nav-toggle {
      position: relative;
      z-index: 70;
    }
  }
}