/* Layer C of the CUBE order: the page skeleton. The box-sizing reset, the two
   self-hosted faces, and the element-level defaults every block inherits from.
   Nothing here names a component; a rule that needs a class belongs in a
   block file. */

/* Both faces are served from this binary rather than from Google Fonts. The
   project already vendors HTMX for the same reason: a page must not depend on
   a third party to render, and a visitor's address must not reach one to read
   their own dashboard. Latin subset only, which is what French needs. */
@font-face {
  font-family: "Instrument Sans";
  src: url("/static/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("/static/newsreader-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Headings carry the serif. The contrast against the sans body is most of the
   identity of this direction, so it is applied once here rather than per page. */
h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

h1 { font-size: 2.125rem; }
h2 { font-size: 1.5rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}