.nav{border-bottom:1px solid var(--line)}

/* ---------- masthead ---------- */
      .mast {
        position: relative;
        overflow: hidden;
        background: var(--navy);
        padding-block: clamp(44px, 6vw, 76px) clamp(34px, 4vw, 48px);
      }
      .mast-slab {
        position: absolute;
        background: var(--navy-2);
        border-radius: 52px;
        right: -22%;
        top: -46%;
        width: 62%;
        height: 150%;
        transform: rotate(var(--tilt));
        z-index: 0;
      }
      .mast .shell {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .mast .label {
        display: flex;
        align-items: center;
        gap: 14px;
        color: var(--blue-lt);
      }
      h1 {
        margin: 0;
        font-family: var(--disp);
        font-weight: 700;
        text-transform: uppercase;
        font-size: clamp(30px, 5.4vw, 52px);
        line-height: 1.04;
        letter-spacing: 0.01em;
        color: var(--bone);
        text-wrap: balance;
      }
      .updated {
        margin: 0;
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--t3);
      }
      .lede {
        margin: 8px 0 0;
        font-size: clamp(16px, 1.7vw, 18px);
        line-height: 1.6;
        color: var(--t2);
        max-width: 56ch;
      }

      /* ---------- doc ---------- */
      .doc {
        padding-bottom: clamp(64px, 8vw, 104px);
      }
      .doc h2 {
        margin: clamp(44px, 5vw, 64px) 0 18px;
        padding-top: 14px;
        border-top: 2px solid var(--yellow);
        font-family: var(--disp);
        font-weight: 700;
        text-transform: uppercase;
        font-size: clamp(22px, 3vw, 32px);
        line-height: 1.08;
        color: var(--bone);
        scroll-margin-top: 24px;
      }
      .doc h3 {
        margin: 30px 0 10px;
        font-family: var(--disp);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 16px;
        letter-spacing: 0.07em;
        color: var(--bone);
        scroll-margin-top: 24px;
      }
      .doc p {
        margin: 0 0 15px;
        color: var(--t2);
      }
      .doc ul,
      .doc ol {
        margin: 0 0 15px;
        padding-left: 22px;
        color: var(--t2);
      }
      .doc li {
        margin-bottom: 8px;
        line-height: 1.58;
      }
      .doc li::marker {
        color: var(--blue-lt);
      }
      .doc strong,
      .doc b {
        color: var(--bone);
        font-weight: 600;
      }
      .doc a {
        color: var(--bone);
        text-decoration: underline;
        text-decoration-color: var(--line-2);
        text-underline-offset: 3px;
      }
      .doc a:hover {
        color: var(--yellow);
        text-decoration-color: var(--yellow);
      }

      /* ---------- toc ---------- */
      .toc {
        margin-top: 36px;
        border: 1px solid var(--line-2);
        border-top: 2px solid var(--blue);
        padding: 26px 28px;
        background: var(--navy-2);
      }
      .toc .micro {
        color: var(--blue-lt);
        display: block;
        margin-bottom: 14px;
      }
      .toc ol {
        margin: 0;
        padding-left: 20px;
        columns: 2;
        column-gap: 32px;
      }
      .toc li {
        margin-bottom: 7px;
        font-size: 15px;
        break-inside: avoid;
      }
      .toc a {
        text-decoration: none;
        color: var(--t2);
      }
      .toc a:hover {
        color: var(--yellow);
      }

      /* ---------- callout ---------- */
      .callout {
        background: var(--navy-2);
        border-left: 3px solid var(--yellow);
        padding: 22px 26px;
        margin: 0 0 18px;
      }
      .callout p:last-child,
      .callout ul:last-child,
      .callout dl:last-child {
        margin-bottom: 0;
      }

      /* ---------- fact list ---------- */
      .facts {
        margin: 0 0 18px;
        display: grid;
        grid-template-columns: minmax(150px, max-content) 1fr;
        gap: 0 28px;
      }
      .facts dt {
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--t3);
        padding: 13px 0;
        border-top: 1px solid var(--line);
      }
      .facts dd {
        margin: 0;
        font-size: 16px;
        line-height: 1.55;
        color: var(--t2);
        padding: 13px 0;
        border-top: 1px solid var(--line);
      }
      .facts dt:first-of-type,
      .facts dt:first-of-type + dd {
        border-top: 0;
      }

      /* ---------- footer ---------- */
      footer {
        position: relative;
        overflow: hidden;
        background: var(--navy-3);
        padding-block: clamp(44px, 5vw, 68px);
      }
      .foot-slab {
        position: absolute;
        background: var(--navy-2);
        border-radius: 52px;
        right: -16%;
        bottom: -62%;
        width: 66%;
        height: 140%;
        transform: rotate(var(--tilt));
        z-index: 0;
      }
      footer .shell {
        max-width: 1140px;
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 28px;
      }
      .ftop {
        display: flex;
        justify-content: space-between;
        gap: 30px;
        flex-wrap: wrap;
        align-items: flex-start;
      }
      footer .logo {
        height: 56px;
        width: auto;
        color: var(--bone);
      }
      .flinks {
        display: flex;
        gap: 26px;
        flex-wrap: wrap;
        font-size: 14px;
        color: var(--t2);
      }
      .flinks a {
        color: inherit;
        text-decoration: none;
      }
      .flinks a:hover {
        color: var(--yellow);
      }
      .fbot {
        border-top: 1px solid var(--line);
        padding-top: 20px;
        display: flex;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
      }
      .fbot p {
        margin: 0;
        font-size: 13px;
        color: var(--t3);
        max-width: 58ch;
      }

      :focus-visible {
        outline: 3px solid var(--yellow);
        outline-offset: 2px;
      }

      @media (max-width: 640px) {
        .toc ol {
          columns: 1;
        }
        .facts {
          grid-template-columns: 1fr;
          gap: 0;
        }
        .facts dd {
          border-top: 0;
          padding-top: 0;
        }
        .toc,
        .callout {
          padding-inline: 20px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        * {
          transition: none !important;
          animation: none !important;
        }
      }