#quotes {
    background-color: var(--color-base-alt);
}

#quotes .slide-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-4);
    min-height: 100dvh;
}

.quote-display {
    max-width: 720px;
}

.quote-mark {
    font-family: var(--font-display);
    font-size: 6rem;
    line-height: 0.6;
    color: var(--color-magenta);
    opacity: 0.25;
    user-select: none;
    margin-bottom: var(--space-2);
}

.quote-text {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, var(--text-3xl));
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1.3;
    transition: opacity 0.25s ease;
}

.quote-text.fading {
    opacity: 0;
}

.quote-year {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    margin-top: var(--space-2);
    letter-spacing: 0.08em;
    transition: opacity 0.25s ease;
}

.quote-year.fading {
    opacity: 0;
}

.quote-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.quote-count {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}