/* Layout: a soot-black prison-file opening, then the series as entries in a county ledger on worn paper, then the warning label and the call to read. */
@font-face { font-family: "Stencil"; font-weight: 700; font-display: swap; src: url(../fonts/big-shoulders-stencil-display-latin-700-normal.woff2) format("woff2") }
@font-face { font-family: "Stencil"; font-weight: 900; font-display: swap; src: url(../fonts/big-shoulders-stencil-display-latin-900-normal.woff2) format("woff2") }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2") }
@font-face { font-family: "Plex Mono"; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2") }
@font-face { font-family: "Serif4"; font-weight: 400; font-display: swap; src: url(../fonts/source-serif-4-latin-400-normal.woff2) format("woff2") }
@font-face { font-family: "Serif4"; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/source-serif-4-latin-400-italic.woff2) format("woff2") }
@font-face { font-family: "Serif4"; font-weight: 600; font-display: swap; src: url(../fonts/source-serif-4-latin-600-normal.woff2) format("woff2") }

:root {
  /* one fixed look, chosen on purpose: the covers' soot and blood, and the county's ledger paper */
  --soot: #151412;
  --ash: #24221f;
  --smoke: #a39b8e;
  --bone: #ebe4d4;
  --paper: #e4dac4;
  --ink: #23201b;
  --rule: #c8bba0;
  --blood: #b3261e;
  --blood-hi: #d63a2f;
  --display: "Stencil", "Arial Narrow", Impact, sans-serif;
  --mono: "Plex Mono", ui-monospace, "Courier New", monospace;
  --serif: "Serif4", Georgia, "Times New Roman", serif;
  color-scheme: dark;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } * { transition: none !important } }
body { margin: 0; background: var(--soot); color: var(--bone); font: 400 18px/1.62 var(--serif); -webkit-font-smoothing: antialiased }
img { max-width: 100%; display: block }
a { color: inherit }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .95; letter-spacing: .01em; text-wrap: balance }
p { margin: 0 }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)) }
.label { font: 600 12px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase }
:focus-visible { outline: 3px solid var(--blood-hi); outline-offset: 3px }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; font: 900 21px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border: 2px solid var(--blood); background: var(--blood); color: #fff; transition: background .15s, transform .15s }
.btn:hover { background: var(--blood-hi); border-color: var(--blood-hi); transform: translateY(-1px) }
.btn.ghost { background: transparent; color: var(--bone); border-color: rgba(235,228,212,.35) }
.btn.ghost:hover { border-color: var(--bone); background: transparent }

/* top bar */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--soot) }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: rgba(21,20,18,.92); backdrop-filter: blur(8px); border-bottom: 1px solid #2f2c28 }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px }
.mark { display: flex; align-items: baseline; gap: 12px; text-decoration: none }
.mark b { font: 900 26px/1 var(--display); letter-spacing: .04em; color: var(--blood-hi) }
.mark span { font: 600 11px/1 var(--mono); letter-spacing: .2em; color: var(--smoke) }
.bar .btn { min-height: 40px; font-size: 17px; padding: 0 16px }

/* hero */
.hero { padding-block: 64px 56px; background: radial-gradient(ellipse 70% 60% at 78% 40%, rgba(179,38,30,.22), transparent 70%), var(--soot) }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center }
.hero-copy { display: grid; gap: 22px; justify-items: start; min-width: 0 }
.hero .label { color: var(--blood-hi) }
.hero h1 { font-size: clamp(46px, 7.4vw, 92px) }
.hero h1 em { font-style: normal; color: var(--blood-hi) }
.hero .lede { font-size: 20px; color: #d4ccbc; max-width: 54ch }
.ctas { display: flex; flex-wrap: wrap; gap: 12px }
.fineprint { font: 400 13px/1.5 var(--mono); color: var(--smoke) }
.fan { position: relative; height: 470px; min-width: 0 }
.fan img { position: absolute; width: 50%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 24px 50px -12px rgba(0,0,0,.85); border: 1px solid #000 }
.fan img:nth-child(1) { left: 2%; top: 60px; transform: rotate(-8deg); filter: brightness(.65) }
.fan img:nth-child(2) { right: 2%; top: 60px; transform: rotate(7deg); filter: brightness(.65) }
.fan img:nth-child(3) { left: 25%; top: 0; width: 55%; z-index: 2 }

/* intake card: the facts of the man */
.intake { border-top: 1px solid #2f2c28; border-bottom: 1px solid #2f2c28; background: var(--ash) }
.intake dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) }
.intake div { padding: 22px 20px; border-right: 1px dashed #3d3934 }
.intake div:last-child { border-right: 0 }
.intake dt { font: 600 11px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--smoke); margin-bottom: 6px }
.intake dd { margin: 0; font: 700 26px/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--bone) }

/* ledger */
.ledger { background: var(--paper); color: var(--ink); padding-block: 72px 80px; background-image: repeating-linear-gradient(to bottom, transparent 0 35px, rgba(120,100,70,.18) 35px 36px) }
.ledger-head { display: grid; gap: 14px; margin-bottom: 40px; max-width: 760px }
.ledger-head .label { color: var(--blood) }
.ledger-head h2 { font-size: clamp(40px, 5.5vw, 64px) }
.ledger-head p { font-size: 19px; color: #4a4338 }
.entries { list-style: none; margin: 0; padding: 0; border-top: 3px double var(--ink) }
.entry { display: grid; grid-template-columns: 112px 150px minmax(0, 1fr); gap: 28px; padding-block: 30px; border-bottom: 1px solid var(--rule); position: relative }
.entry::before { content: ""; position: absolute; left: 96px; top: 0; bottom: 0; width: 2px; background: rgba(179,38,30,.45) }
.entry-no { display: grid; align-content: start; gap: 4px; font-variant-numeric: tabular-nums }
.entry-no b { font: 900 64px/.85 var(--display); color: var(--blood) }
.entry-no span { font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6a6052 }
.entry img { width: 150px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 10px 22px -10px rgba(40,30,20,.6) }
.entry-body { display: grid; gap: 10px; align-content: start; min-width: 0 }
.entry-body h3 { font-size: 40px; color: var(--ink) }
.hook { font: 600 italic 21px/1.4 var(--serif); color: var(--ink) }
.entry-body p:not(.hook) { color: #3d372e; max-width: 64ch }
.stamp { justify-self: start; font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--blood); border: 1.5px solid var(--blood); padding: 6px 9px; transform: rotate(-2deg) }
.ledger-foot { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; margin-top: 36px }
.ledger-foot p { font: 400 14px/1.5 var(--mono); color: #4a4338 }

/* warning */
.warning { padding-block: 80px }
.warning-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start }
.warning h2 { font-size: clamp(38px, 5vw, 60px) }
.warning h2 em { font-style: normal; color: var(--blood-hi) }
.label-box { border: 2px solid var(--blood); padding: 26px 26px 22px; display: grid; gap: 14px; background: rgba(179,38,30,.06) }
.label-box .label { color: var(--blood-hi) }
.label-box ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px }
.label-box li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; color: #d4ccbc }
.label-box li::before { content: "\25A0"; color: var(--blood-hi); font-size: 13px; line-height: 1.9 }
.warning .copy { display: grid; gap: 18px; color: #d4ccbc }

/* games */
.games { background: var(--ash); padding-block: 64px; border-top: 1px solid #2f2c28 }
.games-head { display: grid; gap: 10px; margin-bottom: 28px }
.games-head .label { color: var(--smoke) }
.games-head h2 { font-size: clamp(34px, 4.4vw, 50px) }
.game-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px }
.game { display: grid; text-decoration: none; background: var(--soot); border: 1px solid #36322d; transition: border-color .15s }
.game:hover { border-color: var(--blood-hi) }
.game img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover }
.game div { padding: 16px 18px 20px; display: grid; gap: 6px }
.game h3 { font-size: 30px }
.game p { color: var(--smoke); font-size: 16px }

/* final */
.final { padding-block: 80px; text-align: center; background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(179,38,30,.25), transparent 70%), var(--soot) }
.final .wrap { display: grid; gap: 22px; justify-items: center }
.final h2 { font-size: clamp(44px, 7vw, 84px); max-width: 14ch }
.final p { color: #d4ccbc; max-width: 52ch }
footer { border-top: 1px solid #2f2c28 }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 26px; font: 400 13px/1.5 var(--mono); color: var(--smoke) }
footer nav { display: flex; gap: 18px }
footer a { text-decoration: none }
footer a:hover { color: var(--bone) }

@media (max-width: 900px) {
  .hero-grid, .warning-grid { grid-template-columns: minmax(0, 1fr) }
  .fan { height: 360px; max-width: 420px; width: 100%; justify-self: center }
  .intake dl { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .intake div:nth-child(2) { border-right: 0 }
  .intake div:nth-child(-n+2) { border-bottom: 1px dashed #3d3934 }
}
@media (max-width: 640px) {
  .hero { padding-block: 36px 40px }
  .fan { height: 300px }
  .entry { grid-template-columns: 74px minmax(0, 1fr); gap: 16px 18px }
  .entry::before { display: none }
  .entry-no b { font-size: 46px }
  .entry img { width: 110px; grid-column: 2; grid-row: 1 }
  .entry-body { grid-column: 1 / -1 }
  .entry-body h3 { font-size: 32px }
  .game-row { grid-template-columns: minmax(0, 1fr) }
  .mark span { display: none }
  .intake dd { font-size: 21px }
}

:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px) }
[hidden] { display: none !important }
.legal { padding-block: 56px 72px }
.legal .wrap { max-width: 780px; display: grid; gap: 16px }
.legal h1 { font-size: clamp(44px, 6vw, 68px) }
.legal h2 { font-size: 28px; margin-top: 14px; color: var(--blood-hi) }
.legal p { color: #d4ccbc }
.legal strong { color: var(--bone) }
.mail { user-select: all; color: var(--blood-hi); font-family: var(--mono); font-size: 16px }