/* S18, the Locomotive bar (-73, 24 Oct 2026; Olya ~08:01Z: «надо про сайт не хуже локомотива форматы и тд»; the
   coordinator's brief from Locomotive's Scout Motors case, creative-reference-scout studio-dna.md: body 26/31.2, small
   15/19.5, display 110/121). A trial on the home, /about and the Oisy case, loaded after css/type-2026.css; ?s18=0 shows
   the page without it (the link is switched off by the line after it). Three moves:
   - the lead paragraphs at 26 px (20 on a phone), leading 1.2, in ink, never the second tone;
   - no text under 14 px but the legal line: the small role and the captions step up to 14;
   - the chapter titles that have the room (Recognition, the table's title, «Selected work.», «And the rest.») at 120 px
     (44 on a phone), between the stair's L (96) and XL (144) */
body:is([data-page=home],[data-page=about]),body.oisy-page{
 --s18-lead:clamp(20px,calc(.571vw + 17.77px),26px);
 --s18-title:clamp(44px,calc(7.238vw + 15.77px),120px);
 --t-lead:var(--s18-lead);
 --t-small:14px}

/* ---- the leads ---- */
html body[data-page=about] :is(.ab-recog-head>p,.company-intro p,.ab-years-head p,section>.section-heading>p,.agency-heading>p,.ab-funded-copy>p:first-of-type,p.ab-build-coda):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e),
html body[data-page=home] :is(.section-heading>p,p.about-support):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e),
html body.oisy-page :is(.oisy-intro-text):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e),
/* (hold15) the leads that js/motion/text-reveal.js splits into masked lines: the lines carry the size (type-2026.css set the
   home's «Strategy, interaction…» lines to the small role, so the lead measured 26 and read 14) */
html body[data-page=about] :is(.ab-recog-head>p,.company-intro p,.ab-years-head p,section>.section-heading>p,.agency-heading>p,.ab-funded-copy>p:first-of-type,p.ab-build-coda) .rv-line:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e),
html body[data-page=home] :is(.section-heading>p,p.about-support) .rv-line:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e),
html body.oisy-page .oisy-intro-text .rv-line:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e){
 font-family:var(--t-text)!important;font-size:var(--s18-lead)!important;line-height:1.2!important;letter-spacing:-.005em!important;color:var(--ink)!important;max-width:none}
/* Recognition: the title takes the width at 120 px; its lead hangs under it from column line 7 */
@media (min-width:1101px){
 html body[data-page=about] .ab-recog-head>h2:not(#_a):not(#_b):not(#_c):not(#_d){grid-column:1/-1;grid-row:1}
 html body[data-page=about] .ab-recog-head>p:not(#_a):not(#_b):not(#_c):not(#_d){grid-column:7/span 6;grid-row:2;margin:clamp(24px,2.4vw,40px) 0 0!important}}

/* ---- the titles with room ---- */
html body[data-page=about] :is(#recognition-title,.ab-shared>h3):not(#_a):not(#_b):not(#_c):not(#_d),
html body[data-page=home] :is(#work-title,#years .year-outro .years-title):not(#_a):not(#_b):not(#_c):not(#_d){
 font-size:var(--s18-title)!important;line-height:1!important;letter-spacing:var(--t-track)!important}

/* ---- nothing under 14 px (the small classes measured below 14; tools/typeaudit.cjs lists any left). Only where a class
   measured under 14 at that width: a floor, never a step down (hold15: the case's roles at 17 and the index's caption at 16
   on a phone had been set to 14) ---- */
html body[data-page=about] :is(.rr-head,.rr-head span,.rr-year,.company-evidence p,.company-evidence .rv-line,.ab-ribbon .abw-list>li,.ab-ribbon .abw-count,.cr-shot-name):not(#_a):not(#_b):not(#_c){font-size:14px!important}
html body[data-page=home] :is(.experience-card>figcaption,.ri-link>.ri-name,.ri-link>.ri-year):not(#_a):not(#_b):not(#_c):not(#_d){font-size:14px!important}
@media (min-width:701px){html body[data-page=home] .ri-what:not(#_a):not(#_b):not(#_c){font-size:14px!important}}
@media (max-width:700px){html body[data-page=home] .experience-footnote:not(#_a):not(#_b):not(#_c){font-size:14px!important}}

/* ---- the case in its window (S18 «case formats»; Locomotive's Scout Motors: the product screen in a centred browser over
   a full-bleed photograph). The product stands in a plain frame (the image radius and a hairline, no device, no shadow) at
   its own ratio, centred, a screen tall at most, on the zone's clear ground. (-73, hold16-17) the station's world round the
   frame printed nothing by day and a dotted streak by night (space-world.js ?cw=1 brings it back), and the sticky stage
   that held the frame while the world moved on left a dead stretch of scroll, on a phone an empty screen: the window
   stands in the flow. With ?s18=0 the figure is the old stage again ---- */
html body.portfolio-case .case-window:not(#_a):not(#_b){position:relative;width:100vw;max-width:none;
 margin:clamp(32px,4vw,64px) calc(50% - 50vw) 0;--cw-pad:clamp(32px,5svh,64px)}
html body.portfolio-case .case-window-stage:not(#_a){display:grid;place-items:center;
 padding:var(--cw-pad) var(--gutter,4vw);box-sizing:border-box}
html body.portfolio-case .case-window-frame:not(#_a):not(#_b):not(#_c){width:min(100%,calc((100svh - 2 * var(--cw-pad) - 34px) * var(--ratio,1.6)));
 max-width:none;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important}
html body.portfolio-case .case-window-frame:not(#_a):not(#_b) img{display:block;width:100%!important;height:auto!important;max-height:none!important;
 border-radius:var(--r-image,10px)!important;outline:1px solid var(--line,rgba(0,0,0,.14));outline-offset:-1px;box-shadow:none!important}
html body.portfolio-case .case-window-frame:not(#_a):not(#_b) figcaption{margin:12px 0 0!important;font-family:var(--t-text)!important;
 font-size:14px!important;line-height:20px!important;color:var(--ink)!important;text-align:left}
@media (max-width:700px){
 html body.portfolio-case .case-window:not(#_a):not(#_b){margin-top:24px;--cw-pad:16px}}