:root {
	--layout-column-width: auto;
}

a, nav, a:visited { color: #ccc; }
a:hover, html { color: #000; }
h1 > a, h1 > a:visited { color: #ddd; }
.note h1 > a, .note h1 > a:visited { color: #000; }
.selected { color: #000 !important; }

html { font-family: "Helvetica", "Arial"; font-size: 16px; min-width: 320px; }
@media screen and (max-width: 680px) {
    html { font-size: 2.353vw; }
}
@media screen and (max-width: 320px) {
    html { font-size: 7.5px; }
}

a { text-decoration: none; }
a > img, a > video { vertical-align: top; }

body { margin: 92px 1vw; }
@media screen and (max-width: 605px) {
    body { margin: 15.2vw 1vw; }
}
@media screen and (max-width: 320px) {
    body { margin: 48.5px 1vw; }
}

body > header, body > footer {
    font-size: 1.5rem;
    letter-spacing: .05em;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
}

body > header * { display: inline; font-size: inherit; }
body > header > nav > ul { list-style-type: none; padding: 0; }
body > header > nav > ul > li:before { content: '/'; margin-right: .333em; }

main { margin: 90px auto; }
@media screen and (max-width: 605px) {
    main { margin: 14.9vw auto; }
}
@media screen and (max-width: 320px) {
    main { margin: 47.5px auto; }
}

@media screen and (min-width: 450px) {
	main:not(.feed) >.post { margin-top: -6px }
}

h1, input[type="submit"] { font-weight: 600; text-align: center; }

input {
    -webkit-appearance: none;
    display: block;
    border-radius: 0;
    margin: 0 auto;
    text-align: center;
}

input[type="email"] {
    border: 1px solid #aaa;
    width: 52.5vw;
    max-width: 267px;
    min-width: 168px;
}

input[type="email"] { font-size: 13.5px; }
@media screen and (max-width: 506px) {
    input[type="email"] { font-size: 2.667vw; }
}
@media screen and (max-width: 320px) {
    input[type="email"] { font-size: 8.5px; }
}

input[type="email"] { padding: 10px; }
@media screen and (max-width: 469px) {
    input[type="email"] { padding: 2.133vw; }
}
@media screen and (max-width: 320px) {
    input[type="email"] { padding: 7px }
}

input[type="submit"] {
    background-color: #aaa;
    border: 0 none;
    color: #fff;
    cursor: pointer;
    letter-spacing: .05em;
    text-transform: uppercase;
    width: 27.5vw;
    max-width: 112px;
    min-width: 88px;
}

input[type="submit"] { font-size: 10.75px; }
@media screen and (max-width: 420px) {
    input[type="submit"] { font-size: 2.56vw; }
}
@media screen and (max-width: 320px) {
    input[type="submit"] { font-size: 8px; }
}

input[type="submit"] { padding: 9px; }
@media screen and (max-width: 469px) {
    input[type="submit"] { padding: 1.867vw; }
}
@media screen and (max-width: 320px) {
    input[type="submit"] { padding: 6px; }
}

input[type="submit"] { margin-top: 22px; }
@media screen and (max-width: 446px) {
    input[type="submit"] { margin-top: 4.933vw; }
}
@media screen and (max-width: 320px) {
    input[type="submit"] { margin-top: 16px; }
}

input[type="submit"]:hover { background-color: #999; }

.audio {
    background-color: rgb(91, 91, 91);
    background-image: url("/icons/default.svg#unmuted-view");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 55% 55%;
    border-radius: 100%;
    display: inline-block;
    position: absolute;
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

.audio {
    bottom: calc(3% + 2px);
    height: calc(1.5% + 12.5px);
    padding: calc(.625% + 4.875px);
    right: calc(3% + 3px);
    width: calc(1.5% + 12.5px);
}

.audio.muted {
    background-image: url("/icons/default.svg#muted-view");
    opacity: 1;
}

*:hover > video + .audio:not(.hide) {
    opacity: 1;
}

.feed > .note:not(:first-child) { margin-top: 115px; }

.note { width: 84vw; max-width: 400px; margin: 0 auto; }
.note h1 { font-size: 24px; }
@media screen and (max-width: 511px) {
    .note h1 { font-size: 4.693vw; }
}
@media screen and (max-width: 320px) {
    .note h1 { font-size: 15px; }
}

.note > * { position: relative; margin: 0 auto; font-size: 0; }
.note > *:not(:first-child) { margin-top: 25px; }
@media screen and (max-width: 625px) {
    .note > *:not(:first-child) { margin-top: 5.333vw; }
}
@media screen and (max-width: 320px) {
    .note > *:not(:first-child) { margin-top: 17.1px; }
}
.note img, .note video { width: 100%; }
.note .audio { height: calc(1% + 11.5px); }

.post { width: var(--layout-column-width); max-width: 500px; margin: 0 auto; }
.post > span { display: block; font-size: 9px; color: #A2A2A2; text-align: right; margin: 2px 1.6% 3px 1.75% }
.post > p { font-size: 13px; line-height: 1.6em; }
@media screen and (max-width: 406px) {
    .post > p { font-size: 3.2vw; }
}
@media screen and (max-width: 320px) {
    .post > p { font-size: 10.2px; }
}

.post { margin-bottom: 24px; }
@media screen and (max-width: 720px) {
     .post { margin-bottom: 3.333vw; }
}
@media screen and (max-width: 320px) {
    .post { margin-bottom: 10.7px; }
}

.post > div { font-size: 0; position: relative; height: 100%; }
.post img { width: 100%; }
.post video { width: 97.2%; height: 97.2%; margin: 1.4%; }

.post > p { margin: 6px 1.6% 0 1.75%; }
@media screen and (max-width: 375px) {
    .post > p { margin-top: 1.6vw; }
}
@media screen and (max-width: 320px) {
    .post > p { margin-top: 5.1px; }
}

.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; max-width: 1058px; }
.grid { grid-gap: 16px; }
@media screen and (max-width: 1200px) {
    .grid { grid-gap: 1.333vw; }
}
@media screen and (max-width: 320px) {
    .grid { grid-gap: 4.3px; }
}
.grid > .post { margin: 0; }
.grid > .post > p, .hidden { display: none; }

.masonry { display: block; }

.masonry > .post > div { height: var(--layout-column-width); }

.masonry > .post > p { display: block; font-size: 12px; line-height: 1.5em; }
@media screen and (max-width: 720px) {
    .masonry > .post > p { font-size: 1.667vw; }
}
@media screen and (max-width: 320px) {
    .masonry > .post > p { font-size: 5.3px; }
}

.masonry > .post > p { margin-top: 6.08px; }
@media screen and (max-width: 536px) {
    .masonry > .post > p { margin-top: 1.133vw; }
}
@media screen and (max-width: 320px) {
    .masonry > .post > p { margin-top: 3.6px; }
}

.newsletter label { display: none }

.newsletter:after {
    background-image: url("/images/newsletter.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    content: "";
    display: block;
    width: 89.8%;
    max-width: 562px;
    height: 298px;
}

.newsletter:after { margin: 47px auto; }
@media screen and (max-width: 487px) {
    .newsletter:after { margin: 9.648vw auto; }
}
@media screen and (max-width: 320px) {
    .newsletter:after { margin: 30.9px auto; }
}

.message { text-align: center; }
.message.error { color: #ff1f1f; }