[data-section="posts"] { display: grid; grid-gap: var(--post-spacing); }

/* background & borders */
[data-post-section="header"], [data-post-section="content"], [data-post-section="info"], [data-post-section="notes"] {
    background-color: rgb(var(--colour-post-background));
    border-left: var(--border-size) solid rgb(var(--colour-border));
    border-right: var(--border-size) solid rgb(var(--colour-border));
}
/* border top, regular */
[data-post-section="header"]:first-child, [data-post-section="content"]:first-child, [data-post-section="notes"] { border-top: var(--border-size) solid rgb(var(--colour-border)); }
/* border bottom, regular */
[data-post-section="info"], [data-post-section="notes"], [data-post-section="content"]:last-child { border-bottom: var(--border-size) solid rgb(var(--colour-border)); }
/* border bottom, accent */
[data-post-section="header"]:first-child { border-bottom: var(--border-size) solid rgba(var(--colour-accent-1), 0.3); }
/* border top, accent */
[data-post-section="info"] { border-top: var(--border-size) solid rgba(var(--colour-accent-1), 0.3); }

/* border radius */
[data-post-section]:first-child { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); }
[data-post-section="info"], [data-post-section="content"]:last-child { border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); }
[data-post-section="notes"] { border-radius: var(--border-radius); }

/* toggle icons */
[data-toggle-open="false"] svg.close_icon, [data-toggle-open="true"] svg:not(.close_icon) { display: none; }

/* pinned post */
[data-post-section="pin"] { order: -1; padding: 1rem; font-weight: bold; letter-spacing: 1px; font-size: 1.1rem; text-transform: uppercase; color: rgb(var(--colour-accent-1)); }

/* all post sections */
[data-post-section] {
    padding: 1rem; overflow: hidden;
    display: flex; grid-gap: 1rem; flex-wrap: wrap; align-items: center;
}
[data-post-section="header"], [data-post-section="info"], [data-post-section="tags"], [data-post-section="content-source"] { justify-content: center; }
[data-post-section="info"] { grid-gap: 2rem; }
[data-post-section="notes"] { flex-direction: column; padding: 0 0 1rem; }
[data-post-section="content"] { display: grid; }
[data-post-section="content"] > *, [data-post-content-block="reblog"] { display: inherit; grid-gap: inherit; }

/* post header */
[data-post-section="header"] { text-transform: uppercase; letter-spacing: 1px; font-weight: bold; color: rgb(var(--colour-accent-1)); }
[data-post-section="header"] > * { display: flex; }
[data-post-section="header"] > *:not(.reblog_icon) { font-size: 0.75rem; }
[data-post-section="header"] a:empty:after { content: "-"; }

/* general stuff */
[data-post-section="content"] img { max-width: 100%; display: block; margin: auto; }
[data-post-section="content"] figure { overflow: hidden; }
[data-post-section="content"] iframe, [data-post-section="content"] figure img { width: 100%; }

[data-post-type] div:empty, [data-post-type] p:empty { display: none; }

[data-post-section="content"] ol, [data-post-section="content"] ul {
    list-style-position: inside;
    display: grid;
    grid-gap: 0.5em;
    padding: 0 1em;
    margin: 0;
}

/* text styles */
/*
[data-post-section="content"] p,
[data-post-section="content"] blockquote
{ margin: 0; padding: 0; }
*/
[data-post-section="content"] p:first-child,
[data-post-section="content"] *:not(blockquote) > blockquote:first-child,
[data-post-section="content"] *:first-child:empty + *
{ margin-top: 0; }
[data-post-section="content"] p:last-child,
[data-post-section="content"] *:not(blockquote) > blockquote:last-child
{ margin-bottom: 0; }
[data-post-section="content"] blockquote
{ border-left: 1px solid rgb(var(--colour-accent-1)); margin-left: 0.5em; padding-left: 0.5em; }

/* post title */
[data-post-section="content"] .post_title { font-size: 1.5rem; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }

/* photo block */
[data-post-content-block="photo"], [data-post-section="content"] .npf_row, [data-post-content-block="photoset"] {
    display: grid!important;
    grid-gap: var(--photoset-spacing);
}
[data-post-content-block="photo"], [data-post-section="content"] .npf_row {
    margin: 0;
    overflow: hidden;
    grid-auto-flow: column;
}
[data-post-content-block="photoset"], [data-post-section="content"] > [data-post-content-block="photo"] { overflow: hidden; border-radius: var(--border-radius); border: var(--border-size) solid rgb(var(--colour-border)); }

[data-post-section="content"] figure.tmblr-full { padding: 0px!important; }
[data-post-section="content"] .initialized_remove { display: none!important; }
[data-post-section="content"] figure.photo_figure { cursor: pointer; }
[data-post-section="content"] figure img { object-fit: cover; object-position: center; height: 100%; width:100%; }

/* quote post */
[data-post-content-block="quote"] { display: grid; grid-gap: 1em; padding: 1.5em; }
[data-post-content-block="quote"] > * { color: rgb(var(--colour-text)); padding: 1em; }
[data-post-content-block="quote"] .qoute_source { font-weight: bold; }
[data-post-content-block="quote"] .quote_content { background-color: rgba(var(--colour-accent-1), 0.7); }
.npf_quote { font-family: var(--body-font)!important; }

/* link block */
[data-post-content-block="link"] {
    display: flex; flex-direction: column; grid-gap: 1rem;
    overflow: hidden;
    padding: calc(var(--border-radius)/4 + 1rem);
    border-radius: var(--border-radius); border: var(--border-size) solid rgb(var(--colour-border));
    color: rgb(var(--colour-accent-1)); background-color: rgba(var(--colour-accent-1), 0.3);
}
[data-post-content-block="link"]:hover { color: rgb(var(--colour-accent-2)); background-color: rgba(var(--colour-accent-2), 0.3); }
[data-post-content-block="link"] .link-text { display: contents; }
[data-post-content-block="link"] .link-title { order: -1; font-size: 1.8em; letter-spacing: 1px; font-weight: bold; }
/* [data-post-content-block="link"] .link-excerpt { font-size: 1.2em; } */
[data-post-content-block="link"] .link-host { order: 99; font-size: 0.8rem; text-transform: uppercase; }

/* chat block */
[data-post-content-block="chat"] ul {
    list-style: none; padding: 0; grid-gap: 0; overflow: hidden;
    border-radius: var(--border-radius); border: var(--border-size) solid rgb(var(--colour-border));
}
[data-post-content-block="chat"] span.label { font-weight: bold; color: rgb(var(--colour-accent-1)); }

[data-post-content-block="chat"] ul > * { padding: 1rem calc(var(--border-radius)/4 + 1rem) 1rem; }
[data-post-content-block="chat"] ul > *:first-child { padding-top: calc(var(--border-radius)/4 + 1rem); }
[data-post-content-block="chat"] ul > *:last-child { padding-bottom: calc(var(--border-radius)/4 + 1rem); }

[data-post-content-block="chat"] ul > *:nth-child(odd) { background-color: rgba(var(--colour-accent-1), 0.3); }
[data-post-content-block="chat"] ul > *:nth-child(even) { background-color: rgba(var(--colour-accent-1), 0.2); }

/* ask block */
[data-post-content-block="answer"] > * {
    display: flex;
    flex-direction: column;
    grid-gap: 1rem;
    width: 100%;
    padding: calc(var(--border-radius)/4 + 1rem);
    border-radius: var(--border-radius); border: var(--border-size) solid rgb(var(--colour-border));
}
[data-post-content-block="answer"] .asker, [data-post-content-block="answer"] .answerer {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

[data-post-content-block="answer"] > *:nth-child(odd) { background-color: rgba(var(--colour-accent-1), 0.3); }
[data-post-content-block="answer"] > *:nth-child(odd) > *:not(.question_content):not(.answer_content), [data-post-content-block="answer"] > *:nth-child(odd) a { color: rgb(var(--colour-accent-1)); }
[data-post-content-block="answer"] > *:nth-child(odd) a:hover { color: rgba(var(--colour-accent-1), 0.7); }

[data-post-content-block="answer"] > *:nth-child(even) { background-color: rgba(var(--colour-accent-2), 0.3); }
[data-post-content-block="answer"] > *:nth-child(even) > *:not(.question_content):not(.answer_content), [data-post-content-block="answer"] > *:nth-child(even) a { color: rgb(var(--colour-accent-2)); }
[data-post-content-block="answer"] > *:nth-child(even) a:hover { color: rgba(var(--colour-accent-2), 0.7); }


/* NEW AUDIO */
[data-post-type="audio"] iframe { width: 100%; }
[data-post-type="audio"] figure { height: 100%; }

[data-post-content-block="audio_embed"], [data-post-content-block="audio_player"] { display: flex; grid-gap: 2rem; justify-content: flex-start; }
[data-post-content-block="audio_embed"] { border-radius: var(--border-radius); overflow: hidden; }

/* tumblr audio player */
[data-post-content-block="audio_player"] { color: rgb(var(--colour-accent-1)); }

[data-post-content-block="audio_player"] .player_container { width: 100%; height: 100%; max-width: 33%; overflow: hidden; position: relative; border-radius: var(--border-radius); border: var(--border-size) solid rgb(var(--colour-border)); }
[data-post-content-block="audio_player"] .album_art { width: 100%; height: 100%; z-index: 10; overflow: hidden; border-radius: var(--border-radius); }
[data-post-content-block="audio_player"] .album_art img { width: 100%; height: 100%; object-fit: cover; }

[data-post-content-block="audio_player"] .player {
    position: absolute; height: 100%; width: 100%;
    flex-shrink: 0;
    display: flex; justify-content: center; align-items: center;
    background: rgb(var(--colour-accent-1));
    transition: 1s; opacity: 0;
}
[data-post-content-block="audio_player"] .player_container:hover .player { opacity: 0.85; }
[data-post-content-block="audio_player"] .player > span { mix-blend-mode: screen; }
[data-post-content-block="audio_player"] .player .audio_player { overflow: hidden; height: 29px; width: 35px; }
[data-post-content-block="audio_player"] iframe { filter: contrast(4) invert(1); }

/* track info */
[data-post-content-block="audio_player"] .track_info { display: flex; grid-gap: 1em; flex-direction: column; justify-content: center; }
[data-post-content-block="audio_player"] .track_info .track_artist { font-style: italic; color: rgb(var(--colour-accent-1)); }
[data-post-content-block="audio_player"] .track_info .track_name { font-weight: bold; font-size: 1.5rem; color: rgb(var(--colour-accent-1)); }

/* video block */
[data-post-content-block="video"] { display: flex; overflow: hidden; border-radius: var(--border-radius); border: var(--border-size) solid rgb(var(--colour-border)); }
[data-post-section="content"] *:not(.reblog_content) > [data-post-content-block="video"], [data-post-section="content"] *:not(.reblog_content) > [data-post-content-block="video"] > *, [data-post-section="content"] *:not(.reblog_content) > [data-post-content-block="video"] iframe { max-width: 100%!important; }


/* reblogs */
[data-post-section="content"] .reblog_header {
    display: flex; grid-gap: 1rem; align-items: center;
    text-transform: uppercase; letter-spacing: 1px; font-weight: bold;
    color: rgb(var(--colour-accent-1));
}
[data-post-section="content"] .reblog_header > * { display: inherit; grid-gap: inherit; align-items: inherit; }
[data-post-section="content"] .reblog_header img { width: 2em; height: 2em; border-radius: 100%; }
[data-post-content-block="reblog"].is_original_reblog .reblog_header { display: none; }

/* POST INFO */
[data-post-section="info"] { }
[data-post-section="info"] > * { display: contents; }
[data-post-section="info"] [data-info-block] > * {
    display: flex; align-items: center;
    text-transform: uppercase; letter-spacing: 1px; font-weight: bold;
    color: rgb(var(--colour-accent-1));
    cursor: pointer;
    overflow: hidden; border-radius: var(--border-radius);
}
[data-post-section="info"] [data-info-block] > *:hover,
[data-post-section="info"] .like_button:hover .new_like_button { color: rgba(var(--colour-accent-2), 0.7); background-color: rgba(var(--colour-accent-2), 0.3); }
[data-post-section="info"] .like_button.liked + .new_like_button { color: rgba(var(--colour-accent-2), 0.7); background-color: rgba(var(--colour-accent-2), 0.3); }
[data-post-section="info"] [data-info-block="date"] > * span { padding: 0 1rem; white-space: nowrap; }
[data-post-section="info"] svg.feather { font-size: 1.5rem; }
[data-post-section="info"] i {
    width: 3rem; height: 3rem;
    display: flex; justify-content: center; align-items: center;
}
/* like button */
[data-post-section="info"] .like_control > i { position: relative; cursor: pointer; }
[data-post-section="info"] .like_button, [data-post-section="info"] .new_like_button {
    position: absolute; z-index: 1;
    top: 0; left: 0; right: 0; bottom: 0;
}
[data-post-section="info"] .like_button { z-index: 10; opacity: 0; }
[data-post-section="info"] .like_button iframe { width: 100% !important; height: 100% !important; }

/* tags & content source */
body.index_page [data-post-section="content-source"] { display: none; }
[data-post-section="tags"] a, [data-post-section="content-source"] a {
    font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
    line-height: 1em; font-size: 0.75rem;
    padding: 1em; border-radius: var(--border-radius); background-color: rgba(var(--colour-accent-1), 0.3);
}
[data-post-section="tags"] a:hover, [data-post-section="content-source"] a:hover { background-color: rgba(var(--colour-accent-2), 0.3); }

/* post notes */
[data-post-section="notes"] span.note_count {
    display: flex; grid-gap: 1rem; align-items: center; justify-content: center;
    overflow: hidden; padding: 1rem;
    text-transform: uppercase; letter-spacing: 1px; font-weight: bold;
    color: rgba(var(--colour-accent-1), 0.7); background-color: rgba(var(--colour-accent-1), 0.3);    width: 100%;
}
[data-post-section="notes"] span.note_count svg.feather { font-size: 1.5rem; }

[data-post-section="notes"] > ol { display: contents; list-style: none; }
[data-post-section="notes"] .retags, [data-post-section="notes"] .clear, [data-post-section="notes"] blockquote { display: none; }
[data-post-section="notes"] li { text-align: center; }