/* Версия 3: спокойная современная подача. Приглушённая палитра (графит, хвоя, шалфей, песок, кирпич),
   плавающее меню и плеер, крупные скруглённые панели, тонкие линии. Цвета и шрифты меняются здесь. */
:root{
  --bg:#f4f3ef; --fg:#1d2428; --soft:#eae9e3; --muted:#5e676b; --line:rgba(29,36,40,.14); --paper:#ffffff;
  --deep:#24373b; --accent:#a9564d; --sand:#e8dfd0; --sage:#c5d3c0; --mist:#d3dde0; --rose:#e3c9bd; --straw:#e6d5ae;
  --f-ui:'Onest','Segoe UI',system-ui,sans-serif;
  --f-read:'Literata','Georgia',serif;
  --player-h:0px; --hero-img:none;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#111719;--fg:#ecebe5;--soft:#1a2326;--muted:#a3adb0;--line:rgba(236,235,229,.16);--paper:#1a2326;--deep:#1b2b2f;--sand:#232d2c;--sage:#2a3a35;--mist:#243137;--rose:#34282a;--straw:#33301f;--accent:#d98a7f;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#111719;--fg:#ecebe5;--soft:#1a2326;--muted:#a3adb0;--line:rgba(236,235,229,.16);--paper:#1a2326;--deep:#1b2b2f;--sand:#232d2c;--sage:#2a3a35;--mist:#243137;--rose:#34282a;--straw:#33301f;--accent:#d98a7f;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--f-ui);padding-bottom:var(--player-h);-webkit-font-smoothing:antialiased}
body.has-player{--player-h:calc(104px + env(safe-area-inset-bottom,0px))}
img,svg{max-width:100%}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;color:#000;padding:8px;z-index:99}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

h1,h2,h3{font-family:var(--f-ui);font-weight:600;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,6vw,76px);letter-spacing:-.035em}
h2{font-size:clamp(28px,3.4vw,42px);letter-spacing:-.025em}
h3{font-size:20px;line-height:1.25;letter-spacing:-.01em}
.kicker{font:500 12.5px/1 var(--f-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.desc{color:var(--muted);font-size:15px;margin:0}
.lead{font:400 20px/1.55 var(--f-read);margin:0}

/* ===== Шапка: плавающая капсула ===== */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;padding:12px 12px 0}
.bar{display:flex;align-items:center;gap:24px;height:60px;max-width:1180px;margin:0 auto;padding-inline:14px 12px;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:999px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-t{font:600 19px var(--f-ui);letter-spacing:-.02em}
.mark{display:block;width:34px;height:34px;border-radius:50%;overflow:hidden}
.mark svg{display:block;width:100%;height:100%}
.nav{display:flex;align-items:center;gap:22px;margin-left:auto}
.nav a,.dd-btn,.icon-btn{font:500 15px/1 var(--f-ui);text-decoration:none;background:none;border:0;color:var(--fg);cursor:pointer;padding:10px 0;display:flex;align-items:center;gap:6px}
.nav a:hover,.dd-btn:hover{color:var(--accent)}
.nav [data-nav].on{color:var(--accent)}
.btn-contact{background:var(--fg)!important;color:var(--bg)!important;padding:11px 20px!important;border-radius:999px;font-weight:500!important}
.btn-contact:hover{background:var(--accent)!important;color:#fff!important}
.chev{width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.dd{position:relative}
.dd-menu{position:absolute;top:100%;left:-14px;min-width:210px;background:var(--paper);color:var(--fg);border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:0 18px 40px rgba(20,30,34,.14);display:none;margin-top:4px}
.dd.lang .dd-menu{left:auto;right:-6px}
.dd.open .dd-menu{display:block}
.dd-menu a,.dd-menu button{display:block;width:100%;text-align:left;padding:10px 14px!important;border-radius:12px;font:500 15px var(--f-ui);background:none;border:0;cursor:pointer;color:var(--fg);text-decoration:none}
.dd-menu a:hover,.dd-menu button:hover{background:var(--soft);color:var(--fg)}
.only-mobile{display:none}
.burger{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--fg);margin:5px auto;border-radius:2px}

/* ===== Кнопки ===== */
.btn{display:inline-flex;align-items:center;gap:8px;font:500 15px/1 var(--f-ui);padding:15px 24px;border-radius:999px;border:1px solid currentColor;background:none;color:inherit;cursor:pointer;text-decoration:none;transition:background .2s,color .2s}
.btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.red{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.red:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn-small{font:500 14px var(--f-ui);padding:9px 16px;border:1px solid var(--line);background:var(--paper);border-radius:999px;cursor:pointer;color:var(--fg);display:inline-flex;gap:6px;align-items:center;transition:background .2s,color .2s}
.btn-small:hover,.btn-small.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* ===== Панели ===== */
.band{position:relative;overflow:hidden}
.band-blue{background:var(--deep);color:#eef0ea}
.band-gold{background:var(--sand);color:var(--fg)}
.band-red{background:var(--deep);color:#eef0ea}
.band-ink{background:var(--bg);color:var(--fg)}
.section{padding-block:72px}
.section.soft{background:var(--soft)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:32px;flex-wrap:wrap}
.strip{display:none}

/* ===== Главная ===== */
.band.hero{margin:12px 12px 0;border-radius:36px;padding-block:76px 84px;background:radial-gradient(circle at 88% 8%,rgba(197,211,192,.22),transparent 46%),radial-gradient(circle at 5% 110%,rgba(201,161,90,.16),transparent 45%),var(--hero-img) center/cover,var(--deep)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.hero h1{margin:18px 0 22px;color:#f4f3ec}
.hero .kicker{color:var(--sage)}
.hero p.lead{max-width:500px;color:#cdd6d2}
.hero .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero .btn{color:#f4f3ec}
.hero .btn.solid{background:#f4f3ec;color:#1d2428;border-color:#f4f3ec}
.hero .btn.solid:hover{background:var(--sage);border-color:var(--sage);color:#1d2428}
.hero .btn:not(.solid):hover{background:#f4f3ec;color:#1d2428;border-color:#f4f3ec}

.week{background:var(--paper);color:var(--fg);border-radius:28px;padding:12px 12px 22px;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.week .cv{aspect-ratio:16/10;border-radius:18px;overflow:hidden}
.week .cv svg{display:block;width:100%;height:100%}
.week .body{padding:20px 12px 0}
.week .kicker{color:var(--accent)}
.week h3{margin:10px 0 8px;font-size:26px;letter-spacing:-.02em}
.week q{display:block;font:italic 400 17px/1.45 var(--f-read);color:var(--muted);quotes:none;margin-bottom:18px}

/* ===== Темы ===== */
.topics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.topic{display:flex;flex-direction:column;justify-content:flex-end;min-height:200px;border-radius:26px;padding:22px;text-decoration:none;position:relative;overflow:hidden;transition:transform .25s;color:#1d2428}
.topic .cv{position:absolute;right:18px;top:18px;width:74px;height:74px;border-radius:50%;overflow:hidden}
.topic .cv svg{display:block;width:100%;height:100%}
.topic b{font:600 23px/1.1 var(--f-ui);letter-spacing:-.02em;position:relative;z-index:1}
.topic span.n{font-size:14px;position:relative;margin-top:6px;opacity:.7}
.topic:hover{transform:translateY(-4px)}
.t-red{background:var(--rose)}.t-gold{background:var(--straw)}.t-blue{background:var(--mist)}.t-ink{background:var(--sage)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .topic{color:var(--fg)}}
:root[data-theme="dark"] .topic{color:var(--fg)}

/* ===== Список сказок ===== */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.tale{display:grid;grid-template-columns:104px 1fr;gap:20px;padding-block:24px;border-top:1px solid var(--line)}
.tale .cv{width:104px;height:104px;border-radius:20px;overflow:hidden;display:block}
.tale .cv svg{display:block;width:100%;height:100%}
.tale h3 a{text-decoration:none}.tale h3 a:hover{color:var(--accent)}
.tale p{margin:6px 0 14px}
.tale .meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.time{font:500 14px var(--f-ui);color:var(--muted);font-variant-numeric:tabular-nums}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.tag{font:500 12px var(--f-ui);padding:4px 11px;border-radius:999px;background:var(--soft);color:var(--muted);text-decoration:none}
.tag:hover{color:var(--fg)}
.soft .tag{background:var(--bg)}

/* ===== Шапки разделов ===== */
.band-blue.page-hero{background:none;color:var(--fg);padding-block:84px 8px}
.page-hero>.wrap{position:relative;z-index:1}
.page-hero h1{margin-top:14px}
.page-hero p{max-width:620px;font:400 21px/1.55 var(--f-read);margin:18px 0 0;color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.chip{padding:10px 18px;border:1px solid var(--line);border-radius:999px;font:500 15px var(--f-ui);text-decoration:none;background:var(--paper)}
.chip.on,.chip:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* ===== Страница сказки ===== */
.band.tale-top{margin:12px 12px 0;border-radius:36px;padding-block:64px}
.tale-top .grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:center}
.tale-top h1{margin:14px 0 18px}
.tale-top .kicker{color:inherit;opacity:.7}
.tale-top q{display:block;font:italic 400 23px/1.4 var(--f-read);quotes:none;margin-bottom:22px;opacity:.9}
.tale-top .tag{background:rgba(255,255,255,.25);color:inherit}
.tale-top .cv{border-radius:28px;overflow:hidden;aspect-ratio:1;box-shadow:0 24px 50px rgba(0,0,0,.18)}
.tale-top .cv svg{display:block;width:100%;height:100%}
.tale-top .btn{color:var(--pfg)}
.tale-top .btn.solid{background:var(--pfg);color:var(--pbg);border-color:var(--pfg)}
.tale-top .btn:not(.solid):hover{background:var(--pfg);color:var(--pbg);border-color:var(--pfg)}
.tale-actions{display:flex;gap:12px;flex-wrap:wrap}
.reader{max-width:680px;margin:0 auto;padding:56px 20px 20px}
.reader .tools{display:flex;gap:8px;align-items:center;margin-bottom:26px;font-size:14px;color:var(--muted)}
.tale-text{font-family:var(--f-read);font-weight:400;line-height:1.8;font-size:calc(clamp(18px,2vw,21px) * var(--ts,1))}
.tale-text p{margin:0 0 1.3em}
.back{display:inline-block;margin:10px 0 0;font-weight:500;text-decoration:none;color:var(--muted)}
.back:hover{color:var(--accent)}

/* ===== Публикации ===== */
.post{text-decoration:none;display:block}
.post .cv{aspect-ratio:4/3;border-radius:26px;overflow:hidden;margin-bottom:18px}
.post .cv svg{display:block;width:100%;height:100%;transition:transform .5s}
.post:hover .cv svg{transform:scale(1.04)}
.post h3{margin:10px 0 8px;font-size:22px}
.post:hover h3{color:var(--accent)}

/* ===== «Расскажите свою сказку» ===== */
.band.tell{margin:0 12px;border-radius:36px;padding-block:64px}
.tell-in{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.tell h2{max-width:560px}
.tell p{font:400 20px/1.55 var(--f-read);margin:14px 0 0;max-width:540px;color:var(--muted)}

/* ===== Настолка ===== */
.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0;border-radius:36px;overflow:hidden;margin-bottom:28px;background:var(--deep);color:#eef0ea}
.product .cv svg{display:block;width:100%;height:100%;min-height:360px}
.product .txt{padding:48px;display:flex;flex-direction:column;gap:18px;justify-content:center}
.product .kicker{color:var(--sage)}
.product p{margin:0;font:400 19px/1.6 var(--f-read);color:#cdd6d2}
.product .btn{align-self:flex-start;color:#f4f3ec}
.product .btn:hover{background:#f4f3ec;color:#1d2428;border-color:#f4f3ec}
.intro-box{border-radius:36px;padding:52px 48px;margin-bottom:28px}
.intro-box p{max-width:700px;margin:16px 0 0;font:400 21px/1.55 var(--f-read);color:var(--muted)}

/* ===== О нас / тексты ===== */
.about-grid{display:grid;grid-template-columns:260px 1fr;gap:40px;padding-block:56px 90px}
.prose{max-width:680px;font:400 20px/1.8 var(--f-read)}
.prose p{margin:0 0 1.3em}

/* ===== Форма ===== */
.form{max-width:560px;display:grid;gap:16px}
.form label{display:grid;gap:8px;font-weight:500;font-size:15px}
.form input,.form textarea{font:400 16px var(--f-ui);padding:15px 18px;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--fg)}
.form input:focus,.form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.form .ok{background:var(--sage);color:#1d2428;padding:16px 18px;border-radius:16px;font-weight:500}
.chk{display:flex!important;align-items:flex-start;gap:10px;font-weight:400!important;font-size:14px!important;color:var(--muted)}
.chk input{margin-top:3px;accent-color:var(--accent)}

/* ===== Подвал ===== */
.band.site-footer{margin:72px 12px 12px;border-radius:36px;padding:56px 0 30px}
.site-footer .wrap{position:relative;z-index:1}
.foot-cols{display:grid;grid-template-columns:1fr 1fr 1fr 1.4fr;gap:24px;min-height:170px}
.foot-cols a{display:block;font:500 19px var(--f-ui);padding:6px 0;text-decoration:none;letter-spacing:-.01em}
.foot-cols a:hover,.small-link:hover{color:var(--sage)}
.foot-art{display:flex;justify-content:flex-end}
.foot-art .cv{width:200px;height:200px;border-radius:50%;overflow:hidden;margin-top:-10px;opacity:.95}
.foot-art svg{display:block;width:100%;height:100%}
.foot-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);flex-wrap:wrap}
.small-link{font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.copy{margin:6px 0 0;font-size:14px;color:#a9b5b2}
.foot-right{display:flex;align-items:center;gap:16px}
.logo.mini .logo-t{font-size:18px}
.soc{display:flex}.soc:hover{color:var(--sage)}

/* ===== Плеер: плавающая панель ===== */
.player{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;max-width:920px;margin:0 auto;min-height:80px;background:color-mix(in srgb,var(--deep) 94%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#eef0ea;display:flex;align-items:center;gap:14px;padding:12px 18px 12px 14px;border-radius:28px;box-shadow:0 18px 50px rgba(10,20,22,.35)}
.player[hidden]{display:none}
.p-play{width:52px;height:52px;border-radius:50%;border:0;background:#f4f3ec;cursor:pointer;flex:none;position:relative}
.p-play::before{content:"";position:absolute;left:21px;top:16px;border-left:14px solid #1d2428;border-top:10px solid transparent;border-bottom:10px solid transparent}
.p-play.on::before{left:18px;top:17px;width:5px;height:18px;border:0;background:#1d2428;box-shadow:9px 0 0 #1d2428}
.p-info{flex:1;min-width:0}
.p-title{display:block;font:500 16px var(--f-ui);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.p-seek{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#a9b5b2;font-variant-numeric:tabular-nums}
.p-seek input{flex:1;accent-color:#c5d3c0;min-width:0}
.p-opt{background:rgba(255,255,255,.08);border:0;color:inherit;border-radius:999px;padding:8px 12px;font:500 13px var(--f-ui);cursor:pointer;flex:none}
.p-opt:hover,.p-opt.on{background:#c5d3c0;color:#1d2428}
.p-close{background:none;border:0;color:inherit;font-size:28px;cursor:pointer;line-height:1;flex:none;opacity:.7}

/* ===== Демо-панель темы ===== */
.theme-fab{position:fixed;right:16px;bottom:calc(var(--player-h) + 16px);z-index:55;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--fg);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(20,30,34,.15)}
.theme-panel{position:fixed;right:16px;bottom:calc(var(--player-h) + 72px);z-index:55;width:280px;background:var(--paper);color:var(--fg);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 24px 50px rgba(20,30,34,.2);display:grid;gap:10px}
.theme-panel[hidden]{display:none}
.theme-panel h4{margin:0;font:600 16px var(--f-ui)}
.theme-panel label{display:flex;justify-content:space-between;align-items:center;font-size:14px;gap:8px}
.theme-panel input[type=color]{width:46px;height:30px;border:1px solid var(--line);padding:0;background:none;border-radius:8px}
.theme-panel input[type=file]{width:130px;font-size:11px}
.theme-panel .note{font-size:12px;color:var(--muted);margin:0}

/* ===== Поиск ===== */
.search-ov{position:fixed;inset:0;background:var(--bg);color:var(--fg);z-index:80;overflow:auto;padding-top:90px}
.search-ov[hidden]{display:none}
.search-ov .wrap{position:relative}
.search-ov .p-close{position:absolute;right:20px;top:-64px;color:var(--fg)}
#searchInput{width:100%;font:600 clamp(26px,4vw,38px) var(--f-ui);letter-spacing:-.025em;padding:12px 0;border:0;border-bottom:1px solid var(--fg);background:none;color:var(--fg);outline:0}
#searchRes{margin-top:24px}
.sres{display:block;text-decoration:none;padding:18px 0;border-bottom:1px solid var(--line)}
.sres:hover b{color:var(--accent)}

/* ===== Адаптив ===== */
@media (max-width:960px){
  .burger{display:block}
  .nav{position:absolute;top:calc(100% + 8px);left:12px;right:12px;background:var(--paper);flex-direction:column;align-items:flex-start;gap:0;padding:10px 22px 22px;border:1px solid var(--line);border-radius:26px;box-shadow:0 24px 50px rgba(20,30,34,.18);display:none;max-height:calc(100vh - 90px);overflow:auto}
  .nav.open{display:flex}
  .nav>*{width:100%}
  .nav a,.dd-btn,.icon-btn{padding:15px 0;font-size:17px}
  .dd-menu{position:static;box-shadow:none;border:0;padding:0 0 0 12px;background:none;margin:0}
  .only-mobile{display:inline}
  .btn-contact{text-align:center;justify-content:center;margin-top:12px;width:100%}
  .hero-grid,.tale-top .grid{grid-template-columns:1fr;gap:36px}
  .tale-top .cv{max-width:240px;order:-1}
  .topics{grid-template-columns:repeat(2,1fr)}
  .grid2,.grid3{grid-template-columns:1fr}
  .product{grid-template-columns:1fr}.product .txt{padding:32px 26px}
  .about-grid{grid-template-columns:1fr;gap:10px}
  .foot-cols{grid-template-columns:1fr 1fr}.foot-art{grid-column:1/-1;justify-content:flex-start}
  .section{padding-block:48px}
  .band.hero{padding-block:48px 52px;border-radius:28px}
  .band.tale-top,.band.tell,.band.site-footer,.product,.intro-box{border-radius:28px}
}
@media (max-width:560px){
  .tale{grid-template-columns:80px 1fr;gap:16px}.tale .cv{width:80px;height:80px;border-radius:16px}
  .player{padding:10px 12px;gap:8px;border-radius:24px}
  .p-opt{padding:7px 10px}
  .topics{gap:10px}.topic{min-height:150px;padding:16px;border-radius:22px}.topic .cv{width:52px;height:52px;right:12px;top:12px}.topic b{font-size:19px}
  .intro-box{padding:36px 26px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.topic:hover{transform:none}.post:hover .cv svg{transform:none}}

/* Автор и комикс в публикации */
.byline{margin:0 0 22px;color:var(--muted,#5b6b6e);font:500 15px/1.5 var(--f-ui,inherit)}
.comic{margin-top:50px}
.comic h2{margin:0 0 6px}
.comic-pages{max-width:720px;margin:24px auto;padding-inline:16px;display:grid;gap:20px}
.comic-page{margin:0}
.comic-page svg{display:block;width:100%;height:auto;aspect-ratio:3/4;border-radius:18px}
.comic-page figcaption{margin-top:8px;font-size:13px;text-align:center;color:var(--muted,#5b6b6e)}

/* =====================================================================
   ВЕРСИЯ 4. Дизайн по референсам заказчика:
   The Moth: минимализм, шрифты, аккуратность, плеер, быстрая мобильная версия;
   Sveriges Radio: поиск, фильтры, категории, тёмная тема.
   Блок идёт последним и переопределяет предыдущий стиль.
   Цвета и шрифты меняются в :root ниже.
   ===================================================================== */
:root{
  --bg:#ffffff; --fg:#111111; --soft:#f4f3f0; --muted:#5f5f5f; --line:rgba(17,17,17,.16); --paper:#ffffff;
  --deep:#111111; --accent:#111111; --hl:#ffd23f; --hl-ink:#111111;
  --sand:#f4f3f0; --sage:#ffd23f; --mist:#f4f3f0; --rose:#f4f3f0; --straw:#f4f3f0;
  --f-ui:'Inter Tight','Segoe UI',system-ui,sans-serif;
  --f-read:'Literata','Georgia',serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#0c0c0c;--fg:#f2f1ee;--soft:#171717;--muted:#a3a3a0;--line:rgba(242,241,238,.2);--paper:#151515;--deep:#000;--accent:#f2f1ee;--sand:#171717;--sage:#ffd23f;--mist:#171717;--rose:#171717;--straw:#171717;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#0c0c0c;--fg:#f2f1ee;--soft:#171717;--muted:#a3a3a0;--line:rgba(242,241,238,.2);--paper:#151515;--deep:#000;--accent:#f2f1ee;--sand:#171717;--sage:#ffd23f;--mist:#171717;--rose:#171717;--straw:#171717;color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

body{font-size:16px;transition:background .25s,color .25s}
h1,h2,h3{font-weight:700;letter-spacing:-.035em}
h1{font-size:clamp(42px,7.4vw,104px);font-weight:800;line-height:.98;letter-spacing:-.05em}
h2{font-size:clamp(28px,3.6vw,48px);font-weight:800;letter-spacing:-.04em}
h3{font-size:21px;font-weight:700}
.kicker{color:var(--muted);font-weight:700;font-size:12px;letter-spacing:.12em}
a{text-underline-offset:3px}

/* Шапка: плоская, на всю ширину, линия снизу */
.site-header{padding:0;background:var(--bg);border-bottom:1px solid var(--fg)}
.bar{max-width:1280px;height:68px;border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding-inline:20px}
.logo-t{font:800 20px var(--f-ui);letter-spacing:-.03em;text-transform:uppercase}
.mark{width:30px;height:30px;border-radius:0}
.nav a,.dd-btn,.icon-btn{font-weight:600;font-size:14px;letter-spacing:.02em}
.nav a,.dd-btn{position:relative}
.nav a:hover,.dd-btn:hover,.nav [data-nav].on{color:var(--fg)}
.nav>a[data-nav]::after,.dd-btn::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav>a[data-nav]:hover::after,.nav>a[data-nav].on::after,.dd-btn:hover::after,.dd-btn[data-nav].on::after{transform:scaleX(1)}
.btn-contact{background:var(--hl)!important;color:var(--hl-ink)!important;border-radius:0;padding:12px 20px!important;font-weight:700!important;text-transform:uppercase;font-size:13px!important;letter-spacing:.06em}
.btn-contact:hover{background:var(--fg)!important;color:var(--bg)!important}
.dd-menu{border-radius:0;border:1px solid var(--fg);box-shadow:none;padding:6px}
.dd-menu a,.dd-menu button{border-radius:0}
.dd-menu a:hover,.dd-menu button:hover{background:var(--hl);color:var(--hl-ink)}

/* Кнопки */
.btn,.btn-small{border-radius:0;text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:13px}
.btn{padding:15px 24px;border:2px solid currentColor}
.btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.solid,.btn.red{background:var(--hl);color:var(--hl-ink);border-color:var(--hl-ink)}
.btn.solid:hover,.btn.red:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-small{padding:10px 16px;border:2px solid var(--fg);background:var(--hl);color:var(--hl-ink)}
.btn-small:hover,.btn-small.on{background:var(--fg);color:var(--bg)}

/* Главная: плоский чёрный блок, крупный заголовок */
.band.hero{margin:0;border-radius:0;background:var(--hero-img) center/cover,#0c0c0c;color:#f2f1ee;padding-block:84px 96px}
.hero h1{color:#f6f5f1}
.hero .kicker{color:var(--hl)}
.hero p.lead{color:#cfcfca}
.hero .btn{color:#f6f5f1}
.hero .btn.solid{background:var(--hl);color:#111;border-color:var(--hl)}
.hero .btn.solid:hover{background:#f6f5f1;border-color:#f6f5f1;color:#111}
.hero .btn:not(.solid):hover{background:#f6f5f1;color:#111;border-color:#f6f5f1}
.week{border-radius:0;box-shadow:none;background:var(--paper);color:var(--fg);padding:0 0 22px}
.week .cv{border-radius:0;aspect-ratio:16/10}
.week .body{padding:20px 20px 0}
.week .kicker{color:var(--muted)}
.week h3{font-size:28px;font-weight:800}

/* Темы-категории: плоские плитки с рамкой */
.topics{gap:0;border-top:1px solid var(--fg);border-left:1px solid var(--fg)}
.topic{border-radius:0;background:var(--bg)!important;color:var(--fg)!important;border-right:1px solid var(--fg);border-bottom:1px solid var(--fg);min-height:190px;padding:22px;transition:background .2s}
.topic:hover{transform:none;background:var(--hl)!important;color:var(--hl-ink)!important}
.topic .cv{border-radius:0;width:56px;height:56px}
.topic b{font-weight:800;font-size:24px;letter-spacing:-.03em}

/* Списки */
.section{padding-block:64px}
.section.soft{background:var(--soft)}
.sec-head{border-bottom:2px solid var(--fg);padding-bottom:14px}
.tale{grid-template-columns:120px 1fr;border-top:1px solid var(--line);padding-block:24px}
.tale .cv{width:120px;height:120px;border-radius:0}
.tale .cv svg,.post .cv svg{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tale:hover .cv svg{transform:scale(1.06)}
.tale h3{font-size:23px}
.tale h3 a:hover,.post:hover h3{color:var(--fg);text-decoration:underline;text-decoration-thickness:2px}
.time{font-weight:600}
.tag{border-radius:0;background:none;border:1px solid var(--line);color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-size:11px;font-weight:700;padding:4px 9px}
.tag:hover{background:var(--hl);color:var(--hl-ink);border-color:var(--hl-ink)}
.soft .tag{background:none}
.post .cv{border-radius:0}
.post h3{font-size:24px;font-weight:800}

/* Заголовки разделов, фильтры, чипы (как в Sveriges Radio) */
.band-blue.page-hero{padding-block:72px 8px}
.chips{gap:0;margin-bottom:34px;border:1px solid var(--fg);width:fit-content;max-width:100%;flex-wrap:wrap}
.chip{border:0;border-right:1px solid var(--fg);border-radius:0;background:var(--bg);color:var(--fg);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;padding:12px 18px}
.chip:last-child{border-right:0}
.chip:hover{background:var(--soft);color:var(--fg)}
.chip.on{background:var(--hl);color:var(--hl-ink)}
.filter{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--fg);margin-bottom:22px;padding-block:6px}
.filter svg{flex:none}
.filter-in{flex:1;min-width:0;font:600 clamp(20px,3vw,28px) var(--f-ui);letter-spacing:-.02em;background:none;border:0;outline:0;color:var(--fg);padding:10px 0}
.filter-in::placeholder{color:var(--muted);font-weight:500}
.filter-n{font:600 14px var(--f-ui);color:var(--muted);white-space:nowrap}
[hidden]{display:none!important}

/* Страница сказки / публикации */
.band.tale-top{margin:0;border-radius:0;padding-block:56px}
.tale-top .cv{border-radius:0;box-shadow:none}
.tale-top .tag{background:none;border-color:currentColor;color:inherit}
.reader{max-width:700px}
.tale-text{line-height:1.75}
.byline{font-weight:600;letter-spacing:.01em}
.comic-page svg{border-radius:0}
.comic-page{border:1px solid var(--line)}
.comic-page figcaption{padding:8px 0}
.back{color:var(--fg);text-decoration:underline;text-decoration-thickness:2px}

/* Блоки */
.band.tell{margin:0;border-radius:0;background:var(--hl);color:#111}
.band.tell p{color:#2b2b2b}
.band.tell .btn.red{background:#111;color:#fff;border-color:#111}
.band.tell .btn.red:hover{background:#fff;color:#111}
.product,.intro-box{border-radius:0}
.product{background:var(--deep);color:#f2f1ee}
.product .kicker{color:var(--hl)}
.intro-box{background:var(--soft);border:1px solid var(--fg)}
.form input,.form textarea{border-radius:0;border:1px solid var(--fg);background:var(--bg)}
.form .ok{border-radius:0;background:var(--hl);color:#111}

/* Подвал */
.band.site-footer{margin:72px 0 0;border-radius:0;background:var(--deep);color:#f2f1ee;border-top:1px solid var(--line)}
.foot-cols a{font-weight:700;letter-spacing:-.02em}
.foot-cols a:hover,.small-link:hover,.soc:hover{color:var(--hl)}
.foot-art .cv{border-radius:0;width:160px;height:160px}

/* Плеер: закреплён внизу на всю ширину, как в приложениях радио */
.player{left:0;right:0;bottom:0;max-width:none;margin:0;border-radius:0;background:#0c0c0c;border-top:3px solid var(--hl);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:12px max(16px,calc((100% - 1240px)/2)) calc(12px + env(safe-area-inset-bottom,0px))}
.p-play{background:var(--hl)}
.p-play::before{border-left-color:#111}
.p-play.on::before{background:#111;box-shadow:9px 0 0 #111}
.p-title{font-weight:700;font-size:17px}
.p-seek input{accent-color:var(--hl)}
.p-opt{border-radius:0;background:rgba(255,255,255,.1);font-weight:700}
.p-opt:hover,.p-opt.on{background:var(--hl);color:#111}
body.has-player{--player-h:calc(92px + env(safe-area-inset-bottom,0px))}
.theme-fab,.theme-panel{border-radius:0}
.theme-fab{bottom:calc(var(--player-h) + 14px)}

/* Поиск по сайту */
#searchInput{font-weight:800;border-bottom:3px solid var(--fg)}
.sres:hover b{text-decoration:underline}

/* Анимация: мягкое появление страницы */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#main>*{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
#main>*:nth-child(2){animation-delay:.06s}
#main>*:nth-child(3){animation-delay:.1s}
.dd-menu{animation:rise .2s ease both}

/* Мобильная версия: простое меню на всю ширину, крупные зоны нажатия */
@media (max-width:960px){
  .bar{height:60px;padding-inline:16px}
  .nav{left:0;right:0;top:100%;margin-top:0;border-radius:0;border:0;border-top:1px solid var(--fg);border-bottom:1px solid var(--fg);box-shadow:none;max-height:calc(100vh - 60px - var(--player-h))}
  .nav a,.dd-btn,.icon-btn{font-size:18px;font-weight:700;padding:16px 0;border-bottom:1px solid var(--line)}
  .nav>a[data-nav]::after,.dd-btn::after{display:none}
  .dd-menu{border:0;padding-left:12px}
  .burger span{height:2px;border-radius:0}
  .band.hero{padding-block:44px 52px}
  .topics{grid-template-columns:repeat(2,1fr)}
  .topic{min-height:150px}
  .chips{width:100%}
  .chip{flex:1 1 auto;text-align:center;padding:12px 10px}
  .band.hero,.band.tale-top,.band.tell,.band.site-footer,.product,.intro-box{border-radius:0}
}
@media (max-width:560px){
  .tale{grid-template-columns:84px 1fr}
  .tale .cv{width:84px;height:84px;border-radius:0}
  .topic .cv{width:40px;height:40px}
  .topic b{font-size:20px}
  .player{padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));gap:8px;border-radius:0}
  .p-play{width:46px;height:46px}
  .p-play::before{left:18px;top:13px}
  .p-play.on::before{left:15px;top:14px}
  .filter-n{display:none}
}
@media (prefers-reduced-motion:reduce){#main>*,.dd-menu{animation:none!important}.tale:hover .cv svg{transform:none}}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
body{overflow-x:hidden}
@media (max-width:560px){h1{font-size:clamp(34px,10.5vw,52px)}.tale-top h1{font-size:clamp(30px,9vw,44px)}}

/* =====================================================================
   ВЕРСИЯ 5. Брендбук PERITALE (13.10.2026).
   Цвета: #34455E синий, #C95D43 терракота, #616D7F серо-синий, #C67860 светлая терракота, кремовый фон.
   Шрифт: Montserrat (в брендбуке также Waffle Soft, но в нём нет кириллицы).
   Плоская структура версии 4 сохраняется, меняются только цвета, шрифт и логотип.
   ===================================================================== */
:root{
  --bg:#f5ecdb; --fg:#34455e; --soft:#efe3cd; --muted:#616d7f; --line:rgba(52,69,94,.2); --paper:#fbf6ec;
  --deep:#34455e; --accent:#c95d43; --hl:#c95d43; --hl-ink:#fbf6ec; --brand-2:#c67860; --on-deep:#f5ecdb; --on-deep-hl:#f0b39f;
  --sand:#efe3cd; --sage:#c95d43; --mist:#efe3cd; --rose:#efe3cd; --straw:#efe3cd;
  --f-ui:'Montserrat','Segoe UI',system-ui,sans-serif;
  --f-read:'Montserrat','Segoe UI',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#1b2433;--fg:#f5ecdb;--soft:#222d3f;--muted:#aab3c1;--line:rgba(245,236,219,.18);--paper:#222d3f;--deep:#141b27;--accent:#e58a72;--hl:#c95d43;--hl-ink:#fbf6ec;--sand:#222d3f;--sage:#c95d43;--mist:#222d3f;--rose:#222d3f;--straw:#222d3f;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#1b2433;--fg:#f5ecdb;--soft:#222d3f;--muted:#aab3c1;--line:rgba(245,236,219,.18);--paper:#222d3f;--deep:#141b27;--accent:#e58a72;--hl:#c95d43;--hl-ink:#fbf6ec;--sand:#222d3f;--sage:#c95d43;--mist:#222d3f;--rose:#222d3f;--straw:#222d3f;color-scheme:dark}

body{background:var(--bg);color:var(--fg)}
h1,h2,h3{letter-spacing:-.02em}
h1{letter-spacing:-.03em}
.tale-text{line-height:1.85}

/* Логотип: знак (круг с птицей) + надпись PERITALE */
.logo{gap:12px;color:var(--fg)}
.mark{width:38px;height:38px;border-radius:50%;overflow:visible}
.mark svg{width:100%;height:100%}
.logo-t{display:block;width:118px;height:auto;color:var(--accent);line-height:0}
.logo-t svg{display:block;width:100%;height:auto}
.logo.mini{color:var(--on-deep)}
.logo.mini .logo-t{color:var(--on-deep);width:104px}

/* Выпадающее меню: без зазора под пунктом, чтобы оно не закрывалось при переводе курсора */
.dd-menu{margin-top:0}

/* Главный блок: синий брендовый фон */
.band.hero{background:var(--hero-img) center/cover,var(--deep);color:var(--on-deep)}
.hero h1{color:var(--on-deep)}
.hero .kicker{color:var(--on-deep-hl)}
.hero p.lead{color:rgba(245,236,219,.82)}
.hero .btn{color:var(--on-deep)}
.hero .btn.solid{background:var(--hl);color:var(--hl-ink);border-color:var(--hl)}
.hero .btn.solid:hover,.hero .btn:not(.solid):hover{background:var(--on-deep);color:#34455e;border-color:var(--on-deep)}

/* Блоки на цветном фоне */
.band.tell{background:var(--hl);color:var(--hl-ink)}
.band.tell p{color:rgba(251,246,236,.9)}
.band.tell .btn.red{background:#34455e;color:#fbf6ec;border-color:#34455e}
.band.tell .btn.red:hover{background:#fbf6ec;color:#34455e;border-color:#fbf6ec}
.product{background:var(--deep);color:var(--on-deep)}
.product .kicker{color:var(--on-deep-hl)}
.product .btn:hover{background:var(--on-deep);color:#34455e;border-color:var(--on-deep)}
.form .ok{background:var(--hl);color:var(--hl-ink)}

/* Подвал: 3 колонки после удаления «Поддержать нас» */
.band.site-footer{background:var(--deep);color:var(--on-deep)}
.foot-cols{grid-template-columns:1fr 1fr 1.4fr}
@media (max-width:960px){.foot-cols{grid-template-columns:1fr 1fr}}
.foot-cols a:hover,.small-link:hover,.soc:hover{color:var(--on-deep-hl)}

/* Плеер */
.player{background:#2a384e;color:#f5ecdb;border-top-color:var(--hl)}
.p-play::before{border-left-color:#fbf6ec}
.p-play.on::before{background:#fbf6ec;box-shadow:9px 0 0 #fbf6ec}
.p-opt:hover,.p-opt.on{background:var(--hl);color:#fbf6ec}
.hero h1{font-size:clamp(40px,5.8vw,84px)}
@media (max-width:560px){.hero h1{font-size:clamp(32px,9.5vw,46px)}}