/* Fred Mucai — Resume
   Design tokens */
:root {
  --background: #faf8f2;
  --foreground: #1a1d2b;
  --card: #ffffff;
  --muted: #f2efe7;
  --muted-foreground: #6b6f7d;
  --border: #e4e0d5;
  --rule: #e8e4d8;
  --primary: #26304a;         /* deep navy */
  --primary-fg: #faf8f2;
  --accent: #3a5390;          /* navy accent */
  --shadow-sm: 0 1px 2px rgba(20, 20, 40, 0.04);
  --radius: 0.5rem;
  --font-serif: "Fraunces", ui-serif, Georgia, serif;
  --font-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--accent); }

/* Layout */
.page { min-height: 100vh; }
.container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}
@media (min-width: 768px) {
  .container { padding: 5rem 2.5rem; }
}
.layout {
  display: grid;
  gap: 3rem;
}
@media (min-width: 768px) {
  .layout { grid-template-columns: 280px minmax(0, 1fr); gap: 4rem; }
}

/* Sidebar */
.sidebar-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .sidebar { position: sticky; top: 3rem; align-self: start; }
}
.avatar {
  width: 150px;
  height: 190px;
  border-radius: 50%;
  object-fit: cover;   /* crops without distortion */
  display: block;
  margin: 0 auto;

/* --- MOVE TO THE LEFT --- */
  margin-left: -0.0px;  /* Increase this number (e.g., -40px) to pull it even further left */
}
.name {
  font-size: 2.25rem;
  line-height: 1.05;
  color: var(--foreground);
}
.tagline {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.accent-rule {
  height: 1px; width: 3rem;
  background: var(--accent);
}
.contact { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; }
.contact li { display: flex; flex-direction: column; }
.contact a { margin-top: 0.15rem; word-break: break-word; }

.label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.toc { display: none; }
@media (min-width: 768px) { .toc { display: block; } }
.toc ul { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.875rem; }
.toc a { color: var(--muted-foreground); }

/* Main */
.main { min-width: 0; display: flex; flex-direction: column; gap: 4rem; }

.section { scroll-margin-top: 2rem; }
.section-head {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.section-head .rule {
  flex: 1; height: 1px; background: var(--rule);
}
.section h2 {
  font-size: 1.875rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .section h2 { font-size: 2.25rem; } }
.section p { color: rgba(26, 29, 43, 0.9); }
.section p + p { margin-top: 1rem; }

/* Grids */
.grid-2 {
  display: grid; gap: 1.5rem;
}
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid-2.skills { column-gap: 2rem; row-gap: 1.5rem; }

/* Cards */
.card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.card h3 { font-size: 1.125rem; }
.card p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.55; }

/* Skills */
.skill-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chips li {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  color: rgba(26, 29, 43, 0.82);
}

/* Badges */
.badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.badges li {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: rgba(38, 48, 74, 0.06);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(38, 48, 74, 0.15);
}

/* Certification list */
.cert-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.cert { border-left: 2px solid rgba(58, 83, 144, 0.4); padding-left: 1.25rem; }
.row-title {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 1rem;
}
.row-title h3 { font-size: 1.125rem; min-width: 0; }
.row-title span { font-size: 0.75rem; color: var(--muted-foreground); flex-shrink: 0; }
.cert p, .cert-list p { margin-top: 0.375rem; font-size: 0.875rem; color: var(--muted-foreground); }
.muted { color: var(--muted-foreground); font-size: 0.875rem; margin-top: 0.25rem; }

/* Projects */
.project {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
}
@media (min-width: 768px) { .project { padding: 2rem; } }
.project:last-child { margin-bottom: 0; }
.project-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline; gap: 1rem;
}
.project-head .number {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--accent);
}
.project-head h3 { font-size: 1.25rem; }
.project > p { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); }
.bullets { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.875rem; color: rgba(26, 29, 43, 0.9); }
.bullets li { position: relative; padding-left: 1rem; }
.bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55rem;
  width: 4px; height: 4px;
  border-radius: 9999px;
  background: var(--accent);
}
.stack { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.stack li {
  border: 1px solid var(--border);
  padding: 0.1rem 0.5rem;
  font-size: 0.7rem;
  color: var(--muted-foreground);
  border-radius: 0.25rem;
}
.outcome {
  margin-top: 1rem !important;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  color: rgba(26, 29, 43, 0.9) !important;
}

/* Footer */
.footer {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* Print */
@media print {
  :root { --background: #ffffff; }
  .sidebar { position: static; }
  .toc, .footer { display: none; }
  .card, .project { break-inside: avoid; box-shadow: none; }
}