:root{
  /* Layout */
  --max: 1100px;
  --radius: 18px;
  --shadow: 0 12px 40px rgba(0,0,0,0.45);

  /* Spacing scale */
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 36px;

  /* Palette (Maroon + White) */
  --bg: #111111;
  --panel: #1a1a1a;
  --panel2: #1f1f1f;

  --text: #ffffff;
  --muted: #cfcfcf;

  --line: rgba(255,255,255,0.08);

  --accent: #800020;        /* Primary maroon */
  --accent-light: #a0002a;  /* Hover maroon */
  --accent-soft: rgba(128, 0, 32, 0.15);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

.container{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

/* Accessibility */
.skip-link{
  position:absolute;
  left:-999px;
  top: 10px;
  background: var(--text);
  color: #000;
  padding: 10px 12px;
  border-radius: 10px;
  z-index: 999;
}
.skip-link:focus{ left: 20px; }

/* Header */
.site-header{
  position: sticky;
  top: 0;
  background: rgba(17,17,17,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  z-index: 50;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: var(--space-md) 0;
  gap: var(--space-md);
}

.brand{
  display:flex;
  align-items:center;
  gap: var(--space-sm);
  font-weight:700;
  letter-spacing: 0.2px;
}

.brand-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--accent);
}

.nav{
  display:flex;
  align-items:center;
  gap: var(--space-md);
  font-weight:600;
  color: var(--muted);
}

.nav a{
  padding: 8px 10px;
  border-radius: 12px;
}

.nav a:hover{
  color: var(--text);
  text-decoration:none;
  background: rgba(255,255,255,0.05);
}

.nav-cta{
  border:1px solid var(--accent);
  color: var(--accent);
  background: transparent;
}

/* Hero */
.hero{
  padding: 70px 0 40px;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: var(--space-xl);
  align-items: start;
}

.kicker{
  color: var(--accent);
  font-weight:600;
  margin: 0 0 var(--space-sm);
}

.hero h1{
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  margin: 0 0 var(--space-md);
}

.lead{
  color: var(--muted);
  max-width: 600px;
  margin: 0 0 var(--space-lg);
  font-size: 1.05rem;
}

.hero-actions{
  display:flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.hero-links{
  display:flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding:0;
  margin:0;
  list-style:none;
  color: var(--muted);
  font-weight: 600;
}

.hero-links a:hover{ color: var(--text); }

/* Sections */
.section{
  padding: var(--space-xl) 0;
}

.section.alt{
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head{
  margin-bottom: var(--space-lg);
}

.section-head h2{
  margin: 0 0 var(--space-xs);
  font-size: 1.8rem;
}

.muted{ color: var(--muted); }
.small{ font-size: 0.95rem; }

/* Grid / Card separation */
.grid{
  display:grid;
  gap: var(--space-xl); /* ensures separation BETWEEN cards */
}

/* Cards */
.card{
  background: var(--panel2);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-lg);
  box-shadow: var(--shadow);

  display: flex;
  flex-direction: column;
  gap: var(--space-md); /* ensures separation INSIDE card */
}

/* Cards layout (Projects) */
.cards{
  grid-template-columns: repeat(12, 1fr);
}

.cards .project{
  grid-column: span 6;
}

.project-top h3{
  margin: 0 0 var(--space-xs);
  font-size: 1.15rem;
}

.tag{
  display:inline-block;
  margin-left: var(--space-sm);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

/* Bullets spacing */
.bullets{
  padding-left: 18px;
  margin: 0;
  color: var(--muted);

  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.bullets strong{
  color: var(--text);
  font-weight: 700;
}

/* Pills */
.meta{
  display:flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.pill{
  padding: 6px 10px;
  border-radius:999px;
  border:1px solid var(--accent);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  background: transparent;
}

/* Chips (Hero highlights) */
.chips{
  display:flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.chip{
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid rgba(128,0,32,0.25);
  color: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
}

/* Buttons */
.btn{
  padding: 12px 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn:hover{
  text-decoration:none;
  background: var(--accent-soft);
}

.btn.primary{
  background: var(--accent);
  border: 1px solid rgba(255,255,255,0.10);
}

.btn.primary:hover{
  background: var(--accent-light);
}

/* Prevent buttons from touching card edges or other components */
.card .btn{
  margin-top: var(--space-sm);
}

/* Button container separation */
.actions{
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  display:flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Skills grid */
.skill-grid{
  grid-template-columns: repeat(12, 1fr);
}

.skill-grid .card{
  grid-column: span 3;
}

.compact{
  list-style:none;
  padding:0;
  margin: 0;
  color: var(--muted);

  display:flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* About grid */
.about-grid{
  grid-template-columns: repeat(12, 1fr);
}

.about-grid .card{
  grid-column: span 6;
}

/* CTA */
.section.cta{
  padding: var(--space-xl) 0;
}

.cta-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap: var(--space-lg);

  background: linear-gradient(
    135deg,
    rgba(128,0,32,0.35),
    rgba(128,0,32,0.15)
  );
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  padding: var(--space-lg);
}

.cta-actions{
  display:flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Footer */
.site-footer{
  border-top:1px solid var(--line);
  padding: var(--space-lg) 0;
  text-align:center;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 940px){
  .hero-grid{ grid-template-columns: 1fr; }
  .cards .project{ grid-column: span 12; }
  .skill-grid .card{ grid-column: span 6; }
  .about-grid .card{ grid-column: span 12; }
  .cta-inner{ flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px){
  .nav{ gap: var(--space-xs); }
  .nav a{ padding: 8px 8px; }
  .skill-grid .card{ grid-column: span 12; }
}