/* ============================================================
   БЛОГ-ЖУРНАЛ 2026 — раздел /blog, /blog/post, /blog/video
   Отдельный файл поверх chaster-2026.css (его правят другие
   сессии — туда не лезем). Подключается только на страницах
   блога через AppAssetBlog (зависит от AppAssetChaster,
   поэтому грузится ПОСЛЕ основного css и перекрывает его).

   Стиль — газетно-журнальный: засечный шрифт для текста
   и заголовков, тонкие линейки, буквица, узкая колонка
   для чтения и боковая полоса с товаром из статьи.
   Палитра своя, из ветки «Японская точность»: индиго
   вместо красного (красный в этом дизайне занят скидками
   и знаком-ханко), IBM Plex Serif — засечная родня IBM Plex Sans.
   ============================================================ */

:root{
  --jr-serif:'IBM Plex Serif','Iowan Old Style',Georgia,'Times New Roman',serif;
  --jr-measure:748px;   /* ширина колонки чтения */
  --jr-aside:308px;     /* ширина боковой полосы */
}

/* ============ ОБЩЕЕ ДЛЯ РАЗДЕЛА ============ */
.jr-wrap{max-width:1180px;margin:0 auto;padding:0 var(--s6)}

/* «шапка раздела» — тонкая строка над заголовком страницы */
.jr-rubric{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);display:block;
}

/* линейка «двойное правило» — фирменный приём журнальной вёрстки */
.jr-rule{border-top:3px double var(--ink)}

/* заголовок блока: курсивная антиква по центру под двойной линейкой */
.jr-block{margin-top:var(--s12);padding-top:var(--s6);border-top:3px double var(--ink)}
.jr-block>h2{
  font-family:var(--jr-serif);font-style:italic;font-weight:600;
  font-size:26px;line-height:1.2;text-align:center;margin-bottom:var(--s5);
}
.jr-block>h2 .cnt{font-style:normal;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.16em;color:var(--ink-3);display:block;margin-top:6px}

/* ============ СТРАНИЦА СТАТЬИ ============ */
.jr-page{padding:var(--s8) 0 var(--s16)}
.jr-post{
  display:grid;grid-template-columns:minmax(0,1fr) var(--jr-aside);
  gap:var(--s16);align-items:start;
}
.jr-main{min-width:0;max-width:var(--jr-measure)}

/* --- «шапка» статьи --- */
.jr-hero{margin-bottom:var(--s8)}
.jr-hero .jr-kicker{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:var(--s4);
}
.jr-h1{
  font-family:var(--jr-serif);font-weight:600;
  font-size:clamp(30px,4.4vw,50px);line-height:1.06;letter-spacing:-.018em;
  color:var(--ink);
}
.jr-deck{
  font-family:var(--jr-serif);font-style:italic;
  font-size:clamp(17px,1.7vw,21px);line-height:1.45;color:var(--ink-2);
  margin-top:var(--s4);max-width:38em;
}
.jr-meta{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);
  margin-top:var(--s6);padding:var(--s3) 0;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.jr-meta b{color:var(--ink);font-weight:500}

/* --- текст статьи --- */
.jr-body{
  font-family:var(--jr-serif);font-size:18px;line-height:1.75;color:var(--ink);
  margin-top:var(--s8);
}
.jr-body p{margin:0 0 var(--s5);text-align:justify;-webkit-hyphens:auto;hyphens:auto}
/* буквица — только если статья начинается абзацем (у старых постов бывает иначе) */
.jr-body>p:first-child::first-letter{
  float:left;font-weight:600;font-size:68px;line-height:.82;
  margin:8px 10px 0 0;color:var(--accent);
}
/* старые статьи носят в себе inline font-size (17px и т.п.) — приводим к единому кеглю */
.jr-body p[style*="font-size"]{font-size:inherit!important}

.jr-body h2{
  font-family:var(--jr-serif);font-size:27px;font-weight:600;line-height:1.2;
  color:var(--ink);margin:var(--s10) 0 var(--s4);
  padding-top:var(--s4);border-top:1px solid var(--line);
}
.jr-body h3{font-family:var(--jr-serif);font-size:21px;font-weight:600;line-height:1.25;
  color:var(--ink);margin:var(--s8) 0 var(--s3)}
.jr-body h4{font-family:var(--jr-serif);font-size:18px;font-weight:600;margin:var(--s6) 0 var(--s2)}
.jr-body ul,.jr-body ol{margin:0 0 var(--s5);padding-left:var(--s6)}
.jr-body li{margin-bottom:var(--s2)}
.jr-body a{color:var(--accent);border-bottom:1px solid var(--line-strong);transition:border-color var(--tr)}
.jr-body a:hover{border-bottom-color:var(--accent)}
.jr-body strong,.jr-body b{font-weight:600;color:var(--ink)}
.jr-body blockquote{
  margin:var(--s8) 0;padding:var(--s4) var(--s6);
  background:var(--accent-tint);border-left:3px solid var(--accent);
  font-style:italic;
}
.jr-body hr{border:none;border-top:1px solid var(--line);margin:var(--s8) 0}

/* картинки и подписи */
.jr-body img{
  display:block;max-width:100%;height:auto;margin:var(--s6) auto;
  border:1px solid var(--line);background:var(--bg-alt);
}
.jr-body figure{margin:var(--s8) 0;text-align:center}
.jr-body figure img{margin:0 auto}
.jr-body figcaption{
  font-family:var(--jr-serif);font-style:italic;font-size:14px;line-height:1.45;
  color:var(--ink-3);margin-top:var(--s3);padding-top:var(--s2);
  border-top:1px solid var(--line);display:inline-block;
}
.jr-body iframe{max-width:100%;margin:var(--s6) auto;display:block}

/* таблицы: у новых статей рамки заданы в самом тексте (inline),
   поэтому здесь — то, чего inline не задаёт: шрифт, фон шапки, зебра */
.jr-body table{
  width:100%;border-collapse:collapse;margin:var(--s6) 0;
  font-family:var(--sans);font-size:var(--t-base);line-height:1.5;
}
.jr-body table th,.jr-body table td{
  border:1px solid var(--line);padding:9px 13px;text-align:left;vertical-align:top;
}
.jr-body table th{background:var(--bg-alt);font-weight:600;color:var(--ink)}
.jr-body table tbody tr:nth-child(even) td{background:var(--bg-alt)}
.jr-body table td:first-child{color:var(--ink-2)}
.jr-body div[style*="overflow-x"]{margin:var(--s6) 0}

/* --- поделиться --- */
.jr-share{
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  margin-top:var(--s8);padding-top:var(--s4);border-top:1px solid var(--line);
}
.jr-share .k{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}

/* --- теги --- */
.jr-tags{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-top:var(--s6)}
.jr-tags a{font-family:var(--mono);font-size:var(--t-s);color:var(--accent);letter-spacing:.02em}
.jr-tags a:hover{text-decoration:underline}

/* --- «часы из статьи»: сетка карточек в узкой колонке --- */
.jr-main .products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* --- «читайте также» --- */
.jr-more-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s10)}
.jr-more-item{
  display:flex;gap:var(--s4);padding:var(--s4) 0;border-top:1px solid var(--line);
  align-items:flex-start;
}
.jr-more-item:hover .jr-more-title{color:var(--accent)}
.jr-more-thumb{
  display:block;width:96px;height:68px;flex:0 0 96px;overflow:hidden;
  background:var(--bg-alt);border:1px solid var(--line);
}
.jr-more-thumb img{width:100%;height:100%;object-fit:cover}
.jr-more-date{display:block;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;color:var(--ink-3)}
.jr-more-title{
  display:block;font-family:var(--jr-serif);font-size:16px;font-weight:600;line-height:1.3;
  margin-top:5px;transition:color var(--tr);
}

/* ============ БОКОВАЯ ПОЛОСА ============ */
.jr-aside{min-width:0;font-size:var(--t-s)}
.jr-sticky{position:sticky;top:84px}

.jr-buy{background:var(--ink);color:#fff;padding:var(--s5);position:relative}
.jr-buy::before{
  content:'В НАЛИЧИИ';position:absolute;top:-9px;left:var(--s5);
  background:var(--accent);color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;padding:2px 8px;
}
.jr-buy-img{
  aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;
  overflow:hidden;margin-bottom:var(--s4);
}
.jr-buy-img img{width:100%;height:100%;object-fit:contain}
.jr-buy-name{display:block;font-family:var(--jr-serif);font-size:17px;font-weight:600;line-height:1.25;color:#fff}
.jr-buy-name:hover{color:#C9D0D8}
.jr-buy-price{display:flex;align-items:baseline;gap:var(--s2);margin-top:var(--s3)}
.jr-buy-price .now{font-size:21px;font-weight:600}
.jr-buy-price .old{font-size:var(--t-s);color:var(--ink-3);text-decoration:line-through}
.jr-buy-note{font-size:var(--t-xs);color:var(--ink-3);margin-top:var(--s2);line-height:1.5}
.jr-buy-btn{
  display:block;text-align:center;margin-top:var(--s4);
  background:var(--accent);color:#fff;padding:var(--s3) var(--s4);
  font-size:var(--t-s);font-weight:600;letter-spacing:.03em;
  transition:background var(--tr);
}
.jr-buy-btn:hover{background:#31479A}

.jr-aside-h{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:2px solid var(--ink);padding-bottom:var(--s2);
  margin:var(--s8) 0 0;
}
.jr-mini{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-top:1px solid var(--line)}
.jr-mini:first-of-type{border-top:none}
.jr-mini-img{
  width:56px;height:56px;flex:0 0 56px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.jr-mini-img img{width:100%;height:100%;object-fit:contain}
.jr-mini-name{display:block;font-size:var(--t-s);font-weight:500;line-height:1.3}
.jr-mini-price{display:block;font-size:var(--t-s);font-weight:600;color:var(--accent);margin-top:3px}
.jr-mini:hover .jr-mini-name{color:var(--accent)}

.jr-side-post{display:block;padding:var(--s3) 0;border-top:1px solid var(--line)}
.jr-side-post:first-of-type{border-top:none}
.jr-side-post .d{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-3)}
.jr-side-post .t{display:block;font-family:var(--jr-serif);font-size:15px;font-weight:600;line-height:1.3;margin-top:3px}
.jr-side-post:hover .t{color:var(--accent)}

.jr-side-all{
  display:inline-block;margin-top:var(--s4);
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);
}
.jr-side-all:hover{text-decoration:underline}

/* ============ ЛЕНТА БЛОГА ============ */
.jr-head{padding:var(--s12) 0 var(--s8);border-bottom:1px solid var(--ink)}
.jr-head h1{
  font-family:var(--jr-serif);font-weight:600;
  font-size:clamp(34px,5vw,58px);line-height:1.05;letter-spacing:-.02em;
  margin-top:var(--s3);
}
.jr-head .jr-deck{margin-left:auto;margin-right:auto;text-align:center;max-width:52ch}
.jr-head-c{text-align:center}
.jr-stats{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s10);
  margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line);
}
.jr-stat{text-align:center}
a.jr-stat .v{transition:color var(--tr)}
a.jr-stat:hover .v,a.jr-stat:hover .k{color:var(--accent)}
.jr-stat .v{font-family:var(--jr-serif);font-size:24px;font-weight:600;line-height:1}
.jr-stat .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-top:5px}

/* ведущая статья ленты */
.jr-lead{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--s10);padding:var(--s10) 0;border-bottom:1px solid var(--line);align-items:center;
}
.jr-lead-img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt);border:1px solid var(--line)}
.jr-lead-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--tr)}
.jr-lead:hover .jr-lead-img img{transform:scale(1.02)}
.jr-lead h2{
  font-family:var(--jr-serif);font-size:clamp(24px,2.8vw,34px);font-weight:600;
  line-height:1.12;letter-spacing:-.015em;margin-top:var(--s3);transition:color var(--tr);
}
.jr-lead:hover h2{color:var(--accent)}
.jr-lead p{font-size:var(--t-m);color:var(--ink-2);line-height:1.6;margin-top:var(--s3)}
.jr-lead .jr-more-link{margin-top:var(--s4)}

.jr-feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s10) var(--s8);
  padding:var(--s10) 0}
/* отбивка от подвала: без неё пагинация упирается прямо в него */
.jr-wrap>.pager{margin-bottom:var(--s16)}
.jr-wrap>.jr-feed:last-child{padding-bottom:var(--s16)}
.jr-item{display:block}
.jr-item-img{aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt);border:1px solid var(--line);
  margin-bottom:var(--s3)}
.jr-item-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--tr)}
.jr-item:hover .jr-item-img img{transform:scale(1.03)}
.jr-line{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
}
.jr-line .cat{color:var(--accent)}
.jr-line .dot{color:var(--line-strong)}
.jr-item h3{
  font-family:var(--jr-serif);font-size:20px;font-weight:600;line-height:1.2;
  margin-top:var(--s2);transition:color var(--tr);
}
.jr-item:hover h3{color:var(--accent)}
.jr-item p{font-size:var(--t-s);color:var(--ink-2);line-height:1.6;margin-top:var(--s2)}
.jr-more-link{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);display:inline-block;
}

/* ============ ВИДЕО ============ */
/* страница ролика — одна колонка по центру, шире колонки статьи: нужен плеер */
.jr-single{max-width:900px;margin:0 auto}
.jr-video-stage{position:relative;padding-top:56.25%;background:var(--ink);margin-top:var(--s8);
  border:1px solid var(--line)}
.jr-video-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;margin:0}
.jr-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--bg-alt);cursor:pointer;border:0;padding:0;width:100%;
}
.jr-play img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.jr-play .mark{
  position:relative;width:74px;height:74px;border-radius:50%;
  background:rgba(16,20,24,.72);display:flex;align-items:center;justify-content:center;
  transition:background var(--tr);
}
.jr-play .mark::after{
  content:'';border-style:solid;border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent #fff;margin-left:5px;
}
.jr-play:hover .mark{background:var(--accent)}
.jr-video-note{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;color:var(--ink-3);
  margin-top:var(--s3);text-transform:uppercase}

.jr-vitem .jr-item-img{aspect-ratio:16/9;position:relative}
.jr-vitem .jr-item-img::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:rgba(16,20,24,.66);
  transition:background var(--tr);
}
.jr-vitem .jr-item-img::before{
  content:'';position:absolute;left:50%;top:50%;z-index:2;
  transform:translate(-40%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
}
.jr-vitem:hover .jr-item-img::after{background:var(--accent)}

/* ============ АДАПТИВ ============ */
@media (max-width:1100px){
  .jr-post{grid-template-columns:1fr;gap:var(--s10)}
  .jr-main{max-width:none}
  .jr-sticky{position:static}
  .jr-aside{max-width:var(--jr-measure)}
}
@media (max-width:900px){
  .jr-feed{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jr-lead{grid-template-columns:1fr;gap:var(--s5)}
  .jr-main .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .jr-wrap{padding:0 var(--s4)}
  .jr-page{padding:var(--s6) 0 var(--s12)}
  .jr-body{font-size:17px;line-height:1.7;margin-top:var(--s6)}
  .jr-body p{text-align:left;hyphens:none}
  .jr-body>p:first-child::first-letter{font-size:54px;margin:6px 8px 0 0}
  .jr-body h2{font-size:23px;margin-top:var(--s8)}
  .jr-body h3{font-size:19px}
  .jr-body table{font-size:var(--t-s)}
  .jr-body table th,.jr-body table td{padding:7px 9px}
  .jr-meta{gap:var(--s2) var(--s4);font-size:11px;letter-spacing:.08em}
  .jr-feed{grid-template-columns:1fr;gap:var(--s8);padding:var(--s8) 0}
  .jr-wrap>.pager{margin-bottom:var(--s12)}
  .jr-more-list{grid-template-columns:1fr}
  .jr-head{padding:var(--s8) 0 var(--s6)}
  .jr-stats{gap:var(--s6)}
  .jr-block>h2{font-size:22px}
  .jr-main .products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
}

/* крошки на странице статьи: заголовок в последней крошке длинный,
   без переноса он растягивал страницу на телефоне (дефект 25.09.2026) */
.jr-page .crumbs,.jr-head .crumbs{max-width:100%;overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){
  .jr-lead-img img,.jr-item-img img{transition:none}
}