:root { color-scheme: light; font: 17px/1.65 system-ui, sans-serif; color: #20312a; background: #f8faf5; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #285d39; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid #3a7545; outline-offset: 4px; }
header, footer { padding: 24px max(24px, calc((100vw - 960px)/2)); background: #e9efdf; }
header { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
nav { display: flex; gap: 20px; flex-wrap: wrap; }
main { max-width: 840px; padding: 0 24px; margin: auto; }
.intro { padding: 64px 0 40px; }
h1 { font-size: clamp(2.4rem, 8vw, 4rem); letter-spacing: -.045em; line-height: 1.1; margin: 16px 0 24px; }
h2 { font-size: 2rem; line-height: 1.2; margin-top: 56px; }
h3 { font-size: 1.5rem; line-height: 1.3; margin: 14px 0; }
h4 { font-size: 1.05rem; margin: 28px 0 8px; }
p { margin: 12px 0; }
.lead { font-size: 1.22rem; line-height: 1.55; }
.eyebrow, .tags, .date, figcaption { color: #50614f; font-size: .87rem; }
.eyebrow { letter-spacing: .035em; }
article { padding: 32px 0 42px; border-bottom: 1px solid #d5dfce; scroll-margin-top: 24px; }
li { margin: 8px 0; }
figure { margin: 28px 0; }
figure img { width: 100%; height: auto; display: block; border-radius: 10px; }
figcaption { margin-top: 8px; }
footer { margin-top: 64px; }
.skip { position: absolute; left: 16px; top: -100px; padding: 12px; background: white; }
.skip:focus { top: 8px; }
@media print { header, footer, .skip { display: none; } article { break-inside: avoid; } :root { font-size: 11pt; background: white; } }

/* Keep portrait game captures visible as a complete frame. */
.media-portrait img { width: auto; max-width: 100%; max-height: min(55vh, 480px); margin-inline: auto; }