/* -74 /work (the coordinator, 27 Oct 2026): the v6f cards (L4, LOCKED-BY-OLYA: «мне вот такие именно карточки нравились»)
   with S76's view switch (L4 addendum, S91: 3 per row by default, 4 per row, a horizontal strip; under 700 px 1, 2 and a
   swipe) on all 67 cases. Ported from the visual designer's comp spec-visual/_work/sys/work.css v14 (NOTE-S76 «For the
   coordinator»): the comp's tokens map to site74's here (the wall's ink and ground are chapter-ground's --cool-ink and
   --cool-ground; the panel radius 16, the image radius 10); every rule sits under #projects so the old grid's sheets
   (redesign.css, work-10.css) do not reach the cards. The prints: js/work-cards-74.js; the switch: js/work-view.js */
body[data-page=work]{--on:var(--cool-ink);--gt:var(--cool-ground);--wall:var(--cool-ground);--wall-on:var(--cool-ink);--r-panel:16px;
 --t-lead:clamp(19px,calc(.476vw + 17.14px),24px)}
/* the CD (27 Oct ~08:08Z, B9): grey labels on the wall take the wall's own cool ink (6.1:1 by day, 6.6:1 by night) */
body[data-page=work]{--cool-muted:#353230}
[data-theme=dark] body[data-page=work]{--cool-muted:#aabdd1}
#projects .gw-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#projects .gw-grid[data-view="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
/* «More work.»: the group's title keeps its place, a row across the grid; the strip and a filter leave it out */
#projects .gw-group{grid-column:1/-1;list-style:none;margin:48px 0 8px}
#projects .gw-group h2{margin:0}
#projects .gw-grid[data-view=strip] .gw-group{display:none}
#projects .gw-card[hidden],#projects .gw-group[hidden]{display:none}
/* L4: the print on its field inset 6 px in the plate of its ground (the panel radius), the year in the plate's tab, the
   title, the mono line and the cover small; ONE-SYSTEM rule 4b: the card is the inset block, so no copy sits on a print */
#projects .gw-card{display:flex;--plate:color-mix(in oklab,var(--g) 34%,#f7f5f1)}
#projects .gw-card a{flex:1 1 auto;display:flex;flex-direction:column;background:var(--plate);color:var(--ink);border-radius:var(--r-panel);
 padding:6px;outline:none;text-decoration:none}
#projects .gw-card a:focus-visible{box-shadow:0 0 0 2px var(--wall),0 0 0 4px var(--wall-on)}
/* each card's set: its ground's day value and v3 day inks, the field the ground's saturated night (decision 12), the
   plate the ground in paper; a card keeps its day values by night (decision 14) */
.gw-card[data-ground=peri]{--g:#a89af4;--f:#263164;--ink:#231f42;--r1:#9b74d9;--r2:#6456cb;--r3:#233aae;--dot:#e9c9ee}
.gw-card[data-ground=saff]{--g:#f0b840;--f:#02315b;--ink:#2f2101;--r1:#ef941a;--r2:#df6400;--r3:#ca3517;--dot:#f7eab5}
.gw-card[data-ground=coral]{--g:#f38781;--f:#5f0b39;--ink:#401615;--r1:#e25a63;--r2:#c42a5b;--r3:#951357;--dot:#f9d3c0}
.gw-card[data-ground=lime]{--g:#d6e673;--f:#024a50;--ink:#222600;--r1:#95d04a;--r2:#30a75e;--r3:#007c60;--dot:#f7f7c9}
.gw-card[data-ground=violet]{--g:#c385ce;--f:#412451;--ink:#331a38;--r1:#a85ebf;--r2:#7845b3;--r3:#44339a;--dot:#efc4de}
.gw-card[data-ground=mist]{--g:#4bac8a;--f:#0d3a27;--ink:#012a1d;--r1:#228f79;--r2:#006f6d;--r3:#004f5e;--dot:#bee0c6}
/* S65 Бізнес захист: the board's own set (its green the ground, its black the field) */
.gw-card[data-ground=bz]{--g:#219653;--f:#080808;--ink:#080808;--r1:#90c59f;--r2:#217643;--r3:#1d4f2f;--dot:#dbecdf}
#projects .gw-field{position:relative;aspect-ratio:888/1010;border-radius:var(--r-image,10px);background:var(--f);overflow:hidden}
#projects .gw-field canvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;transition:opacity .26s cubic-bezier(.23,1,.32,1)}
#projects .gw-grid.is-moving .gw-field canvas{opacity:0;transition-duration:.14s}
@media (prefers-reduced-motion:reduce){#projects .gw-field canvas{transition:none}}
/* the year in the plate's tab, cut into the field's corner, joined by inverse corners (v6f) */
#projects .gw-year{position:absolute;left:0;top:0;z-index:1;background:var(--plate);color:var(--ink);font:400 14px/1 var(--t-mono);
 padding:4px 12px 9px 4px;border-bottom-right-radius:var(--r-image,10px)}
#projects .gw-year::before,#projects .gw-year::after{content:'';position:absolute;width:var(--r-image,10px);height:var(--r-image,10px);
 background:radial-gradient(circle at 100% 100%,transparent calc(var(--r-image,10px) - .5px),var(--plate) var(--r-image,10px))}
#projects .gw-year::before{left:100%;top:0}
#projects .gw-year::after{left:0;top:100%}
/* (3 Nov, sweep home-work-06) the tab covers the field's top-left corner, so the field is square there: its rounded,
   antialiased edge drew a hairline arc through every card's year tab */
#projects .gw-field{border-top-left-radius:0}
#projects .gw-plate{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 6px 8px}
#projects .gw-plate h2,#projects .gw-plate h3{margin:0 0 8px;font:540 var(--t-lead)/1 var(--t-display);font-stretch:98%;letter-spacing:var(--t-track);color:var(--ink)}
/* -74 (R1 S138, 28 Oct): balance, not pretty: pretty kept a lone word on a two-line plate («redesign», «collaboration») */
#projects .gw-plate p{margin:0;font:400 14px/1.35 var(--t-mono);color:color-mix(in srgb,var(--ink) 80%,var(--plate));text-wrap:balance}
#projects .gw-plate img{flex:none;width:40px;height:auto;border-radius:4px;display:block}
/* the strip: cinema size, the field fills the window under the head, the plate and the bar; from 700 px landscape on
   each cover's own 16x10 cut (gwSource in work.html), at most 1000 px across, the next card half in view */
#projects .gw-grid[data-view=strip]{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab}
#projects .gw-grid[data-view=strip]::-webkit-scrollbar{display:none}
#projects .gw-grid[data-view=strip].is-dragging{cursor:grabbing;scroll-snap-type:none}
#projects .gw-grid[data-view=strip] .gw-card{flex:0 0 auto;width:max(280px,calc((100svh - 300px) * 888 / 1010 + 12px));scroll-snap-align:start}
@media (min-width:700px){
 #projects .gw-grid[data-view=strip] .gw-card{width:clamp(280px,min(calc((100svh - 300px) * 1.6 + 12px),86vw),1012px)}
 #projects .gw-grid[data-view=strip] .gw-card:not([data-no16]) .gw-field{aspect-ratio:16/10}
}
#projects .gw-grid[data-view=strip] a{-webkit-user-drag:none;user-select:none}
/* the strip's bar: the share of the row in view and its place (real state, work-view.js) */
#projects .gw-progress{display:none;height:2px;margin:20px 0 0;background:color-mix(in srgb,var(--on) 18%,transparent);border-radius:1px;overflow:hidden}
#projects .gw-grid[data-view=strip] ~ .gw-progress{display:block}
#projects .gw-progress span{display:block;height:100%;width:30%;background:var(--on);border-radius:1px}
/* the switch at the tools row's right, after the filters and the count (NOTE-S76): three of the frame's round glyph
   buttons, the pressed one solid in the wall's ink; named, no labels on screen. The count sits by the switch */
#projects .work-tools .work-total{margin-left:auto}
#projects .gw-view{display:flex;gap:2px;margin:-4px -6px -4px 16px}
#projects .gw-view button{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;padding:0;background:transparent;color:var(--cool-muted);cursor:pointer;
 transition:background-color 200ms cubic-bezier(.23,1,.32,1),color 200ms cubic-bezier(.23,1,.32,1)}
#projects .gw-view svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
#projects .gw-view button:is(:hover,:focus-visible){background:color-mix(in srgb,var(--on) 12%,transparent)}
#projects .gw-view button[aria-pressed=true]{background:var(--on);color:var(--gt)}
#projects .gw-view button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--wall),0 0 0 4px var(--wall-on)}
#projects .gw-view button:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){#projects .gw-view button{transition:none}}
/* (opus-run11; Codex's actual b-work-settled at 1052: two covers 460 px wide filled the landing, the first row taller than
   the view) «3 per row» keeps three down to 900 px, the locked v6f card unchanged; two only under 900 */
@media (max-width:899px){
 #projects .gw-grid,#projects .gw-grid[data-view="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
 #projects .gw-grid[data-view="4"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:900px) and (max-width:1100px){
 #projects .gw-grid[data-view="4"]{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
 #projects .gw-grid[data-view="4"] .gw-plate{padding:12px 4px 6px}
}
@media (max-width:699px){
 #projects .gw-grid,#projects .gw-grid[data-view="3"]{grid-template-columns:1fr;gap:10px}
 /* two columns: the plate keeps the title and the line, the small cover goes */
 #projects .gw-grid[data-view="4"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #projects .gw-grid[data-view="4"] .gw-plate{padding:10px 4px 6px}
 #projects .gw-grid[data-view="4"] .gw-plate img{display:none}
 #projects .gw-grid[data-view=strip]{gap:10px;margin:0 calc(-1 * var(--gutter,22px));padding:0 var(--gutter,22px);scroll-padding-inline:var(--gutter,22px)}
 #projects .gw-grid[data-view=strip] .gw-card{width:82vw}
 /* the tools row (the count is hidden here): the filters, the switch at the row's right as at every width; on a phone
    too narrow for both (under ~370 px) the switch wraps under the filters, still at the right. The sheet's own rule
    (work-fourmeta.css, under 560 px: a column) is matched in weight and comes earlier */
 html body[data-page=work] .work-sheet .work-tools:not(#_u){flex-direction:row;flex-wrap:wrap;align-items:center;row-gap:8px}
 #projects .gw-view{margin-left:auto}
}

/* run 9 (1 Nov 2026; the owner on /work li.gw-card:nth-of-type(5), oasis-atomone: «this small secondary image can be
   removed»; the review: «redundant 40px secondary thumbnail still there»). Every card's plate repeated its own cover at
   40 px beside the name while the field above prints the same work (js/work-cards-74.js draws the field from its own
   sources, never from this image), so the thumbnail goes on every card, not only the fifth: the plate is the name and the
   line. The markup stays (alt="", lazy: hidden, it is never fetched); /hire's cards keep their own rules (css/hire74.css) */
body[data-page=work] #projects .gw-plate img{display:none}

/* (opus-run11b, 1 Nov 2026; the owner's addendum #15 on /hire's footer, the same build here) the footer is /work's family
   from its own top edge: the band the card sheet above already wears (css/ground-74.css), so the dawn layer's dissolving top
   meets its own colour and the world's ground never shows in a strip between the sheet and the footer */
html.ground body[data-page=work] #footer:not(#_r11b){background:var(--cool-band,var(--cool-ground)) 50% 0/100% 100% no-repeat}