/* ========================================================================= */
/* VARIABLES                                                                 */
/* ========================================================================= */

:root {
    /* colors */
    --accent: #066957;
    --translucent: #06695725;
    --secondary: #bddddb;
    --black: #000000;
    --white: #fafafa;
    --gray: #3b5250;
    --subtle: #6b6b6b;

    /* fonts */
    --serif: "Hoefler Text", "Noto Serif", Garamond, serif;
    --sans-serif: "Inter var", "Helvetica Neue", Helvetica, sans-serif;
    /* Fluidly variable between: 16px @ 320px and 32px @ 1920px */
    --font-unit: calc(1rem + ((1vw - 0.2em) * 1));

    /* whitespace */
    --whitespace-scale: 1;

    /* borders */
    --focus-outline: solid 0.25rem;
}

/* ========================================================================= */
/* NORMALIZE                                                                 */
/* ========================================================================= */

html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

* {
    margin: 0;
    padding: 0;
    border: none;
}

body {
    /* Fix Safari bug with viewport units in calc() */
    /* min-height: 0vw; */

    color: var(--body);
    font: 400 var(--font-unit)/1.5 var(--serif);
    background-color: var(--black);
    background: var(--black) url('/assets/southsandwich_amo_2016273-dark.jpg') no-repeat top center;
    background-size: 100vw;
}

:focus {
    outline: var(--secondary) var(--focus-outline);
    border-radius: 5px;
}

#content :focus {
    outline: var(--accent) var(--focus-outline);
    border-radius: 5px;
}

::-moz-selection {
    color: var(--white);
    background-color: var(--accent);
}

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

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

h1, h2, h3, h4, h5, h6 {
    margin-bottom: var(--font-unit);
    font-family: var(--sans-serif);
}

.diptych {
    font-family: var(--serif);
    color: var(--gray);
    margin-top: 80px;
    margin-bottom: 40px;
}

hr::after {
    content: '* * *';
    display: block;
    color: var(--translucent);
    margin: var(--font-unit) auto calc(2 * var(--font-unit)) auto;
    text-align: center;
}

/* ========================================================================= */
/* ACCESSIBLE SKIP LINK                                                      */
/* by Mike Foskett <https://codepen.io/2kool2/pen/bxdzEJ>                    */
/* ========================================================================= */

.skiplink {
    position: absolute;
    padding: .5rem 1rem;
    color: var(--white);
    background-color: var(--black);
    text-decoration: none;
    font-weight: bold;
    z-index: 10;
    transform: translate3d(.125rem, -5rem, 0);
    transition: transform .3s ease-out;
}

.skiplink:focus {
    transform: translate3d(.125rem, .125rem, 0);
    outline: #fff solid .125rem;
}

@media print {
    .skiplink {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skiplink {
        transition: none;
    }
}

/* ========================================================================= */
/* BLOCKS                                                                    */
/* ========================================================================= */

#logotype, #topnav, #content, #sidebar, #site-footer {
    padding: calc(20px * var(--whitespace-scale));
}

#logotype {
    text-align: center;
    padding-top: calc(50px * var(--whitespace-scale));
}

#logotype a {
    font-family: var(--sans-serif);
    text-decoration: none;
}

#logotype .logotype {
    display: block;
}

#logotype .logotype img {
    width: 250px;
    height: 44px;
}

#logotype .tagline {
    color: var(--white);
    font-size: calc(var(--font-unit) * 0.8);
    font-family: var(--sans-serif);
    margin-bottom: 0;
}

#topnav {
    text-align: center;
    padding: calc(20px * var(--whitespace-scale)) 
             calc(20px * var(--whitespace-scale)) 
             calc(40px * var(--whitespace-scale)) 
             calc(20px * var(--whitespace-scale));
    align-self: center;
}

#topnav .nav-link {
    display: inline-block;
    margin: calc(5px * var(--whitespace-scale)) calc(var(--font-unit) * 0.5);
    font-size: calc(var(--font-unit) * 1.25);
    font-weight: 700;
    line-height: 1;
    color: var(--white);
    padding: calc(5px * var(--whitespace-scale)) 0;
    text-decoration: none;
    border-bottom: 4px solid var(--secondary);
    font-family: var(--sans-serif);
}

#sidebar {
    background-color: var(--accent);
    color: var(--white);
}

#site-footer {
    background-color: var(--white);
    font: 700 calc(var(--font-unit) * 0.8)/1.5 var(--sans-serif);
    display: grid;
    grid: [row1-start] "copyright totop" auto [row1-end]
          / 3fr 1fr;
}

#site-footer .copyright {
    color: var(--subtle);
    grid-area: copyright;
}

#site-footer .totop {
    grid-area: totop;
    text-align: right;
}

#site-footer .totop a {
    color: var(--subtle);
}

/* ========================================================================= */
/* CONTENT                                                                   */
/* ========================================================================= */

#title {
    background-color: var(--white);
    padding: calc(40px * var(--whitespace-scale)) 
             calc(20px * var(--whitespace-scale));
    text-align: center;
}

#page-title {
    font-size: calc(var(--font-unit) * 2);
    font-family: var(--serif);
    margin-top: 40px;
    margin-bottom: 10px;
    color: var(--accent);
}

.permalink {
    text-decoration: none;
}

#byline {
    font-size: calc(var(--font-unit) * 1.6);
    font-family: var(--serif);
    margin: 0;
    margin-bottom: 50px;
    font-weight: normal;
}

#issue {
    font-size: calc(var(--font-unit) * 0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.separator::after {
    content: '\2022';
    padding: 0 calc(var(--font-unit) * 0.5);
}

#length {
    font-family: var(--serif);
    font-weight: normal;
    font-style: italic;
    color: var(--gray);
}

#content {
    background-color: var(--secondary);
    padding: calc(40px * var(--whitespace-scale)) 
             calc(20px * var(--whitespace-scale));
}

#content p, #content ol, #content ul {
    margin-bottom: calc(var(--font-unit) * 1.5);
}

#content li {
    margin-left: var(--font-unit);
}

#content .label-issue {
    font-family: var(--serif);
    border-bottom: 4px solid var(--translucent);
    margin-top: calc(var(--whitespace-scale) * 2rem);
    margin-bottom: calc(var(--whitespace-scale) * 1rem);
}

#content .excerpt {
    margin: calc(var(--whitespace-scale) * 0.5rem) 
            calc(var(--whitespace-scale) * 1rem) 
            calc(var(--whitespace-scale) * 1rem) 
            calc(var(--whitespace-scale) * 1rem);
}

#content .submit-to-arsenika {
    font-size: var(--font-unit);
    font-family: var(--sans-serif);
    padding: calc(5px * var(--whitespace-scale)) 
             calc(20px * var(--whitespace-scale));
}

#content .olam-ha-ba {
    display: block;
    text-align: center;
    margin: 50px auto;
    font-family: var(--sans-serif);
    font-size: 2rem;
    font-weight: bold;
    color: var(--gray);
}

#content #poetry-ink {
    width: 100%;
    aspect-ratio: 960 / 540;
}

#content .label-comments {
    font-family: var(--serif);
    margin-top: calc(var(--whitespace-scale) * 20px);
    font-weight: normal;
    font-style: italic;
    color: var(--gray);
}

#content .tombstone::after {
    content: '\220E';
    color: var(--accent);
    display: inline-block;
    margin-left: 3px;
}

#content .align-right {
    text-align: right;
}

#content .align-center {
    text-align: center;
}

#content .cover-single {
    margin: 0 auto 2rem auto;
    text-align: center;
}

#content figcaption {
    margin-top: 1rem;
}

#content .firstpub {
    margin-top: calc(60px * var(--whitespace-scale));
    font-size: calc(var(--font-unit) * 0.8);
    font-style: italic;
}

#content .author-meta {
    margin-top: calc(20px * var(--whitespace-scale));
    font: 400 calc(var(--font-unit) * 0.8)/1.5 var(--sans-serif);
}

#content .author-meta::before {
    content: '';
    display: block;
    margin-bottom: calc(20px * var(--whitespace-scale));
    width: 25%;
    height: 4px;
    background-color: var(--accent);
}

/* ========================================================================= */
/* RESPONSIVE CHANGES                                                        */
/* ========================================================================= */

/* ------ */
/* Tablet */
/* ------ */

@media screen and (min-width: 768px) {
    .cover-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, max-content);
    }

    #content .label-issue {
        margin-top: calc(var(--whitespace-scale) * 1rem);
        margin-bottom: calc(var(--whitespace-scale) * 0.5rem);
    }

    #title {
        padding: calc(40px * var(--whitespace-scale)) 
                 calc(10px * var(--whitespace-scale));
    }
}

/* ------ */
/* Laptop */
/* ------ */

@media screen and (min-width: 1024px) {
    :root {
        --whitespace-scale: 2;
    }

    .arsenika {
        display: grid;
        grid: [row0-start] "skiplink . . ." auto [row0-end]
              [row1-start] "logo nav nav nav" auto [row1-end]
              [row2-start] "title title title title" auto [row2-end]
              [row3-start] "content content content content" auto [row3-end]
              [row4-start] "footer footer footer footer" auto [row4-end]
              / 1fr 1fr 1fr 1fr;
    }

    .arsenika-sidebar {
        display: grid;
        grid: [row0-start] "skiplink . . ." auto [row0-end]
              [row1-start] "logo nav nav nav" auto [row1-end]
              [row2-start] "title title title sidebar" auto [row2-end]
              [row3-start] "content content content sidebar" auto [row3-end]
              [row4-start] "footer footer footer footer" auto [row4-end]
              / 1fr 1fr 1fr 1fr;
    }

    #skiplink-container {
        grid-area: skiplink;
    }

    #logotype {
        grid-area: logo;
        padding: calc(20px * var(--whitespace-scale));
        align-self: center;
    }

    #logotype .logotype img {
        width: 400px;
        height: 71px;
    }

    #topnav {
        grid-area: nav;
        text-align: right;
        padding: calc(20px * var(--whitespace-scale));
    }

    #title {
        grid-area: title;
        padding: calc(15px * var(--whitespace-scale)) 
                 calc(5px * var(--whitespace-scale));
    }

    #content {
        grid-area: content;
    }

    .arsenika #content {
        padding-left: 20%;
        padding-right: 20%;
    }

    #sidebar {
        grid-area: sidebar;
    }

    #site-footer {
        grid-area: footer;
    }
}

/* ------- */
/* Desktop */
/* ------- */

@media screen and (min-width: 1280px) {
    :root {
        --whitespace-scale: 6;
    }

    #logotype {
        padding: calc(12px * var(--whitespace-scale)) 
                 calc(10px * var(--whitespace-scale));
        margin: 0;
    }
    
    #logotype .tagline {
        font-size: var(--font-unit);
        margin-bottom: 0;
    }
    
    #topnav {
        text-align: right;
        padding: 0 
                 calc(5px * var(--whitespace-scale)) 
                 calc(5px * var(--whitespace-scale)) 
                 0;
    }

    #topnav .nav-link {
        margin: calc(1px * var(--whitespace-scale)) calc(var(--font-unit) * 0.5);
        padding: calc(2px * var(--whitespace-scale)) 0;
    }

    .arsenika #content {
        padding-left: 25%;
        padding-right: 25%;
    }
    
    #content {
        padding-top: 60px;
        padding-bottom: 80px;
    }

    #title {
        display: grid;
        grid: [row1-start] "title title title title" auto [row1-end]
              [row2-start] "byline byline byline byline" auto [row2-end]
              [row3-start] ". issue length ." auto [row3-end]
              / 1fr 1fr 1fr 1fr;
    }

    #page-title, #byline, #issue, #length {
        margin: 0 auto;
        padding: 0;
        justify-self: stretch;
        align-self: center;
    }

    #page-title {
        grid-area: title;
    }

    #byline {
        grid-area: byline;
        margin-bottom: 60px;
    }

    #issue {
        grid-area: issue;
        text-align: left;
    }

    #length {
        grid-area: length;
        text-align: right;
    }

    #content .firstpub {
        margin-top: 150px;
    }

    #content .author-meta {
        margin-top: calc(10px * var(--whitespace-scale));
    }
    
    #content .author-meta::before {
        margin-bottom: calc(5px * var(--whitespace-scale));
    }

    #sidebar {
        padding: 60px;
    }

    #site-footer {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/* -- */
/* TV */
/* -- */

@media screen and (min-width: 1920px) {
    :root {
        --whitespace-scale: 4;
        --font-unit: 1.6rem;
    }

    #logotype {
        padding-left: 5vw;
    }

    #topnav {
        padding-right: 3vw;
    }

    .cover-gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, max-content);
    }

    .cover-gallery figcaption {
        font-size: calc(var(--font-unit) * 0.8);
    }
}