/* Shared by every page (2026-10-22 structure): tokens note, links and focus, type voices, masthead, navigation, page shell, section labels, story lists, entering The Void, not found, the search box, footer, reduced motion, print, hanging quotes and page transitions. Each component's own styles are in assets/css/blocks/ and load only on pages that use it.
   Tokens and font faces are generated by WordPress from theme.json; use them, don't restate them. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  border-top: var(--wp--custom--rule--brand) solid var(--wp--preset--color--plum);
  font-optical-sizing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  caret-color: var(--wp--preset--color--plum);
}
::selection { background: var(--wp--preset--color--plum); color: var(--wp--preset--color--paper); }
.wp-site-blocks { padding-inline: clamp(1rem, 4vw, 3rem); }
.wp-site-blocks > * { margin-block-start: 0; }
/* Header and footer parts sit outside a constrained layout; align them with the article's wide container. */
.civilian-masthead, .civilian-footer { max-width: var(--wp--style--global--wide-size); margin-inline: auto; }

/* Links and focus */
a { text-decoration-color: var(--wp--preset--color--plum-tint); text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; text-decoration-thickness: .1em; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--plum);
  outline-offset: var(--wp--custom--focus--offset);
}
.skip-link { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); padding: .75rem 1rem; z-index: 100000; }
.skip-link:focus { clip: auto !important; clip-path: none !important; height: auto; width: auto; top: 1rem; left: 1rem; }

/* Shared typographic voices */
:where(h1, h2, h3, h4) { font-stretch: var(--wp--custom--stretch--heading); text-wrap: balance; }
h1 { font-stretch: var(--wp--custom--stretch--headline); }
:where(h5, h6) { font-stretch: 100%; }
time, .wp-block-post-date { font-variant-numeric: lining-nums tabular-nums; }

/* Masthead (broadsheet row, user decision 2026-10-20): the genuine artwork at the left with the tagline beside it,
   search at the right, then the section menu as a rail between a 2px ink rule and a hairline. The brand rule stays
   on the body. Phones: artwork and a search icon on one row, then the rail (see below). */
.civilian-masthead { padding-block-start: clamp(1rem, 3vw, 1.75rem); text-align: start; }
.civilian-masthead__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; padding-block-end: clamp(.875rem, 2vw, 1.25rem); }
.civilian-masthead__brand { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .375rem 1.5rem; }
.civilian-masthead__brand > * { margin: 0; }
.civilian-wordmark { margin: 0; font-size: var(--wp--preset--font-size--h3); font-weight: 800; font-stretch: var(--wp--custom--stretch--headline); line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.civilian-wordmark a, .civilian-footer a { color: inherit; text-decoration: none; }
.civilian-wordmark a { display: inline-block; }
.civilian-masthead__artwork { display: block; width: clamp(11rem, 24vw, 18rem); max-width: 100%; height: auto; aspect-ratio: 596 / 233; } /* The artwork's own proportions, whichever size file loads (the 308px copy rounds differently). */
/* Printed dateline (user decision 2026-11-06): the tagline in true italic ink, its two lines about the height of the artwork's lettering, so it holds its own beside the artwork and the 600-weight menu. */
.civilian-tagline { max-width: 13rem; margin: 0 0 .5rem; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--small); font-style: italic; line-height: 1.3; }
/* Dateline: today's date set like a printed paper's, uppercase bold label type in ink, centred in the space between the brand and search and on the tagline's last line (hidden on phones). */
.civilian-masthead__date { display: none; flex: 1 1 auto; margin: 0 0 .45rem; text-align: center; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--label); font-weight: 700; font-stretch: var(--wp--custom--stretch--label); letter-spacing: var(--wp--custom--tracking--label); line-height: var(--wp--custom--line-height--ui); text-transform: uppercase; }
@media (min-width: 75rem) { .civilian-masthead__date { display: block; } } /* Only where brand, date and search fit on one row. */
/* Masthead search: field and an outlined icon button joined, 44px tall; the artwork stays the strongest mark. */
.civilian-search--masthead { flex: 0 1 17rem; min-width: 12rem; }
.civilian-search.civilian-search--masthead .wp-block-search__inside-wrapper { gap: 0; }
.civilian-search.civilian-search--masthead .wp-block-search__input { min-width: 0; border-inline-end: 0; border-radius: 2px 0 0 2px; }
.civilian-search.civilian-search--masthead .wp-block-search__button { display: inline-flex; align-items: center; justify-content: center; width: 44px; padding: 0; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--paper); border: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--control); border-radius: 0 2px 2px 0; }
.civilian-search.civilian-search--masthead .wp-block-search__button:hover { color: var(--wp--preset--color--paper); background: var(--wp--preset--color--plum); border-color: var(--wp--preset--color--plum); }
.civilian-search.civilian-search--masthead .wp-block-search__button svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
/* Focus on the joined control: the field's ring goes round field and button together, and the button's sits inside it, so neither ring runs under the other half. */
.civilian-search.civilian-search--masthead .wp-block-search__inside-wrapper:has(.wp-block-search__input:focus-visible) { outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--plum); outline-offset: var(--wp--custom--focus--offset); border-radius: 2px; }
.civilian-search.civilian-search--masthead .wp-block-search__input:focus-visible { outline: 0; }
.civilian-search.civilian-search--masthead .wp-block-search__button:focus-visible { outline-offset: calc(-2 * var(--wp--custom--focus--width)); }
/* Navigation rail: plain words, left-aligned, wrapping; current section underlined in plum. */
.civilian-sections { width: 100%; border-top: var(--wp--custom--rule--section) solid var(--wp--preset--color--ink); border-bottom: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--rule); }
.civilian-sections ul { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 clamp(1rem, 2.2vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.civilian-sections a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0;
  color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--body); font-weight: 600; line-height: 1.2; text-decoration: none;
}
.civilian-sections a:hover, .civilian-sections a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--wp--preset--color--plum); text-decoration-thickness: 2px; text-underline-offset: .35em;
}
/* "Ran out of room". From 64rem, in any browser running scripts, the five smaller sections sit behind the toggle in a
   panel under it from the first paint (the "scripting" media feature, so nothing shows and then hides while nav.js
   loads); The Void keeps the right-hand end. On phones, and without JavaScript, the panel's links continue the row. */
.civilian-sections .civilian-sections__more, .civilian-sections .civilian-sections__panel { display: contents; }
.civilian-sections__toggle {
  display: none; align-items: center; gap: .4rem; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--wp--preset--color--ink); font: inherit; font-size: var(--wp--preset--font-size--body); font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.civilian-sections__toggle svg { flex: none; transition: transform .15s ease; }
.civilian-sections__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.civilian-sections__toggle:hover, .civilian-sections__toggle[aria-expanded="true"], .civilian-sections__more:has([aria-current="page"]) .civilian-sections__toggle { color: var(--wp--preset--color--plum); }
.civilian-sections__toggle:focus-visible { outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--plum); outline-offset: var(--wp--custom--focus--offset); }
@media (min-width: 64rem) {
  .civilian-sections { position: relative; z-index: 30; }
  .civilian-sections a { white-space: nowrap; }
  .civilian-sections__void { margin-inline-start: auto; }
}
@media (min-width: 64rem) and (scripting: enabled) {
  .civilian-sections ul { flex-wrap: nowrap; gap: 0 clamp(.875rem, 1.6vw, 1.75rem); }
  .civilian-sections__toggle { display: inline-flex; }
  .civilian-sections .civilian-sections__more { display: block; position: relative; }
  .civilian-sections .civilian-sections__panel {
    display: block; position: absolute; top: calc(100% + 1px); left: -1rem; min-width: 15rem; padding-block: .5rem; background: var(--wp--preset--color--paper);
    border-top: 2px solid var(--wp--preset--color--ink); box-shadow: 0 10px 24px rgb(0 0 0 / .1), 0 1px 0 var(--wp--preset--color--rule);
  }
  .civilian-sections .civilian-sections__panel:not(.is-open) { display: none; }
  .civilian-sections__panel a { display: flex; min-height: 0; padding: .55rem 1rem; }
}
/* The masthead's view-transition name makes it a stack of its own; lift it so the panel sits over the page. */
.civilian-masthead { position: relative; z-index: 20; }
/* Below 64rem the menu is one row that scrolls sideways, with a fade at the right edge. */
@media (max-width: 63.999rem) {
  .civilian-sections ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); padding-inline-end: 2rem; }
  .civilian-sections ul::-webkit-scrollbar { display: none; }
  .civilian-sections li { flex: none; }
  .civilian-sections a { white-space: nowrap; }
}
/* Phones (2026-11-05, baseline audit): the masthead took about 310px before any story. Now the artwork and a search icon
   share one row, the field opens beneath them when asked for (nav.js; without it the icon goes to the search page),
   and the tagline shows on the homepage only (it is also in the footer). */
.civilian-search-toggle { display: none; }
@media (max-width: 39.999rem) {
  .civilian-masthead__row { flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
  .civilian-masthead__brand { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: flex-start; }
  .civilian-tagline { max-width: 13rem; margin: 0; } /* Breaks after "page.", as on desktop. */
  body:not(.home) .civilian-tagline { display: none; }
  /* Level with the artwork (about 69px tall at this width), not with the artwork and tagline together. */
  .civilian-search-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; align-self: flex-start; width: 44px; height: 44px; margin-block-start: .75rem; margin-inline-start: auto; color: var(--wp--preset--color--ink); border: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--control); border-radius: 2px; }
  .civilian-search-toggle svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
  .civilian-search-toggle .civilian-search-toggle__close, .civilian-search-toggle[aria-expanded="true"] svg:first-child { display: none; }
  .civilian-search-toggle[aria-expanded="true"] .civilian-search-toggle__close { display: block; } /* Open: a cross, so the two magnifiers don't stack. */
  .civilian-search-toggle:hover, .civilian-search-toggle[aria-expanded="true"] { color: var(--wp--preset--color--paper); background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); }
  .civilian-search-toggle:focus-visible { outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--plum); outline-offset: var(--wp--custom--focus--offset); }
  .civilian-search--masthead { display: none; flex-basis: 100%; }
  .civilian-masthead.is-searching .civilian-search--masthead { display: block; }
}

/* Page shell */
.civilian-main { padding-block: clamp(1.75rem, 4vw, 2.75rem) var(--wp--preset--spacing--60); }
.civilian-article, .civilian-listing, .civilian-notice { width: 100%; }

/* Article header: wider measure than the reading column, closed by a hairline */
.civilian-article__header {
  padding-block-end: var(--wp--preset--spacing--40);
  margin-block-end: var(--wp--preset--spacing--50);
  border-bottom: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--rule);
}
.civilian-article__header > * { max-width: var(--wp--custom--measure--header); }
.civilian-article__header > .wp-block-post-title { max-width: 64rem; } /* The headline is the most important thing on the page: it may run wider than the rest of the header (user decision). */
.civilian-article .wp-block-post-title { margin-block: 0; overflow-wrap: break-word; hyphens: manual; }
/* Section label above the headline, as the 2013–2016 site set it; renders only for a real section. */
.civilian-section-label {
  margin: 0 0 .625rem;
  font-size: var(--wp--preset--font-size--label);
  font-weight: 800;
  font-stretch: var(--wp--custom--stretch--label);
  letter-spacing: var(--wp--custom--tracking--label);
  line-height: var(--wp--custom--line-height--ui);
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
}
.civilian-section-label a { display: inline-block; padding-block: .75rem; margin-block: -.75rem; color: inherit; text-decoration: none; }
.civilian-section-label a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--plum); text-decoration-thickness: 2px; }
.civilian-article__meta { gap: .25rem .5rem; } /* Date, then the quiet Copy link beside it. */
.civilian-article__dateline { gap: .25rem 1rem; align-items: baseline; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); line-height: var(--wp--custom--line-height--ui); }
.civilian-article__dateline > * { margin: 0; }
.civilian-byline { color: var(--wp--preset--color--ink); font-weight: 600; }
/* Breathing room between the headline and its date (baseline audit, 2026-11-05: the date sat on the descenders). */
.civilian-article__header > .civilian-article__meta { margin-block-start: .75rem; }
/* Phones: the date line, then Copy link aligned to the text edge (its button padding pulled back), and a shorter
   gap down to the photo, so the story itself starts higher. */
@media (max-width: 39.999rem) {
  .civilian-article__header { padding-block-end: var(--wp--preset--spacing--30); margin-block-end: var(--wp--preset--spacing--40); }
  .civilian-article__header .civilian-article__meta.is-layout-flex { flex-direction: column; align-items: flex-start; gap: 0; } /* Over the block layout's own centring. */
  .civilian-article__meta .civilian-sharing--top { margin-inline-start: -.5rem; margin-block-end: -.5rem; }
}

/* The archive nameplate (section fronts, search, subjects, people, organisations, the indexes and the 404): the name at
   display size, a muted line of facts at the right, on the plum rule. */
.civilian-front__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem; padding-block-end: var(--wp--preset--spacing--20); border-bottom: var(--wp--custom--rule--brand) solid var(--wp--preset--color--plum); }
.civilian-front__head > * { margin: 0; }
.civilian-front__name { font-size: var(--wp--preset--font-size--display); font-weight: 900; font-stretch: 70%; line-height: .95; letter-spacing: var(--wp--custom--tracking--headline); color: var(--wp--preset--color--ink); overflow-wrap: break-word; }
.civilian-front__meta { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); font-variant-numeric: tabular-nums; }
.civilian-front__meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--wp--preset--color--rule); text-underline-offset: .2em; }
.civilian-front__meta a:hover { color: var(--wp--preset--color--plum); text-decoration-color: var(--wp--preset--color--plum); }
.civilian-listing > .civilian-term-head { margin-block-end: var(--wp--preset--spacing--40); }
@media (min-width: 52rem) { .civilian-listing:has(> .civilian-term-head) .civilian-river { max-width: none; } }
/* Index pages: the nameplate replaces the page title, and the page header's own hairline steps aside. */
.civilian-article__header:has(> .civilian-index-head) { padding-block-end: 0; border-bottom: 0; }
.civilian-article__header > .civilian-index-head { max-width: none; }
/* The 404 opens with the nameplate across the top; the photo and text sit below it. */
.civilian-notice.civilian-notice--not-found > h1 { margin-block-end: var(--wp--preset--spacing--10); padding-block-end: var(--wp--preset--spacing--20); border-bottom: var(--wp--custom--rule--brand) solid var(--wp--preset--color--plum); font-size: var(--wp--preset--font-size--display); font-weight: 900; font-stretch: 70%; line-height: .95; letter-spacing: var(--wp--custom--tracking--headline); color: var(--wp--preset--color--ink); }

/* Listings: category and date archives, search, homepage. A river of stories, each an optional small inset thumbnail beside text. */
.civilian-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.civilian-listing > .wp-block-query-title {
  margin-block: 0 var(--wp--preset--spacing--40); padding-block-end: var(--wp--preset--spacing--30);
  max-width: var(--wp--custom--measure--header); border-bottom: var(--wp--custom--rule--section) solid var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--headline); font-stretch: var(--wp--custom--stretch--headline); line-height: var(--wp--custom--line-height--tight); letter-spacing: var(--wp--custom--tracking--headline); overflow-wrap: break-word;
}
.civilian-listing > .civilian-search { max-width: var(--wp--custom--measure--header); margin-block-end: var(--wp--preset--spacing--40); }
.civilian-river { max-width: var(--wp--custom--measure--header); }
.civilian-river__list { margin: 0; padding: 0; list-style: none; }
.civilian-river__item { position: relative; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1rem 1.5rem; padding-block: var(--wp--preset--spacing--40); border-top: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--rule); }
.civilian-river__list > li:first-child .civilian-river__item { border-top: 0; }
.civilian-river__text { flex: 1 1 0; min-width: 0; }
.civilian-river__text > * { margin-block: 0; }
.civilian-river__text > * + * { margin-block-start: .375rem; }
.civilian-river__text .civilian-section-label { margin: 0 0 .125rem; }
.civilian-river__item .wp-block-post-title { font-size: var(--wp--preset--font-size--h3); overflow-wrap: break-word; }
.civilian-river__item .wp-block-post-title a, .civilian-lead .wp-block-post-title a, .civilian-related__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.civilian-river__item .wp-block-post-title a { padding-block: .125rem; } /* WCAG 2.5.8: a one-line headline link is at least 24px tall; inline padding leaves the layout as it was. */
.civilian-river__item .wp-block-post-title a:hover, .civilian-lead .wp-block-post-title a:hover, .civilian-related__title a:hover { color: var(--wp--preset--color--plum); text-decoration: underline; text-decoration-color: var(--wp--preset--color--plum-tint); }
/* Whole row is one target: the headline link stretches over it; the section label stays its own link above. */
.civilian-river__item .wp-block-post-title a::after, .civilian-lead .wp-block-post-title a::after, .civilian-related__title a::after { content: ""; position: absolute; inset: 0; }
.civilian-river__text .civilian-section-label, .civilian-lead .civilian-section-label, .civilian-related__section { position: relative; z-index: 1; }
/* WordPress positions featured-image figures, which lifted the photo above the stretched link: clicks on it missed. */
.civilian-river__item .wp-block-post-featured-image, .civilian-lead .wp-block-post-featured-image { position: static; }
/* Pointing at the photo shows the headline's hover, as pointing at the headline does. */
.civilian-river__item:has(.wp-block-post-featured-image:hover) .wp-block-post-title a, .civilian-lead:has(.wp-block-post-featured-image:hover) .wp-block-post-title a { color: var(--wp--preset--color--plum); text-decoration: underline; text-decoration-color: var(--wp--preset--color--plum-tint); }
.civilian-river__item:has(a:focus-visible), .civilian-lead:has(a:focus-visible) { outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--plum); outline-offset: calc(-1 * var(--wp--custom--focus--width)); }
.civilian-river__item a:focus-visible, .civilian-lead a:focus-visible { outline: 0; }
.civilian-river__thumb { flex: none; width: 6.5rem; margin: 0; }
.civilian-river__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 40rem) { .civilian-river__thumb { width: 9rem; } }
.civilian-river .wp-block-query-pagination { margin-block-start: var(--wp--preset--spacing--40); padding-block-start: var(--wp--preset--spacing--30); border-top: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--rule); gap: .25rem .75rem; font-size: var(--wp--preset--font-size--small); }
.civilian-river .wp-block-query-pagination :where(a, .page-numbers) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding-inline: .5rem; color: var(--wp--preset--color--ink); font-weight: 600; text-decoration: none; }
.civilian-river .wp-block-query-pagination a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--plum); text-decoration-thickness: 2px; }
.civilian-river .wp-block-query-pagination .current { border-bottom: 2px solid var(--wp--preset--color--plum); }
.civilian-river .wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; }
/* "All headlines" link: on the homepage and under Latest on stories */
.civilian-more-link { margin: var(--wp--preset--spacing--30) 0 0; font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: var(--wp--custom--tracking--label); text-transform: uppercase; }
.civilian-more-link a { display: inline-flex; align-items: center; min-height: 44px; color: var(--wp--preset--color--ink); text-decoration: none; }
.civilian-more-link a::after { content: ""; width: .45em; height: .45em; margin-inline-start: .5em; border-block-start: 2px solid var(--wp--preset--color--plum); border-inline-end: 2px solid var(--wp--preset--color--plum); transform: rotate(45deg); }
.civilian-more-link a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--plum); text-decoration-thickness: 2px; }

/* Entering The Void: the page shrinks and blurs while a dark iris opens from the menu link (void-link.js) */
html.civilian-entering-void { overflow: hidden; }
html.civilian-entering-void .wp-site-blocks { transform-origin: var(--civilian-void-x, 50%) var(--civilian-void-y, 0); animation: civilian-void-swallow 1.1s cubic-bezier(.55, 0, .75, .2) forwards; }
@property --civilian-void-r { syntax: "<length>"; inherits: false; initial-value: -14vmax; } /* Animatable radius for the feathered iris. */
html.civilian-entering-void body::after { content: ""; position: fixed; inset: 0; z-index: 100000; background: #07040a; pointer-events: auto; -webkit-mask-image: radial-gradient(circle at var(--civilian-void-x, 50%) var(--civilian-void-y, 0), #000 var(--civilian-void-r), transparent calc(var(--civilian-void-r) + 14vmax)); mask-image: radial-gradient(circle at var(--civilian-void-x, 50%) var(--civilian-void-y, 0), #000 var(--civilian-void-r), transparent calc(var(--civilian-void-r) + 14vmax)); animation: civilian-void-iris 1.1s cubic-bezier(.7, 0, .85, .45) forwards; }
@keyframes civilian-void-swallow { to { transform: scale(.84) rotate(-1.5deg); filter: blur(6px) saturate(.2); opacity: .3; } }
@keyframes civilian-void-iris { from { --civilian-void-r: -14vmax; } 55% { --civilian-void-r: 4vmax; } to { --civilian-void-r: 170vmax; } }
@keyframes civilian-void-fade { to { opacity: 1; } }
/* Not found */
.civilian-notice { max-width: var(--wp--style--global--content-size); }
.civilian-notice > * { margin-block: 0; }
.civilian-notice > * + * { margin-block-start: var(--wp--preset--spacing--40); }
.civilian-notice h1 { font-size: var(--wp--preset--font-size--subheading); }
/* Not found, with the "NO" photograph (user request 2026-10-22): below the heading on phones; beside the notice from 48rem. */
.civilian-notice--not-found { display: grid; grid-template-columns: minmax(0, 1fr); max-width: var(--wp--style--global--wide-size); }
.civilian-notice__photo { margin-inline: 0; margin-block-end: 0; } /* The notice's own spacing above it on phones. */
.civilian-notice__photo img { display: block; width: 100%; max-width: 860px; height: auto; }
@media (min-width: 48rem) {
  .civilian-notice--not-found { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); column-gap: var(--wp--preset--spacing--50); align-items: start; }
  .civilian-notice--not-found > * { grid-column: 1; }
  .civilian-notice.civilian-notice--not-found > h1 { grid-column: 1 / -1; }
  .civilian-notice--not-found > .civilian-notice__photo { grid-column: 2; grid-row: 2 / span 4; margin-block-start: 0; }
}

/* Search form */
.civilian-search .wp-block-search__label { display: block; margin-block-end: .375rem; font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.civilian-search .wp-block-search__inside-wrapper { gap: .5rem; }
.civilian-search .wp-block-search__input {
  min-height: 44px; padding: .5rem .75rem; font: inherit; color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--paper); border: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--control); border-radius: 2px;
}
.civilian-search .wp-block-search__button {
  min-height: 44px; margin: 0; padding: .5rem 1.125rem; font-family: inherit; font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.2;
  color: var(--wp--preset--color--paper); background: var(--wp--preset--color--ink); border: 0; border-radius: 2px; cursor: pointer;
}
.civilian-search .wp-block-search__button:hover { background: var(--wp--preset--color--plum); }

/* Footer as a colophon (2026-10-22, revisited): the masthead figure and name, three labelled columns of links (Sections, Archive, The fine print), then the years the archive spans and back to top. */
.civilian-footer {
  display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40);
  padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
  border-top: var(--wp--custom--rule--section) solid var(--wp--preset--color--ink);
  color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small);
}
.civilian-footer__brand { flex-wrap: wrap; gap: .5rem .75rem; align-self: start; }
/* The masthead artwork and its italic ink tagline, as in the header (user decision 2026-11-06; before, a small silhouette beside the name in h4 type). */
.civilian-footer__title { margin: 0; color: var(--wp--preset--color--ink); }
.civilian-footer__title a { display: inline-block; } /* The focus ring wraps the artwork. */
.civilian-footer__artwork { display: block; width: 11rem; max-width: 100%; height: auto; aspect-ratio: 596 / 233; }
.civilian-footer__tagline { flex-basis: 100%; max-width: 13rem; margin: 0; color: var(--wp--preset--color--ink); font-style: italic; line-height: 1.3; } /* Breaks after "page.". */
.civilian-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); }
.civilian-footer__group--sections { grid-column: 1 / -1; }
.civilian-footer__label {
  margin: 0 0 .35rem; padding-block-end: .4rem; border-bottom: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--ink);
  color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--label); font-weight: 800;
  font-stretch: var(--wp--custom--stretch--label); letter-spacing: var(--wp--custom--tracking--label); line-height: 1.2; text-transform: uppercase;
}
.civilian-footer__nav ul { margin: 0; padding: 0; list-style: none; }
.civilian-footer__group--sections ul { columns: 2; column-gap: var(--wp--preset--spacing--40); }
.civilian-footer__nav li { break-inside: avoid; }
.civilian-footer__nav a { display: inline-flex; align-items: center; min-height: 2rem; color: var(--wp--preset--color--ink); font-weight: 500; }
.civilian-footer a:hover { color: var(--wp--preset--color--plum); text-decoration: underline; text-decoration-color: var(--wp--preset--color--plum); text-underline-offset: .2em; }
.civilian-footer a:focus-visible { outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--plum); outline-offset: var(--wp--custom--focus--offset); }
.civilian-footer__colophon { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 1.5rem; padding-block-start: .5rem; border-top: var(--wp--custom--rule--hairline) solid var(--wp--preset--color--rule); }
.civilian-footer__colophon p { margin: 0; }
.civilian-footer__jumps { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.civilian-footer__colophon a { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; color: var(--wp--preset--color--muted); }
/* The finer print: one step smaller than the fine print. */
.civilian-footer__group--finer .civilian-footer__label { font-size: .6875rem; }
.civilian-footer__group--finer a { min-height: 1.75rem; font-size: var(--wp--preset--font-size--label); }
@media (min-width: 48rem) {
  .civilian-footer { grid-template-columns: minmax(13rem, 1fr) 3fr; column-gap: var(--wp--preset--spacing--50); }
  .civilian-footer__nav { grid-template-columns: 2fr 1fr 1fr .8fr; }
  .civilian-footer__group--sections { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

@media print {
  body { border-top: 0; }
  .civilian-masthead { border-bottom-width: 1px; }
  .civilian-masthead::after, .civilian-sharing, .civilian-sections, .civilian-related, .skip-link { display: none !important; }
  .civilian-main { padding-block: 1rem 0; }
  .civilian-article__content :where(figure, img) { break-inside: avoid; }
  .civilian-article__content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: var(--wp--preset--color--muted); word-break: break-all; }
}

/* A headline that opens with a quotation mark hangs it into the margin, so the words align with the headlines around it (inc/typography.php). */
.civilian-hang { margin-inline-start: -.42em; }

/* Page transitions (inc/navigation.php): a short crossfade between pages; the masthead holds still; the chosen headline glides into place without stretching (its two snapshots keep their own size and crossfade). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .civilian-masthead { view-transition-name: civilian-masthead; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
  ::view-transition-group(civilian-headline) { animation-duration: 340ms; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  ::view-transition-old(civilian-headline), ::view-transition-new(civilian-headline) { width: auto; height: auto; animation-duration: 340ms; }
}