/* ===========================================================
   amkostiuk.de — app.css
   Единая дизайн-система нового сайта (Anna-Mariia Kostiuk)
   Стиль: тёплый пергамент + золото + роза, dark-academia / modern.
   Один файл на все страницы. Мобильный = app-вид (нижнее меню),
   десктоп = современный сайт (верхнее меню).
   =========================================================== */
:root{
  --rose:#a85565;--rose-l:#c07a87;--rose-bg:#f6e9ea;
  --gold:#b8943e;--gold-l:#d4b05a;--gold-p:#e8d08a;
  --wood:#3a2a1c;--ink:#140d08;
  --bg:#faf3e8;--cream:#fdf8ee;--parch:#f3e7d3;
  --text:#2a1e14;--text-m:#5a4a3a;--text-d:#8a7a68;--text-f:#a89888;
  --border:#e6d8c4;--border-h:#d8c4a8;
  --fancy:'Cinzel Decorative',serif;--disp:'Cinzel',serif;
  --serif:'Cormorant',Georgia,serif;--body:'EB Garamond',Georgia,serif;
  --tab-h:64px;
  --safe:env(safe-area-inset-bottom,0px);
  --tabbar-h:58px;
  --tabbar-gap:10px;
  color-scheme:only light;            /* фиксируем светлый вид: тёмный режим телефона НЕ перекрашивает */
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:72px;font-size:106.25%;background:#faf3e8}
/* фон — ГРАДИЕНТОМ (для браузера это «изображение»): авто-тёмный режим его НЕ перекрашивает */
body{font-family:var(--body);background:#faf3e8 linear-gradient(180deg,#fdf8ee 0,#faf3e8 38%);color:var(--text);line-height:1.5;min-height:100dvh;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:920px;margin:0 auto;padding:0 18px}
.rdr{max-width:680px;margin:0 auto;padding:0 18px}

/* ===== Header ===== */
.hd{position:sticky;top:0;z-index:40;background:rgba(253,248,238,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(58,42,28,.08)}
.hd .in{max-width:920px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:11px 18px}
.hd .lg{width:38px;height:38px;border-radius:50%;background:#0e0a07;flex:0 0 auto}
.hd .lg img{width:100%;height:100%;border-radius:50%}
.hd .nm{flex:1;font-family:var(--serif);font-size:1.16rem;font-weight:500;color:var(--text)}
.hd .nm b{color:var(--rose);font-weight:600}
.hd nav{display:flex;gap:22px;align-items:center}
.hd nav a{font-family:var(--disp);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-d);transition:color .2s}
.hd nav a:hover{color:var(--rose)}
.hd .nl{font-family:var(--disp);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--gold);border-radius:7px;padding:.5rem .95rem}
@media(max-width:760px){.hd nav{display:none}.hd .nm{flex:1;text-align:center}}

/* ===== Buttons / dividers ===== */
.btn{display:inline-block;font-family:var(--disp);font-size:.7rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  border-radius:9px;padding:.85rem 1.5rem;transition:transform .25s,box-shadow .25s;cursor:pointer;border:none}
.btn.g{color:#fff;background:linear-gradient(135deg,var(--gold-l),var(--gold));box-shadow:0 6px 18px rgba(184,148,62,.28)}
.btn.o{color:var(--text);background:transparent;border:1px solid var(--border-h)}
.btn:hover{transform:translateY(-2px)}
.divider{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 0}
.divider i{height:1px;width:54px;background:linear-gradient(90deg,transparent,var(--border-h))}
.divider i+i{background:linear-gradient(90deg,var(--border-h),transparent)}
.divider b{width:5px;height:5px;border-radius:50%;background:var(--gold-l)}

/* ===== Hero (Startseite) ===== */
.hero{position:relative;overflow:hidden;text-align:center;padding:46px 18px 30px}
.hero .bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 18%,#fff7e6,transparent 60%);z-index:0}
#parts{position:absolute;inset:0;z-index:1;pointer-events:none}
#parts span{position:absolute;border-radius:50%;background:var(--gold-l);opacity:.4;animation:fl linear infinite}
@keyframes fl{0%{transform:translateY(0)}100%{transform:translateY(-120px)}}
.hero .ct{position:relative;z-index:2;max-width:640px;margin:0 auto}
.hero .portrait{width:150px;height:150px;border-radius:50%;object-fit:cover;margin:0 auto 20px;border:3px solid var(--cream);box-shadow:0 10px 30px rgba(58,42,28,.18)}
.hero .lbl{font-family:var(--disp);font-size:.64rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.hero h1{font-family:var(--fancy);font-size:clamp(2rem,7vw,2.9rem);line-height:1.08;margin-bottom:14px;background:linear-gradient(135deg,#3a2a1c 30%,#a8763a);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero .sub{font-family:var(--serif);font-size:clamp(1.05rem,3.4vw,1.3rem);font-style:italic;color:var(--text-m);margin-bottom:24px}
.hero .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ===== Section frame ===== */
.sec{padding:38px 0 8px}
.sec .head{text-align:center;margin-bottom:24px}
.sec .lab{font-family:var(--disp);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.sec .tt{font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--text)}

/* ===== Featured ===== */
.feat{display:flex;gap:20px;background:linear-gradient(135deg,var(--cream),#f7eedd);border:1px solid var(--border);border-radius:20px;overflow:hidden;padding:18px;align-items:center;box-shadow:0 14px 40px rgba(58,42,28,.08)}
.feat .cov{width:140px;flex:0 0 auto;border-radius:10px;background:#140d08;aspect-ratio:1/1;object-fit:contain;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.feat .bd{flex:1;min-width:0}
.feat .nw{font-family:var(--disp);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);margin-bottom:7px}
.feat h3{font-family:var(--serif);font-size:1.55rem;font-weight:600;color:var(--text);margin-bottom:6px}
.feat p{font-family:var(--body);font-size:1rem;color:var(--text-m);margin-bottom:12px}
.feat .pr{font-family:var(--disp);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
@media(max-width:560px){.feat{flex-direction:column;text-align:center}.feat .cov{width:160px}}

/* ===== Bücher grid ===== */
.books{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -18px;padding:2px 18px 12px}
.books::-webkit-scrollbar{display:none}
.book{scroll-snap-align:start;flex:0 0 60%}
@media(min-width:680px){.book{flex-basis:31%}}
.book{background:var(--cream);border:1px solid var(--border);border-radius:15px;overflow:hidden;transition:transform .25s,box-shadow .25s;display:block}
.book:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(58,42,28,.1)}
.book .c{aspect-ratio:2/3;background:#140d08 center/cover;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px}
.book .badge{font-family:var(--disp);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:.9}
.book .i{padding:13px 13px 16px}
.book .ct{font-family:var(--disp);font-size:.54rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-d);margin-bottom:5px}
.book h4{font-family:var(--serif);font-size:1.18rem;font-weight:600;color:var(--text);margin-bottom:6px;line-height:1.2}
.book .st{font-family:var(--disp);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;border-radius:20px;padding:.2rem .6rem;display:inline-block}
.st.live{color:#fff;background:var(--gold)}.st.soon{color:var(--gold);border:1px solid var(--gold-l)}.st.price{color:var(--rose);border:1px solid var(--rose-l)}

/* ===== Aktuelles feed ===== */
.feed{display:flex;flex-direction:column;gap:11px}
.fcard{display:flex;gap:14px;align-items:center;background:var(--cream);border:1px solid var(--border);border-radius:14px;padding:11px;transition:transform .2s}
.fcard:hover{transform:translateX(3px)}
.fcard .th{width:74px;height:74px;border-radius:10px;flex:0 0 auto;background:#ddd center/cover}
.fcard .x{flex:1;min-width:0}
.fcard .dt{font-family:var(--disp);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.fcard h4{font-family:var(--serif);font-size:1.08rem;font-weight:500;color:var(--text);line-height:1.3}

/* ===== Medien ===== */
.media{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.media{grid-template-columns:1fr}}
.mcard{border-radius:18px;overflow:hidden;color:#f0e6d4;padding:22px;min-height:170px;display:flex;flex-direction:column;justify-content:flex-end}
.mcard.film{background:linear-gradient(160deg,#241a10,#0c0805)}
.mcard.song{background:linear-gradient(160deg,#1c2438,#0a0d16)}
.mcard .k{font-family:var(--disp);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-p);margin-bottom:8px}
.mcard h3{font-family:var(--serif);font-size:1.4rem;font-weight:600;margin-bottom:6px}
.mcard p{font-family:var(--body);font-size:.96rem;color:#cdbfa8;margin-bottom:14px}
.mcard .ml{font-family:var(--disp);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;border:1px solid rgba(232,208,138,.5);border-radius:30px;padding:.45rem 1rem;align-self:flex-start}

/* ===== Über ===== */
.about{max-width:680px;margin:0 auto}
.about p{font-family:var(--body);font-size:1.04rem;font-style:italic;color:var(--text-m);line-height:1.85;margin-bottom:14px}
.about .fam{width:100%;border-radius:16px;margin:8px 0 6px;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.about .cap{text-align:center;font-size:.82rem;color:var(--text-d);font-style:italic;margin-bottom:10px}

/* ===== Panels (Newsletter/Kontakt) ===== */
.panel{max-width:520px;margin:0 auto;text-align:center}
.fin{width:100%;font-family:var(--body);font-size:1rem;border:1px solid var(--border-h);border-radius:10px;background:var(--cream);padding:.85rem .95rem;color:var(--text);margin-bottom:10px}
textarea.fin{min-height:120px;resize:vertical}
.row2{display:flex;gap:10px}@media(max-width:480px){.row2{flex-direction:column}}

/* ===== Artikel (Presse/Blog) ===== */
.art-top{text-align:center;padding:34px 0 20px}
.art-top .cat{font-family:var(--disp);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.art-top h1{font-family:var(--serif);font-size:clamp(1.7rem,5vw,2.3rem);font-weight:600;line-height:1.2;color:var(--text);margin-bottom:12px}
.art-top .meta{font-family:var(--disp);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-d)}
.art-hero{width:100%;border-radius:16px;margin:0 0 26px;box-shadow:0 12px 36px rgba(58,42,28,.14)}
.art-body{font-family:var(--body)}
.art-body p{font-size:1.08rem;line-height:1.85;color:var(--text);margin-bottom:17px}
.art-body p.lead{font-size:1.22rem;line-height:1.7;color:var(--text-m)}

.art-body h2{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--text);margin:28px 0 10px}
.art-body .quote{font-family:var(--serif);font-size:1.35rem;font-style:italic;color:var(--rose);
  border-left:3px solid var(--gold-l);padding:6px 0 6px 18px;margin:22px 0}
.art-body a.inl{color:var(--rose);border-bottom:1px solid var(--rose-l)}
.art-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:30px 0 6px;
  border-top:1px solid var(--border);padding-top:18px}
.art-nav a{font-family:var(--disp);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-d)}
.art-nav a:hover{color:var(--rose)}

/* ===== Footer ===== */
.ft{background:#241a12;color:#cdbfa8;text-align:center;padding:34px 18px;margin-top:30px}
.ft .fl{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.ft .fl a{font-family:var(--disp);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#bfae8e}
.ft .so{display:flex;gap:10px;justify-content:center;margin:14px 0}
.ft .so a{width:36px;height:36px;border-radius:50%;border:1px solid #4a3a28;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:.6rem;color:#cdbfa8}
.ft .cp{font-size:.82rem;color:#8f7e62;margin-top:8px}
@media(max-width:760px){body{padding-bottom:calc(var(--safe) + var(--tabbar-gap) + var(--tabbar-h) + 18px)}}

/* ===== Bottom Tab Bar (mobile) ===== */
.tabbar{position:fixed;left:12px;right:12px;bottom:calc(var(--safe) + var(--tabbar-gap));z-index:50;display:none;justify-content:space-around;align-items:center;height:var(--tabbar-h);background:rgba(253,248,238,.72);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);border:1px solid rgba(255,255,255,.55);box-shadow:0 10px 34px rgba(58,42,28,.18);border-radius:22px;padding:0 6px}
@media(max-width:760px){.tabbar{display:flex}}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:3px 0;color:var(--text-d);transition:color .25s}
.tab.on{color:var(--gold)}
.tab span{font-family:var(--disp);font-size:.5rem;letter-spacing:.05em;text-transform:uppercase}
.tab svg{transition:transform .25s}.tab.on svg{transform:translateY(-2px) scale(1.06)}

/* ===== Совместимость: контент старых статей (.article-body) в новом виде ===== */
.article-body{font-family:var(--body)}
.article-body>p:first-of-type{font-size:1.16rem;color:var(--text-m)}
.article-body p{font-size:1.08rem;line-height:1.85;color:var(--text);margin-bottom:17px}
.article-body h2{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--text);margin:28px 0 10px}
.article-body h3{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--text);margin:22px 0 8px}
.article-body img{border-radius:14px;margin:18px 0;box-shadow:0 6px 24px rgba(0,0,0,.08)}
.article-body a{color:var(--rose);border-bottom:1px solid var(--rose-l)}
.article-body ul,.article-body ol{margin:0 0 17px 1.25em}
.article-body li{font-size:1.06rem;line-height:1.7;margin-bottom:6px}
.article-body blockquote{font-family:var(--serif);font-size:1.3rem;font-style:italic;color:var(--rose);border-left:3px solid var(--gold-l);padding-left:18px;margin:22px 0}


/* ===== Меню сверху-справа (бургер) — для привычной верхней навигации ===== */
.hd .burger{display:none;flex-direction:column;justify-content:center;gap:6px;width:34px;height:34px;border:none;background:transparent;cursor:pointer;flex:0 0 auto;padding:0}
.hd .burger span{display:block;width:22px;height:2px;background:var(--text-d);transition:.3s;border-radius:2px}
.hd .burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hd .burger.open span:nth-child(2){opacity:0}
.hd .burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(max-width:760px){.hd .burger{display:flex}}
.hd-menu{position:absolute;top:100%;left:0;right:0;z-index:210;max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1);background:rgba(253,248,238,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 16px 32px rgba(58,42,28,.16)}
.hd-menu.open{max-height:360px;border-bottom:1px solid var(--border)}
.hd-menu a{display:block;padding:14px 22px;font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-m);border-top:1px solid var(--border);text-decoration:none}
.hd-menu a:first-child{border-top:none}
@media(min-width:761px){.hd-menu{display:none}}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hd{background:rgba(253,248,238,.97)}.hd-menu{background:rgba(253,248,238,.98)}.tabbar{background:rgba(253,248,238,.97)}}
html{scroll-behavior:smooth}

/* ============================================================
   ТЁМНАЯ ТЕМА (весь сайт) — class="theme-dark" на <html>
   ============================================================ */
html.theme-dark{background:#100d09;color-scheme:dark}
.theme-dark body{background:#100d09 radial-gradient(130% 70% at 50% 0%,#1d1710 0%,#100d09 52%);color:#ece3d2}
/* Header */
.theme-dark .hd{background:rgba(18,14,9,.6);border-bottom:1px solid rgba(232,208,138,.1)}
.theme-dark .hd .nm{color:#f0e6d4}
.theme-dark .hd .nm b{color:var(--rose-l)}
.theme-dark .hd nav a{color:rgba(240,230,212,.8)}
.theme-dark .hd nav a:hover{color:var(--gold-p)}
.theme-dark .hd .nl{background:rgba(232,208,138,.16);color:#f0e6d4;border:1px solid rgba(232,208,138,.35)}
.theme-dark .hd .burger span{background:#f0e6d4}
.theme-dark .hd-menu{background:rgba(16,12,8,.94);box-shadow:0 16px 32px rgba(0,0,0,.5)}
.theme-dark .hd-menu a{color:rgba(240,230,212,.85);border-top-color:rgba(232,208,138,.1)}
/* Tabbar */
.theme-dark .tabbar{background:rgba(18,14,9,.62);border:1px solid rgba(232,208,138,.14);box-shadow:0 12px 38px rgba(0,0,0,.55)}
.theme-dark .tab{color:#a89a82}
.theme-dark .tab.on{color:var(--gold-p)}
/* Footer */
.theme-dark .ft{background:#0b0906;border-top:1px solid rgba(232,208,138,.08)}
/* Buttons / divider */
.theme-dark .btn.o{color:#ece3d2;border-color:rgba(232,208,138,.3)}
.theme-dark .divider i{background:linear-gradient(90deg,transparent,rgba(232,208,138,.3))}
.theme-dark .divider i+i{background:linear-gradient(90deg,rgba(232,208,138,.3),transparent)}
/* Hero (Startseite) */
.theme-dark .hero .bg{background:radial-gradient(circle at 50% 16%,rgba(184,148,62,.18),transparent 60%)}
.theme-dark .hero .portrait{border-color:rgba(232,208,138,.25);box-shadow:0 10px 34px rgba(0,0,0,.5)}
.theme-dark .hero .lbl{color:var(--gold-p)}
.theme-dark .hero h1{background:linear-gradient(135deg,#f2e2aa,#cf94a0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.theme-dark .hero .sub{color:#cabd9f}
/* Section */
.theme-dark .sec .lab{color:var(--gold-p)}
.theme-dark .sec .tt{color:#f0e6d4}
/* Featured */
.theme-dark .feat{background:linear-gradient(135deg,#1a1510,#14100b);border:1px solid rgba(232,208,138,.14);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.theme-dark .feat h3{color:#f0e6d4}
.theme-dark .feat p{color:#c2b59c}
.theme-dark .feat .nw{color:var(--rose-l)}
.theme-dark .feat .pr{color:var(--gold-p)}
/* Bücher grid */
.theme-dark .book{background:rgba(255,255,255,.04);border:1px solid rgba(232,208,138,.13)}
.theme-dark .book:hover{box-shadow:0 14px 30px rgba(0,0,0,.5)}
.theme-dark .book .ct{color:#a89a82}
.theme-dark .book h4{color:#f0e6d4}
.theme-dark .st.soon{color:var(--gold-p);border-color:rgba(212,176,90,.5)}
.theme-dark .st.price{color:var(--rose-l);border-color:rgba(192,122,135,.5)}
/* Feed */
.theme-dark .fcard{background:rgba(255,255,255,.04);border:1px solid rgba(232,208,138,.13)}
.theme-dark .fcard:hover{transform:translateX(3px)}
.theme-dark .fcard .dt{color:var(--gold-p)}
.theme-dark .fcard h4{color:#f0e6d4}
/* About */
.theme-dark .about p{color:#cabd9f}
.theme-dark .about .cap{color:#9a8c74}
/* Panels */
.theme-dark .fin{background:rgba(255,255,255,.06);border:1px solid rgba(232,208,138,.25);color:#fff}
.theme-dark .fin::placeholder{color:#9a8c74}
/* Artikel */
.theme-dark .art-top .cat{color:var(--gold-p)}
.theme-dark .art-top h1{color:#f0e6d4}
.theme-dark .art-top .meta{color:#a89a82}
.theme-dark .art-hero{box-shadow:0 16px 44px rgba(0,0,0,.5)}
.theme-dark .art-body p{color:#d8ccb4}
.theme-dark .art-body p.lead{color:#cabd9f}
.theme-dark .art-body h2{color:#f0e6d4}
.theme-dark .art-body .quote{color:var(--rose-l);border-left-color:var(--gold-l)}
.theme-dark .art-body a.inl{color:var(--gold-p);border-bottom-color:rgba(232,208,138,.4)}
.theme-dark .art-nav{border-top-color:rgba(232,208,138,.12)}
.theme-dark .art-nav a{color:#a89a82}
.theme-dark .art-nav a:hover{color:var(--gold-p)}

/* ============ Cookie-Consent (DSGVO) ============ */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:300;padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
.cc-in{max-width:680px;margin:0 auto;background:rgba(20,15,10,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(232,208,138,.22);border-radius:18px;padding:18px 20px;box-shadow:0 16px 44px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:14px}
@media(min-width:640px){.cc-in{flex-direction:row;align-items:center;justify-content:space-between;gap:20px}}
.cc-txt{font-family:var(--body);font-size:.92rem;line-height:1.5;color:#cabd9f;margin:0}
.cc-txt a{color:var(--gold-p);text-decoration:underline}
.cc-btns{display:flex;gap:9px;flex-shrink:0}
.cc-no{background:transparent;border:1px solid rgba(232,208,138,.3);color:#cdbf9c;font-family:var(--disp);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.72rem 1.1rem;border-radius:30px;cursor:pointer;transition:.2s;white-space:nowrap}
.cc-no:hover{background:rgba(232,208,138,.08)}
.cc-yes{background:linear-gradient(135deg,var(--gold-l),var(--gold));border:none;color:#16110d;font-family:var(--disp);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.72rem 1.3rem;border-radius:30px;cursor:pointer;transition:.2s;white-space:nowrap}
.cc-yes:hover{transform:translateY(-1px)}

/* ============ Fix: .article-body (старые статьи) в тёмной теме ============ */
.theme-dark .article-body p{color:#d8ccb4}
.theme-dark .article-body>p:first-of-type{color:#cabd9f}
.theme-dark .article-body h2{color:#f0e6d4}
.theme-dark .article-body h3{color:#ecdcb8}
.theme-dark .article-body h4{color:#e4d4b0}
.theme-dark .article-body li{color:#cdc0a4}
.theme-dark .article-body strong,.theme-dark .article-body b{color:#f0e6d4}
.theme-dark .article-body a{color:var(--gold-p);border-bottom-color:rgba(232,208,138,.4)}
.theme-dark .article-body a:hover{color:var(--gold-l)}
.theme-dark .article-body blockquote{color:var(--rose-l);border-left-color:var(--gold-l)}
.theme-dark .article-body hr{border-color:rgba(232,208,138,.14)}
.theme-dark .article-body table{border-color:rgba(232,208,138,.16)}
.theme-dark .article-body th,.theme-dark .article-body td{border-color:rgba(232,208,138,.12);color:#d8ccb4}

/* ===== App-like: бургер скрыт на мобиле, Mehr = bottom-sheet ===== */
.hd .burger{display:none!important}
.more-sheet{position:fixed;inset:0;z-index:2500;display:none}
.more-sheet.open{display:block}
.more-backdrop{position:absolute;inset:0;background:rgba(8,6,4,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.more-panel{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#1c1711,#13100b);border-top:1px solid rgba(232,208,138,.2);border-radius:22px 22px 0 0;padding:12px 0 calc(28px + env(safe-area-inset-bottom));box-shadow:0 -12px 44px rgba(0,0,0,.6);animation:moreUp .46s cubic-bezier(.32,.72,0,1)}
@keyframes moreUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.more-handle{width:42px;height:4px;background:rgba(232,208,138,.3);border-radius:2px;margin:0 auto 12px}
.more-panel a{display:flex;align-items:center;gap:13px;padding:17px 30px;color:#ece3d2;font-family:var(--disp);font-size:.92rem;letter-spacing:.05em;text-decoration:none;border-bottom:1px solid rgba(232,208,138,.07)}
.more-panel a:last-child{border-bottom:none}
.more-panel a:active{background:rgba(232,208,138,.09)}
.more-panel a svg{flex:0 0 auto;opacity:.65}
@media(min-width:761px){.more-sheet{display:none!important}}


/* ===== Плавные переходы между страницами ===== */
@view-transition{navigation:auto}
::view-transition-old(root){animation-duration:.42s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
::view-transition-new(root){animation-duration:.42s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ===== Плавное появление модальных окон ===== */
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalPop{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:translateY(0)}}
.about-modal.open .about-backdrop,.st-modal.open .st-backdrop{animation:modalFade .42s ease}
.about-modal.open .about-dialog,.st-modal.open .st-dialog{animation:modalPop .5s cubic-bezier(.32,.72,0,1)}
@media(prefers-reduced-motion:reduce){.about-modal.open .about-dialog,.st-modal.open .st-dialog,.about-modal.open .about-backdrop,.st-modal.open .st-backdrop{animation:none}}


/* language switcher (added 2026-07-06) */
.hd .lang{display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;flex:0 0 auto;margin-left:2px}
.hd .lang a{color:var(--text-d);opacity:.55;transition:opacity .2s,color .2s;cursor:pointer;text-decoration:none}
.hd .lang a:hover{color:var(--rose);opacity:1}
.hd .lang a.on{color:var(--gold);opacity:1;pointer-events:none}
.hd .lang i{display:inline-block;width:1px;height:10px;background:var(--text-d);opacity:.28}
.theme-dark .hd .lang a{color:rgba(240,230,212,.72)}
.theme-dark .hd .lang a:hover{color:var(--gold-p)}
.theme-dark .hd .lang a.on{color:var(--gold-p)}
.theme-dark .hd .lang i{background:rgba(240,230,212,.42)}
@media(max-width:760px){.hd .lang{display:inline-flex;font-size:.72rem;gap:8px;margin:0 2px 0 0}.hd .lang a{padding:6px 3px}.hd .lang i{height:12px}}