/*
 ┌────────────────────────────┐
 │   __             _         │
 │  / _│ ___  _ __ │ │_ ___   │
 │ │ │_ / _ \│ '_ \│ __/ __│  │
 │ │  _│ (_) │ │ │ │ │_\__ \  │
 │ │_│  \___/│_│ │_│\__│___/  │
 └────────────────────────────┘ */

/* Instead of calling google for fonts, provision them ourselves. */
@import url("fonts/EB_Garamond/EBGaramond.css");
@import url("fonts/Lateef/Lateef.css");
@import url("fonts/FantasqueSansMono/FantasqueSansMono.css");

/*
 ┌────────────────────────────────────────────────┐
 │                   _       _     _              │
 │  __   ____ _ _ __(_) __ _│ │__ │ │ ___  ___    │
 │  \ \ / / _` │ '__│ │/ _` │ '_ \│ │/ _ \/ __│   │
 │   \ V / (_│ │ │  │ │ (_│ │ │_) │ │  __/\__ \   │
 │    \_/ \__,_│_│  │_│\__,_│_.__/│_│\___││___/   │
 └────────────────────────────────────────────────┘ */

:root {
        --font-main: "EB Garamond", serif;
        --font-code: "Fantasque Sans Mono", monospace;

        --paragraph-size: 1.37rem;
        --paragraph-size-mobile: 1.24rem;
        --paragraph-width: 40rem;
        --paragraph-width-max: 100%;
        --paragraph-line-height: 1.83rem;
        --paragraph-line-height-mobile: 1.9rem;
        --paragraph-font-weight: 500;
        --paragraph-font-bold-weight: 700;
        --paragraph-text-rendering: antialiased;
        --code-size: 1.1rem;
        --code-text-rendering: optimizeSpeed;
        --code-line-height: 1.37rem;
        --header-width: 50rem;
        --header-width-max: 100%;
        --header-font-weight: 600;
        --header-text-rendering: antialiased;
        --subtitle-size: 1.3rem;
        --quote-size: 1.3rem;
        --quote-size-mobile: 1.1rem;
        --quote-line-height: 1.65rem;
        --quote-line-height-mobile: 1.4rem;
        --quote-width: 34.375rem;
        --toc-size: var(--quote-size);
        --toc-width: var(--paragraph-width);
        /* this is around 640px, and @media queries should follow */
        --media-width: 55.125rem;
        --code-width: 44rem;
        --gallery-gap: 1px;
        --gallery-width: calc(100% - var(--gallery-gap));
        --gallery-zoom: 1.069;
        --table-size: 1.2rem;
        --details-size: 1.15rem;
        --footnote-size: 1rem;
        --math-size: 1.37rem;
        --list-margin-left: 2rem;

        --pdf-aspect-ratio: var(--aspect-academy);
        --aspect-academy: 1.375;
        --aspect-wide: 1.778; /* this is 16:9 */
        --aspect-cinemascope: 2.35;
        --aspect-square: 1;
        --aspect-portrait-short: 0.84;
        --aspect-portrait: 0.707;

        --section-one-font-size: 3.7rem;
        --section-two-font-size: 2.2rem;
        --section-three-font-size: 1.7rem;
        --section-four-font-size: 1.4rem;
        --section-five-font-size: 1.3rem;
        --section-six-font-size: 1.2rem;

        /* Colors, duh */

        /* This looks like japanese warm paper */
        --paper-base: #f7f3ee;
        --paper-light: #f8f5f0;
        --paper-hover: #f3eee8;

        --ink-primary: #2b2b2b;
        --ink-secondary: #55514d;
        --ink-muted: #7a746e;

        --ink-caption: #b8b1a9;

        --ink-red: #9e2a2b;
        --ink-indigo: #2f3e46;

        --rule-light: rgba(0, 0, 0, 0.06);
        --rule-softer: rgba(0, 0, 0, 0.035);

        /* --color-text: #3a1616; */
        --color-text: var(--ink-primary);
        --color-text-muted: var(--ink-muted);
        --color-link-text: var(--color-text);
        --color-title: black;
        --color-header: #c31585;
        --color-header-hover: #a53221;
        --color-bg: var(--paper-base);
        --color-white: white;
        --color-selection: #ff7ab15c;
        --color-link: #ff50a2;
        --color-link-visited: #5e416d;
        --color-subtitle: var(--ink-red);
        --code-bg: #fffff9;
        --color-tomb: #ba3925;
        --color-divider: #d7bbbb;

        /* Extra stuff to support custom scripts*/
        --color-snow: #4f86f7;

        --in-text-media-width: 37rem;
}

/*
 ┌───────────────────────────┐
 │  _               _        │
 │ │ │__   ___   __│ │_   _  │
 │ │ '_ \ / _ \ / _` │ │ │ │ │
 │ │ │_) │ (_) │ (_│ │ │_│ │ │
 │ │_.__/ \___/ \__,_│\__, │ │
 │                    │___/  │
 └───────────────────────────┘ */

html {
        scroll-behavior: smooth;
}

body {
        position: relative;
}

body::before {
        content: "";
        position: fixed;
        inset: 0.45rem;
        pointer-events: none;

        border: 1px solid rgba(0, 0, 0, 0.22);
        box-shadow:
                inset 0 0 0 1px rgba(255, 255, 255, 0.35),
                0 0 0 0.5px rgba(0, 0, 0, 0.06);
        z-index: 10;
}

body::before {
        inset: 0.4rem 0.6rem 0.4rem 0.8rem;
}

/* On phones, this whole framing effect is claustrophobic */
@media (max-width: 600px) {
        body::before {
                inset: 0rem;
                display: none;
                border: none;
                box-shadow: none;
        }
}

.article {
        background: var(--color-bg);
        color: var(--color-text);
        font-family: var(--font-main);
        text-rendering: var(--paragraph-text-rendering);
        -webkit-font-smoothing: var(--paragraph-text-rendering);
        font-weight: var(--paragraph-font-weight);
        font-style: normal;
        line-height: 1;
        position: relative;
        cursor: auto;
        tab-size: 4;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 3rem;

        background-image: radial-gradient(
                rgba(0, 0, 0, 0.014) 1px,
                transparent 1px
        );
        background-size: 4px 4px;
}

.katex-html {
        font-size: 87%;
}

/*
 ┌─────────────────────────────────────┐
 │   _                    _            │
 │  │ │__   ___  __ _  __│ │ ___ _ __  │
 │  │ '_ \ / _ \/ _` │/ _` │/ _ \ '__│ │
 │  │ │ │ │  __/ (_│ │ (_│ │  __/ │    │
 │  │_│ │_│\___│\__,_│\__,_│\___│_│    │
 └─────────────────────────────────────┘ */

.header {
        width: var(--header-width);
        max-width: var(--header-width-max);
}

.header .menu {
        font-size: var(--details-size);
        border-bottom: 1px solid var(--color-divider);
        line-height: 1.45;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 0.5rem;
        color: inherit;
        display: flex;
        -ms-flex-flow: row wrap;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
        justify-content: left;
        align-content: flex-star;
        align-items: flex-start;
}

.header .menu span:first-child {
        margin-left: -0.125em;
}

.header .menu span.email a {
        color: inherit;
}

.header .menu br {
        display: none;
}

.header .menu br + span::before {
        content: "\00a0\2013\00a0";
}

.header .menu br + span.author::before {
        content: "\00a0\22c5\00a0";
        color: var(--color-title);
}

.header > .section-1:first-child {
        color: var(--color-title);
        margin-top: 2.25rem;
        margin-bottom: 0;
}

.header > .section-1:only-child {
        border-bottom: 1px solid var(--color-divider);
        padding-bottom: 8px;
}

.header,
.writing {
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 0;
        zoom: 1;
        position: relative;
        padding-left: 0.9375rem;
        padding-right: 0.9375rem;
}

.header::after {
        clear: both;
}

/*
 ┌─────────────────────────────────────┐
 │                _ _   _              │
 │ __      ___ __(_) │_(_)_ __   __ _  │
 │ \ \ /\ / / '__│ │ __│ │ '_ \ / _` │ │
 │  \ V  V /│ │  │ │ │_│ │ │ │ │ (_│ │ │
 │   \_/\_/ │_│  │_│\__│_│_│ │_│\__, │ │
 │                              │___/  │
 └─────────────────────────────────────┘ */

.writing {
        width: var(--paragraph-width);
        max-width: var(--paragraph-width-max);
        font-size: var(--paragraph-size);
        line-height: var(--paragraph-line-height);
        font-family: inherit;
        font-weight: var(--paragraph-font-weight);
        /* TODO: Margins to make pages more compact */
        /* margin-top: 1rem; */
        /* margin-bottom: 0.625rem; */
        text-rendering: inherit;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-hyphens: auto;
        hyphens: auto;
}

.header + .writing {
        margin-top: 1rem;
}

/* Now, we have to do this ugly manual phone version */
@media all and (max-width: 428px) {
        .writing {
                font-size: var(--paragraph-size-mobile);
                line-height: var(--paragraph-line-height-mobile);
                padding-left: 1.37rem;
                padding-right: 1.37rem;
        }
}

.writing::before {
        content: none;
}

/*
 ┌──────────────────────┐
 │  _ _       _         │
 │ │ (_)_ __ │ │ _____  │
 │ │ │ │ '_ \│ │/ / __│ │
 │ │ │ │ │ │ │   <\__ \ │
 │ │_│_│_│ │_│_│\_\___/ │
 └──────────────────────┘ */

a:not(.image):not(.gallery-item):not(.rss-link) {
        cursor: pointer;
        text-decoration: none;
        border-bottom: 1px solid var(--color-link-text);
        color: var(--color-link-text);
        line-height: inherit;
        transition: 80ms;
        font-size: 100%;
        letter-spacing: -0.03rem;
        font-weight: var(--paragraph-font-weight);
}

a:not(.image):not(.gallery-item):hover {
        color: var(--color-link);
        border-bottom: none;
}

/*
 ┌────────────────────────────────────────┐
 │                _   _                   │
 │  ___  ___  ___│ │_(_) ___  _ __  ___   │
 │ / __│/ _ \/ __│ __│ │/ _ \│ '_ \/ __│  │
 │ \__ \  __/ (__│ │_│ │ (_) │ │ │ \__ \  │
 │ │___/\___│\___│\__│_│\___/│_│ │_│___/  │
 └────────────────────────────────────────┘ */

.section-1:last-child {
        padding-bottom: 0;
}

.paragraph + .section-2 {
        border-top: 1px solid var(--color-divider);
}

.paragraph + .section-3 {
        margin-top: 2rem;
}

.paragraph + .paragraph {
        margin-top: 1rem;
}

.section-2:first-of-type {
        margin-top: -0.7rem;
}

.section-2,
.section-3,
.section-4,
.section-5,
.section-6 {
        page-break-after: avoid;
        letter-spacing: -0.005rem;
        font-family: inherit;
        font-weight: var(--header-font-weight);
        color: var(--color-header);
        text-rendering: var(--header-text-rendering);
}

.section-1 {
        padding-top: 0.2rem;
        font-size: var(--section-one-font-size);
        line-height: calc(var(--section-one-font-size) + 0.2rem);
        font-weight: 500;
        letter-spacing: -0.01rem;
}

.section-2 + .paragraph,
.section-3 + .paragraph,
.section-4 + .paragraph,
.section-5 + .paragraph,
.section-6 + .paragraph {
    margin-top: -0.5rem;
}

@media all and (max-width: 428px) {
        .section-1 {
                font-size: calc(var(--section-one-font-size) * 0.84);
                margin-left: -0.2rem;
                padding-right: 3.69rem;
        }
}

.media:has(iframe) + .writing,
.media:has(video) + .writing,
.gallery-container + .writing {
        margin-top: 1.2rem;
}

.writing + .media > video {
        margin-top: 1rem;
}

.writing:has(.admonitionblock:last-child) + .coding {
        margin-top: 1rem;
}

.coding + .writing .admonitionblock {
        margin-top: 1rem;
}

.section-2 {
        padding-top: 2rem;
        font-size: var(--section-two-font-size);
}

.section-3 {
        font-size: var(--section-three-font-size);
}

/* .section-3 + .section-3 { */
/*         margin-top: 1.8rem; */
/* } */

.section-4 {
        font-size: var(--section-four-font-size);
}

.section-5 {
        font-size: var(--section-five-font-size);
}

.section-6 {
        font-size: var(--section-six-font-size);
}

/*
 ┌──────────────────────────────┐
 │                    _         │
 │   __ _ _   _  ___ │ │_ ___   │
 │  / _` │ │ │ │/ _ \│ __/ _ \  │
 │ │ (_│ │ │_│ │ (_) │ ││  __/  │
 │  \__, │\__,_│\___/ \__\___│  │
 │     │_│                      │
 └──────────────────────────────┘ */

.quote {
        font-size: var(--quote-size);
        line-height: var(--quote-line-height);
        max-width: var(--quote-width);
        display: block;
        margin-block-start: 1rem;
        margin-block-end: 1rem;
        margin-inline-start: 40px;
        margin-inline-end: 40px;
}

/* Now, we have to do this ugly manual phone version */
@media all and (max-width: 428px) {
        .quote {
                font-size: var(--quote-size-mobile);
                line-height: var(--quote-line-height-mobile);
        }
}

/*
 ┌────────────────────────────────┐
 │                 _              │
 │   ___ ___ _ __ │ │_ ___ _ __   │
 │  / __/ _ \ '_ \│ __/ _ \ '__│  │
 │ │ (_│  __/ │ │ │ ││  __/ │     │
 │  \___\___│_│ │_│\__\___│_│     │
 └────────────────────────────────┘ */

.center {
        text-align: center;
}

/*
 ┌──────────────────────────────────────────┐
 │      _                                   │
 │   __│ │_ __ ___  _ __   ___ __ _ _ __    │
 │  / _` │ '__/ _ \│ '_ \ / __/ _` │ '_ \   │
 │ │ (_│ │ │ │ (_) │ │_) │ (_│ (_│ │ │_) │  │
 │  \__,_│_│  \___/│ .__/ \___\__,_│ .__/   │
 │                 │_│             │_│      │
 └──────────────────────────────────────────┘ */

.dropcap::first-letter,
.dropcap > p::first-letter {
        float: left !important;
        font-size: 3.4rem !important;
        font-style: normal !important;
        font-weight: 500 !important;
        line-height: 2rem !important;
        margin: -0.85rem 0 0 !important;
}

/*
 ┌────────────────────────────────────┐
 │              _ _                   │
 │   __ _  __ _│ │ │ ___ _ __ _   _   │
 │  / _` │/ _` │ │ │/ _ \ '__│ │ │ │  │
 │ │ (_│ │ (_│ │ │ │  __/ │  │ │_│ │  │
 │  \__, │\__,_│_│_│\___│_│   \__, │  │
 │  │___/                     │___/   │
 └────────────────────────────────────┘ */

.gallery {
        max-width: 100%;
        min-width: 1px;
        width: var(--gallery-width);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-content: flex-start;
        align-items: center;
        gap: var(--gallery-gap) var(--gallery-gap);
        line-height: 0;
        margin-top: 2rem;
        margin-bottom: 2rem;
}

.no-gap {
        gap: 0;
}

.hide-overflow {
        overflow: hidden;
}

.ease-transition {
        transition: all 300ms ease-in-out;
}

/* Makes for a nice effect of natural framing. */
.gallery div {
        /* TODO: Hey, Sandy, sometimes, the border looks AMAZING and sometimes, it's poopoo */
        /* border-style: double; */
        border-color: var(--color-text);
        z-index: 20; /* so it's above the border frame */
}

.gallery-item .item {
        width: 100%;
        height: 100%;
}

.item {
        flex: 1;
        flex-grow: 0;
        width: 1%;
        height: 1%;
        transition: all 700ms ease-in-out;
}

:root {
        --flex-one: calc(100% - var(--gallery-gap));
        --flex-two: calc(100% / 2 - var(--gallery-gap));
        --flex-three: calc(100% / 3 - var(--gallery-gap));
        --flex-four: calc(100% / 4 - var(--gallery-gap));
        --flex-five: calc(100% / 5 - var(--gallery-gap));
}

.flex-1 {
        flex-basis: var(--flex-one);
}

.flex-2 {
        flex-basis: var(--flex-two);
}

.flex-3 {
        flex-basis: var(--flex-three);
}

.flex-4 {
        flex-basis: var(--flex-four);
}

.flex-5 {
        flex-basis: var(--flex-five);
}

.flex-95 {
        flex-basis: calc(95% - var(--gallery-gap));
}

.flex-90 {
        flex-basis: calc(90% - var(--gallery-gap));
}

.flex-85 {
        flex-basis: calc(85% - var(--gallery-gap));
}

.flex-80 {
        flex-basis: calc(80% - var(--gallery-gap));
}

.flex-75 {
        flex-basis: calc(75% - var(--gallery-gap));
}

.flex-70 {
        flex-basis: calc(70% - var(--gallery-gap));
}

.flex-65 {
        flex-basis: calc(65% - var(--gallery-gap));
}

.flex-60 {
        flex-basis: calc(60% - var(--gallery-gap));
}

.flex-55 {
        flex-basis: calc(55% - var(--gallery-gap));
}

.flex-50 {
        flex-basis: calc(50% - var(--gallery-gap));
}

.flex-45 {
        flex-basis: calc(45% - var(--gallery-gap));
}

.flex-40 {
        flex-basis: calc(40% - var(--gallery-gap));
}

.flex-35 {
        flex-basis: calc(35% - var(--gallery-gap));
}

.flex-30 {
        flex-basis: calc(30% - var(--gallery-gap));
}

.flex-25 {
        flex-basis: calc(25% - var(--gallery-gap));
}

.flex-20 {
        flex-basis: calc(20% - var(--gallery-gap));
}

.flex-15 {
        flex-basis: calc(15% - var(--gallery-gap));
}

.flex-10 {
        flex-basis: calc(10% - var(--gallery-gap));
}

.item:hover {
        transform: scale(var(--gallery-zoom));
}

.no-zoom:hover {
        transform: none;
}

@media all and (max-width: 900px) {
        .gallery {
                width: calc(100% - var(--gallery-gap));
        }
        .no-gap {
                gap: 0;
        }
        .flex-2 {
                flex-basis: var(--flex-one);
        }
        .flex-3 {
                flex-basis: var(--flex-two);
        }
        .flex-4 {
                flex-basis: var(--flex-two);
        }
        .flex-5 {
                flex-basis: var(--flex-three);
        }
        .flex-95,
        .flex-90,
        .flex-85,
        .flex-80,
        .flex-75,
        .flex-70,
        .flex-65 {
                flex-basis: var(--flex-one);
        }
}

@media all and (max-width: 600px) {
        .flex-60,
        .flex-55,
        .flex-50,
        .flex-45,
        .flex-40,
        .flex-35,
        .flex-30,
        .flex-25,
        .flex-20,
        .flex-15,
        .flex-10 {
                flex-basis: var(--flex-one);
        }
}

.gallery-container + .gallery-container {
        margin-top: -1.2rem;
}

/*
 ┌─────────────────────────────────┐
 │      _      _        _ _        │
 │   __│ │ ___│ │_ __ _(_) │___    │
 │  / _` │/ _ \ __/ _` │ │ / __│   │
 │ │ (_│ │  __/ ││ (_│ │ │ \__ \   │
 │  \__,_│\___│\__\__,_│_│_│___/   │
 └─────────────────────────────────┘ */

summary {
        padding-right: 1rem;
        padding-top: 0.14rem;
        padding-bottom: 0.14rem;
}

details {
        padding-left: 1rem;
        border: 1px dotted var(--color-text);
        border-radius: 2px;
        margin-bottom: 1.4rem;
}

/*
 ┌───────────────────────────────────────────┐
 │           _           _   _               │
 │  ___  ___│ │ ___  ___│ │_(_) ___  _ __    │
 │ / __│/ _ \ │/ _ \/ __│ __│ │/ _ \│ '_ \   │
 │ \__ \  __/ │  __/ (__│ │_│ │ (_) │ │ │ │  │
 │ │___/\___│_│\___│\___│\__│_│\___/│_│ │_│  │
 └───────────────────────────────────────────┘ */

::selection {
        background: var(--color-selection);
}

/*
 ┌────────────────────────────────────────┐
 │                   __                   │
 │  _ __ ___  _   _ / _│ __ _  ___ ___    │
 │ │ '_ ` _ \│ │ │ │ │_ / _` │/ __/ _ \   │
 │ │ │ │ │ │ │ │_│ │  _│ (_│ │ (_│  __/   │
 │ │_│ │_│ │_│\__, │_│  \__,_│\___\___│   │
 │            │___/                       │
 └────────────────────────────────────────┘ */

#myface {
        height: 7rem;
        width: 7rem;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 0.4rem;
}

/*
 ┌─────────────────────────────────┐
 │                     _ _         │
 │  _ __ ___   ___  __│ (_) __ _   │
 │ │ '_ ` _ \ / _ \/ _` │ │/ _` │  │
 │ │ │ │ │ │ │  __/ (_│ │ │ (_│ │  │
 │ │_│ │_│ │_│\___│\__,_│_│\__,_│  │
 └─────────────────────────────────┘ */

.media {
        margin-left: auto;
        margin-right: auto;
        /* TODO: Margins to make pages more compact */
        /* margin-top: 1rem; */
        /* margin-bottom: 1rem; */
        width: var(--media-width);
        max-width: 100%;
        position: relative;
        text-align: center;
}

.coding {
        margin-left: auto;
        margin-right: auto;
        /* TODO: Margins to make pages more compact */
        /* margin-top: 1rem; */
        /* margin-bottom: 1rem; */
        width: var(--code-width);
        max-width: 100%;
        position: relative;
        text-align: center;
}

.media > .title {
        line-height: 1.45;
        color: var(--color-subtitle);
        text-rendering: var(--paragraph-text-rendering);
        text-align: left;
        font-family: var(--font-main);
        font-size: var(--subtitle-size);
        font-style: italic;
        font-weight: 400;
}

.media > .centered {
        text-align: center;
        margin-bottom: 0.4rem;
}

@media all and (max-width: 640px) {
        .media > .title {
                margin-left: 0.8rem;
        }
}

.image {
        max-width: 100%;
        border-radius: 2px;
}

@media all and (max-width: 640px) {
        .image {
                border-radius: 0;
        }
}

.pdf-container {
        max-width: 100%;
        width: var(--media-width);
        position: relative;
        text-align: center;
        padding-bottom: calc(100% / var(--pdf-aspect-ratio));
        height: 0;
        overflow: hidden;
        border-style: solid;
        border-width: 5px;
        border-color: black;
}

.pdf-container iframe,
.pdf-container object,
.pdf-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

/*
 ┌────────────────────────────────────┐
 │      _ _       _     _             │
 │   __│ (_)_   _(_) __│ │ ___ _ __   │
 │  / _` │ \ \ / / │/ _` │/ _ \ '__│  │
 │ │ (_│ │ │\ V /│ │ (_│ │  __/ │     │
 │  \__,_│_│ \_/ │_│\__,_│\___│_│     │
 └────────────────────────────────────┘ */

hr {
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        height: 0;
        max-width: var(--media-width);
        border: solid var(--color-divider);
        border-width: 1px 0 0;
        clear: both;
        height: 0;
}

/*
┌─────────────────────────────────────┐
 │                _     _              │
 │  _ __ ___  ___(_)___(_)_ __   __ _  │
 │ │ '__/ _ \/ __│ │_  / │ '_ \ / _` │ │
 │ │ │ │  __/\__ \ │/ /│ │ │ │ │ (_│ │ │
 │ │_│  \___││___/_/___│_│_│ │_│\__, │ │
 │                              │___/  │
 └─────────────────────────────────────┘ */

*,
*::before,
*::after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
}

.header::before,
.header::after,
.writing::before,
.writing::after {
        content: " ";
        display: table;
}

/*
┌─────────────────────────────┐
│  _ _     _   _              │
│ │ (_)___│ │_(_)_ __   __ _  │
│ │ │ / __│ __│ │ '_ \ / _` │ │
│ │ │ \__ \ │_│ │ │ │ │ (_│ │ │
│ │_│_│___/\__│_│_│ │_│\__, │ │
│                      │___/  │
└─────────────────────────────┘ */

ul > li p,
ol > li p,
.ulist,
.olist {
        line-height: calc(var(--paragraph-line-height) * 0.9);
        margin-bottom: -0.4rem;
}

.toc > li p,
.toc > li p,
.ulist .toc,
.olist .toc {
        list-style: circle;
        line-height: calc(var(--quote-line-height) * 0.75);
        font-size: var(--toc-size);
        max-width: var(--toc-width);
}

/* .l1 { */
/*         /\* empty because level 1 list items have no shifts *\/ */
/* } */

.l2 {
        margin-left: calc(1 * var(--list-margin-left));
}

.l3 {
        margin-left: calc(2 * var(--list-margin-left));
}

.l4 {
        margin-left: calc(3 * var(--list-margin-left));
}

/*
 ┌───────────────────────────────────────────┐
 │                    _         _            │
 │  _   _  ___  _   _│ │_ _   _│ │__   ___   │
 │ │ │ │ │/ _ \│ │ │ │ __│ │ │ │ '_ \ / _ \  │
 │ │ │_│ │ (_) │ │_│ │ │_│ │_│ │ │_) │  __/  │
 │  \__, │\___/ \__,_│\__│\__,_│_.__/ \___│  │
 │  │___/                                    │
 └───────────────────────────────────────────┘ */

.responsive-iframe {
        max-width: 100%;
}

/*
Adapted from
https://www.codespeedy.com/make-youtube-embed-video-responsive-using-css/
*/
.yt-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
}

.yt-container iframe,
.yt-container object,
.yt-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

/*
 ┌───────────────────────────────┐
 │  _        _     _             │
 │ │ │_ __ _│ │__ │ │ ___  ___   │
 │ │ __/ _` │ '_ \│ │/ _ \/ __│  │
 │ │ ││ (_│ │ │_) │ │  __/\__ \  │
 │  \__\__,_│_.__/│_│\___││___/  │
 └───────────────────────────────┘ */

table {
        display: table;
        font-size: var(--table-size);
        word-wrap: break-word;
        border-collapse: collapse;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        border-style: double;
        border-color: var(--color-text);
}

th {
        padding: 1rem;
        text-align: left;
        border-bottom: 1px solid var(--color-text);
        border-left: 1px solid var(--color-text);
}

td {
        padding: 0.5rem;
        padding-left: 1rem;
        text-align: left;
        border-left: 1px solid var(--color-text);
}

.admonitionblock {
        position: relative;
}

.admonitionblock::before {
        content: "";
        position: absolute;

        left: -0.75rem;
        top: 0.4rem;
        bottom: 0.1rem;

        width: 1.5px;
        background: var(--color-text-muted);
}

.admonition-content {
        color: var(--color-text);
        line-height: 1.25;
        font-size: 85%;
}

.admonition-label {
        font-variant: small-caps;
        letter-spacing: 0.12em;
        font-size: 0.72em;
        color: var(--color-text-muted);
}

@media all and (max-width: 460px) {
        table {
                margin-left: 0.5rem;
                margin-right: 0.5rem;
                width: 100%;
        }

        th {
                padding: 0.4rem;
        }

        td {
                padding: 0.3rem;
        }
}

/*
 ┌───────────────────────────────────────────────┐
 │                 _           _   _             │
 │ __   _____ _ __│ │__   __ _│ │_(_)_ __ ___    │
 │ \ \ / / _ \ '__│ '_ \ / _` │ __│ │ '_ ` _ \   │
 │  \ V /  __/ │  │ │_) │ (_│ │ │_│ │ │ │ │ │ │  │
 │   \_/ \___│_│  │_.__/ \__,_│\__│_│_│ │_│ │_│  │
 └───────────────────────────────────────────────┘ */

.listingblock {
        background: var(--code-bg);
        padding-top: 0;
        padding-bottom: 0;
        text-align: left;

        border-style: double;
        border-color: var(--ink-muted);
        border-width: 4px;
}

.listingblock > pre {
        -webkit-border-radius: 4px;
        border-radius: 4px;
        word-wrap: break-word;
        overflow-x: auto;
        /* padding: 0.2rem; */
}

code {
        background: var(--code-bg);
        font-size: var(--code-size);
        line-height: var(--code-line-height);
        font-family: var(--font-code);
        text-rendering: var(--code-text-rendering);
        padding: 4px;
        border-radius: 4px;
        word-wrap: break-word;
}

pre {
        white-space: pre;
}

pre code,
pre pre {
        /* margin-top: 2rem; */
        /* margin-bottom: 2rem; */
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 1rem;
        margin-right: 1rem;
}

/* This part will show the language of the code block */
/* when hovering on it */

.listingblock code[data-lang]::before {
        display: none;
        content: attr(data-lang);
        position: absolute;
        font-size: 0.9rem;
        right: 3rem;
        text-transform: uppercase;
        color: var(--color-header);
        opacity: 0.5;
}

.listingblock:hover code[data-lang]::before {
        display: block;
}

.listingblock code {
        font-size: 95%;
}

@media all and (max-width: 768px) {
        .listingblock code {
                font-size: 85%;
        }
}

/*
 +-------------------------------------------------+
 |   __             _               _              |
 |  / _| ___   ___ | |_ _ __   ___ | |_ ___  ___   |
 | | |_ / _ \ / _ \| __| '_ \ / _ \| __/ _ \/ __|  |
 | |  _| (_) | (_) | |_| | | | (_) | ||  __/\__ \  |
 | |_|  \___/ \___/ \__|_| |_|\___/ \__\___||___/  |
 +-------------------------------------------------+ */

#footnotes {
        padding-top: 0.75rem;
        margin-left: 4rem;
}

@media all and (max-width: 900px) {
        #footnotes {
                margin-left: 1rem;
        }
}

#footnotes .footnote {
        line-height: 1.7rem;
        font-size: var(--footnote-size);
}

.footnote a {
        color: var(--color-link);
        border-bottom: none;
}

.footnote a:hover {
        font-weight: bold;
}

/* This bit is from asciidoctor */
kbd {
        font-family: var(--font-code);
        display: inline-block;
        color: rgba(0, 0, 0, 0.8);
        font-size: var(--code-size);
        line-height: 1.45;
        background: #f7f7f7;
        border: 1px solid #ccc;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        -webkit-box-shadow:
                0 1px 0 rgba(0, 0, 0, 0.2),
                0 0 0 0.1em white inset;
        box-shadow:
                0 1px 0 rgba(0, 0, 0, 0.2),
                0 0 0 0.1em #fff inset;
        margin: 0 0.1em;
        padding: 0.1em 0.5em;
        vertical-align: middle;
        position: relative;
        top: -0.1em;
        white-space: nowrap;
}

.rss-icon {
        padding-top: 7.5px;
        max-width: 16px;
}

/*
 +------------------------------------+
 |                  _   _  __         |
 |  ___ _ __   ___ | |_(_)/ _|_   _   |
 | / __| '_ \ / _ \| __| | |_| | | |  |
 | \__ \ |_) | (_) | |_| |  _| |_| |  |
 | |___/ .__/ \___/ \__|_|_|  \__, |  |
 |     |_|                    |___/   |
 +------------------------------------+
*/

.spotify-embed-playlist {
        width: 69%;
}

.spotify-embed-track {
        width: 69%;
}

@media all and (max-width: 640px) {
        .spotify-embed-playlist {
                width: 95%;
        }

        .spotify-embed-track {
                width: 95%;
        }
}

.avatar {
        position: absolute;
        width: 3rem;
        border-radius: 999px;
        margin-left: -23rem;
        top: 1.2rem;
}

.movie-poster,
.book-cover,
.cocktail,
.cockflip {
        position: absolute;
        width: 14rem;
        margin-left: -37rem;
        margin-top: 1rem;
        top: 0.6rem;
        filter: drop-shadow(2px 2px 3px gray);
}

/* I like book covers being a bit smaller than movie posters */
.book-cover {
        width: 10rem;
        margin-left: -31rem;
}

/* This will appear on the left */
.cocktail {
        width: 18rem;
        margin-left: -40rem;
        filter: drop-shadow(2px 2px 3px black);
}

/* and this will appear on the right */
.cockflip {
        width: 18rem;
        margin-left: 22rem;
        filter: drop-shadow(2px 2px 3px black);
        /* Thanks to K.K., the flipped effect is hella cool */
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
}

@media all and (max-width: 900px) {
        .cocktail,
        .cockflip {
                display: none;
        }
}

.media:has(.avatar) {
        margin-bottom: -1.2rem;
}

#date-section {
        font-family: "Lateef";
        font-variant: small-caps;
        font-size: 120%;
        margin-bottom: -0.5rem;
        margin-top: -1rem;
}