@font-face {
  font-family: "Big Shoulders Display";
  src: url("/fonts/bsd-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Big Shoulders Display";
  src: url("/fonts/bsd-900.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

:root {
  --bg: #0b0b0c;
  --panel: #151517;
  --line: #2a2a2e;
  --text: #e9e7e1;
  --muted: #9b988f;
  --yellow: #ffd400;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { color-scheme: dark; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 var(--body);
}

.wrap { max-width: 680px; margin: 0 auto; padding: 0 16px; }

header.top {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--yellow); text-decoration: none;
  font: 900 26px/1 var(--display); letter-spacing: .04em;
}
.brand svg { width: 28px; height: 28px; flex: none; }

nav a {
  color: var(--muted); text-decoration: none;
  font: 800 16px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  margin-left: 18px;
}
nav a:hover, nav a[aria-current="page"] { color: var(--yellow); }

main { padding: 48px 0 64px; }

h1 {
  font: 900 clamp(48px, 13vw, 88px)/.92 var(--display);
  text-transform: uppercase; letter-spacing: .01em;
  color: var(--yellow); margin: 0 0 20px;
}
h2 {
  font: 800 28px/1.1 var(--display);
  text-transform: uppercase; letter-spacing: .03em;
  margin: 48px 0 10px;
}
h3 {
  font: 800 20px/1.2 var(--display);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 28px 0 6px;
}

p, li { color: var(--text); }
.lead { font-size: 19px; color: var(--muted); margin: 0 0 8px; }
.muted { color: var(--muted); }
a { color: var(--yellow); }
ul { padding-left: 20px; }
li { margin: 4px 0; }

.blocks { display: grid; gap: 12px; margin: 32px 0 0; }
.block {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
}
.block h3 { margin-top: 0; color: var(--muted); }
.block p { margin: 0; }

.block.never { border: 2px solid var(--yellow); }
.block.never h3 {
  font: 900 clamp(34px, 9vw, 48px)/.95 var(--display);
  color: var(--yellow); letter-spacing: .01em; margin-bottom: 12px;
}
.block.never ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 20px; }
.block.never li { break-inside: avoid; font-weight: 600; }

.cta {
  display: inline-block; margin-top: 8px;
  background: var(--yellow); color: #0b0b0c; text-decoration: none;
  font: 900 24px/1 var(--display); letter-spacing: .05em; text-transform: uppercase;
  padding: 16px 24px; border-radius: 8px;
}

details {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}
details:last-of-type { border-bottom: 1px solid var(--line); }
summary {
  cursor: pointer; list-style: none;
  font: 800 21px/1.25 var(--display); text-transform: uppercase; letter-spacing: .04em;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; color: var(--yellow); }
details[open] summary::after { content: "–"; }
details p, details ul { margin: 10px 0 0; }

.hero { text-align: center; padding: 40px 0 8px; }
.hero svg { width: 96px; height: 96px; }
.hero h1 { font-size: clamp(72px, 22vw, 140px); margin: 18px 0 6px; }
.hero .shout {
  font: 900 clamp(28px, 8vw, 44px)/1 var(--display);
  letter-spacing: .06em; margin: 0 0 18px;
}

footer {
  border-top: 1px solid var(--line);
  padding: 24px 0 40px;
  color: var(--muted); font-size: 14px;
}
footer a { color: var(--muted); }

@media (max-width: 420px) {
  nav a { margin-left: 12px; font-size: 15px; }
  .block.never ul { columns: 1; }
}