/* Piccolo Bosco — il bosco di notte (testata, apertura, piede) e il laboratorio di giorno.
   Un solo tema chiaro, voluto: i colori sono quelli del marchio. Niente spigoli: tondi, archi, curve. */
:root{
  --ingobbio:#F7F2EA; --biscotto:#EDE3D3; --linea:#D8CBB6; --muto:#5E6A57;
  --pino:#2E4031; --pino-fondo:#243327; --volpe:#C65A28; --ocra:#CB8F33; --cobalto:#233E8B; --chiaro:#C9D1C4;
  --f-titoli:"Alice",Georgia,serif; --f-testo:"Commissioner",system-ui,sans-serif;
  --f-logo:"Alice",Georgia,serif;   /* il nome resta in latino in ogni lingua */
  --misura:62ch; --largo:1180px; --curva:clamp(26px,4vw,56px);
  color-scheme:light;
}
:lang(hy){--f-titoli:"Noto Serif Armenian","Alice",Georgia,serif;--f-testo:"Noto Sans Armenian","Commissioner",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--pino);font:400 1.0625rem/1.65 var(--f-testo);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  /* grana leggera, come l'ingobbio steso a mano */
  background:var(--ingobbio) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .25 0 0 0 0 .19 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:var(--volpe);text-underline-offset:.22em}
a:hover{color:var(--volpe)}
:focus-visible{outline:2px solid var(--volpe);outline-offset:3px}
h1,h2,h3{font-family:var(--f-titoli);font-weight:400;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(2.4rem,5.4vw,4.3rem);letter-spacing:-.01em}
h2{font-size:clamp(1.75rem,3.2vw,2.5rem)}
h3{font-size:1.3rem}
p{margin:0}
::selection{background:#F1D9C9;color:var(--pino)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:var(--ingobbio);color:var(--pino);padding:8px 12px;z-index:10}
.wrap{max-width:var(--largo);margin:0 auto;padding-inline:24px}
.kicker{font:500 .74rem var(--f-testo);letter-spacing:.2em;text-transform:uppercase;color:var(--muto);display:flex;align-items:center;gap:10px}
.luna-mini{width:15px;height:15px;flex:none;color:var(--ocra)}
.lead{font-size:1.18rem;line-height:1.6;color:var(--muto);max-width:var(--misura)}
.todo{background:#FBEFD8;color:#7A4E0E;border:1px dashed var(--ocra);border-radius:3px;padding:0 .35em;font-size:.92em}

/* Avviso di anteprima */
.avviso{background:var(--pino-fondo);color:var(--chiaro);font-size:.8rem;text-align:center;padding:7px 16px}
.avviso b{color:var(--ocra);font-weight:500}

/* ---- La notte: testata, apertura, fascia, piede --------------------------------- */
.notte{position:relative;isolation:isolate;color:var(--ingobbio);background:var(--pino)}
.notte .stelle{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.notte .kicker{color:var(--chiaro)}
.notte .lead,.notte p{color:var(--chiaro)}
.notte a:hover{color:var(--ingobbio)}
/* Bordi morbidi: la sezione notturna scavalca quella accanto, che resta visibile negli angoli */
.curva-sotto{border-radius:0 0 50% 50% / 0 0 var(--curva) var(--curva);margin-bottom:calc(var(--curva) * -1);z-index:1}
.curva-sopra{border-radius:50% 50% 0 0 / var(--curva) var(--curva) 0 0;margin-top:calc(var(--curva) * -1);z-index:1}
.curva-sopra.curva-sotto{border-radius:50% / var(--curva)}
.curva-sotto + .sezione{padding-top:calc(var(--curva) + clamp(56px,8vw,104px))}
.sezione:has(+ .curva-sopra){padding-bottom:calc(var(--curva) + clamp(56px,8vw,104px))}
.curva-sotto + main{padding-top:var(--curva)}
main:has(+ .curva-sopra){padding-bottom:var(--curva)}
.intro{padding-top:clamp(40px,6vw,72px)}
.intro + .sezione{padding-top:clamp(36px,5vw,64px)}

/* Testata */
.testata .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;padding-block:16px}
.testata.curva-sotto .wrap{padding-bottom:calc(16px + var(--curva) * .5)}
.marchio{display:flex;align-items:center;gap:12px;text-decoration:none}
.marchio img{width:46px;height:46px}
.nome{font-family:var(--f-logo);font-size:1.6rem;line-height:1;white-space:nowrap}
.nome .luna{display:inline-block;width:.5em;height:.5em;margin-inline:.03em;color:var(--ocra)}
.menu{display:flex;align-items:center;gap:6px 24px;flex-wrap:wrap;font-size:.96rem}
.menu a{text-decoration:none;padding-block:4px;border-bottom:1px solid transparent}
.testata .menu a{color:var(--chiaro)}
.testata .menu a:hover,.testata .menu a[aria-current=page]{color:var(--ingobbio)}
.menu a[aria-current=page]{border-bottom-color:var(--volpe)}
.lingue{display:flex;align-items:center;gap:6px;margin-left:6px}
.lingue a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;padding:4px;border-radius:6px;border:0}
.bandiera{width:24px;height:16px;flex:none;border-radius:3px;box-shadow:0 0 0 1px rgba(247,242,234,.35)}
.testata .lingue a{opacity:.6;transition:opacity .2s}
.testata .lingue a:hover{opacity:1}
.testata .lingue a[aria-current=true]{opacity:1;box-shadow:0 0 0 1.5px var(--ingobbio)}

/* Apertura della home: il piatto vero dentro la luna del marchio */
.apertura .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(28px,5vw,64px) clamp(56px,8vw,104px)}
.apertura .testo{display:flex;flex-direction:column;gap:24px;min-width:0}
.apertura h1{color:var(--ingobbio);font-size:clamp(2.3rem,4.8vw,3.9rem)}
.riga{display:inline-block}
.apertura .lead{max-width:44ch}
.luna-piatto{position:relative;width:min(100%,480px);aspect-ratio:1;justify-self:center}
.luna-piatto svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--ocra)}
.luna-piatto img{position:absolute;left:19.6%;top:15.4%;width:77%;height:77%;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 clamp(5px,.8vw,9px) var(--biscotto),0 34px 60px -22px rgba(0,0,0,.6)}
.apertura{overflow:hidden} /* il bagliore della luna non deve allargare la pagina sul telefono */
.bagliore{position:absolute;inset:-30%;z-index:-1;background:radial-gradient(closest-side,rgba(203,143,51,.16),transparent);pointer-events:none}

.bottoni{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;text-decoration:none;font-weight:500;font-size:.97rem;border:1px solid var(--pino);line-height:1.2}
.btn.pieno{background:var(--pino);color:var(--ingobbio)}.btn.pieno:hover{background:var(--volpe);border-color:var(--volpe);color:var(--ingobbio)}
.btn.vuoto:hover{border-color:var(--volpe)}
.btn.chiaro{background:var(--ingobbio);color:var(--pino);border-color:var(--ingobbio)}.btn.chiaro:hover{background:var(--biscotto);border-color:var(--biscotto);color:var(--pino)}
.btn.contorno{border-color:rgba(247,242,234,.45);color:var(--ingobbio)}.btn.contorno:hover{border-color:var(--ingobbio)}
.btn[aria-disabled]{border-style:dashed;opacity:.7;cursor:not-allowed}

/* ---- Il giorno: sezioni chiare ---------------------------------------------------- */
.sezione{padding-block:clamp(56px,8vw,104px)}
.sezione.biscotto{background:var(--biscotto)}
.sezione .wrap{display:flex;flex-direction:column;gap:clamp(32px,4vw,48px)}
.titolo-sez{display:flex;align-items:end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.titolo-sez.centro{flex-direction:column;align-items:center;text-align:center}
.titolo-sez a{font-size:.97rem}

/* Come nasce un pezzo: tre tondi come tre piatti */
.passi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px);list-style:none;margin:0;padding:0}
.passi li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;min-width:0}
.passi .tondo{width:min(78%,230px);aspect-ratio:1;border-radius:50%;object-fit:cover;margin-bottom:10px;box-shadow:0 0 0 6px var(--ingobbio),0 0 0 7px var(--linea)}
.num{font:400 1.05rem var(--f-titoli);color:var(--volpe);letter-spacing:.08em}
.passi p{color:var(--muto);max-width:30ch}
.passi.senza-foto li{align-items:flex-start;text-align:left;padding-top:18px;border-top:1px solid var(--linea)}

/* La mensola: i pezzi in piedi su un ripiano, le didascalie allineate sotto */
.mensola{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,272px));justify-content:center;grid-auto-rows:auto}
.pezzo{grid-row:span 2;display:grid;grid-template-rows:subgrid;margin:0;min-width:0}
.ripiano{display:flex;align-items:flex-end;justify-content:center;padding:24px 10px 0;border-bottom:5px solid var(--linea)}
.ripiano img{object-fit:cover;background:var(--linea);transition:transform .35s ease}
.pezzo:hover .ripiano img{transform:translateY(-6px)}
.ripiano .tondo{width:88%;aspect-ratio:1;border-radius:50%}
.ripiano .arco{width:74%;aspect-ratio:3/4;border-radius:999px 999px 4px 4px}
.pezzo figcaption{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:18px 10px 40px;background:linear-gradient(rgba(46,64,49,.12),transparent 12px)}
.pezzo figcaption b{font:400 1.08rem/1.25 var(--f-titoli)}
.pezzo figcaption span{font-size:.8rem;letter-spacing:.06em;color:var(--muto)}
.categoria{display:flex;flex-direction:column;gap:8px}
.categoria h2{text-align:center}
.nota{font-size:.85rem;color:var(--muto);text-align:center}

/* Fascia workshop */
.fascia .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center;padding-block:calc(var(--curva) + 40px)}
.fascia .testo{display:flex;flex-direction:column;gap:20px;min-width:0}
.fascia h2{color:var(--ingobbio)}
.verbi{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.verbi li{font:400 1.05rem var(--f-titoli);padding:6px 16px;border:1px solid rgba(247,242,234,.3);border-radius:999px;color:var(--ingobbio)}
.fascia .arco{width:min(100%,360px);aspect-ratio:3/4;object-fit:cover;border-radius:999px 999px 6px 6px;justify-self:center;box-shadow:0 0 0 8px rgba(247,242,234,.08),0 30px 50px -24px rgba(0,0,0,.6)}

/* Instagram */
.ig{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ig a{display:block;border-radius:10px;overflow:hidden}
.ig img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .4s}
.ig a:hover img{transform:scale(1.04)}

/* Pagine interne */
.intro .wrap{display:flex;flex-direction:column;gap:20px;padding-bottom:8px}
.intro.con-foto .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.intro.con-foto .testo{display:flex;flex-direction:column;gap:20px;min-width:0}
.intro .arco{width:min(100%,380px);aspect-ratio:3/4;object-fit:cover;border-radius:999px 999px 6px 6px;justify-self:center}
.due,.sezione .due{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.due>*{min-width:0}
.testo-lungo{display:flex;flex-direction:column;gap:18px;max-width:var(--misura)}
.ritratto-vuoto{aspect-ratio:3/4;width:min(100%,400px);border-radius:999px 999px 6px 6px;background:var(--biscotto);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px;text-align:center;justify-self:center}
.ritratto-vuoto img{width:46%;opacity:.55}

/* Il cartellino: l'etichetta legata al pezzo, con il foro per lo spago */
.cartellino{position:relative;background:var(--ingobbio);border:1px solid var(--linea);border-radius:20px;padding:52px clamp(22px,4vw,40px) 32px;box-shadow:0 22px 36px -28px rgba(46,64,49,.55);display:flex;flex-direction:column;gap:20px}
.cartellino::before{content:"";position:absolute;top:18px;left:50%;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:var(--biscotto);box-shadow:inset 0 1px 2px rgba(0,0,0,.25),0 0 0 3px var(--ingobbio),0 0 0 4px var(--linea)}
.cartellino::after{content:"";position:absolute;inset:8px;border:1px dashed var(--linea);border-radius:14px;pointer-events:none}
.cartellino h2{font-size:1.5rem;text-align:center}
.scheda{display:grid;grid-template-columns:max-content 1fr;gap:12px 28px;margin:0}
.scheda dt{font-weight:500}.scheda dd{margin:0;color:var(--muto)}
.cartellino .bottoni{justify-content:center}
.contatti-segno{width:min(80%,340px);justify-self:center;align-self:center}

/* Piede: la firma completa del marchio */
.piede .wrap{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;padding-block:calc(var(--curva) + 48px) 40px}
.firma{display:flex;flex-direction:column;align-items:center;gap:14px;text-decoration:none}
.firma img{width:112px;height:112px}
.firma .nome{font-size:2.3rem}
.dicitura{display:flex;align-items:center;gap:14px;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--chiaro)}
.dicitura::before,.dicitura::after{content:"";width:34px;height:1px;background:currentColor;opacity:.6}
.piede .menu{justify-content:center;color:var(--chiaro)}
.piede .lingue{flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:.82rem}
.piede .lingue a{color:var(--chiaro)}
.piede .lingue .bandiera{width:18px;height:12px}
.piede .lingue a[aria-current=true]{color:var(--ingobbio);text-decoration:underline;text-decoration-color:var(--volpe)}
.piede small{font-size:.8rem;color:var(--chiaro);opacity:.8}
.piede small a{color:inherit}

@media (max-width:860px){
  .apertura .wrap,.fascia .wrap,.due,.sezione .due,.intro.con-foto .wrap{grid-template-columns:1fr}
  .luna-piatto{width:min(84%,340px);order:-1}
  .mensola .pezzo:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:50%}
  .passi{grid-template-columns:1fr;gap:40px}
  .passi .tondo{width:min(60%,200px)}
  .mensola{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fascia .arco{width:min(80%,300px);order:-1}
  .intro .arco,.ritratto-vuoto{width:min(80%,320px)}
  .ig{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:420px){
  .wrap{padding-inline:16px}
  .nome{font-size:1.35rem}.marchio img{width:38px;height:38px}
  .menu{gap:4px 16px;font-size:.92rem}
  .lingue{margin-left:0}
  .ripiano{padding-inline:6px}
  .scheda{grid-template-columns:1fr;gap:2px 0}.scheda dd{margin-bottom:10px}
  .firma .nome{font-size:1.9rem}
}