/*
 * Knowledge Hub — default skin.
 * A refined, neutral, content-first design. Every colour, size, space and motion
 * value resolves to a --khub-* token (Theming\Tokens), so a skin repaints the
 * whole product by swapping token values via the khub/token_values filter.
 * Ships structural + visual defaults; no brand colours are hard-coded.
 */

/* ---------- Accessibility utilities (global, not wrapper-scoped) ---------- */
/* Visually-hidden text — shipped by the plugin so labels (e.g. the search field
   label) stay hidden regardless of the host theme. */
.screen-reader-text {
    border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
    height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
    position: absolute !important; white-space: nowrap; word-wrap: normal;
}
/* Skip link: hidden until focused, then pinned top-left above the sticky header. */
.khub-skip-link:focus {
    clip: auto; clip-path: none; height: auto; width: auto; margin: 0;
    position: fixed !important; top: 0.5rem; left: 0.5rem; z-index: 100000;
    padding: 0.6rem 1rem; background: var(--khub-color-surface, #fff);
    color: var(--khub-color-accent, #3b5bdb); border-radius: var(--khub-radius, 10px);
    box-shadow: var(--khub-shadow-md, 0 6px 20px -6px rgba(16,24,40,0.14));
    outline: 2px solid var(--khub-color-accent, #3b5bdb); outline-offset: 2px;
    font-weight: 600; text-decoration: none;
}

/* ---------- Base ---------- */
.khub-wrapper,
.khub-home {
    max-width: var(--khub-container);
    margin-inline: auto;
    padding: var(--khub-space-xl) var(--khub-space-md);
    color: var(--khub-color-text);
    font-family: var(--khub-font-base);
    font-size: var(--khub-font-size-base);
    line-height: var(--khub-line-height);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.khub-wrapper :where(h1, h2, h3, h4) {
    color: var(--khub-color-primary);
    font-family: var(--khub-font-headings);
    font-weight: var(--khub-font-weight-semibold);
    letter-spacing: var(--khub-tracking-tight);
    line-height: var(--khub-leading-tight);
    text-wrap: balance;
}
.khub-wrapper a { color: var(--khub-color-accent); text-decoration: none; }
.khub-wrapper a:hover { color: var(--khub-color-accent-hover); }
.khub-wrapper :focus-visible {
    outline: 2px solid var(--khub-color-accent);
    outline-offset: 2px;
    border-radius: var(--khub-radius-sm);
}


/* Topic chips — a centred row of topic links that threads topics through the
   overview pages (and matches the hero quick-link chips). */
.khub-topic-chips {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--khub-space-2xs);
    margin: 0 auto var(--khub-space-xl);
    max-width: var(--khub-container);
}
.khub-topic-chip {
    display: inline-flex; align-items: center;
    padding: 0.4rem 0.95rem;
    border: 1px solid var(--khub-color-border);
    border-radius: var(--khub-radius-pill);
    background: var(--khub-color-surface);
    color: var(--khub-color-text-muted);
    font-size: var(--khub-font-size-sm); font-weight: var(--khub-font-weight-medium);
    text-decoration: none;
    transition: color var(--khub-transition), border-color var(--khub-transition), background var(--khub-transition), transform var(--khub-transition);
}
.khub-topic-chip:hover { color: var(--khub-color-accent); border-color: var(--khub-color-accent); transform: translateY(-1px); }
.khub-topic-chip.is-current { background: var(--khub-color-accent); border-color: var(--khub-color-accent); color: var(--khub-color-accent-contrast); }

/* Article overview: equal-height cards (all article cards, image-led). */
.khub-archive--article .khub-listing--feed { align-items: stretch; }

/* Topic pillar: content organised by type, home-style sections. */
.khub-topic-section { margin-top: var(--khub-space-2xl); }
.khub-topic-section--article .khub-listing--feed { align-items: stretch; }
.khub-topic-section--more .khub-topic-chips { margin-bottom: 0; }

/* FAQ buckets: give each topic group breathing room + gapped rows. */
.khub-listing--buckets .khub-section { margin-bottom: var(--khub-space-xl); }
.khub-listing--buckets .khub-section:last-child { margin-bottom: 0; }
.khub-listing--buckets .khub-section__heading { margin-bottom: var(--khub-space-md); }

/* Author bio (large content section above the posts grid). */
.khub-author-profile__eyebrow { margin: 0 0 var(--khub-space-3xs); text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--khub-font-size-sm); font-weight: var(--khub-font-weight-semibold); color: var(--khub-color-accent); }
.khub-author-bio { max-width: var(--khub-measure); margin: 0 0 var(--khub-space-2xl); font-size: var(--khub-font-size-lg); }
.khub-author-bio > :first-child { margin-top: 0; }

/* ---------- Listings ---------- */
.khub-listing--feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--khub-space-md);
    align-items: start; /* size cards to content; don't stretch text-only cards */
}
.khub-listing--az .khub-section { margin-bottom: var(--khub-space-xl); scroll-margin-top: var(--khub-space-xl); }
.khub-listing--az .khub-section__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--khub-space-sm);
    align-items: start;
}
.khub-section__heading {
    font-size: var(--khub-font-size-xl);
    margin: 0 0 var(--khub-space-sm);
    padding-bottom: var(--khub-space-2xs);
    border-bottom: 1px solid var(--khub-color-border);
}
.khub-listing--az .khub-section__heading {
    font-size: var(--khub-font-size-2xl);
    color: var(--khub-color-accent);
}
.khub-section__heading a { color: inherit; text-decoration: none; }
.khub-section__heading a:hover { color: var(--khub-color-accent); }

/* ---------- Cards ---------- */
.khub-entry {
    position: relative; /* anchor for the stretched cover-link */
    background: var(--khub-color-surface);
    border: 1px solid var(--khub-color-border);
    border-radius: var(--khub-radius-lg);
    overflow: hidden;
    box-shadow: var(--khub-shadow-sm);
    transition: transform var(--khub-transition), box-shadow var(--khub-transition), border-color var(--khub-transition);
}
.khub-entry:hover {
    transform: translateY(-3px);
    box-shadow: var(--khub-shadow-md);
    border-color: var(--khub-color-border-strong);
}
.khub-entry__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.khub-entry__link:hover { color: inherit; }
/* Article cards: the article is the flex column; the title is a stretched link. */
.khub-entry--article { display: flex; flex-direction: column; }
.khub-entry__cover-link { color: inherit; text-decoration: none; }
.khub-entry__cover-link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.khub-entry--article:hover .khub-entry__title { color: var(--khub-color-accent); }
.khub-entry__thumbnail {
    aspect-ratio: 16 / 10;
    background: var(--khub-color-surface-sunken);
    position: relative;
    overflow: hidden;
}
.khub-entry__thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--khub-transition); }
.khub-entry:hover .khub-entry__thumbnail img { transform: scale(1.04); }
.khub-entry__thumbnail.has-video::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 3.25rem; height: 3.25rem;
    border-radius: var(--khub-radius-pill);
    background: rgba(20, 24, 28, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
    backdrop-filter: blur(2px);
}
.khub-entry--glossary, .khub-entry--faq { padding: var(--khub-space-md); }
.khub-entry__content { padding: var(--khub-space-md); display: flex; flex-direction: column; gap: var(--khub-space-2xs); flex: 1; }
.khub-entry--glossary .khub-entry__content, .khub-entry--faq .khub-entry__content { padding: 0; }
.khub-entry__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: var(--khub-font-size-xs);
    font-weight: var(--khub-font-weight-semibold);
    color: var(--khub-color-accent);
}
.khub-entry__title { font-size: var(--khub-font-size-lg); font-weight: var(--khub-font-weight-semibold); margin: 0; line-height: var(--khub-leading-snug); }
.khub-entry__excerpt { color: var(--khub-color-text-muted); font-size: var(--khub-font-size-sm); margin: var(--khub-space-3xs) 0 0; }
.khub-entry__footer {
    margin-top: auto;
    padding-top: var(--khub-space-sm);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--khub-space-sm);
}
.khub-entry--faq .khub-entry__footer, .khub-entry--glossary .khub-entry__footer { padding-top: var(--khub-space-sm); }
.khub-entry__meta { color: var(--khub-color-text-subtle); font-size: var(--khub-font-size-sm); }
.khub-entry__arrow {
    flex: none; margin-left: auto;
    width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--khub-color-border);
    border-radius: var(--khub-radius-pill);
    color: var(--khub-color-primary);
    transition: background var(--khub-transition), color var(--khub-transition), border-color var(--khub-transition), transform var(--khub-transition);
}
.khub-entry__arrow::after {
    content: "";
    width: 0.7rem; height: 0.7rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.khub-entry:hover .khub-entry__arrow {
    background: var(--khub-color-accent);
    border-color: var(--khub-color-accent);
    color: var(--khub-color-accent-contrast);
    transform: translateX(2px);
}
/* Faq/glossary cards put the arrow alongside the title row */
.khub-entry--faq .khub-entry__link, .khub-entry--glossary .khub-entry__link {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    column-gap: var(--khub-space-sm); height: 100%;
}
.khub-entry--faq .khub-entry__eyebrow, .khub-entry--glossary .khub-entry__eyebrow { grid-column: 1 / -1; }
.khub-entry--faq .khub-entry__excerpt, .khub-entry--glossary .khub-entry__excerpt { grid-column: 1 / -1; }
.khub-entry--faq .khub-entry__arrow, .khub-entry--glossary .khub-entry__arrow { grid-row: 2; grid-column: 2; }

/* Compact variant (related sidebar) */
.khub-entry--compact .khub-entry__thumbnail { aspect-ratio: 16 / 9; }
.khub-entry--compact .khub-entry__content { padding: var(--khub-space-sm); gap: var(--khub-space-3xs); }
.khub-entry--compact .khub-entry__title { font-size: var(--khub-font-size-base); }
.khub-entry--compact.khub-entry--faq, .khub-entry--compact.khub-entry--glossary { padding: var(--khub-space-sm); }
.khub-entry--compact .khub-entry__footer { padding-top: var(--khub-space-2xs); }

/* ---------- Carousel (CSS scroll-snap) ---------- */
.khub-carousel__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(17rem, 22rem);
    gap: var(--khub-space-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: var(--khub-space-2xs) var(--khub-space-3xs) var(--khub-space-md);
    margin-inline: calc(var(--khub-space-3xs) * -1);
    scrollbar-width: thin;
    align-items: stretch; /* equal-height article cards */
}
.khub-carousel__slide { scroll-snap-align: start; }

/* ---------- FAQ accordion ---------- */
.khub-faq__list, .khub-faq-listing__list { display: flex; flex-direction: column; gap: var(--khub-space-2xs); max-width: var(--khub-container); }
.khub-collapse {
    background: var(--khub-color-surface);
    border: 1px solid var(--khub-color-border);
    border-radius: var(--khub-radius);
    transition: border-color var(--khub-transition), box-shadow var(--khub-transition);
}
.khub-collapse:hover { border-color: var(--khub-color-border-strong); }
.khub-collapse[data-khub-expanded="true"] { box-shadow: var(--khub-shadow-sm); }
.khub-collapse__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--khub-space-sm);
    text-align: left;
    background: none;
    border: 0;
    padding: var(--khub-space-md);
    font: inherit;
    color: var(--khub-color-primary);
    cursor: pointer;
}
.khub-collapse__btn .khub-faq__question { margin: 0; font-size: var(--khub-font-size-lg); font-weight: var(--khub-font-weight-medium); }
.khub-collapse__btn::after {
    content: "";
    flex: none;
    width: 0.6rem; height: 0.6rem;
    border-right: 2px solid var(--khub-color-text-subtle);
    border-bottom: 2px solid var(--khub-color-text-subtle);
    transform: rotate(45deg);
    transition: transform var(--khub-transition);
}
.khub-collapse[data-khub-expanded="true"] .khub-collapse__btn::after { transform: rotate(-135deg); }
.khub-collapse__pane { padding: 0 var(--khub-space-md) var(--khub-space-md); color: var(--khub-color-text-muted); }
.khub-collapse__pane > :first-child { margin-top: 0; }
/* JS-on: collapse panes. JS-off: panes stay visible. */
.khub-js .khub-collapse__pane { display: none; }
.khub-js .khub-collapse[data-khub-expanded="true"] .khub-collapse__pane { display: block; }

/* ---------- Breadcrumbs ---------- */
.khub-breadcrumbs__list {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--khub-space-2xs);
    list-style: none; padding: 0;
    margin: 0 0 var(--khub-space-md);
    font-size: var(--khub-font-size-sm);
    color: var(--khub-color-text-muted);
}
.khub-breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--khub-space-2xs); }
.khub-breadcrumbs__item:not(:last-child)::after { content: "/"; color: var(--khub-color-text-subtle); }
.khub-breadcrumbs__item [aria-current="page"] { color: var(--khub-color-text); }

/* ---------- Single ---------- */
.khub-single { max-width: var(--khub-container); }
.khub-single__header { margin-bottom: var(--khub-space-lg); }
.khub-single__eyebrow { text-transform: uppercase; letter-spacing: 0.07em; font-size: var(--khub-font-size-xs); font-weight: var(--khub-font-weight-semibold); color: var(--khub-color-accent); margin: 0; }
.khub-single__eyebrow a { color: inherit; }
.khub-single__title { font-size: var(--khub-font-size-4xl); letter-spacing: var(--khub-tracking-tighter); margin: var(--khub-space-2xs) 0; }
.khub-single--faq .khub-single__title, .khub-single--glossary .khub-single__title { font-size: var(--khub-font-size-3xl); }
.khub-single__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--khub-space-sm); color: var(--khub-color-text-muted); font-size: var(--khub-font-size-sm); margin-top: var(--khub-space-sm); }
.khub-single__meta > * { display: inline-flex; align-items: center; }
.khub-single__meta > * + *::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--khub-color-text-subtle); margin-right: var(--khub-space-sm); }
.khub-single__byline { gap: var(--khub-space-2xs); font-weight: var(--khub-font-weight-medium); color: var(--khub-color-text); }
.khub-single__byline-avatar img { width: 1.75rem; height: 1.75rem; border-radius: var(--khub-radius-pill); object-fit: cover; display: block; }
.khub-single__media { margin-top: var(--khub-space-lg); }
.khub-single__media img, .khub-single__media video { width: 100%; height: auto; border-radius: var(--khub-radius-lg); box-shadow: var(--khub-shadow-md); display: block; }

/* Single layout (desktop): TOC left rail · content · related.
   The TOC owns its own column with nothing beneath it, so it can stay pinned to
   the reader without ever overlapping the related cards.
   Mobile: TOC (collapsible) → content → related, single column. */
.khub-single__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--khub-space-lg); align-items: start; }
@media (min-width: 60rem) {
    /* Center the whole article (heading + body + TOC) as one block sized to
       body + gutter + rail, so it sits with equal space on the left and right
       and the heading still aligns with the content. */
    .khub-single--article .khub-single__article {
        max-width: calc(var(--khub-measure) + 13rem + var(--khub-space-xl));
        margin-inline: auto;
    }
    .khub-single__layout {
        grid-template-columns: minmax(0, var(--khub-measure)) 13rem;
        grid-template-areas: "main toc";
        column-gap: var(--khub-space-xl);
    }
    .khub-single__main { grid-area: main; max-width: var(--khub-measure); justify-self: start; width: 100%; }
    /* Sticky offset clears the sticky site header (theme can override the var). */
    .khub-toc { grid-area: toc; position: sticky; top: var(--khub-header-offset, 5rem); align-self: start; }
    /* No populated TOC (short articles) → content spans the full width, no rail. */
    .khub-single__layout:not(:has(.khub-toc:not([hidden]))) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "main";
    }
    .khub-single__layout:not(:has(.khub-toc:not([hidden]))) .khub-single__main {
        max-width: none; justify-self: stretch;
    }
}
.khub-single__main { min-width: 0; }
/* Media now lives in the content column, so it matches the content width. */
.khub-single__main .khub-single__media { margin-top: 0; margin-bottom: var(--khub-space-lg); }
.khub-single__short { font-size: var(--khub-font-size-xl); line-height: var(--khub-leading-snug); color: var(--khub-color-text-muted); max-width: var(--khub-measure); margin: 0 0 var(--khub-space-lg); }
.khub-single__content { max-width: var(--khub-measure); font-size: var(--khub-font-size-lg); }
.khub-single__content > * + * { margin-top: var(--khub-space-md); }
.khub-single__content :where(h2, h3) { margin-top: var(--khub-space-lg); }
.khub-single__content :where(ul, ol) { padding-left: 1.4em; }
.khub-single__content li + li { margin-top: var(--khub-space-2xs); }
.khub-single__content blockquote {
    margin: var(--khub-space-md) 0;
    padding: var(--khub-space-2xs) var(--khub-space-md);
    border-left: 3px solid var(--khub-color-accent);
    color: var(--khub-color-text-muted);
    font-style: italic;
}
.khub-single__content code {
    background: var(--khub-color-surface-muted);
    border: 1px solid var(--khub-color-border);
    border-radius: var(--khub-radius-sm);
    padding: 0.1em 0.35em;
    font-size: 0.9em;
}
.khub-single__content a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: var(--khub-color-border-strong); }
.khub-single__content a:hover { text-decoration-color: currentColor; }

/* ---------- Author box ---------- */
.khub-author {
    margin-top: var(--khub-space-xl);
    padding: var(--khub-space-md);
    max-width: var(--khub-measure);
    background: var(--khub-color-surface-muted);
    border: 1px solid var(--khub-color-border);
    border-radius: var(--khub-radius-lg);
}
.khub-author__box { display: flex; gap: var(--khub-space-md); align-items: flex-start; }
.khub-author__box + .khub-author__box { margin-top: var(--khub-space-md); padding-top: var(--khub-space-md); border-top: 1px solid var(--khub-color-border); }
.khub-author__thumbnail { flex: none; }
.khub-author__thumbnail img { width: 4.5rem; height: 4.5rem; border-radius: var(--khub-radius-pill); object-fit: cover; box-shadow: var(--khub-shadow-sm); }
.khub-author__name { font-weight: var(--khub-font-weight-semibold); font-size: var(--khub-font-size-lg); color: var(--khub-color-primary); margin: 0; }
.khub-author__name a { color: inherit; text-decoration: none; }
.khub-author__name a:hover { color: var(--khub-color-accent); }
.khub-author__thumbnail a { display: block; }
/* Byline chip → author page */
.khub-single__byline { color: var(--khub-color-text); text-decoration: none; }
.khub-single__byline:hover .khub-single__byline-name { color: var(--khub-color-accent); }
.khub-author__position { color: var(--khub-color-accent); font-size: var(--khub-font-size-sm); font-weight: var(--khub-font-weight-medium); margin: 0 0 var(--khub-space-2xs); }
.khub-author__bio { color: var(--khub-color-text-muted); font-size: var(--khub-font-size-sm); }
.khub-author__bio > :first-child { margin-top: 0; }
.khub-author__socials { display: flex; flex-wrap: wrap; gap: var(--khub-space-2xs); list-style: none; padding: 0; margin: var(--khub-space-sm) 0 0; }
.khub-author__social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem;
    border: 1px solid var(--khub-color-border);
    border-radius: var(--khub-radius-pill);
    color: var(--khub-color-text-muted);
    background: var(--khub-color-surface);
    transition: background var(--khub-transition), color var(--khub-transition), border-color var(--khub-transition), transform var(--khub-transition);
}
.khub-author__social-link:hover {
    background: var(--khub-color-accent); border-color: var(--khub-color-accent);
    color: var(--khub-color-accent-contrast); transform: translateY(-2px);
}
.khub-social__icon { width: 1.05rem; height: 1.05rem; }

/* ---------- Blocks (carousel/faq/etc. wrappers) ---------- */
.khub-block { margin-block: var(--khub-space-xl); }
.khub-block__header { max-width: var(--khub-measure); margin-bottom: var(--khub-space-md); }
.khub-block__title { font-size: var(--khub-font-size-2xl); letter-spacing: var(--khub-tracking-tight); margin: 0 0 var(--khub-space-2xs); }
.khub-block__text { color: var(--khub-color-text-muted); }
.khub-block__pretitle { color: var(--khub-color-accent); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--khub-font-size-xs); font-weight: var(--khub-font-weight-semibold); margin: 0 0 var(--khub-space-2xs); }

/* ---------- Hero + search ---------- */
.khub-hero { text-align: center; padding-block: var(--khub-space-2xl) var(--khub-space-xl); max-width: 46rem; margin-inline: auto; }
.khub-hero h1 { font-size: var(--khub-font-size-4xl); letter-spacing: var(--khub-tracking-tighter); margin: 0 0 var(--khub-space-sm); }
.khub-hero p { color: var(--khub-color-text-muted); font-size: var(--khub-font-size-lg); margin: 0 auto var(--khub-space-lg); max-width: 34rem; }
.khub-search { display: flex; gap: var(--khub-space-2xs); max-width: 34rem; margin-inline: auto; }
.khub-search__field {
    flex: 1;
    padding: 0.85rem var(--khub-space-md);
    border: 1px solid var(--khub-color-border-strong);
    border-radius: var(--khub-radius-pill);
    background: var(--khub-color-surface);
    font: inherit;
    color: var(--khub-color-text);
    box-shadow: var(--khub-shadow-sm);
    transition: border-color var(--khub-transition), box-shadow var(--khub-transition);
}
.khub-search__field::placeholder { color: var(--khub-color-text-subtle); }
.khub-search__field:focus { outline: none; border-color: var(--khub-color-accent); box-shadow: 0 0 0 4px var(--khub-color-ring); }
.khub-search__submit, .khub-wrapper .wp-block-button__link, .khub-btn, .khub-wrapper .khub-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.85rem var(--khub-space-lg);
    border: 1px solid transparent;
    border-radius: var(--khub-radius-pill);
    background: var(--khub-color-accent);
    color: var(--khub-color-accent-contrast);
    font: inherit; font-weight: var(--khub-font-weight-medium);
    line-height: 1; cursor: pointer; text-decoration: none;
    transition: background var(--khub-transition), transform var(--khub-transition), box-shadow var(--khub-transition);
}
.khub-search__submit:hover, .khub-wrapper .wp-block-button__link:hover, .khub-btn:hover, .khub-wrapper .khub-btn:hover {
    background: var(--khub-color-accent-hover);
    color: var(--khub-color-accent-contrast);
    transform: translateY(-1px);
    box-shadow: var(--khub-shadow-md);
}
/* Leading magnifier inside the field. */
.khub-search__field {
    padding-left: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238b94a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: var(--khub-space-md) center;
    background-size: 18px 18px;
}

/* ---------- Search suggestions (combobox listbox) ---------- */
.khub-search__panel {
    position: fixed; z-index: 1000;
    background: var(--khub-color-surface);
    border: 1px solid var(--khub-color-border);
    border-radius: var(--khub-radius-lg);
    box-shadow: var(--khub-shadow-lg);
    max-height: min(24rem, 60vh); overflow-y: auto;
    text-align: left;
}
.khub-search__list { list-style: none; margin: 0; padding: var(--khub-space-3xs); }
.khub-suggest {
    display: flex; align-items: flex-start; gap: var(--khub-space-sm);
    padding: var(--khub-space-xs) var(--khub-space-sm);
    border-radius: var(--khub-radius);
    cursor: pointer;
}
.khub-suggest.is-active { background: var(--khub-color-accent-soft); }
.khub-suggest__type {
    flex: none; margin-top: 0.12em;
    min-width: 4.75rem; text-align: center;
    padding: 0.18rem 0.55rem;
    border-radius: var(--khub-radius-pill);
    background: var(--khub-color-surface-muted);
    color: var(--khub-color-accent);
    font-size: var(--khub-font-size-xs); font-weight: var(--khub-font-weight-semibold);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.khub-suggest.is-active .khub-suggest__type { background: var(--khub-color-surface); }
.khub-suggest__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.khub-suggest__title { font-weight: var(--khub-font-weight-medium); color: var(--khub-color-primary); line-height: var(--khub-leading-snug); }
.khub-suggest__excerpt { font-size: var(--khub-font-size-sm); color: var(--khub-color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.khub-suggest-empty { padding: var(--khub-space-sm) var(--khub-space-md); color: var(--khub-color-text-muted); font-size: var(--khub-font-size-sm); }
/* Outline button variant (core "outline" style) */
.khub-wrapper .is-style-outline .wp-block-button__link,
.khub-wrapper .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent; color: var(--khub-color-primary); border-color: var(--khub-color-border-strong);
}
.khub-wrapper .is-style-outline .wp-block-button__link:hover { background: var(--khub-color-surface-muted); color: var(--khub-color-primary); border-color: var(--khub-color-text-subtle); }

/* ---------- Background role utilities (de-branded content values) ---------- */
.bg-surface { background: var(--khub-color-surface); }
.bg-surface-muted { background: var(--khub-color-surface-muted); }
.bg-transparent { background: transparent; }
.bg-accent { background: var(--khub-color-accent); color: var(--khub-color-accent-contrast); }
.khub-block.bg-surface-muted, .khub-block.bg-accent { padding: var(--khub-space-xl) var(--khub-space-lg); border-radius: var(--khub-radius-lg); }
.khub-block.bg-accent :where(h1, h2, h3, .khub-block__text, .khub-block__pretitle) { color: var(--khub-color-accent-contrast); }

/* ---------- Pagination + empty ---------- */
.khub-pagination { margin-top: var(--khub-space-xl); }
.khub-pagination ul { display: flex; flex-wrap: wrap; gap: var(--khub-space-3xs); list-style: none; padding: 0; justify-content: center; }
.khub-pagination a, .khub-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.5rem; height: 2.5rem; padding: 0 var(--khub-space-2xs);
    border: 1px solid var(--khub-color-border);
    border-radius: var(--khub-radius);
    color: var(--khub-color-text); font-size: var(--khub-font-size-sm);
    transition: border-color var(--khub-transition), background var(--khub-transition);
}
.khub-pagination a:hover { border-color: var(--khub-color-border-strong); background: var(--khub-color-surface-muted); }
.khub-pagination .current { background: var(--khub-color-accent); border-color: var(--khub-color-accent); color: var(--khub-color-accent-contrast); }
.khub-empty {
    color: var(--khub-color-text-muted);
    text-align: center;
    padding: var(--khub-space-2xl) var(--khub-space-md);
    border: 1px dashed var(--khub-color-border-strong);
    border-radius: var(--khub-radius-lg);
    background: var(--khub-color-surface-muted);
}

/* ---------- Search results ---------- */
.khub-listing--search { align-items: stretch; }
.khub-search-empty {
    text-align: center;
    max-width: 40rem; margin-inline: auto;
    padding: var(--khub-space-2xl) var(--khub-space-md);
}
.khub-search-empty__lead { font-size: var(--khub-font-size-xl); font-weight: var(--khub-font-weight-semibold); color: var(--khub-color-primary); margin: 0 0 var(--khub-space-2xs); }
.khub-search-empty__hint { color: var(--khub-color-text-muted); margin: 0 0 var(--khub-space-lg); }
/* Scoped-search fallback: "No X match …, here are wider matches" above the feed. */
.khub-search-fallback-note { max-width: var(--khub-container); margin: 0 auto var(--khub-space-lg); }
.khub-search-fallback-note .khub-search-empty__hint { margin-bottom: 0; }
.khub-search-empty__links { display: flex; flex-wrap: wrap; gap: var(--khub-space-sm); justify-content: center; }
/* Soft button variant — used for the browse-by-type links. */
.khub-btn--soft {
    background: var(--khub-color-surface);
    color: var(--khub-color-primary);
    border-color: var(--khub-color-border-strong);
}
.khub-btn--soft:hover {
    background: var(--khub-color-surface-muted);
    color: var(--khub-color-primary);
    border-color: var(--khub-color-text-subtle);
}

/* ---------- YouTube facade ---------- */
.khub-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--khub-radius-lg);
    overflow: hidden;
    background: var(--khub-color-surface-sunken);
    box-shadow: var(--khub-shadow-md);
}
.khub-single__media .khub-video { margin-top: 0; }
.khub-video__play {
    position: absolute; inset: 0;
    display: block; width: 100%; height: 100%;
    padding: 0; border: 0; cursor: pointer; background: none;
}
.khub-video__poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms var(--khub-transition); }
.khub-video__play:hover .khub-video__poster { transform: scale(1.03); }
.khub-video__btn {
    position: absolute; inset: 0; margin: auto;
    width: 4.5rem; height: 3.15rem;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35));
    transition: transform var(--khub-transition);
}
.khub-video__play:hover .khub-video__btn { transform: scale(1.08); }
.khub-video__btn-bg { fill: #212121; opacity: 0.86; transition: fill var(--khub-transition), opacity var(--khub-transition); }
.khub-video__play:hover .khub-video__btn-bg { fill: #ff0000; opacity: 1; }
.khub-video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Transcript ---------- */
.khub-transcript {
    margin-top: var(--khub-space-lg);
    border: 1px solid var(--khub-color-border);
    border-radius: var(--khub-radius);
    background: var(--khub-color-surface-muted);
    max-width: var(--khub-measure);
}
.khub-transcript__summary {
    list-style: none; cursor: pointer;
    padding: var(--khub-space-sm) var(--khub-space-md);
    font-weight: var(--khub-font-weight-medium);
    color: var(--khub-color-primary);
    display: flex; align-items: center; gap: var(--khub-space-2xs);
}
.khub-transcript__summary::-webkit-details-marker { display: none; }
.khub-transcript__summary::before {
    content: ""; flex: none;
    width: 0.55rem; height: 0.55rem;
    border-right: 2px solid var(--khub-color-text-subtle);
    border-bottom: 2px solid var(--khub-color-text-subtle);
    transform: rotate(-45deg);
    transition: transform var(--khub-transition);
}
.khub-transcript[open] .khub-transcript__summary::before { transform: rotate(45deg); }
.khub-transcript__body { padding: 0 var(--khub-space-md) var(--khub-space-md); color: var(--khub-color-text-muted); font-size: var(--khub-font-size-sm); }
.khub-transcript__body > :first-child { margin-top: 0; }

/* ---------- Sources ---------- */
.khub-sources { margin-top: var(--khub-space-xl); max-width: var(--khub-measure); }
.khub-sources__title { font-size: var(--khub-font-size-lg); margin: 0 0 var(--khub-space-sm); }
.khub-sources__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--khub-space-2xs); }
.khub-sources__item { margin: 0; min-width: 0; }
.khub-sources__item a,
.khub-sources__item > span.khub-sources__plain {
    display: flex; align-items: center; gap: var(--khub-space-sm);
    padding: var(--khub-space-sm) var(--khub-space-md);
    border: 1px solid var(--khub-color-border);
    border-radius: var(--khub-radius);
    background: var(--khub-color-surface);
    color: var(--khub-color-text);
    font-size: var(--khub-font-size-sm);
    text-decoration: none;
    transition: border-color var(--khub-transition), background var(--khub-transition), color var(--khub-transition);
}
/* leading link glyph (CSS-drawn chain dot) */
.khub-sources__item a::before {
    content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%;
    background: var(--khub-color-accent);
    box-shadow: 0 0 0 3px var(--khub-color-accent-soft);
}
.khub-sources__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* trailing external-link arrow */
.khub-sources__item a::after {
    content: "↗"; margin-left: auto; flex: none;
    color: var(--khub-color-text-subtle);
    transition: transform var(--khub-transition), color var(--khub-transition);
}
.khub-sources__item a:hover { border-color: var(--khub-color-accent); background: var(--khub-color-accent-soft); color: var(--khub-color-accent); }
.khub-sources__item a:hover::after { color: var(--khub-color-accent); transform: translate(2px, -2px); }

/* ---------- Related (full-width section at the end of the article) ---------- */
.khub-related { min-width: 0; }
.khub-related__title {
    font-size: var(--khub-font-size-base);
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--khub-color-text-muted);
    margin: 0 0 var(--khub-space-sm);
    padding-bottom: var(--khub-space-2xs);
    border-bottom: 1px solid var(--khub-color-border);
}
/* Related cards lay out as a full-width grid at the end of every single. */
.khub-related { margin-top: var(--khub-space-2xl); }
.khub-single--faq .khub-related, .khub-single--glossary .khub-related { margin-top: var(--khub-space-xl); }
.khub-related__list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--khub-space-md); align-items: stretch;
}
/* Related is a uniform grid of compact text cards: article thumbnails would make
   the row tower over the text-only faq/glossary cards, so drop them here and
   bottom-align every card's arrow for an even row. */
.khub-related .khub-entry__thumbnail { display: none; }
.khub-related .khub-entry--glossary .khub-entry__arrow,
.khub-related .khub-entry--faq .khub-entry__arrow { margin-top: auto; }

/* ---------- Authors archive ---------- */
.khub-authors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--khub-space-md);
    align-items: stretch;
}
.khub-entry--author { text-align: center; }
.khub-author-card__link {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--khub-space-3xs);
    height: 100%;
    padding: var(--khub-space-lg) var(--khub-space-md);
    color: inherit; text-decoration: none;
}
.khub-author-card__avatar {
    width: 5rem; height: 5rem; margin-bottom: var(--khub-space-2xs);
    border-radius: var(--khub-radius-pill);
    overflow: hidden;
    background: var(--khub-color-surface-sunken);
    display: flex; align-items: center; justify-content: center;
}
.khub-author-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.khub-author-card__initial { font-size: var(--khub-font-size-2xl); font-weight: var(--khub-font-weight-semibold); color: var(--khub-color-text-subtle); }
.khub-author-card__name { font-weight: var(--khub-font-weight-semibold); color: var(--khub-color-primary); font-size: var(--khub-font-size-lg); }
.khub-author-card__role { color: var(--khub-color-text-muted); font-size: var(--khub-font-size-sm); }

/* ---------- Downloads ---------- */
.khub-downloads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--khub-space-md); align-items: stretch; }
.khub-entry--download { display: flex; flex-direction: column; }
.khub-entry--download .khub-entry__content { padding: 0 var(--khub-space-md); display: flex; flex-direction: column; gap: var(--khub-space-2xs); flex: 1; }
.khub-download__badge {
    align-self: flex-start; margin: var(--khub-space-md) var(--khub-space-md) var(--khub-space-sm);
    font-size: var(--khub-font-size-xs); font-weight: var(--khub-font-weight-bold); letter-spacing: 0.05em;
    color: var(--khub-color-accent); background: var(--khub-color-accent-soft);
    padding: 0.3rem 0.55rem; border-radius: var(--khub-radius-sm);
}
.khub-download__excerpt { margin: var(--khub-space-2xs) 0 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.khub-download__meta { color: var(--khub-color-text-subtle); font-size: var(--khub-font-size-sm); margin-top: auto; padding-top: var(--khub-space-2xs); }
.khub-wrapper .khub-download__btn {
    position: relative; z-index: 1;
    margin: var(--khub-space-md); margin-top: var(--khub-space-md);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--khub-space-2xs);
    padding: 0.6rem var(--khub-space-md);
    border: 1px solid var(--khub-color-border-strong); border-radius: var(--khub-radius-pill);
    background: var(--khub-color-surface); color: var(--khub-color-primary);
    font-size: var(--khub-font-size-sm); font-weight: var(--khub-font-weight-medium); text-decoration: none;
    transition: background var(--khub-transition), border-color var(--khub-transition), color var(--khub-transition);
}
.khub-wrapper .khub-download__btn:hover,
.khub-wrapper .khub-download__btn:focus-visible { background: var(--khub-color-accent); border-color: var(--khub-color-accent); color: var(--khub-color-accent-contrast); }
.khub-download__btn-icon {
    flex: none; width: 1rem; height: 1rem; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Topic + category filter bar (downloads archive) */
.khub-download-filters { display: flex; flex-direction: column; gap: var(--khub-space-sm); margin: 0 auto var(--khub-space-lg); max-width: var(--khub-container); }
.khub-filter-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--khub-space-2xs); }
.khub-filter-group__label {
    margin-right: var(--khub-space-2xs); font-size: var(--khub-font-size-xs); font-weight: var(--khub-font-weight-bold);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--khub-color-text-subtle);
}
.khub-chip {
    display: inline-flex; align-items: center; padding: 0.4rem var(--khub-space-sm);
    border: 1px solid var(--khub-color-border); border-radius: var(--khub-radius-pill);
    background: var(--khub-color-surface); color: var(--khub-color-text-muted);
    font: inherit; font-size: var(--khub-font-size-sm); font-weight: var(--khub-font-weight-medium);
    line-height: 1; cursor: pointer; text-decoration: none;
    transition: background var(--khub-transition), border-color var(--khub-transition), color var(--khub-transition);
}
.khub-chip:hover { border-color: var(--khub-color-border-strong); color: var(--khub-color-primary); }
.khub-chip.is-active { background: var(--khub-color-accent); border-color: var(--khub-color-accent); color: var(--khub-color-accent-contrast); }
.khub-downloads-empty { text-align: center; color: var(--khub-color-text-muted); margin: var(--khub-space-lg) 0; }
.khub-download-backlink { margin: 0 0 var(--khub-space-sm); }
.khub-download-backlink a { color: var(--khub-color-text-muted); text-decoration: none; font-size: var(--khub-font-size-sm); }
.khub-download-backlink a:hover { color: var(--khub-color-accent); }
/* Single download CTA */
.khub-download__cta { margin-top: var(--khub-space-lg); }
.khub-download__cta-btn { gap: var(--khub-space-2xs); }
.khub-download__cta-meta { opacity: 0.85; font-weight: var(--khub-font-weight-normal); }
/* A post's attached downloads section */
.khub-post-downloads { margin-top: var(--khub-space-xl); max-width: var(--khub-measure); }
.khub-post-downloads__title { font-size: var(--khub-font-size-lg); margin: 0 0 var(--khub-space-sm); }
.khub-post-downloads .khub-downloads-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }

/* ---------- Topic tiles (home "browse by topic") ---------- */
.khub-topics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--khub-space-md);
    margin-block: var(--khub-space-md) var(--khub-space-lg);
}

/* Detailed topic cards (topics index): larger, with a teaser + content breakdown. */
.khub-topics--cards {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    align-items: stretch;
}
.khub-topic-card {
    position: relative; /* anchor for the stretched title link */
    display: flex; flex-direction: column;
    background: var(--khub-color-surface);
    border: 1px solid var(--khub-color-border);
    border-radius: var(--khub-radius-lg);
    overflow: hidden;
    box-shadow: var(--khub-shadow-sm);
    color: inherit;
    transition: transform var(--khub-transition), box-shadow var(--khub-transition), border-color var(--khub-transition);
}
/* Card links to the topic via a stretched cover-link; quick links sit above it. */
.khub-topic-card__link { color: inherit; text-decoration: none; }
.khub-topic-card__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.khub-topic-card:hover .khub-topic-card__name { color: var(--khub-color-accent); }
.khub-topic-card__links { position: relative; z-index: 1; list-style: none; margin: var(--khub-space-2xs) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--khub-space-3xs); }
.khub-topic-card__links a {
    display: inline-flex; align-items: baseline; gap: var(--khub-space-2xs);
    color: var(--khub-color-text-muted); text-decoration: none;
    font-size: var(--khub-font-size-sm); line-height: var(--khub-leading-snug);
    transition: color var(--khub-transition);
}
.khub-topic-card__links a::before { content: "→"; color: var(--khub-color-accent); flex: none; }
.khub-topic-card__links a:hover { color: var(--khub-color-accent); }
.khub-topic-card:hover { transform: translateY(-3px); box-shadow: var(--khub-shadow-md); border-color: var(--khub-color-border-strong); }
.khub-topic-card__media { aspect-ratio: 16 / 9; background: var(--khub-color-surface-sunken); overflow: hidden; }
.khub-topic-card__media--empty {
    background:
        radial-gradient(120% 120% at 0% 0%, var(--khub-color-aurora-3), transparent 70%),
        var(--khub-color-surface-muted);
}
.khub-topic-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--khub-transition); }
.khub-topic-card:hover .khub-topic-card__img { transform: scale(1.04); }
.khub-topic-card__body { display: flex; flex-direction: column; gap: var(--khub-space-2xs); flex: 1; padding: var(--khub-space-md); }
.khub-topic-card__name { font-size: var(--khub-font-size-xl); font-weight: var(--khub-font-weight-semibold); letter-spacing: var(--khub-tracking-tight); color: var(--khub-color-primary); margin: 0; transition: color var(--khub-transition); }
.khub-topic-card__teaser { color: var(--khub-color-text-muted); font-size: var(--khub-font-size-sm); line-height: var(--khub-leading-snug); }
.khub-topic-card__meta { margin-top: auto; padding-top: var(--khub-space-2xs); color: var(--khub-color-accent); font-size: var(--khub-font-size-sm); font-weight: var(--khub-font-weight-medium); }

.khub-topic-tile {
    position: relative; overflow: hidden;
    display: flex; align-items: flex-end;
    min-height: 12rem;
    padding: var(--khub-space-md);
    border-radius: var(--khub-radius-lg);
    border: 1px solid var(--khub-color-border);
    background: var(--khub-color-surface-muted);
    color: var(--khub-color-primary);
    text-decoration: none;
    box-shadow: var(--khub-shadow-sm);
    transition: transform var(--khub-transition), box-shadow var(--khub-transition);
}
.khub-topic-tile:hover { transform: translateY(-3px); box-shadow: var(--khub-shadow-lg); color: var(--khub-color-primary); }
.khub-topic-tile.has-image { background-image: var(--khub-tile-img); background-size: cover; background-position: center; color: #fff; }
.khub-topic-tile.has-image:hover { color: #fff; }
.khub-topic-tile__overlay { position: absolute; inset: 0; }
.khub-topic-tile.has-image .khub-topic-tile__overlay { background: linear-gradient(180deg, rgba(15,18,22,0) 30%, rgba(15,18,22,0.8) 100%); }
.khub-topic-tile.has-image .khub-topic-tile__body { transition: transform var(--khub-transition); }
.khub-topic-tile.has-image:hover .khub-topic-tile__body { transform: translateY(-2px); }
.khub-topic-tile__body { position: relative; display: flex; flex-direction: column; gap: 0.15rem; }
.khub-topic-tile__name { font-size: var(--khub-font-size-xl); font-weight: var(--khub-font-weight-semibold); letter-spacing: var(--khub-tracking-tight); }
.khub-topic-tile__count { font-size: var(--khub-font-size-sm); opacity: 0.8; }
.khub-topic-tile.has-image .khub-topic-tile__count { opacity: 0.9; }
.khub-topic-tile__arrow {
    position: absolute; top: var(--khub-space-md); right: var(--khub-space-md);
    width: 2rem; height: 2rem; border-radius: var(--khub-radius-pill);
    background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateX(-4px); transition: opacity var(--khub-transition), transform var(--khub-transition);
}
.khub-topic-tile:not(.has-image) .khub-topic-tile__arrow { background: var(--khub-color-surface); border-color: var(--khub-color-border); }
.khub-topic-tile__arrow::after {
    content: ""; width: 0.7rem; height: 0.7rem; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.khub-topic-tile:hover .khub-topic-tile__arrow {
    opacity: 1; transform: translateX(2px);
    background: var(--khub-color-accent);
    border-color: var(--khub-color-accent);
    color: var(--khub-color-accent-contrast);
}

/* ---------- Topics nav (sidebar on topic page) ---------- */
.khub-topics-nav { min-width: 0; }
@media (min-width: 60rem) { .khub-topics-nav { position: sticky; top: var(--khub-space-lg); } }
.khub-topics-nav__title {
    font-size: var(--khub-font-size-base);
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--khub-color-text-muted);
    margin: 0 0 var(--khub-space-sm);
    padding-bottom: var(--khub-space-2xs);
    border-bottom: 1px solid var(--khub-color-border);
}
.khub-topics-nav__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.khub-topics-nav__item a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--khub-space-sm);
    padding: var(--khub-space-2xs) 0;
    color: var(--khub-color-text);
    border-bottom: 1px solid var(--khub-color-border);
}
.khub-topics-nav__item:last-child a { border-bottom: 0; }
.khub-topics-nav__item a:hover { color: var(--khub-color-accent); }
.khub-topics-nav__item.is-current a { color: var(--khub-color-accent); font-weight: var(--khub-font-weight-semibold); }
.khub-topics-nav__count {
    flex: none; min-width: 1.6rem; height: 1.6rem; padding: 0 0.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--khub-color-surface-muted); border-radius: var(--khub-radius-pill);
    font-size: var(--khub-font-size-xs); color: var(--khub-color-text-muted);
}

/* ===================================================================
   Spectacular home — "Immersive Aurora"
   Full-bleed token-built aurora (mesh + drifting beam), greyscale grain,
   frosted-glass search console, staggered entrance. Every colour derives
   from accent/surface tokens, so it recolours with the skin + dark mode.
   =================================================================== */
@property --khub-beam-angle { syntax: "<angle>"; inherits: true; initial-value: 210deg; }

.khub-hero--aurora {
    position: relative;
    isolation: isolate;
    max-width: none;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: max(var(--khub-space-md), calc(50vw - var(--khub-container) / 2));
    padding-block: clamp(var(--khub-space-lg), 6vw, var(--khub-space-xl));
    overflow: clip;
    text-align: center;
}
/* Hero sits flush under the header (kill the wrapper/main top padding) on any
   page that opens with the full-bleed hero: home, archives, topics, author. */
.khub-home { padding-top: 0; }
.khub-wrapper:has(.khub-hero--aurora) { padding-top: 0; }

/* Page hero (archives / topic / author) — same aurora family, calmer title,
   centred breadcrumb, sensible gap before the content below. */
.khub-hero--page { margin-bottom: var(--khub-space-xl); }
.khub-hero--page .khub-hero__title { font-size: clamp(var(--khub-font-size-3xl), 6vw, var(--khub-font-size-4xl)); margin-inline: auto; max-width: 22ch; }
.khub-hero--aurora .khub-breadcrumbs__list { justify-content: center; margin-bottom: var(--khub-space-sm); }
.khub-hero--aurora .khub-search { margin-bottom: 0; }
/* Topic pills sit directly under the search inside the hero. */
.khub-hero--aurora .khub-topic-chips { max-width: var(--khub-measure); margin: var(--khub-space-md) auto 0; }

/* Photo hero variant (topics with a hero image): swap the aurora for the photo
   + a legibility scrim; text turns light. */
/* Higher specificity than `.khub-hero--aurora > *` so the scrim stays a
   full-bleed overlay behind the content (not a constrained z-index:1 child). */
.khub-hero--aurora > .khub-hero__scrim { position: absolute; inset: 0; z-index: 0; max-width: none; margin-inline: 0; }
.khub-hero--photo { background-image: var(--khub-hero-photo); background-size: cover; background-position: center; color: #fff; }
.khub-hero--photo::before, .khub-hero--photo::after { display: none !important; }
.khub-hero--photo .khub-hero__scrim { background: linear-gradient(180deg, rgba(15,18,22,0.55) 0%, rgba(15,18,22,0.82) 100%); }
.khub-hero--photo .khub-hero__eyebrow { color: rgba(255,255,255,0.9); }
.khub-hero--photo .khub-hero__title { color: #fff; }
.khub-hero--photo .khub-hero__tagline { color: rgba(255,255,255,0.88); }
.khub-hero--photo .khub-breadcrumbs__list,
.khub-hero--photo .khub-breadcrumbs__item [aria-current="page"] { color: rgba(255,255,255,0.85); }
.khub-hero--photo .khub-breadcrumbs__item:not(:last-child)::after { color: rgba(255,255,255,0.5); }
.khub-hero--photo .khub-breadcrumbs a { color: #fff; }
/* Aurora field: mesh blooms + a slow conic beam, masked to fade into content. */
.khub-hero--aurora::before {
    content: "";
    position: absolute;
    inset: calc(var(--khub-space-2xl) * -1) -12% auto -12%;
    height: 150%;
    z-index: -2;
    background:
        radial-gradient(58% 55% at 16% 12%, var(--khub-color-aurora-2) 0%, transparent 60%),
        radial-gradient(55% 50% at 86% 6%, var(--khub-color-aurora-1) 0%, transparent 58%),
        radial-gradient(60% 60% at 50% -10%, var(--khub-color-aurora-3) 0%, transparent 64%),
        conic-gradient(from var(--khub-beam-angle) at 64% -6%, transparent 0turn, var(--khub-color-aurora-1) 0.05turn, var(--khub-color-aurora-2) 0.13turn, transparent 0.22turn);
    background-color: var(--khub-color-surface);
    filter: blur(var(--khub-aurora-blur)) saturate(1.1);
    opacity: var(--khub-aurora-opacity);
    -webkit-mask: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
            mask: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
    animation: khub-beam 16s ease-in-out infinite;
    will-change: transform;
}
/* Greyscale feTurbulence grain — tinted only by blend, injects zero colour. */
.khub-hero--aurora::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--khub-grain-opacity);
    mix-blend-mode: var(--khub-grain-blend);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}
@keyframes khub-beam { 0%, 100% { --khub-beam-angle: 204deg; } 50% { --khub-beam-angle: 216deg; } }
/* Graceful fallback: no color-mix() → a flat soft wash, never an empty field. */
@supports not (background: color-mix(in oklab, red, blue)) {
    .khub-hero--aurora::before {
        background: linear-gradient(180deg, var(--khub-color-accent-soft), var(--khub-color-surface));
    }
}

.khub-hero--aurora > * { position: relative; z-index: 1; max-width: var(--khub-measure); margin-inline: auto; }
/* The khub/hero block renders as a plain element (no WP constrained-layout
   auto-centering), so centre its flow children explicitly. The block theme's
   global heading styles otherwise win on the title, so force it. */
.khub-hero--aurora > .khub-hero__title { margin-inline: auto !important; }
.khub-hero--aurora > .khub-hero__tagline,
.khub-hero--aurora > .khub-search { margin-inline: auto; }
.khub-hero__eyebrow {
    display: inline-block;
    margin: 0 auto var(--khub-space-sm);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: var(--khub-font-size-sm);
    font-weight: var(--khub-font-weight-semibold);
    color: var(--khub-color-accent);
}
.khub-hero__title {
    margin: 0 auto var(--khub-space-sm);
    max-width: 16ch;
    font-size: var(--khub-font-size-hero);
    line-height: var(--khub-leading-tight);
    letter-spacing: var(--khub-tracking-tighter);
    color: var(--khub-color-primary);
    text-wrap: balance;
}
.khub-hero__accent {
    font-style: normal;
    background: linear-gradient(110deg, var(--khub-color-accent), var(--khub-color-accent-hover));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .khub-hero__accent { color: var(--khub-color-accent); }
}
.khub-hero__tagline {
    margin: 0 auto var(--khub-space-lg);
    max-width: 46ch;
    color: var(--khub-color-text-muted);
    font-size: var(--khub-font-size-lg);
}
/* Frosted-glass search console */
.khub-hero--aurora .khub-search {
    max-width: 40rem;
    margin-inline: auto;
    gap: var(--khub-space-2xs);
    padding: var(--khub-space-3xs);
    background: var(--khub-color-glass-bg);
    border: 1px solid var(--khub-color-glass-border);
    border-radius: var(--khub-radius-pill);
    box-shadow: var(--khub-hero-glow);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
            backdrop-filter: blur(14px) saturate(1.4);
}
.khub-hero--aurora .khub-search__field { border: 0; background: transparent; box-shadow: none; }
.khub-hero--aurora .khub-search__field:focus { outline: none; box-shadow: none; }
.khub-hero--aurora .khub-search:focus-within {
    border-color: var(--khub-color-accent);
    box-shadow: var(--khub-hero-glow), 0 0 0 4px var(--khub-color-ring);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .khub-hero--aurora .khub-search,
    .khub-hero__chip { background: var(--khub-color-surface); }
}
/* WordPress' constrained-layout / has-global-padding zero the hero's inline
   padding, so its content (incl. the search) goes edge-to-edge on mobile.
   Restore real side padding (high specificity beats the WP layout class). */
.khub-hero--aurora.has-global-padding { padding-inline: max(var(--khub-space-md), calc(50vw - var(--khub-container) / 2)); }
/* Extra breathing room around the search bar on small screens. */
@media (max-width: 40rem) {
    .khub-hero--aurora.has-global-padding { padding-inline: var(--khub-space-lg); }
}
/* Quick-link chips */
.khub-hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--khub-space-2xs); margin-top: var(--khub-space-md); }
.khub-hero__chip {
    display: inline-flex; align-items: center;
    padding: 0.4rem 0.95rem;
    border: 1px solid var(--khub-color-glass-border);
    background: var(--khub-color-glass-bg);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border-radius: var(--khub-radius-pill);
    color: var(--khub-color-text-muted);
    font-size: var(--khub-font-size-sm);
    font-weight: var(--khub-font-weight-medium);
    text-decoration: none;
    transition: color var(--khub-transition), border-color var(--khub-transition), background var(--khub-transition), transform var(--khub-transition);
}
.khub-hero__chip:hover {
    color: var(--khub-color-accent);
    border-color: var(--khub-color-accent);
    background: var(--khub-color-accent-soft);
    transform: translateY(-1px);
}

/* ---------- Home section cohesion ----------
   Consistent rhythm per section: pretitle → h2 → desc → content.
   Section gap is owned by the pretitle/heading top margin; the gap under a
   heading is owned by the description's bottom margin — uniform everywhere. */
.khub-home > h2.wp-block-heading {
    position: relative;
    text-align: center;
    margin: var(--khub-space-2xl) 0 0;
    font-size: var(--khub-font-size-2xl);
    letter-spacing: var(--khub-tracking-tight);
}
.khub-home > h2.wp-block-heading::before {
    content: "";
    display: block;
    width: 2.5rem; height: 2px;
    margin: 0 auto var(--khub-space-sm);
    background: var(--khub-color-accent);
    border-radius: 2px;
}
/* Section pretitle (kicker) — replaces the tick when present. */
.khub-section-pretitle {
    text-align: center;
    margin: var(--khub-space-2xl) 0 0;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--khub-font-size-sm);
    font-weight: var(--khub-font-weight-semibold);
    color: var(--khub-color-accent);
}
.khub-section-pretitle + h2.wp-block-heading { margin-top: var(--khub-space-2xs); }
.khub-section-pretitle + h2.wp-block-heading::before { display: none; }
/* Section description (byline) — centered, uniform gap below it to the content. */
.khub-section-desc {
    text-align: center;
    max-width: var(--khub-measure);
    margin: var(--khub-space-2xs) auto var(--khub-space-md);
    color: var(--khub-color-text-muted);
    font-size: var(--khub-font-size-lg);
}
/* The content block right after a description carries no extra top margin. */
.khub-home > .khub-section-desc + * { margin-top: 0; }
.khub-home > .khub-topics, .khub-home > .khub-glossary-index { margin-block: 0; }
.khub-home > .wp-block-buttons { justify-content: center; margin-top: var(--khub-space-md); }
.khub-home > p:not([class]) { text-align: center; max-width: var(--khub-measure); margin-inline: auto; color: var(--khub-color-text-muted); }

/* ---------- Self-contained section blocks (each home section is one block) ---------- */
/* The home is a stack of section blocks — space them evenly; the first hugs the hero. */
.khub-home > .khub-block { margin-block: var(--khub-space-2xl) 0; }
.khub-home > .khub-hero--aurora + .khub-block { margin-top: var(--khub-space-xl); }
.khub-section__head { text-align: center; max-width: var(--khub-measure); margin: 0 auto var(--khub-space-md); padding-inline: var(--khub-space-md); }
.khub-section__eyebrow { margin: 0; text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--khub-font-size-sm); font-weight: var(--khub-font-weight-semibold); color: var(--khub-color-accent); }
.khub-section__title { margin: var(--khub-space-2xs) 0 0; font-size: var(--khub-font-size-2xl); letter-spacing: var(--khub-tracking-tight); }
.khub-section__head:not(:has(.khub-section__eyebrow)) .khub-section__title::before {
    content: ""; display: block; width: 2.5rem; height: 2px;
    margin: 0 auto var(--khub-space-sm); background: var(--khub-color-accent); border-radius: 2px;
}
.khub-section__lead { margin: var(--khub-space-2xs) 0 0; color: var(--khub-color-text-muted); font-size: var(--khub-font-size-lg); }
.khub-section__cta { text-align: center; margin-top: var(--khub-space-md); }

/* ---------- Block editor only (data-type exists only in the editor) ---------- */
/* Space the section blocks apart while editing… */
.wp-block[data-type^="acf/khub-"] { margin-block: var(--khub-space-lg, 2.5rem); }
/* …and label each block (edit mode) with its block name as a small, clean accent
   pill, so the field forms are identifiable. Token-driven, so it tracks the brand
   and stays legible in a light or dark editor. */
.wp-block[data-type^="acf/khub-"]:has(.acf-block-body)::before {
    content: attr(data-title);
    display: inline-block;
    margin: 0 0 var(--khub-space-sm, 1rem);
    padding: 0.3rem 0.7rem;
    background: var(--khub-color-accent-soft, #eef1fd);
    color: var(--khub-color-accent, #3b5bdb);
    font-family: var(--khub-font-base, system-ui, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--khub-radius-pill, 999px);
}
/* Photoless topic tiles glow with a token-built aurora micro-fill */
.khub-topic-tile:not(.has-image) {
    background:
        radial-gradient(120% 120% at 0% 0%, var(--khub-color-aurora-3), transparent 70%),
        var(--khub-color-surface-muted);
}
.khub-topic-tile:hover { box-shadow: var(--khub-hero-glow); }
/* Carousel edge-fade: each side fades only when cards are scrolled off it
   (JS toggles is-overflow-start/end based on scroll position). */
.khub-carousel__list {
    --khub-fade-l: 0px;
    --khub-fade-r: 0px;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 var(--khub-fade-l), #000 calc(100% - var(--khub-fade-r)), transparent 100%);
            mask: linear-gradient(90deg, transparent 0, #000 var(--khub-fade-l), #000 calc(100% - var(--khub-fade-r)), transparent 100%);
}
.khub-carousel__list.is-overflow-start { --khub-fade-l: var(--khub-space-lg); }
.khub-carousel__list.is-overflow-end { --khub-fade-r: var(--khub-space-lg); }
/* FAQ: opening a question lights it with an accent edge */
.khub-collapse[data-khub-expanded="true"] { box-shadow: inset 3px 0 0 var(--khub-color-accent), var(--khub-shadow-sm); }

/* ---------- Card byline (independent link to the author, above the cover-link) ---------- */
.khub-entry__byline {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: var(--khub-space-2xs);
    width: fit-content; margin-top: var(--khub-space-2xs);
    text-decoration: none; color: inherit;
}
.khub-entry__byline-avatar img { width: 1.5rem; height: 1.5rem; border-radius: var(--khub-radius-pill); object-fit: cover; display: block; }
.khub-entry__byline-name { font-size: var(--khub-font-size-sm); color: var(--khub-color-text-muted); transition: color var(--khub-transition); }
.khub-entry__byline:hover .khub-entry__byline-name { color: var(--khub-color-accent); }
/* Video time replaces reading time with a small play glyph. */
.khub-entry__meta--video { display: inline-flex; align-items: center; gap: 0.35rem; }
.khub-entry__meta--video::before {
    content: ""; flex: none; width: 0.7rem; height: 0.7rem; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- FAQ topic filters ---------- */
.khub-faq-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--khub-space-2xs); margin: 0 auto var(--khub-space-md); max-width: var(--khub-container); }
.khub-faq-filter {
    padding: 0.4rem 0.95rem;
    border: 1px solid var(--khub-color-border);
    border-radius: var(--khub-radius-pill);
    background: var(--khub-color-surface);
    color: var(--khub-color-text-muted);
    font: inherit; font-size: var(--khub-font-size-sm); font-weight: var(--khub-font-weight-medium);
    cursor: pointer;
    transition: color var(--khub-transition), border-color var(--khub-transition), background var(--khub-transition);
}
.khub-faq-filter:hover { color: var(--khub-color-primary); border-color: var(--khub-color-border-strong); }
.khub-faq-filter.is-active { background: var(--khub-color-accent); border-color: var(--khub-color-accent); color: var(--khub-color-accent-contrast); }

/* ---------- Glossary teaser grid ---------- */
/* Teaser shows term names only → every card is the same compact size. */
.khub-glossary-index { margin-bottom: var(--khub-space-md); }
.khub-glossary-index .khub-entry__excerpt { display: none; }

/* ---------- Table of contents (article quick nav) ---------- */
.khub-toc[hidden] { display: none; }
.khub-toc {
    border: 1px solid var(--khub-color-border);
    border-radius: var(--khub-radius);
    background: var(--khub-color-surface-muted);
    font-size: var(--khub-font-size-sm);
}
.khub-toc__summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: var(--khub-space-2xs);
    padding: var(--khub-space-sm) var(--khub-space-md);
    color: var(--khub-color-primary);
    font-weight: var(--khub-font-weight-semibold);
    text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--khub-font-size-xs);
}
.khub-toc__summary::-webkit-details-marker { display: none; }
.khub-toc__summary::before {
    content: ""; flex: none; width: 0.5rem; height: 0.5rem;
    border-right: 2px solid var(--khub-color-text-subtle);
    border-bottom: 2px solid var(--khub-color-text-subtle);
    transform: rotate(-45deg);
    transition: transform var(--khub-transition);
}
.khub-toc[open] .khub-toc__summary::before { transform: rotate(45deg); }
.khub-toc__list { list-style: none; margin: 0; padding: 0 var(--khub-space-sm) var(--khub-space-sm); display: flex; flex-direction: column; gap: 1px; }
.khub-toc__item--h3 { margin-left: var(--khub-space-md); }
.khub-toc__link {
    display: block;
    padding: 0.35rem var(--khub-space-2xs);
    border-left: 2px solid transparent;
    color: var(--khub-color-text-muted);
    text-decoration: none;
    transition: color var(--khub-transition), border-color var(--khub-transition), background var(--khub-transition);
}
.khub-toc__link:hover { color: var(--khub-color-accent); }
.khub-toc__link.is-active {
    color: var(--khub-color-accent);
    border-left-color: var(--khub-color-accent);
    background: var(--khub-color-accent-soft);
    font-weight: var(--khub-font-weight-medium);
}
/* Anchor jumps clear the sticky header. */
.khub-single__content :where(h2, h3) { scroll-margin-top: var(--khub-header-offset, 5rem); }

/* ---------- Author profile (bio page) ---------- */
.khub-author-profile {
    display: flex; align-items: center; gap: var(--khub-space-lg);
    flex-wrap: wrap;
    padding-bottom: var(--khub-space-xl);
    margin-bottom: var(--khub-space-xl);
    border-bottom: 1px solid var(--khub-color-border);
}
.khub-author-profile__avatar { flex: none; }
.khub-author-profile__avatar img { width: 7rem; height: 7rem; border-radius: var(--khub-radius-pill); object-fit: cover; box-shadow: var(--khub-shadow-md); }
.khub-author-profile__intro { flex: 1; min-width: 0; }
.khub-author-profile__name { font-size: var(--khub-font-size-3xl); letter-spacing: var(--khub-tracking-tighter); margin: 0 0 var(--khub-space-3xs); }
.khub-author-profile__position { color: var(--khub-color-accent); font-weight: var(--khub-font-weight-medium); margin: 0 0 var(--khub-space-2xs); }
.khub-author-profile__bio { color: var(--khub-color-text-muted); max-width: var(--khub-measure); }
.khub-author-profile__bio > :first-child { margin-top: 0; }
.khub-author-content { margin-top: var(--khub-space-lg); }
.khub-author-content .khub-section__heading { margin-bottom: var(--khub-space-md); }

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
    .khub-wrapper *, .khub-home * { transition: none !important; animation: none !important; }
    .khub-hero--aurora::before { animation: none !important; }
}