.motion-section { margin-top:70px; scroll-margin-top:28px; }
.essay-intro { border-top:1px solid var(--line); padding:34px 0 25px; display:flex; align-items:flex-start; justify-content:space-between; gap:40px; }
.essay-intro>div { max-width:790px; }
.essay-intro h2 { font:35px/1.25 var(--serif); letter-spacing:-.5px; margin:0 0 16px; }
.essay-intro p { font-size:16px; line-height:1.85; color:var(--muted); max-width:720px; }
#story-motion { display:flex; align-items:center; gap:9px; background:transparent; border:1px solid #c7cabb; padding:8px 12px; font-size:13px; color:#68715e; white-space:nowrap; margin-top:3px; }
#story-motion:hover { color:var(--gold); border-color:var(--gold); }
.family-contents { border-block:1px solid var(--line); font-size:14px; }
.family-contents summary { padding:13px 0; color:#525b49; }
.family-contents nav { display:block; padding:0 0 20px; }
.family-contents ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px 26px; list-style:none; padding:0; margin:0; }
.family-contents a { display:flex; gap:11px; font-size:14px; align-items:baseline; }
.family-contents a>span { color:var(--gold); font:12px ui-monospace,monospace; }

.family-group { margin-top:54px; }
.family-group+.family-group { margin-top:72px; padding-top:30px; border-top:1px solid var(--line); }
.family-group-heading { margin-bottom:30px; max-width:760px; }
.family-group-heading h3 { font:500 16px/1.6 var(--sans); color:#856d46; margin:0 0 9px; }
.family-group-heading p { font-size:16px; line-height:1.85; color:#6d7566; }
.family-chapter { position:relative; scroll-margin-top:28px; }
.family-chapter+.family-chapter { margin-top:45px; }
.chapter-heading { margin-bottom:20px; }
.chapter-heading h4 { font:30px/1.25 var(--serif); font-weight:400; letter-spacing:-.35px; margin:0; }
.chapter-body { display:flow-root; }
.chapter-copy p { font-size:16px; line-height:1.9; color:#555e4d; margin-bottom:20px; }
.chapter-copy .chapter-task { color:#353e2e; }
.chapter-copy .chapter-scale { font-size:14px; line-height:1.85; color:#737a69; margin-top:23px; }
.chapter-copy p:last-child { margin-bottom:0; }

.chapter-figure { --entry:1; --progress:0; float:right; width:48%; margin:-12px 0 18px 38px; position:relative; transform:translateY(calc((1 - var(--entry)) * 10px)); opacity:calc(.7 + var(--entry) * .3); }
.chapter-picture { height:340px; }
.chapter-picture canvas { display:block; width:100%; height:100%; }
.chapter-figure figcaption { display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:5px 18px; padding:4px 0 0; color:#7a806f; font-size:12px; line-height:1.7; }
.figure-measure { white-space:nowrap; }
.figure-measure strong { font:22px/1.3 var(--serif); font-weight:400; color:#94713a; font-variant-numeric:tabular-nums; margin-right:5px; }
.figure-measure>span { font-size:13px; color:#66705b; }
.figure-legend { color:#838a79; font-size:12px; }

/* Give the diagram the space its mathematical structure needs. */
.layout-compact .chapter-figure { width:37%; margin-left:36px; }
.layout-compact .chapter-picture { height:250px; }
[data-family="lineq"] .chapter-figure { width:46%; }
[data-family="schur"] .chapter-figure { width:41%; }
.layout-geometry .chapter-figure { float:left; width:55%; margin:0 42px 20px 0; }
.layout-geometry .chapter-picture { height:390px; }
.layout-network .chapter-figure { width:40%; }
.layout-network .chapter-picture { height:300px; }
.layout-squares .chapter-figure { width:39%; }
.layout-squares .chapter-picture { height:310px; }
.layout-codes .chapter-figure { width:53%; }
.layout-codes .chapter-picture { height:340px; }
.layout-tall-code .chapter-figure { width:34%; margin-top:-30px; }
.layout-tall-code .chapter-picture { height:390px; }
.layout-scheme .chapter-body,.layout-sequence .chapter-body { display:flex; flex-direction:column; }
.layout-scheme .chapter-copy,.layout-sequence .chapter-copy { display:contents; }
.layout-scheme .chapter-task,.layout-sequence .chapter-task { order:0; max-width:850px; }
.layout-scheme .chapter-figure,.layout-sequence .chapter-figure { order:1; float:none; width:100%; margin:2px auto 25px; }
.layout-scheme .chapter-figure { max-width:820px; }
.layout-scheme .chapter-picture { height:360px; }
.layout-sequence .chapter-figure { max-width:750px; }
.layout-sequence .chapter-picture { height:260px; }
.layout-scheme .chapter-observation,.layout-sequence .chapter-observation { order:2; max-width:850px; }
.layout-scheme .chapter-scale,.layout-sequence .chapter-scale { order:3; max-width:850px; margin-top:0; }
.motion-section.is-still .chapter-figure { transform:none; opacity:1; }

@media(min-width:1350px) {
  .chapter-copy p { font-size:17px; }
  .chapter-copy .chapter-scale { font-size:15px; }
  .layout-geometry .chapter-picture { height:420px; }
}
@media(max-width:1000px) {
  .chapter-figure { margin-left:28px; }
  .layout-geometry .chapter-figure { width:52%; margin-right:28px; }
  .layout-geometry .chapter-picture { height:360px; }
  .layout-compact .chapter-figure { margin-left:28px; }
  .chapter-heading h4 { font-size:28px; }
}
@media(max-width:760px) {
  .essay-intro { flex-direction:column; gap:18px; padding-top:29px; }
  .essay-intro h2 { font-size:31px; }
  #story-motion { margin:0; }
  .family-contents ol { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px; }
  .family-group { margin-top:38px; }
  .family-group+.family-group { margin-top:46px; padding-top:25px; }
  .family-group-heading { margin-bottom:27px; }
  .family-chapter+.family-chapter { margin-top:34px; }
  .chapter-heading { margin-bottom:18px; }
  .chapter-heading h4 { font-size:28px; }
  .chapter-body { display:flex; flex-direction:column; }
  .chapter-copy { display:contents; }
  .chapter-task { order:0; }
  .family-chapter .chapter-figure { order:1; float:none; width:100%; max-width:560px; margin:0 auto 23px; }
  .chapter-picture { height:310px; }
  .layout-compact .chapter-picture { height:255px; }
  .layout-geometry .chapter-picture { height:350px; }
  .layout-tall-code .chapter-picture { height:350px; }
  .layout-scheme .chapter-picture { height:320px; }
  .layout-sequence .chapter-picture { height:275px; }
  .chapter-observation { order:2; }
  .chapter-scale { order:3; }
  .chapter-copy .chapter-scale { margin-top:0; }
}
@media(max-width:430px) {
  .family-contents ol { grid-template-columns:1fr; }
  .chapter-heading h4 { font-size:27px; }
  .chapter-figure figcaption { gap:3px 13px; }
  .essay-intro h2 { font-size:30px; }
}
@media(prefers-reduced-motion:reduce) {
  .chapter-figure { transform:none!important; opacity:1!important; }
}