/* week screen: the phone board "Week", and a centred single column on a computer */
.week-band { position: relative; height: 150px; background: var(--cobalt); overflow: hidden; }
.week-band svg { position: absolute; right: -92px; top: -120px; }
.week-page { padding: 24px 24px 40px; gap: 28px; }

.week-h1 { font-family: var(--serif); font-weight: 300; font-size: 44px; line-height: 1.05; text-wrap: balance; overflow-wrap: anywhere; }
.week-sub { margin-top: 4px; font-size: 15px; color: var(--soft); }
.week-h2 { font-size: 15px; font-weight: 600; line-height: 1.4; }
.week-soft { font-size: 14px; line-height: 1.45; color: var(--soft); }

.week-steps { margin-top: 10px; }
.week-step { min-height: 48px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.week-tick { flex: none; }
.week-step-t { flex: 1; min-width: 0; font-size: 15px; }
.week-step.is-done .week-step-t { color: var(--soft); }
.week-pts { font-size: 14px; color: var(--soft); }

.week-events .week-h2 { margin-bottom: 4px; }
.week-ev { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 14px; padding: 12px 0; }
.week-ev + .week-ev { border-top: 1px solid var(--line); }
.week-when { display: flex; flex-direction: column; gap: 1px; }
.week-day { font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1.1; color: var(--cobalt); }
.week-time { font-size: 13px; color: var(--soft); }
.week-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.week-title { font-size: 16px; font-weight: 500; }
.week-line { font-size: 14px; line-height: 1.4; color: var(--soft); }
.week-link { font-size: 14px; line-height: 1.4; font-weight: 500; align-self: flex-start; }

.week-more { display: flex; flex-direction: column; gap: 24px; }
.week-part { display: flex; flex-direction: column; gap: 8px; }
.week-90 { font-size: 18px; font-weight: 500; line-height: 1.3; }
.week-big { display: flex; align-items: baseline; gap: 10px; }
.week-big .serif { font-size: 48px; line-height: 1; }
.week-tell { min-height: 48px; font-weight: 500; }

@media (min-width: 900px) {
  .week-page { max-width: 808px; padding-top: 40px; gap: 24px; }
  .week-card { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 28px; }
  .week-h1 { font-size: 48px; }
  .week-steps { margin-top: 14px; border-top: 1px solid var(--line); }
  .week-step:last-child { border-bottom: 0; }
  .week-more { gap: 0; }
  .week-more .week-part + .week-part { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
  .week-90 { font-size: 16px; font-weight: 400; }
  .btn.week-tell { align-self: center; width: auto; padding: 0 24px; }
  .week-h2 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; }
  .week-events .week-h2 { margin-bottom: 6px; }
}

/* the sprint (Part 7) */
.week-sprint { display: flex; flex-direction: column; gap: 12px; }
.week-sp-line { font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1.15; text-wrap: balance; }
.week-stage { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 6px; background: var(--wash); }
.week-stage-t { font-size: 16px; font-weight: 600; color: var(--cobalt); }
.week-stage-dl { display: flex; flex-direction: column; gap: 6px; }
.week-stage-dl div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.45; }
.week-stage-dl dt { color: var(--soft); }
.week-lesson { font-size: 15px; line-height: 1.45; }
.week-lesson a { color: var(--cobalt); text-underline-offset: 3px; }
.week-behind { font-size: 14px; line-height: 1.45; padding: 10px 12px; border-radius: 4px; background: var(--shell); color: var(--ink); }