/* ПАВЕЛ. 28 — общая печатная основа для всех полос.
   Раскладка каждой страницы живёт в её шаблоне; здесь только то, что делят все. */
:root{
  --paper:#EDE6D3; --paper-2:#E1D8BF; --ink:#141210; --ink-2:#3B3732; --rule:#1E1B18;
  --red:#C8102E; --yellow:#FFE84D;
  --head:'Oswald','Arial Narrow',Impact,sans-serif;
  --body:'PT Serif',Georgia,'Times New Roman',serif;
  --hand:'Caveat','Segoe Script',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body); color:var(--ink);
  background:url(/static/grain.svg) 0 0/320px 320px, var(--paper);
  -webkit-tap-highlight-color:transparent;
}
img{max-width:100%;display:block}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* --- типографика --- */
.head{font-family:var(--head);font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:-.01em}
.hand{font-family:var(--hand);font-weight:700}
/* «сдвиг красной краски» — только для главного заголовка полосы */
.misreg{text-shadow:-.035em .035em 0 var(--red)}

/* --- плашки --- */
.bar{display:inline-block;font-family:var(--head);font-weight:700;text-transform:uppercase;line-height:1;
  padding:.22em .5em .18em;letter-spacing:.04em;white-space:nowrap}
.bar-ink{background:var(--ink);color:var(--paper)}
.bar-red{background:var(--red);color:var(--paper)}
.bar-yellow{background:var(--yellow);color:var(--red)}

/* рубрика материала: пожелание — чернила, факт — красная краска */
.rubric{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.06em;line-height:1;
  display:inline-block;padding:.28em .5em .22em}
.rubric.wish{background:var(--ink);color:var(--paper)}
.rubric.fact{background:var(--red);color:var(--paper)}

/* звезда-взрыв «СЕНСАЦИЯ!» */
.burst{
  display:grid;place-items:center;text-align:center;aspect-ratio:1;
  font-family:var(--head);font-weight:700;text-transform:uppercase;line-height:.9;
  background:var(--yellow);color:var(--red);transform:rotate(-12deg);
  clip-path:polygon(50% 0%,61% 12%,76% 6%,80% 21%,96% 24%,91% 39%,100% 50%,91% 61%,96% 76%,80% 79%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,20% 79%,4% 76%,9% 61%,0% 50%,9% 39%,4% 24%,20% 21%,24% 6%,39% 12%);
}
.burst.red{background:var(--red);color:var(--yellow)}

/* --- фото --- */
/* растр газетной печати: тёмное — краска, светлое — бумага (мультиплай поверх бумаги);
   .duo — красная краска: красная подложка, снимок «экраном», сверху бумага мультиплаем */
.halftone{position:relative;overflow:hidden;isolation:isolate;background:var(--paper)}
.halftone img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.3);mix-blend-mode:multiply}
.halftone.duo{background:var(--red)}
.halftone.duo img{mix-blend-mode:screen;filter:grayscale(1) contrast(1.55) brightness(1.02)}
.halftone.duo::before{content:"";position:absolute;inset:0;z-index:1;background:var(--paper);mix-blend-mode:multiply}
.halftone::after{content:"";position:absolute;inset:-30%;z-index:2;mix-blend-mode:multiply;opacity:.4;pointer-events:none;
  background:radial-gradient(circle,var(--ink) 0 .9px,transparent 1.4px) 0 0/4px 4px;transform:rotate(15deg)}
.halftone.fine::after{background-size:3px 3px;opacity:.3}
.frame{border:3px solid var(--ink);padding:3px;background:var(--paper)}
/* если фото героя не положили — редакция честно об этом сообщает */
.censored{display:grid;place-items:center;text-align:center;background:var(--paper-2);border:3px solid var(--ink);
  font-family:var(--head);font-weight:700;text-transform:uppercase;color:var(--ink);padding:8%;line-height:1.05}
.censored small{display:block;font-family:var(--hand);text-transform:none;font-weight:700;margin-top:.5em;color:var(--red);font-size:.9em}

/* --- штамп реакции --- */
.stamp{
  display:grid;place-items:center;text-align:center;aspect-ratio:1;border-radius:50%;
  border:.28em double var(--red);color:var(--red);mix-blend-mode:multiply;
  font-family:var(--hand);font-weight:700;line-height:1;
}
.stamp .e{font-size:1.9em;line-height:1}
.stamp .l{font-size:.78em;letter-spacing:.02em;margin-top:.15em}

/* --- кнопки --- */
.btn{display:inline-block;border:0;cursor:pointer;text-decoration:none;text-align:center;
  font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.05em;line-height:1;
  background:var(--ink);color:var(--paper);padding:.9em 1.2em .8em}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:default}
.btn-red{background:var(--red)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 3px var(--ink)}

/* --- линейки --- */
.rule-thick{border-top:5px solid var(--ink)}
.rule-double{border-top:1px solid var(--ink);box-shadow:0 3px 0 0 var(--ink)}
.rule-thin{border-top:1px solid var(--rule)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}
}
@media print{
  body{background:#fff}
  .halftone::after{display:none}
  .halftone,.halftone.duo{background:#fff}
  .halftone.duo::before{display:none}
  .halftone img,.halftone.duo img{mix-blend-mode:normal;filter:grayscale(1) contrast(1.2)}
}