/* =====================================================================
   Melted House Digital — extras for work.html and work/*.html only.
   Loaded after site.css. Uses the shared tokens; no new colours or fonts.
   ===================================================================== */

/* ---------- sector filter (work.html) ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.chip{display:inline-flex;align-items:center;gap:.55em;padding:11px 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--cream);font-weight:500;font-size:15px;line-height:1.2;cursor:pointer;transition:background-color .3s,border-color .3s,color .3s,transform .5s var(--ease-out)}
.chip:hover{border-color:var(--mag);transform:translateY(-2px)}
.chip .n{font-family:var(--mono);font-size:12px;color:var(--muted);transition:color .3s}
.chip[aria-pressed="true"]{background:var(--mag);border-color:var(--mag);color:var(--on-mag)}
.chip[aria-pressed="true"] .n{color:var(--on-mag-soft)}
.filter-status{color:var(--muted);margin:0 0 clamp(32px,4vw,52px);min-height:1.4em}
.case[hidden]{display:none}
.case-sub{margin-top:-6px}
@media (max-width:520px){.chip{padding:10px 14px;font-size:14px}}

/* ---------- case study ---------- */
.cs-sector{margin:0 0 18px;color:var(--on-mag-soft)}
.cs-facts--gap{margin-top:clamp(36px,5vw,64px)}
.cs-facts dd a{color:var(--mag-hi);text-underline-offset:.18em;overflow-wrap:anywhere}
.cs-body h2{position:sticky;top:120px;align-self:start}
@media (max-width:820px){.cs-body h2{position:static}}
.ph{display:inline-block;padding:14px 18px;border:1px dashed var(--mag-hi);border-radius:var(--radius-sm);color:var(--mag-hi);font-family:var(--mono);font-size:14px;line-height:1.5}

/* full-page screenshot frame; JS scrubs the image, without JS it scrolls natively */
.cs-scroll .split{align-items:center}
.cs-scroll-copy h2{margin-bottom:18px}
.cs-scroll-copy p{max-width:30rem;margin:0 0 24px}
.shot-frame{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--ink-2);border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.shot-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--ink-3)}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.shot-bar i:first-child{background:var(--mag)}
.shot-bar span{margin-left:10px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-view{height:clamp(420px,68vh,720px);overflow-y:auto;overscroll-behavior:contain}
.shot-view img{width:100%;height:auto}
.shot-frame.is-scrub .shot-view{overflow:hidden}
.shot-frame:focus-visible{outline-offset:4px}
@media (max-width:860px){.shot-view{height:min(560px,75vh)}}

/* client quote slot */
.cs-quote{margin:0;padding:clamp(32px,5vw,64px);border-radius:var(--radius);background:var(--cream);color:var(--ink)}
.cs-quote blockquote{margin:0}
.cs-quote p{margin:0;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.15;letter-spacing:-.03em;font-weight:650}
.cs-quote figcaption{margin-top:22px;color:var(--muted-ink)}