/* Calm two-line heading and a readable column beside the 16:9 grading film. */
#color-grade .grade-grid {
  grid-template-columns:minmax(320px,1fr) minmax(0,2fr);
  gap:clamp(32px,4vw,64px);
  align-items:center;
}
#color-grade .grade-copy { max-width:480px; min-width:0; }
#color-grade .grade-copy .kicker {
  font-size:10px; line-height:1.8; letter-spacing:.17em;
  margin-bottom:22px;
}
#color-grade .grade-copy .h2 {
  font-family:var(--display-zh);
  font-size:clamp(30px,2.6vw,42px);
  font-weight:400; line-height:1.4; letter-spacing:.015em;
  text-wrap:initial; margin:0 0 24px;
}
#color-grade .grade-copy .h2 em { font-style:normal; }
#color-grade .grade-copy .lead {
  font-size:14px; line-height:1.95; letter-spacing:.015em;
  text-wrap:pretty; margin:0; max-width:30em;
}
#color-grade .grade-steps { margin-top:28px; padding:0; }
#color-grade .grade-steps li {
  grid-template-columns:28px 1fr; gap:12px; padding:12px 0;
  font-size:12px; line-height:1.7; letter-spacing:.06em;
}
html[lang="en"] #color-grade .grade-copy .h2 {
  font-family:var(--serif); font-size:clamp(32px,3.1vw,46px); letter-spacing:0;
}
@media(max-width:900px) {
  #color-grade .grade-grid { grid-template-columns:minmax(0,1fr); gap:32px; }
  #color-grade .grade-copy { max-width:680px; }
  #color-grade .grade-copy .h2 { font-size:clamp(30px,4vw,40px); }
}
@media(max-width:760px) {
  #color-grade .grade-copy .h2 { font-size:clamp(28px,7.2vw,34px); line-height:1.45; margin-bottom:20px; }
  #color-grade .grade-copy .kicker { font-size:9px; letter-spacing:.1em; margin-bottom:18px; }
  #color-grade .grade-steps { margin-top:24px; }
}