/* /gallery (Explore), 21 Oct 2026, release -70. The owner: «есть пустые места в светлой теме, дырки, сильно много
   воздуха; нужно вытягивать уровень до профессионального»; «вижу кейсы без обложки»; «некоторые 3джс статичны, они как
   иконки из стекла… и обрезаются». Report: work/_claude-qa/inner-20261021/gallery-work-report.md.
   Loaded last on /gallery only; every rule is scoped to body[data-page=gallery] and carries five empty id tests, so it
   outranks the override layers (type-2026.css has four) without touching them. Spacing on the 8 px steps, type on the
   roles of css/type-2026.css (XL h1, L chapter titles, M lists, lead 24, body 17, small 14). */

/* ---------- 1. The opening: one composed first frame ----------
   It was a short block at the top left with the right half empty, and the rail's heading, the first project's name
   and the top of its cover showed under it in the first screen (light-gallery-0). Now it fills the frame: the title
   stands at the foot of the frame on six columns, the lede and «Enter the collection» hang on column 9 and end on the
   title's last line (grid-2026.css E12), and the sky above is the world's: the drop, nothing else. */
html body[data-page=gallery] #projects.gallery-section:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){margin-top:0!important}
html body[data-page=gallery] .gallery-opening>.gallery-opening-copy>h1:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){margin:0!important}
html body[data-page=gallery] .gallery-opening>.gallery-opening-copy>p:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){font-family:var(--t-text)!important;font-size:var(--t-lead)!important;line-height:1.3!important;letter-spacing:0!important;max-width:none!important}
html body[data-page=gallery] .gallery-opening>.gallery-opening-copy>.text-button:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){margin:0!important}

@media (min-width:1101px){
 html body[data-page=gallery] .gallery-opening:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-template-rows:minmax(0,1fr) auto 48px!important;column-gap:2vw!important;row-gap:0!important;align-items:end!important;min-height:100svh!important;box-sizing:border-box!important;padding:112px 0 64px!important}
 html body[data-page=gallery] .gallery-opening>.gallery-opening-copy:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){display:contents!important}
 html body[data-page=gallery] .gallery-opening>.gallery-opening-copy>h1:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){grid-column:1/span 8!important;grid-row:2/span 2!important;align-self:end!important}
 html body[data-page=gallery] .gallery-opening>.gallery-opening-copy>p:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){grid-column:9/span 4!important;grid-row:2!important;align-self:end!important;margin:0 0 24px!important}
 html body[data-page=gallery] .gallery-opening>.gallery-opening-copy>.text-button:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){grid-column:9/span 4!important;grid-row:3!important;justify-self:start!important;align-self:end!important}
 /* the poster stands in the free sky when the live world is off (stills, no WebGL2); with the world live it is hidden */
 html body[data-page=gallery] .gallery-opening>.explore-orb:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){grid-column:7/span 6!important;grid-row:1!important;align-self:center!important;height:min(40vw,48svh)!important;width:100%!important}
}
@media (max-width:1100px){
 /* tablets and phones: the copy stands at the foot of the first screen, the sky above it is the drop's (it sat beside
    «Enter the collection» on a phone, phone/light-gallery-0); the bottom padding clears the phone's nav tab */
 html body[data-page=gallery] .gallery-opening:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){display:flex!important;flex-direction:column!important;justify-content:flex-end!important;align-items:flex-start!important;gap:0!important;min-height:100svh!important;box-sizing:border-box!important;padding:112px 0 72px!important}
 html body[data-page=gallery] .gallery-opening>.gallery-opening-copy:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){width:100%}
 html body[data-page=gallery] .gallery-opening>.gallery-opening-copy>p:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){max-width:26em!important;margin:24px 0!important}
 html body[data-page=gallery] .gallery-opening>.explore-orb:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){order:-1;margin:0 0 auto!important;height:min(56vw,36svh)!important;width:100%!important}
}
@media (max-width:700px){
 html body[data-page=gallery] .gallery-opening:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){padding:96px 0 104px!important}
}

/* ---------- 2. The collection: the slice (js/project-gallery.js) ----------
   The coverflow goes: the track stands still, the covers stand in one place and hand over in cells as the rail is
   scrolled, so no neighbour stands cut by the frame as a turned glass slab (light-gallery-2..6). The cover takes the
   viewport's whole width or height, whichever is first (the viewport is the cards' container). */
html body[data-page=gallery] .gallery-scroll[data-slice] .horizontal-viewport:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){container-type:size;-webkit-mask-image:none!important;mask-image:none!important;overflow:clip!important}
html body[data-page=gallery] .gallery-scroll[data-slice] .horizontal-track:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){transform:none!important;will-change:auto!important}
html body[data-page=gallery] .gallery-scroll[data-slice] .horizontal-track>.work-card:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){transform:none!important;opacity:1!important;will-change:auto!important;flex:0 0 auto!important;width:min(100cqw,100cqh * 1.4)!important;max-width:none!important}
html body[data-page=gallery] .gallery-scroll[data-slice] .horizontal-track>.work-card .work-image:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){transform:none!important;transition:none!important}
/* the swipe (touch screens): flat cards, so the next cover shows at the edge and says «swipe»; the captions keep lanes */
html body[data-page=gallery] .gallery-scroll.chapter-swipe .horizontal-track>.work-card:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){transform:none!important}

/* the rail's heading in every mode: the title, then its own link to the archive (moved here by js/project-gallery.js) */
html body[data-page=gallery] .gallery-scene-heading>h2:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){margin:0!important;max-width:none!important}
html body[data-page=gallery] .gallery-scene-heading>.gallery-archive-link:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){display:inline-flex!important;width:max-content!important;margin:24px 0 0!important;pointer-events:auto!important}
html body[data-page=gallery] .gallery-scene-heading:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){pointer-events:auto!important}

@media (min-width:1101px){
 /* desktop: the stage is the page's grid. The heading holds columns 1-4 from the cover's top edge to its bottom edge
    (the title and the link at the top, the work's name and line at the foot); the cover takes columns 5-12. There is
    no empty band on either side of the cover any more. */
 html body[data-page=gallery] .gallery-scroll[data-slice] .gallery-stage.horizontal-stage:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-template-rows:minmax(0,1fr)!important;column-gap:2vw!important;row-gap:0!important;align-items:stretch!important;perspective:none!important}
 html body[data-page=gallery] .gallery-scroll[data-slice] .gallery-scene-heading.chapter-heading:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){grid-column:1/span 4!important;grid-row:1!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:flex-start!important;gap:0!important;padding:var(--slice-pad,0px) 0!important;min-width:0!important;min-height:0!important;width:auto!important}
 html body[data-page=gallery] .gallery-scroll[data-slice] .gallery-scene-heading>h2:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){flex:none!important}
 html body[data-page=gallery] .gallery-scroll[data-slice] .gallery-scene-heading>.gallery-archive-link:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){margin-top:32px!important}
 html body[data-page=gallery] .gallery-scroll[data-slice] .gallery-scene-heading .gal-now:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){display:block!important;margin-top:auto!important;max-width:none!important;min-width:0!important;text-align:left!important}
 html body[data-page=gallery] .gallery-scroll[data-slice] .horizontal-viewport:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){grid-column:5/span 8!important;grid-row:1!important;width:auto!important;height:auto!important;min-height:0!important;flex:none!important}
}
@media (min-width:701px) and (max-width:1100px){
 /* tablets: the heading stays above the cover; the link sits under the title, the work's name to the right */
 html body[data-page=gallery] .gallery-scroll:not(.chapter-swipe):not(.chapter-static) .gallery-scene-heading.chapter-heading:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:end!important;column-gap:24px!important;row-gap:16px!important}
 html body[data-page=gallery] .gallery-scroll:not(.chapter-swipe):not(.chapter-static) .gallery-scene-heading>h2:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){grid-column:1!important;grid-row:1!important}
 html body[data-page=gallery] .gallery-scroll:not(.chapter-swipe):not(.chapter-static) .gallery-scene-heading>.gallery-archive-link:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){grid-column:1!important;grid-row:2!important;margin:0!important}
 html body[data-page=gallery] .gallery-scroll:not(.chapter-swipe):not(.chapter-static) .gallery-scene-heading .gal-now:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){grid-column:2!important;grid-row:1/span 2!important;align-self:end!important}
}
@media (min-width:701px){
 /* the static list (reduced motion, short screens): two columns of covers with their captions, not one cover a screen */
 html body[data-page=gallery] .gallery-scroll.chapter-static .horizontal-track:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:48px 2vw!important;width:100%!important}
 html body[data-page=gallery] .gallery-scroll.chapter-static .horizontal-track>.work-card:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){width:auto!important;flex:none!important;margin:0!important}
}

/* ---------- 3. «Behind the interfaces.»: one chapter, one screen ----------
   It ran over about four screens: a sticky title, a statement filled word by word at M (the device of the About and
   home statements, repeated), then each note alone in 62 % of a screen beside a sticky logo stage, with 200-300 px of
   empty ground between a note's title and its text (light-gallery-7..10, phone 4..9). Now: the title on seven columns
   with the statement as a lead beside it, ending on the title's last line (E12); the three notes as an index, each
   row the place's mark (one ink, one width, standing on the note's first baseline), the note's line at M, its text on
   column 9 (E06: a dense column beside a short group); the two links under the text column. */
html body[data-page=gallery] .explore-practice:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){padding:128px var(--gutter,4vw) 96px!important}
html body[data-page=gallery] .explore-practice .explore-practice-intro>h2:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){position:relative!important;top:auto!important;margin:0!important;max-width:none!important}
html body[data-page=gallery] .explore-practice .explore-practice-intro>p:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){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)!important;max-width:none!important;margin:0!important}
html body[data-page=gallery] .explore-practice .explore-practice-intro>p .fw:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){color:inherit!important}
html body[data-page=gallery] .explore-practice .ep-aside:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){display:none!important}
html body[data-page=gallery] .explore-practice .explore-practice-notes>article:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){opacity:1!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;background:none!important}
html body[data-page=gallery] .explore-practice .explore-practice-notes>article:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5)::before{display:none!important;content:none!important}   /* «01», «02»: no numbering */
html body[data-page=gallery] .explore-practice .explore-practice-notes>article>h3:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){margin:0!important;max-width:none!important}
html body[data-page=gallery] .explore-practice .explore-practice-notes>article>p:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){margin:0!important;max-width:none!important;color:var(--muted)!important}
/* the places' marks in one ink and one width (the About logo wall's fault, critique «Next in line»: mixed weights) */
html body[data-page=gallery] .explore-practice .explore-practice-notes>article>.ep-mini:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){display:block!important;width:120px!important;max-width:100%!important;height:auto!important;object-fit:contain!important;object-position:left bottom!important;margin:0!important;filter:brightness(0)!important}
html[data-theme=dark] body[data-page=gallery] .explore-practice .explore-practice-notes>article>.ep-mini:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){filter:brightness(0) invert(1)!important}
html body[data-page=gallery] .explore-practice .explore-practice-links:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5)>a{margin:0!important}

@media (min-width:1101px){
 html body[data-page=gallery] .explore-practice .explore-practice-intro:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:2vw!important;row-gap:0!important;align-items:end!important;margin:0!important}
 html body[data-page=gallery] .explore-practice .explore-practice-intro>h2:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){grid-column:1/span 7!important}
 /* the lead's last baseline on the title's: the L line box ends about 13 px under its baseline, the lead's 7 px */
 html body[data-page=gallery] .explore-practice .explore-practice-intro>p:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){grid-column:8/span 5!important;margin:0 0 6px!important}
 html body[data-page=gallery] .explore-practice .explore-practice-notes:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){display:flex!important;flex-direction:column!important;gap:64px!important;margin:96px 0 0!important;padding:0!important;grid-template-columns:none!important}
 html body[data-page=gallery] .explore-practice .explore-practice-notes>article:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:2vw!important;row-gap:0!important;align-items:baseline!important;grid-column:auto!important;grid-row:auto!important;flex-direction:row!important}
 html body[data-page=gallery] .explore-practice .explore-practice-notes>article>.ep-mini:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){grid-column:1/span 2!important;grid-row:1!important}
 html body[data-page=gallery] .explore-practice .explore-practice-notes>article>h3:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){grid-column:3/span 6!important;grid-row:1!important}
 html body[data-page=gallery] .explore-practice .explore-practice-notes>article>p:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){grid-column:9/span 4!important;grid-row:1!important}
 html body[data-page=gallery] .explore-practice .explore-practice-links:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:2vw!important;row-gap:16px!important;margin:64px 0 0!important}
 html body[data-page=gallery] .explore-practice .explore-practice-links:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5)>a{grid-column:9/span 4!important;justify-self:start!important}
}
@media (max-width:1100px){
 html body[data-page=gallery] .explore-practice:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){padding:96px var(--gutter,22px) 72px!important}
 html body[data-page=gallery] .explore-practice .explore-practice-intro:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){display:block!important;margin:0!important}
 html body[data-page=gallery] .explore-practice .explore-practice-intro>p:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){margin:24px 0 0!important;max-width:34em!important}
 html body[data-page=gallery] .explore-practice .explore-practice-notes:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){display:flex!important;flex-direction:column!important;gap:48px!important;margin:64px 0 0!important;padding:0!important}
 html body[data-page=gallery] .explore-practice .explore-practice-notes>article:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){display:block!important}
 html body[data-page=gallery] .explore-practice .explore-practice-notes>article>.ep-mini:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){width:104px!important;margin:0 0 16px!important}
 html body[data-page=gallery] .explore-practice .explore-practice-notes>article>h3:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){margin:0 0 16px!important}
 html body[data-page=gallery] .explore-practice .explore-practice-links:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:16px!important;margin:48px 0 0!important}
}

/* ---------- 4. The way into the footer ----------
   «Let's make complex feel clear.» stood 350 px under the last link (the chapter's 130 px, the footer's 173 px and the
   footer's own 45 px: light-gallery-10). The footer keeps its finale stretch below the line (space-ui.css). */
html body[data-page=gallery] footer#footer:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){padding-top:64px!important}
html body[data-page=gallery] footer#footer>.footer-top:not(#_g1):not(#_g2):not(#_g3):not(#_g4):not(#_g5){padding-top:0!important}