@font-face {
  font-family: 'Inter';
  src:
    url('fonts/Inter_18pt-Regular.woff2') format('woff2'),
    url('fonts/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src:
    url('fonts/Inter_18pt-SemiBold.woff2') format('woff2'),
    url('fonts/Inter_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

:root {
  --maxw: 720px;
  --font-main: 'Inter', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; color: #000; font-family: var(--font-main); line-height: 1.5; }

.wrapper { max-width: var(--maxw); margin: 8vh auto; padding: 0 24px; }

.header { margin-bottom: 8vh; text-align: left; position: relative; }
.site-title { font-size: clamp(28px, 5vw, 48px); letter-spacing: .08em; font-weight: 600; margin: 0; text-transform: uppercase; }
.subtitle { margin: 6px 0 28px 0; font-size: clamp(14px, 2.2vw, 18px); letter-spacing: .02em; color: #111; }

.nav { display: flex; gap: 16px; flex-wrap: wrap; font-size: clamp(14px, 2.2vw, 16px); margin-bottom: 6vh; }
.nav a { text-decoration: none; padding-bottom: 2px; color: inherit; }
.nav a.active-link { color: #000; text-decoration: line-through double; }

.lang-switcher { position: absolute; top: 16px; right: 24px; }
.lang-btn { font-size: 12px; padding: 4px 8px; margin-left: 4px; cursor: pointer; background: none; border: none; }

.main h2 { font-size: clamp(20px, 3vw, 28px); margin: 0 0 16px 0; font-weight: 600; }
.main p { margin: 0 0 14px 0; }

.content-section { display: none; min-height: 40vh; max-width: 60ch; }

.portfolio-section { display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; min-height: 60vh; background-size: cover; background-position: center; background-color: #333; }

.hidden-email { color: transparent; text-decoration: line-through double; }

.footer { margin-top: 10vh; font-size: 14px; color: #222; }

@media (max-width: 600px) {
  .nav { flex-direction: column; gap: 12px; }
  .wrapper { margin: 5vh auto; padding: 0 16px; }
  .content-section { max-width: 100%; }
}