/* The War Ministry (war.<domain>): a modern defence ministry website. News, operations on the Line, careers with the
   Marsh Regiments, veterans, honours and the casualty rolls. The rolls and the service records of the dead are shown as
   documents in the type of their decade. Old pages (cached) keep their classes; all are styled here. */
.st-war { --st-font: 'Barlow', 'Helvetica Neue', Arial, sans-serif; --st-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --st-brand: #3b4a2a; --st-brand-light: #e3e8d8; --st-feedback-bg: #1b2016; --gold: #d8a93a; --link: #2d5a8c; --link-hover: #173a61; font-size: 1.08rem; }
.st-war :is(h1, h2, h3) { font-weight: 700; letter-spacing: 0; }
.st-war h1 { font-size: 2.8rem; line-height: 1.02; }
.st-war h2 { font-size: 1.9rem; }
.st-war h1 small { font-family: var(--st-font); }

/* ---------- chrome ---------- */
.wr-header { background: #111512; color: #fff; font-family: var(--st-font); border-bottom: 4px solid var(--gold); }
.wr-header-in { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; padding-top: .9rem; padding-bottom: .9rem; }
.wr-brand { display: inline-flex; align-items: center; gap: .75rem; color: #fff !important; text-decoration: none !important; }
.wr-brand svg { width: 40px; height: 40px; fill: var(--gold, #d8a93a); flex: none; }
.wr-brand b { display: block; font: 700 1.75rem/1 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.wr-brand small { display: block; font-size: .85rem; opacity: .75; margin-top: .2rem; letter-spacing: .02em; }
.wr-tools { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.wr-search { display: flex; }
.wr-search input { width: 12rem; font: 1rem/1.3 var(--st-font); padding: .5rem .7rem; border: 1px solid #4d5548; border-right: 0; background: #1d221c; color: #fff; border-radius: 0; -webkit-appearance: none; }
.wr-search input::placeholder { color: #a9b0a3; }
.wr-search button { width: 2.6rem; border: 1px solid #4d5548; background: #1d221c; color: #fff; display: grid; place-items: center; cursor: pointer; }
.wr-search svg { width: 18px; height: 18px; }
.wr-join { font: 700 1rem/1 'Barlow Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase; background: var(--gold, #d8a93a); color: #111 !important; padding: .7rem 1rem; text-decoration: none !important; }
.wr-join:hover { background: #f0c253; }
.wr-nav { background: #1b2016; }
.wr-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.7rem; }
.wr-nav li { margin: 0; }
.wr-nav a { display: block; padding: .75rem 0 .65rem; color: #e9ece5 !important; text-decoration: none !important; font-weight: 600; font-size: 1rem; border-bottom: 3px solid transparent; }
.wr-nav a:hover { border-bottom-color: var(--gold, #d8a93a); color: #fff !important; }
.wr-footer { background: #111512; color: #d9ddd4; font: .95rem/1.55 var(--st-font); padding: 2.4rem 0 2rem; border-top: 4px solid var(--gold, #d8a93a); }
.wr-footer a { color: #fff !important; }
.wr-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1.5rem 2.4rem; }
.wr-foot-grid h2 { font: 700 1.05rem/1.3 'Barlow Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .7rem; color: #fff; }
.wr-foot-grid ul { list-style: none; padding: 0; margin: 0; }
.wr-foot-grid li { margin: 0 0 .45rem; }
.wr-foot-brand { display: flex; gap: .8rem; align-items: flex-start; }
.wr-foot-brand svg { width: 34px; height: 34px; fill: var(--gold, #d8a93a); flex: none; }
.wr-foot-brand p { margin: 0; }
.wr-foot-brand b { display: block; font: 700 1.3rem/1.1 'Barlow Condensed', sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #fff; margin-bottom: .2rem; }
.wr-foot-legal { border-top: 1px solid #333a30; margin: 1.6rem 0 0; padding-top: 1rem; max-width: 80ch; }
@media (max-width: 860px) { .wr-foot-grid { grid-template-columns: 1fr 1fr; } .wr-foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .wr-nav ul { gap: 0 1.1rem; } .wr-nav a { font-size: .95rem; padding: .55rem 0 .45rem; } .wr-brand b { font-size: 1.45rem; } .wr-search input { width: 9rem; } .wr-tools { width: 100%; } .wr-search { flex: 1 1 100%; } .wr-search input { flex: 1; width: auto; } .wr-join { flex: 1 1 100%; text-align: center; } }

/* ---------- hero, buttons ---------- */
.wr-hero { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 1.5rem 3rem; align-items: center; color: #fff;
  border-image: linear-gradient(115deg, #0f130f 0%, #1c2418 55%, #34432a 100%) fill 0 // 0 100vmax; padding: 2.2rem 0 2.4rem; margin: -1.2rem 0 1.8rem; }
.wr-hero h1 { color: #fff; margin: .2rem 0 1rem; }
.wr-hero h1 small { color: #c9cfc2; font-size: .42em; margin-top: .6rem; }
.wr-hero .kicker, .wr-hero .kicker a { color: #c9cfc2 !important; }
.wr-hero a:not(.btn) { color: #fff !important; }
.wr-hero nav.breadcrumbs a { color: #fff !important; }
.wr-hero nav.breadcrumbs [aria-current] { color: #c9cfc2; }
.wr-hero nav.breadcrumbs li + li::before { border-color: #c9cfc2; }
.wr-hero .bulletin { background: rgba(255,255,255,.06); border: 0; border-left: 5px solid var(--gold); color: #fff; margin: 0 0 1.2rem; max-width: 40rem; }
.wr-hero .bulletin .stamp { color: #c9cfc2; }
.wr-hero-ops, .wr-hero-join { grid-template-columns: minmax(0, 1fr) 220px; }
.wr-hero-ops { grid-template-columns: 1fr; }
.wr-hero-join h1 { font-size: 4rem; text-transform: uppercase; letter-spacing: .01em; }
.wr-hero-join h1 small { text-transform: none; letter-spacing: 0; }
.wr-hero aside.poster { width: 220px; margin: 0; }
.wr-btn { background: var(--gold, #d8a93a); color: #111 !important; box-shadow: 0 2px 0 #7a5d14; font-family: 'Barlow Condensed', sans-serif; font-size: 1.15rem; letter-spacing: .05em; text-transform: uppercase; }
.wr-btn:hover { background: #f0c253; }
.wr-btn-ghost { background: transparent; color: #fff !important; border: 2px solid #fff; box-shadow: none; font-family: 'Barlow Condensed', sans-serif; font-size: 1.15rem; letter-spacing: .05em; text-transform: uppercase; }
.wr-btn-ghost:hover { background: rgba(255,255,255,.12); }
.wr-more { font-weight: 700; }
.wr-more::after { content: " →"; }
@media (max-width: 760px) {
  .wr-hero, .wr-hero-join { grid-template-columns: 1fr; }
  .wr-hero aside.poster { width: 150px; }
  .st-war h1 { font-size: 2.2rem; } .wr-hero-join h1 { font-size: 2.6rem; }
}

/* ---------- news cards ---------- */
.wr-cards { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1.4rem; }
.wr-card { margin: 0; max-width: none !important; }
.wr-card > a { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #dcdfd6; text-decoration: none !important; color: var(--ink) !important; transition: box-shadow .15s; }
.wr-card > a:hover { box-shadow: 0 10px 24px -12px rgba(0,0,0,.4); }
.wr-card-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #2a3322; }
.wr-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.wr-card-img img[src*="/images/org/"] { object-fit: contain; padding: 1rem; background: #e9ece3; }
.wr-card-body { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.1rem 1.1rem; flex: 1; }
.wr-card-body .tag { align-self: flex-start; }
.wr-card-body b { font: 700 1.35rem/1.15 var(--st-head); color: var(--ink); }
.wr-card > a:hover b { text-decoration: underline; text-decoration-thickness: 2px; }
.wr-standfirst { color: #454b40; font-size: .98rem; }
.wr-date { color: var(--muted); font-size: .9rem; margin-top: auto; }
.wr-cards-text .wr-card-body { border-top: 5px solid var(--st-brand); }

/* ---------- war pages ---------- */
.shell-war { --panel: #f2f3ee; }
.war-page { max-width: 1120px; margin: 0 auto; }
.war-page h1 { margin: .2rem 0 .8rem; }
.war-page h2 { border-bottom: 0; padding-bottom: 0; }
.war-page .deck { font-style: normal; }
header.ministry-head { display: flex; gap: 1.4rem; align-items: center; border-bottom: 1px solid var(--rule); padding-bottom: 1.2rem; margin-bottom: 1.4rem; }
header.ministry-head > img { width: 96px; height: 96px; flex: none; }
.bulletin { border: 0; border-left: 5px solid var(--gold, #d8a93a); background: var(--panel); }
.bulletin pre.verbatim { border: 0; padding: 0; margin: 0; font: 600 1.25rem/1.45 var(--st-font); max-width: none; }
.bulletin .stamp { font: 500 .9rem/1.5 var(--st-font); letter-spacing: 0; text-transform: none; color: var(--muted); border: 0; padding: 0; transform: none; margin: .7rem 0 0; display: block; }
.war-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .8rem; margin: 0 0 2rem; }
.st-war .war-stats div { border-top: 5px solid var(--gold, #d8a93a); background: var(--panel); }
.st-war .war-stats b { font: 700 2rem/1.05 var(--st-head); }
.wr-ops .frontmap { margin-top: 0; }
.person-card.wr-person { margin: 0 0 1rem; }
.wr-recruit { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; color: #fff; padding: 1.8rem 2rem; margin: 2.4rem 0;
  background: #111512 linear-gradient(100deg, #111512 30%, #3b4a2a 100%); border-left: 8px solid var(--gold, #d8a93a); }
.wr-recruit h2 { color: #fff; margin: 0 0 .4rem; font-size: 2.6rem; text-transform: uppercase; }
.wr-recruit p { margin: 0; max-width: 46ch; color: #d9ddd4; }
.wr-recruit .kicker { color: var(--gold) !important; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; }
.wr-recruit .btn { margin: 0; }

/* the front-line map */
.frontmap { background: #fff; border: 1px solid var(--rule-soft); padding: .5rem; margin: 1rem 0 1.6rem; }
.frontmap svg { width: 100%; height: auto; display: block; }
.frontmap figcaption { padding: .5rem .3rem 0; font-size: .92rem; color: var(--muted); }
.map-land { fill: #e4e7d6; }
.map-marsh { fill: #d5dfcf; }
.map-water { fill: #c3d3d6; stroke: #a8bcc0; stroke-width: .8; }
.map-reeds { stroke: #7d9a6b; stroke-width: 1.2; fill: none; }
.map-haze { fill: url(#haze); }
.map-line { stroke: #2f4a2d; stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map-line-inner { stroke: #e9d8a6; stroke-width: 2; stroke-dasharray: 6 5; fill: none; }
.map-post { fill: #fff; stroke: #2f4a2d; stroke-width: 2; }
.map-garrison { fill: #2f4a2d; }
.map-label { font: 11px/1 'Barlow', 'Helvetica Neue', Arial, sans-serif; fill: #1b1a17; }
.map-label.marsh { font-style: italic; fill: #5c6b55; font-size: 10px; }
.map-label.big { font-size: 14px; letter-spacing: .18em; text-transform: uppercase; fill: #4a5a45; }
.map-label.enemy { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; fill: #7a3b3b; }
.map-legend { font: 10px/1 'Barlow', 'Helvetica Neue', Arial, sans-serif; fill: #1b1a17; }
.map-scale { stroke: #1b1a17; stroke-width: 1.5; }
.map-road { stroke: #b0a98f; stroke-width: 2; stroke-dasharray: 2 3; fill: none; }

/* the Line: posts and the timeline */
.wr-posts { list-style: none; padding: 0; margin: 0 0 1.8rem; counter-reset: post; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .5rem; }
.wr-posts li { margin: 0; padding: .55rem .7rem; background: var(--panel); border-left: 4px solid var(--st-brand); display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.wr-posts li span { font-size: .82rem; color: var(--muted); text-transform: capitalize; }
.wr-timeline { list-style: none; padding: 0 0 0 1.2rem; margin: 0 0 2rem; border-left: 3px solid var(--st-brand); }
.wr-timeline li { position: relative; margin: 0 0 1.2rem; padding-left: .6rem; }
.wr-timeline li::before { content: ""; position: absolute; left: -1.72rem; top: .35rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--gold, #d8a93a); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--st-brand); }
.wr-timeline .wr-date { font-weight: 700; color: var(--ink); }
.wr-timeline p { margin: .2rem 0; }

/* careers */
.wr-roles { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.wr-roles li { margin: 0; padding: 1.1rem 1.1rem 1.2rem; background: #111512; color: #e4e7df; border-top: 5px solid var(--gold, #d8a93a); max-width: none !important; }
.wr-roles h3 { color: #fff; margin: 0 0 .4rem; font-size: 1.45rem; text-transform: uppercase; letter-spacing: .02em; }
.wr-roles p { margin: 0; font-size: .98rem; }
.wr-checks { list-style: none; padding: 0; }
.wr-checks li { position: relative; padding-left: 2rem; margin: 0 0 .7rem; }
.wr-checks li::before { content: ""; position: absolute; left: .2rem; top: .25rem; width: .55rem; height: 1rem; border: solid var(--st-brand); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.wr-depots { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.wr-depots li { display: grid; grid-template-columns: 56px 1fr; gap: .9rem; align-items: center; margin: 0; padding: .8rem; border: 1px solid var(--rule-soft); max-width: none !important; }
.wr-depots span { display: block; font-size: .92rem; color: var(--muted); }

/* regiments and rolls */
.regiments { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.regiment-card { border: 1px solid var(--rule-soft); border-top: 5px solid var(--st-brand); padding: .9rem 1rem 1rem; display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.regiment-card:not(:has(img)) { display: block; }
.regiment-card img.wr-badge { width: 56px; height: 56px; }
.regiment-card b a { font: 700 1.3rem/1.15 var(--st-head); }
.regiment-card dl { margin: .5rem 0 0; font-size: .92rem; display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem; }
.regiment-card dt { color: var(--muted); } .regiment-card dd { margin: 0; }
.roll-table td, .roll-table th { font-size: .92rem; }
.roll-table td.rank { white-space: nowrap; }
.roll-table td.date { white-space: nowrap; color: var(--muted); }
.roll-table td.medal, td.medal { font-variant: small-caps; color: #7a5d14; }
.action-block { margin: 1.4rem 0; border-top: 1px solid var(--rule-soft); padding-top: .8rem; }
.action-block h3 { margin-top: .3rem; }
.years-index { columns: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: .3rem 2rem; font-size: .95rem; }
.years-index div { margin: 0; padding: .45rem 0; border-top: 1px solid var(--rule-soft); }
.years-index b { display: block; font-size: .85rem; color: var(--muted); font-weight: 700; }
.years-index a { display: inline-block; margin: 0 .5rem .15rem 0; text-decoration: none !important; }
.years-index a:hover { text-decoration: underline !important; }
.years-index a small { color: var(--muted); font-size: .78em; }
.decades-table td:first-child { width: 6rem; }
.bar { display: inline-block; height: .7rem; background: var(--st-brand); vertical-align: middle; margin-right: .4rem; }
.citations { padding-left: 0; list-style: none; }
.citations li { margin: 0 0 .8rem; font-size: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--rule-soft); }
.citations .sc { display: block; color: var(--muted); font-weight: 700; font-size: .9rem; }
.war-foot { font-size: .9rem; color: var(--muted); border-top: 1px solid var(--rule); margin-top: 2.4rem; padding-top: .8rem; }

/* one soldier: the record card is a document */
div.record { grid-template-columns: minmax(0, 1fr) 20rem; gap: 0 2.6rem; }
div.record dl.facts { grid-template-columns: minmax(8rem, 11rem) 1fr; }
div.record aside h2 { border: 0; font-size: 1.3rem; margin-top: 0; }
.record-card.document dl.facts dt { font-family: var(--doc-font); font-weight: 400; font-variant: small-caps; letter-spacing: .04em; color: #4d4535; }
.record-card.document dl.facts :is(dt, dd) { border-bottom: 1px dotted #cbbd9e; }
.record-card.document h2 { font-size: 1.15rem; font-weight: 400; font-variant: small-caps; letter-spacing: .06em; text-align: center; margin: 1.4rem 0 .6rem; }
.record-card.document h2:first-of-type { margin-top: 0; }
.medal-box { border: 0; border-left: 5px solid var(--gold, #d8a93a); background: var(--panel); }
.document .medal-box { background: rgba(160,120,40,.08); }
.medal-box b { font-variant: normal; letter-spacing: 0; font-size: 1.1rem; font-weight: 700; }
.orders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 1rem 0 2rem; }
.order-card { border: 1px solid var(--rule-soft); border-top: 5px solid var(--gold, #d8a93a); padding: 1.1rem; text-align: center; }
.order-card .medal-icon.large { width: 5rem; height: 5rem; margin: 0 auto .6rem; }
.order-card h3 { margin: 0 0 .3rem; font-variant: normal; letter-spacing: 0; font-size: 1.5rem; font-weight: 700; text-transform: capitalize; }
.order-card .since { font-size: .9rem; color: var(--muted); }
.order-card dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem; font-size: .92rem; margin: .7rem 0 0; text-align: left; }
.order-card dt { color: var(--muted); } .order-card dd { margin: 0; }
@media (max-width: 860px) { .orders { grid-template-columns: 1fr; } div.record { grid-template-columns: 1fr; } header.ministry-head { flex-direction: column; align-items: flex-start; } }

/* ---------- enlistment ---------- */
.wr-apply { border-top: 5px solid var(--st-brand); padding-top: 1rem; margin: 2rem 0; }
.wr-apply h2 { margin-top: 0; }
.enlist-page .war-stats b { font-size: 1.15rem; line-height: 1.25; }
.wr-kit { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.wr-letter { background: #fff; border: 1px solid var(--rule); box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); padding: 1.6rem 1.8rem; max-width: 46rem; margin: 1rem 0 2rem; font-family: 'Source Serif 4', Georgia, serif; font-size: 1.05rem; line-height: 1.6; }
.wr-letter .as-letter-sign { margin-top: 1.2rem; }
.wr-pension { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; border-left: 5px solid var(--st-brand); background: var(--panel); padding: .8rem 1rem; }
.wr-pension .small { flex: 1 1 16rem; }
@media (max-width: 640px) { .wr-kit { grid-template-columns: 1fr; } .wr-letter { padding: 1.1rem 1rem; } }
@media print { .wr-letter { box-shadow: none; } }