/* VIX ART shape grammar · UI layer. Shapes are fill=currentColor (pure B/W) and move only on reveal, scroll or hover. */
:root{--sp:cubic-bezier(.32,.72,0,1)}
.vxs{display:block;width:100%;height:100%;overflow:visible}

/* reveal: rotate-in from a quarter turn, critically damped (no overshoot) */
[data-sm~="reveal"]{transform:rotate(-90deg) scale(.55);transition:transform 1100ms var(--sp)}
.in[data-sm~="reveal"],.in [data-sm~="reveal"]{transform:none}

/* XS signal: spark before section labels */
.shead .no{display:inline-flex;align-items:center;gap:10px}
.spark{display:inline-block;width:14px;height:14px;flex:none}
.spark .vxs{transition:transform 900ms var(--sp)}
.on .spark .vxs,.in .spark .vxs{transform:rotate(180deg)}

/* S structure: family emblems in rows (replace pattern tiles) */
.idx .pt,.ptl{border:0!important;border-radius:0!important;display:grid;place-items:center}
.idx .pt .vxs,.ptl .vxs{transition:transform 600ms var(--sp)}
.idx .row:hover .pt .vxs,.idx .row:focus-visible .pt .vxs{transform:rotate(90deg)}
.fam .ptl{width:72px;height:72px}

/* M structure: phase shapes on method cards */
.ps{position:absolute;right:18px;top:18px;width:44px;height:44px}
.rail li{position:relative}
.phase .ps{position:static;width:64px;height:64px;margin-bottom:10px}
.rail li:hover .ps .vxs{transform:rotate(90deg);transition:transform 600ms var(--sp)}

/* L anchor: one large shape cropped off the edge, turned by scroll; difference blend keeps text readable */
.anchor{position:absolute;pointer-events:none;color:#fff;mix-blend-mode:difference;width:clamp(220px,34vw,560px);aspect-ratio:1;right:calc(-1 * clamp(70px,10vw,170px));top:50%;margin-top:calc(-1 * clamp(110px,17vw,280px));z-index:3}
.anchor .vxs{will-change:transform}
.phero,.shead{position:relative}
.phero > :not(.anchor){position:relative;z-index:1}
.phero .anchor{top:auto;bottom:calc(-1 * clamp(60px,9vw,150px));margin-top:0}
.anchor.lo{top:auto;bottom:-12%;margin-top:0}
.anchor.left{right:auto;left:calc(-1 * clamp(70px,10vw,170px))}

/* texture discs: research territories, notes and team portraits */
.txd{display:inline-block;width:36px;height:36px;flex:none;vertical-align:middle}
.terr .txd{width:44px;height:44px}
.notes .row .t{display:flex;align-items:center;gap:14px}
.portrait{width:100%;aspect-ratio:1;max-width:180px;margin-bottom:6px}
.portrait .vxs{transition:transform 900ms var(--sp)}
.person:hover .portrait .vxs{transform:rotate(90deg)}
.bigtx{width:clamp(120px,16vw,220px);aspect-ratio:1;margin-top:28px}

/* audit bullets as sparks */
.audit .parts li .spark{width:16px;height:16px;align-self:center}

/* click spark (signal) */
.clickspark{position:fixed;left:0;top:0;width:28px;height:28px;margin:-14px 0 0 -14px;pointer-events:none;z-index:170;color:#fff;mix-blend-mode:difference;transform:scale(0) rotate(0deg);animation:cspark 520ms var(--sp) forwards}
@keyframes cspark{0%{transform:scale(0) rotate(0)}55%{transform:scale(1) rotate(60deg)}100%{transform:scale(0) rotate(120deg)}}

@media (max-width:900px){.anchor{width:58vw;right:-22vw;margin-top:-29vw}.ps{width:36px;height:36px}.fam .ptl{width:48px;height:48px}.portrait{max-width:120px}}
@media (prefers-reduced-motion:reduce){[data-sm~="reveal"]{transform:none!important;transition:none}.clickspark{display:none}.anchor .vxs{transform:none!important}}

/* section motion loops (05_Website_Motion, 16:9, 8 s seamless) */
.loopv{margin:0 var(--g) 40px;border-radius:28px;overflow:hidden;border:1px solid var(--k);background:#000;aspect-ratio:16/9;position:relative}
.loopv video{display:block;width:100%;height:100%;object-fit:cover}
.inv .loopv{border-color:var(--w)}
.phero .loopv{margin-top:40px;margin-bottom:0}
@media (max-width:900px){.loopv{border-radius:20px;margin-bottom:28px}}

/* project folder (T-037 glass folder, live). Geometry from Reference Study 12 in study units (1u = folder width / 343):
   back folder x 13-327u, glass 0-343u x 73-259u (top wider: perspective tilt), cards stand inside and peek above the glass. */
.pfolder{width:min(860px,calc(100% - 2 * var(--g)));margin:8px auto 24px;container-type:inline-size}
.pf-stage{position:relative;aspect-ratio:343/360}
.pf-back{position:absolute;left:calc(13 * 100cqw / 343);top:calc(70 * 100cqw / 343);width:calc(314 * 100cqw / 343);height:calc(259 * 100cqw / 343);fill:var(--k)}
.pf-card{position:absolute;top:calc(96 * 100cqw / 343);left:calc((28 + var(--i) * 74) * 100cqw / 343);width:calc(70 * 100cqw / 343);aspect-ratio:4/5;border-radius:calc(8 * 100cqw / 343);overflow:hidden;
  background:var(--w);outline:1px solid var(--w);transform:rotate(calc((var(--i) - 1.5) * 2.2deg)) translateY(calc(var(--o,0) * 8 * 100cqw / 343));
  transition:transform 520ms cubic-bezier(.2,.8,.2,1);z-index:1}
.pf-card:nth-of-type(even){--o:1}
.pf-card img{width:100%;height:100%;object-fit:cover;display:block}   /* original colours (owner, 2026-10-24) */
.pf-tag{position:absolute;left:6px;top:6px;font-size:max(9px,calc(4.4 * 100cqw / 343));letter-spacing:.06em;color:#fff;background:#000;padding:2px 6px;border-radius:99px;white-space:nowrap}
.pf-card:hover,.pf-card:focus-visible{transform:rotate(0deg) translateY(calc(-62 * 100cqw / 343));z-index:3}
.pf-glass{position:absolute;left:0;top:calc(143 * 100cqw / 343);width:100%;height:calc(186 * 100cqw / 343);border-radius:calc(20 * 100cqw / 343);z-index:2;pointer-events:none;
  -webkit-backdrop-filter:blur(calc(3.5 * 100cqw / 343));backdrop-filter:blur(calc(3.5 * 100cqw / 343));background:color-mix(in srgb,var(--w) 14%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w) 45%,transparent),0 calc(14 * 100cqw / 343) calc(34 * 100cqw / 343) color-mix(in srgb,var(--k) 14%,transparent);
  transform:perspective(900px) rotateX(-7deg);transform-origin:50% 100%;transition:transform 620ms cubic-bezier(.2,.8,.2,1)}
.pfolder:hover .pf-glass,.pfolder:focus-within .pf-glass{transform:perspective(900px) rotateX(-22deg)}
.pf-cap{text-align:center;margin-top:10px;color:var(--k);opacity:1}
.pf-list{margin:0 var(--g) 8px;border-top:1px solid var(--k)}
.pf-row{display:grid;grid-template-columns:minmax(210px,1fr) 2fr auto;gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--k);color:var(--k);text-decoration:none}
.pf-row .pf-t{font-size:22px;line-height:1.2}
.pf-row:hover .pf-t,.pf-row:focus-visible .pf-t{text-decoration:underline;text-underline-offset:4px}
@media (max-width:700px){.pf-tag{font-size:7.5px;letter-spacing:0;padding:2px 4px;left:4px;top:4px}.pf-row{grid-template-columns:1fr auto}.pf-row .mono{grid-column:1 / -1}.pf-row .pf-t{font-size:18px}}
@media (hover:none){.pf-card{transform:rotate(calc((var(--i) - 1.5) * 2.2deg)) translateY(calc(-36 * 100cqw / 343))}}
@media (prefers-reduced-motion:reduce){.pf-card,.pf-glass{transition:none}}

/* ===== Work: live concrete slab ring (ring3d.js, T-043 v04) ===== */
.ring3d{position:relative;margin:8px var(--g) 40px;aspect-ratio:16/9;border-radius:28px;overflow:hidden;outline:none;
  background:radial-gradient(120% 90% at 50% 38%,#d8d8d8 0%,#c4c4c4 55%,#8f8f8f 100%);color:#000;touch-action:pan-y;user-select:none}
:root[data-theme="dark"] .ring3d{background:radial-gradient(120% 90% at 50% 38%,#3a3a3a 0%,#1d1d1d 60%,#050505 100%);color:#fff}
.ring3d:focus-visible{box-shadow:0 0 0 2px var(--k)}
.r3-stage{position:absolute;inset:0;cursor:grab}
.r3-stage:active{cursor:grabbing}
.r3-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.r3-fallback{position:absolute;inset:0;margin:0}
.r3-fallback video{width:100%;height:100%;object-fit:cover}
.ring3d.is-live .r3-fallback{display:none}
.ring3d.is-fallback .r3-hud,.ring3d.is-fallback .r3-ctrl{display:none}
.r3-hud{position:absolute;left:50%;bottom:clamp(76px,8vw,110px);transform:translateX(-50%);width:min(620px,80%);text-align:center;pointer-events:none}
.r3-hud .r3-fig{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.r3-hud .r3-title{font-size:clamp(22px,2.6vw,40px);line-height:1.08;margin:0 0 14px;font-weight:700}
.r3-hud .r3-link{pointer-events:auto;color:inherit;font-size:15px}
.r3-hud.r3-swap .r3-fig,.r3-hud.r3-swap .r3-title{animation:r3in .55s cubic-bezier(.2,.8,.2,1)}
@keyframes r3in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.r3-ctrl{position:absolute;left:clamp(18px,3vw,44px);right:clamp(18px,3vw,44px);bottom:clamp(16px,2vw,28px);display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.1em}
.r3-ctrl button{font:inherit;width:40px;height:40px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer}
.r3-ctrl button:hover,.r3-ctrl button:focus-visible{background:currentColor}
.r3-ctrl button:hover,.r3-ctrl button:focus-visible{color:var(--w)}
:root[data-theme="dark"] .r3-ctrl button:hover,:root[data-theme="dark"] .r3-ctrl button:focus-visible{color:#000}
.r3-ctrl{justify-content:center}.r3-ctrl .r3-hint{position:absolute;right:0;opacity:.7;text-transform:uppercase}
@media (max-width:700px){.ring3d{aspect-ratio:4/5;border-radius:20px}.r3-hud{max-width:86%}.r3-ctrl .r3-hint{display:none}}
.r3-link[hidden]{display:none}

/* ===== System pages: glass-pane halftone emblem (syspanes.js, T-047) ===== */
.sys .sp-grid{align-items:center}
.sys .bigpat.sp{grid-column:1 / span 4;aspect-ratio:4/5;position:relative;background:#000;border:0;color:#fff}
.sys .sp-grid>div:last-child{grid-column:5 / span 8}
.bigpat.sp canvas{position:absolute;inset:0;display:block}
.bigpat.sp svg{position:absolute;inset:22%;width:56%;height:56%}
.bigpat.sp.sp-live svg{display:none}
@media (max-width:700px){.sys .bigpat.sp{width:100%;max-width:440px}.sys .sp-grid>div:last-child{grid-column:1}}