@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-Bold.woff2")
    format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/IBMPlexSans-Light.woff2")
    format("woff2");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/IBMPlexSans-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg-dark: #1a1a2e;
  --bg-mid: #16213e;
  --bg-light: #0f3460;
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0b0;
  --accent: #e94560;
  --accent-hover: #ff6b6b;
  --shadow: #00000088;
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --content-width: 42em;
  --spacing: 0.7em;
  --spacing-tight: 0.2em;
  --navbar-item-height: 1.6em;
  --social-icon-size: 2.2em;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.7;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
}

/* ── Navbar ── */

#nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-light);
  box-shadow: 0 0 4px 0 var(--shadow);
  position: sticky;
  top: 0;
  z-index: 10;
}

#language-switcher {
  display: inline-flex;
  align-items: center;
  margin: var(--spacing-tight) 0
    var(--spacing-tight) var(--spacing);
  line-height: 0;
  gap: var(--spacing-tight);
}

#language-switcher img {
  height: var(--navbar-item-height);
  filter: saturate(70%);
  vertical-align: middle;
}

#language-switcher a img {
  filter: saturate(70%) brightness(50%);
}

#language-switcher a:hover img {
  filter: saturate(100%) brightness(80%);
}

#nav-links {
  display: inline-flex;
  flex-wrap: wrap;
  margin: var(--spacing-tight) var(--spacing)
    var(--spacing-tight) 0;
  gap: var(--spacing);
}

#nav-links a {
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.95rem;
}

#nav-links a:hover {
  color: var(--accent);
}

#nav-links a.active {
  color: var(--accent);
}

/* ── Hero Banner ── */

#hero {
  background-color: var(--bg-mid);
  box-shadow: 0 0 4px 0 var(--shadow);
  padding: 2.5em var(--spacing);
}

#hero-content {
  max-width: var(--content-width);
  margin: 0 auto;
  text-align: center;
}

#hero h1 {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.1em;
  filter: drop-shadow(0 1px 1px var(--shadow));
}

#hero h2 {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text-secondary);
  margin-bottom: 0.8em;
  filter: drop-shadow(0 1px 1px var(--shadow));
}

#social-icons {
  display: flex;
  justify-content: center;
  gap: 0.8em;
  line-height: 0;
  filter: drop-shadow(0 1px 1px var(--shadow));
}

#social-icons a svg {
  width: var(--social-icon-size);
  height: var(--social-icon-size);
}

#social-icons a svg path {
  fill: var(--text-primary);
  transition: fill 0.15s;
}

#social-icons a:hover svg path {
  fill: var(--accent);
}

/* ── Main Content ── */

main {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--spacing) 3em;
}

main section {
  margin-top: 2em;
}

main section > h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.6em;
  padding-bottom: 0.2em;
  border-bottom: 2px solid var(--accent);
  color: var(--text-primary);
}

/* ── About / Background ── */

#about p,
#background p {
  text-align: justify;
  margin-bottom: 0.8em;
}

/* ── Experience ── */

.role {
  margin-bottom: 1.6em;
}

.role-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3em;
}

.role-company {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
}

.role-company a {
  color: inherit;
}

.role-company a:hover {
  color: var(--accent);
}

.role-dates {
  color: var(--text-secondary);
  font-size: 0.9rem;
  white-space: nowrap;
}

.role-title {
  font-weight: 400;
  font-size: 1rem;
  color: var(--text-primary);
}

.role-location {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.role-desc {
  font-style: italic;
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0.2em 0;
}

.role ul {
  margin: 0.4em 0 0 1.4em;
}

.role li {
  margin-bottom: 0.3em;
}

/* Promoted roles: multiple titles under one company */
.role-sub {
  margin-top: 0.6em;
}

.role-sub .role-header {
  margin-bottom: 0;
}

/* ── Education ── */

.edu {
  margin-bottom: 1.4em;
}

.edu-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3em;
}

.edu-school {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
}

.edu-school a {
  color: inherit;
}

.edu-school a:hover {
  color: var(--accent);
}

.edu-dates {
  color: var(--text-secondary);
  font-size: 0.9rem;
  white-space: nowrap;
}

.edu-degree {
  font-weight: 400;
}

.edu-location {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.edu ul {
  margin: 0.4em 0 0 1.4em;
}

.edu li {
  margin-bottom: 0.3em;
}

/* ── Publications ── */

#publications .citation {
  margin-top: 0.4em;
  text-align: justify;
}

#publications .citation a {
  color: inherit;
}

#publications .citation a:hover {
  color: var(--accent);
}

/* ── Skills ── */

.skill-group {
  margin-bottom: 1em;
}

.skill-group-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.3em;
  color: var(--text-secondary);
}

.skill-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

.pill {
  display: inline-block;
  background-color: var(--bg-light);
  color: var(--text-primary);
  padding: 0.15em 0.6em;
  border-radius: 4px;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ── Languages ── */

#languages ul {
  list-style: none;
  margin: 0.4em 0 0;
}

#languages li {
  margin-bottom: 0.2em;
}

#languages strong {
  font-weight: 400;
}

#languages span {
  color: var(--text-secondary);
}

/* ── Projects ── */

.project {
  margin-bottom: 1.6em;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3em;
}

.project-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
}

.project-year {
  color: var(--text-secondary);
  font-size: 0.9rem;
  white-space: nowrap;
}

.project p {
  text-align: justify;
  margin: 0.3em 0;
}

.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-top: 0.3em;
  font-size: 0.9rem;
}

/* ── Responsive ── */

@media (max-width: 600px) {
  #hero h1 {
    font-size: 1.8rem;
  }

  #hero h2 {
    font-size: 1rem;
  }

  .role-header,
  .edu-header,
  .project-header {
    flex-direction: column;
    gap: 0;
  }

  .role-dates,
  .edu-dates {
    white-space: normal;
  }

  main {
    padding: 0 0.8em 2em;
  }
}