/* ==========================================================================
   Студия Левина — общие стили (nav, footer, типографика, кнопки, карточки)
   Подключается на всех страницах: index / katalog / карточки проектов
   ========================================================================== */
:root{
  --ink:#1c1a17;        /* тёмный графит-коричневый */
  --muted:#6f6a63;
  --line:#e7e2da;
  --bg:#faf8f5;         /* тёплый айвори */
  --bg2:#f2ede6;
  --accent:#8a7a63;     /* приглушённый бронзовый */
  --accent-d:#6d5f4c;
  --white:#ffffff;
  --sand:#c9b99a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Manrope',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-weight:300;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;line-height:1.1}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
/* --accent-d вместо --accent: светлый акцент на светлом фоне не добирал контраст 4.5:1 */
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-d);font-weight:500}
/* Линия-тире перед надзаголовком — единый редакционный приём на всех страницах
   (главная и каталог дублируют это правило в своих инлайн-стилях) */
.eyebrow::before{content:'';width:38px;height:1px;background:var(--accent-d);flex:0 0 auto}

.btn,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;padding:16px 34px;border-radius:2px;text-decoration:none;font-size:14px;letter-spacing:.06em;line-height:1;transition:.25s;border:1px solid var(--ink);cursor:pointer;font-family:inherit;vertical-align:top}
.btn:hover{background:transparent;color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* NAV */
nav{position:sticky;top:0;z-index:50;background:rgba(250,248,245,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:48px;width:auto}
.navlinks{display:flex;gap:30px;font-size:13px;letter-spacing:.04em}
.navlinks a{color:var(--ink);text-decoration:none;opacity:.8}
.navlinks a:hover{opacity:1}
nav .btn{padding:12px 26px}
@media(max-width:920px){
  .navlinks{display:none}
  nav .wrap{padding-left:18px;padding-right:18px}
  nav .btn{padding:11px 20px;font-size:13px}
}
@media(max-width:520px){
  .logo img{height:30px}
  nav .wrap{padding-left:14px;padding-right:14px;gap:14px}
  .logo{flex:0 0 auto}
  nav .btn{flex:0 0 auto;padding:9px 14px;font-size:12px;letter-spacing:.03em}
}
@media(max-width:380px){
  .logo img{height:27px}
  nav .btn{padding:8px 12px;font-size:11px}
}

/* SECTIONS + HEADERS */
section{padding:96px 0}
.sec-head{max-width:720px;margin-bottom:52px}
.sec-head h2{font-size:clamp(32px,4.4vw,52px);margin:14px 0 0}
.sec-head p{color:var(--muted);margin-top:16px;font-size:17px}

/* TRUST */
.trust{border-bottom:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:44px 28px}
.trust .num{font-family:'Cormorant Garamond',serif;font-size:46px;color:var(--accent-d)}
.trust .lbl{font-size:13px;color:var(--muted);letter-spacing:.02em}
@media(max-width:720px){.trust .wrap{grid-template-columns:repeat(2,1fr);gap:30px}}

/* PROJECT CARD (общая карточка для «Избранное» и каталога) */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proj{display:block;text-decoration:none;color:inherit;background:var(--white);border:1px solid var(--line);overflow:hidden;transition:transform .3s,box-shadow .3s}
.proj:hover{box-shadow:0 22px 44px -30px rgba(28,26,23,.5);transform:translateY(-3px)}
.proj-img{aspect-ratio:4/3;overflow:hidden;background:var(--bg2)}
.proj-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.proj:hover .proj-img img{transform:scale(1.05)}
.proj-body{padding:18px 22px 22px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.proj-name{font-family:'Cormorant Garamond',serif;font-size:25px;font-weight:500}
.proj-style{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d);white-space:nowrap}
@media(max-width:860px){.proj-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.proj-grid{grid-template-columns:1fr}}

/* PAGE HEAD (каталог / карточка) */
.page-head{background:var(--bg2);border-bottom:1px solid var(--line);padding:54px 0 48px}
.breadcrumb{font-size:13px;color:var(--muted);letter-spacing:.02em;margin-bottom:18px}
.breadcrumb a{color:var(--accent-d);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.page-head h1{font-size:clamp(34px,5vw,58px)}
.page-head p{color:var(--muted);max-width:620px;margin-top:16px;font-size:17px}

/* FORM */
.form{background:var(--white);border:1px solid var(--line);padding:38px 34px}
.form label{display:block;font-size:13px;letter-spacing:.04em;color:var(--muted);margin:0 0 7px}
.form .field{margin-bottom:20px}
.form input,.form textarea{width:100%;border:1px solid var(--line);background:var(--bg);padding:14px 16px;font-family:inherit;font-size:15px;color:var(--ink);border-radius:2px}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent)}
.form textarea{min-height:96px;resize:vertical}
.form .btn{width:100%;text-align:center}
.form .fineprint{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.5}
.form-note{margin-top:14px;font-size:13px;color:var(--accent-d)}
.form .btn[disabled]{opacity:.6;cursor:default}
/* Поле-ловушка для спам-роботов. Уводим за край экрана, а не display:none:
   роботы умеют проверять видимость, а программа чтения с экрана поле с
   aria-hidden всё равно пропустит. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* CTA + FORM BLOCK */
.cta{background:var(--bg2)}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.cta-grid .lead h2{font-size:clamp(34px,4.6vw,54px);max-width:520px}
.cta-grid .lead p{color:var(--muted);max-width:460px;margin:18px 0 28px;font-size:17px}
.contacts-inline{font-size:15px;color:var(--ink)}
.contacts-inline a{color:var(--accent-d);text-decoration:none;border-bottom:1px solid rgba(109,95,76,.4)}
@media(max-width:860px){.cta-grid{grid-template-columns:1fr;gap:36px}}

/* FOOTER */
footer{background:var(--ink);color:#b8afa2;padding:56px 0 40px;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
footer .f-logo img{height:40px;width:auto;margin-bottom:14px}
footer a{color:#e7d9c2;text-decoration:none}
footer a:hover{color:#fff}
.foot-note{width:100%;border-top:1px solid rgba(255,255,255,.1);margin-top:28px;padding-top:22px;font-size:12px;color:#8a8177}