/*
 * The public site: fonts, design tokens, page chrome (header, footer, an empty
 * page) and the reading column shared by the text-like blocks.
 *
 * Each block brings its own stylesheet from css/blocks/, loaded only on pages
 * that use the block. Class names follow BEM: `block__element--modifier`, with
 * the block named after the block type (`hero-article`, `cta-article`, …).
 */

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/instrument-sans-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;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/instrument-sans-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: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-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;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-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;
}

:root {
    --ink: #16151c;
    --ink-body: #2e2c35;
    --ink-soft: #5d5a68;
    --ink-muted: #6b6875;
    --ink-faint: #8b8894;
    --ink-ghost: #a19ead;
    --bg: #fcfcfd;
    --surface: #fff;
    --line: rgba(22, 21, 28, 0.08);
    --accent: #6b5ef0;
    --accent-ink: #5b52e0;
    --accent-deep: #4038c4;
    --accent-tint: rgba(107, 94, 240, 0.08);
    --pink: #f2a0b8;
    --gradient: linear-gradient(135deg, #7b6cf6, #f2a0b8);
    --gradient-wash: linear-gradient(130deg, #f4f2ff, #fdf3f6 70%);
    --lilac: #a77df0;
    --orchid: #c17be0;
    --sky: #7dd3fc;
    --grad-dot-1: linear-gradient(135deg, var(--accent), var(--lilac));
    --grad-dot-2: linear-gradient(135deg, var(--orchid), var(--pink));
    --grad-dot-3: linear-gradient(135deg, var(--sky), var(--accent));

    --font-sans: 'Instrument Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --wrap: 1280px;
    --gutter: 28px;
    --measure: 810px;
    /* Space under a full-width section block (hero, FAQ): blocks carry margin-bottom, never margin-top. */
    --section-gap: 64px;
}

.site {
    min-height: 100vh;
    overflow-x: clip;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

.site *,
.site *::before,
.site *::after {
    box-sizing: border-box;
}

/* Zero specificity, so any block's own link style wins without a fight. */
:where(.site) a {
    color: var(--accent-ink);
    text-decoration: none;
}

:where(.site) a:hover {
    color: var(--accent-deep);
}

.site ::selection {
    background: #ddd9ff;
}

.site-wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Header and footer */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(252, 252, 253, 0.72);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(22, 21, 28, 0.06);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
}

.site-logo__mark {
    display: block;
    width: 20px;
    height: 20px;
}

.site-logo__name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.site-header__edit {
    font-size: 14px;
}

.site-footer {
    margin-top: 96px;
    border-top: 1px solid var(--line);
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 26px;
    padding-bottom: 26px;
    font-size: 13px;
    color: var(--ink-faint);
}

.site-footer__brand {
    display: flex;
    align-items: center;
    gap: 9px;
}

.site-footer__mark {
    display: block;
    width: 16px;
    height: 16px;
}

/* A page with no blocks yet */

.empty-page {
    padding-top: 96px;
    padding-bottom: 96px;
    text-align: center;
    color: var(--ink-faint);
}

/*
 * The reading column the text-like blocks sit in. A block that frames its own
 * column (the article layout) sets --column-max and --column-gutter instead of
 * overriding this.
 */

.site-column {
    width: 100%;
    max-width: var(--column-max, calc(var(--measure) + 2 * var(--gutter)));
    margin: 0 auto;
    padding: 0 var(--column-gutter, var(--gutter));
    font-size: 18px;
    line-height: 1.7;
    color: var(--ink-body);
}

/* Mobile step of the type scale: body text barely moves, so line length stays readable. */
@media (max-width: 767px) {
    .site-column {
        font-size: 17px;
        line-height: 1.65;
    }
}

@media (max-width: 900px) {
    :root { --gutter: 20px; --section-gap: 48px; }
}