/* ================================================================== *
 * Slogan Website - il guscio: testata e piede.
 *
 * Perche' questo foglio e' separato da site.css e si ripete i token.
 *
 * Testata e piede si vedono su tutte le pagine, comprese quelle dei case
 * study, che sono disegnate da un altro plugin e non caricano site.css.
 * Le due strade erano: caricare novantamila caratteri di foglio delle
 * pagine anche li' - dove per giunta due o tre regole entrerebbero in
 * conflitto con quelle del case study, e' gia' successo - oppure un foglio
 * suo, che sta in piedi da solo. Questo.
 *
 * Per stare in piedi da solo si ridichiara i token, ma non su ':root': li
 * mette su '.slgn-hdr' e '.slgn-ftr'. Cosi' non tocca niente di quello che
 * c'e' intorno, e dove site.css c'e' i valori combaciano perche' sono gli
 * stessi.
 * ================================================================== */

.slgn-hdr,
.slgn-ftr {
  --ws-ink: #080808;
  --ws-ink-soft: #101010;
  --ws-ink-lift: #161616;
  --ws-paper: #ece9e1;
  --ws-white: #ffffff;
  --ws-silver: #c9c9c7;
  --ws-mute: #6c6d70;

  --ws-line: rgba(255, 255, 255, .16);
  --ws-line-soft: rgba(255, 255, 255, .08);

  --ws-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ws-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ws-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --ws-pad: clamp(1.25rem, 4vw, 4.75rem);
  --ws-ease: cubic-bezier(.22, .72, .2, 1);
  --ws-hover: .3s var(--ws-ease);
  --ws-move: .45s var(--ws-ease);

  --hdr-h: 4.5rem;

  box-sizing: border-box;
  font-family: var(--ws-sans);
  color: var(--ws-paper);
}

.slgn-hdr *,
.slgn-ftr *,
.slgn-hdr *::before,
.slgn-ftr *::before,
.slgn-hdr *::after,
.slgn-ftr *::after { box-sizing: inherit; }

/* Le classi comuni, ripetute qui dentro per lo stesso motivo dei token.
   Sono piu' specifiche di quelle di site.css, quindi dove ci sono tutte e
   due vincono queste - e valgono lo stesso. */
/* Lo stesso contenitore delle pagine: 84rem centrate, e la spaziatura
   laterale sulla fascia - non sul contenitore. Erano 88rem con la
   spaziatura dentro, quindi il guscio partiva e finiva su una colonna
   diversa da quella di tutto il resto del sito: la differenza era di poche
   decine di pixel, che e' esattamente la misura che si nota. */
.slgn-hdr .slgn-wrap,
.slgn-ftr .slgn-wrap {
  width: min(84rem, 100%);
  margin-inline: auto;
}

.slgn-hdr .slgn-label,
.slgn-ftr .slgn-label {
  margin: 0 0 1rem;
  color: var(--ws-mute);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Il colore va dichiarato, non ereditato.
 *
 * Il tema colora i titoli e i paragrafi con regole sue, e una regola
 * qualunque batte l'ereditarieta': la fascia avorio diceva ai figli "siete
 * scuri", il tema diceva agli h2 "siete avorio", e vinceva il tema - titolo
 * avorio su fondo avorio, cioe' invisibile. Da qui in poi ogni testo del
 * guscio dichiara il suo colore, e lo prende dal token: cosi' basta
 * ridefinire il token per invertire una fascia intera. */
/* Come tutti i titoli del sito: Inter Tight, maiuscolo, peso 500.
 *
 * Il maiuscolo arrivava da una regola a tappeto del tema child, e quando il
 * guscio e' stato escluso da quella regola - perche' gli portava via anche il
 * colore - si e' portato via pure il maiuscolo: il titolo del piede e'
 * rimasto l'unico in tondo basso di tutto il sito. Adesso e' dichiarato qui,
 * dove si vede insieme a tutto il resto della sua fascia. */
.slgn-ftr .slgn-h2 {
  margin: 0;
  color: var(--ws-paper);
  font-family: var(--ws-display);
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.014em;
  text-transform: uppercase;
}

/* L'accento nel titolo dell'invito: la stessa parola, un peso piu' leggero.
   Vale la stessa spiegazione che sta in site.css - qui e' ripetuto perche'
   quel foglio, sulle pagine dei case study, non c'e'. */
.slgn-ftr .slgn-word,
.slgn-ftr .slgn-em { display: inline-block; }

.slgn-ftr .slgn-word--em,
.slgn-ftr .slgn-em {
  font-family: inherit;
  font-style: normal;
  font-weight: 300;
  letter-spacing: inherit;
  text-transform: inherit;
}

.slgn-ftr__cta--carta .slgn-word--em { color: #0d0d0d; }

.slgn-ftr .slgn-word,
.slgn-ftr .slgn-h2 .slgn-word { color: inherit; }

.slgn-ftr .slgn-body {
  margin: 0;
  color: var(--ws-silver);
  font-size: 1rem;
  font-weight: 380;
  line-height: 1.62;
}

.slgn-hdr .slgn-btn,
.slgn-ftr .slgn-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 1.5rem;
  border: 1px solid var(--ws-paper);
  background: var(--ws-paper);
  color: var(--ws-ink);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--ws-hover), color var(--ws-hover), border-color var(--ws-hover);
}

.slgn-hdr .slgn-btn i,
.slgn-ftr .slgn-btn i {
  font-style: normal;
  transition: transform var(--ws-hover);
}

.slgn-hdr .slgn-btn:hover,
.slgn-ftr .slgn-btn:hover,
.slgn-hdr .slgn-btn:focus-visible,
.slgn-ftr .slgn-btn:focus-visible {
  background: transparent;
  color: var(--ws-paper);
}

.slgn-hdr .slgn-btn:hover i,
.slgn-ftr .slgn-btn:hover i { transform: translateX(.25rem); }

.slgn-hdr .slgn-btn--mini {
  padding: .6rem 1.05rem;
  font-size: .68rem;
  letter-spacing: .12em;
}

.slgn-hdr .slgn-sr-only,
.slgn-ftr .slgn-sr-only,
.slgn-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Il salto al contenuto esce dal nascondiglio solo quando lo si raggiunge
   col tasto di tabulazione: e' l'unico elemento della pagina che deve
   essere invisibile e perfettamente raggiungibile insieme. */
.slgn-skip:focus {
  z-index: 200;
  top: .75rem;
  left: .75rem;
  width: auto;
  height: auto;
  margin: 0;
  padding: .8rem 1.2rem;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: #ece9e1;
  color: #080808;
  font: 600 .8rem/1 "Inter", system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}


/* ================================================================== *
 * LA TESTATA
 * ================================================================== */

.slgn-hdr {
  position: sticky;
  top: 0;
  z-index: 100;
}


/* La barra di amministrazione di WordPress e' fissa in cima e sta sopra a
   tutto: una testata appiccicata a zero le finisce sotto. E' un caso che
   vede solo chi ha fatto l'accesso, ma e' anche l'unico modo in cui il
   proprietario del sito vede il proprio sito. */
body.admin-bar .slgn-hdr { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .slgn-hdr { top: 46px; }
}

/* -- La striscia di avviso -- */

.slgn-avviso {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .55rem var(--ws-pad);
  font-size: .78rem;
  line-height: 1.4;
}

.slgn-avviso--carta {
  background: var(--ws-paper);
  color: var(--ws-ink);
}

.slgn-avviso--nero {
  border-bottom: 1px solid var(--ws-line-soft);
  background: var(--ws-ink);
  color: var(--ws-silver);
}

.slgn-avviso__in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1rem;
  margin-inline: auto;
  text-align: center;
}

.slgn-avviso__testo { margin: 0; }

.slgn-avviso__go {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--ws-hover);
}

.slgn-avviso__go i { font-style: normal; }
.slgn-avviso__go:hover { opacity: .65; }

.slgn-avviso__x {
  position: absolute;
  right: calc(var(--ws-pad) - .5rem);
  top: 50%;
  translate: 0 -50%;
  padding: .2rem .5rem;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: .55;
  transition: opacity var(--ws-hover);
}

.slgn-avviso__x:hover { opacity: 1; }

/* -- La barra -- */

.slgn-hdr__bar {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid transparent;
  transition:
    background var(--ws-hover),
    border-color var(--ws-hover),
    box-shadow var(--ws-hover),
    translate var(--ws-move);
}

/* Il filo di luce sul bordo alto.
 *
 * Un pixel di chiaro che si spegne andando a destra. Da solo non si nota;
 * insieme al fondo velato dice che la barra e' una lastra appoggiata sopra
 * alla pagina, e non un pezzo della pagina che finisce li'. */
.slgn-hdr__bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(236, 233, 225, .5) 0%,
    rgba(236, 233, 225, .22) 34%,
    rgba(236, 233, 225, .05) 62%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity var(--ws-hover);
}

.slgn-hdr.is-scrolled .slgn-hdr__bar::before,
.slgn-hdr__bar--pieno::before { opacity: 1; }

/* Quanto manca alla fine della pagina.
 *
 * Una riga sul bordo basso che cresce mentre si scende. E' l'unica cosa in
 * tutta la testata che dice qualcosa invece di limitarsi a stare li': su una
 * pagina lunga come la home - dodici schermate - sapere a che punto si e'
 * cambia il modo in cui la si scorre.
 *
 * Il numero lo scrive lo script in '--scroll-progress', da zero a uno.
 * Nessuna misura in pixel: e' una scala, e le scale si fanno con scaleX. */
.slgn-hdr__bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  pointer-events: none;

  /* Due strati in un elemento solo: sopra la parte letta, sotto la pista.
   *
   * La pista si vede: senza, la riga chiara sembra un bordo che cresce per
   * conto suo, e non si capisce ne' da dove parte ne' dove arriva. Con la
   * pista visibile diventa quello che e' - una misura - e in piu' fa da
   * stacco netto fra la testata e la pagina.
   *
   * Niente 'scaleX': una scala allargherebbe anche la pista. Qui la parte
   * letta e' un fondo largo una percentuale, che e' esattamente il dato. */
  background:
    linear-gradient(var(--ws-paper), var(--ws-paper))
      0 0 / calc(var(--scroll-progress, 0) * 100%) 100% no-repeat,
    rgba(236, 233, 225, .14);

  opacity: 0;
  transition: opacity var(--ws-hover);
}

.slgn-hdr.is-scrolled .slgn-hdr__bar::after,
.slgn-hdr__bar--pieno::after { opacity: 1; }

/* Il velo: in cima alla pagina la barra non c'e', si vede l'apertura fino
   al bordo dello schermo; appena si scorre compare il fondo. E' la
   differenza fra una testata che sta sopra alla pagina e una che ci
   galleggia davanti. */
.slgn-hdr__bar--pieno,
.slgn-hdr.is-solid .slgn-hdr__bar {
  border-bottom-color: var(--ws-line-soft);
  background: rgba(8, 8, 8, .82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
}

/* Scorrendo la barra si chiude un po' su se stessa: piu' opaca, un'ombra
 * bassa che la stacca, e il marchio che rientra di un decimo. Sono tre
 * movimenti minimi che succedono insieme, ed e' il fatto che succedano
 * insieme a farli leggere come una cosa sola - la testata che si mette da
 * parte per lasciare leggere.
 *
 * L'altezza cala di sette decimi di rem: quanto basta a sentirlo, non tanto
 * da far ballare il contenuto sotto. */
/* L'ombra sotto la barra.
 *
 * Larga e bassa, piu' un appoggio che un contorno: su un fondo nero non si
 * vede come ombra, si vede come distanza - la testata sta un centimetro
 * davanti alla pagina, e la pagina le scorre sotto. Il filo chiaro interno
 * in cima e' la stessa cosa vista dall'altro lato: e' il bordo della lastra
 * preso dalla luce. */
.slgn-hdr.is-scrolled .slgn-hdr__bar {
  background: rgba(8, 8, 8, .94);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .05) inset,
    0 18px 40px -20px rgba(0, 0, 0, .95),
    0 4px 14px -10px rgba(0, 0, 0, .8);
}

.slgn-hdr.is-scrolled { --hdr-h: 3.8rem; }

.slgn-hdr__logo,
.slgn-hdr__nome {
  transition: height var(--ws-move), font-size var(--ws-move);
}


.slgn-hdr.is-scrolled .slgn-hdr__nome { font-size: 1.02rem; }

/* La riga sotto al nome se ne va: e' la parte che serve la prima volta che
   si arriva sul sito, non la centesima volta che si scorre una pagina. */
.slgn-hdr__nota {
  max-height: 1.2em;
  overflow: hidden;
  transition: max-height var(--ws-move), opacity var(--ws-hover);
}

.slgn-hdr.is-scrolled .slgn-hdr__nota {
  max-height: 0;
  opacity: 0;
}

/* Si ritira scendendo. Il movimento e' sulla barra e non sulla testata
   intera perche' l'avviso, se c'e', deve andarsene con lei. */
.slgn-hdr.is-hidden { translate: 0 -100%; }

.slgn-hdr {
  transition: translate var(--ws-move);
}

.slgn-hdr__bar {
  padding-inline: var(--ws-pad);
  padding-top: env(safe-area-inset-top, 0px);
}

.slgn-hdr__in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  width: min(84rem, 100%);
  margin-inline: auto;
  min-height: var(--hdr-h);
}

/* -- Il marchio -- */

.slgn-hdr__mark {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: inherit;
  text-decoration: none;
}

.slgn-hdr__testo {
  display: grid;
  gap: .15rem;
}

.slgn-hdr__nome {
  font-family: var(--ws-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.slgn-hdr__logo {
  display: block;
  height: 2.2rem;
  width: auto;
}

.slgn-hdr.is-scrolled .slgn-hdr__logo { height: 1.9rem; }

.slgn-hdr__nota {
  color: var(--ws-mute);
  font-family: var(--ws-mono);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color var(--ws-hover);
}

.slgn-hdr__mark:hover .slgn-hdr__nota { color: var(--ws-silver); }

/* -- Le voci -- */

/* Le voci si distendono su tutta la colonna di mezzo.
 *
 * Prima stavano strette al centro, e la barra aveva due vuoti da trecento
 * pixel - uno per parte. Distese, la stessa quantita' di roba riempie la
 * riga: non e' stato aggiunto niente, e' stato smesso di ammucchiarlo. */
.slgn-hdr__nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: clamp(1rem, 2.6vw, 2.4rem);
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
}

.slgn-hdr__bar--destra .slgn-hdr__nav {
  justify-content: flex-end;
  width: auto;
  max-width: none;
  margin-inline: 0 0;
}

/* Il numero davanti alla voce.
 *
 * Non e' decorazione: e' lo stesso segno che numera i servizi, le fasi del
 * metodo e le voci del menu sul telefono. Ripetuto in testata, dice che
 * quelle quattro pagine sono un percorso e non quattro cose sparse - e da'
 * alla barra il peso tipografico che le mancava. */
.slgn-hdr__vn {
  margin-right: .4rem;
  color: var(--ws-mute);
  font-family: var(--ws-mono);
  font-size: .58rem;
  letter-spacing: .08em;
  vertical-align: .15em;
  transition: color var(--ws-hover);
}

.slgn-hdr__voce:hover .slgn-hdr__vn,
.slgn-hdr__voce.is-qui .slgn-hdr__vn { color: var(--ws-silver); }

.slgn-hdr__voce {
  position: relative;
  padding: .3rem 0;
  color: var(--ws-silver);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ws-hover);
}

/* Il filo che cresce da sinistra: e' lo stesso gesto dei collegamenti nel
   corpo della pagina, quindi la testata non parla una lingua sua. */
.slgn-hdr__voce::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--ws-move);
}

.slgn-hdr__voce:hover,
.slgn-hdr__voce:focus-visible { color: var(--ws-paper); }

.slgn-hdr__voce:hover::after,
.slgn-hdr__voce:focus-visible::after { transform: scaleX(1); }

/* La pagina in cui si e': il filo c'e' gia', ma corto. Dire "sei qui" con
   un colore soltanto non basta su un fondo che ha gia' due grigi. */
.slgn-hdr__voce.is-qui { color: var(--ws-paper); }

.slgn-hdr__voce.is-qui::after {
  transform: scaleX(1);
  background: var(--ws-mute);
}

/* -- Le voci con i figli -- *
 *
 * La voce resta quella di prima, e accanto le compare una freccia. Chi non
 * usa i sottomenu non ha nessuna di queste classi in pagina, quindi niente
 * di quello che segue lo tocca.
 *
 * La tendina si apre in tre modi - passaggio del mouse, clic sulla freccia,
 * tastiera - ma a deciderlo e' lo script, che accende 'is-aperto' con un
 * attimo di ritardo all'entrata e uno piu' lungo all'uscita. Senza script
 * (la testata non ha 'is-js') la apre il foglio di stile da solo, con
 * :hover e :focus-within: meno educato, ma ci si arriva lo stesso. */
.slgn-hdr__gruppo {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .2rem;
}

.slgn-hdr__apri {
  display: inline-grid;
  place-items: center;
  align-self: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: -.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ws-mute);
  cursor: pointer;
  transition: color var(--ws-hover);
}

.slgn-hdr__gruppo:hover .slgn-hdr__apri,
.slgn-hdr__gruppo.is-aperto .slgn-hdr__apri,
.slgn-hdr__gruppo.is-qui .slgn-hdr__apri,
.slgn-hdr__apri:focus-visible { color: var(--ws-paper); }

.slgn-hdr__freccia {
  display: block;
  transition: rotate var(--ws-hover);
}

.slgn-hdr__apri[aria-expanded="true"] .slgn-hdr__freccia,
.slgn-hdr__espandi[aria-expanded="true"] .slgn-hdr__freccia { rotate: 180deg; }

/* L'anello del fuoco e' lo stesso del tasto del menu: due pixel del colore
   del testo, un poco staccati. Sulle voci il fuoco lo dice gia' il filo
   sotto; qui non c'e' un filo, e un'icona di dieci pixel che cambia solo
   di grigio non si vede cambiare. */
.slgn-hdr__apri:focus-visible,
.slgn-hdr__espandi:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Con la tendina aperta la voce si comporta come al passaggio del mouse:
   si capisce di chi e' l'elenco anche quando il mouse e' gia' sceso. */
.slgn-hdr__gruppo.is-aperto > .slgn-hdr__voce { color: var(--ws-paper); }
.slgn-hdr__gruppo.is-aperto > .slgn-hdr__voce .slgn-hdr__vn { color: var(--ws-silver); }
.slgn-hdr__gruppo.is-aperto > .slgn-hdr__voce::after { transform: scaleX(1); }

/* La tendina.
 *
 * Il contenitore esterno e' trasparente e parte subito sotto la voce: il
 * suo rientro in alto e' il ponte che il mouse attraversa scendendo, e
 * finche' lo attraversa e' ancora "dentro" al gruppo. Senza, fra la voce e
 * l'elenco ci sarebbe una striscia di vuoto in cui la tendina si chiude.
 * Il rientro e' calcolato sull'altezza della barra, cosi' l'elenco si
 * appoggia al bordo basso anche quando la barra si compatta. */
.slgn-hdr__tendina {
  position: absolute;
  top: 100%;
  left: -1rem;
  z-index: 3;
  padding-top: calc(var(--hdr-h) / 2 - .35rem);
  opacity: 0;
  visibility: hidden;
  translate: 0 -.4rem;
  pointer-events: none;
  transition:
    opacity .2s var(--ws-ease),
    translate .2s var(--ws-ease),
    visibility 0s linear .2s;
}

/* Il bordo destro: con le voci a destra la tendina si allinea sempre alla
   fine della voce, se no l'ultima uscirebbe dallo schermo. Con le voci al
   centro ci pensa lo script, che lo misura solo quando serve. */
.slgn-hdr__bar--destra .slgn-hdr__tendina,
.slgn-hdr__gruppo.is-a-destra .slgn-hdr__tendina {
  left: auto;
  right: -.4rem;
}

.slgn-hdr__gruppo.is-aperto .slgn-hdr__tendina,
.slgn-hdr:not(.is-js) .slgn-hdr__gruppo:hover .slgn-hdr__tendina,
.slgn-hdr:not(.is-js) .slgn-hdr__gruppo:focus-within .slgn-hdr__tendina {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  pointer-events: auto;
  transition:
    opacity .2s var(--ws-ease),
    translate .2s var(--ws-ease),
    visibility 0s;
}

/* L'elenco e' un pezzo della barra che scende: lo stesso nero, lo stesso
   filo chiaro in cima, la stessa ombra larga e bassa. Niente angoli
   arrotondati - la barra non ne ha. La sfocatura qui serve poco (sotto c'e'
   gia' la barra, che sfoca per conto suo), quindi il fondo e' quasi pieno. */
.slgn-hdr__figli {
  display: grid;
  /* Larga quanto la riga piu' lunga, non quanto la voce: un elemento
     posizionato si stringe sul suo contenitore, che qui e' la voce, e
     mandava a capo ogni descrizione dopo due parole. */
  width: max-content;
  min-width: 15rem;
  max-width: 22rem;
  margin: 0;
  padding: .4rem;
  list-style: none;
  border: 1px solid var(--ws-line-soft);
  background: rgba(8, 8, 8, .96);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .05) inset,
    0 18px 40px -20px rgba(0, 0, 0, .95),
    0 4px 14px -10px rgba(0, 0, 0, .8);
}

.slgn-hdr__figlio {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: baseline;
  row-gap: .3rem;
  padding: .8rem .85rem;
  color: var(--ws-silver);
  text-decoration: none;
  transition: color var(--ws-hover), background var(--ws-hover);
}

.slgn-hdr__figlio .slgn-hdr__vn {
  margin: 0;
  vertical-align: 0;
}

.slgn-hdr__fe {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* La riga sotto parla piu' piano: tondo basso, corpo piu' piccolo, grigio
   scuro. Si legge se la si cerca, e non fa concorrenza alla voce.
 *
 * Non e' --ws-mute, pero': quello va bene per i numeri, che sono un segno,
 * ma su una frase da dodici pixel fa 3,8 a 1 col nero, e una frase si deve
 * poter leggere (4,5 almeno). L'argento dei testi a due terzi fa 5,5: piu'
 * piano della voce, che sta sopra al 12, ma leggibile. */
.slgn-hdr__fd {
  grid-column: 2;
  color: rgba(201, 201, 199, .65);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.4;
  /* Dichiarati e non ereditati: la testata della seconda versione mette
     tutto il collegamento in maiuscolo, e la riga sotto deve restare una
     frase. */
  letter-spacing: 0;
  text-transform: none;
  transition: color var(--ws-hover);
}

.slgn-hdr__figlio:hover,
.slgn-hdr__figlio:focus-visible {
  background: rgba(255, 255, 255, .05);
  color: var(--ws-paper);
}

.slgn-hdr__figlio:hover .slgn-hdr__vn,
.slgn-hdr__figlio:focus-visible .slgn-hdr__vn,
.slgn-hdr__figlio:hover .slgn-hdr__fd,
.slgn-hdr__figlio:focus-visible .slgn-hdr__fd { color: var(--ws-silver); }

.slgn-hdr__figlio:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* La pagina in cui si e', dentro l'elenco: lo stesso filo corto della voce,
   messo in piedi sul bordo sinistro. */
.slgn-hdr__figlio.is-qui {
  color: var(--ws-paper);
  box-shadow: 2px 0 0 var(--ws-mute) inset;
}

.slgn-hdr__coda {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-self: end;
  padding-left: 1.4rem;
}

/* Il filo verticale prima del pulsante: separa l'invito dalle voci senza
   metterci in mezzo uno spazio grande il doppio degli altri. */
.slgn-hdr__coda::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 1.25rem;
  margin-top: -.625rem;
  background: var(--ws-line);
}

@media (max-width: 899px) {
  .slgn-hdr__coda { padding-left: 0; }
  .slgn-hdr__coda::before { display: none; }
}

/* -- Il tasto del menu -- *
 *
 * Due righe che diventano una croce. Niente terza riga: con due il segno
 * di chiusura e' esatto, con tre la terza deve sparire e si vede sparire.
 */
.slgn-hdr__tasto {
  position: relative;
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--ws-line);
  background: none;
  color: var(--ws-paper);
  cursor: pointer;
  transition: border-color var(--ws-hover);
}

.slgn-hdr__tasto:hover { border-color: var(--ws-paper); }

.slgn-hdr__tasto-l,
.slgn-hdr__tasto-l::after {
  position: absolute;
  left: 50%;
  width: 1.1rem;
  height: 1px;
  background: currentColor;
  translate: -50% 0;
  transition: translate var(--ws-move), rotate var(--ws-move);
}

.slgn-hdr__tasto-l {
  top: calc(50% - 4px);
}

.slgn-hdr__tasto-l::after {
  content: "";
  top: 8px;
  left: 0;
  translate: 0 0;
}

.slgn-hdr__tasto[aria-expanded="true"] .slgn-hdr__tasto-l {
  translate: -50% 4px;
  rotate: 45deg;
}

.slgn-hdr__tasto[aria-expanded="true"] .slgn-hdr__tasto-l::after {
  translate: 0 -8px;
  rotate: -90deg;
}

/* -- Il pannello del telefono -- */

.slgn-hdr__panel {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  align-content: center;
  /* Con un cassetto aperto l'elenco puo' diventare piu' alto dello schermo:
     allora il pannello scorre, e "safe" fa si' che quello che sborda finisca
     in fondo, dove ci si arriva scorrendo, e non in cima, dove si perde. */
  align-content: safe center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--hdr-h) + 2rem + env(safe-area-inset-top, 0px)) var(--ws-pad) 2rem;
  background: var(--ws-ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ws-move), visibility var(--ws-move);
}

.slgn-hdr__panel[hidden] { display: grid; }

.slgn-hdr.is-open .slgn-hdr__panel {
  opacity: 1;
  visibility: visible;
}

.slgn-hdr__panel-in {
  width: min(88rem, 100%);
  margin: 0 auto;
}

.slgn-hdr__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ws-line-soft);
}

/* Solo le righe dell'elenco, non quelle dei figli: dentro a un cassetto
   un filo e un'entrata a scaletta per ogni riga sarebbero un secondo
   elenco grande dentro al primo. */
.slgn-hdr__lista > li {
  border-bottom: 1px solid var(--ws-line-soft);
  opacity: 0;
  translate: 0 12px;
  transition: opacity var(--ws-move), translate var(--ws-move);
  transition-delay: calc(var(--i, 0) * .05s);
}

.slgn-hdr.is-open .slgn-hdr__lista > li {
  opacity: 1;
  translate: 0 0;
}

.slgn-hdr__lista a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.05rem 0;
  color: var(--ws-paper);
  font-family: var(--ws-display);
  font-size: clamp(1.9rem, 9vw, 2.8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.slgn-hdr__n {
  color: var(--ws-mute);
  font-family: var(--ws-mono);
  font-size: .7rem;
  letter-spacing: .1em;
}

.slgn-hdr__panel-cta { margin: 2rem 0 0; }

/* -- I figli nel pannello: un cassetto -- *
 *
 * La voce resta un collegamento; il pulsante accanto apre e chiude. Il
 * pulsante e' un quadrato da quarantotto, come ogni altra cosa che si tocca
 * qui dentro: la voce e' grande, ma il segno che la apre e' piccolo, e la
 * zona sensibile non puo' essere quella del segno.
 *
 * L'altezza si anima con la riga della griglia, da 0fr a 1fr: e' il modo
 * di arrivare a "alto quanto il contenuto" senza che nessuno lo misuri.
 * Chiuso, il cassetto e' anche invisibile, cosi' i collegamenti dentro non
 * si raggiungono col tasto di tabulazione; la visibilita' torna subito
 * all'apertura e se ne va solo a cassetto chiuso. */
.slgn-hdr__riga {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.slgn-hdr__riga > a {
  flex: 1;
  min-width: 0;
}

.slgn-hdr__espandi {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--ws-line);
  background: none;
  color: var(--ws-paper);
  cursor: pointer;
  transition: border-color var(--ws-hover), background var(--ws-hover);
}

.slgn-hdr__espandi .slgn-hdr__freccia {
  width: 14px;
  height: 9px;
}

.slgn-hdr__espandi[aria-expanded="true"] {
  border-color: var(--ws-paper);
}

.slgn-hdr__cassetto {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--ws-move), visibility 0s;
}

.slgn-hdr__ramo:not(.is-aperto) .slgn-hdr__cassetto {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--ws-move), visibility 0s linear .45s;
}

.slgn-hdr__cassetto-in {
  min-height: 0;
  overflow: hidden;
}

.slgn-hdr__sotto {
  margin: 0;
  padding: 0 0 1rem;
  list-style: none;
}

.slgn-hdr__lista .slgn-hdr__sotto a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  min-height: 48px;
  padding: .75rem 0;
  color: var(--ws-silver);
  font-family: var(--ws-sans);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  transition: color var(--ws-hover);
}

.slgn-hdr__lista .slgn-hdr__sotto a:hover,
.slgn-hdr__lista .slgn-hdr__sotto a:focus-visible,
.slgn-hdr__lista .slgn-hdr__sotto a[aria-current="page"] { color: var(--ws-paper); }

/* Il numero dei figli prende la larghezza di "02.1", non di "02": cosi' i
   testi partono tutti dalla stessa colonna. */
.slgn-hdr__sotto .slgn-hdr__n {
  flex: none;
  min-width: 2.6rem;
}

.slgn-hdr__se {
  display: grid;
  gap: .2rem;
}

/* Lo stesso grigio della tendina, per la stessa ragione. */
.slgn-hdr__sd {
  color: rgba(201, 201, 199, .65);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Sotto i 900 pixel le voci in fila non ci stanno: passano nel pannello, e
   in barra resta il tasto. */
@media (max-width: 899px) {
  .slgn-hdr__nav { display: none; }
  .slgn-hdr__tasto { display: block; }
  .slgn-hdr__in { grid-template-columns: auto minmax(0, 1fr); }
  .slgn-hdr__coda .slgn-btn--mini { display: none; }
  .slgn-hdr { --hdr-h: 3.9rem; }
}

/* Testata senza marchio: ne' file ne' nome scritto, e allora il primo posto
   della griglia non si tiene da parte. Sta qui sotto e non accanto alla regola
   di partenza perche' deve valere anche dentro il ritaglio del telefono, dove
   le colonne diventano due: senza marchio ne resta una, e il tasto del menu ha
   gia' il suo 'justify-self: end' che lo porta a destra da solo. */
.slgn-hdr__in--nudo { grid-template-columns: minmax(0, 1fr) auto; }

/* A menu aperto la pagina sotto non si scorre: e' il pannello che si legge. */
body.slgn-menu-aperto { overflow: hidden; }


/* ================================================================== *
 * IL PIEDE
 *
 * Quattro fasce, e una regola sola che le tiene insieme: ogni colonna di
 * ogni fascia comincia con lo stesso filo, alla stessa altezza.
 *
 * E' il modo in cui si allinea un piede senza dover allineare i contenuti.
 * Le colonne hanno dentro cose diverse - un nome grande, un'etichetta
 * piccola, un elenco - e cercare di farle partire tutte dalla stessa
 * baseline e' una battaglia persa: le altezze delle righe sono diverse per
 * costruzione. Il filo invece e' una riga sola, uguale per tutti, e sopra
 * quella riga l'occhio smette di misurare il resto.
 * ================================================================== */

.slgn-ftr {
  background: var(--ws-ink);
}

/* -- L'invito -- */

.slgn-ftr__cta {
  padding: clamp(3.5rem, 8vw, 7rem) var(--ws-pad);
  border-top: 1px solid var(--ws-line-soft);
}

/* Sull'avorio i ruoli si invertono ridefinendo i token, non riscrivendo le
   regole: tutto quello che sta dentro si adegua da solo, pulsante compreso. */
.slgn-ftr__cta--carta {
  --ws-paper: #0d0d0d;
  --ws-ink: #ece9e1;
  --ws-silver: #3a3a38;
  --ws-mute: #6c6d70;
  --ws-line: rgba(0, 0, 0, .22);
  --ws-line-soft: rgba(0, 0, 0, .1);

  border-top: 0;
  background: #ece9e1;
  color: #0d0d0d;
}

.slgn-ftr__cta-grid {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
  .slgn-ftr__cta-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end;
  }
}

.slgn-ftr__cta-lato {
  display: grid;
  gap: 1.6rem;
  align-content: end;
}

.slgn-ftr__cta-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin: 0;
}

.slgn-ftr__oltre {
  color: inherit;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: .15rem;
  transition: opacity var(--ws-hover);
}

.slgn-ftr__oltre:hover { opacity: .6; }

/* -- Le colonne e i recapiti: la stessa griglia, lo stesso filo -- */

.slgn-ftr__corpo,
.slgn-ftr__recapiti {
  padding: 0;
  border-top: 0;
}

.slgn-ftr__corpo,
.slgn-ftr__recapiti,
.slgn-ftr__coda { padding-inline: var(--ws-pad); }

.slgn-ftr__corpo { padding-top: clamp(3rem, 6vw, 4.5rem); }
.slgn-ftr__recapiti { padding-top: clamp(2rem, 4vw, 3rem); }

.slgn-ftr__griglia,
.slgn-ftr__recapiti-grid {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
}

@media (min-width: 760px) {
  .slgn-ftr__griglia {
    grid-template-columns: minmax(0, 1.6fr) repeat(var(--slgn-cols, 2), minmax(0, 1fr));
    align-items: start;
  }

  .slgn-ftr__recapiti-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 2fr);
    align-items: start;
  }
}

/* Il filo in cima a ogni colonna: e' l'allineamento. */
.slgn-ftr__chi,
.slgn-ftr__col,
.slgn-ftr__rlato,
.slgn-ftr__dl {
  padding-top: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid var(--ws-line-soft);
}

.slgn-ftr__nome {
  margin: 0 0 .7rem;
  color: var(--ws-paper);
  font-family: var(--ws-display);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.slgn-ftr__testo {
  margin: 0;
  max-width: 34ch;
  color: var(--ws-mute);
  font-size: .92rem;
  font-weight: 380;
  line-height: 1.6;
}

.slgn-ftr__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}

.slgn-ftr__col a {
  position: relative;
  display: inline-block;
  color: var(--ws-silver);
  font-size: .92rem;
  text-decoration: none;
  transition: color var(--ws-hover), padding-left var(--ws-move);
}

.slgn-ftr__col a:hover,
.slgn-ftr__col a:focus-visible {
  padding-left: .55rem;
  color: var(--ws-paper);
}

/* Il trattino che compare rientrando: senza, lo spostamento sembra un
   difetto; con, sembra una freccia. */
.slgn-ftr__col a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: .3rem;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--ws-hover);
}

.slgn-ftr__col a:hover::before,
.slgn-ftr__col a:focus-visible::before { opacity: 1; }

/* -- I recapiti -- */

.slgn-ftr__dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.2rem 2rem;
  margin: 0;
}

.slgn-ftr__dl > div {
  display: grid;
  gap: .25rem;
  align-content: start;
}

.slgn-ftr__dl dt {
  color: var(--ws-mute);
  font-family: var(--ws-mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.slgn-ftr__dl dd {
  margin: 0;
  color: var(--ws-paper);
  font-size: .98rem;
  font-weight: 500;
}

.slgn-ftr__dl a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--ws-line);
  transition: border-color var(--ws-hover);
}

.slgn-ftr__dl a:hover { border-bottom-color: var(--ws-paper); }

.slgn-ftr__social {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.slgn-ftr__social a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .9rem;
  border: 1px solid var(--ws-line-soft);
  color: var(--ws-silver);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color var(--ws-hover), color var(--ws-hover), background var(--ws-hover);
}

.slgn-ftr__social a i {
  font-style: normal;
  font-size: .8em;
  transition: transform var(--ws-hover);
}

.slgn-ftr__social a:hover {
  border-color: var(--ws-line);
  background: var(--ws-ink-lift);
  color: var(--ws-paper);
}

.slgn-ftr__social a:hover i { transform: translate(2px, -2px); }

/* -- La chiusura -- */

.slgn-ftr__coda {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
}

/* Il marchio disteso.
 *
 * Sta a contorno e non pieno: pieno, a questa misura, sarebbe un muro
 * chiaro in fondo alla pagina e ruberebbe la scena all'ultima riga, che e'
 * l'unica con dell'informazione dentro. A contorno resta un segno grande e
 * leggero - e la larghezza la prende dal contenitore, non da un corpo
 * scritto a mano, cosi' su qualunque schermo finisce dove finisce la
 * pagina. */
.slgn-ftr__marchio {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  color: transparent;
  font-family: var(--ws-display);
  font-size: clamp(4rem, 21vw, 20rem);
  font-weight: 600;
  line-height: .82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(236, 233, 225, .28);
  user-select: none;
}

.slgn-ftr__marchio--pieno {
  color: rgba(236, 233, 225, .07);
  -webkit-text-stroke: 0;
}

/* PNG originali: altezza comune, proporzioni native e spazio fra le parole. */
.slgn-outline-logo {
  display: inline-flex;
  align-items: center;
  gap: .16em;
  vertical-align: middle;
  line-height: 1;
  -webkit-text-stroke: 0;
}

.slgn-outline-logo img {
  display: block;
  flex: none;
  width: auto;
  height: .72em;
  max-width: none;
  object-fit: contain;
  filter: invert(1);
}

.slgn-about--chiara .slgn-outline-logo img { filter: none; }
.slgn-ftr__marchio .slgn-outline-logo { font-size: clamp(32px, 12vw, 220px); }

.slgn-ftr__riga {
  display: grid;
  gap: .8rem 2rem;
  padding-top: clamp(1.2rem, 2.5vw, 1.8rem);
  border-top: 1px solid var(--ws-line-soft);
  color: var(--ws-mute);
  font-family: var(--ws-mono);
  font-size: .66rem;
  letter-spacing: .08em;
}

@media (min-width: 760px) {
  .slgn-ftr__riga {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 2fr) auto;
    align-items: baseline;
  }
}

.slgn-ftr__cop,
.slgn-ftr__credito { margin: 0; }

.slgn-ftr__legali {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slgn-ftr__legali a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ws-hover);
}

.slgn-ftr__legali a:hover { color: var(--ws-paper); }

/* Dove si tocca col dito, quarantaquattro pixel.
 *
 * "Privacy" e "Cookie" erano alti dodici: la parola si legge, ma la zona che
 * risponde al tocco e' quella dodici, e a meta' dei tentativi non succede
 * niente. Sono anche i due collegamenti che una persona cerca quando ha gia'
 * un motivo per essere seccata.
 *
 * L'area cresce senza che cresca lo spazio: il rientro verticale e' compensato
 * da un margine negativo uguale, quindi la riga in fondo resta dov'era e il
 * bersaglio e' il doppio. Il rientro orizzontale non si tocca - allargarlo
 * farebbe ballare la spaziatura fra le voci. */
@media (hover: none) {
  /* Lo stacco fra le righe cresce con il bersaglio, ed e' la parte che
     mancava. Il rientro di 16 sopra e sotto rende la zona sensibile alta 48,
     ma la riga della lista resta alta 16: quando le due voci vanno a capo -
     su un telefono ci vanno sempre - il passo fra una riga e l'altra e' 16
     piu' 6 di stacco, cioe' 22, e due bersagli da 48 si accavallano per 26
     pixel. In quella fascia risponde "Cookie" anche quando il dito e' su
     "Privacy": il bersaglio piu' grande, senza questo, peggiora proprio la
     cosa che voleva sistemare. 2,1rem sono 33,6: 16 piu' 33,6 fa 49,6, e i
     due bersagli tornano separati. Su una riga sola lo stacco verticale non
     si applica, quindi dove non si va a capo non cambia niente. */
  .slgn-ftr__legali { gap: 2.1rem 1.4rem; }

  .slgn-ftr__legali a {
    display: inline-block;
    padding-block: 16px;
    margin-block: -16px;
  }

  /* Il marchio in testata: l'immagine e' alta trentacinque, il collegamento
     ne misurava trenta. Stesso rimedio. */
  .slgn-hdr__mark {
    padding-block: 7px;
    margin-block: -7px;
  }
}


/* ================================================================== *
 * Movimento ridotto
 *
 * Il pannello compare e sparisce senza scivolare, la barra non si ritira:
 * una testata che va e viene mentre si scorre e' esattamente il movimento
 * che da' fastidio a chi ha chiesto di ridurlo.
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
  .slgn-hdr,
  .slgn-hdr__bar,
  .slgn-hdr__panel,
  .slgn-hdr__lista li,
  .slgn-hdr__voce::after,
  .slgn-hdr__tasto-l,
  .slgn-hdr__tasto-l::after {
    transition: none !important;
  }

  .slgn-hdr.is-hidden { translate: none; }
  .slgn-hdr__lista li { translate: none; }

  /* La tendina compare e basta, senza scendere: resta solo la dissolvenza,
     che e' breve e non sposta niente. Il cassetto si apre di colpo. */
  .slgn-hdr__tendina,
  .slgn-hdr__gruppo.is-aperto .slgn-hdr__tendina,
  .slgn-hdr:not(.is-js) .slgn-hdr__gruppo:hover .slgn-hdr__tendina,
  .slgn-hdr:not(.is-js) .slgn-hdr__gruppo:focus-within .slgn-hdr__tendina { translate: none; }

  .slgn-hdr__freccia,
  .slgn-hdr__cassetto,
  .slgn-hdr__ramo:not(.is-aperto) .slgn-hdr__cassetto {
    transition: none !important;
  }
}


/* ================================================================== *
 * L'interruttore pubblico delle versioni
 *
 * Perche' sta in chrome.css e non in v2.css.
 *
 * Questo interruttore serve anche a chi sta guardando la prima versione per
 * passare alla seconda. Su quella pagina v2.css non viene nemmeno caricato
 * (e' un foglio aggiuntivo della Story), quindi le sue regole non sarebbero
 * mai viste da chi ha bisogno di questo interruttore proprio per andare alla
 * Story. Chrome.css, invece, sta su tutte le pagine.
 * ================================================================== */

/* L'interruttore sta in basso a destra: l'icona tonda da quaranta per
   quaranta sta in un angolo, e basta tenerla sollevata sopra la barra
   della vetrina. Prima stava in alto perche' in basso non c'era posto:
   la vetrina aveva la barra di avanzamento a 30 px dal fondo e la riga
   "La storia di Logan" / "Scroll" occupava da 575 a 624 px. Quelle
   misure erano prese quando l'interruttore era un nastro con due parole
   scritte, largo mezza schermata. Adesso e' un'icona che sta in un
   angolo, e basta.
   I 44 pixel: la barra di avanzamento sta a 30 px dal fondo, un'icona
   alta quaranta appoggiata a 18 le finirebbe sopra. A 44 la sua fascia
   comincia dove quella della barra e' gia' finita. Il safe-area serve
   ai telefoni con la barra di sistema in fondo: senza, l'icona finisce
   sotto. Il valore di ripiego e' zero, cosi' dove non c'e' non cambia
   niente. */
.slgn-switch {
  position: fixed;
  bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  right: 14px;
  z-index: 90;
}

/* Chiuso e' un'icona sola, non due parole. E' la scelta giusta:
   l'interruttore serve tre volte in una visita - si guarda l'altra
   versione, si torna indietro, magari si torna ancora - e per il resto
   del tempo deve sparire. Due parole scritte in alto a destra, anche
   minimali, restano del testo appoggiato sopra al sito; un segno solo
   sta fermo e non racconta nulla finche' non serve.

   E sta ancora in chrome.css e non in v2.css perche' serve anche a chi
   e' sulla prima versione per arrivare alla seconda, e li' v2.css non
   viene nemmeno caricato - e' un foglio aggiuntivo della Story.
   Chrome.css invece sta su tutte le pagine. */

/* Il tasto: il summary di <details>. Quadrato quaranta, angolo pieno,
   senza fondo: e' un'icona che galleggia, non una pillola. Il triangolino
   che il browser mette da solo sul summary si toglie in due punti -
   Firefox guarda list-style, WebKit guarda il marcatore dedicato. */
.slgn-switch__tasto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
  list-style: none;
  transition: border-color .25s ease, color .25s ease;
}

.slgn-switch__tasto::-webkit-details-marker { display: none; }

.slgn-switch__tasto:hover,
.slgn-switch__tasto:focus-visible {
  border-color: #fff;
  color: #fff;
}

/* Aperto, il tasto resta visibile e prende il bordo pieno: si vede che il
   segno che ha aperto il menu e' lo stesso che lo chiude. */
.slgn-switch[open] .slgn-switch__tasto {
  border-color: #fff;
  color: #fff;
}

/* Le voci: un pannellino che sale sopra al tasto, allineato a destra.
   L'icona sta in fondo allo schermo, un pannello che scende uscirebbe
   dalla pagina; sale verso l'alto. Fondo scuro e sfocatura perche' sotto
   c'e' la pagina qualsiasi cosa ci sia; l'ombra lo stacca senza che il
   bordo debba fare tutto il lavoro. */
.slgn-switch__voci {
  position: absolute;
  top: auto;
  bottom: 48px;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: rgba(10, 10, 10, .92);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .85);
}

.slgn-switch__voce {
  display: block;
  padding: 12px 18px;
  color: rgba(255, 255, 255, .6);
  font-family: var(--ws-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  border-radius: 8px;
  /* Niente white-space: nowrap: le due parole vogliono stare su una riga
     ciascuna, e nowrap le incollerebbe in un'unica striscia. */
  transition: color .25s ease;
}

/* Dove c'e' un dito, l'area toccabile di ogni voce deve essere alta almeno
   quaranta pixel: il testo e' piccolo, e il rientro verticale la porta
   sopra i quaranta senza forzare un'altezza fissa. */
@media (hover: none) {
  .slgn-switch__voce {
    padding-block: 18px;
  }
}

/* La voce corrente in bianco pieno; le altre salgono al bianco solo al
   passaggio, con un fondo appena visibile a dire che sono premuti. */
.slgn-switch__voce--qui {
  color: #fff;
}

.slgn-switch__voce:not(.slgn-switch__voce--qui):hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

/* Sotto i 900 px i margini sono piu' stretti, quindi l'interruttore
   si avvicina di sei pixel al bordo. */
@media (max-width: 900px) {
  .slgn-switch {
    bottom: calc(38px + env(safe-area-inset-bottom, 0px));
    right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slgn-switch__tasto,
  .slgn-switch__voce {
    transition: none !important;
  }
}

/* Frameless paw; appearance follows menu state, never sticky touch hover. */
.slgn-hdr .slgn-hdr__tasto.slgn-hdr__tasto--zampa {
  width: 58px;
  min-width: 58px;
  height: 58px;
  padding: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ws-paper, #eeedea);
  text-align: center;
}
.slgn-hdr__tasto--zampa .slgn-hdr__zampa { display: block; margin: 0 auto 3px; }
.slgn-hdr__tasto--zampa .slgn-hdr__menu-label { display: block; font: 700 10px/1.2 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.slgn-hdr .slgn-hdr__tasto.slgn-hdr__tasto--zampa[aria-expanded="false"],
.slgn-hdr .slgn-hdr__tasto.slgn-hdr__tasto--zampa[aria-expanded="true"] {
  color: var(--ws-paper, #eeedea);
  background: transparent;
  border-radius: 0;
}
.slgn-hdr .slgn-hdr__tasto--zampa:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 0; }

.slgn-footer-social { padding: 20px 0; color: var(--ws-paper, #eeedea); }
.slgn-footer-social > .slgn-wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.slgn-footer-social p { margin:0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.slgn-footer-social nav { display:flex; flex-wrap:wrap; gap:10px; }
.slgn-footer-social a { display:grid; place-items:center; width:44px; height:44px; border:1px solid #555; border-radius:50%; color:inherit; }
.slgn-footer-social a:hover { color:#050505; background:#eeedea; border-color:#eeedea; }
.slgn-footer-social a:focus-visible { outline:2px solid currentColor; outline-offset:4px; }