/* /about, the full page (21 Oct 2026, the owner: «пусть будет подробный эбаут; лучше не вырезать, а переделывать»):
   from the helper's compact pass (css/fix-about-20261021.css, unlinked) only the live industry forms (1) and the
   case covers (2) come over; every section of the page stays */
/* ---- the page: the forms' canvases reach 20 % past their boxes; nothing may scroll sideways ---- */
html body[data-page=about] main>:is(#about,#fourmeta):not(#_a){overflow-x:clip}

/* ---- 1. The industry forms, live (js/company-stories.js starts js/3d/industry-forms.js) ----
   The box is the still's own frame (960 x 600, 8:5: the window of the authored view the live form takes over from), the
   canvas 20 % past it on every side. The print's filters move from the box to the picture and the canvas: a filter's
   region is its element's box (x 0, y 0, 100 %), so on the box it cut the turned picture and would cut every part
   that comes in from outside the frame */
html body[data-page=about] .cs-form:not(#_a):not(#_b){box-sizing:border-box;padding:0!important;aspect-ratio:8/5;height:auto;max-width:none}
html body[data-page=about] .cs-form>.cs-form-body:not(#_a){display:block;width:100%}
html body[data-page=about] .cs-form img:not(#_a){display:block;width:100%;height:auto;aspect-ratio:8/5}
html body[data-page=about] .cs-form>canvas.industry-live:not(#_a){position:absolute;left:-20%;top:-20%;width:140%;height:140%;display:block;pointer-events:none}
html.one-bit body[data-page=about] .cs-form:not(#_a):not(#_b){filter:none!important}
html.one-bit body[data-page=about] .cs-form :is(img,canvas.industry-live):not(#_a){filter:url(#one-bit-alpha-tone-ink)}
html.one-bit[data-theme=dark] body[data-page=about] .cs-form :is(img,canvas.industry-live):not(#_a){filter:url(#one-bit-alpha-fine)}
html.one-bit[data-colour=on] body[data-page=about] .cs-form :is(img,canvas.industry-live):not(#_a){filter:url(#one-bit-alpha-fine-ink-c)}
html.one-bit[data-colour=on][data-theme=dark] body[data-page=about] .cs-form :is(img,canvas.industry-live):not(#_a){filter:url(#one-bit-alpha-fine-c)}

/* Where each stands, measured at 1440 with the display face's own advances (work/_claude-qa/inner-20261021/about/
   tool-measure-display-type.py): «Foundation.» ends at 728 px, «PrivatBank.» at 702, the briefs start 311 and 172 px
   under the heads' tops. The chain spans 7.7-93.9 % of its frame across and 17-83.7 % down: at 48.6vw it runs from 779 to
   1382 px and from 26 px above the head to 266 px into it, 51 px right of the name and 45 px over the brief. The coins
   fill 5.5-56.9 % across and 13.3-89.7 % down: at 45vw they stand 780-1113 px, from 182 px above the head (44 px under
   DFINITY's sources, with the 96 px between the stories below) to 127 px into it, 45 px over the brief. Big enough that
   the coins' act (.1 of a unit) moves about 23 px, the motion plan's floor (24 px at 1440) within a pixel */
@media (min-width:1101px){
 html body[data-page=about] .company-story .cs-form-web3:not(#_a):not(#_b){width:48.6vw;top:-6.95vw;right:-3vw;left:auto}
 html body[data-page=about] .company-story .cs-form-fintech:not(#_a):not(#_b){width:45vw;top:-16.4vw;left:47.6vw;right:auto}
 html body[data-page=about] .company-story+.company-story:not(#_a){padding-top:96px}
}
@media (min-width:821px) and (max-width:1100px){
 html body[data-page=about] .company-story .cs-form-web3:not(#_a):not(#_b){width:42vw;top:-6vw;right:-2vw;left:auto}
 html body[data-page=about] .company-story .cs-form-fintech:not(#_a):not(#_b){width:42vw;top:-15vw;left:50vw;right:auto}
 html body[data-page=about] .company-story+.company-story:not(#_a){padding-top:88px}
}
/* phones: in the flow after the brief, the box as wide as the screen (the chain and the tray fill 86-90 % of it); the
   coins fill the frame's left half, so their box starts 22vw in and the coins stand in the middle */
@media (max-width:820px){
 html body[data-page=about] .cs-form:not(#_a):not(#_b){position:relative;top:auto;right:auto;left:auto;width:calc(100% + 2 * var(--gutter,22px));margin:40px calc(-1 * var(--gutter,22px)) 0}
 html body[data-page=about] .company-story .cs-form-fintech:not(#_a):not(#_b){width:100vw;margin:32px 0 0 calc(22vw - var(--gutter,22px))}
}

/* ---- 2. Every case a story names shows its cover (the rows were names only; work-covers/<slug>-7x5) ---- */
html body[data-page=about] .company-story .cs-cases:not(#_a):not(#_b){border:0;gap:8px}
html body[data-page=about] .company-story .cs-cases>a:not(#_a):not(#_b){display:grid!important;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;column-gap:16px;min-height:0;padding:8px 0!important}
html body[data-page=about] .cs-case-cover:not(#_a){display:block;width:96px;aspect-ratio:7/5;border-radius:8px;overflow:hidden;background:var(--cool-chip,#eceff5)}
html body[data-page=about] .cs-case-cover>img:not(#_a){display:block;width:100%;height:100%;object-fit:cover}
html body[data-page=about] .company-story .cs-cases>a:is(:hover,:focus-visible) .cs-case-cover:not(#_a){transform:none}
@media (max-width:820px){
 html body[data-page=about] .company-story .cs-cases>a:not(#_a):not(#_b){grid-template-columns:80px minmax(0,1fr) auto}
 html body[data-page=about] .cs-case-cover:not(#_a){width:80px}
}

/* the Fourmeta tray, live, at a size the print shows (21 Oct; the owner: «маленькое не смотрится»): about twice its old
   200 px, standing in the right column above the line, clear of it, in the empty field between the screens and the title */
@media (min-width:821px){
 html body[data-page=about] .agency-heading>.cs-form-platforms:not(#_a):not(#_b){width:min(30vw,460px)!important;height:auto!important;aspect-ratio:8/5;top:auto!important;bottom:calc(100% - 45px)!important;right:0!important;left:auto!important}
}