/*
  Long and Short customizations
*/

/*
 * Long and Short
 * Site-specific typography and layout.
 *
 * We intentionally keep all visual customization here rather than
 * modifying the Hugo theme.
 */

/* --------------------------------------------------
   Dark mode
   -------------------------------------------------- */

/*
 * Keep the light paper-like design even when the operating
 * system requests dark mode.
 */
@media (prefers-color-scheme: dark) {
  body {
    background: #f8f6f1;
    color: #222;
    filter: none;
  }

  img {
    filter: none;
  }
}

/* --------------------------------------------------
   Fonts
   -------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;700&display=swap');

/* --------------------------------------------------
   Page
   -------------------------------------------------- */

body {
    font-family: "Lora", Georgia, serif;
    background: #f8f6f1;
    color: #222222;
}

/* --------------------------------------------------
   Typography
   -------------------------------------------------- */

.article {
    max-width: 42rem;
    margin: 0 auto;
    font-size: 1.3rem;
    line-height: 1.7;
}

/* --------------------------------------------------
   Headings
   -------------------------------------------------- */


/* --------------------------------------------------
   Navigation
   -------------------------------------------------- */


/* --------------------------------------------------
   Links
   -------------------------------------------------- */


/* --------------------------------------------------
   Responsive adjustments
   -------------------------------------------------- */

/* Do not invert the entire site when the browser uses dark mode. */
@media (prefers-color-scheme: dark) {
  body {
    background-color: white;
    filter: none;
  }

  img {
    filter: none;
  }

  .article-list {
    box-shadow: 0 0 8px #ccc;
  }
}

/* --------------------------------------------------
   About page
   -------------------------------------------------- */

.about-page main {
  max-width: 40rem;
}

.about-article {
  max-width: 35rem;
  margin: 1rem auto 5rem;
  font-size: .75rem;
  line-height: 1.0;
}

.about-article > h1:first-child {
  margin-top: 0;
}

.about-article > :first-child {
  margin-top: 0;
}