.careers-story-page{
  background:var(--ds-canvas);
  color:var(--ds-ink);
}

.careers-story-page main{
  overflow:hidden;
}

.careers-story-page main section{
  border:0;
}

.careers-shell{
  width:min(calc(100% - var(--ds-gutter) * 2),calc(var(--ds-shell) - var(--ds-gutter) * 2));
  margin-inline:auto;
}

.careers-label{
  margin:0 0 18px;
  color:var(--ds-brand-dark);
  font:600 12px/1.35 var(--ds-data);
  letter-spacing:.06em;
}

.careers-story-page h1,
.careers-story-page h2,
.careers-story-page h3,
.careers-story-page p{
  margin-top:0;
}

.careers-story-page h2{
  margin-bottom:0;
  font-size:clamp(30px,3vw,44px);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.028em;
  text-wrap:balance;
}

.careers-story-page h3{
  margin-bottom:0;
  font-size:21px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.015em;
}

html:not([lang="en"]) .careers-story-page h1,
html:not([lang="en"]) .careers-story-page h2,
html:not([lang="en"]) .careers-story-page h3{
  letter-spacing:0;
}

.careers-hero{
  padding:88px 0 112px;
  background:var(--ds-canvas);
}

.careers-hero-grid,
.careers-apply-grid{
  display:grid;
  grid-template-columns:minmax(180px,.45fr) minmax(0,1.55fr);
  gap:48px 104px;
  align-items:start;
}

.careers-hero-copy{
  max-width:900px;
}

.careers-hero h1{
  max-width:13ch;
  margin:0 0 32px;
  font-size:clamp(44px,5vw,68px);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.04em;
  text-wrap:balance;
}

html[lang="en"] .careers-hero h1{
  max-width:17ch;
}

.careers-hero-copy > p{
  max-width:680px;
  margin-bottom:0;
  color:var(--ds-text);
  font-size:19px;
  line-height:1.75;
}

.careers-purpose{
  padding:104px 0;
  background:var(--ds-surface);
}

.careers-section-head,
.careers-role-head{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:56px 104px;
  align-items:end;
  margin-bottom:64px;
}

.careers-section-head h2{
  max-width:14ch;
}

.careers-section-head > p,
.careers-role-head > p{
  max-width:620px;
  margin-bottom:2px;
  color:var(--ds-muted);
  font-size:16px;
  line-height:1.8;
}

.careers-value-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--ds-border-strong);
  border-bottom:1px solid var(--ds-border);
}

.careers-value-list article{
  min-height:280px;
  padding:32px 36px 40px 0;
}

.careers-value-list article + article{
  padding-left:36px;
  border-left:1px solid var(--ds-border);
}

.careers-index{
  display:block;
  margin-bottom:58px;
  color:var(--ds-quiet);
  font:500 11px/1 var(--ds-data);
}

.careers-value-list h3{
  margin-bottom:14px;
}

.careers-value-list p{
  max-width:350px;
  margin-bottom:0;
  color:var(--ds-muted);
  font-size:15px;
  line-height:1.75;
}

.careers-people{
  padding:104px 0;
  background:var(--ds-canvas);
}

.careers-people-grid{
  display:grid;
  grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr);
  gap:64px 104px;
}

.careers-people h2{
  max-width:14ch;
}

.careers-traits{
  margin:0;
  padding:0;
  border-top:1px solid var(--ds-border-strong);
  list-style:none;
}

.careers-traits li{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:24px;
  padding:25px 0;
  border-bottom:1px solid var(--ds-border);
}

.careers-traits li > span{
  padding-top:5px;
  color:var(--ds-quiet);
  font:500 11px/1 var(--ds-data);
}

.careers-traits p{
  max-width:680px;
  margin-bottom:0;
  color:var(--ds-text);
  font-size:17px;
  line-height:1.7;
}

.careers-role{
  padding:104px 0;
  background:var(--ds-night);
  color:#fff;
}

.careers-role .careers-label{
  color:#aeb6dc;
}

.careers-role-head{
  padding-bottom:56px;
  border-bottom:1px solid #36373c;
}

.careers-role-head h2{
  max-width:15ch;
  color:#fff;
}

.careers-role-head > p{
  color:var(--ds-night-muted);
}

.careers-role-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:64px 104px;
  padding:56px 0;
}

.careers-role-grid > section + section{
  padding-left:64px;
  border-left:1px solid #36373c;
}

.careers-role-grid h3,
.careers-work-sample h3{
  margin-bottom:28px;
  color:#aeb6dc;
  font:600 12px/1.4 var(--ds-data);
  letter-spacing:.05em;
}

.careers-role-grid ul{
  margin:0;
  padding:0;
  list-style:none;
}

.careers-role-grid li{
  position:relative;
  padding:0 0 20px 24px;
  color:#e4e5e8;
  font-size:15px;
  line-height:1.75;
}

.careers-role-grid li::before{
  position:absolute;
  top:.7em;
  left:0;
  width:5px;
  height:5px;
  background:#8994c8;
  content:"";
}

.careers-work-sample{
  display:grid;
  grid-template-columns:minmax(180px,.45fr) minmax(0,1.55fr);
  gap:48px 104px;
  padding-top:48px;
  border-top:1px solid #36373c;
}

.careers-work-sample h3{
  margin-bottom:0;
}

.careers-work-sample p{
  max-width:760px;
  margin-bottom:0;
  color:var(--ds-night-muted);
  font-size:15px;
  line-height:1.8;
}

.careers-apply{
  padding:104px 0 120px;
  background:var(--ds-surface);
}

.careers-apply-grid > div{
  max-width:820px;
}

.careers-apply h2{
  max-width:18ch;
  margin-bottom:26px;
}

.careers-apply-grid > div > p{
  max-width:680px;
  margin-bottom:30px;
  color:var(--ds-muted);
  font-size:16px;
  line-height:1.8;
}

.careers-apply-link{
  display:inline-flex;
  align-items:center;
  gap:18px;
  padding-bottom:8px;
  border-bottom:1px solid var(--ds-ink);
  color:var(--ds-ink);
  font-size:14px;
  font-weight:600;
}

/* 中文有简体 zh-CN 与港式繁体 zh-HK 两种取值，所以只能按「不是英文」来判断，
   写死 zh-CN 会让繁体访客同时看到中英两版。 */
html:not([lang="en"]) .careers-story-page .lang-en,
html[lang="en"] .careers-story-page .lang-zh{
  display:none!important;
}

@media(max-width:1040px){
  .careers-hero-grid,
  .careers-apply-grid,
  .careers-work-sample{
    gap:48px;
  }

  .careers-section-head,
  .careers-role-head,
  .careers-people-grid,
  .careers-role-grid{
    gap:48px;
  }

  .careers-role-grid > section + section{
    padding-left:48px;
  }
}

@media(max-width:820px){
  .careers-shell{
    width:calc(100% - 64px);
  }

  .careers-hero-grid,
  .careers-section-head,
  .careers-people-grid,
  .careers-role-head,
  .careers-role-grid,
  .careers-work-sample,
  .careers-apply-grid{
    grid-template-columns:1fr;
  }

  .careers-hero{
    padding:64px 0 80px;
  }

  .careers-hero h1{
    font-size:clamp(40px,9vw,56px);
  }

  .careers-purpose,
  .careers-people,
  .careers-role,
  .careers-apply{
    padding-block:80px;
  }

  .careers-value-list{
    grid-template-columns:1fr;
  }

  .careers-value-list article{
    min-height:0;
    padding:32px 0;
  }

  .careers-value-list article + article{
    padding-left:0;
    border-top:1px solid var(--ds-border);
    border-left:0;
  }

  .careers-index{
    margin-bottom:30px;
  }

  .careers-role-grid > section + section{
    padding-top:48px;
    padding-left:0;
    border-top:1px solid #36373c;
    border-left:0;
  }
}

@media(max-width:520px){
  .careers-shell{
    width:calc(100% - 40px);
  }

  .careers-hero{
    padding:48px 0 64px;
  }

  .careers-hero h1{
    margin-bottom:24px;
    font-size:38px;
  }

  .careers-hero-copy > p{
    font-size:17px;
  }

  .careers-purpose,
  .careers-people,
  .careers-role,
  .careers-apply{
    padding-block:64px;
  }

  .careers-section-head,
  .careers-role-head{
    margin-bottom:48px;
  }

  .careers-role-head{
    margin-bottom:0;
    padding-bottom:40px;
  }

  .careers-traits li{
    grid-template-columns:38px minmax(0,1fr);
    gap:14px;
  }

  .careers-traits p{
    font-size:16px;
  }

  .careers-role-grid{
    padding:40px 0;
  }
}