/* ============================================================
   public.css — Shared base for all public pages
   Dashboard styles remain in app.css
   ============================================================ */

/* Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* CSS custom properties (defaults, overridden by themes)
   ============================================================ */
:root {
  --accent: #0071e3;
  --nav-bg: #ffffff;
  --nav-text: #1a1a1a;
  --nav-border: #e0e0e0;
  --ticker-bg: #f0f4ff;
  --ticker-text: #1a1a1a;
  --ticker-label-bg: var(--accent);
  --ticker-label-text: #ffffff;
  --page-bg: #ffffff;
  --surface: #ffffff;
  --ink: #1a1a1a;
  --muted: #6b7280;
  --border: #e5e7eb;
  --font-headline: Georgia, serif;
  --font-body: system-ui, sans-serif;
  --radius: 4px;
  --wrap: 1120px;
}

/* Container
   ============================================================ */
.site-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

/* Body
   ============================================================ */
.public-body { background: var(--page-bg); color: var(--ink); font-family: var(--font-body); line-height: 1.6; min-height: 100vh; }

/* Navigation — shared structure (themes override colors/fonts)
   ============================================================ */
.site-topbar {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  gap: 1rem;
}
.site-logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--nav-text);
  white-space: nowrap;
  flex-shrink: 0;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.site-nav a {
  font-size: 0.875rem;
  color: var(--nav-text);
  opacity: 0.8;
  transition: opacity 0.15s;
}
.site-nav a:hover { opacity: 1; }

/* Ticker — shared structure (themes override colors)
   ============================================================ */
.ticker-wrap {
  background: var(--ticker-bg);
  overflow: hidden;
  height: 36px;
  display: flex;
  align-items: center;
}
.ticker-label {
  flex-shrink: 0;
  background: var(--ticker-label-bg);
  color: var(--ticker-label-text);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  margin-left: 1rem;
  border-radius: 2px;
}
.ticker-content {
  flex: 1;
  overflow: hidden;
}
.ticker-track {
  display: flex;
  gap: 2.5rem;
  animation: ticker-scroll 40s linear infinite;
  white-space: nowrap;
  padding: 0 1.5rem;
}
.ticker-track a {
  font-size: 0.8125rem;
  color: var(--ticker-text);
  opacity: 0.9;
  white-space: nowrap;
}
.ticker-track a:hover { opacity: 1; text-decoration: underline; }
.ticker-sep { color: var(--ticker-text); opacity: 0.4; }
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Image placeholder (for missing featured images)
   ============================================================ */
.img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, #f5f5f5);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: inherit;
}

/* Article card (shared grid card used everywhere)
   ============================================================ */
.article-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}
.article-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.card-image {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--border);
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.article-card:hover .card-image img { transform: scale(1.03); }
.card-body {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.card-cat {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.card-title {
  font-family: var(--font-headline);
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
}
.card-title a { color: inherit; }
.card-title a:hover { color: var(--accent); }
.card-meta {
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.card-meta .sep { opacity: 0.4; }

/* Article list item (archive/topic/search rows)
   ============================================================ */
.article-list { display: flex; flex-direction: column; }
.article-list-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.article-list-item:last-child { border-bottom: none; }
.list-thumb {
  width: 80px;
  height: 60px;
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--border);
}
.list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.list-body { display: flex; flex-direction: column; gap: 0.35rem; }
.list-title {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.list-title a:hover { color: var(--accent); }
.list-summary { font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }
.list-meta { font-size: 0.75rem; color: var(--muted); }

/* Homepage sections
   ============================================================ */
.homepage-hero {
  padding: 2rem 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 2rem;
  align-items: start;
}
.hero-primary {
  position: relative;
}
.hero-image {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--border);
  margin-bottom: 1rem;
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-cat {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
  display: block;
}
.hero-title {
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.hero-title a { color: var(--ink); }
.hero-title a:hover { color: var(--accent); }
.hero-deck {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.hero-meta {
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.hero-secondary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.hero-secondary .article-card { flex-direction: row; }
.hero-secondary .card-image {
  width: 80px;
  height: 70px;
  flex-shrink: 0;
  aspect-ratio: unset;
}
.hero-secondary .card-body { padding: 0.5rem 0.75rem; }
.hero-secondary .card-title { font-size: 0.9375rem; }

.homepage-secondary {
  padding: 2rem 0;
  border-top: 1px solid var(--border);
}
.section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}
.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.card-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.homepage-list {
  padding: 2rem 0;
  border-top: 1px solid var(--border);
}

.sponsor-zone {
  padding: 2.5rem 0;
  margin: 2rem 0 0;
}
.video-placeholder {
  aspect-ratio: 16/9;
  max-width: 720px;
  margin: 0 auto;
  background: #111;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.play-btn {
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-btn::after {
  content: '';
  border: 8px solid transparent;
  border-left: 14px solid rgba(255,255,255,0.9);
  margin-left: 4px;
}
.sponsor-label {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.category-tabs {
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.category-tabs a {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.375rem 0.875rem;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--ink);
  transition: all 0.15s;
}
.category-tabs a:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.trust-strip {
  padding: 2.5rem 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
}
.trust-card h2 { font-family: var(--font-headline); font-size: 1.25rem; margin-bottom: 0.5rem; }
.trust-card p { font-size: 0.875rem; color: var(--muted); line-height: 1.6; }
.trust-links { display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.trust-links a {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}
.topics-card p { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.75rem; }
.topics-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.topics-inline span, .topics-inline a {
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  background: var(--border);
  border-radius: 100px;
  color: var(--muted);
}

/* Article page
   ============================================================ */
.article-shell {
  padding: 2rem 0 4rem;
  max-width: 800px;
  margin: 0 auto;
}
.breadcrumbs {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumbs a:hover { color: var(--accent); }
.article-head { margin-bottom: 2rem; }
.art-cat {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.art-title {
  font-family: var(--font-headline);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.75rem;
  color: var(--ink);
}
.art-deck {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 1.25rem;
  font-style: italic;
}
.byline {
  font-size: 0.875rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.byline a { color: var(--ink); font-weight: 600; }
.byline a:hover { color: var(--accent); }
.journalist-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.dateline { font-size: 0.8125rem; color: var(--muted); margin-bottom: 0.25rem; }
/* THE PRODUCTION DISCLOSURE, at the foot of an article and under a byline on a
   journalist page. Same size and same colour as `.dateline` above, which is the
   treatment the owner chose: small and muted, matching the surrounding footer
   text. Deliberately no icon, box, border or heading. */
.article-disclosure { font-size: 0.8125rem; color: var(--muted); margin: 0 0 0.25rem; }
.article-hero-image {
  width: 100%;
  max-height: 480px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--border);
  margin-bottom: 2rem;
}
.article-hero-image img { width: 100%; height: 100%; object-fit: cover; max-height: 480px; }
.article-hero-image .img-placeholder { min-height: 280px; font-size: 1rem; }

.article-body { margin-top: 0; }
.prose {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--ink);
}
.prose p { margin-bottom: 1.4rem; }
.prose p:last-child { margin-bottom: 0; }

.content-block {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, #f9f9f9);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.content-block h2 {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
  color: var(--accent);
}
.content-block ul { padding-left: 1.25rem; }
.content-block li { font-size: 0.9375rem; line-height: 1.6; margin-bottom: 0.4rem; }

.faq-list { margin: 2rem 0; }
.faq-list details {
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0;
}
.faq-list details:first-child { border-top: 1px solid var(--border); }
.faq-list summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ink);
}
.faq-list summary::after { content: '+'; color: var(--accent); font-size: 1.25rem; font-weight: 300; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list details p {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted);
}

.qa-card {
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}
.qa-card strong { display: block; font-size: 0.9375rem; margin-bottom: 0.4rem; color: var(--ink); }
.qa-card p { font-size: 0.875rem; color: var(--muted); line-height: 1.6; }

.meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

/* Analysis layout */
.article-body.two-column {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.article-body.two-column .prose { font-size: 1rem; }
.article-body.two-column > div { position: sticky; top: 80px; }
.article-body.two-column .content-block { margin: 0 0 1rem; }

/* Authority layout */
.article-body.authority-layout { display: block; }
.article-body.authority-layout .prose { margin-bottom: 2rem; }

/* Section head / listing pages
   ============================================================ */
.listing-shell { padding: 2rem 0 4rem; }
.section-head { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--accent); }
.section-head .eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.section-head h1 {
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}
.section-head p { font-size: 0.9375rem; color: var(--muted); }

/* Journalist profile
   ============================================================ */
.journalist-profile {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.journalist-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--font-headline);
}
.journalist-bio h1 { font-family: var(--font-headline); font-size: 1.75rem; font-weight: 700; margin-bottom: 0.25rem; }
.journalist-bio .role { font-size: 0.875rem; color: var(--accent); font-weight: 600; margin-bottom: 0.25rem; }
.journalist-bio .location { font-size: 0.8125rem; color: var(--muted); }

/* Search
   ============================================================ */
.search-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.search-header h1 { font-family: var(--font-headline); font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem; }
.search-form {
  display: flex;
  gap: 0.5rem;
  max-width: 560px;
}
.search-form input {
  flex: 1;
  padding: 0.625rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--surface);
  outline: none;
}
.search-form input:focus { border-color: var(--accent); }
.search-form button {
  padding: 0.625rem 1.25rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.no-results {
  padding: 3rem 0;
  text-align: center;
  color: var(--muted);
  font-size: 1rem;
}

/* Static pages
   ============================================================ */
.static-page { padding: 3rem 0 5rem; max-width: 800px; margin: 0 auto; }
.static-hero { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--accent); }
.static-hero .eyebrow {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem;
}
.static-hero h1 {
  font-family: var(--font-headline); font-size: 2.25rem;
  font-weight: 700; line-height: 1.2; margin-bottom: 0.5rem;
}
.static-hero .standfirst { font-size: 1.0625rem; color: var(--muted); line-height: 1.65; }
.trust-sections { display: flex; flex-direction: column; gap: 1.5rem; }
.trust-detail {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.trust-detail h2 { font-family: var(--font-headline); font-size: 1.125rem; font-weight: 700; margin-bottom: 0.5rem; }
.trust-detail p { font-size: 0.9375rem; color: var(--muted); line-height: 1.7; }
.principles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
.principle-card {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.principle-card h2 { font-size: 0.75rem; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.principle-card p { font-size: 0.875rem; color: var(--muted); line-height: 1.6; }
.trust-link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
.trust-link-card {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
  display: block;
}
.trust-link-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.trust-link-card h2 { font-size: 1rem; font-weight: 700; margin-bottom: 0.35rem; color: var(--ink); }
.trust-link-card p { font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }

/* Footer
   ============================================================ */
.site-footer {
  background: var(--nav-bg);
  border-top: 1px solid var(--border);
  padding: 2.5rem 0;
  margin-top: 3rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  align-items: start;
}
.footer-logo { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--nav-text); }
.footer-focus { font-size: 0.8125rem; color: var(--muted); line-height: 1.6; margin-bottom: 0.5rem; }
.site-footer p { font-size: 0.8125rem; color: var(--muted); line-height: 1.6; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.75rem; }
.footer-links a { font-size: 0.8125rem; color: var(--muted); }
.footer-links a:hover { color: var(--accent); }

/* THE PUBLISHER DISCLOSURE. Deliberately NOT the muted grey the rest of the
   footer uses, and deliberately at normal body size: it is a disclosure, and a
   disclosure set in small grey type is designed not to be read. Separated from
   the footer columns by a rule so it reads as a statement rather than as part
   of the navigation. */
.publisher-disclosure {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  color: var(--nav-text);
}
.site-footer p.publisher-disclosure { font-size: 0.9375rem; color: var(--nav-text); }

/* Responsive
   ============================================================ */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-secondary { display: grid; grid-template-columns: repeat(2, 1fr); }
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .trust-strip { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .article-body.two-column { grid-template-columns: 1fr; }
  .article-body.two-column > div { position: static; }
  .meta-grid { grid-template-columns: 1fr; }
  .principles-grid { grid-template-columns: 1fr; }
  .trust-link-grid { grid-template-columns: repeat(2, 1fr); }
  .journalist-profile { flex-direction: column; gap: 1rem; }
}

@media (max-width: 600px) {
  .hero-secondary { grid-template-columns: 1fr; }
  .hero-secondary .article-card { flex-direction: row; }
  .card-grid-3 { grid-template-columns: 1fr; }
  .card-grid-4 { grid-template-columns: 1fr; }
  .trust-link-grid { grid-template-columns: 1fr; }
  .art-title { font-size: 1.625rem; }
  .hero-title { font-size: 1.5rem; }
  .site-nav { gap: 0.875rem; }
  .site-nav a { font-size: 0.8125rem; }
}

/* ==========================================================================
   RIGHT-TO-LEFT (decision #44) — Arabic publications
   ==========================================================================

   News Engine 27 has NO RTL CSS at all: their network themes emit dir="rtl"
   and rely entirely on the browser, and their amplifier themes emit no `dir`
   attribute whatsoever, so Arabic amplifier sites render left-to-right. The
   discovery flagged both. We render `dir` on every public page (see
   `site_template_context`) and add the small number of rules native direction
   handling does not cover.

   The browser already mirrors text flow, inline alignment and list markers
   from `dir="rtl"`. What it does NOT mirror is anything anchored with a
   physical property — `left`, `right`, `text-align: left`, one-sided borders,
   and directional glyphs. Those are what follows.

   Scope: the ARTICLE and the chrome around it, which is what a reader sees.
   Full UI-string localisation is a separate decision — an Arabic publication
   currently renders Arabic CONTENT correctly inside English furniture. */

[dir="rtl"] {
  /* Arabic needs a face that actually has the glyphs; the editorial serifs
     above do not. Noto Naskh is the widely-available fallback. */
  font-family: "Noto Naskh Arabic", "Amiri", "Segoe UI", system-ui, serif;
}

/* Anything the stylesheet pinned to a physical side has to flip. Logical
   properties would avoid this, but the existing sheet predates the decision to
   support RTL and rewriting all of it would be a far larger change than this
   stage warrants. */
[dir="rtl"] .art-title,
[dir="rtl"] .hero-title,
[dir="rtl"] .art-body,
[dir="rtl"] .art-meta { text-align: right; }

[dir="rtl"] .site-nav { flex-direction: row-reverse; }
/* The ticker label sits at the START of the bar. `margin-left` kept it 1rem
   from the LEFT edge, so under rtl it moved to the right edge and kept its gap
   on the wrong side, butting against the frame. Found by rendering an Arabic
   page in step AB, not by reading the sheet. */
[dir="rtl"] .ticker-label { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] blockquote { border-left: none; border-right: 3px solid currentColor; padding-left: 0; padding-right: 1rem; }
[dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 1.5rem; }

/* Directional glyphs point the wrong way when mirrored. */
[dir="rtl"] .back-link::before { content: "→"; }
[dir="rtl"] .next-link::after { content: "←"; }

/* Numbers, dates and URLs stay left-to-right inside right-to-left prose —
   without this an ISO date or a URL renders with its parts reversed. */
[dir="rtl"] time,
[dir="rtl"] .art-date,
[dir="rtl"] a[href^="http"] { unicode-bidi: isolate; direction: ltr; display: inline-block; }