/* =====================================================================
   Work group: /work/ hub and the four project pages.
   Tokens and shared components (.mosaic/.tile, .facts, .card, .pairs, .cap,
   .link, .linklist, .band, .dark) come from site.css. Mobile first;
   breakpoints from design-system.md (560, 768, 900, 1024).
   ===================================================================== */

/* ===== Hub: area tiles ===== */
.wk-tiles{padding-top:calc(var(--pad) * .6);padding-bottom:calc(var(--pad) * .75)}
.wk-tile__more{margin:0}
/* tag lines: each tag (with its trailing dot) is a nowrap span, so lines break only between tags */
.wk-tag{white-space:nowrap}
.tile__city a{color:inherit;text-decoration:none;background-image:linear-gradient(var(--brass),var(--brass));background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .35s var(--ease)}
.tile__city a:hover,.tile__city a:focus-visible{background-size:100% 1px}

/* ===== Hub: filter row (anchor links; CSS :target hides the rest) ===== */
.wk-t{display:block;height:0;overflow:hidden}
.wk-filter{border-top:1px solid var(--line);padding:22px 0}
.wk-filter .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.wk-filter__k{margin:0;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--brass-ink)}
.wk-filter ul{display:flex;flex-wrap:wrap;gap:8px}
.wk-filter a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:56px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;background:var(--white);color:var(--green);font-size:14.5px;font-weight:500;text-decoration:none;transition:border-color .2s,background .2s,color .2s}
.wk-filter a:hover{border-color:var(--brass);background:var(--cream)}
.wk:not(:has(.wk-t:target)) .wk-filter a[href="#show-all"],.wk:has(#show-all:target) .wk-filter a[href="#show-all"],.wk-filter a[aria-current]{background:var(--green);color:var(--cream);border-color:var(--green)}
.wk [hidden]{display:none !important}

/* ===== Hub: one band per area ===== */
.wk-area .head{margin-bottom:48px}
@media (min-width:1024px){.wk-area .head--split{margin-bottom:64px}}
.wk-proj + .wk-proj{margin-top:72px;padding-top:56px;border-top:1px solid var(--line)}
.dark .wk-proj + .wk-proj{border-top-color:var(--line-dark)}

/* project card: photo + copy, photo 7fr / copy 5fr from 900 */
.wk-card{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center}
.wk-card__img{display:block;overflow:hidden;background:var(--line)}
.wk-card__img img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.4s var(--ease)}
.wk-card:hover .wk-card__img img{transform:scale(1.03)}
.wk-card__body{min-width:0}
.wk-card__body .cap{margin:0 0 10px}
.wk-card h3{font-size:clamp(30px,3.2vw,42px);color:var(--green);margin:0 0 14px;text-wrap:balance}
/* the title is the card's link: a resting hairline under it (phones have no hover), brass on hover */
.wk-card h3 a{color:inherit;text-decoration:none;background-image:linear-gradient(var(--brass),var(--brass)),linear-gradient(var(--line-strong),var(--line-strong));background-size:0 2px,100% 1px;background-position:0 100%,0 100%;background-repeat:no-repeat;padding-bottom:4px;transition:background-size .35s var(--ease)}
.wk-card h3 a:hover,.wk-card h3 a:focus-visible{background-size:100% 2px,100% 1px}
.dark .wk-card h3 a{background-image:linear-gradient(var(--brass-hi),var(--brass-hi)),linear-gradient(var(--line-dark),var(--line-dark))}
.wk-card__scope{color:var(--muted);margin:0 0 14px;max-width:52ch}
.wk-card .tile__tags{margin:0}
.wk-card .tile__count{margin:12px 0 0}
@media (min-width:900px){.wk-card{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}}
@media (min-width:1024px){.wk-card{gap:64px}}
.dark .wk-card__img{background:var(--green-2)}
.dark .wk-card h3{color:var(--cream)}
.dark .wk-card__scope{color:rgba(244,239,228,.82)}
.dark .tile__tags{color:var(--brass-hi)}
.dark .tile__count{color:var(--cream)}

/* four-photo row: scroll strip on phones and tablets, 4-up grid from 900 */
.wk-strip{margin-top:28px}
.wk-strip__vp{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--brass) transparent;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 10px;scroll-padding-left:var(--gutter)}
.wk-strip__list{display:grid;grid-auto-flow:column;grid-auto-columns:64%;gap:12px}
@media (min-width:560px){.wk-strip__list{grid-auto-columns:40%}}
@media (min-width:900px){
  .wk-strip{margin-top:40px}
  .wk-strip__vp{overflow:visible;margin:0;padding:0}
  .wk-strip__list{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
}
.wk-st{margin:0;scroll-snap-align:start}
.wk-st__img{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--line)}
.wk-st__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
a.wk-st__img:hover img{transform:scale(1.03)}
.wk-st figcaption{margin-top:8px;font-size:15px}
@media (max-width:559px){.wk-st figcaption{font-size:14px;letter-spacing:.05em}}
.dark .wk-st__img{background:var(--green-2)}

.wk-more{padding-top:48px}
.wk-more .svc__foot{margin:0}

/* ===== Project page: hero crumbs stay on one line (long project name truncates) ===== */
body[class*="page-proj-"] .crumbs ol{flex-wrap:nowrap;min-width:0}
body[class*="page-proj-"] .crumbs li{flex:none}
body[class*="page-proj-"] .crumbs li:last-child{flex:1 1 auto;min-width:0}
body[class*="page-proj-"] .crumbs li:last-child span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== Project page: facts, story, scope ===== */
.wk-story{padding-top:calc(var(--pad) * .6)}
.wk-facts{margin:0 0 56px}
.wk-facts__wide{grid-column:1/-1}
@media (min-width:768px){
  .wk-facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr)}
  .wk-facts__wide{grid-column:auto}
}
@media (min-width:1024px){.wk-facts{margin-bottom:80px}}
.wk-story__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.wk-prose p{font-size:17.5px}
.wk-prose p:first-child{font-size:19px;color:var(--ink)}
.wk-scope h3{margin-bottom:18px}
.wk-scope .list--diamond{margin:0}
@media (min-width:1024px){
  .wk-story__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:start}
  .wk-scope{position:sticky;top:120px;margin-top:8px}
}

/* ===== Project page: progress pairs ===== */
/* phones: a three-frame set reads as two small frames side by side, then the finished frame full width */
@media (max-width:559px){
  .wk-ba .pair__imgs--3{grid-template-columns:1fr 1fr}
  .wk-ba .pair__imgs--3 figure:last-child{grid-column:1/-1}
  .wk-ba .pair__imgs--3 .pair__tag{font-size:10.5px;letter-spacing:.2em;padding:6px 10px 6px 12px}
}
/* a single pair spans the wrap instead of sitting centered at half width; a two-frame pair puts
   its caption beside the photos (8 / 4), a three-frame set keeps the full width for the photos */
@media (min-width:900px){
  .wk-ba--one .pairs > .pair:only-child{grid-column:1/-1;width:100%;justify-self:stretch}
  .wk-ba--one .pair__cap{max-width:68ch}
}
@media (min-width:1024px){
  .wk-ba--one .pair:only-child:not(:has(.pair__imgs--3)){display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:48px;align-items:end}
  .wk-ba--one .pair:only-child:not(:has(.pair__imgs--3)) .pair__cap{margin:0;padding-bottom:4px}
}

/* ===== Project page: gallery. Dense grid: landscape frames 3:2, portrait frames span two rows
   (close to 4:5); each photo opens the 1600 file in a new tab. ===== */
.wk-gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;grid-auto-flow:dense}
@media (min-width:900px){.wk-gal{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}.wk-gal--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}}
.wk-gal__it{margin:0;display:flex;flex-direction:column;min-width:0}
.wk-gal__it a{display:block;overflow:hidden;background:var(--line)}
.wk-gal__it img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.2s var(--ease)}
.wk-gal__it.is-portrait{grid-row:span 2}
.wk-gal__it.is-portrait a{position:relative;flex:1 0 auto;aspect-ratio:4/5}
.wk-gal__it.is-portrait img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
.wk-gal__it a:hover img{transform:scale(1.03)}
/* a landscape last frame widens to close a short last row (classes set by the template) */
@media (max-width:899px){.wk-gal--fill-m .wk-gal__it:last-child{grid-column:span 2}}
@media (min-width:900px){
  .wk-gal--fill-d .wk-gal__it:last-child{grid-column:span 2}
  /* two columns wide, one 3:2 row tall, so the row keeps one height */
  .wk-gal--fill-d .wk-gal__it:last-child img{aspect-ratio:3.1/1}
}
.wk-gal__it figcaption{margin-top:8px;font-size:15px}
@media (max-width:559px){.wk-gal__it figcaption{font-size:14px;letter-spacing:.05em}}

/* ===== Project page: services on this project ===== */
.wk-svc__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 48px;align-items:center}
.wk-svc h2{font-size:clamp(28px,3vw,38px);color:var(--green)}
@media (min-width:900px){.wk-svc__grid{grid-template-columns:auto minmax(0,1fr)}.wk-svc .linklist{justify-content:flex-end}}

/* ===== Project page: other projects (dark band) ===== */
.wk-rel__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
@media (min-width:768px){.wk-rel__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}}
@media (min-width:1024px){.wk-rel__grid{gap:40px}}
.wk-rc{display:grid;gap:12px;align-content:start;min-width:0}
.wk-rc__img{display:block;overflow:hidden;background:var(--green-2)}
.wk-rc__img img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.2s var(--ease)}
a.wk-rc__img:hover img{transform:scale(1.03)}
.wk-rc .cap{margin:4px 0 0}
.wk-rc h3{font-size:clamp(25px,2.2vw,30px);line-height:1.12;text-wrap:balance}
.wk-rc h3 a{display:inline-block;padding:9px 0 9px;color:inherit;text-decoration:none;background-image:linear-gradient(var(--brass-hi),var(--brass-hi));background-size:0 1px;background-position:0 calc(100% - 7px);background-repeat:no-repeat;transition:background-size .35s var(--ease)}
.wk-rc h3 a:hover,.wk-rc h3 a:focus-visible{background-size:100% 1px}
.wk-rel__all{margin:48px 0 0;padding-top:24px;border-top:1px solid var(--line-dark)}

/* ===== Project page: H1 with a hyphenated compound kept whole (.nw from the template).
   The hero H1's own spans are display:block; the .nw span must stay inline. */
.hero--inner h1 .nw{display:inline}