/* Semantic color system and progressive disclosure for the portfolio. */
:root {
  --blue-pale: #c7d9e3;
  --project-bg: #e8c49b;
}

.experience-section .section-heading h2 {
  color: var(--ink);
}

.experience-section .section-heading.light .eyebrow {
  color: var(--orange);
}

.experience-grid {
  grid-template-rows: repeat(2, minmax(190px, auto));
}

.experience-card {
  padding: clamp(24px, 3.6vw, 38px);
}

.experience-card h3 {
  font-size: clamp(23px, 2.7vw, 36px);
  line-height: 1.3;
}

.experience-card p {
  font-size: 14px;
}

.card-meta span {
  font-size: 12px;
}

.projects-section {
  background: var(--project-bg);
  color: var(--ink);
}

.projects-section .section-heading .eyebrow {
  color: var(--orange);
}

.project-grid {
  gap: 16px;
}

.project-card {
  --project-accent: var(--orange);
  position: relative;
  border-top: 4px solid var(--project-accent);
}

.project-card[data-category="media"] {
  --project-accent: #b8755d;
}

.project-card[data-category="communication"] {
  --project-accent: #648ba7;
}

.project-card[data-category="digital"] {
  --project-accent: #789582;
}

.project-card .project-image {
  height: 155px;
}

.project-info {
  padding: 17px 18px 19px;
}

.project-info h3 {
  font-size: 20px;
  line-height: 1.4;
}

.project-info .project-keywords {
  color: var(--project-accent) !important;
}

.project-open {
  font-size: 13px;
  border-bottom: 1px solid currentColor;
}

.projects-section:not(.projects-expanded) .project-extra {
  display: none;
}

.projects-section .filter[data-filter="media"].active {
  background: #b8755d;
  border-color: #b8755d;
}

.projects-section .filter[data-filter="communication"].active {
  background: #648ba7;
  border-color: #648ba7;
}

.projects-section .filter[data-filter="digital"].active {
  background: #789582;
  border-color: #789582;
}

.project-more-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
}

.project-more-wrap[hidden] {
  display: none;
}

.project-more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border: 1px solid var(--orange);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.project-more:hover,
.project-more:focus-visible {
  background: var(--orange);
  color: #fff;
}

.project-more b {
  color: var(--orange);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.project-more:hover b,
.project-more:focus-visible b {
  color: #fff;
}

.contact-section {
  background: var(--blue-pale);
  color: var(--blue-dark);
}

.contact-section h2,
.contact-section h2 em {
  color: var(--blue-dark);
}

.contact-section h2 em {
  color: var(--blue);
}

.contact-copy {
  color: rgba(41, 73, 90, 0.76);
}

.contact-actions {
  border-top-color: rgba(41, 73, 90, 0.24);
}

.contact-line {
  color: var(--blue-dark);
  border-bottom-color: rgba(41, 73, 90, 0.24);
}

.contact-line span,
.contact-line i {
  color: var(--orange);
}

.contact-line small {
  color: rgba(41, 73, 90, 0.68);
}

@media (max-width: 800px) {
  .experience-grid {
    grid-template-rows: none;
  }

  .project-card .project-image {
    height: 165px;
  }

  .project-more-wrap {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-more {
    transition: none;
  }
}