.project-index{max-width:1040px;margin:auto;padding:56px 24px 80px;color:var(--text)}
.project-index>header{max-width:680px;margin-bottom:3rem}
.project-index h1{font:600 clamp(2rem,4vw,2.6rem)/1.2 var(--serif);letter-spacing:-.015em;margin:0 0 1rem;border:0}
.project-index>header p{font:400 1.15rem/1.7 var(--serif);color:var(--text-light)}
.project-index nav{display:flex;gap:1.5rem;flex-wrap:wrap;font:500 .95rem/1.5 var(--sans);margin-top:1.5rem}
.project-index a{color:var(--accent);text-underline-offset:3px}
.project-group{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:3rem;margin:3rem 0}
.project-group>h2{font:500 .95rem/1.6 var(--sans);color:var(--text-muted);border:0;margin:.3rem 0}
.project-entries{display:grid;gap:2.5rem}
.project-entry{max-width:680px;min-width:0}
.project-entry h3{font:600 1.45rem/1.3 var(--serif);letter-spacing:-.01em;margin:0 0 .7rem;border:0}
.project-entry h3 a{color:var(--text);text-decoration:none}
.project-entry h3 a:hover{color:var(--accent)}
.project-entry p{font:400 1.05rem/1.75 var(--serif);color:var(--text-light);margin:.5rem 0 1rem}
.project-entry .project-links{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;font:500 .9rem/1.5 var(--sans)}
.project-entry .project-links a{padding:.3rem 0}
.project-index :focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(max-width:650px){.project-index{padding:32px 20px 56px}.project-group{grid-template-columns:minmax(0,1fr);gap:1.3rem;margin-top:2.5rem}.project-entries{gap:2rem}.project-index nav{gap:.8rem 1.3rem}}

.project-index p a{text-decoration:underline;text-underline-offset:3px}