:root {
  --ink: #111111;
  --paper: #F3EEE4;
  --field: #E8571E;
  --muted: #b9b3a8;
  --rule: #2a2a2a;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 18px/1.55 "Barlow Semi Condensed", system-ui, sans-serif;
}
a { color: var(--field); text-underline-offset: 3px; }
a:hover { color: var(--paper); }
h1, h2 { font-family: "Big Shoulders Display", Impact, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; }

.bar { padding: 16px; border-bottom: 1px solid var(--rule); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--paper); text-decoration: none; font-weight: 600; }
.brand img { border-radius: 8px; }

.doc { max-width: 720px; margin: 0 auto; padding: 32px 16px 48px; }
.doc h1 { font-size: 52px; margin: 4px 0 24px; }
.doc h2 { font-size: 28px; margin: 36px 0 8px; color: var(--field); }
.doc ul { padding-left: 22px; }
.doc li { margin: 4px 0; }
.eyebrow { margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: 14px; font-weight: 600; }

.foot { max-width: 720px; margin: 0 auto; padding: 24px 16px 40px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 15px; }

.home { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.hero { text-align: center; padding: 48px 16px; }
.hero .icon { border-radius: 32px; }
.hero h1 { font-size: clamp(44px, 11vw, 88px); margin: 24px 0 8px; }
.tag { margin: 0; color: var(--field); font-family: "Big Shoulders Display", Impact, sans-serif; font-weight: 800; font-size: 28px; text-transform: uppercase; }
.sub { color: var(--muted); margin: 8px 0 28px; }
.links { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: center; }
.links a { font-weight: 600; }