@font-face {
    font-family: 'Edu SA Beginner';
    font-style: normal;
    font-weight: 400;
    src: url('/css/edu-sa-beginner-v1-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('/css/edu-sa-beginner-v1-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('/css/edu-sa-beginner-v1-latin-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('/css/edu-sa-beginner-v1-latin-regular.woff') format('woff'),
        /* Modern Browsers */
        url('/css/edu-sa-beginner-v1-latin-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('/css/edu-sa-beginner-v1-latin-regular.svg#EduSABeginner') format('svg');
    /* Legacy iOS */
}

/* roboto-serif-regular - latin */
@font-face {
    font-family: 'Roboto Serif';
    font-style: normal;
    font-weight: 400;
    src: url('/css/roboto-serif-v7-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('/css/roboto-serif-v7-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('/css/roboto-serif-v7-latin-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('/css/roboto-serif-v7-latin-regular.woff') format('woff'),
        /* Modern Browsers */
        url('/css/roboto-serif-v7-latin-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('/css/roboto-serif-v7-latin-regular.svg#RobotoSerif') format('svg');
    /* Legacy iOS */
}

/* noto-serif-regular - latin */
@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 400;
    src: url('/css/noto-serif-v21-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('/css/noto-serif-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/css/noto-serif-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('/css/noto-serif-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('/css/noto-serif-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/css/noto-serif-v21-latin-regular.svg#NotoSerif') format('svg'); /* Legacy iOS */
}

/* ── Global ── */

html, body {
    background-color: #f8f2e4;
    color: #2a1a0e;
}

a {
    color: #7c2d2d;
}

a:hover {
    color: #a84040;
}

/* ── Homepage hero ── */

@media (max-width: 755px) {
    .titleImage {
        margin-left: -1em;
        margin-right: -1em;
    }
}

#heroTitle {
    font-size: 300%;
    font-weight: bold;
    text-align: center;
    font-family: 'Noto Serif';
    color: #2a1a0e;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

#titlePage p {
    margin-bottom: 1em;
}

#titlePage h2 {
    font-family: 'Noto Serif';
    font-size: 150%;
    color: #7c2d2d;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #c8a87a;
    padding-bottom: 0.3em;
}

/* Override circular treatment for the homepage cover grid */
#titlePage .titleImage {
    margin-bottom: 0;
}

#titlePage .titleImage img {
    border-radius: 8px;
    border: none;
    max-height: none;
    width: 100%;
}

/* ── Table of contents (fancy version on homepage) ── */

.toc ol, .fancytoc ol {
    list-style-type: none;
}
.toc ol {
    margin-left: 1em;
}

.fancytoc > li {
    margin-bottom: 2em;
}

.fancytoc h3 {
    font-family: 'Noto Serif';
    font-size: 220%;
    color: #7c2d2d;
    border-bottom: 2px solid #c8a87a;
    padding-bottom: 0.3em;
    margin-top: 1.5em;
    margin-bottom: 0.2em;
}

.fancytoc h3 + span {
    font-family: 'Noto Serif';
    font-style: italic;
    color: #8b6b4a;
    font-size: 90%;
    display: block;
    margin-bottom: 1.2em;
}

.fancytoc h4 {
    font-family: 'Noto Serif';
    font-size: 80%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8b6b4a;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    display: flex;
    align-items: center;
    gap: 0.8em;
}

.fancytoc h4::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #c8a87a;
}

.fancytoc .personList {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px;
    padding: 0;
}

.fancytoc .person {
    text-align: center;
    width: 140px;
}

.fancytoc .chapterImage {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fancytoc .person:hover .chapterImage {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(92, 26, 26, 0.3);
}

.fancytoc .person a {
    color: #2a1a0e;
    text-decoration: none;
    font-family: 'Noto Serif';
    font-size: 82%;
    line-height: 1.3;
    display: block;
    margin-top: 5px;
}

.fancytoc .person a:hover {
    color: #7c2d2d;
}

/* ── Bio page navigation ── */

.topNav {
    position: relative;
    border-bottom: 1px solid #c8a87a;
    padding: 0.4em 0 0.6em;
    margin-bottom: 1.5em;
}

.topNav .title {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0.4em;
    left: 0;
    font-family: 'Noto Serif';
    font-size: 100%;
    pointer-events: none;
}

.topNav .title a {
    pointer-events: all;
}

.topNav ul {
    font-family: 'Noto Serif';
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
}

.topNav ul .back,
.topNav ul .forward {
    float: none;
}

.bottomNav {
    list-style-type: none;
    font-family: 'Noto Serif';
    font-size: 105%;
    border-top: 1px solid #c8a87a;
    padding-top: 1.5em;
    margin-top: 1em;
}

/* ── Bio page title image (portrait, stays as rounded square) ── */

.titleImage {
    page-break-after: always;
}

h1.chapterTitle {
    font-family: 'Noto Serif','Helvetica';
    display: block;
    text-align: center;
    font-size: 300%;
    font-weight: bold;
    color: #2a1a0e;
    page-break-after: avoid;
}

/* ── Layout ── */

.container {
    margin-left: 1em;
    margin-right: 1em;
}

/* ── Tweets ── */

.tweets li {
    list-style-type: none;
    position: relative;
    margin-top: 1em;
}

.tweets .tweet {
    background-color: #ffffff;
    padding: 1em;
    border-radius: 15px;
    box-shadow: 0 1px 4px rgba(42, 26, 14, 0.1);
}

.tweets .metrics {
    text-align: right;
}

.tweets .metrics .tweetlink {
    color: #b6b6b6;
    font-size: 70%;
    text-decoration: none;
    line-height: 1.8em;
    margin-left: 0.5em;
}

.tweets .metrics span {
    color: #b6b6b6;
    display: inline-block;
    text-align: left;
    font-size: 70%;
    padding-left: 1.2em;
    width: 3.5em;
    height: 1.2em;
    background-size: 1em 1em;
    background-repeat: no-repeat;
    background-position: 0em 0.3em;
}

.tweets .metrics .replies {
    background-image: url('/css/replies.svg');
}

.tweets .metrics .retweets {
    background-image: url('/css/retweets.svg');
}

.tweets .metrics .quotetweets {
    background-image: url('/css/quotetweets.svg');
}

.tweets .metrics .likes {
    background-image: url('/css/likes.svg');
}

.annotation {
    font-family: 'Edu SA Beginner';
    margin-top: 0.5em;
    font-size: 110%;
    color: #5a3e28;
}

/* ── Images in bio pages ── */

.image figure {
    margin-bottom: 2em;
}

.image img {
    border-radius: 15px;
}

.image figcaption {
    font-family: 'Roboto Serif';
    font-size: 80%;
    padding-left: 1em;
    padding-top: 0.5em;
}

.tweets::after {
    font-family: 'Noto Serif';
    content: '#';
    display: block;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1.5em;
    font-size: 300%;
    font-weight: bold;
    color: #7c2d2d;
}

.bottomNav {
    width: 70%;
    margin: auto;
    text-align: center;
    padding-bottom: 100px;
}

.copyright {
    text-align: center;
    color: #aaa;
    font-size: 10px;
    padding-bottom: 10px;
}

/* ── Desktop ── */

@media (min-width: 740px) {
    .titleImage {
        margin-top: 2em;
        margin-bottom: 2em;
    }
    .titleImage img {
        display: block;
        border: 1px solid #c8a87a;
        border-radius: 8px;
        width: 100%;
    }
    .titleImage figcaption {
        font-size: 80%;
        color: #8b6b4a;
        text-align: right;
        margin-top: 0.3em;
    }

    h1.chapterTitle {
        margin-bottom: 1em;
    }

    .container {
        margin-left: auto;
        margin-right: auto;
        width: 780px;
    }

    .tweets li {
        list-style-type: none;
        position: relative;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

    .tweets .tweet {
        background-color: #ffffff;
        padding: 1em;
        margin-top: 1em;
        border-radius: 15px;
        box-shadow: 0 1px 4px rgba(42, 26, 14, 0.1);
    }

    .annotation {
        font-family: 'Edu SA Beginner';
        margin-top: 0.5em;
        margin-left: 1em;
        font-size: 105%;
        color: #5a3e28;
    }

    .image figcaption {
        display: block;
        margin-top: 0.5em;
        padding-left: 0;
    }
    .image figcaption .copyright {
        display: block;
        margin-top: 0.2em;
        font-size: 80%;
        color: #8b6b4a;
    }

}

/* ── Kindle ── */

@media amzn-kf8 {
    .titlePage {
        page-break-inside: avoid;
        margin-top: 1em;
    }
    .titleImage {
        display: inline; /* must be inline or image appears on separate page */
    }
    .titleImage img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        border-radius: 8px;
    }
    h1.chapterTitle {
        display: block;
        font-size: 2em;
        padding-bottom: 1em;
    }
    .annotation {
        font-size: 100%;
    }
}

/* ── Print ── */

@media print {
    .titleImage {
        margin: 1em;
    }
    .titleImage img {
        border: 1px solid #000;
        border-radius: 8px;
    }
    h1.chapterTitle {
        margin-top: 1em;
        font-size: 200%;
    }
    .container {
        margin-left: auto;
        margin-right: auto;
    }
    .tweets li {
        list-style-type: none;
        position: relative;
        margin-right: 260px;
        page-break-inside: avoid;
    }

    .tweets .tweet {
        background-color: #ffffff;
        padding: 1em;
        margin-top: 1em;
        border-radius: 15px;
    }

    .annotation {
        font-family: 'Edu SA Beginner';
        position: absolute;
        top: 0px;
        width: 240px;
        right: -250px;
    }

    .image figcaption {
        display: block;
        position: absolute;
        width: 240px;
        right: -250px;
        bottom: 0px;
    }
}