/* Approved direction: flat studio wall, with the editorial print rhythm of option 3.
   Bricolage remains the studio's approved display family. */
#work.portfolio{padding:54px 4vw 70px;background:#fff}
#project-desk.print-run{border:0;box-shadow:none;background:none;margin:0;padding:0;overflow:visible}
#work .studio-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin:0 0 36px;padding:0;border:0}
#work .studio-heading h2{font:800 clamp(54px,6.8vw,100px)/.94 var(--display);letter-spacing:-.045em;white-space:normal;text-wrap:balance;max-width:10ch;color:var(--ink)}
#work .studio-heading p{font:400 18px/1.45 var(--display);max-width:28ch;margin:0 0 4px}
#work .wall-tools,#work .print-controls,#work .edition-index,#work #motion-toggle,#work #all-projects{display:none!important}
#work .studio-wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:30px 24px;align-items:start;height:auto!important;min-height:0;perspective:none;transform:none;overflow:visible;padding:0;background:none;touch-action:pan-y;isolation:auto;border:0}
#work .studio-wall::before,#work .studio-wall::after,#work .studio-print::before,#work .studio-print::after{display:none}
#work .studio-print{position:relative!important;inset:auto!important;display:block!important;grid-column:span 6;order:10;width:100%!important;height:auto!important;aspect-ratio:1.4;transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;border:0;border-radius:2px;background:#eeede8;color:var(--ink);box-shadow:none;padding:0;overflow:visible;cursor:pointer;text-align:left;transition:none;will-change:auto;min-width:0}
#work .studio-art{display:block;position:absolute;inset:0;overflow:hidden;border-radius:2px;transform:rotate(var(--print-angle,0deg));background:inherit;transition:transform .25s}
#work .studio-art img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .4s}
#work .studio-print:hover .studio-art img{transform:scale(1.025)}
#work .studio-print:focus-visible{outline:3px solid var(--ink);outline-offset:8px}
#work .studio-label{--label-x:0px;--label-y:0px;position:absolute;left:18px;bottom:18px;max-width:calc(100% - 36px);padding:15px 18px 13px;background:#fffdf5;box-shadow:3px 4px 0 #16140f35;border:1px solid #16140f22;transform:translate(var(--label-x),var(--label-y)) rotate(var(--label-angle,-2deg));z-index:2;cursor:grab;touch-action:pan-y;color:#16140f;transition:box-shadow .2s}
#work .studio-label strong{display:block;font:800 clamp(24px,3vw,43px)/1 var(--display);letter-spacing:-.04em}
#work .studio-label small{display:block;margin-top:8px;font:10px/1.5 var(--mono);text-transform:none;letter-spacing:0}
#work .studio-label.held{cursor:grabbing;box-shadow:4px 12px 16px #16140f33}
#work .studio-flag{position:absolute;top:16px;left:17px;background:var(--cheese);padding:8px 11px;font:11px var(--mono);transform:rotate(-4deg);z-index:1}
#work .studio-open{position:absolute;top:16px;right:16px;background:white;border:1px solid #16140f44;padding:10px 12px;font:11px var(--mono);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;z-index:2}
#work .studio-print:hover .studio-open,#work .studio-print:focus-visible .studio-open{opacity:1;transform:none}
#work [data-project-id=dg]{order:0;grid-column:span 7;aspect-ratio:1.5;background:#10100e}
#work [data-project-id=dg] img{object-fit:cover;transform:scale(1.45)}
#work [data-project-id=dg]:hover img{transform:scale(1.48)}
#work [data-project-id=sling]{order:1;grid-column:span 5;aspect-ratio:1.07;background:#ebe9fd;margin-top:35px;--print-angle:1deg;--label-angle:2deg}
#work [data-project-id=sling] .studio-art{padding:45px 22px 75px}
#work [data-project-id=sling] img{object-fit:contain;filter:drop-shadow(0 8px 10px #16140f22)}
#work [data-project-id=sling] .studio-label{background:var(--cheese)}
#work [data-project-id=tyfo]{order:2;grid-column:span 7;aspect-ratio:1.65;--print-angle:-.6deg;--label-angle:1deg;background:#edece6}
#work [data-project-id=tyfo] img{object-fit:contain}
#work [data-project-id=positioned]{order:3;grid-column:span 5;aspect-ratio:1.04;background:#e8e4db;margin-top:40px;--print-angle:1.2deg}
#work [data-project-id=positioned] .studio-art{padding:20px 25px 50px}
#work [data-project-id=positioned] img{object-fit:contain}
#work [data-project-id=sauls]{order:4;grid-column:span 5;aspect-ratio:1.25;--print-angle:-.7deg}
#work [data-project-id=revive]{order:5;grid-column:span 7;aspect-ratio:1.65;margin-top:35px;--label-angle:1.4deg}
#work [data-project-id=longgame]{order:6;grid-column:span 4;aspect-ratio:.92;background:#e8e9df;--print-angle:1deg}
#work [data-project-id=longgame] .studio-art{padding:20px 20px 75px}
#work [data-project-id=longgame] img{object-fit:contain}
#work [data-project-id=pklos]{order:7;grid-column:span 8;aspect-ratio:1.7;margin-top:28px}
#work [data-project-id=gss]{order:8;grid-column:span 7;aspect-ratio:1.55;--print-angle:-.5deg}
#work [data-project-id=monaco]{order:9;grid-column:span 5;aspect-ratio:1.14;margin-top:35px;--label-angle:2deg}
#work .studio-wall-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:28px;font:11px/1.5 var(--mono)}
#work .studio-wall-foot p{margin:0;font:inherit}
#studio-reset{background:none;border:0;text-decoration:underline;text-underline-offset:4px;font:inherit;min-height:44px;cursor:pointer;color:inherit}
#work .portfolio-foot{margin-top:50px}
.tyfo-brand-gallery{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:0 5vw 40px}.tyfo-brand-gallery figure{margin:0;min-width:0}.tyfo-brand-gallery img{display:block;width:100%;height:300px;object-fit:contain;background:#eeede8}.tyfo-brand-gallery figcaption{font:12px/1.5 var(--mono);margin-top:12px}
@media(max-width:700px){#work.portfolio{padding:36px 20px 45px}#work .studio-heading{display:block;margin-bottom:30px}#work .studio-heading h2{font-size:clamp(50px,12vw,75px);max-width:10ch}#work .studio-heading p{font-size:16px;margin-top:22px}#work .studio-wall{grid-template-columns:1fr;gap:28px}#work .studio-wall .studio-print{grid-column:1;aspect-ratio:1.08;margin-top:0}#work .studio-label{left:12px;bottom:14px;padding:12px;max-width:calc(100% - 24px)}#work .studio-label strong{font-size:29px}#work .studio-label small{font-size:9px}#work [data-project-id=sling] .studio-art{padding:32px 18px 65px}#work .studio-open{display:none}#work .studio-wall-foot{font-size:10px;gap:12px}.tyfo-brand-gallery{grid-template-columns:1fr}.tyfo-brand-gallery img{height:auto}}
@media(prefers-reduced-motion:reduce){#work .studio-art,#work .studio-art img,#work .studio-open{transition:none}}
#work .studio-wall{margin:0!important}
#work [data-project-id=pklos]{aspect-ratio:1.45;background:#090b0e}
#work [data-project-id=pklos]>.studio-art>img{height:78%;object-fit:cover;object-position:top}
#work .pkl-product-peek{position:absolute;right:20px;bottom:24px;width:67%;display:flex;gap:10px;align-items:end;pointer-events:none}
#work .pkl-product-peek img{width:63%;height:auto;max-height:170px;object-fit:cover;border:2px solid #f4f4ef;box-shadow:3px 5px 0 #16140f66;transform:rotate(-3deg)}
#work .pkl-product-peek img+img{width:37%;transform:rotate(3deg)}
#work [data-project-id=pklos] .studio-label{max-width:42%}
.pkl-product-story{padding:40px 5vw;background:#fff}.pkl-product-story>div{max-width:680px;margin:0 0 24px}.pkl-product-story h4{font:700 30px/1.15 var(--display)!important;letter-spacing:-.025em}.pkl-product-story figure{margin:0 0 48px}.pkl-product-story img{display:block;width:100%;height:auto}.pkl-product-story figcaption{font:11px/1.6 var(--mono);margin-top:12px}.pkl-product-story>a{font:16px var(--display);color:inherit;text-underline-offset:4px}
@media(max-width:700px){#work .studio-wall [data-project-id=pklos]{aspect-ratio:1.05}#work .pkl-product-peek{right:12px;bottom:30px;width:66%;gap:6px}#work .pkl-product-peek img{max-height:115px}#work [data-project-id=pklos] .studio-label{max-width:50%;bottom:12px}#work [data-project-id=pklos] .studio-label small{font-size:8px}.pkl-product-story{padding:28px 18px}.pkl-product-story h4{font-size:25px!important}}
/* Product compositions: show the delivered websites and the details behind them. */
#work .studio-wall [data-project-id=longgame],#work .studio-wall [data-project-id=pklos]{grid-column:span 6;aspect-ratio:1.08;margin-top:24px}
#work [data-project-id=longgame]{background:#244f3b;--print-angle:-.7deg}
#work [data-project-id=longgame] .studio-art{padding:0;overflow:hidden}
#work [data-project-id=longgame] .longgame-site-cover{position:absolute;left:6%;top:7%;width:110%;height:68%;object-fit:cover;object-position:top left;transform:rotate(-4deg);border:5px solid #fff;box-shadow:0 18px 30px #0004}
#work [data-project-id=longgame] .longgame-cover-object{position:absolute;right:3%;bottom:12%;width:33%;height:48%;object-fit:contain;transform:rotate(8deg);filter:drop-shadow(7px 12px 8px #0006);background:white}
#work [data-project-id=longgame]:hover .longgame-site-cover{transform:rotate(-3deg) translateY(-4px)}
#work [data-project-id=longgame]:hover .longgame-cover-object{transform:rotate(5deg) translateY(-5px)}
#work [data-project-id=pklos]{background:#10171c;--print-angle:.5deg}
#work [data-project-id=pklos]>.studio-art>img{position:absolute;left:4%;top:5%;width:89%;height:61%;object-fit:cover;object-position:top;border:3px solid #fff;transform:rotate(-3deg);box-shadow:0 12px 30px #0006}
#work [data-project-id=pklos] .pkl-product-peek{left:6%;right:auto;bottom:13%;width:90%;height:48%;gap:0;align-items:end}
#work [data-project-id=pklos] .pkl-product-peek img:first-child{position:absolute;left:0;bottom:0;width:70%;height:auto;max-height:none;transform:rotate(2deg);box-shadow:0 10px 30px #0008}
#work [data-project-id=pklos] .pkl-product-peek img+img{position:absolute;right:0;bottom:6%;width:42%;height:122%;max-height:none;object-fit:cover;object-position:right;transform:rotate(6deg);box-shadow:0 12px 30px #0008}
#work [data-project-id=pklos] .studio-label{max-width:62%;z-index:3}
@media(max-width:700px){#work .studio-wall [data-project-id=longgame],#work .studio-wall [data-project-id=pklos]{grid-column:1;margin-top:0;aspect-ratio:1.02}#work [data-project-id=pklos] .studio-label{max-width:75%}}
/* DG's approved wings portrait stays uncropped across both basketballs. */
#work .studio-wall [data-project-id=dg]{aspect-ratio:1.5;background:#121313}
#work [data-project-id=dg] .studio-art{display:flex;align-items:center}
#work [data-project-id=dg] .studio-art img{width:100%;height:100%;object-fit:contain;object-position:center;transform:none}
#work [data-project-id=dg]:hover .studio-art img{transform:scale(1.015)}
@media(max-width:700px){#work .studio-wall [data-project-id=dg]{aspect-ratio:1.4}#work [data-project-id=dg] .studio-art img{object-position:center 28%}#work [data-project-id=dg] .studio-label{bottom:12px}}
/* Positioned: the cinematic website leads, with the physical book in the foreground. */
#work .studio-wall [data-project-id=positioned]{aspect-ratio:1.04;background:#171c1d;--print-angle:.8deg}
#work [data-project-id=positioned] .positioned-composition{padding:0;background:linear-gradient(180deg,#222b2b,#0c1011)}
#work [data-project-id=positioned] .positioned-site-cover{position:absolute;left:4%;top:7%;width:112%;height:71%;object-fit:cover;object-position:left top;transform:rotate(-4deg);box-shadow:0 16px 25px #0008;border:2px solid #d4cdb744}
#work [data-project-id=positioned] .positioned-cover-object{position:absolute;right:1%;bottom:12%;width:35%;height:47%;object-fit:contain;transform:rotate(7deg);filter:drop-shadow(5px 12px 10px #0009)}
#work [data-project-id=positioned]:hover .positioned-site-cover{transform:rotate(-3deg) translateY(-4px)}
#work [data-project-id=positioned]:hover .positioned-cover-object{transform:rotate(4deg) translateY(-5px)}
#work [data-project-id=positioned] .studio-label{max-width:70%;background:#fffdf5}
@media(max-width:700px){#work .studio-wall [data-project-id=positioned]{aspect-ratio:1.04}#work [data-project-id=positioned] .studio-label{max-width:80%}}
#work [data-project-id=positioned] .positioned-site-cover{left:4%;top:4%;width:94%;height:75%;object-fit:contain;border:0}