/*
 * A könyv stíluslapja. Egyetlen fájl szolgálja ki a nyomtatott oldalt és a
 * weboldalt is, mert a kettő ugyanabból a HTML-ből készül — ha kettéválna,
 * előbb-utóbb eltérnének egymástól, és az egyiket senki nem nézné meg.
 */

@page {
  size: A5;
  margin: 20mm 18mm 22mm;

  @bottom-center {
    content: counter(page);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 9pt;
    color: #666;
  }
}

:root {
  --tinta: #1b1714;
  --halvany: #6b625a;
  --papir: #fbf8f3;
  --vonal: #ddd4c8;
  --kiemeles: #8a3324;
}

html {
  font-size: 11.5pt;
}

body {
  margin: 0 auto;
  max-width: 34em;
  padding: 2rem 1.25rem 4rem;
  background: var(--papir);
  color: var(--tinta);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.62;
  text-align: justify;
  hyphens: auto;
}

/*
 * Borító.
 *
 * A pandoc a metaadatból is csinál egy címlapot; azt elrejtjük, mert most
 * saját borítónk van. A metaadat viszont marad, mert abból lesz a böngésző
 * lapfülének a felirata.
 */
header#title-block-header {
  display: none;
}

.borito {
  position: relative;
  width: 100%;
  aspect-ratio: 148 / 210;
  margin: 0 auto 4rem;
  overflow: hidden;
  background: #16110d;
  page-break-after: always;
  /* A felirat mérete a borító szélességéhez igazodik, nem az ablakéhoz —
     enélkül a `cqw` a nézetablakra vonatkozna, és nyomtatásban elcsúszna. */
  container-type: inline-size;
}

.borito__kep {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
 * A felirat a kép felső harmadában áll, mert a kép oda lett komponálva.
 * A halvány sötétítés nem díszítés: a fal fölfelé világosodik, és e nélkül
 * a krémszínű cím elveszne benne.
 */
.borito__szoveg {
  position: absolute;
  inset: 0 0 auto 0;
  padding: 8% 9% 12%;
  text-align: center;
  background: linear-gradient(to bottom, rgba(10, 7, 5, 0.55), rgba(10, 7, 5, 0));
}

.borito__cim {
  margin: 0;
  font-size: clamp(2rem, 8.5cqw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: #f3e7d2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.borito__alcim {
  margin: 0.9em 0 0;
  font-size: clamp(0.7rem, 2.1cqw, 1rem);
  font-style: italic;
  letter-spacing: 0.02em;
  color: #cbb79a;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

.borito__szerzo {
  position: absolute;
  inset: auto 0 5% 0;
  margin: 0;
  text-align: center;
  font-size: clamp(0.62rem, 1.9cqw, 0.9rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e4d4b8;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

/* Minden fejezet új oldalon kezdődik. */
section.level1 {
  page-break-before: always;
}

section.level1:first-of-type {
  page-break-before: avoid;
}

h1 {
  font-size: 1.9rem;
  line-height: 1.15;
  margin: 0 0 2rem;
  text-align: left;
  hyphens: none;
}

h2 {
  font-size: 1.15rem;
  margin: 2.4rem 0 0.8rem;
  text-align: left;
  hyphens: none;
}

p {
  margin: 0 0 0.85em;
  orphans: 2;
  widows: 2;
}

/*
 * Az első bekezdés nem behúzott, a többi igen — ez a könyvszedés alapja.
 * A `section >` és nem `section.level1 >`, mert a pandoc az alfejezeteket
 * saját szakaszba csomagolja, és azokban ugyanígy kell viselkednie.
 */
section > p + p {
  text-indent: 1.2em;
}

/*
 * A függelékek nem folyó szöveg, hanem apparátus: a szótár címszavai és
 * az időrend tételei akkor olvashatók, ha egy vonalban kezdődnek. A
 * bekezdésbehúzás itt épp az ellenkezőjét érné el.
 */
section.level1[id^="függelék"] > p + p,
section.level1[id^="függelék"] section > p + p {
  text-indent: 0;
  margin-bottom: 0.9em;
}

/* Idézet vagy kép után újrakezdődik a gondolat: ott megint nincs behúzás. */
section > blockquote + p,
section > figure + p,
section > hr + p {
  text-indent: 0;
}

/*
 * Képek. A könyvben kevés van, és mindegyik dokumentum: alaprajz, táblázat,
 * fénykép egy tárgyról. Ezért nem dísznek szedjük, hanem bizonyítéknak —
 * keret nélkül, de aláírással, ami megmondja, honnan való.
 *
 * A `break-inside: avoid` azért kell, mert a Chromium egyébként kettévágja
 * a képet és a képaláírást két oldal között.
 */
figure {
  margin: 1.8em 0;
  text-align: center;
  break-inside: avoid;
  page-break-inside: avoid;
}

figure img {
  max-width: 100%;
  max-height: 26em;
  height: auto;
}

figcaption {
  margin-top: 0.6em;
  font-size: 0.78em;
  line-height: 1.4;
  color: #5b5348;
  text-align: left;
  text-indent: 0;
}

/*
 * Iniciálé — de csak az igazi fejezeteken. Az impresszum és a függelékek
 * nem elbeszélés, ott a nagybetű csak zaj. A kizárás azonosító alapján megy,
 * mert a pandoc a fejezetcímből képzi a szakasz azonosítóját.
 */
section.level1:not(#impresszum):not([id^="függelék"]) > p:first-of-type::first-letter {
  font-size: 2.6em;
  float: left;
  line-height: 0.82;
  padding: 0.08em 0.08em 0 0;
  color: var(--kiemeles);
}

blockquote {
  margin: 1.4em 1.2em;
  padding-left: 1em;
  border-left: 2px solid var(--vonal);
  font-style: italic;
  color: #3d3630;
}

blockquote p {
  text-indent: 0;
}

/*
 * A lábjegyzetek a krónikástól származnak, nem a szerzőtől, és ezt látni is
 * kell rajtuk: elválasztó vonal, kisebb szedés, más szín. A könyv egész
 * szerkezete ezen a kettősségen áll.
 */
/* A pandoc a jegyzeteket <aside>-ba teszi, nem <section>-be. */
.footnotes {
  /*
   * A jegyzetek nem a fejezet végén állnak, hanem minden alfejezet után —
   * így a jegyzet közel van ahhoz a mondathoz, amit helyreigazít, és az
   * olvasónak nem kell lapoznia a poénért. Cserébe látszania kell, hogy ez
   * apparátus és nem fejezetvég: ezért van beljebb húzva, ezért rövid a
   * vonala, és ezért nem ér el a szedéstükör széléig.
   */
  margin: 1.8rem 0 1.2rem 1.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--vonal);
  max-width: 26em;
  font-size: 0.8rem;
  line-height: 1.42;
  color: var(--halvany);
  text-align: left;
  hyphens: none;
  /* Egyben tartani szép volna, de egy hosszabb jegyzetblokk így egész üres
     oldalakat nyit maga előtt. Jobb, ha törhet: a jegyzet nem folyó szöveg,
     az olvasó nem veszíti el a fonalat egy oldaltörésen. */
  page-break-before: avoid;
}

/* A pandoc saját elválasztó vonalat is rak a jegyzetek elé; a keretet a
   fenti border-top adja, a vonal így dupla volna. */
.footnotes > hr {
  display: none;
}

.footnotes ol {
  padding-left: 1.4em;
  margin: 0;
}

.footnotes p {
  text-indent: 0;
  margin-bottom: 0.4em;
}

/* A jegyzet végén álló visszaugró nyíl a képernyőn hasznos, papíron zavaró. */
a.footnote-back {
  text-decoration: none;
  margin-left: 0.3em;
}

a.footnote-ref {
  text-decoration: none;
  color: var(--kiemeles);
  font-size: 0.8em;
  vertical-align: super;
  line-height: 0;
  padding: 0 0.1em;
}

a {
  color: var(--kiemeles);
}

/*
 * A PDF-hivatkozás csak a weboldalon van értelme — a nyomtatott változatban
 * egy „letöltés PDF-ben" gomb önmagára mutatna. A @media print elrejti.
 */
.letoltes {
  margin: -2.5rem 0 3.5rem;
  text-align: center;
  text-indent: 0;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.letoltes a {
  display: inline-block;
  padding: 0.55em 1.4em;
  border: 1px solid var(--vonal);
  border-radius: 2px;
  text-decoration: none;
  color: var(--halvany);
  background: rgba(255, 255, 255, 0.5);
  transition: color 0.15s, border-color 0.15s;
}

.letoltes a:hover {
  color: var(--kiemeles);
  border-color: var(--kiemeles);
}

/*
 * A dátum a borító alatt. Egy sor, nem blokk: itt csak azt kell tudni,
 * mikor készült a példány, amit az olvasó a kezében tart.
 */
.datum {
  margin: 0 0 3rem;
  text-align: center;
  text-indent: 0;
  color: var(--halvany);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/*
 * A jogi blokk, a kötet legvégén. A könyv egyetlen olyan szövege, amely
 * nem szerepet játszik — ezért néz ki másképp: kisebb, halványabb, keret
 * nélkül, de két vonal közé zárva. A nyomtatásban is benne marad: egy
 * paródiajelzés, amely csak a weboldalon van meg, nem jelzés.
 */
.jogi {
  max-width: 30em;
  margin: 4rem auto 0;
  padding: 1.4rem 0;
  border-top: 1px solid var(--vonal);
  border-bottom: 1px solid var(--vonal);
  color: var(--halvany);
  font-size: 0.8rem;
  line-height: 1.55;
  page-break-before: always;
}

.jogi p {
  text-indent: 0;
  margin: 0 0 0.8em;
}

.jogi p:last-child {
  margin-bottom: 0;
}

.jogi__datum {
  letter-spacing: 0.04em;
}

/* Tartalomjegyzék */
nav#TOC {
  page-break-after: always;
  margin-bottom: 3rem;
}

nav#TOC ul {
  list-style: none;
  padding: 0;
}

nav#TOC li {
  margin: 0.45em 0;
}

nav#TOC a {
  text-decoration: none;
  color: var(--tinta);
}

nav#TOC > h2 {
  margin-top: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--vonal);
  margin: 2.5rem auto;
  width: 40%;
}

/* Képernyőn kicsit levegősebb, papíron kötöttebb. */
@media screen {
  body {
    padding-top: 3rem;
  }
}

/*
 * Széles képernyőn a tartalomjegyzék oldalsávba kerül.
 *
 * A törésponthoz a szedéstükör szélessége adja a mértéket: a szövegoszlop
 * 34em, és középre van igazítva, tehát a maradék helyet a két szél osztja
 * el. Az oldalsáv csak akkor fér el ütközés nélkül, ha az egyik oldali
 * maradék legalább akkora, mint az oldalsáv és a margói együtt — innen a
 * 72rem. Ez alatt a jegyzék marad ott, ahol volt: a szöveg fölött, a
 * folyamban. (Korábban `sticky` volt, ami ráült a szövegre — ezért nem az
 * a megoldás, hogy máshová ragasztjuk, hanem hogy kikerül az útból.)
 */
@media screen and (min-width: 72rem) {
  nav#TOC {
    position: fixed;
    top: 3rem;
    left: 2.5rem;
    width: 15rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    margin-bottom: 0;
    padding-right: 0.75rem;
    font-size: 0.86rem;
    line-height: 1.35;
    border-right: 1px solid var(--vonal);
  }

  nav#TOC li {
    margin: 0.7em 0;
  }

  nav#TOC a {
    color: var(--halvany);
    /* A kiemelés bal oldali sávval megy, nem színnel: az olvasó a szeme
       sarkából is látja, hol tart, anélkül hogy a jegyzék hangosabb lenne
       a szövegnél. */
    border-left: 2px solid transparent;
    padding-left: 0.7rem;
    display: block;
    transition: color 0.15s, border-color 0.15s;
  }

  nav#TOC a:hover {
    color: var(--tinta);
  }

  nav#TOC a.aktiv {
    color: var(--tinta);
    border-left-color: var(--kiemeles);
  }
}

@media print {
  /* Nyomtatásban a jegyzék megint rendes, teljes szélességű oldal. */
  nav#TOC {
    position: static;
    width: auto;
    max-height: none;
    border-right: 0;
    font-size: inherit;
  }

  nav#TOC a {
    border-left: 0;
    padding-left: 0;
    color: var(--tinta);
  }
}

/* A borító teljes kifutással, margó nélkül tölti ki az első lapot. */
@page :first {
  margin: 0;
}

@media print {
  .letoltes {
    display: none;
  }

  .borito {
    width: 148mm;
    height: 210mm;
    aspect-ratio: auto;
    margin: 0;
  }

  body {
    max-width: none;
    padding: 0;
    background: #fff;
  }

  nav#TOC {
    position: static;
  }

  a.footnote-back {
    display: none;
  }

  /* Papíron a hivatkozás nem kattintható, tehát ne is látsszon annak. */
  .footnotes a {
    color: inherit;
    text-decoration: none;
  }
}