/* ── Magazine (public) ── layout follows the frame width (container queries); calm "ink" accents;
   motion = transform/opacity; text ≥ 14px on phones; targets ≥ 44px. */
.mg { --soft: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.4, .5, 1); container-type: inline-size; display: grid; gap: 18px; padding: clamp(14px, 3cqi, 32px); max-width: 1120px; margin-inline: auto; color: var(--text); }
.mg * { box-sizing: border-box; }
:where(.mg) :is(h1, h2, h3, h4, p, ul, ol) { margin: 0; padding: 0; } :where(.mg) :is(ul, ol) { list-style: none; }
.mg a { color: inherit; text-decoration: none; } .mg button, .mg input { font: inherit; color: inherit; } .mg button { cursor: pointer; }
.mg :is(a, button, input):focus-visible { outline: 2px solid #a9bfe3; outline-offset: 3px; border-radius: 10px; }
.mg small { color: var(--text-muted); } .mg p { color: var(--text-muted); line-height: 1.9; }
.mg-head h1 { font-size: clamp(1.5rem, 1.1rem + 2cqi, 2.2rem); font-weight: 800; } .mg-head p { margin-top: 4px; }
.mg-meta { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-muted); } .mg-meta i { font-style: normal; opacity: .6; }
.mg-tagline { font-size: .76rem; font-weight: 700; color: #a9bfe3; letter-spacing: .2px; }
.mg-kicker { width: fit-content; padding: 2px 12px; border-radius: 99px; background: #e9edf6; color: #0f1626; font-size: .74rem; font-weight: 800; }
.mg-ph { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, #1c2745, #263259); } .mg-ph i { width: 40%; height: 8px; border-radius: 4px; background: rgba(255,255,255,.14); grid-area: 1 / 1; } .mg-ph i:last-child { width: 24%; transform: translateY(18px); }
.mg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg h2, .mg h3, .mg h4 { line-height: 1.6; font-weight: 800; }
.mg-tags { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .mg-tags::-webkit-scrollbar { display: none; }
.mg-tags a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text-muted); transition: background .25s, color .25s, transform .4s var(--spring); } .mg-tags a:hover { transform: translateY(-2px); }
.mg-tags a[aria-current] { background: #e9edf6; color: #0f1626; border-color: transparent; font-weight: 700; } .mg-tags small { margin-inline-start: 4px; color: inherit; opacity: .65; }
.mg-empty { padding: 28px; text-align: center; border: 1px dashed var(--border-strong, var(--border)); border-radius: 20px; } .mg-empty[hidden] { display: none; }
[data-mg-item][hidden] { display: none !important; }
.mg-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 18px 22px; border-radius: 24px; border: 1px solid var(--border-strong, var(--border)); background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); } .mg-cta div { display: grid; gap: 2px; } .mg-cta span { color: var(--text-muted); font-size: .9rem; }
.mg .mg-cta a, .mg .mg-side-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 99px; background: transparent; border: 1.5px solid var(--accent-2); color: var(--accent-2); font-weight: 700; transition: transform .4s var(--spring), background .25s; } .mg .mg-cta a:hover, .mg .mg-side-cta:hover { transform: translateY(-2px); background: var(--accent-2-soft); }

/* 1 — lead + grid */
.mg-lead-a { display: grid; gap: 0; border-radius: 28px; overflow: hidden; border: 1px solid var(--border-strong, var(--border)); background: rgba(255,255,255,.04); transition: transform .5s var(--spring), border-color .3s; } .mg-lead-a:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.3); }
.mg-lead-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .mg-lead-img img { transition: transform .8s var(--soft); } .mg-lead-a:hover img { transform: scale(1.04); }
.mg-lead-body { display: grid; gap: 10px; align-content: center; padding: 18px 20px 22px; justify-items: start; } .mg-lead-body h2 { font-size: clamp(1.25rem, 1rem + 1.6cqi, 1.9rem); } .mg-lead-body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mg-card a { display: grid; height: 100%; border-radius: 24px; overflow: hidden; border: 1px solid var(--border); background: rgba(255,255,255,.04); transition: transform .5s var(--spring), border-color .3s; } .mg-card a:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.28); }
.mg-card-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #172038; } .mg-card-body { display: grid; gap: 6px; align-content: start; padding: 14px 16px 18px; } .mg-card h2 { font-size: 1.02rem; } .mg-card p { font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@container (min-width: 760px) { .mg-lead-a { grid-template-columns: 1.15fr 1fr; } .mg-lead-img { aspect-ratio: auto; min-height: 320px; } .mg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 520px) and (max-width: 759px) { .mg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


.mg .pager{margin-top:6px}
@media (prefers-reduced-motion: reduce) { .mg *, .mg *::before, .mg *::after { transition-duration: .01ms !important; animation: none !important; } .mg-track { scroll-behavior: auto; } }