/*
 * Wise CMS — Front-end & Theme stylesheet
 * Allman brace style · 4-space indent · Light + Dark via prefers-color-scheme and [data-theme]
 */


@font-face
{
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/inter-latin.woff2') format('woff2-variations'), url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face
{
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2-variations'), url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@view-transition
{
    navigation: auto;
}

@layer tokens
{
    :root
    {
        /* Wise.design High-Contrast Light Theme */
        --bg-canvas: #F8FAF9;
        --bg-surface: #FFFFFF;
        --bg-elevated: #F1F5F2;
        --bg-forest: #163300;
        --bg-lime: #9FE870;
        --bg-lime-hover: #8CD95B;

        --text-primary: #0E0F0C;
        --text-secondary: #454745;
        --text-muted: #6A6C6A;
        --text-on-forest: #FFFFFF;
        --text-on-lime: #0E0F0C;

        --border-subtle: #E2E6E3;
        --border-strong: #C6CEC8;
        --border-focus: #163300;

        --status-success: #1B7F37;
        --status-warning: #B56B00;
        --status-danger: #D92D20;

        --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        --font-display: 'Inter Display', 'Inter', sans-serif;
        --font-mono: 'JetBrains Mono', ui-monospace, monospace;

        --radius-sm: 6px;
        --radius-md: 10px;
        --radius-lg: 16px;
        --radius-pill: 9999px;

        --shadow-card: 0 1px 3px rgba(14, 15, 12, 0.06);
        --transition-fast: 140ms cubic-bezier(0.22, 1, 0.36, 1);

        /* Derived (not part of the spec map) */
        --shadow-pop: 0 12px 32px rgba(14, 15, 12, 0.14), 0 2px 6px rgba(14, 15, 12, 0.06);
        --focus-ring: 0 0 0 3px color-mix(in srgb, var(--bg-lime) 70%, transparent);
        --tint-success: color-mix(in srgb, var(--status-success) 12%, var(--bg-surface));
        --tint-warning: color-mix(in srgb, var(--status-warning) 14%, var(--bg-surface));
        --tint-danger: color-mix(in srgb, var(--status-danger) 10%, var(--bg-surface));
        --tint-lime: color-mix(in srgb, var(--bg-lime) 28%, var(--bg-surface));
        --container: 72rem;
        --sidebar-width: 15.5rem;
        color-scheme: light;
    }

    [data-theme="dark"]
    {
        --bg-canvas: #0E0F0C;
        --bg-surface: #161814;
        --bg-elevated: #20231D;
        --bg-forest: #9FE870;
        --bg-lime: #9FE870;
        --bg-lime-hover: #B2F089;

        --text-primary: #F2F5F3;
        --text-secondary: #B4B8B4;
        --text-muted: #7C807C;
        --text-on-forest: #0E0F0C;
        --text-on-lime: #0E0F0C;

        --border-subtle: #282C25;
        --border-strong: #3A3F36;
        --border-focus: #9FE870;
        --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5);
        color-scheme: dark;
    }

    /* Follow the OS unless a theme was chosen explicitly. */
    @media (prefers-color-scheme: light)
    {
        :root:not([data-theme="light"])
        {
            --bg-canvas: #0E0F0C;
            --bg-surface: #161814;
            --bg-elevated: #20231D;
            --bg-forest: #9FE870;
            --bg-lime: #9FE870;
            --bg-lime-hover: #B2F089;
            --text-primary: #F2F5F3;
            --text-secondary: #B4B8B4;
            --text-muted: #7C807C;
            --text-on-forest: #0E0F0C;
            --text-on-lime: #0E0F0C;
            --border-subtle: #282C25;
            --border-strong: #3A3F36;
            --border-focus: #9FE870;
            --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5);
            color-scheme: dark;
        }
    }
}

@layer reset
{
    *, *::before, *::after
    {
        box-sizing: border-box;
    }
    *
    {
        margin: 0;
    }
    html
    {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    body
    {
        min-height: 100vh;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
    }
    img, picture, video, canvas, svg, iframe
    {
        display: block;
        max-width: 100%;
    }
    img, video
    {
        height: auto;
    }
    input, button, textarea, select
    {
        font: inherit;
        color: inherit;
    }
    button
    {
        cursor: pointer;
    }
    p, h1, h2, h3, h4, h5, h6
    {
        overflow-wrap: break-word;
    }
    table
    {
        border-collapse: collapse;
    }
    [hidden]
    {
        display: none !important;
    }
    @media (prefers-reduced-motion: reduce)
    {
        *, *::before, *::after
        {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

@layer base
{
    body
    {
        background: var(--bg-canvas);
        color: var(--text-primary);
        font-family: var(--font-sans);
        font-size: 1rem;
        font-feature-settings: 'ss01', 'cv11';
    }
    h1, h2, h3, h4
    {
        font-family: var(--font-display);
        line-height: 1.12;
        letter-spacing: -0.02em;
        font-weight: 700;
    }
    h1
    {
        font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
        font-weight: 800;
        letter-spacing: -0.035em;
    }
    h2
    {
        font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    }
    h3
    {
        font-size: 1.25rem;
    }
    a
    {
        color: inherit;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.18em;
    }
    a:hover
    {
        text-decoration-thickness: 2px;
    }
    :focus-visible
    {
        outline: 2px solid var(--border-focus);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }
    ::selection
    {
        background: var(--bg-lime);
        color: var(--text-on-lime);
    }
    code, kbd, pre, samp
    {
        font-family: var(--font-mono);
        font-size: 0.92em;
    }
    hr
    {
        border: 0;
        border-top: 1px solid var(--border-subtle);
    }
    mark
    {
        background: var(--tint-lime);
        color: inherit;
        padding: 0 0.15em;
        border-radius: 3px;
    }
    .tabular-nums
    {
        font-variant-numeric: tabular-nums;
    }
}

@layer components
{
    /* ─── Primitives ─────────────────────────────────────────── */
    .wise-container
    {
        width: min(100% - 2rem, var(--container));
        margin-inline: auto;
    }

    .wise-button
    {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 2.75rem;
        padding: 0.6rem 1.25rem;
        border: 1px solid transparent;
        border-radius: var(--radius-pill);
        font-weight: 600;
        font-size: 0.95rem;
        line-height: 1.2;
        text-decoration: none;
        white-space: nowrap;
        background: var(--bg-elevated);
        color: var(--text-primary);
        transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    }
    .wise-button:hover
    {
        background: color-mix(in srgb, var(--bg-elevated) 85%, var(--text-primary));
    }
    .wise-button:active
    {
        transform: scale(0.98);
    }
    .wise-button:disabled, .wise-button[aria-disabled="true"]
    {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
    }
    .wise-button--primary
    {
        background: var(--bg-lime);
        color: var(--text-on-lime);
    }
    .wise-button--primary:hover
    {
        background: var(--bg-lime-hover);
    }
    .wise-button--forest
    {
        background: var(--bg-forest);
        color: var(--text-on-forest);
    }
    .wise-button--secondary
    {
        background: transparent;
        border-color: var(--border-strong);
    }
    .wise-button--secondary:hover
    {
        border-color: var(--text-primary);
        background: transparent;
    }
    .wise-button--ghost
    {
        background: transparent;
    }
    .wise-button--ghost:hover
    {
        background: var(--bg-elevated);
    }
    .wise-button--danger
    {
        background: transparent;
        color: var(--status-danger);
        border-color: color-mix(in srgb, var(--status-danger) 40%, transparent);
    }
    .wise-button--danger:hover
    {
        background: var(--tint-danger);
    }
    .wise-button--sm
    {
        min-height: 2rem;
        padding: 0.3rem 0.85rem;
        font-size: 0.85rem;
    }
    .wise-button--icon
    {
        width: 2.5rem;
        min-height: 2.5rem;
        padding: 0;
    }
    .wise-button.htmx-request
    {
        opacity: 0.7;
        pointer-events: none;
    }

    .wise-input, .wise-select, .wise-textarea
    {
        width: 100%;
        min-height: 2.75rem;
        padding: 0.6rem 0.85rem;
        background: var(--bg-surface);
        color: var(--text-primary);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }
    .wise-textarea
    {
        min-height: 6rem;
        resize: vertical;
        line-height: 1.5;
    }
    .wise-input:hover, .wise-select:hover, .wise-textarea:hover
    {
        border-color: var(--text-muted);
    }
    .wise-input:focus, .wise-select:focus, .wise-textarea:focus
    {
        outline: none;
        border-color: var(--border-focus);
        box-shadow: var(--focus-ring);
    }
    .wise-input[aria-invalid="true"], .wise-select[aria-invalid="true"], .wise-textarea[aria-invalid="true"]
    {
        border-color: var(--status-danger);
    }
    .wise-input--pill
    {
        border-radius: var(--radius-pill);
        min-height: 2.5rem;
        padding-inline: 1rem;
    }
    .wise-input[type="color"]
    {
        padding: 0.25rem;
        width: 4rem;
    }
    .wise-check
    {
        width: 1.15rem;
        height: 1.15rem;
        accent-color: var(--bg-forest);
    }

    .wise-form
    {
        display: grid;
        gap: 1.1rem;
    }
    .wise-field
    {
        display: grid;
        gap: 0.4rem;
    }
    .wise-field[data-translatable]
    {
        gap: 0.5rem;
    }
    .wise-field-row
    {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }
    .wise-label
    {
        font-weight: 600;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-wrap: wrap;
    }
    .wise-required
    {
        color: var(--status-danger);
    }
    .wise-label-row
    {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-wrap: wrap;
    }
    .wise-field__help
    {
        font-size: 0.85rem;
        color: var(--text-muted);
    }
    .wise-field__error
    {
        font-size: 0.85rem;
        color: var(--status-danger);
        font-weight: 500;
    }
    .wise-fieldset
    {
        border: 0;
        padding: 0;
        display: grid;
        gap: 0.5rem;
    }
    .wise-fieldset__fields
    {
        display: grid;
        gap: 0.9rem;
        padding: 0.85rem;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        background: var(--bg-surface);
    }
    .wise-choice
    {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        cursor: pointer;
    }
    .wise-form__actions
    {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    .wise-hp
    {
        position: absolute !important;
        left: -10000px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
    .wise-badge
    {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.2rem 0.65rem;
        font-size: 0.78rem;
        font-weight: 600;
        border-radius: var(--radius-pill);
        background: var(--bg-elevated);
        color: var(--text-secondary);
        text-decoration: none;
        white-space: nowrap;
    }
    .wise-badge--published, .wise-badge--success, .wise-badge--active, .wise-badge--approved
    {
        background: var(--tint-success);
        color: var(--status-success);
    }
    .wise-badge--draft, .wise-badge--pending, .wise-badge--hidden, .wise-badge--unread, .wise-badge--warning
    {
        background: var(--tint-warning);
        color: var(--status-warning);
    }
    .wise-badge--scheduled
    {
        background: var(--tint-lime);
        color: var(--text-primary);
    }
    .wise-badge--archived, .wise-badge--danger, .wise-badge--spam, .wise-badge--failed
    {
        background: var(--tint-danger);
        color: var(--status-danger);
    }

    .wise-alert
    {
        padding: 0.85rem 1rem;
        border-radius: var(--radius-md);
        border: 1px solid var(--border-subtle);
        background: var(--bg-elevated);
    }
    .wise-alert--success
    {
        background: var(--tint-success);
        border-color: color-mix(in srgb, var(--status-success) 30%, transparent);
    }
    .wise-alert--warning
    {
        background: var(--tint-warning);
        border-color: color-mix(in srgb, var(--status-warning) 30%, transparent);
    }
    .wise-alert--danger
    {
        background: var(--tint-danger);
        border-color: color-mix(in srgb, var(--status-danger) 30%, transparent);
    }

    .wise-card
    {
        display: block;
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        padding: 1.25rem;
    }
    a.wise-card
    {
        color: inherit;
        text-decoration: none;
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }
    a.wise-card:hover
    {
        border-color: var(--border-focus);
        text-decoration: none;
    }
    .wise-card > h2, .wise-card > h3, .wise-card__title
    {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        margin-bottom: 0.85rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }
    .wise-card + .wise-card
    {
        margin-top: 1rem;
    }
    .empty-state
    {
        padding: 2.5rem 1rem;
        text-align: center;
        color: var(--text-muted);
        border: 1px dashed var(--border-strong);
        border-radius: var(--radius-lg);
    }
    .visually-hidden
    {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
    .skip-link
    {
        position: absolute;
        left: 1rem;
        top: -4rem;
        z-index: 100;
        padding: 0.6rem 1rem;
        background: var(--bg-lime);
        color: var(--text-on-lime);
        border-radius: var(--radius-pill);
        font-weight: 600;
    }
    .skip-link:focus
    {
        top: 1rem;
    }

    .pagination ul
    {
        list-style: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        justify-content: center;
        margin-block: 2rem;
    }
    .pagination a, .pagination span
    {
        display: inline-flex;
        min-width: 2.5rem;
        height: 2.5rem;
        padding-inline: 0.75rem;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-pill);
        text-decoration: none;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }
    .pagination a
    {
        border: 1px solid var(--border-subtle);
        background: var(--bg-surface);
    }
    .pagination a:hover
    {
        border-color: var(--text-primary);
    }
    .pagination [aria-current="page"]
    {
        background: var(--bg-forest);
        color: var(--text-on-forest);
    }
    .pagination .is-disabled
    {
        color: var(--text-muted);
    }

    /* ─── Frontend ───────────────────────────────────────────── */
    .site
    {
        display: flex;
        flex-direction: column;
    }
    .site-main
    {
        flex: 1;
        padding-block: 2rem 4rem;
    }
    .site-main:focus
    {
        outline: none;
    }
    .site-header
    {
        position: sticky;
        top: 0;
        z-index: 20;
        background: color-mix(in srgb, var(--bg-canvas) 88%, transparent);
        backdrop-filter: saturate(1.4) blur(12px);
        border-bottom: 1px solid var(--border-subtle);
        view-transition-name: site-header;
    }
    .site-header__inner
    {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        min-height: 4.25rem;
        flex-wrap: wrap;
        padding-block: 0.6rem;
    }
    .site-brand
    {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.15rem;
        letter-spacing: -0.02em;
        text-decoration: none;
    }
    .site-nav
    {
        flex: 1;
    }
    .site-nav--composable
    {
        width: 100%;
    }
    .site-nav__list
    {
        list-style: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem;
    }
    .site-nav--composable > .site-nav__list
    {
        width: 100%;
        gap: 0.5rem;
    }
    .site-nav__item
    {
        position: relative;
    }
    .site-nav__item--brand, .site-nav__item--logo
    {
        margin-inline-end: 0.75rem;
    }
    .site-nav__item--search
    {
        margin-inline-start: auto;
    }
    .site-nav__item--brand a.site-brand, .site-nav__item--logo a.site-brand
    {
        padding: 0.25rem 0;
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.15rem;
        letter-spacing: -0.02em;
        color: var(--text-primary);
        background: transparent;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    .site-nav__item > :not(.site-nav__list--sub):not(.site-search):not(.lang-switcher):not(.site-theme-toggle):not(.site-brand)
    {
        display: block;
        padding: 0.45rem 0.85rem;
        border-radius: var(--radius-pill);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--text-secondary);
    }
    .site-nav__list--sub a
    {
        display: block;
        padding: 0.45rem 0.85rem;
        border-radius: var(--radius-pill);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--text-secondary);
    }
    .site-nav a:not(.site-brand):not(.lang-switcher a):hover, .site-nav a[aria-current="page"]
    {
        color: var(--text-primary);
        background: var(--bg-elevated);
    }
    .site-nav__list--sub
    {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 12rem;
        flex-direction: column;
        padding: 0.4rem;
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-pop);
    }
    .site-nav__item:hover > .site-nav__list--sub, .site-nav__item:focus-within > .site-nav__list--sub
    {
        display: flex;
    }
    .site-header__tools
    {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .site-search .wise-input
    {
        width: 11rem;
    }
    .lang-switcher ul
    {
        list-style: none;
        padding: 0.2rem;
        display: flex;
        gap: 0.15rem;
        background: var(--bg-elevated);
        border-radius: var(--radius-pill);
    }
    .lang-switcher a, .lang-switcher span
    {
        display: inline-block;
        padding: 0.3rem 0.65rem;
        border-radius: var(--radius-pill);
        font-size: 0.8rem;
        font-weight: 700;
        text-decoration: none;
        color: var(--text-secondary);
    }
    .lang-switcher [aria-current="true"]
    {
        background: var(--bg-forest);
        color: var(--text-on-forest);
    }
    .lang-switcher .is-unavailable
    {
        opacity: 0.45;
        cursor: not-allowed;
    }
    .admin-bar
    {
        display: flex;
        gap: 1rem;
        align-items: center;
        padding: 0.35rem 1rem;
        background: var(--bg-forest);
        color: var(--text-on-forest);
        font-size: 0.85rem;
        font-weight: 600;
    }
    .admin-bar a
    {
        text-decoration: none;
    }
    .admin-bar__badge
    {
        background: var(--bg-lime);
        color: var(--text-on-lime);
        padding: 0.1rem 0.5rem;
        border-radius: var(--radius-pill);
    }

    .hero
    {
        padding-block: clamp(3rem, 8vw, 6.5rem) 2rem;
    }
    .hero__title
    {
        font-size: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
        max-width: 16ch;
    }
    .hero__lede, .entry__lede
    {
        font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
        color: var(--text-secondary);
        max-width: 52ch;
        margin-top: 1.25rem;
    }
    .page-header
    {
        padding-block: 1.5rem 2rem;
        display: grid;
        gap: 1rem;
    }
    .page-header__intro
    {
        color: var(--text-secondary);
        max-width: 60ch;
    }
    .search-form
    {
        display: flex;
        gap: 0.75rem;
        max-width: 36rem;
    }

    .entry
    {
        max-width: 46rem;
    }
    .entry__header
    {
        padding-block: 1.5rem 2rem;
    }
    .entry__meta
    {
        color: var(--text-muted);
        margin-top: 1rem;
        font-size: 0.95rem;
    }
    .entry__meta a
    {
        color: var(--text-secondary);
    }
    .entry__terms
    {
        display: flex;
        gap: 0.4rem;
        flex-wrap: wrap;
        margin-bottom: 1rem;
    }
    .subpages
    {
        margin-top: 3rem;
        padding: 1.25rem;
        background: var(--bg-elevated);
        border-radius: var(--radius-lg);
    }
    .subpages ul
    {
        padding-left: 1.2rem;
        display: grid;
        gap: 0.35rem;
    }

    .prose
    {
        font-size: 1.075rem;
        line-height: 1.7;
        display: grid;
        gap: 1.15em;
    }
    .prose > *
    {
        min-width: 0;
    }
    .prose h2
    {
        margin-top: 1em;
    }
    .prose h3
    {
        margin-top: 0.75em;
    }
    .prose ul, .prose ol
    {
        padding-left: 1.4em;
        display: grid;
        gap: 0.35em;
    }
    .prose li > ul, .prose li > ol
    {
        margin-top: 0.35em;
    }
    .prose a
    {
        color: var(--text-primary);
        text-decoration-color: var(--bg-lime);
        text-decoration-thickness: 2px;
    }
    .prose a:hover
    {
        background: var(--tint-lime);
    }
    .prose pre
    {
        background: var(--bg-elevated);
        border: 1px solid var(--border-subtle);
        padding: 1rem 1.15rem;
        border-radius: var(--radius-md);
        overflow-x: auto;
        font-size: 0.9rem;
        line-height: 1.55;
    }
    .prose :not(pre) > code
    {
        background: var(--bg-elevated);
        padding: 0.1em 0.35em;
        border-radius: 4px;
    }
    .prose figure
    {
        display: grid;
        gap: 0.6rem;
    }
    .prose figcaption
    {
        font-size: 0.9rem;
        color: var(--text-muted);
    }
    .prose img
    {
        border-radius: var(--radius-md);
    }
    .cms-image--border img
    {
        border: 1px solid var(--border-subtle);
    }
    .cms-image--background
    {
        background: var(--bg-elevated);
        padding: 1.5rem;
        border-radius: var(--radius-lg);
    }
    .cms-image--background img
    {
        margin-inline: auto;
        max-width: 60%;
    }
    .cms-gallery__grid
    {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0.75rem;
        grid-template-columns: repeat(var(--gallery-columns, 3), minmax(0, 1fr));
    }
    .cms-gallery--cols-2
    {
        --gallery-columns: 2;
    }
    .cms-gallery--cols-4
    {
        --gallery-columns: 4;
    }
    .cms-gallery__item
    {
        display: grid;
        gap: 0.35rem;
        margin: 0;
    }
    .cms-gallery__item img
    {
        inline-size: 100%;
        block-size: auto;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: var(--radius-sm);
    }
    .cms-gallery__caption
    {
        font-size: 0.85rem;
        color: var(--text-secondary);
    }
    @media (max-width: 40rem)
    {
        .cms-gallery__grid
        {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    .cms-image--stretched
    {
        width: min(100vw - 2rem, var(--container));
        margin-inline: calc(50% - min(50vw - 1rem, var(--container) / 2));
    }
    .cms-quote blockquote
    {
        border-left: 4px solid var(--bg-lime);
        padding-left: 1.25rem;
        font-size: 1.25rem;
        font-weight: 500;
        letter-spacing: -0.01em;
    }
    .cms-quote.cms-align-center
    {
        text-align: center;
    }
    .cms-quote.cms-align-center blockquote
    {
        border: 0;
        padding: 0;
    }
    .cms-callout
    {
        padding: 1rem 1.15rem;
        border-radius: var(--radius-md);
        background: var(--tint-warning);
        border-left: 4px solid var(--status-warning);
    }
    .cms-callout__title
    {
        margin-bottom: 0.35rem;
    }
    .cms-embed iframe
    {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border: 0;
        border-radius: var(--radius-md);
        background: var(--bg-elevated);
    }
    .cms-embed--spotify iframe, .cms-embed--soundcloud iframe
    {
        aspect-ratio: auto;
        height: 352px;
    }
    .cms-table-wrap
    {
        overflow-x: auto;
    }
    .cms-table-wrap table
    {
        width: 100%;
        font-size: 0.95rem;
    }
    .cms-table-wrap th, .cms-table-wrap td
    {
        border-bottom: 1px solid var(--border-subtle);
        padding: 0.6rem 0.75rem;
        text-align: left;
    }
    .cms-table-wrap th
    {
        font-weight: 700;
        background: var(--bg-elevated);
    }
    .cms-checklist
    {
        list-style: none;
        padding-left: 0 !important;
    }
    .cms-checkbox
    {
        display: inline-block;
        width: 1em;
        height: 1em;
        border: 2px solid var(--border-strong);
        border-radius: 4px;
        vertical-align: -0.12em;
    }
    .is-checked > .cms-checkbox
    {
        background: var(--bg-forest);
        border-color: var(--bg-forest);
    }
    .cms-align-center
    {
        text-align: center;
    }
    .cms-align-right
    {
        text-align: right;
    }
    .cms-align-justify
    {
        text-align: justify;
    }
    .cms-attachment a
    {
        display: flex;
        gap: 0.85rem;
        align-items: center;
        padding: 0.85rem 1rem;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        text-decoration: none;
        background: var(--bg-surface);
    }
    .cms-attachment__ext
    {
        font-size: 0.75rem;
        font-weight: 800;
        background: var(--bg-forest);
        color: var(--text-on-forest);
        padding: 0.3rem 0.5rem;
        border-radius: var(--radius-sm);
    }
    .cms-attachment__size
    {
        margin-left: auto;
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .cms-link-card
    {
        display: flex;
        gap: 1rem;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        overflow: hidden;
        text-decoration: none;
        background: var(--bg-surface);
    }
    .cms-link-card img
    {
        width: 8rem;
        object-fit: cover;
    }
    .cms-link-card__body
    {
        display: grid;
        gap: 0.25rem;
        padding: 0.85rem 1rem;
    }
    .cms-link-card small
    {
        color: var(--text-muted);
    }
    hr.cms-block--delimiter
    {
        border: 0;
        text-align: center;
        height: 1.5rem;
    }
    hr.cms-block--delimiter::before
    {
        content: '* * *';
        letter-spacing: 0.75em;
        color: var(--text-muted);
    }

    .card-grid
    {
        container-type: inline-size;
        display: grid;
        gap: 1.25rem;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    }
    .card
    {
        display: flex;
        flex-direction: column;
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        overflow: hidden;
        transition: transform var(--transition-fast), box-shadow var(--transition-fast);
        container-type: inline-size;
    }
    .card:hover
    {
        transform: translateY(-2px);
        box-shadow: var(--shadow-pop);
    }
    .card__media img
    {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }
    .card__body
    {
        padding: 1.15rem 1.25rem 1.35rem;
        display: grid;
        gap: 0.5rem;
    }
    .card__eyebrow
    {
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--status-success);
    }
    .card__title
    {
        font-size: 1.25rem;
    }
    .card__title a
    {
        text-decoration: none;
    }
    .card__title a::after
    {
        content: '';
        position: absolute;
        inset: 0;
    }
    .card
    {
        position: relative;
    }
    .card__excerpt
    {
        color: var(--text-secondary);
    }
    .card__meta
    {
        font-size: 0.85rem;
        color: var(--text-muted);
    }
    @container (min-width: 34rem)
    {
        .card:first-child
        {
            flex-direction: row;
        }
    }

    .comments
    {
        margin-top: 4rem;
        padding-top: 2rem;
        border-top: 1px solid var(--border-subtle);
        display: grid;
        gap: 1.25rem;
    }
    .comment
    {
        padding: 1rem 1.15rem;
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        display: grid;
        gap: 0.5rem;
    }
    .comment--reply
    {
        margin-left: 2rem;
    }
    .comment header
    {
        font-size: 0.9rem;
        color: var(--text-muted);
    }
    .comment header strong
    {
        color: var(--text-primary);
    }
    .comment-form
    {
        padding: 1.25rem;
        background: var(--bg-elevated);
        border-radius: var(--radius-lg);
    }

    .site-footer
    {
        border-top: 1px solid var(--border-subtle);
        padding-block: 2rem;
        color: var(--text-muted);
        font-size: 0.9rem;
    }
    .site-footer__inner
    {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        align-items: center;
    }
    .error-state
    {
        text-align: center;
        padding-block: 4rem;
        display: grid;
        gap: 1rem;
        justify-items: center;
    }
    .gate-state
    {
        max-inline-size: 32rem;
        padding-block: 4rem;
        display: grid;
        gap: 1rem;
    }
    .gate-form
    {
        display: grid;
        gap: 0.75rem;
        justify-items: start;
    }
    .gate-form .wise-field
    {
        inline-size: 100%;
    }
    .error-state__code
    {
        font-family: var(--font-display);
        font-size: clamp(5rem, 15vw, 9rem);
        font-weight: 900;
        line-height: 1;
        color: var(--bg-lime);
        -webkit-text-stroke: 2px var(--bg-forest);
    }
    .error-page main
    {
        padding-block: 4rem;
        display: grid;
        gap: 1rem;
    }
    .error-page pre
    {
        white-space: pre-wrap;
        background: var(--bg-elevated);
        padding: 1rem;
        border-radius: var(--radius-md);
        font-size: 0.8rem;
    }

    @media (max-width: 48rem)
    {
        .site-header__inner
        {
            gap: 0.75rem;
        }
        .site-nav
        {
            order: 3;
            flex-basis: 100%;
            overflow-x: auto;
        }
        .site-nav__list
        {
            flex-wrap: nowrap;
        }
        .site-search .wise-input
        {
            width: 8rem;
        }
    }

    .meta
    {
        color: var(--text-muted);
        font-size: 0.85rem;
    }
    .stack
    {
        display: grid;
        gap: 0.75rem;
    }
    .cluster
    {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        align-items: center;
    }
}

@layer utilities
{
    .mt-0
    {
        margin-top: 0 !important;
    }
    .w-full
    {
        width: 100%;
    }
    .text-muted
    {
        color: var(--text-muted);
    }
    .text-right
    {
        text-align: right;
    }
    .nowrap
    {
        white-space: nowrap;
    }
    .truncate
    {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mono
    {
        font-family: var(--font-mono);
        font-size: 0.85em;
    }
    [x-cloak]
    {
        display: none !important;
    }
}