@font-face{font-family:FiraXC;font-weight:800;font-display:swap;src:url(/fonts/fira-sans-extra-condensed-cyrillic-800-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:FiraXC;font-weight:800;font-display:swap;src:url(/fonts/fira-sans-extra-condensed-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026}
@font-face{font-family:Fira;font-weight:400;font-display:swap;src:url(/fonts/fira-sans-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Fira;font-weight:400;font-display:swap;src:url(/fonts/fira-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026}
@font-face{font-family:Fira;font-weight:600;font-display:swap;src:url(/fonts/fira-sans-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Fira;font-weight:600;font-display:swap;src:url(/fonts/fira-sans-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026}
@font-face{font-family:Fira;font-weight:700;font-display:swap;src:url(/fonts/fira-sans-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Fira;font-weight:700;font-display:swap;src:url(/fonts/fira-sans-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026}
/* Особистий сайт Ігоря Петровського. Шкала тексту: 104 / 56 / 26 / 20 / 17 / 16 / 15. Два шрифти: FiraXC лише для h1 і h2, Fira для всього іншого. */
:root{--navy:#0E1F47;--ink:#16213F;--slate:#55617E;--rule:#D5DDF0;--ice:#EEF3FF;--mark:#4A6491;--paper:#fff;
  --btn:#0E1F47;--btn-h:#1B3068;--btn-fg:#fff;--hbtn:#fff;--hbtn-fg:#0E1F47;--band:#EEF3FF;--band-fg:#0E1F47;--bbtn:#0E1F47;--bbtn-fg:#fff;
  --d:FiraXC,"Arial Narrow",sans-serif;--u:Fira,system-ui,sans-serif;
  --f1:clamp(54px,6.6vw,96px);--f2:clamp(34px,4vw,56px);--f3:26px;--f4:20px;--f5:17px;--f6:16px;--f7:15px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 var(--f5)/1.6 var(--u);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a,button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--mark);outline-offset:3px}
h1,h2,h3,h4,p,figure,ul,ol,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2{font-family:var(--d);font-weight:800;letter-spacing:-.005em;color:var(--navy)}
h1{font-size:var(--f1);line-height:.9}
h2{font-size:var(--f2);line-height:1}
h3{font:700 var(--f3)/1.2 var(--u);color:var(--navy)}
h4{font:700 var(--f4)/1.3 var(--u);color:var(--navy)}
.lede{font-size:var(--f4);line-height:1.5}
.sm,figcaption{font-size:var(--f7);line-height:1.4;color:var(--slate)}
.w{max-width:1280px;margin:0 auto;padding:0 40px}
section{scroll-margin-top:70px}
.sec{padding:104px 0 0}
.sec>.w>h2+*{margin-top:40px}

.btn{display:inline-block;font:700 var(--f6)/1 var(--u);padding:18px 26px;border-radius:6px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .15s,transform .1s}
.btn:active{transform:scale(.97)}
.b-main{background:var(--btn);color:var(--btn-fg)}.b-main:hover{background:var(--btn-h)}
.b-out{border-color:var(--navy);color:var(--navy);background:none}.b-out:hover{background:var(--ice)}
.b-hero{background:var(--hbtn);color:var(--hbtn-fg)}
.b-line{border-color:rgba(255,255,255,.7);color:#fff}.b-line:hover{background:rgba(255,255,255,.12)}
.tl{display:inline-block;padding:12px 0;font:600 var(--f6)/1.3 var(--u);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--mark)}
.tl:hover{color:var(--mark)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:var(--navy);font:700 var(--f6)/1 var(--u);padding:14px 18px;border-radius:6px}
.skip:focus{left:8px;top:8px}
.acts{display:flex;gap:14px 28px;flex-wrap:wrap;align-items:center;margin-top:32px}

/* верхня смуга */
.top{position:fixed;inset:0 0 auto 0;z-index:60;color:#fff;transition:background .2s,color .2s}
.top .w{display:flex;align-items:center;gap:28px;height:66px}
.top .me{text-decoration:none;margin-right:auto;padding:10px 0;min-width:0}
.top .me b{display:block;font:700 var(--f5)/1.1 var(--u)}
.top .me span{display:block;font:400 var(--f7)/1.2 var(--u);margin-top:4px;opacity:.8}
.top.home:not(.solid) .me b{display:none}
.top.home:not(.solid) .me span{font:600 var(--f6)/1.3 var(--u);margin:0;opacity:1}
.top nav{display:flex;gap:26px}
.top nav a{font:600 var(--f6)/1 var(--u);text-decoration:none}
.top nav a:hover{text-decoration:underline;text-underline-offset:5px}
.top .btn{padding:12px 18px}
.top .cta{border-color:rgba(255,255,255,.7);color:#fff;background:none}
.top.solid{background:#fff;color:var(--navy);box-shadow:0 1px 0 var(--rule)}
.top.solid .cta{background:var(--btn);color:var(--btn-fg);border-color:transparent}
.top .menu{display:none;font:700 var(--f7)/1 var(--u);padding:12px 14px;border-radius:6px;border:2px solid currentColor;background:none;color:inherit;cursor:pointer}

/* перший екран */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);min-height:min(100vh,800px);background:var(--navy);color:#fff}
.hero .txt{display:flex;flex-direction:column;justify-content:center;gap:48px;padding:124px 56px 60px max(40px,calc((100vw - 1280px)/2 + 40px))}
.hero h1{color:#fff;margin:0 0 0 -.03em}
.hero .sub{margin-top:22px;font-size:var(--f4);line-height:1.4;font-weight:600;color:rgba(255,255,255,.86)}
.hero .lede{max-width:520px;font-size:21px;line-height:1.5}
.hero .go{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px;max-width:520px}
.hero .go .btn{text-align:center;padding:18px 12px}
.hero .where{margin-top:20px;font-size:var(--f7);color:rgba(255,255,255,.74)}
.hero figure{position:relative;min-height:420px}
.hero figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:85% 50%}
.hero figure::before{content:"";position:absolute;inset:0 0 auto 0;height:170px;z-index:1;background:linear-gradient(180deg,rgba(14,31,71,.86) 0,rgba(14,31,71,.72) 70px,rgba(14,31,71,0) 100%)}

/* факти */
.facts{border-bottom:1px solid var(--rule)}
.facts ul{display:grid;grid-template-columns:repeat(4,1fr)}
.facts li{padding:24px 24px 26px 0;font-size:var(--f7);line-height:1.4;color:var(--slate)}
.facts li+li{padding-left:24px;border-left:1px solid var(--rule)}
.facts b{display:block;font-size:var(--f5);line-height:1.3;color:var(--navy);margin-bottom:4px}

/* з чим звертаються */
.when-intro{max-width:760px;margin-top:18px;color:var(--slate)}
.asks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.ask{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:#fff}
.ask img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ask div{padding:22px 24px 26px}
.ask h3{font-size:var(--f4);line-height:1.3;margin-bottom:12px}
.ask li{position:relative;padding:7px 0 7px 18px;font-size:var(--f6);line-height:1.45;border-top:1px solid var(--rule)}
.ask li:first-child{border-top:0}
.ask li::before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--mark)}
.ask.photo{margin:0;border:0;min-height:320px}
.ask.photo img{height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 35%}
.sits{border-bottom:1px solid var(--navy)}
.sits li{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px;padding:24px 0;border-top:1px solid var(--navy);align-items:start}
.sits p{font-size:var(--f4);line-height:1.4;color:var(--navy)}
.sits span{display:block}
.sits .sm{margin-bottom:4px}
.sits a{display:inline-block;padding:11px 0;text-underline-offset:3px;text-decoration-color:var(--mark)}
.trio{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:18px;align-items:end;margin-top:72px}
.trio img{width:100%;object-fit:cover}
figcaption{margin-top:8px}
.trio figure:nth-child(1) img{aspect-ratio:3/4}
.trio figure:nth-child(2) img{aspect-ratio:9/14}
.trio figure:nth-child(3) img{aspect-ratio:9/14}

/* консультація */
.visit{background:var(--ice);padding:104px 0;margin-top:104px}
.cons{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.cons img,.forms img{width:100%;aspect-ratio:4/3;object-fit:cover}
.steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:20px 0;border-top:1px solid #B9C6EA}
.steps li:first-child{border-top:0;padding-top:0}
.steps b{font:700 var(--f4)/1.3 var(--u);color:var(--mark)}
.steps h4{margin-bottom:4px}
.after{margin-top:40px;max-width:820px;color:var(--navy)}
.fh{margin:72px 0 22px}
.fmts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fmt{background:#fff;border-radius:10px;padding:26px 26px 28px;display:flex;flex-direction:column;gap:10px}
.fmt b{font:700 var(--f6)/1 var(--u);color:var(--mark)}
.fmt .sm{margin-top:auto;padding-top:8px}
.go-one{margin-top:28px}
.forms{margin-top:72px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:56px;align-items:center}
.forms h3{margin-bottom:18px}
.forms li{padding:13px 0;border-top:1px solid #B9C6EA}
.forms li:last-child{border-bottom:1px solid #B9C6EA}
.forms .btn{margin-top:26px}
.forms .sm{margin-top:12px}
.faq{margin-top:72px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
.faq details{border-top:1px solid #B9C6EA}
.faq details:last-child{border-bottom:1px solid #B9C6EA}
.faq summary{font-weight:600;padding:16px 44px 16px 0;cursor:pointer;list-style:none;position:relative;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:10px;font:400 26px/1 var(--u);color:var(--mark)}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 44px 18px 0;max-width:720px}

/* перегляд зображення у повному розмірі */
.lb{border:0;padding:0;background:none;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;place-items:center;overflow:hidden}
.lb[open]{display:grid}
.lb::backdrop{background:rgba(9,20,48,.92)}
.lb img{max-width:min(94vw,1200px);max-height:calc(100dvh - 96px);width:auto;height:auto;border-radius:4px;background:#fff}
.lb p{position:fixed;left:0;right:0;bottom:12px;margin:0;padding:0 70px;text-align:center;color:#fff;font-size:var(--f7);white-space:pre-wrap}
.lb button{position:fixed;width:48px;height:48px;border-radius:6px;border:2px solid #fff;background:rgba(14,31,71,.7);color:#fff;font:400 22px/1 system-ui,sans-serif;cursor:pointer}
.lb button:hover{background:#fff;color:var(--navy)}
.lb .x{top:14px;right:14px;font-size:28px}
.lb .lp{left:14px;top:50%;margin-top:-24px}
.lb .ln{right:14px;top:50%;margin-top:-24px}

/* відгуки */
.said .lead{margin-top:14px;color:var(--slate);max-width:620px}
.revs .track figure{flex:none;width:min(280px,70vw);scroll-snap-align:start;margin:0}
.revs .track img{border-radius:8px}
.track a[data-zoom]{display:block;cursor:zoom-in}
.track a[data-zoom]:hover img{opacity:.88}
.car{max-width:1280px;margin:0 auto}
.revs{margin-top:36px}
.ribbon{max-width:none;margin:36px 0 0}
.ribbon .track{display:flex;gap:18px;align-items:flex-start;overflow-x:auto;padding:0 40px 16px max(40px,calc((100vw - 1280px)/2 + 40px));scrollbar-width:none}
.ribbon .track::-webkit-scrollbar{display:none}
.ribbon figure{flex:none;width:520px}
.ribbon img{width:100%;border-radius:10px;display:block}
.ribbon .ctl{max-width:1280px;margin:0 auto}
.track{display:flex;gap:20px;align-items:flex-start;overflow-x:auto;padding:0 40px 18px;scroll-snap-type:x mandatory;scroll-padding-left:40px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track .col{flex:none;width:min(520px,86vw);scroll-snap-align:start;display:grid;gap:14px}
.track img{width:100%;border-radius:10px}
.ctl{display:flex;align-items:center;gap:14px;padding:10px 40px 0}
.ctl button{min-width:48px;height:48px;border-radius:6px;border:2px solid var(--navy);background:none;color:var(--navy);font:400 22px/1 system-ui,sans-serif;cursor:pointer}
.ctl button:hover:not(:disabled){background:var(--navy);color:#fff}
.ctl button:disabled{opacity:.3;cursor:default}
.ctl .pp{font:600 var(--f6)/1 var(--u);padding:0 16px;margin-left:6px}
.ctl .pos{display:none;font-size:var(--f7);color:var(--slate);min-width:56px;text-align:center}

/* про мене */
.about{padding-top:104px}
.about .intro{background:var(--navy);color:#fff;display:grid;grid-template-columns:400px minmax(0,1fr);width:min(1000px,calc(100% - 80px));margin:0 auto}
.about .intro img{width:100%;height:auto;display:block}
.about .intro div{padding:56px;align-self:center}
.about .intro h2{color:#fff}
.about .intro p{margin-top:18px;color:rgba(255,255,255,.9)}
.about .intro p.lede{margin-top:22px;color:#fff}
.about blockquote{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.25);font-size:var(--f5);line-height:1.6;color:rgba(255,255,255,.86)}
.sub{margin:80px 0 26px}
.mos{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.mo{position:relative;overflow:hidden;background:var(--navy);color:#fff;min-height:290px}
.mo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,31,71,.94) 0%,rgba(14,31,71,.5) 44%,rgba(14,31,71,0) 70%)}
.mo div{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px 24px 14px}
.mo h4{color:inherit;margin-bottom:6px}
.mo p{font-size:var(--f6);line-height:1.45;max-width:440px}
.mo a{font:600 var(--f6)/1 var(--u);display:inline-block;padding:14px 0;text-underline-offset:4px}
.mo{grid-column:span 4}
.mo.light{background:var(--ice);color:var(--navy);display:flex;flex-direction:column}.mo.light::after{display:none}
.mo.light img{position:static;height:150px;object-fit:contain;padding:22px 22px 0}
.mo.light div{position:static;margin-top:auto}
.fold summary{list-style:none;pointer-events:none}
.fold summary::-webkit-details-marker{display:none}
.path{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;align-items:start}
.path .cv{order:-1}
.path .story p+p{margin-top:16px}
.path .story figure{margin-top:28px}
.path .story img{width:100%;aspect-ratio:1/1;object-fit:cover}
.path .story figcaption{grid-column:1/-1;margin-top:0}
.cv{font-size:var(--f7);line-height:1.5;border-bottom:1px solid var(--rule)}
.cv li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;padding:9px 0;border-top:1px solid var(--rule)}
.cv span{color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap}
.docs .track figure{flex:none;width:min(280px,70vw);scroll-snap-align:start}
.docs .track img{aspect-ratio:10/7;object-fit:contain;background:var(--ice);padding:12px;border-radius:0}
.docs figcaption{font-weight:600;font-size:var(--f6);color:var(--navy);margin-top:10px}
.docs figcaption span{display:block;font-weight:400;font-size:var(--f7);color:var(--slate)}

/* картки дописів: формат блогу ФТуП */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cd{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.cd .ph{position:relative;display:block;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--ice);margin-bottom:6px}
.cd .ph img{width:100%;height:100%;object-fit:cover}
.cd .ph i{position:absolute;left:12px;top:12px;font:600 var(--f7)/1 var(--u);font-style:normal;background:rgba(14,31,71,.86);color:#fff;padding:7px 10px;border-radius:999px}
.cd .ph.none{background:var(--navy);display:flex;align-items:flex-end;padding:22px}
.cd .ph.none b{font:800 30px/1 var(--d);color:#fff}
.cd[hidden]{display:none}
.cd:hover h4{text-decoration:underline;text-underline-offset:3px}
.cd p{font-size:var(--f6);line-height:1.5;color:var(--slate);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.all{margin-top:28px}
.b-sm{padding:12px 20px;font-size:15px}
.qa .faq{margin-top:0}
.qa .faq details{border-color:var(--rule)}

/* фінал і підвал */
.end{margin-top:104px;background:var(--band);color:var(--band-fg);padding:88px 0}
.end h2{max-width:900px;color:inherit}
.end p{max-width:600px;margin:20px 0 30px}
.end .btn{background:var(--bbtn);color:var(--bbtn-fg)}
.foot{background:var(--navy);color:#C9D5F7;padding:30px 0;font-size:var(--f7);line-height:1.5}
.foot .w{display:flex;gap:14px 28px;flex-wrap:wrap;justify-content:space-between}
.foot nav{display:flex;gap:10px 22px;flex-wrap:wrap}
.foot a{color:#fff}
.foot nav a{display:inline-block;padding:11px 0}
.foot span{padding:11px 0}

/* блог */
.page{padding:120px 0 96px}
.page h1{font-size:var(--f2);line-height:1}
.page .lede{max-width:700px;margin-top:16px}
.page .lede a,.elsewhere a{text-decoration-color:var(--mark);text-underline-offset:3px}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:28px 0 0}
.filters.years{margin:12px 0 30px}
.fl{font:600 var(--f7)/1 var(--u);color:var(--slate);min-width:76px}
.none{margin:20px 0;color:var(--slate)}
.lead-img{margin-top:26px}
.lead-img img{width:100%;max-height:640px;object-fit:contain;background:var(--ice);border-radius:10px}
.filter{font:600 var(--f6)/1 var(--u);color:var(--navy);background:var(--ice);border:0;border-radius:999px;padding:12px 16px;min-height:44px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.filter small{font-weight:400;font-size:var(--f7);color:var(--slate)}
.filter:hover{background:#DFE8FF}
.filter[aria-pressed=true]{background:var(--navy);color:#fff}
.filter[aria-pressed=true] small{color:rgba(255,255,255,.75)}
.more{margin:30px 0 0;text-align:center}
.elsewhere{margin-top:34px;color:var(--slate);max-width:720px}
.nf{padding-bottom:120px}
.article{max-width:760px;margin:0 auto;padding:112px 24px 0}
.article .sm a{display:inline-block;padding:8px 0}
.article h1{font-size:var(--f2);line-height:1;margin:10px 0 12px}
.prose{margin-top:28px;font-size:18px;line-height:1.75}
.prose p{margin-bottom:18px}
.prose p.first{font-weight:600;font-size:var(--f4);line-height:1.5;color:var(--navy)}
.prose a{text-decoration-color:var(--mark);text-underline-offset:3px;word-break:break-word}
.prose ul{margin:0 0 18px;padding-left:22px;list-style:disc}
.prose li{margin-bottom:6px}
.sign{display:grid;grid-template-columns:72px 1fr auto;gap:18px;align-items:center;margin-top:40px;padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sign img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 12%}
.sign b{display:block;color:var(--navy)}
.src{margin-top:8px}
.rel{padding:72px 0 96px}
.article:last-child{padding-bottom:96px}
.rel h2{font:700 var(--f3)/1.2 var(--u);letter-spacing:0;margin-bottom:22px}

@media (max-width:1000px){
  .top .w{gap:10px}
  .top .menu{display:block}
  .top nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:#fff;color:var(--navy);padding:4px 40px 14px;box-shadow:0 14px 24px rgba(14,31,71,.18)}
  .top.open nav{display:flex}
  .top nav a{padding:17px 0;border-top:1px solid var(--rule)}
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero figure{order:-1;min-height:0;aspect-ratio:4/3;margin-top:58px}
  .hero figure::before{display:none}
  .hero .txt{padding:34px 40px 52px}
  .forms,.cons,.faq,.sits li,.about .intro,.path{grid-template-columns:1fr;gap:28px}
  .asks,.fmts{grid-template-columns:1fr 1fr}
  .hero .txt{gap:26px}
  .sits li{gap:10px}
  .about .intro{width:auto}
  .about .intro img{height:100%;max-height:480px;object-fit:cover;object-position:50% 20%}
  .path .cv{order:0}
  .facts ul{grid-template-columns:1fr 1fr}
  .facts li:nth-child(3){padding-left:0;border-left:0}
  .facts li:nth-child(n+3){border-top:1px solid var(--rule)}
  .mo{grid-column:span 6;min-height:340px}
  .cards{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  :root{--f1:15.5vw;--f2:36px;--f3:22px;--f4:18px}
  .w{padding:0 18px}
  .sec,.about{padding-top:68px}
  .sec>.w>h2+*{margin-top:28px}
  .visit{padding:68px 0;margin-top:68px}
  .top .w{height:58px}
  .top.solid .me span{display:none}
  .top .btn{padding:13px 13px}
  .top nav{padding:4px 18px 12px}
  .top .cta span{display:none}
  .top.home:not(.solid) .cta{display:none}
  .hero .txt{padding:26px 18px 40px}
  .hero .go{grid-template-columns:1fr}
  .asks,.fmts{grid-template-columns:1fr;gap:14px}
  .ask.photo{min-height:260px}
  .ribbon .track{padding:0 18px 14px;gap:12px}
  .ribbon figure{width:calc(100vw - 36px)}
  .fl{min-width:0;width:100%}
  .top .me span{font-size:13px}
  .facts li{padding:16px 12px 16px 0}
  .facts li+li{padding-left:12px}
  .trio{gap:8px;margin-top:44px}
  .trio figcaption{font-size:13px}
  .forms,.faq{margin-top:52px}
  .faq details p{padding-right:0}
  .revs{margin-top:26px}
  .track{gap:12px;padding:0 18px 14px;scroll-padding-left:18px}
  .track .col{width:calc(100vw - 48px);gap:10px}
  .revs .track figure{width:calc(100vw - 48px)}
  .ctl{padding:8px 18px 0}
  .ctl .pos{display:block}
  .about .intro div{padding:38px 18px 42px}
  .sub{margin:56px 0 20px}
  .fold summary{pointer-events:auto;cursor:pointer;position:relative;padding-right:44px;min-height:44px}
  .fold summary::after{content:"+";position:absolute;right:4px;bottom:22px;font:400 30px/1 var(--u);color:var(--mark)}
  .fold[open] summary::after{content:"\2013"}
  .fold:not([open]){border-bottom:1px solid var(--rule)}
  .cv li{grid-template-columns:84px minmax(0,1fr);gap:10px}
  .mos{gap:10px}
  .mo{grid-column:span 12;min-height:300px}
  .cards{grid-template-columns:1fr;gap:12px}
  .end{margin-top:68px;padding:60px 0}
  .page{padding-top:92px}
  .article{padding:92px 18px 0}
  .prose{font-size:17px}
  .sign{grid-template-columns:56px 1fr}
  .sign img{width:56px;height:56px}
  .sign .btn{grid-column:1/-1;justify-self:start}
}
/* Пакет 2: перший екран, формати, нижнє мобільне меню */
.hero h1 .sub{display:block;font-family:var(--u);letter-spacing:0;max-width:520px;margin-left:calc(var(--f1)*.03)}
.top.home:not(.solid) .me{visibility:hidden}
.hero .how{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px;margin-top:26px}
.hero .how li{border:1px solid rgba(255,255,255,.34);border-radius:6px;padding:12px 14px;font-size:var(--f7);line-height:1.35;color:rgba(255,255,255,.86)}
.hero .how b{display:block;font:700 var(--f6)/1.2 var(--u);color:#fff;margin-bottom:3px}
.hero .go{margin-top:14px}
.ways{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px}
.ways article{background:#fff;border-radius:10px;padding:26px 26px 28px;border-top:4px solid var(--navy)}
.ways h3{margin-bottom:8px}
.tabs{display:none}
@media (max-width:640px){
  .hero .how{margin-top:0}
  .hero .act{display:flex;flex-direction:column;gap:14px}
  .hero .act .lede{order:3;margin-top:10px;font-size:18px}
  .hero .go{margin-top:0}
  .hero .go .b-line{display:none}
  .hero h1 .sub{font-size:17px;margin-top:12px}
  .ways{grid-template-columns:1fr;gap:14px;margin-top:36px}
  .top .menu,.top .cta,.top.solid .cta{display:none}
  .tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;position:fixed;inset:auto 0 0 0;z-index:55;background:#fff;border-top:1px solid var(--rule);padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 18px rgba(14,31,71,.08)}
  .tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:50px;font:600 11px/1.1 var(--u);color:var(--slate);text-decoration:none;border-radius:8px;-webkit-tap-highlight-color:transparent}
  .tabs a:active{background:var(--ice)}
  .tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabs a[aria-current]{color:var(--navy);background:var(--ice)}
  .tabs .write{background:var(--btn);color:#fff}
  .tabs .write:active{background:var(--btn-h)}
  .foot{padding-bottom:calc(30px + 64px + env(safe-area-inset-bottom))}
}

@media (max-width:640px){
  :root{--f1:13.2vw}
  .hero figure{aspect-ratio:16/10;margin-top:0}
  .hero .txt{gap:18px;padding:20px 18px 34px}
}
/* Пакет 3: блоки головної */
.ask details{padding:22px 24px 26px}
.ask summary{list-style:none;pointer-events:none}
.ask summary::-webkit-details-marker{display:none}
.mos-pos{display:none}
.path{grid-template-columns:1fr;gap:32px}
.path .story{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;align-items:start}
.path .story p{grid-column:1}
.path .story figure{grid-column:2;grid-row:1/span 3;margin-top:0}
.fold .cvfold summary{list-style:none;pointer-events:auto;cursor:pointer;display:inline-block;font:700 var(--f6)/1 var(--u);padding:15px 22px;min-height:0;border:2px solid var(--navy);border-radius:6px;color:var(--navy)}
.fold .cvfold summary::after{content:none}
.cvfold summary::-webkit-details-marker{display:none}
.cvfold summary:hover{background:var(--navy);color:#fff}
.cvfold .b,.cvfold[open] .a{display:none}
.cvfold[open] .b{display:inline}
.cvfold[open] .cv{margin-top:24px;columns:2;column-gap:64px;border-bottom:0}
.cvfold .cv li{break-inside:avoid}
.said .lead a{color:inherit;text-decoration-color:var(--mark);text-underline-offset:3px}
@media (min-width:641px){
  .revs .track figure{width:min(440px,70vw)}
}
@media (max-width:1000px){
  .path .story{grid-template-columns:1fr}
  .path .story figure{grid-column:1;grid-row:auto;margin-top:28px}
  .cvfold[open] .cv{columns:1}
}
@media (max-width:640px){
  .ask{display:block;position:relative}
  .ask>img{position:absolute;left:12px;top:12px;width:56px;height:56px;aspect-ratio:1;border-radius:8px}
  .ask details{padding:0}
  .ask summary{pointer-events:auto;cursor:pointer;display:flex;align-items:center;min-height:80px;padding:12px 50px 12px 82px;position:relative}
  .ask summary h3{margin:0;font-size:17px;line-height:1.25}
  .ask summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font:400 28px/1 var(--u);color:var(--mark)}
  .ask details[open] summary::after{content:"\2013"}
  .ask ul{padding:0 16px 16px}
  .ask.photo>img{position:static;width:100%;height:100%;border-radius:0}
  .mos{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:0 18px 4px;scroll-padding-left:18px;scrollbar-width:none}
  .mos::-webkit-scrollbar{display:none}
  .mo{flex:0 0 84%;scroll-snap-align:start;min-height:330px}
  .mos-pos{display:block;margin-top:10px;font-size:var(--f7);color:var(--slate)}
  .fold .cvfold summary{display:block;text-align:center}
}
/* Пакет 4а: рубрика і рік як випадні меню */
.sorts{display:flex;flex-wrap:wrap;gap:16px;margin:28px 0 30px}
.sort{display:flex;flex-direction:column;gap:8px;font:600 var(--f7)/1 var(--u);color:var(--slate)}
.sort select{appearance:none;-webkit-appearance:none;font:600 var(--f6)/1.2 var(--u);color:var(--navy);background:var(--ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230E1F47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center/14px 9px;border:0;border-radius:14px;padding:14px 48px 14px 18px;min-height:50px;max-width:100%;cursor:pointer;text-overflow:ellipsis}
.sort.r select{min-width:380px}
.sort.y select{min-width:200px}
.sort select:hover{background-color:#DFE8FF}
.sort select:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (max-width:640px){.sorts{gap:12px;margin:22px 0 24px}.sort{width:100%}.sort.r select,.sort.y select{width:100%;min-width:0}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}