/* Case studies: editorial type, generous paper, media-led rhythm. */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.85s;animation-timing-function:cubic-bezier(.76,0,.24,1)}
::view-transition-old(root){animation:project-out .4s both}
::view-transition-new(root){animation:project-in .7s both}
@keyframes project-out{to{opacity:0;transform:translateY(-24px)}}
@keyframes project-in{from{opacity:0;transform:translateY(36px)}}
.project-page{--project-gap:24px;--project-inset:50px}
.project-page .site-header{position:relative;margin-inline:var(--project-inset);background:white}
.project-story{margin:0 var(--project-inset)}
.project-intro{padding-top:clamp(48px,7vw,112px)}
.project-topline,.project-heading,.project-meta,.project-navigation{display:flex;justify-content:space-between;gap:24px}
.project-topline{align-items:center;margin-bottom:32px}
.project-heading{align-items:baseline}
.project-title{font-size:clamp(60px,8.5vw,160px);font-weight:500;line-height:1.02;max-width:86%;text-wrap:balance}
.project-number{font-family:GeistMono,monospace;font-size:clamp(20px,3vw,52px);white-space:nowrap}
.project-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--project-gap);margin-top:clamp(70px,10vw,160px)}
.project-meta{align-self:end;align-items:end;flex-wrap:wrap;padding-bottom:6px}
.project-summary{font-size:clamp(21px,2.05vw,34px);line-height:1.25;letter-spacing:-.04em;max-width:34ch;margin-bottom:40px}
.project-cover{position:relative;overflow:hidden;aspect-ratio:4/3;background:#f1f1ee}
.project-cover>img{width:100%;height:100%;object-fit:cover}
.project-cover.dp-cover{background:#101010;display:grid;place-items:center}
.dp-cover>img{width:42%;height:62%;object-fit:contain;filter:invert(1)}
.project-concept{display:grid;grid-template-columns:1fr 1fr;gap:var(--project-gap);padding:clamp(80px,10vw,160px) 0}
.project-copy h2{font-size:clamp(30px,3.3vw,52px);font-weight:500;line-height:1.08;margin-bottom:28px}
.project-copy p{font-size:clamp(18px,1.55vw,25px);line-height:1.5;max-width:44ch}
.project-copy p+p{margin-top:24px}
.project-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--project-gap)}
.project-media{position:relative;overflow:hidden;min-width:0;background:#f2f2ef;margin:0;--media-mask:inset(100% 0% 0% 0%)}
.project-media[data-project-media="full"]{grid-column:1/-1}
.project-media[data-project-media="left"]{--media-mask:inset(100% 100% 0% 0%)}
.project-media[data-project-media="right"]{--media-mask:inset(100% 0% 0% 100%)}
.project-media>img{display:block;width:100%;height:auto}
.project-media .media-surface{height:100%;min-height:clamp(340px,45vw,760px);padding:clamp(24px,4vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.project-media[data-project-media="full"] .media-surface{min-height:clamp(420px,58vw,940px)}
.media-surface.ink{background:#101010;color:#fff}
.media-surface .specimen-letter{font-family:Gotham,sans-serif;font-weight:900;font-size:clamp(150px,25vw,460px);line-height:.85;letter-spacing:-.07em;align-self:center}
.media-surface .specimen-logo{width:48%;height:clamp(200px,26vw,430px);align-self:center;object-fit:contain}
.media-surface.ink .specimen-logo{filter:invert(1)}
.media-surface .specimen-title{font-family:Gotham,sans-serif;font-weight:600;font-size:clamp(52px,9.5vw,180px);letter-spacing:-.06em;line-height:.95}
.specimen-type{font-family:GeistMono,monospace;font-size:clamp(36px,5vw,90px);line-height:1.1;letter-spacing:-.06em}
.specimen-measure{font-family:Gotham,sans-serif;font-weight:500;font-size:clamp(72px,15vw,250px);line-height:1;letter-spacing:-.08em;align-self:center}
.specimen-measure small{font-family:GeistMono,monospace;font-size:.2em;letter-spacing:-.04em}
.media-caption{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.project-endnote{padding:40px 0 100px;font-size:12px}
.project-navigation{border-top:1px solid var(--ink);padding:28px 0 70px;align-items:center}
.all-projects{display:inline-flex;align-items:center;gap:14px;font-family:GeistMono,monospace;font-size:14px;min-height:44px}
/* SVG geometry is repainted at each frame rather than scaling four composited
   layers. Crisp edges snap the axis-aligned rectangles to device pixels.
   Synchronous motion keeps the overlapping silhouette perfectly square. */
.all-projects .grid-icon{display:block;flex:none;width:16px;height:16px;overflow:visible;shape-rendering:crispEdges}
.all-projects .grid-icon rect{fill:currentColor;x:4px;y:4px;width:8px;height:8px;transition:x .6s cubic-bezier(.22,1,.36,1),y .6s cubic-bezier(.22,1,.36,1),width .6s cubic-bezier(.22,1,.36,1),height .6s cubic-bezier(.22,1,.36,1)}
.all-projects .grid-icon rect:nth-child(1){--tile-x:0px;--tile-y:0px}
.all-projects .grid-icon rect:nth-child(2){--tile-x:10px;--tile-y:0px}
.all-projects .grid-icon rect:nth-child(3){--tile-x:0px;--tile-y:10px}
.all-projects .grid-icon rect:nth-child(4){--tile-x:10px;--tile-y:10px}
.all-projects:focus-visible .grid-icon rect{x:var(--tile-x);y:var(--tile-y);width:6px;height:6px}
@media(hover:hover) and (pointer:fine){.all-projects:hover .grid-icon rect{x:var(--tile-x);y:var(--tile-y);width:6px;height:6px}}
.project-next{display:block;padding-bottom:80px}
.project-next .next-label{display:flex;justify-content:space-between;margin-bottom:28px}
.project-next-heading{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:40px}
.project-next h2{font-size:clamp(42px,7.8vw,140px);font-weight:500;max-width:88%;text-wrap:balance}
.project-next .next-arrow{font-size:clamp(32px,5vw,80px);transition:transform .6s var(--ease)}
.project-next:hover .next-arrow{transform:translate(8px,-8px)}
.project-next-preview{width:calc(50% - var(--project-gap)/2);margin-left:auto;overflow:hidden;background:#f2f2ef;aspect-ratio:4/3}
.project-next-preview>img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.project-next:hover .project-next-preview>img{transform:scale(1.035)}
.project-next-preview.dp-cover{background:#101010;display:grid;place-items:center}
.project-next-preview.dp-cover>img{width:42%;height:62%;object-fit:contain;filter:invert(1)}
.project-page .site-footer{margin-inline:var(--project-inset)}
.project-word-mask{display:inline-block;overflow:clip;vertical-align:top;padding-bottom:.09em;margin-bottom:-.09em}
.project-word{display:inline-block}
html.project-motion [data-project-text]:not(.project-revealed){visibility:hidden}
html.project-motion [data-project-media]:not(.project-revealed){clip-path:var(--media-mask,inset(100% 0% 0% 0%))}
.project-page .project-title,.project-page .project-next h2{overflow-wrap:break-word}
.page-curtain{display:grid;place-items:center;background:#101010;color:white;transform:translateY(101%)}
.page-curtain::after{content:'DP / PROGETTI';font-family:GeistMono,monospace;font-size:12px;letter-spacing:.02em}
.route-arriving .page-curtain{transform:translateY(0)}
.native-route .page-curtain{display:none}
.native-route .project-title{visibility:visible!important}
.native-route .project-cover{clip-path:none!important}
@media(max-width:1000px){.project-page{--project-inset:32px}.project-title{font-size:clamp(54px,9vw,100px)}}
@media(max-width:700px){
 .project-page{--project-gap:16px;--project-inset:22px}
 .project-intro{padding-top:48px}.project-topline{margin-bottom:24px}
 .project-title{font-size:clamp(42px,10.8vw,75px);max-width:85%}.project-number{font-size:18px}
 .project-intro-grid{grid-template-columns:1fr;margin-top:48px;gap:28px}
 .project-meta{order:2}.project-summary{font-size:23px;margin-bottom:28px;max-width:none}
 .project-concept{grid-template-columns:1fr;gap:24px;padding:70px 0}
 .project-copy p{max-width:none}.project-copy h2{font-size:34px}
 .project-gallery{grid-template-columns:1fr}.project-media{grid-column:1!important;--media-mask:inset(100% 0% 0% 0%)!important}
 .project-media .media-surface{min-height:460px}.project-media[data-project-media="full"] .media-surface{min-height:480px}
 .media-surface .specimen-letter{font-size:240px}.media-surface .specimen-logo{height:260px;width:60%}
 .media-surface .specimen-title{font-size:clamp(52px,11vw,76px)}.specimen-type{font-size:52px}.specimen-measure{font-size:145px}
 .project-endnote{padding-bottom:60px}.project-navigation{padding-bottom:50px}.project-next h2{font-size:clamp(38px,9vw,66px)}
 .project-next-heading{margin-bottom:30px}.project-next-preview{width:100%}.project-next{padding-bottom:55px}
}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 html.project-motion [data-project-text]{visibility:visible!important}
 html.project-motion [data-project-media]{clip-path:none!important}
 .project-next-preview>img,.project-next .next-arrow{transition:none}
 .all-projects .grid-icon rect{transition:none}
 .route-arriving .page-curtain{display:none}
}

/* DP: original process drawings, then the identity in motion. */
.project-dp .project-summary{max-width:35ch}
.case-chapter{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:var(--project-gap);padding:clamp(64px,8vw,128px) 0 36px}
.case-chapter>.mono{align-self:start;padding-top:6px}
.case-chapter .case-specs{font-size:12px;line-height:1.8;letter-spacing:0}
.case-sketch{display:block;background:#f5f5f3;padding:0;height:calc(clamp(400px,55vw,820px) + clamp(56px,10vw,160px) + 49px)}
.case-sketch>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.case-sketch>figcaption{position:absolute;left:clamp(28px,5vw,80px);bottom:clamp(28px,5vw,80px);margin:0;font-size:12px;z-index:1}
.case-phase{background:#f6f6f4;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,3vw,48px)}
.case-phase-stage{height:clamp(300px,34vw,540px);display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center}
.case-phase-stage>img{min-width:0;min-height:0;width:75%;height:82%;object-fit:contain;mix-blend-mode:multiply}
.case-matrix{font-family:Gotham,sans-serif;font-weight:900;font-size:clamp(210px,29vw,480px);line-height:1}
.case-phase>figcaption{margin-top:24px;font-size:12px}
.case-negative{background:#101010;color:#fff}
/* The filled white mark needs a smaller optical footprint than the outline. */
.case-negative .case-phase-stage>img{width:66%;height:72.16%;mix-blend-mode:normal}
.case-proportions{background:#fff}
.case-proportions>img{width:100%;height:auto;object-fit:contain}
.case-proportions>figcaption{padding:0 clamp(22px,3vw,48px) clamp(22px,3vw,48px);font-size:12px}
.case-reveal{background:#101010;color:white;padding:clamp(28px,5vw,80px)}
.case-reveal>img{height:clamp(340px,48vw,760px);object-fit:contain;width:100%;padding:7% 15%}
.case-reveal>figcaption{margin-top:32px;font-size:12px}
.case-motion{position:relative;width:100%;height:clamp(420px,60vw,850px);overflow:hidden}
.case-motion>img,.case-motion>svg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.case-motion>svg{visibility:hidden}
.case-motion.is-motion-ready>svg{visibility:visible}
.case-motion.is-motion-ready>img{visibility:hidden}
.case-phase .case-motion{height:clamp(300px,34vw,540px)}
.case-phase .case-motion>img,.case-phase .case-motion>svg{inset:9% 12.5%;width:75%;height:82%;mix-blend-mode:multiply}
.case-lockup{background:#fff}
.case-lockup .case-motion{height:auto;aspect-ratio:1080/750}
.case-loop{background:#f6f6f4}
.case-loop .case-motion>img,.case-loop .case-motion>svg{padding:clamp(40px,6vw,100px)}
.case-pattern{background:white}
.case-pattern .case-motion{height:clamp(480px,62vw,960px)}
.case-pattern .case-motion>svg{object-fit:cover}
.case-closing{grid-column:1/-1;padding:clamp(90px,12vw,180px) 0 32px}
.case-closing p{font-family:GeistMono,monospace;font-size:clamp(16px,2vw,26px);margin-bottom:20px}
.case-closing h2{font-size:clamp(40px,7vw,112px);font-weight:500;line-height:1.05;letter-spacing:-.055em}
@media(max-width:700px){
 .project-dp .project-topline{align-items:start;flex-wrap:wrap;gap:12px}
 .project-dp .project-summary{max-width:none}
 .case-chapter{grid-template-columns:1fr;gap:24px;padding:60px 0 16px}
 .case-chapter .project-copy h2{font-size:34px}
 .case-sketch{padding:0;height:clamp(480px,125vw,680px)}.case-sketch>figcaption{left:20px;bottom:20px}
 .case-phase-stage,.case-phase .case-motion{height:340px}.case-matrix{font-size:280px}
 .case-reveal>img{height:360px;padding:12%}
 .case-motion{height:420px}.case-pattern .case-motion{height:520px}
 .case-reveal .media-caption{flex-direction:column;gap:8px}
}
@media(prefers-reduced-motion:reduce){.case-motion.is-motion-ready>svg{visibility:hidden}.case-motion.is-motion-ready>img{visibility:visible}}

/* Mobile uses one continuous right-to-left curtain, including menu anchor routes. */
@media(max-width:800px){
 @view-transition{navigation:none}
 .page-curtain{transform:translateX(101%);background:#000}
 .page-curtain::after{content:none}
 .route-arriving .page-curtain{transform:translateX(0)}
 .project-dp .project-topline{align-items:center;flex-wrap:nowrap;gap:12px}
 .project-dp .project-topline>.mono{font-size:clamp(8px,2.3vw,11px);white-space:nowrap;line-height:1.2}
 .project-dp .project-topline .all-projects{font-size:clamp(10px,2.8vw,13px);gap:8px;white-space:nowrap}
 .case-chapter[data-case-chapter="03"]{grid-template-columns:1fr}
 .case-estrusione-volume{display:none}
 .case-estrusione-contorni{grid-column:1/-1!important}
}

/* Mobile crops only the SVG's blank artboard; the modular grid stays intact. */
.case-proportions>picture{display:block}
.case-proportions>picture>img{display:block;width:100%;height:auto}
@media(max-width:800px){.case-proportions>figcaption{padding:16px 0 22px}}

/* Enlarge the complete signature within its existing mobile stage. */
@media(max-width:800px){
 .case-lockup .case-motion>svg,.case-lockup .case-motion>img{inset:-15%;width:130%;height:130%;max-width:none}
}

/* A shared centered frame, including displays wider than the 1900 px limit. */
body.project-page>main.project-story,body.project-page>.site-header,body.project-page>.site-footer{width:calc(100% - 2 * var(--project-inset));max-width:1900px;margin-inline:auto}