:root,
:root[data-theme='light'] {
--k-tag-geo: #9a5b13;
--k-tag-water: #1d5fd0;
--k-tag-fire: #c2410c;
--k-tag-air: #5b3fc4;
--k-tag-cold: #0b7285;
--k-tag-dry: #8a6d1f;
--k-tag-health: #0f7a5c;
--k-tag-cbrn: #a3195b;
--k-tag-infra: #4b5563;
--k-tag-prep: #1e7a3a;
--k-tag-people: #b4235f;
--k-tag-region: #15327a;
--k-tag-org: #0a1633;
--k-tag-tech: #0b8fa0;
--k-tag-product: #1f5eff;
}
:root[data-theme='dark'] {
--k-tag-geo: #f0b25a;
--k-tag-water: #7fb0ff;
--k-tag-fire: #ff8a4c;
--k-tag-air: #b3a1ff;
--k-tag-cold: #66d9e8;
--k-tag-dry: #e3c565;
--k-tag-health: #5fe0b5;
--k-tag-cbrn: #ff7ab6;
--k-tag-infra: #aab4c3;
--k-tag-prep: #6fdc8c;
--k-tag-people: #ff8fb8;
--k-tag-region: #8db1ff;
--k-tag-org: #d6e0fa;
--k-tag-tech: #4fd6e4;
--k-tag-product: #6f9bff;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--k-tag-geo: #f0b25a;
--k-tag-water: #7fb0ff;
--k-tag-fire: #ff8a4c;
--k-tag-air: #b3a1ff;
--k-tag-cold: #66d9e8;
--k-tag-dry: #e3c565;
--k-tag-health: #5fe0b5;
--k-tag-cbrn: #ff7ab6;
--k-tag-infra: #aab4c3;
--k-tag-prep: #6fdc8c;
--k-tag-people: #ff8fb8;
--k-tag-region: #8db1ff;
--k-tag-org: #d6e0fa;
--k-tag-tech: #4fd6e4;
--k-tag-product: #6f9bff;
}
}
.ky-c--geo { --c: var(--k-tag-geo); }
.ky-c--water { --c: var(--k-tag-water); }
.ky-c--fire { --c: var(--k-tag-fire); }
.ky-c--air { --c: var(--k-tag-air); }
.ky-c--cold { --c: var(--k-tag-cold); }
.ky-c--dry { --c: var(--k-tag-dry); }
.ky-c--health { --c: var(--k-tag-health); }
.ky-c--cbrn { --c: var(--k-tag-cbrn); }
.ky-c--infra { --c: var(--k-tag-infra); }
.ky-c--prep { --c: var(--k-tag-prep); }
.ky-c--people { --c: var(--k-tag-people); }
.ky-c--region { --c: var(--k-tag-region); }
.ky-c--org { --c: var(--k-tag-org); }
.ky-c--tech { --c: var(--k-tag-tech); }
.ky-c--product { --c: var(--k-tag-product); }
.ky-dot { display: inline-block; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--c, var(--s-brand)); margin-inline-end: 8px; vertical-align: 1px; }
.ky-badge--corr { margin-inline-start: 4px; padding: 2px 8px; font-size: 0.6875rem; color: var(--s-text); background: var(--s-warn-soft); text-transform: none; letter-spacing: 0; }
.ky-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(14px, 2vw, 22px); }
.ky-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: var(--s-glass); border: 1px solid var(--s-glass-line); box-shadow: var(--s-shadow-1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ky-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--s-bg-3); }
.ky-card__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ky-card__ico { display: grid; place-items: center; block-size: 100%; color: var(--c); background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 60%), color-mix(in srgb, var(--c) 10%, var(--s-surface)); }
.ky-card__body { display: grid; gap: 8px; align-content: start; padding: 16px 18px 18px; flex: 1; }
.ky-card__kicker { font-size: 0.8125rem; font-weight: 600; color: color-mix(in srgb, var(--c) 80%, var(--s-text)); }
.ky-card__tpl { font-weight: 400; color: var(--s-text-3); }
.ky-card__title { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ky-card__title a { color: var(--s-text); text-decoration: none; }
.ky-card__title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.ky-card:hover .ky-card__title a, .ky-card__title a:focus-visible { color: var(--s-brand-ink); text-decoration: underline; }
.ky-card:has(a:focus-visible) { outline: 3px solid var(--s-brand); outline-offset: 2px; }
.ky-card__title a:focus-visible { outline: none; }
.ky-card__dek { font-size: 0.9375rem; color: var(--s-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ky-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.8125rem; color: var(--s-text-3); }
.ky-card--lead { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.ky-card--lead .ky-card__media { aspect-ratio: auto; min-block-size: 280px; }
.ky-card--lead .ky-card__body { align-content: center; padding: clamp(18px, 3vw, 34px); }
.ky-card--lead .ky-card__title { font-family: var(--k-font-display); font-weight: 800; font-synthesis: none; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.12; }
.ky-card--lead .ky-card__dek { font-size: 1.0625rem; -webkit-line-clamp: 4; }
.ky-lead { margin-block-end: clamp(14px, 2vw, 22px); }
.ky-tabs ul { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; list-style: none; border-radius: var(--k-radius-full); background: var(--s-glass); border: 1px solid var(--s-glass-line); }
.ky-tabs a { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 18px; border-radius: var(--k-radius-full); font-weight: 500; color: var(--s-text-2); text-decoration: none; }
.ky-tabs a:hover { color: var(--s-text); background: var(--s-bg-3); }
.ky-tabs a[aria-current='page'] { color: var(--s-on-brand); background: var(--s-brand); }
@media (forced-colors: active) { .ky-card__title a::after { border: 1px solid CanvasText; } }
@media (prefers-reduced-motion: no-preference) {
.ky-card { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease; }
.ky-card:hover { transform: translateY(-3px); box-shadow: var(--s-shadow-2); }
.ky-card__media img { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ky-card:hover .ky-card__media img { transform: scale(1.03); }
}