/* ==========================================================================
   Phase — work page (work.html)
   The flow system (css/flow.css) in the poster theme (css/home.css supplies
   the palette, the sticker hero, the manifesto and the close; js/home.js
   drives them). The project rotator and grid are still rendered by
   js/work.js from data/work.js, and the industries/areas pieces keep their
   markup and behaviour (css/landing.css, js/landing.js) — this file
   re-dresses all of them:

   - a green disc, so the manifesto is ink on green with a yellow marker
   - the rotator's project pills and the filters as poster chips
   - the live industry pages as a pinned horizontal run of photo cards,
     each carrying one palette colour
   - the map's pins, chips and water in the palette instead of violet
   ========================================================================== */

body.work-page{--hm-ground:var(--p-green)}

/* ==========================================================================
   HERO + MANIFESTO
   ========================================================================== */
.work-page .hm-sun{--s:clamp(250px,28vw,480px);left:62%;top:55%}
.work-page .hm-hero h1{font-size:clamp(4.2rem,17vw,16rem);letter-spacing:-.06em}
/* a highlighter stripe instead of a colour change (no palette colour reads
   on this green) */
.work-page .hm-manifesto .fl-lit-accent{
  background:linear-gradient(transparent 58%,var(--p-yellow) 58%,var(--p-yellow) 92%,transparent 92%);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.work-page .hm-manifesto .fl-lit-accent .fl-w,
.work-page .hm-manifesto .fl-lit-accent:not(:has(.fl-w)){color:#0a0a0a}

/* ==========================================================================
   FEATURED + ALL PROJECTS (js/work.js)
   ========================================================================== */
.wk-featured{padding:clamp(110px,12vw,170px) 0 clamp(50px,6vw,80px)}
.wk-all{padding:clamp(60px,7vw,100px) 0 clamp(110px,12vw,160px)}
.wk-featured .fl-label{margin-bottom:clamp(20px,2.4vw,32px)}

.work-page .stage{border-radius:24px}
.work-page .work-feature__stage{border-radius:24px}
.work-page .work-feature__name{font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:600;letter-spacing:-.03em}
.work-page .work-feature__desc,
.work-page .work-card__desc{font-family:var(--fl-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fl-faint)}
.work-page .work-feature__link{
  color:#0a0a0a;
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
  text-decoration-color:var(--p-yellow);
}
.work-page .work-feature__link:hover{text-decoration-color:var(--p-red)}
.work-page .work-card__name{font-size:1.2rem;font-weight:600;letter-spacing:-.02em}
.work-page .work-card__body{padding:16px 4px 0}
.work-page .work-grid{gap:56px 32px}

/* the rotator's project pills: paper chips, ink when active, the fill a
   yellow progress wash */
.work-page .feature-rotator__dots{gap:8px;margin-top:28px}
.work-page .feature-rotator__dot{
  padding:9px 16px;
  border:1px solid var(--fl-line-2);
  background:var(--fl-surface);
  font-family:var(--fl-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fl-dim);
  box-shadow:none;
}
.work-page .feature-rotator__dot:hover{border-color:#0a0a0a;color:#0a0a0a}
.work-page .feature-rotator__dot.is-active{color:#0a0a0a;border-color:#0a0a0a;box-shadow:0 8px 18px -10px rgba(10,10,10,.45)}
.work-page .feature-rotator__fill{background:var(--p-yellow)}

/* filters */
.wk-all__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px 32px;margin-bottom:clamp(28px,3vw,44px)}
.wk-all__head .fl-label{margin:0}
.work-page .work-filters{margin:0;gap:8px}
.work-page .filter-pill{
  height:auto;
  padding:10px 18px;
  border-radius:var(--radius-pill);
  font-family:var(--fl-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  box-shadow:none;
}
.work-page .filter-pill.btn-secondary{background:var(--fl-surface);color:#0a0a0a;border:1px solid var(--fl-line-2)}
.work-page .filter-pill.btn-secondary:hover{border-color:#0a0a0a;background:var(--fl-surface)}
.work-page .filter-pill.btn-primary,
.work-page .filter-pill.btn-primary:hover{background:#0a0a0a;color:#fff;border:1px solid #0a0a0a}

/* ==========================================================================
   INDUSTRIES — a horizontal run of photo cards
   ========================================================================== */
.wk-ind{background:var(--fl-bg-2)}
.wk-ind .fl-run__head .fl-lede{margin-top:12px}
.wk-ind .fl-run__track{align-items:stretch}
.wk-ind .ind-feature{
  --c:var(--p-yellow);--i:#0a0a0a;
  flex:none;
  width:min(360px,78vw);
  min-height:420px;
  border-radius:26px;
  box-shadow:0 34px 60px -36px rgba(30,20,10,.65);
  scroll-snap-align:start;
}
.wk-ind.is-hscroll .ind-feature{height:min(500px,calc(100svh - var(--fl-nav) - 280px));min-height:340px}
.wk-ind .ind-feature:nth-child(6n+2){--c:var(--p-red)}
.wk-ind .ind-feature:nth-child(6n+3){--c:var(--p-blue);--i:#fff}
.wk-ind .ind-feature:nth-child(6n+4){--c:var(--p-green)}
.wk-ind .ind-feature:nth-child(6n+5){--c:var(--p-pink)}
.wk-ind .ind-feature:nth-child(6n+6){--c:#fff}
.wk-ind .ind-feature__veil{background:linear-gradient(180deg,rgba(10,10,10,.08) 0%,rgba(10,10,10,.12) 40%,rgba(10,10,10,.86) 100%)}
.wk-ind .ind-feature__icon{background:var(--c);color:var(--i);border:0;border-radius:14px}
.wk-ind .ind-badge{
  background:var(--fl-surface);
  border:0;
  color:#0a0a0a;
  font-family:var(--fl-mono);
  font-weight:500;
  letter-spacing:.14em;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.wk-ind .ind-badge i{background:var(--p-green);box-shadow:0 0 0 3px rgba(1,186,78,.25)}
.wk-ind .ind-feature__name{font-size:1.6rem;font-weight:600;letter-spacing:-.03em}
.wk-ind .ind-feature__go{
  align-self:flex-start;
  padding:8px 14px;
  border-radius:var(--radius-pill);
  background:var(--c);
  color:var(--i);
}
.wk-ind .ind-feature:hover{transform:translateY(-6px) rotate(-1deg)}

/* everything else we build for */
.wk-ind-more{padding:clamp(20px,3vw,40px) 0 clamp(100px,11vw,150px);background:var(--fl-bg-2)}
.work-page .ind-groups{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px 40px}
.work-page .ind-group__label{font-family:var(--fl-mono);font-weight:500;letter-spacing:.16em;color:var(--fl-faint)}
.work-page .ind-pill{background:var(--fl-surface);border-color:var(--fl-line);box-shadow:none;font-weight:500}
.work-page .ind-pill .ic{color:#0a0a0a;background:var(--p-yellow)}
.work-page .ind-group:nth-child(2) .ind-pill .ic{background:var(--p-pink)}
.work-page .ind-group:nth-child(3) .ind-pill .ic{background:var(--p-red)}
.work-page .ind-group:nth-child(4) .ind-pill .ic{background:var(--p-green)}
.work-page .ind-group:nth-child(5) .ind-pill .ic{background:#9fc4ff}
.work-page a.ind-pill{cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.work-page a.ind-pill:hover,.work-page a.ind-pill:focus-visible{transform:translateY(-2px);border-color:#0a0a0a;box-shadow:3px 3px 0 #0a0a0a}
.work-page .ind-note{grid-column:1 / -1;color:var(--fl-dim)}
.work-page .ind-note .ic{color:#0a0a0a}
.work-page .ind-note a{color:#0a0a0a;border-bottom:2px solid var(--p-yellow)}

/* ==========================================================================
   AREAS — the map in the palette
   ========================================================================== */
.wk-areas{padding:clamp(110px,12vw,170px) 0 clamp(100px,11vw,150px)}
.work-page .geo__map{background:var(--fl-surface);border:1px solid var(--fl-line);box-shadow:0 40px 70px -44px rgba(60,40,10,.45)}
.work-page .geo__land circle,
.work-page .geo__svg pattern circle{fill:rgba(10,10,10,.22)}
.work-page .geo__halo{fill:rgba(255,77,54,.22)}
.work-page .geo__dot{stroke:#0a0a0a}
.work-page .geo__num{fill:#0a0a0a}
.work-page .geo__pin.is-live .geo__dot,
.work-page .geo__pin.is-hot .geo__dot{fill:var(--p-red);stroke:#fff}
.work-page .geo__pin.is-live .geo__num,
.work-page .geo__pin.is-hot .geo__num{fill:#fff}
.work-page .geo__ring{stroke:var(--p-red)}
.work-page .area-region{background:var(--fl-surface);border-color:var(--fl-line);box-shadow:none}
.work-page .area-region__head h3{font-weight:600;letter-spacing:-.02em}
.work-page .area-region__head p{color:var(--fl-faint)}
.work-page .area-chip{background:var(--fl-bg);border-color:var(--fl-line-2);font-weight:500}
.work-page .area-chip b{color:#0a0a0a;border-color:var(--fl-line-2);background:var(--fl-surface)}
.work-page .area-chip.is-hot{border-color:#0a0a0a;box-shadow:0 8px 18px -10px rgba(10,10,10,.45)}
.work-page .area-chip.is-hot b{background:#0a0a0a;color:#fff}
.work-page .area-chip.is-live{background:#0a0a0a;color:#fff;box-shadow:0 10px 22px -12px rgba(10,10,10,.6)}
.work-page .area-chip.is-live b{background:var(--p-red);border-color:var(--p-red);color:#fff}
.work-page .area-chip.is-live em{background:rgba(255,255,255,.14)}
.work-page .area-chip.is-live em i{background:var(--p-green);box-shadow:0 0 0 3px rgba(1,186,78,.3)}
.work-page .area-chip.is-live:hover{box-shadow:0 16px 28px -12px rgba(10,10,10,.7)}
.work-page .area-chip:focus-visible{outline-color:#0a0a0a}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:700px){
  .work-page .work-grid{grid-template-columns:1fr;gap:40px}
}