:root {
  --xf-panel-bg: rgba(255, 255, 255, .96);
  --xf-panel-border: #d9e0e8;
  --xf-panel-text: #243047;
  --xf-panel-muted: #687386;
  --xf-panel-accent: #2463a7;
  --xf-panel-shadow: 0 12px 32px rgba(38, 52, 74, .13);
}

/* The pinned WordPress pages are the site's primary navigation. */
.xf-primary-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem 1rem;
  margin: 0 auto 1rem;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--xf-panel-border);
}
.xf-primary-nav a {
  margin: 0;
  color: var(--xf-panel-text);
  font-weight: 650;
  text-decoration: none;
}
.xf-primary-nav a:hover,
.xf-primary-nav a:focus-visible,
.xf-primary-nav a.selected { color: var(--xf-panel-accent); }

/* Keep each home-page article title visible while its article is in view. */
body#collection #wrapper > article > h2.post-title {
  position: sticky;
  z-index: 8;
  top: 0;
  margin-left: -.7rem;
  margin-right: -.7rem;
  padding: .55rem .7rem;
  background: var(--xf-panel-bg);
  border-bottom: 1px solid var(--xf-panel-border);
  box-shadow: 0 4px 10px rgba(38, 52, 74, .06);
}

/* Give consecutive home-page articles a clear visual break. */
body#collection #wrapper > article + article {
  position: relative;
  margin-top: 3.25rem;
  padding-top: 2rem;
  border-top: 0;
}

body#collection #wrapper > article + article::before {
  content: "";
  position: absolute;
  top: -1.75rem;
  right: 0;
  left: 0;
  height: .5rem;
  border: 1px solid var(--xf-panel-border);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(36, 99, 167, .18), transparent);
}

/* Preserve the meaningful typography from the WordPress source without
   carrying inline style attributes into the migrated Markdown. */
.e-content .md-red,
.e-content .md-red a { color: #f00; }
.e-content .md-muted,
.e-content .md-muted a { color: #999; }
.e-content .md-faded,
.e-content .md-faded a { color: #dbdbdb; }
.e-content sub {
  color: #999;
  font-size: .65em;
}
.e-content .md-hero { font-size: 2.5em; }

.xf-desktop-tools,
.xf-mobile-tools {
  color: var(--xf-panel-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.xf-desktop-tools {
  position: fixed;
  z-index: 20;
  top: 5.5rem;
  right: clamp(1rem, 3vw, 3rem);
  width: 14.5rem;
  max-height: calc(100vh - 7rem);
  overflow: auto;
  padding: .95rem;
  border: 1px solid var(--xf-panel-border);
  border-radius: 14px;
  background: var(--xf-panel-bg);
  box-shadow: var(--xf-panel-shadow);
}

.xf-tool-section + .xf-tool-section {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--xf-panel-border);
}

.xf-tool-heading {
  margin: 0 0 .55rem;
  font-size: .92rem;
  font-weight: 700;
}

.xf-translate-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  margin-top: .5rem;
}

.xf-language,
.xf-translate-button {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.15rem;
  border: 1px solid var(--xf-panel-border);
  border-radius: 8px;
  background: #fff;
  color: var(--xf-panel-text);
  font: inherit;
}

.xf-language { padding: .35rem .45rem; }
.xf-translate-button {
  cursor: pointer;
  padding: .35rem .5rem;
  font-weight: 650;
}
.xf-translate-button:hover,
.xf-translate-button:focus-visible {
  border-color: var(--xf-panel-accent);
  color: var(--xf-panel-accent);
}

.xf-tool-note {
  margin: .45rem 0 0;
  color: var(--xf-panel-muted);
  font-size: .72rem;
  line-height: 1.45;
}

.xf-recent-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.xf-recent-list li + li { margin-top: .55rem; }
.xf-recent-list a {
  display: block;
  color: var(--xf-panel-text);
  font-size: .84rem;
  line-height: 1.35;
  text-decoration: none;
}
.xf-recent-list a:hover,
.xf-recent-list a:focus-visible { color: var(--xf-panel-accent); }
.xf-recent-date {
  display: block;
  margin-top: .1rem;
  color: var(--xf-panel-muted);
  font-size: .7rem;
}
.xf-all-posts {
  display: inline-block;
  margin-top: .75rem;
  color: var(--xf-panel-accent);
  font-size: .8rem;
}

.xf-mobile-tools { display: none; }

@media (max-width: 1099px) {
  body#collection #wrapper > article + article {
    margin-top: 2.4rem;
    padding-top: 1.45rem;
  }

  body#collection #wrapper > article + article::before {
    top: -1.3rem;
    height: .4rem;
  }

  .xf-desktop-tools { display: none; }
  .xf-mobile-tools {
    display: flex;
    position: relative;
    z-index: 21;
    align-items: center;
    gap: .45rem;
    width: min(100% - 1.5rem, 48rem);
    margin: .5rem auto .9rem;
    padding: .55rem .65rem;
    box-sizing: border-box;
    border: 1px solid var(--xf-panel-border);
    border-radius: 11px;
    background: var(--xf-panel-bg);
    box-shadow: 0 5px 18px rgba(38, 52, 74, .09);
  }
  .xf-mobile-tools .xf-language {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .xf-mobile-tools .xf-translate-button {
    flex: 0 0 auto;
    width: auto;
  }
  .xf-mobile-menu { position: relative; flex: 0 0 auto; }
  .xf-mobile-menu summary {
    cursor: pointer;
    padding: .4rem .5rem;
    border: 1px solid var(--xf-panel-border);
    border-radius: 8px;
    list-style: none;
    font-weight: 700;
  }
  .xf-mobile-menu summary::-webkit-details-marker { display: none; }
  .xf-mobile-menu nav {
    position: absolute;
    right: 0;
    top: calc(100% + .45rem);
    width: 10rem;
    padding: .35rem;
    border: 1px solid var(--xf-panel-border);
    border-radius: 9px;
    background: #fff;
    box-shadow: var(--xf-panel-shadow);
  }
  .xf-mobile-menu nav a {
    display: block;
    padding: .55rem .65rem;
    border-radius: 6px;
    color: var(--xf-panel-text);
    text-decoration: none;
  }
  .xf-mobile-menu nav a:hover,
  .xf-mobile-menu nav a:focus-visible { background: #eef4fa; }
}

@media (max-width: 460px) {
  .xf-mobile-tools { flex-wrap: wrap; }
  .xf-mobile-tools .xf-language { flex-basis: calc(100% - 3.4rem); }
  .xf-mobile-menu { order: 2; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --xf-panel-bg: rgba(28, 34, 44, .96);
    --xf-panel-border: #455166;
    --xf-panel-text: #edf2fa;
    --xf-panel-muted: #aab4c4;
    --xf-panel-accent: #87bfff;
    --xf-panel-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  }
  .xf-language,
  .xf-translate-button,
  .xf-mobile-menu nav { background: #222a36; color: var(--xf-panel-text); }
  .xf-mobile-menu nav a:hover,
  .xf-mobile-menu nav a:focus-visible { background: #303b4b; }
  .e-content .md-red,
  .e-content .md-red a { color: #ff8a80; }
  .e-content .md-muted,
  .e-content .md-muted a { color: #b5bdc9; }
  .e-content .md-faded,
  .e-content .md-faded a { color: #c7cfda; }
}

article img[src$="/down-icon.jpg"] {
  width: 3rem;
  height: 3rem;
  max-width: 3rem;
  object-fit: contain;
  vertical-align: middle;
}