/* Portfolio uses the homepage project layout, repeated for each piece of work. */
.portfolio-intro { display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:end; padding-block:88px 56px; }
.portfolio-intro h1 { font-size:clamp(44px,5vw,70px); line-height:1.08; letter-spacing:-.05em; }
.portfolio-intro p { max-width:440px; justify-self:end; color:var(--secondary); font-size:16px; line-height:1.8; }
.portfolio-list { border-top:1px solid var(--line); }
.portfolio-list .work-feature { gap:72px; padding-block:64px; border-bottom:1px solid var(--line); }
.work-feature { display:grid; grid-template-columns:1.3fr 1fr; align-items:center; }
.portfolio-list .work-feature:nth-child(even) { grid-template-columns:1fr 1.3fr; }
.portfolio-list .work-feature:nth-child(even) .work-visual { order:2; }
.work-visual { min-width:0; padding:24px; background:#eee; border-radius:var(--radius); }
.work-project-image { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:top; border-radius:4px; }
.work-visual-note { display:block; font-size:11px; color:#666; margin-top:16px; }
.work-visual--mark { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:320px; }
.work-visual--mark .work-project-image { width:140px; aspect-ratio:auto; object-fit:contain; border-radius:0; }
.work-visual--mark .work-visual-note { align-self:stretch; }
.work-story h2 { font-size:32px; letter-spacing:-1px; line-height:1.15; margin-bottom:22px; }
.work-story > p { max-width:360px; font-size:15px; color:var(--secondary); line-height:1.8; }
.project-details { margin-block:28px 20px; display:grid; gap:16px; }
.project-details div { display:grid; grid-template-columns:100px 1fr; gap:12px; font-size:12px; }
.project-details dt { color:var(--quiet); }
.work-story .text-link { margin-right:20px; }
.portfolio-close { padding-block:64px 88px; }
.portfolio-close p { max-width:440px; margin-top:20px; color:var(--secondary); font-size:16px; line-height:1.8; }
.portfolio-close .button { margin-top:28px; }
.portfolio-close .text-link { margin-left:28px; }
@media (max-width:1199px) {
 .portfolio-intro,.portfolio-list .work-feature { gap:48px; }
}
@media (max-width:999px) {
 .navigation { height:76px; } .nav-links,.nav-actions { display:none; } .menu-toggle { display:inline-flex; }
 .portfolio-intro { gap:40px; padding-top:64px; }
 .portfolio-list .work-feature { gap:32px; }
 .work-story h2 { font-size:27px; }
 .work-story > p { font-size:13px; }
 .project-details div { grid-template-columns:1fr; gap:3px; font-size:11px; }
}
@media (max-width:699px) {
 .navigation { height:72px; }
 .portfolio-intro,.work-feature { grid-template-columns:1fr; gap:28px; }
 .portfolio-intro { padding-block:48px 32px; }
 .portfolio-intro h1 { font-size:clamp(42px,11vw,60px); }
 .portfolio-intro p { justify-self:start; max-width:none; }
 .portfolio-list .work-feature { padding-block:40px; }
 .portfolio-list .work-feature:nth-child(even) .work-visual { order:0; }
 .work-visual { padding:20px; }
 .work-story h2 { font-size:28px; margin-bottom:16px; }
 .work-story > p { max-width:none; font-size:14px; }
 .project-details { grid-template-columns:1fr 1fr; gap:20px; }
 .project-details div { grid-template-columns:1fr; }
 .work-story .text-link { margin-right:16px; }
 .portfolio-close { padding-block:40px 56px; }
 .portfolio-close .text-link { margin-left:0; }
 .footer-top { grid-template-columns:1fr 1fr; gap:32px 24px; } .footer-brand { grid-column:1/-1; }
 .footer-bottom,.footer-bottom > div { flex-wrap:wrap; gap:16px; }
 .modal { padding:28px 24px; } .modal .form-row { grid-template-columns:1fr; }
 input:not([type=checkbox]),textarea { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }