@font-face { font-family: "Barlow Condensed"; font-weight: 800; src: url(/fonts/BarlowCondensed-ExtraBold.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; src: url(/fonts/BarlowCondensed-SemiBold.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "DM Mono"; font-weight: 400; src: url(/fonts/DMMono-Regular.ttf) format("truetype"); font-display: swap; }
:root { --ink:#0B0908; --panel:#15100D; --line:#382B25; --paper:#EFE8DC; --dim:#A89F92; --red:#E2231A; --edge:#F2A23A; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
a { color: var(--edge); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--paper); color: var(--ink); padding: 8px; }
header { display: flex; align-items: center; justify-content: space-between; max-width: 860px; margin: 0 auto; padding: 18px 16px; }
header .brand { font: 800 34px/1 "Barlow Condensed", sans-serif; color: var(--red); text-decoration: none; letter-spacing: .5px; text-shadow: 0 0 18px rgba(226,35,26,.45); }
header nav a { font: 600 19px "Barlow Condensed", sans-serif; color: var(--paper); text-decoration: none; margin-left: 18px; }
main { max-width: 860px; margin: 0 auto; padding: 8px 16px 64px; }
h1 { font: 800 clamp(48px, 13vw, 120px)/.95 "Barlow Condensed", sans-serif; margin: 8px 0 12px; color: var(--red); text-shadow: 0 0 28px rgba(226,35,26,.45); }
h1.page { font-size: clamp(40px, 9vw, 72px); color: var(--paper); text-shadow: none; }
h2 { font: 800 30px/1.1 "Barlow Condensed", sans-serif; margin: 36px 0 8px; }
.edge { font: 400 12px/1.4 "DM Mono", monospace; letter-spacing: 1.2px; text-transform: uppercase; color: var(--edge); }
.lead { font: 600 clamp(24px, 5vw, 34px)/1.2 "Barlow Condensed", sans-serif; margin: 0 0 18px; }
.strip { border: 1px solid var(--line); background: var(--panel); margin: 14px 0; }
.strip .holes { height: 12px; background: repeating-linear-gradient(90deg, #1D1511 0 4px, var(--ink) 4px 12px, #1D1511 12px 15px); }
.strip .body { padding: 14px 16px; }
.strip h3 { font: 800 28px/1 "Barlow Condensed", sans-serif; margin: 0 0 4px; }
.strip p { margin: 0; color: var(--dim); }
.hero { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.hero img { width: 120px; height: 120px; border-radius: 27px; }
.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.tags li { background: var(--paper); color: var(--ink); font: 600 17px "Barlow Condensed", sans-serif; padding: 4px 10px; border-radius: 2px; }
.badge { display: inline-block; background: var(--red); color: #fff; font: 800 22px "Barlow Condensed", sans-serif; padding: 10px 18px; border-radius: 5px; text-decoration: none; box-shadow: 0 0 22px rgba(226,35,26,.5); }
.dim { color: var(--dim); }
footer { max-width: 860px; margin: 0 auto; padding: 24px 16px 40px; color: var(--dim); font-size: 14px; border-top: 1px solid var(--line); }
img.shot { width: 100%; height: auto; border: 1px solid var(--line); }