/* ==========================================================================
   Base: reset, RTL typography, shared primitives
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* `clip` contains horizontal overflow without turning <body> into a scroll
     container, which `hidden` does. `hidden` stays first for older engines. */
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

p { margin: 0; }

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

/* ==========================================================================
   Icons

   Every icon <svg> carries its symbol's viewBox plus width/height attributes,
   so it has an intrinsic size and aspect ratio in every engine. These rules
   stop a flex or grid parent from resizing it: without them Blink stretches
   an icon to fill its track while WebKit shrinks it, which is why the same
   component rendered correctly on iOS and oversized on Android and desktop.

   Per-component rules below set the actual dimensions; this is the floor.
   ========================================================================== */
[data-icon] {
  flex: 0 0 auto;   /* never grow or shrink inside a flex parent */
  display: block;
  width: 24px;
  height: 24px;
  /* An explicit cross-axis size also makes align-items:stretch a no-op, so
     alignment set by a parent component is left intact. */
  overflow: visible;
}
[data-icon][viewBox="0 0 16 16"] { width: 16px; height: 16px; }

a { color: inherit; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* --- Focus: always visible, never removed --- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.on-dark :focus-visible { outline-color: var(--gold-soft); }

::selection {
  background: var(--accent);
  color: var(--bg);
}

/* --- Screen-reader only --- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--s-4);
  top: -100px;
  z-index: 200;
  background: var(--accent);
  color: var(--bg);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-btn);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus-visible { top: var(--s-4); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section--alt { background: var(--bg-alt); }
.section--line { border-top: 1px solid var(--line); }

/* ==========================================================================
   Editorial type primitives
   ========================================================================== */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ink-faint);
  margin: 0 0 var(--s-5);
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-strong);
  max-width: 72px;
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--gold::after { background: var(--gold-soft); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { display: none; }

.h-display {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.08;
}
.h-section {
  font-size: var(--fs-h2);
  font-weight: 700;
  max-width: 20ch;
}
.h-section--wide { max-width: 26ch; }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--ink-soft);
  max-width: var(--w-prose);
}
.prose {
  color: var(--ink-soft);
  line-height: var(--lh-loose);
  max-width: var(--w-prose);
}
.prose p + p { margin-top: var(--s-5); }

.meta {
  font-size: var(--fs-small);
  color: var(--ink-faint);
  line-height: 1.7;
}

/* Editorial index marker, e.g. 01 */
.index-num {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 17px 34px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: none;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  background: var(--accent);
  color: #FBF7F1;
  border-color: var(--accent);
}
.btn--primary:hover:not([disabled]) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--primary:active:not([disabled]) { background: var(--accent-press); }

.btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--ink-faint); color: var(--ink); }

.btn--quiet {
  background: transparent;
  color: var(--ink-faint);
  border-color: transparent;
  padding-inline: var(--s-4);
}
.btn--quiet:hover { color: var(--ink); }

/* Light button for the dark section. Burgundy on near-black fails contrast,
   so the roles invert: cream ground, burgundy label. */
.btn--light {
  background: var(--bg);
  color: var(--accent);
  border-color: var(--bg);
}
.btn--light:hover { background: #FFFFFF; border-color: #FFFFFF; }

.btn--block { width: 100%; }

.btn__arrow {
  width: 15px; height: 15px;
  flex: none;
  transition: transform var(--dur) var(--ease);
}
/* RTL: forward motion travels toward the inline-end, i.e. visually left */
.btn:hover .btn__arrow { transform: translateX(-3px); }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

/* ==========================================================================
   Badge
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  padding: 6px 14px;
  white-space: nowrap;
  background: var(--card);
  line-height: 1.4;
}
.badge__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* ==========================================================================
   Scroll reveal (progressive enhancement; JS adds .js to <html>)
   ========================================================================== */

html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}
html.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal.is-in { opacity: 1; transform: none; transition: none; }
}