.section__title {
  color: var(--color-green);
  font-size: var(--font-size-medium);
  margin-bottom: var(--space-medium);
  text-align: center;
  text-transform: uppercase;
}

.section__grid,
.section__stack {
  display: grid;
  gap: var(--space-medium);
}

@media (min-width: 48em) {
  .section__grid {
    grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
  }
}

.details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-medium);
  justify-content: center;
  list-style: none;
  margin-top: var(--space-large);
}

.details li {
  background: rgba(var(--rgb-green), 0.1);
  border-radius: 0.3em;
  color: var(--color-terminal-white);
  font-weight: 600;
  padding: 0.5em 1em;
}

.details__label {
  color: var(--color-green);
  margin-right: 0.5ch;
}

.pillars {
  display: grid;
  gap: var(--space-medium);
}

@media (min-width: 48em) {
  .pillars {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pillar {
  background: var(--color-background-storm);
  border-radius: 0.4em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.3),
    0 0.3em 2em -1.2em rgba(var(--rgb-black), 0.1),
    0 0.6em 2.4em -1.6em rgba(var(--rgb-black), 0.2);
  display: grid;
  gap: var(--space-small);
  padding: var(--space-large);
}

.pillar__title {
  color: var(--color-green);
  font-size: var(--font-size-medium);
  font-weight: 700;
  text-transform: uppercase;
}

.pillar__desc {
  color: var(--color-terminal-blue);
  font-weight: 600;
}

.pillar__list {
  color: var(--color-terminal-white);
  display: grid;
  gap: 0.4em;
  list-style: none;
  margin-top: var(--space-small);
}

.pillar__list li::before {
  color: var(--color-terminal-cyan);
  content: "▸ ";
}

.section__list {
  color: var(--color-terminal-white);
  display: grid;
  gap: 0.4em;
  list-style: none;
  margin-top: var(--space-medium);
}

.section__list li::before {
  color: var(--color-terminal-cyan);
  content: "▸ ";
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-medium);
  margin-top: var(--space-medium);
}

.contact-links .button svg,
.contact-links .button__icon {
  color: inherit;
}

.contact-info {
  color: var(--color-terminal-black);
  display: grid;
  gap: var(--space-small);
  list-style: none;
  margin-top: var(--space-large);
}

.page-panel {
  display: grid;
  gap: var(--space-large);
  justify-items: center;
  text-align: center;
}

.page-panel__text {
  color: var(--color-terminal-white);
  max-width: 62ch;
}

.pdf-preview {
  background: var(--color-background-storm);
  border: 1px solid rgba(var(--rgb-terminal-black), 0.8);
  border-radius: 0.4em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.3),
    0 0.6em 2.4em -1.6em rgba(var(--rgb-black), 0.35);
  height: min(72vh, 54em);
  overflow: hidden;
  position: relative;
  width: min(100%, 52em);
}

.pdf-preview__pages {
  display: grid;
  gap: var(--space-large);
  height: 100%;
  justify-items: center;
  overflow: auto;
  padding: var(--space-large) var(--space-large) 4.5em;
  scrollbar-color: var(--color-terminal-black) transparent;
  scrollbar-width: thin;
}

.pdf-preview__page {
  background: var(--color-white);
  box-shadow: 0 0.35em 1.4em rgba(var(--rgb-black), 0.3);
  display: block;
  height: auto;
  max-width: 100%;
}

.pdf-preview__status {
  background: rgba(var(--rgb-background-night), 0.9);
  border: 1px solid rgba(var(--rgb-terminal-black), 0.8);
  border-radius: 999em;
  bottom: var(--space-medium);
  color: var(--color-terminal-white);
  font-size: var(--font-size-small);
  font-weight: 700;
  left: 50%;
  padding: 0.45em 0.85em;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
}

.pdf-preview__message {
  align-self: center;
  color: var(--color-terminal-white);
  padding: var(--space-large);
  text-align: center;
}

.section__card {
  background: var(--color-background-storm);
  border-radius: 0.4em;
  box-shadow:
    0 0 0 1px rgba(var(--rgb-black), 0.3),
    0 0.3em 2em -1.2em rgba(var(--rgb-black), 0.1),
    0 0.6em 2.4em -1.6em rgba(var(--rgb-black), 0.2);
  color: var(--color-terminal-white);
  padding: var(--space-large);
}

.section__card-header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-small) var(--space-medium);
  justify-content: space-between;
  margin-bottom: var(--space-small);
}

.section__card h3 {
  color: var(--color-terminal-cyan);
  font-size: var(--font-size-medium);
  font-weight: 700;
}

.section__meta {
  color: var(--color-terminal-black);
  font-size: var(--font-size-small);
  font-weight: 600;
}

.section__company {
  color: var(--color-terminal-blue);
  font-weight: 700;
  margin-bottom: var(--space-small);
}

.skills {
  display: grid;
  gap: var(--space-large);
}

@media (min-width: 48em) {
  .skills {
    grid-template-columns: repeat(3, 1fr);
  }
}

.skills__group h3 {
  color: var(--color-terminal-cyan);
  font-size: var(--font-size-medium);
  font-weight: 700;
  margin-bottom: var(--space-small);
}

.skills__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-small);
  list-style: none;
}

.skills__list li {
  background: rgba(var(--rgb-terminal-blue), 0.15);
  border-radius: 0.3em;
  color: var(--color-terminal-blue);
  font-weight: 600;
  padding: 0.3em 0.6em;
}

.contact-form {
  display: grid;
  gap: var(--space-medium);
  margin-top: var(--space-medium);
}

.contact-form__field {
  display: grid;
  gap: var(--space-small);
}

.contact-form__field span {
  color: var(--color-terminal-cyan);
  font-weight: 700;
}

.contact-form__field input,
.contact-form__field textarea {
  background: var(--color-background-night);
  border: 1px solid rgba(var(--rgb-terminal-black), 0.6);
  border-radius: 0.4em;
  color: var(--color-terminal-white);
  font-family: var(--font-family);
  font-size: inherit;
  padding: 0.75em 1em;
  transition: border-color var(--transition);
  width: 100%;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  border-color: var(--color-terminal-blue);
  outline: none;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: var(--color-terminal-black);
}

.contact-form__submit {
  justify-self: start;
}

.contact-form__alt {
  color: var(--color-terminal-black);
  font-size: var(--font-size-small);
  margin-top: var(--space-medium);
}