/* The because.sh look, taken from because.biz: its two faces, and black on white
   or white on black, whichever the system is set to.
   The worker's own pages link this, and a project's web/index.html can too:
     <link rel="stylesheet" href="/because.css"> */

@font-face {
  font-family: "Major Mono Display";
  src: url("/fonts/major-mono-display-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("/fonts/spectral-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("/fonts/spectral-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --fg: #000000;
  /* display face: names, headings and lists. Set lowercase so every letter uses its light small-cap form */
  --font: "Major Mono Display", ui-monospace, Menlo, Consolas, monospace;
  --size: 18px;
  /* content face: descriptions and prose */
  --body-font: "Spectral", Georgia, "Times New Roman", serif;
  --body-size: 19px;
  /* code face: commands to copy. Not the display face, and never lowercased: `curl -fsSL` has to read exactly */
  --code-font: ui-monospace, Menlo, Consolas, monospace;
  --code-size: 15px;
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --bg: #000000; --fg: #ffffff; }
}
@media (max-width: 480px) { :root { --size: 15px; --body-size: 18px; --code-size: 13px; } }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--size);
  line-height: 1.2;
  text-transform: lowercase;
}
/* both faces come in one weight, so nothing is bold */
h1, h2, h3 { font-weight: 400; line-height: 1.1; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }

p {
  font-family: var(--body-font);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.55;
  text-transform: none;
  text-wrap: pretty;
}

pre, code { font-family: var(--code-font); text-transform: none; }
pre { font-size: var(--code-size); line-height: 1.5; overflow-x: auto; }
code { font-size: 0.85em; }
pre code { font-size: inherit; }