/* Full width, sitewide. The page uses the whole screen; long-reading columns stay a comfortable width inside it.
   The left filters get the same glass card look as the right rail, with icons. */
main { max-width: none; padding: 16px clamp(16px, 2.4vw, 44px); }

/* Pages that were boxed in get room to breathe (text-heavy ones keep a readable measure) */
.cv-wrap { max-width: 1180px; }
.cv-wrap.wide { max-width: 1320px; }

/* News: wider side columns on big screens, and the feed becomes a 2- then 3-column wall */
@media (min-width: 1180px) { .news-shell:not(.wide) { grid-template-columns: 250px minmax(0, 1fr) 340px; gap: 28px; } }
@media (min-width: 1600px) {
  .news-shell:not(.wide) { grid-template-columns: 270px minmax(0, 1fr) 380px; }
  .news-shell:not(.wide) .news-main > .feed { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .news-shell:not(.wide) .news-main > .feed > #more { grid-column: 1 / -1; }
}
@media (min-width: 2300px) { .news-shell:not(.wide) .news-main > .feed { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Left filters: a glass card with icons, like the right rail */
@media (min-width: 900px) {
  .side { padding: 14px 10px 18px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 1px 0 var(--glass-rim, transparent), 0 0 24px -10px color-mix(in srgb, var(--center) 60%, transparent), var(--shadow);
    border: 1px solid color-mix(in srgb, var(--center) 30%, transparent); }
}
.side-item .ico { filter: saturate(1.1); }
.side-item.on { background: color-mix(in srgb, var(--center) 18%, var(--surface)); box-shadow: inset 3px 0 0 var(--center), 0 0 16px -8px var(--center); }
.side-item:hover .ico { transform: scale(1.15); transition: transform .15s; }
.side-link { padding: 6px 0; }

/* Thumbnails in the right rail's story lists */
.mini.has-thumb { grid-template-columns: 64px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.mini.has-thumb img { grid-row: span 2; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.mini { transition: background .15s; border-radius: 0 10px 10px 0; }
.mini:hover { background: color-mix(in srgb, var(--c) 10%, transparent); }
@media (prefers-reduced-motion: reduce) { .side-item:hover .ico { transform: none; } }