/* Ciardi / il banco del forno. Photography, the original mark and purposeful motion. */
.motion-toggle{align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;margin-left:auto;border:0;background:var(--color-taupe);color:var(--color-ink);border-radius:50%}
.motion-toggle:not([hidden]){display:flex}
.motion-play{display:none}
.motion-toggle[aria-pressed=true] .motion-pause{display:none}
.motion-toggle[aria-pressed=true] .motion-play{display:block}
.header-inner{gap:1.5rem}
.main-navigation{gap:clamp(2rem,4vw,4rem)}
.brand-watermark{display:block;position:absolute;pointer-events:none;user-select:none;z-index:0}
.brand-watermark img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.hero-atelier{grid-template-columns:.9fr 1.1fr;gap:3vw;padding-top:12px;padding-bottom:30px;max-height:none;min-height:calc(100svh - 118px)}
.hero-atelier .hero-copy{padding-block:2rem}
.hero-atelier h1{font-size:clamp(3.5rem,6.3vw,6rem);max-width:6.6em}
.hero-atelier .hero-description{max-width:31ch}
.hero-atelier .hero-note{margin-top:3rem}
.biscuit-theatre{min-width:0;position:relative}
.biscuit-stage{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1.15;background:var(--color-wine);color:var(--color-sugar);width:100%;min-height:480px;touch-action:pan-y}
.stage-watermark{inset:8% -7%;width:114%;height:84%;opacity:.12;transform:rotate(-13deg)}
.stage-watermark img,.footer-watermark img{mix-blend-mode:screen;filter:invert(1) grayscale(1)}
.biscuit-fallback{position:absolute;inset:0;transition:opacity 350ms;z-index:1}
.floating-biscuit{position:absolute;top:50%;left:50%;width:64%;height:auto;max-width:none;object-fit:contain;transform-origin:center;pointer-events:none}
.biscuit-0{transform:translate(-50%,-50%) rotate(-9deg)}
.biscuit-1{transform:translate(-100%,-117%) scale(.38) rotate(21deg)}
.biscuit-2{transform:translate(3%,-115%) scale(.4) rotate(-16deg)}
.biscuit-3{transform:translate(5%,20%) scale(.4) rotate(16deg)}
.biscuit-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.has-webgl .biscuit-fallback{opacity:0}
.stage-origin{position:absolute;top:26px;right:26px;font-size:.9375rem;z-index:3}
.stage-selected{position:absolute;bottom:28px;left:30px;font-size:var(--text-lead);font-weight:500;z-index:3;max-width:70%;line-height:1.2}
.hero-flavours{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-top:14px}
.hero-flavour{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--color-taupe);min-height:64px;padding:8px;border:0;border-radius:var(--radius-control);font-size:.8125rem;line-height:1.15;text-align:left;transition:color 150ms,background 150ms}
.hero-flavour img{width:34px;height:34px;object-fit:contain;flex:none}
.hero-flavour.is-active{background:var(--color-wine);color:var(--color-sugar)}
.hero-flavour:hover{background:var(--color-rose);color:var(--color-ink)}
.hero-flavour:active{transform:scale(.97)}
.recipe-ribbon{overflow:hidden;padding-block:1.5rem;margin-top:1rem;color:var(--color-wine);background:var(--color-ground)}
.recipe-ribbon-track{display:flex;gap:clamp(2rem,6vw,6rem);width:max-content;align-items:center;transform:translateX(-5vw);font-size:clamp(3.5rem,8vw,8.5rem);font-weight:700;letter-spacing:-.05em;line-height:1.1}
.recipe-ribbon-track span{flex:none;display:block}
.tasting-section{position:relative;isolation:isolate;overflow:hidden;background:var(--color-rose);margin-top:3rem;padding-block:5.5rem}
.tasting-watermark{width:950px;height:600px;left:17%;top:4%;opacity:.045;transform:rotate(-12deg);z-index:-1}
.tasting-layout{position:relative;z-index:1}
.tasting-photo{aspect-ratio:1.15;background:transparent;overflow:visible}
.tasting-photo img{object-fit:contain;padding:1.5rem;mix-blend-mode:normal;width:100%;height:100%}
.flavour-choice.is-active{color:var(--color-wine);font-weight:700}
.flavour-choice:hover{color:var(--color-wine)}
.story-section{position:relative;isolation:isolate}
.story-watermark{width:55%;height:360px;right:0;top:-120px;opacity:.035;transform:rotate(-8deg);z-index:-1}
.story-grid{gap:0}
.story-photo{overflow:hidden}
.story-photo img{transform:scale(1.08);transform-origin:center}
.story-text{background:var(--color-wine);color:var(--color-sugar)}
.story-year{font-size:clamp(5.5rem,12vw,11rem);margin-bottom:2.5rem;letter-spacing:-.06em}
.recipe-section{position:relative;isolation:isolate;overflow:hidden;background:var(--color-ink);color:var(--color-sugar);padding-block:6rem}
.recipe-layout{display:grid;grid-template-columns:1fr 1fr;gap:8vw;position:relative;z-index:1;align-items:center}
.recipe-workshop{min-width:0}
.recipe-photo{height:540px;overflow:hidden}
.recipe-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.recipe-workshop>p{font-size:var(--text-lead);margin-top:2rem;max-width:25ch;line-height:1.4}
.recipe-copy>p{max-width:31ch;margin-top:2rem}
.recipe-copy h2{font-size:var(--text-heading)}
.ingredient-list{list-style:none;padding:0;margin-block:2rem;perspective:600px}
.ingredient-list li{font-size:clamp(2.5rem,4.6vw,4.5rem);line-height:1.15;letter-spacing:-.035em;font-weight:500;transform-origin:left center;padding-block:2px}
.recipe-copy .text-link{color:var(--color-sugar)}
.recipe-watermark{width:850px;height:700px;right:-230px;bottom:-130px;opacity:.065;transform:rotate(-12deg)}
.recipe-watermark img{filter:invert(1) grayscale(1);mix-blend-mode:screen}
.catalogue-cta{position:relative;isolation:isolate;background:var(--color-taupe)}
.catalogue-watermark{width:650px;height:480px;right:-50px;top:0;opacity:.035;transform:rotate(-11deg);z-index:-1}
.catalogue-visual{position:relative;z-index:1}
.catalogue-visual img{transform:scale(1.025)}
.catalogue-copy{position:relative;z-index:1}
.site-footer{position:relative;isolation:isolate;background:var(--color-wine-deep)}
.footer-watermark{width:min(40%,620px);aspect-ratio:700/314;height:auto;right:-6%;top:-14%;opacity:.035;transform:rotate(-9deg);z-index:-1}
.page-intro{position:relative;isolation:isolate;overflow:hidden}
.page-intro::before{content:'';position:absolute;inset:-45px -60px -45px 27%;background:url('images/logo-ciardi.webp') center right/contain no-repeat;mix-blend-mode:multiply;opacity:.045;transform:rotate(-11deg);z-index:-1;pointer-events:none}
.quality-intro::before{inset:0 10%;opacity:.035}
.contact-intro::before{inset:-80px 0 -60px 42%;opacity:.045}
.catalogue-filter{background:var(--color-rose)}
.product-card-photo{background:var(--color-sky);isolation:isolate}
.product-photo-plane{position:absolute;inset:0;pointer-events:none;transform-origin:center;mix-blend-mode:multiply}
.product-pack-plane{mix-blend-mode:normal}
.product-photo-plane>img{width:100%;height:100%;min-width:0;min-height:0}
.product-card:nth-child(4n+2) .product-card-photo{background:var(--color-taupe)}
.product-card:nth-child(4n+3) .product-card-photo{background:var(--color-rose)}
.product-card-photo .product-card-pack{position:absolute;inset:0;opacity:0;object-fit:contain;padding:1rem;background:var(--color-taupe);mix-blend-mode:normal;pointer-events:none}
.product-card a:focus-visible .product-card-pack{opacity:1}
.product-card-caption>span{color:var(--color-muted)}
.has-gsap .button{transition:background 180ms}
.has-gsap .button:hover,.has-gsap .button:active{transform:none}
.has-gsap .product-card-photo img{transition:none}
.has-gsap .product-card a:hover .product-card-photo img{transform:none}
.has-gsap .is-entering,.has-gsap .tasting-panel.is-switching .tasting-photo img{animation:none}
.has-gsap .flavour-choice{transition:color 150ms;transform:none}
.has-gsap .flavour-choice:hover,.has-gsap .flavour-choice.is-active{transform:none}
.motion-paused .biscuit-fallback,.motion-paused .floating-biscuit{transition:none}
.motion-paused .product-card-photo img{transition:none}
@media(min-width:1664px){.hero-atelier{min-height:830px}.biscuit-stage{min-height:640px}}
@media(max-width:1100px){
 .hero-atelier{gap:2rem;grid-template-columns:.9fr 1.1fr;min-height:650px}.biscuit-stage{min-height:470px;aspect-ratio:.98}
 .hero-atelier h1{font-size:clamp(3rem,6.1vw,4.5rem)}.hero-atelier .hero-note{margin-top:2rem}
 .hero-flavour{flex-direction:column;text-align:center;font-size:.8125rem;gap:5px;min-height:80px}.hero-flavour img{width:30px;height:30px}
 .recipe-layout{gap:4vw}.recipe-photo{height:490px}.stage-origin{top:22px;right:22px}.stage-selected{left:24px;bottom:24px}
}
@media(max-width:800px){
 .header-inner{gap:1rem}.hero-atelier{grid-template-columns:1fr;min-height:0;gap:2rem;padding-top:0}
 .hero-atelier .hero-copy{padding-top:1.5rem;padding-bottom:0}.hero-atelier h1{font-size:clamp(3.5rem,9vw,5.5rem)}
 .hero-atelier .hero-description{max-width:42ch}.biscuit-stage{aspect-ratio:1.4;min-height:0}.biscuit-theatre{width:100%}
 .hero-flavours{padding-top:10px}.hero-flavour{flex-direction:row;text-align:left;min-height:58px;gap:7px}
 .recipe-ribbon{padding-block:1.25rem;margin-top:1rem}.recipe-ribbon-track{font-size:clamp(3.5rem,9vw,5rem)}
 .recipe-layout{gap:2rem}.recipe-photo{height:450px}.recipe-section{padding-block:4rem}.recipe-workshop>p{font-size:1.125rem}
 .recipe-copy h2{font-size:2.5rem}.ingredient-list li{font-size:2.75rem}.recipe-copy>p{font-size:1rem}
 .tasting-section{padding-block:4rem}.tasting-watermark{width:700px;left:0;opacity:.035}
 .story-watermark{height:280px;top:-30px;opacity:.03}
 .page-intro::before{inset:-10px -20px -10px 15%;opacity:.035}
}
@media(max-width:560px){
 .motion-toggle{width:40px;height:40px}.header-inner{gap:12px}
 .hero-atelier{gap:1.75rem;padding-bottom:0}.hero-atelier .hero-copy{padding-top:1rem}.hero-atelier h1{font-size:clamp(3rem,12.4vw,4.25rem)}
 .hero-atelier .hero-description{max-width:32ch}.hero-atelier .hero-note{margin-top:1.5rem}
 .biscuit-stage{aspect-ratio:1.05;min-height:0}.stage-origin{font-size:.8125rem;top:18px;right:18px}.stage-selected{font-size:1.125rem;left:20px;bottom:20px}
 .hero-flavours{grid-template-columns:repeat(2,1fr);gap:8px}.hero-flavour{justify-content:flex-start;font-size:.875rem;min-height:52px;padding:7px 10px}.hero-flavour img{width:32px;height:32px}
 .recipe-ribbon{margin-top:2rem}.recipe-ribbon-track{font-size:3.75rem;gap:2rem}
 .tasting-section{padding-block:3rem;margin-top:2rem}.tasting-watermark{width:600px;left:-70px;top:20px}.tasting-photo{aspect-ratio:1.1}.tasting-photo img{padding:1.5rem}
 .recipe-section{padding-block:3rem}.recipe-layout{grid-template-columns:1fr;gap:3rem}.recipe-photo{height:310px}.recipe-workshop>p{margin-top:1.25rem;font-size:1.125rem}.recipe-copy h2{font-size:var(--text-heading)}
 .recipe-copy>p{margin-top:1.5rem;font-size:var(--text-body)}.ingredient-list{margin-block:1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1rem}.ingredient-list li{font-size:2.5rem}
 .recipe-watermark{width:650px;right:-150px;bottom:-100px;opacity:.045}.story-year{font-size:6.5rem;margin-bottom:2rem}
 .story-watermark{width:95%;height:220px;top:-35px}.catalogue-watermark{width:450px;top:auto;bottom:30px;opacity:.04}
 .page-intro::before{inset:-20px -60px -20px 0;opacity:.03}.contact-intro::before{inset:-40px -60px -10px 0}
 .footer-watermark{width:80%;top:-4%;right:-25%;opacity:.03}
}
@media(prefers-reduced-motion:reduce){
 .biscuit-fallback,.floating-biscuit,.hero-flavour{transition:none}.biscuit-canvas{display:none}.has-webgl .biscuit-fallback{opacity:1}.recipe-ribbon-track{transform:translateX(-5vw)}
}
/* The original logo is a transparent luminance mask, never a tinted rectangle. */
.brand-watermark{color:var(--color-ink)}
.brand-watermark svg{display:block;width:100%;height:100%;overflow:visible}
.stage-watermark,.recipe-watermark,.footer-watermark{color:var(--color-sugar)}
.story-watermark{right:var(--space-gutter)}
/* CSS selection remains usable if GSAP or WebGL cannot load. */
body:not(.has-gsap) .biscuit-stage[data-flavour=nocciole]{background:var(--color-hazelnut)}
body:not(.has-gsap) .biscuit-stage[data-flavour=visciole]{background:var(--color-cherry)}
body:not(.has-gsap) .biscuit-stage[data-flavour=cacao]{background:var(--color-ink)}
.biscuit-fallback[data-selected=nocciole] .biscuit-1,.biscuit-fallback[data-selected=visciole] .biscuit-2,.biscuit-fallback[data-selected=cacao] .biscuit-3{transform:translate(-50%,-50%) rotate(-9deg)}
.biscuit-fallback[data-selected=nocciole] .biscuit-0{transform:translate(-100%,-117%) scale(.38) rotate(21deg)}
.biscuit-fallback[data-selected=visciole] .biscuit-0{transform:translate(3%,-115%) scale(.4) rotate(-16deg)}
.biscuit-fallback[data-selected=cacao] .biscuit-0{transform:translate(5%,20%) scale(.4) rotate(16deg)}

.hero-flavour.is-active:hover{background:var(--color-wine);color:var(--color-sugar)}

/* Ciardi 2.1: the stamp reaches the pages that showed only the ground. Same SVG mask, same scroll drift. */
.page-intro:has(.page-watermark)::before{content:none}
.page-watermark{--mark-w:min(68%,940px);width:var(--mark-w);aspect-ratio:700/314;right:-60px;top:50%;margin-top:calc(var(--mark-w) * -.2243);rotate:-11deg;opacity:.045;z-index:-1}
.quality-intro .page-watermark{right:10%;--mark-w:min(60%,820px);opacity:.035}
.contact-intro .page-watermark{--mark-w:min(58%,760px)}
.not-found,.commerce-intro{position:relative;isolation:isolate;overflow-x:clip}
.notfound-watermark{width:min(62%,880px);aspect-ratio:700/314;left:-2%;top:6%;rotate:-9deg;opacity:.05;z-index:-1}
.commerce-watermark{--mark-w:min(44%,560px);width:var(--mark-w);aspect-ratio:700/314;right:8%;top:50%;margin-top:calc(var(--mark-w) * -.2243);rotate:-10deg;opacity:.045;z-index:-1}
@media(max-width:800px){.page-watermark,.quality-intro .page-watermark,.contact-intro .page-watermark{--mark-w:96%;right:-20%;opacity:.035}.notfound-watermark{width:110%;left:-10%;top:0}.commerce-watermark{--mark-w:70%;right:-10%}}
/* Footer signature: the original mark at reading size replaces the oversized typed wordmark. */
.footer-signature{display:flex;flex-direction:column;align-items:flex-start;gap:2rem}
.footer-logo{display:block;width:clamp(150px,14vw,210px);color:var(--color-sugar);transition:opacity var(--dur-fast)}
.footer-logo svg{display:block;width:100%;height:auto;aspect-ratio:700/314}
.site-footer .footer-logo:hover{opacity:.8;text-decoration:none}
.footer-bottom{margin-top:clamp(3.5rem,7vw,6rem);padding-top:1.5rem;border-top:1px solid color-mix(in oklab,var(--color-sugar) 18%,transparent)}
@media(max-width:560px){.footer-links>*{white-space:nowrap}.footer-signature{gap:1.5rem}.footer-logo{width:140px}.footer-bottom{margin-top:3rem}}

.has-gsap .moment-choice-image{overflow:visible}

/* Page transitions: the clicked biscuit travels into its own page, the header stays put. */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-group(*){animation-duration:460ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root){animation:240ms cubic-bezier(.7,0,.84,0) both ciardi-page-out}
::view-transition-new(root){animation:460ms cubic-bezier(.22,1,.36,1) 60ms both ciardi-page-in}
::view-transition-old(*.biscotto),::view-transition-new(*.biscotto){height:100%;object-fit:cover}
@keyframes ciardi-page-out{to{opacity:0}}
@keyframes ciardi-page-in{from{opacity:0;transform:translateY(14px)}}
html.motion-paused::view-transition-group(*),html.motion-paused::view-transition-old(*),html.motion-paused::view-transition-new(*){animation:none}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}
.story-year{font-variant-numeric:tabular-nums}

.has-gsap .brand-watermark,.has-gsap .story-photo img,.has-gsap .recipe-photo img{will-change:transform}



/* Ciardi 2.4: chapters meet along the arch of the Ciardi cartouche, not a straight line.
   A section with .arch paints the previous colour (--arch-from) in its two top corners: the boundary is the curve of the mark. */
:root{--curve:clamp(28px,4.2vw,64px);--arch-corners:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpath d='M-8 -8H1448V72C1140 4 300 4 -8 72Z'/%3E%3C/svg%3E")}
.arch{--arch-from:var(--color-ground);position:relative}
.arch::before{content:'';position:absolute;top:0;left:0;right:0;height:var(--curve);background:var(--arch-from);-webkit-mask:linear-gradient(#000 0 0) 0 0/100% 3px no-repeat,var(--arch-corners) 0 0/100% 100% no-repeat;mask:linear-gradient(#000 0 0) 0 0/100% 3px no-repeat,var(--arch-corners) 0 0/100% 100% no-repeat;pointer-events:none;z-index:0}
.catalogue-cta.arch{padding-top:var(--curve)}
/* Home: the chapters touch. */
.home .tasting-section{margin-bottom:0}
.home .moment-section{--arch-from:var(--color-rose);margin-block:-1px 0;padding-top:calc(var(--curve) + clamp(3rem,6vw,5.5rem))}
.home .story-section{--arch-from:var(--color-taupe);margin-block:-1px 0;padding-top:calc(var(--curve) + clamp(2.5rem,5vw,4.5rem));padding-bottom:clamp(4rem,8vw,7rem)}
.home .recipe-section{--arch-from:var(--color-ground);margin-block:-1px 0;padding-top:calc(var(--curve) + clamp(3rem,6vw,6rem))}
.home .catalogue-cta{--arch-from:var(--color-ink);margin-top:-1px}
/* Storia: the journey (rose) runs straight into the heritage chapter. */
.history-journey:has(+ .heritage-section){margin-bottom:0}
.history-journey + .heritage-section{--arch-from:var(--color-rose);margin-top:-1px;padding-top:calc(var(--curve) + clamp(2.5rem,5vw,4.5rem))}
/* Qualità: the ingredient atlas (taupe) runs straight into the method. */
.ingredient-atlas:has(+ .quality-method){margin-bottom:0}
.ingredient-atlas + .quality-method{--arch-from:var(--color-taupe);margin-top:-1px;padding-top:calc(var(--curve) + clamp(2.5rem,5vw,4.5rem))}
/* Touching sections overlap by 1px, so a fractional boundary never shows a hairline. */
section.arch{background-image:linear-gradient(var(--arch-from),var(--arch-from));background-size:100% 3px;background-repeat:no-repeat}
/* A coloured line follows each arch, parallel to it and just inside the section. */
.arch-line{position:absolute;top:0;left:0;width:100%;height:calc(var(--curve) * 96 / 72);overflow:visible;pointer-events:none;z-index:1}
.arch-line path{fill:none;stroke:var(--arch-line,var(--color-wine));stroke-width:3px;stroke-linecap:round}
.home .story-section{--arch-line:var(--color-hazelnut)}
.home .recipe-section{--arch-line:var(--color-rose)}
.home .catalogue-cta{--arch-line:var(--color-wine)}
.ingredient-atlas{--arch-line:var(--color-hazelnut)}