:root { --olive: #3d4a1c; --olive-2: #5a6b2b; --orange: #e0701c; --paper: #f7f5ef; --ink: #2a2c2b; --tint: #eef0e2; --grey: #6d726b; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 system-ui, sans-serif; }
a { color: var(--olive-2); }
.site-header { background: var(--olive); padding: 8px 16px; }
.site-header img { display: block; height: 44px; width: auto; }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
.site-footer { text-align: center; color: var(--grey); font-size: 14px; padding: 24px 16px; }
.hero { text-align: center; }
.hero-art { width: 320px; max-width: 100%; height: auto; }
.state-art { width: 220px; max-width: 100%; height: auto; }
.anim-art { width: 96px; height: 96px; }
.cards, .boxes { display: grid; gap: 16px; }
.card, .box { background: #fff; border: 1px solid var(--tint); border-radius: 8px; padding: 16px; }
.box { aspect-ratio: 1 / 1; overflow: auto; }
label { display: block; margin: 8px 0 2px; }
input, select { width: 100%; padding: 8px; font: inherit; }
button, .button { display: inline-block; background: var(--orange); color: #fff; border: 0; border-radius: 6px; padding: 8px 14px; font: inherit; text-decoration: none; cursor: pointer; margin-top: 8px; }
.inline-form { display: inline; }
.field-error { color: #b3261e; margin: 2px 0; }
.note, .label, .researched, .variant, .years { color: var(--grey); font-size: 14px; }
.sources { font-size: 13px; margin: 4px 0; padding-left: 18px; }
.plus-minus { display: grid; gap: 16px; }
.timeline { width: 100%; border-collapse: collapse; }
.timeline th, .timeline td { text-align: left; vertical-align: top; padding: 6px; border-bottom: 1px solid var(--tint); }
.timeline tr.near td { background: var(--tint); font-weight: 600; }
.photo img { max-width: 100%; height: auto; }
.photo .placeholder { max-width: 240px; }
.state { text-align: center; padding: 24px 0; }
.checks { display: inline-block; text-align: left; }
.report-layout { display: grid; gap: 16px; }
@media (min-width: 720px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .report-layout { grid-template-columns: 2fr 1fr; }
  .plus-minus { grid-template-columns: 1fr 1fr; }
  .boxes { grid-template-columns: repeat(2, 1fr); }
}