/* Django adapters for the preserved Next.js Tonal Islands design. */
:root { --text: rgb(var(--kvb-ink)); --text-secondary: rgb(var(--kvb-ink-2)); --text-muted: rgb(var(--kvb-ink-3)); --radius-md: 16px; --radius-sm: 12px; }
.masthead-grid { position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"logo . actions" "nav nav nav";align-items:center;gap:8px 12px;padding:12px 0 8px; }
.brand-home { grid-area:logo; } .primary-nav { grid-area:nav;min-width:0;overflow-x:auto;margin:0 calc(-1 * var(--page-pad));padding:0 var(--page-pad); } .masthead-actions { grid-area:actions; }
.nav-pill { display:inline-flex;height:40px;align-items:center;gap:8px;white-space:nowrap;border-radius:9999px;padding:0 16px;background:rgb(var(--kvb-island));font-size:15px;font-weight:500;color:rgb(var(--kvb-ink-2)); }
.nav-pill[aria-current] { background:rgb(var(--kvb-ink));color:rgb(var(--kvb-island));font-weight:600; }
.nav-pill:hover { color:rgb(var(--kvb-accent-ink)); } .nav-pill[aria-current]:hover { color:rgb(var(--kvb-island)); }
.explore summary { list-style:none;cursor:pointer; } .explore summary::-webkit-details-marker { display:none; }
.explore[open] summary { background:rgb(var(--kvb-inset-strong)); }
.explore-content { position:absolute;z-index:60;left:0;right:0;top:calc(100% + 8px);max-height:calc(100dvh - 120px);overflow-y:auto;overscroll-behavior:contain; }
.explore-grid { display:grid;grid-template-columns:1fr;gap:28px; } .section-index { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.explore-link { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 0;font-weight:600;width:100%;text-align:left; }
.explore-link:hover,.preview-link:hover { color:rgb(var(--kvb-accent-ink)); } .preview-link { display:block;padding:0 0 8px;line-height:1.35; }
.desktop-label,.theme-desktop,.telegram-link { display:none; } .theme-control { cursor:pointer; } .theme-desktop { align-items:center;justify-content:center;width:44px;height:44px; }
.footer-island { --logo-ink:#fff; } .footer-island a:hover { text-decoration:underline; } .footer-island a { overflow-wrap:anywhere; }
.button-primary,.button-island { display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:12px;padding:12px 16px;font-size:15px;font-weight:600;white-space:nowrap; }
.button-primary { background:rgb(var(--kvb-accent));color:white; } .button-island { background:rgb(var(--kvb-island)); }
.article-copy { max-width:680px;font-family:var(--font-literata);font-size:clamp(18px,17.6px + .1vw,19px);line-height:1.62;overflow-wrap:anywhere; }
.article-copy h2 { font-family:var(--font-onest);font-size:24px;font-weight:650;line-height:1.2;letter-spacing:-.012em;margin:32px 0 16px;scroll-margin-top:100px; }
.article-copy p { margin:0 0 20px; } .article-copy a { color:rgb(var(--kvb-accent-ink));text-decoration:underline;text-underline-offset:3px; }
.card { background:rgb(var(--kvb-island));border-radius:var(--r-island);padding:24px; } main>.card { margin:0 var(--page-pad); } .badge-pill { display:inline-flex;padding:4px 10px;border-radius:9999px;font-size:13px;font-weight:600; } .badge-ai { background:rgb(var(--kvb-accent-wash));color:rgb(var(--kvb-accent-wash-ink)); }
@media(min-width:768px) { .explore-grid { grid-template-columns:1fr 2fr 1fr; } }
@media(min-width:1024px) { .masthead-grid { height:72px;grid-template-areas:"logo nav actions";gap:20px;padding:0; } .primary-nav { margin:0;padding:0;overflow:visible; } .nav-pill { padding:0 14px;background:transparent; } .nav-pill[aria-current] { background:rgb(var(--kvb-island));color:rgb(var(--kvb-ink)); } .nav-pill[aria-current]:hover { color:rgb(var(--kvb-accent-ink)); } .nav-pill:hover { background:rgb(var(--kvb-island)/.6); } .desktop-label { display:inline; } .mobile-label { display:none; } .theme-desktop { display:inline-flex; } .telegram-link { display:inline-flex;align-items:center;gap:8px;padding:0 16px;height:44px; } .story-rail { position:sticky;top:88px; } }
@media(min-width:1024px) and (max-width:1279px) { .primary-section:nth-child(n+6) { display:none; } .telegram-link { padding:0;width:44px;justify-content:center; } .telegram-link span { display:none; } }
@media(prefers-reduced-motion:reduce) { .masthead { transition:none; } }
.skip-link { position:fixed;left:16px;top:12px;z-index:100;transform:translateY(-200%);border-radius:12px;background:rgb(var(--kvb-ink));color:rgb(var(--kvb-island));padding:12px 20px; }
.skip-link:focus { transform:translateY(0); }

/* Image variants follow the preserved Next.js StoryMedia/LeadIsland layout. */
.story-media { min-width:0;overflow:hidden; }
.story-media[hidden] { display:none; }
.story-media img { display:block;width:100%;height:100%;object-fit:cover; }
.image-lead.has-image { padding:8px; }
.image-lead.has-image .lead-copy { padding:8px; }
.lead-grid { height:100%; }
.image-lead.has-image .lead-grid { display:grid;gap:20px; }
.lead-media { aspect-ratio:16/9;border-radius:calc(var(--r-island) - 8px); }
.image-lead.has-image #lead-title { font-size:clamp(32px,25.3px + 1.48vw,44px);line-height:1.04;letter-spacing:-.028em; }
.image-lead:not(.has-image) .lead-copy { height:100%; }
.image-card.has-image { display:grid;grid-template-columns:minmax(0,1fr) 96px;align-items:start;gap:12px;padding:8px; }
.card-media { order:2;width:96px;aspect-ratio:1;border-radius:calc(var(--r-island) - 8px); }
.image-card.has-image .card-copy { padding:6px; }
.article-media img { aspect-ratio:16/9;height:auto;border-radius:24px; }
@media(min-width:768px) {
 .image-lead.has-image,.image-card.has-image { padding:12px; }
 .image-lead.has-image .lead-copy { padding:12px; }
 .lead-media,.card-media { border-radius:calc(var(--r-island) - 12px); }
 .image-card.has-image { display:flex;flex-direction:column;gap:0; }
 .card-media { order:0;width:100%;aspect-ratio:16/10; }
 .image-card.has-image .card-copy { padding:16px 12px 8px; }
}
@media(min-width:1280px) {
 .image-lead.has-image.side-by-side .lead-grid { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px; }
 .image-lead.has-image.side-by-side .lead-media { height:100%;min-height:420px;aspect-ratio:auto; }
 .image-lead.has-image.side-by-side .lead-copy { padding-left:0; }
}

.image-lead.has-image #lead-title { max-width:none; }