/* 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 > p.no-dropcap::first-letter { float: none; font: inherit; padding: 0; color: inherit; text-shadow: none; }
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: var(--anchor-off, 80px); }
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; }
/* At-a-glance tables of hub and ranking pages (moved here from the inline style of 127 pages) */
.hubtable-wrap { overflow-x:auto; margin:1.7rem 0 2.2rem; width:100vw; position:relative; left:50%; transform:translateX(-50%); border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line); background:linear-gradient(180deg,var(--card-2),var(--card)); }
.hubtable { width:100%; max-width:1180px; margin:0 auto; border-collapse:collapse; font-size:.95rem; }
.hubtable caption { text-align:left; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); padding:1rem 1.3rem .2rem; }
.hubtable th, .hubtable td { text-align:left; padding:.6rem 1.3rem; border-top:1px solid var(--gold-line); vertical-align:top; }
.hubtable thead th { border-top:0; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.hubtable tbody td { color:var(--text); line-height:1.45; }
.hubtable td.tnum { color:var(--muted); font-family:var(--font-mono); font-size:.82rem; width:2.2rem; }
.hubtable td.tfig { font-variant-numeric:tabular-nums; white-space:nowrap; }
.hubtable a { color:var(--gold); text-decoration:none; }
.hubtable a:hover { text-decoration:underline; }
@media (max-width:560px){
  .hubtable { font-size:.82rem; }
  .hubtable caption { padding:.85rem .7rem .2rem; font-size:.58rem; }
  .hubtable th, .hubtable td { padding:.5rem .55rem; }
  .hubtable thead th { font-size:.52rem; letter-spacing:.04em; }
  .hubtable td.tnum { width:1.1rem; font-size:.72rem; }
  .hubtable td.tfig { font-size:.74rem; }
  .hubtable td { line-height:1.35; }
}

/* "At a glance" hub tables keep to the text column. Many pages still carry the old full-bleed
   page style (width:100vw, left:50%, translateX(-50%)), which in this two-column layout ran off
   the left edge and under the contents sidebar. Number cells may wrap so the table fits. */
body.dx .dx-col .hubtable-wrap, .prose .hubtable-wrap { width: auto; max-width: 100%; left: auto; transform: none;
  border: 1px solid var(--gold-line); border-radius: 12px; }
body.dx .dx-col .hubtable td.tfig, .prose .hubtable td.tfig { white-space: normal; }

/* ── 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; }
.dx-app-in .dx-app-body > p { margin-bottom: .55rem; }
.dx-app-has { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .4rem; }
.dx-app-has li { position: relative; padding-left: 1.15rem; color: var(--muted); font-size: .95rem; line-height: 1.45; }
.dx-app-has li::before { content: ""; position: absolute; left: .1rem; top: .55em; width: .42rem; height: .42rem; transform: rotate(45deg); background: var(--gold); }
.dx-app-has b { color: var(--text); font-weight: 600; }

/* ── 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)); }

/* Folding contents list for phones and tablets (dispatch.js adds it when the page has no nav.toc) */
.dx-toc-m { display: none; }
@media (max-width: 1080px) {
  .dx-toc-m { display: block; margin: 1.2rem 0 1.6rem; border: 1px solid var(--gold-line); border-radius: 10px; background: var(--card); }
  .dx-toc-m > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; min-height: 44px; }
  .dx-toc-m > summary::-webkit-details-marker { display: none; }
  .dx-toc-m > summary::after { content: '+'; margin-left: auto; font-family: var(--font-mono); color: var(--gold); font-size: 1rem; line-height: 1; }
  .dx-toc-m[open] > summary::after { content: '\2212'; }
  .dx-toc-mk { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
  .dx-toc-mn { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; color: var(--muted); }
  .prose .dx-toc-ml { list-style: none; counter-reset: dxm; margin: 0; padding: 0 1rem .7rem; }
  .prose .dx-toc-ml li { counter-increment: dxm; border-top: 1px solid var(--gold-line); margin: 0; padding: 0; }
  .prose .dx-toc-ml a { display: flex; gap: .7rem; padding: .55rem 0; color: var(--muted); text-decoration: none; font-size: .95rem; line-height: 1.35; }
  .prose .dx-toc-ml a::before { content: counter(dxm, decimal-leading-zero); font-family: var(--font-mono); font-size: .62rem; color: var(--gold); padding-top: .2rem; }
  .prose .dx-toc-ml a:hover { color: var(--text); }
}

/* ── 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, body.dx .dx-col > .forcechart { 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(.forcechart):not(.art-faq):not(.art-cta) { order: 5; }
  /* Everything else that comes BEFORE the article (At a glance tables and boxes, the hero credit,
     collection links) stays in reading order above it; only what follows the article goes last.
     Kept as a separate rule so a browser without :has() just keeps the order above. */
  html body.dx .dx-col > *:has(~ .prose):not(.prose):not(.factstable-wrap):not(.forcechart):not(.art-faq):not(.art-cta) { order: 0; }
  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; }
/* Several notes on one sentence read as "3, 6, 8". dispatch.js marks a marker that directly
   follows another one (no text between) with .fn-more; CSS alone cannot see the text node. */
sup.fn.fn-more { margin-left: 0; }
sup.fn.fn-more::before { content: ","; color: var(--gold); font-family: var(--font-mono); margin-left: -.1em; }
[id^="ref-"], [id^="fnref-"] { scroll-margin-top: calc(var(--anchor-off, 80px) + 1rem); } /* back to the marker: a line of context above it */
.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; overflow-wrap: anywhere; 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; }
.fn-tip .fn-src { display: inline; margin: 0; }
.fn-tip .fn-src + .fn-src::before { content: " · "; color: var(--gold); }
/* Footnotes v2 (docs/guides/footnote-standard.md): one marker per sentence, after the
   punctuation; "Notes" numbered, "Sources" each work once, unnumbered. */
.art-notes { margin-bottom: .4rem; }
.art-notes + .art-refs { margin-top: 1.4rem; }
.art-refs .notes-list li { padding: .1rem .35rem; }
.art-refs .notes-list li a[href^="#src-"] { color: var(--muted); text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 2px; }
.art-refs .notes-list li a[href^="#src-"]:hover { color: var(--gold); }
.art-refs .refs-list { list-style: none; margin: 0; padding: 0; font-size: .93rem; line-height: 1.6; color: var(--muted); }
.art-refs .refs-list li { position: relative; margin: .45rem 0; padding: .15rem .35rem .15rem 1.1rem; border-radius: 6px; overflow-wrap: anywhere; transition: background .4s; }
.art-refs .refs-list li::before { content: "·"; position: absolute; left: .35rem; color: var(--gold); }
.art-refs .refs-list li:target { background: rgba(201,168,76,.13); }
/* Touch: the note opens in a sheet at the bottom of the screen instead of jumping away. */
.fn-sheet { position: fixed; inset: 0; z-index: 90; }
.fn-sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.fn-sheet-box { position: absolute; left: 0; right: 0; bottom: 0; max-height: 62vh; overflow: auto; padding: .9rem 1.1rem calc(1rem + env(safe-area-inset-bottom));
  background: #15110a; border-top: 1px solid var(--gold-line); border-radius: 16px 16px 0 0; box-shadow: 0 -18px 40px -16px #000; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.fn-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.fn-sheet-head b { color: var(--gold); font-family: var(--font-mono); font-weight: 400; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.fn-sheet-x { background: none; border: 1px solid var(--gold-line); color: var(--text); border-radius: 999px; width: 2.1rem; height: 2.1rem; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.fn-sheet-body .fn-src { margin: .5rem 0; overflow-wrap: anywhere; }
.fn-sheet-body cite { font-style: italic; color: var(--text); }
.fn-sheet-body a, .fn-sheet-all { color: var(--gold); }
.fn-sheet-all { display: inline-block; margin-top: .4rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
@media (prefers-reduced-motion: no-preference) { .fn-sheet-box { animation: fn-up .18s ease-out; } }
@keyframes fn-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* 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); }
body.dx .dx-hero .art-anniv { margin: .55rem 0 0; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; color: var(--gold-bright); display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; }
body.dx .dx-hero .art-anniv a { display: inline-block; padding: .7rem 0; color: #e6dcc3; text-decoration: underline; text-decoration-color: rgba(230,220,195,.35); text-underline-offset: 4px; }
body.dx .dx-hero .art-anniv a:hover { color: var(--gold-bright); text-decoration-color: var(--gold-bright); }
.art-anniv { font-size: .8rem; color: var(--gold); }

/* ── UI/UX audit fixes (Oct 2026) ───────────────────────────────────────── */
/* No layout shift: dispatch.js moves the title and picture into a full-bleed hero above
   <main>. Hold the article (not the top bar) until that has happened, so the first paint
   is already the final layout; dispatch.js adds .dx (article) or .dx-off (no article).
   If the script never runs, the article appears after 3 s anyway. */
body:not(.dx):not(.dx-off):has(.art-title) > #main { visibility: hidden; animation: dx-hold 0s 3s forwards; }
@keyframes dx-hold { to { visibility: visible; } }

/* Phone menu: same links as the desktop bar, in a solid panel under it */
.dx-menu-btn { display: none; width: 44px; height: 44px; flex: none; border: 1px solid var(--gold-line); border-radius: 10px; background: rgba(8,8,8,.6);
  cursor: pointer; padding: 0; place-content: center; gap: 4px; }
.dx-menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--gold); transition: transform .25s, opacity .25s; }
.dx-bar.dx-open .dx-menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.dx-bar.dx-open .dx-menu-btn span:nth-child(2) { opacity: 0; }
.dx-bar.dx-open .dx-menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1080px) {
  .dx-menu-btn { display: grid; }
  .dx-bar.dx-open { background: var(--bg) !important; border-bottom-color: var(--gold-line) !important; }
  .dx-bar.dx-open .dx-nav { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0;
    padding: .4rem clamp(16px, 3vw, 40px) 1rem; background: var(--bg); border-bottom: 1px solid var(--gold-line); box-shadow: 0 24px 40px -20px #000; }
  .dx-bar.dx-open .dx-nav a { display: flex; align-items: center; min-height: 48px; font-size: .78rem; border-bottom: 1px solid rgba(201,168,76,.12); }
  .dx-bar.dx-open .dx-nav a:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
  .dx-bar { padding-top: .55rem; padding-bottom: .55rem; }
  .dx-logo { min-width: 44px; min-height: 44px; }
  .dx-lang { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .dx-cta { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .dx-menu-btn span { transition: none; } }

/* Readable contrast for the small print (WCAG AA 4.5:1) */
.dx-toc a b { color: var(--gold); font-size: .66rem; }
.dx-hero-cap { color: rgba(230,220,195,.85); font-size: .62rem; }

/* Desktop: the sticky sidebar ends above the music button, so nothing floats over the contents list */
.dx-side { max-height: calc(100vh - 84px - 96px); }
/* Desktop line length: about 70 characters a line */
body.dx .prose > p, body.dx .prose > ul, body.dx .prose > ol, body.dx .prose .bs-panel > p { max-width: 68ch; }

/* Phones: get to the text sooner. A shorter picture band, a smaller title, no byline line,
   less padding; the glance box follows the opening paragraph (dispatch.js moves it). */
@media (max-width: 640px) {
  .dx-hero { min-height: 0; }
  .dx-hero.dx-hero-plain { padding-top: 76px; }
  .dx-hero-plain .dx-hero-in { padding-bottom: 1.2rem; }
  body.dx .dx-hero .art-title { font-size: clamp(1.55rem, 6.6vw, 2rem) !important; line-height: 1.12; margin: 0 0 .6rem; }
  body.dx .dx-hero .crumb { margin-bottom: .5rem; }
  body.dx .dx-hero .art-meta { font-size: .6rem; gap: .2rem .7rem; }
  body.dx .dx-hero .art-byline { display: none; }
  body.dx .dx-hero .art-anniv { margin-top: .35rem; }
  body.dx #main.dx-main { padding-top: 1.2rem; }
  body.dx .prose > .dx-side-in { position: static; max-height: none; overflow: visible; margin: 1.6rem 0 2rem; display: block; }
  body.dx .prose .dx-side-in .battlebox h2 { font-family: var(--font-mono); font-size: .64rem; line-height: 1.4; margin: 0 0 1rem; padding-top: 0; }
  body.dx .prose .dx-side-in .battlebox h2::before { content: none; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .dx-hero.dx-hero-full { --bandh: min(calc(100vw / max(var(--ar, 1.78), 1)), 34vh); padding-bottom: .6rem; }
  .dx-hero.dx-hero-full .dx-hero-in { margin-top: -1.2rem; padding-bottom: 1rem; }
}

/* Games and quizzes: the card under the header already shows the title and the rounds line,
   so the page header is kept for screen readers and search only (no doubled title). */
body.dx-game .dx-hero { min-height: 0; padding-top: 80px; }
body.dx-game .dx-hero-in { padding-bottom: .2rem; }
body.dx-game .dx-hero .crumb { margin-bottom: 0 !important; }
body.dx-game .dx-hero header { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.dx-game #main.dx-main { padding-top: 1rem; }
/* Reserve the game / quiz card while its data loads, so the text under it does not jump */
#quiz:empty { min-height: 340px; }
#play:not(:has(> :not(noscript))) { min-height: 420px; }
@media (max-width: 640px) { #play:not(:has(> :not(noscript))) { min-height: 480px; } }

/* ── Ranking pages: one section per entry (docs/guides/listicle-standard.md) ── */
.lx-entry { margin: 2.6rem 0 0; scroll-margin-top: var(--anchor-off, 80px); }
.prose .lx-entry h2.lx-h { display: flex; align-items: baseline; gap: .7rem; }
.lx-n { flex: none; font-family: var(--font-mono); font-size: .8em; color: var(--gold); min-width: 1.6em; }
.lx-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .1rem 1.2rem; margin: 0 0 1.3rem;
  padding: .8rem 1rem; border: 1px solid var(--gold-line); border-radius: 12px; background: var(--card); }
.lx-facts div { padding: .35rem 0; min-width: 0; }
.lx-facts dt { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.lx-facts dd { margin: .15rem 0 0; color: var(--text); font-size: .95rem; line-height: 1.4; overflow-wrap: anywhere; }
.prose p.lx-why { border-left: 2px solid var(--gold); padding-left: .9rem; }
.prose p.lx-more { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.prose p.lx-more a { text-decoration: none; }
/* ── End-of-paragraph link (docs/audits/internal-links-audit-2026-10-17.md): one quiet pointer at the end
   of a body paragraph to the article that paragraph discusses. At most one per paragraph and five per page;
   never in the quick answer, the opening paragraph, captions, FAQ, sources or day-page cards. ── */
.prose .para-more { font-family: var(--font-mono); font-size: .74em; letter-spacing: .03em; color: var(--gold); white-space: nowrap; }
.prose .para-more a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-line); }
.prose .para-more a:hover, .prose .para-more a:focus-visible { color: var(--gold-bright); border-bottom-color: var(--gold); }
@media (max-width: 460px) { .prose .para-more { white-space: normal; } }
.lx-crit { margin: 0 0 1.2rem 1.1rem; color: var(--muted); line-height: 1.7; }
.lx-crit li { margin-bottom: .4rem; }
.lx-scores { overflow-x: auto; margin: 1.2rem 0 2rem; }
.lx-table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.lx-table caption { text-align: left; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); padding: 0 0 .5rem; }
.lx-table th, .lx-table td { padding: .45rem .5rem; border-top: 1px solid var(--gold-line); text-align: center; vertical-align: top; color: var(--text); }
.lx-table th { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.lx-table td:nth-child(2), .lx-table th:nth-child(2) { text-align: left; }
.lx-table td.tnum { color: var(--muted); font-family: var(--font-mono); }
.lx-table td.lx-tot { color: var(--gold); font-weight: 700; }
.lx-table a { color: var(--gold); text-decoration: none; }
.lx-w { opacity: .7; }
@media (max-width: 560px) {
  .lx-facts { grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; padding: .6rem .75rem; }
  /* a long field (casualty ranges run to 60 words) gets the full width instead of a thin column */
  .lx-facts .lx-wide { grid-column: 1 / -1; }
  .lx-table { font-size: .8rem; }
  .lx-table th, .lx-table td { padding: .4rem .3rem; }
}

/* ── UX and accessibility review fixes (16 Oct 2026) ─────────────────────────── */
/* Phone menu button: right before the links in the DOM (focus order), last in the bar visually */
.dx-menu-btn { order: 10; }
/* Sortable tables: the header stays a header, a real button inside does the sorting */
.hubtable .th-sort, .lx-table .th-sort { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 40px; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.hubtable .th-sort:focus-visible, .lx-table .th-sort:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.hubtable.sortable thead th { cursor: default; }
/* Readable small print in articles: 12px floor for meta labels, 14px for links */
.art-fig .fig-credit, body.dx .prose figure.art-fig .fig-credit { font-size: .75rem; opacity: 1; color: #a89c86; letter-spacing: .02em; }
body.dx .prose figure.art-fig figcaption, .art-fig figcaption { font-size: max(.86rem, 14px); }
body .bb-cmd, body.dx .dx-side .bb-cmd { font-size: .8125rem; line-height: 1.35; }
body .bb-facts dt { font-size: .75rem; }
body .fc-title, body .fc-note, body .factstable-note, body .bs-sub, body .psub { font-size: .75rem; }
body .factstable thead th, body .hubtable thead th { font-size: .75rem; letter-spacing: .06em; }
.hubtable td.tfig, body.dx .dx-col .hubtable td.tfig, .prose .hubtable td.tfig { font-size: .875rem; }
.lx-table th { font-size: .75rem; }
.dx-tn-y, .dx-tn-s .dx-tn-y { font-size: .75rem; letter-spacing: .08em; }
.dx-tn-s .dx-tn-n { font-size: .8rem; }
.dx-app-k, .dx-share-k, .dx-toc-mk, .dx-toc-mn, .qa-label, .dx-tl-k { font-size: .75rem; }
.dx-appband-all { font-size: .8125rem; display: inline-flex; align-items: center; min-height: 44px; }
body .pc-meta { font-size: .75rem; }
body .pc-badge { font-size: .75rem; }
/* Calendar list (on this day): dates, ages and the per-event links */
body .otd-when { font-size: .8125rem; }
body .otd-links { gap: .1rem 1.1rem; margin-top: .3rem; }
body .otd-links a { font-size: .875rem; padding: .75rem 0; margin: -.5rem 0; }
body .otd-name a { padding: .65rem 0; }
body .otd-cw-n { font-size: .6875rem; min-height: .6875rem; }
/* Tap targets of at least 40px on phones */
body.dx .dx-hero .crumb a, .crumb a, body.dx .art-meta a, .art-meta a { padding: .85rem 0; }
.art-cta a[href*="ko-fi.com"] { display: inline-block; padding-block: .8rem; margin-block: -.8rem; }
body .otd-mbar a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
body .toc a, body .dx-toc-ml a { display: inline-block; padding-block: .5rem; margin-block: -.3rem; }
body.dx .prose h2.oe-h a { padding-block: .4rem; }
@media (max-width: 640px) {
  .dx-sh { width: 44px; height: 44px; }
  .dx-share { gap: .35rem; }
  body .cat-nav a { display: inline-flex; align-items: center; min-height: 44px; }
}
body .lx-facts dt { font-size: .75rem; }

/* Hero <img> carries intrinsic width/height (CLS); keep the CSS-driven box: aspect-ratio before the dispatch layout, height:100% inside it */
img.art-hero[height] { height: auto; } /* era heroes carry no height attribute */

/* Narrow phones and 200% zoom (Oct 2026 mobile audit): the PL "Zaciągnij się" button pushed the
   menu button 3px off a 320px screen, and at 200% zoom (188px of CSS width) the bar ran far off
   the edge. Tighten first, then let the call to action drop to its own full-width row. */
@media (max-width: 380px) {
  .dx-bar { gap: .5rem; }
  .dx-cta { padding: .6rem .7rem; letter-spacing: .08em; }
}
@media (max-width: 300px) {
  .dx-bar { flex-wrap: wrap; gap: .45rem .25rem; }
  .dx-cta { order: 11; flex: 1 1 100%; justify-content: center; }
}

/* ── "Full story" card on the On this day pages (scripts/site/build_otd_days.py, Oct 2026) ──
   Right after the quick answer: the day's main event opens its full article. The look of the
   in-article .art-coll card (gold edge, card gradient) with the blog index thumbnail; on a phone
   the picture sits on top, from 600px it stands beside the text. */
body.dx .prose a.otd-full, a.otd-full { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 0 2rem; overflow: hidden;
  border: 1px solid var(--gold-line); border-left: 3px solid var(--gold); border-radius: 14px;
  background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--text); text-decoration: none; transition: border-color .2s; }
.otd-full .of-img { display: block; }
body.dx .prose .otd-full .of-img img, .otd-full .of-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin: 0; border: 0; border-radius: 0; }
.otd-full .of-body { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: 1rem 1.1rem 1.15rem; min-width: 0; }
.otd-full .of-k { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.otd-full .of-rt { letter-spacing: .06em; text-transform: none; color: var(--muted); }
.otd-full .of-t { font-family: var(--font-display); font-size: 1.22rem; line-height: 1.25; color: var(--text); transition: color .2s; }
.otd-full .of-d { color: var(--muted); font-size: 1rem; line-height: 1.55; }
.otd-full .of-cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: .35rem; padding: 0 1.1rem; border: 1px solid var(--gold); border-radius: 10px;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); transition: background .2s, color .2s; }
a.otd-full:hover, a.otd-full:focus-visible { border-color: var(--gold); }
a.otd-full:hover .of-t, a.otd-full:focus-visible .of-t { color: var(--gold); }
a.otd-full:hover .of-cta, a.otd-full:focus-visible .of-cta { background: var(--gold); color: var(--bg); }
a.otd-full:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (min-width: 600px) {
  body.dx .prose a.otd-full, a.otd-full { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
  body.dx .prose a.otd-full.of-noimg, a.otd-full.of-noimg { grid-template-columns: minmax(0, 1fr); }
  body.dx .prose .otd-full .of-img img, .otd-full .of-img img { height: 100%; min-height: 100%; aspect-ratio: auto; }
  .otd-full .of-body { justify-content: center; padding: 1.1rem 1.3rem; }
}
/* the hero picture links to the same story: in the page hero the link fills the backdrop, the plate of a
   small picture is the link itself, and the hero's shading layers let the click through */
.art-fig-a { display: block; }
.dx-hero-bg .art-fig-a { width: 100%; height: 100%; }
a.dx-plate { display: block; }
.dx-hero::before, .dx-hero-plate .dx-hero-bg::after { pointer-events: none; }

/* On this day pages (audit 2026-10-31): the meta line's separator before "Full calendar" is its own
   element; in the hero the line is a wrapping flex row whose gap already separates the link, so the
   dot is hidden there (it dangled at the end of a wrapped line on phones). The figure the hero picture
   moved out of keeps only its caption: no card frame, no empty band between the hero and the text. */
body.dx .dx-hero .art-meta-sep { display: none; }
body.dx .prose figure.art-fig.dx-fig-moved, body.dx figure.art-fig.dx-fig-moved { margin: 0 0 1.1rem; border: 0; border-radius: 0; background: none; }
body.dx figure.art-fig.dx-fig-moved figcaption { padding: 0; }