/* Страница «СМИ» – вид по его референсу с cosmos.so (03.10.2026): скруглённые карточки трёх видов «лесенкой»,
   «таблетки» сверху, надписи поверх фото, тёмная сцена с мягким светом и тонкой сеткой. Скругление здесь –
   его осознанное исключение из правила «углы у фото не скруглять» (как у галереи «Комьюнити Lab»).
   Шрифт – Noto Sans. Страница собирается scripts/gen-smi.py, скрипт – smi-1.js. */
.sm-back { position: fixed; left: 14px; top: 14px; z-index: 60; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 10px 14px; border-radius: 999px; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sm-back:hover { opacity: .75; }
/* фон – просто чёрный (03.10.2026 он убрал фото ON AIR и вступительный текст) */
body { background: #000; }
.sm { min-height: 100vh; padding: 92px 0 48px; box-sizing: border-box; }
.sm-head { max-width: 900px; margin: 0 auto; padding: 0 24px; text-align: center; text-shadow: 0 2px 18px rgba(0, 0, 0, .65); }
.sm-title { margin: 0; font-weight: 300; font-size: clamp(30px, 5vw, 56px); letter-spacing: .04em; text-transform: uppercase; line-height: 1.15; }
/* «Блеск» по заголовку (03.10.2026, его просьба – анимация ShimmerText с 21st.dev, повторена без React):
   по белым буквам слева направо проходит тёмная полоса за 1,5 с, потом пауза 1,5 с; первый проход – через 1,5 с */
.sm-shimmer { display: inline-block; --shimmer-contrast: rgba(0, 0, 0, .5);
  color: #fff; -webkit-text-fill-color: transparent;
  background: currentColor linear-gradient(to right, currentColor 0%, var(--shimmer-contrast) 40%, var(--shimmer-contrast) 60%, currentColor 100%);
  -webkit-background-clip: text; background-clip: text; background-repeat: no-repeat; background-size: 50% 200%;
  background-position: 250% 0; animation: smShimmer 3s linear 1.5s infinite; }
@keyframes smShimmer { 0% { background-position: -100% 0; } 50%, 100% { background-position: 250% 0; } }
@media (prefers-reduced-motion: reduce) { .sm-shimmer { animation: none; } }
.sm-line { display: block; width: min(560px, 80%); height: 1px; margin: 20px auto 0; background: linear-gradient(90deg, transparent, #e00000, transparent); }

/* Сетка карточек с «выемкой» (07.10.2026, его просьба: вместо ленты – компонент NotchedProjectCard с 21st.dev, автор Maud Benaddi, MIT;
   повторён на чистом CSS без React): обложка 4:3 со скруглением 28 px, в правом нижнем углу круглая выемка цвета страницы и в ней кнопка-стрелка,
   сверху по центру «таблетка» с годом; под обложкой заголовок, описание и теги. Обложки чёрно-белые, на наведении оживают, стрелка – акцентного
   цвета #DA8956 и поворачивается. Шрифт – Noto Sans. Цвет выемки = цвет страницы (#000). */
.sm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; max-width: 1180px; margin: 56px auto 0; padding: 0 32px; box-sizing: border-box; }
.sm-nc { display: flex; flex-direction: column; color: #fff; text-decoration: none; border-radius: 28px; outline: none; -webkit-tap-highlight-color: transparent;
  opacity: 0; transform: translateY(18px); animation: smIn .8s cubic-bezier(.22, .61, .36, 1) forwards; }
.sm-nc:nth-child(3n+2) { animation-delay: .08s; } .sm-nc:nth-child(3n) { animation-delay: .16s; }
@keyframes smIn { to { opacity: 1; transform: none; } }
.sm-nc:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #000; }
.sm-nc__cover { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 28px; background: #262626; }
.sm-nc__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transform: scale(1); transition: filter .5s ease, transform .7s cubic-bezier(.22, .61, .36, 1); }
.sm-nc:hover .sm-nc__cover img, .sm-nc:focus-visible .sm-nc__cover img { filter: grayscale(0); transform: scale(1.04); }
.sm-nc__cover--text { display: flex; align-items: center; justify-content: center; padding: 0 24px 40px; background: radial-gradient(ellipse at 30% 20%, #303030, #151515 70%); }
.sm-nc__cover--text b { font-weight: 300; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; text-align: center; color: #e6e6e6; }
.sm-nc__badge { position: absolute; left: 0; right: 0; top: 16px; display: flex; justify-content: center; pointer-events: none; }
.sm-nc__badge span { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 11px; font-weight: 500; line-height: 1.5; color: #fff; }
/* выемка в правом нижнем углу: чёрный квадрат со скруглением и два «внутренних» уголка, чтобы края перетекали плавно */
.sm-nc__notch { position: absolute; right: 0; bottom: 0; width: 80px; height: 80px; background: #000; border-radius: 48px 0 0 0; }
.sm-nc__notch::before, .sm-nc__notch::after { content: ''; position: absolute; width: 28px; height: 28px; }
.sm-nc__notch::before { left: 52px; top: -28px; background: radial-gradient(circle at 0% 0%, transparent 27.5px, #000 28px); transform: translateX(1px); }
.sm-nc__notch::after { left: -28px; top: 52px; background: radial-gradient(circle at 0% 0%, transparent 27.5px, #000 28px); transform: translateY(1px); }
.sm-nc__go { position: absolute; right: 0; bottom: 0; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #262626; color: #fafafa;
  transition: background-color .3s ease, color .3s ease, transform .4s cubic-bezier(.22, .61, .36, 1); }
.sm-nc__go svg { width: 20px; height: 20px; transition: transform .4s cubic-bezier(.22, .61, .36, 1); }
.sm-nc:hover .sm-nc__go, .sm-nc:focus-visible .sm-nc__go { background: #DA8956; color: #000; }
.sm-nc:hover .sm-nc__go svg, .sm-nc:focus-visible .sm-nc__go svg { transform: rotate(45deg); }
.sm-nc__t { margin: 20px 0 0; font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; color: #fafafa; text-wrap: balance; }
.sm-nc__d { margin: 8px 0 0; font-size: 14px; font-weight: 300; line-height: 1.6; color: #a1a1a1; }
.sm-nc__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.sm-nc__tags li { padding: 4px 8px; border-radius: 8px; background: #262626; font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: .05em; text-transform: uppercase; color: #fafafa; }
.sm-note { max-width: 640px; margin: 30px auto 0; padding: 0 24px; text-align: center; font-size: 12px; line-height: 1.55; color: rgba(255, 255, 255, .4); }

@media (max-width: 1023px) { .sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; padding: 0 24px; } .sm-nc:nth-child(3n+2), .sm-nc:nth-child(3n) { animation-delay: 0s; } .sm-nc:nth-child(2n) { animation-delay: .08s; } }
@media (max-width: 639px) { .sm { padding-top: 80px; } .sm-grid { grid-template-columns: 1fr; gap: 44px; padding: 0 20px; margin-top: 36px; } .sm-nc:nth-child(2n) { animation-delay: 0s; } .sm-nc__t { font-size: 21px; } }
/* на телефоне наведения нет – обложки сразу в цвете */
@media (hover: none) { .sm-nc__cover img { filter: none; } }
@media (prefers-reduced-motion: reduce) { .sm-nc { animation: none; opacity: 1; transform: none; } .sm-nc__cover img, .sm-nc__go, .sm-nc__go svg { transition: none; } }