:root {
  color-scheme: dark;
  --asphalt: #10100f;
  --surface: #1e1d1b;
  --hairline: rgba(255, 255, 255, 0.1);
  --bone: #f2ede0;
  --bone-2: rgba(242, 237, 224, 0.72);
  --bone-3: rgba(242, 237, 224, 0.45);
  --red: #e8241f;
  --hazard: #ffd100;
  --paper: #f6eedd;
  --ink: #121210;
  --f-stencil: "Big Shoulders Stencil Display", Impact, "Arial Narrow", sans-serif;
  --f-marker: "Permanent Marker", "Marker Felt", cursive;
  --f-mono: "Courier Prime", "Courier New", ui-monospace, monospace;
  --f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --asphalt: #e2e0da;
    --surface: #d8d5cd;
    --hairline: rgba(20, 18, 14, 0.14);
    --bone: #171613;
    --bone-2: rgba(23, 22, 19, 0.78);
    --bone-3: rgba(23, 22, 19, 0.55);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --asphalt: #e2e0da;
  --surface: #d8d5cd;
  --hairline: rgba(20, 18, 14, 0.14);
  --bone: #171613;
  --bone-2: rgba(23, 22, 19, 0.78);
  --bone-3: rgba(23, 22, 19, 0.55);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--asphalt);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.hazard { height: 10px; background: repeating-linear-gradient(-45deg, var(--hazard) 0 12px, var(--ink) 12px 24px); }
.wrap { max-width: 760px; margin: 0 auto; padding-inline: 16px; }
header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; border-bottom: 1px solid var(--hairline); }
.logo { display: flex; align-items: center; gap: 10px; color: var(--bone); text-decoration: none; }
.logo-mark {
  width: 26px; height: 34px; background: var(--paper); position: relative; transform: rotate(-6deg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 87.5% 92%, 75% 100%, 62.5% 92%, 50% 100%, 37.5% 92%, 25% 100%, 12.5% 92%, 0 100%);
}
.logo-mark::before { content: ""; position: absolute; left: 5px; right: 5px; top: 8px; height: 2px; background: var(--ink); box-shadow: 0 6px 0 var(--ink), 0 12px 0 var(--ink); }
.logo-word { font-family: var(--f-stencil); font-weight: 900; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; }
header nav { display: flex; gap: 18px; font-family: var(--f-mono); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
header nav a { color: var(--bone-2); text-decoration: none; }
header nav a[aria-current="page"], header nav a:hover { color: var(--bone); }
main { padding-block: 48px 64px; }
h1 { font-family: var(--f-stencil); font-weight: 900; font-size: clamp(44px, 10vw, 76px); line-height: .95; text-transform: uppercase; margin: 0; }
.tag { font-family: var(--f-marker); color: var(--red); font-size: 20px; transform: rotate(-3deg); display: inline-block; margin: 8px 0 0; }
.meta { font-family: var(--f-mono); font-size: 14px; color: var(--bone-3); margin: 18px 0 0; }
.summary {
  background: var(--paper); color: var(--ink); font-family: var(--f-mono); font-size: 15px;
  padding: 26px 22px; margin: 36px 0 12px; transform: rotate(-.6deg);
  clip-path: polygon(0 8px, 3% 0, 6% 8px, 9% 0, 12% 8px, 15% 0, 18% 8px, 21% 0, 24% 8px, 27% 0, 30% 8px, 33% 0, 36% 8px, 39% 0, 42% 8px, 45% 0, 48% 8px, 51% 0, 54% 8px, 57% 0, 60% 8px, 63% 0, 66% 8px, 69% 0, 72% 8px, 75% 0, 78% 8px, 81% 0, 84% 8px, 87% 0, 90% 8px, 93% 0, 96% 8px, 100% 0, 100% 100%, 0 100%);
}
.summary h2 { font-family: var(--f-mono); font-size: 15px; text-transform: uppercase; letter-spacing: .1em; text-align: center; margin: 4px 0 14px; }
.summary ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.summary li { display: grid; grid-template-columns: 22px minmax(0, 1fr); color: var(--ink); margin: 0; }
.summary li::before { content: "✓"; font-weight: 700; }
h2 { font-family: var(--f-stencil); font-weight: 900; font-size: 30px; text-transform: uppercase; letter-spacing: .02em; margin: 44px 0 8px; }
h3 { font-size: 18px; margin: 26px 0 4px; }
p, li { color: var(--bone-2); }
b, strong { color: var(--bone); }
a { color: var(--bone); text-decoration-color: var(--red); text-underline-offset: 3px; }
ul { padding-left: 20px; }
li { margin: 6px 0; }
.contact { margin-top: 36px; padding: 20px; border: 1px dashed var(--bone-3); font-family: var(--f-mono); }
footer { border-top: 1px solid var(--hairline); padding-block: 28px; font-family: var(--f-mono); font-size: 13px; color: var(--bone-3); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; }
footer a { color: var(--bone-2); }