/* =========================
   THEME VARIABLES
   ========================= */
:root{
  --brand: #d4af37;      /* gold */
  --bg:    #0b0d10;      /* page background */
  --panel: #0f1318;      /* darker panel */
  --card:  #121821;      /* card background */
  --text:  #e6e6e6;      /* primary text */
  --muted: #9aa3ad;      /* secondary text */
  --border:#222a33;      /* subtle borders */
}
/* Base */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  line-height:1.6
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:960px;margin:0 auto;padding:24px}
/* Nav */
.nav{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:24px}
.nav a.logo{font-weight:800;letter-spacing:.5px}
.nav .links a{padding:8px 10px;border-radius:12px}
.nav .links a:hover{background:var(--card)}
.nav .links a.active{ border-bottom:2px solid var(--brand) }
/* Sections */
.hero{background:linear-gradient(180deg, rgba(212,175,55,0.12), transparent); border:1px solid var(--border); border-radius:16px; padding:28px; margin:24px 0}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; margin:16px 0}
footer{margin-top:40px;border-top:1px solid var(--border);padding-top:20px;color:var(--muted);font-size:.9rem}
/* Type */
h1,h2,h3{line-height:1.25}
.post-meta{color:var(--muted);font-size:.9rem;margin-bottom:8px}
ul.post-list{list-style:none;padding:0;margin:0}
ul.post-list li{padding:12px 0;border-bottom:1px dashed var(--border)}
ul.post-list .post-meta{ margin-left:2px; color:var(--muted); font-size:.9rem }
/* Code blocks */
pre,code{background:#0a0e13;border:1px solid var(--border);border-radius:8px;padding:2px 6px}
/* Grids */
.grid{display:grid;gap:16px}
@media (min-width: 720px){ .grid-2{grid-template-columns:1fr 1fr} }
@media (min-width: 960px){ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} }
/* Banner (Option B) */
.banner{
  display:flex; align-items:center; gap:1.5rem;
  background:linear-gradient(180deg, #141414 0%, #0b0b0b 100%);
  border-bottom:2px solid var(--brand);
  padding:2.5rem 1rem;
  box-shadow:0 2px 8px rgba(0,0,0,0.5);
  justify-content:center;
}
.banner-logo{width:80px;height:80px}
.banner h1{margin:0;font-size:2.4rem;color:var(--brand)}
.banner p{color:#c9c9c9;margin:.3rem 0 0;font-size:1.1rem}
.banner div{text-align:left}
.banner-links{
  margin-top:1rem; display:flex; gap:1.25rem; flex-wrap:wrap; justify-content:flex-start;
}
.banner-links a{
  color:var(--brand); text-decoration:none; padding:4px 6px; border-radius:6px;
  transition:color .2s ease, background-size .2s ease;
  background-image:linear-gradient(var(--brand), var(--brand));
  background-position:0 100%; background-size:0% 2px; background-repeat:no-repeat;
}
.banner-links a:hover{ color:#f1dc8a; background-size:100% 2px }
/* Buttons */
.button{
  display:inline-block; background:var(--brand); color:#000;
  padding:.6rem 1.2rem; border-radius:8px; font-weight:600; text-decoration:none; transition:all .3s ease;
}
.button:hover{ transform:translateY(-2px) }
.button-about{
  background:transparent; color:var(--brand);
  border:2px solid transparent;
  transition:background .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.button-about:hover,
.button-about:hover:focus,
.button-about:hover:focus-visible{
  border-color:var(--brand);
  background:var(--brand); color:#000;
  box-shadow:0 0 12px rgba(212,175,55,0.6);
}
.button-about span{ display:inline-block; transition:transform .3s ease }
.button-about:hover span{ transform:translateX(4px) }
/* Focus visibility (keyboard only) */
:focus{ outline:none }
:focus-visible{ outline:2px solid #fff; outline-offset:3px; border-radius:6px }
/* ===== Utilities ===== */
:root{
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
}

/* Spacing helpers (use sparingly) */
.mt-1{ margin-top: var(--space-1) } .mt-2{ margin-top: var(--space-2) } .mt-3{ margin-top: var(--space-3) } .mt-4{ margin-top: var(--space-4) }
.mb-1{ margin-bottom: var(--space-1) } .mb-2{ margin-bottom: var(--space-2) } .mb-3{ margin-bottom: var(--space-3) } .mb-4{ margin-bottom: var(--space-4) }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Tighter list appearance when inside cards (optional) */
.card ul.post-list li:last-child { border-bottom: 0 }
/* Clickable banner title */
.banner-title {
  color: var(--brand);
  text-decoration: none;
}
.banner-title:hover {
  text-decoration: underline;
}
/* ---------- Prose / Typography cleanup ---------- */
:root{
  --text-strong: var(--text);      /* #e6e6e6 */
  --text-soft:  #cfd6dd;           /* calmer paragraph color */
}

.prose{
  max-width: 72ch;                 /* comfortable line length */
  margin-inline: auto;
}

/* Headings: stronger hierarchy, more breathing room */
.prose h1{ margin: 0 0 .25rem 0; }
.prose h2{
  margin: 2rem 0 .75rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}
.prose h3{ margin: 1.25rem 0 .5rem; }

/* Body text: soften brightness a bit */
.prose p{ color: var(--text-soft); }

/* Lists: room to breathe; keep labels readable */
.prose ul{ padding-left: 1.2rem; margin: .5rem 0 1rem; }
.prose li{ margin: .35rem 0; color: var(--text-soft); }
.prose li strong{ color: var(--text-strong); }

/* Tables: card-like, easier scan */
.prose table{
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin: .75rem 0 1.25rem;
}
.prose th, .prose td{ padding: .75rem 1rem; text-align: left; }
.prose thead th{
  background: rgba(212,175,55,0.08);
  color: var(--text-strong);
  font-weight: 700;
}
.prose tbody tr + tr td{ border-top: 1px solid var(--border); }

/* “Section emoji” alignment polish */
.prose h2 > img, .prose h2 > svg{ vertical-align: middle; margin-right: .25rem; }

/* Horizontal rules: subtle separators */
.prose hr{
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}

/* Small screens: table readability */
@media (max-width: 640px){
  .prose table{ display: block; overflow-x: auto; }
}
.prose h2 {
  color: var(--text-strong);
  border-bottom-color: rgba(212,175,55,0.25); /* gold-tinted underline */
}
/* Definition list layout for Skills & Tools */
.prose dl { margin: .25rem 0 1.2rem; }
.prose dt { font-weight: 700; color: var(--text); }
.prose dd { margin: 0 0 .7rem 0; color: var(--text-soft); }

@media (min-width: 720px){
  .prose dl {
    display: grid;
    grid-template-columns: 240px 1fr; /* label, description */
    column-gap: 1rem;
  }
  .prose dt { grid-column: 1; }
  .prose dd { grid-column: 2; margin: 0 0 .6rem 0; }
}

/* Slightly dim emoji headers so text carries the weight */
.prose h3 { display: flex; align-items: center; gap: .4rem; }
.prose h3::before { content: ""; } /* keeps spacing tidy if an emoji is removed */
.prose h3 { margin-top: 1.6rem; padding-top: .6rem; border-top: 1px solid var(--border); }