@font-face {
  font-family: 'DepartureMono';
  src: url('/DepartureMono.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'DepartureMono', monospace;
  font-size: 15px;
  line-height: 1.6;
  color: #e9e1d9;
  background: #16130E;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 24px;
}

/* --- Il Rettangolo Centrale --- */
.site-container {
  display: flex;
  gap: 64px; /* SPAZIO VUOTO tra nav e main: crea l'effetto distaccato */
  width: 100%;
  max-width: 1100px; /* LARGHEZZA AUMENTATA rispetto ai 900px di prima */
  min-height: calc(100vh - 48px);
  border: 1px solid #3a342c;
  background: #1A1610;
  /* border-radius: 4px; */
}

nav {
  width: 180px; /* LARGHEZZA AUMENTATA della barra laterale */
  min-height: 100%;
  padding: 48px 16px 48px 48px; /* Padding asimmetrico per spingere il testo verso destra, staccandolo dal bordo */
  flex-shrink: 0;
  /* RIMOSSO il border-right, ora ci pensa il gap a separare */
}

nav .site-name {
  font-size: 13px;
  color: #555;
  text-transform: lowercase;
  letter-spacing: 0.5px;
  margin-bottom: 32px;
}

nav ul {
  list-style: none;
}

nav ul li a {
  display: block;
  color: #666;
  text-decoration: none;
  padding: 6px 0;
  font-size: 14px;
  transition: color 0.2s;
}

nav ul li a:hover {
  color: #F7BD48;
}

main {
  flex: 1;
  padding: 48px 48px 48px 0; /* Padding asimmetrico: niente padding a sinistra perché ci pensa il gap */
  overflow-x: auto;
}

pre {
  color: #e9e1d9;
  font-family: 'DepartureMono', monospace;
  font-size: 15px;
  line-height: 1.3;
  white-space: pre;
  margin-bottom: 24px;
}

p {
  color: #777;
  margin-bottom: 12px;
}

.placeholder {
  color: #333;
  font-size: 13px;
  margin-top: 24px;
  font-style: italic;
}

img {
  width: 400px;
  height: auto;
  margin: 20px;
  display: block;
}
/* --- Mobile Fix --- */
@media (max-width: 700px) {
  body {
    padding: 0; /* Rimuoviamo il padding del body su mobile per sfruttare tutto lo schermo */
  }

  .site-container {
    flex-direction: column;
    gap: 0;
    min-height: 100vh;
    border: none; /* Opzionale: tolgo il bordo su mobile per dare più respiro */
  }

  nav {
    width: 100%;
    min-height: auto;
    padding: 16px 24px;
    border-bottom: 1px solid #3a342c; /* Linea separatizia sotto la nav */

    /* Trasformo la nav in un layout flessibile orizzontale */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Site-name a sinistra, menù a destra */
  }

  nav .site-name {
    margin-bottom: 0; /* Rimuovo lo spazio sotto il nome che serviva in verticale */
  }

  nav ul {
    display: flex; /* Metto i link uno di fianco all'altro */
    gap: 20px; /* Spazio tra Home, Images, Posts */
  }

  nav ul li a {
    padding: 0; /* Rimuovo il padding verticale dei link */
    font-size: 13px;
  }

  main {
    padding: 32px 24px; /* Padding ridotto per il contenuto su mobile */
    overflow-x: auto;
  }

  /* Assicuriamoci che le immagini non sfondino il layout su mobile */
  img {
    max-width: 100%;
    width: 100%;
    margin: 16px 0;
  }

  /* Se l'ASCII art è troppo larga, su mobile è meglio farla scorrere che rompere il layout */
  pre {
    font-size: 11px; /* Riduco leggermente per far stare più caratteri */
  }
  /* Stile per i link nei post e nel contenuto principale */
main a {
  color: #e9e1d9; /* Stesso colore del testo normale */
  text-decoration: none; /* Rimuove la sottolineatura blu di default */
  border-bottom: 1px solid transparent; /* Prepara lo spazio per la barra dell'hover senza far saltare il layout */
  padding-bottom: 2px; /* Crea un piccolo spazio tra il testo e la barra sotto */
  transition: border-color 0.2s; /* Rende la comparsa della barra morbida */
}

main a:visited {
  color: #e9e1d9; /* Forza il colore a rimanere chiaro anche dopo il click (niente viola!) */
}

main a:hover {
  border-bottom: 1px solid #e9e1d9; /* Fa apparire la barra sotto al passaggio del mouse */
  /* NOTA: Se vuoi che la barra sia gialla (come il menù), cambia #e9e1d9 con #F7BD48 */
 }
}