/* ==========================================================================
   YEET THEME — Custom Overrides for Ghost (Casper base)
   ==========================================================================

   Theme: Yeet
   Background: #2C272E
   Titles: Aeonik (self-hosted)
   Body: IBM Plex Sans (Google Fonts)
   Border Radius: 8px on cards & images
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. AEONIK FONT-FACE DECLARATIONS
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Aeonik';
    src: url('../fonts/Aeonik-Light.woff2') format('woff2'),
         url('../fonts/Aeonik-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('../fonts/Aeonik-LightItalic.woff2') format('woff2'),
         url('../fonts/Aeonik-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('../fonts/Aeonik-Regular.woff2') format('woff2'),
         url('../fonts/Aeonik-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('../fonts/Aeonik-RegularItalic.woff2') format('woff2'),
         url('../fonts/Aeonik-RegularItalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('../fonts/Aeonik-Bold.woff2') format('woff2'),
         url('../fonts/Aeonik-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('../fonts/Aeonik-BoldItalic.woff2') format('woff2'),
         url('../fonts/Aeonik-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}


/* --------------------------------------------------------------------------
   2. CSS CUSTOM PROPERTIES — Override Casper's defaults
   -------------------------------------------------------------------------- */

:root {
    /* Yeet dark palette */
    --color-darkgrey: #e8e4eb;
    --color-midgrey: #a89fb0;
    --color-lightgrey: #3a3340;
    --color-secondary-text: #a89fb0;
    --color-border: #4a4252;
    --color-wash: #e5eff5;
    --color-darkmode: #2C272E;

    /* Font stacks */
    --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", sans-serif;
    --font-serif: 'IBM Plex Sans', Georgia, Times, serif;
    --font-mono: 'IBM Plex Mono', Menlo, Courier, monospace;
    --font-heading: 'Aeonik', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}


/* --------------------------------------------------------------------------
   3. GLOBAL BODY & BACKGROUND
   -------------------------------------------------------------------------- */

body {
    background: #2C272E !important;
    color: rgba(255, 255, 255, 0.75);
    font-family: 'IBM Plex Sans', var(--font-sans);
}

::selection {
    background: rgba(163, 112, 240, 0.3);
    color: #fff;
}


/* --------------------------------------------------------------------------
   4. TYPOGRAPHY — Aeonik for all headings
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Aeonik', var(--font-heading) !important;
    color: #fff;
}

.site-title {
    font-family: 'Aeonik', var(--font-heading) !important;
}

.site-description {
    font-family: 'IBM Plex Sans', var(--font-sans) !important;
    color: rgba(255, 255, 255, 0.7);
}

.site-description:first-child {
    font-family: 'Aeonik', var(--font-heading) !important;
}

.post-card-title {
    font-family: 'Aeonik', var(--font-heading) !important;
    color: #fff;
}

.article-title {
    font-family: 'Aeonik', var(--font-heading) !important;
    color: #fff !important;
}

.gh-head-logo {
    font-family: 'Aeonik', var(--font-heading) !important;
}

.footer-cta-title {
    font-family: 'Aeonik', var(--font-heading) !important;
}

.error-code {
    font-family: 'Aeonik', var(--font-heading) !important;
}

/* Body font for content areas */
.gh-content > blockquote:not([class]),
.gh-content > ol,
.gh-content > ul,
.gh-content > dl,
.gh-content > p {
    font-family: 'IBM Plex Sans', var(--font-sans) !important;
}

.gh-content .kg-callout-card .kg-callout-text,
.gh-content .kg-toggle-card .kg-toggle-content > ol,
.gh-content .kg-toggle-card .kg-toggle-content > ul,
.gh-content .kg-toggle-card .kg-toggle-content > p {
    font-family: 'IBM Plex Sans', var(--font-sans) !important;
}

.post-card-excerpt {
    font-family: 'IBM Plex Sans', var(--font-sans);
}


/* --------------------------------------------------------------------------
   5. NAVIGATION / HEADER — Dark background
   -------------------------------------------------------------------------- */

.gh-head {
    background-color: #2C272E !important;
    color: #fff;
}

body:not(.has-cover) .gh-head {
    background-color: #2C272E !important;
    color: #fff;
}

.has-cover:not(.home-template) .gh-head {
    background-color: #2C272E !important;
    color: #fff;
}

.gh-head-logo {
    color: #fff !important;
}

.gh-head-menu .nav a {
    color: rgba(255, 255, 255, 0.85);
}

.gh-head-menu .nav a:hover {
    color: #fff;
    opacity: 1;
}

.gh-head-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

.gh-head-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    cursor: pointer;
    user-select: none;
    appearance: none;
    text-decoration: none;
    border: 0;
    vertical-align: baseline;
    min-width: unset;
    min-height: 2.625rem;
    line-height: 1.2rem;
    transition: 300ms;
    background-color: rgb(207, 56, 221) !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    color: rgb(255, 255, 255) !important;
    font-size: 0.9375rem;
    font-family: 'Aeonik', sans-serif !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow:
        rgba(191, 39, 205, 0.4) 0px 0px 10px 0px,
        rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset,
        rgba(0, 0, 0, 0.15) 0px -3px 0px 0px inset,
        rgb(148, 19, 160) 0px 0px 15px 0px inset;
}

.gh-head-button:hover {
    background-color: rgb(220, 80, 235) !important;
    color: #fff !important;
    box-shadow:
        rgba(191, 39, 205, 0.6) 0px 0px 14px 0px,
        rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset,
        rgba(0, 0, 0, 0.15) 0px -3px 0px 0px inset,
        rgb(168, 39, 180) 0px 0px 15px 0px inset;
}

.has-cover .gh-head-button {
    background-color: rgb(207, 56, 221) !important;
    color: #fff !important;
}

.gh-search {
    color: #fff;
}

.gh-burger::before,
.gh-burger::after {
    background-color: #fff !important;
}

/* Stacked nav border */
.is-head-stacked .gh-head-menu::before,
.is-head-stacked .gh-head-menu::after {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dropdown */
.gh-dropdown {
    background-color: #3a3340;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 7px 20px -5px rgba(0, 0, 0, 0.4);
}

.gh-head-menu .gh-dropdown li a {
    color: rgba(255, 255, 255, 0.85);
}

.gh-head-menu .gh-dropdown li a:hover {
    color: #fff;
}

/* Mobile menu */
@media (max-width: 767px) {
    .gh-head-open #gh-head {
        background: #2C272E !important;
    }
    .gh-head-open #gh-head .gh-head-actions {
        background-color: #2C272E !important;
    }
    #gh-head .gh-head-logo {
        color: #fff;
    }
}


/* --------------------------------------------------------------------------
   6. SITE HEADER CONTENT — Dark
   -------------------------------------------------------------------------- */

.site-header {
    background: #2C272E !important;
}

.site-header-content {
    color: #fff;
}

.has-cover .site-header-content {
    background-color: rgba(44, 39, 46, 0.85);
}


/* --------------------------------------------------------------------------
   7. POST FEED / CARDS — 8px radius
   -------------------------------------------------------------------------- */

.post-card-image-link {
    border-radius: 8px;
    overflow: hidden;
}

.post-card-image {
    border-radius: 8px;
    background: #3a3340;
}

.post-card-content-link {
    color: rgba(255, 255, 255, 0.85);
}

.post-card-content-link:hover {
    color: #fff;
}

.post-card-tags {
    color: var(--color-secondary-text);
}

.post-card-featured {
    color: #fff;
}

.post-card-title {
    color: #fff;
}

.post-card-excerpt {
    color: rgba(255, 255, 255, 0.6);
}

.post-card-meta {
    color: rgba(255, 255, 255, 0.45);
}

.post-card-meta > * + *:not(script)::before {
    background-color: rgba(255, 255, 255, 0.35);
}


/* --------------------------------------------------------------------------
   8. SINGLE POST / ARTICLE — Dark colors + 8px radius on images
   -------------------------------------------------------------------------- */

.article-tag a {
    color: var(--color-secondary-text);
}

.article-excerpt {
    color: rgba(255, 255, 255, 0.7);
}

.gh-canvas .article-image img {
    border-radius: 8px;
}

.gh-content img {
    border-radius: 8px;
}

.gh-content > [id] {
    color: rgba(255, 255, 255, 0.9) !important;
}

.gh-content a {
    color: var(--ghost-accent-color);
}

.gh-content pre {
    background: #1e1a21;
    border-radius: 8px;
}

.gh-content :not(pre) > code {
    background: #3a3340;
    border-color: #4a4252;
    color: #e8e4eb;
    border-radius: 4px;
}

.gh-content code {
    color: #e8e4eb;
    background: #1e1a21;
}

hr {
    border-top-color: #4a4252;
}

figcaption {
    color: rgba(255, 255, 255, 0.5);
}

figcaption strong {
    color: rgba(255, 255, 255, 0.7);
}

/* Ghost Editor Cards — 8px radius */
.kg-image-card img,
.kg-gallery-image img {
    border-radius: 8px;
}

.kg-embed-card {
    border-radius: 8px;
    overflow: hidden;
}

.kg-embed-card iframe {
    border-radius: 8px;
}

.kg-bookmark-card {
    border-radius: 8px !important;
    overflow: hidden;
}

.kg-bookmark-container {
    background: #3a3340 !important;
    color: #fff !important;
    border-radius: 8px;
}

.kg-bookmark-title {
    color: #fff;
}

.kg-bookmark-description {
    color: rgba(255, 255, 255, 0.6);
}

.kg-bookmark-metadata {
    color: rgba(255, 255, 255, 0.5);
}

.kg-card.kg-header-card.kg-style-dark {
    background: #1e1a21;
    border-radius: 8px;
}

.kg-callout-card {
    border-radius: 8px;
}

.kg-toggle-card {
    border-radius: 8px;
}

.kg-product-card {
    border-radius: 8px;
}

.kg-blockquote-alt {
    color: rgba(255, 255, 255, 0.6);
    font-family: 'IBM Plex Sans', var(--font-sans);
}


/* --------------------------------------------------------------------------
   9. BYLINE / AUTHOR
   -------------------------------------------------------------------------- */

.article-byline-meta {
    color: var(--color-secondary-text);
}

.article-byline-meta .author-name {
    color: #fff;
}

.article-byline-meta .author-name a {
    color: #fff;
}

.author-avatar {
    border-color: #2C272E;
    background-color: #3a3340;
}

.author-profile-image path {
    fill: #2C272E;
}

.author-profile-social-link {
    color: var(--color-secondary-text);
}

.author-profile-social-link:hover {
    color: #fff;
}

.author-profile-location {
    color: #fff;
}


/* --------------------------------------------------------------------------
   10. PAGINATION
   -------------------------------------------------------------------------- */

.pagination a {
    color: #fff;
}

.pagination .page-number {
    color: rgba(255, 255, 255, 0.5);
}


/* --------------------------------------------------------------------------
   11. SUBSCRIBE / CTA
   -------------------------------------------------------------------------- */

.footer-cta {
    background: transparent;
}

.footer-cta-title {
    color: #fff;
}

.footer-cta-button {
    background: #3a3340;
    border-color: #4a4252;
    color: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
}

.footer-cta-button:hover {
    border-color: #5a5262;
}

.footer-cta-button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: 0;
    min-height: 2.625rem;
    line-height: 1.2rem;
    transition: 300ms;
    background-color: rgb(207, 56, 221) !important;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    color: rgb(255, 255, 255) !important;
    font-size: 0.9375rem;
    font-family: 'Aeonik', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow:
        rgba(191, 39, 205, 0.4) 0px 0px 10px 0px,
        rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset,
        rgba(0, 0, 0, 0.15) 0px -3px 0px 0px inset,
        rgb(148, 19, 160) 0px 0px 15px 0px inset;
}

.footer-cta-button:hover span {
    background-color: rgb(220, 80, 235) !important;
    box-shadow:
        rgba(191, 39, 205, 0.6) 0px 0px 14px 0px,
        rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset,
        rgba(0, 0, 0, 0.15) 0px -3px 0px 0px inset,
        rgb(168, 39, 180) 0px 0px 15px 0px inset;
}


/* --------------------------------------------------------------------------
   12. FOOTER — Yeet branded dark footer
   -------------------------------------------------------------------------- */

.site-footer {
    background: #1a161c !important;
    color: rgba(255, 255, 255, 0.6);
    margin-top: max(8vmin, 48px);
    padding-top: 0;
    padding-bottom: 0;
}

.site-footer .inner {
    color: rgba(255, 255, 255, 0.5);
    display: block;
    max-width: 1200px;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: #fff;
}

/* Footer nav links row */
.yeet-footer-nav {
    padding: 40px 0 32px;
}

.yeet-footer-nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.yeet-footer-nav li {
    margin: 0;
    padding: 0;
    line-height: 1;
}

.yeet-footer-nav a {
    font-family: 'IBM Plex Sans', var(--font-sans);
    font-size: 1.4rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
}

.yeet-footer-nav a:hover {
    color: #fff;
}

/* Divider */
.yeet-footer-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0;
}

/* Bottom section: logo + legal */
.yeet-footer-bottom {
    padding: 32px 0 48px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.yeet-footer-logo img {
    height: 32px;
    width: auto;
    opacity: 0.9;
    border-radius: 0;
}

.yeet-footer-logo a {
    display: inline-block;
}

.yeet-footer-title {
    font-family: 'Aeonik', var(--font-heading);
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.yeet-footer-legal {
    max-width: 100%;
}

.yeet-footer-notice {
    font-family: 'IBM Plex Sans', var(--font-sans);
    font-size: 1.25rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 16px;
}

.yeet-footer-notice a {
    color: rgb(207, 56, 221);
    text-decoration: none;
}

.yeet-footer-notice a:hover {
    color: rgb(230, 100, 240);
}

.yeet-footer-copyright {
    font-family: 'IBM Plex Sans', var(--font-sans);
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
}

.yeet-footer-copyright a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

.yeet-footer-copyright a:hover {
    color: #fff;
}

/* Hide the old footer elements */
.site-footer .gh-powered-by {
    display: none;
}

.site-footer-nav:not(.yeet-footer-nav) {
    display: none;
}

@media (max-width: 767px) {
    .yeet-footer-nav ul {
        gap: 10px 24px;
    }

    .yeet-footer-bottom {
        padding: 24px 0 40px;
    }

    .yeet-footer-notice {
        font-size: 1.15rem;
    }
}


/* --------------------------------------------------------------------------
   13. ERROR PAGES
   -------------------------------------------------------------------------- */

.error-content {
    color: #fff;
}

.error-code {
    color: rgba(255, 255, 255, 0.15);
}

.error-description {
    color: rgba(255, 255, 255, 0.6);
}

.error-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: 0;
    min-height: 2.625rem;
    line-height: 1.2rem;
    transition: 300ms;
    background-color: rgb(207, 56, 221);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    color: rgb(255, 255, 255) !important;
    font-size: 0.9375rem;
    font-family: 'Aeonik', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
    box-shadow:
        rgba(191, 39, 205, 0.4) 0px 0px 10px 0px,
        rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset,
        rgba(0, 0, 0, 0.15) 0px -3px 0px 0px inset,
        rgb(148, 19, 160) 0px 0px 15px 0px inset;
}

.error-link:hover {
    background-color: rgb(220, 80, 235);
    color: #fff !important;
    box-shadow:
        rgba(191, 39, 205, 0.6) 0px 0px 14px 0px,
        rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset,
        rgba(0, 0, 0, 0.15) 0px -3px 0px 0px inset,
        rgb(168, 39, 180) 0px 0px 15px 0px inset;
}


/* --------------------------------------------------------------------------
   14. TABLES — Dark mode
   -------------------------------------------------------------------------- */

.gh-content table:not(.gist table) {
    background: none;
}

.gh-content table:not(.gist table) td:first-child {
    background-image: linear-gradient(to right, #2C272E 50%, rgba(44, 39, 46, 0) 100%);
}

.gh-content table:not(.gist table) td:last-child {
    background-image: linear-gradient(to left, #2C272E 50%, rgba(44, 39, 46, 0) 100%);
}

.gh-content table:not(.gist table) th {
    color: rgba(255, 255, 255, 0.85);
    background-color: #3a3340;
}

.gh-content table:not(.gist table) th,
.gh-content table:not(.gist table) td {
    border-color: #4a4252;
}


/* --------------------------------------------------------------------------
   15. KEYBOARD ELEMENT
   -------------------------------------------------------------------------- */

kbd {
    background: #3a3340;
    border-color: #4a4252;
    box-shadow: inset 0 -1px 0 #4a4252;
    color: #e8e4eb;
}


/* --------------------------------------------------------------------------
   16. MARK / HIGHLIGHT
   -------------------------------------------------------------------------- */

mark {
    background-color: rgba(163, 112, 240, 0.3);
    color: #fff;
}


/* --------------------------------------------------------------------------
   17. COMMENTS
   -------------------------------------------------------------------------- */

.comments h2 {
    color: #fff;
}

.comments .comment-count {
    color: var(--color-secondary-text);
}


/* --------------------------------------------------------------------------
   18. GLOBAL 8px BORDER RADIUS — catch-all for images and card elements
   -------------------------------------------------------------------------- */

.post-card-image-link::after {
    border-radius: 8px;
}

/* Feature image in post */
.article-image img {
    border-radius: 8px !important;
}

/* Any img inside ghost content */
.gh-content p img {
    border-radius: 8px;
}

/* Gallery images */
.kg-gallery-card img {
    border-radius: 8px;
}

/* Video cards */
.kg-video-card {
    border-radius: 8px;
    overflow: hidden;
}

/* File cards */
.kg-file-card {
    border-radius: 8px;
}

/* Audio cards */
.kg-audio-card {
    border-radius: 8px;
}

/* NFT card */
.kg-nft-card {
    border-radius: 8px;
}

/* Signup card */
.kg-signup-card {
    border-radius: 8px;
}

/* Header card */
.kg-header-card {
    border-radius: 8px;
}

/* Button cards — Ghost editor button */
.kg-button-card .kg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: 0;
    min-height: 2.625rem;
    line-height: 1.2rem;
    transition: 300ms;
    background-color: rgb(207, 56, 221) !important;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem !important;
    color: rgb(255, 255, 255) !important;
    font-size: 0.9375rem;
    font-family: 'Aeonik', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow:
        rgba(191, 39, 205, 0.4) 0px 0px 10px 0px,
        rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset,
        rgba(0, 0, 0, 0.15) 0px -3px 0px 0px inset,
        rgb(148, 19, 160) 0px 0px 15px 0px inset;
}

.kg-button-card .kg-btn:hover {
    background-color: rgb(220, 80, 235) !important;
    box-shadow:
        rgba(191, 39, 205, 0.6) 0px 0px 14px 0px,
        rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset,
        rgba(0, 0, 0, 0.15) 0px -3px 0px 0px inset,
        rgb(168, 39, 180) 0px 0px 15px 0px inset;
}

/* Signup card button */
.kg-signup-card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: 0;
    min-height: 2.625rem;
    line-height: 1.2rem;
    transition: 300ms;
    background-color: rgb(207, 56, 221) !important;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem !important;
    color: rgb(255, 255, 255) !important;
    font-size: 0.9375rem;
    font-family: 'Aeonik', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow:
        rgba(191, 39, 205, 0.4) 0px 0px 10px 0px,
        rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset,
        rgba(0, 0, 0, 0.15) 0px -3px 0px 0px inset,
        rgb(148, 19, 160) 0px 0px 15px 0px inset;
}

/* Header card button */
.kg-header-card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: 0;
    min-height: 2.625rem;
    line-height: 1.2rem;
    transition: 300ms;
    background-color: rgb(207, 56, 221) !important;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem !important;
    color: rgb(255, 255, 255) !important;
    font-size: 0.9375rem;
    font-family: 'Aeonik', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow:
        rgba(191, 39, 205, 0.4) 0px 0px 10px 0px,
        rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset,
        rgba(0, 0, 0, 0.15) 0px -3px 0px 0px inset,
        rgb(148, 19, 160) 0px 0px 15px 0px inset;
}


/* --------------------------------------------------------------------------
   19. DARK-MODE OVERRIDES (since we always apply dark-mode class)
   -------------------------------------------------------------------------- */

/* Override the dark-mode CSS variable that Casper sets */
html.dark-mode body {
    background: #2C272E !important;
}

html.dark-mode .post-card-image {
    background: #3a3340;
}

html.dark-mode .gh-head {
    background: #2C272E !important;
}

html.dark-mode body:not(.has-cover) .gh-head {
    background: #2C272E !important;
}

html.dark-mode .site-archive-header .no-image {
    background: #2C272E;
}

html.dark-mode .kg-header-card.kg-style-dark {
    background: #1e1a21;
}

html.dark-mode .kg-header-card.kg-style-light {
    background: #3a3340;
}

html.dark-mode .kg-bookmark-card a.kg-bookmark-container,
html.dark-mode .kg-bookmark-card a.kg-bookmark-container:hover {
    background: #3a3340 !important;
}

html.dark-mode .author-avatar {
    border-color: #2C272E;
    background-color: #3a3340;
}

@media (max-width: 767px) {
    html.dark-mode .gh-head-open:not(.has-cover) #gh-head,
    html.dark-mode .gh-head-open:not(.has-cover) #gh-head .gh-head-actions {
        background: #2C272E !important;
    }
}


/* --------------------------------------------------------------------------
   20. LOGO SVG — ensure it renders white on dark bg
   -------------------------------------------------------------------------- */

.gh-head-logo img {
    max-height: 40px;
    /* SVG is already white-filled, so no filter needed */
}

.site-logo {
    max-height: 120px;
}