/* Work overview and project pages (Milestone 3). Tokens and shell come from tokens.css / shell.css.
   A few generic helpers (sr-only, chips, tick, outline button) are repeated from home.css on purpose so this file
   stands alone; merging them into one shared stylesheet is a later tidy-up. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.btn--lg{min-height:56px;padding-inline:32px}
h1,h2,h3{font-family:var(--font-display);font-weight:800;font-stretch:125%;letter-spacing:-.005em;margin:0;text-wrap:balance}
.tick{width:8px;height:8px;background:var(--lime);display:inline-block}
.wk-eyebrow{display:flex;align-items:center;gap:var(--s3);color:var(--grey);margin-bottom:var(--s4)}
.wk-band :focus-visible,.pj-more :focus-visible,.wk-cta :focus-visible{outline-color:var(--ink)}

/* ---------- Work overview ---------- */
.wk-intro{background:var(--ink);color:var(--warm);padding-block:var(--s7) var(--s7)}
.wk-intro h1{font-size:var(--t-h1);line-height:1.04}
.wk-lead{font-size:var(--t-lead);color:var(--grey);max-width:34ch;margin-top:var(--s5);line-height:1.5}
.wk-band{background:var(--warm);color:var(--ink);padding-block:var(--s7) var(--s9)}
.wk-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s6)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chips[hidden]{display:none}
.chip{min-height:44px;padding:0 var(--s4);font:inherit;font-weight:700;font-size:var(--t-small);background:transparent;color:var(--ink);border:1.5px solid var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--lime);border-color:var(--ink)}
.chip:hover{background:var(--ink);color:var(--warm)}
.chip[aria-pressed="true"]:hover{background:var(--lime);color:var(--ink)}
.wk-count{color:var(--graphite)}
.wk-grid{display:grid;gap:var(--s6) var(--s5);grid-template-columns:1fr;list-style:none;margin:0;padding:0}
.wk-item[hidden]{display:none}
.wk-card{display:block;color:inherit;text-decoration:none}
.wk-media{position:relative;display:block;aspect-ratio:16/9;background:var(--ink);overflow:hidden}
.wk-media img{width:100%;height:100%;object-fit:cover;display:block}
.wk-badge{position:absolute;left:12px;bottom:12px;background:var(--ink);color:var(--warm);padding:6px 10px}
.wk-meta{display:grid;grid-template-columns:auto 1fr auto;column-gap:var(--s4);row-gap:var(--s1);align-items:baseline;padding-top:var(--s4);border-bottom:3px solid transparent;padding-bottom:var(--s3)}
.wk-n{color:var(--graphite)}
.wk-t{font-size:clamp(20px,calc(20px + 6 * (100vw - 390px) / 1050),26px);line-height:1.15;grid-column:2}
.wk-d{grid-column:2;color:var(--graphite)}
.wk-arrow{grid-column:3;grid-row:1 / span 2;align-self:center;opacity:.35}
.wk-card:hover .wk-meta,.wk-card:focus-visible .wk-meta{border-bottom-color:var(--lime)}
.wk-card:hover .wk-arrow,.wk-card:focus-visible .wk-arrow{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .wk-media img{transition:transform var(--m-slow) var(--ease)}
  .wk-card:hover .wk-media img,.wk-card:focus-visible .wk-media img{transform:scale(1.03)}
  html:not([data-motion="paused"]) .wk-arrow{transition:opacity var(--m-fast) var(--ease)}
}
html[data-motion="paused"] .wk-media img{transition:none;transform:none!important}
@media (min-width:700px){.wk-grid{grid-template-columns:1fr 1fr}.wk-intro{padding-block:var(--s8) var(--s8)}}

/* ---------- call to action (both page types) ---------- */
.wk-cta{background:var(--warm);color:var(--ink);padding-block:var(--s9)}
.wk-cta .wk-eyebrow{color:var(--graphite)}
.wk-cta h2{font-size:var(--t-h2);line-height:1.08}
.wk-cta-sub{margin-top:var(--s4);color:var(--graphite);font-size:var(--t-lead)}
.wk-cta-grid{display:grid;gap:var(--s6);grid-template-columns:1fr;align-items:end}
.wk-cta .btn{width:100%}
@media (min-width:700px){.wk-cta .btn{width:auto}}
@media (min-width:900px){.wk-cta-grid{grid-template-columns:1fr 1fr}.wk-cta-grid>p{justify-self:end}}

/* ---------- project page ---------- */
.pj-stage{background:var(--ink);color:var(--warm);padding-block:var(--s5) var(--s6)}
.pj-back{margin-bottom:var(--s4)}
.pj-back-link{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;color:var(--warm);text-decoration:none;box-shadow:inset 0 -1px 0 transparent}
.pj-back-link:hover{color:var(--lime)}
.pj-media{margin:0;position:relative;aspect-ratio:var(--w) / var(--h);background:#000;width:100%}
.pj-media img,.player,.player-video{display:block;width:100%;height:100%}
.pj-media img{object-fit:cover}
.pj-media--portrait{aspect-ratio:9/16;max-width:min(100%,calc((100vh - 140px) * 9 / 16));margin-inline:auto}
.player{position:relative;background:#000}
.player-video{object-fit:contain;background:#000}
.player-play{position:absolute;inset:0;margin:auto;width:max-content;height:max-content;min-width:44px;min-height:44px;display:inline-flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);background:var(--lime);color:var(--ink);border:0;cursor:pointer;font:inherit;z-index:2}
.player-play[hidden]{display:none}
.player-play:hover{background:var(--warm)}
.player-play:focus-visible{outline-color:var(--warm);outline-offset:3px}
.player-msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 32px);margin:0;padding:var(--s4) var(--s5);background:rgba(10,10,11,.92);color:var(--warm);border:1px solid var(--hairline);font-size:var(--t-small);line-height:1.4;text-align:center;z-index:3}
.player-msg[hidden]{display:none}
.pj-head{background:var(--ink);color:var(--warm);padding-block:var(--s6) var(--s9)}
.pj-grid{display:grid;gap:var(--s7);grid-template-columns:1fr}
.pj-eyebrow{display:flex;align-items:center;gap:var(--s3);color:var(--grey);margin-bottom:var(--s4)}
.pj-title h1{font-size:clamp(26px,calc(26px + 30 * (100vw - 320px) / 1120),56px);line-height:1.06;overflow-wrap:anywhere}
.pj-service{margin-top:var(--s4);color:var(--grey);font-size:var(--t-lead)}
.pj-h{color:var(--grey);margin-bottom:var(--s3)}
.pj-text{max-width:62ch;line-height:1.55;font-size:var(--t-lead)}
.pj-facts{margin:var(--s6) 0 0;display:grid;gap:0;border-top:1px solid var(--hairline)}
.pj-facts>div{display:grid;grid-template-columns:1fr;gap:var(--s1);padding:var(--s4) 0;border-bottom:1px solid var(--hairline)}
.pj-facts dt{color:var(--grey)}
.pj-facts dd{margin:0}
.ph{display:inline-block;padding:var(--s2) var(--s3);border:1.5px dashed var(--lime);color:var(--lime);font-family:var(--font-mono);font-size:var(--t-small);line-height:1.4}
.pj-more{background:var(--warm);color:var(--ink);padding-block:var(--s9)}
.pj-more .wk-eyebrow{color:var(--graphite)}
.pj-more h2{font-size:var(--t-h2);line-height:1.08;margin-bottom:var(--s6)}
.pj-gallery{display:grid;gap:var(--s5);grid-template-columns:1fr;list-style:none;margin:0;padding:0}
.pj-gallery img{display:block;width:100%;height:auto;background:var(--ink)}
.pj-pager{background:var(--ink);color:var(--warm);border-top:1px solid var(--hairline)}
.pj-pager-grid{display:grid;grid-template-columns:1fr}
.pj-pg{display:flex;flex-direction:column;gap:var(--s2);justify-content:center;min-height:96px;padding:var(--s5) 0;color:var(--warm);text-decoration:none;border-bottom:1px solid var(--hairline)}
.pj-pg .label{color:var(--grey)}
.pj-pg-t{font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:clamp(18px,calc(18px + 6 * (100vw - 390px) / 1050),24px);line-height:1.15}
.pj-pg:hover .pj-pg-t,.pj-pg:focus-visible .pj-pg-t{color:var(--lime)}
@media (min-width:900px){
  .pj-grid{grid-template-columns:5fr 7fr;gap:var(--s8)}
  .pj-facts>div{grid-template-columns:200px 1fr;gap:var(--s5)}
  .pj-gallery{grid-template-columns:1fr 1fr}
  .pj-pager-grid{grid-template-columns:1fr 1fr 1fr;column-gap:var(--s6)}
  .pj-pg{border-bottom:0;padding-block:var(--s6)}
  .pj-pg--all{align-items:center;text-align:center}
  .pj-pg--next{align-items:flex-end;text-align:right}
}
@media (min-width:700px) and (max-width:899.98px){.pj-gallery{grid-template-columns:1fr 1fr}}