:root {
  --paper: #F3ECDF;
  --paper-raised: #F9F4EB;
  --paper-sunk: #EADFCC;
  --paper-deep: #E0D2BB;
  --ink: #1F1A15;
  --ink-2: #5E5247;
  --ink-3: #85786B;
  --line: #D6C7B0;
  --line-strong: var(--ink);
  --on-ink: #F3ECDF;
  --accent: #B04722;
  --accent-hover: #963A1A;
  --accent-ink: #9C3C1B;
  --accent-tint: #F1D9CB;
  --on-accent: #FBF5EC;

  --fire: #B04722;
  --fire-tint: #F1D5C6;
  --earth: #6F7A3E; --earth-tint: #E3E2C6;
  --air: #B57A12;
  --air-tint: #F2E0B4;
  --water: #2F5D7C; --water-tint: #D3DEE3;

  --wax: #8F2417;
  --wax-hi: #B8432F;
  --success: #4E6B2E;
  --danger: #A32D22;
  --danger-tint: #F5D9D2;
  --focus: #2F5D7C;
  --mark: rgba(201, 138, 27, .28);
  --wheel-ink: var(--ink);
  --wheel-muted: var(--ink-2);
  --wheel-accent: var(--accent);
  --wheel-hard: var(--accent);
  --wheel-soft: var(--water);
  --wheel-riso: var(--accent);
  --wheel-fire: var(--fire); --wheel-earth: var(--earth); --wheel-air: var(--air); --wheel-water: var(--water);

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-ui: Manrope, "Helvetica Neue", Arial, sans-serif;
  --font-hand: Caveat, "Segoe Print", cursive;
  --font-glyph: "Noto Sans Symbols", "Noto Sans Symbols 2", serif;

  --fs-display: clamp(46px, 5.4vw + 25px, 88px);
  --fs-h1: clamp(40px, 3.4vw + 27px, 64px);
  --fs-h2: clamp(32px, 1.6vw + 26px, 46px);
  --fs-h3: clamp(25px, .7vw + 22px, 30px);
  --fs-h4: 21px;
  --fs-lead: clamp(18px, .3vw + 17px, 21px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-meta: 13px;
  --fs-tiny: 12px;
  --lh-tight: 1;
  --lh-head: 1.05;
  --lh-body: 1.6;
  --tracking-caps: .06em;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-18: 72px; --s-24: 96px;
  --gutter: 20px;
  --section-y: clamp(56px, 6vw + 32px, 112px);
  --maxw: 1160px;
  --measure: 62ch;

  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  --sh-1: 0 1px 0 rgba(31, 26, 21, .06), 0 6px 16px -10px rgba(70, 40, 20, .35);
  --sh-2: 0 1px 0 rgba(31, 26, 21, .06), 0 18px 40px -22px rgba(70, 40, 20, .45);
  --sh-sheet: 0 -24px 60px -24px rgba(31, 26, 21, .45);
  --sh-press: 3px 3px 0 var(--ink);

  --dur-fast: 150ms; --dur: 260ms; --dur-slow: 600ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.4, .5, 1);

  --grain-opacity: .5;
  --grain-blend: multiply;
  --engraving-filter: grayscale(1) contrast(1.35) brightness(1.05);
  --engraving-blend: multiply;

  --z-header: 20; --z-sheet: 60; --z-grain: 80;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1A1612; --paper-raised: #24201A; --paper-sunk: #14110D; --paper-deep: #2E2821;
    --ink: #F0E6D6; --ink-2: #C3B6A4; --ink-3: #978A7A; --line: #3B332A; --on-ink: #1A1612;
    --accent: #D86A43; --accent-hover: #E57D57; --accent-ink: #EE9670; --accent-tint: #3A2419; --on-accent: #1A1612;
    --fire: #E07A52; --fire-tint: #3A2419; --earth: #A9B474; --earth-tint: #2B2C1B;
    --air: #E3AE4C; --air-tint: #382B14; --water: #86AECB; --water-tint: #1C2B36;
    --wax: #B8432F; --wax-hi: #D86A4E; --success: #A9B474; --danger: #EE7E6B; --danger-tint: #3A1E19;
    --focus: #86AECB; --mark: rgba(227, 174, 76, .3);
    --sh-1: 0 1px 0 rgba(0, 0, 0, .3), 0 6px 16px -10px rgba(0, 0, 0, .7);
    --sh-2: 0 1px 0 rgba(0, 0, 0, .3), 0 18px 40px -22px rgba(0, 0, 0, .8);
    --sh-sheet: 0 -24px 60px -24px rgba(0, 0, 0, .8);
    --grain-opacity: .35; --grain-blend: screen;
    --engraving-filter: grayscale(1) invert(1) contrast(1.2) brightness(.9);
    --engraving-blend: screen;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1A1612; --paper-raised: #24201A; --paper-sunk: #14110D; --paper-deep: #2E2821;
  --ink: #F0E6D6; --ink-2: #C3B6A4; --ink-3: #978A7A; --line: #3B332A; --on-ink: #1A1612;
  --accent: #D86A43; --accent-hover: #E57D57; --accent-ink: #EE9670; --accent-tint: #3A2419; --on-accent: #1A1612;
  --fire: #E07A52; --fire-tint: #3A2419; --earth: #A9B474; --earth-tint: #2B2C1B;
  --air: #E3AE4C; --air-tint: #382B14; --water: #86AECB; --water-tint: #1C2B36;
  --wax: #B8432F; --wax-hi: #D86A4E; --success: #A9B474; --danger: #EE7E6B; --danger-tint: #3A1E19;
  --focus: #86AECB; --mark: rgba(227, 174, 76, .3);
  --sh-1: 0 1px 0 rgba(0, 0, 0, .3), 0 6px 16px -10px rgba(0, 0, 0, .7);
  --sh-2: 0 1px 0 rgba(0, 0, 0, .3), 0 18px 40px -22px rgba(0, 0, 0, .8);
  --sh-sheet: 0 -24px 60px -24px rgba(0, 0, 0, .8);
  --grain-opacity: .35; --grain-blend: screen;
  --engraving-filter: grayscale(1) invert(1) contrast(1.2) brightness(.9);
  --engraving-blend: screen;
  color-scheme: dark;
}

@media (min-width: 900px) {
  :root { --gutter: 40px; }
}