/* =========================================================
   asknebo.com — єдиний файл стилів
   Усі сторінки підключають тільки його.
   Нових кольорів, шрифтів і тіней поза цим файлом не буває.
   ========================================================= */

/* ---------------------------------------------------------
   1. ШРИФТИ
   Лежать у /fonts/, з Google нічого не підтягується —
   інакше потрібен cookie-банер.
   Файли змінні: один файл містить усі товщини (500–600, 400–500).
   Набори: latin + cyrillic. Браузер завантажує тільки потрібний.
   Ліцензія шрифтів — SIL Open Font License, вільна.
   --------------------------------------------------------- */
@font-face{
  font-family:"Cormorant Garamond";
  src:url("/fonts/cormorant-garamond-cyrillic.woff2") format("woff2");
  font-weight:500 600; font-style:normal; font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("/fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight:500 600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  src:url("/fonts/inter-cyrillic.woff2") format("woff2");
  font-weight:400 500; font-style:normal; font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Inter";
  src:url("/fonts/inter-latin.woff2") format("woff2");
  font-weight:400 500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Lora — для текстів у кілька рядків (власниця, 19.10): відгуки, афірмації,
   виділені рядки, часті питання. Cormorant лишається для заголовків, назв, кнопок, цін */
@font-face{
  font-family:"Lora";
  src:url("/fonts/lora-cyrillic.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Lora";
  src:url("/fonts/lora-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------------------------------------------------------
   2. ТОКЕНИ
   --------------------------------------------------------- */
:root{
  /* колір */
  --paper:#fcfcfa;      /* тло сторінки */
  --ink:#0f1524;        /* основний текст, виділені рядки */
  --ink-2:#333c52;      /* другорядний текст */
  --ink-3:#4d566c;      /* описи в намистинах, у картках */
  --ink-4:#6b7285;      /* службові підписи, футер, мета */
  --gold:#8a6a24;       /* акцент, п'ять ролей — див. dyzain.md */
  --hair:rgba(15,21,36,.13);   /* волосяна лінія */

  /* гарнітури */
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;   /* заголовки, назви, кнопки, ціни */
  --read:"Lora",Georgia,"Times New Roman",serif;                     /* тексти в кілька рядків, питання */
  --text:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* обробка фрагментів картин — єдиний рецепт на весь сайт */
  --art-saturate:90%;
  --art-veil-start:13%;  /* звідки вуаль починає закривати картину */

  /* тінь: тільки три випадки — шапка, картки інструментів, кнопки. див. dyzain.md */
  --shadow-card:0 1px 2px rgba(74,56,22,.08), 0 6px 14px -7px rgba(74,56,22,.20);
  --shadow-lift:0 2px 3px rgba(74,56,22,.08), 0 12px 22px -10px rgba(74,56,22,.30);  /* піднята під мишкою */
  --shadow-press:0 1px 3px rgba(74,56,22,.10);                                      /* натиснута */
  --shadow-bar:0 6px 18px -12px rgba(15,21,36,.5);
}

/* ---------------------------------------------------------
   3. БАЗА
   --------------------------------------------------------- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:16.5px;
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}

/* колонка: єдиний спосіб задати поля сторінки */
.col{padding-left:26px;padding-right:26px;}

/* ---------------------------------------------------------
   4. ТИПОГРАФІКА
   Cormorant — тільки великий кегль. Inter — увесь суцільний текст.
   Курсиву на сайті немає ніде.
   --------------------------------------------------------- */
h1{
  font-family:var(--display);
  font-size:2.45em;font-weight:500;line-height:1.06;
  letter-spacing:-.02em;margin:0 0 18px;
}
h2{
  font-family:var(--display);
  font-size:2.1em;font-weight:600;line-height:1.12;
  letter-spacing:-.022em;margin:0 0 26px;
}
h3{
  font-family:var(--display);
  font-size:1.72em;font-weight:600;line-height:1.16;
  letter-spacing:-.018em;margin:0 0 12px;
}
p{margin:0 0 20px;}

/* надрядок: дрібні великі літери золотом, над заголовком */
.eyebrow{
  font-size:.72em;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin:0 0 15px;
}
/* службовий підпис розділу — сірий, не золотий */
.kicker{
  font-size:.72em;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);margin:0 0 15px;
}

/* ---------------------------------------------------------
   5. ПОСИЛАННЯ Й КНОПКИ
   Кнопка — паперова плитка, що лежить на сторінці: тонка лінія,
   тепла тінь, шрифт заголовків, золота стрілка. Під мишкою
   трохи піднімається, при натисканні вдавлюється.
   Суцільної заливки не буває.
   --------------------------------------------------------- */
/* золота стрілка «→» у тексті посилань, як на кнопках */
.arr{color:var(--gold);}
.link{
  display:inline-block;color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--gold);padding-bottom:2px;
  transition:border-color .18s ease;
}
/* під мишкою посилання оживає, як кнопка: лінія темнішає, золота стрілка рушає вправо (власниця, 23.10) */
.link .arr{display:inline-block;transition:transform .18s ease;}
.link:hover{border-bottom-color:var(--ink);}
.link:hover .arr{transform:translateX(4px);}
.link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.gbtn{
  display:inline-block;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--hair);box-shadow:var(--shadow-card);
  font-family:var(--display);font-size:1.45em;font-weight:600;
  letter-spacing:-.01em;line-height:1.2;
  padding:14px 28px 16px;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.gbtn::after{
  content:"→";display:inline-block;margin-left:10px;color:var(--gold);
  transition:transform .18s ease;
}
.gbtn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);}
.gbtn:hover::after{transform:translateX(5px);}
.gbtn:active{transform:translateY(1px);box-shadow:var(--shadow-press);}
.gbtn:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}
/* тихе посилання: службові переходи внизу сторінки */
.quiet{margin-top:32px;font-size:.88em;color:var(--ink-4);}
.quiet a{color:var(--ink-4);text-decoration:none;border-bottom:1px solid var(--hair);transition:color .18s ease, border-color .18s ease;}
.quiet a:hover{color:var(--ink-2);border-bottom-color:var(--ink-4);}

/* ---------------------------------------------------------
   6. ШАПКА
   Плаваюча, з розпіркою в потоці — інакше сторінка сіпається.
   Стискається на 90px прокрутки, розтискається на 45 (люфт).
   Тінь тільки в стиснутому стані.
   Телефон: ховається при русі вниз. Десктоп: видима завжди.
   --------------------------------------------------------- */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  margin:0 auto;   /* до 760px шапка на всю ширину, як і колонка тексту */
  display:flex;align-items:center;justify-content:space-between;
  background:var(--paper);
  padding:20px 26px 18px;
  transition:padding .22s ease, box-shadow .22s ease, transform .24s ease;
}
/* лінія під шапкою — рівно по ширині тексту, як лінія над футером */
.bar::after{
  content:"";position:absolute;left:26px;right:26px;bottom:0;
  border-bottom:1px solid var(--hair);
}
.spacer{height:66px;}
/* логотип: шрифт заголовків, «nebo» золотом */
.logo{font-family:var(--display);font-size:1.6em;font-weight:600;
  letter-spacing:-.01em;line-height:1;
  color:var(--ink);text-decoration:none;transition:font-size .22s ease;}
.logo span{color:var(--gold);}
.lang{font-size:.72em;letter-spacing:.06em;color:var(--ink-4);}
.menuicon{
  width:37px;padding:8px;margin:-8px;   /* палець влучає легше, ніж у 21px */
  background:none;border:none;cursor:pointer;
}
.menuicon span{display:block;height:1.5px;margin:5px 0;background:var(--ink);
  transition:transform .2s ease;}
/* відкрите меню: дві риски складаються в хрестик */
body.menu .menuicon span:first-child{transform:translateY(3.25px) rotate(45deg);}
body.menu .menuicon span:last-child{transform:translateY(-3.25px) rotate(-45deg);}
.nav{display:none;}

/* меню на телефоні: панель під шапкою, ті самі пункти, що й на десктопі */
.bar{flex-wrap:wrap;}
.mnav{display:none;flex-basis:100%;margin-top:16px;}
body.menu .mnav{display:block;}
.mnav a{
  display:block;padding:13px 0;border-top:1px solid var(--hair);
  color:var(--ink);text-decoration:none;
}

body.small .bar{
  padding-top:11px;padding-bottom:9px;
  box-shadow:var(--shadow-bar);
}
body.small .logo{font-size:1.42em;}
body.hide .bar{transform:translateY(-104%);}   /* тільки телефон */

/* ---------------------------------------------------------
   7. СПИСОК ІСТОРІЙ
   Маркер — зірочка Cormorant. Один і той самий на всьому сайті.
   --------------------------------------------------------- */
.stories p{position:relative;margin:0 0 30px;color:var(--ink);}
.stories p:not(:last-child){padding-left:30px;}
.stories p:not(:last-child)::before{
  content:"*";position:absolute;left:0;top:0;height:1.58em;
  display:flex;align-items:center;
  font-family:var(--display);font-size:1.75em;line-height:1;
  color:var(--gold);transform:translateY(-4px);
}
/* висновок після переліку: більший кегль, великий відступ, без маркера */
.stories p:last-child{margin:46px 0 0;font-size:1.08em;line-height:1.55;}

/* той самий маркер для переліку запитів на інших сторінках */
.cases p, .home-more p.star{position:relative;padding-left:30px;margin:0 0 12px;}
.cases p::before, .home-more p.star::before{
  content:"*";position:absolute;left:0;top:0;height:1.58em;
  display:flex;align-items:center;
  font-family:var(--display);font-size:1.75em;line-height:1;
  color:var(--gold);transform:translateY(-4px);
}

/* ---------------------------------------------------------
   8. ЦИТАТА
   Золота лінія на полі. Не більше однієї на екран.
   --------------------------------------------------------- */
.pull{
  font-size:1.08em;line-height:1.55;color:var(--ink);
  padding-left:18px;border-left:2px solid var(--gold);
  margin:34px 0;
}

/* ---------------------------------------------------------
   9. НАМИСТО (сторінка «Про мене»)
   Намистини однакові золоті. Остання порожня з обведенням,
   лінія після неї переходить у пунктир. Різних кольорів немає.
   --------------------------------------------------------- */
.strand{position:relative;margin-top:36px;padding-left:34px;}
.strand::before{
  content:"";position:absolute;left:6px;top:12px;bottom:0;width:1px;
  background:rgba(138,106,36,.45);
}
.strand::after{
  content:"";position:absolute;left:6px;bottom:-26px;height:26px;width:1px;
  background:repeating-linear-gradient(to bottom,
    rgba(138,106,36,.5) 0 4px, transparent 4px 9px);
}
.bead{position:relative;padding-bottom:40px;}
.bead::before{
  content:"";position:absolute;left:-34px;top:11px;
  width:13px;height:13px;border-radius:50%;background:var(--gold);
}
.bead.open::before{background:var(--paper);border:2px solid var(--gold);}
.bead p{font-size:1em;color:var(--ink-3);margin:0 0 12px;}   /* текст, який читають, — повного розміру (19.10) */
/* виділений рядок: чорний, звичайної ваги. Оточення світліше — цим і виділяється */
.bead p.mark{color:var(--ink);margin:0;}

/* ---------------------------------------------------------
   10. АКОРДЕОН
   Використовується для вчителів і для FAQ.
   Золота тільки в підсумку «Мої вчителі», у FAQ — без золота.
   --------------------------------------------------------- */
details{margin-top:18px;}
summary{
  font-size:.85em;color:var(--gold);cursor:pointer;list-style:none;
  display:inline-block;border-bottom:1px solid rgba(138,106,36,.4);
  padding-bottom:3px;
}
summary::-webkit-details-marker{display:none;}
/* «Мої вчителі»: стрілка, як на кнопках, — щоб було видно, що це натискається.
   Відкрито — стрілка дивиться вниз. */
.bead summary::after{
  content:"→";display:inline-block;margin-left:8px;
  transition:transform .18s ease;
}
.bead summary:hover{border-bottom-color:var(--gold);}
.bead details[open] summary::after{transform:rotate(90deg);}

.faq details{border-top:1px solid var(--hair);margin:0;}
/* питання — шрифтом заголовків, щоб відкрита відповідь не зливалась із ним */
/* питання — шрифтом Lora: Cormorant у згорнутому переліку читався важко,
   особливо на комп'ютері (власниця, 19.10). Відповідь — Inter, дрібніше й сіріше */
.faq summary{
  display:block;border:none;padding:17px 30px 17px 0;position:relative;
  font-family:var(--read);font-size:1.1em;font-weight:500;line-height:1.4;
  color:var(--ink);   /* Lora — обрано на сторінці порівняння (власниця, 19.10) */
}
.faq summary::after{
  content:"";position:absolute;right:4px;top:calc(50% - 8px);
  width:9px;height:9px;
  border-right:1.5px solid var(--ink-4);border-bottom:1.5px solid var(--ink-4);
  transform:rotate(45deg);
}
/* стрілка відкритого питання золота: видно, де ви зараз */
.faq details[open] summary::after{transform:rotate(-135deg);top:calc(50% - 2px);border-color:var(--gold);}
/* відповідь — повного розміру основного тексту: дрібніший шрифт був на межі
   читання для людей 45+ (власниця, 19.10); від питання відрізняє шрифт і колір */
.faq .ans{font-size:1em;line-height:1.62;color:var(--ink-2);padding:0 30px 20px 0;margin:0;}
/* перелік усередині відповіді: зірочка, як у списках на сайті */
.faq details p.star{position:relative;font-size:1em;line-height:1.62;color:var(--ink-2);padding:0 30px 0 26px;margin:-10px 0 18px;}
.faq details p.star::before{
  content:"*";position:absolute;left:0;top:0;height:1.58em;display:flex;align-items:center;
  font-family:var(--display);font-size:1.6em;line-height:1;color:var(--gold);transform:translateY(-3px);
}
/* слово з поясненням (позначка :term:): пунктир знизу — видно, що натискається */
/* слово з поясненням: чорне, суцільна золота лінія і маленький золотий кружечок
   зі знаком питання — щоб було видно, що слово натискається (власниця, 19.10) */
.term{
  font:inherit;color:var(--ink);background:none;border:none;padding:0;cursor:pointer;
  /* підкреслене тільки слово — кружечок «?» стоїть окремо, без лінії */
  text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:1.5px;text-underline-offset:3px;
}
.term::after{
  /* знак рівно посередині кружечка: кружечок — гнучка коробка з центруванням */
  content:"?";display:inline-flex;align-items:center;justify-content:center;
  margin-left:2px;vertical-align:.55em;box-sizing:border-box;
  width:1.25em;height:1.25em;line-height:1;border-radius:50%;padding-top:.05em;
  border:1px solid var(--gold);color:var(--gold);
  font-family:var(--text);font-size:.5em;font-weight:500;text-align:center;
  text-decoration:none;
}
.term:hover{color:var(--gold);}
/* віконце з поясненням: паперова картка по центру екрана, закривається
   натисканням будь-де поза ним або клавішею Esc */
.term-pop{
  max-width:min(360px, calc(100vw - 40px));margin:auto;padding:20px 22px;
  background:var(--paper);color:var(--ink-2);border:1px solid var(--hair);box-shadow:var(--shadow-lift);
  font-size:.92em;line-height:1.55;
}
.term-pop::backdrop{background:rgba(8,12,24,.25);}
/* термін у віконці — чорним і щільніше; золотий обріз зверху, як у форми калькулятора */
.term-pop{border-top:2px solid rgba(201,162,78,.75);}
.term-pop b{color:var(--ink);font-weight:500;}

/* перелік вчителів усередині акордеона */
.teachers{margin-top:20px;}
.teachers .t{padding:12px 0;border-top:1px solid var(--hair);}
.teachers .t:last-child{border-bottom:1px solid var(--hair);}
/* дрібніше за текст намистини — щоб розкритий список читався як вкладений */
.teachers .n{font-family:var(--display);font-size:1.12em;font-weight:600;letter-spacing:-.01em;}
.teachers .n span{
  font-family:var(--text);font-weight:400;font-size:.66em;
  color:var(--ink-4);margin-left:9px;letter-spacing:.04em;
}
.teachers .t p{font-size:.85em;color:var(--ink-3);margin:4px 0 0;}

/* ---------------------------------------------------------
   11. ПРАЙС
   Групи розділені підписом і повітрям. Рамок навколо груп немає —
   інакше друга група читається як преміум-пакет.
   Ціни набрані Cormorant: мінускульні цифри не кричать.
   --------------------------------------------------------- */
.group{margin-bottom:44px;}
.group .gname{
  font-size:.84em;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 18px;
}
.item{padding:22px 0;border-top:1px solid var(--hair);}
.group .item:last-child{border-bottom:1px solid var(--hair);}
.item .top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;}
.item .name{
  font-family:var(--display);font-size:1.55em;font-weight:600;
  line-height:1.15;letter-spacing:-.018em;
}
.item .sum{
  font-family:var(--display);font-size:1.45em;font-weight:500;white-space:nowrap;
}
.item p{font-size:1em;color:var(--ink-3);margin:10px 0 0;}   /* описи послуг — повного розміру, як відповіді в частих питаннях (19.10) */
/* у описі формату чорне — те, що людина отримує (рядки :mark:), сіре — умови,
   порада щодо часу, оплата. Як на «Про мене»: головне чорне серед світлішого */
.item p.mark{color:var(--ink);}
.item p.more{color:var(--ink);}

/* тихі рядки умов під прайсом */

/* ---------------------------------------------------------
   12. ВІДГУКИ
   Набрані Cormorant — це вже наявна гарнітура, а не новий сигнал.
   Золота тут немає: воно вже витрачене.
   --------------------------------------------------------- */
/* відгуки розділені повітрям, не лініями: ліній на сторінці й так багато */
.word{padding:0;margin:0 0 40px;}
.word:last-of-type{margin-bottom:0;}
.word p{
  font-family:var(--read);font-size:1.14em;line-height:1.45;
  color:var(--ink);margin:0;
}
.word .who{font-family:var(--text);font-size:.82em;color:var(--ink-4);margin-top:12px;}

/* ---------------------------------------------------------
   13. КАРТКИ ІНСТРУМЕНТІВ
   Рамки тут доречні: цю сторінку проглядають і обирають, а не читають.
   Картина відкрита у верхній частині й розчиняється в папері.
   --------------------------------------------------------- */
.grid{display:grid;gap:26px;}

.card{
  position:relative;display:block;text-decoration:none;color:var(--ink);
  min-height:240px;overflow:hidden;
  border:1px solid var(--hair);
  box-shadow:var(--shadow-card);
  transition:transform .16s ease, box-shadow .16s ease;
}
.card:active{transform:translateY(1px);box-shadow:var(--shadow-press);}

.card .bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:saturate(var(--art-saturate));
}
/* вуаль: щільна, але починається рано — текст лежить на чистому папері */
.card .scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(252,252,250,0) var(--art-veil-start),
    rgba(252,252,250,.92) calc(var(--art-veil-start) + 26%),
    rgba(252,252,250,1) 100%);
}
.card .txt{
  position:relative;display:flex;flex-direction:column;
  min-height:240px;justify-content:flex-end;
  padding:26px 22px 24px;
}
.card h3{font-size:1.55em;margin:0 0 10px;}
.card p{font-size:.95em;color:var(--ink-3);margin:0 0 18px;}
.card .go{
  font-size:.9em;color:var(--ink);
  border-bottom:1.5px solid var(--gold);padding-bottom:2px;align-self:flex-start;
}

/* ---------------------------------------------------------
   14. ГОЛОВНИЙ ІНСТРУМЕНТ (калькулятор)
   Не картка. Виділяється масштабом і повітрям, як усе інше на сайті.
   --------------------------------------------------------- */
section.lead{padding-top:52px;padding-bottom:56px;}   /* лінія зверху — див. 17а */
section.lead .art{
  position:relative;height:120px;margin-bottom:28px;
  border:1px solid var(--hair);overflow:hidden;
}
section.lead .art img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(var(--art-saturate));}
section.lead h2{font-size:2.45em;margin-bottom:16px;}
section.lead p{color:var(--ink-2);margin:0 0 28px;}

/* ---------------------------------------------------------
   15. ВІКНО ВИБОРУ МЕСЕНДЖЕРА
   Одна кнопка на сторінці відкриває це вікно.
   Телефон — шторка знизу. Десктоп — картка по центру.
   Підкладка — єдина темна поверхня на сайті. Вона тимчасова,
   на ній нічого не читають.
   --------------------------------------------------------- */
.veil{
  position:fixed;inset:0;z-index:70;
  background:rgba(8,12,24,.55);
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.veil.on{opacity:1;pointer-events:auto;}

.sheet{
  position:fixed;z-index:80;
  background:var(--paper);color:var(--ink);
  max-width:440px;width:100%;
  left:50%;bottom:0;transform:translate(-50%,100%);
  padding:12px 26px 34px;
  transition:transform .26s ease, opacity .2s;
}
.sheet.on{transform:translate(-50%,0);}
.sheet .grip{
  width:40px;height:4px;border-radius:2px;
  background:rgba(15,21,36,.18);margin:0 auto 22px;
}
.sheet h3{font-size:1.85em;margin:0 0 10px;}
.sheet .say{font-size:1em;color:var(--ink-2);margin:0 0 26px;}
.sheet .pick{display:flex;flex-direction:column;gap:12px;}
/* кнопки месенджерів — ті самі плитки, що й .gbtn, на всю ширину вікна */
.sheet .pick a{display:block;text-align:center;}
.sheet .close{
  display:block;margin:22px auto 0;
  background:none;border:none;font:inherit;
  font-size:.9em;color:var(--ink-4);cursor:pointer;
}

/* ---------------------------------------------------------
   16. ФУТЕР
   --------------------------------------------------------- */
footer{
  padding-top:32px;padding-bottom:46px;
  border-top:1px solid var(--hair);
  font-size:.88em;line-height:1.9;color:var(--ink-4);
}
footer a{color:var(--ink-4);text-decoration:none;border-bottom:1px solid var(--hair);transition:color .18s ease, border-color .18s ease;}
footer a:hover{color:var(--ink-2);border-bottom-color:var(--ink-4);}   /* тихі посилання оживають тихо: лише темнішають */
footer p{margin:0;}
/* юридичні сторінки дрібніші: вони обов'язкові, але не конкурують з контактами */
footer .legal{margin-top:10px;font-size:.82em;}
/* «© Анастасія Коритцева» — трохи темніше за контакти й службові посилання, але не чорне */
footer .legal.owner{color:var(--ink-2);}
footer a, footer span{white-space:nowrap;}   /* ім'я чи посилання не рвуться між рядками */

/* ---------------------------------------------------------
   17. ФОТО
   --------------------------------------------------------- */
/* заглушка, поки фото немає: сірий прямокутник */
.portrait{
  width:100%;height:300px;background:#e2e0d9;margin-bottom:26px;
}
/* справжнє фото — вирізана фігура на кольорі паперу.
   Показується повністю, рамка його не обрізає. */
img.portrait{display:block;height:auto;max-width:380px;background:none;}   /* на широкому телефоні боком не розростається на весь екран */

/* уточнення над ім'ям — тихий надпис, не плашка:
   рамка робила його схожим на кнопку, яку не можна натиснути */
.badge{
  display:block;font-size:.72em;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px;   /* сьома роль золота, тільки тут (власниця, 24.10) */
}

/* ---------------------------------------------------------
   17а. СТОРІНКА «ПРО МЕНЕ»
   Сторінку читають підряд: рамок і заливок немає, блоки
   розділені повітрям і тонкими лініями по ширині тексту.
   --------------------------------------------------------- */
.head{padding-top:34px;padding-bottom:40px;}
.head .role{font-size:.95em;color:var(--ink-2);margin:0;}
.head .role span{display:block;}   /* кожна частина — свій рядок: крапок між ними немає (власниця, 24.10) */
.stories{padding-top:44px;}
/* лінія-роздільник між блоками — по ширині тексту, як лінії шапки й футера */
.stories, section.lead{position:relative;}
.stories::before, section.lead::before{
  content:"";position:absolute;top:0;left:26px;right:26px;
  border-top:1px solid var(--hair);
}
/* висновок після історій — між двома лініями */
.stories p:last-child{
  margin:44px 0 0;padding:24px 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.translator{padding-top:46px;}
.translator p{color:var(--ink-2);margin:0 0 20px;}
.translator p:last-child{margin-bottom:0;}
/* фото збоку від тексту — тільки на широкому екрані, на телефоні не показується */
.translator .side{display:none;}
.path{padding-top:56px;}
.path .lead{color:var(--ink-2);margin:0 0 8px;}
/* підсумок намистини — шрифтом заголовків, щоб кожна мала свою кульмінацію */
.bead p.mark{font-family:var(--read);font-size:1.1em;line-height:1.42;margin-top:6px;}
.end{padding-top:58px;padding-bottom:62px;}
.end p{color:var(--ink-2);margin:0 0 32px;}
.end .bridge{font-size:1.05em;color:var(--ink);margin:0 0 26px;}
.end .quiet{margin-top:48px;}   /* тихий рядок не має липнути до кнопки */
.end .quiet:first-child{margin-top:0;}   /* тихий рядок без кнопки над ним — без запасу */

/* ---------------------------------------------------------
   17в. ЮРИДИЧНІ СТОРІНКИ (Impressum, Datenschutz)
   Зверху німецька (юридично діє вона), нижче українська — від
   посилання «Українською ↓». Спокійний текст: заголовки розділів
   дрібніші за звичайні, жодних прикрас.
   --------------------------------------------------------- */
.doc-nav{padding-top:28px;font-size:.92em;}
.doc{padding-top:22px;padding-bottom:24px;overflow-wrap:anywhere;}   /* довгі адреси сайтів не вилазять за край */
.doc p{color:var(--ink-2);}
.doc strong{font-weight:500;color:var(--ink);}
/* заголовки розділів однакові в обох мовах (у німецькій це h2, в українській h3) */
.doc h2, .doc h3{font-size:1.45em;margin:38px 0 12px;}
/* право на заперечення (ст. 21 GDPR) закон велить показати окремо від решти тексту:
   весь пункт — заголовок і абзац — між двома лініями, абзац напівжирний */
.doc h2:has(+ p.mark), .doc h3:has(+ p.mark){border-top:1px solid var(--hair);padding-top:22px;}
.doc p.mark{
  color:var(--ink);font-weight:500;margin:0 0 24px;padding:0 0 22px;
  border-bottom:1px solid var(--hair);
}
.doc ul.dash{margin:0 0 20px;padding-left:22px;color:var(--ink-2);}
.doc ul.dash li{margin:0 0 6px;}
/* українська частина — окремий блок із лінією зверху; її назва — як заголовок сторінки */
.doc + .doc{position:relative;margin-top:40px;padding-top:44px;}
.doc + .doc::before{
  content:"";position:absolute;top:0;left:26px;right:26px;
  border-top:1px solid var(--hair);
}
.doc + .doc > h2:first-child{font-size:2.1em;margin:0 0 20px;}
.doc[id]{scroll-margin-top:110px;}   /* після «Українською ↓» заголовок не ховається під шапкою */
/* AGB: три рівні — частина, параграф (§). Параграф дрібніший за частину;
   у німецькій це h3, в українській h4 (її назва вже h2, частини — h3) */
.agb[lang="de"] h3, .agb h4{font-size:1.12em;font-weight:600;margin:28px 0 8px;}
.agb p{margin-bottom:10px;}

/* ---------------------------------------------------------
   ТИМЧАСОВО: заглушка сторінки, яка ще не зроблена.
   Зникне, коли всі сторінки будуть готові.
   --------------------------------------------------------- */
.stub{padding-top:44px;padding-bottom:64px;}
.stub p{color:var(--ink-3);}

/* заглушка на місці тексту, який ще не написаний (позначка :todo:) —
   навмисно помітна, щоб її не сплутали з готовим текстом */
.todo{
  font-size:.88em;line-height:1.5;color:var(--ink-4);
  border:1px dashed rgba(15,21,36,.28);padding:10px 14px;margin:0 0 18px;
}
.todo::before{content:"Текст буде: ";color:var(--ink-3);font-weight:500;}
/* у списку із зірочками заглушка зірочку не отримує */
.cases p.todo{padding:10px 14px;}
.cases p.todo::before{
  content:"Текст буде: ";position:static;display:inline;height:auto;transform:none;
  font-family:var(--text);font-size:1em;line-height:inherit;color:var(--ink-3);font-weight:500;
}

/* ---------------------------------------------------------
   17б. СТОРІНКА «КОНСУЛЬТАЦІЇ»
   Порядок: вступ → з чим приходять → прайс → умови → кнопка →
   часті питання → відгуки → тихе «Написати».
   --------------------------------------------------------- */
.intro{padding-top:34px;}
.intro h1{margin-bottom:20px;}
/* вступ: виділений тільки рядок «свої» (шрифтом заголовків); досвід — підписом
   шрифтом заголовків, впритул до «Про мене» */
.intro .mark{font-family:var(--read);font-size:1.2em;line-height:1.42;color:var(--ink);margin:30px 0;}
.intro .caption{font-family:var(--read);font-size:1em;line-height:1.45;color:var(--ink);margin:0 0 6px;}
/* підпис: кругле фото, поруч досвід і «Про мене →» */
.sign{display:flex;align-items:center;gap:18px;margin-top:34px;}
.sign p{margin:0;}
/* кадр щільний (обличчя й волосся заповнюють коло), тонка лінія по краю —
   щоб білий фон портрета не зливався з папером */
.sign .ava{flex:none;position:relative;width:78px;height:78px;border-radius:50%;overflow:hidden;
  background:var(--hair);box-shadow:0 0 0 1px rgba(15,21,36,.14);}
.sign .ava img{position:absolute;display:block;width:108px;height:auto;max-width:none;left:-24px;top:-7px;}
.cases{padding-top:44px;}
.price{padding-top:40px;}
.price .item .todo{margin:10px 0 0;}
/* блок «Написати мені» — окрема зупинка між лініями: місток, під ним кнопка.
   Лінії — псевдоелементи, щоб були шириною тексту, а не всього блоку */
.cta{padding-top:0;padding-bottom:0;}
.cta::before,.cta::after{content:"";display:block;border-top:1px solid var(--hair);}
.cta::before{margin-bottom:34px;}
.cta::after{margin-top:40px;}
.cta .bridge{font-size:1.05em;color:var(--ink);margin:0 0 26px;}
/* рядок про Україну під кнопкою: дрібно, поруч зі своєю дією «напишіть» */
.cta .caption{position:relative;padding-left:18px;font-size:.95em;color:var(--ink-2);margin:22px 0 0;}
.cta .caption::before{content:"*";position:absolute;left:0;top:0;color:var(--gold);font-size:1.15em;}
.caption{margin:22px 0 0;color:var(--ink-2);}
.cta .todo{margin-top:20px;}
.faq{padding-top:56px;}
.faq .todo{margin:0 0 18px;}
/* групи частих питань: підпис як у прайсі; лінія під останнім питанням кожної групи */
.faq .group{margin-bottom:40px;}
.faq .group:last-child{margin-bottom:0;}
.faq .group details:last-of-type{border-bottom:1px solid var(--hair);}
.words{padding-top:44px;}
/* тихе «Написати мені →» одразу після відгуків — без великого запасу */
.words + .end{padding-top:48px;}
/* під останнім форматом лінії немає: одразу далі блок кнопки з власною лінією */
.price .group:last-child{margin-bottom:0;}
.price .group:last-child .item:last-child{border-bottom:none;}
/* заглушка рядка про час відповіді у вікні месенджера */
.sheet .say.todo{margin:0 0 24px;}

/* ---------------------------------------------------------
   17в. КАЛЬКУЛЯТОР РОДИНИ ЗАТЕМНЕНЬ (/tools/eclipse-family)
   Порядок: форма → результат → кнопка «Написати мені» →
   часті питання → тихий кінець.
   Ця сторінка — гра, хоч і серйозна, тому вона святковіша за решту
   сайту (рішення власниці 18.10, див. журнал): затемнення-емблема
   вгорі й у шапці результату, результат — паперова картка з тінню,
   переходи між частинами з кільцем, афірмація в золотій рамці,
   золоті підписи й шкала. Усе це — тільки на цій сторінці.
   --------------------------------------------------------- */

/* Затемнення в шапці результату: чорнильний диск, золота корона, «діамант» —
   біла іскра на краю. Корона — світле золото (rgba 201,162,78): темне --gold
   у сяйві брудне. Угорі сторінки затемнення немає: дві однакові емблеми
   на одному екрані — повтор (власниця, 18.10). */
.eclipse{
  content:"";display:block;position:relative;
  width:64px;height:64px;border-radius:50%;margin:0 auto 26px;
  /* диск — глибокий ультрамарин із картини над заголовком, не чорнило */
  background:radial-gradient(circle at 50% 60%, #222a44 0, #121829 50%, #0a0e1a 88%);
  box-shadow:
    0 0 0 1.5px rgba(214,178,98,.95),
    0 0 18px 4px rgba(201,162,78,.5),
    0 0 56px 18px rgba(201,162,78,.2);
}
.eclipse::after{
  content:"";position:absolute;left:50%;
  width:7px;height:7px;border-radius:50%;background:#fff;transform:translateX(-50%);
  box-shadow:0 0 5px 2px #fff, 0 0 12px 5px rgba(255,236,186,.9), 0 0 26px 9px rgba(201,162,78,.45);
}
.eclipse::after{top:-4px;}

/* верх сторінки: усе по центру, як у самого затемнення */
.calc{padding-top:44px;padding-bottom:56px;text-align:center;}
/* смуга з картини (нічне небо із золотом, О. Челнокова, картина 2) — над заголовком */
section.calc{position:relative;padding-top:150px;}
section.calc > :not(.art){position:relative;}
section.calc .art{position:absolute;top:0;left:0;right:0;height:230px;overflow:hidden;background:var(--paper);}
section.calc .art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;
  filter:saturate(var(--art-saturate));}
/* Розчинення — прозорістю самої картини, а не білою вуаллю: темно-синє небо
   під вуаллю 92% лишало сіру імлу й помітний край під заголовком.
   Початок той самий (--art-veil-start), до чистого паперу — до 62% висоти. */
section.calc .art{
  -webkit-mask-image:linear-gradient(180deg, #000 var(--art-veil-start), rgba(0,0,0,.25) 40%, transparent 62%);
          mask-image:linear-gradient(180deg, #000 var(--art-veil-start), rgba(0,0,0,.25) 40%, transparent 62%);
}
.calc h1{margin-bottom:18px;}
.calc .lead{color:var(--ink-2);margin:0 auto 34px;max-width:30em;}
form.calc{
  padding:26px 16px 22px;margin:0;
  background:var(--paper);border:1px solid var(--hair);box-shadow:var(--shadow-card);
  border-top:2px solid rgba(201,162,78,.75);   /* золотий обріз зверху: це предмет, а не текст */
}
form.calc .ask{
  font-family:var(--read);font-size:1.2em;line-height:1.42;color:var(--ink);
  margin:0 auto 22px;max-width:24em;
}
.calc .fields{display:flex;gap:6px;margin-bottom:24px;text-align:left;}
.calc select, .calc input{
  min-width:0;height:50px;padding:0 10px;
  font:inherit;font-size:1em;color:var(--ink);
  background-color:var(--paper);border:1px solid rgba(15,21,36,.28);border-radius:0;
  -webkit-appearance:none;appearance:none;
}
.calc select{
  flex:1.4;padding-right:28px;cursor:pointer;
  /* стрілка списку — тонкий золотий кут */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a6a24' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:12px 8px;
}
.calc #calc-day{flex:.9;}
.calc input{flex:1;}
.calc input::placeholder{color:var(--ink);opacity:1;}
.calc select:invalid{color:var(--ink);}
.calc select:focus, .calc input:focus{outline:none;border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);}
.calc .err{font-size:.92em;color:var(--ink);margin:20px 0 0;}
.calc .hint{font-size:.82em;line-height:1.5;color:var(--ink-4);margin:18px auto 0;max-width:34em;}
.calc .hint + .hint{margin-top:6px;}

/* результат і кнопка під ним з'являються тільки після «Дізнатися» */
body:not(.calc-done) .result, body:not(.calc-done) .calc-cta{display:none;}
.result{padding-top:8px;padding-bottom:22px;scroll-margin-top:70px;}   /* під карткою — не кінець, а важливе продовження: пропуск малий */

/* дві родини: пояснення і перемикач між ними — над карткою */
.result .fam-note{color:var(--ink-2);text-align:center;margin:0 auto 18px;max-width:34em;}
/* дві родини — дві плитки поруч: вибрана лежить вище (тінь, золота лінія знизу),
   друга — пласка, світліша; під мишкою піднімається, як кнопка */
.result .tabs{display:flex;gap:10px;margin:0 -12px 26px;}
.result .tabs button{
  flex:1;min-width:0;cursor:pointer;
  background:var(--paper);border:1px solid var(--hair);
  padding:14px 10px 15px;
  font-family:var(--display);font-size:1.22em;font-weight:600;line-height:1.2;
  letter-spacing:-.01em;color:var(--ink-3);
  transition:transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.result .tabs button:hover{color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-lift);}
.result .tabs button[aria-pressed="true"]{
  color:var(--ink);box-shadow:var(--shadow-card);
  border-bottom:2px solid var(--gold);
}
.result .tabs button[aria-pressed="true"]:hover{transform:none;}

/* картка родини: папір із тінню, як картки інструментів */
.fam{
  background:var(--paper);border:1px solid var(--hair);box-shadow:var(--shadow-card);
  margin:0 -12px;   /* на телефоні картка трохи ширша за колонку — тексту більше місця */
}
/* шапка картки: затемнення серед крихітних зірок, назва, сарос.
   Велике жовте сяйво за затемненням прибрано (18.10): корони досить */
.fam .hero{
  text-align:center;padding:40px 20px 30px;border-bottom:1px solid var(--hair);
  background:
    radial-gradient(1.5px 1.5px at 18% 24%, rgba(138,106,36,.55), transparent),
    radial-gradient(1px 1px at 30% 62%, rgba(138,106,36,.45), transparent),
    radial-gradient(1.5px 1.5px at 76% 18%, rgba(138,106,36,.5), transparent),
    radial-gradient(1px 1px at 86% 54%, rgba(138,106,36,.45), transparent),
    radial-gradient(1px 1px at 64% 78%, rgba(138,106,36,.35), transparent),
    radial-gradient(1px 1px at 10% 80%, rgba(138,106,36,.35), transparent);
}
.fam .eclipse{width:80px;height:80px;margin-bottom:28px;}
.fam .hero h2{font-size:2.3em;margin:0 0 14px;}
.fam .saros{
  display:inline-block;margin:0;padding:4px 14px 5px;
  border:1px solid rgba(138,106,36,.55);border-radius:999px;
  font-size:.74em;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
}
.fam .body{padding:8px 18px 0;}
.fam p{color:var(--ink-2);}
.fam .d{color:var(--ink);font-weight:500;white-space:nowrap;}   /* дата затемнення — те, що людям найцікавіше */
.fam h3{font-size:1.5em;margin:30px 0 12px;}
.fam .kicker{color:var(--gold);margin:26px 0 8px;}

/* шкала життя родини: від зародження до завершення, золота крапка — рік народження */
.fam .span{margin:24px 0 24px;}
.fam .track{position:relative;height:1px;background:rgba(138,106,36,.3);}
.fam .track i{position:absolute;left:0;top:-1px;height:3px;background:rgba(138,106,36,.75);}
.fam .track b{position:absolute;top:0;width:13px;height:13px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 3px var(--paper), 0 0 10px 3px rgba(201,162,78,.45);
  transform:translate(-50%,-50%);}
.fam .years{position:relative;height:20px;margin-top:12px;font-size:.8em;color:var(--ink-4);white-space:nowrap;}
.fam .years span{position:absolute;top:0;}
.fam .years .a{left:0;}
.fam .years .z{right:0;}
.fam .years .now{transform:translateX(-50%);color:var(--gold);font-weight:500;}

/* місячне затемнення: місяць старого золота, на який наповзає тінь Землі.
   Кольори значків — чорнило і старе золото (варіант «А», 19.10): колір дає
   картина, значки в палітрі сайту. Ультрамарин і мідь — «по-спортивному»,
   індиго й бронза — не в тон картині */
/* стоїть дрібним рядком у шапці картки, одразу під назвою родини: це інша
   подія, тож не розділ картки, а примітка поруч із родиною (19.10) */
.fam .moon-note{
  display:flex;align-items:flex-start;gap:12px;
  max-width:30em;margin:24px auto 0;padding-top:20px;border-top:1px solid var(--hair);
  font-size:.9em;line-height:1.5;color:var(--ink-3);text-align:left;
}
.fam .moon-note::before{
  content:"";flex:none;width:22px;height:22px;border-radius:50%;margin-top:1px;
  background:
    radial-gradient(circle at 84% 28%, #141a2c 0 50%, rgba(20,26,44,0) 52%),
    radial-gradient(circle at 38% 40%, #efe2bd, #d2b67a 55%, #a8874a 95%);
  box-shadow:0 0 0 1px rgba(138,106,36,.35), 0 0 10px 2px rgba(201,162,78,.25);
}

/* перехід між частинами: лінія, посередині маленьке кільце-затемнення */
.sep{display:flex;align-items:center;gap:12px;margin:36px 0 6px;}
.sep::before, .sep::after{content:"";flex:1;border-top:1px solid var(--hair);}
.sep span{
  width:13px;height:13px;border-radius:50%;flex:none;
  border:1px solid rgba(138,106,36,.8);background:var(--paper);
  box-shadow:inset 0 0 0 2.5px var(--paper), inset 0 0 0 7px #121829, 0 0 8px 1px rgba(201,162,78,.35);
}

/* Внутрішнє рішення — фінал картки, на всю її ширину. Під текстом — та сама
   картина, що вгорі сторінки, дзеркально: виринає з паперу знизу вгору й
   лежить по нижньому краю картки. Одна картина й один прийом на сторінку.
   Пробували й відкинули (19.10): золоту рамку, рамку-паспарту з картини
   (рамка в рамці, «грамота»), довгий напівпрозорий перехід (молочна імла). */
.fam{overflow:hidden;}
.affirm{
  position:relative;isolation:isolate;
  margin-top:0;padding:10px 24px 140px;text-align:center;   /* від тексту над ним — як від лінії до «Генетичного коду» */
}
.affirm::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:170px;z-index:-1;
  /* на телефоні вузька смуга показує тільки теплий низ картини — тому картина
     трохи більша за смугу й прикладена верхом: знизу зрізається смужка жовтого,
     а вище видно трохи синього. Відкрито стільки ж, як на комп'ютері */
  background:url(/img/kartyna-zatemnennia.jpg) center top/auto 150%;filter:saturate(var(--art-saturate));
  -webkit-mask-image:linear-gradient(0deg, #000 18%, rgba(0,0,0,.3) 45%, transparent 70%);
          mask-image:linear-gradient(0deg, #000 18%, rgba(0,0,0,.3) 45%, transparent 70%);
}
.fam .affirm p{
  font-family:var(--read);font-size:1.17em;font-weight:400;line-height:1.45;
  color:var(--ink);margin:0;
}
/* золотий «діамант» над текстом — між двома короткими золотими рисками.
   Короткими, а не на всю ширину, як лінія з кільцем між розділами: це не
   ще один розділ, а прикраса фіналу; довга лінія зверху плюс картина знизу
   знову зробили б рамку (19.10) */
.fam .affirm p::before{
  content:"✦";display:block;color:var(--gold);font-size:.8em;margin:0 auto 12px;width:9.5em;
  background:
    linear-gradient(rgba(138,106,36,.5),rgba(138,106,36,.5)) left center/3.6em 1px no-repeat,
    linear-gradient(rgba(138,106,36,.5),rgba(138,106,36,.5)) right center/3.6em 1px no-repeat;
}

/* блок «Написати мені» під результатом — як на «Консультаціях», плюс питання із зірочками */
.calc-cta::before{display:none;}   /* у картки над ним уже є своя межа */
/* ліворуч: по центру довгі рядки й перелік читаються погано (пробували 19.10) */
.calc-cta{padding-top:8px;}
/* перший і останній абзаци — чорні, перелік питань між ними — сірий і дрібніший:
   так текст не зливається, а кнопка лишається головною */
.calc-cta .bridge{font-size:1em;color:var(--ink);margin-bottom:20px;}
/* питання — тихіші: це перелік, а не головне */
.calc-cta p.star{position:relative;padding-left:28px;margin:0 0 8px;font-size:1em;color:var(--ink-2);}
.calc-cta p.star::before{
  content:"*";position:absolute;left:0;top:0;height:1.58em;
  display:flex;align-items:center;
  font-family:var(--display);font-size:1.75em;line-height:1;
  color:var(--gold);transform:translateY(-4px);
}
/* висновок — чорним звичайним шрифтом: з доповненням він довгий, і шрифтом
   заголовків такий абзац читається важко (власниця, 19.10) */
.calc-cta .closing{color:var(--ink);margin:24px 0 28px;}
.calc-cta .gbtn + p{margin:24px 0 0;font-size:.9em;}

/* кінець: запрошення в Telegram; підписи про дані й авторство — окремо, нижче */
/* лінія над запрошенням — вона ж закриває список частих питань; запрошення
   стоїть одразу під нею, а не «висить» між двома великими проміжками */
section.calc-end{padding-top:32px;}
.calc-end::before{content:"";display:block;border-top:1px solid var(--hair);margin-bottom:36px;}
.calc-end .bridge{margin:0 0 10px;font-size:.95em;color:var(--ink-2);}   /* тихий кінець — не крупніший за текст сторінки */
.calc-end .bridge + p .link{font-family:var(--display);font-size:1.12em;font-weight:600;letter-spacing:-.01em;}   /* золоті тут лінія й стрілка, саме слово чорне (власниця, 19.10) */
.calc-end .bridge + p{margin:0;}
.calc-end .quiet{font-size:.8em;margin:0 0 2px;}
.calc-end .bridge + p + .quiet{margin-top:30px;}
/* рядок про Telegram-канал — не світло-сірий: темніший і трохи більший за підпис про NASA */
section.calc-end .bridge + p + .quiet{font-size:.92em;color:var(--ink-2);}
section.calc-end .bridge + p + .quiet a{color:var(--ink);border-bottom:1.5px solid var(--gold);}
section.calc-end .bridge + p + .quiet a:hover{color:var(--ink);border-bottom-color:var(--ink);}
/* на калькуляторі: головне — «Напишіть мені», нижче тихо Telegram, ще нижче — джерело даних */
section.calc-end .quiet + .quiet{margin-top:30px;}
/* «Поділитись» (позначка :share:) — зараз не стоїть на сторінці, стилі лишаються для листівки */
.end .share{margin:0;}
.end .share button{background:none;border-top:none;border-left:none;border-right:none;
  font:inherit;cursor:pointer;padding:0 0 2px;}
.end .share .said{margin-left:14px;font-size:.88em;color:var(--ink-4);}
.end .share + .todo, .end .share + .quiet{margin-top:40px;}
.end .share ~ .quiet{margin-bottom:2px;}
.end .quiet + .quiet{margin-top:0;}

/* ---------------------------------------------------------
   17г. КАТАЛОГ «ІНСТРУМЕНТИ» (/tools)
   Вступ → калькулятор (першим, крупно, без заголовка над ним) →
   календарі картками → тихий рядок про Telegram.
   Картини — фрагменти тієї самої картини, що на сторінці калькулятора
   (kartyny/2.jpg): калькулятор упізнається при переході, картки
   календарів читаються одним набором.
   --------------------------------------------------------- */
.tools-intro{padding-bottom:4px;}
.tools-intro p{color:var(--ink-2);margin:0;}
/* калькулятор — паперова картка з тінню, як картка результату на його сторінці:
   так видно, що це окремий предмет, а не продовження вступу (власниця, 19.10).
   Усередині: смуга з картини, що розчиняється в папері, і текст по центру */
section.lead.tools-lead{
  margin:22px 14px 52px;padding:0 0 34px;
  background:var(--paper);border:1px solid var(--hair);box-shadow:var(--shadow-card);
  overflow:hidden;text-align:center;
}
section.tools-lead::before{display:none;}
/* натискається вся картка (site.js): піднімається, як картки календарів, і стрілка кнопки рушає */
section.tools-lead.whole{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease;}
section.tools-lead.whole:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);}
section.tools-lead.whole:hover .gbtn::after{transform:translateX(5px);}
section.tools-lead .art{height:150px;border:none;margin:0 0 4px;
  -webkit-mask-image:linear-gradient(180deg, #000 var(--art-veil-start), rgba(0,0,0,.25) 50%, transparent 88%);
          mask-image:linear-gradient(180deg, #000 var(--art-veil-start), rgba(0,0,0,.25) 50%, transparent 88%);}
section.tools-lead h2{margin:0 22px 14px;}
section.tools-lead p{margin:0 auto 26px;padding:0 22px;max-width:30em;
  font-family:var(--read);font-size:1.08em;line-height:1.45;color:var(--ink);}   /* заклик — Lora, як над формою калькулятора */
.cals{position:relative;padding-top:52px;}
.cals::before{content:"";position:absolute;top:0;left:26px;right:26px;border-top:1px solid var(--hair);}
/* заголовок групи помітно менший за «Родина затемнень», але більший за назви карток */
.cals h2{font-size:1.75em;margin-bottom:8px;}
.cals > p{font-size:1em;color:var(--ink-3);margin:0 0 26px;}
/* картка, сторінки якої ще немає: не натискається, замість «Відкрити» — тихе «Готується» */
.card.soon{cursor:default;}
.card.soon:active{transform:none;box-shadow:var(--shadow-card);}
.card .go.soon{border-bottom:none;padding-bottom:0;color:var(--ink-4);
  font-size:.72em;letter-spacing:.14em;text-transform:uppercase;}
/* назви календарів на одному рівні: текст картки починається з однієї висоти,
   а «Готується» притиснуте донизу — хоч описи й різної довжини */
.cals .card{display:flex;flex-direction:column;}
.cals .card .txt{flex:1;justify-content:flex-start;padding-top:118px;}   /* на всю висоту картки — «Готується» в усіх на одному рівні */
.cals .card p{flex:none;}
.cals .card .go{margin-top:auto;}
/* Telegram у каталозі — так само, як на сторінці калькулятора (блок calc-end) */

/* ---------------------------------------------------------
   17д. КАЛЕНДАР ЗАТЕМНЕНЬ (/calendars/eclipses)
   Рядок: коли (дата / час) · що (вид / тип) · де (знак / градус).
   У сонячного ще й сарос: «Назва (Сарос 121) — речення» шрифтом Lora —
   це авторський текст, він має свій голос і не зливається з даними.
   На телефоні сарос під рядком, на комп'ютері — праворуч, як у таблиці.
   У місячного саросу немає (власниця, 21.10).
   Затемнення одного сезону стоять разом під підписом «Сезон затемнень · …»;
   лінії між сезонами були непомітні (власниця, 21.10).
   --------------------------------------------------------- */
/* смуга з картини вгорі — як на калькуляторі (картина з картки календаря в /tools) */
section.cal-intro{position:relative;padding-top:150px;padding-bottom:8px;}
section.cal-intro > :not(.art){position:relative;}
section.cal-intro .art{position:absolute;top:0;left:0;right:0;height:230px;overflow:hidden;background:var(--paper);
  -webkit-mask-image:linear-gradient(180deg, #000 var(--art-veil-start), rgba(0,0,0,.25) 40%, transparent 62%);
          mask-image:linear-gradient(180deg, #000 var(--art-veil-start), rgba(0,0,0,.25) 40%, transparent 62%);}
section.cal-intro .art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;
  filter:saturate(var(--art-saturate));}
.cal-intro h1{margin-bottom:6px;}
/* найближче затемнення */
.state{padding:20px 0 22px;margin:0;border-bottom:1px solid var(--hair);}
/* «Найближче» і кнопка календаря — одна паперова картка, як картка калькулятора внизу:
   верх читається як одна річ «що найближче і як не пропустити» (власниця, 21.10) */
.next-card{background:var(--paper);border:1px solid var(--hair);box-shadow:var(--shadow-card);padding:20px 16px 22px;margin:16px 0 0;}
.next-card .state{padding:0;border:none;}
.next-card .addcal{margin-top:20px;}
.next-card .addcal .gbtn{font-size:1.15em;padding:10px 16px 11px;}   /* на телефоні вміщається в один рядок; тінь — як у всіх кнопок (власниця, 22.10) */
.state .nl{font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin:0 0 8px;}
.state .big{font-family:var(--display);font-size:1.85em;font-weight:600;line-height:1.14;letter-spacing:-.02em;margin:0 0 6px;}
.state .meta{color:var(--ink-2);margin:0;}
/* «Ваш часовий пояс: Берлін (UTC+2) · змінити» — над кнопками років */
.tzline{font-size:.88em;color:var(--ink-3);margin:0 0 10px;}
.tzline b{font-weight:500;color:var(--ink);}
.tz-change{background:none;border:none;border-bottom:1px solid var(--gold);padding:0 0 1px;font:inherit;color:var(--ink);cursor:pointer;}
/* віконце поясу: пошук і список міст */
.tz-sheet input{width:100%;font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--hair);padding:11px 12px;margin:0 0 10px;}
.tz-sheet input:focus{outline:none;border-color:var(--gold);}
.tz-list{list-style:none;margin:0;padding:0;max-height:min(46vh,340px);overflow-y:auto;border-top:1px solid var(--hair);}
.tz-list button{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;
  background:none;border:none;border-bottom:1px solid var(--hair);padding:11px 2px;font:inherit;color:var(--ink);text-align:left;cursor:pointer;}
.tz-list button:hover{color:var(--gold);}
.tz-list button.on{font-weight:500;}
.tz-list small{font-size:.85em;color:var(--ink-4);white-space:nowrap;font-variant-numeric:tabular-nums;}
.tz-none{font-size:.92em;color:var(--ink-3);margin:12px 0 0;}

/* значки — як місячне затемнення в картці калькулятора:
   місячне — місяць старого золота, на який наповзає тінь Землі;
   сонячне — темний диск із золотим ободом (сонце за Місяцем) */
.sym{display:inline-block;flex:none;width:16px;height:16px;border-radius:50%;}
.sym.moon, .ev.moon .sym{
  background:
    radial-gradient(circle at 84% 28%, #141a2c 0 50%, rgba(20,26,44,0) 52%),
    radial-gradient(circle at 38% 40%, #efe2bd, #d2b67a 55%, #a8874a 95%);
  box-shadow:0 0 0 1px rgba(138,106,36,.35), 0 0 7px 1px rgba(201,162,78,.25);
}
.sym.sun, .ev.sun .sym{
  background:#121829;
  box-shadow:0 0 0 1.5px rgba(201,162,78,.9), 0 0 7px 2px rgba(201,162,78,.35);
}

.cal-list{padding-top:30px;}

/* роки — по кнопці: видно один рік, обраний обведений золотом (власниця, 21.10).
   Спершу відкритий рік найближчого затемнення; перемикає kalendar.js */
/* ряд років липне під шапкою, поки гортаєш рік (--stick рахує kalendar.js) */
.jump{position:sticky;top:var(--stick,0px);z-index:6;background:var(--paper);display:flex;gap:5px;margin:0;padding:6px 0 8px;}
.jump a{flex:1 1 0;min-width:0;max-width:84px;text-align:center;font-size:.9em;color:var(--ink-2);text-decoration:none;
  border:1px solid var(--hair);padding:7px 0;font-variant-numeric:tabular-nums;}
.jump a:hover{border-color:var(--ink-4);color:var(--ink);}
.jump a.on{border-color:var(--gold);color:var(--ink);font-weight:500;}
/* після натискання браузер малював свою чорну рамку поверх золотої — лишаємо її тільки для клавіатури */
.jump a:focus{outline:none;}
.jump a:focus-visible{border-color:var(--gold);}

.ygroup{padding-top:16px;scroll-margin-top:var(--jump-top,120px);}
.yh{display:flex;align-items:baseline;gap:12px;
  font-size:1.9em;letter-spacing:-.02em;line-height:1.2;margin:0;padding:0 0 9px;
  border-bottom:1.5px solid var(--ink);}
.yh .cnt{font-family:var(--text);font-size:.42em;font-weight:400;color:var(--ink-4);letter-spacing:.02em;}

/* сезон: підпис і повітря замість ліній */
.season{padding:16px 0 0;}
.season .sl{font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin:0;}
.ev{display:grid;grid-template-columns:16px auto 1fr auto;column-gap:13px;row-gap:2px;
  align-items:baseline;padding:7px 0;}
.ev.past{opacity:.45;}
.ev .sym{grid-column:1;grid-row:1;align-self:center;}
.ev .d{grid-column:2;grid-row:1;font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap;}
.ev .t{grid-column:2;grid-row:2;font-variant-numeric:tabular-nums;font-size:.88em;color:var(--ink-4);white-space:nowrap;}
.ev .kind{grid-column:3;grid-row:1;font-weight:500;}
.ev .det{grid-column:3;grid-row:2;font-size:.88em;color:var(--ink-4);}
/* знак — тим самим шрифтом, що й «Сонячне»: два шрифти в одному рядку давали безлад */
.ev .sg{grid-column:4;grid-row:1;font-weight:500;white-space:nowrap;text-align:right;}
.ev .deg{grid-column:4;grid-row:2;font-size:.88em;color:var(--ink-4);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;}
.ev .s{grid-column:2 / span 3;grid-row:3;margin:4px 0 2px;
  font-family:var(--read);font-size:.92em;line-height:1.45;color:var(--ink-2);}
.ev .s .sn{color:var(--ink);font-weight:500;}


/* кнопка «Додати в мій календар» під «Найближче» */
.addcal{margin:18px 0 0;}
.cal-list .addcal{margin-top:34px;}   /* повтор під списком року */
.addcal .gbtn{display:inline-flex;align-items:center;gap:10px;font-size:1.25em;padding:11px 20px 12px;}
.addcal .gbtn svg{width:20px;height:20px;flex:none;}
.addcal-say{font-size:.88em;color:var(--ink-3);line-height:1.45;margin:6px 0 0;}   /* впритул до кнопки — читається як її частина */
/* віконце календаря: кнопки з підписом під назвою, стрілка праворуч */
.cal-sheet .pick a{display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left;}
.cal-sheet .pick a::after{grid-column:2;grid-row:1 / span 2;}
.cal-sheet .pick a small{grid-column:1;grid-row:2;display:block;font-family:var(--text);font-size:.55em;font-weight:400;color:var(--ink-4);letter-spacing:0;margin-top:2px;}

/* рядок про YouTube і Telegram — одразу над частими питаннями, звичайного кольору й із золотими посиланнями */
.cal-media{padding-top:56px;}
.cal-media p{color:var(--ink-2);margin:0;}
.cal-faq{padding-top:36px;}
section.cal-ask{padding-top:36px;padding-bottom:0;}
.cal-ask .bridge{margin-bottom:10px;}
/* картка калькулятора внизу — та сама, що в «Інструментах» */
section.lead.cal-lead{margin-top:56px;}

/* ---------------------------------------------------------
   17е. КАЛЕНДАРІ РЕТРОГРАДНОСТІ (/calendars/retrograde/…)
   Те саме, що в календарі затемнень (картка «Найближче», пояс, роки, підписка),
   але рядок — період: дати ретроградності, градуси петлі за зодіаком,
   шкала петлі й три рядки під нею (петля, стоянки, з'єднання із Сонцем).
   Шкала: світла смуга — петля, темна — ретроградність, риски — стоянки,
   золота крапка — з'єднання із Сонцем. З прототипу prototyp-retro-merkuriy.html.
   --------------------------------------------------------- */
/* вступ під карткою «Найближче», відокремлений лінією (власниця, 21.10) */
.cal-lede p{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--hair);color:var(--ink-2);}

/* легенда шкали над роками */
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:.85em;color:var(--ink-3);margin:0 0 14px;}
.legend span{display:flex;align-items:center;gap:7px;}
.legend b{display:block;width:22px;height:7px;font-size:0;}
.legend .bl{background:rgba(15,21,36,.12);}
.legend .br{background:rgba(15,21,36,.42);}
.legend .bp{width:1.5px;height:13px;background:var(--ink-3);}
.legend .bs{width:10px;height:10px;border-radius:50%;background:var(--gold);}

/* період */
.per{padding:22px 0 24px;border-top:1px solid var(--hair);}
.yh + .per{border-top:none;padding-top:18px;}
.per.past{opacity:.45;}
.per .ptop{margin:0;}
.per .big{display:block;font-size:1.1em;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.per .deg{display:block;margin-top:3px;font-size:.84em;color:var(--ink-4);font-variant-numeric:tabular-nums;}
.per .det{font-size:.88em;color:var(--ink-3);line-height:1.5;margin:9px 0 0;}
.per .det + .det{margin-top:3px;}
/* кнопка календаря під списком року — ближче до списку, як у затемнень (у періоду свій відступ знизу) */
.cal-list .ygroup:has(.per) ~ .addcal{margin-top:16px;}
.per .det .nw{white-space:nowrap;}   /* «Скорпіон 12°11′» не розривається між рядками */

/* шкала петлі */
.scale{position:relative;height:36px;margin-top:17px;}
.scale .track{position:absolute;left:0;right:0;top:9px;height:1px;background:var(--hair);}
.scale .loop{position:absolute;top:6px;height:7px;left:0;right:0;background:rgba(15,21,36,.12);}
.scale .retro{position:absolute;top:6px;height:7px;background:rgba(15,21,36,.42);}
.scale .pin{position:absolute;top:3px;width:1.5px;height:13px;background:var(--ink-3);}
.scale .sun{position:absolute;top:4.5px;width:10px;height:10px;border-radius:50%;background:var(--gold);transform:translateX(-50%);border:1.5px solid var(--paper);}
.scale .cap{position:absolute;top:20px;font-size:.68em;color:var(--ink-4);font-variant-numeric:tabular-nums;transform:translateX(-50%);white-space:nowrap;}
.scale .cap.l{transform:none;left:0;}
.scale .cap.r{transform:none;right:0;}
.scale .cap.gold{color:var(--gold);}

/* «Як читати петлю»: заголовок, схема, текст; золотом — частина петлі, про яку абзац */
.cal-prose{padding-top:56px;}
.cal-prose h2{font-size:1.75em;margin-bottom:18px;}
.cal-prose h2 + p ~ h2{margin-top:56px;}
.cal-prose p{color:var(--ink-2);}
.cal-prose h3{font-size:1.45em;margin:30px 0 10px;scroll-margin-top:24px;}
.cal-prose .pull{font-family:var(--read);font-size:1.18em;line-height:1.45;margin:30px 0 32px;color:var(--ink);}
/* підсумок розділу після цитати — Lora, як підсумки намистин на «Про мене», без лінії (власниця, 22.10) */
.cal-prose .mark{font-family:var(--read);font-size:1.1em;line-height:1.42;color:var(--ink);margin:0;}
.mini{margin:0 0 14px;padding-top:18px;}
.mini .scale{margin-top:0;}
.mini .loop{background:rgba(15,21,36,.10);}
.mini .retro{background:rgba(15,21,36,.24);}
.mini .pin, .mini .sun{background:var(--ink-4);}
.mini .seg{position:absolute;top:6px;height:7px;background:var(--gold);}
.mini .retro.hl{background:var(--gold);}
.mini .pin.hl{background:var(--gold);width:3px;margin-left:-1px;top:1px;height:17px;}
.mini .sun.hl{background:var(--gold);box-shadow:0 0 0 4px rgba(138,106,36,.22);}
.mini .cap{top:22px;}
.mini .cap.hl{color:var(--gold);font-weight:500;}
/* підпис «ретроградність» над проміжком */
.mini .rl{position:absolute;left:28%;right:28%;top:-15px;text-align:center;font-size:.68em;color:var(--ink-4);white-space:nowrap;}
.mini .rl.hl{color:var(--gold);font-weight:500;}

/* хаб /calendars/retrograde: «Сьогодні», графік року, картки планет (з prototyp-retro-hub.html) */
.yearmap{margin:40px 0 0;}
.ymhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin:0 0 14px;padding-bottom:9px;border-bottom:1.5px solid var(--ink);}
.ymhead h2{font-size:1.9em;margin:0;letter-spacing:-.02em;}
.ymcap{flex-basis:100%;margin:2px 0 0;font-size:.92em;color:var(--ink-3);}
.yearmap .axis, .yearmap .lane{display:grid;grid-template-columns:5.6em 1fr;column-gap:10px;}
.yearmap .axis{margin-bottom:8px;}
.yearmap .mon{position:relative;height:13px;}
.yearmap .mon i{position:absolute;top:0;transform:translateX(-50%);font-style:normal;font-size:.66em;color:var(--ink-3);letter-spacing:.02em;}
.yearmap .mon i.sm{display:none;}
.yearmap .lane{align-items:center;margin-bottom:7px;}
.yearmap .nm{font-size:.84em;color:var(--ink);}
.yearmap .track{position:relative;height:15px;}
.yearmap .track::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--hair);}
.yearmap .ymgrid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);}
.yearmap .ymgrid span{border-left:1px solid rgba(15,21,36,.09);}
.yearmap .ymgrid span:first-child{border-left:none;}
.yearmap .track i{position:absolute;top:3px;height:9px;font-style:normal;}
.yearmap .track i.rt{background:rgba(15,21,36,.8);}   /* темне чорнило поруч із золотою лінією — як «ask» і «nebo» в логотипі */
.yearmap .none{position:absolute;left:0;top:0;line-height:15px;font-size:.68em;color:var(--ink-3);background:var(--paper);padding-right:6px;}
.yearmap .today{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--gold);}
/* легенди немає: під золотою лінією — підпис «сьогодні», що ходить разом із нею */
.yearmap .tdrow{margin-top:4px;}
.yearmap .mon i.tdcap{color:var(--gold);font-weight:500;}

.hub-cards{padding-top:52px;}
.hub-cards h2{font-size:1.75em;margin-bottom:18px;}
.cgrid{display:grid;gap:18px;}
.pcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--hair);box-shadow:var(--shadow-card);
  padding:22px;text-decoration:none;color:var(--ink);transition:transform .16s ease,box-shadow .16s ease;}
a.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);}
a.pcard:active{transform:translateY(1px);box-shadow:var(--shadow-press);}
/* смуга з картини вгорі картки, розчиняється в папері (як картка калькулятора в «Інструментах») */
.pcard .art{display:block;height:110px;margin:-22px -22px 10px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, #000 var(--art-veil-start), rgba(0,0,0,.25) 55%, transparent 92%);
          mask-image:linear-gradient(180deg, #000 var(--art-veil-start), rgba(0,0,0,.25) 55%, transparent 92%);}
.pcard .art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(var(--art-saturate));}
.pcard h3{font-size:1.55em;margin:0 0 2px;}
.pcard .freq{font-size:.82em;color:var(--ink-4);margin:0 0 12px;}
.pcard p{color:var(--ink-2);font-size:.97em;margin:0 0 18px;}
.pcard .go{margin-top:auto;align-self:flex-start;font-size:.92em;border-bottom:1.5px solid var(--gold);padding-bottom:2px;}
.pcard .go:not(.soon)::after{content:" →";color:var(--gold);}
/* сторінки планети ще немає: картка не натискається, замість посилання — тихе «Готується», як в «Інструментах» */
.pcard .go.soon{border-bottom:none;padding-bottom:0;color:var(--ink-4);font-size:.72em;letter-spacing:.14em;text-transform:uppercase;}
.cal-ask .quiet{margin-top:28px;font-size:.88em;color:var(--ink-4);}
.cal-ask .quiet a{color:var(--ink-4);text-decoration:none;border-bottom:1px solid var(--hair);}

/* ---------------------------------------------------------
   17ж. ГОЛОВНА (/)
   Дзеркало решти сайту: речення й підпис → з чим приходять, відгук, кнопка →
   навчання → коучинг → інструменти (калькулятор + календарі однією групою) → відео й канали.
   Великого фото немає: воно на «Про мене»; тут кругле фото-підпис, як на «Консультаціях».
   --------------------------------------------------------- */
.home-head{padding-top:44px;}
/* смуга з картини над реченням (kartyny/IMG_6289 — велике фото, правий верхній край: синьо-зелена з місяцями, повернуто горизонтально;
   власниця, 23.10) — низька, щоб речення лишалося на першому екрані телефона; розчиняється в папері */
.home-head .art{height:92px;margin:-20px 0 30px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, #000 30%, rgba(0,0,0,.35) 70%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 30%, rgba(0,0,0,.35) 70%, transparent 100%);}
.home-head .art img{display:block;width:100%;height:100%;object-fit:cover;object-position:45% top;   /* на телефоні — середина з місяцями */
  filter:saturate(var(--art-saturate));}
.home-head h1{font-size:2.05em;line-height:1.14;margin:0;}
.home-head .sign{margin-top:30px;}
/* ім'я й роль — шрифтом заголовків, жирніше: Lora звичайної ваги губилась поруч із великим реченням (власниця, 23.10) */
.home-head .sign .caption{font-family:var(--display);font-size:1.32em;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:0 0 6px;}
.home-head .sign p:not(.caption){font-size:.92em;color:var(--ink-2);}
/* перелік: пункти із зірочкою; відгук — без неї; під ним кнопка «Консультації» */
.home-cases{padding-top:60px;}
.home-cases p.star{color:var(--ink);}
.home-cases p:not(.star){padding-left:0;}
.home-cases p:not(.star)::before{content:none;}
/* відгук — цитатою із золотою лінією на полі, як .pull: один на екран */
.home-cases .word{margin:36px 0 0;padding-left:20px;border-left:2px solid var(--gold);}
.home-cases .gbtn{margin-top:34px;}
/* інструменти: калькулятор першою карткою на всю ширину, далі три календарі */
.home-tools{margin-top:56px;}
.home-tools .grid > .card:first-child{grid-column:1 / -1;}
.home-more{position:relative;margin-top:56px;padding-top:44px;}
.home-more::before{content:"";position:absolute;top:0;left:26px;right:26px;border-top:1px solid var(--hair);}
.home-more p{color:var(--ink-2);}
.home-more p:not(.star):not(:last-child){margin-bottom:16px;}
.home-more p:last-child{margin:24px 0 0;}
/* підпис «Ім'я | астролог · коуч»: на телефоні роль з нового рядка, на комп'ютері через «·» */
.caption .sep{display:none;}
.caption .sep + span{display:block;}
/* обкладинка відео: картинка з посиланням, без плеєра; кружечок «▶» у правому нижньому куті — на одязі, не на тексті обкладинки */
.video{position:relative;display:block;margin:0 0 30px;overflow:hidden;
  border:1px solid var(--hair);box-shadow:var(--shadow-card);
  transition:transform .16s ease, box-shadow .16s ease;}
.video:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);}
.video:active{transform:translateY(1px);box-shadow:var(--shadow-press);}
.video img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;}
.video .play{position:absolute;right:14px;bottom:14px;width:46px;height:46px;border-radius:50%;
  background:rgba(252,252,250,.94);box-shadow:0 2px 8px rgba(15,21,36,.25);}
.video .play::after{content:"";position:absolute;left:18px;top:14px;
  border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent var(--ink);}

/* =========================================================
   18. ДЕСКТОП
   Колонка лишається вузькою. Ширший рядок не читається:
   після ~75 знаків око губить початок наступного.
   Порожні поля обабіч — не втрата місця, а спокій.
   ========================================================= */
@media (min-width:760px){
  body{font-size:17.5px;}
  .col{max-width:712px;margin-left:auto;margin-right:auto;}

  .bar{max-width:712px;padding-top:30px;padding-bottom:26px;}
  .spacer{height:90px;}
  .menuicon{display:none;}
  body.menu .mnav{display:none;}
  .nav{display:flex;gap:26px;align-items:center;}
  .nav a{
    font-size:.92em;color:var(--ink-2);text-decoration:none;
    border-bottom:1px solid transparent;padding-bottom:2px;
  }
  .nav a:hover{border-bottom-color:var(--gold);color:var(--ink);}
  .lang-mob{display:none;}
  body.hide .bar{transform:none;}   /* на десктопі шапка не ховається */

  .grid{grid-template-columns:1fr 1fr;}

  /* шапка сторінки «Про мене»: портрет ліворуч, ім'я праворуч */
  .head{
    display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:end;
    padding-top:64px;padding-bottom:68px;
  }
  .portrait{height:380px;margin-bottom:0;}
  .head h1{font-size:3.1em;}
  .home-head{padding-top:64px;}
  .home-head .art{height:130px;margin:-34px 0 38px;}
  .home-head h1{font-size:2.45em;}
  .caption .sep{display:inline;}
  .caption .sep + span{display:inline;}

  /* «Про мене»: на широкому екрані більше повітря між блоками */
  .stories{padding-top:60px;}
  .stories p{margin-bottom:32px;}
  .translator{padding-top:62px;}
  .path{padding-top:72px;}
  .end{padding-top:72px;padding-bottom:84px;}

  /* намисто у дві колонки: назва ліворуч, текст праворуч — як хронологія */
  .bead{display:grid;grid-template-columns:200px 1fr;column-gap:34px;}
  .bead > h3{grid-column:1;grid-row:1 / span 6;font-size:1.45em;margin:0;}
  .bead > :not(h3){grid-column:2;}

  /* фото збоку від тексту «перекладача» */
  .translator .side{
    display:block;float:right;width:210px;height:auto;
    margin:4px 0 16px 34px;
  }

  h2{font-size:2.4em;}
  section.lead h2{font-size:2.9em;}

  section.lead.tools-lead{margin:26px auto 56px;max-width:660px;padding-bottom:40px;}
  section.tools-lead .art{height:190px;}
  /* калькулятор: на широкому екрані форма просторіша */
  form.calc{padding:30px 34px 26px;}
  section.calc{padding-top:190px;}
  section.calc .art{height:290px;}
  .fam .hero{padding:52px 34px 36px;}
  .fam .eclipse{width:92px;height:92px;}
  .fam .hero h2{font-size:2.7em;}
  .fam{margin:0;}
  .fam .body{padding:12px 48px 0;}
  .affirm{padding:10px 60px 240px;}
  .affirm::before{height:290px;background-position:center;background-size:cover;}
  .fam .affirm p{font-size:1.3em;}
  .calc .fields{gap:8px;}

  /* вікно месенджера стає карткою по центру */
  .sheet{
    left:50%;top:50%;bottom:auto;
    width:calc(100% - 40px);max-width:380px;
    transform:translate(-50%,-46%);
    opacity:0;pointer-events:none;
    padding:30px 26px;border:1px solid var(--hair);
  }
  .sheet.on{transform:translate(-50%,-50%);opacity:1;pointer-events:auto;}
  .sheet .grip{display:none;}

  /* календар затемнень: рядок як у таблиці — дані ліворуч, сарос праворуч */
  section.cal-intro{padding-top:190px;}
  section.cal-intro .art{height:290px;}
  .next-card{padding:28px 30px 30px;}
  .ev{grid-template-columns:16px 52px 112px 96px 1fr;column-gap:16px;padding:8px 0;}
  .ev .sg, .ev .deg{text-align:left;}
  .ev .s{grid-column:5;grid-row:1 / span 3;margin:0;align-self:start;}   /* на три ряди: довгий сарос не розсуває дату й час */
  /* хаб ретроградності: ширша колонка назв і всі місяці на графіку, картки планет у дві колонки */
  .yearmap .axis, .yearmap .lane{grid-template-columns:6.4em 1fr;}
  .yearmap .mon i.sm{display:block;}
  .cgrid{grid-template-columns:1fr 1fr;}
}

@media (min-width:1140px){
  body{font-size:18px;}
  .col{max-width:760px;}
  .bar{max-width:760px;}
  .grid{grid-template-columns:1fr 1fr 1fr;}
  /* у три колонки картки вузькі: назва в два рядки заходила на картину —
     картка вища, назва трохи менша */
  .card, .card .txt{min-height:320px;}
  .card h3{font-size:1.4em;}
  .cals .card .txt{padding:150px 18px 22px;}
  /* назви великі; «Ретроградні планети» може піти у два рядки (власниця, 19.10) */
  .cals .card h3{font-size:1.5em;}
  section.lead.tools-lead{max-width:712px;}
}

/* доступність: хто вимкнув анімації — той їх не бачить */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}

/* ---------------------------------------------------------
   19. СТОРІНКА 404 (content/uk/404.md)
   --------------------------------------------------------- */
.nf{padding-bottom:72px;}   /* кнопка «На головну» не лежить на лінії футера */
.nf p.star{margin:0 0 14px;}