/* Страница статьи (новости, обновления, гайды) — по шаблону Figma «text tamplate v2» (gmwiki 42:968), на 1920:
   шапка как на главной, но на светлом фоне и с тёмным логотипом; слева «← Все новости» (500), справа заголовок 48;
   мета: иконка, теги через «/», дата лаймом справа; герой во всю сетку (скругление 48);
   тело: слева тёмная карточка события + содержание (446), справа текст (до правого края − 40). Таблицы — плотные, с тонкими линиями. */
.a-page { color: #11182f; }
.a-top { padding: 32px 32px 0; }
.a-top .top { padding: 0; }
.a-top .steam { color: #fff; }

.article { padding: 0 32px; display: flex; flex-direction: column; gap: 24px; }
.a-head { display: grid; grid-template-columns: 500fr 1356fr; align-items: start; padding-top: 60px; }
.a-head .back { font: 500 16px/1.3 var(--font); color: #6c6c84; }   /* по верху блока с заголовком */
.a-head .back:hover { color: #11182f; }
.a-head h1 { margin: 0; font: 500 clamp(34px, 2.5vw, 48px)/1.15 var(--font); color: #11182f; text-wrap: balance; }
.a-meta { display: grid; grid-template-columns: 500fr 1356fr; }
.a-meta > * { grid-row: 1; }
.a-meta img { grid-column: 2; width: 36px; height: 36px; }
.a-meta .tags { grid-column: 2; align-self: center; margin-left: 50px; display: flex; gap: 12px; font: 600 13px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #2b2d42; }
.a-meta .sep { color: #2b2d42; }
.a-meta time { grid-column: 2; justify-self: end; align-self: center; padding: 9px 14px; border-radius: calc(8px * var(--sq)); corner-shape: squircle;
  background: var(--lime); font: 600 13px/1.3 var(--font); color: #11182f; }
.a-hero { display: block; width: 100%; aspect-ratio: 1856 / 968; object-fit: cover; border-radius: calc(48px * var(--sq)); corner-shape: squircle; background: #e3e6ef; }

.a-body { display: grid; grid-template-columns: 446fr 1386fr; gap: 24px; }
.a-side { display: flex; flex-direction: column; gap: 24px; }   /* колонка во всю высоту текста: карточка стоит, содержание едет */
.a-toc { position: sticky; top: 92px; }

/* тёмная карточка события: стекло #11182f .8, лаймовое свечение снизу слева, колокольчик в круге сверху справа */
.a-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 24px; color: #fff;
  border-radius: calc(20px * var(--sq)); corner-shape: squircle; background: rgba(17, 24, 47, .8);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.a-card::before { content: ""; position: absolute; left: -127px; top: 96px; width: 442px; height: 429px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 255, 61, .55), rgba(201, 255, 61, 0)); filter: blur(30px); }
.a-card > * { position: relative; }
.a-card .bell { position: absolute; top: -22px; right: 16px; width: 110px; height: 110px; }
.a-card .when { display: flex; align-items: center; gap: 6px; }
.a-card .when img { width: 26px; height: 26px; padding: 1px; }
.a-card .when b { font: 500 20px/1.3 var(--font); }
.a-card .when small { align-self: flex-start; margin-top: 3px; font: 500 12px/1 var(--font); color: rgba(255, 255, 255, .8); }
.a-card .time { padding-left: 32px; font: 500 12px/1.25 var(--font); color: rgba(255, 255, 255, .55); }
.a-card .ttl { margin-top: 32px; font: 600 48px/1 var(--font); }
.a-card .txt { margin-top: 6px; font: 400 18px/1.2 var(--font); }
.a-card dl { margin: 30px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.a-card dt { font: 600 12px/1.25 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.a-card dd { margin: 4px 0 0; font: 500 15px/1.35 var(--font); color: var(--lime); }

.a-toc { padding: 20px 12px 16px; }
.a-toc p { padding: 0 12px 8px; font: 600 12px/1.25 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #6c6c84; }
.a-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.a-toc a { position: relative; display: block; padding: 9px 12px; border-radius: calc(8px * var(--sq)); corner-shape: squircle;
  font: 500 15px/1.35 var(--font); color: #6c6c84; overflow: hidden; }
.a-toc a img { position: absolute; right: -16px; top: 50%; width: 66px; translate: 0 -46%; rotate: 10deg; scale: -1 1; opacity: 0; }   /* голова чуть наклонена, срезана краями пункта: уши сверху, низ и правый бок */
.a-toc a.on, .a-toc a:hover { background: #fff; color: #11182f; }
.a-toc a.on img { opacity: 1; }

/* текст */
.a-text { padding-right: 40px; display: flex; flex-direction: column; gap: 18px; font: 400 18px/1.6 var(--font); color: #2b2d42; min-width: 0; }
.a-text .lede { font: 400 22px/1.5 var(--font); color: #11182f; }
.a-text h2 { margin: 38px 0 0; font: 500 32px/1.2 var(--font); color: #11182f; scroll-margin-top: 100px; }
.a-text a { color: #5a4fd6; }
.a-text b { font-weight: 600; color: #11182f; }
.a-text ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.a-text li { position: relative; padding-left: 24px; }
.a-text li::before { content: ""; position: absolute; left: 1px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: #7171e8; }
.a-text figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.a-text figure img { display: block; width: 100%; border-radius: calc(32px * var(--sq)); corner-shape: squircle; background: #e3e6ef; }
/* кадры из макета (Figma 55:725): скругления уже в картинке — без своих углов и подложки; узкая карточка — по центру */
.a-text figure.flat img { border-radius: 0; corner-shape: round; background: none; }
.a-text figure.small { align-items: center; }
.a-text figure.small img { width: min(100%, 260px); }
.a-text figcaption, .a-small { font: 400 14px/1.45 var(--font); color: #6c6c84; }
.a-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.a-gal.square img { aspect-ratio: 1; object-fit: cover; }
.a-note { display: flex; }
.a-note::before { content: ""; flex: none; width: 20px; border-radius: calc(6px * var(--sq)); corner-shape: squircle; background: #f1f2f7; }
.a-note p { padding: 20px 24px; font: 400 17px/1.55 var(--font); color: #7171e8; }
.a-note a { color: #5a4fd6; }

/* таблицы — плотные, с тонкой рамкой и линиями между строками */
.a-table { overflow-x: auto; border: 1px solid #e6e7ef; border-radius: calc(16px * var(--sq)); corner-shape: squircle; background: #fff; }
.a-table table { width: 100%; border-collapse: collapse; font: 400 15px/1.4 var(--font); }
.a-table th { height: 36px; padding: 9px 16px; text-align: left; vertical-align: middle; background: #f6f6f9; font: 500 13px/1.4 var(--font); color: #6c6c84; white-space: nowrap; }
.a-table td { padding: 11px 16px; vertical-align: top; color: #2b2d42; }
.a-table td:first-child { font-weight: 500; color: #11182f; }
.a-table tr { border-bottom: 1px solid #e6e7ef; }
.a-table tbody tr:last-child { border-bottom: 0; }
.a-table tbody tr:hover { background: #f9f9fb; }

.a-cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.a-who { display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 16px; border-radius: calc(24px * var(--sq)); corner-shape: squircle; background: #fff; color: inherit; }
.a-who img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 15%; margin-bottom: 8px; border-radius: calc(18px * var(--sq)); corner-shape: squircle; background: #f1f2f7; }
.a-who b, .a-who small { padding: 0 8px; }
.a-who b { font: 600 16px/1.3 var(--font); }
.a-who small { font: 400 14px/1.4 var(--font); color: #6c6c84; }
.a-text a.a-who { color: inherit; }

/* награды: плитка предмета (как у карточек «кто есть кто»), иконка на светлой подложке, количество в углу */
.a-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.a-item { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 14px; border-radius: calc(24px * var(--sq)); corner-shape: squircle; background: #fff; color: inherit; }
.a-item span { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: calc(18px * var(--sq)); corner-shape: squircle; background: #f1f2f7; }
.a-item img { width: 72%; height: 72%; object-fit: contain; }
.a-item i { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: #fff; font: 600 14px/1.4 var(--font); font-style: normal; }
.a-item b { padding: 0 6px; font: 600 15px/1.3 var(--font); }
.a-text a.a-item { color: inherit; }
.a-text a.a-item:hover span { background: #e8e9f6; }

.a-evs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.a-ev { display: grid; grid-template-columns: 10px 1fr; gap: 4px 10px; padding: 14px 16px; border-radius: calc(16px * var(--sq)); corner-shape: squircle; background: #fff; }
.a-text a.a-ev { color: inherit; }
.a-ev i { grid-row: 1; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--c); }
.a-ev b { font: 500 16px/1.4 var(--font); }
.a-ev small { grid-column: 2; font: 500 13px/1.3 var(--font); color: #6c6c84; }

.a-widget { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 260px; padding: 32px; text-align: center;
  border-radius: calc(32px * var(--sq)); corner-shape: squircle; background: #2b2d42; color: #fff; }
.a-widget .lbl { font: 600 13px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--lime); }
.a-widget p { font: 500 18px/1.4 var(--font); }
.a-text .a-widget a { margin-top: 8px; padding: 12px 20px; border-radius: calc(14px * var(--sq)); corner-shape: squircle; background: var(--lime); color: #11182f; font: 600 15px/1 var(--font); }
.a-embed { display: block; width: 100%; height: 760px; border: 0; border-radius: calc(32px * var(--sq)); corner-shape: squircle; background: #fff; }   /* подборщик духов: /embed/perfume, высота — по сообщению страницы */
.a-src { margin-top: 38px; font: 400 14px/1.5 var(--font); color: #6c6c84; }
.a-text .a-src a { color: #6c6c84; text-decoration: underline; text-underline-offset: 2px; }

.a-page .feed { padding-top: 96px; }

@media (max-width: 1100px) {
  .a-head, .a-meta { grid-template-columns: 1fr; }
  .a-head { gap: 16px; padding-top: 32px; }
  .a-meta img, .a-meta .tags, .a-meta time { grid-column: 1; }
  .a-body { grid-template-columns: 1fr; }
  .a-toc { position: static; }
  .a-text { padding-right: 0; }
}
}
@media (max-width: 600px) {
  .a-top, .article { padding-left: 16px; padding-right: 16px; }
  .a-card .ttl { font-size: 36px; }
  .a-text { font-size: 17px; }
  .a-text .lede { font-size: 19px; }
  .a-text h2 { font-size: 26px; }
}