/* ==================================================================
   IL GUSCIO — il panino di casa

   PERCHÉ  la casa deve essere riconoscibile da qualsiasi porta si
           entri: stessa foto sopra, stesso filo d'oro, stesso piede.
           Nel vecchio sito questo c'era e funzionava; qui torna, ma
           scritto una volta sola invece che copiato in ogni pagina.

   COME    tre fasce. Sopra la foto tagliata ad ARCO, sotto la foto
           tagliata in DIAGONALE, e in mezzo l'unica cosa che scorre.
           Sul taglio corre un filo d'oro, e ogni tanto — raramente —
           ci passa sopra un lampo di luce.
           Il lampo è fatto con una MASCHERA CSS, non con SMIL:
           l'animazione dentro l'SVG resta ferma se un giorno la
           pagina viene costruita da uno script, e l'abbiamo già
           verificato sulla nostra pelle.

   COSA    due varianti:
             .guscio.alto     — la porta di casa: foto generosa
             .guscio.compatto — tutte le altre aree: la stessa curva,
                                solo più bassa, per lasciare respiro
                                al contenuto.
           Su schermo basso e su telefono le fasce si accorciano da
           sole: il contenuto non va mai sacrificato alla decorazione.
   ================================================================== */

:root{
  --oro:#e6cf93; --oro-chiaro:#f9eecb; --oro-fermo:#d3be93;
  --oro-lampo:#f7ecc9;
  --verde-fondo:#04211b;
  --mono:ui-monospace,'SF Mono',Menlo,'Roboto Mono',monospace;

  /* Le due fasce. Sono variabili perché cambiano per area e per
     altezza dello schermo: il panino non deve mai mangiarsi il pane. */
  /* Le proporzioni sono quelle del guscio originale: la fascia alta ha bisogno
     di respiro perché è lei a dare la profondità, e una foto schiacciata legge
     come una decorazione invece che come un luogo. */
  --sopra:clamp(210px, 34vh, 480px);
  --sotto:clamp(120px, 17vh, 250px);
}

/* ---------- l'impalcatura: tre fasce, una sola scorre ---------- */
html,body{height:100%}
body{margin:0;overflow:hidden;background:var(--verde-fondo)}

.guscio{position:fixed;inset:0;display:flex;flex-direction:column;
  background:var(--verde-fondo)}

.sopra,.sotto{flex:0 0 auto;position:relative;overflow:hidden}
.sopra{height:var(--sopra)}
.sotto{height:var(--sotto)}

/* La foto: una sola, inquadrata diversamente sopra e sotto, così la
   casa sembra la stessa vista da due finestre e non due case. */
.sopra .foto,.sotto .foto{position:absolute;inset:0;z-index:2;
  background-image:image-set(url('/assets/foto-web.webp') type('image/webp'),
                             url('/assets/foto-web.jpg') type('image/jpeg'));
  background-size:cover;background-repeat:no-repeat;
  filter:saturate(.82) contrast(1.05)}
.sopra .foto{background-position:center 34%}
.sotto .foto{background-position:center 92%}

/* Il velo: la foto va scurita fino al colore esatto del fondo, così
   il taglio non si vede come uno stacco ma come una dissolvenza. */
.sopra .foto::after,.sotto .foto::after{content:'';position:absolute;inset:0}
/* L'ultimo tono deve essere ESATTAMENTE il fondo della stanza, e opaco:
   se resta anche un filo di trasparenza si vede lo scalino fra la foto e
   il verde, e il taglio smette di sembrare una dissolvenza. */
.sopra .foto::after{background:linear-gradient(180deg,
  rgba(3,17,14,.34) 0%, rgba(3,19,15,.22) 40%, rgba(4,33,27,.86) 86%, #04211b 100%)}
.sotto .foto::after{background:linear-gradient(180deg,
  #04211b 0%, rgba(4,33,27,.9) 18%, rgba(3,19,15,.5) 52%, rgba(3,17,14,.68) 100%)}

/* ---------- il taglio, e il filo d'oro che ci corre sopra ----------
   Il taglio è un clip-path sulla foto; il filo è un elemento a parte,
   sottilissimo, ritagliato con la STESSA forma. Due elementi invece
   di un SVG, perché così il lampo è una maschera CSS e parte sempre. */
.sopra .foto{clip-path:ellipse(140% calc(100% - 3px) at 50% 0%)}
.sotto .foto{clip-path:polygon(0 calc(74% + 3.5px), 100% calc(14% + 3.5px), 100% 100%, 0 100%)}

.filo{position:absolute;inset:0;pointer-events:none;z-index:1;
  /* il filo è oro fermo; il lampo ci passa sopra ogni tanto */
  background:
    linear-gradient(90deg,
      rgba(247,236,201,0) 0%, rgba(247,236,201,0) 33%,
      #fff6de 50%,
      rgba(247,236,201,0) 67%, rgba(247,236,201,0) 100%),
    linear-gradient(var(--oro-fermo), var(--oro-fermo));
  background-size:340% 100%, 100% 100%;
  background-position:-140% 0, 0 0;
  background-repeat:no-repeat;
  animation:filo-lampo 12s linear infinite}

/* L'ORLO, non una maschera: il filo ha la STESSA forma del taglio della
   foto, allargata di tre pixel, e sta SOTTO la foto — quello che spunta
   è la linea, continua per costruzione. La maschera stirata usciva a
   trattini, e una linea di confine a trattini è una recinzione rotta. */
.sopra .filo{clip-path:ellipse(140% 100% at 50% 0%);
  filter:drop-shadow(0 2px 6px rgba(247,236,201,.5))}
.sotto .filo{clip-path:polygon(0 74%, 100% 14%, 100% 100%, 0 100%);
  filter:drop-shadow(0 -2px 6px rgba(247,236,201,.5))}

/* Il lampo è RARO: passa e se ne va. Le due fasce hanno periodi primi
   fra loro, così non vanno mai a tempo — la regola dell'oro vivo. */
@keyframes filo-lampo{
  0%      {background-position:-140% 0, 0 0}
  16%     {background-position: 240% 0, 0 0}
  100%    {background-position: 240% 0, 0 0}
}
.sotto .filo{animation-duration:13s;animation-delay:4.5s;animation-direction:reverse}

/* ---------- l'insegna in cima ---------- */
.insegna{position:absolute;left:0;right:0;top:0;z-index:4;
  display:flex;align-items:center;justify-content:center;gap:clamp(.6rem,1.6vw,1.1rem);
  padding:clamp(.85rem,2.4vh,1.5rem) clamp(1rem,4vw,2.4rem) 0}
.insegna .tratto{width:clamp(1.9rem,3.4vw,3rem);height:4px;border-radius:2px;
  background:linear-gradient(90deg,rgba(230,207,147,.1),rgba(230,207,147,.85));
  flex:0 0 auto}
.insegna .tratto:last-child{transform:scaleX(-1)}
.insegna .nome{font-size:clamp(1rem,1.5vw,1.12rem);letter-spacing:.2em;
  text-transform:uppercase;color:#ecdfb4;font-weight:600;white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.6)}
/* A 375px l'insegna coi due trattini misurava 391px dentro 341 utili: i
   trattini uscivano tagliati dal bordo. Sotto i 430px i trattini se ne
   vanno — sono un fregio, non un'informazione — e il nome può andare su
   due righe invece di essere segato. */
@media (max-width:430px){
  .insegna{padding-left:1rem;padding-right:1rem}
  .insegna .tratto{display:none}
  .insegna .nome{letter-spacing:.13em;font-size:1rem;white-space:normal;
    text-align:center;line-height:1.3}
}

/* ---------- il piede: sempre a destra, col puntino di Monza ---------- */
.folio{position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;align-items:baseline;justify-content:flex-end;
  gap:clamp(.7rem,1.7vw,1.5rem);flex-wrap:wrap;
  padding:0 clamp(1.3rem,4vw,3.5rem) clamp(.7rem,1.8vh,1.3rem)}
/* Le scritte del piede sono QUELLE della home, al pixel: stessa famiglia,
   stessi corpi, stesse spaziature. Il piede è uno solo in tutto il sito. */
.folio .voce{font-family:'Clash Display',system-ui,sans-serif;
  font-size:clamp(9.5px,1vw,11px);font-weight:600;text-transform:uppercase;
  letter-spacing:.34em;color:#ecdfb4;
  text-shadow:0 1px 4px rgba(0,0,0,.82), 0 0 12px rgba(0,0,0,.55)}
.folio .sep{color:#ecdfb4;opacity:.7;text-shadow:0 1px 4px rgba(0,0,0,.82)}
.folio .luogo{display:flex;align-items:center;gap:.66rem;
  font-family:'Clash Display',system-ui,sans-serif;
  font-size:clamp(10.8px,1.14vw,12.6px);font-weight:600;text-transform:uppercase;
  letter-spacing:.3em;color:#ecdfb4;
  text-shadow:0 1px 4px rgba(0,0,0,.82), 0 0 12px rgba(0,0,0,.55)}
.folio .nota{position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(.7rem,1.8vh,1.3rem);
  font-family:'Clash Display',system-ui,sans-serif;
  font-size:clamp(9.5px,1vw,11px);font-weight:600;text-transform:uppercase;
  letter-spacing:.34em;color:#ecdfb4;text-decoration:none;opacity:.72;
  text-shadow:0 1px 4px rgba(0,0,0,.82), 0 0 12px rgba(0,0,0,.55);
  transition:opacity .2s,color .2s}
.folio .nota:hover,.folio .nota:focus-visible{opacity:1;color:#fff6de;
  text-decoration:underline;text-underline-offset:.3em}
.folio .nota:focus-visible{outline:2px solid #ecdfb4;outline-offset:3px;border-radius:4px}
.folio .puntino{display:inline-flex;align-items:center;justify-content:center;
  width:clamp(18px,1.8vw,20px);height:clamp(18px,1.8vw,20px);color:#ecdfb4;flex:0 0 auto;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.7));
  transition:transform .25s, color .25s}
.folio .puntino svg{width:100%;height:100%;display:block}
.folio .puntino:hover,.folio .puntino:focus-visible{color:var(--oro-chiaro);
  transform:translateY(-2px)}
@media (max-width:520px){
  .folio{justify-content:center;gap:.5rem}
  .folio .voce{letter-spacing:.2em;font-size:8.1px}
  .folio .luogo{letter-spacing:.17em;font-size:9.2px}
  .folio .nota{bottom:calc(clamp(.7rem,1.8vh,1.3rem) + 1.75em)}
}

/* ---------- la finestra/* ---------- la finestra: l'unica cosa che scorre ---------- */
.finestra{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(211,190,147,.35) transparent;
  overscroll-behavior:contain}
.finestra::-webkit-scrollbar{width:8px}
.finestra::-webkit-scrollbar-thumb{background:rgba(211,190,147,.3);border-radius:4px}
/* IL FOGLIO SI USA TUTTO — regola di casa, non una preferenza.
   Qui c'era `max-width:1080px`: su uno schermo da 1900 lasciava 820 pixel
   di vuoto ai lati, e il contenuto diventava un'isoletta in mezzo al mare.
   Il tetto se ne va. Se una riga di testo diventa troppo lunga per essere
   letta, la risposta NON è stringere la colonna: è affiancare qualcosa —
   ed è quello che fanno le pagine, con le loro griglie a due o tre bande. */
.pagina{max-width:none;margin:0;
  /* Il corridoio a destra è per i pioli: senza, il testo ci finisce sotto. */
  padding:clamp(1.3rem,3.4vh,2.6rem) clamp(2.6rem,5vw,3.6rem)
          clamp(2rem,5vh,3.4rem) clamp(1.2rem,4vw,2.6rem)}

/* ---------- i pioli: dicono «c'è ancora roba sotto» ---------- */
.pioli{position:absolute;right:clamp(.5rem,1.5vw,1.1rem);
  top:50%;transform:translateY(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  pointer-events:none;transition:opacity .4s}
.pioli i{display:block;height:1px;border-radius:1px;opacity:.6;
  background:linear-gradient(90deg,rgba(211,190,147,0),rgba(211,190,147,1));
  animation:piolo 3.6s ease-in-out infinite}
.pioli i:nth-child(odd){width:15px}
.pioli i:nth-child(even){width:9px}
.pioli i:nth-child(1){animation-delay:0s}    .pioli i:nth-child(2){animation-delay:.13s}
.pioli i:nth-child(3){animation-delay:.26s}  .pioli i:nth-child(4){animation-delay:.39s}
.pioli i:nth-child(5){animation-delay:.52s}  .pioli i:nth-child(6){animation-delay:.65s}
.pioli i:nth-child(7){animation-delay:.78s}  .pioli i:nth-child(8){animation-delay:.91s}
.pioli i:nth-child(9){animation-delay:1.04s} .pioli i:nth-child(10){animation-delay:1.17s}
.pioli i:nth-child(11){animation-delay:1.3s}
@keyframes piolo{0%,70%,100%{opacity:.42}16%{opacity:1}}

/* ---------- il titolo che si incrocia ----------
   Due parole su due righe che si compenetrano: la seconda rientra di
   mezza lettera e RISALE dentro la prima. È il gesto del vecchio sito,
   ed è quello che lo rende riconoscibile a colpo d'occhio. */
.titolone{margin:0;line-height:.8;font-weight:600;
  font-size:clamp(2.7rem,9.2vw,8.4rem);letter-spacing:-.02em;
  color:var(--oro-chiaro)}
.titolone .r1{display:block}
.titolone .r2{display:block;padding-left:.5em;margin-top:-.2em}
.titolone .grande{font-size:1.12em}
.titolone .punto{margin-left:.06em}

/* ---------- il testo: giustificato, come nel vecchio ---------- */
.discorso{text-align:justify;hyphens:auto;-webkit-hyphens:auto;
  text-wrap:pretty}
.discorso p{margin:0;font-size:clamp(1rem,1.65vw,1.1rem);line-height:1.78;
  color:#e2dac5}
.discorso p + p{margin-top:.75rem}
.discorso b,.discorso strong{color:var(--oro-chiaro);font-weight:600}
/* Su colonna stretta la giustificazione apre fiumi bianchi fra le parole:
   sotto i 30 caratteri di riga si torna a bandiera. */
@media (max-width:430px){ .discorso{text-align:left;hyphens:auto} }

.filetto{width:3rem;height:1px;background:rgba(211,190,147,.5);
  margin:0 0 1.1rem}

/* ---------- la porta dell'amministratore ----------
   Sta accanto a «Guidami», stessa forma e stessa fascia: chi comanda vede la
   casa esattamente come la vedono tutti, con un tasto in più. Non un altro
   sito, non un'altra grafica — una porta di servizio nella stessa parete.

   L'oro qui è pieno, non trasparente come in «Guidami»: fra due pillole
   identiche vicine non si distinguerebbe quale fa cosa, e questa apre stanze
   dove si tolgono le chiavi alla gente.

   ⚠️ Il tasto NON esiste nella pagina per chi non comanda: non è nascosto,
   non viene proprio creato. Nasconderlo col CSS lo lascerebbe nel sorgente,
   e il sorgente lo legge chiunque. */
.tasto-admin{position:absolute;z-index:6;
  top:clamp(.7rem,1.8vh,1.2rem);
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:44px;padding:.5rem 1rem;border-radius:999px;
  font:inherit;font-size:1rem;font-weight:600;text-decoration:none;
  border:1px solid rgba(230,207,147,.75);
  background:linear-gradient(180deg,rgba(240,220,174,.22),rgba(211,190,147,.12));
  color:var(--oro-chiaro,#e7d4a2);cursor:pointer;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 6px 16px -8px rgba(0,0,0,.8);
  transition:border-color .2s,background .2s,color .2s}
.tasto-admin:hover{color:#fff6de;border-color:rgba(247,236,201,1);
  background:linear-gradient(180deg,rgba(240,220,174,.34),rgba(211,190,147,.2))}
.tasto-admin:focus-visible{outline:2px solid var(--oro-chiaro,#e7d4a2);outline-offset:3px}
.tasto-admin svg{width:16px;height:16px;flex:0 0 16px}
/* Sul telefono scende insieme a «Guidami», sulla stessa riga: due pillole
   affiancate ci stanno, perché entrambe sono corte. */
@media (max-width:700px){ .tasto-admin{top:3.3rem} }
@media (max-width:700px) and (max-height:560px){ .tasto-admin{top:2.75rem} }

/* ---------- le varianti d'area ---------- */
.guscio.alto{--sopra:clamp(210px, 34vh, 480px); --sotto:clamp(120px, 17vh, 250px)}
.guscio.compatto{--sopra:clamp(150px, 22vh, 320px); --sotto:clamp(104px, 15vh, 190px)}
/* La variante compatta cambia la CURVA: foto e filo devono cambiare
   INSIEME, con la stessa identica forma — due curve diverse si
   intersecano e il filo esce a pezzi. La foto è 3px più corta del
   filo: l'orlo che avanza È la linea, continua per costruzione. */
.guscio.compatto .sopra .foto{clip-path:ellipse(120% calc(100% - 3px) at 34% 0%)}
.guscio.compatto .sopra .filo{clip-path:ellipse(120% 100% at 34% 0%)}
.guscio.compatto .sotto .foto{clip-path:polygon(0 calc(84% + 3px), 100% calc(54% + 3px), 100% 100%, 0 100%)}
.guscio.compatto .sotto .filo{clip-path:polygon(0 84%, 100% 54%, 100% 100%, 0 100%)}

/* Schermo basso (portatile aperto a metà, tablet orizzontale): le fasce
   si stringono, il contenuto vince sempre. */
@media (max-height:760px){
  .guscio.alto{--sopra:clamp(130px, 22vh, 240px); --sotto:clamp(80px, 12vh, 140px)}
  .guscio.compatto{--sopra:clamp(108px, 16vh, 180px); --sotto:clamp(68px, 10vh, 120px)}
}
@media (max-height:560px){
  .guscio.alto,.guscio.compatto{--sopra:96px; --sotto:60px}
  .insegna{padding-top:.6rem}
  .pioli{display:none}
}
/* Telefono: la foto va inquadrata sul fianco alberato, che in verticale
   è l'unica parte che si legge. */
@media (max-width:700px){
  .sopra .foto{background-position:64% 38%}
  .sotto .foto{background-position:64% 92%}
  .pagina{padding-left:clamp(1.1rem,4vw,1.5rem);padding-right:2.2rem}
}

/* ---------- l'oro vivo sulle icone ----------
   L'icona fa da MASCHERA e sotto ci scorre l'oro: dove la linea è piena
   la luce si vede tutta, dove è il secondo tono si vede in trasparenza.
   L'oro su oro viene da sé, senza un secondo colore.
   La banda chiara è stretta e poco più chiara dell'oro base: deve sembrare
   che la luce sia PASSATA, non che l'icona si sia accesa.
   Periodo e ritardo li assegna lo script, uno per icona: due riflessi non
   partono mai insieme. Mai SMIL: dentro l'SVG resterebbe fermo. */
.oro{--giro:23s; --attesa:0s;
  display:block;
  background:linear-gradient(102deg,
    #c4aa72 0%, #c4aa72 38%, #d9c58f 45%, #f7ecc9 50%, #d9c58f 55%, #c4aa72 62%, #c4aa72 100%);
  background-size:420% 100%;background-position:0% 0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  animation:oro-passa var(--giro) cubic-bezier(.45,0,.35,1) var(--attesa) infinite}
/* L'oro resta fermo quasi sempre: la passata è rara ma si deve VEDERE —
   banda più larga e picco più chiaro, perché prima non la notava nessuno. */
@keyframes oro-passa{
  0%, 86% {background-position:0% 0}
  100%    {background-position:100% 0}
}

/* ---------- chi non vuole il movimento non lo vede ---------- */
@media (prefers-reduced-motion: reduce){
  .filo{animation:none;background-position:240% 0, 0 0}
  .pioli i{animation:none;opacity:.6}
  .oro{animation:none!important;background-position:50% 0}
  *{scroll-behavior:auto!important}
}

/* ---------- alto contrasto di Windows: niente sparisce ---------- */
@media (forced-colors: active){
  .sopra .foto,.sotto .foto{display:none}
  .filo{background:CanvasText;animation:none;filter:none}
  .insegna .nome,.folio .voce,.folio .luogo{color:CanvasText;text-shadow:none}
  .titolone{color:CanvasText}
}

/* ---------- il tasto di casa: un'icona, non una frase ----------
   Tondo, bordato d'oro, con la freccettina piccola e la casetta a due
   densità (linea piena, riempimento in filigrana): stessa grammatica
   delle altre icone del guscio. Rispecchiato in admin.css per le
   stanze che non vestono il guscio. */
.casa{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:999px;flex:0 0 auto;
  border:1px solid rgba(211,190,147,.38);background:rgba(4,22,18,.58);
  color:var(--oro-fermo);text-decoration:none;
  transition:border-color .18s,color .18s,background .18s,box-shadow .25s}
.casa:hover,.casa:focus-visible{color:var(--oro-chiaro);
  background:rgba(8,36,29,.75);border-color:rgba(230,207,147,.6);
  box-shadow:0 0 16px rgba(230,207,147,.28)}
.casa svg{display:block}

/* ---------- il tabulatore deve vedersi sempre ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--oro-chiaro);outline-offset:3px;border-radius:6px}