/* About and CV: the rooms' scenes and the type pass (21 Oct 2026; the owner: «раздай задачи… по тематике сцен во
   внутренних страницах, чтоб была логика, красота», then «проверь все размеры, отступы»). The sequence and its reasons:
   work/_claude-qa/review-20261021c/scenes-about-cv.md. Loaded last on /about and /cv. The world's stops are pinned to the
   chapters by their data-world (js/about-scenes.js). Every grey here is the cool one (the neutral's r −4, g −1, b +5). */

/* ---- About, scene 6: the cast on the seabed ----
   The plaster head of the opener comes back as the torso on the seabed, the years between them, on a stage of its own:
   no reading zone, so the world prints the cast whole (space-world.js zoneFade). The camera arrives (2.73 to 2.92),
   turns 60° around it and back (the orbit, 2.78 to 3.28; its peak at the stage's middle) and tilts up after the
   rising sphere (3.3 to 3.48), while the statement «I work directly with companies…» scrolls through columns 7 to 12
   and fills, the home page's approved pairing. The torso holds the left column: the world's about frame reads the
   statement's first word and puts the cast at x .285, y .44 of the frame. Portrait screens frame the cast centred in the
   upper half, so there the statement comes first and the stage's empty part follows (data-world-portrait). */
html body[data-page=about] #about>.about-stage:not(#_s){position:relative;height:220vh;margin:0;padding:0}
html body[data-page=about] #about>.about-stage>.about-intro:not(#_s):not(#_t){margin:0!important;padding:0!important;max-width:none!important;width:auto!important}
html body[data-page=about] #about>.about-stage>.about-intro>:is(p,.about-support):not(#_s):not(#_t){position:relative;margin:0!important;max-width:none!important;z-index:1}
@media (orientation:landscape){
 html body[data-page=about] #about>.about-stage>.about-intro:not(#_s):not(#_t){position:absolute!important;left:0;right:0;top:50%;transform:translateY(-50%);
  display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:2vw!important;row-gap:24px!important;align-items:start!important}
 html body[data-page=about] #about>.about-stage>.about-intro>p[data-scroll-fill]:not(#_s):not(#_t){grid-column:7/span 6;grid-row:1;align-self:start!important}
 html body[data-page=about] #about>.about-stage>.about-intro>.about-support:not(#_s):not(#_t){grid-column:7/span 4;grid-row:2}
}
@media (orientation:portrait){
 html body[data-page=about] #about>.about-stage:not(#_s){height:auto;padding-bottom:170svh}
 html body[data-page=about] #about>.about-stage>.about-intro:not(#_s):not(#_t){display:flex!important;flex-direction:column!important;gap:16px!important}
}
/* the fill runs from the light grey to the page's ink (by night from the dark grey to paper): the old #4a4d53 filled
   words stood a grey short of the copy round them */
html body[data-page=about] #about>.about-stage>.about-intro>p[data-scroll-fill]:not(#_s){--ink:#000000;--muted:#8f9298}   /* (22 Oct, jury F9) unfilled words 3.1:1 on white (#9ea1a7 was 2.6:1) */
html[data-theme=dark] body[data-page=about] #about>.about-stage>.about-intro>p[data-scroll-fill]:not(#_s){--ink:#ffffff;--muted:#585b61}

/* ---- Type roles (css/type-2026.css; lead: these selectors can join its role lists, at the same weight) ----
   At 1440: display XL 144, L 96, M 64 in the display face; lead 24, body 17, small 14 and the 13 px caption in Basel.
   Art keeps its size only where it is the composition's dominant; here every off-role size took a role. */

/* L: the Awards panel's title, the grant's figure (the block's dominant over its M line), the Fourmeta title */
html body[data-page=about] :is(.recognition-intro h3,.grant-recognition>strong,.agency-heading>h2):not(#_s):not(#_t):not(#_p):not(#_e){
 font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;
 font-size:var(--t-l)!important;line-height:var(--t-lh-l,1)!important;letter-spacing:var(--t-track-l)!important;font-kerning:normal}
/* M: the grant's line, «Recognition, shared.», the ledger's years (sticky marks of the awards and events) */
html body[data-page=about] :is(.grant-recognition h3,.agency-award-intro h3,.is-ledger .lg-year):not(#_s):not(#_t):not(#_p):not(#_e){
 font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;
 font-size:var(--t-m)!important;line-height:var(--t-lh-m,1.05)!important;letter-spacing:var(--t-track-m)!important;font-kerning:normal}
/* lead: the lines beside titles, the career rail's open text, the ledger's items, the Fourmeta cases' names (the cover
   leads the card, as in the gallery), the battle's note */
html body[data-page=about] :is(.recognition-intro>p,.agency-heading>p,.career-detail .cr-panel.cr-text .cr-body p:not(.career-role),.is-ledger .lg-item h4,.agency-projects>a>h3,.battle-section>p):not(#_s):not(#_t):not(#_p):not(#_e){
 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}
html body[data-page=about] .career-detail .cr-panel.cr-text .cr-body p:not(.career-role):not(#_s):not(#_t):not(#_p):not(#_e){max-width:20em!important}
/* body: the rail's role lines and its other notes, the grant's note, the shared recognition's note */
html body[data-page=about] :is(.career-detail .career-role,.career-detail .cr-body p,.career-row p,.grant-recognition>div>p,.agency-award-intro p):not(.cr-text p:not(.career-role)):not(#_s):not(#_t):not(#_p):not(#_e){
 font-family:var(--t-text)!important;font-size:var(--t-body)!important;line-height:1.5!important;letter-spacing:0!important}
/* small: the ledger's captions, the Fourmeta cases' lines and credits */
html body[data-page=about] :is(.is-ledger .lg-item p,.agency-projects>a>p):not(#_s):not(#_t):not(#_p):not(#_e){
 font-family:var(--t-text)!important;font-size:var(--t-small)!important;line-height:1.4!important;letter-spacing:0!important}

/* the grant's «DFINITY Foundation» stood over its heading as an eyebrow; the context follows the line it belongs to */
html body[data-page=about] .grant-recognition>div:not(#_s){display:flex;flex-direction:column;align-items:flex-start}
html body[data-page=about] .grant-recognition>div>h3:not(#_s){order:0}
html body[data-page=about] .grant-recognition>div>span:not(#_s):not(#_t){order:1;margin:8px 0 0!important;font-size:var(--t-small)!important;line-height:1.4!important;letter-spacing:0!important;color:var(--muted)}
html body[data-page=about] .grant-recognition>div>p:not(#_s){order:2}
html body[data-page=about] .grant-recognition>div>a:not(#_s){order:3}

/* ---- the 8 px rhythm in these blocks (they were 65, 26, 28, 90/110, 10 and 26-48) ---- */
html body[data-page=about] .agency-publications:not(#_s){padding-top:88px;padding-bottom:112px}
html body[data-page=about] .agency-heading:not(#_s){margin-bottom:64px;row-gap:24px}
html body[data-page=about] .agency-award-intro:not(#_s){margin:32px 0 64px}
html body[data-page=about] .agency-recognition-close .agency-award-intro:not(#_s){margin:0 0 24px}
html body[data-page=about] .is-ledger .lg-items:not(#_s){gap:clamp(24px,3.2vw,48px)}
html body[data-page=about] .is-ledger .lg-item h4:not(#_s){margin:0 0 8px}

/* ---- CV: the record's sizes ---- */
/* lead: the practice list, the companies, the cases' names; body: the roles (in ink) and their notes, the recognition
   and the workflow; small: the cases' lines. Screen only: the printed CV keeps its own point sizes (css/cv-v54.css) */
@media screen{
 html body[data-page=cv] :is(.cv-practice,.cv-role h3,.cv-selected>a):not(#_s):not(#_t):not(#_p):not(#_e){
  font-family:var(--t-text)!important;font-size:var(--t-lead)!important;line-height:1.3!important;letter-spacing:0!important}
 html body[data-page=cv] .cv-practice:not(#_s):not(#_t):not(#_p):not(#_e){line-height:1.5!important}
 html body[data-page=cv] :is(.cv-role .career-role,.cv-role p,.cv-recognition>p):not(#_s):not(#_t):not(#_p):not(#_e){
  font-family:var(--t-text)!important;font-size:var(--t-body)!important;line-height:1.5!important;letter-spacing:0!important}
 html body[data-page=cv] .cv-role .career-role:not(#_s):not(#_t):not(#_p):not(#_e){color:var(--ink)}
 html body[data-page=cv] .cv-selected>a>span:not(#_s):not(#_t):not(#_p):not(#_e){font-size:var(--t-small)!important;line-height:1.4!important;margin-top:8px}
 /* the experience rows' 28 px to the 8 px steps */
 html[data-room=cv] .cv-experience>.cv-role:not(#_u):not(#_s){padding-block:32px}
 html[data-room=cv] .cv-experience>.cv-role:not(#_u):not(#_s):first-child{padding-top:0}
 html[data-room=cv] .cv-experience>.cv-role:not(#_u):not(#_s):last-child{padding-bottom:0}
}