.portfolio { padding-top: 160px; }
.portfolio-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 84px; }
.portfolio-intro h1 { font-size: clamp(42px, 5vw, 68px); line-height: 1.06; letter-spacing: -.045em; }
.portfolio-intro > p { font-size: 18px; line-height: 1.75; max-width: 46ch; color: #4f586d; }
.portfolio-projects { display: grid; gap: 100px; }
.portfolio-project { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center; }
.project-copy { min-width: 0; }
.project-copy h2 { font-size: clamp(28px, 2.7vw, 38px); line-height: 1.18; letter-spacing: -.035em; }
.project-copy .project-kind { font-size: 14px; color: #596175; line-height: 1.6; margin-top: 14px; }
.project-description { font-size: 17px; line-height: 1.8; color: #3e4555; margin-top: 20px; max-width: 48ch; }
.portfolio .project-button { margin-top: 32px; border-radius: 999px; box-shadow: none; padding-inline: 24px; min-height: 48px; }
.project-preview { display: flex; align-items: center; justify-content: center; aspect-ratio: 1.48; min-width: 0; overflow: hidden; border-radius: 24px; background: #f0f3fa; padding: 22px; }
.project-preview img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.preview-portrait { align-items: start; }
.preview-portrait img { max-height: none; }
.preview-website, .preview-film { padding: 0; }
.preview-website img { height: 100%; object-fit: cover; object-position: top; }
.preview-film { background: #062848; }
.preview-phones { gap: 22px; padding: 22px 40px; background: #ececf4; }
.preview-phones img { width: auto; height: 100%; max-width: 46%; object-fit: contain; }
.portfolio-notes { margin-block: 76px 50px; max-width: 84ch; }
.portfolio-notes p { font-size: 13px; line-height: 1.75; color: #596175; }
.portfolio-notes p + p { margin-top: 10px; }
.portfolio-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 .project-preview { transition: transform .25s ease; }
 .project-preview:hover { transform: translateY(-4px); }
}
@media(max-width:1000px) {
 .portfolio-intro, .portfolio-project { gap: 36px; }
 .project-description { font-size: 16px; }
 .project-preview { padding: 16px; }
 .preview-website, .preview-film { padding: 0; }
 .preview-phones { padding: 20px; gap: 14px; }
}
@media(max-width:760px) {
 .portfolio { padding-top: 130px; }
 .portfolio-intro { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
 .portfolio-intro > p { font-size: 16px; }
 .portfolio-project { grid-template-columns: 1fr; gap: 28px; }
 .portfolio-projects { gap: 64px; }
 .project-copy h2 { font-size: 32px; }
 .project-description { max-width: 60ch; }
 .portfolio .project-button { margin-top: 24px; }
 .project-preview { border-radius: 18px; }
 .portfolio-notes { margin-top: 54px; }
}
@media(max-width:380px) {
 .project-copy h2 { font-size: 28px; }
 .portfolio-intro h1 { font-size: 40px; }
}