.works-intro { max-width: 48rem; margin-bottom: clamp(3rem, 7vw, 6rem); }
.eyebrow { margin: 0 0 .8rem; color: var(--accent); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.works-intro h1 { margin: 0; font-size: clamp(3rem, 7vw, 5.8rem); font-weight: 650; line-height: .96; letter-spacing: -.055em; }
.works-intro > p:last-child { max-width: 41rem; margin: 2rem 0 0; color: var(--text-muted); font-size: clamp(1.08rem, 2vw, 1.35rem); line-height: 1.55; }
.works-section { margin-top: clamp(4.5rem, 10vw, 8rem); }
.works-section--first { margin-top: 0; }
.works-section__heading { display: grid; grid-template-columns: minmax(12rem, 1fr) 2fr; gap: 2rem; align-items: baseline; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.works-section__heading h2 { margin: 0; font-size: clamp(1.25rem, 2.5vw, 1.7rem); }
.works-section__heading p { margin: 0; color: var(--text-muted); }
.works-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.works-grid--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work-card { min-height: 17rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--border); border-radius: .35rem; }
.work-card__meta { display: grid; grid-template-columns: minmax(0, 1.4fr) .55fr 1fr; gap: .65rem; margin: 0 0 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.work-card__meta div { min-width: 0; }
.work-card__meta dt { margin-bottom: .2rem; color: var(--text-muted); font: 600 .62rem/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.work-card__meta dd { margin: 0; color: var(--accent); font: 600 .73rem/1.35 var(--font-mono); overflow-wrap: anywhere; }
.work-card__meta time { font-variant-numeric: tabular-nums; }
.work-card h3 { margin: 0 0 1.1rem; font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 650; line-height: 1.12; letter-spacing: -.025em; }
.work-card h3 a { text-decoration-thickness: 1px; }
.work-card__summary { margin: 0; color: var(--text); }
.work-card__note { margin: 1rem 0 0; color: var(--text-muted); font-size: .86rem; }
@media (max-width: 58rem) { .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .works-section__heading { grid-template-columns: 1fr; gap: .4rem; } .works-grid, .works-grid--featured { grid-template-columns: 1fr; } .work-card { min-height: auto; } }