.projects-page{min-height:100svh;padding:4.5vh 6vw;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;gap:28px}
.project-list{grid-column:1/-1;grid-row:2;align-self:center;justify-self:center;width:min(100%,800px);margin:60px 0 110px}
.list-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:0 0 36px;border-bottom:1px solid #999}
.list-heading h1{font:inherit;font-size:12px;font-weight:400;margin:0;text-transform:uppercase;line-height:1.5}
.close-projects{font-size:20px;line-height:1;padding:0 2px}
.project-row{border-bottom:1px solid #999}
.project-toggle{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:28px;width:100%;border:0;background:none;color:#fff;padding:18px 0;text-align:left;font:inherit;font-size:14px;line-height:1.5;text-transform:uppercase}
.project-toggle:focus-visible{outline:1px solid #36a9ff;outline-offset:4px}
.project-toggle:hover{color:rgba(255,255,255,.65)}
.project-description{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .28s ease,opacity .2s ease}
.project-description>div{overflow:hidden;min-height:0}
.project-description p{font-size:12px;line-height:1.6;padding:0 0 18px;color:rgba(255,255,255,.7)}
.project-row.is-expanded .project-description{grid-template-rows:1fr;opacity:1}
@media(max-width:650px){.projects-page{padding:26px 22px;gap:22px}.project-list{margin:50px 0 90px}.project-toggle{font-size:12px;gap:20px;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.list-heading h1{font-size:12px}.project-description p{font-size:11px}.category{text-align:right}}
@media(prefers-reduced-motion:reduce){.project-description{transition:none}}
.project-list{min-height:300px}

.spectrum-accent{width:clamp(200px,26vw,330px);margin:32px auto 0;pointer-events:none;user-select:none}.spectrum-accent img{display:block;width:100%;height:auto;opacity:.48;mix-blend-mode:screen;animation:spectrum-drift 14s ease-in-out infinite alternate}@keyframes spectrum-drift{from{transform:translateY(4px) rotate(-3deg)}to{transform:translateY(-5px) rotate(2deg)}}@media(prefers-reduced-motion:reduce){.spectrum-accent img{animation:none}}

.spectrum-accent{opacity:0}.spectrum-accent.is-loaded{opacity:1;animation:appear .7s ease-out}@media(prefers-reduced-motion:reduce){.spectrum-accent.is-loaded{animation:none}}