.site-header nav [aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.careers {
  padding-bottom: clamp(58px, 8vw, 112px);
}

.careers-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: end;
  gap: clamp(28px, 7vw, 110px);
  padding-block: clamp(48px, 9vw, 130px) clamp(44px, 7vw, 97px);
}
.careers-intro h1 {
  margin-bottom: 19px;
  font-size: clamp(3.55rem, 9vw, 8.25rem);
  line-height: .98;
  letter-spacing: -.078em;
}
.careers-intro > div:first-child p {
  max-width: 43ch;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
}

.careers-status {
  padding: clamp(23px, 3vw, 41px);
  border-radius: 5px;
  background: var(--dark);
  color: var(--paper);
}
.careers-status .label { color: #e2c5b4; }
.careers-status h2 {
  margin-block: 10px;
  font-size: clamp(1.65rem, 3.1vw, 3.25rem);
  letter-spacing: -.058em;
}
.careers-status h2 span { color: var(--light-accent); }
.careers-status p:last-child {
  max-width: 34ch;
  color: #deddd5;
}

.role-section {
  padding-top: clamp(26px, 4vw, 51px);
  border-top: 1px solid var(--line);
}
.role-section > h2 {
  margin-bottom: clamp(18px, 3vw, 35px);
  font-size: clamp(2.05rem, 4.5vw, 4.05rem);
}
.role-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(14px, 2vw, 28px);
}
.role {
  display: grid;
  min-width: 0;
  padding: clamp(18px, 3vw, 38px);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #f8f6f1;
}
.role-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
}
.role h3 {
  margin-top: 6px;
  font-size: clamp(1.52rem, 3vw, 2.65rem);
  line-height: 1.1;
  letter-spacing: -.065em;
}
.role .label, .role > p, .role-details { color: var(--muted); }
.role > p { margin-block: 15px 20px; }
.role-status {
  flex: none;
  padding: 5px 9px;
  border: 1px solid #d7b6a9;
  border-radius: 3px;
  background: #faefe9;
  color: #813923;
  font-size: .77rem;
  font-weight: 700;
}

.role details { border-top: 1px solid var(--line); }
.role summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: .92rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.role summary::-webkit-details-marker { display: none; }
.role summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 2px;
  margin-top: -4px;
  border-right: 1px solid;
  border-bottom: 1px solid;
  transform: rotate(45deg);
}
.role details[open] summary::after {
  margin-top: 4px;
  transform: rotate(225deg);
}
.role summary:hover, .role details[open] summary { color: var(--accent); }
.role-details { display: grid; gap: 15px; padding-top: 7px; }
.role-details h4 {
  margin: 0 0 5px;
  color: var(--ink);
  font-size: .96rem;
}
.role-details ul { margin: 0; padding-left: 1.25em; }
.role-details li + li { margin-top: 5px; }

@media (max-width: 740px) {
  .careers-intro, .role-list { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .careers-intro { gap: 22px; }
}