/* «Опись» — скелет gos-culturepmr.org.
 *
 * Правило 6 плейбука: макет обязан резко отличаться от других доноров сетки,
 * и проверять надо по первому экрану. Поэтому здесь:
 *   — верхней полосы «лого слева + меню справа» нет вообще
 *     (она у light-auto, caricyno, profsreda);
 *   — навигация не рубричная, а географическая — по районам;
 *   — вместо карточек (light-auto, caricyno) строки реестра с линейками;
 *   — вместо тёмной колонки слева (rehes) светлая бумага;
 *   — вместо полос во всю ширину (profsreda) узкая колонка описи.
 */

:root {
  --paper: #f7f5f0;
  --ink: #23201c;
  --muted: #6d675e;
  --rule: #cdc6ba;
  --rule-soft: #e3ded4;
  --accent: #7d4a2e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.65 Georgia, "Times New Roman", serif;
  -webkit-text-size-adjust: 100%;
}

.sheet {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

/* ---------- Первый экран ---------- */

.mast { padding: 4.5rem 0 0; }
.mast--compact { padding-top: 2.25rem; }

.wordmark {
  display: block;
  font-size: clamp(2rem, 7vw, 3.4rem);
  line-height: 1.04;
  margin: 0;
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark span { display: block; color: var(--accent); }
.wordmark--small { font-size: clamp(1.15rem, 3.4vw, 1.5rem); }
.wordmark--small span { display: inline; }
.wordmark--small span::before { content: " "; }

.kicker {
  margin: .85rem 0 0;
  font: 400 .76rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Географический указатель — он же главная навигация. */
.places {
  margin: 1.75rem 0 0;
  padding: .7rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  font: 400 .82rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .04em;
}
.places a { color: var(--muted); text-decoration: none; }
.places a:hover { color: var(--accent); }

/* ---------- Тело ---------- */

.body { padding: 2.5rem 0 0; }

h1, h2, h3 { font-weight: 400; line-height: 1.2; }
h1 { font-size: clamp(1.55rem, 4.4vw, 2.15rem); margin: 0 0 1.25rem; }
h2 { font-size: 1.32rem; margin: 2.4rem 0 .9rem; }
h3 { font-size: 1.1rem; margin: 1.8rem 0 .6rem; }

p { margin: 0 0 1.15rem; }
a { color: var(--accent); }

.lede { font-size: 1.08rem; color: #3a352e; }
.meta {
  font: 400 .78rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: -.5rem 0 1.6rem;
}

/* ---------- Опись: строки вместо карточек ---------- */

.reg { margin: 0; padding: 0; list-style: none; }

.reg li {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: 0 1.1rem;
  align-items: baseline;
  padding: .85rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.reg li:first-child { border-top: 1px solid var(--rule); }

.reg .num {
  font: 400 .8rem/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.reg .name { min-width: 0; }
.reg .name a { text-decoration: none; color: var(--ink); }
.reg .name a:hover { color: var(--accent); text-decoration: underline; }
.reg .place {
  display: block;
  font: 400 .8rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--muted);
  margin-top: .15rem;
}
.reg .when {
  font: 400 .78rem/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Врезка-иллюстрация слева от строки — вместо сетки карточек. */
.reg li.with-mark { grid-template-columns: 3.5rem 1fr auto; }
.reg .mark {
  grid-column: 1;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--rule);
  background: #fff;
  align-self: start;
}
.reg .mark img, .reg .mark svg { display: block; width: 100%; height: 100%; }

@media (max-width: 34rem) {
  .reg li { grid-template-columns: 2.6rem 1fr; }
  .reg .when { grid-column: 2; }
  .reg .mark { width: 2.6rem; height: 2.6rem; }
}

/* ---------- Иллюстрации в тексте ---------- */

figure.wp-block-image {
  margin: 2rem 0;
  padding: 0;
}
figure.wp-block-image img,
figure.wp-block-image svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: #fff;
}
/* Заставка записи — узкая полоса, а не «фотография сверху»: сайт остаётся
   описью, а не блогом с картинками. */
figure.banner { margin: 1.4rem 0 2rem; }
figure.banner img { height: 110px; object-fit: cover; }

figure.wp-block-image figcaption {
  margin-top: .55rem;
  font: 400 .82rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--muted);
}

blockquote {
  margin: 1.8rem 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--accent);
  color: #3a352e;
}

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

.foot {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.foot-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.5rem;
  font: 400 .86rem/1.85 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.foot-index b {
  display: block;
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .3rem;
}
.foot-index a { display: block; color: var(--ink); text-decoration: none; }
.foot-index a:hover { color: var(--accent); }

.foot-note {
  margin: 2rem 0 0;
  font: 400 .8rem/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--muted);
}

/* ---------- Тёмная тема ---------- */

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #191714; --ink: #e8e3da; --muted: #9a938a;
    --rule: #3a3530; --rule-soft: #2b2723; --accent: #c98d63;
  }
  .reg .mark, figure.wp-block-image img, figure.wp-block-image svg {
    background: #221f1b;
  }
  .lede, blockquote { color: #cfc8bd; }
}