/* Музей пуговиц — общие стили для раздела /catalog/, /item/, /o-kollekcii/, /posetit/
   Палитра и типографика унаследованы от лендинга (index.html) — не менять токены здесь
   без синхронного изменения в лендинге. */

:root{
  --bone:#ece2cb;
  --paper:#f7f1e2;
  --ink:#20241f;
  --ink-soft:#4b4a3f;
  --navy:#22405f;
  --navy-deep:#152738;
  --brass:#a3742f;
  --brass-bright:#c99a4c;
  --verdigris:#5e7a68;
  --line:rgba(32,36,31,0.16);
  --hole:#2a2620;
  --shadow:rgba(21,39,56,0.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bone:#161a22;
    --paper:#1d2431;
    --ink:#e9e2cd;
    --ink-soft:#b7b19c;
    --navy:#8fb1cf;
    --navy-deep:#cfe0ee;
    --brass:#d6ab63;
    --brass-bright:#e9c37e;
    --verdigris:#8fac9a;
    --line:rgba(233,226,205,0.16);
    --hole:#0d1015;
    --shadow:rgba(0,0,0,0.4);
  }
}
:root[data-theme="dark"]{
  --bone:#161a22;
  --paper:#1d2431;
  --ink:#e9e2cd;
  --ink-soft:#b7b19c;
  --navy:#8fb1cf;
  --navy-deep:#cfe0ee;
  --brass:#d6ab63;
  --brass-bright:#e9c37e;
  --verdigris:#8fac9a;
  --line:rgba(233,226,205,0.16);
  --hole:#0d1015;
  --shadow:rgba(0,0,0,0.4);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:"PT Sans","Helvetica Neue",Arial,sans-serif;
  line-height:1.55;
}
::selection{background:var(--brass); color:var(--navy-deep);}
img{max-width:100%;}
[hidden]{display:none!important;}

h1,h2,h3{
  font-family:"Bitter",Georgia,"Times New Roman",serif;
  text-wrap:balance;
  margin:0;
  color:var(--navy-deep);
}
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3{color:var(--ink);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) h1,
  :root:not([data-theme="light"]) h2,
  :root:not([data-theme="light"]) h3{color:var(--ink);}
}

a{color:inherit;}
.wrap{max-width:1120px; margin-inline:auto; padding-inline:24px;}
section{padding-block:clamp(40px,7vw,88px);}

.eyebrow{
  font-family:"PT Mono",ui-monospace,monospace;
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 14px;
}

/* ---------- top bar (идентично лендингу) ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding-block:14px;
  background:color-mix(in srgb, var(--bone) 88%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; font-family:"Bitter",serif; font-weight:700; font-size:1.05rem; text-decoration:none; color:inherit;}
.brand svg{width:28px; height:28px; flex:none;}
.brand small{
  display:block; font-family:"PT Sans",sans-serif; font-weight:400;
  font-size:0.72rem; letter-spacing:0.06em; color:var(--ink-soft);
}
.topbar nav{display:flex; align-items:center; gap:clamp(12px,3vw,26px); font-size:0.92rem; flex-wrap:wrap;}
.topbar nav a{text-decoration:none; color:var(--ink-soft);}
.topbar nav a:hover, .topbar nav a[aria-current="page"]{color:var(--brass);}
.topbar .ticket-link{display:none;}
@media (min-width:640px){
  .topbar .ticket-link{
    display:inline-flex; align-items:center; gap:6px;
    color:var(--navy-deep); font-weight:700; text-decoration:none;
    border-bottom:1px solid var(--brass);
  }
  :root[data-theme="dark"] .topbar .ticket-link{color:var(--ink);}
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 22px;
  background:var(--navy-deep);
  color:var(--paper);
  font-weight:700;
  text-decoration:none;
  border-radius:3px;
  border:1px solid var(--navy-deep);
  font-size:0.96rem;
  cursor:pointer;
}
.btn:hover{background:var(--navy);}
:root[data-theme="dark"] .btn{background:var(--brass); color:var(--navy-deep); border-color:var(--brass);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn{background:var(--brass); color:var(--navy-deep); border-color:var(--brass);}
}
.btn.ghost{background:transparent; color:var(--navy-deep); border-color:var(--line);}
.btn.ghost:hover{border-color:var(--brass); background:transparent;}
:root[data-theme="dark"] .btn.ghost{color:var(--ink);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn.ghost{color:var(--ink);}
}

.link-out{
  text-decoration:none;
  font-weight:700;
  color:var(--navy-deep);
  border-bottom:1px solid var(--brass);
  padding-bottom:1px;
}
:root[data-theme="dark"] .link-out{color:var(--ink);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .link-out{color:var(--ink);}
}

/* ---------- хлебные крошки ---------- */
.crumbs{
  font-family:"PT Mono",monospace;
  font-size:0.76rem;
  color:var(--ink-soft);
  padding-block:16px 0;
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
.crumbs a{color:var(--ink-soft); text-decoration:none; border-bottom:1px dotted var(--line);}
.crumbs a:hover{color:var(--brass); border-color:var(--brass);}
.crumbs .sep{opacity:0.5;}
.crumbs .here{color:var(--navy-deep);}
:root[data-theme="dark"] .crumbs .here{color:var(--ink);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .crumbs .here{color:var(--ink);}
}

/* ---------- page header (для внутренних разделов) ---------- */
.page-head{padding-block:20px clamp(28px,5vw,48px);}
.page-head h1{font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.1;}
.page-head p.lede{max-width:64ch; margin-top:16px; color:var(--ink-soft); font-size:1.02rem;}

/* ---------- фильтры каталога ---------- */
.filters{
  display:flex; flex-wrap:wrap; gap:14px 22px; align-items:flex-end;
  padding-block:0 28px;
  border-bottom:1px solid var(--line);
  margin-bottom:32px;
}
.filter-group{display:flex; flex-direction:column; gap:6px;}
.filter-group label{
  font-family:"PT Mono",monospace; font-size:0.7rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-soft);
}
.filter-group select{
  font-family:"PT Sans",sans-serif; font-size:0.92rem;
  padding:9px 12px; border:1px solid var(--line); border-radius:3px;
  background:var(--paper); color:var(--ink);
  min-width:200px;
}
.filter-group.checkbox{flex-direction:row; align-items:center; gap:8px; padding-bottom:9px;}
.filter-group.checkbox label{text-transform:none; font-size:0.92rem; letter-spacing:0; color:var(--ink); font-family:"PT Sans",sans-serif; order:2;}
.filter-group.checkbox input{order:1; width:16px; height:16px; accent-color:var(--brass);}
.filters .count{
  margin-left:auto; align-self:center;
  font-family:"PT Mono",monospace; font-size:0.78rem; color:var(--ink-soft);
  padding-bottom:9px;
}
.filters .reset{
  align-self:center; margin-bottom:9px;
  background:none; border:none; padding:0; cursor:pointer;
  font-family:"PT Sans",sans-serif; font-size:0.86rem;
  color:var(--brass); text-decoration:underline;
}

/* ---------- сетка карточек ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:20px;
}
.card{
  display:flex; flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  text-decoration:none; color:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 14px 30px -18px var(--shadow);}
.card .thumb{
  aspect-ratio:4/3;
  background:
    radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--bone) 60%, transparent), transparent 65%),
    var(--bone);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.card .thumb img{width:100%; height:100%; object-fit:cover;}
.card .thumb svg{width:56%; height:56%; filter:drop-shadow(0 3px 4px var(--shadow));}
.card .thumb .placeholder-note{
  position:absolute; bottom:6px; right:8px;
  font-family:"PT Mono",monospace; font-size:0.62rem; color:var(--ink-soft);
  opacity:0.65;
}
.card .tier-badge{
  position:absolute; top:8px; left:8px;
  display:inline-flex; align-items:center; gap:4px;
  background:color-mix(in srgb, var(--navy-deep) 82%, transparent);
  color:var(--paper);
  font-family:"PT Mono",monospace; font-size:0.62rem; letter-spacing:0.04em;
  text-transform:uppercase;
  padding:3px 7px; border-radius:2px;
}
.card .tier-badge svg{width:11px; height:11px; fill:currentColor;}
.card .body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.card .kp-no{font-family:"PT Mono",monospace; font-size:0.68rem; color:var(--brass);}
.card h3{font-size:1.02rem; line-height:1.25;}
.card .meta{
  margin-top:auto; padding-top:8px;
  display:flex; flex-wrap:wrap; gap:6px 10px;
  font-size:0.78rem; color:var(--ink-soft);
}
.card .meta span{white-space:nowrap;}
.card .mark-flag{color:var(--verdigris); font-weight:700;}
.empty-state{
  padding:48px 0; text-align:center; color:var(--ink-soft);
  font-family:"PT Mono",monospace; font-size:0.9rem;
}

/* ---------- бейджи пласта (переиспользуем цвета монет) ---------- */
.plast-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"PT Mono",monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em;
  padding:3px 8px; border-radius:2px; border:1px solid var(--line); color:var(--ink-soft);
}
.plast-pill.vostochnaya-prussiya{border-color:color-mix(in srgb, var(--brass) 50%, var(--line));}
.plast-pill.sovetskaya-epoha{border-color:color-mix(in srgb, var(--verdigris) 50%, var(--line));}
.plast-pill.sovremennost{border-color:color-mix(in srgb, var(--ink-soft) 40%, var(--line));}

/* ---------- страница экспоната ---------- */
.item-hero{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px,5vw,56px);
  align-items:start;
}
@media (max-width:860px){ .item-hero{grid-template-columns:1fr;} }

.gallery{display:flex; flex-direction:column; gap:10px;}
.gallery .main-photo{
  aspect-ratio:1/1;
  background:
    radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--bone) 60%, transparent), transparent 65%),
    var(--bone);
  border:1px solid var(--line); border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; cursor:zoom-in;
  position:relative;
}
.gallery .main-photo img{width:100%; height:100%; object-fit:cover;}
.gallery .main-photo svg{width:46%; height:46%; filter:drop-shadow(0 3px 4px var(--shadow));}
.gallery .main-photo .zoom-hint{
  position:absolute; bottom:10px; right:10px;
  font-family:"PT Mono",monospace; font-size:0.68rem;
  background:color-mix(in srgb, var(--navy-deep) 75%, transparent); color:var(--paper);
  padding:4px 8px; border-radius:2px;
}
.gallery .thumbs{display:flex; gap:10px;}
.gallery .thumbs button{
  all:unset; cursor:pointer;
  flex:1; aspect-ratio:1/1;
  border:2px solid transparent; border-radius:4px; overflow:hidden;
  background:var(--bone);
  display:flex; align-items:center; justify-content:center;
}
.gallery .thumbs button img{width:100%; height:100%; object-fit:cover;}
.gallery .thumbs button svg{width:50%; height:50%;}
.gallery .thumbs button.active{border-color:var(--brass);}
.gallery .thumbs .label{
  display:block; margin-top:4px; text-align:center;
  font-family:"PT Mono",monospace; font-size:0.64rem; color:var(--ink-soft);
}
.gallery .thumb-wrap{flex:1; display:flex; flex-direction:column;}

.item-info .kp-no{font-family:"PT Mono",monospace; font-size:0.8rem; color:var(--brass);}
.item-info h1{margin-top:6px; font-size:clamp(1.6rem,3.4vw,2.15rem);}
.item-info .legenda{margin-top:16px; color:var(--ink-soft); max-width:56ch;}

dl.specs{
  margin:22px 0 0; display:grid; grid-template-columns:auto 1fr; gap:10px 18px;
  font-size:0.94rem;
}
dl.specs dt{font-family:"PT Mono",monospace; font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); align-self:start; padding-top:2px;}
dl.specs dd{margin:0;}
dl.specs dd.no-kleimo{color:var(--ink-soft); font-style:italic;}

.media-block{margin-top:26px; padding:18px; border:1px solid var(--line); border-radius:6px; background:var(--paper);}
.media-block .label{font-family:"PT Mono",monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--brass); margin-bottom:10px;}
.media-block video, .media-block audio{width:100%; display:block; border-radius:4px; background:var(--hole);}
.media-block .coming-soon{
  display:flex; align-items:center; gap:10px;
  font-size:0.88rem; color:var(--ink-soft); font-style:italic;
  padding:14px; border:1px dashed var(--line); border-radius:4px;
}

.item-nav{margin-top:36px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;}

/* ---------- лайтбокс ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:color-mix(in srgb, var(--navy-deep) 92%, black 8%);
  display:flex; align-items:center; justify-content:center;
  overflow:auto; cursor:zoom-out;
}
.lightbox img{
  max-width:min(92vw,1400px); max-height:none; width:auto; height:auto;
  cursor:zoom-in; transition:transform .2s ease;
  transform-origin:center center;
  margin:auto;
}
.lightbox img.zoomed{cursor:zoom-out; max-width:none;}
.lightbox .lb-close{
  position:fixed; top:18px; right:22px;
  background:color-mix(in srgb, var(--navy-deep) 70%, transparent); color:var(--paper);
  border:1px solid color-mix(in srgb, var(--paper) 30%, transparent);
  border-radius:3px; padding:8px 14px; font-size:0.86rem; cursor:pointer;
  font-family:"PT Sans",sans-serif;
}
.lightbox .lb-caption{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  font-family:"PT Mono",monospace; font-size:0.76rem; color:var(--paper);
  background:color-mix(in srgb, var(--navy-deep) 70%, transparent);
  padding:6px 12px; border-radius:3px;
}

/* ---------- лонгрид (kak-ih-delali, o-kollekcii) ---------- */
.longread{max-width:72ch; margin-inline:auto;}
.longread .lede{font-size:1.08rem; color:var(--ink-soft); max-width:60ch;}
.longread h2{font-size:clamp(1.4rem,2.6vw,1.8rem); margin-top:48px;}
.longread p{margin:16px 0 0; color:var(--ink);}
.longread .pull{
  border-left:3px solid var(--brass); padding-left:20px;
  font-family:"Bitter",serif; font-size:1.15rem; color:var(--navy-deep);
  font-weight:600; margin:28px 0;
}
:root[data-theme="dark"] .longread .pull{color:var(--ink);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .longread .pull{color:var(--ink);}
}

.steps{list-style:none; margin:24px 0 0; padding:0; counter-reset:step; display:flex; flex-direction:column; gap:0;}
.steps li{
  counter-increment:step;
  display:grid; grid-template-columns:44px 1fr; gap:18px;
  padding-block:20px; border-top:1px solid var(--line);
}
.steps li:last-child{border-bottom:1px solid var(--line);}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:"PT Mono",monospace; font-weight:700; color:var(--brass); font-size:1.05rem;
}
.steps li h3{font-size:1rem; margin-bottom:6px;}
.steps li p{margin:0; color:var(--ink-soft); font-size:0.94rem;}

.figure{margin:28px 0;}
.figure .frame{
  aspect-ratio:16/10;
  background:radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--bone) 60%, transparent), transparent 65%), var(--bone);
  border:1px solid var(--line); border-radius:6px;
  display:flex; align-items:center; justify-content:center;
}
.figure .frame svg{width:34%; height:34%;}
.figure figcaption{margin-top:8px; font-family:"PT Mono",monospace; font-size:0.74rem; color:var(--ink-soft);}

/* ---------- квитанции (o-kollekcii) ---------- */
.receipts{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin:28px 0;}
.receipt-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-left:3px solid var(--brass);
  border-radius:2px;
  padding:16px 18px;
  transform:rotate(var(--rr,0deg));
  box-shadow:0 10px 22px -16px var(--shadow);
}
.receipt-card .rc-date{font-family:"PT Mono",monospace; font-size:0.7rem; color:var(--brass); text-transform:uppercase; letter-spacing:0.04em;}
.receipt-card .rc-text{margin-top:8px; font-family:"Bitter",serif; font-style:italic; color:var(--ink); font-size:0.94rem; line-height:1.4;}
.receipt-card .rc-who{margin-top:10px; font-size:0.8rem; color:var(--ink-soft);}

/* ---------- редирект-страница (posetit) ---------- */
.redirect-box{
  min-height:60vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:16px;
}

/* ---------- footer ---------- */
footer{padding-block:32px; border-top:1px solid var(--line);}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center; font-size:0.86rem; color:var(--ink-soft);}
footer a{color:var(--ink-soft); text-decoration:underline;}

@media (max-width:600px){
  .filters{flex-direction:column; align-items:stretch;}
  .filter-group select{min-width:0; width:100%;}
  .filters .count, .filters .reset{margin-left:0;}
}