/* Portfolio placeholders: shared desktop and mobile composition. */
.coming-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 30px}
.coming-card{min-width:0}
.coming-art{position:relative;aspect-ratio:16/10;background:var(--paper);border:10px solid #fff9ed;box-shadow:5px 7px 0 #b3813222;display:grid;place-items:center;overflow:hidden}
.coming-art img{position:absolute;width:100%;height:100%;object-fit:cover;inset:0}
.coming-label{position:relative;background:var(--gold);color:#fff9ed;font:italic 400 clamp(30px,3.4vw,52px)/1.15 var(--serif);padding:14px 28px;transform:rotate(-8deg);box-shadow:4px 6px 0 #2d251d22;white-space:nowrap}
.coming-caption{padding:19px 4px 0}
.coming-caption h3{font:400 29px/1.2 var(--serif);letter-spacing:-.5px}
.coming-caption p{font-size:9px;letter-spacing:1.5px;color:var(--muted);margin-top:7px}
@media(max-width:760px){.coming-grid{grid-template-columns:1fr;gap:30px}.coming-art{border-width:8px;aspect-ratio:16/10}.coming-label{font-size:38px;padding:12px 24px}.coming-caption{padding-top:17px}.coming-caption h3{font-size:26px}}

/* Approved portfolio: one horizontally scrolling row and shared collage. */
.works .portfolio-grid{display:flex;flex-wrap:nowrap;gap:25px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:3px 2px 20px;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
.works .portfolio-project{flex:0 0 clamp(280px,29vw,390px);scroll-snap-align:start}
.portfolio-scroll-hint{font-size:11px;color:var(--muted);margin-bottom:15px}
@media(max-width:760px){.works .portfolio-project{flex-basis:88%}.works .portfolio-grid{gap:16px}}

/* Rounded BeAuthority logo in the opening gallery card only. */
.portfolio-project[data-project="beauthority-logo"] .project-image img{border-radius:12%}

#lavori .project-image img,#dialog-image{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* Logo ribbon sized to the works heading banner. */
.works>.section-head{margin-bottom:22px}
.logo-strip{height:var(--works-banner-height,168px);width:100%;overflow:hidden;background:#faf6edeb;border-left:4px solid var(--gold);margin-bottom:48px}
.logo-track{display:flex;width:max-content;height:100%;animation:logo-loop 42s linear infinite;will-change:transform}
.logo-set{display:flex;align-items:center;height:100%;flex-shrink:0;gap:24px;padding:12px 12px 12px 24px}
.logo-set img{display:block;flex:0 0 auto;width:auto;height:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.logo-strip:hover .logo-track,.logo-strip:focus .logo-track{animation-play-state:paused}
@keyframes logo-loop{to{transform:translateX(-50%)}}
@media(max-width:760px){.logo-set{gap:16px;padding-inline:16px}.logo-strip{margin-bottom:32px}}
@media(prefers-reduced-motion:reduce){.logo-track{animation:none}.logo-strip{overflow-x:auto}.logo-set[aria-hidden="true"]{display:none}}

/* Soft corners across banners, cards and image frames. */
.section-head,.logo-strip,.project-image,.project-caption,dialog,.portrait-wrap,.about-banner,.plan,.button,.nav-cta{border-radius:16px}
.project-image,.logo-strip{overflow:hidden}
.about-banner{overflow:visible}
.about-banner img{border-radius:16px}
.logo-set img,#dialog-image,.portrait-wrap img{border-radius:12px}
.portfolio-project[data-project="beauthority-logo"] .project-image img{border-radius:12%}

.hero .portrait-note{border-radius:0}

/* Labeled work carousels: logos, followed by business card fronts and backs. */
.carousel-label{display:table;position:relative;z-index:1;margin:28px 0 18px;padding:8px 20px;background:var(--gold);color:#fff9ed;font:italic 400 clamp(22px,2.2vw,32px)/1.2 var(--serif);box-shadow:3px 4px 0 #2d251d12}
.works .logo-strip{margin-bottom:34px}
.business-strip{overflow:hidden;width:100%;background:#faf6edeb;border-left:4px solid var(--gold);border-radius:16px;padding:22px 0 16px}
.business-track{display:flex;width:max-content;animation:logo-loop 100s linear infinite;will-change:transform}
.business-set{display:flex;gap:26px;flex-shrink:0;padding:0 13px}
.business-card{display:block;flex:0 0 auto;width:300px;padding:0;border:0;background:none;text-align:left;cursor:zoom-in}
.business-card img{width:100%;height:auto;aspect-ratio:242/157;object-fit:contain;border-radius:12px;box-shadow:0 4px 9px #2d251d15;-webkit-touch-callout:none;user-select:none}
.business-card>span{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 2px 0;font-size:12px;font-weight:bold;color:var(--ink)}
.business-card small{font-size:10px;font-weight:400;color:var(--muted)}
.business-strip:hover .business-track,.business-strip:focus-within .business-track{animation-play-state:paused}
@media(max-width:760px){.carousel-label{margin-top:23px;font-size:23px;padding:8px 16px}.business-card{width:250px}.business-set{gap:18px;padding-inline:9px}.business-strip{padding-top:18px}.works .logo-strip{margin-bottom:28px}}
@media(prefers-reduced-motion:reduce){.business-track{animation:none}.business-strip{overflow-x:auto}.business-set[aria-hidden="true"]{display:none}}

/* Category label and separate description, shared by portfolio sections. */

.carousel-heading{display:flex;align-items:stretch;gap:0;flex-wrap:nowrap;width:100%;margin:28px 0 18px;background:var(--ink);color:var(--paper);border-radius:0 16px 16px 0;overflow:visible}
.carousel-heading .carousel-label{display:flex;align-items:center;margin:0;flex:0 0 auto;padding:12px 22px;box-shadow:3px 5px 0 #0002;transform:translateY(-7px) rotate(-3deg);transform-origin:50% 50%}
.carousel-description{display:flex;align-items:center;justify-content:flex-end;text-align:right;flex:1;min-width:0;padding:12px 24px;font-size:16px;line-height:1.5;color:var(--paper)}
@media(max-width:760px){.carousel-heading{margin-top:23px}.carousel-heading .carousel-label{font-size:21px;padding:12px 14px}.carousel-description{font-size:13px;padding:12px 14px}}

/* Description emerges from behind the category label on first appearance. */
.carousel-description{overflow:hidden}
.carousel-description>span{display:block;flex:0 0 auto;max-width:100%}
@media(prefers-reduced-motion:no-preference){
.carousel-heading.description-ready .carousel-description>span{transform:translateX(var(--description-start,-1000px));opacity:0;transition:transform 1.45s cubic-bezier(.22,.61,.36,1),opacity .3s ease;will-change:transform}
.carousel-heading.description-arrived .carousel-description>span{transform:translateX(0);opacity:1}
}

/* The about-section note falls onto the image, keeping its final angle. */
@media(prefers-reduced-motion:no-preference){
.about-banner.note-drop-ready .about-idea-note{opacity:0}
.about-banner.note-drop-landed .about-idea-note{animation:about-note-fall 1.35s cubic-bezier(.32,.05,.65,1) .75s both}
@keyframes about-note-fall{
0%{opacity:0;translate:0 -65vh;transform:rotate(-15deg)}
12%{opacity:1}
76%{opacity:1;translate:0 7px;transform:rotate(-3deg)}
89%{opacity:1;translate:0 -7px;transform:rotate(-6deg)}
100%{opacity:1;translate:0 0;transform:rotate(-5deg)}
}
}

/* Opening portrait enters from the right; its note falls independently. */
@media(prefers-reduced-motion:no-preference){
.hero .portrait-wrap.motion-ready[data-motion=right]{translate:0 0;transition:none;opacity:0;animation:none}
.hero .portrait-wrap.motion-ready.is-visible[data-motion=right]{opacity:1;animation:hero-portrait-right 1.15s cubic-bezier(.16,1,.3,1) .1s both}
.hero .portrait-wrap.motion-ready[data-motion=right] .portrait-note{opacity:0}
.hero .portrait-wrap.motion-ready.is-visible[data-motion=right] .portrait-note{animation:hero-note-fall 1.1s cubic-bezier(.32,.05,.65,1) 1s both}
@keyframes hero-portrait-right{from{opacity:0;translate:65vw 0}to{opacity:1;translate:0 0}}
@keyframes hero-note-fall{
0%{opacity:0;translate:0 -70vh;transform:rotate(-16deg)}
12%{opacity:1}
78%{opacity:1;translate:0 6px;transform:rotate(-6deg)}
90%{opacity:1;translate:0 -5px;transform:rotate(-9deg)}
100%{opacity:1;translate:0 0;transform:rotate(-8deg)}
}
}

/* Editorial portfolio covers use the same moving ribbon and gallery. */
.portfolio-strip .business-track{animation-duration:48s}
.portfolio-strip .portfolio-cover{width:250px}
.portfolio-strip .portfolio-cover img{aspect-ratio:1;object-fit:contain}
@media(max-width:760px){.portfolio-strip .portfolio-cover{width:220px}}