/* Press kit: the game's ink-on-paper tokens (src/renderer/src/styles/core/variables.css at 596f76b). */
@font-face { font-family: 'Fraunces Variable'; src: url(fonts/fraunces-latin-full-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Archivo Variable'; src: url(fonts/archivo-latin-wdth-normal.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url(fonts/newsreader-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url(fonts/newsreader-latin-400-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url(fonts/newsreader-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --paper-desk: #eae3d6; --paper-base: #f4eee3; --paper-sheet: #fbf7ee; --paper-inset: #ece4d4;
  --ink: #262319; --ink-body: #3b372c; --ink-muted: #6c6553; --ink-faint: #8f8672;
  --rule-faint: rgba(38, 35, 25, 0.12); --rule-hair: rgba(38, 35, 25, 0.22);
  --accent: #3f6b4f; --stamp: #b4552d; --stamp-hover: #9c4825;
  --f-display: 'Fraunces Variable', Georgia, serif; --f-ui: 'Archivo Variable', -apple-system, 'Segoe UI', sans-serif;
  --f-serif: 'Newsreader', Georgia, serif; --f-mono: 'JetBrains Mono', Menlo, monospace;
  --print: 3px 3px 0 var(--ink); --r: 6px;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper-desk); color: var(--ink-body); font-family: var(--f-serif); font-size: 17px; line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
[hidden] { display: none !important; }
.eyebrow { margin: 0 0 6px; font-family: var(--f-ui); font-weight: 800; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--stamp); }

.top { background: var(--paper-sheet); border-bottom: 2px solid var(--ink); }
.top__inner { max-width: 1180px; margin: 0 auto; padding: 28px 16px; display: grid; gap: 22px; grid-template-columns: 1fr; align-items: center; }
.top__logo { width: 100%; max-width: 520px; }
.top__lede { margin: 0 0 14px; font-size: 21px; line-height: 1.45; color: var(--ink); }
.top__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 860px) { .top__inner { grid-template-columns: 1fr 1fr; } }

.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 16px; font-family: var(--f-ui); font-weight: 800; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: var(--paper-sheet); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: var(--print); text-decoration: none; }
.btn:hover { background: var(--paper-base); }
.btn--stamp { background: var(--stamp); color: var(--paper-sheet); }
.btn--stamp:hover { background: var(--stamp-hover); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 26px 16px 40px; display: grid; gap: 26px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .wrap { grid-template-columns: 300px minmax(0, 1fr); } .facts { position: sticky; top: 16px; } }
.card { background: var(--paper-sheet); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: var(--print); padding: 16px; }
.card__legend { margin: 0 0 8px; font-family: var(--f-ui); font-weight: 800; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }
.facts dl { margin: 0; }
.facts dt { font-family: var(--f-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-top: 10px; }
.facts dd { margin: 2px 0 0; font-family: var(--f-ui); font-weight: 600; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }

.main { min-width: 0; display: grid; gap: 30px; }
.block h2 { margin: 0 0 12px; font-family: var(--f-display); font-weight: 900; font-variation-settings: 'opsz' 144; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.1; color: var(--ink); }
.block h3 { margin: 18px 0 6px; font-family: var(--f-ui); font-weight: 800; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.block p { margin: 0 0 12px; max-width: 46em; }
.lede { font-size: 20px; color: var(--ink); }
.note { font-size: 14px; font-style: italic; color: var(--ink-muted); }
.features { margin: 0 0 14px; padding-left: 20px; max-width: 46em; }
.features li { margin-bottom: 6px; }
.features b { font-family: var(--f-ui); font-weight: 800; color: var(--ink); }

.videos { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .videos { grid-template-columns: 1fr 1fr; } }
.video { display: block; text-decoration: none; color: var(--ink); background: var(--paper-sheet); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: var(--print); overflow: hidden; }
.video img { border-bottom: 2px solid var(--ink); }
.video__t { display: block; padding: 10px 12px 0; font-family: var(--f-ui); font-weight: 800; font-size: 15px; }
.video__m { display: block; padding: 0 12px 10px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-muted); }
.downloads { margin-top: 14px !important; }

.shots { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .shots { grid-template-columns: 1fr 1fr; } }
.shots figure, .art figure, .logos figure { margin: 0; }
.shots img, .art img { border: 2px solid var(--ink); border-radius: var(--r); background: var(--paper-sheet); }
figcaption { margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--ink-body); }

.art { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; align-items: start; }
.art--wide { grid-column: 1 / -1; }
@media (min-width: 900px) { .art { grid-template-columns: repeat(4, 1fr); } .art--wide { grid-column: 1 / -1; } .art figure:not(.art--wide):not(.art--tall) { grid-column: span 2; } }

.logos { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.logo a { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: 18px; border: 2px solid var(--ink); border-radius: var(--r); }
.logo--light a { background: var(--paper-sheet); }
.logo--dark a { background: #1b2433; }
.logo img { max-height: 100%; width: auto; }
.logo--mark img { height: 70%; }

.foot { max-width: 1180px; margin: 0 auto; padding: 18px 16px 40px; border-top: 1px solid var(--rule-hair); font-size: 13px; color: var(--ink-muted); }