/* Civilizational Synchronism — оформлення.
   Одна ідея: сторінка виглядає як вимірювальний документ, і єдиний колір у ній
   належить розриву. Бурштиновим позначено тільки дірки й фронтир — тобто те,
   чого бракує. Усе інше живе на чорнилі, папері та лінійках. */

:root{
  --paper:#F1F2F1; --surface:#FAFBFA; --sunk:#E7E9E7;
  --ink:#15181A; --ink-2:#3B4244; --muted:#6B7477;
  --rule:#D2D6D4; --rule-soft:#E2E5E3;
  --gap:#8F590F; --gap-ink:#7A4B0C; --gap-bg:#F4EDE1; --gap-rule:#D9C6A4;
  --sel:#DDE4E0;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#101312; --surface:#171B1A; --sunk:#141817;
    --ink:#E6E9E7; --ink-2:#B5BDBA; --muted:#848E8B;
    --rule:#2A312F; --rule-soft:#1F2523;
    --gap:#D2973F; --gap-ink:#E0A954; --gap-bg:#1E1810; --gap-rule:#3C2F1A;
    --sel:#233029;
  }
}
:root[data-theme="dark"]{
  --paper:#101312; --surface:#171B1A; --sunk:#141817;
  --ink:#E6E9E7; --ink-2:#B5BDBA; --muted:#848E8B;
  --rule:#2A312F; --rule-soft:#1F2523;
  --gap:#D2973F; --gap-ink:#E0A954; --gap-bg:#1E1810; --gap-rule:#3C2F1A;
  --sel:#233029;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Literata,Georgia,"Times New Roman",serif;
  font-size:17px; line-height:1.68; font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--sel)}
a{color:inherit}
h1,h2,h3{font-weight:600; line-height:1.2; text-wrap:balance; margin:0}
p{margin:0 0 1.05em}
:focus-visible{outline:2px solid var(--gap); outline-offset:3px; border-radius:1px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.shell{max-width:1080px; margin:0 auto; padding:0 28px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:9; background:var(--ink); color:var(--paper); padding:9px 14px}

/* ── шапка ───────────────────────────────────────────────────────────────── */
.site{border-bottom:1px solid var(--rule); background:var(--surface)}
.head{display:flex; align-items:center; gap:28px; min-height:62px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; padding:10px 0}
.brand .mark{width:22px; height:22px; flex:none; stroke:var(--ink); stroke-width:1.7; stroke-linecap:round; fill:none}
.brand .mark-gap{fill:var(--gap); stroke:none}
.brand span{display:flex; flex-direction:column; line-height:1.18}
.brand b{font-size:15.5px; font-weight:600; letter-spacing:-.01em}
.brand i{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-style:normal;
  font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
}
.head nav{display:flex; gap:20px; flex-wrap:wrap; margin-left:auto}
.head nav a{
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:14px; color:var(--ink-2);
  text-decoration:none; padding:19px 0 17px; border-bottom:2px solid transparent;
}
.head nav a:hover{color:var(--ink); border-bottom-color:var(--rule)}
.head nav a[aria-current]{color:var(--ink); border-bottom-color:var(--ink)}
@media (max-width:760px){
  .head{min-height:0; padding-bottom:6px}
  .head nav{margin-left:0; width:100%; gap:16px; border-top:1px solid var(--rule-soft); padding-top:2px}
  .head nav a{padding:8px 0; font-size:13.5px}
}

.crumb{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); padding-top:20px;
  display:flex; gap:8px; flex-wrap:wrap; align-items:baseline;
}
.crumb a{text-decoration:none; color:var(--muted)}
.crumb a:hover{color:var(--ink)}
.crumb i{font-style:normal; opacity:.45}
.crumb span{color:var(--ink-2)}

/* ── типові сторінки ─────────────────────────────────────────────────────── */
.page{max-width:70ch; margin:0 auto; padding-top:44px; padding-bottom:90px}
.page.narrow{max-width:62ch}
.page-head{padding-bottom:26px; border-bottom:1px solid var(--rule); margin-bottom:34px}
.kicker{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); margin:0 0 14px;
}
.page-head h1{font-size:clamp(29px,4.4vw,44px); letter-spacing:-.016em; margin-bottom:18px}
.lede{font-size:19.5px; line-height:1.55; color:var(--ink-2); margin:0 0 .8em; max-width:60ch}
.quiet-lede{font-size:16.5px; color:var(--muted)}
.meta{
  font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted);
  display:flex; gap:20px; flex-wrap:wrap; margin:18px 0 0;
}

.prose h2{font-size:22px; margin:2.1em 0 .6em; letter-spacing:-.008em}
.prose p{max-width:68ch}
blockquote{
  margin:1.8em 0; padding:2px 0 2px 22px; border-left:2px solid var(--ink);
  font-size:20px; line-height:1.45; font-style:italic; max-width:52ch;
}
.canon{
  border-left:2px solid var(--gap); font-style:normal; font-size:19px;
  line-height:1.5; margin:0; padding-left:20px;
}
ul.plain{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px}
ul.plain li{padding-left:22px; position:relative; max-width:68ch}
ul.plain li::before{content:""; position:absolute; left:0; top:.72em; width:11px; height:1px; background:var(--rule); }
dl.pairs{margin:0; display:flex; flex-direction:column; gap:17px}
dl.pairs dt{font-weight:600; margin-bottom:2px}
dl.pairs dd{margin:0; color:var(--ink-2); max-width:66ch}

.block{border-top:1px solid var(--rule-soft); padding-top:26px; margin-top:30px}
.block > h2{font-size:15px; font-family:"IBM Plex Sans",system-ui,sans-serif; font-weight:600;
  letter-spacing:.02em; color:var(--muted); text-transform:uppercase; margin-bottom:14px; font-size:11.5px; letter-spacing:.11em}
.block p{max-width:68ch}
.position p{font-size:18px; line-height:1.6}
.position.empty p{color:var(--muted); font-style:italic}
.changes{margin-top:20px; padding-top:16px; border-top:1px dashed var(--rule)}
.changes h3{font-size:13px; font-family:"IBM Plex Sans",sans-serif; text-transform:uppercase;
  letter-spacing:.09em; color:var(--muted); margin-bottom:7px}
.claim p{font-size:19px; line-height:1.55}
.limits ul.plain li::before{background:var(--gap-rule); width:14px}
.sources{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px;
  font-size:14.5px; color:var(--ink-2); font-family:"IBM Plex Sans",sans-serif}
.sources li{padding-left:22px; position:relative}
.sources li::before{content:"→"; position:absolute; left:0; color:var(--muted); font-size:12px; top:.15em}

/* ── мітки стану ─────────────────────────────────────────────────────────── */
.tag{
  display:inline-flex; align-items:center; gap:7px; vertical-align:middle;
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2);
  border:1px solid var(--rule); border-radius:2px; padding:4px 9px; background:var(--surface);
  white-space:nowrap;
}
.tag i{width:7px; height:7px; border-radius:50%; flex:none; border:1px solid var(--muted)}
.tag-position i{background:var(--muted); border-color:var(--muted)}
.tag-research i{background:var(--ink); border-color:var(--ink)}
.tag-frontier i{background:var(--gap); border-color:var(--gap)}
.tag-frontier{color:var(--gap-ink); border-color:var(--gap-rule)}
.tag-conf{font-variant-numeric:tabular-nums; text-transform:none; letter-spacing:.02em; color:var(--muted)}
.tags{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px}

/* ── ДІРКА: єдиний елемент, який ламає колонку ───────────────────────────── */
.holes{
  margin:44px -30px 0; padding:26px 30px 24px;
  background:var(--gap-bg); border-top:1px solid var(--gap-rule); border-bottom:1px solid var(--gap-rule);
}
.holes h2{
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:11.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--gap-ink); margin-bottom:10px;
}
.holes-intro{font-size:15px; color:var(--gap-ink); opacity:.85; max-width:60ch; margin-bottom:20px}
.hole{padding:15px 0; border-top:1px solid var(--gap-rule)}
.hole:first-of-type{border-top:none; padding-top:0}
.hole-need{
  display:flex; align-items:baseline; gap:10px; margin:0 0 5px;
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
}
.hole-need b{color:var(--gap-ink); font-weight:500}
.hole-need span{color:var(--muted)}
.hole-text{margin:0; font-size:16px; line-height:1.58; max-width:64ch}
.holes-cta{margin:18px 0 0}
.holes-cta a{
  font-family:"IBM Plex Sans",sans-serif; font-size:14px; color:var(--gap-ink);
  text-decoration:none; border-bottom:1px solid var(--gap-rule); padding-bottom:2px;
}
.holes-cta a:hover{border-bottom-color:var(--gap-ink)}
.holes-cta.big{margin-top:44px; font-size:16px}
@media (max-width:700px){ .holes{margin-left:-18px; margin-right:-18px; padding:22px 18px} }

/* ── зв'язки ─────────────────────────────────────────────────────────────── */
.related{margin-top:34px}
.related ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; background:var(--rule-soft);
  border:1px solid var(--rule-soft)}
.related li{background:var(--surface)}
.related a{
  display:flex; align-items:baseline; gap:14px; justify-content:space-between;
  padding:13px 16px; text-decoration:none;
}
.related a:hover{background:var(--sunk)}
.related a span{font-size:16px}
.related a em{
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-style:normal; flex:none;
}
.related.quiet a span{color:var(--ink-2); font-size:15px}

/* ── індексні списки ─────────────────────────────────────────────────────── */
.index-list{list-style:none; margin:0; padding:0; counter-reset:none}
.index-list li{border-bottom:1px solid var(--rule-soft)}
.index-list li:first-child{border-top:1px solid var(--rule-soft)}
.index-list a{display:flex; gap:20px; padding:20px 4px; text-decoration:none; align-items:baseline}
.index-list a:hover{background:var(--surface)}
.idx-n{
  font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted);
  flex:none; width:32px; font-variant-numeric:tabular-nums;
}
.idx-body{display:flex; flex-direction:column; gap:5px}
.idx-body b{font-size:19px; font-weight:600; letter-spacing:-.01em}
.idx-body em{font-style:normal; font-size:15.5px; color:var(--ink-2); line-height:1.5; max-width:64ch}

/* ── питання ─────────────────────────────────────────────────────────────── */
.legend{
  display:flex; flex-direction:column; gap:10px; margin:0 0 40px; padding:18px 20px;
  background:var(--surface); border:1px solid var(--rule-soft);
}
.legend-item{display:grid; grid-template-columns:150px minmax(0,1fr); gap:4px 14px; align-items:baseline}
.legend-item .tag{justify-self:start}
@media (max-width:560px){ .legend-item{grid-template-columns:1fr} }
.legend-item em{font-style:normal; font-size:14.5px; color:var(--ink-2)}
.qgroup{margin-bottom:40px}
.qgroup > h2{
  font-family:"IBM Plex Sans",sans-serif; font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.qgroup > h2 span{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--muted);
  border:1px solid var(--rule); border-radius:2px; padding:1px 6px}
.qlist{list-style:none; margin:0; padding:0}
.qlist li{border-top:1px solid var(--rule-soft)}
.qlist li:last-child{border-bottom:1px solid var(--rule-soft)}
.qlist a{display:flex; flex-direction:column; gap:7px; padding:19px 4px; text-decoration:none}
.qlist a:hover{background:var(--surface)}
.qlist b{font-size:19.5px; font-weight:600; letter-spacing:-.012em; line-height:1.25; max-width:58ch}
.qlist em{font-style:normal; font-size:15.5px; color:var(--ink-2); line-height:1.5; max-width:66ch}
.qtags{display:flex; gap:7px; flex-wrap:wrap; margin-top:3px}
.empty-note{
  font-size:15px; color:var(--muted); border-left:2px solid var(--rule);
  padding-left:18px; max-width:60ch; margin-top:36px;
}

/* ── словник ─────────────────────────────────────────────────────────────── */
.glossary{margin:0; display:flex; flex-direction:column}
.glossary > div{padding:20px 0; border-top:1px solid var(--rule-soft)}
.glossary > div:last-child{border-bottom:1px solid var(--rule-soft)}
.glossary dt{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:7px}
.glossary dt a{font-size:19px; font-weight:600; text-decoration:none; letter-spacing:-.01em}
.glossary dt a:hover{text-decoration:underline; text-underline-offset:3px}
.glossary dt span{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.glossary dd{margin:0; color:var(--ink-2); max-width:68ch}
.copy-def{
  font-family:"IBM Plex Sans",sans-serif; font-size:12px; color:var(--muted);
  background:none; border:1px solid var(--rule); border-radius:2px; padding:4px 9px;
  cursor:pointer; margin-top:14px;
}
.copy-def:hover{color:var(--ink); border-color:var(--muted)}

/* ── карта ───────────────────────────────────────────────────────────────── */
.map{list-style:none; margin:0; padding:0}
.level{border-top:1px solid var(--rule); padding:24px 0}
.level:last-child{border-bottom:1px solid var(--rule)}
.level-head{display:flex; align-items:baseline; gap:14px}
.level-n{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted); width:20px; flex:none}
.level-head h2{font-size:23px; letter-spacing:-.012em}
.level-domains{
  font-family:"IBM Plex Sans",sans-serif; font-size:14px; color:var(--muted);
  margin:6px 0 0 34px; max-width:60ch;
}
.level-qs{list-style:none; margin:16px 0 0 34px; padding:0; display:flex; flex-direction:column; gap:9px}
.level-qs li{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.level-qs a{font-size:16.5px; text-decoration:none; border-bottom:1px solid var(--rule)}
.level-qs a:hover{border-bottom-color:var(--ink)}
.level-none{
  margin:14px 0 0 34px; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.level-empty{background:var(--sunk); margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px}
.map-foot{margin-top:26px; font-size:15px; color:var(--muted); max-width:60ch}

/* ── дірки (сторінка) ────────────────────────────────────────────────────── */
.need{margin-bottom:44px}
.need-head{border-bottom:1px solid var(--gap-rule); padding-bottom:12px; margin-bottom:4px}
.need-head h2{
  font-family:"IBM Plex Sans",sans-serif; font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gap-ink); display:flex; align-items:center; gap:10px;
}
.need-head h2 span{font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  border:1px solid var(--gap-rule); border-radius:2px; padding:1px 6px; color:var(--muted)}
.need-head p{font-size:14.5px; color:var(--muted); margin:8px 0 0; max-width:62ch}
.need-list{list-style:none; margin:0; padding:0}
.need-list li{padding:18px 0; border-bottom:1px solid var(--rule-soft)}
.need-text{margin:0 0 8px; font-size:16.5px; line-height:1.58; max-width:66ch}
.need-src{margin:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.need-src a{font-family:"IBM Plex Sans",sans-serif; font-size:13.5px; color:var(--ink-2);
  text-decoration:none; border-bottom:1px solid var(--rule)}
.need-src a:hover{color:var(--ink); border-bottom-color:var(--ink)}
.need-src em{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); font-style:normal}

/* ── робота ──────────────────────────────────────────────────────────────── */
.aud{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px;
  background:var(--rule-soft); border:1px solid var(--rule-soft); margin:20px 0}
.aud-card{background:var(--surface); padding:18px 20px 20px}
.aud-card h3{font-family:"IBM Plex Sans",sans-serif; font-size:11.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.aud-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.aud-card b{display:block; font-size:16.5px; font-weight:600; margin-bottom:3px}
.aud-card em{font-style:normal; font-size:14px; color:var(--ink-2); line-height:1.5}
.steps{list-style:none; margin:0; padding:0; counter-reset:s; display:flex; flex-direction:column; gap:16px}
.steps li{counter-increment:s; padding-left:38px; position:relative}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:.15em;
  font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted);
  border:1px solid var(--rule); border-radius:50%; width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
}
.steps b{display:block; font-size:17px; margin-bottom:2px}
.steps span{color:var(--ink-2); font-size:15.5px}
.contact .mail{margin:0 0 12px}
.contact .mail a{font-size:21px; text-decoration:none; border-bottom:1px solid var(--rule)}
.contact .mail a:hover{border-bottom-color:var(--ink)}
.note p{color:var(--muted); font-size:15.5px}

/* ── головна ─────────────────────────────────────────────────────────────── */
.hero{padding:78px 0 58px; border-bottom:1px solid var(--rule)}
.hero h1{
  font-size:clamp(30px,5.1vw,52px); letter-spacing:-.022em; line-height:1.12;
  max-width:19ch; margin-bottom:24px;
}
.hero-sub{font-size:clamp(17px,2.1vw,21px); color:var(--ink-2); max-width:52ch; line-height:1.5; margin:0}
.recog{padding-top:56px}
.recog .lede{margin-bottom:26px}
.recog-list{list-style:none; margin:0 0 46px; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--rule-soft);
  border:1px solid var(--rule-soft)}
.recog-list li{background:var(--surface); padding:20px 22px 22px}
.recog-list b{display:block; font-size:17px; line-height:1.35; margin-bottom:8px; font-weight:600}
.recog-list span{font-size:15px; color:var(--ink-2); line-height:1.55}
.turn{max-width:62ch; margin:0 auto 12px; text-align:left; padding:0 0 8px}
.turn-line{
  font-size:clamp(24px,3.6vw,34px); font-weight:600; letter-spacing:-.018em;
  line-height:1.2; margin-bottom:18px;
}
.turn-body{font-size:18.5px; line-height:1.6; color:var(--ink-2)}
.turn-more a{font-family:"IBM Plex Sans",sans-serif; font-size:15px; text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:2px}
.turn-more a:hover{border-bottom-color:var(--ink)}
.doors{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px;
  background:var(--rule-soft); border:1px solid var(--rule-soft); margin:52px auto 0}
.door{background:var(--surface); padding:24px 24px 26px; text-decoration:none; display:flex; flex-direction:column}
.door:hover{background:var(--sunk)}
.door h2{font-size:19px; letter-spacing:-.012em; margin-bottom:9px}
.door p{font-size:15px; color:var(--ink-2); line-height:1.55; flex:1}
.door-cta{
  font-family:"IBM Plex Sans",sans-serif; font-size:13.5px; color:var(--muted);
  border-top:1px solid var(--rule-soft); padding-top:12px; margin-top:6px;
}
.door:hover .door-cta{color:var(--ink)}
.corpus{padding-top:64px}
.corpus > h2{font-family:"IBM Plex Sans",sans-serif; font-size:11.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); margin-bottom:18px}
.counts{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px;
  background:var(--rule-soft); border:1px solid var(--rule-soft)}
.counts li{background:var(--surface); padding:20px 22px 18px; display:flex; flex-direction:column; gap:3px}
.counts b{font-size:32px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1}
.counts span{font-size:14px; color:var(--muted)}
.counts a{font-family:"IBM Plex Sans",sans-serif; font-size:13px; color:var(--ink-2);
  text-decoration:none; margin-top:9px; border-bottom:1px solid var(--rule); align-self:flex-start}
.counts a:hover{color:var(--ink); border-bottom-color:var(--ink)}
.count-gap b{color:var(--gap-ink)}
.count-gap{background:var(--gap-bg)}
.closing{padding-top:64px; padding-bottom:96px; max-width:64ch}
.closing > h2{font-size:24px; margin-bottom:16px; letter-spacing:-.014em}
.closing p{color:var(--ink-2)}
.closing-cta a{font-family:"IBM Plex Sans",sans-serif; font-size:15px; text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:2px}
.closing-cta a:hover{border-bottom-color:var(--ink)}

/* ── підвал ──────────────────────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--rule); background:var(--surface); margin-top:0}
.foot{display:flex; gap:36px; justify-content:space-between; flex-wrap:wrap; padding-top:34px; padding-bottom:42px}
.foot-name{font-weight:600; margin:0 0 6px}
.foot-note{font-size:14.5px; color:var(--muted); max-width:46ch; margin:0}
.foot-links{display:flex; flex-direction:column; gap:8px}
.foot-links a{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.06em;
  color:var(--muted); text-decoration:none}
.foot-links a:hover{color:var(--ink)}