/* public/story.css: the Strategy and Vision story (public/story-page.jsx, public/story-slides.jsx).
   Class names start with rs- and element rules sit under :where(.r-story), so nothing here reaches the
   offerings UI. Type is the Reurbano design system's: Tomato Grotesk for display (32px and up; 24px may
   be either), PP Neue Machina for body and labels, sizes only from 56/48/40/32/24/18/16/14/12. Both
   fonts are declared in styles.css. No container-type on .r-story itself: it would make the contents
   menu (position: fixed) position against the story instead of the screen. */

/* Snap. The page (not an inner box) scrolls; slides and the offerings snap to their top. Mandatory
   only where every slide fits one screen; elsewhere proximity, so a taller slide is never trapped. */
html.r-snap { scroll-snap-type: y proximity; }
@media (min-width: 1001px) and (min-height: 600px) {
  html.r-snap { scroll-snap-type: y mandatory; }
}
/* The offerings sit under the fixed site header (48px, --rs-head, which is not in scope here). */
.r-offerings { scroll-snap-align: start; scroll-margin-top: 48px; }

.r-story {
  --rs-cream: #FAF7F3; --rs-white: #FFFFFF; --rs-ink: #393433; --rs-blue: #4866B2; --rs-lime: #EDFE38;
  --rs-muted: #6B6361; --rs-line: #DDD6CE; --rs-soft: #4D4644; --rs-pale: #E8ECF7; --rs-pale2: #DCE3F5;
  --rs-disp: "Tomato Grotesk", "Helvetica Neue", sans-serif;
  --rs-body: "Neue Machina", "Helvetica Neue", sans-serif;
  --rs-head: 48px;
  --rs-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative;
  padding-top: var(--rs-head); /* room for the fixed site header */
  background: var(--rs-cream);
  color: var(--rs-ink);
  font: 400 16px/1.5 var(--rs-body);
  -webkit-font-smoothing: antialiased;
}
:where(.r-story) *, :where(.r-story) *::before, :where(.r-story) *::after { box-sizing: border-box; }
:where(.r-story) :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
:where(.r-story) img { display: block; max-width: 100%; }
:where(.r-story) button { font: inherit; color: inherit; }
.r-story :focus-visible { outline: 2px solid var(--rs-blue); outline-offset: 2px; }

/* ── type ── */
.rs-h2 { font: 400 40px/1.3 var(--rs-disp); letter-spacing: -1px; text-transform: uppercase; margin: 0 0 20px; max-width: 900px; }
.rs-lead { font-size: 18px; line-height: 1.5; max-width: 640px; }
.rs-kick { font: 400 12px/1.5 var(--rs-body); text-transform: uppercase; color: var(--rs-muted); }

/* ── site header: fixed at the top over the story and the offerings alike ── */
.rs-top { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--rs-head); background: var(--rs-cream); border-bottom: 1px solid var(--rs-ink); }
.rs-hbar { height: 100%; display: flex; align-items: center; gap: 18px; padding: 0 20px; }
.rs-logo { display: flex; align-items: center; flex: none; padding: 0; background: none; border: 0; cursor: pointer; color: var(--rs-ink); }
.rs-logo svg { height: 22px !important; width: auto !important; } /* keep: ReurbanoMark sets its height inline */
.rs-nav { display: flex; align-items: center; gap: 2px; }
.rs-nav a, .rs-nav button { font: 400 12px/1.5 var(--rs-body); text-transform: uppercase; color: var(--rs-ink); text-decoration: none; white-space: nowrap; padding: 7px 10px; background: none; border: 0; cursor: pointer; }
.rs-nav a:hover, .rs-nav button:hover { color: var(--rs-blue); }
.rs-nav .rs-cur { color: var(--rs-blue); box-shadow: inset 0 -2px 0 var(--rs-blue); }
.rs-where { display: none; flex: 1; min-width: 0; font: 400 12px/1.5 var(--rs-body); text-transform: uppercase; color: var(--rs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-where b { font-weight: 400; color: var(--rs-ink); }
/* the confidentiality note, right-aligned before the language switch; two lines at most */
.rs-conf { flex: 1; min-width: 0; margin: 0 4px 0 24px; font: 400 12px/1.35 var(--rs-body); color: var(--rs-muted); text-align: right;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.rs-hright { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.rs-lang { display: flex; gap: 2px; }
.rs-lang button { font: 400 12px/1.5 var(--rs-body); padding: 4px 6px; background: none; border: 0; cursor: pointer; color: var(--rs-muted); }
.rs-lang button[aria-pressed="true"] { color: var(--rs-ink); box-shadow: inset 0 -2px 0 var(--rs-lime); }
.rs-menu-btn { display: none; font: 400 12px/1.5 var(--rs-body); text-transform: uppercase; padding: 5px 10px; background: transparent; border: 1px solid var(--rs-ink); cursor: pointer; }
@media (max-width: 1000px) {
  .rs-nav, .rs-conf { display: none; }
  .rs-where { display: block; }
  .rs-menu-btn { display: inline-block; }
  .rs-hright { margin-left: 0; }
}
@media (max-width: 700px) {
  .rs-hbar { gap: 10px; padding: 0 14px; }
  .rs-logo svg { height: 16px !important; } /* keep: see above */
  .rs-hright .rs-lang { display: none; }
}

/* ── the rail beside the slides (desktop) ── */
.rs-rail { display: none; }
@media (min-width: 1001px) {
  .rs-frame { display: grid; grid-template-columns: 208px minmax(0, 1fr); }
  .rs-rail { display: block; position: sticky; top: var(--rs-head); align-self: start; z-index: 6;
    height: calc(100vh - var(--rs-head)); height: calc(100dvh - var(--rs-head)); overflow: auto;
    padding: 24px 14px 20px 18px; background: var(--rs-cream); border-right: 1px solid var(--rs-line); }
}
.rs-rail ol { list-style: none; margin: 0; padding: 0; }
.rs-rail li a { display: grid; grid-template-columns: 24px 1fr; padding: 5px 0 5px 10px; border-left: 2px solid var(--rs-line); font: 400 12px/1.45 var(--rs-body); color: var(--rs-muted); text-decoration: none; }
.rs-rail li a:hover { color: var(--rs-ink); }
.rs-rail li a.rs-cur { color: var(--rs-ink); border-left-color: var(--rs-blue); }
.rs-rail li.rs-rail-off { margin-top: 14px; }
.rs-rail li.rs-rail-off a { border-left-color: transparent; text-transform: uppercase; color: var(--rs-ink); }
.rs-rail li.rs-rail-off a.rs-cur { color: var(--rs-blue); border-left-color: var(--rs-blue); }

/* ── slides ── */
.rs-slides { min-width: 0; container: rs / inline-size; }
/* One title line: every slide's title starts at the same height (80px under the header, 34px on phones), so
   it stays put as the page snaps from slide to slide. */
.rs-slide { position: relative; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden;
  min-height: calc(100vh - var(--rs-head)); min-height: calc(100dvh - var(--rs-head));
  padding: 80px 48px 40px; background: var(--rs-cream); scroll-margin-top: var(--rs-head); scroll-snap-align: start; }
.rs-bg-white { background: var(--rs-white); }
.rs-bg-blue { background: var(--rs-blue); color: var(--rs-cream); }
.rs-bg-blue .rs-kick { color: var(--rs-pale2); }
.rs-bg-photo { background: #222; color: var(--rs-cream); justify-content: flex-end; }
.rs-sin { position: relative; z-index: 1; width: 100%; max-width: 1080px; margin: 0 auto; }
.rs-sno { position: absolute; right: 18px; bottom: 14px; z-index: 3; font: 400 12px/1.5 var(--rs-body); color: var(--rs-muted); }
.rs-bg-blue .rs-sno, .rs-bg-photo .rs-sno { color: var(--rs-pale2); }
@container rs (max-width: 700px) {
  .rs-slide { padding: 34px 18px 44px; min-height: calc(100vh - var(--rs-head)); min-height: calc(100svh - var(--rs-head)); }
  .rs-h2 { font-size: 24px; letter-spacing: 0; }
  .rs-lead { font-size: 16px; }
}

/* 01 cover: the purpose on its own, as a manifesto, with the two ways in, centered between the head row
   and the foot. It sits outside the slides column, so it answers to the screen width. */
.rs-slide.rs-t-cover { padding: 40px 56px 56px; }
.rs-t-cover .rs-sno { display: none; }
.rs-cv { flex: 1; display: flex; flex-direction: column; }
.rs-cv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid rgba(250, 247, 243, .35); }
.rs-cv-head .rs-kick { margin: 0; }
/* a tailored copy's dedication: "Prepared for" and the recipient's logo, one color, in the head row */
.rs-cv-head:has(.rs-cv-for) { align-items: center; }
.rs-cv-for { display: flex; align-items: center; gap: 20px; }
.rs-cv-for { flex: none; }
.rs-cv-for img { display: block; height: 56px; width: auto; }
.rs-cv-head:has(.rs-cv-for) .rs-cv-title { min-width: 0; text-align: right; }
@media (max-width: 1000px) {
  .rs-cv-head:has(.rs-cv-for) { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rs-cv-head:has(.rs-cv-for) .rs-cv-title { text-align: left; }
  .rs-cv-for img { height: 44px; }
}
.rs-cv-title { margin: 0; font: 400 24px/1.2 var(--rs-disp); text-transform: uppercase; }
.rs-cv-purpose { max-width: 1240px; margin: auto 0 0; font: 400 56px/1.15 var(--rs-disp); letter-spacing: -1.4px; }
.rs-em { font-style: normal; color: var(--rs-lime); }
.rs-cv .rs-ctas { margin: 36px 0 auto; }
.rs-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.rs-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 18px; font: 400 14px/1.2 var(--rs-body); text-transform: uppercase; text-decoration: none; color: var(--rs-ink); background: transparent; border: 1px solid var(--rs-ink); cursor: pointer; }
.rs-btn-lime { background: var(--rs-lime); border-color: var(--rs-lime); color: var(--rs-ink); }
.rs-btn-light { color: var(--rs-cream); border-color: var(--rs-cream); }
@media (max-width: 1000px) {
  .rs-cv-purpose { font-size: 48px; letter-spacing: -1.2px; }
}
@media (max-width: 700px) {
  .rs-slide.rs-t-cover { padding: 24px 18px 40px; min-height: calc(100vh - var(--rs-head)); min-height: calc(100svh - var(--rs-head)); }
  .rs-cv-head { flex-direction: column; gap: 6px; }
  .rs-cv-head:has(.rs-cv-for) { align-items: flex-start; gap: 12px; }
  .rs-cv-for { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rs-cv-for img { height: 36px; }
  .rs-cv-purpose { font-size: 32px; letter-spacing: -.5px; }
  .rs-cv .rs-ctas { margin-top: 28px; }
  .rs-btn { font-size: 12px; }
}

/* 02 our work: the lead-in and the three commitments beside the mosaic, the four numbers right under
   them, and the press on a white strip at the foot. The mosaic takes the height the rest leaves; the
   large tile is Casa Emilio Dondé 7, and every project shows once. */
.rs-slide.rs-t-work { padding-bottom: 0; }
.rs-wk { flex: 1; display: grid; grid-template-columns: minmax(0, 420fr) minmax(0, 620fr); column-gap: 40px; }
.rs-wk-text { display: flex; flex-direction: column; }
.rs-wk .rs-h2 { margin: 0 0 10px; }
.rs-wk-copy { margin: 4px 0 22px; font-size: 16px; line-height: 1.5; }
.rs-lenses { list-style: none; margin: 0; padding: 0; }
.rs-lenses li { padding: 20px 0; border-top: 1px solid var(--rs-line); }
.rs-lenses li:last-child { border-bottom: 1px solid var(--rs-line); }
.rs-lenses h3 { font: 400 18px/1.35 var(--rs-body); }
.rs-lenses p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--rs-soft); }
.rs-wk-link { align-self: flex-start; margin-top: auto; padding-top: 12px; font-size: 14px; line-height: 1.5; color: var(--rs-blue); text-decoration: none; white-space: nowrap; }
.rs-wk-link span { border-bottom: 1px solid currentColor; }
.rs-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; min-height: 330px; }
.rs-mosaic figure { position: relative; overflow: hidden; background: var(--rs-line); }
.rs-mosaic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rs-mosaic figcaption { position: absolute; z-index: 1; left: 0; bottom: 0; max-width: 100%; padding: 5px 9px; background: var(--rs-cream); font-size: 12px; line-height: 1.3; color: var(--rs-ink); }
.rs-m-large { grid-column: span 2; grid-row: span 2; }
.rs-m-wide { grid-column: span 2; }
.rs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--rs-line); }
.rs-stat-v { font: 400 40px/1.1 var(--rs-disp); letter-spacing: -1px; color: var(--rs-blue); white-space: nowrap; }
.rs-stat-l { margin-top: 6px; font: 400 12px/1.4 var(--rs-body); text-transform: uppercase; color: var(--rs-muted); }
.rs-pressbar { margin: 26px -48px 0; padding: 18px 48px; background: var(--rs-white); }
.rs-pressbar .rs-sin { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; align-items: center; }
.rs-pressbar .rs-kick { margin: 0; }
.rs-press { --rs-pk: 32px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rs-press img { width: auto; mix-blend-mode: multiply; filter: grayscale(1); opacity: .85; }
/* Where the text column comes within 76px of the slide's right edge, keep the last logo clear of the
   slide number. */
@container rs (min-width: 701px) and (max-width: 1231px) {
  .rs-press { margin-right: 28px; }
}
@container rs (max-width: 1100px) {
  .rs-lenses h3 { font-size: 16px; }
}
@media (min-width: 1001px) and (max-height: 800px) {
  .rs-lenses li { padding: 16px 0; }
  .rs-pressbar { padding-top: 14px; padding-bottom: 14px; }
}
@media (min-width: 1001px) and (max-height: 740px) {
  .rs-wk .rs-h2 { margin-bottom: 8px; }
  .rs-wk-copy { margin-bottom: 14px; }
  .rs-lenses li { padding: 12px 0; }
  .rs-stats { margin-top: 18px; padding-top: 12px; }
  .rs-stat-v { font-size: 32px; letter-spacing: -.5px; }
  .rs-pressbar { margin-top: 18px; padding-top: 12px; padding-bottom: 12px; }
}
@container rs (max-width: 1000px) {
  .rs-wk { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .rs-lenses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .rs-lenses li { grid-template-rows: auto 1fr; border-bottom: 1px solid var(--rs-line); }
  .rs-wk-link { margin-top: 0; }
  .rs-mosaic { min-height: 0; aspect-ratio: 1.6; }
  .rs-stat-v { font-size: 32px; letter-spacing: -.5px; }
  .rs-pressbar .rs-sin { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .rs-press { flex-wrap: wrap; justify-content: flex-start; gap: 14px 24px; }
}
@container rs (max-width: 700px) {
  .rs-lenses { display: block; }
  .rs-lenses li { border-bottom: 0; }
  .rs-lenses li:last-child { border-bottom: 1px solid var(--rs-line); }
  .rs-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 150px; aspect-ratio: auto; }
  .rs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .rs-pressbar { margin: 26px -18px 0; padding: 14px 18px; }
  .rs-pressbar .rs-sin { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .rs-press { --rs-pk: 18px; flex-wrap: wrap; justify-content: flex-start; gap: 12px 18px; }
}

/* 03 team: the founders on cream, their rows lined up across the three columns (subgrid: photo, name,
   first and second bio line), and the advisory board on a full-height blue panel. The founders' left
   edge lines up with the other slides' text (.rs-sin). */
.rs-slide.rs-t-team { padding: 0; }
.rs-t-team .rs-sno { color: var(--rs-pale2); }
.rs-tm { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) clamp(400px, 34cqi, 416px); }
.rs-tm-f { padding: 80px 36px 40px max(48px, calc((100cqi - 1080px) / 2)); }
.rs-tm-b { padding: 80px 44px 40px 36px; background: var(--rs-blue); color: var(--rs-cream); }
.rs-tm .rs-h2 { margin: 0 0 20px; white-space: nowrap; }
.rs-tm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: 24px; }
.rs-tm-p { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.rs-tm-ph { aspect-ratio: 3 / 4; overflow: hidden; background: var(--rs-line); }
/* The founder photos are all cropped to 3:4 with the face the same size and height in the frame, so
   heads match at every size; where the box is squarer or wider, the crop point keeps faces centered. */
.rs-tm-ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 33%; }
.rs-tm-n { margin: 16px 0 10px; font: 400 24px/1.2 var(--rs-disp); letter-spacing: -.3px; text-transform: uppercase; }
.rs-nobr { white-space: nowrap; }
.rs-tm-p p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.rs-tm-a { display: grid; grid-template-columns: 116px minmax(0, 1fr); column-gap: 20px; align-items: start; padding: 26px 0; border-top: 1px solid rgba(250, 247, 243, .35); }
.rs-tm-b .rs-h2 + .rs-tm-a { padding-top: 0; border-top: 0; }
.rs-tm-aph { width: 116px; height: 144px; overflow: hidden; background: var(--rs-soft); }
.rs-tm-aph img { width: 100%; height: 100%; object-fit: cover; }
.rs-tm-an { margin: 0 0 6px; font: 400 18px/1.3 var(--rs-body); }
.rs-tm-role { font-size: 14px; line-height: 1.45; color: var(--rs-pale); }
.rs-tm-logos { display: flex; align-items: center; gap: 14px; height: 24px; margin-top: 10px; }
.rs-tm-logos img { width: auto; }
/* Beside the board, three columns get narrower than "Rivero-Borrell" (about 200px at 24px) below
   this width; there the name may break at its hyphen. */
@container rs (min-width: 1001px) and (max-width: 1135px) {
  .rs-nobr { white-space: normal; }
}
@container rs (max-width: 1100px) {
  .rs-tm-f { padding-right: 28px; }
  .rs-tm-grid { column-gap: 20px; }
  .rs-tm-b { padding-right: 28px; padding-left: 32px; }
}
@media (min-width: 1001px) and (max-height: 800px) {
  .rs-tm-ph { aspect-ratio: 1; }
  .rs-tm-a { column-gap: 16px; padding: 20px 0; }
  .rs-tm-aph { width: 104px; height: 128px; }
}
@media (min-width: 1001px) and (max-height: 740px) {
  .rs-tm-ph { aspect-ratio: 4 / 3; }
  .rs-tm-ph img { object-position: center 44%; }
  .rs-tm .rs-h2 { margin-bottom: 16px; }
  .rs-tm-f, .rs-tm-b { padding-bottom: 24px; }
  .rs-tm-n { margin: 14px 0 8px; }
  .rs-tm-p p { margin-bottom: 6px; line-height: 1.4; }
  .rs-tm-a { padding: 18px 0; }
  .rs-tm-aph { width: 96px; height: 120px; }
}
/* Spanish runs longer: the founders' bios take the tighter line height sooner. */
@media (min-width: 1001px) and (max-height: 800px) {
  @container rs (min-width: 1001px) {
    .r-story:lang(es) .rs-tm-p p { margin-bottom: 6px; line-height: 1.4; }
  }
}
@container rs (max-width: 1000px) {
  .rs-tm { grid-template-columns: minmax(0, 1fr); }
  .rs-tm-f { padding: 80px 48px 40px; }
  .rs-tm-ph { aspect-ratio: 1; }
  .rs-tm-b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; padding: 40px 48px 56px; }
  .rs-tm-b .rs-h2 { grid-column: 1 / -1; }
  .rs-tm-b .rs-tm-a { display: block; padding: 0; border-top: 0; }
  .rs-tm-aph { margin-bottom: 14px; }
}
@container rs (max-width: 700px) {
  .rs-tm-f { padding: 34px 18px 32px; }
  .rs-tm-grid { display: block; }
  .rs-tm-p { display: block; margin-bottom: 28px; }
  .rs-tm-ph { aspect-ratio: 1; }
  .rs-tm-n { margin: 14px 0 8px; }
  .rs-tm-b { display: block; padding: 32px 18px 48px; }
  .rs-tm-b .rs-tm-a { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; padding: 20px 0; border-top: 1px solid rgba(250, 247, 243, .35); }
  .rs-tm-aph { width: 96px; height: 120px; margin: 0; }
}

/* our housing is pulling us apart: three circles drift apart as the slide arrives */
.rs-apart { position: relative; height: 430px; margin-top: 26px; }
.rs-it { position: absolute; top: 0; left: 50%; width: 250px; transition: transform 1.6s var(--rs-ease); }
.rs-circ { width: 230px; height: 230px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 6px var(--rs-cream); }
.rs-it h3 { margin: 18px 0 6px; font: 400 18px/1.3 var(--rs-body); opacity: 0; transition: opacity .6s .9s; }
.rs-it p { font-size: 16px; line-height: 1.5; color: var(--rs-soft); opacity: 0; transition: opacity .6s 1s; }
.rs-i0 { transform: translateX(-62%) translateX(-40px); }
.rs-i1 { transform: translateX(-50%); }
.rs-i2 { transform: translateX(-38%) translateX(40px); }
.rs-in .rs-i0 { transform: translateX(-50%) translateX(calc(-1 * min(330px, 50cqi - 185px))); }
.rs-in .rs-i2 { transform: translateX(-50%) translateX(min(330px, 50cqi - 185px)); }
.rs-in .rs-it h3, .rs-in .rs-it p { opacity: 1; }
/* The lead line under the title, its emphasis in blue. With four circles, --g is the step between their
   centers: at most 262px, and never so wide that the outer text columns (--g less 24px) leave the slide. */
.rs-ap-lead { max-width: 900px; margin-top: -6px; font-size: 18px; line-height: 1.5; color: var(--rs-soft); }
.rs-ap-em { font-style: normal; color: var(--rs-blue); }
@container rs (min-width: 901px) {
  .rs-apart-4 { height: 370px; margin-top: 34px; --g: min(262px, calc(min(1080px, 100cqi - 96px) / 4 + 6px)); }
  .rs-apart-4 .rs-it { width: calc(var(--g) - 24px); }
  .rs-apart-4 .rs-circ { width: min(190px, calc(var(--g) - 24px)); height: min(190px, calc(var(--g) - 24px)); }
  .rs-apart-4 .rs-i0 { transform: translateX(-50%) translateX(calc(-0.9 * var(--g))); }
  .rs-apart-4 .rs-i1 { transform: translateX(-50%) translateX(calc(-0.3 * var(--g))); }
  .rs-apart-4 .rs-i2 { transform: translateX(-50%) translateX(calc(0.3 * var(--g))); }
  .rs-apart-4 .rs-i3 { transform: translateX(-50%) translateX(calc(0.9 * var(--g))); }
  .rs-in .rs-apart-4 .rs-i0 { transform: translateX(-50%) translateX(calc(-1.5 * var(--g))); }
  .rs-in .rs-apart-4 .rs-i1 { transform: translateX(-50%) translateX(calc(-0.5 * var(--g))); }
  .rs-in .rs-apart-4 .rs-i2 { transform: translateX(-50%) translateX(calc(0.5 * var(--g))); }
  .rs-in .rs-apart-4 .rs-i3 { transform: translateX(-50%) translateX(calc(1.5 * var(--g))); }
}
@media (min-width: 1001px) and (max-height: 800px) {
  .rs-apart-4 { height: 330px; margin-top: 26px; }
  .rs-apart-4 .rs-circ { width: min(160px, calc(var(--g) - 24px)); height: min(160px, calc(var(--g) - 24px)); }
}
@container rs (max-width: 900px) {
  .rs-apart { height: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .rs-it, .rs-in .rs-it { position: static; width: auto; transform: none; display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; }
  .rs-circ { width: 92px; height: 92px; box-shadow: none; }
  .rs-it h3 { margin: 0 0 4px; }
}
@container rs (max-width: 700px) {
  .rs-ap-lead { font-size: 16px; }
}

/* we develop housing designed to bring people together: text left, photo right, on blue */
.rs-slide.rs-t-together { padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.rs-tg-txt { display: flex; flex-direction: column; justify-content: center; padding: 48px; }
.rs-tg-txt .rs-h2 { color: var(--rs-cream); }
.rs-tg-txt p { max-width: 520px; font-size: 18px; line-height: 1.5; }
.rs-tg-ph { position: relative; min-height: 320px; background: #222; }
.rs-tg-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* with moves: the body as a lead line, then each move under a rule, marked by a lime square */
.rs-tg-txt .rs-tg-lead { max-width: 540px; margin-bottom: 22px; font: 400 24px/1.35 var(--rs-disp); }
.rs-tg-moves { list-style: none; margin: 0; padding: 0; max-width: 540px; }
.rs-tg-moves li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; padding: 14px 0; border-top: 1px solid rgba(250, 247, 243, .35); }
.rs-tg-moves li > span { width: 10px; height: 10px; margin-top: 7px; background: var(--rs-lime); }
.rs-tg-moves h3 { margin: 0; font: 400 18px/1.3 var(--rs-body); text-transform: uppercase; }
.rs-tg-txt .rs-tg-moves p { max-width: none; margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--rs-pale2); }
@media (min-width: 1001px) and (max-height: 800px) {
  .rs-tg-txt:has(.rs-tg-moves) { padding-top: 28px; padding-bottom: 28px; }
  .rs-tg-txt:has(.rs-tg-moves) .rs-h2 { margin-bottom: 14px; }
  .rs-tg-txt .rs-tg-lead { margin-bottom: 14px; }
  .rs-tg-moves li { padding: 9px 0; }
  .rs-tg-moves h3 { font-size: 16px; }
  .rs-tg-txt .rs-tg-moves p { font-size: 14px; line-height: 1.45; }
}
@container rs (max-width: 700px) {
  .rs-slide.rs-t-together { padding: 0; grid-template-columns: minmax(0, 1fr); }
  .rs-tg-txt { padding: 34px 18px; }
  .rs-tg-txt p { font-size: 16px; }
  .rs-tg-txt .rs-tg-lead { margin-bottom: 16px; font: 400 18px/1.45 var(--rs-body); }
  .rs-tg-moves h3 { font-size: 16px; }
  .rs-tg-txt .rs-tg-moves p { font-size: 14px; }
  .rs-tg-ph { min-height: 280px; }
}

/* operating philosophy: slow tree rings, fast grid wave */
.rs-cards2 { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rs-ink); }
.rs-cards2 > div { position: relative; padding: 36px; }
.rs-slow { background: var(--rs-white); }
.rs-fast { background: var(--rs-blue); color: var(--rs-cream); }
.rs-cards2 h3 { margin: 18px 0 8px; font: 400 24px/1.3 var(--rs-body); }
.rs-cards2 p { max-width: 440px; font-size: 16px; line-height: 1.5; }
.rs-fast p { color: var(--rs-pale); }
.rs-ringbox { position: relative; width: 200px; height: 200px; }
.rs-rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.rs-rings path { stroke-width: 9; }
.rs-ghost { opacity: .13; }
.rs-gridw { display: block; width: 278px; height: 200px; }
.rs-gridw rect { fill: var(--rs-cream); opacity: .14; animation: rs-wave 2s linear infinite; }
.rs-off .rs-gridw rect { animation-play-state: paused; }
@keyframes rs-wave { 0% { opacity: .14; } 1.5% { opacity: 1; } 6% { opacity: .14; } 100% { opacity: .14; } }
@container rs (max-width: 700px) {
  .rs-cards2 { grid-template-columns: minmax(0, 1fr); }
  .rs-cards2 > div { padding: 24px 20px; }
  .rs-ringbox { width: 130px; height: 130px; }
  .rs-gridw { width: 181px; height: 130px; }
}

/* the AI screens: three across, all visible */
.rs-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 24px; }
.rs-three h3 { margin: 16px 0 6px; font: 400 24px/1.3 var(--rs-body); }
.rs-three p { font-size: 16px; line-height: 1.5; }
.rs-ai-intro { max-width: 860px; font-size: 16px; }
.rs-screens { gap: 24px; }
.rs-scr { background: var(--rs-white); border: 1px solid var(--rs-ink); }
.rs-bar { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-bottom: 1px solid var(--rs-line); }
.rs-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--rs-line); }
.rs-shot { aspect-ratio: 1240 / 686; overflow: hidden; }
.rs-shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.rs-screens h3 { font: 400 24px/1.3 var(--rs-disp); text-transform: uppercase; }
.rs-screens p { font-size: 14px; }
.rs-note { margin-top: 14px; font-size: 12px; color: var(--rs-muted); }
@media (min-width: 1001px) and (max-height: 740px) {
  .rs-screens .rs-shot { aspect-ratio: 2; }
  .rs-screens { margin-top: 18px; }
}
@container rs (max-width: 700px) {
  .rs-three { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
/* Spanish runs longer: the intro takes the full width, and short screens trim the shots a little more. */
.r-story:lang(es) .rs-ai-intro { max-width: none; }
@media (min-width: 1001px) and (max-height: 800px) {
  .r-story:lang(es) .rs-screens .rs-shot { aspect-ratio: 2; }
}
@media (min-width: 1001px) and (max-height: 740px) {
  .r-story:lang(es) .rs-screens .rs-shot { aspect-ratio: 2.3; }
}

/* The drawing of the model. It is placed by the building inside it: in the
   1536 x 1024 image the building's line art spans x .165 to .807 and y .062 to .880 (its shadow reaches
   x .906), and --bh is the building's height on screen. The image's paper blends into the cream. */
.rs-draw { position: absolute; }
.rs-draw-art { position: absolute; inset: 0; }
.rs-draw-art img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; mix-blend-mode: multiply; }

/* 06 the model: one slide in two steps over one drawing that holds still (story-slides.jsx). On a
   desktop the slide is two screens tall: its frame is pinned under the header, and each screen is a snap
   stop. First the blue card with the title on the title line and the four phrases; then, as the visitor
   scrolls on (--mp runs 0 to 1), it gives way to the categories. The drawing sits to the right of the
   categories column; the active category's labels float around it, each joined to its spots by a curved
   blue line (story-slides.jsx draws the lines from the labels' measured boxes). A label's box/edge data
   puts the middle of that edge at x/y on the drawing. */
.rs-slide.rs-t-model {
  --in: max(48px, calc((100cqi - 1080px) / 2));
  --bh: min(calc(100dvh - var(--rs-head) - 220px), calc((100cqi - var(--in) - 450px) / 1.1773));
  --ih: calc(var(--bh) / 0.818); --iw: calc(var(--ih) * 1.5);
  --il: calc(var(--in) + 394px - .165 * var(--iw)); --it: calc(70px - .062 * var(--ih));
}
@container rs (min-width: 1001px) {
  /* Each step snaps by its own one-screen anchor: a snap area taller than the screen with another snap
     stop inside it (the slide itself) makes Chrome's wheel scrolling rest in between. */
  .rs-slide.rs-t-model { padding: 0; overflow: clip; scroll-snap-align: none; }
  .rs-mx-a { position: absolute; left: 0; top: 0; width: 1px; pointer-events: none;
    height: calc(100vh - var(--rs-head)); height: calc(100dvh - var(--rs-head)); }
  .rs-mx-a, .rs-mx-next { scroll-snap-align: start; scroll-margin-top: var(--rs-head); }
  /* The pinned frame is its own layer, so it carries the slide's background for the drawing's paper to
     blend into (mix-blend-mode: multiply). */
  .rs-mx, .rs-mx-stick { background: inherit; }
  .rs-mx-stick { position: sticky; top: var(--rs-head); overflow: hidden; padding: 80px 48px 40px;
    height: calc(100vh - var(--rs-head)); height: calc(100dvh - var(--rs-head)); }
  .rs-mx-next { height: calc(100vh - var(--rs-head)); height: calc(100dvh - var(--rs-head)); }
  .rs-mx .rs-mv-card { opacity: clamp(0, calc((.5 - var(--mp, 0)) * 2.6), 1); transform: translateY(calc(var(--mp, 0) * -24px)); }
  .rs-mx .rs-ex, .rs-mx .rs-ex-over { opacity: clamp(0, calc((var(--mp, 0) - .45) * 2.6), 1); }
}
.rs-mv-card { position: absolute; z-index: 2; left: calc(var(--in) - 32px); top: 50px; width: 420px; padding: 30px 32px; background: var(--rs-blue); color: var(--rs-white); }
.rs-mv-card .rs-h2 { margin: 0 0 18px; line-height: 1.15; }
.rs-mv-card ul { list-style: none; margin: 0; padding: 0; }
.rs-mv-card li { padding: 11px 0; border-top: 1px solid rgba(250, 247, 243, .45); font-size: 18px; line-height: 1.4; }
.rs-ex .rs-h2 { margin-bottom: 36px; }
.rs-ex-cats { list-style: none; width: 340px; margin: 0; padding: 0; border-bottom: 1px solid var(--rs-line); }
.rs-ex-cats li { padding: 12px 14px 12px 0; border-top: 1px solid var(--rs-line); }
.rs-ex-cats button { display: block; width: 100%; padding: 0; background: none; border: 0; text-align: left; font: 400 16px/1.4 var(--rs-body); cursor: pointer; }
.rs-ex-cats li.rs-on { margin: 0 -14px; padding: 13px 14px 15px; background: var(--rs-blue); color: var(--rs-white); border-top-color: var(--rs-blue); }
/* the active category's description opens and closes smoothly (nothing moves with reduced motion) */
.rs-ex-desc { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .25s var(--rs-ease), visibility 0s .25s; }
.rs-ex-desc > p { min-height: 0; overflow: hidden; font-size: 14px; line-height: 1.5; }
.rs-ex-cats li.rs-on .rs-ex-desc { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .25s var(--rs-ease), visibility 0s; }
.rs-ex-desc > p::before { content: ""; display: block; height: 6px; }
.rs-ex-cats li.rs-on button:focus-visible { outline-color: var(--rs-lime); }
.rs-ex-draw, .rs-ex-over { position: absolute; left: var(--il); top: var(--it); width: var(--iw); height: var(--ih); }
.rs-ex-draw img { -webkit-mask-image: linear-gradient(90deg, #000 max(calc(.807 * var(--iw) + 6px), calc(100cqi - var(--il) - 70px)), transparent calc(100cqi - var(--il) - 4px));
  mask-image: linear-gradient(90deg, #000 max(calc(.807 * var(--iw) + 6px), calc(100cqi - var(--il) - 70px)), transparent calc(100cqi - var(--il) - 4px)); }
.rs-ex-over { z-index: 2; pointer-events: none; }
.rs-ex-lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; animation: rs-exin .3s ease-out; }
.rs-ex-lines path { fill: none; stroke: var(--rs-blue); stroke-width: 1.5; }
.rs-ex-lines circle { fill: var(--rs-lime); stroke: var(--rs-blue); stroke-width: 2; }
.rs-ex-labels { list-style: none; margin: 0; padding: 0; }
.rs-ex-labels li { position: absolute; width: max-content; max-width: 216px; padding: 6px 10px 7px; background: var(--rs-blue); color: var(--rs-white); font-size: 14px; line-height: 1.35; text-align: center; text-wrap: balance; animation: rs-exin .3s ease-out; }
.rs-ex-labels li[data-edge="top"] { transform: translate(-50%, 0); }
.rs-ex-labels li[data-edge="bottom"] { transform: translate(-50%, -100%); }
.rs-ex-labels li[data-edge="left"] { transform: translate(0, -50%); }
.rs-ex-labels li[data-edge="right"] { transform: translate(-100%, -50%); }
/* Spanish labels run longer: smaller and tighter where they float around the drawing, and narrower
   when they hang above their spot, so they keep clear of the lines and the slide's edge. */
@container rs (min-width: 1001px) {
  .r-story:lang(es) .rs-ex-labels li { font-size: 12px; max-width: 176px; padding: 5px 8px 6px; line-height: 1.25; }
  .r-story:lang(es) .rs-ex-labels li[data-edge="bottom"] { max-width: 156px; }
}
.rs-ex-n, .rs-ex-dot { display: none; }
@keyframes rs-exin { from { opacity: 0; } to { opacity: 1; } }

/* Tablets and phones: the model's steps follow each other, nothing pinned: the card, the categories'
   title, the drawing cropped to the building (x .15 to .92, y .04 to .90), the active category's labels
   as a numbered list (numbered like the spots on the drawing), then the categories. */
@container rs (max-width: 1000px) {
  .rs-mx, .rs-mx-stick { display: contents; }
  .rs-mx-a, .rs-mx-next { display: none; }
  .rs-mv-card { order: -1; }
  .rs-mv-card { position: relative; left: auto; top: auto; width: auto; margin: -80px -48px 0; padding: 80px 48px 28px; }
  .rs-mv-card ul { max-width: 560px; }
  .rs-draw { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 1.343; overflow: hidden; margin-top: 16px; }
  .rs-draw-art { inset: auto; left: -19.48%; top: -4.65%; width: 129.87%; height: 116.28%; }
  .rs-draw-art img { -webkit-mask-image: none; mask-image: none; }
  .rs-ex { display: contents; }
  .rs-ex .rs-h2 { order: 0; margin-bottom: 0; }
  .rs-ex-draw { order: 1; }
  .rs-ex-over { order: 2; position: static; width: auto; height: auto; pointer-events: auto; }
  .rs-ex-cats { order: 3; width: auto; max-width: 560px; margin-top: 28px; }
  .rs-ex-cats li.rs-on { margin: 0; padding: 13px 14px 15px; }
  .rs-ex-lines { display: none; }
  .rs-ex-labels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .rs-ex-labels li, .rs-ex-labels li[data-edge] { position: static; transform: none; display: flex; align-items: center; gap: 8px; max-width: 100%; text-align: left; }
  .rs-ex-n, .rs-ex-dot { display: flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; border: 2px solid var(--rs-blue); border-radius: 50%; background: var(--rs-lime); font: 400 12px/1 var(--rs-body); color: var(--rs-blue); }
  .rs-ex-n { border-color: var(--rs-lime); }
  .rs-ex-dot { position: absolute; z-index: 1; transform: translate(-50%, -50%); }
}
@container rs (max-width: 700px) {
  .rs-mv-card { margin: -34px -18px 0; padding: 34px 18px 24px; }
  .rs-mv-card .rs-h2 { margin-bottom: 12px; }
  .rs-mv-card li { font-size: 16px; }
}

/* 10 impact: one ledger. Planet and People side by side; each row is a lever or an area (its icon and
   name, the research claim with its figure in blue, the source), and the measurement sits at the foot.
   The rows line up across the columns: both columns share one grid, each column's cells keep to their
   column and fill it from the top (dense), while the page keeps planet before people for readers. */
.rs-ld { flex: 1; display: flex; flex-direction: column; }
.rs-ld-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; column-gap: 48px; margin-top: 4px; }
.rs-ld-col { display: contents; }
.rs-ld-col:first-child > * { grid-column: 1; }
.rs-ld-col:last-child > * { grid-column: 2; }
.rs-ld-hd { padding-bottom: 12px; }
.rs-ld-hd h3 { font: 400 24px/1.2 var(--rs-disp); text-transform: uppercase; }
.rs-ld-hd p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--rs-soft); }
.rs-ld-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 18px; padding: 12px 0 14px; border-top: 1px solid var(--rs-line); }
.rs-ld-hd + .rs-ld-row { border-top-color: var(--rs-ink); }
.rs-ld-l { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.5; }
.rs-ld-l img { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.rs-ld-e p { font-size: 14px; line-height: 1.5; }
.rs-ld-fig { font-style: normal; color: var(--rs-blue); white-space: nowrap; }
.rs-ld-e .rs-ld-src { margin-top: 6px; font-size: 12px; color: var(--rs-muted); }
.rs-ld-measure { margin-top: auto; padding: 14px 16px; background: var(--rs-pale); font-size: 14px; line-height: 1.5; }
@container rs (max-width: 1100px) {
  .rs-ld-row { grid-template-columns: 130px minmax(0, 1fr); column-gap: 16px; }
}
@media (min-width: 1001px) and (max-height: 880px) {
  .rs-slide.rs-t-ledger { padding-bottom: 32px; }
  .rs-ld .rs-h2 { margin-bottom: 12px; }
  .rs-ld-hd { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; padding-bottom: 8px; }
  .rs-ld-hd p { margin-top: 0; }
  .rs-ld-row { padding: 9px 0 10px; }
  .rs-ld-measure { padding: 10px 14px; }
}
@media (min-width: 1001px) and (max-height: 800px) {
  .rs-ld-row { padding: 6px 0 8px; }
}
@media (min-width: 1001px) and (max-height: 740px) {
  .rs-slide.rs-t-ledger { padding-bottom: 28px; }
  .rs-ld .rs-h2 { margin-bottom: 8px; }
  .rs-ld-row { grid-template-columns: 124px minmax(0, 1fr); column-gap: 14px; }
  .rs-ld-e p { font-size: 12px; }
  .rs-ld-e .rs-ld-src { margin-top: 4px; }
  .rs-ld-measure { padding: 8px 12px; font-size: 12px; }
}
/* Spanish runs longer: on a short screen, where the rows sit side by side, narrower gaps and label
   column, the claims at 12px, and less space around the rows. */
@media (min-width: 1001px) and (max-height: 900px) {
  @container rs (min-width: 1001px) {
    .r-story:lang(es) .rs-ld-grid { column-gap: 32px; }
    .r-story:lang(es) .rs-ld-row { grid-template-columns: 124px minmax(0, 1fr); column-gap: 14px; }
  }
}
@media (min-width: 1001px) and (max-height: 880px) {
  @container rs (min-width: 1001px) {
    .r-story:lang(es) .rs-ld-e p { font-size: 12px; }
  }
}
@media (min-width: 1001px) and (max-height: 740px) {
  @container rs (min-width: 1001px) {
    .r-story:lang(es) .rs-ld .rs-h2 { margin-bottom: 4px; }
    .r-story:lang(es) .rs-ld-hd { padding-bottom: 4px; }
    .r-story:lang(es) .rs-ld-row { padding: 4px 0 6px; }
    .r-story:lang(es) .rs-ld-e .rs-ld-src { margin-top: 2px; }
  }
}
@container rs (max-width: 1000px) {
  .rs-ld-row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .rs-ld-measure { margin-top: 28px; }
}
@container rs (max-width: 700px) {
  .rs-ld-grid { display: block; }
  .rs-ld-col:last-child .rs-ld-hd { padding-top: 28px; }
}

/* 11 closing: one line and the way on to the offerings, centered on blue */
.rs-cl { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.rs-cl-line { max-width: 900px; font: 400 48px/1.2 var(--rs-disp); letter-spacing: -1.2px; text-wrap: balance; }
.rs-cl .rs-ctas { margin-top: 36px; }
@container rs (max-width: 700px) {
  .rs-cl-line { font-size: 32px; letter-spacing: -.5px; }
  .rs-cl .rs-ctas { margin-top: 28px; }
}

/* contents menu (where the rail is hidden) */
.rs-idx { position: fixed; inset: 0; z-index: 200; overflow: auto; overscroll-behavior: contain; padding: 28px 40px; background: var(--rs-cream); }
.rs-idx-close { position: absolute; top: 18px; right: 22px; padding: 0; font: 400 24px/1 var(--rs-body); color: var(--rs-ink); background: none; border: 0; cursor: pointer; }
.rs-idx-title { margin-bottom: 18px; }
.rs-idx-title a { color: inherit; text-decoration: none; }
.rs-idx-list { list-style: none; max-width: 900px; margin: 0 0 18px; padding: 0; }
.rs-idx-list a { display: grid; grid-template-columns: 90px 1fr; gap: 18px; padding: 10px 0; border-top: 1px solid var(--rs-line); font-size: 18px; line-height: 1.35; color: var(--rs-ink); text-decoration: none; }
.rs-idx-list a > span:first-child { font-size: 12px; line-height: 2; color: var(--rs-muted); }
.rs-idx-list a:hover { color: var(--rs-blue); }
.rs-idx-conf { max-width: 900px; margin-top: 28px; font-size: 12px; line-height: 1.5; color: var(--rs-muted); }
.rs-idx-grp { display: grid; grid-template-columns: 90px 1fr; gap: 10px 18px; max-width: 900px; padding: 18px 0 8px; border-top: 1px solid var(--rs-ink); }
.rs-idx-n { font: 400 12px/1.5 var(--rs-body); color: var(--rs-muted); }
.rs-idx-grp h3 a, .rs-idx-grp h3 button { padding: 0; font: 400 24px/1.3 var(--rs-disp); text-transform: uppercase; color: var(--rs-ink); text-decoration: none; background: none; border: 0; cursor: pointer; }
.rs-idx-grp ul { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 6px 0 0; padding: 0; }
.rs-idx-grp li a { font-size: 16px; color: var(--rs-soft); text-decoration: none; }
.rs-idx-grp a:hover, .rs-idx-grp button:hover { color: var(--rs-blue); }
.rs-idx .rs-lang { margin-top: 12px; }
@media (max-width: 700px) {
  .rs-idx { padding: 22px 18px; }
  .rs-idx-grp { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .rs-idx-list a { grid-template-columns: 34px 1fr; gap: 10px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .r-story *, .r-story *::before, .r-story *::after { transition: none !important; animation: none !important; }
}