/* ============================================================
   Base — reset, typography, RTL foundations, utilities
   ============================================================ */

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

* { margin: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-6));
  -moz-tab-size: 4;
  tab-size: 4;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  min-height: 100vh;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
  /* keep layout stable when a drawer/modal opens */
  padding-inline-end: var(--sbw, 0px);
}

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

img { height: auto; border: 0; }

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

button { background: none; border: 0; padding: 0; cursor: pointer; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}

address { font-style: normal; }

table { border-collapse: collapse; width: 100%; }

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

::selection {
  background: var(--ember-200);
  color: var(--iron-900);
}

/* ---------------- Headings ---------------- */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  color: var(--iron-900);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semi); letter-spacing: var(--tr-tight); }
h5, h6 { font-size: var(--fs-base); font-weight: var(--fw-semi); letter-spacing: var(--tr-tight); }

.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}

p { text-wrap: pretty; }

/* ---------------- Focus ---------------- */

:focus { outline: none; }

:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.on-dark :focus-visible,
.section--dark :focus-visible {
  outline-color: var(--ember-300);
}

/* ---------------- Skip link ---------------- */

.skip-link {
  position: fixed;
  inset-block-start: var(--sp-2);
  inset-inline-start: 50%;
  transform: translate(50%, -160%);
  z-index: var(--z-max);
  background: var(--iron-900);
  color: var(--text-on-dark);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-full);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  box-shadow: var(--sh-4);
  transition: transform var(--t) var(--ease-out);
}

.skip-link:focus-visible { transform: translate(50%, 0); }

/* ---------------- Layout primitives ---------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--md { max-width: var(--container-md); }
.container--sm { max-width: var(--container-sm); }

.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.section--flush-top { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

/* Two sections in a row each paid a full --section-y, so the space between
   them was double — about 240px at the widest breakpoint, and on the guide
   pages that reads as a hole rather than as a break. section--flush-top was
   the fix, applied by hand thirty times and missed twenty-five, which is
   what a hand-applied rule looks like after a while. It is collapsed here
   once instead, so a page cannot be built wrong.

   The banded sections opt back out below. A band needs its own top padding
   or the colour starts on top of the heading, and so does whatever follows
   one, or the next heading sits flush against the edge the band just drew.

   Those exceptions are written at two class selectors each so they outrank
   this collapse, which is also two. Written as one — plain .section--sunken
   — they lose on specificity no matter what order they appear in, which is
   exactly what happened first: every band on the homepage lost its top
   padding and started its colour flush against its own first line. */
.section + .section { padding-block-start: 0; }

.section.section--sunken,
.section.section--inset,
.section.section--dark,
.section--sunken + .section,
.section--inset + .section,
.section--dark + .section { padding-block-start: var(--section-y); }

.section--sunken { background: var(--bg-sunken); }
.section--inset  { background: var(--bg-inset); }

.section--dark {
  background: var(--iron-900);
  color: var(--text-on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6 { color: var(--text-on-dark); }

.stack > * + * { margin-block-start: var(--flow, var(--sp-4)); }

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }

.grid { display: grid; gap: var(--sp-6); }

/* ---------------- Section headers ---------------- */

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-block-end: var(--sp-8);
  flex-wrap: wrap;
}

.sec-head__text { max-width: 62ch; }

.sec-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sec-head--center .sec-head__text { margin-inline: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--ember-600);
  margin-block-end: var(--sp-3);
}

.eyebrow::before {
  content: "";
  inline-size: 22px;
  block-size: 2px;
  background: currentColor;
  border-radius: 2px;
  flex: none;
}

/* brass-600 measured 3.76 on paper-3, under the 4.5 bar for this size.
   brass-700: 5.47 on paper-3, 6.62 on paper, 7.02 on white. */
.eyebrow--brass { color: var(--brass-700); }
.section--dark .eyebrow { color: var(--brass-300); }

.sec-lead {
  margin-block-start: var(--sp-4);
  font-size: var(--fs-lg);
  color: var(--text-soft);
  line-height: var(--lh-loose);
  max-width: 60ch;
}

.section--dark .sec-lead { color: var(--text-on-dark-soft); }

/* ---------------- Text helpers ---------------- */

.t-center { text-align: center; }
.t-start  { text-align: start; }
.t-end    { text-align: end; }

.t-sm  { font-size: var(--fs-sm); }
.t-xs  { font-size: var(--fs-xs); }
.t-2xs { font-size: var(--fs-2xs); }
.t-lg  { font-size: var(--fs-lg); }

.t-soft  { color: var(--text-soft); }
.t-muted { color: var(--text-muted); }
.t-faint { color: var(--text-faint); }
.t-accent { color: var(--ember-600); }
.t-success { color: var(--success-600); }
.t-danger { color: var(--danger-600); }

.t-semi  { font-weight: var(--fw-semi); }
.t-bold  { font-weight: var(--fw-bold); }
.t-black { font-weight: var(--fw-black); }

.t-caps {
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
}

.t-num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Numbers and Latin runs inside RTL text stay readable */
.ltr { direction: ltr; unicode-bidi: isolate; }
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

.link {
  color: var(--ember-600);
  font-weight: var(--fw-semi);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ember-200);
}
.link:hover { color: var(--ember-700); text-decoration-color: currentColor; }

.link-quiet { color: var(--text-soft); }
.link-quiet:hover { color: var(--ember-600); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-semi);
  color: var(--iron-900);
}
.link-arrow svg { transition: transform var(--t) var(--ease-out); flex: none; }
.link-arrow:hover { color: var(--ember-600); }
/* RTL: the arrow points to the inline-end, so it travels negative on X */
.link-arrow:hover svg { transform: translateX(-4px); }
.section--dark .link-arrow { color: var(--text-on-dark); }
.section--dark .link-arrow:hover { color: var(--brass-300); }

.prose { max-width: 68ch; }
.prose > * + * { margin-block-start: var(--sp-5); }
.prose h2 { margin-block-start: var(--sp-12); }
.prose h3 { margin-block-start: var(--sp-10); }
.prose h2 + *, .prose h3 + * { margin-block-start: var(--sp-4); }
.prose p, .prose li { color: var(--text-soft); line-height: var(--lh-loose); }
.prose strong { color: var(--text); font-weight: var(--fw-semi); }
.prose ul, .prose ol { padding-inline-start: var(--sp-1); }
.prose li { position: relative; padding-inline-start: var(--sp-7); }
.prose li + li { margin-block-start: var(--sp-3); }
.prose ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--sp-2);
  inset-block-start: .72em;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--ember-300);
}
.prose ol { counter-reset: li; }
.prose ol > li { counter-increment: li; }
.prose ol > li::before {
  content: counter(li);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .12em;
  inline-size: 1.5em;
  block-size: 1.5em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ember-100);
  color: var(--ember-700);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

/* ---------------- Accessibility utilities ---------------- */

.sr-only {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

.is-hidden { display: none !important; }

/* ---------------- Scroll reveal ---------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------------- Scrollbars ---------------- */

.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--iron-300) transparent;
}

.scroll-x::-webkit-scrollbar { block-size: 8px; }
.scroll-x::-webkit-scrollbar-track { background: transparent; }
.scroll-x::-webkit-scrollbar-thumb {
  background: var(--iron-300);
  border-radius: var(--r-full);
}
.scroll-x::-webkit-scrollbar-thumb:hover { background: var(--iron-400); }

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

/* ---------------- Print ---------------- */

@media print {
  .site-header, .site-footer, .announce, .mobile-bar,
  .drawer, .modal, .toast-stack, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}