/* Battle pages (dob.pages), on the georgewyrd design system (www.georgewyrd.com/design/):
   only what tokens.css and components.css don't cover. */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }

.back { margin: var(--space-6) 0 0; font-size: 14px; line-height: 20px; }
.head { padding-top: var(--space-8); margin-bottom: var(--space-8); }
.head .gw-lede { margin-top: var(--space-4); }
.head .more { margin: var(--space-3) 0 0; font-size: 15px; color: var(--ink-muted); }
.status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-6) 0 0;
  font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.jumps { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* Article left, facts right; on phones the facts come first. */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-12); align-items: start; }
.main { min-width: 0; max-width: 720px; }
aside { background: var(--canvas-raised); border: var(--border-hairline) solid var(--rule-strong);
  border-radius: var(--radius-md); font-size: 15px; line-height: 22px; position: sticky; top: var(--space-4); }
@media (max-width: 900px) {
  .cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  aside { position: static; order: -1; }
}
aside dl { margin: 0; }
.facts { padding: var(--space-6); display: grid; gap: var(--space-2); }
.facts div, .figures div { display: grid; grid-template-columns: 6.5em 1fr; gap: var(--space-4); }
aside dt { font-family: var(--font-label); font-weight: 700; letter-spacing: .04em; text-transform: lowercase; color: var(--ink-muted); }
aside dd { margin: 0; }
.side { border-top: var(--border-hairline) solid var(--rule); padding: var(--space-6); }
.facts + .side { border-top: var(--border-double) double var(--rule-strong); }
.side .gw-eyebrow { margin: 0; }
.side-name { font-weight: 600; margin: var(--space-1) 0 0; }
.cmd { color: var(--ink-muted); margin: 0; font-size: 14px; line-height: 20px; }
.figures { margin-top: var(--space-3) !important; display: grid; gap: var(--space-1); font-variant-numeric: lining-nums tabular-nums; }
.figures dd.loss { color: var(--madder); }
.ref { font-size: 12px; text-decoration: none !important; }

.main > section { margin: var(--space-12) 0 0; }
.main > section:first-child, .main > figure + section { margin-top: 0; }
.main h2 { margin: 0 0 var(--space-4); font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 46px; }
@media (max-width: 600px) { .main h2 { font-size: 32px; line-height: 38px; } }
.main p { margin: 0 0 var(--space-4); max-width: var(--measure); }
#wargaming { padding: var(--space-6); background: var(--canvas-raised); border: var(--border-hairline) solid var(--rule-strong);
  border-radius: var(--radius-md); }
figure { margin: 0; }
figcaption { margin-top: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.lead { margin-bottom: var(--space-12); }
.lead img { max-height: 70vh; width: auto; }
.pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-6); }

.list .note { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.list h3 { margin: var(--space-6) 0 var(--space-2); font-size: 18px; line-height: 26px; font-weight: 600; }
.sources h2 { font-family: var(--font-text); font-weight: 600; font-size: 22px; line-height: 28px; }
.sources .gw-list__row { flex-wrap: nowrap; font-size: 14px; line-height: 20px; }
.sources .gw-list__title { flex: 1 1 auto; font-size: inherit; line-height: inherit; }
.sid { color: var(--ink-muted); min-width: 2.2em; font-variant-numeric: lining-nums; }

.pager { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-12);
  padding-top: var(--space-6); border-top: var(--border-hairline) solid var(--rule); }
.pager a { text-decoration: none; }
.pager span { display: block; font-family: var(--font-label); font-weight: 700; font-size: 13px; letter-spacing: .06em;
  text-transform: lowercase; color: var(--ink-muted); }
.pager .next { text-align: right; margin-left: auto; }

#map { height: 420px; margin: var(--space-8) 0; border: var(--border-hairline) solid var(--rule-strong); }
@media (max-width: 600px) { #map { height: 300px; } }
.war h2 { margin: var(--space-12) 0 var(--space-4); font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 34px; }
.war .when { margin-left: auto; }
.war .gw-list__title { flex-basis: 220px; }
#reading .gw-list__meta { flex-basis: 100%; }
.reading-battle h2 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 34px; }
.reading-battle h2 a { color: inherit; text-decoration: none; }
.reading-battle h2 a:hover { color: var(--leather-strong); }
.reading-battle .gw-eyebrow { margin-bottom: var(--space-1); }
.reading-battle .gw-list__meta { flex-basis: 100%; }
.reading-list { max-width: 820px; }
.reading-list > section { margin-top: var(--space-12); }
.work-title { font-size: clamp(32px, 5vw, 44px); line-height: 1.12; }
.work-battle { margin-top: var(--space-12); }
.work-battle h2 { margin: 0 0 var(--space-4); font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 34px; }
.work-battle h2 a { color: inherit; text-decoration: none; }
.passage { margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-6); background: var(--canvas-raised);
  border: var(--border-hairline) solid var(--rule); border-radius: var(--radius-md); }
.passage .where { margin: 0 0 var(--space-2); font-family: var(--font-label); font-weight: 700; font-size: 13px;
  letter-spacing: .06em; text-transform: lowercase; color: var(--ink-muted); }
.text p, .passage p { max-width: var(--measure); margin: 0 0 var(--space-4); }
.passage p:last-child { margin-bottom: 0; }
.verse p { font-style: italic; }
.text.verse p { margin-bottom: var(--space-6); }
mark { background: var(--leather-tint); color: inherit; padding: 0 2px; }
.rights { margin-top: var(--space-12); font-size: 14px; color: var(--ink-muted); }
.newspapers .gw-list__row { flex-wrap: wrap; }
.newspapers .passage { flex-basis: 100%; margin: var(--space-2) 0 0; padding: var(--space-3) var(--space-4); font-size: 15px; line-height: 22px; }
.newspapers .note .gw-tag { vertical-align: 1px; }
#photographs figure img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }