@import "tailwindcss";

:root {
  --ink: #12100e;
  --ink-raised: #1b1814;
  --paper: #f4efe4;
  --paper-dim: #e4dccb;
  --copper: #c9843a;
  --copper-deep: #a86b2a;
  --mute: #9a9184;
  --mute-strong: #c9c1b3;
  --line: rgba(244, 239, 228, 0.12);
  --line-strong: rgba(244, 239, 228, 0.22);
}

@theme inline {
  --color-ink: var(--ink);
  --color-ink-raised: var(--ink-raised);
  --color-paper: var(--paper);
  --color-paper-dim: var(--paper-dim);
  --color-copper: var(--copper);
  --color-copper-deep: var(--copper-deep);
  --color-mute: var(--mute);
  --color-mute-strong: var(--mute-strong);
  --color-line: var(--line);
  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  --font-serif: var(--font-newsreader), "Iowan Old Style", "Palatino Linotype", serif;
  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(201, 132, 58, 0.35);
  color: var(--paper);
}

.site-shell {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
}

.site-shell::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(201, 132, 58, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(244, 239, 228, 0.03), transparent 28%);
  z-index: -2;
}

.site-shell::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  opacity: 0.035;
  z-index: -1;
}

.rule {
  height: 1px;
  background: var(--line);
}

.kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
}

.display {
  font-family: var(--font-serif);
  font-weight: 450;
  letter-spacing: -0.035em;
  line-height: 0.96;
}

.link-quiet {
  color: var(--mute-strong);
  transition: color 160ms ease;
}

.link-quiet:hover {
  color: var(--paper);
}

.honeypot {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}