/* REMONT — дизайн-система v1 (по мастер-документу §4)
   Шрифты: Cormorant + Golos Text — временная бесплатная пара
   до покупки веб-лицензий Kazimir + Graphik (Prata и Inter запрещены). */

:root{
  --plaster:#F3EFE9;
  --graphite:#161513;
  --ink:#1A1917;
  --gypsum:#F5F2EC;
  --stone:#C7BFB2;
  --bronze:#9C7E52;
  --surik:#A63A27;
  --serif:"Cormorant",Georgia,serif;
  --sans:"Golos Text","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(20px,8vw,120px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--plaster);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;text-wrap:balance}

.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--pad)}

.label{
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--bronze);font-weight:500;
}
.label--stone{color:var(--stone)}

/* ─── навигация ─── */
.nav{padding:22px 0;position:relative;z-index:10}
.nav .wrap{display:flex;align-items:baseline;gap:34px;flex-wrap:wrap}
.nav-mark{font-family:var(--serif);font-size:19px;letter-spacing:.16em;font-weight:500}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:baseline}
.nav-links a{font-size:13px;letter-spacing:.07em;text-transform:uppercase;transition:color .25s ease-out}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--surik)}
.nav-links a[aria-current="page"]{border-bottom:1px solid currentColor;padding-bottom:2px}
.nav-lang{font-family:var(--serif);font-size:15px;letter-spacing:.05em;margin-left:8px;color:var(--stone)}
.nav-lang b{color:inherit;font-weight:500}
.nav--dark{color:var(--gypsum)}
.nav--dark .nav-lang{color:rgba(199,191,178,.55)}
@media (max-width:720px){.nav-links{gap:16px}.nav .wrap{gap:18px}}

/* ─── герой-манифест ─── */
.hero{
  background:var(--graphite);color:var(--gypsum);
  min-height:92vh;display:flex;flex-direction:column;
}
.hero .wrap{width:100%}
.hero-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:9vh}
.hero-mark{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(58px,9.5vw,150px);letter-spacing:.11em;line-height:1;
  margin-left:.055em;
}
.hero-sub{
  font-family:var(--serif);font-size:13px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--stone);margin-top:20px;
}
.f-desc{
  font-family:var(--serif);font-size:10.5px;letter-spacing:.38em;
  text-transform:uppercase;color:var(--bronze);margin-top:6px;
}
.dim{margin-top:26px;max-width:540px}
.dim-line{position:relative;height:1px;background:var(--stone);opacity:.65}
.dim-line::before,.dim-line::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--stone)}
.dim-line::before{left:0}.dim-line::after{right:0}
.dim-cap{margin-top:9px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--stone)}
.manifesto{
  margin-top:8vh;max-width:34em;
  font-family:var(--serif);font-size:clamp(22px,3vw,33px);line-height:1.38;
}
.manifesto span{display:block;opacity:0;transform:translateY(14px);animation:rise .38s ease-out forwards}
.manifesto span:nth-child(1){animation-delay:.25s}
.manifesto span:nth-child(2){animation-delay:.34s}
.manifesto span:nth-child(3){animation-delay:.43s}
.manifesto span:nth-child(4){animation-delay:.52s}
.manifesto span:nth-child(5){animation-delay:.61s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.manifesto span{animation:none;opacity:1;transform:none}}
.hero-desc{padding-bottom:42px}
.hero-desc .label--stone{display:block}
.hero-scroll{width:1px;height:52px;background:var(--stone);opacity:.55;margin-top:24px}

/* ─── секции ─── */
.section{padding-block:clamp(90px,14vh,180px) 0}
.section:last-of-type{padding-bottom:clamp(90px,14vh,160px)}
.section-head{margin-bottom:52px}
.section-head .label{display:block;margin-bottom:14px}
.section-head h2{font-size:clamp(34px,4.5vw,56px)}
.srule{position:relative;height:1px;background:var(--stone);margin-bottom:30px}
.srule::before,.srule::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--stone)}
.srule::before{left:0}.srule::after{right:0}

/* ─── витрина на главной ─── */
.showcase{display:grid;gap:clamp(40px,6vw,90px)}
.show-item{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:end}
.show-item:nth-child(even){direction:rtl}
.show-item>*{direction:ltr}
.show-item figure{overflow:hidden;aspect-ratio:4/5;background:var(--stone)}
.show-item img{width:100%;height:100%;object-fit:cover;transition:filter .6s ease-out,transform .6s ease-out}
.show-item:hover img{filter:grayscale(1)}
.show-num{font-family:var(--serif);font-size:15px;color:var(--bronze);letter-spacing:.06em}
.show-title{font-family:var(--serif);font-size:clamp(26px,3vw,40px);margin-top:8px;line-height:1.15}
.show-meta{margin-top:10px}
@media (max-width:760px){.show-item{grid-template-columns:1fr}.show-item:nth-child(even){direction:ltr}}

/* ─── реестр работ ─── */
.registry{display:grid;gap:clamp(56px,8vw,110px)}
.reg-item{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,72px);align-items:center}
.reg-item:nth-child(even){grid-template-columns:.9fr 1.1fr}
.reg-item:nth-child(even) figure{order:2}
.reg-item figure{overflow:hidden;aspect-ratio:3/2;background:var(--stone)}
.reg-item img{width:100%;height:100%;object-fit:cover;transition:filter .6s ease-out}
.reg-item:hover img{filter:grayscale(1)}
.reg-info .show-num{display:block}
.reg-info h3{font-size:clamp(26px,3.2vw,42px);margin-top:10px}
.reg-info .label{display:block;margin-top:12px;color:var(--ink);opacity:.55}
.reg-more{display:inline-block;margin-top:26px;font-size:13px;letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid var(--stone);padding-bottom:3px;transition:color .25s,border-color .25s}
a:hover .reg-more,.reg-more:hover{color:var(--surik);border-color:var(--surik)}
@media (max-width:760px){.reg-item,.reg-item:nth-child(even){grid-template-columns:1fr}.reg-item:nth-child(even) figure{order:0}}

/* ─── страница кейса ─── */
.case-head{padding-top:clamp(60px,9vh,110px)}
.case-head .show-num{font-size:17px}
.case-head h1{font-size:clamp(38px,5.5vw,72px);margin-top:12px}
.case-facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:26px;padding-top:18px;border-top:1px solid var(--stone)}
.case-hero{margin-top:56px}
.case-hero img{width:100%;max-height:82vh;object-fit:cover}
.case-text{max-width:44em;margin-top:64px}
.case-text h2{font-size:26px;margin-bottom:14px}
.case-text .block+.block{margin-top:40px}
.gallery{margin-top:72px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,48px)}
.gallery figure{overflow:hidden;background:var(--stone)}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:filter .6s ease-out}
.gallery figure:nth-child(3n){grid-column:span 2}
.gallery figure:nth-child(3n) img{aspect-ratio:3/2}
@media (max-width:640px){.gallery{grid-template-columns:1fr}.gallery figure:nth-child(3n){grid-column:span 1}}
.case-nav{display:flex;justify-content:space-between;gap:20px;margin-top:90px;padding-top:22px;border-top:1px solid var(--stone);flex-wrap:wrap}
.case-nav a{font-size:13px;letter-spacing:.07em;text-transform:uppercase;transition:color .25s}
.case-nav a:hover{color:var(--surik)}

/* ─── истории ─── */
.stories-list{display:grid;gap:2px;border-top:1px solid var(--stone)}
.story-card{padding:44px 0;border-bottom:1px solid var(--stone);display:grid;grid-template-columns:120px 1fr;gap:clamp(20px,4vw,60px)}
.story-card .show-num{padding-top:8px}
.story-card h3{font-size:clamp(26px,3vw,38px)}
.story-teaser{margin-top:16px;max-width:38em;font-family:var(--serif);font-size:19px;line-height:1.5}
@media (max-width:640px){.story-card{grid-template-columns:1fr;gap:8px}}
.article{max-width:41em;margin:0 auto}
.article-head{text-align:left;padding-top:clamp(50px,8vh,90px);margin-bottom:56px}
.article-head h1{font-size:clamp(36px,5vw,58px);margin-top:14px}
.article p{font-family:var(--serif);font-size:20px;line-height:1.62;margin-bottom:1.2em}
.article .article-end{width:34px;height:1px;background:var(--stone);margin-top:40px}

/* ─── ателье ─── */
.atelier-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:start}
.portrait-mat{background:var(--gypsum);padding:clamp(16px,2vw,30px);border:1px solid var(--stone)}
.portrait-mat img{filter:grayscale(1);width:100%}
.portrait-cap{margin-top:14px}
.atelier-text{max-width:42em}
.atelier-text p{margin-bottom:1.1em}
.atelier-quote{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);line-height:1.4;margin:26px 0}
@media (max-width:800px){.atelier-grid{grid-template-columns:1fr}}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;border-top:1px solid var(--stone);margin-top:26px}
.service{border-bottom:1px solid var(--stone);padding:26px 26px 26px 0}
.service .label{display:block;margin-bottom:10px}
.service p{font-size:15.5px}

/* ─── контакты / форма ─── */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,100px)}
@media (max-width:800px){.contact-grid{grid-template-columns:1fr}}
.contact-lead{max-width:30em;margin-top:18px}
form .field{margin-top:30px}
form label{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--bronze);margin-bottom:10px}
form input,form textarea{
  width:100%;border:0;border-bottom:1px solid var(--stone);background:transparent;
  font-family:var(--sans);font-size:17px;color:var(--ink);padding:8px 0;
  transition:border-color .25s;
}
form input:focus,form textarea:focus{outline:none;border-color:var(--ink)}
form textarea{min-height:110px;resize:vertical}
.btn{
  display:inline-block;margin-top:38px;border:1px solid var(--ink);background:transparent;
  font-family:var(--sans);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 42px;cursor:pointer;color:var(--ink);
  transition:background .25s,color .25s,border-color .25s;
}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--gypsum)}
.btn--wa{border-color:var(--stone)}
.btn--wa:hover{background:transparent;color:var(--surik);border-color:var(--surik)}
.form-done{display:none;margin-top:44px}
.form-done.on{display:block}
.stamp{
  display:inline-block;border:2px solid var(--surik);color:var(--surik);
  padding:8px 18px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  transform:rotate(-4deg);
  animation:stampin .12s ease-out;
}
@keyframes stampin{from{opacity:0;transform:rotate(-4deg) scale(1.06)}to{opacity:1;transform:rotate(-4deg) scale(1)}}
.form-done p{margin-top:20px;font-family:var(--serif);font-size:21px}
.contact-side p{margin-bottom:8px}
.contact-side .label{display:block;margin:30px 0 8px}
.contact-side a:hover{color:var(--surik)}

/* ─── тизер-блоки на главной ─── */
.teaser-dark{background:var(--graphite);color:var(--gypsum);padding-block:clamp(80px,12vh,150px);margin-top:clamp(90px,14vh,180px)}
.teaser-dark .label{color:var(--stone)}
.teaser-dark h2{font-size:clamp(28px,3.6vw,46px);max-width:22em;margin-top:16px}
.teaser-dark p{max-width:38em;margin-top:20px;color:var(--stone)}
.teaser-dark .reg-more{border-color:rgba(199,191,178,.4);color:var(--gypsum)}
.teaser-dark .reg-more:hover{color:var(--surik);border-color:var(--surik)}

/* ─── 404 ─── */
.page404{min-height:82vh;display:flex;flex-direction:column;justify-content:center}
.page404 h1{font-size:clamp(34px,5vw,60px);max-width:18em}
.page404 a{display:inline-block;margin-top:34px}

/* ─── футер ─── */
footer{border-top:1px solid var(--stone);margin-top:clamp(90px,14vh,170px);padding:44px 0 56px}
.teaser-dark+footer{margin-top:0;border-top:none}
footer .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:baseline}
.f-mark{font-family:var(--serif);font-size:17px;letter-spacing:.14em}
.f-links{display:flex;gap:22px;flex-wrap:wrap}
.f-links a{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);opacity:.6;transition:opacity .25s,color .25s}
.f-links a:hover{opacity:1;color:var(--surik)}
.f-meta{font-size:12.5px;color:var(--bronze);text-align:right}
.f-meta a:hover{color:var(--surik)}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}.f-meta{text-align:left}}

/* ═══ v2: герой-вывеска, интерактив, мобильная версия ═══ */

/* — герой: центрированный локап-вывеска — */
.hero-body{justify-content:flex-start;padding-top:clamp(48px,10vh,120px)}
.hero-lockup{text-align:center;margin-top:clamp(20px,6vh,70px)}
.hero-lockup .hero-mark{margin-left:0;text-indent:.11em;font-size:clamp(56px,10.5vw,168px)}
.hero-lockup .hero-sub{text-indent:.55em;letter-spacing:.55em;margin-top:clamp(12px,2vh,24px)}
.manifesto{margin-top:clamp(48px,9vh,110px)}
.manifesto .m-accent{color:#C0563F}
.hero-desc{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.hero-scroll{display:block;width:1px;height:56px;background:none;position:relative;overflow:hidden;opacity:1;margin-top:0}
.hero-scroll::before{content:"";position:absolute;left:0;top:-100%;width:1px;height:100%;background:var(--stone);animation:drip 2.4s ease-in-out infinite}
@keyframes drip{0%{top:-100%}55%{top:0}100%{top:100%}}
@media (prefers-reduced-motion:reduce){.hero-scroll::before{animation:none;top:0}}

/* — навигация: анимированное подчёркивание — */
.nav-links a{position:relative;padding-bottom:4px}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;transition:width .28s ease-out}
.nav-links a:hover::after,.nav-links a:focus-visible::after{width:100%}
.nav-links a:hover,.nav-links a:focus-visible{color:inherit}
.nav--dark .nav-links a:hover{color:var(--gypsum)}
.nav-links a[aria-current="page"]{border-bottom:none}
.nav-links a[aria-current="page"]::after{width:100%}

/* — курсор-перекрестие и ховеры галерей — */
.show-item figure,.reg-item figure,.gallery figure{cursor:crosshair}
.gallery figure:hover img{filter:grayscale(1)}

/* — появление секций — */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease-out,transform .5s ease-out}
.reveal.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* — бургер и мобильное меню — */
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-left:auto;z-index:120;position:relative}
.burger span{display:block;width:24px;height:1.5px;background:currentColor;transition:transform .28s ease-out,opacity .2s}
.burger span+span{margin-top:7px}
body.menu-open .burger span:first-child{transform:translateY(4.5px) rotate(45deg)}
body.menu-open .burger span:last-child{transform:translateY(-4.25px) rotate(-45deg)}
.mobmenu{position:fixed;inset:0;background:var(--graphite);color:var(--gypsum);
  z-index:110;display:flex;flex-direction:column;padding:96px var(--pad) 40px;
  opacity:0;visibility:hidden;transition:opacity .28s ease-out,visibility .28s}
body.menu-open .mobmenu{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
.mobmenu a{color:var(--gypsum)}
.mobmenu-links{display:flex;flex-direction:column;gap:22px}
.mobmenu-links a{font-family:var(--serif);font-size:clamp(30px,8vw,40px);line-height:1.1}
.mobmenu-lang{margin-top:36px;font-family:var(--serif);font-size:17px;color:var(--stone)}
.mobmenu-lang b{color:var(--gypsum)}
.mobmenu-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.mobmenu-foot .label{color:var(--stone)}
.mobmenu-foot a{font-size:16px}
@media (max-width:760px){
  .nav-links{display:none}
  .burger{display:block}
  .nav .wrap{align-items:center}
  .hero{min-height:100svh}
  .hero-lockup .hero-mark{font-size:clamp(52px,15vw,88px)}
  .hero-lockup .hero-sub{font-size:11px;letter-spacing:.42em;text-indent:.42em}
  .manifesto{font-size:20px}
  .hero-desc .label--stone{font-size:10.5px}
  .case-head h1{font-size:clamp(32px,9vw,44px)}
  .section{padding-block:72px 0}
  .section:last-of-type{padding-bottom:80px}
  footer{margin-top:80px}
  .btn{width:100%;text-align:center}
  .contact-side .btn{width:auto}
}

/* — пластины: атлас ремесла — */
.plates{display:flex;gap:clamp(32px,7vw,84px);margin-top:48px;flex-wrap:wrap}
.plate{display:flex;flex-direction:column;gap:14px;align-items:center}
.plate svg{display:block}
.plate .plate-cap{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--bronze)}

/* — фикс: класс open на самом меню — */
.mobmenu.open{opacity:1;visibility:visible}

/* — v3: лид кейса над картинкой, чёткий футер — */
.case-lead{font-family:var(--serif);font-size:clamp(24px,2.8vw,34px);line-height:1.42;margin-top:52px;text-wrap:balance}
.case-hero{margin-top:52px}
.f-desc{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.32em;color:var(--bronze);margin-top:8px}
.f-links a{font-weight:500;opacity:.8}
.f-meta{font-size:13.5px;color:var(--ink);line-height:2}
.f-meta a{font-weight:500}
.f-meta a:hover{color:var(--surik)}
.f-sub{display:block;color:#7A7466;font-weight:400;font-size:12px;letter-spacing:.03em}

/* — v4: согласование локапов, бургер, шапка главной — */
.burger{color:inherit}
.nav--home .nav-mark{display:none}
.hero-lockup .hero-sub{font-size:15px;margin-top:18px}
.hero-sub.fit,.f-desc.fit{display:flex;justify-content:space-between;letter-spacing:0;text-indent:0;margin-inline:auto}
.f-desc.fit{margin-inline:0}
.f-mark{font-size:18px}
.f-desc{font-family:var(--serif);font-weight:600;font-size:11px;letter-spacing:.3em;color:var(--bronze);margin-top:8px}

/* — v5: футер-локап крупнее — */
.f-mark{font-size:24px}
.f-desc{font-size:10.5px}