/* The ink-wash cookbook, on paper: tokens from packages/shared/src/palette.ts. */
:root {
  --paper: #fffdf9;
  --ink: #231e1a;
  --ink-soft: #5f574f;
  --ink-faint: #a39a8f;
  --sepia: #8c6b52;
  --hairline: #eae2d6;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font: 17px/1.6 "EB Garamond", Georgia, serif;
}
main { max-width: 640px; margin: 0 auto; padding: 56px 16px 96px; }
a { color: var(--ink); text-decoration-color: var(--hairline); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--sepia); }
.eyebrow {
  font: 600 11px/1.4 -apple-system, system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sepia);
  margin: 0 0 8px;
}
.eyebrow a { color: inherit; text-decoration: none; }
h1 { font-weight: 400; font-size: 40px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
h2 { font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--ink); margin: 40px 0 8px; }
.dek { font-style: italic; color: var(--sepia); margin: 8px 0 0; }
strong { font-weight: 500; color: var(--ink); }
ul { padding-left: 20px; }
li { margin: 6px 0; }
li::marker { color: var(--sepia); }
.ornament { display: flex; align-items: center; gap: 10px; margin: 32px 0; }
.ornament span { flex: 1; height: 1px; background: var(--hairline); }
.ornament i { width: 6px; height: 6px; background: var(--sepia); transform: rotate(45deg); }
.center { text-align: center; }
@media (max-width: 480px) {
  main { padding-top: 40px; }
  h1 { font-size: 34px; }
}