/* =============================================================
   Korak — blog.css
   Reading layout for the blog: index (/blog/) + article pages.
   Link AFTER brand.css:

       <link rel="stylesheet" href="/brand.css">
       <link rel="stylesheet" href="/blog.css">

   Palette + fonts come from brand.css ("Nebo i borovina", dark).
   Tuned for long-form: ~66-char measure, 18–20px body, 1.75 leading.
   ============================================================= */

/* ---- Palette override: align the blog with the homepage --------
   brand.css ships the dark palette; the public homepage (index.html)
   uses the light "cream" palette. Loading AFTER brand.css, this block
   flips the reading surface to match the homepage. Illustration
   frames and the closing CTA stay as dark accent panels on purpose
   (same dark-on-cream device the homepage uses). */
:root {
  --bg: #F2F2EC;
  --surface: #FFFFFF;
  --surface-strong: #ECECE5;
  --text: #1A332E;
  --text-dim: #4D6661;
  --text-muted: #84948F;
  --borovina: #34635D;
  --borovina-light: #557F77;
  --borovina-cont: #B8D2CC;
  --nebo: #8DAFC8;
  --nebo-light: #B0C8DA;
  --amber: #C58E4F;
  --amber-cont: #F2DBB8;
  --border: #C8CFC4;
  --border-subtle: #DDE0D5;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; scroll-behavior: smooth; }

body {
  min-height: 100vh;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Ambient background (matches the rest of the site) ---------- */
.bg-mesh { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-mesh .orb { position: absolute; border-radius: 50%; filter: blur(110px); }
.orb-1 {
  width: 48vw; height: 48vw; min-width: 460px; min-height: 460px;
  background: radial-gradient(circle, rgba(184, 210, 204, 0.28), transparent 70%);
  top: -18%; right: -14%;
}
.orb-2 {
  width: 42vw; height: 42vw; min-width: 400px; min-height: 400px;
  background: radial-gradient(circle, rgba(197, 212, 224, 0.26), transparent 70%);
  bottom: -16%; left: -12%;
}
.orb-3 {
  width: 26vw; height: 26vw; min-width: 260px; min-height: 260px;
  background: radial-gradient(circle, rgba(242, 219, 184, 0.22), transparent 70%);
  top: 45%; left: 55%;
}
.grain {
  position: fixed; inset: 0; z-index: 1; opacity: 0.03; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 256px 256px;
}

/* ---- Reading progress bar -------------------------------------- */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--borovina), var(--nebo));
  z-index: 50; transition: width 0.08s linear;
}

/* ---- Top bar --------------------------------------------------- */
.topbar {
  position: relative; z-index: 5;
  width: 100%; max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1.1rem, 3vw, 1.75rem) clamp(1.25rem, 5vw, 2.5rem);
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand .logo { width: 34px; height: 34px; }
.brand .name {
  font-family: var(--font-head);
  font-size: 1.15rem; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: var(--text);
}
.brand .name .k {
  background: linear-gradient(135deg, var(--borovina-light), var(--borovina));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.topbar .back {
  font-family: var(--font-head);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted); text-decoration: none; transition: color 0.2s;
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.topbar .back:hover { color: var(--borovina); }

/* ================================================================
   ARTICLE
   ================================================================ */
.article { position: relative; z-index: 2; width: 100%; }

/* --- Hero / masthead --- */
.masthead {
  max-width: 760px; margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 5vw, 1.5rem) 0;
  text-align: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-head);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  color: var(--borovina);
  margin-bottom: clamp(1.1rem, 2.5vw, 1.5rem);
}
.eyebrow::before, .eyebrow::after {
  content: ''; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--borovina));
}
.eyebrow::after { background: linear-gradient(90deg, var(--borovina), transparent); }

.masthead h1 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 5.2vw, 3.35rem);
  font-weight: 700; line-height: 1.12; letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: clamp(1rem, 2.5vw, 1.4rem);
  text-wrap: balance;
}
.masthead h1 .glow {
  background: linear-gradient(120deg, var(--borovina), var(--nebo));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.byline {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  color: var(--text-muted); font-size: 0.9rem;
}
.byline .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); opacity: 0.6; }
.byline strong { color: var(--text-dim); font-weight: 500; }

/* --- Hero illustration --- */
.hero-figure {
  max-width: 940px; margin: clamp(2rem, 5vw, 3.25rem) auto 0;
  padding: 0 clamp(1rem, 4vw, 1.5rem);
}
.hero-figure .frame {
  border-radius: 22px; overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(157,200,192,0.10), transparent 60%),
    linear-gradient(180deg, #16211F, #121a18);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.7);
}
.hero-figure svg { display: block; width: 100%; height: auto; }

/* --- Body prose --- */
.prose {
  max-width: 680px; margin: 0 auto;
  padding: clamp(2.25rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 1.5rem) 0;
  font-size: clamp(1.075rem, 0.98rem + 0.42vw, 1.2rem);
  line-height: 1.78;
  color: var(--text-dim);
}
.prose p {
  margin-bottom: 1.3rem;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.prose p strong { color: var(--text); font-weight: 600; }
.prose p em { color: var(--text); font-style: italic; }

/* Lead paragraph */
.prose .lead {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.42rem);
  line-height: 1.62; color: var(--text);
  margin-bottom: 1.6rem;
}

/* Drop cap on the first story paragraph */
.prose .dropcap::first-letter {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 3.5em; line-height: 0.82;
  float: left; margin: 0.06em 0.12em 0 0;
  background: linear-gradient(135deg, var(--borovina), var(--nebo));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Section headings */
.prose h2 {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem);
  font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--text);
  margin: clamp(2.75rem, 6vw, 3.75rem) 0 1.1rem;
  scroll-margin-top: 90px;
  text-wrap: balance;
}
.prose h3 {
  font-family: var(--font-head);
  font-size: 1.15rem; font-weight: 600; color: var(--text);
  margin: 1.75rem 0 0.6rem;
}

/* Persona chip that opens a case-study section */
.persona {
  display: inline-flex; align-items: baseline; gap: 0.6rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(157, 200, 192, 0.07);
  font-family: var(--font-head);
  margin: clamp(2.75rem, 6vw, 3.75rem) 0 0.25rem;
  scroll-margin-top: 90px;
}
.persona .who { font-weight: 700; font-size: 1.05rem; color: var(--text); letter-spacing: 0.3px; }
.persona .age { font-size: 0.85rem; font-weight: 600; color: var(--borovina); }
.persona + h2 { margin-top: 0.6rem; }

/* Section divider */
.rule {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  margin: clamp(2.75rem, 6vw, 3.5rem) 0;
}
.rule span { width: 5px; height: 5px; border-radius: 50%; background: var(--borovina); opacity: 0.5; }
.rule span:nth-child(2) { background: var(--nebo); }

/* Pull quote */
.pullquote {
  margin: clamp(2rem, 5vw, 2.75rem) 0;
  padding-left: clamp(1.1rem, 3vw, 1.6rem);
  border-left: 3px solid var(--borovina);
}
.pullquote p {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  font-weight: 600; line-height: 1.4; letter-spacing: -0.01em;
  color: var(--text); margin: 0;
}
.pullquote cite {
  display: block; margin-top: 0.9rem;
  font-family: var(--font-body); font-style: normal;
  font-size: 0.92rem; font-weight: 400; color: var(--text-muted); letter-spacing: 0.3px;
}

/* In-article figure */
.figure { margin: clamp(2.25rem, 5vw, 3rem) 0; }
.figure .frame {
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #16211F, #121a18);
}
.figure svg { display: block; width: 100%; height: auto; }
.figure figcaption {
  margin-top: 0.8rem; text-align: center;
  font-size: 0.85rem; color: var(--text-muted); line-height: 1.5;
  padding: 0 0.5rem;
}

/* Illustrations drawn directly on the page (no dark frame). Used on
   the light-palette articles so figures read as part of the page
   rather than as boxed images. */
.hero-figure.plain .frame,
.figure.plain .frame {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* Callout / note */
.callout {
  margin: clamp(1.75rem, 4vw, 2.25rem) 0;
  padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.2rem, 3vw, 1.6rem);
  border-radius: 16px;
  border: 1px solid rgba(197, 142, 79, 0.32);
  background: linear-gradient(135deg, rgba(242, 219, 184, 0.42), rgba(184, 210, 204, 0.22));
}
.callout p { margin: 0; color: var(--text-dim); font-size: 0.98rem; line-height: 1.7; text-align: left; }
.callout p strong { color: #8A5E24; }

/* Bulleted + numbered lists */
.prose ul, .prose ol { margin: 0.4rem 0 1.4rem; padding: 0; list-style: none; }
.prose ul li, .prose ol li {
  position: relative; padding-left: 1.7rem; margin-bottom: 0.65rem; color: var(--text-dim);
}
.prose ul li::before {
  content: ''; position: absolute; left: 0.15rem; top: 0.72em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--borovina);
}
.prose ol { counter-reset: item; }
.prose ol li { counter-increment: item; }
.prose ol li::before {
  content: counter(item);
  position: absolute; left: 0; top: 0.15em;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 0.72rem; font-weight: 700;
  color: var(--bg); background: var(--borovina);
}
.prose li strong { color: var(--text); font-weight: 600; }

/* ---- Comparison table (scrolls horizontally on narrow screens) - */
.prose .table-wrap {
  margin: 1.6rem 0 1.9rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
}
.prose table.compare {
  width: 100%; min-width: 540px;
  border-collapse: collapse;
  font-size: 0.95rem; line-height: 1.55;
}
.prose table.compare th,
.prose table.compare td {
  text-align: left; vertical-align: top;
  padding: 0.72rem 0.9rem;
  border-bottom: 1px solid var(--border-subtle);
}
.prose table.compare thead th {
  font-family: var(--font-head); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.3px; color: var(--text);
  background: var(--surface-strong);
  border-bottom: 1.5px solid var(--border);
}
.prose table.compare tbody th {
  font-family: var(--font-head); font-weight: 600; color: var(--text);
}
.prose table.compare td { color: var(--text-dim); }
.prose table.compare tbody tr:last-child th,
.prose table.compare tbody tr:last-child td { border-bottom: none; }
.prose table.compare li { padding-left: 0; margin-bottom: 0; }
.prose table.compare li::before { content: none; }

/* ---- Inline links --------------------------------------------- */
.prose a {
  color: var(--borovina);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--borovina) 32%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.prose a:hover {
  color: var(--borovina-light);
  text-decoration-color: var(--borovina-light);
}

/* ---- Table of contents (nav, not a bullet list) -------------- */
.prose ul.toc {
  counter-reset: toc;
  list-style: none;
  display: grid;
  gap: 0.4rem;
  margin: 1.25rem 0 2.4rem;
  padding: 0;
}
.prose ul.toc li { margin: 0; padding: 0; }
.prose ul.toc li::before { content: none; }
.prose ul.toc a {
  counter-increment: toc;
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.68rem 1rem 0.68rem 0.7rem;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-head); font-weight: 500; font-size: 1rem; line-height: 1.35;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.prose ul.toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--borovina-cont);
  color: var(--borovina);
  font-family: var(--font-head); font-weight: 700; font-size: 0.78rem;
}
.prose ul.toc a::after {
  content: '→';
  margin-left: auto;
  color: var(--borovina);
  opacity: 0; transform: translateX(-5px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.prose ul.toc a:hover {
  border-color: var(--borovina);
  color: var(--borovina);
  transform: translateX(4px);
  box-shadow: 0 10px 24px -18px rgba(26, 51, 46, 0.5);
}
.prose ul.toc a:hover::after { opacity: 1; transform: translateX(0); }

/* ---- FAQ ------------------------------------------------------- */
.faq { margin-top: 1.5rem; display: grid; gap: 0.85rem; }
.faq details {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface);
  padding: 0 clamp(1.1rem, 3vw, 1.4rem);
  transition: border-color 0.2s, background 0.2s;
}
.faq details[open] { border-color: rgba(157,200,192,0.35); background: var(--surface-strong); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.15rem 0;
  font-family: var(--font-head); font-size: 1.06rem; font-weight: 600; color: var(--text);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev {
  flex: none; width: 20px; height: 20px; color: var(--borovina);
  transition: transform 0.25s ease;
}
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .answer { padding: 0 0 1.2rem; }
.faq .answer p { font-size: 1rem; line-height: 1.72; margin-bottom: 0.8rem; }
.faq .answer p:last-child { margin-bottom: 0; }
.faq .answer ul, .faq .answer ol { margin-bottom: 0.4rem; }

/* ---- Closing CTA ---------------------------------------------- */
.cta-wrap { max-width: 760px; margin: clamp(3rem, 7vw, 4.5rem) auto 0; padding: 0 clamp(1.25rem, 5vw, 1.5rem); }
.cta {
  position: relative; overflow: hidden;
  border-radius: 24px;
  padding: clamp(2rem, 5vw, 3.25rem);
  text-align: center;
  border: 1px solid transparent;
  background:
    radial-gradient(120% 130% at 50% -10%, rgba(157,200,192,0.18), transparent 55%),
    linear-gradient(135deg, #1A332E, #34635D);
  box-shadow: 0 26px 60px -34px rgba(26, 51, 46, 0.55);
}
.cta h2 {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 700; line-height: 1.18;
  color: #F4F4EE; margin-bottom: 1rem; letter-spacing: -0.01em; text-wrap: balance;
}
.cta p { color: rgba(226, 233, 224, 0.86); font-size: 1.05rem; line-height: 1.7; max-width: 52ch; margin: 0 auto 1.75rem; text-align: center; }
.cta p strong { color: #FFFFFF; }
.cta .btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.9rem; border-radius: 999px;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; letter-spacing: 0.3px;
  color: var(--borovina); text-decoration: none;
  background: #F4F4EE;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.4);
}
.cta .btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.5); }

/* ---- Instagram follow CTA -------------------------------------- */
.ig-follow { max-width: 760px; margin: clamp(1.25rem, 3.5vw, 2rem) auto 0; padding: 0 clamp(1.25rem, 5vw, 1.5rem); }
.ig-follow a {
  display: flex; align-items: center; justify-content: center; gap: 0.95rem;
  padding: 1.1rem 1.5rem; border-radius: 18px;
  border: 1px solid var(--border); background: var(--surface);
  text-decoration: none; color: var(--borovina);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ig-follow a:hover {
  border-color: var(--borovina); transform: translateY(-2px);
  box-shadow: 0 16px 34px -22px rgba(26, 51, 46, 0.5);
}
.ig-follow .ig-follow-icon { display: inline-flex; flex-shrink: 0; }
.ig-follow .ig-follow-text { display: inline-flex; flex-direction: column; line-height: 1.3; }
.ig-follow .ig-follow-text strong {
  font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--text);
}
.ig-follow .ig-follow-text span { font-size: 0.9rem; color: var(--borovina-light); }

/* ---- Footer ---------------------------------------------------- */
.site-footer {
  position: relative; z-index: 2;
  max-width: 760px; margin: clamp(3.5rem, 8vw, 5rem) auto 0;
  padding: 1.6rem clamp(1.25rem, 5vw, 1.5rem) clamp(2.5rem, 6vw, 3.5rem);
  border-top: 1px solid var(--border);
  text-align: center;
}
.site-footer .links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.4rem;
  margin-bottom: 1rem;
}
.site-footer .links a {
  color: var(--text-muted); text-decoration: none;
  font-size: 0.78rem; letter-spacing: 1.2px; text-transform: uppercase; transition: color 0.2s;
}
.site-footer .links a:hover { color: var(--text); }
.site-footer .fine { color: var(--text-muted); font-size: 0.78rem; line-height: 1.6; }

/* ================================================================
   BLOG INDEX
   ================================================================ */
.index-wrap { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 2.5rem); }
.index-head { max-width: 720px; margin: clamp(1rem, 4vw, 2.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.index-head h1 {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
  margin: 0.9rem 0 0.9rem;
}
.index-head h1 .glow {
  background: linear-gradient(120deg, var(--borovina), var(--nebo));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.index-head p { color: var(--text-dim); font-size: 1.1rem; line-height: 1.7; max-width: 56ch; }

.posts { display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); grid-template-columns: 1fr; padding-bottom: clamp(3rem,7vw,5rem); }
@media (min-width: 720px) { .posts { grid-template-columns: repeat(2, 1fr); } }

.post-card {
  display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden; text-decoration: none;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.post-card:hover {
  transform: translateY(-4px);
  border-color: var(--borovina);
  box-shadow: 0 20px 44px -26px rgba(26,51,46,0.28);
}
.post-card:focus-visible {
  outline: none;
  border-color: var(--borovina);
  box-shadow: 0 0 0 3px var(--borovina-cont);
}
.post-card .thumb {
  position: relative;
  background: var(--surface-strong);
  border-bottom: 1px solid var(--border-subtle);
}
.post-card .thumb svg { display: block; width: 100%; height: auto; }
.post-card .body { padding: clamp(1.3rem, 3vw, 1.75rem); display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.post-card .kicker {
  font-family: var(--font-head); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--borovina);
}
.post-card h2 {
  font-family: var(--font-head); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 700; line-height: 1.22; color: var(--text); letter-spacing: -0.01em;
}
.post-card p { color: var(--text-dim); font-size: 0.98rem; line-height: 1.6; margin: 0; }
.post-card .meta {
  margin-top: auto; padding-top: 0.4rem;
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--text-muted); font-size: 0.82rem;
}
.post-card .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); opacity: 0.6; }
.post-card .read {
  margin-top: 0.2rem; font-family: var(--font-head); font-size: 0.85rem; font-weight: 600;
  color: var(--borovina); display: inline-flex; align-items: center; gap: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .post-card, .cta .btn { transition: none; }
}