/* ==========================================================================
   Direction A: EVERY ONE  (recommended; tokens.css is a copy of this file)
   Eight billion equal points arranged on the golden angle, with no one at
   the centre. Unbleached paper, carbon ink, one laterite accent: the red
   earth that runs under most of the tropics.

   Swap directions by replacing tokens.css with tokens-b.css or tokens-c.css.
   p31.css reads only the custom properties below; nothing else changes.
   ========================================================================== */

/* Newsreader: variable wght 200-800, opsz 6-72 (Production Type, OFL) */
@font-face {
  font-family: "P31 Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "P31 Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* No Newsreader italic is vendored yet, so the italic of the reading face is
   STIX Two Text Italic, size-matched. Replace with Newsreader Italic when it
   is added to fonts/. */
@font-face {
  font-family: "P31 Newsreader";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/stix-two-text-italic.woff2") format("woff2");
  size-adjust: 104%;
}
@font-face {
  font-family: "P31 Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "P31 Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "P31 Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Identity switches read by p31.css and intro.js */
  --direction: "a";
  --intro-form: seed;
  --show-mark-a: inline-block;
  --show-mark-b: none;
  --show-mark-c: none;

  /* Type */
  --font-display: "P31 Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body: "P31 Newsreader", "Iowan Old Style", Georgia, serif;
  --font-ui: "P31 Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-mono: "P31 Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --body-size: 1.1875rem;        /* 19px on a laptop */
  --body-size-phone: 1.125rem;   /* 18px on a phone */
  --leading: 1.62;
  --body-weight: 400;
  --strong-weight: 620;
  --measure: 36rem;
  --display-weight: 380;
  --display-tracking: -0.018em;
  --display-leading: 1.04;
  --display-transform: none;
  --h2-weight: 480;
  --h3-weight: 560;
  --ui-size: 0.75rem;
  --ui-tracking: 0.06em;
  --ui-transform: uppercase;
  --lead-style: normal;


  /* Ornaments */
  --hr-bg: radial-gradient(circle at center, var(--rule-strong) 0 1.7px, transparent 2.3px) 0 50% / 13px 100% repeat-x;
  --hr-w: 65px;
  --hr-h: 8px;
  --h2-rule: 0;
  --h2-pad: 0;

  /* Shape */
  --radius: 2px;
  --rule-width: 1px;
  --bp-radius: 2px;

  /* Colour: light */
  --paper: #f4f0e8;
  --paper-2: #ebe5d9;
  --paper-3: #e0d8c9;
  --ink: #1a1915;
  --ink-2: #48433a;
  --ink-3: #6e675b;
  --rule: #d5cbb9;
  --rule-strong: #a99f8d;
  --accent: #b23c1c;
  --accent-text: #a5361a;
  --accent-ink: #fff7f0;
  --accent-wash: #f0dccf;
  --link: var(--ink);
  --link-underline: #c9785c;
  --selection: #efc9b5;
  --mark-ink: var(--ink);
  --mark-accent: var(--accent);
  --focus: #b23c1c;

  --bp-bg: var(--paper-2);
  --bp-ink: var(--ink);
  --bp-border: var(--accent);
  --bp-kicker: var(--accent-text);

  --intro-bg: var(--paper);
  --intro-dot: #1a1915;
  --intro-accent: #b23c1c;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12110f;
    --paper-2: #1b1a17;
    --paper-3: #26241f;
    --ink: #ece6da;
    --ink-2: #c3bbab;
    --ink-3: #9a9283;
    --rule: #34302a;
    --rule-strong: #5a5449;
    --accent: #ec7448;
    --accent-text: #f08a63;
    --accent-ink: #1a0c06;
    --accent-wash: #3a2018;
    --link-underline: #b3593a;
    --selection: #5a2a19;
    --focus: #f08a63;
    --intro-dot: #ece6da;
    --intro-accent: #ec7448;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #12110f;
  --paper-2: #1b1a17;
  --paper-3: #26241f;
  --ink: #ece6da;
  --ink-2: #c3bbab;
  --ink-3: #9a9283;
  --rule: #34302a;
  --rule-strong: #5a5449;
  --accent: #ec7448;
  --accent-text: #f08a63;
  --accent-ink: #1a0c06;
  --accent-wash: #3a2018;
  --link-underline: #b3593a;
  --selection: #5a2a19;
  --focus: #f08a63;
  --intro-dot: #ece6da;
  --intro-accent: #ec7448;
  color-scheme: dark;
}