@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Lora:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@300;400;600&display=swap');

@page {
  size: A4;
  margin: 25mm 20mm 25mm 20mm;
  @bottom-right {
    content: counter(page);
    font-family: 'Montserrat', sans-serif;
    font-size: 9pt;
    color: #888888;
  }
}

/* Text sizes are in rem, so they follow the reader's browser text-size
   setting; 1rem = 12pt at the default 16px. */
html {
  font-size: 100%;
}

body {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.9167rem;
  line-height: 1.7;
  color: #2b2b2b;
  background-color: #f4f4f6;
  margin: 0;
  padding: 0;
}

.page {
  background: white;
  width: 210mm;
  min-height: 297mm;
  padding: 30mm 25mm;
  margin: 25px auto;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  box-sizing: border-box;
}

h1 {
  font-family: 'Cinzel', serif;
  font-size: 1.8333rem;
  font-weight: 700;
  color: #1a2a3a;
  margin-top: 0;
  margin-bottom: 10px;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 1px;
}

.subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8333rem;
  font-weight: 400;
  color: #666666;
  text-align: center;
  margin-bottom: 35px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  border-bottom: 2px solid #c5a059;
  padding-bottom: 18px;
  line-height: 1.6;
}

.epigraph {
  margin: 30px auto 40px auto;
  padding: 20px 25px;
  background-color: #faf8f5;
  border-left: 4px solid #c5a059;
  border-right: 1px solid #f0e6d2;
  border-top: 1px solid #f0e6d2;
  border-bottom: 1px solid #f0e6d2;
  border-radius: 2px;
  max-width: 85%;
}

.epigraph p {
  font-style: italic;
  font-size: 0.9583rem;
  color: #333333;
  margin: 0;
  line-height: 1.6;
  text-align: center;
  text-indent: 0;
}

.epigraph footer {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  color: #888888;
  margin-top: 10px;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 1px;
}

h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.1667rem;
  font-weight: 700;
  color: #1a2a3a;
  margin-top: 36px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 6px;
  letter-spacing: 0.5px;
}

h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #c5a059;
  margin-top: 24px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

p {
  margin-top: 0;
  margin-bottom: 14px;
  text-align: justify;
  text-justify: inter-word;
  text-indent: 1.5em;
}

p.no-indent {
  text-indent: 0;
}

ul {
  margin-top: 8px;
  margin-bottom: 16px;
  padding-left: 24px;
}

li {
  margin-bottom: 8px;
  text-align: justify;
}

blockquote {
  font-style: italic;
  border-left: 3px solid #c5a059;
  margin: 18px 0;
  padding-left: 18px;
  color: #4a4a4a;
}

blockquote footer {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  color: #777777;
  margin-top: 6px;
}

.bibliography-list {
  list-style-type: none;
  padding-left: 0;
}

.bibliography-list li {
  text-indent: -1.5em;
  padding-left: 1.5em;
  margin-bottom: 10px;
  font-size: 0.8333rem;
}

.footer-note {
  margin-top: 50px;
  padding-top: 20px;
  border-top: 1px solid #eeeeee;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7083rem;
  color: #999999;
  text-align: center;
  letter-spacing: 1px;
}

/* Screen reading: larger type than the printed page, same on every width */
@media screen {
  html {
    font-size: 115%;
  }
  body {
    font-size: 1rem;
  }
  .epigraph p {
    font-size: 1.0417rem;
  }
}

/* Phones/narrow windows: no gray canvas, no A4 sheet padding on top of it */
@media screen and (max-width: 820px) {
  body {
    background: #ffffff;
  }
  .page {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 24px 16px 32px;
    box-shadow: none;
  }
  .epigraph {
    max-width: none;
    padding: 16px;
  }
  /* justified text leaves wide gaps between words at phone width */
  p, li {
    text-align: left;
    hyphens: auto;
  }
  .subtitle br {
    display: none;
  }
}

@media print {
  /* Print/PDF stays fixed: 1rem = 12pt regardless of browser settings */
  html {
    font-size: 12pt;
  }
  body {
    background: white;
  }
  .page {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
  h2, h3 {
    page-break-after: avoid;
  }
  .new-page {
    break-before: page;
    page-break-before: always;
  }
}

/* Essays index (/essays/) */
.page.essay-index {
  min-height: 0;
}

.back-link {
  display: inline-block;
  margin-bottom: 24px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #888888;
  text-decoration: none;
}

.back-link:hover {
  color: #c5a059;
}

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

.essay-list li {
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid #eeeeee;
  text-align: left;
}

.essay-list li:last-child {
  border-bottom: 0;
}

.essay-list a {
  font-family: 'Cinzel', serif;
  font-size: 1.1667rem;
  font-weight: 700;
  color: #1a2a3a;
  text-decoration: none;
  letter-spacing: 0.5px;
}

.essay-list a:hover {
  color: #c5a059;
}

.essay-list .essay-subtitle {
  display: block;
  margin-top: 6px;
  color: #666666;
}

/* Drafts: places where the author adds his own experience. Visible on
   screen and in print, so nothing slips through unfilled. */
.todo {
  background: #fff3cd;
  border: 1px dashed #c5a059;
  border-radius: 2px;
  padding: 0 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85em;
  font-style: normal;
  color: #7a5c12;
}