:root{
  --ink: oklch(0.22 0.012 260);
  --ink-soft: oklch(0.42 0.012 258);
  --graphite: oklch(0.27 0.014 258);
  --graphite-deep: oklch(0.23 0.013 258);
  --on-dark: oklch(0.96 0.004 250);
  --on-dark-muted: oklch(0.79 0.01 250);
  --bg: oklch(0.972 0.003 250);
  --surface: oklch(1 0 0);
  --amber: oklch(0.8 0.16 75);
  --amber-bright: oklch(0.84 0.157 80);
  --amber-ink: oklch(0.34 0.07 65);
  --amber-tint: oklch(0.95 0.04 80);
  --line: oklch(0.88 0.006 250);
  --line-dark: oklch(0.38 0.014 258);
  --radius: 12px;
  --font-display: "Oswald", "Arial Narrow", "Segoe UI", sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  text-transform:uppercase;
  letter-spacing:0.01em;
  text-wrap:balance;
}
p{ text-wrap:pretty; }
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:1160px; margin-inline:auto; padding-inline:clamp(1.25rem, 4vw, 2.5rem); }

/* Шапка */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--graphite-deep);
  border-bottom:1px solid var(--line-dark);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:0.8rem;
}
.logo{ display:inline-flex; align-items:center; gap:0.7rem; text-decoration:none; }
.logo-slot{
  font-family:var(--font-display);
  font-weight:600; font-size:1.2rem;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--on-dark);
  border:1.5px dashed var(--line-dark);
  border-radius:8px;
  padding:0.1rem 0.65rem 0.15rem;
  white-space:nowrap;
}
.logo-slot small{
  display:block;
  font-family:var(--font-body);
  font-weight:500; font-size:0.5em;
  letter-spacing:0.08em; text-transform:none;
  color:var(--on-dark-muted);
  margin-top:-0.2em;
}
.site-nav{ display:flex; align-items:center; gap:clamp(1rem, 2.5vw, 2rem); }
.site-nav a{
  color:var(--on-dark-muted);
  text-decoration:none; font-weight:600; font-size:0.95rem;
}
.site-nav a:hover{ color:var(--on-dark); }
.btn{
  display:inline-flex; align-items:center; gap:0.55rem;
  font-family:var(--font-body); font-weight:800; font-size:1rem;
  text-decoration:none; border-radius:10px;
  padding:0.7rem 1.3rem;
}
.btn-amber, .site-nav a.btn-amber{ background:var(--amber); color:var(--ink); }
.btn-amber:hover, .site-nav a.btn-amber:hover{ background:var(--amber-bright); color:var(--ink); }
.header-phone{ padding:0.55rem 1.1rem; font-size:0.95rem; white-space:nowrap; }

/* Хлібні крихти */
.crumbs{
  padding-block:1.4rem 0;
  font-size:0.9rem;
  color:var(--ink-soft);
}
.crumbs a{ color:var(--amber-ink); font-weight:600; text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }

/* Стаття */
.article-head{ padding-block:1.6rem 0.5rem; }
.article-head h1{
  font-size:clamp(1.9rem, 4.5vw, 3rem);
  max-width:26ch;
}
.article-meta{
  margin-top:0.9rem;
  font-size:0.9rem; font-weight:600;
  color:var(--ink-soft);
}
article.prose{
  max-width:72ch;
  padding-block:1.8rem 4rem;
}
.prose h2{
  font-size:clamp(1.35rem, 2.6vw, 1.75rem);
  margin:2.4rem 0 0.9rem;
}
.prose h3{
  font-size:1.15rem;
  margin:1.8rem 0 0.6rem;
}
.prose p{ margin-block:0.9rem; }
.prose p:first-of-type{ font-size:1.15rem; color:var(--ink-soft); }
.prose ul, .prose ol{ margin:0.9rem 0 0.9rem 1.4rem; }
.prose li{ margin-block:0.45rem; }
.prose li::marker{ color:var(--amber-ink); font-weight:700; }
.prose strong{ color:var(--ink); }
.prose a{ color:var(--amber-ink); font-weight:600; }
.prose table{
  border-collapse:collapse;
  width:100%;
  margin-block:1.2rem;
  font-size:0.98rem;
}
.prose th, .prose td{
  text-align:left;
  padding:0.6rem 0.9rem;
  border-bottom:1px solid var(--line);
}
.prose th{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-weight:600;
  border-bottom:2px solid var(--ink);
}
.callout{
  background:var(--amber-tint);
  border-radius:var(--radius);
  padding:1.3rem 1.5rem;
  margin-block:1.6rem;
}
.callout p{ margin:0; }
.callout .btn{ margin-top:0.9rem; }
.prose .cta-inline{
  font-weight:700;
}

/* Список статей (blog/index) */
.post-list{
  list-style:none;
  max-width:820px;
  margin-block:2.2rem 4rem;
  border-top:2px solid var(--ink);
}
.post-list li{ border-bottom:1px solid var(--line); }
.post-list a{
  display:block;
  padding:1.4rem 0.2rem;
  text-decoration:none;
}
.post-list a:hover h2{ color:var(--amber-ink); }
.post-list h2{
  font-size:1.3rem;
  letter-spacing:0.02em;
}
.post-list p{
  margin-top:0.5rem;
  color:var(--ink-soft);
  max-width:64ch;
}

/* Підвал */
.site-footer{
  background:var(--graphite-deep);
  color:var(--on-dark-muted);
  font-size:0.95rem;
}
.site-footer .wrap{
  padding-block:2.5rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
}
.site-footer p{ max-width:52ch; }
.site-footer a{ color:var(--on-dark); }

@media (max-width: 720px){
  .site-nav a:not(.header-phone){ display:none; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}