/* =========================================================================
   PROTOTYP Ghost theme — screen.css
   Ported from prototyp-website-2023 (Next.js / Emotion) blog UI.
   Blog runs on the LIGHT background with dark (night) text.
   Breakpoints: sml 480 · med 768 · lrg 992 · xlrg 1200 · huge 1400
   ========================================================================= */

/* ---- Fonts ------------------------------------------------------------- */
@font-face { font-family: 'Artex-Normal-Light';   font-weight: 300; font-display: swap; src: url('../fonts/Artex-Normal-Light.ttf') format('truetype'); }
@font-face { font-family: 'Artex-Normal-Regular'; font-weight: 400; font-display: swap; src: url('../fonts/Artex-Normal-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Artex-Normal-Medium';  font-weight: 500; font-display: swap; src: url('../fonts/Artex-Normal-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Artex-Normal-Bold';    font-weight: 700; font-display: swap; src: url('../fonts/Artex-Normal-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Artex-Normal-Black';   font-weight: 900; font-display: swap; src: url('../fonts/Artex-Normal-Black.ttf') format('truetype'); }

/* ---- Tokens ------------------------------------------------------------ */
:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-primary: #4343e1;
    --color-light: #e8e8ef;
    --color-dawn: #b2b2bb;
    --color-cardboard: #c7bdb6;
    --color-dusk: #575763;
    --color-night: #272729;
    --color-copacabana: #efcf69;
    --color-backgroundLight: #e8e8ef;

    --font-light: 'Artex-Normal-Light', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-primary: 'Artex-Normal-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-medium: 'Artex-Normal-Medium', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-bold: 'Artex-Normal-Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-black: 'Artex-Normal-Black', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Ghost custom-font hooks (required by gscan) */
    --gh-font-heading: var(--font-primary);
    --gh-font-body: var(--font-primary);

    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-reveal: cubic-bezier(0.65, 0.01, 0.02, 0.98);
}

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { -webkit-text-size-adjust: 100%; background: var(--color-backgroundLight); }
body {
    margin: 0;
    background: var(--color-backgroundLight);
    color: var(--color-night);
    font-family: var(--font-primary);
    font-feature-settings: 'ss01' on, 'zero';
    min-height: 100vh;
    overflow-x: hidden;
}
img, svg { max-width: 100%; vertical-align: middle; }
a { color: inherit; text-decoration: none; cursor: pointer; }
a:focus, button:focus { outline: none; }
h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; padding: 0; font-weight: 400; }
ul, ol { list-style: none; }
button { font-family: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); }

/* ---- Layout scaffold --------------------------------------------------- */
.site { position: relative; }
.site-main { padding: 0 20px 100px; }
@media screen and (min-width: 480px) { .site-main { padding: 0 0 200px; } }


/* =========================================================================
   Header
   ========================================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 24px 20px 0;
    color: var(--color-night);
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    margin-bottom: 120px;
}
@media screen and (min-width: 480px) {
    .site-header { display: grid; grid-template-columns: repeat(48, 1fr); padding: 24px 0 0; margin-bottom: 220px; }
}
body.header-hidden .site-header { transform: translateY(-120%); }

.site-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
@media screen and (min-width: 480px) {
    .site-header-inner { grid-column: 2 / span 46; gap: 20px; }
}

/* logo: first letter always visible, the rest reveal on hover (desktop) */
.site-logo { display: flex; align-items: center; gap: 4px; padding: 16px; margin-left: -16px; z-index: 3; color: var(--color-night); }
.site-logo svg { display: block; height: 18px; width: auto; flex-shrink: 0; fill: currentColor; }
.site-logo > span:first-of-type { width: 16px; }
.site-logo .lo { position: relative; overflow: hidden; }
.site-logo .lo svg { opacity: 0; transform: translateY(140%); transition: opacity 0.6s var(--ease-reveal), transform 0.6s var(--ease-reveal); }
.site-logo .lo:nth-of-type(2) svg { transition-delay: 0.14s; }
.site-logo .lo:nth-of-type(3) svg { transition-delay: 0.12s; }
.site-logo .lo:nth-of-type(4) svg { transition-delay: 0.10s; }
.site-logo .lo:nth-of-type(5) svg { transition-delay: 0.08s; }
.site-logo .lo:nth-of-type(6) svg { transition-delay: 0.06s; }
.site-logo .lo:nth-of-type(7) svg { transition-delay: 0.04s; }
.site-logo .lo:nth-of-type(8) svg { transition-delay: 0.02s; }
@media screen and (max-width: 767px) { .site-logo .lo { display: none; } }
.site-logo:hover .lo svg, .site-logo:focus-visible .lo svg {
    opacity: 1; transform: translateY(0);
    transition: opacity 0.3s var(--ease-reveal), transform 0.6s var(--ease-reveal);
}
.site-logo:hover .lo:nth-of-type(2) svg, .site-logo:focus-visible .lo:nth-of-type(2) svg { transition-delay: 0.02s; }
.site-logo:hover .lo:nth-of-type(3) svg, .site-logo:focus-visible .lo:nth-of-type(3) svg { transition-delay: 0.04s; }
.site-logo:hover .lo:nth-of-type(4) svg, .site-logo:focus-visible .lo:nth-of-type(4) svg { transition-delay: 0.06s; }
.site-logo:hover .lo:nth-of-type(5) svg, .site-logo:focus-visible .lo:nth-of-type(5) svg { transition-delay: 0.08s; }
.site-logo:hover .lo:nth-of-type(6) svg, .site-logo:focus-visible .lo:nth-of-type(6) svg { transition-delay: 0.10s; }
.site-logo:hover .lo:nth-of-type(7) svg, .site-logo:focus-visible .lo:nth-of-type(7) svg { transition-delay: 0.12s; }
.site-logo:hover .lo:nth-of-type(8) svg, .site-logo:focus-visible .lo:nth-of-type(8) svg { transition-delay: 0.14s; }
.site-logo:focus-visible { color: var(--color-dusk); }

.site-nav { display: flex; align-items: center; gap: 4px; }

/* search pill — ui/header/HeaderSearch.tsx trigger */
.site-search {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    height: fit-content; padding: 12px 16px; border: none; cursor: pointer;
    background: rgba(87, 87, 99, 0.1); border-radius: 9999px; color: var(--color-night);
    font-size: 16px; line-height: 18.4px;
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-search svg { width: 12px; height: 12px; }
.site-search kbd { display: none; padding: 4px; color: var(--color-dusk); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 16px; line-height: 18.4px; pointer-events: none; }
@media screen and (min-width: 640px) {
    .site-search { padding: 8px 12px; margin-right: 20px; }
    .site-search kbd { display: inline-flex; }
}

/* =========================================================================
   Button (Next.js buttonStyle.secondary): fill slides in from the left while
   the label swaps — the first span slides out, its twin slides in from the right.
   Markup: <a class="btn"><span>Label</span><span aria-hidden="true">Label</span></a>
   ========================================================================= */
.btn {
    --btn-px: 48px;
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    width: max-content; padding: 16px var(--btn-px);
    border: 1px solid var(--color-night); border-radius: 100px;
    background: transparent; color: var(--color-night); cursor: pointer;
    font-size: 16px; line-height: 20px; letter-spacing: -0.01em;
    transition: all 0.2s ease-out;
}
.btn::before {
    content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 0;
    background: var(--color-night); transition: width 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.btn:hover, .btn:focus-visible { color: var(--color-light); }
.btn:hover::before, .btn:focus-visible::before { width: 100%; }
.btn > span { z-index: 1; transform: translateX(0); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
.btn > span:first-of-type { position: relative; }
.btn > span:last-of-type { position: absolute; left: 100%; width: max-content; }
.btn:hover > span { transform: translateX(calc(-100% - var(--btn-px))); }
/* light variant (buttonStyle.primary) for dark surfaces */
.btn-light { border-color: var(--color-light); color: var(--color-light); }
.btn-light::before { background: var(--color-light); }
.btn-light:hover, .btn-light:focus-visible { color: var(--color-night); }

/* header CTA */
.site-nav-cta { --btn-px: 20px; padding-top: 12px; padding-bottom: 12px; font-size: 12px; line-height: 12px; letter-spacing: 0; text-transform: uppercase; }
@media screen and (min-width: 480px) { .site-nav-cta { --btn-px: 36px; } }
@media screen and (max-width: 639px) { .site-nav-cta { display: none; } }

/* =========================================================================
   Blog index
   ========================================================================= */
.blog { margin: 0 auto; }
@media screen and (min-width: 480px) { .blog { display: grid; grid-template-columns: repeat(48, 1fr); } }

.blog-filter {
    display: flex; overflow-x: auto; gap: 8px;
    width: calc(100% + 40px); margin: 0 -20px 40px; padding: 1px 20px 20px;
    color: var(--color-night);
}
@media screen and (min-width: 480px) { .blog-filter { grid-column: 2 / span 46; width: 100%; margin: 0 0 40px; padding: 1px 0 20px; } }
.blog-filter-btn {
    flex-shrink: 0; padding: 8px 16px; border-radius: 999px; font-size: 16px; line-height: 20px; letter-spacing: -0.01em;
    color: var(--color-night); background: transparent; transition: box-shadow 0.3s ease-out;
}
.blog-filter-btn:hover, .blog-filter-btn.is-active { box-shadow: 0 0 0 1px var(--color-night) inset; }

/* post card */
.post-card {
    position: relative; display: flex; flex-direction: column;
    width: calc(100% + 40px); margin: 0 -20px; padding: 20px 20px 60px;
}
.post-card-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--color-dawn); }
.post-card * { overflow-wrap: break-word; }
@media screen and (min-width: 480px) {
    .post-card { display: grid; grid-template-columns: repeat(46, 1fr); grid-column: 2 / span 46; width: 100%; margin: 0; padding: 80px 0; }
}
.post-card-left { display: flex; flex-direction: column; grid-column: 1 / span 46; }
.post-card-right { display: flex; flex-direction: column; grid-column: 1 / span 46; }
@media screen and (min-width: 992px) { .post-card-left { grid-column: 1 / span 22; } .post-card-right { grid-column: 27 / span 20; } }
@media screen and (min-width: 1200px) { .post-card-left { grid-column: 1 / span 20; } .post-card-right { grid-column: 27 / span 16; } }

.post-card-title {
    margin-bottom: 20px;
    font-size: clamp(2rem, 1.6rem + 1.8vw, 3.75rem);
    line-height: clamp(2.25rem, 1.9rem + 1.54vw, 3.75rem);
    letter-spacing: -0.02em;
    transition: color 0.2s ease-out;
}
@media screen and (min-width: 480px) { .post-card-title { margin-bottom: 40px; letter-spacing: -0.03em; } }
.post-card-title:hover { color: var(--color-dusk); }

.post-card-meta {
    display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 4px; row-gap: 4px;
    order: -1; margin-top: auto; margin-bottom: 20px;
    font-size: 12px; line-height: 12px; text-transform: uppercase; color: var(--color-dawn);
}
@media screen and (min-width: 480px) { .post-card-meta { justify-content: flex-start; column-gap: 40px; margin-bottom: 40px; } }
@media screen and (min-width: 992px) { .post-card-meta { margin-bottom: 0; order: unset; } }
.post-card-author span { color: var(--color-dawn); }
.post-card-author a { color: var(--color-dusk); text-decoration: underline; transition: color 0.2s ease-out; }
.post-card-author a:hover { color: var(--color-night); }
.post-card-date { display: flex; flex-direction: column; font-size: 12px; line-height: 16px; letter-spacing: -0.01em; }
@media screen and (min-width: 480px) { .post-card-date { flex-direction: row; } }
.post-card-readtime { display: none; }
@media screen and (min-width: 480px) { .post-card-readtime { display: block; } }

.post-card-excerpt {
    margin-bottom: 24px; overflow: hidden;
    font-size: clamp(1.125rem, 1.04rem + 0.39vw, 1.5rem);
    line-height: clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem);
    letter-spacing: -0.01em;
}
@media screen and (min-width: 480px) { .post-card-excerpt { margin-bottom: 40px; } }
.post-card-link {
    display: none; width: max-content; align-items: center; gap: 4px;
    padding-bottom: 4px; border-bottom: 1px solid var(--color-night);
    font-size: 20px; line-height: 24px; letter-spacing: -0.01em;
    transition: color 0.2s ease-out, border-color 0.2s ease-out;
}
.post-card-link svg { width: 20px; height: 8px; }
.post-card-link path { transition: stroke 0.2s ease-out; }
.post-card-link:hover { color: var(--color-dusk); border-color: var(--color-dusk); }
@media screen and (min-width: 480px) { .post-card-link { display: flex; } }

/* author page — views/author/author.styles.ts */
.author-page { display: flex; flex-direction: column; width: calc(100% + 40px); margin: 0 -20px; padding: 0 20px 100px; }
@media screen and (min-width: 480px) { .author-page { display: grid; grid-template-columns: repeat(48, 1fr); grid-auto-rows: min-content; width: 100%; margin: 0; padding: 0 0 160px; } }
.author-name { margin-bottom: 60px; font-size: clamp(2.5rem, 2.21rem + 1.28vw, 3.75rem); line-height: clamp(2.75rem, 2.52rem + 1.03vw, 3.75rem); letter-spacing: -0.03em; }
@media screen and (min-width: 480px) { .author-name { grid-column: 2 / span 46; margin-bottom: 160px; } }
.author-name > span { display: block; }
.author-label { opacity: 0.3; }
.author-page .articles-list { margin: 0 -20px; width: calc(100% + 40px); }
@media screen and (min-width: 480px) { .author-page .articles-list { margin: 0; width: 100%; } }

/* load more (index + tag pages) */
.blog-loadmore { display: flex; justify-content: center; margin: 0 auto; }
@media screen and (min-width: 480px) { .blog-loadmore { grid-column: 2 / span 46; } }
.blog-loadmore .btn[aria-busy] { pointer-events: none; opacity: 0.5; }

/* =========================================================================
   Footer — company info · years · 316 (bottom row of the marketing footer)
   ========================================================================= */
.site-footer { display: grid; grid-template-columns: repeat(40, 1fr); padding: 0 20px 40px; color: var(--color-night); font-size: 12px; line-height: 16px; letter-spacing: -0.01em; }
@media screen and (min-width: 480px) { .site-footer { grid-template-columns: repeat(48, 1fr); row-gap: 80px; padding: 0 0 40px; } }
.footer-info { grid-column: 1 / span 25; margin-top: 60px; }
@media screen and (min-width: 480px) { .footer-info { grid-column: 2 / span 13; min-width: 160px; margin-top: 0; } }
@media screen and (min-width: 768px) { .footer-info { grid-column: 2 / span 11; } }
.footer-timeline { display: flex; flex-direction: column; grid-column: 28 / span 14; margin-left: auto; margin-top: 60px; }
@media screen and (min-width: 480px) { .footer-timeline { grid-column: 16 / span 23; margin-left: 0; margin-top: 0; } }
@media screen and (min-width: 768px) { .footer-timeline { grid-column: 13 / span 6; } }
.footer-number-mobile { align-self: flex-end; }
@media screen and (min-width: 480px) { .footer-number-mobile { display: none; } }
.footer-number { display: none; }
@media screen and (min-width: 480px) { .footer-number { display: block; grid-column: 43 / span 5; margin-left: auto; } }

/* =========================================================================
   Cookie banner
   ========================================================================= */
.cookie {
    position: fixed; z-index: 7; left: 20px; right: 20px; bottom: 20px;
    max-width: 420px; padding: 20px; border-radius: 12px;
    background: var(--color-night); color: var(--color-light);
    font-size: 14px; line-height: 1.4; box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.cookie[hidden] { display: none; }
.cookie p + p { margin-top: 8px; }
.cookie a { text-decoration: underline; }
.cookie-actions { display: flex; gap: 8px; margin-top: 16px; }
.cookie-btn { padding: 8px 20px; border-radius: 999px; border: 1px solid var(--color-light); background: transparent; color: var(--color-light); cursor: pointer; transition: background 0.2s, color 0.2s; }
.cookie-btn-accept { background: var(--color-light); color: var(--color-night); }
.cookie-btn:hover { background: var(--color-light); color: var(--color-night); }

/* =========================================================================
   Koenig card widths (required by Ghost) — placed on the .gh-content grid below
   ========================================================================= */
.gh-content { --gh-content-width: 720px; }

/* =========================================================================
   Single post + article body (.gh-content)
   Mirrors prototyp-website-2023 views/blog-single/blogSingle.styles.ts
   ========================================================================= */
.article { display: flex; flex-direction: column; padding: 0 20px; width: calc(100% + 40px); margin: 0 -20px; }
@media screen and (min-width: 480px) {
    .article { display: grid; grid-template-columns: repeat(48, 1fr); grid-auto-rows: min-content; padding: 0; margin: 0 auto; width: 100%; max-width: 1920px; }
}
.article-title, .article-excerpt {
    font-size: clamp(2rem, 1.6rem + 1.8vw, 3.75rem);
    line-height: clamp(2.25rem, 1.9rem + 1.54vw, 3.75rem);
    letter-spacing: -0.02em;
}
@media screen and (min-width: 480px) { .article-title, .article-excerpt { grid-column: 7 / 43; letter-spacing: -0.03em; } }
@media screen and (min-width: 1200px) { .article-title, .article-excerpt { grid-column: 8 / 42; } }
/* dimmed via colour, not opacity — the reveal animation owns opacity */
.article-excerpt { margin-bottom: 60px; color: rgba(39, 39, 41, 0.3); }
@media screen and (min-width: 480px) { .article-excerpt { margin-bottom: 80px; } }

.article-line { position: relative; height: 1px; margin-bottom: 32px; background: var(--color-dawn); }
@media screen and (min-width: 480px) { .article-line { grid-column: 7 / 43; } }
@media screen and (min-width: 1200px) { .article-line { grid-column: 8 / 42; } }

.article-meta {
    display: flex; justify-content: space-between; gap: 12px; width: 100%;
    font-size: 12px; line-height: 12px; text-transform: uppercase;
}
@media screen and (min-width: 480px) { .article-meta { display: grid; grid-template-columns: repeat(48, 1fr); grid-column: 1 / span 48; gap: unset; } }
.article-tag { grid-column: 1 / span 13; color: var(--color-dusk); order: 1; }
@media screen and (min-width: 480px) { .article-tag { grid-column: 8 / span 4; } }
.article-date { grid-column: 15 / span 15; display: flex; flex-direction: column; margin-top: auto; color: var(--color-dawn); order: 3; }
@media screen and (min-width: 480px) { .article-date { grid-column: 15 / span 16; flex-direction: row; } }
@media screen and (min-width: 768px) { .article-date { grid-column: 13 / span 11; } }
@media screen and (min-width: 1200px) { .article-date { grid-column: 13 / span 18; } }
.article-readtime { display: none; color: var(--color-dawn); order: 3; }
@media screen and (min-width: 768px) { .article-readtime { display: block; grid-column: 28 / span 7; } }
@media screen and (min-width: 1200px) { .article-readtime { grid-column: 31 / span 4; } }
.article-author { grid-column: 30 / span 11; order: 2; }
@media screen and (min-width: 480px) { .article-author { grid-column: 31 / span 11; margin-left: auto; order: 4; } }
@media screen and (min-width: 768px) { .article-author { grid-column: 35 / span 7; } }
.article-author span { color: var(--color-dawn); }
.article-author a { color: var(--color-dusk); text-decoration: underline; transition: color 0.2s ease-out; }
.article-author a:hover { color: var(--color-night); }

.gh-content { overflow: hidden; margin-top: 80px; color: var(--color-dusk); }
@media screen and (min-width: 480px) {
    .gh-content { display: grid; grid-template-columns: repeat(48, 1fr); grid-auto-rows: min-content; grid-column: 1 / span 48; margin-top: 160px; }
    .gh-content > * { grid-column: 8 / 42; }
}
@media screen and (min-width: 1200px) { .gh-content > * { grid-column: 14 / span 24; } }
@media screen and (min-width: 1400px) { .gh-content > * { grid-column: 16 / span 18; } }
.gh-content * { overflow-wrap: break-word; }

.gh-content p, .gh-content li, .gh-content blockquote {
    font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem); line-height: 24px; letter-spacing: -0.01em;
}
.gh-content p { margin-bottom: 28px; }
.gh-content p code { font-family: var(--font-primary); font-size: 16px; line-height: 20px; letter-spacing: -0.01em; color: var(--color-light); background: var(--color-night); }
.gh-content code { border-radius: 4px; padding: 1px 6px 3px; }

.gh-content h1, .gh-content h2 {
    margin: 32px 0 8px; color: var(--color-night);
    font-size: clamp(1.5rem, 1.39rem + 0.51vw, 2rem); line-height: clamp(1.75rem, 1.63rem + 0.51vw, 2.25rem); letter-spacing: -0.02em;
}
.gh-content h3, .gh-content h4, .gh-content h5, .gh-content h6 {
    margin: 32px 0 8px; color: var(--color-night);
    font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem); line-height: clamp(1.5rem, 1.45rem + 0.25vw, 1.75rem);
}
.gh-content figure + :is(h1, h2, h3, h4, h5, h6),
.gh-content pre + :is(h1, h2, h3, h4, h5, h6) { margin-top: 0; }

.gh-content a { color: var(--color-primary); text-decoration: underline; transition: opacity 0.2s ease-out; }
.gh-content a:hover { opacity: 0.8; }
.gh-content strong { font-family: var(--font-bold); color: var(--color-night); }

.gh-content ul, .gh-content ol { margin-bottom: 28px; }
.gh-content li { position: relative; padding: 8px 0 8px 24px; border-top: 1px solid #33272729; }
.gh-content ul li::before { content: '—'; position: absolute; left: 0; top: 6px; color: #33272729; }
.gh-content ol { counter-reset: item; list-style: none; }
.gh-content ol li::before {
    content: counter(item, decimal-leading-zero) ' '; counter-increment: item;
    position: absolute; left: 0; top: 10px; color: var(--color-dawn);
    font-size: 16px; line-height: 20px; letter-spacing: -0.01em;
}

.gh-content blockquote { margin: 0 0 28px; padding-left: 20px; border-left: 1px solid var(--color-night); }
.gh-content blockquote p { margin-bottom: 0; }

.gh-content hr { width: 100%; height: 0; margin: 0; border: 0; border-top: 1px solid #e5e5e5; }

/* code — token colours live in prism.css */
.gh-content pre {
    background: var(--color-night); border-radius: 12px; padding: 24px; margin: 0 0 40px; overflow: auto; border: 0;
    font-size: 13px; line-height: 1.5; font-family: Menlo, Monaco, Consolas, monospace;
}
.gh-content pre:not([class*='language-']) { color: #d4d4d4; }
@media screen and (min-width: 480px) { .gh-content pre { grid-column: 7 / 43; margin-bottom: 60px; } }
@media screen and (min-width: 1200px) { .gh-content pre { grid-column: 13 / span 26; } }
@media screen and (min-width: 1400px) { .gh-content pre { grid-column: 15 / span 20; } }
.gh-content pre > code { padding: 0; border-radius: 0; background: transparent; color: inherit; font-size: 13px; }

/* figures + Koenig cards */
.gh-content figure { display: flex; flex-direction: column; margin: 0 0 40px; padding: 0; }
@media screen and (min-width: 480px) { .gh-content figure { margin-bottom: 60px; } }
.gh-content figure img { border-radius: 8px; margin: 0 auto; }
.gh-content figcaption { margin: 12px 0 0; font-size: 12px; line-height: 16px; letter-spacing: -0.01em; }
.gh-content figure iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.gh-content figure pre { margin-bottom: 0; }

.gh-content .kg-code-card { margin: 0 auto 40px; width: 100%; }
@media screen and (min-width: 480px) { .gh-content .kg-code-card { grid-column: 7 / 43; margin-bottom: 60px; } }
@media screen and (min-width: 1200px) { .gh-content .kg-code-card { grid-column: 13 / span 26; } }
@media screen and (min-width: 1400px) { .gh-content .kg-code-card { grid-column: 15 / span 20; } }

.gh-content .kg-image-card { margin: 12px auto 40px; width: 100%; }
.gh-content .kg-image-card img { width: 100%; height: auto; }
@media screen and (min-width: 480px) { .gh-content .kg-image-card { grid-column: 7 / 43; margin-top: 24px; margin-bottom: 60px; } }
@media screen and (min-width: 1200px) { .gh-content .kg-image-card { grid-column: 13 / span 26; } }
@media screen and (min-width: 1400px) { .gh-content .kg-image-card { grid-column: 15 / span 20; } }

.gh-content .kg-width-full { width: 100%; }
@media screen and (min-width: 480px) { .gh-content .kg-width-full { grid-column: 2 / span 46; } }
@media screen and (min-width: 1200px) { .gh-content .kg-width-full { grid-column: 8 / span 34; } }
.gh-content .kg-width-wide { width: 100%; }
@media screen and (min-width: 480px) { .gh-content .kg-width-wide { grid-column: 2 / span 46; } }

.gh-content .kg-gallery-card { width: 100%; }
@media screen and (min-width: 480px) { .gh-content .kg-gallery-card { grid-column: 2 / 48; } }
@media screen and (min-width: 1200px) { .gh-content .kg-gallery-card { grid-column: 8 / span 34; } }
.gh-content .kg-gallery-container { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: unset; }
.gh-content .kg-gallery-row { display: flex; flex-direction: column; justify-content: center; gap: 12px; max-width: unset; }
.gh-content .kg-gallery-row img { height: 100%; }
@media screen and (min-width: 480px) {
    .gh-content .kg-gallery-container { gap: 20px; }
    .gh-content .kg-gallery-row { flex-direction: row; gap: 20px; }
}
.gh-content .kg-gallery-image img { width: 100%; height: auto; }
/* Ghost's card CSS spaces gallery items with margins; the Next.js blog uses only the flex gap */
.gh-content .kg-gallery-row:not(:first-of-type), .gh-content .kg-gallery-image:not(:first-of-type) { margin: 0; }

.gh-content .kg-bookmark-card { max-width: 640px; margin: 0 auto 40px; }
@media screen and (min-width: 480px) { .gh-content .kg-bookmark-card { margin-bottom: 60px; } }
.gh-content .kg-bookmark-container {
    display: flex; flex-direction: column; gap: 20px; padding: 12px;
    border: 1px solid var(--color-night); border-radius: 8px; background: var(--color-white);
    color: var(--color-night); text-decoration: none; cursor: pointer;
    font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem); line-height: 24px; letter-spacing: -0.01em;
}
@media screen and (min-width: 480px) { .gh-content .kg-bookmark-container { flex-direction: row; } }
.gh-content .kg-bookmark-content { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; width: 100%; min-width: 40%; }
.gh-content .kg-bookmark-title { font-size: 20px; line-height: 24px; letter-spacing: -0.01em; }
.gh-content .kg-bookmark-icon { width: 24px; height: 24px; margin-right: 6px; margin-left: 0; }
.gh-content .kg-bookmark-author::after { content: '•'; margin: 0 6px; }
.gh-content .kg-bookmark-thumbnail img { width: 100%; height: auto; min-height: 100%; }
.gh-content .kg-bookmark-metadata { display: flex; flex-wrap: wrap; font-size: 16px; line-height: 24px; }
.gh-content .kg-bookmark-metadata > * { min-width: max-content; }
.gh-content .twitter-tweet { margin: 0 auto; }

/* =========================================================================
   Related articles (single post) — relatedArticles* in blogSingle.styles.ts
   ========================================================================= */
.related { display: flex; flex-direction: column; padding: 0 20px 40px; width: calc(100% + 40px); margin: 0 -20px; }
@media screen and (min-width: 480px) { .related { display: grid; grid-template-columns: repeat(48, 1fr); grid-auto-rows: min-content; padding: 0; margin: 0 auto; width: 100%; } }
.related-line { position: relative; height: 1px; margin: 60px -20px; background: var(--color-dawn); }
@media screen and (min-width: 480px) { .related-line { grid-column: 1 / span 48; margin: 180px 0 100px; } }
.related-head { display: flex; flex-direction: column; gap: 20px; margin-bottom: -20px; }
@media screen and (min-width: 480px) { .related-head { grid-column: 2 / span 46; gap: 40px; margin-bottom: 60px; } }
@media screen and (min-width: 768px) { .related-head { flex-direction: row; justify-content: space-between; } }
@media screen and (min-width: 1200px) { .related-head { margin-bottom: 120px; } }
.related-title { font-size: clamp(2.5rem, 2.21rem + 1.28vw, 3.75rem); line-height: clamp(2.75rem, 2.52rem + 1.03vw, 3.75rem); letter-spacing: -0.03em; }
.related-title span { display: block; }
.related-title span:last-child { opacity: 0.3; }
.related-all { height: max-content; }
.related .articles-list { margin: 100px -20px 0; width: calc(100% + 40px); }
@media screen and (min-width: 480px) { .related .articles-list { grid-column: 1 / span 48; margin: 100px 0 0; width: 100%; } }

/* =========================================================================
   Articles list (related / author) — numbered rows
   ========================================================================= */

.articles-list { width: 100%; }
@media screen and (min-width: 480px) { .articles-list { grid-column: 1 / span 48; } }
.articles-list li { position: relative; }
.article-row-line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--color-dusk); }
.article-row { display: grid; grid-template-columns: repeat(48, 1fr); align-items: baseline; padding: 24px 20px; color: var(--color-dusk); transition: color 0.15s ease-out; }
@media screen and (min-width: 480px) { .article-row { padding: 24px 0 60px; } }
/* colour on the row's direct children so the animated inner spans inherit it (and its easing) */
.article-row > span { transition: color 0.15s ease-out; }
.article-row:hover > span { color: var(--color-dawn); }
.article-row .a-num { grid-column: 2 / span 2; padding-right: 12px; font-size: 12px; line-height: 16px; letter-spacing: -0.01em; }
@media screen and (max-width: 767px) { .article-row .a-num { display: none; } }
.article-row .a-name { grid-column: 1 / span 48; margin-bottom: 40px; font-size: clamp(1.5rem, 1.39rem + 0.51vw, 2rem); line-height: clamp(1.75rem, 1.63rem + 0.51vw, 2.25rem); letter-spacing: -0.02em; }
@media screen and (min-width: 480px) { .article-row .a-name { grid-column: 2 / span 46; } }
@media screen and (min-width: 768px) { .article-row .a-name { grid-column: 4 / span 28; margin-bottom: 0; } }
.article-row .a-type { grid-column: 1 / span 35; display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; line-height: 16px; letter-spacing: -0.01em; }
@media screen and (min-width: 480px) { .article-row .a-type { grid-column: 2 / span 35; font-size: clamp(1rem, 0.94rem + 0.26vw, 1.25rem); line-height: clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem); } }
@media screen and (min-width: 768px) { .article-row .a-type { grid-column: 35 / span 13; } }

/* Force brand fonts regardless of Ghost's injected --gh-font-* typography setting */
html body { font-family: var(--font-primary); }
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .article-title, html body .post-card-title, html body .author-name { font-family: var(--font-primary); }
html body .gh-content, html body .gh-content p, html body .gh-content li, html body .article-excerpt, html body .article-meta, html body .post-card-meta { font-family: var(--font-primary); }

/* content tables */
.gh-content table { grid-column: 1 / span 48; width: 100%; border-collapse: collapse; margin: 0 0 40px; font-size: 16px; }
@media screen and (min-width: 480px) { .gh-content table { grid-column: 7 / 43; } }
@media screen and (min-width: 1200px) { .gh-content table { grid-column: 13 / span 26; } }
.gh-content table { font-family: var(--font-primary); color: var(--color-night); }
.gh-content th, .gh-content td { padding: 12px 16px; border: 1px solid var(--color-dawn); text-align: left; vertical-align: top; }
.gh-content thead th { font-family: var(--font-medium); }

/* Ghost callout / toggle cards inherit brand font */
.gh-content .kg-callout-card, .gh-content .kg-toggle-card, .gh-content figcaption, .gh-content table td, .gh-content table th { font-family: var(--font-primary); }

/* =========================================================================
   Reveal animations — see assets/js/anim.js for the presets.
   html.anim is set by an inline <head> script before first paint; without JS,
   or with reduced motion, nothing here applies and everything stays visible.
   ========================================================================= */
.anim-clip { display: inline-flex; overflow-y: clip; overflow-clip-margin: 10px; }
.anim-clip > span { display: inline-block; white-space: pre-wrap; }
.anim-row { display: flex; }

html.anim [data-anim]:is([data-anim="words"], [data-anim="rows"], [data-anim="block"]):not([data-split]) { visibility: hidden; }
html.anim [data-anim] .anim-clip > span {
    transform: translateY(140%);
    transition: transform var(--anim-dur) var(--anim-ease) var(--anim-delay);
}
html.anim [data-anim].in .anim-clip > span { transform: none; }

/* fades and lines run as CSS animations, not transitions, so they never override an
   element's own hover transitions (colour, border, …) */
html.anim [data-anim="fade"], html.anim [data-anim="stagger"] > * { opacity: 0; }
html.anim [data-anim="fade"].in, html.anim [data-anim="stagger"].in > * {
    animation: anim-fade var(--anim-dur, 0.6s) var(--anim-ease, ease-out) var(--anim-delay, 0.1s) both;
}
html.anim [data-anim="line"] { transform: scaleX(0); transform-origin: left center; }
html.anim [data-anim="line"].in {
    animation: anim-line var(--anim-dur, 0.6s) var(--anim-ease, ease-out) var(--anim-delay, 0.1s) both;
}
@keyframes anim-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes anim-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media print {
    html.anim [data-anim], html.anim [data-anim] *, html.anim [data-anim="stagger"] > * { visibility: visible !important; opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* switching tags keeps the filter pills in place (no re-fade) */
html.anim-keep-filter .blog-filter > * { opacity: 1 !important; animation: none !important; }

/* =========================================================================
   Search dialog — mirrors the marketing site's cmdk/Radix dialog
   (ui/header/HeaderSearch.tsx, ui/components/ui/{command,dialog}.tsx)
   ========================================================================= */
.search-modal { position: fixed; inset: 0; z-index: 50; }
.search-modal[hidden] { display: none; }
.search-backdrop {
    position: absolute; inset: 0; background: rgba(39, 39, 41, 0.9);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    animation: search-fade-in 0.15s ease;
}
.search-panel {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 100%; min-width: 100%;
    border: 1px solid transparent; color: var(--color-light);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    animation: search-panel-in 0.2s ease;
}
@media screen and (max-width: 639px) { .search-panel { min-height: 100%; } }
@media screen and (min-width: 640px) { .search-panel { border-radius: 8px; } }
@media screen and (min-width: 1280px) { .search-panel { width: 1200px; min-width: 1200px; min-height: min(710px, 100dvh - 32px); } }
@media screen and (min-width: 640px) { .search-panel { display: flex; max-height: calc(100dvh - 32px); } .search-command { max-height: inherit; } }
.search-modal.is-closing .search-backdrop { animation: search-fade-out 0.2s ease forwards; }
.search-modal.is-closing .search-panel { animation: search-panel-out 0.2s ease forwards; }
@keyframes search-fade-in { from { opacity: 0; } }
@keyframes search-fade-out { to { opacity: 0; } }
@keyframes search-panel-in { from { opacity: 0; transform: translate(-50%, -48%) scale(0.95); } }
@keyframes search-panel-out { to { opacity: 0; transform: translate(-50%, -48%) scale(0.95); } }

.search-command {
    display: flex; flex-direction: column; width: 100%; height: 100%; min-height: inherit;
    overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, 0.05);
    font-family: var(--font-primary);
}
@media screen and (max-width: 639px) { .search-panel { display: flex; } }

.search-inputwrap { display: flex; align-items: center; padding: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.search-input {
    width: 100%; padding: 0; border: 0; border-radius: 6px; outline: 0; background: transparent;
    color: var(--color-white); font-family: var(--font-primary); font-size: 24px; line-height: 28px; letter-spacing: -0.01em;
}
.search-input::placeholder { color: var(--color-dawn); }

.search-results {
    padding: 40px 0 20px; overflow-x: hidden; overflow-y: auto;
    height: 100%; max-height: calc(100dvh - 60px - 40px - 24px);
}
@media screen and (min-width: 768px) { .search-results { flex: 0 1 600px; height: 600px; max-height: 600px; min-height: 0; } }
.search-group[hidden], .search-message[hidden], .search-loading[hidden], .search-loadmore[hidden] { display: none; }
.search-group-title { padding: 6px 40px 20px; color: var(--color-dawn); font-size: 12px; line-height: 12px; text-transform: uppercase; }

.search-item {
    position: relative; display: flex; align-items: center; padding: 20px 40px; border-radius: 4px;
    color: var(--color-white); cursor: pointer; user-select: none;
    font-size: 20px; line-height: 24px; letter-spacing: -0.01em;
}
.search-item.is-active { background: rgba(255, 255, 255, 0.05); }

.search-message { padding: 0 40px; }
.search-message .search-group-title { padding: 0 0 20px; }
.search-message-text { padding: 20px 0; color: var(--color-white); font-size: 24px; line-height: 28px; letter-spacing: -0.01em; }

.search-loading { display: flex; align-items: center; justify-content: center; width: 100%; padding: 20px 40px; color: var(--color-white); }
.search-loading svg { width: 24px; height: 24px; animation: search-spin 1s linear infinite; }
@keyframes search-spin { to { transform: rotate(360deg); } }

.search-loadmore { display: flex; justify-content: center; margin: 0 auto; padding-top: 20px; }
.search-loadmore .btn[aria-busy] { opacity: 0.5; pointer-events: none; }

.search-close {
    position: absolute; top: 16px; right: 16px; display: flex; padding: 0;
    border: 0; border-radius: 4px; background: transparent; color: var(--color-light);
    opacity: 0.7; cursor: pointer; transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.search-close:hover { opacity: 1; }
.search-close svg { width: 16px; height: 16px; }