@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-cyr.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-punct.woff2") format("woff2");
  unicode-range: U+00??, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-mono-cyr.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-mono-punct.woff2") format("woff2");
  unicode-range: U+00??, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Legionarius overrides for Casper */
:root {
  --leg-bg: #0b0f12;
  --leg-fg: #e7e2d8;
  --leg-surface: #10171b;
  --leg-surface-2: #0f1418;
  --leg-border: #253039;
  --leg-muted: #a8b0a8;
  --leg-gold: #b48a2a;
  --leg-red: #a32626;
  --leg-button-bg: #5f1414;

  --color-darkmode: var(--leg-bg);
  --color-secondary-text: var(--leg-muted);
  --color-border: var(--leg-border);
  --ghost-accent-color: var(--leg-red);

  --font-serif: "Cormorant Garamond", Georgia, Times, serif;
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

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

/* Prevent sideways scroll */
html, body { max-width: 100%; overflow-x: hidden; }

/* Headings */
.gh-head-logo,
.site-title,
.post-card-title,
.article-title,
.gh-content h1,
.gh-content h2,
.gh-content h3 {
  font-family: var(--font-serif);
}

/* Header (all templates) */
html.dark-mode .gh-head {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--leg-surface) 60%, transparent),
    color-mix(in srgb, var(--leg-surface) 80%, transparent)
  );
  border-bottom: 1px solid var(--leg-border);
  color: var(--leg-fg);
  position: relative;
}

.gh-head-menu .nav a,
.gh-head-logo,
.gh-head-link {
  color: var(--leg-gold) !important;
}

.gh-head-menu .nav a:hover,
.gh-head-logo:hover,
.gh-head-link:hover {
  color: var(--leg-fg) !important;
}

.gh-head-menu .nav .nav-current > a {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Subscribe buttons (header + footer) */
html.dark-mode .gh-head .gh-head-button,
html.dark-mode .gh-head-button,
html.dark-mode .has-cover .gh-head-button,
html.dark-mode .gh-head-members .gh-head-button {
  background: var(--leg-button-bg) !important;
  color: #f5f1ea !important;
  border: 1px solid color-mix(in srgb, var(--leg-gold) 85%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, #000 40%, transparent) inset;
}

html.dark-mode .gh-head .gh-head-button:hover,
html.dark-mode .gh-head-button:hover {
  background: color-mix(in srgb, var(--leg-button-bg) 85%, #000) !important;
}

html.dark-mode .footer-cta-button span {
  background: var(--leg-button-bg) !important;
  color: #f5f1ea !important;
  border: 1px solid color-mix(in srgb, var(--leg-gold) 85%, transparent) !important;
}

/* IMPORTANT: Mobile hamburger open state uses body.gh-head-open */
html.dark-mode body.gh-head-open,
html.dark-mode body.gh-head-open #gh-head,
html.dark-mode body.gh-head-open #gh-head .gh-head-actions,
html.dark-mode body.gh-head-open.has-cover #gh-head,
html.dark-mode body.gh-head-open.has-cover #gh-head .gh-head-actions {
  background: var(--leg-bg) !important;
  color: var(--leg-fg) !important;
}

html.dark-mode body.gh-head-open #gh-head .gh-head-actions {
  border-top: 1px solid var(--leg-border) !important;
}

html.dark-mode body.gh-head-open #gh-head .nav a { color: var(--leg-gold) !important; }
html.dark-mode body.gh-head-open #gh-head .nav a:hover { color: var(--leg-fg) !important; }

html.dark-mode body.gh-head-open #gh-head .gh-head-button {
  background: var(--leg-button-bg) !important;
  color: #f5f1ea !important;
  border: 1px solid color-mix(in srgb, var(--leg-gold) 85%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, #000 40%, transparent) inset !important;
}

/* Burger icon bars */
html.dark-mode .gh-burger::before,
html.dark-mode .gh-burger::after {
  background-color: var(--leg-gold) !important;
}

/* Homepage hero: cover image then title below */
html.dark-mode .site-header-cover {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: clamp(240px, 40vw, 420px);
  object-fit: cover;
  opacity: 0.92;
  border-bottom: 1px solid var(--leg-border);
}

html.dark-mode .site-header-content {
  padding-top: max(4vmin, 24px);
  padding-bottom: max(4vmin, 24px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

html.dark-mode .has-cover .site-header-content {
  min-height: unset;
  background-color: transparent;
}

html.dark-mode .site-header-inner {
  width: 100%;
  text-align: center;
  padding: max(3vmin, 18px) 0 0;
}

/* Post feed cards */
html.dark-mode .post-card {
  background: var(--leg-surface);
  border: 1px solid var(--leg-border);
  border-radius: 16px;
  padding: 18px;
  overflow: hidden;
}

html.dark-mode .post-card-image-link {
  border-radius: 12px;
  margin: -18px -18px 16px;
}

html.dark-mode .post-card-image { border-radius: 12px; }
html.dark-mode .post-card-content-link,
html.dark-mode .post-card-title { color: var(--leg-fg); }
html.dark-mode .post-card-excerpt,
html.dark-mode .post-card-meta,
html.dark-mode .post-card-tags { color: var(--leg-muted); }

@media (max-width: 767px) {
  html.dark-mode .post-card { padding: 16px; }
  html.dark-mode .post-card-image-link { margin: -16px -16px 14px; }
}

/* Content long blocks */
.gh-content, .article { max-width: 100%; }
.gh-content pre { max-width: 100%; overflow-x: auto; }
.gh-content table { max-width: 100%; display: block; overflow-x: auto; }

/* Footer */
html.dark-mode .site-footer {
  margin-top: max(12vmin, 64px);
  padding-top: 28px;
  padding-bottom: 28px !important;
  border-top: 1px solid var(--leg-border);
  background: linear-gradient(to top, color-mix(in srgb, var(--leg-red) 20%, transparent), transparent);
}

html.dark-mode .site-footer,
html.dark-mode .site-footer .copyright,
html.dark-mode .site-footer .copyright a,
html.dark-mode .site-footer a {
  color: var(--leg-gold);
}

html.dark-mode .site-footer a:hover { color: var(--leg-fg); }

/* --- Homepage header should NOT overlay cover image --- */
html.dark-mode body.home-template.has-cover #gh-head.gh-head,
html.dark-mode body.home-template.has-cover .gh-head {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--leg-red) 15%, transparent),
    color-mix(in srgb, var(--leg-surface) 80%, transparent)
  ) !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  border-bottom: 1px solid var(--leg-border) !important;
}

/* Home hero heading colors */
html.dark-mode .site-title {
  color: var(--leg-gold) !important;
}

html.dark-mode .site-description:first-child,
html.dark-mode :is(.site-logo, .site-title) + .site-description {
  color: var(--leg-fg) !important;
}