/* Palette: f1edea (sfondo) · c299e7 (lilla) · 9174b7 (viola) · 000000 */
:root{--bg:#f1edea;--lilac:#c299e7;--purple:#9174b7;--ink:#000;--chrome:11vw}

@font-face{font-family:MadeAvenue;src:url(fonts/MADEAvenue.otf) format("opentype");font-display:swap}
@font-face{font-family:WTGaramono;src:url(fonts/WTGaramono-Regular.otf) format("opentype");font-display:swap}
@font-face{font-family:WTGaramono;font-style:italic;src:url(fonts/WTGaramono-Italic.otf) format("opentype");font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:WTGaramono,Georgia,serif;
  height:100dvh;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr auto;
}
a{color:inherit}
img{display:block}

/* niente selezione né trascinamento, tranne la scritta del copyright (.copy) e il campo password */
html{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
body{-webkit-user-select:none;user-select:none}
img,a{-webkit-user-drag:none;user-drag:none}
.copy,#pw{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.lk{font-style:italic;color:var(--purple);text-decoration:none}
.lk:hover{text-decoration:underline}

/* ---------- chrome comune ---------- */
#head{display:flex;align-items:center;gap:1.5vw;padding:1.6vw 2vw 0}
#logo img{height:clamp(22px,3vw,42px);width:auto}
#fregio{flex:1;min-width:0}
#fregio img{width:100%;height:auto}
#shop-top{display:none;margin-left:auto;font-size:clamp(12px,1.3vw,18px)}
body[data-view="login"] #fregio{display:none}
body[data-view="login"] #shop-top{display:block}

footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;padding:0 2vw 1.6vw;position:relative;z-index:6}
.partners{justify-self:start;display:flex;align-items:flex-end;gap:.9em}
.partners a{display:block;line-height:0}
.partners img{height:clamp(18px,2.4vw,32px);width:auto}
.copy{font-family:MadeAvenue,sans-serif;font-size:clamp(8px,.7vw,11px);color:#DFD2CD;text-align:center;white-space:nowrap}
.links{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:.15em;font-size:clamp(10px,1vw,14px)}

main{position:relative;min-height:0;overflow:hidden}
main>section{display:none;height:100%}

.c{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2vh;padding:0 4vw}

/* ---------- login ---------- */
#login .bg{max-height:56%;max-width:86%;width:auto;height:auto;min-height:0;object-fit:contain}
.lbl{font-family:MadeAvenue,sans-serif;color:var(--lilac);font-size:clamp(11px,1.3vw,17px);letter-spacing:.04em;text-align:center}
#pw{
  width:min(72vw,430px);height:2.1em;border:1px solid var(--ink);background:#fff;
  text-align:center;font:16px WTGaramono,serif;border-radius:0;outline:none;
}
#pw:focus{border-color:var(--purple);box-shadow:0 0 0 2px var(--lilac)}
#login .fr{width:min(72vw,430px);height:auto}

/* ---------- menu ---------- */
/* --pw = larghezza della foto (impostata da script.js): tutte le misure del menu ne derivano,
   con le proporzioni misurate sul mockup */
#menu{--pw:30vw}
#menu .bg{max-height:56%;max-width:88%;width:auto;height:auto;min-height:0;object-fit:contain}
.items{width:var(--pw);margin-top:calc(var(--pw) * .06);display:grid;grid-template-columns:auto auto;
  justify-content:space-between;align-items:center;row-gap:calc(var(--pw) * .095)}
.items a{position:relative;display:block}
.items a:nth-child(odd){justify-self:start}
.items a:nth-child(even){justify-self:end}
.items a[data-k="ascolta"]{width:calc(var(--pw) * .38)}
.items a[data-k="immagini"]{width:calc(var(--pw) * .378)}
.items a[data-k="lettera"]{width:calc(var(--pw) * .389)}
.items a[data-k="shop"]{width:calc(var(--pw) * .189)}
.items a>img:first-child{display:block;width:100%;height:auto}
.items .h{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0}
.items a:hover .h,.items a:focus-visible .h{opacity:1}
.items a:hover>img:first-child,.items a:focus-visible>img:first-child{opacity:0}
.hand{position:absolute;top:50%;transform:translateY(-50%);width:calc(var(--pw) * .073);height:auto;opacity:0;pointer-events:none}
.hl{right:100%;margin-right:calc(var(--pw) * .034)}
.hr{left:100%;margin-left:calc(var(--pw) * .034)}
.items a:hover .hand,.items a:focus-visible .hand{opacity:1}

/* ---------- immagini ---------- */
#immagini{position:relative}
/* metà sinistra su desktop; le figure sono posizionate da script.js lungo la spada */
#immagini .w{position:absolute;left:3vw;top:3.5vh;bottom:3.5vh;width:calc(50% - 3vw)}
#immagini .sw{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.fig{position:absolute;text-decoration:none;white-space:nowrap;font-size:clamp(11px,.95vw,15px);line-height:1}
.fig:hover,.fig.on{color:var(--purple)}

/* contenuto aperto: metà destra, con cornice bianca */
#viewer{position:absolute;z-index:5;display:none;top:0;bottom:0;left:50%;right:0;align-items:center;justify-content:center}
#frame{--xh:clamp(16px,1.6vw,24px);position:relative;background:#fff;border:1px solid var(--ink);padding:calc(var(--xh) + 11px) 6px 6px;line-height:0}
#media{display:flex;line-height:normal}
#media img,#media video{display:block;width:auto;height:auto;max-width:calc(50vw - 9vw);max-height:calc(100dvh - var(--chrome) - 80px)}
#close{position:absolute;top:5px;right:6px;z-index:2;line-height:0}
#close img{height:var(--xh);width:auto}

/* ---------- lettera ---------- */
#lettera{position:relative;overflow-y:auto;overflow-x:hidden}
#lettera .sw{position:fixed;left:0;top:50%;transform:translateY(-50%);width:100%;max-height:30vh;object-fit:contain;pointer-events:none;z-index:0}
.pgs{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:2vw;width:80vw;max-width:3200px;margin:1vw auto 3vw}
.pgs img{width:100%;height:auto}

/* ---------- ascolta ---------- */
#ascolta{overflow-y:auto;overflow-x:hidden}
#ascolta .g{
  min-height:100%;padding:0 4vw;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:4vw;
}
.info{text-align:center;justify-self:center}
.t1{font-size:clamp(17px,2.2vw,32px)}
.t2{font-family:MadeAvenue,sans-serif;font-size:clamp(10px,1.1vw,16px);margin:.5em 0 .8em;letter-spacing:.04em}
.info .lk{font-size:clamp(13px,1.35vw,20px)}
.cover{width:min(36vw,62vh)}
.cv{width:100%;height:auto}
.bar{position:relative;height:20px;margin-top:1.2em;cursor:pointer;touch-action:none}
.bar img{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}
.b1{left:0;height:14px;width:auto}
.b2{left:14px;width:calc(100% - 14px);height:auto;max-height:6px}
.b4{left:7px;height:18px;width:auto;transform:translate(-50%,-50%)!important}
.tl{font-size:clamp(14px,1.6vw,24px);line-height:1.9;justify-self:start}
.tl a{display:block;text-decoration:none;white-space:nowrap}
.tl a.on{color:var(--purple)}

/* ---------- mobile ---------- */
@media (max-width:700px){
  #head{padding:4vw 4vw 0;gap:3vw}
  #logo img{height:24px}
  footer{padding:0 4vw 4vw}
  .links{font-size:10px}
  .partners img{height:20px}
  footer{grid-template-columns:1fr 1fr}
  .copy{grid-column:1 / -1;grid-row:2;margin-top:3vw;font-size:8px}
  .items{gap:1.2em 0}

  :root{--chrome:118px}
  #immagini .w{left:0;width:100%;top:2.5vh;bottom:2.5vh}
  .fig{font-size:12px}
  #viewer{left:0}
  #media img,#media video{max-width:calc(100vw - 8vw - 14px)}

  .pgs{grid-template-columns:1fr;width:90vw;gap:4vw;margin-top:3vw}

  #ascolta .g{grid-template-columns:minmax(0,1fr);gap:3vh;padding:2vh 5vw}
  .cover{width:min(78vw,45vh);justify-self:center;order:1}
  .info{order:2}
  .tl{order:3;width:100%;columns:2;column-gap:4vw;font-size:min(14px,3.2vw);line-height:1.8;justify-self:stretch}
  .tl a{white-space:normal;break-inside:avoid}
  .t1{font-size:20px}
  .t2{font-size:11px}
  .info .lk{font-size:14px}
}