/* Стили сайта. Светлый лист на холодном поле, линованные реестры,
   единственный акцент — сургучный. */

:root {
  --ink:        #16181c;
  --ink-soft:   #5c636c;
  --line:       #d5d8dc;
  --line-soft:  #e6e9ec;
  --field:      #e7e8ea;
  --paper:      #ffffff;
  --seal:       #8f2a2a;
  --shade:      #f4f5f6;

  --sheet-w:    1240px;
  --pad:        34px;
  --aside-w:    320px;
  --gap:        36px;

  font-family: ui-sans-serif, "Segoe UI", system-ui, Arial, sans-serif;
  font-size: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 26px 16px 40px;
  background: var(--field);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.sheet {
  max-width: var(--sheet-w);
  margin: 0 auto;
  padding: var(--pad);
  background: var(--paper);
  border: 1px solid var(--line);
}

a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--seal); }

.num { font-variant-numeric: tabular-nums; }

/* --- Идентификация вместо шапки ----------------------------------------- */
/* Блок стоит шириной ОСНОВНОЙ колонки, а не во всю ширину листа, и не несёт
   навигации: иначе получилась бы обычная верхняя полоса. */

.ident {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: calc(100% - var(--aside-w) - var(--gap));
  padding-bottom: 18px;
}

.ident__mark { flex: 0 0 48px; line-height: 0; }
.ident__mark img { width: 48px; height: 48px; display: block; }

.wordmark {
  margin: 0;
  font-size: 25px;
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.wordmark--link { display: block; text-decoration: none; }

.ident__sub {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.ident--inner { padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.ident--inner .wordmark { font-size: 19px; }

.lede {
  max-width: calc(100% - var(--aside-w) - var(--gap));
  margin: 0 0 22px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--ink);
  font-size: 15px;
  color: var(--ink-soft);
}

/* --- Разворот ------------------------------------------------------------ */
/* Правая колонка НЕ липкая и на статьях отсутствует: паспорт монеты
   выводится там полной шириной. */

.spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside-w);
  gap: var(--gap);
  align-items: start;
}

.hero { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.hero-cap { margin: 6px 0 26px; font-size: 12px; color: var(--ink-soft); }

/* --- Реестр -------------------------------------------------------------- */

.reg { width: 100%; }
.reg__wrap { overflow-x: auto; }

.reg__head,
.reg__row {
  display: grid;
  grid-template-columns: 44px 132px minmax(0, 1fr) 96px 56px;
  gap: 14px;
  align-items: center;
}

.reg__head {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.reg__row {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.reg__row:hover { background: #fcfcfd; }

.reg__n { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.reg__pic {
  aspect-ratio: 16 / 9;
  background: var(--shade);
  border: 1px solid var(--line);
  overflow: hidden;
}
.reg__pic img { width: 100%; height: 100%; object-fit: contain; display: block; }

.reg__title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
.reg__title a { text-decoration: none; }
.reg__title a:hover { text-decoration: underline; text-decoration-color: var(--seal); }
.reg__ex { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }

.reg__meta,
.reg__year { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.reg__row--new .reg__title a::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 7px;
  vertical-align: 2px;
  background: var(--seal);
}

/* --- Разделы ------------------------------------------------------------- */

.sect { margin: 0 0 34px; }
.sect__row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 72px;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.sect__row:first-of-type { border-top: 2px solid var(--ink); }
.sect__sign { width: 88px; height: 88px; display: block; }
.sect__name { margin: 0; font-size: 17px; font-weight: 600; }
.sect__name a { text-decoration: none; }
.sect__lead { margin: 3px 0 0; font-size: 13px; color: var(--ink-soft); }
.sect__n { text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; }

/* --- Правая колонка ------------------------------------------------------ */

.aside__block { margin: 0 0 26px; padding-top: 10px; border-top: 2px solid var(--ink); }
.aside__h {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tally { margin: 0; font-size: 14px; }
.tally div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
}
.tally b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Статья -------------------------------------------------------------- */

.art { max-width: 760px; }
.art h1 { margin: 0 0 10px; font-size: 30px; line-height: 1.2; font-weight: 650; }
.art__meta { margin: 0 0 22px; font-size: 13px; color: var(--ink-soft); }
.art__meta a { color: var(--ink-soft); }

.art p { margin: 0 0 1.1em; }
.art h2 {
  margin: 1.9em 0 .6em;
  padding-top: .5em;
  border-top: 1px solid var(--line);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 650;
}
.art ul, .art ol { margin: 0 0 1.1em; padding-left: 1.2em; }
.art li { margin-bottom: .35em; }
.art figure { margin: 1.4em 0; }
.art img { max-width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.art figcaption { margin-top: 6px; font-size: 12px; color: var(--ink-soft); }

/* Паспорт монеты — полной шириной под заголовком, а не в боковой колонке */
.specs {
  width: 100%;
  margin: 0 0 26px;
  border-collapse: collapse;
  font-size: 14px;
}
.specs th, .specs td {
  padding: 7px 0;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.specs th {
  width: 190px;
  font-weight: 400;
  color: var(--ink-soft);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .06em;
  padding-top: 10px;
}
.specs td { font-variant-numeric: tabular-nums; }
.specs tr:first-child th, .specs tr:first-child td { border-top: 2px solid var(--ink); }

.crumbs { margin: 0 0 16px; font-size: 12px; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); }

.nextprev {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 36px;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
  font-size: 14px;
}
.nextprev span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 3px; }
.nextprev .r { text-align: right; }

/* --- Нижний штамп -------------------------------------------------------- */

.stamp {
  display: flex;
  flex-wrap: wrap;
  margin-top: 44px;
  border-top: 2px solid var(--ink);
  font-size: 12px;
}
.stamp__cell {
  padding: 11px 16px 11px 0;
  margin-right: 16px;
  border-right: 1px solid var(--line);
  color: var(--ink-soft);
  text-decoration: none;
}
.stamp__cell:last-child { border-right: 0; }
.stamp__cell--name { color: var(--ink); font-weight: 600; }
.stamp a.stamp__cell:hover { color: var(--seal); }

/* --- Узкие экраны -------------------------------------------------------- */
/* Реестр из пяти треков имеет жёсткий минимум около 380px плюс поля, поэтому
   перестраивается заранее — на 820px, а не у самой границы мобильного. */

@media (max-width: 1080px) {
  :root { --aside-w: 280px; --gap: 28px; }
}

@media (max-width: 900px) {
  :root { --pad: 22px; }
  .spread { grid-template-columns: minmax(0, 1fr); }
  .ident, .lede { max-width: none; }
  .aside { border-top: 2px solid var(--ink); padding-top: 4px; }
}

@media (max-width: 820px) {
  .reg__head { display: none; }
  .reg__row {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
  .reg__n, .reg__meta, .reg__year { display: none; }
  .reg__pic { grid-row: span 2; }
  .sect__row { grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 12px; }
  .sect__sign { width: 56px; height: 56px; }
  .art h1 { font-size: 25px; }
  .specs th { width: 130px; }
  .nextprev { grid-template-columns: 1fr; gap: 14px; }
  .nextprev .r { text-align: left; }
}

@media (max-width: 520px) {
  body { padding: 14px 10px 28px; }
  .wordmark { font-size: 21px; }
  .reg__row { grid-template-columns: minmax(0, 1fr); }
  .reg__pic { grid-row: auto; max-width: 260px; }
}

/* --- Форма обратной связи ------------------------------------------------ */

.wpcf7 { margin: 1.6em 0 0; max-width: 560px; }

.cf-row { margin: 0 0 16px; }

.cf-row label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.wpcf7-form-control {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
}
.wpcf7-form-control:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--seal);
}
textarea.wpcf7-form-control { resize: vertical; min-height: 130px; }

.cf-actions { margin: 0; }

.wpcf7-submit {
  width: auto;
  padding: 10px 26px;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
}
.wpcf7-submit:hover { background: var(--seal); border-color: var(--seal); }

/* Ответ формы. Показывается только после отправки — до неё блока нет в HTML. */
.wpcf7-response-output {
  margin: 18px 0 0;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--shade);
  border-left: 3px solid var(--seal);
}

@media (max-width: 520px) {
  .wpcf7 { max-width: none; }
  .wpcf7-submit { width: 100%; }
}