/* Chapter 02: editable content with the user's supplied concept artwork. */
.context-reference {
  --context-ink: #090f24;
  --context-copy: #5c7198;
  --context-blue: #2568ff;
  padding: 0 0 2px;
  color: var(--context-ink);
  background: linear-gradient(180deg, #fff 34%, #f8fbff 64%, #eef5ff 100%);
}
.context-reference .context-wrap { width: 88%; max-width: 1760px; margin-inline: auto; }
.context-reference .context-challenge {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 63% 24%, #e8f0fc 0, transparent 50%), #f7faff;
}
.context-reference .context-challenge-shell { position: relative; width: 100%; max-width: 2000px; min-height: clamp(320px, 21.3529vw, 427px); margin-inline: auto; }
.context-reference .challenge-copy { position: relative; z-index: 1; padding-block: clamp(54px, 4.2vw, 84px) 60px; }
.context-reference .context-kicker { color: #7186b0; font-size: clamp(12px, .8373vw, 16px); font-weight: 400; line-height: 1.6; letter-spacing: .075em; }
.context-reference .challenge-kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.context-reference .challenge-kicker::before { content: ''; width: 30px; height: 1px; background: #809dff; }
.context-reference .challenge-heading {
  margin: 0;
  font-family: Arial, 'Portfolio Noto SC', sans-serif;
  font-size: clamp(35px, 2.75vw, 55px);
  font-weight: 500;
  line-height: 1.31;
  letter-spacing: -.035em;
  text-wrap: initial;
}
.context-reference .challenge-heading span { display: block; }
.context-reference .challenge-translation { margin-top: 13px; color: #526890; font-size: clamp(18px, 1.375vw, 26px); line-height: 1.6; }
.context-reference .challenge-art { position: absolute; top: 0; right: 0; width: 39%; aspect-ratio: 652 / 357; margin: 0; overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 5%); }
.context-reference .challenge-art img { position: absolute; top: 0; left: -156.4103%; width: 256.4103%; max-width: none; height: auto; }
.context-reference .challenge-art figcaption { position: absolute; right: 24px; bottom: 9px; color: #637ca6; font-size: 10px; line-height: 1.5; }
.context-reference .context-content { padding-top: clamp(24px, 1.5vw, 30px); }
.context-reference .context-overview { display: grid; grid-template-columns: 39% 37% 18%; gap: 3%; align-items: center; }
.context-reference .context-title-block .context-kicker { margin-bottom: 16px; }
.context-reference h2 { max-width: none; font-size: clamp(32px, 2.8vw, 56px); font-weight: 700; line-height: 1.4; letter-spacing: -.025em; text-wrap: initial; }
.context-reference .context-description { padding-top: 17px; color: var(--context-copy); font-size: clamp(15px, 1.08vw, 21px); line-height: 1.7; }
.context-reference .context-description p + p { margin-top: 20px; }
.context-reference .context-description p { text-wrap: initial; }
.context-reference .context-term { white-space: nowrap; }
.context-reference .context-quote { position: relative; margin: 15px 0 0; padding: 16px 12px 16px clamp(20px, 4vw, 80px); border-left: 1px solid #d4e1f7; color: #8fa8d4; font-size: clamp(15px, 1.08vw, 21px); font-style: italic; line-height: 1.6; }
.context-reference .context-quote::before, .context-reference .context-quote::after { position: absolute; color: #d5e3ff; font: 66px/1 Georgia, serif; }
.context-reference .context-quote::before { content: '“'; left: clamp(20px, 2.7vw, 54px); top: -2px; }
.context-reference .context-quote::after { content: '”'; right: 8px; bottom: -25px; }
.context-reference .context-workflow { margin-top: 17px; }
.context-reference .context-workflow-label { display: flex; align-items: baseline; gap: 32px; margin-bottom: 13px; }
.context-reference .context-workflow-label h3 { margin: 0; font-size: clamp(14px, .9vw, 17px); font-weight: 700; line-height: 1.6; }
.context-reference .context-workflow-label span { color: #7d96c4; font-size: clamp(11px, .78vw, 15px); letter-spacing: .055em; }
.context-reference .context-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(22px, 2.2vw, 44px); margin-inline: -8px; }
.context-reference .context-step { position: relative; padding: 13px 21px 7px; min-width: 0; background: #ffffffdf; border: 1px solid #fff; border-radius: 14px; box-shadow: 0 12px 26px #cfdef51c; }
.context-reference .context-step:not(:last-child)::after { content: '→'; position: absolute; top: 50%; left: calc(100% + 7px); transform: translateY(-50%); color: #769fff; font-family: Arial, sans-serif; font-size: 28px; font-weight: 400; }
.context-reference .context-icon { display: grid; place-items: center; flex: 0 0 auto; width: 60px; height: 54px; border-radius: 13px; background: #e8f0ff; color: var(--context-blue); }
.context-reference .context-icon svg { width: 29px; height: 29px; stroke-width: 1.7; }
.context-reference .context-step-number { position: absolute; top: 14px; right: 19px; color: #809acc; font-size: 14px; font-variant-numeric: tabular-nums; }
.context-reference .context-step h4 { margin-top: 8px; color: var(--context-ink); font-size: clamp(15px, 1.02vw, 20px); font-weight: 700; line-height: 1.5; white-space: nowrap; }
.context-reference .context-step p { margin-top: 2px; color: #677fa8; font-size: clamp(13px, .925vw, 18px); line-height: 1.5; text-wrap: initial; }
.context-reference .context-step:last-child p br { display: none; }
.context-reference .context-breaks { display: grid; grid-template-columns: 31% minmax(0, 1fr); gap: 5%; width: calc(100% + 76px); margin: 24px -38px 0; padding: 16px 29px 14px 37px; border: 1px solid #fff; border-radius: 22px; background: #ffffffa6; }
.context-reference .context-breaks-summary { position: relative; }
.context-reference .context-breaks-summary::after { content: ''; position: absolute; right: -2%; top: 23px; bottom: 0; width: 1px; background: #cbdcf7; }
.context-reference .context-breaks-summary .context-kicker { letter-spacing: .04em; }
.context-reference .context-breaks-summary h3 { margin-top: 2px; font-size: clamp(21px, 1.5vw, 29px); font-weight: 500; line-height: 1.35; letter-spacing: 0; }
.context-reference .context-breaks-summary > p:last-child { margin-top: 5px; color: #7c94bf; font-size: clamp(11px, .83vw, 16px); line-height: 1.6; text-wrap: initial; }
.context-reference .context-break-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: center; }
.context-reference .context-break-list li { display: flex; gap: 18px; min-width: 0; min-height: 108px; padding: 14px 15px; border: 1px solid #fff; border-radius: 16px; background: #ffffffdf; }
.context-reference .context-break-list .context-icon { width: 54px; height: 54px; }
.context-reference .context-break-list .context-icon svg { width: 27px; height: 27px; }
.context-reference .context-break-list h4 { margin: 2px 0 0; font-size: clamp(15px, 1.02vw, 19px); line-height: 1.5; font-weight: 700; }
.context-reference .context-break-list p { margin-top: 6px; color: #7b92bb; font-size: clamp(12px, .81vw, 16px); line-height: 1.5; text-wrap: initial; }
@media (min-width: 2001px) {
  .context-reference .challenge-art { max-width: 780px; }
}
@media (max-width: 1450px) {
  .context-reference .context-step { padding-inline: 15px; }
  .context-reference .context-breaks { grid-template-columns: 31% minmax(0, 1fr); gap: 3%; width: calc(100% + 44px); margin-inline: -22px; padding-inline: 22px; }
  .context-reference .context-break-list { gap: 10px; }
  .context-reference .context-break-list li { gap: 11px; padding: 13px 11px; }
  .context-reference .context-break-list .context-icon { width: 40px; height: 44px; border-radius: 10px; }
  .context-reference .context-breaks-summary::after { right: -4%; }
}
@media (max-width: 1150px) {
  .context-reference .context-challenge-shell { min-height: 0; padding-bottom: 220px; }
  .context-reference .challenge-heading { font-size: 32px; max-width: 760px; }
  .context-reference .challenge-art { top: auto; bottom: 0; width: min(58%, 430px); }
  .context-reference .challenge-art figcaption { right: 12px; bottom: 7px; padding: 2px 6px; border-radius: 4px; background: #f8fbffeb; }
  .context-reference .challenge-copy { padding-block: 54px 34px; }
  .context-reference .context-overview { grid-template-columns: 1fr 1fr; gap: 24px 40px; }
  .context-reference .context-description { padding-top: 20px; }
  .context-reference .context-desktop-break { display: none; }
  .context-reference .context-quote { grid-column: 1 / -1; margin: 0; padding: 4px 0 4px 20px; font-size: 15px; }
  .context-reference .context-quote br { display: none; }
  .context-reference .context-quote::before, .context-reference .context-quote::after { display: none; }
  .context-reference .context-workflow { margin-top: 28px; }
  .context-reference .context-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; margin-inline: 0; }
  .context-reference .context-step { padding: 18px 20px; }
  .context-reference .context-step:nth-child(3)::after { display: none; }
  .context-reference .context-step h4 { font-size: 17px; }
  .context-reference .context-step p { font-size: 15px; }
  .context-reference .context-step p br { display: none; }
  .context-reference .context-breaks { grid-template-columns: 1fr; gap: 22px; padding: 24px; margin-bottom: 24px; }
  .context-reference .context-breaks-summary::after { display: none; }
  .context-reference .context-breaks-summary h3 br { display: none; }
  .context-reference .context-breaks-summary > p:last-child { font-size: 13px; }
  .context-reference .context-break-list li { padding: 16px; }
  .context-reference .context-break-list p { font-size: 13px; }
}
@media (max-width: 700px) {
  .context-reference .context-wrap { width: calc(100% - 40px); }
  .context-reference .context-challenge-shell { min-height: 0; padding-bottom: 176px; }
  .context-reference .challenge-copy { padding-block: 36px 24px; }
  .context-reference .challenge-kicker { margin-bottom: 18px; }
  .context-reference .challenge-heading { font-size: clamp(28px, 5.3vw, 36px); line-height: 1.3; max-width: 570px; letter-spacing: -.035em; }
  .context-reference .challenge-heading span + span { margin-top: 6px; }
  .context-reference .challenge-translation { margin-top: 18px; font-size: 16px; }
  .context-reference .challenge-art { top: auto; bottom: 0; width: min(100%, 410px); height: 196px; opacity: 1; }
  .context-reference .challenge-art figcaption { right: 12px; bottom: 7px; padding: 2px 6px; border-radius: 4px; background: #f8fbffeb; font-size: 9px; }
  .context-reference .context-content { padding-top: 28px; }
  .context-reference .context-overview { grid-template-columns: 1fr; gap: 22px; }
  .context-reference .context-title-block .context-kicker { margin-bottom: 16px; }
  .context-reference h2 { font-size: clamp(28px, 5.7vw, 38px); line-height: 1.45; }
  .context-reference .context-description { padding: 0; font-size: 15px; line-height: 1.8; }
  .context-reference .context-description p + p { margin-top: 14px; }
  .context-reference .context-quote { font-size: 14px; }
  .context-reference .context-workflow-label { gap: 14px; flex-wrap: wrap; }
  .context-reference .context-workflow-label span { font-size: 10px; }
  .context-reference .context-steps { grid-template-columns: 1fr; gap: 23px; }
  .context-reference .context-step { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 16px; padding: 18px 40px 18px 18px; }
  .context-reference .context-step .context-icon { grid-row: 1 / 3; width: 54px; align-self: center; }
  .context-reference .context-step h4 { margin-top: 0; font-size: 16px; white-space: normal; }
  .context-reference .context-step p { font-size: 14px; margin-top: 4px; }
  .context-reference .context-step-number { right: 13px; top: 17px; font-size: 12px; }
  .context-reference .context-step:not(:last-child)::after { display: block; content: '↓'; top: auto; bottom: -24px; left: 38px; transform: none; font-size: 24px; line-height: 24px; }
  .context-reference .context-breaks { width: 100%; margin: 30px 0; padding: 20px 16px; gap: 20px; border-radius: 18px; }
  .context-reference .context-breaks-summary h3 { margin-top: 8px; font-size: 21px; line-height: 1.5; }
  .context-reference .context-breaks-summary h3 br { display: initial; }
  .context-reference .context-breaks-summary > p:last-child { margin-top: 10px; font-size: 13px; }
  .context-reference .context-break-list { grid-template-columns: 1fr; gap: 12px; }
  .context-reference .context-break-list li { gap: 14px; padding: 16px 12px; min-height: 0; }
  .context-reference .context-break-list h4 { font-size: 16px; }
  .context-reference .context-break-list p { font-size: 14px; }
}