:root {
    --background: #01001A;
    --foreground1: #E60023;
    --foreground2: #670083;
    --text: #ffffff;

    --column-spacing: 2em;
    --max-readable-width: 700px;
}

html {
    padding: 0; margin: 0;
    background-color: var(--background);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    color: var(--text);
    max-width: 1200px;
    font-size: 15pt;
    margin: 0 auto;
    padding: var(--column-spacing) 0 0;
}

h1 {
    font-size: 3em;
    line-height: 110%;
    margin-bottom: 0.5em;
    color: var(--foreground1)
}

p {
    line-height: 130%;
}

p.understated {
    font-style: italic;
    background: linear-gradient(90deg, var(--foreground1), var(--foreground2));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

a {
    color: var(--foreground1);
}

a:hover:not(.disabled) {
    color: #FF9696;
}

/* Nav link */

nav {
    font-size: 1.5em;
}

nav a {
    text-decoration: none;
}

/* Logo + Nav */

#identity {
    float: left;
    max-width: 250px;
    width: calc(25% - var(--column-spacing));
    margin-left: var(--column-spacing);

    position: -webkit-sticky;
    position: sticky;
    top: var(--column-spacing);
}

@media screen and (max-width: 700px) {
    #identity {
        float: none;
        position: static;
        width: 100%;
        margin: 0 auto var(--column-spacing);
    }
}

h1#logo {
    display: inline-block;
    margin: 0;
    width: 100%;
    padding-top: 100%; /* in CSS, this means a 1:1 ratio -_- */
    -webkit-mask-image: url(logo.png);
    mask-image: url(logo.png);
    -webkit-mask-size: contain;
    mask-size: contain;
    background-image: linear-gradient(150deg, var(--foreground2), var(--foreground1));
}

h1#logo span {
    display: none;
}

nav#main-nav ul {
    list-style: none;
    padding: 0;
    margin: 1em 0;
    overflow: hidden;
    text-align: center;
}

nav#main-nav li {
    text-transform: lowercase;
    font-variant: small-caps;
    font-kerning: normal;
    font-size: 80%;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-bottom: 0.2em;
}

nav#main-nav li::after {
    color: #E60023;
    padding-left: 0.2em;
    display: inline-block;
    width: 1em;
    text-align: center;
}

nav#main-nav li.flower::after {
    content: "⚘";
}

nav#main-nav li.sun::after {
    content: "❂";
}

/* Main content wrapper */

main#content {
    float: left;
    width: calc(75% - var(--column-spacing) * 2);
    margin: 0 var(--column-spacing);
}

@media screen and (max-width: 700px) {
    main#content {
        float: none;
        width: 100%;
        margin: 0 auto;
    }
}

main#content::after {
    clear: both;
}

/* Page turn nav */

nav#page-turn {
    overflow: hidden;
    margin-bottom: 4em;
    max-width: var(--max-readable-width)
}

@media screen and (max-width: 700px) {
    nav#page-turn {
        margin-left: 2em;
        margin-right: 2em;
    }
}

nav#page-turn #previous {
    float: left;
}

nav#page-turn #previous::before {
    content: "↜ "
}

nav#page-turn #next {
    float: right;
}

nav#page-turn #next::after {
    content: " ↝"
}

/* Post */

article.post {
    max-width: var(--max-readable-width);
    margin: 0 0 4em;
}

@media screen and (max-width: 700px) {
    article.post {
        margin: 0 1em 4em;
    }
}

article.post .art {
    max-width: 100%;
    max-height: 90vh;
    margin-bottom: 1em;
}

article.post a:hover .art {
    outline: 3px solid var(--foreground1);
}

article.post .metadata {
    
}

article.post .metadata .date {
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
}

article.post .metadata .date sup {
    font-variant: small-caps;
    font-size: 0.7em;
}

/* About */

main#about_content {
    position: relative;
    color: #9F041B;
    margin-bottom: 4em;
}

h1#logo_full {
    display: block;
    margin: 1em auto 0.5em;
    width: 70%;
    max-width: 400px;
    padding-top: 43.7%; /* in CSS, this means a ❂:⚘ ratio */

    -webkit-mask-image: url(logo_full.png);
    mask-image: url(logo_full.png);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    background-position: 0px 0px;
    background-image: linear-gradient(to bottom, #F5A623 0px, #F5A623 20%, #9F041B 20%);
}

h1#logo_full span {
    display: none;
}

main#about_content p {
    width: 35%;
    margin: 0 auto 0.7em;
    font-weight: bold;
    font-size: 100%;
}

main#about_content p a {
    color: #9F041B;
}

main#about_content p.centre {
    text-align: center;
}

main#about_content p strong {
    color: #B37C1F;
}

/* Stories */

#stories-intro {
    margin-bottom: 4em;
    padding: 0 2em;
}

.badcover {
    display: inline-block;
    width: 500px;
    height: 702.5px;
    -webkit-mask-image: url(cover.png);
    mask-image: url(cover.png);
    -webkit-mask-size: contain;
    mask-size: contain;
    background-image: linear-gradient(150deg, var(--foreground2), var(--foreground1));
}