/* MOMO INK — lo stile del sito.
   Elegante, essenziale, delicato, preciso (brief di Erik, 20/10/2026; docs/brand.md).
   Composizione a strati: foto con cornice spostata, titoli che la scavalcano, la montagna
   fine line che si disegna da sola; poi sezioni che compaiono mentre si scorre.
   Chiaro «Avorio e inchiostro» e scuro «Notte in studio»: segue il telefono, il tasto cambia. */
:root{
  --bg:#F6F1EA; --surface:#FBF8F3; --foto:#E4D9CB; --ink:#1E1B18; --muted:#5E554C; --line:#D8CDBF;
  --accent:#8A5D3A; --onAccent:#FFFFFF; --ombra:rgba(60,40,24,.28); --vetro:rgba(246,241,234,.82);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#171513; --surface:#211E1A; --foto:#2A2621; --ink:#EFE7DC; --muted:#B2A698; --line:#3A342D;
  --accent:#D4A373; --onAccent:#171513; --ombra:rgba(0,0,0,.6); --vetro:rgba(23,21,19,.78); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#171513; --surface:#211E1A; --foto:#2A2621; --ink:#EFE7DC; --muted:#B2A698; --line:#3A342D;
  --accent:#D4A373; --onAccent:#171513; --ombra:rgba(0,0,0,.6); --vetro:rgba(23,21,19,.78); color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--vetro)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
h1,h2,h3{text-wrap:balance;font-family:var(--serif);font-weight:400;margin:0}
p{margin:0}
.serif{font-family:var(--serif)}
.gutter{padding-left:max(64px,env(safe-area-inset-left,0px));padding-right:max(64px,env(safe-area-inset-right,0px))}
.etichetta{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.piano{color:var(--muted)}
.ombra{box-shadow:0 40px 80px -40px var(--ombra),0 12px 24px -16px var(--ombra)}
.foto{background:var(--foto);position:relative;max-width:100%}
.foto>span{position:absolute;left:14px;bottom:12px;font-size:11px;letter-spacing:.06em;color:var(--muted)}
.foto>img{width:100%;height:100%;object-fit:cover}
.tasto{min-height:52px;padding:0 28px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--onAccent);font-size:14px;font-weight:400;letter-spacing:.08em;border:0;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}
.tasto:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px var(--ombra)}
.tasto.piccolo{min-height:44px;padding:0 20px;font-size:13px}
.sottolinea{position:relative;padding-bottom:4px;display:inline-block}
.sottolinea::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;transform:scaleX(.35);transition:transform .5s ease}
.sottolinea:hover::after,.sottolinea[aria-current="page"]::after{transform:scaleX(1)}
.scheda{transition:transform .5s ease}
.scheda:hover{transform:translateY(-6px)}
.azioni{display:flex;align-items:center;gap:26px;flex-wrap:wrap}

/* testata */
.testata{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;min-height:74px;display:flex;align-items:center;gap:32px;background:var(--vetro);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.marchio{font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:.32em;flex:1;white-space:nowrap}
.menu{display:flex;gap:28px;font-size:13px;letter-spacing:.08em}
.lingua{font-size:12px;letter-spacing:.12em;color:var(--muted)}
.icona{width:44px;height:44px;border:0;background:none;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.apri-menu{display:none}

/* eroe */
.eroe{position:relative;padding-block:56px 96px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
.eroe-testo{grid-column:1/span 6;position:relative;z-index:3;display:flex;flex-direction:column;gap:24px;min-width:0}
.eroe-titolo{margin:0 -120px 0 0;font-weight:300;font-size:clamp(52px,7.2vw,96px);line-height:.95;letter-spacing:-.02em}
.eroe-testo p{max-width:430px;font-size:17px;line-height:1.75;color:var(--muted)}
.eroe-foto{grid-column:7/span 6;position:relative;height:min(78vh,720px);z-index:1}
.cornice{position:absolute;inset:0;border:1px solid var(--line);transform:translate(18px,18px);z-index:-1}
.montagna{position:absolute;left:-46%;top:-3%;width:120%;aspect-ratio:900/274;max-width:none;z-index:4;opacity:.95;cursor:pointer}
.galleggia{position:absolute;left:-12%;bottom:7%;z-index:5;width:280px;max-width:80%;padding:20px 22px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px;animation:galleggia 7s ease-in-out infinite}
@keyframes galleggia{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes entra{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.entra{animation:entra 1.2s cubic-bezier(.2,.7,.2,1) both}.entra2{animation-delay:.25s}.entra3{animation-delay:.5s}

/* titolo di una pagina interna */
.capo{padding-block:72px 56px;display:flex;flex-direction:column;gap:18px;max-width:1100px}
.capo h1{font-weight:300;font-size:clamp(46px,6vw,80px);line-height:1;letter-spacing:-.015em}
.capo p{max-width:60ch;font-size:17px;line-height:1.75;color:var(--muted)}

/* sezioni */
.sezione{padding-block:0 120px}
.frase{padding-block:40px 120px;max-width:1160px}
.frase p{font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.6vw,46px);line-height:1.2}
.riga{height:1px;background:var(--line);margin-bottom:48px}
.titoletto{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:28px}
.titoletto h2{font-size:40px}
.titoletto span{font-size:13px;color:var(--muted)}
.novita{padding-block:0 120px;padding-left:max(64px,env(safe-area-inset-left,0px));overflow:hidden}
.fila{display:flex;gap:24px;width:max-content}
.fila article{width:340px;max-width:78vw;padding:28px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.fila .serif{font-size:28px;line-height:1.15}
.colonne{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.colonne>div{display:flex;flex-direction:column;gap:24px;min-width:0}
.studio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px;align-items:start}
.studio-foto{position:sticky;top:calc(110px + env(safe-area-inset-top,0px));height:72vh}
.studio-testi{display:flex;flex-direction:column;gap:120px;padding-block:40px;min-width:0}
.studio-testi p{font-size:17px;line-height:1.8;color:var(--muted);max-width:60ch}
.citazione p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:30px;line-height:1.35}
.citazione small{display:block;margin-top:14px;font-size:12px;letter-spacing:.06em;color:var(--muted)}
.prenota{padding-block:120px 140px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px;border-top:1px solid var(--line)}
.prenota h2{font-weight:300;font-size:clamp(44px,6vw,72px);line-height:1}
.prenota .azioni{justify-content:center}

/* i lavori: filtri e galleria */
.filtri{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.filtri button{min-height:40px;padding:0 18px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:13px;letter-spacing:.06em;cursor:pointer}
.filtri button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.galleria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.galleria .foto{aspect-ratio:4/5}
.galleria .foto:nth-child(4n+2){aspect-ratio:4/6}

/* passi (un vero ordine: come si arriva al tatuaggio) */
.passi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;counter-reset:passo}
.passi li{list-style:none;border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.passi li::before{counter-increment:passo;content:counter(passo,decimal-leading-zero);font-family:var(--serif);font-size:20px;color:var(--accent)}
.passi h3{font-size:26px}
.passi p{color:var(--muted)}

/* domande frequenti */
.domande{max-width:820px;display:flex;flex-direction:column}
.domande details{border-top:1px solid var(--line);padding-block:6px}
.domande details:last-child{border-bottom:1px solid var(--line)}
.domande summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;font-family:var(--serif);font-size:24px}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{content:"+";font-family:var(--sans);font-size:20px;color:var(--accent);transition:transform .3s ease}
.domande details[open] summary::after{transform:rotate(45deg)}
.domande details p{padding:0 0 22px;color:var(--muted);max-width:62ch}

/* contatti */
.contatti{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:start}
.voce{display:flex;flex-direction:column;gap:6px;padding-block:18px;border-top:1px solid var(--line)}
.voce .etichetta{font-size:10.5px}
.selezionabile{user-select:all}
.giorni{display:grid;grid-template-columns:auto 1fr;gap:4px 24px;margin:6px 0 8px;font-size:17px}
.giorni dt{font-family:var(--serif);font-size:20px}
.giorni dd{margin:0;align-self:center;color:var(--muted);letter-spacing:.04em}
.giorni dd.chiuso{color:var(--muted);opacity:.6;font-style:italic}

.piede{padding-block:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;letter-spacing:.08em;color:var(--muted);border-top:1px solid var(--line)}

/* Mentre si scorre: compare, si svela, sale a velocità diverse */
@supports (animation-timeline: view()){
  @keyframes appare{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
  @keyframes svela{from{clip-path:inset(22% 22% 22% 22%);transform:scale(1.12)}to{clip-path:inset(0);transform:scale(1)}}
  @keyframes sale{from{transform:translateY(var(--dal))}to{transform:translateY(var(--al))}}
  @keyframes scorre{from{transform:translateX(12%)}to{transform:translateX(-26%)}}
  @keyframes cresce{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .appare{animation:appare linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  .svela{animation:svela linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  .sale{--dal:80px;--al:-80px;animation:sale linear both;animation-timeline:view()}
  .sale.veloce{--dal:160px;--al:-160px}
  .scorre{animation:scorre linear both;animation-timeline:view()}
  .riga{transform-origin:left;animation:cresce linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
}

@media (max-width:960px){
  .galleria{grid-template-columns:repeat(2,minmax(0,1fr))}
  .passi{grid-template-columns:1fr}
}
@media (max-width:820px){
  .gutter{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  .novita{padding-left:max(20px,env(safe-area-inset-left,0px))}
  .testata{gap:12px}
  .apri-menu{display:inline-flex}
  .menu{display:none;position:fixed;inset:calc(74px + env(safe-area-inset-top,0px)) 0 auto 0;flex-direction:column;gap:0;padding:8px max(20px,env(safe-area-inset-left,0px)) 24px;background:var(--bg);border-bottom:1px solid var(--line);font-size:18px}
  .menu a{min-height:52px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
  .menu.aperto{display:flex}
  .testata .tasto.piccolo{display:none}
  .eroe{grid-template-columns:1fr;padding-block:20px 72px}
  .eroe-foto{grid-column:1;order:-1;height:60vh}
  .eroe-testo{grid-column:1}
  .eroe-titolo{margin:-96px 0 0}
  .montagna{left:-4%;top:2%;width:108%}
  .galleggia{left:auto;right:-4px;bottom:-28px;width:240px}
  .colonne{grid-template-columns:1fr}
  .colonne .veloce{margin-top:0!important}
  .studio,.contatti{grid-template-columns:1fr;gap:40px}
  .studio-foto{position:relative;top:0;height:340px}
  .studio-testi{gap:56px;padding-block:0}
  .frase{padding-block:24px 80px}
  .capo{padding-block:48px 40px}
  .galleria{grid-template-columns:1fr 1fr;gap:10px}
}

/* ── TELEFONO (21/10/2026) ─────────────────────────────────────────────────────
   Erik: «sul telefono vedi tutto accavallato», «la montagna non si vede»; scelta la
   bozza A (prima le parole, poi la foto).
   · In alto, uno sotto l'altro: parole e tasti → la montagna sul fondo chiaro,
     appoggiata sul bordo della foto → la foto, con le Novità sul bordo basso.
     Prima il titolo scavalcava la foto e copriva etichetta e Novità, e la montagna
     era disegnata sulla foto scura, dove non si vede.
   · Niente foto che salgono a velocità diverse: in una colonna sola si accavallano.
   · Le Novità si scorrono col dito: prima la terza restava sempre fuori schermo.
   · I lavori quadrati e interi, come su Instagram: le altezze del PC (scritte nella
     pagina) tagliavano il tatuaggio («le foto dei lavori non sono centrate»). */
@media (max-width:820px){
  .eroe{row-gap:56px;padding-block:28px 96px}
  .eroe-titolo{margin:0;font-size:clamp(44px,13vw,58px)}
  .eroe-testo .azioni{gap:18px 26px}
  .eroe-testo .tasto{flex:1 1 100%}
  .eroe-foto{order:0;height:auto;aspect-ratio:2/3;max-height:74vh;margin-top:calc(33% - 44px)}
  .montagna{top:auto;bottom:calc(100% - 18px);left:-4%;width:108%}
  .galleggia{right:-6px;bottom:-32px;width:250px}
  .sale,.sale.veloce{animation:none}
  .fila{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px 56px 0;scrollbar-width:none;animation:none}
  .fila::-webkit-scrollbar{display:none}
  .fila article{flex:0 0 82%;max-width:none;scroll-snap-align:start}
  .colonne .foto{height:auto!important;aspect-ratio:1/1}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}