/* Selected stories on the homepage, and the complete collection. */
.home-works { padding: 82px var(--page-inset) 74px; scroll-margin-top: 16px; }
.works-heading { max-width: 1200px; margin: 0 auto 58px; display: flex; justify-content: space-between; align-items: end; gap: 28px; }
.works-heading h2 { margin: 0; font-size: clamp(30px, 3.8vw, 58px); font-weight: 400; line-height: 1.65; letter-spacing: -.03em; }
.works-caption { font-size: 14px; padding-bottom: 12px; }
.works-grid { max-width: 1200px; margin: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.3vw, 52px); }
.home-case:nth-child(2) { padding-top: 58px; }
.home-case:nth-child(3) { padding-top: 16px; }
.case-link { display: block; text-decoration: none; }
.case-visual { aspect-ratio: 4 / 3; }
.case-visual img { display: block; width: 100%; height: 100%; object-fit: contain; }
.case-artwork { display: block; width: 100%; height: 100%; }
.case-piece { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
    .case-piece { transition: transform 650ms cubic-bezier(.22,.65,.3,1); }
    .case-piece:nth-of-type(1) { --case-nudge: translate(-14px, 8px) rotate(-4deg); }
    .case-piece:nth-of-type(2) { --case-nudge: translate(14px, -10px) rotate(4deg); transition-delay: 35ms; }
    .case-piece:nth-of-type(4) { --case-nudge: translate(-8px, 16px) rotate(-7deg); transition-delay: 70ms; }
    .case-link:focus-visible .case-piece { transform: var(--case-nudge, none); }
    @media (hover: hover) and (pointer: fine) {
        .case-link:hover .case-piece { transform: var(--case-nudge, none); }
    }
}
.case-meta { display: flex; justify-content: space-between; gap: 8px; margin: 22px 0 14px; font-size: 12px; }
.case-meta span:last-child { white-space: nowrap; }
.case-copy h3 { text-wrap: balance; margin: 0; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.7; font-weight: 400; letter-spacing: -.035em; }
.case-summary { margin: 14px 0 12px; font-size: 14px; line-height: 1.9; }
.case-read { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
.case-read span { font-size: 23px; transition: transform 220ms ease; }
.case-link:hover .case-read span, .case-link:focus-visible .case-read span { transform: translate(3px, -3px); }
.case-link:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.works-more { max-width: 1200px; margin: 46px auto 0; display: flex; justify-content: flex-end; }
.works-page { --page-inset: var(--header-inset); }
.works-main { padding: 62px var(--page-inset) 90px; }
.works-intro { max-width: 1200px; margin: 0 auto 60px; }
.works-intro h1 { font-size: clamp(38px, 4.6vw, 70px); line-height: 1.6; letter-spacing: -.045em; }
.works-intro .page-intro { font-size: 16px; line-height: 2.1; }
.works-page .works-grid { row-gap: 62px; }
.works-page .home-case:nth-child(n) { padding-top: 0; }
.works-page .site-footer { padding: 20px var(--page-inset) 35px; font-size: 12px; }
.works-contact { max-width: 1200px; margin: 68px auto 0; border-top: 1px solid var(--border); padding-top: 30px; }

@media (max-width: 700px) {
    .works-main { padding-top: 36px; padding-bottom: 52px; }
    .works-intro { margin-bottom: 38px; }
    .works-intro h1 { font-size: 38px; }
    .works-intro .page-intro { font-size: 14px; }
    .works-more { margin-top: 30px; }
    .home-works { padding-top: 54px; padding-bottom: 42px; }
    .works-heading { margin-bottom: 32px; align-items: end; gap: 16px; }
    .works-heading h2 { font-size: 30px; }
    .works-caption { font-size: 12px; padding-bottom: 8px; }
    .works-grid { grid-template-columns: 1fr; gap: 34px; }
    .home-case:nth-child(n) { padding-top: 0; }
    .case-link { display: grid; grid-template-columns: 106px minmax(0, 1fr); gap: 18px; align-items: start; }
    .case-visual { margin-top: 5px; }
    .case-meta { margin: 0 0 10px; flex-direction: column; gap: 2px; }
    .case-meta span:last-child { font-size: 12px; }
    .case-copy h3 { font-size: 20px; }
    .case-summary { font-size: 14px; margin-top: 10px; }
    .case-read { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .case-read span { transition: none; } .case-link:hover .case-read span, .case-link:focus-visible .case-read span { transform: none; } }