@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500&display=swap');
:root{
  --paper:#F5F2EC;        /* тёплая бумага — основной фон */
  --paper-2:#EFEBE3;      /* плита под произведением */
  --paper-3:#E4DFD5;      /* линии */
  --ink:#171613;          /* основной текст */
  --ink-2:#55524A;        /* вторичный */
  --ink-3:#8A857A;        /* служебный */
  --bronze:#8A6A3C;       /* единственный акцент */
  --seal:#5E7355;         /* подтверждено */
  --seal-2:#7A6A45;       /* с оговоркой */
  --seal-3:#A8A296;       /* нет данных */
  --d:"Cormorant Garamond",'Iowan Old Style',Palatino,Georgia,serif;
  --s:"Jost",'Helvetica Neue',Inter,-apple-system,Arial,sans-serif;
  --rail:262px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--s);font-weight:300;
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}

/* ============ ЛЕВЫЙ РЕЛЬС ============ */
.rail{position:fixed;top:0;left:0;bottom:0;width:var(--rail);z-index:800;
  border-right:1px solid var(--paper-3);background:var(--paper);
  display:flex;flex-direction:column;justify-content:space-between;padding:38px 30px 30px}
.rail .mk{font-family:var(--d);font-size:23px;line-height:1.12;letter-spacing:.01em;font-weight:400}
.rail .mk i{display:block;font-style:normal;font-family:var(--s);font-size:8.5px;font-weight:400;
  letter-spacing:.44em;text-transform:uppercase;color:var(--ink-3);margin-top:11px}
.rail nav{margin-top:44px}
.rail nav a{display:flex;gap:12px;align-items:baseline;padding:7px 0;font-size:12px;letter-spacing:.07em;
  color:var(--ink-2);transition:color .3s}
.rail nav a em{font-style:normal;font-family:var(--d);font-size:11px;color:var(--ink-3);width:26px;
  letter-spacing:.04em;transition:color .3s}
.rail nav a:hover,.rail nav a.on{color:var(--ink)}
.rail nav a.on em{color:var(--bronze)}
.rail .foot{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);line-height:2}
main{margin-left:var(--rail)}

.topbar{display:none;position:fixed;top:0;left:0;right:0;height:56px;z-index:800;background:var(--paper);
  border-bottom:1px solid var(--paper-3);align-items:center;justify-content:space-between;padding:0 20px}
.topbar .mk{font-family:var(--d);font-size:16px;letter-spacing:.02em}
.topbar button{background:none;border:0;font-family:var(--s);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;color:var(--ink)}
.drawer{display:none;position:fixed;inset:56px 0 0 0;background:var(--paper);z-index:790;padding:26px 20px;overflow:auto}
.drawer.open{display:block}
.drawer a{display:block;padding:13px 0;border-bottom:1px solid var(--paper-3);font-size:13px;letter-spacing:.08em}
@media(max-width:1024px){
  .rail{display:none}main{margin-left:0;padding-top:56px}.topbar{display:flex}
}

/* ============ СЕТКА ============ */
.w{max-width:1220px;padding:0 74px}
.n{max-width:760px;padding:0 74px}
@media(max-width:1024px){.w,.n{padding:0 26px}}
section{padding:118px 0;position:relative}
section+section{border-top:1px solid var(--paper-3)}
.num{position:absolute;top:44px;left:74px;font-family:var(--d);font-size:12px;letter-spacing:.3em;color:var(--ink-3)}
@media(max-width:1024px){.num{left:26px;top:26px}}

/* ============ ТИПОГРАФИКА ============ */
h1{font-family:var(--d);font-weight:300;font-size:clamp(44px,6.6vw,88px);line-height:1.0;letter-spacing:-.015em}
h2{font-family:var(--d);font-weight:300;font-size:clamp(30px,4vw,50px);line-height:1.1;letter-spacing:-.012em}
h3{font-family:var(--d);font-weight:400;font-size:25px;line-height:1.22;margin-bottom:12px}
.kick{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-3);margin-bottom:26px}
.lead{font-family:var(--d);font-size:23px;line-height:1.55;color:var(--ink);max-width:36ch;font-weight:300}
p{color:var(--ink-2);margin-bottom:16px;max-width:64ch}
p b,p strong{color:var(--ink);font-weight:500}
.note{font-size:12.5px;color:var(--ink-3);line-height:1.75;max-width:66ch}
.link{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--paper-3);padding-bottom:5px;display:inline-block;transition:border-color .35s}
.link:hover{border-color:var(--ink)}
.rule{height:1px;background:var(--paper-3);margin:44px 0}

/* ============ ПЕЧАТИ ДОКАЗАТЕЛЬНОСТИ ============ */
.seal{display:inline-flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.seal::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.s1{color:var(--seal)}.s2{color:var(--seal-2)}.s3{color:var(--seal-3)}.sb{color:var(--bronze)}
.seals{display:flex;flex-wrap:wrap;gap:22px}

/* ============ ПРОИЗВЕДЕНИЕ ============ */
.plate{background:var(--paper-2);display:flex;align-items:center;justify-content:center;padding:64px}
.plate img{max-height:min(70vh,620px);width:auto;
  box-shadow:0 3px 8px rgba(23,22,19,.07),0 26px 60px rgba(23,22,19,.13)}
@media(max-width:700px){.plate{padding:26px}}
.wall{background:var(--paper-2);position:relative;overflow:hidden}
.wall img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.16,.7,.2,1)}
a:hover>.wall img,.wall:hover img{transform:scale(1.04)}

.grid{display:grid;gap:1px;background:var(--paper-3)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g2,.g3{grid-template-columns:1fr}}

.card{background:var(--paper);display:block;padding:0 0 26px}
.card .wall{aspect-ratio:4/5}
.card .cap{padding:20px 22px 0}
.card .t{font-family:var(--d);font-size:19px;line-height:1.24;margin-bottom:5px}
.card .m{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}

/* editorial — чередование */
.ed{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0}
.ed>.wall{aspect-ratio:5/6}
.ed .txt{padding:0 74px}
.ed.rev .txt{order:-1}
@media(max-width:900px){.ed{grid-template-columns:1fr}.ed .txt{padding:44px 26px}.ed.rev .txt{order:0}}

/* ============ ЭТИКЕТКА ============ */
.lbl .mv{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-3);margin-bottom:22px}
.lbl .ar{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px}
.lbl .tt{font-family:var(--d);font-weight:300;font-size:clamp(32px,4.4vw,50px);line-height:1.06;margin-bottom:6px}
.lbl .te{font-family:var(--d);font-style:italic;font-size:19px;color:var(--ink-2);margin-bottom:28px}
dl.f{display:grid;grid-template-columns:130px 1fr;gap:0;font-size:13.5px;margin-bottom:30px}
dl.f dt{color:var(--ink-3);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:13px 0;border-top:1px solid var(--paper-3)}
dl.f dd{padding:13px 0;border-top:1px solid var(--paper-3);color:var(--ink)}
dl.f dd.no{color:var(--seal-3);font-style:italic;font-size:12.5px}
@media(max-width:560px){dl.f{grid-template-columns:1fr}dl.f dd{border-top:0;padding-top:0}}

/* ============ РЕЕСТР ============ */
.reg{border-top:1px solid var(--paper-3)}
.reg .row{display:grid;grid-template-columns:104px 1fr 250px;gap:30px;padding:26px 0;
  border-bottom:1px solid var(--paper-3);align-items:start}
.reg .yr{font-family:var(--d);font-size:22px;color:var(--ink);line-height:1.2}
.reg .bd b{display:block;font-size:16px;font-weight:400;color:var(--ink);margin-bottom:4px;font-family:var(--d);font-size:19px}
.reg .bd{font-size:13px;color:var(--ink-2)}
@media(max-width:820px){.reg .row{grid-template-columns:1fr;gap:8px}}

/* ============ ДОКАЗАТЕЛЬСТВА ============ */
.ex{border-top:1px solid var(--paper-3);padding:56px 0}
.ex:first-of-type{border-top:0}
.exh{display:grid;grid-template-columns:110px 1fr;gap:30px;margin-bottom:32px;align-items:baseline}
.exh .no{font-family:var(--d);font-size:44px;line-height:.9;color:var(--paper-3)}
.exh h3{margin-bottom:10px}
@media(max-width:760px){.exh{grid-template-columns:1fr;gap:10px}.exh .no{font-size:32px}}
.exb{display:grid;grid-template-columns:1.08fr 1fr;gap:52px;align-items:start}
@media(max-width:900px){.exb{grid-template-columns:1fr;gap:30px}}
.exp{background:var(--paper-2);padding:34px;display:flex;align-items:center;justify-content:center;
  cursor:zoom-in;min-height:280px}
.exp img{max-height:400px;width:auto;box-shadow:0 2px 6px rgba(23,22,19,.08),0 20px 46px rgba(23,22,19,.14)}
.exa{display:flex;gap:1px;margin-top:1px;background:var(--paper-3)}
.exa img{height:80px;width:auto;object-fit:cover;background:var(--paper-2);padding:6px;cursor:zoom-in;
  opacity:.72;transition:opacity .3s}
.exa img:hover{opacity:1}
.tr{font-family:var(--d);font-size:15.5px;line-height:1.68;color:var(--ink);
  border-left:2px solid var(--bronze);padding-left:22px;margin:20px 0}
.gapbox{border-left:2px solid var(--seal-3);padding-left:22px;margin-top:20px}
.gapbox .h{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.gapbox p{font-size:12.5px;color:var(--ink-2);margin:0}

/* ============ ФИЛЬТРЫ ============ */
.fil{display:flex;flex-wrap:wrap;gap:0 30px;margin-bottom:50px;border-bottom:1px solid var(--paper-3);padding-bottom:18px}
.fil button{background:none;border:0;font-family:var(--s);font-weight:300;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);cursor:pointer;padding:6px 0;position:relative;transition:color .3s}
.fil button:hover{color:var(--ink-2)}
.fil button.on{color:var(--ink)}
.fil button.on::after{content:"";position:absolute;left:0;right:0;bottom:-19px;height:1px;background:var(--bronze)}
.cnt{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-bottom:30px}

/* ============ ГЕРОЙ ============ */
.hero{min-height:calc(100vh - 0px);display:grid;grid-template-columns:1.25fr 1fr;align-items:center}
.hero .art{background:var(--paper-2);height:100vh;display:flex;align-items:center;justify-content:center;padding:70px}
.hero .art img{max-height:78vh;width:auto;
  box-shadow:0 4px 10px rgba(23,22,19,.08),0 34px 80px rgba(23,22,19,.18)}
.hero .side{padding:0 74px}
@media(max-width:1024px){.hero{grid-template-columns:1fr;min-height:0}
  .hero .art{height:auto;padding:40px 26px}.hero .art img{max-height:56vh}
  .hero .side{padding:48px 26px 0}}

/* ============ ФУТЕР ============ */
footer{border-top:1px solid var(--paper-3);padding:74px 0 56px}
footer .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-bottom:56px}
@media(max-width:900px){footer .cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){footer .cols{grid-template-columns:1fr}}
footer h4{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;font-weight:400}
footer a{display:block;font-size:13px;color:var(--ink-2);padding:5px 0;transition:color .3s}
footer a:hover{color:var(--ink)}
footer .fine{border-top:1px solid var(--paper-3);padding-top:26px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:14px;font-size:10.5px;letter-spacing:.09em;color:var(--ink-3)}

/* ============ ПРОСМОТРЩИК ============ */
#v{position:fixed;inset:0;background:#EBE7DF;z-index:1000;display:none;align-items:center;justify-content:center}
#v.on{display:flex}
#v img{max-width:92vw;max-height:86vh;object-fit:contain;
  box-shadow:0 6px 14px rgba(23,22,19,.1),0 40px 90px rgba(23,22,19,.2);
  transition:transform .25s cubic-bezier(.16,.7,.2,1);will-change:transform;cursor:grab}
#v img.z{transition:none}
#v .bar{position:absolute;top:0;left:0;right:0;padding:24px 30px;display:flex;justify-content:space-between;
  align-items:center;transition:opacity .45s}
#v .cap{position:absolute;bottom:0;left:0;right:0;padding:24px 30px;transition:opacity .45s}
#v .cap b{display:block;font-family:var(--d);font-weight:400;font-size:20px;margin-bottom:3px}
#v .cap span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
#v.hide .bar,#v.hide .cap{opacity:0;pointer-events:none}
#v button{background:none;border:0;cursor:pointer;font-family:var(--s);font-weight:300;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);padding:8px}
#v button:hover{color:var(--ink)}
#v .ar{position:absolute;top:50%;transform:translateY(-50%);font-size:34px;letter-spacing:0;padding:22px 26px;line-height:1}
#v .pv{left:8px}#v .nx{right:8px}
#v .ct{font-size:10.5px;letter-spacing:.2em;color:var(--ink-3)}
@media(max-width:760px){#v .ar{font-size:24px;padding:14px}}

/* ============ ЗАГЛУШКА ПРИ СБОЕ ЗАГРУЗКИ ============ */
.wall.miss,.plate.miss,.hero .art.miss{position:relative}
.wall.miss img,.plate.miss img,.hero .art.miss img{visibility:hidden}
.wall.miss::after,.plate.miss::after,.hero .art.miss::after{
  content:"Изображение недоступно";position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--seal-3)}

/* ============ АНИМАЦИЯ ============ */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1.1s cubic-bezier(.16,.7,.2,1),transform 1.1s cubic-bezier(.16,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}