/* style.css — anecdote shelter */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --bg:         #000000;
  --red:        #cc0000;
  --red-dim:    #660000;
  --red-bright: #ff3333;
  --text:       #c8c8c8;
  --light:      #666666;
  --border:     #181818;
  --border2:    #202020;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.7;
  padding: 2rem 2.5rem;
  min-height: 100vh;
}

/* ── CRT scanlines + vignette ─────────────────── */
.scanlines {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.16) 2px,
    rgba(0,0,0,0.16) 4px
  );
}
.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.6) 100%);
}

/* ── boot screen ───────────────────────────────── */
.boot {
  position: fixed;
  inset: 0;
  background: #000;
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 3rem;
}
.boot pre {
  max-width: 600px;
  font-size: 13px;
  line-height: 1.9;
}
.fadeout { animation: fade 0.6s forwards; }
@keyframes fade { to { opacity:0; } }

/* ── cursor ────────────────────────────────────── */
.cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--red);
  animation: blink 1s step-end infinite;
  margin-left: 2px;
  vertical-align: middle;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── container ─────────────────────────────────── */
.container { max-width: 1020px; margin: 0 auto; }

/* ── ASCII logo — glitch via JS class swap ─────── */
.logo {
  color: var(--red);
  font-size: 7px;
  line-height: 1.05;
  margin-bottom: 1.6rem;
  white-space: pre;
  display: block;
  transition: text-shadow 0.05s, transform 0.05s, opacity 0.05s;
}
.logo.g1 {
  text-shadow: 3px 0 var(--red-bright), -3px 0 #001133;
  transform: translateX(2px);
}
.logo.g2 {
  text-shadow: -4px 0 #ff0000, 4px 0 #000;
  transform: translateX(-2px) skewX(0.8deg);
  opacity: 0.7;
}
.logo.g3 {
  text-shadow: 2px 0 #ffffff44;
  transform: translateX(1px);
  opacity: 0.9;
}
@media (max-width: 600px) { .logo { font-size: 5px; } }

/* ── prompt ────────────────────────────────────── */
.prompt {
  color: var(--red);
  font-weight: bold;
  font-size: 13px;
  margin: 0.8rem 0 0;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border2);
}
.prompt .cursor {
  display: inline-block;
  width: 8px; height: 1em;
  background: var(--red);
  animation: blink 1s step-end infinite;
  margin-left: 4px;
  vertical-align: middle;
}

/* ── layout ────────────────────────────────────── */
.layout {
  display: flex;
  gap: 2.8rem;
  margin-top: 2rem;
}
@media (max-width: 820px) {
  .layout { flex-direction: column; gap: 1.8rem; }
  .sidebar {
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border2);
    padding-right: 0;
    padding-bottom: 1.4rem;
  }
}

/* ── sidebar ───────────────────────────────────── */
.sidebar {
  min-width: 188px;
  max-width: 198px;
  border-right: 1px solid var(--border2);
  padding-right: 1.8rem;
}
.sidebar nav ul { list-style: none; }
.sidebar nav ul li { margin-bottom: 0.4rem; }
.sidebar nav a {
  color: var(--light);
  text-decoration: none;
  font-size: 13px;
}
.sidebar nav a:hover { color: var(--red-bright); }

.sidebar-meta {
  margin-top: 2rem;
  color: #2e2e2e;
  font-size: 12px;
  line-height: 2;
  border-top: 1px solid var(--border);
  padding-top: 1.2rem;
}

.status-box {
  margin-top: 1.8rem;
  border: 1px solid var(--border2);
  padding: 0.8rem;
}
.status-box h3 {
  color: var(--red);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.status-box ul { list-style: none; }
.status-box ul li { color: #323232; font-size: 12px; margin-bottom: 0.25rem; }
.status-box ul li .red { color: var(--red); font-weight: bold; }

/* uptime */
#uptime { color: #272727; font-size: 11px; margin-top: 1.2rem; }

/* ── content ───────────────────────────────────── */
.content { flex: 1; min-width: 0; }

h2 {
  color: var(--red);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  margin: 2rem 0 1rem;
}
h2::before { content: '── '; color: #222; }

article {
  margin-bottom: 1.8rem;
  padding: 0.7rem 0.9rem 0.7rem 1.1rem;
  border-left: 2px solid #160000;
  transition: border-color 0.12s, background 0.12s;
}
article:hover {
  border-left-color: var(--red);
  background: rgba(140,0,0,0.032);
}
article h3 { font-size: 13px; margin-bottom: 0.3rem; }
article h3 a { color: var(--text); text-decoration: none; }
article h3 a:hover { color: var(--red-bright); }
article p { color: #4e4e4e; font-size: 12px; margin-bottom: 0.4rem; line-height: 1.6; }
.meta { color: #272727; font-size: 11px; }

.tag {
  display: inline-block;
  border: 1px solid #1c1c1c;
  color: #333;
  font-size: 11px;
  padding: 0 0.4rem;
  margin-right: 0.3rem;
}
article:hover .tag { color: #772222; border-color: #260000; }

/* ── hex dump strip ────────────────────────────── */
.hexdump {
  color: #181818;
  font-size: 11px;
  line-height: 1.9;
  margin: 1.8rem 0;
  user-select: none;
  overflow: hidden;
}
.hexdump .addr { color: #2a0000; margin-right: 1rem; }
.hexdump .ascii { color: #1e1e1e; margin-left: 1rem; }

/* ── about blocks ──────────────────────────────── */
.about-block { margin-bottom: 2rem; }
.about-block p, .about-block li {
  color: #5e5e5e;
  font-size: 13px;
  line-height: 1.9;
}
.about-block ul { list-style: none; }
.about-block ul li::before { content: '• '; color: var(--red-dim); }

/* ── misc ──────────────────────────────────────── */
.danger { color: var(--red); font-weight: bold; }
.red    { color: var(--red); font-weight: bold; }
.new    { color: var(--red); font-size: 11px; letter-spacing: 1px; }

/* ── footer ────────────────────────────────────── */
footer {
  margin-top: 4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  color: #222;
  text-align: center;
  font-size: 12px;
  line-height: 2.2;
}
footer a { color: var(--red-dim); text-decoration: none; }
footer a:hover { color: var(--red); }
.f-prompt { color: var(--red-dim); }
.f-cmd    { color: #252525; }

.hidden { display: none; }

/* Убираем лишние отступы и делаем контейнер «облегающим» */
.img-placeholder {
  display: inline-block; /* или flex, если нужно центрирование */
  line-height: 0;        /* убирает gap от baseline */
  border: 1px solid var(--border); /* ваша желаемая обводка */
  padding: 0;
}

/* Делаем изображение блочным и без отступов */
.img-placeholder img {
  display: block;
  border: none;          /* сбрасываем возможные границы */
  outline: none;
}