:root {
  --space-1: 4px;
  --space-2: calc(var(--space-1) * 2);
  --space-3: calc(var(--space-1) * 3);
  --space-4: calc(var(--space-1) * 4);
  --space-6: calc(var(--space-1) * 6);
  --space-8: calc(var(--space-1) * 8);
  --space-10: calc(var(--space-1) * 10);
  --space-12: calc(var(--space-1) * 12);
  --space-16: calc(var(--space-1) * 16);

  --color-bg: #e5e5e5;
  --color-surface: #ffffff;
  --color-shadow: rgba(0, 0, 0, 0.15);
  --color-content-primary: #111111;
  --color-content-secondary: #666666;

  --radius-sm: var(--space-2);
}

html {
  font-size: 14px;
}

body {
  background: var(--color-bg);
  color: var(--color-content-primary);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  justify-content: center;
  padding: var(--space-12);
}

strong {
  font-weight: bold;
}

.page {
  max-width: 9.95in;
  padding: var(--space-10);
  background: var(--color-surface);
  box-shadow: 0 4px 24px var(--color-shadow);
  border-radius: var(--radius-sm);
}

.layout {
  display: grid;
  grid-template:
    "header header" auto
    "aside  main" auto / auto 1fr;

  >header {
    grid-area: header;
    padding-top: var(--space-8);
    padding-bottom: var(--space-12);
  }

  >aside {
    grid-area: aside;
    padding-right: var(--space-12);
  }

  >main {
    grid-area: main;
  }
}

header {
  .name {
    font-size: 2em;
    text-transform: uppercase;
  }

  .title {
    color: var(--color-content-secondary);
  }
}

.cv-section {
  &+& {
    margin-top: var(--space-10);
  }

  .section-title {
    font-size: 1.4em;
    margin-bottom: var(--space-2);
    text-transform: uppercase;
  }
}

.cv-subsection {
  &+& {
    margin-top: var(--space-8);
  }

  .subsection-title {
    margin-bottom: var(--space-2);
    font-weight: bold;
    text-transform: uppercase;
  }
}

.skills-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  list-style: disc;
  padding-left: var(--space-4);
}

.skills-detail {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-1);
  gap: var(--space-1);
}

.description {
  line-height: 1.5;
}

.main-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);

  &+& {
    margin-top: var(--space-4);
  }

  .title {
    font-weight: bold;
  }

  .subtitle {
    color: var(--color-content-secondary);
    font-size: 0.9em;
  }
}

.achievements {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: disc;
  padding-left: var(--space-4);
}

.details {
  font-style: normal;

  dl {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
}

.details-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);

  dt {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8em;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  body {
    padding: var(--space-6);
  }

  .page {
    zoom: 0.85;
  }
}

@media (max-width: 700px) {
  .page {
    zoom: 0.65;
  }
}

@media (max-width: 600px) {
  body {
    padding: var(--space-4);
  }

  .page {
    zoom: 1;
    width: 100%;
    padding: var(--space-6);
  }

  .layout {
    grid-template:
      "header" auto
      "aside" auto
      "main" auto / 1fr;

    >aside {
      padding-right: 0;
      padding-bottom: var(--space-6);
    }
  }
}

@media print {
  body {
    background: none;
    display: block;
    padding: 0;
  }

  .page {
    max-width: unset;
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
}