/* RAKAU – stile del sito pubblico. Avorio caldo, legno, un solo carattere (Jost). */
:root{
  --bg:#F6F2E9; --paper:#ECE5D8; --paper2:#E4DCCD; --ink:#1A1714; --soft:#3E3832; --body2:#4E463D;
  --muted:#6B5F52; --line:#D9D1C3; --walnut:#4A2F1E; --dark:#1F1813; --darkfg:#EFE7DA;
  --darkmuted:#BFB3A2; --gold:#D6B48A; --ok:#3F5A3A;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Jost,Futura,"Century Gothic","Segoe UI",sans-serif;font-size:17px;line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--ink)} a:hover{color:var(--walnut)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:1.5px solid var(--walnut);outline-offset:4px}
.dark a:focus-visible,.dark button:focus-visible{outline-color:var(--gold)}
.wrap{max-width:1360px;margin:0 auto;padding-left:clamp(20px,4vw,56px);padding-right:clamp(20px,4vw,56px)}
.narrow{max-width:900px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* testata */
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;padding-block:26px}
.logo{text-decoration:none;color:var(--ink);font-size:26px;letter-spacing:.38em;padding-block:4px;display:inline-flex;align-items:center;gap:16px}

/* il segno RAKAU come filigrana: colore e trasparenza decisi da chi lo usa */
.con-filigrana{position:relative;overflow:hidden}
.con-filigrana>*:not(.filigrana){position:relative;z-index:1}
.filigrana{position:absolute;z-index:0;pointer-events:none;aspect-ratio:228/448;background:currentColor;
  -webkit-mask:url(/static/img/segno.png) no-repeat center/contain;mask:url(/static/img/segno.png) no-repeat center/contain}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 34px;font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.nav a{text-decoration:none;padding-block:6px;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-color:var(--ink);color:var(--ink)}
.lang{display:flex;gap:10px;color:var(--muted);align-items:center}
.lang>*{padding-block:6px;border-bottom:1px solid transparent}
.lang [aria-current]{color:var(--ink)}

/* tipografia */
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.h-sec{margin:0;font-size:clamp(28px,2.8vw,40px);line-height:1.15;font-weight:400;letter-spacing:.04em;text-transform:uppercase}
.h-big{margin:0;font-size:clamp(34px,4vw,58px);line-height:1.06;font-weight:300;text-wrap:balance}
.h-giant{margin:0;font-size:clamp(56px,9vw,136px);line-height:.92;font-weight:300;letter-spacing:.01em}
.lead{margin:0;font-size:19px;font-weight:300;color:var(--soft)}
.small{font-size:13px;color:var(--muted)}
.link{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;letter-spacing:.16em;text-transform:uppercase;font-size:13px;font-weight:500;align-self:flex-start}
.btn{display:inline-block;align-self:flex-start;text-decoration:none;color:var(--ink);border:1px solid var(--ink);padding:18px 30px;font:inherit;font-size:13px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;background:transparent;cursor:pointer;transition:background-color .4s,color .4s,border-color .4s}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.solid{background:var(--ink);color:var(--bg)}
.btn.solid:hover{background:var(--walnut);border-color:var(--walnut);color:var(--bg)}
.btn.wide{align-self:stretch;text-align:center;padding:21px 28px;font-size:14px}
.dark .btn{color:var(--darkfg);border-color:var(--darkfg)}
.dark .btn:hover{background:var(--darkfg);color:var(--dark)}

/* sezioni */
.sec{padding-block:clamp(80px,9vw,150px)}
.sec.tight{padding-block:clamp(56px,6vw,96px)}
.rule-top{border-top:1px solid var(--line)}
.rules{border-block:1px solid var(--line)}
.split{display:flex;flex-wrap:wrap;gap:48px 80px;align-items:center}
.split>*{min-width:0}
.col-text{flex:1 1 380px;display:flex;flex-direction:column;gap:20px;max-width:540px}
.col-media{flex:1 1 520px;margin:0}
.center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px}
.paper{background:var(--paper)}
.dark{background:var(--dark);color:var(--darkfg)}
.dark .lead{color:#D8CEBF}
.dark .eyebrow{color:var(--gold)}

/* apertura */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:40px 56px;padding-block:clamp(32px,5vw,72px) clamp(56px,7vw,112px)}
.hero-text{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:34px}
.hero h1{margin:0;font-size:clamp(52px,7.2vw,108px);line-height:.98;letter-spacing:.01em;font-weight:300}
.hero h1 span{display:block}
.hero h1 span:first-child{font-weight:500}
.hero-media{flex:1 1 560px;min-width:0;aspect-ratio:507/525;overflow:hidden}
.short-rule{width:56px;height:1px;background:var(--ink)}
/* entrata dell'apertura, come le sezioni che salgono più sotto: le quattro parole una alla volta, la linea che si disegna,
   il testo, poi l'opera che si svela dall'alto. Solo con JavaScript attivo, così senza JS tutto resta visibile. */
.js .hero h1 span,.js .hero .lead,.js .hero .link{animation:appear 1.2s cubic-bezier(.2,.7,.2,1) both}
.js .hero h1 span:nth-child(1){animation-delay:.1s}
.js .hero h1 span:nth-child(2){animation-delay:.22s}
.js .hero h1 span:nth-child(3){animation-delay:.34s}
.js .hero h1 span:nth-child(4){animation-delay:.46s}
.js .hero .short-rule{transform-origin:left;animation:draw 1.2s cubic-bezier(.2,.7,.2,1) .7s both}
.js .hero .lead{animation-delay:.85s}
.js .hero .link{animation-delay:1s}
.js .hero-media{animation:svela 1.8s cubic-bezier(.7,0,.2,1) .2s both}
.js .hero-media .tarsia{animation:avvicina 2.6s cubic-bezier(.2,.7,.2,1) .2s both,breathe 26s ease-in-out 2.8s infinite alternate}
@keyframes svela{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes avvicina{from{transform:scale(1.18)}to{transform:scale(1)}}

/* immagini dalla tarsia */
.tarsia{background:url(/static/img/tarsia.webp) no-repeat 100% 100%/182% auto}
.spalted{background:url(/static/img/tarsia.webp) no-repeat 63% 80%/330% auto}
.band{height:clamp(320px,42vw,620px)}
.breathe{animation:breathe 26s ease-in-out infinite alternate;transform-origin:50% 60%;width:100%;height:100%}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.06)}}

/* venature disegnate (opere senza foto) */
.ta,.tb,.tc{background-image:repeating-linear-gradient(var(--ang),rgba(0,0,0,.07) 0 1px,transparent 1px 3px),repeating-linear-gradient(var(--ang),transparent 0 21px,rgba(0,0,0,.35) 21px 22px),repeating-linear-gradient(var(--ang),var(--c1) 0 22px,var(--c2) 22px 44px,var(--c3) 44px 66px,var(--c4) 66px 88px,var(--c5) 88px 110px)}
.ta{--ang:45deg}.tb{--ang:-45deg}.tc{--ang:90deg}
.w-chiara{--c1:#E2CBA5;--c2:#CFAE80;--c3:#EAD9BC;--c4:#B8915F;--c5:#D8BC92}
.w-calda{--c1:#9A5B33;--c2:#C58B57;--c3:#6E3F24;--c4:#D9A970;--c5:#8A4E2C}
.w-profonda{--c1:#2A1C14;--c2:#4B3020;--c3:#1C130E;--c4:#6A4529;--c5:#3A271A}
.w-contrasto{--c1:#6B3E22;--c2:#D6B48A;--c3:#2B1D15;--c4:#C59A66;--c5:#8C5A35}
.g-chevron{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-spina{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-diamante{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.g-libero{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}

/* foto degli ambienti in home */
.ph{margin:0;overflow:hidden;background:var(--paper);position:relative}
.ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.ph:hover img{transform:scale(1.05)}
.striscia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
/* laboratorio: tre foto alla stessa altezza, larghezze in proporzione al formato di ciascuna */
.lab{display:grid;grid-template-columns:1.33fr .82fr 1.04fr;gap:14px;align-items:start}
.lab-passo{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.lab-passo figcaption{display:flex;gap:12px;align-items:baseline;font-size:15px;font-weight:300;color:var(--soft)}
.lab-n{font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--walnut)}
.tre-spazi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tre-spazi .grande{grid-column:1/-1;aspect-ratio:16/10!important}

.essenze{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:28px}
.essenze li{display:flex;flex-direction:column;gap:12px;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.essenze .sw{aspect-ratio:1;max-width:100%}

.name-giant{font-size:clamp(64px,10vw,150px);line-height:.9;font-weight:300;letter-spacing:.18em;margin-right:-.18em;color:var(--gold)}
/* "L'origine del nome": parola grande, linea dorata, testo. Su schermi stretti si impilano. */
.origine{display:grid;grid-template-columns:auto 1px minmax(0,480px);justify-content:space-between;align-items:center;column-gap:clamp(48px,7vw,120px);row-gap:40px}
.origine-nome{display:flex;flex-direction:column;gap:18px}
.origine-uguale{font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:var(--darkmuted)}
.origine-linea{align-self:stretch;width:1px;background:linear-gradient(to bottom,transparent,rgba(214,180,138,.55) 18%,rgba(214,180,138,.55) 82%,transparent)}
.origine-testo{display:flex;flex-direction:column;gap:20px}
@media (max-width:1060px){
  .origine{grid-template-columns:minmax(0,1fr);justify-content:stretch}
  .origine-linea{width:72px;height:1px;align-self:start;background:rgba(214,180,138,.55)}
  .origine-testo{max-width:560px}
}
.motto{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 48px;text-align:center;font-size:clamp(22px,3vw,42px);font-weight:300;letter-spacing:.12em;text-transform:uppercase}
.quote{margin:0;font-size:clamp(32px,3.8vw,56px);line-height:1.18;font-weight:300;text-wrap:balance}
.closing{margin:0;font-size:24px;line-height:1.45;white-space:pre-line}

.contatti{flex:1 1 380px;margin:0;display:grid;grid-template-columns:max-content 1fr;gap:14px 28px;align-content:start;font-weight:300}
.contatti dt{font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.contatti dd{margin:0}

footer.foot{background:var(--dark);color:var(--darkfg)}
footer.foot .wrap{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding-block:60px 36px}
.foot-logo{font-size:40px;font-weight:300;letter-spacing:.42em;padding-left:.42em}
.totop{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:28px;color:var(--darkmuted);text-decoration:none;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.totop-cerchio{width:56px;height:56px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);transition:background-color .4s,color .4s,transform .6s cubic-bezier(.2,.7,.2,1)}
.totop:hover{color:var(--darkfg)}
.totop:hover .totop-cerchio{background:var(--gold);color:var(--dark);transform:translateY(-4px)}
.foot small{font-size:12px;color:#A89C8B;margin-top:20px}
.foot-link{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;font-size:14px;margin-top:12px}
.foot-link a{color:var(--darkmuted);text-decoration:none;border-bottom:1px solid transparent}
.foot-link a:hover{color:var(--darkfg);border-color:var(--darkfg)}
.foot-legali{font-size:13px;margin-top:4px}
.foot-bottone{font:inherit;background:none;border:0;padding:0;cursor:pointer;color:var(--darkmuted);border-bottom:1px solid transparent}
.foot-bottone:hover{color:var(--darkfg);border-color:var(--darkfg)}

/* salta al contenuto: invisibile finché non lo si raggiunge con la tastiera */
.salta{position:absolute;left:16px;top:-80px;z-index:40;background:var(--ink);color:var(--bg);padding:12px 18px;text-decoration:none;font-size:14px}
.salta:focus{top:12px;color:var(--bg)}
main:focus{outline:none}

/* banner dei cookie: in basso, non blocca la pagina, Accetta e Rifiuta con lo stesso peso */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:30;display:flex;justify-content:center;pointer-events:none}
.cookie-in{pointer-events:auto;max-width:760px;width:100%;background:var(--dark);color:var(--darkfg);padding:22px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 50px rgba(26,23,20,.3)}
.cookie-titolo{margin:0;font-size:15px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.cookie-testo{margin:0;font-size:15px;font-weight:300;line-height:1.6}
.cookie-testo a{color:var(--gold)}
.cookie-scelte{display:flex;flex-direction:column;gap:8px}
.cookie-scelte .check{color:var(--darkfg)}
.cookie-azioni{display:flex;flex-wrap:wrap;gap:8px}
.cookie-azioni .btn{flex:1 1 140px;text-align:center;color:var(--darkfg);border-color:var(--darkfg);padding:14px 18px}
.cookie-azioni .btn:hover{background:var(--darkfg);color:var(--dark)}

/* pagine legali, domande frequenti, pagina dell'opera, pagina non trovata */
.testo-legale{display:flex;flex-direction:column;gap:14px}
.testo-legale h2{margin:26px 0 0;font-size:20px;font-weight:500}
.testo-legale p{margin:0;font-weight:300;color:var(--soft);max-width:68ch}
.testo-legale .aggiornato{font-size:14px;color:var(--muted)}
.avviso-bozza{padding:12px 16px;border:1px dashed var(--muted);font-size:14px;color:var(--muted)!important}
.tabella{overflow-x:auto}
.tabella table{border-collapse:collapse;width:100%;font-size:14px;font-weight:300}
.tabella th,.tabella td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tabella th{font-weight:500}
.faq{display:flex;flex-direction:column;gap:48px}
.faq-griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 72px}
.faq-voce h3{margin:0 0 10px;font-size:20px;font-weight:400;line-height:1.35}
.faq-voce p{margin:0;font-weight:300;color:var(--soft);max-width:60ch}
.briciole{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:13px;letter-spacing:.08em;color:var(--muted);padding-top:8px}
.briciole a{color:var(--muted);text-decoration:none}
.briciole a:hover{color:var(--ink);text-decoration:underline}
.briciole [aria-current]{color:var(--ink)}
.opera-pagina .veil-body{padding-block:24px 96px}
.opera-pagina h1{margin:0;font-size:clamp(40px,4.4vw,64px);line-height:1;font-weight:300;letter-spacing:.04em;text-transform:uppercase}
.non-trovata{min-height:60vh;display:flex;align-items:center}
@media (max-width:860px){.faq-griglia{grid-template-columns:minmax(0,1fr);gap:32px}.cookie{left:8px;right:8px;bottom:8px}}

/* galleria */
.gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:72px 40px;grid-auto-flow:dense}
.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}
.h-tall{height:640px}.h-mid{height:540px}.h-low{height:440px}
.teaser{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:64px 40px;align-items:start}
.teaser>*:nth-child(2){margin-top:clamp(0px,8vw,120px)}
.teaser .wall{aspect-ratio:4/5;height:auto}
.card{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:18px;cursor:pointer;min-width:0;width:100%}
.card:focus-visible{outline:1.5px solid var(--walnut);outline-offset:8px}
.wall{position:relative;overflow:hidden;background:var(--paper);display:flex;align-items:center;justify-content:center;transition:background-color 1.2s ease}
.piece{position:relative;overflow:hidden;box-shadow:0 18px 36px rgba(42,28,20,.22);transition:transform 1.2s cubic-bezier(.2,.7,.2,1),box-shadow 1.2s cubic-bezier(.2,.7,.2,1)}
.grain{position:absolute;inset:0;display:grid;transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.photo{width:100%;height:100%;object-fit:cover;transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.card:hover .wall{background:#E5DCCB}
.card:hover .piece{transform:translateY(-10px);box-shadow:0 40px 70px rgba(42,28,20,.34)}
.card:hover .grain,.card:hover .photo{transform:scale(1.08)}
.card-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.card-name{font-size:20px;font-weight:400;letter-spacing:.12em;text-transform:uppercase}
.card-sub{font-size:15px;font-weight:300;color:var(--body2);margin-top:-8px}
.status{font-size:12px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--muted)}
.status.ok{color:var(--ok)}
.more{display:inline-flex;gap:10px;align-items:center;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;opacity:0;transform:translateX(-8px);transition:opacity .8s ease,transform .8s ease}
.card:hover .more,.card:focus-visible .more{opacity:1;transform:none}
.cell[hidden]{display:none}

.filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-bottom:64px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:13px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;min-height:44px;padding:10px 18px;border:1px solid #C9BFB0;background:transparent;color:var(--ink);transition:background-color .4s,color .4s,border-color .4s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.marquee-box{overflow:hidden;padding-block:36px}
.marquee{display:flex;width:max-content;animation:slide 60s linear infinite;font-size:clamp(28px,4vw,56px);font-weight:300;letter-spacing:.14em;white-space:nowrap;color:var(--walnut)}
.marquee span{padding-right:80px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.line{width:120px;height:1px;background:var(--ink);transform-origin:left;animation:draw 1.6s cubic-bezier(.2,.7,.2,1) .3s both}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* scheda dell'opera */
.veil{position:fixed;inset:0;z-index:20;background:var(--bg);overflow:auto;animation:fade .7s ease both}
.veil[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.veil-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:24px}
.close{font:inherit;display:inline-flex;align-items:center;gap:10px;background:transparent;border:0;cursor:pointer;color:var(--ink);font-size:13px;letter-spacing:.2em;text-transform:uppercase;min-height:44px;padding:8px}
.veil-body{display:flex;flex-wrap:wrap;gap:48px 72px;align-items:center;padding-bottom:80px}
.veil-media{flex:1 1 600px;min-width:0;height:min(78vh,760px);min-height:420px;position:relative;overflow:hidden;background:var(--paper2);display:flex;align-items:center;justify-content:center}
.veil-media .photo{animation:breathe 22s ease-in-out infinite alternate}
.veil-media .piece{animation:breathe 22s ease-in-out infinite alternate}
/* galleria nella scheda */
.veil-col{flex:1 1 600px;min-width:0;display:flex;flex-direction:column;gap:12px}
.veil-col .veil-media{flex:none;width:100%}
.veil-media.con-video{background:#120E0B}
.veil-media video{width:100%;height:100%;object-fit:contain;background:#120E0B}
.veil-media iframe{width:100%;aspect-ratio:16/9;height:auto;max-height:100%;border:0}
.veil-did{margin:0;font-size:14px}
.thumbs{display:flex;flex-wrap:wrap;gap:8px}
.thumb{position:relative;width:72px;height:72px;padding:0;border:1px solid var(--line);background:var(--paper);cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:opacity .3s}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;display:block}
.thumb[aria-current=false]{opacity:.62}
.thumb:hover,.thumb[aria-current=true]{opacity:1}
.thumb[aria-current=true]{outline:1.5px solid var(--ink);outline-offset:2px}
.thumb-video{background:var(--dark)}
.thumb .play{position:absolute;width:30px;height:30px;border-radius:50%;background:rgba(26,23,20,.72);color:#fff;display:flex;align-items:center;justify-content:center}
.mini-arte{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.btn.parete{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.veil-text{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:22px;max-width:520px;animation:appear 1.1s cubic-bezier(.2,.7,.2,1) .25s both}
.veil-text h2{margin:0;font-size:clamp(40px,4.4vw,64px);line-height:1;font-weight:300;letter-spacing:.04em;text-transform:uppercase}
.story{margin:0;font-size:21px;font-weight:300;line-height:1.55;color:var(--soft)}
.facts{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:10px 28px;font-weight:300;border-top:1px solid var(--line);padding-top:20px}
.facts dt{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-top:4px}
.facts dd{margin:0}
.buybox{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line);padding-top:22px}
.price-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.price{font-size:26px;font-weight:300}
.links{display:flex;flex-wrap:wrap;gap:10px 24px}
.links a{font-size:13px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}

/* moduli */
.field{font:inherit;color:var(--ink);padding:12px 0;border:0;border-bottom:1px solid #8A7F72;background:transparent;font-weight:300;width:100%}
.field:focus{border-bottom-color:var(--ink);outline:none}
.lbl{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.fgroup{display:flex;flex-direction:column;gap:4px;flex:1 1 200px;min-width:0}
.frow{display:flex;flex-wrap:wrap;gap:16px 28px}
.step{padding:0;margin-bottom:18px;font-size:13px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
fieldset{border:0;margin:0;padding:0;min-width:0}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;font-weight:300;color:var(--body2)}
.check input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--ink);flex:none}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.opt{font:inherit;cursor:pointer;text-align:left;min-height:68px;padding:12px 14px;border:1px solid #C9BFB0;background:transparent;color:var(--ink);display:flex;flex-direction:column;gap:2px;transition:border-color .2s,background-color .2s,color .2s}
.opt:hover{border-color:var(--ink)}
.opt small{font-size:13px;font-weight:300;color:var(--muted)}
.opt[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.opt[aria-pressed=true] small{color:#CFC4B4}
.opt.sw-opt{padding:6px;min-height:0;gap:10px}
.opt.sw-opt[aria-pressed=true]{background:transparent;color:var(--ink);outline:1.5px solid var(--ink)}
.opt.sw-opt span.sw{display:block;height:56px}
.opt.sw-opt span.t{font-size:14px;padding:0 4px 4px}
.drop{position:relative;border:1px dashed #8A7F72;padding:22px;display:flex;gap:18px;align-items:center;cursor:pointer}
.drop:hover{background:#EFE9DD}
.drop:focus-within{outline:1.5px solid var(--walnut);outline-offset:4px}
.thanks{display:flex;flex-direction:column;gap:20px;background:var(--dark);color:var(--darkfg);padding:clamp(32px,4vw,56px)}
.thanks h2{margin:0;font-size:34px;line-height:1.1;font-weight:300}
.thanks p{margin:0;font-weight:300;color:#D8CEBF}
.err{color:#8A2B1F;font-size:14px;margin:0}
.preview{position:relative;height:520px;background:var(--paper2);overflow:hidden}
.preview .floor{position:absolute;left:0;right:0;bottom:0;height:64px;background:#C8BBA6}
.preview .bench{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);background:#6E5440}
.preview .light{position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,250,240,.55) 0%,rgba(255,250,240,0) 55%)}
.preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.preview .panel{position:absolute;left:50%;transform:translateX(-50%);display:grid;box-shadow:0 24px 48px rgba(42,28,20,.38);transition:width .4s ease,height .4s ease,bottom .4s ease;cursor:grab;touch-action:none}
.preview .panel.presa{cursor:grabbing;transition:none}
.preview .panel:focus-visible{outline:1.5px dashed var(--ink);outline-offset:6px}
.preview .panel.con-ritaglio{display:block;background:none;box-shadow:none}
.preview .panel.con-ritaglio img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(42,28,20,.38));pointer-events:none;user-select:none}
.preview .panel.con-foto{display:block;overflow:hidden;background:var(--paper)}
.preview .panel.con-foto img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.regola{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
.regola input[type=range]{width:220px;max-width:100%;accent-color:var(--ink)}

/* animazioni d'ingresso: solo se JavaScript è attivo, così senza JS tutto resta visibile */
@keyframes appear{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.js .reveal{opacity:0;transform:translateY(48px);transition:opacity 1.2s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

@media (max-width:860px){
  .s4,.s5,.s6,.s7{grid-column:1/-1}
  .h-tall{height:480px}.h-mid,.h-low{height:400px}
  .gal{grid-template-columns:minmax(0,1fr);gap:56px}
  .preview{height:400px}
  .striscia{grid-template-columns:minmax(0,1fr)}
  .lab{grid-template-columns:minmax(0,1fr);gap:36px}
  .striscia .ph{aspect-ratio:4/5!important}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .breathe,.marquee,.line,.veil,.veil-text,.veil-media .photo,.veil-media .piece{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .hero h1 span,.js .hero .lead,.js .hero .link,.js .hero .short-rule,.js .hero-media,.js .hero-media .tarsia{animation:none}
  .piece,.grain,.photo,.more,.ph img{transition:none}
  .more{opacity:1;transform:none}
}