/* Alfondia base -- reset, typography defaults, layout primitives.
   Logical properties throughout (inline/block, start/end) so the same
   stylesheet mirrors correctly under dir="rtl" with no separate RTL file. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: hidden;
}
:root[dir="rtl"] body,
html[dir="rtl"] body {
  font-family: var(--font-body-ar);
  font-size: 17.5px;
  line-height: 1.85; /* Arabic script needs more vertical room per line */
}
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.12;
  margin-block: 0 var(--space-sm);
  text-wrap: balance;
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 {
  font-family: var(--font-display-ar);
  line-height: 1.4;
}
h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -.012em; }
html[dir="rtl"] h1 { font-weight: 700; letter-spacing: 0; font-size: clamp(32px, 3.8vw, 46px); }
h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.008em; }
html[dir="rtl"] h2 { font-weight: 700; letter-spacing: 0; font-size: clamp(25px, 2.4vw, 30px); }
h3 { font-size: var(--fs-h3); font-weight: 600; font-family: var(--font-body); }
html[dir="rtl"] h3 { font-family: var(--font-body-ar); font-weight: 700; }
p { margin-block: 0 var(--space-sm); max-width: 62ch; }
a { color: var(--blue-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; display: block; }

/* Visible, non-optional focus state. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* The accent is ~3:1 on ink, so focus rings on dark surfaces use paper. */
.band-navy a:focus-visible, .band-navy button:focus-visible,
.audiences-surface a:focus-visible { outline-color: var(--paper); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: -999px; top: 0; z-index: 100;
  background: var(--alf-navy); color: #fff; padding: 10px 16px;
  border-end-end-radius: var(--radius); border-end-start-radius: 0;
}
.skip-link:focus { inset-inline-start: 0; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
}
.section { padding-block: var(--space-xl); }
.section-soft { background: var(--alf-bg-soft); }
.section--tight { padding-block: var(--space-lg); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--alf-muted);
  margin-block-end: 12px;
}
html[dir="rtl"] .eyebrow { font-family: var(--font-body-ar); letter-spacing: 0; text-transform: none; font-size: 16px; font-weight: 600; }
.lede { font-size: var(--fs-lede); color: var(--alf-muted); max-width: 60ch; }

.placeholder-note {
  display: block;
  margin-block-start: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--alf-faint);
  font-style: italic;
  max-width: none; /* short internal notes: let them use the full column instead of the sitewide p{max-width:62ch} */
}

@media (max-width: 900px) {
  .section { padding-block: var(--space-lg); }
  html[dir="rtl"] .eyebrow { font-size: 14px; }
}