/* ============================================================
   СОННИК - «Ніч над полем»
   Дизайн-система: сторінка = одна ніч. Угорі глибока ніч,
   унизу (футер) - світанок. Жодних карток-у-сітці, жодного
   Bootstrap: чорнильна ніч, блакить місяця, рожевий світанок,
   воскове золото зірок.

   Шрифти: Cormorant Garamond (заголовки, витончена антиква),
   Golos Text (текст), Caveat (рукописні приписки).
   ============================================================ */

/* ── Шрифти ────────────────────────────────────────────────── */
/* Cormorant Garamond - витончена дисплейна антиква (Christian Thalmann,
   Catharsis Fonts), заголовки: повітряна, високий контраст, граційна.
   На темному тлі беремо 500 (Medium) як базу заголовків - щоб тонкі
   штрихи не зникали; 700 - акцент/герой. Латиниця (цифри теж) + кирилиця. */
@font-face {
    font-family: 'Cormorant';
    src: url('/assets/fonts/Cormorant-500-lat.woff2') format('woff2');
    font-weight: 500;
    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: 'Cormorant';
    src: url('/assets/fonts/Cormorant-500-cyr.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Cormorant';
    src: url('/assets/fonts/Cormorant-700-lat.woff2') format('woff2');
    font-weight: 700;
    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: 'Cormorant';
    src: url('/assets/fonts/Cormorant-700-cyr.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Golos Text - гуманістичний гротеск, зроблений під кирилицю (основний
   текст): тепло, спокійно, легко читається великими абзацами.
   400/600/700, латиниця (цифри теж) + кирилиця окремими субсетами. */
@font-face {
    font-family: 'Golos';
    src: url('/assets/fonts/Golos-400-lat.woff2') format('woff2');
    font-weight: 400;
    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: 'Golos';
    src: url('/assets/fonts/Golos-400-cyr.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Golos';
    src: url('/assets/fonts/Golos-600-lat.woff2') format('woff2');
    font-weight: 600;
    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: 'Golos';
    src: url('/assets/fonts/Golos-600-cyr.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Golos';
    src: url('/assets/fonts/Golos-700-lat.woff2') format('woff2');
    font-weight: 700;
    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: 'Golos';
    src: url('/assets/fonts/Golos-700-cyr.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Caveat';
    src: url('/assets/fonts/Caveat-var-lat.woff2') format('woff2');
    font-weight: 400 700;
    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: 'Caveat';
    src: url('/assets/fonts/Caveat-var-cyr.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ── Токени ────────────────────────────────────────────────── */
:root {
    /* ніч */
    --ink-0: #0A0D1E;      /* найглибша ніч (небо вгорі)          */
    --ink-1: #10152E;      /* основне тло                          */
    --ink-2: #182046;      /* підняті поверхні, поля вводу         */
    --ink-3: #232C5C;      /* межі, лінії                          */

    /* світло */
    --moloko:   #F1EDE2;   /* теплий майже-білий - основний текст  */
    --text-2:   #D8DCEB;   /* описовий текст - світліший за meta   */
    --dim:      #A9B1D2;   /* meta, підписи, дрібне                */
    --blakyt:   #9FC0E7;   /* місячна блакить - другорядне, лінії  */
    --rozhevyi: #D9A7AE;   /* курний рожевий - лише світанок/ніжні акценти */
    --zoloto:   #E9C46A;   /* воскове золото - зорі, кнопки, дії   */

    --line: rgba(159, 192, 231, 0.16);

    /* фірмовий радіус «пелюстка» - асиметричний, як мазок пензля */
    --petal:    3px 16px 3px 16px;
    --petal-lg: 4px 30px 4px 30px;

    --font-display: 'Cormorant', 'Georgia', serif;
    --font-text:    'Golos', 'Segoe UI', system-ui, sans-serif;
    --font-hand:    'Caveat', cursive;

    /* Кеглі за ідеєю Чисел: два дисплейні розміри + рівний крок, скромний
       герой (макс 44px замість колишніх ~66). Дрібні тексти лишаються в rem. */
    --fs-hero: clamp(2.6rem, 5.5vw, 3.15rem);  /* герой  ~42 → 50px (Cormorant оптично дрібніший) */
    --fs-h1:   clamp(2.1rem, 4.4vw, 2.65rem);  /* H1     ~34 → 42px */
    --fs-h2:   clamp(1.7rem, 3vw, 2.1rem);     /* H2     ~27 → 34px */

    --wrap: 1140px;
    /* Висота шапки: логотип 1.55rem × 1.65 + 2×1.1rem відступів. Потрібна
       героєві, щоб дорахувати «перший екран» до низу вікна. */
    --header-h: 4.75rem;

    color-scheme: dark;
}

/* ── Основа ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-text);
    font-size: 1rem;                 /* 16px - база як у Числах */
    line-height: 1.65;
    color: var(--moloko);
    background:
        linear-gradient(180deg, var(--ink-0) 0%, var(--ink-1) 520px);
    background-color: var(--ink-1);
    overflow-x: hidden;
}

/* Зерно - ледь помітна плівка, знімає «пластик» із градієнтів */
body::after {
    content: "";
    position: fixed;
    inset: -50%;
    z-index: 40;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Канвас зоряного неба - за всім контентом */
#nightSky {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
/* main вище за підвал: інакше декор підвала (.dawn-hills) перекриває те,
   що виходить за низ контенту - зокрема дропдаун пошуку на коротких сторінках. */
body > header, body > footer { position: relative; z-index: 1; }
body > main { position: relative; z-index: 2; }

/* Рамка для декору секції: сама секція НЕ ставить overflow: hidden (інакше
   ріже те, що має право вийти за її межі - дропдаун автокомпліту пошуку),
   а декор кладеться в цю обгортку й ріжеться нею по межах секції. */
.decor-clip {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

::selection { background: rgba(217, 167, 174, 0.30); color: #fff; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;               /* Cormorant: 500 база (не тонко), 700 акцент */
    line-height: 1.2;
    letter-spacing: 0;              /* антиква - без розрядки */
    margin: 0 0 1rem;
    text-wrap: balance;
    font-synthesis: none;           /* реальні 400/700 - синтез не потрібен */
}

p { margin: 0 0 1rem; }

a {
    color: var(--blakyt);
    text-decoration: underline;
    text-decoration-color: rgba(159, 192, 231, 0.4);
    text-underline-offset: 0.22em;
    transition: color 0.16s ease, text-decoration-color 0.16s ease;
}
a:hover {
    color: var(--zoloto);
    text-decoration-style: wavy;
    text-decoration-color: rgba(233, 196, 106, 0.5);
}

:focus-visible {
    outline: 2px dashed var(--zoloto);
    outline-offset: 3px;
    border-radius: 2px;
}

img, svg { max-width: 100%; height: auto; }

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-thumb { background: var(--ink-3); border: 3px solid var(--ink-0); border-radius: 8px; }
::-webkit-scrollbar-track { background: var(--ink-0); }

.wrap {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4.5vw, 3rem);
}

.skip-link {
    position: absolute;
    left: 1rem; top: -4rem;
    z-index: 100;
    background: var(--ink-2);
    color: var(--moloko);
    padding: 0.5rem 1.1rem;
    border-radius: var(--petal);
    transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* ── Дрібна графіка й підписи ──────────────────────────────── */
.overline {
    font-family: var(--font-text);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--zoloto);
    margin-bottom: 1.4rem;
}

/* Рукописне - Caveat */
.hand {
    font-family: var(--font-hand);
    font-size: 1.35rem;
    line-height: 1.35;
    color: var(--blakyt);
    letter-spacing: 0.01em;
}

/* Заголовок секції з зіркою збоку */
.h-star {
    font-size: var(--fs-h2);
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
}
.h-star::before {
    content: "\2726";               /* ✦ */
    color: var(--zoloto);
    font-size: 0.62em;
    transform: translateY(-0.15em) rotate(-12deg);
    flex: none;
}

/* Стежка-хлібні крихти */
.star-trail {
    font-size: 0.85rem;
    color: var(--dim);
    margin-bottom: 1.1rem;
}
.star-trail a { color: var(--dim); text-decoration-color: transparent; }
.star-trail a:hover { color: var(--zoloto); }
.star-trail .sep {
    color: var(--zoloto);
    font-size: 0.7em;
    margin-inline: 0.55rem;
    opacity: 0.7;
}

/* Горизонт-розділювач: тиха зірка між тонкими лініями */
.horizon {
    border: 0;
    height: 22px;
    margin: 0 auto;
    max-width: min(560px, 72vw);
    position: relative;
    background:
        linear-gradient(90deg, transparent, var(--line))  left  center / calc(50% - 26px) 1px no-repeat,
        linear-gradient(270deg, transparent, var(--line)) right center / calc(50% - 26px) 1px no-repeat;
}
/* Той самий горизонт, але між однорідними записами (питання у FAQ, сни
   у щоденнику), а не між розділами сторінки. Вужчий і тісніший - щоб
   ієрархія читалася самою шириною: розділи розводить довгий горизонт,
   сусідні записи - короткий. */
.horizon-tight {
    max-width: min(420px, 62vw);
    margin-block: 0.55rem;
}
.horizon::after {
    content: "\2727";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    color: var(--zoloto);
    opacity: 0.8;
    font-size: 0.85rem;
    line-height: 1;
}

/* ── Кнопки: «мальована рамка» ─────────────────────────────────
   Два штрихи (::before + ::after) - у спокої розведені й трохи
   повернуті в різні боки, наче обведено пером; на ховері/фокусі
   сходяться в один рівний контур. Без сяйва, без насиченої заливки.
   Головна (.cta-solid) - золото + ледь-помітна тепла заливка;
   другорядна (.cta-ghost) - блакить, без заливки. */
.cta-solid, .cta-ghost {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    line-height: 1;
    text-decoration: none;
    padding: 0.82em 1.9em 0.9em;
    background: none;
    border: 0;
    color: var(--zoloto);
    cursor: pointer;
    font-synthesis: none;
    transition: color 0.18s ease, transform 0.12s ease;
}
.cta-solid { background: rgba(233, 196, 106, 0.07); border-radius: 13px; }
.cta-ghost { color: var(--blakyt); }
.cta-solid:hover, .cta-ghost:hover { text-decoration: none; }

.cta-solid::before, .cta-solid::after,
.cta-ghost::before, .cta-ghost::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1.5px solid currentColor;
    pointer-events: none;
    transition: transform 0.26s cubic-bezier(0.34, 1.2, 0.4, 1),
                opacity 0.22s ease, border-radius 0.26s ease;
}
/* спокій: перший штрих - угору-вліво, нерівні кути */
.cta-solid::before, .cta-ghost::before {
    border-radius: 15px 12px 16px 11px / 11px 16px 12px 15px;
    transform: translate(-3px, -2px) rotate(-0.9deg);
    opacity: 0.5;
}
/* спокій: другий штрих - униз-вправо, інші нерівні кути */
.cta-solid::after, .cta-ghost::after {
    border-radius: 12px 16px 11px 15px / 15px 11px 16px 12px;
    transform: translate(3px, 2px) rotate(0.8deg);
    opacity: 0.9;
}
/* ховер/фокус: обидва штрихи сходяться в один рівний контур */
.cta-solid:hover::before,  .cta-solid:hover::after,
.cta-ghost:hover::before,  .cta-ghost:hover::after,
.cta-solid:focus-visible::before,  .cta-solid:focus-visible::after,
.cta-ghost:focus-visible::before,  .cta-ghost:focus-visible::after {
    transform: none;
    border-radius: 13px;
    opacity: 1;
}
.cta-solid:active, .cta-ghost:active { transform: translateY(1px); }
.cta-solid:disabled, .cta-ghost:disabled { opacity: 0.5; cursor: wait; }

/* ── Поля вводу: «мальована рамка» з двома штрихами ────────────
   Як у кнопок: два штрихи на обгортці (.ink-field / .search-veil).
   У спокої зсунуті й повернуті - але в ІНШУ сторону, ніж кнопки
   (дзеркально). На фокусі сходяться в рівний контур. Саме поле -
   без власної рамки, лише тло. Без сяйва-glow. */
input[type="search"], input[type="date"], input[type="text"], textarea {
    font-family: var(--font-text);
    font-size: 1rem;
    color: var(--moloko);
    background: rgba(24, 32, 70, 0.66);
    border: 0;
    outline: 0;
    border-radius: 12px;
    padding: 0.72rem 1.15rem;
    width: 100%;
    position: relative;
    z-index: 0;
    transition: background 0.2s ease;
}
input:focus, textarea:focus { background: rgba(24, 32, 70, 0.82); }

/* обгортка з двома рукотворними штрихами */
.ink-field { display: block; }
.ink-field, .search-veil { position: relative; isolation: isolate; }
.ink-field::before, .ink-field::after,
.search-veil::before, .search-veil::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 1.5px solid rgba(159, 192, 231, 0.5);
    pointer-events: none;
    transition: transform 0.26s cubic-bezier(0.34, 1.2, 0.4, 1),
                opacity 0.22s ease, border-radius 0.26s ease, border-color 0.2s ease;
}
/* спокій: штрихи повернуті в ІНШУ сторону (дзеркально до кнопок) */
.ink-field::before, .search-veil::before {
    border-radius: 12px 15px 11px 16px / 16px 11px 15px 12px;
    transform: translate(3px, -2px) rotate(0.9deg);
    opacity: 0.5;
}
.ink-field::after, .search-veil::after {
    border-radius: 15px 11px 16px 12px / 12px 16px 11px 15px;
    transform: translate(-3px, 2px) rotate(-0.8deg);
    opacity: 0.9;
}
/* фокус: обидва штрихи сходяться в один рівний золотий контур */
.ink-field:focus-within::before,  .ink-field:focus-within::after,
.search-veil:focus-within::before, .search-veil:focus-within::after {
    transform: none;
    border-radius: 12px;
    opacity: 1;
    border-color: var(--zoloto);
}
/* поле вже дає свій контур (штрихи сходяться в золоту рамку) - глобальний
   пунктирний :focus-visible тут зайвий (двоївся б навколо поля), знімаємо */
.ink-field :focus-visible,
.search-veil :focus-visible { outline: none; }

/* невалідне поле - штрихи рожеві */
.ink-field:has(.is-invalid)::before,
.ink-field:has(.is-invalid)::after { border-color: var(--rozhevyi); }

/* ── Поле дати ДД.ММ.РРРР (як у Числах) ───────────────────────
   Замість нативного <input type=date>: маска в JS + хрестик очищення.
   Хрестик має бути ПОВЕРХ штрихів рамки (у них z-index: 1). */
.date-field input { padding-right: 2.6rem; }
.date-clear {
    display: none;              /* JS показує, коли в полі щось є */
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    font-size: 0.82rem;
    line-height: 1;
    color: var(--dim);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
}
.date-clear:hover, .date-clear:focus-visible {
    color: var(--moloko);
    background: rgba(159, 192, 231, 0.14);
}

/* Причина, чому дата не підходить: рожеві штрихи рамки самі по собі
   не пояснюють, що саме не так («у лютому 1990 було 28 днів»). */
.date-warn {
    display: none;
    margin-top: 0.35rem;
    font-family: var(--font-hand);
    font-size: 1.15rem;
    line-height: 1.2;
    color: var(--rozhevyi);
}

input::placeholder, textarea::placeholder {
    font-family: var(--font-hand);
    font-size: 1.2em;
    color: rgba(169, 177, 210, 0.75);
}
label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}
label .opt { font-weight: 400; color: var(--dim); font-size: 0.88em; }
.field-note {
    font-family: var(--font-hand);
    font-size: 1.16rem;
    color: var(--dim);
    margin-top: 0.3rem;
}

/* ── Пошук + автокомпліт ───────────────────────────────────── */
.search-veil { position: relative; max-width: 34rem; }
/* isolation на .search-veil замикає z-index:1050 дропдауна всередині поля,
   тож підказки лягали ПІД дальший вміст сторінки (літерна хвиля, список
   термінів - вони теж position: relative). Піднімаємо саме поле, поки в
   ньому фокус - у спокої шар не чіпаємо. */
.search-veil:focus-within { z-index: 30; }
.search-veil input {
    padding: 0.9rem 3.4rem 0.9rem 1.3rem;
    font-size: 1.06rem;
    background: rgba(16, 21, 46, 0.72);
    backdrop-filter: blur(4px);
}
.search-veil .search-star {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem; height: 2.4rem;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    color: var(--zoloto);
    cursor: pointer;
    transition: transform 0.25s ease;
}
.search-veil .search-star:hover { transform: translateY(-50%) rotate(45deg); }

/* Мікрофон замість зірочки (герой головної): та сама позиція, але обертати
   його не можна - перевернутий мікрофон читається як зламана іконка. */
.search-veil .search-mic { z-index: 2; }
.search-veil .search-mic:hover { transform: translateY(-50%) scale(1.1); }

.autocomplete-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    z-index: 1050;
    background: #131A3B;
    border: 1px solid var(--ink-3);
    border-radius: 3px 16px 16px 16px;
    box-shadow: 0 18px 50px rgba(4, 6, 18, 0.66);
    list-style: none;
    margin: 0;
    padding: 0.45rem 0 0.6rem;
    max-height: 330px;
    overflow-y: auto;
    display: none;
}
.autocomplete-list li a {
    display: block;
    padding: 0.5rem 1.25rem;
    color: var(--moloko);
    text-decoration: none;
}
.autocomplete-list li a::before {
    content: "\2726\00a0\00a0";
    color: var(--zoloto);
    font-size: 0.7em;
    opacity: 0;
    transition: opacity 0.12s;
}
.autocomplete-list li a:hover::before,
.autocomplete-list li.is-active a::before { opacity: 0.9; }
.autocomplete-list li a:hover,
.autocomplete-list li.is-active a { color: var(--zoloto); }
.autocomplete-list .syn-note {
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--dim);
}

/* ── Шапка ─────────────────────────────────────────────────── */
.night-header {
    position: relative;
    z-index: 30;
}
.night-header .wrap {
    position: relative;   /* якір для .auth-pop */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}
/* Помилка входу в шапці: окремий шар під меню, а не ще один пункт у flex-рядку -
   інакше довгий текст розсовує шапку. Селектор із .night-header, щоб перебити
   position/max-width базового .warn-note незалежно від порядку правил. */
.night-header .auth-pop {
    position: absolute;
    z-index: 60;          /* вище за розгорнуте мобільне меню (50) */
    top: calc(100% - 0.7rem);
    right: clamp(1.25rem, 4.5vw, 3rem);
    max-width: min(28rem, calc(100vw - 2.5rem));
    margin-top: 0;
    padding: 0.9rem 1.25rem 1.2rem;
    font-size: 0.92rem;
    background: rgba(217, 167, 174, 0.1);
    backdrop-filter: blur(6px);
}
.wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.55rem;
    color: var(--moloko);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    letter-spacing: 0.02em;
}
.wordmark:hover { color: var(--moloko); text-decoration: none; }
.wordmark svg { width: 1.35em; height: 1.35em; flex: none; }
.wordmark .crescent { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.wordmark:hover .crescent { transform: rotate(-14deg); }

.night-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2.1rem);
}
.night-nav a {
    font-size: 0.94rem;
    color: var(--dim);
    text-decoration: none;
    position: relative;
    padding-block: 0.3rem;
}
.night-nav a:hover { color: var(--moloko); }
.night-nav a.active { color: var(--moloko); }
.night-nav a.active::after {
    content: "";
    position: absolute;
    left: 50%; bottom: -2px;
    width: 26px; height: 7px;
    transform: translateX(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 7'%3E%3Cpath d='M1 4 Q 7 1, 13 4 T 25 3' stroke='%23E9C46A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}
.night-nav .nav-external {
    position: relative;
    isolation: isolate;
    color: var(--blakyt);
    border: 0;
    padding: 0.5em 1.15em 0.6em;
}
.night-nav .nav-external::before, .night-nav .nav-external::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1.5px solid currentColor;
    pointer-events: none;
    transition: transform 0.26s cubic-bezier(0.34, 1.2, 0.4, 1),
                opacity 0.22s ease, border-radius 0.26s ease;
}
.night-nav .nav-external::before {
    border-radius: 15px 12px 16px 11px / 11px 16px 12px 15px;
    transform: translate(-3px, -2px) rotate(-0.9deg);
    opacity: 0.5;
}
.night-nav .nav-external::after {
    border-radius: 12px 16px 11px 15px / 15px 11px 16px 12px;
    transform: translate(3px, 2px) rotate(0.8deg);
    opacity: 0.9;
}
.night-nav .nav-external:hover::before, .night-nav .nav-external:hover::after,
.night-nav .nav-external:focus-visible::before, .night-nav .nav-external:focus-visible::after {
    transform: none;
    border-radius: 13px;
    opacity: 1;
}
.night-nav .nav-external:hover { color: var(--moloko); }
.night-nav .ext-arrow { font-size: 0.8em; }

/* Кнопка меню - ті самі два мальовані штрихи, що в кнопок і «Чисел»:
   на мобільному це єдиний елемент керування в шапці, і рівна рамка
   виглядала серед мальованих контурів як чужий елемент інтерфейсу.
   Штрихи блакитні при молочному тексті - два білі контури поруч із
   логотипом кричали б голосніше за сам логотип. */
.menu-btn {
    display: none;
    position: relative;
    isolation: isolate;
    background: none;
    border: 0;
    color: var(--moloko);
    font-family: var(--font-text);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.5rem 1.05rem;
    cursor: pointer;
}
.menu-btn::before, .menu-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1.5px solid var(--blakyt);
    pointer-events: none;
    transition: transform 0.26s cubic-bezier(0.34, 1.2, 0.4, 1),
                opacity 0.22s ease, border-radius 0.26s ease;
}
.menu-btn::before {
    border-radius: 15px 12px 16px 11px / 11px 16px 12px 15px;
    transform: translate(-3px, -2px) rotate(-0.9deg);
    opacity: 0.45;
}
.menu-btn::after {
    border-radius: 12px 16px 11px 15px / 15px 11px 16px 12px;
    transform: translate(3px, 2px) rotate(0.8deg);
    opacity: 0.8;
}
/* Меню відкрите - штрихи сходяться в один рівний контур. Той самий жест,
   що на ховері в решти кнопок; на дотику ховера немає, тож нехай його
   роль грає стан «відкрито». */
.menu-btn[aria-expanded="true"]::before,
.menu-btn[aria-expanded="true"]::after {
    transform: none;
    border-radius: 13px;
    opacity: 1;
}

@media (max-width: 900px) {
    .menu-btn { display: inline-block; position: relative; z-index: 60; }
    .night-nav {
        display: none;
    }
    body[data-nav-open] { overflow: hidden; }
    body[data-nav-open] .night-nav {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 50;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 1.4rem;
        padding: 18vh clamp(2rem, 10vw, 5rem);
        background:
            radial-gradient(680px 420px at 85% 8%, rgba(35, 44, 92, 0.9), transparent 65%),
            linear-gradient(180deg, rgba(10, 13, 30, 0.97), rgba(16, 21, 46, 0.97));
        backdrop-filter: blur(6px);
    }
    body[data-nav-open] .night-nav a {
        font-family: var(--font-display);
        font-size: clamp(1.7rem, 6.5vw, 2.4rem);
        color: var(--moloko);
    }
    body[data-nav-open] .night-nav a.active { color: var(--zoloto); }
    /* Падінг тут ОБОВ'ЯЗКОВИЙ: штрихи малюються по inset: 0, тож без нього
       обидві рамки сідають просто на літери - при мобільному кеглі це
       читалося як збій рендера, а не як обведення. Від'ємний margin рівно
       на горизонтальний падінг повертає самі літери в один стовпчик
       з рештою пунктів меню - вирівнюємо текст, а не рамку. */
    body[data-nav-open] .night-nav .nav-external {
        color: var(--blakyt);
        font-size: clamp(1.3rem, 5vw, 1.8rem);
        padding: 0.36em 0.8em 0.42em;
        margin-top: 1.1rem;
        margin-left: -0.8em;
    }
}

/* ── Герой «Поле снів» ─────────────────────────────────────── */
.dreamfield {
    position: relative;
    overflow: hidden;
    /* Текст стоїть у смузі неба між шапкою і пагорбами. Міряти просвіт знизу
       треба не по краю svg-пагорбів, а по видимому гребеню - він на ~48px
       нижче за верх тієї смуги. Через це блок із формально «рівними»
       відступами читався притиснутим догори: 60px згори проти 110px до
       гребеня. Тож верхній відступ побільшав рівно на стільки, на скільки
       поменшав нижній - висота героя та сама, а блок сів нижче. */
    padding-top: clamp(3.4rem, 10.5vh, 6.5rem);
    /* Місце під пагорби. Стала, а не частка ширини: пагорби тут заввишки
       фіксовані 190px, тож частка робила просвіт до гребеня то 82px на
       широкому екрані, то 47px на вузькому ноутбуці - на око блок «падав»
       на силует. Тепер 224 - 190 + 48 = 82px просвіту всюди однаково. */
    padding-bottom: 224px;
}
.dreamfield-text {
    position: relative;
    z-index: 5;
    max-width: 36rem;
}
.dreamfield h1 {
    font-size: var(--fs-hero);
    font-weight: 700;
    margin-bottom: 1.2rem;
}
.dreamfield h1 em {
    font-style: normal;
    color: var(--rozhevyi);
}
.dream-lead {
    font-size: 1.08rem;
    color: var(--text-2);
    max-width: 30rem;
    margin-bottom: 2rem;
}
.dream-lead strong { color: var(--moloko); font-weight: 600; }

/* Тонкий рядок під пошуком. Цифра словника пішла з ліда (він став на три
   короткі речення), але без неї на першому екрані нема доказу, що за
   тлумачем стоїть книга, а не генератор - тож вона живе тут, дрібним. */
.dream-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.55rem;
    margin-top: 0.85rem;
    max-width: 34rem;             /* по ширині поля пошуку */
    font-size: 0.82rem;
    color: var(--dim);
}
.dream-facts > span  { white-space: nowrap; }   /* перенос - лише між фактами */
.dream-facts strong  { color: var(--zoloto); font-weight: 400; }
/* крапка-роздільник - лише поки факти в одному рядку; на вузькому екрані
   вони стають двома рядками, і роздільник там читався б як маркер списку */
.dream-facts > span + span::before {
    content: "·";
    margin-right: 0.55rem;
    opacity: 0.45;
}
@media (max-width: 560px) {
    .dream-facts > span + span::before { content: none; }
}

.hand-hint {
    margin-top: 0.9rem;
    transform: rotate(-1.6deg);
    transform-origin: left;
}
.hand-hint a { color: var(--blakyt); text-decoration-style: dotted; }
.hand-hint a:hover { color: var(--zoloto); }
.hand-hint .hint-arrow {
    display: inline-block;
    transform: translateY(0.25em) rotate(8deg);
    margin-right: 0.2rem;
    color: var(--zoloto);
}

.dreamfield-cta { margin-top: 2.2rem; }

/* Місяць */
.moon-wrap {
    position: absolute;
    z-index: 2;
    top: clamp(8px, 1vw, 20px);     /* трохи нижче шапки - весь диск у секції, не зрізається */
    right: clamp(-90px, -4vw, 40px);
    width: clamp(260px, 34vw, 460px);
    aspect-ratio: 1;
    pointer-events: none;
    filter: drop-shadow(0 0 60px rgba(233, 196, 106, 0.18));
}
.moon-wrap img { width: 100%; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) {
    .moon-wrap { animation: moon-drift 14s ease-in-out infinite alternate; }
    @keyframes moon-drift {
        from { transform: translateY(0); }
        to   { transform: translateY(14px); }
    }
}

/* Пагорби: фіксована висота - вертикаль стабільна на всіх екранах,
   розтягується лише горизонталь */
.hills {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    pointer-events: none;
}
.hills-far  { z-index: 3; height: 190px; }
.hills-near { z-index: 4; height: 150px; }
.hero-decor {
    position: absolute;
    z-index: 5;
    pointer-events: none;
}
.decor-house { left: 14%; bottom: 64px; width: 30px; height: 42px; }
.decor-tree  { left: 79%; bottom: 74px; width: 52px; height: 60px; }
@media (max-width: 720px) {
    .hills-far  { height: 120px; }
    .hills-near { height: 96px; }
    .decor-house { bottom: 40px; left: 10%; }
    .decor-tree  { display: none; }
    /* Перший екран - на висоту вікна: пагорби з хаткою мають потрапити у
       перший погляд, а текст - стати в смугу неба ПІД місяцем, а не лягти
       на диск. Три числа тримають цю розкладку:
       - padding-top   - «стеля»: верх диска + сам диск + просвіт. Текст у цю
                         зону не заходить ніколи, хоч би яким було вікно;
       - padding-bottom - «підлога»: не вся смуга svg-пагорбів (120px), а до
                         видимого гребеня - верхні ~40px тієї смуги порожні;
       - min-height    - висота вікна, але не менше, ніж треба самому вмісту.
       Саме останнє рятує низькі екрани (SE): там краще трохи прокрутити до
       пагорбів, ніж стискати диск і заганяти на нього заголовок.
       svh, а не vh: інакше адресний рядок мобільного браузера з'їдає низ. */
    .dreamfield {
        --moon-d: 221px;              /* диск: «мінус 15%» від настільного */
        display: flex;
        flex-direction: column;
        justify-content: center;      /* вільне небо ділиться порівну: над текстом і під ним */
        min-height: calc(100vh - var(--header-h));
        min-height: max(calc(100svh - var(--header-h)), 736px);
        padding-top: calc(8px + var(--moon-d) + 12px);
        padding-bottom: 104px;
    }
    /* Місяць лишається на своєму місці - той самий верх і той самий правий
       край, лише менший: у повну величину диск займає всю смугу неба і
       тексту нема куди сісти. */
    .moon-wrap { width: var(--moon-d); }
    /* Щільніший ритм: кожні зекономлені пікселі йдуть у просвіт між
       місяцем і заголовком. Лід тут у базовому кеглі - на вузькому екрані
       збільшений давав четвертий рядок, а четвертий рядок з'їдав саме той
       просвіт. */
    .dreamfield h1  { margin-bottom: 0.9rem; }
    .dream-lead     { font-size: 1rem; line-height: 1.55; margin-bottom: 1.35rem; }
    .dreamfield-cta { margin-top: 1.5rem; }
    /* Поле пошуку осіло разом із текстом, а секція ріже все, що вилазить за
       її межі (щоб місяць не давав горизонтальної прокрутки). Тож підказки
       рівно по тому, що лишилось під полем усередині героя - інакше список
       обрізало б посередині. Свій overflow-y у нього є, елементи не зникають. */
    .dreamfield .autocomplete-list { max-height: 200px; }
}

/* Секція одразу за пагорбами - «долина»: плавно повертаємось
   від кольору силуету до тла сторінки */
.after-hills {
    background: linear-gradient(180deg, #0A0D1E 0%, var(--ink-1) 240px);
    margin-top: 0;
}

/* Світлячки-терміни на пагорбах */
.fireflies {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}
.firefly {
    position: absolute;
    pointer-events: auto;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--blakyt);
    font-size: 0.92rem;
}
.firefly i {
    flex: none;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--zoloto);
    box-shadow: 0 0 10px 3px rgba(233, 196, 106, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
    .firefly i { animation: firefly-breathe 3.4s ease-in-out infinite; }
    .firefly:nth-child(2) i { animation-delay: -1.2s; }
    .firefly:nth-child(3) i { animation-delay: -2.3s; }
    @keyframes firefly-breathe {
        0%, 100% { box-shadow: 0 0 8px 2px rgba(233, 196, 106, 0.35); }
        50%      { box-shadow: 0 0 14px 5px rgba(233, 196, 106, 0.6); }
    }
}
.firefly span {
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    background: rgba(10, 13, 30, 0.85);
    padding: 0.15rem 0.6rem;
    border-radius: var(--petal);
    white-space: nowrap;
}
.firefly:hover span, .firefly:focus-visible span { opacity: 1; transform: none; }
/* на дотикових екранах підписи видно одразу */
@media (hover: none) { .firefly span { opacity: 0.92; transform: none; } }
@media (max-width: 720px) { .fireflies { display: none; } }

/* ── Словникова стрічка абетки ─────────────────────────────────
   Літери по базовій лінії, як у старих словниках; розмір - від
   кількості статей, поруч дрібний надрядковий лічильник. */
.letters-path { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4.5rem); }
.letter-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: clamp(1rem, 2.4vw, 1.9rem);
    row-gap: 1.1rem;
    padding-block: 0.9rem 0.3rem;
    max-width: 62rem;
}
.letter-strip a {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: calc(1.3rem * var(--w, 1));
    line-height: 1;
    color: var(--moloko);
    text-decoration: none;
    position: relative;
    transition: color 0.15s ease, text-shadow 0.15s ease;
}
.letter-strip sup {
    font-family: var(--font-text);
    font-size: 0.66rem;             /* не масштабується разом із літерою */
    font-weight: 500;
    color: var(--blakyt);
    opacity: 0.78;
    margin-left: 2px;
    letter-spacing: 0.03em;
}
.letter-strip a:hover, .letter-strip a.lit {
    color: var(--zoloto);
    text-shadow: 0 0 16px rgba(233, 196, 106, 0.45);
}
.letter-strip a.lit::after {        /* хвилясте підкреслення активної */
    content: "";
    position: absolute;
    left: 0; right: 0.5em;
    bottom: -9px;
    height: 7px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 7' preserveAspectRatio='none'%3E%3Cpath d='M1 4 Q 7 1, 13 4 T 25 3' stroke='%23E9C46A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
/* літери без снів - тихо присутні, але не клікаються */
.letter-strip .empty {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.06rem;
    line-height: 1;
    color: var(--dim);
    opacity: 0.32;
    cursor: default;
    user-select: none;
}

/* ── Кроки: місяць росте ───────────────────────────────────── */
.moon-steps { padding-block: clamp(3rem, 6vw, 5rem); }
/* сцена: тримає нитку-SVG поверх/під кроками */
.steps-stage { position: relative; }
.dream-thread {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;                  /* під місяцями (z-index:2) */
}
.dream-thread__path {
    fill: none;
    stroke: var(--blakyt);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 2 9;       /* пунктир-«нитка сну» */
    opacity: 0.5;
}
/* зірка-якір: нитка тягнеться від зірки на нічному полі */
.thread-star {
    fill: var(--zoloto);
    filter: drop-shadow(0 0 3px rgba(233, 196, 106, 0.6));
}
@media (prefers-reduced-motion: no-preference) {
    .thread-star {
        transform-box: fill-box;
        transform-origin: center;
        animation: thread-twinkle 4s ease-in-out infinite;
    }
    @keyframes thread-twinkle {
        0%, 100% { transform: scale(0.9) rotate(0deg);   opacity: 0.72; }
        50%      { transform: scale(1.12) rotate(22deg); opacity: 1; }
    }
}
.steps {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    position: relative;
}
.steps::before {                 /* звивиста пунктирна нитка сну (fallback без JS) */
    content: "";
    position: absolute;
    top: 30px; bottom: 30px;
    left: 31px;
    width: 2px;
    background-image: linear-gradient(180deg, var(--blakyt) 42%, transparent 42%);
    background-size: 2px 11px;
    opacity: 0.38;
}
/* коли нитку малює JS - ховаємо CSS-лінію */
.steps.thread-live::before { display: none; }
.steps li {
    position: relative;
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
    padding-bottom: 2.6rem;
    max-width: 34rem;
}
.steps li:last-child { padding-bottom: 0; }
.step-moon {
    flex: none;
    width: 64px; height: 64px;
    position: relative;
    z-index: 2;
}
.steps h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.steps p { color: var(--text-2); margin: 0; }

/* дотик нитки сну: місяць розгоряється німбом, підпис кроку оживає.
   .moon-touched - легкий проліт; .moon-dwell - курсор спинився (повна) */
.step-moon { transition: transform .6s cubic-bezier(.25, .7, .3, 1), filter .6s ease; transform-origin: center; }
.steps h3, .steps p { transition: color .6s ease; }
.moon-touched .step-moon { transform: scale(1.05); filter: drop-shadow(0 0 5px rgba(233, 196, 106, 0.45)); }
.moon-touched h3 { color: #F4D48A; }
.moon-dwell .step-moon { transform: scale(1.09); filter: drop-shadow(0 0 11px rgba(233, 196, 106, 0.85)); }
.moon-dwell h3 { color: var(--zoloto); }
.moon-dwell p { color: var(--moloko); }

/* сходинки: кожен крок трохи правіше - шлях углиб ночі */
@media (min-width: 720px) {
    .steps li:nth-child(2) { margin-left: 14%; }
    .steps li:nth-child(3) { margin-left: 28%; }
    .steps::before {
        left: 31px;
        transform: skewX(-16deg);
        transform-origin: top;
    }
}

/* ── Терміни «виринають зі снів» ───────────────────────────────
   Буквально виринають: із глибини, розмиті → спливають, різкішають
   і лишаються тихо погойдуватись на поверхні. */
/* ── «Місяць цієї ночі» ────────────────────────────────────────
   Єдине місце головної, де сторінка відповідає на дотик: диск
   тягнуть крізь лунацію, тінь перетікає, підписи міняються.
   Стоїть перед довгим текстом навмисне - як перепочинок перед ним. */
.moon-tonight { padding-block: clamp(2.8rem, 6vw, 4.6rem); }
.moon-lead {
    max-width: 34rem;
    margin-top: 0.9rem;
    color: var(--text-2);
}
.moon-dial {
    display: grid;
    justify-items: center;
    gap: 1.4rem 2.6rem;
    margin-top: 2rem;
}
/* Диск */
.moon-dial__disc {
    position: relative;
    width: min(56vw, 232px);
    aspect-ratio: 1;
    cursor: grab;
    /* по вертикалі сторінка гортається як завжди, горизонталь - наша */
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    filter: drop-shadow(0 0 46px rgba(233, 196, 106, 0.20));
}
.moon-dial.is-dragging .moon-dial__disc { cursor: grabbing; }
.moon-dial__disc img,
.moon-dial__plain {
    display: block;
    width: 100%; height: 100%;
    border-radius: 50%;
    -webkit-user-drag: none;
    pointer-events: none;
}
.moon-dial__plain { background: radial-gradient(circle at 38% 34%, #F6EDD3, #EBD9A8 55%, #D9B96F); }
/* Тінь: з'являється лише коли скрипт ожив - без нього диск лишається
   просто повним місяцем, а не застиглим молодиком проти власного підпису. */
.moon-dial__shadow {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.moon-dial.is-live .moon-dial__shadow { opacity: 1; }
.moon-dial__shadow path {
    fill: var(--ink-1);
    fill-opacity: 0.93;      /* лишаємо натяк на попелясте світло */
}
/* Підписи */
.moon-dial__read { text-align: center; }
.moon-dial__when {
    margin: 0;
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    color: var(--dim);
}
.moon-dial__phase {
    margin: 0.25rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 5vw, 2.1rem);
    line-height: 1.2;
    color: var(--zoloto);
}
.moon-dial__hint {
    margin: 0.35rem 0 0;
    max-width: 24rem;
    color: var(--text-2);
}
.moon-dial__lunar {
    margin: 0.5rem 0 0;
    font-size: 0.86rem;
    color: var(--dim);
}
/* Повзунок - місячна стежка. Він тут не лише для миші: тягнення пальцем
   клавіатурі недоступне, а range дає стрілки й читалку задарма. */
.moon-dial__range {
    width: min(100%, 30rem);
    /* Висота - під палець, а не під стежку: сама стежка 2px, і без цього
       поле лишалось би двопіксельною ціллю для дотику. */
    height: 26px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    /* Ніякого синього під пальцем: ні системного відблиску на тап,
       ні виділення підписів, коли тягнеш повзунок повз них. */
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
}
/* Стан «взяли повзунок» доводиться описувати окремо: загальне правило полів
   (input:focus) заливає бокс кольором --ink-2, і на стежці це читалось як
   синя плашка на всю висоту - вона й лізла в очі при тягненні. Специфічність
   там вища за один клас, тож перебиваємо станом на стан.
   Обвідку знімаємо і з простого :focus - у Firefox та старих Chrome клік
   мишею малював тут системну синю рамку. Видимість для клавіатури не
   втрачаємо: її тримає золоте кільце на повзунку нижче. */
.moon-dial__range:focus,
.moon-dial__range:focus-visible {
    background: transparent;
    outline: none;
}
/* Стежка тепла наскрізь: сині кінці (--ink-3) читались як чужа
   системна смуга під золотим повзунком. */
.moon-dial__range::-webkit-slider-runnable-track {
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(233, 196, 106, 0.18), rgba(233, 196, 106, 0.5), rgba(233, 196, 106, 0.18));
}
.moon-dial__range::-moz-range-track {
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(233, 196, 106, 0.18), rgba(233, 196, 106, 0.5), rgba(233, 196, 106, 0.18));
}
.moon-dial__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--zoloto);
    box-shadow: 0 0 10px 3px rgba(233, 196, 106, 0.45);
    cursor: pointer;
}
.moon-dial__range::-moz-range-thumb {
    width: 18px; height: 18px;
    border: 0;
    border-radius: 50%;
    background: var(--zoloto);
    box-shadow: 0 0 10px 3px rgba(233, 196, 106, 0.45);
    cursor: pointer;
}
/* Обвідка фокуса теж золота, а не блакитна: клавіатурі видно, а на око
   це той самий місяць, а не системний елемент керування. */
.moon-dial__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(233, 196, 106, 0.45); }
.moon-dial__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(233, 196, 106, 0.45); }
/* Низ */
.moon-dial__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 1.4rem;
    margin: 0;
    font-size: 0.95rem;
}
.moon-dial__back {
    padding: 0;
    border: 0;
    background: none;
    color: var(--blakyt);
    font: inherit;
    text-decoration: none;      /* жодних підкреслювань - лише колір */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.moon-dial__back:hover,
.moon-dial__back:focus-visible { color: var(--zoloto); text-decoration: none; }
.moon-dial__cal { color: var(--blakyt); }
.moon-dial__cal:hover { color: var(--zoloto); }
/* На широкому екрані диск і підписи стоять поруч: одне під одним
   лишало б півекрана порожнім, а диск відлітав би від власного підпису. */
@media (min-width: 720px) {
    .moon-dial {
        grid-template-columns: auto minmax(0, 26rem);
        justify-items: start;
        align-items: center;
        /* по лівому краю, як заголовок і лід: центрований диск під
           лівим заголовком читався б як чужий блок */
        justify-content: start;
    }
    .moon-dial__disc { grid-row: span 3; width: 260px; }
    .moon-dial__read { text-align: left; }
    .moon-dial__range { width: 100%; }
    .moon-dial__foot { justify-content: flex-start; }
}

/* ── Текст про сонник + питання ────────────────────────────────
   Нижній поверх головної: те, що читають рідко, але без чого
   сторінка порожня - і для людини, і для пошуковика. */
.about-dreams { padding-block: clamp(2.6rem, 5vw, 4rem); }
.prose-cols {
    margin-top: 1.6rem;
    color: var(--text-2);
}
.prose-cols p { margin: 0 0 1.1rem; }
.prose-cols strong { color: var(--moloko); font-weight: 600; }
.prose-cols a { color: var(--blakyt); }
.prose-cols a:hover { color: var(--zoloto); }
/* На широкому екрані текст іде у дві колонки: в один стовпчик він лишав
   півсторінки порожньою, а розтягнутий на всю ширину читався б погано -
   рядок під 1100px око губить. */
@media (min-width: 900px) {
    .prose-cols { columns: 2; column-gap: 3.4rem; }
    .prose-cols p { break-inside: avoid; }
    .prose-cols p:last-child { margin-bottom: 0; }
}
/* Кнопка під текстом: у двоколонковому наборі вона має стояти під
   обома колонками, а не тягнутися за останнім абзацом - тому окремим
   блоком поза .prose-cols. */
.about-cta { margin: 2.2rem 0 0; }

/* ── Акордеон питань ───────────────────────────────────────────
   Рядок на всю ширину - тоді порожнеча праворуч читається як
   задумана лінія, а не як обірваний абзац. */
.faq-dreams { padding-block: clamp(2.2rem, 4.5vw, 3.4rem); }
.faq-list { margin-top: 1.8rem; }
.faq-item > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 0.2rem;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.2vw, 1.35rem);
    color: var(--text-2);
    transition: color 0.2s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover,
.faq-item[open] > summary { color: var(--moloko); }
.faq-item > summary:focus-visible { outline: 1px dotted var(--zoloto); outline-offset: 4px; }

/* місяць: чверть → повня */
.faq-moon { flex: none; width: 26px; height: 26px; }
.faq-moon__wax  { opacity: 0.85; }
.faq-moon__full { opacity: 0; transform: scale(0.82); transform-origin: 32px 32px; }
.faq-moon__wax, .faq-moon__full { transition: opacity 0.32s ease, transform 0.32s ease; }
.faq-item[open] .faq-moon__wax  { opacity: 0; }
.faq-item[open] .faq-moon__full { opacity: 0.92; transform: none; }

.faq-a {
    padding: 0 0 1.35rem 3.6rem;      /* під текст питання, повз місяць */
    max-width: 52rem;
    color: var(--text-2);
}
.faq-a p { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
    .faq-item[open] .faq-a {
        animation: faq-reveal 0.34s cubic-bezier(0.18, 0.82, 0.24, 1.02) both;
    }
    @keyframes faq-reveal {
        from { opacity: 0; transform: translateY(-7px); }
    }
}
@media (max-width: 560px) {
    .faq-a { padding-left: 0; }
}

/* ── Найчастіші сни ────────────────────────────────────────────
   Постійні посилання на найзапитуваніші символи. Свідомо стримані:
   поруч із «виринаючими» термінами внизу вони мають читатися як
   покажчик, а не як друга вітрина. */
.popular-dreams { padding-block: clamp(2.4rem, 5vw, 3.6rem); }
.chips-lead {
    margin: 0.9rem 0 0;
    max-width: 38rem;
    color: var(--text-2);
    font-size: 0.98rem;
}
.dream-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin: 1.7rem 0 0;
    padding: 0;
}
/* Фішки зроблені як зменшені .cta-ghost: два штрихи, розведені в різні
   боки, що на наведенні сходяться в рівний контур. Той самий жест, що
   в кнопок і полів вводу, лише тихішим голосом - тут їх три десятки
   поспіль, і повна гучність кнопки перетворила б розділ на строкатість. */
.dream-chips a {
    position: relative;
    isolation: isolate;
    display: inline-block;
    padding: 0.64em 1.35em 0.7em;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--blakyt);
    text-decoration: none;
    transition: color 0.18s ease, transform 0.12s ease;
}
.dream-chips a::before,
.dream-chips a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1.2px solid currentColor;
    pointer-events: none;
    transition: transform 0.26s cubic-bezier(0.34, 1.2, 0.4, 1),
                opacity 0.22s ease, border-radius 0.26s ease;
}
.dream-chips a::before {
    border-radius: 13px 10px 14px 9px / 9px 14px 10px 13px;
    transform: translate(-2px, -1.5px) rotate(-0.9deg);
    opacity: 0.4;
}
.dream-chips a::after {
    border-radius: 10px 14px 9px 13px / 13px 9px 14px 10px;
    transform: translate(2px, 1.5px) rotate(0.8deg);
    opacity: 0.7;
}
.dream-chips a:hover { color: var(--zoloto); }
.dream-chips a:hover::before,   .dream-chips a:hover::after,
.dream-chips a:focus-visible::before, .dream-chips a:focus-visible::after {
    transform: none;
    border-radius: 11px;
    opacity: 1;
}
.dream-chips a:active { transform: translateY(1px); }

/* ── Результати пошуку з /?q= ──────────────────────────────────
   Без анімації «виринання»: сюди людина приходить по відповідь,
   а не милуватися - список має бути на місці одразу. */
.search-answer { padding-block: clamp(2.2rem, 4.5vw, 3.4rem); }
.found-list {
    list-style: none;
    display: grid;
    gap: 0.8rem;
    margin: 1.7rem 0 0;
    padding: 0;
}
.found-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
}
.found-list a {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.4vw, 1.55rem);
    color: var(--moloko);
    text-decoration: none;
}
.found-list a::before {
    content: "\2726\00a0";
    color: var(--zoloto);
    font-size: 0.55em;
    vertical-align: 0.5em;
    opacity: 0.75;
}
.found-list a:hover { color: var(--zoloto); }
.found-syn { font-size: 0.88rem; color: var(--dim); }
.search-empty {
    margin: 1.4rem 0 0;
    max-width: 38rem;
    color: var(--text-2);
}
.search-empty a { color: var(--blakyt); }
.search-empty a:hover { color: var(--zoloto); }

.surface-terms { padding-block: clamp(3rem, 6vw, 5rem); }
.dream-drift {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
}
.dream-drift li {
    margin-bottom: 1.55rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.1rem;
}
/* до виринання ховаємо тільки з JS (html.js) - без JS все видно */
html.js .dream-drift li { opacity: 0; }
html.js .dream-drift li.surfaced {
    animation: surface 1.25s cubic-bezier(0.18, 0.82, 0.24, 1.02) both;
    animation-delay: calc(var(--si, 0) * 0.16s);
}
@keyframes surface {
    0%   { opacity: 0; transform: translateY(42px) scale(0.965); filter: blur(12px); }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: no-preference) {
    /* погойдування на поверхні - у кожного свій період і фаза */
    .dream-drift li a {
        display: inline-block;
        animation: drift-bob 7.2s ease-in-out infinite alternate;
    }
    .dream-drift li:nth-child(2n) a { animation-duration: 8.8s; animation-delay: -2.6s; }
    .dream-drift li:nth-child(3n) a { animation-duration: 9.6s; animation-delay: -4.4s; }
    .dream-drift li:nth-child(5n) a { animation-duration: 6.4s; animation-delay: -1.3s; }
    @keyframes drift-bob {
        from { transform: translateY(2.6px) rotate(-0.2deg); }
        to   { transform: translateY(-2.6px) rotate(0.25deg); }
    }
    /* зірочка перед терміном займається наприкінці виринання */
    html.js .dream-drift li a::before { opacity: 0; }
    html.js .dream-drift li.surfaced a::before {
        animation: star-wake 0.6s ease calc(var(--si, 0) * 0.16s + 0.75s) both;
    }
    @keyframes star-wake {
        from { opacity: 0; }
        60%  { opacity: 1; text-shadow: 0 0 14px rgba(233, 196, 106, 0.9); }
        to   { opacity: 0.75; text-shadow: 0 0 6px rgba(233, 196, 106, 0.4); }
    }
}
.dream-drift li:nth-child(6n+2) { margin-left: 7%; }
.dream-drift li:nth-child(6n+3) { margin-left: 15%; }
.dream-drift li:nth-child(6n+4) { margin-left: 4%; }
.dream-drift li:nth-child(6n+5) { margin-left: 21%; }
.dream-drift li:nth-child(6n)   { margin-left: 11%; }
.dream-drift a {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 400;
    font-size: clamp(1.45rem, 3vw, 1.9rem);
    color: var(--moloko);
    text-decoration: none;
    position: relative;
}
.dream-drift a::before {
    content: "\2726\00a0";
    color: var(--zoloto);
    font-size: 0.55em;
    vertical-align: 0.5em;
    opacity: 0.75;
}
.dream-drift a:hover { color: var(--zoloto); }
.drift-teaser {
    font-size: 0.95rem;
    color: var(--text-2);
    max-width: 34rem;
}
@media (max-width: 720px) {
    .dream-drift li { margin-left: 0 !important; }
}

/* ── Смуга «Наснилося число?» ──────────────────────────────── */
.falling-band {
    position: relative;
    margin-block: clamp(3rem, 7vw, 6rem);
    padding-block: clamp(2.8rem, 5vw, 4rem);
    background: linear-gradient(96deg, rgba(24, 32, 70, 0.0) 0%, rgba(24, 32, 70, 0.85) 18%, rgba(35, 44, 92, 0.85) 82%, rgba(24, 32, 70, 0.0) 100%);
    overflow: hidden;
}
.falling-band .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 3rem;
}
.falling-band h2 { font-size: var(--fs-h2); margin: 0; }
.falling-band p { color: var(--text-2); margin: 0; max-width: 34rem; }
.falling-band .band-text { flex: 1 1 26rem; }
.band-star-svg {
    position: absolute;
    top: 8%;
    right: 6%;
    width: 190px;
    opacity: 0.85;
    pointer-events: none;
}
/* На вузькому екрані зірка лишається в кадрі цілком: від'ємний відступ
   виносив її голову за правий край, а секція ріже свій вміст - виходило,
   що зірка вперлась у край екрана й обрубалась разом із сяйвом. */
@media (max-width: 720px) { .band-star-svg { width: 120px; right: 8%; } }

/* ── Коронна зона сторінки (замість hero на внутрішніх) ────── */
/* Секція НЕ ріже свій вміст: у /slovnyk тут живе пошук, і дропдаун
   автокомпліту має право виходити за нижню межу коронної зони.
   Велику декоративну літеру ріже власна обгортка .decor-clip. */
.page-crown {
    position: relative;
    padding-block: clamp(2.5rem, 6vh, 4.5rem) clamp(2rem, 5vh, 3.5rem);
}
/* Літера міряється від власної зони, а не лише від вікна (див. font-size). */
.page-crown .decor-clip { container-type: size; }
.page-crown h1 {
    font-size: var(--fs-h1);
    font-weight: 700;
    /* Стеля тримає заголовок вивіскою (2-3 слова в рядку) і не пускає
       його під велику декоративну літеру справа. Але 21ch різало навпіл
       заголовки, яким бракувало 8px до одного рядка («Кожна ніч має свій
       голос», «Словник снів за абеткою»); 26ch дає їм влізти, а до літери
       лишається ще з півтисячі пікселів запасу. */
    max-width: 26ch;
}
.page-crown h1 em { font-style: normal; color: var(--rozhevyi); }
.crown-letter {
    position: absolute;
    top: 50%;
    right: clamp(-3rem, 2vw, 6rem);
    /* -54.8%, а не -50%: центрується рядок, а не сам гліф, і чорнило в
       рядку сидить нижче за середину бокса. Зсув вирівнює по центру зони
       весь можливий діапазон - від крапок «Ї» під верхнім краєм бокса до
       хвоста «Щ» і старостильних цифр Cormorant (3, 4, 5, 7, 9), що
       звисають нижче базової лінії. */
    transform: translateY(-54.8%) rotate(6deg);
    font-family: var(--font-display);
    font-weight: 700;
    /* Стеля вдвічі: від вікна й від висоти власної зони. Зона заввишки
       дуже різна - від 356px у тлумача (заголовок + лід + форма) до 206px
       у статті терміна, де є лише крихти й h1, - і в тих 206px літері не
       було де поміститися: .decor-clip зрізав їй маківку. Тому в коротких
       зонах літера меншає, а не обрубується. 82cqh - це запас під найдовше
       чорнило («Щ» після повороту на 6° займає 0.93em заввишки) плюс
       десяток пікселів на люфт. Другий рядок перекриває перший там, де є
       підтримка контейнерних одиниць. */
    font-size: clamp(11rem, 30vw, 21rem);
    font-size: min(clamp(11rem, 30vw, 21rem), 82cqh);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(159, 192, 231, 0.17);
    pointer-events: none;
    user-select: none;
}
.crown-lead { color: var(--text-2); max-width: 44rem; font-size: 1.05rem; }

/* ── Ріка термінів (список літери) ─────────────────────────── */
.terms-river { padding-block: 1rem clamp(4rem, 8vw, 6rem); }
.term-flow {
    columns: 2;
    column-gap: 3.5rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}
@media (min-width: 900px) { .term-flow { columns: 3; } }
@media (max-width: 560px) { .term-flow { columns: 1; } }
.term-flow li {
    break-inside: avoid;
    margin-bottom: 0.6rem;
    padding-left: 1.1rem;
    position: relative;
}
.term-flow li::before {
    content: "\2727";
    position: absolute;
    left: 0; top: 0.1em;
    color: var(--zoloto);
    opacity: 0.55;
    font-size: 0.75em;
}
.term-flow a {
    color: var(--moloko);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.term-flow a:hover { color: var(--zoloto); border-bottom-color: rgba(233, 196, 106, 0.4); }

/* ── Стаття терміна ────────────────────────────────────────── */
.dream-article { padding-block: 1rem clamp(4rem, 8vw, 6rem); }
.article-grid {
    display: grid;
    grid-template-columns: minmax(0, 66ch) minmax(200px, 250px);
    gap: 3.5rem;
    align-items: start;
    justify-content: space-between;
}
@media (max-width: 900px) {
    .article-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
.article-body { font-size: 1.09rem; }
.article-body p { margin-bottom: 1.1rem; }
.article-body > p:first-child::first-letter {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 3.3em;
    float: left;
    line-height: 0.82;
    padding: 0.08em 0.14em 0 0;
    color: var(--zoloto);
}
.article-note {
    border-left: 2px solid rgba(233, 196, 106, 0.5);
    padding: 0.2rem 0 0.2rem 1.2rem;
    color: var(--dim);
    font-style: italic;
    margin-top: 1.6rem;
}

/* Рукописні синоніми на полях */
.margin-notes { padding-top: 0.6rem; }
.margin-notes .hand-label {
    font-family: var(--font-hand);
    font-size: 1.3rem;
    color: var(--dim);
    transform: rotate(-2deg);
    margin-bottom: 0.85rem;
}
.hand-syn {
    display: inline-block;
    font-family: var(--font-hand);
    font-size: 1.42rem;
    line-height: 1.2;
    color: var(--blakyt);
    margin: 0 0.9rem 0.75rem 0;
    padding-bottom: 3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 6' preserveAspectRatio='none'%3E%3Cpath d='M2 4 Q 22 1, 44 3.5 T 88 3' stroke='%23D9A7AE' stroke-width='1.3' fill='none' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E") bottom / 100% 6px no-repeat;
}
.margin-notes .hand-syn:nth-child(3n),   .aside-syns .hand-syn:nth-child(3n)   { transform: rotate(-2.4deg); }
.margin-notes .hand-syn:nth-child(3n+1), .aside-syns .hand-syn:nth-child(3n+1) { transform: rotate(1.6deg); }
.margin-notes .hand-syn:nth-child(3n+2), .aside-syns .hand-syn:nth-child(3n+2) { transform: rotate(-0.7deg); }
/* у полях щоденникових сторінок рука дрібніша - поруч дрібний текст,
   і це вже посилання у словник, а не просто синонім */
.aside-syns .hand-syn {
    font-size: 1.28rem;
    margin-right: 0.7rem;
    text-decoration: none;
}
.aside-syns .hand-syn:hover { color: var(--zoloto); }

/* Запрошення-CTA з місяцем */
.night-invite {
    position: relative;
    margin-top: 2.8rem;
    border-radius: 5px;
    padding: 1.6rem 1.9rem 2.1rem 5.2rem;   /* знизу більше повітря до нитки рамки */
    background: radial-gradient(420px 200px at 12% 30%, rgba(233, 196, 106, 0.09), transparent 70%);
}
.night-invite .invite-moon {
    position: absolute;
    left: 1.45rem; top: 1.55rem;
    width: 2.5rem; height: 2.5rem;
    color: var(--zoloto);
}
.night-invite .invite-title {
    font-family: var(--font-display);
    font-size: 1.24rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.night-invite p { color: var(--text-2); margin-bottom: 1.1rem; }
@media (max-width: 560px) {
    .night-invite { padding-left: 1.6rem; }
    .night-invite .invite-moon { position: static; display: block; margin-bottom: 0.6rem; }
}
/* Те саме запрошення в полях: вузько, тож місяць стає над заголовком */
.night-invite-side {
    margin-top: 0;
    padding: 1.4rem 1.4rem 1.8rem;
    background: radial-gradient(300px 170px at 20% 20%, rgba(233, 196, 106, 0.1), transparent 70%);
}
.night-invite-side .invite-moon {
    position: static;
    display: block;
    width: 2.1rem; height: 2.1rem;
    margin-bottom: 0.55rem;
}
.night-invite-side .invite-title { font-size: 1.1rem; }
.night-invite-side p { font-size: 0.93rem; margin-bottom: 1rem; }

/* ── Сузір'я «поруч у небі снів» ───────────────────────────── */
.constellation-zone { padding-block: clamp(2.5rem, 5vw, 4rem) 0; }
.constellation {
    position: relative;
    min-height: 300px;
    margin-top: 1rem;
}
.constellation svg.const-lines {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
.const-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    color: var(--blakyt);
    font-size: 0.94rem;
    text-align: center;
}
.const-node i {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--blakyt);
    box-shadow: 0 0 12px 3px rgba(159, 192, 231, 0.4);
    transition: background 0.15s, box-shadow 0.15s;
}
.const-node:hover { color: var(--zoloto); }
.const-node:hover i {
    background: var(--zoloto);
    box-shadow: 0 0 14px 4px rgba(233, 196, 106, 0.5);
}
.const-node.const-center {
    color: var(--moloko);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    pointer-events: none;
}
.const-node.const-center i {
    width: 13px; height: 13px;
    background: var(--zoloto);
    box-shadow: 0 0 18px 5px rgba(233, 196, 106, 0.55);
}
@media (max-width: 720px) {
    /* на вузьких екранах сузір'я стає простим списком зірочок */
    .constellation { min-height: 0; }
    .constellation svg.const-lines { display: none; }
    .const-node { position: static; transform: none; flex-direction: row; }
    .constellation { display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
}

/* ── Тлумач: форма-щоденник ────────────────────────────────── */
.journal-zone { padding-block: 0.5rem clamp(4rem, 7vw, 6rem); }

/* ── Сітка щоденникових сторінок: читання + поля ────────────────
   Той самий прийом, що в статті терміна (.article-grid): міра рядка
   лишається вузькою (довгі рядки очі гублять), але праворуч живуть
   нотатки на полях. Без них контент у 44rem висів би зліва, а третина
   полотна в 1140 простоювала - і сторінка читалась як недоверстана. */
.journal-grid {
    display: grid;
    grid-template-columns: minmax(0, 44rem) minmax(210px, 280px);
    gap: clamp(2rem, 3.4vw, 3.2rem);
    align-items: start;
    justify-content: space-between;
}
.journal-main { min-width: 0; }
@media (max-width: 1000px) {
    .journal-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}

/* Поля тримаються біля ока, поки людина скролить довгий переклад.
   Липкість - лише там, де колонка гарантовано влазить у висоту екрана
   (див. @media height нижче): інакше липкий блок, вищий за вікно, ховає
   власний низ - а там саме кнопка. Знизу сітка розпадається - поля
   йдуть під контент. */
.journal-aside {
    position: sticky;
    top: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    font-size: 0.95rem;
}
@media (max-width: 1000px), (max-height: 820px) {
    .journal-aside { position: static; }
}
/* Складені поля не мають бути ширші за колонку читання - інакше рядок
   приміток розтягується на всю сторінку. */
@media (max-width: 1000px) {
    .journal-aside { max-width: 44rem; }
}
/* Поля з одного короткого блоку (сім сусідніх ночей у календарі) проти
   високої колонки читання висять угорі, і поверх читається як недоверстаний.
   Центруємо їх по висоті поверху - лише поки колонки стоять поруч: складені
   під контент поля вирівнювати нема з чим. */
@media (min-width: 1001px) {
    .journal-aside-mid { align-self: center; }
    /* І по горизонталі: короткий блок, притиснутий до лівого краю широкої
       колонки полів, лишає праворуч порожню смугу. Праве поле дорівнює
       найбільшому зсуву дуги ($arc_shift у kalendar.php, 25px): без нього
       опукла середина тижня перетягувала б блок праворуч від центру. */
    .journal-aside-mid .overline { text-align: center; }
    .journal-aside-mid .week-arc-side {
        align-items: center;
        padding-inline: 0 25px;
    }
}
/* Горизонт між блоками полів. Проміжку колонки (1.8rem) для нього мало:
   з лінією посередині він читався б як ще один блок, а не як пауза між
   різними темами - тож повітря навколо більше за звичайний проміжок.
   Ширина потрібна явно: поля - колонка-флекс, а auto-поля з боків .horizon
   гасять розтяг, і без width лінія схлопується в нуль. */
.aside-rule { width: 100%; margin-block: 0.7rem; }

.aside-block .overline { margin-bottom: 0.85rem; }
.aside-line { color: var(--text-2); line-height: 1.6; margin-bottom: 0.9rem; }
.aside-line:last-child { margin-bottom: 0; }
.aside-line strong { color: var(--moloko); }
.aside-count {
    display: block;
    font-family: var(--font-display);
    font-variant-numeric: lining-nums;   /* див. .med-disc: інакше цифра сідає під рядок */
    font-weight: 700;
    font-size: 2.7rem;
    line-height: 1;
    color: var(--zoloto);
    margin-bottom: 0.45rem;
}
.aside-block .cta-ghost, .aside-block .cta-solid { font-size: 0.9rem; }
.aside-hint {
    color: var(--dim);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-top: 0.75rem;
}

/* Останні записи щоденника: дата + початок сну, повний текст - у кабінеті */
.aside-dreams { display: flex; flex-direction: column; gap: 0.9rem; }
.aside-dream {
    display: block;
    color: var(--text-2);
    text-decoration: none;
    line-height: 1.5;
    border-left: 1px solid rgba(159, 192, 231, 0.28);
    padding-left: 0.85rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.aside-dream time {
    display: block;
    color: var(--dim);
    font-size: 0.82rem;
    margin-bottom: 0.15rem;
}
.aside-dream:hover { color: var(--moloko); border-left-color: rgba(233, 196, 106, 0.6); }
.aside-more { display: inline-block; margin-top: 0.9rem; font-size: 0.9rem; }

/* Перелік у полях: зорі замість маркерів */
.aside-list { list-style: none; margin: 0; padding: 0; }
.aside-list li {
    position: relative;
    color: var(--text-2);
    line-height: 1.55;
    margin-bottom: 0.7rem;
    padding-left: 1.15rem;
}
.aside-list li:last-child { margin-bottom: 0; }
.aside-list li::before {
    content: "\2726";
    position: absolute;
    left: 0; top: 0.1em;
    color: var(--zoloto);
    font-size: 0.7em;
    opacity: 0.85;
}
.aside-list a {
    color: var(--moloko);
    text-decoration: none;
    border-bottom: 1px solid rgba(159, 192, 231, 0.35);
}
.aside-list a:hover { color: var(--zoloto); border-bottom-color: rgba(233, 196, 106, 0.5); }

.journal-form { max-width: 46rem; }
.journal-form textarea {
    min-height: 220px;
    line-height: 2.05;
    font-size: 1.05rem;
    padding: 0.55rem 1.2rem;
    resize: vertical;
    background-image:
        repeating-linear-gradient(
            transparent 0,
            transparent calc(2.05em - 1px),
            rgba(159, 192, 231, 0.16) calc(2.05em - 1px),
            rgba(159, 192, 231, 0.16) 2.05em
        );
    background-attachment: local;
    background-position-y: 0.55rem;
}
/* Начитування сну: кнопка мікрофона над полем.
   Схована за замовчуванням - JS додає .is-ready лише там, де мікрофон є
   (див. main.js), щоб браузери без MediaRecorder не бачили мертву кнопку. */
.voice-row {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    margin: 0.75rem 0 0.9rem;
}
.voice-row.is-ready { display: flex; }

/* Сама кнопка - звичайна .cta-ghost: два мальовані штрихи, які сходяться
   на ховері, як у решти кнопок сайту. Тут лише те, чого в CTA немає:
   іконка, індикатор запису й таймер. Колір штрихів - currentColor, тому
   стани (запис, підсвітка) міняють ЛИШЕ color, а контур іде слідом. */
.voice-btn { gap: 0.6rem; padding-left: 1.5em; padding-right: 1.5em; }
.voice-ico { flex: none; margin-top: -0.1em; }
.voice-timer {
    font-family: var(--font-text);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

/* крапка - саме індикатор запису, тож у спокої її немає */
.voice-dot {
    display: none;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: currentColor;
}
.voice-row.is-recording .voice-btn  { color: var(--rozhevyi); }
.voice-row.is-recording .voice-dot  { display: block; animation: voice-pulse 1.3s ease-in-out infinite; }
@keyframes voice-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.45; }
    50%      { transform: scale(1.35); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .voice-row.is-recording .voice-dot { animation: none; opacity: 1; }
}

/* прийшли з мікрофона на головній: штрихи сходяться (як на ховері),
   золотіють і двічі «дихають» - видно, куди вели, без чужорідного сяйва */
.voice-row.is-hi .voice-btn { color: var(--zoloto); }
.voice-row.is-hi .voice-btn::before,
.voice-row.is-hi .voice-btn::after {
    transform: none;
    border-radius: 13px;
    opacity: 1;
}
.voice-row.is-hi .voice-btn::after { animation: voice-hi 1.1s ease-in-out 2; }
@keyframes voice-hi {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
    .voice-row.is-hi .voice-btn::after { animation: none; }
}

/* http:// не на localhost - мікрофона браузер не дає, кнопка лише пояснює чому */
.voice-row.is-off .voice-btn { cursor: default; }

.voice-note { color: var(--dim); font-size: 0.9rem; line-height: 1.5; }
.voice-note.is-warn { color: var(--rozhevyi); }
@media (max-width: 620px) {
    .voice-note { flex-basis: 100%; }
}

.journal-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem 2rem;
    margin-top: 1.5rem;
}
@media (max-width: 620px) { .journal-dates { grid-template-columns: 1fr; } }
.journal-submit { margin-top: 1.8rem; }

.invalid-note {
    display: none;
    color: var(--rozhevyi);
    font-family: var(--font-hand);
    font-size: 1.25rem;
    margin-top: 0.4rem;
}
/* textarea тепер в .ink-field - показуємо примітку через сусіда обгортки */
.ink-field:has(.is-invalid) ~ .invalid-note { display: block; }

/* Результати тлумача - записи щоденника */
.reading { margin-top: 3.2rem; }
.reading-title {
    font-size: var(--fs-h2);
    margin-bottom: 1.6rem;
}
.journal-entry {
    padding-block: 1.35rem;
    max-width: 66ch;   /* спільна міра рядка з картками енергій і статтею терміна */
}
.journal-entry + .journal-entry { border-top: 1px dashed rgba(159, 192, 231, 0.25); }
.entry-title {
    font-family: var(--font-display);
    font-size: 1.28rem;
    font-weight: 700;
    margin-bottom: 0.45rem;
}
.entry-title::before {
    content: "\2726\00a0\00a0";
    color: var(--zoloto);
    font-size: 0.72em;
}
.entry-title a { color: var(--moloko); text-decoration: none; }
.entry-title a:hover { color: var(--zoloto); }
.found-note {
    font-family: var(--font-hand);
    font-size: 1.18rem;
    color: var(--dim);
    font-weight: 400;
    white-space: nowrap;
}
.journal-entry p { color: var(--text-2); margin-bottom: 0.65rem; }
.journal-entry p:last-child { margin-bottom: 0; }

/* Енергії дати - медальйони */
.medallion-row {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    margin-top: 1.4rem;
}
/* Відступ медальйонів - це проміжок від попереднього блоку. Коли вони
   відкривають поверх сторінки, попереднього блоку немає: повітря вже дав
   горизонт, і 1.4rem згори лише зсували б колонку відносно полів. */
.journal-main > .medallion-row:first-child { margin-top: 0; }
.medallion {
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
    max-width: 66ch;
}
/* Cormorant типово дає СТАРОСТИЛЬНІ цифри: 3 4 5 7 9 звисають під
   базову лінію, 6 і 8 тягнуться вгору, 1 завбільшки з x-height. У колі
   медальйона, де по черзі стоїть кожне число від 1 до 9, воно щоразу
   сидить на іншій висоті. Просимо мажорні (lining) цифри - вони рівні
   між собою й центруються в диску. */
.medallion .med-disc {
    flex: none;
    width: 66px; height: 66px;
    border-radius: 50%;
    border: 1px solid rgba(233, 196, 106, 0.55);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-variant-numeric: lining-nums;
    font-weight: 700;
    font-size: 1.9rem;
    color: var(--zoloto);
    background:
        radial-gradient(circle at 32% 28%, rgba(233, 196, 106, 0.16), transparent 60%);
    box-shadow: 0 0 22px rgba(233, 196, 106, 0.14), inset 0 0 14px rgba(233, 196, 106, 0.08);
}
.medallion .med-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.12rem;
    margin-bottom: 0.3rem;
}
.medallion p {
    color: var(--text-2);
    font-size: 1.02rem;
    line-height: 1.7;
    margin-bottom: 0.45rem;
}

/* День тижня - стрічка з повір'ям */
.dow-banner {
    position: relative;
    max-width: 66ch;
    background: rgba(159, 192, 231, 0.07);
    border-radius: 5px;
    padding: 1.5rem 1.8rem 1.9rem;   /* знизу більше повітря до нитки рамки */
    margin-top: 1.4rem;
}
.dow-banner .dow-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    color: #C6DBF3;
    margin-bottom: 0.4rem;
}
.dow-banner p {
    margin: 0;
    color: var(--text-2);
    font-size: 1.02rem;
    line-height: 1.7;
}

/* Місячна фаза */
.moon-note {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.4rem;
    max-width: 66ch;
    color: var(--text-2);
    font-size: 1.02rem;
    line-height: 1.7;
}
.moon-note .phase-name { color: var(--moloko); font-weight: 600; }
.moon-note svg { flex: none; width: 44px; height: 44px; }

/* Оповідь AI - казка з буквицею */
/* ── Комплексний розбір ──────────────────────────────────────
   Секції, а не суцільний текст: людина платить за розбір, і він
   має читатись як розбір. Той самий вигляд на сторінці тлумача
   і в кабінеті - розмітку дає interpret_analysis_html(). */
.analysis {
    max-width: 62ch;
    font-size: 1.06rem;
    line-height: 1.8;
    padding-top: 1.9rem;
}
/* Головна нитка - те, заради чого все: більший кегль і золота засічка.
   Шрифт - основний текстовий: Cormorant тут був важкий для суцільних
   речень; лід вирізняється кеглем, кольором і золотою лінією. */
.an-lead {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 3.1rem;
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--moloko);
}
.an-lead::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    bottom: 0.35em;
    width: 2px;
    background: linear-gradient(180deg, var(--zoloto), rgba(233, 196, 106, 0));
}
.an-lead p { margin-bottom: 0.6rem; }
.an-lead p:last-child { margin-bottom: 0; }

/* Повітря НАД заголовком секції має бути помітно більше, ніж під ним:
   так заголовок читається як початок нового, а не як підпис до тексту
   вище. Тримаємо ~1.5 рядка основного тексту (рядок тут ≈ 30px). */
.an-block { margin-bottom: 3.1rem; }
.an-block:last-of-type { margin-bottom: 2.2rem; }
.an-h {
    font-family: var(--font-display);
    font-size: 1.16rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #C6DBF3;
    margin-bottom: 0.85rem;
}
.an-h::before {
    content: "\2726\00a0\00a0";
    color: var(--zoloto);
    font-size: 0.68em;
    vertical-align: 0.12em;
}
.an-block p { color: var(--text-2); margin-bottom: 0.7rem; }
.an-block p:last-child { margin-bottom: 0; }

/* образ у розборі - компактніше за статтю словника, з тонкою лінією зліва */
.an-sym {
    padding-left: 1.15rem;
    border-left: 1px dashed rgba(159, 192, 231, 0.25);
    margin-bottom: 1.6rem;   /* у кожного образу свій заголовок - їм теж треба повітря */
}
.an-sym:last-child { margin-bottom: 0; }
.an-sym-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--moloko);
    margin-bottom: 0.25rem;
}
.an-sym-title a { color: var(--moloko); text-decoration: none; }
.an-sym-title a:hover { color: var(--zoloto); }

/* повтори образів - єдине, чого не скаже сторонній чат: виділяємо */
.an-recurring {
    background: rgba(217, 167, 174, 0.07);
    border-radius: 5px;
    padding: 1.3rem 1.5rem;
}
.an-recurring .an-h { color: var(--rozhevyi); }
.an-recurring .an-h::before { color: var(--rozhevyi); }

/* ── Питання до себе ─────────────────────────────────────────
   Найцінніше в розборі: єдина секція, яка нічого не пояснює, а просить
   роботи від самої людини. Тому це не рядовий блок, а картка - золота
   нитка рамки й тепла підкладка видно її навіть тому, хто гортає, не
   читаючи. Питання пронумеровані: три завдання, а не три репліки. */
.an-block.an-questions {
    position: relative;              /* під рамку «Сузір'я» */
    background: rgba(233, 196, 106, 0.07);
    border-radius: 5px;
    /* Поля як у .dow-banner, і з тієї самої причини: нитка рамки йде на
       відступі ~11px від краю і подекуди вигинається всередину, тож
       між нею і текстом має лишатися просвіт. Знизу щедріше - під
       текстом повітря треба більше, ніж над ним. */
    padding: 1.5rem 1.8rem 1.9rem;
}
.an-block.an-questions .an-h {
    color: var(--zoloto);
    margin-bottom: 1.05rem;
}

.an-q-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: an-q;
}
.an-q-list li {
    counter-increment: an-q;
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 1.05rem;
    /* світліші за звичайний текст секцій: питання читають уважніше */
    color: var(--moloko);
    font-size: 1.04rem;
    line-height: 1.62;
}
.an-q-list li:last-child { margin-bottom: 0; }
/* Цифра в колі - за рецептом медальйонів (.med-disc): Cormorant типово дає
   СТАРОСТИЛЬНІ цифри, і 1, 2, 3 сиділи б на різній висоті, наче набрані
   різними шрифтами. Мажорні (lining) цифри рівні між собою й центруються. */
.an-q-list li::before {
    content: counter(an-q);
    position: absolute;
    left: 0;
    top: 0.05em;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    border: 1px solid rgba(233, 196, 106, 0.45);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-variant-numeric: lining-nums;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--zoloto);
}

.an-wish {
    margin-top: 1.8rem;
    padding-top: 1.5rem;
    border-top: 1px dashed rgba(159, 192, 231, 0.25);
    font-family: var(--font-hand);
    font-size: 1.32rem;
    line-height: 1.6;
    color: var(--rozhevyi);
}

/* сон у щоденнику, розбір якого ще рахується або не склався */
.dream-log-wait {
    margin-top: 0.9rem;
    font-size: 0.95rem;
    color: var(--dim);
    font-style: italic;
}

/* статті словника під розбором - джерело, а не головне блюдо */
.dream-sources {
    margin-top: 2.6rem;
    border-top: 1px dashed rgba(159, 192, 231, 0.25);
    padding-top: 1.2rem;
}
.dream-sources > summary {
    cursor: pointer;
    color: var(--dim);
    font-size: 0.95rem;
    list-style: none;
}
.dream-sources > summary::-webkit-details-marker { display: none; }
.dream-sources > summary::before {
    content: "\25B8\00a0\00a0";
    color: var(--zoloto);
    display: inline-block;
    transition: transform 0.2s ease;
}
.dream-sources[open] > summary::before { content: "\25BE\00a0\00a0"; }
.dream-sources > summary:hover { color: var(--moloko); }

.ai-tale {
    max-width: 62ch;
    font-size: 1.09rem;
    line-height: 1.85;
    padding: 1.9rem 0 0.4rem;
}
.ai-tale > p:first-child::first-letter {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 3.4em;
    float: left;
    line-height: 0.8;
    padding: 0.07em 0.15em 0 0;
    color: var(--rozhevyi);
}

/* Примітки/попередження */
.night-note, .warn-note {
    position: relative;
    max-width: 66ch;
    border-radius: 5px;
    /* знизу щедріше: під текстом більше повітря до нитки рамки, ніж над ним */
    padding: 1.15rem 1.5rem 1.55rem;
    margin-top: 1.4rem;
    color: var(--text-2);
}
.night-note { background: rgba(159, 192, 231, 0.08); }
.warn-note  { background: rgba(217, 167, 174, 0.1); color: var(--rozhevyi); }
.night-note a { color: var(--blakyt); }
/* посилання в попередженні лишається того ж рожевого, що й фраза навколо -
   блакить тут читалася б як чужа вставка; підкреслення показує, що клікабельне */
.warn-note a  { color: inherit; text-decoration-color: rgba(217, 167, 174, 0.5); }

/* ── Рамка «Сузір'я»: нитка-контур (::before) + кутові зорі (::after) ──
   Багаторазовий прийом. Кнопок і полів НЕ торкається (вони мають свій
   чорнильний штрих). Зоря 13px, центр на розі нитки (inset 9px). */
.dow-banner::before, .night-note::before, .warn-note::before, .an-questions::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(233, 196, 106, 0.30);
    border-radius: 4px;
    pointer-events: none;
}
.dow-banner::after, .night-note::after, .warn-note::after, .pack::after,
.an-questions::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6c.9 4.9 2.2 8 4.1 9.2 1.4.9 3.4 1.3 6.3 1.2-2.9.4-4.9 1-6.2 2-1.7 1.4-3 4.3-4.2 8.4-.9-4.9-2.2-8-4.1-9.2-1.4-.9-3.4-1.3-6.3-1.2 2.9-.4 4.9-1 6.2-2C9.5 8.6 10.8 5.7 12 1.6Z' fill='%23E9C46A'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6c.9 4.9 2.2 8 4.1 9.2 1.4.9 3.4 1.3 6.3 1.2-2.9.4-4.9 1-6.2 2-1.7 1.4-3 4.3-4.2 8.4-.9-4.9-2.2-8-4.1-9.2-1.4-.9-3.4-1.3-6.3-1.2 2.9-.4 4.9-1 6.2-2C9.5 8.6 10.8 5.7 12 1.6Z' fill='%23E9C46A'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6c.9 4.9 2.2 8 4.1 9.2 1.4.9 3.4 1.3 6.3 1.2-2.9.4-4.9 1-6.2 2-1.7 1.4-3 4.3-4.2 8.4-.9-4.9-2.2-8-4.1-9.2-1.4-.9-3.4-1.3-6.3-1.2 2.9-.4 4.9-1 6.2-2C9.5 8.6 10.8 5.7 12 1.6Z' fill='%23E9C46A'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6c.9 4.9 2.2 8 4.1 9.2 1.4.9 3.4 1.3 6.3 1.2-2.9.4-4.9 1-6.2 2-1.7 1.4-3 4.3-4.2 8.4-.9-4.9-2.2-8-4.1-9.2-1.4-.9-3.4-1.3-6.3-1.2 2.9-.4 4.9-1 6.2-2C9.5 8.6 10.8 5.7 12 1.6Z' fill='%23E9C46A'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 2.5px top 2.5px, right 2.5px top 2.5px, left 2.5px bottom 2.5px, right 2.5px bottom 2.5px;
    background-size: 13px 13px;
}
/* Коли є JS - пласку рамку прибираємо: star-frame.js малює ВИГНУТУ нитку
   (по-різному в кожному блоці). Без JS лишається ця пласка версія (фолбек). */
.starframed::before, .starframed::after { content: none; }

/* Мерехтіння під час запиту */
.loading-star {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    color: var(--dim);
    font-family: var(--font-hand);
    font-size: 1.35rem;
    padding-block: 1.5rem;
}
.loading-star svg { width: 30px; height: 30px; color: var(--zoloto); }
@media (prefers-reduced-motion: no-preference) {
    .loading-star svg { animation: star-spin 2.6s linear infinite; }
    @keyframes star-spin { to { transform: rotate(360deg); } }
}

/* ── Календар ──────────────────────────────────────────────── */
.cal-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1.2rem 1.6rem;
    align-items: end;
    max-width: 46rem;
    margin-bottom: 2.4rem;
}
@media (max-width: 720px) { .cal-form { grid-template-columns: 1fr; } }

.night-chosen-title {
    font-size: var(--fs-h2);
    margin: 0 0 0.4rem;
}
.night-chosen-sub { color: var(--dim); margin-bottom: 1rem; }

/* Тиждень дугою */
.week-arc {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 40rem;
    margin-top: 2.2rem;
    padding-inline: 0.4rem;
}
.week-arc a {
    font-size: 0.92rem;
    color: var(--dim);
    text-decoration: none;
    transform: translateY(var(--arc, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem;
}
.week-arc a i {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(159, 192, 231, 0.5);
    transition: all 0.15s ease;
}
.week-arc a:hover { color: var(--moloko); }
.week-arc a:hover i { background: var(--zoloto); box-shadow: 0 0 10px rgba(233, 196, 106, 0.6); }
.week-arc a.tonight { color: var(--zoloto); }
.week-arc a.tonight i {
    width: 12px; height: 12px;
    background: var(--zoloto);
    box-shadow: 0 0 14px rgba(233, 196, 106, 0.7);
}
@media (max-width: 560px) {
    .week-arc { flex-wrap: wrap; gap: 0.7rem 1.1rem; justify-content: flex-start; }
    .week-arc a { transform: none; flex-direction: row; }
}

/* Той самий тиждень у полях - дуга, повернута на чверть: вигин іде
   вбік, і список ночей стає постійним навігатором поруч з енергіями.
   Правила нижчі за мобільні вище - тож у полях дуга вертикальна всюди. */
.week-arc-side {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    max-width: none;
    margin-top: 0;
    gap: 0.4rem;
    padding-inline: 0;
}
.week-arc-side a {
    flex-direction: row;
    align-items: center;
    gap: 0.7rem;
    transform: translateX(var(--arc, 0px));
    padding: 0.1rem 0.3rem;
}
/* Коли поля складаються під контент, тиждень повертається в звичну
   горизонтальну дугу - там для неї знову є ширина. */
@media (min-width: 561px) and (max-width: 1000px) {
    .week-arc-side {
        flex-direction: row;
        justify-content: space-between;
        max-width: 40rem;
        gap: 0;
        padding-inline: 0.4rem;
    }
    .week-arc-side a {
        flex-direction: column;
        transform: translateY(var(--arc, 0px));
        padding: 0.3rem;
        gap: 0.5rem;
    }
}
@media (max-width: 560px) {
    .week-arc-side { flex-direction: row; flex-wrap: wrap; gap: 0.7rem 1.1rem; }
    .week-arc-side a { transform: none; }
}

/* ── 404: загублена зоря ───────────────────────────────────── */
/* overflow тут не ставимо - секція має віддати місце дропдауну пошуку;
   зорю ріже .decor-clip (див. розмітку 404). */
.lost-star-zone {
    position: relative;
    text-align: left;
    padding-block: clamp(4rem, 12vh, 8rem) clamp(5rem, 14vh, 9rem);
}
.lost-star-zone h1 { font-size: var(--fs-h1); max-width: 16ch; }
.shooting-star {
    position: absolute;
    top: 18%;
    right: 8%;
    width: 220px; height: 2px;
    background: linear-gradient(270deg, var(--zoloto), transparent);
    transform: rotate(-24deg);
    border-radius: 2px;
    pointer-events: none;
}
.shooting-star::after {
    content: "";
    position: absolute;
    right: -3px; top: -2.5px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 16px 5px rgba(233, 196, 106, 0.8);
}
@media (prefers-reduced-motion: no-preference) {
    .shooting-star { animation: shoot 7s ease-in-out infinite; opacity: 0; }
    @keyframes shoot {
        0%   { opacity: 0; transform: rotate(-24deg) translateX(150px); }
        6%   { opacity: 1; }
        16%  { opacity: 0; transform: rotate(-24deg) translateX(-260px); }
        100% { opacity: 0; transform: rotate(-24deg) translateX(-260px); }
    }
}

/* ── Футер-світанок ────────────────────────────────────────── */
.dawn {
    position: relative;
    margin-top: clamp(3rem, 7vw, 5rem);
    color: var(--moloko);
    background:
        linear-gradient(180deg,
            var(--ink-1) 0%,
            #1B1B3F 26%,
            #35244C 52%,
            #5C3159 74%,
            #8A4A6B 89%,
            #C4718A 100%);
}
.dawn-hills { display: block; width: 100%; margin-bottom: -1px; }
.dawn-inner { padding-block: 35px 0; }
.dawn-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem 4.5rem;
    align-items: flex-start;
    padding-bottom: 60px;
}
.dawn-brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.45rem;
    margin-bottom: 0.7rem;
}
.dawn-about { flex: 1 1 21rem; max-width: 30rem; }
.dawn-about p { color: rgba(241, 237, 226, 0.75); font-size: 0.96rem; }
/* Без max-width нотатка лягає в один рядок (їй треба 440px, а колонка -
   480px); на вужчих екранах колонка стискається і рядок переноситься сам. */
.dawn-note {
    font-family: var(--font-hand);
    font-size: 1.35rem;
    color: rgba(241, 237, 226, 0.85);
    transform: rotate(-1.4deg);
    margin-top: 1.2rem;
}
.dawn-col { flex: 0 1 auto; }
.dawn-col-title {
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(241, 237, 226, 0.65);
    margin-bottom: 0.9rem;
}
.dawn-col ul { list-style: none; margin: 0; padding: 0; }
.dawn-col li { margin-bottom: 0.55rem; }
.dawn-col a {
    color: var(--moloko);
    text-decoration: none;
    border-bottom: 1px solid rgba(241, 237, 226, 0.25);
    padding-bottom: 1px;
}
.dawn-col a:hover { color: #fff; border-bottom-color: #fff; }
/* Відступ знизу тримає текст вище найсвітлішої смуги градієнта - інакше
   кремовий провалюється на рожевому. Градієнт при цьому недоторканий:
   його світанковий край лишається видимим під текстом.
   Розділяє смугу звичайний .horizon - той самий, що між розділами сторінок. */
.dawn-bottom {
    padding-block: 0 80px;
    font-size: 0.85rem;
    color: var(--moloko);
}
.dawn-bottom .horizon { margin-bottom: 38px; }
/* На телефоні дисклеймер переноситься на 11 рядків, футер стає вдвічі вищим -
   і хвіст тексту опиняється вже в найсвітлішому рожевому (4.4:1 при 80px).
   Більший відступ повертає його в сливову зону: 5.4:1. */
@media (max-width: 560px) {
    .dawn-bottom { padding-bottom: 120px; }
}
.dawn-legal { display: block; margin-top: 0.35rem; }
.dawn-legal a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(241, 237, 226, 0.35);
}
.dawn-legal a:hover { text-decoration-color: currentColor; }

/* ── Дрібниці ──────────────────────────────────────────────── */
.mt-0 { margin-top: 0; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    /* без анімацій «виринання» терміни мають просто бути видимі */
    html.js .dream-drift li { opacity: 1 !important; }
}

/* ── Акаунт: вхід, залишок, пакети ─────────────────────────────
   Тон навмисно тихий: замок пояснює, а не тисне. Золото лишається
   за головною дією (увійти / взяти пакет), решта - блакить і --dim. */

/* стан акаунта в шапці */
.night-nav .nav-auth {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--zoloto);
}
.night-nav .nav-auth:hover { color: var(--moloko); }
.nav-credits {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45em;
    height: 1.45em;
    padding-inline: 0.32em;
    font-size: 0.78rem;
    line-height: 1;
    color: var(--ink-0);
    background: var(--zoloto);
    border-radius: 999px;
}

/* Смуга залишку (кабінет і пакети) - та сама секція-смуга, що й
   «Наснилося число?» на головній: жодних рамок і кольорових ліній
   збоку, лише світло, що гасне до країв, і падаюча зірка справа. */
.balance-band {
    margin-block: 0 clamp(2.2rem, 4vw, 3.2rem);
    padding-block: clamp(1.5rem, 3vw, 2.2rem);
}
.balance-band p {
    margin: 0;
    max-width: 40rem;
    font-size: 1.05rem;
    color: var(--text-2);
}
.balance-band strong { color: var(--moloko); }
.balance-band .band-star-svg { top: 8%; width: 130px; }
@media (max-width: 720px) { .balance-band .band-star-svg { width: 100px; right: -14px; } }
.balance-act {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.1rem;
}

/* сторінка входу */
.auth-card { display: block; }
/* Великі панелі теж носять «мальовану рамку» (два штрихи), але кут
   удвічі менший за кнопковий: на широкому боці 0.9° уже читається як
   перекіс, а не як рука. Панель не інтерактивна, тож штрихи лишаються
   розведеними - сходяться лише те, що можна натиснути. */
.drawn-panel, .gate { position: relative; isolation: isolate; }
.drawn-panel::before, .drawn-panel::after,
.gate::before, .gate::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1.5px solid var(--drawn-ink, rgba(159, 192, 231, 0.34));
    pointer-events: none;
    transition: transform 0.26s cubic-bezier(0.34, 1.2, 0.4, 1),
                opacity 0.22s ease, border-radius 0.26s ease, border-color 0.2s ease;
}
.drawn-panel::before, .gate::before {
    border-radius: 4px 24px 3px 20px / 3px 20px 4px 24px;
    transform: translate(-4px, -3px) rotate(-0.35deg);
    opacity: 0.45;
}
.drawn-panel::after, .gate::after {
    border-radius: 3px 20px 4px 23px / 4px 23px 3px 20px;
    transform: translate(4px, 3px) rotate(0.32deg);
    opacity: 0.9;
}

/* Вхід лишився сам на сторінці: без пояснювального блоку поруч рамка
   обводила б порожнечу, тож кнопка стоїть голою на місці того блоку. */
.auth-act { text-align: left; }
.auth-hint, .gate-hint {
    margin-top: 0.9rem;
    font-size: 0.88rem;
    color: var(--dim);
}
.gate-hint-warn { color: var(--rozhevyi); }

/* замок над цілісним перекладом у тлумачі */
.gate {
    --drawn-ink: rgba(233, 196, 106, 0.34);
    margin-top: 2.2rem;
    padding: 1.9rem clamp(1.2rem, 3vw, 2.2rem) 2rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(24, 32, 70, 0.62), rgba(16, 21, 46, 0.62));
    border-radius: 3px 22px 3px 22px;
}
.gate-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--moloko);
    margin-bottom: 0.7rem;
}
.gate-lead {
    max-width: 52ch;
    margin: 0 auto 1.5rem;
    color: var(--text-2);
}
.gate-fine {
    margin-top: 1.2rem;
    font-size: 0.86rem;
    color: var(--dim);
}
.gate .warn-note { margin-top: 1.2rem; text-align: left; }

/* пакети всередині замка - купівля без переходу на іншу сторінку */
.gate-packs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}
/* Пакет - те, що НАТИСКАЮТЬ, тож поводиться як кнопка: у спокої два
   розведені штрихи, на ховері/фокусі сходяться в один рівний контур. */
.gate-pack {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 12.5rem;
    padding: 1.1rem 1.4rem 1.2rem;
    text-align: left;
    font-family: var(--font-text);
    color: var(--text-2);
    background: rgba(10, 13, 30, 0.5);
    border: 0;
    border-radius: 13px;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.2s ease;
}
.gate-pack::before, .gate-pack::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1.5px solid var(--drawn-ink, rgba(159, 192, 231, 0.45));
    pointer-events: none;
    transition: transform 0.26s cubic-bezier(0.34, 1.2, 0.4, 1),
                opacity 0.22s ease, border-radius 0.26s ease, border-color 0.2s ease;
}
.gate-pack::before {
    border-radius: 15px 12px 16px 11px / 11px 16px 12px 15px;
    transform: translate(-3px, -2px) rotate(-0.9deg);
    opacity: 0.5;
}
.gate-pack::after {
    border-radius: 12px 16px 11px 15px / 15px 11px 16px 12px;
    transform: translate(3px, 2px) rotate(0.8deg);
    opacity: 0.9;
}
.gate-pack:hover::before, .gate-pack:hover::after,
.gate-pack:focus-visible::before, .gate-pack:focus-visible::after {
    transform: none;
    border-radius: 13px;
    opacity: 1;
    border-color: var(--zoloto);
}
.gate-pack:hover, .gate-pack:focus-visible { background: rgba(233, 196, 106, 0.06); }
.gate-pack:active { transform: translateY(1px); }
.gate-pack.is-best { --drawn-ink: rgba(233, 196, 106, 0.6); }
.gate-pack[disabled] { opacity: 0.5; cursor: wait; }
.gp-title { font-size: 0.92rem; color: var(--dim); }
.gp-price {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--zoloto);
    line-height: 1.1;
}
.gp-per { font-size: 0.82rem; color: var(--dim); }

/* сторінка пакетів */
.pack-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.4rem;
    max-width: 46rem;
}
/* Картка пакета носить рамку «Сузір'я» (див. .dow-banner) - кутові зорі
   й вигнута нитка між ними; малює її star-frame.js, знизу лишається
   плаский CSS-фолбек. Тому тут - лише підкладка й повітря під нитку. */
.pack {
    position: relative;
    padding: 2.2rem 1.9rem 2.2rem;   /* знизу і зверху повітря до нитки рамки */
    background: rgba(24, 32, 70, 0.5);
    border: 0;
    border-radius: 5px;
}
/* Стрічка «вигідніше» сідає верхи на верхню нитку рамки (та йде по
   inset 11px), лишаючись лівіше кутової зорі. */
.pack-ribbon {
    position: absolute;
    top: 11px; right: 1.9rem;
    padding: 0.2rem 0.7rem;
    font-family: var(--font-hand);
    font-size: 1rem;
    color: var(--ink-0);
    background: var(--zoloto);
    border-radius: 999px;
    transform: translateY(-50%) rotate(-2deg);
}
.pack-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--moloko);
    margin-bottom: 0.4rem;
}
.pack-price {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--zoloto);
    line-height: 1.05;
}
.pack-per {
    font-size: 0.88rem;
    color: var(--dim);
    margin-bottom: 0.9rem;
}
.pack-save {
    margin-left: 0.35rem;
    padding: 0.1rem 0.45rem;
    color: var(--ink-0);
    background: var(--blakyt);
    border-radius: 999px;
    font-size: 0.78rem;
}
.pack-note {
    color: var(--text-2);
    font-size: 0.95rem;
    margin-bottom: 1.4rem;
}
.pack-faq { max-width: 66ch; }   /* спільна міра рядка з рештою сторінок */
.pack-faq p { color: var(--text-2); }
.pack-faq h2 { margin-top: 2rem; }
/* Верхній відступ розводить питання МІЖ собою, але першому він зайвий:
   через нього колонка читання починалась на 32px нижче за поля поруч,
   і другий поверх сторінки виглядав з'їхалим. */
.pack-faq h2:first-child { margin-top: 0; }
/* Порожня відповідь про оплату не має займати місця: до покупки цей блок
   порожній, а його відступ підпирав горизонт знизу зайвою смугою. */
#buyResult:empty { margin-top: 0; }

/* юридичні сторінки: оферта, конфіденційність */
/* Ширину лишаємо мірою рядка, а сам документ ставимо по центру полотна:
   інакше під ним простоює смуга в 400px справа. */
.legal-doc { max-width: 64ch; margin-inline: auto; }
.legal-doc p,
.legal-doc li { color: var(--text-2); }
.legal-doc h2 {
    font-size: 1.3rem;
    margin: 2.6rem 0 0.9rem;
}
.legal-doc > h2:first-child { margin-top: 0; }
.legal-doc ul {
    margin: 0.8rem 0 1.2rem;
    padding-left: 1.3rem;
}
.legal-doc li { margin-bottom: 0.5rem; }
.legal-doc li::marker { color: var(--zoloto); }
.legal-doc strong { color: var(--moloko); }

/* щоденник снів у кабінеті */
.dream-log-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.86rem;
    color: var(--dim);
    margin-bottom: 0.5rem;
}
.dream-tag {
    padding: 0.1rem 0.55rem;
    font-size: 0.78rem;
    color: var(--zoloto);
    border: 1px solid rgba(233, 196, 106, 0.4);
    border-radius: 999px;
}
/* Запис щоденника йде на всю ширину колонки - стрічка снів, а не вузький
   стовпчик з порожнечею праворуч. Міру рядка тримає сам текст, а не
   картка: пунктирні межі між записами тепер справді розділяють сторінку. */
.dream-log { max-width: none; }
.dream-log-text { color: var(--text-2); max-width: 66ch; }
.dream-log-syms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    margin: 0.6rem 0 0.4rem;
    font-size: 0.92rem;
}
.dream-log-full summary {
    cursor: pointer;
    color: var(--blakyt);
    font-size: 0.92rem;
    margin-top: 0.5rem;
}
.dream-log-full[open] summary { color: var(--dim); }
/* Розгорнутий переклад зсунуто вправо і підв'язано ниткою: коли дата,
   сон, символи й переклад стоять по одній лівій лінії, око не бачить,
   де закінчується запис і починається сама оповідь. */
/* Розгорнутий запис - по центру колонки. Ширину не чіпаємо: 62ch це міра
   рядка, ширше читати важко. Зате порожнеча замість однієї смуги справа
   розходиться симетрично обабіч, а сам розбір відділяється від решти
   запису, притиснутої вліво. Стосується обох видів: нового розбору
   секціями (.analysis) і старого плоского перекладу (.ai-tale). */
.dream-log-full > .analysis,
.dream-log-full > .ai-tale { margin-inline: auto; }

/* налаштування акаунта */
.account-settings { max-width: 46rem; }
.setting-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.2rem;
}
.check-line {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-2);
}
.check-line input { accent-color: var(--zoloto); width: 1.05rem; height: 1.05rem; }

@media (max-width: 720px) {
    .gate-packs { flex-direction: column; }
    .gate-pack { min-width: 0; }
    /* Поля блоку НЕ тиснемо: там іде нитка рамки. Місце під текст
       звільняємо коротшим відступом під номер. */
    .an-q-list li { padding-left: 2.2rem; }
}

/* ── Вертикальний ритм на телефоні ─────────────────────────────
   Відступи секцій задані як clamp(мін, Nvw, макс), і на вузькому
   екрані середній доданок не виграє НІКОЛИ: 6vw на 375px - це 22px
   проти 3rem мінімуму. Тобто телефон завжди діставав саме нижню межу
   clamp, а її кожна секція підбирала окремо й з думкою «аби вміститись».
   Виходило двічі навпаки. По-перше, найтісніше було там, де простір
   потрібніший: на десктопі секції розділяє ще й ширина колонки з полями
   обабіч, а на телефоні все тягнеться на всю ширину, і єдине, що
   відділяє секцію від секції, - просвіт. По-друге, тих мінімумів було
   сім різних (2.2 / 2.4 / 2.5 / 2.6 / 2.8 / 3 / 3.5rem) - різниця, якої
   ніхто не задумував і яку на вузькому екрані видно як збитий ритм.
   Тому тут просвіт задається явно, двома величинами на весь сайт.

   Герой (.dreamfield) навмисно НЕ чіпаємо: його відступи міряні по
   диску місяця й гребеню пагорбів - див. @media (max-width: 720px)
   вище, там padding рахується від --moon-d. */
@media (max-width: 720px) {
    :root {
        --sect-y:    5.6rem;   /* основний просвіт секції */
        --sect-y-sm: 4.4rem;   /* дрібніші секції та краї сторінки */
    }

    /* Головна */
    .letters-path       { padding-block: var(--sect-y) var(--sect-y-sm); }
    .moon-steps         { padding-block: var(--sect-y); }
    .moon-tonight       { padding-block: var(--sect-y); }
    .surface-terms      { padding-block: var(--sect-y); }
    .about-dreams       { padding-block: var(--sect-y-sm); }
    .faq-dreams         { padding-block: var(--sect-y-sm); }
    .popular-dreams     { padding-block: var(--sect-y-sm); }
    .search-answer      { padding-block: var(--sect-y-sm); }

    /* Смуги з власним тлом: їм потрібен і просвіт навколо, і поля всередині */
    .falling-band       { margin-block: var(--sect-y); padding-block: var(--sect-y-sm); }
    .balance-band       { margin-block: 0 var(--sect-y-sm); padding-block: 2.8rem; }

    /* Внутрішні сторінки. Верхні відступи менші навмисно: ці секції йдуть
       одразу за коронною зоною, і просвіт між ними складається з двох -
       низу корони плюс верху секції. */
    .page-crown         { padding-block: var(--sect-y-sm) 3.4rem; }
    .terms-river        { padding-block: 2.2rem var(--sect-y); }
    .dream-article      { padding-block: 2.2rem var(--sect-y); }
    .constellation-zone { padding-block: var(--sect-y-sm) 0; }
    .journal-zone       { padding-block: 1.6rem var(--sect-y); }
}