/* Project imagery leads; the page scrolls normally through all six websites. */
.portfolio{padding:45px 5vw 80px;background:#eeeae1;color:#20372d;scroll-margin-top:30px}.portfolio-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;padding-bottom:52px;border-bottom:1px solid #21392f30;margin-bottom:48px}.portfolio-heading h2{font:400 clamp(56px,7vw,105px)/.95 'Hanken Grotesk';letter-spacing:-.065em;margin-top:27px}.portfolio-heading h2 em{font:400 1.03em/.96 'Bodoni Moda';letter-spacing:-.055em}.portfolio-intro{padding-bottom:7px}.portfolio-intro>p{font-size:22px;line-height:1.45;letter-spacing:-.025em}.portfolio-intro>span{display:block;font-size:10px;letter-spacing:.07em;margin-top:27px;color:#686d60}.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:65px 32px}.portfolio-project{min-width:0}.portfolio-visual{position:relative;display:block;overflow:hidden;background:#d7dbd1;padding:22px 22px 44px;border:1px solid #22382b13;text-decoration:none;transition:background .2s}.project-washing .portfolio-visual{background:#d6c6b0}.project-stoetic .portfolio-visual{background:#cdccc6}.project-mobile .portfolio-visual{background:#c7ccba}.project-social .portfolio-visual{background:#c2d4c9}.project-detailing .portfolio-visual{background:#c6c9cc}.portfolio-browser{height:27px;background:#f6f5f1;display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:#656961;font-size:8px;border-radius:5px 5px 0 0;gap:14px}.portfolio-browser>span:first-child{display:flex;gap:4px}.portfolio-browser i{width:4px;height:4px;border-radius:50%;background:#a8afa6}.portfolio-browser .ui-icon{width:11px;height:11px}.portfolio-screen{aspect-ratio:1.777;overflow:hidden;background:#e8e6e0;box-shadow:0 10px 18px #1b2b2420}.portfolio-screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .35s ease}.portfolio-visual:hover .portfolio-screen img{transform:scale(1.025)}.portfolio-visual:focus-visible{outline:3px solid #42644d;outline-offset:5px}.portfolio-visit{position:absolute;bottom:14px;right:23px;display:flex;align-items:center;gap:14px;font-size:10px}.portfolio-visit .ui-icon{height:13px;width:13px}.portfolio-meta{display:grid;grid-template-columns:25px 1fr auto;gap:11px;padding-top:23px;align-items:start}.portfolio-number{font-size:10px;color:#75806e;padding-top:2px}.portfolio-category{text-transform:uppercase;font-size:8px;letter-spacing:.13em;color:#6b7364;margin-bottom:10px}.portfolio-meta h3{font:500 clamp(23px,2.2vw,34px)/1.12 'Hanken Grotesk';letter-spacing:-.04em}.portfolio-meta h3 a{text-decoration:none}.portfolio-description{font-size:13px;line-height:1.5;color:#687161;margin-top:9px}.portfolio-status{font-size:8px;color:#6b7364;padding-top:2px;white-space:nowrap}.portfolio-footer{border-top:1px solid #21392f30;margin-top:65px;padding-top:25px;display:flex;justify-content:space-between;gap:25px;font-size:14px}.portfolio-footer a{display:flex;align-items:center;gap:20px;border-bottom:1px solid #7a8770;padding-bottom:7px;font-size:12px}
/* Large frosted layers are expensive in software-rendered Chrome. */
.store-fascia,.store-door,.garment-image>span,dialog::backdrop{backdrop-filter:none!important}.store-interior,.store-track,.store-door,.hero-object{will-change:auto}.store-fascia{background:#211e19f7}
@media(max-width:950px){.portfolio-grid{gap:45px 20px}.portfolio-meta{grid-template-columns:20px 1fr}.portfolio-status{grid-column:2;padding-top:0}.portfolio-intro>p{font-size:18px}.portfolio-visual{padding:15px 15px 38px}.portfolio-visit{right:16px;bottom:12px}}
@media(max-width:700px){.portfolio{padding:35px 22px 55px}.portfolio-heading{display:block;padding-bottom:30px;margin-bottom:30px}.portfolio-heading h2{font-size:62px;margin-top:20px}.portfolio-intro{margin-top:24px}.portfolio-intro>p{font-size:17px}.portfolio-intro>p br{display:none}.portfolio-intro>span{font-size:8px;margin-top:12px}.portfolio-grid{grid-template-columns:1fr;gap:38px}.portfolio-screen{aspect-ratio:1.777}.portfolio-meta{padding-top:18px}.portfolio-meta h3{font-size:28px}.portfolio-description{font-size:12px;margin-top:7px}.portfolio-footer{display:block;margin-top:40px;font-size:15px}.portfolio-footer a{margin-top:20px;display:inline-flex}.portfolio-browser{height:24px;font-size:7px}.portfolio-visit{font-size:9px}}
@media(prefers-reduced-motion:reduce){.portfolio-screen img{transition:none}.portfolio-visual:hover .portfolio-screen img{transform:none}}

/* Native sticky cards bring back the layered exhibition without a render loop. */
@media(prefers-reduced-motion:no-preference){
 .portfolio-grid{display:block;padding:12px 3vw 22vh;isolation:isolate}
 .portfolio-project{position:sticky;top:calc(20px + var(--card-order)*7px);z-index:calc(1 + var(--card-order));margin:0 auto 24vh;padding:18px 20px 24px;background:var(--card-paper,#dce1d5);border:1px solid #273b2920;border-radius:8px;box-shadow:0 -4px 16px #243a2912;transform:rotate(var(--card-angle));transform-origin:50% 90%;max-width:1100px}
 .portfolio-project:last-child{margin-bottom:0}
 .portfolio-project:nth-child(1){--card-order:0;--card-angle:-2deg;--card-paper:#d7dbd1}
 .portfolio-project:nth-child(2){--card-order:1;--card-angle:1.6deg;--card-paper:#d6c6b0}
 .portfolio-project:nth-child(3){--card-order:2;--card-angle:-1.2deg;--card-paper:#cdccc6}
 .portfolio-project:nth-child(4){--card-order:3;--card-angle:2deg;--card-paper:#c7ccba}
 .portfolio-project:nth-child(5){--card-order:4;--card-angle:-1.5deg;--card-paper:#c2d4c9}
 .portfolio-project:nth-child(6){--card-order:5;--card-angle:.7deg;--card-paper:#c6c9cc}
 .portfolio-visual{padding:0 0 30px;border:0;background:transparent!important;overflow:visible}
 .portfolio-browser{height:25px}
 .portfolio-screen{height:clamp(230px,51svh,650px);aspect-ratio:auto;box-shadow:none}
 .portfolio-screen img{object-fit:contain;background:#f3f1ea}
 .portfolio-visit{bottom:4px;right:4px}
 .portfolio-meta{padding-top:14px;border-top:1px solid #22382b26;grid-template-columns:25px 1fr auto}
 .portfolio-category{margin-bottom:6px}
 .portfolio-meta h3{font-size:clamp(24px,2.7vw,38px)}
 .portfolio-status{grid-column:auto}
 .portfolio-description{margin-top:5px}
 .portfolio-footer{margin-top:0}
 @media(max-width:700px){
  .portfolio-grid{padding:8px 0 12vh}
  .portfolio-project{padding:10px 11px 17px;margin-bottom:22vh;top:calc(15px + var(--card-order)*5px);border-radius:5px}
  .portfolio-screen{height:32svh;min-height:210px}
  .portfolio-meta{grid-template-columns:17px 1fr;gap:8px}
  .portfolio-status{grid-column:2}
  .portfolio-meta h3{font-size:26px}
  .portfolio-description{font-size:12px}
 }
}
@media(prefers-reduced-motion:no-preference){.portfolio-screen img{object-fit:cover;object-position:top}@media(max-width:700px){.portfolio-screen{height:auto;min-height:0;aspect-ratio:1.777}}}
/* Rasterize only the exposed cards; the paper edges preserve the fan underneath. */
@media(prefers-reduced-motion:no-preference){
 .portfolio-project{box-shadow:none;contain:layout paint}
 .portfolio-project.is-near{will-change:transform}
 .portfolio-project.is-covered .portfolio-screen img{visibility:hidden}
 .portfolio-screen img{transition:none}
 .portfolio-visual:hover .portfolio-screen img{transform:none}
}