/* =========================================================================
   شعله جاوید — Quiet Press v6 · main.css
   Custom stylesheet. Semantic classes. Logical properties throughout.
   ========================================================================= */

/* -------------------------------------------------------------------------
   ۰۱ · Design tokens (11 brand tokens + 2 function tokens)
   ------------------------------------------------------------------------- */
:root {
  /* Brand — the eleven locked tokens */
  --ink:            #0F0F0F;
  --paper:          #FFFFFF;
  --crimson:        #8E1B1B;
  --crimson-deep:   #6B1414;
  --maroon:         #4A0E0E;
  --crimson-tint:   #F5DCDC;
  --ink-soft:       #2A2A2A;
  --stone:          #6E6E6A;
  --line:           #E6E5E1;
  --cream:          #FAF8F3;

  /* Functional */
  --ok:             #1E7B4F;
  --warn:           #B5871F;

  /* Type families */
  --font-fa:        "Farhang2", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display:   "Farhang2", serif;
  --font-en:        "Newsreader", Georgia, serif;
  --font-ui:        "Inter", "Farhang2", ui-sans-serif, sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, monospace;
  --font-nav:       "ModamPro", "Farhang2", ui-sans-serif, sans-serif;

  /* Type scale — 8px grid */
  --t-micro:        0.6875rem;   /* 11px */
  --t-caption:      0.75rem;     /* 12px */
  --t-small:        0.875rem;    /* 14px */
  --t-body:         1.0625rem;   /* 17px */
  --t-h4:           1.25rem;     /* 20px */
  --t-h3:           1.5rem;      /* 24px */
  --t-h2:           2rem;        /* 32px */
  --t-h1:           2.5rem;      /* 40px */
  --t-display:      3.5rem;      /* 56px */

  /* Layout */
  --wrap-wide:      1200px;
  --wrap-content:   1080px;
  --wrap-read:      680px;
  --gap-pad-x:      1.25rem;

  /* Motion */
  --ease:           cubic-bezier(.4, 0, .2, 1);
  --dur:            .18s;
}

@media (min-width: 640px) {
  :root { --gap-pad-x: 2rem; }
}

/* -------------------------------------------------------------------------
   ۰۱ب · Farhang 2 Pro — self-hosted Persian typeface (body + display)
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Farhang2";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("../fonts/farhang2/woff2/Farhang2-Thin.woff2") format("woff2"),
       url("../fonts/farhang2/woff/Farhang2-Thin.woff") format("woff");
}
@font-face {
  font-family: "Farhang2";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/farhang2/woff2/Farhang2-ExtraLight.woff2") format("woff2"),
       url("../fonts/farhang2/woff/Farhang2-ExtraLight.woff") format("woff");
}
@font-face {
  font-family: "Farhang2";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/farhang2/woff2/Farhang2-Light.woff2") format("woff2"),
       url("../fonts/farhang2/woff/Farhang2-Light.woff") format("woff");
}
@font-face {
  font-family: "Farhang2";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/farhang2/woff2/Farhang2-Regular.woff2") format("woff2"),
       url("../fonts/farhang2/woff/Farhang2-Regular.woff") format("woff");
}
@font-face {
  font-family: "Farhang2";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/farhang2/woff2/Farhang2-Medium.woff2") format("woff2"),
       url("../fonts/farhang2/woff/Farhang2-Medium.woff") format("woff");
}
@font-face {
  font-family: "Farhang2";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/farhang2/woff2/Farhang2-DemiBold.woff2") format("woff2"),
       url("../fonts/farhang2/woff/Farhang2-DemiBold.woff") format("woff");
}
@font-face {
  font-family: "Farhang2";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/farhang2/woff2/Farhang2-Bold.woff2") format("woff2"),
       url("../fonts/farhang2/woff/Farhang2-Bold.woff") format("woff");
}
@font-face {
  font-family: "Farhang2";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/farhang2/woff2/Farhang2-ExtraBold.woff2") format("woff2"),
       url("../fonts/farhang2/woff/Farhang2-ExtraBold.woff") format("woff");
}
@font-face {
  font-family: "Farhang2";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/farhang2/woff2/Farhang2-Black.woff2") format("woff2"),
       url("../fonts/farhang2/woff/Farhang2-Black.woff") format("woff");
}

/* -------------------------------------------------------------------------
   ۰۱ج · Modam Pro — self-hosted, header/footer meta nav only
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "ModamPro";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/modampro/woff2/ModamWeb-ExtraLight.woff2") format("woff2"),
       url("../fonts/modampro/woff/ModamWeb-ExtraLight.woff") format("woff");
}
@font-face {
  font-family: "ModamPro";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/modampro/woff2/ModamWeb-Light.woff2") format("woff2"),
       url("../fonts/modampro/woff/ModamWeb-Light.woff") format("woff");
}
@font-face {
  font-family: "ModamPro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/modampro/woff2/ModamWeb-Regular.woff2") format("woff2"),
       url("../fonts/modampro/woff/ModamWeb-Regular.woff") format("woff");
}
@font-face {
  font-family: "ModamPro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/modampro/woff2/ModamWeb-Medium.woff2") format("woff2"),
       url("../fonts/modampro/woff/ModamWeb-Medium.woff") format("woff");
}
@font-face {
  font-family: "ModamPro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/modampro/woff2/ModamWeb-SemiBold.woff2") format("woff2"),
       url("../fonts/modampro/woff/ModamWeb-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "ModamPro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/modampro/woff2/ModamWeb-Bold.woff2") format("woff2"),
       url("../fonts/modampro/woff/ModamWeb-Bold.woff") format("woff");
}
@font-face {
  font-family: "ModamPro";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/modampro/woff2/ModamWeb-ExtraBold.woff2") format("woff2"),
       url("../fonts/modampro/woff/ModamWeb-ExtraBold.woff") format("woff");
}
@font-face {
  font-family: "ModamPro";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/modampro/woff2/ModamWeb-Black.woff2") format("woff2"),
       url("../fonts/modampro/woff/ModamWeb-Black.woff") format("woff");
}

/* -------------------------------------------------------------------------
   ۰۱د · Inter / JetBrains Mono / Newsreader — self-hosted (Phase 5.4).
   Previously loaded from Google Fonts CDN in header.php; downloaded here
   as the exact files Google's own css2 API serves (fetched with a
   modern-Chrome User-Agent so it returns woff2, then filtered to just
   the "latin" unicode-range subset — this site never renders these
   fonts for anything but Latin text: English mono-labels, brand code,
   the eventual English rollout. Persian text always uses
   Farhang2/ModamPro instead).

   Only one file each for Inter and JetBrains Mono despite requesting 3
   and 2 discrete weights respectively: Google served the identical
   file for every requested weight — confirmed by fetching Inter alone
   in isolation before trusting it, not assumed from the combined
   request. That's correct, expected behavior for a variable-font
   response scoped to just the requested weight range, not a fetch
   bug — the browser reads the intended weight from the `font-weight`
   *descriptor* below and renders it via the file's own variable axis,
   even though the bytes are identical across the range. Declared as a
   weight range (`400 600`) in one @font-face rule per family/style,
   the standard way to describe a variable font's covered range, rather
   than three redundant blocks pointing at the same file.

   No .woff fallback for these three (unlike Farhang2/ModamPro's woff2+
   woff pairs) — Google's response for this exact request didn't include
   one, and woff2 support is universal in any browser this project
   otherwise targets; not worth a second round-trip to fetch a legacy
   format for near-zero real reach.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter/woff2/Inter-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/woff2/JetBrainsMono-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/newsreader/woff2/Newsreader-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/newsreader/woff2/Newsreader-Italic-Variable.woff2") format("woff2");
}

/* -------------------------------------------------------------------------
   ۰۲ · Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-fa);
  font-size: var(--t-body);
  line-height: 1.95;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: transparent; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; line-height: 1.3; }

[lang="en"], .latin { font-family: var(--font-en); }
[lang="en"] .ui, .latin.ui { font-family: var(--font-ui); }

::selection { background: var(--crimson-tint); color: var(--crimson-deep); }
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }

/* -------------------------------------------------------------------------
   ۰۳ · Skip link (a11y)
   ------------------------------------------------------------------------- */
.skip-link {
  position: absolute; top: -100px; inset-inline-start: 8px;
  z-index: 60;
  padding: .5rem 1rem;
  background: var(--crimson); color: var(--paper);
  font-size: var(--t-small); font-weight: 600;
}
.skip-link:focus { top: 8px; }

/* -------------------------------------------------------------------------
   ۰۴ · Layout containers
   ------------------------------------------------------------------------- */
.wrap        { width: 100%; max-width: var(--wrap-wide);    margin-inline: auto; padding-inline: var(--gap-pad-x); }
.wrap-content{ width: 100%; max-width: var(--wrap-content); margin-inline: auto; padding-inline: var(--gap-pad-x); }
.wrap-read   { width: 100%; max-width: var(--wrap-read);    margin-inline: auto; padding-inline: var(--gap-pad-x); }

/* -------------------------------------------------------------------------
   ۰۵ · Masthead — crimson field with white nameplate (historical anchor)
   ------------------------------------------------------------------------- */
.masthead {
  border-bottom: 2px solid var(--maroon);
  background: var(--crimson);
  position: relative;
  z-index: 30;
}
/* Focus rings must be visible on crimson */
.masthead :focus-visible {
  outline-color: var(--paper);
  outline-offset: 3px;
}
.masthead-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-block: 1.5rem;
}
.masthead-left, .masthead-right {
  display: flex; align-items: center; gap: .6rem;
}
.masthead-right { justify-content: flex-end; }

.mast-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-nav);
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
  padding: .5rem .25rem;
  transition: color var(--dur) var(--ease);
}
.mast-btn:hover { color: var(--crimson-tint); }

.mast-nameplate {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--paper);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1;
  letter-spacing: -.005em;
  text-align: center;
  display: inline-block;
}
.mast-runner {
  display: block;
  margin-top: .35rem;
  font-family: var(--font-nav);
  font-size: 0.8125rem;
  letter-spacing: .1em;
  color: color-mix(in oklab, var(--paper) 72%, transparent);
  text-transform: uppercase;
}

.mast-sister {
  font-family: var(--font-nav);
  font-size: 1rem;
  letter-spacing: .1em;
  color: color-mix(in oklab, var(--paper) 72%, transparent);
  text-transform: uppercase;
}
.mast-sister a {
  color: color-mix(in oklab, var(--paper) 85%, transparent);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mast-sister a:hover { color: var(--paper); border-color: var(--paper); }
.mast-sister .sep { margin-inline: .5rem; opacity: .5; }

@media (max-width: 720px) {
  .masthead-inner { grid-template-columns: auto 1fr auto; padding-block: 1rem; }
  .mast-sister-desktop { display: none; }
}

/* WP conversion (Phase 4.1): replaces inline style="" attributes that were
   on _header.html's menu/search separator, search icon link, and
   nameplate-link wrapper — same computed values, moved to classes per
   CLAUDE.md §5. */
.mast-slash { color: var(--paper); opacity: .5; margin-inline: .35rem; }
.mast-slash-light { color: var(--paper); opacity: .4; }
.mast-icon-link { display: inline-flex; }
.mast-brand { text-align: center; }

/*
 * Fix (2026-08-08): the search icon is an <a class="link-quiet
 * mast-icon-link"> — `a { color: inherit }` (§01) means it fell through to
 * the page's default ink color instead of the masthead's white scheme
 * (nothing between it and <body> sets color on the crimson field), and
 * .link-quiet:hover's crimson-on-crimson hover was effectively invisible.
 * Mirrors .mast-sister a's exact color values (same white family as the
 * neighboring "شعله جاوید"/"جهان برای فتح" links) but intentionally omits
 * .mast-sister a's border-bottom — no underline on this icon, hover only
 * changes color. Higher specificity than .link-quiet:hover so it always
 * wins regardless of source order.
 */
.masthead .mast-icon-link { color: color-mix(in oklab, var(--paper) 85%, transparent); }
.masthead .mast-icon-link:hover { color: var(--paper); }

/* -------------------------------------------------------------------------
   ۰۶ · Popup menu — the signature move
   ------------------------------------------------------------------------- */
.menu-panel {
  position: fixed; inset: 0;
  background: var(--paper);
  z-index: 90;
  overflow-y: auto;
  padding: 2rem var(--gap-pad-x) 4rem;
  display: none;
}
.menu-panel[data-open="true"] { display: block; }

.menu-close {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-nav);
  font-size: 0.8125rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
  padding: .4rem 0;
}
.menu-close:hover { color: var(--crimson); }

/* WP conversion (Phase 4.1): replaces inline style="" on _menu.html's top
   bar and the popup's smaller nameplate instance. */
.menu-topbar { display: flex; justify-content: space-between; align-items: center; }
.mast-nameplate--menu { font-size: 1.6rem; }

.menu-grid {
  margin-top: 3rem;
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  max-width: var(--wrap-content);
  margin-inline: auto;
}
@media (min-width: 800px) {
  .menu-grid { grid-template-columns: 1.4fr 1fr; gap: 4rem; }
}

.menu-topics {
  display: flex; flex-direction: column;
  gap: .6rem;
}
.menu-topic {
  font-family: var(--font-display);
  font-weight: 700;
  /* Reduced ~30% (2026-08-08, Farhad) from clamp(2.4rem, 6vw, 3.5rem) —
     the popup Topics list is no longer a fixed 6 items now that it's a
     real editable menu, so the labels needed headroom to not look
     oversized/unbalanced as the content team adds more. */
  font-size: clamp(1.7rem, 4.2vw, 2.45rem);
  line-height: 1.15;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
  transition: transform var(--dur) var(--ease), padding var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.menu-topic:hover, .menu-topic:focus-visible { padding-inline-start: .5rem; text-decoration-color: currentColor; }
.menu-topic--c1 { color: #8E1B1B; }   /* crimson */
.menu-topic--c2 { color: #6B1414; }   /* deep */
.menu-topic--c3 { color: #4A0E0E; }   /* maroon */
.menu-topic--c4 { color: #A83232; }   /* lighter crimson mix */
.menu-topic--c5 { color: #5C2020; }   /* mid */
.menu-topic--c6 { color: #7D1818; }   /* mid-deep */

/* flex-wrap added 2026-08-08: up to 11 platform icons + RSS can now
   render here (expanded from a fixed 3), so this needs to wrap onto
   multiple lines in the narrow .menu-side column rather than overflow
   or force a horizontal scrollbar. */
.menu-social { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.menu-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  transition: background var(--dur) var(--ease);
}
.menu-social a:hover { background: var(--crimson); }

.menu-side { display: flex; flex-direction: column; gap: 2.5rem; }
.menu-section-title {
  font-family: var(--font-nav);
  font-size: 0.8125rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--stone);
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}
.menu-list { display: flex; flex-direction: column; gap: .8rem; }
.menu-list a {
  font-size: var(--t-h4);
  font-weight: 500;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.menu-list a:hover { color: var(--crimson); }
.menu-list-small a { font-size: var(--t-body); font-weight: 400; }

/* WP conversion (Phase 4.1): replaces inline style="" on _menu.html's
   Publications block wrapper. */
.menu-publications { padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* -------------------------------------------------------------------------
   ۰۷ · Typography components
   ------------------------------------------------------------------------- */
.h-display {
  font-family: var(--font-display); font-weight: 700;
  color: var(--crimson-deep);
  font-size: clamp(2.25rem, 5vw, var(--t-display));
  line-height: 1.15;
  letter-spacing: -.005em;
}
.h-page {
  font-family: var(--font-display); font-weight: 700;
  color: var(--crimson-deep);
  font-size: clamp(2rem, 4vw, var(--t-h1));
  line-height: 1.2;
}
.h-section {
  font-family: var(--font-display); font-weight: 700;
  color: var(--crimson-deep);
  font-size: clamp(1.6rem, 3vw, var(--t-h2));
  line-height: 1.25;
}
.h-card {
  font-family: var(--font-fa); font-weight: 800;
  color: var(--ink);
  font-size: var(--t-h4);
  line-height: 1.45;
}
.h-card-lg {
  font-family: var(--font-fa); font-weight: 800;
  color: var(--ink);
  font-size: var(--t-h3);
  line-height: 1.4;
}

.dek {
  color: var(--ink-soft);
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.75;
  font-weight: 400;
  /* Length safety net (2026-08-08): excerpt text has no hard character
     limit at the content level (an editor-set post_excerpt can be any
     length), so cap the rendered lines here regardless of source length
     — a ceiling, not a reformat, so short/fixed static dek copy
     elsewhere (page headers, 404, newsletter) renders unchanged. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.meta      { color: var(--stone); font-family: var(--font-nav); font-size: 0.875rem; line-height: 1.7; }
.meta-mono { color: var(--stone); font-family: var(--font-nav); font-size: 0.8125rem; line-height: 1.7; letter-spacing: .04em; }

/* Aeon-style tiny type/topic label: "مقاله / اقتصاد" */
.type-label {
  font-family: var(--font-nav);
  font-size: 0.8125rem;
  letter-spacing: .08em;
  color: var(--stone);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .35rem;
}
.type-label .glyph {
  width: 12px; height: 12px;
  display: inline-block;
  color: var(--crimson);
}
.type-label a { color: var(--stone); transition: color var(--dur) var(--ease); }
.type-label a:hover { color: var(--crimson); }
.type-label .divider { opacity: .5; }

/* Quiet section marker — replaces the loud crimson kicker */
.section-marker {
  font-family: var(--font-nav);
  font-size: 0.8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--crimson);
  display: inline-flex; align-items: center; gap: .6rem;
}
.section-marker::before {
  content: ""; display: inline-block;
  width: 24px; height: 1px;
  background: var(--crimson);
}
.section-head { margin-bottom: 2.5rem; }
.section-head .h-section { margin-top: .5rem; }

/*
 * Kicker sweep (Phase 7.5, 2026-08-07): once the English kicker word is
 * removed, the surviving .section-marker is just its ::before dash — Farhad
 * asked for that dash to sit inline before the Persian heading (same line,
 * rightmost in RTL) instead of stacked above it. .kicker-row groups the two
 * elements into one flex row; scoped to this class only so it can be rolled
 * out instance-by-instance without touching .section-marker's other still-
 * English-labelled usages elsewhere in the site.
 */
.kicker-row { display: inline-flex; align-items: center; gap: .75rem; }
.kicker-row .h-section,
.kicker-row > h1 { margin-top: 0; }

/* -------------------------------------------------------------------------
   ۰۸ · Links & buttons
   ------------------------------------------------------------------------- */
.link {
  color: var(--crimson);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur) var(--ease);
}
.link:hover { color: var(--crimson-deep); }

.link-quiet {
  transition: color var(--dur) var(--ease);
}
.link-quiet:hover { color: var(--crimson); }

.link-more {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-nav);
  font-size: 0.8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--crimson);
  padding: .4rem 0;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-more:hover { color: var(--crimson-deep); border-color: var(--crimson-deep); }
.link-more .arr { display: inline-block; transform: translateY(-1px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.4rem;
  font-family: var(--font-fa);
  font-size: var(--t-small);
  font-weight: 600;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  user-select: none;
  border: 1px solid transparent;
}
.btn-primary { background: var(--crimson); color: var(--paper); }
.btn-primary:hover { background: var(--crimson-deep); }
.btn-ghost { border-color: var(--crimson); color: var(--crimson-deep); background: transparent; }
.btn-ghost:hover { background: var(--crimson); color: var(--paper); }
.btn-sm { padding: .5rem 1rem; font-size: var(--t-caption); }

.tag-outline {
  display: inline-block;
  padding: .3rem .6rem;
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tag-outline:hover { border-color: var(--crimson); color: var(--crimson); }

.badge-current {
  display: inline-block;
  padding: .3rem .6rem;
  font-family: var(--font-nav);
  font-size: 0.8125rem;
  letter-spacing: .08em;
  color: var(--crimson-deep);
  background: var(--crimson-tint);
  text-transform: uppercase;
}
.badge-archive {
  display: inline-block;
  padding: .3rem .6rem;
  font-family: var(--font-nav);
  font-size: 0.8125rem;
  letter-spacing: .08em;
  color: var(--stone);
  border: 1px solid var(--line);
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   ۰۹ · Cards — no borders. Whitespace only. Aeon principle.
   ------------------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column;
  gap: .9rem;
}
.card-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--cream);
  position: relative;
}
.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--crimson);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease), filter .45s var(--ease);
}
.card:hover .card-media img { transform: scale(1.04); filter: grayscale(.9) brightness(1.02); }
.card:hover .card-media::after { opacity: .3; }
@media (prefers-reduced-motion: reduce) {
  .card-media img, .card-media::after { transition: none; }
}

.card-body { display: flex; flex-direction: column; gap: .55rem; }
.card .h-card {
  transition: color var(--dur) var(--ease);
}
.card a:hover .h-card,
.card .h-card a:hover { color: var(--crimson); }
.card-dek {
  color: var(--ink-soft);
  font-size: var(--t-small);
  line-height: 1.75;
  /* Length safety net, same reasoning as .dek above — cards are the
     tightest layout context (grid columns), so a lower ceiling. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.card-byline { color: var(--stone); font-family: var(--font-nav); font-size: 0.875rem; margin-top: .25rem; }

/* Compact card variant — for "popular" rails */
.card-mini { gap: .6rem; }
.card-mini .card-media { aspect-ratio: 16 / 10; }
.card-mini .h-card { font-size: var(--t-body); font-weight: 700; line-height: 1.5; }

/* Card grid */
.grid-cards {
  display: grid;
  gap: 2.5rem 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }

.grid-cards-4 {
  display: grid;
  gap: 2.5rem 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .grid-cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-cards-4 { grid-template-columns: repeat(4, 1fr); } }

/* -------------------------------------------------------------------------
   ۱۰ · Homepage hero — Aeon-style single dominant story
   ------------------------------------------------------------------------- */
.hero-lead { margin-block: 0 5rem; position: relative; }
.hero-media {
  display: block;
  width: 100%;
  height: calc(100vh - 128px);
  height: calc(100dvh - var(--masthead-h, 128px));
  min-height: 240px;
  max-height: 900px;
  overflow: hidden;
  background: var(--cream);
}
@media (max-width: 900px) and (max-height: 500px) {
  /* Short landscape screens (phones rotated) — header eats proportionally more
     of the viewport, so ease off the subtraction to avoid a taller-than-screen total */
  .hero-media { height: calc(100vh - 120px); height: calc(100dvh - var(--masthead-h, 120px)); min-height: 180px; }
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Gray wash (70%) over the photo */
.hero-lead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--stone);
  opacity: .7;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}
/* Dark gradient, opaque at the bottom fading to transparent — grounds the overlaid text */
.hero-lead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .55) 35%, rgba(0, 0, 0, 0) 75%);
  pointer-events: none;
  z-index: 2;
}
.hero-lead > .wrap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  padding-block-end: 5rem;
}
@media (max-width: 720px) {
  /* Mobile hero text overlay (2026-08-08, Farhad): confine the badge/
     title/dek/byline block to the lower-middle-to-bottom band of the
     photo — not flush against the very bottom edge — so a long,
     multi-line headline has room to grow upward within the image
     instead of relying on the block being exactly the right height.
     .hero-lead::before/::after (gray wash + dark gradient) already
     cover the full image, so the existing scrim still grounds text
     anywhere in this band without any change needed there. */
  .hero-lead > .wrap {
    top: 42%;
    bottom: 0;
    padding-block-end: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}
.hero-body {
  margin-top: 0;
  max-width: 780px;
}
.hero-body .type-label { margin-bottom: 1rem; font-size: 0.65rem; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.hero-body .type-label .glyph { color: var(--paper); }
.hero-body .type-label a { color: var(--paper); }
.hero-body .h-display { margin-top: 1rem; font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--paper); text-shadow: 0 2px 20px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .9); }
.hero-body .h-display a { transition: color var(--dur) var(--ease); }
.hero-body .h-display a:hover { color: var(--crimson-tint); }
.hero-body .dek { margin-top: 1.25rem; max-width: 640px; font-size: clamp(0.9rem, 1.28vw, 1.05rem); color: rgba(255, 255, 255, .94); text-shadow: 0 1px 10px rgba(0, 0, 0, .65); }
.hero-body .card-byline { margin-top: 1.25rem; font-size: 0.7rem; color: rgba(255, 255, 255, .8); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }

/* -------------------------------------------------------------------------
   ۱۱ · Sections & rules
   ------------------------------------------------------------------------- */
.sect { padding-block: 4rem; }
.sect-lg { padding-block: 5.5rem; }
.sect-tint { background: var(--crimson-tint); }
.sect-cream { background: var(--cream); }

.rule       { height: 1px; background: var(--line); border: 0; }
.rule-crimson { height: 2px; background: var(--crimson); border: 0; }

/* -------------------------------------------------------------------------
   ۱۲ · Article page — Aeon-style split
   ------------------------------------------------------------------------- */
.article-hero {
  margin-block: 0 2.5rem;
}
.article-hero-visual {
  position: relative;
}
.article-hero-media {
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--cream);
}
.article-hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Gray wash (70%) over the photo — same treatment as the homepage hero */
.article-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--stone);
  opacity: .7;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}
/* Dark gradient, opaque at the bottom fading to transparent — grounds the overlaid text */
.article-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .55) 35%, rgba(0, 0, 0, 0) 75%);
  pointer-events: none;
  z-index: 2;
}
.article-hero-visual .article-header {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  padding-block: 0 3rem;
  margin-bottom: 0;
  border-bottom: 0;
}
.article-hero-visual .article-crumb,
.article-hero-visual .article-crumb a { color: rgba(255, 255, 255, .9); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.article-hero-visual .article-crumb a:hover,
.article-hero-visual .article-crumb .active { color: var(--paper); }
.article-hero-visual .article-title { color: var(--paper); max-width: 900px; text-shadow: 0 2px 20px rgba(0, 0, 0, .85), 0 1px 3px rgba(0, 0, 0, .9); }
.article-hero-visual .article-dek { color: rgba(255, 255, 255, .96); text-shadow: 0 2px 14px rgba(0, 0, 0, .8), 0 1px 2px rgba(0, 0, 0, .9); }
@media (max-width: 720px) {
  /* Mobile article hero (2026-08-08, Farhad): the fixed 21:9 aspect
     ratio that works well on wide desktop viewports produces a tiny
     image band on a narrow mobile viewport (e.g. ~184px tall at
     430px wide) — the overlaid title/crumb/dek then has almost no
     room and reads cramped. Same treatment as the homepage hero
     (B4/its revisit): a real viewport-height image using the live
     --masthead-h var, with the text confined to the lower ~58% of the
     image instead of a pure bottom:0 anchor, so a long title can grow
     upward within the image rather than depending on exact block
     height. The existing gray-wash + dark-gradient scrim
     (.article-hero-visual::before/::after) already covers the full
     image and needed no changes. Desktop's 21:9 ratio is untouched. */
  .article-hero-media {
    aspect-ratio: auto;
    height: calc(100vh - 128px);
    height: calc(100dvh - var(--masthead-h, 128px));
    min-height: 240px;
    max-height: 900px;
  }
  .article-hero-visual .article-header {
    top: 42%;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}
.article-hero-caption {
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding-inline: var(--gap-pad-x);
  padding-block: .75rem;
  background: var(--paper);
  color: var(--stone);
  font-family: var(--font-nav);
  font-size: 0.875rem;
  line-height: 1.7;
}

.article-header {
  padding-block: 2.5rem 3rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 3rem;
}
.article-crumb {
  font-family: var(--font-nav);
  font-size: 0.8125rem;
  letter-spacing: .1em;
  color: var(--stone);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.article-crumb a { color: var(--stone); transition: color var(--dur) var(--ease); }
.article-crumb a:hover { color: var(--crimson); }
.article-crumb .active { color: var(--crimson); }

.article-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--crimson-deep);
  font-size: clamp(2.1rem, 4.5vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -.005em;
}
.article-dek {
  color: var(--ink-soft);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.7;
  margin-top: 1.25rem;
  max-width: 640px;
  /* Length safety net, same reasoning as .dek above. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.article-body {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 940px) {
  .article-body {
    grid-template-columns: 250px 1fr;
    gap: 4rem;
  }
}
.article-sidebar {
  font-size: var(--t-small);
  line-height: 1.75;
}
@media (min-width: 940px) {
  .article-sidebar { position: sticky; top: 2rem; align-self: start; }
}
.article-sidebar .author { color: var(--stone); }
.article-sidebar .author strong { color: var(--ink); font-weight: 700; }
.article-sidebar .author a { color: var(--ink); border-bottom: 1px solid var(--line); }
.article-sidebar .author a:hover { border-color: var(--crimson); color: var(--crimson); }
.article-sidebar .editor { margin-top: 1rem; color: var(--stone); font-family: var(--font-nav); font-size: 0.875rem; }
.article-sidebar .word-count { margin-top: 1rem; color: var(--stone); font-family: var(--font-nav); font-size: 0.8125rem; letter-spacing: .06em; }
.article-sidebar .tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }

/* Long-form prose */
.prose {
  color: var(--ink);
  font-size: 1.25rem; /* 20px — bumped up from --t-body (17px) for reading comfort */
  line-height: 1.95;
}
.prose > * + * { margin-block-start: 1.4rem; }

.prose h2 {
  font-family: var(--font-fa);
  font-weight: 800;
  font-size: var(--t-h3);
  line-height: 1.4;
  margin-block-start: 3rem;
  color: var(--ink);
}
.prose h3 {
  font-family: var(--font-fa);
  font-weight: 800;
  font-size: var(--t-h4);
  line-height: 1.5;
  margin-block-start: 2.5rem;
  color: var(--ink);
}
/* page-about.php's tab nav jumps here via the browser's native anchor
   scroll (v6 has no :target CSS of its own to build on — checked, no
   matches for :target/@keyframes anywhere in its source). Background
   flash confirms where the jump landed; reuses --crimson-tint, the
   same token the search-result <mark> highlight already uses, rather
   than introducing a new color for the same "highlighted" meaning.
   The anchor lives on a .about-section wrapper (a Group block around
   each heading + its paragraphs), not the heading alone, so the flash
   covers the whole section a reader jumped to, not just its title —
   plain h2:target can't do that with CSS alone, since a heading has no
   relationship to the sibling paragraphs "until the next heading."
   Holds at full tint for the first third before fading, and runs
   longer (2.2s) than a first pass (1.4s, straight fade) — that first
   version read as barely-there; Farhad confirmed by eye it needed more
   time to actually register. */
@keyframes shola-target-flash {
  0%, 35% { background-color: var(--crimson-tint); }
  100%    { background-color: transparent; }
}
.prose .about-section:target {
  animation: shola-target-flash 2.2s var(--ease);
}
.prose a { color: var(--crimson); text-decoration: underline; text-underline-offset: 4px; transition: color var(--dur) var(--ease); }
.prose a:hover { color: var(--crimson-deep); }
.prose ul, .prose ol { padding-inline-start: 1.5rem; }
.prose ul { list-style: disc outside; }
.prose ol { list-style: persian outside; }
.prose blockquote {
  border-inline-start: 2px solid var(--crimson);
  padding-inline-start: 1.5rem;
  color: var(--ink-soft);
  font-style: italic;
}
.prose figure img { width: 100%; }
.prose figcaption {
  margin-top: .5rem;
  color: var(--stone);
  font-family: var(--font-nav);
  font-size: 0.875rem;
  line-height: 1.7;
}

/* Aeon-style bare bold pull-line — no box, no border */
.pull-line {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--crimson-deep);
  font-size: clamp(1.5rem, 2.8vw, 1.9rem);
  line-height: 1.5;
  margin-block: 2.5rem 2.5rem !important;
  padding-block: 1rem;
}

/* Article footer: tags, syndicate, share */
.article-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.article-footer .tag-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.article-footer .meta-mono { margin-bottom: .5rem; }

/*
 * Share menu (2026-08-08): dropdown triggered by the اشتراک link-more
 * button, replacing the previously non-functional ذخیره/اشتراک pair —
 * ذخیره removed entirely (no reader-account system to back a real save
 * feature, per Farhad). Icon treatment matches .footer-social a (same
 * 24x24 viewBox glyph, currentColor, hover → crimson) for visual
 * consistency with the site's existing social icons.
 */
.share-menu { position: relative; }
.share-trigger { background: transparent; border: 0; cursor: pointer; }
.share-dropdown {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + .5rem);
  z-index: 20;
  min-width: 11rem;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
/* Progressive enhancement (CLAUDE.md §5 — must work without JS): only
   hidden-by-default when JS confirmed active (.js on <html>, set by an
   inline script in header.php before first paint); no-JS visitors see
   the share links as a plain static list under the trigger instead. */
.js .share-dropdown { display: none; }
.js .share-dropdown.is-open { display: flex; }
.share-option {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem;
  font-family: var(--font-fa);
  font-size: var(--t-small);
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: start;
  width: 100%;
}
.share-option .glyph { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--stone); }
.share-option:hover { background: var(--cream); color: var(--crimson); }
.share-option:hover .glyph { color: var(--crimson); }

/* Related essays rail — reuses card anatomy */
.related-rail {
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 2px solid var(--crimson);
}

/* -------------------------------------------------------------------------
   ۱۳ · Reading progress bar (article-single only)
   ------------------------------------------------------------------------- */
.progress-track {
  position: fixed; inset-inline: 0; top: 0;
  height: 2px; background: transparent;
  z-index: 50;
}
.progress-bar {
  height: 100%; width: 0;
  background: var(--crimson);
}

/* -------------------------------------------------------------------------
   ۱۴ · Issue / Document — single views
   ------------------------------------------------------------------------- */
.issue-hero {
  display: grid; gap: 3rem;
  grid-template-columns: 1fr;
  padding-block: 4rem;
  align-items: start;
}
@media (min-width: 800px) {
  .issue-hero { grid-template-columns: 380px 1fr; gap: 4rem; }
}

/* WP conversion (Phase 4.2): front-page.php's "Current Issue" module
   embeds .issue-hero inside an already-padded section (.sect-cream.sect),
   so it needs its own wrapper grid without the standalone page's
   padding-block. Replaces two inline style="" attributes from
   body-index.html. */
.issue-lead { display: grid; gap: 3rem; grid-template-columns: 1fr; }
.issue-hero--embedded { padding-block: 0; }

.issue-cover {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 30px 60px -30px rgba(15,15,15,.35), 0 6px 20px -8px rgba(15,15,15,.15);
}
.issue-cover img { width: 100%; height: 100%; object-fit: cover; }

.issue-meta {
  display: grid; grid-template-columns: max-content 1fr;
  gap: .5rem 1.5rem;
  padding-block: 1.5rem;
  border-block: 1px solid var(--line);
  margin-block: 2rem;
  font-size: var(--t-small);
}
.issue-meta dt { color: var(--stone); font-family: var(--font-nav); font-size: 0.8125rem; letter-spacing: .1em; text-transform: uppercase; padding-top: .15rem; }
.issue-meta dd { color: var(--ink); }

.doc-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
.doc-row:hover { background: color-mix(in oklab, var(--crimson-tint) 40%, var(--paper)); }
.doc-row .doc-body { flex: 1; min-width: 0; }
.doc-row .doc-body a { font-weight: 700; transition: color var(--dur) var(--ease); }
.doc-row .doc-body a:hover { color: var(--crimson); }
.doc-row .doc-meta { color: var(--stone); font-family: var(--font-nav); font-size: 0.875rem; margin-top: .35rem; }

/* Issue grid — for publication archive */
.issue-grid {
  display: grid; gap: 3rem 2rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .issue-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .issue-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1120px){ .issue-grid { grid-template-columns: repeat(5, 1fr); } }

.issue-card { display: flex; flex-direction: column; gap: .75rem; }
.issue-card-media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 10px 25px -12px rgba(15,15,15,.25);
  transition: transform var(--dur) var(--ease);
}
.issue-card:hover .issue-card-media { transform: translateY(-3px); }
.issue-card-media img { width: 100%; height: 100%; object-fit: cover; }
.issue-card-title { font-size: var(--t-small); font-weight: 700; color: var(--ink); }
.issue-card-title a:hover { color: var(--crimson); }
.issue-card-date { font-family: var(--font-nav); font-size: 0.8125rem; letter-spacing: .08em; color: var(--stone); text-transform: uppercase; }

/* -------------------------------------------------------------------------
   ۱۵ · Topic index (Aeon-style horizontal list)
   ------------------------------------------------------------------------- */
.topic-nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .3rem 1.75rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 3rem;
}
.topic-nav a {
  color: var(--crimson);
  font-size: var(--t-small);
  padding-block: .35rem;
  transition: color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.topic-nav a:hover { color: var(--crimson-deep); border-color: var(--crimson-deep); }
.topic-nav .active { color: var(--crimson-deep); border-color: var(--crimson-deep); }

/* Latest / Popular tabs */
.filter-tabs {
  display: flex; justify-content: center;
  gap: 2rem;
  margin-bottom: 2.5rem;
  font-size: var(--t-body);
}
.filter-tabs a { color: var(--stone); padding-block: .3rem; border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.filter-tabs a:hover { color: var(--ink); }
.filter-tabs .active { color: var(--ink); border-color: var(--ink); }

/* Topic list (typographic) */
.topic-list {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) { .topic-list { grid-template-columns: 1fr 1fr; } }
.topic-list li { border-bottom: 1px solid var(--line); }
.topic-list li:nth-child(odd) { border-inline-end: 1px solid var(--line); }
@media (max-width: 719px) { .topic-list li { border-inline-end: 0 !important; } }
.topic-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 2rem 1.5rem;
  transition: background var(--dur) var(--ease);
}
.topic-list a:hover { background: var(--cream); }
.topic-list .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.topic-list a:hover .name { color: var(--crimson); }
.topic-list .count {
  font-family: var(--font-nav);
  font-size: 0.8125rem;
  letter-spacing: .1em;
  color: var(--stone);
}

/* -------------------------------------------------------------------------
   ۱۶ · Announcements list
   ------------------------------------------------------------------------- */
.announce-list {
  border-block: 1px solid var(--line);
}
/* WP conversion (Phase 4.2): replaces an inline style="" on
   body-announcements.html's list wrapper. */
.announce-list--page { max-width: 820px; margin-inline: auto; }
.announce-list li {
  border-bottom: 1px solid var(--line);
  padding-block: 1.5rem;
  display: grid;
  gap: .5rem 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .announce-list li {
    grid-template-columns: 8rem 1fr;
    align-items: baseline;
  }
}
.announce-list li:last-child { border-bottom: 0; }
.announce-list time {
  font-family: var(--font-nav);
  font-size: 0.8125rem;
  letter-spacing: .1em;
  color: var(--stone);
  text-transform: uppercase;
}
.announce-list a {
  font-weight: 700; color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.announce-list a:hover { color: var(--crimson); }

/* -------------------------------------------------------------------------
   ۱۷ · Forms
   ------------------------------------------------------------------------- */
.field {
  display: block; width: 100%;
  padding: .85rem 1rem;
  font-family: var(--font-fa);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}
.field::placeholder { color: var(--stone); }
.field:hover { border-color: var(--stone); }
.field:focus { border-color: var(--crimson); outline: none; }
.field.dark {
  background: transparent; color: var(--paper);
  border-color: color-mix(in oklab, var(--paper) 30%, transparent);
}
.field.dark::placeholder { color: color-mix(in oklab, var(--paper) 45%, transparent); }
.field.dark:focus { border-color: var(--paper); }
.label {
  display: block; margin-bottom: .5rem;
  font-size: var(--t-small); font-weight: 600;
}

/* Pagination */
.pagination {
  display: flex; justify-content: center;
  gap: .5rem;
  margin-top: 3rem;
}
.page-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--line);
  font-size: var(--t-small); font-weight: 600;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.page-num:hover { border-color: var(--crimson); color: var(--crimson); }
.page-num[aria-current="page"] {
  background: var(--crimson); color: var(--paper); border-color: var(--crimson);
}

/* -------------------------------------------------------------------------
   ۱۹ · Footer — quiet, thin, paper-based
   ------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding-block: 3.5rem 2rem;
  margin-top: 4rem;
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
}
.footer-name {
  font-family: var(--font-display); font-weight: 700;
  color: var(--crimson); font-size: 1.75rem; line-height: 1;
}
.footer-tagline {
  margin-top: .75rem;
  font-size: var(--t-small);
  color: var(--stone);
  line-height: 1.7;
  max-width: 300px;
}
.footer-social {
  margin-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .75rem;
}
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem;
  color: var(--stone);
  transition: color var(--dur) var(--ease);
}
.footer-social a:hover { color: var(--crimson); }
.footer-col h3 {
  font-family: var(--font-nav);
  font-size: 0.8125rem;
  letter-spacing: .14em;
  color: var(--stone);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .55rem; }
.footer-col a {
  font-size: var(--t-small);
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.footer-col a:hover { color: var(--crimson); }

.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding-top: 1.5rem;
  font-family: var(--font-nav);
  font-size: 1rem;
  letter-spacing: .08em;
  color: var(--stone);
}

/*
 * Mobile footer text size (2026-08-08, Farhad): .footer-tagline/.footer-col
 * a/.footer-col h3 use the same fixed sizes (13-14px) at every viewport —
 * fine on desktop's larger screen/viewing-distance context, but read too
 * small on mobile against normal mobile-UX readability norms (~16px floor
 * for link/body text). Desktop values above are untouched; this only
 * raises mobile.
 */
@media (max-width: 720px) {
  .footer-tagline,
  .footer-col a { font-size: var(--t-body); }
  .footer-col h3 { font-size: var(--t-small); }
}

/* -------------------------------------------------------------------------
   ۲۰ · Utility helpers (small — most styles are semantic)
   ------------------------------------------------------------------------- */
.center { text-align: center; }
.stack   { display: flex; flex-direction: column; }
.stack > * + * { margin-top: 1rem; }
.stack-sm > * + * { margin-top: .5rem; }
.stack-lg > * + * { margin-top: 2rem; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.row-between { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; }
.mt-lg { margin-top: 3rem; }
.mt-md { margin-top: 1.5rem; }
.mt-sm { margin-top: .75rem; }
.mb-lg { margin-bottom: 3rem; }
.ms-sm { margin-inline-start: .5rem; }
.hide-mobile { display: initial; }
@media (max-width: 720px) { .hide-mobile { display: none; } }
.hide-desktop { display: none; }
@media (max-width: 720px) { .hide-desktop { display: initial; } }

/* Scroll reveal */
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------------------
   ۲۱ · About page tabs
   ------------------------------------------------------------------------- */
.about-tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.75rem;
  padding-block: 1.5rem 2.5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 3rem;
}
.about-tabs a {
  color: var(--stone);
  font-size: var(--t-small);
  padding-block: .3rem;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.about-tabs a:hover { color: var(--ink); }
.about-tabs .active { color: var(--ink); border-color: var(--ink); }

/* -------------------------------------------------------------------------
   ۲۲ · Static page header (WP conversion, Phase 4.2) — the centered
   section-marker + h1 + dek block repeated identically (per
   body-topics/library/announcements/about/contact/search.html) at the top
   of every static/archive listing page. Confirmed by comparing all six
   source files before adding this, not assumed. Replaces their inline
   style="" attributes.
   ------------------------------------------------------------------------- */
.section-top { padding-block-start: 3rem; }
.page-header { text-align: center; margin-bottom: 3rem; }
.page-header .section-marker { justify-content: center; display: inline-flex; }
.page-header h1 { margin-top: 1rem; }
.page-header .dek { margin-top: 1rem; max-width: 600px; margin-inline: auto; }
.page-header--narrow .dek { max-width: 560px; }
.page-header--tight { margin-bottom: 1rem; }
.page-header--muted h1 { color: var(--stone); }
.row-tight { gap: .5rem; }

/* -------------------------------------------------------------------------
   ۲۳ · Publications list (page-publications.php, Phase 4.2)
   ------------------------------------------------------------------------- */
.publications-list { display: grid; gap: 3rem; grid-template-columns: 1fr; }
.publication-item {
  display: grid; gap: 2rem;
  grid-template-columns: 1fr;
  padding-block: 2rem;
  border-top: 2px solid var(--crimson);
}
.publication-item--archived { border-top: 1px solid var(--line); }
.publication-item h2 { margin-top: 1rem; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.publication-item--archived h2 { color: var(--stone); }
.publication-item .dek { margin-top: 1rem; max-width: 600px; }
.publication-item .meta-mono { margin-top: 1rem; }
.publication-item .row { margin-top: 1.5rem; gap: .75rem; }

/* -------------------------------------------------------------------------
   ۲۴ · Issue archive — current-issue highlight (taxonomy-publication.php,
   Phase 4.2)
   ------------------------------------------------------------------------- */
.publication-current {
  padding-bottom: 3rem;
  border-bottom: 2px solid var(--crimson);
  margin-bottom: 3rem;
}

/* -------------------------------------------------------------------------
   ۲۵ · Contact page (page-contact.php, Phase 4.2/4.3) — replaces
   body-contact.html's inline style="" attributes. The form itself is
   Contact Form 7 output (CLAUDE.md §3 whitelist); .wpcf7-form is CF7's
   own real output class (its <form> tag isn't otherwise customizable),
   styled here instead of loading CF7's default stylesheet
   (wpcf7_load_css filtered off in inc/enqueue.php).
   ------------------------------------------------------------------------- */
.contact-grid {
  display: grid; gap: 3rem;
  grid-template-columns: 1fr;
  max-width: 960px;
  margin-inline: auto;
}
.contact-inner { display: grid; gap: 2rem; grid-template-columns: 1fr; }
/* CF7 doesn't recognize the site's fa_AF locale as RTL and renders the
   form wrapper dir="ltr" — force it back to the site's actual direction
   rather than depend on CF7's locale-to-dir table. */
.wpcf7 { direction: rtl; }
.wpcf7-form { display: flex; flex-direction: column; gap: 1rem; }
.wpcf7-form > p { align-self: flex-start; }
/* Email addresses are always LTR ASCII regardless of site direction —
   matches the same reasoning as the newsletter field on front-page.php,
   which sets dir="ltr" directly since it's theme-owned markup; CF7's
   generated <input> isn't directly attribute-editable the same way, so
   this achieves the identical result via CSS instead. */
#c-email { direction: ltr; }
/* Validation error text (2026-08-08, Farhad): CF7's default is plain
   ink-colored text, same as ordinary body copy — indistinguishable
   from a normal message at a glance. Crimson (not crimson-deep/tint)
   matches the site's single "error/attention" accent used elsewhere
   (e.g. .rule-crimson, .progress-bar) without borrowing the exact
   tone used for links (.link, underlined) or buttons (.btn-primary,
   solid crimson fill) — plain crimson text with neither of those
   treatments reads as its own distinct thing, not a mislabeled link
   or button. Applies to both the error summary
   (.wpcf7-response-output) and each field's inline tip
   (.wpcf7-not-valid-tip).  */
.wpcf7-response-output,
.wpcf7-not-valid-tip { color: var(--crimson); }
/* Found while checking Farhad's screenshot of the above fix (2026-08-08):
   the circled black text wasn't .wpcf7-response-output at all (that part
   was already correctly crimson) — it was CF7's separate
   `.screen-reader-response` region, which duplicates the same summary
   message plus a repeated "Please fill out this field." link per invalid
   field. Per its own name/CF7's own intent this is meant to be screen-
   reader-only, but the theme never applied the visually-hidden treatment
   it needs, so it was rendering as a second, unstyled, black, cluttering
   copy of the same messages for sighted users too. The real fix isn't to
   also color the duplicate crimson (that would just leave two crimson
   copies on screen); it's to actually hide it, matching CF7's intended
   behavior — after which the only visible messages are the two rules
   above, both already crimson. Standard WP-core visually-hidden pattern
   (accessible to screen readers, removed from sighted layout/paint). */
.screen-reader-response {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  word-wrap: normal !important;
}

.contact-aside { padding-top: 2rem; border-top: 1px solid var(--line); }
.contact-aside .meta-mono { margin-bottom: .75rem; }
.contact-aside-value { margin-bottom: 2rem; }

/* -------------------------------------------------------------------------
   ۲۶ · Search page (search.php, Phase 4.2) — replaces
   body-search.html's inline style="" attributes.
   ------------------------------------------------------------------------- */
.search-form { max-width: 640px; margin-inline: auto; margin-bottom: 3rem; }
.search-form-label { text-align: center; }
.search-form-row { display: flex; gap: .5rem; }
.search-filter-tabs { margin-top: 1rem; margin-bottom: 0; font-size: var(--t-small); }
/* Named search-results-wrap, not search-results — WP's body_class()
   auto-adds a literal "search-results" class to <body> on this
   template, which a same-named selector here would also match,
   shrinking the whole page instead of just this wrapper. Real bug
   found this way: confirmed via live DOM inspection that <body> itself
   had computed width: 820px, matching this rule's max-width exactly. */
.search-results-wrap { max-width: 820px; margin-inline: auto; }
.search-results-count { margin-bottom: 1.5rem; }
.search-no-results { text-align: center; }
.card-dek mark,
.h-card-lg mark { background: var(--crimson-tint); color: var(--crimson-deep); padding: 0 .2em; }

/* -------------------------------------------------------------------------
   ۲۷ · Issue table of contents (single-issue.php, Phase 4.2) — replaces
   body-issue-single.html's inline style="" attributes.
   ------------------------------------------------------------------------- */
.issue-toc-head { padding-top: 2rem; border-top: 2px solid var(--crimson); margin-top: 2rem; }
.issue-toc { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.issue-toc li { padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.issue-toc .meta-mono { margin-bottom: .35rem; }
.issue-toc .link-quiet { font-weight: 700; font-size: var(--t-h4); }
.issue-toc .meta { margin-top: .35rem; }

/* -------------------------------------------------------------------------
   ۲۸ · Document single (single-document.php, Phase 4.2) — replaces
   body-document-single.html's inline style="" attributes. Reuses
   .issue-hero/.issue-meta/.doc-row wholesale (same anatomy as
   single-issue.php/document-row.php); only the "About the Text" and
   "Related" section spacing below is new to this template.
   ------------------------------------------------------------------------- */
.doc-about { padding-inline: 0; margin-top: 2rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line); margin-bottom: 3rem; }
.doc-about .h-section { margin-top: .5rem; margin-bottom: 1.5rem; }
.doc-related-head { margin-top: .5rem; margin-bottom: 2rem; }
.doc-related-list { margin-bottom: 3rem; }

/* -------------------------------------------------------------------------
   ۲۹ · 404 (404.php, Phase 4.2) — no v6 mockup exists for this state
   (checked: no 404/error file anywhere in 03_UI_Design/shola-jawid-ui),
   so per EXECUTION_PLAN.md's own instruction for this row ("match v6
   error-state design if one exists, else brand-consistent minimal
   page"), this is assembled from existing components/tokens only — no
   new visual design invented, just .h-display + .dek + .btn reused in
   a centered, minimal layout.
   ------------------------------------------------------------------------- */
.error-404 { text-align: center; padding-block: 4rem; }
.error-404 .h-display { margin-top: .5rem; }
.error-404 .dek { margin-top: 1rem; max-width: 480px; margin-inline: auto; }
.error-404-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }