/* #region Variables */
:root {
    --color-bg: #fff;
    --color-text: #000;
    --color-accent: #a00;
}
/* #endregion Variables */

/* #region Style reset */
html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

p {
    margin-top: 0;
}
/* #endregion Style reset */

/* #region Global styles */
:root {
    font-size: 20px;
}

body {
    /* Text */
    font-family: 'Source Sans 3', Helvetica, Arial, sans-serif;
    line-height: 1.5;
    text-underline-offset: 0.2em;

    /* Colors */
    background-color: var(--color-bg);
    color: var(--color-text);
}
/* #endregion Global styles */

/* #region Element styles */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 1rem;
    line-height: 1.3;
    font-weight: bold;
}

h1 {
    line-height: 1.1;
    font-size: 2.3rem;
}

h2 {
    font-size: 1.6rem;
}

h3 {
    font-size: 1.2rem;
}

main {
    padding: 1rem 1rem 0;
    max-width: 960px;
}

nav {
    margin-bottom: 1em;
}

blockquote {
    margin: 0;
    padding-inline-start: 35px;
    border-left: 5px solid var(--color-accent);
}

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

code {
    background-color: var(--color-text);
    color: var(--color-bg);
    padding: 2px;
    font-size: 0.8em;
    font-family: 'Source Code Pro', monospace;
}

pre code {
    padding: 0;
    border-radius: 0;
}

pre {
    background-color: var(--color-text);
    padding: 1em;
}

time {
    font-size: 16px;
}
/* #endregion Element Styles */

/* #region Site header */
body > header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    color: var(--color-bg);
    position: relative;
    z-index: 0;
    padding: 1em 1em 4em;
    overflow: hidden;
}

body > header::after {
    z-index: -10;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-color: var(--color-text);
    transform: rotate(-3deg) scale(2);
    transform-origin: bottom left;
}

.sitename {
    line-height: 1;
    flex: 0 1 340px;
    font-weight: bold;
    font-size: 2.5em;
    word-spacing: 340px;
}

body > header nav {
    flex: 0 1 600px;
    margin: 0;
}

body > header nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

body > header nav li {
    display: block;
    font-weight: bold;
}

body > header a, body > header a:hover {
    color: var(--color-bg);
    font-weight: normal;
}
/* #endregion Site header */

/* #region Layout classes */
.col-2 {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2em;
    padding-bottom: 1em;
    gap: 20px;
}

.col-2:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.col-2 > :nth-child(1) {
    flex: 1 1 340px;
    max-width: 600px;
}

.col-2 > :nth-child(2) {
    flex: 0 1 600px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(0, 340px));
    align-items: start;
    gap: 2.5rem 20px;
    max-width: 1060px;
}
/* #endregion Layout classes*/

/* #region Styled classes */
.subheading {
    margin-top: -1rem;
}

.styledPhoto {
    margin-left: -1em;
    background-color: var(--color-accent);
    padding: 0;
    max-width: calc(340px + 1em) !important;
    min-height: 100px;
    position: relative;
    overflow: hidden;
    color: var(--color-bg);
}

.styledPhoto > img {
    display: block;
    width: 100%;
    filter: saturate(0);
    mix-blend-mode: luminosity;
}

.styledPhoto a {
    color: var(--color-bg);
}

.styledPhoto::before {
    z-index: 10;
    display:block;
    position: absolute;
    top: -200px;
    left: 0;
    content: '';
    height: 200px;
    width: 100%;
    background-color: var(--color-bg);
    transform: rotate(-3deg) scale(2);
    transform-origin: bottom right;
}

.styledPhoto::after {
    z-index: 10;
    display:block;
    position: absolute;
    bottom: -200px;
    left: 0;
    content: '';
    height: 200px;
    width: 100%;
    background-color: var(--color-bg);
    transform: rotate(-3deg) scale(2);
    transform-origin: top left;
}

.gridHeader {
    margin-left: 0;
    padding: 2rem 1rem 0rem;
    position: relative;
    margin-bottom: 0.5rem;
}

.gridHeader img {
    filter: saturate(0) contrast(0.5);
    position: absolute;
    margin: auto auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    mix-blend-mode: overlay;
}

.gridHeader > :not(img) {
    position: relative;
    z-index: 1;
}

.lede {
    font-weight: bold;
}

.katex {
    font-size: 1em;
    page-break-inside: avoid;
}
/* #endregion Styled classes */

/* #region Animation */
.staggeredFade > * {
    animation: fadeslide 0.15s ease-out;
    animation-fill-mode: backwards;
    animation-delay: 0.15s;
}

.staggeredFade > *:nth-child(1) { animation-delay: 0s;}
.staggeredFade > *:nth-child(2) { animation-delay: 0.05s;}
.staggeredFade > *:nth-child(3) { animation-delay: 0.1s;}

@keyframes fadeslide {
    from {
        transform: translateY(1rem);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* #endregion Animation*/

@media print {
    :root {
        font-size: 14pt;
    }

    body {
        color: black !important;
        font-family: 'EB Garamond', Garamond, serif;
    }

    nav {
        display: none;
    }

    body > header {
        color: black;
        margin: 0 0 1em;
        padding: 0;
    }

    body > header::after {
        display: none;
    }

    main {
        padding: 0;
    }

    .sitename {
        font-size: 1em;
        word-spacing: initial;
    }

    .grid {
        grid-template-columns: 1fr;
    }

    .styledPhoto {
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
        min-height: 0;
        background-color: unset;
    }

    .styledPhoto::after {
        display: none;
    }

    .styledPhoto::before {
        display: none;
    }

    .gridHeader {
        padding: 0;
        color: black;
        max-width: none !important;
    }

    .col-2 :nth-child(2) {
        flex-grow: 1;
    }

    code {
        border: 1px solid var(--color-accent);
        background: none;
        color: black;
    }

    pre > code {
        border: none;
        background: none;
    }

    pre {
        background: none;
        border: 1px solid var(--color-accent);
    }

    a {
        color: black !important;
    }

    a:after {
        content: ' (' attr(href) ')';
    }
}

@page {
    margin: 17%;
}