@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;600;700;800;900&family=Manrope:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

html {
    scrollbar-gutter: stable;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.kinetic-gradient {
    background: linear-gradient(135deg, #005137 0%, #0F6B4B 100%);
}

.kinetic-bg {
    background: linear-gradient(135deg, #005137 0%, #0f6b4b 100%);
}

.glass-nav {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(24px);
}

.tonal-layering {
    backdrop-filter: blur(24px);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.hover-scale {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-scale:hover {
    transform: scale(1.02);
}

.active-scale:active {
    transform: scale(0.98);
}

/* News rows scroll inside a fixed box, so the column keeps its height
   whatever the story count.

   Rows are pinned to one height per breakpoint (a two-line headline
   would otherwise make its row taller), and the box is an exact
   multiple of it via --news-rows, set by the renderer. That way the
   cut always lands between rows instead of slicing through one. The
   +1px is the hairline the grid's gap-px draws between rows. */
.news-row {
    height: 84px;
}

.news-scroll {
    max-height: calc(85px * var(--news-rows, 6) - 1px);
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 81, 55, 0.28) transparent;
}

@media (min-width: 640px) {
    .news-row {
        height: 101px;
    }

    .news-scroll {
        max-height: calc(102px * var(--news-rows, 6) - 1px);
    }
}

.news-scroll::-webkit-scrollbar {
    width: 6px;
}

.news-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.news-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 81, 55, 0.28);
    border-radius: 999px;
}

.news-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 81, 55, 0.5);
}

/* Headlines wrap by measure rather than filling every line, so the lead
   does not end on a single orphaned word. */
.text-balance {
    text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}