/* Melki · base condivisa (sito madre + anelli)
   Il segno è l'architettura: quattro tratti = le cose del locale, una barra = le persone.
   Colori presi dalle sale della Latteria. Un solo mondo visivo: Carta di giorno, Notte di sera. */

@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/source-serif-4-latin-opsz-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/source-serif-4-latin-ext-opsz-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap;src:url(../fonts/source-serif-4-latin-opsz-italic.woff2) format('woff2-variations')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/figtree-latin-wght-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/figtree-latin-ext-wght-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/rubik-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/rubik-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/rubik-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/geist-mono.woff2) format('woff2')}

:root{
  /* sale */
  --notte:#172A44; --notte-2:#1E3453; --notte-3:#2A4466;
  --inchiostro:#1F3A5F; --barra:#9DB7DA;
  --carta:#F6F2EA; --carta-2:#EEE7DB; --carta-3:#FBF8F2;
  --cognac:#A0532F; --cognac-2:#8A4524; --candela:#D9B464;
  --ink:#1C1A17; --nero:#1C1A17; --nero-2:#26231F; --ink-2:#4B463F; --ink-3:#6E675D;
  --line:rgba(28,26,23,.12); --line-2:rgba(28,26,23,.2);
  --on-dark:#F6F2EA; --on-dark-2:rgba(246,242,234,.72); --on-dark-3:rgba(246,242,234,.5);
  --line-dark:rgba(246,242,234,.14);
  /* anelli: scuro · chiaro */
  --r-menu:#A0532F; --r-menu-l:#E9A27C;
  --r-log:#4A6B45;  --r-log-l:#9DBE8F;
  --r-stock:#86621F; --r-stock-l:#D9B464;
  --r-tally:#7E3A48; --r-tally-l:#D99AA6;
  --r-hands:#1F3A5F; --r-hands-l:#9DB7DA;
  /* tipografia */
  --serif:'Source Serif 4','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --sans:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --prod:'Rubik','Figtree',ui-sans-serif,system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --d1:clamp(42px,5.4vw,84px); --d2:clamp(32px,3.6vw,54px); --d3:clamp(24px,2.2vw,32px); --d4:clamp(19px,1.45vw,22px);
  --t-lg:clamp(18px,1.35vw,20px); --t-md:17px; --t-sm:15px; --t-xs:13px;
  /* ritmo */
  --gut:max(22px,5vw); --wrap:1200px; --sec:clamp(104px,13vw,200px);
  --r-s:10px; --r-m:16px; --r-l:24px;
  --ease:cubic-bezier(.22,.7,.2,1); --hand:cubic-bezier(.55,.08,.32,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--carta);color:var(--ink);font-family:var(--sans);font-size:var(--t-md);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--barra);color:var(--notte)}
:focus-visible{outline:2px solid var(--cognac);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible{outline-color:var(--candela)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--notte);color:var(--carta);padding:10px 14px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.sec{padding-block:var(--sec)}
.on-dark{background:var(--notte);color:var(--on-dark)}

/* tipografia */
.d1,.d2,.d3{font-family:var(--serif);font-weight:340;letter-spacing:-.022em;line-height:1.02;margin:0;text-wrap:balance;font-optical-sizing:auto}
.d1{font-size:var(--d1);letter-spacing:-.03em;line-height:.98}
.d2{font-size:var(--d2);line-height:1.04}
.d3{font-size:var(--d3);line-height:1.12;letter-spacing:-.015em}
.d4{font-family:var(--sans);font-weight:600;font-size:var(--d4);line-height:1.25;letter-spacing:-.01em;margin:0}
.lead{font-size:var(--t-lg);line-height:1.55;color:var(--ink-2);max-width:58ch;margin:0;text-wrap:pretty}
.on-dark .lead,.on-nero .lead{color:var(--on-dark-2)}
.kick{font-family:var(--sans);font-weight:500;font-size:var(--t-sm);color:var(--inchiostro);margin:0 0 22px;display:flex;align-items:center;gap:10px}
.on-dark .kick{color:var(--barra)}
.candela{color:var(--candela)}
.muted{color:var(--ink-3)}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;font-variant-numeric:tabular-nums}
p{margin:0}
.prose p+p{margin-top:1em}

/* nome di prodotto: melki/menu · solo Rubik, slash nel colore dell'anello */
.pn{font-family:var(--prod);font-weight:500;letter-spacing:-.01em;white-space:nowrap}
.pn i{font-style:normal;color:var(--slash,var(--r-menu));font-weight:400;margin-inline:.02em}
.on-dark .pn i{color:var(--slash-l,var(--r-menu-l))}
.pn[data-r=log]{--slash:var(--r-log);--slash-l:var(--r-log-l)}
.pn[data-r=stock]{--slash:var(--r-stock);--slash-l:var(--r-stock-l)}
.pn[data-r=tally]{--slash:var(--r-tally);--slash-l:var(--r-tally-l)}
.pn[data-r=hands]{--slash:var(--r-hands);--slash-l:var(--r-hands-l)}

/* bottoni */
.btn{--bg:var(--cognac);--fg:var(--carta);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;background:var(--bg);color:var(--fg);border:1px solid transparent;text-decoration:none;font-weight:600;font-size:15.5px;letter-spacing:.005em;cursor:pointer;transition:background .25s var(--ease),color .25s,border-color .25s,transform .25s var(--ease)}
.btn:hover{--bg:var(--cognac-2)}
.btn:active{transform:translateY(1px)}
.btn.ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{--bg:rgba(28,26,23,.05)}
.on-dark .btn.ghost{--fg:var(--on-dark);border-color:rgba(246,242,234,.28)}
.on-dark .btn.ghost:hover{--bg:rgba(246,242,234,.08)}
.btn.light{--bg:var(--carta);--fg:var(--notte)}
.btn.light:hover{--bg:#fff}
.btn .ar{width:14px;height:14px;transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;font-size:15.5px}
.link .ar{width:13px;height:13px;transition:transform .3s var(--ease)}
.link:hover .ar{transform:translateX(3px)}

/* il segno · viewBox 0 0 60 60, pathLength=1 */
.sg{overflow:visible}
.sg path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:4.8}
.sg .t{stroke:var(--sg-t,var(--ink))}
.sg .b{stroke:var(--sg-b,var(--inchiostro))}
.on-dark .sg{--sg-t:var(--carta);--sg-b:var(--barra)}
/* scrittura: un tratto ogni ~0,4 s, da sinistra a destra, poi la barra */
.sg.write path{stroke-dasharray:1 1;stroke-dashoffset:1}
.sg.write path{opacity:0}
.sg.write.go path{animation:sg-w .42s var(--hand) both;animation-delay:calc(var(--k,0) * .34s + var(--d0,0s))}
@keyframes sg-w{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}

/* logo A (firma) e logo D (prodotto) */
.logo-a{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink)}
.logo-a svg{height:30px;width:auto}
.logo-a .lt{stroke:currentColor}
.logo-a .lb{stroke:var(--inchiostro)}
.on-dark .logo-a,.tone-dark .logo-a{color:var(--carta)}
.on-dark .logo-a .lb,.tone-dark .logo-a .lb{stroke:var(--barra)}

/* chip di stato degli anelli */
.stp{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;padding:5px 11px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.stp.live{border-color:transparent;background:rgba(74,107,69,.12);color:var(--r-log)}
.stp.live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.on-dark .stp{border-color:var(--line-dark);color:var(--on-dark-2)}
.on-dark .stp.live{background:rgba(157,190,143,.14);color:var(--r-log-l)}

/* entrata quieta: visibile a riposo, si assesta solo se lo script è attivo */
.js .rise{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--rd,0s)}
.js .rise.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sg.write path{opacity:1}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .sg.write path{stroke-dashoffset:0}
  .js .rise{opacity:1;transform:none}
}

/* transizione tra le pagine: il segno si riempie come acqua che scende.
   Si esce: i quattro tratti si riempiono uno dopo l'altro, da sinistra a destra (a cascata).
   Si entra: la barra si riempie e chiude il conteggio, poi la pagina appare. */
.pt{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--notte);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s var(--ease),visibility 0s linear .5s}
[data-site=menu] .pt{background:var(--nero)}
.pt-leave .pt,.pt-arrive .pt,.curtain .pt{opacity:1;visibility:visible;transition:opacity .32s var(--ease)}
.lq{width:92px;height:92px;overflow:visible;--lq-t:var(--carta);--lq-b:var(--barra)}
[data-site=menu] .lq{--lq-t:var(--carta);--lq-b:var(--barra);--lq-1:var(--r-menu-l)}
.lq path{fill:none;stroke-linecap:round;stroke-width:4.8}
.lq mask path{fill:#fff;stroke:none}
.lq-ghost path{stroke:var(--lq-t);opacity:.14}
.lq-ghost .b{stroke:var(--lq-b);opacity:.18}
.lq-fill .t{stroke:var(--lq-t)}
.lq-fill .t:first-child{stroke:var(--lq-1,var(--lq-t))}
.lq-fill .b{stroke:var(--lq-b)}
/* il livello dell'acqua: un fronte ondulato che scende lungo ogni tratto */
.lq-y{transform:translateY(0)}
.lq-x{transform:translateX(0)}
.lq-w{animation:lq-wave .9s linear infinite}
.lq-wx{animation:lq-wavey .9s linear infinite}
@keyframes lq-wave{from{transform:translateX(0)}to{transform:translateX(15px)}}
@keyframes lq-wavey{from{transform:translateY(0)}to{transform:translateY(15px)}}
@keyframes lq-fill{from{transform:translateY(0)}to{transform:translateY(64px)}}
@keyframes lq-fillx{from{transform:translateX(0)}to{transform:translateX(64px)}}
.lq-drop circle{fill:var(--lq-t);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2)}
.lq-drop circle:first-child{fill:var(--lq-1,var(--lq-t))}
@keyframes lq-drop{0%{opacity:0;transform:scale(.2)}35%{opacity:.5}100%{opacity:0;transform:scale(1.9)}}
/* uscita e prima visita: cascata dei quattro tratti */
.pt-leave .lq-y,.curtain .lq-y{animation:lq-fill .5s cubic-bezier(.5,.05,.4,1) both;animation-delay:calc(var(--k) * .13s)}
.pt-leave .lq-drop circle,.curtain .lq-drop circle{animation:lq-drop .6s ease-out both;animation-delay:calc(var(--k) * .13s + .42s)}
/* entrata: i tratti sono già pieni, la barra si riempie */
.pt-arrive .lq-y{transform:translateY(64px)}
.pt-bar .lq-x{animation:lq-fillx .46s cubic-bezier(.5,.05,.4,1) both}
.curtain .lq-x{animation:lq-fillx .5s cubic-bezier(.5,.05,.4,1) .78s both}
.pt-leave main,.pt-leave .ftr-wrap{opacity:.4;transform:translateY(-6px);transition:opacity .36s var(--ease),transform .4s var(--ease)}

/* articoli: racconti e journal */
.art{padding-block:clamp(150px,18vw,220px) var(--sec)}
.art-in{max-width:720px}
.art-back{display:inline-flex;gap:8px;font-size:14.5px;text-decoration:none;color:var(--ink-3);margin-bottom:40px}
.art-back:hover{color:var(--ink)}
.art-meta{font-size:14px;color:var(--ink-3);margin-bottom:22px}
.art h1{max-width:16ch}
.art-lead{margin-top:28px;font-family:var(--serif);font-weight:340;font-size:clamp(21px,1.9vw,26px);line-height:1.45;color:var(--ink-2);max-width:34ch}
.art-body{margin-top:64px;font-size:18.5px;line-height:1.72;color:var(--ink-2)}
.art-body>*+*{margin-top:1.15em}
.art-body h2{font-family:var(--serif);font-weight:400;font-size:clamp(25px,2.2vw,30px);line-height:1.2;color:var(--ink);margin-top:2.2em;letter-spacing:-.01em}
.art-body blockquote{margin:2em 0;padding:0;font-family:var(--serif);font-size:clamp(22px,2vw,28px);line-height:1.4;color:var(--ink)}
.art-body strong{color:var(--ink);font-weight:600}
.art-fig{margin:56px 0}
.art-fig img{width:100%;border-radius:10px}
.art-fig figcaption{font-size:13.5px;color:var(--ink-3);margin-top:12px}
.art-next{margin-top:96px;padding-top:28px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.art-next span{font-size:14px;color:var(--ink-3)}
.art-next a{font-family:var(--serif);font-size:24px;text-decoration:none}
.art-next a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
/* indice di racconti e journal */
.idx{padding-block:clamp(150px,18vw,220px) var(--sec)}
.idx-head{max-width:760px;margin-bottom:clamp(64px,8vw,104px)}
.idx-head .lead{margin-top:24px}
.posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.posts a{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr) auto;gap:12px 40px;align-items:baseline;padding:34px 0;border-bottom:1px solid var(--line-2);text-decoration:none;transition:background .3s}
.posts .p-n{font-size:14px;color:var(--ink-3)}
.posts h2{font-family:var(--serif);font-weight:340;font-size:var(--d3);line-height:1.15;margin:0;letter-spacing:-.015em}
.posts p{grid-column:2;color:var(--ink-2);font-size:16.5px;max-width:52ch}
.posts .p-go{grid-column:3;grid-row:1;font-size:14.5px;font-weight:500;color:var(--ink-3);transition:color .2s,transform .3s var(--ease)}
.posts a:hover .p-go{color:var(--ink);transform:translateX(3px)}
@media (max-width:700px){
  .posts a{grid-template-columns:1fr;gap:8px}
  .posts p,.posts .p-go{grid-column:1;grid-row:auto}
}
@media (prefers-reduced-motion:reduce){.pt{display:none}}

/* menu mobile condiviso */
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:transparent;cursor:pointer;position:relative;color:inherit}
.tone-dark .burger{border-color:rgba(246,242,234,.26)}
.burger span{position:absolute;left:14px;right:14px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease)}
.burger span:first-child{top:18px}.burger span:last-child{top:25px}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.sheet{background:var(--carta);color:var(--ink);border-top:1px solid var(--line);height:calc(100dvh - 74px);overflow:auto}
html.lock{overflow:hidden}
.sheet-in{display:flex;flex-direction:column;padding-block:8px 28px}
.sheet-in a{font-family:var(--serif);font-size:28px;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--line)}
.sheet-in a.btn{font-family:var(--sans);font-size:15.5px;border:0;margin-top:24px;align-self:flex-start;padding:0 22px}
@media (max-width:760px){.nav{display:none!important}.burger{display:block}}