/* Full-width scattered cartridges, with the project identity underneath. */
.cartridge-outline{position:absolute;left:6.4%;top:9.357%;width:87.2%;height:81.214%;display:block;pointer-events:none;border-radius:4%}
body.cv08 #personal-projects.gallery{display:flex;flex-direction:column;gap:10px;height:auto;min-height:0;padding:0 12px 18px;overflow:visible}
body.cv08 #personal-projects.gallery .cartridge-stage{width:100%;height:clamp(420px,36vw,660px);flex:none;overflow:visible}
body.cv08 #personal-projects.gallery .project-track{perspective:none;overflow:visible}
body.cv08 #personal-projects.gallery .project{top:50%;left:50%;width:clamp(260px,22.5vw,405px);max-width:none;filter:brightness(.9) saturate(.94) drop-shadow(4px 14px 8px #0009);pointer-events:none;transform-style:flat}
body.cv08 #personal-projects.gallery .project .cartridge-outline{pointer-events:auto;cursor:pointer}
body.cv08 #personal-projects.gallery .project.cartridge-front{filter:brightness(1) saturate(1) drop-shadow(5px 20px 12px #000a)}
body.cv08 #personal-projects.gallery .project:focus-visible{outline:none}
body.cv08 #personal-projects.gallery .project:focus-visible .cartridge-outline{outline:2px solid #d0e58e;outline-offset:6px}
body.cv08 .cartridge-browser{width:100%;padding:0;margin:0;align-self:center;text-align:center;z-index:1}
body.cv08 .cartridge-summary{margin:0;min-height:0}
body.cv08 .cartridge-summary h3{height:88px;margin:0 0 16px;display:flex;align-items:center;justify-content:center}
body.cv08 .cartridge-summary-open{height:100%;max-width:100%;padding:0 12px;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
body.cv08 .cartridge-summary-open:focus-visible{outline:2px solid #d0e58e;outline-offset:5px}
body.cv08 .cartridge-project-logo{display:block;width:auto;height:auto;max-width:min(100%,340px);max-height:88px;object-fit:contain}
body.cv08 .cartridge-summary h3[data-logo=aotu] img{width:280px}
body.cv08 .cartridge-summary h3:is([data-logo=traveler],[data-logo=lost]) img{filter:brightness(0) invert(.86)}
body.cv08 .cartridge-summary h3[data-logo=doom] img{filter:invert(1) hue-rotate(180deg)}
body.cv08 .cartridge-description{max-width:900px;min-height:3.4em;margin:0 auto;color:#c5cdc7;line-height:1.7;text-wrap:pretty}
body.cv08 #personal .collection-heading:after{margin-right:0}
@media(max-width:760px){
 body.cv08 #personal-projects.gallery{padding:0;gap:6px}
 body.cv08 #personal-projects.gallery .cartridge-stage{height:365px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#a9bf64 #242626;overscroll-behavior-x:contain}
 body.cv08 #personal-projects.gallery .project-track{position:relative;width:1060px;height:350px}
 body.cv08 #personal-projects.gallery .project{width:230px;top:50%}
 body.cv08 .cartridge-browser{padding:12px 18px 0}
 body.cv08 .cartridge-summary h3{height:76px;margin-bottom:14px}
 body.cv08 .cartridge-project-logo{max-height:76px;max-width:280px}
 body.cv08 .cartridge-description{min-height:5.1em}
}
@media(prefers-reduced-motion:reduce){body.cv08 #personal-projects.gallery .project{transition:none!important}}

/* Explicit widths prevent intrinsic SVG sizes collapsing in a flex button.
   Optical widths account for stacked, brush and extra-wide wordmarks. */
body.cv08 .cartridge-summary h3{height:148px;margin-bottom:12px}
body.cv08 .cartridge-summary-open{width:380px;height:148px;flex:none}
body.cv08 .cartridge-project-logo{width:var(--logo-width,300px);max-width:100%;height:auto;max-height:148px;flex:0 0 auto}
body.cv08 .cartridge-summary h3[data-logo=aotu]{--logo-width:320px}
body.cv08 .cartridge-summary h3[data-logo=aotu] img{width:var(--logo-width)}
body.cv08 .cartridge-summary h3[data-logo=doom]{--logo-width:220px}
body.cv08 .cartridge-summary h3[data-logo=traveler]{--logo-width:340px}
body.cv08 .cartridge-summary h3[data-logo=lost]{--logo-width:300px}
body.cv08 .cartridge-summary h3[data-logo=occult]{--logo-width:280px}
body.cv08 .cartridge-summary h3[data-logo=jojo]{--logo-width:280px}
body.cv08 .cartridge-summary h3[data-logo=city]{--logo-width:354px}
@media(max-width:760px){
 body.cv08 .cartridge-summary h3{height:122px}
 body.cv08 .cartridge-summary-open{width:100%;height:122px;padding:0}
 body.cv08 .cartridge-project-logo{width:calc(var(--logo-width,300px)*.82);max-width:100%;max-height:122px}
 body.cv08 .cartridge-summary h3[data-logo=aotu] img{width:calc(var(--logo-width)*.82)}
}

body.cv08 #personal-projects .cartridge-foil{mask-image:url('assets/cartridge/front/label-mask.svg')}