/* ============================================================
   LAYER 2 — GENERIC + ELEMENTS
   Reset, page canvas and unclassed HTML element defaults.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background-color: var(--c-page);
  /* low-contrast geometric motif: the diamond taken from the site mark */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 22 48 36 36 50 24 36Z' fill='none' stroke='%2314141a' stroke-opacity='0.05' stroke-width='1'/%3E%3Cpath d='M0 22 12 36 0 50M72 22 60 36 72 50' fill='none' stroke='%2314141a' stroke-opacity='0.035' stroke-width='1'/%3E%3C/svg%3E");
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: 800;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 700; }

p { margin: 0 0 var(--sp-4); max-width: 72ch; }

a {
  color: var(--c-accent);
  font-weight: 700;
  text-decoration: none;
}

a:hover { color: var(--c-accent-deep); }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

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

strong { font-weight: 800; }

small { font-size: var(--fs-small); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: var(--c-band);
  border-radius: 4px;
  padding: 1px 5px;
}

hr {
  border: 0;
  border-top: var(--hairline);
  margin: var(--sp-7) 0;
}

ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }

li { margin-bottom: var(--sp-2); max-width: 70ch; }

table { border-collapse: collapse; width: 100%; }

figure { margin: 0; }

::selection { background: var(--c-accent); color: #fff; }