@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@400;500&family=Roboto+Slab:wght@900&display=swap");

:root {
    --sf-black: #050505;
    --sf-ink: #151515;
    --sf-paper: #eee4cf;
    --sf-paper-2: #e8dfcd;
    --sf-pink: #ef3e9a;
    --sf-yellow: #f2cf25;
    --sf-cyan: #159fc3;
    --sf-green: #82b516;
    --sf-purple: #8f426f;
    --sf-white: #f4f2ed;
    --background-color: var(--sf-black) !important;
    --color-primary-text: var(--sf-white) !important;
    --color-secondary-text: #c9c5bb !important;
    --ghost-accent-color: var(--sf-pink) !important;
}

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

html,
body,
.gh-site {
    background: var(--sf-black) !important;
    color: var(--sf-white) !important;
}

body {
    cursor: crosshair;
    overflow-x: hidden;
    font-family: "DM Mono", monospace !important;
}

body::before,
body::after {
    position: fixed;
    z-index: 0;
    content: "";
    pointer-events: none;
}

body::before {
    width: 220px;
    height: 75px;
    top: 5vh;
    left: -25px;
    background: var(--sf-pink);
    transform: rotate(-8deg);
    clip-path: polygon(0 16%, 100% 0, 86% 100%, 7% 82%);
}

body::after {
    width: 180px;
    height: 65px;
    right: -20px;
    bottom: 7vh;
    background: var(--sf-yellow);
    transform: rotate(12deg);
    clip-path: polygon(5% 0, 100% 21%, 79% 100%, 0 74%);
}

.gh-site {
    position: relative;
    z-index: 1;
}

a {
    color: inherit;
}

a:hover {
    text-decoration: underline wavy var(--sf-yellow) 2px !important;
}

.gh-inner {
    max-width: 1180px;
}

.gh-head {
    background: transparent !important;
}

.gh-head-inner {
    min-height: 92px;
    border-bottom: 0 !important;
}

.gh-head-logo {
    display: inline-block;
    padding: 12px 17px;
    color: var(--sf-ink) !important;
    background: var(--sf-paper);
    font-family: "Archivo Black", sans-serif !important;
    font-size: clamp(1rem, 2vw, 1.45rem) !important;
    font-weight: 900;
    letter-spacing: -0.04em;
    transform: rotate(-2deg);
    clip-path: polygon(2% 7%, 20% 2%, 39% 6%, 58% 1%, 78% 5%, 99% 2%, 97% 94%, 74% 98%, 50% 94%, 24% 99%, 1% 92%);
}

.gh-head-menu,
.gh-head-actions,
.gh-head-link,
.gh-icon-btn,
.gh-burger {
    color: var(--sf-white) !important;
    font-family: "DM Mono", monospace !important;
}

.gh-head-menu a,
.gh-head-link {
    text-decoration: none;
}

.gh-about {
    background: transparent !important;
}

.gh-about-inner {
    padding-top: clamp(35px, 8vw, 95px);
    padding-bottom: clamp(45px, 9vw, 110px);
}

.gh-about-content {
    color: var(--sf-white) !important;
}

.gh-about-primary,
.gh-article-title,
.gh-page-title,
.gh-author-name,
.gh-tag-name {
    display: inline-block;
    position: relative;
    max-width: 900px;
    padding: 14px 24px !important;
    color: var(--sf-ink) !important;
    background: var(--sf-paper) !important;
    font-family: "Archivo Black", sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -0.05em !important;
    line-height: 0.98 !important;
    transform: rotate(-2deg);
    clip-path: polygon(1% 7%, 18% 2%, 35% 5%, 51% 1%, 68% 6%, 84% 2%, 99% 6%, 98% 94%, 81% 97%, 64% 93%, 46% 98%, 28% 94%, 11% 98%, 2% 94%);
}

.gh-about-primary {
    font-size: clamp(2.4rem, 8vw, 6.8rem) !important;
}

.gh-about-secondary,
.gh-article-excerpt,
.gh-page-excerpt,
.gh-author-bio,
.gh-tag-description {
    max-width: 760px;
    color: var(--sf-white) !important;
    font-family: "DM Mono", monospace !important;
}

.gh-about-secondary {
    margin-top: 28px !important;
    font-size: clamp(1rem, 2vw, 1.3rem) !important;
}

.gh-subscribe-input,
.gh-btn,
button,
input,
textarea {
    border: 0 !important;
    border-radius: 0 !important;
    font-family: "DM Mono", monospace !important;
}

.gh-btn,
.gh-primary-btn,
button[type="submit"] {
    color: var(--sf-ink) !important;
    background: var(--sf-yellow) !important;
    font-weight: 500 !important;
    clip-path: polygon(2% 6%, 23% 1%, 48% 5%, 72% 1%, 99% 7%, 96% 94%, 71% 99%, 46% 94%, 21% 99%, 1% 91%);
    transition: transform 100ms steps(2), filter 100ms ease !important;
}

.gh-btn:hover,
.gh-primary-btn:hover,
button[type="submit"]:hover {
    filter: saturate(1.5) contrast(1.15);
    transform: rotate(-2deg) scale(1.04);
}

.gh-main {
    padding-bottom: 80px;
}

.gh-feed {
    gap: 24px !important;
}

.gh-card {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--sf-paper-2) !important;
    color: var(--sf-ink) !important;
    transform: rotate(-0.25deg);
    clip-path: polygon(0.5% 5%, 12% 2%, 25% 4%, 39% 1%, 53% 4%, 68% 1.5%, 82% 4%, 99.5% 2%, 99% 96%, 84% 98%, 69% 95%, 53% 98%, 37% 95%, 21% 98%, 7% 95%, 1% 98%);
    transition: transform 120ms steps(2), filter 120ms ease !important;
}

.gh-card:nth-child(2n) {
    background: var(--sf-pink) !important;
    transform: rotate(0.3deg);
}

.gh-card:nth-child(3n) {
    background: var(--sf-cyan) !important;
    transform: rotate(-0.15deg);
}

.gh-card:nth-child(4n) {
    background: var(--sf-yellow) !important;
}

.gh-card:hover {
    z-index: 2;
    filter: saturate(1.3) contrast(1.07);
    transform: translateY(-4px) rotate(-0.5deg) scale(1.012) !important;
}

.gh-card-link {
    padding: clamp(20px, 4vw, 42px) !important;
    color: var(--sf-ink) !important;
    text-decoration: none !important;
}

.gh-card-title {
    color: var(--sf-ink) !important;
    font-family: "Archivo Black", sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
}

.gh-card-meta,
.gh-card-excerpt {
    color: var(--sf-ink) !important;
    font-family: "DM Mono", monospace !important;
}

.gh-card-image {
    border-radius: 0 !important;
    filter: saturate(0.8) contrast(1.15);
}

.gh-article,
.gh-page {
    color: var(--sf-white) !important;
}

.gh-article-header,
.gh-page-header {
    padding-top: clamp(45px, 8vw, 100px) !important;
}

.gh-article-meta,
.gh-article-tag,
.gh-article-author-name,
.gh-article-meta a {
    color: var(--sf-white) !important;
    font-family: "DM Mono", monospace !important;
}

.gh-content {
    color: var(--sf-white) !important;
    font-family: "DM Mono", monospace !important;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.75;
}

.gh-content h2,
.gh-content h3,
.gh-content h4 {
    width: fit-content;
    padding: 8px 14px;
    color: var(--sf-ink) !important;
    background: var(--sf-yellow);
    font-family: "Archivo Black", sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -0.035em;
    transform: rotate(-1deg);
    clip-path: polygon(2% 6%, 25% 1%, 50% 5%, 75% 1%, 99% 6%, 97% 94%, 72% 99%, 48% 95%, 22% 99%, 1% 93%);
}

.gh-content h3 {
    background: var(--sf-cyan);
    transform: rotate(0.6deg);
}

.gh-content blockquote {
    margin-left: 0;
    padding: 20px 24px;
    border: 0;
    color: var(--sf-ink);
    background: var(--sf-pink);
    font-family: "Roboto Slab", serif;
    font-weight: 900;
    transform: rotate(-0.3deg);
}

.gh-content pre,
.gh-content code {
    border-radius: 0 !important;
    font-family: "DM Mono", monospace !important;
}

.gh-content pre {
    border: 2px solid var(--sf-purple);
    background: #111 !important;
}

.gh-content :not(pre) > code {
    padding: 0.12em 0.35em;
    color: var(--sf-ink);
    background: var(--sf-paper);
}

.gh-content hr {
    height: 9px;
    border: 0;
    background: var(--sf-pink);
    transform: rotate(-0.4deg);
}

.gh-content img,
.kg-image-card img,
.kg-gallery-image img {
    border-radius: 0 !important;
}

.gh-foot {
    color: var(--sf-white) !important;
    background: transparent !important;
    font-family: "DM Mono", monospace !important;
}

.gh-foot-inner {
    border-top: 2px solid var(--sf-purple) !important;
}

@media (max-width: 700px) {
    body::before {
        width: 120px;
        height: 45px;
    }

    body::after {
        width: 100px;
        height: 40px;
    }

    .gh-head-inner {
        min-height: 72px;
    }

    .gh-about-inner {
        padding-top: 28px;
        padding-bottom: 55px;
    }

    .gh-about-primary,
    .gh-article-title,
    .gh-page-title {
        padding: 11px 15px !important;
    }

    .gh-card-link {
        padding: 20px 18px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}