:root{
  --accent:#0b6fa0;
  --muted:#6b6b6b;
  --bg:#fafafa;
  --card:#ffffff;
  --nav-bg: rgba(255,255,255,0.97);
  --text:#111;
  --maxwidth:1100px;
  --nav-height:56px;
  --gap:18px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

html,body{height:100%;margin:0;background:var(--bg);color:#111}
body{line-height:1.5;padding:0 12px;font-size:16px}
.container{max-width:var(--maxwidth);margin:0 auto;padding:24px}

/* Entries wrapper to keep cards aligned */
.entries{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  align-items:stretch; /* make cards same width */
}

/* Theme toggle */
#theme-toggle{background:transparent;border:none;font-size:1.1rem;padding:6px 8px;border-radius:6px;cursor:pointer}
#theme-toggle:focus{outline:2px solid var(--accent)}

/* Header */
header.site-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0}
header h1{margin:0;font-size:1.75rem}
header .byline{color:var(--muted);font-size:0.95rem}

/* Nav */
nav[aria-label="Jump to letter"]{
  position:sticky;top:0; /* sits in flow below intro, then sticks to top */
  background:var(--nav-bg);
  z-index:90;box-shadow:0 2px 6px rgba(0,0,0,0.06);
}

/* When JS detects the nav is stuck, apply fixed styling as a robust fallback */
nav[aria-label="Jump to letter"].stuck{
  position:fixed;top:0;left:0;right:0;z-index:110;
}
/* center nav content within the page max width */
nav[aria-label="Jump to letter"] .container{
  display:flex;gap:6px;flex-wrap:nowrap;align-items:center;justify-content:flex-start;
  /* make the nav wider so letters fit on one line */
  max-width:1400px;margin:0 auto;padding:8px 12px;width:100%;
  overflow:visible;
}
nav[aria-label="Jump to letter"] a{
  display:inline-block;padding:4px 6px;border-radius:6px;background:transparent;
  color:var(--accent);text-decoration:none;font-weight:600;font-size:0.92rem;
}
nav[aria-label="Jump to letter"] a.active,
nav[aria-label="Jump to letter"] a:hover{background:var(--accent);color:#fff}

/* Layout & entries */
.letter-header{margin-top:20px;margin-bottom:8px;font-size:1.1rem;color:var(--text);border-bottom:2px solid #f0f0f0;padding-bottom:6px}
.entry{background:var(--card);padding:14px;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,0.04);margin:0;box-sizing:border-box}
.entry{display:block;width:100%}
.entry h3{margin:0 0 6px 0;font-size:1rem;color:var(--text)}
.entry h6{margin:0;color:var(--muted);font-size:0.85rem}
.entry h5{margin:8px 0 0 0;color:var(--text)}

/* Responsive */
@media (min-width:700px){
  /* Add a subtle side padding on wider screens */
  .container{max-width:var(--maxwidth);margin:0 auto;padding:28px}
  .entry{padding:18px}
}

@media (min-width:980px){
  .container{max-width:var(--maxwidth);margin:0 auto;padding:24px}
}

/* Smooth scroll */
html {scroll-behavior: smooth;}

/* Dark theme */
html[data-theme="dark"]{
  --bg:#0f1720;
  --card:#0b1220;
  --text:#e6eef6;
  --accent:#4fb3ff;
  --nav-bg: rgba(8,12,18,0.92);
}
html[data-theme="dark"] body{background:var(--bg);color:var(--text)}
html[data-theme="dark"] .entry{background:var(--card);box-shadow:none}