/* ═══════════════════════════════════════════════════════════════════════════
   MIO GENICS — index.html (the landing page)
   ───────────────────────────────────────────────────────────────────────────
   1971, not 1984. A Clockwork Orange, not cyberpunk: flat screenprinted
   orange, hard geometry, one-point symmetry. Ink, not light — no glow, no
   gradient, no soft edge. The orange plates wear the e-ink kindle surface.

   This file is the last stylesheet the page loads and owns the whole lab
   look. Pruned at export 2026-08-26: every selector here matches the page
   or a class its JS injects — nothing is dead.

   CONTENTS
     1  tokens                       17  type tiers
     2  page shell                    18  the eye ornament (grand break)
     3  masthead                      20  the readout cards (rail plates)
     4  identity sections             21  backgrounds are backgrounds
     6  works                         22  the terminal layer
     8  the close: the name card      23  deeper machine (selection, tree)
     9  grounds and dust              24  terminal apparatus (two-up frames)
    10  responsive                    25–29  eyes · rhythm · wave · doorways
    11  the eye                       30  the type, louder
    12  one grid, whole page          31  statement bands (question, WE STUDY)
    16  the orange plates             32  the lab band
                                      33  loud small things
                                      34  e-ink plates · 35 nameplate
                                      36  stack schematic · 37 SELFLESS band
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · tokens ─────────────────────────────────────────────────────────── */

.research-page{
  --mg-orange:#FF5A00;                  /* the only accent */
  --mg-ink:#f4f1ea;                     /* headings */
  --mg-body:#b8b4ab;                    /* reading text */
  --mg-quiet:#807c74;                   /* rail descriptions, annotation */
  --mg-faint:#5c5952;                   /* quietest thing still legible */
  --mg-rule:rgba(255,255,255,.08);      /* the one hairline */
  --mg-rule-hot:rgba(255,90,0,.55);     /* the accent hairline */

  --mg-col:1180px;                      /* page container */
  --mg-measure:660px;                   /* reading column, everywhere */
  --mg-rail:215px;                      /* section-title rail */
  --mg-gap:64px;                        /* rail to column */

  --mg-display:Futura,'Avenir Next','Century Gothic','Space Grotesk',sans-serif;
  --mg-mono:ui-monospace,'SF Mono',Consolas,monospace;
}


/* ── 2 · page shell ─────────────────────────────────────────────────────── */

.research-page{background:var(--black,#0A0A0A)}
.research-page *{text-shadow:none!important}   /* ink, not light */
.rs{max-width:var(--mg-col);margin:0 auto;padding:0 32px 40px}
.works-top{padding-bottom:8px}
.site-header .nav-link--on{color:var(--mg-orange,#FF5A00)}

/* the chip: knocked out of solid orange, hard corners. Used twice. */
.research-page .rs-badge{
  display:inline-block;background:var(--mg-orange);color:#0a0a0a;border:0;border-radius:0;
  font-family:var(--mg-mono);font-size:9.5px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;padding:8px 14px 7px}


/* ── 3 · masthead ───────────────────────────────────────────────────────── */
/* Its own object: hard left, no rail. The rail begins at the first section,
   where the structure starts. The h1 is nowrap and overflows the hero box on
   purpose — mio-dust.js measures the glyph run, not this box. */

.rs-hero{position:relative;padding:96px 0 12px;max-width:64ch}
.rs-title{font-size:clamp(38px,5.6vw,70px);line-height:1.04;letter-spacing:-.012em;
  margin:26px 0 0;color:var(--mg-ink);text-wrap:balance}
.rs-title--lab{position:relative;z-index:1;
  font-family:var(--mg-display);font-weight:700;
  font-size:clamp(52px,9.4vw,132px);line-height:.94;letter-spacing:.03em;
  color:var(--mg-orange);text-wrap:nowrap;margin:22px 0 0}
.research-page .rs-deck{max-width:56ch;margin:36px 0 0;
  font-size:clamp(17px,1.9vw,21px);line-height:1.6;font-weight:400;
  color:#cbc7be;text-wrap:pretty}
.rs-lead{max-width:var(--mg-measure);margin:30px 0 0}
.rs-lead p{margin:0 0 15px;font-size:clamp(15px,1.45vw,17px);line-height:1.72;
  color:var(--mg-body);text-wrap:pretty}
.rs-lead p:last-child{margin-bottom:0}
/* the turn carries one orange phrase, not four orange lines */
.rs-lead__turn strong,.rs-lead__turn b{color:var(--mg-orange)}


/* ── 4 · identity sections — the rail and the column ────────────────────── */
/* One grid for the whole page: title in a sticky right-aligned rail, prose in
   the column. The evidence chapters already used this; retrofitting the
   identity sections to match is what stopped the right-hand space reading as
   an accident. */

.rs-sec{max-width:var(--mg-col);padding-top:96px}

.rs-mark{position:relative;margin:0;padding:0;border:0;max-width:60ch}
.rs-mark::before{content:"";position:absolute;top:-30px;left:0;
  width:56px;height:5px;background:var(--mg-orange)}
.rs-mark h2{margin:0;font-family:var(--mg-display);font-weight:700;
  font-size:clamp(20px,2.2vw,27px);line-height:1.16;letter-spacing:.004em;
  color:var(--mg-ink)}
.rs-mark p{margin:10px 0 0;font-size:15.5px;line-height:1.68;
  color:var(--mg-quiet);max-width:52ch;text-wrap:pretty}

.rs-body{max-width:var(--mg-measure);margin:30px 0 0}
.rs-body p{margin:0 0 17px;font-size:17.5px;line-height:1.74;
  color:var(--mg-body);text-wrap:pretty}
.rs-body p:last-child{margin-bottom:0}
.rs-body strong{color:var(--mg-ink);font-weight:600}

/* two definitions side by side: research/fabrication, DeepSelf/MANTRA */
.rs-two{display:grid;grid-template-columns:1fr 1fr;gap:38px;margin:34px 0 0}
.rs-two h3{margin:0 0 10px;font-family:var(--mg-display);font-weight:700;
  font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--mg-orange)}
.rs-two p{margin:0;font-size:15px;line-height:1.7;color:#a29e95}


/* ── 7 · the evidence report ────────────────────────────────────────────── */
/* Inherits the chapter grid from inner-space-refit.css. Here we only settle
   face, colour and measure so it matches the identity sections above it. */


/* ── 8 · the close — products, name, lineage ────────────────────────────── */

/* the page's one solid orange field: a Kubrick title card, full bleed */
.research-page .rs-name{
  width:100vw;max-width:none;
  margin:120px calc(50% - 50vw) 0;padding:104px 40px;
  background:var(--mg-orange);border:0;color:#0a0a0a;text-align:center}
.research-page .rs-name__gloss{margin:0;font-family:var(--mg-mono);font-size:10px;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(10,10,10,.62)}
.research-page .rs-name__gloss b{color:#0a0a0a;font-weight:500}
.research-page .rs-name__line{
  margin:22px 0 0;font-family:var(--mg-display);font-weight:700;
  font-size:clamp(28px,6.2vw,76px);line-height:1.06;letter-spacing:-.005em;
  text-transform:uppercase;color:#0a0a0a}
.research-page .rs-name__sub{max-width:48ch;margin:20px auto 0;
  font-size:clamp(14.5px,1.4vw,16.5px);line-height:1.66;color:rgba(10,10,10,.74)}


/* ── 9 · grounds and dust ───────────────────────────────────────────────── */

/* the dust canvas: mio-dust.js inserts it into .rs-hero and positions it off
   the glyph run. Sits over the plate, under nothing. */
.mg-dust{position:absolute;pointer-events:none;z-index:2}
@media (prefers-reduced-motion:reduce){.mg-dust{display:none}}


/* ── 10 · responsive ────────────────────────────────────────────────────── */

/* the rail only exists where there is room for it */
@media(min-width:900px){
  .rs-sec{
    display:grid;grid-template-columns:var(--mg-rail) minmax(0,1fr);
    column-gap:var(--mg-gap);align-items:start;
    max-width:calc(var(--mg-rail) + var(--mg-gap) + var(--mg-measure) + 64px)}
  /* rail treatment only where a rail exists — the works mark is a plain
     left-aligned header and must not inherit the sticky right-align */
  .rs-sec .rs-mark{grid-column:1;position:sticky;top:132px;
    text-align:right;max-width:none}
  .rs-sec .rs-mark p{max-width:none}
  .rs-sec .rs-mark::before{left:auto;right:0;top:-26px}
  .rs-body{grid-column:2;margin-top:0}
  .rs-hero{max-width:calc(var(--mg-rail) + var(--mg-gap) + var(--mg-measure))}
  .research-page .rs-deck{max-width:44ch}
  .rs-lead{max-width:640px}
}

@media(max-width:940px){
  .rs-hero{padding:72px 0 12px}
}

@media(max-width:899px){
  .rs-sec{padding-top:64px}
  .research-page .rs-name{margin-top:72px;padding:64px 24px}
  }

@media(max-width:760px){
  .rs-two{grid-template-columns:1fr;gap:26px}
  .rs-lead{margin-top:22px}
}

@media(max-width:900px){.research-page .ascii-ground{display:none}}

/* ── 11 · the eye ───────────────────────────────────────────────────────── */
/* The "I" a business has never had, sitting behind the four identity sections.
   The iris is hollow, which is what the section on the instrument says out
   loud. Decoration with zero layout influence: absolute, aria-hidden,
   pointer-events none, masked so it never fights the prose it sits under. */

.rs-block{position:relative;isolation:isolate}
.ascii-eye,.ascii-eye4{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  margin:0;z-index:-1;pointer-events:none;user-select:none;white-space:pre;
  font-family:var(--mg-mono);font-size:20px;line-height:1;letter-spacing:0;
  color:var(--mg-orange);opacity:.22;
  /* the iris is hollow and sits under the prose column, so the dense parts of
     the drawing fall outside the text and it can carry real weight */
  -webkit-mask-image:radial-gradient(66% 68% at 50% 50%,#000 30%,transparent 82%);
          mask-image:radial-gradient(66% 68% at 50% 50%,#000 30%,transparent 82%)}
@media(max-width:1100px){.ascii-eye{font-size:12px;opacity:.1}}
@media(max-width:760px){.ascii-eye{display:none}}

/* ── 12 · one grid, whole page ──────────────────────────────────────────── */
/* The page had three coordinate systems: the identity block on the rail, the
   evidence chapters offset by ~44px with a narrower rail, and the closing
   sections at x=0 because they sit outside <main class="rs">. Everything now
   lands on the same edges:
       page 162 · rail 162→377 · gap 64 · column 441→1101   (at 1440px)         */

.rs--close{padding-top:0;padding-bottom:0}

/* the name card breaks out of its new container to stay full-bleed */
.research-page .rs--close .rs-name{
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

@media(min-width:900px){
}


/* ── 16 · the plates: orange bands alternating with the black ──────────── */
/* The page breathes orange/black/orange/black: hero plate, black middle,
   findings band, black close, name card, black colophon, orange strip. */

.hero-plate{background:var(--mg-orange);position:relative;isolation:isolate;overflow:hidden}
.hero-plate .rs{padding-bottom:0}
.hero-plate .rs-hero{padding:84px 0 76px;max-width:none}
.hero-plate .rs-badge{background:#0a0a0a;color:var(--mg-orange)}
.hero-plate .rs-title--lab{color:#0a0a0a;--dust-rgb:10,10,10}
/* the mega tier: the claim is display type now, not a deck */
.hero-plate .rs-deck{font-family:var(--mg-display);font-weight:700;color:#0a0a0a;
  font-size:clamp(25px,3.7vw,53px);line-height:1.08;letter-spacing:.002em;
  max-width:21ch;margin-top:38px;text-wrap:balance}
.hero-plate .rs-lead{margin-top:34px;max-width:640px}
.hero-plate .rs-lead p{color:rgba(10,10,10,.78)}
.hero-plate .rs-lead__turn strong{color:#0a0a0a}
/* the rayed eye, black, hanging off the right of the plate */
/* the solid almond, printed on the plate like a mark — the page's eye */
.hero-plate .ascii-eye-hero{position:absolute;right:28px;top:55%;transform:translateY(-50%);
  margin:0;z-index:-1;pointer-events:none;user-select:none;white-space:pre;
  font-family:var(--mg-mono);font-size:6px;line-height:1;color:#0a0a0a;opacity:.92}
@media(max-width:1100px){.hero-plate .ascii-eye-hero{display:none}}
/* the rayed eye, orange, behind the products */
@media(max-width:760px){.hero-plate .rs-hero{padding:60px 0 52px}}

/* the orange band: black type on orange, hard geometry */
.band-orange{background:var(--mg-orange);position:relative;isolation:isolate;overflow:hidden;
  margin-top:112px;padding:4px 0 56px}
.band-orange .rs-sec{padding-top:92px}
.band-orange .rs-mark h2{color:#0a0a0a}
.band-orange .rs-mark p{color:rgba(10,10,10,.62)}
.band-orange .rs-sec .rs-mark::before{background:#0a0a0a}
/* the outline eye, black, vast and faint behind the index */
.band-orange .ascii-eye2{position:absolute;left:70%;top:48%;transform:translate(-50%,-50%);
  margin:0;z-index:-1;pointer-events:none;user-select:none;white-space:pre;
  font-family:var(--mg-mono);font-size:40px;line-height:1;color:#0a0a0a;opacity:.06}

/* ── 17 · type tiers ────────────────────────────────────────────────────── */
/* mega (hero deck) → big (section marks) → body. The marks step up. */
.rs-mark h2{font-size:clamp(22px,2.6vw,32px)}
.rs-sec .rs-mark h2{line-height:1.12}

/* ── 18 · the eye ornament between bands ───────────────────────────────── */
.eye-break{display:flex;justify-content:center;margin:104px 0 0}


/* the header fades to transparent elsewhere; over orange that reads as a
   smear. Hard edge on this page. */
.research-page .site-header{background:#0a0a0a}

/* ── 20 · the readout cards ─────────────────────────────────────────────── */
/* Section marks as instrument-panel plates: a solid code chip, the title,
   and the description as uppercase mono printout. HAL's screens, the first
   computers — the diagram does the styling, nothing decorative. */

.rs-mark{border:1px solid var(--mg-rule);padding:18px 18px 20px}
.rs-mark::before{display:none}
.rs-sec .rs-mark{text-align:left}
.mk-code{display:inline-block;background:var(--mg-orange);color:#0a0a0a;
  font-family:var(--mg-mono);font-size:9px;font-weight:600;letter-spacing:.24em;
  padding:5px 9px 4px;margin-bottom:14px}
.rs-mark h2{font-size:clamp(19px,2.1vw,26px)}
.rs-mark p{font-family:var(--mg-mono);font-size:10px;line-height:1.8;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mg-quiet);margin-top:12px}
/* the card corners: register ticks, top-right and bottom-left */
.rs-mark::after{content:"";position:absolute;right:-1px;top:-1px;width:10px;height:10px;
  border-top:2px solid var(--mg-orange);border-right:2px solid var(--mg-orange)}
.rs-mark{position:relative}

/* on the orange band the plate inverts */
.band-orange .rs-mark{border-color:rgba(10,10,10,.4)}
.band-orange .mk-code{background:#0a0a0a;color:var(--mg-orange)}
.band-orange .rs-mark p{color:rgba(10,10,10,.66)}
.band-orange .rs-mark::after{border-color:#0a0a0a}


/* ── 21 · backgrounds are backgrounds ───────────────────────────────────── */
/* Bigger, further back. Every eye is absolute, z:-1, pointer-events:none —
   it can never move a line of text. The fade keeps it under the reading. */
.rs-block .ascii-eye4{font-size:15px;opacity:.11;top:46%}
.band-orange .ascii-eye2{font-size:48px;opacity:.03}
@media(max-width:760px){.ascii-eye4,.ascii-eye2{display:none}}

/* ── 22 · the terminal layer ────────────────────────────────────────────── */
/* Instruments showing real state only: the scroll depth, the findings' own
   numbers, a cursor. No fake boot text, ever. */

/* scroll depth, orange, hard under the nav (overrides the green default) */
.research-page #scrollrule{position:fixed;top:66px;left:0;right:0;height:2px;z-index:80;
  background:var(--mg-orange);box-shadow:none;transform:scaleX(0);transform-origin:0 50%;
  will-change:transform}

/* the block cursor at the end of the claim */
.hero-plate .cur{display:inline-block;width:.42em;height:.78em;background:#0a0a0a;
  margin-left:14px;vertical-align:-2px;animation:mg-blink 1.1s steps(1,end) infinite}
@keyframes mg-blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-plate .cur{animation:none}}

/* ── 23 · deeper machine ────────────────────────────────────────────────── */

/* text selection inverts, per plate — the machine owns the highlight */
.research-page ::selection{background:var(--mg-orange);color:#0a0a0a}
.hero-plate ::selection,.band-orange ::selection,.rs-name ::selection{
  background:#0a0a0a;color:var(--mg-orange)}

/* square scrollbar, black track, orange thumb */
.research-page::-webkit-scrollbar,body.research-page ::-webkit-scrollbar{width:10px;height:10px}
body.research-page::-webkit-scrollbar{width:10px}
body.research-page::-webkit-scrollbar-track{background:#0a0a0a}
body.research-page::-webkit-scrollbar-thumb{background:var(--mg-orange);border:2px solid #0a0a0a;border-radius:0}

/* the tree: the lab's output as a directory listing. Every row is a link;
   hover is a full terminal inversion. */
.rs-tree{font-family:var(--mg-mono);margin-top:4px}
.tr-root{font-size:12px;letter-spacing:.06em;color:var(--mg-ink);padding:6px 8px 10px;font-weight:600}
.tr-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:baseline;
  padding:9px 8px;text-decoration:none;border-top:1px solid var(--mg-rule)}
.tr-row:last-child{border-bottom:1px solid var(--mg-rule)}
.tr-br{color:var(--mg-faint);font-size:12px}
.tr-row b{font-weight:400;font-size:12.5px;letter-spacing:.03em;color:var(--mg-body)}
.tr-note{font-size:9px;letter-spacing:.14em;color:var(--mg-quiet);text-align:right}
.tr-row:hover{background:var(--mg-orange)}
.tr-row:hover .tr-br,.tr-row:hover b,.tr-row:hover .tr-note{color:#0a0a0a}
@media(max-width:760px){.tr-row{grid-template-columns:24px minmax(0,1fr)}.tr-note{display:none}}


/* ── 24 · terminal apparatus ────────────────────────────────────────────── */
/* Reading text stays in the legible face (operator's call). Mono is for
   apparatus only: cards, captions

/* the two-up panels take sacred's title-in-border frame */
.rs-two{gap:22px;margin-top:38px}
.rs-two>div{border:1px solid var(--mg-rule);padding:26px 18px 20px;position:relative}
.rs-two h3{position:absolute;top:-8px;left:12px;margin:0;background:var(--black,#0A0A0A);
  padding:0 9px;font-family:var(--mg-mono);font-size:9.5px;letter-spacing:.26em;
  color:var(--mg-orange)}
.rs-two p{margin:0}

/* ── 25 · the eyes, olho generation: bigger, further back ───────────────── */
/* the eye is the hero's mark: large characters, printed */
.hero-plate .ascii-eye-hero{font-size:15px;right:16px;top:57%;opacity:.92}
.rs-block .ascii-eye4{font-size:13px;opacity:.07;top:46%}
.band-orange .ascii-eye2{font-size:56px;opacity:.025}

/* ── 26 · rhythm: one vertical scale, top to bottom ─────────────────────── */
.hero-plate .rs-hero{padding:96px 0 88px}
.rs{padding-bottom:0}
.works-top{padding-bottom:96px}
.rs-sec{padding-top:96px}
.eye-break{margin:104px 0 0}
.band-orange{margin-top:104px;padding:0 0 96px}
.band-orange .rs-sec{padding-top:96px}
.rs--close .eye-break{margin:96px 0}
.research-page .rs--close .rs-name{margin-top:0}
.rs--close{padding-top:0}

/* ── 27 · the animated layer ────────────────────────────────────────────── */
/* the hero's braille wave: the codex-voice signal, black on the plate */
.hero-wave{margin:26px 0 0;overflow:hidden}
.hero-wave .mio-dots{position:static;font-family:var(--mg-mono);font-size:15px;
  line-height:1;color:rgba(10,10,10,.75);white-space:pre}
.hero-wave .mio-dots span{display:block}

/* ── 28 · the grand band ────────────────────────────────────────────────── */
/* The black interstitial above the footer, made a real moment: the eye large
   and blinking, orange character rain falling behind it. */
.eye-break--grand{margin:0;padding:130px 0;display:flex;justify-content:center;
  position:relative;overflow:hidden;isolation:isolate}
.eye-break--grand .eye-rain{position:absolute;inset:0;z-index:0;opacity:.4;
  pointer-events:none}
.eye-break--grand .eye-grand{position:relative;z-index:1}
/* the word layer: real display type, Kubrick weight, arriving like a board.
   Fixed letter cells keep the block from changing shape as letters cycle. */
.eye-break--grand .eye-words{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);z-index:1;margin:0;pointer-events:none;
  user-select:none;display:flex;justify-content:center;width:100%;
  font-family:var(--mg-display);font-weight:700;
  font-size:clamp(34px,5.8vw,86px);line-height:1;
  color:var(--mg-orange)}
.eye-break--grand .eye-grand{margin:0;white-space:pre;pointer-events:none;user-select:none;
  font-family:var(--mg-mono);font-size:clamp(9px,1.5vw,20px);line-height:1;
  color:var(--mg-orange);opacity:.85}
@media(max-width:760px){.eye-break--grand{padding:72px 0}}


/* ── 29 · the two doorways under the work of the lab ────────────────────── */
/* DeepSelf in its own register (green on black, the stairs); MANTRA as the
   site's banner component. Both are exits from the lab, and look like it. */
.ds-banner{border-bottom:1px solid var(--mg-rule);
  background:#0a0a0a;margin-top:0;position:relative;isolation:isolate}
.ds-banner::after{content:"";position:absolute;right:-1px;top:-1px;width:14px;height:14px;
  border-top:2px solid #10B981;border-right:2px solid #10B981}
.dsb-inner{max-width:var(--mg-col);margin:0 auto;padding:104px 32px;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.dsb-kicker{margin:0 0 14px;font-family:var(--mg-mono);font-size:9px;
  letter-spacing:.26em;color:var(--mg-quiet)}
/* the DeepSelf voice inside the lab: Space Grotesk, capital, green */
.dsb-title{margin:0;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(34px,4.8vw,64px);line-height:1.02;letter-spacing:-.01em;color:#10B981}
.dsb-title span{color:#efece5}
.dsb-sub{margin:16px 0 0;font-size:16px;line-height:1.7;color:var(--mg-body);max-width:46ch}
.dsb-sub strong{color:#efece5;font-weight:600}
.dsb-btn{display:inline-block;margin-top:24px;background:#10B981;color:#0a0a0a;
  font-family:var(--mg-mono);font-size:10.5px;font-weight:600;letter-spacing:.22em;
  padding:13px 22px;text-decoration:none}
.dsb-btn:hover{background:#34d39b}
.dsb-img{width:100%;max-height:460px;object-fit:contain;justify-self:end}
.research-page .mantra-banner{margin:0}
@media(max-width:860px){.dsb-inner{grid-template-columns:1fr;gap:30px}.dsb-img{max-height:380px;justify-self:center}}

/* ── 30 · the type, louder ──────────────────────────────────────────────── */
/* The deck is a title card now — all caps in the HTML, Kubrick weight here.
   The lead and body step up a full tier: this page is read standing back. */
.hero-plate .rs-deck{font-size:clamp(27px,4.2vw,58px);line-height:1.06;
  letter-spacing:.012em;max-width:20ch}
.hero-plate .rs-lead{margin-top:38px;max-width:700px}
.hero-plate .rs-lead p{font-size:clamp(17px,1.8vw,21px);line-height:1.7;margin-bottom:18px}
.rs-body p{font-size:clamp(17.5px,1.55vw,19px)}

/* ── 31 · the statement bands ───────────────────────────────────────────── */
/* The operator's two statements at display scale, keeping the page's plate
   alternation: orange hero → black question → orange index → black identity.
   The ideas work at different sizes; nothing here is small. */
.stmt-band{position:relative;padding:112px 0}
.stmt-band .rs{padding-bottom:0}
.stmt-band--question{background:#0a0a0a}
.sb-line{margin:0;font-family:var(--mg-display);font-weight:700;
  font-size:clamp(27px,3.9vw,57px);line-height:1.1;letter-spacing:.004em;
  color:var(--mg-ink);max-width:26ch;text-wrap:balance}
.sb-line span{color:var(--mg-orange)}
.stmt-band--study{background:var(--mg-orange)}
.sb-kicker{display:inline-block;margin:0 0 34px;background:#0a0a0a;color:var(--mg-orange);
  font-family:var(--mg-mono);font-size:10px;font-weight:600;letter-spacing:.28em;
  padding:8px 14px 7px}
/* the departure board: one heavy title, the six objects running through it.
   Plain display type on the plate — no tiles. Each letter sits in a fixed
   invisible cell so the word holds its shape while the letters cycle. */
.sb-board{margin:0;display:flex;font-family:var(--mg-display);font-weight:700;
  font-size:clamp(30px,5.4vw,78px);line-height:1.06;
  color:#0a0a0a;padding:18px 0;min-height:1.4em;
  border-top:1px solid rgba(10,10,10,.28);border-bottom:1px solid rgba(10,10,10,.28)}
.sb-board i,.eye-break--grand .eye-words i{font-style:normal;font-weight:700;
  display:block;flex:0 0 auto;text-align:center;white-space:pre;margin-right:.06em}
.sb-board i:last-child,.eye-break--grand .eye-words i:last-child{margin-right:0}
.sb-board i.sp,.eye-break--grand .eye-words i.sp{width:.6em}
.sb-board--static{display:block;white-space:normal;
  font-size:clamp(19px,2.6vw,36px);line-height:1.35}
.sb-close{margin:36px 0 0;font-family:var(--mg-mono);font-weight:600;
  font-size:clamp(15px,1.7vw,21px);letter-spacing:.14em;line-height:1.85;
  color:rgba(10,10,10,.8);max-width:56ch}
@media(max-width:760px){.stmt-band{padding:68px 0}}

/* ── 32 · the lab band: the work of the lab on orange ───────────────────── */
.band-orange--lab{margin-top:0;padding:4px 0 0}
.band-orange--lab .rs{padding-bottom:0}
.band-orange--lab .rs-sec{padding-top:88px;padding-bottom:96px}
.band-orange .rs-body p{color:rgba(10,10,10,.82);font-size:clamp(18px,1.7vw,20.5px)}
.band-orange .rs-body p.rs-lede-big{font-size:clamp(21px,2.3vw,27px);line-height:1.52;
  font-weight:500;color:rgba(10,10,10,.92)}
/* the three location types, as plates — the operator's taxonomy given walls */
.band-orange .rs-body p.lab-extract-intro{margin:46px 0 18px;
  font-family:var(--mg-mono);font-weight:600;
  font-size:clamp(13px,1.3vw,16px);letter-spacing:.18em;color:rgba(10,10,10,.8)}
.lab-locs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lab-loc{position:relative;border:1px solid rgba(10,10,10,.45);
  padding:20px 16px 20px;background:rgba(10,10,10,.045)}
.lab-loc::after{content:"";position:absolute;right:-1px;top:-1px;width:10px;height:10px;
  border-top:2px solid #0a0a0a;border-right:2px solid #0a0a0a}
.lab-loc b{display:inline-block;background:#0a0a0a;color:var(--mg-orange);
  font-family:var(--mg-mono);font-size:10px;font-weight:600;letter-spacing:.2em;
  padding:6px 10px 5px;margin-bottom:14px}
.lab-loc span{display:block;font-size:15.5px;line-height:1.62;color:rgba(10,10,10,.85)}
.band-orange .rs-body p.lab-master{margin:28px 0 0;font-family:var(--mg-display);
  font-weight:700;font-size:clamp(19px,2.1vw,25px);line-height:1.38;color:#0a0a0a}
@media(max-width:760px){.lab-locs{grid-template-columns:1fr}}
.band-orange .rs-body strong{color:#0a0a0a}
.band-orange .rs-mark{border-color:rgba(10,10,10,.4)}
.band-orange .mk-code{background:#0a0a0a;color:var(--mg-orange)}
.band-orange .rs-mark p{color:rgba(10,10,10,.66)}
.band-orange .rs-mark::after{border-color:#0a0a0a}
.band-orange .rs-two>div{border-color:rgba(10,10,10,.4)}
.band-orange .rs-two h3{background:var(--mg-orange);color:#0a0a0a}
.band-orange .rs-two p{color:rgba(10,10,10,.78);font-size:16px}
.band-orange .rs-tree .tr-root{color:#0a0a0a}
.band-orange .tr-row{border-top-color:rgba(10,10,10,.3)}
.band-orange .tr-row:last-child{border-bottom-color:rgba(10,10,10,.3)}
.band-orange .tr-br{color:rgba(10,10,10,.5)}
.band-orange .tr-row b{color:rgba(10,10,10,.85);font-size:13.5px}
.band-orange .tr-note{color:rgba(10,10,10,.6)}
.band-orange .tr-row:hover{background:#0a0a0a}
.band-orange .tr-row:hover .tr-br,.band-orange .tr-row:hover b,
.band-orange .tr-row:hover .tr-note{color:var(--mg-orange)}
/* the outline eye reads black on the orange band */
.band-orange--lab .ascii-eye2{left:72%;top:50%}

/* ── 33 · the loud small things ─────────────────────────────────────────── */
/* Section titles are capitalised; the reading text never drops to fine print;
   the name card's question is a real tier, not a caption. */
.rs-mark h2{text-transform:uppercase;letter-spacing:.028em}
.hero-plate .rs-lead p{font-size:clamp(18px,2vw,23px);line-height:1.62}
.research-page .rs-name__sub{max-width:44ch;margin:28px auto 0;
  font-family:var(--mg-display);font-weight:700;letter-spacing:.02em;
  font-size:clamp(16px,1.9vw,24px);line-height:1.42;color:rgba(10,10,10,.85)}
/* the DeepSelf banner: gold-charcoal ground so the stairs read */
.ds-banner{background:
  radial-gradient(92% 130% at 74% 64%,rgba(226,192,120,.19),rgba(226,192,120,0) 58%),
  linear-gradient(155deg,#181410,#0a0a0a 72%)}
@media(max-width:860px){
  .ds-banner{background:
    radial-gradient(120% 90% at 50% 82%,rgba(226,192,120,.22),rgba(226,192,120,0) 60%),
    linear-gradient(165deg,#181410,#0a0a0a 72%)}}

/* ── 37 · SELFLESS: the missing layer, on its own orange plate ──────────── */
/* The band performs its own argument: SELF set solid, LESS set hollow. The
   schematic runs monumental at container width, powers on in historical
   order when it enters the viewport (legal 1602 → body → mind), and the
   void arrives last — the one solid black object on the orange plate, a
   scanner sweeping it. */
.band-selfless{width:100vw;margin:0 calc(50% - 50vw);padding:96px 0 104px}
/* the middle reading block, between the two doorway banners */
.works-mid{padding-bottom:96px}
.works-mid .rs-sec{padding-top:88px}
/* the incubation claim, at display scale */
.rs-body p.inc-big{margin:0 0 26px;font-family:var(--mg-display);font-weight:700;
  font-size:clamp(22px,2.9vw,40px);line-height:1.16;letter-spacing:.008em;
  color:var(--mg-ink);text-wrap:pretty}
.rs-body p.inc-big span{color:var(--mg-orange)}
/* the bridge: the incubation space introduces the harness, and hands down */
.rs-body p.inc-bridge{margin:38px 0 0;font-family:var(--mg-display);font-weight:700;
  font-size:clamp(17px,1.9vw,25px);letter-spacing:.02em;color:var(--mg-ink)}
.rs-body p.inc-bridge span{color:var(--mg-orange)}
.rs-body p.inc-bridge::after{content:"  \25BE";color:var(--mg-orange)}
/* the name card follows the lab band orange-to-orange: a seam, not a gap */
.research-page .rs--close .rs-name{border-top:1px solid rgba(10,10,10,.3)}
.slf-inner{max-width:var(--mg-col);margin:0 auto;padding:0 32px}
.slf-head{max-width:none}
.slf-title{margin:26px 0 0;font-family:var(--mg-display);font-weight:700;
  font-size:clamp(58px,10.5vw,150px);line-height:.92;letter-spacing:.012em;
  color:#0a0a0a}
.slf-title span{color:transparent;-webkit-text-stroke:3px #0a0a0a}
@supports not (-webkit-text-stroke:1px #000){.slf-title span{color:rgba(10,10,10,.28)}}
.slf-sub{margin:24px 0 0;font-family:var(--mg-mono);font-weight:600;
  font-size:clamp(11px,1.2vw,14px);letter-spacing:.24em;color:rgba(10,10,10,.72)}
.slf-cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin:48px 0 0}
.slf-cols p{margin:0;font-size:clamp(17px,1.6vw,19.5px);line-height:1.7;
  color:rgba(10,10,10,.85);text-wrap:pretty}
.slf-cols strong{color:#0a0a0a;font-weight:600}
.slf-question{margin:68px 0 0;font-family:var(--mg-display);font-weight:700;
  font-size:clamp(21px,2.8vw,36px);line-height:1.32;color:#0a0a0a;max-width:34ch;
  text-wrap:pretty}
@media(max-width:820px){.slf-cols{grid-template-columns:1fr;gap:24px}}

/* the schematic, scaled to the band */
.band-selfless .stack-schema{margin-top:60px}
.band-selfless .ss-title{color:rgba(10,10,10,.6)}
.band-selfless .ss-layer{grid-template-columns:200px minmax(0,1fr) auto;
  padding:22px 24px;border-color:rgba(10,10,10,.45);background:rgba(10,10,10,.045)}
.band-selfless .ss-layer::after{border-color:#0a0a0a}
.band-selfless .ss-layer:hover{border-color:#0a0a0a}
.band-selfless .ss-name{font-size:clamp(20px,2vw,27px);color:#0a0a0a}
.band-selfless .ss-code{color:rgba(10,10,10,.55)}
.band-selfless .ss-parts{font-size:clamp(11px,1.15vw,13.5px);color:rgba(10,10,10,.8)}
.band-selfless .ss-status{color:rgba(10,10,10,.62)}
.band-selfless .ss-status i{background:#0a0a0a}
.band-selfless .ss-conn{color:rgba(10,10,10,.45)}
.band-selfless .ss-note{color:#0a0a0a;font-weight:600}
/* the void: the one solid black object on the plate */
.band-selfless .ss-layer--self{background:#0a0a0a;border:1px dashed rgba(255,90,0,.75);
  overflow:hidden}
.band-selfless .ss-layer--self:hover{border-color:var(--mg-orange)}
.band-selfless .ss-layer--self .ss-name,
.band-selfless .ss-layer--self .ss-code,
.band-selfless .ss-layer--self .ss-status,
.band-selfless .ss-parts.ss-void{color:var(--mg-orange)}
.band-selfless .ss-layer--self::before{content:"";position:absolute;top:0;bottom:0;
  left:0;width:38px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,90,0,.25),transparent);
  animation:slf-scan 2.6s ease-in-out infinite alternate}
@keyframes slf-scan{from{left:0}to{left:calc(100% - 38px)}}
/* power-on: layers arrive in historical order when the figure enters */
.band-selfless .ss-layer,.band-selfless .ss-note{opacity:0;transform:translateY(12px);
  transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
.band-selfless .ss-layer.lit,.band-selfless .ss-note.lit{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .band-selfless .ss-layer,.band-selfless .ss-note{opacity:1;transform:none}
  .band-selfless .ss-layer--self::before{animation:none}}
@media(max-width:640px){
  .band-selfless .ss-layer{grid-template-columns:1fr}
  .band-selfless{padding:64px 0 72px}}

/* ── 36 · the stack schematic ───────────────────────────────────────────── */
/* FIG·01 — the corporate organism, assembling. Four layers as instrument
   plates: mind and body under construction, the legal entity long online,
   and the self a dashed void with a live cursor. The diagram is the
   argument: the stack has everything except its centre. */
.stack-schema{margin:44px 0 0;font-family:var(--mg-mono)}
.ss-title{display:flex;gap:12px;align-items:center;margin-bottom:16px;
  font-size:10px;letter-spacing:.22em;color:var(--mg-quiet)}
.ss-title b{background:var(--mg-orange);color:#0a0a0a;font-weight:600;
  letter-spacing:.2em;padding:5px 9px 4px}
.ss-layer{position:relative;display:grid;
  grid-template-columns:128px minmax(0,1fr) auto;gap:18px;align-items:center;
  border:1px solid var(--mg-rule);padding:17px 18px;background:rgba(255,255,255,.02);
  transition:border-color .15s}
.ss-layer::after{content:"";position:absolute;right:-1px;top:-1px;width:9px;height:9px;
  border-top:2px solid var(--mg-orange);border-right:2px solid var(--mg-orange)}
.ss-layer:hover{border-color:var(--mg-rule-hot)}
.ss-name{display:block;font-family:var(--mg-display);font-weight:700;
  font-size:19px;line-height:1.1;letter-spacing:.02em;color:var(--mg-ink)}
.ss-code{display:block;margin-top:5px;font-size:9px;letter-spacing:.22em;color:var(--mg-quiet)}
.ss-parts{font-size:11px;letter-spacing:.15em;line-height:1.7;color:var(--mg-body)}
.ss-status{font-size:9.5px;letter-spacing:.18em;color:var(--mg-quiet);white-space:nowrap}
.ss-status i{display:inline-block;width:7px;height:7px;margin-right:9px;
  background:var(--mg-orange);font-style:normal;
  animation:mg-blink 1.4s steps(1,end) infinite}
.ss-status i.on{animation:none}
.ss-conn{display:flex;justify-content:center;gap:90px;padding:3px 0;
  font-size:11px;line-height:1;color:var(--mg-faint)}
/* the missing layer */
.ss-layer--self{border:1px dashed var(--mg-rule-hot);background:rgba(255,90,0,.05)}
.ss-layer--self::after{display:none}
.ss-layer--self .ss-name,.ss-layer--self .ss-code,
.ss-layer--self .ss-status{color:var(--mg-orange)}
.ss-void{font-size:12px;letter-spacing:.2em;color:var(--mg-orange)}
.ss-void .cur2{display:inline-block;width:.55em;height:1em;background:var(--mg-orange);
  margin-left:9px;vertical-align:-2px;animation:mg-blink 1.1s steps(1,end) infinite}
.ss-note{margin-top:16px;font-size:10px;letter-spacing:.22em;color:var(--mg-orange)}
@media(max-width:640px){
  .ss-layer{grid-template-columns:1fr;gap:8px}
  .ss-status{justify-self:start}
  .ss-conn{gap:44px}}
@media(prefers-reduced-motion:reduce){
  .ss-status i,.ss-void .cur2{animation:none}}

/* ── 34 · the e-ink plates ──────────────────────────────────────────────── */
/* The orange is a matte sheet, not a screen — the kindle surface from the
   harness's e-ink viewers (mantra.html .eink): fractal-noise paper grain
   multiplied over the plate, a hairline vertical weave, and a gentle
   top-light falloff. No glow, no lines, no sweep. Overlays are
   pointer-events:none — they can never move or block a line of text. */
.research-page .rs-name{position:relative;overflow:hidden}
.stmt-band{overflow:hidden}
.hero-plate::after,.stmt-band--study::after,.band-orange::after,
.research-page .rs-name::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:6;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.03) 0 1px,transparent 1px 3px),
    linear-gradient(178deg,rgba(255,255,255,.07),rgba(0,0,0,.035) 55%,rgba(0,0,0,.07))}
.hero-plate::before,.stmt-band--study::before,.band-orange::before,
.research-page .rs-name::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:6;
  opacity:.85;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.14'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── 35 · the nameplate ─────────────────────────────────────────────────── */
/* "Language Technology Labs" is what kind of place this is — a proper black
   plate now, register-ticked, not a chip. */
.hero-plate .rs-badge{
  position:relative;background:#0a0a0a;color:var(--mg-orange);
  font-size:13px;font-weight:600;letter-spacing:.4em;
  padding:15px 26px 14px;text-transform:uppercase}
.hero-plate .rs-badge::after{
  content:"";position:absolute;right:-1px;top:-1px;width:11px;height:11px;
  border-top:2px solid var(--mg-orange);border-right:2px solid var(--mg-orange)}
.hero-plate .rs-badge::before{
  content:"";display:inline-block;width:8px;height:8px;margin-right:16px;
  background:var(--mg-orange);vertical-align:1px;
  animation:mg-blink 1.1s steps(1,end) infinite}
@media(prefers-reduced-motion:reduce){.hero-plate .rs-badge::before{animation:none}}

/* ── 38 · the hero, recomposed for phones ───────────────────────────────── */
/* The eye leads, centred and alive; the nameplate stacks LANGUAGE over
   TECH LABS with the status square pinned to its corner; the title and deck
   scale to the plate. */
@media(max-width:760px){
  .hero-plate .rs-hero{padding:26px 0 40px}
  /* the eye IS the mark on mobile: centred, large, alive */
  .hero-plate .ascii-eye-hero{display:block;position:static;
    width:-moz-fit-content;width:fit-content;margin:40px auto 12px;
    transform:translateX(2.2em);font-size:8.6px;opacity:1}
  .hero-plate .rs-badge{display:none}
  .rs-title--lab{font-size:min(11.6vw,46px);letter-spacing:.015em;margin-top:10px;
    text-align:center;width:100%}
  .hero-plate .rs-deck{margin-left:auto;margin-right:auto;text-align:center}
  .hero-plate .rs-deck{font-size:clamp(23px,6.4vw,30px);line-height:1.12;
    margin-top:20px;max-width:none}
  .hero-plate .rs-lead{margin-top:22px;max-width:none}
  .hero-plate .rs-lead p{font-size:16.5px;line-height:1.68;margin-bottom:14px}
  .hero-wave{margin-top:18px}
  .mg-dust{display:none}
}

/* the scroll rule sits flush under the mobile header */
@media(max-width:760px){
  .research-page #scrollrule{top:54px}
}