:root {

  --page-width: 760px;

  --text: #171717;

  --muted: #666;

  --border: #d8d8d8;

  --background: #fafafa;

}

* {

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

}

body {

  max-width: var(--page-width);

  margin: 0 auto;

  padding: 32px 24px;

  color: var(--text);

  background: var(--background);

  font-family:

    Georgia,

    "Times New Roman",

    serif;

  font-size: 18px;

  line-height: 1.65;

}

header {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 24px;

  padding-bottom: 20px;

  border-bottom: 1px solid var(--border);

}

.site-name {

  color: var(--text);

  font-family:

    Arial,

    Helvetica,

    sans-serif;

  font-size: 17px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-decoration: none;

  text-transform: uppercase;

}

nav {

  display: flex;

  flex-wrap: wrap;

  gap: 18px;

}

nav a {

  color: var(--muted);

  font-family:

    Arial,

    Helvetica,

    sans-serif;

  font-size: 14px;

}

main {

  padding-top: 64px;

}

section {

  margin-bottom: 72px;

}

.introduction h1 {

  max-width: 700px;

  margin: 12px 0 24px;

  font-size: clamp(36px, 7vw, 62px);

  font-weight: 400;

  line-height: 1.08;

  letter-spacing: -0.035em;

}

.label,

.date,

.status {

  color: var(--muted);

  font-family:

    Arial,

    Helvetica,

    sans-serif;

  font-size: 13px;

  letter-spacing: 0.06em;

  text-transform: uppercase;

}

h2 {

  margin-bottom: 28px;

  padding-bottom: 8px;

  border-bottom: 1px solid var(--border);

  font-family:

    Arial,

    Helvetica,

    sans-serif;

  font-size: 15px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}

h3 {

  margin: 4px 0 8px;

  font-size: 27px;

  font-weight: 400;

  line-height: 1.25;

}

a {

  color: var(--text);

  text-underline-offset: 3px;

}

a:hover {

  text-decoration-thickness: 2px;

}

ul {

  padding-left: 22px;

}

.item {

  margin-bottom: 42px;

}

footer {

  padding-top: 24px;

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

  color: var(--muted);

  font-family:

    Arial,

    Helvetica,

    sans-serif;

  font-size: 13px;

}

@media (max-width: 600px) {

  body {

    padding: 22px 18px;

    font-size: 17px;

  }

  header {

    display: block;

  }

  nav {

    margin-top: 14px;

  }

  main {

    padding-top: 44px;

  }

  section {

    margin-bottom: 56px;

  }

}