/* Base: the reset, the page background and the fonts for all pages. */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Offset for the sticky bar. Without it the bar covers the target of a link
   to a part of the same page. */
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Every style of the serif has a file. Do not let the browser make a
     slanted or a thickened shape. */
  font-synthesis: none;
}

::selection { background: var(--accent); color: var(--paper); }

a { color: inherit; }

/* A control does not inherit the page font. Give it the mono face at weight
   500, as the labels near it. */
button { font: inherit; color: inherit; }

/* pre and code need the font of the site by name. The browser rule is
   stronger than inheritance. */
pre, code { font-family: var(--font-mono); }

h1, h2, h3 { text-wrap: balance; }

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

/* A skip link for the keyboard. It shows only with focus. */
.skip-link {
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 0.65rem 1.1rem;
  transition: top 140ms ease;
}

.skip-link:focus { top: 1rem; }

/* Touch areas. A pseudo-element pads each small control to 24px, and the
   control does not move. Rows that wrap get more space, so two pads do not
   overlap. */
@media (pointer: coarse) {
  .head-links a,
  .pubs-footer a,
  .pub-actions a,
  .paper-nav a,
  .cite summary,
  .abstract-toggle,
  .footer-email,
  .theme-toggle,
  .nav-toggle {
    position: relative;
  }

  .head-links a::after,
  .pubs-footer a::after,
  .pub-actions a::after,
  .paper-nav a::after,
  .cite summary::after,
  .abstract-toggle::after,
  .footer-email::after {
    content: "";
    position: absolute;
    inset: -0.35rem 0;
  }

  /* The icon buttons keep a circle of 2rem and a touch area of 44px. */
  .theme-toggle::after,
  .nav-toggle::after {
    content: "";
    position: absolute;
    inset: -0.375rem;
  }

  .pub-actions { gap: 0.8rem 1.25rem; }
  .paper-nav { gap: 0.9rem 1.75rem; }
  .head-links { gap: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; }
}