/* ============================================================
   marot.css — dick.wursten.be/marot

   Zelfstandige stylesheet. Geen @import, geen verwijzing naar
   Google, geen tweede opruimblok onderaan dat de rest weer
   overschrijft.

   Twee lettertypen, beide zelf meegeleverd uit fonts/:
     EB Garamond  voor de koppen en de dichtregels
     Inter        voor de doorlopende tekst

   Achter elk lettertype staat een terugval op wat de computer
   zelf heeft, voor het geval een bestand ooit niet meekomt.

   LET OP bij het bewerken:
   - Dit bestand kent maar één kolombreedte, --kolom. Kop,
     navigatie en tekst hangen er alle drie aan. Wijzig hem op
     die ene plaats in :root en alles blijft uitlijnen.
   - Van EB Garamond zijn 400 en 600 aanwezig, van Inter 400,
     500 en 700. Vraag geen andere dikten: de browser gaat dan
     zelf staan verdikken en dat oogt vuil.
   ============================================================ */


/* ============================================================
   1. Lettertypen
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-500italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-v20-latin-700italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-v33-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-v33-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-v33-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-v33-latin-600italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}


/* ============================================================
   2. Instellingen
   ============================================================ */

:root {
  --tekst-letter: "Inter", "Segoe UI", Roboto, sans-serif;
  --kop-letter:   "EB Garamond", Georgia, "Times New Roman", serif;

  --bg:           #fbf9f5;   /* het papier van de hele pagina */
  --paper:        #fffefb;   /* iets lichter, alleen voor galerijkaders */
  --border:       #cbbfa8;
  --accent:       #5e3c1f;   /* bruin, de kleur van de koppen */
  --accent-light: #b8916e;
  --text:         #2b2520;
  --muted:        #6a665c;
  --link:         #c8661f;
  --link-hover:   #96470f;

  /* Twee breedtes, zoals op de andere sites. De brede kolom draagt de
     kop, de navigatie, het beeld, de galerij en de tabellen; de smalle
     houdt de doorlopende tekst op een leesbare regellengte van ruwweg
     vijfenzeventig tekens. Eén kolom voor alles is te breed om te lezen
     en te smal om het scherm te benutten. */
  --kolom: 60rem;            /* kop, navigatie, beeld, tabellen */
  --tekstkolom: 44rem;       /* alinea's, lijsten, koppen */
  --marge: 1.25rem;          /* ruimte links en rechts binnen de kolom */
}

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


/* ============================================================
   3. Basistypografie
   ============================================================ */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--tekst-letter);
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

h1, h2, h3, h4 {
  font-family: var(--kop-letter);
  font-weight: 600;
  color: var(--accent);
  line-height: 1.25;
  margin: 1.6em 0 .4em;
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

p {
  margin: 0 0 1em;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--link-hover);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid var(--border);
}


/* ============================================================
   4. Kop en navigatie

   De kop is even breed als de tekstkolom eronder en staat op
   dezelfde as. De dubbele lijn eronder loopt dus niet van
   schermrand tot schermrand maar sluit de kolom af.
   ============================================================ */

.site-header {
  max-width: var(--kolom);
  margin: 0 auto;
  padding: 2.5rem var(--marge) 0;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.marot-thumb {
  width: 70px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 3px;
}

.title-block h1 {
  font-size: 1.9rem;
  margin: 0;
}

.subtitle {
  margin: 0;
  color: var(--accent-light);
  font-family: var(--tekst-letter);
  font-size: .95rem;
  font-weight: 500;
}

/* De navigatie draagt de dubbele lijn die de kop afsluit. Tekstlinks,
   geen knopjes: acht omkaderde vakjes bovenaan elke pagina trekken meer
   aandacht dan de titel eronder, en dat is de verkeerde volgorde. */
.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6rem;
  margin-top: 1.2rem;
  padding-bottom: .7rem;
  border-bottom: 3px double var(--border);
  font-family: var(--tekst-letter);
  font-size: .95rem;
}

.topnav a {
  padding: .15rem 0;
  color: var(--accent);
  border-bottom: 2px solid transparent;
}

.topnav a:hover,
.topnav a:focus {
  color: var(--link-hover);
  border-bottom-color: var(--accent-light);
  text-decoration: none;
}

/* De pagina waar u bent staat in de tekstkleur, niet in de linkkleur:
   het is geen aanbod maar een plaatsaanduiding. */
.topnav a.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}


/* ============================================================
   5. Tekstkolom en voet
   ============================================================ */

/* Geen kader en geen eigen achtergrond. De pagina is één vel; kop,
   tekst en voet staan op hetzelfde papier en worden door de lijnen
   gescheiden, niet door een doosje dat in het midden zweeft. */
.content {
  max-width: var(--kolom);
  margin: 0 auto;
  padding: 2.2rem var(--marge) 4rem;
}

/* Doorlopende tekst blijft smal genoeg om prettig te lezen, ook binnen
   de brede kolom. Beeld, galerij, tabellen en het kritisch apparaat
   staan hier bewust niet bij: die mogen de volle breedte gebruiken. */
.content > p,
.content > ul,
.content > ol,
.content > dl,
.content > blockquote,
.content > h1,
.content > h2,
.content > h3,
.content > h4 {
  max-width: var(--tekstkolom);
}

/* De eerste kop in de kolom hoeft geen ruimte boven zich. */
.content > :first-child,
.content > div > :first-child,
.content article > :first-child {
  margin-top: 0;
}

/* De lijn boven de voet is enkel en dun. Twee identieke dubbele lijnen
   maken van de pagina een sandwich; de kop mag zwaarder wegen dan het
   colofon eronder. */
.site-footer {
  max-width: var(--kolom);
  margin: 0 auto;
  padding: 1.1rem var(--marge) 3rem;
  border-top: 1px solid var(--border);
  font-size: .85rem;
  color: var(--muted);
}

.site-footer p {
  margin: 0;
}


/* ============================================================
   6. Beeld en bijschrift
   ============================================================ */

figure {
  margin: 2em 0;
}

figcaption {
  padding-top: .4rem;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--muted);
}

/* Beeld naast de tekst, zoals het Frankrijk-kaartje. */
.float-right {
  float: right;
  width: 180px;
  margin: 0 0 1em 1.5em;
  border: 1px solid var(--border);
  border-radius: 3px;
}

.float-left {
  float: left;
  width: 180px;
  margin: 0 1.5em 1em 0;
  border: 1px solid var(--border);
  border-radius: 3px;
}


/* ============================================================
   7. Opnamen
   ============================================================ */

figure.audio {
  margin: 1.75rem 0;
}

figure.audio audio {
  display: block;
  width: 100%;
}

/* Staan er meer opnamen onder elkaar, dan minder ruimte ertussen. */
figure.audio + figure.audio {
  margin-top: 1rem;
}

/* Bij een reeks: bijschrift bóven de speler, zodat het niet met de
   volgende opname wordt meegelezen. In de pagina:
   <figure class="audio caption-first"> */
figure.audio.caption-first {
  display: flex;
  flex-direction: column-reverse;
}

figure.audio.caption-first figcaption {
  padding: 0 0 .4rem;
}


/* ============================================================
   8. Galerij

   <div class="gallery"> vult vanzelf op met kolommen van minstens
   200 px. Wilt u een vast aantal, zet er columns-2 t/m columns-5
   bij, zoals op de Bach-sites.
   ============================================================ */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .6rem;
  margin: 1.7rem 0;
}

.gallery.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.gallery figure {
  margin: 0;
  padding: .5rem;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
}

.gallery img {
  width: 100%;
  border-radius: 3px;
}

.gallery figcaption {
  margin-top: .4rem;
  padding-top: 0;
}


/* ============================================================
   9. Tabellen en lijsten
   ============================================================ */

table {
  border-collapse: collapse;
  margin: 1.5em 0;
}

td, th {
  padding: .4em .7em;
  border: 1px solid var(--border);
  vertical-align: top;
}

th {
  background: #f5f0e8;
  font-weight: 500;
  text-align: left;
}

/* ------------------------------------------------------------
   Paralleltekst — origineel naast vertaling

   Een tabel zonder randen, want een tabelrij houdt links en
   rechts op één lijn, wat er ook in staat.

       <table class="tweekolom">
         <tr>
           <th>Marot</th>
           <th>Vertaling</th>
         </tr>
         <tr>
           <td>...</td>
           <td>...</td>
         </tr>
       </table>

   De rij met <th> mag weg. Dezelfde klassenaam als op de andere
   sites, zodat de HTML die u schrijft overal dezelfde is.

   De randen van de gewone tabel hierboven worden hier expliciet
   weggehaald: paralleltekst is geen rooster van gegevens.

   Het kritisch apparaat (.apparatus-row, verderop) doet iets
   verwants met een raster per rij. Dat blijft, want daar hoort
   bij elke strofe één blok aantekeningen; deze tabel is voor de
   gevallen waar het regel voor regel moet uitlijnen.
   ------------------------------------------------------------ */

table.tweekolom {
  width: 100%;
  margin: 1.6em 0;
  table-layout: fixed;     /* verdeelt de breedte gelijk over de kolommen */
}

table.tweekolom th,
table.tweekolom td {
  border: none;
  padding: .5em .8em .6em 0;
  vertical-align: top;
}

table.tweekolom th {
  background: none;
  font-family: var(--kop-letter);
  font-weight: 600;
  font-size: .95rem;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding-bottom: .35em;
}

table.tweekolom td {
  line-height: 1.45;
  break-inside: avoid;
}

/* Staat er een gedicht in, dan geldt de maat van .poem-col. */
table.tweekolom td.poem-col {
  font-family: var(--kop-letter);
  font-size: 1.1rem;
  line-height: 1.5;
}

/* Op een telefoon onder elkaar. De linkerkolom krijgt de
   accentkleur, want zonder de kolommen naast elkaar is anders
   niet te zien wat het origineel is en wat de vertaling. */
@media (max-width: 700px) {
  table.tweekolom th { display: none; }

  table.tweekolom tr {
    display: block;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.2em;
    padding-bottom: .6em;
  }

  table.tweekolom td {
    display: block;
    padding: .1em 0;
  }

  table.tweekolom td:first-child { color: var(--accent); }
}

ul, ol {
  margin: 0 0 1em;
  padding-left: 1.5em;
}

li {
  margin-bottom: .2em;
}


/* ============================================================
   10. Gedichten en kritisch apparaat
   ============================================================ */

blockquote.poem,
.poem-col {
  font-family: var(--kop-letter);
  font-size: 1.1rem;
  line-height: 1.5;
}

blockquote.poem {
  margin: 1.5em 0 1.5em 1.5em;
}

.critical-apparatus {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
}

.apparatus-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.apparatus-row:last-child {
  border-bottom: none;
}

.notes-col {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--muted);
}

.poem-col h2 {
  margin: 0 0 .25rem;
  font-size: 1.2rem;
}

.poem-col .subtitle {
  margin-bottom: .5rem;
  font-family: var(--kop-letter);
  font-style: italic;
  color: var(--muted);
}


/* ============================================================
   11. Paginaoverzicht (inhoud.py)

   inhoud.py schrijft drie dingen: een <p class="letterbalk"> met de
   sprongkoppelingen, per letter of groep een <h2>, en daaronder een
   <ul class="inhoudlijst"> met een <li> per pagina. Met
   --omschrijving staat er achter de titel een <br> en een
   <span class="zin"> met de eerste zin.
   ============================================================ */

.letterbalk {
  margin: 1rem 0 2rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--kop-letter);
  font-size: 1.15rem;
}

.letterbalk a {
  margin-right: .7em;
}

/* De letter- of groepskop hoeft in een register minder gewicht dan
   een kop midden in een artikel. */
.inhoudlijst-kop,
h2[id^="letter-"] {
  margin-top: 1.8rem;
  font-size: 1.3rem;
}

ul.inhoudlijst {
  list-style: none;
  margin: .6rem 0 1.8rem;
  padding-left: 0;
}

ul.inhoudlijst li {
  margin-bottom: .7em;
  padding-left: 1.2em;
  text-indent: -1.2em;   /* een omgeslagen titel springt in */
}

ul.inhoudlijst a {
  font-weight: 500;
}

.zin {
  display: inline-block;
  margin-top: .1em;
  padding-left: 1.2em;
  text-indent: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.45;
}


/* ============================================================
   12. Restanten van de FrontPage-conversie

   Lege alinea's werden als tussenruimte gebruikt, en Word zette
   alineas binnen lijstitems. Beide hier onschadelijk gemaakt.
   ============================================================ */

p:empty {
  display: none;
}

li p {
  margin: .2em 0 .4em;
}


/* ============================================================
   13. Smalle schermen
   ============================================================ */

@media (max-width: 768px) {
  .apparatus-row {
    grid-template-columns: 1fr;
    gap: .5rem;
    border-bottom: none;
  }

  .notes-col {
    margin-top: .5rem;
    padding: .5rem .75rem;
    border-left: 3px solid var(--accent-light);
    background: #f5f0e8;
  }
}

@media (max-width: 600px) {
  :root {
    --marge: 1rem;
  }

  .site-header {
    padding-top: 1.5rem;
  }

  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
  }

  .topnav {
    gap: 0 1.1rem;
  }

  .float-right,
  .float-left {
    float: none;
    width: auto;
    max-width: 260px;
    margin: 1.5em auto;
  }

  h1 { font-size: 1.7rem; }
  .title-block h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
}


/* ============================================================
   14. Afdrukken
   ============================================================ */

@media print {
  body {
    background: #fff;
    font-size: 11pt;
  }

  .topnav,
  .site-footer {
    display: none;
  }

  .content {
    max-width: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: none;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  figure,
  .apparatus-row,
  tr {
    break-inside: avoid;
  }
}