/* /work, the index (21 Oct 2026; FILM.md §3, the work helper; js/work-index.js builds it). A typographic contents view
   beside the covers grid, after Bennett & Clive (SOTM Mar 2024) and Golden Suisse: one row per case, the name a display
   line in the display face, the card's own line and its year hanging on the 12-column grid's lines, the cover developing
   from glyphs on a plate beside the list. Rows hold by baseline and air alone: no rules, no numbers. «Index» and «Covers»
   switch the sheet between the two views, one line of text in the tools line.
   Scoped to body[data-page=work]; one empty id test (#_wi) beside the sheet's own (#_u) outranks the override layers. */

/* ---------- where /work#sheet lands (22 Oct, jury F4): below the frame's tabs ---------- */
/* the tabs stand 18-58 px down the view with their 6 px rim; at the sheet's own top the «All» chip lay under the brand
   tab and «Index · Covers» under the controls. The dive (js/work-dive.js) and a plain #sheet link both stop this far
   above the sheet. Phones keep the navigation's tab at the bottom, but the brand's tab and the controls' tab stand at
   the top down to 52 px (8 px frame, 4 px rim, 36 px controls, 4 px rim): at the sheet's 16 px padding the «All» chip lay
   under the brand and the pills between the two tabs (the phone probe, 390 x 844), and a 60 px stop showed the cut last
   line of the lede between the tabs. So on phones the sheet lands at the top and its own paper clears the tabs: 72 px
   above the chips, 20 px under the tabs */
html body[data-page=work] #sheet:not(#_u):not(#_wi){scroll-margin-top:72px}
@media (max-width:700px){html body[data-page=work] #sheet:not(#_u):not(#_wi){scroll-margin-top:0;padding-top:72px}}

/* ---------- the switch: «Index» and «Covers», text in the filters' line, the current one in ink ---------- */
html body[data-page=work] .work-sheet .work-view:not(#_u):not(#_wi){display:flex;align-items:center;gap:20px;margin:0 0 0 auto;padding:0;flex:none}
html body[data-page=work] .work-sheet .work-view[hidden]:not(#_u):not(#_wi){display:none}
html body[data-page=work] .work-sheet .work-view:not(#_u):not(#_wi)>button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;min-height:44px;padding:0;cursor:pointer;
 font-family:var(--t-text,Basel,Arial,sans-serif);font-size:13px;line-height:1.2;letter-spacing:0;color:var(--cool-muted,#585b61);transition:color .25s cubic-bezier(.16,1,.3,1)}
html body[data-page=work] .work-sheet .work-view:not(#_u):not(#_wi)>button[aria-pressed=true]{color:var(--cool-ink,#000)}
@media (hover:hover) and (pointer:fine){html body[data-page=work] .work-sheet .work-view:not(#_u):not(#_wi)>button:hover{color:var(--cool-ink,#000)}}
html body[data-page=work] .work-sheet .work-view:not(#_u):not(#_wi)>button:focus-visible{outline:2px solid var(--cool-ink,#000);outline-offset:3px}

/* ---------- the index view: the grid steps out of the flow, the index stands in its place ----------
   The grid keeps its place at zero height instead of display:none: the world's triggers that anchor on its top (the
   camera's turn, the airy page's dusk) keep their positions, and its lazy covers stay clipped, so none of them loads */
html body[data-page=work] .work-sheet[data-view=index] #cardContainer.work-grid:not(#_u):not(#_wi){height:0!important;min-height:0!important;overflow:hidden!important;visibility:hidden!important;margin:0!important;padding:0!important}
html body[data-page=work] .work-sheet .work-index[hidden]:not(#_wi){display:none!important}

/* the second group, «More work.» (the owner, 21 Oct: «Клиенты сверху»; 22 Oct: no case is called a concept anywhere):
   in the covers grid a title across the three columns, display L, a pause above it */
html body[data-page=work] .work-sheet #cardContainer>.work-group:not(#_u):not(#_wi){grid-column:1/-1;margin:clamp(40px,5vw,88px) 0 clamp(-8px,-.4vw,0px);padding:0;
 font-family:var(--t-display,'Archivo Lens',Basel,serif);font-weight:400;font-size:var(--t-l,96px);line-height:.95;letter-spacing:var(--t-track-l,-.012em);font-synthesis:none;text-wrap:balance;color:var(--cool-ink,#000)}
html body[data-page=work] .work-sheet #cardContainer>.work-group[hidden]:not(#_u):not(#_wi){display:none!important}

/* ---------- the index: the page's 12 columns (js sets the padding and the gap from the heading's own grid, so the
   names hang on the line of «Selected work.» and the plate on the line of its note, column 10) ---------- */
html body[data-page=work] .work-sheet .work-index:not(#_wi){--wi-gap:2vw;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--wi-gap);
 padding:0 var(--wi-pr,0px) 0 var(--wi-pl,0px);margin:0;color:var(--cool-ink,#000)}
html body[data-page=work] .work-sheet .work-index .wi-lists:not(#_wi){grid-column:1/10;grid-row:1;min-width:0}
html body[data-page=work] .work-sheet .work-index .wi-list:not(#_wi){margin:0;padding:0;list-style:none}
html body[data-page=work] .work-sheet .work-index .wi-item[hidden]:not(#_wi){display:none!important}

/* a row: the name over columns 1-5, the line over 6-8, the year on 9, all on the name's first baseline */
html body[data-page=work] .work-sheet .work-index .wi-row:not(#_wi){display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--wi-gap);align-items:baseline;
 padding:clamp(10px,1vw,16px) 0 clamp(12px,1.15vw,18px);margin:0;color:inherit;text-decoration:none;background:none;border:0;border-radius:2px;-webkit-tap-highlight-color:transparent}
html body[data-page=work] .work-sheet .work-index .wi-name:not(#_wi){grid-column:1/6;margin:0;padding:0;min-width:0;
 font-family:var(--t-display,'Archivo Lens',Basel,serif)!important;font-weight:400!important;font-style:normal;font-size:var(--t-m,64px)!important;line-height:1.02!important;
 letter-spacing:var(--t-track-m,-.01em)!important;font-synthesis:none;font-kerning:normal;text-wrap:balance;color:inherit!important;text-transform:none}
html body[data-page=work] .work-sheet .work-index :is(.wi-what,.wi-year):not(#_wi){margin:0;padding:0;font-family:var(--t-text,Basel,Arial,sans-serif);font-size:var(--t-small,14px);line-height:1.4;letter-spacing:0;color:var(--cool-muted,#585b61)}
html body[data-page=work] .work-sheet .work-index .wi-what:not(#_wi){grid-column:6/9;max-width:34em;text-wrap:pretty}
html body[data-page=work] .work-sheet .work-index .wi-year:not(#_wi){grid-column:9/10;font-variant-numeric:tabular-nums;white-space:nowrap}
html body[data-page=work] .work-sheet .work-index .wi-row:focus-visible:not(#_wi){outline:2px solid var(--cool-ink,#000);outline-offset:3px}

/* the second group's title in the index: display L on column 1, a pause above it */
html body[data-page=work] .work-sheet .work-index .wi-group:not(#_wi){margin:clamp(56px,6vw,104px) 0 clamp(8px,1vw,16px);padding:0;
 font-family:var(--t-display,'Archivo Lens',Basel,serif)!important;font-weight:400!important;font-size:var(--t-l,96px)!important;line-height:.95!important;
 letter-spacing:var(--t-track-l,-.012em)!important;font-synthesis:none;text-wrap:balance;color:inherit!important}
html body[data-page=work] .work-sheet .work-index .wi-group[hidden]:not(#_wi){display:none!important}

/* the plate: the cover in the cards' own 888:1010 frame on columns 10-12, held in the middle of the window while the
   list passes it (js sets --wi-ph, its height); one cover at a time, developing from glyphs (js/glyph-develop.js) */
html body[data-page=work] .work-sheet .work-index .wi-plate:not(#_wi){grid-column:10/13;grid-row:1;align-self:start;position:sticky;top:max(var(--wi-top,112px),calc(50svh - var(--wi-ph,352px) / 2));
 aspect-ratio:888/1010;margin:clamp(10px,1vw,16px) 0 0;border-radius:10px;overflow:hidden;isolation:isolate;background:var(--cool-chip,#eceff5);pointer-events:none}
html body[data-page=work] .work-sheet .work-index .wi-plate.is-empty:not(#_wi){background:none}
/* two layers: the cover that shows, and the next one, developing over it (the newer one is always the last child) */
html body[data-page=work] .work-sheet .work-index .wi-plate>img:not(#_wi){position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;margin:0;border-radius:0;transform:none}
html body[data-page=work] .work-sheet .work-index .wi-plate>img:not([src]):not(#_wi){visibility:hidden}
/* PhishPhinder's cover is near white: by day it multiplies onto the chip grey, as its card does (css/fix-work-20261021.css) */
html:not([data-theme=dark]) body[data-page=work] .work-index :is(.wi-plate>img,.wi-ghost>img)[data-case=phishphinder]:not(#_wi){mix-blend-mode:multiply}

/* the portal's hook (js/project-portal.js lifts .work-image img): a click leaves a still twin of the plate inside the row */
html body[data-page=work] .work-index .wi-ghost:not(#_wi){display:block;isolation:isolate;box-shadow:none;transform:none}
html body[data-page=work] .work-index .wi-ghost>img:not(#_wi){position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;margin:0;border-radius:0;transform:none}

/* rows wait for their entrance (js: once, as they come into view, 50 ms apart in reading order, on the clear curve).
   The entrance moves the list item and the hand's dim moves the link inside it, so the two never fight over one opacity */
html body[data-page=work] .work-sheet .work-index.wi-armed :is(.wi-item,.wi-group):not(.wi-in):not(#_wi){opacity:0}

/* the hand: the other rows step back to .35 while one is under the pointer (250 ms in, 500 ms back, as the cards) */
@media (hover:hover) and (pointer:fine){
 html body[data-page=work] .work-sheet .work-index .wi-row:not(#_wi){transition:opacity 500ms cubic-bezier(.25,.46,.45,.94)}
 html body[data-page=work] .work-sheet .work-index.wi-dim .wi-row:not(.wi-hot):not(#_wi){opacity:.35;transition-duration:250ms}
}

/* 701-1100 px: the page has no 12 columns here; the index keeps them inside the sheet, the plate on the last four */
@media (min-width:701px) and (max-width:1100px){
 html body[data-page=work] .work-sheet .work-index .wi-lists:not(#_wi){grid-column:1/9}
 html body[data-page=work] .work-sheet .work-index .wi-row:not(#_wi){grid-template-columns:repeat(8,minmax(0,1fr))}
 html body[data-page=work] .work-sheet .work-index .wi-name:not(#_wi){grid-column:1/5}
 html body[data-page=work] .work-sheet .work-index .wi-what:not(#_wi){grid-column:5/8}
 html body[data-page=work] .work-sheet .work-index .wi-year:not(#_wi){grid-column:8/9}
 html body[data-page=work] .work-sheet .work-index .wi-plate:not(#_wi){grid-column:9/13}
}

/* phones: a plain list, no plate; the year on the name's first baseline, the line under the name */
@media (max-width:700px){
 html body[data-page=work] .work-sheet .work-index:not(#_wi){display:block;padding:0}
 html body[data-page=work] .work-sheet .work-index .wi-plate:not(#_wi){display:none}
 html body[data-page=work] .work-sheet .work-index .wi-row:not(#_wi){grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:4px;padding:12px 0 14px;min-height:44px}
 html body[data-page=work] .work-sheet .work-index .wi-name:not(#_wi){grid-column:1;grid-row:1}
 html body[data-page=work] .work-sheet .work-index .wi-year:not(#_wi){grid-column:2;grid-row:1}
 html body[data-page=work] .work-sheet .work-index .wi-what:not(#_wi){grid-column:1/-1;grid-row:2;font-size:14px}
 html body[data-page=work] .work-sheet .work-index .wi-group:not(#_wi){margin:56px 0 4px}
 html body[data-page=work] .work-sheet #cardContainer>.work-group:not(#_u):not(#_wi){margin:24px 0 -8px}
}

/* ---------- the opening on phones (22 Oct, eye sweep at 390): the filters start below the fold ----------
   Without the world the heading carries the cover ring (portfolio-polish-v54.css), and the chips came 74 px above the
   view's foot: under the navigation's bottom tab at 390×844 and 360×780, a sliver below it at 390×750, clear only on
   shorter and taller phones. The heading now holds at least the view less the section's top (145 px), its own foot
   (27 px) and the sheet's top (72 px), plus 16 px, so on every phone the chips start just under the fold and come with
   the first scroll; the spare height stays under the lede. The live room keeps its short heading (chips at 435 px). */
@media (max-width:700px){
 html[data-room=work]:not(.room-live):not([data-space-why=webgl]) body[data-page=work] #projects>.section-heading:not(#_wi),
 html:not(.room-live) body[data-page=work] #projects>.section-heading.has-cover-ring:not(#_wi){min-height:calc(100svh - 228px)!important}
}

@media (prefers-reduced-motion:reduce){
 html body[data-page=work] .work-sheet .work-index .wi-row:not(#_wi),html body[data-page=work] .work-sheet .work-view:not(#_u):not(#_wi)>button{transition:none}
}