html,body{background:#0c0f10;color:#252a2d}body{padding-top:0;overflow-x:hidden;overflow-y:auto;background:transparent}.background-shader{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}.rig-preview{display:block;width:100%!important;max-width:none!important;height:57vw;margin:0 auto clamp(80px,9vw,180px)!important;border:0}.portfolio-shell{background:#eeeeee;color:#252a2d}.folder-title,.project-name{color:#9c3a2d}.folder-stage{background:#101112}.folder-details a,.empty a{color:#713026}.empty,.loading{border-color:#9c3a2d}.nav a{background:#eeeeee;color:#252a2d;border-color:#9c3a2d}.nav{position:relative;z-index:3;margin-top:18px}.page{background:#eeeeee}.page>.background{filter:grayscale(1);mix-blend-mode:luminosity}.site-logo,.tab-icon{z-index:4}

body.portfolio-page{padding-top:calc(var(--header-top, 20px) + var(--menu-height, 88px) + 24px)}
.portfolio-home-logo{position:absolute;top:var(--header-top, 20px);left:clamp(20px,2.8vw,55px);z-index:1100;width:clamp(64px,5.3vw,101px)}
.portfolio-home-logo img{display:block;width:100%;height:auto}
.portfolio-home-logo:focus-visible{outline:3px solid white;outline-offset:5px;border-radius:12px}
.portfolio-page #account-menu-panel{background:#eeeeee;border-color:#9c3a2d;color:#252a2d}
.portfolio-page #account-menu-panel a{color:#252a2d}
.portfolio-page #account-menu-panel a:hover,.portfolio-page #account-menu-panel a:focus-visible{background:#9c3a2d;color:white}

/* Red artwork becomes white; yellow fills become black. */
.portfolio-home-logo img,.portfolio-page #account-menu-toggle img,.portfolio-page .slideshow-control img{filter:grayscale(1) invert(1) contrast(100)}

/* Centered signature blends with the artwork while controls remain above it. */
.portfolio-page .folder-stage{isolation:isolate;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

.portfolio-page .project-image,.portfolio-page .folder-details img{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}
@media(max-width:760px){.portfolio-page .folder-stage::after{width:42%;height:50%}}

.portfolio-page .project-name{inset:0;margin:0;padding:30px;display:flex;align-items:center;justify-content:center;text-align:center;color:white;background:rgba(0,0,0,.75);font-family:Montserrat,system-ui,sans-serif;font-style:normal;font-weight:900;font-size:clamp(24px,3.5vw,64px);text-shadow:none;opacity:0;transition:opacity .25s ease;z-index:4;pointer-events:none}
.portfolio-page .project-slide{z-index:4;pointer-events:none}
.portfolio-page .folder-stage:hover .project-name,.portfolio-page .folder-stage:focus-within .project-name{opacity:1}
.slideshow-zones{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);z-index:6}
.slide-zone{border:0;padding:0;background:transparent;min-width:0;border-radius:0}
.slide-zone:focus-visible{outline:3px solid white;outline-offset:-5px}
.portfolio-page .folder-details{display:block}

.portfolio-page .folder-stage::after{z-index:5}

/* Watermark applies only to the regular portfolio gallery. */
.portfolio-page .folder-stage::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:24%;height:50%;background:url("/assets/portfolio-watermark.png") center/contain no-repeat;opacity:.8;mix-blend-mode:overlay;z-index:5;pointer-events:none}
@media(max-width:760px){.portfolio-page .folder-stage::after{width:42%}}

body.portfolio-page{padding-top:0}
.portfolio-cover{width:100%;margin:0 0 clamp(32px,4vw,80px);padding:clamp(90px,8vw,150px) 0 0;line-height:0}
.portfolio-cover img{display:block;width:min(78vw,1440px);height:auto;margin-inline:auto;aspect-ratio:16/9;object-fit:contain}
@media(max-width:700px){.portfolio-cover{padding-top:130px}.portfolio-cover img{width:100%}}

/* Keep the cover passive and prevent ordinary image dragging. */
.portfolio-cover{overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.portfolio-cover-art{position:relative;width:min(78vw,1440px);margin-inline:auto;isolation:isolate}
.portfolio-cover .portfolio-cover-art img{width:100%;pointer-events:none;-webkit-user-drag:none}
@media(max-width:700px){.portfolio-cover-art{width:100%}}

/* Pale circular backdrop and a restrained, hair-only pink glow. */
.portfolio-cover{margin-bottom:0;padding-bottom:clamp(32px,4vw,80px)}
.portfolio-cover-art{overflow:visible}
.portfolio-cover-art::before{content:"";position:absolute;z-index:-1;width:150vw;aspect-ratio:1;left:50%;transform:translateX(-50%);top:28%;border-radius:50%;background:#eee;pointer-events:none}
.cover-hair-glow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:blur(9px);opacity:0}
.glow-ready .cover-hair-glow{animation:cover-hair-breathe 6s ease-in-out infinite}
@keyframes cover-hair-breathe{0%,100%{opacity:0}50%{opacity:.30}}
@media(prefers-reduced-motion:reduce){.glow-ready .cover-hair-glow{animation:none;opacity:0}}

/* Seamless Ivy-to-Alistair transition and supplied planet composition. */
.portfolio-cover{position:relative;isolation:isolate;padding-bottom:clamp(130px,13vw,250px)}
.portfolio-planets{position:absolute;z-index:-1;top:0;left:0;width:100%;aspect-ratio:16/9;background:url('/assets/portfolio-pink-planets.png') center top/100% auto no-repeat;pointer-events:none;mask-image:linear-gradient(#000 0 28%,rgba(0,0,0,.75) 48%,transparent 78%)}
.portfolio-cover::after{content:"";position:absolute;z-index:2;bottom:0;left:0;width:100%;height:clamp(130px,13vw,250px);background:linear-gradient(to bottom,#eee 0%,#d2ced8 15%,#81748f 36%,#3d344a 57%,#18151f 76%,#0c0f10 100%);pointer-events:none}