/* Protagonist Ink — Work index (/work/) and case study pages (/work/<case>/).
   Loads after ../styles.css, which supplies the tokens, type, header, footer,
   buttons and text links. One file for the section: the index (wk-) and the
   case template (cs-) share labels, close and colour rules. Paper is the base;
   soft blue frames guide pages, charcoal frames films, muted red carries the
   win. Red type stays on paper. Nothing moves; films play only when pressed. */

/* ---------- Shared ---------- */

.cs-figure { display: flex; flex-direction: column; gap: 12px; }
/* A guide page or cover: framed, with a hairline so white pages hold their edge on paper. */
.cs-page { overflow: hidden; border-radius: var(--radius-frame); border: 1px solid var(--rule); background: var(--paper); }
.cs-page img { width: 100%; height: auto; }

/* "Selected prior work": a bordered label, so it reads as a status, not a category. */
.cs-prior { display: inline-flex; align-items: center; padding: 7px 10px; border: 1px solid var(--ink); border-radius: var(--radius-soft); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; }
.cs-prior--on-ink { border-color: var(--paper); color: var(--paper); }

/* On charcoal and muted red, focus and link hovers stay paper: red type never sits on a dark field. */
.cs-films :focus-visible, .cs-win :focus-visible, .wk-prior :focus-visible { outline-color: var(--paper); }
.cs-films a:not(.btn):hover, .wk-prior a:not(.btn):hover { color: var(--red-on-ink); }

/* ---------- Case: title block ----------
   Label, the standard statement as the h1, lede, then the meta; the
   representative cover beside it (8–12). */
.cs-title { padding-block: var(--space-6) var(--space-8); }
.cs-title__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-6); align-items: start; }
.cs-title__text { grid-column: 1 / span 6; display: flex; flex-direction: column; align-items: flex-start; padding-top: 8px; }
.cs-title__h { margin-top: 20px; text-wrap: balance; }
.cs-lede { margin-top: 28px; max-width: 30em; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.45; text-wrap: pretty; }
.cs-title__art { grid-column: 8 / span 5; }

.cs-meta { width: 100%; margin-top: var(--space-6); font-size: 15px; line-height: 1.5; }
.cs-meta > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); column-gap: var(--space-4); padding: 12px 0;  }
.cs-meta > div:first-child {  }
.cs-meta > div:first-child dd { font-weight: 500; }
.cs-meta > div:last-child {  }
.cs-meta dt { color: var(--graphite); }

/* Prior work: the label row leads; meta sits in a narrow column (9–12), stacked. */
.cs-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.cs-title--prior .cs-title__grid { margin-top: 24px; align-items: end; }
.cs-title--prior .cs-title__text { grid-column: 1 / span 7; padding-top: 0; }
.cs-title--prior .cs-title__h { margin-top: 0; }
.cs-title__meta { grid-column: 9 / span 4; margin-top: 0; }
.cs-title__meta > div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }

/* ---------- Case: inside a guide (representative work) ----------
   One page large enough to read (1–7), the parts every activity shares quoted
   beside it (9–12). */
.cs-inside__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-6); align-items: start; }
.cs-inside__page { grid-column: 1 / span 7; }
.cs-inside__notes { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: var(--space-4); padding-top: 8px; }
.cs-inside__lead { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.2; letter-spacing: -0.012em; text-wrap: balance; }
.cs-quotes > div { padding: 14px 0; border-top: 1px solid var(--rule); }
.cs-quotes > div:last-child { border-bottom: 1px solid var(--rule); }
.cs-quotes dt { font-size: 14px; line-height: 1.3; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite); }
.cs-quotes dd { margin-top: 6px; font-size: 17px; line-height: 1.5; }

/* ---------- Case: the beats ----------
   Three compositions so the story never stacks into equal blocks: split
   (headline 1–5, passage 7–12), figure (passage 1–6, page 8–12) and offset
   (a short turn set narrow, 5–12). */
.cs-beat { padding-top: var(--space-9); }
.cs-beat__body { display: flex; flex-direction: column; gap: 20px; max-width: 34em; font-size: 19px; line-height: 1.6; }
.cs-beat__h { text-wrap: balance; }

.cs-beat--split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-4); align-items: start; }
.cs-beat--split .cs-beat__h { grid-column: 1 / span 5; }
.cs-beat--split .cs-beat__body { grid-column: 7 / span 6; padding-top: 10px; }

.cs-beat--figure { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-6); align-items: start; }
.cs-beat--figure .cs-beat__text { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }
.cs-beat__figure { grid-column: 8 / span 5; }

.cs-beat--offset { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-4); }
.cs-beat--offset .cs-beat__h { grid-column: 5 / span 8; }
.cs-beat--offset .cs-beat__body { grid-column: 5 / span 6; }

/* ---------- Case: the work (proof) ----------
   The page's visual peak, on soft blue. Ink type only here: graphite falls
   below 4.5:1 on soft blue. */
.cs-proof { margin-top: var(--space-9); padding-block: var(--space-8) var(--space-9); background: var(--proof); }
.cs-proof .caption { color: var(--ink); }
.cs-proof .cs-page { border-color: transparent; }
.cs-proof__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; padding-bottom: 16px;  }
.cs-covers { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5) var(--gutter); }
.cs-covers__name { font-weight: 500; }
.cs-proof__spread { width: calc(50% - var(--gutter) / 2); margin: var(--space-8) auto 0; }

/* ---------- Case: films (prior work) ----------
   A poster frame with a play button; work.js swaps in Vimeo's player only
   when pressed. Without script the button is a link to the film on Vimeo.
   The uploads are 4:3 with the picture letterboxed, so a playing film takes
   4:3 to keep the whole player and its controls in view. */
.cs-reel { padding-bottom: 0; }
.film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-frame); background: var(--ink); }
.film > picture { position: absolute; inset: 0; display: block; }
.film > picture img { width: 100%; height: 100%; object-fit: cover; }
.film__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; }
.film__btn { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 28px 0 24px; border-radius: var(--radius-pill); background: var(--paper); font-size: 16px; font-weight: 500; line-height: 1; }
.film__icon { width: 14px; height: 16px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.film__play:hover { color: var(--ink); }
.film__play:hover .film__btn { background: var(--proof); }
.film__play:focus-visible { outline: none; }
.film__play:focus-visible .film__btn { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--paper); }
.film.is-playing { aspect-ratio: 4 / 3; }
.film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Stays beside the film after the player loads, in case Vimeo is blocked. */
.film__external { margin-top: var(--space-2); }

.cs-films { margin-top: var(--space-9); padding-block: var(--space-8) var(--space-9); }
.cs-films__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.cs-films__intro { font-size: 19px; line-height: 1.55; color: var(--paper-muted); }
.cs-films__grid { margin-top: var(--space-7); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-6); align-items: start; }
.cs-films__main { grid-column: 1 / span 8; }
.cs-films__side { grid-column: 10 / span 3; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.cs-films__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-on-ink); }
.cs-films__list li { border-bottom: 1px solid var(--rule-on-ink); }

/* ---------- Case: the win ----------
   Muted red, paper type only (7.2:1). One Ethic line, then each documented
   win with its evidence. */
.cs-win { margin-top: var(--space-8); padding-block: var(--space-8) var(--space-9); background: var(--muted-red); color: var(--paper); }
.cs-win__h { margin-top: 20px; max-width: 16em; text-wrap: balance; }
.cs-win__list { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--gutter); }
.cs-win__list li { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid var(--paper); }
.cs-win__list li p:last-child { max-width: 30em; font-size: 19px; line-height: 1.5; }

/* ---------- Case: credits ---------- */
.cs-credits { margin-top: var(--space-8); }
.cs-credits__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-3); align-items: start; padding-top: var(--space-4);  }
.cs-credits__grid > h2 { grid-column: 1 / span 3; }
.cs-credits__list { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--gutter); font-size: 15px; line-height: 1.5; }
.cs-credits__list dt { color: var(--graphite); }

/* ---------- Close (case pages and index) ----------
   A line, the conversation and the matching part of Work With Us; on case
   pages, then the next case and All work. */
.cs-close { padding-block: var(--space-9) var(--space-8); }
.cs-close__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-4); align-items: center; padding-block: var(--space-7);  }
.cs-close__line { grid-column: 1 / span 7; font-family: var(--font-serif); font-size: clamp(32px, 3.2vw, 46px); line-height: 1.12; letter-spacing: -0.022em; text-wrap: balance; }
.cs-close__actions { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.cs-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px var(--space-5);   }
.cs-next__case { display: flex; flex-direction: column; gap: 8px; padding-block: var(--space-5); text-decoration: none; }
.cs-next__title { font-family: var(--font-serif); font-size: clamp(28px, 2.6vw, 38px); line-height: 1.14; letter-spacing: -0.02em; }
.cs-next__case:hover { color: var(--red-press); }

/* ---------- Index: head and filters ---------- */
.wk-head { padding-top: var(--space-6); }
.wk-head__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 20px; align-items: end; padding-bottom: var(--space-5);  }
.wk-head__title { grid-column: 1 / span 7; margin-top: 20px; }
.wk-head__intro { grid-column: 9 / span 4; padding-bottom: 8px; font-size: 19px; line-height: 1.45; }

/* ---------- Index: studio work ----------
   Colburn leads across all twelve columns, its text in two columns beneath the
   picture. Cirque (1–5) and Pacific Crest (7–12) follow, bottoms aligned so
   their tops stagger. */
.wk-studio { padding-top: var(--space-7); }
.wk-group-title { padding-bottom: var(--space-4); }
.wk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-8); align-items: end; }
.wk-tile { position: relative; display: flex; flex-direction: column; }
.wk-tile--lead { grid-column: 1 / -1; }
.wk-tile--lead .wk-tile__text { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.wk-tile--lead .wk-tile__meta { grid-column: 1 / -1; }
.wk-tile--lead .wk-tile__hook { grid-column: 1 / span 7; }
.wk-tile--lead .wk-tile__aside { grid-column: 8 / span 5; padding-top: 14px; }
.wk-tile--cover { grid-column: 1 / span 5; }
.wk-tile--type { grid-column: 7 / span 6; }

.wk-tile__media { overflow: hidden; border-radius: var(--radius-frame); background: var(--proof); }
.wk-tile__media img { width: 100%; height: auto; }
.wk-tile__media--wide { aspect-ratio: 1412 / 800; }
.wk-tile__media--type { aspect-ratio: 4 / 3; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); background: var(--muted-red); color: var(--paper); }
.wk-tile__quote { font-family: var(--font-serif); font-size: clamp(28px, 2.6vw, 40px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }

.wk-tile__meta { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.wk-tile__client { font-size: 18px; font-weight: 500; line-height: 1.3; }
.wk-tile__hook { margin-top: 6px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.wk-tile--lead .wk-tile__hook { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.06; letter-spacing: -0.02em; }
.wk-tile__line { margin-top: 8px; max-width: 34em; font-size: 17px; line-height: 1.5; color: var(--graphite); }
.wk-tile__soon { margin-top: 10px; }

/* The hook is the link; its box stretches over the tile so the picture clicks too.
   Hover changes the hook’s color; keyboard focus rings the picture. */
.wk-tile__link { text-decoration: none; }
.wk-tile__link::after { content: ""; position: absolute; inset: 0; }
.wk-tile:has(.wk-tile__link):hover .wk-tile__link { color: var(--red-press); }
.wk-tile__link:focus-visible { outline: none; }
.wk-tile:has(.wk-tile__link:focus-visible) .wk-tile__media { outline: 2px solid var(--focus); outline-offset: 3px; }
.wk-tile:has(.wk-tile__link:focus-visible) .wk-tile__link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ---------- Index: selected prior work ----------
   Its own charcoal band and label, so it never reads as studio work. */
.wk-prior { margin-top: var(--space-9); padding-block: var(--space-7) var(--space-8); }
.wk-prior__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-bottom: 20px;  }
.wk-prior__note { font-size: 16px; line-height: 1.45; color: var(--paper-muted); }
.wk-prior__list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--gutter); align-items: start; }
.wk-tile--prior .wk-tile__media { aspect-ratio: 16 / 9; background: var(--ink); }
.wk-tile--prior .wk-tile__media img { height: 100%; object-fit: cover; }
.wk-tile--prior .wk-tile__line { color: var(--paper-muted); }
.wk-tile__credit { margin-top: var(--space-3); padding-top: 14px;  font-size: 15px; line-height: 1.5; color: var(--paper-muted); }
.wk-tile--prior:has(.wk-tile__link:focus-visible) .wk-tile__media { outline-color: var(--paper); }

.wk-close { padding-top: var(--space-8); }

/* ---------- Tablet ---------- */
@media (max-width: 1099px) {
  .cs-title__text { grid-column: 1 / span 7; }
  .cs-title__art { grid-column: 8 / span 5; }
  .cs-title--prior .cs-title__text { grid-column: 1 / span 8; }
  .cs-inside__page { grid-column: 1 / span 7; }
  .cs-inside__notes { grid-column: 8 / span 5; }
  .cs-beat--split .cs-beat__h { grid-column: 1 / span 6; }
  .cs-beat--figure .cs-beat__text { grid-column: 1 / span 7; }
  .cs-films__main { grid-column: 1 / span 9; }
  .cs-films__side { grid-column: 10 / span 3; }
  .cs-covers { column-gap: var(--space-4); }
  .cs-close__line { grid-column: 1 / span 7; }
  .cs-close__actions { grid-column: 8 / span 5; }
  .wk-head__title { grid-column: 1 / span 8; }
  .wk-head__intro { grid-column: 9 / span 4; }
}

/* ---------- Phones and small tablets: one column, recomposed ----------
   Title: label, headline, lede, cover, then the meta. Captions stay with their
   images; covers go two or three across; the close's button runs full width;
   nothing depends on hover. */
@media (max-width: 899px) {
  .cs-title { padding-block: var(--space-5) var(--space-7); }
  .cs-title__grid,
  .cs-inside__grid,
  .cs-beat--split,
  .cs-beat--figure,
  .cs-beat--offset,
  .cs-films__grid,
  .cs-credits__grid,
  .cs-close__grid,
  .wk-head__grid,
  .wk-grid,
  .wk-tile--lead .wk-tile__text { grid-template-columns: minmax(0, 1fr); }
  .cs-title__grid > *,
  .cs-inside__grid > *,
  .cs-beat--split > *,
  .cs-beat--figure > *,
  .cs-beat--offset > *,
  .cs-films__grid > *,
  .cs-credits__grid > *,
  .cs-close__grid > *,
  .wk-head__grid > *,
  .wk-grid > *,
  .wk-tile--lead .wk-tile__text > * { grid-column: 1 !important; grid-row: auto !important; }

  .cs-title__grid { row-gap: 0; }
  .cs-title__text { display: contents; }
  .cs-title__text > .label { order: 1; }
  .cs-title__h { order: 2; margin-top: 16px; }
  .cs-lede { order: 3; margin-top: 20px; font-size: 19px; }
  .cs-title__art { order: 4; margin-top: var(--space-5); }
  .cs-meta { order: 5; margin-top: var(--space-5); }
  .cs-title--prior .cs-title__grid { margin-top: 20px; }
  .cs-title--prior .cs-title__h { margin-top: 0; }
  .cs-meta > div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }

  .cs-inside__grid { row-gap: var(--space-4); }
  .cs-inside__notes { display: contents; }
  .cs-inside__notes > h2 { order: 1; }
  .cs-inside__lead { order: 2; }
  .cs-inside__page { order: 3; margin-top: var(--space-2); }
  .cs-quotes { order: 4; margin-top: var(--space-3); }
  .cs-quotes dd { font-size: 16px; }

  .cs-beat { padding-top: var(--space-8); }
  .cs-beat__body { font-size: 18px; }
  .cs-beat--figure .cs-beat__text { gap: 20px; padding-top: 0; }

  .cs-proof { margin-top: var(--space-8); padding-block: var(--space-7) var(--space-8); }
  .cs-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
  .cs-proof__spread { width: 100%; margin-top: var(--space-7); }

  .film__btn { min-height: 48px; padding: 0 20px 0 18px; font-size: 15px; }
  .cs-films { margin-top: var(--space-8); padding-block: var(--space-7) var(--space-8); }
  .cs-films__grid { margin-top: var(--space-5); row-gap: var(--space-5); }

  .cs-win { margin-top: var(--space-7); padding-block: var(--space-7) var(--space-8); }
  .cs-win__list { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-6); gap: var(--space-4); }
  .cs-win__list li p:last-child { font-size: 18px; }

  .cs-credits { margin-top: var(--space-7); }
  .cs-credits__list { grid-template-columns: minmax(0, 1fr); }

  .cs-close { padding-block: var(--space-8) var(--space-7); }
  .cs-close__grid { padding-block: var(--space-5); }
  .cs-close__line { font-size: clamp(28px, 7.4vw, 32px); }
  .cs-close__actions { align-items: stretch; }
  .cs-close .btn { width: 100%; }
  .cs-next__case { padding-block: var(--space-4); }
  .cs-next__title { font-size: 26px; }

  .wk-head { padding-top: var(--space-5); }
  .wk-head__title { margin-top: 8px; }
  .wk-head__intro { padding-bottom: 0; font-size: 18px; }
  .wk-grid { row-gap: var(--space-7); }
  .wk-tile--lead .wk-tile__aside { padding-top: 0; }
  .wk-prior__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .wk-tile__media--type { padding: var(--space-4); }
  .wk-tile__quote { font-size: clamp(28px, 8vw, 34px); }
  .wk-tile--lead .wk-tile__hook { font-size: clamp(30px, 8.4vw, 38px); }
  .wk-prior { margin-top: var(--space-8); padding-block: var(--space-6) var(--space-7); }
  .wk-prior__head { flex-direction: column; align-items: flex-start; }
}

@media (min-width: 600px) and (max-width: 899px) {
  .cs-covers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Text excerpts retain the exact source language without imitating a source screenshot. */
.cs-story-line { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6); background: var(--indigo); color: var(--paper); border-radius: var(--radius-frame); }
.cs-story-line blockquote { font-family: var(--font-serif); font-size: clamp(40px, 4.5vw, 64px); line-height: 1.12; }
.cs-reframes { padding: var(--space-5); background: var(--proof); border-radius: var(--radius-frame); }
/* Graphite on proof blue is 3.8:1; the source label stays ink here to clear 4.5:1. */
.cs-reframes .label { color: var(--ink); }
.cs-reframes__title { margin-block: var(--space-4) var(--space-5); font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.15; }
.cs-reframes dl > div { padding-block: var(--space-4); border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); font-size: 18px; line-height: 1.5; }
.cs-reframes dd { font-weight: 500; }
.cs-image-link { display: block; overflow: hidden; border-radius: var(--radius-frame); }
.cs-image-link img { width: 100%; height: auto; }
.cs-testimonial { padding-top: var(--space-7); }
.cs-testimonial figure { max-width: 56em; margin-inline: auto; }
.cs-testimonial blockquote { font-family: var(--font-serif); font-size: clamp(26px, 2.5vw, 36px); line-height: 1.35; }
.cs-testimonial .caption { margin-top: var(--space-4); }
.cs-source { padding-top: var(--space-4); }
@media (max-width: 599px) { .cs-reframes { padding: var(--space-4); } .cs-reframes dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } }

/* Chevron's website screenshots retain their full page or stated crop. */
.cs-web-excerpts { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.wk-tile__media--web { aspect-ratio: 1000 / 760; }
.wk-tile__media--web img { width: 100%; height: auto; object-fit: contain; }
@media (max-width: 899px) { .cs-web-excerpts { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }