/* The portfolio shell shares its type and colour roles with the case studies. */
:root { --editor-gutter:clamp(20px,3vw,48px); --editor-line:color-mix(in srgb,currentColor 25%,transparent); }
.portfolio-nav { position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; column-gap:16px; padding:4px var(--editor-gutter); background:var(--paper,#f3f2ee); color:var(--on-paper,#0e0e0e); border-bottom:1px solid var(--editor-line); font:500 14px/1.3 "Hanken Grotesk",Helvetica,Arial,sans-serif; }
.portfolio-nav nav,.section-index {display:flex;align-items:center;gap:clamp(10px,2vw,28px);flex-wrap:wrap}
.portfolio-nav a,.portfolio-nav .gm-pm,.section-index a {display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
.portfolio-nav .gm-pm {position:static!important;inset:auto!important;transform:none!important;box-shadow:none!important;padding:0!important;background:none!important;color:inherit!important;font:inherit!important;letter-spacing:normal!important;text-transform:none!important;border:0}
.portfolio-nav a:hover,.portfolio-nav button:hover,.section-index a:hover,.case-pagination a:hover {text-decoration:underline;text-underline-offset:.25em}
:focus-visible {outline:2px solid currentColor;outline-offset:3px}
[id]{scroll-margin-top:110px}
.portfolio-home {margin:0;background:var(--paper,#f3f2ee);color:var(--on-paper,#0e0e0e);font:400 17px/1.5 "Hanken Grotesk",Helvetica,Arial,sans-serif}
.portfolio-home * {box-sizing:border-box}
.portfolio-home a {color:inherit}
.cover {padding:clamp(55px,10vh,120px) var(--editor-gutter) clamp(40px,7vh,80px)}
.cover h1 {margin:0;font-size:clamp(52px,9vw,150px);font-weight:500;line-height:.95;letter-spacing:-.065em}
.cover p {max-width:38ch;font-size:clamp(21px,2.2vw,32px);line-height:1.18;margin:20px 0}
.cover>a,.project-card small,.project-card span,.portfolio-home .k {font-size:14px}
.project-index {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px;padding:0 var(--editor-gutter) 80px}
.project-card>a {display:block;text-decoration:none}
.project-card img {width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.card-copy {padding:18px 0 0}
.card-copy h2 {margin:6px 0;font-weight:500;line-height:1.04;font-size:clamp(26px,3vw,52px);letter-spacing:-.045em}
.card-copy p {max-width:56ch;margin:12px 0}
.card-copy span {display:block;border-top:1px solid var(--editor-line);padding-top:8px}
.project-card a:hover h2 {text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.13em}
.portfolio-home #about {background:#101010;color:#f3f2ee;padding:clamp(44px,7vw,108px) var(--editor-gutter)}
.gm-ab {max-width:1080px;margin:auto}
.gm-ab-h {display:flex;justify-content:space-between;align-items:baseline;gap:24px}
.gm-ab-id h2 {font-size:clamp(34px,5vw,72px);font-weight:500;letter-spacing:-.045em;line-height:1.05;margin:0}
.gm-ab-tag {max-width:55ch}
.gm-caps-grid,.design-edit {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.gm-caps-grid h3 {font-size:18px;margin:.65em 0}.gm-caps-grid p {margin:0}
.gm-ab-photo {margin:36px 0}.gm-ab-photo img {display:block;width:100%;height:auto}
.gm-ab button {font:inherit;color:inherit;background:none;border:1px solid var(--editor-line);padding:8px 12px;cursor:pointer}
.gm-exp ol,.gm-press ul {list-style:none;padding:0}.gm-exp li,.gm-press li {display:flex;gap:12px;justify-content:space-between;border-top:1px solid var(--editor-line);padding:10px 0}
.gm-press li span {flex:1}.gm-exp-also {max-width:65ch}.gm-ab-contact,.portfolio-home footer {display:flex;gap:18px;align-items:center;flex-wrap:wrap}.gm-ab-contact .row {display:flex;gap:14px;align-items:center}.portfolio-home footer {padding:24px var(--editor-gutter)}
main .head h1 {margin-bottom:16px}
main .head .case-opening {display:block;max-width:55ch;margin:12px auto 24px;font:400 clamp(19px,1.7vw,26px)/1.4 "Hanken Grotesk",Helvetica,Arial,sans-serif;letter-spacing:-.016em;text-align:left}
.section-index {justify-content:center;margin:0 0 20px;font-size:14px}
.editorial-label {font-size:clamp(21px,2.1vw,32px);line-height:1.15;font-weight:500;margin:0}
.editorial-photo img,.design-edit img {width:100%;height:auto;display:block}
.editorial-photo {margin:24px 0}.editorial-photo img {max-height:75vh;object-fit:contain}
.editorial-photo figcaption,.design-edit figcaption {margin-top:8px;font-size:14px}
.editorial-details {margin-block:24px;border-top:1px solid var(--editor-line)}
.editorial-details summary {cursor:pointer;padding:16px 0;font-size:17px}.editorial-details blockquote {max-width:60ch;margin:20px auto 48px;font-size:18px;line-height:1.6}
.design-edit figure {margin:0}.design-edit img {aspect-ratio:4/3;object-fit:contain}
.case-pagination {display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--editor-line);padding:24px 0}.case-pagination a {color:inherit;font-size:clamp(18px,2.2vw,32px);text-decoration:none}
@media(max-width:700px){.portfolio-nav{column-gap:6px;padding-inline:16px;font-size:13px}.portfolio-nav nav{gap:10px}.portfolio-nav .gm-pm{display:none!important}.project-index,.design-edit,.gm-caps-grid{grid-template-columns:1fr}.gm-ab-h{display:block}.gm-ab-loc{font-size:14px}.project-index{gap:36px}.gm-press li{flex-wrap:wrap}.gm-press li span{min-width:55%}.case-pagination a{max-width:48%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

main .head {padding-top:clamp(42px,7vw,100px)!important}
main .head h1 {min-height:0!important;padding:0!important;margin:0 auto 24px!important;font-size:clamp(46px,7vw,110px)!important;line-height:1!important;letter-spacing:-.055em!important;text-align:center}
main .head .meta {margin-top:22px}
.portfolio-home .cover h1 {opacity:1;visibility:visible}
.portfolio-home .skip:not(:focus){position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}