/* projects.css: Business and tools (/projects/), Skills (/skills/) and the BYB case study's evidence (round 4, option A; owner pick 29 Oct 2026).
   Every size, colour and radius is a site token. Named components:
   .shot / .shot-row  a screenshot or detail crop: hairline, inner radius, caption. No drawn window. Also on /work/ecommerce-business/.
   .sig               a signature band: Home's skyband grid (proof.css .skb) on a plain ground, for pages that aren't Home.
   .sk-*              the Skills list: one ranked list with hairlines (the Work page's cs-rows rhythm).
   .jobs              a two-column list of scheduled jobs (Claude HQ). */

/* .shot: one screenshot or crop */
.shot { margin: 0; min-width: 0; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-inner); background: var(--surface); }
.shot figcaption { margin: var(--sp1) 0 0; font: 400 var(--fs-label)/1.45 var(--sans); color: var(--muted); }
.shot .rv-tag { margin-bottom: var(--sp1); }
.shot-row { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: var(--sp3); align-items: end; }
.shot-row.even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.shot-row + .shot-row { margin-top: var(--sp4); }
@media (max-width: 760px) { .shot-row, .shot-row.even { grid-template-columns: minmax(0, 1fr); } .shot-row .shot.ph { max-width: calc(var(--sp16) * 2); } }

/* .sig: headline number + figure, the Home skyband grid on a plain or band ground */
.sig { padding-block: var(--sp10); }
.sig .skb-in { align-items: start; }
.sig-wide .skb-in { grid-template-columns: minmax(0, 1fr); }
.sig .fl-n { margin-top: var(--sp1); }
.sig .btns { display: flex; flex-wrap: wrap; gap: var(--sp1); }

/* Skills: one ranked list, hairlines between rows (the Work page's cs-rows rhythm), no cards or pills */
.sk-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sk-r { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp1) var(--sp4); padding: var(--sp3) 0; border-bottom: 1px solid var(--line); scroll-margin-top: var(--sp12); }
.sk-t { margin: 0; font: 600 var(--fs-h3)/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.sk-f { display: flex; align-items: center; gap: var(--sp1); margin: var(--sp1) 0 0; font: 400 var(--fs-label)/1.4 var(--sans); color: var(--muted); }
.sk-f .tnum { color: var(--ink-2); }
.sk-bar { position: relative; flex: 0 0 var(--sp12); height: 2px; background: var(--line-2); }
.sk-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); background: var(--muted); }
.sk-bar.hot::after { background: var(--warm); }
.sk-p { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp1); }
.sk-p li { font: 400 var(--fs-card)/1.45 var(--sans); color: var(--ink); }
.sk-p a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .2em; }
.sk-p a:hover, .sk-p a:focus-visible { text-decoration-color: currentColor; }
.sk-kind { margin-left: var(--sp1); font-size: var(--fs-label); color: var(--muted); }
.sk-note { margin: var(--sp1) 0 0; font: 400 var(--fs-label)/1.5 var(--sans); color: var(--muted); }
.sk-src { max-width: 70ch; margin: var(--sp3) 0 0; font: 400 var(--fs-label)/1.5 var(--sans); color: var(--muted); }
.sk-moved { margin: var(--sp2) 0 0; max-width: 60ch; font: 400 var(--fs-body)/1.5 var(--sans); color: var(--ink-2); }
.sk-moved a { color: var(--accent); white-space: nowrap; }
@media (max-width: 760px) { .sk-r { grid-template-columns: minmax(0, 1fr); } }
.jobs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.jobs li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-h) var(--sp2); padding: var(--sp1) 0; border-bottom: 1px solid var(--line); font: 400 var(--fs-card)/1.45 var(--sans); color: var(--ink); }
.jobs li span { color: var(--muted); font-size: var(--fs-label); }
body.csv .csv-hero .rv-tag { color: var(--cv-mute); }