.content-page {
  background: var(--bg);
}

.content-main {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.content-main > h1 {
  max-width: 18ch;
  margin: 0 0 1.25rem;
  color: var(--text);
  font-size: clamp(2.35rem, 4.6vw, 4.2rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.content-main .lede {
  max-width: 74ch;
  margin: 0 0 3rem;
  color: var(--muted);
  font-size: clamp(1.08rem, 2vw, 1.28rem);
}

.content-main .section {
  padding-block: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}

.content-main h2 {
  margin: 0 0 1.25rem;
  color: var(--lime);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.content-main p,
.content-main li {
  color: var(--muted);
}

.content-main strong {
  color: var(--text);
}

.content-main table {
  display: table;
  width: 100%;
  margin-top: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 1rem;
  background: var(--panel);
}

.content-main th,
.content-main td {
  padding: 1rem 1.1rem;
  border: 0;
  text-align: left;
  vertical-align: top;
}

.content-main th {
  color: var(--text);
  background: rgba(183, 255, 82, .08);
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.content-main tr + tr td {
  border-top: 1px solid var(--line);
}

.content-main td:first-child {
  width: 24%;
  color: var(--text);
  font-weight: 750;
}

.content-main code {
  padding: .12rem .35rem;
  border-radius: .35rem;
  color: var(--lime);
  background: rgba(183, 255, 82, .09);
}

.content-main .callout {
  margin-top: 1.4rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(183, 255, 82, .25);
  border-left: 4px solid var(--lime);
  border-radius: .8rem;
  color: var(--muted);
  background: rgba(183, 255, 82, .06);
}

.content-main .callout-yellow {
  border-left-color: var(--yellow);
}

.content-footer-note {
  padding-block: 2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
}

.profile-grid,.contact-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:clamp(2rem,7vw,6rem);align-items:start}
.profile-photo{width:min(100%,240px);aspect-ratio:3/4;object-fit:cover;object-position:center 20%;justify-self:center;border:1px solid var(--line);border-radius:.85rem;box-shadow:var(--shadow)}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.value-card{padding:1.4rem;border:1px solid var(--line);border-radius:1rem;background:var(--surface)}
.value-card h3{margin:0 0 .55rem;color:var(--text)}.value-card p{margin:0}
.contact-form{display:grid;gap:.7rem;padding:clamp(1.25rem,4vw,2.25rem);border:1px solid var(--line);border-radius:1.25rem;background:var(--surface)}
.contact-form label{margin-top:.55rem;color:var(--text);font-weight:750}
.contact-form input,.contact-form textarea{width:100%;padding:.85rem 1rem;border:1px solid #547565;border-radius:.6rem;color:var(--text);background:var(--bg-deep)}
.contact-form button{width:fit-content;margin-top:.75rem;padding:.8rem 1.25rem;border:0;border-radius:.55rem;color:var(--bg-deep);background:var(--lime);font-weight:850;cursor:pointer}
.form-error{min-height:1.5em;color:#ffaaa8}.form-success{min-height:1.5em;color:var(--mint)}
.contact-note{padding:1.2rem;border-left:4px solid var(--lime);background:rgba(183,255,82,.06)}

@media (max-width: 760px) {
  .profile-grid,.contact-grid,.value-grid{grid-template-columns:1fr}
  .content-main table,
  .content-main thead,
  .content-main tbody,
  .content-main th,
  .content-main td,
  .content-main tr {
    display: block;
  }

  .content-main thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .content-main tr + tr {
    border-top: 1px solid var(--line);
  }

  .content-main tr + tr td {
    border-top: 0;
  }

  .content-main td,
  .content-main td:first-child {
    width: 100%;
    padding: .75rem 1rem;
  }

  .content-main td:first-child {
    padding-top: 1.15rem;
    color: var(--lime);
  }

  .content-main td:last-child {
    padding-bottom: 1.15rem;
  }
}