:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17201c;
  background: #f6f7f3;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; min-width: 320px; }

a { color: inherit; }

.page {
  width: min(100% - 48px, 920px);
  margin: 0 auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid #d7ddd5;
}

.brand {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-decoration: none;
}

.languages {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.languages a {
  padding: 7px 9px;
  border-radius: 5px;
  text-decoration: none;
}

.languages a:hover,
.languages a:focus-visible { background: #e9ede6; }

.languages [aria-current="page"] { color: #f6f7f3; background: #234e3c; }
.languages [aria-current="page"]:hover,
.languages [aria-current="page"]:focus-visible { background: #234e3c; }
.languages span { color: #8a948b; }

main { padding: clamp(48px, 8vw, 92px) 0 68px; }

.eyebrow {
  margin: 0 0 13px;
  color: #416851;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 42px;
  font-size: clamp(2.9rem, 7.5vw, 5rem);
  font-weight: 650;
  letter-spacing: -0.075em;
  line-height: 1;
}

.projects { list-style: none; padding: 0; margin: 0; border-top: 1px solid #b9c5bb; }
.projects li { border-bottom: 1px solid #d7ddd5; }

.project {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(160px, 210px) 24px;
  align-items: center;
  gap: 18px;
  padding: 24px 12px 24px 0;
  text-decoration: none;
  transition: background-color 160ms ease, padding-left 160ms ease;
}

.project:hover,
.project:focus-visible { background: #e9efe9; padding-left: 12px; outline-offset: -2px; }

.number { align-self: start; padding-top: 5px; color: #6d8172; font-size: 0.78rem; font-weight: 700; }
.name { display: block; margin-bottom: 7px; font-size: clamp(1.35rem, 2.5vw, 1.65rem); font-weight: 650; letter-spacing: -0.035em; }
.description { display: block; color: #536158; font-size: 0.92rem; line-height: 1.5; }
.domain { color: #536158; font-size: 0.85rem; text-align: right; }
.arrow { color: #2c684a; font-size: 1.25rem; text-align: right; transition: transform 160ms ease; }
.project:hover .arrow,
.project:focus-visible .arrow { transform: translate(3px, -3px); }

footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0 48px;
  border-top: 1px solid #d7ddd5;
  color: #536158;
  font-size: 0.88rem;
}

footer p { margin: 0; }
footer a { color: #234e3c; font-weight: 700; text-underline-offset: 3px; }
footer a:hover { color: #143c2b; }

@media (max-width: 660px) {
  .page { width: min(100% - 36px, 920px); }
  .topbar { padding: 22px 0; }
  main { padding-top: 55px; padding-bottom: 55px; }
  h1 { margin-bottom: 32px; }
  .project { grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 10px; padding: 21px 5px 21px 0; }
  .domain { display: none; }
  .description { font-size: 0.88rem; }
  footer { display: block; }
  footer p + p { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .project, .arrow { transition: none; }
}