/* =========================================================
   ГАРАЖ — страница дяди Вовы: архив фрагментов
   ========================================================= */

/* Шапка персонажа */
.vova-hero {
  padding: 52px 0 46px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.vh-portrait {
  width: 100%;
  aspect-ratio: 21/9;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(150deg, #24282e, #15171b);
  margin-bottom: 30px;
}
.vh-portrait svg { width: 100%; height: 100%; display: block; }

.vh-name {
  font-size: clamp(40px, 6vw, 74px);
  line-height: .96;
  letter-spacing: -.01em;
  margin-bottom: 16px;
}
.vh-name .thin { -webkit-text-stroke: 1.5px var(--paper); color: transparent; }

.vh-meta {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel-dim);
  margin-bottom: 26px;
}
.vh-meta b { color: var(--amber); font-weight: 500; }

.vh-lead {
  font-size: 17px;
  color: var(--paper-dim);
  max-width: 64ch;
  line-height: 1.65;
}

/* Правило имени */
.name-rule {
  margin-top: 34px;
  padding: 22px 24px;
  background: rgba(240,165,46,.06);
  border: 1px solid rgba(240,165,46,.3);
  border-radius: var(--radius);
}
.nr-head {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 12px;
}
.name-rule ul { list-style: none; }
.name-rule li {
  font-size: 14.5px;
  color: var(--paper-dim);
  padding: 6px 0 6px 22px;
  position: relative;
  line-height: 1.55;
}
.name-rule li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--amber-dark);
}
.name-rule li b { color: var(--paper); }
.name-rule .once {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(240,165,46,.2);
  font-size: 14.5px;
  color: #e8d5b4;
}
.name-rule .once b { color: var(--amber); }

/* Счётчик */
.vh-count {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.vc-num {
  font-family: var(--font-display);
  font-size: 58px;
  color: var(--amber);
  line-height: .9;
}
.vc-cap { font-size: 13.5px; color: var(--paper-dim); max-width: 46ch; }

/* Архив фрагментов */
.frag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.frag {
  position: relative;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  background: var(--concrete-2);
  min-height: 190px;
  display: flex;
  flex-direction: column;
}

.frag-n {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--amber);
  margin-bottom: 10px;
}
.frag-text { font-size: 15.5px; line-height: 1.55; color: var(--paper); flex: 1; }
.frag-src {
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel-dim);
}
.frag-src a { color: var(--steel-dim); text-decoration: none; }
.frag-src a:hover { color: var(--amber); }

/* Нераскрытые фрагменты */
.frag.locked {
  background: rgba(255,255,255,.015);
  border-style: dashed;
  border-color: rgba(255,255,255,.13);
}
.frag.locked .frag-n { color: var(--steel-dim); }
.frag.locked .frag-text { color: var(--steel-dim); font-style: italic; }

.frag-dots {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  gap: 5px;
}
.frag-dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
}
.frag-dots i.on { background: var(--amber); }

/* Адаптив */
@media (max-width: 760px) {
  .vh-portrait { aspect-ratio: 16/10; }
  .vh-meta { gap: 16px; }
  .vc-num { font-size: 44px; }
}