/* ==========================================================================
   research-shell.css — the DARK SHELL around a published study.
   ==========================================================================
   Owns everything outside the cream sheet on /research/<slug>: the desk, the
   breadcrumb, the orientation band, the section rail, the Continue block and the
   end card. The sheet itself is research-reading.css, which is shared with the
   landing drawer — so nothing in THIS file can affect the drawer or the in-app
   report. That is the point of the split, and it is why the layout work lives here.

   Extracted from an inline <style> in research_public.html (2026-07-30). Inline
   meant it was re-downloaded with every page view, could not be cache-busted
   independently, and was invisible to the token guard in test_public_article.py.

   THE PROBLEM THIS FILE WAS REBUILT TO SOLVE
   ------------------------------------------
   A Quantocracy link is the first thing a practitioner ever sees of QuanterLab, and
   it landed them on an 860px sheet centred in a 1270px window — 205px of dead dark
   margin on each side — carrying a 30,000px-tall, 12-section, 48-table paper whose
   only navigation was a horizontally-scrolling pill strip that hid half its own
   contents behind an invisible scrollbar. The founder: "dry and tastless... we are
   showing a half baked, not very well made UI."
   The landing drawer renders the SAME paper and reads well, because it is a reading
   room: a titled band, a persistent rail, a sheet on a desk. This file transplants
   that geometry onto the standalone page.
   ========================================================================== */

/* The shell runs a 0.8 density zoom; the paper is designed in fixed px for 100%,
   the same as the in-app report and the drawer (the landing has no zoom). So the
   zoom is neutralised here and the masthead counter-zooms itself back (see
   public-shell.css .pub-nav) — that is what keeps the logotype one size sitewide. */
body { zoom: 1; --app-zoom: 1; }

/* THE DESK. A flat ground makes a shadow look painted on; a soft wash behind the
   paper makes it look CAST, which is the whole trick. Scoped to .research-layout,
   which the drawer does not have. */
.research-layout {
    min-height: 100vh;
    background:
        radial-gradient(120% 70% at 50% 0%, #1b212b 0%, #14181f 55%, #101319 100%),
        #14181f;

    /* WARM THE SHELL, AND STOP WRITING GREY ON GREY.
       Founder: "color of writings are grey on a darker grey surface, it feels very weak…
       all writings on the page is like grey on grey… a little bit liveliness would be
       better than this smoky cold design."
       Two things were wrong. First, contrast: --text-tertiary (#6B7688) measured 3.87:1 on
       this desk — under the readable floor — and it carried the entire section outline, both
       rail labels and the result caveat. Second, temperature: the shell's tokens are
       blue-grey (#9BA8BC has a distinct blue cast) while the document they frame is cream
       (#fbfaf6), so the page read as two unrelated materials, cold around warm.
       These redefine the three text tokens IN THIS SCOPE ONLY, shifted onto the paper's own
       cream axis. Every existing rule that already used them warms up and brightens with no
       further change, the other seven public pages are untouched, and the sheet is immune
       because it carries its own --ink/--muted/--faint (verified: zero var(--text-*) in
       research-reading.css).
         --text-primary    #E8ECF2 -> #F2EFE8   15.01 -> 15.50:1
         --text-secondary  #9BA8BC -> #CFC9BD    7.39 -> 10.80:1
         --text-tertiary   #6B7688 -> #9C968A    3.87 ->  6.05:1
       Hairlines follow the same axis: a warm line reads as the edge of paper stock, a
       blue-grey one reads as a UI divider. */
    --text-primary: #F2EFE8;
    --text-secondary: #CFC9BD;
    --text-tertiary: #9C968A;
    --rs-line: #2f2d28;
    --rs-line-soft: #262420;
}

/* GEOMETRY — the drawer's, measured and transplanted.
   The drawer at a 1270px viewport lays out 48 gutter / 858 reader / 28 gap / 288
   rail / 48 gutter. Here: a sheet column capped at the paper's own 860px, the same
   28px gap, the same 288px rail, centred as a pair. 860 + 28 + 288 + 2×48 = 1272. */
.research-container { max-width: 1272px; margin: 0 auto; padding: 34px 48px 96px; }

.research-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    font-size: 0.82rem; color: var(--text-tertiary); margin-bottom: 20px;
}
.research-breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color .2s; }
.research-breadcrumb a:hover { color: var(--text-primary); }
.research-breadcrumb svg { width: 14px; height: 14px; opacity: .6; }

/* ---- Orientation band --------------------------------------------------- */
/* What this place is, for someone who arrived from a link and has never heard of
   us. It stays on the SHELL and out of the paper: product copy does not belong in
   a scientific document, and the paper body is shared with the drawer where the
   reader already knows where they are.
   A HAIRLINE, NOT A CARD. The band needs to read as masthead furniture rather than
   as content, and the founder's voice rules forbid the flanking-rule / dot-row
   ornament that usually gets used for this. One rule underneath, full width of the
   reading pair, is the whole treatment. */
/* The head is the SAME two-column measure as the reading pair below it, so the CTA lands
   exactly over the rail and the page reads as one grid rather than a banner sitting on top
   of a layout. It holds only its own content now: the circuit thumbnail that used to sit
   here cost ~150px of header height, which is the empty band the founder ringed. */
/* FLEX, NOT THE TWO-TRACK GRID IT USED TO BE. The head now carries three things —
   orientation, the reading aids, the way in — and a third child of a two-column grid
   wraps onto a row of its own. A flex row keeps them on one line, and because the row's
   right edge IS the container's content edge, the button still finishes flush with the
   rail below it without the alignment being restated. */
.rs-head {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 18px 28px;
    max-width: 1176px; margin: 0 auto 22px;   /* 860 + 28 + 288 — the reading pair's span */
    padding: 0 0 18px; border-bottom: 1px solid var(--rs-line);
}
.research-orient { flex: 1 1 380px; }

/* ---- Reading aids ------------------------------------------------------- */
/* Conveniences for a reader who has already decided to read, so they carry no fill and
   no accent: the emerald belongs to the one action that is asking for something. */
.rs-aids { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

.rs-audio { display: flex; flex-direction: column; gap: 4px; }
.rs-audio-label {
    font-size: 0.68rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-tertiary);
}
/* The native control, toned down to the page rather than restyled into a custom player.
   Chrome/Safari expose almost nothing of its internals, so anything more ambitious means
   rebuilding it in JavaScript — for a study page that is a lot of surface to own. */
.rs-audio audio { height: 34px; width: 232px; }
.rs-audio audio::-webkit-media-controls-panel { background: #1b1e21; }

.rs-pdf {
    display: inline-flex; align-items: center; gap: 7px;
    -webkit-appearance: none; appearance: none; cursor: pointer;
    padding: 8px 14px; border-radius: 6px;
    border: 1px solid var(--rs-line); background: transparent;
    color: var(--text-secondary); font: inherit; font-size: 0.84rem;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.rs-pdf:hover { color: var(--text-primary); border-color: #45423a; background: rgba(255,250,240,.03); }
.rs-pdf:focus-visible { outline: 2px solid #3fae7f; outline-offset: 2px; }
.rs-pdf svg { width: 15px; height: 15px; }
.research-orient {
    max-width: 64ch; margin: 0; padding: 0;
    font-size: 1.02rem; line-height: 1.62; color: var(--text-secondary);
}
.research-orient b { color: var(--text-primary); font-weight: 600; }
.research-orient a { color: var(--text-secondary); text-decoration: underline;
    text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.25); }
.research-orient a:hover { color: #3fae7f; text-decoration-color: #3fae7f; }

/* ---- The reading pair: sheet + rail ------------------------------------- */
.rs-cols {
    display: grid;
    grid-template-columns: minmax(0, 860px) 288px;
    gap: 28px;
    justify-content: center;
    align-items: start;
}
.rs-main { min-width: 0; }   /* min-width:0 or a wide table stretches the column */

/* ---- The rail ------------------------------------------------------------ */
/* This is the 410px of dead margin, put to work. It carries the two things a cold
   reader needs and could not previously get without scrolling: WHAT THE STUDY
   FOUND, and WHERE THEY ARE in twenty pages.
   --rs-top is written by the shell script from the measured masthead height —
   hard-coding it would either tuck the rail under the nav or leave a gap, because
   the nav's height changes with the density zoom. */
.rs-rail {
    position: sticky;
    top: var(--rs-top, 96px);
    align-self: start;
    max-height: calc(100vh - var(--rs-top, 96px) - 24px);
    overflow-y: auto;
    /* NO `overscroll-behavior-y: contain` HERE. It froze the page whenever the cursor sat
       over the rail: the rail overflows its sticky box by as little as 39px, so a wheel
       gesture consumed those few pixels, hit the end, and `contain` then refused to chain
       the remaining scroll to the document — the pointer was over a dead zone covering the
       whole right margin. Chaining is the correct behaviour for a sidebar that is only
       incidentally scrollable. (The `overscroll-behavior-x: contain` on the paper's tables
       and figures stays: that one stops a sideways swipe triggering back-navigation, which
       is a real hazard and does not block the page.) */
    scrollbar-width: thin;
    font-size: 0.83rem;
}
.rs-rail::-webkit-scrollbar { width: 4px; }
.rs-rail::-webkit-scrollbar-thumb { background: var(--rs-line); border-radius: 2px; }

/* ---- The way in --------------------------------------------------------- */
/* The SAME object as "Follow the research" in the masthead, by the founder's explicit
   instruction — one recognisable action shape sitewide rather than a second invented one.
   Right-aligned at the end of the head, opposite the orientation line. */
.rs-lab-cta {
    justify-self: end; align-self: center;
    padding: 9px 18px; border-radius: 6px;
    background: var(--button-bg); color: var(--button-text);
    font-size: 0.9rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: transform .2s ease, background .2s ease;
}
.rs-lab-cta:hover { transform: translateY(-1px); background: #4cc48f; }

/* Rail labels: no emerald dash. It was a decorative mark repeated on both labels and the
   founder called it out — the label's job is to name the block, and letterspaced small
   caps in the warm faint already does that. */
.rs-rail-label {
    font-size: 0.66rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-tertiary); margin: 0 0 11px;
}

/* THE RESULT, ABOVE THE FOLD. The page used to show no measured outcome at all
   until the reader scrolled past ~860px of preamble. The finding belongs where the
   eye goes first, and it belongs stated with its own limits attached — which is why
   the caveat line is part of the block and not a footnote to it. */
/* A DEFINED BLOCK — bordered, but not a widget.
   The first version was the default dark-UI card (rounded, tinted, evenly weighted rows);
   stripping it to bare hairlines then went too far the other way and the block stopped
   being distinguishable from the rail beneath it ("the results card can have a proper
   bordering so it can be distinguished"). So: a real edge, in the warm line colour, with
   the paper's own 3px radius rather than a card's 10px, and the faintest lift off the desk.
   It reads as a mounted plate. What stays from the strip-back is what mattered: the two
   arms are the finding and carry the paper's figure face at display size, not four evenly
   weighted label/value rows. */
.rs-result {
    margin: 0 0 22px; padding: 15px 16px 16px;
    border: 1px solid var(--rs-line); border-radius: 3px;
    background: rgba(255, 250, 240, 0.022);
}

/* THE FIGURES. Cormorant Garamond — the same face the paper's tables use, and the only
   vendored one carrying tabular numerals, so the two Sharpes align on their decimal
   points and the rail speaks the document's language rather than the product's. */
.rs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.rs-arm { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rs-fig {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    font-size: 2.5rem; line-height: 1; font-weight: 500;
    color: var(--text-primary); letter-spacing: -0.01em;
}
.rs-arm-name {
    font-size: 0.72rem; line-height: 1.3; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rs-pair-unit {
    margin: 7px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--rs-line-soft);
    font-size: 0.72rem; letter-spacing: .04em; color: var(--text-tertiary);
}

/* The derived statistics are support, not headline: same hairline rhythm, small. */
.rs-result dl { margin: 12px 0 0; display: grid; gap: 8px; }
.rs-result .rs-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rs-result dt { color: var(--text-secondary); font-size: 0.78rem; line-height: 1.35; }
.rs-result dd {
    margin: 0; color: var(--text-primary); font-weight: 500;
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    font-size: 1.1rem; white-space: nowrap;
}
.rs-result .rs-caveat {
    margin: 13px 0 0; padding-top: 12px; border-top: 1px solid var(--rs-line-soft);
    font-size: 0.75rem; line-height: 1.55; color: var(--text-tertiary);
}
.rs-result .rs-caveat a { color: var(--text-secondary); }

/* THE SECTION OUTLINE. Vertical, so it can show every section at once instead of
   hiding two thirds of them off the right edge of a pill strip. Anchors come from
   server-rendered heading ids (app.py's |anchor_id filter), so these links work
   with JavaScript disabled and a crawler can follow them. */
/* A CONTENTS PAGE, NOT A DOCS SIDEBAR.
   The first version marked the current section with a 2px emerald left border on a flat
   list — the single most common pattern on the web and the reason it read, in the
   founder's words, as "AY default". This is set as a table of contents instead: the
   ordinal hangs in its own narrow column in the paper's figure face, the titles share one
   left edge whether they are numbered or not, and the live section is marked by weight
   and colour plus a short emerald rule in the ordinal column — the same mark the rail's
   labels use, so the whole margin has one vocabulary. */
/* THE CHAPTER LIST, GIVEN PROPER WEIGHT.
   These are the paper's chapters and they were the worst offender in the "grey on grey"
   read: 0.83rem at 3.87:1 contrast, with the ordinals fainter still at roughly 2.9:1 —
   legible only if you went looking. A contents page is something a reader USES, so it is
   set as text now rather than as metadata: cream, a step larger, with real line spacing.
   The live chapter is marked by colour and weight alone. The emerald rule that used to
   hang in the ordinal gutter is gone with its twin on the labels. */
.rs-toc { list-style: none; margin: 0; padding: 0; }
.rs-toc li { margin: 0; }
.rs-toc a {
    display: grid; grid-template-columns: 20px 1fr; gap: 9px;
    padding: 6px 0; align-items: baseline;
    color: var(--text-secondary); text-decoration: none;
    font-size: 0.875rem; line-height: 1.45;
    transition: color .14s ease;
}
.rs-num {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    font-size: 0.98rem; text-align: right; color: var(--text-tertiary);
    transition: color .14s ease;
}
.rs-txt { min-width: 0; }
.rs-toc a:hover { color: var(--text-primary); }
.rs-toc a:hover .rs-num { color: var(--text-secondary); }
.rs-toc a.on { color: var(--text-primary); font-weight: 500; }
.rs-toc a.on .rs-num { color: var(--text-primary); }
/* Appendices are still chapters, but they are not the argument — one step back, behind the
   hairline that separates the paper from its apparatus. */
.rs-toc a.rs-apx { color: var(--text-tertiary); font-size: 0.82rem; }
.rs-toc a.rs-apx .rs-num { font-size: 0.88rem; }
.rs-toc a.rs-apx:hover, .rs-toc a.rs-apx.on { color: var(--text-secondary); }
/* The rule goes on the FIRST appendix row — which is the one whose previous sibling is
   not an appendix. `li:has(a.rs-apx):first-of-type` would have matched the first <li> in
   the list instead, i.e. Motivation, and drawn the divider in the wrong place. */
.rs-toc li:not(:has(a.rs-apx)) + li:has(a.rs-apx) {
    margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--rs-line-soft);
}

/* ---- Jump to top / bottom ------------------------------------------------ */
/* A twenty-page paper with the outline pinned at the TOP of the page is a trap once you
   are in the middle of it — and on a phone the outline collapses above the paper, so the
   only way back to it is to scroll the whole document. Two arrows, the idiom every chat
   UI now uses, except that here a reader may want either end.
   Deliberately quiet: they sit on the desk, not on the paper, and carry no accent colour —
   navigation furniture should not compete with the study's own emerald marks. */
.rs-jump {
    position: fixed; right: 22px; z-index: 45;
    bottom: calc(22px + var(--rs-jump-lift, 0px));
    display: flex; flex-direction: column; gap: 8px;
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.rs-jump.on { opacity: 1; visibility: visible; }
.rs-jump button {
    -webkit-appearance: none; appearance: none;
    width: 38px; height: 38px; padding: 0;
    display: grid; place-items: center; cursor: pointer;
    border: 1px solid var(--rs-line); border-radius: 50%;
    background: #1b1e21; color: var(--text-secondary);
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
    box-shadow: 0 6px 18px -8px rgba(0,0,0,.8);
}
.rs-jump button:hover { background: #23262a; color: var(--text-primary); border-color: #45423a; }
.rs-jump button:active { transform: scale(.94); }
.rs-jump button:focus-visible { outline: 2px solid #3fae7f; outline-offset: 2px; }
/* An arrow that cannot go anywhere is removed, not greyed: at the top of a document there
   is no "up", and a dead control is worse than an absent one. */
.rs-jump button[hidden] { display: none; }
.rs-jump svg { width: 17px; height: 17px; }
@media (max-width: 640px) {
    /* Thumb-reachable and comfortably tappable on a phone, which is the case that prompted
       this in the first place. */
    .rs-jump { right: 14px; bottom: calc(14px + var(--rs-jump-lift, 0px)); gap: 10px; }
    .rs-jump button { width: 44px; height: 44px; }
    .rs-jump svg { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .rs-jump, .rs-jump button { transition: none; }
}
@media print { .rs-jump { display: none !important; } }

/* ANCHOR LANDINGS must clear the sticky masthead, or a rail link scrolls the heading
   underneath the bar and the reader thinks it is broken. --rj-offset is measured by the
   shell script; the fallback covers a no-JS visitor following a #anchor from a shared URL,
   which is now possible at all because the ids are server-rendered. */
.research-paper h2, .research-paper h3 { scroll-margin-top: var(--rj-offset, 96px); }

/* ---- Continue ----------------------------------------------------------- */
/* Twenty printed pages used to end at a single signup button. Real links to real
   reading come first. Rendered server-side so it is crawlable.
   The heading was a word between two flanking rules — exactly the generated-page
   ornament the voice rules forbid — so it is now a plain label. */
.research-next { margin: 44px 0 0; }
.rn-rule {
    font-size: 0.64rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-tertiary); margin-bottom: 14px;
}
.rn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.rn-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 15px 16px; border-radius: 10px;
    border: 1px solid var(--rs-line);
    background: rgba(255,255,255,.015);
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.rn-card:hover { border-color: rgba(63,174,127,.4); background: rgba(63,174,127,.05);
                 transform: translateY(-1px); }
.rn-kind { font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: #3fae7f; }
.rn-title { font-size: .92rem; line-height: 1.35; color: var(--text-primary); }
.rn-sum { font-size: .78rem; line-height: 1.5; color: var(--text-tertiary); }
.rn-all { margin: 16px 0 0; display: flex; gap: 10px; font-size: .78rem; color: var(--text-tertiary); }
.rn-all a { color: var(--text-secondary); text-decoration: none; }
.rn-all a:hover { color: #3fae7f; }

/* ---- End card ----------------------------------------------------------- */
.research-endcard {
    margin: 34px 0 0; padding: 26px 30px;
    background: #191b1c; border: 1px solid var(--rs-line); border-radius: 3px;
}
.research-endcard h2 {
    font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    font-size: 1.12rem; margin: 0 0 8px; color: var(--text-primary); font-weight: 550;
}
.research-endcard p { margin: 0 0 16px; font-size: 0.92rem; line-height: 1.65; color: var(--text-tertiary); }
.research-endcard .re-actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.research-endcard a.re-primary {
    padding: 10px 20px; border-radius: 7px; background: #3fae7f; color: #08130e;
    font-weight: 600; text-decoration: none; font-size: 0.9rem; transition: transform .15s;
}
.research-endcard a.re-primary:hover { transform: translateY(-1px); }
.research-endcard a.re-quiet { color: var(--text-secondary); text-decoration: none; font-size: 0.86rem; }
.research-endcard a.re-quiet:hover { color: #3fae7f; }
.research-endcard .re-note { font-size: 0.8rem; color: var(--text-tertiary); margin: 14px 0 0; }

/* ---- Narrower than the reading pair ------------------------------------- */
/* Below the width that fits sheet + rail, the rail stops being a margin object and
   becomes a collapsed outline ABOVE the paper. `order: -1` does that without
   moving it in the DOM, so the paper keeps source priority for crawlers. */
@media (max-width: 1180px) {
    .rs-cols { grid-template-columns: minmax(0, 1fr); }
    /* .rs-head is flex and already wraps; it just stops trying to sit on one line. */
    .rs-head { align-items: flex-start; gap: 16px 24px; }
    .rs-aids { order: 3; }
    .rs-lab-cta { justify-self: start; }
    .rs-rail {
        order: -1; position: static; max-height: none; overflow: visible;
        margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--rs-line);
    }
    /* `columns` would slice the ordinal grid across the gap, so the outline goes to two
       real grid tracks instead. */
    .rs-toc { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
    .rs-toc li:not(:has(a.rs-apx)) + li:has(a.rs-apx) { margin-top: 0; padding-top: 0; border-top: 0; }
    .rs-result { max-width: 420px; }
}
@media (max-width: 640px) {
    .research-container { padding: 20px 14px 60px; }
    /* Stack the aids and let the player use the width it has. */
    .rs-aids { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
    .rs-audio audio { width: 100%; }
    .rs-pdf { justify-content: center; }
    .rs-lab-cta { justify-self: stretch; text-align: center; }
    .rs-toc { grid-template-columns: 1fr; }
    .rs-head { margin-bottom: 18px; padding-bottom: 16px; }
    .research-orient { font-size: 0.98rem; }
    .research-endcard { padding: 20px 18px; }
    .rs-fig { font-size: 2.1rem; }
}

/* ---- Phone: the shell steps out of the way ------------------------------ */
/* SIX BLOCKS AND TWO SCREENS BEFORE THE FIRST WORD OF THE STUDY.
   All of this furniture is written for the desk, and below the reading pair's width it
   does not fold away, it STACKS. `.rs-cols` goes single-column from 1180px (:413) and the
   rail moves ABOVE the paper (:419) — right at 1000px, where the rail is a 288px outline
   beside a title that is still on screen, and wrong at 390px, where nothing is beside
   anything. Measured on a 390x844 phone: 20px of container padding, ~41px of breadcrumb,
   ~224px of head (the orientation line, "Open the Lab" and "Download PDF" each wrapping
   onto a row of its own) and ~870px of rail — the result plate plus a fourteen-row outline
   that :435 has just dropped back to ONE column, doubling its height exactly where the
   viewport is shortest. About 1210px, under a ~119px masthead, before the paper's own top
   edge: the study's title lands 1.7 viewport-heights down.
   Founder: "I am not saying that these items are bad, but they belong to landscape view
   and not to the mobile view."
   The sheet learned this one layer down already — the disclaimer was moved out from
   between the eyebrow and the title for putting the h1 495px down the page. Same fix,
   applied to the shell above it. */

/* THREE SELECTORS FOR SIX BLOCKS, AND THEY ARE THE CONTAINERS.
   Hiding the head's three children one at a time would leave its padding-bottom and
   border-bottom (:104, :436) painting as a hairline with nothing above it, and the rail's
   own bottom rule (:420) the same. Hide the containers and their rules go with them.
   These are exactly the first three selectors of the print list below, which is not a
   coincidence: a printed paper and a phone want the same thing from this page. */

/* DISPLAY:NONE, NOTHING SOFTER. `visibility: hidden` or `opacity: 0` keeps all 1210 of
   those pixels in the flow as blank desk, which is a worse page than the furniture was;
   `height: 0` leaves the margins (:103, :420) collapsing into the flow and both hairlines
   still drawn. It also takes the PDF button out of the tab order, which is correct — a
   control a reader cannot see should not be one they can land on. The markup stays in the
   served HTML, so a crawler still reads the outline and the result, and the outline script
   (research_public.html:337) still finds #researchToc and fills it: getElementById and
   appendChild behave identically inside a display:none subtree, and nothing in that script
   reads a geometry property off anything hidden here (it measures .pub-nav, which is not).
   That script must NOT be taught to skip this width — it runs once, and the rail comes
   back on rotate. */

/* SCREEN ONLY. Chrome evaluates print media queries against the page content box, which on
   A4 at default margins is under 768px, so a bare max-width block would match on paper as
   well. Everything here is already in the print list below with `!important`, so nothing
   would change today — `screen` is what keeps that true after the next edit to this block. */

/* 768, NOT 640. The 641-768 band has the identical defect and no compensating upside: the
   rail is already stacked above the paper from 1180px down, so a tablet in portrait —
   exactly 768 CSS px, and max-width includes it — shows the founder's complaint in full.
   768 is this site's phone line everywhere else (public-shell.css:264; and :65's zoom band
   is its exact complement, so no third regime is created), and articles-index.css:196
   already hides .articles-jumpnav, the same class of navigation-aid strip as .rs-toc, at
   precisely this width. No `orientation: portrait`: phone landscape widths (844/852/932)
   are already past 768, so the bare query gives the founder's ask on its own, and the
   qualifier would put the preamble back on a 667x375 landscape SE, where a 375px-tall
   viewport makes it strictly worse. */

/* WHAT IS LOST, AND WHERE IT WENT. The breadcrumb's two links are / and /research and BOTH
   sit in the sticky masthead (public_base.html:61, :80), which does not scroll away — so on
   a phone the breadcrumb was a second copy of the orientation, printed above the title and
   gone 40px later; a BreadcrumbList now rides in the page head for crawlers that render
   mobile-first. Every section keeps its server-rendered id, so a shared #anchor still
   lands, and .rs-jump gives both ends of the document at 44px (:342). The result plate's
   figures are the paper's own section 2 — the plate exists to put 410px of dead desk margin
   to work (:155), and at 390px there is no margin to put to work. */
@media screen and (max-width: 768px) {
    .research-breadcrumb,
    .rs-head,
    .rs-rail { display: none; }
}

/* ---- Print -------------------------------------------------------------- */
/* The paper is the artifact; the site's furniture is not part of it. */
@media print {
    .research-layout { background: none; }
    .research-container { max-width: none; padding: 0; }
    .rs-cols { display: block; }
    .rs-rail, .rs-head, .research-breadcrumb,
    .research-next, .research-endcard { display: none !important; }
}