:root {
    /* smaller default for all titles */
    --title-size: clamp(28px, 3.8vw, 48px);
}

/* Base wrapper */
.title {
    font-size: var(--title-size);
    line-height: 1.08;
    font-weight: 650;
    letter-spacing: -.02em;
    margin: 0 0 var(--title-mb);
    margin-bottom: 16px;
    /* ⬅️ add bottom space */
}

/* Accent & Ink (unchanged) */
.title-accent {
    --a1: #bfc4ff;
    --a2: #6360ff;
    --a3: #2623ff;
    --shine: .35;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, var(--shine)) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(180deg, var(--a1) 0%, var(--a2) 48%, var(--a3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 550;
    text-shadow: 0 .5px 0 rgba(0, 0, 0, .06);
}

.title-ink {
    --g1: #b2b7bd;
    --g2: #5a6067;
    --g3: #0f1115;
    --shine: .30;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, var(--shine)) 0%, rgba(255, 255, 255, 0) 28%),
        linear-gradient(180deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 550;
    text-shadow: 0 .5px 0 rgba(0, 0, 0, .08);
}

/* Optional size helpers */
.title--md {
    --title-size: clamp(30px, 5vw, 56px);
}

.title--lg {
    --title-size: clamp(34px, 4vw, 60px);
}

/* good “hero” size */

/* Ensure intro section doesn’t override */
.intro h1.title {
    font-size: var(--title-size) !important;
}

/* High-contrast fallback */
@media (forced-colors: active) {

    .title-accent,
    .title-ink {
        -webkit-text-fill-color: CanvasText;
        background: none !important;
        text-shadow: none;
    }
}

/* ===== Metallic / Silver Ink for Dark Backgrounds (brighter) ===== */
.title-ink--silver {
    --s1: #ffffff;
    /* brighter top highlight */
    --s2: #e6eaee;
    /* light silver */
    --s3: #b8bec4;
    /* softer mid grey */
    --s4: #6c737a;
    /* lighter base (not full charcoal) */
    --shine: .50;
    /* stronger white sheen */

    background:
        /* enhanced top shine */
        linear-gradient(180deg,
            rgba(255, 255, 255, var(--shine)) 0%,
            rgba(255, 255, 255, 0) 28%),
        /* metallic silver stack */
        linear-gradient(180deg,
            var(--s1) 0%,
            var(--s2) 35%,
            var(--s3) 70%,
            var(--s4) 100%);

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    font-weight: 550;
    text-shadow: 0 .6px 1px rgba(0, 0, 0, .25);
}