/* ============================================================
 * NEWS — газетная тема 50-х. Финальная версия.
 * Фон: жёлтая бумага + картинка bg.jpg в тумане сверху
 * ============================================================ */

:root{
  --paper:      #f2e8cf;
  --paper-2:    #f7efd8;
  --paper-3:    #e8dcba;
  --ink:        #1f1a12;
  --ink-2:      #4a4034;
  --ink-3:      #857760;
  --rule:       #c2b295;
  --rule-2:     #a89878;
  --acc:        #8b1e1e;
  --acc-2:      #a86a1e;
  --link:       #3a4a7a;
}

*{box-sizing:border-box}

/* ---------- ФОН: жёлтая бумага + колонки + пятна ---------- */

body.news-page{
  margin:0;
  color:var(--ink);
  font:15px/1.6 Georgia,"Times New Roman","PT Serif",serif;
  -webkit-font-smoothing:antialiased;
  position:relative;
  min-height:100vh;

  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(120,90,40,.05) 0px,
      rgba(120,90,40,.05) 1px,
      transparent 1px,
      transparent 110px),
    repeating-linear-gradient(0deg,
      rgba(120,90,40,.035) 0px,
      rgba(120,90,40,.035) 1px,
      transparent 1px,
      transparent 16px),
    radial-gradient(ellipse 600px 400px at 15% 20%, rgba(180,140,60,.18), transparent 70%),
    radial-gradient(ellipse 700px 500px at 85% 70%, rgba(160,120,50,.15), transparent 70%),
    radial-gradient(ellipse 500px 400px at 50% 95%, rgba(150,110,40,.12), transparent 70%);
  background-attachment:fixed;
}

/* ---------- КАРТИНКА bg.jpg — поверх бумаги, под карточками ---------- */
/* бумага остаётся видна сквозь картинку на 15% */

body.news-page::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url("/NEWS/bg.jpg");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  opacity:.25;
}

/* ---------- КОНТЕНТ — поверх всего ---------- */

.news-wrap{
  position:relative;
  z-index:1;
  max-width:780px;
  margin:0 auto;
  padding:28px 24px 90px;
}

/* ============================================================
 * ШАПКА ГАЗЕТЫ
 * ============================================================ */

.news-masthead{
  text-align:center;
  margin-bottom:26px;
  padding-bottom:6px;
  border-top:1px solid var(--ink);
  padding-top:8px;
}

.news-masthead::after{
  content:"";
  display:block;
  height:0;
  border-top:3px double var(--ink);
  margin-top:0;
}

.news-masthead .news-logo{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:900;
  font-size:64px;
  line-height:.95;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0;
  padding:0;
  display:block;
}

.news-masthead .news-sub{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-2);
  padding:8px 0;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--ink);
  margin-top:14px;
}

.news-back{
  margin:0 0 20px;
  text-align:right;
}
.news-back a{
  color:var(--ink-2);
  text-decoration:none;
  font-size:12px;
  font-style:italic;
  letter-spacing:.05em;
}
.news-back a:hover{color:var(--acc);text-decoration:underline}

.news-h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:24px;
  margin:0 0 20px;
  font-weight:900;
  border-bottom:1px solid var(--rule-2);
  padding-bottom:10px;
}

/* ============================================================
 * ТАБЫ (рубрики)
 * ============================================================ */

.news-tabs{
  display:flex;gap:0;flex-wrap:wrap;
  margin-bottom:26px;
  justify-content:center;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding:4px 0;
}
.news-tabs a{
  padding:5px 14px;
  background:transparent;
  color:var(--ink-2);
  text-decoration:none;
  font-size:12px;
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  border:0;
  border-radius:0;
  border-right:1px solid var(--rule-2);
  transition:color .15s;
}
.news-tabs a:last-child{border-right:0}
.news-tabs a:hover{color:var(--acc);text-decoration:underline}
.news-tabs a.on{
  color:var(--ink);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:4px;
}
.news-tabs-admin{
  color:var(--acc) !important;
  font-weight:700 !important;
}

/* ============================================================
 * ПОСТ — газетная колонка
 * ============================================================ */

.news-card{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  margin:0 0 34px 0;
  box-shadow:none;
}

.news-card + .news-card{
  border-top:1px solid var(--rule-2);
  padding-top:30px;
  position:relative;
}
.news-card + .news-card::before{
  content:"◆";
  position:absolute;
  top:-9px;
  left:50%;
  transform:translateX(-50%);
  background:var(--paper);
  padding:0 12px;
  color:var(--rule-2);
  font-size:11px;
  letter-spacing:.4em;
}

.news-card-head{
  display:flex;gap:12px;align-items:center;
  margin-bottom:14px;
}
.news-ava{
  width:36px;height:36px;flex:0 0 36px;
  border-radius:50%;overflow:hidden;
  background:var(--paper-3);
  border:1px solid var(--rule);
  filter:grayscale(.3) sepia(.15);
}
.news-ava img{width:100%;height:100%;object-fit:cover;display:block}
.news-ava .ava-letter{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);font-weight:700;font-family:Georgia,serif;
}

.news-meta{min-width:0}
.news-author{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink);
}
.news-date{
  color:var(--ink-3);
  font-size:12px;
  margin-top:2px;
  font-style:italic;
}
.news-type{
  padding:0;
  background:transparent;
  color:var(--ink-3);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-style:normal;
}
.news-type::before{content:"· "}
.news-type-repost,
.news-type-liked,
.news-type-note{background:transparent}

.news-title{
  font-family:Georgia,"Times New Roman",serif;
  font-size:30px;
  line-height:1.15;
  margin:4px 0 12px;
  font-weight:900;
  letter-spacing:-.01em;
}
.news-title a{
  color:var(--ink);
  text-decoration:none;
}
.news-title a:hover{
  color:var(--acc);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.news-body{
  color:var(--ink);
  font-size:15.5px;
  line-height:1.65;
  font-family:Georgia,"Times New Roman",serif;
  text-align:justify;
  hyphens:auto;
}
.news-body p{margin:0 0 12px}
.news-body p:first-of-type::first-letter{
  font-family:Georgia,"Times New Roman",serif;
  font-size:44px;
  font-weight:900;
  float:left;
  line-height:.9;
  margin:4px 8px 0 0;
  color:var(--ink);
}
.news-body a{color:var(--link);text-decoration:underline}

.news-image{margin:14px 0}
.news-image img{
  max-width:100%;
  display:block;
  border:0;
  filter:sepia(.08) contrast(1.02);
}
.news-image::after{
  content:"";
  display:block;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  height:2px;
  margin-top:4px;
}

.news-source{
  margin:12px 0;
  padding:6px 0 6px 12px;
  background:transparent;
  border-left:2px solid var(--ink-2);
  font-size:13px;
  color:var(--ink-2);
  font-style:italic;
}
.news-source a{color:var(--link)}

.news-tags{
  display:block;
  margin:10px 0;
  font-style:italic;
  color:var(--ink-3);
  font-size:12px;
}
.news-tag{
  background:transparent;
  color:var(--ink-3);
  padding:0;
  margin-right:8px;
  border-radius:0;
}

/* ============================================================
 * ФУТЕР ПОСТА
 * ============================================================ */

.news-card-foot{
  display:flex;
  align-items:baseline;
  gap:18px;
  padding:10px 0 0;
  margin-top:14px;
  border-top:1px solid var(--rule-2);
  color:var(--ink-3);
  font-size:12px;
  font-style:italic;
  letter-spacing:.03em;
}
.news-card-foot a{
  color:var(--ink-2);
  text-decoration:none;
  font-style:italic;
}
.news-card-foot a:hover{color:var(--acc);text-decoration:underline}

.news-like{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--ink-2);font-size:12px;
  display:inline-flex;align-items:center;gap:5px;
  font-family:Georgia,serif;
  font-style:italic;
}
.news-like:hover{color:var(--acc)}
.news-like.on{color:var(--acc);font-weight:700}
.news-views{color:var(--ink-3);font-style:italic}
.news-edit,.news-del{margin-left:auto;color:var(--ink-3);font-style:normal}
.news-edit + .news-del{margin-left:12px}

/* ============================================================
 * ПАГИНАЦИЯ
 * ============================================================ */

.news-pager{
  display:flex;gap:6px;flex-wrap:wrap;
  justify-content:center;
  margin:40px 0 0;
  padding-top:20px;
  border-top:1px solid var(--ink);
}
.news-pager a,.news-pager span{
  min-width:32px;height:32px;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
  color:var(--ink-2);
  text-decoration:none;
  font-size:13px;
  border:0;
  border-radius:0;
  font-family:Georgia,serif;
}
.news-pager a:hover{color:var(--acc);text-decoration:underline}
.news-pager .on{
  color:var(--ink);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* ============================================================
 * ОДИНОЧНЫЙ ПОСТ
 * ============================================================ */

.news-card-single{
  border-bottom:1px solid var(--ink);
  padding-bottom:34px;
  margin-bottom:34px;
}
.news-card-single .news-title{
  font-size:38px;
  line-height:1.1;
}

/* ============================================================
 * КОММЕНТАРИИ
 * ============================================================ */

.news-comments{margin-top:36px}
.news-comments h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:15px;
  margin:0 0 18px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.15em;
  text-align:center;
  border-bottom:1px solid var(--ink);
  padding-bottom:10px;
}
.news-comment{
  display:flex;gap:12px;
  padding:14px 0;
  border-bottom:1px dotted var(--rule-2);
}
.news-comment-body{flex:1;min-width:0}
.news-comment-head{
  display:flex;gap:10px;align-items:baseline;margin-bottom:4px;
}
.news-comment-head b{
  font-size:13px;
  font-family:Georgia,serif;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.news-comment-head span{
  color:var(--ink-3);
  font-size:11px;
  font-style:italic;
}

.news-comment-form{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.news-comment-form textarea{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--ink);
  color:var(--ink);
  border-radius:0;
  padding:10px 0;
  font:inherit;
  resize:vertical;
  font-family:Georgia,"Times New Roman",serif;
  font-size:15px;
}
.news-comment-form textarea:focus{outline:none;border-bottom-color:var(--acc)}
.news-comment-form button{
  align-self:flex-start;
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink);
  border-radius:0;
  padding:8px 24px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  font-family:Georgia,serif;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:11px;
  transition:background .15s, color .15s;
}
.news-comment-form button:hover{background:var(--ink);color:var(--paper)}

.news-empty{
  color:var(--ink-3);
  padding:24px 0;
  font-style:italic;
  text-align:center;
}
.news-err{
  color:var(--acc);
  padding:10px 0;
  border-bottom:1px solid var(--acc);
  margin:0 0 16px;
  font-style:italic;
}

/* ============================================================
 * ФОРМА АДМИНКИ
 * ============================================================ */

.news-form{display:flex;flex-direction:column;gap:16px;max-width:640px}
.news-form label{
  display:flex;flex-direction:column;gap:6px;
  font-size:12px;color:var(--ink-2);
  text-transform:uppercase;
  letter-spacing:.12em;
}
.news-form input,.news-form select,.news-form textarea{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--ink);
  color:var(--ink);
  border-radius:0;
  padding:8px 0;
  font:inherit;
  font-family:Georgia,"Times New Roman",serif;
  font-size:15px;
  text-transform:none;
  letter-spacing:normal;
}
.news-form input:focus,.news-form select:focus,.news-form textarea:focus{
  outline:none;
  border-bottom-color:var(--acc);
}
.news-form button{
  align-self:flex-start;
  background:var(--ink);color:var(--paper);
  border:0;border-radius:0;
  padding:10px 26px;
  font:inherit;font-weight:700;cursor:pointer;
  font-family:Georgia,serif;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:12px;
}
.news-form button:hover{background:var(--acc)}
.news-cancel{
  margin-left:14px;
  color:var(--ink-2);
  align-self:center;
  font-size:12px;
  font-style:italic;
}

.news-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:13px}
.news-table th,.news-table td{
  text-align:left;padding:8px 10px;
  border-bottom:1px solid var(--rule-2);
}
.news-table th{
  color:var(--ink-3);
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.news-table a{color:var(--link);text-decoration:none}

/* ============================================================
 * РЕАКЦИИ 👍👎
 * ============================================================ */

.news-reactions{
  display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;
  margin:12px 0 0;
}

.news-reaction{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  cursor:pointer;
  color:var(--ink-2);
  font:inherit;
  font-size:13px;
  line-height:1;
  font-family:Georgia,serif;
  font-style:italic;
  transition:color .15s, transform .12s;
}
.news-reaction:hover{color:var(--acc);transform:translateY(-1px)}
.news-reaction:active{transform:translateY(0) scale(.95)}
.news-reaction[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.news-reaction[disabled]:hover{color:var(--ink-2);transform:none}

.news-reaction__emoji{
  font-size:16px;
  line-height:1;
  display:inline-block;
  filter:grayscale(.7);
  transition:filter .15s;
}
.news-reaction:hover .news-reaction__emoji{filter:grayscale(0)}
.news-reaction.is-active .news-reaction__emoji{filter:grayscale(0)}

.news-reaction__count{
  font-weight:700;
  color:var(--ink-2);
  font-size:12px;
  font-style:normal;
  letter-spacing:.02em;
}
.news-reaction.is-active .news-reaction__count{color:var(--ink)}

.news-reaction.is-active{
  color:var(--acc);
}

.news-reaction--fire.is-active{color:#2a6a2a}
.news-reaction--sad.is-active {color:#8b1e1e}

/* ============================================================
 * МОБИЛЬНАЯ АДАПТАЦИЯ
 * ============================================================ */

@media (max-width:640px){
  .news-masthead .news-logo{font-size:42px}
  .news-masthead .news-sub{font-size:10px;letter-spacing:.18em}
  .news-wrap{padding:20px 16px 60px}
  .news-title{font-size:22px}
  .news-card-single .news-title{font-size:26px}
  .news-body{font-size:15px}
  .news-body p:first-of-type::first-letter{font-size:34px}
  .news-tabs a{padding:4px 9px;font-size:11px;letter-spacing:.06em}
  .news-card-foot{gap:12px;font-size:11px}
  .news-reactions{gap:10px}
  .news-reaction{font-size:12px}
  .news-reaction__emoji{font-size:14px}
}