/* assets/rn/base.css — rules every page needs (1-foundation-cascade-tokens-base).
   Unlayered, after tokens.css: it beats the legacy layer at any specificity, so selectors stay low (single class or
   :where()) and nothing here uses !important. Page files (assets/rn/pages/*.css) load later and win on ties.
   The hero is excluded from every type, wrap and colour rule here: nothing matches inside .lux-hero except the
   frozen CTA metrics (section 5), which only restate today's values.

   1. Tone scopes the tokens leave out   2. Focus, skip link, anchor clearance   3. Type roles
   4. Wrapping   5. Hero freeze   6. Emphasis and the red rule   7. Hover fills   8. Label floor
   9. Glows, gradients and retired colours   10. Reflow guards   11. Utilities */

/* 1. Tone scopes ─────────────────────────────────────────────────────────────────────────────────────────────
   (The red-band scope went in 2-shared-components: no section sits on red any more; closing bands are rn-bands.) */

/* The Insights article view (blog.html?post=) sits on the ink page, but it kept the paper colours: body text
   1.4:1, headings 1.0:1, header and source notes 3.6:1. Until 3-blog-insights rebuilds the view it takes the ink text
   colours. Links are underlined paper text, not red: red means a finding. */
.article-body,
:where(.article-header, .article-sources) p {
  color: var(--rn-muted-on-ink);
}

:where(.article-body) :is(h2, h3, strong, .lede, a) {
  color: var(--rn-text-on-ink);
}

/* 2. Focus ───────────────────────────────────────────────────────────────────────────────────────────────────
   Two-tone ring: an ink outline outside a paper band. One of the two clears 3:1 on ink, paper, colour or imagery. */
:focus-visible {
  outline: var(--rn-focus-outline);
  outline-offset: var(--rn-focus-offset);
  box-shadow: var(--rn-focus-band);
}

/* The dock and its menu are ink pills: an inset paper outline reads there without leaving the pill. */
:is(.mobile-bottom-nav__scroller > a, .mobile-more-trigger, .mobile-more-menu a):focus-visible {
  outline: 2px solid var(--rn-paper);
  outline-offset: -4px;
  box-shadow: none;
}

/* A step heading takes focus programmatically after "Next"; it is not a control. */
.brief-step h2[tabindex="-1"]:focus {
  outline: 0;
  box-shadow: none;
}

.skip-link {
  z-index: var(--rn-z-skip);
  display: inline-flex;
  align-items: center;
  min-height: var(--rn-target);
  padding: 0 18px;
  border-radius: var(--rn-radius-pill);
  background: var(--rn-paper);
  color: var(--rn-ink);
  font: 600 var(--rn-fs-small)/1 var(--rn-font-body);
  text-decoration: none;
}

/* Anchors and in-page jumps land below the fixed header. The page scrollbar is a quiet grey on ink: red means a
   finding, and the legacy thumb was the red (4-consolidation). */
html {
  scroll-padding-top: var(--rn-header-clearance);
  scrollbar-color: var(--rn-muted-on-paper) var(--rn-ink);
}

/* 3. Type roles ──────────────────────────────────────────────────────────────────────────────────────────────
   Bricolage 700 is for the H1, the H2s and one number per view. Exactly two H2 sizes: section and compact.
   H3s and card titles are Manrope 700. The home H1 keeps the size the hero sets. */
:is(.audit-hero, .studio-inner-hero, .studio-prototype-hero, .studio-blog-hero, .studio-alchemy-hero, .studio-brief-hero, .legal-hero, .rn-404) h1 {
  font-family: var(--rn-font-display);
  font-size: var(--rn-fs-display);
  font-weight: var(--rn-weight-display);
  line-height: var(--rn-lh-display);
  letter-spacing: var(--rn-track-display);
}

/* Section H2 role: every H2 in main (the hero has none). */
:where(main) h2 {
  font-family: var(--rn-font-display);
  font-size: var(--rn-fs-h2);
  font-weight: var(--rn-weight-display);
  line-height: var(--rn-lh-heading);
  letter-spacing: var(--rn-track-display);
}

/* Compact H2 role: only inside cards, forms and strips, the catalogue groups and the blog index. */
:where(.brief-step, .studio-journal-heading, .studio-blog-index, .prototype-audit-crosslink, .work-audit-cta, .studio-more-work, .studio-prototype-band, .studio-services, .studio-contact-copy, .studio-prototype-group, .article-body) h2 {
  font-size: var(--rn-fs-h2-sm);
}

/* H3 role. */
:where(main section:not(.lux-hero)) h3,
:where(.article-body) h3 {
  font-family: var(--rn-font-body);
  font-size: var(--rn-fs-h3);
  font-weight: var(--rn-weight-title);
  line-height: var(--rn-lh-title);
  letter-spacing: var(--rn-track-title);
}

/* Card titles. The legal section titles and the two feature cards keep the H3 size. */
:where(.lux-work-card, .lux-prototype-card, .lux-capability-card, .studio-project-card, .studio-prototype-object, .blog-card) h3 {
  font-family: var(--rn-font-body);
  font-size: var(--rn-fs-title);
  font-weight: var(--rn-weight-title);
  line-height: var(--rn-lh-title);
  letter-spacing: var(--rn-track-title);
}

:where(.blog-feature-card) h3,
:where(.legal-frame) h2 {
  font-family: var(--rn-font-body);
  font-size: var(--rn-fs-h3);
  font-weight: var(--rn-weight-title);
  line-height: var(--rn-lh-title);
  letter-spacing: var(--rn-track-title);
}

/* The home feature card (until 3-home retires the capabilities grid) keeps a compact-H2-sized title. */
:where(.lux-capability-feature) h3 {
  font-family: var(--rn-font-body);
  font-size: var(--rn-fs-h2-sm);
  font-weight: var(--rn-weight-title);
  line-height: var(--rn-lh-title);
  letter-spacing: var(--rn-track-title);
}

/* IBM Plex Mono is loaded at 400 and 500 only; 600/700 requests rendered 500 anyway (font-synthesis: none). */
:is(.studio-alchemy-reel b, .studio-alchemy-formula strong, .studio-brief-object-top b, .blog-read-cue, .blog-read-cue i, .blog-art-title, .mobile-nav-icon, .mobile-more-menu__label) {
  font-weight: 500;
}

/* 4. Wrapping: balanced headings and no orphans, never in the hero (its breaks are part of the design). */
main section:not(.lux-hero) :is(h1, h2, h3, blockquote),
.rn-404 h1 {
  text-wrap: balance;
}

main section:not(.lux-hero) p {
  text-wrap: pretty;
}

/* A heading written as "Statement.<br><em>Second line.</em>" sets its second line as a block, so balance wraps each
   part on its own ("when you can use / them." became "when you / can use them."). A kinetic heading's word masks are
   not the second line. */
:where(main section:not(.lux-hero)) h2 > br + :is(em, span):not(.rn-k-w, .rn-k-block, .rn-sr) {
  display: block;
}

:where(main section:not(.lux-hero)) h2 > br:has(+ :is(em, span):not(.rn-k-w, .rn-k-block, .rn-sr)) {
  display: none;
}

/* 5. Hero freeze ─────────────────────────────────────────────────────────────────────────────────────────────
   ran-morph.js:391-393 sizes its pill from this CTA's offsetWidth, font size, weight, column gap and padding.
   These restate the values it has always rendered at (weight 700: lux.css declared 750, which the static Manrope
   rendered at 700, until 4-consolidation removed it), so no font or legacy change can move the hero. Never delete. */
.lux-hero-copy .lux-button {
  min-height: var(--rn-btn-h);
  padding-inline: var(--rn-btn-pad);
  gap: var(--rn-btn-gap);
  font-size: var(--rn-btn-fs);
  font-weight: var(--rn-btn-weight);
}

.nav-action {
  font-weight: 700;
}

/* 6. Emphasis and the red rule ───────────────────────────────────────────────────────────────────────────────
   Red means a finding or attention: the audit-family H1 emphasis (as the hero's own H1), the 'Now' priority,
   form errors and the footer spectrum. Everything else marks in the text colour or the family signal. */
:is(.studio-inner-hero, .studio-prototype-hero, .studio-blog-hero, .studio-alchemy-hero) h1 em {
  color: var(--rn-signal, inherit);
}

body:is(.studio-audits-page, .studio-approach-page, .studio-brief-page) :is(.audit-hero, .studio-inner-hero, .studio-brief-hero) h1 em {
  color: var(--rn-red);
}

/* Direct emphasis only (a kinetic heading's word masks and highlight blocks are not emphasis; words inside an
   emphasis inherit its colour). */
:where(main section:not(.lux-hero)) h2 > :is(em, span):not(.rn-k-w, .rn-k-block, .rn-sr) {
  color: var(--rn-muted);
}

/* Eyebrow dots: the family signal, or the text colour in the audit family. No glow. */
.studio-kicker::before,
.kicker::before,
main section:not(.lux-hero) .lux-eyebrow > span {
  background: var(--rn-signal, var(--rn-text));
  box-shadow: none;
}

/* A signal dot on paper needs an ink edge (lime or yellow alone on paper is about 1:1). */
:is(.studio-work-page, .studio-prototypes-page, .studio-alchemy-page, .studio-blog-page) [data-tone=light] :is(.studio-kicker, .kicker)::before,
:is(.studio-work-page, .studio-prototypes-page, .studio-alchemy-page, .studio-blog-page) [data-tone=light] .lux-eyebrow > span {
  box-shadow: var(--rn-signal-edge);
}

/* Index numbers and labels outside rn-example read as muted text. */
:is(.audit-coverage-grid, .audit-process-grid, .audit-audience-list, .approach-audit-grid, .studio-making-grid) article > span,
:is(.lux-work-separation, .work-separation-note) > span {
  color: var(--rn-muted);
}

/* Marks on ink in the AI and writing families take the signal. */
:is(.studio-alchemy-row, .studio-alchemy-formula) > b {
  color: var(--rn-signal, inherit);
}

/* Rules and small marks that were red decoration. */
:is(.audit-confidentiality, .approach-audit-privacy, .studio-brief-insight) {
  border-left-color: var(--rn-muted);
}

::selection {
  background: var(--rn-lime);
  color: var(--rn-ink);
}

/* 7. Hover fills: paper, white or ink-soft. Never a red or signal fill. ──────────────────────────────────── */
.lux-button-light:hover,
.studio-button-light:is(:hover, :focus-visible),
.nav-action:is(:hover, :focus-visible) {
  border-color: var(--rn-paper);
  background: var(--rn-paper);
  color: var(--rn-ink);
}

.studio-button:not(.studio-button-light, .studio-button-ghost):is(:hover, :focus-visible) {
  border-color: var(--rn-ring);
  background: var(--rn-ink-soft);
  color: var(--rn-paper);
}

.studio-text-link:is(:hover, :focus-visible), .legal-index a:is(:hover, :focus-visible), .site-footer :is(nav, .footer-legal) a:hover {
  border-color: currentColor;
  color: var(--rn-muted);
}

/* 8. Label floor: 11px mono labels (the hero stage, the dock and the JS blog art are out of scope here). ─── */
.blog-meta,
.footer-legal > span,
.footer-legal a,
:is(.audit-coverage-grid, .audit-process-grid, .audit-audience-list, .approach-audit-grid) article > span,
:is(.studio-speed-label, .studio-speed-value) > span,
.brief-progress > span {
  font-size: var(--rn-fs-label);
  letter-spacing: var(--rn-track-label);
}

/* 9. Glows, gradients and retired colours ───────────────────────────────────────────────────────────────── */
main section:not(.lux-hero) .glass {
  box-shadow: none;
}

/* 10. Reflow guards: layout the new type sizes need until their components are rebuilt ───────────────────
   Home's closing band guards went with its red panel in 2-shared-components (it is an rn-band now).
   AI Alchemy's hero (3-alchemy rebuilds it): at the display size the H1 needs a wider copy column to set in three
   lines ("AI moves fast. / Good judgement / makes it useful."), with the CTAs above the fold on a 768px laptop. The
   longest line is 6.9em, so the copy column never drops below 7.1 display ems (a classic scrollbar can take 17px).
   Below 1280 two columns cannot hold it beside a useful rune stage, so the hero stacks as it does on tablets. */

/* 11. Utilities ─────────────────────────────────────────────────────────────────────────────────────────── */
.rn-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}