@layer legacy {
/* Katania: native artwork, a quieter reading rhythm, and touch-first navigation. */
:root{--yellow:#fff000;--gutter:22px;--card-radius:12px;--motion-content:240ms;--motion-surface:320ms}
html{scrollbar-gutter:auto}
p{font-weight:400}
h1,h2,h3{text-wrap:pretty}
.page-intro,.work-hero,.cta{background-image:none}
.header{height:72px}
.menu-is-open .header,.home.menu-is-open .header{right:var(--lock-gap,0px)}
.logo{display:flex;align-items:center;min-height:44px}
.button,.textlink{font-weight:500}
.textlink{gap:20px}
:focus-visible{outline:3px solid #887f00;outline-offset:4px}
.header .mobile-home{display:block}
.footer-main a{display:flex;align-items:center;min-height:44px}
.footer-main>div{gap:2px}
.footer-base a{display:inline-flex;align-items:center;min-height:44px}
.inner .page-intro,.inner .work-hero{padding-block:44px 40px}
.inner .page-intro p,.inner .work-hero p{color:#494945}
.inner .page-intro h1,.inner .work-hero h1{font-size:clamp(36px,10.5vw,44px);line-height:1.07}
.inner .section-heading h2,.home .projects-section h2,.home .home-formats h2{font-size:34px;line-height:1.12}
.page-jumps{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--gutter) 32px}
.page-jumps a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid #dcdcd5;border-radius:24px;font-size:14px;font-weight:500}
.page-jumps a:hover{background:var(--yellow);border-color:var(--yellow)}

/* Keep the opening photograph full frame; let the type sit beneath the face. */
.home .home-hero{align-items:end;justify-content:start;height:100svh;min-height:640px;max-height:1100px;padding:120px var(--gutter) 64px}
.home .hero-content{text-align:left;max-width:1200px}
.home .hero-content h1{text-transform:none;font-weight:400;font-size:clamp(43px,12.4vw,64px);line-height:1.02;letter-spacing:-.035em;margin:0;max-width:13ch;text-wrap:initial}
.home .hero-bottom{align-items:start;text-align:left;gap:24px;margin-top:24px}
.home .hero-bottom p{font-size:17px;font-weight:400;color:#fff}
.home .hero-bottom .button{min-height:52px;font-size:15px}
.home .hero-photos:after{background:linear-gradient(180deg,#0005,transparent 24%,#0002 42%,#000b 72%,#000d)}
.home .scroll-cue{display:none}
.home .visual-intro{padding-block:56px}
.home .community-copy{gap:22px}
.home .community-copy h2{font-size:36px;line-height:1.1}
.home .home-formats{padding-block:48px 52px}
.home .home-formats .section-heading{gap:12px;margin-bottom:24px}
.home .home-formats .section-heading .textlink{justify-self:start;align-self:start}

/* One format at a time. No wide frame around a vertical social creative. */
.showcase-tabs{background:#ffffff80;width:100%;max-width:380px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px}
.showcase-tabs button{font-size:15px;min-height:46px;padding:10px 12px;font-weight:500}
.format-showcase-panel{display:grid;gap:28px;margin-top:28px}
.showcase-art{height:340px;display:flex;align-items:center;justify-content:center;min-width:0}
.showcase-art img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:10px}
.showcase-copy{max-width:42ch;min-height:218px}
.showcase-copy h3{font-size:29px;font-weight:500;line-height:1.12;letter-spacing:-.025em;max-width:18ch}
.showcase-copy p{font-size:16px;line-height:1.5;margin-top:16px;max-width:38ch}
.showcase-copy .textlink{margin-top:16px}
.home .home-project-spotlight{margin-block:48px;border-radius:12px}
.home .spotlight-copy,.home .home-campaign-card .off-copy{padding:26px 22px}
.home .home-campaign-card .off-campaign>img{height:auto}
.home .partner-section .section-heading{max-width:none}
.home .partner-section h2{font-size:36px}

/* Mobile projects read as a short index, not another carousel to discover. */
.home .project-rail,.page-work .project-rail{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-auto-columns:auto;gap:0;overflow:visible;scroll-snap-type:none}
.home .project-tile,.page-work .project-tile{display:grid;grid-template-columns:100px minmax(0,1fr);gap:20px;align-items:center;height:auto;padding:24px 0;border:0;border-top:1px solid #deded8;border-radius:0;background:transparent}
.home .project-tile:last-child,.page-work .project-tile:last-child{border-bottom:1px solid #deded8}
.home .project-tile>img,.home .project-tile>.artwork,.home .project-tile>div.future-cover.deck-cover,.page-work .project-tile>img,.page-work .project-tile>.artwork,.page-work .project-tile>.future-cover.deck-cover{width:100%;height:auto;aspect-ratio:auto;background:transparent;border-radius:6px;overflow:hidden;position:static}
.home .project-tile .artwork img,.home .project-tile>.future-cover.deck-cover>img,.page-work .project-tile>.future-cover.deck-cover>img{position:static;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.home .project-tile>div:not(.artwork):not(.future-cover),.page-work .project-tile>div:not(.artwork):not(.future-cover){padding:0;min-height:0;gap:8px}
.home .project-tile h3,.page-work .project-tile h3{font-size:23px;font-weight:500;line-height:1.15;margin:0}
.home .project-tile p,.page-work .project-tile p{font-size:15px;line-height:1.45}
.home .project-tile .home-card-link,.page-work .project-tile .home-card-link{font-size:14px;min-height:44px;padding-top:4px;gap:10px}

/* Native proportions for video covers and featured project artwork. */
.inner .editorial-card .image-link,.inner .editorial-card img,.inner .video-library-image,.inner .video-library-image img{aspect-ratio:16/9}
.inner .editorial-card h3,.inner .video-library-grid h3{font-size:23px;font-weight:500}
.inner .episode-grid,.inner .video-library-grid,.page-work .example-list{scroll-padding:0;grid-auto-columns:100%;gap:16px}
.collection-controls{align-items:center}
.collection-position{margin-right:auto;font-size:14px;color:#62625e;font-variant-numeric:tabular-nums}
.collection-controls button{width:46px;height:46px;flex:none}
.collection-controls button:first-of-type svg{transform:rotate(180deg)}
.collection-controls button:disabled{opacity:.35}
.page-projects .brand-story-card>.brand-story-media,.page-partners .feature.case.brand-story-card>.brand-story-media{aspect-ratio:auto;align-self:center;background:transparent}
.page-projects .brand-story-card>.brand-story-media>img,.page-projects #podcast.brand-story-card>.brand-story-media>img,.page-projects .brand-story-card .agro-art>img,.page-partners .feature.case.brand-story-card>.brand-story-media>img{position:static;height:auto;max-height:none;width:100%;aspect-ratio:auto;object-fit:contain}
.page-projects #futuro-direzione-sud.brand-story-card .future-cover.deck-cover,.page-partners .feature.case.brand-story-card .future-cover.deck-cover{position:static;height:auto;aspect-ratio:16/9}
.brand-story-card>.brand-story-media>.deck-cover>img{position:static;height:auto;aspect-ratio:16/9;object-fit:contain}
.page-projects #agrodolce.brand-story-card>.brand-story-media{width:100%;max-width:360px;justify-self:center}
.page-projects .brand-story-card,.page-partners .feature.case.brand-story-card,.page-projects :is(#podcast,#agrodolce,#futuro-direzione-sud).brand-story-card{border-radius:12px}

/* A compact collaboration catalogue. The gallery holds the full image and story. */
.page-partners .collab-grid{gap:16px}
.page-partners .collab-card,.page-partners .collab-card:not(:first-child){display:grid;grid-template-columns:42% minmax(0,1fr);gap:0;border-radius:12px;align-items:center}
.page-partners .collab-card .collab-visual{height:auto;aspect-ratio:auto;max-height:none;background:transparent;align-self:center;width:100%;padding:0}
.page-partners .collab-card .collab-visual img,.page-partners .collab-card:first-child .collab-visual img,.page-partners .collab-featured .collab-visual img{position:static;display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}
.page-partners .collab-card .collab-copy{padding:18px 16px!important;min-width:0;align-self:stretch;justify-content:center}
.page-partners .collab-card .collab-copy h3{font-size:22px;font-weight:500;line-height:1.14;margin-bottom:14px}
.page-partners .collab-card .collab-brand{font-size:12px;line-height:1.4;margin-bottom:12px}
.page-partners .collab-card .collab-copy>p:last-of-type:not(.collab-brand){display:none}
.page-partners .collab-card .collab-open{font-size:13px;min-height:44px;gap:8px;margin-top:0;padding-block:8px;align-self:stretch}
.page-partners .collab-card .expand-image{display:none}
.collab-filters{width:100%;scrollbar-width:none}
.collab-filters button{min-height:44px;flex:1;padding-inline:12px}
.case-toolbar{position:sticky;top:0;z-index:2;background:#111;color:#fff}
.case-toolbar .case-position{color:#ddd}
.case-toolbar .case-controls button{color:#111;background:#fff}
.case-toolbar .case-controls .case-close{color:#fff;background:#333}
.case-caption .textlink{max-width:100%}

/* The format page uses the same image-first reading order on narrow screens. */
@media(max-width:699px){
 .page-work .lab-panel{padding:24px 20px;gap:24px}
 .page-work .lab-panel .artwork{order:0;background:transparent}
 .page-work .lab-copy{order:1}
 .page-work #panel-video .artwork{background:transparent}
 .page-work #panel-video .artwork img{height:320px;margin:auto;border-radius:8px}
 .page-work .lab-copy h3{font-size:28px;font-weight:500}
 .page-work .example-row>div{padding-left:20px}
 .inner .section,.inner .manifesto,.inner .marks-section{padding-block:48px}
 .home .projects-section{padding-block:48px}
 .home .home-campaign-card{margin-bottom:48px}
 .footer-main{gap:24px}
 .footer-main>div{gap:0}
 .header nav{padding-top:12px}
 .header nav>a:not(.button){font-size:28px;font-weight:400;padding-block:13px;min-height:54px}
 .menu-foot a{min-height:44px;display:flex;align-items:center}
 .menu-foot{margin-top:16px;flex-wrap:wrap;gap:8px 24px}
}
@media(min-width:700px){
 :root{--gutter:40px}
 .inner .page-intro,.inner .work-hero{padding-block:64px 56px}
 .inner .page-intro h1,.inner .work-hero h1{font-size:60px}
 .inner .section-heading h2,.home .projects-section h2,.home .home-formats h2{font-size:48px}
 .page-jumps{padding-bottom:44px}
 .home .home-hero{padding-bottom:64px}
 .home .hero-content h1{font-size:76px;max-width:16ch}
 .home .hero-bottom{flex-direction:row;justify-content:space-between;align-items:end}
 .home .hero-bottom p{font-size:20px}
 .home .visual-intro,.home .home-formats{padding-block:72px}
 .home .community-copy h2{font-size:48px}
 .home .home-formats .section-heading .textlink{justify-self:end;align-self:end}
 .showcase-tabs{max-width:360px}
 .format-showcase-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:8%;margin-top:40px}
 .showcase-art{height:440px}
 .showcase-copy{min-height:0}
 .showcase-copy h3{font-size:40px;font-weight:400}
 .showcase-copy p{font-size:18px;line-height:1.55;margin-top:22px}
 .showcase-copy .textlink{margin-top:24px}
 .home .project-tile,.page-work .project-tile{grid-template-columns:180px minmax(0,1fr);padding:28px 0;gap:36px}
 .home .project-tile h3,.page-work .project-tile h3{font-size:30px}
 .home .project-tile p,.page-work .project-tile p{font-size:17px}
 .home .project-tile>div:not(.artwork):not(.future-cover),.page-work .project-tile>div:not(.artwork):not(.future-cover){max-width:48ch}
 .inner .episode-grid,.inner .video-library-grid{grid-auto-columns:calc((100% - 24px)/2);gap:24px}
 .page-work .example-list{grid-auto-columns:64%}
 .page-partners .collab-card .collab-copy{padding:24px!important}
 .page-partners .collab-card .collab-copy h3{font-size:26px}
 .page-partners .collab-card .collab-brand{font-size:13px}
 .page-partners .collab-card .collab-open{font-size:14px}
 .page-partners .collab-grid{grid-template-columns:1fr;gap:24px}
 .page-partners .collab-filters{width:max-content;min-width:400px}
 .page-partners .collab-card .collab-copy>p:last-of-type:not(.collab-brand){display:block;font-size:16px}
 .page-partners .collab-card,.page-partners .collab-card:not(:first-child){grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr)}
 .home .partner-section .section-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;align-items:start}
 .home .partner-section h2{font-size:48px}
}
@media(min-width:1050px){
 :root{--gutter:clamp(48px,6vw,112px)}
 .header .mobile-home{display:none!important}
 .home .hero-content h1{font-size:clamp(86px,8vw,118px);max-width:16ch}
 .home .hero-photos:after{background:linear-gradient(180deg,#0005,transparent 30%,#000b)}
 .home .project-rail,.page-work .project-rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start}
 .home .project-tile,.page-work .project-tile{display:flex;gap:0;padding:0;border:1px solid #deded8;border-radius:12px;overflow:hidden}
 .home .project-tile:last-child,.page-work .project-tile:last-child{border:1px solid #deded8}
 .home .project-tile>img,.page-work .project-tile>img,.home .project-tile>.artwork,.page-work .project-tile>.artwork,.home .project-tile>div.future-cover.deck-cover,.page-work .project-tile>.future-cover.deck-cover{border-radius:0}
 .home .project-tile>div:not(.artwork):not(.future-cover),.page-work .project-tile>div:not(.artwork):not(.future-cover){padding:24px;gap:12px}
 .home .project-tile h3,.page-work .project-tile h3{font-size:26px}
 .home .project-tile p,.page-work .project-tile p{font-size:16px}
 .page-partners .collab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .page-partners .collab-card,.page-partners .collab-card:not(:first-child){grid-template-columns:42% minmax(0,1fr)}
 .page-partners .collab-card .collab-copy{padding:24px 20px!important}
 .page-partners .collab-card .collab-copy h3{font-size:25px}
 .page-partners .collab-card .collab-copy>p:last-of-type:not(.collab-brand){font-size:15px;line-height:1.5}
 .page-projects #agrodolce.brand-story-card{grid-template-columns:1.3fr .7fr}
 .inner .episode-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row}
}
@media(hover:hover){
 .showcase-tabs button:hover:not([aria-selected=true]){background:#fff}
 .project-tile:hover .home-card-link svg{transform:translateX(3px)}
 .collab-visual:hover img{transform:none}
}
@media(prefers-reduced-motion:reduce){.project-tile:hover .home-card-link svg{transform:none}}

}
