/* "The world runs on rock" story pages (/runs-on/<slug>): a fixed three.js stage, glass cards scrolling over it, and
   photo and line-drawing breaks whose effects follow each section's scroll progress (--p, set by /assets/runs-on.js?v=d1a4bc51). */
.ro-page { --glass: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03) 60%, rgba(95, 224, 200, .05));
  --gline: rgba(255, 255, 255, .16); background: var(--bg); }
.ro-page .nav { z-index: 40; }

/* ---------- stage ---------- */
.ro-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ro-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ro-globe { opacity: 0; visibility: hidden; transition: opacity .6s var(--ease); }
#glabels { position: absolute; inset: 0; transition: opacity .4s; }
#ro-labels { position: absolute; inset: 0; overflow: hidden; }
.ro-vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 65% 45%, transparent 55%, rgba(5, 8, 10, .75) 100%); }
.ro-nogl #ro-gl { display: none; }
.ro-nogl .ro-stage { background: radial-gradient(80% 60% at 70% 40%, rgba(95, 224, 200, .08), transparent 70%), var(--bg); }

/* labels pinned to 3D parts */
.ro-tag { position: absolute; left: 0; top: 0; opacity: 0; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px 7px 12px; margin: -18px 0 0 10px;
  border-radius: 10px; background: rgba(8, 14, 16, .55); border: 1px solid rgba(255, 255, 255, .12); border-left: 2px solid var(--k, var(--lime));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: nowrap; will-change: transform, opacity; transition: opacity .25s; }
.ro-tag::before { content: ""; position: absolute; left: -14px; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--k, var(--lime)); box-shadow: 0 0 12px var(--k, var(--lime)); }
.ro-tag b { font: 600 13px/1.2 var(--head); color: var(--text); }
.ro-tag span { font: 11px/1.3 var(--mono); color: var(--muted); }

/* ---------- sections and cards ---------- */
main.ro { position: relative; z-index: 2; }
.ro-sec { position: relative; min-height: var(--len, 300vh); }
.ro-steps { position: relative; padding: 32vh 0 40vh; }
.ro-card { position: relative; width: min(440px, calc(100% - 32px)); margin: 0 0 72vh max(24px, 6vw); padding: 26px 28px 24px; border-radius: 22px; color: var(--text);
  opacity: 0; transform: translateY(46px) scale(.96); filter: blur(6px); transition: opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease); }
.ro-card.on { opacity: 1; transform: none; filter: none; }
.ro-card:last-child { margin-bottom: 0; }
.glass { background: var(--glass); border: 1px solid var(--gline); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 40px rgba(95, 224, 200, .04), 0 30px 80px -24px rgba(0, 0, 0, .7); overflow: hidden; }
.glass::after { content: ""; position: absolute; inset: -40% -60%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .07) 50%, transparent 60%);
  transform: translateX(-60%); transition: transform 1.6s var(--ease); pointer-events: none; }
.glass.on::after { transform: translateX(60%); }
.ro-card h1 { font-size: clamp(44px, 6.4vw, 84px); line-height: .98; margin-bottom: 18px; }
.ro-card h1 .grad { display: block; font-size: .42em; line-height: 1.15; margin-top: 10px; letter-spacing: -.01em;
  background: linear-gradient(90deg, var(--lime), var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ro-card h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; margin-bottom: 12px; }
.ro-card p { color: #c9d4d1; font-size: 15.5px; line-height: 1.6; }
.ro-card p + p { margin-top: 12px; }
.ro-card .kick { margin-bottom: 10px; }
.ro-card b { color: var(--text); font-weight: 600; }
.ro-card sup { font-size: 10px; line-height: 0; margin-left: 1px; }
.ro-card sup a { color: var(--teal); text-decoration: none; }
.ro-card sup a:hover { text-decoration: underline; }
.ro-card.hero { width: min(640px, calc(100% - 32px)); }
.ro-card.wide { width: min(760px, calc(100% - 32px)); }
.lead { font-size: 17px !important; }
.cue { margin-top: 26px !important; font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) !important; display: flex; align-items: center; gap: 12px; }
.cue span { width: 18px; height: 30px; border: 1.5px solid var(--muted); border-radius: 10px; position: relative; }
.cue span::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: var(--lime); animation: ro-cue 1.6s infinite; }
@keyframes ro-cue { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
.ro-hero .ro-steps { padding-top: 22vh; }

.ro-big { font: 600 clamp(38px, 5.4vw, 64px)/1 var(--head) !important; letter-spacing: -.03em; margin: 4px 0 12px !important;
  background: linear-gradient(90deg, #fff, var(--lime)); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-variant-numeric: tabular-nums; word-break: break-all; }
.ro-stats { display: grid; gap: 14px; }
.ro-stats p { display: flex; flex-direction: column; }
.ro-stats .ro-big { margin: 0 0 2px !important; }
.ro-cite { font-size: 13px !important; color: var(--muted) !important; margin-top: 14px !important; }
.ro-layers { display: grid; gap: 10px; }
.ro-layers li { padding-left: 14px; border-left: 2px solid rgba(220, 255, 60, .5); color: #c9d4d1; font-size: 14.5px; }
.ro-layers b { display: block; font-family: var(--head); }
.ro-els { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px !important; }
.ro-els span { font: 600 13px var(--head); padding: 5px 9px; border-radius: 8px; color: var(--k); border: 1px solid var(--k); background: rgba(0, 0, 0, .25); box-shadow: 0 0 18px -6px var(--k); }
.ro-timeline { display: grid; gap: 12px; counter-reset: t; }
.ro-timeline li { position: relative; padding-left: 18px; color: #c9d4d1; font-size: 14.5px; }
.ro-timeline li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #ff5a3c; box-shadow: 0 0 10px #ff5a3c; }
.ro-timeline b { display: block; font: 500 12px var(--mono); color: #ff8a6c; letter-spacing: .05em; }
.ro-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.ro-tiles a { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; text-decoration: none; border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .2)); transition: transform .25s var(--ease), border-color .25s; }
.ro-tiles a:hover { transform: translateY(-3px); border-color: var(--k); }
.ro-tiles b { font: 600 26px/1 var(--head); color: var(--k); }
.ro-tiles span { font-size: 13px; color: var(--text); }
.ro-tiles i { font: normal 11px var(--mono); color: var(--muted); }
.ro-next { font-size: 14px !important; }
.ro-next a { color: var(--lime); }

/* ---------- photo and drawing breaks ---------- */
.ro-break { min-height: var(--len, 200vh); }
.ro-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: flex-end; }
.ro-media { position: absolute; inset: 0; margin: 0; }
.ro-media img, .ro-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.ro-media figcaption { position: absolute; right: 16px; bottom: 12px; font: 11px var(--mono); color: rgba(255, 255, 255, .55); max-width: 60%; text-align: right; z-index: 2; }
.ro-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 8, 10, .6), transparent 30%, transparent 55%, rgba(5, 8, 10, .92)); pointer-events: none; }
/* iris: the drawing opens from a pinhole and settles from a close zoom */
.ro-media.iris { clip-path: circle(calc(6% + min(var(--p, 0) * 2.2, 1) * 90%) at 60% 45%); }
.ro-media.iris img { transform: scale(calc(1.55 - min(var(--p, 0) * 1.8, 1) * .55)); transform-origin: 60% 45%; filter: contrast(1.1) saturate(.9); }
/* crack: a jagged split tears open across the picture, tinted red */
.ro-media.crack { --w: calc(min(var(--p, 0) * 1.8, 1) * 62%);
  clip-path: polygon(0 calc(48% - var(--w)), 22% calc(44% - var(--w)), 38% calc(50% - var(--w)), 61% calc(41% - var(--w)), 80% calc(47% - var(--w)), 100% calc(42% - var(--w)),
    100% calc(56% + var(--w)), 78% calc(52% + var(--w)), 57% calc(60% + var(--w)), 35% calc(53% + var(--w)), 18% calc(59% + var(--w)), 0 calc(54% + var(--w))); }
.ro-media.crack img { transform: scale(calc(1.25 - min(var(--p, 0) * 1.5, 1) * .25)); filter: sepia(.35) hue-rotate(-30deg) saturate(1.3) contrast(1.05); }
.ro-over { margin: 0 0 9vh max(24px, 6vw) !important; z-index: 3; }
.ro-break .ro-over { opacity: 0; transform: translateY(40px); }
.ro-break .ro-over.on { opacity: 1; transform: none; }

/* photos inside cards, revealed through a shape */
.ro-inset { margin: 2px 0 14px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; transition: clip-path 1.2s var(--ease), transform 1.2s var(--ease); }
.ro-inset img { transform: scale(1.35); transition: transform 1.6s var(--ease); }
.on .ro-inset img { transform: scale(1); }
.ro-inset.hex { aspect-ratio: 1.15; border-radius: 0; clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%); }
.on .ro-inset.hex { clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%); }
.ro-inset.wafer { aspect-ratio: 1; border-radius: 0; clip-path: circle(4% at 50% 50%); }
.on .ro-inset.wafer { clip-path: circle(50% at 50% 50%); }

/* line drawings that draw themselves as you scroll (pencil wobble from an SVG filter) */
.ro-draw { fill: none; stroke: var(--lime); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: url(#ro-pencil); }
.ro-draw path, .ro-draw circle { stroke-dasharray: 1; stroke-dashoffset: max(0, calc(1 - var(--p, 0) * 3)); }
.ro-draw text { fill: var(--muted); stroke: none; font: 22px "Caveat", cursive; }
.sketch-wafer { position: absolute; right: -8vw; top: 12vh; width: min(70vw, 720px); opacity: .22; z-index: -1; stroke: var(--teal); stroke-width: 1.2; }
.sketch-wafer .notch { stroke: var(--lime); }
.ro-draw.sym { width: 100%; max-width: 320px; margin-top: 16px; display: block; }
.ro-card .ro-draw path { stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease) .3s; }
.ro-card.on .ro-draw path { stroke-dashoffset: 0; }

/* drawings shown only where the 3D can't run */
.ro-fb { display: none; margin: 16px 0 0; }
.ro-nogl .ro-fb { display: block; }
.ro-fb svg { width: 100%; height: auto; fill: none; stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; }
.ro-fb text { fill: var(--muted); stroke: none; font: 13px var(--mono); }

/* ---------- sources ---------- */
.ro-end { position: relative; z-index: 3; background: var(--bg); padding-top: 72px; padding-bottom: 72px; border-top: 1px solid var(--line); }
.ro-end h2 { font-size: 28px; margin-bottom: 12px; }
.ro-end > p { color: var(--muted); max-width: 760px; font-size: 14px; }
.ro-sources { list-style: decimal; padding-left: 22px; margin-top: 20px; display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.ro-sources a { color: #c9d4d1; text-decoration-color: rgba(255, 255, 255, .25); }
.ro-sources li:target { color: var(--lime); }
.ro-sources li:target a { color: var(--lime); }

/* ---------- phones and tablets: the 3D on top, cards below ---------- */
@media (max-width: 900px) {
  .ro-steps { padding: 58vh 0 40vh; }
  .ro-hero .ro-steps { padding-top: 46vh; }
  .ro-card { margin: 0 16px 80vh; width: auto; padding: 20px 20px 18px; }
  .ro-card.hero, .ro-card.wide { width: auto; }
  .ro-card p { font-size: 15px; }
  .ro-tiles { grid-template-columns: repeat(2, 1fr); }
  .ro-over { margin: 0 16px 8vh !important; }
  .ro-media.iris { clip-path: circle(calc(6% + min(var(--p, 0) * 2.2, 1) * 110%) at 50% 40%); }
  .sketch-wafer { right: -30vw; top: 6vh; width: 110vw; }
  .ro-tag { padding: 4px 8px 5px 10px; }
  .ro-tag b { font-size: 12px; }
  .ro-tag span { font-size: 10px; }
  .ro-vignette { background: linear-gradient(180deg, transparent 50%, rgba(5, 8, 10, .65)); }
}

/* ---------- reduced motion: no drifting, no blur-ins; shapes appear at their end state ---------- */
@media (prefers-reduced-motion: reduce) {
  .ro-card, .glass::after, .ro-inset, .ro-inset img { transition: none !important; }
  .ro-card { opacity: 1; transform: none; filter: none; }
  .ro-media.iris, .ro-media.crack { clip-path: none; }
  .ro-media.iris img, .ro-media.crack img { transform: none; }
  .ro-draw path, .ro-draw circle { stroke-dashoffset: 0 !important; }
  .ro-inset.hex { clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%); }
  .ro-inset.wafer { clip-path: circle(50% at 50% 50%); }
  .cue span::after { animation: none; }
}
.ro-big.long { font-size: clamp(28px, 3.4vw, 44px) !important; white-space: nowrap; word-break: normal; }
/* without WebGL the long scroll has nothing to drive: tighten it (the globe still runs, drawn in 2D) */
.ro-nogl .ro-sec:not(.ro-globe-sec):not(.ro-break) { min-height: 0; }
.ro-nogl .ro-sec:not(.ro-globe-sec) .ro-steps { padding: 14vh 0 10vh; }
.ro-nogl .ro-sec:not(.ro-globe-sec) .ro-card { margin-bottom: 8vh; }

/* ---------- more breaks (stories 2 and 3) ---------- */
/* aisle: walk down the row, the photo pushing in as you scroll */
.ro-media.aisle img { transform: scale(calc(1 + min(var(--p, 0) * 1.4, 1) * .55)); transform-origin: 50% 52%; filter: saturate(.85) contrast(1.08); }
.ro-media.aisle { clip-path: inset(calc((1 - min(var(--p, 0) * 2.4, 1)) * 30%) calc((1 - min(var(--p, 0) * 2.4, 1)) * 40%) round calc((1 - min(var(--p, 0) * 2.4, 1)) * 28px)); }
/* lights: the night map fades up from black, brightening as if switched on */
.ro-media.lights img { filter: brightness(calc(.25 + min(var(--p, 0) * 2, 1) * 1.05)) saturate(1.2); transform: scale(calc(1.18 - min(var(--p, 0) * 1.6, 1) * .18)); }
.ro-media.lights { -webkit-mask-image: radial-gradient(circle at 55% 45%, #000 calc(min(var(--p, 0) * 2.2, 1) * 90%), transparent calc(min(var(--p, 0) * 2.2, 1) * 90% + 18%));
  mask-image: radial-gradient(circle at 55% 45%, #000 calc(min(var(--p, 0) * 2.2, 1) * 90%), transparent calc(min(var(--p, 0) * 2.2, 1) * 90% + 18%)); }
/* zoomout: start close on the ponds and pull back to the whole salt flat */
.ro-media.zoomout img { transform: scale(calc(2.6 - min(var(--p, 0) * 1.8, 1) * 1.6)); transform-origin: 46% 60%; }
.ro-media.zoomout { clip-path: circle(calc(14% + min(var(--p, 0) * 2.2, 1) * 90%) at 46% 60%); }
.sketch-rack, .sketch-cell { position: absolute; right: -4vw; top: 10vh; width: min(60vw, 640px); opacity: .2; z-index: -1; stroke: var(--teal); stroke-width: 1.2; }
@media (max-width: 900px) {
  .sketch-rack, .sketch-cell { right: -24vw; top: 6vh; width: 100vw; }
  .ro-media.zoomout { clip-path: circle(calc(14% + min(var(--p, 0) * 2.2, 1) * 110%) at 46% 50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ro-media.aisle, .ro-media.zoomout { clip-path: none; }
  .ro-media.aisle img, .ro-media.zoomout img, .ro-media.lights img { transform: none; filter: none; }
  .ro-media.lights { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- more breaks and photo frames (stories 4 to 12) ---------- */
/* scan: a satellite pass, the picture drawn in line by line behind a bright scan line */
.ro-media.scan { --k: min(var(--p, 0) * 2.2, 1); clip-path: inset(0 0 calc((1 - var(--k)) * 100%) 0); }
.ro-media.scan img { transform: scale(calc(1.12 - var(--k) * .12)); filter: saturate(1.15) contrast(1.05); }
.ro-media.scan::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--k) * 100% - 2px); height: 3px; z-index: 2; background: var(--lime);
  box-shadow: 0 0 24px 6px rgba(220, 255, 60, .55); opacity: calc(1 - var(--k) * .9); }
/* rise: a launch, the photo climbing into frame and flaring */
.ro-media.rise img { transform: translateY(calc((1 - min(var(--p, 0) * 1.8, 1)) * 14%)) scale(calc(1.3 - min(var(--p, 0) * 1.8, 1) * .3)); transform-origin: 60% 100%;
  filter: brightness(calc(.55 + min(var(--p, 0) * 2, 1) * .6)) contrast(1.1); }
.ro-media.rise { clip-path: polygon(0 calc(100% - min(var(--p, 0) * 2.4, 1) * 100%), 100% calc(100% - min(var(--p, 0) * 2.4, 1) * 120% + 20%), 100% 100%, 0 100%); }
/* blinds: slats open across the picture */
.ro-media.blinds { --b: calc((.2 + min(var(--p, 0) * 2.2, 1) * .8) * 44px);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0, #000 var(--b), transparent var(--b), transparent 44px);
  mask-image: repeating-linear-gradient(180deg, #000 0, #000 var(--b), transparent var(--b), transparent 44px); }
.ro-media.blinds img { transform: scale(calc(1.15 - min(var(--p, 0) * 1.6, 1) * .15)); }
/* wipe: a before-and-after pair; the second photo slides in over the first from the right, behind a glowing seam */
.ro-media.wipe { --k: min(max(var(--p, 0) - .12, 0) * 2.6, 1); }
.ro-media.wipe img.after { position: absolute; inset: 0; clip-path: inset(0 0 0 calc((1 - var(--k)) * 100%)); }
.ro-media.wipe::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc((1 - var(--k)) * 100% - 1px); width: 2px; z-index: 2; background: var(--lime);
  box-shadow: 0 0 22px 5px rgba(220, 255, 60, .5); opacity: calc(var(--k) * 8 - (var(--k) - .9) * 80); }
.ro-media.wipe .wl, .ro-media.wipe .wr { position: absolute; top: 96px; z-index: 3; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px; background: rgba(5, 8, 10, .6); border: 1px solid var(--gline); color: var(--text); }
.ro-media.wipe .wl { left: 16px; opacity: calc(1 - var(--k)); } .ro-media.wipe .wr { right: 16px; opacity: var(--k); color: var(--lime); }
/* duotone: photos toned into the page's palette (lime highlights, deep teal shadows) */
.duo { position: relative; }
.duo img { filter: grayscale(1) contrast(1.15) brightness(.9); }
.duo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, var(--duo, #5fe0c8), #0b2a2a); mix-blend-mode: color; pointer-events: none; }
/* more inset shapes for photos inside cards */
.ro-inset.circle { aspect-ratio: 1; max-width: 300px; margin-left: auto; margin-right: auto; border-radius: 50%; clip-path: circle(6% at 50% 50%); }
.on .ro-inset.circle { clip-path: circle(50% at 50% 50%); }
.ro-inset.slant { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); border-radius: 0; }
.on .ro-inset.slant { clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
.ro-inset.ring { aspect-ratio: 1; max-width: 300px; margin-left: auto; margin-right: auto; border-radius: 50%; box-shadow: 0 0 0 2px var(--lime), 0 0 40px rgba(220, 255, 60, .25); }
.ro-inset figcaption, .ro-pair figcaption { font: 11px var(--mono); color: var(--muted); margin-top: 6px; }
/* a pair of photos side by side in a card, the second arriving a beat after the first */
.ro-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 14px; }
.ro-pair figure { margin: 0; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 5; transform: translateY(24px); opacity: 0; transition: transform 1s var(--ease), opacity 1s var(--ease); }
.ro-pair figure:nth-child(2) { transition-delay: .25s; }
.on .ro-pair figure { transform: none; opacity: 1; }
.ro-pair img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ro-cap { font: 11px/1.4 var(--mono) !important; color: var(--muted) !important; margin-top: -6px !important; }
/* photo strip: three photos fanned across a break, each sliding in at its own pace */
.ro-strip { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 12vh 4vw 26vh; }
.ro-strip figure { margin: 0; position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--gline);
  transform: translateY(calc((1 - min(var(--p, 0) * 2.4, 1)) * var(--d, 30vh))) rotate(calc((1 - min(var(--p, 0) * 2.4, 1)) * var(--r, 0deg))); }
.ro-strip figure:nth-child(1) { --d: 40vh; --r: -4deg; } .ro-strip figure:nth-child(2) { --d: 60vh; } .ro-strip figure:nth-child(3) { --d: 80vh; --r: 4deg; }
.ro-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ro-strip figcaption { position: absolute; left: 10px; right: 10px; bottom: 8px; font: 10.5px/1.35 var(--mono); color: rgba(255, 255, 255, .75); text-shadow: 0 1px 6px #000; }
.sketch-motor, .sketch-rocket, .sketch-cable, .sketch-radar, .sketch-mri, .sketch-engine, .sketch-grid, .sketch-phone, .sketch-map, .sketch-drone, .sketch-starship, .sketch-deep, .sketch-ice, .sketch-town { position: absolute; right: -4vw; top: 10vh; width: min(60vw, 640px); opacity: .2; z-index: -1; stroke: var(--teal); stroke-width: 1.2; }
@media (max-width: 900px) {
  .ro-strip { grid-template-columns: 1fr 1fr; padding: 10vh 16px 30vh; }
  .ro-strip figure:nth-child(3) { display: none; }
  .sketch-motor, .sketch-rocket, .sketch-cable, .sketch-radar, .sketch-mri, .sketch-engine, .sketch-grid, .sketch-phone, .sketch-map, .sketch-drone, .sketch-starship, .sketch-deep, .sketch-ice, .sketch-town { right: -24vw; top: 6vh; width: 100vw; }
}
@media (prefers-reduced-motion: reduce) {
  .ro-media.scan, .ro-media.rise { clip-path: none; }
  .ro-media.scan::before { display: none; }
  .ro-media.blinds { -webkit-mask-image: none; mask-image: none; }
  .ro-media.wipe { --k: min(max(var(--p, 0) - .12, 0) * 2.6, .5); }
  .ro-media.scan img, .ro-media.rise img, .ro-media.blinds img { transform: none; filter: none; }
  .ro-inset.circle, .ro-inset.slant { clip-path: none; }
  .ro-pair figure { transform: none; opacity: 1; transition: none; }
  .ro-strip figure { transform: none; }
}

/* ---------- the series hub (/runs-on/) ---------- */
.ro-hub { padding: 120px max(16px, 4vw) 64px; color: var(--text); }
.ro-hub .kick { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); display: flex; align-items: center; gap: 8px; }
.ro-hub .kick .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.ro-hub h1 { font: 700 clamp(40px, 6vw, 76px)/1 var(--head); letter-spacing: -.03em; margin: 14px 0 18px; }
.ro-hub .lead { max-width: 680px; color: #c9d4d1; font-size: 18px; }
.ro-hub .ro-hub-h2 { font: 700 clamp(28px, 3.6vw, 44px)/1.05 var(--head); letter-spacing: -.02em; margin: 72px 0 12px; }
.ro-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 40px 0 28px; }
.ro-hub-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; padding: 20px; border-radius: 20px; overflow: hidden;
  text-decoration: none; color: var(--text); border: 1px solid rgba(255, 255, 255, .1); isolation: isolate; transition: transform .3s var(--ease), border-color .3s; }
.ro-hub-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ro-hub-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 8, 10, .1) 20%, rgba(5, 8, 10, .92) 85%); }
.ro-hub-card:hover, .ro-hub-card:focus-visible { transform: translateY(-4px); border-color: var(--lime); }
.ro-hub-card:hover img { transform: scale(1.05); }
.ro-hub-card .n { position: absolute; top: 16px; left: 20px; font: 500 12px var(--mono); color: var(--lime); }
.ro-hub-card b { font: 600 26px/1.1 var(--head); }
.ro-hub-card .sub { font-size: 14.5px; color: #dbe4e1; margin-top: 4px; }
.ro-hub-card i { font: normal 11.5px var(--mono); color: var(--muted); margin-top: 8px; }
.ro-hub-note { font-size: 13.5px; color: var(--muted); max-width: 680px; }
@media (max-width: 1100px) { .ro-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .ro-hub { padding-top: 96px; } .ro-hub-grid { grid-template-columns: 1fr; } .ro-hub-card { min-height: 240px; } }
@media (prefers-reduced-motion: reduce) { .ro-hub-card, .ro-hub-card img { transition: none; } }

/* ---------- satellite time-lapse (.ro-sat): dated frames of one place, scrubbed by the scroll ---------- */
.ro-sat-sec .ro-sticky { align-items: stretch; }
.ro-sat { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 76px 3vw 3vh; }
.ro-sat-frame { position: relative; width: min(100%, calc((100svh - 150px) * 1.786)); aspect-ratio: 1344 / 752; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--gline); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .8);
  transform: scale(calc(.9 + min(var(--p, 0) * 6, 1) * .1)); opacity: calc(.2 + min(var(--p, 0) * 8, 1) * .8); }
.ro-sat-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.ro-sat-stack img:first-child { opacity: 1; }
.ro-sat-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ro-sat-marks g { opacity: 0; transition: opacity .5s var(--ease); }
.ro-sat-marks g.on { opacity: 1; }
.ro-sat-marks circle { fill: none; stroke: var(--k, var(--lime)); stroke-width: 2.5; }
.ro-sat-marks .dot { fill: var(--k, var(--lime)); stroke: none; }
.ro-sat-marks path { fill: none; stroke: var(--k, var(--lime)); stroke-width: 2; stroke-dasharray: 7 6; }
.ro-sat-marks line { stroke: var(--k, var(--lime)); stroke-width: 1.5; }
.ro-sat-marks text { font: 600 17px var(--head); fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .7); stroke-width: 4px; stroke-linejoin: round; }
.ro-sat-marks text.s { font: 500 13px var(--mono); fill: #d6e0dc; }
.ro-sat-hud { position: absolute; left: 16px; top: 14px; right: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; pointer-events: none; }
.ro-sat-yr { font: 600 clamp(34px, 4.6vw, 60px)/1 var(--head); letter-spacing: -.03em; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .7); font-variant-numeric: tabular-nums; }
.ro-sat-src { font: 12px var(--mono); color: #e6eeea; text-shadow: 0 1px 6px #000; }
.ro-sat-bar { position: absolute; left: 16px; right: 16px; bottom: 14px; height: 30px; }
.ro-sat-bar::before, .ro-sat-bar i { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.ro-sat-bar i { right: auto; width: 0; background: linear-gradient(90deg, var(--teal), var(--lime)); box-shadow: 0 0 12px var(--lime); }
.ro-sat-bar b { position: absolute; top: 2px; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%; background: #1a2226; border: 2px solid rgba(255, 255, 255, .5); }
.ro-sat-bar b.on { background: var(--lime); border-color: var(--lime); }
.ro-sat-bar b span { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font: 10px var(--mono); color: #fff; text-shadow: 0 1px 4px #000; white-space: nowrap; }
.ro-sat-note { position: absolute; z-index: 3; background: rgba(8, 14, 16, .78) !important; left: max(24px, 4vw); bottom: 9vh; width: min(400px, calc(100% - 32px)); padding: 18px 20px; border-radius: 18px;
  opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.ro-sat-note.on { opacity: 1; transform: none; pointer-events: auto; }
.ro-sat-note h2 { font-size: clamp(20px, 2vw, 26px) !important; margin-bottom: 8px !important; }
.ro-sat-note p { color: #c9d4d1; font-size: 14.5px; line-height: 1.55; }
.ro-sat-note sup { font-size: 10px; } .ro-sat-note sup a { color: var(--teal); }
.ro-sat-credit { position: absolute; right: 18px; bottom: 50px; font: 10.5px var(--mono); color: #dfe8e4; text-shadow: 0 1px 4px #000; pointer-events: none; }

/* ---------- swipe (.ro-swipe): two dates under a draggable divider ---------- */
.ro-swipe { --x: 50%; margin: 6px 0 12px; }
.ro-swipe-fig { position: relative; margin: 0; aspect-ratio: 1344 / 752; border-radius: 14px; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; }
.ro-swipe-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ro-swipe-fig .after { clip-path: inset(0 0 0 var(--x)); }
.ro-swipe-fig .new { opacity: 0; transition: opacity .5s var(--ease); clip-path: inset(0 0 0 var(--x)); mix-blend-mode: screen; }
.show-new .ro-swipe-fig .new { opacity: 1; }
.ro-swipe-fig::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--lime); box-shadow: 0 0 14px var(--lime); }
.ro-swipe-fig .h { position: absolute; top: 50%; left: var(--x); width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; z-index: 2;
  background: rgba(8, 14, 16, .7); border: 2px solid var(--lime); display: grid; place-items: center; color: var(--lime); font: 600 14px var(--head); }
.ro-swipe-fig .t { position: absolute; top: 10px; font: 600 13px var(--mono); color: #fff; text-shadow: 0 1px 6px #000; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .35); }
.ro-swipe-fig .t.l { left: 10px; } .ro-swipe-fig .t.r { right: 10px; }
.ro-swipe input[type=range] { width: 100%; margin: 10px 0 0; accent-color: var(--lime); }
.ro-swipe-btn { margin-top: 8px; font: 600 12.5px var(--mono); color: var(--text); background: rgba(255, 90, 60, .12); border: 1px solid #ff5a3c; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.ro-swipe-btn[aria-pressed=true] { background: #ff5a3c; color: #120806; }
.ro-swipe figcaption { font: 11px var(--mono); color: var(--muted); margin-top: 6px; }
@media (max-width: 760px) {
  .ro-sat { padding: 64px 0 0; align-items: flex-start; }
  .ro-sat-frame { width: 100%; aspect-ratio: auto; height: 46svh; border-radius: 0; border-left: 0; border-right: 0; }
  .ro-sat-marks text { font-size: 24px; } .ro-sat-marks text.s { display: none; }
  .ro-sat-note { left: 16px; right: 16px; width: auto; bottom: 5vh; }
  .ro-sat-credit { bottom: 44px; right: 10px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .ro-sat-frame { transform: none; opacity: 1; } .ro-sat-note, .ro-sat-marks g { transition: none; } }
/* ---------- The Map: every story on one explorable globe ---------- */
.ro-explore { position: relative; z-index: 2; height: 100svh; min-height: 620px; overflow: hidden; color: var(--text);
  background: radial-gradient(70% 70% at 62% 50%, rgba(95, 224, 200, .07), transparent 70%); }
.ro-explore > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.ro-explore > canvas:active { cursor: grabbing; }
.ro-explore .glabels { z-index: 1; }
.ro-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--lime);
  background: var(--lime); color: #0b1200; font: 600 14px Inter, sans-serif; text-decoration: none; cursor: pointer; transition: transform .2s, background .2s; }
.ro-btn:hover { transform: translateY(-1px); }
.ro-btn.ghost { background: rgba(255, 255, 255, .04); color: var(--text); border-color: rgba(255, 255, 255, .22); }
.ro-x-intro { position: absolute; z-index: 3; left: max(16px, 4vw); top: 104px; width: min(440px, calc(100% - 32px)); padding: 26px 26px 22px; border-radius: 22px;
  transition: opacity .5s var(--ease), transform .6s var(--ease); }
.ro-x-intro .kick { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ro-x-intro .kick .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.ro-x-intro h1 { font: 700 clamp(40px, 5vw, 64px)/.98 var(--head); letter-spacing: -.03em; margin: 0 0 14px; }
.ro-x-intro h1 .grad { display: block; font-size: .44em; line-height: 1.15; margin-top: 8px; letter-spacing: -.01em;
  background: linear-gradient(90deg, var(--lime), var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ro-x-intro .lead { color: #c9d4d1; font-size: 16px; line-height: 1.55; margin: 0 0 18px; }
.ro-x-go { display: flex; flex-wrap: wrap; gap: 10px; }
.ro-explore.open .ro-x-intro { opacity: 0; transform: translateX(-30px); pointer-events: none; }

/* pins: a dot ringed with the colours of the stories that stop there */
.ro-x-pins { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ro-x-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; pointer-events: auto;
  transition: opacity .3s; }
.ro-x-pin i { position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s); border-radius: 50%; background: var(--ring);
  box-shadow: 0 0 14px rgba(255, 255, 255, .25); transition: transform .3s var(--ease), filter .3s; }
.ro-x-pin i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #0b1416; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.ro-x-pin.big i::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); animation: ro-x-ping 2.6s ease-out infinite; }
@keyframes ro-x-ping { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.ro-x-pin span { position: absolute; left: calc(var(--s) / 2 + 6px); top: -9px; white-space: nowrap; font: 500 12px Inter, sans-serif; padding: 2px 8px; border-radius: 999px;
  background: rgba(5, 10, 12, .72); border: 1px solid rgba(255, 255, 255, .12); opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .25s; pointer-events: none; }
.ro-x-pin span em { font: 500 11px var(--mono); font-style: normal; color: var(--lime); margin-left: 3px; }
.ro-x-pin.big span, .ro-x-pin:hover span, .ro-x-pin:focus-visible span, .ro-x-pin.on span { opacity: 1; transform: none; }
.ro-x-pin:hover i, .ro-x-pin.on i { transform: scale(1.35); filter: brightness(1.3); }
.ro-x-pin.dim { filter: grayscale(1) brightness(.45); }
.ro-x-pin.dim span { opacity: 0 !important; }

/* the story card */
.ro-x-card { position: absolute; z-index: 4; right: max(16px, 3vw); top: 92px; max-height: calc(100% - 204px); width: min(430px, calc(100% - 32px)); padding: 22px 22px 20px; border-radius: 22px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ro-x-card[hidden] { display: none; }
.ro-x-card.in { animation: ro-x-in .55s var(--ease); }
@keyframes ro-x-in { from { opacity: 0; transform: translateY(18px) scale(.98); filter: blur(4px); } }
.ro-x-x { position: absolute; z-index: 2; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(5, 10, 12, .6); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; }
.ro-x-cover { position: relative; margin: -22px -22px 16px; height: 150px; overflow: hidden; }
.ro-x-cover.big { height: 200px; }
.ro-x-cover img { width: 100%; height: 100%; object-fit: cover; display: block; animation: ro-x-kb 14s ease-out both; }
@keyframes ro-x-kb { from { transform: scale(1.12); } to { transform: scale(1); } }
.ro-x-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8, 14, 16, .9)); }
.ro-x-cover span { position: absolute; z-index: 1; left: 22px; bottom: 12px; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.ro-x-card .kick { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--k, var(--teal)); margin: 0 0 8px; }
.ro-x-card h2 { font: 700 clamp(24px, 2.4vw, 30px)/1.1 var(--head); letter-spacing: -.02em; margin: 0 0 8px; }
.ro-x-card p, .ro-x-card li { color: #c9d4d1; font-size: 15px; line-height: 1.55; }
.ro-x-card p { margin: 0 0 12px; }
.ro-x-sub { color: var(--muted) !important; }
.ro-x-place { display: flex; align-items: center; gap: 8px; font: 500 13px var(--mono); color: var(--muted) !important; }
.ro-x-place i { width: 9px; height: 9px; border-radius: 50%; background: var(--k); box-shadow: 0 0 10px var(--k); }
.ro-x-body a { color: var(--lime); }
.ro-x-body sup a { color: var(--teal); }
.ro-x-stops { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 6px; counter-reset: s; }
.ro-x-stops button, .ro-x-also button { counter-increment: s; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); color: var(--text); font: 500 14px Inter, sans-serif; transition: border-color .2s, background .2s; }
.ro-x-stops button::before { content: counter(s, decimal-leading-zero); font: 500 11px var(--mono); color: var(--faint); }
.ro-x-stops button b, .ro-x-also button b { display: block; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ro-x-stops button:hover, .ro-x-also button:hover { border-color: var(--lime); background: rgba(220, 255, 60, .06); }
.ro-x-also { display: grid; gap: 6px; margin: 4px 0 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
.ro-x-also p { font-size: 13px !important; color: var(--muted) !important; margin: 0 0 2px !important; }
.ro-x-also button { border-left: 3px solid var(--k); display: block; }
.ro-x-also button b { color: var(--k); }
.ro-x-list button { display: flex; }
.ro-x-list img { width: 64px; height: 36px; object-fit: cover; border-radius: 6px; flex: none; }
.ro-x-nav, .ro-x-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ro-x-nav .ro-btn:last-child { margin-left: auto; }
.ro-x-bar { display: none; height: 3px; margin: -16px -22px 14px; background: rgba(255, 255, 255, .08); }
.ro-x-bar i { display: block; height: 100%; width: 0; background: var(--lime); }
.ro-x-card.timed .ro-x-bar { display: block; }
.ro-x-card.timed .ro-x-bar i { animation: ro-x-bar var(--dur, 8s) linear forwards; }
.ro-x-card.held .ro-x-bar i { animation-play-state: paused; }
@keyframes ro-x-bar { to { width: 100%; } }

/* the rail of stories */
.ro-x-rail { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 14px max(16px, 3vw) 18px; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(0deg, rgba(5, 8, 10, .92), transparent); }
.ro-x-rail::-webkit-scrollbar { display: none; }
.ro-x-rail button { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 14px; cursor: pointer; color: var(--text);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); font: 500 13px Inter, sans-serif; text-align: left; transition: border-color .2s, transform .2s, background .2s; }
.ro-x-rail button:hover { transform: translateY(-2px); border-color: var(--k, var(--lime)); }
.ro-x-chip img { width: 54px; height: 32px; object-fit: cover; border-radius: 8px; }
.ro-x-chip span { display: flex; flex-direction: column; line-height: 1.15; }
.ro-x-chip i { font: 500 10px var(--mono); font-style: normal; color: var(--k); letter-spacing: .08em; }
.ro-x-chip.on { border-color: var(--k); background: color-mix(in srgb, var(--k) 16%, transparent); box-shadow: 0 0 22px -6px var(--k); }
.ro-x-play { background: var(--lime) !important; color: #0b1200 !important; border-color: var(--lime) !important; padding: 6px 14px !important; font-weight: 600 !important; }
.ro-x-play b { font-size: 12px; }
.touring .ro-x-play b { font-size: 0; }
.touring .ro-x-play b::before { content: "❚❚"; font-size: 11px; }
.touring .ro-x-play span { font-size: 0; }
.touring .ro-x-play span::before { content: "Pause"; font-size: 13px; }
.ro-explore.failed > canvas, .ro-explore.failed .ro-x-rail { display: none; }

/* the same stops as a list */
.ro-x-index { position: relative; z-index: 2; padding: 72px max(16px, 4vw) 24px; color: var(--text); }
.ro-x-index > h2 { font: 700 clamp(28px, 3.4vw, 42px)/1.05 var(--head); letter-spacing: -.02em; margin: 0 0 10px; }
.ro-x-index > p { color: #c9d4d1; max-width: 680px; margin: 0 0 24px; }
.ro-ix { border-top: 1px solid rgba(255, 255, 255, .1); }
.ro-ix summary { display: flex; align-items: center; gap: 14px; padding: 14px 0; cursor: pointer; list-style: none; }
.ro-ix summary::-webkit-details-marker { display: none; }
.ro-ix summary img { width: 96px; height: 54px; object-fit: cover; border-radius: 10px; flex: none; }
.ro-ix summary .n { font: 500 12px var(--mono); color: var(--k); min-width: 22px; }
.ro-ix summary b { font: 600 19px var(--head); }
.ro-ix summary .sub { color: var(--muted); font-size: 14px; }
.ro-ix[open] summary b { color: var(--k); }
.ro-ix ol { display: grid; gap: 14px; margin: 0 0 18px; padding-left: 0; list-style: none; max-width: 760px; }
.ro-ix ol > li { padding-left: 14px; border-left: 2px solid var(--k); color: #c9d4d1; }
.ro-ix ol > li > b { display: block; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text); margin-bottom: 4px; }
.ro-ix p { margin: 0 0 8px; }
.ro-ix-lead { max-width: 760px; color: #c9d4d1; }
.ro-ix-more a { color: var(--lime); }

@media (max-width: 900px) {
  .ro-explore { height: 100svh; min-height: 560px; }
  .ro-x-intro { top: 74px; padding: 18px; }
  .ro-x-intro h1 { font-size: 38px; }
  .ro-x-intro .lead { font-size: 14.5px; margin-bottom: 12px; }
  .ro-x-card { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 58svh; border-radius: 20px; }
  .ro-x-cover { height: 110px; }
  .ro-x-cover.big { height: 130px; }
  .ro-explore.open .ro-x-rail { opacity: 0; pointer-events: none; }
  .ro-x-pin span { display: none; }
  .ro-x-pin.on span { display: block; }
  .ro-ix summary .sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ro-x-cover img, .ro-x-card.in, .ro-x-pin.big i::before { animation: none; }
}