:root {
  --background: oklch(97.5% .008 85);
  --foreground: oklch(20% .01 60);
  --card: oklch(99% .005 85);
  --secondary: oklch(94% .012 85);
  --muted-foreground: oklch(45% .012 60);
  --accent: oklch(78% .15 75);
  --accent-foreground: oklch(20% .01 60);
  --border: oklch(85% .012 75);
  --font-mono: "IBM Plex Mono", monospace;
  --font-display: "Archivo", sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --ease-out-snap: cubic-bezier(.23,1,.32,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-serif);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }
.font-serif { font-family: var(--font-serif); }

.kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted-foreground);
  font-size: .75rem;
  font-weight: 500;
}

.marker {
  white-space: nowrap;
  position: relative;
}
.marker::before {
  content: "";
  background: var(--accent);
  z-index: -1;
  opacity: .9;
  position: absolute;
  inset: .08em -.15em -.02em -.1em;
  transform: skew(-6deg) rotate(-.5deg);
}

.underline-marker {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: .15em;
  text-decoration-skip-ink: none;
  text-decoration-thickness: .18em;
}

.rule-heavy { border-top: 2px solid var(--foreground); }

.press { transition: transform .14s var(--ease-out-snap); }
.press:active { transform: scale(.97); }

.grain {
  position: relative;
}
.grain::after {
  content: "";
  pointer-events: none;
  z-index: 60;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  position: fixed;
  inset: 0;
}

.fade-up {
  opacity: 0;
  transition: opacity .45s var(--ease-out-snap), transform .45s var(--ease-out-snap);
  transform: translateY(12px);
}
.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] summary .faq-icon { transform: rotate(45deg); }

::selection { background: var(--accent); color: var(--accent-foreground); }