/* ============================================================
   apollinaire.css — dick.wursten.be/apollinaire
   3 oktober 2026

   Aanvulling op de gedeelde stylesheet; vervangt de opmaak die
   op de gedichtpagina's in font-tags, inline styles en
   auto-styles zat. De aankomstpagina gebruikt voorlopig nog
   style.css; de regels daarvoor staan onderaan al klaar.
   ============================================================ */

@import url("../styles.css");


/* ---------- Kop van een gedichtpagina ---------- */

/* De regel "Guillaume Apollinaire · Le Bestiaire ..." boven elk gedicht. */
.series {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--color-muted);
  margin: 1rem 0 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-rule);
}

/* Een losse regel boven het gedicht, b.v. "find the mouse first...". */
.lead { font-style: italic; color: var(--color-muted); margin: 0 0 1.2rem; }

audio { display: block; margin: 0 0 1.5rem; max-width: 100%; }


/* ---------- Paralleltekst: origineel naast vertaling ---------- */

.tweekolom {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 0;
  margin: 0 0 1.5rem;
}

.tweekolom td {
  width: 50%;
  vertical-align: top;
  border: 0;
  padding: 0 1rem 1.5rem 0;
}
.tweekolom td + td { padding: 0 0 1.5rem 1rem; }

/* De titels van gedicht en vertalingen: even groot, of het nu de
   Franse (h1) of een vertaalde (h2) is. */
.tweekolom h1,
.tweekolom h2 {
  font-family: var(--font-base);
  font-size: 1.15em;
  font-weight: bold;
  font-style: normal;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 0.3rem;
  padding: 0;
  border: 0;
}

/* Een strofe is één <p> met <br> tussen de versregels. */
.tweekolom p { margin: 0 0 1rem; }

.tweekolom img { margin: 0; }


/* ---------- De noten van Apollinaire ---------- */

.note { font-size: var(--fs-small); }
.note .label { font-style: italic; }
.note img { margin-bottom: 1rem; }
.note img.right { float: right; margin-left: 1rem; }

/* Toelichting van Dick Wursten: zelfde letter als de rest (Georgia),
   maar herkenbaar als kanttekening: kleiner, grijzer, ingesprongen
   en met een inktblauwe lijn links. */
.dw {
  font-family: var(--font-base);
  font-size: var(--fs-small);
  color: var(--color-muted);
  margin: 1.2rem 0 1.2rem 0.25rem;
  padding: 0.1rem 0 0.1rem 0.9rem;
  border-left: 3px solid var(--color-accent);
}
.tweekolom p.dw { margin: 1.2rem 0 1.2rem 0.25rem; }
.dw p:last-child { margin-bottom: 0; }
.note .dw { font-size: inherit; }


/* ---------- Smal scherm: kolommen onder elkaar ---------- */

@media (max-width: 40rem) {
  .tweekolom, .tweekolom tbody, .tweekolom tr, .tweekolom td {
    display: block;
    width: 100%;
  }
  .tweekolom td, .tweekolom td + td { padding: 0 0 1.5rem; }
}


/* ---------- Navigatie: thuis links, vorige/volgende rechts ---------- */

nav { display: flex; }
nav a:first-child {
  color: var(--color-accent);
  font-weight: 600;
}
nav a:nth-child(2) { margin-left: auto; }


/* ---------- Aankomstpagina ---------- */

.home > h1 { margin-top: 1rem; }

/* Het portret rechtsboven. */
.portrait {
  float: right;
  width: 9rem;
  margin: 0 0 1rem 1.5rem;
  font-size: var(--fs-small);
  color: var(--color-muted);
}
.portrait img { width: 100%; }
.portrait figcaption { text-align: left; margin-top: 0.4rem; }

.intro {
  clear: both;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 1.5rem 0 2rem;
}
@media (max-width: 48rem) {
  .intro { grid-template-columns: 1fr; }
}

/* De miniaturen: alle even groot. Een afbeelding met een andere
   verhouding wordt bijgesneden (bovenkant blijft in beeld), niet
   vervormd. Elke afdeling opent met haar Orphée. */
.thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 1rem;
  margin: 1rem 0 0;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--color-rule);
}
.thumbnails:last-of-type { border-bottom: 0; }
.thumbnails figure { margin: 0; text-align: center; font-size: 0.85rem; }
.thumbnails img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.thumbnails img:hover { transform: scale(1.05); border-color: var(--color-accent); }
.thumbnails figcaption { margin-top: 0.3rem; text-align: center; }
.thumbnails .orphee img { border-color: var(--color-accent); border-width: 2px; }
.thumbnails .orphee figcaption { font-weight: bold; }

.index { line-height: 1.9; }


/* ---------- Toegevoegd bij het splitsen van de Orpheus-pagina ---------- */

/* Bronvermelding van een vertaling (X.J. Kennedy). */
.credit {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  color: var(--color-muted);
}

/* Vlaggetjes boven de tweetalige inleiding. */
/* Beide vlaggetjes even hoog, zodat de kolommen op dezelfde regel
   beginnen. (styles.css zet height op auto; hier dus vast.) */
.intro > div > img { height: 20px; width: auto; margin: 0 0 0.5rem; }
.intro p:first-of-type { margin-top: 0; }


/* ---------- Poulenc-pagina ---------- */

img.right { float: right; margin: 0 0 1rem 1rem; }

/* De zes liederen met hun opname. */
.playlist { border-collapse: collapse; border: 0; margin: 1rem 0 1.5rem; }
.playlist td { border: 0; padding: 0.25rem 1rem 0.25rem 0; vertical-align: middle; }
.playlist audio { margin: 0; }

/* Drie kolommen: Frans gedicht, Engelse en Nederlandse vertaling.
   De vertalingen staan iets kleiner dan het origineel. */
.driekolom {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 0;
  margin: 2rem 0;
  clear: both;
}
.driekolom td {
  vertical-align: top;
  border: 0;
  padding: 0 1rem 1.5rem 0;
}
.driekolom td + td { font-size: var(--fs-small); }
.driekolom h2,
.driekolom h3 {
  font-family: var(--font-base);
  font-size: 1.1em;
  font-weight: bold;
  font-style: normal;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 0.3rem;
  padding: 0;
  border: 0;
}
.driekolom p { margin: 0 0 1rem; }

@media (max-width: 40rem) {
  .driekolom, .driekolom tbody, .driekolom tr, .driekolom td {
    display: block;
    width: 100%;
  }
  .driekolom td:empty { display: none; }
}


/* ---------- Orphée-pagina's: het gedicht op de tegenoverliggende bladzijde ---------- */

/* In de uitgave van 1911 staat de houtsnede op de ene bladzijde en
   het gedicht midden op de andere. De cel met het facsimile van het
   gedicht wordt daarom verticaal gecentreerd; links blijft links. De
   cel wordt herkend aan de alt-tekst van de afbeelding. */
.tweekolom td:has(> img[alt="Orphée (facsimile)"]) { vertical-align: middle; }

/* Deze vier pagina's hebben één titel bovenaan (Orpheus) en geen
   titels boven de gedichten. */
main > h1 { margin: 0 0 1.5rem; }

/* Tweede tweetalige blok zonder vlaggetjes (Orpheus-pagina). */
h2 + .intro { margin-top: 0.75rem; }