/* Previous Years (docs design.md → Previous Years). */
.years{position:absolute;inset:0}

.years-list{position:absolute;top:120px;left:var(--edge);width:700px;display:flex;flex-direction:column;gap:34px}
.decade{display:flex;align-items:baseline;gap:0}
.decade-label{flex:none;width:64px;font:400 12px var(--font-mono);color:var(--decade)}
.decade-years{display:flex;flex-wrap:wrap;gap:4px 22px}
.yr{font-weight:300;font-size:44px;line-height:1.1;text-decoration:none;color:var(--ink)}
.yr:hover,.yr:focus-visible,.yr.is-active{font-weight:700;color:var(--accent-hover)}

.years-preview{position:absolute;top:112px;right:var(--edge);width:420px}
.yp{display:flex;flex-direction:column;gap:14px}
.yp[hidden]{display:none}
.yp-year{font-weight:700;font-size:120px;line-height:.85;letter-spacing:-.04em}
.yp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.yp-cell{height:150px;padding:8px;background:#d8d7d2;display:flex;align-items:center;justify-content:center}
.yp-cell img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.yp-meta{display:flex;justify-content:space-between;font:400 12px var(--font-mono)}
.yp-meta a{color:var(--ink)}

@media (max-width:767px){
	/* Decades stacked, years in five columns, no preview panel. */
	.years{position:static;padding:96px var(--edge-phone) 40px}
	.years-list{position:static;width:auto;gap:24px}
	.decade{flex-direction:column;gap:8px}
	.decade-label{width:auto}
	.decade-years{display:grid;grid-template-columns:repeat(5,1fr);gap:6px 0}
	.yr{font-size:28px}
	.yr:hover,.yr:focus-visible,.yr.is-active{font-weight:300;color:var(--ink)} /* no hover on a phone: nothing is highlighted */
	.decade-years{gap:6px 4px}
	.years-preview{display:none}
}