/* work.css — the /work/ index. Inherits every token, the shell and the reveal
   system from portfolio.css; only the index-specific pieces live here. */

/* screen-reader-only heading (first use in the system, kept generic) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- Intro --------------------------------------------------------------- */
.work-intro{padding-top:clamp(110px,16vh,170px);padding-bottom:0;
  position:relative;overflow:clip}
.work-intro::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 80% at 82% -20%,var(--accent-glow),transparent 62%)}
.work-intro h1{margin:.6rem 0 0}
.work-intro__lede{margin-top:1.2rem;max-width:56ch}

/* ---- Filter bar ---------------------------------------------------------- */
/* Real buttons, one rail. Below 760px it scrolls sideways rather than wrapping
   into a block of chips that would push the work itself off-screen; from 760px
   up there is room to wrap, so nothing is ever hidden past the right edge. */
.wfilters{display:flex;gap:.5rem;overflow-x:auto;overscroll-behavior-x:contain;
  padding-bottom:.5rem;margin-bottom:1rem;scrollbar-width:thin}
@media(min-width:760px){
  .wfilters{flex-wrap:wrap;overflow-x:visible;gap:.6rem;padding-bottom:0;margin-bottom:1.2rem}
}
.wfilter{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1rem;border-radius:999px;border:1px solid var(--line-2);
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;color:var(--ink-2);
  background:var(--bg-1);transition:color .2s,border-color .2s,background .2s}
.wfilter:hover{color:var(--ink);border-color:var(--ink-3)}
.wfilter__n{font-size:.7rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.wfilter[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.wfilter[aria-pressed="true"] .wfilter__n{color:var(--accent-ink);opacity:.7}
.no-js .wfilters{display:none}

.wcount{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:clamp(1.6rem,3.5vw,2.6rem)}
.no-js .wcount{display:none}

/* ---- Card grid ----------------------------------------------------------- */
.wgrid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3.4vw,2.8rem)}
@media(min-width:760px){.wgrid{grid-template-columns:1fr 1fr}}

.wcard{display:flex;flex-direction:column;gap:1rem}
.wcard[hidden]{display:none}
.wcard__media{display:block;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-1);aspect-ratio:16/10;
  box-shadow:0 30px 70px -46px rgba(0,0,0,.9);transition:border-color .3s,box-shadow .3s}
.wcard__media img{width:100%;height:100%;object-fit:cover;object-position:top;
  transition:transform .8s var(--ease)}
.wcard:hover .wcard__media{border-color:color-mix(in oklab,var(--p-accent) 45%,var(--line));
  box-shadow:0 26px 60px -34px var(--accent-glow)}
.wcard:hover .wcard__media img{transform:scale(1.035)}

.wcard__body{display:flex;flex-direction:column;gap:.55rem}
.wcard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3)}
.wcard__meta .wcard__cat{color:var(--p-accent)}
.wcard__title{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.1}
.wcard__title a{background:linear-gradient(var(--p-accent),var(--p-accent)) no-repeat left bottom/0% 2px;
  transition:background-size .4s var(--ease)}
.wcard:hover .wcard__title a{background-size:100% 2px}
.wcard__sum{color:var(--ink-2);font-size:.95rem;max-width:52ch}
.wcard__tech{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.15rem}
.wcard__foot{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:.3rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
/* Plain label, not another pill: the tech chips above it already own that shape,
   and two pill rows in one card read as one undifferentiated pile. */
.wcard__group{color:var(--ink-3)}
.wcard__group::before{content:"";display:inline-block;width:1.4rem;height:1px;
  background:var(--line-2);vertical-align:middle;margin-right:.5rem}
.wcard__live{display:inline-flex;align-items:center;gap:.45rem;color:var(--p-accent)}
.wcard__live .live{width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---- Empty state --------------------------------------------------------- */
.wempty{margin-top:2rem;color:var(--ink-2)}
.wempty__reset{color:var(--ink);border-bottom:1px dashed var(--line-2);padding-bottom:1px}
.wempty__reset:hover{color:var(--accent-text)}

@media(prefers-reduced-motion:reduce){
  .wcard,.wcard__media,.wcard__media img{transition:none}
}