/*
Theme Name: CryptoForSA — مجتمع العملات الرقمية
Theme URI: https://cryptoforsa.com
Author: مجتمع العملات الرقمية
Description: قالب عربي RTL مبني على حزمة الهوية البصرية لعلامة «مجتمع العملات الرقمية». خطوط self-hosted، بلا أي طلب لطرف ثالث، ووضعان فاتح وداكن.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cryptoforsa
Tags: rtl-language-support, custom-logo, translation-ready, blog, education
*/

/* ==========================================================================
   0 · Brand tokens
   Generated from CryptoForSA-Brandkit/06-tokens/brand.css — do not hand-edit
   colour values here; change them in the kit so web/social/print stay in sync.
   ========================================================================== */

:root {
  --cfs-aqua: #49c5c5;
  --cfs-aqua-100: #d8f3f3;
  --cfs-aqua-200: #97edec;
  --cfs-aqua-300: #70dbda;
  --cfs-aqua-400: #49c5c5;
  --cfs-aqua-500: #1baeae;
  --cfs-aqua-700: #077a7a;
  --cfs-aqua-800: #075f60;
  --cfs-indigo: #2e2478;
  --cfs-indigo-400: #a5a5fc;
  --cfs-indigo-deep: #241a5e;
  --cfs-steel-300: #9acfee;
  --cfs-steel-400: #7fb8da;
  --cfs-steel-600: #508aab;
  --cfs-orange: #f7931a;
  --cfs-orange-300: #feb572;
  --cfs-green-300: #7fe099;
  --cfs-green-600: #1f9b50;
  --cfs-red-300: #fdafab;
  --cfs-red-600: #d9484c;
  --cfs-amber-300: #fbb85d;
  --cfs-amber-500: #ce880e;
  --cfs-ink: #0b1120;

  --grad-coin: linear-gradient(129deg, #5fdcd6 0%, #3f7a9b 50%, #221757 100%);
  --grad-night: linear-gradient(160deg, #241a5e 0%, #0b1120 100%);

  /* One family for the whole site. Tajawal carries Arabic and Latin, so a
     single face keeps headings, body, numerals and badges visually identical
     and removes the seam that appeared wherever the two scripts met.
     --font-latin is kept as an alias so the many lang="en" rules need no edit;
     it resolves to the same face. */
  --font-display: Tajawal, system-ui, sans-serif;
  --font-body: Tajawal, system-ui, sans-serif;
  --font-latin: Tajawal, system-ui, sans-serif;
  /* The sole exception. Reserved for the worked figures (Merkle tree, AMM
     maths) where column alignment is functional — Tajawal is proportional and
     would collapse those diagrams into noise. */
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --leading-ar: 1.85;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
  --t-fast: 120ms var(--ease);
  --t-base: 220ms var(--ease);

  --shadow-glow: 0 0 0 1px rgba(73, 197, 197, 0.35), 0 8px 32px rgba(73, 197, 197, 0.28);

  --shell: 1200px;
  --header-h: 74px;
}

/* ---- surfaces: dark is the brand default, light is fully supported ---- */
:root,
[data-theme="dark"] {
  /* Native controls (checkbox, scrollbar, autofill) follow this, not our vars. */
  color-scheme: dark;
  --surface: #070c17;
  --surface-raised: #0e1626;
  --surface-sunken: #141d31;
  --hairline: rgba(255, 255, 255, 0.1);
  --text: #eef2f8;
  --text-muted: #97a1b5;
  --accent: var(--cfs-aqua-300);
  --accent-soft: rgba(112, 219, 218, 0.12);
  --glass: rgba(255, 255, 255, 0.035);
  --glass-line: rgba(255, 255, 255, 0.09);
  /* Large decorative-looking numerals that still carry meaning (lesson number).
     Tuned to clear 3:1 against the card surface — a hairline-coloured watermark
     measured 1.2:1 and was unreadable for low-vision readers. */
  --numeral: #5d6779;
  /* Form controls need a 3:1 boundary (WCAG 1.4.11) — the hairline used for
     decorative dividers measures ~1.2:1 and leaves an input with no visible
     edge, which is its only affordance. */
  --field-border: #5b6578;
}

[data-theme="light"] {
  color-scheme: light;
  --surface: #ffffff;
  --surface-raised: #f6f7f8;
  --surface-sunken: #ebedf1;
  --hairline: #d6dbe7;
  --text: #0b1120;
  --text-muted: #656a77;
  --accent: var(--cfs-aqua-700);
  --accent-soft: rgba(7, 122, 122, 0.08);
  --glass: rgba(11, 17, 32, 0.03);
  --glass-line: rgba(11, 17, 32, 0.09);
  /* Measured against the card surface (glass over paper), not plain white —
     the tint drops the effective background just enough to matter here. */
  --numeral: #848b98;
  --field-border: #828997;
}

/* ==========================================================================
   1 · Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--hairline);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--leading-ar);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}

p {
  margin: 0;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--cfs-aqua-400);
  color: #04121c;
}

:focus-visible {
  outline: 2px solid var(--cfs-aqua-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* WCAG 2.1 AA — honour reduced-motion requests. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  z-index: 200;
  width: auto;
  height: auto;
  clip: auto;
  margin: 0;
  padding: 0.8rem 1.5rem;
  background: var(--cfs-aqua-400);
  color: #052024;
  border-radius: var(--radius-full);
  font-weight: 700;
}

/* ==========================================================================
   2 · Layout primitives
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.shell--narrow {
  max-width: 820px;
}

.section {
  padding-block: clamp(4rem, 9vw, 7rem);
  position: relative;
}

.section--tight {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--2-lg { grid-template-columns: repeat(2, 1fr); }
}

.stack > * + * { margin-block-start: 1rem; }
.stack-lg > * + * { margin-block-start: 2rem; }

/* ==========================================================================
   3 · Typography helpers
   ========================================================================== */

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
}

.title-xl { font-size: clamp(2.2rem, 6.5vw, 4.1rem); line-height: 1.15; }
.title-lg { font-size: clamp(1.75rem, 4.5vw, 2.65rem); }
.title-md { font-size: clamp(1.35rem, 3vw, 1.75rem); }

.lead {
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  line-height: 1.75;
  color: var(--text-muted);
  text-wrap: pretty;
}

.balance { text-wrap: balance; }
.muted { color: var(--text-muted); }

.text-gradient {
  background: linear-gradient(100deg, var(--cfs-aqua-200) 0%, var(--cfs-aqua-400) 45%, var(--cfs-indigo-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-theme="light"] .text-gradient {
  background: linear-gradient(100deg, var(--cfs-aqua-700) 0%, var(--cfs-steel-600) 55%, var(--cfs-indigo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.num {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  /* Tajawal's figures sit wider than a Latin display face; pulling them in
     keeps large stat numbers from looking loose beside their labels. */
  letter-spacing: -0.03em;
}

.link-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: right bottom;
  transition: background-size var(--t-base);
}
.link-underline:hover { background-size: 100% 1px; }

/* ==========================================================================
   4 · Components
   ========================================================================== */

.card {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}

.card--pad { padding: 1.5rem; }

.card--hover:hover {
  border-color: rgba(73, 197, 197, 0.45);
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-full);
  padding: 0.78rem 1.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1;
  transition: all var(--t-base);
  white-space: nowrap;
}

.btn--primary {
  background: var(--cfs-aqua-400);
  color: #052024;
  box-shadow: 0 6px 22px rgba(73, 197, 197, 0.28);
}
.btn--primary:hover {
  background: var(--cfs-aqua-300);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(73, 197, 197, 0.4);
}

.btn--ghost {
  border: 1px solid var(--glass-line);
  background: var(--glass);
  color: var(--text);
}
.btn--ghost:hover {
  border-color: rgba(73, 197, 197, 0.5);
  color: var(--accent);
}

.btn--sm { padding: 0.55rem 1.15rem; font-size: 0.86rem; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-line);
  background: var(--glass);
  color: var(--text-muted);
  padding: 0.32rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.6;
}

/* Tinted pills. The dark-mode colours are the 300 ramp (light text on a dark
   surface); light mode swaps to the 700+ ramp, because the 300s measure around
   1.8:1 on white and would fail WCAG AA. Never inline these colours — an inline
   style skips the light-mode override and silently reintroduces that failure. */
.pill--aqua { border-color: rgba(73, 197, 197, 0.35); background: rgba(73, 197, 197, 0.1); color: var(--cfs-aqua-300); }
.pill--steel { border-color: rgba(127, 184, 218, 0.35); background: rgba(127, 184, 218, 0.1); color: var(--cfs-steel-300); }
.pill--orange { border-color: rgba(247, 147, 26, 0.35); background: rgba(247, 147, 26, 0.1); color: var(--cfs-orange-300); }
.pill--danger { border-color: rgba(217, 72, 76, 0.4); background: rgba(217, 72, 76, 0.1); color: var(--cfs-red-300); }

[data-theme="light"] .pill--aqua { color: var(--cfs-aqua-700); }
[data-theme="light"] .pill--steel { color: #2c5972; }
[data-theme="light"] .pill--orange { color: #9a5806; }
[data-theme="light"] .pill--danger { color: #942329; }

/* ---- decorative ---- */
.dot-grid {
  background-image: radial-gradient(circle, var(--glass-line) 1px, transparent 1px);
  background-size: 26px 26px;
}

.glow-orb {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   5 · Header
   ========================================================================== */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  border-block-end: 1px solid transparent;
  transition: background var(--t-base), border-color var(--t-base), backdrop-filter var(--t-base);
}

.site-header.is-scrolled {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-block-end-color: var(--glass-line);
  backdrop-filter: blur(18px);
}

.site-header__bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: opacity var(--t-base);
}
.brand:hover { opacity: 0.9; }

.brand__mark {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 10px rgba(73, 197, 197, 0.28));
}

.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-display); font-size: 0.98rem; font-weight: 800; }
.brand__latin {
  margin-block-start: 5px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav-main { display: none; }
@media (min-width: 1024px) { .nav-main { display: block; } }

/* wp_nav_menu always emits <ul><li> — the list semantics are correct for a nav,
   so they are kept and the markers are removed rather than stripping the <ul>. */
.nav-list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-main a {
  border-radius: var(--radius-full);
  padding: 0.5rem 1rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-main a:hover { color: var(--text); }
.nav-main a[aria-current], .nav-main .current-menu-item > a {
  background: var(--accent-soft);
  color: var(--accent);
}

.header-actions { display: flex; align-items: center; gap: 0.5rem; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-line);
  background: var(--glass);
  color: var(--text-muted);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover { color: var(--accent); border-color: rgba(73, 197, 197, 0.5); }

.header-cta { display: none; }
@media (min-width: 640px) { .header-cta { display: inline-flex; } }

.nav-toggle { display: grid; }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.nav-drawer {
  overflow: hidden;
  max-height: 0;
  border-block-start: 1px solid transparent;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(18px);
  transition: max-height 300ms var(--ease);
}
.nav-drawer.is-open { max-height: 75vh; border-block-start-color: var(--glass-line); }
@media (min-width: 1024px) { .nav-drawer { display: none; } }

.nav-drawer .drawer-list { list-style: none; margin: 0; padding: 1rem 0; display: flex; flex-direction: column; gap: 0.25rem; }
.nav-drawer a {
  display: block;
  border-radius: 12px;
  padding: 0.8rem 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-muted);
}
.nav-drawer a[aria-current], .nav-drawer .current-menu-item > a { background: var(--accent-soft); color: var(--accent); }

/* ==========================================================================
   6 · Hero
   ========================================================================== */

.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem); }

.hero__bg {
  position: absolute;
  inset: 0;
  background: var(--grad-night);
  opacity: 0.85;
  z-index: 0;
}
[data-theme="light"] .hero__bg { opacity: 0.06; }

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) { .hero__inner { grid-template-columns: 1.15fr 0.85fr; } }

.hero__coin {
  width: min(340px, 78vw);
  margin-inline: auto;
  animation: coin-drift 9s ease-in-out infinite;
  filter: drop-shadow(0 18px 60px rgba(73, 197, 197, 0.35));
}

@keyframes coin-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(1.5deg); }
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 2rem; }

.stat-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--glass-line);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-block-start: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 768px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }

.stat {
  background: var(--surface);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.stat__value { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.stat__label { font-size: 0.9rem; font-weight: 500; }
.stat__hint { font-size: 0.83rem; color: var(--text-muted); }

/* ==========================================================================
   7 · Article body (prose)
   ========================================================================== */

.prose {
  font-size: 1.075rem;
  line-height: var(--leading-ar);
  color: var(--text);
}

.prose > * + * { margin-block-start: 1.35em; }

.prose h2 {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  margin-block-start: 2.6em;
  margin-block-end: 0.2em;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.prose h3 {
  font-size: clamp(1.2rem, 2.6vw, 1.4rem);
  font-weight: 700;
  margin-block-start: 2em;
  margin-block-end: 0.1em;
}

.prose strong { font-weight: 700; color: var(--text); }

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(73, 197, 197, 0.4);
}
.prose a:hover { text-decoration-color: currentColor; }

.prose ul,
.prose ol { padding-inline-start: 1.4rem; margin-block: 0; }
.prose li + li { margin-block-start: 0.55em; }

.prose ul > li { list-style: none; position: relative; }
.prose ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.15rem;
  inset-block-start: 0.78em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--cfs-aqua-400);
}

.prose ol { list-style: decimal; }
.prose ol > li::marker { color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 0.95em; }

.prose blockquote {
  margin: 2rem 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--cfs-aqua-400);
  font-size: 1.05rem;
  line-height: 1.75;
}
.prose blockquote cite { display: block; margin-block-start: 0.6rem; font-size: 0.82rem; color: var(--text-muted); font-style: normal; }
.prose blockquote[lang="en"] { direction: ltr; text-align: start; }

/* ---- callout ---- */
.callout {
  margin: 2rem 0;
  border-radius: var(--radius-xl);
  border: 1px solid;
  padding: 1.35rem 1.5rem;
}
.callout__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin-block-end: 0.5rem;
}
.callout__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 1px solid currentColor;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}
.callout__body { font-size: 0.98rem; line-height: 1.75; color: var(--text-muted); }

.callout--note { border-color: rgba(73, 197, 197, 0.3); background: rgba(73, 197, 197, 0.07); }
.callout--note .callout__title { color: var(--cfs-aqua-300); }
.callout--info { border-color: rgba(127, 184, 218, 0.3); background: rgba(127, 184, 218, 0.07); }
.callout--info .callout__title { color: var(--cfs-steel-300); }
.callout--warn { border-color: rgba(251, 184, 93, 0.3); background: rgba(251, 184, 93, 0.07); }
.callout--warn .callout__title { color: var(--cfs-amber-300); }
.callout--danger { border-color: rgba(217, 72, 76, 0.3); background: rgba(217, 72, 76, 0.07); }
.callout--danger .callout__title { color: var(--cfs-red-300); }
.callout--success { border-color: rgba(93, 202, 126, 0.3); background: rgba(93, 202, 126, 0.07); }
.callout--success .callout__title { color: var(--cfs-green-300); }

[data-theme="light"] .callout--note .callout__title { color: var(--cfs-aqua-700); }
[data-theme="light"] .callout--info .callout__title { color: #2c5972; }
[data-theme="light"] .callout--warn .callout__title { color: #905f0f; }
[data-theme="light"] .callout--danger .callout__title { color: #942329; }
[data-theme="light"] .callout--success .callout__title { color: #12803f; }

/* ---- term cards ---- */
.terms { display: grid; gap: 0.75rem; margin: 2rem 0; }
@media (min-width: 640px) { .terms { grid-template-columns: repeat(2, 1fr); } }

.term { padding: 1rem 1.1rem; }
.term__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.65rem; }
.term__ar { font-family: var(--font-display); font-weight: 700; }
.term__en { font-family: var(--font-body); font-weight: 500; font-size: 0.8rem; color: var(--accent); direction: ltr; }
.term__def { margin-block-start: 0.35rem; font-size: 0.88rem; line-height: 1.7; color: var(--text-muted); }

/* ---- comparison table ---- */
.compare-wrap { margin: 2rem 0; overflow-x: auto; }
.compare { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 0.95rem; }
.compare th {
  border-block-end: 1px solid var(--glass-line);
  padding: 0.75rem 1rem;
  text-align: start;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
}
.compare td {
  border-block-end: 1px solid var(--glass-line);
  padding: 0.75rem 1rem;
  vertical-align: top;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---- steps ---- */
.steps { list-style: none; margin: 2rem 0; padding: 0; display: grid; gap: 1rem; }
.step { display: flex; gap: 1rem; padding: 1.25rem; }
.step__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: rgba(73, 197, 197, 0.15);
  color: var(--cfs-aqua-300);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  direction: ltr;
}
/* aqua-700 on the tinted chip lands at 4.38:1 — one notch darker clears AA. */
[data-theme="light"] .step__num { color: var(--cfs-aqua-800); }
.step__title { font-family: var(--font-display); font-weight: 700; }
.step__text { margin-block-start: 0.25rem; font-size: 0.94rem; line-height: 1.7; color: var(--text-muted); }

/* ---- worked example ---- */
.example { margin: 2rem 0; overflow: hidden; }
.example__title {
  border-block-end: 1px solid var(--glass-line);
  background: var(--glass);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
}
.example__lines { padding: 1rem 1.25rem; display: grid; gap: 0.3rem; }

/* Latin formulae and ASCII figures: monospace, LTR, alignment preserved. */
.example__lines code {
  display: block;
  direction: ltr;
  text-align: start;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--text-muted);
  white-space: pre;
  overflow-x: auto;
}

/* Arabic annotations: ordinary RTL prose, never forced into the mono grid. */
.example__lines .example__label {
  display: block;
  direction: rtl;
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--text);
}

.example__lines .example__gap { display: block; height: 0.5rem; }
.example__note {
  border-block-start: 1px solid var(--glass-line);
  padding: 0.75rem 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ---- inline stats inside prose ---- */
.stats-inline {
  display: grid;
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 1.5rem;
}
@media (min-width: 640px) { .stats-inline { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .stats-inline { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   8 · Article chrome
   ========================================================================== */

.article-head { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-end: 1.25rem; }

.reading-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 60;
  background: var(--cfs-aqua-400);
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform 90ms linear;
}
html[dir="ltr"] .reading-progress { transform-origin: left center; }

.toc { position: sticky; top: calc(var(--header-h) + 24px); }
.toc__title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: 0.85rem;
}
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.toc a {
  display: block;
  padding: 0.4rem 0.75rem;
  border-inline-start: 2px solid var(--glass-line);
  font-size: 0.88rem;
  color: var(--text-muted);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.toc a:hover, .toc a.is-active { color: var(--accent); border-inline-start-color: var(--cfs-aqua-400); }

.article-layout { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 1024px) { .article-layout { grid-template-columns: 240px 1fr; } }

.article-sidebar { display: none; }
@media (min-width: 1024px) { .article-sidebar { display: block; } }

.sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; counter-reset: src; }
.source { padding: 1rem 1.1rem; }
.source__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-end: 0.35rem; }
.source__org { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--accent); }
.source__title { font-size: 0.92rem; line-height: 1.7; color: var(--text-muted); }
.source__url {
  margin-block-start: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-muted);
  opacity: 0.78;
  direction: ltr;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pager { display: grid; gap: 1rem; margin-block-start: 3rem; }
@media (min-width: 640px) { .pager { grid-template-columns: repeat(2, 1fr); } }
.pager a { padding: 1.25rem; display: block; }
.pager__dir { font-size: 0.85rem; color: var(--text-muted); }
.pager__title { margin-block-start: 0.35rem; font-family: var(--font-display); font-weight: 700; }

/* ==========================================================================
   9 · Cards / listings
   ========================================================================== */

.lesson-card { display: flex; flex-direction: column; padding: 1.5rem; height: 100%; }
.lesson-card__num {
  font-family: var(--font-latin);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--numeral);
  transition: color var(--t-base);
}
.card--hover:hover .lesson-card__num { color: var(--accent); }
.lesson-card__title { margin-block-start: 0.75rem; font-size: 1.1rem; }
.lesson-card__dek { margin-block-start: 0.6rem; font-size: 0.92rem; line-height: 1.7; color: var(--text-muted); flex: 1; }
.lesson-card__foot { margin-block-start: 1.25rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.level-band { margin-block-start: clamp(2.5rem, 6vw, 3.5rem); }
.level-band__head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-block-end: 1.5rem; }

.pillar { padding: 1.75rem; height: 100%; }
.pillar__kicker { font-size: 0.85rem; color: var(--accent); font-weight: 600; }
.pillar__title { margin-block-start: 0.35rem; font-size: 1.25rem; }
.pillar__body { margin-block-start: 0.75rem; font-size: 0.95rem; line-height: 1.75; color: var(--text-muted); }

/* ==========================================================================
   10 · Glossary
   ========================================================================== */

.glossary-search {
  width: 100%;
  border-radius: var(--radius-full);
  border: 1px solid var(--field-border);
  background: var(--glass);
  color: var(--text);
  padding: 0.85rem 1.35rem;
  font-family: var(--font-body);
  font-size: 1rem;
}
.glossary-search::placeholder { color: var(--text-muted); }
.glossary-search:focus { outline: 2px solid var(--cfs-aqua-400); outline-offset: 2px; }

.glossary-grid { display: grid; gap: 0.75rem; margin-block-start: 1.75rem; }
@media (min-width: 700px) { .glossary-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .glossary-grid { grid-template-columns: repeat(3, 1fr); } }

.glossary-empty { display: none; padding: 3rem 1rem; text-align: center; color: var(--text-muted); }
.glossary-grid[data-empty="true"] + .glossary-empty { display: block; }

/* ==========================================================================
   11 · Footer
   ========================================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  margin-block-start: 6rem;
  border-block-start: 1px solid var(--glass-line);
  background: var(--surface-raised);
}

.footer-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 2fr; } }

.footer-links { display: grid; gap: 2rem; }
@media (min-width: 640px) { .footer-links { grid-template-columns: repeat(3, 1fr); } }

.footer-links h3 {
  margin-block-end: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.footer-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer-links a { font-size: 0.94rem; color: var(--text-muted); transition: color var(--t-fast); }
.footer-links a:hover { color: var(--text); }

.disclaimer-box {
  margin-block-start: 3.5rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(251, 184, 93, 0.25);
  background: rgba(251, 184, 93, 0.06);
  padding: 1.5rem;
}
.disclaimer-box__title { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--cfs-amber-300); margin-block-end: 0.5rem; }
[data-theme="light"] .disclaimer-box__title { color: #905f0f; }
.disclaimer-box p { font-size: 0.87rem; line-height: 1.8; color: var(--text-muted); }

.footer-bottom {
  margin-block-start: 2.5rem;
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--glass-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; } }
.footer-bottom nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; }

/* ==========================================================================
   12 · Utilities & WP core classes
   ========================================================================== */

.alignwide { max-width: 1100px; margin-inline: auto; }
.alignfull { max-width: none; }
.aligncenter { margin-inline: auto; }
.wp-caption-text, .wp-element-caption { font-size: 0.82rem; color: var(--text-muted); margin-block-start: 0.5rem; }

.anim-in { animation: fade-up 0.6s var(--ease) both; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ==========================================================================
   13 · Motion system
   Every effect below is opt-in via a data attribute and gated on
   prefers-reduced-motion in the global reset at §1 — nothing here is required
   for the page to be readable or usable.
   ========================================================================== */

/* Reveal on scroll. The hidden state is applied by JS (.will-reveal) so that a
   scripting failure leaves content visible instead of blank. */
.will-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.will-reveal.is-revealed { opacity: 1; transform: none; }

/* Pointer-tracked sheen. --mx/--my are written by JS on hover-capable devices;
   the fallback centre keeps the gradient sane before the first pointer event. */
.card--hover { position: relative; overflow: hidden; }
.card--hover::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(73, 197, 197, 0.13),
    transparent 65%
  );
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
  z-index: 0;
}
.card--hover:hover::before { opacity: 1; }
.card--hover > * { position: relative; z-index: 1; }

/* Hero parallax — offsets written by JS, composited with the idle drift. */
.hero__coin {
  transform: translateY(var(--py, 0)) rotate(var(--pr, 0deg));
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__coin { animation: coin-drift 9s ease-in-out infinite; }
}

/* ==========================================================================
   14 · Back to top
   ========================================================================== */

.back-to-top {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-start: 1.5rem;
  z-index: 45;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-line);
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  backdrop-filter: blur(12px);
  color: var(--text-muted);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base), color var(--t-fast);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { color: var(--accent); border-color: rgba(73, 197, 197, 0.5); }

/* ==========================================================================
   15 · Breadcrumbs, share, heading anchors
   ========================================================================== */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-block-end: 1.25rem;
}
.crumbs a { transition: color var(--t-fast); }
.crumbs a:hover { color: var(--accent); }
.crumbs__sep { opacity: 0.45; }
.crumbs__current { color: var(--text); font-weight: 500; }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.share__label { font-size: 0.88rem; color: var(--text-muted); margin-inline-end: 0.25rem; }
.share__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-line);
  background: var(--glass);
  color: var(--text-muted);
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.share__btn:hover { color: var(--accent); border-color: rgba(73, 197, 197, 0.5); transform: translateY(-2px); }
.share__toast {
  position: absolute;
  inset-block-end: calc(100% + 8px);
  inset-inline-start: 50%;
  transform: translateX(50%);
  white-space: nowrap;
  border-radius: var(--radius-sm);
  background: var(--cfs-aqua-400);
  color: #052024;
  padding: 0.22rem 0.55rem;
  font-size: 0.8rem;
  font-weight: 700;
}

/* Anchor link injected next to each h2 in article bodies. */
.heading-anchor {
  display: inline-grid;
  place-items: center;
  margin-inline-start: 0.5rem;
  color: var(--text-muted);
  opacity: 0;
  vertical-align: middle;
  transition: opacity var(--t-fast), color var(--t-fast);
}
.prose h2:hover .heading-anchor, .heading-anchor:focus-visible { opacity: 1; }
.heading-anchor:hover { color: var(--accent); }
@media (hover: none) { .heading-anchor { opacity: 0.4; } }

/* ==========================================================================
   16 · Lesson progress
   ========================================================================== */

.progress-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
}

.progress-ring { width: 56px; height: 56px; flex-shrink: 0; transform: rotate(-90deg); }
.progress-ring circle { fill: none; stroke-width: 3; }
.progress-ring__track { stroke: var(--glass-line); }
.progress-ring__bar {
  stroke: var(--cfs-aqua-400);
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.8s var(--ease);
}

.progress-panel__text { flex: 1; min-width: 12rem; }
.progress-panel__count { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.progress-panel__hint { font-size: 0.85rem; color: var(--text-muted); margin-block-start: 0.15rem; }

.mark-read {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-line);
  background: var(--glass);
  padding: 0.6rem 1.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: all var(--t-base);
}
.mark-read:hover { border-color: rgba(73, 197, 197, 0.5); color: var(--accent); }
.mark-read.is-done {
  border-color: rgba(31, 155, 80, 0.45);
  background: rgba(31, 155, 80, 0.12);
  color: var(--cfs-green-300);
}
/* green-700 measured 4.38:1 on the tinted chip — one step darker clears AA. */
[data-theme="light"] .mark-read.is-done { color: #01642e; }
.mark-read__check { display: grid; place-items: center; width: 18px; height: 18px; }
.mark-read.is-done .mark-read__check { color: inherit; }

/* Completed lessons get a corner tick rather than a colour wash, so the card
   still reads as a link first and a status second. */
.lesson-card { position: relative; }
.lesson-card.is-done::after {
  content: "✓";
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: rgba(31, 155, 80, 0.16);
  border: 1px solid rgba(31, 155, 80, 0.45);
  color: var(--cfs-green-300);
  font-size: 0.75rem;
  font-weight: 700;
}
[data-theme="light"] .lesson-card.is-done::after { color: #01642e; }

/* ==========================================================================
   17 · Authority band
   ========================================================================== */

.authority { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-block: 1px solid var(--glass-line); overflow: hidden; }
.authority__title { max-width: 62ch; font-size: 0.98rem; line-height: 1.8; color: var(--text-muted); }
.authority__title .eyebrow { margin-block-end: 0.6rem; }
.authority__title a { color: var(--accent); }

.marquee {
  display: flex;
  gap: 1.5rem;
  margin-block-start: 2rem;
  /* Fade the ends so items enter and leave instead of being clipped. */
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  flex-shrink: 0;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: max-content;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 46s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; scrollbar-width: none; }
  .marquee::-webkit-scrollbar { display: none; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100% + 1.5rem)); }
}

.marquee__item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1.35rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-line);
  background: var(--glass);
  white-space: nowrap;
}
.marquee__ar { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; }
.marquee__en { font-family: var(--font-body); font-weight: 500; font-size: 0.8rem; color: var(--accent); }

/* ==========================================================================
   18 · Newsletter
   ========================================================================== */

.newsletter { position: relative; }

.newsletter--band {
  overflow: hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--glass-line);
  background: var(--grad-night);
  padding: clamp(2rem, 5vw, 3.5rem);
}
[data-theme="light"] .newsletter--band {
  background: linear-gradient(160deg, #f2f4ff 0%, #eef7f7 100%);
}

.newsletter--inline {
  margin-block-start: 3.5rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-line);
  background: var(--glass);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.newsletter__orb {
  inset-block-start: -6rem;
  inset-inline-end: -4rem;
  width: 20rem;
  height: 20rem;
  background: rgba(73, 197, 197, 0.22);
}

.newsletter__inner { position: relative; z-index: 1; display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .newsletter--band .newsletter__inner { grid-template-columns: 1.05fr 0.95fr; align-items: center; } }
@media (min-width: 820px) { .newsletter--inline .newsletter__inner { grid-template-columns: 1fr 1fr; align-items: start; } }

.newsletter__title { margin-block-start: 0.75rem; }
.newsletter__lead { margin-block-start: 1rem; font-size: 1rem; line-height: 1.8; color: var(--text-muted); }
.newsletter__lead strong { color: var(--text); }

.newsletter__points { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.newsletter__points li { position: relative; padding-inline-start: 1.5rem; font-size: 0.94rem; color: var(--text-muted); }
.newsletter__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--cfs-aqua-400);
}

.newsletter__form { display: grid; gap: 1rem; }

.field { display: grid; gap: 0.4rem; }
.field__label { font-size: 0.85rem; font-weight: 600; }
.field__opt { color: var(--text-muted); font-weight: 400; }
.field__input {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--field-border);
  background: var(--surface);
  color: var(--text);
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field__input::placeholder { color: var(--text-muted); opacity: 0.75; }
.field__input:focus {
  outline: none;
  border-color: var(--cfs-aqua-400);
  box-shadow: 0 0 0 3px rgba(73, 197, 197, 0.18);
}
.field__input.is-invalid { border-color: var(--cfs-red-600); box-shadow: 0 0 0 3px rgba(217, 72, 76, 0.16); }
.field__error { font-size: 0.82rem; color: var(--cfs-red-300); }
[data-theme="light"] .field__error { color: #942329; }

.consent { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.85rem; line-height: 1.7; color: var(--text-muted); cursor: pointer; }
.consent input {
  flex-shrink: 0;
  margin-block-start: 0.3em;
  width: 18px;
  height: 18px;
  appearance: none;
  border: 1.5px solid var(--text-muted);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.consent input:hover { border-color: var(--cfs-aqua-400); }
.consent input:checked {
  background: var(--cfs-aqua-400);
  border-color: var(--cfs-aqua-400);
  /* Inline tick: no icon font, no extra request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052024' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 13px;
  background-position: center;
  background-repeat: no-repeat;
}
.consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.newsletter__submit { width: 100%; }
.newsletter__submit.is-busy { opacity: 0.75; cursor: progress; }
.newsletter__note { font-size: 0.82rem; color: var(--text-muted); text-align: center; }

.spinner {
  width: 15px;
  height: 15px;
  border-radius: var(--radius-full);
  border: 2px solid rgba(5, 32, 36, 0.28);
  border-top-color: #052024;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   19 · Related lessons
   ========================================================================== */

.related { margin-block-start: 3.5rem; }
.related__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-block-end: 1.5rem; }

/* ==========================================================================
   20 · Print
   Lessons are reference material; people print and annotate them. Strip the
   chrome, keep the sources, and expose link targets so a printout stays
   verifiable away from the screen.
   ========================================================================== */

@media print {
  :root { --surface: #fff; --text: #000; --text-muted: #333; --glass: transparent; --glass-line: #ccc; }

  .site-header,
  .site-footer,
  .newsletter,
  .share,
  .back-to-top,
  .toc,
  .pager,
  .related,
  .authority,
  .reading-progress,
  .heading-anchor,
  .mark-read,
  .progress-panel { display: none !important; }

  body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  .article-layout { display: block !important; }
  .shell { max-width: none; padding: 0; }
  .section { padding-block: 0; }

  .prose { font-size: 11pt; line-height: 1.7; }
  .prose h2 { break-after: avoid; margin-block-start: 1.4em; }
  .card, .callout, .example, .term, .step { break-inside: avoid; border: 1px solid #ccc !important; background: #fff !important; }

  /* A printed citation is useless without its URL. */
  .source__url { white-space: normal; overflow: visible; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; word-break: break-all; }

  @page { margin: 1.8cm; }
}

/* ==========================================================================
   21 · Article tools row
   ========================================================================== */

.article-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 1.75rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--glass-line);
}


/* ==========================================================================
   22 · Small-text floor and narrow-screen lockup
   Arabic needs more size than Latin at the same optical weight: letterforms
   connect and diacritics sit above the line, so anything under ~12.5px stops
   being comfortably readable. Every secondary label above was raised to at
   least 0.8rem (12.8px) for that reason, not for a checkbox.
   ========================================================================== */

@media (max-width: 400px) {
  /* Below this the header cannot hold seal + two lines + three controls
     without shrinking type past legibility. The Arabic name is the brand; the
     Latin line is a secondary lockup element, so that is what gives way. */
  .brand__latin { display: none; }
  .brand__name { font-size: 1.02rem; }
  :root { --header-h: 66px; }
}

@media (max-width: 360px) {
  .hero__actions .btn,
  .newsletter__submit { width: 100%; }
  .stat { padding: 1.15rem 1rem; }
}


/* ==========================================================================
   23 · Touch targets
   Inline links inside a sentence are exempt from WCAG 2.5.8 (their size is
   constrained by the line box). Stacked navigation links are not — on touch
   widths the footer and legal lists get real padding so each row clears 24px
   without relying on the spacing exception.
   ========================================================================== */

@media (pointer: coarse), (max-width: 700px) {
  .footer-links ul { gap: 0.15rem; }
  .footer-links a,
  .footer-bottom nav a {
    display: inline-block;
    padding-block: 0.45rem;
    min-height: 24px;
  }
  .footer-bottom nav { gap: 0.25rem 1.25rem; }
  .crumbs a { padding-block: 0.3rem; }
  .toc a { padding-block: 0.6rem; }
}


/* ==========================================================================
   24 · Hero on small screens
   The seal is a brand statement, but at phone widths it was ~370px tall and
   pushed the stat strip well below the fold. Capping it by viewport height
   keeps the proof visible on the first screen without shrinking the mark on
   the tall-phone sizes where it still fits comfortably.
   ========================================================================== */

@media (max-width: 899px) {
  .hero { padding-block: clamp(1.75rem, 6vw, 3rem) clamp(2rem, 6vw, 3rem); }
  .hero__inner { gap: 2rem; }
  .hero__coin { width: min(230px, 46vw, 28vh); }
  .hero__actions { margin-block-start: 1.5rem; }
}

@media (max-width: 520px) {
  .hero__coin { width: min(190px, 44vw, 24vh); }
  .stat-strip { margin-block-start: 2rem; }
  .stat { padding: 1.25rem 1.1rem; }
  .stat__value { font-size: clamp(1.5rem, 8vw, 1.9rem); }
}

/* Very wide screens: stop the shell from stranding the hero copy far from the
   mark, and keep reading measure sane on 4K. */
@media (min-width: 1800px) {
  :root { --shell: 1320px; }
  .prose { font-size: 1.12rem; }
}