/* ============================================================
   СЕРДЦЕ ВЕРЫ — РЕДИЗАЙН-СЛОЙ (лаба)
   Грузится ПОСЛЕ style.css — переопределяет по каскаду.
   Регистр: сакральная тяжесть, золото-фольга, храмовые арки,
   пергамент, резные медальоны. НЕ трогает герой/прелоадер/сцену.
   ============================================================ */

/* ---- Playfair Display (самохостинг, foil-заголовки) ---- */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/playfair/playfair-400-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/playfair/playfair-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/playfair/playfair-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/playfair/playfair-600-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/playfair/playfair-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/playfair/playfair-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/playfair/playfair-700-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/playfair/playfair-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --foil: linear-gradient(176deg,#faf1cf 0%,#ecd6a0 24%,#d9c08a 48%,#b1894c 72%,#f4e2ad 100%);
  --foil-2: linear-gradient(160deg,#f3e6c4,#d9c08a 55%,#a97e42);
  --glow-warm: radial-gradient(ellipse 60% 60% at 50% 45%, rgba(217,192,138,.14), transparent 70%);
  --arch-fill-top:#191019;
  --arch-fill-bot:#0d0a0e;
}

/* ============================================================
   1. ЗОЛОТО-ФОЛЬГА НА ЗАГОЛОВКАХ (приём №1)
   Playfair Display + металлический градиент через background-clip.
   Герой/прелоадер НЕ трогаем (они над видео).
   ============================================================ */
.section-title,
.contents__title,
.author__name{
  font-family:'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-weight:600;
  letter-spacing:0.005em;
  color:#e7d3a0;                       /* фолбэк, если clip не поддержан */
  background-image:var(--foil);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 3px 14px rgba(150,100,30,.12));
}
/* лёгкое тёплое свечение за заголовком-блоком */
.author__head, .unique__head, .vitrazh__head, .order__head,
.contents__head, .qcards__head, .forwhom__head, .endorse__head{
  position:relative;
}
.author__head::after, .unique__head::after, .vitrazh__head::after, .order__head::after,
.contents__head::after, .qcards__head::after, .forwhom__head::after, .endorse__head::after{
  content:""; position:absolute; left:50%; top:52%;
  width:min(600px,92%); height:230px;
  transform:translate(-50%,-50%);
  background:var(--glow-warm);
  z-index:0; pointer-events:none;
}
.author__head > *, .unique__head > *, .vitrazh__head > *, .order__head > *,
.contents__head > *, .qcards__head > *, .forwhom__head > *, .endorse__head > *{
  position:relative; z-index:1;
}

/* ============================================================
   2. ТЁПЛАЯ ГЛУБИНА ФОНА (уходим от плоского чёрного)
   Мягкие янтарные радиалы в ключевых секциях.
   ============================================================ */
.author{
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(217,192,138,.06), transparent 58%),
    radial-gradient(100% 60% at 50% 100%, rgba(180,120,50,.05), transparent 60%),
    var(--black) !important;
}
/* «Заказать» — подложка из фото открытой книги (тёмное тёплое стекло) */
.order{
  position:relative;
  background-image:
    linear-gradient(180deg, rgba(10,7,5,.72) 0%, rgba(10,7,5,.42) 42%, rgba(10,7,5,.66) 100%),
    url('../assets/images/book-bg.webp') !important;
  background-size:cover !important;
  background-position:center 30% !important;
  background-repeat:no-repeat !important;
}
/* карточки заказа — матовое тёмное стекло поверх фото (читаемость + «поверхность») */
.order .order-opt{
  background:rgba(15,11,8,.64) !important;
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  border-color:rgba(217,192,138,.26) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.42);
}

/* ============================================================
   3. ОБЪЁМНАЯ ЗОЛОТАЯ КНОПКА (фаска + глянец)
   ============================================================ */
.btn-gold{
  background:linear-gradient(180deg,#f6e4b4 0%,#e6cf9c 44%,#d7bd85 100%);
  border:1px solid rgba(120,90,40,.5);
  color:#2a2018;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -3px 7px rgba(120,86,36,.30),
    0 12px 26px rgba(0,0,0,.42),
    0 0 0 1px rgba(217,192,138,.22);
}
.btn-gold:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -3px 7px rgba(120,86,36,.26),
    0 18px 42px rgba(0,0,0,.5),
    0 0 30px rgba(217,192,138,.34);
}

/* ============================================================
   4. «ОБ АВТОРЕ» — ФИГУРНАЯ ХРАМОВАЯ НИША (фигуристость)
   Портрет-медальон разрывает верх огивной арки.
   Разметка ниши (inline SVG арки) — в index.html.
   ============================================================ */
.niche{
  position:relative;
  max-width:560px;
  margin:0 auto;
  padding-top:52px;                    /* место под нависающий портрет */
}
.niche__portrait{
  position:absolute; top:0; left:50%;
  transform:translateX(-50%);
  width:132px; height:132px; border-radius:50%;
  padding:5px; z-index:3;
  background:linear-gradient(155deg,#f0d9a6 0%,#c9a763 45%,#8a5f2a 100%);
  box-shadow:0 16px 38px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.22);
}
.niche__portrait img{
  width:100%; height:100%; border-radius:50%;
  object-fit:cover; display:block;
  border:2px solid rgba(12,9,12,.65);
}
/* арка и тело — единая заливка (без шва) */
.niche__cap{ display:block; line-height:0; margin-bottom:-1px; position:relative; z-index:1; }
.niche__cap svg{ width:100%; height:auto; display:block; }
.niche__cap .arch-fill{ fill:#140d15; }
.niche__cap .arch-line{
  fill:none; stroke:rgba(217,192,138,.5);
  stroke-width:1.4; vector-effect:non-scaling-stroke;
}
.niche__body{
  position:relative; z-index:1; margin-top:0;
  border:1.4px solid rgba(217,192,138,.5); border-top:none;
  border-radius:0 0 18px 18px;
  background:#140d15;
  padding: clamp(1rem,3vw,1.6rem) clamp(1.5rem,5vw,2.8rem) clamp(2rem,5vh,3rem);
  text-align:center;
  box-shadow: 0 34px 80px rgba(0,0,0,.5);
}
.niche__eyebrow{
  font-family:"Onest",sans-serif;
  font-size:11px; font-weight:600; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--gold); opacity:.8; margin-bottom:.65rem;
}
.niche .author__name{ text-align:center; margin:0 0 1.3rem; }
.niche .author__bio p{ text-align:left; }
/* тонкий золотой разделитель под именем */
.niche__rule{
  width:64px; height:0; margin:0 auto 1.4rem;
  border-top:1px solid rgba(217,192,138,.4);
  position:relative;
}
.niche__rule::after{
  content:""; position:absolute; left:50%; top:0; transform:translate(-50%,-50%) rotate(45deg);
  width:6px; height:6px; background:var(--gold); opacity:.75;
}

/* ============================================================
   5. «ЧИТАТЬ ФРАГМЕНТ» — КРАФТОВАЯ ПЕЧАТЬ (кнопка-картинка)
   ============================================================ */
.btn-seal{
  display:inline-flex; align-items:center; gap:1rem;
  padding:.85em 1.5em .85em 1em;
  border-radius:14px; cursor:pointer; text-decoration:none;
  border:1px solid rgba(217,192,138,.5);
  background:linear-gradient(180deg, rgba(32,23,16,.92), rgba(14,11,10,.92));
  box-shadow:
    inset 0 1px 0 rgba(217,192,138,.20),
    inset 0 0 0 1px rgba(217,192,138,.10),
    0 16px 40px rgba(0,0,0,.5);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-seal:hover{
  transform:translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(217,192,138,.24), inset 0 0 0 1px rgba(217,192,138,.14), 0 22px 50px rgba(0,0,0,.58), 0 0 26px rgba(217,192,138,.18);
}
.btn-seal__wax{
  flex:none; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 38% 32%, #d3ab5f, #8a5a22 68%, #5f3c15 100%);
  box-shadow: inset 0 2px 4px rgba(255,235,190,.4), inset 0 -4px 8px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.4);
}
.btn-seal__wax svg{ width:24px; height:24px; color:#3a2a12; }
.btn-seal__tx{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; }
.btn-seal__label{
  font-family:'Playfair Display',serif; font-weight:600; font-size:1.12rem;
  color:#e7d3a0; background-image:var(--foil); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.btn-seal__sub{
  font-family:"Onest",sans-serif; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-dim); margin-top:2px;
}

/* ============================================================
   6. БОТЫ — РЕЗНЫЕ МЕДАЛЬОНЫ-ПЕЧАТИ (кнопки-картинки)
   Логотип мессенджера разрывает верх кольца, foil-подпись внутри.
   ============================================================ */
.medal-row{
  display:flex; flex-wrap:wrap; gap:clamp(1.4rem,4vw,2.4rem);
  justify-content:flex-start; align-items:flex-start;
  margin:.4rem 0 .2rem;
}
.medallion{
  position:relative; flex:none;
  width:120px; height:120px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
  text-decoration:none; text-align:center;
  margin-top:16px;                     /* место под выступающий глиф */
  background:
    radial-gradient(circle at 50% 30%, rgba(217,192,138,.12), transparent 58%),
    radial-gradient(circle at 50% 115%, rgba(0,0,0,.55), transparent 55%),
    #100c10;
  border:2px solid rgba(217,192,138,.5);
  box-shadow:
    inset 0 2px 6px rgba(255,235,190,.14),
    inset 0 -9px 22px rgba(0,0,0,.62),
    0 16px 38px rgba(0,0,0,.5);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.medallion::before{                    /* внутреннее кольцо */
  content:""; position:absolute; inset:9px; border-radius:50%;
  border:1px solid rgba(217,192,138,.26);
}
.medallion:hover{
  transform:translateY(-3px);
  border-color:rgba(217,192,138,.75);
  box-shadow: inset 0 2px 6px rgba(255,235,190,.18), inset 0 -9px 22px rgba(0,0,0,.6), 0 22px 48px rgba(0,0,0,.58), 0 0 26px rgba(217,192,138,.22);
}
.medallion__glyph{                     /* выступает над кольцом */
  position:absolute; top:0; left:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  box-shadow:0 6px 16px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.35);
}
.medallion__glyph svg{ width:24px; height:24px; display:block; }
.medallion--tg .medallion__glyph{ background:linear-gradient(160deg,#37bbfe,#1c8fd6); }
.medallion--tg .medallion__glyph svg{ color:#fff; }
.medallion--max .medallion__glyph{ background:linear-gradient(160deg,#8a7ff0,#5b46d6); }
.medallion--max .medallion__glyph svg{ color:#fff; }
.medallion__label{
  font-family:'Playfair Display',serif; font-weight:600; font-size:.95rem; margin-top:14px;
  color:#e7d3a0; background-image:var(--foil); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.medallion__sub{
  font-family:"Onest",sans-serif; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-dim);
}

/* ============================================================
   7. КНИЖНОЕ ОФОРМЛЕНИЕ ПРОСТЫНЕЙ ТЕКСТА
   Буквица (drop-cap) на первом абзаце + лид-абзац ярче.
   Разбивает «стены текста», задаёт книжный ритм.
   ============================================================ */
.questions__cols > p:first-child::first-letter,
.unique__body > p:first-child::first-letter{
  float:left;
  font-family:'Playfair Display', Georgia, serif;
  font-weight:700;
  font-size:3.4em; line-height:.78;
  padding:.06em .14em 0 0; margin-top:.02em;
  color:#e7d3a0;
  background-image:var(--foil); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
/* лид-абзац (первый) — чуть крупнее и светлее, редакторский вход.
   В .questions__cols на десктопе 2 колонки — там лид НЕ увеличиваем (баланс),
   увеличиваем только одноколоночный .unique__body */
.unique__body > p:first-child{
  font-size:clamp(1.14rem,1.8vw,1.34rem);
  line-height:1.7;
  color:rgba(243,240,234,.97);
}
/* воздух между абзацами простыней — чуть больше (одноколоночный блок) */
.unique__body > p{ margin-bottom:1.15em; }

/* ============================================================
   8. МОБИЛЬНЫЕ
   ============================================================ */
@media (max-width:760px){
  .niche{ max-width:440px; padding-top:50px; }
  .niche__portrait{ width:112px; height:112px; }
  .niche .author__bio p{ text-align:left; }
  .medal-row{ justify-content:center; }
  .btn-seal{ width:100%; justify-content:center; }
}
@media (max-width:420px){
  .niche__portrait{ width:100px; height:100px; }
}

/* ============================================================
   9. ДЕСКТОП: «Об авторе» — широкая ниша (не вертикальная колонка)
   Био в 2 колонки = книжный разворот, блок становится горизонтальным.
   ============================================================ */
@media (min-width:900px){
  .niche{ max-width:840px; }
  .niche__portrait{ width:150px; height:150px; }
  .niche__body{ padding-left:clamp(2.4rem,5vw,3.6rem); padding-right:clamp(2.4rem,5vw,3.6rem); }
  .niche .author__name{ font-size:clamp(1.7rem,2.4vw,2.15rem); }
  .niche .author__bio{ column-count:2; column-gap:clamp(2rem,3.4vw,3rem); }
  .niche .author__bio p{ text-align:left; }
}

/* ============================================================
   10. МАНУСКРИПТ / ПЕРГАМЕНТ — светлая тёплая карточка (контраст «страница из книги»)
   ============================================================ */
.manu{
  position:relative;
  max-width:640px; margin:clamp(2.8rem,6vh,4rem) auto clamp(1.6rem,4vh,2.4rem);
  border-radius:6px;
  /* валики теперь сверху/снизу → горизонтальные поля можно ужать (важно для телефона),
     вертикальные — увеличить, чтобы текст не заезжал под валик */
  padding:clamp(2.8rem,6vw,3.6rem) clamp(1.5rem,5vw,2.6rem);
  background:radial-gradient(130% 90% at 50% 0%, #f3ecda 0%, #e7ddc4 72%);
  border:1px solid rgba(150,100,40,.42);
  box-shadow:
    0 30px 72px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,251,238,.5),
    inset 0 0 70px rgba(170,130,70,.10),
    inset 0 27px 26px -18px rgba(90,65,25,.55),    /* ложбинка под верхним валиком */
    inset 0 -27px 26px -18px rgba(90,65,25,.55);   /* и над нижним */
  text-align:center; color:#2a2018;
}
/* валики свитка — СВЕРХУ и СНИЗУ: свиток раскрывается вертикально.
   ось валика горизонтальна → блик по центру задаёт вертикальный (180deg) градиент;
   тёмные торцы (90deg-слой поверх) читаются как свёрнутые концы, а не ровная выпуклость. */
.manu::before, .manu::after{
  content:""; position:absolute; left:-7px; right:-7px; height:25px;
  border-radius:13px;
  background:
    linear-gradient(90deg,#5c4726 0%,#6b5330 2.5%,rgba(120,95,55,0) 8%,rgba(120,95,55,0) 92%,#6b5330 97.5%,#5c4726 100%),
    linear-gradient(180deg,#7d673c 0%,#d9c898 24%,#f7efd6 50%,#cbb884 76%,#7d673c 100%);
}
.manu::before{
  top:-13px;
  box-shadow:0 0 0 1px rgba(110,80,35,.42), 0 9px 16px -5px rgba(0,0,0,.5),
    inset 0 2px 3px rgba(255,251,235,.6), inset 0 -3px 6px rgba(80,58,22,.55);
}
.manu::after{
  bottom:-13px;
  box-shadow:0 0 0 1px rgba(110,80,35,.42), 0 -9px 16px -5px rgba(0,0,0,.5),
    inset 0 2px 3px rgba(255,251,235,.6), inset 0 -3px 6px rgba(80,58,22,.55);
}
.manu__eyebrow{
  font-family:"Onest",sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:#8f5a1e; margin:0 0 1rem;
}
/* .manu .manu__text — специфичность 0,2,0 бьёт контейнерные `.questions__text p`/`.unique__body p` (0,1,1);
   + !important на шрифт/цвет как страховка (карточка живёт внутри чужих текстовых секций) */
.manu .manu__text{
  margin:0;
  font-family:'Lora', Georgia, serif !important;
  font-weight:400 !important;
  font-style:italic !important;
  font-size:clamp(1.14rem,1.9vw,1.4rem); line-height:1.78;
  color:#2b2119 !important;
}

/* ============================================================
   11. ПЕРГАМЕНТ — карусель цитат + акцент «А главное»
   ============================================================ */
/* Каждая карточка-цитата = манускриптная страница (в карусели видно 1–3) */
.qcard{
  background:radial-gradient(130% 100% at 50% 0%, #f3ecda 0%, #e6dcc2 76%) !important;
  border:1px solid rgba(150,100,40,.42) !important;
  box-shadow:0 20px 46px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,251,238,.5), inset 0 0 46px rgba(170,130,70,.08) !important;
}
.qcard__mark{ color:rgba(150,100,40,.55) !important; }
.qcard__text{ color:#2b2119 !important; font-weight:400 !important; }

/* «А главное …» — тот же .manu, но охряный рубрик-лид (прямой, не курсив) */
.manu .lead{ color:#8f5a1e !important; font-weight:600 !important; font-style:normal !important; }

/* ============================================================
   12. «ПОСЛЕ ПРОЧТЕНИЯ» — созвездие связанных душ
   ============================================================ */
.after-read{ position:relative; overflow:hidden; }
.after-read__stars{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55;
  /* маска: глуше под текстом (центр), ярче к краям — текст читаем */
  -webkit-mask-image: radial-gradient(ellipse 64% 82% at 50% 50%, transparent 22%, rgba(0,0,0,.36) 50%, #000 88%);
          mask-image: radial-gradient(ellipse 64% 82% at 50% 50%, transparent 22%, rgba(0,0,0,.36) 50%, #000 88%);
}
.after-read__stars .soulnet{ width:100%; height:100%; display:block; }
.after-read::before{   /* только тёплое свечение (за всем) */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse 46% 60% at 50% 46%, rgba(217,192,138,.07), transparent 62%);
}
.after-read__inner{ position:relative; z-index:1; }
/* тёмная подложка ПОД текстом поверх созвездия — чёткая читаемость заголовка/текста */
.after-read__inner::before{
  content:""; position:absolute; inset:-16% -6% -12%; z-index:-1; pointer-events:none;
  background: radial-gradient(ellipse 74% 84% at 50% 47%, rgba(4,4,6,.88) 30%, rgba(4,4,6,.52) 56%, transparent 76%);
}
.after-read__cta{ text-align:center; }
/* мерцание ярких узлов — «живое» небо */
@keyframes snTwinkle{ 0%,100%{opacity:1} 50%{opacity:.4} }
.soulnet .sn-star{ animation:snTwinkle 4.6s ease-in-out infinite; }
.soulnet .sn-star:nth-of-type(3n){ animation-duration:6.2s; animation-delay:1.1s; }
.soulnet .sn-star:nth-of-type(3n+1){ animation-duration:5.2s; animation-delay:.5s; }
@media (prefers-reduced-motion: reduce){ .soulnet .sn-star{ animation:none; } }
/* Мобилка: колонка узкая → боковые поля со звёздами схлопываются.
   Показываем звёзды в пустых зонах СВЕРХУ и СНИЗУ (над кикером / под кнопкой),
   под текстом — приглушаем маской, читаемость держит тёмная подложка. */
@media (max-width:640px){
  .after-read__stars{
    opacity:.85;
    -webkit-mask-image: linear-gradient(180deg,#000 0%,#000 15%,rgba(0,0,0,.14) 35%,rgba(0,0,0,.14) 65%,#000 85%,#000 100%);
            mask-image: linear-gradient(180deg,#000 0%,#000 15%,rgba(0,0,0,.14) 35%,rgba(0,0,0,.14) 65%,#000 85%,#000 100%);
  }
  .after-read__inner::before{
    inset:-6% -8% -6%;
    background: radial-gradient(ellipse 98% 60% at 50% 50%, rgba(4,4,6,.82) 44%, rgba(4,4,6,.4) 68%, transparent 86%);
  }
}