/* ── Design tokens (from source Tailwind palette) ────── */
:root {
  --g50:  #f9fafb;
  --g200: #e5e7eb;
  --g300: #d1d5db;
  --g400: #9ca3af;
  --g500: #6b7280;
  --g600: #4b5563;
  --g700: #374151;
  --g900: #111827;
}

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #fff;
  color: var(--g900);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ── Page grid ───────────────────────────────────────── */
/* mobile: single column, min-h-screen                   */
/* desktop (≥768px): 2fr 3fr, h-screen, no overflow      */
main {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  background: #fff;
}
@media (min-width: 768px) {
  main {
    grid-template-columns: 2fr 3fr; /* md:grid-cols-5 → col-span-2 + col-span-3 */
    height: 100vh;
    overflow: hidden;
  }
}

/* ── Sidebar (left column) ───────────────────────────── */
/* border-b mobile / border-r desktop; md:flex md:items-center */
aside {
  border-bottom: 1px solid var(--g200);
  display: flex;
  align-items: center;       /* vertically centers profile in full-height column */
  overflow-y: auto;
}
@media (min-width: 768px) {
  aside {
    border-bottom: none;
    border-right: 1px solid var(--g200);
  }
}

/* w-full py-8 md:py-0 px-6 */
.sidebar-inner {
  width: 100%;
  padding: 2rem 1.5rem;      /* py-8 px-6 */
}
@media (min-width: 768px) {
  .sidebar-inner {
    padding-top: 0;
    padding-bottom: 0;        /* md:py-0 — vertical centering is handled by aside */
  }
}

/* space-y-8 text-center */
.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;                  /* space-y-8 = 32px */
  text-align: center;
}

/* ── Avatar ──────────────────────────────────────────── */
/* w-28 md:w-40  h-28 md:h-40  rounded-full overflow-hidden ring-2 ring-gray-200 */
.avatar-wrap {
  width: 7rem;                /* w-28 = 112px */
  height: 7rem;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--g200); /* ring-2 ring-gray-200 */
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .avatar-wrap {
    width: 10rem;             /* w-40 = 160px */
    height: 10rem;
  }
}
 .avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transform: scale(1.4);
  transform-origin: 70% 50%;
}

/* ── Profile text (name / role / rule / bio) ─────────── */
/* space-y-3 */
.profile-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;               /* space-y-3 = 12px */
}

/* text-2xl md:text-3xl font-bold text-gray-900 */
.profile-text h1 {
  font-size: 1.5rem;          /* text-2xl */
  font-weight: 700;
  color: var(--g900);
  line-height: 1.25;
}
@media (min-width: 768px) {
  .profile-text h1 { font-size: 1.875rem; } /* text-3xl */
}

/* text-lg md:text-xl text-gray-600 */
.role {
  font-size: 1.125rem;
  color: var(--g600);
}
@media (min-width: 768px) {
  .role { font-size: 1.25rem; }
}

/* h-px w-16 bg-gray-200 mx-auto my-4 */
.profile-rule {
  height: 1px;
  width: 4rem;                /* w-16 = 64px */
  background: var(--g200);
  margin: 0.25rem 0;          /* my-4 adds to the gap; net visible ≈ 1rem each side */
  align-self: center;
}

/* text-sm md:text-base text-gray-600 max-w-xs mx-auto leading-relaxed */
.bio {
  font-size: 0.875rem;
  color: var(--g600);
  max-width: 25rem;          
  line-height: 1.625;         /* leading-relaxed */
}
@media (min-width: 768px) {
  .bio { font-size: 1rem; }
}

/* ── Contacts + social ───────────────────────────────── */
/* space-y-4 */
.contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;                  /* space-y-4 = 16px */
  width: 100%;
}

/* flex items-center justify-center space-x-2 */
.contact-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;                /* space-x-2 = 8px */
}

/* w-4 h-4 text-gray-600 */
.contact-row svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--g600);
}

/* text-sm text-gray-600 hover:text-gray-900 */
.contact-row a,
.contact-row span {
  font-size: 0.875rem;
  color: var(--g600);
}
/* hover colour handled by contact-fx.js */

/* flex items-center justify-center pt-2; each link: p-2 text-gray-600 hover:text-gray-900 */
.social {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.5rem;        /* pt-2 */
}
.social a {
  padding: 0.5rem;            /* p-2 = 8px — gives 16px visual gap between icons */
  color: #000;
  display: flex;
  align-items: center;
  transition: color 0.15s ease;
}
.social a:hover { color: #00897B; }
.social svg {
  width: 28px;
  height: 28px;
}

/* ── Right column (content) ──────────────────────────── */
/* md:col-span-3 flex flex-col md:justify-center */
.content {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
@media (min-width: 768px) {
  .content { justify-content: center; } /* centers skills+exp vertically */
}

/* ── Sections ────────────────────────────────────────── */
/* py-6 px-6 */
section {
  padding: 1.5rem;
}

/* space-y-4 max-w-2xl mx-auto */
.section-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;                  /* space-y-4 = 16px */
  max-width: 42rem;           /* max-w-2xl = 672px */
  margin: 0 auto;
  width: 100%;
}

/* text-lg font-semibold text-gray-900 text-center md:text-left */
.section-inner h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--g900);
  text-align: center;
}
@media (min-width: 768px) {
  .section-inner h2 { text-align: left; }
}

/* h-px w-full bg-gray-200 mt-2 */
.rule {
  height: 1px;
  background: var(--g200);
  margin-top: 0.5rem;         /* mt-2 = 8px */
}

/* ── Skills ──────────────────────────────────────────── */
/* grid grid-cols-1 md:grid-cols-2 gap-4 */
.skill-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;                  /* gap-4 = 16px */
}
@media (min-width: 768px) {
  .skill-grid { grid-template-columns: 1fr 1fr; }
}

/* flex items-center space-x-2 mb-2 */
.cat-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;                /* space-x-2 = 8px */
  margin-bottom: 0.5rem;      /* mb-2 = 8px */
  color: var(--g400);         /* #9ca3af ≈ #9DA2AF used for icons */
}

/* w-4 h-4 */
.cat-label svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* text-sm font-medium text-gray-600 */
.cat-label span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--g600);
}

/* flex flex-wrap gap-1.5 */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;              /* gap-1.5 = 6px */
}

.badge {
  padding: 0.15rem 0.5rem;
  font-size: 0.875rem;
  background: var(--g50);
  color: var(--g700);
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--g200);
  line-height: 1.4;
}

/* ── Experience ──────────────────────────────────────── */
/* space-y-5 */
.exp-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;               /* space-y-5 = 20px */
}

/* relative pl-4 border-l-2 border-gray-200 */
.job {
  position: relative;
  padding-left: 1rem;         /* pl-4 = 16px */
  border-left: 2px solid var(--g200);
}

/* absolute -left-[5px] top-[10px] h-2.5 w-2.5 rounded-full bg-gray-300 */
.job-dot {
  position: absolute;
  left: -5px;                 /* centers the 10px dot on the 2px border */
  top: 10px;
  width: 10px;                /* h-2.5 w-2.5 */
  height: 10px;
  border-radius: 50%;
  background: var(--g300);    /* bg-gray-300 = #d1d5db */
}

/* space-y-1 */
.job-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;               /* space-y-1 = 4px */
}

/* flex flex-col md:flex-row md:items-center md:justify-between */
.job-meta {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .job-meta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* text-base font-medium text-gray-900 */
.job-meta h3 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--g900);
}

/* text-sm text-gray-500 */
.dates {
  font-size: 0.875rem;
  color: var(--g500);
}

/* text-sm font-medium text-gray-600 */
.company {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--g600);
}

/* text-sm text-gray-600 leading-relaxed */
.desc {
  font-size: 0.875rem;
  color: var(--g600);
  line-height: 1.625;
}

/* ── Language toggle ─────────────────────────────── */
#lang-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  background: var(--g50);
  color: var(--g600);
  border: none;
  box-shadow: 0 0 0 1px var(--g200);
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-family: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease, color 0.15s ease;
}
#lang-toggle:hover {
  opacity: 1;
  color: var(--g900);
}