/* Table of contents
/* ------------------------------------------------------------

CATPPUCCIN MOCHA THEME
Modified from Ghost Source theme to use Catppuccin Mocha palette

1. Catppuccin Mocha Variables
2. Variables
3. Fonts
4. Resets
5. Globals
6. Layout
7. Navigation
8. Card
9. Header
10. CTA
11. Featured posts
12. Container
13. Post list
14. Sidebar
15. Post/page
16. Content
17. Cards
18. Comments
19. Recent posts
20. Archive
21. Design settings
22. Footer
23. Lightbox

*/

/* 1. Catppuccin Mocha Variables
/* ---------------------------------------------------------- */

:root {
    /* Catppuccin Mocha Accent Colors */
    --ctp-rosewater: #f5e0dc;
    --ctp-flamingo: #f2cdcd;
    --ctp-pink: #f5c2e7;
    --ctp-mauve: #cba6f7;
    --ctp-red: #f38ba8;
    --ctp-maroon: #eba0ac;
    --ctp-peach: #fab387;
    --ctp-yellow: #f9e2af;
    --ctp-green: #a6e3a1;
    --ctp-teal: #94e2d5;
    --ctp-sky: #89dceb;
    --ctp-sapphire: #74c7ec;
    --ctp-blue: #89b4fa;
    --ctp-lavender: #b4befe;
    
    /* Catppuccin Mocha Background/Foreground Colors */
    --ctp-text: #cdd6f4;
    --ctp-subtext1: #bac2de;
    --ctp-subtext0: #a6adc8;
    --ctp-overlay2: #9399b2;
    --ctp-overlay1: #7f849c;
    --ctp-overlay0: #6c7086;
    --ctp-surface2: #585b70;
    --ctp-surface1: #45475a;
    --ctp-surface0: #313244;
    --ctp-base: #1e1e2e;
    --ctp-mantle: #181825;
    --ctp-crust: #11111b;
}

/* 2. Variables
/* ---------------------------------------------------------- */

:root {
    --color-white: var(--ctp-text);
    --color-lighter-gray: var(--ctp-surface0);
    --color-light-gray: var(--ctp-surface1);
    --color-mid-gray: var(--ctp-surface2);
    --color-dark-gray: var(--ctp-subtext0);
    --color-darker-gray: var(--ctp-text);
    --color-black: var(--ctp-crust);
    --color-primary-text: var(--ctp-text);
    --color-secondary-text: var(--ctp-subtext0);
    --color-border: var(--ctp-surface1);
    --color-dark-border: var(--ctp-overlay0);
    --background-color: var(--ctp-base);
    --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --font-serif: "EB Garamond", Georgia, Times, serif;
    --font-serif-alt: Georgia, Times, serif;
    --font-mono: "JetBrains Mono", Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace;
    --container-width: 1320px;
    --container-gap: clamp(24px, 1.7032rem + 1.9355vw, 48px);
    --grid-gap: 42px;
    --ghost-accent-color: var(--ctp-mauve);
}

:root.has-light-text,
:is(.gh-navigation, .gh-footer).has-accent-color {
    --color-lighter-gray: var(--ctp-surface1);
    --color-darker-gray: var(--ctp-text);
    --color-secondary-text: var(--ctp-subtext1);
    --color-border: var(--ctp-surface2);
    --color-dark-border: var(--ctp-overlay1);
}

/* 3. Fonts - preloaded in default.hbs */

/* 4. Resets
/* ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { font-size: 62.5%; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, canvas, svg { display: block; height: auto; max-width: 100%; }
iframe { display: block; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { line-height: 1.2; }

/* 5. Globals
/* ---------------------------------------------------------- */

body {
    font-family: var(--font-sans);
    font-size: 1.6rem;
    background-color: var(--ctp-base);
    color: var(--ctp-text);
}

a {
    color: var(--ctp-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--ctp-sapphire);
    opacity: 1;
}

.gh-button {
    display: inline-flex;
    gap: 0.4em;
    align-items: center;
    justify-content: center;
    padding: 0.8em 1.4em;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.004em;
    line-height: 1;
    color: var(--ctp-crust);
    cursor: pointer;
    background-color: var(--ctp-mauve);
    border: 0;
    border-radius: 100px;
    transition: background-color 0.2s ease;
}

.gh-button:hover {
    background-color: var(--ctp-lavender);
    opacity: 1;
}

.gh-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--ctp-text);
    cursor: pointer;
    background-color: transparent;
    border: 0;
    outline: none;
}

.gh-icon-button:hover :is(svg, span) {
    color: var(--ctp-mauve);
    opacity: 1;
}

.gh-icon-button svg { width: 20px; height: 20px; }

.gh-form {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 560px;
    width: 100%;
    height: 56px;
    font-size: 1.7rem;
    font-weight: 450;
    letter-spacing: -0.008em;
    border-radius: 40px;
    background-color: var(--ctp-surface0);
    transition: background-color 0.2s ease;
}

.gh-form.success { pointer-events: none; }
.gh-form.error { box-shadow: 0 0 0 1px var(--ctp-red); }
.gh-form:hover { background-color: var(--ctp-surface1); }
.has-light-text .gh-form:hover,
.gh-footer.has-accent-color .gh-form:hover { background-color: var(--ctp-surface1); }

.gh-form-input {
    position: absolute;
    inset: 0;
    padding-inline: 26px;
    width: 100%;
    height: 100%;
    font-size: inherit;
    letter-spacing: inherit;
    line-height: 1.1;
    border: 0;
    border-radius: 40px;
    background-color: transparent;
    color: var(--ctp-text);
    outline: none;
    transition: 0.3s ease-in-out;
}

.gh-form-input::placeholder,
button.gh-form-input { color: var(--ctp-overlay1); }

:is(.has-serif-title, .has-mono-title) .gh-form-input { padding-inline: 20px; }
.gh-form.gh-form.success .gh-form-input { opacity: 0.5; }
.has-light-text .gh-form-input,
.gh-footer.has-accent-color .gh-form-input { color: var(--ctp-text); }
.has-light-text .gh-form-input::placeholder,
.has-light-text button.gh-form-input,
.gh-footer.has-accent-color .gh-form-input::placeholder { color: var(--ctp-overlay1); }

button.gh-form-input {
    padding-inline-start: 56px;
    text-align: left;
    color: var(--ctp-subtext0);
    cursor: pointer;
}

:is(.has-serif-title,.has-mono-title) button.gh-form-input { padding-inline-start: 50px; }

.gh-form .gh-button {
    position: absolute;
    right: 6px;
    padding-inline: 32px;
    height: 44px;
    font-size: inherit;
}

.gh-form > svg {
    position: relative;
    left: 22px;
    width: 20px;
    height: 20px;
    color: var(--ctp-overlay1);
}

:is(.has-serif-title,.has-mono-title) .gh-form > svg { left: 16px; }

.gh-form .gh-button svg { display: none; position: absolute; margin-top: 1px; }
.gh-form:is(.loading, .success) .gh-button span { visibility: hidden; }
.gh-form.loading .gh-button svg:first-of-type { display: block; }
.gh-form.success .gh-button svg:last-of-type { display: block; }

.gh-form [data-members-error] {
    position: absolute;
    top: 100%;
    margin-top: 10px;
    width: 100%;
    font-size: 1.4rem;
    line-height: 1.4;
    color: var(--ctp-red);
}

@media (max-width: 576px) {
    .gh-form { font-size: 1.6rem; }
    .gh-form .gh-button { padding-inline: 12px; }
    .gh-form .gh-button span span { display: none; }
    .gh-form .gh-button span svg { display: inline; position: static; margin-top: 2px; width: 20px; height: 20px; }
}

/* 6. Layout
/* ---------------------------------------------------------- */

.gh-viewport { position: relative; display: flex; flex-direction: column; min-height: 100vh; }
.gh-outer { padding: 0 max(4vmin, 20px); }
.gh-outer .gh-outer { padding: 0; }
.gh-inner { margin: 0 auto; max-width: var(--container-width); width: 100%; }
.gh-main { flex-grow: 1; }

.gh-canvas,
.kg-width-full.kg-content-wide {
    --main: min(var(--content-width, 720px), 100% - var(--container-gap) * 2);
    --wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 720px)) / 2));
    --full: minmax(var(--container-gap), 1fr);
    display: grid;
    grid-template-columns: [full-start] var(--full) [wide-start] var(--wide) [main-start] var(--main) [main-end] var(--wide) [wide-end] var(--full) [full-end];
}

.gh-canvas > * { grid-column: main; }
.kg-width-wide, .kg-content-wide > div { grid-column: wide; }
.kg-width-full { grid-column: full; }

/* 7. Navigation
/* ---------------------------------------------------------- */

.gh-navigation {
    height: 100px;
    font-size: 1.5rem;
    font-weight: 550;
    background-color: var(--ctp-base);
    color: var(--ctp-text);
}

.gh-navigation :is(.gh-navigation-logo, a:not(.gh-button), .gh-icon-button) { color: inherit; }

.gh-navigation-inner {
    display: grid;
    grid-auto-flow: row dense;
    column-gap: 24px;
    align-items: center;
    height: 100%;
}

.gh-navigation-brand { line-height: 1; }

.gh-navigation-logo {
    position: relative;
    font-size: calc(2.4rem * var(--factor, 1));
    font-weight: 725;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

.gh-navigation-logo img { max-height: 40px; }
.gh-navigation-menu { display: flex; gap: 24px; align-items: center; }

.gh-navigation .nav {
    display: inline-flex;
    gap: 28px;
    align-items: center;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    list-style: none;
}

.gh-navigation .nav a:hover { color: var(--ctp-mauve); }

.gh-navigation .gh-more-toggle {
    position: relative;
    margin: 0 -6px;
    font-size: inherit;
    text-transform: inherit;
}

.gh-navigation .gh-more-toggle svg { width: 24px; height: 24px; }

.gh-navigation-actions {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: flex-end;
    background-color: var(--ctp-base);
}

.gh-navigation.has-accent-color .gh-navigation-actions { background-color: var(--ctp-mauve); }

.gh-navigation-members {
    display: flex;
    gap: 20px;
    align-items: center;
    white-space: nowrap;
}

.gh-navigation-members .gh-button { font-size: inherit; font-weight: 600; }
.gh-search { margin-right: -2px; margin-left: -2px; }

@media (max-width: 767px) {
    .gh-navigation-logo { white-space: normal; }
    .gh-navigation-members { flex-direction: column-reverse; gap: 16px; width: 100%; }
    .gh-navigation-actions .gh-search { display: none; }
}

@media (min-width: 768px) {
    .gh-navigation-brand .gh-search { display: none; }
    .gh-navigation:not(.is-dropdown-loaded) .gh-navigation-menu .nav > li { opacity: 0; }
}

/* Navigation styles */
.gh-navigation.has-accent-color { background-color: var(--ctp-mauve); }
.gh-navigation.has-accent-color .gh-button { background-color: var(--ctp-base); color: var(--ctp-text); }

/* Navigation layouts */
.gh-navigation.is-left-logo .gh-navigation-inner { grid-template-columns: auto 1fr auto; }

@media (min-width: 768px) {
    .gh-navigation.is-left-logo .gh-navigation-logo:not(:has(img)) { top: -2px; }
}

@media (min-width: 992px) {
    .gh-navigation.is-left-logo .gh-navigation-menu { margin-right: 100px; margin-left: 16px; }
}

.gh-navigation.is-middle-logo .gh-navigation-inner { grid-template-columns: 1fr auto 1fr; }
.gh-navigation.is-middle-logo .gh-navigation-brand { grid-column-start: 2; }
.gh-navigation.is-middle-logo .gh-navigation-actions { gap: 28px; }

@media (min-width: 992px) {
    .gh-navigation.is-middle-logo .gh-navigation-menu { margin-right: 64px; }
}

.gh-navigation.is-stacked { position: relative; height: auto; }
.gh-navigation.is-stacked .gh-navigation-inner { grid-template-columns: 1fr auto 1fr; }
.gh-navigation.is-stacked .gh-navigation-brand { display: flex; align-items: center; grid-row-start: 1; grid-column-start: 2; min-height: 80px; }

@media (max-width: 767px) {
    .gh-navigation.is-stacked .gh-navigation-brand { min-height: unset; }
}

@media (min-width: 992px) {
    .gh-navigation.is-stacked .gh-navigation-inner { padding: 0; }
    .gh-navigation.is-stacked .gh-navigation-brand { display: flex; align-items: center; height: 80px; }
    .gh-navigation.is-stacked .gh-navigation-menu { grid-row-start: 2; grid-column: 1 / 4; justify-content: center; height: 60px; margin: 0 48px; }
    .gh-navigation.is-stacked .gh-navigation-menu::before,
    .gh-navigation.is-stacked .gh-navigation-menu::after { position: absolute; top: 80px; left: 0; width: 100%; height: 1px; content: ""; background-color: var(--ctp-surface1); }
    .gh-navigation.is-stacked .gh-navigation-menu::after { top: 140px; }
    .gh-navigation.is-stacked .gh-navigation-actions { grid-row-start: 1; grid-column: 1 / 4; justify-content: space-between; }
    .gh-navigation.is-stacked .gh-navigation-actions .gh-search { display: flex; gap: 10px; width: auto; }
}

/* Dropdown menu */
.gh-dropdown {
    position: absolute;
    top: 100%;
    right: -16px;
    z-index: 90;
    width: 200px;
    padding: 12px 0;
    margin-top: 24px;
    text-align: left;
    visibility: hidden;
    background-color: var(--ctp-surface0);
    border-radius: 5px;
    box-shadow: 0 0 0 1px var(--ctp-surface1), 0 7px 20px -5px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s, transform 0.2s;
    transform: translate3d(0, 6px, 0);
}

.gh-dropdown.is-left { right: auto; left: -16px; }
.is-dropdown-mega .gh-dropdown { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; column-gap: 40px; width: auto; padding: 20px 32px; }
.is-dropdown-open .gh-dropdown { visibility: visible; opacity: 1; transform: translateY(0); }
.gh-dropdown li a { display: block; padding: 7px 20px; line-height: 1.5; white-space: normal; color: var(--ctp-text) !important; }
.gh-dropdown li a:hover { color: var(--ctp-mauve) !important; }
.is-dropdown-mega .gh-dropdown li a { padding: 8px 0; }

/* Mobile menu */
.gh-burger { display: flex; justify-content: center; align-items: center; position: relative; display: none; margin-right: -7px; margin-left: 4px; }
.gh-burger svg { width: 24px; height: 24px; }
.gh-burger svg:last-child { display: none; }
.is-open .gh-burger svg:first-child { display: none; }
.is-open .gh-burger svg:last-child { display: block; }

@media (max-width: 767px) {
    .gh-burger { display: flex; }
    #gh-navigation { height: 64px; }
    #gh-navigation .gh-navigation-inner { grid-template-rows: auto 1fr auto; grid-template-columns: 1fr; gap: 48px; }
    #gh-navigation .gh-navigation-brand { display: grid; grid-template-columns: 1fr auto auto; grid-column-start: 1; align-items: center; height: 64px; }
    #gh-navigation .gh-navigation-logo { font-size: 2.2rem; }
    #gh-navigation .gh-navigation-menu,
    #gh-navigation .gh-navigation-actions { position: fixed; justify-content: center; visibility: hidden; opacity: 0; }
    #gh-navigation .gh-navigation-menu { transition: none; transform: translateY(0); }
    #gh-navigation .nav { gap: 20px; align-items: center; line-height: 1.4; }
    #gh-navigation .nav a { font-size: 1.75rem; font-weight: 600; }
    #gh-navigation.is-open { position: fixed; inset: 0; height: auto; z-index: 3999999; background-color: var(--ctp-base); }
    #gh-navigation.is-open .gh-navigation-menu { position: relative; visibility: visible; opacity: 1; }
    #gh-navigation.is-open .gh-navigation-actions { position: relative; visibility: visible; opacity: 1; }
    #gh-navigation.is-open .nav { flex-direction: column; }
}

/* 8. Card
/* ---------------------------------------------------------- */

.gh-card { display: flex; flex-direction: column; }
.gh-card:not(:has(.gh-card-image)):not(.is-list) .gh-card-title { font-size: calc(2.4rem * var(--factor, 1)); }
.gh-card:not(:has(.gh-card-image)):not(.is-list) .gh-card-excerpt { font-size: 1.8rem; }

.gh-card-image {
    position: relative;
    background-color: var(--ctp-surface0);
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.gh-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gh-card-image a::after { position: absolute; inset: 0; content: ""; background-color: transparent; transition: background-color 0.2s ease; }
.gh-card-image a:hover::after { background-color: rgba(0, 0, 0, 0.1); }

.gh-card-wrapper { display: flex; flex-direction: column; flex-grow: 1; margin-top: 16px; }

.gh-card-meta { display: flex; gap: 6px; font-size: 1.3rem; font-weight: 500; color: var(--ctp-subtext0); }
.gh-card-meta a { color: inherit; }
.gh-card-meta a:hover { color: var(--ctp-mauve); }

.gh-card-content { display: flex; flex-direction: column; flex-grow: 1; }

.gh-card-title {
    margin-top: 4px;
    font-size: calc(2rem * var(--factor, 1));
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ctp-text);
}

.gh-card-title a { color: inherit; }
.gh-card-title a:hover { color: var(--ctp-mauve); opacity: 1; }

.gh-card-excerpt {
    margin-top: 8px;
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--ctp-subtext0);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.gh-card-footer { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; font-size: 1.3rem; font-weight: 500; color: var(--ctp-overlay1); }
.gh-card-footer-sep { margin-top: -2px; }
.gh-card-footer svg { width: 16px; height: 16px; }

/* 9. Header
/* ---------------------------------------------------------- */

.gh-header { margin-top: 48px; }
.gh-header-inner { display: grid; gap: var(--grid-gap); }
.gh-header-content { display: flex; flex-direction: column; justify-content: center; text-align: center; }

.gh-header-title {
    font-size: calc(clamp(4rem, 2.73vw + 2.91rem, 6.4rem) * var(--factor, 1));
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--ctp-text);
}

.gh-header-description { margin-top: 16px; font-size: 1.8rem; font-weight: 450; line-height: 1.5; color: var(--ctp-subtext0); }
.gh-header .gh-form { margin-top: 32px; margin-inline: auto; }

/* Magazine layout */
.gh-header.is-magazine { margin-top: 0; padding-top: 48px; }
.gh-header.is-magazine .gh-header-inner { grid-template-columns: repeat(2, 1fr); }
.gh-header.is-magazine .gh-header-content { order: -1; align-items: flex-start; padding-block: 80px; text-align: left; }
.gh-header.is-magazine .gh-header-inner > .gh-card { height: 100%; }
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-image { flex-grow: 1; }
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-title { font-size: calc(clamp(2.4rem, 1.36vw + 1.85rem, 3.6rem) * var(--factor, 1)); }
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-excerpt { font-size: 1.7rem; }

@media (max-width: 991px) {
    .gh-header.is-magazine .gh-header-inner { display: flex; flex-direction: column; }
    .gh-header.is-magazine .gh-header-content { padding-block: 0; }
}

/* Highlight layout */
.gh-header.is-highlight { margin-top: 0; padding-top: 48px; }
.gh-header.is-highlight .gh-header-content { align-items: center; }
.gh-header.is-highlight .gh-header-left { display: flex; flex-direction: column; }
.gh-header.is-highlight .gh-header-left .gh-card-image { flex-grow: 1; }
.gh-header.is-highlight .gh-header-left .gh-card-title { font-size: calc(clamp(2.4rem, 1.36vw + 1.85rem, 3.6rem) * var(--factor, 1)); }
.gh-header.is-highlight .gh-header-left .gh-card-excerpt { font-size: 1.7rem; }
.gh-header.is-highlight:has(.gh-header-content) .gh-header-inner { grid-template-columns: 2fr 1fr; }
.gh-header.is-highlight:not(:has(.gh-header-content)) .gh-header-inner { grid-template-columns: 1fr 1fr; }

@media (max-width: 991px) {
    .gh-header.is-highlight .gh-header-inner { display: flex; flex-direction: column; }
    .gh-header.is-highlight .gh-featured-feed { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); }
}

@media (max-width: 640px) {
    .gh-header.is-highlight .gh-featured-feed { grid-template-columns: 1fr; }
}

/* Classic layout */
.gh-header.is-classic { text-align: center; }
.gh-header.is-classic .gh-header-inner { padding-bottom: 80px; border-bottom: 1px solid var(--ctp-surface1); }
.gh-header.is-classic .gh-header-content { max-width: 720px; margin-inline: auto; }
.gh-header.is-classic.has-image .gh-header-inner { padding: 80px 0; background-size: cover; background-position: center; }
.gh-header.is-classic.has-image .gh-header-inner::before { position: absolute; inset: 0; content: ""; background-color: rgba(0, 0, 0, 0.6); }
.gh-header.is-classic.has-image .gh-header-content { position: relative; }
.gh-header.is-classic.has-image .gh-header-title,
.gh-header.is-classic.has-image .gh-header-description { color: var(--ctp-text); }
.gh-header.is-classic.has-image .gh-form { background-color: var(--ctp-base); }

/* 10. CTA
/* ---------------------------------------------------------- */

.gh-cta { display: flex; flex-direction: column; align-items: center; padding-block: 80px; text-align: center; background-color: var(--ctp-surface0); }
.gh-cta-title { font-size: calc(clamp(3.2rem, 1.82vw + 2.47rem, 4.8rem) * var(--factor, 1)); font-weight: 800; letter-spacing: -0.025em; line-height: 1; color: var(--ctp-text); }
.gh-cta-description { max-width: 640px; margin-top: 16px; font-size: 1.8rem; font-weight: 450; line-height: 1.5; color: var(--ctp-subtext0); }
.gh-cta .gh-form { margin-top: 32px; }

/* 11. Featured posts
/* ---------------------------------------------------------- */

.gh-featured-feed { display: flex; flex-direction: column; gap: 32px; }
.gh-featured-feed .gh-card { flex-direction: row; gap: 20px; }
.gh-featured-feed .gh-card-image { width: 120px; flex-shrink: 0; aspect-ratio: 1; }
.gh-featured-feed .gh-card-wrapper { margin-top: 0; }
.gh-featured-feed .gh-card-title { margin-top: 0; font-size: calc(1.5rem * var(--factor, 1)); }
.gh-featured-feed .gh-card-excerpt { display: none; }

/* 12. Container
/* ---------------------------------------------------------- */

.gh-container { margin-top: 80px; }
.gh-container-inner { display: grid; gap: var(--grid-gap); }
.gh-container-title { display: none; margin-bottom: 8px; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ctp-overlay1); }

/* With sidebar */
.gh-container.has-sidebar .gh-container-inner { grid-template-columns: 1fr 300px; }

@media (max-width: 991px) {
    .gh-container.has-sidebar .gh-container-inner { grid-template-columns: 1fr; }
}

/* Without sidebar */
.gh-container:not(.has-sidebar) .gh-feed { max-width: 720px; margin-inline: auto; }
.gh-container:not(.has-sidebar).is-grid .gh-feed { max-width: none; grid-template-columns: repeat(3, 1fr); }

@media (max-width: 991px) {
    .gh-container:not(.has-sidebar).is-grid .gh-feed { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .gh-container:not(.has-sidebar).is-grid .gh-feed { grid-template-columns: 1fr; }
}

/* 13. Post list
/* ---------------------------------------------------------- */

.gh-feed { display: grid; gap: var(--grid-gap); }

/* List style */
.gh-container:not(.is-grid) .gh-card { position: relative; }
.gh-container:not(.is-grid) .gh-card::after { position: absolute; bottom: calc(var(--grid-gap) / -2); left: 0; width: 100%; height: 1px; content: ""; background-color: var(--ctp-surface1); }
.gh-container:not(.is-grid) .gh-card:last-child::after { display: none; }

/* Grid style */
.gh-container.is-grid .gh-feed { grid-template-columns: repeat(2, 1fr); }

/* No image list */
.gh-container:not(.is-grid):not(.has-sidebar) .gh-card:not(:has(.gh-card-image)) .gh-card-title { font-size: calc(2.8rem * var(--factor, 1)); }

/* 14. Sidebar
/* ---------------------------------------------------------- */

.gh-sidebar { position: sticky; top: 48px; align-self: start; }

.gh-about { padding: 32px; background-color: var(--ctp-surface0); border-radius: 8px; }
.gh-about-image { width: 80px; height: 80px; margin-bottom: 20px; border-radius: 50%; object-fit: cover; }
.gh-about-title { font-size: calc(2rem * var(--factor, 1)); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--ctp-text); }
.gh-about-description { margin-top: 8px; font-size: 1.5rem; line-height: 1.5; color: var(--ctp-subtext0); }
.gh-about .gh-button { margin-top: 24px; }

/* 15. Post/page
/* ---------------------------------------------------------- */

.gh-article { margin-top: 80px; }
.gh-article-meta { display: flex; gap: 6px; font-size: 1.4rem; font-weight: 500; color: var(--ctp-subtext0); }
.gh-article-meta a { color: inherit; }
.gh-article-meta a:hover { color: var(--ctp-mauve); }

.gh-article-title {
    margin-top: 8px;
    font-size: calc(clamp(3.2rem, 2.73vw + 2.11rem, 5.6rem) * var(--factor, 1));
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--ctp-text);
}

.gh-article-excerpt { margin-top: 20px; font-size: calc(clamp(1.8rem, 0.45vw + 1.62rem, 2.2rem) * var(--factor, 1)); line-height: 1.5; letter-spacing: -0.01em; color: var(--ctp-subtext0); }
.gh-article-image { grid-column: wide; margin-top: 48px; border-radius: 8px; overflow: hidden; }

/* Page template */
.page-template .gh-article { margin-top: 48px; }
.page-template .gh-article-title { text-align: center; }
.page-template:not(.has-image) .gh-article-title { margin-top: 0; }

/* 16. Content
/* ---------------------------------------------------------- */

.gh-content {
    --content-spacing-factor: 1;
    margin-top: 48px;
    font-size: var(--content-font-size, 1.8rem);
    line-height: 1.7;
    letter-spacing: -0.003em;
    color: var(--ctp-text);
}

.gh-content p,
.gh-content li,
.gh-content td {
    color: var(--ctp-text);
}

.gh-content > * + * { margin-top: calc(32px * var(--content-spacing-factor, 1)); }
.gh-content > [id] + * { margin-top: calc(16px * var(--content-spacing-factor, 1)); }

.gh-content a { color: var(--ctp-blue); text-decoration: underline; }
.gh-content a:hover { color: var(--ctp-sapphire); }
.gh-content strong { font-weight: 700; }
.gh-content em { font-style: italic; }

.gh-content h2 { margin-top: calc(56px * var(--content-spacing-factor, 1)); font-size: calc(2.4rem * var(--factor, 1)); font-weight: 700; letter-spacing: -0.01em; color: var(--ctp-text); }
.gh-content h3 { margin-top: calc(48px * var(--content-spacing-factor, 1)); font-size: calc(2rem * var(--factor, 1)); font-weight: 700; letter-spacing: -0.01em; color: var(--ctp-text); }
.gh-content h4 { font-size: calc(1.8rem * var(--factor, 1)); font-weight: 700; color: var(--ctp-text); }
.gh-content h5 { font-size: calc(1.7rem * var(--factor, 1)); font-weight: 700; color: var(--ctp-text); }
.gh-content h6 { font-size: calc(1.6rem * var(--factor, 1)); font-weight: 700; color: var(--ctp-text); }

.gh-content :is(ul, ol) { padding-left: 2.4rem; }
.gh-content li + li { margin-top: 8px; }
.gh-content hr { margin-block: calc(48px * var(--content-spacing-factor, 1)); height: 1px; border: 0; background-color: var(--ctp-surface1); }

.gh-content .gh-table { overflow-x: scroll; -webkit-overflow-scrolling: touch; }
.gh-content .gh-table table { width: 100%; font-family: var(--font-sans); font-size: 1.5rem; white-space: nowrap; vertical-align: top; border-spacing: 0; border-collapse: collapse; }
.gh-content .gh-table table th { font-size: 1.2rem; font-weight: 700; color: var(--ctp-text); text-align: left; text-transform: uppercase; letter-spacing: 0.2px; }
.gh-content .gh-table table :is(th, td),
.gh-content .gh-table table td { padding: 6px 12px; border-bottom: 1px solid var(--ctp-surface1); }
.gh-content .gh-table table :is(th, td):first-child { padding-left: 0; }
.gh-content .gh-table table :is(th, td):last-child { padding-right: 0; }

.gh-content pre {
    overflow: auto;
    padding: 16px;
    font-size: 1.5rem;
    line-height: 1.5em;
    background: var(--ctp-mantle);
    border-radius: 6px;
    font-family: var(--font-mono);
    color: var(--ctp-text);
}

.gh-content :not(pre) > code {
    vertical-align: baseline;
    padding: 0.15em 0.4em;
    font-weight: 400;
    font-size: 0.95em;
    line-height: 1em;
    background: var(--ctp-surface0);
    border-radius: 0.25em;
    font-family: var(--font-mono);
    color: var(--ctp-peach);
}

/* 17. Cards
/* ---------------------------------------------------------- */

.gh-content :not(.kg-card):not(table):not([id]) + :is(.kg-card, table) { margin-top: calc(48px * var(--content-spacing-factor, 1)); }
.gh-content :is(.kg-card, table) + :not(.kg-card):not(table):not([id]) { margin-top: calc(48px * var(--content-spacing-factor, 1)); }
.gh-content :not(.kg-card):not([id]) + .kg-card.kg-width-full { margin-top: calc(68px * var(--content-spacing-factor, 1)); }
.gh-content .kg-card.kg-width-full + :not(.kg-card):not([id]) { margin-top: calc(68px * var(--content-spacing-factor, 1)); }

.kg-image { margin-right: auto; margin-left: auto; }
.kg-embed-card { display: flex; flex-direction: column; align-items: center; width: 100%; }
.kg-image[width][height], .kg-gallery-image { cursor: pointer; }
.kg-image-card a:hover, .kg-gallery-image a:hover { opacity: 1 !important; }

/* Toggle */
.kg-card.kg-toggle-card .kg-toggle-heading-text { font-size: 2rem; font-weight: 700; color: var(--ctp-text); }
.has-serif-title .kg-toggle-card .kg-toggle-heading-text { font-family: var(--font-serif); }
.has-mono-title .kg-toggle-card .kg-toggle-heading-text { font-family: var(--font-mono); }

/* Callout */
.kg-callout-card.kg-card { border-radius: 0.25em; }
.kg-callout-card-accent a { text-decoration: underline; }

/* Blockquote */
blockquote:not([class]) { padding-left: 2rem; border-left: 4px solid var(--ctp-mauve); color: var(--ctp-subtext1); }
blockquote.kg-blockquote-alt { font-style: normal; font-weight: 400; color: var(--ctp-subtext0); }

/* Button */
.kg-card.kg-button-card .kg-btn { height: unset; padding: .6em 1.2em; text-align: center; font-size: 1em; line-height: 1.2em; background-color: var(--ctp-mauve); color: var(--ctp-crust); }
.kg-card.kg-button-card .kg-btn:hover { background-color: var(--ctp-lavender); }

/* Header */
.has-serif-title .kg-card.kg-header-card h2.kg-header-card-header { font-family: var(--font-serif); }
.has-mono-title .kg-card.kg-header-card h2.kg-header-card-header { font-family: var(--font-mono); }
.has-serif-body .kg-header-card h3.kg-header-card-subheader { font-family: var(--font-serif); }

/* Bookmark */
.kg-bookmark-card .kg-bookmark-container { border-radius: 0.25em !important; border: 1px solid var(--ctp-surface1); }
.kg-bookmark-card .kg-bookmark-container:hover { opacity: 1; border-color: var(--ctp-surface2); }
.kg-bookmark-card a.kg-bookmark-container,
.kg-bookmark-card a.kg-bookmark-container:hover { background: var(--ctp-surface0) !important; color: var(--ctp-text) !important; }
.kg-bookmark-card .kg-bookmark-content { padding: 1.15em; }
.kg-bookmark-card .kg-bookmark-title { font-size: 0.9em; color: var(--ctp-text); }
.kg-bookmark-card .kg-bookmark-description { max-height: none; margin-top: 0.3em; font-size: 0.8em; color: var(--ctp-subtext0); }
.kg-bookmark-card .kg-bookmark-metadata { font-size: 0.8em; color: var(--ctp-overlay1); }
.kg-bookmark-card .kg-bookmark-thumbnail img { border-radius: 0 0.2em 0.2em 0; }

/* Product */
.kg-product-card.kg-card .kg-product-card-image { margin-bottom: 12px; }
.kg-product-card.kg-card a.kg-product-card-button { height: 2.8em; margin-top: 12px; background-color: var(--ctp-mauve); }
.has-serif-title .kg-product-card.kg-card .kg-product-card-title { font-family: var(--font-serif); }
.has-mono-title .kg-product-card.kg-card .kg-product-card-title { font-family: var(--font-mono); }
.has-serif-body .kg-product-card-description :is(p, ul, ol) { font-family: var(--font-serif-alt); }

/* File */
.kg-file-card.kg-card .kg-file-card-container { padding: 0.6em; background-color: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); }
.kg-file-card.kg-card .kg-file-card-contents { margin: 4px 8px 6px; }
.kg-file-card.kg-card .kg-file-card-metadata { font-size: 0.9em; }
.kg-file-card.kg-card .kg-file-card-filesize::before { margin-right: 6px; margin-left: 6px; }

/* Caption */
figcaption { margin-top: 12px; font-size: 1.4rem; text-align: center; color: var(--ctp-overlay1); }
.kg-card.kg-width-full figcaption { padding: 0 16px; }
figcaption a { color: var(--ctp-blue); text-decoration: underline; }

/* 18. Comments */
.gh-comments { margin-top: 48px; }

/* 19. Recent posts */
.post-template .gh-container { margin-top: 120px; }
.post-template .gh-container-inner { display: block; }
.post-template .gh-container.is-grid .gh-feed { grid-template-columns: repeat(4, 1fr); }
.post-template .gh-container .gh-container-title { display: block; }

/* 20. Archive
/* ---------------------------------------------------------- */

.gh-archive { display: grid; grid-template-columns: repeat(16, 1fr); gap: var(--grid-gap); margin-block: 80px 24px; }
.gh-archive.has-image { margin-top: 48px; }

.gh-archive-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
    grid-column: 1 / -1;
    padding-bottom: clamp(40px, 2.73vw + 29.09px, 64px);
    border-bottom: 1px solid var(--ctp-surface1);
}

.gh-archive.has-image .gh-archive-inner { align-items: center; grid-column: 1 / -1; }
.gh-archive:not(.has-sidebar):not(.has-image) .gh-archive-inner { grid-column: 3 / span 12; }
.gh-archive .gh-article-image { grid-column: auto; margin-top: 0; }
:is(.tag-template, .author-template) .gh-container { margin-top: 0; }

.author-template .gh-archive-inner { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 24px; }
.author-template .gh-article-image { margin-top: 0; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.author-template .gh-article-title { font-size: 3.6rem; }

.gh-author-meta { display: flex; gap: 10px; margin-top: 14px; font-size: 1.5rem; font-weight: 550; color: var(--ctp-subtext0); }
.gh-author-meta a { color: inherit; }
.gh-author-meta a:hover { color: var(--ctp-mauve); }
.gh-author-social { display: flex; gap: 10px; align-items: center; padding-left: 3px; }
.gh-author-social svg { width: 20px; height: 20px; }

@media (max-width: 1199px) {
    .gh-archive { display: block; }
}

@media (max-width: 767px) {
    .gh-archive-inner { display: flex; flex-direction: column-reverse; align-items: flex-start; }
    .author-template .gh-archive-inner { flex-direction: column-reverse; }
}

/* 21. Design settings
/* ---------------------------------------------------------- */

.has-serif-title { --factor: 1.15; }
.has-mono-title { --factor: 1.1; }

.has-sans-title :is(.is-title, .gh-content :is(h2, h3)) { font-family: var(--font-sans); }
.has-serif-title :is(.is-title, .gh-content :is(h2, h3)) { font-family: var(--font-serif); font-weight: 550; }
.has-mono-title :is(.is-title, .gh-content :is(h2, h3)) { font-family: var(--font-mono); }
.has-sans-body .is-body { font-family: var(--font-sans); }
.has-serif-body .is-body { font-family: var(--font-serif-alt); }

.has-serif-title .gh-header.is-classic .gh-header-title { font-weight: 550; letter-spacing: -0.015em; }
.has-mono-title .gh-header.is-classic .gh-header-title { letter-spacing: -0.01em; }
.has-serif-title .gh-form { border-radius: 0; }
.has-serif-title .gh-card-title { line-height: 1.15; letter-spacing: -0.006em; font-size: calc(2.0rem*var(--factor, 1)); }
.has-serif-title .gh-featured-feed .gh-card-title { font-size: calc(1.6rem*var(--factor, 1)); }
.has-mono-title .gh-featured-feed .gh-card-title { font-size: calc(1.5rem*var(--factor, 1)); letter-spacing: 0; }
.has-serif-title .gh-header.is-highlight .gh-featured-feed .gh-card-title { font-size: clamp(1.6rem, 0.23vw + 1.51rem, 1.8rem); }
.has-mono-title .gh-card-title { font-size: calc(1.8rem*var(--factor, 1)); line-height: 1.2; }
.has-serif-title .gh-about-title { letter-spacing: -0.009em; }
.has-serif-title .gh-footer-signup-header { letter-spacing: -0.019em; }
.has-serif-title .gh-article-title { letter-spacing: -0.019em; }
.has-serif-body { --content-font-size: 1.9rem; }
.has-serif-body .gh-card-excerpt { font-size: 1.65rem; line-height: 1.4; letter-spacing: 0.0005em; }
.has-serif-body .gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-excerpt,
.has-serif-body .gh-header.is-highlight .gh-card:first-child .gh-card-excerpt { font-size: 1.8rem; letter-spacing: -0.001em; }
.has-serif-title .gh-header.is-magazine .gh-header-inner>.gh-card .gh-card-title,
.has-serif-title .gh-header.is-highlight .gh-header-left .gh-card-title { font-weight: 550; font-size: clamp(3.2rem,1.82vw + 2.47rem,4.9rem); }
.has-serif-body .gh-about-description { font-size: 1.6rem; }
.has-serif-body .gh-article-excerpt { letter-spacing: 0; }
.has-serif-body .gh-footer-signup-subhead { letter-spacing: 0; }
.has-serif-title :is(.gh-button, .gh-form, .gh-form-input) { border-radius: 0; }
.has-mono-title :is(.gh-button) { border-radius: 0; }
.has-mono-title :is(.gh-form) { border-radius: 0; }
.has-serif-title .gh-cta-title { font-size: 4.8rem; }

/* 22. Footer
/* ---------------------------------------------------------- */

.gh-footer { margin-top: 12vw; font-size: 1.5rem; color: var(--ctp-text); background-color: var(--ctp-mantle); }
.gh-footer a:not(.gh-button) { color: inherit; }
.gh-footer a:not(.gh-button):hover { color: var(--ctp-mauve); }

/* Footer styles */
.gh-footer.has-accent-color { background-color: var(--ctp-mauve); }
.gh-footer.has-accent-color .gh-footer-bar { border-top: 0; }
.gh-footer.has-accent-color .gh-button { background-color: var(--ctp-base); color: var(--ctp-text); }

/* Footer bar */
.gh-footer-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 32px;
    margin-bottom: 100px;
    padding-block: 28px;
    font-weight: 550;
    border-block: 1px solid var(--ctp-surface1);
}

.gh-footer-logo { position: relative; font-size: calc(2.4rem * var(--factor, 1)); font-weight: 725; letter-spacing: -0.015em; white-space: nowrap; }
.gh-footer-logo img { max-height: 40px; }
.gh-footer-menu .nav { display: flex; justify-content: center; gap: 8px 28px; flex-wrap: wrap; margin: 0; padding: 0; list-style-type: none; }
.gh-footer-copyright { text-align: right; white-space: nowrap; color: var(--ctp-subtext0); }
.gh-footer-copyright a { text-decoration: underline; }

/* Footer signup */
.gh-footer-signup { display: flex; flex-direction: column; align-items: center; padding-bottom: 160px; text-align: center; }
.gh-footer-signup-header { font-size: calc(clamp(2.8rem,1.36vw + 2.25rem,4rem) * var(--factor, 1)); font-weight: 700; letter-spacing: -0.03em; color: var(--ctp-text); }
.gh-footer-signup-subhead { margin-top: 12px; max-width: 640px; font-size: 1.8rem; font-weight: 450; line-height: 1.4; letter-spacing: -0.014em; color: var(--ctp-subtext0); }
.gh-footer-signup .gh-form { margin-top: 40px; }

@media (max-width: 991px) {
    .gh-footer-bar { display: flex; flex-direction: column; gap: 20px; }
}

/* 23. Lightbox
/* ---------------------------------------------------------- */

.pswp { position: absolute; top: 0; left: 0; z-index: 3999999; display: none; width: 100%; height: 100%; overflow: hidden; -ms-touch-action: none; touch-action: none; outline: none; backface-visibility: hidden; -webkit-text-size-adjust: 100%; }
.pswp img { max-width: none; }
.pswp--animate_opacity { opacity: 0.001; transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); will-change: opacity; }
.pswp--open { display: block; }
.pswp--zoom-allowed .pswp__img { cursor: zoom-in; }
.pswp--zoomed-in .pswp__img { cursor: grab; }
.pswp--dragging .pswp__img { cursor: grabbing; }

.pswp__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--ctp-crust);
    opacity: 0;
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: opacity;
}

.pswp__scroll-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.pswp__container, .pswp__zoom-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; touch-action: none; backface-visibility: hidden; }
.pswp__container, .pswp__img { user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.pswp__zoom-wrap { position: absolute; width: 100%; transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transform-origin: left top; }
.pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { transition: none; }
.pswp__item { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
.pswp__img { position: absolute; top: 0; left: 0; width: auto; height: auto; }
.pswp__img--placeholder { backface-visibility: hidden; }
.pswp__img--placeholder--blank { background: var(--ctp-crust); }
.pswp--ie .pswp__img { top: 0; left: 0; width: 100% !important; height: auto !important; }
.pswp__error-msg { position: absolute; top: 50%; left: 0; width: 100%; margin-top: -8px; font-size: 14px; line-height: 16px; color: var(--ctp-subtext0); text-align: center; }
.pswp__error-msg a { color: var(--ctp-blue); text-decoration: underline; }

.pswp__button { position: relative; display: block; float: right; width: 44px; height: 44px; padding: 0; margin: 0; overflow: visible; appearance: none; cursor: pointer; background: none; border: 0; box-shadow: none; transition: opacity 0.2s; }
.pswp__button:focus, .pswp__button:hover { opacity: 1; }
.pswp__button:active { outline: none; opacity: 0.9; }
.pswp__button::-moz-focus-inner { padding: 0; border: 0; }
.pswp__ui--over-close .pswp__button--close { opacity: 1; }
.pswp__button, .pswp__button--arrow--left::before, .pswp__button--arrow--right::before { width: 44px; height: 44px; background: url("../images/default-skin.png") 0 0 no-repeat; background-size: 264px 88px; }

@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
    .pswp--svg .pswp__button, .pswp--svg .pswp__button--arrow--left::before, .pswp--svg .pswp__button--arrow--right::before { background-image: url("../images/default-skin.svg"); }
    .pswp--svg .pswp__button--arrow--left, .pswp--svg .pswp__button--arrow--right { background: none; }
}

.pswp__button--close { background-position: 0 -44px; }
.pswp__button--share { background-position: -44px -44px; }
.pswp__button--fs { display: none; }
.pswp--supports-fs .pswp__button--fs { display: block; }
.pswp--fs .pswp__button--fs { background-position: -44px 0; }
.pswp__button--zoom { display: none; background-position: -88px 0; }
.pswp--zoom-allowed .pswp__button--zoom { display: block; }
.pswp--zoomed-in .pswp__button--zoom { background-position: -132px 0; }
.pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right { visibility: hidden; }
.pswp__button--arrow--left, .pswp__button--arrow--right { position: absolute; top: 50%; width: 70px; height: 100px; margin-top: -50px; background: none; }
.pswp__button--arrow--left { left: 0; }
.pswp__button--arrow--right { right: 0; }
.pswp__button--arrow--left::before, .pswp__button--arrow--right::before { position: absolute; top: 35px; width: 32px; height: 30px; content: ""; }
.pswp__button--arrow--left::before { left: 6px; background-position: -138px -44px; }
.pswp__button--arrow--right::before { right: 6px; background-position: -94px -44px; }

.pswp__counter { position: absolute; top: 0; left: 0; height: 44px; padding: 0 15px; font-size: 11px; font-weight: 700; line-height: 44px; color: var(--ctp-text); user-select: none; }
.pswp__caption { position: absolute; bottom: 0; left: 0; width: 100%; min-height: 44px; }
.pswp__caption__center { max-width: 420px; padding: 25px 15px 30px; margin: 0 auto; font-size: 11px; line-height: 1.6; color: var(--ctp-text); text-align: center; }
.pswp__caption__center .post-caption-title { margin-bottom: 7px; font-size: 15px; font-weight: 500; text-transform: uppercase; }
.pswp__caption__center .post-caption-meta-item + .post-caption-meta-item::before { padding: 0 4px; content: "\02022"; }
.pswp__caption--empty { display: none; }
.pswp__caption--fake { visibility: hidden; }

.pswp__preloader { position: absolute; top: 0; left: 50%; width: 44px; height: 44px; margin-left: -22px; opacity: 0; transition: opacity 0.25s ease-out; direction: ltr; will-change: opacity; }
.pswp__preloader__icn { width: 20px; height: 20px; margin: 12px; }
.pswp__preloader--active { opacity: 1; }
.pswp__preloader--active .pswp__preloader__icn { background: url("../images/preloader.gif") 0 0 no-repeat; }
.pswp--css_animation .pswp__preloader--active { opacity: 1; }
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn { animation: clockwise 500ms linear infinite; }
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut { animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
.pswp--css_animation .pswp__preloader__icn { position: absolute; top: 15px; left: 15px; width: 14px; height: 14px; margin: 0; background: none; opacity: 0.75; }
.pswp--css_animation .pswp__preloader__cut { position: relative; width: 7px; height: 14px; overflow: hidden; }
.pswp--css_animation .pswp__preloader__donut { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 14px; height: 14px; margin: 0; background: none; border: 2px solid var(--ctp-text); border-bottom-color: transparent; border-left-color: transparent; border-radius: 50%; }

@media screen and (max-width: 1024px) {
    .pswp__preloader { position: relative; top: auto; left: auto; float: right; margin: 0; }
}

@keyframes clockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes donut-rotate { 0% { transform: rotate(0); } 50% { transform: rotate(-140deg); } 100% { transform: rotate(0); } }

.pswp__ui { z-index: 1550; visibility: visible; opacity: 1; -webkit-font-smoothing: auto; }
.pswp__top-bar { position: absolute; top: 0; left: 0; width: 100%; height: 44px; }
.pswp__caption, .pswp__top-bar, .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { backface-visibility: hidden; transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); will-change: opacity; }
.pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { visibility: visible; }
.pswp__ui--idle .pswp__top-bar { opacity: 0; }
.pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right { opacity: 0; }
.pswp__ui--hidden .pswp__top-bar, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right { opacity: 0.001; }
.pswp__ui--one-slide .pswp__button--arrow--left, .pswp__ui--one-slide .pswp__button--arrow--right, .pswp__ui--one-slide .pswp__counter { display: none; }
.pswp__element--disabled { display: none !important; }
.pswp--minimal--dark .pswp__top-bar { background: none; }

/* Selection color */
::selection { background-color: var(--ctp-surface2); color: var(--ctp-text); }

/* Scrollbar styling */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ctp-mantle); }
::-webkit-scrollbar-thumb { background-color: var(--ctp-surface1); border-radius: 6px; border: 3px solid var(--ctp-mantle); }
::-webkit-scrollbar-thumb:hover { background-color: var(--ctp-surface2); }

/* Firefox scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--ctp-surface1) var(--ctp-mantle); }

/* ============================================
   CATPPUCCIN MOCHA - GLOBAL OVERRIDES
   These ensure Ghost's default styles don't 
   override our Catppuccin colors
   ============================================ */

/* Force all text to use Catppuccin colors */
body,
.gh-viewport,
.gh-main,
.gh-content,
.gh-content p,
.gh-content li,
.gh-content span,
.gh-content div,
.gh-article,
.gh-canvas,
article,
section,
main {
    color: var(--ctp-text) !important;
}

/* Ensure background is always Catppuccin base */
body,
.gh-viewport,
html {
    background-color: var(--ctp-base) !important;
}

/* Ghost card content overrides */
.kg-card,
.kg-card p,
.kg-card span,
.kg-card div,
.kg-card li,
.kg-callout-card,
.kg-callout-text,
.kg-toggle-content,
.kg-toggle-content p,
.kg-product-card-description,
.kg-product-card-description p {
    color: var(--ctp-text) !important;
}

/* Signup/Subscription forms */
[data-members-form] label,
[data-members-form] p,
.gh-signup,
.gh-signup p,
.gh-subscribe,
.gh-subscribe p {
    color: var(--ctp-text) !important;
}

/* Hide the Ghost portal trigger button (bottom right corner) */
.gh-portal-triggerbtn-container,
.gh-portal-triggerbtn-iframe {
    display: none !important;
}

/* Fix author profile image size on post pages */
.gh-article-author-image {
    flex-shrink: 0;
}

.gh-article-author-image .author-profile-image {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.gh-article-meta {
    align-items: center;
}

/* Links always blue, unless in buttons */
.gh-content a:not(.gh-button):not(.kg-btn),
.gh-article a:not(.gh-button):not(.kg-btn),
article a:not(.gh-button):not(.kg-btn) {
    color: var(--ctp-blue) !important;
}

.gh-content a:not(.gh-button):not(.kg-btn):hover,
.gh-article a:not(.gh-button):not(.kg-btn):hover,
article a:not(.gh-button):not(.kg-btn):hover {
    color: var(--ctp-sapphire) !important;
}

/* Headings */
.gh-content h1,
.gh-content h2,
.gh-content h3,
.gh-content h4,
.gh-content h5,
.gh-content h6,
.gh-article h1,
.gh-article h2,
.gh-article h3,
.gh-article h4,
.gh-article h5,
.gh-article h6,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
    color: var(--ctp-text) !important;
}

/* Secondary/muted text */
.gh-article-excerpt,
.gh-card-excerpt,
.gh-about-description,
figcaption,
.gh-article-meta,
time,
.post-date {
    color: var(--ctp-subtext0) !important;
}

/* Buttons retain their styling */
.gh-button,
.kg-btn,
button[type="submit"],
input[type="submit"] {
    background-color: var(--ctp-mauve) !important;
    color: var(--ctp-crust) !important;
}

.gh-button:hover,
.kg-btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: var(--ctp-lavender) !important;
}

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
    background-color: var(--ctp-surface0) !important;
    color: var(--ctp-text) !important;
    border-color: var(--ctp-surface1) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--ctp-overlay1) !important;
}

/* Blockquotes */
blockquote,
blockquote p {
    color: var(--ctp-subtext1) !important;
}

/* Code */
code,
pre,
.gh-content code,
.gh-content pre {
    color: var(--ctp-text) !important;
}

.gh-content :not(pre) > code {
    color: var(--ctp-peach) !important;
    background-color: var(--ctp-surface0) !important;
}

/* Table cells */
.gh-content table,
.gh-content th,
.gh-content td {
    color: var(--ctp-text) !important;
    border-color: var(--ctp-surface1) !important;
}

/* Footer */
.gh-footer,
.gh-footer p,
.gh-footer span,
.gh-footer a:not(.gh-button) {
    color: var(--ctp-text) !important;
}

.gh-footer {
    background-color: var(--ctp-mantle) !important;
}

/* Navigation */
.gh-navigation,
.gh-navigation a:not(.gh-button) {
    color: var(--ctp-text) !important;
}

.gh-navigation {
    background-color: var(--ctp-base) !important;
}

/* Dropdown menus */
.gh-dropdown {
    background-color: var(--ctp-surface0) !important;
}

.gh-dropdown a {
    color: var(--ctp-text) !important;
}

.gh-dropdown a:hover {
    color: var(--ctp-mauve) !important;
}

/* ============================================
   PAGE-SPECIFIC OVERRIDES
   ============================================ */

/* Page template content */
.page-template,
.page-template .gh-content,
.page-template .gh-content p,
.page-template .gh-content li,
.page-template .gh-content span,
.page-template .gh-content div,
.page-template .gh-article,
.page-template .gh-canvas,
.page-template article,
.page-template section {
    color: var(--ctp-text) !important;
}

.page-template .gh-article-title,
.page-template h1,
.page-template h2,
.page-template h3,
.page-template h4,
.page-template h5,
.page-template h6 {
    color: var(--ctp-text) !important;
}

/* Ghost's content renderer classes */
.gh-content.gh-canvas,
.gh-content.gh-canvas p,
.gh-content.gh-canvas li,
.gh-content.gh-canvas span {
    color: var(--ctp-text) !important;
}

/* Koenig editor card content */
[data-kg],
[data-kg] p,
[data-kg] span,
[data-kg] div,
[data-kg] li,
.kg-prose,
.kg-prose p,
.kg-prose span,
.kg-prose li {
    color: var(--ctp-text) !important;
}

/* Ghost's built-in signup/about cards */
.kg-signup-card,
.kg-signup-card p,
.kg-signup-card span,
.kg-signup-card h2,
.kg-signup-card h3,
.kg-signup-card h4,
.kg-header-card,
.kg-header-card p,
.kg-header-card span,
.kg-header-card h2,
.kg-header-card h3 {
    color: var(--ctp-text) !important;
}

/* Ensure all paragraph elements get the right color */
p {
    color: var(--ctp-text);
}

/* Target any remaining dark text */
.has-sans-body p,
.has-serif-body p,
.has-mono-body p,
.is-body,
.is-body p {
    color: var(--ctp-text) !important;
}

/* Ghost content API rendered content */
.post-content,
.post-content p,
.post-content li,
.post-content span,
.page-content,
.page-content p,
.page-content li,
.page-content span {
    color: var(--ctp-text) !important;
}

/* Additional Ghost classes that might be used */
.post-full-content,
.post-full-content p,
.article-content,
.article-content p,
.entry-content,
.entry-content p {
    color: var(--ctp-text) !important;
}

/* Universal text color override as last resort */
.gh-viewport p,
.gh-viewport li,
.gh-viewport span:not(.gh-button span),
.gh-main p,
.gh-main li,
.gh-main span:not(.gh-button span) {
    color: var(--ctp-text) !important;
}

/* Specific fix for the about/signup page content */
.gh-about-content,
.gh-about-content p,
.gh-signup-content,
.gh-signup-content p {
    color: var(--ctp-text) !important;
}

/* ============================================
   GHOST ADMIN EDITOR OVERRIDES
   These target the editor preview area
   ============================================ */

/* Editor content area */
.gh-editor,
.gh-editor-content,
.gh-koenig-editor,
.gh-koenig-editor-pane,
.koenig-editor,
.koenig-editor__editor,
.koenig-lexical,
[data-lexical-editor],
[data-kg="editor"],
[contenteditable="true"] {
    background-color: var(--ctp-base) !important;
    color: var(--ctp-text) !important;
}

/* Editor text content */
.gh-editor p,
.gh-editor span,
.gh-editor div,
.gh-editor li,
.koenig-editor p,
.koenig-editor span,
.koenig-editor div,
.koenig-editor li,
.koenig-lexical p,
.koenig-lexical span,
.koenig-lexical div,
.koenig-lexical li,
[data-lexical-editor] p,
[data-lexical-editor] span,
[data-lexical-editor] div,
[data-lexical-editor] li,
[contenteditable="true"] p,
[contenteditable="true"] span,
[contenteditable="true"] div,
[contenteditable="true"] li {
    color: var(--ctp-text) !important;
}

/* Editor headings */
.gh-editor h1,
.gh-editor h2,
.gh-editor h3,
.gh-editor h4,
.gh-editor h5,
.gh-editor h6,
.koenig-editor h1,
.koenig-editor h2,
.koenig-editor h3,
.koenig-editor h4,
.koenig-editor h5,
.koenig-editor h6,
.koenig-lexical h1,
.koenig-lexical h2,
.koenig-lexical h3,
.koenig-lexical h4,
.koenig-lexical h5,
.koenig-lexical h6,
[data-lexical-editor] h1,
[data-lexical-editor] h2,
[data-lexical-editor] h3,
[data-lexical-editor] h4,
[data-lexical-editor] h5,
[data-lexical-editor] h6,
[contenteditable="true"] h1,
[contenteditable="true"] h2,
[contenteditable="true"] h3,
[contenteditable="true"] h4,
[contenteditable="true"] h5,
[contenteditable="true"] h6 {
    color: var(--ctp-text) !important;
}

/* Editor placeholder text */
.koenig-editor [data-placeholder]::before,
.koenig-lexical [data-placeholder]::before,
[data-lexical-editor] [data-placeholder]::before,
[contenteditable="true"][data-placeholder]:empty::before,
.kg-prose [data-placeholder]::before {
    color: var(--ctp-overlay1) !important;
}

/* Lexical editor specific */
.lexical-content,
.lexical-content p,
.lexical-content span,
.lexical-content div {
    color: var(--ctp-text) !important;
}

/* Article/page editor wrapper */
.gh-editor-title,
.gh-editor-title-container input,
.gh-editor-title-container textarea {
    color: var(--ctp-text) !important;
    background-color: transparent !important;
}

/* Any iframe that might contain the editor */
.gh-editor iframe,
.editor-preview iframe {
    background-color: var(--ctp-base) !important;
}

/* Card previews in editor */
.kg-card-selected,
.kg-card-hover,
.kg-card {
    color: var(--ctp-text) !important;
}

/* Ensure all nested elements get the color */
[class*="editor"] *:not(button):not(.gh-button):not(.kg-btn):not(a) {
    color: inherit;
}

/* Dark background for editor areas */
[class*="koenig"],
[class*="lexical"],
[class*="editor-content"],
[class*="editor-pane"] {
    background-color: var(--ctp-base) !important;
}

/* Fix any text that might still be dark */
.gh-main [style*="color: rgb(0"],
.gh-main [style*="color: #0"],
.gh-main [style*="color: #15171a"],
.gh-main [style*="color:#15171a"],
.gh-main [style*="color: #333"],
.gh-main [style*="color:#333"] {
    color: var(--ctp-text) !important;
}

/* ============================================
   MEMBER/SUBSCRIPTION STYLING
   ============================================ */

/* Hide ONLY the floating portal trigger button (bottom right corner) */
.gh-portal-triggerbtn-container,
.gh-portal-triggerbtn-iframe {
    display: none !important;
}

/* ============================================
   IMAGE CENTERING IN POSTS
   ============================================ */

/* Force feature/article image to center - keep caption below */
.gh-article-image {
    display: block !important;
    text-align: center !important;
}

.gh-article-image img {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100%;
}

.gh-article-image figcaption {
    text-align: center !important;
}

/* Center image cards within the grid layout */
.gh-content .kg-image-card,
.gh-content .kg-gallery-card {
    display: block !important;
    text-align: center !important;
}

.gh-content figure:not(.gh-article-image) {
    display: block !important;
    text-align: center !important;
}

/* Center the image itself */
.gh-content .kg-image-card img,
.gh-content .kg-gallery-card img,
.gh-content figure img,
.gh-content img {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ensure kg-image class is centered */
.kg-image {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Center gallery containers */
.gh-content .kg-gallery-container {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.gh-content .kg-gallery-row {
    justify-content: center !important;
}

/* Center standalone images in paragraphs */
.gh-content p > img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}