/* 1. THEME VARIABLES */
:root {
  --pico-background-color: #232425;
  --pico-color: #a9a9b3;
  --pico-h1-color: #ffffff;
  --pico-h2-color: #ffffff;

  /* Accent (lilac). Pico builds the accent from the whole --pico-primary-*
     family, not just --pico-primary. Any one left unset falls back to Pico's
     stock blue, so all of them are listed here. */
  --pico-primary: #bd93f9;
  --pico-primary-hover: #d7bbff;
  --pico-primary-underline: rgba(189, 147, 249, 0.5);
  --pico-primary-hover-underline: var(--pico-primary-hover);
  --pico-primary-focus: rgba(189, 147, 249, 0.375);
  --pico-primary-inverse: #ffffff;
  --pico-primary-background: #924fc2;
  --pico-primary-hover-background: #895bde;
  --pico-primary-border: var(--pico-primary-background);
  --pico-primary-hover-border: var(--pico-primary-hover-background);

  --pico-font-family-base: system-ui, sans-serif; /* Shrunk font stack */
}

/* 2. LAYOUT (Sticky Footer & Centering) */
body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; }
main { flex-grow: 1; padding: 0; }
main.centered { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

/* 3. COMPONENT OVERRIDES */
/* Strips Pico's default card background from all articles globally */
article { background: none; box-shadow: none; padding: 0; margin-bottom: 2.5rem; }
/* Removes underlines from article titles and inherits the heading color */
article h2 a { text-decoration: none; color: inherit; }
article h2 a:hover { color: var(--pico-primary); }
article h3 a { text-decoration: none; color: inherit; }
article h3 a:hover { color: var(--pico-primary); }

/* The classless Pico build ships no .outline, so the class already on the
   paper links does nothing and they render as solid buttons. Restore it. */
[role="button"].outline {
  --pico-background-color: transparent;
  --pico-color: var(--pico-primary);
  --pico-border-color: var(--pico-primary);
}
[role="button"].outline:is(:hover, :active, :focus) {
  --pico-background-color: transparent;
  --pico-color: var(--pico-primary-hover);
  --pico-border-color: var(--pico-primary-hover);
}

/* Navigation tweaks */
header { display: flex; justify-content: space-between; align-items: center; padding: 2.5rem 0 1rem 0; }
nav a { text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.05em; font-weight: 500; }
nav a:hover, nav a.active { color: var(--pico-primary); }

/* 4. TERMINAL LOGO */
.logo { font-family: monospace; font-size: 1.4rem; color: #fff; text-decoration: none; font-weight: bold; }
.logo .prompt { 
  color: var(--pico-primary); 
  margin-right: 0px;
}
.static-cursor { 
  display: inline-block; 
  width: 10px; 
  height: 1.1rem;
  background-color: var(--pico-primary); 
  margin-left: 6px;
  vertical-align: baseline; 
  transform: translateY(1px);
}

/* 5. TYPOGRAPHY & UTILITIES */
.title { font-size: 3rem; margin-bottom: 0.2rem; }
.date { color: var(--pico-primary); font-family: monospace; margin-bottom: 0.2rem; display: block; }
.text-constrained { max-width: 600px; }

/* One generic class replaces post-meta, post-desc, post-abstract, etc. */
.dimmed { color: var(--pico-color); font-size: 0.95rem; margin-bottom: 0.5rem; }

/* Social Icons */
.social-links { display: flex; gap: 1.5rem; justify-content: center; }
.social-links a { color: var(--pico-color); transition: transform 0.2s; display: inline-block; }
.social-links a:hover { color: var(--pico-primary); transform: translateY(-2px); }

/* 6. BLOG HEADER & FOOTER */
.article-header { border-bottom: 1px solid #3b3d42; margin-bottom: 2.5rem; padding-bottom: 1.5rem; display: block; }
footer { border-top: 1px solid #3b3d42; text-align: center; font-size: 0.9rem; padding: 2rem 0; width: 100%; }
footer p { margin: 0; }