/* ================================================================
   Join Us / Openings — al-folio v1.x
   File: assets/css/join.css

   Design: match the existing academic homepage (white, dark text,
   bright magenta accent sampled from the publication badges: #B509AC).
   Works with the existing _includes/openings/page.liquid, without
   changing _pages/openings.md or _data/openings_*.yml.

   All selectors are scoped to #join-page so the site's navigation,
   publication list, footer and other pages remain unchanged.
   ================================================================ */

#join-page {
  /* To change the accent globally, edit just these two values. */
  --op-red: #b509ac;
  --op-red-dark: #92018a;
  --op-purple: #b509ac;
  --op-ink: #151515;
  --op-muted: #505560;
  --op-line: #e5e5e9;
  --op-surface: #ffffff;
  --op-soft: #fafafa;
  --op-soft-2: #f6f6f8;
  --op-shadow: 0 8px 24px rgba(35, 32, 42, 0.065);

  color: var(--op-ink);
  background: transparent;
  font-size: 16.5px;
  line-height: 1.8;
  letter-spacing: 0;
  padding-bottom: 32px;
  overflow-wrap: break-word;
}

#join-page,
#join-page *,
#join-page *::before,
#join-page *::after {
  box-sizing: border-box;
}

#join-page .op-page,
#join-page .op-shell {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

#join-page h1,
#join-page h2,
#join-page h3,
#join-page h4,
#join-page p {
  margin-top: 0;
}

#join-page a {
  text-decoration: none;
  color: inherit;
}

#join-page a:focus-visible,
#join-page summary:focus-visible {
  outline: 3px solid var(--op-red);
  outline-offset: 4px;
}

#join-page section,
#join-page details {
  scroll-margin-top: 105px;
}

/* 1. Hero — remove the decorative AI illustration entirely.
   The template can remain unchanged; CSS suppresses the illustration. */
#join-page .op-hero {
  padding: 22px 0 43px;
  border: 0;
  border-bottom: 1px solid var(--op-line);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

#join-page .op-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

#join-page .op-hero-copy {
  width: 100%;
  max-width: 850px;
}

#join-page .op-local-switch {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 25px;
  color: var(--op-muted);
  font-size: 14px;
  font-weight: 650;
}

#join-page .op-local-switch a {
  color: var(--op-muted);
  border-bottom: 1px solid transparent;
}

#join-page .op-local-switch [aria-current="page"],
#join-page .op-local-switch a:hover {
  color: var(--op-red);
}

#join-page .op-local-switch a:hover {
  border-bottom-color: currentColor;
}

#join-page .op-kicker,
#join-page .op-section-number {
  color: var(--op-red);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.55;
  letter-spacing: 0.065em;
}

#join-page .op-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
}

#join-page .op-kicker-line {
  display: inline-block;
  flex: 0 0 25px;
  width: 25px;
  height: 3px;
  background: var(--op-red);
}

#join-page .op-hero h1 {
  margin: 0 0 19px;
  color: var(--op-ink);
  font-size: clamp(34px, 4.8vw, 46px);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.035em;
}

#join-page .op-hero h1 em {
  color: var(--op-red);
  font-style: normal;
}

#join-page .op-lead {
  margin: 0;
  max-width: 810px;
  color: var(--op-muted);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.85;
}

#join-page .op-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 25px 0 0;
}

#join-page .op-highlights span {
  display: inline-flex;
  align-items: center;
  min-height: 35px;
  padding: 6px 13px;
  border: 1px solid var(--op-line);
  border-radius: 999px;
  background: var(--op-surface);
  color: var(--op-muted);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
}

#join-page .op-highlights strong {
  margin-right: 4px;
  color: var(--op-red);
  font-weight: 800;
}

#join-page .op-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 27px;
}

#join-page .op-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 19px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 690;
  line-height: 1.45;
  transition: background-color .17s ease, border-color .17s ease, transform .17s ease;
}

#join-page .op-button:hover { transform: translateY(-2px); }

#join-page .op-button-primary {
  background: var(--op-red);
  border: 1px solid var(--op-red);
  color: #fff;
}

#join-page a.op-button-primary,
#join-page a.op-button-primary:visited { color: #fff; }

#join-page .op-button-primary:hover {
  background: var(--op-red-dark);
  border-color: var(--op-red-dark);
}

#join-page .op-button-plain {
  border: 1px solid var(--op-line);
  background: var(--op-surface);
  color: var(--op-ink);
}

#join-page .op-button-plain:hover {
  border-color: var(--op-red);
  color: var(--op-red);
}

/* 2. Section headings */
#join-page .op-section { padding: 58px 0; }

#join-page .op-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  margin-bottom: 25px;
}

#join-page .op-section-number { margin: 0 0 10px; }

#join-page .op-section h2 {
  margin: 0;
  color: var(--op-ink);
  font-size: clamp(27px, 3.5vw, 33px);
  font-weight: 720;
  line-height: 1.36;
  letter-spacing: -0.024em;
}

#join-page .op-section-heading > p {
  max-width: 350px;
  margin: 0 0 3px;
  color: var(--op-muted);
  font-size: 15.5px;
  line-height: 1.8;
}

#join-page .op-under-note {
  margin: 19px 0 0;
  color: var(--op-muted);
  font-size: 15px;
  line-height: 1.85;
}

/* 3. Research cards — no rose wash or decorative bottom bar */
#join-page .op-research-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
}

#join-page .op-research-card,
#join-page .op-research-main {
  position: relative;
  min-height: 226px;
  padding: 25px 27px 27px;
  border: 1px solid var(--op-line);
  border-radius: 14px;
  background: var(--op-surface);
  transition: border-color .17s ease, box-shadow .17s ease;
}

#join-page .op-research-card:hover {
  border-color: var(--op-red);
  box-shadow: var(--op-shadow);
}

#join-page .op-research-main::after { display: none; }

#join-page .op-research-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#join-page .op-research-num {
  color: var(--op-red);
  font-size: 15px;
  font-weight: 800;
}

#join-page .op-research-category {
  color: var(--op-muted);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: right;
}

#join-page .op-research-card h3 {
  margin: 25px 0 11px;
  color: var(--op-ink);
  font-size: 22px;
  font-weight: 720;
  line-height: 1.43;
  letter-spacing: -0.015em;
}

#join-page .op-research-card p {
  margin: 0;
  color: var(--op-muted);
  font-size: 16.5px;
  line-height: 1.86;
}

/* 4. Position overview and expandable role details */
#join-page .op-section-positions {
  padding: 57px 0 58px;
  border: 0;
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
  border-radius: 0;
  background: transparent;
}

#join-page .op-role-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

#join-page .op-role-card {
  display: flex;
  flex-direction: column;
  min-height: 256px;
  padding: 20px 18px 17px;
  border: 1px solid var(--op-line);
  border-radius: 13px;
  background: var(--op-surface);
  transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease;
}

#join-page .op-role-card:hover {
  transform: translateY(-3px);
  border-color: var(--op-red);
  box-shadow: var(--op-shadow);
}

#join-page .op-role-icon {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 8px;
  background: var(--op-soft-2);
  color: var(--op-red);
  font-size: 14px;
  font-weight: 800;
}

#join-page .op-role-card h3 {
  margin: 18px 0 9px;
  color: var(--op-ink);
  font-size: 18px;
  font-weight: 730;
  line-height: 1.46;
}

#join-page .op-role-card p {
  flex: 1;
  margin: 0 0 19px;
  color: var(--op-muted);
  font-size: 14.5px;
  line-height: 1.72;
}

#join-page .op-role-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 13px;
  border-top: 1px solid var(--op-line);
  color: var(--op-ink);
  font-size: 14px;
  font-weight: 730;
  line-height: 1.5;
}

#join-page .op-role-foot span:last-child {
  color: var(--op-red);
  font-size: 20px;
  line-height: 1;
}

#join-page .op-detail-intro {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px 22px;
  margin: 38px 0 15px;
}

#join-page .op-detail-intro h3 {
  margin: 0;
  color: var(--op-ink);
  font-size: 22px;
  font-weight: 720;
}

#join-page .op-detail-intro p {
  margin: 0;
  color: var(--op-muted);
  font-size: 14.5px;
  line-height: 1.8;
}

#join-page .op-details-stack { display: grid; gap: 11px; }

#join-page .op-role-detail {
  overflow: hidden;
  border: 1px solid var(--op-line);
  border-radius: 11px;
  background: var(--op-surface);
}

#join-page .op-role-detail summary {
  display: flex;
  align-items: center;
  gap: 17px;
  min-height: 81px;
  padding: 17px 22px;
  cursor: pointer;
  list-style: none;
}

#join-page .op-role-detail summary::-webkit-details-marker { display: none; }

#join-page .op-detail-number {
  color: var(--op-red);
  font-size: 15px;
  font-weight: 800;
}

#join-page .op-detail-title {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

#join-page .op-detail-title b {
  color: var(--op-ink);
  font-size: 18px;
  font-weight: 730;
  line-height: 1.45;
}

#join-page .op-detail-title small {
  color: var(--op-muted);
  font-size: 14px;
  line-height: 1.55;
}

#join-page .op-plus {
  display: block;
  position: relative;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--op-soft-2);
}

#join-page .op-plus::before,
#join-page .op-plus::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 7px;
  width: 12px;
  height: 2px;
  border-radius: 3px;
  background: var(--op-red);
}

#join-page .op-plus::after {
  transform: rotate(90deg);
  transition: transform .16s ease;
}

#join-page .op-role-detail[open] { border-color: var(--op-red); }
#join-page .op-role-detail[open] summary { background: var(--op-soft); }
#join-page .op-role-detail[open] .op-plus::after { transform: rotate(0); }

#join-page .op-detail-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 30px;
  padding: 25px 27px 28px;
  border-top: 1px solid var(--op-line);
}

#join-page .op-detail-col h4 {
  margin: 0 0 12px;
  color: var(--op-red);
  font-size: 16px;
  font-weight: 740;
  letter-spacing: 0;
}

#join-page .op-detail-col ul {
  margin: 0;
  padding-left: 22px;
  color: var(--op-muted);
  font-size: 15.5px;
  line-height: 1.88;
}

#join-page .op-detail-col li { margin-bottom: 8px; }

#join-page .op-detail-note {
  display: flex;
  grid-column: 1 / -1;
  gap: 13px;
  padding: 16px 19px;
  border: 1px solid var(--op-line);
  border-radius: 9px;
  background: var(--op-soft);
  color: var(--op-muted);
  font-size: 15px;
  line-height: 1.8;
}

#join-page .op-detail-note strong {
  flex-shrink: 0;
  color: var(--op-ink);
}

#join-page .op-detail-note p { margin: 0; }

#join-page .op-compensation {
  display: flex;
  grid-column: 1 / -1;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  padding: 16px 19px;
  border: 1px solid var(--op-line);
  border-radius: 9px;
  background: var(--op-soft);
  color: var(--op-muted);
  font-size: 14.5px;
  line-height: 1.75;
}

#join-page .op-compensation-label {
  margin-right: 8px;
  color: var(--op-ink);
  font-size: 14px;
  font-weight: 730;
}

#join-page .op-compensation strong {
  color: var(--op-red);
  font-size: 18px;
  font-weight: 780;
}

/* 5. Research culture */
#join-page .op-values-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
}

#join-page .op-value-item {
  margin-right: 16px;
  padding: 24px 15px 26px 0;
  border-right: 1px solid var(--op-line);
}

#join-page .op-value-item:last-child {
  margin-right: 0;
  border-right: 0;
}

#join-page .op-value-counter {
  color: var(--op-red);
  font-size: 14px;
  font-weight: 780;
}

#join-page .op-value-item h3 {
  margin: 14px 0 9px;
  color: var(--op-ink);
  font-size: 17px;
  font-weight: 730;
  line-height: 1.45;
}

#join-page .op-value-item p {
  margin: 0;
  color: var(--op-muted);
  font-size: 14px;
  line-height: 1.75;
}

/* Optional legacy note: hidden if an older Liquid template remains in use. */

/* 6. Research environment */
#join-page .op-section-support {
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
}

#join-page .op-support-grid {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 42px;
}

#join-page .op-support-lead {
  margin: 17px 0 0;
  color: var(--op-muted);
  font-size: 16px;
  line-height: 1.85;
}

#join-page .op-support-items { display: grid; gap: 14px; }

#join-page .op-support-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--op-line);
}

#join-page .op-support-item:last-child { border: 0; }

#join-page .op-support-dot {
  display: block;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: 11px;
  border-radius: 50%;
  background: var(--op-red);
}

#join-page .op-support-item p {
  margin: 0;
  color: var(--op-muted);
  font-size: 16px;
  line-height: 1.84;
}

/* 7. Apply / contact — keep the shortened content from YAML */
#join-page .op-section-apply { padding-bottom: 20px; }

#join-page .op-apply-panel {
  padding: 30px 33px 32px;
  border: 1px solid var(--op-line);
  border-radius: 15px;
  background: var(--op-soft);
}

#join-page .op-apply-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--op-line);
}

#join-page .op-apply-top > div:first-child > p:last-child {
  margin: 13px 0 0;
  color: var(--op-muted);
  font-size: 15.5px;
  line-height: 1.78;
}

#join-page .op-apply-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

#join-page .op-email-label {
  color: var(--op-muted);
  font-size: 13px;
  font-weight: 740;
  letter-spacing: 0.04em;
}

#join-page .op-apply-right a,
#join-page .op-email-obfuscated {
  color: var(--op-red);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.65;
}

#join-page .op-apply-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 31px;
  padding-top: 23px;
}

#join-page .op-apply-body h3 {
  margin: 0 0 9px;
  color: var(--op-ink);
  font-size: 18px;
  font-weight: 720;
}

#join-page .op-apply-body p {
  margin: 0;
  color: var(--op-muted);
  font-size: 15.5px;
  line-height: 1.85;
}

#join-page .op-apply-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 25px;
}

#join-page .op-apply-footer span {
  color: var(--op-muted);
  font-size: 14px;
  line-height: 1.75;
}

/* 8. al-folio's manual dark-mode support */
html[data-theme="dark"] #join-page,
body[data-theme="dark"] #join-page {
  --op-red: #f079e8;
  --op-red-dark: #d94bcf;
  --op-purple: #f079e8;
  --op-ink: #f3f3f5;
  --op-muted: #cfced5;
  --op-line: #44444a;
  --op-surface: #25252a;
  --op-soft: #2b2b30;
  --op-soft-2: #34343b;
  --op-shadow: 0 8px 26px rgba(0, 0, 0, .25);
}

html[data-theme="dark"] #join-page .op-button-primary,
body[data-theme="dark"] #join-page .op-button-primary {
  background: #b509ac;
  border-color: #b509ac;
  color: #fff;
}

html[data-theme="dark"] #join-page .op-button-primary:hover,
body[data-theme="dark"] #join-page .op-button-primary:hover {
  background: #910089;
  border-color: #910089;
}

/* 9. Tablet */
@media (max-width: 900px) {
  #join-page .op-section-heading {
    display: block;
  }

  #join-page .op-section-heading > p {
    max-width: 100%;
    margin: 12px 0 0;
  }

  #join-page .op-role-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #join-page .op-role-card { min-height: 235px; }

  #join-page .op-values-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #join-page .op-value-item:nth-child(3) {
    margin-right: 0;
    border-right: 0;
  }

  #join-page .op-value-item:nth-child(n + 4) {
    border-top: 1px solid var(--op-line);
  }

  #join-page .op-support-grid { gap: 29px; }
}

/* 10. Phones */
@media (max-width: 640px) {
  #join-page { font-size: 16px; }

  #join-page .op-hero {
    padding: 12px 0 33px;
  }

  #join-page .op-local-switch {
    font-size: 14px;
    margin-bottom: 21px;
  }

  #join-page .op-kicker,
  #join-page .op-section-number { font-size: 12.5px; }

  #join-page .op-hero h1 {
    font-size: clamp(29px, 7vw, 36px);
    line-height: 1.34;
  }

  #join-page .op-lead {
    font-size: 16px;
    line-height: 1.85;
  }

  #join-page .op-highlights {
    gap: 7px;
    margin-top: 20px;
  }

  #join-page .op-highlights span {
    padding: 6px 10px;
    font-size: 13px;
  }

  #join-page .op-hero-actions { margin-top: 23px; }
  #join-page .op-button { font-size: 14px; }

  #join-page .op-section { padding: 42px 0; }
  #join-page .op-section h2 { font-size: 27px; }
  #join-page .op-section-heading { margin-bottom: 21px; }
  #join-page .op-section-heading > p { font-size: 15px; }

  #join-page .op-research-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #join-page .op-research-card,
  #join-page .op-research-main {
    min-height: 0;
    padding: 21px 21px 22px;
  }

  #join-page .op-research-card h3 {
    margin: 18px 0 9px;
    font-size: 20px;
  }

  #join-page .op-research-card p { font-size: 16px; }
  #join-page .op-research-category { font-size: 12px; }

  #join-page .op-section-positions { padding: 42px 0; }

  #join-page .op-role-overview { gap: 11px; }
  #join-page .op-role-card {
    min-height: 240px;
    padding: 17px 15px;
  }
  #join-page .op-role-card h3 { font-size: 17px; }
  #join-page .op-role-card p { font-size: 14px; }
  #join-page .op-role-foot { font-size: 13px; }

  #join-page .op-detail-intro {
    display: block;
    margin-top: 31px;
  }
  #join-page .op-detail-intro h3 { font-size: 21px; }
  #join-page .op-detail-intro p { margin-top: 7px; }

  #join-page .op-role-detail summary {
    gap: 12px;
    padding: 15px 16px;
    min-height: 76px;
  }

  #join-page .op-detail-title b { font-size: 17px; }
  #join-page .op-detail-title small { font-size: 13px; }

  #join-page .op-detail-body {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 18px;
  }

  #join-page .op-detail-note,
  #join-page .op-compensation {
    grid-column: 1;
  }

  #join-page .op-detail-col ul { font-size: 15px; }
  #join-page .op-detail-note { display: block; }
  #join-page .op-detail-note p { margin-top: 4px; }

  #join-page .op-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #join-page .op-value-item {
    margin-right: 10px;
    padding-right: 11px;
  }

  #join-page .op-value-item:nth-child(3) {
    margin-right: 10px;
    border-right: 1px solid var(--op-line);
  }

  #join-page .op-value-item:nth-child(even) {
    margin-right: 0;
    padding-left: 9px;
    border-right: 0;
  }

  #join-page .op-value-item:nth-child(n + 3) {
    border-top: 1px solid var(--op-line);
  }

  #join-page .op-value-item h3 { font-size: 16px; }
  #join-page .op-value-item p { font-size: 14px; }

  #join-page .op-support-grid {
    grid-template-columns: 1fr;
    gap: 23px;
  }

  #join-page .op-apply-panel { padding: 24px 20px; }
  #join-page .op-apply-top { display: block; }
  #join-page .op-apply-right {
    align-items: flex-start;
    margin-top: 19px;
  }

  #join-page .op-apply-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  #join-page .op-apply-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 430px) {
  #join-page .op-role-overview { grid-template-columns: 1fr; }
  #join-page .op-role-card { min-height: 0; }
  #join-page .op-role-card p { margin-bottom: 20px; }
  #join-page .op-hero-actions { gap: 9px; }
  #join-page .op-highlights span { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  #join-page .op-button,
  #join-page .op-role-card,
  #join-page .op-research-card,
  #join-page .op-plus::after {
    transition: none;
  }
}

@media print {
  
  #join-page .op-hero-actions,
  #join-page .op-button { display: none !important; }
  #join-page .op-section { padding: 17px 0; }
  #join-page .op-detail-body { display: block; }
  #join-page .op-role-detail { break-inside: avoid; }
}