/* ============ SKERRY · спільний каркас. Скін перевизначає лише токени ============ */ *{box-sizing:border-box;margin:0} html{scroll-behavior:smooth} /* ---- смуга прокрутки ---- Стандартна сіра смуга Windows лягала поверх бірюзи чужим шматком. Колір беремо з --ink через color-mix, тому одні й ті самі три рядки працюють і на світлих скінах, і на темних: повзунок завжди трохи темніший (світліший) за фон, а не сірий сам по собі. Firefox розуміє тільки scrollbar-width/scrollbar-color — там смуга виходить тонкою без стрілок; Chrome і Edge беруть ::-webkit-*, де ще й радіус із відступом від краю. Доріжка прозора в обох: під нею видно фон сторінки, а не білу канавку. */ html{scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--ink) 26%,transparent) transparent} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:transparent} /* перший background — запасний, на випадок якщо браузер не рахує color-mix усередині псевдоелемента смуги: тоді лишиться нейтральний напівпрозорий повзунок, а не порожнеча, в якій не видно, де ти на сторінці */ ::-webkit-scrollbar-thumb{border-radius:999px; background-color:rgba(128,128,128,.42); background-color:color-mix(in srgb,var(--ink) 26%,transparent); border:3px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background-color:rgba(128,128,128,.62); background-color:color-mix(in srgb,var(--ink) 42%,transparent)} ::-webkit-scrollbar-corner{background:transparent} body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.62; -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;isolation:isolate} img{max-width:100%;display:block} a{color:inherit} button{font:inherit;color:inherit} h1,h2,h3,h4{font-family:var(--disp);font-weight:var(--dw,700);line-height:1.09;letter-spacing:var(--dls,-.025em);text-wrap:balance} p{color:var(--ink2)} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} /* 27.08: вміст був на 1120px і на широкому моніторі читався вузькою колонкою посеред порожнечі — «шаблонно посередині», як сказала власниця, тоді як у конкурентів сторінка йде ближче до країв. Тепер вміст, шапка й підвал живуть на одній ширині: картки стають у край з логотипом, а не всередині нього. Довгі рядки тексту від цього не постраждали: проза має власні стелі (.lead 58ch, .sub, .note, .ctanote), тож ширшає саме те, що від ширини виграє, — сітки карток, таблиці й галереї. */ .w{width:min(var(--maxw,1480px),100%);margin:0 auto; padding-left:clamp(18px,3.6vw,64px);padding-right:clamp(18px,3.6vw,64px)} .hd .w{width:min(var(--maxwide,1480px),100%)} /* Підвал ширший за решту шаблону (28.08, прохання власниці): він тримає три колонки посилань і велике слово, і на 1480 вони тіснились. */ footer .w{width:min(var(--maxfoot,1780px),100%)} /* Поля з 1280px, де зʼявляються бічні рейки, задані нижче — одним правилом на шапку, вміст і підвал, поруч із самими рейками. */ .wn{width:min(1040px,100%);margin:0 auto;padding:0 clamp(18px,4vw,44px)} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);display:block} .lead{font-size:clamp(15.5px,1.7vw,18.5px);color:var(--ink2);max-width:58ch} section{padding:clamp(44px,7vw,104px) 0} section.tight{padding-top:0} h1{font-size:clamp(32px,5.4vw,62px)} h2{font-size:clamp(23px,3.4vw,38px)} h3{font-size:17px} .sub{margin-top:12px;max-width:58ch;font-size:15px} .hr{height:1px;background:var(--line);border:0} /* ---- шапка ---- */ .hd{position:sticky;top:0;z-index:90;background:var(--hdbg,var(--bg));border-bottom:1px solid var(--line); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); transition:background .35s,border-color .35s,backdrop-filter .35s} /* поки сторінка не зрушила — шапка прозора й лежить на першому екрані */ .hd.top{background:transparent;border-bottom-color:transparent; -webkit-backdrop-filter:none;backdrop-filter:none} /* поки шапка прозора — і кружечки теж напівпрозорі, лише зі скла */ .hd.top .ctrls .s3{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);opacity:.72; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .hd.top .ctrls .th.in{box-shadow:inset 0 0 0 1px var(--acc)} .hd.top .ctrls .s3:hover{opacity:1} .ctrls .s3{transition:background .35s,box-shadow .35s,opacity .35s} /* Шапка тонка: вона лежить поверх першого екрана, тож кожен зайвий піксель тут зʼїдає герой. Висота ще трохи росте з шириною екрана, але стеля низька — смуга має лишатись смугою. Тільки padding-top/bottom - горизонтальні поля лишаються за .hd .w, інакше скорочений запис padding знову їх затре. */ .hd .in{display:flex;align-items:center;gap:clamp(12px,1.2vw,22px); /* 27.08: шрифт у шапці підріс, а сама смуга рости не мусить — власниця окремо просила її звузити. Тому поля навколо стиснуті рівно на те, на що погладшав вміст: висота лишається та сама. */ padding-top:clamp(7px,0.5vw,11px);padding-bottom:clamp(7px,0.5vw,11px)} /* Зона натискання логотипа - на всю висоту шапки, а не 24px по літерах: промазати повз "SKERRY" було легше, ніж влучити. Відʼємні поля тримають верстку на місці, тобто росте тільки клікабельна площа. */ .hd .lg{padding:14px 10px;margin:-14px 0 -14px -10px} /* 27.08: логотип у шапці підріс — на широкому екрані 15px губились поруч із меню. У підвалі .lg лишається як був, тому правка scoped. */ .hd .lg{font-size:18.5px;gap:11px} .hd .lg svg{width:24px;height:24px} .lg{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;font-size:15px; letter-spacing:-.02em;text-decoration:none;flex:0 0 auto} .lg svg{width:19px;height:19px;overflow:visible} .lg polygon{fill:var(--acc)} /* горизонт під скелею: тонший і тихіший за сам знак, щоб читався як вода, а не як підкреслення. Товщина в одиницях viewBox: 3.2 з 64 — це приблизно піксель на екрані, тобто волосина, а не смуга. */ .lg .hz{fill:none;stroke:var(--ink2);stroke-width:3.2;stroke-linecap:round;opacity:.45} .hd nav{display:flex;gap:2px;margin-left:auto} /* бічні пункти шапки (27.08): «Статті»+«Про мене» зліва, «Кейси» справа. .hacc — акцентне виділення, як просили «жовтим» */ .hside{display:flex;gap:4px;align-items:center} .hside a,.hcase{font-size:13.5px;color:var(--ink2);text-decoration:none; padding:8px 12px;border-radius:var(--rs,8px);white-space:nowrap} .hside a:hover,.hcase:hover{color:var(--ink);background:var(--hov)} .hside .hacc{color:var(--acc);font-weight:700} .hcase{flex:0 0 auto} .hd nav a.mo{display:none} @media(max-width:900px){ .hside,.hcase{display:none} .hd nav a.mo{display:block} } .hd nav a{font-size:15px;color:var(--ink2);text-decoration:none;padding:8px 13px;border-radius:var(--rs,8px); transition:color .2s,background .2s} .hd nav a:hover{color:var(--ink);background:var(--hov)} /* друга мова лежить під першою й тримає ширину — шапка не стрибає */ /* .hside/.hcase лежать поза