/* ══════════════════════════════════════════════════════════════════════════
 * Design system — spacing, rhythm, measure, type scale.
 *
 * Why this file exists:
 *
 * Every section on this site was written independently, and each invented its
 * own spacing. Measured on the live page before this file existed:
 *
 *   content width   480 / 923 / 956 / 1242 / 1430 px   — five different widths
 *   section rhythm  padding 100 / padding 64 / child margin 136 / 0
 *   hero headline   33.6px @ weight 500                — subheading size
 *
 * So content edges moved horizontally from one section to the next, and the
 * vertical gaps were arbitrary. That is what makes a page feel "off" even when
 * every individual piece looks fine.
 *
 * These are layout *primitives*, deliberately kept in CSS rather than in
 * Compose Modifiers: the rhythm of a page is a whole-page property, and it is
 * far easier to keep honest in one stylesheet than spread across 50 components.
 * `.section-container` is already emitted on every section, so this file can
 * govern all of them from one place.
 * ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Spacing scale ──────────────────────────────────────────────────────
     * A 4px base on a roughly-1.5x curve. Every gap on the page should be one
     * of these; if a value isn't here, it's a decision that needs justifying. */
    --space-1: 0.25rem;   /*  4px */
    --space-2: 0.5rem;    /*  8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: 2rem;      /* 32px */
    --space-7: 3rem;      /* 48px */
    --space-8: 4rem;      /* 64px */
    --space-9: 6rem;      /* 96px */
    --space-10: 8rem;     /* 128px */

    /* ── Measure ────────────────────────────────────────────────────────────
     * ONE content width for the whole site. Sections may go narrower for
     * readability (prose), but never wider, and never a bespoke number. */
    --content-max: 74rem;      /* 1184px — the single alignment edge */
    --prose-max: 46rem;        /* 736px  — ~70ch, comfortable reading measure */

    /* Gutters scale with the viewport instead of jumping at breakpoints. */
    --gutter: clamp(1.25rem, 5vw, 5.5rem);

    /* ── Vertical rhythm ────────────────────────────────────────────────────
     * One value drives the gap between every section. */
    --section-gap: clamp(4rem, 9vw, 8rem);
    --section-head-gap: clamp(2rem, 4vw, 3.5rem);  /* heading → content */

    /* ── Type scale ─────────────────────────────────────────────────────────
     * Fluid, so it reads correctly from 360px to 1920px without breakpoints. */
    --text-display: clamp(2.25rem, 5.2vw, 4rem);   /* 36 → 64px  hero */
    --text-h2: clamp(1.75rem, 3.2vw, 2.75rem);     /* 28 → 44px  section titles */
    --text-lead: clamp(1.05rem, 1.5vw, 1.375rem);  /* 17 → 22px  section subtitles */
    --text-body: 1rem;

    --leading-tight: 1.08;
    --leading-snug: 1.3;
    --leading-normal: 1.6;

    --tracking-tight: -0.02em;
}

/* ══ Section rhythm ══════════════════════════════════════════════════════════
 * `.section-container` is on every section already. Owning padding here means
 * the gap between sections is defined once, not re-invented per component. */
.section-container {
    /* Horizontal: one gutter, one max width — every section's content now
     * starts and ends on the same vertical line. */
    padding-inline: var(--gutter) !important;
    max-width: calc(var(--content-max) + 2 * var(--gutter)) !important;
    margin-inline: auto;

    /* Vertical: a single rhythm for the whole page.
     *
     * `!important` is load-bearing here, not laziness: Silk injects its
     * component styles into a <style> tag at runtime, which lands *after* this
     * <link> in the document. At equal specificity the later rule wins, so
     * without this the generated padding silently overrides the system and
     * every section falls back to 0. */
    padding-block: var(--section-gap) !important;
}

/* The hero owns the viewport and sets its own vertical rhythm. */
#start.section-container {
    /* Also !important — an important declaration beats a non-important one no
     * matter how specific the selector, so the rule above would otherwise win. */
    padding-block: 0 !important;
}

/* Kill the ad-hoc top margins components used to fake section spacing.
 * These were 136px in some sections, 0 in others — the single biggest source
 * of the inconsistent rhythm. The scoping keeps it to a section's own heading
 * block (its first child), not every nested column. */
.section-container > .kobweb-col:first-child,
.section-container > div:first-child {
    margin-top: 0 !important;
}

/* ══ Header alignment ════════════════════════════════════════════════════════
 * The header carried its own breakpoint padding ladder (12 / 16 / 24 / 40px),
 * so at 1440px the logo sat at x=40 while hero content started at x=128. Two
 * different left edges on the same screen is the kind of thing you feel before
 * you can name it.
 *
 * This reproduces the section container's edge arithmetic without needing an
 * inner wrapper: pad to whichever is larger, the fluid gutter or the margin
 * that centring a --content-max column would produce. Below that width the
 * gutter wins, above it the centred column does — which is exactly what
 * `.section-container` resolves to at every size. */
.site-header {
    padding-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2)) !important;
}

/* ══ Section heading blocks ══════════════════════════════════════════════════ */
.section-head {
    max-width: var(--prose-max);
    margin-inline: auto;
    margin-bottom: var(--section-head-gap);
    text-align: center;
}

.section-title {
    font-size: var(--text-h2) !important;
    line-height: var(--leading-tight) !important;
    letter-spacing: var(--tracking-tight) !important;
    font-weight: 700 !important;
}

.section-lead {
    font-size: var(--text-lead) !important;
    line-height: var(--leading-normal) !important;
    max-width: var(--prose-max);
    margin-inline: auto;
}

/* ══ Hero ════════════════════════════════════════════════════════════════════
 * The headline was 33.6px at weight 500 — the same size as a section subtitle,
 * which is why the first screen read as flat. */
.hero-title {
    font-size: var(--text-display) !important;
    line-height: var(--leading-tight) !important;
    letter-spacing: var(--tracking-tight) !important;
    font-weight: 700 !important;
}

.hero-lead {
    font-size: var(--text-lead) !important;
    line-height: var(--leading-normal) !important;
    /* Was wrapping into three short ragged lines well before the headline's
     * right edge. One measure, so the rag reads deliberate. */
    max-width: 34rem !important;
}

/* ══ Utilities ═══════════════════════════════════════════════════════════════ */
.stack-tight > * + * { margin-top: var(--space-3); }
.stack > * + * { margin-top: var(--space-5); }
.stack-loose > * + * { margin-top: var(--space-7); }

/* Anchor offset so a nav jump doesn't hide the heading under the fixed header. */
:target { scroll-margin-top: 6rem; }