:root{color-scheme:light;--paper:#EFEBE0;--paper-2:#E7E2D4;--panel:#FBF9F3;--ink:#16213F;--ink-soft:#454E70;--cobalt:#23347A;--cobalt-d:#1A2760;--marigold:#F2A81D;--marigold-d:#D8900A;--teal:#147F6E;--closed:#9a8f7a;--text:#1A1712;--muted:#6B6558;--line:rgba(22,33,63,.14);--line-2:rgba(22,33,63,.09);--shadow:0 1px 0 rgba(22,33,63,.05),0 8px 24px -12px rgba(22,33,63,.28)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;line-height:1.05;letter-spacing:-.02em}
.plaque{display:inline-flex;align-items:center;gap:8px;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;background:var(--cobalt);color:#fff;padding:7px 14px;border-radius:6px;position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 6px rgba(0,0,0,.28)}
.plaque::before,.plaque::after{content:"";width:4px;height:4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#8f9bc9 70%);position:absolute;top:50%;transform:translateY(-50%);opacity:.7}.plaque::before{left:5px}.plaque::after{right:5px}
.btn{font-family:'Inter';font-weight:600;font-size:14px;border:none;cursor:pointer;border-radius:9px;padding:11px 18px;transition:.15s;display:inline-flex;align-items:center;gap:8px}
.btn-ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line)}.btn-ghost:hover{background:var(--paper-2)}
.btn-solid{background:var(--marigold);color:#241a00;box-shadow:0 2px 0 var(--marigold-d)}.btn-solid:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--marigold-d)}
.btn-cobalt{background:var(--cobalt);color:#fff}.btn-cobalt:hover{background:var(--cobalt-d)}
header{position:sticky;top:0;z-index:40;background:rgba(239,235,224,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-2)}
.nav{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:9px;font-family:'Bricolage Grotesque';font-weight:800;font-size:21px;letter-spacing:-.03em;color:var(--ink)}.brand .pin{width:26px;height:26px;flex:0 0 auto}
.nav-links{display:flex;gap:22px;margin-left:8px;font-weight:500;font-size:15px;color:var(--ink-soft)}
.nav-links a{padding:4px 0;border-bottom:2px solid transparent;transition:.15s}.nav-links a:hover{color:var(--ink);border-color:var(--marigold)}
.nav-spacer{flex:1}
/* Меню на телефоні. Раніше пункти переносились на другий рядок і хвіст просто
   зникав за краєм: на 375 px із семи розділів було видно два, а решта сайту
   була досяжна лише через футер. Правила «ховати меню» в окремих бандлах були
   ще гірші — навігація зникала повністю, бо бургера в проєкті немає.
   Тому стрічка, що гортається пальцем: усі розділи на місці, без JS.
   `-webkit-overflow-scrolling` — щоб інерція була як у нативних списках. */
@media (max-width:900px){
  .nav{gap:12px;height:56px}
  .brand{font-size:18px;flex:0 0 auto}.brand .pin{width:22px;height:22px}
  .nav-spacer{display:none}
  .nav-links{margin-left:0;gap:18px;flex:1 1 auto;min-width:0;flex-wrap:nowrap;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    /* край стрічки розмиваємо, щоб було видно: далі є ще пункти */
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{white-space:nowrap;scroll-snap-align:start}
}
@media (max-width:560px){.nav-links{font-size:14px;gap:15px}}
/* Захист від горизонтального виїзду на телефоні.
   `body{overflow-x:hidden}` у MODERN приховує скролбар, але не саму проблему:
   якщо щось ширше за екран, воно просто обрізається — текст іде під край і
   його не прочитати. Два правила знімають причину замість симптому:
     · елементи сітки й флексу за замовчуванням мають `min-width:auto`, тобто
       не можуть стиснутись вужче за свій вміст і розпирають колонку;
     · довге слово без пробілів — грецька або нідерландська назва, URL,
       «Panepistimioupoli» — не переноситься й дає ту саму ширину. */
@media (max-width:900px){
  .layout>*,.wrap>*,.side>*,.panel>*{min-width:0}
  .prose,.sec,.sh,.card-n,.dl dd,.faq .a{overflow-wrap:break-word}
}
.chip{font-family:'Inter';font-size:13.5px;font-weight:500;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);cursor:pointer;transition:.15s;color:var(--ink)}
.chip:hover{border-color:var(--cobalt);color:var(--cobalt)}.chip.on{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
footer{background:var(--cobalt-d);color:#c9d0ea;margin-top:56px;padding:48px 0 28px}footer .brand{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
footer .fcol h4{font-family:'Space Mono';font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8f9bc9;margin-bottom:14px}
footer .fcol a{display:block;padding:5px 0;font-size:14px;color:#c9d0ea}footer .fcol a:hover{color:#fff}
footer .tag{color:#8f9bc9;font-size:14px;margin-top:12px;max-width:32ch}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px;display:flex;justify-content:space-between;font-family:'Space Mono';font-size:11.5px;color:#8f9bc9;flex-wrap:wrap;gap:10px}
:focus-visible{outline:3px solid var(--marigold);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* semantics & a11y */
img{max-width:100%;display:block}figure{margin:0}
ol,ul{list-style:none}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--marigold);color:#241a00;padding:10px 16px;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}
.nav-links a[aria-current="page"]{color:var(--ink);border-color:var(--marigold)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}