/* Writing readability override — scoped to post article + Writing list only.
   Theme root is 10px (html{font-size:62.5%}), so sizes are px, not rem.
   Header, footer chrome, and the post sidebar are not targeted.
   Gelasio is named first; it is not bundled (no webfont files added).
   Fallback is Georgia, serif. */

:root {
  --wr-body: #1F1F1F;
  --wr-head: #111111;
  --wr-link: #0B5C2E;
  --wr-link-h: #08401F;
  --wr-meta: #595959;
  --wr-ex: #333333;
}

#content article,
.wr-main {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--wr-body);
}

#content article {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

#content article .entry-content p,
#content article .entry-content li {
  font: inherit;
  line-height: inherit;
  color: var(--wr-body);
}

#content article .entry-content p {
  margin: 0 0 1.1em;
}

#content article h1,
#content article h2,
#content article h3,
#content article h4,
.wr-main h1,
.wr-main h2,
.wr-main h3 {
  font-family: Gelasio, Georgia, serif;
  color: var(--wr-head);
}

#content article h1,
.wr-main .wr-head h1 {
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: normal;
}

#content article .entry-content h2 {
  font-size: 25.6px;
  line-height: 1.3;
  margin: 2em 0 0.6em;
  font-weight: 700;
}

#content article .entry-content h3 {
  font-size: 20px;
  line-height: 1.35;
  margin: 1.6em 0 0.5em;
  font-weight: 700;
}

#content article .meta,
#content article .meta li,
#content article .meta a,
.wr-main .wr-date,
.wr-main .wr-sub,
.wr-main .wr-tag,
.wr-main .wr-aside-note {
  font-size: 14px;
  color: var(--wr-meta);
}

#content article .entry-content a,
.wr-main .wr-excerpt a {
  color: var(--wr-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

#content article .entry-content a:hover,
.wr-main .wr-excerpt a:hover,
#content article .meta a:hover {
  color: var(--wr-link-h);
  text-decoration-thickness: 2px;
}

#content article pre,
#content article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.5;
  color: #1F1F1F;
  background: #F3F3F1;
  border: 1px solid #E2E2DE;
}

#content article pre {
  overflow-x: auto;
  padding: 1em;
  max-width: 100%;
}

#content article pre code {
  border: 0;
  padding: 0;
}

#content article code {
  padding: 0.1em 0.3em;
}

#content article blockquote {
  border-left: 3px solid #D0D0CB;
  color: #333333;
  margin: 1.5em 0;
  padding: 0 0 0 1em;
}

#content article img,
#content article figure,
#content article .thumbnail,
#content article .related-post,
#content article .oceanwp-row {
  max-width: 100%;
  height: auto;
}

.wr-main .wr-row h3,
.wr-main .wr-row h3 a {
  font-family: Gelasio, Georgia, serif;
  font-size: 21.6px;
  line-height: 1.3;
  color: var(--wr-head);
  text-decoration: none;
}

.wr-main .wr-row h3 a:hover {
  color: var(--wr-link-h);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.wr-main .wr-excerpt {
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--wr-ex);
}

@media (max-width: 390px) {
  #content article,
  .wr-main {
    font-size: 17px;
    line-height: 1.6;
  }
}

.wr-main .wr-head h1 {
  font-family: Gelasio, Georgia, serif;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.2;
  font-weight: 700;
  color: #111111;
  letter-spacing: normal;
}

/* Prev/next + related: beat OceanWP #00D646 text (1.96:1).
   Real markup uses #related-posts and .related-post-title, not .related-posts. */
#content article .post-navigation .title,
#content article .post-navigation .nav-links .title,
#content article .post-navigation a,
#content article .post-pagination .title,
#content article .related-posts a,
#content article #related-posts a,
#content article .related-post-title a {
  color: #0B5C2E;
}

#content article .related-posts time,
#content article #related-posts time,
#content article .related-post time {
  color: #595959;
}