/* A wartime recruiting poster: flat red, black, and paper, with one huge word. */
:root {
  --red: #D7261E;
  --ink: #111111;
  --paper: #F6EBD3;
  --line: #CDBE9F;
  --dim: #55493A;
  --display: 'Anton', Impact, sans-serif;
  --body: 'Archivo', system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.45 var(--body); }
h1, h2, p { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 1.02; }
a { color: inherit; }
button, input { font: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.hero { background: var(--red); padding: 28px 16px 36px; }
.hero-inner, .wrap { max-width: 680px; margin: 0 auto; }
.mast { font: 22px var(--display); color: var(--paper); text-decoration: none; text-transform: uppercase; letter-spacing: .02em; }
.hero h1 { font-size: clamp(64px, 19vw, 132px); margin-top: 18px; }
.hero h1 span { display: block; white-space: nowrap; }
.hero .sub { color: var(--paper); font: clamp(22px, 5.2vw, 34px)/1.15 var(--display); text-transform: uppercase; margin-top: 14px; }
.hero .plain { color: #fff; margin-top: 14px; font-weight: 700; }
.join { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 22px; }
.join label { color: #fff; font-weight: 700; }
.join-row { display: flex; gap: 8px; }
.join input { flex: 1; min-width: 0; height: 58px; padding: 0 14px; border: 3px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font-size: 22px; font-weight: 700; }
.btn { min-height: 58px; padding: 8px 22px; border: 3px solid var(--ink); background: var(--ink); color: var(--paper); font: 24px var(--display); text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.btn.light { background: transparent; color: var(--ink); }
.btn.full { width: 100%; }
.btn:disabled { background: transparent; color: var(--ink); cursor: default; opacity: .75; }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; }
.suggest button { min-height: 44px; padding: 4px 14px; background: var(--paper); border: 2px solid var(--ink); cursor: pointer; font-weight: 700; }
.error { font-weight: 700; color: #fff; }
.wrap { max-width: 712px; padding: 28px 16px 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; color: var(--paper); margin-top: 22px; }
.stats dt { font-size: 14px; font-weight: 700; }
.stats dd { margin: 0; font: clamp(30px, 8vw, 52px)/1 var(--display); color: var(--ink); }
.rally { display: grid; gap: 10px; margin-top: 22px; }
.rally .btn { min-height: 76px; font-size: 32px; }
.note { font-weight: 700; color: #fff; }
.share { display: grid; gap: 10px; }
.share h2 { font-size: 34px; }
.section-title { font-size: 36px; margin-bottom: 10px; }
ol.board { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
ol.board li { counter-increment: rank; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 2px solid var(--line); }
ol.board li::before { content: counter(rank); font: 26px var(--display); color: var(--red); }
ol.board a { font: 26px var(--display); text-transform: uppercase; text-decoration: none; overflow-wrap: anywhere; }
ol.board a:hover { text-decoration: underline; }
ol.board span { font-weight: 700; font-variant-numeric: tabular-nums; }
.empty { color: var(--dim); }
.rules { color: var(--dim); font-size: 15px; display: grid; gap: 6px; }
.link { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; color: inherit; min-height: 44px; }