/* courses.jamessinclair.net additions on top of site.css (the jamessinclair.net design) */
.testbar{background:var(--navy);color:var(--white);font-size:13px;line-height:1.4;text-align:center;padding:7px 16px}
.courses-more{margin-top:28px}
.nav .links a[href^="https://"]{opacity:.85}
/* featured course on the home page (used while one or two are on sale) */
.feature{display:grid;gap:28px;align-items:center;padding:8px 0 12px}
.feature .img{display:block;border:1px solid var(--navy);transform:rotate(-1deg);background:var(--white);padding:10px}
.feature .img img{display:block;width:100%;height:auto}
.feature .kind{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--pink)}
.feature h2{font-size:clamp(38px,4.6vw,64px);margin:6px 0 14px;color:var(--navy)}
.feature h2 a{color:inherit;text-decoration:none}
.feature .promise{border-left:3px solid var(--pink);padding-left:14px;margin:0 0 14px;font-size:19px}
.feature .buyrow{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:22px}
.feature .price{font-family:var(--head);font-size:44px;color:var(--pink);line-height:1}
.feature .price small{display:block;font-family:var(--body);font-size:13px;color:var(--mute,#5b6476);margin-top:4px}
@media(min-width:900px){.feature{grid-template-columns:1fr 1fr;gap:56px}}
/* widows in headings and pull-quotes */
h1,h2,.promise,.lede,blockquote p{text-wrap:pretty}
/* who's teaching this: the one navy band */
.teacher{padding:clamp(48px,7vw,96px) 0}
.teacher-grid{display:grid;gap:28px;align-items:end}
.teacher-cut{max-width:300px}
.teacher-cut img{display:block;width:100%;height:auto}
.teacher h2{color:var(--white);font-size:clamp(40px,5vw,64px);margin:6px 0 10px}
.teacher-bio{font-size:19px;color:var(--white);opacity:.92;max-width:38ch}
.teacher blockquote{margin:26px 0 0;padding:0}
.teacher blockquote p{font-family:var(--head);font-size:clamp(28px,3.4vw,42px);line-height:1.02;color:var(--white);max-width:22ch}
.teacher blockquote p:before{content:"\201C";color:var(--yellow)}
.teacher blockquote p:after{content:"\201D";color:var(--yellow)}
.teacher blockquote.minor p{font-family:var(--body);font-size:17px;line-height:1.5;max-width:52ch;opacity:.9}
.teacher cite{display:block;font-style:normal;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--yellow);margin-top:8px}
@media(min-width:900px){.teacher-grid{grid-template-columns:300px 1fr;gap:64px}}
/* the lessons */
.lessons{padding:clamp(48px,7vw,88px) 0}
.lessons-head{display:grid;gap:8px;margin-bottom:20px}
.lessons-head h2{font-size:clamp(34px,5vw,56px);margin:0}
.lessonlist{list-style:none;padding:0;margin:0;counter-reset:l;border-top:1px solid var(--navy)}
.lessonlist li{counter-increment:l;display:grid;grid-template-columns:44px 1fr auto;gap:2px 16px;padding:16px 0;border-bottom:1px solid var(--line)}
.lessonlist li:before{content:counter(l,decimal-leading-zero);grid-row:1/3;font-family:var(--head);font-size:28px;line-height:1;color:var(--pink)}
.lessonlist .lt{font-weight:700;font-size:18px;line-height:1.3}
.lessonlist .ld{grid-column:2;color:var(--mute);font-size:16px}
.lessonlist .lm{grid-row:1;grid-column:3;font-size:13px;color:var(--mute);white-space:nowrap}
@media(min-width:900px){.lessons-head{grid-template-columns:1fr 1fr;align-items:end}}
/* where it leads */
.leads{display:block;color:inherit;text-decoration:none;border:1px solid var(--navy);background:var(--white);margin-top:6px}
.leads img{display:block;width:100%;height:auto}
.leads-t{display:block;font-family:var(--head);font-size:30px;line-height:1;color:var(--navy);padding:16px 18px 6px}
.leads-d{display:block;padding:0 18px 18px;font-size:16px}
.leads:hover .leads-t{text-decoration:underline}
/* readable thumbnails in the order summary */
.fn-sum-item{grid-template-columns:96px 1fr auto}
.fn-thumb{width:96px;aspect-ratio:4/3}
.fn-thumb img{object-fit:contain;background:var(--light)}
/* product hero: James on a navy block with the workbook behind him (approved home device) */
.pstage{position:relative;height:min(420px,98vw)}
.pstage .block{position:absolute;left:20%;right:0;top:18%;bottom:0;background:var(--navy)}
.pstage .pcover{position:absolute;left:0;top:2%;width:min(60%,360px);background:var(--white);border:1px solid var(--navy);padding:8px;transform:rotate(-4deg);z-index:2}
.pstage .pcover img{display:block;width:100%;height:auto}
.pstage .cut{position:absolute;right:4%;bottom:0;width:min(50%,300px);z-index:3}
.pstage .cut img{display:block;width:100%;height:auto}
@media(min-width:900px){.pstage{height:540px}.pstage .cut{width:min(54%,340px)}}
/* the portrait in the teacher band stands on the band's bottom edge */
.teacher{padding-bottom:0}
.teacher-grid{align-items:end}
.teacher-grid>div:last-child{padding-bottom:clamp(40px,6vw,88px)}
.teacher-cut img{margin-bottom:0}
@media(max-width:899px){.teacher-cut{order:2;margin:0 auto}.teacher-grid>div:last-child{padding-bottom:8px}}
/* pay buttons match the site's buttons */
button.btn.fn-pay{font-family:var(--body);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.02em}
/* sales page band when the hero already carries the portrait: lead quote left, the rest right */
.teacher.noportrait{padding-bottom:clamp(48px,7vw,96px)}
.teacher.noportrait .teacher-grid>div:last-child{padding-bottom:0}
@media(min-width:900px){
  .teacher.noportrait .teacher-grid{grid-template-columns:1fr}
  .teacher.noportrait .teacher-copy{display:grid;grid-template-columns:1.1fr 1fr;column-gap:72px;align-items:end}
  .teacher.noportrait .minors{border-left:1px solid rgba(255,255,255,.18);padding-left:40px}
  .teacher.noportrait .minors blockquote:first-child{margin-top:0}
}