/* Home-only стилі, винесено зі styles.css 18.07 — no-op рефакторинг */

/* Kicker-система (C-home, W2-5): hairline + tracked label — одна мова на 5 секцій донизу.
   Патерн 1:1 з /dlya-dvoh/ (css/dlya-dvoh.css): brown hairline+label на світлому тлі;
   на #day (--ink) — sand-варіант, той самий прийом, що в .hero .kicker на фото. */
#pillars .kicker, #houses .kicker, #occasion .kicker, #location .kicker {
  color:var(--brown); display:inline-flex; align-items:center; gap:.7em; margin-bottom:16px }
#pillars .kicker::before, #houses .kicker::before, #occasion .kicker::before, #location .kicker::before {
  content:''; width:30px; height:1px; background:currentColor; opacity:.55 }
.day__kicker { color:var(--sand); display:inline-flex; align-items:center; gap:.7em;
  padding-top:40px; margin-bottom:0 }
.day__kicker::before { content:''; width:30px; height:1px; background:currentColor; opacity:.6 }

/* S2 · Manifest — журнальна верстка з марджиналією */
.manifest { position:relative; overflow:hidden }
.manifest .rings--right { width:42vw; height:42vw; border-width:4vw; right:-13vw; top:-7vw; opacity:.14 }
.manifest h2 { max-width:15ch; position:relative; z-index:1 }
/* марджиналія = вузька ліва колонка-нотатка, тіло поруч; обидві тримаються ліворуч (justify-content:start) — без діри */
.manifest .cols { display:grid; grid-template-columns:minmax(0,14ch) minmax(0,54ch);
  justify-content:start; column-gap:clamp(28px,5vw,64px); margin-top:clamp(30px,5vh,56px);
  align-items:start; position:relative; z-index:1 }
.manifest .marginalia { font-size:.7rem; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--brown);
  font-weight:600; padding-top:10px; border-top:2px solid var(--brown) }
.manifest .cols .body { font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.7; max-width:54ch }
.manifest .factline { margin-top:clamp(40px,7vh,72px); padding-top:22px; border-top:1px solid rgba(140,90,43,.25);
  font-size:.92rem; color:var(--ink-soft); max-width:74ch; position:relative; z-index:1 }

/* S3 · Три опори — редакційні колонки з нумерацією та верхньою лінійкою */
.pillars { background:var(--paper); position:relative }
.pillars .grid-3 { gap:clamp(28px,4vw,56px); margin-top:22px }
/* A8: тональний місток на шві pillars(paper)→houses(ecru) — м'яка вуаль замість голого зрізу */
#pillars::after { content:''; position:absolute; left:0; right:0; bottom:0; height:64px; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(25,26,24,.05)) }
.pillar { border-top:1px solid rgba(140,90,43,.3); padding-top:24px }
.pillar__no { display:block; font-family:var(--font-h); font-size:1.05rem; color:var(--brown);
  letter-spacing:.12em; margin-bottom:20px }
.pillars svg { stroke:var(--blue); fill:none; stroke-width:1.5; width:46px; height:46px; margin-bottom:18px; display:block }
.pillars h3 { font-size:1.22rem; margin-bottom:10px }
.pillars p { color:var(--ink-soft) }

/* S4 · Houses — два послідовні блоки: Втеча → Досвід */
.houses__intro { color:var(--ink-soft); max-width:60ch; margin:-4px 0 4px }
.price { font-family:var(--font-h); font-weight:400; font-size:clamp(1.3rem,2.4vw,1.6rem); color:var(--brown); font-variant-numeric:tabular-nums }
/* A10: єдина ширина картки для обох ярусів (--2 і --3) — хвости, що не заповнюють ряд, центруються */
.house-cards { display:grid; gap:24px; grid-template-columns:repeat(auto-fit, minmax(280px, 340px)); justify-content:center }
.house { position:relative; background:var(--paper); border-radius:8px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-card), var(--edge-card);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out) }
.house:hover { transform:translateY(-4px); box-shadow:0 18px 50px -30px rgba(25,26,24,.5) }
.house img { object-fit:cover; width:100%; height:100%; transform-origin:center; transition:transform var(--dur-zoom) var(--ease-out) }
.house:hover img { transform:scale(1.04) }
.house picture { overflow:hidden; display:block; aspect-ratio:16/10 }
.house__stripe { display:block; height:5px; background:var(--hc) }
/* тіло + орнамент-емблема біля назви (локап) — канон §5 [Олег 23.06] */
.house__body { padding:14px 20px 20px; display:flex; flex-direction:column; gap:6px; flex:1 }
.house__head { display:flex; align-items:center; gap:11px; margin-bottom:2px }
.house__orn { flex:none; width:18px; height:42px; background:var(--hc);
  -webkit-mask:var(--orn) no-repeat center/contain; mask:var(--orn) no-repeat center/contain }
.house__body h4 { font-family:var(--font-h); font-weight:400; font-size:1.35rem; line-height:1 }
.house__body > p { color:var(--ink-soft); font-size:.92rem }
.house .house__meta { color:var(--willow); font-size:.72rem; text-transform:none }
/* Ярус-2 групи */
.house-group { font-family:var(--font-b); font-size:.74rem; letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--brown); margin:clamp(24px,4vh,40px) 0 14px }
/* Ярус-1 тип-картки */
.house-types { display:grid; gap:24px; grid-template-columns:repeat(2,1fr); margin-bottom:clamp(8px,2vh,20px) }
.house-type { position:relative; background:var(--paper); border-radius:8px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-card), var(--edge-card);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out) }
.house-type:hover { transform:translateY(-4px); box-shadow:0 18px 50px -30px rgba(25,26,24,.5) }
.house-type picture { display:block; aspect-ratio:16/10; overflow:hidden }
.house-type img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-zoom) var(--ease-out) }
.house-type:hover img { transform:scale(1.04) }
.house-type__body { padding:18px 22px 22px; display:flex; flex-direction:column; gap:8px; flex:1 }
.house-type__body h3 { font-size:clamp(1.5rem,2.6vw,2rem); max-width:none }
/* A9: dl.facts притиснуто донизу флексом (не floor-min-height) — обидві тип-картки
   вирівнюються по facts-baseline при БУДЬ-ЯКІЙ висоті ліда (рев'ю W2-5) */
.house-type__lead { color:var(--ink-soft); font-size:.95rem }
.house-type .price { margin-top:2px }
.house-type dl.facts { margin-top:auto }
/* btn НЕ має власного auto-margin: два auto-margin у флекс-колонці ділять вільний простір
   ПОПОЛАМ (спека), а не як одна група — це зсуває facts лише на половину відстані.
   facts тримає весь відступ; btn іде одразу за ним звичайним gap:8px (успадкованим). */
.house-type .btn--ghost { align-self:flex-start }
/* спільний labeled fact-list (тип-картки + GEO-блок) */
dl.facts { margin:0; display:grid; gap:7px }
dl.facts > div { display:flex; justify-content:space-between; gap:16px; padding-bottom:6px; border-bottom:1px solid rgba(140,90,43,.16) }
dl.facts dt { font-size:.72rem; letter-spacing:.04em; text-transform:none; color:var(--ink-soft) }
dl.facts dd { margin:0; text-align:right; font-variant-numeric:tabular-nums }
/* GEO labeled fact-block — канон §3 */
.facts-geo { margin:clamp(20px,3vh,32px) 0 0; display:grid; gap:0;
  grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(20px,4vw,56px) }
.facts-geo > div { display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid rgba(140,90,43,.16) }
.facts-geo dt { font-size:.72rem; letter-spacing:.04em; text-transform:none; color:var(--ink-soft) }
.facts-geo dd { margin:0; text-align:right; font-variant-numeric:tabular-nums }
@media (max-width:600px){ .facts-geo { grid-template-columns:1fr } }
.note { margin-top:22px; font-size:.85rem; color:var(--ink-soft) }

/* S5 · Comfort — «У будинку» широка колонка (2 стовпці), решта стопкою */
.comfort { background:var(--ecru); position:relative; overflow:hidden }
/* A7: приглушене кільце-такт закриває шов houses→comfort (порожній перед-хід секції) */
.comfort .rings--left { width:34vw; height:34vw; border-width:3.2vw; left:-11vw; top:-8vw; bottom:auto; opacity:.1; z-index:0 }
.comfort .wrap { position:relative; z-index:1 }
.comfort .comfort-groups { display:grid; gap:clamp(28px,4vw,56px); grid-template-columns:1.6fr 1fr;
  margin-top:32px; align-items:start }
.comfort .comfort-group h3 { font-family:var(--font-h); font-size:1.1rem; margin-bottom:14px;
  padding-bottom:10px; border-bottom:1px solid rgba(140,90,43,.2) }
.comfort ul { list-style:none; padding:0; display:grid; gap:11px }
.comfort .comfort-group--wide ul { grid-template-columns:1fr 1fr; column-gap:28px }
.comfort .comfort-col { display:grid; gap:clamp(24px,3vw,36px); align-content:start }
.comfort li { padding-left:30px; position:relative }
.comfort li svg { position:absolute; left:0; top:4px; width:18px; height:18px; stroke:var(--blue); fill:none; stroke-width:1.5 }

/* S5.1 · Галерея реальних фото */
.gallery { background:var(--paper); position:relative }
/* A8: тональний місток на шві gallery(paper)→day(--ink) */
#gallery::after { content:''; position:absolute; left:0; right:0; bottom:0; height:64px; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(25,26,24,.05)) }
.gallery h2 { max-width:18ch }
.gallery .section-sub { margin-bottom:28px }
/* feature 2×2 ліворуч + 5 кадрів — рівний мозаїчний блок 3×3 */
.gallery__grid { display:grid; gap:14px; grid-template-columns:repeat(3,1fr); grid-auto-rows:clamp(150px,17vw,230px) }
.gallery figure { margin:0; overflow:hidden; border-radius:6px; background:var(--ecru) }
.gallery img { display:block; width:100%; height:100%; object-fit:cover; transition:transform var(--dur-zoom) var(--ease-out) }
.gallery figure:hover img { transform:scale(1.05) }
.gallery__grid .g-wide { grid-column:span 2; grid-row:span 2 }
.gallery__cta { margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px }
.gallery__cta p { max-width:56ch; color:var(--willow); margin:0 }
.gallery__cta .btn { flex:none }
@media (max-width:760px){
  .gallery__grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(140px,42vw,200px) }
  .gallery__grid .g-wide { grid-column:auto; grid-row:auto }
}

/* S6 · Day — sticky-сцена: доба перетікає під скролом */
.day { background:var(--ink); color:var(--ecru); padding:0 }
.day__scroll { height:300svh; position:relative }
.day__stage { position:sticky; top:0; height:100svh; overflow:hidden }
.day__stage picture { position:absolute; inset:0; opacity:0; will-change:opacity }
.day__stage picture.first { opacity:1 }
.day__stage picture img { width:100%; height:100%; object-fit:cover }
.day__veil { position:absolute; inset:0; background:linear-gradient(to top, rgba(25,26,24,.74), transparent 45%) }
.day__txt { position:absolute; left:0; right:0; bottom:8vh; z-index:2 }
.day__title { font-family:var(--font-b); font-size:.78rem; letter-spacing:var(--track-label); text-transform:uppercase; font-weight:600; color:var(--sand); margin-bottom:18px }
.day__cap { position:relative; height:160px; max-width:640px }
.day__cap article { position:absolute; inset:0; opacity:0; will-change:opacity }
.day__cap article:first-child { opacity:1 }
.day__cap h3 { font-size:clamp(1.9rem,3.6vw,3rem); margin-bottom:8px }
.day__cap p { color:rgba(247,243,236,.88); max-width:48ch }
.day__dots { position:absolute; right:32px; bottom:8vh; display:flex; flex-direction:column; gap:12px; z-index:2 }
.day__dots span { width:7px; height:7px; border-radius:50%; background:rgba(247,243,236,.3); transition:background .4s, transform .4s }
.day__dots span.on { background:var(--ecru); transform:scale(1.5) }
.day__after { padding-block:64px 96px }
.day__spectrum { font-size:1.05rem; color:rgba(247,243,236,.85); max-width:60ch }

/* S6.1 · Occasion — особливі дати: плитки-приводи, без цін */
.occasion { background:var(--ecru); position:relative; overflow:hidden }
.occasion h2 { max-width:18ch; position:relative; z-index:1 }
.occasion .rings--right { width:38vw; height:38vw; border-width:3.6vw; right:-12vw; top:-6vw; opacity:.12 }
.occasion__sub { max-width:62ch; margin-bottom:30px; position:relative; z-index:1 }
/* Спец-аркуш — вертикальний список приводів, редакційна деталь як facts-sheet /dlya-dvoh/ */
.occasion__sheet { list-style:none; padding:0; margin:0; max-width:640px; position:relative; z-index:1; counter-reset:occ }
.occasion__sheet li { counter-increment:occ; display:flex; align-items:baseline; gap:24px;
  padding:20px 2px; border-top:1px solid rgba(140,90,43,.18);
  font-family:var(--font-h); font-size:1.18rem; color:var(--ink);
  transition:transform .15s var(--ease-out) }
.occasion__sheet li::before { content:counter(occ,decimal-leading-zero); flex:none;
  font-family:var(--font-b); font-size:.78rem; letter-spacing:.12em; font-weight:700; color:var(--brown) }
.occasion__sheet li:last-child { border-bottom:1px solid rgba(140,90,43,.18) }
.occasion__sheet li:hover { transform:translateX(8px) }
.occasion__micro { margin-top:26px; max-width:60ch; color:var(--ink-soft); position:relative; z-index:1 }
.occasion .btn { margin-top:22px; position:relative; z-index:1 }
@media (max-width:600px){ .occasion__sheet li { padding:16px 2px; gap:16px; font-size:1.05rem } }

/* S7 · For whom — дві картки з акцентом, рівні по висоті (C-home: буллети — трохи повітря) */
.forwhom .grid-2 { align-items:stretch }
.forwhom .grid-2 > div { background:var(--paper); padding:32px 32px 34px; border-radius:6px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-card), var(--edge-card);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out) }
.forwhom .grid-2 > div:hover { transform:translateY(-3px); box-shadow:0 18px 50px -30px rgba(25,26,24,.5) }
.forwhom .grid-2 > div::before { content:''; position:absolute; top:0; bottom:0; left:0; width:4px }
.forwhom__yes::before { background:var(--sage) }
.forwhom__no::before  { background:rgba(140,90,43,.45) }
.forwhom h3 { font-size:1.25rem; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid rgba(140,90,43,.18) }
.forwhom ul { list-style:none; padding:0; display:grid; gap:14px }
.forwhom li { padding-left:30px; padding-block:.45em; position:relative; line-height:1.5 }
.forwhom li::before { position:absolute; left:0; top:0; font-weight:700 }
.forwhom__yes li::before { content:'✓'; color:var(--willow) }
.forwhom__no li::before  { content:'—'; color:var(--brown) }
.forwhom .honest,
.forwhom p.honest { margin-top:30px; max-width:74ch; font-size:.95rem; color:var(--ink-soft) }

/* S8 · Location — мальована карта у паперовій рамці */
.location { position:relative; overflow:hidden }
/* A7: приглушене кільце за мапою — закриває порожній такт forwhom→location */
.location .rings--right { width:32vw; height:32vw; border-width:3vw; right:-10vw; top:clamp(180px,22vh,320px); opacity:.1; z-index:0 }
.location .wrap { position:relative; z-index:1 }
.location .btn { margin-top:18px }
.location .fineprint { font-size:.8rem; color:var(--ink-soft); margin-top:10px }
.location__map { margin:6px 0 0; background:var(--paper); border-radius:10px;
  padding:clamp(12px,2.4vw,28px); box-shadow:var(--shadow-card), var(--edge-card) }
.location__map img { border-radius:4px; width:100%; height:auto; display:block }
.location p { margin-top:22px; max-width:62ch }

/* S9 · FAQ — тональний шов faq(ecru)→final-cta(--ink) (A8) */
#faq { position:relative }
#faq::after { content:''; position:absolute; left:0; right:0; bottom:0; height:64px; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(25,26,24,.05)) }

/* S10 · Final CTA (A14) — контент з мертвої осі: заголовок+кнопка вліво, кільце праворуч.
   Скоуп ЛИШЕ #book — .final-cta спільний клас (andriy/instland), але вони не лінкують home.css. */
#book { text-align:left }
#book .wrap { padding-left:clamp(24px,6vw,72px) }
#book h2 { margin-inline:0 auto }
#book .rings--right { width:36vw; height:36vw; border-width:3.4vw; right:-11vw; top:-9vw; opacity:.14 }
@media (max-width:600px){
  #book .wrap { padding-left:24px }
  /* дзеркало styles.css:185 (.final-cta .rings--left) — W2-5 переніс кільце на rings--right,
     обійшовши спільний mobile-hide; те саме коліз-обґрунтування (фідбек Олега) діє тут */
  #book .rings--right { display:none }
}

/* Footer (A14) — тональний степ під фінальним CTA замість голого 1px hairline (border лишається,
   лише пом'якшений); footer ледь світлішає зверху й лягає в ink — без нового hex, --ecru на низькому alpha */
#contacts { background:linear-gradient(180deg, rgba(247,243,236,.04), rgba(247,243,236,0) 110px) var(--ink);
  border-top-color:rgba(247,243,236,.05) }

/* Home-only motion-фрагменти, розщеплені зі спільних @media-блоків styles.css (порядок/значення без змін) */
@media (prefers-reduced-motion: no-preference) {
  .js .day__txt .wrap { opacity:1; transform:none }
}

@media (prefers-reduced-motion: reduce) {
  .house img, .house-type img { transition:none } .house:hover img, .house-type:hover img { transform:none }
  .house:hover, .house-type:hover, .occasion__sheet li:hover, .forwhom .grid-2 > div:hover { transform:none }
  /* спектр дня — статичний стос замість sticky-сцени */
  .day__scroll { height:auto }
  .day__stage { position:relative; height:auto; overflow:visible; display:grid; gap:20px; padding:64px 24px 0 }
  .day__stage picture { position:static; opacity:1 !important }
  .day__stage picture img { height:auto; border-radius:6px }
  .day__veil, .day__dots { display:none }
  .day__txt { position:static }
  .day__cap { height:auto; max-width:none }
  .day__cap article { position:static; opacity:1 !important; margin-bottom:16px }
}

@media (max-width: 900px) {
  .comfort .comfort-groups { grid-template-columns:1fr }
}

@media (max-width: 600px) {
  .house-types { grid-template-columns:1fr }
  .comfort .comfort-groups { grid-template-columns:1fr }
  .comfort .comfort-group--wide ul { grid-template-columns:1fr }
  .day { padding:0 }
  .manifest .cols { grid-template-columns:1fr; gap:14px }
  .day__dots { right:18px }
  /* RM-09: дрібний текст ≤600px — підняти до читабельного */
  .manifest .factline { font-size:.95rem }
  .note { font-size:.95rem }
  .location .fineprint { font-size:.88rem }
  /* RM-06: довша day-caption не вилазить за фікс-висоту контейнера-кросфейду */
  .day__cap { height:200px }
}

/* RM-06: на найвужчих екранах day-caption ще вища (текст «День» переносу) */
@media (max-width: 400px) {
  .day__cap { height:248px }
}