/* assets/rn/chrome.css — the global chrome (2-global-chrome): header, nav, dock and Menu, footer, page transitions.
   Linked after motion.css on the 10 core pages and 404.html. Unlayered: it beats the legacy layer (site.css, studio.css,
   lux.css) at any specificity, so selectors stay single-class and nothing here uses !important.
   One definition per part, in the hero's language: solid ink with a 1px ring, no blur, no glow, no shadow at rest,
   red only in the footer's spectrum rule. Everything moves on the hero's springs (tokens.css), transform and opacity only.

   HEADER GEOMETRY: top 18px + height 72px above 900px, 12px + 64px at 900px and below (tokens.css --rn-header-top /
   --rn-header-h). Since hero-centrepiece the hero stage sits in the page's flow: home-hero.css sizes the window from
   these tokens, and ran-morph.js reads [data-site-header] only for its pause toggle's scroll margin. Change them only
   with the hero guard (overhaul/tools/hero-guard.mjs) and overhaul/work/hero-centrepiece/accept.mjs.

   1. Header          5. Dock and Menu (900px and below)     9. Page transitions
   2. Brand           6. Dock clearance, once                10. Reduced motion, pause, forced colours
   3. Nav and pill    7. Footer
   4. Language, CTA   (8, the filter bars, went with their markup)                                                */

/* 1. Header ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  z-index: var(--rn-z-header);
  top: var(--rn-header-top);
  left: 50%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--rn-space-4);
  box-sizing: border-box;
  width: min(1280px, calc(100% - 48px));
  height: var(--rn-header-h);
  min-height: 0;
  /* The CTA sits concentric with the header's end cap: (70 - 46) / 2 = 12px. */
  padding: 0 12px 0 18px;
  transform: translateX(-50%);
  border: 1px solid var(--rn-ring);
  border-radius: var(--rn-radius-pill);
  background: var(--rn-ink);
  color: var(--rn-text-on-ink);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: none;
}

.rn-header-end {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--rn-space-2);
  min-width: 0;
}

/* 2. Brand: the striped mark without its micro-lettering (unreadable at this size; the wordmark says it), then the
   wordmark. The mark is the white logo cropped in place, so no new artwork. ─────────────────────────────────── */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  min-width: var(--rn-target);
  min-height: var(--rn-target);
  color: var(--rn-text-on-ink);
  font: 700 0.9rem/1 var(--rn-font-display);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  position: relative;
  display: block;
  flex: none;
  width: 26px;
  height: 22px;
  overflow: hidden;
  border-radius: 0;
  background: none;
}

/* The PNG is 153 x 98; its mark sits at x 44-122, y 6-72. At a third of its size that is this 26 x 22 box. */
.brand-mark img {
  position: absolute;
  top: -2px;
  left: -14.67px;
  width: 51px;
  max-width: none;
  height: auto;
  filter: none;
}

.brand-word {
  display: inline;
}

/* 3. Nav and the current-page pill ──────────────────────────────────────────────────────────────────────────
   Links are muted and turn paper on hover. The current page carries the pill (<span class="rn-pill"> in its link):
   ink-soft with a 1px ring, built from two half-circle caps and a flat middle so it can stretch between links
   without distorting, exactly like the hero's tab indicator. site.js moves it to the link under the pointer or
   keyboard focus with the hero's two-edge spring (the leading edge fast, the trailing edge slow); across pages the
   view transition carries it (section 9). Without JavaScript it simply sits on the current link. */
.main-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 2px;
  white-space: nowrap;
}

.main-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--rn-target);
  padding: 0 14px;
  border-radius: var(--rn-radius-pill);
  background: transparent;
  box-shadow: none;
  color: var(--rn-muted-on-ink);
  font: 600 var(--rn-fs-small)/1 var(--rn-font-body);
  letter-spacing: 0;
  text-decoration: none;
  transition: color var(--rn-dur-snap) var(--rn-ease-snap);
}

.main-nav a::after {
  content: none;
}

.main-nav a:hover,
.main-nav a[aria-current="page"],
.main-nav.rn-pill-moving a.rn-pill-at {
  background: transparent;
  color: var(--rn-text-on-ink);
}

/* While the pill is away from the current link, that link reads like the others. */
.main-nav.rn-pill-moving a[aria-current="page"]:not(.rn-pill-at, :hover) {
  color: var(--rn-muted-on-ink);
}

.rn-pill {
  --rn-pill-h: 36px;
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 0;
  left: 0;
  height: var(--rn-pill-h);
  margin-top: calc(var(--rn-pill-h) / -2);
  pointer-events: none;
}

.rn-pill > i {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--rn-ink-soft);
  will-change: transform;
}

.rn-pill > i:first-child,
.rn-pill > i:last-child {
  width: var(--rn-pill-h);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--rn-ring);
}

.rn-pill > i:first-child {
  left: 0;
  clip-path: inset(0 50% 0 0);
}

.rn-pill > i:last-child {
  right: 0;
  clip-path: inset(0 0 0 50%);
}

/* The middle runs 1px under each cap, so no antialiased seam shows where they meet. */
.rn-pill > i:nth-child(2) {
  right: calc(var(--rn-pill-h) / 2 - 1px);
  left: calc(var(--rn-pill-h) / 2 - 1px);
  box-shadow: inset 0 1px 0 var(--rn-ring), inset 0 -1px 0 var(--rn-ring);
  transform-origin: 0 50%;
}

/* 4. Language switch and the header CTA ─────────────────────────────────────────────────────────────────────
   The switch (EN | 日本語) is live since 3-ja-bilingual. Every page has three language links (header, Menu, footer):
   an English page links to its Japanese twin where there is one (home, audits, work, approach, brief, privacy,
   terms) and to /ja/ otherwise; a Japanese page links back to its English twin. The current language is a <span>,
   the other a link, in either order, so the divider sits on whichever comes second. */
.rn-lang-switch {
  display: inline-flex;
  align-items: center;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-label)/1 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.rn-lang-switch[hidden],
[data-lang-switch][hidden] {
  display: none;
}

.rn-lang-switch > * {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--rn-target);
  min-height: var(--rn-target);
  padding: 0 8px;
}

.rn-lang-switch > span {
  color: var(--rn-text-on-ink);
}

.rn-lang-switch > a {
  position: relative;
  color: var(--rn-muted-on-ink);
  text-decoration: none;
  transition: color var(--rn-dur-snap) var(--rn-ease-snap);
}

.rn-lang-switch > * + *::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 12px;
  margin-top: -6px;
  background: var(--rn-ring);
  content: "";
}

.rn-lang-switch > a:hover {
  color: var(--rn-text-on-ink);
}

/* The 日本語 link in an English page's chrome: no tracking, no uppercase, the Japanese stack behind the Latin one.
   (On /ja/ pages everything is Japanese, and assets/rn/ja.css sets the type per role instead.) */
:root:not(:lang(ja)) :is(.rn-lang-switch, .mobile-bottom-nav, .mobile-more-menu, .site-footer) :lang(ja) {
  font-family: var(--rn-font-mono-ja);
  letter-spacing: 0;
  text-transform: none;
}

.nav-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  gap: 12px;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--rn-radius-pill);
  background: var(--rn-paper);
  box-shadow: none;
  color: var(--rn-ink);
  font: 700 var(--rn-fs-small)/1 var(--rn-font-body);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.nav-action:hover,
.nav-action:focus-visible {
  border-color: transparent;
  background: var(--rn-paper-hi);
  color: var(--rn-ink);
}

/* Keyboard focus in the ink header is one paper ring (base.css's two-tone ring puts its ink half on ink, where it
   cannot be seen). A nav link takes it on its own pill edge, 4px outside the travelling pill and concentric with it;
   the paper CTA and the brand take it 2px out, with ink between. */
.main-nav a:focus-visible {
  outline: 2px solid var(--rn-paper);
  outline-offset: 0;
  box-shadow: none;
}

.nav-action:focus-visible,
.brand-lockup:focus-visible,
.rn-lang-switch > a:focus-visible {
  outline: 2px solid var(--rn-paper);
  outline-offset: 2px;
  box-shadow: none;
}

.nav-action > span {
  display: inline-block;
  transition: transform var(--rn-dur-snap) var(--rn-ease-snap);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* The CTA stays concentric with the header's end cap: only the arrow moves (motion.css lifts other buttons). */
  .nav-action:hover {
    translate: none;
  }

  .nav-action:hover > span {
    transform: translateX(3px);
  }
}

/* Compact nav, 901-1180px: the same five links, tighter (the old 1120px breakpoint left 901-1120 with no nav). The
   nav takes the room between the brand and the end group rather than the header's centre, so the language switch
   and the CTA keep their full width: with equal side columns they ran into the nav just above 900px. */
@media (max-width: 1180px) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: calc(100% - 34px);
    column-gap: 12px;
  }

  .main-nav a {
    padding-inline: 10px;
  }
}

/* 900px and below: brand and CTA only; the dock carries the navigation. */
@media (max-width: 900px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    /* Concentric again: (62 - 44) / 2 = 9px. */
    padding: 0 9px 0 14px;
  }

  .main-nav,
  .site-header .rn-lang-switch {
    display: none;
  }

  .brand-lockup {
    justify-content: flex-start;
  }

  .nav-action {
    gap: 10px;
    min-height: var(--rn-target);
    padding-inline: 16px;
    font-size: 0.75rem;
  }
}

@media (max-width: 640px) {
  .site-header {
    width: calc(100% - 24px);
  }
}

/* The wordmark shows from 375px up; below that the mark alone keeps the CTA on one line. */
@media (max-width: 374px) {
  .brand-word {
    display: none;
  }
}

/* 5. Dock and Menu (900px and below) ───────────────────────────────────────────────────────────────────────
   One ink pill with four text labels (Audits, Work, Prototypes, Menu). The current page is a paper fill; the Menu
   button takes it when the current page lives in the Menu. The Menu is a popover (works without JavaScript),
   right-anchored above the dock, and scrolls inside the viewport when a landscape phone is too short for it. */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 900px) {
  .mobile-bottom-nav {
    position: fixed;
    z-index: var(--rn-z-dock);
    right: max(12px, env(safe-area-inset-right));
    bottom: var(--rn-dock-gap);
    left: max(12px, env(safe-area-inset-left));
    display: block;
    box-sizing: border-box;
    width: auto;
    max-width: 520px;
    height: var(--rn-dock-h);
    margin-inline: auto;
    padding: 6px;
    overflow: visible;
    border: 1px solid var(--rn-ring);
    border-radius: var(--rn-radius-pill);
    background: var(--rn-ink);
    box-shadow: none;
    color: var(--rn-text-on-ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    isolation: auto;
  }

  .mobile-bottom-nav__scroller {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    height: 100%;
    padding: 0;
    overflow: visible;
  }

  .mobile-bottom-nav__scroller > :is(a, button) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-radius: var(--rn-radius-pill);
    background: transparent;
    box-shadow: none;
    color: var(--rn-muted-on-ink);
    font: 500 var(--rn-fs-label)/1 var(--rn-font-mono);
    letter-spacing: var(--rn-track-label-wide);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition-property: color, background-color, box-shadow, scale;
    transition-duration: var(--rn-dur-snap);
    transition-timing-function: var(--rn-ease-snap);
  }

  .mobile-bottom-nav__scroller > :is(a, button)::before,
  .mobile-bottom-nav__scroller > :is(a, button)::after {
    content: none;
  }

  .mobile-bottom-nav__scroller > a[aria-current="page"],
  .mobile-more-trigger.is-current {
    background: var(--rn-paper);
    color: var(--rn-ink);
  }

  .mobile-more-trigger[aria-expanded="true"] {
    background: var(--rn-ink-soft);
    box-shadow: inset 0 0 0 1px var(--rn-muted-on-ink);
    color: var(--rn-text-on-ink);
  }

  .mobile-bottom-nav__scroller > :is(a, button):focus-visible {
    outline: 2px solid var(--rn-paper);
    outline-offset: -4px;
    box-shadow: none;
  }
}

/* Below 360px "PROTOTYPES" is wider than a quarter of the dock: its column takes a little more and the labels close
   up to the standard label tracking, so the current-page fill always holds its whole word (320px reflow). */
@media (max-width: 359px) {
  .mobile-bottom-nav__scroller {
    grid-template-columns: 1fr 1fr 1.35fr 1fr;
  }

  .mobile-bottom-nav__scroller > :is(a, button) {
    padding-inline: 2px;
    letter-spacing: var(--rn-track-label);
  }
}

/* The Menu sheet. Hidden until opened, at every width (it sat open over the dock at 821-900px before stage 0). */
.mobile-more-menu {
  display: none;
}

.mobile-more-menu:popover-open {
  display: block;
}

.mobile-more-menu.is-open {
  display: block;
}

@media (max-width: 900px) {
  .mobile-more-menu {
    --rn-menu-bottom: calc(var(--rn-dock-gap) + var(--rn-dock-h) + 10px);
    /* The sheet always stops 8px under the header's bottom edge (and clear of any notch) and scrolls if it must. */
    --rn-menu-top: max(calc(var(--rn-header-top) + var(--rn-header-h) + 8px), calc(env(safe-area-inset-top) + 12px));
    position: fixed;
    z-index: var(--rn-z-menu);
    inset: auto;
    right: max(12px, env(safe-area-inset-right), calc((100vw - 520px) / 2));
    bottom: var(--rn-menu-bottom);
    box-sizing: border-box;
    width: min(300px, calc(100vw - 24px));
    max-height: calc(100vh - var(--rn-menu-bottom) - var(--rn-menu-top));
    max-height: calc(100dvh - var(--rn-menu-bottom) - var(--rn-menu-top));
    margin: 0;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--rn-ring);
    border-radius: var(--rn-radius-card);
    background: var(--rn-ink);
    box-shadow: var(--rn-lift);
    color: var(--rn-text-on-ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transform-origin: 100% 100%;
  }

  .mobile-more-menu__label {
    display: block;
    margin: 0;
    padding: 10px 12px 8px;
    color: var(--rn-muted-on-ink);
    font: 500 var(--rn-fs-label)/1.2 var(--rn-font-mono);
    letter-spacing: var(--rn-track-label);
    text-transform: uppercase;
  }

  .mobile-more-menu > a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--rn-target);
    padding: 0 12px;
    border-radius: var(--rn-radius-md);
    background: transparent;
    box-shadow: none;
    color: var(--rn-text-on-ink);
    font: 600 0.9375rem/1.2 var(--rn-font-body);
    text-align: left;
    text-decoration: none;
    transition: background-color var(--rn-dur-snap) var(--rn-ease-snap), color var(--rn-dur-snap) var(--rn-ease-snap);
  }

  .mobile-more-menu > a:hover {
    background: var(--rn-ink-soft);
  }

  .mobile-more-menu > a[aria-current="page"] {
    background: var(--rn-paper);
    color: var(--rn-ink);
  }

  .mobile-more-menu > a:focus-visible {
    outline: 2px solid var(--rn-paper);
    outline-offset: -3px;
    box-shadow: none;
  }

  /* The current page is a paper fill, so its focus ring is ink (a paper ring on paper did not show). The Menu button
     leaves the paper fill while its sheet is open, and keeps the paper ring there. */
  .mobile-bottom-nav__scroller > a[aria-current="page"]:focus-visible,
  .mobile-more-trigger.is-current:not([aria-expanded="true"]):focus-visible,
  .mobile-more-menu > a[aria-current="page"]:focus-visible {
    outline-color: var(--rn-ink);
  }

  .mobile-more-menu > .rn-motion-toggle {
    position: relative;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-top: 8px;
    padding-inline: 12px;
  }

  .mobile-more-menu > .rn-motion-toggle::before {
    position: absolute;
    top: -5px;
    right: 4px;
    left: 4px;
    height: 1px;
    background: var(--rn-line-on-ink);
    content: "";
  }
}

/* Under reduced motion there is nothing to pause: the Menu's toggle goes too, as motion.css hides the others (the rule
   above showed it again inside the sheet). */
@media (prefers-reduced-motion: reduce) {
  .mobile-more-menu > .rn-motion-toggle {
    display: none;
  }
}

/* A landscape phone is too short for eight rows: two columns, no brand label (it is aria-hidden), so the sheet fits
   between the dock and the header down to 375px tall and scrolls below that. */
@media (max-width: 900px) and (max-height: 500px) {
  .mobile-more-menu {
    width: min(440px, calc(100vw - 24px));
  }

  .mobile-more-menu:popover-open,
  .mobile-more-menu.is-open {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4px;
  }

  .mobile-more-menu__label {
    display: none;
  }

  .mobile-more-menu > .rn-motion-toggle {
    grid-column: 1 / -1;
  }
}

/* The sheet opens on the TRAIL spring from the Menu button's corner and its rows land after it, nearest the thumb
   first (1/16 beat apart); it closes on the quick OUT curve. CSS only: @starting-style for the entrance, a
   discrete display/overlay transition for the exit where supported (instant elsewhere). */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  html:not([data-motion="paused"]) .mobile-more-menu {
    transition: opacity var(--rn-dur-out) var(--rn-ease-critical), translate var(--rn-dur-out) var(--rn-ease-critical), scale var(--rn-dur-out) var(--rn-ease-critical);
    transition: opacity var(--rn-dur-out) var(--rn-ease-critical), translate var(--rn-dur-out) var(--rn-ease-critical), scale var(--rn-dur-out) var(--rn-ease-critical), display var(--rn-dur-out) allow-discrete, overlay var(--rn-dur-out) allow-discrete;
    opacity: 0;
    translate: 0 8px;
    scale: 0.98;
  }

  html:not([data-motion="paused"]) .mobile-more-menu:popover-open {
    transition-duration: var(--rn-dur-fade), var(--rn-dur-trail), var(--rn-dur-trail), 0s, 0s;
    transition-timing-function: var(--rn-ease-critical), var(--rn-ease-trail), var(--rn-ease-trail);
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  html:not([data-motion="paused"]) .mobile-more-menu.is-open {
    transition-duration: var(--rn-dur-fade), var(--rn-dur-trail), var(--rn-dur-trail);
    transition-timing-function: var(--rn-ease-critical), var(--rn-ease-trail), var(--rn-ease-trail);
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @starting-style {
    html:not([data-motion="paused"]) .mobile-more-menu:popover-open {
      opacity: 0;
      translate: 0 14px;
      scale: 0.96;
    }
  }

  html:not([data-motion="paused"]) .mobile-more-menu:popover-open > *,
  html:not([data-motion="paused"]) .mobile-more-menu.is-open > * {
    animation:
      rn-reveal-fade var(--rn-dur-fade) var(--rn-ease-critical) backwards,
      rn-menu-row var(--rn-dur-ui) var(--rn-ease-ui) backwards;
    animation-delay: calc(var(--rn-row, 0) * var(--rn-beat) / 16 + 40ms);
  }

  .mobile-more-menu > :nth-last-child(2) { --rn-row: 1; }
  .mobile-more-menu > :nth-last-child(3) { --rn-row: 2; }
  .mobile-more-menu > :nth-last-child(4) { --rn-row: 3; }
  .mobile-more-menu > :nth-last-child(5) { --rn-row: 4; }
  .mobile-more-menu > :nth-last-child(6) { --rn-row: 5; }
  .mobile-more-menu > :nth-last-child(7) { --rn-row: 6; }
  .mobile-more-menu > :nth-last-child(n + 8) { --rn-row: 7; }

  /* The dock's labels press like buttons (the SNAP spring, motion.css 6). */
  html:not([data-motion="paused"]) .mobile-bottom-nav__scroller > :is(a, button):active {
    scale: 0.96;
  }
}

@keyframes rn-menu-row {
  from {
    translate: 0 10px;
  }
}

/* 6. Dock clearance, once ──────────────────────────────────────────────────────────────────────────────────
   The dock covered content in three places (body 98px, main 142px, footer 166px), which left dead ink bands. It is
   reserved once, under the footer's legal row. Focus and anchors still land clear of it (scroll-padding). */
@media (max-width: 900px) {
  html {
    --mobile-dock-clearance: var(--rn-dock-clearance);
    scroll-padding-bottom: var(--rn-dock-clearance);
  }

  body,
  .studio-site > main,
  .lux-site > main {
    padding-bottom: 0;
  }
}

/* lux.css (700px and below) padded the interior heroes and the brief workspace by the dock clearance too. */
@media (max-width: 700px) {
  :is(.audit-hero, .studio-inner-hero, .studio-brief-hero) {
    padding-bottom: 56px;
  }

  .studio-brief-workspace {
    padding-bottom: 76px;
  }
}

/* 7. Footer ─────────────────────────────────────────────────────────────────────────────────────────────────
   Ink with a 1px ring on its top edge, and on that edge the spectrum rule: the four accents in equal segments, the
   one place they meet (it draws in once as the footer arrives). Brand and tagline left, two labelled link groups,
   then the legal row in Plex Mono. The gutters follow the page containers at every width. */
.site-footer {
  --rn-footer-gutter: max(56px, calc((100% - 1280px) / 2));
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--rn-space-8);
  row-gap: var(--rn-space-7);
  box-sizing: border-box;
  padding: var(--rn-space-9) var(--rn-footer-gutter) var(--rn-space-7);   /* 48px under the legal row: its 44px pill no longer sits on the window edge */
  border: 0;
  border-top: 1px solid var(--rn-ring);
  background: var(--rn-ink);
  color: var(--rn-text-on-ink);
}

.site-footer > * {
  width: auto;
  margin: 0;
}

.rn-spectrum {
  position: absolute;
  top: -1px;
  left: var(--rn-footer-gutter);
  width: 160px;
  height: 3px;
  background: linear-gradient(90deg, var(--rn-red) 0 25%, var(--rn-lime) 25% 50%, var(--rn-yellow) 50% 75%, var(--rn-blue) 75% 100%);
  pointer-events: none;
}

.footer-main {
  display: block;
  padding: 0;
  border: 0;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--rn-target);
  color: var(--rn-text-on-ink);
  font: 700 clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem)/1 var(--rn-font-display);
  letter-spacing: var(--rn-track-display);
  text-decoration: none;
}

.footer-main p {
  max-width: 36ch;
  margin: var(--rn-space-3) 0 0;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-body)/var(--rn-lh-body) var(--rn-font-body);
  text-align: left;
}

.rn-footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, auto));
  column-gap: var(--rn-space-8);
  align-content: start;
  padding: 0;
}

.rn-footer-label {
  margin: 0 0 var(--rn-space-2);
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-label)/1.2 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.rn-footer-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rn-footer-group a {
  display: inline-flex;
  align-items: center;
  min-width: var(--rn-target);
  min-height: var(--rn-target);
  color: var(--rn-muted-on-ink);
  font: 600 0.9375rem/1.2 var(--rn-font-body);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--rn-dur-snap) var(--rn-ease-snap);
}

.rn-footer-group a:hover {
  color: var(--rn-text-on-ink);
  text-decoration-line: underline;
}

.rn-footer-group a[aria-current="page"] {
  color: var(--rn-text-on-ink);
}

.footer-legal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: var(--rn-space-2) var(--rn-space-5);
  padding-top: var(--rn-space-3);
  border-top: 1px solid var(--rn-ring);
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-label)/1.2 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.footer-legal > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--rn-space-2);
}

.footer-legal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--rn-target);
  min-height: var(--rn-target);
  padding: 0 6px;
  color: var(--rn-muted-on-ink);
  text-decoration: none;
  transition: color var(--rn-dur-snap) var(--rn-ease-snap);
}

.footer-legal a:hover,
.footer-legal a[aria-current="page"] {
  color: var(--rn-text-on-ink);
}

.footer-legal .rn-motion-toggle {
  margin: 0 var(--rn-space-2) 0 0;
}

@media (max-width: 1180px) {
  .site-footer {
    --rn-footer-gutter: max(32px, calc((100% - 1100px) / 2));
  }
}

@media (max-width: 900px) {
  .site-footer {
    --rn-footer-gutter: 20px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--rn-space-6);
    padding-top: var(--rn-space-8);
    padding-bottom: calc(var(--rn-dock-clearance) + 8px);
  }

  .rn-footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--rn-space-4);
  }

  .footer-legal {
    justify-content: flex-start;
    padding-top: var(--rn-space-4);
  }

  .footer-legal > span {
    flex-basis: 100%;
  }
}

@media (max-width: 640px) {
  .site-footer {
    --rn-footer-gutter: 16px;
  }
}

/* 9. Page transitions ───────────────────────────────────────────────────────────────────────────────────────
   Same-origin navigations cross-fade (Chrome and Edge 126+, Safari 18.2+; elsewhere they are instant). The next page
   rises in over the old one in 220ms. The header and the dock hold still, and the current-page
   pill travels from the old link to the new one. Kept apart from motion.css's same-document swaps (:root.rn-swap),
   and switched off by reduced motion and by the site pause. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  .site-header {
    view-transition-name: rn-header;
  }

  .mobile-bottom-nav {
    view-transition-name: rn-dock;
  }

  .site-header .rn-pill > i:nth-child(1) {
    view-transition-name: rn-pill-l;
  }

  .site-header .rn-pill > i:nth-child(2) {
    view-transition-name: rn-pill-m;
  }

  .site-header .rn-pill > i:nth-child(3) {
    view-transition-name: rn-pill-r;
  }

  :root::view-transition-group(rn-header),
  :root::view-transition-group(rn-dock) {
    animation: none;
  }

  :root::view-transition-old(rn-header),
  :root::view-transition-new(rn-header),
  :root::view-transition-old(rn-dock),
  :root::view-transition-new(rn-dock) {
    animation-duration: var(--rn-dur-fade);
    animation-timing-function: var(--rn-ease-critical);
  }

  /* The pill parts move on one spring so the caps and the middle stay joined; the pill is lighter than the ink and
     darker than every label, so blending it with lighten keeps the labels on top of it while it travels. */
  :root::view-transition-group(rn-pill-l),
  :root::view-transition-group(rn-pill-m),
  :root::view-transition-group(rn-pill-r) {
    animation-duration: var(--rn-dur-ui);
    animation-timing-function: var(--rn-ease-ui);
    mix-blend-mode: lighten;
  }

  :root::view-transition-old(rn-pill-m),
  :root::view-transition-new(rn-pill-m) {
    height: 100%;
  }

  /* The old page holds still and the new one rises in over it, so the cut never dims (a fade-out under the fade-in
     dipped two paper pages towards grey for a frame or two). The stage colour sits behind both, never the browser's
     white canvas. */
  :root:not(.rn-swap)::view-transition {
    background-color: var(--rn-ink);
  }

  :root:not(.rn-swap)::view-transition-old(root) {
    animation: none;
  }

  :root:not(.rn-swap)::view-transition-new(root) {
    animation: rn-page-in 220ms var(--rn-ease-critical) both;
  }

  /* The site pause: navigation is instant. */
  :root[data-motion="paused"]::view-transition-group(*),
  :root[data-motion="paused"]::view-transition-old(*),
  :root[data-motion="paused"]::view-transition-new(*) {
    animation: none;
  }
}

@keyframes rn-page-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Without JavaScript there is no motion system to pause, so the pause control is not offered. */
html:not(.js) [data-motion-toggle] {
  display: none;
}

/* 10. Reduced motion and forced colours ────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nav-action > span,
  .main-nav a,
  .mobile-bottom-nav__scroller > :is(a, button),
  .mobile-more-menu,
  .mobile-more-menu > a {
    transition: none;
  }
}

@media (forced-colors: active) {
  .rn-pill > i {
    background: Highlight;
  }

  .main-nav a[aria-current="page"] {
    color: HighlightText;
  }

  .mobile-bottom-nav__scroller > a[aria-current="page"],
  .mobile-more-trigger.is-current,
  .mobile-more-menu > a[aria-current="page"] {
    outline: 2px solid ButtonText;
    outline-offset: -2px;
  }

  /* The current item already carries a ring here, so its focus is a heavier one in the focus colour. */
  .mobile-bottom-nav__scroller > a[aria-current="page"]:focus-visible,
  .mobile-more-trigger.is-current:focus-visible,
  .mobile-more-menu > a[aria-current="page"]:focus-visible {
    outline: 4px solid Highlight;
    outline-offset: -4px;
  }
}