/* =========================================================================
   Investor Tax — Blog design system
   Editorial, high-contrast, anti-AI-template. Dark + light via CSS variables.
   Fonts: Onest (UI/headings), Source Serif 4 (article body), JetBrains Mono.
   ========================================================================= */

/* ---- Theme tokens -------------------------------------------------------- */
:root,
html.theme-dark {
  --bg:        #0b0f14;
  --surface:   #0f141b;
  --surface-2: #131922;
  --line:      #1c242e;
  --line-soft: #161d26;
  --hi:        #eef2f6;
  --mid:       #a6b0bb;
  --low:       #6b7682;
  --accent:    #2bd07a;
  --accent-link:#46dd8c;
  --accent-ink:#04130a;        /* text on accent fill */
  --accent-wash:rgba(43,208,122,0.10);
  --featured:  #f08a24;        /* "Найновіше" badge — orange, pops over green */
  --featured-ink:#1a0f02;
  --tag-active-bg:  var(--accent);
  --tag-active-ink: #04130a;
  --search-tint: rgba(43,208,122,0.07);
  --shadow:    0 1px 0 rgba(255,255,255,0.02), 0 18px 40px -24px rgba(0,0,0,0.8);
  --gold:      #e3b341;
  color-scheme: dark;
}

html.theme-light {
  --bg:        #fbfbf9;
  --surface:   #ffffff;
  --surface-2: #f6f5f1;
  --line:      #e6e5df;
  --line-soft: #efeee9;
  --hi:        #15181c;
  --mid:       #555c64;
  --low:       #8a9098;
  --accent:    #12a763;
  --accent-link:#0f8f55;
  --accent-ink:#ffffff;        /* light theme: white text on green buttons */
  --accent-wash:rgba(18,167,99,0.08);
  --featured:  #e4791a;
  --featured-ink:#ffffff;
  --tag-active-bg:  #15181c;
  --tag-active-ink: #ffffff;
  --search-tint: #ffffff;
  --shadow:    0 1px 2px rgba(20,24,28,0.04), 0 16px 36px -28px rgba(20,24,28,0.30);
  --gold:      #c9982a;
  color-scheme: light;
}

/* ---- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--hi);
  font-family: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 60px;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--hi); font-weight: 700; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand__glyph { width: 40px; height: 40px; flex-shrink: 0; display: block; }
html.theme-dark .brand__glyph--light { display: none; }
html.theme-light .brand__glyph--dark { display: none; }
.brand__name { font-size: 1.05rem; }

.nav-actions { display: flex; align-items: center; gap: 0.5rem; }
.nav-link { color: var(--mid); font-size: 0.92rem; padding: 0.4rem 0.5rem; border-radius: 8px; }
.nav-link:hover { color: var(--hi); text-decoration: none; }

.pill {
  font-size: 0.78rem; font-weight: 600; color: var(--mid);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 0.32rem 0.55rem; line-height: 1;
}
.pill:hover { color: var(--hi); border-color: var(--mid); text-decoration: none; }

.btn-accent {
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: 0.92rem;
  padding: 0.5rem 1rem; border-radius: 10px; border: 0; cursor: pointer;
  transition: filter .16s ease, transform .16s ease;
}
.btn-accent:hover { filter: brightness(1.06); text-decoration: none; }
.btn-accent:active { transform: translateY(1px); }

.theme-toggle {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: transparent; color: var(--mid);
  border: 1px solid var(--line); cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}
.theme-toggle:hover { color: var(--hi); border-color: var(--mid); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
html.theme-light .theme-toggle .icon-sun { display: block; }
html.theme-light .theme-toggle .icon-moon { display: none; }

/* =========================================================================
   Index — masthead row + search
   ========================================================================= */
.masthead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-top: clamp(1.6rem, 4vw, 2.6rem); padding-bottom: 1.1rem;
}
.masthead__title { margin: 0; }
.masthead__title h1 {
  font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.05; margin: 0;
}
.masthead__title p { margin: 0.5rem 0 0; color: var(--mid); font-size: 0.98rem; max-width: 46ch; }

.search {
  position: relative; flex: 0 1 320px; min-width: 220px;
}
.search input {
  width: 100%; font-family: inherit; font-size: 0.95rem; color: var(--hi);
  background: var(--search-tint);
  border: 1.5px solid var(--line);
  border-radius: 12px; padding: 0.62rem 0.9rem 0.62rem 2.3rem;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.search input::placeholder { color: var(--low); }
.search input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}
.search__icon {
  position: absolute; left: 0.78rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--accent); pointer-events: none;
}
.search__clear {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border: 0; background: transparent; color: var(--low);
  cursor: pointer; border-radius: 6px; display: none; place-items: center;
}
.search__clear:hover { color: var(--hi); }
.search.is-filled .search__clear { display: grid; }

/* ---- Tag carousel -------------------------------------------------------- */
.tagbar {
  display: flex; gap: 0.5rem; overflow-x: auto; scroll-behavior: smooth;
  padding: 0.6rem 0.3rem 0.95rem 0.4rem;
  -ms-overflow-style: none; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.4rem;
}
.tagbar::-webkit-scrollbar { display: none; }
/* no focus ring on chips — it gets clipped by the scroll container; the
   pressed (aria-pressed) fill is the selection indicator */
.tag-chip:focus { outline: none; }
.tag-chip:focus-visible { outline: none; }
.tag-chip {
  flex: 0 0 auto; cursor: pointer; font-family: inherit;
  font-size: 0.85rem; font-weight: 500; color: var(--mid);
  background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 0.4rem 0.85rem; line-height: 1;
  white-space: nowrap; transition: color .14s, border-color .14s, background .14s;
}
.tag-chip:hover { color: var(--hi); border-color: var(--mid); }
.tag-chip[aria-pressed="true"] {
  background: var(--tag-active-bg); color: var(--tag-active-ink);
  border-color: var(--tag-active-bg); font-weight: 600;
}
.tag-chip__count { opacity: 0.55; font-variant-numeric: tabular-nums; margin-left: 0.3rem; }

/* =========================================================================
   Featured — newest article
   ========================================================================= */
.featured {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.2rem, 4vw, 2.5rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.4rem) 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) { .featured { grid-template-columns: 1fr; gap: 1rem; } }
.badge-new {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--featured); color: var(--featured-ink);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.3rem 0.6rem; border-radius: 7px; line-height: 1;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--featured) 60%, transparent);
}
.featured__meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.featured__date { color: var(--low); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.featured__title {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.12; margin: 0 0 0.7rem; color: var(--hi);
}
.featured__title a { color: inherit; }
.featured__title a:hover { color: var(--accent-link); text-decoration: none; }
.featured__excerpt { color: var(--mid); font-size: 1rem; line-height: 1.6; margin: 0 0 1.1rem; max-width: 52ch; }
.featured__aside {
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  padding: 1.4rem; box-shadow: var(--shadow);
}
.featured__emoji { font-size: 2.4rem; line-height: 1; margin-bottom: 0.8rem; }
.featured__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.readmore {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--accent-link); font-weight: 600; font-size: 0.92rem;
}
.readmore svg { width: 15px; height: 15px; transition: transform .18s ease; }
.readmore:hover { text-decoration: none; }
.readmore:hover svg { transform: translateX(3px); }

/* tag label (read-only) */
.taglabel {
  font-size: 0.74rem; font-weight: 500; color: var(--mid);
  border: 1px solid var(--line); border-radius: 6px; padding: 0.22rem 0.5rem; line-height: 1;
}
/* tags inside the article header — larger and accent-coloured per theme */
.article-head__tags .taglabel {
  font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.78rem; border-radius: 999px;
  color: var(--accent-link); background: var(--accent-wash);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  transition: border-color .14s, background .14s;
}
.article-head__tags .taglabel:hover {
  color: var(--accent-link); text-decoration: none;
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent);
}
/* tags in index rows + featured — lightly accent-tinted so topics stand out */
.post-row__tags .taglabel,
.featured__tags .taglabel {
  color: var(--accent-link); font-weight: 500;
  background: var(--accent-wash);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
}
.post-row__tags .taglabel:hover,
.featured__tags .taglabel:hover {
  color: var(--accent-link); text-decoration: none; border-color: var(--accent);
}
/* featured aside "Topics" label */
.featured__aside-label {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--low); margin-bottom: 0.7rem;
}

/* =========================================================================
   Article list (editorial rows, not boxed cards)
   ========================================================================= */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-row {
  display: grid; grid-template-columns: 7.5rem 1fr auto; gap: clamp(1rem, 3vw, 2rem);
  align-items: baseline;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line);
}
.post-row[hidden] { display: none; }
.post-row__date { color: var(--low); font-size: 0.82rem; font-variant-numeric: tabular-nums; padding-top: 0.2rem; }
.post-row__body { min-width: 0; }
.post-row__title {
  font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.2; margin: 0 0 0.45rem;
}
.post-row__title a { color: var(--hi); }
.post-row__title a:hover { color: var(--accent-link); text-decoration: none; }
.post-row__excerpt { color: var(--mid); font-size: 0.95rem; line-height: 1.55; margin: 0 0 0.6rem; max-width: 64ch; }
.post-row__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.post-row__arrow { color: var(--low); align-self: center; }
.post-row__arrow svg { width: 18px; height: 18px; transition: transform .18s, color .18s; }
.post-row:hover .post-row__arrow svg { color: var(--accent); transform: translateX(3px); }
@media (max-width: 640px) {
  .post-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .post-row__arrow { display: none; }
}

.no-results { padding: 3rem 0; text-align: center; color: var(--mid); }
.no-results strong { color: var(--hi); }

/* ---- Pagination ---------------------------------------------------------- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 0.4rem; padding: 2rem 0 1rem; }
.pagination button {
  font-family: inherit; font-size: 0.9rem; min-width: 38px; height: 38px;
  border: 1px solid var(--line); background: transparent; color: var(--mid);
  border-radius: 9px; cursor: pointer; padding: 0 0.6rem;
  font-variant-numeric: tabular-nums; transition: color .14s, border-color .14s, background .14s;
}
.pagination button:hover:not(:disabled) { color: var(--hi); border-color: var(--mid); }
.pagination button[aria-current="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.pagination button:disabled { opacity: 0.4; cursor: default; }

/* =========================================================================
   Article page
   ========================================================================= */
.breadcrumb { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
  color: var(--low); font-size: 0.83rem; padding: 1.3rem 0 0; }
.breadcrumb a { color: var(--mid); }
.breadcrumb a:hover { color: var(--hi); text-decoration: none; }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb [aria-current] { color: var(--hi); }

.article-layout {
  display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: clamp(2rem, 5vw, 4rem);
  align-items: start; padding-top: 1.4rem;
}
@media (max-width: 940px) { .article-layout { grid-template-columns: 1fr; } }

.article-head { padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); margin-bottom: 1.8rem; }
.article-head h1 {
  font-size: clamp(1.85rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.1; margin: 0.7rem 0 0.8rem; color: var(--hi);
}
.article-head__meta { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.article-head__date { color: var(--low); font-size: 0.85rem; }
.article-head__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.article-head__tags a { text-decoration: none; }

/* ---- Prose (Source Serif 4 body) ---------------------------------------- */
.prose {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.16rem; line-height: 1.72; color: var(--hi);
  max-width: 68ch;
}
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.15rem; color: color-mix(in srgb, var(--hi) 86%, var(--mid)); }
.prose .lead {
  font-size: 1.32rem; line-height: 1.55; color: var(--hi); font-weight: 400;
  margin: 0 0 1.8rem;
}
.prose h2 {
  font-family: "Onest", sans-serif; font-size: clamp(1.4rem, 2.6vw, 1.72rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--hi);
  margin: 2.6rem 0 0.9rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  scroll-margin-top: 80px;
}
.prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.5rem; }
.prose h3 {
  font-family: "Onest", sans-serif; font-size: 1.22rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--hi); margin: 1.9rem 0 0.6rem; scroll-margin-top: 80px;
}
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.prose li { margin: 0 0 0.5rem; padding-left: 0.25rem; }
.prose li::marker { color: var(--accent); }
.prose ol li::marker { color: var(--low); font-weight: 600; }
.prose strong { color: var(--hi); font-weight: 600; }
.prose em { color: color-mix(in srgb, var(--hi) 80%, var(--mid)); }
.prose a { color: var(--accent-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
/* buttons inside prose (e.g. inline-CTA) must keep button styling, not link color */
.prose a.btn-accent { color: var(--accent-ink); text-decoration: none; }
.prose a.btn-accent:hover { color: var(--accent-ink); text-decoration: none; }

/* code / formulas — JetBrains Mono */
.prose code {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.86em; background: var(--surface-2); color: var(--accent-link);
  padding: 0.12em 0.4em; border-radius: 5px; border: 1px solid var(--line-soft);
}
.prose pre {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.1rem 1.25rem; overflow-x: auto; margin: 0 0 1.4rem; line-height: 1.6;
}
.prose pre code { background: none; border: 0; padding: 0; color: var(--hi); font-size: 0.92rem; }

/* tables */
.prose table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.96rem;
  font-family: "Onest", sans-serif;
}
.prose thead th {
  text-align: left; font-weight: 600; color: var(--hi); font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.6rem 0.8rem; border-bottom: 2px solid var(--line);
}
.prose tbody td { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--line); color: var(--mid); vertical-align: top; }
.prose tbody tr:hover td { background: var(--surface-2); }

/* callout — flat editorial, no colored left border */
.prose .callout {
  font-family: "Onest", sans-serif; font-size: 0.98rem; line-height: 1.6;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem 1.2rem; margin: 0 0 1.4rem; color: var(--mid);
}
.prose .callout strong { color: var(--hi); }
.prose blockquote {
  margin: 0 0 1.4rem; padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 2px solid var(--accent); color: var(--mid); font-style: italic;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2rem 0; }

/* ---- Inline CTA inside article body ------------------------------------- */
.inline-cta {
  font-family: "Onest", sans-serif; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 14px; padding: 1.1rem 1.3rem; margin: 1.8rem 0;
}
.inline-cta__text { font-size: 1rem; color: var(--hi); font-weight: 500; max-width: 40ch; }
.inline-cta__text span { display: block; color: var(--mid); font-weight: 400; font-size: 0.9rem; margin-top: 0.2rem; }

/* ---- FAQ (native details/summary, no JS) --------------------------------- */
.faq { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.faq__title {
  font-family: "Onest", sans-serif; font-size: clamp(1.4rem, 2.6vw, 1.72rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--hi);
  margin: 0 0 1.1rem;
}
.faq__item {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  margin: 0 0 0.6rem; overflow: hidden;
}
.faq__item summary {
  font-family: "Onest", sans-serif; font-size: 1.02rem; font-weight: 600; color: var(--hi);
  padding: 0.9rem 1.1rem; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--low); transition: transform 0.2s ease; }
.faq__item summary:hover svg { color: var(--accent-link); }
.faq__item[open] summary svg { transform: rotate(45deg); color: var(--accent-link); }
.faq__item > p {
  font-family: "Source Serif 4", Georgia, serif; font-size: 1.05rem; line-height: 1.65;
  color: var(--mid); margin: 0; padding: 0 1.1rem 1rem;
}

/* =========================================================================
   TOC sidebar
   ========================================================================= */
.toc { position: sticky; top: 80px; align-self: start; }
@media (max-width: 940px) { .toc { display: none; } }
.toc__label { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--low); margin-bottom: 0.7rem; }
.toc ul { list-style: none; margin: 0 0 1.6rem; padding: 0; border-left: 1px solid var(--line); }
.toc li { margin: 0; }
.toc ul a {
  display: block; padding: 0.32rem 0 0.32rem 0.9rem; margin-left: -1px;
  border-left: 2px solid transparent; color: var(--mid); font-size: 0.86rem; line-height: 1.35;
}
.toc ul a:hover { color: var(--hi); text-decoration: none; }
.toc ul a.is-active { color: var(--accent-link); border-left-color: var(--accent); font-weight: 500; }

.toc-cta {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.1rem; box-shadow: var(--shadow);
}
.toc-cta p { margin: 0 0 0.8rem; font-size: 0.88rem; color: var(--mid); line-height: 1.45; }
.toc-cta .btn-accent { width: 100%; text-align: center; }

/* =========================================================================
   Final CTA banner + read-also
   ========================================================================= */
.cta-banner {
  border-top: 1px solid var(--line); margin-top: 3rem;
  background: var(--surface);
}
.cta-banner__inner { padding: clamp(2.5rem, 6vw, 4rem) 0; text-align: center; max-width: 600px; margin-inline: auto; }
.cta-banner h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.7rem; color: var(--hi); }
.cta-banner p { color: var(--mid); font-size: 1rem; margin: 0 0 1.6rem; }
.cta-banner__actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.btn-ghost {
  font-family: inherit; font-weight: 600; font-size: 0.92rem; color: var(--hi);
  padding: 0.5rem 1.1rem; border-radius: 10px; border: 1px solid var(--line); background: transparent; cursor: pointer;
}
.btn-ghost:hover { border-color: var(--mid); text-decoration: none; }

.read-also { padding: 2.6rem 0 1rem; border-top: 1px solid var(--line); margin-top: 2.6rem; }
.read-also__label { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--low); margin-bottom: 1.1rem; }
.read-also__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .read-also__grid { grid-template-columns: 1fr; } }
.related {
  display: block; border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem;
  background: var(--surface); transition: border-color .16s ease, transform .16s ease;
}
.related:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); text-decoration: none; transform: translateY(-2px); }
.related__emoji { font-size: 1.4rem; margin-bottom: 0.5rem; }
.related__title { font-weight: 700; color: var(--hi); font-size: 1.02rem; line-height: 1.25; margin: 0 0 0.35rem; }
.related__excerpt { color: var(--mid); font-size: 0.88rem; line-height: 1.45; margin: 0 0 0.8rem; }
.related__more {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--accent-link); font-weight: 600; font-size: 0.9rem;
}
.related__more svg { width: 15px; height: 15px; transition: transform .18s ease; }
.related:hover .related__more svg { transform: translateX(4px); }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { margin-top: auto; border-top: 1px solid var(--line); }
.site-footer__inner { padding: 2.2rem 0; text-align: center; color: var(--low); font-size: 0.85rem; }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.9rem; margin-bottom: 0.9rem; }
.site-footer__links a { color: var(--mid); }
.site-footer__links a:hover { color: var(--hi); text-decoration: none; }

/* =========================================================================
   Page-load reveal (subtle, single orchestrated stagger)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(8px); animation: reveal .5s cubic-bezier(.22,.61,.36,1) forwards; }
  .reveal:nth-child(1){ animation-delay: .02s; }
  .reveal:nth-child(2){ animation-delay: .08s; }
  .reveal:nth-child(3){ animation-delay: .14s; }
  .reveal:nth-child(4){ animation-delay: .20s; }
  @keyframes reveal { to { opacity: 1; transform: none; } }
}

/* =========================================================================
   Safety net — the accent button keeps its ink in ANY context (prose, toc,
   banner, header). Placed last so equal-specificity container rules can't
   override the button text colour. Dark theme → dark ink; light → white.
   ========================================================================= */
a.btn-accent,
a.btn-accent:hover,
a.btn-accent:focus {
  color: var(--accent-ink);
  text-decoration: none;
  display: inline-block;
  border-left: 0;
}