/* /14-day/ "Sample work" band (Claude Code, 2026-10-08; Cyrus: "some sample sites… on this 14-day link,
   like some sample work we've done"). The one dark band on the page: the four sites are mostly dark
   designs and read best on ink. Uses landing-b.css tokens (--ink, --lime, --r, --ease-out, drift-a)
   and changes nothing in it. Screenshots are 960x600 desktop + 280x560 phone crops in this folder. */
#work{background:var(--ink);color:#fff;position:relative;isolation:isolate;overflow:hidden;overflow:clip}
#work::before{content:"";position:absolute;z-index:-1;width:640px;height:640px;right:-200px;top:-220px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,hsl(72 100% 55% / .16),hsl(72 100% 55% / 0));animation:drift-a 30s ease-in-out infinite alternate}
#work .sec-head h2{color:#fff}
#work .sec-head p{color:rgba(255,255,255,.72)}
#work .label{color:#fff}
#work .label::before{border-color:#fff}
.work-grid{display:grid;gap:1.25rem}
@media(min-width:820px){.work-grid{grid-template-columns:1fr 1fr;gap:1.5rem}}
.work{display:flex;flex-direction:column;text-decoration:none;color:#fff;background:#16161a;border:1px solid rgba(255,255,255,.12);border-radius:var(--r);overflow:hidden;
  transition:transform .25s var(--ease-out),border-color .15s,box-shadow .25s var(--ease-out)}
.work:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.35);box-shadow:0 24px 40px -28px rgba(0,0,0,.9)}
.work:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.work-shot{position:relative;aspect-ratio:16/10;background:#000;overflow:hidden}
.work-shot .d{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--ease-out)}
.work:hover .work-shot .d{transform:scale(1.03)}
.work-shot .p{position:absolute;right:4%;bottom:-16%;width:22%;height:auto;aspect-ratio:1/2;object-fit:cover;object-position:top;border-radius:12px;border:3px solid #0a0a0c;
  box-shadow:0 0 0 1px rgba(255,255,255,.28),0 18px 30px -10px rgba(0,0,0,.7);transition:transform .5s var(--ease-out)}
.work:hover .work-shot .p{transform:translateY(-6%)}
.work-meta{padding:1.2rem 1.3rem 1.35rem;display:grid;gap:.35rem}
.work-meta small{font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.work-meta h3{color:#fff;font-family:"Archivo Black",sans-serif;font-weight:400;font-size:1.35rem;letter-spacing:-.01em}
.work-meta p{margin:0;color:rgba(255,255,255,.75);font-size:.96rem;line-height:1.55}
.work-foot{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-top:.55rem}
.work-tag{font-size:.78rem;font-weight:700;padding:.25rem .65rem;border-radius:99px;border:1px solid rgba(255,255,255,.3);color:#fff;white-space:nowrap}
.work-tag.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);margin-right:.45rem;vertical-align:1px}
.work-open{font-weight:700;font-size:.92rem;color:var(--lime);white-space:nowrap}
.work-note{margin:1.4rem 0 0;color:rgba(255,255,255,.62);font-size:.9rem;max-width:720px}
@media(max-width:560px){.work-shot .p{border-width:2px;border-radius:9px}.work-meta{padding:1.05rem 1.1rem 1.2rem}}
@media(prefers-reduced-motion:reduce){#work::before{animation:none}.work,.work-shot .d,.work-shot .p{transition:none}
  .work:hover,.work:hover .work-shot .d,.work:hover .work-shot .p{transform:none}}