/* assets/rn/components.css — the shared parts (2-shared-components). Linked after chrome.css on the 10 core pages and
   404.html. Stage-3 pages are assembled from these rather than restyled.

   New markup uses the rn-* classes. Today's markup is styled through :where() aliases (zero specificity), which still
   beat the legacy layer because this file is unlayered; base.css keeps the emphasis colours and the red rule. Nothing
   here matches inside the hero (.lux-hero): since hero-centrepiece the hero's window, proof row and caption are styled
   by assets/rn/pages/home-hero.css.

   Motion hooks are the toolkit's data attributes (assets/rn/motion.js, overhaul/MOTION.md); every component names its
   own below. Every component is Japanese-ready: tracking and line-height come from tokens that section 0 re-sets for
   :lang(ja), labels are never fixed-width, and long strings wrap.

    0. Tone tokens, Japanese readiness     6. rn-chip / rn-filter        12. rn-ticker
    1. rn-eyebrow                          7. rn-stat                    13. rn-band (the closing band)
    2. rn-btn                              8. rn-example                 14. No glass
    3. rn-link                             9. rn-faq                     15. rn-motion-toggle placements
    4. rn-card                            10. rn-timeline + On camera    16. 404
    5. rn-media                           11. rn-feature                 17. Reduced motion, pause, forced colours      */

/* 0. Tone tokens ────────────────────────────────────────────────────────────────────────────────────────────────
   A card, chip or stat strip takes its surface from the tone it sits on: ink-soft with the ring on ink, paper-hi with
   a hairline on paper. Buttons read the same tone for their primary fill and its hover. */
:root,
[data-tone=dark],
.rn-surface-ink,
.site-footer,
.mobile-bottom-nav {
  --rn-card-bg: var(--rn-ink-soft);
  --rn-card-ring: var(--rn-ring);
  --rn-card-ring-hover: var(--rn-muted-on-ink);
  --rn-btn-hover: var(--rn-paper-hi);
}

[data-tone=light],
.rn-surface-paper,
body.studio-legal-page {
  --rn-card-bg: var(--rn-paper-hi);
  --rn-card-ring: rgba(9, 11, 13, 0.12);
  --rn-card-ring-hover: var(--rn-line-strong-on-paper);
  --rn-btn-hover: var(--rn-ink-soft);
}

/* Japanese: no tracking on kana and kanji (it breaks the rhythm of CJK text), taller line boxes, no negative display
   tracking. 3-ja adds the Japanese font stacks and phrase breaking in ja.css; the components only read these. */
:lang(ja) {
  --rn-track-label: var(--rn-track-ja);
  --rn-track-label-wide: var(--rn-track-ja);
  --rn-track-display: 0;
  --rn-track-title: 0;
  --rn-lh-display: var(--rn-lh-heading-ja);
  --rn-lh-heading: var(--rn-lh-heading-ja);
  --rn-lh-title: 1.4;
  --rn-lh-lead: 1.7;
  --rn-lh-body: var(--rn-lh-body-ja);
}

/* 1. rn-eyebrow ─────────────────────────────────────────────────────────────────────────────────────────────────
   The label above a section heading: Plex Mono 11px uppercase in the muted colour, after a 6px dot in the family
   signal (the text colour in the audit family). Never red, no glow (base.css colours the dot). */
.rn-eyebrow,
:where(.studio-kicker, .kicker, .lux-eyebrow):not(.lux-hero *) {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.3 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.rn-eyebrow::before,
:where(.studio-kicker, .kicker):not(.lux-hero *)::before,
:where(.lux-eyebrow):not(.lux-hero *) > span {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
}

.rn-eyebrow::before {
  background: var(--rn-signal, var(--rn-text));
}

/* A signal dot on paper needs its ink edge (lime or yellow alone on paper is about 1:1; tokens.css, SIGNAL RULES).
   base.css gives it to the legacy kickers. Only the signal families (tokens.css) have a signal dot; the ink cards inside
   a paper section keep a plain one. */
:is(.studio-work-page, .studio-prototypes-page, .studio-alchemy-page, .studio-blog-page, .studio-books-page, .lux-home :is(.lux-ticker, .rn-ticker, .lux-work, .lux-prototypes, .lux-method)) [data-tone=light] .rn-eyebrow:not(.rn-feature *, .rn-band *, .rn-surface-ink *)::before,
.lux-home [data-tone=light]:is(.lux-work, .lux-prototypes, .lux-method) .rn-eyebrow:not(.rn-feature *, .rn-band *, .rn-surface-ink *)::before {
  box-shadow: var(--rn-signal-edge);
}

/* 2. rn-btn ─────────────────────────────────────────────────────────────────────────────────────────────────────
   A pill at the hero CTA's metrics (tokens.css; the hero's own CTA is frozen in base.css and is not touched here).
   Primary is the text colour of its tone (paper on ink, ink on paper) and goes white or ink-soft on hover; ghost is a
   ring that takes the text colour on hover. The trailing arrow nudges 3px. Hover and focus never turn red, lime or
   yellow and never match the surface behind. Lift and press come from motion.css 6. */
.rn-btn,
:where(.lux-button, .studio-button):not(.lux-hero *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rn-btn-gap);
  min-height: var(--rn-btn-h);
  padding: 0 var(--rn-btn-pad);
  border: 1px solid transparent;
  border-radius: var(--rn-radius-pill);
  font: var(--rn-btn-weight) var(--rn-btn-fs)/1.1 var(--rn-font-body);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.rn-btn.is-compact {
  min-height: var(--rn-btn-h-compact);
}

/* Primary: the tone's text colour as the fill. */
.rn-btn-primary,
:where(.lux-button-light, .lux-button-accent, .studio-button-light, .lux-button-dark):not(.lux-hero *),
:where(.studio-button):not(.studio-button-light, .studio-button-ghost, .lux-hero *) {
  border-color: var(--rn-text);
  background: var(--rn-text);
  color: var(--rn-on-text);
}

.rn-btn-primary:is(:hover, :focus-visible),
:where(.lux-button-light, .lux-button-accent, .studio-button-light, .lux-button-dark):not(.lux-hero *):is(:hover, :focus-visible),
:where(.studio-button):not(.studio-button-light, .studio-button-ghost, .lux-hero *):is(:hover, :focus-visible) {
  border-color: var(--rn-btn-hover);
  background: var(--rn-btn-hover);
  color: var(--rn-on-text);
}

/* The legacy light and dark variants name their surface explicitly; they keep it whatever the tone says. */
:where(.lux-button-light, .studio-button-light):not(.lux-hero *) {
  --rn-text: var(--rn-paper);
  --rn-on-text: var(--rn-ink);
  --rn-btn-hover: var(--rn-paper-hi);
}

:where(.lux-button-dark):not(.lux-hero *) {
  --rn-text: var(--rn-ink);
  --rn-on-text: var(--rn-paper);
  --rn-btn-hover: var(--rn-ink-soft);
}

/* Ghost: a ring. */
.rn-btn-ghost,
:where(.studio-button-ghost, .lux-button:not(.lux-button-light, .lux-button-accent, .lux-button-dark)):not(.lux-hero *) {
  border-color: var(--rn-card-ring);
  background: transparent;
  color: var(--rn-text);
}

.rn-btn-ghost:is(:hover, :focus-visible),
:where(.studio-button-ghost, .lux-button:not(.lux-button-light, .lux-button-accent, .lux-button-dark)):not(.lux-hero *):is(:hover, :focus-visible) {
  border-color: currentColor;
  background: transparent;
  color: var(--rn-text);
}

.rn-btn > [aria-hidden="true"],
:where(.lux-button, .studio-button):not(.lux-hero *) > span[aria-hidden="true"] {
  display: inline-block;
  transition: transform var(--rn-dur-snap) var(--rn-ease-snap);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rn-btn:hover > [aria-hidden="true"],
  :where(.lux-button, .studio-button):not(.lux-hero *):hover > span[aria-hidden="true"] {
    transform: translateX(3px);
  }
}

.rn-btn:disabled,
.rn-btn[aria-disabled="true"] {
  cursor: default;
  opacity: 0.5;
}

.rn-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rn-space-3) var(--rn-space-5);
}

/* 3. rn-link ────────────────────────────────────────────────────────────────────────────────────────────────────
   Text in its own colour with a 1px underline at 4px, 2px on hover. Standalone links are 44px tall. A link that opens
   a new tab shows ↗ and carries sr-only "(opens in a new tab)" in the markup; no aria-label replaces the words. */
.rn-link,
:where(.lux-link, .studio-text-link):not(.lux-hero *) {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--rn-target);
  padding: 0;
  border: 0;
  font: 700 var(--rn-fs-small)/1.2 var(--rn-font-body);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness var(--rn-dur-snap) var(--rn-ease-snap);
}

/* The colour is the tone's text colour; .lux-link-light names ink explicitly. Hover only thickens the line (the legacy
   hovers turned links red). */
.rn-link,
:where(.lux-link, .studio-text-link):not(.lux-hero *),
:where(.lux-link, .studio-text-link):not(.lux-hero *):is(:hover, :focus-visible) {
  color: var(--rn-text);
}

:where(.lux-link-light):not(.lux-hero *),
:where(.lux-link-light):not(.lux-hero *):is(:hover, :focus-visible) {
  color: var(--rn-text-on-ink);
}

.rn-link:is(:hover, :focus-visible),
:where(.lux-link, .studio-text-link):not(.lux-hero *):is(:hover, :focus-visible) {
  border-color: transparent;
  text-decoration-thickness: 2px;
}

.rn-link-inline,
:where(main p) > a:not([class]) {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

:where(main p) > a:not([class]):hover {
  text-decoration-thickness: 2px;
}

/* 4. rn-card ────────────────────────────────────────────────────────────────────────────────────────────────────
   One surface: paper-hi with a hairline on paper, ink-soft with the ring on ink; radius 20 and the clip on the card
   itself (never split between the card and its link); no shadow at rest. Hover (where a pointer can hover) turns
   the ring up and lifts the card 2px on the UI spring. Because the card clips, focus is drawn on the card. */
.rn-card,
:where(.lux-work-card, .lux-prototype-card, .lux-capability-card, .home-audit-grid > article, .studio-project-card, .studio-prototype-object, .blog-card, .blog-feature-card, .audit-coverage-grid > article, .audit-process-grid > article, .approach-audit-grid > article, .studio-making-grid > article, .studio-learning-sticky, .studio-learning-copy, .studio-brief-form, .studio-brief-object) {
  overflow: hidden;
  border: 1px solid var(--rn-card-ring);
  border-radius: var(--rn-radius-card);
  background-color: var(--rn-card-bg);
  box-shadow: none;
  transition-property: translate, scale, border-color, background-color, color;
  transition-duration: var(--rn-dur-ui);
  transition-timing-function: var(--rn-ease-ui);
}

.rn-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--rn-text);
}

.rn-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--rn-space-2);
  padding: var(--rn-space-5);
}

.rn-card-kicker {
  margin: 0;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.3 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.rn-card-title {
  margin: 0;
  font: var(--rn-weight-title) var(--rn-fs-title)/var(--rn-lh-title) var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
  overflow-wrap: break-word;
}

.rn-card-body > p:not(.rn-card-kicker) {
  margin: 0;
  color: var(--rn-muted);
}

.rn-card-cue {
  margin-top: auto;
  padding-top: var(--rn-space-3);
}

/* A row of cards: equal heights. */
.rn-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items: stretch;
  gap: var(--rn-space-4);
}

/* The brief: the form is a paper card, the route readout an ink card, and the insight note loses its 5px stripe. */
:where(.studio-brief-object) {
  --rn-card-ring: var(--rn-ring);
  --rn-card-bg: var(--rn-ink-soft);
}

/* The surface moves from the inner link to the card (work, prototypes, home work cards). */
:where(.lux-work-card, .studio-project-card, .studio-prototype-object, .blog-card, .blog-feature-card) > a {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

:where(.lux-work-card) > a {
  overflow: visible;
}

:where(.studio-project-card.has-project-links) > a {
  border-radius: 0;
}

:where(.studio-project-media, .studio-prototype-object-media) {
  border-radius: 0;
}

/* Families on ink keep the ink ring whatever their section says. */
:where(.lux-work-card, .lux-prototype-card) {
  --rn-card-bg: var(--rn-ink-soft);
  --rn-card-ring: var(--rn-ring);
  --rn-card-ring-hover: var(--rn-muted-on-ink);
}

/* The hairline tables on Audits, Approach and home become rows of cards with a 16px gutter. */
:where(.home-audit-grid, .audit-coverage-grid, .audit-process-grid, .approach-audit-grid, .studio-making-grid) {
  gap: var(--rn-space-4);
  border: 0;
}

:where(.home-audit-grid, .audit-coverage-grid, .audit-process-grid, .approach-audit-grid, .studio-making-grid) > article,
:where(.audit-process-grid, .approach-audit-grid, .studio-making-grid) > article + article {
  padding: clamp(24px, 2.6vw, 36px);
}

/* The capability cards: paper cards; the feature is the one ink card (it was a red slab). Cards 02-04 keep their
   family accent bars (blue, lime, yellow) as 6px marks with the ink signal edge, since lime or yellow alone on paper
   is about 1:1 (tokens.css, SIGNAL RULES); the feature and card 05 (it was red) take the text colour. 3-home removes
   this grid from home. */
:where(.lux-capability-card) {
  background-color: var(--rn-paper-hi);
  color: var(--rn-ink);
  --card-accent: currentColor;
}

:where(.lux-capability-card):nth-child(2) {
  --card-accent: var(--rn-blue);
}

:where(.lux-capability-card):nth-child(3) {
  --card-accent: var(--rn-lime);
}

:where(.lux-capability-card):nth-child(4) {
  --card-accent: var(--rn-yellow);
}

:where(.lux-capability-card):is(:nth-child(2), :nth-child(3), :nth-child(4))::before {
  height: 6px;
  box-shadow: var(--rn-signal-edge);
}

:where(.lux-capability-feature) {
  --rn-card-ring: var(--rn-ring);
  --rn-card-ring-hover: var(--rn-muted-on-ink);
  --rn-text: var(--rn-text-on-ink);
  --rn-muted: var(--rn-muted-on-ink);
  background-color: var(--rn-ink);
  color: var(--rn-text-on-ink);
}

:where(.lux-capability-card):hover,
:where(.lux-capability-feature):hover {
  background-color: var(--rn-paper-hi);
  color: var(--rn-ink);
}

:where(.lux-capability-feature):hover {
  background-color: var(--rn-ink);
  color: var(--rn-text-on-ink);
}

:where(.lux-capability-card) > span,
:where(.lux-capability-card:not(.lux-capability-feature)) :is(p, small),
:where(.lux-capability-card:not(.lux-capability-feature)):hover p {
  color: var(--rn-muted-on-paper);
}

:where(.lux-capability-feature) :is(p, small),
:where(.lux-capability-feature) > span,
:where(.lux-capability-feature):hover p {
  color: var(--rn-muted-on-ink);
}

/* The muted token is the de-emphasis: lux.css's 0.62 opacity on top of it left the feature's label at 4.17:1. */
:where(.lux-capability-card) small {
  opacity: 1;
}

/* Home work cards: the glass caption is solid now (section 14), so the gradient scrim under it goes. */
:where(.lux-work-media, .lux-prototype-card)::after {
  content: none;
}

:where(.lux-work-card):hover :where(.lux-work-meta) {
  transform: none;
}

:where(.lux-prototype-card) {
  translate: 0 var(--lux-rail-y, 0);
  transform: none;
}

:where(.lux-prototype-card):hover > :is(img, video) {
  filter: none;
  transform: scale(1.02);
}

@media (hover: hover) {
  .rn-card:hover,
  :where(.lux-work-card, .lux-prototype-card, .lux-capability-card, .home-audit-grid > article, .studio-project-card, .studio-prototype-object, .blog-card, .blog-feature-card, .audit-coverage-grid > article, .audit-process-grid > article, .approach-audit-grid > article, .studio-making-grid > article):hover {
    border-color: var(--rn-card-ring-hover);
    background-color: var(--rn-card-bg);
  }

  :where(.home-audit-grid > article, .audit-coverage-grid > article):hover {
    background-color: var(--rn-card-bg);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rn-card:hover,
  :is(.lux-work-card, .lux-capability-card, .home-audit-grid > article, .studio-project-card, .studio-prototype-object, .blog-card, .blog-feature-card, .audit-coverage-grid > article, .audit-process-grid > article, .approach-audit-grid > article, .studio-making-grid > article, [data-rn-lift]):hover {
    translate: 0 -2px;
    transform: none;
  }

  :where(.lux-prototype-card):hover {
    translate: 0 calc(var(--lux-rail-y, 0px) - 2px);
  }

  .rn-card:hover .rn-media > :is(img, video) {
    scale: 1.02;
  }
}

/* Focus on the card (it clips its own link's ring). */
.rn-card:has(> a:focus-visible),
:where(.lux-work-card, .home-audit-grid > article, .studio-project-card, .studio-prototype-object, .blog-card, .blog-feature-card):has(> a:focus-visible) {
  outline: var(--rn-focus-outline);
  outline-offset: var(--rn-focus-offset);
  box-shadow: var(--rn-focus-band);
}

.rn-card > a:focus-visible,
:where(.lux-work-card, .studio-project-card, .studio-prototype-object, .blog-card, .blog-feature-card) > a:focus-visible {
  outline: 0;
  box-shadow: none;
}

/* Where :has() is missing, the ring goes inside the card instead of being clipped. */
@supports not selector(:has(a)) {
  :where(.lux-work-card, .studio-project-card, .studio-prototype-object, .blog-card, .blog-feature-card) > a:focus-visible {
    outline: var(--rn-focus-outline);
    outline-offset: -4px;
  }
}

/* A card whose whole surface is its link. */
.rn-card-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

/* 5. rn-media ───────────────────────────────────────────────────────────────────────────────────────────────────
   A 16:10 frame, cover-fitted, no scrims and no words over the artwork; at most one status chip, top left.
   Square inside a card, 12px standalone. Video is muted with a poster and its own pause toggle (section 15). */
.rn-media {
  position: relative;
  aspect-ratio: 16 / 10;
  margin: 0;
  overflow: hidden;
  border-radius: var(--rn-radius-media);
  background: var(--rn-ink-soft);
}

.rn-card .rn-media {
  border-radius: 0;
}

.rn-media > :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--rn-media-pos, 50% 50%);
  transition: scale var(--rn-dur-ui) var(--rn-ease-ui);
}

/* A chip on artwork is solid ink with the ring and paper text: a see-through chip is unreadable over a picture. */
.rn-media > .rn-chip {
  position: absolute;
  z-index: 1;
  top: var(--rn-space-4);
  left: var(--rn-space-4);
  border-color: var(--rn-ring);
  background: var(--rn-ink);
  color: var(--rn-text-on-ink);
}

/* rn-feature media and any frame marked data-rn-reveal="media": the frame fades in once and the picture settles from
   104% to 100% on the CAM spring, like the hero's camera coming to rest. Neither runs under reduced motion (this file
   loads after motion.css, so its reduced reset would otherwise lose to the fade) or the site pause. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="paused"]) [data-rn-reveal="media"].is-visible:not(.rn-shown) > :is(img, video, picture) {
    animation: rn-media-settle var(--rn-dur-cam) var(--rn-ease-critical) backwards;
    animation-delay: calc(min(var(--reveal-i, 0), 5) * var(--rn-stagger) + var(--rn-delay, 0ms));
  }

  html.js [data-rn-reveal="media"].is-visible:not(.lux-hero *) {
    animation: rn-reveal-fade var(--rn-dur-fade) var(--rn-ease-critical) backwards;
    animation-delay: calc(min(var(--reveal-i, 0), 5) * var(--rn-stagger) + var(--rn-delay, 0ms));
  }
}

@keyframes rn-media-settle {
  from {
    scale: 1.04;
  }
}

/* 6. rn-chip / rn-filter ───────────────────────────────────────────────────────────────────────────────────────
   A ringed pill: Manrope 600 for filters and choices (44px), Plex Mono 11px for status (36px, a 6px signal dot, no
   pulse). Selected is the tone's text colour as a fill (aria-pressed / aria-checked / aria-current); a focused chip
   that is not selected keeps its fill and shows only the focus ring. Filters are never sticky and never glass. */
.rn-chip,
:where(.studio-filters) > button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--rn-card-ring);
  border-radius: var(--rn-radius-pill);
  background: transparent;
  color: var(--rn-text);
  font: 600 0.8rem/1.1 var(--rn-font-body);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--rn-dur-snap) var(--rn-ease-snap), border-color var(--rn-dur-snap) var(--rn-ease-snap), color var(--rn-dur-snap) var(--rn-ease-snap);
}

:is(button, a).rn-chip,
.rn-filter > :is(button, a),
:where(.studio-filters) > button {
  min-height: var(--rn-target);
  cursor: pointer;
}

/* Page chips that keep their own look until the stage-3 page passes (Work's card links, Approach's services, the
   brief's type choices) were 38px: they take the 44px target now, their text centred in it. */
:where(.studio-project-links > a, .studio-services-list > a, .studio-brief-types > button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--rn-target);
}

.rn-chip:is([aria-pressed="true"], [aria-checked="true"], [aria-current]),
:where(.studio-filters) > button:is([aria-pressed="true"], .is-active) {
  border-color: var(--rn-text);
  background: var(--rn-text);
  color: var(--rn-on-text);
}

@media (hover: hover) {
  .rn-chip:is(button, a):not([aria-pressed="true"], [aria-checked="true"], [aria-current]):hover,
  :where(.studio-filters) > button:not([aria-pressed="true"], .is-active):hover {
    border-color: var(--rn-text);
    background: transparent;
    color: var(--rn-text);
  }
}

.rn-chip.is-status,
:where(.lux-live, .studio-prototype-live) {
  min-height: 0;
  padding: 7px 12px;
  font: 500 var(--rn-fs-label)/1 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.rn-chip.is-status::before {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rn-signal, var(--rn-text));
  content: "";
}

.rn-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rn-space-2);
}

.rn-filter-count {
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

/* 7. rn-stat ────────────────────────────────────────────────────────────────────────────────────────────────────
   A proof strip as a <dl>: one ringed container, 1px inner dividers, the figure in Bricolage 700 (Plex Mono in
   .is-compact) above its label (the <dt> comes first in the source for screen readers). Motion: data-rn-reel on each
   <dd> rolls the digits in, 1/8 beat apart. Two across (or one column for three) at 900px and below. The position
   tests sit in :where(), so a page can lay out its own strip with one class and a child (work.css's JANBARI.TV
   figures stay three across down to 641px). */
.rn-stat {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rn-card-ring);
  border-radius: var(--rn-radius-card);
  background: var(--rn-card-bg);
  color: var(--rn-text);
}

.rn-stat > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--rn-space-2);
  min-width: 0;
  padding: clamp(20px, 2.4vw, 32px);
  border-left: 1px solid var(--rn-card-ring);
}

.rn-stat > div:where(:first-child) {
  border-left: 0;
}

.rn-stat dd {
  margin: 0;
  font: var(--rn-weight-display) var(--rn-fs-stat)/1 var(--rn-font-display);
  letter-spacing: var(--rn-track-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rn-stat.is-compact dd {
  font: 500 var(--rn-fs-h3)/1 var(--rn-font-mono);
  letter-spacing: 0;
}

.rn-stat dt {
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.35 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.rn-stat-note {
  max-width: var(--rn-measure);
  margin: var(--rn-space-3) 0 0;
  color: var(--rn-muted);
  font: 500 0.75rem/1.5 var(--rn-font-body);
}

@media (max-width: 900px) {
  .rn-stat {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rn-stat > div:where(:nth-child(odd)) {
    border-left: 0;
  }

  .rn-stat > div:where(:nth-child(n + 3)) {
    border-top: 1px solid var(--rn-card-ring);
  }

  .rn-stat:where(:has(> div:nth-child(3):last-child)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .rn-stat:where(:has(> div:nth-child(3):last-child)) > div {
    border-left: 0;
  }

  .rn-stat:where(:has(> div:nth-child(3):last-child)) > div + div {
    border-top: 1px solid var(--rn-card-ring);
  }
}

/* The audits proof strip joins the stat surface (its figures and labels stay as they are until 3-audits-tom). */
:where(.audit-proof) {
  overflow: hidden;
  border: 1px solid var(--rn-card-ring);
  border-radius: var(--rn-radius-card);
  background: var(--rn-card-bg);
}

/* 8. rn-example ─────────────────────────────────────────────────────────────────────────────────────────────────
   The honesty label and the readout. The tag is a ringed mono pill ("Example"; 例 on /ja/). The readout is a
   <figure>: a paper card on ink or an ink card on paper, captioned "Example · illustrative account, not a client",
   rows split by hairlines. This is where red lives: only the Now chip is red, ink on red; Next and Later are muted.
   Motion: data-rn-stagger-rows on the list lands the rows one after another, like the hero's findings. */
.rn-example-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid currentColor;
  border-radius: var(--rn-radius-pill);
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.rn-example {
  --rn-text: var(--rn-text-on-paper);
  --rn-muted: var(--rn-muted-on-paper);
  --rn-line: var(--rn-line-on-paper);
  --rn-on-text: var(--rn-paper);
  margin: 0;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid rgba(9, 11, 13, 0.12);
  border-radius: var(--rn-radius-card);
  background: var(--rn-paper);
  color: var(--rn-text);
}

:where([data-tone=light], .rn-surface-paper) .rn-example {
  --rn-text: var(--rn-text-on-ink);
  --rn-muted: var(--rn-muted-on-ink);
  --rn-line: var(--rn-line-on-ink);
  --rn-on-text: var(--rn-ink);
  border-color: var(--rn-ring);
  background: var(--rn-ink);
}

.rn-example > figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rn-space-2) var(--rn-space-3);
  margin: 0 0 var(--rn-space-4);
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.4 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.rn-readout {
  margin: 0;
  padding: 0;
  list-style: none;
  --rn-finding-gap: 12px;
}

.rn-readout > li {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--rn-space-3);
  padding: var(--rn-space-3) 0;
  border-top: 1px solid var(--rn-line);
}

.rn-readout > li:first-child {
  border-top: 0;
}

.rn-readout-finding {
  font: 600 var(--rn-fs-body)/1.35 var(--rn-font-body);
  overflow-wrap: break-word;
}

.rn-readout-area {
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.3 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-align: right;
  text-transform: uppercase;
}

.rn-prio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--rn-line);
  border-radius: var(--rn-radius-pill);
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.rn-prio[data-prio="now"] {
  border-color: var(--rn-red);
  background: var(--rn-red);
  color: var(--rn-on-red);
}

@media (max-width: 640px) {
  .rn-readout > li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .rn-readout-area {
    grid-column: 2;
    text-align: left;
  }
}

/* 9. rn-faq ─────────────────────────────────────────────────────────────────────────────────────────────────────
   Native details/summary rows on hairlines. The question in Manrope 700, at least 56px tall, with a plus that turns
   into a minus (the text colour, never red). The answer fades in; nothing animates height. */
.rn-faq > details,
:where(.audit-faq-list) > details {
  border-top: 1px solid var(--rn-line);
}

.rn-faq > details:last-child,
:where(.audit-faq-list) > details:last-child {
  border-bottom: 1px solid var(--rn-line);
}

.rn-faq summary,
:where(.audit-faq-list) summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: var(--rn-space-4) 44px var(--rn-space-4) 0;
  color: var(--rn-text);
  font: var(--rn-weight-title) var(--rn-fs-title)/var(--rn-lh-title) var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
  list-style: none;
  cursor: pointer;
}

.rn-faq summary::-webkit-details-marker,
:where(.audit-faq-list) summary::-webkit-details-marker {
  display: none;
}

.rn-faq summary::before,
.rn-faq summary::after,
:where(.audit-faq-list) summary::before,
:where(.audit-faq-list) summary::after {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: currentColor;
  content: "";
  transition: transform var(--rn-dur-snap) var(--rn-ease-snap);
}

.rn-faq summary::after,
:where(.audit-faq-list) summary::after {
  transform: rotate(90deg);
}

.rn-faq details[open] summary::after,
:where(.audit-faq-list) details[open] summary::after {
  transform: rotate(0deg);
}

.rn-faq details > :not(summary),
:where(.audit-faq-list) details > :not(summary) {
  max-width: var(--rn-measure);
  margin: 0 0 var(--rn-space-5);
  color: var(--rn-muted);
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="paused"]) :is(.rn-faq, .audit-faq-list) details[open] > :not(summary) {
    animation: rn-reveal-fade var(--rn-dur-fade) var(--rn-ease-critical);
  }
}

/* 10. rn-timeline and the On camera block ──────────────────────────────────────────────────────────────────────
   The career arc as an <ol>: years in Plex Mono, the role in Manrope 700, the place muted, on a 1px rule. Current
   roles carry a filled dot in the text colour (never red). Motion: the rule draws itself in the text colour as the
   list scrolls through the viewport (a scroll-driven animation: compositor-only, off under reduced motion and the
   pause, where the rule is simply drawn). At 640px and below the first four rows show and the rest sit in
   <details class="rn-timeline-more" open><summary>Full timeline</summary><ol class="rn-timeline">…</ol></details>,
   which site.js closes on phones (without it, everything shows). */
.rn-career {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: var(--rn-space-7) var(--rn-space-8);
}

.rn-timeline {
  --rn-tl-x: 5px;
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--rn-space-6);
  list-style: none;
}

.rn-timeline::before,
.rn-timeline::after {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: var(--rn-tl-x);
  width: 1px;
  background: var(--rn-line);
  content: "";
}

.rn-timeline::after {
  background: var(--rn-text);
  transform-origin: 50% 0;
}

.rn-timeline > li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(8.5em, 11em) minmax(0, 1fr);
  gap: var(--rn-space-1) var(--rn-space-5);
  padding: var(--rn-space-4) 0;
  border-top: 1px solid var(--rn-line);
}

.rn-timeline > li:first-child {
  border-top: 0;
}

.rn-timeline > li::before {
  position: absolute;
  z-index: 1;
  top: calc(var(--rn-space-4) + 0.35em);
  left: calc(-1 * var(--rn-space-6) + var(--rn-tl-x) - 3px);
  box-sizing: border-box;
  width: 7px;
  height: 7px;
  border: 1px solid var(--rn-muted);
  border-radius: 50%;
  background: var(--rn-card-bg);
  content: "";
}

.rn-timeline > li.is-current::before {
  border-color: var(--rn-text);
  background: var(--rn-text);
}

.rn-tl-years {
  grid-row: span 2;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.6 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.rn-tl-role {
  color: var(--rn-text);
  font: 700 var(--rn-fs-body-lg)/1.3 var(--rn-font-body);
  overflow-wrap: break-word;
}

.rn-tl-place {
  color: var(--rn-muted);
  font: 500 var(--rn-fs-small)/1.4 var(--rn-font-body);
}

.rn-timeline-more > summary {
  display: none;
}

/* The rule runs on unbroken from the first four rows into the rest. */
.rn-timeline:has(+ .rn-timeline-more[open])::before,
.rn-timeline:has(+ .rn-timeline-more[open])::after {
  bottom: 0;
}

.rn-timeline-more .rn-timeline::before,
.rn-timeline-more .rn-timeline::after {
  top: 0;
}

.rn-timeline-more > .rn-timeline > li:first-child {
  border-top: 1px solid var(--rn-line);
}

@media (max-width: 640px) {
  .rn-timeline > li {
    grid-template-columns: minmax(0, 1fr);
  }

  .rn-tl-years {
    grid-row: auto;
  }

  .rn-timeline-more > summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--rn-target);
    margin-left: var(--rn-space-6);
    color: var(--rn-text);
    font: 700 var(--rn-fs-small)/1 var(--rn-font-body);
    list-style: none;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }

  .rn-timeline-more > summary::-webkit-details-marker {
    display: none;
  }

  .rn-timeline-more[open] > summary {
    display: none;
  }
}

@media (max-width: 900px) {
  .rn-career {
    grid-template-columns: minmax(0, 1fr);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="paused"]) .rn-timeline::after {
      animation: rn-tl-draw linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 60%;
    }
  }
}

@keyframes rn-tl-draw {
  from {
    transform: scaleY(0);
  }
}

/* On camera: a ringed card of two facts, each a mono label, a title and a line, with its ↗ link. */
.rn-oncamera {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 var(--rn-space-5);
  border: 1px solid var(--rn-card-ring);
  border-radius: var(--rn-radius-card);
  background: var(--rn-card-bg);
  list-style: none;
}

.rn-oncamera > li,
.rn-oncamera > div {
  display: grid;
  gap: var(--rn-space-2);
  padding: var(--rn-space-5) 0;
  border-top: 1px solid var(--rn-card-ring);
}

.rn-oncamera > :first-child {
  border-top: 0;
}

.rn-oncamera h3,
.rn-oncamera strong {
  margin: 0;
  color: var(--rn-text);
  font: var(--rn-weight-title) var(--rn-fs-title)/var(--rn-lh-title) var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
}

.rn-oncamera p {
  margin: 0;
  color: var(--rn-muted);
}

/* 11. rn-feature ────────────────────────────────────────────────────────────────────────────────────────────────
   The one genuinely featured project: a full-width stage-ink block with the 88px grid, 7/5 between media and copy,
   stacked at 900px and below. Signal only on the eyebrow dot and one chip. Motion: data-rn-reveal="media" on the
   media frame (fade, then the picture settles), the copy on data-rn-reveal. */
.rn-feature {
  --rn-text: var(--rn-text-on-ink);
  --rn-muted: var(--rn-muted-on-ink);
  --rn-line: var(--rn-line-on-ink);
  --rn-on-text: var(--rn-ink);
  --rn-card-ring: var(--rn-ring);
  --rn-card-bg: var(--rn-ink-soft);
  --rn-btn-hover: var(--rn-paper-hi);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--rn-ring);
  border-radius: var(--rn-radius-card);
  background-color: var(--rn-stage);
  background-image: linear-gradient(var(--rn-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--rn-grid-line) 1px, transparent 1px);
  background-size: var(--rn-grid) var(--rn-grid);
  color: var(--rn-text);
}

.rn-feature-media {
  position: relative;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--rn-ink-soft);
}

.rn-feature-media > :is(img, video, picture) {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: var(--rn-media-pos, 50% 50%);
}

.rn-feature-copy {
  display: flex;
  flex-direction: column;
  gap: var(--rn-space-4);
  padding: clamp(28px, 4vw, 56px);
}

.rn-feature-copy > h2,
.rn-feature-copy > h3 {
  margin: 0;
  font: var(--rn-weight-display) var(--rn-fs-h2-sm)/var(--rn-lh-heading) var(--rn-font-display);
  letter-spacing: var(--rn-track-display);
}

.rn-feature-copy > p {
  margin: 0;
  color: var(--rn-muted);
}

.rn-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--rn-space-2) var(--rn-space-5);
  margin: var(--rn-space-2) 0 0;
  padding-top: var(--rn-space-4);
  border-top: 1px solid var(--rn-line);
  font: 500 var(--rn-fs-label)/1.5 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.rn-facts dt {
  color: var(--rn-muted);
}

.rn-facts dd {
  margin: 0;
  color: var(--rn-text);
}

.rn-feature-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--rn-space-5);
  margin-top: auto;
}

@media (max-width: 900px) {
  .rn-feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .rn-feature-media {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  .rn-feature-media > :is(img, video, picture) {
    min-height: 0;
  }
}

/* 12. rn-ticker ─────────────────────────────────────────────────────────────────────────────────────────────────
   The home page's one lime moment: 44px, ink Plex Mono 11px on lime, 4px ink squares between. aria-hidden. A 40s
   marquee that stops offscreen, under the site pause and under reduced motion (motion.css and the legacy rules). */
.rn-ticker,
:where(.lux-ticker) {
  position: relative;
  overflow: hidden;
  border: 0;
  background: var(--rn-lime);
  color: var(--rn-ink);
}

.rn-ticker > div,
:where(.lux-ticker) > div {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  min-height: 44px;
  padding: 0;
  animation-duration: 40s;
}

.rn-ticker > div {
  animation: lux-ticker 40s linear infinite;
}

.rn-ticker span,
:where(.lux-ticker) span {
  font: 500 var(--rn-fs-label)/1 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.rn-ticker i,
:where(.lux-ticker) i {
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 0;
  background: var(--rn-ink);
}

/* 13. rn-band: the closing band ─────────────────────────────────────────────────────────────────────────────────
   Last before the footer on every page: a paper section holding one ink card (the hero's stage colour, its 88px grid,
   radius 20, a ring). Eyebrow, a section H2 whose emphasis is the family signal (or muted on the audit family, so no
   band shows red), one sentence, one paper button and one paper link. No colour slab, no red button.
   Motion: the card is a data-rn-timeline; the eyebrow lands on beat 0, the H2's words rise into their masks
   (data-rn-kinetic) from a quarter beat, and the actions arrive on beat 1.25. */
.rn-band,
:where(.studio-cta, .lux-cta) {
  position: relative;
  padding-block: var(--rn-section-tight) var(--rn-section);
  border: 0;
  background: var(--rn-paper);
  color: var(--rn-text-on-ink);
}

:where(.lux-cta)::before,
:where(.lux-cta)::after {
  content: none;
}

.rn-band-card,
:where(.studio-cta-grid, .lux-cta-grid) {
  --rn-text: var(--rn-text-on-ink);
  --rn-muted: var(--rn-muted-on-ink);
  --rn-line: var(--rn-line-on-ink);
  --rn-on-text: var(--rn-ink);
  --rn-card-ring: var(--rn-ring);
  --rn-card-bg: var(--rn-ink-soft);
  --rn-btn-hover: var(--rn-paper-hi);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--rn-space-7) var(--rn-space-8);
  box-sizing: border-box;
  padding: clamp(32px, 5vw, 64px);
  border: 1px solid var(--rn-ring);
  border-radius: var(--rn-radius-card);
  background-color: var(--rn-stage);
  background-image: linear-gradient(var(--rn-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--rn-grid-line) 1px, transparent 1px);
  background-size: var(--rn-grid) var(--rn-grid);
  background-position: -1px -1px;
  color: var(--rn-text-on-ink);
}

:is(.rn-band, .studio-cta, .lux-cta) h2 {
  max-width: 16ch;
  margin: var(--rn-space-4) 0 0;
  color: var(--rn-text-on-ink);
}

/* The one emphasised phrase: the family signal, or muted in the audit family (base.css's rule, restated in the card). */
:is(.rn-band, .studio-cta, .lux-cta) h2 > :is(em, span):not(.rn-k-w, .rn-k-block, .rn-sr) {
  color: var(--rn-signal, var(--rn-muted-on-ink));
  font-style: normal;
}

:is(.rn-band, .studio-cta, .lux-cta) p:not(.studio-kicker, .lux-eyebrow, .rn-eyebrow) {
  max-width: 44ch;
  margin: 0 0 var(--rn-space-5);
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-body-lg)/var(--rn-lh-lead) var(--rn-font-body);
}

/* A sentence straight under the headline keeps a line of air between it and the headline's descenders. */
:is(.rn-band, .studio-cta, .lux-cta) h2 + p:not(.studio-kicker, .lux-eyebrow, .rn-eyebrow) {
  margin-top: var(--rn-space-4);
}

/* A button placed straight in the card keeps its own width when the card stacks (it stretched full width at 900px
   and below on the pages whose band has no actions row). */
:where(.studio-cta-grid, .lux-cta-grid, .rn-band-card) > :is(.studio-button, .lux-button, .rn-btn) {
  justify-self: start;
}

:where(.lux-cta-grid) > div:last-child {
  z-index: auto;
  padding: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
}

:where(.rn-band, .studio-cta, .lux-cta) :where(.studio-hero-actions, .rn-actions, .lux-actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rn-space-3) var(--rn-space-5);
  margin: 0;
}

/* The band's link is paper (15:1 on the stage ink). */
:is(.rn-band, .studio-cta, .lux-cta) :is(.studio-text-link, .lux-link, .rn-link) {
  color: var(--rn-text-on-ink);
}

@media (max-width: 900px) {
  .rn-band-card,
  :where(.studio-cta-grid, .lux-cta-grid) {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--rn-space-6);
  }
}

@media (max-width: 640px) {
  .rn-band,
  :where(.studio-cta, .lux-cta) {
    padding-block: var(--rn-space-7) var(--rn-space-8);
  }
}

/* 14. No glass ──────────────────────────────────────────────────────────────────────────────────────────────────
   Every translucent, blurred surface becomes solid ink-soft with the ring, with no shadow. (The hero's proof row is
   home-hero.css's since hero-centrepiece; the reel card is gone.) The last rule guarantees no element blurs its
   backdrop anywhere (the hero's own files use none). */
:where(.glass, .lux-project-index, .lux-live, .studio-prototype-live, .audit-diagnostic) {
  border-color: var(--rn-ring);
  background-color: var(--rn-ink-soft);
  box-shadow: none;
}

:where(.studio-learning-sticky, .studio-learning-copy) {
  background-color: var(--rn-paper-hi);
}

/* The work cards' "Open live site" pill was 94% white glass over the artwork: solid paper now (ink on hover, base.css). */
:where(.studio-project-open) {
  border-color: rgba(9, 11, 13, 0.12);
  background-color: var(--rn-paper-hi);
  color: var(--rn-ink);
}

:where(.lux-work-card:hover .lux-work-meta) {
  background-color: var(--rn-ink-soft);
}

:where(*),
:where(*)::before,
:where(*)::after {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 15. rn-motion-toggle placements ───────────────────────────────────────────────────────────────────────────────
   One control, three places besides the footer and the Menu: on a stage (top right, ink-soft, as on AI Alchemy's
   rune), and on a video (bottom right, a 44px circle that keeps its accessible name). */
.rn-motion-toggle[data-placement="stage"],
.rn-motion-toggle[data-placement="video"] {
  position: absolute;
  z-index: 2;
  --rn-text: var(--rn-text-on-ink);
  --rn-muted: var(--rn-muted-on-ink);
  --rn-on-text: var(--rn-ink);
  background: var(--rn-ink-soft);
}

.rn-motion-toggle[data-placement="stage"] {
  top: var(--rn-space-4);
  right: var(--rn-space-4);
}

.rn-motion-toggle[data-placement="video"] {
  right: var(--rn-space-3);
  bottom: var(--rn-space-3);
  padding: 0;
}

.rn-motion-toggle[data-placement="video"] > span:not(.rn-motion-toggle-icon) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rn-motion-toggle:is([data-placement="stage"], [data-placement="video"])[aria-pressed="true"] {
  background: var(--rn-text);
}

/* 16. 404: the hero stage in miniature (moved from 404.html's inline style). ────────────────────────────────── */
.rn-404 {
  display: grid;
  min-height: 100svh;
  box-sizing: border-box;
  place-content: center;
  padding: 140px 24px 120px;
  background-color: var(--rn-stage);
  background-image: linear-gradient(var(--rn-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--rn-grid-line) 1px, transparent 1px);
  background-size: var(--rn-grid) var(--rn-grid);
  color: var(--rn-text-on-ink);
}

.rn-404 > section {
  width: min(760px, 100%);
}

.rn-404 h1 {
  margin: 18px 0 20px;
}

.rn-404 h1 em {
  color: var(--rn-red);
  font-style: normal;
}

.rn-404 p:not(.lux-eyebrow) {
  max-width: 520px;
  margin: 0;
  color: var(--rn-muted-on-ink);
  font: 500 1.05rem/1.6 var(--rn-font-body);
}

/* The one Japanese line (3-ja-bilingual), set a little apart, in the system Japanese font (ja-fonts.css is /ja/ only). */
.rn-404 p[lang="ja"] {
  margin-top: 14px;
  font-size: 0.95rem;
  line-height: 1.8;
}

.rn-404 .lux-eyebrow {
  color: var(--rn-text-on-ink);
}

.rn-404 .lux-eyebrow > span {
  background: currentColor;
  box-shadow: none;
}

.rn-404 .lux-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rn-space-3) var(--rn-space-5);
  margin-top: 32px;
}

.rn-404 .lux-link-light {
  color: inherit;
}

/* 17. Reduced motion, pause, forced colours ─────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rn-card,
  :where(.lux-work-card, .lux-prototype-card, .lux-capability-card, .home-audit-grid > article, .studio-project-card, .studio-prototype-object, .blog-card, .blog-feature-card, .audit-coverage-grid > article, .audit-process-grid > article, .approach-audit-grid > article, .studio-making-grid > article),
  .rn-btn > [aria-hidden="true"],
  :where(.lux-button, .studio-button) > span[aria-hidden="true"],
  .rn-chip,
  :where(.studio-filters) > button,
  .rn-media > :is(img, video),
  :is(.rn-faq, .audit-faq-list) summary::after {
    transition: none;
  }
}

@media (forced-colors: active) {
  .rn-prio[data-prio="now"] {
    border: 2px solid CanvasText;
  }

  .rn-chip:is([aria-pressed="true"], [aria-checked="true"], [aria-current]),
  :where(.studio-filters) > button:is([aria-pressed="true"], .is-active) {
    outline: 2px solid ButtonText;
    outline-offset: 2px;
  }
}