/* Духоборы — палитра и то, что есть только здесь.
 *
 * Цвет взят у предмета, а не выдуман: белое полотно и красная нить — то, как
 * выглядит духоборский рушник и вышивка на рубахе. Отсюда бумажный фон,
 * тёмные чернила и один густой красный, который здесь работает не как
 * «акцент интерфейса», а как нить по холсту: его мало и он всегда к месту.
 *
 * Приглушённая олива — второй, редкий: степь и полынь Молочных вод и
 * Закавказья, где духоборы жили дольше всего.
 *
 * Ничего яркого и ничего «современного веб-дизайна» намеренно: сайт про
 * людей, чья культура держится на простоте, и кричащий макет ей бы противоречил.
 */

:root {
    --c-ink: #241f1a;
    --c-text: #2b241e;
    --c-muted: #6d6155;

    --c-bg: #faf7f2;
    --c-surface: #ffffff;
    --c-surface-2: #f3ece2;
    --c-border: #e6ddd1;
    --c-border-strong: #d3c6b5;

    --c-primary: #8f3d33;
    --c-primary-dark: #6f2e26;
    --c-primary-soft: #f8ece9;

    --c-link: #8f3d33;
    --c-link-hover: #6f2e26;
    --c-focus: #8f3d33;
    --c-accent: #5f6b4a;

    --c-ok: #4a6b45;
    --c-ok-soft: #eef3ea;
    --c-err: #8f3d33;
    --c-err-soft: #f8ece9;
}

/* ── Шапка ────────────────────────────────────────────────────────────────*/
.brand-mark {
    width: 14px; height: 14px;
    background: var(--c-primary);
    /* Ромб — простейший мотив духоборской вышивки. */
    transform: rotate(45deg);
    display: inline-block;
    flex: 0 0 auto;
}

.site-nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.site-nav a {
    text-decoration: none;
    color: var(--c-muted);
    font-size: .95rem;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--c-primary); }
.site-nav a.is-here { color: var(--c-ink); border-bottom-color: var(--c-primary); }

@media (max-width: 760px) {
    .site-head .wrap { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
    .site-nav { gap: var(--s-2) var(--s-3); }
}

/* ── Первый экран ─────────────────────────────────────────────────────────*/
.hero {
    padding: var(--s-9) 0 var(--s-8);
    border-bottom: 1px solid var(--c-border);
    background:
        /* Тонкая красная нить по краю — как кайма на полотне. */
        linear-gradient(var(--c-primary), var(--c-primary)) left top / 100% 3px no-repeat,
        var(--c-surface);
}
.hero h1 { max-width: 18ch; }
.hero .lead { max-width: 58ch; font-size: 1.15rem; }

/* Псалом или изречение — набирается крупно и с воздухом, как надпись. */
.saying {
    margin: var(--s-7) 0;
    padding-left: var(--s-5);
    border-left: 3px solid var(--c-primary);
    font-size: 1.3rem;
    line-height: 1.45;
    color: var(--c-ink);
}
.saying cite { display: block; margin-top: var(--s-3); font-size: .92rem; font-style: normal; color: var(--c-muted); }

/* ── Разделы ──────────────────────────────────────────────────────────────*/
.tile {
    display: block;
    padding: var(--s-5);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tile:hover { border-color: var(--c-primary); box-shadow: var(--shadow); color: inherit; }
.tile b { display: block; font-size: 1.08rem; margin-bottom: 4px; color: var(--c-ink); }
.tile span { color: var(--c-muted); font-size: .95rem; }

/* ── Текст статьи ─────────────────────────────────────────────────────────*/
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); color: var(--c-ink); }
.prose ul { padding-left: var(--s-5); }
.prose > p:first-of-type { font-size: 1.08rem; }

/* Годы на полях — чтобы длинная история читалась как лента. */
.years { border-left: 2px solid var(--c-border); padding-left: var(--s-5); }
.years > div { position: relative; padding-bottom: var(--s-5); }
.years > div::before {
    content: '';
    position: absolute; left: calc(-1 * var(--s-5) - 5px); top: 9px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-primary);
}
.years time {
    display: block;
    font-weight: 700;
    color: var(--c-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Подвал ───────────────────────────────────────────────────────────────*/
.foot-grid { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .foot-grid { grid-template-columns: 1.6fr 1fr; } }
.foot-title { font-weight: 700; color: var(--c-ink); margin-bottom: var(--s-2); }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { margin-bottom: 6px; }

/* ── Файлы для скачивания ─────────────────────────────────────────────────*/
.files { display: grid; gap: var(--s-2); }
.file {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    min-height: 52px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    text-decoration: none;
}
.file:hover { border-color: var(--c-primary); }
.file-ext {
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    color: var(--c-primary); background: var(--c-primary-soft);
    padding: 3px 7px; border-radius: 4px; flex: 0 0 auto;
}

/* ── Раздел в работе ──────────────────────────────────────────────────────*/
.pending {
    padding: var(--s-6);
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--radius);
    background: var(--c-surface-2);
}

/* Год издания отдельной колонкой: список упорядочен по нему, и глазу нужна
   опора, чтобы видеть, как менялся взгляд на духоборов за два века. */
.file-year { flex: 0 0 3.4em; font-variant-numeric: tabular-nums; }

/* ── Записи ───────────────────────────────────────────────────────────────
   Плеер на каждую дорожку, а не один на страницу: люди приходят слушать
   конкретную песню, и заставлять их искать её ползунком — значит потерять их
   на второй минуте. */
.tracks { list-style: none; counter-reset: track; padding: 0; margin: var(--s-5) 0 0; }
.tracks > li {
    counter-increment: track;
    padding: var(--s-3) 0;
    border-top: 1px solid var(--c-border);
}
.tracks > li:last-child { border-bottom: 1px solid var(--c-border); }
.track-head {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.track-head::before {
    content: counter(track, decimal-leading-zero);
    font-variant-numeric: tabular-nums;
    color: var(--c-muted);
    font-size: .85rem;
    flex: 0 0 1.8em;
}
.track-title { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.track-dl { font-size: .82rem; color: var(--c-muted); white-space: nowrap; }
.track-dl:hover { color: var(--c-primary); }
.tracks audio, .part audio { width: 100%; height: 36px; display: block; }

.parts { display: grid; gap: var(--s-4); margin: var(--s-5) 0; }
.part { padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.part .track-head::before { content: none; }

.list-tight { padding-left: 1.3em; }
.list-tight li { margin: 2px 0; }

/* ── Фотографии ───────────────────────────────────────────────────────────
   Снимки семейные и разного размера; вписываем по ширине колонки, не обрезая:
   обрезка кадра на архивной фотографии уничтожает ровно то, ради чего её
   хранили. */
.photos { display: grid; gap: var(--s-6); margin-top: var(--s-5); }
@media (min-width: 760px) { .photos { grid-template-columns: repeat(2, 1fr); } }
.photo { margin: 0; }
.photo img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    background: var(--c-surface-2);
    display: block;
}
.photo figcaption {
    margin-top: var(--s-3);
    font-size: .92rem;
    color: var(--c-text-soft, inherit);
    line-height: 1.55;
}
/* Снимок с длинной подписью занимает обе колонки: подпись — свидетельство,
   и сжимать её в узкую полосу нельзя. */
@media (min-width: 760px) {
    .photo:has(figcaption) { grid-column: 1 / -1; }
    .photo:has(figcaption) img { max-height: 70vh; width: auto; margin: 0 auto; }
}

/* ── Видео ────────────────────────────────────────────────────────────────*/
.video { margin: var(--s-5) 0 0; }
.video video { width: 100%; height: auto; border-radius: var(--radius-sm); background: #000; }
.video figcaption { margin-top: var(--s-3); font-size: .95rem; }

/* ── Ссылки ───────────────────────────────────────────────────────────────*/
.links { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.link-card {
    display: grid;
    gap: 4px;
    padding: var(--s-5);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    text-decoration: none;
    color: inherit;
}
.link-card:hover { border-color: var(--c-primary); }
.link-name { font-weight: 700; }
.link-where { font-size: .82rem; color: var(--c-muted); }
.link-about { font-size: .93rem; line-height: 1.55; }
.link-note {
    font-size: .8rem;
    color: var(--c-muted);
    margin-top: 4px;
}