/* ═══════════════════════════════════════════════════════════════════════
   MIO GENICS · v3 landing page
   Everything the prototype adds on top of research.css, set to the rules in
   design/MIO-DESIGN-RULES.md. The tokens at the top ARE the rules; the
   selectors below only apply them. Change a rule here, not in a selector.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── the line: one module for every vertical distance (Müller-Brockmann) ── */
  --mio-line:26px;                 /* body leading; every gap is a multiple */
  --mio-line-2:52px;
  --mio-line-3:78px;
  --mio-line-4:104px;

  /* ── two display sizes per view, at 2:1 (Vignelli); nothing between them ── */
  --mio-t1:clamp(38px,5.6vw,70px); /* the title (research.css sets the hero's own, larger) */
  --mio-t2:clamp(32px,3.9vw,56px); /* the names: half the title */
  --mio-small:15.5px;              /* the running size; the deck and all labels live here */

  /* ── letterspacing: display caps tight, small caps opened, never default (Tschichold) ── */
  --mio-track-display:-.02em;
  --mio-track-caps:.12em;          /* Futura caps at the small size */
  --mio-track-mono:.3em;           /* mono labels */
  --mio-track-mono-tight:.24em;

  /* ── rules as bars, thick and thin (Tschichold); boxes only where they resolve to a thing ── */
  --mio-bar:4px;
  --mio-hairline:1px;

  /* ── the plate ── */
  --mio-ink:var(--ink-on-plate-2,#0a0a0a);
  --mio-ink-82:rgba(10,10,10,.82);
  --mio-ink-70:rgba(10,10,10,.7);
  --mio-ink-35:rgba(10,10,10,.35);
}

/* ── THE MOBILE SYSTEM ────────────────────────────────────────────────────
   One redefinition of the same module, not a second system: every gap on
   this page is already a multiple of --mio-line, so dropping the module
   itself at the primary breakpoint (900px — where .rs-sec's own rail layout
   in research.css already switches to a single column, so it's this page's
   real desktop/mobile line, not an arbitrary one) carries every rule that
   already reads from these tokens down to a phone-appropriate rhythm at
   once, consistently, rather than retuning each gap by hand. The ratio
   (1 : 2 : 2.8 : 3.6) is close to desktop's (1 : 2 : 3 : 4) but compresses
   the two largest gaps a little harder, since a short viewport feels a
   big gap more than a wide one does. ───────────────────────────────────── */
@media(max-width:900px){
  :root{
    --mio-line:22px;
    --mio-line-2:40px;
    --mio-line-3:56px;
    --mio-line-4:72px;
  }
}

/* ── THE HERO ─────────────────────────────────────────────────────────── */
/* bottom margin largest (the 3:5:5:8 page); everything flush left */
.hero-plate{position:relative;min-height:min(92vh,820px);display:flex;align-items:center;padding:var(--mio-line) 0 var(--mio-line-4)}
.hero-plate .hero-field{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-plate .fig-cv{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.hero-plate .hero-logo3d{position:absolute;z-index:1;right:-10px;bottom:-6px;height:clamp(240px,30vw,500px);width:clamp(240px,30vw,500px);opacity:.96;pointer-events:none;user-select:none}
.hero-plate .hero-logo3d canvas{display:block;width:100%;height:100%}
/* .hero-plate is a flex row with .rs as its one real item; a flex item's default min-width is auto, not 0,
   which means it refuses to shrink narrower than its widest unbreakable descendant — here, the nowrap h1.
   On a narrow phone that floor is wider than the viewport itself, so .rs (and everything positioned off
   it: the gloss, the cue) gets dragged wide and the excess is silently clipped by .hero-plate's own
   overflow:hidden. This is the actual mechanism behind "goes off the page": not a sizing typo on any one
   element, a container that can't shrink below content it was never going to render that wide. */
.hero-plate .rs{position:relative;z-index:1;min-width:0}
.hero-plate .rs-hero{padding-top:52px;padding-bottom:0}
.hero-plate .rs-title{margin-top:var(--mio-line);letter-spacing:var(--mio-track-display);font-size:clamp(44px,9.6vw,152px);line-height:1}
.hero-plate .hero-oh{font-size:clamp(17px,1.4vw,20px)}
.hero-plate .rs-deck{margin-top:var(--mio-line)}

/* the tag: a thick bar over small open caps, no frame */
.hero-plate .rs-badge{display:block;position:relative;background:none;color:var(--mio-ink);border:0;padding:14px 0 0;font-size:11px;letter-spacing:.34em}
.hero-plate .rs-badge::before{content:"";display:block;position:absolute;left:0;top:0;width:52px;height:var(--mio-bar);background:var(--mio-ink);margin:0;animation:none}
.hero-plate .rs-badge::after{display:none}

/* the deck: the small tier, caps carefully opened */
/* the deck is the message, at half the title: the second of the view's two sizes */
.research-page .rs-deck.v3-deck{font-family:var(--mg-display);font-weight:700;font-size:var(--mio-t2);line-height:1.06;letter-spacing:var(--mio-track-display);color:var(--mio-ink);max-width:22ch;margin-top:var(--mio-line)}

/* the sentence under the message, at the running size: the reader's own case, in words they would use */
.hero-plate .hero-oh{margin:var(--mio-line) 0 0;max-width:44ch;font-size:clamp(16px,1.3vw,19px);line-height:var(--mio-line);color:var(--mio-ink-82)}

/* the cue under the title card: one mono link to the question */
.hero-plate .hero-cue{display:inline-block;margin-top:var(--mio-line);font-family:var(--mg-mono);font-weight:600;font-size:11px;letter-spacing:var(--mio-track-mono);color:var(--mio-ink);text-decoration:none;border-bottom:var(--mio-hairline) solid var(--mio-ink);padding-bottom:6px;transition:letter-spacing .2s}
.hero-plate .hero-cue:hover{letter-spacing:.4em}

/* the two objects, as type on the plate: one rule, two columns, names at half the title */
/* the punch line under the message: the small display tier, caps opened, arriving by the alphabet-run */
.hero-plate .hero-two{margin:var(--mio-line) 0 0;max-width:40ch;font-family:var(--mg-display);font-weight:700;font-size:clamp(14px,1.25vw,17px);line-height:var(--mio-line);letter-spacing:var(--mio-track-caps);color:var(--mio-ink)}
/* the name explained, in mono, between the case and the cue */
.hero-plate .hero-gloss{margin:var(--mio-line-2) 0 0;font-family:var(--mg-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mio-ink-70)}
.hero-plate .hero-gloss b{font-weight:600;color:var(--mio-ink)}
/* the hollow half of GENICS is painted through its own glyphs by figs.js (background-clip:text), so it can never misalign */
.hero-plate .rs-title b{font-weight:700;color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;background-size:100% 100%;background-repeat:no-repeat}
@media(max-width:900px){
  .hero-plate{min-height:0}
  .hero-plate .hero-field{opacity:.35}
  /* below the text now, not pinned to the corner: a real block in normal flow, centred, large enough to be the hero's second object, not a footnote */
  .hero-plate .hero-logo3d{position:static;width:min(82vw,380px);height:min(82vw,380px);margin:var(--mio-line-3) auto 0;right:auto;bottom:auto}
  /* the question is the title on every width; the index page's rule hid a title that only repeated the header */
  /* on a phone the name shows at half the desktop title and the message at half of that, so the hero stays one sentence in two sizes */
  /* MIO GENICS stays one line by design (the   between the words, the nowrap on .rs-title) — so unlike
     every other clamp on this page, this one has to stay inside a hard limit (the viewport minus .rs's own
     64px of padding) at every width in the range, not just look right at whatever width was last checked */
  .hero-plate .rs-title--lab{display:block;font-size:clamp(36px,12.5vw,68px);margin-top:var(--mio-line)}
  .research-page .rs-deck.v3-deck{font-size:clamp(26px,7.6vw,36px);line-height:1.16;margin-top:18px}
  .hero-plate .hero-oh{margin-top:var(--mio-line)}
  .hero-plate .hero-two{margin-top:var(--mio-line-2);font-size:clamp(15px,4vw,18px)}
}

/* ── THE SECTIONS (PRB·01, LAY·02, OBJ·03, HAR·04, LAB·05) ───────────────
   research.css's own mobile reduction for .rs-sec's padding-top (64px) is
   a 1-class selector; .works-mid .rs-sec, unconditional elsewhere in that
   same file, is 2 classes and wins regardless of width — so every section
   on this page was keeping its full desktop padding-top on a phone. Given
   the same padding, LAB·05's own wrapper (.band-orange--lab .rs-sec) never
   had a mobile rule at all. Both fixed here, off the same mobile module so
   they tighten together. The section headers were the other inconsistency:
   .rs-mark h2 floors at 22px on mobile, well under the title tier this
   page's other big moments now use — raised to sit clearly below p.big's
   lead sentences (the existing desktop hierarchy: a lead sentence always
   outweighs the label above it) without closing the gap between them. ── */
@media(max-width:900px){
  .works-mid .rs-sec{padding-top:var(--mio-line-3)}
  .band-orange--lab .rs-sec{padding-top:var(--mio-line-3);padding-bottom:var(--mio-line-3)}
  .rs-mark h2{font-size:clamp(24px,6.6vw,30px);line-height:1.12}
}

/* ── THE SUBSTANCE UNDER EVERY PLATE ──────────────────────────────────── */
.band-swell,.band-field{position:absolute;inset:0;z-index:0;pointer-events:none}
.band-swell .fig-cv,.band-field .field-cv{position:absolute;inset:0;width:100%;height:100%}
.stmt-band,.card-machine,.research-page .rs-name,.band-orange{position:relative;isolation:isolate}
.stmt-band>.rs,.card-machine>*:not(.band-swell),.research-page .rs-name>*:not(.band-swell),.band-orange>.rs{position:relative;z-index:1}
.stmt-band--question .sb-line{text-shadow:none}
/* ORGANISATIONAL and TECHNOLOGICAL are the two longest words on the page; past a point a long word fighting
   a narrow measure is worse than the short one people already use for it, so it just substitutes, not truncates */
.sb-line .wd-full,.sb-line .wd-abbr{color:inherit}
.sb-line .wd-abbr{display:none}
@media(max-width:480px){.sb-line .wd-full{display:none}.sb-line .wd-abbr{display:inline}}

/* the MANTRA banner's rain, in depth: the engine's canvas replaces the 2D rain on this page */
.mantra-banner[data-3d] .mb-rain{display:none}
/* the rain sits under the veil, as the 2D rain does on every other page, so the card reads */
.mantra-banner .fig-cv{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.8;pointer-events:none}

/* ── THE FIGURE BANDS ─────────────────────────────────────────────────── */
.fig-band{position:relative;width:100vw;margin:56px calc(50% - 50vw) 0;height:clamp(420px,56vh,580px);overflow:hidden;background:var(--mio-ink);border-top:var(--mio-hairline) solid var(--mg-rule);border-bottom:var(--mio-hairline) solid var(--mg-rule);cursor:crosshair}
/* on a narrow screen there's no wide shot to hold, so give each banner more height instead, closer to the figure's own aspect */
@media(max-width:900px){.fig-band{height:clamp(480px,78vh,720px)}}
.fig-band .fig-cv{position:absolute;inset:0;width:100%;height:100%}
/* a band straight after a doorway banner sits flush against it */
.ds-banner+.fig-band,.mantra-banner+.fig-band,.hero-plate+.fig-band{margin-top:0;border-top:0}
/* a plate straight after a figure sits flush on it */
.fig-band+.card-machine{margin-top:0}
/* the figure's label resolves to the figure it sits on; nothing else is labelled */
.fig-band .fig-title{position:absolute;left:32px;top:24px;display:flex;gap:12px;align-items:center;z-index:2;font-family:var(--mg-mono);font-size:10px;letter-spacing:.22em;color:#807c74;background:var(--mio-ink);padding:0 14px 0 0}
.fig-band .fig-title b{background:var(--mg-orange);color:var(--mio-ink);font-weight:600;letter-spacing:.2em;padding:5px 9px 4px}
/* a band's words: one line per phase, in the grand banner's type, centred (lapidary text may be centred) */
.fig-words{position:absolute;inset:0;z-index:2;display:flex;justify-content:center;align-items:center;pointer-events:none;font-family:var(--mg-display);font-weight:700;font-size:clamp(28px,4.2vw,62px);line-height:1;color:var(--mg-orange)}
.fig-words .fw-line{display:none}
.fig-words .fw-line.on{display:flex;background:var(--mio-ink);padding:10px 18px 8px}
.fig-words i{font-style:normal;font-weight:700;display:block;flex:0 0 auto;text-align:left;white-space:pre;margin-right:.06em}
.fig-words i:last-child{margin-right:0}
.fig-words i.sp{width:.6em}

/* ── HEADINGS RESOLVE FROM NOISE: the spin cells ──────────────────────── */
.sw{white-space:nowrap}
.sw i{font:inherit;letter-spacing:inherit;color:inherit;display:inline-block;text-align:left;overflow:hidden;vertical-align:baseline}   /* left, not centred: the cell's width is locked to the final glyph, but a mid-scramble character is a different width, and centring it made that slack bounce the glyph side to side — left-aligning pins the leading edge still, so only trailing slack (invisible, it's blank) moves */

/* ── DEVICES INSIDE THE SECTIONS ──────────────────────────────────────── */
.bootlog-dev{margin:34px 0 0;border:var(--mio-hairline) solid var(--mg-rule);background:rgba(255,255,255,.02);padding:18px 20px 16px;position:relative}
.bootlog-dev::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)}
.bootlog-dev .bl-title{font-family:var(--mg-mono);font-size:9px;letter-spacing:.24em;color:var(--mg-quiet);margin:0 0 12px}
.bootlog{margin:0;font-family:var(--mg-mono);font-size:12px;line-height:1.75;color:var(--mg-body);white-space:pre;min-height:calc(1.75em*8)}
.rs-body .sub-mark{margin:38px 0 14px;font-family:var(--mg-display);font-weight:700;font-size:clamp(19px,2vw,24px);letter-spacing:.04em;text-transform:uppercase;color:var(--mg-ink)}
.rs-body p.big{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.big span{color:var(--mg-orange)}
@media(max-width:900px){.rs-body p.big{font-size:clamp(26px,7.6vw,34px)}}

/* ── THE MACHINE, as a title card (a lapidary line, so centred) ───────── */
.card-machine{width:100vw;margin:96px calc(50% - 50vw) 0;padding:120px 40px 110px;background:var(--mg-orange);overflow:hidden;text-align:center}
.card-machine .cm-code{display:inline-block;background:var(--mio-ink);color:var(--mg-orange);font-family:var(--mg-mono);font-size:9px;font-weight:600;letter-spacing:.24em;padding:5px 9px 4px;margin-bottom:34px}
.card-machine h2{margin:0 auto;max-width:30ch;text-wrap:balance;font-family:var(--mg-display);font-weight:700;font-size:clamp(24px,3.4vw,50px);line-height:1.08;letter-spacing:.02em;text-transform:uppercase;color:var(--mio-ink)}
.card-machine p{max-width:52ch;margin:40px auto 0;font-size:clamp(16px,1.6vw,19px);line-height:1.66;color:var(--mio-ink-82)}
@media(max-width:900px){
  /* the desktop padding (120/110) was tuned for a wide, short band; on a phone it just stretches the card tall around small type */
  .card-machine{padding:72px 28px 64px}
  .card-machine h2{font-size:clamp(28px,8.6vw,36px);line-height:1.14;max-width:18ch}
}

/* ── THE STATEMENT'S INDEX ── where the question applies, one mono line under it */
.stmt-band--question .sb-index{margin:var(--mio-line-2) 0 0;font-family:var(--mg-mono);font-weight:600;font-size:10.5px;line-height:var(--mio-line);letter-spacing:var(--mio-track-mono);color:var(--mg-orange)}
/* the statement's answer: one sentence at the small size, caps opened, before the index */
.stmt-band--question .sb-answer{margin:var(--mio-line-2) 0 0;max-width:46ch;font-family:var(--mg-display);font-weight:700;font-size:clamp(14px,1.25vw,17px);line-height:var(--mio-line);letter-spacing:var(--mio-track-caps);color:var(--mg-ink)}
.stmt-band--question .sb-answer+.sb-index{margin-top:var(--mio-line)}
/* same running-caps tier as .hero-two below it in the file; same 14px-floor problem, same fix */
@media(max-width:900px){.stmt-band--question .sb-answer{font-size:clamp(15px,4vw,18px)}}
/* the substrate band sits straight on the statement band */
.band-orange--first{margin-top:0}
/* the constitutions band sits on the substrate band: two orange plates, one hairline between them */
.band-orange--first+.stmt-band--study{border-top:var(--mio-hairline) solid var(--mio-ink)}

/* the hero's cue lands the question under the fixed header */
.stmt-band--question{scroll-margin-top:68px}
/* the grand eye's rain on the engine: the 2D rain hidden, the band's canvas under the eye */
.eye-break--grand[data-3d] .eye-rain{display:none}
.eye-break--grand .fig-cv{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.5;pointer-events:none}
/* the close: the lab's question turned on the reader, at the big size, lapidary */
.band-orange .rs-body p.lab-ask{margin:var(--mio-line-2) 0 0;font-family:var(--mg-display);font-weight:700;font-size:clamp(26px,3.2vw,44px);line-height:1.1;letter-spacing:.005em;color:var(--mio-ink);max-width:22ch}
/* who it is for: three real audiences, so three real columns, hairline-divided rather than three paragraphs run together */
.lab-who{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:8px 0 0;border-top:var(--mio-hairline) solid rgba(10,10,10,.32)}
.lab-who-col{padding:20px 26px 2px 0;min-width:0}
.lab-who-col+.lab-who-col{padding-left:26px;border-left:var(--mio-hairline) solid rgba(10,10,10,.32)}
.lab-who-col .lwc-label{margin:0 0 10px;font-family:var(--mg-mono);font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(10,10,10,.58)}
.band-orange .lab-who-col p:not(.lwc-label){font-size:clamp(15px,1.25vw,16.5px);line-height:1.52}
@media(max-width:900px){
  .lab-who{grid-template-columns:1fr;border-top:0}
  .lab-who-col{padding:18px 0 2px;border-top:var(--mio-hairline) solid rgba(10,10,10,.32)}
  .lab-who-col:first-child{border-top:0}
  .lab-who-col+.lab-who-col{padding-left:0;border-left:0}
}

/* the deepself relic photo: research.css caps it at 380px on every page that shares .dsb-img,
   tuned for pages with more copy beside it; this page's own stack can afford to let it breathe */
@media(max-width:860px){
  .ds-banner .dsb-img{max-height:560px}
  .ds-banner .dsb-inner{padding:56px 28px}
}