/* ─────────────────────────────────────────────────────────────
   Каталог монет России. Грузится только на /coins.php и /coin.php.
   Палитра и шрифты — общие, из style.css.
   ───────────────────────────────────────────────────────────── */

.cn-wrap{padding-bottom:80px}
.cn-crumbs{font:italic 600 1rem var(--engr);color:var(--parch-dim);margin:0 0 26px}
.cn-crumbs a{color:var(--gold)}

/* поиск */
.cn-search{display:flex;gap:12px;max-width:720px;margin:0 auto 34px}
.cn-search input{flex:1;min-width:0;padding:15px 18px;background:rgba(14,9,5,.7);color:var(--parch);
  border:1px solid var(--line-2);font:500 1.05rem var(--serif)}
.cn-search input:focus{outline:none;border-color:var(--gold)}
.cn-count{color:var(--parch-dim);margin:0 0 18px}

/* эпохи и правители */
.cn-era{margin:30px 0 70px}
.cn-rulers{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.cn-ruler{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 16px 20px;
  border:1px solid var(--line);background:linear-gradient(170deg,rgba(38,25,14,.66),rgba(14,9,5,.72));
  color:inherit;transition:border-color .35s,transform .45s var(--ease)}
.cn-ruler:hover{border-color:var(--gold);transform:translateY(-4px)}
.cn-portrait{width:96px;height:96px;border-radius:50%;overflow:hidden;border:1px solid var(--line-2);
  background:#140d06;display:block;flex:none}
.cn-portrait img,.cn-portrait.big{width:100%;height:100%;object-fit:cover;display:block}
.cn-portrait.big{width:150px;height:150px;border-radius:50%;border:1px solid var(--line-2)}
.cn-rname{margin-top:14px;font:700 1.1rem var(--display);color:var(--parch)}
.cn-ryears{font:italic 600 .95rem var(--engr);color:var(--gold)}
.cn-rcount{font-size:.88rem;color:var(--parch-faint);margin-top:4px}

/* очерк эпохи */
.cn-essay{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;padding:30px;
  border:1px solid var(--line-2);background:linear-gradient(170deg,rgba(38,25,14,.66),rgba(14,9,5,.72));margin-bottom:26px}
.cn-essay p{margin:0;color:var(--parch-2);font-size:1.05rem;line-height:1.7}

/* оглавление номиналов */
.cn-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.cn-toc a{padding:7px 12px;border:1px solid var(--line);color:var(--parch-2);font-size:.92rem}
.cn-toc a:hover{border-color:var(--gold);color:var(--gold-hi)}
.cn-toc em{font-style:normal;color:var(--parch-faint);margin-left:4px}

/* номинал и сетка монет */
.cn-denom{margin:44px 0 0;scroll-margin-top:90px}
.cn-denom h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 .3em}
.cn-denom h2 small{font:italic 600 1rem var(--engr);color:var(--parch-faint);margin-left:8px}
.cn-note{color:var(--parch-dim);font-style:italic;max-width:80ch;margin:0 0 18px}
.cn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.cn-card{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--line);
  background:rgba(20,13,6,.66);color:inherit;transition:border-color .3s,transform .4s var(--ease)}
.cn-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.cn-thumb{display:block;aspect-ratio:2/1;background:rgba(0,0,0,.2);margin-bottom:8px}
.cn-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.cn-title{font:700 1rem var(--display);color:var(--parch)}
.cn-sub{font-size:.85rem;color:var(--parch-faint)}
.cn-foot{display:flex;justify-content:space-between;align-items:center;font:italic 600 .9rem var(--engr);color:var(--gold);margin-top:4px}

/* значок редкости */
.cn-rar{display:inline-block;padding:1px 7px;border:1px solid var(--gold);color:var(--gold);
  font:700 .78rem var(--display);font-style:normal;letter-spacing:.04em}
.cn-rar.strong{background:var(--gold);color:#1a1007}

/* карточка монеты */
.cn-coin{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:start}
.cn-photos{display:flex;flex-direction:column;gap:14px}
.cn-photos{align-items:center}
/* снимки небольшие (сторона монеты ~300 px): не растягиваем, иначе мылятся */
.cn-photos img{width:auto;max-width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line-2)}
.cn-photos a:hover img{border-color:var(--gold)}
.cn-facts{width:100%;border-collapse:collapse;font-size:.98rem}
.cn-facts th{text-align:left;font:600 .78rem/1.3 var(--engr);letter-spacing:.14em;text-transform:uppercase;
  color:var(--parch-faint);padding:11px 16px 11px 0;vertical-align:top;width:38%;font-weight:600}
.cn-facts td{padding:11px 0;color:var(--parch);border-top:1px solid var(--line)}
.cn-facts tr:first-child td{border-top:0}
.cn-facts tr th{border-top:1px solid var(--line)}
.cn-facts tr:first-child th{border-top:0}
.cn-text{margin-top:38px;padding:30px;border:1px solid var(--line-2);background:rgba(20,13,6,.66)}
.cn-text h2{font-size:1.5rem;margin:0 0 .5em}
.cn-text p{margin:0 0 14px;color:var(--parch-2);font-size:1.05rem;line-height:1.7}

/* пояснения к шкалам */
.cn-legend{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}
.cn-legend > div{padding:24px 26px;border:1px solid var(--line);background:rgba(20,13,6,.6)}
.cn-legend h3{margin:0 0 .5em;color:var(--gold);font-size:1.15rem}
.cn-legend p{margin:0;color:var(--parch-dim);line-height:1.75}
.cn-legend b{color:var(--parch)}

@media (max-width:860px){
  .cn-coin,.cn-legend{grid-template-columns:1fr}
  .cn-essay{grid-template-columns:1fr;justify-items:center;text-align:left}
  .cn-search{flex-direction:column}
}