/* ===========================================================================
   WW2 VISUAL ARCHIVE — BLOCK STYLES
   ---------------------------------------------------------------------------

   The front-end CSS for every block style variation registered in
   inc/editor.php, plus the base treatment for the core blocks the archive
   actually uses (table, details, buttons, cover, separator, caption).

   This file is loaded twice, deliberately:

     • on the front end, from inc/setup.php (ww2va_blocks)
     • in the block editor canvas, from inc/editor.php's add_editor_style()

   So there is exactly one definition of what a "Spec plate" or a "Pull quote"
   looks like. If you change it here it changes in both places at once.

   Two rules learned the hard way on this project, obeyed throughout:

     1. NEVER put the archive's .gold gradient-text class on an element that
        sets its own background. It sets -webkit-text-fill-color:transparent
        and background-clip:text, so the element's own flat background wins and
        is clipped to the glyphs — the text turns invisible. Where a variation
        needs gradient text (.is-style-ww2va-gold-text) the gradient is set
        here explicitly, which is the correct use of the technique.

     2. NEVER use backdrop-filter inside a clip-path-ed container. Chrome
        rasterises the clipped layer at the wrong scale and the result is
        blurred and misaligned. Every frosted surface below is a solid
        translucent fill instead.

   Specificity note: variations are written as element compounds
   (h2.is-style-ww2va-stencil, blockquote.is-style-ww2va-pull) so they tie with
   the base rules in theme-extras.css and win on source order. blocks.css is
   always enqueued after theme-extras.css in both contexts, so the tie is
   always resolved in the variation's favour.
   =========================================================================== */

/* ===========================================================================
   01 · SHARED BLOCK PRIMITIVES
   ---------------------------------------------------------------------------
   Core blocks that the patterns lean on and that the design system does not
   already cover. These apply to every instance, not just a variation.
   =========================================================================== */

/* ---- Figures and captions ---- */

.wp-block-image {
	margin: 1.9em 0;
}

.wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

.wp-element-caption,
.wp-block-image figcaption,
.wp-block-table figcaption,
.wp-block-embed figcaption,
.wp-block-gallery figcaption {
	margin-top: 11px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	line-height: 1.62;
	letter-spacing: 0.05em;
	color: var(--faint);
	text-align: left;
}

.wp-element-caption a,
.wp-block-image figcaption a {
	color: var(--brass);
	border-bottom: 1px solid rgba(201, 150, 43, 0.3);
}

/* ---- Block quotes (base, before any variation) ---- */

.wp-block-quote {
	margin: 1.9em 0;
	padding: 20px 24px;
	border-left: 3px solid var(--brass);
	background: rgba(28, 22, 13, 0.6);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.wp-block-quote cite,
.wp-block-quote__citation {
	display: block;
	margin-top: 12px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10px;
	font-style: normal;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brass);
}

/* ---- Tables (base) ---- */

.wp-block-table {
	margin: 1.9em 0;
	overflow-x: auto;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

/* ---- Separator (base) ---- */

.wp-block-separator {
	border: 0;
	height: 1px;
	margin: 2.4em 0;
	background: linear-gradient(90deg, transparent, rgba(201, 150, 43, 0.4), transparent);
}

.wp-block-separator.is-style-dots {
	background: none;
}

/* ---- Details / summary — the FAQ accordion ----
   Native <details>, so it works with JavaScript disabled and search engines
   can read every answer. Styled rather than replaced. */

.wp-block-details {
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: linear-gradient(165deg, rgba(28, 22, 13, 0.66), rgba(11, 9, 6, 0.6));
	overflow: hidden;
	margin: 1.1em 0;
}

.wp-block-details + .wp-block-details {
	margin-top: 9px;
}

.wp-block-details summary {
	position: relative;
	cursor: pointer;
	list-style: none;
	padding: 15px 52px 15px 18px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--gold);
	transition: color 0.22s, background 0.22s;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::marker {
	content: '';
}

.wp-block-details summary:hover {
	color: var(--gold-lt);
	background: rgba(201, 150, 43, 0.06);
}

/* The +/− indicator, drawn rather than typed so it never depends on a font. */
.wp-block-details summary::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 18px;
	width: 11px;
	height: 11px;
	margin-top: -5.5px;
	background:
		linear-gradient(var(--brass), var(--brass)) center / 11px 1.5px no-repeat,
		linear-gradient(var(--brass), var(--brass)) center / 1.5px 11px no-repeat;
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-details[open] summary::after {
	transform: rotate(90deg);
}

.wp-block-details[open] summary {
	color: var(--gold-lt);
	border-bottom: 1px solid var(--line);
}

.wp-block-details > *:not(summary) {
	padding-left: 18px;
	padding-right: 18px;
}

.wp-block-details > *:first-of-type:not(summary) {
	padding-top: 15px;
}

.wp-block-details > *:last-child {
	padding-bottom: 17px;
	margin-bottom: 0;
}

/* ---- Buttons ----
   Styled to match the design system's .btn / .btn-gold, so a button dropped
   into a post is indistinguishable from one in a template. */

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 1.9em 0;
}

.wp-block-button {
	margin: 0;
}

.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--gold-lt), var(--brass));
	color: #0b0906;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 12px 34px rgba(201, 150, 43, 0.3);
	transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.28s;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 46px rgba(201, 150, 43, 0.46);
	color: #0b0906;
}

.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--gold-lt);
	outline-offset: 3px;
}

/* ---- Cover ----
   The scrim is core's own overlay; this only adds the archive's vignette and
   constrains the inner container so text never runs the full width of a
   2560px monitor. */

.wp-block-cover {
	border-radius: var(--radius);
	overflow: hidden;
	margin: 1.9em 0;
}

.wp-block-cover__inner-container {
	max-width: 780px;
	margin: 0 auto;
	padding: 34px 26px;
}

.wp-block-cover .wp-block-heading {
	color: var(--bone);
	text-shadow: 0 3px 30px rgba(0, 0, 0, 0.75);
}

.wp-block-cover p {
	color: rgba(239, 231, 215, 0.9);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}

/* ---- Columns ---- */

.wp-block-columns {
	gap: var(--gap-md, 22px);
	margin: 1.9em 0;
}

.wp-block-column > *:first-child {
	margin-top: 0;
}

.wp-block-column > *:last-child {
	margin-bottom: 0;
}

/* ---- Lists (base) ---- */

.wp-block-list {
	padding-left: 1.35em;
}

/* ===========================================================================
   02 · PARAGRAPH VARIATIONS
   =========================================================================== */

/* ---- Lead — the opening paragraph ---- */

p.is-style-ww2va-lead {
	font-size: clamp(1.05rem, 1.7vw, 1.24rem);
	line-height: 1.68;
	color: var(--bone);
	font-weight: 400;
	letter-spacing: -0.004em;
}

/* ---- Label — mono uppercase ---- */

p.is-style-ww2va-label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--brass);
	margin: 1.5em 0 0.5em;
}

p.is-style-ww2va-label + * {
	margin-top: 0.4em;
}

/* ---- Note — small print ---- */

p.is-style-ww2va-note {
	font-size: 0.82em;
	line-height: 1.66;
	color: var(--faint);
	padding-left: 13px;
	border-left: 1px solid rgba(201, 150, 43, 0.24);
}

p.is-style-ww2va-note a {
	color: var(--brass);
}

/* ---- Drop cap — archive plate ----
   Flat brass colour, not the .gold gradient: a ::first-letter cannot carry a
   background-clip without the collision described at the top of this file. */

p.is-style-ww2va-dropcap::first-letter {
	float: left;
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: 3.5em;
	line-height: 0.8;
	margin: 0.06em 0.1em 0 0;
	padding: 0.06em 0.13em 0.03em;
	color: var(--gold);
	background: rgba(201, 150, 43, 0.08);
	border: 1px solid rgba(201, 150, 43, 0.32);
	border-radius: 5px;
}

/* ===========================================================================
   03 · HEADING VARIATIONS
   =========================================================================== */

/* ---- Stencil — stamped ---- */

h1.is-style-ww2va-stencil,
h2.is-style-ww2va-stencil,
h3.is-style-ww2va-stencil,
h4.is-style-ww2va-stencil,
h5.is-style-ww2va-stencil,
h6.is-style-ww2va-stencil {
	font-family: 'Black Ops One', Anton, sans-serif;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--bone);
}

/* ---- Eyebrow — section label ---- */

p.is-style-ww2va-eyebrow,
h1.is-style-ww2va-eyebrow,
h2.is-style-ww2va-eyebrow,
h3.is-style-ww2va-eyebrow,
h4.is-style-ww2va-eyebrow,
h5.is-style-ww2va-eyebrow,
h6.is-style-ww2va-eyebrow {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--brass);
	margin: 1.6em 0 0.55em;
}

p.is-style-ww2va-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* A hairline that runs out from the label, as on the front-page section heads. */
p.is-style-ww2va-eyebrow::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, rgba(201, 150, 43, 0.42), transparent);
}

/* ---- Gold — gradient display text ----
   The gradient is set here on purpose; this is the one correct way to use
   background-clip:text. Do not add a background to a block that carries this
   class, and do not carry this class on a group or cover. */

p.is-style-ww2va-gold-text,
h1.is-style-ww2va-gold-text,
h2.is-style-ww2va-gold-text,
h3.is-style-ww2va-gold-text,
h4.is-style-ww2va-gold-text,
h5.is-style-ww2va-gold-text,
h6.is-style-ww2va-gold-text {
	background: linear-gradient(
		175deg,
		#fff3ce 0%,
		var(--gold-lt) 18%,
		var(--gold) 48%,
		var(--brass) 76%,
		var(--brass-dk) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--gold);
}

/* ===========================================================================
   04 · LIST VARIATIONS
   =========================================================================== */

/* ---- Dossier — a filed list ----
   No bullets. Each entry is numbered in brass Anton with a hairline under it,
   the way a declassified index actually looks. */

ul.is-style-ww2va-dossier,
ol.is-style-ww2va-dossier {
	list-style: none;
	padding-left: 0;
	counter-reset: ww2va-dossier;
}

.is-style-ww2va-dossier li {
	position: relative;
	counter-increment: ww2va-dossier;
	padding: 13px 0 13px 52px;
	border-bottom: 1px solid rgba(201, 150, 43, 0.14);
	line-height: 1.66;
}

.is-style-ww2va-dossier li:first-child {
	border-top: 1px solid rgba(201, 150, 43, 0.14);
}

.is-style-ww2va-dossier li::before {
	content: counter(ww2va-dossier, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 11px;
	font-family: Anton, sans-serif;
	font-size: 17px;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--brass);
	opacity: 0.85;
}

.is-style-ww2va-dossier li::marker {
	content: '';
}

.is-style-ww2va-dossier li + li {
	margin-top: 0;
}

/* ---- Checklist ---- */

ul.is-style-ww2va-checklist {
	list-style: none;
	padding-left: 0;
}

.is-style-ww2va-checklist li {
	position: relative;
	padding-left: 30px;
	line-height: 1.68;
}

.is-style-ww2va-checklist li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.34em;
	width: 15px;
	height: 15px;
	border: 1px solid rgba(201, 150, 43, 0.5);
	border-radius: 3px;
	background:
		linear-gradient(45deg, transparent 44%, var(--gold) 44% 56%, transparent 56%) 3px 6.5px / 5px 5px no-repeat,
		linear-gradient(-45deg, transparent 44%, var(--gold) 44% 56%, transparent 56%) 6.5px 4.5px / 8px 8px no-repeat,
		rgba(201, 150, 43, 0.07);
}

.is-style-ww2va-checklist li::marker {
	content: '';
}

/* ---- Spec list — key / value ----
   A definition-style run where each entry is  Label — value. The label is the
   first <strong>; everything after it is the value. Renders as a technical
   read-out rather than a bulleted list. */

ul.is-style-ww2va-spec-list,
ol.is-style-ww2va-spec-list {
	list-style: none;
	padding-left: 0;
}

.is-style-ww2va-spec-list li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px dashed rgba(201, 150, 43, 0.2);
	line-height: 1.6;
}

.is-style-ww2va-spec-list li::marker {
	content: '';
}

.is-style-ww2va-spec-list li > strong:first-child,
.is-style-ww2va-spec-list li > b:first-child {
	flex: 0 0 auto;
	min-width: 34%;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--brass);
}

.is-style-ww2va-spec-list li > strong:first-child::after {
	content: '';
}

/* ===========================================================================
   05 · QUOTE VARIATIONS
   =========================================================================== */

/* ---- Pull quote — archive ----
   Resets the base blockquote chrome entirely: no left rule, no panel. Set
   centred at display size with a brass rule above and below. */

blockquote.is-style-ww2va-pull {
	margin: 2.3em 0;
	padding: 26px 0 22px;
	border: 0;
	border-top: 1px solid rgba(201, 150, 43, 0.32);
	border-bottom: 1px solid rgba(201, 150, 43, 0.32);
	border-radius: 0;
	background: none;
	text-align: center;
}

blockquote.is-style-ww2va-pull p {
	font-family: Anton, sans-serif;
	font-weight: 400;
	font-size: clamp(1.28rem, 2.9vw, 2.05rem);
	line-height: 1.24;
	letter-spacing: 0.005em;
	color: var(--bone);
	margin: 0;
}

blockquote.is-style-ww2va-pull p::first-letter {
	color: var(--gold);
}

blockquote.is-style-ww2va-pull cite,
blockquote.is-style-ww2va-pull .wp-block-quote__citation {
	display: block;
	margin-top: 16px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10px;
	font-style: normal;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--brass);
}

/* ---- Dispatch — with citation ----
   The archive's wire-report look: brass spine, mono dateline, the quote itself
   set in the body face. */

blockquote.is-style-ww2va-dispatch {
	position: relative;
	margin: 2em 0;
	padding: 20px 24px 20px 28px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--brass);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: linear-gradient(165deg, rgba(28, 22, 13, 0.78), rgba(11, 9, 6, 0.66));
}

blockquote.is-style-ww2va-dispatch p {
	margin: 0;
	color: var(--bone);
	font-size: 1.02em;
	line-height: 1.72;
}

blockquote.is-style-ww2va-dispatch cite,
blockquote.is-style-ww2va-dispatch .wp-block-quote__citation {
	display: block;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(201, 150, 43, 0.2);
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10px;
	font-style: normal;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--brass);
}

/* ===========================================================================
   06 · TABLE — SPEC PLATE
   ---------------------------------------------------------------------------
   Two columns: the label column is mono brass, the value column bone. Outer
   border removed, rows separated by a hairline. This is the single most-used
   block style on the site — every machine dossier has one.
   =========================================================================== */

.wp-block-table.is-style-ww2va-spec {
	margin: 1.9em 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: linear-gradient(165deg, rgba(28, 22, 13, 0.6), rgba(11, 9, 6, 0.52));
	overflow: hidden;
}

.wp-block-table.is-style-ww2va-spec table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	font-size: 0.94em;
}

.wp-block-table.is-style-ww2va-spec th,
.wp-block-table.is-style-ww2va-spec td {
	border: 0;
	border-bottom: 1px solid rgba(201, 150, 43, 0.15);
	padding: 12px 18px;
	text-align: left;
	vertical-align: top;
	background: none;
}

.wp-block-table.is-style-ww2va-spec tr:last-child td,
.wp-block-table.is-style-ww2va-spec tr:last-child th {
	border-bottom: 0;
}

/* Label column — mono, brass, uppercase. */
.wp-block-table.is-style-ww2va-spec tbody td:first-child,
.wp-block-table.is-style-ww2va-spec tbody th:first-child {
	width: 40%;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--brass);
	border-right: 1px solid rgba(201, 150, 43, 0.15);
}

/* Value column — bone, slightly heavier so it reads as the answer. */
.wp-block-table.is-style-ww2va-spec tbody td:last-child {
	color: var(--bone);
	font-weight: 500;
}

.wp-block-table.is-style-ww2va-spec thead th {
	background: rgba(201, 150, 43, 0.09);
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
	border-bottom: 1px solid rgba(201, 150, 43, 0.3);
}

.wp-block-table.is-style-ww2va-spec tr:nth-child(even) td {
	background: rgba(6, 5, 4, 0.24);
}

/* ===========================================================================
   07 · GROUP VARIATIONS
   ---------------------------------------------------------------------------
   Registered for core/group but also applied to core/column in the Key facts
   pattern, so the selectors are intentionally class-only, not element-bound.
   =========================================================================== */

/* ---- Brass plate ----
   The signature container. Rivets are drawn with ::before / ::after rather
   than injected markup so they survive the block editor's re-rendering. */

.is-style-ww2va-plate {
	position: relative;
	padding: clamp(22px, 3.2vw, 34px);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: linear-gradient(165deg, rgba(28, 22, 13, 0.94), rgba(11, 9, 6, 0.94));
	box-shadow:
		inset 0 1px 0 rgba(242, 206, 107, 0.08),
		0 20px 48px rgba(0, 0, 0, 0.5);
}

.is-style-ww2va-plate::before,
.is-style-ww2va-plate::after {
	content: '';
	position: absolute;
	top: 12px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 30%, var(--gold), #6d5310 72%);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
	pointer-events: none;
	z-index: 1;
}

.is-style-ww2va-plate::before {
	left: 12px;
}

.is-style-ww2va-plate::after {
	right: 12px;
}

/* The first and last child inside a plate should not fight the padding. */
.is-style-ww2va-plate > *:first-child,
.is-style-ww2va-plate > .wp-block-group__inner-container > *:first-child {
	margin-top: 0;
}

.is-style-ww2va-plate > *:last-child,
.is-style-ww2va-plate > .wp-block-group__inner-container > *:last-child {
	margin-bottom: 0;
}

/* A heading inside a plate needs to clear the rivets. */
.is-style-ww2va-plate > .wp-block-heading:first-child {
	padding-right: 26px;
}

/* ---- Plate — tinted section ----
   Same construction, but the fill is a brass wash instead of coal. Used to
   mark a section out without a hard border. */

.is-style-ww2va-plate-tinted {
	position: relative;
	padding: clamp(24px, 3.4vw, 38px);
	border: 1px solid rgba(201, 150, 43, 0.28);
	border-radius: var(--radius);
	background:
		linear-gradient(165deg, rgba(201, 150, 43, 0.13), rgba(28, 22, 13, 0.86) 46%, rgba(11, 9, 6, 0.9));
	box-shadow:
		inset 0 1px 0 rgba(242, 206, 107, 0.1),
		0 20px 48px rgba(0, 0, 0, 0.46);
}

.is-style-ww2va-plate-tinted > *:first-child {
	margin-top: 0;
}

.is-style-ww2va-plate-tinted > *:last-child {
	margin-bottom: 0;
}

/* ---- Frame — outline only ----
   No fill at all. The timeline pattern uses it to hold a dated run. */

.is-style-ww2va-frame {
	position: relative;
	padding: clamp(20px, 3vw, 30px);
	border: 1px dashed rgba(201, 150, 43, 0.3);
	border-radius: var(--radius-sm);
	background: none;
	box-shadow: none;
}

.is-style-ww2va-frame > *:first-child {
	margin-top: 0;
}

.is-style-ww2va-frame > *:last-child {
	margin-bottom: 0;
}

/* Inside a frame the separators should be quiet hairlines, not glows. */
.is-style-ww2va-frame .wp-block-separator {
	height: 1px;
	margin: 1.5em 0;
	background: rgba(201, 150, 43, 0.18);
}

/* ---- Callout — brass edge ----
   A single brass rule down the left and a whisper of fill. Deliberately the
   lightest of the four containers, because a callout is an aside, not a
   section. */

.is-style-ww2va-callout {
	position: relative;
	padding: 18px 22px;
	border: 0;
	border-left: 3px solid var(--brass);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: linear-gradient(90deg, rgba(201, 150, 43, 0.09), rgba(201, 150, 43, 0.015) 62%, transparent);
	box-shadow: none;
}

.is-style-ww2va-callout > *:first-child {
	margin-top: 0;
}

.is-style-ww2va-callout > *:last-child {
	margin-bottom: 0;
}

.is-style-ww2va-callout .is-style-ww2va-label {
	margin-top: 0;
	margin-bottom: 0.55em;
}

/* ===========================================================================
   08 · COLUMNS — COMPARISON
   ---------------------------------------------------------------------------
   Two plates side by side. The before/after pattern drops two archival images
   in here. On narrow screens core stacks the columns; the brass rule moves
   from between them to above them.
   =========================================================================== */

.wp-block-columns.is-style-ww2va-compare {
	position: relative;
	gap: clamp(14px, 2.2vw, 26px);
	align-items: stretch;
}

.wp-block-columns.is-style-ww2va-compare > .wp-block-column {
	position: relative;
	margin: 0;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: linear-gradient(165deg, rgba(28, 22, 13, 0.7), rgba(11, 9, 6, 0.6));
}

/* The hairline standing between the two plates. */
.wp-block-columns.is-style-ww2va-compare > .wp-block-column + .wp-block-column::before {
	content: '';
	position: absolute;
	left: calc(-1 * clamp(7px, 1.1vw, 13px) - 1px);
	top: 12%;
	bottom: 12%;
	width: 1px;
	background: linear-gradient(180deg, transparent, rgba(201, 150, 43, 0.45), transparent);
}

.wp-block-columns.is-style-ww2va-compare .wp-block-image {
	margin: 0;
}

.wp-block-columns.is-style-ww2va-compare .wp-block-image img {
	border-radius: 4px;
}

.wp-block-columns.is-style-ww2va-compare figcaption {
	margin-top: 10px;
	padding-top: 9px;
	border-top: 1px solid rgba(201, 150, 43, 0.18);
	font-size: 10.5px;
	line-height: 1.55;
}

/* ===========================================================================
   09 · IMAGE — ARCHIVAL PLATE
   ---------------------------------------------------------------------------
   A restored frame presented as an artefact: brass hairline, inner shadow, a
   caption ruled off from the plate above it.
   =========================================================================== */

.wp-block-image.is-style-ww2va-archival {
	margin: 2em 0;
}

.wp-block-image.is-style-ww2va-archival img {
	width: 100%;
	border-radius: 5px;
	border: 1px solid rgba(201, 150, 43, 0.3);
	box-shadow:
		inset 0 0 0 1px rgba(6, 5, 4, 0.6),
		0 22px 50px rgba(0, 0, 0, 0.55);
}

.wp-block-image.is-style-ww2va-archival figcaption,
.wp-block-image.is-style-ww2va-archival .wp-element-caption {
	margin-top: 12px;
	padding: 10px 0 0 13px;
	border-top: 1px solid rgba(201, 150, 43, 0.2);
	border-left: 2px solid rgba(201, 150, 43, 0.34);
	font-size: 10.5px;
	line-height: 1.62;
	letter-spacing: 0.06em;
	color: var(--faint);
}

/* ===========================================================================
   10 · SEPARATOR — FILM PERFORATION
   ---------------------------------------------------------------------------
   Reproduces the design system's .divider strip as a block: a run of sprocket
   holes between two brass hairlines.
   =========================================================================== */

.wp-block-separator.is-style-ww2va-divider {
	position: relative;
	height: 28px;
	margin: 2.6em 0;
	border: 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background:
		radial-gradient(circle at 12px 14px, rgba(6, 5, 4, 1) 0 4.5px, transparent 5px) 0 0 / 24px 28px repeat-x,
		linear-gradient(180deg, rgba(201, 150, 43, 0.1), rgba(201, 150, 43, 0.02));
}

.wp-block-separator.is-style-ww2va-divider.is-style-dots,
.wp-block-separator.is-style-ww2va-divider.has-background {
	background:
		radial-gradient(circle at 12px 14px, rgba(6, 5, 4, 1) 0 4.5px, transparent 5px) 0 0 / 24px 28px repeat-x,
		linear-gradient(180deg, rgba(201, 150, 43, 0.1), rgba(201, 150, 43, 0.02));
}

/* ===========================================================================
   11 · BUTTON — GHOST
   =========================================================================== */

.wp-block-button.is-style-ww2va-ghost .wp-block-button__link,
.wp-block-button.is-style-ww2va-ghost .wp-element-button {
	background: rgba(201, 150, 43, 0.04);
	border-color: rgba(201, 150, 43, 0.42);
	color: var(--gold);
	box-shadow: none;
}

.wp-block-button.is-style-ww2va-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ww2va-ghost .wp-element-button:hover {
	background: rgba(201, 150, 43, 0.13);
	border-color: rgba(201, 150, 43, 0.6);
	color: var(--gold-lt);
	box-shadow: none;
}

/* ===========================================================================
   12 · COVER — CINEMATIC
   ---------------------------------------------------------------------------
   A scrimmed full-width header for articles built entirely in the block
   editor. Solid translucent fills only — no backdrop-filter anywhere near a
   clip-path.
   =========================================================================== */

.wp-block-cover.is-style-ww2va-cinematic {
	border-radius: 0;
	overflow: hidden;
}

.wp-block-cover.is-style-ww2va-cinematic::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(120% 78% at 50% 34%, transparent 34%, rgba(6, 5, 4, 0.62) 100%),
		linear-gradient(180deg, rgba(6, 5, 4, 0.5) 0%, rgba(6, 5, 4, 0.12) 34%, rgba(6, 5, 4, 0.82) 100%);
}

.wp-block-cover.is-style-ww2va-cinematic .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	max-width: 900px;
}

.wp-block-cover.is-style-ww2va-cinematic .is-style-ww2va-eyebrow {
	justify-content: center;
	color: var(--gold);
}

.wp-block-cover.is-style-ww2va-cinematic .is-style-ww2va-eyebrow::after {
	display: none;
}

.wp-block-cover.is-style-ww2va-cinematic .wp-block-heading {
	font-size: clamp(1.9rem, 5.2vw, 3.4rem);
	line-height: 1.06;
	margin: 0.35em 0 0.5em;
}

/* ===========================================================================
   13 · BLOCK SPACING NORMALISATION
   ---------------------------------------------------------------------------
   Blocks that carry their own margins inside a plate, frame or callout would
   otherwise double up. These keep the containers visually balanced without the
   author having to think about it.
   =========================================================================== */

.is-style-ww2va-plate > .wp-block-table,
.is-style-ww2va-plate-tinted > .wp-block-table,
.is-style-ww2va-callout > .wp-block-table {
	margin-bottom: 0;
}

.is-style-ww2va-plate .wp-block-heading + *,
.is-style-ww2va-plate-tinted .wp-block-heading + *,
.is-style-ww2va-callout .wp-block-heading + * {
	margin-top: 0.7em;
}

/* A label immediately after a heading belongs to it — pull it up. */
.is-style-ww2va-label + .wp-block-heading,
p.is-style-ww2va-label + h2,
p.is-style-ww2va-label + h3,
p.is-style-ww2va-label + h4 {
	margin-top: 0.35em;
}

/* ===========================================================================
   14 · RESPONSIVE
   =========================================================================== */

@media (max-width: 900px) {
	/* Comparison: the between-columns rule is meaningless once stacked. */
	.wp-block-columns.is-style-ww2va-compare > .wp-block-column + .wp-block-column::before {
		display: none;
	}

	.wp-block-columns.is-style-ww2va-compare > .wp-block-column + .wp-block-column {
		margin-top: 4px;
	}

	/* Spec plates get tight enough on a tablet that the label column can
	   shrink without wrapping badly. */
	.wp-block-table.is-style-ww2va-spec tbody td:first-child,
	.wp-block-table.is-style-ww2va-spec tbody th:first-child {
		width: 44%;
	}
}

@media (max-width: 640px) {
	.wp-block-table.is-style-ww2va-spec th,
	.wp-block-table.is-style-ww2va-spec td {
		padding: 10px 13px;
	}

	/* Below 640 the two-column spec read-out is too cramped to scan. The label
	   goes above the value instead of beside it. */
	.wp-block-table.is-style-ww2va-spec tbody td:first-child,
	.wp-block-table.is-style-ww2va-spec tbody th:first-child {
		width: auto;
		border-right: 0;
		padding-bottom: 2px;
		border-bottom: 0;
	}

	.wp-block-table.is-style-ww2va-spec tbody td:last-child {
		padding-top: 0;
		padding-bottom: 12px;
	}

	.wp-block-details summary {
		padding: 14px 46px 14px 15px;
		font-size: 11px;
		letter-spacing: 0.08em;
	}

	p.is-style-ww2va-dropcap::first-letter {
		font-size: 2.9em;
	}

	.is-style-ww2va-plate,
	.is-style-ww2va-plate-tinted {
		padding: 20px 18px;
	}

	.is-style-ww2va-frame {
		padding: 18px 15px;
	}

	blockquote.is-style-ww2va-pull {
		margin: 1.9em 0;
	}

	/* The spec list stacks once the label column would eat the value. */
	.is-style-ww2va-spec-list li {
		display: block;
	}

	.is-style-ww2va-spec-list li > strong:first-child,
	.is-style-ww2va-spec-list li > b:first-child {
		display: block;
		min-width: 0;
		margin-bottom: 3px;
	}
}

@media (max-width: 420px) {
	.wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.wp-block-buttons .wp-block-button,
	.wp-block-buttons .wp-block-button__link,
	.wp-block-buttons .wp-element-button {
		width: 100%;
	}
}

/* ===========================================================================
   15 · INLINE FORMATS
   ---------------------------------------------------------------------------
   The four rich-text formats registered in assets/js/editor.js. They render as
   <span class="ww2va-fmt-*"> and are whitelisted on <span> by
   ww2va_allowed_format_classes() in inc/editor.php so they survive KSES.

   Because they are inline, they must not change the block's box: no margins,
   no display:block, no padding beyond a hairline.
   =========================================================================== */

/* ---- Stencil ---- */

.ww2va-fmt-stencil {
	font-family: 'Black Ops One', Anton, sans-serif;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ---- Label — mono uppercase ---- */

.ww2va-fmt-label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brass);
}

/* ---- Gold — gradient text ----
   Sets its own gradient background on purpose; see the note at the top of this
   file. Never combine with a palette text colour: background-clip:text would
   win and the glyphs would vanish. */

.ww2va-fmt-gold {
	background: linear-gradient(
		175deg,
		#fff3ce 0%,
		var(--gold-lt) 18%,
		var(--gold) 48%,
		var(--brass) 76%,
		var(--brass-dk) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--gold);
}

/* ---- Cite — the small mono attribution used after a quotation ---- */

.ww2va-fmt-cite {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.8em;
	font-style: normal;
	letter-spacing: 0.09em;
	color: var(--muted);
}

.ww2va-fmt-cite::before {
	content: '— ';
	color: var(--brass);
}

/* ---- Editor-only: make the four formats legible on the dark canvas ----
   The format names appear in the toolbar's More menu, which the admin styles
   already cover. Nothing extra is needed inside the canvas beyond the rules
   above, which apply identically in both contexts by design. */

/* ===========================================================================
   16 · STAT COUNTERS & 3D TEXT
   ---------------------------------------------------------------------------
   The animated figures. ww2va_counter() in inc/template-tags.php prints

       <span class="count" data-count="72800" data-decimals="0"
             data-suffix=" long tons">72,800 long tons</span>
       <span class="count-label">Full load</span>

   and the [ww2va_counter] shortcode wraps that in a .ww2va-stat so an author
   can drop a figure into any article:

       [ww2va_stats columns="3"]
         [ww2va_counter value="72800" suffix=" long tons" label="Full load"]
         [ww2va_counter value="263" suffix=" m" label="Length overall"]
         [ww2va_counter value="27" suffix=" kn" label="Top speed"]
       [/ww2va_stats]

   Two things worth knowing before editing anything below.

   1. THE REAL VALUE IS IN THE HTML. It is not a placeholder zero waiting for
      JavaScript. assets/js/theme.js animates up from zero and then snaps back
      to this exact server-rendered string, so a crawler, a no-JS visitor and a
      visitor whose script failed all read the same number. Do not "tidy" the
      text node away or put a 0 in it.

   2. EVERY SHADOW IS IN em, so one rule covers a 1.15rem caption and a 3.6rem
      headline figure at the same visual depth. It is also why the 3D treatment
      scales correctly at any size: the depth is a proportion of the glyph, not
      a fixed pixel offset.

   THE 3D TREATMENT
   ----------------
   The archive sits on a near-black ground (#060504), so a black extrusion —
   the usual trick, and the one that works on light backgrounds — would be
   completely invisible here. The extrusion therefore steps through *brass*,
   which is lighter than the page, and only the final layer is black, where it
   provides separation rather than depth. The deepest shadow mirrors
   h1.hero-h's `0 18px 46px rgba(0,0,0,.85)` in design-system.css, which is the
   "3D text appearance" the front page already uses.

   text-shadow is painted from the glyph outline, not from the fill, so it
   survives -webkit-text-fill-color:transparent on gradient text. That is the
   single fact that makes .ww2va-stat--3d-gold possible: brass gradient glyphs
   floating above a brass extrusion.
   =========================================================================== */

/* ---- The counter row ------------------------------------------------------ */

.ww2va-stats {
	display: grid;
	gap: 18px;
	margin: 34px 0;
}

.ww2va-stats--1 { grid-template-columns: minmax(0, 1fr); }
.ww2va-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ww2va-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ww2va-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Each figure gets its own plate, so a row of three reads as a spec sheet
   rather than three loose numbers. Same gradient and inner hairline as .plate
   in design-system.css — but no hover lift, because a stat is not a link and
   offering a hover state on something inert is a lie. */
.ww2va-stats > .ww2va-stat {
	padding: 22px 24px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: linear-gradient(165deg, rgba(28, 22, 13, 0.94), rgba(11, 9, 6, 0.94));
	box-shadow: inset 0 1px 0 rgba(242, 206, 107, 0.08);
}

/* ---- A single figure ------------------------------------------------------ */

.ww2va-stat {
	display: block;
	font-family: Anton, sans-serif;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.005em;
}

.ww2va-stat .count { display: block; }

/* ---- Sizes ----
   md is the hero row's own 1.85rem, so a counter dropped into an article sits
   in the same visual register as the front page. lg matches .stat b in the
   Restoration Lab; xl is for a single headline figure given a plate of its
   own. */

.ww2va-stat--sm { font-size: 1.15rem; }
.ww2va-stat--md { font-size: clamp(1.5rem, 2.6vw, 1.85rem); }
.ww2va-stat--lg { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.ww2va-stat--xl { font-size: clamp(2.2rem, 4.8vw, 3.6rem); }

/* ---- Style: gold — the front page's flat brass number, and the default for
   a counter that is simply sitting in a sentence. ---- */

.ww2va-stat--gold .count { text-shadow: none; }

/* ---- Style: plain — no gradient, no depth. For a figure inside a dense
   table or a caption, where a brass gradient would just be noise.

   The three resets matter: .count in design-system.css sets background-clip
   and -webkit-text-fill-color, and background-clip cannot be un-set with
   `none` — it has to go back to border-box. ---- */

.ww2va-stat--plain .count {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: currentColor;
	color: var(--bone);
	text-shadow: none;
}

/* ---- Style: 3d — a bone figure standing on a brass extrusion ---- */

.ww2va-stat--3d .count {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: currentColor;
	color: var(--bone);
}

/* ---- The extrusion itself, shared by both 3d variants. ---- */

.ww2va-stat--3d .count,
.ww2va-stat--3d-gold .count {
	text-shadow:
		0 0.02em 0 #7a5812,
		0 0.045em 0 #6a4c10,
		0 0.07em 0 #573e0d,
		0 0.1em 0 #422f0a,
		0 0.14em 0.01em rgba(0, 0, 0, 0.72),
		0 0.34em 0.72em rgba(0, 0, 0, 0.8);
}

/* ---- 3D text — the front page headline treatment, as a block style ----
   Registered in inc/editor.php as `is-style-ww2va-3d` (keep the heading's own
   colour) and `is-style-ww2va-3d-gold` (brass gradient + extrusion, the
   closest match to the hero's `EVERY FRAME RESTORED.` line). Also available
   as .ww2va-t3d / .ww2va-t3d-gold for hand-authored markup.

   Mirrors h1.hero-h: a brass extrusion plus the deep separation shadow, in em
   so an h3 and an h1 get the same visual depth rather than the same pixel
   offset. h1 is included — an article may legitimately open with one, and a
   style that silently does nothing is worse than one that works. The front
   page's own h1.hero-h carries neither class, so it is untouched. */

:is(h1, h2, h3, h4, h5, h6).is-style-ww2va-3d,
:is(h1, h2, h3, h4, h5, h6).is-style-ww2va-3d-gold,
.ww2va-t3d,
.ww2va-t3d-gold {
	text-shadow:
		0 0.018em 0 #7a5812,
		0 0.04em 0 #6a4c10,
		0 0.062em 0 #573e0d,
		0 0.088em 0 #422f0a,
		0 0.12em 0.012em rgba(0, 0, 0, 0.7),
		0 0.3em 0.7em rgba(0, 0, 0, 0.85);
}

/* The gradient half of the pair. Sets its own background on purpose — this is
   the correct use of background-clip:text (rule 1 at the top of this file):
   the heading has no background of its own for it to collide with. */

:is(h1, h2, h3, h4, h5, h6).is-style-ww2va-3d-gold,
.ww2va-t3d-gold {
	background: linear-gradient(
		175deg,
		#fff3ce 0%,
		var(--gold-lt) 18%,
		var(--gold) 48%,
		var(--brass) 76%,
		var(--brass-dk) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--gold);
}

/* ---- Responsive ----
   These live here rather than in §14 because they belong to this component;
   §14 covers the blocks that predate it. */

@media (max-width: 900px) {
	.ww2va-stats--3,
	.ww2va-stats--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.ww2va-stats--2,
	.ww2va-stats--3,
	.ww2va-stats--4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.ww2va-stats > .ww2va-stat {
		padding: 18px 20px;
	}
}

/* ===========================================================================
   17 · REDUCED MOTION
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wp-block-details summary,
	.wp-block-details summary::after,
	.wp-block-button__link,
	.wp-element-button {
		transition: none;
	}

	.wp-block-button__link:hover,
	.wp-element-button:hover {
		transform: none;
	}
}

/* ===========================================================================
   18 · EDITOR-ONLY CORRECTIONS
   ---------------------------------------------------------------------------
   A few things behave differently inside the editor canvas and would mislead
   the author if left alone. Scoped to .editor-styles-wrapper so the front end
   is untouched.
   =========================================================================== */

/* The plus/minus on a closed <details> in the editor should still read as
   interactive even though the block preview is static. */
.editor-styles-wrapper .wp-block-details {
	overflow: visible;
}

/* Rivets are absolutely positioned; make sure the block selection outline in
   the editor is not clipped by the plate's own overflow. */
.editor-styles-wrapper .is-style-ww2va-plate,
.editor-styles-wrapper .is-style-ww2va-plate-tinted {
	overflow: visible;
}

/* An empty archival figure in the editor should still show its frame, so the
   author can see the plate they are about to fill. */
.editor-styles-wrapper .wp-block-image.is-style-ww2va-archival img[src=""],
.editor-styles-wrapper .wp-block-image.is-style-ww2va-archival .components-placeholder {
	min-height: 180px;
	border: 1px dashed rgba(201, 150, 43, 0.4);
	border-radius: 5px;
}