/*** Colours ***/

*:root {
    --color-theme: #407B8A;
    --color-theme-highlight: #4B8C9D;
    --color-theme-contrast: #29697A;
    --color-theme-border: #20505C;
    --color-section: #FFE1CF;
    --color-section-highlight: #F2D3C2;
    --color-neutral: #808080;
    --color-neutral-border: #222222;
    --color-text: #000000;
}


/*** Page layout ***/

*:root {
    font-size: 16px;
    font-family: Noto Sans, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--color-theme) url(bg-pattern.png);
    background-size: 120px;
}

body > header {
    display: flex;
    flex-direction: column;
}

body > header > a {
    /* Using line-height + padding to get the desired banner height so that
       a) the height will squish down proportionally on narrow screens,
       b) if it does end up using a wider font, it will wrap nicely */
    font-size: min(5rem, 10vw);
    line-height: 1em;
    padding: 0.5em 0;
    color: var(--color-section);
    text-align: center;
    background: color-mix(
        in srgb, var(--color-theme-highlight), transparent 30%
    );
}

nav {
    padding: 0.25rem 0.5rem;
    background: var(--color-section);
    border: solid var(--color-theme-highlight);
    border-width: 0.25rem 0;
    font-size: 1.25rem;
}

nav > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav > ul > li + li::before { content: "\A0•\A0" }

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 0;
    gap: 1.5rem;
}

h1 {
    font-size: 1.5rem;
    margin: 0;
}

h2 {
    border: solid var(--color-theme-border);
    border-width: 2px 0;
    padding: 0.375rem 2rem;
    background: var(--color-theme-contrast);
    font-size: 1.375rem;
    color: var(--color-section);
}

section > h2:first-child {
    margin: -1rem -2rem 0;
}

section {
    width: 80rem;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--color-section);
    padding: 1rem 2rem;
}

section > *:first-child { margin-top: 0; }
section > *:last-child { margin-bottom: 0; }


/*** Common styles ***/

a, a.post-link span.post-title {
    font-weight: bold;
    text-decoration: none;
    color: var(--color-theme-contrast);
}

a:hover, a.post-link:hover span.post-title {
    text-decoration: underline;
}

a.post-link {
    font-weight: unset;
    text-decoration: unset;
    color: unset;
    display: contents;
}

a.post-link > figure {
    display: flex;
    flex-direction: row;
    background: var(--color-section);
}

a.post-link > figure > figcaption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding: 0 1rem;
}

a.post-link:hover > figure {
    background: var(--color-section-highlight);
}

*.proper-title { font-style: italic; }

figure { margin: 0; }

hr {
    border-top: 1px solid var(--color-theme);
    border-bottom: 1px solid var(--color-theme-highlight);
    border-left: none;
    border-right: none;
}

blockquote {
    background: var(--color-section-highlight);
    padding: 0.5rem 1rem;
    margin: 1rem 0;
    border-left: 4px solid var(--color-theme);
}

blockquote > *:first-child { margin-top: 0; }
blockquote > *:last-child { margin-bottom: 0; }


/*** Index page ***/

section#latest-posts {
    display: grid;
    grid-template:
        "header header"
        "latest rest"
        / 2fr 1fr;
    gap: 1rem;
    background: none;
    padding: 0;
}

section#latest-posts > h2 {
    grid-area: header;
    margin: 0;
}

article#very-latest-post {
    display: flex;
    flex-direction: column;
    grid-area: latest;
    background: var(--color-section);
    /* See `> header > h3 > a:after` below */
    position: relative;
    /* Match the other column's height */
    height: 0;
    min-height: 100%;
}

@media (width <= 640px) {
    section#latest-posts {
        display: flex;
        flex-direction: column;
    }

    article#very-latest-post { height: auto; }
}

article#very-latest-post > header {
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
}

article#very-latest-post > header:hover {
    background: var(--color-section-highlight);
}

article#very-latest-post > header > h3 {
    flex: 1;
    margin: 0;
    font-size: 1.25rem;
}

article#very-latest-post > header > h3 > a:after {
    /* Make the link's active area cover the whole header + image area */
    /* (This makes it cover the whole post, then later we raise the post body's
       z-index even higher) */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

div#latest-post-images {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 0;
    background: var(--color-neutral) url(checker.svg);
    border: solid var(--color-neutral-border);
    border-width: 0.25rem 0;
    min-height: 0;
    flex-shrink: 1;
}

div#latest-post-images > img {
    /* Squish down tall images but don't give extra space to short images */
    flex-shrink: 1;
    max-width: 100%;
    min-height: 0;
    object-fit: contain;
}

div#latest-post-body {
    flex-grow: 1;
    padding: 1rem 2rem;
    z-index: 2;
}
div#latest-post-body > *:first-child { margin-top: 0; }
div#latest-post-body > *:last-child { margin-bottom: 0; }

div#other-latest-posts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    grid-area: rest;
}

div#other-latest-posts figure { flex-direction: row-reverse; }
div#other-latest-posts figcaption { padding-left: 2rem; }


/*** Directory page ***/

section#directory-children {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    background: none;
    font-size: 1.125rem;
}

section#directory-children > a {
    background: var(--color-section);
    padding: 0.5rem 1rem;
}

section#directory-children > a:before {
    content: "↪";
}

section#directory-children > a:hover {
    background: var(--color-section-highlight);
}

section#directory-contents {
    width: auto;
    max-width: 1920px;
    background: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 0;
    padding-bottom: 0;
    align-items: stretch;
    justify-content: center;
}

@media (max-width: 640px) {
    section#directory-contents { padding: 0; }
}

section#directory-contents figure {
    flex-direction: column;
}

section#directory-contents img {
    max-width: 100%;
    object-fit: contain;
}

section#directory-contents figcaption {
    text-align: center;
    padding: 0.5rem;
}

section#directory-contents span.post-title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: min-content;
    min-width: 100%;
    min-height: 2lh;
    line-height: 1;
    text-wrap: balance;
}


/*** Post page ***/

section#breadcrumbs time { font-weight: bold; }

section#art {
    display: flex;
    width: 100%;
    padding: 1.5rem 0;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: var(--color-neutral) url(checker.svg);
    border: solid var(--color-neutral-border);
    border-width: 0.25rem 0;
}

section#art img {
    max-width: 100%;
    max-height: 1080px;
}

section#browsing {
    display: grid;
    grid-template: "prev next" / 1fr 1fr;
    padding: 0;
    gap: 0.5rem;
    background: none;
}

@media (width > 640px) {
    /* Blank rectangles in case there is no prev/next link */
    section#browsing::before, section#browsing::after {
        content: '';
        background: var(--color-theme-highlight);
        z-index: -1;
    }
    section#browsing::before { grid-area: prev; }
    section#browsing::after { grid-area: next; }
}

@media (max-width: 640px) {
    section#browsing {
        display: flex;
        flex-direction: column;
    }
}

section#browsing > a.prev > figure {
    grid-area: prev;
}

section#browsing > a.next > figure {
    grid-area: next;
    text-align: right;
}

section#browsing > a.next > figure > img {
    order: 1;
}

b.browsing-label {
    grid-area: label;
    align-self: end;
    color: var(--color-text);
    font-weight: bold;
}

span.browsing-title { grid-area: title; }

section#browsing img {
    grid-area: thumbnail;
    height: 100px;
}