/* Афоризмы веры — стили сайта.
   Идея: страница рукописной книги. Известковая бумага, тёмные чернила,
   киноварная буквица в начале каждой цитаты. Всё остальное — тихо. */

:root {
    --paper: #eef0ea;
    --paper-raised: #f7f8f4;
    --ink: #1f2a33;
    --ink-soft: #46525c;
    --olive: #5f6650;
    --rule: #cdd2c4;
    --cinnabar: #a8322a;
    --focus: #2b5d8a;

    --serif: "Old Standard TT", "PT Serif", Georgia, serif;
    --sans: "Golos Text", "PT Sans", system-ui, sans-serif;

    --step--1: 0.875rem;
    --step-0: 1rem;
    --step-1: 1.25rem;
    --step-2: 1.5625rem;
    --step-3: 1.953rem;

    --gutter: clamp(1rem, 4vw, 2.5rem);
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #161b20;
        --paper-raised: #1d242a;
        --ink: #e4e2d8;
        --ink-soft: #b7b8ae;
        --olive: #9ca38c;
        --rule: #2e363d;
        --cinnabar: #e06a57;
        --focus: #8fb8e0;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 var(--step-0)/1.55 var(--sans);
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--cinnabar); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

.visually-hidden, .hp {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--gutter); top: 0.5rem; background: var(--paper-raised); padding: 0.5rem 1rem; z-index: 10; }

.muted { color: var(--olive); }

/* ---------- Шапка ---------- */

.masthead { padding: 1.75rem var(--gutter) 0; max-width: 68rem; margin: 0 auto; }
.masthead__inner { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }

.brand { text-decoration: none; display: grid; gap: 0.15rem; }
.brand__name { font: 700 var(--step-3)/1 var(--serif); letter-spacing: -0.01em; }
.brand__name::first-letter { color: var(--cinnabar); }
.brand__tagline { color: var(--olive); font-size: var(--step--1); }

.search-mini input {
    font: inherit; font-size: var(--step--1); color: var(--ink);
    background: transparent; border: 0; border-bottom: 1px solid var(--rule);
    padding: 0.35rem 0; width: min(16rem, 70vw);
}
.search-mini input:focus { border-bottom-color: var(--ink); outline: none; }

.nav {
    display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem;
    margin-top: 1.25rem; padding: 0.6rem 0; border-block: 1px solid var(--rule);
    font-size: var(--step--1);
}
.nav a { text-decoration: none; color: var(--ink-soft); padding: 0.2rem 0; }
.nav a:hover, .nav a.is-current { color: var(--ink); }
.nav a.is-current { box-shadow: inset 0 -2px 0 var(--cinnabar); }
.nav__submit { margin-left: auto; }

/* ---------- Каркас ---------- */

.page { max-width: 68rem; margin: 0 auto; padding: 2rem var(--gutter) 4rem; }
.column, .single { max-width: 40rem; }
.single { margin-inline: auto; }

.with-sidebar { display: grid; gap: 3rem; }
@media (min-width: 60rem) {
    .with-sidebar { grid-template-columns: minmax(0, 40rem) 16rem; justify-content: space-between; }
}

.section-title { font: 700 var(--step-2)/1.2 var(--serif); margin: 0 0 1.25rem; }
.crumbs { font-size: var(--step--1); margin: 0 0 0.5rem; color: var(--olive); }

.notice {
    max-width: 40rem; margin: 0 0 2rem; padding: 0.75rem 1rem;
    border-left: 3px solid var(--cinnabar); background: var(--paper-raised);
}

/* ---------- Цитата ---------- */

.quotes { display: grid; }
.quotes > .quote, .quotes > li { border-top: 1px solid var(--rule); padding: 1.75rem 0; }
.quotes > :first-child { border-top: 0; padding-top: 0; }
.quotes--ranked { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.quotes--ranked > li { counter-increment: rank; position: relative; }
.quotes--ranked > li::before {
    content: counter(rank); position: absolute; right: 0; top: 1.75rem;
    font: 400 var(--step--1) var(--sans); color: var(--olive);
}
.quotes--ranked > li:first-child::before { top: 0; }

.quote__text { margin: 0; font: 400 var(--step-1)/1.6 var(--serif); hanging-punctuation: first; }
.quote__text p { margin: 0 0 0.6em; }
.quote__text p:last-child { margin-bottom: 0; }

/* Буквица киноварью — как в рукописных книгах */
.quote__text p:first-child::first-letter {
    float: left;
    font: 700 3.15em/0.8 var(--serif);
    color: var(--cinnabar);
    margin: 0.07em 0.09em 0 0;
}

.quote--large .quote__text { font-size: var(--step-2); line-height: 1.5; }

.quote__meta { margin-top: 0.9rem; font-size: var(--step--1); }
.quote__author { margin: 0; font-weight: 500; }
.quote__author a { text-decoration: none; }
.quote__author a:hover { text-decoration: underline; text-decoration-color: var(--cinnabar); }
.quote__source { color: var(--olive); font-weight: 400; }
.quote__source::before { content: ", "; }

.quote__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; margin: 0.35rem 0 0; padding: 0; color: var(--olive); }
.quote__tags a { text-decoration: none; }
.quote__tags a:hover { color: var(--ink); }

.quote__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; margin-top: 0.75rem; }
.action {
    font: inherit; color: var(--ink-soft); background: none; border: 0; padding: 0.15rem 0;
    cursor: pointer; text-decoration: none;
}
.action:hover { color: var(--ink); }
.action.is-done { color: var(--cinnabar); }
.quote__link { margin-left: auto; color: var(--olive); }

.vote { display: inline-flex; align-items: center; gap: 0.15rem; border: 1px solid var(--rule); border-radius: 999px; }
.vote__btn {
    font: 500 var(--step-0)/1 var(--sans); color: var(--ink-soft); background: none; border: 0;
    width: 2rem; height: 1.75rem; cursor: pointer; border-radius: 999px;
}
.vote__btn:hover:not(:disabled) { color: var(--cinnabar); }
.vote__btn:disabled { cursor: default; opacity: 0.45; }
.vote__rating { min-width: 1.5rem; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Мысль дня ---------- */

.day { margin-bottom: 3rem; padding-bottom: 2.25rem; border-bottom: 3px double var(--rule); }
.day__title { font: 400 var(--step-0)/1.3 var(--sans); color: var(--olive); margin: 0 0 1rem; }

/* ---------- Боковая колонка ---------- */

.sidebar { font-size: var(--step--1); display: grid; gap: 2.5rem; align-content: start; }
.sidebar__title { font: 700 var(--step-1)/1.2 var(--serif); margin: 0 0 0.75rem; }
.sidebar__more { display: inline-block; margin-top: 0.75rem; color: var(--olive); }
.cloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
.cloud a { text-decoration: none; }
.cloud a:hover { color: var(--cinnabar); }
.authors-top { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; }
.authors-top li { display: flex; justify-content: space-between; gap: 1rem; }
.authors-top a { text-decoration: none; }
.authors-top span { color: var(--olive); font-variant-numeric: tabular-nums; }

/* ---------- Алфавитные указатели ---------- */

.index { columns: 15rem auto; column-gap: 2.5rem; }
.index__group { break-inside: avoid; margin-bottom: 1.5rem; }
.index__letter { font: 700 var(--step-2)/1 var(--serif); color: var(--cinnabar); margin: 0 0 0.4rem; }
.index ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.index span { color: var(--olive); font-size: var(--step--1); }

/* ---------- Разделы и темы ---------- */

.sections { display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.topic-section__title { font: 700 var(--step-2)/1.15 var(--serif); margin: 0 0 0.4rem; }
.topic-section__title a { text-decoration: none; color: var(--ink); }
.topic-section__title a:hover { color: var(--cinnabar); }
.topic-section__lead { color: var(--olive); font-size: var(--step--1); line-height: 1.5; margin: 0 0 0.75rem; }
.topic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.topic-list a { text-decoration: none; }
.topic-list a:hover { color: var(--cinnabar); }
.topic-list span { color: var(--olive); font-size: var(--step--1); }
.topic-lead { font-family: var(--serif); font-size: var(--step-0); line-height: 1.6; margin: 0.5rem 0 1rem; }
.topic-chips { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.topic-chips a { display: inline-block; padding: 0.2rem 0.7rem; border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; font-size: var(--step--1); }
.topic-chips a:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
.topic-chips span { color: var(--olive); }
.section-subtitle { font: 700 var(--step-1)/1.2 var(--serif); margin: 2rem 0 0.75rem; }
.related-topics { margin-top: 2.5rem; }
.topic-sections-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: var(--step--1); }

/* ---------- Страница цитаты ---------- */

.neighbours { display: flex; gap: 1.5rem; margin: 2rem 0 3rem; font-size: var(--step--1); color: var(--ink-soft); }
.neighbours a[rel="next"] { margin-left: auto; }

.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.related a { font-family: var(--serif); font-size: var(--step-0); text-decoration: none; }
.related a:hover { text-decoration: underline; text-decoration-color: var(--cinnabar); }
.related__author { display: block; color: var(--olive); font-size: var(--step--1); }

.comments { margin-top: 3rem; }
.comment { border-top: 1px solid var(--rule); padding: 1rem 0; }
.comment p { margin: 0; }
.comment__head { display: flex; gap: 0.75rem; font-size: var(--step--1); margin-bottom: 0.3rem !important; }
.comment__head time { color: var(--olive); }

.author-bio { font-family: var(--serif); font-size: var(--step-0); line-height: 1.65; margin: 1rem 0; }
.author-head--photo { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.25rem; align-items: start; }
.author-photo { width: 7.5rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; border: 1px solid var(--rule); }
.author-more { font-size: var(--step--1); color: var(--olive); }
@media (max-width: 30rem) {
    .author-head--photo { grid-template-columns: 1fr; }
}

/* ---------- Формы ---------- */

.form { display: grid; gap: 1.1rem; margin-top: 1.5rem; max-width: 34rem; }
.field { display: grid; gap: 0.35rem; }
.field > span { font-size: var(--step--1); font-weight: 500; }
.field small { font-weight: 400; color: var(--olive); }
.field input, .field textarea, .search-big input {
    font: inherit; color: var(--ink); background: var(--paper-raised);
    border: 1px solid var(--rule); border-radius: 4px; padding: 0.6rem 0.75rem; width: 100%;
}
.field textarea { font-family: var(--serif); font-size: var(--step-1); line-height: 1.5; resize: vertical; }
.field input:focus, .field textarea:focus, .search-big input:focus { border-color: var(--ink-soft); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.field__error { color: var(--cinnabar); font-size: var(--step--1); }

.button {
    justify-self: start; font: 500 var(--step-0) var(--sans); color: var(--paper);
    background: var(--ink); border: 0; border-radius: 4px; padding: 0.65rem 1.25rem; cursor: pointer;
}
.button:hover { background: var(--cinnabar); }
.button--ghost { color: var(--ink); background: transparent; border: 1px solid var(--rule); }
.button--ghost:hover { color: var(--paper); border-color: var(--cinnabar); }
.button--small { padding: 0.35rem 0.8rem; font-size: var(--step--1); }

/* ---------- Редактор картинки с цитатой ---------- */

.card-editor__grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 1fr); align-items: start; }
.card-editor__preview { position: sticky; top: 1rem; }
.card-editor__preview canvas { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; border-radius: 6px; box-shadow: 0 6px 24px rgb(0 0 0 / 0.18); background: var(--paper-raised); }
.card-editor__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.card-editor__controls { display: grid; gap: 1.25rem; }
.card-editor__controls fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.card-editor__controls legend { font: 600 var(--step--1) var(--sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--olive); margin-bottom: 0.4rem; }
.card-editor__hint, .card-editor__note { font-size: var(--step--1); margin: 0; }
.segmented { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label { padding: 0.3rem 0.75rem; border: 1px solid var(--rule); border-radius: 999px; font-size: var(--step--1); cursor: pointer; }
.segmented label:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.range { display: grid; gap: 0.25rem; font-size: var(--step--1); }
.check { display: flex; gap: 0.5rem; align-items: center; font-size: var(--step--1); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr)); gap: 0.45rem; }
.swatch { aspect-ratio: 1; border-radius: 6px; border: 2px solid transparent; cursor: pointer; background-size: cover; background-position: center; padding: 0; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }
.swatch[aria-pressed="true"] { border-color: var(--cinnabar); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--cinnabar); }
.swatch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.swatches__upload { justify-self: start; }
@media (max-width: 52rem) {
    .card-editor__grid { grid-template-columns: 1fr; }
    .card-editor__preview { position: static; }
}

.search-big { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; }
.search-hits { margin-bottom: 1.5rem; font-size: var(--step--1); }
.search-hits p { margin: 0.25rem 0; }

.prose { font-size: var(--step-0); }
.prose p, .prose li { max-width: 38rem; }

/* ---------- Страницы ---------- */

.pager { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 2.5rem; font-size: var(--step--1); }
.pager__pages { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; }
.pager__pages a, .pager__pages span { display: inline-block; min-width: 2rem; padding: 0.3rem 0.4rem; text-align: center; text-decoration: none; border-radius: 4px; }
.pager__pages a:hover { background: var(--paper-raised); }
.pager__pages [aria-current] { background: var(--ink); color: var(--paper); }
.pager__edge[aria-disabled] { color: var(--rule); }
.pager__gap { color: var(--olive); }

/* ---------- Подвал ---------- */

.footer {
    max-width: 68rem; margin: 0 auto; padding: 2rem var(--gutter) 3rem;
    border-top: 1px solid var(--rule); color: var(--olive); font-size: var(--step--1);
}
.footer p { margin: 0 0 0.5rem; max-width: 40rem; }
.footer a { margin-right: 1.25rem; }

@media (max-width: 40rem) {
    .nav__submit { margin-left: 0; }
    .quote__text p:first-child::first-letter { font-size: 2.6em; }
    .search-big { flex-direction: column; }
}

@media (prefers-reduced-motion: no-preference) {
    .vote__rating.is-bumped { animation: bump 0.4s ease-out; }
    @keyframes bump { 40% { transform: scale(1.35); color: var(--cinnabar); } }
}

@media print {
    .masthead, .nav, .sidebar, .quote__actions, .footer, .comments form { display: none; }
    body { background: #fff; color: #000; }
}

/* Панель администратора: видна на сайте только вошедшим в админку */
.adminbar {
    background: var(--ink);
    color: var(--paper);
    font: 500 var(--step--1)/1.2 var(--sans);
}
.adminbar__inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.45rem var(--gutter);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    align-items: center;
}
.adminbar a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.adminbar a:hover, .adminbar a:focus-visible { border-bottom-color: currentColor; }
.adminbar__edit { color: #ffd9a8; }
.adminbar__spacer { flex: 1; }
.adminbar__count { background: var(--cinnabar); color: #fff; border-radius: 1rem; padding: 0.05rem 0.5rem; }