/* Cross-fade navigations instead of tearing the page down and repainting. */
    @view-transition {
      navigation: auto;
    }

    /* The outgoing page holds still at full opacity and the incoming one fades
       in over it, so nothing can dim mid-transition however long it runs. The
       nav is named so the old underline doesn't show through beneath the new. */
    .cap-tabs {
      view-transition-name: capability-tabs;
    }

    ::view-transition-old(root) {
      animation: none;
    }

    ::view-transition-new(root) {
      animation: content-fade-in 260ms ease-out both;
    }

    @keyframes content-fade-in {
      from { opacity: 0; }
    }

    /* The content is the only part of the page that actually differs, so it
       transitions on its own: the outgoing text fades out over the sheet
       instead of lying at full opacity beneath the incoming text, which is
       what read as muddy. height:auto stops the differing page lengths
       squashing one snapshot into the other's box. */
    main {
      view-transition-name: page-content;
    }

    ::view-transition-old(page-content),
    ::view-transition-new(page-content) {
      height: auto;
    }

    /* Old text clears first, then the new fades in, so the two headlines are
       never on screen together. */
    ::view-transition-old(page-content) {
      animation: content-fade-out 90ms ease-in both;
    }

    ::view-transition-new(page-content) {
      animation: content-fade-in 340ms 90ms ease-out both;
    }

    @keyframes content-fade-out {
      to { opacity: 0; }
    }

    /* Header */
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32px 48px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
      font-size: 18px;
      letter-spacing: -0.02em;
      text-decoration: none;
    }
    /* The mark is a portrait sheaf, roughly 1:1.9, so it is sized by
       height and given its true width rather than squared off. */
    .brand img {
      width: 21px;
      height: 40px;
    }
    .header-meta {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--graphite);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .header-right {
      display: flex;
      align-items: center;
      gap: 28px;
    }

    /* Sits beside the menu button and deliberately is not shaped like it.
       The bordered control is the only affordance in the header, and a
       second box next to it would read as two equal choices. A text link
       at the tagline's weight keeps the ordering: Menu first, this second. */
    .header-login {
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      white-space: nowrap;
      color: var(--ink);
      text-decoration: none;
      padding-bottom: 3px;
      border-bottom: 1px solid var(--line);
      transition: border-color 0.15s ease;
    }
    .header-login:hover {
      border-bottom-color: var(--ink);
    }
    .header-login:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 4px;
    }

    /* ============================================================
       SHELL / MENU
       A checkbox, not :target — the page already spends its single
       document hash on the intake takeover and the spec drawers, and
       a menu is the one overlay here that nobody needs to link to.

       The sheet itself lives outside .page. .page takes
       rotateY(180deg) during the flip, and a transformed ancestor
       becomes the containing block for fixed-position descendants.
       ============================================================ */
    .nav-toggle {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }
    .nav-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      border: 1px solid var(--ink);
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--ink);
      cursor: pointer;
      user-select: none;
      transition: background-color 0.15s ease, color 0.15s ease;
    }
    .nav-btn:hover {
      background: var(--ink);
      color: var(--paper);
    }
    .nav-bars {
      display: flex;
      flex-direction: column;
      gap: 3px;
      width: 13px;
    }
    .nav-bars i {
      display: block;
      height: 1.5px;
      background: currentColor;
    }
    #nav-open:focus-visible ~ .page .nav-btn {
      outline: 2px solid var(--accent);
      outline-offset: 4px;
    }

    /* Spans the whole viewport, but the opaque sheet paints on top of it,
       so the only part that can ever take a click is the exposed page
       below. Transparent on purpose -- the page is meant to stay visible. */
    .nav-scrim {
      position: fixed;
      inset: 0;
      z-index: 149;
      cursor: pointer;
      display: none;
    }
    #nav-open:checked ~ .nav-scrim {
      display: block;
    }
    .nav-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      max-height: 100vh;
      max-height: 100dvh;
      z-index: 150;
      display: flex;
      flex-direction: column;
      background: var(--desk);
      color: var(--paper);
      overflow-y: auto;
      border-bottom: 1px solid rgba(249,249,247,0.16);
      box-shadow: 0 26px 54px rgba(0,0,0,0.42);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.26s ease, visibility 0s linear 0.26s;
    }
    #nav-open:checked ~ .nav-overlay {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.26s ease, visibility 0s linear 0s;
    }
    .nav-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32px 48px;
      border-bottom: 1px solid rgba(249,249,247,0.16);
      flex: none;
    }
    .nav-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
      font-size: 18px;
      letter-spacing: -0.02em;
    }
    /* The mark is drawn dark-on-transparent for the sheet; on the desk
       it needs the opposite polarity or it is a black square on black. */
    .nav-brand img {
      width: 21px;
      height: 40px;
      filter: invert(1);
    }
    .nav-close {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      border: 1px solid var(--paper);
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.15s ease, color 0.15s ease;
    }
    .nav-close:hover {
      background: var(--paper);
      color: var(--desk);
    }
    .nav-x {
      font-size: 15px;
      line-height: 1;
    }
    .nav-body {
      flex: none;
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: 0 72px;
      align-content: start;
      padding: 56px 48px;
    }
    .nav-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .nav-item {
      border-top: 1px solid rgba(249,249,247,0.16);
    }
    .nav-item:last-child {
      border-bottom: 1px solid rgba(249,249,247,0.16);
    }
    .nav-link {
      display: flex;
      align-items: baseline;
      gap: 22px;
      padding: 20px 14px;
      text-decoration: none;
      color: var(--paper);
      font-size: clamp(28px, 4.2vw, 46px);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.03em;
      transition: background-color 0.14s ease, color 0.14s ease, padding-left 0.14s ease;
    }
    .nav-link:hover,
    .nav-link:focus-visible {
      background: var(--paper);
      color: var(--desk);
      padding-left: 26px;
    }
    .nav-num {
      flex: none;
      width: 32px;
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.1em;
      color: var(--accent);
    }
    .nav-note {
      margin-left: auto;
      align-self: center;
      font-family: var(--mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #8f8f89;
    }
    .nav-link:hover .nav-note,
    .nav-link:focus-visible .nav-note { color: var(--graphite); }
    .nav-aside {
      display: flex;
      flex-direction: column;
      gap: 40px;
      padding-top: 8px;
    }
    .nav-h {
      font-family: var(--mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--accent);
      padding-bottom: 10px;
      margin-bottom: 14px;
      border-bottom: 1px solid rgba(249,249,247,0.16);
    }
    .nav-sub {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 11px;
    }
    .nav-sub a {
      text-decoration: none;
      font-size: 14px;
      color: #c9c9c2;
      border-bottom: 1px solid transparent;
      transition: color 0.14s ease, border-color 0.14s ease;
    }
    .nav-sub a:hover,
    .nav-sub a:focus-visible {
      color: var(--paper);
      border-bottom-color: var(--accent);
    }

    /* Contact is the only line in the spine that leaves the page, so it
       carries the accent and an arrow instead of a step number. */
    .nav-item-cta .nav-link,
    .nav-item-cta .nav-num {
      color: var(--accent);
    }
    .nav-item-cta .nav-link:hover,
    .nav-item-cta .nav-link:focus-visible {
      background: var(--accent);
      color: var(--paper);
    }
    .nav-item-cta .nav-link:hover .nav-num,
    .nav-item-cta .nav-link:focus-visible .nav-num,
    .nav-item-cta .nav-link:hover .nav-note,
    .nav-item-cta .nav-link:focus-visible .nav-note {
      color: var(--paper);
    }