:root {
  --ground: #e8dfd0;
  --surface: #dad0bf;
  --surface-2: #cabeab;
  --line: #a79c8a;
  --ink-soft: #534c3f;
  --ink: #2c2821;
  --accent: #923b15;
  --accent-ink: #ffffff;

  --wube-e5c: "Cinzel", "Cinzel Fallback", Georgia, serif;
  --wube-292: 'Crimson Pro', "Crimson Pro Fallback", Garamond, Georgia, serif;
  --wube-883: "JetBrains Mono", "JetBrains Mono Fallback", Consolas, monospace;

  --font-size-root: 18px;
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --text-md: clamp(1.1875rem, 1.12rem + 0.4vw, 1.375rem);
  --text-lg: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  --text-xl: clamp(1.625rem, 1.45rem + 0.9vw, 2rem);
  --text-2xl: clamp(2rem, 1.7rem + 1.4vw, 2.625rem);
  --text-3xl: clamp(2.375rem, 1.95rem + 2.2vw, 3.375rem);
  --text-hero: clamp(2.625rem, 2.1rem + 2.8vw, 4.25rem);

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.62;
  --leading-loose: 1.75;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  --measure-prose: 65ch;
  --measure-wide: 88ch;
  --measure-narrow: 46ch;

  --space-2xs: clamp(0.25rem, 0.22rem + 0.12vw, 0.375rem);
  --space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.6875rem);
  --space-sm: clamp(0.75rem, 0.68rem + 0.35vw, 1rem);
  --space-md: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --space-lg: clamp(1.625rem, 1.4rem + 1vw, 2.25rem);
  --space-xl: clamp(2.25rem, 1.9rem + 1.5vw, 3.25rem);
  --space-2xl: clamp(3.25rem, 2.7rem + 2.4vw, 4.75rem);
  --space-3xl: clamp(4.5rem, 3.8rem + 3.2vw, 6.75rem);

  --ledger-unit: 32px;
  --container-max: 1260px;
  --container-pad: clamp(1rem, 0.75rem + 1.5vw, 2.5rem);

  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 5px;

  --shadow-subtle: 0 1px 2px rgba(44, 40, 33, 0.06), 0 3px 8px rgba(44, 40, 33, 0.04);
  --shadow-card: 0 4px 14px rgba(44, 40, 33, 0.07), 0 1px 3px rgba(44, 40, 33, 0.05);
  --shadow-lift: 0 10px 24px -4px rgba(44, 40, 33, 0.12), 0 2px 6px rgba(44, 40, 33, 0.06);

  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 380ms;

  --ease-ledger: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dock-height: 64px;
}

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

html {
  font-size: var(--font-size-root);
  line-height: var(--leading-normal);
  background-color: var(--ground);
  color: var(--ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}

body {
  min-height: 100vh;
  background-color: var(--ground);
  color: var(--ink);
  font-family: var(--wube-292);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  padding-bottom: calc(var(--dock-height) + env(safe-area-inset-bottom, 0px));
  position: relative;
  overflow-x: hidden;
}

@media (min-width: 980px) {
  body {
    padding-bottom: 0;
  }
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wube-e5c);
  font-weight: 600;
  color: var(--ink);
  line-height: var(--leading-tight);
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

h1 {
  font-size: var(--text-hero);
  letter-spacing: var(--tracking-tight);
  max-width: 24ch;
  margin-bottom: var(--space-sm);
}

h2 {
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  max-width: 32ch;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

h3 {

  font-size: var(--text-xl);
  letter-spacing: var(--tracking-normal);
  max-width: 38ch;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

h5, h6 {
  font-size: var(--text-md);
  font-weight: 600;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-2xs);
}

p {
  max-width: var(--measure-prose);
  margin-bottom: var(--space-md);
  color: var(--ink);
}

p.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--ink);
  max-width: 48ch;
  margin-bottom: var(--space-lg);
}

p.soft, .text-soft {
  color: var(--ink-soft);
}

small, .text-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

strong, b {
  font-weight: 600;
  color: var(--ink);
}

em, i {
  font-style: italic;
}

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}

a:hover {
  color: var(--accent);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

ul, ol {
  max-width: var(--measure-prose);
  padding-left: 1.4em;
  margin-bottom: var(--space-md);
}

li {
  margin-bottom: var(--space-2xs);
}

li::marker {
  color: var(--ink-soft);
}

blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-md);
  margin: var(--space-lg) 0;
  font-style: italic;
  font-size: var(--text-md);
  color: var(--ink);
  max-width: var(--measure-prose);
}

cite {
  display: block;
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--ink-soft);
  margin-top: var(--space-xs);
  letter-spacing: var(--tracking-wide);
}

hr {
  border: 0;
  height: 1px;
  background-color: var(--line);
  margin: var(--space-xl) 0;
}

code, kbd, samp, pre {
  font-family: var(--wube-883);

  font-size: 0.9em;
}

code {
  padding: 0.15em 0.35em;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
}

pre {
  background-color: var(--surface);
  border: 1px solid var(--line);
  padding: var(--space-md);
  overflow-x: auto;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

pre code {
  background: none;
  border: 0;
  padding: 0;
}

figure {
  margin: var(--space-xl) 0;
}

figcaption {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-top: var(--space-xs);
  line-height: var(--leading-snug);
  letter-spacing: 0.01em;
}

.num, .tabular, [data-num] {
  font-family: var(--wube-883);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.site-wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.site-wrap--reading {
  max-width: 820px;
}

.site-wrap--full {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.ledger-canvas {
  position: relative;
  background-color: var(--ground);
}

.ledger-lines-bg {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent calc(var(--ledger-unit) - 1px),
    rgba(167, 156, 138, 0.28) calc(var(--ledger-unit) - 1px),
    rgba(167, 156, 138, 0.28) var(--ledger-unit)
  );
  background-size: 100% var(--ledger-unit);
}

.ledger-box {
  border: 1px solid var(--line);
  background-color: var(--surface);
  padding: var(--space-md);
  position: relative;
}

.ledger-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--accent);
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  fill: currentColor;
}

.icon--sm {
  width: 1rem;
  height: 1rem;
}

.icon--lg {
  width: 1.5rem;
  height: 1.5rem;
}

.icon--xl {
  width: 2rem;
  height: 2rem;
}

.skip-link {
  position: absolute;
  top: -9999px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent);
  color: var(--accent-ink);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-xs);
  font-family: var(--wube-883);
  font-size: var(--text-sm);
  z-index: 10000;
  text-decoration: none;
  font-weight: 500;
  box-shadow: var(--shadow-lift);
}

.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

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