@layer base {
  /* The chart substrate: a night-display ground carrying a faint graticule.
     Static — no animation, nothing running forever. */
  body {
    background-color: var(--l-ground);
    background-image:
      linear-gradient(to right, rgb(var(--l-neatline-rgb) / 0.22) var(--l-hairline), transparent var(--l-hairline)),
      linear-gradient(to bottom, rgb(var(--l-neatline-rgb) / 0.22) var(--l-hairline), transparent var(--l-hairline));
    background-size: 96px 96px;
    background-position: center top;
    color: var(--l-sounding);
    font-family: var(--l-face-display);
    font-size: var(--l-fs-body);
    font-weight: var(--l-fw-regular);
    line-height: var(--l-lh-normal);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* ---- Headings. One scale, owned here, so no page can use a heading as a
          font size. More space above a heading than below it. ---- */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--l-ink);
    font-family: var(--l-face-display);
    font-weight: var(--l-fw-bold);
    line-height: var(--l-lh-snug);
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--l-fs-cartouche);
    font-weight: var(--l-fw-black);
    line-height: var(--l-lh-tight);
    letter-spacing: var(--l-ls-cartouche);
  }

  h2 {
    /* --l-fs-plate, not --l-fs-d1: see the token's own comment. d1 is shared with
       the search entry hero's h1, which the owner enlarged deliberately. */
    font-size: var(--l-fs-plate);
    font-weight: var(--l-fw-black);
    line-height: var(--l-lh-tight);
    letter-spacing: -0.025em;
  }

  h3 {
    font-size: var(--l-fs-d2);
  }

  h4 {
    font-size: var(--l-fs-d3);
  }

  h5,
  h6 {
    font-size: var(--l-fs-body);
    font-weight: var(--l-fw-semibold);
  }

  p {
    line-height: var(--l-lh-relaxed);
  }

  strong,
  b {
    color: var(--l-ink);
    font-weight: var(--l-fw-semibold);
  }

  /* ==========================================================================
     A FRAGMENT JUMP MUST NOT LAND UNDER THE STICKY NAV.

     `.fh-nav` is `position: sticky; top: 0` and 65px tall, so a plain
     `href="#port-80"` scrolled the target to y=0 and the bar covered its first
     33px -- the port number and service name, which are the only reason the
     link exists. Measured on /host/vpn1.fullhunt.blue#port-80: target top 32px,
     nav bottom 65px.

     `.hd-port` carried `scroll-margin-block-start: var(--l-space-8)` (32px),
     which was half the nav and the only such rule on the whole site. Every
     OTHER anchor target had none at all -- `#ports`, `#dns-records`,
     `#open-directory` on the host record, seven filter sections on
     search/filters.html, `#feature-comparison`, `#oem`, `#our_story` -- so all
     of them landed fully behind the bar.

     Solved once, here, because the sticky nav belongs to the shell and so does
     this problem.

     `:target`, NOT `[id]`. Every anchor on this site is a real fragment link,
     so `:target` covers them all -- while `[id]` would also reach the combobox
     options, which carry ids for `aria-activedescendant` and are scrolled with
     `scrollIntoView({block: "nearest"})` inside their own listbox
     (fh-ui.js:318). A scroll-margin there would fight that container.
     ========================================================================== */
  :target {
    scroll-margin-block-start: calc(var(--l-nav-h) + 1rem);
  }

  /* ---- Links: a chart underlines its references. ---- */
  a {
    color: var(--l-gold);
    text-decoration: underline;
    text-decoration-thickness: var(--l-hairline);
    text-underline-offset: 0.22em;
    text-decoration-color: rgb(var(--l-gold-rgb) / 0.45);
    transition: text-decoration-color var(--l-dur-fast) var(--l-ease);
  }

  a:hover {
    text-decoration-color: rgb(var(--l-gold-rgb) / 1);
  }

  /* ---- Data: soundings, positions, endpoints, CVE ids. ---- */
  code,
  kbd,
  samp,
  pre {
    font-family: var(--l-face-data);
    font-size: var(--l-fs-data);
    letter-spacing: var(--l-ls-data);
  }

  /* ---- Chart marginalia label. Every section is titled the way a chart
          titles a block: tracked caps, hairline rule, no decoration. ---- */
  .fh-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    color: var(--l-label);
    font-size: var(--l-fs-label);
    font-weight: var(--l-fw-bold);
    letter-spacing: var(--l-ls-label);
    text-transform: uppercase;
  }

  .fh-label::after {
    content: "";
    flex: 1 1 auto;
    height: var(--l-hairline);
    background: linear-gradient(to right, var(--l-neatline), transparent);
  }

  .fh-label--tight::after {
    display: none;
  }

  .fh-lead {
    max-width: var(--l-measure);
    color: var(--l-sounding);
    font-size: var(--l-fs-lead);
    line-height: var(--l-lh-relaxed);
  }

  /* Sounding numerals: the figure set in the field. */
  .fh-sounding {
    font-family: var(--l-face-data);
    font-variant-numeric: tabular-nums;
    color: var(--l-ink);
  }

  /* Emphasis inside a heading is the gold word, not italics. The incumbent hero
     and the First-Ever heading both highlighted one phrase this way. */
  h1 em,
  h2 em,
  h3 em {
    color: var(--l-gold);
    font-style: normal;
  }
}