/* Arcane Engineering design system: the base. Reset, page, type and the reading column. Needs tokens.css (or
   tokens-dark.css) first. Spacing between sections is the page's own: this file sets no margins on headings. */
* { box-sizing: border-box; margin: 0; }
html { font-size: var(--size-body); }
body { background: var(--page); color: var(--text); font-family: var(--font); line-height: var(--leading-ui); -webkit-font-smoothing: antialiased; }

/* Headings in Besley, Regular only. Even lines instead of a lone last word, without a hard <br>. */
h1, h2 { font-family: var(--font-heading); font-weight: 400; letter-spacing: 0; }
h1 { font-size: var(--size-h1); line-height: var(--leading-h1); text-wrap: balance; }
h2 { font-size: var(--size-h2); line-height: var(--leading-h2); }
h3 { font-size: var(--size-body); line-height: var(--leading-ui); font-weight: 400; }
p { font-size: var(--size-body); line-height: var(--leading-body); }
.sub { margin-top: var(--space-3); font-size: var(--size-body); line-height: var(--leading-body); color: var(--text-2); } /* the line under the H1 */

/* Links: ink-coloured, with the mark colour as the underline. */
a { color: inherit; text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent-hover, var(--mark)); }
a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.ext::after { content: "↗"; display: inline-block; text-decoration: none; font-size: 11px; margin-left: 2px; color: var(--text-3); } /* leaves the site */

/* The one reading column. */
.col { max-width: var(--col); margin: 0 auto; }
@media (max-width: 760px) {
  .col { padding-left: 26px !important; padding-right: 26px !important; }
}