/* ==========================================================================
   visa-help.com.ua · макет v2-a «Редакційний журнал»
   Польський плакат + штамп у паспорті. Без JS, без зовнішніх запитів.
   Шрифти (OFL, self-hosted): Science Gothic (заголовки, мітки, цифри) + Literata (текст).
   ========================================================================== */

/* ---------- 1. Шрифти ---------- */
@font-face{font-family:"VH Display";src:url("fonts/sg-display.woff2") format("woff2");font-weight:1 1000;font-style:normal;font-display:swap}
@font-face{font-family:"VH Label";src:url("fonts/sg-label.woff2") format("woff2");font-weight:1 1000;font-style:normal;font-display:swap}
@font-face{font-family:"VH Num";src:url("fonts/sg-num.woff2") format("woff2");font-weight:1 1000;font-style:normal;font-display:swap}
@font-face{font-family:"VH Text";src:url("fonts/li-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"VH Text";src:url("fonts/li-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"VH Text";src:url("fonts/li-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
/* Запасні з підігнаними метриками (менше зсуву, поки вантажиться шрифт) */
@font-face{font-family:"VH Text FB";src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Liberation Serif"),local("LiberationSerif");font-weight:400;size-adjust:118.4%;ascent-override:99.4%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"VH Text FB";src:local("Times New Roman Bold"),local("TimesNewRomanPS-BoldMT"),local("Liberation Serif Bold"),local("LiberationSerif-Bold");font-weight:700;size-adjust:117.3%;ascent-override:100.4%;descent-override:26.3%;line-gap-override:0%}
@font-face{font-family:"VH Display FB";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");font-weight:1 1000;size-adjust:97.4%;ascent-override:111.7%;descent-override:39.8%;line-gap-override:0%}
@font-face{font-family:"VH Label FB";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");font-weight:1 1000;size-adjust:124.1%;ascent-override:87.7%;descent-override:31.3%;line-gap-override:0%}
@font-face{font-family:"VH Num FB";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");font-weight:1 1000;size-adjust:116.2%;ascent-override:93.6%;descent-override:33.4%;line-gap-override:0%}

/* ---------- 2. Токени ---------- */
:root{
  color-scheme:light;
  --paper:oklch(96.5% .014 85);
  --paper-2:oklch(92.5% .024 80);
  --ink:oklch(21% .02 40);
  --ink-2:oklch(36% .02 40);
  --ink-3:oklch(46% .02 45);
  --line:oklch(82% .02 70);
  --red:oklch(64% .2 36);          /* заливка: «штемпельна» кіновар */
  --red-ink:oklch(52% .19 33);     /* посилання й акценти на папері (5.5:1) */
  --red-deep:oklch(43% .16 30);    /* hover */
  --mint:oklch(91% .055 165);      /* «візовий бланк» */
  --night:oklch(20% .018 40);
  --night-2:oklch(30% .02 40);
  --night-mute:oklch(78% .02 70);
  --red-night:oklch(68% .19 38);   /* акцент на темному (5.8:1) */

  --f-display:"VH Display","VH Display FB",Impact,"Arial Narrow",sans-serif;
  --f-label:"VH Label","VH Label FB",Arial,sans-serif;
  --f-num:"VH Num","VH Num FB",Arial,sans-serif;
  --f-text:"VH Text","VH Text FB",Georgia,serif;

  --ease:cubic-bezier(.23,1,.32,1);
  --g:16px;                 /* бокове поле */
  --max:86rem;              /* 1376px контенту */
  --text:1.0625rem;
  --measure:40rem;
  --rail:0px; --gap:0px; --gap2:0px; --side:0px;
  --rule:2px solid var(--ink);
}
@media (min-width:700px){:root{--g:32px;--text:1.125rem}}
@media (min-width:1100px){:root{--rail:5rem;--gap:1.5rem;--gap2:2.5rem;--side:17rem;--measure:38rem}}
@media (min-width:1280px){:root{--rail:7rem;--gap:2rem;--gap2:3rem;--side:19rem;--measure:40rem}}
@media (min-width:1440px){:root{--rail:9rem;--gap:2.5rem;--gap2:4.5rem;--side:22rem}}

/* ---------- 3. База ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:1.5rem}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--text)/1.68 var(--f-text);font-kerning:normal;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-ink);text-decoration-thickness:1px;text-underline-offset:.18em;transition:color .15s var(--ease)}
@media (hover:hover) and (pointer:fine){a:hover{color:var(--red-deep);text-decoration-thickness:2px}}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
h1,h2,h3,h4{text-wrap:balance;font-weight:400}
p,li{text-wrap:pretty}
ul,ol{padding-left:1.25rem}
strong,b{font-weight:700}
::selection{background:var(--red);color:var(--ink)}
@view-transition{navigation:auto}

.skip{position:absolute;left:8px;top:-80px;z-index:60;background:var(--ink);color:var(--paper);padding:.75rem 1rem;font:1rem/1 var(--f-label);text-transform:uppercase;letter-spacing:.08em;text-decoration:none}
.skip:focus{top:8px}
.wrap{max-width:calc(var(--max) + 2*var(--g));margin-inline:auto;padding-inline:var(--g)}
.lbl{font-family:var(--f-label);font-size:.75rem;line-height:1.2;letter-spacing:.14em;text-transform:uppercase}

/* ---------- 4. Шапка ---------- */
.mast{--mh:68px;position:relative;z-index:30;background:var(--paper);border-top:6px solid var(--red);border-bottom:var(--rule)}
.t-home .mast{--mh:62px;background:var(--red);border-top:0;border-bottom-color:transparent}
.mast__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:60px}
.brand{display:inline-flex;align-items:baseline;color:var(--ink);text-decoration:none;font-family:var(--f-display);font-size:1.625rem;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.brand__b{color:var(--red-ink)}
@media (max-width:359.98px){.mast__in{gap:.5rem}.brand{font-size:1.375rem}.brand__c{letter-spacing:.08em}}
.t-home .brand__b{color:var(--paper)}
.brand__c{margin-left:.3em;font-family:var(--f-label);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;align-self:center;transform:translateY(.1em)}
@media (hover:hover) and (pointer:fine){.brand:hover{color:var(--ink)}}

.nav-t{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.nav-btn{display:inline-flex;align-items:center;gap:.625rem;min-height:44px;padding:0 .875rem;margin-right:-.875rem;font:.8125rem/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .16s var(--ease)}
.nav-btn:active{transform:scale(.97)}
.nav-t:focus-visible+.nav-btn{outline:3px solid var(--ink);outline-offset:2px}
.nav-btn__ico{position:relative;width:22px;height:2px;background:currentColor;box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.nav-t:checked+.nav-btn .nav-btn__ico{transform:rotate(45deg);box-shadow:0 0 0 currentColor,0 0 0 currentColor}
.nav-t:checked+.nav-btn .nav-btn__ico::after{content:"";position:absolute;inset:0;background:currentColor;transform:rotate(90deg)}
.menu,.sub{list-style:none;margin:0;padding:0}
.menu a{text-decoration:none}

@media (max-width:1099.98px){
  .mast{position:sticky;top:0}
  html{scroll-padding-top:5rem}
  .nav{display:none;position:fixed;left:0;right:0;top:var(--mh);bottom:0;overflow-y:auto;overscroll-behavior:contain;background:var(--night);color:var(--paper);padding:.5rem var(--g) 3rem}
  .nav-t:checked~.nav{display:block;animation:nav-in .22s var(--ease)}
  body:has(.nav-t:checked){overflow:hidden}
  .menu>li{border-bottom:1px solid var(--night-2)}
  .menu>li>a{display:flex;align-items:center;min-height:64px;color:var(--paper);font-family:var(--f-display);font-size:2rem;line-height:1}
  .menu>li>a[aria-current]{color:var(--red-night)}
  .sub{padding:0 0 1rem}
  .sub a{display:flex;align-items:center;min-height:44px;color:var(--night-mute);font-size:1rem;line-height:1.3}
  .sub--cities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem}
  .nav :focus-visible{outline-color:var(--paper)}
}
@keyframes nav-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (min-width:1100px){
  .nav-btn,.nav-t{display:none}
  .mast__in{min-height:72px}
  .brand{font-size:2rem}
  .menu{display:flex;align-items:center;gap:.25rem}
  .menu>li{position:relative}
  .menu>li>a{display:flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .75rem;color:var(--ink);font:.75rem/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase}
  .has-sub>a::after{content:"";width:.4em;height:.4em;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-.15em) rotate(45deg)}
  .menu>li>a[aria-current]{box-shadow:inset 0 -3px 0 var(--ink)}
  .t-post .menu>li>a[aria-current]{box-shadow:inset 0 -3px 0 var(--red)}
  .sub{position:absolute;left:0;top:100%;min-width:17rem;padding:.5rem;background:var(--paper);border:var(--rule);box-shadow:6px 6px 0 var(--ink);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .15s var(--ease),transform .15s var(--ease),visibility 0s linear .15s}
  .has-sub:hover>.sub,.has-sub:focus-within>.sub{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .sub a{display:flex;align-items:center;min-height:40px;padding:.25rem .75rem;color:var(--ink);font-size:.9375rem;line-height:1.3}
  .sub a:hover{background:var(--mint);color:var(--ink)}
  .sub--cities{display:grid;grid-template-columns:repeat(3,minmax(9.5rem,1fr));min-width:31rem;left:auto;right:0}
  .menu>.has-sub:nth-last-child(-n+2)>.sub{left:auto;right:0}
  .menu>li>a:hover{color:var(--ink);background:color-mix(in oklch,var(--ink) 8%,transparent)}
}

/* ---------- 5. Обкладинка головної ---------- */
.cover{background:var(--red);color:var(--ink);overflow:clip}
.cover__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);padding-top:.75rem;padding-bottom:1.5rem;border-top:var(--rule)}
.cover__title{margin:0;font-family:var(--f-display);font-weight:400;font-size:18vw;line-height:.8;letter-spacing:-.015em;padding-top:.06em}
.cover__lede{margin:1.25rem 0 0;max-width:min(13.75rem,calc(100% - 7.75rem));font-size:1.0625rem;line-height:1.45}
.stamp{display:block;width:7.25rem;height:auto;color:var(--ink);transform:rotate(-12deg);animation:stamp .42s var(--ease) .2s both;pointer-events:none}
.cover .stamp{position:absolute;right:calc(var(--g) - .25rem);bottom:1.1rem}
@media (max-width:599.98px){.cover .stamp{width:6.5rem;bottom:.75rem}} /* штамп нижче рядка «ПОЛЬЩУ» */
@media (max-width:359.98px){.cover .stamp{width:6rem}.cover__lede{max-width:calc(100% - 6.5rem);font-size:1rem}}
.stamp text{font-family:var(--f-label);fill:currentColor;text-transform:uppercase}
.stamp__ring{font-size:18px}
.stamp .stamp__pl{font-family:var(--f-display);font-size:76px;text-transform:none}
.stamp .stamp__pl--s{font-size:50px}
.stamp .stamp__pl--n{font-size:64px}
.stamp__ua{font-size:15px;letter-spacing:.1em}
@keyframes stamp{from{opacity:0;transform:rotate(-26deg) scale(1.3)}to{opacity:1;transform:rotate(-12deg) scale(1)}}
@media (min-width:700px){
  .cover__in{padding-bottom:1.75rem}
  .cover__title{font-size:calc((100vw - 2*var(--g) - 10rem)/7.3)} /* H1 одним рядком лівіше штампа (ширина рядка ≈7,2em) */
  .cover__lede{max-width:min(26rem,calc(100% - 10rem));font-size:1.1875rem}
  .cover .stamp{width:8.5rem;bottom:1rem}
}
@media (min-width:1200px){
  .cover__in{grid-template-columns:minmax(0,1fr) minmax(0,17rem) auto;column-gap:var(--g);align-items:end;padding-top:1rem;padding-bottom:1.75rem}
  .cover__title{grid-column:1;grid-row:1;font-size:min(calc((min(100vw - 2*var(--g),var(--max)) - 2*var(--g) - 17rem - min(10vw,9.5rem))/7.3),7.75rem)}
  .cover__lede{grid-column:2;grid-row:1;margin:0 0 .2rem;font-size:1.125rem;line-height:1.4;max-width:none}
  .cover .stamp{position:static;grid-column:3;grid-row:1;align-self:center;width:min(10vw,9.5rem)}
}

/* ---------- 6. Навігатор «Яка віза вам потрібна?» ---------- */
.pick{padding-block:2rem 3rem;border-bottom:var(--rule)}
.pick__in{display:grid;gap:1.25rem}
.pick__h{margin:0;font-family:var(--f-display);font-size:clamp(2.125rem,1.3rem + 2.6vw,3.75rem);line-height:.92;letter-spacing:-.01em}
.pick__hint{margin:.75rem 0 0;color:var(--ink-2);font-size:1rem;line-height:1.45;max-width:20rem}
.pick__list{list-style:none;margin:0;padding:0;display:grid;gap:.625rem}
.pick__i>a{position:relative;display:grid;grid-template-columns:2.75rem minmax(0,1fr) auto;grid-template-areas:"n q box" "n a box";column-gap:.75rem;align-items:center;min-height:5rem;padding:.875rem 1rem;background:var(--paper);color:var(--ink);border:var(--rule);text-decoration:none;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease)}
.pick__n{grid-area:n;align-self:start;font-family:var(--f-num);font-size:1.5rem;line-height:1;color:var(--red-ink);padding-top:.15rem}
.pick__q{grid-area:q;font-family:var(--f-display);font-size:1.5rem;line-height:1.02;letter-spacing:-.005em}
.pick__a{grid-area:a;margin-top:.3rem;font-size:.9375rem;line-height:1.3;color:var(--ink-2)}
.pick__a::after{content:" →";white-space:nowrap}
.pick__box{grid-area:box;position:relative;width:1.5rem;height:1.5rem;border:2px solid currentColor;flex:none}
.pick__box::after{content:"";position:absolute;left:.32rem;top:-.05rem;width:.55rem;height:1.05rem;border:solid var(--red-ink);border-width:0 .28rem .28rem 0;transform:rotate(40deg) scale(.4);opacity:0;transition:transform .2s var(--ease),opacity .12s var(--ease)}
.pick__i>a:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
  .pick__i>a:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink);color:var(--ink)}
  .pick__i>a:hover .pick__box::after{opacity:1;transform:rotate(40deg) scale(1)}
}
.pick__i>a:focus-visible .pick__box::after{opacity:1;transform:rotate(40deg) scale(1)}
/* ролі кольору */
.pick__i--ink>a{background:var(--night);color:var(--paper);border-color:var(--night)}
.pick__i--ink .pick__n{color:var(--red-night)}
.pick__i--ink .pick__a{color:var(--night-mute)}
.pick__i--ink .pick__box::after{border-color:var(--red-night)}
@media (hover:hover) and (pointer:fine){.pick__i--ink>a:hover{color:var(--paper);box-shadow:6px 6px 0 var(--red)}}
.pick__i--ink>a:focus-visible{outline-color:var(--red-ink)}
.pick__i--mint>a{background:var(--mint)}
.pick__i--red>a{background:var(--red)}
.pick__i--red .pick__n,.pick__i--red .pick__a{color:var(--ink)}
.pick__i--red .pick__box::after{border-color:var(--ink)}
@media (min-width:700px){
  .pick__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1100px){
  .pick{padding-block:1.75rem 3rem}
  .pick__in{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--g)}
  .pick__list{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(8.75rem,auto);gap:.75rem}
  .pick__i--wide{grid-column:span 2}
  .pick__i>a{height:100%;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;grid-template-areas:"n box" "q q" "a a";align-items:start;padding:.875rem 1.125rem 1rem}
  .pick__q{align-self:end;font-size:clamp(1.5rem,.8rem + 1.1vw,2.125rem);margin-top:1rem}
  .pick__i--wide .pick__q{font-size:clamp(1.875rem,1rem + 1.6vw,2.875rem)}
  .pick__n{font-size:1.375rem}
}

/* ---------- 6a. Черги на кордоні — огляд під обкладинкою (tpl/granica-brief.php) ----------
   Темна смуга: 4 пункти × легкові / вантажні / автобуси, клік — на сторінку пункту.
   Вузько — рядки таблицею (підписи видно в першому рядку), від 700px — картки. */
.gb{background:var(--night);color:var(--paper)}
.gb :focus-visible{outline-color:var(--paper)}
.gb__in{display:grid;gap:1.25rem;padding-block:1.75rem 1.5rem}
.gb__h{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem);line-height:.92;letter-spacing:-.01em}
.gb__dir{margin:.625rem 0 0;font-size:1rem;line-height:1.4}
.gb__when{margin:.375rem 0 0;font-size:.875rem;line-height:1.45;color:var(--night-mute)}
.gb__warn{margin:.75rem 0 0;padding:.625rem .75rem;background:var(--red);color:var(--ink);font-weight:700;font-size:.9375rem;line-height:1.4}
.gb__all{margin:.25rem 0 0}
.gb .more{color:var(--paper);border-color:var(--red-night)}
.gb__list{list-style:none;margin:0;padding:0;display:grid;border-top:2px solid var(--night-mute)}
.gb__pt>a{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name v" "pl v" "old old";column-gap:.5rem;align-items:end;padding-block:.75rem;border-bottom:1px solid var(--night-2);color:var(--paper);text-decoration:none;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.gb__name{grid-area:name;font-family:var(--f-display);font-size:1.0625rem;line-height:1}
.gb__name::after{content:" →";font-family:var(--f-text);font-size:.8em;color:var(--red-night)}
.gb__pl{grid-area:pl;margin-top:.3rem;font:.625rem/1.2 var(--f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--night-mute)}
.gb__v{grid-area:v;display:grid;grid-template-columns:repeat(3,4.75rem);margin:0;text-align:right}
.gb__v dt{font:.5625rem/1.2 var(--f-label);letter-spacing:.04em;text-transform:uppercase;color:var(--night-mute);margin-bottom:.375rem}
.gb__pt:not(:first-child) .gb__v dt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gb__v dd{margin:0;font-family:var(--f-num);font-size:1.125rem;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.gb__old,.gb__none{grid-area:old;margin-top:.5rem;font-size:.8125rem;line-height:1.35;color:var(--red-night);font-weight:700}
.gb__none{grid-area:v;margin:0}
.gb__src{margin:0;font-size:.8125rem;line-height:1.5;color:var(--night-mute)}
.gb__src a{color:var(--paper)}
@media (hover:hover) and (pointer:fine){.gb__src a:hover{color:var(--red-night)}}
@media (max-width:359.98px){.gb__v{grid-template-columns:repeat(3,4rem)}.gb__v dd{font-size:.9375rem}.gb__name{font-size:.9375rem}}
@media (min-width:700px){
  .gb__in{padding-block:2rem 1.75rem}
  .gb__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;border-top:0}
  .gb__pt>a{display:flex;flex-direction:column;align-items:stretch;height:100%;padding:1rem 1rem 1.125rem;border:2px solid var(--night-mute)}
  .gb__pt>a:active{transform:scale(.98)}
  .gb__name{font-size:1.625rem}
  .gb__v{display:block;margin-top:.75rem;text-align:left}
  .gb__v>div{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;padding-block:.375rem .3rem;border-top:1px solid var(--night-2)}
  .gb__v dt,.gb__pt:not(:first-child) .gb__v dt{position:static;width:auto;height:auto;overflow:visible;clip-path:none;margin:0;font-size:.6875rem;letter-spacing:.08em}
  .gb__v dd{font-size:1.5rem}
  .gb__none{margin-top:.75rem}
}
@media (min-width:700px) and (hover:hover) and (pointer:fine){.gb__pt>a:hover{color:var(--paper);border-color:var(--paper);transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--red)}}
@media (min-width:1100px){
  .gb__head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--g);align-items:end}
  .gb__head>:not(.gb__all){grid-column:1}
  .gb__all{grid-column:2;grid-row:1/span 3;margin:0}
  .gb__list{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1280px){
  .gb__in{grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--g);row-gap:1rem;padding-block:2.25rem 1.75rem}
  .gb__head{display:block}
  .gb__all{margin-top:.75rem}
  .gb__head{grid-row:1/span 2}
  .gb__list{align-self:start}
  .gb__src{grid-column:2;align-self:start}
}

/* ---------- 7. Сітка статті (головна й пост) ----------
   Ліва колонка: великі номери кроків/розділів. Справа: липка панель (центри / зміст).
   Тіло тексту лишається як є; розкладку дає лише CSS. */
.story,.post{display:grid;grid-template-columns:[full-start] var(--g) [rail-start wide-start text-start] minmax(0,1fr) [mid] minmax(0,1fr) [text-end wide-end rail-end side-start side-end] var(--g) [full-end]}
@media (min-width:1100px){
  .story,.post{grid-template-columns:[full-start] minmax(var(--g),calc((100% - var(--max))/2)) [rail-start wide-start] minmax(var(--rail),1fr) [rail-end] var(--gap) [text-start] minmax(0,calc(var(--measure)/2)) [mid] minmax(0,calc(var(--measure)/2)) [text-end] var(--gap2) [side-start] var(--side) [side-end wide-end] minmax(var(--g),calc((100% - var(--max))/2)) [full-end]}
  .story__art{grid-row:1}
}
.story__art,.prose{grid-column:full;display:grid;grid-template-columns:subgrid;align-content:start}
.prose>*{grid-column:text;margin-block:0 1.25em}
.story__art>.ad{grid-column:text}

/* ---------- 8. Типографіка тіла ---------- */
.prose h2{font-family:var(--f-display);line-height:.95;letter-spacing:-.01em;margin:2.75em 0 .6em}
.prose h3{font-family:var(--f-display);font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);line-height:1;margin:2.25em 0 .6em}
.prose h4{font-family:var(--f-label);font-size:.875rem;letter-spacing:.12em;text-transform:uppercase;margin:2em 0 .75em}
.prose ul{list-style:none;padding:0}
.prose ul>li{position:relative;padding-left:2.1rem;margin:.55em 0}
.prose ul>li::before{content:"";position:absolute;left:0;top:.32em;width:1.05rem;height:1.05rem;border:2px solid var(--ink)}
.prose ol{padding-left:2.1rem}
.prose ol>li{margin:.55em 0}
.prose ol>li::marker{font-family:var(--f-num);color:var(--red-ink)}
.prose em{font-style:italic}
.prose img{border:2px solid var(--ink)}
.prose blockquote{margin-inline:0}
/* картинки в <figure> з движка: як картинка в <p>, підпис під тінню */
.prose>figure{margin-inline:0}
.prose figcaption{margin-top:1rem;font-size:.875rem;font-style:italic;line-height:1.5;color:var(--ink-2)}
.prose--home>figure:has(>img[width="1800"])>figcaption{padding-inline:var(--g)}
/* таблиці в тексті: журнальна довідка; перший рядок без th = шапка */
.prose>table{width:100%;border-collapse:collapse;border-block:var(--rule);font-size:.9375rem;line-height:1.45;font-variant-numeric:lining-nums tabular-nums}
.prose td,.prose th{padding:.75rem 1rem .75rem 0;vertical-align:baseline;text-align:left}
.prose :is(td,th):last-child{padding-right:0}
.prose tr+tr>*{border-top:1px solid var(--line)}
.prose th,.prose>table:not(:has(th))>tbody>tr:first-child>td{padding-block:.625rem;font:.6875rem/1.3 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.prose>table:not(:has(th))>tbody>tr:nth-child(2)>td,.prose thead+tbody>tr:first-child>*{border-top:2px solid var(--ink)}
.prose>table:not(:has(th))>tbody>tr+tr>td:first-child{font-family:var(--f-display);font-size:1.25rem;line-height:1.1}
/* вузько: рядок = картка, перша клітинка на всю ширину, решта колонками */
@media (max-width:699.98px){
  .prose>table,.prose>table>:is(thead,tbody){display:block}
  .prose>table tr{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.75rem),1fr));gap:.375rem 1rem;padding-block:.75rem}
  .prose>table tr+tr{border-top:1px solid var(--line)}
  .prose>table tr>*,.prose>table:not(:has(th))>tbody>tr:first-child>td,.prose>table:not(:has(th))>tbody>tr:nth-child(2)>td,.prose thead+tbody>tr:first-child>*{display:block;min-width:0;padding:0;border:0;overflow-wrap:anywhere}
  .prose>table tr>:first-child{grid-column:1/-1}
  .prose>table:not(:has(th))>tbody>tr:first-child,.prose>table>thead>tr{padding-block:.625rem}
  .prose>table:not(:has(th))>tbody>tr:nth-child(2),.prose thead+tbody>tr:first-child{border-top:2px solid var(--ink)}
  /* «Кордон»: підпис колонки в самій клітинці (data-l), шапку таблиці не показуємо */
  .prose>.granica-table:has(td[data-l])>thead{display:none}
  .prose>.granica-table:has(td[data-l])>thead+tbody>tr:first-child{border-top:0}
  .granica-table td[data-l]::before{content:attr(data-l);display:block;margin-bottom:.125rem;font:.6875rem/1.3 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
}
/* широко: назви міст у клітинках без переносу по дефісу */
@media (min-width:700px){.prose td a{white-space:nowrap}}

/* ---------- 9. Головна: тіло ---------- */
/* дві плитки-посилання в ряд */
.prose--home>:is(p,figure):has(>a>img):first-child{grid-column:text-start/mid;grid-row:1;padding-right:.375rem}
.prose--home>:is(p,figure):has(>a>img):nth-child(2){grid-column:mid/text-end;grid-row:1;padding-left:.375rem}
.prose--home>:is(p,figure):has(>a>img)>a{display:block;border:var(--rule);box-shadow:5px 5px 0 var(--ink);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.prose--home>:is(p,figure):has(>a>img)>a>img{border:0;width:100%;aspect-ratio:5/4;object-fit:cover}
.prose--home>:is(p,figure):has(>a>img)>a:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.prose--home>:is(p,figure):has(>a>img)>a:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--red)}}
.prose--home{padding-top:2.5rem}
/* вступ: більший кегль і буквиця */
.prose--home>p:first-child{font-size:1.25em;line-height:1.5;margin-top:1.25rem}
.prose--home>p:first-child::first-letter{float:left;font-family:var(--f-display);font-size:4.1em;line-height:.8;margin:.06em .1em 0 0;color:var(--red-ink)}
/* великий підзаголовок */
.prose--home>h2{grid-column:wide-start/text-end;font-size:clamp(2.25rem,.9rem + 4.6vw,5.5rem);line-height:.88;margin-top:1.75em}
/* кроки: PNG-цифри ховаємо, ставимо великі номери */
.prose>p>img[width="32"][src$=".png"]{display:none}
.prose>p:has(>img[src$="/one.png"]){--n:"01"}
.prose>p:has(>img[src$="/two.png"]){--n:"02"}
.prose>p:has(>img[src$="/three.png"]){--n:"03"}
.prose>p:has(>img[src$="/four.png"]){--n:"04"}
.prose>p:has(>img[src$="/five.png"]){--n:"05"}
.prose--home>:is(p,figure):has(>img[width="32"][src$=".png"]){position:relative;margin-top:2.75rem;padding-top:1rem;border-top:var(--rule);font-size:1.125em;line-height:1.55}
.prose--home>:is(p,figure):has(>img[width="32"][src$=".png"])::before{content:var(--n);display:block;margin:0 0 .5rem;font-family:var(--f-num);font-size:5.25rem;line-height:.82;color:var(--red)}
.prose--home>:is(p,figure):has(>img[width="32"][src$=".png"])::after{content:"крок";content:"крок"/"";position:absolute;top:-1px;right:0;transform:translateY(-50%);padding:0 0 0 .6rem;background:var(--paper);font:.75rem/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
/* важлива примітка: смуга «візового бланка» */
.prose--home>blockquote{grid-column:full;display:grid;grid-template-columns:subgrid;margin:2rem 0 2.5rem;padding:2.25rem 0 2.5rem;background:var(--mint);border-block:var(--rule)}
.prose--home>blockquote::before{content:"важливо";grid-column:text;justify-self:start;margin-bottom:1rem;padding:.45rem .6rem .4rem;background:var(--ink);color:var(--mint);font:.75rem/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;transform:rotate(-2deg)}
.prose--home>blockquote>p{grid-column:text;margin:0;font-family:var(--f-display);font-size:clamp(1.5rem,1.05rem + 1.5vw,2.375rem);line-height:1.1;letter-spacing:-.005em}
/* фото */
.prose--home>:is(p,figure):has(>img[width="1800"]){grid-column:full;margin:2.5rem 0}
.prose--home>:is(p,figure)>img[width="1800"]{width:100%;aspect-ratio:16/9;object-fit:cover;border:0;border-block:var(--rule)}
.prose--home>:is(p,figure):has(>img[width="1280"]){grid-column:wide-start/text-end;margin:2.5rem 0 0;position:relative}
.prose--home>:is(p,figure)>img[width="1280"]{width:100%}
.prose--home>:is(p,figure):has(>img[width="850"]){grid-column:mid/text-end;margin:-3rem 0 2.5rem;position:relative;z-index:1;padding:6px 0 0 6px;background:var(--paper)}
.prose--home>:is(p,figure)>img[width="850"]{width:100%;box-shadow:6px 6px 0 var(--red)}
.prose--home>h3{text-transform:none}
.prose--home>h3::before{content:"";display:block;width:2.25rem;height:.5rem;margin-bottom:.75rem;background:var(--red)}
/* реклама в тілі */
.prose>.ad{margin-block:2rem 2.25rem}

@media (min-width:1100px){
  .prose--home{padding-top:3.5rem}
  .prose--home>:is(p,figure):has(>a>img):first-child,.prose--home>:is(p,figure):has(>a>img):nth-child(2){grid-column:wide-start/text-end;width:calc(50% - .75rem);padding:0}
  .prose--home>:is(p,figure):has(>a>img):nth-child(2){justify-self:end}
  .prose--home>:is(p,figure):has(>a>img)>a>img{aspect-ratio:16/10}
  .prose--home>:is(p,figure):has(>img[width="32"][src$=".png"])::before{position:absolute;top:.9rem;right:calc(100% + var(--gap));margin:0;font-size:clamp(5rem,7vw,8.5rem);text-align:right}
  .prose--home>blockquote{grid-column:full-start/text-end;padding-block:3rem 3.25rem}
  .prose--home>blockquote::before{grid-column:rail;justify-self:end;align-self:start;margin:.35rem 0 0;font-size:.875rem}
  .prose--home>blockquote>p{grid-row:1}
  .prose--home>:is(p,figure):has(>img[width="1800"]){grid-column:full-start/text-end}
  .prose--home>:is(p,figure)>img[width="1800"]{aspect-ratio:2.4/1;border-right:var(--rule)}
  .prose--home>:is(p,figure):has(>img[width="850"]){margin-top:-6rem}
}
@media (min-width:1100px){
  .prose--home>p:first-child{grid-column:wide-start/text-end;font-size:1.5em;line-height:1.42;margin-top:2rem}
}

/* ---------- 10. Бічна панель: візові центри + спонсор ---------- */
.side{grid-column:full;background:var(--night);color:var(--paper);padding:2.5rem var(--g) 2.75rem;margin-top:1.5rem}
.side :focus-visible{outline-color:var(--paper)}
.side-box{position:relative}
.side-label{margin:0 0 1rem;font:.75rem/1.2 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--night-mute)}
.side__big{display:block;font-family:var(--f-num);font-size:6rem;line-height:.8;color:var(--red-night);margin-bottom:.5rem}
.side__title{margin:0 0 1.25rem;font-family:var(--f-display);font-size:2.25rem;line-height:.95}
.cities{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(max-content,1fr));column-gap:1rem}
.cities li{border-top:1px solid var(--night-2)}
.cities a{display:flex;align-items:center;min-height:48px;color:var(--paper);text-decoration:none;font-size:1.0625rem;line-height:1.2;white-space:nowrap}
.cities a::before{content:"";flex:none;width:.4rem;height:.4rem;margin-right:.6rem;background:var(--red-night);transform:rotate(45deg) scale(0);transition:transform .18s var(--ease)}
@media (hover:hover) and (pointer:fine){.cities a:hover{color:var(--red-night)}.cities a:hover::before{transform:rotate(45deg) scale(1)}}
.cities__hub{grid-column:1/-1;border-top:0!important}
.cities li:nth-child(2),.cities li:nth-child(3){border-top-color:var(--night-mute)}
.cities__hub a{min-height:56px;font-family:var(--f-display);font-size:1.5rem;color:var(--red-night);white-space:normal}
.cities__hub a::before{display:none}
.cities__hub a::after{content:"→";margin-left:.5rem}
.sponsor{margin-top:2.25rem;padding-top:1.25rem;border-top:1px solid var(--night-2)}
.sponsor a{display:inline-block;max-width:100%}
.sponsor img{display:block;max-width:100%;height:auto}
/* назви міст без переносу: дві колонки, поки влазять, інакше одна */
@media (max-width:389.98px){.cities a{font-size:1rem}}
@media (max-width:359.98px){.cities{grid-template-columns:minmax(0,1fr)}.cities a{font-size:1.0625rem}.cities li:nth-child(3){border-top-color:var(--night-2)}}
@media (min-width:700px){.cities{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:700px) and (max-width:1099.98px){.cities li:nth-child(4){border-top-color:var(--night-mute)}}
@media (min-width:1100px){
  .side{grid-column:side;grid-row:1;align-self:start;margin-top:3.5rem;padding:1.5rem 1.5rem 1.75rem}
  .side__big{font-size:5rem}
  .side__title{font-size:1.75rem}
  .cities{grid-template-columns:minmax(0,1fr)}
  .cities a{min-height:36px;font-size:.9375rem}
  .cities li:nth-child(3){border-top-color:var(--night-2)}
  .cities__hub a{min-height:44px;font-size:1.25rem}
  .sponsor{margin-top:1.5rem}
}
@media (min-width:1440px){.cities{grid-template-columns:repeat(2,minmax(max-content,1fr))}.cities li:nth-child(3){border-top-color:var(--night-mute)}}
@media (min-width:1100px) and (min-height:820px){.side{position:sticky;top:1.5rem}}
/* 1100–1439: центри в одну колонку, панель вища; липка лише якщо влазить в екран */
@media (min-width:1100px) and (max-width:1439.98px) and (max-height:1039.98px){.side:has(>.side-box>.cities){position:static}}

/* ---------- 11. Реклама: резерв висоти (як у v1) ---------- */
.ad{margin:2rem 0;padding:.5rem 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ad__label{display:block;margin-bottom:.5rem;font:.6875rem/1.2 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ad ins{display:block;min-height:280px;background:var(--paper-2) repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in oklch,var(--ink) 5%,transparent) 14px 15px)}
.ad--feed ins{min-height:640px}
@media (min-width:768px){.ad ins{min-height:300px}.ad--feed ins{min-height:520px}}
.ad--top{margin-top:0}

/* ---------- 12. Нові статті / Читайте також ---------- */
.news{padding-block:3.5rem 4rem;border-top:var(--rule)}
.news__head p{margin:0}
.news__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:.75rem 1.5rem;margin-bottom:1.75rem}
.sec-title{margin:0;font-family:var(--f-display);font-size:clamp(2.5rem,1.4rem + 4vw,5.25rem);line-height:.88;letter-spacing:-.01em}
.more{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;color:var(--ink);font:.8125rem/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:var(--rule)}
.more::after{content:"→";font-size:1.1em}
@media (hover:hover) and (pointer:fine){.more:hover{color:var(--red-ink);border-color:var(--red-ink)}}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:0}
.card{position:relative;display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1rem;align-items:start;padding-block:1.125rem;border-top:1px solid var(--line)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;border:2px solid var(--ink)}
.card h3{margin:0 0 .4rem;font:700 1.0625rem/1.3 var(--f-text);text-wrap:pretty}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card time{font:.6875rem/1.2 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){.card:hover h3 a{color:var(--red-ink);text-decoration:underline;text-decoration-thickness:2px}}
.card--lead{grid-template-columns:minmax(0,1fr);gap:.875rem;padding-top:0;border-top:0}
.card--lead img{box-shadow:8px 8px 0 var(--red);border-width:2px}
.card--lead h3{font:400 clamp(1.75rem,1.2rem + 1.9vw,2.75rem)/1 var(--f-display);margin-top:.5rem;text-wrap:balance}
.card--lead time{order:-1}
.card--lead>div{display:flex;flex-direction:column;gap:.25rem}
@media (min-width:700px){
  .card{grid-template-columns:9.5rem minmax(0,1fr);gap:1.25rem}
  .card--lead{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:1100px){
  .cards{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--g);grid-template-rows:repeat(3,auto) 1fr}
  .card--lead{grid-row:1/5;margin-right:1.5rem}
  .card:not(.card--lead){grid-column:2}
  .card:not(.card--lead):nth-child(2){border-top:0;padding-top:0}
  .cards--3{grid-template-columns:minmax(0,6fr) minmax(0,6fr);grid-template-rows:repeat(2,auto) 1fr}
  .cards--3 .card--lead{grid-row:1/4}
}
@media (min-width:700px){
  .cards--even{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--g);row-gap:2rem}
  .cards--even .card{grid-template-columns:minmax(0,1fr);align-content:start;gap:.875rem;padding:0;border-top:0}
  .cards--even .card img{box-shadow:5px 5px 0 var(--red)}
  .cards--even .card>div{display:flex;flex-direction:column;gap:.375rem}
  .cards--even .card time{order:-1}
  .cards--even .card h3{font-size:1.125rem}
}
@media (min-width:1100px){
  .cards--even{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none}
  .cards--even .card:not(.card--lead){grid-column:auto}
  .cards--even .card:not(.card--lead):nth-child(2){padding-top:0}
}

/* ---------- 13. Пост ---------- */
.post{padding-top:1.5rem}
.post__head{grid-column:text;margin-bottom:1.75rem}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0 0 1.25rem;padding:0;font:.6875rem/1.2 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.crumbs li{display:inline-flex;align-items:center;min-width:0}
.crumbs li+li::before{content:"/";margin:0 .6rem;color:var(--ink-3)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:none}
.crumbs [aria-current]{display:none}
@media (hover:hover) and (pointer:fine){.crumbs a:hover{color:var(--red-ink)}}
.post__title{margin:0;font-family:var(--f-display);font-size:clamp(2.75rem,1.4rem + 5.4vw,7rem);line-height:1.02;letter-spacing:-.015em}
.meta{display:flex;flex-direction:column;gap:.35rem;margin:1.5rem 0 0;padding-top:.875rem;border-top:var(--rule);font:.6875rem/1.5 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.meta>span{display:block}
@media (min-width:700px){
  .meta{flex-direction:row;flex-wrap:wrap;gap:.25rem 0}
  .meta>span+span::before{content:"";display:inline-block;width:.45rem;height:.45rem;margin:0 .9rem;vertical-align:.1em;background:var(--red)}
}
.meta a{color:var(--ink);text-decoration-thickness:2px}
.post__hero{grid-column:full;margin:0 0 2rem;position:relative}
.post__hero img{width:100%;aspect-ratio:4/3;object-fit:cover;border-block:var(--rule)}
.toc{grid-column:text;margin:0 0 1.75rem;border:var(--rule);background:var(--paper)}
.toc>summary{display:flex;align-items:center;gap:.75rem;min-height:56px;padding:.5rem 1rem;cursor:pointer;list-style:none;font:.8125rem/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;-webkit-tap-highlight-color:transparent}
.toc>summary::-webkit-details-marker{display:none}
.toc>summary::after{content:"";flex:none;width:.55rem;height:.55rem;margin-left:.25rem;border:solid var(--ink);border-width:0 2px 2px 0;transform:translateY(-.15em) rotate(45deg);transition:transform .2s var(--ease)}
.toc[open]>summary{border-bottom:var(--rule)}
.toc[open]>summary::after{transform:translateY(.1em) rotate(-135deg)}
.toc__n{margin-left:auto;font-family:var(--f-text);font-size:.875rem;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.toc ol,.toc-rail ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc>ol{padding:.25rem 1rem .5rem}
.toc li,.toc-rail li{counter-increment:t}
.toc li+li,.toc-rail li+li{border-top:1px solid var(--line)}
.toc a,.toc-rail a{display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-items:baseline;min-height:44px;padding-block:.625rem;color:var(--ink);text-decoration:none;font-size:1rem;line-height:1.35}
.toc a::before,.toc-rail a::before{content:counter(t,decimal-leading-zero);font-family:var(--f-num);font-size:1rem;color:var(--red-ink)}
@media (hover:hover) and (pointer:fine){.toc a:hover,.toc-rail a:hover{color:var(--red-ink)}}
.rail{display:none}
.post>.ad{grid-column:text}
/* пост: тіло */
.prose:not(.prose--home){counter-reset:h}
.prose:not(.prose--home,.prose--lede)>p:first-child{font-size:1.1875em;line-height:1.55}
.prose:not(.prose--home,.prose--lede)>p:first-child::first-letter{float:left;font-family:var(--f-display);font-size:3.9em;line-height:.8;margin:.07em .1em 0 0;color:var(--red-ink)}
.prose:not(.prose--home)>h2{counter-increment:h;position:relative;font-size:clamp(1.875rem,1.15rem + 2.4vw,3.375rem);padding-top:1rem;border-top:var(--rule);margin-top:2.25em}
.prose:not(.prose--home)>h2::before{content:counter(h,decimal-leading-zero);display:block;margin-bottom:.6rem;font-family:var(--f-num);font-size:3.25rem;line-height:.82;color:var(--red)}
.prose:not(.prose--home)>:is(p,figure):has(>img:not([width="32"])){margin-block:1.5rem 2rem}
.prose:not(.prose--home)>:is(p,figure)>img{width:100%;box-shadow:8px 8px 0 var(--mint)}
/* «Читайте також» */
.related{padding-block:3.5rem 4rem;border-top:var(--rule);background:var(--paper-2)}
.related .card{border-top-color:color-mix(in oklch,var(--ink) 18%,transparent)}
@media (min-width:700px){
  .post__hero img{aspect-ratio:16/9}
}
@media (min-width:1100px){
  .post{padding-top:2.5rem}
  .post__head{grid-column:wide-start/side-end;grid-row:1;margin-bottom:2.25rem}
  .post__title{max-width:15ch}
  .meta{max-width:none}
  .post__hero{grid-column:full-start/text-end;grid-row:2;margin-bottom:2.75rem}
  .post__hero img{aspect-ratio:2.2/1;border-right:var(--rule)}
  .toc{display:none}
  .post>.ad--top{grid-row:3}
  .post>.prose{grid-row:4}
  .post>.ad--feed{grid-row:5}
  .rail{display:block;grid-column:side;grid-row:2/6;align-self:start;position:sticky;top:1.5rem;padding-top:.25rem}
  .toc-rail{border-top:var(--rule);padding-top:1rem}
  .toc-rail .side-label{color:var(--ink-3);margin-bottom:.5rem}
  .toc-rail a{font-size:.9375rem;grid-template-columns:2rem minmax(0,1fr)}
  .prose:not(.prose--home)>h2::before{position:absolute;top:-2px;right:calc(100% + var(--gap));width:min(100%,9rem);margin:0;padding-top:1rem;border-top:2px solid var(--red);font-size:clamp(3.5rem,4.4vw,5rem);text-align:right}
  .post .prose>:is(p,figure):has(>img:not([width="32"])){grid-column:wide-start/text-end}
}

/* ---------- 13.1 Поділитися (tpl/share.php): після реклами в кінці запису ---------- */
.share{grid-column:text;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin:0 0 3rem;padding-top:1.25rem;border-top:var(--rule)}
.share__label{margin-right:.5rem;font:.8125rem/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase}
.share__link{display:inline-grid;place-items:center;width:48px;height:48px;border:2px solid var(--ink);border-radius:50%;background:var(--paper);color:var(--ink);transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease)}
.share__link svg{width:20px;height:20px}
.share__link:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.share__link:hover{background:var(--ink);color:var(--paper);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--red)}}
@media (min-width:1100px){.post>.share{grid-row:6}}

/* ---------- 13.2 Сторінки: шапка без дат, зміст, бічна панель ---------- */
.story--page .story__art{padding-top:1.5rem}
.t-page .post__head{padding-bottom:1.25rem;border-bottom:var(--rule)}
.post__title--caps{font-size:clamp(2.25rem,1rem + 4.6vw,5.75rem);line-height:1.15;letter-spacing:0}
.toc li ol,.toc-rail li ol{margin:0 0 .5rem 2.25rem}
.toc li li a,.toc-rail li li a{grid-template-columns:1.25rem minmax(0,1fr);font-size:.9375rem}
.toc li li a::before,.toc-rail li li a::before{content:"";align-self:center;width:.45rem;height:.45rem;background:var(--red)}
/* кроки з PNG-цифрами в тілі сторінки: компактно, номер ліворуч */
.prose:not(.prose--home)>p:has(>img[width="32"][src$=".png"]){position:relative;min-height:3.5rem;margin-block:0;padding:.875rem 0 .875rem 4.5rem;border-top:var(--rule)}
.prose:not(.prose--home)>p:has(>img[width="32"][src$=".png"])::before{content:var(--n);position:absolute;left:0;top:.8rem;font:3rem/.82 var(--f-num);color:var(--red)}
.t-page .prose>h3::before{content:"";display:block;width:2.25rem;height:.5rem;margin-bottom:.75rem;background:var(--red)}
/* «Зверніть увагу!»: бланк з позначкою */
.prose:not(.prose--home)>blockquote{position:relative;margin:2rem 0 2.25rem;padding:1.75rem 1.25rem 1.25rem;background:var(--mint);border:var(--rule);box-shadow:6px 6px 0 var(--ink)}
.prose:not(.prose--home)>blockquote::before{content:"важливо";position:absolute;top:0;left:1rem;padding:.45rem .6rem .4rem;background:var(--ink);color:var(--mint);font:.75rem/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;transform:translateY(-50%) rotate(-2deg)}
.prose:not(.prose--home)>blockquote:lang(ru)::before{content:"важно"}
.prose:not(.prose--home)>blockquote>p{margin:0}
/* плитки (два банери) */
.promo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;max-width:40rem;margin-top:2.25rem}
.promo a{display:block;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.promo img{width:100%}
.promo a:active{transform:scale(.98)}
.cities a[aria-current]{color:var(--red-night)}
.cities a[aria-current]::before{transform:rotate(45deg) scale(1)}
.sub a[aria-current]{text-decoration:underline;text-decoration-thickness:2px}
@media (max-width:1099.98px){.side .toc-rail{display:none}}
@media (min-width:1100px){
  .story--page .story__art{padding-top:2.5rem}
  .story--page .post__head{grid-column:wide-start/text-end;grid-row:auto;margin-bottom:2rem}
  .story--page .post__title{max-width:18ch}
  /* панель світла: зміст і плитки на папері, центри й спонсор темними блоками; спонсор липкий */
  .side--page{align-self:stretch;position:static;display:flex;flex-direction:column;gap:2rem;margin-top:2.5rem;padding:0;background:none;color:var(--ink)}
  .side--page :focus-visible{outline-color:var(--ink)}
  .side--page>.side-box:not(.sponsor),.side--page>.sponsor{padding:1.5rem 1.5rem 1.75rem;background:var(--night);color:var(--paper)}
  .side--page>.side-box :focus-visible{outline-color:var(--paper)}
  .side--page .promo{grid-template-columns:minmax(0,1fr);gap:1.25rem;margin:0}
  .side--page .promo a{border:var(--rule);box-shadow:5px 5px 0 var(--ink)}
  .side--page>.sponsor{position:sticky;top:1.5rem;margin:0;border:0}
  .toc-rail li ol{margin-left:2rem}
  .toc-rail li li a{min-height:36px;padding-block:.375rem;font-size:.875rem}
}
@media (min-width:1100px) and (hover:hover) and (pointer:fine){.side--page .promo a:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--red)}}

/* ---------- 13.3 Візовий центр: смуга «візового бланка» зі штампом ---------- */
.t-center .story__art{padding-top:0}
.post__head--band{grid-column:full;display:grid;grid-template-columns:subgrid;align-items:center;margin-bottom:2.25rem;padding-block:.5rem 2rem;background:var(--mint)}
/* поки штамп «влітає», він ширший за екран: смуга на всю ширину обрізає зайве по горизонталі */
@media (max-width:1099.98px){.post__head--band{overflow-x:clip}}
.post__head--band .crumbs{grid-column:text;grid-row:1;padding-right:6rem}
.post__head--band .crumbs ol{margin:0}
.post__head--band .stamp{grid-column:text;grid-row:1;justify-self:end;width:5.25rem;margin:.25rem -.25rem .25rem 0}
.post__head--band .post__title{grid-column:text;grid-row:2;margin-top:.75rem;font-size:clamp(2.5rem,1.2rem + 4.4vw,5.25rem)}
.post__head--band .stamp__ring{font-size:15.5px}
.t-center .prose strong{background:linear-gradient(transparent 58%,var(--mint) 58%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.t-center .prose>p:has(>br){padding:.25rem 0 .25rem 1rem;border-left:4px solid var(--red);font-variant-numeric:tabular-nums lining-nums;line-height:1.9}
.t-center .prose>p>em:only-child{font-size:.875em;color:var(--ink-3)}
.t-center .prose>ul{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}
.t-center .prose>ul+ul{padding-top:.75rem;border-top:1px dashed var(--line)}
.t-center .prose>ul:last-child,.t-center .prose>ul:not(:has(+ul)){margin-bottom:1.5rem}
.t-center .prose>ul>li{margin:0;padding:0}
.t-center .prose>ul>li::before{display:none}
.t-center .prose>ul a{display:inline-flex;align-items:center;min-height:44px;padding:0 .875rem;border:2px solid var(--ink);color:var(--ink);text-decoration:none;font:.75rem/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;transition:background-color .15s var(--ease),color .15s var(--ease)}
.t-center .prose>ul a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.t-center .prose>ul a:hover{background:var(--ink);color:var(--paper)}}
@media (min-width:1100px){
  .post__head--band{grid-column:full-start/text-end;padding-block:1rem 2.5rem;border-right:var(--rule)}
  .post__head--band .crumbs{grid-column:wide-start/text-end;padding-right:0}
  .post__head--band .stamp{grid-column:text;grid-row:1/3;align-self:center;width:11rem;margin:0}
  .post__head--band .post__title{grid-column:wide-start/text-end;max-width:none;padding-right:12rem}
  .t-center .side--page{margin-top:0}
}

/* ---------- 13.4 Форма зв'язку (tpl/contact-form.php), без JS ---------- */
.contact-form{position:relative;margin:1.75rem 0 2.5rem;padding:1.5rem 1.25rem 1.75rem;background:var(--paper-2);border:var(--rule);box-shadow:6px 6px 0 var(--ink)}
.contact-form>p{margin:0 0 1.25rem}
.contact-form label{display:block;margin-bottom:.5rem;font:.8125rem/1.2 var(--f-label);letter-spacing:.12em;text-transform:uppercase}
.contact-form .req{color:var(--red-deep);font-family:var(--f-text);font-size:1.15em;cursor:help}
.contact-form :is(input,textarea){display:block;width:100%;min-height:52px;margin:0;padding:.75rem .875rem;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:0;font:400 1.0625rem/1.45 var(--f-text);-webkit-appearance:none;appearance:none;transition:box-shadow .15s var(--ease),border-color .15s var(--ease)}
.contact-form textarea{min-height:11rem;resize:vertical}
.contact-form :is(input,textarea):focus{outline:3px solid var(--ink);outline-offset:0;box-shadow:6px 6px 0 var(--red)}
.contact-form :is(input,textarea):user-invalid{border-color:var(--red-deep);background:color-mix(in oklch,var(--red) 7%,var(--paper))}
.contact-form p:has(>:user-invalid)>label{color:var(--red-deep)}
.contact-form p:has(>[required]:user-invalid)::after{content:"Заповніть це поле";display:block;margin-top:.4rem;color:var(--red-deep);font-size:.9375rem;line-height:1.35}
.contact-form p:has(>[type=email]:user-invalid)::after{content:"Вкажіть email у форматі name@example.com"}
.contact-form button{display:inline-flex;align-items:center;gap:.75rem;min-height:56px;margin-top:.25rem;padding:0 1.5rem;background:var(--red);color:var(--ink);border:var(--rule);border-radius:0;box-shadow:5px 5px 0 var(--ink);font:1rem/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.contact-form button::after{content:"→";font-size:1.2em}
.contact-form button:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
@media (hover:hover) and (pointer:fine){.contact-form button:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}}
.notice{position:relative;margin:0 0 1.5rem;padding:1rem 1rem 1rem 3.75rem;border:var(--rule);font-size:1rem;line-height:1.45}
.notice::before{position:absolute;left:1rem;top:.9rem;display:grid;place-items:center;width:1.875rem;height:1.875rem}
.notice--ok{background:var(--mint)}
.notice--ok::before{content:"";width:.6rem;height:1.15rem;margin:.1rem 0 0 .6rem;border:solid var(--ink);border-width:0 .3rem .3rem 0;transform:rotate(40deg)}
.notice--err{background:var(--paper);border-color:var(--red-deep);color:var(--ink)}
.notice--err::before{content:"!";background:var(--red-deep);color:var(--paper);font:1.25rem/1 var(--f-display)}
/* Пометка «матеріал застарів» над текстом (tpl/outdated.php): в колонку тексту сітки story__art / post */
.notice--old{grid-column:text}
.story__art>.notice--old:first-child{margin:2.5rem 0 0}
@media (min-width:1100px){.story__art>.notice--old:first-child{margin-top:3.5rem}}
@media (min-width:700px){.contact-form{padding:2rem 2rem 2.25rem}}

/* ---------- 13.5 Рубрика: список записів і сторінки ---------- */
.list-head__title{font-size:clamp(4.5rem,1.5rem + 13vw,13rem);line-height:.82;letter-spacing:-.02em}
.eyebrow{margin:0;font:.75rem/1.3 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.list-head .eyebrow{margin-top:1.25rem;padding-top:.75rem;border-top:var(--rule);font:italic 1.0625rem/1.4 var(--f-text);letter-spacing:0;text-transform:none}
.story__art>.entries,.story__art>.pager{grid-column:text}
.entries{list-style:none;margin:0;padding:0}
.entry{position:relative;display:grid;grid-template-columns:6.5rem minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"img time" "img h" "p p";column-gap:1rem;padding-block:1.25rem;border-top:1px solid var(--line)}
.entry>div{display:contents}
.entry img{grid-area:img;width:100%;aspect-ratio:16/10;object-fit:cover;border:2px solid var(--ink);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.entry time{grid-area:time;font:.6875rem/1.3 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.entry h2{grid-area:h;margin:.3rem 0 0;font-family:var(--f-display);font-size:1.3125rem;line-height:1.04;text-wrap:balance}
.entry h2 a{color:var(--ink);text-decoration:none}
.entry h2 a::after{content:"";position:absolute;inset:0}
.entry p{grid-area:p;margin:.75rem 0 0;font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.entry:active img{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
  .entry:hover h2 a{color:var(--red-ink);text-decoration:underline;text-decoration-thickness:2px}
  .entry:hover img{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
}
.entry:first-child{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"img" "time" "h" "p";padding-top:.5rem;border-top:0}
.entry:first-child img{margin-bottom:1rem;aspect-ratio:16/9;box-shadow:8px 8px 0 var(--red)}
.entry:first-child h2{font-size:clamp(2rem,1.3rem + 2.4vw,3.5rem);line-height:.95}
.entry:first-child p{font-size:1.0625rem}
.pager{margin:2.5rem 0 1rem;padding-top:1.5rem;border-top:var(--rule)}
.pager ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 .75rem;border:2px solid var(--ink);color:var(--ink);text-decoration:none;font:1.25rem/1 var(--f-num);transition:background-color .15s var(--ease),color .15s var(--ease)}
.pager [aria-current]{background:var(--red)}
.pager a[rel]{padding-inline:1.125rem;font:.8125rem/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase}
.pager li:has(>a[rel=next]){margin-left:auto}
.pager a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.pager a:hover{background:var(--ink);color:var(--paper)}}
@media (min-width:700px){
  .entry{grid-template-columns:15rem minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"img time" "img h" "img p";column-gap:1.5rem;padding-block:1.5rem}
  .entry h2{font-size:clamp(1.5rem,1rem + 1vw,2rem)}
  .entry p{margin-top:.6rem;font-size:1rem}
}
@media (min-width:1100px){
  .list-head{grid-column:wide-start/text-end}
  .story__art>.entries,.story__art>.pager{grid-column:wide-start/text-end}
  .entry{grid-template-columns:12.5rem minmax(0,1fr)}
  .entry:first-child img{aspect-ratio:2/1}
}

/* ---------- 13.6 404: червона смуга зі штампом ---------- */
.err{background:var(--red);color:var(--ink);border-bottom:var(--rule);overflow:clip}
.err__in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;padding-block:1.25rem 2rem}
.err .eyebrow{grid-column:1;grid-row:1;align-self:center;color:var(--ink)}
.err .stamp{grid-column:2;grid-row:1;width:6.25rem;margin-right:-.25rem}
.err__title{grid-column:1/-1;grid-row:2;margin:.75rem 0 0;font-family:var(--f-display);font-size:clamp(3.25rem,1rem + 10vw,11rem);line-height:.84;letter-spacing:-.015em}
.t-404 .story__art{padding-top:2.25rem}
.prose--lede>p{font-size:1.25em;line-height:1.5}
.story__art>.big-links,.story__art>.block{grid-column:text}
.big-links{list-style:none;margin:.5rem 0 3rem;padding:0;display:grid;gap:.75rem;counter-reset:bl}
.big-links li{counter-increment:bl;display:grid}
.big-links a{position:relative;display:grid;grid-template-columns:2.75rem minmax(0,1fr) auto;column-gap:.75rem;align-items:start;min-height:5rem;padding:1rem 1.125rem;background:var(--paper);color:var(--ink);border:var(--rule);text-decoration:none;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.big-links a::before{content:counter(bl,decimal-leading-zero);padding-top:.1rem;font:1.5rem/1 var(--f-num);color:var(--red-ink)}
.big-links a::after{content:"→";font:1.5rem/1 var(--f-display)}
.big-links a>span{font:400 1.5rem/1.02 var(--f-display);letter-spacing:-.005em}
.big-links a>span>span{display:block;margin-top:.35rem;font:400 .9375rem/1.3 var(--f-text);letter-spacing:0;color:var(--ink-2)}
.big-links li:first-child a{background:var(--night);color:var(--paper);border-color:var(--night)}
.big-links li:first-child a::before{color:var(--red-night)}
.big-links li:first-child a>span>span{color:var(--night-mute)}
.big-links li:first-child a:focus-visible{outline-color:var(--red-ink)}
.big-links li:nth-child(2) a{background:var(--mint)}
.big-links a:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
  .big-links a:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink);color:var(--ink)}
  .big-links li:first-child a:hover{color:var(--paper);box-shadow:6px 6px 0 var(--red)}
}
.block{padding-top:1.75rem;border-top:var(--rule)}
.block__title{margin:0 0 1.5rem;font-family:var(--f-display);font-size:clamp(2.25rem,1.4rem + 3vw,4rem);line-height:.9;letter-spacing:-.01em}
@media (min-width:700px){
  .err .stamp{width:10rem}
  .big-links{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1100px){
  .err__in{grid-template-columns:minmax(0,1fr) 15rem;column-gap:var(--g);padding-block:1.5rem 2.75rem}
  .err__title{grid-column:1;font-size:min(11vw,11.5rem)}
  .err .stamp{grid-row:1/3;align-self:center;justify-self:center;width:min(15vw,14rem);margin:0}
  .story__art>.big-links,.story__art>.block{grid-column:wide-start/text-end}
  .big-links{grid-template-columns:repeat(3,minmax(0,1fr))}
  .big-links a{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;min-height:9rem}
  .big-links a::before{grid-column:1;grid-row:1}
  .big-links a::after{grid-column:2;grid-row:1}
  .big-links a>span{grid-column:1/-1;grid-row:2;align-self:end;margin-top:1.25rem;font-size:1.75rem}
  .t-404 .cards--3{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .t-404 .card--lead h3{font-size:2.25rem}
}

/* ---------- 14. Підвал ---------- */
.foot{background:var(--red);color:var(--ink);border-top:var(--rule);padding-top:2.5rem;overflow:clip}
.foot a{color:var(--ink)}
.foot :focus-visible{outline-color:var(--ink)}
.foot__mark{display:block;width:max-content;max-width:100%;font-family:var(--f-display);font-size:17vw;line-height:.8;letter-spacing:-.02em;text-decoration:none;white-space:nowrap;padding-bottom:.16em;margin-bottom:1.75rem}
.foot__mark span{font-family:var(--f-label);font-size:.14em;letter-spacing:.14em;vertical-align:top;margin-left:.2em;text-transform:uppercase}
@media (hover:hover) and (pointer:fine){.foot__mark:hover{color:var(--ink)}}
.foot__grid{display:grid;gap:2rem;padding-bottom:2.5rem}
.foot__grid h2{margin:0 0 .75rem;font:.75rem/1.2 var(--f-label);letter-spacing:.14em;text-transform:uppercase}
.foot__grid ul{list-style:none;margin:0;padding:0}
.foot__grid li a{display:inline-flex;align-items:center;min-height:40px;font-size:1.0625rem;text-decoration:none;border-bottom:1px solid transparent}
@media (hover:hover) and (pointer:fine){.foot__grid li a:hover{border-bottom-color:var(--ink)}}
.foot__grid p{margin:0;max-width:24rem}
.foot__about{font-size:1.25rem;line-height:1.4}
.foot__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;padding-block:1rem 1.25rem;border-top:var(--rule);font:.6875rem/1.5 var(--f-label);letter-spacing:.12em;text-transform:uppercase}
.foot__bar p{margin:0}
@media (min-width:700px){.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){
  .foot{padding-top:3rem}
  .foot__mark{font-size:min(17.4vw,20.5rem)}
  .foot__grid{grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2.33fr));gap:var(--g)}
}

/* ---------- 15. Прогрес читання (CSS scroll-driven, без JS) ---------- */
@supports (animation-timeline:scroll()){
  .t-post::before{content:"";position:fixed;z-index:40;top:0;left:0;right:0;height:6px;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);animation:read linear both;animation-timeline:scroll(root)}
  @keyframes read{to{transform:scaleX(1)}}
}

/* ---------- 16. Доступність і друк ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .stamp{transform:rotate(-12deg)}
  @view-transition{navigation:none}
}
@media print{
  .mast,.foot,.ad,.side,.rail,.toc,.news,.related,.pick,.crumbs,.stamp,.share,.pager,.t-post::before{display:none!important}
  body{background:none;color:#111;font-size:11pt}
  .cover{background:none}
  .story,.post,.story__art,.prose{display:block}
  .prose a{color:inherit}
  .prose img,.post__hero img{box-shadow:none!important;max-width:60%}
}