:root {
  --paper-0: #fffef8;
  --paper-100: #fbf8ea;
  --paper-200: #f3edda;
  --paper-300: #e8dfc7;
  --ink-900: #23211b;
  --ink-700: #454238;
  --ink-500: #686455;
  --clover-900: #173e30;
  --clover-800: #245744;
  --clover-700: #2d6a4f;
  --clover-100: #e4efe6;
  --page-bg: var(--paper-200);
  --header-bg: rgba(255, 254, 248, .94);
  --footer-bg: var(--paper-300);
  --card-bg: var(--paper-0);
  --heading: var(--clover-900);
  --text-body: var(--ink-900);
  --strong: var(--clover-900);
  --muted: var(--ink-500);
  --link: var(--clover-800);
  --action: var(--clover-700);
  --on-action: var(--paper-0);
  --focus: var(--clover-900);
  --focus-soft: rgba(45, 106, 79, .22);
  --border: #cfc5aa;
  --hover-bg: var(--clover-100);
  --radius-card: 10px;
  --radius-small: 6px;
  --shadow-soft: 0 4px 0 rgba(35, 33, 27, .12);
  --heading-font: var(--font-gothic);
  --h2-padding: 10px 0 10px 18px;
  --h2-border: 0 0 0 6px var(--clover-700);
  --h2-radius: 3px;
  --h2-bg: transparent;
  --callout-border: 1px solid #cfc5aa;
  --callout-bg: var(--paper-0);
  --callout-heading: var(--clover-800);
  --callout-shadow: 0 4px 0 rgba(35, 33, 27, .10);
  --code-bg: #292c28;
  --code-text: #f8f3df;
  --code-border: #17221c;
  --code-inline-bg: var(--paper-100);
  --code-button-bg: #f8f3df;
  --code-button-hover: #e4efe6;
  --code-button-border: #9bb2a3;
  --code-button-text: var(--clover-900);
  --table-head-bg: var(--paper-300);
  --next-bg: var(--clover-100);
}

body {
  font-family: var(--font-gothic);
  background-color: var(--paper-200);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(35, 33, 27, .035) 31px 32px);
}
.site-header { border-top: 6px solid var(--clover-700); }
.article { padding: clamp(24px, 4vw, 48px); border-radius: 10px; background: var(--paper-0); box-shadow: 0 5px 0 rgba(35, 33, 27, .13); }
.toc-title, figcaption { font-family: var(--font-note); }
.callout { border-left: 7px solid var(--clover-700); border-radius: 3px 10px 10px 3px; }
.callout-warning { border-left-color: #9a6418; }
.callout-note { border-left-color: #69796e; }
.next-card { box-shadow: 0 4px 0 var(--clover-900); }

@media (max-width: 820px) {
  .article { padding: clamp(18px, 5vw, 32px); }
}
@media (max-width: 420px) {
  .article { padding-inline: 16px; }
}