/* Recruitment shares the site's quiet palette, with its own numbered layout. */
.join-page .page > .section { max-width:1160px; margin-inline:auto; padding-inline:32px; padding-bottom:80px }
.join-page .eyebrow { color:#6b7280; font-size:11px; letter-spacing:1.6px }
.join-page .section-header { margin-bottom:28px; scroll-margin-top:32px }
.join-page .s-title, .join-page .join-intro h2, .join-offer h3 { font:400 28px/1.35 var(--F-display); letter-spacing:0; color:#1f2937 }
.join-page .section-header p { color:#4b5563; font-size:16px; line-height:1.85; max-width:820px }
.join-page .join-intro { background:transparent; padding:0; border:0; border-radius:0; margin-bottom:64px }
.join-lead { padding-top:12px !important }
.join-lead h1 { font:400 clamp(36px,5vw,58px)/1.15 var(--F-display); letter-spacing:-1.2px; color:#1f2937; margin:16px 0 28px }
.join-page .join-lead h2 { font:600 16px/1.6 var(--F-body); margin-bottom:10px }
.join-page .join-lead p { max-width:850px; color:#4b5563; font-size:17px; line-height:1.9 }
.join-jump { display:flex; flex-wrap:wrap; gap:16px 32px; padding:24px 0; margin-top:28px; border-block:1px solid #d1d5db }
.join-jump a { color:#374151; font-size:14px; display:inline-flex; align-items:center; gap:10px }
.join-jump a:hover { color:#111827; text-decoration:underline; text-underline-offset:5px }
.join-jump span { font:400 12px/1.5 var(--F-body); color:#6b7280 }
.join-page .postdoc-grid { display:block; margin-bottom:56px; border-top:1px solid #d1d5db }
.join-page .postdoc-card { padding:32px 0 36px; border:0; border-bottom:1px solid #d1d5db; border-radius:0; background:transparent; box-shadow:none; overflow:visible }
.join-page .postdoc-card:hover { transform:none }
.join-page .postdoc-card::before { content:none }
.position-heading { display:grid; grid-template-columns:170px minmax(0,1fr); column-gap:32px; align-items:baseline; margin-bottom:22px }
.join-page .postdoc-num { font-size:11px; color:#6b7280; letter-spacing:1px; margin:0 }
.join-page .postdoc-title { font:400 25px/1.35 var(--F-display); color:#1f2937; letter-spacing:0; margin:0 0 14px }
.join-page .postdoc-tags { grid-column:2; gap:8px 18px; margin:0 }
.join-page .postdoc-tag { background:none; border-radius:0; padding:0; font-size:12px; font-weight:400; color:#6b7280 }
.position-body { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:40px; margin-left:202px }
.join-page .postdoc-desc { font-size:15px; line-height:1.85; color:#4b5563; margin-bottom:16px }
.position-research p:last-child { margin-bottom:0 }
.position-requirements { border-left:1px solid #e5e7eb; padding-left:24px }
.position-requirements h4 { font:600 12px/1.6 var(--F-body); color:#374151; margin-bottom:10px }
.join-page .req-list li { color:#4b5563; font-size:14px; line-height:1.8; font-weight:400; gap:10px; padding:4px 0 }
.join-page .req-list li::before { content:'·'; color:#9ca3af; font-size:16px }
.join-page .join-notes { display:grid; grid-template-columns:230px minmax(0,1fr); gap:36px; padding-bottom:32px; border-bottom:1px solid #d1d5db }
.join-page .join-notes h2 { font-size:23px; margin:0 }
/* Keep the invitation brief, with application guidance in a dialog. */
.join-connect { margin:76px 0 0; padding:0; scroll-margin-top:32px }
.join-connect-header { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:16px 24px; margin-bottom:24px }
.join-page .join-connect #opportunities-title { font:400 clamp(32px,4vw,42px)/1.2 var(--F-display); letter-spacing:-.02em; color:#1f2937; margin:0 }
.join-welcome, .join-apply > p { margin:0 0 24px; font-size:19px; line-height:1.85; color:#374151; text-wrap:pretty }
.join-apply { scroll-margin-top:32px }
.join-page .join-email { display:inline-block; margin:0 0 28px; font:400 clamp(20px,3vw,28px)/1.6 var(--F-body); color:#0056a6; overflow-wrap:anywhere; text-decoration:none; border-bottom:1px solid #000 }
.join-email:hover { border-color:#000 }
.join-guidelines-trigger { display:inline-flex; align-items:center; gap:10px; width:fit-content; border:0; padding:0; margin-left:auto; background:transparent; cursor:pointer; color:#858d96; font:400 18px/1.8 var(--F-body); text-align:right; transition:color .3s }
.join-guidelines-trigger > span { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px }
.join-guidelines-trigger:hover, .join-guidelines-trigger:focus-visible { color:#0056a6 }
.join-details-molecule { position:relative; left:-4px; width:44px; height:44px; flex-shrink:0; transform-origin:center; animation:join-molecule-spin 5s linear infinite; animation-play-state:paused }
.join-guidelines-trigger:hover .join-details-molecule, .join-guidelines-trigger:focus-visible .join-details-molecule { animation-play-state:running }
@keyframes join-molecule-spin { to { transform:rotate(360deg) } }
@media(prefers-reduced-motion:reduce) { .join-guidelines-trigger { transition:none } .join-details-molecule { animation:none } }
.join-guidelines-trigger:focus-visible { outline:2px solid #64748b; outline-offset:5px }
.join-details-body p { margin:0 0 24px; font-size:18px; line-height:1.8; color:#4b5563 }
.join-details-body .join-details-item { position:relative; padding-left:27px }
.join-details-item::before { position:absolute; left:0; top:1px }
.join-details-body p:last-child { margin-bottom:0 }
.join-details-body strong { font-weight:600; color:#374151 }
@media(max-width:600px) {
  .join-connect { margin-top:56px }
  .join-welcome, .join-apply > p { font-size:17px }
}
/* Small illustrations give the original six benefits a visual anchor. */
.join-offer { margin-bottom:56px }
.join-offer h3 { margin-bottom:28px }
.join-offer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 36px }
.join-offer-item { display:flex; align-items:flex-start; gap:16px }
.join-offer-item strong { display:block; font-size:14px; color:#374151; margin-bottom:8px; font-weight:600 }
.join-offer-item span { display:block; font-size:14px; color:#6b7280; line-height:1.8 }
.join-offer-art { position:relative; display:grid; place-items:center; flex:0 0 56px; height:60px; color:#36648b; isolation:isolate }
.join-offer-art::before { content:""; position:absolute; z-index:-1; inset:1px -2px 3px; background:#edf2f8; border-radius:43% 57% 60% 40% / 55% 42% 58% 45%; transform:rotate(-12deg) }
.join-offer-item:nth-child(2n) .join-offer-art::before { transform:rotate(18deg); background:#eef3f3 }
.join-offer-item:nth-child(3n) .join-offer-art::before { transform:rotate(-24deg); background:#f0f0f7 }
.join-offer-art svg { width:42px; height:42px }
@media(min-width:601px) and (max-width:900px) {
  .join-offer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
.join-page .cta-box { scroll-margin-top:32px; background:#fff; border:0; border-radius:0; padding:36px; gap:32px; flex-wrap:nowrap; align-items:flex-start; color:#1f2937 }
.join-page .cta-box > div { min-width:0; flex:1 }
.join-page .cta-box h3 { font:400 30px/1.3 var(--F-display); margin-bottom:16px }
.join-page .cta-box p { max-width:680px; font-size:14px; line-height:1.85; color:#4b5563; margin-bottom:12px }
.join-page .cta-email { display:inline-block; font:500 clamp(16px,2.5vw,21px)/1.6 var(--F-body); color:#374151; margin:4px 0 20px; overflow-wrap:anywhere; text-decoration:underline; text-underline-offset:5px }
.join-page .cta-box .btn-primary { flex-shrink:0; background:#374151; color:#fff; box-shadow:none; border-radius:3px; font-size:13px; white-space:nowrap }
.join-page .cta-box .btn-primary:hover { background:#1f2937; transform:none }
.join-page .page a:focus-visible { outline:2px solid #64748b; outline-offset:5px }
@media(max-width:900px) {
  .position-heading { grid-template-columns:140px minmax(0,1fr); column-gap:24px }
  .position-body { margin-left:0; gap:28px }
  .join-page .cta-box { flex-direction:column }
}
@media(max-width:600px) {
  .join-page .page > .section { padding-inline:24px; padding-bottom:48px }
  .join-page .join-intro { margin-bottom:44px }
  .join-lead h1 { letter-spacing:-.5px }
  .join-jump { flex-direction:column; gap:14px }
  .join-page .s-title { font-size:26px }
  .position-heading, .position-body { display:block }
  .join-page .postdoc-num { margin-bottom:12px }
  .join-page .postdoc-title { font-size:24px }
  .position-requirements { margin-top:24px; border-left:0; border-top:1px solid #e5e7eb; padding:18px 0 0 }
  .join-page .join-notes { display:block }
  .join-page .join-notes h2 { margin-bottom:20px }
  .join-offer-grid { grid-template-columns:minmax(0,1fr) }
  .join-page .cta-box { padding:26px 22px }
}

.join-page #postdoctoral-title, .join-page #opportunities-title, .join-page #environment-title { font:400 clamp(30px,3.5vw,36px)/1.15 var(--F-display); margin-bottom:26px }

/* Image cards reveal each position's full description on demand. */
.join-page .postdoc-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch; grid-auto-rows:1fr; border:0 }
.join-page .postdoc-card { padding:0; border:0; border-radius:8px; overflow:hidden; background:#fff; box-shadow:0 1px 3px 0 rgba(0,0,0,.26) }
.position-summary { display:block; cursor:pointer; list-style:none }
.position-summary::-webkit-details-marker { display:none }
.position-summary:focus-visible { outline:3px solid #64748b; outline-offset:-3px }
.position-cover { position:relative; height:240px; background:#374151; overflow:hidden }
.position-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 20%,rgba(0,0,0,.78)) }
.position-cover img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease }
.position-summary:hover .position-cover img { transform:scale(1.035) }
.join-page .position-cover .postdoc-title { position:absolute; z-index:1; bottom:22px; left:22px; right:22px; margin:0; font:400 24px/1.3 var(--F-display); color:#fff }
.position-preview { padding:24px }
.join-page .position-preview .postdoc-num { margin-bottom:16px }
.position-description { margin:0 0 20px; color:#333; font:400 18px/normal var(--F-body); text-align:left }
.join-page .position-toggle, .join-page .position-toggle > span { color:#0056a6 }
.position-toggle { display:inline-flex; align-items:center; gap:8px; font-size:16px }
.position-less, .postdoc-card[open] .position-more { display:none }
.postdoc-card[open] .position-less { display:inline }
.join-page .postdoc-card .position-body { display:block; margin:0; padding:24px; border-top:1px solid #e5e7eb }
.join-page .postdoc-card .position-requirements { margin-top:24px; padding:20px 0 0; border-left:0; border-top:1px solid #e5e7eb }
@media(max-width:900px) {
  .join-page .postdoc-grid { gap:16px }
  .join-page .position-cover .postdoc-title { font-size:21px; left:18px; right:18px }
  .position-preview { padding:18px }
}
@media(max-width:700px) {
  .join-page .postdoc-grid { grid-template-columns:1fr; gap:24px }
  .position-cover { height:240px }
  .join-page .position-cover .postdoc-title { font-size:26px }
}
@media(prefers-reduced-motion:reduce) {
  .position-cover img { transition:none }
  .position-summary:hover .position-cover img { transform:none }
}

/* A spacious reading surface for the three position details. */
.position-summary { width:100%; border:0; padding:0; background:transparent; color:inherit; font:inherit; text-align:left }
.position-dialog { width:min(900px,calc(100% - 80px)); max-width:none; max-height:calc(100dvh - 80px); margin:auto; padding:0; border:0; border-radius:12px; background:#fff; color:#374151; overflow:hidden; box-shadow:0 24px 80px rgba(15,23,42,.18) }
.position-dialog::backdrop { background:rgba(15,23,42,.4); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px) }
.position-dialog-scroll { position:relative; z-index:1; max-height:calc(100dvh - 80px); overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable }
.position-dialog-content { max-width:828px; margin-inline:auto; padding:64px }
.position-dialog-header { margin-bottom:44px }
.position-dialog-brand { display:flex; align-items:center; flex-wrap:wrap; gap:24px 32px; margin:0 0 32px; user-select:none; pointer-events:none }
.position-dialog-brand img { -webkit-user-drag:none; user-select:none }
.position-dialog-logo { display:block; width:220px; max-width:100%; height:auto }
.position-dialog-university-logo { display:block; width:210px; height:auto; flex-shrink:0 }
@media(max-width:600px) { .position-dialog-brand { gap:16px 24px } .position-dialog-logo { width:176px } .position-dialog-university-logo { width:180px } }
.position-dialog h2 { margin:0; font:400 clamp(30px,3.2vw,40px)/1.18 var(--F-display); letter-spacing:-.025em; color:#1f2937; text-wrap:balance }
.position-dialog-close { position:absolute; z-index:2; top:16px; right:20px; display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:#f0f2f4; color:#475569; font:28px/1 var(--F-body); cursor:pointer; transition:background .2s,color .2s }
.position-dialog-close:hover { background:#e2e8f0; color:#111827 }
.position-dialog-close:focus-visible { outline:2px solid #0056a6; outline-offset:3px }
.position-dialog .position-body { display:block; margin:0 }
.position-dialog .position-requirements { margin-top:40px; padding:0; border:0 }
.position-dialog h3 { margin:0 0 18px; font:600 20px/1.4 var(--F-body); letter-spacing:-.02em; color:#1f2937 }
.join-page .position-dialog .postdoc-desc,
.join-page .position-dialog .req-list li { font:400 16px/1.8 var(--F-body); color:#4b5563 }
.join-page .position-dialog .req-list li { padding:6px 0; gap:12px }
/* Reference: http://talent.zju.edu.cn/_upload/tpl/0a/e8/2792/template2792/images/icon_1.gif */
.join-details-item::before,
.join-page .position-dialog .req-list li::before { content:''; width:15px; height:17px; flex:0 0 15px; margin-top:6px; background-color:#0056a6; -webkit-mask:url('../images/icons/zju-double-arrow.gif') center / contain no-repeat; mask:url('../images/icons/zju-double-arrow.gif') center / contain no-repeat }
.position-dialog .position-benefits { padding:28px 32px; border-radius:12px; background:#f5f6f8 }
.position-dialog .position-benefits h3 { max-width:26ch }
html:has(.position-dialog[open]) { overflow:hidden }
@media(max-width:700px) {
  .position-dialog { width:calc(100% - 32px); max-height:calc(100dvh - 32px); border-radius:10px }
  .position-dialog-scroll { position:relative; z-index:1; max-height:calc(100dvh - 32px) }
  .position-dialog-content { padding:36px 24px 32px }
  .position-dialog-brand { padding-right:40px }
  .position-dialog-close { top:12px; right:14px }
  .position-dialog-header { margin-bottom:32px }
    .position-dialog .position-requirements { margin-top:32px }
  .position-dialog .position-benefits { padding:24px 20px }
}
@media(prefers-reduced-motion:reduce) { .position-dialog-close { transition:none } }

/* Recruitment introduction: title on the left, copy aligned at the upper right. */
.join-page #postdoctoral { display:grid; grid-template-columns:minmax(280px,.85fr) minmax(0,1.4fr); align-items:start; gap:32px 56px; margin-bottom:44px }
.join-page #postdoctoral-title, .join-page #opportunities-title, .join-page #environment-title { margin-bottom:0 }
.join-page #postdoctoral > p { margin:0; max-width:none; text-align:right; font:400 18px/1.8 var(--F-body) }
.join-page #postdoctoral > p span { display:block }
@media(max-width:800px) {
  .join-page #postdoctoral { grid-template-columns:1fr; gap:24px; margin-bottom:32px }
  .join-page #postdoctoral > p { text-align:left }
}

.join-page .postdoc-card { display:flex }
.join-page .position-summary { display:flex; flex-direction:column; height:100% }
.join-page .position-cover { width:100%; flex-shrink:0 }
.join-page .position-preview { display:flex; flex-direction:column; flex:1; width:100% }
.join-page .position-toggle { margin-top:auto }

/* Focus the automation photograph on sample handling rather than the whole robot. */
.position-cover img.position-automation-detail { transform:scale(2.1); transform-origin:62% 90% }
.position-summary:hover .position-cover img.position-automation-detail { transform:scale(2.1) }