/* Chapter 02, Lessons (main.ch2). D's grid, type and worlds come from base.css; the cover,
   section heads, rates table, facades and contact come from chapter.css. Only what this
   chapter adds is here, and every rule is scoped to .ch2 so the sheet can be added to the
   index's document on a page turn without touching anything else. */

/* ---------- cover: the portrait, on columns 4-12 ---------- */
.ch2 .cv-plate .frame { aspect-ratio: 3 / 2; }
.ch2 .cv-plate img { object-position: 38% 40%; }

/* ---------- 02.1 the first thirty minutes ----------
   Without motion (and before the script runs) the four steps are a plain list. The script adds
   .pin: the stage holds still for a short stretch while a playhead walks the half hour. */
.ch2 .tl-clock, .ch2 .tl-cv, .ch2 .tl-ticks { display: none; }
.ch2 .tl-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.ch2 .tl-step { border-bottom: 1px solid var(--rule); padding-block: clamp(20px, 2.1vw, 32px); align-items: baseline; }
.ch2 .tl-when { grid-column: 1 / 4; margin: 0; }
.ch2 .tl-t { grid-column: 4 / 8; margin: 0; font-family: var(--f-display); font-stretch: 125%; font-weight: 700; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -.02em; line-height: 1.05; }
.ch2 .tl-d { grid-column: 8 / 13; margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.38; text-wrap: pretty; }

.ch2 .tl.pin { height: calc(100svh + var(--tlpin)); padding: 0; --tlpin: 150svh; }
.ch2 .tl.pin .tl-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; container-type: size;
  --col: calc((100cqw - 2 * var(--m) - 11 * var(--g)) / 12);
  --bx: calc(var(--m) + 3 * (var(--col) + var(--g)));
}
.ch2 .tl.pin .tl-head { position: absolute; left: var(--m); right: var(--m); top: clamp(88px, 12cqh, 124px); margin: 0; }
.ch2 .tl.pin .sh-t { white-space: nowrap; line-height: .84; }
/* the caption waits in the left-hand columns, under the label; the minute sits at their foot, level with the rule */
.ch2 .tl.pin .sh-cap { position: absolute; grid-column: auto; grid-row: auto; left: 0; top: calc(100% + 22px); width: calc(3 * var(--col) + 2 * var(--g)); margin: 0; padding-right: var(--g); font-size: clamp(17px, 1.3vw, 21px); line-height: 1.35; }
.ch2 .tl.pin .tl-clock { display: flex; flex-direction: column; gap: 8px; position: absolute; left: var(--m); top: calc(var(--tlt, 260px) + var(--ry, 400px) - .7em); margin: 0; font-size: clamp(56px, 6vw, 110px); }
.ch2 .tl.pin .tl-now { font-size: 1em; line-height: .78; }
.ch2 .tl-of { color: var(--ink-soft); font-size: var(--fs-mono); line-height: 1.55; padding-top: 12px; }
.ch2 .tl.pin .tl-box { position: absolute; left: var(--bx); right: var(--m); top: var(--tlt, 260px); bottom: clamp(30px, 5cqh, 56px); }
.ch2 .tl.pin .tl-cv { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.ch2 .tl.pin .tl-steps { position: absolute; inset: 0; border: 0; pointer-events: none; }
/* each step is set above its own stretch of the rule, once that stretch has lifted to it */
.ch2 .tl.pin .tl-step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline;
  position: absolute; left: var(--sx, 0); bottom: var(--sb, 0); width: var(--sw, 360px);
  padding: 0 14px 2px 0; border: 0; background: var(--paper);
  clip-path: inset(-4px calc(100% - var(--r, 0) * 100%) -4px -4px);
}
.ch2 .tl.pin .tl-when { grid-column: 1; color: var(--ink-soft); transition: color .2s; }
.ch2 .tl.pin .tl-step.now .tl-when { color: var(--accent); }
.ch2 .tl.pin .tl-t { grid-column: 2; font-size: clamp(18px, 1.4vw, 23px); }
.ch2 .tl.pin .tl-d { grid-column: 1 / -1; margin-top: 7px; font-size: clamp(16.5px, 1.2vw, 19px); line-height: 1.34; }
.ch2 .tl.pin .tl-ticks { display: block; list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: calc(var(--ry, 400px) + 16px); height: 1.6em; color: var(--ink-soft); }
.ch2 .tl.pin .tl-ticks li { position: absolute; left: calc(var(--x) * 100%); transform: translateX(-50%); white-space: nowrap; }
.ch2 .tl.pin .tl-ticks li:first-child { transform: none; }
.ch2 .tl.pin .tl-ticks li:last-child { transform: translateX(-100%); }

/* ---------- 02.2 rates: four columns, the intro row in the accent ---------- */
.ch2 .lr-t .svc { width: 24%; }
.ch2 .lr-t .len { width: 14%; white-space: nowrap; padding-right: var(--g); }
.ch2 .lr-t thead .len { padding-right: var(--g); }
.ch2 .lr-t td.pr { width: 10%; font-size: clamp(15px, 1.1vw, 17px); }
.ch2 .lr-t td.len { color: var(--ink-soft); }
.ch2 .lr-t tr.intro > * { background: var(--accent); border-bottom-color: var(--ink); }
.ch2 .lr-t tr.intro > :first-child { box-shadow: -14px 0 0 var(--accent); }
.ch2 .lr-t tr.intro > :last-child { box-shadow: 14px 0 0 var(--accent); }
.ch2 .lr-t tr.intro td.len { color: var(--ink); }

/* ---------- 02.3 what I teach: numbered rows; production carries a loop ---------- */
.ch2 .tc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.ch2 .tc-row { border-bottom: 1px solid var(--rule); padding-block: clamp(26px, 2.8vw, 44px); align-items: baseline; row-gap: clamp(28px, 3vw, 48px); }
.ch2 .tc-no { grid-column: 1 / 4; margin: 0; }
.ch2 .tc-t { grid-column: 4 / 8; margin: 0; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 3vw, 52px); line-height: .9; letter-spacing: -.035em; }
.ch2 .tc-d { grid-column: 8 / 13; margin: 0; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.4; text-wrap: pretty; }
.ch2 .pd-fig { grid-column: 4 / 10; grid-row: 2; margin: 0; align-self: start; }
.ch2 .pd-plate .frame { aspect-ratio: 2 / 1; background: var(--ink); }
.ch2 .pd-plate img, .ch2 .pd-plate video { object-position: 50% 62%; }   /* the square session, framed on the synth */
.ch2 .pd-wave { height: 30px; margin-top: 12px; }
.ch2 .pd-wave canvas { display: block; width: 100%; height: 100%; cursor: pointer; }
.ch2 .pd-fig .cap { margin-top: 8px; }
.ch2 .pd-ctl { grid-column: 10 / 13; grid-row: 2; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 46px; }
.ch2 .pd-play { min-height: 40px; padding: 9px 17px 8px 14px; }
.ch2 .pd-tc { color: var(--ink); }
.ch2 .pd-note { margin: 0; font-size: clamp(16.5px, 1.2vw, 19px); line-height: 1.38; color: var(--ink-soft); text-wrap: pretty; }

/* ---------- 02.4 Yousician ---------- */
.ch2 .ys-fac { grid-column: 4 / 13; }

/* ---------- 02.5 teacher: the loop (it has no sound) beside the text ---------- */
.ch2 .te-grid { align-items: start; }
.ch2 .te-plate { grid-column: 4 / 8; }
.ch2 .te-plate .frame { aspect-ratio: 1 / 1; background: var(--ink); }
.ch2 .te-plate img, .ch2 .te-plate video { object-position: 72% 40%; }
.ch2 .te-text { grid-column: 8 / 13; padding-left: var(--g); border-left: 1px solid var(--rule); display: grid; gap: 1em; }
.ch2 .te-text p { margin: 0; font-size: clamp(20px, 1.6vw, 25px); line-height: 1.38; text-wrap: pretty; }

/* ---------- 02.6 for parents ---------- */
.ch2 .pa { padding-bottom: calc(100vw / 24 * 3 + clamp(110px, 10vw, 170px)); }
.ch2 .pa-list { position: relative; z-index: 1; margin: 0; border-top: 1px solid var(--ink); }
.ch2 .pa-row { border-bottom: 1px solid var(--rule); padding-block: clamp(20px, 2.1vw, 32px); align-items: baseline; }
.ch2 .pa-q { grid-column: 4 / 8; margin: 0; font-family: var(--f-display); font-stretch: 125%; font-weight: 700; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -.02em; line-height: 1.05; }
.ch2 .pa-a { grid-column: 8 / 13; margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.38; text-wrap: pretty; }

/* rows are set in a stepped wipe as they arrive */
.ch2.anim .tc-row, .ch2.anim .pa-row, .ch2.anim .lr-t tbody tr { clip-path: inset(0 100% 0 0); }
.ch2.anim .tc-row.in, .ch2.anim .pa-row.in, .ch2.anim .lr-t tbody tr.in { clip-path: inset(0 -20px 0 -20px); transition: clip-path .56s steps(7, end); }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .ch2 .pd-fig { grid-column: 4 / 13; }
  .ch2 .pd-ctl { grid-column: 4 / 13; grid-row: 3; flex-direction: row; flex-wrap: wrap; align-items: center; padding-bottom: 0; }
  .ch2 .pd-note { flex-basis: 100%; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .ch2 .tl-step { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding-block: 18px 17px; }
  .ch2 .tl-when, .ch2 .tl-t, .ch2 .tl-d { grid-column: 1; }
  .ch2 .tl-t { font-size: 21px; }
  .ch2 .tl-d { font-size: 17px; }
  .ch2 .tl.pin { --tlpin: 130svh; }
  .ch2 .tl.pin .tl-stage { --bx: var(--m); }
  .ch2 .tl.pin .tl-head { top: 84px; display: flex; flex-direction: column; gap: 12px; }
  .ch2 .tl.pin .sh-t { white-space: normal; font-size: 7.4vw; }
  .ch2 .tl.pin .sh-cap { position: static; width: auto; padding: 0; font-size: 16.5px; }
  .ch2 .tl.pin .tl-clock { top: calc(var(--tlt, 260px) - 62px); flex-direction: row; align-items: baseline; gap: 12px; font-size: 48px; }
  .ch2 .tl.pin .tl-of { padding-top: 0; }
  .ch2 .tl.pin .tl-box { bottom: 28px; }
  .ch2 .tl.pin .tl-step { display: block; padding: 0 8px 2px 0; }
  .ch2 .tl.pin .tl-when { display: block; font-size: 11px; }
  .ch2 .tl.pin .tl-t { margin-top: 3px; font-size: 17px; }
  .ch2 .tl.pin .tl-d { margin-top: 5px; font-size: 15.5px; line-height: 1.32; }

  .ch2 .lr .rt-wrap, .ch2 .ys-fac { grid-column: 1 / -1; }
  .ch2 .lr-t tr { grid-template-columns: minmax(0, 1fr) auto auto; }
  .ch2 .lr-t .svc { grid-column: 1; width: auto; }
  .ch2 .lr-t td.len { grid-column: 2; grid-row: 1; padding-top: .3em; padding-right: 0; width: auto; }
  .ch2 .lr-t td.pr { grid-column: 3; grid-row: 1; width: auto; }
  .ch2 .lr-t .what { grid-column: 1 / -1; }
  .ch2 .lr-t tr.intro { background: var(--accent); box-shadow: -10px 0 0 var(--accent), 10px 0 0 var(--accent); border-bottom-color: var(--ink); }
  .ch2 .lr-t tr.intro > * { box-shadow: none !important; }

  .ch2 .tc-row { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding-block: 22px 24px; }
  .ch2 .tc-no, .ch2 .tc-t, .ch2 .tc-d, .ch2 .pd-fig, .ch2 .pd-ctl { grid-column: 1; grid-row: auto; }
  .ch2 .tc-t { font-size: 30px; }
  .ch2 .tc-d { font-size: 18px; }
  .ch2 .pd-fig { margin-top: 14px; }
  .ch2 .pd-ctl { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
  .ch2 .pd-play { min-height: 44px; }
  .ch2 .pd-fig .cap { flex-wrap: wrap; row-gap: 2px; }

  .ch2 .te-grid { display: flex; flex-direction: column; gap: 30px; }
  .ch2 .te-plate { width: 78%; }
  .ch2 .te-text { padding-left: 0; border-left: 0; }
  .ch2 .te-text p { font-size: 19px; }

  .ch2 .pa { padding-bottom: calc(100vw / 12 * 3 + 84px); }
  .ch2 .pa-row { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding-block: 18px 17px; }
  .ch2 .pa-q, .ch2 .pa-a { grid-column: 1; }
  .ch2 .pa-q { font-size: 21px; }
  .ch2 .pa-a { font-size: 17px; }
}
/* the controls take the pointer */
.ch2 .pd-ctl button { pointer-events: auto; }