/* Work after Fourmeta (18 Oct 2026). The owner: «видишь как они обложки кейсам делают… какая-то картинка или мокап
 * лаконичный, это можно в ворке нам так делать».
 * fourmeta.com/projects, measured at 1440: three columns of 444×505 px covers, 14 px gaps, 40 px margins, the name at 15 px
 * over the tags at 13 px in grey. Here the filters, the grid and "View all" are one white sheet that rises over the world
 * (the white panel system); the title stays in the world above it. The paper is white in both themes.
 * Covers: images/work-covers/ (tools/cover-lab/crops/auto-covers.py, marks/cover.html). */
html body[data-page=work] .work-sheet{position:relative;z-index:2;background:#fff;color:#000000;border-radius:16px;margin:0 calc(clamp(8px,1vw,14px) - var(--gutter,0px)) clamp(8px,1vw,14px);   /* the section pads by --gutter: the sheet stands 8–14 px from the viewport's edges */
 padding:clamp(16px,1.8vw,26px) clamp(16px,1.8vw,26px) 56px}
html body[data-page=work] .work-sheet .work-tools:not(#_u){display:flex!important;justify-content:space-between;align-items:center;gap:16px;margin:0 0 clamp(18px,2vw,28px)!important;padding:0!important;background:none!important;position:static!important}
html body[data-page=work] .work-sheet .filters:not(#_u){display:flex!important;flex-wrap:wrap;gap:6px;width:auto!important;padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body[data-page=work] .work-sheet .filters:not(#_u)::before,html body[data-page=work] .work-sheet .filters:not(#_u)::after{content:none!important}
html body[data-page=work] .work-sheet .filters:not(#_u)>button{flex:none!important;min-height:0!important;height:auto!important;padding:8px 14px!important;border:0!important;border-radius:999px!important;background:#eef1f7!important;color:#000000!important;font-size:13px!important;line-height:1.2!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:background .25s cubic-bezier(.16,1,.3,1),color .25s cubic-bezier(.16,1,.3,1)}
html body[data-page=work] .work-sheet .filters:not(#_u)>button::before,html body[data-page=work] .work-sheet .filters:not(#_u)>button::after{content:none!important}
html body[data-page=work] .work-sheet .filters:not(#_u)>button:hover{background:#e4e7ed!important}
html body[data-page=work] .work-sheet .filters:not(#_u)>button[aria-pressed=true]{background:#000000!important;color:#fff!important}
/* touch: the 34 px pills take a 44 px tap area, 5 px above and below and 3 px into the 6 px gaps, so no pill's area
   reaches a neighbour (QA S13's rule); unpainted: redesign.css:88 still gives this ::after its 2 px ink underline
   (devices, 22 Oct) */
@media (max-width:700px),(pointer:coarse){html body[data-page=work] .work-sheet .filters:not(#_u):not(#_v)>button{position:relative!important}html body[data-page=work] .work-sheet .filters:not(#_u):not(#_v)>button::after{content:""!important;position:absolute;inset:-5px -3px;display:block;height:auto;background:none;transform:none;transition:none}}
/* under 360 px the pills wrap to two rows: 10 px between them (22 Oct, round 3; it was 6 px with the areas cut to 2 px
   there), so each pill keeps its 44 px area and the rows' areas meet without overlapping */
@media (max-width:359px){html body[data-page=work] .work-sheet .filters:not(#_u):not(#_v){row-gap:10px!important}}
html body[data-page=work] .work-sheet .work-total:not(#_u){font-size:13px!important;color:#707379!important}
html body[data-page=work] .work-sheet #cardContainer.work-grid:not(#_u){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:40px 14px!important;columns:auto!important;padding:0!important;margin:0!important;width:auto!important;max-width:none!important;transform:none!important}
html body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n):not(#_u){display:block!important;position:relative!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;grid-column:auto!important;color:#000000!important;background:none!important}
html body[data-page=work] .work-sheet #cardContainer .work-card[hidden]:not(#_u){display:none!important}
html body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n) .work-image:not(#_u){position:relative!important;aspect-ratio:444/505!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;border-radius:10px!important;overflow:hidden!important;background:#eceff5!important;box-shadow:none!important}
html body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n) .work-image:not(#_u)>img{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;object-fit:cover!important;border-radius:0!important;transform:none;transition:transform .9s cubic-bezier(.16,1,.3,1)}
@media (hover:hover) and (pointer:fine){html body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n):hover .work-image:not(#_u)>img{transform:scale(1.03)}}
html body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n) .work-caption:not(#_u){position:static!important;display:flex!important;flex-direction:row!important;align-items:baseline!important;justify-content:space-between!important;gap:12px;width:auto!important;margin:12px 0 0!important;padding:0!important;color:#000000!important;background:none!important}
html body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n) .work-caption:not(#_u) h3{margin:0!important;font-size:15px!important;line-height:1.3!important;letter-spacing:0!important;font-weight:400!important;color:#000000!important}
html body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n) .work-caption:not(#_u)>span{font-size:13px!important;color:#707379!important}
html body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n):not(#_u)>p{position:static!important;width:auto!important;margin:2px 0 0!important;font-size:13px!important;line-height:1.35!important;color:#707379!important}
html body[data-page=work] .work-sheet .work-more:not(#_u){margin:48px 0 0!important;display:flex;justify-content:center}
@media (max-width:900px){html body[data-page=work] .work-sheet #cardContainer.work-grid:not(#_u){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:32px 10px!important}}
@media (max-width:560px){html body[data-page=work] .work-sheet #cardContainer.work-grid:not(#_u){grid-template-columns:1fr!important;gap:32px!important}html body[data-page=work] .work-sheet .work-tools:not(#_u){flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){html body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n) .work-image:not(#_u)>img{transition:none}}
/* by night the sheet inverts: black paper, white ink (owner, 19 Oct) */
html[data-theme=dark] body[data-page=work] .work-sheet{background:#000000;color:#fff}
html[data-theme=dark] body[data-page=work] .work-sheet .filters:not(#_u)>button{background:#181b21!important;color:#fff!important}
html[data-theme=dark] body[data-page=work] .work-sheet .filters:not(#_u)>button:hover{background:#22252b!important}
html[data-theme=dark] body[data-page=work] .work-sheet .filters:not(#_u)>button[aria-pressed=true]{background:#fff!important;color:#000000!important}
html[data-theme=dark] body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n):not(#_u){color:#fff!important}
html[data-theme=dark] body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n) .work-caption:not(#_u),html[data-theme=dark] body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n) .work-caption:not(#_u) h3{color:#fff!important}
html[data-theme=dark] body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n) .work-caption:not(#_u)>span,html[data-theme=dark] body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n):not(#_u)>p,html[data-theme=dark] body[data-page=work] .work-sheet .work-total:not(#_u){color:#888b91!important}
html[data-theme=dark] body[data-page=work] .work-sheet #cardContainer .work-card:nth-child(n) .work-image:not(#_u){background:#181b21!important}
/* the sheet rises through a stepped block edge (js/block-wipe.js, after paulkalkbrenner.net): a straight top, no radius */
html body[data-page=work] .work-sheet[data-block-edge]{border-top-left-radius:0;border-top-right-radius:0}
/* the edge's band stands above the sheet, where the heading's lede sits on phones: the heading stays over the band, so
   the blocks rise behind the words and never cut them (20 Oct: «Digital products…» printed with holes at 390) */
html body[data-page=work] #projects .section-heading:not(#_u){position:relative;z-index:3}   /* the sheet is z 2 */

/* -72 (23 Oct; the visual jury, /work 1440-10: «the grid runs on a 38 px margin while the title and the rest of the site
   use 58 px», and at 390 the cards' 24 px edge was one of the phone's seven left edges): the sheet keeps its place by the
   frame (its edge is the frame line, 12 px, 8 on phones) and its inner edge now meets the page's gutter, so the filters, the covers and the title share one margin
   (57.4 at 1440, 22 at 390). */
html body[data-page=work] .work-sheet:not(#_u){padding-left:calc(var(--gutter,22px) - var(--frame,12px));padding-right:calc(var(--gutter,22px) - var(--frame,12px))}
/* -72 (23 Oct): under reduced motion «Selected work.» printed as «Se / wo» (live on -71 too): the title's box is one grid
   column (84 px at 1440) and the words overflow it visibly, but the reduced-motion reveal wraps each line in a
   .text-mask that clips to that box. Each line's mask now takes the line's own width. */
html body[data-page=work] main h1 .text-mask:not(#_u){width:max-content}