/* gilmore-glass: Source 1.7.4 restyled to match https://gilmore.tech
   Dark glass cards over a static colour field, mint accent, Inter + JetBrains Mono.
   Loaded after {{ghost_head}} so it wins over the accent colour Ghost injects. */

:root,
:root.has-light-text {
    --background-color: #07090c;
    --ghost-accent-color: #37e2a5;
    --gg-text: #e8ebef;
    --gg-body: #d3d9e0;
    --gg-muted: #a3abb6;
    --gg-accent: #37e2a5;
    --gg-accent-text: #9ff5d4;
    --gg-tint: rgba(8, 11, 15, .62);
    --gg-edge: rgba(255, 255, 255, .10);
    --gg-radius: 22px;
    --color-primary-text: var(--gg-text);
    --color-secondary-text: var(--gg-muted);
    --color-border: rgba(255, 255, 255, .10);
    --color-lighter-gray: rgba(255, 255, 255, .06);
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
    color-scheme: dark;
}

body {
    background: var(--background-color);
    color: var(--gg-body);
}

/* ---- Static colour field (same as the homepage) ---- */
.gg-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.gg-backdrop::after {
    content: ""; position: absolute; inset: 0; opacity: .06; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.gg-blob { position: absolute; border-radius: 50%; filter: blur(70px); }
.gg-b1 { width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax; opacity: .55;
         background: radial-gradient(circle at 40% 40%, #1fd39a, transparent 65%); }
.gg-b2 { width: 40vmax; height: 40vmax; right: -10vmax; top: 18vh; opacity: .45;
         background: radial-gradient(circle, #3b6cff, transparent 65%); }
.gg-b3 { width: 38vmax; height: 38vmax; left: 22vw; bottom: -18vmax; opacity: .35;
         background: radial-gradient(circle, #8a4dff, transparent 65%); }
.gh-viewport { position: relative; z-index: 0; background: transparent; }

/* ---- Glass material ---- */
.gg-glass,
.gh-navigation-inner,
.gh-card,
.gh-cta-inner,
.gh-about,
.gh-footer-signup,
.gh-article,
.gh-container-inner > .gh-sidebar .gh-sidebar-inner {
    position: relative;
    border-radius: var(--gg-radius);
    background:
        linear-gradient(155deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 55%),
        var(--gg-tint);
    border: 1px solid var(--gg-edge);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(255,255,255,.03),
        0 10px 30px -12px rgba(0,0,0,.55);
}

/* ---- Navigation ---- */
.gh-navigation { padding-top: 16px; background: transparent; }
.gh-navigation-inner { padding: 6px 22px; }
/* Source fills these with the opaque page colour (it expects a flat background); on glass that
   shows up as dark boxes, e.g. behind the gilmore.tech link. */
.gh-navigation-brand,
.gh-navigation-menu,
.gh-navigation-actions,
.gh-navigation.has-accent-color .gh-navigation-actions { background-color: transparent; }
.gh-navigation-logo { color: var(--gg-text); font-weight: 700; letter-spacing: -.02em; }
.gh-navigation-menu a, .gh-navigation-members a:not(.gh-button) { color: var(--gg-body); }
.gh-navigation-menu a:hover { color: var(--gg-accent-text); opacity: 1; }

/* ---- Buttons (mint, dark text: 10:1+) ---- */
.gh-button,
.gh-form .gh-button,
.gh-cta .gh-button {
    background: linear-gradient(180deg, #5cf0bb, #2fd79b);
    color: #06120d;
    font-weight: 650;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 24px -8px rgba(55,226,165,.6);
}
.gh-button:hover { opacity: 1; filter: brightness(1.08); }

/* ---- Post feed ---- */
.gh-card { padding: clamp(18px, 2vw, 26px); }
.gh-card-link:hover { opacity: 1; }
.gh-card-image { border-radius: 14px; overflow: hidden; }
.gh-card-title { color: var(--gg-text); letter-spacing: -.015em; }
.gh-card-excerpt { color: var(--gg-body); }
.gh-card-meta, .gh-card-tag { color: var(--gg-muted); font-family: var(--font-mono); font-size: 1.2rem; letter-spacing: .04em; }
.gh-container-title, .gh-sidebar-title, .gh-article-tag {
    font-family: var(--font-mono); font-weight: 500; font-size: 1.2rem;
    letter-spacing: .12em; text-transform: uppercase; color: var(--gg-muted);
    border-bottom-color: var(--color-border);
}
.gh-more a { color: var(--gg-accent-text); }

/* ---- Header / CTA / about ---- */
/* Source's classic header paints the site cover image full-bleed behind the title (Ghost's stock
   purple photo by default) and forces a white signup form over it. The cover is Joe's headshot,
   which now sits in the nav bar (.gg-nav-avatar), so the header is just a compact tagline. */
.gh-header.is-classic { padding-block: clamp(28px, 4vw, 48px) clamp(8px, 2vw, 16px); background: transparent; }
.gh-header.is-classic.has-image::before,
.gh-header.is-classic.has-image .gh-header-image { display: none; }
.gh-header.is-classic .gh-header-title { font-size: clamp(2.4rem, 3.2vw, 3.6rem); letter-spacing: -.02em; }
.gh-header.is-classic + .gh-container, .gh-header.is-classic:not(.has-image) + .gh-container { margin-top: 24px; }

.gh-navigation-logo { display: inline-flex; align-items: center; gap: 12px; }
.gg-nav-avatar {
    width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 0 0 3px rgba(255,255,255,.05);
}
.gh-header.is-classic.has-image .gh-header-inner { color: var(--gg-text); }
.gh-header.is-classic.has-image .gh-form { background-color: rgba(255,255,255,.06); }
.gh-header.is-classic.has-image .gh-form-input { color: var(--gg-body); }
.gh-header.is-classic.has-image .gh-form-input::placeholder,
.gh-header.is-classic.has-image button.gh-form-input,
.gh-header.is-classic.has-image .gh-form > svg { color: var(--gg-muted); }
.gh-header .gh-header-title, .gh-about-title, .gh-cta-title { color: var(--gg-text); }
.gh-header-description, .gh-about-description, .gh-cta-description { color: var(--gg-body); }
.gh-cta-inner { padding: clamp(24px, 3vw, 40px); }
.gh-form { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.gh-form-input, .gh-form-input::placeholder { color: var(--gg-body); }

/* ---- Article ---- */
.gh-article { padding: clamp(20px, 4vw, 56px) 0; margin-top: 24px; }
.gh-article-title { color: var(--gg-text); letter-spacing: -.03em; }
.gh-article-excerpt { color: var(--gg-body); }
.gh-article-meta, .gh-article-meta-content, .gh-article-author-name { color: var(--gg-muted); }
.gh-content { color: var(--gg-body); }
.gh-content > :is(h1, h2, h3, h4, h5, h6) { color: var(--gg-text); letter-spacing: -.015em; }
.gh-content a { color: var(--gg-accent-text); text-decoration-color: rgba(159,245,212,.5); }
.gh-content a:hover { color: #c8fbe6; }
.gh-content blockquote { border-left-color: var(--gg-accent); color: var(--gg-text); }
.gh-content hr { border-color: var(--color-border); }
.gh-content :not(pre) > code {
    background: rgba(255,255,255,.08); color: var(--gg-accent-text);
    border-radius: 6px; padding: .1em .35em; font-family: var(--font-mono);
}
.gh-content pre {
    background: rgba(4, 6, 9, .85); color: var(--gg-body);
    border: 1px solid var(--color-border); border-radius: 14px;
}
.gh-content figcaption { color: var(--gg-muted); }
.kg-callout-card, .kg-toggle-card, .kg-bookmark-container {
    background: rgba(255,255,255,.05) !important; border-color: var(--color-border) !important; color: var(--gg-body);
}

/* ---- Ghost Portal (membership widget iframes) ----
   The parent page is color-scheme: dark but Portal's iframe documents are not; Chrome then paints
   the iframe's canvas opaque white, which showed as a white box behind the floating button. */
iframe[class*="gh-portal"], #ghost-portal-root iframe { color-scheme: normal; }
/* The floating trigger duplicates the nav's Subscribe button and is coloured from Ghost's accent
   setting rather than the theme; the nav button is the one entry point. */
.gh-portal-triggerbtn-iframe { display: none !important; }

/* ---- Footer ---- */
/* Keep the bar to Source's three columns: title | links | "Powered by". The gilmore.tech link
   lives inside the links nav so it can't become a fourth grid item and wrap onto its own row. */
.gh-footer-menu { display: flex; justify-content: center; align-items: center; gap: 8px 28px; flex-wrap: wrap; }
.gh-footer-menu .nav { align-items: center; }
.gh-footer-copyright { color: var(--gg-muted); }

/* ---- Footer (Source overrides) ---- */
.gh-footer { background: transparent; color: var(--gg-muted); }
.gh-footer a { color: var(--gg-body); }
.gh-footer a:hover { color: var(--gg-accent-text); opacity: 1; }
.gh-footer-signup { padding: clamp(24px, 3vw, 40px); }
.gg-home-link { font-family: var(--font-mono); font-size: 1.3rem; color: var(--gg-accent-text) !important; }
.gg-home-link::before {
    content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px;
    border-radius: 50%; background: var(--gg-accent); vertical-align: middle;
}

/* ---- Accessibility ---- */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 3px solid #fff; outline-offset: 3px; border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .gh-navigation-inner, .gh-card, .gh-cta-inner, .gh-about, .gh-footer-signup, .gh-article { background: #141920; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .gh-navigation-inner, .gh-card, .gh-cta-inner, .gh-about, .gh-footer-signup, .gh-article {
        background: #0b0e12; -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .gg-blob { opacity: .15; }
}
@media (forced-colors: active) {
    .gg-backdrop { display: none; }
    .gh-card, .gh-article, .gh-navigation-inner { border: 1px solid CanvasText; }
}
@media (max-width: 767px) {
    .gg-blob { filter: blur(50px); }
    .gh-navigation-inner { border-radius: 16px; }
    /* Source pins #gh-navigation to 64px with a 64px brand row; our top padding plus the glass box
       pushed the title out of the bottom of the box. Let the bar size to its content. */
    #gh-navigation { height: auto; padding-top: 12px; }
    #gh-navigation .gh-navigation-inner { padding: 0 8px 0 18px; }
    #gh-navigation:not(.is-open) .gh-navigation-inner { gap: 0; }
    #gh-navigation .gh-navigation-brand { height: 56px; }
    #gh-navigation .gh-navigation-logo { font-size: 1.9rem; }
    /* Open burger menu: Source turns the nav into a full-screen overlay and relies on an opaque
       page colour behind it. */
    .is-open#gh-navigation { height: 100%; padding: 12px; background: var(--background-color); }
    .is-open#gh-navigation .gh-navigation-inner { min-height: 100%; padding-bottom: 32px; }
    .is-open#gh-navigation .gh-navigation-actions { flex-direction: column; gap: 20px; }
    .gh-header.is-classic { padding-block: 24px 8px; }
    .gg-nav-avatar { width: 32px; height: 32px; }
}

/* Post feature image (the generated thumbnail card) matches the text column, not Source's wider
   "wide" grid track, so it lines up with the title and body on every screen size. */
.post-template .gh-article-image { grid-column: main; }
.post-template .gh-article-image img { border-radius: 14px; }

/* Search popup (see assets/js/search-spotlight.js): dim and blur the page behind it, Spotlight-style. */
#sodo-search-root > div:has(iframe) {
    background: rgba(5, 7, 10, .45);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}
/* The page is color-scheme: dark and Sodo's iframe document is light. Browsers paint an opaque
   (white) canvas behind an iframe whose scheme differs from its embedder's, which is the white sheet
   that covered the page. Matching the iframe element to the document keeps it transparent. */
#sodo-search-root iframe { color-scheme: light; }