/* creepypasta — ночной лес, склеп, чёрно-белые снимки, молния в тучах.
   Блочные мотивы (ступенчатые углы, пиксельный шрифт) — приправа, не основа. */

@font-face { font-family: "Wet Paint"; src: url(../fonts/rubik-wet-paint-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "Wet Paint"; src: url(../fonts/rubik-wet-paint-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; font-display: swap; }
@font-face { font-family: "Pixel"; src: url(../fonts/press-start-2p-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "Pixel"; src: url(../fonts/press-start-2p-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; font-display: swap; }
@font-face { font-family: "PT Serif"; src: url(../fonts/pt-serif-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "PT Serif"; src: url(../fonts/pt-serif-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; font-display: swap; }
@font-face { font-family: "PT Serif"; font-weight: 700; src: url(../fonts/pt-serif-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "PT Serif"; font-weight: 700; src: url(../fonts/pt-serif-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; font-display: swap; }
@font-face { font-family: "PT Serif"; font-style: italic; src: url(../fonts/pt-serif-cyrillic-400-italic.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #070708;
  --panel: #101012;
  --panel-2: #16161a;
  --line: #26262c;
  --bone: #e9e3d4;
  --text: #c9c4b8;
  --muted: #858073;
  --blood: #a3201c;
  --blood-dim: #5a1311;
  --eye: #f5f8ff;
  --step: 6px;              /* ступенька блочного угла */
  --pixel: "Pixel", ui-monospace, monospace;
  --serif: "PT Serif", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -200px, #15151a 0%, transparent 70%),
    var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }

/* Ступенчатый угол — от кубического мира, но только по краям. */
.blocky {
  clip-path: polygon(
    0 var(--step), var(--step) var(--step), var(--step) 0,
    calc(100% - var(--step)) 0, calc(100% - var(--step)) var(--step), 100% var(--step),
    100% calc(100% - var(--step)), calc(100% - var(--step)) calc(100% - var(--step)), calc(100% - var(--step)) 100%,
    var(--step) 100%, var(--step) calc(100% - var(--step)), 0 calc(100% - var(--step)));
}

/* ---------- Шапка ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(7, 7, 8, 0.86);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  max-width: 1120px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 18px;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--bone);
  font-family: "Wet Paint", var(--serif); font-size: 26px; letter-spacing: .02em;
  white-space: nowrap;
}
.logo svg { width: 28px; height: 28px; flex: none; }
.tabs { display: flex; gap: 4px; }
.tabs button {
  background: none; border: 0; padding: 6px 10px; cursor: pointer;
  font-family: var(--pixel); font-size: 10px; color: var(--muted);
  border-bottom: 2px solid transparent;
}
.tabs button[aria-pressed="true"] { color: var(--bone); border-color: var(--blood); }
.tabs button:hover { color: var(--bone); }
.topbar .spacer { flex: 1; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blood); color: #fff; border: 0; cursor: pointer;
  padding: 9px 14px; font-family: var(--pixel); font-size: 9px; text-decoration: none;
}
.btn:hover { background: #bd2a25; }
.btn.ghost { background: var(--panel-2); color: var(--text); }
.btn.ghost:hover { background: #202026; }

/* ---------- Обои ---------- */
.hero { position: relative; height: clamp(340px, 62vh, 620px); overflow: hidden; background: #000; }
canvas.wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; }
/* виньетка, как у старого объектива */
.hero::after, .wall-page::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.7) 100%);
}
.hero-text {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  max-width: 1120px; margin: 0 auto; padding: 0 16px 34px;
  text-shadow: 0 2px 0 #000, 0 0 18px #000;
}
.issue { font-family: var(--pixel); font-size: 10px; color: var(--muted); letter-spacing: .08em; margin: 0 0 14px; }
.issue b { color: var(--blood); font-weight: 400; }
.masthead {
  margin: 0; color: var(--bone);
  font: 400 clamp(46px, 11vw, 120px)/.9 "Wet Paint", var(--serif);
  letter-spacing: .01em;
}
.tagline { margin: 14px 0 0; max-width: 34em; font: italic 17px/1.5 var(--serif); color: var(--text); }
.hero .flash-hint {
  position: absolute; z-index: 2; top: 14px; right: 16px;
  font-family: var(--pixel); font-size: 8px; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.hero .flash-hint i { width: 8px; height: 8px; background: var(--blood); display: inline-block; animation: rec 1s steps(1) infinite; }
@keyframes rec { 50% { opacity: 0; } }

/* Паутина — SVG в углах */
.web { position: absolute; z-index: 1; pointer-events: none; color: rgba(233, 227, 212, .35); }
.web.tl { top: 0; left: 0; width: 180px; }
.web.tr { top: 0; right: 0; width: 140px; transform: scaleX(-1); }

/* ---------- Сетка страницы ---------- */
.layout {
  max-width: 1120px; margin: 0 auto; padding: 26px 16px 60px;
}
@media (max-width: 900px) {
  .tabs { display: none; }
}
/* Без боковой колонки лента — на всю ширину, а на широком экране всё, кроме
   обоев, крупнее, как при масштабе браузера 125–150 %. */
@media (min-width: 1280px) { :root { --z: 1.25; } }
@media (min-width: 1600px) { :root { --z: 1.5; } }
.topbar-in, .hero-text, .layout, .footer, .web, .hero .flash-hint { zoom: var(--z, 1); }
@media (max-width: 560px) {
  .topbar .btn span, .issue .wide { display: none; }
  .logo { font-size: 22px; }
}

.feed-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; }
.feed-head h2 { margin: 0; font: 400 12px var(--pixel); color: var(--bone); }
.feed-head .filter { font-size: 13px; color: var(--muted); }
.feed-head .filter button { background: none; border: 0; color: var(--blood); cursor: pointer; padding: 0 4px; }

/* ---------- Пост ---------- */
.post {
  position: relative; background: var(--panel); margin: 0 0 22px;
  border: 1px solid var(--line);
}
.post.blocky { border: 0; box-shadow: inset 0 0 0 1px var(--line); }
.post-in { padding: 16px 18px 12px; }
.post-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.avatar {
  width: 28px; height: 28px; flex: none; image-rendering: pixelated;
  background: var(--panel-2);
}
.post-meta .nick { color: var(--text); font-weight: 600; text-decoration: none; }
.post-meta .nick:hover { color: var(--bone); }
.post h2, .post h3 { margin: 10px 0 8px; font: 700 22px/1.25 var(--serif); color: var(--bone); }
.post h2 a, .post h3 a { text-decoration: none; }
.post h2 a:hover, .post h3 a:hover { text-decoration: underline; text-decoration-color: var(--blood); text-underline-offset: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.tags button, .tags a {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  font-size: 12px; padding: 2px 8px; cursor: pointer; text-decoration: none; display: inline-block;
}
.tags button:hover, .tags a:hover { color: var(--bone); border-color: #3a3a42; }

/* превью — как кадр комикса: толстая рамка, подпись на «бумаге» */
.panel {
  position: relative; display: block; margin: 0 -18px; border-block: 3px solid #000;
  background: #000; overflow: hidden;
}
.panel img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(.82);
  transition: filter .5s;
}
.panel .grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.caption {
  position: absolute; left: 12px; top: 12px; max-width: 70%;
  background: #e8e1cf; color: #111; padding: 6px 9px;
  font: 9px/1.5 var(--pixel); box-shadow: 3px 3px 0 #000; border: 2px solid #000;
}

.lead { margin: 14px 0 6px; font: 17px/1.6 var(--serif); color: var(--text); }
.more { display: inline-block; margin: 2px 0 6px; font-size: 14px; color: var(--blood); text-decoration: none; font-weight: 600; }
.more:hover { text-decoration: underline; }

.post-foot {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--muted);
}
.vote { display: flex; align-items: center; gap: 2px; background: var(--panel-2); padding: 2px; }
.vote button {
  width: 30px; height: 28px; border: 0; background: none; cursor: pointer; color: var(--muted);
  display: grid; place-items: center;
}
.vote button:hover { color: var(--bone); }
.vote button[aria-pressed="true"].up { color: #fff; background: var(--blood); }
.vote button[aria-pressed="true"].down { color: #fff; background: #3a3a44; }
.vote output { min-width: 46px; text-align: center; font: 10px var(--pixel); color: var(--bone); }
.post-foot .act {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px;
  background: none; border: 0; cursor: pointer; color: var(--muted); text-decoration: none;
}
.post-foot .act:hover { color: var(--bone); background: var(--panel-2); }
.post-foot .act[aria-pressed="true"] { color: var(--bone); }
.post-foot svg { width: 16px; height: 16px; }
.post-foot .grow { flex: 1; }

/* ---------- Статья ---------- */
.article { background: var(--panel); border: 1px solid var(--line); }
.article .post-in { padding: 22px 26px 18px; }
.article h1 { margin: 12px 0 10px; font: 700 clamp(26px, 4.4vw, 38px)/1.15 var(--serif); color: var(--bone); }
.article .panel { margin: 18px -26px; }
.article .body p { margin: 0 0 1.1em; font: 18px/1.7 var(--serif); color: var(--text); }
.article .body p:first-child::first-letter {
  float: left; margin: 6px 10px 0 0; padding: 6px 8px;
  font: 400 44px/1 "Wet Paint", var(--serif); color: var(--bone); background: var(--blood-dim);
}
.bubble {
  position: relative; margin: 6px 0 24px; padding: 14px 18px;
  background: #e8e1cf; color: #111; border: 3px solid #000; box-shadow: 5px 5px 0 #000;
  font: italic 18px/1.5 var(--serif);
}
.bubble::after {
  content: ""; position: absolute; left: 34px; bottom: -18px;
  border: 9px solid transparent; border-top-color: #000; border-left-color: #000;
}
.back { display: inline-block; margin: 0 0 14px; font: 9px var(--pixel); color: var(--muted); text-decoration: none; }
.back:hover { color: var(--bone); }
.end-mark { text-align: center; font: 10px var(--pixel); color: var(--muted); margin: 26px 0 8px; letter-spacing: .3em; }
@media (max-width: 560px) {
  .article .post-in { padding: 18px 16px 14px; }
  .article .panel { margin: 16px -16px; }
  .panel { margin: 0 -18px; }
  .post-foot .act span { display: none; }
}

/* ---------- Подвал ---------- */
.footer { border-top: 1px solid var(--line); padding: 22px 16px 40px; text-align: center; font-size: 13px; color: var(--muted); }
.footer .pix { font: 8px var(--pixel); }

/* ---------- Страница обоев ---------- */
.wall-page { position: fixed; inset: 0; background: #000; }
.wall-page canvas.wallpaper { position: absolute; inset: 0; }
.wall-page .exit {
  position: absolute; z-index: 3; left: 16px; top: 16px; opacity: .3; transition: opacity .4s;
}
.wall-page:hover .exit, .wall-page .exit:focus-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero .flash-hint i { animation: none; }
}