:root {
  --black: #0E0F11;
  --black-2: #15171B;
  --black-3: #1E2126;
  --line: #2C3036;
  --cream: #EDE6D6;
  --cream-2: #F5F0E4;
  --muted: #A8A090;
  --amber: #E3A53B;
  --amber-2: #F0B95A;
  --red: #C8312B;
  --red-text: #E5564F;
  --red-ink: #A82822;
  --kraft: #C9A66B;
  --kraft-2: #D6B67F;
  --kraft-ink: #3A2F1C;
  --ink: #1A1B1F;
  --ok: #7FB77E;
  --font-title: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --font-type: 'Special Elite', 'Courier New', monospace;
  --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --header-h: 64px;
  --container: 1120px;
  --gutter: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

main { flex: 1; padding-top: var(--header-h); }

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: var(--amber); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--amber-2); }

h1, h2, h3, h4 {
  margin: 0 0 .4em;
  font-family: var(--font-title);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: .02em;
}
h1 { font-size: clamp(2.6rem, 9vw, 4.6rem); }
h2 { font-size: clamp(2rem, 6vw, 3rem); }
h3 { font-size: clamp(1.5rem, 4vw, 1.9rem); }
h4 { font-size: 1.3rem; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
hr { border: 0; border-top: 1px dashed var(--line); margin: 2rem 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--amber); color: var(--black); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.section + .section { padding-top: 0; }

.section-head { margin-bottom: 1.5rem; }
.section-head .kicker { margin-bottom: .35rem; }
.section-head p { color: var(--muted); max-width: 60ch; margin: 0; }
.section-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; }
.section-head--row > div { min-width: 0; }
.section-head h2 { margin-bottom: .2rem; }

.kicker {
  display: inline-block;
  font-family: var(--font-type);
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber);
}

.wordmark { font-family: var(--font-title); letter-spacing: .04em; white-space: nowrap; }
.wordmark .list, .accent { color: var(--amber); }

.muted { color: var(--muted); }
.small { font-size: .875rem; }
.typed { font-family: var(--font-type); letter-spacing: .02em; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 200;
  padding: .6rem 1rem;
  background: var(--amber);
  color: var(--black);
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: 8px; color: var(--black); }

.page-hero {
  padding-block: clamp(2rem, 7vw, 4rem) clamp(1.25rem, 4vw, 2rem);
  border-bottom: 1px dashed var(--line);
  background:
    radial-gradient(1200px 300px at 10% -10%, rgba(227, 165, 59, .10), transparent 60%),
    var(--black);
}
.page-hero h1 { margin-bottom: .3rem; }
.page-hero p { color: var(--muted); max-width: 62ch; margin: 0; }
.page-hero .kicker { margin-bottom: .5rem; }

[hidden] { display: none !important; }

@media (min-width: 720px) {
  :root { --gutter: 24px; --header-h: 72px; }
}

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

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 1.25rem; }
.text-center { text-align: center; }
.narrow { max-width: 720px; }
.stack { display: grid; gap: 2rem; }
.skeleton--tall { min-height: 320px; }