/* ============================================
   3. TYPOGRAPHY
   ============================================ */

.hero h1 {
    font-size:clamp(2.5rem,8vw,4.5rem);
    line-height:1.1;
    margin-bottom:24px;
    color:var(--black);
}

.hero .tagline {
    font-family:'IBM Plex Mono',monospace;
    font-size:1.25rem;
    margin-bottom:32px;
    color:var(--charcoal);
}

#manifesto .section-header h1 {
    font-size:clamp(2.5rem,8vw,4.5rem);
    line-height:1.1;
    margin-bottom:24px;
    color:var(--black);
    font-weight:bold;
}

#manifesto .section-header .tagline {
    font-family:'IBM Plex Mono',monospace;
    font-size:1.25rem;
    margin-bottom:32px;
    color:var(--charcoal);
}

.title-fade {
    background: linear-gradient(to top, #800000, #ffffff);
    -webkit-background-clip: text;
    color: transparent;
}

[data-theme="light"] .title-fade {
    background: linear-gradient(to top, #ffffff, #800000);
    -webkit-background-clip: text;
    color: transparent;
}

.blog-header h1 {
    background: linear-gradient(to top, #800000, #ffffff);
    -webkit-background-clip: text;
    color: transparent;
}

.blog-content h2 {
    background: linear-gradient(to top, #800000, #ffffff);
    -webkit-background-clip: text;
    color: transparent;
}

[data-theme="light"] .blog-header h1,
[data-theme="light"] .blog-content h2 {
    background: linear-gradient(to top, #ffffff, #800000);
    -webkit-background-clip: text;
    color: transparent;
}

.guide-page h1 {
    background: linear-gradient(to top, #800000, #ffffff);
    -webkit-background-clip: text;
    color: transparent;
}

[data-theme="light"] .guide-page h1 {
    background: linear-gradient(to top, #ffffff, #800000);
    -webkit-background-clip: text;
    color: transparent;
}

section.about-section h2,
section.resources-section h2 {
    background: linear-gradient(to top, #800000, #ffffff);
    -webkit-background-clip: text;
    color: transparent;
}

[data-theme="light"] section.about-section h2,
[data-theme="light"] section.resources-section h2 {
    background: linear-gradient(to top, #ffffff, #800000);
    -webkit-background-clip: text;
    color: transparent;
}

.typewriter {
    animation: typing 3s steps(44) forwards;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}