/* molven.org — foglio di stile. Minimale per scelta.
   Un solo file, nessun framework, nessun JavaScript.
   Il carattere e' Inconsolata, lo stesso del sito originale, ospitato in locale. */

@font-face {
  font-family: "Inconsolata";
  src: url("/caratteri/inconsolata.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --testo:   #1c1c1c;
  --tenue:   #6b6b6b;
  --riga:    #e2e2e2;
  --sfondo:  #ffffff;
  --link:    #1c1c1c;
  --misura:  34rem;        /* larghezza di lettura */
  --pagina:  52rem;        /* contenuto + barra laterale */
  --barra:   11rem;        /* larghezza della barra laterale */
}

@media (prefers-color-scheme: dark) {
  :root {
    --testo: #e6e6e6; --tenue: #9a9a9a; --riga: #2e2e2e;
    --sfondo: #131313; --link: #e6e6e6;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 3.5rem 1.5rem 6rem;
  background: var(--sfondo);
  color: var(--testo);
  font: 400 1rem/1.66 "Inconsolata", ui-monospace, "SF Mono", Menlo, monospace;
  max-width: var(--pagina);
  margin-inline: auto;
}

/* ---------- testata ---------- */

.testata { margin-bottom: 3rem; }

.testata a { text-decoration: none; }

.marchio { margin: 0; }

.marchio img {
  display: block;
  width: 190px;
  max-width: 60vw;
  height: auto;
}

/* il logo e' scuro su fondo trasparente: in tema scuro va schiarito */
@media (prefers-color-scheme: dark) {
  .marchio img { filter: invert(1) brightness(1.1); }
}

.sottotitolo {
  color: var(--tenue);
  font-size: 0.9rem;
  font-style: italic;
  margin: 0.2rem 0 0;
}

/* ---------- articolo ---------- */

article h1 {
  font-size: 1.6rem;
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 0.4rem;
}

.data {
  display: block;
  color: var(--tenue);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  margin-bottom: 2rem;
}

article h2 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 2.4rem 0 0.6rem;
}

article h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 2rem 0 0.5rem;
}

p { margin: 0 0 1.15rem; }

/* il testo degli articoli e' giustificato, con sillabazione italiana
   per evitare i buchi bianchi tipici della giustificazione */
article p,
article li {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

a { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

/* immagini dentro il testo: a tutta larghezza della colonna, mai deformate */
article img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.8rem auto;
}

figure { margin: 1.8rem 0; }
figcaption {
  color: var(--tenue);
  font-size: 0.82rem;
  font-style: italic;
  margin-top: 0.4rem;
}

blockquote {
  margin: 1.6rem 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--riga);
  color: var(--tenue);
}

/* player incorporati: si adattano alla colonna */
iframe { max-width: 100%; border: 0; margin: 1.8rem 0; display: block; }

/* ---------- lista compatta degli articoli ---------- */

.elenco { list-style: none; margin: 0; padding: 0; }

.elenco li { border-top: 1px solid var(--riga); }
.elenco li:last-child { border-bottom: 1px solid var(--riga); }

.voce {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: 0.85rem 0;
  text-decoration: none;
  color: inherit;
}

.voce:hover .titolo { text-decoration: underline; }

.voce img {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: cover;
  display: block;
  background: var(--riga);
}

/* segnaposto quando l'articolo non ha miniatura */
.voce .vuota {
  width: 3.25rem; height: 3.25rem;
  background: var(--riga);
}

.titolo { font-size: 1rem; line-height: 1.35; display: block; }

.voce time {
  display: block;
  color: var(--tenue);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  margin-top: 0.2rem;
}

/* ---------- archivio ad albero ---------- */

.archivio { margin-top: 0; }

.archivio > h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tenue);
  font-weight: 600;
  margin: 0 0 0.8rem;
}

.anno { border-top: 1px solid var(--riga); }
.anno:last-of-type { border-bottom: 1px solid var(--riga); }

.anno > summary {
  cursor: pointer;
  padding: 0.5rem 0;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.anno > summary::-webkit-details-marker { display: none; }

/* freccia che ruota all'apertura */
.anno > summary::before {
  content: "›";
  display: inline-block;
  color: var(--tenue);
  transition: transform 0.12s ease;
}
.anno[open] > summary::before { transform: rotate(90deg); }

.anno > summary .quanti {
  margin-left: auto;
  color: var(--tenue);
  font-size: 0.78rem;
}

.mesi { list-style: none; margin: 0 0 0.6rem; padding: 0 0 0 1.1rem; }
.mesi > li { margin: 0.35rem 0; }
.mesi a { text-decoration: none; color: var(--tenue); font-size: 0.9rem; }
.mesi a:hover { color: var(--testo); text-decoration: underline; }

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

.piede {
  margin-top: 4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--riga);
  color: var(--tenue);
  font-size: 0.82rem;
}

.piede a { color: var(--tenue); }

@media (max-width: 30rem) {
  body { padding: 2rem 1.1rem 4rem; }
}


/* ---------- impianto a due colonne ---------- */

.impianto {
  display: grid;
  grid-template-columns: minmax(0,1fr) var(--barra);
  gap: 3rem;
  align-items: start;
}

/* la barra laterale resta visibile scorrendo */
.barra { position: sticky; top: 3.5rem; }

/* le pagine di solo testo restano strette: si legge meglio */
article { max-width: var(--misura); }

/* sotto i 46rem la griglia diventa una colonna sola:
   il contenuto viene prima, l'archivio scende in fondo */
@media (max-width: 46rem) {
  .impianto { grid-template-columns: 1fr; gap: 2.5rem; }
  .barra { position: static; }
  .archivio { margin-top: 0; }
}

/* ---------- tassonomie ---------- */

.tassonomia { list-style: none; margin: 0; padding: 0; }
.tassonomia li { margin: 0.3rem 0; }
.tassonomia a {
  text-decoration: none;
  color: var(--tenue);
  font-size: 0.88rem;
  display: flex;
  gap: 0.4rem;
}
.tassonomia a:hover { color: var(--testo); text-decoration: underline; }
.tassonomia .quanti { margin-left: auto; font-size: 0.75rem; opacity: 0.7; }

/* le voci dell'albero sono anche link alla pagina d'archivio dell'anno */
.anno > summary a { text-decoration: none; color: inherit; }
.anno > summary a:hover { text-decoration: underline; }

/* piede della pagina di un articolo */
.tassonomie {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--riga);
  color: var(--tenue);
  font-size: 0.85rem;
}
.tassonomie a { color: var(--tenue); }

/* titolo delle pagine d'archivio */
main > h1 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 1.2rem;
}

/* piu' sezioni nella barra laterale */
.barra .archivio + .archivio { margin-top: 2.2rem; }

/* ---------- menu ---------- */

.testata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 0.6rem;
}

.menu { display: flex; flex-wrap: wrap; gap: 1.1rem; }

.menu a {
  text-decoration: none;
  color: var(--tenue);
  font-size: 0.9rem;
}
.menu a:hover { color: var(--testo); }
.menu a.attivo { color: var(--testo); text-decoration: underline; }

.sottotitolo { margin: 0 0 3rem; }

@media (max-width: 34rem) {
  .testata { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .menu { gap: 0.9rem; font-size: 0.85rem; }
}

/* ---------- player incorporati ---------- */

/* prendono tutta la larghezza della colonna di lettura;
   l'altezza resta quella dichiarata dal servizio (Bandcamp, Mixcloud,
   SoundCloud hanno un'altezza fissa, non proporzionale) */
article iframe {
  width: 100% !important;
  max-width: 100%;
  border: 0;
}

/* i video invece sono proporzionali: 16:9 */
article iframe[src*="youtube"],
article iframe[src*="vimeo"] {
  aspect-ratio: 16 / 9;
  height: auto !important;
}

/* ---------- nuvola di tag ---------- */

.nuvola {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.7rem;
  line-height: 1.5;
}

.nuvola a {
  text-decoration: none;
  color: var(--tenue);
  transition: color 0.12s ease;
}

.nuvola a:hover { color: var(--testo); text-decoration: underline; }

/* i tag piu' frequenti sono anche piu' scuri, non solo piu' grandi:
   la sola dimensione basta poco a chi distingue male le taglie */
.nuvola a { opacity: 0.72; }
.nuvola a:hover { opacity: 1; }

/* ---------- ricerca ---------- */

.lente {
  display: inline-flex;
  align-items: center;
  color: var(--tenue);
}
.lente:hover { color: var(--testo); }

.nascosto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cerca { margin: 0 0 1rem; }

.cerca input {
  width: 100%;
  font: inherit;
  color: var(--testo);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--riga);
  padding: 0.5rem 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* Via l'anello azzurro del browser, ma il fuoco resta visibile: il bordo
   inferiore diventa spesso e scuro. Toglierlo e basta lascerebbe chi
   naviga da tastiera senza sapere dov'e'. */
.cerca input:focus {
  outline: none;
  border-bottom: 2px solid var(--testo);
  padding-bottom: calc(0.5rem - 1px);
}

.cerca input::placeholder { color: var(--tenue); opacity: 0.8; }

/* la crocetta nativa di Chrome per svuotare il campo */
.cerca input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 0.8em;
  height: 0.8em;
  cursor: pointer;
  background: var(--tenue);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.stato {
  color: var(--tenue);
  font-size: 0.8rem;
  margin: 0 0 1.2rem;
  min-height: 1.2em;
}

.esiti { list-style: none; margin: 0; padding: 0; }
.esiti li { border-top: 1px solid var(--riga); }
.esiti li:last-child { border-bottom: 1px solid var(--riga); }

.esito {
  display: block;
  padding: 0.9rem 0;
  text-decoration: none;
  color: inherit;
}
.esito:hover .titolo { text-decoration: underline; }
.esito .titolo { display: block; font-size: 1rem; line-height: 1.35; }
.esito time {
  display: block;
  color: var(--tenue);
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.frammento {
  margin: 0.45rem 0 0;
  color: var(--tenue);
  font-size: 0.87rem;
  line-height: 1.55;
  text-align: left;
}
.frammento mark {
  background: transparent;
  color: var(--testo);
  font-weight: 700;
}

.aiuto { margin-top: 2.5rem; font-size: 0.85rem; color: var(--tenue); }
.aiuto summary { cursor: pointer; }
.aiuto ul { margin: 0.8rem 0 0; padding-left: 1.1rem; }
.aiuto li { margin-bottom: 0.35rem; }
.aiuto code {
  font-family: inherit;
  background: var(--riga);
  padding: 0.05em 0.35em;
}