/* ===========================================================
   Base — reset + element defaults. No colors/sizes hard-coded;
   everything pulls from tokens.css / tokens-layout.css custom
   properties, per docs/ProArc-Typography-Guideline-v1.2.md.

   ⚠ R2 REVIEW ITEM — the h1 rule below.
   v1 made every h1 on the site Hero Display: uppercase, bold. That was
   safe when every h1 was a short marketing headline. R2's H1s are not
   all of that shape (Work's "Selected work", /ajman's two-line numberless
   statement, About's opening statement on paper — E1.4), and v1.3 E1
   governs which ground a band sits on. Decide per screen before writing
   page CSS; do not inherit the sitewide uppercase by default.
   =========================================================== */

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

html {
  /* R2 ships no smooth-scroll library — v1's Lenis is gone with the rest of
     the CDN motion stack, and "the site draws" is the whole motion language.
     Scrolling stays the browser's own. */
  scroll-behavior: auto;

  /* The gutter is reserved permanently so that locking scroll behind the
     menu overlay removes nothing: neither the content nor the fixed chrome
     shifts by the scrollbar's width when the menu opens. */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

/* tokens.css already sets body{font-family,font-size,line-height,color,
   background,text-align} and a global font-style:normal guard — this
   only adds what it doesn't cover. */
body {
  margin: 0;
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-latin);
  line-height: var(--lh-h3);
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

/* h1 — DECIDED at the Home build (1 Aug 2026): the sitewide uppercase is
   GONE. v1 made every h1 Hero Display (uppercase, bold) because every v1 h1
   was a short marketing headline. R2's are not: the record pages set the
   building's name in Editorial Display, Work opens on "Selected work",
   /ajman on a two-line statement, About on the first sentence of its story.
   The rule was leaking through inheritance — .t-editorial overrides weight
   and size but not text-transform — so all 47 record pages were shipping
   "SEASIDE HILLS RESIDENCE" against Screen 04's decided light sentence case,
   and Work had to override it by hand.

   text-transform is invisible to a textContent probe. It was found by a
   screenshot and it is verified by one.

   What stays here is the SHAPE of a top-level heading (its size and
   leading), so an unclassed h1 is still a heading. The REGISTER is now
   stated by the page: .t-hero for the uppercase display register,
   .t-editorial for the light sentence-case one. Uppercase is never
   inherited; a page that wants it asks for it. */
h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

/* No H4 role in the locked scale — card/list titles sit at Body size,
   Semibold, per the weight table's "H2, H3, inline emphasis" row. */
h4 {
  font-size: var(--fs-body);
  font-family: var(--font-latin);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
}

/* Eyebrow — guideline §3.5: 12px Medium, +0.04em, uppercase, secondary
   grey, with a 24px x 1px rule mark in --color-ink (not an opacity tint
   of the label color — "Don't build hierarchy from opacity", §8.14). */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-latin);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caption);
  line-height: var(--lh-caption);
  text-transform: uppercase;
  color: var(--color-ink-secondary);
}

.eyebrow::before {
  content: "";
  inline-size: 24px;
  block-size: 1px;
  flex: none;
  background: var(--color-ink);
}

html:lang(ar) .eyebrow { text-transform: none; }

/* Lead / Body Large — guideline §2: 20px Light (300), 1.50 line-height. */
.lead {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-body-lg);
  line-height: var(--lh-body-lg);
  max-inline-size: var(--measure-body-lg);
  color: var(--color-ink);
}

html:lang(ar) .lead { font-weight: var(--fw-regular); } /* Light is never used in Arabic, §6.4 */

/* An eyebrow directly followed by a lead paragraph (task 4.6 inline-style cleanup). */
.eyebrow + .lead { margin-top: var(--space-md); }

::selection { background: var(--color-surface-dark); color: var(--color-on-dark); }

:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

/* tokens.css already disables animation/transition duration under
   reduced-motion; this adds the one thing it doesn't cover. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}