/* Work listing + case study template.
   Loads AFTER blog.css and leans on it: work pages are .bl-page bodies, so they
   inherit the light/dark tokens, masthead sheet, band hero, utility bar, article
   type styles, CTA and "more" rows for free. Unlike a blog post there's NO sticky
   sidebar — the article is centred, project facts run as a horizontal credits
   strip, and media breaks out symmetrically to the wrap width. All wk- prefixed. */

/* (Page transitions live in css/transitions.css — a site-wide quick fade.
   The old per-project photo morph was stripped during the landing redesign.) */

/* ---- listing: big editorial spreads, NOT the blog's compact text rows and NOT
   a card grid (Jake's rule: no busy card grids). Each project is a full-width
   row with the photography owning half of it, alternating sides for rhythm.
   Hairlines and accents work like everywhere else on the site. ---- */
.wk-client{font-family:'IBM Plex Mono',monospace;font-size:0.8125rem;color:var(--pg-fg-2)}
.wk-list{padding-bottom:12px}
.wk-item{--en-acc:var(--acc,var(--pg-accent));--en-acc-lg:var(--acc,var(--pg-accent));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);
  gap:clamp(28px,4.5vw,64px);align-items:center;
  padding:clamp(36px,5vw,56px) 0;border-top:1px solid var(--pg-line);
  text-decoration:none}
[data-theme="light"] .bl-page .wk-item{--en-acc:var(--acc-aa,var(--pg-accent));--en-acc-lg:var(--acc-lg,var(--acc-aa,var(--pg-accent)))}
.wk-item[hidden]{display:none}
.wk-list .wk-item:first-child{border-top:0}
/* every other spread flips, so the page zig-zags down instead of listing —
   the featured spread above leads media-LEFT, so the list starts media-right */
.wk-item .wk-item-media{order:2}
.wk-item:nth-child(even){grid-template-columns:minmax(0,46%) minmax(0,1fr)}
.wk-item:nth-child(even) .wk-item-media{order:0}
.wk-item-media{border-radius:18px;overflow:hidden;background:var(--pg-card);
  aspect-ratio:16/11}
.wk-item-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.wk-item:hover .wk-item-media img{transform:scale(1.03)}
.wk-item .bl-rowmeta{flex-direction:row;align-items:center;gap:14px}
.wk-item h2{font-family:var(--sans);font-weight:700;font-size:clamp(1.625rem,3.2vw,2.5rem);
  letter-spacing:-0.02em;line-height:1.08;margin:16px 0 0;transition:color .2s}
.wk-item:hover h2{color:var(--en-acc-lg)}
.wk-item .bl-excerpt{margin:14px 0 0;font-size:1rem;line-height:1.55;
  color:var(--pg-fg-2);max-width:52ch}
/* quiet standing link that wakes on row hover, arrow and all */
.wk-item-go{display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-family:'IBM Plex Mono',monospace;font-size:0.8125rem;color:var(--pg-fg-2);
  transition:color .2s}
.wk-item-go svg{width:14px;height:14px;transform:translateX(-4px);opacity:.5;
  transition:transform .2s,opacity .2s}
.wk-item:hover .wk-item-go{color:var(--en-acc)}
.wk-item:hover .wk-item-go svg{transform:none;opacity:1}
.wk-item:focus-visible{outline:2px solid var(--en-acc);outline-offset:4px;border-radius:18px}

/* ---- full index: after the feature and the selected spreads, the rest of the
   catalogue runs as a dense reading list — client, project, disciplines, one
   hairline per row. Photography had its say above; from here density wins.
   Rows carry data-cats like everything else so the chips filter them; work.js
   layers page windows (10 rows a page) on top. ---- */
.wk-index{margin-top:64px;scroll-margin-top:110px}
.wk-index-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;margin-bottom:6px}
.wk-index-count{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;color:var(--pg-fg-2)}
.wk-rows{border-bottom:1px solid var(--pg-line)}
.wk-row{display:grid;grid-template-columns:96px 190px minmax(0,1fr) 180px 16px;
  gap:8px 26px;align-items:center;padding:14px 0;
  border-top:1px solid var(--pg-line);text-decoration:none;color:inherit}
.wk-row[hidden]{display:none}
/* a passport photo, not a spread: enough to recognise the project by */
.wk-row-thumb{display:block;width:96px;aspect-ratio:16/11;border-radius:12px;
  overflow:hidden;background:var(--pg-card)}
.wk-row-thumb img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease}
.wk-row:hover .wk-row-thumb img{transform:scale(1.06)}
.wk-row-title{font-family:var(--sans);font-weight:700;font-size:1.1875rem;line-height:1.3;
  transition:color .2s}
.wk-row:hover .wk-row-title{color:var(--pg-accent-lg,var(--pg-accent))}
.wk-row-cats{font-family:'IBM Plex Mono',monospace;font-size:0.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--pg-fg-2);text-align:right;white-space:nowrap}
.wk-row svg{width:14px;height:14px;align-self:center;color:var(--pg-accent);
  opacity:0;transform:translateX(-5px);transition:opacity .2s,transform .2s}
.wk-row:hover svg{opacity:1;transform:none}
.wk-row:focus-visible{outline:2px solid var(--pg-accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .wk-row svg{transition:none;transform:none}
  .wk-row-thumb img{transition:none}
  .wk-row:hover .wk-row-thumb img{transform:none}
}
@media(max-width:820px){
  .wk-row{grid-template-columns:76px minmax(0,1fr) auto;gap:5px 16px;align-items:center}
  .wk-row .wk-row-thumb{grid-row:1/3;grid-column:1;width:76px;align-self:center}
  .wk-row .wk-client{grid-row:1;grid-column:2}
  .wk-row .wk-row-cats{grid-row:1;grid-column:3}
  .wk-row .wk-row-title{grid-row:2;grid-column:2/-1;font-size:1.125rem}
  .wk-row svg{display:none}
}

/* pagination: chip-shaped page buttons (bl-chip carries the look), centred
   under the index. work.js builds the buttons and windows the rows. */
.wk-pages{display:flex;justify-content:center;align-items:center;gap:8px;
  padding:30px 0 4px}
.wk-pages .bl-chip{min-width:38px;text-align:center}
.wk-pages .bl-chip[disabled]{opacity:.35;pointer-events:none}

/* ---- featured case study: the same editorial spread as the list below,
   promoted rather than boxed — it sits inside the masthead sheet, leads
   media-LEFT at half width with a heavier headline, and carries the project's
   people as a credits foot line. No panel: nothing else on these pages is a
   contained card, and the old billboard ate a full viewport. ---- */
.wk-feature{border-top:0;margin-top:44px;padding:0;
  grid-template-columns:minmax(0,50%) minmax(0,1fr)}
.wk-feature .wk-item-media{order:0;aspect-ratio:16/10}
.wk-feature h2{font-weight:800;font-size:clamp(1.75rem,3.6vw,2.75rem);letter-spacing:-0.03em}
/* people and the standing link share the foot line, film-credits style —
   the feature AND the selected spreads carry it; index rows never do.
   Credits are what say "this one has a full case study". */
.wk-foot{display:flex;align-items:center;justify-content:space-between;
  gap:14px 24px;margin-top:24px;flex-wrap:wrap}
.wk-foot .wk-item-go{margin-top:0}
.wk-foot .wk-face{width:32px;height:32px;margin-left:-10px}
.wk-foot .wk-face:first-child{margin-left:0}

@media(prefers-reduced-motion:reduce){
  .wk-item-media img,.wk-item-go svg{transition:none}
  .wk-item:hover .wk-item-media img{transform:none}
}
@media(max-width:900px){
  .wk-item,.wk-item:nth-child(even){grid-template-columns:1fr;gap:22px}
  .wk-item .wk-item-media{order:0}
  .wk-item-media,.wk-feature .wk-item-media{aspect-ratio:16/9}
}

/* ---- case study: project facts as a horizontal credits strip, film-titles style.
   Two deliberate rows: the four facts about the work, then the people who made it
   on their own hairline with room to breathe. ---- */
.wk-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px 36px;margin:0 0 64px;padding:0 4px}
.wk-strip div{min-width:0}
.wk-strip dt{font-family:'IBM Plex Mono',monospace;font-size:0.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pg-fg-2);margin:0 0 7px}
.wk-strip dd{margin:0;font-size:0.9375rem;line-height:1.5;color:var(--pg-fg)}
.wk-strip-team{grid-column:1/-1;border-top:1px solid var(--pg-line);padding-top:18px}
@media(max-width:820px){.wk-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- centred article: the reading measure sits mid-page (the blog's is offset by
   its sidebar), so breakout media can expand symmetrically around it ---- */
.wk-article{max-width:740px;margin:0 auto}

/* media that breaks out of the reading measure to the wrap width, centred on the
   viewport like .bl-hero-band. body overflow-x:hidden absorbs the scrollbar's 100vw.
   .bl-body figure resets margins with a shorthand, so restate the full margin at
   higher specificity. */
.bl-body .wk-wide,.wk-wide{width:var(--wide);
  margin:2.2em 0 2.2em 50%;transform:translateX(-50%)}

/* side-by-side detail shots inside a figure; caption spans both */
.wk-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wk-pair figcaption{grid-column:1/-1}
@media(max-width:640px){.wk-pair{grid-template-columns:1fr}}

/* quote attribution inside a blockquote */
.bl-body .wk-cite{font-family:'IBM Plex Mono',monospace;font-size:0.8125rem;
  color:var(--pg-fg-2);margin:12px 0 0}

/* ---- stats: editorial numbers, hairline-ruled, the post's accent does the talking ---- */
.wk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:2.8em 0}
.wk-stat{border-top:1px solid var(--pg-line);padding-top:16px}
.wk-stat b{display:block;font-family:var(--sans);font-weight:800;
  font-size:clamp(1.875rem,3.2vw,2.75rem);letter-spacing:-0.03em;line-height:1;
  color:var(--pg-accent)}
.wk-stat span{display:block;margin-top:10px;font-family:'IBM Plex Mono',monospace;
  font-size:0.75rem;line-height:1.5;color:var(--pg-fg-2)}
@media(max-width:820px){.wk-stats{grid-template-columns:repeat(2,1fr)}}

/* ---- the team lives in the facts strip, film-credits style: a stack of small
   overlapping roundels. Hover (or keyboard focus) pops the face out of the pile
   and drops a name pill below, homepage-style. The pill's vertical padding is
   cap-nudged — Neuzeit sits high in capsules, see CLAUDE.md. ---- */
.wk-team{display:flex;align-items:center;padding-top:2px}
.wk-face{position:relative;flex:none;width:44px;height:44px;border-radius:50%;
  margin-left:-12px}
.wk-face:first-child{margin-left:0}
.wk-face img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  border:2px solid var(--pg-bg);background:var(--pg-card);
  filter:grayscale(1) brightness(.97);
  transition:filter .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.wk-face:hover,.wk-face:focus-visible{z-index:5}
.wk-face:hover img,.wk-face:focus-visible img{filter:none;
  transform:translateY(-3px) scale(1.18);
  box-shadow:0 12px 24px -10px rgba(0,0,0,.4)}
/* "together" rides along as the team row's caption instead of its own cell */
.wk-team-note{margin-left:18px;font-family:'IBM Plex Mono',monospace;font-size:0.75rem;
  color:var(--pg-fg-2)}
/* pill colours come from the chip contract (main.css): --chip-acc is pinned to the
   case study's BRIGHT accent in both themes so one --chip-ink works everywhere; a
   cyan/lime-accented page sets --chip-ink:#141419 inline on <body> (APCA) */
body[data-page="work-post"]{--chip-acc:var(--post-accent)}
.wk-face .who{position:absolute;left:0;bottom:-42px;transform:translateY(6px);
  background:var(--chip-acc,var(--pg-accent));color:var(--chip-ink,#fff);font-family:var(--sans);
  font-weight:600;font-size:0.75rem;white-space:nowrap;
  padding:calc(5px + 0.167em) 13px calc(5px - 0.167em);
  border-radius:999px;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;z-index:6}
.wk-face:hover .who,.wk-face:focus-visible .who{opacity:1;transform:translateY(0)}
.wk-face:focus-visible{outline:2px solid var(--pg-accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .wk-face img,.wk-face .who{transition:none}
  .wk-face:hover img{transform:none}
}

/* ---- end of a case study: one full-width band, split pitch | more work.
   .bl-cta is tone-matched to the page, so the hairlines and hover accent are
   simply the page's own tokens. ---- */
.wk-cta{width:var(--wide);margin:70px 0 0 50%;
  transform:translateX(-50%);
  --cta-line:var(--pg-line);--cta-acc:var(--pg-accent)}
.wk-cta-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(36px,5vw,80px);align-items:center}
.wk-cta-more h3{font-family:var(--sans);font-weight:700;font-size:1.25rem;
  letter-spacing:-0.02em;margin:0 0 8px}
.wk-cta-more a{display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:baseline;
  padding:15px 0;border-top:1px solid var(--cta-line);text-decoration:none;color:inherit}
.wk-cta-more a:last-of-type{border-bottom:1px solid var(--cta-line)}
.wk-cta-more .wk-client{color:var(--pg-fg-2)}
.wk-cta-more .wk-more-title{font-family:var(--sans);font-weight:700;font-size:1rem;
  line-height:1.35;transition:color .2s}
.wk-cta-more a:hover .wk-more-title{color:var(--cta-acc)}
.wk-cta-more .wk-more-title svg{width:14px;height:14px;margin-left:8px;vertical-align:-2px;
  opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.wk-cta-more a:hover .wk-more-title svg{opacity:1;transform:none}
.wk-cta-more a:focus-visible{outline:2px solid var(--cta-acc);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .wk-cta-more .wk-more-title svg{transition:none;transform:none}
}
@media(max-width:940px){
  .wk-cta-grid{grid-template-columns:1fr;gap:40px;align-items:start}
}
@media(max-width:640px){
  .wk-cta-more a{grid-template-columns:1fr;gap:5px}
}