/*
Theme Name: VCHASNO
Theme URI: https://vchasno.in.ua
Author: VCHASNO
Description: Кастомна тема журналу корисних порад. Темна обкладинка, живий годинник, бенто-сітка, каруселі рубрик, автоматичний режим часу доби. Без білдерів.
Version: 2.3.5
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: vchasno
*/

:root{
  --ink:#121218;
  --ink-soft:#5a5a66;
  --paper:#f6f6f8;
  --card:#ffffff;
  --dark:#0c0d12;
  --dark-2:#14151c;
  --accent:#2b46ff;
  --gold:#ffd23f;
  --gold-ink:#8a6a00;
  --gold-soft:#fff4d0;
  --accent-deep:#1d33d6;
  --hot:#ff3d71;
  --sun:#ffd23f;
  --mint:#19c98b;
  --r:20px;
  --display:'Unbounded',sans-serif;
  --body:'Golos Text',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --wrap:1240px;
  --sh:0 1px 2px rgba(18,18,24,.04),0 10px 32px rgba(18,18,24,.08);
  --sh-lift:0 4px 8px rgba(18,18,24,.06),0 24px 56px rgba(18,18,24,.18);
  --ease:cubic-bezier(.22,.68,.32,1);
  /* время суток: свечения обложки */
  --glow-a:rgba(43,70,255,.28);
  --glow-b:rgba(255,61,113,.14);
}
body.t-morning{--glow-a:rgba(255,178,64,.30);--glow-b:rgba(43,70,255,.16)}
body.t-evening{--glow-a:rgba(122,66,255,.34);--glow-b:rgba(255,90,60,.16)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--sun);color:var(--ink)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

.grain{position:relative}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ===================== ОБЛОЖКА ===================== */
.cover{background:
  radial-gradient(90% 60% at 85% -10%,var(--glow-a),transparent 60%),
  radial-gradient(70% 50% at 0% 110%,var(--glow-b),transparent 55%),
  var(--dark);
  color:#fff;padding-bottom:64px;position:relative;
  transition:background .8s var(--ease)}

header.site{position:sticky;top:0;z-index:100;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
header.site.scrolled{background:rgba(12,13,18,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
header.site .wrap{display:flex;align-items:center;gap:22px;height:78px;position:relative}
.logo{font-family:var(--display);font-weight:900;font-size:23px;letter-spacing:.03em;color:#fff;display:flex;align-items:baseline}
.logo em{font-style:normal;color:var(--sun);transition:transform .3s var(--ease);display:inline-block;transform-origin:center 60%}
.logo:hover em{transform:rotate(180deg)}
.clock{
  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--sun);
  border:1px solid rgba(255,210,63,.35);border-radius:99px;padding:7px 14px;
  letter-spacing:.08em;font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* полоска прожитого дня */
.dayline{position:absolute;left:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--sun),#ffb03d);width:0%;transition:width 1s linear;box-shadow:0 0 8px rgba(255,210,63,.6)}
nav.main{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
nav.main a{font-weight:600;font-size:15px;color:#c3c3d0;padding:9px 14px;border-radius:99px;white-space:nowrap;transition:background .18s var(--ease),color .18s var(--ease)}
nav.main a:hover{background:rgba(255,255,255,.1);color:#fff}
.search-btn{border:0;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-size:17px;width:42px;height:42px;border-radius:50%;transition:background .18s var(--ease),transform .18s var(--ease)}
.search-btn:hover{background:rgba(255,255,255,.22);transform:scale(1.06)}

/* бургер (только мобилка/планшет) */
.burger{display:none;border:0;background:rgba(255,255,255,.1);cursor:pointer;width:42px;height:42px;border-radius:50%;position:relative;flex:none}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:25px}
body.menu-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* полноэкранное меню */
.menu{
  position:fixed;inset:0;z-index:300;background:
  radial-gradient(90% 60% at 85% -10%,var(--glow-a),transparent 60%),
  radial-gradient(70% 50% at 0% 110%,var(--glow-b),transparent 55%),var(--dark);
  display:flex;flex-direction:column;padding:0 26px 34px;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
body.menu-open .menu{opacity:1;visibility:visible}
.menu-top{display:flex;align-items:center;justify-content:space-between;height:66px;flex:none}
.menu-top .logo{font-size:22px}
.menu-top .clock-m{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--sun);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.menu-close{border:0;background:rgba(255,255,255,.1);color:#fff;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:18px}
.menu nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px}
.menu nav a{
  display:flex;align-items:baseline;gap:16px;padding:11px 0;color:#fff;
  font-family:var(--display);font-weight:700;font-size:clamp(23px,6.4vw,30px);letter-spacing:-.01em;
  border-bottom:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateY(18px);transition:opacity .45s var(--ease),transform .45s var(--ease),color .2s;
}
body.menu-open .menu nav a{opacity:1;transform:none}
.menu nav a:active,.menu nav a:hover{color:var(--sun)}
.menu nav a i{font-style:normal;font-family:var(--mono);font-weight:700;font-size:12px;color:var(--sun);letter-spacing:.06em}
.menu-foot{flex:none;font-family:var(--mono);font-size:12px;color:#8d8da0;letter-spacing:.06em}

.ticker{border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);overflow:hidden;position:relative}
.ticker-inner{display:flex;align-items:center;height:46px}
.ticker .badge{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--dark);background:var(--sun);padding:5px 12px;border-radius:99px;white-space:nowrap;margin:0 18px 0 24px;z-index:2;box-shadow:0 0 0 8px var(--dark)}
.marquee{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee-track{display:inline-flex;animation:slide 38s linear infinite;white-space:nowrap}
.ticker:hover .marquee-track{animation-play-state:paused}
.marquee a{font-size:14.5px;color:#d5d5e0;padding-right:56px;transition:color .15s}
.marquee a:hover{color:#fff}
.marquee time{font-family:var(--mono);font-size:12px;color:var(--sun);margin-right:9px}
@keyframes slide{to{transform:translateX(-50%)}}

/* приветствие по времени суток */
.greet{margin-top:40px;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.greet h2{font-family:var(--display);font-weight:700;font-size:clamp(19px,2vw,26px);letter-spacing:-.01em}
.greet .sub-line{font-family:var(--mono);font-size:12.5px;color:#9a9aac;letter-spacing:.04em}
.greet .sub-line b{color:var(--sun);font-weight:700}

.cover-grid{display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:1fr 1fr;gap:24px;margin-top:26px}
.cov{position:relative;border-radius:var(--r);overflow:hidden;display:flex;align-items:flex-end;min-height:225px;box-shadow:0 20px 60px rgba(0,0,0,.45);isolation:isolate}
.cov .bg{position:absolute;inset:-12% 0;background-size:cover;background-position:center;transition:transform .8s var(--ease);z-index:-2;will-change:transform}
.cov:hover .bg{scale:1.05}
.cov .shade{position:absolute;inset:0;background:linear-gradient(186deg,rgba(12,13,18,.05) 32%,rgba(12,13,18,.92) 90%);z-index:-1}
.cov.hero{grid-row:1/3;min-height:540px}
.cov .body{padding:28px;width:100%;transform:translateY(6px);transition:transform .4s var(--ease)}
.cov:hover .body{transform:translateY(0)}
.cov.hero .body{padding:40px}
.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:6px 13px;border-radius:99px;color:var(--dark);margin-bottom:14px}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dark);opacity:.55}
.chip.sun{background:var(--sun)}.chip.pink{background:#ffb3c8}.chip.mint{background:#93efcf}
.cov h1,.cov h2{color:#fff;line-height:1.16;text-wrap:balance}
.cov.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(25px,3vw,40px);letter-spacing:-.015em}
.cov h2{font-weight:800;font-size:clamp(17px,1.6vw,21.5px)}
.cov .std{display:block;margin-top:14px;font-family:var(--mono);font-size:12.5px;color:#a8a8b8}
.cov .std b{color:var(--sun);font-weight:700}
.cov .read{position:absolute;right:24px;bottom:24px;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:19px;opacity:0;transform:translate(8px,8px) rotate(-45deg);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cov:hover .read{opacity:1;transform:translate(0,0) rotate(-45deg)}
.ph-1{background:radial-gradient(130% 130% at 18% 8%,#5d74ff 0%,#0e1a70 62%,#080d33 100%)}
.ph-2{background:radial-gradient(130% 130% at 82% 12%,#ff86aa 0%,#7a1235 68%)}
.ph-3{background:radial-gradient(130% 130% at 22% 18%,#31e6a8 0%,#0a4d37 70%)}

/* ===================== СЕКЦИИ ===================== */
section.zone{padding:68px 0 0}
.zone-head{display:flex;align-items:center;gap:18px;margin-bottom:30px}
.zone-head h2{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.2vw,29px);letter-spacing:-.01em}
.zone-head .count{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--gold-ink);background:var(--gold-soft);padding:4px 10px;border-radius:99px;transform:translateY(-8px)}
.zone-head .all{margin-left:auto;font-weight:700;font-size:14.5px;color:var(--gold-ink);display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:99px;background:var(--gold-soft);transition:gap .2s var(--ease),background .2s var(--ease);white-space:nowrap}
.zone-head .all:hover{background:#ffe9a8;gap:13px}

.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:98px;gap:24px}
.tile{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.tile:hover{transform:translateY(-6px);box-shadow:var(--sh-lift)}
.tile.big{grid-column:span 2;grid-row:span 4}
.tile.tall{grid-column:span 1;grid-row:span 4}
.tile.wide{grid-column:span 2;grid-row:span 2}
.tile .media{position:relative;flex:1;min-height:0;overflow:hidden}
.tile .media .ph{position:absolute;inset:0;transition:transform .8s var(--ease)}
.tile:hover .media .ph{transform:scale(1.06)}
.tile .pad{padding:19px 22px 22px}
.tile h3{font-weight:800;font-size:16.5px;line-height:1.3;text-wrap:balance}
.tile.big h3{font-size:21.5px}
.tile h3 a{background-image:linear-gradient(var(--gold-ink),var(--gold-ink));background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .35s var(--ease)}
.tile h3 a:hover{background-size:100% 2px;color:var(--gold-ink)}
.tile .std{display:block;margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.tile .std b{color:var(--gold-ink);font-weight:700}
.tile.text-only{background:var(--dark-2);color:#fff;justify-content:flex-end}
.tile.text-only .pad{padding:24px}
.tile.text-only .fmt-big{font-family:var(--display);font-weight:700;font-size:12px;color:var(--sun);text-transform:uppercase;letter-spacing:.14em;margin-bottom:12px;display:block}
.tile.text-only h3 a:hover{color:var(--sun);background-image:linear-gradient(var(--sun),var(--sun))}
.tile.text-only .std{color:#8f8f9e}
.tile.text-only .std b{color:var(--sun)}
.mm-1{background:linear-gradient(150deg,#c9d3ff,#8098ff 55%,#5f7bff)}
.mm-2{background:linear-gradient(150deg,#ffd9b3,#ffa763 60%,#ff8f3d)}
.mm-3{background:linear-gradient(150deg,#bef3db,#5fd8ab 60%,#2fc794)}
.mm-4{background:linear-gradient(150deg,#ffccdb,#ff8fb2 60%,#ff6f9c)}
.mm-5{background:linear-gradient(150deg,#e4d2ff,#b287ff 60%,#9a63ff)}
.tag{position:absolute;left:15px;top:15px;z-index:2;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(12,13,18,.78);color:#fff;padding:6px 12px;border-radius:99px;backdrop-filter:blur(6px)}

.rowscroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(276px,1fr);gap:24px;overflow-x:auto;padding:6px 6px 22px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#cfcfda transparent}
.rowscroll::-webkit-scrollbar{height:8px}
.rowscroll::-webkit-scrollbar-thumb{background:#cfcfda;border-radius:99px}
.rowscroll .tile{scroll-snap-align:start}
.rowscroll .media{aspect-ratio:16/9.4;flex:none}
.zone.tinted{margin-top:68px;padding:58px 0 52px;background:linear-gradient(180deg,#edf0ff,#e6ebff)}
.zone.tinted.warm{background:linear-gradient(180deg,#fff2e6,#ffeadb)}
.zone.tinted .zone-head .all{background:#fff}
.zone.tinted .zone-head .all:hover{background:#f2f2ff}

.sub{margin-top:76px}
.sub .box{background:var(--dark);border-radius:28px;padding:52px 56px;color:#fff;display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center;overflow:hidden;position:relative;background-image:radial-gradient(70% 120% at 100% 0%,rgba(43,70,255,.4),transparent 55%)}
.sub h2{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.3vw,30px);line-height:1.2;text-wrap:balance}
.sub p{margin-top:12px;color:#9c9cac;font-size:15.5px;max-width:46ch}
.sub .row{display:flex;gap:12px}
.sub input{flex:1;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;border-radius:99px;padding:15px 22px;font-family:var(--body);font-size:15px;min-width:0}
.sub input::placeholder{color:#8b8b9a}
.sub input:focus{outline:2px solid var(--sun);border-color:transparent}
.sub button{border:0;background:var(--sun);color:var(--dark);font-weight:800;font-size:15px;border-radius:99px;padding:15px 30px;cursor:pointer;transition:box-shadow .2s var(--ease);white-space:nowrap;will-change:transform}
.sub button:hover{box-shadow:0 12px 28px rgba(255,210,63,.35)}

.more{display:flex;justify-content:center;padding:60px 0 0}
.more button{font-weight:800;font-size:16px;color:#fff;background:var(--accent);border:0;padding:17px 52px;border-radius:99px;cursor:pointer;box-shadow:0 10px 30px rgba(43,70,255,.35);transition:box-shadow .2s var(--ease),background .2s var(--ease);will-change:transform}
.more button:hover{box-shadow:0 18px 44px rgba(43,70,255,.45);background:var(--accent-deep)}

footer.site{background:var(--dark);color:#c3c3d0;margin-top:84px;overflow:hidden}
.foot-word{font-family:var(--display);font-weight:900;font-size:clamp(64px,11vw,150px);line-height:.9;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);text-align:center;padding:56px 0 0;letter-spacing:.02em;user-select:none}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;padding:48px 0 40px}
footer .logo{font-size:25px}
footer p{margin-top:16px;font-size:15px;max-width:44ch;color:#87879a}
footer h4{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer li a{font-size:15px;transition:color .15s}
footer li a:hover{color:var(--sun)}
.copy{border-top:1px solid rgba(255,255,255,.09)}
.copy .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:20px;font-family:var(--mono);font-size:12px;color:#73737f}

@media(max-width:1000px){
  .cover-grid{grid-template-columns:1fr}
  .cov.hero{grid-row:auto;min-height:430px}
  .bento{grid-template-columns:1fr 1fr}
  .tile.big,.tile.wide{grid-column:span 2}
  .sub .box{grid-template-columns:1fr;padding:40px 32px}
  footer .cols{grid-template-columns:1fr 1fr}
  .clock{display:none}
}
@media(max-width:900px){
  nav.main{display:none}
  .burger{display:block;margin-left:auto}
  header.site .search-btn{margin-left:0}
}
@media(max-width:600px){
  header.site .wrap{height:66px;gap:12px}
  section.zone{padding:48px 0 0}
  .zone.tinted{margin-top:48px;padding:42px 0 38px}
  .greet{margin-top:28px}
  .cover{padding-bottom:44px}
  .cover-grid{gap:14px;margin-top:20px}
  /* обложка: герой большой, остальные — компактные строки */
  .cov.hero{min-height:400px}
  .cov:not(.hero){min-height:0;height:96px;align-items:center;border-radius:16px}
  .cov:not(.hero) .body{padding:14px 18px;transform:none}
  .cov:not(.hero) .chip{margin-bottom:6px;padding:3px 9px;font-size:9.5px}
  .cov:not(.hero) h2{font-size:15px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cov:not(.hero) .std,.cov:not(.hero) .read{display:none}
  /* бенто: big остаётся витриной, остальные — строки с мини-фото */
  .bento{grid-template-columns:1fr;grid-auto-rows:auto;gap:14px}
  .tile.big,.tile.tall,.tile.wide{grid-column:auto;grid-row:auto}
  .tile.big .media{aspect-ratio:16/9;flex:none}
  .tile:not(.big):not(.text-only){flex-direction:row;align-items:stretch}
  .tile:not(.big):not(.text-only) .media{width:104px;min-height:104px;aspect-ratio:auto;flex:none;order:2}
  .tile:not(.big):not(.text-only) .media .tag{display:none}
  .tile:not(.big):not(.text-only) .pad{flex:1;padding:14px 16px;display:flex;flex-direction:column;justify-content:center}
  .tile:not(.big) h3{font-size:15px}
  .tile .std{margin-top:6px}
  .tile.text-only{min-height:0}
  .tile.text-only .pad{padding:18px 20px}
  .tile.text-only .fmt-big{margin-bottom:8px}
  /* карусели: чуть уже карточки, компактнее */
  .rowscroll{grid-auto-columns:78%;gap:14px}
  .sub{margin-top:52px}
  .sub .row{flex-direction:column}
  .foot-word{font-size:clamp(48px,16vw,90px);padding:36px 0 0}
  footer .cols{grid-template-columns:1fr;gap:28px;padding:36px 0 28px}
  footer .cols > div:nth-child(2),footer .cols > div:nth-child(3){display:inline-block}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .rv{opacity:1;transform:none}
  .marquee-track{animation:none!important}
}

/* ===================== WP-СПЕЦИФИКА ===================== */
/* стандартные меню WP рендерят ul/li — растворяем их */
nav.main ul,.menu nav ul{display:contents;list-style:none;margin:0;padding:0}
nav.main li,.menu nav li{display:contents}
/* автонумерация пунктов моб-меню */
.menu nav{counter-reset:mn}
.menu nav a{counter-increment:mn}
.menu nav a::before{content:counter(mn,decimal-leading-zero);font-style:normal;font-family:var(--mono);font-weight:700;font-size:12px;color:var(--sun);letter-spacing:.06em;margin-right:16px}
/* поиск в оверлее */
.menu-search{margin:8px 0 22px;flex:none}
.menu-search form{display:flex;gap:10px}
.menu-search input{flex:1;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;border-radius:99px;padding:13px 20px;font-family:var(--body);font-size:15px;min-width:0}
.menu-search input::placeholder{color:#8b8b9a}
.menu-search button{border:0;background:var(--sun);color:var(--dark);font-weight:800;border-radius:99px;padding:13px 22px;cursor:pointer}

/* узкая обложка для внутренних страниц */
.cover.slim{padding-bottom:0}

/* реальные фото в карточках */
.cov .bg img,.tile .media img,.art-hero img{width:100%;height:100%;object-fit:cover;display:block}
.tile .media a{position:absolute;inset:0}
.tile .media .ph{z-index:0}
.tile .media img{position:absolute;inset:0;z-index:1}


/* ===================== СТАТЬЯ ===================== */
.art{max-width:760px;margin:0 auto;padding:56px 24px 0}
.art .chip{color:var(--dark)}
.art h1{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,42px);line-height:1.15;letter-spacing:-.015em;margin:16px 0 18px;text-wrap:balance}
.art .meta{font-family:var(--mono);font-size:13px;color:var(--ink-soft);display:flex;gap:14px;flex-wrap:wrap}
.art .meta b{color:var(--accent);font-weight:700}
.art-hero{margin:32px auto 0;max-width:980px;padding:0 24px}
.art-hero .frame{border-radius:var(--r);overflow:hidden;aspect-ratio:16/8.5;box-shadow:var(--sh-lift);position:relative}
.prose{max-width:760px;margin:44px auto 0;padding:0 24px;font-size:18px;line-height:1.75;color:#26262e}
.prose p{margin-bottom:1.35em}
.prose h2{font-family:var(--display);font-weight:700;font-size:24px;margin:1.6em 0 .7em;letter-spacing:-.01em;color:var(--ink)}
.prose h3{font-weight:800;font-size:20px;margin:1.4em 0 .6em;color:var(--ink)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose img{border-radius:var(--r);margin:1.6em 0;height:auto}
.prose ul,.prose ol{margin:0 0 1.35em 1.3em}
.prose li{margin-bottom:.5em}
.prose blockquote{border-left:4px solid var(--sun);background:#fff;border-radius:0 var(--r) var(--r) 0;padding:20px 26px;margin:1.6em 0;box-shadow:var(--sh);font-weight:600}
.prose figure{margin:1.6em 0}
.prose figcaption{font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin-top:8px}

/* ===================== АРХИВ / РУБРИКА ===================== */
.arch-head{padding:52px 0 8px}
.arch-head .kicker-lite{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.arch-head h1{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.015em;margin-top:10px}
.arch-head p{color:var(--ink-soft);margin-top:12px;max-width:60ch}
.arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:36px 0 0}
.pagenav{display:flex;justify-content:center;gap:8px;padding:52px 0 0;font-family:var(--mono);font-weight:700;font-size:14px}
.pagenav .page-numbers{padding:11px 17px;border-radius:99px;background:#fff;box-shadow:var(--sh);transition:background .15s,color .15s}
.pagenav .page-numbers.current{background:var(--ink);color:#fff}
.pagenav a.page-numbers:hover{background:var(--accent);color:#fff}
@media(max-width:900px){.arch-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.arch-grid{grid-template-columns:1fr}.prose{font-size:17px}}


/* ============================================================
   ЗАХИСТ ВІД ЧУЖИХ СТИЛІВ (білдер / стара тема обнуляли line-height)
   ============================================================ */
body,p,span,a,li,td,th,div,figcaption,label,input,button{line-height:1.5}
.wrap p,.cov .std,.tile .std,.timestamp,.menu-foot,.copy span{line-height:1.5!important}
.sub p{line-height:1.6!important}
footer.site p{line-height:1.6!important}
footer.site li a{line-height:1.5!important}
.arch-head p{line-height:1.6!important}
.arch-head .kicker-lite{display:block;line-height:1.4!important}
.marquee a{line-height:46px!important;display:inline-block}
.prose p,.prose li{line-height:1.75!important}
.tile h3{line-height:1.3!important}
.tile.big h3{line-height:1.28!important}
.cov h1,.cov.hero h1{line-height:1.16!important}
.cov h2{line-height:1.2!important}
.zone-head h2,.art h1{line-height:1.15!important}
.foot-word{line-height:.9!important}
.greet h2{line-height:1.2!important}
.greet .sub-line{line-height:1.5!important}
.menu nav a{line-height:1.2!important}


/* «О» у лого: обертання навколо точки нижче центру — літера помітно йде вниз */
.logo em{
  display:inline-block!important;
  transform-origin:50% 72%!important;
  transition:transform .5s cubic-bezier(.34,1.25,.5,1)!important;
  will-change:transform;
}
.logo:hover em,.logo:focus-visible em{transform:rotate(180deg)!important}


/* сітка рубрики: невеликі прев'ю-картинки */
.arch-grid .media{aspect-ratio:16/9;flex:none;border-radius:var(--r) var(--r) 0 0}
.arch-grid .tile .pad{padding:16px 20px 20px}
.arch-grid .tile h3{font-size:16px}
@media(max-width:600px){
  .arch-grid .media{aspect-ratio:16/8}
}


/* ============================================================
   ОБКЛАДИНКА СТАТТІ (варіант A)
   ============================================================ */
.ahero{
  position:relative;overflow:hidden;background:var(--dark);
  height:clamp(380px,60vh,620px);
  display:flex;align-items:flex-end;margin-top:0;
}
.ahero .bg{position:absolute;inset:0}
.ahero .bg img{width:100%;height:100%;object-fit:cover;display:block}
.ahero .shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,13,18,.55) 0%,rgba(12,13,18,.2) 32%,rgba(12,13,18,.82) 78%,rgba(12,13,18,.96) 100%);
}
.ahero .in{position:relative;max-width:1000px;margin:0 auto;width:100%;padding:0 24px 44px;color:#fff}
.ahero .chip{margin-bottom:0}
.ahero h1{
  font-family:var(--display);font-weight:700;letter-spacing:-.015em;line-height:1.13!important;
  font-size:clamp(25px,3.4vw,42px);margin:16px 0 18px;max-width:22ch;color:#fff;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ahero .meta{font-family:var(--mono);font-size:13px;color:#b8b8c6;display:flex;gap:14px;flex-wrap:wrap;line-height:1.5!important}
.ahero .meta b{color:var(--sun);font-weight:700}
.ahero .credit{position:absolute;right:24px;bottom:16px;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.45)}
.ahero .pattern{position:absolute;inset:0;opacity:.25;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:26px 26px}

/* фолбеки за рубриками */
.ahero .ph-lajf{background:radial-gradient(120% 120% at 20% 10%,#3d55ff 0%,#101a66 65%,#080d33 100%)}
.ahero .ph-pobut{background:radial-gradient(120% 120% at 20% 10%,#2f7f5f 0%,#0d3d2c 65%,#081f17 100%)}
.ahero .ph-izha{background:radial-gradient(120% 120% at 20% 10%,#c2652a 0%,#5c2a0c 65%,#2a1305 100%)}
.ahero .ph-tech{background:radial-gradient(120% 120% at 20% 10%,#7a44d9 0%,#2f1466 65%,#170a33 100%)}
.ahero .ph-styl{background:radial-gradient(120% 120% at 20% 10%,#b03a63 0%,#4d1229 65%,#260916 100%)}
.ahero .ph-pryv{background:radial-gradient(120% 120% at 20% 10%,#b8912a 0%,#4d3a0c 65%,#261d06 100%)}

/* текст статті під обкладинкою */
.ahero + .prose{margin-top:0;padding-top:46px}
.prose .lead,.prose > p:first-child{font-size:20.5px;line-height:1.6!important;color:#2a2a33;font-weight:500}
.prose > p:first-child{margin-bottom:1.3em}

@media(max-width:600px){
  .ahero{height:clamp(320px,52vh,460px)}
  .ahero .in{padding-bottom:32px}
  .ahero + .prose{padding-top:34px}
  .prose > p:first-child{font-size:18.5px}
}


/* ============================================================
   ПРАВКИ: липка шапка, золоті акценти, футер
   ============================================================ */
/* шапка тримається зверху на всіх сторінках */
header.site{position:sticky!important;top:0;z-index:100}
.cover,.cover.slim{overflow:visible!important}

/* смужка прогресу читання під шапкою */
.dayline{
  position:absolute;left:0;bottom:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--gold),#ffb03d);
  box-shadow:0 0 10px rgba(255,210,63,.55);
  transition:width .12s linear;z-index:2;
}

/* решта синього -> золото */
.arch-head .kicker-lite{color:var(--gold-ink)!important}
.art .meta b,.ahero .meta b{color:var(--gold-ink)}
.ahero .meta b{color:var(--gold)}
.prose a{color:var(--gold-ink)}
.pagenav a.page-numbers:hover{background:var(--gold);color:var(--dark)}
a:focus-visible,button:focus-visible{outline-color:var(--gold-ink)}
.rail li a::before{color:var(--gold-ink)}
.kicker{color:var(--gold-ink)}
.kicker::before{background:var(--gold-ink)}
.feed .time{color:var(--gold-ink)}
.tile.text-only .fmt-big{color:var(--gold)}

/* футер: дві колонки, рубрики в два стовпчики по три */
footer .cols{grid-template-columns:1.6fr 1fr!important}
footer .cols ul.rubrics{column-count:2;column-gap:32px}
footer .cols ul.rubrics li{break-inside:avoid}
@media(max-width:900px){footer .cols{grid-template-columns:1fr!important}}


/* ============================================================
   ШАПКА: винесена з обкладинки — липне на всю сторінку
   ============================================================ */
header.site{
  position:sticky!important;top:0;z-index:200;
  background:var(--dark);
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
header.site.scrolled{
  background:rgba(12,13,18,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.25);
}
header.site .wrap{position:relative}
/* обкладинка починається одразу під шапкою — стик непомітний */
.cover{padding-top:0}


/* ============================================================
   ФІРМОВИЙ ЖОВТИЙ #ffd23f — той самий, що в «О» логотипа
   і в смужці прогресу. На світлому працює як заливка,
   а не як колір літер (жовтий текст на білому нечитабельний).
   ============================================================ */

/* дата: темний текст із жовтим маркером */
.tile .std b,.art .meta b{
  color:var(--ink)!important;
  background:linear-gradient(transparent 62%,rgba(255,210,63,.6) 62%);
  padding:0 2px;
}
.ahero .meta b{color:var(--gold)!important;background:none}

/* підсвітка заголовка при наведенні — жовте підкреслення */
.tile h3 a{
  background-image:linear-gradient(var(--gold),var(--gold))!important;
  background-size:0% 3px!important;background-position:0 100%!important;background-repeat:no-repeat!important;
}
.tile h3 a:hover{background-size:100% 3px!important;color:var(--ink)!important}

/* кнопки секцій — жовта плашка з темним текстом */
.zone-head .all{background:var(--gold)!important;color:var(--dark)!important}
.zone-head .all:hover{background:#ffdf72!important}
.zone-head .count{background:var(--gold)!important;color:var(--dark)!important}
.zone.tinted .zone-head .all{background:var(--gold)!important}

/* кікер рубрики */
.arch-head .kicker-lite{
  color:var(--dark)!important;background:var(--gold);
  display:inline-block;padding:5px 11px;border-radius:99px;
}

/* посилання в тексті статті — жовте підкреслення */
.prose a{
  color:var(--ink)!important;text-decoration:underline;
  text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:3px;
}
.prose a:hover{background:rgba(255,210,63,.28)}

/* пагінація */
.pagenav a.page-numbers:hover{background:var(--gold)!important;color:var(--dark)!important}

/* фокус */
a:focus-visible,button:focus-visible{outline-color:var(--gold)!important}

/* решта дрібниць */
.kicker{color:var(--dark)!important}
.kicker::before{background:var(--gold)!important}
.rail li a::before,.feed .time{color:var(--gold-ink)}


/* дата — темна плашка з жовтим текстом (світиться як на темному фоні) */
.tile .std b,.art .meta b,.arch-grid .std b{
  color:var(--gold)!important;
  background:var(--dark)!important;
  padding:4px 9px!important;
  border-radius:99px;
  display:inline-block;
  line-height:1.3!important;
}
.tile .std,.art .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ahero .meta b{color:var(--gold)!important;background:none!important;padding:0!important}


/* ============================================================
   2.1 — ФІКСИ
   ============================================================ */

/* 1. Шапка завжди темна (без білого на самому верху) */
header.site{background:var(--dark)!important}
header.site.scrolled{
  background:rgba(12,13,18,.92)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}

/* 2. Мітка рубрики на обкладинці статті — жовта плашка */
.ahero .chip{
  background:var(--gold)!important;color:var(--dark)!important;
  margin-bottom:14px;text-decoration:none;
}
.ahero .chip:hover{background:#ffdf72!important}

/* 3. Горизонтальний скрол: clip не ламає sticky (на відміну від hidden) */
html,body{overflow-x:clip;max-width:100%}
.prose img,.prose video,.prose iframe,.prose table,.prose pre{max-width:100%!important;height:auto}
.prose table{display:block;overflow-x:auto}
.prose iframe{width:100%}
.bento,.arch-grid,.cover-grid{max-width:100%}


/* ============================================================
   2.3 — МОБІЛЬНІ ФІКСИ
   ============================================================ */

/* смужка прогресу — на всю ширину шапки */
header.site{position:relative}
.dayline{
  position:absolute!important;left:0;bottom:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--gold),#ffb03d);
  box-shadow:0 0 10px rgba(255,210,63,.55);
  transition:width .1s linear;z-index:5;pointer-events:none;
}

@media(max-width:1000px){
  /* провал: рядки більше не розтягуються під найвищу картку */
  .cover-grid{grid-template-rows:auto!important;gap:16px}
}

@media(max-width:600px){
  /* маленькі картки обкладинки: нормальна пропорція замість смужки 96px */
  .cov:not(.hero){
    height:auto!important;min-height:0!important;
    aspect-ratio:16/10;align-items:flex-end!important;border-radius:18px;
  }
  .cov:not(.hero) .body{padding:16px 18px!important;transform:none}
  .cov:not(.hero) .chip{margin-bottom:8px;padding:4px 10px;font-size:10px}
  .cov:not(.hero) h2{font-size:17px;-webkit-line-clamp:3}
  .cov:not(.hero) .std{display:block!important;margin-top:8px;font-size:11.5px}
  .cov.hero{min-height:0;aspect-ratio:4/5;height:auto}
  .cover-grid{gap:14px}
  /* нічого в статті не вилазить за екран */
  .prose *{max-width:100%!important}
}


/* ============================================================
   2.3.2 — обкладинка на мобільному: колонка замість сітки
   (сітка залишала порожню комірку від десктопної розкладки)
   ============================================================ */
@media(max-width:1000px){
  .cover-grid{
    display:flex!important;flex-direction:column!important;
    grid-template-columns:none!important;grid-template-rows:none!important;
    gap:16px!important;
  }
  .cover-grid > .cov,
  .cover-grid > .cov.hero{
    grid-row:auto!important;grid-column:auto!important;
    width:100%;flex:0 0 auto;
  }
  .cov.hero{min-height:0!important}
}
@media(max-width:600px){
  .cov.hero{aspect-ratio:4/5}
  .cov:not(.hero){aspect-ratio:16/10}
}


/* ============================================================
   2.3.3 — обкладинка на мобільному: найпростіша розкладка.
   Без grid, без flex-gap, без aspect-ratio — Safari їх рахує
   по-своєму. Тільки блоки з фіксованою висотою.
   ============================================================ */
@media(max-width:1000px){
  .cover-grid{
    display:block!important;
    grid-template-columns:none!important;grid-template-rows:none!important;
    gap:0!important;margin-top:20px!important;
  }
  .cover-grid > .cov{
    display:block!important;position:relative!important;
    width:100%!important;margin:0 0 16px 0!important;
    grid-row:auto!important;grid-column:auto!important;
    aspect-ratio:auto!important;height:230px!important;min-height:0!important;
    overflow:hidden;border-radius:18px;
  }
  .cover-grid > .cov.hero{height:430px!important}
  .cover-grid > .cov:last-child{margin-bottom:0!important}
  /* текст притискаємо до низу картки */
  .cover-grid > .cov .body{
    position:absolute!important;left:0;right:0;bottom:0;
    padding:16px 18px!important;transform:none!important;
  }
  .cover-grid > .cov.hero .body{padding:22px!important}
  .cover-grid > .cov .std{display:block!important;margin-top:8px}
  .cover-grid > .cov .read{display:none}
}
@media(max-width:600px){
  .cover-grid > .cov{height:200px!important}
  .cover-grid > .cov.hero{height:380px!important}
  .cover-grid > .cov h2{font-size:16.5px;-webkit-line-clamp:2}
  .cover-grid > .cov.hero h1{font-size:24px;-webkit-line-clamp:3}
}


/* 2.3.5 — повертаємо ширину контейнера (я випадково обнулив її фіксом overflow) */
.wrap{max-width:var(--wrap)!important;margin-left:auto!important;margin-right:auto!important}