/* =========================================================
   EDUCATION SECTION
========================================================= */

.education {
  background: #dce9e4;
}


/* ---------------------------------------------------------
   Heading
--------------------------------------------------------- */

.education-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 50px;
  margin-bottom: 60px;
}

.education-head h2 {
  font-size: clamp(58px, 7vw, 98px);
  line-height: .86;
  letter-spacing: -.07em;
  margin: 0;
}

.education-head h2 em {
  color: #e45135;
}

.education-head p {
  max-width: 410px;
  color: #536c6c;
}


/* ---------------------------------------------------------
   Degree Grid
--------------------------------------------------------- */

.degrees {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}


/* ---------------------------------------------------------
   Degree Cards
   Default card = MS + MTech
--------------------------------------------------------- */

.degree {
  width: 100%;
  min-width: 0;
  min-height: 500px;
  height: 100%;
  padding: 32px;

  background: #f5f1e7;
  color: #18383c;

  border: 1px solid rgba(24, 56, 60, .10);
  border-radius: 24px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  position: relative;
  overflow: hidden;

  box-shadow:
    0 2px 4px rgba(21, 44, 49, .02),
    0 14px 40px rgba(21, 44, 49, .055);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.degree:hover {
  transform: translateY(-6px);

  border-color: rgba(21, 44, 49, .17);

  box-shadow:
    0 4px 8px rgba(21, 44, 49, .03),
    0 22px 50px rgba(21, 44, 49, .09);
}


/* ---------------------------------------------------------
   PhD Card
   Strongest visual card
--------------------------------------------------------- */

.degree-main {
  background: #24484b;
  color: #f7f4ec;

  border-color: rgba(255, 255, 255, .08);
}


/* ---------------------------------------------------------
   BS Physics Card
   Quiet muted sage
--------------------------------------------------------- */

.degree-last {
  background: #d4e1dc;
  color: #18383c;

  border-color: rgba(24, 56, 60, .10);
}


/* ---------------------------------------------------------
   Card Header
--------------------------------------------------------- */

.degree-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;

  font: 10px "DM Mono", monospace;
}

.degree-top i {
  flex-shrink: 0;

  font-style: normal;

  border: 1px solid currentColor;
  border-radius: 100px;

  padding: 3px 7px;
}


/* ---------------------------------------------------------
   Labels / Accents
--------------------------------------------------------- */

.degree small {
  font: 10px "DM Mono", monospace;
  letter-spacing: .1em;

  color: #d95f45;
}

/* PhD accent */
.degree-main small {
  color: #a9cec3;
}

/* BS accent */
.degree-last small {
  color: #496b68;
}


/* ---------------------------------------------------------
   Degree Titles
--------------------------------------------------------- */

.degree h3 {
  font-size: clamp(26px, 2.7vw, 40px);
  line-height: 1.05;
  letter-spacing: -.045em;

  margin: 10px 0 16px;
}

.degree p {
  font-size: 14px;
  color: inherit;
  opacity: .72;
}


/* ---------------------------------------------------------
   Thesis / Focus
--------------------------------------------------------- */

.thesis {
  border-top: 1px solid currentColor;
  padding-top: 18px;
}

.thesis p {
  font-family: "Instrument Serif", serif;
  font-size: 20px;
  line-height: 1.25;

  margin: 8px 0 0;
}


/* ---------------------------------------------------------
   Dual Degree Card
--------------------------------------------------------- */

.degree-dual .degree-content {
  margin: 14px 0;
}

.degree-dual .dual-degrees {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    1px
    minmax(0, 1fr);

  gap: 20px;
  align-items: stretch;

  margin: 16px 0 18px;
}

.dual-degree {
  min-width: 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.dual-degree .degree-code {
  font: 500 11px "DM Mono", monospace;
  letter-spacing: .08em;

  color: #d95f45;

  margin-bottom: 7px;
}

.dual-degree h3 {
  margin: 0;

  font-size: clamp(24px, 2.1vw, 34px);
  line-height: 1;
  letter-spacing: -.045em;

  overflow-wrap: normal;
  word-break: normal;
}

.dual-divider {
  width: 1px;

  background: rgba(24, 56, 60, .18);
}

.degree-school {
  margin: 0;
  max-width: 100%;
}