:root {
  --bg: #FAFAF8;
  --ink: #1C1E22;
  --muted: #6B7280;
  --line: #E4E4E0;
  --accent: #2B6E5B;

  --display: "Space Grotesk", sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;
}


/* Reset */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

}



body {

  margin: 0;

  background: var(--bg);

  color: var(--ink);

  font-family: var(--body);

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

}



a {
  color: inherit;
}



button {
  font-family: inherit;
}



:focus-visible {

  outline: 2px solid var(--accent);

  outline-offset: 3px;

}



/* Container */

.wrap {

  max-width: 640px;

  margin: 0 auto;

  padding: 0 24px;

}



/* Header */

header {

  padding: 28px 0;

}



.nav {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.logo {

  font-family: var(--display);

  font-weight: 600;

  font-size: 16px;

  text-decoration: none;

}



.nav-right {

  display: flex;

  align-items: center;

  gap: 24px;

}



/* Navigation */

.nav-links {

  display: flex;

  gap: 24px;

  list-style: none;

  margin: 0;

  padding: 0;

}



.nav-links a {

  text-decoration: none;

  font-size: 14px;

  color: var(--muted);

  transition: color 0.15s ease;

}



.nav-links a:hover {

  color: var(--ink);

}



/* Language switcher */

.languages {

  display: flex;

  gap: 8px;

}



.lang-btn {

  border: none;

  background: none;

  padding: 0;

  cursor: pointer;

  color: var(--muted);

  font-size: 14px;

  transition: color 0.15s ease;

}



.lang-btn:hover {

  color: var(--accent);

}



.lang-btn.active {

  color: var(--ink);

  font-weight: 600;

}



/* Main */

main {

  padding: 40px 0 0;

}



section {

  padding: 56px 0;

  border-top: 1px solid var(--line);

}



section:first-of-type {

  border-top: none;

  padding-top: 20px;

}



/* Typography */

h1 {

  font-family: var(--display);

  font-weight: 600;

  font-size: clamp(28px, 5vw, 36px);

  line-height: 1.25;

  margin: 0 0 18px;

}



h2 {

  font-family: var(--display);

  font-weight: 600;

  font-size: 15px;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  color: var(--muted);

  margin: 0 0 22px;

}



.about p {

  font-size: 16px;

  color: var(--ink);

  max-width: 54ch;

  margin: 0 0 14px;

}



.about p:last-child {

  margin-bottom: 0;

}



/* Work section */

.work {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  padding: 20px 0;

  text-decoration: none;

  border-top: 1px solid var(--line);

}



.work:first-of-type {

  border-top: none;

  padding-top: 0;

}



.work-title {

  font-family: var(--display);

  font-weight: 600;

  font-size: 17px;

  margin: 0 0 4px;

}



.work-desc {

  font-size: 14px;

  color: var(--muted);

  margin: 0;

}



.work-arrow {

  font-size: 18px;

  color: var(--muted);

  transition: transform 0.15s ease, color 0.15s ease;

  flex-shrink: 0;

}



.work:hover .work-arrow {

  transform: translate(2px, -2px);

  color: var(--accent);

}



/* Contact */

.contact-list {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.contact-list a {

  display: flex;

  justify-content: space-between;

  align-items: center;

  text-decoration: none;

  font-size: 16px;

  padding: 12px 0;

  border-top: 1px solid var(--line);

  transition: color 0.15s ease;

}



.contact-list a:first-child {

  border-top: none;

}



.contact-list a:hover {

  color: var(--accent);

}



.contact-list a span:last-child {

  color: var(--muted);

  font-size: 14px;

}



/* Footer */

footer {

  padding: 32px 0 48px;

  font-size: 13px;

  color: var(--muted);

}



/* Mobile */

@media (max-width: 480px) {


  header {

    padding: 22px 0;

  }


  .nav {

    align-items: flex-start;

  }


  .nav-right {

    gap: 16px;

  }


  .nav-links {

    gap: 16px;

  }


  section {

    padding: 40px 0;

  }


  h1 {

    font-size: 28px;

  }


}