/* ===========================================================================
   Neural Atlas x research-innovation: the merge layer.

   Everything here is gated on body.rm-atlas-active, which atlas-app.js sets
   only once it has decided it can actually render the constellation (wide
   viewport, WebGL2, motion allowed). Without that class not one of these rules
   applies and the page is exactly the page it is without the Atlas - still
   drawing its own 2D constellation, still scrolling normally. That gate is the
   whole fallback story: mobile, no-WebGL and reduced-motion all get the
   untouched export.

   The hero coordinates line up because they are the same numbers: the Atlas's
   node field values are the export's own constellation coordinates, run
   through the same margin formula (x = .05 + fx * .86, y = .16 + fy * .78).

   On !important: the visibility rules below are transient state overrides that
   have to win against both the export and the WordPress theme. The theme
   styles generic names this page also uses - .eyebrow and #header among them -
   and measuring on the live page showed it taking those back. Specificity
   games against a stylesheet we do not own would be guesswork; stating the
   state outright is honest about what these rules are for.
   ========================================================================= */

/* ---- layering -------------------------------------------------------------
   The export paints main's background and a fixed bg.svg at z-0, and puts all
   its content at z-10. The scene slots between the two: the hero becomes a
   window onto it, while the text and the theme chrome stay on top. The UI
   overlay goes above everything; it is pointer-events:none, and the Atlas
   already marks its own interactive parts auto, so drags still reach the
   canvas underneath. */
body.rm-atlas-active #stage { z-index: 1; }
/* 900 is deliberate, and the one number here that matters beyond stacking the
   Atlas over the page: the theme dims and blurs the page behind an open mega
   menu with a body::before at z-index 1000 (rgba(0,0,0,.7) + blur(3px)), and
   its sticky header sits at 1001. At 2000 the star labels floated over both,
   staying sharp and bright while everything else receded - which read as them
   not belonging to the page. Below 1000 they join the same treatment for free,
   with no second blur mechanism to keep in sync. Still far above the export's
   content layer at 10, and the theme header is hidden during the journey, so
   nothing covers the Atlas while it owns the screen. */
body.rm-atlas-active #rm-atlas-ui {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
}

/* ---- the brain stays draggable during the journey -------------------------
   Standalone, the canvas was the top of the document and got every pointer
   event. Merged it sits at z-index 1 while the export's content layer sits at
   z-index 10, so the hero section covers it edge to edge - and an element with
   invisible contents still hit-tests. That alone swallowed every pointerdown
   and the brain stopped turning.

   While the journey owns the screen the page is a backdrop and takes no input,
   so the drags reach the canvas. It gets its pointer events back on landing,
   at which point #stage gives its own up (see below). */
body.rm-atlas-active:not(.rm-atlas-landed) .rm-ri main > div.relative.z-10 {
  pointer-events: none !important;
}

/* ---- keep the scroll chain clear ------------------------------------------
   Two boxes between the hero and the document are scroll containers by
   accident: main carries the export's .overflow-x-hidden, and #wrapper carries
   the theme's overflow:hidden. Neither is meant to scroll, but that is not how
   the browser reads them - when one axis is `hidden` the other's `visible`
   computes to `auto`, which makes the box a scroll container with nowhere to
   go, and a wheel gesture handed to one of those can die there instead of
   reaching the document. On a Mac that shows up as the elastic nudge you get
   when a page cannot scroll, while the scrollbar - which addresses the
   document directly - still works. Exactly the reported symptom.

   `clip` clips identically but is explicitly not a scroll container, so the
   wheel passes through to the document. It also cannot break the sticky
   header the way `hidden` can, for the same reason.

   Scoped to this page via body.rm-atlas-active: the theme's own rule stays
   untouched everywhere else. */
body.rm-atlas-active .rm-ri main { overflow-x: clip; }
body.rm-atlas-active #wrapper { overflow: clip; }

/* Once the journey has landed the canvas is a backdrop, not an instrument -
   nothing is dragged on it any more. Taking it out of hit-testing means it can
   never become the target of a wheel gesture, and a fixed element's scroll
   chain skips its DOM ancestors and goes straight to the viewport, which is
   another way the delta can end up somewhere that cannot use it. */
body.rm-atlas-landed #stage { pointer-events: none; }

/* ---- only one of the two may draw the star map ----------------------------
   The export's own 2D constellation is the same formation the journey has been
   assembling, so it is switched off here rather than cross-faded. The hero's
   panel gradient and glow go with it: the 3D scene supplies the sky now. */
body.rm-atlas-active .rm-ri .constellation-wrap { display: none !important; }
body.rm-atlas-active .rm-ri main > div.relative.z-10 > section:first-of-type > div > div.pointer-events-none {
  display: none !important;
}

/* ---- while the journey runs, the page waits ------------------------------ */
body.rm-atlas-active:not(.rm-atlas-landed) #header,
body.rm-atlas-active:not(.rm-atlas-landed) #wrapper > footer,
body.rm-atlas-active:not(.rm-atlas-landed) > footer,
body.rm-atlas-active:not(.rm-atlas-landed) .rm-ri main > div.relative.z-10 > *:not(section:first-of-type) {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ...and then arrives around the settled constellation. */
body.rm-atlas-active #header,
body.rm-atlas-active #wrapper > footer,
body.rm-atlas-active > footer,
body.rm-atlas-active .rm-ri main > div.relative.z-10 > * {
  transition: opacity .8s ease .3s;
}

/* ---- the headline writes itself in ----------------------------------------
   Same sequence and the same delays the Atlas used on its own copy of the
   hero: eyebrow, then the h1 a word at a time, then the paragraph and the
   buttons behind the last word.

   The column's children and the h1's word spans are driven separately. The
   spans only exist because atlas-app.js splits the heading on startup; if that
   ever stops happening - React re-rendering the heading would do it - the
   column rules alone still hide and reveal the h1, so the failure mode is a
   heading that appears all at once rather than one that never appears. */
body.rm-atlas-active .rm-ri main > div.relative.z-10 > section:first-of-type > div > div.z-10 > *,
body.rm-atlas-active .rm-ri main > div.relative.z-10 > section:first-of-type > div > div.z-10 h1 .word {
  transition: opacity .75s ease, transform .75s cubic-bezier(.22, .8, .3, 1);
}
body.rm-atlas-active .rm-ri main > div.relative.z-10 > section:first-of-type > div > div.z-10 h1 .word {
  display: inline-block;
}

body.rm-atlas-active:not(.rm-atlas-landed) .rm-ri main > div.relative.z-10 > section:first-of-type > div > div.z-10 > *,
body.rm-atlas-active:not(.rm-atlas-landed) .rm-ri main > div.relative.z-10 > section:first-of-type > div > div.z-10 h1 .word {
  opacity: 0 !important;
  transform: translateY(14px) !important;
}

body.rm-atlas-landed .rm-ri main > div.relative.z-10 > section:first-of-type > div > div.z-10 > *,
body.rm-atlas-landed .rm-ri main > div.relative.z-10 > section:first-of-type > div > div.z-10 h1 .word {
  opacity: 1 !important;
  transform: none !important;
}
body.rm-atlas-landed .rm-ri main > div.relative.z-10 > section:first-of-type > div > div.z-10 > :nth-child(1) {
  transition-delay: .15s;
}
body.rm-atlas-landed .rm-ri main > div.relative.z-10 > section:first-of-type > div > div.z-10 h1 .word {
  transition-delay: calc(.45s + var(--i) * .13s);
}
body.rm-atlas-landed .rm-ri main > div.relative.z-10 > section:first-of-type > div > div.z-10 > :nth-child(3) {
  transition-delay: calc(.62s + var(--words, 8) * .13s);
}
body.rm-atlas-landed .rm-ri main > div.relative.z-10 > section:first-of-type > div > div.z-10 > :nth-child(4) {
  transition-delay: calc(.78s + var(--words, 8) * .13s);
}

/* ===========================================================================
   Style guide layer - https://rm-style-guide.vercel.app/

   The Atlas was built as a standalone page and brought its own palette, its
   own type stack and its own button. Merged into research-innovation that
   reads as a different brand for eleven seconds before handing over to one
   that is on-guide - the export itself already paints ink-900 #000618, brand
   #f16b37 and fg-blue #b8caff, which are the guide's own tokens.

   Everything here is a correction toward the guide, scoped the same way as the
   rest of this file so the untouched export is still what a no-WebGL visitor
   gets. Hardcoded hex literals that no variable could reach - the inline
   illustration SVGs, the identity marks - were swapped in the source instead;
   see patch-atlas-style.py.

   Specificity, not !important: atlas-ui.css states these as `#rm-atlas .x`
   (one id, one class), so `body.rm-atlas-active #rm-atlas .x` wins on its own
   and keeps winning inside atlas-ui.css's own media queries. That is deliberate
   - the Atlas only ever runs at >=768px (atlasEligible), so its phone
   breakpoints are unreachable and flattening them costs nothing.
   ========================================================================= */

/* ---- tokens ---------------------------------------------------------------
   next/font scopes --font-gilroy / --font-ubuntu / --font-playfair to the
   __variable_* classes on the export's root element, and #rm-atlas is a
   sibling of that element, not a child. The page template copies those class
   names across (see page-next-ri-hosted-v2.php) so the names resolve here;
   the literal fallbacks are what shows if that ever stops happening. */
body.rm-atlas-active #rm-atlas {
  --font: var(--font-ubuntu, "Ubuntu"), "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: var(--font-gilroy, "Gilroy"), system-ui, sans-serif;

  /* --void and --orange are already correct: patched at the source, because
     the same two values also sit in SVG fills the cascade cannot reach. */
  --navy: #000c32;
  --blue: #08288b;
  --white: #ffffff;
  --muted: #97a5ce;
  --line: rgba(57, 81, 153, .4);

  --rm-body-blue: #b8caff;
  --rm-eyebrow: #d4d8e0;
  --rm-cta-gradient: linear-gradient(79deg, #ff8555 0%, #d04813 100%);
  --rm-cta-arrow: #08288b;
  --rm-cta-shadow: 0 12px 40px rgba(208, 72, 19, .35);
  --rm-cta-shadow-hover: 0 20px 56px rgba(255, 133, 85, .55), 0 10px 28px rgba(208, 72, 19, .45);
}

/* ---- the eyebrow ----------------------------------------------------------
   The guide's eyebrow is the orange brand mark plus an uppercase label, and
   the export already draws precisely that on .eyebrow. Copying the recipe
   rather than inventing a second one means the intro's eyebrow and the hero's
   are the same object - which is the point, since one becomes the other.
   The 12px below it is fixed by the guide (--rm-gap-eyebrow-title). */
/* flex + fit-content rather than the export's inline-flex: .intro is a plain
   block container, so an inline-level eyebrow would sit in a line box and add
   its leading under the mark - and then the 12px below is not 12px. In the
   export this does not arise, because there the eyebrow is a flex item. */
body.rm-atlas-active #rm-atlas .intro-kicker {
  display: flex;
  width: fit-content;
  align-items: flex-end;
  gap: .25rem;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .171em;
  text-transform: uppercase;
  color: var(--rm-eyebrow);
  margin-bottom: 12px;
}
body.rm-atlas-active #rm-atlas .intro-kicker::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 25px;
  height: 45px;
  margin-right: -.6rem;
  background: url(/pages_static/research-innovation/eyebrow-icon.svg) no-repeat 50% / contain;
}

/* ---- the headline and the text under it -----------------------------------
   H1 is the guide's: Gilroy 800, 54px, lh 1.25, ls -3%. Then the fixed rhythm
   24px to the first paragraph and 32px to the CTA. The promise line is the
   guide's 18px intro-alinea, the paragraph below it the 16px body. */
body.rm-atlas-active #rm-atlas .intro h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1.25;
  letter-spacing: -.03em;
  color: var(--white);
}
body.rm-atlas-active #rm-atlas .intro-promise {
  font-family: var(--font);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--rm-body-blue);
  margin-top: 24px;
}
body.rm-atlas-active #rm-atlas .intro p {
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 16px;
}
/* 12px is the smallest size the guide's type scale has; this sat at 10px. */
body.rm-atlas-active #rm-atlas .intro-footnote {
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--muted);
  margin: 16px 0 0 2px;
}

/* ---- the primary CTA ------------------------------------------------------
   Button-anatomie, maat lg (the hero CTA): 50px tall, and that height is the
   chip's - 7px padding, 36px chip, 7px padding. Measured from the text it
   would be 31px, which is why the padding reads 7px and not 16px. Pill radius,
   the static 79 degree gradient, Ubuntu 15px/700, 14px gap, no shadow at rest.

   The chip holds two identical arrows. On hover the first leaves diagonally to
   the top-right and the second arrives from the bottom-left, so the arrow
   never travels across the middle. That needs two elements, which is the one
   reason this button's markup had to change. */
body.rm-atlas-active #rm-atlas .start-button {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 50px;
  padding: 7px 7px 7px 30px;
  border-radius: 9999px;
  background: var(--rm-cta-gradient);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  box-shadow: none;
  transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1),
              box-shadow 320ms ease,
              filter 320ms ease;
}
body.rm-atlas-active #rm-atlas .start-button:hover,
body.rm-atlas-active #rm-atlas .start-button:focus-visible {
  background: var(--rm-cta-gradient);
  transform: translateY(-3px) scale(1.025);
  box-shadow: var(--rm-cta-shadow-hover);
  filter: brightness(1.07) saturate(1.05);
}
body.rm-atlas-active #rm-atlas .start-button:active {
  transform: translateY(-1px) scale(1);
  box-shadow: var(--rm-cta-shadow);
  transition-duration: 140ms;
}
/* The chip is shared by the primary CTA and the outline button on each story
   stop - the guide gives both the same one, white with a navy arrow, and only
   varies what is around it. */
body.rm-atlas-active #rm-atlas .cta-chip {
  position: relative;
  overflow: hidden;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: #fff;
}
/* Navy on white, not orange on white: the guide picks this one for contrast
   (12.5:1) and calls out the Figma chip that gets it wrong. */
body.rm-atlas-active #rm-atlas .cta-chip .cta-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  color: var(--rm-cta-arrow);
  transition: transform 380ms cubic-bezier(.65, 0, .35, 1), opacity 260ms ease;
}
body.rm-atlas-active #rm-atlas .cta-arrow-out { transform: translate(-50%, -50%); }
body.rm-atlas-active #rm-atlas .cta-arrow-in { opacity: 0; transform: translate(-180%, 80%); }
body.rm-atlas-active #rm-atlas :is(.start-button, .story-next):hover .cta-arrow-out,
body.rm-atlas-active #rm-atlas :is(.start-button, .story-next):focus-visible .cta-arrow-out {
  opacity: 0;
  transform: translate(80%, -180%);
}
body.rm-atlas-active #rm-atlas :is(.start-button, .story-next):hover .cta-arrow-in,
body.rm-atlas-active #rm-atlas :is(.start-button, .story-next):focus-visible .cta-arrow-in {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* ---- the secondary button -------------------------------------------------
   .story-next, the button under each stop's story text. The guide's outline
   button is the primary's twin: identical padding, gap, type and chip, with a
   1px border and no fill instead of the gradient - which puts it at 52px
   rather than 50px, the border included.

   It was an 8px rectangle in orange-on-orange (a #ff8737 border over a #ff8737
   wash, with #ffb07a text) - three uses of the accent for something that is
   not the thing the reader should look at. The guide reserves orange for the
   CTA, the mark, icons, one word in a heading and active states; a secondary
   action is none of those, so this goes white on transparent. */
body.rm-atlas-active #rm-atlas .story-next {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  margin-top: 32px;
  padding: 7px 7px 7px 30px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 9999px;
  background: transparent;
  color: var(--white);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  transition: background-color 320ms ease, border-color 320ms ease;
}
body.rm-atlas-active #rm-atlas .story-next:hover {
  background: rgba(255, 255, 255, .08);
  border-color: #fff;
  color: var(--white);
  transform: none;
}

/* ---- the headings the journey shows on the way ----------------------------
   Everything in #rm-atlas inherits --font, which is now Ubuntu, so any heading
   without a family of its own silently became body type - headings are the one
   place that is wrong. Gilroy is the display face; the guide's scale puts H2 at
   700/36px/lh 1.25 and H5 at 700/18px/lh 1.5.

   Sizes are left where the element has to fit a 390px floating card; only the
   ones that were under the scale's 12px floor move. */
body.rm-atlas-active #rm-atlas .story-text h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
}
body.rm-atlas-active #rm-atlas .story-text p {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
}
body.rm-atlas-active #rm-atlas .settings-heading h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0;
}
body.rm-atlas-active #rm-atlas .settings-heading p {
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.5;
}
/* ---- the last of the undersized text -------------------------------------
   12px is the floor of the guide's type scale (p-XS) and everything below was
   sitting at 7 to 11px. These are the ones that are actually rendered - the
   sweep also turned up .transport and .media-description, which no markup in
   the bundle ever creates, so they are left where they are rather than
   "corrected" in dead CSS. */
body.rm-atlas-active #rm-atlas #render-info,
body.rm-atlas-active #rm-atlas .attribution,
body.rm-atlas-active #rm-atlas .media-placeholder-note,
body.rm-atlas-active #rm-atlas .media-window-bar,
body.rm-atlas-active #rm-atlas .media-error,
body.rm-atlas-active #rm-atlas .compartment-label,
body.rm-atlas-active #rm-atlas .loading > span:last-child {
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.5;
}
/* A type label with the brand mark in front of it - the guide sets those in
   12px uppercase 500, same as a badge without the border. */
body.rm-atlas-active #rm-atlas .media-type {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* The last off-palette tint in the build: #edbc94, a seventh orange. */
body.rm-atlas-active #rm-atlas .media-add {
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.5;
  color: var(--orange);
}

/* ---- the other buttons ----------------------------------------------------
   The topbar pair are the guide's small outline button: 38px, pill, Ubuntu
   14px/700, 1px border. They keep their leading icon rather than gaining a
   trailing chip - they toggle a view, they do not lead anywhere. */
body.rm-atlas-active #rm-atlas .quiet-button {
  height: 38px;
  padding: 0 18px;
  gap: 10px;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: rgba(0, 6, 24, .35);
  color: var(--rm-body-blue);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  transition: background-color 320ms ease, border-color 320ms ease, color 320ms ease;
}
body.rm-atlas-active #rm-atlas .quiet-button:hover {
  background: rgba(8, 40, 139, .45);
  color: var(--white);
}
body.rm-atlas-active #rm-atlas .quiet-button[aria-pressed="true"],
body.rm-atlas-active #rm-atlas .quiet-button[aria-expanded="true"] {
  border-color: rgba(241, 107, 55, .45);
  background: rgba(241, 107, 55, .075);
  color: var(--orange);
}

/* Tekstlink ("ghost") - no chip, no fill, Ubuntu 700. */
body.rm-atlas-active #rm-atlas .reset-button {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--rm-body-blue);
}

/* The WebGL-failed screen is the one place a visitor sees a CTA without the
   scene behind it, so it gets the full primary recipe, chipless variant:
   symmetrical padding, same height, so it matches a chipped button in a row. */
body.rm-atlas-active #rm-atlas .fallback button {
  min-height: 50px;
  padding: 7px 30px;
  border-radius: 9999px;
  background: var(--rm-cta-gradient);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
}
body.rm-atlas-active #rm-atlas .fallback h1 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.03em;
}
body.rm-atlas-active #rm-atlas .fallback p {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
}

/* ---- labels, tags and the rest of the chrome ------------------------------
   Badge recipe: 26px tall, 4/12 padding, pill, 1px border at ~45%, 12px
   uppercase. This was a 7px rectangle in two further oranges (#bc7543 border,
   #f5ae7e text) that the guide's one-orange rule does not allow. The dark fill
   stays - these sit on a star field and need something to be legible against. */
body.rm-atlas-active #rm-atlas .star-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 4px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(241, 107, 55, .45);
  background: rgba(0, 6, 24, .72);
  color: var(--orange);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Chapter markers read as status labels: 12px uppercase, the guide's floor. */
body.rm-atlas-active #rm-atlas .journey-stops button {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  gap: 8px;
}
body.rm-atlas-active #rm-atlas .chapter-readout {
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* 9px and 7px are well under the scale; 12px is the smallest it goes. */
body.rm-atlas-active #rm-atlas .bottom-caption {
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.5;
}

/* ---- radii onto the scale -------------------------------------------------
   The scale is 3 / 8 / 12 / 16 / 24 / pill. In use were 4, 5, 6, 7, 8, 9, 10,
   11, 13, 17, 18 and 30px - near-misses that add up to a surface that does not
   feel like the rest of the site. Mapped by what the guide says each step is
   for: panels 16, tool-panels and thumbnails 12, inputs and small chips 8,
   mini-bars 3, and anything button- or badge-shaped pill. */
body.rm-atlas-active #rm-atlas .media-panel { border-radius: 16px; }
body.rm-atlas-active #rm-atlas .media-window { border-radius: 12px; }
body.rm-atlas-active #rm-atlas .media-screen { border-radius: 8px; }
body.rm-atlas-active #rm-atlas .journey-dock { border-radius: 16px; }
body.rm-atlas-active #rm-atlas .setting-select select { border-radius: 8px; }
body.rm-atlas-active #rm-atlas .switch-track { border-radius: 9999px; }
body.rm-atlas-active #rm-atlas .compartment-label { border-radius: 3px; }
body.rm-atlas-active #rm-atlas input[type="range"] { border-radius: 3px; }

/* ---- focus ring -----------------------------------------------------------
   Orange on a dark field is the guide's accent; the offset stays generous
   because these controls sit over moving starlight. */
body.rm-atlas-active #rm-atlas button:focus-visible,
body.rm-atlas-active #rm-atlas a:focus-visible,
body.rm-atlas-active #rm-atlas input:focus-visible,
body.rm-atlas-active #rm-atlas select:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

/* Tijdelijk verborgen (Sabrina, 2026-10-12): logo, knoppen, hint, hoofdstukbalk, attributie/render-info.
   Alleen verbergen, niet verwijderen: atlas-app.js verwacht deze elementen. */
body.rm-atlas-active #rm-atlas .topbar,
body.rm-atlas-active #rm-atlas .settings-panel,
body.rm-atlas-active #rm-atlas .chapter-readout,
body.rm-atlas-active #rm-atlas .journey-dock,
body.rm-atlas-active #rm-atlas .bottom-caption { display: none !important; }

/* Playfair-accent in de intro-kop (zelfde als "Search Lab" in de landingskop) */
body.rm-atlas-active #rm-atlas .intro h1 .rm-pf-intro {
  font-family: "Playfair Display", "__Playfair_Display_86b090", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #f16b37;
}

/* Mobiel / geen Atlas: loader en alle Atlas-lagen weg (de gate in het template haalt de markup ook uit de DOM) */
@media (max-width:767px){#rm-atlas{display:none !important}}
html.rm-atlas-skip #rm-atlas{display:none !important}