/* Field Dispatch template (blog articles). Everything is scoped to body.dx,
   which dispatch.js sets, so a page without JS keeps its original layout. */

/* ── Top bar ───────────────────────────────────────── */
.dx-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none; }
.dx-progress i { display: block; height: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); box-shadow: 0 0 12px var(--gold-glow); }
.dx-bar { position: sticky; top: 0; left: 0; right: 0; z-index: 110; display: flex; align-items: center; gap: 1.6rem;
  padding: .85rem clamp(16px, 3vw, 40px); transition: background .35s, border-color .35s, padding .35s;
  background: rgba(8,8,8,.92); border-bottom: 1px solid var(--gold-line); }
/* with the template active the bar floats over the cinematic hero */
body.dx .dx-bar { position: fixed; background: linear-gradient(180deg, rgba(8,8,8,.75), transparent); border-bottom-color: transparent; }
body.dx .dx-bar.dx-solid { background: rgba(8,8,8,.92); border-bottom-color: var(--gold-line); }
.dx-bar.dx-solid { background: rgba(8,8,8,.92); backdrop-filter: blur(10px); border-bottom-color: var(--gold-line); padding-top: .6rem; padding-bottom: .6rem; }
.dx-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--gold); font-family: var(--font-display); font-size: 1rem; letter-spacing: .04em; margin-right: auto; }
.dx-logo img { border-radius: 50%; }
.dx-nav { display: flex; gap: 1.6rem; }
.dx-nav a, .dx-lang { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: #cfc4ab; text-decoration: none; transition: color .2s; }
.dx-nav a:hover, .dx-lang:hover { color: var(--gold); }
.dx-lang { border: 1px solid var(--gold-line); border-radius: 8px; padding: .3rem .55rem; }
.dx-cta { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: #120e05; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-radius: 10px; padding: .6rem 1rem; white-space: nowrap; }

/* ── Hero ──────────────────────────────────────────── */
.dx-hero { position: relative; min-height: min(88vh, 820px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.dx-hero-bg { position: absolute; inset: 0; z-index: -2; will-change: transform; }
/* full-bleed: the box takes the picture's own shape (JS sets --ar) so almost nothing is cropped */
.dx-hero.dx-hero-full { min-height: clamp(480px, calc(100vw / var(--ar, 1.78)), min(88vh, 900px)); }
.dx-hero-bg picture, .dx-hero-bg img { display: block; width: 100%; height: 100%; }
body.dx .dx-hero-bg img.art-hero { width: 100%; height: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; aspect-ratio: auto;
  object-fit: cover; object-position: 50% 35%; filter: saturate(.92) contrast(1.04) brightness(.9); }
@keyframes dxdrift { from { transform: scale(1.04); } to { transform: scale(1.14) translateX(-1.5%); } }
.dx-hero::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,.1) 30%, rgba(8,8,8,.55) 62%, var(--bg) 100%),
              linear-gradient(90deg, rgba(8,8,8,.75) 0%, rgba(8,8,8,.15) 60%, transparent 100%); }
.dx-hero-in { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px) clamp(2.5rem, 6vh, 4.5rem); }
body.dx .dx-hero .crumb { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #cbbf9f; margin-bottom: 1.1rem; }
body.dx .dx-hero .crumb a { color: var(--gold); text-decoration: none; }
body.dx .dx-hero .art-title { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.06; max-width: 18ch; color: var(--text);
  text-shadow: 0 4px 40px rgba(0,0,0,.85); margin: 0 0 1.1rem; }
body.dx .dx-hero .art-meta { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #e6dcc3;
  display: flex; flex-wrap: wrap; gap: .4rem .9rem; max-width: 70ch; }
body.dx .dx-hero .art-byline { margin-top: .7rem; font-size: .9rem; color: #cbbf9f; }
body.dx .dx-hero .art-byline a { color: var(--gold); }
.dx-hero-cap { position: absolute; right: clamp(16px, 3vw, 40px); bottom: 1.2rem; max-width: 34ch; text-align: right;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(230,220,195,.55); }
.dx-hero-plain { min-height: 46vh; background: radial-gradient(ellipse 60% 80% at 30% 100%, rgba(201,168,76,.12), transparent 70%); }

/* ── Layout ────────────────────────────────────────── */
body.dx #main.dx-main { max-width: 1240px !important; display: grid; grid-template-columns: minmax(0, 720px) 300px; gap: 4rem;
  justify-content: center; padding-top: 2.5rem; }
body.dx #main.dx-noside { grid-template-columns: minmax(0, 760px); }
.dx-side { position: sticky; top: 84px; align-self: start; display: grid; gap: 1.4rem; max-height: calc(100vh - 100px); overflow: auto; scrollbar-width: none; }
.dx-side::-webkit-scrollbar { display: none; }
body.dx .dx-side .battlebox { margin: 0; padding: 1.2rem; border-radius: 16px; }
body.dx .dx-side .bb-sides { flex-direction: column; gap: .5rem; }
body.dx .dx-side .bb-vs { align-self: center; }
body.dx .dx-side .bb-facts { grid-template-columns: 1fr; gap: .15rem; }
body.dx .dx-side .bb-facts dt { margin-top: .6rem; }
.dx-toc { border-left: 1px solid var(--gold-line); padding-left: 1rem; display: grid; gap: .1rem; }
.dx-toc-k { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; }
.dx-toc a { display: flex; gap: .7rem; padding: .42rem 0; color: var(--muted); text-decoration: none; font-size: .95rem; line-height: 1.35; transition: color .2s; position: relative; }
.dx-toc a b { font-family: var(--font-mono); font-size: .62rem; color: rgba(201,168,76,.55); font-weight: 400; padding-top: .2rem; }
.dx-toc a:hover, .dx-toc a.on { color: var(--text); }
.dx-toc a.on::before { content: ''; position: absolute; left: calc(-1rem - 1px); top: .35rem; bottom: .35rem; width: 2px; background: var(--gold); box-shadow: 0 0 10px var(--gold-glow); }
body.dx .dx-col > .prose .toc { display: none; }

/* ── Reading ───────────────────────────────────────── */
body.dx .prose { font-size: 1.16rem; line-height: 1.8; }
body.dx .prose > p:first-of-type::first-letter { float: left; font-family: var(--font-display); font-size: 4.1em; line-height: .82;
  padding: .08em .12em 0 0; color: var(--gold); text-shadow: 0 0 24px rgba(201,168,76,.25); }
body.dx .prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 3.2rem 0 1rem; padding-top: 1.4rem; position: relative; scroll-margin-top: 90px; }
body.dx .prose h2::before { content: ''; position: absolute; top: 0; left: 0; width: 56px; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); }
body.dx .pull { position: relative; margin: 2.8rem 0; padding: 1.6rem 0 1.6rem 1.8rem; border-left: 2px solid var(--gold);
  font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.35; color: var(--text);
  background: linear-gradient(90deg, rgba(201,168,76,.08), transparent 70%); }
body.dx .pull::before { content: '\201C'; position: absolute; left: .8rem; top: -1.6rem; font-size: 5rem; color: rgba(201,168,76,.28); font-family: Georgia, serif; }
body.dx .quick-answer { border-radius: 16px; border: 1px solid var(--gold-line); border-left: 3px solid var(--gold);
  background: linear-gradient(135deg, rgba(201,168,76,.10), rgba(16,14,8,.9) 60%); padding: 1.4rem 1.6rem; }
body.dx .factstable-wrap { border-radius: 16px; padding: 0 4px; margin-left: -4px; margin-right: -4px; } /* overflow:auto clipped the first glyph */
body.dx .factstable caption { font-family: var(--font-mono); letter-spacing: .14em; }

/* ── Mid-article app card ──────────────────────────── */
.dx-app { display: grid; grid-template-columns: 120px 1fr; gap: 1.6rem; align-items: center; margin: 3rem 0; padding: 1.6rem;
  border: 1px solid var(--gold-line); border-radius: 20px; position: relative; overflow: hidden;
  background: radial-gradient(ellipse 60% 120% at 0% 50%, rgba(201,168,76,.14), transparent 70%), linear-gradient(180deg, var(--card-2), var(--card)); }
.dx-app-phone { aspect-ratio: 9 / 19.5; border-radius: 18px; padding: 5px; background: linear-gradient(160deg, #3a3020, #0c0a06);
  box-shadow: 0 0 0 1px rgba(201,168,76,.35), 0 18px 40px -12px rgba(0,0,0,.9), 0 0 40px -10px var(--gold-glow); transform: rotate(-4deg); }
.dx-app-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 14px; display: block; }
.dx-app-k { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.dx-app h3 { font-family: var(--font-display); font-size: 1.35rem; color: var(--text); margin: .35rem 0 .45rem; line-height: 1.25; }
.dx-app p { color: var(--muted); font-size: 1rem; line-height: 1.55; margin-bottom: 1rem; }
.dx-app .btn { font-size: .7rem; padding: .7rem 1.1rem; }

/* ── Read next + closing CTA ───────────────────────── */
body.dx .dx-related { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; border-top: 0; padding-top: 2.4rem; }
body.dx .dx-related h3 { grid-column: 1 / -1; }
body.dx .dx-related a { position: relative; border: 1px solid var(--gold-line); border-radius: 14px; padding: 1rem 2.6rem 1rem 1.1rem;
  background: linear-gradient(180deg, var(--card-2), var(--card)); line-height: 1.35; transition: border-color .25s, transform .25s; }
body.dx .dx-related a::after { content: '\2192'; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--gold); transition: transform .25s; }
body.dx .dx-related a:hover { border-color: var(--gold); transform: translateY(-2px); }
body.dx .dx-related a:hover::after { transform: translate(4px, -50%); }
body.dx .dx-related a:last-child { grid-column: 1 / -1; border: 0; background: none; padding-left: 0; text-align: left; }
body.dx .dx-related a:last-child::after { display: none; }
body.dx .art-cta.dx-cta-scene { position: relative; overflow: hidden; isolation: isolate; padding: 3.2rem 1.8rem; border-color: rgba(201,168,76,.4); }
body.dx .art-cta.dx-cta-scene::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--dx-cta-bg) center / cover no-repeat;
  filter: saturate(.8) brightness(.38); transform: scale(1.05); }
body.dx .art-cta.dx-cta-scene::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(8,8,8,.25), rgba(8,8,8,.85)); }

/* ── Responsive / motion ───────────────────────────── */
@media (max-width: 1080px) {
  body.dx #main.dx-main { grid-template-columns: minmax(0, 720px); gap: 0; }
  .dx-side { position: static; max-height: none; order: -1; margin-bottom: 1.5rem; }
  .dx-toc { display: none; }
  body.dx .dx-col > .prose .toc { display: block; }
  .dx-nav { display: none; }
}
@media (max-width: 640px) {
  .dx-hero { min-height: 72vh; }
  .dx-hero-cap { display: none; }
  .dx-bar { gap: .8rem; }
  .dx-logo span { display: none; }
  .dx-app { grid-template-columns: 84px 1fr; gap: 1rem; padding: 1.2rem; }
  body.dx .dx-related { grid-template-columns: 1fr; }
  body.dx .prose { font-size: 1.08rem; }
}
@media (prefers-reduced-motion: reduce) {
  body.dx .dx-hero-bg img.art-hero { animation: none; }
}

/* ── Adaptive hero: plate mode for paintings too small to fill the screen ── */
.dx-hero-plate .dx-hero-bg img.art-hero { opacity: 0; }
.dx-hero-plate .dx-hero-bg::after { content: ''; position: absolute; inset: -40px; background: var(--dx-blur) center / cover no-repeat;
  filter: blur(34px) saturate(.9) brightness(.55); }
.dx-hero-plate .dx-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "c plate" "h plate"; gap: 0 3rem; align-items: end; }
.dx-hero-plate .dx-hero-in > .crumb { grid-area: c; align-self: end; }
.dx-hero-plate .dx-hero-in > header { grid-area: h; }
.dx-plate { grid-area: plate; justify-self: end; align-self: center; width: 100%;
  -webkit-mask-image: radial-gradient(ellipse 75% 72% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 72% at 50% 50%, #000 55%, transparent 100%); }
.dx-plate img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(78vh, 760px); margin: 0 auto; filter: saturate(.92) contrast(1.04); }
.dx-hero-plate .dx-hero-cap { bottom: .9rem; }
@media (max-width: 900px) {
  .dx-hero-plate .dx-hero-in { grid-template-columns: 1fr; grid-template-areas: "plate" "c" "h"; }
  .dx-plate { justify-self: center; margin: 4.4rem 0 .9rem; }
  .dx-plate img { max-height: 50vh; }
}
@media (prefers-reduced-motion: reduce) { .dx-plate img { animation: none; } }
body.dx .dx-app .btn, body.dx .dx-app .btn:hover { color: #120e05; text-decoration: none; }
body.dx .art-cta .btn { color: #120e05; }

/* The engage.js era-pack promo bar is injected at the top of <body> and would
   collide with the fixed Field Dispatch top bar; the dx-bar already carries the
   "Join the list" CTA, so suppress the promo strip on article pages only. */
body.dx #erapackBar:not(.erapack-inline) { display: none !important; }
/* On article pages the offer sits inline under the hero instead of at the top. */
body.dx #erapackBar.erapack-inline { max-width: 1100px; margin: 1.2rem auto 0; border: 1px solid var(--gold-line); border-radius: 14px; z-index: 2; }
@media (max-width: 760px) { body.dx #erapackBar.erapack-inline { margin: 1rem 16px 0; } }

/* Phones: get to the story faster. Compact glance box, numbers table after the narrative. */
@media (max-width: 640px) {
  body.dx .dx-col { display: flex; flex-direction: column; }
  body.dx .dx-col > .prose { order: 1; }
  body.dx .dx-col > .factstable-wrap { order: 2; }
  body.dx .dx-col > .art-faq { order: 3; }
  body.dx .dx-col > .art-cta, body.dx .dx-col > .dx-cta-scene { order: 4; }
  body.dx .dx-col > *:not(.prose):not(.factstable-wrap):not(.art-faq):not(.art-cta) { order: 5; }
  body.dx .dx-side .bb-facts { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  body.dx .dx-side .battlebox { padding: 1rem; }
  body.dx .dx-side .bb-side { padding: .7rem .65rem; }
  body.dx .dx-side .bb-side-name { font-size: 1rem; line-height: 1.2; }
  body.dx .dx-side .bb-sides { gap: .35rem; }
  body.dx .dx-side .bb-cmd { font-size: .6rem; }
}

/* ── App bridge (Oct 2026): contextual in-app card + era battles band ── */
.dx-app-btns { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
body.dx .dx-app .btn-ghost, body.dx .dx-app .btn-ghost:hover { color: var(--gold); }
.dx-app-in { border-color: var(--gold) !important; box-shadow: 0 0 0 1px rgba(201,168,76,.25), 0 18px 46px -18px rgba(201,168,76,.35); }
.dx-app-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: 0 0 1rem; }
.dx-tn { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .15rem; padding: .6rem .7rem;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--gold-line); text-decoration: none; background: #0c0a06; aspect-ratio: 16 / 10; }
.dx-tn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dx-tn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.9)); }
.dx-tn:hover img { transform: scale(1.07); }
.dx-tn:hover { border-color: var(--gold); }
.dx-tn-y, .dx-tn-n { position: relative; z-index: 1; }
.dx-tn-y { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; color: var(--gold-bright); }
.dx-tn-n { font-family: var(--font-display); font-size: .95rem; line-height: 1.15; color: #fff; }
.dx-tn-s { padding: .4rem .45rem; }
.dx-tn-s .dx-tn-y { font-size: .5rem; }
.dx-tn-s .dx-tn-n { font-size: .7rem; }
.dx-appband { margin: 3rem 0 1rem; padding: 1.6rem 1.4rem 1.4rem; border: 1px solid var(--gold-line); border-radius: 20px;
  background: radial-gradient(120% 120% at 50% -20%, rgba(201,168,76,.13), transparent 60%), linear-gradient(180deg, #14100a, #0b0906); }
.dx-appband-head h2 { font-family: var(--font-display); font-size: 1.45rem; color: var(--text); margin: .35rem 0 .3rem; line-height: 1.2; }
.dx-appband-head p { color: var(--muted); font-size: .95rem; margin: 0 0 1.1rem; }
.dx-appband-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.dx-appband-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1.2rem; }
body.dx .dx-appband .btn, body.dx .dx-appband .btn:hover { color: #120e05; text-decoration: none; }
.dx-appband-all { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
.dx-appband-all:hover { color: var(--gold-bright); }
@media (max-width: 760px) { .dx-appband-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .dx-app:not(.dx-app-in) { grid-template-columns: 1fr; }
  .dx-app:not(.dx-app-in) .dx-app-phone { display: none; }
  .dx-app-mini { gap: .4rem; }
  .dx-tn-s .dx-tn-n { font-size: .66rem; }
  .dx-appband { padding: 1.2rem 1rem; }
  .dx-tn-n { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .dx-tn img { transition: none; } }

/* ── Retention (Oct 2026): share row, history timeline ── */
.dx-share { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 2.4rem 0 .6rem; padding: 1rem 0; border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); }
.dx-share-k { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-right: .4rem; }
.dx-sh { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold-line); background: rgba(255,255,255,.02); color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: border-color .2s, color .2s, transform .2s; }
.dx-sh svg { width: 17px; height: 17px; fill: currentColor; }
.dx-sh:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-2px); }
.dx-share-ok { font-family: var(--font-mono); font-size: .66rem; color: #7fd18b; margin-left: .3rem; }
.dx-timeline { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 2.4rem 0 0; }
.dx-timeline a { position: relative; display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto 1fr; column-gap: .9rem; align-items: start;
  border: 1px solid var(--gold-line); border-radius: 14px; padding: .7rem; text-decoration: none; background: linear-gradient(180deg, #14100a, #0d0a06); transition: border-color .2s, transform .2s; }
.dx-timeline a:hover { border-color: var(--gold); transform: translateY(-2px); }
.dx-timeline img { grid-row: 1 / 4; width: 96px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid var(--gold-line); }
.dx-tl-k { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.dx-tl-n { font-family: var(--font-display); font-size: 1rem; line-height: 1.2; color: var(--text); margin-top: .2rem; }
.dx-tl-y { font-family: var(--font-mono); font-size: .62rem; color: var(--muted); margin-top: .15rem; }
.dx-tl-next { text-align: right; grid-template-columns: 1fr 96px !important; }
.dx-tl-next img { grid-column: 2; }
.dx-tl-next .dx-tl-k, .dx-tl-next .dx-tl-n, .dx-tl-next .dx-tl-y { grid-column: 1; }
@media (max-width: 640px) {
  .dx-sh { width: 36px; height: 36px; }
  .dx-share { gap: .4rem; }
  .dx-share-k { flex-basis: 100%; margin-bottom: .2rem; }
  .dx-timeline { grid-template-columns: 1fr; }
  .dx-timeline > span { display: none; }
}

/* ---- Footnotes + sources (Oct 2026): numbered notes in the text, "Sources and notes" list ---- */
sup.fn { line-height: 0; font-size: .68em; margin-left: .08em; vertical-align: super; }
sup.fn a { color: var(--gold); text-decoration: none; font-family: var(--font-mono); padding: 0 .14em; border-radius: 4px; }
sup.fn a:hover, sup.fn a:focus-visible { background: rgba(201,168,76,.16); text-decoration: none; }
[id^="ref-"], [id^="fnref-"] { scroll-margin-top: 96px; }
.art-refs { margin: 2.6rem 0 1.2rem; padding-top: 1.4rem; border-top: 1px solid var(--gold-line); }
.art-refs h2 { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 .3rem; }
.art-refs .refs-intro { font-size: .85rem; color: var(--muted); margin: 0 0 .8rem; }
.art-refs ol { margin: 0 0 0 1.4rem; padding: 0; font-size: .93rem; line-height: 1.6; color: var(--muted); }
.art-refs li { margin: .45rem 0; padding: .15rem .35rem; border-radius: 6px; transition: background .4s; }
.art-refs li::marker { color: var(--gold); font-family: var(--font-mono); font-size: .85em; }
.art-refs li:target { background: rgba(201,168,76,.13); }
.art-refs cite { font-style: italic; color: var(--text); }
.art-refs a { color: var(--gold); overflow-wrap: anywhere; }
.art-refs .ref-back { text-decoration: none; margin-left: .3rem; font-size: .9em; }
.fn-tip { position: absolute; z-index: 80; max-width: min(340px, calc(100vw - 32px)); padding: .65rem .8rem; border: 1px solid var(--gold-line); border-radius: 10px;
  background: #15110a; color: var(--muted); font-size: .84rem; line-height: 1.45; box-shadow: 0 14px 34px -12px #000; pointer-events: none; }
.fn-tip cite { font-style: italic; color: var(--text); }
.fn-tip b { color: var(--gold); font-family: var(--font-mono); font-weight: 400; margin-right: .35rem; }
/* Phones in portrait: show the whole 16:9 picture as a band above the title instead of
   cropping it to a narrow vertical slice of a tall cover box. */
@media (max-width: 760px) and (orientation: portrait) {
  /* band height follows the picture (wide paintings stay whole; portraits capped at a square) */
  .dx-hero.dx-hero-full { --bandh: calc(100vw / max(var(--ar, 1.78), 1)); display: block; min-height: 0; padding-top: calc(var(--bandh) + 64px); padding-bottom: 1.4rem; }
  .dx-hero.dx-hero-full .dx-hero-bg { inset: 64px 0 auto 0; height: calc(var(--bandh) + 2px); }
  body.dx .dx-hero.dx-hero-full .dx-hero-bg img.art-hero { object-position: 50% 50%; animation: none; transform: none; filter: saturate(.9) contrast(1.04) brightness(.92); }
  .dx-hero.dx-hero-full::before { inset: 64px 0 auto 0; height: calc(var(--bandh) + 2px);
    background: linear-gradient(180deg, rgba(8,8,8,.25) 0%, rgba(8,8,8,0) 30%, rgba(8,8,8,0) 62%, var(--bg) 100%); }
  .dx-hero.dx-hero-full .dx-hero-in { position: relative; margin-top: -1.6rem; padding-top: 0; padding-bottom: 2rem; }
  body.dx .dx-hero.dx-hero-full .art-title { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
}
/* Inline figures (paintings, photos, maps) inside articles */
body.dx .prose figure.art-fig, .art-fig { margin: 1.9rem 0; border: 1px solid var(--gold-line); border-radius: 12px; overflow: hidden; background: var(--card); }
body.dx .prose figure.art-fig img, .art-fig img { width: 100%; height: auto; display: block; margin: 0; border: 0; border-radius: 0; }
body.dx .prose figure.art-fig figcaption, .art-fig figcaption { font-size: .86rem; line-height: 1.5; color: var(--muted); padding: .7rem .9rem; font-family: inherit; letter-spacing: 0; }
.art-fig .fig-credit { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .04em; opacity: .8; }
/* Series line: up to the war hub, sideways in the campaign, key figures */
body.dx .prose p.series { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em; line-height: 1.75; color: var(--muted);
  border-left: 2px solid var(--gold-line); padding: .35rem 0 .35rem .9rem; margin: 1.4rem 0 1.6rem; }
body.dx .prose p.series a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201,168,76,.35); }
body.dx .prose p.series a:hover { border-bottom-color: var(--gold); }
/* Anniversary note under the quick answer */
body.dx .prose p.anniv { font-size: .92rem; color: var(--text); margin: -.4rem 0 1.4rem; padding: .55rem .9rem; border: 1px dashed var(--gold-line); border-radius: 10px; }
body.dx .prose p.anniv span { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-right: .5rem; }
body.dx .prose p.anniv a { color: var(--gold); }