/* Web page. Loads after erp.css and reuses its shell (.panel, .c-idx, .c-grp,
   .c-cta, .kick) — only the browser windows are new.

   The work shown here is this site's own three pages. There is no client
   screenshot because the only site we could show belongs to the operator this
   whole business came out of, and putting his brand on a portfolio page would
   be a leak dressed as a credential. */

#work{padding-block:clamp(40px,5vh,68px)}
#work .wrap{max-width:1560px}
#work h2,#work .pi.wide h2{font-size:clamp(26px,3.4vw,48px);margin-top:16px}

.w-wins{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,28px);
  padding:clamp(20px,3vh,40px) 0 clamp(18px,2.6vh,32px)}
.w-win{margin:0;border-radius:11px;overflow:hidden;background:#0b0d12;
  border:1px solid color-mix(in srgb,var(--fg) 15%,transparent);
  box-shadow:0 18px 46px rgba(0,0,0,.5);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .4s,box-shadow .4s}
.w-win:hover{transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--k) 55%,transparent);
  box-shadow:0 26px 60px rgba(0,0,0,.62)}
.w-bar{display:flex;align-items:center;gap:6px;padding:8px 11px;
  background:rgba(255,255,255,.045);border-bottom:1px solid var(--line)}
.w-bar i{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none}
.w-bar span{margin-left:8px;font-size:10.5px;letter-spacing:.04em;color:var(--fg3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-win a{display:block}
.w-win img{display:block;width:100%;height:auto}

@media (min-width:901px){
  /* The row of three and the chips below share one screen, so the window shows
     as much of the page as the leftover height allows and crops the rest.
     100% was meaningless here — the parent has no height of its own, so the
     image kept its natural 900px and pushed the section past the fold. The
     25svh - 78px is fitted to two measured points, not guessed: everything
     other than the image measures 756px at a 900px viewport and 657px at
     768px, and that difference is what the slope encodes. */
  .w-win img{height:clamp(150px, calc(32svh - 88px), 340px);
    object-fit:cover;object-position:top}
}
@media (max-width:900px){
  .w-wins{grid-template-columns:1fr;gap:14px}
  .w-win:nth-child(n+3){display:none}
}
@media (min-width:901px) and (max-height:820px){
  .w-wins{padding:18px 0 16px}
  .w-bar{padding:6px 9px}
  /* on a short laptop the chips give up a little so the windows stay legible */
  #work .c-grp li{padding:6px 13px;font-size:13px}
  #work .c-grp{gap:7px}
  #work .c-grp h3{font-size:11px}
}

/* Four groups in a three-column grid means two rows, and at 1280 that cost
   316px against 241 at a wider window — the chips, not the windows, were
   pushing the section past the fold. Four columns puts them on one row. */
@media (min-width:1180px){
  #work .c-idx{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:901px) and (max-width:1179px){
  #work .c-idx{grid-template-columns:repeat(2,1fr)}
}

/* Same reason as erp.css: this file loads last, so the phone rule has to be
   here or the address bar keeps its 10.5px. */
@media (max-width:720px){
  .w-bar span{font-size:12px}
  .w-bar{padding:9px 11px}
}

@media (max-width:720px){
  .w-bar span{font-size:12px}
  #work .c-grp h3{font-size:12px}
}

@media (max-width:720px){
  #work h2,#work .pi.wide h2{font-size:clamp(34px,12vw,54px);margin-top:14px}
}