/* ═══════════ Белый Олеандр — общие стили всех страниц ═══════════
   Палитра, шрифты, шапка, кнопки, секции, подвал. Стили отдельных
   разделов живут в <style> своей страницы. */

:root{
    --ink:        #101713;   /* ночь — зеленоватая темнота вердигри */
    --ink-2:      #151E19;   /* приподнятая поверхность на тёмном */
    --panel:      #19221D;
    --plate:      #F4EFE4;   /* костяная бумага */
    --plate-2:    #EBE4D6;   /* бумага на ступень глубже */
    --plate-ink:  #2A2620;
    --plate-mute: #5E574B;   /* второстепенный текст на бумаге, 6:1 */
    --brass:      #C0A062;   /* латунь на тёмном */
    --brass-ink:  #7A5F2C;   /* латунь, которую можно читать на бумаге, 5:1 */
    --leaf:       #7C9A83;
    --bloom:      #F2EDE4;

    --wrap: 1180px;
    --gut: clamp(18px, 4vw, 40px);
    --ease-out: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
    margin:0;background:var(--ink);color:var(--bloom);
    font-family:'Golos Text','Segoe UI',system-ui,sans-serif;
    font-size:17px;line-height:1.65;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
/* атрибут hidden сильнее любых display в стилях — иначе спрятанное продолжает занимать место */
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* зерно — тактильность бумаги и ночи, почти незаметно */
body::before{
    content:'';position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.05;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}

.eyebrow{
    display:block;font-size:11px;font-weight:500;letter-spacing:.24em;
    text-transform:uppercase;color:var(--leaf);margin-bottom:18px;
}
.sec-bone .eyebrow{color:var(--brass-ink)}

.display{font-family:'Prata',Georgia,serif;font-weight:400;margin:0;letter-spacing:-.005em;text-wrap:balance}
h1.display{font-size:clamp(40px,6.6vw,80px);line-height:1.02}
h2.display{font-size:clamp(32px,4.8vw,56px);line-height:1.06}

.lede{font-size:clamp(16px,1.6vw,18.5px);line-height:1.7;max-width:36em;margin:22px 0 0;color:rgba(242,237,228,.78)}
.sec-bone .lede{color:var(--plate-mute)}

/* ─────────── прогресс чтения ─────────── */

.progress{
    position:fixed;top:0;left:0;right:0;height:2px;z-index:60;
    background:var(--brass);transform-origin:0 50%;transform:scaleX(0);
}
@supports (animation-timeline: scroll()){
    .progress{animation:grow linear both;animation-timeline:scroll(root)}
}

/* ─────────── навигация — стекло поверх страницы ─────────── */

.nav{
    position:fixed;z-index:50;top:14px;left:50%;transform:translateX(-50%);
    width:min(calc(100% - 28px), 1120px);
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:10px 10px 10px 22px;
    background:rgba(16,23,19,.72);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
    border:1px solid rgba(192,160,98,.18);
    border-radius:999px;
}
/* логотип: цветок с иллюстрации + название каллиграфией (Great Vibes — копперплейт с кириллицей;
   шрифт подгружается только с буквами «Белый Олеандр» — другим текстом его не использовать) */
.nav-mark{
    display:flex;align-items:center;gap:10px;text-decoration:none;
    font-family:'Great Vibes','Prata',Georgia,serif;font-size:28px;line-height:1;
    letter-spacing:0;white-space:nowrap;color:var(--bloom);
}
.nav-mark img{width:34px;height:34px;flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
/* подзаголовок над названием — обычным шрифтом: каллиграфия загружена только с буквами названия */
/* подпись и название — единый знак: подпись по центру и разрядкой растянута ровно
   на ширину каллиграфии; отрицательный отступ справа съедает хвост разрядки
   после последней буквы, иначе подпись визуально съезжает влево */
.nav-mark-text{display:flex;flex-direction:column;align-items:center}
.nav-mark-text small{
    font-family:'Golos Text',system-ui,sans-serif;font-size:8.5px;font-weight:600;line-height:1;
    letter-spacing:.28em;margin:0 -.28em 4px 0;text-transform:uppercase;color:var(--brass);
}
.nav-mark-name{display:block;line-height:1}
.nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav-links a{
    text-decoration:none;font-size:13px;color:rgba(242,237,228,.72);
    transition:color .2s ease;
}
.nav-links a:hover{color:var(--brass)}
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    min-height:46px;padding:0 24px;border-radius:999px;cursor:pointer;
    font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.08em;
    text-decoration:none;border:1px solid transparent;
    transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn-brass{background:var(--brass);color:#141A12}
.btn-brass:hover{background:#D0B173}
.btn-line{border-color:rgba(192,160,98,.5);color:var(--bloom);background:transparent}
.btn-line:hover{border-color:var(--brass);color:var(--brass)}
.sec-bone .btn-line{color:var(--plate-ink);border-color:rgba(122,95,44,.45)}
.sec-bone .btn-line:hover{color:var(--brass-ink);border-color:var(--brass-ink)}
.btn svg{width:14px;height:14px}

@media (max-width:820px){ .nav-links{display:none} }
@media (max-width:420px){
    /* узкие телефоны (360 — частая ширина Android): знак, «Написать» и меню в одну строку */
    .nav{gap:8px;padding:8px 8px 8px 14px}
    .nav-mark{gap:7px;font-size:23px}
    .nav-mark img{width:30px;height:30px}
    .nav-mark-text small{font-size:7.5px;letter-spacing:.21em;margin:0 -.21em 3px 0}
    .nav .btn{min-height:44px;padding:0 14px;font-size:12px}
    .nav-end{gap:6px}
    .nav-burger{width:44px!important;height:44px!important}
}

/* ─────────── секции ─────────── */

.sec{padding-block:clamp(84px,12vw,150px);position:relative}
.sec-bone{background:var(--plate);color:var(--plate-ink)}
.sec-head{max-width:760px}

/* появление при скролле — нативно, без библиотек */
@supports (animation-timeline: view()){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 5% cover 28%}
}

/* ─────────── контакты ─────────── */

.cta{text-align:center;background:
        radial-gradient(50% 60% at 50% 100%, rgba(192,160,98,.12), rgba(192,160,98,0) 70%),
        var(--ink)}
.cta .lede{margin-inline:auto}
.channels{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.channels .btn{min-width:170px}

.foot{padding-block:40px 56px;border-top:1px solid rgba(192,160,98,.14);font-size:13px;color:rgba(242,237,228,.5)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 30px}
.foot a{color:rgba(242,237,228,.7);text-decoration:none}
.foot a:hover{color:var(--brass)}
.foot p{margin:18px 0 0;max-width:60em}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:16px}
.foot-legal a{color:rgba(242,237,228,.6);text-decoration:underline;text-decoration-color:rgba(242,237,228,.25);text-underline-offset:3px}
.foot-legal a:hover{color:var(--brass);text-decoration-color:var(--brass)}

/* ─────────── движение — только для тех, кто его не отключил ─────────── */

@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
    .reveal{opacity:1;transform:none}
}

/* ─────────── общие анимации ─────────── */

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ─────────── поле даты рождения (главная и «Матрицы») ─────────── */

.dob{margin-top:34px;max-width:470px}
.dob-label{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--leaf);margin-bottom:10px}
.dob-fields{display:grid;grid-template-columns:.8fr 1.35fr 1fr;gap:10px}
.dob select{
    width:100%;min-height:50px;appearance:none;-webkit-appearance:none;
    background:rgba(242,237,228,.03);color:var(--bloom);
    border:1px solid rgba(192,160,98,.32);border-radius:14px;
    font-family:inherit;font-size:16px;padding:0 30px 0 14px;cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23C0A062' stroke-width='1.3'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;background-size:10px 6px;
    transition:border-color .2s ease;
}
.dob select:hover{border-color:var(--brass)}
.dob select option{background:var(--plate);color:var(--plate-ink)}
.dob-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.dob-actions .btn{flex:1 1 auto}
.hint{min-height:20px;margin:10px 0 0;font-size:13px;color:var(--leaf)}
.text-btn{
    background:none;border:0;padding:6px 0;cursor:pointer;font-family:inherit;
    font-size:13px;color:var(--leaf);border-bottom:1px solid rgba(124,154,131,.4);
    margin-top:18px;
}
.text-btn:hover{color:var(--brass);border-color:var(--brass)}

/* ─────────── шапка: текущая страница и мобильное меню ─────────── */

.nav-links a[aria-current="page"]{color:var(--brass)}
.nav-end{display:flex;align-items:center;gap:8px}
.nav-burger{display:none}

@media (max-width:820px){
    .nav-burger{
        display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
        width:46px;height:46px;flex:none;padding:0;cursor:pointer;
        background:transparent;border:1px solid rgba(192,160,98,.45);border-radius:50%;
    }
    .nav-burger span{display:block;width:18px;height:1.5px;background:var(--bloom);transition:transform .25s var(--ease-out)}
    .nav.open .nav-burger span:first-child{transform:translateY(3.75px) rotate(45deg)}
    .nav.open .nav-burger span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

    /* раскрытое меню — панель под шапкой, строки под палец */
    .nav.open .nav-links{
        display:flex;flex-direction:column;gap:2px;
        position:absolute;top:calc(100% + 8px);left:0;right:0;padding:8px;
        background:rgba(16,23,19,.97);border:1px solid rgba(192,160,98,.22);border-radius:24px;
        box-shadow:0 26px 50px -20px rgba(0,0,0,.75);
    }
    .nav.open .nav-links a{
        display:flex;align-items:center;min-height:52px;padding:0 18px;border-radius:16px;
        font-size:16px;color:var(--bloom);
    }
    .nav.open .nav-links a:hover,
    .nav.open .nav-links a[aria-current="page"]{background:rgba(192,160,98,.09);color:var(--brass)}
}
@media (max-width:350px){
    /* совсем узко (старые iPhone SE) — остаётся только знак без подписи */
    .nav-mark{gap:0}
    .nav-mark-text{display:none}
    .nav-mark img{width:34px;height:34px}
}

/* ─────────── значки соцсетей ─────────── */

.ico{display:inline-flex;flex:none;width:18px;height:18px}
.ico svg{display:block;width:100%;height:100%}
.btn .ico{margin-left:-4px}

/* ряд круглых значков-ссылок — подвал и мобильное меню */
.socials{display:flex;align-items:center;gap:10px}
.socials a{
    display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
    border:1px solid rgba(192,160,98,.35);color:rgba(242,237,228,.82);text-decoration:none;
    transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.socials a:hover{color:#141A12;background:var(--brass);border-color:var(--brass)}
.socials .ico{width:19px;height:19px}

/* в шапке на десктопе ряда нет — он появляется в раскрытом мобильном меню */
.nav-social{display:none}
@media (max-width:820px){
    .nav.open .nav-links .nav-social{
        display:flex;gap:10px;margin:6px 0 2px;padding:14px 10px 6px;
        border-top:1px solid rgba(192,160,98,.18);
    }
    .nav.open .nav-links .nav-social a{
        min-height:0;width:48px;height:48px;padding:0;justify-content:center;border-radius:50%;
        border:1px solid rgba(192,160,98,.35);background:none;color:var(--bloom);
    }
    .nav.open .nav-links .nav-social a:hover{background:var(--brass);color:#141A12}
}
.foot-row .socials{margin-left:auto}