/* RESET */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    font: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    text-decoration: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

img,
picture,
video {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
    content-visibility: auto;
}

div.youtube-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    background-color: #000;
}

div.youtube-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

a:hover {
    cursor: pointer;
}

.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}


/* DEFAULT COLOR */
body {
    background-color: #eee;
}
main p a:hover, 
main li > a:hover, 
main time { 
    color: #eee;
}

/*
body{
    background: linear-gradient( rgba(255,255,255,0), #f4f4f4 );
    min-height: 100vh;
}
*/

/* TYPOGRAPHY FONT-FACE  */
@font-face {
    font-family: "PP Neue Machina Inktrap";
    src: url('fonts/PPNeueMachina-InktrapRegular.woff2') format('woff2'),
            url('fonts/PPNeueMachina-InktrapRegular.woff') format('woff'),
            url('fonts/PPNeueMachina-InktrapRegular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "PP Neue Machina Inktrap";
    src: url('fonts/PPNeueMachina-InktrapRegularItalic.woff2') format('woff2'),
            url('fonts/PPNeueMachina-InktrapRegularItalic.woff') format('woff'),
            url('fonts/PPNeueMachina-InktrapRegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "PP Neue Machina Inktrap Medium";
    src: url('fonts/PPNeueMachina-InktrapMedium.woff2') format('woff2'),
            url('fonts/PPNeueMachina-InktrapMedium.woff') format('woff'),
            url('fonts/PPNeueMachina-InktrapMedium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "PP Neue Machina Inktrap Medium";
    src: url('fonts/PPNeueMachina-InktrapMediumItalic.woff2') format('woff2'),
            url('fonts/PPNeueMachina-InktrapMediumItalic.woff') format('woff'),
            url('fonts/PPNeueMachina-InktrapMediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Adjusted Courier New Fallback";
    src: local("Courier New");
    size-adjust: 87%;
    ascent-override: 95%;
    descent-override: 50%;
}

@font-face {
    font-family: "color-emoji";
    src: local("Apple Color Emoji"), 
            local("Segoe UI Emoji"), 
            local("Segoe UI Symbol"), 
            local("Noto Color Emoji");
}

/* TYPOGRAPHY */
body {
    font-family: 'PP Neue Machina Inktrap', 'Adjusted Courier New Fallback', 'Courier New', monospace;
    font-weight: 400;
    font-size: 20px;
    font-size: clamp(20px,2vw,30px);
    line-height: 1.25em;
    text-rendering: geometricPrecision;
    -webkit-text-size-adjust: 100%;
    text-decoration: none;
    color: #000;
}

figcaption,
div.caption,
footer {
    font-size: 75%;
    font-weight: 500;
    line-height: 1.5em;
}

blockquote {
    padding: 1em 2em;
}

em, 
cite {
    font-style: italic;
}

strong {
    font-family: 'PP Neue Machina Inktrap Medium', 'Adjusted Courier New Fallback', 'Courier New', monospace;
    font-weight: 500;
    font-size: 80%;
    text-transform: uppercase;
    letter-spacing: 0.125em;
}

span.nowrap {
    white-space: nowrap;
}

span.emdash {
    margin: 0 -0.2em;
}

main p a,
main li > a,
main time {
    font-family: 'PP Neue Machina Inktrap Medium', 'Adjusted Courier New Fallback', 'Courier New', monospace;
    font-weight: 500;
    font-size: 75%;
    text-transform: uppercase;
    border: 1px solid #000;
    padding: 0.25em 0.5em 0.125em 0.5em;
    border-radius: 0.5em;
    white-space: nowrap;
    transition: padding 0.2s ease;
}

main p a:hover,
main li > a:hover {
    padding-left: 0.75em;
    padding-right: 0.75em;
}

a.clean {
    font-family: inherit;
    text-transform: inherit;
    border: inherit;
    padding: inherit;
    border-radius: inherit;
    font-size: inherit;
    font-weight: inherit;
    white-space: inherit;
    border-bottom: 2px dashed;
}

a.clean, 
figcaption a {
    border-bottom: 2px dashed rgba(0,0,0,0.6);
}

a.clean:hover,
figcaption a:hover {
    border-bottom: 2px dashed rgba(0,0,0,1);
    padding: 0;
}

main p a:hover,
main li > a:hover,
main time,
a.current {
    background-color: #000;
    color: #fff;
    mix-blend-mode: multiply;
}

a.clean:hover {
    background-color: inherit;
    color: inherit;
    mix-blend-mode: inherit;
}

div.info,
nav.tags ul {
    max-width: 99%;
}

time,
ul.categories {
    display: inline;
}

li {
    display: inline;
    line-height: 1.5em;
}

main h1 {
    font-size: 2em;
    line-height: 1.125em;
    text-wrap: balance;
}

main h2,
main h3,
nav.pagination {
    font-size: 1.5em;
    line-height: 1.125em;
    text-wrap: balance;
}

main p {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    text-wrap: pretty;
}

main p+p {
    text-indent: 3rem;
}

div.content h3,
div.content h4 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 3rem;
}

article.snippet div.caption {
    margin-top: 0.5em;
}

p.more {
    margin-top: 0.5em;
}

@media (min-width: 34.5em) {
    p.more {
        display: none;
    }
}

/* TYPOGRAPHY EMOJI */
span.emoji {
    font-family: 'color-emoji', Apple Color Emoji, 'Segoe UI Emoji', 'Noto Color Emoji', system-ui;
}


/* SPACING */
header,
main,
footer {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

header {
    padding-top: 0.5rem;
}

header,
h1,
figure,
li img,
div.info {
    margin-bottom: 1.5rem;
}

article.work div.info {
    margin-bottom: 2rem;
}

footer {
    margin-top: 2rem;
}

nav.pagination {
    margin-top: 1.5rem;
    text-align: center;
}

nav.tags {
    margin-top: 1.5rem;
}

header h1,
header div.page-title {
    margin-bottom: 1em;
}

div.wrapper {
    margin-top: 0.5rem; /* Optical correction */
    margin-bottom: 0.5rem;
}

main h1,
main h2,
main h3 {
    margin-top: -3px; /* Optical correction */
}

span.arrow {
    font-family: 'PP Neue Machina Inktrap', 'Menlo', 'Courier New', monospace;
    font-size: 125%;
    font-weight: 400;
}


/* GRID */
article.home,
ul.works,
nav.prevnext ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.5em, 1fr));
    gap: 2rem;
}

@media (min-width: 40em) {
    article.work div.info {
        margin-bottom: 0;
    }
    article.work {
        display: grid;
        gap: 2rem;
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: -2rem;
    }
    article.work > div.visual {
        grid-column-start: 2;
        grid-row: span 3;
    }
    article.work > div.heading {
        grid-column-start: 1;
    }
    article.work > div.content {
        grid-column-start: 1;
        grid-row-start: 2;
    }
}


/* HEADER */
header {
    border-bottom: 0.1em solid #000;
    text-align: right;
}

header {
    overflow: auto;
}

#logo:hover {
    transform:
        rotateX(25deg)
        rotateZ(-25deg);
    box-shadow: -0.125em 0.25em 1em rgba(0, 0, 0, .75);
}

#MR path.a {
    fill: #fff;
}

#MR {
    height: 1.75em;
}

#logo {
    height: 3.5em;
    width: 3.5em;
    padding: .75em 0.333em;
    background: #000;
    border-radius: 50%;
    display: block;
    text-align: center;
    float: left;
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    transition: .4s all ease;
    box-shadow: 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.5);
    z-index:1000;
}

header a, 
footer a,
header a span.emoji,
footer a span.emoji{
    transition: padding 0.2s ease;
}

header a:hover, 
footer a:hover, 
header a:hover span.emoji, 
footer a:hover span.emoji {
    padding-left: 0.25em;
    padding-right: 0.25em;
}

@media (hover: none) {
    header a:hover, 
    footer a:hover, 
    header a:hover span.emoji, 
    footer a:hover span.emoji {
        padding-left: 0;
        padding-right: 0;
    }
}

/* FOOTER */
footer {
    border-top: 0.1em solid #000;
    clear: both;
}
nav.social li,
nav.social li a {
    white-space: nowrap;
}


/* PhotoSwipe */
a.image { cursor: zoom-in; }
.pswp__icn-shadow { display: none; }
.pswp__counter {
    font-family: 'Space Mono', monospace;
    font-weight: 500;
}


/* DARK MODE */
body.dark-mode {
    background-color: #000 !important;
    color: #fff;
}
body.dark-mode main p a:hover, 
body.dark-mode main li > a:hover, 
body.dark-mode main time { 
    color: #000;
}
body.dark-mode main p a:hover,
body.dark-mode main li > a:hover,
body.dark-mode main time,
body.dark-mode a.current {
    background-color: #fff;
    color: #000;
    mix-blend-mode: screen;
}
body.dark-mode main p a,
body.dark-mode main li > a,
body.dark-mode main time {
    border: 1px solid #fff;
}
body.dark-mode a.clean, 
body.dark-mode figcaption a {
    border-bottom: 2px dashed rgba(255,255,255,0.6);
}
body.dark-mode a.clean:hover,
body.dark-mode figcaption a:hover {
    border-bottom: 2px dashed rgba(255,255,255,1);
}
body.dark-mode header {
    border-bottom: 0.05em solid #fff;
}
body.dark-mode footer {
    border-top: 0.1em solid #fff;
}
body.dark-mode #MR-home .a {
    fill: #fff;
}
body.dark-mode a.work-inline-image {
    border: 0 none;
}
body.dark-mode a.work-inline-image:hover {
    background-color: transparent;
    mix-blend-mode: normal;
}
body.dark-mode article.home h2.title {
    color: #672ED6;
}