/* /about, the long version of the story (21 Oct 2026, wave 1; work/_claude-qa: film/FILM.md §2a and §3, HANDOFF §7). The owner: «а чего он
   вырезал, пусть будет подробный эбаут; лучше не вырезать, а переделывать, если ход анимации или текст повторяется; надо
   полноценный насыщенный сайт». Every chapter keeps its facts and links and gets a device of its own; the title of each
   stands in the display face on quiet ground. Loaded last on /about only. Grid: 12 columns in 4vw margins, 2vw gutters
   (css/grid-2026.css). Type roles: css/type-2026.css. Curves: `clear` and power3.inOut (css/motion.css). */

/* ---- The ribbon: the same five words, a move of their own (the owner's card, 21 Oct: «Слова те же, новый ход»; the
   route score, work/_claude-qa/film-20261021/ROUTE.md). The home's band drifts sideways forever; here the line settles: held in
   the middle of the screen for .8 of a screen, the words drop one under another into a column hung from the grid's left
   axis (FILM.md §2a: down is depth), «Clarity» last and deepest (js/company-stories.js ribbon()). Phones, reduced
   motion and no script: the column. The band stands in the page's own margins (no padding of its own at the sides) ---- */
html body[data-page=about] .ab-ribbon:not(#_a):not(#_b){--rib-ink:#000000;position:relative;margin:0;padding:clamp(40px,7vw,112px) 0;border:0;background:none;overflow:clip;text-align:left}
html[data-theme=dark] body[data-page=about] .ab-ribbon:not(#_a):not(#_b){--rib-ink:#ffffff}
html body[data-page=about] .ab-ribbon .type-band-word:not(#_a):not(#_b):not(#_c){display:block;font-family:var(--t-display)!important;font-weight:400!important;font-variation-settings:normal!important;font-synthesis:none;
 font-size:var(--t-l)!important;line-height:1.02!important;letter-spacing:var(--t-track-l)!important;color:var(--rib-ink)!important;-webkit-text-fill-color:var(--rib-ink)!important;padding:0!important;white-space:nowrap}
html body[data-page=about] .ab-ribbon.is-live:not(#_a):not(#_b){--rib-size:calc(var(--t-l) * var(--rib-fit,1));height:calc(var(--rib-size) * 5.1 + 50svh);padding:0}   /* -73: 50svh of hold (was 80) */
html body[data-page=about] .ab-ribbon.is-live .ab-rib-stage{position:sticky;top:calc(50svh - var(--rib-size) * 2.55);height:calc(var(--rib-size) * 5.1)}
html body[data-page=about] .ab-ribbon.is-live .ab-rib-face{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform}
html body[data-page=about] .ab-ribbon.is-live .ab-rib-face>.type-band-word:not(#_a):not(#_b):not(#_c){font-size:var(--rib-size)!important}

/* ---- Year by year: a ledger, not the home's fan (HANDOFF §7). Each year's work is one line of names at M, set as the
   year said it: the linked ones with their cover beside the name, the ones without a case plain; the year hangs in
   columns 1-3, the names run across 4-12. A row prints in the Bayer order as it comes up (js/company-stories.js
   years()), year first, then the names in reading order, once ---- */
/* (the id stays for its links; css/space-ui.css pulls a `main > #years` up by 45svh under the world for the home's
   pinned fan, so the ledger's margin outranks it) */
html body[data-page=about] .ab-years:not(#_a):not(#_b){position:relative;margin:0;padding:clamp(112px,15vw,216px) 0 clamp(72px,9vw,144px)}
html body[data-page=about] .ab-years-head:not(#_a){margin:0 0 clamp(56px,7vw,112px)}
html body[data-page=about] .ab-years-head>h2:not(#_a):not(#_b):not(#_c){margin:0!important;max-width:none;font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-synthesis:none;
 font-size:var(--t-l)!important;line-height:.95!important;letter-spacing:var(--t-track-l)!important;color:var(--ink);text-wrap:balance}
html body[data-page=about] .ab-years-head>p:not(#_a):not(#_b):not(#_c){margin:24px 0 0!important;max-width:24em;font-family:var(--t-text)!important;font-size:var(--t-lead)!important;line-height:1.3!important;letter-spacing:0!important;color:var(--muted)}
html body[data-page=about] .ab-years-list:not(#_a){display:grid;row-gap:clamp(28px,3.4vw,52px);margin:0;padding:0;list-style:none}
html body[data-page=about] .ab-year:not(#_a){margin:0;padding:0}
html body[data-page=about] .ab-year>h3:not(#_a):not(#_b):not(#_c),
html body[data-page=about] .ab-year-names:not(#_a):not(#_b):not(#_c){margin:0!important;max-width:none;font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-synthesis:none;
 font-size:var(--t-m)!important;line-height:1.1!important;letter-spacing:var(--t-track-m)!important;color:var(--ink)}
html body[data-page=about] .ab-year>h3:not(#_a):not(#_b):not(#_c){font-variant-numeric:lining-nums}
html body[data-page=about] .ab-year-names .ab-item:not(#_a){display:inline-block;white-space:nowrap}
html body[data-page=about] .ab-year-names .ab-yn:not(#_a){color:var(--ink);text-decoration:none}
/* a name without a case stands in ink too (the cool grey failed over the world: qa/about frame a-light-1440-02); the
   cover beside a name is what says it opens a case */
html body[data-page=about] .ab-year-names span.ab-yn:not(#_a){color:var(--ink)}
html body[data-page=about] .ab-year-names a.ab-yn:not(#_a):is(:hover,:focus-visible){text-decoration:underline;text-decoration-thickness:.04em;text-underline-offset:.12em}
html body[data-page=about] .ab-chip:not(#_a){display:inline-block;width:.74em;height:.74em;margin:0 .16em 0 0;vertical-align:-.02em;border-radius:.09em;overflow:hidden;background:var(--cool-chip,#eceff5)}
html body[data-page=about] .ab-chip>img:not(#_a){display:block;width:100%;height:100%;object-fit:cover}
html body[data-page=about] .ab-years-more:not(#_a){display:inline-flex;align-items:baseline;gap:.2em;color:var(--ink);text-decoration:none}
html body[data-page=about] .ab-years-more .ui-arrow:not(#_a){width:.6em;height:.6em;stroke:currentColor;stroke-width:1.5;fill:none;align-self:center}
html body[data-page=about] .ab-years-more:not(#_a):is(:hover,:focus-visible){text-decoration:underline;text-decoration-thickness:.04em;text-underline-offset:.12em}
@media (min-width:1101px){
 html body[data-page=about] .ab-years-head:not(#_a),html body[data-page=about] .ab-year:not(#_a){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw}
 html body[data-page=about] .ab-years-head:not(#_a){align-items:last baseline}
 html body[data-page=about] .ab-years-head>h2:not(#_a):not(#_b):not(#_c){grid-column:1/span 7}
 html body[data-page=about] .ab-years-head>p:not(#_a):not(#_b):not(#_c){grid-column:9/span 4;margin:0!important}
 html body[data-page=about] .ab-year:not(#_a){align-items:first baseline}
 html body[data-page=about] .ab-year>h3:not(#_a):not(#_b):not(#_c){grid-column:1/span 3}
 html body[data-page=about] .ab-year-names:not(#_a):not(#_b):not(#_c){grid-column:4/span 9}
 html body[data-page=about] .ab-year-rest>h3:not(#_a):not(#_b):not(#_c){grid-column:1/span 7}
 html body[data-page=about] .ab-year-rest>.ab-year-names:not(#_a):not(#_b):not(#_c){grid-column:9/span 4;font-family:var(--t-text)!important;font-size:var(--t-lead)!important;line-height:1.3!important;letter-spacing:0!important}
}
@media (max-width:1100px){
 html body[data-page=about] .ab-year>h3:not(#_a):not(#_b):not(#_c){margin:0 0 8px!important}
 html body[data-page=about] .ab-year-rest>.ab-year-names:not(#_a):not(#_b):not(#_c){margin-top:16px!important;font-family:var(--t-text)!important;font-size:var(--t-lead)!important;line-height:1.3!important;letter-spacing:0!important}
}
/* the print: until its row arrives, a year waits unprinted (armed by the script only, so nothing hides without it;
   transparent, not hidden, so assistive tech and find-in-page still read it) */
html body[data-page=about] .ab-years[data-armed] .ab-year:not([data-in]) :is(h3,.ab-item):not(#_a){opacity:0}

/* ---- Title cards: the recognition chapter opens as the years do, its title over seven columns, its line hanging on
   column 9 and ending on the title's last baseline (css/grid-2026.css E12) ---- */
html body[data-page=about] .ab-recog-head:not(#_a){margin:0}
html body[data-page=about] .ab-recog-head>h2:not(#_a):not(#_b):not(#_c){margin:0!important;max-width:none;font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-synthesis:none;
 font-size:var(--t-l)!important;line-height:.95!important;letter-spacing:var(--t-track-l)!important;color:var(--ink);text-wrap:balance}
html body[data-page=about] .ab-recog-head>p:not(#_a):not(#_b):not(#_c){margin:24px 0 0!important;max-width:24em;font-family:var(--t-text)!important;font-size:var(--t-lead)!important;line-height:1.3!important;letter-spacing:0!important;color:var(--muted)}
@media (min-width:1101px){
 html body[data-page=about] .ab-recog-head:not(#_a){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw;align-items:last baseline}
 html body[data-page=about] .ab-recog-head>h2:not(#_a):not(#_b):not(#_c){grid-column:1/span 7}
 html body[data-page=about] .ab-recog-head>p:not(#_a):not(#_b):not(#_c){grid-column:9/span 4;margin:0!important}
}

/* ---- Work experience, awards, events: the three labels are the chapter's title row (they stood as three small chips
   alone mid-screen), set in the display face, the open one in ink and the others in the cool grey; the panels share one
   place, the tallest one's, so a switch never moves the page below it (HANDOFF §7: the lone buttons, the cut logo wall;
   each award once: the Behance features, the PrivatBank award and the grant moved into the recognition story) ---- */
html body[data-page=about] #about .bio-tabs:not(#_a):not(#_b){display:flex!important;flex-wrap:wrap;align-items:baseline;justify-content:flex-start!important;gap:0 .42em!important;width:auto!important;max-width:none!important;
 margin:0!important;padding:clamp(112px,15vw,216px) 0 clamp(48px,6vw,88px)!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;font-size:var(--t-m)}
html body[data-page=about] #about .bio-tabs:not(#_a):not(#_b)::before,html body[data-page=about] #about .bio-tabs:not(#_a):not(#_b)::after{content:none!important;display:none!important}
html body[data-page=about] #about .bio-tabs:not(#_a):not(#_b)>button{min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
 font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-synthesis:none;font-size:var(--t-m)!important;line-height:1.1!important;letter-spacing:var(--t-track-m)!important;text-transform:none!important;
 color:var(--muted)!important;cursor:pointer;transition:color .25s cubic-bezier(.16,1,.3,1)}
html body[data-page=about] #about .bio-tabs:not(#_a):not(#_b)>button:is(:hover,[aria-pressed=true]){color:var(--ink)!important}
html body[data-page=about] #about .bio-tabs:not(#_a):not(#_b)>button::after{content:none!important;display:none!important}
html body[data-page=about] #about .bio-tabs:not(#_a):not(#_b)>button:focus-visible{outline:2px solid var(--ink)!important;outline-offset:6px!important;border-radius:4px!important}
html body[data-page=about] #about>.bio-panels:not(#_a):not(#_b){display:grid!important;grid-template-columns:minmax(0,1fr);margin:0!important;padding:0 0 clamp(96px,12vw,176px)!important;min-height:0!important;overflow:visible!important}
html body[data-page=about] #about>.bio-panels>.bio-panel:not(#_a):not(#_b){grid-area:1/1;min-width:0;min-height:0!important;margin:0!important;padding:0!important}
html body[data-page=about] #about>.bio-panels>.bio-panel[hidden]:not(#_a):not(#_b){display:block!important;visibility:hidden;pointer-events:none}

/* Work experience: the line on columns 1-4, the nine marks still on a 3 x 3 grid from column 5, each cropped to its own
   drawing and set to one optical area in the page's ink (js/company-stories.js logos(); critique.md: «eight logos at
   mismatched weights… One ink, one optical size»). The marquee that cut them is gone */
html body[data-page=about] .about-tab-01:not(#_a):not(#_b){display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw;row-gap:40px;align-items:start;margin:0!important;padding:0!important}
html body[data-page=about] .about-tab-01>.custom-about-wex:not(#_a):not(#_b):not(#_c){grid-column:1/span 4;grid-row:1;margin:0!important;max-width:none!important;font-family:var(--t-text)!important;font-size:var(--t-lead)!important;line-height:1.3!important;letter-spacing:0!important;color:var(--ink)!important}
html body[data-page=about] .ab-logos:not(#_a){--logo-u:clamp(56px,5.4vw,84px);grid-column:5/span 8;grid-row:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,3.6vw,56px) 2vw;margin:0;padding:0}
html body[data-page=about] .ab-logos>.about-logo-block:not(#_a):not(#_b){display:flex!important;align-items:center;justify-content:flex-start;width:auto!important;height:var(--logo-u)!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;
 background:none!important;color:var(--ink)!important;opacity:1!important;transform:none!important;text-decoration:none;box-shadow:none!important}
html body[data-page=about] .ab-logos .about-inner:not(#_a){display:flex;align-items:center;width:100%;height:100%;min-width:0}
html body[data-page=about] .ab-logos svg:not(#_a){display:block;flex:none;width:auto!important;height:calc(var(--logo-u) * var(--k,.6))!important;max-width:100%;max-height:100%;color:inherit;overflow:visible}
html body[data-page=about] .ab-logos .hide-mobile:not(#_a):not(#_b){display:flex!important}
html body[data-page=about] .ab-logos a.about-logo-block:not(#_a):focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:4px}
@media (max-width:1100px){
 html body[data-page=about] .about-tab-01>.custom-about-wex:not(#_a):not(#_b):not(#_c){grid-column:1/-1;max-width:24em!important}
 html body[data-page=about] .ab-logos:not(#_a){grid-column:1/-1;grid-row:2}
}
@media (max-width:700px){html body[data-page=about] .ab-logos:not(#_a){--logo-u:48px;gap:24px 16px}}

/* Awards and events: the ledgers by year (js/chapters3.js) on the same lines, the year over columns 1-4, the items from 5 */
html body[data-page=about] .bio-panel .is-ledger:not(#_a):not(#_b){padding:0!important;margin:0!important}
@media (min-width:701px){
 html body[data-page=about] .bio-panel .is-ledger .lg-group:not(#_a):not(#_b){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw;row-gap:0;padding:0 0 clamp(40px,5vw,72px)}
 html body[data-page=about] .bio-panel .is-ledger .lg-year:not(#_a):not(#_b):not(#_c){grid-column:1/span 4}
 html body[data-page=about] .bio-panel .is-ledger .lg-items:not(#_a):not(#_b){grid-column:5/span 8;padding-top:0}
}
html body[data-page=about] .bio-panel .is-ledger .lg-group:last-child:not(#_a):not(#_b){padding-bottom:0}

/* ---- I work directly: the statement builds down the frame (HANDOFF §7: it was the home's words in the home's
   scroll-fill, the whole paragraph waiting in grey). The stage holds its frame while the camera turns round the cast on
   the seabed, and the scroll plays it: each phrase prints in the Bayer order on its own line, broken by meaning, and
   stays, so the sentence grows downward, the way the site goes deeper (FILM.md §2a: down is depth); the second sentence
   starts a step lower, the coda last, in the text face (js/company-stories.js build()). The words are the paragraph's
   own and assistive tech reads them whole (.sr-only); without the script, and under reduced motion, the statement
   stands whole in its place ---- */
html body[data-page=about] #about>.about-stage:not(#_s):not(#_a){height:280vh!important;margin:0!important;padding:0!important}
html body[data-page=about] #about>.about-stage>.sr-only:not(#_a){left:auto;right:0;top:0}
html body[data-page=about] #about>.about-stage>.about-intro.ab-build:not(#_s):not(#_t):not(#_a){position:sticky!important;top:0!important;left:auto!important;right:auto!important;bottom:auto!important;
 display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:2vw!important;row-gap:0!important;align-content:start!important;align-items:start!important;
 height:100vh;height:100svh;width:auto!important;max-width:none!important;margin:0!important;padding:clamp(120px,22svh,220px) 0 0!important;transform:none!important;pointer-events:none;box-sizing:border-box}
html body[data-page=about] #about>.about-stage>.ab-build>.ab-build-text:not(#_s):not(#_t):not(#_a){grid-column:7/span 6!important;grid-row:1!important;position:relative!important;margin:0!important;max-width:none!important;padding:0!important;
 font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-synthesis:none;font-size:min(var(--t-m),5.6svh)!important;line-height:1.1!important;letter-spacing:var(--t-track-m)!important;
 color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important}
html body[data-page=about] .ab-build .ab-ph:not(#_a){display:block;text-wrap:balance}
html body[data-page=about] .ab-build .ab-ph-turn:not(#_a){margin-top:.5em}
html body[data-page=about] #about>.about-stage>.ab-build>.ab-build-coda:not(#_s):not(#_t):not(#_a){grid-column:7/span 5!important;grid-row:2!important;position:relative!important;margin:clamp(24px,4svh,40px) 0 0!important;max-width:24em!important;padding:0!important;
 font-family:var(--t-text)!important;font-variation-settings:normal!important;font-weight:400!important;font-size:var(--t-lead)!important;line-height:1.3!important;letter-spacing:0!important;color:var(--muted)!important;-webkit-text-fill-color:var(--muted)!important}
html body[data-page=about] .ab-build[data-armed] :is(.ab-ph,.ab-build-coda):not(.is-in):not(#_a):not(#_b){display:none!important}
@media (orientation:portrait){
 /* -73 (23 Oct; the visual jury r2, about-390-0.6: «one sentence on an empty screen»): 180svh (was 260): the phrases print
    over the same share of the run, and the finished statement holds for well under a screen before the next chapter */
 html body[data-page=about] #about>.about-stage:not(#_s):not(#_a){height:180svh!important}
 /* (23 Oct, visual jury, phone: the statement stood at half height and the stage entered as an empty screen under the
    logo wall; it now starts at the upper third and its first line prints as it comes up, js/company-stories.js build()) */
 html body[data-page=about] #about>.about-stage>.about-intro.ab-build:not(#_s):not(#_t):not(#_a){padding-top:30svh!important}
 html body[data-page=about] #about>.about-stage>.ab-build>:is(.ab-build-text,.ab-build-coda):not(#_s):not(#_t):not(#_a){grid-column:1/-1!important}
 html body[data-page=about] #about>.about-stage>.ab-build>.ab-build-text:not(#_s):not(#_t):not(#_a){font-size:min(var(--t-m),3.4svh)!important}
 html body[data-page=about] #about>.about-stage>.ab-build>.ab-build-coda:not(#_s):not(#_t):not(#_a){margin-top:16px!important;font-size:var(--t-body)!important;line-height:1.45!important}
}
/* reduced motion: every pass is a plain vertical layout (FILM.md §2a): the statement stands whole in the page's flow, no hold */
@media (prefers-reduced-motion:reduce){
 html body[data-page=about] #about>.about-stage:not(#_s):not(#_a){height:auto!important}
 html body[data-page=about] #about>.about-stage>.about-intro.ab-build:not(#_s):not(#_t):not(#_a){position:relative!important;height:auto;padding:clamp(112px,15vw,216px) 0 clamp(96px,12vw,176px)!important}
}

/* ---- Recognition through the work: one story. The rows stood twice (in the Awards tab and after the Fourmeta rail):
   now once, under «Recognition, shared.»; then the funded product, the grant and Pass in one block, the product's own
   screens standing still (the home's Pass is a marquee): the passwords screen large beside the story, the six others in
   one row at one height, in their own order ---- */
html body[data-page=about] .ab-recog:not(#_a){position:relative;margin:0;padding:clamp(112px,15vw,216px) var(--gutter,4vw) clamp(96px,12vw,176px)}
html body[data-page=about] .ab-shared:not(#_a){margin:clamp(72px,9vw,144px) 0 0}
html body[data-page=about] .ab-shared>h3:not(#_a):not(#_b):not(#_c),html body[data-page=about] .ab-funded-head>h3:not(#_a):not(#_b):not(#_c){margin:0!important;max-width:none;font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-synthesis:none;
 font-size:var(--t-m)!important;line-height:1.02!important;letter-spacing:var(--t-track-m)!important;color:var(--ink);text-wrap:balance}
html body[data-page=about] .ab-shared>.recognition-index:not(#_a):not(#_b){margin:clamp(24px,3vw,40px) 0 0!important}
html body[data-page=about] .ab-shared .rr-name:not(#_a):not(#_b):not(#_c){font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-synthesis:none;font-size:var(--t-m)!important;line-height:1.1!important;letter-spacing:var(--t-track-m)!important}
html body[data-page=about] .ab-funded:not(#_a){margin:clamp(96px,12vw,192px) 0 0}
html body[data-page=about] .ab-grant:not(#_a):not(#_b){display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:16px 0 0!important}
html body[data-page=about] .ab-grant>strong:not(#_a):not(#_b){font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-synthesis:none;font-size:var(--t-m)!important;line-height:1.02!important;letter-spacing:var(--t-track-m)!important;font-variant-numeric:lining-nums;color:var(--ink)}
html body[data-page=about] .ab-grant>span:not(#_a):not(#_b){font-family:var(--t-text)!important;font-size:var(--t-small)!important;line-height:1.4!important;letter-spacing:0!important;color:var(--muted)}
html body[data-page=about] .ab-funded-copy>h4:not(#_a):not(#_b):not(#_c){margin:0 0 16px!important;font-family:var(--t-text)!important;font-variation-settings:normal!important;font-weight:400!important;font-size:var(--t-lead)!important;line-height:1.3!important;letter-spacing:0!important;color:var(--ink)}
html body[data-page=about] .ab-funded-copy>p:not(#_a):not(#_b):not(#_c){margin:0 0 16px!important;max-width:28em;font-family:var(--t-text)!important;font-size:var(--t-body)!important;line-height:1.5!important;letter-spacing:0!important;color:var(--muted)}
html body[data-page=about] .ab-funded-copy>.text-button:not(#_a){margin-top:16px}
html body[data-page=about] :is(.ab-pass-lead,.ab-pass-strip):not(#_a){display:block;color:inherit;text-decoration:none}
html body[data-page=about] .ab-pass-lead:not(#_a){margin-top:32px;aspect-ratio:1512/902;border-radius:clamp(12px,1.2vw,18px);overflow:hidden;background:#0f1115}
html body[data-page=about] .ab-pass-lead>img:not(#_a){display:block;width:100%;height:100%;object-fit:cover}
html body[data-page=about] .ab-pass-strip:not(#_a){display:grid;grid-template-columns:repeat(3,minmax(0,1.676fr) minmax(0,.78fr));gap:clamp(12px,1.2vw,18px);margin-top:clamp(12px,1.2vw,18px)}
html body[data-page=about] .ab-pass-strip>img:not(#_a){display:block;width:100%;height:auto;aspect-ratio:1512/902;object-fit:cover;border-radius:clamp(8px,.9vw,14px);background:#0f1115}
html body[data-page=about] .ab-pass-strip>img.ab-pass-m:not(#_a){aspect-ratio:512/656}
html body[data-page=about] .ab-pass-lead:focus-visible:not(#_a){outline:2px solid var(--ink);outline-offset:6px}
@media (hover:hover) and (pointer:fine){html body[data-page=about] .ab-pass-lead>img:not(#_a){transition:transform .9s cubic-bezier(.16,1,.3,1)}html body[data-page=about] .ab-pass-lead:hover>img:not(#_a){transform:scale(1.015)}}
@media (min-width:1101px){
 html body[data-page=about] .ab-funded:not(#_a){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw;row-gap:0}
 html body[data-page=about] .ab-funded-head:not(#_a){grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw;align-items:last baseline;margin:0 0 clamp(40px,4vw,64px)}
 html body[data-page=about] .ab-funded-head>h3:not(#_a):not(#_b):not(#_c){grid-column:1/span 8}
 html body[data-page=about] .ab-grant:not(#_a):not(#_b){grid-column:9/span 4;margin:0!important}
 html body[data-page=about] .ab-funded-copy:not(#_a){grid-column:1/span 4;grid-row:2;align-self:end}
 html body[data-page=about] .ab-pass-lead:not(#_a){grid-column:5/span 8;grid-row:2;margin:0}
 html body[data-page=about] .ab-pass-strip:not(#_a){grid-column:1/-1;grid-row:3;margin-top:2vw}
}
@media (max-width:1100px){
 html body[data-page=about] .ab-funded-copy:not(#_a){margin-top:32px}
 html body[data-page=about] .ab-pass-strip:not(#_a){grid-template-columns:minmax(0,1.676fr) minmax(0,.78fr)}
}

/* ---- Made together. With Fourmeta: the seven covers hung at three scales on the grid's columns (7 + 5, 4 + 4 + 4,
   5 + 7), each with its name, what it was and the credit, in their own order. They stood one at a time on a pinned
   sideways rail, the same rail as Explore (chapters3.js says so; HANDOFF §7); a calm hang before the battle's video.
   Phones: the first, fourth and last across, the others in pairs ---- */
html body[data-page=about] .ab-fm:not(#_a){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw;row-gap:clamp(56px,7vw,112px);align-items:start;margin:0;padding:0}
html body[data-page=about] .ab-fm>a:not(#_a){display:block;min-width:0;color:var(--ink);text-decoration:none}
html body[data-page=about] .ab-fm>a:nth-child(1):not(#_a){grid-column:1/span 7}
html body[data-page=about] .ab-fm>a:nth-child(2):not(#_a){grid-column:8/span 5}
html body[data-page=about] .ab-fm>a:nth-child(3):not(#_a){grid-column:1/span 4}
html body[data-page=about] .ab-fm>a:nth-child(4):not(#_a){grid-column:5/span 4}
html body[data-page=about] .ab-fm>a:nth-child(5):not(#_a){grid-column:9/span 4}
html body[data-page=about] .ab-fm>a:nth-child(6):not(#_a){grid-column:1/span 5}
html body[data-page=about] .ab-fm>a:nth-child(7):not(#_a){grid-column:6/span 7}
html body[data-page=about] .ab-fm .work-image:not(#_a):not(#_b){position:relative;display:block;width:100%!important;height:auto!important;aspect-ratio:16/10!important;margin:0!important;border:0!important;border-radius:clamp(12px,1.2vw,18px)!important;overflow:hidden;background:var(--preview-bg,#e8ebf1)!important;transform:none!important;box-shadow:none!important}
html body[data-page=about] .ab-fm .work-image>img:not(#_a):not(#_b){display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;border-radius:0!important;transform:none!important}
@media (hover:hover) and (pointer:fine){html body[data-page=about] .ab-fm .work-image>img:not(#_a):not(#_b){transition:transform .9s cubic-bezier(.16,1,.3,1)!important}html body[data-page=about] .ab-fm>a:hover .work-image>img:not(#_a):not(#_b){transform:scale(1.02)!important}}
html body[data-page=about] .ab-fm>a>h3:not(#_a):not(#_b):not(#_c){display:flex;align-items:baseline;gap:.3em;margin:20px 0 0!important;font-family:var(--t-text)!important;font-variation-settings:normal!important;font-weight:400!important;font-size:var(--t-lead)!important;line-height:1.3!important;letter-spacing:0!important;color:var(--ink)}
html body[data-page=about] .ab-fm>a>h3 .ui-arrow:not(#_a){flex:none;width:.62em;height:.62em;stroke:currentColor;stroke-width:1.5;fill:none;align-self:center}
html body[data-page=about] .ab-fm>a>p:not(#_a):not(#_b):not(#_c){margin:4px 0 0!important;max-width:30em;font-family:var(--t-text)!important;font-size:var(--t-small)!important;line-height:1.4!important;letter-spacing:0!important;color:var(--ink)}
html body[data-page=about] .ab-fm>a>p.agency-credit:not(#_a):not(#_b):not(#_c){margin-top:2px!important;color:var(--muted)}
html body[data-page=about] .ab-fm>a:focus-visible:not(#_a){outline:2px solid var(--ink);outline-offset:6px;border-radius:clamp(12px,1.2vw,18px)}
@media (max-width:700px){
 html body[data-page=about] .ab-fm:not(#_a){grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:40px}
 html body[data-page=about] .ab-fm>a:not(#_a):not(#_b){grid-column:auto/span 1}
 html body[data-page=about] .ab-fm>a:is(:nth-child(1),:nth-child(4),:nth-child(7)):not(#_a):not(#_b){grid-column:1/-1}
 html body[data-page=about] .ab-fm>a>h3:not(#_a):not(#_b):not(#_c){margin-top:12px!important;font-size:var(--t-body)!important}
}

/* ---- Where the practice was shaped: the rail stands in the page and the visitor explores it (HANDOFF §7: keep the
   rail; FILM.md §2a: down is depth, right is breadth, one sideways move on /about and by the visitor's hand; the home's
   years own the pinned sideways track). js/chapters2.js initCareer(): the pointer, a click, Tab or the arrow keys open a
   place. Its title on quiet ground; a place without published work sets its line in the display face (it was a lead
   line in a mostly empty plate); the sizes follow the window's height, so nothing is cut, and each panel clips its own
   copy, so no line shows over a neighbour («Malachite»). Phones read the places as a list ---- */
/* the section stands full bleed (portfolio-v43: margin-inline -gutter) and takes the gutter back as its own inline
   padding (portfolio-v38); only the block padding goes, or the title, the plates and «Full CV» start at the frame's edge
   and are cut by it (frames a-light-1440-07..10, a-light-1440-rm-02) */
html body[data-page=about] .career-detail.is-rail:not(#_a):not(#_b){height:auto!important;padding:0 var(--gutter)!important}
html body[data-page=about] .career-detail.is-rail .cr-stage:not(#_a):not(#_b){position:relative!important;top:auto!important;height:auto!important;max-height:none!important;min-height:0!important;display:block!important;padding:0!important}
html body[data-page=about] .career-detail.is-rail .cr-stage>.section-heading:not(#_a):not(#_b){display:block!important;margin:0!important;padding:clamp(112px,15vw,216px) 0 clamp(40px,5vw,72px)!important}
html body[data-page=about] .career-detail.is-rail .cr-stage>.section-heading>h2:not(#_a):not(#_b):not(#_c){margin:0!important;max-width:none!important;font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-synthesis:none;
 font-size:var(--t-l)!important;line-height:.95!important;letter-spacing:var(--t-track-l)!important;color:var(--ink)!important;text-wrap:balance}
html body[data-page=about] .career-detail.is-rail .cr-stage>.section-heading>p:not(#_a):not(#_b):not(#_c){display:block!important;margin:24px 0 0!important;max-width:24em!important;font-family:var(--t-text)!important;font-size:var(--t-lead)!important;line-height:1.3!important;letter-spacing:0!important;color:var(--muted)!important}
@media (min-width:1101px){
 html body[data-page=about] .career-detail.is-rail .cr-stage>.section-heading:not(#_a):not(#_b){display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw;align-items:last baseline!important}
 html body[data-page=about] .career-detail.is-rail .cr-stage>.section-heading>h2:not(#_a):not(#_b):not(#_c){grid-column:1/span 7}
 html body[data-page=about] .career-detail.is-rail .cr-stage>.section-heading>p:not(#_a):not(#_b):not(#_c){grid-column:9/span 4;margin:0!important}
}
html body[data-page=about] .career-detail.is-rail:not(.is-static) .cr-stage>.career-list:not(#_a):not(#_b){flex:none!important;height:clamp(460px,64svh,660px)!important}
html body[data-page=about] .career-detail.is-rail .cr-stage>.career-links:not(#_a):not(#_b){margin:24px 0 0!important;padding:0 0 clamp(96px,12vw,176px)!important}
html body[data-page=about] .career-detail.is-rail:not(.is-static) .cr-panel:not(#_a):not(#_b){overflow:clip!important}
html body[data-page=about] .career-detail.is-rail .cr-body h3:not(#_a):not(#_b):not(#_c){font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-synthesis:none;font-size:clamp(32px,min(4vw,6.6svh),64px)!important;line-height:1!important;letter-spacing:var(--t-track-m)!important}
html body[data-page=about] .career-detail.is-rail:not(.is-static) .cr-panel.cr-text .cr-body:not(#_a):not(#_b){top:clamp(72px,11svh,100px)!important;bottom:clamp(20px,3.4svh,30px)!important}
html body[data-page=about] .career-detail.is-rail:not(.is-static) .cr-panel.cr-text .cr-body p:not(.career-role):not(#_s):not(#_t):not(#_p):not(#_e):not(#_a){font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-synthesis:none;
 font-size:clamp(28px,min(3.2vw,5.4svh),48px)!important;line-height:1.08!important;letter-spacing:var(--t-track-m)!important;max-width:15em!important;color:var(--ink)!important}
html body[data-page=about] .career-detail.is-rail:not(.is-static) .cr-panel:focus-visible:not(#_a){outline:2px solid var(--ink)!important;outline-offset:3px}

/* ---- the Fourmeta chapter opens on the same quiet ground as the others (its title card, then the hang) ---- */
html body[data-page=about] .agency-publications:not(#_s):not(#_a){padding-top:clamp(112px,15vw,216px)!important;padding-bottom:clamp(96px,12vw,176px)!important}
html body[data-page=about] .agency-publications .agency-heading:not(#_s):not(#_a){margin-bottom:clamp(64px,8vw,128px)!important}

/* ---- Design under pressure: the chapter's title in the display face at L, as every other chapter's (it stood in the
   text face, frame a-light-1440-24) ---- */
html body[data-page=about] .battle-section .section-heading>h2:not(#_a):not(#_b):not(#_c){font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-synthesis:none;
 font-size:var(--t-l)!important;line-height:.95!important;letter-spacing:var(--t-track-l)!important}

/* ---- Design under pressure on a phone (23 Oct, the night scroll sweep at 390): the film stood at 62 % of the column,
   215 px wide, at the foot of a pinned stage a screen tall, and grew to the column's width over 700 px of scroll, so
   the chapter was mostly empty ground and its growth counted as a layout shift under the reader (CLS 0.015). The
   helper's compact pass fixed this on 21 Oct (css/fix-about-20261021.css §6), a sheet left unlinked when the full About
   was kept. On a phone the film now stands at the column's width at once, under its heading, and the chapter fits one
   screen; from 701 px it still grows with the scroll ---- */
@media (max-width:700px){
 html body[data-page=about] #design-battle .battle-scroll:not(#_a):not(#_b){height:auto!important}
 html body[data-page=about] #design-battle .battle-stage:not(#_a):not(#_b){position:relative!important;top:auto!important;height:auto!important;min-height:0!important;display:block!important;padding:0 var(--gutter,22px)!important;overflow:visible}
 html body[data-page=about] #design-battle .battle-stage>.battle-screen:not(#_a):not(#_b){width:100%!important;height:auto!important;max-width:none!important;aspect-ratio:16/9;transform:none!important}
}

/* -73: the companies as a typographic index in the logo wall's place (23 Oct; the visual jury r2: «a logo wall with
   two-thirds of the frame empty»): names in the display face at M on column lines 5 and 9, each with the work the site
   shows; phones one column. */
html body[data-page=about] .ab-index:not(#_a){grid-column:5/span 8;grid-row:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2vw;row-gap:clamp(36px,3.6vw,56px);margin:0;padding:0;list-style:none}
html body[data-page=about] .ab-index>li:not(#_a){margin:0;padding:0;min-width:0}
html body[data-page=about] .ab-index h3:not(#_a){margin:0 0 .3em;font-family:var(--t-display);font-weight:400;font-size:var(--t-m);line-height:var(--t-lh-m);letter-spacing:var(--t-track-m);color:var(--ink)}
html body[data-page=about] .ab-index p:not(#_a){margin:0;max-width:30em;font-family:var(--t-text);font-size:var(--t-small);line-height:1.45;color:var(--muted)}
html body[data-page=about] .ab-index a:not(#_a){display:inline!important;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
@media (hover:hover){html body[data-page=about] .ab-index a:not(#_a):hover{text-decoration-thickness:2px}}
@media (max-width:1100px){html body[data-page=about] .ab-index:not(#_a){grid-column:1/-1;grid-row:2}}
@media (max-width:700px){html body[data-page=about] .ab-index:not(#_a){grid-template-columns:minmax(0,1fr);row-gap:28px}}
html body[data-page=about] .ab-index h3 a:not(#_a){color:inherit;text-decoration:none}
@media (hover:hover){html body[data-page=about] .ab-index h3 a:not(#_a):hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}}
html body[data-page=about] .ab-index a:not(#_a):focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
/* -73: a hidden tab takes no room (the three panels shared one grid cell, so the shortest stood over the tallest's
   height: with the index in tab 1 the phone showed a screen of white under «Polyarix»). A switch is the visitor's own
   input, so the change of height is expected. */
html body[data-page=about] #about>.bio-panels>.bio-panel[hidden]:not(#_a):not(#_b):not(#_c){display:none!important}

/* S12, the awards (24 Oct; Olya: laurels «like Fourmeta's», her example America.gov's footer: two sprigs either side of the
   words). The wreath is Openclipart 244867 (public domain, images/laurels/SOURCE.txt), one colour, worn as a mask so it takes
   the text's muted tone in either theme; its left half and right half frame each award. Five in a row under the heading at 1440 (three
   across below 1100 px, two on a phone, the fifth centred); the full list is the ruled table below (device 3). The house
   rule against badges gives way here on Olya's word (DESIGN.md) */
html body[data-page=about] .ab-recog-head>h2:not(#_a):not(#_b):not(#_c){grid-column:1/span 7;grid-row:1}
html body[data-page=about] .ab-recog-head>p:not(#_a):not(#_b):not(#_c){grid-column:9/span 4;grid-row:1;margin:0!important}
html body[data-page=about] .ab-laurels:not(#_a){grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.6vw,24px) clamp(8px,1vw,16px);margin:clamp(40px,4.4vw,64px) 0 0!important;padding:0;list-style:none}
html body[data-page=about] .ab-laurel:not(#_a){position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80px;padding:0 46px;text-align:center;color:var(--ink)}
html body[data-page=about] .ab-laurel:not(#_a)::before,html body[data-page=about] .ab-laurel:not(#_a)::after{content:'';position:absolute;top:50%;width:44px;height:66px;transform:translateY(-50%);background:var(--muted);
 -webkit-mask:url(../images/laurels/laurel-wreath.svg) no-repeat;mask:url(../images/laurels/laurel-wreath.svg) no-repeat;-webkit-mask-size:200% 100%;mask-size:200% 100%}
html body[data-page=about] .ab-laurel:not(#_a)::before{left:0;-webkit-mask-position:0 0;mask-position:0 0}
html body[data-page=about] .ab-laurel:not(#_a)::after{right:0;-webkit-mask-position:100% 0;mask-position:100% 0}
html body[data-page=about] .ab-laurel-award:not(#_a){font-family:var(--t-text);font-size:15px;line-height:1.25}
html body[data-page=about] .ab-laurel-meta:not(#_a){margin-top:4px;font-family:var(--t-text);font-size:12.5px;line-height:1.3;color:var(--muted)}
@media (max-width:1100px){html body[data-page=about] .ab-laurels:not(#_a){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){html body[data-page=about] .ab-laurels:not(#_a){grid-template-columns:repeat(2,minmax(0,1fr))}
 html body[data-page=about] .ab-laurel:not(#_a):last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:700px){html body[data-page=about] .ab-recog-head>h2:not(#_a):not(#_b):not(#_c),html body[data-page=about] .ab-recog-head>p:not(#_a):not(#_b):not(#_c){grid-column:1/-1}
 html body[data-page=about] .ab-recog-head>p:not(#_a):not(#_b):not(#_c){grid-row:2;margin:20px 0 0!important}html body[data-page=about] .ab-laurels:not(#_a){grid-row:3}
 html body[data-page=about] .ab-laurel:not(#_a){min-height:66px;padding:0 34px}
 html body[data-page=about] .ab-laurel:not(#_a)::before,html body[data-page=about] .ab-laurel:not(#_a)::after{width:34px;height:51px}
 html body[data-page=about] .ab-laurel-award:not(#_a){font-size:13.5px}html body[data-page=about] .ab-laurel-meta:not(#_a){font-size:11.5px}}
/* the table: a year first on every row, a ruled head (the rows' own hairlines stay) */
html body[data-page=about] .ab-shared .recognition-row:not(#_a):not(#_b){grid-template-columns:clamp(48px,5vw,72px) minmax(96px,.8fr) minmax(0,3.2fr) minmax(0,1.3fr)}
html body[data-page=about] .ab-shared .rr-year:not(#_a){font-family:var(--t-text);font-size:var(--t-small);color:var(--muted);font-variant-numeric:tabular-nums}
html body[data-page=about] .ab-shared .rr-head:not(#_a){display:grid;grid-template-columns:clamp(48px,5vw,72px) minmax(96px,.8fr) minmax(0,3.2fr) minmax(0,1.3fr);column-gap:clamp(16px,2.4vw,40px);padding:0 0 10px;border-bottom:1px solid currentColor;font-size:12px;color:var(--muted)}
html body[data-page=about] .ab-shared .recognition-row.is-plain:not(#_a){cursor:default}
@media (max-width:700px){html body[data-page=about] .ab-shared .rr-head:not(#_a){display:none}
 html body[data-page=about] .ab-shared .recognition-row:not(#_a):not(#_b){grid-template-columns:clamp(88px,26vw,132px) minmax(0,1fr);grid-template-areas:"thumb year" "thumb source" "thumb name" "thumb note"}
 html body[data-page=about] .ab-shared .recognition-row.is-plain:not(#_a):not(#_b){grid-template-columns:minmax(0,1fr);grid-template-areas:"year" "source" "name" "note"}
 html body[data-page=about] .ab-shared .rr-year:not(#_a){grid-area:year}html body[data-page=about] .ab-shared .rr-source:not(#_a){grid-area:source}
 html body[data-page=about] .ab-shared .rr-name:not(#_a){grid-area:name}html body[data-page=about] .ab-shared .rr-note:not(#_a){grid-area:note}html body[data-page=about] .ab-shared .rr-thumb:not(#_a){grid-area:thumb}}

/* -73 (24 Oct; the coordinator's r3 audit, About .3; TYPE-COMPOSITION.md devices 1, 2, 6): the ribbon as one word at a time at
   specimen scale (js/company-stories.js ribbon()), cut by the frame's right edge on the stage's foot, printing in through the
   Bayer cells (8 px) and the last printing out; the five small in the ninth column, the count in the twelfth */
html body[data-page=about] .ab-ribbon.is-words:not(#_a):not(#_b){height:calc(100svh + var(--n,5) * 42svh);padding:0;overflow:visible}
html body[data-page=about] .ab-ribbon.is-words .abw-stage{position:sticky;top:0;height:100svh;min-height:520px;overflow:clip}
html body[data-page=about] .ab-ribbon.is-words .abw-word{position:absolute;left:var(--gutter,4vw);bottom:clamp(36px,9svh,96px);margin:0;font-family:var(--t-display);font-weight:400;font-variation-settings:normal;
 font-size:clamp(112px,27vw,460px);line-height:.8;letter-spacing:-.045em;white-space:nowrap;color:var(--rib-ink);-webkit-text-fill-color:var(--rib-ink);opacity:0;
 -webkit-mask-size:64px 64px;mask-size:64px 64px;-webkit-mask-repeat:repeat;mask-repeat:repeat}
html body[data-page=about] .ab-ribbon.is-words .abw-word.is-on{opacity:1;animation:abw-in .38s steps(1,end) both}
html body[data-page=about] .ab-ribbon.is-words .abw-word.is-out:not(.is-on){opacity:1;animation:abw-out .3s steps(1,end) both}
html body[data-page=about] .ab-ribbon.is-words .abw-list{position:absolute;top:clamp(96px,15svh,150px);left:calc(var(--gutter,4vw) + (100% - 2 * var(--gutter,4vw)) * 8 / 12);margin:0;padding:0;list-style:none;
 font-family:var(--t-text);font-size:13px;line-height:1.55;color:var(--muted)}
html body[data-page=about] .ab-ribbon.is-words .abw-list>li.is-on{color:var(--rib-ink)}
html body[data-page=about] .ab-ribbon.is-words .abw-count{position:absolute;top:clamp(96px,15svh,150px);right:var(--gutter,4vw);font-family:var(--t-text);font-size:13px;line-height:1.55;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:700px){html body[data-page=about] .ab-ribbon.is-words .abw-list{left:var(--gutter,20px);top:clamp(80px,12svh,120px)}html body[data-page=about] .ab-ribbon.is-words .abw-word{font-size:clamp(84px,30vw,160px)}}
/* reduced motion and no script: the five stacked at the same scale, each cut by the frame */
@media (prefers-reduced-motion:reduce){html body[data-page=about] .ab-ribbon:not(.is-words) .type-band-word:not(#_a):not(#_b):not(#_c){font-size:clamp(84px,18vw,300px)!important;line-height:.86!important;letter-spacing:-.045em!important}}
@keyframes abw-in{0.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM32 0h8v8h-8zM16 16h8v8h-8zM48 16h8v8h-8zM0 32h8v8h-8zM32 32h8v8h-8zM16 48h8v8h-8zM48 48h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM32 0h8v8h-8zM16 16h8v8h-8zM48 16h8v8h-8zM0 32h8v8h-8zM32 32h8v8h-8zM16 48h8v8h-8zM48 48h8v8h-8z'/%3E%3C/svg%3E")}12.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8z'/%3E%3C/svg%3E")}25.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM40 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM24 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM40 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM24 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM40 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM24 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM40 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM24 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E")}37.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E")}50.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E")}62.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E")}75.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM0 8h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM32 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM16 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM48 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM0 40h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM32 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM16 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM48 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM0 8h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM32 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM16 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM48 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM0 40h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM32 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM16 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM48 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E")}87.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM0 8h8v8h-8zM8 8h8v8h-8zM16 8h8v8h-8zM24 8h8v8h-8zM32 8h8v8h-8zM40 8h8v8h-8zM48 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM0 24h8v8h-8zM8 24h8v8h-8zM16 24h8v8h-8zM24 24h8v8h-8zM32 24h8v8h-8zM40 24h8v8h-8zM48 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM0 40h8v8h-8zM8 40h8v8h-8zM16 40h8v8h-8zM24 40h8v8h-8zM32 40h8v8h-8zM40 40h8v8h-8zM48 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM0 56h8v8h-8zM8 56h8v8h-8zM16 56h8v8h-8zM24 56h8v8h-8zM32 56h8v8h-8zM40 56h8v8h-8zM48 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM0 8h8v8h-8zM8 8h8v8h-8zM16 8h8v8h-8zM24 8h8v8h-8zM32 8h8v8h-8zM40 8h8v8h-8zM48 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM0 24h8v8h-8zM8 24h8v8h-8zM16 24h8v8h-8zM24 24h8v8h-8zM32 24h8v8h-8zM40 24h8v8h-8zM48 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM0 40h8v8h-8zM8 40h8v8h-8zM16 40h8v8h-8zM24 40h8v8h-8zM32 40h8v8h-8zM40 40h8v8h-8zM48 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM0 56h8v8h-8zM8 56h8v8h-8zM16 56h8v8h-8zM24 56h8v8h-8zM32 56h8v8h-8zM40 56h8v8h-8zM48 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E")}100%{-webkit-mask-image:none;mask-image:none}}@keyframes abw-out{0.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM0 8h8v8h-8zM8 8h8v8h-8zM16 8h8v8h-8zM24 8h8v8h-8zM32 8h8v8h-8zM40 8h8v8h-8zM48 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM0 24h8v8h-8zM8 24h8v8h-8zM16 24h8v8h-8zM24 24h8v8h-8zM32 24h8v8h-8zM40 24h8v8h-8zM48 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM0 40h8v8h-8zM8 40h8v8h-8zM16 40h8v8h-8zM24 40h8v8h-8zM32 40h8v8h-8zM40 40h8v8h-8zM48 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM0 56h8v8h-8zM8 56h8v8h-8zM16 56h8v8h-8zM24 56h8v8h-8zM32 56h8v8h-8zM40 56h8v8h-8zM48 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM0 8h8v8h-8zM8 8h8v8h-8zM16 8h8v8h-8zM24 8h8v8h-8zM32 8h8v8h-8zM40 8h8v8h-8zM48 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM0 24h8v8h-8zM8 24h8v8h-8zM16 24h8v8h-8zM24 24h8v8h-8zM32 24h8v8h-8zM40 24h8v8h-8zM48 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM0 40h8v8h-8zM8 40h8v8h-8zM16 40h8v8h-8zM24 40h8v8h-8zM32 40h8v8h-8zM40 40h8v8h-8zM48 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM0 56h8v8h-8zM8 56h8v8h-8zM16 56h8v8h-8zM24 56h8v8h-8zM32 56h8v8h-8zM40 56h8v8h-8zM48 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E")}12.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM0 8h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM32 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM16 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM48 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM0 40h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM32 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM16 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM48 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM0 8h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM32 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM16 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM48 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM0 40h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM32 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM16 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM48 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E")}25.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM24 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM56 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM8 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM40 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM24 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM56 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM8 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM40 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E")}37.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM8 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM40 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM24 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM56 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM8 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM40 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM24 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM56 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E")}50.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM24 8h8v8h-8zM40 8h8v8h-8zM56 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM8 24h8v8h-8zM24 24h8v8h-8zM40 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM24 40h8v8h-8zM40 40h8v8h-8zM56 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM8 56h8v8h-8zM24 56h8v8h-8zM40 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E")}62.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM40 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM24 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM40 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM24 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM8 8h8v8h-8zM40 8h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM24 24h8v8h-8zM56 24h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM8 40h8v8h-8zM40 40h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8zM24 56h8v8h-8zM56 56h8v8h-8z'/%3E%3C/svg%3E")}75.0%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM16 0h8v8h-8zM32 0h8v8h-8zM48 0h8v8h-8zM0 16h8v8h-8zM16 16h8v8h-8zM32 16h8v8h-8zM48 16h8v8h-8zM0 32h8v8h-8zM16 32h8v8h-8zM32 32h8v8h-8zM48 32h8v8h-8zM0 48h8v8h-8zM16 48h8v8h-8zM32 48h8v8h-8zM48 48h8v8h-8z'/%3E%3C/svg%3E")}87.5%{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM32 0h8v8h-8zM16 16h8v8h-8zM48 16h8v8h-8zM0 32h8v8h-8zM32 32h8v8h-8zM16 48h8v8h-8zM48 48h8v8h-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0h8v8h-8zM32 0h8v8h-8zM16 16h8v8h-8zM48 16h8v8h-8zM0 32h8v8h-8zM32 32h8v8h-8zM16 48h8v8h-8zM48 48h8v8h-8z'/%3E%3C/svg%3E")}100%{opacity:0}}

/* S12 after my gate (24 Oct, tools/laurels3.py): a laurel is the honour (display face) over who gave it (text face), two lines;
   the honours of a row on one line (the text block starts at the same height in every cell, the sprigs centred on the cell);
   the sprigs a size up. The details live in the table below */
html body[data-page=about] .ab-laurel:not(#_a):not(#_b){justify-content:flex-start;min-height:96px;padding:22px 52px 0}
html body[data-page=about] .ab-laurel:not(#_a):not(#_b)::before,html body[data-page=about] .ab-laurel:not(#_a):not(#_b)::after{width:50px;height:75px;top:48px}
html body[data-page=about] .ab-laurel-award:not(#_a):not(#_b){font-family:var(--t-display);font-variation-settings:normal;font-weight:400;font-synthesis:none;font-size:clamp(22px,1.75vw,27px);line-height:1;letter-spacing:var(--t-track-m,-.01em);white-space:nowrap}
html body[data-page=about] .ab-laurel-meta:not(#_a):not(#_b){margin-top:8px;font-size:13px;line-height:1.3;color:inherit}
@media (max-width:860px){html body[data-page=about] .ab-laurel:not(#_a):not(#_b){min-height:84px;padding:18px 40px 0}
 html body[data-page=about] .ab-laurel:not(#_a):not(#_b)::before,html body[data-page=about] .ab-laurel:not(#_a):not(#_b)::after{width:40px;height:60px;top:42px}
 html body[data-page=about] .ab-laurel-award:not(#_a):not(#_b){font-size:20px}html body[data-page=about] .ab-laurel-meta:not(#_a):not(#_b){font-size:12px}}
/* the table: «Dymension × Encode Club» on one line; on a phone the pictures stand right of their rows' words */
html body[data-page=about] .ab-shared .recognition-row:not(#_a):not(#_b):not(#_c),html body[data-page=about] .ab-shared .rr-head:not(#_a):not(#_b){grid-template-columns:clamp(48px,5vw,72px) minmax(120px,1.15fr) minmax(0,2.85fr) minmax(0,1.3fr)}
@media (max-width:700px){html body[data-page=about] .ab-shared .recognition-row:not(#_a):not(#_b):not(#_c){grid-template-columns:minmax(0,1fr) clamp(72px,22vw,96px);grid-template-areas:"year thumb" "source thumb" "name name" "note note"}
 html body[data-page=about] .ab-shared .recognition-row.is-plain:not(#_a):not(#_b):not(#_c){grid-template-columns:minmax(0,1fr);grid-template-areas:"year" "source" "name" "note"}
 html body[data-page=about] .ab-shared .rr-thumb:not(#_a):not(#_b){align-self:start;justify-self:end}}
/* (hold12, 390) the fifth laurel alone on its row keeps a cell's width, centred (its sprigs stood at the screen's edges); the
   table's picture spans the year, the source and the name, so the small lines keep their rhythm beside it */
@media (max-width:860px){html body[data-page=about] .ab-laurel:not(#_a):not(#_b):last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - clamp(4px,.5vw,8px))}}
@media (max-width:700px){html body[data-page=about] .ab-shared .recognition-row:not(#_a):not(#_b):not(#_c):not(.is-plain){grid-template-areas:"year thumb" "source thumb" "name thumb" "note note";align-items:start}}

/* S12b, the honours band (24 Oct; Olya ~08:01Z on the 390 still: «можно ведь бегущую красивую сделать»; the coordinator's
   brief at ~08:30Z), set as America.gov's footer laurels (Olya ~11:20Z: «не ставь нигде паузы и авард плохо и так понятно
   надо за что писать смотри в рефе не большой рифт отступы и тд»; ~11:25Z: «награды надо продумать»). Each laurel frames
   one phrase that says what the honour was for, in the text face at 16/24 px in ink, balanced on two lines (America.gov:
   16/24 px, two lines 272 px wide), between two sprigs at the file's own 30.3 x 82 px, 24 px from the phrase (16 on a
   phone, as theirs). The laurels run as one full-bleed band (js/honours-band.js); the wrapper wears a fixed 1-bit Bayer
   ramp (4 px cells, 96 px at each edge, 32 on a phone), so the sprigs print in and out at the edges; the phrases ride a
   twin of the track laid over the band (.ab-honours-words, the same translate) under a smooth ramp of the same width, so
   type fades through its tones there and never dithers; the tracks alone move. Without script or under reduced motion
   the band is a row to scroll sideways, snapping to each laurel, with the same edges. No visible pause (Olya): the button
   below shows only to keyboard focus. The house rule against badges gives way here on Olya's word (DESIGN.md) */
html body[data-page=about] .ab-honours:not(#_a){position:relative;display:grid;margin:clamp(48px,5vw,72px) calc(-1 * var(--gutter,4vw)) 0;--hb-ramp:96px}
html body[data-page=about] :is(.ab-honours-band,.ab-honours-words):not(#_a){grid-area:1/1;min-width:0}
html body[data-page=about] .ab-honours-words:not(#_a){position:relative;overflow:hidden;pointer-events:none;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--hb-ramp),#000 calc(100% - var(--hb-ramp)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--hb-ramp),#000 calc(100% - var(--hb-ramp)),transparent)}
html body[data-page=about] .ab-honours.has-words .ab-honours-band .ab-honour-text:not(#_a){visibility:hidden}
html body[data-page=about] .ab-honours-words .ab-honour:not(#_a)::before,html body[data-page=about] .ab-honours-words .ab-honour:not(#_a)::after{visibility:hidden}
/* the first sight: the words come in as the sprigs finish growing */
html body[data-page=about] .ab-honours.is-run .ab-honours-words:not(#_a){transition:opacity .6s cubic-bezier(.16,1,.3,1) .35s}
html body[data-page=about] .ab-honours.is-run.is-pending .ab-honours-words:not(#_a){opacity:0}
html body[data-page=about] .ab-honours-band:not(#_a){position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
 -webkit-mask-image:var(--hb-mask,none);mask-image:var(--hb-mask,none);-webkit-mask-size:var(--hb-mask-size,auto);mask-size:var(--hb-mask-size,auto);
 -webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;-webkit-mask-position:0 0;mask-position:0 0}
html body[data-page=about] .ab-honours-band::-webkit-scrollbar{display:none}
html body[data-page=about] .ab-honours-track:not(#_a){display:flex;align-items:center;gap:64px;width:max-content;margin:0!important;padding:4px 20%;list-style:none}
html body[data-page=about] .ab-honours.is-run .ab-honours-band:not(#_a){overflow:hidden;scroll-snap-type:none}
html body[data-page=about] .ab-honours.is-run .ab-honours-track:not(#_a){padding-inline:0;will-change:transform}
html body[data-page=about] .ab-honour:not(#_a){position:relative;flex:none;display:grid;grid-template-columns:auto auto auto;align-items:center;column-gap:24px;margin:0;padding:0;color:var(--ink);scroll-snap-align:center;transition:color .2s linear}
/* (Olya 11:05Z: «ты можешь скачать а не рисовать самому яж тебе дал откуда пока не красиво») the sprigs are America.gov's
   footer laurel as downloaded (images/laurels/SOURCE.txt: a US government work, public domain), the left one mirrored as
   America.gov mirrors it, in ink */
html body[data-page=about] .ab-honour:not(#_a)::before,html body[data-page=about] .ab-honour:not(#_a)::after{content:'';display:block;width:30.3px;height:82px;background:currentColor;
 -webkit-mask:url(../images/laurels/laurel-right.svg) center/100% 100% no-repeat;mask:url(../images/laurels/laurel-right.svg) center/100% 100% no-repeat}
html body[data-page=about] .ab-honour:not(#_a)::before{-webkit-mask-image:url(../images/laurels/laurel-left.svg);mask-image:url(../images/laurels/laurel-left.svg)}
html body[data-page=about] .ab-honour-text:not(#_a){display:block;max-width:288px;font-family:var(--t-text);font-size:16px;line-height:24px;font-weight:400;letter-spacing:-.01em;
 text-align:center;text-wrap:balance;color:inherit}
/* names and compounds stay whole on their line (hold19b at 390: «self-» / «service») */
html body[data-page=about] .ab-honour-text .nw:not(#_a){white-space:nowrap}
html body[data-page=about] .ab-honours.has-on .ab-honour:not(.is-on):not(#_a){color:var(--muted)}
html body[data-page=about] .ab-honours.is-run .ab-honour:not(#_a){cursor:pointer}
/* a phone: the phrase narrows so a laurel held in the middle clears both 32 px ramps (30.3 + 16 + 230 + 16 + 30.3 px) */
@media (max-width:700px){html body[data-page=about] .ab-honours:not(#_a){--hb-ramp:32px}
 html body[data-page=about] .ab-honours-track:not(#_a){gap:40px}
 html body[data-page=about] .ab-honour:not(#_a){column-gap:16px}
 html body[data-page=about] .ab-honour-text:not(#_a){max-width:230px}}
/* the first sight: each sprig grows from its stem to its tip (600 ms, 60 ms apart, in screen order) */
@keyframes hb-grow-l{from{clip-path:circle(0 at 100% 100%)}to{clip-path:circle(150% at 100% 100%)}}
@keyframes hb-grow-r{from{clip-path:circle(0 at 0 100%)}to{clip-path:circle(150% at 0 100%)}}
html body[data-page=about] .ab-honours.is-pending .ab-honour:not(#_a)::before{clip-path:circle(0 at 100% 100%)}
html body[data-page=about] .ab-honours.is-pending .ab-honour:not(#_a)::after{clip-path:circle(0 at 0 100%)}
html body[data-page=about] .ab-honours.is-in:not(.is-grown) .ab-honour:not(#_a)::before{animation:hb-grow-l .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--hb-k,0) * 120ms)}
html body[data-page=about] .ab-honours.is-in:not(.is-grown) .ab-honour:not(#_a)::after{animation:hb-grow-r .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--hb-k,0) * 120ms + 60ms)}
/* «Pause» / «Play» (WCAG 2.2.2) for the keyboard only (Olya ~11:25Z: «убирай на всех движениях паузу это лишнее»): out of
   sight until Tab reaches it, then a drawn link under the band at the right gutter. The band holds under a fine pointer,
   and reduced motion stills it */
html body[data-page=about] .ab-honours-pause:not(#_a){position:absolute;right:var(--gutter,4vw);top:100%;
 display:block;width:max-content;margin:0;padding:8px 0;background:none;border:0;border-radius:0;
 font-family:var(--t-text);font-size:15px;line-height:20px;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;cursor:pointer}
html body[data-page=about] .ab-honours-pause:not(#_a):not(:focus-visible){width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
html body[data-page=about] .ab-honours-pause[hidden]:not(#_a){display:none}
html body[data-page=about] .ab-honours-pause:not(#_a):focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* (Olya ~11:25Z: «убирай на всех движениях паузу это лишнее») the battle film's Play / Pause and Stop for the keyboard only:
   out of sight until Tab reaches them; a click or a tap on the film stops it or plays it on (js/battle-video.js); the
   sound keeps its button */
html[data-room=about] .battle-screen>.battle-controls:not(#_u) button:not(:last-child):not(:focus-visible){position:absolute;width:1px;height:1px;min-width:0;min-height:0;padding:0;overflow:hidden;clip-path:inset(50%)}
html[data-room=about] .battle-screen:not(#_u){cursor:pointer}
/* a laurel's rows in the table, lit as on hover for 1.2 s after the band sends the reader there */
html body[data-page=about] .recognition-index .recognition-row .rr-name:not(#_a){transition:opacity .2s linear}
html body[data-page=about] .recognition-index.hb-lit .recognition-row:not(.hb-row) .rr-name:not(#_a){opacity:.24}

/* P0 numerals (rule 5, the coordinator, 24 Oct 2026 ~12:15Z: one display numeral a screen, its cap at most 6.5 times its
   caption's): each company's ledger keeps one figure at L, the one its story is about: DFINITY's 100,000+ citations under «The
   research behind the Internet Computer.» and PrivatBank's 10,000+ self-service terminals, the product the career rail opens on
   (L 96 px, cap 73, over a 17 px caption, cap 12: 6.1). The two beside it read at the lead size over their captions, and the
   three captions share one line under them */
html body[data-page=about] .company-story .cs-ledger:not(#_u):not(#_p)>div{justify-content:flex-end}
html body[data-page=about] .company-story .cs-ledger>div:not(:nth-child(2)) :is(dt .cs-line,dt>span):not(.cs-unit):not(#_t):not(#_y):not(#_p):not(#_e):not(#_q){font-family:var(--t-text)!important;font-size:26px!important;line-height:1.2!important;letter-spacing:-.01em!important}
@media (max-width:700px){html body[data-page=about] .company-story .cs-ledger>div:not(:nth-child(2)) :is(dt .cs-line,dt>span):not(.cs-unit):not(#_t):not(#_y):not(#_p):not(#_e):not(#_q){font-size:20px!important}}
html body[data-page=about] .company-story .cs-ledger>div:not(:nth-child(2)) dt :is(.cs-unit,span span):not(#_t):not(#_y):not(#_p):not(#_e):not(#_q){font-size:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;vertical-align:baseline!important;margin-right:.25em}