/* ===== Selected projects (editorial rows + network graph) ===== */
.work { --w-bg: #121413; --w-fg: #eef1ee; --w-mut: #8d948f; --w-line: rgba(255,255,255,.12); background: var(--w-bg); color: var(--w-fg); padding: clamp(90px,12vw,170px) 0; position: relative; border-block: 1px solid var(--w-line); }
.work-top { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; margin-bottom: 70px; }
.work-label { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding-top: 14px; color: var(--w-fg); }
.work-label svg { color: var(--a2); }

/* graph */
.graph { position: relative; height: clamp(340px, 52vw, 520px); margin-bottom: 80px; border: 1px solid var(--w-line); border-radius: 22px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(139,92,246,.10), transparent 60%), #0b0d0c; }
.graph canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.graph canvas.drag { cursor: grabbing; } .graph canvas.hov { cursor: pointer; }
.graph-hint { position: absolute; left: 18px; bottom: 14px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--w-mut); pointer-events: none; }
.graph-hint i { width: 8px; height: 8px; border-radius: 50%; background: var(--a2); box-shadow: 0 0 0 0 rgba(34,211,238,.6); animation: ping2 2s infinite; }
@keyframes ping2 { to { box-shadow: 0 0 0 12px rgba(34,211,238,0); } }
.graph-clear { position: absolute; top: 14px; right: 14px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--w-line); background: rgba(0,0,0,.55); color: var(--w-fg); font-size: 12.5px; cursor: pointer; backdrop-filter: blur(8px); }
.graph-clear b { color: var(--a2); font-weight: 600; }

/* rows */
.rows { border-top: 1px solid var(--w-line); }
.proj { padding: 38px 0 44px; border-bottom: 1px solid var(--w-line); transition: opacity .4s; }
.rows:hover .proj { opacity: .45; } .rows .proj:hover { opacity: 1; }
.proj.hide, .proj.more:not(.shown) { display: none; }
.row-head { display: flex; align-items: baseline; gap: 20px; }
.row-n { font: 500 13px var(--hd); color: var(--w-mut); min-width: 28px; }
.row-t { font: 500 clamp(26px, 3.4vw, 40px) var(--hd); letter-spacing: -.02em; flex: 1; transition: transform .5s cubic-bezier(.2,.7,.2,1), color .3s; }
.proj:hover .row-t { transform: translateX(10px); color: var(--a2); }
.row-go { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--w-line); color: var(--w-fg); white-space: nowrap; transition: .3s; }
a.row-go:hover { background: var(--w-fg); color: var(--w-bg); }
span.row-go { color: var(--w-mut); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px 48px; }
.chips span { font: 500 11px/1 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 9px 12px; background: #000; border: 1px solid var(--w-line); border-radius: 4px; color: var(--w-fg); }
.chips .chip-cat { background: var(--w-fg); color: var(--w-bg); border-color: var(--w-fg); }
.row-d { margin: 0 0 24px 48px; max-width: 640px; color: #c3c9c5; font-size: 15.5px; }

.strip { margin-left: 48px; display: flex; gap: 16px; height: 250px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.strip::-webkit-scrollbar { display: none; }
.strip > * { flex: none; height: 100%; margin: 0; scroll-snap-align: start; }
.s-phone { display: grid; place-items: center; padding: 0 22px; border-radius: 12px; background: hsl(var(--h) 45% 14%); border: 1px solid var(--w-line); }
.s-phone .phone.mini { width: auto; height: 218px; aspect-ratio: 390 / 844; padding: 5px; border-radius: 24px; --rot: 0deg; }
.s-phone .ph-screen { border-radius: 19px; }
.s-phone .ph-island { top: 4px; width: 5px; height: 5px; margin-left: -2.5px; }
.s-phone .ph-btn { display: none; }
.proj:hover .phone.mini { transform: translateY(-6px) scale(1.03); }
.s-img { overflow: hidden; border-radius: 12px; background: #1b1e1c; border: 1px solid var(--w-line); }
.s-img img { height: 100%; width: auto; max-width: none; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.proj:hover .s-img img { transform: scale(1.07); }
.s-card { display: grid; align-content: end; gap: 6px; width: 260px; padding: 20px; border-radius: 12px; border: 1px dashed var(--w-line); background: linear-gradient(160deg, hsl(var(--h) 55% 18%), transparent); }
.s-card span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--w-mut); }
.s-card b { font: 500 20px var(--hd); }

/* reveal inside strip (clip-path wipe, staggered) */
.js .strip > * { clip-path: inset(0 100% 0 0 round 12px); transition: clip-path 1s cubic-bezier(.7,0,.2,1); }
.js .proj.in .strip > * { clip-path: inset(0 0 0 0 round 12px); }
.js .proj.in .strip > *:nth-child(2) { transition-delay: .12s; } .js .proj.in .strip > *:nth-child(3) { transition-delay: .24s; } .js .proj.in .strip > *:nth-child(4) { transition-delay: .36s; }
.js .proj .row-head, .js .proj .chips, .js .proj .row-d { opacity: 0; transform: translateY(26px); transition: opacity .8s, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .proj.in .row-head, .js .proj.in .chips, .js .proj.in .row-d { opacity: 1; transform: none; }
.js .proj.in .chips { transition-delay: .08s; } .js .proj.in .row-d { transition-delay: .16s; }

.more-wrap { text-align: center; margin-top: 56px; }
.btn-more { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; border: 0; border-radius: 6px; background: #000; color: #fff; font: 600 14px var(--bd); cursor: pointer; outline: 1px solid var(--w-line); transition: .3s; }
.btn-more:hover { background: var(--w-fg); color: var(--w-bg); transform: translateY(-3px); }


@media (max-width: 900px) {
  .work-top { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
  .work-label { padding-top: 0; }
}
@media (max-width: 640px) {
  .work { padding: 80px 0 90px; }
  .row-head { flex-wrap: wrap; gap: 10px 14px; } .row-t { flex-basis: calc(100% - 50px); }
  .row-go { margin-left: 42px; }
  .chips, .row-d, .strip { margin-left: 0; }
  .strip { height: 220px; } .s-phone .phone.mini { height: 190px; }
  .rows:hover .proj { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scrub .w { opacity: 1; }
  .js .strip > *, .js .proj .row-head, .js .proj .chips, .js .proj .row-d { clip-path: none; opacity: 1; transform: none; }
}

/* ===== gallery ring ("projects in motion") ===== */
.orbit { position: relative; height: 380vh; background: #000; }
.orbit-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.orbit-stage { position: relative; width: 100%; height: 100%; --cw: clamp(140px, 13.5vw, 250px); transform-style: preserve-3d; will-change: transform; }
.orbit-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 2; pointer-events: none; display: grid; gap: 14px; white-space: nowrap; }
.orbit-center h2 { font-size: clamp(34px, 4.6vw, 64px); font-weight: 300; letter-spacing: -.045em; }
.orbit-center span { font: 400 12px var(--mono); letter-spacing: .16em; color: #b9d6ff; }
.o-card { position: absolute; left: 50%; top: 50%; width: var(--cw); aspect-ratio: 16 / 10; margin: calc(var(--cw) * -.3125) 0 0 calc(var(--cw) * -.5); border-radius: 8px; overflow: hidden; background: #111; box-shadow: 0 18px 50px -12px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); opacity: 0; will-change: transform; transition: filter .4s, box-shadow .4s; }
.o-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; pointer-events: none; }
.o-card:hover { filter: brightness(1.18); box-shadow: 0 24px 70px -10px rgba(0,0,0,.95), 0 0 0 1.5px var(--acc); z-index: 3; }

/* desktop screenshot in browser frame (project rows) */
.s-desk { display: flex; flex-direction: column; width: 400px; border-radius: 12px; overflow: hidden; background: #0b0c0b; border: 1px solid var(--w-line); }
.bframe { display: flex; align-items: center; gap: 12px; height: 28px; padding: 0 12px; background: #1b1d1c; border-bottom: 1px solid var(--w-line); flex: none; }
.bframe span { display: flex; gap: 5px; } .bframe i { width: 7px; height: 7px; border-radius: 50%; background: #3b3f3d; }
.bframe b { flex: 1; text-align: center; font: 400 10.5px var(--mono); color: var(--w-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-desk img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top; transition: object-position 4s ease-in-out, transform .8s var(--ease); }
.proj:hover .s-desk img { object-position: bottom; transform: scale(1.03); }

/* signature footer */
.sign { margin: 70px 0 20px; display: grid; justify-items: center; gap: 4px; text-align: center; }
.sign-note { font: 400 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.sign-wrap { position: relative; display: inline-block; padding: 0 .4em; }
.sign-text { display: inline-block; font: 400 clamp(96px, 19vw, 280px)/1.05 'Mrs Saint Delafield', cursive; color: #fff; transform: rotate(-4deg); padding: .05em .12em .12em; clip-path: inset(-20% 100% -20% 0); transition: clip-path 3s cubic-bezier(.55,.1,.3,1) .3s; text-shadow: 0 0 40px rgba(215,255,63,.12); }
.sign.in .sign-text { clip-path: inset(-20% -10% -20% 0); }
.sign-line { position: absolute; left: 4%; bottom: 8%; width: 92%; height: .28em; font-size: clamp(96px, 19vw, 280px); overflow: visible; }
.sign-line path { fill: none; stroke: var(--acc); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s cubic-bezier(.6,.1,.3,1) 3s; }
.sign.in .sign-line path { stroke-dashoffset: 0; }
.sign-role { margin-top: 6px; font: 400 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 760px) {
  .orbit { height: 320vh; } .orbit-stage { --cw: clamp(104px, 30vw, 150px); }
  .s-desk { width: 300px; }
}
@media (prefers-reduced-motion: reduce) { .sign-text { clip-path: none; } .sign-line path { stroke-dashoffset: 0; } }