@font-face {
  font-family: Studio Display;
  src: url("/assets/fonts/Unbounded-Latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: Studio Sans;
  src: url("/assets/fonts/IBMPlexSans-Latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: Studio Hand;
  src: url("/assets/fonts/ReenieBeanie-Latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
/* Local stand-ins sized to the real faces, as on the rest of the site. */
@font-face {
  font-family: Studio Display Fallback;
  src: local("Arial Black"), local("ArialMT-Black"), local("Arial Bold"),
    local("Arial-BoldMT");
  font-weight: 400 900;
  size-adjust: 117%;
  ascent-override: 85%;
  descent-override: 21%;
  line-gap-override: 0%;
}
@font-face {
  font-family: Studio Sans Fallback;
  src: local("Arial"), local("ArialMT");
  font-weight: 400 600;
  size-adjust: 101%;
  ascent-override: 101.5%;
  descent-override: 27.2%;
  line-gap-override: 0%;
}

/* Shared by every page: white surfaces, ink, and one ballpoint blue. */
:root {
  --paper: #FFFFFF;
  --porcelain: #F7F7F4;
  --chip: #EDEDE8;
  --divider: #EDEDE8;
  --button-text: #FFFFFF;
  --button-hover: #2a2d35;
  --quiet-hover: #15171c0a;
  --error: #b3261e;
  --pen-wash: #2648cf10;
  --pen-line: #2448c84d;
  --card-highlight: #FFFFFF;
  --ink: #1B1C18;
  --ink-soft: #5E5F58;
  --line: #E2E2DC;
  --cobalt: var(--pen);
  --glaze: var(--pen);
  --orange: #ff823d;
  --orange-ink: #B24B13;
  --display: "Studio Display", "Studio Display Fallback", Arial, sans-serif;
  --sans: "Studio Sans", "Studio Sans Fallback", Arial, sans-serif;
  --hand: "Studio Hand", "Bradley Hand", "Segoe Print", cursive;
  /* Ballpoint blue: the ink for links, doodles and notes. */
  --pen: #2648cf;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-feedback: 160ms;
  --motion-press: 80ms;
  --motion-disclosure: 240ms;
  --press-scale: .97;
  --drop: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: light;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

/* The early theme script selects a saved preference before styles load.
   With scripts disabled or unavailable, appearance still follows the device. */
:root[data-theme="dark"] {
  --paper: #18191B;
  --porcelain: #222326;
  --chip: #2D2F33;
  --divider: #35373C;
  --ink: #F2F2ED;
  --ink-soft: #B4B6B0;
  --line: #42444A;
  --button-text: #18191B;
  --button-hover: #DADCD6;
  --quiet-hover: #FFFFFF0D;
  --error: #FFABA4;
  --orange-ink: #FFAB79;
  --pen: #9BAEFF;
  --pen-wash: #9BAEFF16;
  --pen-line: #9BAEFF66;
  --card-highlight: #42444A;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #18191B;
    --porcelain: #222326;
    --chip: #2D2F33;
    --divider: #35373C;
    --ink: #F2F2ED;
    --ink-soft: #B4B6B0;
    --line: #42444A;
    --button-text: #18191B;
    --button-hover: #DADCD6;
    --quiet-hover: #FFFFFF0D;
    --error: #FFABA4;
    --orange-ink: #FFAB79;
    --pen: #9BAEFF;
    --pen-wash: #9BAEFF16;
    --pen-line: #9BAEFF66;
    --card-highlight: #42444A;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: hidden;
}
img,
svg,
canvas {
  display: block;
}
a {
  color: inherit;
}
button,
input {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--pen);
  outline-offset: 3px;
}
h1,
h2,
p {
  margin: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 60;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--button-text);
}
.skip-link:focus {
  top: 16px;
}

/* Handwritten margin notes */
.note {
  margin: 0;
  color: var(--pen);
  font-family: var(--sans);
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: 0.01em;
}
mark.ink {
  position: relative;
  background: none;
  color: inherit;
}
mark.ink.is-plain {
  text-decoration: underline 2px var(--pen);
  text-underline-offset: 5px;
  text-decoration-skip-ink: auto;
}
mark.ink > svg {
  position: absolute;
  left: -2%;
  bottom: -0.32em;
  width: 104%;
  height: 0.5em;
  overflow: visible;
  pointer-events: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.button-ink {
  background: var(--ink);
  color: var(--button-text);
}
.button-ink:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--button-hover);
}
.button-quiet {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}
.button-quiet:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--quiet-hover);
}
.button-paper {
  background: var(--porcelain);
  color: var(--ink);
}
.text-button {
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--cobalt);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}
.text-button:hover:not(:disabled):not([aria-disabled="true"]) {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.button,
.text-button {
  transition-property: color, background-color, border-color, transform;
  transition-duration: var(--motion-feedback);
  transition-timing-function: var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .button:active:not(:disabled):not([aria-disabled="true"]),
  .text-button:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(var(--press-scale));
    transition-duration: var(--motion-feedback), var(--motion-feedback),
      var(--motion-feedback), var(--motion-press);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}