.brand{flex-shrink:0}
.theme,.ig{width:44px;height:44px;flex-shrink:0}
.lang button{min-width:40px;min-height:40px}
.badge-pos{width:min(540px,calc(100% - 64px))}
.badge{width:100%;max-width:none}
.badge h1{font-size:clamp(17px,1.55vw,21px);line-height:1.4;letter-spacing:0}
.grid{gap:24px;margin-bottom:30px}
.grid.tight{gap:24px}
.masonry{column-gap:24px}
.masonry figure{margin-bottom:26px}
.project{padding-bottom:76px}
.project+.project{padding-top:64px}
.pbar{gap:32px 52px;margin-bottom:40px}
.txt{max-width:62ch;line-height:1.8}
.role{max-width:100%;line-height:1.5}
#hornstromp>.grid,#timmy>.grid:not(.polaroids){--n:2}
.timmy-details{align-self:center;justify-self:center;width:100%;padding:8px 16px}
#hlp>.cols-5,#furopolis>.cols-6{--n:3}
.sheet{gap:18px;padding:24px;margin-bottom:30px}
.sheet-row{flex-wrap:wrap}
.sheet-label{font-size:16px;margin-bottom:8px;color:#615A74}
.head h2{width:fit-content;max-width:100%;min-width:0;line-height:1.15;padding-bottom:.4em}
.head h2 svg{bottom:0;height:clamp(10px,.24em,16px);pointer-events:none}
.head h2 path{stroke-width:3.5;vector-effect:non-scaling-stroke}
.contact a{overflow-wrap:anywhere;max-width:100%}
.skip-link{position:fixed;left:16px;top:10px;z-index:200;transform:translateY(-160%);background:var(--surface);color:var(--ink);padding:12px 20px;border:2px solid var(--ink);border-radius:12px;font-weight:700}
.skip-link:focus{transform:none}
.lb .lb-close{z-index:3;transition:opacity .16s ease,transform .2s ease}
.lb-loading{cursor:progress!important}
#lb-load-status{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:120;max-width:calc(100% - 32px);padding:10px 16px;background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.12);font:600 14px var(--body)}
#lb-load-status[hidden]{display:none}
.lb-controls,.lb-help{opacity:0;transition:opacity .16s ease;pointer-events:none}
.lb.on .lb-controls,.lb.on .lb-help{opacity:1}
.lb.on .lb-controls{pointer-events:auto}
.lb-controls{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:8px;padding:8px 12px;border:2px solid var(--ink);border-radius:18px;background:var(--surface);color:var(--ink)}
.lb .lb-controls button{position:static;opacity:1;width:42px;height:42px;font-size:22px;transform:none}
.lb .lb-controls button:hover{transform:none}
.lb .lb-controls .lb-reset{width:auto;padding:0 12px;font-size:14px;border-radius:12px}
.lb-controls output{min-width:48px;text-align:center;font:700 14px var(--body)}
.lb-help{position:absolute;top:20px;left:20px;max-width:calc(100% - 100px);color:#fff;background:rgba(28,24,40,.88);border-radius:10px;padding:8px 12px;font-size:14px;z-index:2;pointer-events:none}
.preview-note{padding:12px 14px;border:1px dashed var(--line);border-radius:12px;background:var(--paper);font-size:14px;color:var(--body-2)}
.mail-fallback{display:block;margin-bottom:12px;font-weight:700}
.mail-fallback[hidden]{display:none}
html:not(.js) .about-bg{opacity:1;transform:none;filter:none}
html:not(.js) nav#menu{visibility:visible;max-height:none;position:static}
@media(min-width:601px) and (max-width:1200px){
 .nav .wrap{gap:12px}
 .burger{display:flex;order:3;flex-shrink:0}
 .tools{margin-left:auto}
 nav#menu{position:absolute;left:0;right:0;top:100%;background:rgba(var(--paper-rgb),.98);border-bottom:2px solid var(--line);box-shadow:0 20px 40px -20px rgba(46,42,58,.35);max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
 nav#menu.open{max-height:min(460px,calc(100dvh - var(--navh)));overflow:auto}
 .menu{flex-direction:column;align-items:stretch;gap:4px;padding:10px 24px 16px;overflow:visible}
 .menu a{display:block;text-align:center;font-size:17px;padding:11px 14px;border-radius:12px}
}
@media(max-width:1200px){
 nav#menu:not(.open){visibility:hidden;pointer-events:none}
 nav#menu.open{visibility:visible}
}
@media(max-width:900px){
 #timmy>.grid:has(.timmy-details)>figure:nth-child(3),#timmy .timmy-details{grid-column:1/-1}
 .timmy-details{padding:8px 0}
 .head{gap:22px;margin-bottom:36px}
 .pbar{gap:28px}
 .head p{max-width:62ch}
}
@media(max-width:600px){
 .nav .wrap{gap:8px}
 .tools{gap:6px}
 .brand img{height:34px}
 .theme,.ig{width:40px;height:40px}
 .lang button{min-width:34px;padding:6px;min-height:40px}
 .badge-pos{width:calc(100% - 76px);max-width:360px}
 .badge{padding:22px 18px}
 .badge h1{font-size:17px;line-height:1.4;letter-spacing:0}
 .badge .btn{font-size:15px;min-height:44px}
 .mosaic{max-height:78svh;min-height:530px}
 .head h2{font-size:clamp(32px,8.8vw,40px)}
 #hornstromp>.grid,#timmy>.grid:not(.polaroids),#hlp>.cols-5{--n:1}
 #furopolis>.cols-6{--n:2}
 .grid,.grid.tight{gap:20px;margin-bottom:26px}
 .sheet{padding:16px;gap:14px}
 .sheet.lg img{max-width:min(150px,100%)}
 .sheet-row{gap:10px}
 .project{padding-bottom:42px}.project+.project{padding-top:42px}
 .contact{gap:14px}
 .lb-controls{bottom:calc(12px + env(safe-area-inset-bottom));gap:6px;padding:6px 8px;white-space:nowrap}
 .lb-help{font-size:12px;left:12px;top:16px}
 nav#menu.open{max-height:calc(100dvh - var(--navh));overflow:auto}
}
@media(max-width:360px){
 .nav .wrap{padding:0 10px;gap:6px}
 .brand img{height:30px}
 .ig{display:none}
 .badge-pos{width:calc(100% - 52px)}
 .contact a{font-size:14px;padding:8px 10px}
 .sheet img{max-width:100%}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
 .hero-stick{position:relative;min-height:650px;max-height:780px;overflow:hidden}
 .mosaic{position:relative;max-height:780px;overflow:hidden}
 .badge-pos{opacity:1!important;transform:translate(-50%,-50%)!important}
 .badge{animation:none;opacity:1;transform:none}
 .doodles{display:none}
}