/* ==========================================================================
   dr-post-tunisian-civilization-history.css
   Post: tunisian-civilization-history (ID 1531)
   Page-specific owner: light parchment editorial treatment with a warm dark
   variant. Loaded only for this slug (functions.php, dr_is_singular_slug).

   Scope rule: every selector is limited to body.postid-1531 (light default)
   or html[data-theme="dark"] body.postid-1531 (dark). Shared files are NOT
   modified: dr-single-post.css, dr-post-base.css, dr-post-culture.css,
   dr-post-experience.css, dr-global.css, theme toggle, visual engine, Murad
   Reis, Lesson and other article assets.

   Changes are colour, background, border, shadow and article-body padding
   only. No display, grid, transform or z-index change on article content.
   The only positioned addition is the background layer on the body wrapper.
   Interactions (quiz, flip cards, flow steps, tables) keep their behaviour.

   Candidate status: FIX IMPLEMENTED. NEEDS HUMAN REVIEW. No VISUAL PASS.
   ========================================================================== */

/* Editorial polish (2026-10-09): built on the flipcard candidate, sha256 4d3f83a0.
   Adds a Source Sans 3 reading layer for article prose (11a), eyebrow and link
   colour tokens for contrast (11b) and alternating parchment section bands (11c).
   Candidate status: FIX IMPLEMENTED. TECHNICAL PASS (static). NEEDS HUMAN REVIEW.
   No VISUAL PASS. */

/* Pass 04 revision 2 (2026-10-09): built on the live editorial polish file,
   sha256 b61d4f41 (owner SFTP capture 19:36 UTC, registry
   ct-file-2026-10-09-tunisia1531-css-postdeploy-polish). Section 11c
   (alternating bands) is removed; section 12 adds the revised composition,
   chapter separation, comparison cues and the Andalusian summer quiz. HTML,
   post_content, shared CSS and shared JS are unchanged. No !important.
   Candidate status: FIX IMPLEMENTED. NEEDS HUMAN REVIEW. No VISUAL PASS. */

/* Pass 04 revision 3 (2026-10-09): built on revision 2 (sha256 30abaf54).
   Deploys together with post_content candidate A, which replaces five tilt
   card groups with a definition list, a compact definition list beside a
   figure, two tables and a list. Section 13 styles those structures and
   makes the future-route cards static; section 12d drops the rules for the
   removed infrastructure-mirror cards; the 12h comment follows the removed
   character-block tabindex. Layout changes are limited to the new structures.
   No !important. Candidate status: FIX IMPLEMENTED. NEEDS HUMAN REVIEW.
   No VISUAL PASS. */

/* Pass 05 (2026-10-10): built on the production file, sha256 813714fe (owner
   SFTP capture, 09-Backups/Tunisia-1531-Release-2-Predeploy-2026-10-10).
   Deploys together with the Pass 05 post_content, which adds the featured
   image assigned in the Media Library to each of the four Related Reading
   cards (div.dr-related-card__media). Section 14 owns the Related Reading
   grid (one column, two from 720px), the 3:2 media frame and the arrow
   position; 12b no longer sets four columns for #related-reading. No image
   URL in CSS. No !important. Candidate status: FIX IMPLEMENTED.
   NEEDS HUMAN REVIEW. No VISUAL PASS. */

/* Pass 06A (2026-10-10): built on the Pass 05 production file, sha256
   92f832ce (owner SFTP upload verification, 09-Backups/
   Tunisia-1531-Pass05-Live-Predeploy-2026-10-10-1903). Deploys together with
   the Pass 06A post_content. Section 15 places the captions of the six
   Pass 06 figures below their images and sets the Husainid and 1956 figures
   as an image pair after the timeline. Older figures are not affected.
   No image URL in CSS. No !important. Candidate status: FIX IMPLEMENTED.
   NEEDS HUMAN REVIEW. No VISUAL PASS. */

/* Pass 07 (2026-10-10): built on the Pass 06A production file, sha256
   3be0005a (owner SFTP upload verification, 09-Backups/
   Tunisia-1531-Pass06A-Predeploy-2026-10-10). CSS only. Section 2b moves the
   parchment from the 1440px shell to a full-viewport body layer and drops
   the dark-mode surround fill (the dark brown side panels); 12b and its
   users widen the reading column to 48rem and the article measure to 75rem;
   section 16 lays out the shared lightbox as a column, caption below a
   ratio-preserving image. No HTML, PHP or JavaScript change. No !important.
   Candidate status: FIX IMPLEMENTED. NEEDS HUMAN REVIEW. No VISUAL PASS. */

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,650&display=swap");

/* ---------- 1. TOKENS: light (default) ---------- */
body.postid-1531 {
  --tz-page: #F3EBDC;
  --tz-sheet: #EFE4CF;
  --tz-panel: #FBF6EC;
  --tz-panel-2: #F7F0E2;
  --tz-ink: #2B2118;
  --tz-ink-strong: #1E1610;
  --tz-soft: #3F3125;
  --tz-muted: #5E4A36;
  --tz-bronze: #7A5C24;
  --tz-terra: #9A5230;
  --tz-terra-hover: #7A3A1E;
  --tz-terra-ink: #8A3E22;
  --tz-olive: #5F6B45;
  --tz-olive-ink: #46512C;
  --tz-button-ink: #FBF6EC;
  --tz-line: rgba(122, 88, 48, 0.25);
  --tz-line-strong: rgba(122, 88, 48, 0.42);
  --tz-label-bg: rgba(122, 88, 48, 0.04);
  --tz-sheen: rgba(255, 255, 255, 0.22);
  --tz-correct-bg: rgba(95, 107, 69, 0.14);
  --tz-incorrect-bg: rgba(154, 82, 48, 0.12);
  --tz-veil: rgba(243, 235, 220, 0.66);
  --tz-shadow: 0 14px 34px rgba(60, 40, 18, 0.10);
}

/* ---------- 1b. TOKENS: dark (article-specific, warm) ---------- */
html[data-theme="dark"] body.postid-1531 {
  --tz-page: #15100B;
  --tz-sheet: #1F1812;
  --tz-panel: #2A2119;
  --tz-panel-2: #251D16;
  --tz-ink: #EFE4CF;
  --tz-ink-strong: #FBF6EC;
  --tz-soft: #E0D2B6;
  --tz-muted: #C9B894;
  --tz-bronze: #D2AE6A;
  --tz-terra: #E0926A;
  --tz-terra-hover: #F2B797;
  --tz-terra-ink: #EBA27F;
  --tz-olive: #B5BF8C;
  --tz-olive-ink: #B5BF8C;
  --tz-button-ink: #1E1610;
  --tz-line: rgba(210, 174, 106, 0.24);
  --tz-line-strong: rgba(210, 174, 106, 0.42);
  --tz-label-bg: rgba(210, 174, 106, 0.10);
  --tz-sheen: rgba(255, 255, 255, 0.03);
  --tz-correct-bg: rgba(181, 191, 140, 0.14);
  --tz-incorrect-bg: rgba(224, 146, 106, 0.12);
  --tz-veil: rgba(21, 16, 11, 0.80);
  --tz-shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
}

/* ---------- 2. BACKGROUND LAYER (approved uploaded asset, no new image) ---------- */
body.postid-1531 .dr-single-body-wrap {
  position: relative;
  background: transparent;
  isolation: isolate;
}

body.postid-1531 .dr-single-body-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-color: var(--tz-page);
  background-image:
    linear-gradient(var(--tz-veil), var(--tz-veil)),
    url("https://darjarihla.com/wp-content/uploads/2026/10/tunisia-civilization-history-parchment-background.webp");
  background-position: 0 0, center top;
  background-size: 100% 100%, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}

body.postid-1531 .dr-single-content-wrap,
body.postid-1531 .dr-single-content-wrap > .wp-block-post-content,
body.postid-1531 .wp-block-post-content {
  background: transparent;
}

@media (max-width: 820px) {
  /* Mobile browsers ignore fixed backgrounds: use a repeating scroll tile. */
  body.postid-1531 .dr-single-body-wrap::before {
    background-attachment: scroll, scroll;
    background-position: 0 0, center top;
    background-size: 100% 100%, 1180px auto;
    background-repeat: no-repeat, repeat-y;
  }
}

/* 2b. Full-viewport layer (Pass 07). The layer above sits on
   .dr-single-body-wrap inside .dr-single-shell, and dr-single-post.css caps
   the shell at min(100% - 32px, 1440px). Outside the shell the body showed:
   the global gradient in light mode and, in dark mode, the --tz-page fill of
   the former dark-surround rule (the dark brown side panels). Once the theme
   script has set data-theme, the same layer paints the body itself, which is
   100% wide (no 100vw breakout), so it spans the whole viewport; the shell
   becomes transparent and the inner layer is switched off. Before the script
   runs (no data-theme) the inner layer above still applies, as before. The
   tokens switch with the theme: light veil or warm dark veil. */
html[data-theme] body.postid-1531 {
  background-color: var(--tz-page);
  background-image:
    linear-gradient(var(--tz-veil), var(--tz-veil)),
    url("https://darjarihla.com/wp-content/uploads/2026/10/tunisia-civilization-history-parchment-background.webp");
  background-position: 0 0, center top;
  background-size: 100% 100%, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}

html[data-theme] body.postid-1531 .dr-single-shell {
  background-color: transparent;
  background-image: none;
}

html[data-theme] body.postid-1531 .dr-single-body-wrap::before {
  content: none;
}

@media (max-width: 820px) {
  /* Same mobile treatment as the inner layer: fixed backgrounds are ignored. */
  html[data-theme] body.postid-1531 {
    background-attachment: scroll, scroll;
    background-size: 100% 100%, 1180px auto;
    background-repeat: no-repeat, repeat-y;
  }
}

/* ---------- 3. ARTICLE ROOT: token remap, culture glow removed ---------- */
body.postid-1531 .dr-post.dr-post-tunisia-pillar {
  --dr-bg: var(--tz-sheet);
  --dr-bg-alt: var(--tz-sheet);
  --dr-bg-soft: var(--tz-panel-2);
  --dr-bg-deep: var(--tz-page);
  --dr-surface: var(--tz-panel);
  --dr-surface-alt: var(--tz-panel-2);
  --dr-panel: var(--tz-panel);
  --dr-panel-alt: var(--tz-panel-2);
  --dr-panel-strong: var(--tz-panel);
  --dr-border: var(--tz-line);
  --dr-border-soft: var(--tz-line);
  --dr-line: var(--tz-line);
  --dr-line-strong: var(--tz-line-strong);
  --dr-text: var(--tz-ink);
  --dr-text-soft: var(--tz-soft);
  --dr-text-muted: var(--tz-muted);
  --dr-soft: var(--tz-soft);
  --dr-muted: var(--tz-muted);
  --dr-heading: var(--tz-ink-strong);
  --dr-gold: var(--tz-bronze);
  --dr-accent: var(--tz-bronze);
  --dr-accent-2: var(--tz-terra);
  --dr-accent-glow: var(--tz-label-bg);
  --dr-cyan: var(--tz-terra);
  --dr-link: var(--tz-terra);
  --dr-link-hover: var(--tz-terra-hover);
  --dr-warning-bg: var(--tz-incorrect-bg);
  --dr-warning-line: var(--tz-line-strong);
  --dr-shadow: var(--tz-shadow);
  --dr-tunisia-panel: var(--tz-panel);
  --dr-tunisia-panel-2: var(--tz-panel-2);
  --dr-tunisia-line: var(--tz-line);
  --dr-tunisia-line-cyan: var(--tz-line);
  color: var(--tz-ink);
  background: transparent;
  background-image: none;
  box-shadow: none;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar::before,
body.postid-1531 .dr-post.dr-post-tunisia-pillar::after {
  content: none;
}

/* Article body becomes the reading sheet. Padding is the only layout change. */
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-body {
  box-sizing: border-box;
  padding: clamp(16px, 4vw, 52px);
  background: linear-gradient(180deg, var(--tz-sheen), rgba(255, 255, 255, 0) 38%), var(--tz-sheet);
  border: 1px solid var(--tz-line);
  border-radius: 4px;
  box-shadow: var(--tz-shadow);
  color: var(--tz-ink);
}

/* ---------- 4. TYPOGRAPHY AND LINKS ---------- */
body.postid-1531 .dr-post-body h2,
body.postid-1531 .dr-post-body h3,
body.postid-1531 .dr-post-section h2,
body.postid-1531 .dr-post-section h3,
body.postid-1531 :is(#context, #mechanism, #narrative, #infrastructure, #power-map, #modern-parallel, #synthesis) h2,
body.postid-1531 :is(#context, #mechanism, #narrative, #infrastructure, #power-map, #modern-parallel, #synthesis) h3 {
  color: var(--tz-ink-strong);
}

body.postid-1531 .dr-post-body p,
body.postid-1531 .dr-post-body li {
  color: var(--tz-ink);
}

body.postid-1531 .dr-post-body strong {
  color: var(--tz-ink-strong);
}

body.postid-1531 .dr-post-body em {
  color: var(--tz-soft);
}

body.postid-1531 .dr-post-body a {
  color: var(--tz-terra);
  border-bottom-color: var(--tz-terra);
}

body.postid-1531 .dr-post-body a:hover,
body.postid-1531 .dr-post-body a:focus-visible {
  color: var(--tz-terra-hover);
  border-bottom-color: var(--tz-terra-hover);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar a:focus-visible,
body.postid-1531 .dr-post.dr-post-tunisia-pillar button:focus-visible,
body.postid-1531 .dr-post.dr-post-tunisia-pillar [tabindex]:focus-visible,
body.postid-1531 .dr-post.dr-post-tunisia-pillar summary:focus-visible {
  outline: 2px solid var(--tz-bronze);
  outline-offset: 3px;
}

body.postid-1531 .dr-post-body code {
  color: var(--tz-ink);
  background: var(--tz-label-bg);
  border-color: var(--tz-line);
}

body.postid-1531 .dr-post-body pre {
  background: var(--tz-panel);
  border-color: var(--tz-line);
  box-shadow: none;
}

body.postid-1531 .dr-post-body hr {
  background: linear-gradient(90deg, transparent, var(--tz-line-strong), transparent);
}

/* ---------- 5. SECTION LABELS, SECTION ACCENTS (culture ID rules overridden) ---------- */
body.postid-1531 .dr-section-label,
body.postid-1531 :is(#context, #mechanism, #narrative, #infrastructure, #power-map, #modern-parallel, #synthesis) .dr-section-label {
  color: var(--tz-bronze);
  background: var(--tz-label-bg);
  border-color: var(--tz-line-strong);
}

body.postid-1531 :is(#context, #mechanism, #narrative, #infrastructure, #power-map, #modern-parallel, #synthesis) .dr-takeaway {
  background: linear-gradient(180deg, var(--tz-sheen), rgba(255, 255, 255, 0)), var(--tz-panel);
  border-left-color: var(--tz-bronze);
  box-shadow: none;
}

body.postid-1531 :is(#context, #mechanism, #narrative, #infrastructure, #power-map, #modern-parallel, #synthesis) .dr-quote {
  background: linear-gradient(180deg, var(--tz-label-bg), rgba(255, 255, 255, 0)), var(--tz-panel-2);
  border-left-color: var(--tz-terra);
  box-shadow: var(--tz-shadow);
}

/* ---------- 6. NOTE BLOCKS ---------- */
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-takeaway,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-counter,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-why-matters,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-source,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-sources,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-definition {
  background: linear-gradient(180deg, var(--tz-sheen), rgba(255, 255, 255, 0)), var(--tz-panel);
  border-color: var(--tz-line);
  color: var(--tz-soft);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-takeaway {
  border-left-color: var(--tz-bronze);
  box-shadow: none;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-counter {
  border-left-color: var(--tz-terra);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-warning {
  background: linear-gradient(180deg, var(--tz-incorrect-bg), rgba(255, 255, 255, 0)), var(--tz-panel);
  border-color: var(--tz-terra);
  color: var(--tz-soft);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar :is(.dr-takeaway, .dr-counter, .dr-why-matters, .dr-source, .dr-sources, .dr-definition, .dr-warning) p {
  color: var(--tz-soft);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar :is(.dr-takeaway, .dr-counter, .dr-definition, .dr-warning) strong,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-why-matters h3 {
  color: var(--tz-ink-strong);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-source-label,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-source .dr-source-label {
  color: var(--tz-bronze);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quote {
  background: linear-gradient(180deg, var(--tz-label-bg), rgba(255, 255, 255, 0)), var(--tz-panel-2);
  border-color: var(--tz-line);
  border-left-color: var(--tz-terra);
  box-shadow: var(--tz-shadow);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quote p {
  color: var(--tz-ink-strong);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quote cite {
  color: var(--tz-muted);
}

/* ---------- 7. CARDS, GRIDS, CALL TO ACTION ---------- */
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-card {
  background: var(--tz-panel);
  border-color: var(--tz-line);
  color: var(--tz-soft);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-card:hover,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-card:focus-within {
  background: var(--tz-panel);
  border-color: var(--tz-line-strong);
  box-shadow: var(--tz-shadow);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-card h3,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-card strong {
  color: var(--tz-ink-strong);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-card p {
  color: var(--tz-soft);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-card span {
  color: var(--tz-bronze);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-cta {
  background: linear-gradient(180deg, var(--tz-label-bg), rgba(255, 255, 255, 0)), var(--tz-panel);
  border-color: var(--tz-line-strong);
  box-shadow: var(--tz-shadow);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-cta strong,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-cta h2 {
  color: var(--tz-ink-strong);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-cta p {
  color: var(--tz-soft);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-cta-btn,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-cta a.dr-post-cta-btn {
  background: var(--tz-bronze);
  border-color: var(--tz-bronze);
  color: var(--tz-button-ink);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-cta-btn:hover,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-cta-btn:focus-visible {
  border-color: var(--tz-ink-strong);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-systems-diagram {
  background: var(--tz-panel);
  border-color: var(--tz-line);
  color: var(--tz-soft);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-systems-diagram h3 {
  color: var(--tz-ink-strong);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-system-table {
  background: var(--tz-panel);
  border-color: var(--tz-line);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-system-table th {
  background: var(--tz-panel-2);
  color: var(--tz-ink-strong);
  border-color: var(--tz-line);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-system-table td {
  background: transparent;
  color: var(--tz-soft);
  border-color: var(--tz-line);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-system-table tbody tr:hover td {
  background: var(--tz-label-bg);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-char-block {
  background: var(--tz-panel);
  border-color: var(--tz-line);
  color: var(--tz-soft);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-char-block:hover,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-char-block:focus-within {
  background: var(--tz-panel-2);
  border-color: var(--tz-line-strong);
}

/* ---------- 8. FLOW STEPS AND FLIP CARDS (behaviour unchanged) ---------- */
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flow-step {
  background: var(--tz-panel);
  border-color: var(--tz-line);
  color: var(--tz-soft);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flow-step:hover,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flow-step:focus-visible,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flow-step.is-active {
  background: var(--tz-panel-2);
  border-color: var(--tz-bronze);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flow-arrow {
  color: var(--tz-bronze);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flip-front {
  background: var(--tz-panel);
  border-color: var(--tz-line);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flip-back {
  background: var(--tz-panel-2);
  border-color: var(--tz-line-strong);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flip-front h3 {
  color: var(--tz-bronze);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flip-back h3 {
  color: var(--tz-ink-strong);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flip-front p,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flip-back p {
  color: var(--tz-soft);
}

/* ---------- 9. QUIZ (state colours keep the same behaviour and hidden logic) ---------- */
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz {
  background: var(--tz-panel);
  border-color: var(--tz-line);
  box-shadow: var(--tz-shadow);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-title,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-question {
  color: var(--tz-ink-strong);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-option {
  background: var(--tz-panel-2);
  border-color: var(--tz-line-strong);
  color: var(--tz-ink);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-option:hover:not(:disabled) {
  background: var(--tz-label-bg);
  border-color: var(--tz-bronze);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-option.dr-correct {
  background: var(--tz-correct-bg);
  border-color: var(--tz-olive);
  color: var(--tz-olive-ink);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-option.dr-incorrect {
  background: var(--tz-incorrect-bg);
  border-color: var(--tz-terra);
  color: var(--tz-terra-ink);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-feedback,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-result-label {
  color: var(--tz-muted);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-result {
  border-top-color: var(--tz-line);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-score {
  color: var(--tz-bronze);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-retry {
  background: transparent;
  border-color: var(--tz-bronze);
  color: var(--tz-bronze);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-retry:hover {
  background: var(--tz-label-bg);
}

/* ---------- 10. FIGURES: caption keeps its dark overlay (ivory text on image) ---------- */
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-image figcaption {
  color: #FBF6EC;
}

/* ---------- 10. FLIPCARD FIT-TO-CONTENT (post 1531 only) ----------
   Live owners of card geometry: dr-post-base.css (unlayered: fixed 280px card,
   240px at 768px and below, absolute faces) and dr-single-post.css (layered:
   overflow hidden on faces). Fix: both faces share one grid cell, so the card
   grows to its longest face. Transform, perspective, backface visibility,
   focus and the flipped toggle are not changed. */

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flip-card {
  display: grid;
  height: auto;
  min-height: 280px;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flip-card > .dr-flip-inner {
  position: relative;
  inset: auto;
  display: grid;
  height: auto;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flip-front,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flip-back {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  height: auto;
  overflow: visible;
}

@media (max-width: 768px) {
  body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flip-card {
    min-height: 240px;
  }
}


/* ---------- 11. EDITORIAL POLISH (2026-10-09, post 1531 only) ----------
   Builds on the flipcard candidate (sha256 4d3f83a0). Changes are limited to:
   11a article prose paragraphs (reading layer, Source Sans 3),
   11b eyebrow and link colour tokens (contrast),
   11c alternating parchment bands between article sections.
   Headings (h1, h2, h3) keep their font, size and line-height. Quiz, flip-card
   behaviour, timeline, background asset, figures, HTML and post_content are not
   changed. Every selector is limited to body.postid-1531 (light) or
   html[data-theme="dark"] body.postid-1531 (dark). */

body.postid-1531 {
  --tz-eyebrow: #6B4E1E;
  --tz-link: #8A3E22;
}

html[data-theme="dark"] body.postid-1531 {
  --tz-eyebrow: #D2AE6A;
  --tz-link: #E0926A;
}

/* 11a. Reading layer: article prose paragraphs only (direct children of the
   article body or of a section). Cards, notes, quotes and quiz text keep their
   existing typography. */
body.postid-1531 .dr-post-body > p,
body.postid-1531 .dr-post-body > section.dr-post-section > p {
  font-family: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.75;
  max-width: 68ch;
}

/* 11b. Eyebrow labels and secondary accent text: light-mode bronze text
   (4.70:1 on the label tint) moves to eyebrow ink. Dark mode keeps the bronze
   token. Selectors repeat the forms used by the flipcard candidate so the
   later rule wins at equal specificity. */
body.postid-1531 .dr-section-label,
body.postid-1531 :is(#context, #mechanism, #narrative, #infrastructure, #power-map, #modern-parallel, #synthesis) .dr-section-label,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-card span,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-source-label,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-source .dr-source-label,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flip-front h3,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-score,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-retry {
  color: var(--tz-eyebrow);
}

/* Article links: light-mode terracotta text moves from 4.60:1 to the link token. */
body.postid-1531 .dr-post-body a {
  color: var(--tz-link);
  border-bottom-color: var(--tz-link);
}

/* 11c. Removed in Pass 04 revision 2. The alternating even-section bands read
   as mechanical blocks; section 12c replaces them with connected chapter
   separation. */


/* ---------- 12. PASS 04 REVISION 2 (2026-10-09, post 1531 only) ----------
   Owner direction: a wider editorial composition with a centred reading
   column, connected chapters instead of alternating bands, comparison groups
   that show what they compare, and a distinct Andalusian summer quiz.
   Not in this file: tilt suppression (tilt is removed through post_content
   when card groups are restructured), card restructuring, featured images and
   new figures. Heading font, size and line-height are not changed.
   12a width zones              12f related article links
   12b centred reading column   12g true flipcards
   12c chapter separation       12h character blocks and flow container
   12d comparison groups        12i Andalusian summer quiz
   12e future-route cards
   Every selector is limited to body.postid-1531 (light) or
   html[data-theme="dark"] body.postid-1531 (dark). */

body.postid-1531 {
  --tz-sea: #176EA2;
  --tz-sand: #E9DBBF;
}

html[data-theme="dark"] body.postid-1531 {
  --tz-sea: #7DBDE8;
  --tz-sand: #2A2219;
}

/* 12a. Width zones. From 1280px the article sheet grows from 1180px to 1360px
   (candidate value). Owner of the width chain: dr-single-post.css
   (--dr-post-max and --dr-post-visual, declared on .dr-post). Below 1280px
   the sheet width is unchanged. */
@media (min-width: 1280px) {
  body.postid-1531 .dr-post.dr-post-tunisia-pillar {
    --dr-post-max: 1360px;
    --dr-post-visual: 1360px;
  }
}

/* 12b. Centred reading column. Labels, headings, prose and note blocks share
   one left edge on a 48rem column (Pass 07, was 40rem; roughly 80 to 90
   characters of the 11a reading layer). Headings may run to 56rem from the
   same edge. Figures, the annotated block, the comparison tables and the
   image pair use the 75rem article measure (--tz-measure, was 60rem); grids,
   diagrams and the timeline keep the full sheet width. On narrow screens
   every measure is the full width. */
body.postid-1531 .dr-post.dr-post-tunisia-pillar {
  --tz-column: 48rem;
  --tz-column-wide: 56rem;
  --tz-measure: 75rem;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-body > section.dr-post-section > :is(p, ul, ol, blockquote, .dr-takeaway, .dr-quote, .dr-why-matters, .dr-definition, .dr-warning, .dr-counter, .dr-flow, .dr-sources, .dr-post-cta) {
  box-sizing: border-box;
  width: min(100%, var(--tz-column));
  max-width: none;
  margin-left: max(0px, calc((100% - var(--tz-column)) / 2));
  margin-right: auto;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-body > section.dr-post-section > :is(h2, h3) {
  box-sizing: border-box;
  width: min(calc(100% - max(0px, calc((100% - var(--tz-column)) / 2))), var(--tz-column-wide));
  max-width: none;
  margin-left: max(0px, calc((100% - var(--tz-column)) / 2));
  margin-right: auto;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-body > section.dr-post-section > .dr-section-label {
  margin-left: max(0px, calc((100% - var(--tz-column)) / 2));
  margin-right: auto;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-body > section.dr-post-section > figure.dr-post-image {
  width: min(100%, var(--tz-measure));
  margin-inline: auto;
}

/* 12c. Chapter separation. Sections keep the existing hairline, the gold edge
   line and the scroll highlight (.is-active, dr-single-post.js). They gain
   even vertical rhythm and a small lozenge on the dividing rule. Two module
   chapters (the interactive timeline and the layer matrix) sit on a
   sandstone ground because of their function, not by alternation. */
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-body > section.dr-post-section {
  padding-block: clamp(28px, 4vw, 52px);
  margin-bottom: 0;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-body > section.dr-post-section:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--tz-sheet);
  border: 1px solid var(--tz-line-strong);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-body > section.dr-post-section:is(#timeline, #layer-matrix) {
  margin-inline: calc(-1 * clamp(16px, 4vw, 52px));
  padding-inline: clamp(16px, 4vw, 52px);
  background: linear-gradient(180deg, var(--tz-sheen), rgba(255, 255, 255, 0)), var(--tz-sand);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-body > section.dr-post-section.is-active:is(#timeline, #layer-matrix) {
  background: linear-gradient(90deg, var(--dr-gold-07, rgba(198, 167, 104, 0.07)), transparent 34%), var(--tz-sand);
}

/* 12d. Comparison groups keep their markup and show what is compared.
   #mechanism: sea power (blue rule) against land power (terracotta rule).
   #archive-summary: the archive is drawn larger than the summary.
   Revision 3: #infrastructure-mirror and #field-map no longer use cards or
   grids (candidate A); their styles are in 13c and 13a.
   Grid columns: 3 for future routes from 1024px, 4 for figures and related
   links from 1280px. */
body.postid-1531 .dr-post.dr-post-tunisia-pillar #mechanism .dr-comparison-grid > .dr-post-card:first-child {
  border-top: 3px solid var(--tz-sea);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar #mechanism .dr-comparison-grid > .dr-post-card:last-child {
  border-top: 3px solid var(--tz-terra);
}

@media (min-width: 720px) {
  body.postid-1531 .dr-post.dr-post-tunisia-pillar #archive-summary .dr-comparison-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar #archive-summary .dr-comparison-grid > .dr-post-card:first-child {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar #archive-summary .dr-comparison-grid > .dr-post-card:last-child {
  border-inline-start: 3px solid var(--tz-bronze);
}

@media (min-width: 1024px) {
  body.postid-1531 .dr-post.dr-post-tunisia-pillar #future-routes .dr-post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  body.postid-1531 .dr-post.dr-post-tunisia-pillar #civilizational-figures .dr-post-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 12e. Future-route cards announce articles that do not exist yet: dashed
   outline, no fill, muted text. */
body.postid-1531 .dr-post.dr-post-tunisia-pillar #future-routes .dr-post-card {
  background: transparent;
  border-style: dashed;
  border-color: var(--tz-line-strong);
  box-shadow: none;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar #future-routes .dr-post-card p {
  color: var(--tz-muted);
}

/* 12f. Related article cards (a.dr-post-card in #related-reading) are links:
   raised card plus a direction cue. position: relative anchors the visual
   engine hover bar (::after, position absolute) to the card. Featured images
   and the arrow position beside them are in section 14 (Pass 05). */
body.postid-1531 .dr-post.dr-post-tunisia-pillar a.dr-post-card {
  position: relative;
  padding-inline-end: 48px;
  text-decoration: none;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar a.dr-post-card::before {
  content: "\2192";
  content: "\2192" / "";
  position: absolute;
  top: clamp(18px, 3vw, 26px);
  right: 18px;
  color: var(--tz-link);
  font-size: 1.125rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar a.dr-post-card:hover::before,
body.postid-1531 .dr-post.dr-post-tunisia-pillar a.dr-post-card:focus-visible::before {
  transform: translateX(3px);
}

/* 12g. True flipcards (timeline, 6 cards, role="button") stay raised and gain
   a folded corner on the front face, the cue that the card turns. Flip
   behaviour, fit-to-content (section 10), headings and focus are unchanged. */
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flip-card {
  border-radius: var(--dr-radius-sm, 10px);
  box-shadow: var(--tz-shadow);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flip-front::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-top-right-radius: inherit;
  background: linear-gradient(225deg, var(--tz-sheet) 0 50%, var(--tz-line-strong) 50% 100%);
  pointer-events: none;
}

/* 12h. Character blocks (8 figures) are static profiles: bronze rail restored
   (section 7 had faded it), no hover colour change. Revision 3: candidate A
   removes their tabindex because they hold no action. Flow container: the shared Tunisia pillar rule in
   dr-post-base.css paints a fixed navy and cyan gradient that the article
   tokens do not remap. */
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-char-block,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-char-block:hover,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-char-block:focus-within {
  background: var(--tz-panel);
  border-color: var(--tz-line);
  border-inline-start-color: var(--tz-bronze);
  box-shadow: none;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-flow {
  background: linear-gradient(180deg, var(--tz-sheen), rgba(255, 255, 255, 0)), var(--tz-panel-2);
  border-color: var(--tz-line);
}

/* 12i. Andalusian summer quiz. Same markup, same script (dr-single-post.js,
   initQuiz); the only hooks are the states it sets: disabled, .dr-correct,
   .dr-incorrect, feedback text and the hidden result. Andalusian blue is the
   quiz identity; turquoise, sunlight and terracotta are used as fills only
   (they fail as text on cream). Correct and incorrect are shown by colour,
   a check or cross mark and the existing feedback text. Question numbers and
   option letters come from existing markup (CSS counter, data-value). State
   rails and feedback panels use :has(); without it the quiz still works. */
body.postid-1531 {
  --tz-q-surface: #FFF1D5;
  --tz-q-option: #FFFCF6;
  --tz-q-blue: #176EA2;
  --tz-q-blue-deep: #11557E;
  --tz-q-blue-hover: #11557E;
  --tz-q-on-blue: #FFFCF6;
  --tz-q-turquoise: #20A5BA;
  --tz-q-sun: #F1C768;
  --tz-q-sun-tint: rgba(241, 199, 104, 0.30);
  --tz-q-number-ink: #11557E;
  --tz-q-line: rgba(23, 110, 162, 0.28);
  --tz-q-correct: #0E6F63;
  --tz-q-correct-line: #1B8A78;
  --tz-q-correct-fill: #157A6C;
  --tz-q-correct-on: #FFFCF6;
  --tz-q-correct-tint: rgba(32, 165, 186, 0.16);
  --tz-q-incorrect: #A4452A;
  --tz-q-incorrect-line: #C25A36;
  --tz-q-incorrect-fill: #E78D62;
  --tz-q-incorrect-on: #3A170A;
  --tz-q-incorrect-tint: rgba(231, 141, 98, 0.22);
  --tz-ui-font: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tz-mono-font: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

html[data-theme="dark"] body.postid-1531 {
  --tz-q-surface: #1D2127;
  --tz-q-option: #262C33;
  --tz-q-blue: #7DBDE8;
  --tz-q-blue-deep: #7DBDE8;
  --tz-q-blue-hover: #A3D0EE;
  --tz-q-on-blue: #15100B;
  --tz-q-turquoise: #4FC4D3;
  --tz-q-sun: #F1C768;
  --tz-q-sun-tint: rgba(241, 199, 104, 0.16);
  --tz-q-number-ink: #15100B;
  --tz-q-line: rgba(125, 189, 232, 0.30);
  --tz-q-correct: #73D3C2;
  --tz-q-correct-line: #4FB8A6;
  --tz-q-correct-fill: #4FB8A6;
  --tz-q-correct-on: #10201E;
  --tz-q-correct-tint: rgba(79, 196, 211, 0.16);
  --tz-q-incorrect: #F2A483;
  --tz-q-incorrect-line: #E78D62;
  --tz-q-incorrect-fill: #E78D62;
  --tz-q-incorrect-on: #2A1209;
  --tz-q-incorrect-tint: rgba(231, 141, 98, 0.18);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 880px);
  margin-inline: auto;
  padding: clamp(32px, 4.5vw, 52px) clamp(18px, 3.5vw, 40px) clamp(20px, 3.5vw, 40px);
  background: var(--tz-q-surface);
  border: 1px solid var(--tz-q-line);
  border-radius: 8px;
  box-shadow: var(--tz-shadow);
  overflow: hidden;
}

/* Ceramic band: a zellij-like border of blue and turquoise tiles with a
   sunlight rule. Decorative only. */
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 12px;
  background: conic-gradient(from 45deg, var(--tz-q-blue) 0 25%, var(--tz-q-surface) 0 50%, var(--tz-q-turquoise) 0 75%, var(--tz-q-surface) 0 100%) 0 0 / 16px 12px;
  border-bottom: 2px solid var(--tz-q-sun);
  pointer-events: none;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-header {
  margin-bottom: 6px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--tz-q-line);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-header .dr-section-label {
  color: var(--tz-q-blue);
  background: transparent;
  border-color: var(--tz-q-line);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-questions {
  counter-reset: tz-quiz;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-q {
  counter-increment: tz-quiz;
  margin: 0;
  padding: 22px 0 22px 18px;
  border-bottom: 1px solid var(--tz-q-line);
  border-left: 3px solid transparent;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-q:last-child {
  border-bottom: 0;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-question {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--tz-ink-strong);
  font-family: var(--tz-ui-font);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.45;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-question::before {
  content: counter(tz-quiz);
  flex: none;
  align-self: flex-start;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tz-q-sun);
  color: var(--tz-q-number-ink);
  font-family: var(--tz-mono-font);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-options {
  display: grid;
  gap: 10px;
}

@media (min-width: 900px) {
  body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  background: var(--tz-q-option);
  border: 1px solid var(--tz-q-line);
  border-radius: 8px;
  color: var(--tz-ink);
  font-family: var(--tz-ui-font);
  font-size: 1rem;
  line-height: 1.4;
  text-align: left;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-option::before {
  content: attr(data-value);
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--tz-q-blue);
  border-radius: 50%;
  color: var(--tz-q-blue);
  font-family: var(--tz-mono-font);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-option:hover:not(:disabled) {
  background: linear-gradient(var(--tz-q-sun-tint), var(--tz-q-sun-tint)), var(--tz-q-option);
  border-color: var(--tz-q-blue);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-option:focus-visible {
  outline: 2px solid var(--tz-q-blue);
  outline-offset: 2px;
}

/* Answered question: the other options step back without fading the state
   colours (the shared rule set opacity 0.7 on every disabled option). Keep
   this rule before the .dr-correct and .dr-incorrect rules. */
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-option:disabled {
  opacity: 1;
  cursor: default;
  color: var(--tz-muted);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-option.dr-correct {
  background: linear-gradient(var(--tz-q-correct-tint), var(--tz-q-correct-tint)), var(--tz-q-option);
  border-color: var(--tz-q-correct-line);
  color: var(--tz-q-correct);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-option.dr-incorrect {
  background: linear-gradient(var(--tz-q-incorrect-tint), var(--tz-q-incorrect-tint)), var(--tz-q-option);
  border-color: var(--tz-q-incorrect-line);
  color: var(--tz-q-incorrect);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-option.dr-correct::before {
  background: var(--tz-q-correct-fill);
  border-color: var(--tz-q-correct-fill);
  color: var(--tz-q-correct-on);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-option.dr-incorrect::before {
  background: var(--tz-q-incorrect-fill);
  border-color: var(--tz-q-incorrect-fill);
  color: var(--tz-q-incorrect-on);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-option:is(.dr-correct, .dr-incorrect)::after {
  margin-inline-start: auto;
  padding-inline-start: 8px;
  font-weight: 700;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-option.dr-correct::after {
  content: "\2713";
  content: "\2713" / "";
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-option.dr-incorrect::after {
  content: "\2715";
  content: "\2715" / "";
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-q:has(.dr-quiz-option:disabled) {
  border-left-color: var(--tz-q-correct-fill);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-q:has(.dr-quiz-option.dr-incorrect) {
  border-left-color: var(--tz-q-incorrect-line);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-feedback {
  min-height: 0;
  margin-top: 12px;
  color: var(--tz-soft);
  font-family: var(--tz-ui-font);
  font-size: 0.975rem;
  line-height: 1.5;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-q:has(.dr-quiz-option:disabled) .dr-quiz-feedback {
  padding: 10px 14px;
  background: var(--tz-q-correct-tint);
  border-left: 3px solid var(--tz-q-correct-fill);
  border-radius: 0 6px 6px 0;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-q:has(.dr-quiz-option.dr-incorrect) .dr-quiz-feedback {
  background: var(--tz-q-incorrect-tint);
  border-left-color: var(--tz-q-incorrect-line);
}

/* The result block keeps its hidden attribute: display is only set when it
   is not hidden. */
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-result:not([hidden]) {
  display: grid;
  justify-items: start;
  gap: 4px;
  margin-top: 18px;
  padding: 22px 22px 24px;
  text-align: left;
  background: linear-gradient(var(--tz-q-sun-tint), var(--tz-q-sun-tint)), var(--tz-q-surface);
  border: 1px solid var(--tz-q-line);
  border-left: 4px solid var(--tz-q-blue);
  border-radius: 0 8px 8px 0;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-score {
  color: var(--tz-q-blue-deep);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-result-label {
  color: var(--tz-soft);
  font-family: var(--tz-ui-font);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-retry {
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 22px;
  background: var(--tz-q-blue);
  border: 1px solid var(--tz-q-blue);
  border-radius: 8px;
  color: var(--tz-q-on-blue);
  font-family: var(--tz-ui-font);
  font-weight: 600;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-retry:hover,
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-retry:focus-visible {
  background: var(--tz-q-blue-hover);
  border-color: var(--tz-q-blue-hover);
}

@media (max-width: 600px) {
  body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-quiz-q {
    padding-left: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.postid-1531 .dr-post.dr-post-tunisia-pillar a.dr-post-card::before {
    transition: none;
  }

  body.postid-1531 .dr-post.dr-post-tunisia-pillar a.dr-post-card:hover::before,
  body.postid-1531 .dr-post.dr-post-tunisia-pillar a.dr-post-card:focus-visible::before {
    transform: none;
  }
}


/* ---------- 13. PASS 04 REVISION 3 (2026-10-09, post 1531 only) ----------
   Styles for the semantic structures of post_content candidate A (built from
   the verified owner export ec7f4a60). With the current live post_content
   13a to 13d match nothing and 13e only quiets the future-route cards, so
   this file and candidate A deploy together.
   13a orientation facts      #field-map dl.dr-facts
   13b annotated context      #context .dr-annotated (compact dl beside figure 1)
   13c comparison tables      #infrastructure-mirror, #power-map
   13d witness list           #narrative ul.dr-witness-list
   13e future-route cards     static announcements, no tilt (candidate A)
   Shared owners not changed: table defaults (dr-typography.css,
   dr-post-base.css, dr-single-post.css at 768px and below), list defaults
   (dr-post-culture.css), stagger reveal (dr-visual-engine.js and .css).
   Every selector is limited to body.postid-1531; colours come from the
   article tokens, which section 1b redefines for dark mode. */

/* 13a. Orientation facts: a ruled strip, not cards. Term (eyebrow), value
   (display type) and one line of context. Three columns from 720px. */
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  border-block: 1px solid var(--tz-line-strong);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-facts__item {
  padding-block: clamp(16px, 2.4vw, 24px);
  border-top: 1px solid var(--tz-line);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-facts__item:first-child {
  border-top: 0;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-facts dt {
  margin: 0 0 8px;
  color: var(--tz-eyebrow);
  font-family: var(--tz-ui-font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-facts dd {
  margin: 0;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-facts dd strong {
  display: block;
  margin-bottom: 6px;
  color: var(--tz-ink-strong);
  font-family: var(--dr-font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
  line-height: 1.25;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-facts dd p {
  margin: 0;
  color: var(--tz-soft);
  font-size: 1rem;
  line-height: 1.65;
}

@media (min-width: 720px) {
  body.postid-1531 .dr-post.dr-post-tunisia-pillar #field-map .dr-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.postid-1531 .dr-post.dr-post-tunisia-pillar #field-map .dr-facts__item {
    padding-inline: clamp(16px, 2.4vw, 28px);
    border-top: 0;
    border-inline-start: 1px solid var(--tz-line);
  }

  body.postid-1531 .dr-post.dr-post-tunisia-pillar #field-map .dr-facts__item:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

/* 13b. Annotated context: the compact definition list reads beside the
   Dougga mausoleum figure from 1024px and above it on smaller screens. The
   block shares the article measure of section 12b. The figure keeps its
   markup, reveal and caption overlay; only its outer margin moves to the
   grid gap. */
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-annotated {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  box-sizing: border-box;
  width: min(100%, var(--tz-measure));
  margin-inline: auto;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-annotated > figure.dr-post-image {
  margin: 0;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-facts--compact .dr-facts__item {
  padding-block: clamp(12px, 1.8vw, 18px);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-facts--compact dd strong {
  font-size: 1.125rem;
  line-height: 1.35;
}

@media (min-width: 1024px) {
  body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-annotated {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* 13c. Comparison tables. Quiet data tables on the article measure: header row
   in eyebrow type, ruled rows, no hover. The shared defaults are neutralised
   here for these two tables only: td opacity 0.8 (dr-typography.css), white
   th text (dr-post-base.css) and display: block at 768px and below
   (dr-single-post.css). Below 720px each row stacks; cells show their column
   name from data-label (alternative text "" so screen readers do not hear it
   twice) and the visually hidden header row keeps the table semantics. The
   markup carries explicit table roles because display: block can drop them. */
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-table-wrap {
  box-sizing: border-box;
  width: min(100%, var(--tz-measure));
  margin-inline: auto;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-table-wrap > table {
  display: table;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--tz-panel);
  border: 1px solid var(--tz-line);
  border-radius: var(--dr-radius-sm, 10px);
  box-shadow: none;
  color: var(--tz-soft);
  font-size: 1rem;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-table-wrap :is(th, td) {
  padding: clamp(14px, 2vw, 20px) clamp(14px, 2vw, 22px);
  border: 0;
  border-top: 1px solid var(--tz-line);
  background: transparent;
  color: var(--tz-soft);
  opacity: 1;
  text-align: start;
  vertical-align: top;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-table-wrap :is(th, td) + :is(th, td) {
  border-inline-start: 1px solid var(--tz-line);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-table-wrap tbody tr:first-child > * {
  border-top: 0;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-table-wrap thead th {
  border-top: 0;
  border-bottom: 2px solid var(--tz-line-strong);
  background: var(--tz-panel-2);
  color: var(--tz-eyebrow);
  font-family: var(--tz-ui-font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-table-wrap td strong {
  display: block;
  margin-bottom: 6px;
  color: var(--tz-ink-strong);
  font-family: var(--dr-font-display);
  font-size: 1.125rem;
  line-height: 1.35;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-table-wrap td p {
  margin: 0;
  color: var(--tz-soft);
  font-size: 1rem;
  line-height: 1.65;
}

/* Mirror table: ancient (bronze) against modern (sea), as in Revision 2. */
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-mirror-table thead th:first-child {
  border-bottom-color: var(--tz-bronze);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-mirror-table thead th:last-child {
  border-bottom-color: var(--tz-sea);
}

/* Power table: actors are row headers; Benefit and Mechanism follow. */
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-power-table thead th:first-child {
  width: 22%;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-power-table thead th:nth-child(2) {
  width: 30%;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-power-table tbody th {
  background: var(--tz-label-bg);
  color: var(--tz-ink-strong);
  font-family: var(--tz-ui-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

@media (max-width: 719px) {
  body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-table-wrap > table,
  body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-table-wrap :is(tbody, tr, th, td) {
    display: block;
    width: auto;
  }

  body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-table-wrap thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-table-wrap tbody tr {
    padding-block: 6px;
    border-top: 1px solid var(--tz-line-strong);
  }

  body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-table-wrap tbody tr:first-child {
    border-top: 0;
  }

  body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-table-wrap tbody :is(th, td) {
    padding: 10px clamp(14px, 4vw, 20px);
    border: 0;
  }

  body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-table-wrap td[data-label]::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    display: block;
    margin-bottom: 6px;
    color: var(--tz-eyebrow);
    font-family: var(--tz-ui-font);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-mirror-table tbody td {
    margin-block: 8px;
    border-inline-start: 3px solid var(--tz-bronze);
  }

  body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-mirror-table tbody td:last-child {
    border-inline-start-color: var(--tz-sea);
  }
}

/* 13d. Witness list (#narrative): an editorial ledger in the reading column
   (the list joins the reading column through section 12b). Label in the left
   column from 560px; title and line of evidence on the right. The markup has
   role="list" because list-style: none removes list semantics in WebKit. */
body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-witness-list {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--tz-line-strong);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-witness-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--tz-line);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-witness-list__label {
  margin-bottom: 6px;
  color: var(--tz-eyebrow);
  font-family: var(--tz-ui-font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-witness-list > li > strong {
  display: block;
  margin-bottom: 4px;
  color: var(--tz-ink-strong);
  font-family: var(--dr-font-display);
  font-size: 1.125rem;
  line-height: 1.35;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-witness-list > li > p {
  margin: 0;
  color: var(--tz-soft);
  font-size: 1rem;
  line-height: 1.65;
}

@media (min-width: 560px) {
  body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-witness-list > li {
    grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
    column-gap: clamp(16px, 2.4vw, 28px);
  }

  body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-witness-list__label {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
    padding-top: 0.35em;
  }

  body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-witness-list > li > :is(strong, p) {
    grid-column: 2;
  }
}

/* 13e. Future-route cards lose data-dr-tilt in candidate A. They announce
   articles that do not exist yet (12e), so they are static: no lift from the
   layered card hover and no hover bar from dr-visual-engine.css (its ::after
   needs a positioned card, which the tilt attribute used to provide). */
body.postid-1531 .dr-post.dr-post-tunisia-pillar #future-routes .dr-post-card:hover {
  transform: none;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar #future-routes .dr-post-card::after {
  content: none;
}


/* Tunisia 1531: layer-matrix cell opacity correction.
   Candidate only; browser contrast verification pending. */
body.postid-1531 #layer-matrix td {
  opacity: 1;
}

/* ---------- 14. PASS 05: RELATED READING MEDIA (2026-10-10, post 1531 only) ----------
   Post_content adds div.dr-related-card__media as the first child of each
   a.dr-post-card in #related-reading. It holds the featured image assigned
   to the linked post or page in the Media Library (src, alt, width and
   height copied from attachment metadata; loading lazy, decoding async).
   The wrapper is not .dr-post-image, so the .dr-post-image rules of
   dr-post-culture.css and dr-single-post.css do not apply to it.
   14a grid: one column, two columns from 720px (the breakpoint section 13
       uses for comparison groups). Sole owner for #related-reading. The
       layered dr-single-post.css default (two columns, one at 768px and
       below) is overridden because this file is unlayered.
   14b frame: fixed 3:2 box against layout shift; the image is cropped with
       object-fit. The card keeps the 48px end padding of 12f, so the frame
       reaches into it by the difference and sits symmetrically in the card.
       The clamp repeats the .dr-post-card padding of dr-single-post.css.
   14c arrow: with media at the top, the 12f direction cue moves to the
       bottom right of the card, above the 2px hover bar of
       dr-visual-engine.css, so it does not cover the image. */
body.postid-1531 .dr-post.dr-post-tunisia-pillar #related-reading .dr-post-grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
  body.postid-1531 .dr-post.dr-post-tunisia-pillar #related-reading .dr-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar #related-reading .dr-related-card__media {
  aspect-ratio: 3 / 2;
  margin: 0 0 16px;
  margin-inline-end: calc(clamp(18px, 3vw, 26px) - 48px);
  overflow: hidden;
  border: 1px solid var(--tz-line);
  border-radius: 6px;
  background: var(--tz-panel-2);
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar #related-reading .dr-related-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar #related-reading a.dr-post-card::before {
  top: auto;
  bottom: clamp(18px, 3vw, 26px);
}

/* ---------- 15. PASS 06A: CAPTIONS BELOW THE SIX PASS 06 FIGURES (2026-10-10, post 1531 only) ----------
   Scope: figure.dr-post-image--caption-below and div.dr-figure-pair only. The
   Pass 06A post_content adds the class to the six Pass 06 figures
   (img.wp-image-2905 to 2910) and to no other figure, and the wrapper only
   around the Husainid (2908) and 1956 (2909) figures. The four older figures
   keep the caption overlay of dr-post-culture.css and section 10.
   15a figure: the 20px figure radius of dr-post-culture.css would clip the
       caption corner once the caption sits below the image inside the
       figure; the image keeps its own radius. The dr-post-culture.css hover
       zoom is off here because the figure no longer ends at the image edge,
       and the image shadow stays invisible as it was (the figure clipped it).
   15b caption: static, below the image, in the reading family of 11a at
       caption size. Text in --tz-muted (calculated 5.91:1 or more on sheet
       and sand in light mode, 7.10:1 or more in dark mode); 2px rail in
       --tz-bronze, the article mapping of the site gold (--dr-gold).
   15c image pair: one column, two columns from 1024px (the breakpoint of
       the 13b annotated block), on the article measure of 12b. */
body.postid-1531 .dr-post.dr-post-tunisia-pillar figure.dr-post-image--caption-below {
  border-radius: 0;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar figure.dr-post-image--caption-below > img {
  box-shadow: none;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar figure.dr-post-image--caption-below:hover > img {
  transform: none;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar figure.dr-post-image--caption-below > figcaption {
  position: static;
  inset: auto;
  box-sizing: border-box;
  max-width: 68ch;
  margin: 12px 0 0;
  padding: 0;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--tz-bronze);
  border-radius: 0;
  background: none;
  color: var(--tz-muted);
  font-family: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  text-align: start;
}

@media (max-width: 768px) {
  body.postid-1531 .dr-post.dr-post-tunisia-pillar figure.dr-post-image--caption-below > figcaption {
    font-size: 0.875rem;
  }
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-body > section.dr-post-section > .dr-figure-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  box-sizing: border-box;
  width: min(100%, var(--tz-measure));
  margin: clamp(20px, 3vw, 32px) auto;
}

body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-figure-pair > figure.dr-post-image {
  margin: 0;
}

@media (min-width: 1024px) {
  body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-body > section.dr-post-section > .dr-figure-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 16. PASS 07: LIGHTBOX PRESENTATION (2026-10-10, post 1531 only) ----------
   Owner of the viewer: dr-single-post.js builds one viewer per page
   (div#drLightbox.dr-lightbox on body: close button, img, div.dr-lightbox-
   caption) and opens it from figure.dr-post-image img. dr-single-post.css
   (@layer components) lays it out as a row flexbox, so the caption sat beside
   the image and took width from it, and the caption has no rule of its own.
   Behaviour is unchanged: open, close button, backdrop click, Escape and the
   body scroll lock stay in the shared owner; no listener, no second viewer.
   Presentation only, scoped through the body class and unlayered, so it wins
   over the layered shared rules on this post only.
   16a viewer: column, image above caption; backdrop from the article tokens
       (parchment, or warm dark) instead of the global --dr-bg; centred by auto
       margins, so a tall caption on a short screen scrolls instead of being
       cut off at the top.
   16b image: available width up to 1600px, at most 85vh or the height left
       after caption and padding; object-fit contain keeps the original ratio,
       no crop. No radius or shadow, because contain can leave empty bands.
   16c caption: below the image, reading family, centred, up to 68ch.
   16d close button: 44px target, token colours, visible focus ring. */
body.postid-1531 .dr-lightbox {
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  box-sizing: border-box;
  padding: 64px 4vw 24px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--tz-page) 97%, transparent);
}

body.postid-1531 .dr-lightbox img {
  flex: 0 1 auto;
  width: 100%;
  max-width: 1600px;
  height: auto;
  max-height: min(85vh, calc(100vh - 200px));
  max-height: min(85dvh, calc(100dvh - 200px));
  min-height: 0;
  margin-top: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

body.postid-1531 .dr-lightbox-caption {
  flex: 0 0 auto;
  box-sizing: border-box;
  max-width: min(100%, 68ch);
  margin-bottom: auto;
  color: var(--tz-ink);
  font-family: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  text-align: center;
}

body.postid-1531 .dr-lightbox-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: 12px;
  right: 12px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--tz-line-strong);
  border-radius: 999px;
  background: var(--tz-panel);
  color: var(--tz-ink-strong);
  font-size: 22px;
  line-height: 1;
}

body.postid-1531 .dr-lightbox-close:focus-visible {
  outline: 2px solid var(--tz-bronze);
  outline-offset: 3px;
}

/* =========================================================
   TUNISIAN CIVILIZATION HISTORY | WIDTH PASS 09
   Centered desktop reading sheet, post 1531 only.
   ========================================================= */

@media (min-width: 900px) {

  body.postid-1531 .dr-post.dr-post-tunisia-pillar .dr-post-body {
    box-sizing: border-box;
    position: relative;

    /* Independent of a narrower Gutenberg parent */
    width: min(1200px, calc(100vw - 64px));
    max-width: none;

    /* Center the sheet on the parent midpoint */
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
  }
}