*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 2vh);
}

body {
  position: relative;
  margin: 0;
  padding-top: var(--bar-h);
  background: var(--tone-paper);
  color: var(--tone-ink);
  font-family: var(--face-body);
  font-size: var(--fluid-body);
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--face-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 0 0 var(--fluid-tight);
  color: var(--tone-ink);
}

h1 { font-size: var(--fluid-h1); line-height: 1.02; }
h2 { font-size: var(--fluid-h2); line-height: 1.1; }
h3 { font-size: var(--fluid-h3); line-height: 1.2; }
h4 { font-size: var(--fluid-body); letter-spacing: 0.02em; }

p {
  margin: 0 0 var(--fluid-tight);
  line-height: 1.58;
}

a {
  color: var(--tone-mid-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--turn-quick);
}

a:hover { color: var(--tone-ink); }

img {
  max-width: 100%;
  height: auto;
}

ul, ol { margin: 0 0 var(--fluid-tight); padding-left: 1.3em; }
li { margin-bottom: var(--fluid-hair); }

strong { font-weight: 650; }

hr {
  border: 0;
  border-top: var(--hairline);
  margin: var(--fluid-band) 0;
}

button, input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--fluid-tight) var(--fluid-gap) var(--fluid-tight) 0; border-bottom: var(--hairline); vertical-align: top; }
td { overflow-wrap: anywhere; }
th:last-child, td:last-child { padding-right: 0; }
th { font-family: var(--face-display); font-weight: 500; font-size: var(--fluid-small); }

::selection { background: var(--tone-soft); color: var(--tone-ink); }

:focus-visible {
  outline: var(--edge) solid var(--tone-mid);
  outline-offset: 3px;
}