:root {
  --text: #1f2328;
  --muted: #656d76;
  --link: #0b62d0;
  --line: #e3e6ea;
  --bg: #fff;
  --max: 720px;
}

@media (prefers-color-scheme: dark) {
  :root { --text: #e6e8eb; --muted: #9ba2ab; --link: #6ea8fe; --line: #2a2f36; --bg: #14171a; }
}

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

body {
  margin: 0;
  font: 17px/1.7 Georgia, "Iowan Old Style", "Times New Roman", serif;
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }

main { max-width: var(--max); margin: 0 auto; padding: 1rem 1.25rem 4rem; }

/* --- Header --- */
.site-header {
  max-width: var(--max); margin: 0 auto; padding: 1.5rem 1.25rem 1rem;
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: system-ui, sans-serif; font-weight: 700; font-size: 1.3rem;
  color: var(--text); text-decoration: none;
}
.tagline { color: var(--muted); font-size: .95rem; margin: .35rem 0 0; }
.cats { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; font-family: system-ui, sans-serif; }
.cats a {
  font-size: .82rem; padding: .25rem .65rem; border: 1px solid var(--line);
  border-radius: 99px; text-decoration: none; color: var(--muted);
}
.cats a:hover, .cats a.active { border-color: var(--link); color: var(--link); }

/* --- Typography --- */
h1 { font-size: 2rem; line-height: 1.25; margin: 1.5rem 0 .5rem; }
h2 { font-size: 1.4rem; line-height: 1.3; margin: 2rem 0 .6rem; }
h3 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; }
p, ul, ol, blockquote { margin: 0 0 1.1rem; }
ul, ol { padding-left: 1.4rem; }
li { margin-bottom: .4rem; }
blockquote {
  border-left: 3px solid var(--line); margin-left: 0; padding-left: 1rem;
  color: var(--muted); font-style: italic;
}
img { max-width: 100%; height: auto; }
code { font-family: ui-monospace, monospace; font-size: .88em; background: rgba(127,127,127,.12); padding: .1em .35em; border-radius: 3px; }
pre { overflow-x: auto; background: rgba(127,127,127,.1); padding: 1rem; border-radius: 6px; }
pre code { background: none; padding: 0; }
table { width: 100%; border-collapse: collapse; margin-bottom: 1.2rem; font-size: .95rem; }
th, td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; }

.meta { font-family: system-ui, sans-serif; font-size: .85rem; color: var(--muted); }

/* --- List & post --- */
.breadcrumb { font-family: system-ui, sans-serif; font-size: .82rem; color: var(--muted); margin: 1rem 0 0; }
.breadcrumb a { color: var(--muted); }

.teaser { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.teaser h2 { margin: 0 0 .3rem; font-size: 1.3rem; }
.teaser h2 a { color: var(--text); text-decoration: none; }
.teaser h2 a:hover { color: var(--link); }
.teaser p:last-child { margin-bottom: 0; color: var(--muted); font-size: .95rem; }

.post { margin-top: .5rem; }
.post > .meta { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }

.tags { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.tag {
  font-family: system-ui, sans-serif; font-size: .78rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 99px; padding: .2rem .6rem;
}

.related { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.related h2 { font-size: 1.1rem; margin-top: 0; }
.related ul { list-style: none; padding: 0; }

.pagination {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-family: system-ui, sans-serif; font-size: .9rem; margin-top: 2rem;
}
.pagination span { color: var(--muted); }

.site-footer {
  max-width: var(--max); margin: 0 auto; padding: 1.5rem 1.25rem 3rem;
  border-top: 1px solid var(--line); color: var(--muted);
  font-family: system-ui, sans-serif; font-size: .85rem;
}

.theme-selector { display: flex; gap: .5rem; margin-top: .8rem; }
.theme-selector a {
  font-size: .75rem; padding: .2rem .5rem; border: 1px solid var(--line);
  border-radius: 20px; text-decoration: none; color: var(--muted);
  transition: all .2s;
}
.theme-selector a:hover, .theme-selector a.active { border-color: var(--link); color: var(--link); }

/* --- Ad containers --- */
.ad-container {
  max-width: var(--max);
  margin: 0 auto 1.5rem;
  padding: 0 1.25rem;
  text-align: center;
  clear: both;
}
.ad-container:last-child { margin-bottom: 0; }
.ad-body-top { margin-top: 1rem; }
.ad-body-bottom { margin-top: 2rem; }
.ad-footer { margin-top: 1rem; }

/* Force center - works for inline-block, block, iframe, ins */
.ad-container > * {
  display: inline-block !important;
  max-width: 100%;
}
.ad-container {
  text-align: center !important;
}

/* Google AdSense specific */
.ad-container ins.adsbygoogle,
.ad-container ins[data-ad-client],
.ad-container .adsbygoogle,
.ad-container iframe[src*="googleads"],
.ad-container iframe[src*="googlesyndication"],
.ad-container iframe[id^="aswift_"],
.ad-container iframe[id^="google_ads_iframe"] {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100%;
}

/* Adsterra/HPF - hide config object and placeholder until iframe loads */
.ad-container script {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}
.ad-container .ad-slot { display: none !important; }
.ad-container .ad-hpf { display: none !important; }

/* Show iframe when loaded */
.ad-container iframe { display: block !important; margin: 0 auto !important; }

@media (max-width: 480px) {
  body { font-size: 16px; }
  h1 { font-size: 1.6rem; }
}
/* --- Sidebar Fallback --- */
.page-grid { max-width: var(--max); margin: 0 auto; }
.sidebar { margin-top: 3rem; }
.sidebar-widget { border: 1px solid var(--line); padding: 1rem; border-radius: 4px; }
.sidebar-widget h3 { margin-top: 0; font-size: 1.1em; }
.sidebar-widget ul { list-style: none; padding: 0; margin: 0; }
.sidebar-widget li { padding: 0.35rem 0; }


/* --- Table of Contents --- */
.toc {
  position: relative;
  background: color-mix(in srgb, var(--link) 5%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--link) 30%, var(--line));
  border-left: 4px solid var(--link);
  border-radius: 6px;
  padding: 1.1rem 1.4rem 1.1rem 1.2rem;
  margin: 0 0 2.2rem;
  font-family: system-ui, sans-serif;
  font-size: .9rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark) {
  .toc {
    background: color-mix(in srgb, var(--link) 8%, var(--bg));
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
  }
}
.toc-title {
  font-weight: 700;
  margin: 0 0 .75rem;
  font-size: .95rem;
  color: var(--link);
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.toc-title::before {
  content: '☰';
  font-size: .85em;
  opacity: .7;
}
.toc-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: toc-h2;
}
.toc-list > li {
  margin-bottom: .5rem;
  line-height: 1.45;
  counter-increment: toc-h2;
  position: relative;
  padding-left: 1.8em;
}
.toc-list > li::before {
  content: counter(toc-h2) ".";
  position: absolute;
  left: 0;
  color: var(--link);
  font-weight: 700;
  font-size: .85em;
  min-width: 1.5em;
}
.toc-sub {
  margin: .4rem 0 .15rem;
  padding-left: 0;
  list-style: none;
  counter-reset: toc-h3;
}
.toc-sub li {
  margin-bottom: .3rem;
  counter-increment: toc-h3;
  position: relative;
  padding-left: 2.4em;
}
.toc-sub li::before {
  content: counter(toc-h2) "." counter(toc-h3);
  position: absolute;
  left: 0;
  color: color-mix(in srgb, var(--link) 70%, var(--muted));
  font-weight: 600;
  font-size: .8em;
  min-width: 2.2em;
}
.toc a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s, color .15s;
}
.toc a:hover {
  border-bottom-color: var(--link);
  color: color-mix(in srgb, var(--link) 80%, var(--text));
}
@media (max-width: 480px) {
  .toc { font-size: .85rem; padding: .9rem 1rem .9rem .9rem; }
  .toc-list > li { padding-left: 1.5em; }
  .toc-sub li { padding-left: 2em; }
}



.sidebar .ad-container { padding: 0 !important; }

/* Fix sidebar ad cutoff */
.sidebar .ad-container, .ad-body-bottom { padding: 0 !important; }