/* Dantello's — design tokens, reset, typography.
   Palette: matte black, charcoal, burgundy, antique gold, lime (lime is reserved for "new" and "live"). */

:root {
  --ink: #0e0d0d;          /* page */
  --coal: #161414;         /* raised surface */
  --char: #1f1c1c;         /* inputs, hover */
  --char-2: #2b2727;
  --line: rgba(237, 231, 220, .11);
  --line-strong: rgba(237, 231, 220, .22);
  --bone: #ede7dc;         /* text */
  --mute: #a59e93;         /* secondary text */
  --faint: #7a7469;        /* tertiary text (large or decorative only) */
  --burg: #6b1426;
  --burg-hi: #8c1d37;
  --burg-deep: #35090f;
  --on-burg: #f3ece0;
  --gold: #c9a24b;         /* fills */
  --gold-text: #d4af5c;    /* text on dark */
  --gold-hi: #e4c985;
  --on-gold: #1a1305;
  --lime: #b6f03c;         /* fills */
  --lime-text: #b6f03c;
  --on-lime: #101a00;
  --danger: #ff8a7a;
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);

  --font-display: "Bodoni Moda", "Bodoni 72", "Bodoni MT", Didot, "Playfair Display", Georgia, serif;
  --font-ui: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --side-w: 244px;
  --top-h: 56px;
  --nav-h: 62px;
  --gutter: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --ink: #f4efe6;
  --coal: #ebe4d7;
  --char: #e2d9c9;
  --char-2: #d6cbb8;
  --line: rgba(40, 24, 22, .14);
  --line-strong: rgba(40, 24, 22, .3);
  --bone: #1d1514;
  --mute: #5a5149;
  --faint: #7d7368;
  --gold-text: #7a5a0e;
  --lime-text: #3b6200;
  --danger: #b3261e;
  --shadow: 0 18px 40px -20px rgba(60, 30, 20, .45);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font: 400 15px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--burg); color: var(--on-burg); }

/* Type scale (1.25) — Bodoni for titles and numerals, Instrument Sans for everything you read or press. */
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.05; font-optical-sizing: auto; }
.h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 5vw, 46px); line-height: 1.04; letter-spacing: -0.02em; }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 3vw, 28px); line-height: 1.1; letter-spacing: -0.012em; }
.h3 { font-size: 16px; font-weight: 600; }
.mute { color: var(--mute); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.gold { color: var(--gold-text); }
.num { font-family: var(--font-display); font-weight: 600; font-variant-numeric: lining-nums; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
.prose { max-width: 62ch; line-height: 1.6; }

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