/* ===== THE FOUNDRY (W01) — the work. Colours: tokens only (see PALETTE block in momentum.css) ===== */
body[data-world="work"] h1 em, body[data-world="work"] h2 em { color: var(--accent); }
.wk-sec { position: relative; padding: 14vh 0; }
.wk-head { padding: 0 var(--pad); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "l l" "h b"; gap: 0 4rem; align-items: end; max-width: 90rem; }
.wk-head .label { grid-area: l; }
.wk-head h2 { grid-area: h; font-size: clamp(2.5rem, 1.7rem + 3.6vw, 6rem); }
.wk-body { grid-area: b; margin: 0; max-width: 34rem; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); color: var(--ink); }

/* ---------- device frames ---------- */
.dev { position: relative; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 9%, var(--bg)); box-shadow: 0 40px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.2); overflow: hidden; }
.dev-bar { height: 2rem; display: flex; align-items: center; gap: .4rem; padding: 0 .8rem; border-bottom: 1px solid var(--line); }
.dev-bar i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 28%, transparent); }
.dev-bar i:first-child { background: var(--accent); }
.dev-bar span { margin-left: .8rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; color: var(--muted); background: color-mix(in srgb, var(--ink) 7%, transparent); padding: .15rem .8rem; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.dev-screen { position: relative; overflow: hidden; background: var(--bg); }
.dev-screen img, .dev-screen video { display: block; width: 100%; height: auto; }
.dev-phone { border-radius: 2.3rem; padding: .55rem; }
.dev-phone .dev-screen { border-radius: 1.8rem; }
.dev-phone::before { content: ""; position: absolute; top: 1rem; left: 50%; width: 28%; height: .9rem; transform: translateX(-50%); border-radius: 999px; background: rgba(0,0,0,.85); z-index: 2; }
a.lb { display: block; position: relative; color: inherit; }
a.lb::after { content: "+"; position: absolute; right: .8rem; bottom: .8rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--bg); font-family: var(--mono); font-size: 1.2rem; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s; }
a.lb:hover::after, a.lb:focus-visible::after { opacity: 1; transform: none; }
a.lb:focus-visible { outline-offset: -3px; }

/* ---------- project hero ---------- */
.wk-hero { position: relative; padding: 8rem var(--pad) 4rem; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.wk-hero-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem 4rem; align-items: center; }
.wk-hero h1 { font-size: clamp(3.6rem, 1.6rem + 8vw, 11rem); line-height: .85; margin-bottom: 1rem; }
.wk-kicker { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); line-height: 1.1; color: var(--accent); margin: 0 0 1.4rem; }
.wk-hero .lede { font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); }
.wk-hero-shot { perspective: 1800px; }
.wk-hero-shot .dev { transform-origin: 30% 60%; }
html:not(.motion) .wk-hero-shot .dev { transform: rotateY(-8deg) rotateX(4deg); }
.wk-meta { margin-top: 3rem; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); max-width: none; }
.wk-meta dd a { color: var(--accent); }
.wk-switch { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.wk-switch a { text-decoration: none; padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 999px; display: inline-flex; gap: .5rem; align-items: baseline; transition: border-color .25s, background .25s, color .25s; }
.wk-switch a small { color: var(--muted); font-size: .9em; }
.wk-switch a:hover { border-color: var(--accent); }
.wk-switch a[aria-current] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.wk-switch a[aria-current] small { color: var(--bg); }
.wk-switch-all { margin-left: auto; }

/* ---------- horizontal galleries ---------- */
.hs-pin { padding: 0; }
.hs-viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 3rem var(--pad) 1.4rem; scrollbar-color: var(--accent) transparent; }
.hs-viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
.hs-track { display: flex; align-items: flex-end; gap: clamp(1.2rem, 3vw, 3.2rem); width: max-content; }
.hs-item { --hs-h: min(54vh, 560px); --h: min(var(--hs-h), calc(80vw / var(--arn))); flex: none; margin: 0; scroll-snap-align: center; }
.hs-item .dev-screen { height: var(--h); width: calc(var(--h) * var(--arn)); }
.hs-item .dev-screen picture, .hs-item .dev-screen a.lb { height: 100%; }
.hs-item .dev-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hs-item .is-tall .dev-screen img { height: auto; }
.hs-item .is-tall .dev-screen a.lb, .hs-item .is-tall .dev-screen picture { height: auto; }
.hs-phone .dev-screen { height: calc(var(--hs-h) - 1.1rem + 2rem); width: calc((var(--hs-h) + .9rem) * var(--arn)); }
html:not(.motion) .is-tall .dev-screen { overflow-y: auto; }
/* v5: a long caption must not stretch the phone bezel wider than its screen */
.hs-item.hs-phone { width: min-content; }
.hs-item.hs-phone figcaption { max-width: none; }
.hs-item figcaption { margin-top: .9rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; display: flex; flex-wrap: wrap; gap: .3rem .8rem; max-width: 34rem; }
.hs-item figcaption b { font-weight: 500; color: var(--ink); text-transform: uppercase; letter-spacing: .12em; }
.hs-item figcaption span { color: var(--muted); }
.hs-pan-hint { color: var(--accent) !important; }
html:not(.motion) .hs-pan-hint { display: none; }
.hs-end { flex: none; width: 15rem; align-self: center; margin: 0; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hs-end span { display: block; font-family: var(--serif); font-style: italic; font-size: 5rem; line-height: 1; color: var(--accent); letter-spacing: 0; text-transform: none; }
.hs-progress { height: 2px; margin: 0 var(--pad); background: var(--line); display: none; }
.hs-progress i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
/* pinned (motion + desktop): JS drives the track */
.hs.is-pinned .hs-pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 4.5rem; }
.hs.is-pinned .hs-viewport { overflow: visible; scroll-snap-type: none; }
.hs.is-pinned .hs-progress { display: block; }
.hs.is-pinned { padding: 0; }
.hs.is-pinned .hs-item { --hs-h: min(52vh, 600px); }

/* ---------- old world / new world compare ---------- */
.cmp-sec { padding-left: 0; padding-right: 0; }
.cmp-sec > .cmp, .cmp-tabs { margin-left: var(--pad); margin-right: var(--pad); }
.cmp-tabs, .spec-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; margin-bottom: 1.2rem; }
.cmp-tab { font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: .6rem 1.1rem; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.cmp-tab:hover { border-color: var(--accent); }
.cmp-tab[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
html:not(.js) .cmp-tabs, html:not(.js) .spec-tabs { display: none; }
.cmp { display: none; }
.cmp.is-on, html:not(.js) .cmp { display: block; }
html:not(.js) .cmp + .cmp { margin-top: 3rem; }
.cmp-stage { position: relative; aspect-ratio: var(--arn); max-width: min(84rem, calc((100vh - 13rem) * var(--arn))); border-radius: 12px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 90px -30px rgba(0,0,0,.75); touch-action: pan-y; user-select: none; }
.cmp-stage figure { position: absolute; inset: 0; margin: 0; }
.cmp-stage img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cmp-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cmp-stage figcaption { position: absolute; bottom: 1rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; background: var(--panel); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); }
.cmp-stage figcaption b { color: var(--accent); font-weight: 500; margin-right: .4rem; }
.cmp-before figcaption { left: 1rem; }
.cmp-after figcaption { right: 1rem; }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; box-shadow: 0 0 24px var(--accent); }
.cmp-handle i { position: absolute; top: 50%; left: 50%; width: 3.2rem; height: 3.2rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--accent); color: var(--bg); display: grid; place-items: center; font-style: normal; font-size: 1.3rem; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.cmp-stage:has(.cmp-range:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.cmp-zoom { display: flex; gap: 1.5rem; margin-top: 1rem; font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.cmp-zoom a { display: inline; color: var(--accent); text-underline-offset: .3em; }
.cmp-zoom a::after { display: none; }
html:not(.js) .cmp-stage { max-width: 84rem; aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; overflow: visible; border: 0; box-shadow: none; }
html:not(.js) .cmp-stage figure { position: relative; }
html:not(.js) .cmp-before { order: -1; clip-path: none; }
html:not(.js) .cmp-handle, html:not(.js) .cmp-range { display: none; }

/* ---------- persona fan ---------- */
.fan { display: flex; justify-content: center; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); padding: 5rem var(--pad) 0; }
.fan-card { margin: 0; width: min(25rem, 27vw); border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); transform: rotate(calc((var(--i) - 1) * 3deg)); }
.fan-card img { width: 100%; height: auto; }

/* ---------- design system bento ---------- */
.bento { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.2rem; padding: 3rem var(--pad) 0; }
.bento-item { margin: 0; padding: 1rem; background: color-mix(in srgb, var(--ink) 6%, var(--bg)); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: .8rem; }
.bento-item img { width: 100%; height: auto; border-radius: 6px; }
.bento-item.b0 { grid-row: span 2; justify-content: center; }
.bento-item.b2 picture { max-width: 12rem; }
.bento-item figcaption, .brand-grid figcaption, .id-item figcaption, .duo figcaption { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------- duo ---------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 34rem)); gap: 2rem; padding: 3rem var(--pad) 0; }
.duo figure { margin: 0; }
.duo figcaption { margin-top: .8rem; display: flex; gap: .8rem; }
.duo figcaption b { color: var(--ink); font-weight: 500; }

/* ---------- social wall ---------- */
.wall { columns: 5 13rem; column-gap: 1.4rem; padding: 3.5rem var(--pad) 0; }
.post { break-inside: avoid; margin: 0 0 1.4rem; position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 60px -25px rgba(0,0,0,.8); transform: rotate(var(--r)); transition: transform .5s cubic-bezier(.2,.9,.2,1.3); }
.post:hover, .post:focus-within, .post.is-hot { transform: rotate(0) scale(1.035); z-index: 2; }
.post img { width: 100%; height: auto; }
.post figcaption { position: absolute; left: .6rem; top: .6rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; background: var(--panel); color: var(--ink); padding: .3rem .6rem; border-radius: 999px; pointer-events: none; }
.wall.is-few { columns: 2 16rem; max-width: 46rem; }
.wall-links { padding: 0 var(--pad); margin-top: 2.5rem; }

/* ---------- brand (Hike) ---------- */
.brand-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: center; padding: 3rem var(--pad) 0; }
.brand-grid figure { margin: 0; display: flex; flex-direction: column; gap: .8rem; }
.brand-grid img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.75); }
.brand-logo picture { max-width: 30rem; }
.brand-cards { perspective: 1400px; }
.brand-cards a.lb { transition: transform .4s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }

/* ---------- spec ↔ screen ---------- */
.spec { padding: 0 var(--pad); }
.spec-stage { display: grid; max-width: min(72rem, 95vh); }
.spec-stage figure { grid-area: 1 / 1; margin: 0; transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
.spec-stage figcaption { margin-top: .9rem; font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.spec-stage figcaption b { color: var(--accent); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; margin-right: .5rem; }
.spec-stage .spec-b { opacity: 0; transform: translate(2.5rem, 1.5rem) rotate(1.5deg); pointer-events: none; }
.spec[data-state="screen"] .spec-a { opacity: 0; transform: translate(-2.5rem, -1rem) rotate(-1.5deg); pointer-events: none; }
.spec[data-state="screen"] .spec-b { opacity: 1; transform: none; pointer-events: auto; }
html:not(.js) .spec-stage { grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: none; }
html:not(.js) .spec-stage figure { grid-area: auto; }
html:not(.js) .spec-stage .spec-b { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- video ---------- */
.video-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; align-items: center; padding-right: var(--pad); }
.video-grid .wk-head { grid-template-columns: 1fr; grid-template-areas: "l" "h" "b"; gap: 0; }
.video-grid .wk-head h2 { margin-bottom: 1.4rem; }
.video-fig { margin: 0; }
.video-fig figcaption { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.vid-toggle { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: .5rem .9rem; cursor: pointer; }
.vid-toggle:hover { border-color: var(--accent); }

/* ---------- name morph (Radian) ---------- */
.morph-pin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2rem; min-height: 100vh; }
.morph-pin .wk-head { grid-template-columns: 1fr; grid-template-areas: "l" "h" "b"; }
.morph-pin .wk-head h2 { margin-bottom: 1.4rem; }
.morph-stage { padding-right: var(--pad); display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.morph-word { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 75%; font-size: clamp(3rem, 1.5rem + 5vw, 7.5rem); letter-spacing: .06em; line-height: 1; color: var(--ink); white-space: nowrap; }
.morph-word .ch { display: inline-block; }
.has-field .morph-sec.is-live .morph-word { visibility: hidden; height: 11rem; }
.morph-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .9rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; color: var(--muted); }
.morph-steps li { transition: color .3s; }
.morph-steps li.on { color: var(--accent); }
.morph-steps li + li::before { content: "→ "; color: var(--line); }
.morph-mark { color: var(--ink); width: min(22rem, 60%); opacity: .3; transition: opacity .6s, transform .6s; }
.morph-sec.is-done .morph-mark, html:not(.motion) .morph-mark { opacity: 1; transform: scale(1.05); }
.radian-wordmark { width: 100%; height: auto; }
.id-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .42fr); gap: 1.2rem; padding: 4rem var(--pad) 0; }
.id-item { margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.id-item img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.id-item.i2 { grid-column: 3; grid-row: 1 / span 2; }
.id-item.i5 { grid-column: 1 / span 2; }

/* ---------- Foundry landing: the pile ---------- */
.forge { position: relative; min-height: 230vh; }
.forge-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
/* stacking: the copy (z 3) always sits above the physics pile (z 2), so a thrown screen slides under the text.
   The copy box ignores the pointer so screens beneath it stay draggable; only the hint pills take hits. */
.forge-copy { position: relative; z-index: 3; padding: 7.5rem var(--pad) 0; max-width: 64rem; pointer-events: none; }
.forge-copy h1 { width: fit-content; font-size: clamp(3rem, 1.4rem + 6.2vw, 8.6rem); line-height: .88; margin-bottom: 1.6rem; text-shadow: 0 0 30px var(--bg); }
.forge-copy .lede { max-width: 34rem; text-shadow: 0 0 18px var(--bg), 0 0 6px var(--bg); }
.forge-copy .hint { margin-top: 1rem; opacity: calc(1 - var(--align, 0) * 3); }
.forge-copy .lede { display: inline-block; background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: .5rem .9rem; margin-left: -.9rem; border-radius: 10px; }
.pile { position: absolute; inset: 0; z-index: 2; }
.tile { position: absolute; left: 0; top: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); box-shadow: 0 22px 40px -18px rgba(0,0,0,.85); cursor: grab; user-select: none; -webkit-user-select: none; will-change: transform; touch-action: none; }
.tile:active { cursor: grabbing; }
.tile img { width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; -webkit-user-drag: none; }
.tile:not(.is-hot) { filter: none; }
.tile.is-hot { box-shadow: 0 0 0 2px var(--accent), 0 22px 40px -18px rgba(0,0,0,.85); }
.no-drag .tile { pointer-events: none; touch-action: auto; }
.pile-cols { position: absolute; left: 0; right: 0; bottom: 2.2rem; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 var(--pad); opacity: var(--align, 0); pointer-events: none; }
.pile-col { font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: var(--ink); }
.pile-col small { color: var(--accent); margin-right: .5rem; }
.pile-static { position: absolute; left: var(--pad); right: var(--pad); bottom: 6vh; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; align-items: end; }
.pile-static img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--line); box-shadow: 0 22px 40px -18px rgba(0,0,0,.85); }
.pile-static img:nth-child(odd) { transform: rotate(-3deg); }
.pile-static img:nth-child(even) { transform: rotate(2.5deg) translateY(-1rem); }
.pile.is-live ~ .pile-static { display: none; }
html:not(.motion) .forge { min-height: auto; }
html:not(.motion) .forge-pin { position: relative; height: auto; overflow: visible; padding-bottom: 4rem; }
html:not(.motion) .pile-static { position: relative; left: auto; right: auto; bottom: auto; margin: 3rem var(--pad) 0; }
html:not(.motion) .pile-hint, html:not(.motion) .forge .scroll-cue { display: none; }

/* builds index */
.builds { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: b; }
.build-link { position: relative; display: grid; grid-template-columns: 4rem minmax(0, 1.4fr) minmax(0, 1fr) 17rem 2rem; gap: 2rem; align-items: center; padding: 2.4rem 1rem 2.4rem 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .4s, padding .4s cubic-bezier(.2,.8,.2,1); }
.build-link:hover, .build-link:focus-visible { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); padding-left: 1rem; }
.build-num { font-family: var(--mono); font-size: .8rem; color: var(--accent); letter-spacing: .14em; }
.build-main { display: flex; flex-direction: column; gap: .5rem; }
.build-name { font-size: clamp(2.6rem, 1.4rem + 4vw, 6.4rem); font-weight: 750; font-stretch: 78%; letter-spacing: -.03em; line-height: .9; }
.build-name em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.build-kicker { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--muted); }
.build-meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.build-meta b { flex-basis: 100%; color: var(--ink); font-weight: 500; }
.build-thumbs { position: relative; height: 9rem; }
.build-thumbs img { position: absolute; left: 0; top: 50%; width: 10rem; height: 6.6rem; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--line); box-shadow: 0 18px 36px -16px rgba(0,0,0,.9); transform: translate(calc(var(--j) * 2.6rem), -50%) rotate(calc((var(--j) - 1) * 7deg)); transition: transform .55s cubic-bezier(.2,.9,.2,1.3); }
.build-link:hover .build-thumbs img, .build-link:focus-visible .build-thumbs img { transform: translate(calc(var(--j) * 4.2rem - 2rem), calc(-50% - (1 - var(--j)) * (1 - var(--j)) * -.6rem - 1rem)) rotate(calc((var(--j) - 1) * 10deg)) scale(1.06); }
.build-go { font-size: 2rem; color: var(--accent); transition: transform .35s; }
.build-link:hover .build-go { transform: translateX(8px); }

/* capability matrix */
.matrix-wrap { overflow-x: auto; }
.matrix-wrap:focus-visible { outline: 2px solid var(--accent); }
.matrix { width: 100%; min-width: 40rem; border-collapse: collapse; }
.matrix th, .matrix td { padding: 1rem .8rem; border-bottom: 1px solid var(--line); text-align: center; }
.matrix thead th { font-size: clamp(1.3rem, 1rem + 1vw, 2rem); font-weight: 750; font-stretch: 80%; letter-spacing: -.02em; vertical-align: bottom; }
.matrix thead th a { text-decoration: none; }
.matrix thead th a:hover { color: var(--accent); }
.matrix thead th small { display: block; font-family: var(--mono); font-size: .64rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .4rem; }
.matrix tbody th { text-align: left; font-family: var(--mono); font-size: .78rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.matrix td.y i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.matrix td.n { color: var(--muted); }
.matrix tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.matrix-key { margin-top: 1.2rem; font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.matrix-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-right: .3rem; }

/* ---------- lightbox ---------- */
.lbx { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: color-mix(in srgb, var(--bg) 94%, transparent); color: var(--ink); z-index: 300; overflow: hidden; }
.lbx::backdrop { background: transparent; }
.lbx-stage { position: absolute; inset: 4.5rem 1rem 4.5rem; overflow: hidden; display: grid; place-items: center; cursor: zoom-in; touch-action: none; }
.lbx.is-zoomed .lbx-stage { cursor: grab; place-items: start; }
.lbx-img { max-width: 100%; max-height: 100%; width: auto; height: auto; box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); border-radius: 6px; user-select: none; -webkit-user-drag: none; }
.lbx.is-zoomed .lbx-img { max-width: none; max-height: none; border-radius: 0; }
.lbx-top, .lbx-bot { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 1rem; padding: 1rem var(--pad); font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; }
.lbx-top { top: 0; justify-content: space-between; }
.lbx-bot { bottom: 0; justify-content: space-between; color: var(--muted); }
.lbx-cap { color: var(--ink); max-width: 60ch; }
.lbx button { font: inherit; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .55rem 1rem; cursor: pointer; }
.lbx button:hover { border-color: var(--accent); color: var(--accent); }
.lbx-btns { display: flex; gap: .5rem; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .wk-hero-in { grid-template-columns: 1fr; }
  .build-link { grid-template-columns: 3rem minmax(0, 1fr) 14rem 2rem; }
  .build-meta { grid-column: 2; grid-row: 2; }
  .video-grid, .morph-pin { grid-template-columns: 1fr; padding-right: 0; }
  .morph-stage { padding: 0 var(--pad); }
  .morph-pin { min-height: auto; }
}
@media (max-width: 760px) {
  .wk-sec { padding: 10vh 0; }
  .wk-head { grid-template-columns: 1fr; grid-template-areas: "l" "h" "b"; }
  .wk-head h2 { font-size: clamp(2.3rem, 11vw, 3.6rem); margin-bottom: 1.2rem; }
  .wk-hero { padding: 6.5rem 1.25rem 3rem; min-height: auto; }
  .wk-hero h1 { font-size: clamp(3.2rem, 17vw, 5rem); }
  .wk-meta { grid-template-columns: 1fr; }
  .wk-switch-all { margin-left: 0; }
  .hs-viewport { padding: 2rem 1.25rem 1rem; scroll-padding-inline: 1.25rem; }
  .hs-item { scroll-snap-align: start; }
  .hs-item { --hs-h: min(52vh, 440px); --h: min(var(--hs-h), calc(84vw / var(--arn))); }
  .hs-phone { --hs-h: min(56vh, 460px); }
  .fan { flex-direction: column; padding-top: 3rem; }
  .fan-card { width: min(22rem, 82vw); }
  .bento, .duo, .brand-grid, .id-grid { grid-template-columns: 1fr; }
  .bento-item.b0 { grid-row: auto; }
  .id-item.i2 { grid-column: auto; grid-row: auto; max-width: 9rem; }
  .id-item.i5 { grid-column: auto; }
  .wall { columns: 2; column-gap: .9rem; }
  .post { margin-bottom: .9rem; }
  html:not(.js) .cmp-stage, html:not(.js) .spec-stage { grid-template-columns: 1fr; }
  .cmp-stage figcaption { font-size: .6rem; bottom: .6rem; padding: .35rem .6rem; }
  .cmp-before figcaption { left: .6rem; } .cmp-after figcaption { right: .6rem; }
  .forge { min-height: 200vh; }
  .forge-copy { padding: 6rem 1.25rem 0; }
  .forge-copy h1 { font-size: clamp(2.6rem, 12vw, 4rem); }
  .pile-static { grid-template-columns: 1fr 1fr; }
  .pile-cols { font-size: .6rem; padding: 0 .5rem; bottom: 1.2rem; }
  .pile-col small { display: block; margin: 0; }
  .build-link { grid-template-columns: 2.4rem minmax(0, 1fr); gap: .8rem 1rem; padding: 1.8rem 0; }
  .build-meta { grid-column: 2; grid-row: auto; }
  .build-thumbs { grid-column: 2; height: 6.5rem; }
  .build-thumbs img { width: 7.5rem; height: 5rem; }
  .build-go { display: none; }
  .lbx-stage { inset: 4rem .5rem 5rem; }
  .lbx-bot { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-hero-shot .dev { transform: none !important; }
  .post { transform: none; }
}

@media (hover: none), (pointer: coarse) { .forge-copy .pile-hint { display: none; } }
.forge-copy .hint { position: relative; z-index: 1; }
.forge-copy .hint > span { position: relative; pointer-events: auto; background: color-mix(in srgb, var(--bg) 78%, transparent); padding: .35rem .7rem; border-radius: 999px; }