/* Giuseppe Sgallari. Il materiale e' il mandolino: fondo di palissandro,
   filetti di madreperla, un verde del golfo di Lerici. Gli unici fogli
   chiari sono gli spartiti. */

/* Caratteri ospitati qui (Google Fonts, licenza SIL OFL), solo latino.
   Federant per i titoli: lettere Liberty, da locandina di concerto del
   1900. Libre Caslon Text per il testo: il carattere da libro dell'epoca.
   Federant ha un peso solo: lo si dichiara per tutti, cosi' il browser non
   inventa un grassetto finto. */
@font-face { font-family: 'Federant'; font-weight: 400 700; src: url('../fonts/Federant-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Libre Caslon Text'; font-weight: 400 500; font-style: normal; src: url('../fonts/LibreCaslonText-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Libre Caslon Text'; font-weight: 600 700; font-style: normal; src: url('../fonts/LibreCaslonText-700.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Libre Caslon Text'; font-weight: 400 700; font-style: italic; src: url('../fonts/LibreCaslonText-400-italic.woff2') format('woff2'); font-display: swap; }

:root {
  --c-wood: #2a1712;
  --c-wood-2: #3d2219;
  --c-wood-3: #4e2c20;
  --c-pearl: #efe6d6;
  --c-pearl-dim: #c9bba5;
  --c-teal: #3f7f7a;
  --c-teal-light: #7fb5ad;
  --c-paper: #ebe3d2;
  --c-bronze: #b08a55;
  --c-steel: #cfd3d0;
  --pearl-sheen: linear-gradient(115deg, #f3ece0 0%, #dccbd8 30%, #bcd8d2 55%, #efe2c8 80%, #f3ece0 100%);

  --font-title: 'Federant', Georgia, serif;
  --font-body: 'Libre Caslon Text', Georgia, serif;

  --measure: 40rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--c-wood); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--c-pearl);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  background:
    radial-gradient(ellipse 80% 60% at 50% 35%, var(--c-wood-3) 0%, transparent 70%),
    linear-gradient(180deg, var(--c-wood-2), var(--c-wood) 60%);
  overflow-x: hidden;
}

a { color: var(--c-teal-light); }
a:hover { color: var(--c-pearl); }
:focus-visible { outline: 2px solid var(--c-teal-light); outline-offset: 3px; }

/* venatura */
.grain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: .5;
  mix-blend-mode: multiply;
}
.masthead, .page, .site-footer { position: relative; z-index: 1; }

/* --- testata: titolo a sinistra, corde a destra ------------------------ */

.masthead {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 1rem 3rem;
  padding: 1.6rem var(--gutter) 1.2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--c-pearl) 18%, transparent);
}

.site-eyebrow {
  margin: 0;
  font-size: .85rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--c-pearl-dim);
}
.site-title {
  margin: .1rem 0 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: .02em;
}
.site-title-link {
  color: transparent;
  background: var(--pearl-sheen);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  text-decoration: none;
}
.site-title-link:hover { background-position: 100% 0; color: transparent; }
.site-subtitle {
  margin: .3rem 0 0;
  font-style: italic;
  color: var(--c-teal-light);
  letter-spacing: .04em;
}

/* --- le corde ----------------------------------------------------------- */

.strings { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.strings-courses { flex: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.course {
  position: relative;
  display: grid;
  grid-template-columns: 2.2rem 11rem 1fr;
  align-items: center;
  min-height: 2.1rem;
  color: var(--c-pearl-dim);
  text-decoration: none;
}
.course-note {
  font-family: var(--font-title);
  font-size: .8rem;
  color: color-mix(in srgb, var(--c-pearl) 45%, transparent);
}
.course-label {
  font-size: 1.05rem;
  letter-spacing: .05em;
  transition: color .2s;
}
.course:hover, .course:focus-visible { color: var(--c-pearl); }
.course.is-active .course-label { color: var(--c-pearl); font-style: italic; }

.course-svg { width: 100%; height: 24px; overflow: visible; }
.string {
  fill: none;
  stroke: var(--c-steel);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
}
/* le corde gravi sono rivestite: bronzo, con la spirale del filo */
.string--wound { stroke: var(--c-bronze); }

/* il tasto di madreperla che "tiene" la corda della pagina aperta */
.course-fret {
  position: absolute;
  right: 18%;
  top: 50%;
  width: .8rem; height: .8rem;
  margin-top: -.4rem;
  border-radius: 50%;
  background: var(--pearl-sheen);
  box-shadow: 0 0 0 2px var(--c-wood), 0 0 10px rgba(191, 216, 210, .45);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .35s, transform .35s;
}
.course.is-active .course-fret { opacity: 1; transform: none; }

.strings-sound {
  flex: none;
  font: inherit;
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--c-pearl-dim);
  background: none;
  border: 1px solid color-mix(in srgb, var(--c-pearl) 25%, transparent);
  border-radius: 2rem;
  padding: .3rem .8rem;
  cursor: pointer;
}
.strings-sound[aria-pressed="true"] { color: var(--c-wood); background: var(--c-teal-light); border-color: transparent; }

/* --- pagine ------------------------------------------------------------- */

.page { padding: 2rem var(--gutter) 4rem; outline: none; }
.page-section { max-width: var(--measure); margin: 0 auto; }
.page-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin: 1rem 0 .5rem;
  color: var(--c-pearl);
}
.lede { font-size: 1.3rem; font-style: italic; color: var(--c-pearl-dim); }
.section-heading { font-family: var(--font-title); font-size: 1.4rem; margin-top: 2.5rem; }
.plain-list { padding-left: 1.2rem; }
.page-loading { text-align: center; color: var(--c-pearl-dim); }

/* --- home: il ritratto nella buca e la pioggia di spartiti ------------- */

.home {
  position: relative;
  min-height: max(36rem, calc(100vh - 11rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 1rem;
  overflow: hidden;
  margin: -2rem calc(var(--gutter) * -1) -4rem;
  perspective: 1200px;
}

.cascade { position: absolute; inset: 0; z-index: 1; }

.sheet {
  position: absolute;
  width: clamp(7rem, 15vw, 12rem);
  transform-origin: 50% 20%;
  box-shadow: 0 10px 22px rgba(10, 4, 2, .55), 0 2px 4px rgba(10, 4, 2, .4);
  transition: translate .3s ease, scale .3s ease, box-shadow .3s ease;
  will-change: transform;
  backface-visibility: visible;
}
.sheet--wide { width: clamp(9rem, 20vw, 16rem); }
.sheet img { display: block; width: 100%; height: auto; filter: sepia(.25) contrast(1.05); }
.sheet:hover, .sheet:focus-visible {
  z-index: 20 !important;
  translate: 0 -1.2rem;
  scale: 1.08;
  box-shadow: 0 24px 40px rgba(10, 4, 2, .65);
}

.rosette {
  position: relative;
  z-index: 5;
  margin: 0;
  width: min(26rem, 78vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.rosette-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
/* il volto prima di tutto: niente viraggi ne' ombre sopra la stampa.
   La buca inquadra solo il viso (nella stampa 1200x1749, il quadrato
   290-990 x 310-1010): la scritta col nome resta fuori. */
.rosette-hole {
  position: relative;
  width: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 50px rgba(0, 0, 0, .55);
}
.rosette-hole img {
  position: absolute;
  width: 171.4%;   /* 1200 / 700 */
  height: auto;
  left: -41.4%;    /* 290 / 700 */
  top: -44.3%;     /* 310 / 700 */
  max-width: none;
  filter: contrast(1.05);
}
.rosette figcaption {
  position: absolute;
  bottom: -2.2rem;
  left: 0; right: 0;
  text-align: center;
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--c-pearl-dim);
  background: color-mix(in srgb, var(--c-wood) 85%, transparent);
  box-shadow: 0 4px 18px rgba(10, 4, 2, .5);
  border-radius: .4rem;
}

.home-motto {
  position: relative;
  z-index: 5;
  margin: 3.5rem 1rem 0;
  max-width: 34rem;
  text-align: center;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--c-pearl);
  /* sotto ci sono gli spartiti chiari: senza una lastra scura il testo
     chiaro sparisce */
  padding: .6rem 1.2rem;
  border-radius: .4rem;
  background: color-mix(in srgb, var(--c-wood) 85%, transparent);
  box-shadow: 0 4px 18px rgba(10, 4, 2, .5);
}

/* --- biografia: il blocco di legno della linea del tempo ------------- */

.page-section--wide { max-width: 72rem; }

/* i colori del legno, letti da cronologia.js per il <canvas> */
#cronologia {
  --tl-front-1: #5e3424;
  --tl-front-2: #351c13;
  --tl-top-1: #84513a;
  --tl-top-2: #4e2c20;
  --tl-end: #2b160f;
  --tl-edge: rgba(10, 4, 2, .5);
  --tl-lip: rgba(239, 230, 214, .32);
  --tl-grain: rgba(20, 8, 4, .25);
  --tl-rule: rgba(239, 230, 214, .10);
  --tl-rule-strong: rgba(239, 230, 214, .28);
  --tl-tick: rgba(239, 230, 214, .5);
  --tl-digits: rgba(239, 230, 214, .82);
  --tl-run: rgba(127, 181, 173, .55);
  margin-top: 1.5rem;
}
#cronologia.is-fullscreen {
  display: flex; flex-direction: column;
  padding: 1rem 1.4rem;
  background: var(--c-wood);
}
#cronologia.is-fullscreen .tl-stage { flex: 1 1 auto; height: auto; }

.tl-stage {
  position: relative;
  height: clamp(22rem, 62vh, 36rem);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 15%, color-mix(in srgb, var(--c-teal) 22%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #1c100c, #24140e 70%, #170c09);
  border: 1px solid color-mix(in srgb, var(--c-pearl) 14%, transparent);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .45);
  cursor: grab;
  outline: none;
  touch-action: pan-y;
  user-select: none;
}
.tl-stage.is-dragging { cursor: grabbing; }
.tl-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--c-teal-light); }
.tl-wood { position: absolute; inset: 0; display: block; }

.tl-readout {
  position: absolute; top: .8rem; left: 0; right: 0; margin: 0;
  text-align: center;
  font-family: var(--font-title); font-weight: 600;
  font-size: 1.5rem; letter-spacing: .3em; text-indent: .3em;
  color: var(--c-pearl);
  pointer-events: none;
}
.tl-readout::after {
  content: ''; display: block;
  width: 2.6rem; height: 2px; margin: .4rem auto 0;
  background: var(--pearl-sheen);
}

.tl-panels { position: absolute; inset: 0; }

/* il cartellino: un'etichetta di carta in piedi sul legno */
.tl-panel {
  position: absolute; left: 0; top: 0;
  width: 150px; margin: 0;
  padding: .45rem .6rem .55rem;
  transform-origin: 50% 100%;
  display: block;
  text-align: left;
  font: inherit;
  color: var(--c-wood);
  background: linear-gradient(#f4ede0, var(--c-paper));
  border: 0;
  border-top: 3px solid var(--c-teal);
  border-radius: 1px;
  box-shadow: 0 .5rem 1.2rem rgba(0, 0, 0, .55);
  cursor: pointer;
  will-change: transform, opacity;
}
.tl-panel[hidden] { display: none; }
.tl-panel:hover, .tl-panel:focus-visible {
  outline: none;
  background: #faf6ee;
  box-shadow: inset 0 0 0 1px var(--c-teal-light), 0 .7rem 1.6rem rgba(0, 0, 0, .6);
}
.tl-panel-thumb {
  display: block; height: 80px; margin: 0 0 .4rem;
  background: #cfc5b2 center top / cover no-repeat;
}
.tl-panel-when {
  display: block;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-teal);
}
.tl-panel[data-span] .tl-panel-when { color: #7a5a2c; }
.tl-panel-title { display: block; margin-top: .1rem; font-size: .95rem; line-height: 1.22; font-weight: 600; }

/* la scheda dell'evento: entra da destra e lascia visibile il legno */
.tl-sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(23rem, 85%);
  z-index: 5000;
  overflow: auto; overscroll-behavior: contain;
  padding: 1.5rem 1.6rem 2rem;
  color: var(--c-wood);
  background: var(--c-paper);
  border-left: 4px solid var(--c-teal);
  box-shadow: -1rem 0 2.5rem rgba(0, 0, 0, .55);
  cursor: auto;
  user-select: text;
}
.tl-sheet-close {
  position: absolute; top: .35rem; right: .6rem;
  padding: .2rem .4rem;
  font: inherit; font-size: 1.4rem; line-height: 1;
  color: inherit; background: none; border: 0; cursor: pointer; opacity: .5;
}
.tl-sheet-close:hover { opacity: 1; }
.tl-sheet-when { margin: 0; font-style: italic; color: var(--c-teal); }
.tl-sheet-title {
  margin: .15rem 0 .9rem; padding-bottom: .7rem;
  font-family: var(--font-title); font-weight: 600; font-size: 1.5rem; line-height: 1.15;
  border-bottom: 1px solid color-mix(in srgb, var(--c-wood) 18%, transparent);
}
.tl-sheet-figure:not(:empty) { margin: 0 0 1rem; }
.tl-sheet-text p { margin: 0 0 .8rem; font-size: 1.02rem; line-height: 1.55; }
.tl-sheet-source { margin: 1rem 0 0; font-size: .8rem; opacity: .65; }

.tl-hint {
  position: absolute; left: 0; right: 0; bottom: .9rem; margin: 0;
  text-align: center;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-pearl) 60%, transparent);
  pointer-events: none;
  transition: opacity .6s ease;
}
.tl-stage.is-touched .tl-hint { opacity: 0; }

/* il bottone a tutto schermo, come in Gazzotti: quattro angoli */
.tl-fullscreen {
  position: absolute; top: .6rem; right: .6rem; z-index: 4000;
  width: 2.1rem; height: 2.1rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-pearl);
  background: rgba(0, 0, 0, .3);
  border: 1px solid color-mix(in srgb, var(--c-pearl) 30%, transparent);
  border-radius: 2px;
  cursor: pointer; opacity: .6;
  transition: opacity .25s ease, background .25s ease;
}
.tl-fullscreen:hover, .tl-fullscreen:focus-visible { opacity: 1; background: rgba(0, 0, 0, .5); }
.tl-fullscreen span { position: relative; display: block; width: .95rem; height: .95rem; }
.tl-fullscreen i { position: absolute; width: .4rem; height: .4rem; border: 1.6px solid currentColor; }
.tl-fullscreen .tl-fs-a { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.tl-fullscreen .tl-fs-b { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.tl-fullscreen .tl-fs-c { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.tl-fullscreen .tl-fs-d { bottom: 0; right: 0; border-left: 0; border-top: 0; }
#cronologia.is-fullscreen .tl-fs-a { top: .22rem; left: .22rem; }
#cronologia.is-fullscreen .tl-fs-b { top: .22rem; right: .22rem; }
#cronologia.is-fullscreen .tl-fs-c { bottom: .22rem; left: .22rem; }
#cronologia.is-fullscreen .tl-fs-d { bottom: .22rem; right: .22rem; }

/* il cursore degli anni, sotto il riquadro */
.tl-rail { margin-top: .7rem; }
.tl-slider {
  display: block; width: 100%; margin: 0; padding: .6rem 0;
  background: none; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.tl-slider::-webkit-slider-runnable-track { height: 2px; background: color-mix(in srgb, var(--c-pearl) 25%, transparent); }
.tl-slider::-moz-range-track { height: 2px; background: color-mix(in srgb, var(--c-pearl) 25%, transparent); }
.tl-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.15rem; height: 1.15rem; margin-top: -.58rem;
  background: var(--pearl-sheen); border: 2px solid var(--c-teal); border-radius: 50%;
  cursor: grab;
}
.tl-slider::-moz-range-thumb {
  width: 1.15rem; height: 1.15rem;
  background: var(--pearl-sheen); border: 2px solid var(--c-teal); border-radius: 50%;
  cursor: grab;
}
.tl-rail-ends {
  display: flex; justify-content: space-between;
  font-size: .8rem; letter-spacing: .1em; color: var(--c-pearl-dim);
}
.tl-empty { color: var(--c-pearl-dim); }

@media (max-width: 760px) {
  .tl-stage { height: clamp(18rem, 55vh, 26rem); }
  .tl-sheet { width: 100%; border-left: 0; }
}

/* --- produzione musicale: il catalogo, come in Gazzotti --------------- */

.page-section--opere { max-width: 46rem; }
.opere { margin-top: 1rem; }

/* la ricerca: un rigo, non un modulo */
.op-tools { margin-bottom: 1.6rem; }
.op-search-label {
  display: block;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-teal-light);
}
.op-search {
  display: block; width: 100%;
  margin: .3rem 0 0; padding: .4rem 0;
  font: inherit; font-size: 1.05rem;
  color: var(--c-pearl);
  background: none;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--c-pearl) 30%, transparent);
  border-radius: 0; outline: none;
  -webkit-appearance: none; appearance: none;
}
.op-search::placeholder { color: color-mix(in srgb, var(--c-pearl) 35%, transparent); }
.op-search:focus { border-bottom-color: var(--c-teal-light); }
.op-search::-webkit-search-cancel-button { -webkit-appearance: none; }

.op-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: .4rem 1rem; margin-top: .5rem;
}
.op-count, .op-sort-label {
  margin: 0;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-pearl-dim);
}
.op-sort { display: flex; align-items: baseline; gap: .5rem; }
.op-sort-btn {
  padding: .15rem .6rem;
  font: inherit; font-size: .8rem; letter-spacing: .08em;
  color: var(--c-pearl-dim);
  background: none;
  border: 1px solid color-mix(in srgb, var(--c-pearl) 25%, transparent);
  border-radius: 1rem;
  cursor: pointer;
}
.op-sort-btn:hover { color: var(--c-pearl); border-color: var(--c-teal-light); }
.op-sort-btn[aria-pressed="true"] { color: var(--c-wood); background: var(--c-teal-light); border-color: transparent; }

/* rubriche: decenni o lettere */
.op-group + .op-group { margin-top: 1.8rem; }
.op-rubric {
  margin: 0 0 .3rem; padding-bottom: .3rem;
  font-family: var(--font-title); font-weight: 400;
  font-size: 1.35rem; letter-spacing: .04em;
  color: var(--c-teal-light);
  border-bottom: 1px solid transparent;
  border-image: var(--pearl-sheen) 1;
}

.op-items { list-style: none; margin: 0; padding: 0; }
.op-item { border-bottom: 1px solid color-mix(in srgb, var(--c-pearl) 12%, transparent); }
.op-item[hidden] { display: none; }

.op-head {
  display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline;
  width: 100%; margin: 0; padding: .6rem .2rem .65rem 0;
  font: inherit; color: inherit; text-align: left;
  background: none; border: 0; cursor: pointer;
}
.op-head:hover { background: color-mix(in srgb, var(--c-pearl) 5%, transparent); }
.op-head:focus-visible { outline: 1px solid var(--c-teal-light); outline-offset: -1px; }
.op-n {
  font-size: .74rem; letter-spacing: .1em;
  color: color-mix(in srgb, var(--c-pearl) 40%, transparent);
  font-variant-numeric: tabular-nums;
}
.op-body { display: block; }
.op-name { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--c-pearl); }
.op-meta {
  display: block; margin-top: .2rem;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-pearl-dim);
}
.op-item[data-incerta] .op-name { font-style: italic; font-weight: 400; }
.op-hit { background: color-mix(in srgb, var(--c-teal-light) 35%, transparent); color: inherit; }

/* la scheda, aperta sul posto */
.op-item.is-open { background: color-mix(in srgb, var(--c-pearl) 5%, transparent); }
.op-record { padding: .2rem .4rem 1rem 2.4rem; font-size: .9rem; }
.op-record dl {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: .3rem 1.1rem; margin: 0;
}
.op-record dt {
  padding-top: .15rem;
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--c-teal-light); white-space: nowrap;
}
.op-record dd { margin: 0; color: var(--c-pearl); }
.op-uncertain {
  margin: 0 0 .6rem;
  font-size: .78rem; font-style: italic; color: var(--c-bronze);
}
@media (max-width: 30rem) {
  .op-record { padding-left: 0; }
  .op-record dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .op-record dt { padding-top: .5rem; }
}
.op-none, .op-loading { color: var(--c-pearl-dim); font-style: italic; }

/* --- produzione musicale ------------------------------------------------ */

.issues {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 2rem 1.5rem;
}
.page-section:has(.issues) { max-width: 64rem; }
.issue img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  box-shadow: 0 8px 18px rgba(10, 4, 2, .5);
  transition: transform .3s ease;
}
.issue a:hover img { transform: rotate(-1.5deg) translateY(-4px); }
.issue h3 { margin: .8rem 0 0; font-size: 1.1rem; color: var(--c-pearl); }
.issue p { margin: 0; font-size: .95rem; color: var(--c-pearl-dim); }
.issue .credit { font-size: .78rem; opacity: .75; }

/* --- progetto: patrocini e ringraziamenti, come in Gazzotti ---------- */

.page-section--patrocini {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid color-mix(in srgb, var(--c-pearl) 12%, transparent);
  text-align: center;
}
.page-section--patrocini .section-heading { margin-top: 0; }
.patrocinio-label {
  margin: 1.8rem 0 .6rem;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-teal-light);
}
.patrocinio-testo { margin: .6rem 0 0; font-size: .95rem; color: var(--c-pearl-dim); }
.loghi {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.2rem 1.6rem;
  margin: 0;
  padding: 0;
}
/* i marchi sono pensati per la carta: su una targhetta chiara, come le
   etichette dentro la cassa del mandolino */
.loghi li {
  display: flex;
  padding: .6rem .9rem;
  background: var(--c-paper);
  border-radius: .3rem;
  box-shadow: 0 6px 14px rgba(10, 4, 2, .45);
}
.logo { display: block; width: auto; max-width: none; }
/* altezze a occhio, come in Gazzotti: uno stemma alto pesa piu' di una scritta */
.logo--terre-castelli { height: 3.8rem; }
.logo--mezaluna { height: 5.5rem; }
.logo--mp { height: 5.5rem; }
.logo--pancetti { height: 5.5rem; }
.logo--pecorari { height: 4.5rem; }

/* --- piede ---------------------------------------------------------------- */

.site-footer {
  padding: 1.5rem var(--gutter);
  font-size: .8rem;
  color: var(--c-pearl-dim);
  text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--c-pearl) 12%, transparent);
}
.noscript-note { text-align: center; }

/* --- schermi stretti: corde a tutta larghezza sotto il titolo ---------- */

@media (max-width: 760px) {
  .masthead { grid-template-columns: 1fr; text-align: center; }
  .strings { flex-direction: column; align-items: stretch; }
  .course { grid-template-columns: 1.8rem 9rem 1fr; }
  .strings-sound { align-self: center; }
  .home { min-height: 34rem; }
  .sheet { width: 6rem; }
  .sheet--wide { width: 8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}