/* kvartirastudia.ru — типографика по референсам Lulu & Georgia / Programa
   Контраст: Playfair Display (антиква) в заголовках, гротеск в тексте. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&display=swap');

:root{
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --ink: #1a1a1a;        /* основной текст, не чистый чёрный */
  --muted: #6b6b6b;      /* подписи, метаданные */
  --line: #e5e2dd;       /* линии, тёплый серый */
  --bg: #fffefc;         /* фон с еле заметной тёплой нотой */
  --accent: #8a7355;     /* приглушённый охристый для ссылок */

  --wide: 1240px;        /* контейнер листингов */
  --read: 720px;         /* колонка чтения */
  --gap: clamp(28px, 4vw, 56px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Типографика ---------- */

h1,h2,h3{font-family:var(--serif); font-weight:500; line-height:1.15; margin:0 0 .5em}
h1{font-size:clamp(30px, 4.6vw, 52px); letter-spacing:-.01em}
h2{font-size:clamp(24px, 3vw, 34px); margin-top:1.8em}
h3{font-size:clamp(20px, 2.2vw, 25px); margin-top:1.5em}

p{margin:0 0 1.35em}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(138,115,85,.3)}
a:hover{border-bottom-color:var(--accent)}

/* Надзаголовок: мелко, капсом, с трекингом — как рубрики у Lulu & Georgia */
.kicker{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin:0 0 14px;
}

.lead{font-size:20px; line-height:1.65; color:#333}

/* ---------- Каркас ---------- */

.wrap{max-width:var(--wide); margin:0 auto; padding:0 clamp(16px,4vw,40px)}
.article{max-width:var(--read); margin:0 auto; padding:0 clamp(16px,4vw,40px)}

.site-header{
  border-bottom:1px solid var(--line);
  padding:22px 0; margin-bottom:var(--gap);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px}
.logo{font-family:var(--serif); font-size:23px; border:0; color:var(--ink)}

.nav{display:flex; flex-wrap:wrap; gap:22px}
.nav a{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); border:0; font-weight:500;
}
.nav a:hover{color:var(--accent)}

/* ---------- Заголовок статьи ---------- */

.post-head{text-align:center; margin:0 0 clamp(32px,5vw,56px)}
.post-head h1{margin-bottom:.35em}
.crumbs{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.crumbs a{color:var(--muted); border:0}
.crumbs a:hover{color:var(--accent)}

/* ---------- Картинки ---------- */

figure{margin:clamp(28px,4vw,48px) 0}
img{max-width:100%; height:auto; display:block}
.article img{width:100%; border-radius:2px}
figcaption{
  font-size:13px; color:var(--muted); margin-top:10px;
  text-align:center; line-height:1.5;
}

/* Галерея миниатюр 200x200 из оригинала */
.gallery{
  display:grid; gap:10px; margin:clamp(28px,4vw,44px) 0;
  grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
}
.gallery a{border:0}
.gallery img{aspect-ratio:1; object-fit:cover; border-radius:2px}

/* ---------- Плитка листингов ---------- */

.grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fill, minmax(320px,1fr));
  margin:0 0 var(--gap);
}
.card a{border:0; color:inherit; display:block}
.card img{width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:16px; border-radius:2px}
.card h2{
  font-size:clamp(19px,2vw,23px); margin:0 0 8px; line-height:1.25;
  transition:color .18s;
}
.card a:hover h2{color:var(--accent)}
.card p{font-size:15px; color:var(--muted); line-height:1.6; margin:0}

/* Первая карточка во всю ширину — приём с обоих референсов */
.grid.featured > .card:first-child{grid-column:1/-1}
.grid.featured > .card:first-child img{aspect-ratio:21/9}
.grid.featured > .card:first-child h2{font-size:clamp(26px,3.4vw,38px)}

/* ---------- Подвал ---------- */

.site-footer{
  border-top:1px solid var(--line); margin-top:clamp(56px,8vw,96px);
  padding:40px 0 56px; font-size:14px; color:var(--muted);
}
.site-footer a{color:var(--muted)}

/* ---------- Мобильное ---------- */

@media (max-width:600px){
  body{font-size:17px; line-height:1.7}
  .lead{font-size:18px}
  .grid{gap:34px; grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(auto-fill, minmax(46%,1fr))}
  .nav{gap:14px}
  .nav a{font-size:11px}
}

@media print{.site-header,.site-footer,.nav{display:none}}