@layer configuration {
    *,
    :after,
    :before {
        box-sizing: border-box;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        font-weight: inherit;
        color: inherit;
        touch-action: manipulation;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: "kern", "liga", "clig", "calt";
        background: 0 0;
        outline: none;
        margin: 0;
        padding: 0;
        text-decoration: none;
        transition: none 0.15s ease-out;
    }
    @font-face {
        font-family: Satoshi;
        src: url("fonts/Satoshi-Variable.woff2") format("woff2");
        font-weight: 300 900;
        font-display: swap;
        font-style: normal;
        font-feature-settings: "liga", "dlig", "ss02", "ss01", "ss04";
    }
    @font-face {
        font-family: Satoshi;
        src: url("fonts/Satoshi-VariableItalic.woff2") format("woff2");
        font-weight: 300 900;
        font-display: swap;
        font-style: italic;
        font-feature-settings: "liga", "dlig", "ss02", "ss01", "ss04";
    }
    @font-face {
        font-family: Literata;
        src: url("fonts/Literata-Variable.woff2") format("woff2");
        font-weight: 200 900;
        font-display: swap;
        font-style: normal;
    }
    @font-face {
        font-family: Literata;
        src: url("fonts/Literata-VariableItalic.woff2") format("woff2");
        font-weight: 200 900;
        font-display: swap;
        font-style: italic;
    }
    :root {
        --background: #1c1c1c;
        --background-secondary: #1f1f1f;
        --background-notes: #191919;
        --lines: #2a2a2a;
        --text: #f2f0eb;
        --text-secondary: #888;
        --text-alternative-a: #c99da3;
        --text-alternative-b: #1c1c1c;
        --highlight: #fe852e;
        --highlight-alt: #fe852e;
        --newsletter-background: #1f1f1f;
    }
    @media (prefers-color-scheme: light) {
        :root {
            --background: #f2f0eb;
            --background-secondary: #f5f3f1;
            --background-notes: #ebe6dd;
            --lines: #e8e6e1;
            --text: #1c1c1c;
            --text-secondary: #666;
            --text-alternative-a: #5e6384;
            --text-alternative-b: #f2f0eb;
            --highlight: #fe852e;
            --highlight-alt: #fe852e;
            --newsletter-background: #f5f3f1;
        }
    }
    :root {
        --divider-column: 355px;
        --text-column: 763px;
        --text-column-wide: 827px;
        --media-column: 955px;
        --media-column-wide: 1051px;
        --spacer: 0.75rem;
    }
    @media (min-width: 450px) {
        :root {
            --spacer: 1rem;
        }
    }
    :root {
        --font-family: Satoshi, sans-serif;
        --font-family-sans: Satoshi, sans-serif;
        --font-size: 16px;
        --line-height: 24px;
        --optical-size: 15;
    }
    @media (min-width: 1000px) {
        :root {
            --optical-size: 25;
        }
    }
    :root {
        --topic: 700 12px/1.4 var(--font-family-sans);
        --text-small: 450 16px/1.5 var(--font-family);
        --text-base: 450 16px/24px var(--font-family);
        --text-small-sans: 450 16px/1.5 var(--font-family-sans);
        --text-base-sans: 450 16px/24px var(--font-family-sans);
        --title-h3: 800 18px/24px var(--font-family-sans);
        --title-h2: 825 18px/24px var(--font-family-sans);
        --title-h1: 850 20px/26px var(--font-family-sans);
        font-size: var(--line-height);
        font-family: var(--font-family);
        background: var(--background);
        color: var(--text);
        font-variation-settings: "opsz" var(--optical-size);
        font-weight: 450;
    }
    body {
        font-size: var(--font-size);
        line-height: var(--line-height);
        padding: var(--spacer);
    }
}
.header {
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    max-width: var(--text-column);
    margin: 0 auto 4rem;
    display: flex;
}
.header-home {
    font: var(--title-h1);
    font-family: Literata, serif;
    font-weight: 500;
    background: linear-gradient(
        90deg,
        #4ca0de 0%,
        #6c69d8 20%,
        #b43fc8 40%,
        #e33f8b 60%,
        #f05a49 80%,
        #f08b2d 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: 0.1em;
    transition:
        filter 0.15s ease-out,
        opacity 0.15s ease-out;
}
.header-home:hover {
    filter: brightness(1.08) saturate(1.05);
}
.header-home img {
    height: clamp(19px, 0.7vi + 15.85px, 26px);
    width: auto;
    display: block;
}
.header-menu {
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.15rem 0.5rem;
    display: flex;
}
.header-menu-item {
    font: var(--text-base-sans);
    white-space: nowrap;
    font-weight: 500;
    transition-property: color;
}
.header-menu-item:hover {
    color: var(--highlight);
}
.header-menu-item.current {
    font: var(--text-base);
    font-weight: 400;
}
.main-content {
    margin-bottom: 1rem;
}
.posts {
    gap: 0;
    display: grid;
}
.posts > * + * {
    position: relative;
    padding-top: 2rem;
    margin-top: 2rem;
}
.posts > .note + .post {
    margin-top: 0;
}
.posts > .note + .feed-insert {
    margin-top: 0;
}
.posts > * + *:before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(var(--spacer) * -1);
    right: calc(var(--spacer) * -1);
    height: 1px;
    background: var(--lines);
}
.post:last-child .post-footer {
    display: none;
}
.post-title:hover {
    color: var(--highlight);
}
.post-keep-reading {
    float: right;
    font-style: italic;
}
#post .main-title,
#note .main-title {
    margin-bottom: 0.75em;
}

#home .main-title {
    font: var(--title-h2);
    max-width: var(--text-column);
    margin-bottom: 0.75em;
    margin-left: auto;
    margin-right: auto;
    transition-property: color;
}
.note {
    width: calc(100% + (var(--spacer) * 2));
    max-width: none;
    background: var(--background-notes);
    border-radius: 0;
    margin: 0 calc(var(--spacer) * -1);
    padding: 1rem var(--spacer);
    position: relative;
    overflow-x: hidden;
}
.posts > * + .note {
    margin-top: calc(2rem + 10px);
    padding-top: calc(1rem + 10px);
}
.note-text {
    padding: 0;
    max-width: var(--text-column);
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.note-text:after {
    content: none;
}
.note-text:before {
    content: none;
}
.note-date {
    font: var(--topic);
    color: var(--text-secondary);
    text-align: right;
    margin-top: 0.75rem;
    font-weight: 500;
}
.post-date {
    max-width: var(--text-column);
    margin-left: auto;
    margin-right: auto;
}
.note-date a {
    transition-property: color;
}
.post-date-link {
    text-decoration: none;
}
.note-date a:hover {
    color: var(--text);
}
.note-figure {
    margin: 0 auto 0.75rem;
    border-radius: 4px;
    max-width: var(--text-column);
    overflow: hidden;
}
.note-image {
    width: 100%;
    height: auto;
    display: block;
}
.note-content a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--highlight);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.08em;
    transition-property: color, text-decoration-color;
}
.note-content a:hover {
    color: var(--highlight);
    text-decoration-color: var(--highlight);
}
.note-content p:not(:last-child) {
    margin-bottom: 1em;
}
.note-content :where(p, ul, ol, blockquote, code):not(:last-child) {
    margin-bottom: 1rem;
}
.source {
    color: var(--text-secondary);
}
.topics {
    max-width: var(--text-column);
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 2rem auto 1rem;
    display: flex;
}
.topic {
    border: 1px solid var(--lines);
    font: var(--topic);
    text-transform: uppercase;
    color: var(--text-secondary);
    border-radius: 5px;
    padding: 0.15rem 0.5rem;
    transition-property: color, background;
}
.topic:hover {
    color: var(--background);
    background: var(--highlight);
}
.archive-title {
    font: var(--title-h1);
    text-align: center;
    margin-bottom: 2em;
}
.archive {
    max-width: var(--text-column);
    margin: 0 auto;
}
.archive-subtitle {
    font: var(--text-base-sans);
    justify-content: space-between;
    font-weight: 750;
    display: flex;
}
.archive-subtitle:not(:first-child) {
    margin-top: 2em;
}
.archive-subtitle {
    margin-bottom: 0.5em;
}
.archive-month {
    margin-left: auto;
}
.archive-item {
    grid-template-columns: auto minmax(1rem, 1fr) auto;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5em;
    transition-property: color;
    display: grid;
}
.archive-item:hover {
    color: var(--highlight);
}
.archive-item-spacer {
    opacity: 0.1;
    border: none;
    border-bottom: 1px solid #fff;
}
.archive-item-note {
    font: var(--text-base-sans);
    font-weight: 470;
}
.pagination {
    max-width: var(--text-column);
    text-align: center;
    border: 1px solid var(--lines);
    border-radius: 4px;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    margin: 3rem auto 4rem;
    padding: 1px;
    display: grid;
}
.pagination-link {
    font: var(--text-small-sans);
    border-radius: 2px;
    padding: 0.5rem;
    font-weight: 600;
    transition-property: background, color;
}
a.pagination-link:hover {
    background: var(--highlight);
    color: var(--background);
}
span.pagination-link {
    cursor: not-allowed;
    opacity: 0.5;
}
.nl {
    max-width: var(--text-column);
    text-align: center;
    border: 1px solid var(--lines);
    background: var(--newsletter-background);
    border-radius: 4px;
    width: 100%;
    margin: 0 auto;
    padding: 1rem;
    position: relative;
}
:where(#post, #note) .nl {
    margin-top: 4rem;
    padding-top: 1.5rem;
}
:where(#post, #note) .nl:before {
    content: "";
    background: var(--lines);
    opacity: 0.5;
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    top: -2rem;
}
.nl-avatar {
    border: 1px solid var(--lines);
    border-radius: 5px;
    width: 2.5rem;
    height: auto;
    margin: 0 auto 0.5rem;
    display: block;
}
.nl-header-icons {
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
    display: flex;
}
.nl-header-icon {
    width: 0.5rem;
    height: 0.5rem;
    display: block;
}
.nl-header-icon svg {
    fill: var(--text-secondary);
    transition-property: fill;
}
.nl-header-icon:hover svg {
    fill: var(--text-alternative-a);
}
.nl-header-title {
    font: var(--title-h3);
}
.nl-compact {
    max-width: var(--text-column);
    margin: 0 auto;
}
.nl-title {
    font: var(--title-h3);
    margin-bottom: 0.25rem;
}
.nl-text {
    font: var(--text-small-sans);
    font-weight: 500;
}
.nl-text p {
    text-align: center !important;
}
.nl-text a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--highlight);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.08em;
    transition-property: color, text-decoration-color;
}
.nl-text a:hover {
    color: var(--highlight);
    text-decoration-color: var(--highlight);
}
.nl-form-container {
    margin: 1rem auto 0;
    position: relative;
    max-width: 20rem;
}
.nl-notice {
    z-index: 0;
    align-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.nl-notice:after {
    content: "AdBlocker user, I salute you 🥂.";
    font: var(--text-small-sans);
    opacity: 0.25;
    display: block;
}
.nl-form {
    width: 100%;
    display: grid;
    grid-template-columns: 4fr 1fr;
    position: relative;
    z-index: 100;
}

.nl-form input[type="email"] {
    border-radius: 4px 0 0 4px;
    border: 1px solid var(--lines);
    background: #f5f3f1;
    padding: 0.5rem;
    transition-property: border;
    color: #1c1c1c;
}

.nl-form input[type="email"]:focus {
    border-color: var(--highlight);
}

.nl-form input[type="email"]::placeholder {
    color: dimgray;
}

.nl-form input[type="email"]:focus::placeholder {
    opacity: 0.5;
}

.nl-form input[type="submit"] {
    border-radius: 0 4px 4px 0;
    border: 1px solid var(--lines);
    border-left: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition-property: color, background, border;
    background: var(--background);
}

.nl-form input[type="submit"]:hover {
    background: var(--highlight);
    color: black;
    border-color: var(--highlight);
}

@media (width < 500px) {
    .nl-form {
        grid-template-columns: 1fr;
    }
    .nl-form input[type="email"] {
        border-radius: 4px 4px 0px 0px;
    }
    .nl-form input[type="submit"] {
        border-radius: 0px 0px 4px 4px;
        border-left: 1px solid var(--lines);
        border-top: none;
    }
}

.nl-legal {
    font: var(--text-small-sans);
    opacity: 0.5;
}
.footer {
    border-top: 1px solid var(--lines);
    margin-top: 3rem;
}
.footer-inner {
    max-width: var(--text-column);
    margin: 3rem auto;
}
.footer-header {
    grid-template: "image title" 1fr "image tagline" 1fr/2.5rem 1fr;
    align-items: center;
    gap: 0 1rem;
    margin-bottom: 1rem;
    display: grid;
}
.footer-title {
    font: var(--text-base-sans);
    grid-area: title;
    align-self: end;
    font-weight: 550;
}
.footer-tagline {
    font: var(--text-small);
    grid-area: tagline;
    align-self: start;
    font-style: italic;
}
.footer-avatar {
    border-radius: 4px;
    grid-area: image;
    width: 100%;
    height: auto;
    display: block;
}
.footer-bio {
    font: var(--text-small);
}
.footer-poop {
    border: 1px solid var(--lines);
    border-radius: 4px;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: 1rem;
    padding: 1px;
    display: grid;
}
.footer-poop-link {
    text-align: center;
    font: var(--text-small-sans);
    background: var(--background);
    border-radius: 2px;
    padding: 0.31rem 0 0.35rem;
    font-weight: 550;
}
.footer-poop-link:not(:last-child) {
    border-right: 1px solid var(--lines);
}
.footer-poop-link:hover {
    background: var(--background-secondary);
}
[data-md] h1 {
    font: var(--title-h2);
    margin-bottom: 2em;
}
[data-md] h2 {
    font: 800 17px/24px var(--font-family-sans);
    margin-top: 2em;
    margin-bottom: 1.5em;
}
[data-md] h3 {
    font: 700 16px/24px var(--font-family-sans);
}
[data-md] h4 {
    font: 700 16px/24px var(--font-family-sans);
}
[data-md] h5 {
    font: 700 16px/24px var(--font-family-sans);
}
[data-md] h6 {
    font: 700 16px/24px var(--font-family-sans);
}
[data-md] li::marker {
    color: var(--text);
}
[data-md] ol li::marker {
    color: var(--text-secondary);
}
[data-md] ul,
[data-md] ol,
.note-content ul,
.note-content ol {
    padding-left: 0.75rem;
}
[data-md] p {
    max-width: var(--text-column);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
[data-md] ul {
    max-width: var(--text-column);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
[data-md] ol {
    max-width: var(--text-column);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
[data-md] h1 {
    max-width: var(--text-column);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
[data-md] h2 {
    max-width: var(--text-column);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
[data-md] h3 {
    max-width: var(--text-column);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
[data-md] h4 {
    max-width: var(--text-column);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
[data-md] h5 {
    max-width: var(--text-column);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
[data-md] h6 {
    max-width: var(--text-column);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
[data-md] blockquote {
    max-width: var(--text-column);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
[data-md] code {
    max-width: var(--text-column);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
[data-md] code,
.note-content code {
    font-family:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-size: 0.9em;
}
[data-md] pre,
.note-content pre {
    font-family:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
}

[data-md] figure {
    max-width: var(--text-column);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
[data-md] table {
    max-width: var(--text-column);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
[data-md] quoteback-component {
    max-width: var(--text-column);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
[data-md] quoteback-component {
    display: block;
}
[data-md] em {
    font-style: italic;
}
[data-md] strong {
    font-weight: 600;
}
[data-md] :where(p, ul, ol, blockquote, code):not(:last-child) {
    margin-bottom: 1rem;
}

[data-md] hr {
    background: var(--text);
    width: 100%;
    height: 1px;
    max-width: var(--divider-column);
    opacity: 0.2;
    border: none;
    margin: 2rem auto;
}
[data-md] a:not([class]) {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--highlight);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.08em;
    transition-property: color, text-decoration-color;
}
[data-md] a:not([class]):hover {
    color: var(--highlight);
    text-decoration-color: var(--highlight);
}
[data-md] blockquote {
    padding-left: 0.5rem;
    position: relative;
}
[data-md] blockquote * {
    opacity: 0.85;
}
[data-md] blockquote:before {
    content: "";
    background: var(--highlight);
    width: 2px;
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
}
[data-md] table {
    max-width: var(--media-column);
    border: 1px solid var(--lines);
    border-collapse: collapse;
    width: 100%;
}
[data-md] table th {
    border: 1px solid var(--lines);
    font: var(--text-small);
    text-align: left;
    padding: 0 0.5rem;
    line-height: 2.5;
}
[data-md] table td {
    border: 1px solid var(--lines);
    font: var(--text-small);
    text-align: left;
    padding: 0 0.5rem;
    line-height: 2.5;
}
[data-md] table th {
    font: var(--text-small-sans);
    text-transform: uppercase;
    font-weight: 650;
    line-height: 2.5;
}
[data-md] table thead {
    background: var(--background-secondary);
}
@media (max-width: 599px) {
    [data-md] ul {
        padding-left: 0.75rem;
    }
}
@media (max-width: 599px) {
    [data-md] ol {
        padding-left: 0.75rem;
    }
}
[data-md] sup {
    vertical-align: baseline;
    color: inherit;
    font-family: inherit;
    font-size: 0.75em;
    display: inline-block;
    transform: translateY(-20%);
}
[data-md] sup a {
    color: var(--highlight);
    text-decoration: none;
    transition-property: color;
}
[data-md] .footnotes a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--highlight);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.08em;
    transition-property: color, text-decoration-color;
}
[data-md] sup:hover {
    color: inherit;
}
[data-md] sup a:hover {
    color: var(--text);
}
[data-md] .footnotes a:hover {
    color: var(--highlight);
    text-decoration-color: var(--highlight);
}
[data-md] .footnotes li {
    font: var(--text-small);
}
[data-md] .footnotes li:not(:last-child) {
    margin-bottom: 0.5rem;
}
.img-figure {
    max-width: var(--text-column);
    margin-bottom: 1rem;
}
.img-figure figcaption {
    font: var(--text-small-sans);
    text-align: right;
    padding: 0.25rem 0;
    font-weight: 500;
}
.img-figure[data-width="wide"] {
    max-width: var(--media-column);
}
.img-figure[data-width="wider"] {
    max-width: var(--media-column-wide);
}
.img {
    width: 100%;
    display: block;
}
.video-figure {
    max-width: var(--text-column);
    margin-bottom: 1rem;
}
.video-figure figcaption {
    font: var(--text-small-sans);
    text-align: right;
    padding: 0.25rem 0;
    font-weight: 500;
}
.video-figure .holder {
    aspect-ratio: 16/9;
    position: relative;
}
.video-figure :where(iframe, object, embed) {
    border: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.video-figure[data-width="wide"] {
    max-width: var(--media-column);
}
.video-figure[data-width="wider"] {
    max-width: var(--media-column-wide);
}

/* The New Buttondown Form */

.post-end {
    max-width: var(--text-column);
    margin: 2rem auto 0;
}

.post-reply {
    max-width: var(--text-column);
    margin: 2rem auto 0;
}

.note-reply {
    max-width: var(--text-column);
    margin: 2rem auto 0;
}

.post-reply + .post-end,
.note + .post-end,
#note .post-end {
    margin-top: 2rem;
}

.post-end .nl {
    border: 1px solid var(--lines);
    background: var(--newsletter-background);
    border-radius: 4px;
    margin: 0;
    padding: 1.25rem;
}

.post-end .nl:before {
    content: none;
}

.post-end-intro {
    text-align: center;
    margin-bottom: 0.85rem;
}

.post-end-eyebrow {
    font: var(--topic);
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.post-end-title {
    font: var(--title-h3);
    margin-top: 0.35rem;
}

.post-end-methods {
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    display: flex;
}

.post-end-method {
    color: var(--text-secondary);
    width: 0.82rem;
    height: 0.82rem;
    transition-property: color;
}

.post-end-method svg {
    fill: currentColor;
    width: 100%;
    height: 100%;
    display: block;
}

.post-end-method:hover,
.post-end-direct-email:hover {
    color: var(--highlight);
}

.post-end-subscribe {
    margin-top: 1rem;
}

.post-end .nl-form-container {
    max-width: none;
    margin-top: 0;
}

.post-end-reply-controls {
    grid-template-columns: 4fr 1fr;
    gap: 0;
    display: grid;
}

.post-end-reply-input,
.post-end-reply-submit {
    border: 1px solid var(--lines);
    min-width: 0;
    padding: 0.5rem;
}

.post-end-reply-input {
    border-radius: 4px 0 0 4px;
    background: var(--background);
    color: var(--text);
}

.post-end-reply-input::placeholder {
    color: var(--text-secondary);
}

.post-end-reply-input:focus {
    border-color: var(--highlight);
    position: relative;
    z-index: 1;
}

.post-end-reply-input:focus::placeholder {
    opacity: 0.5;
}

.post-end-reply-submit {
    font: var(--text-small-sans);
    border-radius: 0 4px 4px 0;
    border-left: none;
    background: var(--background);
    font-weight: 600;
    cursor: pointer;
    transition-property: color, background, border-color;
}

.post-end-reply-submit:hover {
    color: var(--background);
    background: var(--highlight);
    border-color: var(--highlight);
}

.post-end-direct-email {
    font: var(--text-small-sans);
    color: var(--text-secondary);
    width: fit-content;
    margin: 0.75rem auto 0;
    display: block;
    transition-property: color;
}

.post-end .pagination {
    margin: 1rem 0 0;
}

@media (width < 700px) {
    .post-end {
        margin-top: 3rem;
    }

    .post-reply + .post-end,
    .note + .post-end,
    #note .post-end {
        margin-top: 1.5rem;
    }

    .post-end-reply-controls {
        grid-template-columns: 1fr;
    }

    .post-end-reply-input {
        border-radius: 4px 4px 0 0;
    }

    .post-end-reply-submit {
        border-radius: 0 0 4px 4px;
        border-left: 1px solid var(--lines);
        border-top: none;
    }
}