@font-face {
  font-family: "InterVariable";
  src: url("/fonts/inter/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("/fonts/syne/Syne-Bold-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("/fonts/dm-serif/DMSerifDisplay-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #e6e4df;
  --bg-rgb: 230, 228, 223;
  --surface: #eeede9;
  --surface-2: #dddedb;
  --text: #252b33;
  --muted: #4c5560;
  --quiet: #535b65;
  --accent: #98371f;
  --accent-hover: #842b18;
  --ink: #fff;
  --focus: #843116;
  --control-bg: #eeede9;
  --control-hover: #e0e1dd;
  --control-selected: #d5d7d3;
  --control-border: #6e7780;
  --line: rgba(38, 47, 60, 0.12);
  --line-strong: rgba(38, 47, 60, 0.22);
  --shadow-control: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 3px rgba(38, 47, 60, 0.12);
  --shadow-inset: inset 0 2px 3px rgba(38, 47, 60, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.45);
  --shadow-pressed: inset 0 2px 3px rgba(38, 47, 60, 0.18);
  --shadow-card: 0 2px 5px rgba(38, 47, 60, 0.1);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --section-space: clamp(var(--space-16), 8vw, 8rem);
  --gutter: clamp(var(--space-5), 4.5vw, var(--space-16));
  --radius-control: 6px;
  --radius-card: 10px;
  --font: "InterVariable", sans-serif;
  --font-wordmark: "Syne", var(--font);
  --font-feature: "DM Serif Display", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 160ms;
  font-family: var(--font);
  font-optical-sizing: auto;
  font-feature-settings: "liga" 1, "calt" 1;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-8); scrollbar-color: var(--control-border) var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(3rem, 5.7vw, 5.25rem); letter-spacing: -0.04em; }
h2 { font-size: clamp(2rem, 3.3vw, 3rem); letter-spacing: -0.035em; }
h3 { font-size: 1.125rem; letter-spacing: -0.015em; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; text-underline-offset: 0.2em; }
img { display: block; max-width: 100%; height: auto; }
button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
::selection { color: var(--ink); background: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
main:focus { outline: none; }
.icon { display: inline-block; width: 1.125rem; height: 1.125rem; flex: 0 0 auto; vertical-align: middle; }
.page-width { width: min(100%, 87.5rem); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.section-space { padding-block: var(--section-space); }
.skip-link { position: fixed; z-index: 10; top: var(--space-3); left: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); color: var(--ink); background: var(--accent); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.wordmark { font-family: var(--font-wordmark); font-size: 1.375rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 6.5rem; }
.site-header > .wordmark { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-nav { display: flex; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--shadow-control); }
.site-nav a { display: flex; align-items: center; padding: var(--space-2) var(--space-5); min-height: 2.5rem; border-radius: var(--radius-control); font-size: 0.875rem; font-weight: 500; }
.site-nav a[aria-current="page"] { background: var(--control-selected); }
.site-nav a:hover { background: var(--control-hover); }
.site-nav a[aria-current="page"]:hover { background: var(--control-selected); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 3rem; padding: var(--space-3) var(--space-5); border: 1px solid var(--control-border); border-radius: var(--radius-control); color: var(--text); background: var(--control-bg); box-shadow: var(--shadow-control); font-size: 0.9375rem; font-weight: 600; line-height: 1.4; transition: background-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.button > .icon { transform: rotate(-90deg); }
.button:hover { background: var(--control-hover); }
.button:active { box-shadow: var(--shadow-pressed); }
.primary { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.text-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; font-size: 0.9375rem; font-weight: 500; }
.text-link:hover { text-decoration: underline; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); padding-block: var(--space-10); border-top: 1px solid var(--line-strong); }
.site-footer .wordmark { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-footer p { margin-top: var(--space-2); color: var(--quiet); font-size: 0.8125rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--muted); font-size: 0.8125rem; }
.site-footer nav a:hover { text-decoration: underline; }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #1b1b19;
    --bg-rgb: 27, 27, 25;
    --surface: #262623;
    --surface-2: #30302c;
    --text: #eae8e1;
    --muted: #c2c0b8;
    --quiet: #b0ada3;
    --accent: #dc9678;
    --accent-hover: #e9ab8d;
    --ink: #251b16;
    --focus: #efbda5;
    --control-bg: #30302b;
    --control-hover: #3e3d37;
    --control-selected: #49473f;
    --control-border: #807d74;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --shadow-control: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 3px rgba(0, 0, 0, 0.2);
    --shadow-inset: inset 0 2px 3px rgba(0, 0, 0, 0.18);
    --shadow-pressed: inset 0 2px 3px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 3px 10px rgba(0, 0, 0, 0.2);
  }
}

@media (max-width: 1050px) {
  .site-nav a { padding-inline: var(--space-3); }
}

@media (max-width: 760px) {
  .header-action { display: none; }
  .site-header { min-height: 5.5rem; gap: var(--space-3); }
  .site-nav { gap: 0; }
  .site-nav a { padding-inline: var(--space-3); font-size: 0.75rem; }
  .site-header .wordmark { font-size: 1.125rem; }
  .site-footer { align-items: start; }
  .site-footer nav { flex-direction: column; gap: var(--space-1); }
}

@media (max-width: 420px) {
  .site-header { flex-wrap: wrap; gap: 0; padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .site-nav { box-shadow: none; border: 0; background: transparent; }
  .site-nav a { padding-inline: var(--space-2); }
  .site-nav a[aria-current="page"], .site-nav a[aria-current="page"]:hover { background: transparent; box-shadow: inset 0 -2px 0 var(--accent); }
  .site-footer { flex-direction: column; }
  .site-footer nav { flex-direction: row; gap: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

@media (prefers-contrast: more) {
  :root { --muted: var(--text); --quiet: var(--text); --line: var(--control-border); --line-strong: var(--control-border); }
}