/* ═══════════════════════════════════════════════════════════════
   LaunchPad /work/: portfolio layer on top of site.css
   Chrome stays grayscale (site tokens). Client work is shown in its
   own colors: the grayscale exists so the work is the color.
   Loaded by /work/index.html (work.css) and /work/<client>/ (../work.css).
   ═══════════════════════════════════════════════════════════════ */

/* ───────── highlight page: hero ───────── */
.wk-hero {
  position: relative; min-height: 92svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 150px var(--gutter) clamp(44px, 7vh, 88px);
  overflow: hidden; isolation: isolate;
}
.wk-hero-img { position: absolute; inset: 0; z-index: -2; }
.wk-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.wk-hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(13,13,13,.62) 0%, rgba(13,13,13,.18) 34%, rgba(13,13,13,.55) 62%, rgba(13,13,13,.96) 100%),
    linear-gradient(90deg, rgba(13,13,13,.55) 0%, rgba(13,13,13,0) 60%);
}
.wk-hero .act-inner { width: 100%; }
.wk-hero .act-label { margin-bottom: 22px; }
.wk-hero .headline { font-size: clamp(40px, 7vw, 100px); max-width: 12ch; text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.wk-hero .hero-sub { color: #dcd8ca; max-width: 52ch; margin: 26px 0 0; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.wk-credit {
  position: absolute; right: var(--gutter); bottom: 22px; z-index: 1;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(233,233,214,.55); text-align: right; max-width: 34ch;
}

/* ───────── highlight page: client rows ───────── */
.wk-rows { display: grid; gap: clamp(72px, 11vh, 150px); }
.wk-row {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 72px); align-items: end;
  text-decoration: none; color: inherit;
}
.wk-row.flip .wk-media { order: 2; }
.wk-media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--rule); background: var(--black);
}
.wk-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.4s var(--ease); }
.wk-media.is-screen img { object-position: top; }
.wk-row:hover .wk-media img { transform: scale(1.06); }
.wk-copy { padding-bottom: 6px; }
.wk-index { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); display: block; margin-bottom: 18px; }
.wk-name { font-size: clamp(34px, 4.4vw, 62px); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.wk-outcome { font-family: var(--serif); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: #cfcabc; margin: 18px 0 0; max-width: 34ch; }
.wk-tags { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 0; }
.wk-tags li { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 14px; border-left: 1px solid var(--rule-strong); line-height: 1.2; }
.wk-tags li:first-child { padding-left: 0; border-left: 0; }
.wk-go { display: inline-block; margin-top: 30px; font-size: 13.5px; letter-spacing: .02em; color: var(--cream); border-bottom: 1px solid var(--rule-strong); padding-bottom: 4px; transition: border-color .3s var(--ease); }
.wk-row:hover .wk-go { border-color: var(--cream); }

/* the third client: no page yet, so a quieter row */
.wk-soon {
  margin-top: clamp(72px, 11vh, 150px);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: clamp(26px, 4vh, 40px) 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px clamp(24px, 4vw, 64px); align-items: baseline;
}
.wk-soon .wk-index { margin: 0; }
.wk-soon h2 { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.02em; }
.wk-soon p { font-family: var(--serif); color: var(--muted); font-size: clamp(16px, 1.3vw, 18px); margin: 8px 0 0; max-width: 56ch; }
.wk-soon .wk-tags { margin-top: 14px; }
.wk-soon .wk-state { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }

@media (max-width: 860px) {
  .wk-hero { min-height: 78svh; padding-top: 120px; }
  .wk-hero .headline { max-width: 10ch; }
  .wk-credit { position: static; margin-top: 26px; text-align: left; max-width: none; }
  .wk-row, .wk-row.flip { grid-template-columns: 1fr; gap: 22px; }
  .wk-row.flip .wk-media { order: 0; }
  .wk-media { aspect-ratio: 3 / 2; }
  .wk-soon { grid-template-columns: 1fr; gap: 10px; }
  .wk-soon .wk-state { order: -1; }
}

/* ───────── client page ───────── */
.cs-hero { min-height: auto; padding-bottom: 20px; }
.cs-hero .act-inner, .cs-inner { max-width: 820px; margin-left: auto; margin-right: auto; }
.cs-wide { max-width: var(--max); }
.cs-back { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); display: inline-block; margin-bottom: 26px; text-decoration: none; }
.cs-back:hover { color: var(--cream); }
.cs-h1 { font-size: clamp(40px, 6vw, 84px); line-height: 1.0; letter-spacing: -0.03em; text-wrap: balance; }
.cs-kicker { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.25; font-weight: 500; color: #cfcabc; margin: 18px 0 0; max-width: 30ch; letter-spacing: -0.01em; }
.cs-dateline { margin: 26px 0 0; max-width: 64ch; text-transform: none; letter-spacing: .02em; font-size: 12.5px; line-height: 1.6; }
.cs-sec { padding-top: clamp(56px, 9vh, 110px); padding-bottom: clamp(20px, 3vh, 40px); }
.cs-h { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; text-wrap: balance; max-width: 26ch; margin-bottom: 24px; }
.cs-outcome { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.38; color: var(--cream); margin: 0 0 30px; max-width: 30ch; text-wrap: pretty; }
.cs-h3 { font-size: 19px; letter-spacing: -0.01em; margin: 34px 0 8px; color: var(--cream); }
.cs-q { margin-top: 30px; }
.cs-p { font-family: var(--serif); font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.62; color: #cfcabc; max-width: 64ch; margin: 0 0 16px; }
.cs-p a { color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.cs-p a:hover { border-color: var(--cream); }
.cs-table-wrap { overflow-x: auto; margin: 22px 0 26px; border-top: 1px solid var(--rule-strong); }
.cs-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; min-width: 640px; }
.cs-table th, .cs-table td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); color: #cfcabc; }
.cs-table thead th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); font-weight: 500; }
.cs-table tbody th { color: var(--cream); font-weight: 600; width: 26%; }
.cs-table .cs-note { color: var(--muted); font-size: 13px; }
.cs-close { padding-bottom: clamp(70px, 12vh, 140px); }
.cs-close .cs-h { max-width: 22ch; }
@media (max-width: 760px) { .cs-table { min-width: 560px; } }

/* lookbook: a 12-column grid of framed pieces, each with one caption */
.lb { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 30px); margin-top: 8px; }
.lb-item { grid-column: span 12; margin: 0; }
.lb-item.w8 { grid-column: span 8; }
.lb-item.w6 { grid-column: span 6; }
.lb-item.w4 { grid-column: span 4; }
.lb-item.w3 { grid-column: span 3; }
.lb-frame { border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); background: var(--black); }
.lb-frame img { width: 100%; height: 100%; object-fit: cover; }
.lb-frame.r-16x10 { aspect-ratio: 16 / 10; }
.lb-frame.r-3x2 { aspect-ratio: 3 / 2; }
.lb-frame.r-4x3 { aspect-ratio: 4 / 3; }
.lb-frame.r-21x9 { aspect-ratio: 21 / 9; }
.lb-frame.r-page { aspect-ratio: 1632 / 2112; }
.lb-frame.r-sq { aspect-ratio: 1372 / 1390; }
.lb-frame.r-16x9 { aspect-ratio: 16 / 9; }
.lb-frame.top img { object-position: top; }
.lb-frame.fit { background: var(--black); }
.lb-frame.fit img { object-fit: contain; }
.lb-item figcaption { font-size: 13px; line-height: 1.55; color: var(--muted); margin-top: 12px; max-width: 60ch; }
.lb-item figcaption b { color: var(--cream); font-weight: 500; }
.lb-lead { margin-bottom: clamp(28px, 4vh, 44px); }
@media (max-width: 860px) {
  .lb-item.w8, .lb-item.w6 { grid-column: span 12; }
  .lb-item.w4, .lb-item.w3 { grid-column: span 6; }
}
@media (max-width: 520px) {
  .lb-item.w4, .lb-item.w3 { grid-column: span 12; }
}

/* engine room: text and screens, alternating; text-only items sit at reading width */
.er { display: grid; gap: clamp(44px, 7vh, 96px); margin-top: 8px; }
.er-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.er-item.flip .er-shot { order: -1; }
.er-item .cs-h3 { margin-top: 0; font-size: clamp(20px, 2vw, 26px); }
.er-item .cs-p { font-size: clamp(16px, 1.35vw, 18px); }
.er-item .cs-p:last-child { margin-bottom: 0; }
.er-shot { margin: 0; }
.er-shot .lb-frame { aspect-ratio: 16 / 10; }
.er-shot figcaption { font-size: 12.5px; color: var(--dim); margin-top: 10px; }
.er-text { max-width: 64ch; }
.er-wide { grid-template-columns: 1fr; }
.er-wide .er-shot .lb-frame { aspect-ratio: 1440 / 820; }
.er-wide .er-text { max-width: 64ch; }
.er-note { font-size: 12.5px; color: var(--dim); margin-top: 10px; }
@media (max-width: 860px) {
  .er-item, .er-item.flip { grid-template-columns: 1fr; gap: 18px; }
  .er-item.flip .er-shot { order: 0; }
}