@layer components {
  /* ==========================================================================
     TRIANGLE NAV
     Geometry is measured from artboard 1, not estimated. See tokens.css for
     the ink extents every value below is derived from.

     Collapse behaviour
     ------------------
     The links slide LEFT and vanish into the triangle — they never travel off
     the screen. .nav__reveal clips at the triangle's RIGHT edge, so the links
     only ever appear to emerge from the mark. The toggle shows the X while
     open and a downward caret while closed, so the closed state reads as
     "opens downward" rather than "plus". The state is entirely the visitor's:
     nothing collapses it automatically.
     ========================================================================== */

  .nav {
    position: fixed;
    inset-block-start: var(--nav-y);
    inset-inline-start: var(--nav-x);
    z-index: var(--z-nav);
    height: var(--nav-tri-h);
    color: var(--c-ink);

    /* Never wider than the screen: the box is invisible but it is still a
       fixed-position box, and an oversized one hangs off small viewports. */
    max-width: calc(100vw - var(--nav-x) * 2);

    /* The empty area around the mark and links must not intercept clicks on
       the page beneath. Only the interactive children take pointer events. */
    pointer-events: none;
  }

  .nav__toggle,
  .nav__link { pointer-events: auto; }

  /* --- clip window --------------------------------------------------------
     Starts at the triangle's RIGHT edge, not its left. The mark is an outline,
     so the corners of its bounding box are transparent — clipping at the left
     edge let the links show *beside* the triangle on their way past, which
     broke the illusion. Clipping at the right edge means they only ever
     appear to emerge from it. */
  .nav__reveal {
    overflow: clip;
    height: 100%;
    margin-inline-start: var(--nav-tri-w);
    max-width: calc(100% - var(--nav-tri-w));
    padding-inline-start: var(--nav-list-pad);
  }

  .nav__list {
    display: flex;
    align-items: flex-start;
    /* font-size here so every em below resolves against the link type */
    font-size: var(--fs-30);
    /* line box top = desired ink top minus the font's own 0.117em ink offset */
    padding-block-start: calc(var(--nav-ink-top) - var(--nav-pill-t));
    width: max-content;
    /* Opacity is linear on purpose. On an eased curve the value collapses in
       the first third and the rest of the travel is already invisible, which
       reads as no fade at all. Linear spreads the change evenly across the
       whole slide, so the dissolve is actually perceptible. */
    transition: translate  var(--dur-nav) var(--ease-nav),
                opacity    var(--dur-nav) linear,
                visibility 0s linear 0s;
  }

  .nav[data-open="false"] .nav__list {
    /* right edge lands on the clip boundary = fully hidden behind the mark */
    translate: calc(-1 * (var(--nav-list-pad) + 100%)) 0;
    opacity: 0;
    pointer-events: none;
    /* Hidden only once it has finished travelling, so collapsed links leave
       the tab order and the screen reader, but the slide is still seen. */
    visibility: hidden;
    transition-delay: 0s, 0s, var(--dur-nav);
  }

  .nav[data-open="true"] .nav__list {
    translate: 0 0;
    opacity: 1;
    visibility: visible;
  }

  /* --- the triangle toggle ------------------------------------------------
     Painted above the list so the links pass underneath it. */
  .nav__toggle {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 2;
    width: var(--nav-tri-w);
    height: var(--nav-tri-h);
    display: grid;
    place-items: center;
    color: var(--c-ink);
    /* No background here — the triangle's own opaque fill does the masking,
       so nothing covers the page behind the mark. */
  }

  .nav__triangle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* x 13x13, centred on the triangle's optical centre (143,121 in a mark at
     115,97 -> 28,24 from its corner). */
  .nav__icon {
    position: absolute;
    /* Geometric centre of the x layer is 40.7%, but a triangle's visual centre
       sits lower, so this is nudged ~6px down at design size to look centred. */
    inset-block-start: 51%;
    inset-inline-start: 50%;
    width: var(--nav-x-size);
    height: var(--nav-x-size);
    translate: -50% -50%;
    transition: opacity var(--dur-fast) var(--ease-out),
                rotate var(--dur-base) var(--ease-out);
  }

  .nav__icon--caret { opacity: 0; rotate: -90deg; }

  .nav[data-open="false"] .nav__icon--x     { opacity: 0; rotate: 90deg; }
  .nav[data-open="false"] .nav__icon--caret { opacity: 1; rotate: 0deg; }

  /* --- the dot ------------------------------------------------------------
     The PSD draws this as a 68px Helvetica full stop. Rebuilt as a shape so
     it carries no font dependency and stays exact at any size. */
  .nav__dot {
    position: absolute;
    z-index: 2;
    inset-inline-start: calc(var(--nav-tri-w) + var(--nav-dot-gap));
    inset-block-end: 0;
    width: var(--nav-dot-w);
    height: var(--nav-dot-h);
    background: currentColor;
  }

  /* --- the links ----------------------------------------------------------
     Gaps are uneven by design — the PSD spaces them with tab stops. */
  .nav__link {
    position: relative;
    display: block;
    font-size: inherit;
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-tight);
    line-height: 1;
    padding-inline: var(--nav-pill-px);
    padding-block: 0;
    color: var(--c-ink);
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
  }

  .nav__item + .nav__item { margin-inline-start: var(--nav-gap-1); }
  .nav__item--works   { margin-inline-start: var(--nav-gap-2) !important; }
  .nav__item--contact { margin-inline-start: var(--nav-gap-3) !important; }

  /* The pill from the PSD (Layer "hover", 90 x 39). Hover and focus only —
     there is deliberately no current-page state. */
  .nav__link::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--nav-pill-t)) 0 calc(-1 * var(--nav-pill-b)) 0;
    background: var(--c-ink);
    scale: 1 1;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
    z-index: -1;
  }

  .nav__link:hover::before,
  .nav__link:focus-visible::before { opacity: 1; }

  .nav__link:hover,
  .nav__link:focus-visible { color: var(--c-paper); }

  /* contact has no destination until artboard 7 exists. */
  .nav__link[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; }
  .nav__link[aria-disabled="true"]:hover { color: var(--c-ink); }
  .nav__link[aria-disabled="true"]:hover::before { opacity: 0; }
}