@font-face {
  font-family: "Crimson Pro";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/fonts/CrimsonPro-Regular-Latin-VariableFont_wght.woff2) format("woff2");
}

@font-face {
  font-family: "Crimson Pro";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/fonts/CrimsonPro-Regular-LatinExt-VariableFont_wght.woff2) format("woff2");
}

@font-face {
  font-family: "Crimson Pro";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(/fonts/CrimsonPro-Italic-Latin-VariableFont_wght.woff2) format("woff2");
}

@font-face {
  font-family: "Crimson Pro";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(/fonts/CrimsonPro-Italic-Latin-VariableFont_wght.woff2) format("woff2");
}

:root {
    /* Typographical scale (16, 18, 21, 24, 28, 32, 36, 42, 48)
       Assumes the default size of 16px, but scales gracefully. */
    --font-size-small: calc(16rem / 16);
    --font-size-body: calc(21rem / 16);
    --font-size-subtitle: calc(28rem / 16);
    --font-size-title: calc(36rem / 16);

    --vertical-measure: calc(28rem / 16);
    --page-max-width: 60rem; /* 16px * 60 = 960px */

    --color-background: hsl(60deg 7% 12%);
    --color-body-text: hsla(0deg 0% 100% / 0.77);
    --color-meta-text: hsla(0deg 0% 100% / 0.60);
    --color-link: white;
    --color-primary-accent: hsl(47deg 74% 69%); /* dark yellow */
    --color-secondary-accent: hsl(13deg 67% 57%); /* orange-red */
    --color-tertiary-accent: hsl(176deg 90% 35%); /* green */
    --color-medium-gray: hsla(0deg 0% 100% / 0.3);

    --color-code-background: hsl(60deg 8% 20%);
    --color-code-text: white;
    --color-inline-code-background: var(--color-code-background);
    --color-inline-code-text: var(--color-body-text);

    --weight-normal: 300;
    --weight-bold: 400;
    --weight-bolder: 600;
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Crimson Pro", Georgia, serif;
    font-size: var(--font-size-body);
    font-weight: var(--weight-normal);
    background-color: var(--color-background);
    color: var(--color-body-text);
}

h1 {
    font-size: var(--font-size-title);
    font-weight: var(--weight-bolder);
    line-height: calc(var(--vertical-measure) * 1.5);
    color: var(--color-primary-accent);
}

h2 {
    font-size: var(--font-size-subtitle);
    font-weight: var(--weight-bold);
    line-height: var(--vertical-measure);
    margin-top: calc(var(--vertical-measure) * 1.0);
    margin-bottom: calc(var(--vertical-measure) * 0.5);
    color: var(--color-secondary-accent);
}

a, a:visited {
    color: var(--color-link);
    text-underline-offset: 3px;
    text-decoration-color: var(--color-secondary-accent);
    text-decoration-thickness: 1.5px;
    transition: color 150ms;
}

a:hover, a:focus {
    color: var(--color-tertiary-accent);
}

a:focus {
    outline: 1px dashed var(--color-primary-accent);
}

strong {
    font-weight: var(--weight-bolder);
}

/***********************************
 Code blocks and markup
 **********************************/
pre { /* this would ideally state `pre:has(code)` but it's not supported in Firefox yet */
    /* override the inline background color of the syntax highligher */
    background-color: var(--color-code-background) !important;
    padding: 0.5rem 1rem 1rem 1rem;
}
/* code blocks */
code {
    font-family: monospace;
    font-size: var(--font-size-small);
    color: var(--color-code-text);
}
/* inline code */
code:not(pre > code) {
    font-family: monospace;
    background-color: var(--color-inline-code-background);
    color: var(--color-inline-code-text);
    padding: 0.2rem;
    border-radius: 0.2rem;
}

/***********************************
 Main content section
 **********************************/
#main-content {
    max-width: var(--page-max-width);
    margin: 0 auto;
    line-height: var(--vertical-measure);
    padding: 0 1rem var(--vertical-measure) 1rem;
}

/***********************************
 Header
 **********************************/
header {
    max-width: var(--page-max-width);
    margin: 0 auto;
    margin-bottom: var(--vertical-measure);
    padding: 0 1rem;
}

#top {
    display: flex;
    justify-content: flex-end;
}

#top a {
    background-color: var(--color-inline-code-background);
    border-bottom: 0.3rem solid var(--color-secondary-accent);
    color: var(--color-link);
    display: block;
    padding: 0.5rem 0.8rem 0.5rem 1rem;
    text-decoration: none;
}

#top a:hover,
#top a:focus {
    background-color: var(--color-tertiary-accent);
    transition: background-color 150ms;
}

#top-nav {
    display: none;
}

#bottom-nav {
    margin: calc(1 * var(--vertical-measure)) 1rem 0 1rem;
}

#bottom-nav ul {
    list-style-type: none;
    border-top: 1px solid var(--color-medium-gray);
}

#bottom-nav ul li a {
    padding: 1rem 0 1rem 1rem;
    border-left: 0.3em solid transparent;
    color: var(--color-body-text);
    display: block;
    text-decoration: none;
    border-bottom: 1px solid var(--color-medium-gray);
}

#bottom-nav ul li a:hover,
#bottom-nav ul li a:focus,
.back-to-top:hover,
.back-to-top:focus {
    color: var(--color-link);
    background-color: var(--color-tertiary-accent);
    transition: background-color 150ms, color 150ms;
}

#bottom-nav ul li.active a {
    border-left: 0.3em solid var(--color-secondary-accent);
}

#bottom-nav ul li.active a:hover,
#bottom-nav ul li.active a:focus {
    border-left: 0.3em solid var(--color-secondary-accent);
    transition: border-color 150ms;
}

.back-to-top {
    display: block;
    margin: var(--vertical-measure) 1rem;
    padding: 0.5rem 1rem;
    line-height: 1.5;
    color: var(--color-body-text);
    background-color: var(--color-inline-code-background);
    text-decoration: none;
}

/***********************************
 Homepage
 **********************************/
#homepage-title {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: var(--vertical-measure);
}

#homepage-intro-text {
    font-size: var(--font-size-subtitle);
    margin-bottom: var(--vertical-measure);
    line-height: 1.2;
}

#homepage-image {
    width: 100%;
    max-width: 16rem;
    margin: 0 auto;
    display: block;
    margin-bottom: var(--vertical-measure);
}

#homepage-container ul {
    margin-left: 1em;
}

#homepage-container li {
    margin-bottom: var(--vertical-measure);
}

/***********************************
 Major reading blocks on the page
 (blog posts, about me)
 **********************************/
.reading-block {
    margin: 0 auto;
    max-width: 43rem; /* 688px */
    hyphens: auto;
}

.reading-block p,
.reading-block ol,
.reading-block ul,
.reading-block pre,
.reading-block blockquote {
    margin-bottom: calc(var(--vertical-measure) * 0.5);
}
/* A hack for Hugo embeds and shortcodes where things like
 * YouTube videos are generated without any class, and can't be
 * specifically styled to distance it from surrounding text. */
.reading-block div {
    margin-bottom: var(--vertical-measure);
}
/* Nullify the hack above on certain pages. */
.reading-block.list-page div {
    margin-bottom: 0;
}

.reading-block ol,
.reading-block ul {
    margin-left: 1.2em;
}

.reading-block ol {
    list-style-type: decimal;
}

.reading-block blockquote {
    padding-left: 0.9em;
    font-style: italic;
    border-left: 0.3rem solid var(--color-tertiary-accent);
}

.reading-block img {
    max-width: 100%;
}

.reading-block table {
    width: 100%;
    margin-bottom: var(--vertical-measure);
    border-collapse: collapse;
    border-spacing: 0;
}

.reading-block table th,
.reading-block table td {
    padding: 0.5rem 0.5rem 0.5rem 0;
}

.reading-block table td {
    border-top: 1px solid var(--color-medium-gray);
}

.reading-block hr {
    border: none;
    border-top: 1px solid var(--color-medium-gray);
    margin: var(--vertical-measure) auto;
}

.reading-block .post-meta {
    font-size: var(--font-size-small);
    line-height: var(--vertical-measure);
    color: var(--color-meta-text);
    margin-bottom: calc(var(--vertical-measure) * 0.5);
}

/***********************************
 Two-column layouts
 **********************************/
.column-left {
    margin-bottom: var(--vertical-measure);
}

#speaking-photo {
    margin-bottom: 0;
}

/***********************************
 List pages
 **********************************/
.list-page h1 {
    margin-bottom: calc(var(--vertical-measure) * 0.5);
}

.list-page h1:not(:first-of-type) {
    margin-top: calc(var(--vertical-measure) * 1.5);
}

.list-page .meta {
    font-size: var(--font-size-small);
    color: var(--color-meta-text);
    display: inline-block;
    font-feature-settings: "tnum";
}

/***********************************
 Book information
 **********************************/

.book-information {
    display: grid;
    grid-template-columns: 8rem 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 1rem;
    row-gap: var(--vertical-measure);
}

.book-title {
    grid-column: 1 / 3;
}

.reading-block div.book-meta {
    margin-bottom: 0;
}


/***********************************
 Media queries
 **********************************/
@media only screen and (min-width: 29rem) {
    /* 29rem * 16px (default size) = 464px */
    header {
        margin-bottom: calc(2 * var(--vertical-measure));
    }

    #top-nav {
        padding-top: 0.5rem;
        display: flex;
        justify-content: flex-end;
    }

    #top-nav ul {
        list-style: none;
        display: flex;
    }

    #top-nav ul li a {
        padding: 1rem 0.7rem;
        border-bottom: none;
        color: var(--color-body-text);
        display: block;
        text-decoration: none;
    }

    #top-nav ul li a:hover,
    #top-nav ul li a:focus {
        color: var(--color-tertiary-accent);
    }

    #top-nav ul li.active {
        border-bottom: 0.3rem solid var(--color-secondary-accent);
    }

    #top-nav ul li.active a {
        color: var(--color-link);
    }

    #bottom-nav,
    #top,
    .back-to-top {
        display: none;
    }

    .list-item-layout {
        display: grid;
        grid-template-columns: 4fr minmax(5rem, 1fr) 1fr;
        column-gap: 1rem;
    }

    .book-information {
        row-gap: 0;
    }

    .book-title {
        grid-column: 2 / 3;
        grid-row: 1;
    }

    .book-cover {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .book-meta {
        grid-column: 2 / 3;
        grid-row: 2;
    }

    .book-meta br {
        display: none;
    }

    .reading-block .book-meta p.post-meta {
        margin-bottom: 0;
    }
}

@media only screen and (min-width: 39rem) {
    /* 39rem * 16px (default size) = 624px */
    #top-nav ul li a {
        padding: 1rem 1.5rem;
    }

    #speaking-photo {
        height: auto;
    }
}

@media only screen and (min-width: 46rem) {
    /* 46rem * 16px (default size) = 736px */
    :root {
        --font-size-small: calc(18rem / 16);
        --font-size-body: calc(24rem / 16);
        --font-size-subtitle: calc(32rem / 16);
        --font-size-title: calc(42rem / 16);

        --vertical-measure: calc(32rem / 16);
    }

    #homepage-container {
        display: grid;
        grid-template-columns: 33% 13% 8% 13% 33%;
        grid-template-areas:
            "title   title   title   title   image"
            "intro   intro   intro   intro   intro"
            "lc      lc      .       rc      rc"
            "bc      bc      bc      bc      bc";
            /* lc: left content area
             * rc: right content area
             * bc: bottom content area
             */
        row-gap: var(--vertical-measure);
        padding: 0 1rem;
    }

    #homepage-title {
        grid-area: title;
        align-self: center;
        font-size: 4rem;
        margin-bottom: 0;
    }

    #homepage-intro-text {
        grid-area: intro;
        margin-bottom: 0;
    }

    #homepage-image {
        grid-area: image;
        max-width: 100%;
        align-self: center;
        margin-bottom: 0;
    }

    #homepage-bottom-content {
        grid-area: bc;
    }

    #homepage-left-content {
        grid-area: lc;
    }

    #homepage-right-content {
        grid-area: rc;
    }
    #homepage-container ul {
        margin-left: 0;
    }
}

@media only screen and (min-width: 50rem) {
    /* 50rem * 16px (default size) = 800px */
    .reading-block ul,
    .reading-block ol {
        margin-left: 0;
    }

    .reading-block blockquote {
        margin-left: -1.2em;
    }
}

@media only screen and (min-width: 60rem) {
    /* 60rem * 16px (default size) = 960px */
    .reading-block img.wide {
        max-width: 136%;
        margin-left: -18%;
    }
}

@media only screen and (min-width: 68rem) {
    /* The weird numbers are so that it extends
     * the image to 1000px width with default values. */
    .reading-block img.wide {
        max-width: 143.679%;
        margin-left: -21.839%;
    }

    /* Move titles to the right of the page */
    .list-page h1 {
        text-align: right;
        position: relative;
        width: 10rem;
        right: 13rem;
        top: 2.8rem;
        margin-top: -1em;
        margin-bottom: 0;
    }
    .list-page h1:not(:first-of-type) {
        margin-top: -1em;
    }

    /***********************************
     Two-column layouts
     **********************************/
    .column-container {
        display: flex;
        justify-content: center;
        gap: 3rem;
    }

    .column-left {
        max-width: 18rem;
    }

    #speaking-photo {
        height: auto;
        overflow: hidden;
    }

    #speaking-photo img {
        margin-left: -8rem;
        max-width: none;
    }

    #photo {
        width: 18rem;
    }

    #homepage-container {
        padding: 0;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --color-background: hsl(60deg 75% 97%);
        --color-body-text: hsla(0deg 0% 0% / 0.80);
        --color-meta-text: hsla(0deg 0% 0% / 0.70);
        --color-link: black;
        --color-primary-accent: hsla(0deg 0% 0% / 0.80); /* dark gray */
        --color-secondary-accent: hsl(13deg 74% 42%); /* darker orange-red  */
        --color-medium-gray: hsla(0deg 0% 0% / 0.3);

        --color-inline-code-background: hsla(0deg 0% 0% / 0.13);
        --color-code-background: hsl(60deg 8% 15%);

        --weight-normal: 400;
        --weight-bold: 500;
        --weight-bolder: 700;
    }

    a, a:visited {
        text-decoration-thickness: 2px;
        font-weight: var(--weight-bold);
    }

    #homepage-image {
        filter: contrast(2) invert(100%);
        mix-blend-mode: multiply;
    }

    .reading-block img.blend {
        mix-blend-mode: multiply;
    }

}