@font-face{font-family:Gertrude;src:url('/fonts/GertrudeFeb-Regular.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Gertrude Book;src:url('/fonts/GertrudeFeb-Book.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Gertrude;src:url('/fonts/GertrudeFeb-Bold.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Gertrude Hairline;src:url('/fonts/GertrudeFeb-Hairline.woff2') format('woff2');font-display:swap}
:root{font-size:calc(100vw / 1920);--paper:#f8f8f8;--muted:#8f8f8f}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:130rem}body{margin:0;background:var(--paper);color:#000;font-family:Gertrude,sans-serif;font-size:24rem}h1,h2,p{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0;padding:0;background:none}a,button{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3rem solid #ff794a;outline-offset:5rem}img{display:block}header{position:fixed;top:0;left:0;width:100%;height:106rem;z-index:10;transition:background .2s,box-shadow .2s}header.scrolled{background:rgb(248 248 248 / .94);backdrop-filter:blur(13rem);box-shadow:0 3rem 20rem #00000005}.brand{position:absolute;left:94rem;top:33rem;font:52.149rem/.8 'Gertrude Book',sans-serif;letter-spacing:-3.129rem}.actions{position:absolute;top:2rem;left:471rem;display:flex;align-items:flex-start;flex-direction:column;gap:2rem}.actions button,.actions a{height:33rem;border-radius:60rem;font-size:20rem;line-height:26rem;display:flex;align-items:center;justify-content:center;white-space:nowrap}.hire{width:184rem;background:rgb(163 163 163 / .2)}.actions .support{width:145rem;height:34rem;background:#ff794a;box-shadow:0 4.322rem 32.418rem #1f5a9c0f}.social-jump{width:110rem;background:#00c8ff;box-shadow:0 4.322rem 32.418rem #1f5a9c0f}.about-link{position:absolute;left:797rem;top:0.273rem;display:flex;gap:6rem;align-items:flex-start}.portrait{width:159rem;height:104rem;object-fit:cover;border-radius:6rem;margin-top:1.727rem}.about-copy{width:119rem}.about-copy strong{font-size:20rem;line-height:26rem;display:block;white-space:nowrap}.about-copy p{font-size:12rem;line-height:15.6rem;letter-spacing:-.24rem;color:#adacaa;margin-top:-4.273rem}.tabs{position:absolute;right:50rem;top:6rem;padding:10rem;display:flex;gap:20rem;align-items:center;border-radius:60rem;background:#eee}.tabs button{font-size:52rem;line-height:60rem;padding:10rem 28rem;border-radius:48rem;background:var(--paper);color:#8f8f8f;opacity:.3;white-space:nowrap}.tabs button[aria-pressed=true]{background:#fff;color:#111;opacity:1}main{padding:538rem 50rem 0}.hero{font-weight:400;font-size:301.605rem;line-height:245.42rem;letter-spacing:-6.0321rem;height:212rem;white-space:nowrap;margin-bottom:43rem}.projects{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10rem}.project{position:relative;height:603rem;background:#fff;border-radius:6rem;overflow:hidden;grid-column:span 3}.project-next{grid-column:span 4;background:#d6e6e3}.project-dog{grid-column:span 2}.card-title{position:absolute;left:24rem;top:16rem;font-size:46rem;font-weight:400;line-height:62.695rem;z-index:2}.tag{position:absolute;left:421rem;top:23rem;font:400 24rem/30rem Gertrude,sans-serif;color:var(--muted);border:1rem solid var(--muted);padding:9rem 19rem;border-radius:24rem;z-index:2}.project-dog .tag,.project-four .tag{left:301rem}.project-four .tag{left:607rem}.card-description{position:absolute;left:24rem;bottom:24rem;width:322rem;font-size:24rem;line-height:32rem;color:var(--muted);z-index:2}.project-dog .card-description{width:460rem;color:var(--muted)}.next-art{position:absolute;left:363rem;top:90rem;width:848rem;height:513rem;overflow:hidden;transform:scaleX(-1)}.next-art img{position:absolute;width:138.27%;height:152.37%;left:-18.91%;top:-23.75%;max-width:none}.dog-art{position:absolute;left:117rem;top:119rem;width:365rem;height:365rem;overflow:hidden}.dog-art img{width:365rem;height:365rem;object-fit:cover}.card-open{position:absolute;inset:0;z-index:3}.card-open:hover{box-shadow:none}.arrow{position:absolute;width:50rem;height:50rem;right:24rem;top:23rem}.arrow .circle{width:50rem;height:50rem}.arrow .shaft{position:absolute;left:50%;top:50%;width:11.04rem;height:12.94rem;transform:translate(-50%,-50%) rotate(44.36deg)}.project-dog .arrow{top:24rem}.empty{grid-column:1/-1;height:603rem;display:grid;place-content:center;color:var(--muted);font-size:46rem}.work,.likes{position:relative;background:#fff;border-radius:6rem;height:603rem;margin-top:10rem}.work h2,.likes h2,.about-pair h2{font-weight:400;font-size:46rem;line-height:62.695rem;position:absolute;left:24rem;top:16rem}.career{position:absolute;left:24rem;top:199rem;display:flex;gap:10rem}.job{width:320rem}.service{position:relative;width:320rem;height:320rem;border-radius:8rem;overflow:hidden;background:var(--service-bg)}.service-art{position:absolute;inset:0}.service-art img{position:absolute}.service-tov .service-art img{width:54.87%;height:73.15%;left:23.62%;top:15%}.service-landing .service-art img{width:87.34%;height:55.62%;left:6.33%;top:22.19%}.service-3d .service-art img{width:100%;height:100%;left:0;top:0}.service-sound .service-art img{width:100%;height:100%;left:0;top:0}.service-title{position:absolute;top:20rem;left:20rem;font-size:24rem;line-height:32rem}.info{position:absolute;right:20rem;top:20rem;width:24rem;height:24rem}.info img{width:24rem;height:24rem}.service-controls{position:absolute;left:20rem;bottom:16rem;display:flex;gap:20rem}.service-controls button,.service-controls img{width:40rem;height:40rem}.service-controls button:disabled{cursor:default}.job p{font-size:18rem;line-height:19.8rem;color:var(--muted);margin-top:10rem}.job p+p{margin-top:10.2rem}.about-pair{display:grid;grid-template-columns:1fr 1fr;gap:10rem;margin-top:10rem}.about-pair article{position:relative;background:#fff;border-radius:6rem;height:603rem}.interests{position:absolute;left:24rem;bottom:24rem;display:flex;gap:0}.interests span{font-size:46rem;line-height:62.695rem}.interests span:nth-child(1){width:366rem}.interests span:nth-child(2){width:397rem}.interests span:nth-child(3){width:300rem}footer{position:relative;margin:310rem 50rem 0;height:893rem}.about-page footer{margin-top:300rem}.contact-row{height:250.029rem;display:flex;align-items:center;justify-content:space-between}.contact-row>p{font-size:32rem;line-height:42.667rem}.socials{display:flex;gap:15.153rem;align-items:center}.socials :is(button,a){transition:transform .2s}.socials :is(button,a):hover{transform:translateY(-6rem)}.socials img{width:250.029rem;height:250.029rem}.socials :is(button,a):nth-child(2) img{width:242.452rem}.statement{position:absolute;top:414rem;left:0;width:1522rem;font-size:69.333rem;line-height:80rem}.footer-bottom{position:absolute;top:737rem;left:0;right:0;height:96rem;display:flex;align-items:flex-end;justify-content:space-between;font:24rem/32rem 'Gertrude Book',sans-serif}.tongue{position:absolute;left:844.333rem;top:0;font:107.188rem/.9 'Gertrude Hairline',sans-serif;letter-spacing:-2.1438rem}.skip{position:fixed;left:20px;top:-100px;font-size:18px;z-index:50;background:white;padding:10px}.skip:focus{top:10px}dialog{font-size:24px;border:0;background:var(--paper);border-radius:12px;padding:36px;max-width:min(500px,90vw);color:#111}dialog::backdrop{background:#0005;backdrop-filter:blur(4px)}dialog h2{font-size:32px;font-weight:400;margin-bottom:16px}dialog p{font-size:20px;line-height:1.4;color:#777}.close{position:absolute;right:12px;top:4px;font-size:30px} [hidden]{display:none!important}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.job .service-title{font-size:24rem;line-height:32rem;color:#111;margin:0}.service-sound .service-art img{width:72.72%;height:72.72%;left:13.02%;top:16.34%}

/* Small, reversible motion; the arrow remains centered at rest. */
.actions button,.actions a,.tabs button,.info,.service-controls button,.close{transition:transform .22s ease,filter .22s ease,box-shadow .22s ease}
.next-art img,.dog-art img{transition:transform .45s cubic-bezier(.2,.65,.3,1);transform-origin:center}
.arrow .shaft{transition:transform .3s cubic-bezier(.2,.65,.3,1)}
.arrow .circle{transition:transform .3s ease}
.card-open{transition:box-shadow .25s ease}
@media(hover:hover) and (pointer:fine){
 .actions button:hover,.actions a:hover{transform:translateY(-2rem);filter:brightness(1.04);box-shadow:0 5rem 14rem #0000000c}
 .tabs button:hover{transform:translateY(-2rem);opacity:1}
 .info:hover,.service-controls button:not(:disabled):hover,.close:hover{transform:scale(1.1)}
 .project:hover .next-art img,.project:hover .dog-art img{transform:scale(1.045)}
 .project:hover .arrow .shaft{transform:translate(calc(-50% + 3rem),calc(-50% - 3rem)) rotate(44.36deg)}

}
.project:has(.card-open:focus-visible) .next-art img,.project:has(.card-open:focus-visible) .dog-art img{transform:scale(1.045)}
.project:has(.card-open:focus-visible) .arrow .shaft{transform:translate(calc(-50% + 3rem),calc(-50% - 3rem)) rotate(44.36deg)}
.actions button:active,.actions a:active,.tabs button:active,.socials :is(button,a):active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){
 .next-art img,.dog-art img,.arrow .circle,.actions button,.actions a,.tabs button,.socials :is(button,a),.info,.service-controls button,.close{transform:none!important}
 .arrow .shaft{transform:translate(-50%,-50%) rotate(44.36deg)!important}
}

/* Figma 1607:5470 — a page-scrolling menu capsule. */
header{position:fixed;left:50rem;top:0;width:calc(100% - 100rem);height:112rem;background:#fff;border-radius:0 0 54rem 54rem;overflow:hidden}
.brand{left:-44rem;width:471rem;text-align:center}
.actions{left:427rem}.actions .hire{margin-left:0}
.about-link{left:753rem}.tabs{right:6rem}
.about-page .tabs{gap:10rem}.about-page .tabs button{font-size:36rem;padding-inline:20rem}
.arrow{overflow:hidden;border-radius:50%}
.arrow .circle{transform:none!important;transition:none}
.arrow-window{position:absolute;inset:0;overflow:hidden;border-radius:50%;color:#000;transition:color .2s ease}
.arrow .shaft{position:absolute;display:block;left:50%;top:50%;width:11.04rem;height:12.94rem;background:currentColor;mask:url('/assets/dc736.svg') center/contain no-repeat;transform:translate(-50%,-50%) rotate(44.36deg);transition:transform .4s cubic-bezier(.22,.65,.3,1)}
.arrow .shaft-copy{transform:translate(calc(-50% - 40rem),calc(-50% + 40rem)) rotate(44.36deg)}
@media(hover:hover) and (pointer:fine){
 .project:hover .arrow-window{color:#00c8ff}
 .project:hover .arrow .shaft{transform:translate(calc(-50% + 40rem),calc(-50% - 40rem)) rotate(44.36deg)}
 .project:hover .arrow .shaft-copy{transform:translate(-50%,-50%) rotate(44.36deg)}
}
.project:has(.card-open:focus-visible) .arrow-window{color:#00c8ff}
.project:has(.card-open:focus-visible) .arrow .shaft{transform:translate(calc(-50% + 40rem),calc(-50% - 40rem)) rotate(44.36deg)}
.project:has(.card-open:focus-visible) .arrow .shaft-copy{transform:translate(-50%,-50%) rotate(44.36deg)}
@media(prefers-reduced-motion:reduce){.arrow .shaft{transform:translate(-50%,-50%) rotate(44.36deg)!important}.arrow .shaft-copy{display:none}}

body:not(.about-page) .tabs{gap:6rem}

/* Main page, browser Figma export 1584:3925, 2 November. */
header .brand{left:59rem;width:auto;font-family:'Gertrude Book',sans-serif}
header .actions{left:415rem}header .hire{margin-left:0}
header .about-link{left:741rem}
header .about-copy p{line-height:16rem}
header .portrait{object-position:center 75%}
body:not(.about-page) .hero{margin-bottom:42rem}
.project-next{background:#dbeeff}
.project-needle .card-title,.project-pensioners .card-title{line-height:44rem}
.project-needle .tag{background:white}.project-pensioners .tag{left:607rem}
.needle-art{position:absolute;left:403rem;top:0;width:502rem;height:603rem;overflow:hidden;border-radius:6rem}
.needle-art img{position:absolute;width:120.12%;height:100%;left:-20.12%;object-fit:fill}
.pensioners-art{position:absolute;left:225rem;top:0;width:680rem;height:603rem;overflow:hidden}
.pensioners-art img{width:680rem;height:680rem;max-width:none}
.needle-art img,.pensioners-art img{transition:transform .45s cubic-bezier(.2,.65,.3,1);transform-origin:center}
@media(hover:hover) and (pointer:fine){.project:hover .needle-art img,.project:hover .pensioners-art img{transform:scale(1.045)}}
.project:has(.card-open:focus-visible) .needle-art img,.project:has(.card-open:focus-visible) .pensioners-art img{transform:scale(1.045)}
footer{margin:301rem 50rem 0;height:530rem}
.contact-row{height:264rem;align-items:flex-start}
.contact-row>p{font-size:69.333rem;line-height:80rem;width:640rem}
.socials{gap:8.36rem}
.socials img,.socials :is(button,a):nth-child(2) img{width:264rem;height:264rem}
.footer-bottom{top:419rem;height:108rem;font:24rem/32rem Gertrude,sans-serif;align-items:flex-start}
.footer-brand,.footer-year{margin-top:36rem}
.footer-actions{position:absolute;left:416rem;top:0;display:flex;flex-direction:column;align-items:flex-start;gap:3rem}
.footer-actions button,.footer-actions a{display:flex;align-items:center;gap:8rem;height:33rem;padding:0 10rem;background:#a3a3a333;border-radius:60rem;font:20rem/26rem Gertrude,sans-serif;transition:transform .22s ease}
.footer-actions span{font:20rem/1 Gertrude,sans-serif}
.footer-bottom .tongue{left:1284rem;top:3rem;font-family:Gertrude,sans-serif}
@media(hover:hover) and (pointer:fine){.footer-actions button:hover,.footer-actions a:hover{transform:translateY(-2rem)}}
@media(prefers-reduced-motion:reduce){.needle-art img,.pensioners-art img,.footer-actions button,.footer-actions a{transform:none!important}}

.socials{gap:6.36rem}.socials img,.socials :is(button,a):nth-child(2) img{width:264.98rem;height:264.98rem}

/* About — browser Figma export 1587:4532. */
.about-page .hero{margin-bottom:42rem}
.about-page .about-navigation{gap:0;right:0}
.about-navigation .return-projects{display:block;background:#fff;color:#111;border-radius:48rem;padding:10rem 28rem;font:52rem/60rem Gertrude,sans-serif;white-space:nowrap;transition:transform .22s ease}
.about-profile{position:relative;height:910rem;background:white;border-radius:6rem}
.profile-copy{position:absolute;left:24rem;top:0;width:850rem}
.profile-copy h2,.profile-copy h3{margin:0;position:absolute;left:0;font:400 46rem/44rem Gertrude,sans-serif}
.profile-copy h2{top:24rem}.profile-copy h3{top:248rem}
.identity-tags,.favorite-tags{position:absolute;left:0;display:flex;flex-direction:column;gap:6rem}
.identity-tags{top:92rem}.favorite-tags{top:316rem}
.identity-tags>div,.favorite-tags>div{display:flex;gap:6rem}
.profile-tag{border:1rem solid #8f8f8f;border-radius:24rem;background:#fff;color:#8f8f8f;font:400 24rem/30rem Gertrude,sans-serif;padding:9rem 19rem;white-space:nowrap;transition:background .18s ease,color .18s ease,transform .18s ease}
.profile-tag[aria-pressed=true]{background:#8f8f8f;color:#fff}
.profile-view{position:absolute;left:912rem;top:0;width:910rem;height:910rem;overflow:hidden;border-radius:6rem;background:#f3f3f3}
.profile-photo{width:100%;height:100%;object-fit:cover;display:block}
.profile-photo.show-full-photo{object-fit:contain}
.profile-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18rem;color:#8f8f8f;font-size:24rem}
.profile-empty .profile-empty-title{font-size:46rem;color:#111}
.profile-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.about-page footer{margin-top:301rem}
@media(hover:hover) and (pointer:fine){.profile-tag:hover{transform:translateY(-2rem);background:#f0f0f0}.profile-tag[aria-pressed=true]:hover{background:#777}.return-projects:hover{transform:translateY(-2rem)}}
@media(prefers-reduced-motion:reduce){.profile-tag,.return-projects{transform:none!important}}

@media(max-width:700px){
 .about-profile{height:auto;display:grid;grid-template-columns:1fr}
 .profile-copy{position:static;width:auto;padding:20px}
 .profile-copy h2,.profile-copy h3{position:static;font-size:24px;line-height:1.15}
 .identity-tags,.favorite-tags{position:static;gap:6px}
 .identity-tags{margin-top:18px}.profile-copy h3{margin:28px 0 16px}
 .identity-tags>div,.favorite-tags>div{gap:6px;flex-wrap:wrap}
 .profile-tag{font-size:13px;line-height:18px;padding:10px 13px;border-width:1px;border-radius:24px;min-height:40px}
 .profile-view{position:relative;left:auto;width:100%;height:auto;aspect-ratio:1;border-radius:6px}
 .profile-photo{position:absolute;inset:0}
 .profile-empty{position:absolute;inset:0;font-size:16px;gap:12px}
 .profile-empty .profile-empty-title{font-size:24px}
}

/* Shared polish: rolling labels and viewport-centered introduction. */
header{border-radius:0 0 54rem 54rem}
header .about-copy strong{font-weight:400}
header .about-copy p{margin-top:0;line-height:16rem}
main{padding-top:max(170rem,calc(50svh - 106rem))}
footer,.about-page footer{margin-top:200rem}
.footer-bottom .tongue{font-family:'Gertrude Hairline',sans-serif;font-weight:400}
.roll-button{position:relative;overflow:hidden;isolation:isolate}
.roll-content,.roll-copy{display:flex;align-items:center;justify-content:center;gap:inherit;transition:transform 350ms ease;pointer-events:none}
.roll-copy{position:absolute;inset:0;transform:translateY(110%)}
.roll-shine{position:absolute;inset:0;transform:translateX(130%);background:linear-gradient(279deg,#c4c4c466,transparent 77%);transition:transform 350ms ease;pointer-events:none}
.actions>*,.footer-actions>*,.profile-tag,.return-projects,.tabs>[data-section],.socials>:is(button,a){transition:transform 350ms ease,background 180ms ease,color 180ms ease}
.portrait-stack{position:relative;display:block;width:159rem;height:104rem;overflow:hidden;border-radius:6rem;margin-top:1.727rem;flex-shrink:0}
header .portrait-stack .portrait{width:159rem;height:104rem;margin:0;transition:transform 350ms ease}
.portrait-play{position:absolute;inset:0;transform:translateY(100%);transition:transform 350ms ease}
.moustache{position:absolute;width:82rem;height:34rem;left:50%;top:65%;transform:translate(-50%,-50%);pointer-events:none}
.profile-view .profile-photo,.profile-view .profile-photo.show-full-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.profile-view .profile-previous{z-index:1;pointer-events:none}
.profile-view .profile-photo:not(.profile-previous){z-index:2}
.profile-status{z-index:3}
@media(hover:hover) and (pointer:fine){
 .roll-button:hover .roll-content{transform:translateY(-140%)}
 .roll-button:hover .roll-copy{transform:translateY(0)}
 .roll-button:hover .roll-shine{transform:translateX(12%)}
 .actions>.roll-button:hover,.footer-actions>.roll-button:hover,.profile-tag.roll-button:hover,.tabs>.roll-button:hover,.socials>.roll-button:hover{transform:scale(1.1)}
 .about-link:hover .portrait-stack>.portrait{transform:translateY(-100%)}
 .about-link:hover .portrait-play{transform:translateY(0)}
 .about-link:hover .about-copy .roll-content{transform:translateY(-140%)}
 .about-link:hover .about-copy .roll-copy{transform:translateY(0)}
}
.roll-button:focus-visible .roll-content{transform:translateY(-140%)}
.roll-button:focus-visible .roll-copy{transform:translateY(0)}
.about-link:focus-visible .portrait-stack>.portrait{transform:translateY(-100%)}
.about-link:focus-visible .portrait-play{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
 .roll-button,.roll-content,.roll-copy,.roll-shine,.portrait-play,header .portrait-stack .portrait{transition:none!important;animation:none!important}
 .roll-button:hover .roll-content,.roll-button:focus-visible .roll-content,.about-link:hover .about-copy .roll-content{transform:none}
 .roll-copy,.roll-shine{display:none}
 .roll-button:hover{transform:none!important}
}

.about-copy .roll-content,.about-copy .roll-copy{justify-content:flex-start}

/* Keep the circle in place while only its icon rolls through the window. */
.socials>:is(button,a){position:relative;width:264.98rem;height:264.98rem;flex-shrink:0;transition:transform 350ms ease}
.socials>:is(button,a)>.social-circle{position:absolute;inset:0;pointer-events:none}
.social-window{position:absolute;inset:0;overflow:hidden;border-radius:50%;pointer-events:none}
.social-window img{position:absolute;inset:0;transition:transform 350ms ease}
.social-window .social-back{transform:translateY(110%)}
header .portrait-play .portrait{object-position:center;object-fit:cover}
@media(hover:hover) and (pointer:fine){
 .socials>:is(button,a):hover{transform:scale(1.04)}
 .socials>:is(button,a):hover .social-front{transform:translateY(-110%)}
 .socials>:is(button,a):hover .social-back{transform:translateY(0)}
}
.socials>:is(button,a):focus-visible{transform:scale(1.04)}
.socials>:is(button,a):focus-visible .social-front{transform:translateY(-110%)}
.socials>:is(button,a):focus-visible .social-back{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
 .socials>:is(button,a):hover,.socials>:is(button,a):focus-visible{transform:none}
 .socials>:is(button,a):hover .social-front,.socials>:is(button,a):focus-visible .social-front{transform:none}
 .social-window .social-back{display:none}
}

/* Each tag immediately swaps a complete panel, with no decode gate on input. */
.profile-panel{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:#fff}
.profile-view .profile-panel .profile-photo{z-index:0}
.profile-panel.profile-previous{z-index:1;pointer-events:none}
.profile-panel:not(.profile-previous){z-index:2}
.profile-view .profile-status{z-index:4}
.profile-view[data-kind=gallery]{left:861rem;width:961rem;background:#fff}
.poster-grid,.album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9rem;padding:10rem 10rem 11rem 0}
.poster-grid{height:100%;grid-template-rows:repeat(2,minmax(0,1fr))}
.poster-grid img,.album-grid img{width:100%;height:100%;object-fit:cover;border-radius:6rem;min-height:0}
.album-grid{grid-template-rows:repeat(2,minmax(0,1fr));height:auto}
.album-grid img{height:auto;aspect-ratio:1}
.beer-grid{height:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:9rem;padding:70rem 10rem 100rem 0}
.beer-grid img{width:100%;height:100%;min-height:0;object-fit:contain}
.media-links{position:absolute;left:0;right:0;bottom:96rem;display:flex;flex-direction:column;align-items:center;gap:8rem;z-index:3}
.media-link{display:block;max-width:95%;padding:7rem 18rem;border-radius:60rem;background:#eee;color:#8f8f8f;font:400 20rem/26rem Gertrude,sans-serif;transition:background 180ms,color 180ms,transform 180ms}
.photo-links{bottom:24rem}
.photo-links .media-link,.designer-links .media-link{background:rgb(255 255 255 / .94)}
.designer-links{bottom:24rem;flex-direction:row;justify-content:center}
.designer-video{width:100%;height:100%;object-fit:cover;display:block}
.profile-caption{position:absolute;left:24rem;top:24rem;padding:9rem 19rem;background:#fff;border-radius:24rem;font:400 24rem/30rem Gertrude,sans-serif;color:#8f8f8f;z-index:3}
.profile-view .dog-photo{object-position:center bottom}
.driver-tags{position:absolute;left:24rem;top:24rem;display:flex;gap:8rem;z-index:3}
.driver-tags span{background:#fff;border-radius:24rem;padding:9rem 19rem;color:#8f8f8f;font:400 24rem/30rem Gertrude,sans-serif;white-space:nowrap}
@media(hover:hover) and (pointer:fine){.media-link:hover{background:#00c8ff;color:#111;transform:scale(1.04)}}
@media(max-width:700px){
 .profile-view[data-kind=gallery]{left:auto;width:100%}
 .poster-grid,.album-grid{gap:4px;padding:4px}
 .poster-grid img,.album-grid img{border-radius:4px}
 .album-grid{height:auto}
 .beer-grid{gap:4px;padding:24px 8px 36px}
 .media-links{bottom:8%;gap:4px}
 .media-link{font-size:12px;line-height:16px;padding:6px 12px}
 .photo-links,.designer-links{bottom:14px}
 .profile-caption{left:14px;top:14px;font-size:16px;line-height:20px;padding:6px 12px;border-radius:24px}
 .driver-tags{left:10px;right:10px;top:12px;gap:4px;flex-wrap:wrap}
 .driver-tags span{padding:6px 8px;border-radius:24px;font-size:11px;line-height:16px}
}

/* Six supplied exports follow Figma 1640:6815 on a 962 × 910 canvas. */
.designer-collage{position:absolute;inset:0;background:#fff}
.designer-collage img{position:absolute;object-fit:cover;border-radius:6rem}
.designer-collage .design-shapes{left:0;top:.33%;width:37.53%;height:56.18%}
.designer-collage .design-martistel{left:38.46%;top:.33%;width:33.16%;height:56.15%}
.designer-collage .design-spinning{left:72.56%;top:.33%;width:27.44%;height:46.04%}
.designer-collage .design-martian{left:72.56%;top:47.25%;width:27.34%;height:22.64%}
.designer-collage .design-sber{left:0;top:57.36%;width:71.73%;height:42.64%}
.designer-collage .design-skyeng{left:72.56%;top:70.77%;width:27.55%;height:29.23%}
.artist-socials{position:absolute;left:0;right:0;bottom:24rem;display:flex;justify-content:center;gap:8rem;z-index:3}
.artist-social{position:relative;display:block;flex-shrink:0;width:50rem;height:50rem;border-radius:50%;background:rgb(255 255 255 / .94);transition:transform 350ms ease}
.artist-social img{width:50rem;height:50rem}
.artist-social>.social-circle{position:absolute;inset:0;pointer-events:none}
.band-links-row{display:flex;flex-direction:row;justify-content:center;gap:8rem;max-width:100%}
.band-links-row .media-link{white-space:nowrap;flex-shrink:0}
.musician-links .musician-message{white-space:nowrap}
.media-link{--link-bg:#eee;--link-color:#8f8f8f;background:var(--link-bg);color:var(--link-color);transition:transform 350ms ease}
.photo-links .media-link,.designer-links .media-link{--link-bg:rgb(255 255 255 / .94)}
.designer-links .portfolio-link{--link-bg:#00c8ff;--link-color:#111;background:var(--link-bg);color:var(--link-color)}
.profile-panel .media-link:active{transform:scale(.97)}
.profile-panel .media-link:active .roll-content{transform:translateY(-140%)}
.profile-panel .media-link:active .roll-copy{transform:translateY(0)}
.profile-panel .media-link:active .roll-shine{transform:translateX(12%)}
@media(hover:hover) and (pointer:fine){
 .profile-panel .media-link:hover{background:var(--link-bg);color:var(--link-color);transform:scale(1.1)}
 .artist-social:hover{transform:scale(1.04)}
 .artist-social:hover .social-front{transform:translateY(-110%)}
 .artist-social:hover .social-back{transform:translateY(0)}
}
.artist-social:focus-visible{transform:scale(1.04)}
.artist-social:focus-visible .social-front{transform:translateY(-110%)}
.artist-social:focus-visible .social-back{transform:translateY(0)}
@media(max-width:700px){
 .designer-collage img{border-radius:4px}
 .artist-socials{bottom:14px;gap:6px}
 .artist-social,.artist-social img{width:40px;height:40px}
 .band-links-row{gap:6px}
 .band-links-row .media-link{font-size:11px;padding:6px 10px}
 .musician-links .musician-message{font-size:11px;padding:6px 10px;white-space:normal;text-align:center}
}
@media(prefers-reduced-motion:reduce){
 .profile-panel .media-link:hover,.profile-panel .media-link:active,.artist-social:hover,.artist-social:focus-visible{transform:none}
 .profile-panel .media-link:active .roll-content,.artist-social:hover .social-front,.artist-social:focus-visible .social-front{transform:none}
 .artist-social .social-back{display:none}
}

/* Navigation rolls its label while the control keeps its size and position. */
.tabs>.roll-button,.tabs>.roll-button:is(:hover,:focus-visible,:active){transform:none}

/* Figma's narrow notes column sits between the profile tags and the artwork. */
.profile-details{position:absolute;left:572rem;top:10rem;bottom:12rem;width:326rem;z-index:4;color:#8f8f8f;font:400 24rem/30rem Gertrude,sans-serif}
.profile-details[data-label="Дизайнер"],.profile-details[data-label="Музыка"],.profile-details[data-label="Пиво"]{width:278rem}
.details-copy p+p{margin-top:30rem}
.details-actions{position:absolute;left:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:6rem;max-width:100%}
.profile-details .media-link{--link-bg:#fff;--link-color:#8f8f8f;max-width:100%;border:1rem solid #8f8f8f;border-radius:24rem;padding:9rem 19rem;background:#fff;color:#8f8f8f;font:400 24rem/30rem Gertrude,sans-serif;white-space:nowrap;transform-origin:left center}
.profile-details .artist-socials{position:static;display:flex;flex-direction:column;align-items:flex-start;gap:6rem}
.profile-details .artist-social{background:#fff}
.profile-details .driver-tags{position:static;display:flex;flex-direction:column;align-items:flex-start;gap:6rem}
.profile-details .driver-tags span{border:1rem solid #8f8f8f;border-radius:24rem;background:#fff;padding:9rem 19rem;font:400 24rem/30rem Gertrude,sans-serif}
.profile-details .media-link:active{transform:scale(.97)}
.profile-details .media-link:active .roll-content{transform:translateY(-140%)}
.profile-details .media-link:active .roll-copy{transform:translateY(0)}
.profile-details .media-link:active .roll-shine{transform:translateX(12%)}
@media(hover:hover) and (pointer:fine){.profile-details .media-link:hover{background:#fff;color:#8f8f8f;transform:scale(1.1)}}
/* Geometry of the revised high-resolution collage, in the 961 × 910 slot. */
.designer-collage .design-shapes{left:0;top:1.3187%;width:36.6866%;height:54.87198%}
.designer-collage .design-martistel{left:37.70447%;top:1.3187%;width:32.41977%;height:54.84319%}
.designer-collage .design-spinning{left:70.96774%;top:1.3187%;width:27.6795%;height:45.27473%}
.designer-collage .design-martian{left:70.96774%;top:47.47253%;width:27.6795%;height:20.21978%}
.designer-collage .design-sber{left:0;top:57.04604%;width:70.12435%;height:41.63527%}
.designer-collage .design-skyeng{left:70.96774%;top:68.53714%;width:27.6795%;height:30.14418%}
@media(max-width:700px){
 .profile-details,.profile-details[data-label="Дизайнер"],.profile-details[data-label="Музыка"],.profile-details[data-label="Пиво"]{position:static;width:auto;padding:0 20px 20px;font-size:14px;line-height:20px;display:flex;flex-direction:column;gap:20px}
 .details-copy:empty{display:none}
 .details-copy p+p{margin-top:16px}
 .details-actions{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}
 .profile-details .media-link{font-size:13px;line-height:18px;min-height:40px;padding:10px 13px;border-width:1px;border-radius:24px}
 .profile-details .artist-socials{flex-direction:row;gap:6px}
 .profile-details .driver-tags{flex-direction:row;flex-wrap:wrap;gap:6px}
 .profile-details .driver-tags span{font-size:13px;line-height:18px;min-height:40px;padding:10px 13px;border-width:1px;border-radius:24px}
}
@media(prefers-reduced-motion:reduce){
 .profile-details .media-link:hover,.profile-details .media-link:active{transform:none}
 .profile-details .media-link:active .roll-content{transform:none}
}

/* Fixed owner-specified gutters; fluid design units use the width between them. */
:root{--page-gutter:50px;font-size:calc((var(--layout-width,100vw) - 2 * var(--page-gutter)) / 1820)}
header{left:var(--page-gutter);right:var(--page-gutter);width:auto}
main{padding-inline:var(--page-gutter)}
footer{margin-inline:var(--page-gutter)}
@media(min-width:701px){
 .profile-view{left:50%;right:0;width:auto}
 .profile-view[data-kind=gallery]{left:calc(50% - 50rem);right:0;width:auto}
}

/* Transparent notes space must never intercept the profile filter buttons. */
.profile-details{pointer-events:none}
.profile-details .details-copy,.profile-details .details-actions{pointer-events:auto}