.page-header { color: #fff; text-align: center; background-color: #159957; background-image: linear-gradient(120deg, #155799, #159957); }
@media screen and (min-width: 64em) { .page-header { padding: 5rem 6rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .page-header { padding: 3rem 4rem; } }
@media screen and (max-width: 42em) { .page-header { padding: 2rem 1rem; } }

.project-name { margin-top: 0; margin-bottom: 0.1rem; }
@media screen and (min-width: 64em) { .project-name { font-size: 3.25rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .project-name { font-size: 2.25rem; } }
@media screen and (max-width: 42em) { .project-name { font-size: 1.75rem; } }

.project-tagline { margin-bottom: 2rem; font-weight: normal; opacity: 0.7; }
@media screen and (min-width: 64em) { .project-tagline { font-size: 1.25rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .project-tagline { font-size: 1.15rem; } }
@media screen and (max-width: 42em) { .project-tagline { font-size: 1rem; } }

.btn { display: inline-block; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); border-style: solid; border-width: 1px; border-radius: 0.3rem; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.btn:hover { color: rgba(255, 255, 255, 0.8); text-decoration: none; background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); }
.btn + .btn { margin-left: 1rem; }
@media screen and (min-width: 64em) { .btn { padding: 0.75rem 1rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .btn { padding: 0.6rem 0.9rem; font-size: 0.9rem; } }
@media screen and (max-width: 42em) { .btn { display: block; width: 100%; padding: 0.75rem; font-size: 0.9rem; }
  .btn + .btn { margin-top: 1rem; margin-left: 0; } }

/* ── Dark Mode ─────────────────────────────────────────────── */
html.dark-mode {
  --dm-bg:           #1e1e2e;
  --dm-text:         #cdd6f4;
  --dm-brand:        #89b4fa;
  --dm-grey:         #a6adc8;
  --dm-grey-light:   #45475a;
  --dm-grey-dark:    #cdd6f4;
  --dm-code-bg:      #313244;
  --dm-header-bg:    #181825;
}

html.dark-mode body {
  background-color: var(--dm-bg);
  color: var(--dm-text);
}

html.dark-mode a { color: var(--dm-brand); }
html.dark-mode a:visited { color: #74c7ec; }
html.dark-mode a:hover { color: var(--dm-text); }

html.dark-mode .site-header {
  border-top-color: var(--dm-grey-dark);
  border-bottom-color: var(--dm-grey-light);
  background-color: var(--dm-header-bg);
}

html.dark-mode .site-title,
html.dark-mode .site-title:visited { color: var(--dm-grey-dark); }

html.dark-mode .site-nav {
  background-color: var(--dm-header-bg);
  border-color: var(--dm-grey-light);
}

html.dark-mode .site-nav .page-link { color: var(--dm-text); }

html.dark-mode .site-nav .menu-icon > svg { fill: var(--dm-grey-dark); }

html.dark-mode .site-footer {
  border-top-color: var(--dm-grey-light);
}

html.dark-mode .footer-col-wrapper { color: var(--dm-grey); }

html.dark-mode blockquote {
  color: var(--dm-grey);
  border-left-color: var(--dm-grey-light);
}

html.dark-mode pre,
html.dark-mode code {
  background-color: var(--dm-code-bg);
  border-color: var(--dm-grey-light);
  color: var(--dm-text);
}

html.dark-mode .post-meta { color: var(--dm-grey); }

html.dark-mode table { color: var(--dm-text); }
html.dark-mode table th { border-color: var(--dm-grey-light); background-color: var(--dm-code-bg); }
html.dark-mode table td { border-color: var(--dm-grey-light); }

html.dark-mode hr { border-color: var(--dm-grey-light); }

/* Toggle button */
.theme-toggle {
  background: none;
  border: 1px solid #828282;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 4px 8px;
  float: right;
  margin-top: 12px;
  color: inherit;
  transition: border-color 0.2s;
}

.theme-toggle:hover { border-color: #111; }
html.dark-mode .theme-toggle { border-color: #a6adc8; }
html.dark-mode .theme-toggle:hover { border-color: #cdd6f4; }