.projects-page{--project-width:min(74vw,840px);--project-gap:24px;width:100%;padding-top:64px;padding-bottom:56px}
.projects-heading{width:var(--project-width);margin:0 auto 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.projects-heading h1{font-size:1.375rem;line-height:1.3;font-weight:400;letter-spacing:-.4px;margin:0 0 7px;color:#ddd}
.projects-heading .projects-draft{font-size:.75rem;color:#858585;line-height:1.5;letter-spacing:0;margin:0}
.projects-controls{display:flex;align-items:center;gap:8px;flex:none}
.projects-controls[hidden]{display:none}
.projects-count{font-size:.75rem;font-variant-numeric:tabular-nums;color:#919191;letter-spacing:1px;margin-right:10px}
.projects-controls button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #3a3a3a;border-radius:50%;background:transparent;color:#ddd;font-size:1.125rem;font-weight:400;cursor:pointer}
.projects-controls button:hover:not(:disabled){background:#252525;border-color:#666}
.projects-controls button:disabled{opacity:.28;cursor:default}
.projects-controls button:focus-visible{outline:2px solid #aaa;outline-offset:4px}
.projects-track{display:flex;align-items:flex-start;gap:var(--project-gap);width:100%;overflow-x:auto;overflow-y:hidden;padding:8px max(0px,calc((100% - var(--project-width))/2)) 20px;scroll-padding-inline:max(0px,calc((100% - var(--project-width))/2));scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab}
.projects-track::-webkit-scrollbar{display:none}
.projects-track:focus-visible{outline:1px solid #666;outline-offset:-3px}
.projects-track.is-dragging{cursor:grabbing;user-select:none;scroll-snap-type:none}
.projects-track.is-wheeling{scroll-snap-type:none}
.project-slide{flex:0 0 var(--project-width);min-width:0;scroll-snap-align:center}
.project-panel{transform:scale(var(--project-scale,.88));transform-origin:center 45%;opacity:var(--project-opacity,.55);will-change:transform,opacity}
.project-slide:first-child .project-panel{--project-scale:1;--project-opacity:1}
.project-art{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;border-radius:8px;background:#262626;overflow:hidden;color:#aaa;border:1px solid #ffffff08}
.project-art-index{position:absolute;top:24px;left:24px;font-size:.75rem;letter-spacing:1px;color:#ffffff50;font-variant-numeric:tabular-nums}
.project-art-company{font-size:clamp(24px,4vw,46px);font-weight:400;letter-spacing:-1.5px;color:#ffffffa6}
.project-art-note{position:absolute;bottom:24px;left:24px;font-size:.75rem;color:#ffffff60}
.project-art-elation{background:#23302f}
.project-art-aster{background:#29323b}
.project-art-meta{background:#282b30}
.project-art-business-score{background:#302b35}
.project-art-bulb{background:#352d30}
.project-copy{padding:22px 1px 0}
.project-meta{display:flex;justify-content:space-between;gap:16px;font-size:.75rem;color:#929292;line-height:1.5;margin-bottom:10px}
.project-copy h2{font-size:1.375rem;font-weight:400;line-height:1.3;letter-spacing:-.5px;color:#ddd;margin:0 0 12px}
.project-copy p{font-size:.875rem;font-weight:400;line-height:1.7;color:#aaa;max-width:62ch;margin:0;letter-spacing:0}
.projects-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[data-theme="light"] .projects-heading h1,[data-theme="light"] .project-copy h2{color:#292929}
[data-theme="light"] .projects-heading .projects-draft,[data-theme="light"] .projects-count,[data-theme="light"] .project-meta{color:#747474}
[data-theme="light"] .project-copy p{color:#626262}
[data-theme="light"] .projects-controls button{color:#333;border-color:#ddd}
[data-theme="light"] .projects-controls button:hover:not(:disabled){background:#eee;border-color:#bbb}
[data-theme="light"] .project-art{border-color:#00000008}
@media(max-width:600px){.projects-page{--project-width:calc(100vw - 64px);--project-gap:12px;padding-top:36px}.projects-heading{margin-bottom:20px;align-items:flex-start;gap:12px}.projects-heading h1{font-size:1.125rem}.projects-heading .projects-draft{max-width:15ch}.projects-controls{gap:4px}.projects-count{margin-right:4px;font-size:.75rem;letter-spacing:0}.projects-controls button{width:40px;height:40px}.project-art{aspect-ratio:4/3}.project-art-index{top:18px;left:18px}.project-art-note{bottom:18px;left:18px}.project-art-company{letter-spacing:-.7px}.project-copy{padding-top:18px}.project-copy h2{font-size:1.125rem}.project-meta{gap:10px}.project-copy p{font-size:.875rem}}
@media(prefers-reduced-motion:reduce){.project-panel{transform:none;opacity:1;will-change:auto}}

.project-year{margin-left:auto;flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.project-copy h2 .project-product{display:block;font-size:.875rem;line-height:1.5;letter-spacing:0;color:#929292;margin-top:5px}
[data-theme="light"] .project-copy h2 .project-product{color:#747474}

.project-art-image{background:transparent;border:0}
.project-art-image img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;user-select:none;-webkit-user-drag:none}

/* Keep UI screenshots complete within the consistent carousel frame. */
.project-art-image.project-art-contained{background:#222;border:1px solid #ffffff0d}
.project-art-contained img{object-fit:contain;padding:3%}
[data-theme="light"] .project-art-image.project-art-contained{background:#ededed;border-color:#0000000d}

/* Present the upper half of the original dashboard in a rounded frame. */
.project-art-image.project-art-business-score{background:linear-gradient(135deg,#dddbea,#c5c1d7);border:1px solid #ffffff0d}
.business-score-crop{position:relative;width:72%;aspect-ratio:2826/2047;overflow:hidden;border-radius:12px;background:#fcfcfc;box-shadow:0 16px 44px #29203922}
.project-art-business-score .business-score-crop img{position:absolute;inset:0 auto auto 0;width:100%;height:200%;max-width:none;object-fit:fill;object-position:top;padding:0}
@media(max-width:600px){.business-score-crop{width:86%;border-radius:9px}}

/* These screenshots already include their own designed backgrounds. */
.project-art.project-art-native{aspect-ratio:16/9;border-radius:12px;background:transparent;border:0}
.project-art-native img{object-fit:contain;padding:0}
@media(max-width:600px){.project-art.project-art-native{border-radius:9px}}