/* Самохостнати шрифтове, подрязани до кирилица. Нула външни заявки. */
/* Slovic Demo Historic — оригиналният шрифт на сайта.
   Файловете са точно както ги дава Fontfabric: без конверсия,
   без подрязване, тоест без никаква промяна по файла. */
@font-face{font-family:'Slovic Demo Historic';
  src:url('../fonts/Slovic_Demo-Historic.woff2') format('woff2'),
      url('../fonts/Slovic_Demo-Historic.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap}
/* Резерва, ако някога решиш да смениш заглавния шрифт. */
@font-face{font-family:'Yeseva One';src:url('../fonts/YesevaOne-cyr.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url('../fonts/OpenSans-cyr.woff2') format('woff2');
  font-weight:300 800;font-style:normal;font-display:swap}
/* ============================================================
   ТОКЕНИ — извлечени от стария сайт, точни стойности
   ============================================================ */
:root{
  --dark:#433E49;
  --dark-soft:#4E4854;
  --light:#F9F3F5;
  --mauve:#928490;
  --tan:#DBC1AD;
  --white:#FFFFFF;
  --ink:#3A3540;
  --ink-soft:#5C5563;

  /* Заглавният шрифт е ЕДНА променлива. Сменя се на едно място.
     Slovic Demo Historic — безплатен по FF EULA v2.2, който изрично
     разрешава @font-face и неограничени показвания. Yeseva One е резерва. */
  --display:'Slovic Demo Historic', 'Yeseva One', Georgia, serif;
  --body:'Open Sans', system-ui, sans-serif;

  --wrap:1180px;
  --gap:clamp(1rem,3vw,2rem);
  --band:clamp(3.5rem,8vw,6.5rem);
  --radius:6px;      /* бутони и карти */
  --radius-img:4px;  /* снимки — по-леко */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .25vw,1.0625rem);
  line-height:1.7;
  color:var(--ink);
  background:var(--light);
}
img{display:block;max-width:100%;height:auto}
/* заместващ фон само за фотографиите, не за SVG */
.house img,.collage img,.grid-photos img,.hero__img{background:var(--dark-soft)}
a{color:inherit}

h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.15;
  margin:0;
}
h1{font-size:clamp(1.9rem,1.2rem + 3.4vw,3.6rem)}
h2{font-size:clamp(1.5rem,1.1rem + 1.9vw,2.35rem)}
h3{font-size:clamp(1.15rem,1rem + .8vw,1.6rem)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gap)}
.band{padding-block:var(--band)}
.band--dark{background:var(--dark);color:var(--light)}
.band--light{background:var(--light);color:var(--ink)}
.band--mauve{background:var(--mauve);color:var(--white)}

.lede{max-width:34em;margin-inline:auto;text-align:center;color:inherit;opacity:.92}
.center{text-align:center}

/* --- Бутон ---------------------------------------------------- */
.btn{
  display:inline-block;
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.06em;
  /* Измерено от оригинала: при 1920px екран главните букви са 22px,
     тоест font-size ~30px. Скалира се надолу за по-тесни екрани. */
  font-size:clamp(1.2rem,.95rem + .85vw,1.95rem);
  line-height:1;
  padding:.38em 1.7em;
  border:0;border-radius:var(--radius);
  background:var(--mauve);color:var(--white);
  text-decoration:none;
  transition:background .18s ease, transform .18s ease;
}
.btn:hover{background:var(--dark);transform:translateY(-1px)}
.btn--light{background:var(--light);color:var(--dark)}
.btn--light:hover{background:var(--white);color:var(--dark)}
:where(a,button,input,textarea,summary):focus-visible{
  outline:3px solid var(--tan);outline-offset:3px;
}

/* --- Шапка ---------------------------------------------------- */
.site-head{
  position:absolute;inset-block-start:0;inset-inline:0;z-index:10;
  padding-block:1.1rem;
  color:var(--light);
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:block;text-decoration:none;line-height:0}
.brand img{width:clamp(9.5rem,17vw,14rem);height:auto}
.nav{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0;font-size:.95rem}
.nav a{text-decoration:none;font-style:italic;opacity:.95;padding-block:.25rem}
.nav a:hover{color:var(--tan)}
.nav-toggle{display:none}

/* --- Hero ----------------------------------------------------- */
.hero{
  position:relative;
  min-height:clamp(30rem,78vh,44rem);
  display:grid;place-items:center;
  text-align:center;
  color:var(--light);
  overflow:hidden;
}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--dark)}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(38,34,42,.72),rgba(38,34,42,.55) 45%,rgba(38,34,42,.78));
}
.hero__inner{position:relative;z-index:1;max-width:44rem;padding:6rem var(--gap) 4rem}
.hero p{margin:1.4rem auto 2.2rem;max-width:30em;opacity:.95}

/* --- Карти на къщите ------------------------------------------ */
/* Изнесени наполовина върху hero-а, както в оригинала */
/* Еднакво поле отгоре и отдолу — картите не докосват hero-а. */
.houses{background:var(--dark);padding-block:var(--band)}
.houses__grid{
  display:grid;gap:clamp(1.2rem,3vw,2.2rem);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
}
.house{
  background:var(--white);color:var(--ink);
  border-radius:var(--radius);
  box-shadow:0 18px 40px rgba(28,24,32,.28);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.house img{aspect-ratio:16/9;object-fit:cover;width:100%}
.house__body{padding:clamp(1.15rem,2.2vw,1.6rem);text-align:center;display:flex;flex-direction:column;gap:.7rem;flex:1}
.house__beds{
  font-family:var(--display);font-size:.85rem;letter-spacing:.14em;
  color:var(--mauve);
}
.house p{margin:0;flex:1;color:var(--ink-soft)}

/* --- Разделена секция с колаж --------------------------------- */
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
@media (min-width:56rem){.split{grid-template-columns:1fr 1.05fr}}
.split__text h2{margin-block-end:1.5rem}
.split__text p{color:var(--ink-soft)}
.split__text .btn{margin-block-start:1rem}

.collage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.collage img{
  border-radius:var(--radius-img);
  box-shadow:0 14px 32px rgba(28,24,32,.2);
  aspect-ratio:4/3;object-fit:cover;width:100%;
}
.collage img:nth-child(1){transform:rotate(-1.6deg)}
.collage img:nth-child(2){transform:rotate(1.4deg) translateY(1.6rem)}
.collage img:nth-child(3){grid-column:1 / -1;max-width:78%;transform:rotate(.8deg);justify-self:center}
@media (prefers-reduced-motion:reduce){.collage img{transform:none!important}}

/* --- Развлечения ---------------------------------------------- */
/* Оригиналът показваше едно по едно с JS табове. Тук всичките
   са видими: повече прочетено съдържание, нула JavaScript. */
.acts{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  margin-block-start:3rem;list-style:none;padding:0;
}
@media (min-width:52rem){.acts{grid-template-columns:repeat(3,1fr)}}
.act{display:flex;flex-direction:column;gap:.7rem}
.act h3{color:var(--tan);display:flex;align-items:center;gap:.6rem}
.act h3 img{flex:none;width:34px;height:34px}
.act p{margin:0;font-size:.95rem;opacity:.88}

/* --- Отзиви --------------------------------------------------- */
/* Оригиналът беше карусел с 3 точки. Тук всичките се четат
   наведнъж на широк екран, а на телефон се плъзгат. */
.quotes{
  display:grid;gap:clamp(1.5rem,3vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  margin-block-start:2.5rem;
}
.quote{
  margin:0;
  padding:1.5rem 1.4rem;
  background:rgba(255,255,255,.09);
  border-radius:var(--radius);
}
/* Кавичките са в нормалния поток, не абсолютно позиционирани —
   така не могат да застъпят текста при никаква дължина. */
.quote::before{
  content:"\201C";display:block;
  font-family:var(--display);font-size:3.4rem;line-height:.75;
  color:var(--tan);
  margin-block-end:.35rem;
}
.quote p{margin:0 0 1rem;font-style:italic;font-size:.98rem}
.quote figcaption{font-size:.92rem;font-weight:600;font-style:normal;opacity:.92}

/* --- Галерия -------------------------------------------------- */
.grid-photos{
  display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  margin-block:2.5rem;
}
@media (min-width:46rem){.grid-photos{grid-template-columns:repeat(3,1fr)}}
.grid-photos img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:var(--radius-img)}

/* --- Футър ---------------------------------------------------- */
.site-foot{background:var(--dark);color:var(--light);padding-block:3rem;text-align:center}
.site-foot .brand{margin-inline:auto;width:max-content;margin-block-end:1.4rem}
.site-foot ul{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;list-style:none;margin:0 0 1.2rem;padding:0;font-size:.95rem}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:var(--tan)}
.site-foot small{opacity:.62;font-size:.85rem}

/* --- Мобилна навигация ---------------------------------------- */
@media (max-width:52rem){
  .nav{
    display:none;position:absolute;inset-inline:0;top:100%;
    flex-direction:column;gap:0;
    background:var(--dark);padding:.5rem var(--gap) 1rem;
  }
  .nav a{display:block;padding:.7rem 0;border-bottom:1px solid rgba(219,193,173,.18)}
  .nav-toggle{
    display:block;background:none;border:1px solid currentColor;color:inherit;
    border-radius:var(--radius);padding:.45rem .8rem;font:inherit;font-size:.9rem;cursor:pointer;
  }
  .site-head:has(.nav-toggle[aria-expanded="true"]) .nav{display:flex}
}

/* ============================================================
   ВЪТРЕШНИ СТРАНИЦИ
   ============================================================ */

/* --- По-ниска заглавна лента със снимка ------------------------ */
.pagehead{
  position:relative;
  min-height:clamp(15rem,34vh,22rem);
  display:grid;place-items:center;text-align:center;
  color:var(--light);overflow:hidden;
}
.pagehead__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--dark)}
.pagehead::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(38,34,42,.74),rgba(38,34,42,.6));
}
.pagehead h1{position:relative;z-index:1;padding:5rem var(--gap) 2rem}

/* --- Две колони на вътрешна страница --------------------------- */
.cols{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr}
@media (min-width:56rem){.cols{grid-template-columns:1fr 1fr;align-items:start}}
.cols p{color:var(--ink-soft)}
.cols p:first-child{margin-block-start:0}

/* --- Мини-галерия: голяма снимка + миниатюри -------------------
   Работи изцяло с CSS. Радио бутоните носят състоянието,
   затова няма нужда от JavaScript и работи с клавиатура. */
.viewer{display:grid;gap:.75rem}
.viewer__stage{position:relative;aspect-ratio:4/3;border-radius:var(--radius-img);overflow:hidden;background:var(--dark-soft)}
.viewer__stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s ease;
}
.viewer input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.viewer__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.viewer__thumbs label{
  display:block;cursor:pointer;border-radius:var(--radius-img);overflow:hidden;
  outline:2px solid transparent;outline-offset:2px;
  transition:outline-color .18s ease,opacity .18s ease;opacity:.62;
}
.viewer__thumbs label img{aspect-ratio:4/3;object-fit:cover;width:100%}
.viewer__thumbs label:hover{opacity:.85}

/* показваме кадъра, чийто радио бутон е избран */
.viewer input:nth-of-type(1):checked ~ .viewer__stage img:nth-of-type(1),
.viewer input:nth-of-type(2):checked ~ .viewer__stage img:nth-of-type(2),
.viewer input:nth-of-type(3):checked ~ .viewer__stage img:nth-of-type(3),
.viewer input:nth-of-type(4):checked ~ .viewer__stage img:nth-of-type(4){opacity:1}
.viewer input:nth-of-type(1):checked ~ .viewer__thumbs label:nth-of-type(1),
.viewer input:nth-of-type(2):checked ~ .viewer__thumbs label:nth-of-type(2),
.viewer input:nth-of-type(3):checked ~ .viewer__thumbs label:nth-of-type(3),
.viewer input:nth-of-type(4):checked ~ .viewer__thumbs label:nth-of-type(4){
  opacity:1;outline-color:var(--tan);
}
/* видим фокус при движение с клавиатура */
.viewer input:nth-of-type(1):focus-visible ~ .viewer__thumbs label:nth-of-type(1),
.viewer input:nth-of-type(2):focus-visible ~ .viewer__thumbs label:nth-of-type(2),
.viewer input:nth-of-type(3):focus-visible ~ .viewer__thumbs label:nth-of-type(3),
.viewer input:nth-of-type(4):focus-visible ~ .viewer__thumbs label:nth-of-type(4){
  outline:3px solid var(--tan);outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){.viewer__stage img{transition:none}}

/* --- Ценова таблица -------------------------------------------- */
.prices{
  width:100%;border-collapse:collapse;
  background:var(--dark);color:var(--light);
  border-radius:var(--radius);overflow:hidden;
  margin-block:1.5rem 2rem;
}
.prices caption{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;
  font-size:1.4rem;text-align:left;color:var(--ink);margin-block-end:.7rem;
}
.prices th,.prices td{padding:.8rem 1.25rem;vertical-align:middle}
.prices th{
  text-align:left;font-family:var(--display);font-weight:400;
  text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.05rem,.95rem + .3vw,1.25rem);
  line-height:1.2;
}
.prices td{text-align:right;white-space:nowrap}
/* Само вертикална граница, в цвета на цените — както в оригинала. */
.prices td{border-inline-start:1px solid var(--tan)}

/* Еврото е основната валута, левът остава за справка. */
.prices .eur{
  display:block;color:var(--tan);
  font-family:var(--display);
  font-size:clamp(1.35rem,1.15rem + .5vw,1.7rem);
  line-height:1.15;
}
/* Slovic няма знак за евро -> само символът идва от телесния шрифт. */
.prices .eur .sym{font-family:var(--body);font-size:.82em;margin-inline-start:.12em}
.prices .lv{display:block;font-family:var(--body);font-size:.88rem;opacity:.62;margin-block-start:.1rem}

/* Бутон, поставен върху тъмна лента. Само той — останалите не се пипат. */
.btn--on-dark:hover{background:var(--tan);color:var(--dark)}

/* Ред, в който по-късата колона се центрира спрямо по-високата. */
@media (min-width:56rem){.cols--balance{align-items:center}}

/* --- Текстова страница ----------------------------------------- */
.prose{max-width:44rem;margin-inline:auto}
.prose p{color:var(--ink-soft)}
.prose p:first-of-type{margin-block-start:0}
.pair{display:grid;gap:clamp(1rem,2.5vw,1.6rem);grid-template-columns:1fr;margin-block-start:2.5rem}
@media (min-width:44rem){.pair{grid-template-columns:1fr 1fr}}
.pair img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:var(--radius-img);background:var(--dark-soft)}

/* --- Галерия с разпъване ---------------------------------------
   Работи изцяло с CSS чрез :target. Без JavaScript снимката пак
   се отваря голяма; бутонът "назад" на браузъра я затваря. */
.tiles{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));margin-block:2.5rem}
@media (min-width:46rem){.tiles{grid-template-columns:repeat(3,1fr)}}
.tiles a{display:block;border-radius:var(--radius-img);overflow:hidden;line-height:0}
.tiles img{aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--dark-soft);
  transition:transform .4s ease}
.tiles a:hover img{transform:scale(1.04)}

.lightbox{display:none}
.lightbox:target{
  display:grid;position:fixed;inset:0;z-index:200;
  grid-template-rows:1fr auto;place-items:center;
  background:rgba(28,24,32,.94);padding:clamp(.75rem,3vw,2.5rem);
}
.lightbox img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--radius-img)}
.lightbox__bar{display:flex;gap:.6rem;align-items:center;padding-block-start:1rem}
.lightbox__bar a{
  display:grid;place-items:center;min-width:3rem;min-height:2.75rem;padding-inline:1rem;
  background:rgba(219,193,173,.14);color:var(--light);text-decoration:none;
  border-radius:var(--radius);font-family:var(--display);font-size:1.15rem;letter-spacing:.03em;
}
.lightbox__bar a:hover{background:var(--tan);color:var(--dark)}
.lightbox__count{color:var(--tan);font-size:.9rem;padding-inline:.6rem;font-family:var(--body)}
@media (prefers-reduced-motion:reduce){.tiles img{transition:none}}

/* --- Видео карти ------------------------------------------------
   Нищо не се зарежда от YouTube, докато не се щракне. */
.videos{display:grid;gap:clamp(1rem,2.5vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));margin-block-start:2.5rem}
@media (min-width:52rem){.videos{grid-template-columns:repeat(3,1fr)}}
.video{position:relative;display:block;text-decoration:none;color:var(--light);
  border-radius:var(--radius-img);overflow:hidden;background:var(--dark)}
/* Рамката пази съотношението и когато постерът още го няма. */
.video__frame{position:relative;display:block;aspect-ratio:16/9;background:var(--dark-soft);overflow:hidden}
.video__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.68;transition:opacity .25s ease}
.video:hover .video__frame img{opacity:.85}
.video:hover .video__title{color:var(--tan)}
.videos iframe{width:100%;aspect-ratio:16/9;display:block;border:0;border-radius:var(--radius-img)}
.video__play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.video__play svg{width:64px;height:64px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.video__title{display:block;padding:.85rem 1rem;font-size:.95rem;line-height:1.35;background:var(--dark)}

/* --- „Повече снимки" на партиди -------------------------------
   Скритите партиди не се изтеглят: lazy изображение в display:none
   не се зарежда, докато не се покаже. Работи без JavaScript. */
.tiles__more{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.batch{display:none}
.batch--1{display:contents}
/* Отметките стоят ДО бутона, а не в началото на секцията — иначе
   фокусът върху тях връща страницата горе. :has() позволява това. */
.gallery:has(#more-1:checked) .batch--2,
.gallery:has(#more-2:checked) .batch--3{display:contents}

.morewrap .morebtn{display:none;cursor:pointer}
.morewrap .morebtn[for="more-1"]{display:inline-block}
.gallery:has(#more-1:checked) .morebtn[for="more-1"]{display:none}
.gallery:has(#more-1:checked) .morebtn[for="more-2"]{display:inline-block}
.gallery:has(#more-2:checked) .morebtn[for="more-2"]{display:none}
.morewrap .allshown{display:none;color:var(--ink-soft);font-size:.95rem}
.gallery:has(#more-2:checked) .allshown{display:block}

/* ============================================================
   КОНТАКТИ
   ============================================================ */
.contact{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:1fr;align-items:start}
@media (min-width:56rem){.contact{grid-template-columns:1.25fr 1fr}}

.card{background:var(--white);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.2rem)}
.card--dark{background:var(--dark);color:var(--light)}

.field{display:grid;gap:.35rem;margin-block-end:1.1rem}
.field label{font-size:.9rem;font-weight:600;color:var(--ink)}
.field .req{color:var(--mauve)}
.field input,.field textarea{
  font:inherit;font-size:1rem;color:var(--ink);
  padding:.7rem .85rem;border:1px solid #D9CFD4;border-radius:var(--radius);
  background:var(--white);width:100%;
}
.field textarea{min-height:8.5rem;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--mauve);outline:2px solid var(--tan);outline-offset:1px}
.field input:user-invalid,.field textarea:user-invalid{border-color:#B4545C}
.two{display:grid;gap:0 1rem;grid-template-columns:1fr}
@media (min-width:34rem){.two{grid-template-columns:1fr 1fr}}
/* Капан за ботове: хората не го виждат и не го попълват. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{font-size:.85rem;color:var(--ink-soft);margin-block:0 1.2rem;line-height:1.55}
.formnote a{color:var(--ink)}
.status{margin-block-start:1rem;padding:.8rem 1rem;border-radius:var(--radius);font-size:.95rem}
.status--ok{background:#E7F0E6;color:#2C4A2A}
.status--err{background:#F6E4E5;color:#7A2F35}

.info{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.info li{display:flex;gap:.85rem;align-items:flex-start;font-size:1rem}
.info svg{flex:none;width:22px;height:22px;stroke:var(--tan);fill:none;stroke-width:1.6;margin-block-start:.15rem}
.info a{color:inherit;text-decoration:none}
.info a:hover{color:var(--tan)}
.info__label{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-block-end:.1rem}

.map{display:block;margin-block-start:2.5rem;border-radius:var(--radius);overflow:hidden;line-height:0;position:relative}
.map img{width:100%;height:auto;background:var(--mauve);aspect-ratio:2/1;object-fit:cover}
.map__hint{
  position:absolute;inset-block-end:0;inset-inline-start:0;
  background:var(--dark);color:var(--light);font-size:.82rem;
  padding:.45rem .8rem;border-start-end-radius:var(--radius);text-decoration:none;
}
.map:hover .map__hint{background:var(--tan);color:var(--dark)}

/* --- Иконки във формата ---------------------------------------- */
.field__wrap{position:relative;display:block}
.field__wrap svg{
  position:absolute;inset-inline-start:.8rem;inset-block-start:.78rem;
  width:20px;height:20px;stroke:var(--mauve);fill:none;stroke-width:1.5;
  pointer-events:none;transition:stroke .18s ease;
}
.field__wrap:has(textarea) svg{inset-block-start:.85rem}
.field__wrap input,.field__wrap textarea{padding-inline-start:2.7rem}
.field__wrap:focus-within svg{stroke:var(--dark)}

/* --- Фейсбук ---------------------------------------------------- */
.social{display:flex;gap:.6rem;margin-block-start:1.8rem}
.social a{
  display:grid;place-items:center;width:2.9rem;height:2.9rem;
  border:1px solid rgba(219,193,173,.4);border-radius:var(--radius);
  color:var(--tan);transition:background .18s ease,color .18s ease;
}
.social a:hover{background:var(--tan);color:var(--dark)}
.social svg{width:20px;height:20px;fill:currentColor}