@import url("ritagli.css");
:root{--white:#fdfcfb;--ink:#181517;--rose:#d784a0;--pink:#f1aac0;--deep:#9b395b;--sans:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;--round:"Arial Rounded MT Bold","Arial Black",var(--sans)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--white);color:var(--ink);font:16px/1.4 var(--sans)}a{color:inherit}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid #542441;outline-offset:4px}img{display:block;width:100%;height:100%;object-fit:cover}figure,p,h1,h2,h3{margin:0}a,button{-webkit-tap-highlight-color:transparent}
.skip{position:fixed;left:1rem;top:-5rem;padding:.7rem;background:white;z-index:8}.skip:focus{top:1rem}
.site-header{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;padding:clamp(1.55rem,4.4vw,4.9rem) 5% 0;position:relative;z-index:3}
.site-header nav{display:grid;justify-items:start;gap:.18rem}.site-header nav a{font-size:.82rem;text-decoration:none;min-height:25px;display:inline-flex;align-items:center}.site-header nav a:hover,.site-footer a:hover{text-decoration:underline}.nav-lead{color:var(--deep);font-weight:800}.nav-lead span{display:inline-grid;place-items:center;background:var(--rose);color:#24141c;width:1.12rem;height:1.12rem;margin-left:.35rem;border-radius:50%;font-size:.78rem}
.logo{font:1000 clamp(1.08rem,2.6vw,2.3rem)/.9 var(--round);letter-spacing:-.095em;color:var(--deep);text-decoration:none;justify-self:center;white-space:nowrap}.logo span{color:#b44870}.catalog-link{justify-self:end;display:grid;place-items:center;width:44px;height:38px;text-decoration:none}.catalog-link span{width:13px;height:13px;border:1.5px solid currentColor;border-radius:50%;position:relative}.catalog-link span::after{content:"";position:absolute;left:9px;top:10px;background:currentColor;width:6px;height:1.5px;transform:rotate(45deg);transform-origin:left}
.hero-stage{height:clamp(310px,42vw,565px);display:grid;place-items:center;position:relative;isolation:isolate;overflow:hidden}
.hero-stage h1{font:440 clamp(4.2rem,15.4vw,16rem)/.86 var(--sans);letter-spacing:-.092em;white-space:nowrap;position:relative;z-index:0;align-self:center}
.hero-product{position:absolute;z-index:2;top:0;bottom:1%;width:clamp(176px,29vw,375px);left:50%;transform:translateX(-50%);height:100%}.hero-product .bag{width:100%;height:100%}.shadow{filter:drop-shadow(5px 13px 12px #5d344044)}
.hero-yarn{position:absolute;z-index:1;object-fit:contain;width:clamp(170px,42vw,590px);height:auto;top:23%;left:25%;transform:rotate(-25deg);filter:drop-shadow(0 8px 5px #44293829);pointer-events:none}
.hero-intro{display:grid;grid-template-columns:1fr minmax(0,.76fr);padding:clamp(1.1rem,3vw,3rem) 5% clamp(2.7rem,6vw,6rem);gap:1.4rem;font-size:clamp(.85rem,1.65vw,1.35rem);line-height:1.15}.hero-intro p:not(.muted){font-weight:760;max-width:36ch;margin:.75rem 0 .9rem}.muted{color:#6e6368;font-size:.9em}
.button{display:inline-flex;align-items:center;gap:3px;text-decoration:none;font-size:.82rem;font-weight:760;line-height:1.1;min-height:44px}.button span,.button b{background:var(--rose);color:#21151a;border-radius:999px;display:inline-grid;place-items:center;min-height:40px;padding:.52rem .95rem}.button b{width:40px;padding:0;font-size:1.15rem;font-weight:500}.button:hover :is(span,b){background:#a44869;color:white}
.featured{background:var(--rose);padding:clamp(2rem,5vw,4.25rem) 4.6% clamp(2rem,5.5vw,5.5rem);color:#24151c}.featured-title{display:flex;justify-content:center;align-items:center;gap:clamp(.6rem,3vw,3rem);text-align:center;margin-bottom:clamp(1.1rem,3.1vw,2.9rem)}.featured-title h2{font-size:clamp(1.2rem,4vw,3.7rem);color:#271920;line-height:1;font-weight:820;letter-spacing:-.025em}.featured-title a{font-size:clamp(.62rem,1.35vw,1.1rem);font-weight:680;color:#402433;text-underline-offset:.2em}
.shelf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(.35rem,2vw,2rem);max-width:1250px;margin:auto}.shelf-arrow{font:inherit;font-size:1.22rem;border:0;cursor:pointer;color:#402433;background:#f2b4c7;border-radius:50%;width:clamp(36px,5vw,50px);height:clamp(36px,5vw,50px);display:grid;place-items:center}.shelf-arrow:disabled{opacity:.58;cursor:default}.shelf-arrow[hidden]{display:none}
.shelf-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * var(--space)) / 3);--space:clamp(.7rem,3.3vw,3.25rem);gap:var(--space);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#8e3957 #edacc1;padding:0 0 .75rem}.shelf-track article{min-width:0;scroll-snap-align:start}
.item-photo{display:block;background:var(--pink);aspect-ratio:.81;border-radius:43% 43% 25% 25% / 35% 35% 21% 21%;overflow:hidden;position:relative}.item-photo img:not(.cut){height:88%;width:86%;margin:9% auto 0;border-radius:inherit}.item-photo .cut{position:absolute;max-width:100%;transition:transform .35s ease}.item-photo .bag{width:82%;height:104%;left:9%;top:-8%}.item-photo .bear{width:115%;max-width:none;height:82%;left:-7%;bottom:3%}.item-photo .koala{width:81%;height:109%;left:9%;top:-14%}.item-photo:hover .cut{transform:scale(1.04)}
.item-label{display:flex;justify-content:space-between;gap:.3rem;align-items:center;padding:.64rem .18rem 0}.item-label h3{font-size:clamp(.74rem,1.45vw,1.24rem);line-height:1.1}.item-label a{border-radius:999px;background:#fff9fa;color:#703049;padding:.31rem .6rem;text-decoration:none;font-size:clamp(.64rem,1.02vw,.88rem);font-weight:760}
.about{position:relative;isolation:isolate;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.6rem,6vw,7rem);align-items:center;min-height:clamp(440px,61vw,850px);padding:clamp(2.75rem,8vw,8rem) 8% clamp(5rem,16vw,15rem);overflow:hidden}.about-copy{position:relative;z-index:2;max-width:35ch}.about-copy h2{font-size:clamp(1.4rem,3vw,3.1rem);line-height:1;margin:.35rem 0 .8rem;letter-spacing:-.05em}.about-copy p:not(.muted){margin-bottom:.9rem;line-height:1.4}.about-brand{z-index:-1;position:absolute;left:7.5%;bottom:8%;font:1000 clamp(3.2rem,15.4vw,15.5rem)/.8 var(--round);letter-spacing:-.105em;color:var(--rose);white-space:nowrap}
.collage{position:relative;height:clamp(235px,38vw,490px);z-index:1}.collage figure,.collage-yarn{position:absolute}.collage-main{width:76%;height:72%;right:0;bottom:4%;background:#d4c7cc}.collage-main img{object-position:center 60%}.collage-top{width:32%;height:36%;right:8%;top:0;box-shadow:0 5px 12px #2c152137}.collage-top img{object-position:center 48%}.collage-bottom{width:28%;height:32%;left:11%;bottom:-5%;border:8px solid #f1aac0}.collage-yarn{height:auto;width:65%;top:-2%;left:-1%;z-index:2;transform:rotate(22deg);pointer-events:none;filter:drop-shadow(0 5px 4px #3d252d38)}
.collections,.order,.catalog{padding:clamp(2rem,6vw,5.5rem) 5%}.collections h2,.order h2,.catalog h1{font-size:clamp(1.75rem,4vw,4.25rem);letter-spacing:-.055em;line-height:1;margin-bottom:1.25rem}.collections>div,.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.5rem,3vw,2.5rem)}.collections a{text-decoration:none}.collections img,.catalog-grid img{aspect-ratio:1;object-position:center 66%;height:auto;border-radius:35% 35% 8% 8% / 24% 24% 8% 8%}.collections strong{display:inline-block;margin-top:.6rem;font-size:clamp(.78rem,1.8vw,1.4rem)}.collections a:hover strong{text-decoration:underline}
.order{background:#f7e2e8}.order ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;padding-left:1.25rem;margin:1.5rem 0}.order li strong{display:block}.site-footer,.footer,.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.6rem 5%;flex-wrap:wrap}.site-footer a,.footer a,.nav a{font-size:.88rem;text-decoration:none}.site-footer .logo,.footer .logo,.nav .logo{font-size:clamp(1.2rem,2.4vw,2rem)}.nav nav{display:flex;gap:1rem}.catalog .intro{margin-bottom:1.2rem}.catalog-grid{margin-bottom:1.5rem}.catalog-grid h2{font-size:clamp(1.1rem,2.4vw,2rem);margin:.5rem 0}.catalog-grid section{scroll-margin-top:1rem}.catalog .button{padding:.6rem 1rem;background:var(--rose);border-radius:999px}
@media(prefers-reduced-motion:no-preference){
 .hero-stage h1{animation:letter-in .85s .1s both}.hero-product{animation:product-in 1.05s .04s both}.hero-yarn{animation:yarn-in 1.05s .19s both}.hero-intro{animation:fade-in .75s .34s both}
 .featured.in-view article,.about.in-view figure{animation:fade-in .65s both}.featured.in-view article:nth-child(2),.about.in-view figure:nth-of-type(2){animation-delay:.08s}.featured.in-view article:nth-child(3),.about.in-view figure:nth-of-type(3){animation-delay:.16s}
 @keyframes letter-in{from{opacity:0;transform:translateX(6%)}to{opacity:1;transform:translateX(0)}}@keyframes product-in{from{opacity:0;transform:translate(-50%,9%) rotate(calc(var(--bag-angle, 0deg) + 4deg)) scale(.91)}to{opacity:1;transform:translate(-50%,0) rotate(var(--bag-angle, 0deg)) scale(1)}}@keyframes yarn-in{from{opacity:0;transform:translateX(-8%) rotate(-31deg)}to{opacity:1;transform:translateX(0) rotate(-25deg)}}@keyframes fade-in{from{opacity:.2;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.item-photo .cut{transition:none}}
@media(max-width:690px){
 .site-header{padding-top:1.05rem}.site-header nav a{font-size:.73rem}.site-header .logo{margin-top:.26rem}.hero-stage h1{font-size:16vw}.hero-product{top:-5%;width:clamp(165px,47vw,290px);height:106%}.hero-yarn{left:20%;width:61%}.hero-intro{grid-template-columns:.62fr 1.38fr;gap:.65rem;padding-top:.4rem}.hero-intro p:not(.muted){margin-top:0}
 .featured{padding-inline:3%}.featured-title{gap:.7rem}.shelf{gap:.35rem}.shelf-track{grid-auto-columns:calc((100% - var(--space)) / 2);--space:.6rem}.item-label{align-items:flex-start;flex-direction:column;min-height:61px}
 .about{grid-template-columns:1fr;gap:1rem;padding:2.7rem 5% 5.6rem}.about-brand{bottom:5%;left:5%;font-size:16.8vw}.collage{width:min(100%,480px);justify-self:center}.collections>div{gap:.5rem}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.order ol{grid-template-columns:1fr;gap:.55rem}.site-footer{gap:.5rem}
}

/* Compositing della hero: le due istanze condividono posizione e animazione. */
.hero-product{width:clamp(250px,42vw,565px);top:1%;height:97%}
.hero-product .photo-cut{width:100%;height:100%;object-fit:contain}
.hero-yarn{width:clamp(225px,51vw,675px);top:40%;left:19%;transform:rotate(-14deg)}
.yarn-front{z-index:3;clip-path:polygon(50% 0,75% 0,74% 100%,52% 100%)}
.item-photo .photo-cut{width:100%;height:100%;object-fit:contain;position:absolute;inset:0;transition:transform .35s ease}
.item-photo .bag-cut{width:105%;max-width:none;left:-2.5%;height:93%;top:3%}
.item-photo .bear-cut{padding:10% 5% 4%}
.item-photo .koala-cut{padding:9% 15% 7%}
.item-photo:hover .photo-cut{transform:scale(1.04)}

.ester-board{position:relative;isolation:isolate;min-width:0;aspect-ratio:1.32}
.ester-halo{position:absolute;z-index:-2;left:13%;top:7%;width:74%;height:81%;border-radius:46% 46% 31% 31% / 50% 50% 30% 30%;background:#f1c2d0;transform:rotate(-7deg)}
.ester-portrait{position:absolute;z-index:1;left:7%;right:7%;bottom:10%;aspect-ratio:709/562;overflow:hidden;filter:drop-shadow(0 11px 12px #5c304335);border-radius:0 0 19% 19% / 0 0 15% 15%}
.ester-portrait img{display:block;width:100%;height:100%;object-fit:fill;clip-path:shape(evenodd from 0% 54%, curve to 6% 33% with 2% 46% / 5% 39%, curve to 14% 19% with 8% 28% / 11% 22%, curve to 21% 8% with 16% 14% / 18% 8%, curve to 29% 15% with 24% 6% / 27% 11%, curve to 39% 3% with 31% 8% / 34% 4%, curve to 60% 12% with 46% 0% / 55% 4%, curve to 64% 35% with 63% 18% / 63% 27%, curve to 70% 53% with 65% 43% / 67% 49%, curve to 82% 54% with 75% 52% / 78% 52%, curve to 94% 66% with 88% 54% / 92% 61%, curve to 100% 80% with 96% 72% / 98% 77%, line to 100% 100%, line to 20% 100%, curve to 28% 93% with 23% 98% / 25% 94%, line to 28% 91%, curve to 24% 88% with 26% 89% / 25% 88%, curve to 11% 100% with 20% 94% / 15% 99%, line to 0% 100%, close, move to 14% 72%, curve to 26% 58% with 16% 68% / 22% 64%, curve to 27% 35% with 26% 47% / 27% 40%, curve to 21% 30% with 26% 29% / 23% 28%, curve to 13% 46% with 18% 33% / 15% 40%, curve to 14% 72% with 12% 55% / 12% 65%, close)}
.ester-yarn{position:absolute;z-index:2;left:-2%;bottom:1%;width:83%;height:auto;object-fit:contain;transform:rotate(-9deg);filter:drop-shadow(0 5px 4px #5a2b423c);pointer-events:none}
.callout{position:absolute;z-index:3;background:#fffafc;border:1px solid #c68097;border-radius:999px;padding:.38rem .65rem;font-size:clamp(.65rem,1.2vw,1rem);font-weight:730;white-space:nowrap;color:#54263a;box-shadow:0 3px 12px #73354c16}
.callout::before{content:"";width:clamp(13px,3vw,39px);height:1px;background:#af5774;position:absolute;top:50%}
.callout-maker{right:-2%;top:18%}.callout-maker::before,.callout-detail::before{right:100%}
.callout-craft{left:-2%;top:46%}.callout-craft::before{left:100%}
.callout-detail{right:-2%;bottom:24%}
.shelf-track{grid-column:2}.shelf-arrow:first-child{grid-column:1;grid-row:1}.shelf-arrow:last-child{grid-column:3;grid-row:1}
@media(prefers-reduced-motion:no-preference){
 .hero-yarn{animation:yarn-pass 1.18s .16s both}
 .ester-feature.in-view .ester-board{animation:fade-in .75s both}
 @keyframes yarn-pass{from{opacity:0;transform:translate(-12%,10%) rotate(-19deg)}to{opacity:1;transform:translate(0,0) rotate(-14deg)}}
}
@media(prefers-reduced-motion:reduce){.item-photo .photo-cut{transition:none}}
@media(max-width:690px){
 .hero-product{width:clamp(220px,65vw,380px);top:0;height:98%}
 .hero-yarn{width:77%;left:10%;top:43%}
 .ester-board{width:min(100%,515px);justify-self:center}
 .callout-maker,.callout-detail{right:0}.callout-craft{left:0}
}
.item-photo img.photo-cut{margin:0;border-radius:0}
.item-photo img.bear-cut,.item-photo img.koala-cut{width:100%;height:100%}
.item-photo img.bag-cut{width:105%;height:93%}
@media(prefers-reduced-motion:no-preference){
 .hero-stage h1{animation-delay:.04s}
 .hero-product{animation-delay:.25s}
 .hero-yarn{animation-delay:.39s}
}

.hero-stage h1 {
  font-size: min(17vw, 18rem);
  top: -5%;
}
.hero-product {
  left: 50%;
  top: 21%;
  height: 78%;
  width: clamp(225px, 36vw, 510px);
}
.hero-yarn {
  left: 27%;
  top: 52%;
  width: min(38vw, 510px);
}

.testimonianze {
  padding: clamp(3rem, 7vw, 6rem) 5%;
  background: #fff7fa;
}
.testimonianze-header {
  max-width: 70ch;
  margin: 0 auto 1.6rem;
  text-align: center;
}
.testimonianze-header h2 {
  margin-bottom: .55rem;
  color: #60243f;
  font-size: clamp(2.4rem, 7vw, 5.4rem);
  letter-spacing: -.065em;
  line-height: 1;
}
.testimonianze-header p { color: #6f5561; }
.testimonianze .shelf-track { --space: clamp(.7rem, 2vw, 1.4rem); }
.testimonianza {
  padding: clamp(1rem, 2.8vw, 1.85rem);
  border: 1px solid #eac4d3;
  border-radius: 1.25rem;
  background: #f8e2eb;
}
.testimonianza:nth-child(even) { background: #fdfcfb; }
.testimonianza-tipo {
  color: #7e3452;
  font-size: .78rem;
  font-weight: 750;
}
.testimonianza blockquote {
  margin: .65rem 0 0;
  color: #442331;
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  line-height: 1.35;
}
.testimonianza {
  display: flex;
  flex-direction: column;
}
@media (max-width: 850px) {
  .testimonianze .shelf-track { grid-auto-columns: calc((100% - var(--space)) / 2); }
}
@media (max-width: 690px) {
  .hero-stage h1 { font-size: 18.2vw; top: -10%; }
  .hero-product { top: 26%; height: 72%; width: min(64vw, 310px); }
  .hero-yarn { left: 17%; top: 58%; width: 52%; }
  .testimonianze .shelf-track { grid-auto-columns: 100%; }
}

.hero-yarn {
  left: 10%;
  top: 24%;
  width: min(36vw, 485px);
}
.hero-stage {
  --bag-photo-top: min(6.944444vw, 100px);
  --bag-photo-left: min(27.777778vw, 400px);
}
.hero-product {
  left: calc(71% - var(--bag-photo-left));
  top: 4%;
  height: 69%;
  width: min(33vw, 440px);
}
.hero-product .bag-cut {
  position: relative;
  top: var(--bag-photo-top);
  left: var(--bag-photo-left);
  transform: rotate(-11deg);
}
.hero-yarn-front { display: none; }
.testimonianza-profilo {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: auto;
  padding-top: 1rem;
  color: #60243f;
  font-size: .85rem;
}
.testimonianza-avatar {
  display: block;
  flex: 0 0 2.65rem;
  height: 2.65rem;
  border: 1px solid #dfafc1;
  border-radius: 50%;
  background: #f0c6d5 url("foto/ritratti-esempio.png") no-repeat;
  background-size: 200% 200%;
}
.ritratto-1 { background-position: left top; }
.ritratto-2 { background-position: right top; }
.ritratto-3 { background-position: left bottom; }
.ritratto-4 { background-position: right bottom; }
.testimonianza-stelle {
  display: block;
  color: #bd7000;
  font-size: 1rem;
  letter-spacing: .14em;
}
.testimonianze-pausa {
  display: block;
  min-height: 44px;
  margin: .5rem auto 0;
  padding: .45rem .85rem;
  border: 1px solid #e4acc1;
  border-radius: 999px;
  background: #fff7fa;
  color: #71334e;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.testimonianze-pausa[hidden] { display: none; }
@media (max-width: 690px) {
  .hero-stage { height: min(75vw, 310px); }
  .hero-yarn {
    left: 8%;
    top: 44%;
    width: 83%;
  }
  .hero-yarn-front {
    display: block;
    z-index: 3;
    clip-path: inset(0 54% 0 22%);
  }
  .hero-stage { --bag-photo-left: 14vw; }
  .hero-product {
    left: calc(50% - var(--bag-photo-left));
    top: calc(12% - var(--bag-photo-top));
    height: 76%;
    width: min(64vw, 310px);
  }
  .hero-product .bag-cut { transform: none; }
}

/* Anteprima alternativa ispirata alla composizione HUSH. */
.hero-stage--reference h1 { top: 0; }
.hero-stage--reference .hero-product {
  left: 50%;
  top: 4%;
  width: min(37vw, 475px);
  height: 91%;
}
.hero-stage--reference .bag-cut {
  top: 0;
  left: 0;
  transform: none;
}
.hero-stage--reference .hero-yarn {
  left: 24%;
  top: 25%;
  width: min(35vw, 475px);
}
.hero-stage--reference .hero-yarn-front { display: none; }

@media (max-width: 690px) {
  .hero-stage--reference .hero-product {
    top: 1%;
    width: min(66vw, 315px);
    height: 91%;
  }
  .hero-stage--reference .hero-yarn {
    left: 16%;
    top: 28%;
    width: 63%;
  }
}