/* ДІЄВА «Редакція» v1 — dieva.com.ua Кораловий #FF785F і чорнило #2C2C2C зняті з фірмового фавікона і словомарки. Уся структура прокреслена пензлем: підкреслення і лінійки — не рівні полоси, а мальовані штрихи (інлайнові SVG у background-image). Шрифти: Literata 700 (заголовки) + Nunito Sans 400/700 (текст), підрізані під українську і латиницю, вбудовані в base64 наприкінці файла. */ :root{ --coral:#FF785F; --coral-deep:#E85B41; --coral-soft:#FFEFE9; --ink:#2C2C2C; --ink-soft:#6F6862; --paper:#FFFCF7; --sheet:#FFFFFF; --rule:#E8DFD6; --max:1320px; --bar-h:50px; --hd-top:0px; --brush-coral:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9.5c40-5 84 2 126-1.5s76-4 166 2' fill='none' stroke='%23FF785F' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); --brush-rule:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5c160-3 320 2 480-1s310-4 716 2' fill='none' stroke='%232C2C2C' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); --brush-rule-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5c160-3 320 2 480-1s310-4 716 2' fill='none' stroke='%23E8DFD6' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); --brush-ring:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5c25-1 44 21 45 45 1 26-20 45-45 45S6 76 5 51 25 6 50 5z' fill='none' stroke='%23FF785F' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + 18px);-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--ink); font:400 17px/1.62 "Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit;color:inherit} svg[hidden]{display:none} h1,h2,h3,h4{font-family:Literata,Georgia,serif;font-weight:700;line-height:1.12;margin:0;letter-spacing:-.012em} p{margin:0} ol,ul{margin:0;padding:0;list-style:none} .wrap{width:min(var(--max),100% - 44px);margin-inline:auto} .skip-link{position:fixed;left:14px;top:-70px;z-index:200;background:var(--ink);color:var(--paper);padding:12px 16px;font-weight:700;border-radius:4px;transition:top .18s} .skip-link:focus{top:14px} :focus-visible{outline:3px solid var(--coral);outline-offset:2px} /* ——— мальовані штрихи ————————————————————————————————— */ .brushed{position:relative;display:inline-block;padding-bottom:14px} .brushed::after{ content:"";position:absolute;left:-2px;right:-6px;bottom:2px;height:11px; background:var(--brush-coral) no-repeat center/100% 100%; } .brushed--sm{padding-bottom:11px} .brushed--sm::after{height:8px;bottom:1px} .rule{height:8px;background:var(--brush-rule) no-repeat center/100% 100%} /* ——— шапка ——————————————————————————————————————————— */ .hd{position:sticky;top:var(--hd-top);z-index:60;background:var(--paper)} .hd__top{background:var(--paper)} .hd__top-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px;padding:22px 0 20px} .mark img{height:52px;width:auto} .mark__text{font-family:Literata,serif;font-weight:700;font-size:38px;letter-spacing:-.02em} .hd__line{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;min-width:0} .hd__date{font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft)} .hd__claim{font-family:Literata,serif;font-weight:700;font-size:clamp(13px,1.5vw,18px)} .hd__acts{display:flex;gap:10px;justify-content:flex-end} .btn{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink);background:transparent;padding:9px 14px;font-weight:700;font-size:13px;cursor:pointer;border-radius:22px} .btn:hover{background:var(--coral);border-color:var(--coral);color:#fff} .btn--menu{display:none} .hd__bar{background:var(--paper);border-bottom:2px solid var(--ink)} .hd__bar-in{display:flex;align-items:center;height:var(--bar-h)} .mark--mini{max-width:0;overflow:hidden;opacity:0;transition:max-width .45s ease,opacity .3s ease,margin-right .45s ease;margin-right:0} .mark--mini img{height:24px} .is-condensed .mark--mini{max-width:96px;opacity:1;margin-right:20px} .hd__nav{display:flex;overflow-x:auto;scrollbar-width:none;min-width:0} .hd__nav::-webkit-scrollbar{display:none} .hd__nav a{position:relative;padding:0 15px;line-height:var(--bar-h);font-size:13.5px;font-weight:700;white-space:nowrap} .hd__nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:8px;height:7px;background:var(--brush-coral) no-repeat center/100% 100%;opacity:0;transform:translateY(3px);transition:opacity .22s,transform .22s} .hd__nav a:hover::after{opacity:1;transform:none} .menu{position:fixed;inset:0;z-index:70;background:var(--paper);overflow:auto;padding:76px 0 40px} .menu__in nav{display:grid;gap:0} .menu__in a{font-family:Literata,serif;font-weight:700;font-size:clamp(26px,7vw,40px);padding:14px 0;background:var(--brush-rule-soft) no-repeat bottom/100% 8px} .menu__in a:hover{color:var(--coral-deep)} /* ——— підпис автора ————————————————————————————————————— */ .sign{display:flex;align-items:center;gap:12px;margin-top:20px} .sign__face{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;background:var(--coral-soft);padding:3px} .sign__who{display:grid;gap:1px;min-width:0} .sign__who b{font-family:Literata,serif;font-weight:700;font-size:15.5px} .sign__who span{font-size:12.5px;color:var(--ink-soft)} .sign--row{margin-top:14px} .sign--row .sign__face{width:36px;height:36px} .sign--rail{margin:14px 0 0} .byline{margin-top:9px;font-size:12.5px;font-weight:700;color:var(--coral-deep)} /* ——— перша шпальта ————————————————————————————————————— */ .lead{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:44px 0 38px} .lead__media{aspect-ratio:4/3;border-radius:10px} .lead__text{min-width:0} .kick{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:14px} .tag{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--coral);color:#fff;padding:4px 11px;border-radius:20px} .tag:hover{background:var(--ink)} .tag--plain{background:none;color:var(--coral-deep);padding:0;letter-spacing:.1em} .tag--plain:hover{background:none;color:var(--ink)} .stamp{font-size:12.5px;color:var(--ink-soft)} .lead h1{font-size:clamp(32px,4.2vw,55px);line-height:1.06} .lead h1 a:hover{color:var(--coral-deep)} .lead__dek{margin-top:18px;font-size:18.5px;line-height:1.55;color:#4A4440;max-width:38em} .media{display:block;overflow:hidden;background:var(--coral-soft)} .media img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .media:hover img{transform:scale(1.03)} .briefs{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:0 0 34px;background:var(--brush-rule) no-repeat bottom/100% 8px} .brief{align-content:start;display:grid} .brief h2{font-size:22px} .brief h2 a:hover{color:var(--coral-deep)} .brief__dek{margin-top:9px;font-size:15px;color:var(--ink-soft)} /* ——— редакція: чотири колонки —————————————————————————— */ .desk{padding:40px 0 20px} .desk__head{margin-bottom:26px} .desk h2{font-size:clamp(24px,2.6vw,34px)} .desk__hint{margin-top:8px;font-size:15px;color:var(--ink-soft);max-width:52em} .desk__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0} .col{padding:0 24px;align-content:start;display:grid;background:var(--brush-rule-soft) no-repeat right/8px 100%;background-size:8px 100%} .col:first-child{padding-left:0} .col:last-child{padding-right:0;background:none} .col__head{display:flex;align-items:center;gap:12px;border:0;background:none;padding:0 0 16px;text-align:left;cursor:pointer;width:100%} .col__face{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none;padding:4px;background:var(--brush-ring) no-repeat center/100% 100%} .col__who{display:grid;gap:2px;min-width:0} .col__who b{font-family:Literata,serif;font-weight:700;font-size:16px;padding-bottom:9px} .col__who b::after{height:7px} .col__role{font-size:12px;color:var(--ink-soft)} .col__count{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-deep)} .col__list{display:grid} .col__item{padding:15px 0;background:var(--brush-rule-soft) no-repeat top/100% 8px} .col__item:first-child{background:none;padding-top:0} .col__item .kick{gap:8px;margin-bottom:7px;font-size:11px} .col__item .stamp{font-size:11.5px} .col__media{aspect-ratio:16/10;border-radius:8px;margin-bottom:12px} .col__item h3{font-size:17.5px;line-height:1.24} .col__item h3 a:hover{color:var(--coral-deep)} .col__dek{margin-top:8px;font-size:14px;color:var(--ink-soft)} .col__all{margin-top:16px;font-size:13px;font-weight:700} .col__all a{color:var(--coral-deep)} .col__all a:hover{color:var(--ink)} /* Підсвічування автора по всій сторінці. Вага навмисно з тегом body: правило проявлення `.js-on .row.is-in` стоїть нижче за файлом і за рівної ваги перебило б згасання. */ body.is-focus [data-author]{transition:opacity .25s} body.is-focus [data-author]:not(.is-lit){opacity:.2} body.is-focus .col:not(.is-active) .col__head{opacity:.34;transition:opacity .25s} .col.is-active{background-color:var(--coral-soft);border-radius:14px} /* ——— смуга «ще на сайті» ————————————————————————————— */ .band{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:36px 0 60px;margin-top:26px;background:var(--brush-rule) no-repeat top/100% 8px} .band h2{font-size:19px;margin-bottom:14px} .ranked li{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:11px 0;font-size:16px;line-height:1.32;background:var(--brush-rule-soft) no-repeat top/100% 8px} .ranked li:first-child{background:none} .ranked b{font-family:Literata,serif;font-weight:700;font-size:17px;color:var(--coral)} .plain li{padding:11px 0;font-size:16px;line-height:1.35;display:grid;gap:3px;background:var(--brush-rule-soft) no-repeat top/100% 8px} .plain li:first-child{background:none} .plain time{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)} .ranked a:hover,.plain a:hover{color:var(--coral-deep)} /* ——— шапки внутрішніх сторінок ————————————————————————— */ .head{padding:46px 0 26px} .head__eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:12px} .head h1{font-size:clamp(34px,5vw,62px)} .head__lead{margin-top:16px;font-size:18px;color:var(--ink-soft);max-width:42em} .head__count{margin-top:14px;font-size:14px;color:var(--ink-soft)} .searchform{display:flex;gap:10px;margin-top:24px;max-width:700px} .searchform input{flex:1;min-width:0;border:2px solid var(--ink);background:var(--sheet);padding:14px 18px;font-size:17px;border-radius:26px} .searchform button{border:2px solid var(--ink);background:var(--coral);color:#fff;padding:0 28px;font-weight:700;cursor:pointer;border-radius:26px} .searchform button:hover{background:var(--ink)} .empty{padding:30px 0;background:var(--brush-rule-soft) no-repeat bottom/100% 8px} .empty__lead{font-family:Literata,serif;font-weight:700;font-size:23px;margin-bottom:8px} .empty p{color:var(--ink-soft);max-width:42em} .empty a{color:var(--coral-deep);font-weight:700} .load-more{padding:26px 0;text-align:center} .load-more button{border:2px solid var(--ink);background:transparent;padding:13px 28px;font-weight:700;cursor:pointer;border-radius:26px} .load-more button:hover{background:var(--coral);border-color:var(--coral);color:#fff} /* ——— стрічка рядками ————————————————————————————————— */ .sheet{padding:6px 0 40px} .rows{display:block} .row{display:grid;grid-template-columns:250px minmax(0,1fr);gap:26px;align-items:start;padding:24px 0;background:var(--brush-rule-soft) no-repeat top/100% 8px} .row:first-child{background:none} .row--noimg{grid-template-columns:1fr} .row__media{aspect-ratio:4/3;border-radius:10px} .row__body{min-width:0} .row__body h2{font-size:24px} .row__body h2 a:hover{color:var(--coral-deep)} .row__dek{margin-top:9px;font-size:15.5px;color:var(--ink-soft);max-width:44em} .js-on .row,.js-on .brief,.js-on .col,.js-on .band__col{opacity:0;transform:translateY(12px)} .js-on .row.is-in,.js-on .brief.is-in,.js-on .col.is-in,.js-on .band__col.is-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)} /* ——— матеріал ————————————————————————————————————————— */ .art{padding:40px 0 16px} .art__head{max-width:56rem} .art__head h1{font-size:clamp(31px,4vw,54px);line-height:1.08} .art__lead{margin-top:18px;font-size:19.5px;line-height:1.55;color:#4A4440;max-width:40em} .art__tools{display:flex;align-items:center;gap:16px;margin:24px 0 4px;padding:14px 0;background:var(--brush-rule-soft) no-repeat top/100% 8px,var(--brush-rule-soft) no-repeat bottom/100% 8px} .share__label{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)} .share{display:flex;gap:8px} .share a,.share button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:2px solid var(--ink);background:transparent;cursor:pointer;border-radius:50%;transition:background .18s,color .18s,border-color .18s} .share a:hover,.share button:hover{background:var(--coral);border-color:var(--coral);color:#fff} .share button.is-done{background:var(--ink);border-color:var(--ink);color:#fff} .art__shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;padding-top:26px} .art__sheet{min-width:0} .art__hero{margin:0 0 26px} .art__hero .media{aspect-ratio:16/9;border-radius:12px} .art__hero figcaption{margin-top:9px;font-size:12px;color:var(--ink-soft)} .tts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:13px 18px;background:var(--coral-soft);border-radius:14px;margin-bottom:26px} .tts__label{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase} .tts__ctrl{display:flex;gap:8px} .tts__ctrl button{border:2px solid var(--ink);background:var(--sheet);padding:6px 14px;font-weight:700;font-size:13px;cursor:pointer;border-radius:20px} .tts__ctrl button:hover:not(:disabled){background:var(--coral);border-color:var(--coral);color:#fff} .tts__ctrl button:disabled{opacity:.45;cursor:default} .art__body{font-size:18.5px;line-height:1.75;max-width:40em} .art__body p{margin:0 0 1.15em} .art__body h2{font-size:29px;margin:1.7em 0 .5em} .art__body h3{font-size:23px;margin:1.5em 0 .45em} .art__body a{color:var(--coral-deep);border-bottom:1px solid var(--coral)} .art__body a:hover{background:var(--coral-soft)} .art__body ul,.art__body ol{margin:0 0 1.2em;padding-left:1.3em} .art__body ul li{list-style:disc;margin-bottom:.4em} .art__body ol li{list-style:decimal;margin-bottom:.4em} .art__body blockquote{margin:1.6em 0;padding:2px 0 2px 22px;border-left:4px solid var(--coral);font-size:21px;line-height:1.45;font-family:Literata,serif} .art__body img{height:auto;margin:1.6em 0;border-radius:10px} .art__body figcaption{font-size:12px;color:var(--ink-soft);margin:-1em 0 1.6em} .share--foot{display:flex;align-items:center;gap:16px;margin-top:32px;padding-top:20px;background:var(--brush-rule-soft) no-repeat top/100% 8px} /* Картка автора приходить від платформи всередину .art__body зі своїм